@charset "utf-8";
/* =========================================================================
   写真館サンプル「写真室 ひとひら」スポット版（架空・伊達市想定）
   配色＝photonakaoka.com の実測に準拠（2026-08-20 鈴木さん決定）
     文字＝焦げ茶 #372820 ／ 地＝白 #ffffff ＋ セクション地 #f4f2ee（生成り）
     差し色＝金茶 #a78849（ボタンと細い罫のみ・面積1%程度）
   書体＝明朝1書体（Shippori Mincho）。中岡さんのメイリオは真似しない。
   カード・角丸・影・線アイコンは使わない（写真が縁取られて散るため）
   行間・余白は写真館10社の実測（行間1.2〜2.0／セクション30〜70px）に寄せる
   ========================================================================= */

:root{
  --bg:#ffffff;
  --bg-soft:#f4f2ee;     /* セクション地（生成り） */
  --ink:#372820;         /* 焦げ茶＝本文・見出し・メインブランドカラー */
  --ink-soft:#7a6a5e;
  --accent:#a78849;      /* 金茶。点と線のみ */
  --accent-ink:#8a6d34;  /* 明るい地に細字を置く時の濃い側 */
  --line:#e3ddd2;        /* 極細罫 */
  --line-green:#06C755;
  --bar-h:36px; --header-h:60px; --cta-h:56px;
  --sec-pad:clamp(56px,7vw,72px);
  --col:660px;           /* 読み物の狭い列 */
  --wide:1160px;         /* 写真は全幅に近く（実測の最大幅1200px超に合わせる） */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  font-family:'Shippori Mincho','Noto Serif JP',serif;font-weight:400;
  background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.9;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;background:var(--bg-soft)}

/* ---------- サンプル明示バー（sample-banner-unify 共通形） ---------- */
.sample-banner{
  position:sticky;top:0;z-index:300;
  background:var(--ink);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  text-align:center;padding:8px 16px;
  font-size:.88rem;font-weight:800;letter-spacing:.04em;line-height:20px;
}

/* ---------- ヘッダー ---------- */
header.site{
  height:var(--header-h);display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  position:sticky;top:var(--bar-h);z-index:200;border-bottom:1px solid var(--line);
  padding:0 20px;
}
.brand{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:1rem;letter-spacing:.34em;color:var(--ink);text-decoration:none;
}
.brand small{font-size:.62rem;letter-spacing:.2em;color:var(--ink-soft);margin-left:1.2em}

/* ---------- ① ヒーロー（3枚スライド・24秒でフェード） ----------
   写真の上には何も置かない（屋号もキャッチも暗幕も置かない）。
   写真館10社中9社が写真に文字を載せていない実測・2026-08-20 鈴木さん決定＝A案。
   写真は contain で「絶対に切らない」。枠が写真より横長のときは生成りの余白で受ける。
   Ken Burns のズームは写真の端を食うため廃止し、フェードだけにした。
   高さは 16:9 と「屋号が画面内に残る高さ」の小さい方（横長画面で屋号が
   画面外へ落ちるのを防ぐ）。 */
.hero{
  position:relative;overflow:hidden;background:var(--bg-soft);
  height:min(calc(100vw * 9 / 16), calc(100svh - var(--bar-h) - var(--header-h) - 190px));
  min-height:300px;
}
.hero .slides{position:absolute;inset:0}
.hero .slide{position:absolute;inset:0;background:var(--bg-soft) center/contain no-repeat;opacity:0;animation:cycle 24s infinite}
/* 1枚目は負のディレイで「フェード済み」の状態から始める（初回表示の約1秒、
   生成りだけが見えるのを防ぐ）。間隔は8秒のまま。 */
.hero .slide:nth-child(1){animation-delay:-1s}
.hero .slide:nth-child(2){animation-delay:7s}
.hero .slide:nth-child(3){animation-delay:15s}
@keyframes cycle{
  0%{opacity:0}
  4%{opacity:1}
  33.3%{opacity:1}
  41%{opacity:0}
  100%{opacity:0}
}
/* 屋号は h1（ページ唯一の大見出し）。写真の外＝直下に置く。
   写真に重ねないので、白ハロー（text-shadow）は不要になった */
