@charset "UTF-8";
/* ============================================================
   七五三専門LP（753.noblem.jp）
   ------------------------------------------------------------
   制作指示書 §5・§6・§12 に対応。

   色（§5）
     ベース      生成り・アイボリー・白
     サブ背景    淡いグレージュ
     本文        墨黒・チャコール
     差し色      くすみ朱・深緑・控えめな淡い金 ── 小さく使う
     CTA         背景と十分な差のある濃色

     ※ 朱を大きく使うと成人式サイト（#8e3a3e）と近くなるため、
       朱は見出しの前の小さな印などに留め、CTAは墨黒にしている。

   書体（§5）
     感情的な見出し       明朝（Shippori Mincho）
     H1・料金・CTA・本文  ゴシック（Noto Sans JP）
     欧文・数字           Cormorant Garamond
     ※ 1歳専門サイトと同じ組み合わせにそろえている
     本文を明朝にするとスマートフォンで読みにくいため。

   横スワイプ（§6）
     使うのは4か所だけ。右端を見切れさせて続きがあることを示す。
     縦スクロールを横移動に変換する仕掛けは入れない。
============================================================ */

/* ---------- 下ごしらえ ---------- */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
table{border-collapse:collapse;width:100%}

/* 動きを減らす設定に従う（§12） */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js-rise{opacity:1!important;transform:none!important}
}

:root{
  /* 1歳専門サイトの実測値に合わせている。
     生成りより白く、本文は墨黒より弱い。
     差し色もくすみ朱をやめ、グレージュ〜茶にそろえた */
  --base:#ffffff;        /* 地は純白 */
  --white:#ffffff;
  --sub:#faf9f7;         /* 沈めた地。ほとんど白に近い */
  --ink:#45413f;         /* やわらかい墨 */
  --ink2:#77716d;        /* 補助 */
  --ink3:#9a938d;        /* さらに薄い注記 */
  --line:#ece8e3;        /* 線はごく薄く */
  --accent:#9c8a75;      /* 差し色。茶 */
  --accent-soft:#b09d88;
  --gold:#c8b8a8;        /* グレージュ */
  --cta:#6f5d49;         /* 濃い茶。1歳サイトの茶を濃くした色 */
  --cta-h:#87735b;

  /* 1歳専門サイトと同じ組み合わせ */
  --mincho:'Shippori Mincho','Noto Serif JP',serif;
  --gothic:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --en:'Cormorant Garamond',serif;

  --gut:clamp(20px,5.4vw,40px);
  --inner:1120px;
  --narrow:720px;
  --sec:clamp(64px,13vw,116px);
  --fixH:72px;

  /* ---- 部品の寸法。1歳専門サイトに合わせている ----
     色と書体は前から合わせてあったが、部品の形だけ違っていた。
       ボタン   角丸 6px  →  30px（丸型）／高さ 54px → 56px
       写真     角丸 8px  →  12px
     ★ 次に合わせ直すときは、ここだけを見ればよいようにする。 */
  --btn-r: 30px;          /* 1歳: border-radius 30px */
  --btn-h: 56px;          /* 1歳: min-height 56px */
  --btn-p: 0 32px;        /* 1歳: padding 0 32px */
  --btn-h-sm: 44px;       /* 1歳: .btn--small */
  --btn-p-sm: 0 22px;
  --radius-photo: 12px;   /* 1歳: --radius-photo 12px */
}

body{
  background:var(--base);color:var(--ink);
  font-family:var(--gothic);
  font-size:15px;line-height:1.95;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--fixH);
}
@media (min-width:768px){ body{font-size:16px;padding-bottom:0} }

/* ---------- 共通 ---------- */
.wrap{max-width:var(--inner);margin:0 auto;padding:0 var(--gut)}
.wrap--n{max-width:var(--narrow)}
/* 追従ヘッダー（56px）が見出しにかぶらないように、
   ページ内リンクで飛んだときの止まる位置を下げる */
.sec{padding:var(--sec) 0;scroll-margin-top:70px}
.tint{background:var(--sub)}
p{margin:0 0 1.3em}
p:last-child{margin-bottom:0}
b,strong{font-weight:500}
.note{font-size:13px;color:var(--ink2);line-height:1.85}

/* 感情的な見出しは明朝 */
.sec__h{
  font-family:var(--mincho);font-weight:500;
  font-size:clamp(21px,5vw,32px);line-height:1.75;letter-spacing:.04em;
  margin:0 0 clamp(24px,4.6vw,44px);position:relative;padding-top:20px;
}
/* 見出しの前に置く小さな印。差し色を使うのはここだけ */
.sec__h::before{content:'';position:absolute;top:0;left:0;
  width:22px;height:1px;background:var(--accent-soft)}
.sec__lead{margin:-14px 0 clamp(20px,4vw,34px);color:var(--ink2);font-size:14.5px}

/* 未確認の情報。目に付くようにしておく */
/* 情報が埋まれば消える印。仮の状態が分かればよいので、線は引かない */
.todo{display:inline;padding:0 3px;background:#fdf3d0;color:#8a6a10;
  font-size:12.5px;letter-spacing:0;border-radius:2px}

/* ---------- お客様の声 ---------- */
/* お客様の声の並び
   ★ 縦に積むと、1件が長いので画面がとても長くなる。
     せまい画面では横に流し、広い画面では2列に並べる。
     店舗の並び（.stores）と同じ考え方。
   ★ 折りたたみ（続きを読む）は、どちらの並びでも効かせる。
     横に流すときは高さが揃うので、長い1件に引きずられて
     全部が縦に伸びるのを防げる。 */
.voices{display:grid;gap:clamp(20px,4vw,30px)}
.voices > .voice{margin:0}   /* 間隔は gap に任せる */
@media (max-width:899px){
  .voices{display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* ★ 止まる位置にも余白を入れること。
         入れないと、カードが画面の左端にぴったり付いて止まり、
         ひとつ前のカードが端に少しだけ残る。
         既存の横スワイプ（.swipe）には入っていた。 */
    scroll-padding-left:var(--gut);scroll-padding-right:var(--gut);
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding-left:var(--gut);padding-right:var(--gut);padding-bottom:4px}
  .voices::-webkit-scrollbar{display:none}
  .voices > .voice{flex:0 0 auto;width:min(82vw,360px);margin:0;scroll-snap-align:start}
}
@media (min-width:900px){ .voices{grid-template-columns:1fr 1fr} }

.voice{margin:0 0 clamp(20px,4vw,30px);padding:clamp(22px,4.5vw,32px);
  background:var(--sub);border-radius:10px}
.voice__star{margin:0 0 10px;color:var(--accent-soft);font-size:14px;letter-spacing:.3em}
.voice__b{margin:0;font-size:14.5px;line-height:2.05;color:var(--ink)}
/* 長いクチコミを折りたたむ。
   ★ display:none にはしない。文はそのまま置いたまま、
     見える行数だけ止める。検索側には全文が読める状態でいる。
   ★ たたむ指示は JavaScript で付ける。
     JavaScript が動かない環境では、たたまずに全文が出る。 */
.voice--fold .voice__b{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.voice--fold.is-open .voice__b{display:block;overflow:visible}
.voice__more{margin:10px 0 0;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--accentText);letter-spacing:.04em}
.voice__more::after{content:'';display:inline-block;margin-left:7px;width:7px;height:7px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.voice--fold.is-open .voice__more::after{transform:translateY(1px) rotate(-135deg)}

.voice__c{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink)}
.voice__c span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink2)}

/* 素材待ちの節 */
.hold{padding:clamp(20px,4vw,28px);border:1px dashed var(--line);
  border-radius:var(--radius-photo);background:var(--white)}

