/* =====================================================================
   home.css — promotion 新トップ専用スタイル（プレビュー: /?v=new）
   ルール準拠: 単位は em / コンテナ min(92%,80em) / メディアクエリは max-width:769px のみ
   命名は FLOCSS風（l- レイアウト / c- コンポーネント / u- ユーティリティ / is- 状態）
   既存 style.css(レガシー) と衝突しないよう、すべて .l-home 配下にスコープする。
   ===================================================================== */

/* ---- レイアウト基盤 ---- */
.l-home { overflow-x: hidden; }
.l-home .l-container { width: min(92%, 80em); margin-inline: auto; }
.l-home .l-container--narrow {
    width: min(92%, 60em);
    margin-inline: auto;
}
.l-home .l-section { margin: 5.5em 0; }
.l-home .l-section:first-child { margin-top: 3em; }
@media (max-width: 769px) {
  .l-home .l-section { margin: 4em 0; }
}

/* ---- セクション見出し ---- */
/* 本番LP(.c-plan / .c-faq header)の見出しを踏襲: 中央寄せ・ENはタイトル右に
   インライン配置(小さめグレー・通常ウェイト)・説明文はグレー */
.l-home .c-sect-head {
    margin: 0 0 2em;
}
/* 料金プラン/ヘアメイクオプションの見出しは中央寄せ */
.l-home .p-plan .c-sect-head,
.l-home .p-opt .c-sect-head { text-align: center; }
/* 本番 .c-heading h2 + data-label を踏襲: タイトル1.5em＋ENラベルを下に小さく(normal/Google Sans) */
.l-home .c-sect-head__title { display: block; margin: 0; font-size: 1.5em; font-weight: 700; }
.l-home .c-sect-head__en { display: block; margin: 0; font-size: .9375em; font-weight: 400; font-family: 'Google Sans', sans-serif; letter-spacing: .05em; color: #1a1a1a; }
.l-home .c-sect-head__desc { margin: 1em 0 0; font-size: .9375em; color: #1a1a1a; }
@media (max-width: 769px) {
  .l-home .c-sect-head__title { font-size: 1.3125em; }
}

/* ---- ボタン（塗り・角丸） ---- */
.l-home .c-btn { display: inline-block; padding: .9em 2.25em; font-weight: 700; text-decoration: none; color: #1a1a1a; background: #fff; border: .125em solid #1a1a1a; border-radius: 2em; box-shadow: .0625em .0625em .3125em rgba(0,0,0,.2); transition: .3s; }
.l-home .c-btn:hover { color: #fff; background: #1a1a1a; }

/* ---- 矢印リンク（右寄せ・下線＋矢印） style.css の .btn.btn-arrow を踏襲 ---- */
.l-home .c-btn-arrow { margin: 1em 0 0; text-align: right; }
.l-home .c-btn-arrow a { position: relative; display: inline-block; padding: 0 1.25em 0 .5em; font-weight: 700; color: inherit; text-decoration: none; }
.l-home .c-btn-arrow a::before { content: ''; position: absolute; bottom: -.625em; left: 0; width: 100%; height: .125em; background: #1a1a1a; transition: all .3s; }
.l-home .c-btn-arrow a::after { content: ''; position: absolute; bottom: -.3125em; right: 0; width: .9375em; height: .125em; background: #1a1a1a; transform: rotate(35deg); transition: all .3s; }
.l-home .c-btn-arrow a:hover::before { left: .5em; }
.l-home .c-btn-arrow a:hover::after { right: -.5em; }
@media (max-width: 769px) {
  .l-home .c-btn-arrow a { font-size: .9375em; }
}

/* =====================================================================
   セクション: 強み3点（point）
   ===================================================================== */
.l-home .p-points__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; align-items: start; }
.l-home .p-points__pic { width: 100%; height: auto; display: block; }
@media (max-width: 769px) {
  .l-home .p-points__grid { gap: .5em; }
}

/* =====================================================================
   セクション: 料金プラン（plan）— 旧デザイン寄せ（フラット・中央寄せ・装飾ラベル）
   ===================================================================== */
.l-home .p-plan__grid { width: min(100%, 62em); margin: 0 auto; display: flex; justify-content: center; gap: 1.5em; }
.l-home .c-plan { flex: 1 1 0; max-width: 19em; text-align: center; }
.l-home .c-plan__name { position: relative; margin: 0 0 .75em; padding: 1.75em 0 0; }
.l-home .c-plan__title { margin: 0; font-size: 1.0625em; font-weight: 700; }
.l-home .c-plan__label { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: .0625em; padding: .25em .875em; font-size: .875em; font-weight: 700; color: #ff5a5f; transform: rotate(-15deg); white-space: nowrap; }
.l-home .c-plan__label::before, .l-home .c-plan__label::after { content: ""; width: 1.25em; height: .125em; background: #ff5a5f; border-radius: .0625em; }
.l-home .c-plan__label::before { transform: rotate(60deg); }
.l-home .c-plan__label::after { transform: rotate(-60deg); }
.l-home .c-plan__price { margin: 0 0 1em; }
.l-home .c-plan__amount {
    font-size: 2em;
    letter-spacing: .01em;
}
.l-home .c-plan__yen { font-size: .75em; padding-right: .125em; }
.l-home .c-plan__tax {
    display: block;
    margin: .5em 0 0;
    font-size: .75em;
}
.l-home .c-plan__spec { margin: 0; }
.l-home .c-plan__row { display: flex; justify-content: center; align-items: baseline; gap: .25em; padding: .45em 0; }
.l-home .c-plan__row dt { font-size: .8125em; color: #1a1a1a; }
.l-home .c-plan__row dt::after { content: "："; }
.l-home .c-plan__row dd { margin: 0; font-size: .875em; }
.l-home .c-plan__row dd b { padding: 0 .05em; font-weight: 700; font-style: normal; }
.l-home .c-plan__row dd small { padding-left: .375em; font-size: .6875em; color: #3a3a3a; }
.l-home .p-plan__notes { width: min(100%, 52em); margin: 2.5em auto 0; padding: 0; list-style: none; text-align: left; }
.l-home .p-plan__notes li { font-size: .75em; color: #1a1a1a; }
@media (max-width: 769px) {
  /* スマホは横スワイプ（中央スナップ）。初期位置は sec-plan.php の JS で中央カードへ */
  .l-home .p-plan__grid { width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1em; padding: .5em 0 1em; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .l-home .p-plan__grid::-webkit-scrollbar { display: none; }
  .l-home .c-plan { flex: 0 0 78%; max-width: none; scroll-snap-align: center; }
  .l-home .c-plan:first-child { margin-left: .5em; }
  .l-home .c-plan:last-child { margin-right: .5em; }
}

/* =====================================================================
   セクション: ヘアメイクオプション（opt）
   マークアップは本番 content-promotional の .c-hairmake を流用。
   スタイルは wp-editor.css の .c-hairmake__row 等（サイト共通読込）に一本化。
   ===================================================================== */

/* =====================================================================
   セクション: プランの選び方（choose）＋ 汎用フィーチャーグリッド c-feat
   ===================================================================== */
.l-home .p-choose__block { margin: 2.5em 0 0; }
/* 本番 .c-heading.circle h3 を踏襲: 左寄せ＋左に淡灰丸＋赤ドットのマーカー */
.l-home .c-subhead { position: relative; margin: 0 0 .75em; padding-left: 1.75em; font-size: 1.375em; font-weight: 700; text-align: left; }
.l-home .c-subhead::before { content: ""; position: absolute; top: .7em; left: 0; width: 1em; height: 1em; background: #f5f5f5; border-radius: 50%; transform: translateY(-50%); }
.l-home .c-subhead::after { content: ""; position: absolute; top: .7em; left: 0; width: 1em; height: 1em; background: #ff5a5f; border-radius: 50%; transform: translateY(-50%) scale(.25); }
.l-home .c-subhead__lead { margin: 0 0 1.5em; font-size: .9375em; text-align: left; }
.l-home .c-subhead__note { margin: -.75em 0 1.5em; font-size: .8125em; color: #888; text-align: left; }

.l-home .c-feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25em; }
.l-home .c-feat--5 { grid-template-columns: repeat(5, 1fr); }
.l-home .c-feat--4 { grid-template-columns: repeat(4, 1fr); }
.l-home .c-feat__item { margin: 0; }
.l-home .c-feat__fig { margin: 0; }
.l-home .c-feat__fig img { width: 100%; height: auto; display: block; border-radius: .375em; }
.l-home .c-feat__title { margin: .625em 0 .25em; font-size: 1.125em; font-weight: 700; text-align: left; }
.l-home .c-feat__text { margin: 0; font-size: .9375em; color: #1a1a1a; }
.l-home .c-feat--3 { grid-template-columns: repeat(3, 1fr); }
.l-home .c-feat__num { color: #ff5a5f; font-weight: 700; margin-right: .2em; }
@media (max-width: 769px) {
  /* スマホは横スクロール（スナップ） */
  .l-home .c-feat { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0 1em; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .l-home .c-feat--3 { grid-auto-columns: 76%; }
  .l-home .c-feat::-webkit-scrollbar { display: none; }
  .l-home .c-feat__item { scroll-snap-align: center; }
}

/* =====================================================================
   セクション: 選ばれる理由（OUR STRENGTH）
   画像＋テキストを左右交互に並べる縦リスト（本番LP content-promotional の
   .c-feature.vertical.column-pc_2 のレイアウトを新トップの規約で再現）
   ===================================================================== */
.l-home .p-reason__list { list-style: none; margin: 0; padding: 0; }
.l-home .p-reason__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 2.5em auto; }
.l-home .p-reason__item:first-child { margin-top: 0; }
/* 偶数行は画像とテキストの左右を入れ替え（本番の even/odd 交互） */
.l-home .p-reason__item:nth-child(even) { flex-direction: row-reverse; }
.l-home .p-reason__fig { margin: 0; width: 60%; }
.l-home .p-reason__fig img { display: block; width: 100%; height: auto; border-radius: .375em; }
.l-home .p-reason__body { width: 35%; }
.l-home .p-reason__title { margin: 0 0 .375em; font-size: 1.125em; font-weight: 700; }
.l-home .p-reason__num { color: #ff5a5f; font-weight: 700; font-size: 1.375em; margin-right: .25em; }
.l-home .p-reason__text { margin: 0; font-size: .9375em; color: #1a1a1a; }
@media (max-width: 769px) {
  /* スマホは画像→テキストの縦積み（左右交互は解除） */
  .l-home .p-reason__item, .l-home .p-reason__item:nth-child(even) { flex-direction: column; margin: 2em auto; }
  .l-home .p-reason__fig { width: 100%; margin: 0 0 .75em; }
  .l-home .p-reason__body { width: 100%; }
}

/* =====================================================================
   セクション: 撮影までの流れ（flow）
   ===================================================================== */
/* 本番LP content-promotional の .c-flow を踏襲: 番号入り丸バッジ＋小アイコンを横一列。
   はみ出しは横スクロール（CSSカウンタで連番、画像はアイコンとして小さく中央寄せ） */
.l-home .c-flow { counter-reset: flow; list-style: none; margin: 0; padding: .5em 0 1em; display: flex; gap: 1%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.l-home .c-flow::-webkit-scrollbar { display: none; }
.l-home .c-flow__step { counter-increment: flow; position: relative; flex: 0 0 min(17%, 12.5em); margin: 0; }
.l-home .c-flow__step::before { content: counter(flow); position: absolute; top: 0; left: .5em; display: grid; place-content: center; width: 2em; height: 2em; font-size: 1.125em; font-weight: 700; border: .125em solid #1a1a1a; border-radius: 50%; background: #fff; }
.l-home .c-flow__fig { margin: 0 auto .5em; width: min(75%, 5em); }
.l-home .c-flow__fig img { width: 100%; height: auto; display: block; border-radius: 0; }
.l-home .c-flow__title { margin: 0 0 .25em; font-size: 1em; font-weight: 700; text-align: center; }
.l-home .c-flow__text { margin: 0; font-size: .8125em; color: #1a1a1a; }
@media (max-width: 769px) {
  .l-home .c-flow__step { flex-basis: 9em; }
  .l-home .c-flow__step::before { font-size: .875em; }
}

/* =====================================================================
   セクション: よくある質問（faq）— jQuery slideToggle アコーディオン（本番踏襲）
   ===================================================================== */
/* 本番LP content-promotional の .c-faq を踏襲: コンテナ幅45em・大きめQ./A.アイコン・
   黒丸＋白シェブロンのトグル（本番はFontAwesome、ここはCSS描画で再現） */
.l-home .p-faq .l-container--narrow { width: min(92%, 45em); }
.l-home .c-faq__item {
    margin: 0;
}
.l-home .c-faq__q {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .5em;
    margin: 0;
    padding: .5em 2.5em 0.5em .25em;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
/* 黒丸 */
.l-home .c-faq__q::after { content: ""; position: absolute; top: 50%; right: .25em; width: 1.5em; height: 1.5em; border-radius: 50%; background: #1a1a1a; transform: translateY(-50%); }
/* 白シェブロン（黒丸の中央。閉=下向き／開=上向き） */
.l-home .c-faq__q::before { content: ""; position: absolute; top: 50%; right: .78em; z-index: 1; width: .4375em; height: .4375em; border-right: .125em solid #fff; border-bottom: .125em solid #fff; transform: translateY(-65%) rotate(45deg); transition: transform .25s; }
.l-home .c-faq__q.is-open::before { transform: translateY(-35%) rotate(-135deg); }
/* 回答はjQuery slideToggleで開閉（本番同様）→初期は非表示・ブロック流し込み */
.l-home .c-faq__a { display: none; margin: 0; padding: 0 .25em 1.2em; }
.l-home .c-faq__a .c-faq__icon { padding-right: .35em; }
.l-home .c-faq__icon { font-weight: 700; color: #1a1a1a; font-size: 1.5em; }
.l-home .c-faq__text { font-size: .9375em; }
.l-home .c-faq__q .c-faq__text { font-size: 1em; padding-top: .15em; }

/* =====================================================================
   セクション: フォトギャラリー（gallery）— 横2:縦3
   ===================================================================== */
.l-home .p-gallery__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5em; }
.l-home .p-gallery__item { display: block; overflow: hidden; border-radius: .375em; }
.l-home .p-gallery__item figure { margin: 0; aspect-ratio: 2 / 3; }
.l-home .p-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.l-home .p-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 769px) {
  .l-home .p-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: .375em; }
}

/* =====================================================================
   セクション: 撮影店舗（store）
   ===================================================================== */
/* 店舗情報(左)｜地図(中)｜スタジオ写真(右)の横3列・カード枠なし。
   地域見出し(東京/神奈川)は左寄せ・店名は下線付き */
.l-home .p-store .c-subhead { margin: 0 0 1em; padding-left: 0; font-size: 1.25em; text-align: left; }
.l-home .p-store .c-subhead::before,
.l-home .p-store .c-subhead::after { display: none; }
.l-home .p-store__list { margin: 0 0 2.5em; }
.l-home .c-store { display: flex; align-items: flex-start; gap: 1.5em; margin: 0 0 2.5em; }
.l-home .c-store__info {
    flex: 0 0 32%;
}
.l-home .c-store__name { margin: 0 0 .625em; padding: 0 0 .375em; font-size: 1.125em; font-weight: 700; border-bottom: .0625em solid #1a1a1a; }
.l-home .c-store__addr { margin: 0; font-style: normal; }
.l-home .c-store__station { margin: .625em 0 0; font-size: .875em; color: #1a1a1a; }
.l-home .c-store__media { flex: 1 1 auto; display: flex; gap: 1.5em; height: 15em; }
.l-home .c-store__map { flex: 1 1 0; height: 100%; }
.l-home .c-store__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.l-home .c-store__photo { flex: 1 1 0; height: 100%; margin: 0; }
.l-home .c-store__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 769px) {
  .l-home .c-store { flex-direction: column; gap: .75em; margin: 0 0 1.75em; }
  .l-home .c-store__info { flex-basis: auto; }
  .l-home .c-store__media { flex-direction: column; gap: .75em; height: auto; }
  .l-home .c-store__map { height: 12em; }
  .l-home .c-store__photo { height: 12em; }
}