.mark{
  display:block;padding:2.1rem 20px .2rem;
  font-weight:400;text-align:center;color:var(--ink);
}
.mark .ja{display:block;font-size:clamp(1.5rem,4.4vw,2.1rem);letter-spacing:.42em;text-indent:.42em;line-height:1.6}
.mark .en{display:block;margin-top:1rem;font-size:.68rem;letter-spacing:.34em;text-indent:.34em;color:var(--ink-soft)}

/* ヒーロー直下の1行（業種の明示＋ページ最初のCTA接点） */
.hero-note{
  border-bottom:1px solid var(--line);
  padding:.6rem 20px 1.1rem;text-align:center;
  font-size:.86rem;letter-spacing:.14em;line-height:2;
}
.hero-note b{font-weight:400;color:var(--ink)}
.hero-note .sep{color:var(--line);margin:0 .7em}

/* ---------- セクション共通 ---------- */
section.block{padding:var(--sec-pad) 0}
.col{width:min(var(--col),calc(100% - 44px));margin-inline:auto}
.wide{width:min(var(--wide),calc(100% - 44px));margin-inline:auto}
.soft{background:var(--bg-soft)}
.sec-head{margin-bottom:clamp(28px,4vw,40px)}
/* 見出しは立てない（実測3社の型）。日本語16〜20px＋英字キッカー0.78rem。
   30px超の日本語大見出しは写真館10社でゼロだったので使わない。 */
.sec-head .en{
  display:block;font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent-ink);
}
.sec-head h2{
  font-size:1.15rem;font-weight:400;letter-spacing:.2em;margin-top:.7rem;line-height:1.9;
}
.lede p{margin-bottom:1.4rem}
.lede p:last-child{margin-bottom:0}
.note{margin-top:1.4rem;font-size:.78rem;color:var(--ink-soft);letter-spacing:.08em;line-height:2}
.caption{margin-top:.8rem;font-size:.74rem;letter-spacing:.1em;color:var(--ink-soft);line-height:2}

/* ---------- ② キャッチ＋リード ---------- */
.catch{
  font-size:clamp(1.25rem,3.4vw,1.6rem);font-weight:400;
  letter-spacing:.16em;line-height:2;margin-bottom:clamp(24px,3.5vw,36px);
}
.bleed{width:100%;margin:clamp(36px,5vw,56px) 0 0}
.bleed img{width:100%;height:clamp(240px,42vw,520px);object-fit:cover}

/* ---------- ③ 撮影メニュー ---------- */
.menu-list{display:grid;gap:clamp(36px,4.5vw,56px)}
.menu-item{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(20px,3.5vw,44px);align-items:center}
.menu-item:nth-child(even) .shot{order:2}
.menu-item .shot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.menu-item h3{font-size:1.02rem;font-weight:400;letter-spacing:.2em;line-height:1.9}
.menu-item h3 span{display:block;font-size:.7rem;letter-spacing:.24em;color:var(--accent-ink);margin-bottom:.6rem}
.menu-item p{margin-top:.9rem;font-size:.9rem;color:var(--ink-soft);line-height:2;letter-spacing:.08em}
/* 料金は下限ひとつと土日祝の追加額だけ（トップに料金表は置かない＝実測10社中0社） */
.price-line{
  margin-top:clamp(36px,5vw,52px);padding-top:1.6rem;border-top:1px solid var(--accent);
  text-align:center;letter-spacing:.14em;line-height:2.1;
}
.price-line .v{font-size:1.35rem;letter-spacing:.08em;white-space:nowrap;font-feature-settings:"palt"}
.price-line small{display:block;margin-top:.5rem;font-size:.8rem;color:var(--ink-soft);letter-spacing:.1em}

/* ---------- ④ ギャラリー（写真を大きく24点・角丸0・影0・線アイコンなし） ---------- */
.gal{margin-top:clamp(28px,4vw,40px)}
.gal-full{width:100%;margin-bottom:6px}
.gal-full img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
.gal-grid img{width:100%;aspect-ratio:2/3;object-fit:cover}
.gal-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.gal-pair img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gal > *:last-child{margin-bottom:0}