/* ---------- ボタン（§7） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--btn-h);padding:var(--btn-p);border-radius:var(--btn-r);
  font-family:var(--gothic);font-size:15.5px;font-weight:500;letter-spacing:.04em;
  transition:background .25s,border-color .25s,color .25s,transform .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(69,65,63,.14)}
.btn:active{transform:scale(.97);box-shadow:none}
@media (prefers-reduced-motion:reduce){ .btn:hover,.btn:active{transform:none} }          /* 押したときの小さな反応（§5） */
.btn--primary{background:var(--cta);color:var(--white)}
.btn--primary:hover{background:var(--cta-h)}
.btn--sub{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--sub:hover{border-color:var(--ink2)}
.btn--sm{min-height:var(--btn-h-sm);padding:var(--btn-p-sm);font-size:14px}
.btn--wide{width:100%;margin-top:18px}

/* 主CTAを視覚的に強くする。LINEは補助（§7） */
.cta-row{display:grid;gap:10px;margin-top:clamp(26px,5vw,40px)}
.cta-row .btn--primary{font-size:16px;min-height:58px}
.cta-row .btn--sub{min-height:48px;font-size:14px}
@media (min-width:600px){
  .cta-row{grid-template-columns:minmax(240px,1.6fr) minmax(140px,1fr);align-items:stretch}
  .cta-note{grid-column:1/-1}
}
.cta-note{font-size:13.5px;color:var(--ink2);margin:2px 0 0}

/* ---------- 出現の動き（§5） ---------- */
.js-rise{opacity:0;transform:translateY(16px);
  transition:opacity .75s ease,transform .85s cubic-bezier(.22,1,.36,1)}
.js-rise.on{opacity:1;transform:none}

/* ---------- ヘッダー ---------- */
/* ★ 下へスクロールしている間は隠す。
     写真や着物を見ているときに、画面の上を常に占めているのが邪魔になる。
     上へ戻すとすぐ出るので、押したいときには届く。 */
.hd{position:sticky;top:0;z-index:40;background:rgba(250,247,242,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  transition:transform .28s var(--ease,ease)}
/* ★ 名前は is-hidden にすること。
     取り込みページの上に出る帯（.nb-backbar）が
       body:has(header.is-hidden) .nb-backbar { transform: translateY(-100%) }
     という決まりで一緒に隠れる作りになっている。
     別の名前を付けると、ヘッダーだけ消えて帯が残る。 */
/* ★ -100% ちょうどで書くこと。
     取り込みのときに build-anywhere が
       transform: translateY(-100%)
     という書き方だけを見つけて、帯の高さ（36px）を足した
       translateY(calc(-100% - 36px))
     に書き換える。-101% のように書くと拾われず、
     ヘッダーが帯のぶんだけ画面に残る。 */
.hd.is-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){ .hd{transition:none} }
.hd__in{display:flex;align-items:center;justify-content:space-between;height:56px}
.hd__logo{margin:0;font-family:var(--mincho);font-size:15px;letter-spacing:.1em;line-height:1.3}
.hd__logo small{display:block;font-size:12px;letter-spacing:.2em;color:var(--accent)}
.hd__r{display:flex;align-items:center;gap:10px}
.hd__cta{display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;
  border-radius:5px;background:var(--cta);color:var(--white);font-size:13.5px}

/* メニュー。9ページに分かれているので、行き来する手立てを常に出しておく */
.hd__menu{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:0 12px;border:1px solid var(--line);border-radius:5px;
  background:transparent;color:var(--ink);font-size:13px;letter-spacing:.06em;
  cursor:pointer;font-family:inherit}
.hd__menu:hover{border-color:var(--accent)}
.hd__menu__b{position:relative;width:14px;height:9px;flex:0 0 auto}
.hd__menu__b::before,.hd__menu__b::after{content:'';position:absolute;left:0;right:0;
  height:1px;background:currentColor;transition:transform .2s}
.hd__menu__b::before{top:0}
.hd__menu__b::after{bottom:0}
.hd__menu[aria-expanded="true"] .hd__menu__b::before{transform:translateY(4px) rotate(20deg)}
.hd__menu[aria-expanded="true"] .hd__menu__b::after{transform:translateY(-4px) rotate(-20deg)}

.menu{position:sticky;top:56px;z-index:39;background:var(--white);
  border-bottom:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.05)}
.menu__in{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  padding-top:8px;padding-bottom:12px}
@media (min-width:640px){ .menu__in{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .menu__in{grid-template-columns:repeat(4,1fr)} }
.menu__in a{display:flex;flex-direction:column;gap:1px;min-height:52px;
  justify-content:center;padding:6px 4px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
.menu__in a:hover{color:var(--accent)}
.menu__en{font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--ink2)}
.menu__ja{font-family:var(--mincho);font-size:14.5px;letter-spacing:.03em}

/* ---------- 1. ファーストビュー ---------- */
.fv{display:grid;grid-template-rows:minmax(46svh,1fr) auto;
  min-height:calc(100vh - 56px);min-height:calc(100svh - 56px)}
.fv__ph{position:relative;overflow:hidden;margin:0}
.fv__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fv__body{background:var(--base);padding:clamp(24px,6vw,36px) 0 clamp(28px,7vw,40px)}
/* H1は検索向け。画面ではコピーを主役にするので控えめに置く */
.fv__h1{font-family:var(--gothic);font-weight:400;font-size:13.5px;color:var(--ink2);
  letter-spacing:.04em;line-height:1.7;margin:0 0 12px}
.fv__catch{font-family:var(--mincho);font-weight:500;
  font-size:clamp(24px,6.4vw,40px);line-height:1.65;letter-spacing:.05em;margin:0}
.fv__sub{font-size:14px;color:var(--ink2);margin:16px 0 0;line-height:1.9}
.fv__pt{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.fv__pt{gap:0 14px}
.fv__pt li{position:relative;padding:0;font-size:13.5px;color:var(--ink2)}
.fv__pt li+li::before{content:'';position:absolute;left:-8px;top:.72em;
  width:3px;height:3px;border-radius:50%;background:var(--gold)}
@media (min-width:900px){
  .fv{grid-template-rows:none;grid-template-columns:1.05fr .95fr;
      min-height:calc(100vh - 56px)}
  .fv__body{display:flex;align-items:center;padding:0}
  .fv__body .wrap{max-width:none;padding:0 clamp(36px,4.4vw,64px)}
}

/* ---------- 横スワイプ（§6） ----------
   右端を見切れさせて、続きがあることを示す。
   scroll-snap で気持ちよく止める。JavaScriptは使わない。 */
.sec--gal{overflow:hidden}
.swipe{overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:10px;
  /* これが無いと、吸い付く位置が track の左余白を食いつぶして
     1枚目が画面の端に貼り付いてしまう */
  scroll-padding-left:var(--gut);scroll-padding-right:var(--gut)}
.swipe::-webkit-scrollbar{display:none}
.swipe__track{display:flex;gap:12px;padding:0 var(--gut);width:max-content}
.swipe__item{flex:0 0 auto;width:min(78vw,340px);margin:0;scroll-snap-align:start}
.swipe__item img{width:100%;border-radius:var(--radius-photo);aspect-ratio:3/4;object-fit:cover}
.swipe__item figcaption{margin-top:10px;font-family:var(--mincho);font-size:14px;
  letter-spacing:.04em;color:var(--ink)}
@media (min-width:900px){
  .swipe__item{width:min(34vw,380px)}
  .swipe__track{gap:20px}
}
/* スワイプできることを示す（§6） */
.swipe__hint{display:flex;align-items:center;gap:8px;justify-content:flex-end;
  max-width:var(--inner);margin:10px auto 0;padding:0 var(--gut);
  font-size:12px;letter-spacing:.24em;color:var(--ink2)}
.swipe__hint span{width:26px;height:1px;background:var(--ink2);position:relative}
.swipe__hint span::after{content:'';position:absolute;right:0;top:-3px;
  width:7px;height:7px;border-top:1px solid var(--ink2);border-right:1px solid var(--ink2);
  transform:rotate(45deg);animation:swipeArrow 1.9s ease-in-out infinite}
@keyframes swipeArrow{
  0%,100%{transform:rotate(45deg) translate(0,0)}
  50%{transform:rotate(45deg) translate(2px,-2px)}
}

/* ---------- 3. 予約時期 ---------- */
.when{display:grid;gap:26px;margin:26px 0}
@media (min-width:768px){ .when{grid-template-columns:repeat(3,1fr)} }
.when__i{padding:4px 0}
@media (min-width:768px){
  .when__i{padding:0 0 0 22px;border-left:1px solid var(--line)}
  .when__i:first-child{padding-left:0;border-left:0}
}
.when__w{font-size:12px;letter-spacing:.16em;color:var(--accent);margin:0}
.when__i h3{font-family:var(--mincho);font-weight:500;font-size:16.5px;margin:6px 0 8px}
.when__i p{font-size:13.5px;color:var(--ink2);margin:0}

/* ---------- 4. 不安 ---------- */
.worry{display:grid;gap:8px;margin-bottom:26px}
.worry li{position:relative;padding:5px 0 5px 20px;font-size:14.5px;color:var(--ink2)}
.worry li::before{content:'';position:absolute;left:2px;top:1.02em;
  width:5px;height:5px;border-radius:50%;background:var(--gold)}
.answer{padding-top:clamp(22px,4vw,30px);border-top:1px solid var(--line)}
.answer__l{font-family:var(--mincho);font-size:clamp(16px,3.6vw,19px);
  line-height:1.9;letter-spacing:.04em;color:var(--ink)}

/* ---------- 6. 5つの理由 ---------- */
.reason{display:grid;gap:18px;margin-bottom:clamp(40px,7vw,72px)}
.reason:last-child{margin-bottom:0}
@media (min-width:900px){
  .reason{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
  .reason--rev .reason__ph{order:2}
}
.reason__ph{margin:0;border-radius:var(--radius-photo);overflow:hidden}
.reason__ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:900px){ .reason__ph img{aspect-ratio:4/5} }
.reason__no{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--gold)}
.reason__tx h3{font-family:var(--mincho);font-weight:500;
  font-size:clamp(18px,4vw,23px);line-height:1.7;letter-spacing:.04em;margin:6px 0 12px}
.reason__tx p{font-size:14.5px;color:var(--ink2);margin:0}

/* ---------- 7. 年齢カード ---------- */
.agecard{width:min(84vw,360px)}
@media (min-width:900px){ .agecard{width:min(36vw,400px)} }
.agecard figure{margin:0}
.agecard img{border-radius:var(--radius-photo);aspect-ratio:4/5}
.agecard__tx{padding:14px 0 0}
.agecard__n{font-size:13.5px;letter-spacing:.1em;color:var(--ink2);margin:0}
.agecard__n span{font-family:var(--en);font-size:24px;color:var(--accent);
  margin-right:2px;letter-spacing:0}
.agecard__tx h3{font-family:var(--mincho);font-weight:500;font-size:18px;
  line-height:1.7;letter-spacing:.04em;margin:6px 0 10px}
.agecard__tx p{font-size:13.5px;color:var(--ink2);margin:0 0 12px}
.agecard__ul{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.agecard__ul{gap:0 13px}
.agecard__ul li{position:relative;padding:0;font-size:13.5px;color:var(--ink2)}
.agecard__ul li+li::before{content:'';position:absolute;left:-8px;top:.74em;
  width:3px;height:3px;border-radius:50%;background:var(--gold)}

/* ---------- 8. 衣装の絞り込み ---------- */
/* 絞り込み。
   ----------------------------------------------------------------
   下線だけの見た目にしていたため、押せるものだと分からなかった。
   枠を付けて、選んだものは塗りつぶす。
   数字は「その条件だと何点あるか」なので、押す前から見せる */
.filt{margin-bottom:clamp(18px,3.4vw,26px);
  padding:clamp(14px,2.8vw,20px) clamp(14px,2.8vw,20px) clamp(8px,1.6vw,12px);
  border:1px solid var(--line);border-radius:var(--radius-photo);background:var(--white)}
.filt__r{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-bottom:clamp(8px,1.6vw,12px)}
.filt__l{flex:0 0 auto;width:2.6em;font-size:12px;letter-spacing:.12em;color:var(--ink2)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:8px 15px;border:1px solid var(--line);border-radius:22px;
  background:var(--white);font-size:13.5px;color:var(--ink);transition:.22s}
.chip small{font-size:11.5px;color:var(--ink2);
  font-family:var(--en);letter-spacing:.02em}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--cta);border-color:var(--cta);
  color:var(--white);font-weight:500}
