/*
 * site-wp.css — WordPress 専用スタイル
 *
 * site.css（共通）を読み込んだ後に読み込むこと。
 * 順序: site-assets.php で site.css → site-wp.css
 *
 * ここには WordPress 側のマークアップにしか存在しないクラスの章を置く。
 * 両方で使う章、および misite / WordPress のクラスが混在する章は
 * site.css に残している。
 */

/* =============================================
   FOOTER
   ============================================= */
/* .wp-site-blocks の子要素に自動付与される margin-block-start により
   本文とフッター(wp-block-template-part)の間に白い隙間ができるため相殺する */
footer.wp-block-template-part {
  margin-block-start: 0;
}

.site-footer {
  background: var(--c-text);
  color: rgba(247, 245, 240, 0.45);
  padding: var(--s-12) 0 var(--s-6);
}


.footer-grid {
  margin-top: 0.7rem !important;

  /* 肉球アイコンの実寸と、アイコン〜見出しの間隔（WPのflexレイアウト既定の 0.5em）。
     ナビのインデント量をここで一元管理する。 */
  --footer-icon-w: 20px;
  --footer-icon-gap: 0.5rem;
}

/* PCフッターの各カラムは「肉球アイコン + 見出し」の行の下にナビが並ぶ。
   ナビはカラムの左端から始まるため、そのままだとアイコンの下に潜って
   見出し文字とずれて見える。見出し文字の開始位置まで下げて揃える。

   セレクタを nav 要素に限定するのは、ナビゲーションブロックが内側の
   <ul> にも wp-block-navigation クラスを付けて出力するため。
   クラスだけで指定すると親子の両方にインデントがかかり二重にずれる。 */
.footer-grid nav.wp-block-navigation {
  padding-left: calc(var(--footer-icon-w) + var(--footer-icon-gap));
}

/* アイコンと見出しの間隔をテーマ既定値に依存させず固定し、
   上のインデント計算とずれないようにする。
   （SNSカラムは縦並びグループなので :has で見出し行だけに限定する） */
.footer-grid .wp-block-group:has(> .wp-block-image + .wp-block-heading),
.footer-grid .wp-block-group:has(> .wp-block-uagb-image + .wp-block-heading) {
  gap: var(--footer-icon-gap);
}


.footer-sp summary+div.wp-block-columns {
  margin-block-start: 0;
}

.footer-sp summary {
  padding-top: 16px;
  padding-bottom: 8px;
}

.footer-sp-accordion {
  border-bottom: 1px solid #FFFDFD;
}

.footer-sp-accordion summary {
  background-color: inherit;
}


.footer-sp-accordion summary::after {
  border-right-color: #FFFDFD;
  border-bottom-color: #FFFDFD;
  margin-top: 0px;

}

/* ------------------------------------------------------------
   スマホフッター：見出し（summary）とナビリンクを揃える

   PC側は「肉球アイコン + 見出し」に合わせてナビをインデントしたが、
   SP側はアイコンがないので、見出しとリンクを同じ左位置・同じ文字サイズに
   揃えるだけでよい。インデント量は変数で両者に同じ値を渡す。
   ------------------------------------------------------------ */
.footer-sp {
  --footer-sp-indent: 0px;
}

/* summary はネイティブの開閉マーカー分だけテキストが右にずれるため、
   マーカーを消して左位置を変数で決め直す（開閉の矢印は ::after で描いている）。 */
.footer-sp-accordion summary {
  list-style: none;
  padding-left: var(--footer-sp-indent);
}

.footer-sp-accordion summary::-webkit-details-marker {
  display: none;
}

.footer-sp-accordion summary::marker {
  content: "";
}

/* ナビを包む columns ブロックにはインライン style で左右パディングが付くため、
   summary と同じインデントに上書きする。 */
.footer-sp-accordion .wp-block-details .wp-block-columns {
  padding-left: var(--footer-sp-indent) !important;
  padding-right: 0 !important;
}

/*
 * リンクの文字サイズを見出し（summary）に合わせる。
 *
 * リンクを大きくしているのはテーマのインラインCSS
 *   :root :where(.wp-block-navigation) { font-size: var(--wp--preset--font-size--medium) }
 * で、ナビゲーションブロックは内側の <ul> にも wp-block-navigation
 * クラスを付けて出力するため、nav だけ上書きしても ul から下に再適用される。
 * そのためナビ配下の要素すべてを inherit に倒して、summary と同じ
 * 継承サイズ（columns → details → 本文）に揃える。
 */
.footer-sp-accordion .wp-block-navigation,
.footer-sp-accordion .wp-block-navigation__container,
.footer-sp-accordion .wp-block-navigation-item,
.footer-sp-accordion .wp-block-navigation-item__content,
.footer-sp-accordion .wp-block-navigation-item__label {
  font-size: inherit !important;
}

/* =============================================
   PAGE INTERIORS
   ============================================= */

/* ------------------------------------------------------------
   パンくずリスト
   mu-plugins/mydoo-breadcrumb.php の [breadcrumb] が出力する
   マークアップに対応する。プラグイン側のインラインCSSは廃止し、
   スタイルはこのファイルで一元管理する。
   ------------------------------------------------------------ */
.mdp-breadcrumb {
  font-size: var(--text-sm, 0.75rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-text-3);
  margin: 0 0 var(--s-2);
}

.mdp-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.2em;
  margin: 0;
  padding: 0;
}

.mdp-breadcrumb__item {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* テーマ側の ::before による記号を打ち消す */
.mdp-breadcrumb__item::before {
  content: "";
  display: none;
}

/* 区切りの「＞」。sep 属性を指定した場合は文字区切りに切り替わる */
.mdp-breadcrumb:not(.mdp-breadcrumb--text-sep) .mdp-breadcrumb__item:not(:first-child)::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.4em;
  height: 0.4em;
  margin: 0 0.6em 0 0.4em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}

.mdp-breadcrumb__sep {
  margin: 0 0.5em;
  opacity: 0.55;
}

.mdp-breadcrumb__link {
  color: var(--c-accent);
  text-decoration: none;
}

.mdp-breadcrumb__link:hover {
  text-decoration: underline;
}

.mdp-breadcrumb__current {
  max-width: 100%;
  color: var(--c-text-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .mdp-breadcrumb__current {
    max-width: 14em;
  }
}

/* ============================================================
   ナビゲーション（商品カテゴリ）
   ============================================================ */


/* ── カテゴリアイテム（ホバードロップダウン付き） ── */
.nav-category {
  /* display: inline-block; */
  gap: 0px !important;
  padding: var(--sp-12) clamp(0px, 0.5vw, var(--sp-16));
  max-width: 100%;
  /* テーマの is-layout-flow による上部余白を打ち消す */
  margin-block-start: 0;
  margin-block-end: 0;
  margin-top: 0;
  /* 画面幅に応じて縮む。項目数が多くても1行に収める */
  font-size: clamp(var(--nav-font-min), var(--nav-font-scale), var(--nav-font-max));
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  list-style: none;
  transition: color var(--anim-dur);
}

.nav-category ul {
  color: inherit !important;
}

/*
 * ドロップダウンを本文より前面に出す。
 * 商品一覧のバッジ（.badge-new / .badge-popular）は z-index:2 を持ち、
 * DOM 上ではヘッダーより後ろにあるため、指定しないとバッジが上に来る。
 */
.nav-category {
  z-index: 60;
}

.nav-category .wp-block-navigation-submenu,
.nav-category .wp-block-navigation__submenu-container {
  z-index: 61;
}

/*
 * 文字サイズの上書き
 *
 * ナビゲーションブロックには has-medium-font-size が付いており、
 *   .has-medium-font-size { font-size: ... !important }
 * が効いているため、!important でないと clamp() が無視される。
 */
.nav-category.has-medium-font-size,
.nav-category .wp-block-navigation-item__content,
.nav-category .wp-block-navigation-item__label {
  font-size: clamp(var(--nav-font-min), var(--nav-font-scale), var(--nav-font-max)) !important;
}

/* 第1階層は折り返さず1行に収める（ドロップダウンは対象外） */
.nav-category>ul,
.nav-category>.wp-block-navigation__container {
  flex-wrap: nowrap !important;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
}

/*
 * 注意: .nav-category > ul に overflow（auto / hidden / scroll）を
 * 指定してはいけない。ドロップダウンは position:absolute で出るため、
 * 親に overflow が付くと切り抜かれてホバーしても見えなくなる。
 */
.nav-category>ul {
  overflow: visible;
}

/* 各項目は縮ませない（文字が途中で切れるのを防ぐ） */
.nav-category>ul>li {
  flex: 0 0 auto;
}


.nav-category li {
  padding: 0px clamp(var(--nav-pad-min), var(--nav-pad-scale), var(--nav-pad-max)) !important;
  border-left: 1px solid #ccc;
  color: inherit;
  white-space: nowrap;
}

.nav-category li:first-child {
  border-left: none;
  padding-left: 0;
  /* 左端の余白を詰めたい場合はこれも追加 */
}

/* カテゴリラベル */
.nav-category__label {
  /* ラベル自体はliの直接テキストコンテンツとして表現 */
}

/* ── ドロップダウンパネル ── */
.nav-category__dropdown {
  display: none;
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-default);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  border-radius: var(--radius-4);
  min-width: 200px;
}

.nav-category:hover .nav-category__dropdown {
  display: block;
}

.nav-category__dropdown-list {
  list-style: none;
  margin: 0;
  padding: var(--sp-8) 0;
  text-align: left;
}

/* ── ドロップダウン内リンク ── */
.nav-category__link {
  display: block;
  padding: var(--sp-8) var(--sp-16);
  font-size: var(--font-12);
  line-height: 1.5;
  color: var(--color-text-1);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--anim-dur);
}

.nav-category__link:hover {
  background-color: var(--color-bg-1-hover);
  text-decoration: underline;
  color: var(--color-text-1);
}

/* ── ドロップダウン（ナビゲーションブロック）は縮めない ── */
.nav-category .wp-block-navigation__submenu-container {
  font-size: var(--font-14);
}

.nav-category .wp-block-navigation__submenu-container li {
  padding: 0 !important;
  border-left: none;
}

.nav-category .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.nav-category .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  padding: var(--sp-8) var(--sp-16);
  /* 第1階層と違い、ドロップダウン内は読みやすさを優先して固定 */
  font-size: var(--font-14) !important;
  white-space: nowrap;
}

/* タブレット幅ではさらに詰める */
@media (min-width: 769px) and (max-width: 1100px) {
  .nav-category {
    --nav-font-min: 11px;
    --nav-pad-min: 3px;
    --nav-pad-scale: 0.5vw;
  }

  /* 区切り線の左右が詰まりすぎるので線だけ薄くする */
  .nav-category>ul>li {
    border-left-color: #e0e0e0;
  }
}

@media (max-width: 768px) {
  .nav-category {
    display: none;
  }
}

/* ===================================================
   ワードプレス関連　wp-
   =================================================== */

.wp-block-group {
  /* padding-top: 1rem;
  padding-bottom: 1rem; */
  /* border-bottom: 1px solid rgba(68, 68, 68, .08)  ; */
  margin-top: 0px;
}

/* 仕様／入稿原稿テンプレート／価格表など、枠線付きグループ間の間隔 */
.wp-block-group.has-border-color {
  margin-bottom: 24px;
}