/* ---------- ⑤ 撮影の流れ（3ステップ・線アイコンは使わず実写） ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,32px)}
.flow img{width:100%;aspect-ratio:3/2;object-fit:cover}
.flow h3{margin-top:1rem;font-size:.98rem;font-weight:400;letter-spacing:.18em}
.flow h3 span{color:var(--accent-ink);margin-right:.7em;letter-spacing:.1em}
.flow p{margin-top:.6rem;font-size:.86rem;color:var(--ink-soft);line-height:2;letter-spacing:.08em}

/* ---------- ⑥ 店主あいさつ ---------- */
.owner-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.owner-wrap img{width:100%;aspect-ratio:3/2;object-fit:cover}
.owner-wrap p{margin-bottom:1.3rem}
.owner-wrap p:last-child{margin-bottom:0}
.sign{font-size:.82rem;letter-spacing:.2em;color:var(--ink-soft);margin-top:1.6rem}

/* ---------- ⑦ アクセス・ご予約 ---------- */
.info{width:100%;border-collapse:collapse;text-align:left}
.info th,.info td{padding:1rem 0;vertical-align:top;font-weight:400;line-height:2;letter-spacing:.08em;font-size:.92rem}
.info th{width:8.5em;color:var(--ink-soft);font-size:.85rem;white-space:nowrap}
.info tr + tr th,.info tr + tr td{border-top:1px solid var(--line)}
.access-photo{margin-top:clamp(28px,4vw,44px)}
.access-photo img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* 予約導線＝LINEを一次・電話を二次。Instagramは三次（作例を見る導線） */
.ways{margin-top:clamp(28px,4vw,40px);display:flex;flex-direction:column;gap:1rem;align-items:center}
.way{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:56px;min-width:min(360px,100%);padding:.85rem 1.8rem;
  letter-spacing:.14em;font-size:1rem;line-height:1.8;cursor:default;text-align:center;
}
.way small{display:block;font-size:.72rem;letter-spacing:.08em;margin-top:.3rem;opacity:.85}
.way.line{background:var(--line-green);color:#fff}
.way.tel{border:1px solid var(--accent);color:var(--ink)}
/* LINEボタンの直下に「送る内容3つ」を明示する（実測10社の誰もやっていない差分） */
/* Instagram（2026-08-20 鈴木さん指示で追加）。Instagram のブランド色（グラデーション）で塗る。
   他サンプル（灰白・hairsalon-akari-spot 等）の .btn.instagram と同じ配色にそろえてある。 */
.way.ig{
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;
}
.way.ig .lbl{display:inline-flex;align-items:center;gap:.6em}
.way.ig svg{width:18px;height:18px;fill:currentColor;flex:none}

.send3{
  margin:1.2rem auto 0;max-width:520px;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.86rem;line-height:2.1;letter-spacing:.08em;
}
.send3 b{display:block;font-weight:400;color:var(--accent-ink);font-size:.78rem;letter-spacing:.2em;margin-bottom:.5rem}
.send3 ol{list-style:none;counter-reset:s}
.send3 li{counter-increment:s;padding-left:2.1em;position:relative}
.send3 li::before{content:counter(s);position:absolute;left:0;color:var(--accent-ink);font-size:.8rem}

/* ---------- 他サンプルへの導線 ---------- */
.upsell{background:var(--bg-soft);padding:clamp(44px,6vw,64px) 0;text-align:center}
.upsell p{font-size:.9rem;letter-spacing:.1em;line-height:2}
.upsell a{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  margin-top:1.4rem;padding:.55rem 1.9rem;border:1px solid var(--ink);
  color:var(--ink);text-decoration:none;letter-spacing:.16em;font-size:.88rem;
}

/* ---------- フッター ---------- */
footer.site{background:var(--bg);border-top:1px solid var(--line);padding:clamp(40px,5vw,60px) 22px calc(var(--cta-h) + 40px);text-align:center}
footer.site p{font-size:.78rem;color:var(--ink-soft);letter-spacing:.08em;line-height:2.1;margin-bottom:1rem}
footer.site p:last-child{margin-bottom:0}
footer.site a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 .4em;color:var(--ink-soft)}
.fake-note{max-width:640px;margin-inline:auto}

/* ---------- スマホ固定CTAバー（生成り地・上辺1px罫のみ・影なし） ---------- */
.fixed-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:250;
  height:var(--cta-h);background:var(--bg-soft);border-top:1px solid var(--line);
  display:flex;align-items:stretch;
  opacity:0;transform:translateY(100%);pointer-events:none;
  transition:opacity .4s ease,transform .4s ease;
}
.fixed-cta.on{opacity:1;transform:none;pointer-events:auto}
.fixed-cta .b{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:var(--cta-h);font-size:.84rem;letter-spacing:.12em;color:var(--ink);
  line-height:1.5;cursor:default;
}
.fixed-cta .b + .b{border-left:1px solid var(--line)}
.fixed-cta .b small{font-size:.62rem;letter-spacing:.04em;color:var(--ink-soft);margin-top:.1rem}