.chip[aria-pressed="true"] small{color:rgba(255,255,255,.72)}

/* いま何を、何点見ているか。絞り込みのすぐ下に置く */
.filt__c{font-size:13.5px;color:var(--ink);margin:0 0 clamp(18px,3.4vw,26px)}

/* 衣装の一覧。横スワイプをやめて縦に並べる */
.kgrid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,2.4vw,20px)}
@media (min-width:640px){ .kgrid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .kgrid{grid-template-columns:repeat(4,1fr)} }
.kgrid figure{margin:0}
.kgrid img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--radius-photo);background:var(--sub)}
.kgrid figcaption{margin-top:8px;font-size:12.5px;color:var(--ink2);line-height:1.7}
.kimono[hidden]{display:none}

.kgrid__more{margin-top:clamp(24px,4.6vw,36px);text-align:center}
.kgrid__more .btn{min-width:min(100%,340px)}
.kgrid__more[hidden],#kimonoMore[hidden]{display:none}

/* ---------- 9. タグ ---------- */
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}
.tags{gap:0 16px}
.tags li{position:relative;padding:0;font-size:13.5px;color:var(--ink2)}
.tags li+li::before{content:'';position:absolute;left:-9px;top:.74em;
  width:3px;height:3px;border-radius:50%;background:var(--gold)}

/* ---------- 説明リスト ---------- */
.dl{display:grid;margin-top:8px;border-top:1px solid var(--line)}
.dl>div{padding:16px 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){
  .dl>div{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
}
.dl dt{font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:4px}
@media (min-width:700px){ .dl dt{margin-bottom:0} }
.dl dd{font-size:13.5px;color:var(--ink2);line-height:1.85}

/* ---------- 13. 料金（縦に積む） ---------- */
.plans{display:grid;gap:16px}
@media (min-width:860px){ .plans{grid-template-columns:1fr 1fr;align-items:start} }
.plan{position:relative;padding:clamp(22px,4vw,32px);background:var(--white);
  border:1px solid var(--line);border-radius:10px}
.plan--rec{border-color:var(--accent-soft)}
.plan__badge{position:absolute;top:-11px;left:clamp(22px,4vw,32px);
  padding:3px 12px;border-radius:3px;background:var(--accent);color:#fff;
  font-size:12px;letter-spacing:.1em}
.plan h3{font-family:var(--mincho);font-weight:500;font-size:19px;margin:0}
.plan__yen{font-family:var(--en);font-weight:500;font-size:34px;
  letter-spacing:.01em;margin:8px 0 0;line-height:1.3}
.plan__yen small{font-size:13px;font-weight:400;color:var(--ink2);margin-left:6px}
.plan__wk{font-size:13px;color:var(--ink2);margin:2px 0 0}
.plan__spec{display:grid;margin:18px 0 0;border-top:1px solid var(--line)}
.plan__spec>div{padding:10px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:start}
.plan__spec dt{font-size:13.5px;color:var(--ink2)}
.plan__spec dd{font-size:13px;margin:0}
.plan__inc{margin:16px 0 0;display:grid;gap:6px}
.plan__inc li{position:relative;padding-left:16px;font-size:13.5px;color:var(--ink2)}
.plan__inc li::before{content:'';position:absolute;left:0;top:.78em;width:7px;height:1px;
  background:var(--gold)}
.plan .note{margin-top:12px}

/* 総額 */
.total{margin-top:clamp(30px,5vw,46px);padding-top:clamp(24px,4vw,32px);
  border-top:1px solid var(--line)}
.total h3{font-family:var(--mincho);font-weight:500;font-size:17px;margin:0 0 6px}
.total>p{font-size:13.5px;color:var(--ink2)}
.total__t{font-size:14px;margin-top:14px}
.total__t th,.total__t td{padding:12px 0;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top;font-weight:400}
.total__t th{color:var(--ink2);width:58%}
.total__t td{text-align:right;font-weight:500}
.total__t th span{display:block;font-size:13.5px;color:var(--ink2)}
.total__s th,.total__s td{color:var(--ink);border-bottom:0;padding-top:14px}
.total__s td{font-size:19px}

/* ---------- 15. 流れ ---------- */
/* 撮影の流れ。
   ----------------------------------------------------------------
   3列に並べていたが、01→02→03 と読んだあと目線が左端へ戻る。
   順番のあるものを横に折り返すと、どこまで読んだか見失う。
   縦一列にして、番号を左に立てて筋を通す */
.flow{display:grid;gap:0;position:relative}
.flow li{position:relative;padding:clamp(16px,2.8vw,22px) 0 clamp(16px,2.8vw,22px) 58px;
  border-bottom:1px solid var(--line)}
.flow li:first-child{border-top:1px solid var(--line)}
/* 番号を丸で囲んで左に置く。上下を線でつないで順路にする */
.flow__n{position:absolute;left:0;top:clamp(16px,2.8vw,22px);
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);
  font-family:var(--en);font-size:13px;letter-spacing:.06em;color:var(--ink2)}