/* 見出し・本文・テーブルなど中身全体が枠線に直接くっつかないよう内側に余白を確保 */
.wp-block-group.has-border-color>.wp-block-details {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.wp-site-blocks :focus:not(:focus-visible) {
  outline: none;
}


.top-main-slider {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  position: relative !important;
}

.top-main-slider .swiper,
.top-main-slider .swiper-container {
  overflow: visible !important;
  width: 100% !important;

}

.top-main-slider .swiper-wrapper {
  /* display: flex !important; */
  /* justify-content: center !important; */
  /* 💡JSの計算がズレても真ん中に引き戻す */
  /* width: auto !important; */
  /* 中央から左右にスライドを並べる */
  /* width: max-content !important; */
  /* JSが計算する巨大な横幅をリセット */
}

.top-main-slider .swiper-slide {
  width: 1280px !important;
  /* 画面幅の80%の大きさ */
  /* max-width: 1200px !important; */
  /* 💡1200px以上には絶対大きくしない */
  /* height: 450px !important;  */
  margin-left: 15px !important;
  margin-right: 15px !important;
}

.top-main-slider .swiper-slide img {
  width: 100% !important;
  /* height: 100% !important; */
  height: 450px !important;
  object-fit: cover !important;
}

/* [top_slider]（mu-plugins/mydoo-top-page.php）
   PC 用とスマホ用を両方出力し、1024px を境に片方だけ見せる。
   JS 側も同じ境目（MDTOP_BP_PC）で見えている方だけ Swiper を動かす */
.top-main-slider a,
.top-main-slider-sp a {
  display: block;
}

.top-main-slider-sp {
  display: none;
  width: 100%;
  overflow: hidden;
}

.top-main-slider-sp .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1023.98px) {
  .top-main-slider {
    display: none !important;
  }

  .top-main-slider-sp {
    display: block;
  }
}

.top-main-btn-wrap.is-layout-flex {
  gap: 1rem 10%;
}

.btn.top-main-btn {

  border-width: 5px !important;
  border-color: #ffe0d3 !important;
  height: 100%;
}

.top-main-btn .uagb-desc-text {
  font-size: clamp(0.5rem, 0.5vw + 0.15rem, 0.625rem);
}

.top-delivery-wrapper-container>.wp-block-columns-is-layout-flex {
  justify-content: space-between;
}

.top-delivery-wrapper-container {
  padding-left: 0px;
  padding-right: 0px;
}

.top-delivery-wrapper {
  container-type: inline-size;
  padding-left: 0px;
  padding-right: 0px;

}

.top-delivery-wrapper .wp-block-cover {
  padding-left: clamp(0.1rem, 8cqw, 5rem);

}

.top-delivery-wrapper.wp-block-column,
.top-delivery-wrapper.wp-block-column,
.top-delivery-wrapper.wp-block-column>a,
.top-delivery-wrapper.wp-block-column>a .has-aspect-ratio,
.top-delivery-wrapper .wp-block-cover,
.top-delivery-wrapper .wp-block-cover .has-aspect-ratio {

  aspect-ratio: 2.5/1;

  position: relative;
  /* width: clamp(375px, 8cqw, 420px);
  height: clamp(133.3px, 8cqw, 150px); */
  width: 100%;
  min-width: 375px;
  max-width: 375px;
  min-height: 150px;
}


/* .top-delivery-wrapper .wp-block-cover img {
  max-height: 150px;
  max-width: 420px;
} */


.top-delivery-wrapper .top-delivery-text {
  font-size: clamp(6px, 8cqw, 38px);
  margin-block-start: 0;

}

.top-delivery-wrapper .top-delivery-text-sub .uagb-desc-text {
  font-size: clamp(0.4rem, 4cqw, 0.825rem);

}


.top-important-notice h3 {
  padding: 0;
  align-content: center;
}


a.top-link {
  color: currentColor;
  text-decoration: underline;
}

.top-recommend-item .uagb-ifb-desc {
  color: var(--btn-primary-bg) !important;
}

/* ===================================================
   定番アイテム（現行HP common_renew.css 準拠）
   =================================================== */
/* 見出し：画像は279x80の原寸のまま左寄せ。オレンジ帯はCSSで描く */
.top-basic-item-title {
  margin: 0 0 1rem;
  padding-left: 0.5rem;
  text-align: left;
  background: linear-gradient(to bottom, transparent 40%, #f18d1a 40%);
}

.top-basic-item-title img {
  display: block;
  /* PCは原寸279px、狭い画面では画面幅の55%に縮小（375px幅で約206px） */
  width: min(279px, 55vw);
  max-width: 100%;
  height: auto;
}

.top-basic-items,
.top-basic-items.is-layout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
}

.top-basic-items a.wp-block-hyperlink-group,
.top-basic-items a.top-basic-item {
  display: block;
  color: inherit;
  text-decoration: none;
}

.top-basic-item {
  position: relative;
}

.top-basic-item__img {
  margin: 0;
}

.top-basic-item__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  transition: opacity 0.2s ease;
}

/* 商品名はサムネイル下端に重ねるグレー帯 */
.top-basic-item__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.5rem 0.5rem;
  background-color: rgba(91, 91, 91, 0.6);
  border-radius: 0 0 8px 8px;
  color: #fff;
  font-size: clamp(0.75rem, 0.6vw + 0.5rem, 0.875rem);
  line-height: 1.3;
  text-align: center;
}

.top-basic-item:hover .top-basic-item__img img {
  opacity: 0.6;
}

.top-basic-item:hover .top-basic-item__name {
  background-color: #a1a0a1;
}

@media (max-width: 767px) {

  .top-basic-items,
  .top-basic-items.is-layout-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
}

/*
 * VIEW ALL：全ての商品を見る導線
 *
 * 中央寄せ。
 * ボタン本体は Bootstrap の .btn（display:inline-block）なので、
 * margin-inline:auto では中央に寄らず左端に付いてしまう。
 * また hyperlink-group ブロックは環境によって
 *   a.wp-block-hyperlink-group > div.btn
 *   a.wp-block-tiptip-hyperlink-group-block.btn（aタグ自体が .btn）
 * の2通りに出力されるため、どちらでも効くよう列そのものを
 * フレックスにして中央に置く。
 */
.top-recommend-btn-wrapper .wp-block-column {
  display: flex;
  justify-content: center;
  /* 列の高さに合わせてボタンが縦に伸びないようにする */
  align-items: center;
  margin-left: 0;
  margin-right: 0;
}

.btn.top-reccomend-btn {
  width: fit-content;
  max-width: 100%;
  padding: 0.8rem 5.7rem;
}

.top-item-category .uagb-heading-text {
  color: var(--c-text);
}

/* ===================================================
   トップページ2　海テーマ拡張
   =================================================== */

:root {
  /* --top2-blue / --top2-blue-dark / --top2-blue-pale はヘッダーでも使うため site.css の :root に移動 */
  --top2-blue-line: #b9e0ef;
  --top2-cream: #fff6e2;
  --top2-cream-line: #f2cf7a;

  /* 波形セクション専用（要望画像に寄せた落ち着いたスチールブルー＋クリーム系プラーク） */
  --top2-wave-blue: #6f93b0;
  --top2-wave-row-bg: #dbe7f0;
  /* プラークはブランドのオレンジ（--btn-primary-bg）に合わせた色味で統一 */
  --top2-plaque-cream: #fffaf3;
  --top2-plaque-line: #eec0a3;
  --top2-plaque-text: #e8845a;
  --top2-plaque-text-2: #8b7a6c;
}

/* CTAボタン：ピル型・オレンジ×ブルー */
.btn.top-main-btn.btn-outline-secondary {
  border-color: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-bg) !important;
}

.btn.top-main-btn.btn-outline-secondary:hover,
.btn.top-main-btn.btn-outline-secondary:focus {
  background-color: var(--top2-blue-pale) !important;
  border-color: var(--btn-secondary-hover) !important;
  color: var(--btn-secondary-hover) !important;
}


/* ピル両サイドの二重丸アイコン */


@media (max-width: 480px) {

  .top-delivery-pill.is-layout-flex::before,
  .top-delivery-pill.is-layout-flex::after {
    display: none;
  }
}

.top-delivery-wrapper-container {
  text-align: center;
}


/* 重要なお知らせ → キャンペーンバナー＋ニュースリスト */
.top-important-notice-wrapper.is-layout-constrained {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}


.top-news-list {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
}

.top-news-item.is-layout-flex {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  padding: 0.7rem 1.2rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-white);
}

.top-news-item:last-child {
  border-bottom: none;
}

.top-news-item__date {
  font-size: 0.75rem;
  color: var(--c-text-3);
  white-space: nowrap;
}

.top-news-item__tag {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
}

.top-news-item__tag [href*="/category/event/"] {
  background: var(--top2-blue-pale);
  color: var(--top2-blue-dark);
  padding: 0.15rem 0.6rem;
}

.top-news-item__tag [href*="/category/delivery/"] {
  background: var(--btn-success-bg);
  color: #fff;
  padding: 0.15rem 0.6rem;
}

.top-news-item__tag [href*="/category/important/"] {
  background: var(--btn-danger-bg);
  color: #fff;
  padding: 0.15rem 0.6rem;
}

.top-news-item__link {
  font-size: 0.8rem;
  color: var(--c-text);
  text-decoration: underline;
}

/* おすすめ商品セクション：海テーマ背景＋プラーク見出し */
.top-recommend-section {
  padding-top: 0 !important;
  padding-bottom: var(--s-4) !important;
}

.top-items-plaque {
  display: block;
  width: fit-content;
  margin: 0 auto var(--s-3);
  padding: 1.1rem 3.2rem;
  background:
    radial-gradient(circle 5px at 14px 14px, var(--top2-plaque-line) 98%, transparent 100%),
    radial-gradient(circle 5px at calc(100% - 14px) 14px, var(--top2-plaque-line) 98%, transparent 100%),
    radial-gradient(circle 5px at 14px calc(100% - 14px), var(--top2-plaque-line) 98%, transparent 100%),
    radial-gradient(circle 5px at calc(100% - 14px) calc(100% - 14px), var(--top2-plaque-line) 98%, transparent 100%),
    var(--top2-plaque-cream);
  border: 2px dashed var(--top2-plaque-line);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(63, 30, 18, 0.06);
  text-align: center;
}

.top-items-plaque .uagb-desc-text {
  display: block;
  text-align: center;
  letter-spacing: 0.14em;
  color: var(--top2-plaque-text-2) !important;
}

.top-items-plaque .uagb-heading-text {
  text-align: center;
  color: var(--top2-plaque-text) !important;
}

/* 商品カード：白背景の角丸カード風 */
.top-recommend-item .info-box {
  background: #fff;
  border-radius: 14px;
  padding: 0.8rem 0.8rem 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.top-recommend-item .uagb-ifb-desc {
  line-height: 1.3;
  margin-bottom: 0;
}

.top-recommend-item .info-box:hover {
  transform: translateY(-3px);
  /* box-shadow: 0 6px 16px rgba(61, 143, 196, 0.18); */
}

/* サムネイルはパッと見で8点すべてが視界に入るサイズに抑える */
.top-recommend-item .uagb-ifb-image-content {
  max-width: 200px;
  margin-inline: auto;
}

.top-recommend-item .uagb-ifb-image-content img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/*
 * メインの遷移ボタンではないので、塗りつぶしにはせず淡い枠線のまま。
 * ただし枠と文字が薄すぎて埋もれていたため、
 *   枠  --top2-blue-line (#b9e0ef) → --top2-blue (#3d8fc4)
 *   文字 --top2-wave-blue (#6f93b0) → --top2-blue-dark (#256a99)
 * と一段濃くし、枠を2pxにして輪郭を出している。
 */
.btn.top-reccomend-btn {
  background-color: var(--c-bg) !important;
  border-color: var(--top2-blue) !important;
  color: var(--top2-blue-dark) !important;
  border-width: 2px !important;
  box-shadow: 0 2px 8px rgba(61, 143, 196, .18);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn.top-reccomend-btn:hover,
.btn.top-reccomend-btn:focus {
  background-color: var(--top2-blue-pale) !important;
  border-color: var(--top2-blue-dark) !important;
  color: var(--top2-blue-dark) !important;
  box-shadow: 0 4px 12px rgba(61, 143, 196, .28);
  transform: translateY(-2px);
}

.btn.top-reccomend-btn .uagb-heading-text,
.btn.top-reccomend-btn .uagb-desc-text {
  color: inherit !important;
}

.btn.top-reccomend-btn .uagb-heading-text {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.btn.top-reccomend-btn .uagb-desc-text {
  /* 以前は Spectra の見出しブロックの設定で指定していた。
     日本語の文字は Abhaya Libre に無いので、ブラウザ既定の書体で出る（Spectra のころと同じ見え方） */
  font-family: "Abhaya Libre";
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* 押せることが分かるようにフォーカスリングを残す */
.btn.top-reccomend-btn:focus-visible {
  outline: 3px solid var(--top2-blue-line);
  outline-offset: 2px;
}

/* カテゴリピルボタン：シンプル白丸 */
.top-item-category .btn.btn-outline-light {
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
  background: #fff !important;
}

.top-item-category .btn.btn-outline-light:hover,
.top-item-category .btn.btn-outline-light:focus {
  background: var(--top2-blue-pale) !important;
  border-color: var(--top2-blue) !important;
  color: var(--top2-blue-dark) !important;
}

@media (max-width: 767px) {
  .top-campaign-banner__link {
    flex-direction: column;
    gap: 0.4rem;
  }

  .top-news-item.is-layout-flex {
    flex-wrap: wrap;
  }
}

/* SNS・お知らせ導線ボックス（LINE / X / 同人イベント支援 / お問い合わせ窓口） */
.top-info-boxes.is-layout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: var(--s-4) 0;
}

.top-info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.2rem 1rem;
  border: 1px solid var(--top2-blue-line);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.top-info-box:hover {
  box-shadow: 0 6px 16px rgba(61, 143, 196, 0.14);
  transform: translateY(-2px);
}


.top-info-box__caption {
  font-size: 0.65rem;
  color: var(--c-text-3);
}

.top-info-box__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.5;
}

.top-info-box__highlight {
  color: var(--btn-primary-bg);
}

@media (max-width: 767px) {
  .top-info-boxes.is-layout-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* はじめてガイド／お受けできないジャンル（埋め込みバナー画像） */
.top-guide-boxes.is-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.top-guide-box {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--top2-blue-pale);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.top-guide-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(61, 143, 196, 0.15);
}

.top-guide-box__img {
  width: 100%;
}

.top-guide-box__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 260;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .top-guide-boxes.is-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* サイト紹介（SEO 用の本文。パターン「トップページ：サイト紹介」） */
.top-about {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  color: #555;
  font-size: 0.875rem;
  line-height: 1.8;
}

.top-about__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.125rem, 1vw + 0.9rem, 1.5rem);
  text-align: center;
}

