@charset "utf-8";
/*------------------------------------------------------------
 top2026.css — TOP作り直し（SPEEE 390-1〜397-1／move 012-33〜012-40）
 2026-10-05 作成

 ・対象：template-parts/top2026-body.php（#top2026 の中だけ）。読み込みは head.php（kasamart_is_top2026() のとき）
 ・デザインの正：Figma「KASAMART Design system」VpTt5ASzizmgbPfdpeZdrW
     PC 152:361（幅1920・本文1200）／SP 167:1248（幅390・本文350）
 ・値は _tokens.css の変数を使う（文字サイズ・余白・角丸・色）。トークンに無い値は直値にしてコメントを付けた
 ・PCの文字サイズは _tokens.css の拡張後Mode（本番で採用中）＝Figma の「PC」モード
 ・SPの文字サイズは Figma の「SP」モードの値。_tokens.css には SP の値が無いため、
   #top2026 の中だけ --fs-* を上書きしている（ヘッダー・フッターには効かない）
 ・行間：Figma は 140%／150%。--lh-snug（1.4）／--lh-normal（1.5）を使う
------------------------------------------------------------*/

/* ---------- SP（812px以下）：Figma「SP」モードの文字サイズ ---------- */
@media screen and (max-width: 812px) {
  #top2026 {
    --fs-2xs: 1rem;   /* 10px */
    --fs-xs: 1.1rem;  /* 11px */
    --fs-sm: 1.3rem;  /* 13px */
    --fs-base: 1.4rem;/* 14px */
    --fs-md: 1.6rem;  /* 16px */
    --fs-lg: 1.8rem;  /* 18px */
    --fs-xl: 2rem;    /* 20px */
    --fs-2xl: 2.2rem; /* 22px */
    --fs-3xl: 2.4rem; /* 24px */
    --fs-4xl: 3.2rem; /* 32px */
  }
}

/* ---------- 土台 ---------- */
#top2026 {
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
}
#top2026 *,
#top2026 *::before,
#top2026 *::after {
  box-sizing: border-box;
}
#top2026 a {
  color: inherit;
  text-decoration: none;
}
/* :where() で詳細度を0にする（各部品で指定した画像の高さを優先させるため） */
:where(#top2026) img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
#top2026 ul,
#top2026 ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#top2026 p,
#top2026 dl,
#top2026 dd,
#top2026 h1,
#top2026 h2,
#top2026 h3 {
  margin: 0;
}
.t26-container {
  width: var(--container-base);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}
.t26-container > * {
  width: 100%;
}
.t26-container > .t26-heading {
  width: auto;
}
.t26-container > .t26-btn {
  width: 400px;
}
.t26-sec {
  padding: var(--space-4xl) 0;
  background: var(--color-bg-white);
}
.t26-sec--gray {
  background: var(--color-bg-light);
}
.t26-sec--yellow {
  background: #fef7e6; /* Figma yellow/100（Color Primitives。_tokens.css に未出力） */
}
.t26-sec--round {
  border-radius: 100px;
}
.t26-sec--thin {
  padding: var(--space-xl) 0;
}
.t26-sec--news {
  padding: var(--space-3xl) 0;
}
.t26-pc {
  display: block;
}
/* 仮の画像枠（画像の準備待ち） */
.t26-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-gray);
  color: var(--color-text-tertiary);
  font-size: var(--fs-xs);
}

@media screen and (max-width: 812px) {
  .t26-container {
    width: auto;
    padding: 0 var(--gutter-sp);
    gap: var(--space-md);
  }
  .t26-sec {
    padding: var(--space-2xl) 0;
  }
  .t26-sec--round {
    border-radius: 40px;
  }
  .t26-sec--thin {
    padding: var(--space-md) 0;
  }
  .t26-sec--news {
    padding: var(--space-xl) 0;
  }
  .t26-pc {
    display: none;
  }
}

/* ---------- 共通部品 ---------- */
/* 見出し（Figma: Section Heading 138:7） */
.t26-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-primary);
  font-weight: 700;
  line-height: var(--lh-snug);
  text-align: center;
}
.t26-heading_en {
  font-size: var(--fs-2xs);
}
#top2026 .t26-heading_ja {
  font-size: var(--fs-xl);
  font-weight: 700;
}