.flow li::before{content:'';position:absolute;left:19px;
  top:calc(clamp(16px,2.8vw,22px) + 38px);bottom:0;
  width:1px;background:var(--line)}
.flow li:last-child::before{display:none}
/* 印・見出し・本文は同じ左端にそろえる。左に出すのは番号の丸だけ */
.flow .ico{opacity:.5}
.flow__n{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--gold)}
.flow h3{font-family:var(--mincho);font-weight:500;font-size:15.5px;margin:5px 0 6px}
.flow p{font-size:13px;color:var(--ink2);margin:0}

/* ---------- 17. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{display:flex;gap:12px;align-items:flex-start;
  padding:17px 0;font-size:14.5px;cursor:pointer;list-style:none;min-height:44px}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::before{content:'Q';font-family:var(--mincho);color:var(--accent);
  font-size:14px;line-height:1.7;flex:none}
.faq__i summary::after{content:'';margin-left:auto;flex:none;width:9px;height:9px;
  border-right:1px solid var(--ink2);border-bottom:1px solid var(--ink2);
  transform:rotate(45deg);margin-top:.55em;transition:transform .3s}
.faq__i[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 0 18px 26px;font-size:13.5px;color:var(--ink2)}

/* ---------- 18. 店舗 ---------- */
/* 店舗の並び
   ★ 縦に積むと、1店舗あたりが長い（写真＋7項目＋紹介文＋ボタン）ので、
     3店舗でも画面がかなり長くなる。
     せまい画面では横に流し、広い画面では一列に並べる。
   ★ 横流しのときは画面の端まで使う。.wrap の余白をいったん打ち消して、
     中で付け直す。そうしないと、右端で切れて「まだ続く」ことが伝わらない。 */
.stores{display:grid;gap:clamp(28px,5vw,44px)}
@media (max-width:899px){
  .stores{display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* ★ 止まる位置にも余白を入れること。
         入れないと、カードが画面の左端にぴったり付いて止まり、
         ひとつ前のカードが端に少しだけ残る。
         既存の横スワイプ（.swipe）には入っていた。 */
    scroll-padding-left:var(--gut);scroll-padding-right:var(--gut);
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding-left:var(--gut);padding-right:var(--gut);
    padding-bottom:4px}
  .stores::-webkit-scrollbar{display:none}
  .stores > .store{flex:0 0 auto;width:min(82vw,360px);scroll-snap-align:start}
}
/* 広い画面は一列。店舗が4つ以上なら折り返す */
@media (min-width:900px){ .stores{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} }
.store{border-radius:0}
.store__ph{margin:0}
.store__ph img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-photo)}
.store__tx{padding:16px 0 0}
.store__tx h3{font-family:var(--mincho);font-weight:500;font-size:17px;margin:0 0 12px}
.store__dl{display:grid;gap:7px;margin-bottom:16px}
.store__dl>div{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:start}
.store__dl dt{font-size:13.5px;color:var(--ink2)}
.store__dl dd{font-size:13px;margin:0}
.store__dl a{border-bottom:1px solid var(--line)}

/* ---------- 19. 最終CTA ---------- */
.last{position:relative}
.last__ph{margin:0;position:relative;height:clamp(260px,42vw,380px);overflow:hidden}
/* 縦位置を上寄りにする。使っているのは立ち姿の縦写真なので、
   真ん中で切ると顔の高さを横切ってしまう */
.last__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.last__body{background:var(--ink);color:var(--white);padding:var(--sec) 0}
.last__body h2{font-family:var(--mincho);font-weight:500;
  font-size:clamp(21px,5vw,30px);line-height:1.75;letter-spacing:.05em;margin:0 0 16px}
