/* =========================================================
   sema-theme front-page.css（トップページ9セクション）
   静的プレビュー preview/top-design-v1/styles.css を sema- プレフィックスで移植。
   デザイン基準：preview/top-design-v1/design-spec.md
   ========================================================= */

/* 見出しモチーフ（セクションごとに形を変えて反復） */
.sema-about .sema-heading,
.sema-faq .sema-heading{ position:relative; padding-left:20px; }
.sema-about .sema-heading::before,
.sema-faq .sema-heading::before{ content:""; position:absolute; left:0; top:.22em; bottom:.22em; width:2px; background:var(--sema-bronze); }
.sema-guides .sema-heading,
.sema-stores .sema-heading{ text-align:center; }
.sema-guides .sema-heading::after,
.sema-stores .sema-heading::after{ content:""; display:block; width:42px; height:1px; background:var(--sema-bronze); margin:.9em auto 0; }
/* トップ各セクションの本文は日本語を文節単位で折り返す（「それぞれ」等が語の途中で切れないように）。未対応ブラウザは通常折り返しにフォールバック。 */
/* ★2026-08-24 変更。keep-all＋anywhere は日本語だと語の途中で折れる（base.css の説明を参照）。
   折り返しの指定は body（.sema-theme）から継承し、ここでは長いURL等の安全網だけ残す。 */
.sema-body{ overflow-wrap:break-word; }
/* 運営店舗の導入文：見出しに合わせて中央揃え（句読点折り返しでも左端が不揃いに見えないように） */
.sema-stores .sema-body{ text-align:center; margin-inline:auto; }
.sema-news .sema-heading::before,
.sema-categories .sema-heading::before{ content:""; display:block; width:28px; height:1px; background:var(--sema-bronze); margin:0 0 1.1em; }

/* 表示ユーティリティ */
.sema-show-sp{ display:none; }

/* =========================================================
   1. ファーストビュー
   ========================================================= */
.sema-fv{ position:relative; overflow:hidden; background:radial-gradient(120% 90% at 90% 0%, var(--sema-sage-weak) 0%, transparent 44%), linear-gradient(180deg, var(--sema-bg) 0%, var(--sema-ivory) 100%); border-bottom:1px solid var(--sema-line); }
.sema-fv-inner{ position:relative; max-width:var(--sema-maxw); margin-inline:auto; padding:clamp(76px,11vw,148px) var(--sema-pad) clamp(64px,9vw,116px); display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
.sema-fv-eyebrow{ font-family:var(--sema-serif); font-size:.9rem; letter-spacing:.14em; color:var(--sema-ink-soft); font-weight:500; margin:0 0 1.9em; display:inline-flex; align-items:center; }
.sema-fv-eyebrow::before{ content:""; display:inline-block; width:30px; height:1px; background:var(--sema-bronze); margin-right:1em; }
.sema-fv-heading{ font-family:var(--sema-serif); font-weight:700; font-size:clamp(2.5rem, 6.8vw, 4.5rem); line-height:1.3; letter-spacing:.1em; margin:0 0 .75em; color:var(--sema-ink); text-wrap:balance; }
/* ★2026-08-02：h1 の1行目「女風と呼ばれる」を副題のように小さく組む。
   h1 の外に出さないこと。出すと h1 が10文字に戻り、改善点レポートの「13〜44文字」を割る。
   em 指定なので、PC・スマホとも本体の見出しに比例して縮む。 */
.sema-fv-heading__sub{ display:block; font-size:.42em; font-weight:600; line-height:1.5; letter-spacing:.16em; color:var(--sema-ink-soft); margin-bottom:.3em; }
.sema-fv-sub{ font-family:var(--sema-serif); font-weight:500; font-size:clamp(1.02rem,2.2vw,1.2rem); color:var(--sema-ink-soft); margin:0 0 2.8em; max-width:29em; line-height:2; }
.sema-fv-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }

