@charset "UTF-8";
/* =====================================================================
   tokusyu-base.css — 季節の特集ページ（futureshop フリーページ）共通の骨組み
   ---------------------------------------------------------------------
   ・お年賀／バレンタイン／ホワイトデー／母の日／父の日／お中元／敬老の日／お歳暮で共通に使う
   ・配色は書かない。色は各ページのCSS（例 oseibo2026.css）で変数として決める
   ・クラス名はすべて「tk-」で始める（fs_style／fs_theme／fs_original／special.css と重ならないように）
   ・スマホとPCで同じファイル。表示の切り替えはサイト全体と同じ 600px
   ・作成 2026-09-27（お歳暮2026で初めて使用）
   ・2026-09-28 オーナーのフィードバックで改訂：本文の文字を20px（標準16pxの1.25倍。シニアでも読める大きさ）に。
     ※サイトの html の文字の大きさは10pxのため「1.25rem」と書くと12.5pxになる。px で指定する
   ・2026-10-08 オーナーのフィードバック（v2への評価）で改訂：本文の文字が大きいため 20px→17px に。
     PCの本文（各節の説明文・レビュー・のし・よくある質問）の横幅を880pxにそろえた（説明文720pxとレビュー1040pxの中間）。
     レビューは顔の絵を枠の中へ入れ、枠を薄い黄色の塗りに（スマホは1行目に顔＋星、2行目に本文）
   ・2026-10-18 オーナーの評価（v4）で改訂：スマホの本文を17px→16px・行間1.8→1.65に。3つのポイントの見出しをスマホで大きく、
     丸の上の言葉を丸の中と同じ太字に。横並びの商品カードは商品名の行数が違っても星から下の位置がそろうように。
     PCの商品カードは公開中のお歳暮ページ（/f/oseibo）と同じ1枚238px・間30pxに。
     〔2026-10-19 v5.2〕2列の節だけ、お中元ページ（/f/ochugen）と同じ1枚400px・間80pxに改訂（238pxは狭すぎるとの評価）。
     「送料込み」の札を赤い枠線から淡い赤の背景色に。小さいスマホ（380px未満）で星の欄を2行分の高さに
     お客様の声を敬老の日ページ（/f/keirou）の「お客様からのご感想」と同じ並びに（.tk-fb）。大口のご注文の流れ（.tk-flow）を追加
   ===================================================================== */

/* ---------- 配色の既定値（各ページのCSSで上書きする） ---------- */
.tk-page {
  --tk-bg: #f4f1ea;          /* ページの地の色 */
  --tk-paper: #ffffff;       /* 中身の地の色 */
  --tk-soft: #f7f3ea;        /* 読み物・案内の地の色 */
  --tk-main: #333333;        /* 見出しの線・ボタン */
  --tk-main-text: #ffffff;   /* ボタンの文字 */
  --tk-sub: #8a6d3b;         /* 札・順位など */
  --tk-price: #dc143c;       /* 「送料込み」 */
  --tk-text: #333333;
  --tk-line: #dddddd;
  --tk-radius: 6px;
  --tk-body: 17px;           /* 本文の文字（2026-10-08 20px→17px。「文字が大きい」とのフィードバック） */
  --tk-text-w: 880px;        /* PCの本文の横幅（2026-10-08） */
  --tk-rv-bg: #fff8d9;       /* レビューの枠の塗り（薄い黄色） */
}

/* ---------- 全体 ---------- */
.tk-page {
  display: block;
  background: var(--tk-bg);
  color: var(--tk-text);
  font-size: var(--tk-body);
  line-height: 1.8;
  padding: 0;
  margin: 0;
}
.tk-page *,
.tk-page *::before,
.tk-page *::after { box-sizing: border-box; }
.tk-page img { max-width: 100%; height: auto; vertical-align: bottom; }
.tk-page a { color: inherit; }
.tk-page p { margin: 0 0 1em; }
.tk-inner {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--tk-paper);
}
.tk-blk { padding: 32px 16px; }
.tk-blk + .tk-blk { padding-top: 8px; }
.tk-blk.is-soft { background: var(--tk-soft); padding-top: 32px; }
/* 節（商品のグループなど）同士の間は広く空ける */
section.tk-blk + section.tk-blk:not(.is-soft) { padding-top: 56px; }
.tk-blk.is-soft { margin-top: 40px; }
[id^="tk-"] { scroll-margin-top: 70px; } /* ページ内リンクで固定ヘッダーに隠れないように */

