@charset "utf-8";
/* ==========================================================================
   brand.css — 全ページ共通のトーン調整レイヤー（2026-09 デザイン改訂）
   ・各ページのインライン <style> の後、site.css の前に読み込むこと
   ・レイアウトは変えない。色・余白・影・罫線・文字サイズだけを揃える
   ・スマホ固有の作り込みは site.css が後勝ちで担当する
   ========================================================================== */

:root {
  --sand: #f3f1ea;
  --hair: #e5e2d8;
  --gold: #b09a63;
  --shadow: 0 1px 3px rgba(20, 63, 49, .05);
}

/* --- 見出し ---------------------------------------------------------------
   PC版の見出しが大きすぎるとLPらしさが出るため、上限を落として落ち着かせる */
h2 { font-size: clamp(23px, 2.7vw, 38px); line-height: 1.38; letter-spacing: .01em; }
.section-head.stacked h2 { font-size: clamp(23px, 2.7vw, 38px); }
.page-hero h1 { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.34; }
.official-block-title { font-size: clamp(23px, 2.7vw, 36px); line-height: 1.38; }
.lp-lead h2 { font-size: clamp(23px, 2.7vw, 36px); }

/* --- 英字ラベル ------------------------------------------------------------ */
.label,
.eyebrow,
.official-kicker {
  color: #8b9189;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --- ページ見出しの帯 ------------------------------------------------------ */
.page-hero { background: var(--sand); }

/* --- 見出しブロックは全ページ左揃えに揃える（トップページに合わせる） ------- */
.official-center,
.lp-lead,
.section-head,
.voice-head,
.faq-head {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* --- ボタン ---------------------------------------------------------------
   浮き上がるアニメーションと強い影をやめて、静かなピルに揃える */
.button {
  border-radius: 999px;
  font-weight: 700;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.button:hover { transform: none; box-shadow: none; }
.button.secondary { border-color: #dcd7c9; }
.button.secondary:hover { border-color: #b9b2a0; }
/* LINE導線はブランドカラーで統一（スマホは site.css が同じ値を持つ） */
.button[href*="lin.ee"] { background: #06c755; border-color: #06c755; color: #fff; }
.button[href*="lin.ee"]:hover { background: #05b44c; border-color: #05b44c; color: #fff; }
.button.secondary[href*="lin.ee"] { background: #06c755; border-color: #06c755; color: #fff; }

/* --- カード類 --------------------------------------------------------------
   厚い影と強い枠を外し、細い罫線と淡い影に置き換える */
.product,
.voice-card,
.recipe-card,
.flow-step,
.guide-card,
.kodawari-card,
.official-feature-card,
.reason-card-clone,
.directory-card,
.intro-item,
.drink-style-card,
.contact-card,
.official-about,
.hero-product,
.lp-worry,
.faq-list details {
  border-color: var(--hair);
  box-shadow: var(--shadow);
}

/* 飾りの小さなタグはデザイン案にないので出さない */
.official-feature-card::before { display: none; }

/* --- 長いメールアドレス・URLが枠からはみ出さないように ---------------------- */
td, dd, .legal-value { overflow-wrap: break-word; }

/* --- 区切り線 -------------------------------------------------------------- */
hr,
.section-divider { border-color: var(--hair); }

/* --- 数字の色 -------------------------------------------------------------- */
.official-number,
.flow-step-no,
.intro-item-head span { color: var(--gold); }

/* --- FAQ ------------------------------------------------------------------- */
.faq-list details { border-radius: 10px; }
.faq-list summary { font-weight: 700; }

/* --- フッター -------------------------------------------------------------- */
.site-footer { background: #102d24; }

/* ==========================================================================
   PC（1024px以上）だけの微調整
   ========================================================================== */
@media (min-width: 1024px) {
  /* セクションの縦余白をトップページ（112px）に合わせる */
  main > section { padding-block: 112px; }
  .page-hero { padding-block: 72px; }
}