/* =========================================================================
   てまらく サイト（土台）のスタイル
   デザイン正本: モックv6.1（お助けサイト\デザインモック_v5_2026-07-18.html）
   ※トークンは /css/tokens.css、下地（和紙・青海波）は /css/base.css が持つ
   ※文言はすべて仮置き。確定文言はレーンB製造後にPhase 6で差し替える
   ========================================================================= */

.wrap {
  width: min(1040px, calc(100% - 40px));
  margin-inline: auto;
}

/* ===== ヘッダー: べた塗りにせず、藍のキーライン＋白面＋浮き影で強調 ===== */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 3px solid var(--indigo);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(84, 60, 32, 0.06);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand .mark {
  color: var(--indigo);
  display: inline-flex;
  align-self: center;
}

.brand .name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.brand .tag {
  font-size: 0.76rem;
  color: var(--ink-sub);
  letter-spacing: 0.08em;
}

nav.global ul {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}

nav.global a {
  color: var(--ink-sub);
}

nav.global a:hover {
  color: var(--indigo);
}

/* ===== ヒーロー: サイトの約束を「二重の框」で強調（外=金・内=藍） ===== */
/* デザイン正本（モックv6.1）は、框を780pxに絞って中央にそろえる作りだった。
   実装では枠が幅いっぱい・中身が左寄せになっており、右側に大きな空きができていた
   （2026-08-06 M1-4）。正本の作りへ戻す */
.hero {
  padding: 56px 0 44px;
  text-align: center;
}

.hero-frame {
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid var(--gold-soft);
  padding: 8px;
  background: var(--band);
}

.hero-frame > * {
  position: relative;
}

.hero-frame {
  position: relative;
}

.hero-frame::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(60, 85, 120, 0.35);
  pointer-events: none;
}

.hero-inner {
  padding: 40px 34px 34px;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 0 0 16px;
}

.hero h1 .accent {
  color: var(--indigo);
  border-bottom: 3px solid var(--gold-soft);
  padding-bottom: 2px;
}

.hero .lead {
  color: var(--ink-sub);
  /* 詰まって読みにくいというご指摘への手当て（2026-08-13 M3-f）。
     段落分けとあわせて、行間と段落のあいだを広げる */
  line-height: 2.05;
  /* 正本どおり、読みやすい幅に収めて中央にそろえる（2026-08-06 M1-4）。
     左寄せのままだと、框の右側だけが大きく空いて見えていた */
  margin: 0 auto 24px;
  max-width: 34em;
  font-size: 0.98rem;
  text-align: left;
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  /* 框の中でボタンを中央にそろえる（正本の作り。2026-08-06 M1-4） */
  justify-content: center;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-primary {
  background: var(--indigo);
  color: #fff;
}

.btn-primary:hover {
  background: var(--indigo-deep);
  color: #fff;
  text-decoration: none;
}

/* 枠が地の色に近く、押せる場所だと気づかれにくかった（2026-08-06 M1-6）。
   藍の細線と、わずかに藍を含んだ面にして、輪郭を出す */
.btn-quiet {
  border: 1px solid var(--indigo);
  background: rgba(255, 255, 255, 0.86);
  color: var(--indigo-deep);
}

.btn-quiet:hover {
  border-color: var(--indigo);
  color: var(--indigo);
  text-decoration: none;
}

/* ===== セクション: 紙⇄白帯の交互配色 ===== */
.block {
  padding: 54px 0;
}

.block.band-alt {
  background: var(--band);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* 見出し: 丸アイコン＋肩罫線（端に金の小角） */
.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.sec-head .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--indigo);
  flex: none;
}

.sec-head h2 {
  font-family: var(--serif);
  font-size: 1.32rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.sec-head .rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
}

.sec-head .rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
}

.sec-lead {
  color: var(--ink-sub);
  font-size: 0.92rem;
  margin: 0 0 26px;
  max-width: 46em;
}

/* ===== 道具棚: 統一カードグリッド（1枚でも20枚でも同じ形） ===== */
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tab {
  font-size: 0.82rem;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink-sub);
}

.tab[aria-current="true"] {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.shelf {
  display: grid;
  /* 1枚あたりの幅を広げて、文字の詰まりをほどく（2026-08-06 M1-6）。
     240pxだと横に4枚並び、説明文が細長い帯のように折り返されていた */
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 22px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 18px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

a.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.card .cat {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-sub);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 8px;
  align-self: flex-start;
  margin-bottom: 12px;
}

/* チップが2つ並ぶカード（カテゴリ＋作者）。折り返しても行が詰まらないようにする */
.card .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.card .chips .cat {
  margin-bottom: 0;
}

/* 作者チップ＝金の細線。カテゴリと見分けがつく程度にとどめる */
.card .cat-author {
  border-color: var(--gold-soft);
  color: var(--gold);
}

.card h3 {
  font-family: var(--serif);
  font-size: 1.06rem;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  color: var(--ink);
}

.card p {
  font-size: 0.85rem;
  color: var(--ink-sub);
  margin: 0 0 14px;
  flex: 1;
}

.card .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
}