.last__body p{font-size:14.5px;color:rgba(255,253,250,.82)}
.last__body .btn--primary{background:var(--white);color:var(--ink)}
.last__body .btn--primary:hover{background:#ece7df}
.last__body .btn--sub{color:var(--white);border-color:rgba(255,253,250,.42)}
.last__body .btn--sub:hover{border-color:var(--white)}
.last__body .cta-note{color:rgba(255,253,250,.62)}
.last__i{font-size:13.5px;color:rgba(255,253,250,.62);margin-top:22px}

/* 広い画面では、写真を縦のまま横に置く。
   ----------------------------------------------------------------
   帯にしていたときは 1150×380 の3:1で、縦2:3の写真の
   8割近くを捨てていた。花と顔の中途半端なところを
   横切るので、収まりが悪く見えていた。
   列にすれば写真の6割以上が入り、立ち姿がそのまま見える。
   公式HPのヒーロー（hero--split）と同じ考え方 */
@media (min-width:900px){
  .last{display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch}
  .last__ph{height:auto;min-height:100%}
  .last__ph img{position:absolute;inset:0;object-position:50% 42%}
  .last__body{display:flex;align-items:center;padding:clamp(64px,7.5vw,104px) 0}
  .last__body .wrap{max-width:none;padding:0 clamp(36px,4.4vw,72px)}
}

/* ---------- 足もと ---------- */
.ft{padding:34px 0 40px;background:var(--ink);color:rgba(255,253,250,.7);font-size:13.5px}
.ft__n{font-family:var(--mincho);font-size:15px;color:var(--white);margin:0 0 4px;letter-spacing:.08em}
.ft__c{margin:0 0 10px}
.ft a{border-bottom:1px solid rgba(255,253,250,.3)}

/* ---------- スマホ固定CTA（§7） ---------- */
.fix{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:1fr 92px;gap:8px;
  padding:9px var(--gut) calc(9px + env(safe-area-inset-bottom));
  background:rgba(250,247,242,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.fix.on{transform:none}
.fix .btn{min-height:48px;padding:12px 10px;font-size:14.5px}
.fix__s{font-size:13px}
@media (min-width:768px){ .fix{display:none} }

/* ---------- 10. きょうだい撮影 ----------
   ノーブレムの強みなので、節を独立させている。
   「ふたりとも七五三」と「別々のプラン」の2通りを並べて見せる */
.sib{display:grid;gap:28px;margin-bottom:clamp(30px,5vw,48px)}
@media (min-width:768px){ .sib{grid-template-columns:1fr 1fr} }
.sib__c{padding:0}
@media (min-width:768px){
  .sib__c+.sib__c{padding-left:clamp(22px,3vw,34px);border-left:1px solid var(--line)}
}
/* 別プランの組み合わせが、いちばん伝えたいところ */
.sib__c--mark .sib__t{color:var(--accent);font-weight:500}
.sib__t{font-size:12px;letter-spacing:.14em;color:var(--accent);margin:0}
.sib__c h3{font-family:var(--mincho);font-weight:500;font-size:17px;
  line-height:1.7;margin:6px 0 10px}
.sib__c p{font-size:13.5px;color:var(--ink2);margin:0}

.sib__h{font-family:var(--mincho);font-weight:500;font-size:16.5px;
  letter-spacing:.04em;margin:0 0 12px}
.sib__tbl th{width:46%}
.sib__tbl td span{display:block;font-size:13.5px;color:var(--ink2);font-weight:400}

/* パターンの組み方の例 */
.ptn{counter-reset:p;display:grid;gap:6px;margin-bottom:10px}
.ptn li{counter-increment:p;position:relative;padding:9px 0 9px 34px;
  border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.ptn li::before{content:counter(p);position:absolute;left:2px;top:50%;
  transform:translateY(-50%);color:var(--accent);font-family:var(--en);font-size:15px}

/* ---------- 線画アイコン ----------
   1歳専門サイトと同じ作り。色はCSSから決まるので配色に追従する。
   文字だけの節に、写真の代わりの手がかりとして置いている。
   飾りなので読み上げからは外してある（aria-hidden） */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{display:block;width:30px;height:30px;color:var(--accent-soft);
  margin-bottom:10px;flex:none}
/* 節の頭に置く大きめのもの */
.ico--lg{width:46px;height:46px;margin-bottom:16px}

/* 撮影の流れは、番号の横に小さく添える */
.flow .ico{width:24px;height:24px;margin-bottom:8px}

/* きょうだいの2枚 */
.sib__c .ico{width:34px;height:34px}

/* ============================================================
   読みやすさの手当て
   ------------------------------------------------------------
   --gold（#c8b8a8）は白地で1.9:1しかない。
   点や線などの飾りには使えるが、文字に使うと読めない。
   小さな文字はすべて --ink2（4.9:1）以上にする。
============================================================ */
.flow__n{color:var(--ink2);font-size:13px;letter-spacing:.18em}
.reason__no{color:var(--ink2)}
.chip small{color:var(--ink2)}
/* 選んだ絞り込みは濃い茶で塗るので、その上の数字は白側で取る。
   --accent のままだと塗りに沈んで読めない */
.chip[aria-pressed="true"] small{color:rgba(255,255,255,.78)}
.ptn li::before{color:var(--ink2)}

/* 撮影の流れ。文字の大きさだけをここで整える。
   余白は縦並びの定義（上の .flow li）に任せる。
   ここで padding を上書きすると、番号の丸を置く左余白が消える */
.flow h3{font-size:16.5px;margin:4px 0 7px}
.flow p{font-size:13.5px;line-height:1.9}

/* ============================================================
   料金シミュレーター ── 淡い色をつける
   ------------------------------------------------------------
   公式から持ってきたままだと、選択中が濃い茶の面になって
   周りから浮く。手順ごとに淡い色を当てて、
   いま何番目にいるかが色でも分かるようにする。
============================================================ */
#sim .sim{
  --s1:#eef3f0;  /* 淡い緑 */
  --s2:#f3eef1;  /* 淡い桃 */
  --s3:#f1f0ea;  /* 淡い黄 */
  --s4:#eaeff3;  /* 淡い空 */
  --s5:#f3f0ea;  /* 淡い砂 */
  --s6:#eff1ec;  /* 淡い若草 */
  --s7:#f2eeea;  /* 淡い生成り */
}
/* 手順の見出し。選んでいるところだけ淡く色を敷く */
#sim .wiz-steps button{background:transparent;color:var(--ink2);border-radius:999px}
#sim .wiz-steps li.on button{background:var(--s1);color:var(--ink);font-weight:500}
#sim .wiz-steps li:nth-child(2).on button{background:var(--s2)}
#sim .wiz-steps li:nth-child(3).on button{background:var(--s3)}
#sim .wiz-steps li:nth-child(4).on button{background:var(--s4)}
#sim .wiz-steps li:nth-child(5).on button{background:var(--s5)}
#sim .wiz-steps li:nth-child(6).on button{background:var(--s6)}
#sim .wiz-steps li:nth-child(7).on button{background:var(--s7)}
#sim .wiz-steps button[disabled]{opacity:.5}

/* 質問の番号 */
#sim .wiz-q__n{background:var(--s1);color:var(--ink);border-radius:999px;
  padding:2px 10px;margin-right:8px;font-size:12px}

/* 入力まわりを白く、線を薄く */
#sim .wiz-body{background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:clamp(18px,3.4vw,26px)}
#sim select,#sim input,#sim .wiz-f{background:var(--white)}

/* 進む・戻る */
#sim .wiz-next{background:var(--cta);color:var(--white);border:0}
#sim .wiz-next:hover{background:var(--cta-h)}
#sim .wiz-back{background:transparent;color:var(--ink2);border:1px solid var(--line)}

/* 合計の帯 */
#sim .wiz-bar{background:var(--s5);border:1px solid var(--line);color:var(--ink)}

/* ---------- 横スワイプの矢印 ----------
   指では不要だが、パソコンには動かす手段がないので付ける。
   端に来たら薄くして、それ以上ないことを示す */
.swipe-nav{display:flex;gap:8px;justify-content:flex-end;
  max-width:var(--inner);margin:12px auto 0;padding:0 var(--gut)}
.swipe-nav__b{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
  background:var(--white);position:relative;transition:.25s;cursor:pointer}
.swipe-nav__b::before{content:'';position:absolute;left:50%;top:50%;
  width:8px;height:8px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);
  transform:translate(-40%,-50%) rotate(45deg)}
.swipe-nav__b--next::before{transform:translate(-60%,-50%) rotate(-135deg)}
.swipe-nav__b:hover:not([disabled]){border-color:var(--ink)}
.swipe-nav__b[disabled]{opacity:.28;cursor:default}
/* 指の端末では矢印を出さない */
@media (hover:none){ .swipe-nav{display:none} }

/* つかんで引っぱっているあいだ */
.swipe.is-grab{cursor:grabbing;scroll-snap-type:none}
@media (hover:hover){ .swipe{cursor:grab} }

/* 「SWIPE」の案内は指の端末だけでよい */
@media (hover:hover){ .swipe__hint{display:none} }

/* ---------- きょうだいの節（作り直し） ----------
   小見出しが5つ並んで何が言いたいか分からなかったので、
   結論 → 2通り → 対象プラン → 細かい条件は畳む、の順にした */
.sib-lead{text-align:center;padding:clamp(26px,5vw,38px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:clamp(28px,5vw,44px)}
.sib-lead__t{font-size:13px;color:var(--ink2);margin:0}
.sib-lead__n{font-family:var(--mincho);font-weight:500;
  font-size:clamp(24px,6vw,34px);letter-spacing:.04em;margin:6px 0 0;line-height:1.4}
.sib-lead__n em{font-family:var(--en);font-style:normal;font-size:1.5em;
  color:var(--accent);margin:0 4px}
.sib-lead__s{font-size:13.5px;color:var(--ink2);margin:12px 0 0}

/* ごきょうだいの作例。縦位置の写真なので高さを抑えて中央に置く */
.sib-ph{margin:0 0 clamp(28px,5vw,44px);text-align:center}
/* img は display:block なので text-align では中央に寄らない */
.sib-ph img{width:auto;max-width:100%;height:clamp(280px,50vw,440px);
  object-fit:contain;border-radius:2px;margin-inline:auto}
.sib-ph figcaption{margin-top:10px;font-family:var(--mincho);font-size:14px;
  color:var(--ink2)}

.sib2{display:grid;gap:26px;margin-bottom:clamp(28px,5vw,44px)}
@media (min-width:700px){ .sib2{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,40px)} }
.sib2__i h3{font-family:var(--mincho);font-weight:500;font-size:17px;
  line-height:1.7;margin:0 0 8px}
.sib2__i p{font-size:13.5px;color:var(--ink2);margin:0}

.sib-cap{font-family:var(--mincho);font-weight:500;font-size:15.5px;
  letter-spacing:.04em;margin:0 0 10px}

/* 細かい条件はふだん畳んでおく */
.sib-more{margin-top:clamp(26px,5vw,38px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.sib-more summary{display:flex;align-items:center;gap:10px;
  padding:17px 0;font-size:14px;cursor:pointer;list-style:none;min-height:44px;
  color:var(--ink2)}
.sib-more summary::-webkit-details-marker{display:none}
.sib-more summary::after{content:'';margin-left:auto;width:9px;height:9px;
  border-right:1px solid var(--ink2);border-bottom:1px solid var(--ink2);
  transform:rotate(45deg);transition:transform .3s}
.sib-more[open] summary::after{transform:rotate(-135deg)}
.sib-more__b{padding-bottom:24px}
.sib-more .dl{border-top:0}

/* ---------- 店舗（公式HPから読んだ内容を出す） ---------- */
.store__cap{font-family:var(--mincho);font-weight:500;font-size:14.5px;
  margin:18px 0 6px;padding-top:14px;border-top:1px solid var(--line)}
.store__cau{display:grid;gap:5px;margin-top:8px}
.store__cau li{position:relative;padding-left:14px;font-size:13.5px;
  color:var(--ink2);line-height:1.8}
.store__cau li::before{content:'';position:absolute;left:2px;top:.82em;
  width:4px;height:4px;border-radius:50%;background:var(--gold)}
/* 3枚並べたときの見え方をそろえる
   ★ カードの中に罫線を引かないこと。
     住所やアクセスの行数、紹介文の長さがカードごとに違うので、
     線を引くと3枚バラバラの高さに出て、かえって見にくい。
     線のかわりに余白で分ける。
   ★ ボタンは下端でそろえる。ここは高さが決まっているのでそろう。 */
.store{display:flex;flex-direction:column;height:100%}
.store__tx{display:flex;flex-direction:column;flex:1}
.store .store__cap{border-top:0;padding-top:0;margin-top:clamp(18px,3vw,24px)}
.store .store__b{margin-top:auto;padding-top:clamp(14px,2.4vw,20px)}

.store__b{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.store__b .btn{flex:1 1 auto}

/* ---------- 総額の説明（簡略版） ----------
   表を6行並べても、読んだだけでは自分がいくらか分からない。
   仕組みだけ示して、具体的な金額はシミュレーターに渡す */
.calc{display:grid;gap:6px;align-items:center;margin:22px 0 26px}
@media (min-width:760px){
  .calc{grid-template-columns:1fr auto 1fr auto 1fr;gap:14px}
}
.calc__i{padding:16px 0}
@media (min-width:760px){ .calc__i{text-align:center} }
.calc__l{font-size:13.5px;color:var(--ink2);margin:0}
.calc__v{font-family:var(--en);font-size:clamp(24px,5vw,30px);
  color:var(--ink);margin:4px 0 0;line-height:1.25;letter-spacing:.01em}
.calc__v span{font-size:.6em;color:var(--ink2);margin:0 3px}
.calc__s{font-size:13.5px;color:var(--ink2);margin:5px 0 0;line-height:1.7}
.calc__i--opt .calc__v{color:var(--ink2)}
.calc__op{font-family:var(--en);font-size:20px;color:var(--gold);
  text-align:center;line-height:1}
@media (max-width:759px){
  .calc__i{border-bottom:1px solid var(--line);padding:14px 0}
  .calc__op{padding:2px 0}
}

/* たとえば */
.calc-ex{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.calc-ex__t{font-size:13.5px;color:var(--ink2);margin:0 0 8px}
.calc-ex ul{display:grid;gap:8px}
.calc-ex li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.calc-ex li span{font-size:13.5px;color:var(--ink2)}
.calc-ex li b{margin-left:auto;font-family:var(--en);font-size:22px;
  font-weight:500;color:var(--ink)}

.calc-go{width:100%;margin-top:20px}

/* ---------- ほかの撮影への導線 ----------
   七五三を探していない方の行き先。
   最後のCTAの前に置き、検討の途中で外へ逃がさないようにしている */
.other{display:grid;border-top:1px solid var(--line)}
@media (min-width:700px){ .other{grid-template-columns:1fr 1fr;column-gap:clamp(20px,4vw,40px)} }
.other li{border-bottom:1px solid var(--line)}
.other a{display:flex;flex-direction:column;gap:3px;padding:16px 26px 16px 0;
  position:relative;transition:.25s}
.other a:hover{color:var(--accent)}
.other a::after{content:'';position:absolute;right:6px;top:50%;
  width:7px;height:7px;border-top:1px solid var(--ink2);border-right:1px solid var(--ink2);
  transform:translateY(-50%) rotate(45deg);transition:.25s}
.other a:hover::after{right:2px;border-color:var(--accent)}
.other__n{font-size:15px;font-weight:500}
.other__d{font-size:13.5px;color:var(--ink2);line-height:1.75}

.ft__nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.ft__nav a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- ご予約方法 ---------- */
.how{padding:22px 0;border-top:1px solid var(--line)}
.how:first-of-type{border-top:0;padding-top:0}
.how__t{font-family:var(--mincho);font-weight:500;font-size:16.5px;
  letter-spacing:.04em;margin:0 0 10px}
/* 相談の窓口。LINE と電話の小見出し */
.how__t--sm{font-size:14px;margin:22px 0 8px;padding-top:16px;
  border-top:1px solid var(--line)}
/* 店舗ごとの電話とLINE。指で押せる大きさを確保する */
.tels{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.tels li{display:flex;align-items:center;gap:10px;min-height:52px;
  border-bottom:1px solid var(--line)}
.tels li:last-child{border-bottom:0}
.tels span{flex:0 0 5em;font-size:13.5px;color:var(--ink2)}
.tels__tel{flex:1;font-family:var(--en);font-size:17px;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;padding:12px 0}
.tels__tel:hover{color:var(--accent)}
/* 白地に「LINE」の文字だけでは、何のボタンか伝わらなかった。
   LINEの緑と吹き出しマークで、ひと目で分かるようにする */
.tels__line{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;min-height:40px;padding:0 16px;border-radius:6px;
  border:1px solid #06c755;background:#06c755;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;
  color:#fff;text-decoration:none;transition:background .2s,border-color .2s}
.tels__line .ico{width:17px;height:17px;flex:0 0 auto}
.tels__line:hover{background:#05a648;border-color:#05a648}
@media (max-width:400px){
  .tels li{flex-wrap:wrap;gap:6px 10px;padding:10px 0}
  .tels__tel{flex:0 0 auto;padding:0}
}

.how__s{counter-reset:hs;display:grid;gap:10px;margin:16px 0 0}
.how__s li{counter-increment:hs;position:relative;padding-left:34px;font-size:14px}
.how__s li::before{content:counter(hs);position:absolute;left:0;top:.1em;
  width:22px;height:22px;border-radius:50%;background:var(--sub);
  color:var(--ink);font-family:var(--en);font-size:13px;
  display:grid;place-items:center}
.how__s li span{display:block;font-size:13.5px;color:var(--ink2);margin-top:2px}

/* 見落とすと困る条件。ここだけ薄く色を敷く */
.warn{margin:22px 0;padding:20px 22px;border-radius:8px;
  background:#fdf6ee;border:1px solid #ecdcc6}
.warn__t{font-family:var(--mincho);font-weight:500;font-size:15px;
  margin:0 0 12px;color:#7a5a2e}
.warn ul{display:grid;gap:10px}
.warn li{position:relative;padding-left:16px;font-size:13.5px;
  color:var(--ink2);line-height:1.9}
.warn li::before{content:'';position:absolute;left:2px;top:.82em;
  width:5px;height:5px;border-radius:50%;background:#c99a55}
.warn li b{color:var(--ink)}

/* 組み合わせられないほうの一覧。点を薄くして、可否の違いが分かるようにする */
.tags--no li{color:var(--ink3)}
.tags--no li+li::before{background:var(--line)}

/* ============================================================
   写真の切れを直す
   ------------------------------------------------------------
   写真はすべて2:3（900x1350）だが、CSSが3:4や4:5を強制していたため
   object-fit:cover で上下が切り落とされ、全身写真の足元や
   頭が欠けていた。

   作品ギャラリーは「高さをそろえて幅を可変」にする。
   写真の比率をそのまま使えるので、どこも切れない。
============================================================ */
.sec--gal .swipe__track{align-items:flex-start}

/* 作品ギャラリー：高さをそろえ、幅は写真の比率にまかせる */
#works .swipe__item{width:auto;flex:0 0 auto}
#works .swipe__item img{
  height:clamp(320px,54vh,480px);width:auto;max-width:none;
  aspect-ratio:auto;object-fit:contain}
#works .swipe__item figcaption{max-width:34ch}

/* 年齢カード：写真は2:3のまま切らずに出す */
.agecard img{aspect-ratio:2/3;object-fit:cover}
/* 写真がまだ無い枠も、同じ高さを確保して並びを崩さない */
.agecard figure:has(.todo){
  aspect-ratio:2/3;display:grid;place-items:center;padding:20px;
  background:var(--sub);border-radius:8px;text-align:center}

/* 5つの理由：写真の比率をそのまま使う */
.reason__ph img{aspect-ratio:auto}
@media (min-width:900px){ .reason__ph img{aspect-ratio:auto} }
/* 写真待ちの枠も同じ大きさを確保する */
.reason__ph:has(.todo){
  aspect-ratio:4/5;display:grid;place-items:center;padding:24px;
  background:var(--sub);border-radius:8px;text-align:center}

/* ---------- 料金の目安（ファーストビュー直後） ----------
   詳しい料金表はページの後半にある。
   ここは「結局いくらか」だけを先に伝える節なので、
   カードを並べず、金額と含まれるものを字だけで置く */

/* ファーストビューの帯に出す金額。ここだけ他の項目より強くする */
.fv__pt--yen a{color:var(--ink);font-weight:500;
  border-bottom:1px solid var(--accent-soft);padding-bottom:1px}
.fv__pt--yen a:hover{border-bottom-color:var(--ink)}

.plead__lead{font-size:14.5px;line-height:2.05;color:var(--ink2);
  margin:0 0 clamp(22px,4vw,30px)}

/* 実際に払う金額の例。右端に数字をそろえて、目で追えるようにする */
/* お仕度代の小見出し */
.plead__cap{margin:clamp(20px,3.4vw,28px) 0 10px;font-size:13px;
  letter-spacing:.06em;color:var(--ink2)}
.plead__ex{display:grid;gap:0;
  border-top:1px solid var(--line);margin:0 0 clamp(22px,4vw,30px)}
.plead__ex li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:13px 0;border-bottom:1px solid var(--line)}
.plead__ex li span{font-size:13.5px;color:var(--ink2);line-height:1.7}
.plead__ex li b{margin-left:auto;font-family:var(--en);font-weight:500;
  font-size:24px;letter-spacing:.02em;color:var(--ink);white-space:nowrap}

/* 基本料金に入っているもの。金額の根拠として続けて置く */
.plead__inc{display:grid;gap:9px;margin:0 0 18px}
.plead__inc li{position:relative;padding-left:20px;
  font-size:13.5px;line-height:1.8;color:var(--ink)}
.plead__inc li::before{content:'';position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--gold)}

.plead__go{display:grid;gap:10px;margin-top:clamp(22px,4vw,30px)}
@media (min-width:640px){
  .plead__go{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ================================================================
   下層ページ
   ----------------------------------------------------------------
   1枚もので約40画面あったものを、マタニティ専門サイトと同じ並びで
   9ページに分けた。ここはその分割で新しく要るようになった分だけ
================================================================ */

/* ヘッダーのロゴから、トップへ戻れるようにする */
.hd__logo a{display:block;color:inherit}

/* メニュー。いま開いているページに印を付ける */
.menu__in a[aria-current]{color:var(--accent)}
.menu__in a[aria-current] .menu__en{color:var(--accent)}

/* 現在の位置。下層ページの先頭に置く */
.crumb{background:var(--white);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--ink2)}
.crumb .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;
  min-height:44px;padding-top:6px;padding-bottom:6px}
.crumb a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line)}
.crumb a:hover{color:var(--accent)}
.crumb__s{color:var(--ink3)}

/* 下層ページには大きな写真の導入がないので、
   最初の節が詰まって見えないよう少しだけ空ける */
.lower main > .sec:first-child{padding-top:clamp(40px,8vw,72px)}

/* 撮影事例の一覧。
   ----------------------------------------------------------------
   写真そのものが商品なので、大きく見せる。
   16点しかないのに3列にしていて、1枚322pxまで小さくなっていた。

   縦横比も指定しない。作例には横位置のものが混じっていて、
   縦2:3に切り抜くと構図が壊れる。
   align-items:start にしてあるので、背の低い写真の下は
   そのまま空くだけで、隣に引き伸ばされない */
.galg{display:grid;grid-template-columns:1fr;align-items:start;
  gap:clamp(18px,3.4vw,32px);margin:0 0 clamp(30px,6vw,48px)}
@media (min-width:560px){ .galg{grid-template-columns:repeat(2,1fr)} }
.galg figure{margin:0}
.galg img{width:100%;height:auto;border-radius:var(--radius-photo);background:var(--sub)}
.galg figcaption{margin-top:10px;font-size:13px;line-height:1.75;color:var(--ink2)}

/* フッター。専門サイトの中の行き先と、外のサイトへの行き先を分ける */
.ft__nav--out{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.ft__nav--out a{font-size:13px;color:var(--ink2)}

/* 不安の答えがある場所への行き先。
   ----------------------------------------------------------------
   7つの不安に対する答えは、いまは別のページに分かれている。
   丸いボタンを並べていたが、行き先が5つに増え、
   「何についての話か」が読み取りにくくなった。
   分類を上に小さく置いた行にして、1行まるごとを押せるようにする */
.goto{margin-top:clamp(20px,3.6vw,28px);border-top:1px solid var(--line)}
.goto li{border-bottom:1px solid var(--line)}
.goto a{display:flex;flex-direction:column;gap:2px;
  min-height:56px;justify-content:center;padding:11px 26px 11px 0;
  position:relative;color:var(--ink);transition:color .25s}
.goto a:hover{color:var(--accent)}
.goto__k{font-size:12px;letter-spacing:.06em;color:var(--ink2)}
.goto__t{font-size:14.5px;font-weight:500;line-height:1.6}
.goto a::after{content:'';position:absolute;right:6px;top:50%;
  width:7px;height:7px;border-top:1px solid var(--ink2);border-right:1px solid var(--ink2);
  transform:translateY(-50%) rotate(45deg);transition:.25s}
.goto a:hover::after{right:2px;border-color:var(--accent)}

/* 下層ページの見出し。節の見出しは読ませる文にしてあるので、
   そのページが何のページかは、ここで控えめに示す */
/* 地域ページのファーストビュー。
   ★ 1歳専門サイトの .hero と同じ組み立てにしている。
       写真の帯 → 下へ向かって地の色に溶ける → 英字の小見出し
       → 明朝の大きい一文 → 補足 → ボタン
     ちがうのは高さだけ。あちらはトップなので画面いっぱい（100svh）だが、
     こちらは下層ページなので、そこまで占めさせない。
   ★ .last__ph は使い回さないこと。900px以上で位置を絶対指定に変える作り。 */
.ahero{position:relative;margin:0 0 clamp(28px,5vw,44px)}
.ahero__photo{position:relative;height:clamp(240px,42vw,420px);overflow:hidden}
.ahero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* 写真の下端を地の色へ溶かす。1歳サイトと同じ考え方 */
.ahero__photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 55%,rgba(255,255,255,.72) 82%,var(--base) 100%)}
.ahero__body{position:relative;z-index:2;margin-top:clamp(-30px,-4vw,-18px)}
.ahero__en{margin:0 0 12px;font-family:var(--en);font-size:13px;letter-spacing:.3em;
  color:var(--gold)}
.ahero__copy{margin:0;font-family:var(--mincho);font-weight:500;
  font-size:clamp(22px,5.2vw,34px);line-height:1.55;letter-spacing:.03em;color:var(--ink)}
.ahero__sub{margin:14px 0 0;font-size:14px;line-height:2;color:var(--ink2)}
/* ファーストビューの中の h1。
   ★ 1歳サイトの .hero__h1 と同じ扱い。小さく灰色にして、
     「このページは何か」だけを名乗らせる。読ませる一文は .ahero__copy。 */
.ahero__h1{margin:12px 0 0;font-size:12px;line-height:1.7;letter-spacing:.04em;
  font-weight:400;color:var(--ink3)}
.ahero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,3vw,26px)}
@media (min-width:760px){ .ahero__cta .btn{min-width:220px} }

/* 撮影を楽しむための要点。写真は使わず、文だけで3つ並べる。
   .reason は写真ありきの作りなので、ここでは使わない。 */
.pts{display:grid;gap:clamp(18px,3vw,26px);margin:0 0 clamp(28px,5vw,42px)}
@media (min-width:760px){ .pts{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)} }
.pts__i{padding-top:16px;border-top:1px solid var(--line)}
.pts__n{display:block;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--gold)}
.pts__i h3{margin:7px 0 9px;font-family:var(--mincho);font-weight:500;
  font-size:16px;line-height:1.65;color:var(--ink)}
.pts__i p{margin:0;font-size:14px;line-height:1.95;color:var(--ink2)}

.phead{padding-top:clamp(26px,5vw,40px);padding-bottom:clamp(4px,1vw,8px)}
/* h1 の下に、節ひとつぶんの余白が空いて宙に浮いて見えていた。
   h1 は「このページは何か」を名乗る行なので、
   その直後の節とはくっつけておく。
   ★ 地域ページは h1 をファーストビューの中に入れたので、
     .phead 自体が無い。ここは影響しない。 */
.phead + main > .sec:first-child{padding-top:clamp(16px,3vw,24px)}
.phead__h{margin:0;font-family:var(--gothic);font-weight:400;
  font-size:13.5px;letter-spacing:.04em;line-height:1.7;color:var(--ink2)}
/* 見出しを足したぶん、最初の節の上は詰める */
.lower main > .sec:first-child{padding-top:clamp(28px,5.5vw,48px)}

/* 現在の位置のリンクも、指で押せる高さを確保する */
.crumb a{display:inline-flex;align-items:center;min-height:44px}

/* 5店舗に共通する駐車場の注意。
   店ごとに5回繰り返すと、その店だけの注意が埋もれるので一度にまとめた */
.store__all{margin-top:clamp(24px,4.6vw,36px);padding-top:clamp(20px,4vw,28px);
  border-top:1px solid var(--line)}

/* 七五三以外の撮影への入口。
   ----------------------------------------------------------------
   ここは「よそへ出す」節なので、本文と同じ大きさの見出しを持つと
   最終CTAの直前で目を引きすぎる。囲いに入れて扱いを下げる */
.sec--thin{padding:clamp(40px,7vw,64px) 0}
.outlink{padding:clamp(20px,4vw,30px);border:1px solid var(--line);
  border-radius:var(--radius-photo);background:var(--white)}
.outlink__h{margin:0 0 12px;font-family:var(--gothic);font-weight:500;
  font-size:15px;letter-spacing:.03em}
.outlink p{font-size:13.5px;color:var(--ink2);line-height:1.9}
.outlink .btn{margin:4px 0 6px}

/* 自動で流すものは、吸い付きを外す。
   ----------------------------------------------------------------
   scroll-snap-type:x mandatory のままだと、scrollLeft に書いた値が
   毎回いちばん近いコマへ引き戻され、1pxも動かない。
   連続して流すことと、コマ送りで吸い付くことは両立しない。
   矢印（swipe-nav）は1枚分の幅を自分で計算して動かしているので、
   吸い付きが無くても今までどおり働く */
.swipe[data-auto]{scroll-snap-type:none}

/* 補足の表に付ける小見出し。
   見出しが無いまま表が現れると、直前の内容の続きに見えてしまう */
.dl__h{margin:clamp(34px,6vw,54px) 0 0;font-family:var(--mincho);
  font-weight:500;font-size:16.5px;letter-spacing:.04em}

/* ごきょうだいで撮るとき ── 料金の節の中の一区画
   ----------------------------------------------------------------
   もとは独立した節で、幅の狭い .wrap--n の中にあった。
   料金の節（幅広の .wrap）へ移したので、読みやすい幅に戻す。
   地の色を敷いて、料金表からの切り替わりを分かるようにする */
.sib{max-width:var(--narrow);margin:clamp(44px,7vw,80px) auto 0;
  padding:clamp(26px,4.6vw,40px) clamp(20px,3.6vw,36px);
  background:var(--sub);border-radius:10px;scroll-margin-top:70px}
.sib__h{margin:0 0 clamp(22px,4vw,32px);font-family:var(--mincho);
  font-weight:500;font-size:clamp(19px,4.2vw,25px);line-height:1.7;
  letter-spacing:.04em;position:relative;padding-top:18px}
.sib__h::before{content:'';position:absolute;top:0;left:0;
  width:22px;height:1px;background:var(--accent-soft)}

/* 言葉の意味を先に置く表。
   「枠」「パターン」のような、こちらだけが分かっている言葉に使う */
.term{display:grid;gap:10px;margin:0 0 clamp(20px,3.4vw,28px);
  padding:clamp(16px,2.8vw,22px);background:var(--white);
  border:1px solid var(--line);border-radius:8px}
.term>div{display:flex;flex-wrap:wrap;gap:2px 14px}
.term dt{flex:0 0 auto;min-width:5.4em;font-size:13.5px;font-weight:500;
  font-family:var(--mincho);letter-spacing:.06em}
.term dd{flex:1 1 14em;margin:0;font-size:13.5px;line-height:1.85;color:var(--ink2)}

/* 確認してから予約サイトへ ── ご予約の方法
   ----------------------------------------------------------------
   注意書きを読んだ合図をいただいてから、外の予約サイトへ出す */
.agree{display:flex;align-items:flex-start;gap:10px;
  margin:clamp(18px,3.2vw,26px) 0 0;padding:14px 16px;min-height:44px;
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  font-size:14px;line-height:1.7;cursor:pointer}
.agree input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;
  accent-color:var(--cta);cursor:pointer}
