@charset "UTF-8";

/* =========================================================
   共通項目（デザイントークン）
   ========================================================= */
:root {
  /* ---- Color ---- */
  --c-pink:        #ED496C; /* アクセント / 見出し(英) / カードタイトル */
  --c-prune:       #303560; /* Pu-600 本文・濃テキスト */
  --c-blue:        #3F6ECC; /* Pu-400 リンク / Talent */
  --c-water:       #447FE0; /* 共創領域 ラベル */
  --c-white:       #FFFFFF;
  --c-page:        #FFFFFF; /* body背景 */
  --c-bg:          #EEF1F4; /* セクション淡色背景 / カード背景 */
  --c-gray:        #ACADB0; /* プレースホルダー */
  --c-sun:         #FFDA1B;
  --c-contact-top: #1f2347;
  --c-contact-btm: #0b0d22;

  /* ---- Spacing ---- */
  --p-3xs: 4px;
  --p-2xs: 8px;
  --p-xs:  12px;
  --p-s:   16px;
  --p-md:  20px;
  --p-lg:  24px;
  --p-xl:  32px;
  --p-2xl: 40px;
  --p-4xl: 60px;

  /* ---- Radius ---- */
  --r-4:   4px;
  --r-2xs: 12px;
  --r-xs:  16px;
  --r-tag: 18px;

  /* ---- Font size ---- */
  --fs-en:        48px;
  --fs-jp:        16px;
  --fs-subtitle:  24px;
  --fs-list:      18px;
  --fs-body:      16px;
  --fs-body-s:    14px;
  --fs-note:      10px;
  --fs-req:       12px;

  /* ---- Layout ---- */
  --content:   1280px;
  --gutter:    60px;
  --card-max:  840px;

  --font-jp: "Noto Sans JP", sans-serif;
}

/* =========================================================
   ベース / リセット
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--c-prune);
  background: var(--c-page);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

/* セクション共通の枠 */
.fv, .story, .strength, .cocreation, .policy, .faq, .contact {
  position: relative;
  padding: var(--p-4xl) 0;
  overflow: hidden;
}

/* 共通：inner（セクション直下のコンテナ） 最大幅1280 / 左右padding60 */
.inner {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* コンテンツを縦並び・中央寄せにするinner */
.strength__inner, .cocreation__inner, .policy__inner, .faq__inner, .contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.policy__inner, .faq__inner { position: relative; z-index: 1; }

/* 共通：セクション見出し（英＋和） */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-2xs);
  text-align: center;
  line-height: 1.2;
  color: var(--c-pink);
  font-weight: 900;

  & .section-head__en {
    margin: 0;
    font-size: var(--fs-en);
    letter-spacing: .1em;
  }
  & .section-head__jp {
    margin: 0;
    font-size: var(--fs-jp);
    letter-spacing: .1em;
  }
  & .section-head__jp--pink { color: var(--c-pink); }
  & .section-head__en--white,
  & .section-head__jp--white { color: var(--c-white); }
}

/* 共通：本文リード */
.strength__lead, .cocreation__lead, .policy__lead, .faq__lead, .contact__lead, .thanks__lead {
  width: 100%;
  margin: var(--p-md) 0 0;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: .1em;
  line-height: 1.9;
}