/* タグ（Figma: Tag 138:18） */
.t26-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.t26-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2xs);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--color-bg-white);
  background: var(--color-primary);
  white-space: nowrap;
}
.t26-tag--accent {
  background: var(--color-accent-yellow);
}
#top2026 .t26-tag--pale {
  background: var(--color-accent-pink);
  color: var(--color-bg-white);
}
#top2026 .t26-tag--outline {
  background: var(--color-bg-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* テキストリンク「◯◯ ›」（Figma: Text Link 138:21） */
.t26-textlink,
.t26-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-primary) !important;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  text-decoration: underline !important;
}
.t26-textlink::after,
.t26-arrowlink::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin: 0 3px 0 1px;
}
/* CMSでリンク先が空のとき（<p> で出す）は、矢印と下線を付けない。2026-10-05 追加（D-028） */
p.t26-arrowlink {
  text-decoration: none !important;
}
p.t26-arrowlink::after {
  content: none;
}
.t26-linkrow {
  display: flex;
  justify-content: flex-end;
}

/* 黄色のボタン（Figma: Button / Accent 138:25） */
.t26-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: 400px;
  min-height: 60px;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--color-bg-white) !important;
  text-align: center;
}
.t26-btn--accent {
  background: var(--color-accent-yellow);
}
.t26-btn--full {
  width: 100%;
}
.t26-btn:hover {
  opacity: .85;
}

/* タブ（Figma: Tab 138:33） */
.t26-tabs {
  display: flex;
}
.t26-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background: var(--color-bg-white);
  color: var(--color-primary);
  font-family: inherit;
  line-height: var(--lh-snug);
  text-align: center;
  cursor: pointer;
}
/* 角丸はタブの並びの外側だけ（Figma 152:661／167:1270：納期は radius-md、154:1177：お知らせは radius-sm）。
   隣どうしの枠線は1本に重ねる（2026-10-05 ディレクター指示） */
.t26-tab + .t26-tab {
  margin-left: -1px;
}
.t26-tab:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.t26-tab:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.t26-tabs--news .t26-tab:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.t26-tabs--news .t26-tab:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.t26-tab.is-active {
  background: var(--color-primary);
  color: var(--color-bg-white);
}
.t26-tab_ttl {
  font-size: var(--fs-md);
  font-weight: 700;
}
.t26-tab_sub {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.t26-tab.is-active .t26-tab_sub {
  color: var(--color-bg-white);
}
.t26-tabpanel[hidden] {
  display: none !important;
}

/* 開閉（Figma: Accordion 139:52）。<details> を使う */
.t26-acc {
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  padding: var(--space-xs) var(--space-sm);
}
.t26-acc_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-primary);
}
.t26-acc_head::-webkit-details-marker {
  display: none;
}
.t26-acc_head::after {
  content: "＋";
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.t26-acc[open] > .t26-acc_head::after {
  content: "－";
}
.t26-acc_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
}
.t26-acc_links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  color: var(--color-primary);
  text-decoration: underline;
}
/* 素材の折りたたみ（CMSで複数入れたとき）を縦に並べる。2026-10-05 追加（D-028） */
.t26-acclist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 関連商品（CMSの relation）のリンク。2026-10-05 追加（D-028） */
#top2026 .t26-acc_links a {
  color: inherit;
  text-decoration: inherit;
}

/* カードの並び */
.t26-cards {
  display: grid;
  gap: var(--space-sm);
  align-items: stretch;
}
.t26-cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.t26-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 812px) {
  .t26-cards {
    gap: var(--space-2xs);
  }
  .t26-cards--3,
  .t26-cards--4.t26-cards--wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .t26-cards--4.t26-cards--sp2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .t26-btn,
  .t26-container > .t26-btn {
    width: 100%;
  }
}

/* ---------- FV：検索・見出し（Figma 152:519／Search Box 140:79） ---------- */
/* 上の余白は 0：スライダーの丸印（top2020.css の .slick-dots・margin-bottom 60px）の下に、
   すでに約30px の空きがあるため（Figma は丸印→検索窓が 30px）。2026-10-05 修正（旧値 var(--space-lg)） */
.t26-fv {
  padding: 0 0 var(--space-xl);
  background: var(--color-bg-white);
}
.t26-fv .t26-container {
  gap: var(--space-lg);
}
.t26-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 900px !important;
  max-width: 100%;
}
.t26-search_field {
  display: flex;
  align-items: stretch;
  margin: 0;
}
#top2026 .t26-search_input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-primary);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-bg-white);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  -webkit-appearance: none;
  appearance: none;
}
#top2026 .t26-search_input::placeholder {
  color: var(--color-text-tertiary);
}
#top2026 .t26-search_btn {
  flex: none;
  padding: var(--space-xs) var(--space-xl);
  border: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-primary);
  color: var(--color-bg-white);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-normal);
  cursor: pointer;
}
/* 見出し「人気の検索：」とタグの列を横に並べ、タグの列の中だけで折り返す
   （2行目のタグを1つ目のタグの左端にそろえる。2026-10-05 修正） */