/* 装飾面 */
.sema-fv-deco{ position:relative; display:none; min-height:380px; }
.sema-fv-deco-plate{ position:absolute; top:30px; left:56px; right:0; bottom:-30px; background:linear-gradient(158deg, var(--sema-sage-deep), var(--sema-sage)); z-index:0; box-shadow:0 34px 64px rgba(31,50,44,.20); }
.sema-fv-deco-frame{ position:absolute; inset:0 44px 0 0; border:1px solid var(--sema-line-2); z-index:1; }
.sema-fv-deco-vline{ position:absolute; top:-16px; bottom:-16px; left:70%; width:1px; background:var(--sema-line-2); z-index:1; }
.sema-fv-deco-hline{ position:absolute; left:-16px; right:24px; top:30%; height:1px; background:var(--sema-line-2); z-index:1; }
.sema-fv-deco-index{ position:absolute; z-index:2; left:78px; top:56px; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.sema-fv-deco-index li{ font-family:var(--sema-serif); font-size:1.15rem; font-weight:500; color:var(--sema-ivory); letter-spacing:.4em; display:flex; align-items:center; gap:16px; }
.sema-fv-deco-index i{ font-style:normal; font-size:.64rem; letter-spacing:.12em; color:var(--sema-bronze-soft); }
.sema-fv-deco-mark{ position:absolute; z-index:2; right:22px; bottom:2px; font-family:var(--sema-serif); font-weight:900; letter-spacing:.08em; font-size:clamp(2.6rem,5.4vw,4rem); color:rgba(242,236,224,.28); }

/* =========================================================
   2. このサイトで分かること
   ========================================================= */
.sema-about{ padding:clamp(60px,8vw,104px) 0; }
.sema-split{ max-width:var(--sema-maxw); margin-inline:auto; padding-inline:var(--sema-pad); display:grid; grid-template-columns:1fr; gap:34px; }
.sema-points{ list-style:none; margin:0 0 1.8em; padding:0; counter-reset:pt; }
.sema-points li{ position:relative; display:flex; align-items:baseline; gap:1.3em; padding:1.1em .2em; border-top:1px solid var(--sema-line); color:var(--sema-ink); font-weight:500; letter-spacing:.05em; }
.sema-points li:last-child{ border-bottom:1px solid var(--sema-line); }
.sema-points li::before{ counter-increment:pt; content:counter(pt,decimal-leading-zero); font-weight:700; font-size:.76rem; color:var(--sema-bronze); letter-spacing:.1em; min-width:2em; }
.sema-note{ font-family:var(--sema-serif); font-size:.9rem; color:var(--sema-ink-soft); background:var(--sema-paper); border-left:2px solid var(--sema-bronze); padding:1.1em 1.3em; margin:0; letter-spacing:.03em; }

/* =========================================================
   3. つまずきやすい六つと、その解き方（解決ジャンル）
   ★2026-08-10 追加。about と guides のあいだ。
     guides と同じ「番号＋テキスト＋罫線」の型にそろえ、画像は置かない
     （guides のカード画像と並ぶと写真が続いて重くなる）。
   ========================================================= */
.sema-solve{ padding:clamp(56px,7vw,96px) 0; }
.sema-solve .sema-heading{ position:relative; padding-left:20px; }
.sema-solve .sema-heading::before{ content:""; position:absolute; left:0; top:.22em; bottom:.22em; width:2px; background:var(--sema-sage); }
.sema-solve .sema-body{ max-width:46em; }
.sema-solve-list{ list-style:none; margin:2em 0 1.8em; padding:0; counter-reset:solve; }
.sema-solve-item{ display:flex; gap:22px; align-items:flex-start; padding:26px 4px; border-top:1px solid var(--sema-line-2); }
.sema-solve-item:last-child{ border-bottom:1px solid var(--sema-line-2); }
.sema-solve-num{ font-size:.95rem; font-weight:700; color:var(--sema-sage); line-height:1.7; min-width:2.4em; letter-spacing:.08em; flex:0 0 auto; }
.sema-solve-title{ font-family:var(--sema-serif); font-weight:600; font-size:1.18rem; margin:0 0 .55em; letter-spacing:.05em; line-height:1.6; }
.sema-solve-text p{ font-family:var(--sema-serif); margin:0 0 1em; color:var(--sema-ink-soft); font-size:.96rem; font-weight:500; max-width:34em; line-height:2; }
/* スマホは番号を上に逃がして本文の幅を確保する（guides と違い画像が無いぶん詰められる）。 */
@media (max-width:600px){
  .sema-solve-item{ flex-direction:column; gap:6px; padding:22px 2px; }
  .sema-solve-num{ line-height:1.2; }
  .sema-solve-title{ font-size:1.08rem; }
}

/* =========================================================
   4. 主要導線
   ========================================================= */
.sema-guides{ padding:clamp(56px,7vw,96px) 0; background:var(--sema-ivory); border-block:1px solid var(--sema-line); }
.sema-guide-list{ list-style:none; margin:1.8em 0 0; padding:0; display:grid; gap:0; grid-template-columns:1fr; }
.sema-guide-item{ display:flex; gap:22px; align-items:flex-start; padding:28px 4px; border-top:1px solid var(--sema-line-2); }
.sema-guide-item:last-child{ border-bottom:1px solid var(--sema-line-2); }
.sema-guide-num{ font-size:1rem; font-weight:700; color:var(--sema-bronze); line-height:1.6; min-width:2.4em; letter-spacing:.08em; }
.sema-guide-title{ font-family:var(--sema-serif); font-weight:600; font-size:1.28rem; margin:0 0 .5em; letter-spacing:.06em; }
.sema-guide-text p{ font-family:var(--sema-serif); margin:0 0 1em; color:var(--sema-ink-soft); font-size:.96rem; font-weight:500; max-width:28em; }
/* ★2026-08-02：カードの画像（改善点レポートの「画像6個以上」対応）。
   スマホは「番号｜テキスト」の横並びなので、画像だけ order:-1 で上へ回して全幅にする。
   PCは元から縦積み（flex-direction:column）なので、DOMの順（番号→画像→テキスト）のまま。 */
.sema-guide-img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.sema-guide-item{ flex-wrap:wrap; }
.sema-guide-img{ order:-1; flex:0 0 100%; margin-bottom:6px; }

/* =========================================================
   4. 新着コラム
   ========================================================= */
.sema-news{ padding:clamp(56px,7vw,96px) 0; }
.sema-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.sema-updated{ margin:-.8em 0 0; font-size:.82rem; letter-spacing:.08em; color:var(--sema-ink-soft); }
/* ★2026-08-10：ファーストビューに置いた最終更新。CTAの下に小さく出す。
   news 節の .sema-updated は上に詰める負のマージンを持っているので、こちらで打ち消す。
   スマホの order 指定は下の media query 側（.sema-fv-main{display:contents} 対応）。 */
.sema-fv-updated{ margin:1.8em 0 0; font-size:.78rem; opacity:.85; }
/* 「目的に合わせて読むものを選ぶ」のリードは短い1文。38emで折り返すと不自然なので幅制限を外す（左詰めのまま）。 */
.sema-guides .sema-body{ max-width:none; }
.sema-articles{ list-style:none; margin:1.8em 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:34px; }
.sema-article-link{ display:flex; flex-direction:column; text-decoration:none; color:var(--sema-ink); }
.sema-thumb{ aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(150deg, #e7e0d2 0%, #f1ece2 60%, #e9e3d6 100%); border:1px solid var(--sema-line); margin-bottom:16px; }
.sema-thumb::before{ content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.5); }
.sema-thumb::after{ content:""; position:absolute; left:0; top:0; width:40%; height:100%; background:linear-gradient(120deg, rgba(31,50,44,.10), transparent); }
.sema-thumb-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.66rem; color:var(--sema-ink-mute); letter-spacing:.14em; }
/* アイキャッチ画像がある場合：枠いっぱいに中央クロップ（object-fit）。装飾の内枠・グラデは画像の背面に隠す。 */
.sema-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; }
.sema-article-cat{ font-size:.68rem; font-weight:700; color:var(--sema-sage-deep); letter-spacing:.14em; margin-bottom:.85em; }
.sema-article-title{ font-family:var(--sema-serif); font-size:1.14rem; line-height:1.7; font-weight:600; margin-bottom:.9em; letter-spacing:.05em; }
.sema-article-link:hover .sema-article-title{ color:var(--sema-sage); }
.sema-article-date{ font-size:.76rem; color:var(--sema-ink-mute); letter-spacing:.12em; padding-top:.7em; border-top:1px solid var(--sema-line); align-self:stretch; }