/* 共通：白カード */
.cocreation__item, .policy__item, .faq__item {
  background: var(--c-white);
  border-radius: var(--r-2xs);
  box-shadow: 0 2px 12px rgba(48, 53, 96, .05);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  /* 初期値：FVに重なる位置（通常フロー上にあり、スクロールで一緒に流れて消える） */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  height: 75px;
  padding: 0 var(--p-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;

  & .site-header__logo { display: flex; align-items: center; }
  & .site-header__logo-default { width: 167px; height: auto; }
  & .site-header__logo-scroll { display: none; width: 316px; height: auto; }

  & .site-header__nav {
    display: flex;
    align-items: center;

    & a {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 75px;
      padding: 0 var(--p-md);
      font-weight: 700;
      font-size: var(--fs-list);
      letter-spacing: .03em;
      color: var(--c-pink);
      /* 透過ヘッダー上でも視認できるよう白フチを追加 */
      -webkit-text-stroke: 3px var(--c-white);
      paint-order: stroke fill;
      transition: color .2s;
    }

    /* hover時：下向き矢印 */
    & a::after {
      content: "";
      position: absolute;
      bottom: 12px;
      width: 19px;
      height: 11px;
      background: center / contain no-repeat url("img/nav-hover-arrow.png");
      opacity: 0;
      transition: opacity .2s;
    }

    & a:hover { color: var(--c-blue); }
    & a:hover::after { opacity: 1; }
  }
}

/* スクロール後：上からふわっと出てきて上部固定。ロゴを差し替え */
.site-header.is-fixed {
  position: fixed;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 12px rgba(48, 53, 96, .08);
  animation: header-drop .45s ease both;

  & .site-header__logo-default { display: none; }
  & .site-header__logo-scroll { display: block; }
}

@keyframes header-drop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* =========================================================
   FV（ファーストビュー）
   ========================================================= */
.fv {
  /* 上部はヘッダー(75px)の重なり分を確保 */
  padding: 90px 0 var(--p-4xl);
  background: var(--c-white);

  & .fv__deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }
  & .fv__deco--left  { left: 0;  bottom: 0;  width: 330px; }
  & .fv__deco--right { right: 0; top: 0; width: 300px; }

  & .fv__inner {
    position: relative;
    z-index: 1;
    padding-top: var(--p-2xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p-2xl);
  }

  & .fv__hero {
    display: flex;
    flex-direction: column;
    gap: var(--p-xl);
    flex-shrink: 0;
  }

  & .fv__logo-img { width: 360px; max-width: 100%; }

  & .fv__heading {
    margin: 0;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.8;
    letter-spacing: .1em;
    color: var(--c-prune);
  }

  & .fv__tags {
    display: grid;
    grid-template-columns: repeat(3, 114px);
    gap: 10px;

    & .tag {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      background: var(--c-pink);
      color: var(--c-white);
      border-radius: var(--r-tag);
      font-weight: 700;
      font-size: var(--fs-list);
      letter-spacing: .1em;
    }
    & .tag--plain {
      background: none;
      color: var(--c-prune);
      font-size: var(--fs-body);
    }
  }

  & .fv__mv {
    flex-shrink: 1;
    min-width: 0;
    & img { width: 100%; max-width: 766px; }
  }

  /* scroll インジケーター（Figma忠実：ドット→縦線→"scroll"） */
  & .fv__scroll {
    position: absolute;
    right: 60px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    & .fv__scroll-track {
      position: relative;
      width: 1.5px;
      height: 66px;
      background: var(--c-pink);
    }
    /* ライン上を下降してスクロールを促すドット */
    & .fv__scroll-dot {
      position: absolute;
      top: 0;
      left: 50%;
      width: 6px;
      height: 6px;
      margin-left: -3px;
      border-radius: 50%;
      background: var(--c-pink);
      animation: fv-scroll-dot 1.8s ease-in-out infinite;
    }
    & .fv__scroll-text {
      font-family: var(--font-jp);
      font-weight: 700;
      font-size: 20px;
      letter-spacing: .03em;
      color: var(--c-pink);
    }
  }
}

@keyframes fv-scroll-dot {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(60px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fv__scroll-dot { animation: none; top: 0; }
}

/* =========================================================
   Story
   ========================================================= */
.story {
  background: url("img/bakground-noise.png") no-repeat center / cover, var(--c-bg);

  & .story__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("img/story-inner-background.png") no-repeat center center;
    background-size: auto;
  }

  & .story__row {
    position: relative;
    width: 100%;
    margin-top: var(--p-2xl);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }

  & .story__text {
    width: 600px;
    flex-shrink: 0;
    font-weight: 700;
    font-size: var(--fs-list);
    letter-spacing: .1em;
    line-height: 1.9;

    & p { margin: 0 0 16px; }
    & p:last-child { margin-bottom: 0; }
  }

  & .story__image {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    & img { width: 440px; }
  }
}

/* 共通：外部リンク（テキスト＋アイコン） */
.utility-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-3xs);
  margin: var(--p-2xl) auto 0;
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: .08em;
  color: var(--c-blue);
  text-decoration: underline;

  & .utility-link__icon,
  & + .utility-link__icon { width: 20px; height: 20px; }
}
.utility-link__icon, .ext-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat center / contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233F6ECC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M11 3h6v6'/><path d='M17 3l-8 8'/><path d='M15 12v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4'/></svg>");
}

/* =========================================================
   Strength
   ========================================================= */