.top-about__lead {
  text-align: center;
}

.top-about__heading {
  margin: 1.5rem 0 0.5rem;
  padding-left: 0.6rem;
  border-left: 4px solid #f18d1a;
  font-size: 1rem;
}

/* 波形区切り＋注目アイテムセクション（フッター手前） */
/* WPの保存・再エクスポートで生のSVG/HTMLタグが削除されてしまうため、
   波形は追加要素なしのCSSのみ（radial-gradientの繰り返し）で表現する */
.top-wave-section {
  position: relative;
  background: var(--top2-wave-blue);
  padding-top: 40px;
  padding-bottom: var(--s-8);
  margin-top: 30px;
}

.top-wave-section__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  color: var(--top2-wave-blue);
  transform: translateY(-99%);
}

.top-wave-section__wave svg {
  display: block;
  width: 100%;
  height: 60px;
}

.top-wave-section__inner {
  position: relative;
}

/* ニュースリストも要望画像に寄せて、行ごとに分離した淡いブルーグレーの帯に */
.top-wave-section .top-news-list {
  max-width: 960px;
  margin: var(--s-4) auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.top-wave-section .top-news-item.is-layout-flex {
  background: var(--top2-wave-row-bg);
  border-bottom: none;
  border-radius: 8px;
}

.top-wave-section .top-news-item__tag[href*="/category/event/"] {
  background: var(--btn-primary-bg);
  color: #fff;
  font-weight: 700;
}

.top-wave-section .top-news-item__tag[href*="/category/delivery/"] {
  background: var(--btn-success-bg);
  color: #fff;
  font-weight: 700;
}

.top-wave-section .top-news-item__tag[href*="/category/important/"] {
  background: var(--btn-danger-bg);
  color: #fff;
  font-weight: 700;
}

@media (max-width: 767px) {
  .top-wave-section__wave svg {
    height: 32px;
  }
}

/* ===================================================
   スマホ向けの設定（画面幅が 768px 以下のとき）
   =================================================== */
@media (max-width: 768px) {
  .wp-block-cover {
    min-height: unset !important;
    height: auto !important;
    aspect-ratio: 700 / 277;
  }

  .wp-block-cover__image-background {
    object-fit: contain !important;
  }

  .top-main-slider .swiper-slide img {
    width: 100% !important;
    /* max-width: 100% !important; */
    height: 250px !important;
    object-fit: cover !important;

  }

  .top-main-btn-wrap,
  .top-important-notice-wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* スマホの場合、2列表示にする */
  .wp-block-columns.res-2x2-grid {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .wp-block-columns.res-2x2-grid>.wp-block-column {
    flex-basis: calc(50% - 4px) !important;
    flex-grow: 0 !important;
    margin-bottom: 6px !important;
    /* 縦の隙間（狭め） */
  }

  /* WPプリセットの大きい余白（var:preset|spacing|70/50）をスマホでは詰める */
  :root {
    --wp--preset--spacing--70: 32px;
    --wp--preset--spacing--50: 8px;
  }

  /* 予定日ピルの上に隙間を追加 */
  .top-delivery-wrapper-container {
    margin-top: 20px;
  }

  /* おすすめ商品の行間をさらに詰める */
  .top-recommend-item.wp-block-columns.res-2x2-grid {
    margin-bottom: 0 !important;
  }

  /* VIEW ALLボタンが小さく崩れる問題を修正し、上部の作成ボタンと幅を揃える */
  .top-recommend-btn-wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .top-recommend-btn-wrapper .wp-block-column {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .btn.top-reccomend-btn {
    padding: 0.8rem 2.2rem !important;
  }
}

/* 親要素：3つの列を作る（左右の余白、中央のコンテンツ幅） */
/* ============================================================
   商品ページ 商品名横のお気に入りリンク
   ============================================================ */
.product-favorite,
.product-favorite a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--c-accent-2) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

/* ============================================================
   商品ページ 注文エリア（価格サマリー・簡単シミュレーター誘導・
   お気に入り・注文/入稿ガイドリンク等）
   ============================================================ */
.order-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.kakaku-summary {
  display: flex;
  gap: var(--s-1);
}

.kakaku-summary__item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0.5rem 0.25rem;
  background: var(--c-surface);
  border-radius: 8px;
}

.kakaku-summary__kosu {
  display: block;
  font-size: 0.75rem;
  color: var(--c-text-2);
  margin-bottom: 0.15rem;
}

.kakaku-summary__price {
  display: block;
  font-size: clamp(1rem, 1vw + 0.7rem, 1.35rem);
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
}

/* 値引き中: 元の単価を小さく消し、値引き後の単価を赤に（KakakuList の値引き表示と同じ色） */
.kakaku-summary__orig {
  display: block;
  font-size: 0.75rem;
  color: #a8a8a8;
  text-decoration: line-through;
}

.kakaku-summary__price.is-nebiki {
  color: #e50012;
}

.order-nouki {
  font-size: 0.75rem;
  color: var(--c-text-2);
  margin: 0;
}

.order-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.order-links a.wp-block-hyperlink-group,
.order-links__item,
.order-links__item a {
  text-decoration: underline !important;
  color: inherit;
}

.uag-hide-desktop.uag-hide-tab .order-links {
  align-items: center;
}

.uag-hide-desktop.uag-hide-tab .order-links__item p {
  justify-content: center;
}

.dl-fallback-link {
  font-size: 0.7rem !important;
  color: var(--c-text-2);
  margin-top: 0 !important;
}

.order-links__item {
  font-size: 0.8rem;
  color: var(--c-text);
}

.order-links__item p {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
}

.order-links__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  line-height: 1;
}

.order-links__icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================================
   よくある質問（FAQ）ページ
   ============================================================ */
.faq-page {
  padding: var(--s-6) clamp(var(--s-2), 4vw, var(--s-6));
}

.faq-page__title {
  text-align: center;
  margin-bottom: 0;
}

.faq-page__title::after {
  content: "";
  display: block;
  width: 72px;
  margin: var(--s-3) auto 0;
  border-bottom: 2px solid var(--btn-primary-bg);
}


.faq-section .wp-block-heading {
  margin: var(--s-6) 0 var(--s-2);
  padding-left: var(--s-2);
  font-size: 1.05rem;
  border-left: 4px solid var(--btn-primary-bg);
}

.faq-section:first-of-type .wp-block-heading {
  margin-top: var(--s-2);
}

.faq-item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(63, 30, 18, 0.06);
  margin-bottom: var(--s-2);
  overflow: hidden;
}

/* site.css の summary 共通指定（角丸15px・下余白1rem）を打ち消す。
   角は .faq-item の角丸と overflow:hidden で切り取るので、
   閉じているときは外枠の角とずれず、開いたときは説明との境目がまっすぐになる */
.faq-item .faq-item__q {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  border-radius: 0;
  padding: var(--s-2) var(--s-3);
  font-weight: 700;
  font-size: clamp(0.85rem, 1vw + 0.4rem, 0.95rem);
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}

.faq-item .faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item .faq-item__q::marker {
  display: none;
}

.faq-item .faq-item__q::before {
  content: "Q";
  flex: 0 0 auto;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--btn-primary-bg);
}

.faq-item .faq-item__q::after {
  content: "+";
  flex: 0 0 auto;
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--c-text-3);
  border: none;
  transform: none;
}

.faq-item[open] .faq-item__q::after {
  content: "−";
}

/* 上の余白は、これまで summary の下余白（1rem）が担っていた分 */
.faq-item .faq-item__a {
  padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 1.2em);
  color: var(--c-text-2);
  font-size: clamp(0.75rem, 0.8vw + 0.35rem, 0.875rem);
}

.faq-item .faq-item__a table {
  margin: var(--s-1) 0;
}

.faq-page__back-to-top {
  color: var(--c-text-2);
}

/* ============================================================
   お知らせ一覧ページ
   ============================================================ */
.news-list-page {
  padding: var(--s-6) clamp(var(--s-2), 4vw, var(--s-6));
}

.news-list-page__title {
  text-align: center;
  margin-bottom: 0;
}

.news-list-page__list {
  margin-top: var(--s-4);
}

.news-list-page__list .wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}

.news-list-page__list .wp-block-post-template>li {
  margin: 0;
  list-style: none;
}

.news-list-page__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--s-5, 2rem);
  font-size: 0.85rem;
}

.news-list-page__pagination a,
.news-list-page__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.25rem;
  border-radius: 6px;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.news-list-page__pagination a:hover {
  color: var(--btn-primary-bg);
  background: var(--top2-blue-pale);
}

.news-list-page__pagination .current {
  background: none;
  color: var(--btn-primary-bg);
  font-weight: 700;
}

/* ============================================================
   よくある質問ページ内 簡易チャットボット（定型ボタン式）
   ============================================================ */
.faq-chatbot {
  position: fixed;
  /* back-to-top（right: var(--s-3), bottom: var(--s-3), height 44px）の真上に重ねて表示する */
  right: var(--s-3);
  bottom: calc(var(--s-3) + 44px + var(--s-1));
  z-index: 1200;
  font-family: var(--f-sans);
}

.faq-chatbot__toggle {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: var(--radius-oval);
  background: var(--btn-primary-bg);
  color: var(--c-white);
  box-shadow: 0 6px 18px rgba(63, 30, 18, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.faq-chatbot__toggle:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-2px);
}

.faq-chatbot__panel {
  position: absolute;
  right: 0;
  bottom: calc(56px + var(--s-2));
  width: min(408px, 92vw);
  height: min(760px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(63, 30, 18, 0.24);
  overflow: hidden;
}

.faq-chatbot__panel[hidden] {
  display: none;
}

.faq-chatbot__header {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2);
  background: var(--c-accent-2);
  color: var(--c-white);
  flex: 0 0 auto;
}

.faq-chatbot__avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-oval);
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.faq-chatbot__avatar svg {
  width: 26px;
  height: auto;
}