/* =========================================================
   5. カテゴリー
   ========================================================= */
.sema-categories{ padding:clamp(50px,5.5vw,80px) 0; background:var(--sema-greige); border-block:1px solid var(--sema-line); }
/* ★2026-08-02：counter-reset は列をまたいで通し番号にするため .sema-cat-cols 側に移した。
   リスト側に置くと、左右で <ul> が分かれている今の構造では右列が 01 に戻ってしまう。 */
.sema-cat-list{ list-style:none; margin:1.6em 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:0; }
.sema-cat-row{ border-bottom:1px solid var(--sema-line-2); }
.sema-cat-row:first-child{ border-top:1px solid var(--sema-line-2); }
/* 2026-07-30：右端の「見る →」は、下に付けた「◯◯の記事をもっと読む →」と行き先が同じで
   重複するため撤去した。カテゴリー名は引き続きリンクのまま。列は auto 1fr の2列になる。 */
.sema-cat-link{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2px 22px; padding:22px 8px 14px; text-decoration:none; color:var(--sema-ink); transition:padding .25s var(--sema-ease); }
/* ★2026-08-02：位置が動く :hover は「マウスのある環境」だけに限定する。
   タッチ端末では1回目のタップで :hover が貼り付き、次にその下のリンクへ指を置いた瞬間に
   hover が外れて行が縮み、タップ位置からリンクが逃げる＝2回押さないと飛べなくなる。
   実測（幅390px・利用ガイド）：hover の有無で行の高さが 110px ⇄ 130px と20px動いていた。
   色や下線だけの hover はレイアウトが動かないので、そのまま全端末で有効にしてある。 */