.strength {
  /* 左上コーナーの装飾（Figma: back / 100×100）＋ 白背景 */
  background: url("img/strength-background.png") no-repeat left top, var(--c-white);

  & .strength__list {
    width: 100%;
    margin-top: var(--p-2xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--p-md);
  }

  & .strength__item {
    background: url("img/bakground-noise.png") no-repeat center / cover, var(--c-bg);
    border-radius: var(--r-2xs);
    padding: var(--p-lg) var(--p-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--p-lg);
    text-align: center;
  }

  & .strength__img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    & img { max-height: 180px; width: auto; }
  }

  & .strength__title {
    margin: 0;
    color: var(--c-pink);
    font-weight: 700;
    font-size: var(--fs-subtitle);
    letter-spacing: .08em;
  }

  & .strength__body {
    margin: 0;
    color: var(--c-prune);
    font-weight: 400;
    font-size: var(--fs-body-s);
    letter-spacing: .1em;
    line-height: 1.9;
    text-align: left;
  }
}

/* =========================================================
   Co-Creation
   ========================================================= */
.cocreation {
  background: url("img/bakground-noise.png") no-repeat center / cover, var(--c-bg);

  & .cocreation__list {
    width: 100%;
    max-width: var(--card-max);
    margin-top: var(--p-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--p-md);
  }

  & .cocreation__item {
    padding: var(--p-2xl);
    display: flex;
    align-items: flex-start;
    gap: var(--p-xl);
  }

  & .cocreation__label {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--p-3xs);
    color: var(--c-water);
    font-weight: 700;
    line-height: 1.5;

    & .cocreation__lead-label { margin: 0; font-size: var(--fs-list); letter-spacing: .08em; }
    & .cocreation__name { margin: 0; font-size: var(--fs-subtitle); letter-spacing: .08em; }
  }

  & .cocreation__desc {
    flex: 1;
    color: var(--c-prune);
    font-weight: 400;
    font-size: var(--fs-body-s);
    letter-spacing: .1em;
    line-height: 1.9;
    & p { margin: 0; }
  }

  & .cocreation__image {
    margin: var(--p-2xl) auto 0;
    display: flex;
    justify-content: center;
    & img { width: 360px; }
  }
}

/* =========================================================
   Policy
   ========================================================= */
.policy {
  background: var(--c-white);

  & .policy__deco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
  }

  & .policy__list {
    width: 100%;
    margin-top: var(--p-2xl);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--p-md);
  }

  & .policy__item {
    background: url("img/bakground-noise.png") no-repeat center / cover, var(--c-white);
    width: 570px;
    max-width: 100%;
    min-height: 190px;
    padding: var(--p-s) var(--p-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
  }

  & .policy__text {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--p-s);
  }
  & .policy__title {
    margin: 0;
    color: var(--c-pink);
    font-weight: 700;
    font-size: var(--fs-subtitle);
    letter-spacing: .08em;
  }
  & .policy__body {
    margin: 0;
    color: var(--c-prune);
    font-weight: 400;
    font-size: var(--fs-body-s);
    letter-spacing: .1em;
    line-height: 1.9;
  }

  & .policy__icon {
    width: 180px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    & img { max-width: 160px; max-height: 160px; width: auto; }
  }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  background: var(--c-bg);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: no-repeat top center / cover url("img/faq-bg.png");
    z-index: 0;
  }
  & .faq__list {
    width: 100%;
    max-width: var(--card-max);
    margin-top: var(--p-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--p-md);
  }

  & .faq__item {
    padding: var(--p-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--p-s);
  }

  & .faq__q {
    margin: 0;
    display: flex;
    gap: .6em;
    color: var(--c-pink);
    font-weight: 700;
    font-size: var(--fs-subtitle);
    letter-spacing: .08em;
    line-height: 1.5;
    & span { font-weight: 700; }
  }

  & .faq__a {
    color: var(--c-prune);
    font-weight: 400;
    font-size: var(--fs-body-s);
    letter-spacing: .1em;
    line-height: 1.9;
    & p { margin: 0 0 .4em; }
    & p:last-child { margin-bottom: 0; }
  }
}

/* =========================================================
   Contact
   ========================================================= */