.faq-chatbot__header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.faq-chatbot__header-name {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.faq-chatbot__header-sub {
  display: block;
  font-size: 0.65rem;
  opacity: 0.85;
}

.faq-chatbot__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.faq-chatbot__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.faq-chatbot__msg {
  max-width: 88%;
  padding: var(--s-1) var(--s-2);
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.7;
}

.faq-chatbot__msg--bot {
  align-self: flex-start;
  background: var(--c-surface);
  color: var(--c-text);
  border-bottom-left-radius: 4px;
}

.faq-chatbot__msg--bot table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  font-size: 0.75rem;
  margin: var(--s-1) 0;
}

.faq-chatbot__msg--bot img {
  max-width: 100%;
  height: auto;
}

.faq-chatbot__msg--user {
  align-self: flex-end;
  background: var(--btn-primary-bg);
  color: var(--c-white);
  border-bottom-right-radius: 4px;
}

.faq-chatbot__search-wrap {
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-2) 0;
}

.faq-chatbot__search {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-oval);
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--c-text);
}

.faq-chatbot__search:focus {
  outline: 2px solid var(--btn-primary-bg);
  outline-offset: 1px;
}

.faq-chatbot__quick-replies {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-2);
  border-top: 1px solid var(--c-border);
}

.faq-chatbot__chip {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid var(--btn-primary-border);
  background: var(--c-white);
  color: var(--c-accent-2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.faq-chatbot__chip:hover {
  background: var(--btn-primary-bg);
  color: var(--c-white);
}

.faq-chatbot__chip--back {
  border-style: dashed;
  color: var(--c-text-2);
}

.faq-chatbot__chip--back:hover {
  background: var(--c-surface);
  color: var(--c-text);
}

.faq-chatbot__no-result {
  color: var(--c-text-3);
  font-size: 0.8rem;
  padding: var(--s-1) 0;
}

@media (max-width: 600px) {
  .faq-chatbot {
    right: var(--s-2);
    bottom: calc(var(--s-2) + 44px + var(--s-1));
  }

  .faq-chatbot__toggle {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .faq-chatbot__panel {
    bottom: calc(48px + var(--s-2));
    width: 90vw;
    height: 65vh;
  }
}

/* ============================================================
   コンテンツページ共通パーツ（注意書き・強調・インラインボタン）
   ============================================================ */
.alert-box,
.information-box {
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  border-radius: 10px;
  font-size: clamp(0.8rem, 0.6vw + 0.4rem, 0.9rem);
  line-height: 1.8;
}

.alert-box {
  background: #FDECE8;
  border: 1px solid #E8B3A2;
  color: #A33E3E;
  font-weight: 700;
}

.information-box {
  background: var(--c-surface);
  border-left: 4px solid var(--c-accent);
  color: var(--c-text-2);
}

.marker-under {
  background: linear-gradient(transparent 65%, var(--or-100, #FDDCC8) 65%);
  font-weight: 700;
}

.square_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--btn-primary-bg);
  border-radius: 9999px;
  color: var(--btn-primary-bg);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.square_btn:hover,
.square_btn:focus {
  background: var(--btn-primary-bg);
  color: var(--c-white);
}

/* ============================================================
   ご利用ガイドページ
   ============================================================ */
.guide-page {
  padding: var(--s-6) clamp(var(--s-2), 4vw, var(--s-6));
}

.guide-page__title {
  text-align: center;
  margin-bottom: 0;
}

.guide-page__title::after {
  content: "";
  display: block;
  width: 72px;
  margin: var(--s-3) auto 0;
  border-bottom: 2px solid var(--btn-primary-bg);
}

.guide-page__lead {
  text-align: center;
  color: var(--c-text-2);
}

.guide-page__back-to-top,
.guide-page__publish {
  color: var(--c-text-2);
}

.guide-quicknav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1);
}

.guide-quicknav__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  color: var(--c-text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.guide-quicknav__item:hover,
.guide-quicknav__item:focus {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--c-white);
}

.guide-quicknav__item:hover .guide-quicknav__num,
.guide-quicknav__item:focus .guide-quicknav__num {
  color: var(--c-white);
}

.guide-quicknav__num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--btn-primary-bg);
}

.guide-quicknav__item--active {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--c-white);
}

.guide-quicknav__item--active .guide-quicknav__num {
  color: var(--c-white);
}

/* 子ページの前後リンク */
.guide-page-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}

.guide-section .wp-block-heading {
  margin: var(--s-6) 0 var(--s-2);
  padding-left: var(--s-2);
  font-size: 1.05rem;
  border-left: 4px solid var(--btn-primary-bg);
}

.guide-section:first-of-type .wp-block-heading {
  margin-top: var(--s-2);
}

.guide-section__lead {
  color: var(--c-text-2);
}

/* 説明文の右側に「詳しく見る」ボタンを配置（幅が狭いときは折り返す） */
.guide-section__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.guide-section__row .guide-section__lead {
  flex: 1 1 22rem;
  margin: 0;
}

.guide-section__row .guide-section__action {
  flex: 0 0 auto;
  margin: 0;
}

.guide-section__note {
  margin-top: var(--s-3);
  color: var(--c-text-2);
}

/* 関連ページへのリンク一覧（配送について → ご注文方法の各項目） */
.guide-section__links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-1);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.guide-section__links a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 100%;
  padding: 0.75em 1em;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-white);
  color: var(--c-text);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.guide-section__links a::after {
  content: '→';
  margin-left: auto;
  color: var(--btn-primary-bg);
}

.guide-section__links a:hover {
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-bg);
}

/* セクションの中に置いた目次（決済方法について）は、前後の文章・カードと間をあける */
.guide-section>.howto-toc {
  margin: var(--s-3) 0;
}

/* アンカーで飛んだとき、見出しが追従目次バーの下に隠れないようにする（.howto-page と同じ） */
.guide-page [id] {
  scroll-margin-top: calc(var(--toc-bar-top, 0px) + var(--toc-bar-h, 0px) + var(--s-2));
}

/* ステップフロー（ご注文方法・原稿作成ガイド） */
.guide-steps {
  position: relative;
  margin: var(--s-3) 0;
  padding: 0;
  list-style: none;
}

.guide-step {
  position: relative;
  display: flex;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  padding-left: 0;
}

.guide-step:last-child {
  padding-bottom: 0;
}

.guide-step::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 17px;
  bottom: -4px;
  width: 2px;
  background: var(--c-border);
}

.guide-step:last-child::before {
  display: none;
}

.guide-step__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-oval);
  background: var(--btn-primary-bg);
  color: var(--c-white);
  font-weight: 700;
  z-index: 1;
}

.guide-step__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.5rem;
  color: var(--c-text);
  font-size: clamp(0.85rem, 0.6vw + 0.4rem, 0.95rem);
}

.guide-step__body p {
  margin: 0 0 var(--s-1);
}

.guide-step__body .information-box {
  margin-top: var(--s-1);
}

/* 決済カード */
.guide-payment {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.guide-payment-method {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(63, 30, 18, 0.06);
  padding: var(--s-3);
}

.guide-payment-method__title {
  margin: 0 0 var(--s-1);
  color: var(--c-accent-2);
  font-size: 1rem;
}

.guide-payment-method__subtitle {
  font-weight: 700;
}

.guide-payment-method__logo img {
  max-width: 260px;
  height: auto;
}

.guide-payment-method h4 {
  margin: var(--s-3) 0 var(--s-1);
  font-size: 0.9rem;
  color: var(--c-accent-2);
}

.guide-payment-method ul {
  list-style: disc;
  margin: 0 0 var(--s-2);
  padding-left: 1.2em;
  color: var(--c-text-2);
  font-size: clamp(0.8rem, 0.6vw + 0.4rem, 0.9rem);
}

.guide-payment-method ul li {
  margin-bottom: 0.4em;
}

/* テーブル共通 */
.guide-table-scroll {
  overflow-x: auto;
  margin: var(--s-2) 0;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.75rem, 0.6vw + 0.35rem, 0.875rem);
}

.guide-table th,
.guide-table td {
  padding: 0.6em 0.9em;
  border: 1px solid var(--c-border);
  text-align: center;
  white-space: nowrap;
}

.guide-table--kv th {
  width: 8em;
  background: var(--c-surface);
  white-space: nowrap;
}

.guide-table--kv td {
  text-align: left;
  white-space: normal;
}

.guide-table--stripe thead th {
  background: var(--c-accent-2);
  color: var(--c-white);
}

.guide-table--stripe tbody tr:nth-child(even) {
  background: var(--c-surface);
}

.guide-table--region {
  min-width: 900px;
}

.guide-table--region thead tr:first-child th {
  background: var(--c-accent-2);
  color: var(--c-white);
}

.guide-table--region thead tr:last-child th,
.guide-table--region tbody th {
  background: var(--c-surface);
}

.guide-table--region td {
  white-space: normal;
}

/* 配送時間指定 */
.guide-time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}

.guide-time-slot {
  padding: 0.5rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  color: var(--c-text);
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .guide-quicknav__item {
    font-size: 0.8rem;
    padding: 0.5rem 0.9rem;
  }

  .guide-payment-method {
    padding: var(--s-2);
  }
}

/* ============================================================
   コンテンツページ共通パーツ（追加分）
   ============================================================ */
.bold-red {
  color: #A33E3E;
  font-weight: 700;
}

.square_btn2 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--c-border);
  border-radius: 9999px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.square_btn2:hover,
.square_btn2:focus {
  background: var(--c-surface-2);
  border-color: var(--c-text-3);
  color: var(--c-text);
}

/* ============================================================
   howto 系ページ共通スタイル

   対象ページ
     ・PSDファイルでの原稿作成方法（基本）
     ・商品ごとの原稿作成方法
     ・スマホ・タブレットでの原稿作成についての補足
     ・MYDOOの印刷仕様について
     ・制作をお断りするデータについて

   site.css の該当ブロック（見出しコメント
   「データの作り方（原稿作成マニュアル）ページ」から
   .howto-section img.alignright の @media ブロックまで）を、
   このファイルの内容で丸ごと置き換えてください。
   .red / .strike / .scrolltable 以降はそのまま残します。

   構成
     1. ページ全体
     2. 目次
     3. 見出しとセクション
     4. 本文と図版のレイアウト
     5. 注意書き（必須 / 注意 / 補足）
     6. 冒頭の3ステップ導線
     7. 短い注意事項の2カラム
     8. 入稿前チェックリスト
     9. ボタンと固定ナビ
    10. アクセシビリティ
    11. 印刷
   ============================================================ */


/* ============================================================
   1. ページ全体
   ============================================================ */
.howto-page {
  padding: var(--s-6) clamp(var(--s-2), 4vw, var(--s-6));
  counter-reset: howto-step;
}

.howto-page__title {
  text-align: center;
  margin-bottom: 0;
}

.howto-page__title::after {
  content: "";
  display: block;
  width: 72px;
  margin: var(--s-3) auto 0;
  border-bottom: 2px solid var(--btn-primary-bg);
}

.howto-page__back-to-top {
  color: var(--c-text-2);
}

/* アンカーで飛んだとき、見出しが追従目次バー（2-2）の下に隠れないようにする
   （--toc-bar-h は site.js がバーを作ったときに入れる。バーのないページは 0） */
.howto-page [id] {
  scroll-margin-top: calc(var(--toc-bar-top, 0px) + var(--toc-bar-h, 0px) + var(--s-2));
}


/* ============================================================
   2. 目次
   PCは開いた状態、スマホは閉じた状態が初期値（HTML側で制御）
   ============================================================ */
.howto-toc {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(63, 30, 18, 0.06);
  padding: var(--s-2) var(--s-3);
}

.howto-toc__summary {
  cursor: pointer;
  padding: 0.2em 0;
  color: var(--c-text);
  font-size: 0.95rem;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.howto-toc__summary::-webkit-details-marker {
  display: none;
}

.howto-toc__summary:hover {
  color: var(--btn-primary-bg);
}

/* 見出し左のアクセントバー */
.howto-toc__summary::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.1em;
  background: var(--btn-primary-bg);
  border-radius: 2px;
}

/* 開閉インジケータ */
.howto-toc__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5em;
  height: 0.5em;
  margin-left: auto;
  border-right: 2px solid var(--c-text-3);
  border-bottom: 2px solid var(--c-text-3);
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform var(--dur) var(--ease);
}

.howto-toc[open] .howto-toc__summary::after {
  transform: rotate(-135deg);
}