.t26-search_popular {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
}
.t26-search_popular_ttl {
  flex: none;
  font-size: var(--fs-xs);
  /* 1行目のタグと上下中央をそろえる：タグの高さ＝文字×行間＋上下の余白 2px×2＋枠 1px×2 */
  line-height: calc(var(--fs-xs) * var(--lh-snug) + 6px);
  color: var(--color-text-secondary);
}
.t26-search_popular_list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
#top2026 .t26-fv_ttl {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-normal);
  color: var(--color-primary);
  text-align: center;
  padding: 0;
}
#top2026 .t26-fv_ttl.h1_sp {
  display: none;
}
@media screen and (max-width: 812px) {
  .t26-fv {
    padding: 0 0 var(--space-xl); /* SPも丸印の下に約20px の空きがある（Figma 167:1255 は 20px）。旧値 var(--space-xs) */
  }
  .t26-fv .t26-container {
    gap: var(--space-sm);
  }
  #top2026 .t26-search_btn {
    padding: var(--space-xs) var(--space-md);
  }
  #top2026 .t26-fv_ttl.h1_sp {
    display: block;
  }
}

/* ---------- 商品カード（Figma: Product Card / Vertical 139:6） ---------- */
.t26-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  overflow: hidden;
}
.t26-pcard:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.t26-pcard_media {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 10px;
  border-bottom: 1px solid var(--color-border-light);
}
.t26-pcard_img {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  object-fit: contain; /* 既存の商品画像は切り抜かずに収める（Figma CMS Image の指定） */
}
.t26-rank {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0 0 var(--radius-md) 0;
  background: var(--color-accent-yellow);
  color: var(--color-bg-white);
  font-size: var(--fs-lg);
  font-weight: 700;
}
.t26-pcard_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  flex: 1 1 auto;
}
.t26-pcard_ttl {
  font-size: var(--fs-base);
  font-weight: 700;
  min-height: calc(2em * 1.4); /* 2行分 */
}
.t26-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-border-light);
}
.t26-price_s {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.t26-price_n {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-error);
}
/* 2026-10-15：金額と「（税込）」はまとめて折り返さない */
.t26-price_amt {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}
@media screen and (max-width: 812px) {
  /* SP：1行目に枚数、2行目に「金額（税込）」 */
  .t26-price_lot {
    flex-basis: 100%;
  }
}
/* 2026-10-15（012-33）：ランキングは本番TOPと同じ並び（左に枚数、右に金額、その下に税込）。PC・SPとも。
   収まらない金額（6桁など）のときだけ、枚数の下に回り込む */
.t26-price--table {
  gap: 0 var(--space-2xs);
}
#top2026 .t26-price--table .t26-price_lot {
  flex: 0 0 auto;
}
.t26-price_col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.t26-price_col .t26-price_n {
  line-height: 1.2;
  white-space: nowrap;
}
.t26-price_tax {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-error);
  white-space: nowrap;
}
@media screen and (max-width: 812px) {
  /* SP：カードの中身は133px。「100枚」＋「￥27,200~」を1行に収める（確認用のページで計測） */
  .t26-price--table {
    gap: 0 var(--space-3xs);
  }
  .t26-price_col .t26-price_n {
    font-size: var(--fs-md);
  }
  .t26-price_tax {
    font-size: var(--fs-xs);
  }
}
.t26-pcard_spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
}
.t26-pcard_spec > div {
  display: flex;
  gap: 12px;
}
.t26-pcard_spec dt {
  color: var(--color-text-tertiary);
  flex: none;
}
.t26-pcard_spec dd {
  font-weight: 700;
}
@media screen and (max-width: 812px) {
  /* 2026-10-15：SPは「出荷目安」を1行目、値（最短2営業日※／2営業日目発送）を2行目に。
     横並びだと165pxのカードで「※」や「送」だけが次の行に落ちていた（ユーザー指示）。人気ランキング・納期で選ぶの両方に効く */
  .t26-pcard_spec > div {
    flex-direction: column;
    gap: 2px;
  }
}
.t26-empty {
  grid-column: 1 / -1;
  text-align: center;
}
/* SP：4枚を横スクロール（Figma SP は1行に4枚で幅350を超える） */
@media screen and (max-width: 812px) {
  #t26-ranking .t26-cards,
  #t26-delivery .t26-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter-sp));
    padding: 0 var(--gutter-sp) 4px;
  }
  #t26-ranking .t26-pcard,
  #t26-delivery .t26-pcard {
    flex: 0 0 165px;
    scroll-snap-align: start;
  }
}