/* スマホだけ／PCだけ */
@media screen and (min-width: 600px) { .tk-sp { display: none !important; } }
@media screen and (max-width: 599px) { .tk-pc { display: none !important; } }

/* スマホの本文：少し小さく、行間を少し狭く（2026-10-18） */
@media screen and (max-width: 599px) {
  .tk-page { --tk-body: 16px; line-height: 1.65; }
  .tk-page .tk-rv-text { line-height: 1.65; }
  /* 2026-10-22（v5.7）選ばれる理由・お客様の声・大口注文の「当店では〜」の本文を、やや小さく・行間を狭く（オーナー指示） */
  .tk-page .tk-reason p,
  .tk-page #tk-voice .tk-fb-body p,
  .tk-page .tk-corp > p:not(.tk-corp-ttl):not(.tk-flow-ttl) { font-size: 15px; line-height: 1.5; }
}

/* ---------- レイアウト側のページ見出しを隠す ----------
   管理画面の［ページ見出し］欄から出る h1.title01 は、これまで special.css で隠していた。
   special.css を読まなくなるため、同じ指定をここに持つ。見える題名は本文の div.tk-h1（h1タグは使わない。2026-10-22 オーナー指示） */
h1.title01 { display: none; }

/* ---------- 見出し ---------- */
.tk-h1-wrap { padding-top: 16px; padding-bottom: 0; }
.tk-h1 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--tk-main);
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
@media screen and (min-width: 600px) { .tk-h1 { font-size: 28px; } .tk-h1-wrap { padding-top: 24px; } }
.tk-h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border: none;
  border-bottom: 2px solid var(--tk-main);
  background: none;
}
.tk-h2::before, .tk-h2::after { content: none; }
.tk-h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 28px 0 8px;
  padding: 0 0 0 10px;
  border-left: 4px solid var(--tk-main);
  background: none;
}
.tk-lead { font-size: var(--tk-body); margin: 0 0 20px; }
.tk-note { font-size: 15px; color: #666; }
/* PCの本文の横幅をそろえる（2026-10-08 各節の説明文・レビュー・のし・よくある質問を同じ880pxに） */
@media screen and (min-width: 600px) {
  .tk-page .tk-lead,
  .tk-page .tk-rv,
  .tk-page .tk-qa,
  .tk-page .tk-guide > p,
  .tk-page .tk-guide > .tk-h3 { max-width: var(--tk-text-w); margin-left: auto; margin-right: auto; }
}

/* ---------- ボタン ---------- */
.tk-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--tk-main);
  border-radius: var(--tk-radius);
  background: var(--tk-paper);
  color: var(--tk-main) !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
}
.tk-btn.is-fill { background: var(--tk-main); color: var(--tk-main-text) !important; }
.tk-btn:hover { opacity: .8; }
.tk-btn.is-wide { max-width: 320px; margin: 0 auto; }