/* 閉じているときに中身の量を示す */
.howto-toc__count {
  margin-left: 0.6em;
  color: var(--c-text-3);
  font-size: 0.78rem;
  font-weight: 400;
}

.howto-toc__list {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-border);
  font-size: clamp(0.8rem, 0.6vw + 0.4rem, 0.9rem);
}

.howto-toc__list ol {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* グリッドと番号のカウンタは第1階層のみ。
   入れ子の ol にも掛かると階層ごとに番号が振り直されてしまう */
.howto-toc__list>ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.1rem var(--s-3);
  counter-reset: toc;
}

/* 子を持つ項目は全カラムを使い、親子が分断されないようにする */
.howto-toc__list>ol>li:has(ol) {
  grid-column: 1 / -1;
}

/* 入れ子は縦積み + 字下げに戻す */
.howto-toc__list ol ol {
  display: block;
  grid-template-columns: none;
  counter-reset: none;
  margin: 0.1rem 0 0.4rem;
  padding-left: 1.6em;
}

/* :has() 非対応ブラウザでは1カラムに落とす */
@supports not selector(:has(*)) {
  .howto-toc__list>ol {
    display: block;
  }
}

.howto-toc__list li {
  margin: 0;
}

/* 番号のカウントは第1階層のみ。
   入れ子の li も数えると「1」の次が「8」のようにずれる */
.howto-toc__list>ol>li {
  counter-increment: toc;
}

.howto-toc__list ol ol li {
  counter-increment: none;
}

.howto-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.45em 0.5em;
  border-radius: 8px;
  color: var(--c-text-2);
  text-decoration: none;
  line-height: 1.5;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* 番号は CSS カウンタで描画（list-style を消しているため） */
.howto-toc__list a::before {
  content: counter(toc);
  flex: 0 0 1.7em;
  height: 1.7em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border-radius: 50%;
  color: var(--c-accent-2);
  font-size: 0.75em;
  font-weight: 700;
}

.howto-toc__list a:hover,
.howto-toc__list a:focus-visible {
  background: var(--c-surface);
  color: var(--c-text);
}

.howto-toc__list a:hover::before,
.howto-toc__list a:focus-visible::before {
  background: var(--btn-primary-bg);
  color: var(--c-white);
}

/* 第2階層以降は番号を出さず、字下げと短い線で階層を示す */
.howto-toc__list ol ol a {
  gap: 0.5em;
  padding: 0.3em 0.5em;
  font-size: 0.94em;
}

.howto-toc__list ol ol a::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5em;
  height: 2px;
  margin-top: 0.7em;
  background: var(--c-text-3);
  border-radius: 1px;
}

.howto-toc__list ol ol a:hover::before,
.howto-toc__list ol ol a:focus-visible::before {
  background: var(--btn-primary-bg);
}

.howto-toc__list ol ol ol {
  padding-left: 1.2em;
}

.howto-toc__list ol ol ol a {
  font-size: 0.9em;
  color: var(--c-text-3);
}


/* ------------------------------------------------------------
   2-2. 追従目次バー
   .toc-bar は site.js が .howto-toc から作り、body の末尾に置く
   ・元の目次が画面の上に流れたら、画面上部に出す
   ・PC：大見出し（h2）を横一列に並べ、入りきらない分は横スクロール
   ・スマホ：表示中の大見出しだけを出し、タップで目次全体を開く
   ・ヘッダーは固定ではないので画面の最上部に出す（ログイン中は WP 管理バーの下）
   ------------------------------------------------------------ */
body {
  --toc-bar-top: 0px;
}

body.admin-bar {
  --toc-bar-top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --toc-bar-top: 46px;
  }
}

/* 600px 以下は管理バーが固定されず一緒に流れる */
@media (max-width: 600px) {
  body.admin-bar {
    --toc-bar-top: 0px;
  }
}

.toc-bar {
  position: fixed;
  top: var(--toc-bar-top);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 2px 8px rgba(63, 30, 18, 0.08);
  transform: translateY(calc(-100% - var(--toc-bar-top) - 8px));
  visibility: hidden;
  transition: transform 0.25s var(--ease), visibility 0s linear 0.25s;
}

.toc-bar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 0.25s var(--ease);
}

.toc-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  max-width: 1000px;
  height: 52px;
  margin: 0 auto;
  padding: 0 var(--s-2);
}

.toc-bar__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 36px;
  padding: 0 1em;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.toc-bar__toggle::after {
  content: '';
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.toc-bar__toggle[aria-expanded="true"]::after {
  transform: translateY(25%) rotate(-135deg);
}

.toc-bar__current {
  display: none;
}

/* 端は少しぼかして、横に続きがあることを見せる */
.toc-bar__chips {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.25rem;
  padding-inline: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

.toc-bar__chips::-webkit-scrollbar {
  display: none;
}

.toc-bar .toc-bar__chip {
  flex: none;
  max-width: 16em;
  padding: 0.45em 0.9em;
  overflow: hidden;
  border-radius: 999px;
  color: var(--c-text-2);
  font-size: 0.85rem;
  line-height: 1.4;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.toc-bar .toc-bar__chip:hover {
  background: var(--c-surface);
  color: var(--c-text);
}

.toc-bar .toc-bar__chip.is-active {
  background: var(--btn-primary-bg);
  color: #fff;
  font-weight: 700;
}

/* 目次全体（バーのすぐ下に開く） */
.toc-bar__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--toc-bar-top) - var(--toc-bar-h, 52px) - 24px);
  max-height: calc(100dvh - var(--toc-bar-top) - var(--toc-bar-h, 52px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 10px 20px rgba(63, 30, 18, 0.12);
}

.toc-bar__panel[hidden] {
  display: none;
}

.toc-bar__list {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--s-1) var(--s-2) var(--s-2);
}

.toc-bar__list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc-bar__list ol ol {
  padding-left: 1em;
}

.toc-bar__list>ol>li+li {
  border-top: 1px dashed var(--c-border);
}

.toc-bar .toc-bar__list a {
  display: block;
  padding: 0.55em 0.75em;
  border-radius: 8px;
  color: var(--c-text);
  font-size: 0.9rem;
  line-height: 1.5;
  text-decoration: none;
}

.toc-bar .toc-bar__list>ol>li>a {
  font-weight: 700;
}

.toc-bar .toc-bar__list ol ol a {
  padding-block: 0.4em;
  color: var(--c-text-2);
  font-size: 0.85rem;
}

.toc-bar .toc-bar__list a:hover {
  background: var(--c-surface);
}

.toc-bar .toc-bar__list a.is-active {
  background: color-mix(in srgb, var(--btn-primary-bg) 12%, #fff);
  color: var(--btn-primary-bg);
  font-weight: 700;
}

@media (max-width: 767px) {

  /* スマホはボタンを横幅いっぱいにして、表示中の大見出しを出す */
  .toc-bar__inner {
    height: 48px;
    padding: 0 var(--s-1);
  }

  .toc-bar__chips {
    display: none;
  }

  .toc-bar__toggle {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 0.5em;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .toc-bar__toggle::after {
    margin-left: auto;
  }

  .toc-bar__label {
    flex: none;
    padding-right: 0.7em;
    border-right: 1px solid var(--c-border);
  }

  .toc-bar__current {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--btn-primary-bg);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .toc-bar__current:empty {
    display: none;
  }
}


/* ============================================================
   3. 見出しとセクション
   h2 は下線 + 大きめ、h3 は菱形マーカーで階層を区別する
   ============================================================ */
.howto-section {
  padding-top: var(--s-2);
}

.howto-section--first {
  padding-top: 0;
}

.howto-section>h2.wp-block-heading {
  margin: var(--s-4) 0 var(--s-3);
  padding: 0 0 0.5em;
  border-left: none;
  border-bottom: 2px solid var(--c-border);
  font-size: clamp(1.2rem, 1.2vw + 0.8rem, 1.45rem);
  line-height: 1.5;
}

.howto-section--first>h2.wp-block-heading {
  margin-top: var(--s-3);
}

/* 各セクションの div には
   style="margin-top:var(--wp--preset--spacing--40)" が
   インラインで入っているため、最初のセクションだけ !important で打ち消す */
.howto-section--first {
  margin-top: 0 !important;
}

/* howto-section--first が付いていないページ向けの保険 */
.howto-page__lead+.wp-block-spacer+.howto-section>h2.wp-block-heading,
.howto-page__title+.wp-block-spacer+.howto-section>h2.wp-block-heading {
  margin-top: var(--s-3);
}

.howto-section h3.wp-block-heading {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  margin: var(--s-4) 0 var(--s-2);
  padding-left: 0;
  border-left: none;
  color: var(--c-text);
  font-size: clamp(0.95rem, 0.5vw + 0.75rem, 1.08rem);
  line-height: 1.6;
}

.howto-section h3.wp-block-heading::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5em;
  height: 0.5em;
  margin-top: 0.15em;
  background: var(--btn-primary-bg);
  border-radius: 2px;
  transform: rotate(45deg);
}

.howto-section h4.wp-block-heading {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  margin: var(--s-3) 0 var(--s-1);
  padding-left: 0;
  border-left: none;
  color: var(--c-accent-2);
  font-size: 0.95rem;
  font-weight: 700;
}

.howto-section h4.wp-block-heading::before {
  content: "";
  flex: 0 0 auto;
  width: 0.4em;
  height: 0.4em;
  margin-top: 0.35em;
  background: var(--c-accent);
  border-radius: 1px;
  transform: rotate(45deg);
}

.howto-section::after {
  content: "";
  display: table;
  clear: both;
}

/* STEP / 追加オプション バッジ */
.howto-section--step,
.howto-section--option {
  clear: both;
}

.howto-section--step {
  counter-increment: howto-step;
}

.howto-section--step>h2.wp-block-heading,
.howto-section--option>h2.wp-block-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
}

.howto-section--step>h2.wp-block-heading::before,
.howto-section--option>h2.wp-block-heading::before {
  flex: 0 0 auto;
  align-self: center;
  padding: 0.2em 0.9em;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.howto-section--step>h2.wp-block-heading::before {
  content: "STEP " counter(howto-step);
  background: var(--btn-primary-bg);
  color: var(--c-white);
}

.howto-section--option>h2.wp-block-heading::before {
  content: "追加オプション";
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
}


/* ============================================================
   4. 本文と図版のレイアウト
   float / clear:right をやめてグリッド化し、
   セクション途中に発生していた大きな空白を解消する
   ============================================================ */

/* 本文の行長を抑える（日本語で1行40〜45文字程度） */
.howto-section>p,
.howto-section>.wp-block-paragraph,
.howto-figure-row__body>p {
  max-width: 42em;
}

/* 列挙の強調行は折り返さない */
.howto-figure-row__body>p:has(> strong) {
  max-width: none;
}

/* 注意書きは全幅のまま */
.howto-section>.alert-box,
.howto-section>.information-box {
  max-width: none;
}

/* float 画像を含む段落は幅制限の対象外。
   本文が 42em で止まり、右端の画像との間に空白ができるのを防ぐ */
.howto-section>p:has(img.alignright),
.howto-section>p:has(img.alignleft),
.howto-section>p:has(img.size-full),
.howto-section>p:has(img.alignright)+p,
.howto-section>p:has(img.alignright)+p+p {
  max-width: none;
}

/* 順序付きリスト（グローバルの list-style リセットへの保険） */
.howto-section ol.wp-block-list {
  list-style: decimal;
  margin: var(--s-1) 0 var(--s-2);
  padding-left: 1.6em;
  max-width: 42em;
}

.howto-section ol.wp-block-list li,
.howto-section ul.wp-block-list li {
  margin-bottom: 0.3em;
}

/* 横スクロール表（スマホ補足ページのサイズ表など） */
.howto-section .scrolltable {
  margin: var(--s-2) 0;
}

.howto-section .scrolltable table {
  font-size: clamp(0.72rem, 0.5vw + 0.35rem, 0.82rem);
}

.howto-figure-row {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 300px);
  gap: var(--s-2) var(--s-3);
  align-items: start;
  margin: var(--s-2) 0;
  clear: both;
}

.howto-figure-row__body {
  max-width: 46em;
}

.howto-figure-row__body>*:first-child {
  margin-top: 0;
}

.howto-figure-row__body>*:last-child {
  margin-bottom: 0;
}

.howto-figure-row__fig {
  margin: 0;
}

.howto-figure-row__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.howto-figure-row__fig figcaption {
  margin-top: var(--s-1);
  color: var(--c-text-2);
  font-size: clamp(0.75rem, 0.6vw + 0.3rem, 0.83rem);
  line-height: 1.6;
  text-align: center;
}

/* 本文の長いセクションで図を追従させる。
   不要な場合はこの @media ブロックを削除してください */
@media (min-width: 768px) {
  .howto-figure-row__fig {
    position: sticky;
    top: 100px;
  }
}

@media (max-width: 767px) {
  .howto-figure-row {
    grid-template-columns: 1fr;
  }

  .howto-figure-row__fig {
    order: -1;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
  }
}

/* 幅いっぱいに見せる図版 */
.howto-figure-full {
  margin: var(--s-2) 0;
  clear: both;
}

.howto-figure-full img {
  display: block;
  width: 100%;
  max-width: 830px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

.howto-figure-full figcaption {
  margin-top: var(--s-1);
  color: var(--c-text-2);
  font-size: clamp(0.75rem, 0.6vw + 0.3rem, 0.83rem);
  line-height: 1.6;
  text-align: center;
}

/* 複数画像を並べて比較するギャラリー */
.howto-media-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0;
  clear: both;
}

.howto-media-row__item {
  flex: 1 1 220px;
  margin: 0;
  text-align: center;
}

.howto-media-row__item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

.howto-media-row__item figcaption {
  margin-top: var(--s-1);
  color: var(--c-text-2);
  font-size: clamp(0.78rem, 0.6vw + 0.35rem, 0.88rem);
  line-height: 1.6;
}

/* 旧 float 画像が残っている場合の保険。clear による空白は発生させない */
.howto-section img.alignright {
  float: right;
  margin: 0 0 var(--s-1) var(--s-2);
  max-width: 300px;
  height: auto;
}

.howto-section img.alignnone,
.howto-section img.aligncenter {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--s-1) auto;
}