/* ---------- 納期で選ぶ（Figma 152:656） ---------- */
.t26-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-align: center;
}
.t26-note_main {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}
.t26-note_sub {
  color: var(--color-text-tertiary);
}
@media screen and (max-width: 812px) {
  .t26-tab {
    padding: var(--space-xs) 8px;
  }
  /* 2026-10-15：タブの見出し・補足を意味の切れ目で改行（「5営業日以／内に出荷」のような折り返しを防ぐ）。区切りの「・」は隠す */
  .t26-tab_ttl,
  .t26-tab_sub {
    text-align: center;
  }
  .t26-tab_line {
    display: block;
  }
  .t26-tab_sep {
    display: none;
  }
  .t26-note {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- 用途・シーン（Figma 153:738／Scene Card 149:48） ---------- */
.t26-scene {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 15px 0 15px 15px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
}
.t26-scene_img {
  flex: none;
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.t26-scene_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 15px;
  min-width: 0;
}
.t26-scene .t26-arrowlink {
  font-size: var(--fs-md);
}
.t26-scene_txt {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.t26-accgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  align-items: start;
}
@media screen and (max-width: 812px) {
  .t26-accgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* ---------- サイズ（Figma 153:792／Size Card / Compact 149:58） ---------- */
.t26-size {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
}
.t26-size:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.t26-size_img {
  flex: none;
  width: 111px;
  height: 72px;
  object-fit: contain;
}
.t26-size_text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}
.t26-size_ttl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.t26-size_name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
}
.t26-size_detail {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.t26-size_price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-error);
}
/* 2026-10-15：合計金額「100枚 29,920円（税込）〜」の枚数と（税込）〜は小さく（商品カードの .t26-price_s と同じ扱い） */
.t26-size_price_s {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-secondary);
}
@media screen and (max-width: 812px) {
  #t26-size .t26-linkrow {
    order: 3;
    justify-content: flex-start;
  }
  /* 2026-10-15（392-1／012-35）：SPEEE のレビュー（2026-10-14）で、SPの文字を本番TOP「クリアファイルランキング」の
     商品カードと同じ程度に。金額 13→20px、仕上がり 11→14px（本番のランキングは金額20px・説明14px。2026-10-15 計測）。
     サイズ名（18px）はそのまま */
  #t26-size .t26-size_price {
    font-size: var(--fs-xl);
  }
  #t26-size .t26-size_detail {
    font-size: var(--fs-base);
  }
  #t26-size .t26-size_price_s {
    font-size: var(--fs-base);
  }
}

/* ---------- 素材（Figma 153:868／Material Card 139:62） ---------- */
.t26-mcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  overflow: hidden;
}
.t26-mcard_media {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.t26-mcard_img {
  width: 150px;
  height: 150px;
}
.t26-mcard_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
}
#top2026 .t26-mcard_ttl {
  align-items: flex-start;
  min-height: 51px; /* タイトル2行分（Figma 2026-10-05：PC 18px×140%×2行。SPも固定値で確保する決定） */
}
.t26-mcard_ttl::after {
  margin-top: .55em;
}
.t26-mcard_spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
}
.t26-mcard_spec > div {
  display: flex;
  gap: var(--space-2xs);
}
.t26-mcard_spec dt {
  flex: none;
  width: 56px;
  font-weight: 700;
  color: var(--color-primary);
}
@media screen and (max-width: 812px) {
  #t26-material .t26-cards--4 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 2026-10-15（393-1／012-36）：SPEEE のレビュー（2026-10-14）で、SPの文字を本番TOP「クリアファイルランキング」の
     商品カードと同じ程度に。素材名 14→16px、特長・透け方・向く用途（項目名と内容）11→14px。
     項目名の幅は「向く用途」4文字が14pxで収まるよう 56→60px */
  /* 2026-10-15：素材名はもう1段大きく 16→18px（--fs-lg。「サイズで選ぶ」のサイズ名と同じ。ユーザー指示） */
  #t26-material .t26-mcard_ttl {
    font-size: var(--fs-lg);
  }
  #t26-material .t26-mcard_spec {
    font-size: var(--fs-base);
  }
  #t26-material .t26-mcard_spec dt {
    width: 60px;
  }
}