/* ボタンを並べる（スマホ3列・PCは列数を指定） */
.tk-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.tk-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.tk-grid .tk-btn { min-height: 56px; }
/* スマホ：目次（6つ）と「商品で選ぶ」（5つ）は2列にして、ボタンの言葉が途中で折り返さないように */
@media screen and (max-width: 599px) {
  .tk-grid.pc-5,
  .tk-grid.pc-6 { grid-template-columns: repeat(2, 1fr); }
  .tk-grid.pc-5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media screen and (min-width: 600px) {
  .tk-grid.pc-5 { grid-template-columns: repeat(5, 1fr); }
  .tk-grid.pc-6 { grid-template-columns: repeat(6, 1fr); }
  .tk-grid { gap: 12px; }
  .tk-grid .tk-btn { font-size: 19px; min-height: 64px; }
}
/* ご予算のボタン：数字を大きく。PCは1行 */
.tk-grid.is-budget .tk-btn { font-size: 19px; min-height: 64px; letter-spacing: 0; }
@media screen and (min-width: 600px) {
  .tk-grid.is-budget .tk-btn { font-size: 24px; min-height: 72px; }
}

/* ---------- #1 メインビジュアル ---------- */
.tk-mv img { width: 100%; display: block; }

/* ---------- 3つのポイント（丸の中に要点。2026-09-28 案2の形を採用）----------
   スマホ：見出しの下に丸を3つ横に並べる／PC：見出しを左、丸3つを右に並べて縦の余白を詰める */
/* 2026-10-22（v5.7）商品カードのクリーム色と見分けがつくよう、地の色を別の変数に（既定は読み物の地の色。各ページのCSSで決める） */
.tk-points { background: var(--tk-points-bg, var(--tk-soft)); border-radius: var(--tk-radius); padding: 20px 10px; }
.tk-points-ttl { text-align: center; font-weight: 700; font-size: 27px; line-height: 1.4; color: var(--tk-main); margin: 0 0 14px; }   /* 2026-10-18 スマホ 20px→27px */
.tk-points-ttl span { display: block; font-size: 18px; color: var(--tk-sub); letter-spacing: .1em; margin-bottom: 2px; }                /* 2026-10-18 スマホ 15px→18px */
.tk-points-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.tk-points-list li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.4; } /* 丸の上の言葉も丸の中と同じ太字（2026-10-18） */
.tk-points-list li br { display: none; }
.tk-points-list b {
  display: flex;             /* 「当ページ内」→丸「全て／送料込み」の順に読む。丸の中は2行（2026-10-08） */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--tk-main);
  color: var(--tk-main-text);
  font-size: 16px;
  line-height: 1.2;
  box-shadow: inset 0 0 0 3px var(--tk-main), inset 0 0 0 4px #fff;
}
.tk-points-list b span { display: block; }
.tk-points-list li { justify-content: flex-end; } /* 上の言葉が2行になっても、丸の高さをそろえる */
.tk-nobr { display: inline-block; }              /* 「手提げ袋」を途中で折り返さない */
.tk-points-no { display: none; }
@media screen and (min-width: 600px) {
  .tk-points { display: flex; align-items: center; justify-content: center; gap: 48px; padding: 24px 32px; }
  .tk-points-ttl { text-align: left; font-size: 34px; margin: 0; }      /* 2026-10-08 24px→34px（大きく） */
  .tk-points-ttl span { font-size: 22px; }                              /* 2026-10-08 16px→22px */
  .tk-points-list { grid-template-columns: repeat(3, 160px); gap: 16px; }
  .tk-points-list li { font-size: 16px; }
  .tk-points-list b { width: 112px; height: 112px; font-size: 20px; }
}
/* 2026-10-22（v5.10）タブレットくらいの幅（600〜959px）では、見出しと丸3つを横に並べると入りきらずはみ出すため、スマホと同じ縦並びに */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .tk-points { flex-direction: column; gap: 16px; }
  .tk-points-ttl { text-align: center; }
}