@media (max-width: 600px) {
  .howto-section img.alignright {
    float: none;
    margin: 0 auto var(--s-1);
  }
}


/* ============================================================
   5. 注意書き（必須＝赤 / 注意＝黄 / 補足＝グレー）
   バッジの土台は site.css の旧 ::before 指定から移設
   ============================================================ */
.alert-box::before,
.information-box::before {
  display: block;
  width: fit-content;
  margin-bottom: 0.6em;
  padding: 0.2em 0.9em;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.alert-box::before {
  content: "注意";
  background: #8A5A00;
  color: var(--c-white);
}

.information-box::before {
  content: "補足";
  background: var(--c-accent-2);
  color: var(--c-white);
}

/* 注意（黄）：仕上がりに影響するが受付は可能なもの */
.howto-page .alert-box {
  background: #FFF8E7;
  border: 1px solid #DCB667;
  color: #6B4400;
  font-weight: 500;
}

.howto-page .alert-box::before {
  content: "注意";
  background: #8A5A00;
  color: var(--c-white);
}

/* 必須（赤）：守られない場合は原稿不備・再入稿になるもの */
.howto-page .alert-box--must {
  background: #FFF3F0;
  border: 2px solid #B3261E;
  color: #8C1D18;
  font-weight: 700;
}

.howto-page .alert-box--must::before {
  content: "必ずお読みください";
  background: #B3261E;
  color: var(--c-white);
}

/* 補足（グレー） */
.howto-page .information-box {
  background: var(--c-surface);
  border-left: 4px solid var(--c-accent);
  color: #4A443E;
}

.howto-page .information-box::before {
  content: "補足";
  background: var(--c-accent-2);
  color: var(--c-white);
}

.howto-page .alert-box strong,
.howto-page .alert-box .marker-under,
.howto-page .alert-box .bold-red {
  font-weight: 700;
}

/* マーカーの下地が黄・赤の枠内で沈むため、枠内では色を変える */
.howto-page .alert-box .marker-under {
  background: linear-gradient(transparent 62%, rgba(255, 255, 255, 0.85) 62%);
}

.howto-page .alert-box--must .marker-under {
  background: linear-gradient(transparent 62%, #FBD9D2 62%);
}

/* 注文照会ページの見方：画面ごとの確認ポイント（現行は画面の画像だった） */
.howto-screen {
  margin: var(--s-3) 0;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}

.howto-screen__title {
  margin: 0;
  padding: 0.6rem var(--s-2);
  background: var(--c-accent-2);
  color: var(--c-white);
  font-weight: 700;
}

.howto-screen__points {
  margin: 0;
  padding: var(--s-1) var(--s-2);
  list-style: none;
  counter-reset: howto-screen;
}

.howto-screen__points > li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) 2.4rem;
  line-height: 1.8;
  counter-increment: howto-screen;
}

.howto-screen__points > li + li {
  border-top: 1px dashed var(--c-border);
}

.howto-screen__points > li::before {
  content: counter(howto-screen);
  position: absolute;
  top: calc(var(--s-2) + 0.1rem);
  left: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--c-white);
  font-weight: 700;
  line-height: 1.7rem;
  text-align: center;
}

.howto-screen__label {
  display: block;
  font-weight: 700;
}

/* 画面上のボタン名 */
.howto-ui {
  display: inline-block;
  margin: 0 0.15em;
  padding: 0 0.6em;
  border: 1px solid var(--c-accent);
  border-radius: 4px;
  background: var(--c-white);
  font-size: 0.9em;
  white-space: nowrap;
}

.howto-ui--primary {
  border-color: var(--btn-primary-bg);
  background: var(--btn-primary-bg);
  color: var(--c-white);
}

.howto-page .alert-box .bold-red {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

.howto-page .alert-box--must .bold-red {
  color: #8C1D18;
}


/* ============================================================
   6. 冒頭の3ステップ導線
   ============================================================ */
.howto-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-2);
  margin: var(--s-3) 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

/* .howto-section ul/ol のリスト装飾を打ち消す */
.howto-section .howto-flow {
  list-style: none;
  padding-left: 0;
}

.howto-flow__item {
  counter-increment: flow;
  position: relative;
  margin: 0;
  padding: var(--s-2) var(--s-2) var(--s-2) 3.3rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}

.howto-flow__item::before {
  content: counter(flow);
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-primary-bg);
  border-radius: 50%;
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.85rem;
}

.howto-flow__title {
  display: block;
  margin-bottom: 0.3em;
  color: var(--c-text);
  font-weight: 700;
  font-size: 0.95rem;
}

.howto-flow__desc {
  display: block;
  color: var(--c-text-2);
  font-size: clamp(0.78rem, 0.6vw + 0.35rem, 0.86rem);
  line-height: 1.7;
}


/* ============================================================
   7. 短い注意事項の2カラム
   図版のない細則をまとめ、右側に生じる空白を埋める
   ============================================================ */
.howto-notes,
.howto-section>.howto-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-3);
  max-width: none;
  clear: both;
}

/* 図版の横に置く単カラム版。カード間の余白を詰める */
.howto-notes--inline {
  grid-template-columns: 1fr;
  gap: var(--s-1);
  margin: 0;
}

.howto-notes__item {
  margin: 0;
  padding: var(--s-2);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 10px;
}

.howto-notes__title {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0 0 0.4em;
  max-width: none;
  color: var(--c-text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.6;
}

.howto-notes__title::before {
  content: "";
  flex: 0 0 auto;
  width: 0.45em;
  height: 0.45em;
  margin-top: 0.15em;
  background: var(--btn-primary-bg);
  border-radius: 2px;
  transform: rotate(45deg);
}

.howto-notes__body {
  margin: 0;
  max-width: none;
  color: var(--c-text-2);
  font-size: clamp(0.8rem, 0.6vw + 0.4rem, 0.88rem);
  line-height: 1.8;
}

.howto-notes__body+.howto-notes__body {
  margin-top: 0.6em;
}


/* ============================================================
   8. 入稿前チェックリスト
   ============================================================ */
.howto-checklist {
  margin: var(--s-6) 0 var(--s-3);
  padding: var(--s-3);
  background: var(--c-surface);
  border-radius: 14px;
}

.howto-checklist__title {
  margin: 0 0 var(--s-1);
  color: var(--c-text);
  font-size: 1.15rem;
  font-weight: 700;
}

.howto-checklist__lead {
  margin: 0 0 var(--s-2);
  color: var(--c-text-2);
  font-size: clamp(0.78rem, 0.6vw + 0.35rem, 0.86rem);
}

.howto-checklist ul,
.howto-page .howto-checklist ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.1rem;
}

.howto-checklist li {
  margin: 0;
}

.howto-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  padding: 0.5em 0.6em;
  border-radius: 8px;
  cursor: pointer;
  font-size: clamp(0.82rem, 0.6vw + 0.4rem, 0.9rem);
  line-height: 1.7;
  transition: background var(--dur) var(--ease);
}

.howto-checklist label:hover {
  background: var(--c-white);
}

.howto-checklist input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.3em;
  accent-color: var(--btn-primary-bg);
}

.howto-checklist input:checked+span {
  color: var(--c-text-3);
  text-decoration: line-through;
}


/* ============================================================
   9. ボタンと固定ナビ
   ============================================================ */
.howto-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1);
  margin: var(--s-2) 0;
  clear: both;
}

/* ============================================================
   10. アクセシビリティ
   ============================================================ */
.howto-toc__list a:focus-visible,
.howto-page .square_btn:focus-visible,
.howto-page .square_btn2:focus-visible,
.howto-checklist label:focus-within {
  outline: 2px solid var(--btn-primary-bg);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  .howto-toc__summary::after,
  .howto-toc__list a,
  .howto-checklist label,
  .toc-bar,
  .toc-bar.is-shown,
  .toc-bar__toggle::after,
  .toc-bar .toc-bar__chip {
    transition: none;
  }

  .howto-figure-row__fig {
    position: static;
  }
}


/* ============================================================
   11. 印刷（チェックリストのみ出力）
   テーマ側のヘッダー・フッターのセレクタが異なる場合は追記が必要
   ============================================================ */
@media print {

  .howto-page>*,
  header,
  footer,
  nav,
  .toc-bar {
    display: none !important;
  }

  .howto-page {
    padding: 0;
  }

  .howto-page>.howto-checklist,
  .howto-page>*:has(> .howto-checklist) {
    display: block !important;
  }

  .howto-checklist {
    background: none;
    padding: 0;
  }

  .howto-checklist__title {
    font-size: 1.2rem;
  }

  .howto-checklist label {
    padding: 0.35em 0;
    break-inside: avoid;
  }

  .howto-checklist input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border: 1px solid #333;
    border-radius: 2px;
  }
}

.red {
  color: #A33E3E;
}

.strike {
  text-decoration: line-through;
  color: var(--c-text-3);
}

.scrolltable {
  overflow-x: auto;
  margin: var(--s-2) 0;
}

.scrolltable table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: clamp(0.75rem, 0.6vw + 0.35rem, 0.875rem);
}

.scrolltable th,
.scrolltable td {
  padding: 0.5em 0.8em;
  border: 1px solid var(--c-border);
  text-align: center;
  white-space: nowrap;
}

.scrolltable th {
  background: var(--c-surface);
}

.scrolltable td a {
  color: var(--btn-primary-bg);
  font-weight: 700;
  text-decoration: none;
}

.scrolltable td a:hover,
.scrolltable td a:focus {
  text-decoration: underline;
}

/* コンテンツページ内の箇条書き（グローバルの ul{list-style:none} を打ち消す） */
.faq-page ul.wp-block-list,
.privacy-page ul.wp-block-list,
.tos-page ul.wp-block-list,
.sctl-page ul.wp-block-list,
.guide-page ul.wp-block-list,
.howto-page ul.wp-block-list,
.howto-section ul {
  list-style: disc;
  padding-left: 1.4em;
}

.howto-deny-list {
  margin: 0;
}

