/* =========================================================
   top.css  — TOPページ専用スタイル
   ========================================================= */

/* =====================
     Intro
  ===================== */
.intro {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.logo {
  width: 30rem;
}

/* 線描画（ゆっくり） */
.line {
  fill: none;
  stroke: #e59a2e;
  stroke-miterlimit: 10;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: drawLine 3s ease forwards;
}

.line-back {
  stroke-width: 0.29;
  animation-delay: 0s;
}

.line-middle {
  stroke-width: 0.58;
  animation-delay: 0.5s;
}

/* 前面フレーム（マスク表示） */
.frame-fill {
  fill: #fff;
  stroke: #e59a2e;
  stroke-width: 1.16;
}

/* 塗り */
.fill-group polygon {
  fill: #e59a2e;
}

/* マスク（少し早めに開始） */
.mask-rect {
  transform-origin: right;
  transform: scaleX(0);
  animation: wipe 1.6s ease forwards;
  animation-delay: 1.4s;
}

/* テキスト */
.logo-text {
  margin-top: 2.8rem;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: #333;
  opacity: 0;
  animation: textFade 1s ease forwards;
  animation-delay: 2.2s;
}

/* Intro終了 */
.intro.is-hidden {
  animation: introOut 1.2s ease forwards;
}

/* =====================
     Animations
  ===================== */
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes wipe {
  to {
    transform: scaleX(1);
  }
}

@keyframes textFade {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes introOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ------------------------------
   MV（メインビジュアル）
------------------------------ */
.mv_area {
  position: relative;
  width: 100%;
  max-width: 192rem;
  height: 60rem;
  display: flex;
  align-items: center;
  margin: 10.5rem auto 8rem;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
}

.tit_area {
  position: absolute;
  display: flex;
  width: 100%;
  flex-direction: column;
  font-family: "Noto Serif JP", serif;
  color: #fff;
  filter: drop-shadow(.3rem .3rem .3rem rgba(0, 0, 0, 0.25));
  top: 13.8%;
  left: 9.72%;
}

.mv_tit {
  font-size: clamp(2.8rem, 3.47vw, 6.6rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.16em;
  margin-bottom: 4rem;
}

.mv_sub_tit {
  font-size: clamp(2rem, 1.94vw, 3.7rem);
  font-weight: 200;
}

.mv_img_area {
  position: absolute;
  width: 67.01%;
  max-width: 96.5rem;
  min-width: 57.5rem;
  right: -4.86%;
  top: 0;
  overflow: visible;
}

.mv_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04) translate3d(0, 0, 0);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}

.mv_slider {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.js-enabled .mv_slider {
  opacity: 0;
}

.js-enabled .mv_slider.is-ready {
  opacity: 1;
}

.mv_media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.js-enabled .mv_slider.is-ready .mv_slide.is-active .mv_media,
.js-enabled .mv_slider.is-ready .mv_slide.is-previous .mv_media {
  clip-path: inset(0 0 0 0);
}

.mv_slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  clip-path: polygon(17.6% 0, 100% 0, 82.4% 100%, 0 100%);
  z-index: 0;
  transition: opacity 0.7s var(--ease-standard);
}

.mv_slide.is-previous,
.mv_slide.is-active {
  opacity: 1;
}

.mv_slide.is-previous {
  z-index: 1;
}

.mv_slide.is-active {
  z-index: 2;
}

.mv_media.is-mask-animating {
  animation: mvMaskReveal 2.2s cubic-bezier(0.24, 1, 0.32, 1) both;
}

.mv_img.is-cinematic-motion {
  animation: mvImageCinematic 3.2s cubic-bezier(0.19, 1, 0.22, 1) both;
}

/* ------------------------------
   MVアニメーション
------------------------------ */
.mv-frame {
  position: relative;
  width: 100%;
  height: 56rem;
  overflow: visible;
}

/* 2つのSVGを重ねる */
.frame-svg1 {
  position: absolute;
  bottom: -3rem;
  left: -3rem;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.frame-svg2 {
  position: absolute;
  bottom: -4.2rem;
  left: -4.5rem;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* ---- 共通設定 ---- */
.line-outer,
.line-inner {
  fill: none;
  stroke: #fbb03b;
  opacity: 0.7;
  stroke-miterlimit: 10;
  stroke-dasharray: 3000;
  stroke-linejoin: round;
  stroke-linecap: round;
  shape-rendering: geometricPrecision;
}

/* ---- 外線（左→右への描画） ---- */
.line-outer {
  stroke-width: 5px;
  stroke-dashoffset: 3000;
}

/* ---- 内線（右→左 逆方向から描画） ---- */
.line-inner {
  stroke-width: 3px;
  stroke-dashoffset: -3000;
}

.mv-frame.is-line-ready .line-outer {
  animation: drawLineOuter 1.5s ease-out forwards;
}

.mv-frame.is-line-ready .line-inner {
  animation: drawLineInner 1.5s ease-out forwards;
  animation-delay: 1.2s;
}

/* ---- KEYFRAMES ---- */

/* 外線：0に向かう＝通常方向 */
@keyframes drawLineOuter {
  to {
    stroke-dashoffset: 0;
  }
}

/* 内線：-3000 → 0 ＝逆方向から描く */
@keyframes drawLineInner {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes mvMaskReveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes mvImageCinematic {
  0% {
    transform: scale(1.145) translate3d(-3.8%, 0.95%, 0);
  }

  100% {
    transform: scale(1.03) translate3d(0.85%, 0, 0);
  }
}

/* ------------------------------
   About Section
------------------------------ */

#about .flex_box {
  display: flex;
  max-width: 144rem;
  margin: 0 auto;
  justify-content: flex-start;
}

#about .img_box {
  width: 45.28%;
  margin-left: -6.94%;
}

#about .txt_box {
  display: flex;
  flex-direction: column;
  width: 40.97%;
  color: #222;
  margin-left: 10.42%;
  font-weight: 700;
}

#about .section_tit {
  font-size: clamp(2rem, 2.64vw, 3.8rem);
  mix-blend-mode: multiply;
  line-height: 1.5;
  letter-spacing: .1em;
}