/* ---------- 大きい1商品（イチオシ・各節の1つ目） ---------- */
.tk-big {
  display: grid;
  gap: 12px;
  border: none; /* 2026-10-19 枠線をやめ背景色に（オーナー指示） */
  border-radius: var(--tk-radius);
  padding: 12px;
  background: var(--tk-card-bg, #faf4e8);
}
@media screen and (min-width: 600px) {
  .tk-big { grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px; align-items: center; }
}
/* 札（今年のイチオシ・順位）：右端に切れ込みを入れた旗の形（2026-09-28 案2の形を採用） */
.tk-tag,
.tk-rank {
  display: inline-block;
  align-self: flex-start;
  background: var(--tk-sub);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  padding: 2px 20px 2px 12px;
  margin: 0 0 8px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}
@media screen and (min-width: 600px) { .tk-tag, .tk-rank { font-size: 18px; } }
/* 2026-10-22（v5.9）PCでランキングの「第〇位」を少し大きく（オーナー指示） */
@media screen and (min-width: 600px) { .tk-rank { font-size: 22px; padding: 3px 24px 3px 14px; } }

/* ---------- 商品の写真・名前・価格（共通） ---------- */
.tk-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: #eee; }
.tk-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 商品名の上のラベル（冷蔵便・日持ちなど）：淡い地に濃い茶の文字で読みやすく */
.tk-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.tk-labels span { font-size: 14px; font-weight: 700; line-height: 1.6; border: none; border-radius: 3px; padding: 1px 8px; color: #4a3414; background: var(--tk-label-bg, #ecdab4); }
@media screen and (min-width: 600px) { .tk-labels span { font-size: 15px; } }
.tk-name { font-size: 17px; font-weight: 700; line-height: 1.5; margin: 0 0 4px; }
.tk-big .tk-name { font-size: 21px; }
.tk-desc { font-size: var(--tk-body); margin: 0 0 8px; }
.tk-price { font-size: 20px; font-weight: 700; margin: 4px 0 10px; }
.tk-big .tk-price { font-size: 26px; }
.tk-price small { font-size: 14px; font-weight: 400; }
/* 「送料込み」の札：2026-10-19（v5.2）赤い枠線を外し、淡い赤の背景色に（文字は赤のまま） */
.tk-price .tk-free { display: inline-block; font-size: 14px; font-weight: 700; color: var(--tk-price); background: var(--tk-free-bg, #fde8e8); border: none; border-radius: 3px; padding: 1px 7px; margin-right: 6px; vertical-align: middle; line-height: 1.6; }
.tk-stars { min-height: 28px; font-size: 12px; margin: 0 0 6px; } /* 2026-10-18 20px→28px：レビュー0件の商品も星の欄の高さをそろえ、横並びの位置がずれないように */
.tk-stars .review-summary-container { display: inline-block; }

/* ---------- 小さい商品（横2列・ランキング） ---------- */
.tk-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* PC：公開中のお歳暮ページ（/f/oseibo）の商品カードと同じ1枚238px・間30pxで中央に（2026-10-18）。
   2列の節も、4列の節も同じカードの大きさになる */
/* 〔2026-10-19に改訂〕2列の節も238pxにしていたが、オーナーの評価「横幅が極端に狭い」により、
   いま公開中の夏の特集（/f/ochugen）の2列と同じ1枚400px・間80px（合計880px＝説明文・レビューと同じ幅）に。4列の節は238pxのまま */
@media screen and (min-width: 600px) {
  /* 2列の節は、4列の節（238px×4＋間30px×3＝1042px）と左右の端をそろえる（2026-10-19 オーナー指示） */
  /* 〔2026-10-22に撤回〕上の「2列の節は1枚506px・間30pxで4列の節と端をそろえる」 */
  /* 2026-10-22（v5.9）2列の節は、いまの特集（敬老の日 /f/keirou の special-box02 sp-box2-row2）と同じ寸法に（オーナー指示「2カラムの横幅を狭める」）。
     お手本：raw/お手本/京みずは敬老の日2026年/css/special.css。幅960px以上は1枚400px・間82px（左右の余白4%×2）、600〜959pxは1枚最大300px・間8% */
  .tk-cards { grid-template-columns: repeat(2, minmax(0, 300px)); gap: 30px 8%; justify-content: center; }
}
@media screen and (min-width: 960px) {
  /* 〔2026-10-22夜に改訂〕1枚400px・間82px（敬老の日ページと同じ）だった。
     v5.12でランキングだけ、左右の端（882px）はそのままに間を30pxに詰めて426pxに。v5.13で2列の節すべてをこれにそろえた（オーナー指示） */
  .tk-cards { grid-template-columns: repeat(2, 426px); column-gap: 30px; }
}
/* 4列の節（238px×4＋間30px×3＝1042px）は、その幅が入る画面（1130px以上）だけ4列に。
   それより狭い画面（タブレットなど）では2列の節と同じ並びにして、ページの横にはみ出さないように（2026-10-22 v5.10） */
@media screen and (min-width: 1130px) {
  .tk-cards.pc-4 { grid-template-columns: repeat(4, 238px); gap: 30px; }
}
.tk-card { display: flex; flex-direction: column; border: none; border-radius: var(--tk-radius); padding: 8px; background: var(--tk-card-bg, #faf4e8); } /* 2026-10-19 枠線をやめ背景色に（オーナー指示） */
.tk-card .tk-name { font-size: 16px; }
/* 2026-10-22（v5.7）スマホで横2列になるカードの写真は正方形（1:1）に。PCでも同じ1:1（画面の幅での使い分けではない。オーナー指示）。
   スマホで1列になる大きい1商品（.tk-big）は3:2のまま */
.tk-card .tk-photo { aspect-ratio: 1 / 1; }
/* 2026-10-22（v5.11）2列の節のカードは、スマホ用（正方形）とPC用（3:2）の2枚の画像を置き、画面の幅600pxで切り替える（オーナー指示。敬老の日ページの lg-hide／sm-hide と同じ考え方。
   切り替えは .tk-sp／.tk-pc）。PC用の3:2のバナーがまだ無い商品は、正方形の画像を仮に入れてここで3:2に切り抜いている。4列の節は正方形1枚のまま */
.tk-card .tk-photo.is-wide { aspect-ratio: 3 / 2; }
/* 横に並んだカードは同じ高さになる。商品名の欄を伸ばして、星・価格・ボタンをカードの下側にそろえる
   （商品名の行数が左右で違っても、星から下の位置がそろう。2026-10-18） */
.tk-card .tk-name { flex: 1 0 auto; }
.tk-card .tk-price { font-size: 20px; }
.tk-card .tk-btn { margin-top: auto; min-height: 48px; font-size: 16px; }
@media screen and (min-width: 600px) {
  .tk-card { padding: 12px; }
  .tk-card .tk-name { font-size: 18px; }
  .tk-card .tk-price { font-size: 22px; }
}
/* 順位の札の色：1位 金／2位 銀／3位 銅／4位 灰 */
.tk-rank.is-1 { background: #e0b020; color: #2e2200; }
.tk-rank.is-2 { background: #c3c6ca; color: #222; }
.tk-rank.is-3 { background: #9a6433; color: #fff; }
.tk-rank.is-4 { background: #6f7275; color: #fff; }
.tk-price { white-space: nowrap; }
@media screen and (max-width: 599px) {
  /* スマホの2列：「送料込み」を価格の上に出し、価格を大きく読めるように */
  .tk-card .tk-price { white-space: normal; line-height: 1.4; }
  /* 2026-10-18 星から下の位置を左右のカードでそろえる：
     ・「送料込み」の札が無い商品（かすてら・特大本わらび餅セット）も、価格の欄を札のある商品と同じ高さに
     ・レビューの星（U-KOMI）は星1つ21px。件数が3桁（例 395件）だと2行に折り返すため、星を少し小さく（14px） */
  .tk-card .tk-price { min-height: 58px; } /* 2026-10-19 55→58px（札を枠線から背景色にして札のある欄が57pxになったため） */
  .tk-card .tk-stars .ukmcustomfont { font-size: 14px !important; }
  .tk-card .tk-price .tk-free { display: table; margin: 0 0 4px; font-size: 13px; }
  .tk-card .tk-price small { font-size: 12px; }
  .tk-card .tk-labels span { font-size: 13px; padding: 0 6px; }
  .tk-grid .tk-btn { font-size: 16px; padding: 4px 2px; }
  .tk-card .tk-btn { padding: 6px 2px; letter-spacing: 0; }
}
/* 2026-10-19 幅380px未満の小さいスマホ（例 360px）では件数が星の下へ回るため、星の欄を2行分の高さにしてそろえる */
@media screen and (max-width: 379px) {
  .tk-card .tk-stars { min-height: 42px; }
}
/* 〔2026-10-18に撤回〕ランキング上段だけ商品名20px・価格24pxにしていた（PCのカードを238pxに狭めたため、他のカードと同じ大きさに） */
.tk-cards + .tk-cards { margin-top: 10px; }
@media screen and (min-width: 600px) { .tk-cards + .tk-cards { margin-top: 30px; } }
/* ダミーの商品（写真の代わりの灰色の箱） */
.tk-photo.is-dummy { display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }

/* ---------- 各節のレビュー（2026-10-19 v5.6：敬老の日ページ /f/keirou の「〇〇のレビュー」と同じ見た目に）----------
   お手本：raw/お手本/京みずは敬老の日2026年/index.html（Bootstrap の row・col で組んである）を、同じ寸法で grid に置き換えた
   左に顔の絵（PC 110px／スマホ 幅の22%）、右に白地・オレンジの点線の吹き出し（星の画像→太字の見出し→本文）
   〔2026-10-19に撤回〕2026-10-08の形（顔の絵を枠の中へ・点線をやめて薄い黄色の塗り）
   2026-10-22（v5.8）v5.5から作ったv5.7に、この形をv5.6から戻した（オーナー指示「レビューの表示はv5.6を参考に」） */
.tk-rv { max-width: 1000px; margin: 24px auto; }
.tk-rv-ttl { font-weight: 700; font-size: 17px; line-height: 28px; color: #444; margin: 0 0 5px; }
.tk-rv-box {
  display: grid;
  grid-template-columns: 22% 1fr;
  grid-template-areas: "face star" "face text";
  column-gap: 10px;
  align-items: center;
}
.tk-rv-face { grid-area: face; align-self: center; }
.tk-rv-face img { width: 100%; max-width: 110px; height: auto; display: block; }
/* 吹き出し：星と本文の2つの欄に点線を分けて引き、1つの枠に見せる */
.tk-rv-star, .tk-rv-text { background: #fff; border: 1px dashed var(--tk-rv-line, #cf5e10); }
.tk-rv-star { grid-area: star; align-self: end; border-bottom: none; border-radius: 5px 5px 0 0; padding: 12px 12px 0; }
.tk-rv-star img { width: 58%; display: block; }
.tk-rv-text { grid-area: text; align-self: start; border-top: none; border-radius: 0 0 5px 5px; padding: 0 12px 12px; font-size: 16px; line-height: 1.6; color: #444; }
.tk-rv-text b { display: block; }
@media screen and (min-width: 600px) {
  .tk-rv { padding: 0 15px; }
  .tk-rv-box { grid-template-columns: 110px 1fr; column-gap: 30px; }
  .tk-rv-star img { width: 190px; }
}

/* ---------- 選ばれる理由 ---------- */
.tk-reasons { display: grid; gap: 20px; }
@media screen and (min-width: 600px) { .tk-reasons { grid-template-columns: repeat(3, 1fr); } }
.tk-reason { border: 1px solid var(--tk-line); border-radius: var(--tk-radius); padding: 12px; }
.tk-reason .tk-h3 { margin-top: 12px; font-size: 20px; }
.tk-reason p { font-size: var(--tk-body); margin: 0; }

/* ---------- お客様の声（スマホ：写真の下に文／PC：大きい写真の横に文） ---------- */
.tk-voice { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--tk-line); border-radius: var(--tk-radius); padding: 12px; margin: 0 0 12px; }
.tk-voice-img { max-width: 240px; }
.tk-voice-img img { border-radius: 4px; }
.tk-voice p { font-size: var(--tk-body); margin: 0 0 4px; }
.tk-voice .tk-note { font-size: 16px; }
.tk-voice .tk-note a { text-decoration: underline; }
.tk-voice-star { color: #e6a700; letter-spacing: 2px; }
@media screen and (min-width: 600px) {
  .tk-voice { flex-direction: row; gap: 24px; padding: 20px; align-items: flex-start; }
  .tk-voice-img { flex: 0 0 280px; max-width: 280px; }
}
/* ---------- お客様の声（2026-10-18〜）----------
   敬老の日ページ（/f/keirou）の「お客様からのご感想」（special.css の .special-feedback）と同じ並び・寸法。
   special.css は読まないので、同じ指定をここに持つ。星は楽天GOLDでも出るよう、サイト共通CSSの .star-rating に頼らず文字で出す
   スマホ：左に写真145px・右に購入商品、その下に星と本文／PC：左に写真250px（余白20px）、右に購入商品→星→本文 */
.tk-fb { margin: 0 auto; }
.tk-fb.is-in { margin: 24px auto 0; } /* 各節の商品の下に置くレビュー1件（2026-10-19 敬老の日ページの形にそろえた） */
.tk-fb-box {
  display: grid;
  grid-template-columns: 145px 1fr;
  grid-template-rows: auto auto;
  background: #fff;
  border: 1px solid #999;
  margin: 0 0 30px;
}
.tk-fb-img { grid-row: 1 / 2; grid-column: 1 / 2; margin: 0; padding: 15px 0 5px 15px; }
.tk-fb-img img { width: 100%; min-width: 130px; }
.tk-fb-ttl { grid-row: 1 / 2; grid-column: 2 / 3; font-size: 18px; font-weight: 500; line-height: 1.5; margin: 15px 0 0; padding: 0 15px 15px; border: none; background: none; }
.tk-fb-ttl span { display: block; }
.tk-fb-ttl a { color: #000 !important; text-decoration: none !important; border-bottom: 1px solid #000; }
.tk-fb-ttl a:hover { border-bottom: none; }
.tk-fb-body { grid-row: 2 / 3; grid-column: 1 / 3; padding: 0 15px 15px; }
.tk-fb-body p { font-size: var(--tk-body); margin: 0 0 4px; }
.tk-fb-star { color: #edc82b; font-size: clamp(20px, 5vw, 30px) !important; letter-spacing: .4em; line-height: 1.4; white-space: nowrap; }
@media screen and (min-width: 600px) {
  .tk-fb { max-width: 1060px; }
  .tk-fb-box { grid-template-columns: 250px 1fr; }
  .tk-fb-img { grid-row: 1 / 3; padding: 20px; }
  .tk-fb-ttl { padding: 15px 30px 0 0; margin: 20px 0; }
  .tk-fb-ttl span { display: inline-block; }
  .tk-fb-body { grid-row: 2 / 3; grid-column: 2 / 3; padding: 0 30px 20px 0; }
  .tk-fb-star { font-size: 24px !important; }
}

/* 〔2026-10-18から使っていない〕以前のお客様の声（.tk-voice）。案2が読むので残す */
.tk-corp { border: 2px solid var(--tk-main); border-radius: var(--tk-radius); margin: 24px 0 0; text-align: center; overflow: hidden; }
.tk-corp .tk-corp-ttl { background: var(--tk-main); color: var(--tk-main-text); font-weight: 700; font-size: 22px; padding: 10px; }
.tk-corp p { font-size: 17px; padding: 14px 12px 0; }
.tk-corp .tk-btn { margin: 0 auto 18px; max-width: 280px; }
@media screen and (min-width: 600px) {
  .tk-corp .tk-corp-ttl { font-size: 28px; padding: 14px; }
  .tk-corp p { font-size: var(--tk-body); }
}
/* 大口のご注文の流れ（2026-10-18）：スマホは縦に1列、PCは4つ×2段。番号の丸と矢印で順番を示す */
.tk-corp .tk-flow-ttl { font-size: 20px; font-weight: 700; padding: 18px 12px 0; margin: 0; }
.tk-flow { list-style: none; margin: 10px auto 20px; padding: 0 16px; display: grid; gap: 22px; text-align: left; }
.tk-flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px;
  background: var(--tk-soft);
  border-radius: var(--tk-radius);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.tk-flow-no {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tk-main);
  color: var(--tk-main-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
/* 次の段階への矢印（スマホは下向き） */
.tk-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -17px;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid var(--tk-main);
}
@media screen and (min-width: 600px) {
  .tk-corp .tk-flow-ttl { font-size: 24px; padding-top: 24px; }
  .tk-flow { grid-template-columns: repeat(4, 1fr); gap: 20px 28px; max-width: 1000px; padding: 0 24px; margin-top: 16px; }
  .tk-flow li { flex-direction: column; justify-content: flex-start; text-align: center; min-height: 128px; padding: 14px 10px; font-size: 17px; }
  /* PCは右向きの矢印（各段の右端の4・8には付けない） */
  .tk-flow li:not(:last-child)::after {
    left: auto;
    right: -21px;
    top: 50%;
    bottom: auto;
    margin: -9px 0 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 10px solid var(--tk-main);
    border-right: 0;
  }
  .tk-flow li:nth-child(4n)::after { content: none; }
}

/* ---------- のし・お届け ---------- */
.tk-guide .tk-sample { max-width: 480px; margin: 8px auto 12px; }
.tk-guide .tk-btn { max-width: 320px; }
@media screen and (min-width: 600px) {
  .tk-guide .tk-sample { max-width: 820px; }
  .tk-guide .tk-h3 { font-size: 21px; }
}

/* ---------- よくある質問 ---------- */
.tk-qa { margin: 0; }
.tk-qa .tk-qa-q { font-size: 20px; font-weight: 700; line-height: 1.6; margin: 20px 0 6px; padding: 0 0 0 1.6em; text-indent: -1.6em; border: none; background: none; }
.tk-qa .tk-qa-q::before { content: "Q. "; color: var(--tk-main); }
.tk-qa .tk-qa-a { margin: 0; padding: 0 0 14px 1.6em; border-bottom: 1px dotted #c9b48e; }
.tk-qa .tk-qa-a a { text-decoration: underline; color: var(--tk-main); font-weight: 700; }
.tk-faq-items { margin-top: 40px; }
.tk-faq-items .tk-h3 { margin-top: 0; }

/* ---------- 固定の帯（スマホ：画面の下／PC：画面の右端に縦） ---------- */
.tk-fix {
  position: fixed;
  z-index: 90;
  display: grid;
  gap: 4px;
  background: rgba(255, 255, 255, .95);
}
.tk-fix .tk-btn { min-height: 44px; font-size: 15px; padding: 2px; letter-spacing: 0; }
@media screen and (max-width: 599px) {
  .tk-fix { left: 0; right: 0; bottom: 0; grid-template-columns: repeat(3, 1fr); padding: 6px; box-shadow: 0 -2px 6px rgba(0,0,0,.15); }
  /* ページの一番下（フッター）が固定の帯に隠れないように。このCSSを読む特集ページだけに効く */
  body { padding-bottom: 56px; }
  /* サイト共通の「ページの先頭へ」ボタンを、固定の帯の上へ逃がす */
  #page-top { bottom: 60px !important; }
}
@media screen and (min-width: 600px) {
  .tk-fix { right: 0; top: 40%; width: 128px; padding: 5px; border-radius: 6px 0 0 6px; box-shadow: -2px 0 6px rgba(0,0,0,.15); }
  .tk-fix .tk-btn { min-height: 50px; font-size: 17px; padding: 2px; }
}

/* ---------- PCの余白 ---------- */
@media screen and (min-width: 600px) {
  .tk-blk { padding: 48px 40px; }
  .tk-blk + .tk-blk { padding-top: 16px; }
  .tk-blk.is-soft { padding-top: 56px; margin-top: 56px; }
  section.tk-blk + section.tk-blk:not(.is-soft) { padding-top: 88px; }
  .tk-h2 { font-size: 28px; margin-bottom: 28px; }
}

/* ---------- ボタンの右矢印（2026-10-26 v6.3・トップページ www.mizuha.co.jp の「商品を見る」ボタンと同じ形：幅8px・線2px・45度回した山形を右端に） ----------
   ページ内を移動するボタン（目次・予算・商品で選ぶ・固定の帯＝.tk-grid／.tk-fix）には付けない。 */
.tk-card .tk-btn, .tk-big .tk-btn, .tk-guide .tk-btn, .tk-corp .tk-btn, .tk-blk > .tk-btn.is-wide {
  position: relative;
  padding-right: 40px;
}
.tk-card .tk-btn::after, .tk-big .tk-btn::after, .tk-guide .tk-btn::after, .tk-corp .tk-btn::after, .tk-blk > .tk-btn.is-wide::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 13px;
  height: 13px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
/* スマホ（幅599px以下）で2列に並ぶ商品カードのボタンだけは、小さい矢印のまま（2026-10-26 v6.4・オーナー指示） */
@media (max-width: 599px) {
  .tk-card .tk-btn { padding-right: 26px; }
  .tk-card .tk-btn::after { right: 14px; width: 8px; height: 8px; border-top-width: 2px; border-right-width: 2px; }
}

/* 目次（.tk-grid.pc-6）と「商品で選ぶ」（.tk-grid.pc-5）のボタンにも右矢印（2026-10-26 v6.5・v6.6 オーナー指示）。スマホは2列のカードと同じ小さい矢印。
   PCは矢印の分だけ文字を小さく（19→16px）して、ボタンの形が崩れないようにする */
.tk-grid.pc-6 .tk-btn, .tk-grid.pc-5 .tk-btn { position: relative; padding-right: 26px; }
.tk-grid.pc-6 .tk-btn::after, .tk-grid.pc-5 .tk-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
@media screen and (min-width: 600px) {
  .tk-grid.pc-6 .tk-btn { font-size: 16px; }
  .tk-grid.pc-6 .tk-btn, .tk-grid.pc-5 .tk-btn { padding-right: 30px; }
  .tk-grid.pc-6 .tk-btn::after, .tk-grid.pc-5 .tk-btn::after { right: 12px; width: 9px; height: 9px; }
}