/* =========================================================
   MYRO Guide — Left sticky TOC / Right 2-col rows
   (tokens: variables.css に準拠)
   ========================================================= */

/* スクロール固定位置（JSで上書き可 / 既定はヘッダーぶん＋α） */
:root {
  --guide-sticky-top: 96px; /* header + adminbar を見越して少し深め */
}

/* =========== Layout (2cols: TOC | Content) =========== */
.guide {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-10); /* 40 */
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: var(--space-12) var(--container-gutter, 16px) var(--space-16);
  font-family: var(--font-sans-jp);
  color: var(--c-fg);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
}

/* =========== Left: TOC (sticky) =========== */
.guide-toc {
  position: sticky;
  top: var(--guide-sticky-top);
  align-self: start;
  margin-top: var(--space-4);
}

.guide-toc__ttl {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
}

.guide-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.guide-toc__list a {
  display: block;
  padding: 0;
  color: var(--c-fg-muted);
  text-decoration: none;
}

.guide-toc__list li.is-active a,
.guide-toc__list a:hover {
  color: var(--c-fg);
  text-decoration: underline;
}

/* =========== Right: Content =========== */

/* Hero（大きいタイトル＋説明＋CTA） */
.guide-hero {
  border-bottom: 1px solid var(--c-border);
  padding-bottom: var(--space-10);
  margin-bottom: var(--space-12);
}

.guide-h1 {
  margin: 0 0 var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* 和文サブタイトル */
.guide-title-jp {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--c-fg-muted);
}

/* サブコピー */
.guide-sub {
  margin: 0 0 var(--space-3);
  color: var(--c-fg-muted);
}

/* CTA（共通トークン準拠） */
.btn.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--c-brand-blue);
  color: var(--c-fg-inverse);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.btn--primary:hover { opacity: .92; }

/* セクション：見出し｜本文 の 2 カラム */
.guide-section {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-6); /* 24 */
  padding: var(--space-6) 0;
  border-top: 1px solid var(--c-border);
  scroll-margin-top: calc(var(--guide-sticky-top) + 12px);
}

.guide-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.guide-h2 {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--c-fg);
}

.guide-col { min-width: 0; }

/* リスト類 */
.flow-steps {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: 6px;
}

.flow-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.flow-steps li span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  background: var(--c-surface);
  color: var(--c-fg);
}

.guide-list,
.faq-list {
  margin: 0 0 var(--space-3);
  padding-left: 1.1em;
}

.faq-list li { margin-bottom: var(--space-2); }
.faq-list strong { font-weight: var(--fw-semibold); }

.note { color: var(--c-fg-muted); }

/* =========== Responsive =========== */
@media (max-width: 1024px) {
  .guide {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-8);
  }
  .guide-section {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .guide {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-bottom: var(--space-12);
  }
  .guide-toc {
    position: static;
    order: -1; /* 先頭に移動 */
    margin-top: 0;
  }
  .guide-hero {
    padding-bottom: var(--space-8);
    margin-bottom: var(--space-10);
  }
  .guide-section {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-6) 0;
  }
}

/* ====== Hero title tune: bigger, normal weight ====== */
/* 英語（.en または .guide-title-en） */
.guide-h1 .en,
.guide-title-en {
  font-family: var(--font-latin);
  font-weight: var(--fw-thin) !important;
  line-height: 1.08;
  letter-spacing: .01em;
  font-size: clamp(3.5rem, 4.5vw, 6rem);
}

/* 日本語（.jp または .guide-title-jp） */
.guide-h1 .jp,
.guide-title-jp {
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  color: var(--c-fg-muted);
}

/* 既存の太字指定を明示的に打ち消し（保険） */
.guide-h1 { font-weight: var(--fw-regular); }

/* Payment logos */
.pay-logos { margin: 0 0 var(--space-4); }

.pay-logos img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* 本文の段落間 */
.pay-body p { margin: 0 0 var(--space-3); }

/* Section内の小見出しと表組み風の定義リスト */
.guide-h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
}

.guide-kv { margin: 0 0 var(--space-3); }

.guide-kv__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--c-border);
}

.guide-kv__row:first-child { border-top: 0; }

.guide-kv__row dt {
  color: var(--c-fg-muted);
  font-size: var(--fs-14);
}

.guide-kv__row dd { margin: 0; }

/* リスト余白の調整 */
.guide-list {
  margin: 0 0 var(--space-3);
  padding-left: 1.1em;
}

/* ===== Guide: list reset（全て左揃え） ===== */
.guide ul,
.guide ol {
  margin: 0;
  padding: 0;
}

.guide ul { list-style: none; }
.guide li { margin: 0; }

/* 既存の .guide-list / .faq-list のパディングを打消し */
.guide-list,
.faq-list {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ===== 小見出し（例：配送料について）に ■ を表示 ===== */
.guide-h3 {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  margin: var(--space-6) 0 var(--space-2);
  font-weight: var(--fw-semibold);
}

.guide-h3::before {
  content: "■";
  color: var(--c-brand-blue);
  font-size: .9em;
  line-height: 1;
}

.guide-section .guide-h3:first-of-type,
.guide-section .guide-col .guide-h3:first-child {
  margin-top: 0 !important;
}

/* =========================================================
   FAQ（<details class="accordion"> 方式・既存JS対応）
   ========================================================= */

/* 各Qの区切り線 */
.faq__content details.accordion {
  border-bottom: 1px solid #eee;
}

/* summaryの見た目 */
.faq__content details.accordion summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  text-align: left;
  padding: 1rem 0;
  font: inherit;
  list-style: none; /* Safariのデフォルト三角を消す */
  cursor: pointer;
}

