/* =========================================================
   sema-theme base.css（共通：全ページ）
   静的プレビュー preview/top-design-v1/styles.css を sema- プレフィックスで移植。
   変数・リセット・書体・ボタン・ヘッダー・フッター・共通レスポンシブ。
   デザイン基準：preview/top-design-v1/design-spec.md
   ========================================================= */

:root{
  --sema-bg:            #fbfaf5;
  --sema-surface:       #ffffff;
  --sema-ivory:         #f2ece0;
  --sema-paper:         #f6f1e8;
  --sema-greige:        #e9e2d4;

  --sema-line:          rgba(34,31,24,.10);
  --sema-line-2:        rgba(34,31,24,.16);
  --sema-line-strong:   rgba(34,31,24,.26);

  --sema-ink:           #201e17;
  --sema-ink-soft:      #544d3f;
  --sema-ink-mute:      #938a78;

  --sema-sage:          #2f4a43;
  --sema-sage-deep:     #1f322c;
  --sema-sage-weak:     #dde5df;
  --sema-bronze:        #a37e49;
  --sema-bronze-soft:   #cbab7a;

  --sema-focus:         #a37e49;
  --sema-ease:          cubic-bezier(.22,.61,.36,1);

  --sema-maxw: 1160px;
  --sema-pad: clamp(22px, 5.5vw, 72px);
  --sema-header-h: 68px;

  --sema-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sema-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--sema-header-h) + 20px); }

body.sema-theme{
  margin:0;
  font-family:var(--sema-serif);
  font-weight:500;
  color:var(--sema-ink);
  background:var(--sema-bg);
  line-height:2;
  letter-spacing:.035em;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-size-adjust:100%;
}
.sema-theme img{ max-width:100%; height:auto; }
/* リンク色のリセットは詳細度を低く保つ（ボタン等の color 指定を上書きしないため） */
a{ color:inherit; }

/* ゴシックにする補助・操作系 */
.sema-nav-link,.sema-nav-contact,.sema-drop-link,.sema-nav-toggle,
.sema-btn,.sema-link-arrow,.sema-cat-go,
.sema-article-cat,.sema-article-date,.sema-thumb-label,
.sema-ext,.sema-footer-col a,.sema-footer-copy,
.sema-guide-num,.sema-store-num,.sema-fv-deco-index i,
.sema-points li::before,.sema-cat-link::before,.sema-faq-link::before,
.sema-post-list__date,.sema-entry-meta{
  font-family:var(--sema-sans);
}

.sema-theme :focus-visible{ outline:2px solid var(--sema-focus); outline-offset:3px; border-radius:2px; }

/* スキップリンク */
.sema-skip-link{
  position:fixed; top:-60px; left:14px; z-index:1000;
  background:var(--sema-ink); color:#fff; padding:11px 18px; border-radius:6px;
  text-decoration:none; font-family:var(--sema-sans); transition:top .18s var(--sema-ease);
}
.sema-skip-link:focus{ top:14px; }

.sema-container{ width:100%; max-width:var(--sema-maxw); margin-inline:auto; padding-inline:var(--sema-pad); }

/* ===== 見出し・本文（明朝主軸） ===== */
.sema-heading{
  font-family:var(--sema-serif); font-weight:600;
  font-size:clamp(1.62rem, 3.6vw, 2.35rem);
  line-height:1.46; letter-spacing:.08em; margin:0 0 .8em; color:var(--sema-ink);
  text-wrap:balance;
}
.sema-body{ color:var(--sema-ink-soft); margin:0 0 1.6em; font-weight:500; max-width:38em; }