.howto-deny-list dt {
  margin-top: var(--s-3);
  font-weight: 700;
  color: var(--c-accent-2);
}

.howto-deny-list dt:first-child {
  margin-top: 0;
}

.howto-deny-list dd {
  margin: 0.3em 0 0;
  color: var(--c-text-2);
  font-size: clamp(0.8rem, 0.6vw + 0.4rem, 0.9rem);
}

/* 入稿テンプレート表
   外観 → エディター → スタイル → 追加CSS、または style.css に貼り付け */

.nt-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 0.9rem;
}

.nt-table th,
.nt-table td {
  border: 1px solid #d9d9d9;
  padding: 0.6em 0.8em;
  text-align: center;
  vertical-align: middle;
}

/* 上段の形式グループ見出し */
.nt-table__group {
  background: #f0f0f0;
  font-weight: 500;
  text-align: left;
}

/* 下段の面見出し */
.nt-table__side {
  background: #f0f0f0;
  font-weight: 400;
  white-space: nowrap;
}

/* サイズ列。長い名称でも折り返してはみ出さないようにする */
.nt-table__size {
  background: #f7f7f7;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}

/* グループ見出し(ジオラマ小 / 缶バッジ丸型 など) */
.nt-list__group {
  margin: 0 0 0.4em;
  font-weight: 500;
  font-size: 0.9rem;
}

.nt-list__block+.nt-list__block {
  margin-top: 1.6em;
}

.nt-table__cell {
  background: #fff;
}

/* ダウンロードのボタン。本体も台紙も同じ形・同じ大きさにして、
   色だけで見分けられるようにする */
.nt-dl {
  display: inline-block;
  min-width: 6.5em;
  padding: 0.4em 0.9em;
  border: 1px solid #9fd0d6;
  border-radius: 4px;
  background: #e8f5f7;
  color: #2c6e77;
  font-size: 0.85em;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}

.nt-dl:hover {
  border-color: #6fb8c1;
  background: #d6edf1;
}

.nt-table__empty {
  color: #999;
}

.nt-list__bulk {
  margin-top: 1em;
}

.nt-bulk-dl {
  display: inline-block;
  padding: 0.6em 1.4em;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #f7f7f7;
  font-size: 0.9rem;
  text-decoration: none;
}

.nt-bulk-dl__meta {
  margin-left: 0.6em;
  color: #666;
  font-size: 0.85em;
}

.nt-list__note {
  margin-top: 1.2em;
  padding: 0.8em 1em;
  background: #f7f7f7;
  font-size: 0.85rem;
}

.nt-list__note-title {
  margin: 0 0 0.4em;
  font-weight: 500;
}

/* ------------------------------------------------------------
   一覧ページ
   ------------------------------------------------------------ */

/* 中央寄せ。テーマ側で幅が制約されていない場合の保険も兼ねる */
.nt-archive {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* カテゴリ見出し */
.nt-archive__cat {
  margin: 0 0 1.2em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid #d9d9d9;
  font-size: 1.3rem;
}

/* 商品名 */
.nt-archive__product {
  margin: 0 0 0.6em;
  font-size: 1.05rem;
}

/* 見出し行(サムネイル + 商品名) */
.nt-archive__summary {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

/* 商品サムネイル。縦横比の違う写真でも高さを揃える */
.nt-archive__thumb {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}

.nt-archive__summary .nt-archive__product {
  flex: 1 1 auto;
  margin: 0;
}

/* 商品ブロックを2カラムに並べる */
.nt-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 2.4em 2em;
  align-items: start;
}

.nt-archive__item {
  min-width: 0;
}

.nt-archive__section {
  margin-bottom: 3.5em;
}

.nt-archive__desc {
  margin: 0 0 0.6em;
  font-size: 0.85rem;
  color: #666;
}

/* 目次 */
.nt-archive__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  list-style: none;
  padding: 0;
  margin: 0 0 2.5em;
}

.nt-archive__nav a {
  display: inline-block;
  padding: 0.35em 1em;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
}

/* 1列目に幅を持たせ、download列が細くなりすぎないようにする */
.nt-archive .nt-table__size {
  width: 45%;
}

/* ------------------------------------------------------------
   スマートフォン
   横スクロールさせず、サイズごとのブロックに積み替える。
   セルの見出しは data-label 属性から生成する。
   ------------------------------------------------------------ */
@media (max-width: 600px) {

  .nt-table {
    display: block;
    font-size: 0.85rem;
  }

  .nt-table thead {
    display: none;
  }

  .nt-table tbody,
  .nt-table tr,
  .nt-table th,
  .nt-table td {
    display: block;
    width: 100%;
  }

  .nt-table tr {
    border: 1px solid #d9d9d9;
    margin-bottom: 0.8em;
  }

  /* サイズがブロックの見出しになる */
  .nt-table th.nt-table__size {
    border: 0;
    border-bottom: 1px solid #d9d9d9;
    background: #f0f0f0;
    font-weight: 500;
    padding: 0.5em 0.8em;
  }

  .nt-table td.nt-table__cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    border-bottom: 1px solid #ececec;
    padding: 0.5em 0.8em;
    text-align: right;
  }

  .nt-table tr td.nt-table__cell:last-child {
    border-bottom: 0;
  }

  /*
   * 台紙のセルは rowspan でまとめているが、2行目以降にも控えのセル
   * （.nt-table__cell--daishi-repeat）を出しているので、どのブロックにも台紙が出る。
   * 左の罫線は縦並びだと不要。
   */
  .nt-table td.nt-table__cell--daishi {
    border-left: 0;
    text-align: right;
  }

  .nt-table td.nt-table__cell::before {
    content: attr(data-label);
    color: #666;
    font-size: 0.9em;
    text-align: left;
    margin-right: 1em;
  }

  .nt-archive__grid {
    grid-template-columns: 1fr;
    gap: 2em;
  }

  .nt-archive {
    padding-inline: 0;
  }

  .nt-archive__thumb {
    width: 44px;
    height: 44px;
  }

  .nt-list__group {
    margin-bottom: 0.5em;
  }

  .nt-bulk-dl {
    display: block;
    text-align: center;
  }
}

/* ------------------------------------------------------------
   一括ZIPダウンロード
   ------------------------------------------------------------ */

.nt-zip {
  margin: 1em 0;
}

.nt-zip__details {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.nt-zip__summary {
  padding: 0.8em 1.2em;
  background: #f7f7f7;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
}

.nt-zip__details[open] .nt-zip__summary {
  border-bottom: 1px solid #d9d9d9;
  border-radius: 6px 6px 0 0;
}

.nt-zip__body {
  padding: 1em 1.2em 1.2em;
}

.nt-zip__toolbar {
  margin: 0 0 0.8em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid #ececec;
  font-size: 0.85rem;
}

.nt-zip__group {
  margin: 1em 0 0.4em;
  font-size: 0.85rem;
  font-weight: 500;
  color: #666;
}

.nt-zip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.nt-zip__list li+li {
  margin-top: 0.35em;
}

.nt-zip__list label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
}


.nt-zip__actions {
  margin: 1.2em 0 0;
}

.nt-zip__submit {
  width: 100%;
  padding: 0.7em 1.4em;
  border: 0;
  border-radius: 4px;
  background: #ef8354;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}

.nt-zip__submit:hover {
  opacity: 0.85;
}

.nt-zip__note {
  margin: 0.6em 0 0;
  font-size: 0.75rem;
  color: #888;
}

.nt-zip__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.nt-zip__count {
  color: #666;
  font-size: 0.9em;
}

/* ------------------------------------------------------------
   一括ZIP:アイコンと開閉部の背景
   ------------------------------------------------------------ */

/* 既定の三角マーカーを消す(テーマ側の矢印と二重になるのを防ぐ) */
.nt-zip__summary {
  display: flex;
  align-items: center;
  gap: 0.6em;
  list-style: none;
  margin-bottom: 0px;
}

.nt-zip__summary::after {
  margin-top: 0px;
}

.nt-zip__summary::-webkit-details-marker {
  display: none;
}

.nt-zip__summary::marker {
  content: '';
}

.nt-zip__icon {
  flex: 0 0 auto;
  color: #ef8354;
}

.nt-zip__summary-text {
  flex: 1 1 auto;
}

/* ZIPバッジ */
.nt-zip__badge {
  flex: 0 0 auto;
  padding: 0.15em 0.6em;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  color: #666;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* 開閉部に背景を付ける */
.nt-zip__body {
  background: #fafafa;
  border-radius: 0 0 6px 6px;
}

/* チェックボックスの行を白抜きにして視線を集める */
.nt-zip__list li {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 4px;
}

.nt-zip__list label {
  padding: 0.55em 0.8em;
}

.nt-zip__toolbar {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ------------------------------------------------------------
   一括ZIP:ダウンロードボタン
   色は下の --nt-dl-* を差し替えるだけで変更できる。
   ------------------------------------------------------------ */

.nt-zip {
  /* 既定:ティール(ヘッダー「商品一覧」ボタンと同系の副次アクション色)
	   ヘッダーの実際の色をスポイトで取り、ここに入れると統一感が出ます */
  --nt-dl-bg: #4f9e97;
  --nt-dl-bg-hover: #438a84;
  --nt-dl-text: #fff;
  --nt-dl-border: transparent;

  /* 候補B:ニュートラル(白背景+枠線)。もっとも控えめ
	--nt-dl-bg: #fff;
	--nt-dl-bg-hover: #f2f2f2;
	--nt-dl-text: #4a3b32;
	--nt-dl-border: #c9c0b8;
	*/

  /* 候補C:オレンジのアウトライン。注文ボタンとの関連を残しつつ主従をつける
	--nt-dl-bg: #fff;
	--nt-dl-bg-hover: #fdf1ea;
	--nt-dl-text: #d9663a;
	--nt-dl-border: #ef8354;
	*/
}

.nt-zip__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.75em 1.4em;
  border: 1px solid var(--nt-dl-border);
  border-radius: 4px;
  background: var(--nt-dl-bg);
  color: var(--nt-dl-text);
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.nt-zip__submit:hover {
  background: var(--nt-dl-bg-hover);
  opacity: 1;
}

.nt-zip__submit .nt-zip__icon {
  flex: 0 0 auto;
  color: currentColor;
}

/* 生成中 */
.nt-zip__submit.is-working {
  cursor: progress;
  opacity: 0.75;
}

.nt-zip__submit.is-working .nt-zip__icon {
  animation: nt-dl-bounce 0.9s ease-in-out infinite;
}

@keyframes nt-dl-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(3px);
  }
}

/* 見出しはアイコンなしに戻す */
.nt-zip__summary {
  gap: 0.8em;
}

/* ============================================================
   商品ページ セクションナビ（押すと該当セクションまでスクロール）
   html{scroll-behavior:smooth} は上で指定済み
   ============================================================ */
.prod-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-3) 0;
  padding: 0 var(--s-2);
}

.prod-nav__item {
  padding: 0.35em 0.2em;
  border-bottom: 2px solid transparent;
  color: var(--c-text) !important;
  font-size: clamp(0.85rem, 0.6vw + 0.7rem, 1rem);
  text-decoration: none !important;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.prod-nav__item:hover,
.prod-nav__item:focus {
  border-bottom-color: var(--btn-primary-bg);
  color: var(--btn-primary-bg) !important;
}

/* 固定ヘッダーにアンカー先が隠れないようにする */
#sec-spec,
#sec-price,
#sec-template,
#sec-option {
  scroll-margin-top: 90px;
}

/* ------------------------------------------------------------
   開閉をやめて常に開いた状態にする details（見出しとして使う）
   ------------------------------------------------------------ */
.wp-block-details.is-static>summary {
  cursor: default;
  list-style: none;
  pointer-events: none;
}

.wp-block-details.is-static>summary::-webkit-details-marker {
  display: none;
}

.wp-block-details.is-static>summary::marker {
  content: '';
}

/* ------------------------------------------------------------
   商品説明（段落ごとに余白を取ってすっきり見せる）
   ------------------------------------------------------------ */