/* デフォルトの三角（Safari/Chromium系）を非表示 */
.faq__content details.accordion summary::-webkit-details-marker {
  display: none;
}

/* キーボードフォーカス */
.faq__content details.accordion summary:focus-visible {
  outline: 2px solid #999;
  outline-offset: 2px;
}

/* 右端の＋／−（animated-plusを使わない保険として） */
.faq__content details.accordion summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 700;
  line-height: 1;
  transform: scale(1.2);
}

.faq__content details.accordion[open] summary::after {
  content: "−";
}

/* 本文のスライド開閉（max-heightトランジション） */
.faq__content details.accordion .accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
  will-change: max-height;
}

/* 開いているときに十分な高さを確保（長文なら値を上げる） */
.faq__content details.accordion[open] .accordion__content {
  max-height: 1200px;
}

/* 本文内の余白微調整 */
.faq__content details.accordion .accordion__content .prose,
.faq__content details.accordion .accordion__content p,
.faq__content details.accordion .accordion__content ul {
  margin-bottom: 1rem;
}

/* ===== FAQ：ホバー時に“手”カーソルを強制 ===== */
.guide details.accordion > summary,
.guide details[is="accordion-disclosure"] > summary,
.guide .accordion__toggle {
  cursor: pointer !important;
}

/* ===== FAQ：Answer 面に薄いグレー背景 ===== */
.guide details.accordion .accordion__content {
  background: transparent;
  padding: 0;
}

.guide details.accordion[open] .accordion__content {
  background: var(--c-surface, #f7f7f7); /* トークンが無ければ #f7f7f7 */
  border-color: var(--c-border, #e6e6e6);
  padding: 12px 14px; /* 開いた時だけ余白を付ける */
}

/* ついでに先頭の余白を詰める（任意） */
.guide details.accordion[open] .accordion__content .prose {
  margin-top: 0;
}

/* Guide: しっかりパディングの黒ボタン */
.guide .btn.btn--primary {
  /* 黒ボタン指定は維持 */
  background: #000 !important;
  color: #fff;

  /* パディングをしっかり確保（画面幅に応じて可変） */
  padding: clamp(12px, 1.2vw, 14px) clamp(22px, 2.2vw, 28px);
  font-weight: var(--fw-regular);

  /* 押しやすいタップ領域 */
  min-height: 44px;
  line-height: 1.2;

  /* 念のため整列も明示 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem; /* アイコン併用時の余白 */
}

.guide .btn.btn--primary:hover { opacity: .95; }

.guide .btn.btn--primary:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* 全体：スムーススクロール */
html { scroll-behavior: smooth !important; }

/* =========================================================
   Mobile: 見出しをノーマルに（≤768px）＋細かな整形
   ========================================================= */
@media (max-width: 768px) {

  /* H2/H3 をノーマルウェイトに統一 */
  .guide .guide-h2,
  .guide .guide-h3 {
    font-weight: var(--fw-regular) !important;
  }

  /* 見出しのサイズ・行間をやや詰める（読みやすさ調整） */
  .guide .guide-h2 {
    line-height: 1.25;
    margin: 0 0 var(--space-2);
  }

  .guide .guide-h3 {
    line-height: 1.3;
    margin: var(--space-4) 0 var(--space-2);
  }

  /* ヒーロー直下の余白を軽く（スマホで間延びしないように） */
  .guide-hero {
    padding-bottom: var(--space-8);
    margin-bottom: var(--space-10);
  }
}

/* ===== Hero: 見出しサイズ＆余白調整 ===== */

/* 日本語見出しを小さめに */
.guide-h1 .jp,
.guide-title-jp{
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);  /* ≒15–17px */
  font-weight: var(--fw-regular);
  color: var(--c-fg-muted);
}

/* タイトル周りの余白を少し広げる */
.guide-hero .guide-h1{
  gap: var(--space-3);              /* EN と JP の間を少し広げる（元: space-1） */
  margin-bottom: var(--space-3);    /* タイトル下に余白 */
}

/* サブコピー（説明文）の上下余白を拡大 */
.guide-hero .guide-sub{
  margin: var(--space-12) 0 var(--space-4);
}

/* ボタン上にも少し余白を */
.guide-hero .btn.btn--primary{
  margin-top: var(--space-3);
}

/* セクションの下余白も少しだけ増やす（全体の呼吸感） */
.guide-hero{
  padding-bottom: var(--space-12);  /* 元: var(--space-10) */
  margin-bottom: var(--space-14);   /* 元: var(--space-12) */
}

/* モバイル時は余白をやや抑えめに（間延び防止） */
@media (max-width: 768px){
  .guide-hero{
    padding-bottom: var(--space-10);
    margin-bottom: var(--space-12);
  }
  .guide-hero .guide-h1{
    margin-bottom: var(--space-2);
  }
  .guide-hero .btn.btn--primary{
    margin-top: var(--space-2);
  }
}

/* 最初のセクションに十分な上余白を戻す */
.guide-section:first-of-type{
  border-top: 0;                 /* 線は消す */
  padding-top: var(--space-6);   /* ← ここを復活（お好みで space-4～8） */
}

/* さらにゆったりさせたい場合は少し大きめに */
@media (max-width: 768px){
  .guide-section:first-of-type{
    padding-top: var(--space-5);
  }
}