.state {
  color: var(--ink-sub);
}

.state.live {
  color: var(--indigo);
  font-weight: 700;
}

/* カードの「つかってみる →」は、押せる先があることの合図。薄い補助文字と
   同じ濃さで沈んでいたため、文字を濃くして下線を添える（2026-08-06 M1-6）。
   ボタンにはしない＝カード全体が押せる作りを崩さないため */
.price {
  color: var(--indigo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold-soft);
}

.price b {
  color: var(--ink);
}

.card.soon {
  opacity: 0.72;
}

/* ===== よみもの ===== */
.reads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* カードはもともと全体がリンクだが、押せる場所に見えていなかった
   （2026-08-06 M1-7）。当てたときに面と枠が動くようにして、カードごと
   押せることが分かるようにする */
.read {
  display: block;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-soft);
  border-radius: 4px;
  padding: 16px 18px;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast),
              background-color var(--transition-fast), transform var(--transition-fast);
}

.read:hover {
  background: #fff;
  border-color: var(--indigo);
  border-left-color: var(--gold);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.read:hover h3 {
  color: var(--indigo-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.read:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.read span {
  font-size: 0.72rem;
  color: var(--ink-sub);
  letter-spacing: 0.06em;
}

.read h3 {
  font-size: 0.96rem;
  margin: 6px 0 0;
  line-height: 1.75;
  font-weight: 700;
}

/* ===== 約束 ===== */
.promise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.promise .item h3 {
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  padding-left: 13px;
  border-left: 3px solid var(--indigo);
}

.promise .item p {
  font-size: 0.87rem;
  color: var(--ink-sub);
  margin: 0;
}

/* ===== 販売バンド ===== */
.sale-band {
  text-align: center;
}

.sale-band h2 {
  font-family: var(--serif);
  font-size: 1.24rem;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

.sale-band p {
  color: var(--ink-sub);
  line-height: 2.05;   /* 2026-08-13 M3-f */
  font-size: 0.9rem;
  margin: 0 auto 18px;
  max-width: 40em;
}

/* ===== フッター ===== */
footer.site {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  padding: 34px 0 40px;
  margin-top: 10px;
}

footer.site .cols {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

footer.site a {
  color: var(--ink-sub);
}

footer.site a:hover {
  color: var(--indigo);
}

footer.site .note {
  text-align: center;   /* フォロー導線とそろえる（2026-08-11 M2-10） */
  width: 100%;
  border-top: 1px solid var(--line-soft);
  margin-top: 20px;
  padding-top: 16px;
  font-size: 0.76rem;
  color: var(--ink-sub);
}

/* ===== 道具棚の下の注記 ===== */
.shelf-note {
  margin: 20px 0 0;
  font-size: 0.8rem;
  color: var(--ink-sub);
}

/* ===== よみもの: 現在地の一文と「すべて見る」 ===== */
.reads-now {
  font-size: 0.9rem;
  color: var(--ink-sub);
  margin: 0 0 18px;
  max-width: 46em;
}

.more-row {
  margin-top: 20px;
}

.more-link {
  font-size: 0.9rem;
  color: var(--indigo);
}

/* ===== 約束: 本文が長い項目にも耐える組み ===== */
.promise .item p + p {
  margin-top: 10px;
}

/* ===== 販売バンド: 価格の行 ===== */
.sale-price {
  font-size: 0.86rem;
  color: var(--ink-sub);
  margin: 0 0 16px;
}

/* ===== フォロー導線（フッター・ツールページ下部の共通ブロック） ===== */
.follow {
  /* ツールページの同じブロック（.product-follow）と見え方をそろえる＝左ぞろえ
     （2026-08-13 M3-e。2026-08-11 M2-10で中央にしたものを、実物を見ての判断で戻す。
     このすぐ下のフッターの注記は、中央のまま残す＝2026-08-13 裁定） */
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  padding: 18px 20px;
}

.follow p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--ink-sub);
}

.follow p b {
  color: var(--ink);
}

.follow .btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* フォロー導線のボタン。ツール画面の［ホームに戻る］と同じ形にそろえる
   ＝枠を藍にして、中は白、文字は太字の濃い藍（2026-08-13 M3-e） */
.btn-sm {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.84rem;
  border: 1px solid var(--indigo);
  background: #fff;
  color: var(--indigo-deep);
  font-weight: 700;
}

.btn-sm:hover {
  border-color: var(--indigo);
  text-decoration: none;
}

/* =========================================================================
   固定ページ・記事の組版（プライバシー／about／ライセンス／窓口／よみもの）
   ========================================================================= */
.page-head {
  /* 下の余白を18→32へ（2026-08-30 指揮の追加）。本文の行間が1.95と広いので、
     18pxでは見出しと本文がくっついて見えていた */
  padding: 40px 0 32px;
}

/* 見出し・パンくずと本文の左端が、一本にそろっていなかった（2026-08-30 実測＝
   1440pxで パンくず・見出し=200px／本文=328px の128pxずれ）。
   本文（.prose）のあるページでは、パンくずと見出しも**本文と同じ柱**にそろえる。
   一覧のページ（よみもののトップ）は本文を持たないので、これまでどおり幅いっぱい。
   ※狭い画面では本文が幅いっぱいになるため、元から一本＝この指定の影響は出ない */
.wrap:has(.prose) > .crumbs,
.wrap:has(.prose) > .page-head {
  /* **em ではなく rem** を使う。em はその要素自身の字の大きさが基準なので、
     字の小さいパンくず（0.78rem）と見出しでは、同じ 37em でも幅が変わってしまう
     （2026-08-30 実測＝420／359／328 と三者三様にずれた）。
     本文は 37em × 1.02rem ＝ 37.74rem 相当なので、その値でそろえる */
  max-width: 37.74rem;
  margin-inline: auto;
}

.page-head h1 {
  font-family: var(--serif);
  /* 長い題名が4行になっても重く見えないよう、上限を1.9→1.7へ（2026-08-30 指揮の追加） */
  font-size: clamp(1.4rem, 2.8vw, 1.7rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin: 0;
}

.page-head .kicker {
  font-size: 0.78rem;
  color: var(--ink-sub);
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.crumbs {
  font-size: 0.78rem;
  color: var(--ink-sub);
  padding: 14px 0 0;
}

.crumbs a {
  color: var(--ink-sub);
}

/* 記事の本文は、1行が長く・文字が小さく・行間が詰まっていて読み進めにくかった
   （2026-08-06 M1-10の応急修正）。1行の長さを抑え、文字と行間を広げる。
   本格的な読み物としての作り直しは第2幕 */
.prose {
  /* max-width だけでは、入れ物（.wrap＝1040px）の左端に貼りつき、右に255pxの空白が残る
     （2026-08-30 実測。1900px・1440pxの窓で確認）。中央へ寄せる（720px以下では影響なし） */
  margin-inline: auto;
  max-width: 37em;
  padding-bottom: 48px;
  font-size: 1.02rem;
  line-height: 1.95;
}

.prose h2 {
  font-family: var(--serif);
  font-size: 1.16rem;
  letter-spacing: 0.08em;
  margin: 38px 0 12px;
  padding-left: 13px;
  border-left: 3px solid var(--indigo);
}

.prose h3 {
  font-size: 1.0rem;
  font-weight: 700;
  margin: 26px 0 8px;
}

.prose p {
  /* 段落の切れ目が分かるよう、行間より広い余白を空ける（2026-08-06 M1-10） */
  margin: 0 0 1.5em;
}

.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-left: 1.4em;
}

.prose li {
  margin-bottom: 6px;
}

.prose .lead-note {
  color: var(--ink-sub);
  font-size: 0.9rem;
}

.prose blockquote {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-left: 3px solid var(--gold-soft);
  background: rgba(255, 255, 255, 0.66);
  border-radius: 0 4px 4px 0;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.7);
}

.prose th,
.prose td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}

.prose th {
  background: rgba(60, 85, 120, 0.06);
  font-weight: 700;
}

.prose pre {
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px;
  font-size: 0.78rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 記事内のツール導線ボックス */
.tool-box {
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, 0.78);
  padding: 18px 20px;
  margin: 26px 0;
}

.tool-box p {
  margin: 0 0 12px;
  font-size: 0.9rem;
}

.tool-box .also {
  font-size: 0.86rem;
  color: var(--ink-sub);
  margin-top: 14px;
}

/* 記事の頭に出す情報 */
.article-meta {
  font-size: 0.8rem;
  color: var(--ink-sub);
  margin: 0 0 22px;
}

/* ===== 中継ページ（ストアへ送り出すだけの小さなページ） ===== */
.relay {
  max-width: 34em;
  margin: 0 auto;
  padding: 70px 0 90px;
  text-align: center;
}

.relay h1 {
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.8;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}

.relay p {
  color: var(--ink-sub);
  font-size: 0.92rem;
  margin: 0 0 22px;
}

@media (max-width: 720px) {
  nav.global { display: none; }
  .hero { padding: 34px 0 28px; }
  .hero-inner { padding: 26px 20px 24px; }
  header.site .wrap { padding: 12px 0; }
  .brand .tag { display: none; }
}

/* カテゴリタブはPhase 6で機能を付けるまで操作不可（見た目のみ） */
.tab[disabled] {
  cursor: default;
}

/* 販売バンドのCTAの下に置く、押し先の断り書き（2026-08-11 M2-9） */
.cta-note {
  margin: 12px 0 0;
  font-size: 0.76rem;
  color: var(--ink-sub);
}

/* 段落に分けた本文の、段落どうしの間（2026-08-13 M3-f） */
.hero .lead + .lead {
  margin-top: 14px;
}

.sale-band p + p {
  margin-top: 14px;
}