.contact {
  background: linear-gradient(180deg, var(--c-contact-top), var(--c-contact-btm));
  color: var(--c-white);

  & .contact__lead {
    color: var(--c-white);
    line-height: 1.8;
  }

  & .contact__form {
    width: 100%;
    max-width: 760px;
    margin-top: var(--p-2xl);
    padding-top: var(--p-md);
    border-top: 2px solid var(--c-white);
    display: flex;
    flex-direction: column;
    gap: var(--p-md);
  }

  & .field {
    display: flex;
    flex-direction: column;
    gap: var(--p-3xs);
    flex: 1;
  }
  & .field-row { display: flex; gap: var(--p-md); }

  & label {
    display: flex;
    align-items: center;
    gap: var(--p-3xs);
    font-weight: 700;
    font-size: var(--fs-list);
    letter-spacing: .08em;
    color: var(--c-white);
    & .req { color: var(--c-pink); font-size: var(--fs-req); }
  }

  & input, & select, & textarea {
    width: 100%;
    background: var(--c-prune);
    border: 1px solid var(--c-white);
    border-radius: var(--r-4);
    padding: var(--p-2xs);
    color: var(--c-white);
    font-family: var(--font-jp);
    font-size: var(--fs-body);
    letter-spacing: .1em;
  }
  & input, & select { height: 40px; }
  & textarea { height: 120px; resize: vertical; }

  & ::placeholder { color: var(--c-gray); }
  & select:invalid { color: var(--c-gray); }

  & .select {
    position: relative;
    & select {
      appearance: none;
      padding-right: 36px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 18px;
    }
  }

  /* 個人情報の取り扱い同意（mail.php: name="Policy"） */
  & .contact__policy {
    display: flex;
    justify-content: center;
    margin-top: var(--p-2xs);

    & label {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--p-2xs);
      width: 100%;
      color: var(--c-white);
      font-size: var(--fs-body-s);
      letter-spacing: .04em;
      cursor: pointer;
    }
    & input[type="checkbox"] {
      width: 20px;
      height: 20px;
      min-width: 20px;
      padding: 0;
      border: none;
      background: none;
      accent-color: var(--c-pink);
      cursor: pointer;
    }
    & a {
      color: #9db8ec;
      text-decoration: underline;
    }
    & a:hover { color: var(--c-white); }
  }

  & .contact__submit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--p-2xs);
    margin-top: var(--p-md);

    & button {
      width: 360px;
      max-width: 100%;
      height: 96px;
      border: none;
      border-radius: var(--r-xs);
      background: var(--c-pink);
      color: var(--c-white);
      font-family: var(--font-jp);
      font-weight: 700;
      font-size: var(--fs-subtitle);
      letter-spacing: .08em;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(32,34,38,.12), 0 6px 6px rgba(32,34,38,.10), 0 12px 12px rgba(32,34,38,.08);
      transition: opacity .2s;
    }
    & button:hover { opacity: .9; }

    & .contact__note {
      margin: 0;
      font-size: var(--fs-note);
      letter-spacing: .08em;
      color: rgba(255, 255, 255, .5);
    }
  }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--c-bg);
  padding: var(--p-md) var(--p-2xl);

  & .site-footer__inner {
    max-width: var(--content);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--p-2xl);
  }

  & .site-footer__brand {
    flex-shrink: 0;
    padding-right: var(--p-2xl);
    border-right: 1px solid #d4d9e0;
    text-align: center;

    & .site-footer__logo { width: 214px; margin-inline: auto; }
  }

  & .site-footer__nav {
    display: flex;
    gap: var(--p-2xl);

    & ul { display: flex; flex-direction: column; gap: var(--p-xs); }

    & a {
      display: inline-flex;
      align-items: center;
      gap: var(--p-3xs);
      font-weight: 700;
      font-size: var(--fs-body-s);
      letter-spacing: .08em;
      color: var(--c-blue);
      text-decoration: underline;
      white-space: nowrap;
    }
  }

  & .site-footer__copy {
    max-width: var(--content);
    margin: var(--p-s) auto 0;
    font-weight: 500;
    font-size: var(--fs-req);
    letter-spacing: .03em;
    color: var(--c-prune);
    text-align: right;
  }
}

/* =========================================================
   レスポンシブ（最小限）
   ========================================================= */