.agree:hover{border-color:var(--accent)}

/* 押せないあいだ。押せることは分かるが、まだ進めないと見せる */
.btn.is-off{background:var(--line);color:var(--ink3);cursor:not-allowed}
.btn.is-off:hover{background:var(--line)}
.agree__msg{grid-column:1/-1;margin:2px 0 0;font-size:13px;color:var(--accentText,#8a6a10)}

/* WEB予約の手順
   ----------------------------------------------------------------
   手順1は選ぶものが3つあり、1文に詰め込むと読み取れない。
   何を何から選ぶのかを、対で並べる */
.how__pick{display:block;margin-top:6px;font-size:13.5px;line-height:2;
  color:var(--ink2)}
.how__pick b{display:inline-block;min-width:6.4em;font-weight:500;color:var(--ink);
  font-size:12.5px;letter-spacing:.06em}

/* 仮予約と本予約の印。送信した時点では終わっていないことを、
   文字の並びではなく形の違いで伝える */
.how__s li span.st{display:inline-flex;align-items:center;
  margin-top:8px;padding:4px 12px;border-radius:14px;
  font-size:12.5px;letter-spacing:.04em;line-height:1.7}
.st--tmp{background:#fdf6ee;border:1px solid #ecdcc6;color:#8a6a10}
.st--fix{background:var(--cta);border:1px solid var(--cta);color:var(--white)}

/* WEB予約の図解
   ----------------------------------------------------------------
   「送信したのに予約できていなかった」という行き違いが多い。
   番号を縦に並べただけでは、3と4のあいだに
   「メールが届く」という別の場面があることが伝わらない。
   場所ごとに箱を分け、そのあいだを矢印でつなぐ。
   広い画面では左右、スマートフォンでは上下に並べる */
.rflow{display:grid;gap:0;margin:18px 0 14px}
@media (min-width:820px){
  .rflow{grid-template-columns:1fr auto 1fr;align-items:stretch}
}
.rflow__g{padding:clamp(16px,3vw,22px) clamp(16px,3vw,22px) clamp(14px,2.6vw,18px);
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column}
/* 本予約の箱だけ、輪郭を濃くして終点だと分かるようにする */
.rflow__g--fix{border-color:var(--accent-soft)}

.rflow__gt{display:flex;align-items:center;gap:7px;margin:0 0 12px;
  font-size:12px;letter-spacing:.1em;color:var(--ink2)}
.rflow__gt .ico{width:20px;height:20px;flex:0 0 auto}

.rflow__s{counter-reset:rs;display:grid;gap:10px;margin:0;flex:1 1 auto}
.rflow__s--2{counter-reset:rs 3}          /* 続き番号。4から始める */
.rflow__s li{counter-increment:rs;position:relative;padding-left:30px;
  font-size:14px;line-height:1.8}
.rflow__s li::before{content:counter(rs);position:absolute;left:0;top:.2em;
  width:21px;height:21px;border-radius:50%;background:var(--sub);
  color:var(--ink);font-family:var(--en);font-size:12.5px;
  display:grid;place-items:center}
.rflow__s li span{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;
  margin-top:5px;font-size:12.5px;line-height:1.8;color:var(--ink2)}
.rflow__s li span b{font-weight:500;font-size:11.5px;letter-spacing:.06em;
  color:var(--ink);white-space:nowrap}
.rflow__s li span i{font-style:normal}

/* それぞれの箱の足もとに、いまどの状態かを置く */
.rflow__st{margin:14px 0 0;padding:6px 12px;border-radius:15px;
  font-size:12.5px;letter-spacing:.06em;text-align:center}
.rflow__st--tmp{background:#fdf6ee;border:1px solid #ecdcc6;color:#8a6a10}
.rflow__st--fix{background:var(--cta);border:1px solid var(--cta);color:var(--white)}

/* 箱と箱のあいだ。ここで場面が変わることを示す */
.rflow__mid{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:12px 0;color:var(--ink2)}
@media (min-width:820px){ .rflow__mid{padding:0 clamp(12px,2vw,22px)} }
.rflow__midt{display:flex;align-items:center;gap:6px;margin:0;
  font-size:12px;letter-spacing:.06em;white-space:nowrap}
.rflow__midt .ico{width:22px;height:22px}
/* 矢印。スマートフォンは上下に挟んで下向き、
   広い画面では説明の下に横一本だけ引く（上下に2本あると、
   左右の並びなのに縦に読ませることになって落ち着かない） */
.rflow__arw{width:8px;height:8px;flex:0 0 auto;
  border-top:1.4px solid currentColor;border-right:1.4px solid currentColor;
  transform:rotate(135deg)}
@media (min-width:820px){
  .rflow__mid{gap:10px}
  .rflow__arw:first-child{display:none}
  .rflow__arw{position:relative;width:100%;height:1px;border:0;
    transform:none;background:currentColor;opacity:.5}
  .rflow__arw::after{content:'';position:absolute;right:0;top:50%;
    width:7px;height:7px;border-top:1.4px solid currentColor;
    border-right:1.4px solid currentColor;
    transform:translateY(-50%) rotate(45deg)}
}

/* 大きな数字に添える条件。数字だけだと、
   お支度済みで来られる方に間違った目安を伝えてしまう */
.sib-lead__sub{margin:6px 0 0;font-size:12.5px;color:var(--ink2);letter-spacing:.02em}