@media (hover: hover) and (pointer: fine){
	.sema-cat-link:hover{ padding-left:16px; }
}
.sema-cat-link::before{ counter-increment:cat; content:counter(cat,decimal-leading-zero); grid-column:1; grid-row:1 / span 2; align-self:center; font-weight:700; font-size:.8rem; color:var(--sema-bronze); letter-spacing:.08em; padding-right:.5em; }
.sema-cat-name{ grid-column:2; font-family:var(--sema-serif); font-size:1.18rem; font-weight:600; letter-spacing:.06em; }
.sema-cat-desc{ grid-column:2; font-family:var(--sema-serif); color:var(--sema-ink-soft); font-size:.9rem; font-weight:500; letter-spacing:.03em; }
.sema-cat-go{ grid-column:3; grid-row:1 / span 2; color:var(--sema-sage); font-size:.8rem; letter-spacing:.06em; white-space:nowrap; }
.sema-cat-link:hover .sema-cat-name{ color:var(--sema-sage); }
.sema-cat-link:hover .sema-cat-go{ color:var(--sema-bronze); }

/* カテゴリーごとの記事リンク（2026-07-30 追加）。
   見出し行の counter ぶんだけ左を空けて、テキスト列の頭に揃える。 */
.sema-cat-posts{ list-style:none; margin:0; padding:0 8px 6px calc(8px + 2.6em); display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:2px 22px; }
.sema-cat-posts__item{ margin:0; }
.sema-cat-posts__link{ display:block; padding:5px 0; font-family:var(--sema-serif); font-size:.92rem; line-height:1.55; letter-spacing:.02em; color:var(--sema-ink-soft); text-decoration:none; transition:color .2s var(--sema-ease); }
.sema-cat-posts__link::before{ content:"—"; color:var(--sema-bronze); margin-right:.6em; }
.sema-cat-posts__link:hover{ color:var(--sema-sage); text-decoration:underline; text-underline-offset:.25em; }
.sema-cat-more{ margin:0; padding:0 8px 20px calc(8px + 2.6em); }
.sema-cat-more__link{ font-size:.82rem; letter-spacing:.06em; color:var(--sema-sage); text-decoration:none; }
.sema-cat-more__link:hover{ color:var(--sema-bronze); }
@media (hover: hover) and (pointer: fine){
	.sema-cat-more__link:hover .sema-arrow::after{ margin-left:.9em; }
}

/* 2026-08-02：カテゴリー行をタップで開閉（<details>/<summary>・JSなし）。
   ・既定は閉じる。5カテゴリー×5本が常時開いていて、特にスマホで縦に長すぎたため。
   ・summary の既定マーカー（▶）は消して、右端に自前の山形を出す。
     display を list-item 以外にするとほぼ消えるが、Safari は ::-webkit-details-marker が要る。
   ・山形は grid に載せず絶対配置にしてある。スマホで列構成が変わる（.sema-cat-link の
     grid-template-columns が auto 1fr になる）影響を受けないため。 */
summary.sema-cat-link{ list-style:none; cursor:pointer; }
summary.sema-cat-link::-webkit-details-marker{ display:none; }
.sema-cat-details > .sema-cat-link{ position:relative; padding-right:34px; }
summary.sema-cat-link:focus-visible{ outline:2px solid var(--sema-sage); outline-offset:-3px; }

.sema-cat-mark{ position:absolute; right:12px; top:50%; margin-top:-6px; width:9px; height:9px; border-right:1.6px solid var(--sema-bronze); border-bottom:1.6px solid var(--sema-bronze); transform:rotate(45deg); transition:transform .25s var(--sema-ease), margin-top .25s var(--sema-ease); }
.sema-cat-details[open] > .sema-cat-link .sema-cat-mark{ transform:rotate(-135deg); margin-top:-2px; }
.sema-cat-link:hover .sema-cat-mark{ border-color:var(--sema-sage); }

/* 閉じているときは行の下余白を詰める（開いているときは .sema-cat-more が余白を持つ）。 */
.sema-cat-details:not([open]) > .sema-cat-link{ padding-bottom:20px; }