/* ---------- ロット／お届け目安（Figma 153:951／Lot Button 139:78・Delivery Estimate 140:15） ---------- */
.t26-lot {
  display: grid;
  grid-template-columns: 550fr 610fr;
  gap: var(--space-xl);
  align-items: start;
}
.t26-lot_entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.t26-lotbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  text-align: center;
}
.t26-lotbtn:hover {
  background: var(--color-primary-pale);
}
.t26-lotbtn_num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
}
.t26-lotbtn_num::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}
.t26-lotbtn_txt {
  font-size: var(--fs-sm);
}
.t26-lotbtn_sub {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
}
.t26-delivery {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-bg-light);
  line-height: var(--lh-normal);
}
#top2026 .t26-delivery_ttl {
  font-size: var(--fs-lg);
  font-weight: 700;
}
.t26-delivery_cal_ttl {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
}
.t26-delivery_cal {
  min-height: 120px;
  background: var(--color-bg-white);
}
/* 2026-10-09：テスト環境（demdm02）だけに出すダミーのカレンダー（394-1）。
   本番の #menu_calendar_fv と同じ指定（top2020.css「施策383-1」）を当てて、同じ大きさにする */
.t26-delivery_cal_dummy .s_calendar {
  width: 100%;
}
.t26-delivery_cal_dummy .s_calendar table {
  width: 100%;
  float: none;
  font-size: var(--fs-xs);
}
.t26-delivery_cal_dummy .s_calendar table th,
.t26-delivery_cal_dummy .s_calendar table td {
  padding: 2px 0;
}
.t26-delivery_cal_dummy .s_calendar_ex {
  font-size: var(--fs-2xs);
}
.t26-delivery_ship {
  display: flex;
  flex-direction: column;
}
.t26-delivery_ship[hidden] {
  display: none;
}
.t26-delivery_ship_label {
  font-size: var(--fs-base);
  font-weight: 700;
}
.t26-delivery_ship_date {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-error);
}
.t26-delivery_ship_base,
.t26-delivery_note {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
@media screen and (max-width: 812px) {
  .t26-lot {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .t26-delivery {
    padding: var(--space-sm);
  }
}

/* ---------- 国内・自社工場（Figma 154:930／Feature Card 140:51） ---------- */
.t26-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  line-height: var(--lh-normal);
}
.t26-feature_img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.t26-feature_ttl {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-primary);
}
.t26-feature_txt {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
@media screen and (max-width: 812px) {
  #t26-factory .t26-cards {
    gap: var(--space-md);
  }
}

/* ---------- オプション（Figma 154:948／Option Card / Compact 140:64） ---------- */
.t26-ocard {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  line-height: var(--lh-normal);
}
.t26-ocard_icon {
  flex: none;
  width: 64px;
  height: 64px;
}
.t26-ocard_text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.t26-ocard_ttl {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-primary);
}
.t26-ocard_txt {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
@media screen and (max-width: 812px) {
  #t26-option .t26-cards--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- ご注文の流れ（Figma 154:974／Flow Step 171:55） ---------- */
.t26-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-sm);
}
.t26-flow_step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  text-align: center;
  line-height: var(--lh-normal);
}
.t26-flow_num {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-success-light);
  color: var(--color-bg-white);
  font-size: var(--fs-md);
  font-weight: 700;
}
.t26-flow_icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.t26-flow_text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.t26-flow_ttl {
  font-size: var(--fs-base);
  font-weight: 700;
}
.t26-flow_txt {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.t26-flow_note {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
@media screen and (max-width: 812px) {
  .t26-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }
  .t26-flow_step {
    flex-direction: row;
    gap: 12px;
    padding: 15px 12px;
    text-align: left;
  }
  .t26-flow_num {
    position: static;
    flex: none;
  }
  .t26-flow_icon {
    flex: none;
  }
}

/* ---------- よくあるご質問（Figma 154:1011／FAQ Item 140:43） ---------- */
.t26-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: 960px !important;
  max-width: 100%;
  line-height: var(--lh-normal);
}
.t26-faq_item {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
}
.t26-faq_q {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  cursor: pointer;
}
.t26-faq_q::-webkit-details-marker {
  display: none;
}
.t26-faq_q::after {
  content: "＋";
  flex: none;
  margin-left: auto;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary);
}
.t26-faq_item[open] > .t26-faq_q::after {
  content: "－";
}
.t26-faq_mark {
  flex: none;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-primary);
}
.t26-faq_mark--a {
  color: var(--color-accent-yellow);
}
.t26-faq_qtxt {
  font-size: var(--fs-base);
  font-weight: 700;
}
.t26-faq_a {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}
.t26-faq_atxt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  font-size: var(--fs-sm);
}
@media screen and (max-width: 812px) {
  .t26-faq {
    gap: 8px;
  }
}

