@charset "UTF-8";

/* =========================================================
   まもりと（守人）— static site
   Figma: まもりと_SS / node 184:22 （デザイン幅 418px 基準）
   横方向の寸法は 418px を 100% とした % で指定し、
   max-width:480px まで比率を保ったまま拡大する。
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --c-bg:        #f8f5f1;   /* ベース背景 */
  --c-brown:     #5e483b;   /* 見出し・枠線 */
  --c-body:      #5c554c;   /* 本文 */
  --c-accent:    #b96a4e;   /* アクセント（テラコッタ） */
  --c-ink:       #302e2c;
  --c-ink2:      #332f2b;
  --c-muted:     #9c948a;
  --c-cream:     #e7dfd6;
  --c-link:      #4a443e;
  --c-hairline:  #e4dcd2;
  --c-white:     #ffffff;
  --c-offwhite:  #fffdfb;

  --font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;

  /* 418px 基準の横位置 */
  --edge-332: 10.287%;  /* 左右 43px → 内容幅 332px */
  --edge-336:  9.809%;  /* 左右 41px → 内容幅 336px */
  --edge-311: 12.799%;  /* 左右 53.5px → 内容幅 311px */

  --gap-section: 58px;  /* セクション間 */

  /* height:auto へのトランジションを許可（FAQ の開閉に使用） */
  interpolate-size: allow-keywords;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font-ja);
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; border: 0; }
strong { font-weight: 700; }

/* 日本語の折り返しを崩さない */
h1, h2, h3, p, li, a, span {
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* ---------- レイアウト土台：モバイル優先 / PC は中央寄せ 480px ---------- */
.site {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-bg);
  overflow-x: hidden;               /* 画像が枠からはみ出さない */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-section);
}

.site > * { width: 100%; }

/* ---------- セクション間の余白に強弱をつける ----------
   基準は --gap-section（58px）。話の切れ目は広げ、
   話が続いているところは詰める。ここで指定しているのは
   トップページにしか存在しないセクションだけなので、
   privacy/ など他ページの間隔は 58px のまま。

     ヒーロー
       ↓ 76px  … 導入から本題へ（大きな切れ目）
     犬の病気の治療は複雑です
       ↓ 42px  … 「お手伝いします」→「その流れ」（話が続く）
     まもりとの流れ
       ↓ 76px  … 話題が変わる（大きな切れ目）
     こんなご相談を
       ↓ 68px  … 相談内容からブランドの話へ
     まもりと命名
       ↓ 76px  … ブランドの話から疑問解消へ（大きな切れ目）
     よくある質問
       ↓ 42px  … 疑問が解けたら、そのまま行動へ（話が続く）
     その子のことで
       ↓ 58px  … 基準のまま
     フッター
   ------------------------------------------------------- */
.features  { margin-top: 18px; }   /* 58 + 18 = 76px */
.flow      { margin-top: -16px; }  /* 58 - 16 = 42px */
.topics    { margin-top: 18px; }   /* 58 + 18 = 76px */
.naming    { margin-top: 10px; }   /* 58 + 10 = 68px */
.faq       { margin-top: 18px; }   /* 58 + 18 = 76px */
.final-cta { margin-top: -16px; }  /* 58 - 16 = 42px */


/* =========================================================
   1. MV / ヒーロー
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 418 / 786;          /* デザイン比率を維持 */
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Figma の配置（w:100% / h:117.11% / top:-12.34%）を忠実に再現 */
.hero__bg img {
  position: absolute;
  left: 0;
  top: -12.34%;
  width: 100%;
  height: 117.11%;
  max-width: none;
  object-fit: cover;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 14px 0 74px;
}

/* ヘッダーロゴ */
.brandmark {
  width: 24.402%;                   /* 102 / 418 */
  padding-top: 5px;
  text-align: center;
  font-weight: 700;
  line-height: normal;
}
.brandmark__ja {
  display: block;
  font-size: 14px;
  letter-spacing: 1.3px;
  color: var(--c-ink);
}
.brandmark__kanji {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--c-ink2);
}

.hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  margin-top: 62px;
}

.hero__copy {
  width: 79.426%;                   /* 332 / 418 */
  color: var(--c-brown);
  letter-spacing: 0.69px;
}

.hero__title {
  /* 418px 時に 28px。狭い端末では比率どおりに縮めて折り返しを崩さない */
  font-size: clamp(23px, 7.2vw, 30px);
  font-weight: 700;
  line-height: 1.55;
}

.hero__lead {
  margin-top: 28px;
  width: 87.952%;                   /* 292 / 332 */
  font-size: clamp(14px, 3.59vw, 15px);
  font-weight: 500;
  line-height: 1.75;
}

/* 主役写真のための余白（比率で伸縮） */
.hero__spacer {
  flex: 1 1 auto;
  min-height: 160px;
}

.hero__cta {
  width: 65.072%;                   /* 272 / 418 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hero__hours {
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 2px;
  color: var(--c-cream);
}


/* =========================================================
   ボタン（共通）
   ========================================================= */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 20px;
  padding: 16px 20px;
  text-align: center;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

.btn__label {
  font-size: clamp(12px, 3.6vw, 15px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2px;
  white-space: nowrap;
}

.btn__icon {
  flex: none;
  width: 15px;
  height: 12px;
  object-fit: contain;
}
.btn__icon--paw {
  width: 21px;
  height: 16px;
}

/* MV のテラコッタボタン */
.btn--line {
  width: 108.088%;                  /* 294 / 272 */
  margin-left: -4.044%;
  border: 0.5px solid var(--c-accent);
  box-shadow: 0 2px 6px 0 var(--c-brown);
  color: var(--c-cream);
  background-image: linear-gradient(90deg,
      rgba(185, 106, 78, 0.61) 0%,
      rgba(167, 94, 69, 0.85) 28.846%,
      rgba(146, 80, 58, 0.9) 56.25%,
      rgb(146, 80, 58) 100%);
}

/* 下部 CTA の白ボタン */
.btn--white {
  border: 0.5px solid var(--c-accent);
  box-shadow: 0 2px 6px 0 var(--c-brown);
  color: var(--c-accent);
  background-image: linear-gradient(90deg,
      rgba(255, 255, 255, 0.61) 0%,
      rgba(255, 255, 255, 0.85) 28.846%,
      rgba(255, 255, 255, 0.9) 56.25%,
      rgb(255, 255, 255) 100%);
}

/* 下部 CTA の白フチボタン */
.btn--outline {
  min-height: 50px;
  border: 1px solid var(--c-white);
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 2px 6px 0 var(--c-white);
  color: var(--c-white);
}

/* サブ導線の輪郭線ボタン（白背景の上に置く控えめなもの）。
   LINE の主 CTA より目立たないよう、影とグラデーションは付けず、
   輪郭線＋ごく薄い塗りだけにする。
   .btn の指定に依存せず単体で成立するよう、必要な値はすべてここで持つ。 */
.btn--quiet {
  flex: none;                       /* 中央寄せの親の中で、文字幅ぶんだけ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  /* 横幅はコンテンツ幅の約 7 割。狭い端末では最低 220px を確保し、
     PC では広がりすぎないよう 300px で頭打ちにする
     （＝ LINE の主 CTA より一回り小さいゆったりした幅）。 */
  width: 68%;
  min-width: 220px;
  max-width: min(300px, 100%);
  padding: 12px 32px;
  border: 1px solid var(--c-accent);
  border-radius: 23px;              /* 既存ボタンと同じ、辺が半円になる角丸 */
  background: rgba(185, 106, 78, 0.05);
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.2px;
  white-space: nowrap;
  text-align: center;
  transition: background-color .2s ease, transform .2s ease;
}
.btn--quiet:hover {
  filter: none;                     /* 塗りが薄いので明度変化ではなく背景で示す */
  background: rgba(185, 106, 78, 0.12);
}
.btn--quiet:active { transform: translateY(1px); }

/* ラベル用の span を挟んでも、挟まなくても同じ見た目になるようにする */
.btn--quiet .btn__label {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}


/* =========================================================
   2. 犬の病気の治療は複雑です
   ========================================================= */
.features {
  width: 80.383%;                   /* 336 / 418 */
  padding-bottom: 16px;
}

.features__title {
  font-size: clamp(18.5px, 5.74vw, 24px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.26px;
  text-align: center;
  color: var(--c-brown);
}

/* 3 ブロックの下に置く、about ページへの控えめな導線（中央寄せ） */
.features__more {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  text-align: center;               /* flex が効かない環境でも中央に */
}

.features__list {
  margin-top: 33px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.feature__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Figma のトリミングをそれぞれ忠実に再現 */
.feature__media--1 { aspect-ratio: 252 / 147; }
.feature__media--1 img {
  left: -7.18%;
  top: -12.24%;
  width: 116.34%;
  height: 112.24%;
}

.feature__media--2 { aspect-ratio: 1672 / 941; }

.feature__media--3 { aspect-ratio: 290 / 167; }
.feature__media--3 img {
  left: 0;
  top: -0.15%;
  width: 100%;
  height: 109.27%;
}

.feature__text {
  margin-top: 17px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.feature__heading {
  font-size: clamp(14.5px, 4.07vw, 17px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.36px;
  color: var(--c-brown);
}

.feature__body {
  font-size: clamp(12.5px, 3.59vw, 15px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--c-body);
}


/* =========================================================
   3. まもりとの流れ
   ========================================================= */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 62px 0 131px;
  background-image: linear-gradient(158.63deg,
      rgb(185, 106, 78) 40.813%,
      rgba(185, 106, 78, 0.9) 75.81%,
      rgba(185, 106, 78, 0.7) 98.037%);
}

.flow__title {
  font-size: clamp(18.5px, 5.74vw, 24px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.26px;
  text-align: center;
  color: var(--c-white);
}

.flow__steps {
  margin-top: 66px;
  width: 79.426%;                   /* 332 / 418 */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 手すき紙のようなカード（Figma の Rectangle 2 をそのまま背景に使用） */
.step__card {
  width: 100%;
  min-height: 139px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  background-image: url("assets/card-frame.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.step__inner {
  width: 89.759%;                   /* 298 / 332 */
  display: flex;
  flex-direction: column;
  gap: 17px;
  color: var(--c-accent);
}

.step__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.step__label {
  font-size: clamp(14.5px, 4.07vw, 17px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.02px;
}
.step__num { display: inline-block; }

.step__icon {
  flex: none;
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.step__icon--sm { width: 36px; height: 36px; }
.step__icon--lg { width: 40px; height: 40px; }

.step__body {
  font-size: clamp(12px, 3.11vw, 13px);   /* 枠内は中間サイズ */
  font-weight: 400;
  line-height: 1.85;
}

/* カード間の下向き矢印 */
.step__arrow {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__arrow img {
  width: 46px;
  height: 11px;
  max-width: none;
  transform: rotate(90deg);
}

.flow__notes {
  margin-top: 66px;
  width: 79.426%;                   /* 332 / 418 */
  padding-top: 9px;
  border-top: 1px solid var(--c-white);
  color: var(--c-white);
  font-size: clamp(13px, 3.35vw, 14px);
  font-weight: 400;
  line-height: 1.9;
}


/* =========================================================
   4. こんなご相談をいただいています
   ========================================================= */
.topics {
  width: 79.426%;                   /* 332 / 418 */
  display: flex;
  flex-direction: column;
}

.topics__title {
  font-size: clamp(18.5px, 5.74vw, 24px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.26px;
  text-align: center;
  color: var(--c-brown);
}

.topics__list {
  margin-top: 31px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic {
  border: 3px solid var(--c-brown);
  border-radius: 10px;
  background: rgba(185, 106, 78, 0);
  padding: 34px 30px 32px 22px;
  color: var(--c-brown);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topic__title {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.56px;
}
.topic__title--black { font-weight: 900; }

.topic__items {
  font-size: clamp(12px, 3.11vw, 13px);   /* 枠内は中間サイズ */
  font-weight: 400;
  line-height: 1.85;
}

.topic__answer {
  font-size: clamp(12px, 3.11vw, 13px);   /* 枠内は中間サイズ */
  font-weight: 400;
  line-height: 1.9;
}

.topics__note {
  margin-top: 33px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--c-muted);
}


/* =========================================================
   5. まもりと命名
   ========================================================= */
.naming {
  background: var(--c-accent);
  padding: 48px 0;
}

.naming__inner {
  margin-left: 11.005%;             /* 46 / 418 */
  width: 88.995%;                   /* 372 / 418（右端まで） */
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.naming__title {
  font-size: clamp(17.5px, 5.26vw, 22px);
  font-weight: 500;
  line-height: 1.7;                 /* 34 / 20 */
  letter-spacing: 1px;
  color: var(--c-offwhite);
}

.naming__media {
  position: relative;
  width: 100%;
  aspect-ratio: 372 / 370;
  overflow: hidden;
}
.naming__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 14% center;
}

.naming__body {
  width: 88.441%;                   /* 329 / 372 */
  font-size: clamp(14px, 3.59vw, 15px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.26px;
  color: var(--c-white);
}
.naming__body strong {
  font-size: clamp(16px, 4.07vw, 17px);
  font-weight: 700;
  letter-spacing: 0.3px;
}


/* =========================================================
   6. よくある質問
   ========================================================= */
.faq {
  width: 79.426%;                   /* 332 / 418 */
  padding: 6px 0 19px;
}

.faq__title {
  font-size: clamp(18px, 5.5vw, 23px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.26px;
  text-align: center;
  color: var(--c-brown);
}

.faq__list {
  margin-top: 51px;
  border-top: 1px solid var(--c-hairline);
}

.faq__item {
  border-bottom: 1px solid var(--c-hairline);
}

/* --- 見出し行（クリックで開閉） --- */
.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;                 /* 既定の三角マーカーを消す */
  -webkit-tap-highlight-color: transparent;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::marker { content: ""; }

.faq__summary:hover .faq__q { color: var(--c-accent); }
.faq__summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.faq__q {
  font-size: clamp(13.5px, 3.83vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.56px;
  color: var(--c-ink2);
  transition: color .2s ease;
}

/* --- ＋ → −（縦棒が回転して横棒に重なる） --- */
.faq__mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 30px;                     /* 本文拡大に合わせて少し大きく */
}
.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1px;
  margin: -0.5px 0 0 -6.5px;
  background: var(--c-accent);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.faq__mark::after { transform: rotate(90deg); }
.faq__details[open] .faq__mark::after { transform: rotate(0deg); }

/* --- 回答 --- */
.faq__a {
  padding: 0 26px 22px 2px;
  font-size: clamp(13.5px, 3.59vw, 15px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.3px;
  color: var(--c-body);
}

/* 開閉のアニメーション（::details-content 対応ブラウザ） */
@supports selector(::details-content) {
  .faq__details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .32s cubic-bezier(.4, 0, .2, 1),
                content-visibility .32s allow-discrete;
  }
  .faq__details[open]::details-content { block-size: auto; }
}

/* 未対応ブラウザ向けフォールバック（開くときだけふわりと表示） */
@supports not selector(::details-content) {
  .faq__details[open] .faq__a {
    animation: faq-reveal .32s cubic-bezier(.4, 0, .2, 1) both;
  }
  @keyframes faq-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__mark::before,
  .faq__mark::after,
  .faq__details::details-content { transition: none; }
  .faq__details[open] .faq__a { animation: none; }
}


/* =========================================================
   7. その子のことで、ひとりで悩む前に。
   ========================================================= */
.final-cta {
  background: var(--c-accent);
  padding: 75px 0 64px;
}

.final-cta__inner {
  width: 72.010%;                   /* 301 / 418 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: var(--c-white);
}

.final-cta__title {
  font-size: clamp(18.5px, 5.5vw, 23px);
  font-weight: 500;
  line-height: 1.65;                /* 34.65 / 21 */
  letter-spacing: 1.05px;
}

.final-cta__lead {
  margin-top: -10px;                /* 見出しとの実測差（30px）に合わせる */
  font-size: clamp(14px, 3.59vw, 15px);
  font-weight: 400;
  line-height: 1.85;
  opacity: 0.92;
}

.final-cta__buttons {
  width: 105.648%;                  /* 318 / 301 */
  margin-left: -2.824%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.final-cta__note {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
  opacity: 0.75;
}


/* =========================================================
   8. フッター
   ========================================================= */
.footer {
  width: 74.402%;                   /* 311 / 418 */
  display: flex;
  flex-direction: column;
  gap: 51px;
  padding-bottom: 40px;
}

.footer__logo {
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.footer__paw {
  width: 44px;
  height: 34px;
  object-fit: contain;
}

.footer__name {
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.3px;
  text-align: center;
  color: var(--c-accent);
}

.footer__kanji {
  font-size: 9px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.6px;
  text-align: center;
  color: var(--c-accent);
}

.footer__nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.footer__col {
  width: 49.839%;                   /* 155 / 311 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col li { min-height: 17px; }

.footer__col a {
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.72px;
  color: var(--c-link);
}
.footer__col a:hover { color: var(--c-accent); }

.footer__copy {
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.44px;
  text-align: center;
  color: var(--c-link);
}


/* =========================================================
   小さめの端末（〜360px）での微調整
   文字は画像化していないので、字間と余白だけを詰めて
   折り返しが崩れないようにする
   ========================================================= */
@media (max-width: 360px) {
  .btn__label { letter-spacing: 1.2px; }
  .topic { padding: 28px 20px 26px 18px; }
  .step__head { gap: 10px; }
  .hero__spacer { min-height: 120px; }
}

@media (max-width: 320px) {
  .btn__label { letter-spacing: 0.6px; }
}


/* ---------- 印刷 ---------- */
@media print {
  .site { max-width: none; }
  .siteheader { display: none; }
}


/* =========================================================
   ▼ 追加ブロック（ここから下は後から足したもの）
   固定ヘッダー ＋ ハンバーガーメニュー
   既存のセクションには一切影響しません。
   ・.site の外側に置いた position:fixed の要素なので
     既存コンテンツを押し下げない（オーバーレイ）
   ・幅と中央寄せは .site と同じ（max-width:480px）
   ========================================================= */

/* アンカーリンクの着地点が固定ヘッダーに隠れないように */
html { scroll-padding-top: 72px; }

.siteheader {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 100%;
  max-width: 480px;                 /* 本体と同じ幅・同じ中央寄せ */
  background: transparent;          /* ヘッダー背景は透明 */
  pointer-events: none;             /* 透明部分は下のコンテンツに触れる */
}

/* ロゴ：ヒーロー内にあった位置（top:14px / left:0 / 幅 24.402%）を
   そのまま踏襲して固定表示する。.brandmark の指定を再利用するので
   フォント・サイズ・字間・色は既存とまったく同じ。 */
.siteheader__logo {
  position: absolute;
  /* バーと同じ高さの箱にして、その中で上下中央ぞろえにする
     （右側の CTA ボタン・ハンバーガーと縦位置が一致する） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 0;
  left: 0;
  height: 64px;                     /* = .siteheader__bar の高さ（12 + 40 + 12） */
  padding-top: 0;                   /* .brandmark の上パディングを打ち消す（ヒーロー側の場所取りには影響しない） */
  z-index: 1;                       /* バーの背景より前面に */
  text-decoration: none;            /* 下線を出さない */
}

/* ヒーロー内の元のロゴは、余白を保ったまま描画だけ消す
   （削除すると下のコンテンツが約45px 上にずれてしまうため） */
.brandmark--ghost { visibility: hidden; }

.siteheader__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;        /* 右寄せ：無料で相談する → ハンバーガー */
  gap: 12px;
  padding: 12px 20px 12px 0;        /* 左は 0（ロゴを左端に置くため） */
  pointer-events: none;

  /* 最上部（MV表示中）は完全に透明。スクロールで白背景をフェードイン */
  background-color: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  box-shadow: 0 1px 0 rgba(94, 72, 59, 0), 0 6px 16px rgba(94, 72, 59, 0);
  transition: background-color .3s ease,
              -webkit-backdrop-filter .3s ease,
              backdrop-filter .3s ease,
              box-shadow .3s ease;
}

/* MV を過ぎて 2 枚目以降のセクションに重なったら背景を出す */
.siteheader.is-scrolled .siteheader__bar {
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(94, 72, 59, 0.08), 0 6px 16px rgba(94, 72, 59, 0.06);
  pointer-events: auto;             /* 背景が出ている間は下のコンテンツに触らせない */
}

/* 実際の操作対象だけクリックを受ける */
.siteheader__logo,
.siteheader__toggle,
.siteheader__cta,
.gmenu { pointer-events: auto; }


/* ---------- ハンバーガーアイコン（線のみ・背景なし） ---------- */
.siteheader__toggle {
  position: relative;
  flex: none;
  width: 40px;                      /* 見た目は線だけだがタップ領域は 40px を維持 */
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.siteheader__toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.siteheader__bars,
.siteheader__bars::before,
.siteheader__bars::after {
  position: absolute;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--c-brown);
}
.siteheader__bars {
  top: 50%;
  left: 50%;
  margin: -0.75px 0 0 -9px;
  transition: background-color .2s ease;
}
.siteheader__bars::before,
.siteheader__bars::after {
  content: "";
  left: 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.siteheader__bars::before { top: -6px; }
.siteheader__bars::after  { top: 6px; }

/* 開いたら × に */
.siteheader.is-open .siteheader__bars { background: transparent; }
.siteheader.is-open .siteheader__bars::before { transform: translateY(6px) rotate(45deg); }
.siteheader.is-open .siteheader__bars::after  { transform: translateY(-6px) rotate(-45deg); }


/* ---------- 無料で相談する CTA ---------- */
.siteheader__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: 0.5px solid var(--c-accent);
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(94, 72, 59, 0.35);
  color: var(--c-cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  /* 既存 MV ボタンと同じグラデーション */
  background-image: linear-gradient(90deg,
      rgba(185, 106, 78, 0.61) 0%,
      rgba(167, 94, 69, 0.85) 28.846%,
      rgba(146, 80, 58, 0.9) 56.25%,
      rgb(146, 80, 58) 100%);
  transition: filter .2s ease, transform .2s ease;
}
.siteheader__cta:hover { filter: brightness(1.05); }
.siteheader__cta:active { transform: translateY(1px); }


/* ---------- ドロワーメニュー（中身はフッターと同一） ---------- */
.gmenu {
  display: grid;
  grid-template-rows: 0fr;          /* 閉じている状態 */
  margin: 0 20px;
  border-radius: 14px;
  background: var(--c-bg);
  box-shadow: 0 10px 28px rgba(94, 72, 59, 0.18);
  opacity: 0;
  visibility: hidden;               /* 閉じている間はタブ移動の対象外 */
  transform: translateY(-8px);
  transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1),
              opacity .24s ease,
              transform .32s cubic-bezier(.4, 0, .2, 1),
              visibility 0s linear .32s;
}

.siteheader.is-open .gmenu {
  grid-template-rows: 1fr;          /* 開いた状態 */
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1),
              opacity .24s ease,
              transform .32s cubic-bezier(.4, 0, .2, 1),
              visibility 0s;
}

.gmenu__inner {
  overflow: hidden;
  min-height: 0;
}

.gmenu__grid {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 24px;
}

.gmenu__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.gmenu__col a {
  display: block;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.72px;
  color: var(--c-link);             /* フッターと同じ色 */
  transition: color .2s ease;
}
.gmenu__col a:hover,
.gmenu__col a:focus-visible { color: var(--c-accent); }


/* 狭い端末では 2 カラムのまま収まるよう詰める（追加分のみに適用） */
@media (max-width: 360px) {
  .siteheader__bar { padding: 12px 14px 12px 0; }
  .gmenu { margin: 0 14px; }
  .gmenu__grid { padding: 20px 16px 22px; gap: 8px; }
  .gmenu__col a { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .gmenu,
  .siteheader.is-open .gmenu,
  .siteheader__bar,
  .siteheader__bars,
  .siteheader__bars::before,
  .siteheader__bars::after { transition: none; }
}


/* =========================================================
   ▼ 背景色トライアル（見た目確認用）
   ベース背景のベージュ #f8f5f1 を白 #ffffff に置き換える。
   <body class="theme-white"> が付いたページにだけ適用されるので、
   privacy/ など他ページの見た目は変わらない。
   → 元に戻すときは index.html の class="theme-white" を外すか、
     このブロックごと削除するだけ。
   ========================================================= */
body.theme-white,
body.theme-white .site {
  background: #ffffff;
}


/* =========================================================
   ▼ PC レイアウト（min-width: 768px 以上でのみ適用）
   ここから下は追記のみ。767px 以下（スマホ）には一切影響しない。
   ========================================================= */
@media (min-width: 768px) {

  /* ---------- 1. コンテナを広げる ---------- */
  .site {
    max-width: 960px;
    gap: 88px;                       /* SP の 58px より広く */
  }

  /* 固定ヘッダーも同じ幅に合わせる */
  .siteheader { max-width: 960px; }
  .siteheader__bar { padding: 16px 28px 16px 0; }
  .siteheader__logo { left: 28px; width: 102px; height: 72px; }   /* 高さ = PC のバー（16+40+16） */
  .gmenu {                                          /* ドロワーはハンバーガーの下に */
    max-width: 420px;
    margin-left: auto;
    margin-right: 28px;
  }

  /* ---------- 5. ヒーローが引き伸ばされないように ---------- */
  .hero {
    aspect-ratio: 4 / 3;              /* 418:786 の縦長比を解除（横長すぎない比率に） */
  }
  .hero__bg img {                     /* 縦長写真を横長の枠に自然に収める */
    top: 0;
    height: 100%;
    object-position: center;      /* 枠と写真がどちらも 4:3 なのでトリミングなし */
  }
  .hero__inner { padding: 20px 0 72px; }
  .hero__spacer { min-height: 120px; }

  /* ---------- 4. 文章は読みやすい幅に抑えて中央へ ---------- */
  /* 写真の主役（犬）に文字が重ならないよう、PC ではコピーを左に寄せる */
  .hero__body {
    align-items: flex-start;
    padding-left: clamp(28px, 5vw, 56px);
  }
  .hero__copy {
    width: 100%;
    max-width: min(400px, 40%);      /* 写真の犬にかからない幅に収める */
  }
  .hero__title {
    font-size: clamp(25px, 3.5vw, 30px);   /* 狭い PC 幅でも見出しが折り返さないように */
  }
  .hero__lead { width: 100%; }

  .hero__cta { width: 100%; max-width: 320px; }
  .btn--line { width: 100%; margin-left: 0; }

  /* ---------- 2. 特徴 3 ブロックを横並びに ---------- */
  .features {
    width: 96%;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
  }
  .features__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 44px 28px;
    align-items: start;
  }
  /* 列が狭くなるため、SP 用に入れた手動改行は PC では解除して自然に流す */
  .feature__body br { display: none; }

  /* ---------- まもりとの流れ（縦積みのまま幅だけ抑える） ---------- */
  .flow { padding: 84px 0 112px; }
  .flow__steps,
  .flow__notes { width: 100%; max-width: 640px; }

  /* ---------- 3. 相談カテゴリを 2×2 グリッドに ---------- */
  .topics {
    width: 92%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .topics__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .topic { height: auto; }            /* 行内で高さが揃うようにする */
  .topics__note {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- 4. 命名ストーリー ---------- */
  .naming { padding: 72px 0; }
  .naming__inner {
    width: 92%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 横長のまま、右側（海・空）と上の空を切り落として犬を視野の中央に置く。
     元画像は犬が左から約29%の位置にいるため、単純な cover では中央まで寄らない。
     画像を高さ 145% に拡大し、上に -43% ずらしてから左端基準で切り出すことで、
     犬の全身（顔〜足元）を保ったまま横方向の中央に来るようにしている。
     いずれも % 指定なので幅が変わっても比率は崩れない。 */
  .naming__media {
    aspect-ratio: 3 / 2;              /* 比率は維持＝犬が中央のトリミングもそのまま */
    /* 幅は .naming__inner いっぱい（＝下の本文と同じ左右端） */
  }
  .naming__media img {
    inset: auto;
    left: 0;
    top: -43%;
    width: 100%;
    height: 145%;
    object-position: 0% center;
  }
  .naming__body { width: 100%; }

  /* ---------- 4. よくある質問 ---------- */
  .faq {
    width: 92%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- 4. 最後の CTA ---------- */
  .final-cta { padding: 96px 0 88px; }
  .final-cta__inner {
    width: 92%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }
  .final-cta__buttons {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- フッター ---------- */
  .footer {
    width: 92%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- 下層ページ（privacy / company / contact） ---------- */
  .pp, .cp, .ct {
    width: 92%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 132px;
  }
}


/* =========================================================
   ▼ ページ表示時のふわっと出るアニメーション（CSS のみ）

   ・JavaScript もスクロール監視も一切使わない。
     読み込み時に animation が 1 回再生されるだけ。
   ・動かすのは opacity と translateY だけ。横方向には動かさないので
     はみ出しは起きない。overflow / height / display / position は不変。
   ・遅延は最大 0.32 秒。全体でも 1 秒以内に必ず表示が完了する。
   ========================================================= */
/* =========================================================
   ▼ スクロールで各ブロックが現れるモーション（安全版）

   ・JavaScript が動いたときだけ <html class="js"> が付き、その時だけ
     要素を「最初は隠す」。JSが失敗すれば常に表示されるので真っ白にならない。
   ・動かすのは opacity と transform(translateY) のみ。
     overflow / height / position / display は一切変更しない → スクロールを妨げない。
   ・画面に入ったら .is-visible が付いて、なめらかに表示される（1度きり）。
   ========================================================= */
.js .fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform;
}
.js .fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* 同時に現れるグループ（PCの横並びカード等）に、控えめな時間差をつける。 */
.js .fade-in--d1.is-visible { transition-delay: .05s; }
.js .fade-in--d2.is-visible { transition-delay: .12s; }
.js .fade-in--d3.is-visible { transition-delay: .19s; }
.js .fade-in--d4.is-visible { transition-delay: .26s; }

/* 動きを減らす設定では最初から表示（アニメなし） */
@media (prefers-reduced-motion: reduce) {
  .js .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}