/* ★2026-08-02：PCの2列は「左右で別のリスト」にする。
   1つのグリッドを2列に流していたときは、グリッドの行の高さが同じ行のセルに揃うため、
   左の項目を開くと右の列の項目まで一緒に押し下がっていた（実測：基礎知識を開くと
   「選び方」が112px下がる）。列ごとに <ul> を分けると、左右がまったく干渉しない。
   スマホは1列に戻す＝2つのリストが縦に続くだけ。 */
.sema-cat-cols{ counter-reset:cat; margin:1.6em 0 0; }
.sema-cat-cols .sema-cat-list{ margin:0; }
/* スマホでは右リストが左リストの下に続くので、境目の罫線が二重にならないようにする。 */
.sema-cat-list--right .sema-cat-row:first-child{ border-top:0; }

@media (min-width:768px){
	.sema-cat-cols{ display:grid; grid-template-columns:1fr 1fr; column-gap:60px; align-items:start; }
	.sema-cat-cols .sema-cat-list:first-child{ margin-right:12px; }
	.sema-cat-list--right{ margin-left:12px; }
	.sema-cat-list--right .sema-cat-row:first-child{ border-top:1px solid var(--sema-line-2); }
}

/* =========================================================
   6. 運営店舗（1面3分割）
   ========================================================= */
.sema-stores{ padding:clamp(50px,5.5vw,84px) 0; background:var(--sema-bg); }
.sema-store-grid{ list-style:none; margin:1.8em 0 0; padding:0; display:grid; grid-template-columns:1fr; background:var(--sema-surface); border:1px solid var(--sema-line-2); }
.sema-store-item{ position:relative; padding:34px 24px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; min-height:210px; }
.sema-store-item:not(:first-child){ border-top:1px solid var(--sema-line); }
.sema-store-num{ font-weight:700; font-size:.74rem; letter-spacing:.2em; color:var(--sema-bronze); margin-bottom:1em; }
.sema-store-num::after{ content:""; display:block; width:18px; height:1px; background:var(--sema-bronze); margin:.7em auto 0; }
.sema-store-name{ font-family:var(--sema-serif); font-size:1.3rem; font-weight:600; margin:0 0 auto; letter-spacing:.12em; }
.sema-btn-store{ margin-top:24px; width:100%; max-width:242px; background:transparent; color:var(--sema-sage-deep); border:1px solid var(--sema-line-strong); }
.sema-btn-store:hover{ border-color:var(--sema-sage); background:rgba(47,74,67,.05); color:var(--sema-sage-deep); }
.sema-btn-store-label{ white-space:nowrap; }
.sema-ext-icon{ flex:0 0 auto; opacity:.8; transition:transform .25s var(--sema-ease); }
.sema-btn-store:hover .sema-ext-icon{ transform:translate(2px,-2px); }
.sema-stores-foot{ margin-top:30px; text-align:center; }

/* =========================================================
   7. 会社について（深緑ブランド帯・非対称）
   ========================================================= */