/* ===== ボタン ===== */
.sema-btn{
  --sema-btn-py:1em; --sema-btn-px:1.9em;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-weight:500; font-size:.92rem; line-height:1.2; letter-spacing:.08em;
  padding:var(--sema-btn-py) var(--sema-btn-px); border-radius:1px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:background .25s var(--sema-ease), color .25s var(--sema-ease), border-color .25s var(--sema-ease), transform .25s var(--sema-ease), box-shadow .25s var(--sema-ease);
}
.sema-btn-primary{ background:var(--sema-sage-deep); color:#fff; }
.sema-btn-primary:hover{ background:var(--sema-sage); transform:translateY(-2px); box-shadow:0 14px 26px rgba(31,50,44,.22); }
.sema-btn-outline{ background:transparent; color:var(--sema-sage-deep); border-color:var(--sema-line-strong); }
.sema-btn-outline:hover{ border-color:var(--sema-sage); background:rgba(47,74,67,.05); }
.sema-btn-text{ background:transparent; color:var(--sema-sage-deep); padding-inline:.3em; letter-spacing:.06em; }
.sema-btn-text:hover{ color:var(--sema-bronze); }
.sema-btn-lg{ font-size:1rem; --sema-btn-py:1.15em; --sema-btn-px:2.3em; }

.sema-arrow::after{ content:"→"; margin-left:.5em; transition:margin .25s var(--sema-ease); display:inline-block; }
.sema-btn:hover .sema-arrow::after{ margin-left:.8em; }
.sema-link-arrow{ display:inline-flex; align-items:center; color:var(--sema-sage-deep); text-decoration:none; font-weight:500; font-size:.9rem; letter-spacing:.06em; }
.sema-link-arrow:hover{ color:var(--sema-bronze); }
.sema-link-arrow:hover .sema-arrow::after{ margin-left:.85em; }

/* =========================================================
   ヘッダー
   ========================================================= */
.sema-header{ position:sticky; top:0; z-index:100; background:rgba(251,250,245,.82); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--sema-line); }
.sema-header-inner{ max-width:var(--sema-maxw); margin-inline:auto; padding-inline:var(--sema-pad); min-height:var(--sema-header-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sema-logo{ font-family:var(--sema-serif); font-weight:700; font-size:1.55rem; letter-spacing:.2em; text-decoration:none; color:var(--sema-ink); line-height:1; padding:6px 2px; position:relative; }
.sema-logo[aria-current="page"]::after{ content:""; position:absolute; left:2px; width:20px; bottom:0; height:1.5px; background:var(--sema-bronze); }
.sema-nav{ display:flex; align-items:center; gap:30px; }
.sema-nav-list{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.sema-nav-link{ position:relative; font-size:.88rem; letter-spacing:.06em; color:var(--sema-ink); text-decoration:none; background:none; border:none; cursor:pointer; padding:8px 1px; display:inline-flex; align-items:center; gap:.2em; }
.sema-nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--sema-bronze); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--sema-ease); }
.sema-nav-link:hover{ color:var(--sema-sage-deep); }
.sema-nav-link:hover::after{ transform:scaleX(1); }
.sema-nav-contact{ font-size:.82rem; letter-spacing:.08em; text-decoration:none; color:var(--sema-sage-deep); border:1px solid var(--sema-line-strong); border-radius:1px; padding:.6em 1.25em; transition:.25s var(--sema-ease); }
.sema-nav-contact:hover{ border-color:var(--sema-sage); background:rgba(47,74,67,.05); }
.sema-nav-has-menu{ position:relative; }
.sema-caret{ width:.46em; height:.46em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); display:inline-block; margin-left:.3em; transition:transform .2s var(--sema-ease); }
.sema-nav-menu-btn[aria-expanded="true"] .sema-caret{ transform:rotate(225deg) translateY(2px); }
.sema-dropdown{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px); min-width:250px; background:var(--sema-surface); border:1px solid var(--sema-line-2); border-radius:2px; box-shadow:0 20px 44px rgba(32,30,23,.14); list-style:none; margin:0; padding:10px; opacity:0; visibility:hidden; transition:opacity .22s var(--sema-ease), transform .22s var(--sema-ease), visibility .22s; }
.sema-dropdown.is-open{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.sema-dropdown::before{ content:""; position:absolute; top:0; left:14px; right:14px; height:1px; background:var(--sema-bronze); }
.sema-drop-link{ display:block; padding:.7em .9em; text-decoration:none; color:var(--sema-ink); font-size:.86rem; letter-spacing:.04em; border-radius:2px; transition:.2s var(--sema-ease); }
.sema-drop-link:hover{ background:var(--sema-paper); color:var(--sema-sage-deep); padding-left:1.15em; }
.sema-nav-toggle{ display:none; }
.sema-nav-backdrop{ position:fixed; inset:0; background:rgba(24,22,17,.42); z-index:90; border:0; }

/* 管理バー表示時のsticky補正 */
.admin-bar .sema-header{ top:32px; }

/* =========================================================
   汎用ページ（固定ページ・一覧・404 等）
   ========================================================= */
.sema-page{ padding-block:clamp(56px,8vw,104px); }
.sema-entry-content > :first-child{ margin-top:0; }
.sema-entry-meta{ font-size:.8rem; color:var(--sema-ink-mute); letter-spacing:.1em; margin:0 0 1.6em; }
.sema-post-list{ list-style:none; margin:1.6em 0 0; padding:0; border-top:1px solid var(--sema-line-2); }
.sema-post-list__item{ border-bottom:1px solid var(--sema-line-2); }
.sema-post-list__link{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:18px 4px; text-decoration:none; color:var(--sema-ink); }
.sema-post-list__title{ font-family:var(--sema-serif); font-size:1.05rem; }
.sema-post-list__link:hover .sema-post-list__title{ color:var(--sema-sage); }
.sema-post-list__date{ font-size:.78rem; color:var(--sema-ink-mute); letter-spacing:.1em; white-space:nowrap; }

/* =========================================================
   フッター
   ========================================================= */
.sema-footer{ background:var(--sema-ink); color:#d7d0c3; padding:clamp(60px,7vw,88px) 0 36px; }
.sema-footer-groups{ display:grid; grid-template-columns:1fr 1fr; gap:36px 24px; }
.sema-footer-heading{ font-family:var(--sema-serif); font-size:1rem; font-weight:600; color:#fff; margin:0 0 1.2em; letter-spacing:.14em; }
.sema-footer-col ul{ list-style:none; margin:0; padding:0; }
.sema-footer-col li{ margin-bottom:.8em; }
.sema-footer-col a{ color:#c1baab; text-decoration:none; font-size:.85rem; letter-spacing:.04em; transition:color .2s var(--sema-ease); }
.sema-footer-col a:hover{ color:#fff; }
.sema-footer-col .sema-ext{ color:#8b8474; font-size:.68rem; margin-left:.3em; }
.sema-footer-about{ margin-top:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12); }
.sema-footer-brand{ font-family:var(--sema-serif); font-size:1.3rem; color:#fff; margin:0 0 .8em; letter-spacing:.2em; }
.sema-footer-desc{ font-family:var(--sema-serif); font-size:.86rem; color:#a49b8c; max-width:46em; margin:0; line-height:2.05; font-weight:500; }
.sema-footer-copy{ margin:32px 0 0; font-size:.74rem; color:#847d6f; letter-spacing:.1em; }

/* =========================================================
   共通レスポンシブ（ヘッダー・フッター）
   ========================================================= */
@media (min-width:768px){
  .sema-footer-groups{ grid-template-columns:repeat(4,1fr); gap:48px; }
}

@media (max-width:767px){
  :root{ --sema-header-h:60px; }
  /* スマホ：ヘッダーの backdrop-filter を外す。これがあるとヘッダー内側の .sema-nav(position:fixed) の
     位置基準が「画面」ではなく「ヘッダー」になり、下へスクロールしてメニューを開くとメニューが画面外(上部)に
     出てしまう。blur を外す代わりにヘッダー背景を不透明にする（見た目は維持・スクロール中も中身が透けない）。 */
  .sema-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--sema-bg); }
  /* メニュー展開中はヘッダーを画面上部に固定する。スクロール固定(body overflow:hidden)で sticky が外れ、
     ヘッダー＝「メニューを閉じる」ボタンが画面外へ行ってしまうのを防ぐ（開いた直後から閉じるボタンが常に見える）。 */
  body.sema-nav-open .sema-header{ position:fixed; top:0; left:0; right:0; }
  /* スマホは基準（rem）を下げ、全体の文字をはっきり小さくする（PC版は不変） */
  html{ font-size:14px; }
  /* 本文は小さめ、見出し・タイトルはrem基準を維持 → メリハリを出す */
  body.sema-theme{ font-size:13px; line-height:1.9; }
  .sema-heading{ font-size:clamp(1.25rem, 4.4vw, 1.6rem); }

  .sema-nav-toggle{ display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; color:var(--sema-ink); padding:8px 4px; font-size:.8rem; letter-spacing:.06em; }
  .sema-nav-toggle-bars{ width:22px; height:14px; position:relative; display:inline-block; }
  .sema-nav-toggle-bars span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--sema-ink); transition:.2s var(--sema-ease); }
  .sema-nav-toggle-bars span:nth-child(1){ top:0; }
  .sema-nav-toggle-bars span:nth-child(2){ top:6px; }
  .sema-nav-toggle-bars span:nth-child(3){ top:12px; }
  .sema-nav-toggle[aria-expanded="true"] .sema-nav-toggle-bars span:nth-child(1){ top:6px; transform:rotate(45deg); }
  .sema-nav-toggle[aria-expanded="true"] .sema-nav-toggle-bars span:nth-child(2){ opacity:0; }
  .sema-nav-toggle[aria-expanded="true"] .sema-nav-toggle-bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }

  .sema-nav{ position:fixed; top:var(--sema-header-h); right:0; z-index:95; width:min(86vw,350px); height:calc(100dvh - var(--sema-header-h)); background:var(--sema-surface); border-left:1px solid var(--sema-line); flex-direction:column; align-items:stretch; gap:0; padding:8px 0 44px; overflow-y:auto; transform:translateX(100%); transition:transform .26s var(--sema-ease); }
  .sema-nav.is-open{ transform:translateX(0); box-shadow:-16px 0 40px rgba(24,22,17,.14); }
  .sema-nav-list{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .sema-nav-list > li{ border-bottom:1px solid var(--sema-line); }
  .sema-nav-link{ width:100%; justify-content:space-between; padding:16px var(--sema-pad); font-size:1rem; }
  .sema-nav-link::after{ display:none; }
  .sema-nav-menu-btn{ width:100%; }
  .sema-dropdown{ position:static; transform:none; box-shadow:none; border:none; border-radius:0; min-width:0; padding:0 0 10px; background:var(--sema-paper); opacity:1; visibility:visible; }
  .sema-dropdown:not(.is-open){ display:none; }
  .sema-dropdown::before{ display:none; }
  .sema-drop-link{ padding:12px var(--sema-pad) 12px calc(var(--sema-pad) + 16px); font-size:.94rem; }
  .sema-drop-link:hover{ padding-left:calc(var(--sema-pad) + 16px); }
  .sema-nav-contact{ margin:16px var(--sema-pad) 0; text-align:center; padding:14px; }
  .sema-caret{ transform:rotate(45deg); }
  .sema-nav-menu-btn[aria-expanded="true"] .sema-caret{ transform:rotate(-135deg); }

  .admin-bar .sema-header{ top:0; }
  .admin-bar .sema-nav{ top:calc(var(--sema-header-h) + 46px); height:calc(100dvh - var(--sema-header-h) - 46px); }

  .sema-footer-groups{ grid-template-columns:1fr; gap:30px; }
}

/* 管理バー（幅782px以下は46px高） */
@media screen and (max-width:782px){
  .admin-bar .sema-header{ top:0; }
}

@media (prefers-reduced-motion:reduce){
  .sema-theme *{ transition:none !important; scroll-behavior:auto !important; }
}

/* =========================================================
   日本語の折り返し（全ページ共通の土台）
   ★2026-08-24 追加。PCで「確認ポ／イント」「カテ／ゴリー」「運営してい／ます」のように
   語の途中で折れていた。原因は word-break:keep-all（韓国語向け）を日本語に当てていたこと。
   keep-all だと日本語は句読点まで1語とみなされ、行に収まらず overflow-wrap:anywhere が
   働いて「どこででも折れる」状態になっていた。
   ・word-break:auto-phrase … 文節単位で折る（Blink系。記事タイトルで実績あり）
   ・line-break:strict ……… 禁則を厳密に（行頭の句読点・小書き仮名・長音を防ぐ）
   どちらも継承するプロパティなので body に置けば全体に効く。
   非対応ブラウザ（Safari/Firefox）は既定の折り返しに戻るだけで、崩れない。
   ========================================================= */
.sema-theme{
  word-break:auto-phrase;
  line-break:strict;
}

/* =========================================================
   記事タイトルの「メイン｜サブ」表示（sema_title_markup）
   メイン・サブとも折り返し可。長さで制限せず「折り返しの質」で整える。
   ・word-break:auto-phrase … 文節単位で改行（日本語向け・Blink系が対応）
   ・text-wrap:balance ……… 各行の長さを均し、最終行だけ極端に短くなるのを防ぐ
   ・line-break:strict ……… 禁則処理を厳密に（行頭の句読点・小書き仮名を防ぐ）
   非対応ブラウザ（Safari/Firefox）でも balance と禁則は効き、従来より崩れない。
   font-size は em 指定なので h1/h2/h3/span いずれでも親に追従する。
   ========================================================= */
.sema-title__main,
.sema-title__sub{
  display:block;
  word-break:auto-phrase;
  line-break:strict;
  text-wrap:balance;
  overflow-wrap:break-word; /* 長いURL等がはみ出す場合のみ折る安全網 */
}
.sema-title__sub{
  font-size:.62em;
  line-height:1.7;
  letter-spacing:.03em;
  font-weight:600;
  color:var(--sema-ink-soft);
  margin-top:.55em;
  /* 項目間の区切りは中黒ではなく余白。行末では描画されず取り残しが起きない。 */
  word-spacing:.7em;
}
/* サブタイトルの各項目：区切り位置でのみ折り返し、項目の途中では折らない。
   keep-all で項目内の改行を禁止しつつ、anywhere により
   「1項目が表示幅を超える場合だけ」はみ出さないよう折り返しを許可する。 */
.sema-title__seg{
  word-break:keep-all;
  overflow-wrap:anywhere;
}
/* 一覧カードは表示領域が狭いため、さらに控えめにする */
.sema-col-article__title .sema-title__sub,
.sema-cat-article__title .sema-title__sub,
.sema-article-title .sema-title__sub{
  font-size:.78em;
  line-height:1.6;
  margin-top:.4em;
  font-weight:500;
}