@media (max-width: 1080px) {
  .fv .fv__inner { flex-direction: column; align-items: flex-start; }
  .fv .fv__mv { align-self: center; }
  .story .story__row { flex-direction: column; align-items: center; }
  .story .story__text { width: 100%; max-width: 600px; }
  .strength .strength__list { grid-template-columns: 1fr; max-width: 480px; }
  .cocreation .cocreation__item { flex-direction: column; gap: var(--p-s); }
  .cocreation .cocreation__label { width: 100%; }
  .policy .policy__item { width: 100%; max-width: 570px; }
  .site-footer .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer .site-footer__brand { border-right: none; padding-right: 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 24px; --fs-en: 36px; }

  /* header（SP）：kaonaviロゴのみを左上に、ナビは非表示 */
  .site-header { height: 60px; padding: 0 16px; }
  .site-header .site-header__nav { display: none; }
  .site-header .site-header__logo-default { width: 120px; }
  .site-header.is-fixed .site-header__logo-scroll { width: 210px; }

  /* スクロールで出てくる固定ヘッダーでは nav の Contact のみ表示 */
  .site-header.is-fixed .site-header__nav { display: flex; }
  .site-header.is-fixed .site-header__nav a { display: none; }
  .site-header.is-fixed .site-header__nav a[href="#contact"] { display: flex; }

  /* FV（SP）：ロゴ→見出し→タグを縦積み中央、MVイラストは全幅で下部 */
  .fv { padding: 64px 0 0; }
  .fv .fv__deco--left  { width: 200px; }
  .fv .fv__deco--right { width: 220px; }

  .fv .fv__inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 0;
  }
  .fv .fv__hero {
    width: 100%;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  .fv .fv__logo-img { width: 100%; max-width: 320px; }
  .fv .fv__heading { font-size: 23px; line-height: 1.7; }

  .fv .fv__tags {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: 290px;
    gap: 8px;
  }
  .fv .fv__tags .tag { height: 26px; font-size: 13px; }
  .fv .fv__tags .tag--plain { font-size: 13px; }

  /* MVは画面幅いっぱいにブリードさせて下端に配置（gutter分だけ外側へ） */
  .fv .fv__mv {
    align-self: stretch;
    width: auto;
    max-width: none;
    margin: 24px calc(-1 * var(--gutter)) 0;
  }
  .fv .fv__mv img { display: block; width: 100%; max-width: none; }
  .fv .fv__scroll { display: none; }

  .contact .field-row { flex-direction: column; }

  /* story（SP）：本文内の改行(br)を無効化して自然に折り返す */
  .story .story__text br { display: none; }

  /* strength（SP）：padディングは上下左右40px */
  .strength .strength__item { padding: var(--p-2xl); }

  /* policy（SP）：テキストとアイコンを縦並びに（gapは詰める、上下paddingは40px） */
  .policy .policy__item { flex-direction: column; gap: 0; padding-block: var(--p-2xl); }

  /* footer（SP）：中央寄せ＋リンク群を縦並びにして横スクロールを防ぐ */
  .site-footer .site-footer__inner { align-items: center; }
  .site-footer .site-footer__nav { flex-direction: column; gap: var(--p-xs); width: 100%; }
  .site-footer .site-footer__nav ul { width: 100%; }
  .site-footer .site-footer__nav a { display: flex; white-space: normal; }
}

/* =========================================================
   Thanks（サンクスページ）
   ========================================================= */
.thanks-page { background: var(--c-bg); }

.thanks {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--p-2xl) 0;
}

/* 四隅の装飾（FVのfv__decoと同様。Y位置はページ上端/下端に吸着） */
.thanks__corner {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.thanks__corner--left  { left: 0;  bottom: 0; width: 400px; }
.thanks__corner--right { right: 0; top: 0;    width: 300px; }

.thanks__inner {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* 白い有機パネル（背景） */
  & .thanks__panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
  }
  /* キューブ装飾 */
  & .thanks__deco {
    position: absolute;
    left: calc(50% + 280px);
    right: auto;
    top: 50%;
    transform: translateY(-20%);
    width: 240px;
    z-index: 1;
    pointer-events: none;
  }

  & .thanks__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--p-lg);
    text-align: center;
  }

  /* 見出しはsection-head__enを流用（ウェイトのみ調整） */
  & .section-head__en { font-weight: 700; letter-spacing: .08em; }
  & .thanks__lead { margin: 0; }
  & .thanks__mail {
    margin: 0;
    color: #000;
    font-weight: 700;
    font-size: var(--fs-list);
    letter-spacing: .08em;
  }
  & .utility-link { margin: 0; }
}

/* 戻るリンク（utility-linkを流用し、アイコンを左向き矢印に） */
.utility-link--back .utility-link__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233F6ECC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='16' y1='10' x2='4.5' y2='10'/><polyline points='9.5 5 4.5 10 9.5 15'/></svg>");
}

@media (max-width: 720px) {
  .thanks__inner { min-height: 0; }
  .thanks .section-head__en { font-size: 36px; }
  .thanks .thanks__lead br { display: none; }

  /* 四隅の装飾は50%に縮小 */
  .thanks .thanks__corner--left  { width: 200px; }
  .thanks .thanks__corner--right { width: 150px; }

  /* パネルはテキストを覆うサイズへ（coverで拡大） */
  .thanks .thanks__panel { object-fit: cover; }

  /* キューブは文字にかからないよう下部中央へ下げる */
  .thanks .thanks__content { padding-bottom: 120px; }
  .thanks .thanks__deco {
    width: 120px;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 16px;
    transform: translateX(-50%);
  }
}