.prod-desc {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.prod-desc p {
  margin: 0;
  line-height: 1.8;
}

/* ------------------------------------------------------------
   注文エリアのボタン
   縦の高さは変えずに、文字だけ大きくして読みやすくする
   ------------------------------------------------------------ */
.order-panel .btn {
  padding-block: 0.7rem;
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.1rem);
  font-weight: 700;
}

.order-panel .btn p {
  margin: 0;
}

/* 「MYDOOかんたんデザイン」で作る：文言が長く「›」だけ次の行に落ちるので、
   少し小さくして1行に収める。収まらない幅では「」の後ろで改行する */
.order-panel .order-sim-btn {
  font-size: clamp(0.85rem, 0.5vw + 0.7rem, 1rem);
  letter-spacing: 0.02em;
}

.order-panel .order-sim-btn span {
  display: inline-block;
  white-space: nowrap;
}

/* 入稿テンプレートDLは「注文する」と同じオレンジにして、
   注文と入稿がひと続きの操作だと見た目で分かるようにする。
   ただしボタン（カプセル型）ではなく、開閉できる四角のままにする。 */
.order-panel .nt-zip {
  margin: 0;
}

.order-panel .nt-zip__details {
  border: 0;
}

.order-panel .nt-zip__summary {
  padding: 0.7rem 1rem;
  border: 2px solid var(--btn-primary-border);
  border-radius: 8px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  /* 「入稿テンプレートをダウンロード」が1行に収まるサイズに抑える */
  font-size: clamp(0.78rem, 0.45vw + 0.68rem, 0.95rem);
  font-weight: 700;
  gap: 0.5em;
}

/* 折り返さずに1行で見せる（収まらない端末だけ省略せず縮める） */
.order-panel .nt-zip__summary-text {
  white-space: nowrap;
}

.order-panel .nt-zip__details[open] .nt-zip__summary {
  border-bottom: 2px solid var(--btn-primary-border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.order-panel .nt-zip__summary .nt-zip__badge {
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
  color: var(--btn-primary-text);
  font-size: 0.65rem;
}

.order-panel .nt-zip__body {
  border: 1px solid var(--c-border);
  border-radius: 8px;
}

/* ------------------------------------------------------------
   ジオラマのカスタムテンプレート一覧（dir002 の本文の HTML ブロックで使用）
   1件 = 画像（クリックで PSD をダウンロード）＋説明。マスに折り返して並べる
   ------------------------------------------------------------ */
.diorama_flexbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.2em 1em;
  margin: 1em;
  font-size: var(--pp-fs, 0.85rem);
  line-height: 1.5;
  text-align: center;
}

.diorama_flexbox>div {
  min-width: 0;
}

.diorama_flexbox img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 0.4em;
}

/* 画像の後ろの <br> は、画像をブロック表示にしたので余計な空行になる */
.diorama_flexbox br {
  display: none;
}

@media (max-width: 600px) {
  .diorama_flexbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0.8em 0;
  }
}

/* ------------------------------------------------------------
   入稿テンプレートDL：サイズごとのまとまり
   サイズ（見出しのチェックで一括選択）→ 表・裏・台紙のチップ → 区切り線
   ------------------------------------------------------------ */
.nt-zip__size {
  padding: 0.7rem 0;
  border-bottom: 1px solid #d9d9d9;
}

.nt-zip__size:last-of-type {
  border-bottom: 0;
}

.nt-zip__size-head {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  /* テーマのラベル指定で「mm」が「MM」になるのを戻す */
  text-transform: none;
  cursor: pointer;
}

.nt-zip__size-head input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: var(--btn-primary-bg);
}

/* 表・裏・台紙を横に3つ並べる */
.nt-zip__size .nt-zip__list.nt-zip__chips {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ------------------------------------------------------------
   入稿テンプレートDL：チップ型の選択カード
   サイズ・面・形式だけを大きく見せ、ファイルサイズなどは出さない
   ------------------------------------------------------------ */
/* 一覧は「1行1ファイル」の既定スタイルを使うので、
   チップ用には li / label の指定を打ち消してから組み直す */
.nt-zip__list.nt-zip__chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nt-zip__list.nt-zip__chips>li {
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.nt-zip__list .nt-zip__chip {
  box-sizing: border-box;
  text-transform: none;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.5rem 0.35rem;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  color: var(--c-text);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nt-zip__chip:hover {
  border-color: var(--btn-secondary-bg);
}

/* チェックすると色が濃くなり、選択中が一目で分かる */
.nt-zip__chip:has(input:checked) {
  border-color: var(--btn-secondary-bg);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.nt-zip__chip:has(input:focus-visible) {
  outline: 2px solid var(--btn-primary-bg);
  outline-offset: 2px;
}

.nt-zip__chip-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

/* 「PSD」「表」は短いので折り返さない */
.nt-zip__chip-format,
.nt-zip__chip-side {
  white-space: nowrap;
  letter-spacing: 0;
}

/* サイズ名は長いものがあるので、チップの幅で折り返す */
.nt-zip__chip-size {
  white-space: normal;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.nt-zip__chip-format {
  font-size: 0.75rem;
  font-weight: 700;
}

.nt-zip__chip-size {
  font-size: 0.85rem;
  font-weight: 700;
}

.nt-zip__chip-side {
  font-size: 0.8rem;
}

/* :has() が効かないブラウザでも選択が分かるよう、チェックボックスは残す */
.nt-zip__chip input {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: var(--btn-primary-bg);
}

/* 読み上げ用テキスト（チップに載せた形式・面・容量の説明） */
.nt-zip .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   商品ページ セクション
   ・見出しは白地＋左のアクセント線（旧: ピンクの帯）
   ・アコーディオンをやめたので、カードの囲み罫線は出さない
   ・.prod-section を目印にするので、再利用ブロックやパターンから
     差し込まれたセクションも同じ見た目になる
   ============================================================ */
.prod-section {
  margin-bottom: var(--s-4);
  border: 0;
}

.prod-section>.wp-block-details,
.wp-block-details.is-static {
  padding: 0;
}

/* セクションの見出し（details の summary と、親セクションの h2 は同じ見た目） */
.prod-section>.wp-block-details>summary,
.wp-block-details.is-static>summary,
.prod-section__title {
  margin: 0 0 1.1rem;
  padding: 0 0 0.7rem 0.85rem;
  border-left: 4px solid var(--btn-primary-bg);
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background: transparent;
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.35rem);
  font-weight: 700;
  line-height: 1.4;
}

/* 開閉できるものは矢印を残し、開閉しないもの（is-static）だけ矢印を消す */
.wp-block-details.is-static>summary::after {
  content: none;
}

/* ------------------------------------------------------------
   「オプション」のように、中に複数のセクションを束ねる親
   子側は一段小さい見出しにして親子関係を分かるようにする
   ------------------------------------------------------------ */
.prod-section--option>.prod-section {
  margin: 0 0 var(--s-3) var(--s-2);
}

.prod-section--option>.prod-section:last-child {
  margin-bottom: 0;
}

.prod-section--option .prod-section>.wp-block-details>summary {
  border-left-width: 3px;
  border-left-color: var(--c-border);
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.1rem);
}

/* ------------------------------------------------------------
   仕様表
   見出し列が中身の文字数より広く取られていたので、内容に合わせる
   ------------------------------------------------------------ */
#sec-spec .item-table th {
  width: 1%;
  padding-right: 1.5rem;
  white-space: nowrap;
  vertical-align: top;
}

#sec-spec .item-table td {
  width: auto;
  vertical-align: top;
}

#sec-spec .item-table {
  width: 100%;
  table-layout: auto;
}

@media (max-width: 600px) {

  /* スマホは1列に積まれるので、見出し列の折り返し禁止を解除する */
  #sec-spec .item-table th {
    width: auto;
    white-space: normal;
  }
}

/* ------------------------------------------------------------
   価格表
   ・「片面」「両面」で分けた2つの表を上下に並べる（分割は site.js）
   ・金額は右揃え
   ・列が少ない表は幅を詰めてすっきり見せる
   ------------------------------------------------------------ */
.price-split__block+.price-split__block {
  margin-top: var(--s-3);
}

.price-split__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.price-split__title::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.5rem;
  border-radius: 2px;
  background: var(--btn-primary-bg);
}

.price-split__scroll {
  overflow-x: auto;
}

.price-table td {
  text-align: right;
}

.price-table th {
  text-align: left;
}

/* 列が少ない商品は横いっぱいに引き伸ばさない */
.price-table.is-compact {
  width: auto;
  min-width: 0;
  max-width: 640px;
  table-layout: auto;
}

/* ------------------------------------------------------------
   ページ下部の注文ボタン
   横幅が広すぎたので固定バーと同じ幅に詰め、文字を大きくする
   （固定バーとの二重表示を避ける処理は site.js 側）
   ------------------------------------------------------------ */
.order-inline {
  display: flex;
  justify-content: center;
}

.order-inline .btn {
  width: 100%;
  max-width: 480px;
  padding-block: 0.7rem;
  font-size: clamp(1rem, 0.7vw + 0.85rem, 1.2rem);
  font-weight: 700;
}

.order-inline .btn p {
  margin: 0;
}

/* ------------------------------------------------------------
   入稿テンプレート表：オリジナル台紙の列
   複数商品で共用するため、本体テンプレートと見た目で区別する
   ------------------------------------------------------------ */
.nt-table__group--daishi,
.nt-table__side--daishi {
  background: #fdf1ea;
  border-left: 2px solid #ef8354;
}

.nt-table__side--daishi {
  font-weight: 500;
  /* .nt-table__side の nowrap を打ち消す。注記が1行に伸びて列幅が壊れるため */
  white-space: normal;
}

.nt-table__note {
  display: block;
  max-width: 12em;
  margin: 0.2em auto 0;
  font-size: 0.7em;
  font-weight: 400;
  line-height: 1.35;
  color: #888;
}

.nt-table__cell--daishi {
  background: #fffaf7;
  border-left: 2px solid #ef8354;
  text-align: center;
  vertical-align: middle;
}

.nt-dl--daishi {
  border-color: #ef8354;
  background: #fff;
  color: #d9663a;
}

.nt-dl--daishi:hover {
  border-color: #d9663a;
  background: #fdf1ea;
}

/*
 * rowspan でまとめた台紙の2行目以降に出している控えのセル（template-list.php）。
 * PC の表では隠して結合表示のままにし、スマホでサイズごとのブロックに
 * 積み替えたときだけ表示して、どのサイズにも台紙が出るようにする。
 */
.nt-table td.nt-table__cell--daishi-repeat {
  display: none;
}

@media (max-width: 600px) {
  .nt-table td.nt-table__cell--daishi-repeat {
    display: flex;
  }
}

/* ------------------------------------------------------------
   入稿テンプレート：説明文と表の幅配分
   台紙列が増えてサイズ列が細くなり折り返しが増えたため、
   左の説明カラムを狭め、その分を表に回す
   ------------------------------------------------------------ */
@media (min-width: 782px) {

  .draft-group.wp-block-columns {
    align-items: flex-start;
  }

  .draft-group.wp-block-columns>.wp-block-column:first-child {
    flex-basis: 34%;
    flex-grow: 0;
  }

  .draft-group.wp-block-columns>.wp-block-column:last-child {
    flex-basis: 66%;
    flex-grow: 1;
  }

  /* 「40×40mm」が途中で折れないようにする */
  .draft-group .nt-table__size {
    white-space: nowrap;
  }
}

/* ============================================================
   商品ページ 商品名まわり
   お気に入りは商品名の下・左寄せに置く
   ============================================================ */
.product-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: var(--s-2);
}

.product-title .h2 {
  margin: 0;
}

/* ------------------------------------------------------------
   価格（最小ロット）と納期を横並びにする
   ------------------------------------------------------------ */
.order-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
}

.order-price-row .kakaku-summary {
  flex: 0 0 auto;
}

.order-price-row .kakaku-summary__item {
  flex: 0 0 auto;
  min-width: 6.5rem;
  padding: 0.5rem 0.9rem;
}

.order-price-row .order-nouki {
  flex: 1 1 12rem;
  min-width: 0;
}

/* ------------------------------------------------------------
   送料リンク（写真の下・商品説明の下に移動）
   ------------------------------------------------------------ */
.order-links {
  margin-top: var(--s-2);
}