/* ============================================
   MOTTO Mate 3ページ共通デザイン部品（デザイン案v2）
   トップページ・顧問ページで共有するスタイル。
   色・角丸・影・フォントの値は既存LP（hp/index.html）と完全に同一。
   design-syncで調整しやすいよう、部品はすべてここで一元管理。
============================================ */
:root {
  /* 色（既存LPと同じ値） */
  --color-main: #EE7B36;        /* サンシャインオレンジ：ボタン・目印 */
  --color-main-hover: #D96A28;  /* ボタンを触ったとき */
  --color-accent: #F8B62D;      /* トラストイエロー：ごく少量の飾り */
  --color-bg: #FDFBF6;          /* クリーム：ページの地の色 */
  --color-bg-soft: #FAF5EB;     /* 薄ベージュ：セクション区切り */
  --color-bg-strong: #F4ECDA;   /* ベージュ：クロージング */
  --color-card: #FFFFFF;        /* 白：カードだけに使う */
  --color-text: #2E2A26;        /* ウォームブラック：基本の文字 */
  --color-text-sub: #6F675E;    /* 茶グレー：注記など控えめな文字 */

  /* 影（黒ではなく淡い茶色系） */
  --shadow-warm: 0 6px 24px rgba(122, 94, 62, 0.10);
  --shadow-warm-soft: 0 3px 14px rgba(122, 94, 62, 0.08);

  /* 角丸（直角は使わない） */
  --radius-card: 20px;
  --radius-box: 14px;
  --radius-pill: 999px;

  /* フォント */
  --font-jp: 'Zen Kaku Gothic New', sans-serif;
  --font-en: 'Plus Jakarta Sans', 'Zen Kaku Gothic New', sans-serif;

  /* コンテンツ幅（PCでも1カラム・手紙のような読みやすさ） */
  --content-width: 720px;
}

/* ============================================
   ベース
============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9; /* 年配の読者にも読みやすいよう、LP(1.8)よりわずかにゆったり */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
.en { font-family: var(--font-en); }

.section { padding: 72px 24px; }
.section-inner { max-width: var(--content-width); margin: 0 auto; }
.bg-soft   { background: var(--color-bg-soft); }
.bg-strong { background: var(--color-bg-strong); }

/* 見出し：ささやかなオレンジの飾り付き（既存LPと同じ） */
.section-title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 32px;
}
.section-title::before {
  content: "";
  display: block;
  width: 28px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-main);
  margin: 0 auto 14px;
}
.sub-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}
.note { font-size: 13px; color: var(--color-text-sub); }

/* ============================================
   共通ヘッダー（戻れる道）：小さく屋号だけ
   ボタンより目立たせない・固定しない
============================================ */
.site-header {
  background: var(--color-bg);
  text-align: center;
  padding: 14px 24px 0;
}
.site-header a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-text-sub);
  font-size: 13px;
}
.site-header a:hover { color: var(--color-main); }
/* ロゴマークだけを見せる小さな窓（下部のローマ字部分は隠す） */
.site-header .logo-mark {
  width: 26px;
  height: 23px;
  object-fit: cover;
  object-position: top;
}
.site-header .brand-text { font-weight: 500; }

/* ============================================
   ボタン（CTA）：既存LPと同一
============================================ */
.cta-wrap { text-align: center; }
.cta-button {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: 14px 32px;
  min-height: 52px;
  background: var(--color-main);
  color: #FFFFFF;
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-warm-soft);
  transition: background 0.25s ease;
}
.cta-button:hover,
.cta-button:active { background: var(--color-main-hover); }
.cta-caption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-sub);
}
.cta-button--large {
  max-width: 360px;
  padding: 18px 32px;
  font-size: 18px;
}

/* 控えめなテキストリンク（顧問カードの「詳しく見る」など） */
.quiet-link {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(238, 123, 54, 0.5);
}
.quiet-link:hover { color: var(--color-main); }

/* ============================================
   ふわっと現れるアニメーション（控えめ・既存LPと同一）
============================================ */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   フッター（3ページ共通）
============================================ */
.footer {
  background: var(--color-bg-strong);
  text-align: center;
  padding: 28px 24px 32px;
}
.footer .footer-nav {
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 2.2;
}
.footer .footer-nav a {
  color: var(--color-text-sub);
  text-decoration: none;
  margin: 0 10px;
}
.footer .footer-nav a:hover { color: var(--color-main); text-decoration: underline; }
.footer .brand-mark {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.footer .copyright {
  font-size: 11px;
  color: var(--color-text-sub);
}

/* ============================================
   FAQ（開閉式・既存LPと同一）
============================================ */
.faq-item { border-bottom: 1px solid rgba(111, 103, 94, 0.18); }
.faq-item:first-of-type { border-top: 1px solid rgba(111, 103, 94, 0.18); }
.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .q-mark {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-main);
  margin-top: 1px;
}
.faq-q .q-toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 2px;
}
.faq-q .q-toggle::before,
.faq-q .q-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-main);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.faq-q .q-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] .faq-q .q-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a {
  padding: 0 4px 20px 44px;
  font-size: 15px;
}