/* ---------- お客様の声（Figma 154:1085／Voice Card 200:48。本番 .cm-client__itemWth の構成） ---------- */
.t26-voice {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 23px var(--space-lg); /* 23px は本番の値（段階に無い） */
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
}
.t26-voice_head {
  display: flex;
  gap: var(--space-sm);
}
.t26-voice_img {
  flex: none;
  width: 120px;
  height: 90px;
}
.t26-voice_img img,
.t26-voice_img .t26-ph {
  width: 120px;
  height: 90px;
  object-fit: cover;
}
.t26-voice_meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  min-width: 0;
}
.t26-voice_label {
  padding: 3px var(--space-2xs);
  border-radius: 3px; /* 本番 .client_label_item の値 */
  background: #555; /* 本番 .client_label_item の値（トークンに無い） */
  color: var(--color-bg-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
}
.t26-voice_name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}
.t26-voice_stars {
  font-size: var(--fs-base);
  letter-spacing: .1em;
  color: var(--color-border-light);
}
.t26-voice_stars .is-on {
  color: var(--color-accent-yellow);
}
.t26-voice_body {
  font-size: var(--fs-sm);
  line-height: 1.5; /* 本番は 24px（16px×1.5） */
  /* TOPでは4行で省略（Figma の案。全文にするかは要確認） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.t26-voice_item {
  margin-top: auto !important;
  font-size: var(--fs-sm);
}
.t26-voice_item a {
  font-weight: 700;
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  margin-right: .5em;
}

/* ---------- 選ばれる理由（Figma 154:1120／Reason Card 140:60） ---------- */
.t26-reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  line-height: var(--lh-normal);
}
/* 番号とアイコンの行（Figma 140:60 の head：両端揃え・上下中央。アイコン 64px）2026-10-05 追加 */
.t26-reason_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#top2026 .t26-reason_icon {
  flex: none;
  width: 64px;
  height: 64px;
}
.t26-reason_num {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-primary);
}
.t26-reason_ttl {
  font-size: var(--fs-base);
  font-weight: 700;
}
.t26-reason_txt {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
@media screen and (max-width: 812px) {
  .t26-reason {
    padding: 15px;
  }
}

/* ---------- 送料（Figma 154:1142／Info Box 140:69） ---------- */
.t26-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-pale);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
#top2026 .t26-info_ttl {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-primary);
}
@media screen and (max-width: 812px) {
  .t26-info {
    padding: var(--space-sm);
  }
}

/* ---------- その他のノベルティ（Figma 154:1151／Goods Card / Compact 140:48） ---------- */
.t26-goods {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-xs);
}
.t26-gcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
}
.t26-gcard_img {
  width: 100%;
  height: 110px;
  object-fit: contain;
}
.t26-gcard_ttl {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  line-height: var(--lh-normal);
}
@media screen and (max-width: 812px) {
  .t26-goods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2xs);
  }
  .t26-gcard {
    padding: 8px;
  }
}

/* ---------- お知らせ・ブログ・お役立ち情報（Figma 154:1175／News Item 140:76） ---------- */
.t26-news li a {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.t26-news li a:hover .t26-news_ttl {
  text-decoration: underline;
}
.t26-news_date {
  flex: none;
  color: var(--color-text-tertiary);
}
.t26-tabpanel + .t26-tabpanel,
.t26-tabs--news + .t26-tabpanel {
  margin-top: 0;
}
#t26-news .t26-tabpanel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
@media screen and (max-width: 812px) {
  .t26-tabs--news {
    gap: 6px;
  }
  /* SPのお知らせタブは離して並べ、四隅を丸める（Figma 167:1417） */
  .t26-tabs--news .t26-tab,
  .t26-tabs--news .t26-tab:first-child,
  .t26-tabs--news .t26-tab:last-child {
    margin-left: 0;
    padding: var(--space-xs) 6px;
    border-radius: var(--radius-sm);
  }
  .t26-news li a {
    gap: 12px;
  }
  #t26-news .t26-tabpanel {
    gap: var(--space-md);
  }
}