.sema-company{ position:relative; overflow:hidden; padding:clamp(72px,10vw,128px) 0; background:var(--sema-sage-deep); color:var(--sema-ivory); }
.sema-company::before{ content:""; position:absolute; inset:20px var(--sema-pad); border:1px solid rgba(203,171,122,.22); pointer-events:none; }
.sema-company-inner{ position:relative; display:grid; grid-template-columns:1fr; gap:30px; }
.sema-company-body{ max-width:34em; }
.sema-company .sema-heading{ color:#fff; font-size:clamp(1.85rem,4.2vw,2.7rem); }
.sema-company .sema-body{ font-family:var(--sema-serif); font-size:1.08rem; color:rgba(242,236,224,.86); margin-bottom:2.2em; font-weight:500; max-width:32em; }
.sema-company .sema-btn-outline{ color:#fff; border-color:rgba(203,171,122,.5); }
.sema-company .sema-btn-outline:hover{ border-color:var(--sema-bronze-soft); background:rgba(255,255,255,.06); }
.sema-company-side{ display:none; }

/* =========================================================
   8. FAQ
   ========================================================= */
.sema-faq{ padding:clamp(46px,5vw,72px) 0; }
.sema-faq-list{ list-style:none; margin:1.6em 0 1.8em; padding:0; counter-reset:faq; border-top:1px solid var(--sema-line-2); }
.sema-faq-list li{ border-bottom:1px solid var(--sema-line-2); }
.sema-faq-link{ display:flex; align-items:center; gap:1.1em; padding:19px 6px; text-decoration:none; color:var(--sema-ink); transition:padding .25s var(--sema-ease); }
/* ★2026-08-02：カテゴリー節と同じ理由でタッチ端末では効かせない。
   FAQも「タップで開く→下のリンクを押す」構造なので、同じ2回タップ問題が起きる。 */
@media (hover: hover) and (pointer: fine){
	.sema-faq-link:hover{ padding-left:14px; }
}
.sema-faq-link::before{ counter-increment:faq; content:"Q." counter(faq,decimal-leading-zero); font-weight:700; font-size:.76rem; color:var(--sema-bronze); letter-spacing:.08em; flex:0 0 auto; min-width:3.4em; }
.sema-faq-q{ font-family:var(--sema-serif); font-size:1.05rem; font-weight:500; letter-spacing:.05em; flex:1 1 auto; }
.sema-faq-link .sema-arrow::after{ color:var(--sema-sage); margin-left:0; }
.sema-faq-link:hover .sema-faq-q{ color:var(--sema-sage); }
.sema-faq-link:hover .sema-arrow::after{ color:var(--sema-bronze); }

/* --- ミニFAQ（代表4問＝その場で回答表示）：既存のQ番号・罫線・明朝・アイボリー面を維持 --- */
/* 質問はbutton。見た目は既存 .sema-faq-link（flex・padding・Q番号カウンター）を継承しつつ、button既定をリセット */
.sema-faq-link{ width:100%; background:none; border:0; cursor:pointer; text-align:left; font:inherit; color:var(--sema-ink); }
/* 開閉記号：矢印を＋/−へ（巨大にしない・派手に回転させない） */
.sema-faq-link .sema-arrow::after{ content:"＋"; font-size:.92em; }
.sema-faq-link[aria-expanded="true"] .sema-arrow::after{ content:"−"; color:var(--sema-bronze); }
/* 選択中の質問：色だけに依存せず太字でも示す */
.sema-faq-link[aria-expanded="true"] .sema-faq-q{ color:var(--sema-sage-deep); font-weight:600; }
/* 回答パネル：質問文の開始位置に寄せた左インデント＋ごく淡いペーパー面で静かに区別（カード/角丸/影にしない） */
.sema-faq-answer{ padding:20px clamp(14px,3vw,22px) 20px 3.6rem; background:var(--sema-paper); }
.sema-faq-answer[hidden]{ display:none; }
.sema-faq-answer-text{ font-family:var(--sema-serif); font-size:.98rem; line-height:1.95; letter-spacing:.02em; color:var(--sema-ink-soft); margin:0; overflow-wrap:break-word; }
.sema-faq-answer-more{ margin:.9em 0 0; }
/* 「よくある質問をすべて見る」は回答の一部に見えないよう、リストからの余白で区切る（既存の list 下マージンを維持） */
.sema-faq-all{ display:inline-flex; }

/* =========================================================
   9. お問い合わせ
   ========================================================= */
.sema-contact{ padding:clamp(60px,8vw,104px) 0; background:var(--sema-paper); border-top:1px solid var(--sema-line); }
.sema-contact-inner{ max-width:760px; margin-inline:auto; }
.sema-contact-rule{ display:block; width:48px; height:1px; background:var(--sema-bronze); margin:0 0 2em; }
.sema-contact .sema-heading{ text-align:left; }
.sema-contact .sema-body{ color:var(--sema-ink-soft); max-width:40em; margin:0 0 1.8em; }
.sema-contact .sema-btn-primary{ background:var(--sema-sage-deep); color:#fff; }
.sema-contact .sema-btn-primary:hover{ background:var(--sema-sage); }

/* =========================================================
   レスポンシブ（PC）
   ========================================================= */
@media (min-width:768px){
  .sema-fv-inner{ grid-template-columns:1.42fr .8fr; gap:60px; }
  .sema-fv-deco{ display:block; }

  .sema-split{ grid-template-columns:.82fr 1.18fr; gap:76px; align-items:start; }
  .sema-split-lead{ padding-top:12px; }
  .sema-split-body{ padding-top:44px; }

  .sema-guide-list{ grid-template-columns:repeat(3,1fr); }
  /* 3導線は対等：左右paddingを揃え、区切り線は2・3の左罫線のみ、下線は消す */
  .sema-guide-item{ flex-direction:column; gap:16px; border-top:none; border-bottom:none; padding:8px 30px; }
  /* PCは縦積みなので、画像はDOMの順（番号のすぐ下）に戻す。 */
  .sema-guide-img{ order:0; flex:none; margin-bottom:0; }
  .sema-guide-item:last-child{ border-bottom:none; }
  .sema-guide-item + .sema-guide-item{ border-left:1px solid var(--sema-line-2); }
  .sema-guide-item:first-child .sema-guide-num{ color:var(--sema-sage); }

  /* 新着コラム：左に最新1件（大）＋右に以降4件（小）を縦積み。
     右の上3件が左のアイキャッチ画像の高さに収まり、4件目がその下に同じ間隔で続く。
     行数を詰めるため、右カードは日付をカテゴリーの右に並べる（2行組み）。 */
  .sema-articles{ grid-template-columns:1.25fr 1fr; column-gap:52px; row-gap:14px; align-items:start; }
  /* 左は右4件ぶんの行をまたぐ。行を明示しないと -1 が解決できないので span で指定する。 */
  .sema-article:nth-child(1){ grid-column:1; grid-row:1 / span 4; }
  .sema-article:nth-child(1) .sema-thumb{ aspect-ratio:4/3; }
  .sema-article:nth-child(1) .sema-article-title{ font-size:1.5rem; line-height:1.55; }
  /* 記事が1件だけのときの大カードは控えめに（画像を約2/3・タイトルを少し小さく）。 */
  .sema-article:only-child .sema-article-link{ max-width:360px; }
  .sema-article:only-child .sema-article-title{ font-size:1.25rem; line-height:1.6; }

  .sema-article:nth-child(n+2){ grid-column:2; }
  .sema-article:nth-child(n+2) .sema-article-link{
    display:grid;
    grid-template-columns:clamp(100px,8.6vw,128px) minmax(0,1fr) auto;
    grid-template-areas:
      "thumb cat  date"
      "thumb ttl  ttl";
    column-gap:14px;
    align-items:start;
  }
  .sema-article:nth-child(n+2) .sema-thumb{ grid-area:thumb; aspect-ratio:4/3; margin:0; align-self:center; }
  .sema-article:nth-child(n+2) .sema-thumb::before{ inset:8px; }
  .sema-article:nth-child(n+2) .sema-article-cat{ grid-area:cat; margin-bottom:.45em; }
  .sema-article:nth-child(n+2) .sema-article-date{
    grid-area:date; border-top:none; padding-top:0;
    font-size:.72rem; justify-self:end; white-space:nowrap;
  }
  .sema-article:nth-child(n+2) .sema-article-title{
    grid-area:ttl; font-size:.96rem; line-height:1.45; margin-bottom:0; letter-spacing:.03em;
  }
  .sema-article:nth-child(n+2) .sema-article-title .sema-title__sub{ font-size:.74em; line-height:1.45; margin-top:.3em; }
  /* 区切り線は最後の1件を除いて引く（4件目の下には線を出さない）。 */
  .sema-article:nth-child(n+2):not(:last-child){ padding-bottom:11px; border-bottom:1px solid var(--sema-line); }

  /* 2026-08-02：2列化は .sema-cat-cols 側で行う（左右で別リストにしたため）。
     ここでリストを2列に流すと、また行の高さが揃って左右が引きずり合う。 */

  /* 運営店舗の3列化は min-width:820px 以降へ（下の専用ブロック）。
     カード最小幅≈256px（.sema-btn-store 約208px＋item左右padding 48px）×3列＝768px は、
     768〜819px ではコンテナ幅（.sema-container の左右padding 分だけ狭い）に収まらず右へはみ出すため、
     3列が確実に収まる 820px 以上でのみ3列にする（768〜819px は base の1列積み重ね＝カードは切れない）。 */

  .sema-company-inner{ grid-template-columns:1.5fr .8fr; align-items:center; gap:56px; }
  .sema-company-side{ display:flex; align-items:center; justify-content:flex-end; gap:26px; }
  .sema-company-rule{ width:1px; height:132px; background:rgba(203,171,122,.42); }
  .sema-company-mark{ font-family:var(--sema-serif); font-weight:900; font-size:3.2rem; letter-spacing:.12em; color:rgba(242,236,224,.16); }
}

/* =========================================================
   運営店舗：3列は 820px 以上でのみ（768〜819px では base の1列積み重ね）。
   3枚のカード（各最小≈256px）が横に並ぶには実測で 820px 以上の viewport が必要。
   ここより下の幅では列数を無理に3にせず縦積みにして横はみ出しを防ぐ。
   ========================================================= */
@media (min-width:820px){
  .sema-store-grid{ grid-template-columns:repeat(3,1fr); }
  .sema-store-item:not(:first-child){ border-top:none; border-left:1px solid var(--sema-line); }
}

/* =========================================================
   レスポンシブ（スマホ：装飾は残し、余白は圧縮）
   ========================================================= */
@media (max-width:767px){
  .sema-about,.sema-guides,.sema-news{ padding:44px 0; }
  .sema-categories,.sema-stores,.sema-faq{ padding:40px 0; }
  .sema-company{ padding:56px 0; }
  .sema-contact{ padding:50px 0; }

  /* ミニFAQ回答パネルの上余白（スマホ）：質問枠と回答文の間に呼吸を確保 */
  .sema-faq-answer{ padding-top:16px; }

  /* スマホFV：装飾面を残し、見出し→サブ→装飾面→CTA の順に組み替え */
  .sema-fv-inner{ display:flex; flex-direction:column; gap:0; padding-top:64px; padding-bottom:56px; }
  .sema-fv-main{ display:contents; }
  .sema-fv-eyebrow{ order:1; margin-bottom:1.6em; }
  /* 見出しを6文字＋3文字に詰めたので、スマホでは従来より大きく出せる（1行6文字が入る範囲で最大化）。 */
  .sema-fv-heading{ order:2; margin-bottom:.6em; letter-spacing:.06em; font-size:clamp(2.2rem, 11vw, 3.2rem); }
  .sema-fv-sub{ order:3; margin-bottom:2em; }
  .sema-fv-deco{ order:4; display:block; position:relative; min-height:0; height:212px; width:100%; margin:0 0 2.2em; }
  .sema-fv-cta{ order:5; flex-direction:column; align-items:stretch; }
  /* ★2026-08-10：order を持たないとFVの先頭へ回るので、CTAの次に明示する。 */
  .sema-fv-updated{ order:6; margin:1.6em 0 0; }
  .sema-fv-cta .sema-btn{ width:100%; }

  .sema-fv-deco-plate{ top:16px; left:16px; right:0; bottom:0; }
  .sema-fv-deco-frame{ inset:0 16px 16px 0; }
  .sema-fv-deco-vline{ display:none; }
  .sema-fv-deco-hline{ display:none; }
  .sema-fv-deco-index{ left:30px; top:30px; gap:15px; }
  .sema-fv-deco-index li{ font-size:1.06rem; letter-spacing:.3em; gap:14px; }
  .sema-fv-deco-index i{ font-size:.62rem; }
  .sema-fv-deco-mark{ right:22px; bottom:8px; font-size:2.9rem; }

  .sema-head-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .sema-hide-sp-inline{ display:none; }
  .sema-show-sp{ display:inline-flex; margin-top:22px; }

  .sema-cat-link{ grid-template-columns:auto 1fr; }
  .sema-cat-go{ grid-column:2; grid-row:auto; margin-top:.5em; }
  .sema-cat-name,.sema-cat-desc{ grid-column:2; }
  /* スマホは1列。左の空けぶんも詰める（counterが小さくなるため）。 */
  .sema-cat-posts{ grid-template-columns:1fr; padding-left:calc(8px + 2.2em); }
  .sema-cat-more{ padding-left:calc(8px + 2.2em); }

  .sema-company-body{ max-width:none; }
  .sema-company .sema-heading{ font-size:clamp(1.3rem, 4.2vw, 1.7rem); }
  .sema-company-side{ display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-top:30px; }
  .sema-company-rule{ width:44px; height:1px; background:rgba(203,171,122,.42); }
  .sema-company-mark{ font-family:var(--sema-serif); font-weight:900; font-size:2.2rem; letter-spacing:.12em; color:rgba(242,236,224,.2); line-height:1; }

  /* スマホ新着コラム：画像を左1/3・テキスト右2/3の横並び、縦を圧縮 */
  .sema-articles{ gap:18px; }
  .sema-article-link{ display:grid; grid-template-columns:1fr 2fr; column-gap:14px; align-items:center; }
  .sema-thumb{ grid-column:1; grid-row:1 / span 3; aspect-ratio:4/3; margin:0; }
  .sema-thumb::before{ inset:8px; }
  .sema-article-cat{ grid-column:2; margin-bottom:.4em; }
  .sema-article-title{ grid-column:2; font-size:1.02rem; line-height:1.55; margin-bottom:.35em; }
  .sema-article-date{ grid-column:2; border-top:none; padding-top:0; }
  .sema-article:first-child .sema-thumb{ aspect-ratio:4/3; }
  .sema-article:first-child .sema-article-title{ font-size:1.02rem; line-height:1.55; }

  .sema-contact .sema-heading{ text-align:left; }
}