/* ---------- 画面幅 ---------- */
@media (min-width:901px){
  .fixed-cta{display:none}
  footer.site{padding-bottom:clamp(40px,5vw,60px)}
}
@media (max-width:900px){
  .menu-item{grid-template-columns:1fr}
  .menu-item:nth-child(even) .shot{order:0}
  .menu-item .shot img{aspect-ratio:3/2}
  .owner-wrap{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:1fr;gap:clamp(24px,5vw,32px)}
}
@media (max-width:800px){
  header.site{padding:0 14px}
  .brand{font-size:.94rem;letter-spacing:.26em}
  .brand small{display:none}
  .info th{width:7em;font-size:.8rem}
  .hero-note .sep{display:block;height:0;overflow:hidden;margin:0}
}

/* 縦向きのスマホだけ縦写真（9:16）。枠も縦なので contain だと左右が大きく余るため
   ここだけ cover に戻す。横向きスマホは幅800px以下でも横長の枠になるので、
   この指定を当てると縦写真の上下が大きく切れる（2026-08-20 Codex QA指摘）。 */
@media (max-width:800px) and (orientation:portrait){
  .hero{
    height:min(calc(100vw * 16 / 9), calc(100svh - var(--bar-h) - var(--header-h) - 130px));
  }
  .hero .slide{background-size:cover}
  .hero .slide.s1{background-image:url("/samples/photo-hitohira-spot/images/hero-1-sp.jpg") !important}
  .hero .slide.s2{background-image:url("/samples/photo-hitohira-spot/images/hero-2-sp.jpg") !important}
  .hero .slide.s3{background-image:url("/samples/photo-hitohira-spot/images/hero-3-sp.jpg") !important}
}

/* 高さの低い画面（横向きスマホ・200%拡大したノートPCなど）。
   min-height:300px が高さの上限を打ち消して屋号が画面外へ落ちるため、
   ここでは下限を外し、屋号のまわりも詰める（2026-08-20 Codex QA指摘）。 */
@media (max-height:560px){
  .hero{
    min-height:0;
    height:min(calc(100vw * 9 / 16), calc(100svh - var(--bar-h) - var(--header-h) - 104px));
  }
  .mark{padding:.9rem 20px .2rem}
  .mark .ja{font-size:1.15rem;letter-spacing:.3em;text-indent:.3em}
  .mark .en{display:none}
}
@media (max-width:430px){
  body{letter-spacing:.05em}
  .mark .ja{letter-spacing:.3em;text-indent:.3em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .slide{animation:none;opacity:0}
  .hero .slide:nth-child(1){opacity:1}
  .fixed-cta{transition:none}
}

/* ---------- 撮影ごよみ・よくあるご質問（2026-08-20 追加） ---------- */
.koyomi{margin-top:clamp(36px,5vw,56px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line)}
.koyomi h3{
  font-size:.78rem;letter-spacing:.24em;text-indent:.24em;font-weight:400;
  color:var(--accent-ink);text-align:center;margin-bottom:1.2rem;
}
.koyomi .info th{width:7.5em;color:var(--accent-ink)}
.koyomi .note{margin-top:1.2rem}
/* 質問は折りたたみ。5問を開いたままだと1.2〜1.5画面ぶんになるため
   （PC1038px・SP1295pxを実測）、1問目だけ開いた状態にする。 */
.faq-item{border-top:1px solid var(--line)}
.faq-item:first-child{border-top:0}
.faq-item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.3rem 2.4rem 1.3rem 0;
  font-size:.95rem;letter-spacing:.08em;line-height:1.9;
  min-height:44px;display:flex;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:.5rem;top:50%;width:9px;height:9px;
  border-right:1px solid var(--accent-ink);border-bottom:1px solid var(--accent-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.faq-item p{
  margin:0 0 1.5rem;color:var(--ink-soft);
  font-size:.9rem;line-height:2.1;letter-spacing:.08em;
}