#about .section_txt {
  font-size: clamp(1.2rem, 1.25vw, 1.8rem);
  margin-top: 3.89%;
  line-height: 1.7;
  color: #000;
  letter-spacing: .05em;
}

#about .section_txt+.section_txt {
  margin-top: 1.3%;
}

/* ------------------------------
   Service Section
------------------------------ */
#service .flex_box,
#design .flex_box {
  display: flex;
  justify-content: flex-start;
  margin-top: 6.94%;
  max-width: 108rem;
}

#service .img_box,
#design .img_box {
  width: 46.3%;
  margin-left: 11.57%;
}

#service .txt_box,
#design .txt_box {
  display: flex;
  flex-direction: column;
  width: 42.41%;
  color: #222;
  font-weight: 700;
}

#service .section_btn,
#design .section_btn {
  align-self: flex-start;
  margin-top: 3.89%;
}

/* ------------------------------
   Design Work Section
------------------------------ */
#design .img_box {
  position: relative;
}

.design_img1,
.design_img2 {
  width: 65.2%;
  position: absolute;
}

.design_img2 {
  bottom: 0;
  right: 0;
}


/* ------------------------------
   Contact Section
------------------------------ */
.contact_section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  margin-top: 12rem;
}

/* 背景（アニメ対象） */
.contact_bg {
  position: absolute;
  inset: 0;
  background: url("/assets/images/optimized/contact_bg.jpg") center/cover no-repeat;
  transform: scale(0.7);
  transition: transform 0.15s linear;
  will-change: transform;
}

/* テキスト */
.contact_inner {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.contact_tit {
  font-size: clamp(3rem, 4vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.contact_sub {
  margin-top: 2rem;
  font-size: clamp(1.4rem, 2vw, 2rem);
  opacity: 0.9;
}

.contact_txt {
  font-size: clamp(2.5rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
}

.contact_area {
  display: flex;
  gap: 5rem;
  width: 70%;
  margin: auto;
}

@media (max-width: 48rem) {
  .logo {
    width: min(58vw, 22rem);
  }

  .logo-text {
    margin-top: 2rem;
    font-size: 1.4rem;
    letter-spacing: 0.28em;
  }

  .mv_area {
    height: 62rem;
    margin: 7.2rem auto 4.8rem;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .tit_area {
    top: 2.8rem;
    left: 2rem;
    z-index: 2;
    width: calc(100% - 4rem);
  }

  .mv_tit {
    font-size: clamp(3.2rem, 10vw, 4.4rem);
    line-height: 1.5;
    letter-spacing: 0.12em;
    margin-bottom: 1.6rem;
  }

  .mv_sub_tit {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1.45;
  }

  .mv_img_area {
    width: 112vw;
    max-width: none;
    min-width: 0;
    right: -27vw;
    top: 28rem;
  }

  .mv-frame {
    height: 68vw;
    min-height: 28rem;
  }

  .frame-svg1 {
    bottom: -1.8rem;
    left: -1.8rem;
  }

  .frame-svg2 {
    bottom: -2.4rem;
    left: -2.8rem;
  }

  .line-outer {
    stroke-width: 4px;
  }

  .line-inner {
    stroke-width: 2px;
  }

  #about .flex_box {
    flex-direction: column;
    gap: 3.2rem;
    padding: 0 2rem;
  }

  #about .img_box {
    width: 100%;
    margin-left: 0;
  }

  #about .txt_box {
    width: 100%;
    margin-left: 0;
  }

  #about .section_tit {
    font-size: clamp(2.4rem, 7.5vw, 3.4rem);
    line-height: 1.55;
    white-space: normal;
  }

  #about .section_txt {
    font-size: 1.4rem;
    line-height: 1.9;
    margin-top: 1.8rem;
  }

  #service .flex_box,
  #design .flex_box {
    flex-direction: column;
    gap: 3.2rem;
    margin-top: 3.2rem;
  }

  #service .txt_box,
  #design .txt_box,
  #service .img_box,
  #design .img_box {
    width: 100%;
    margin-left: 0;
  }

  #service .img_box {
    order: -1;
  }

  #design .img_box {
    min-height: 28rem;
  }

  .design_img1 {
    width: 82%;
    left: 0;
    top: 0;
  }

  .design_img2 {
    width: 46%;
    right: 0;
    bottom: 0;
  }

  .contact_section {
    height: auto;
    min-height: 68rem;
    margin-top: 7.2rem;
  }

  .contact_inner {
    top: auto;
    transform: none;
    min-height: 68rem;
    display: flex;
    align-items: center;
    padding: 0 2rem;
  }

  .contact_area {
    width: 100%;
    flex-direction: column;
    gap: 3.2rem;
    text-align: center;
  }

  .contact_tit {
    font-size: clamp(3.2rem, 10vw, 4.4rem);
  }

  .contact_sub {
    margin-top: 1.2rem;
    font-size: 1.4rem;
  }

  .contact_txt {
    font-size: clamp(1.7rem, 5.2vw, 2.2rem);
    line-height: 1.8;
    letter-spacing: 0.04em;
    text-align: center;
  }
}