/* ===== 基本トークン（style.css を反映） ===== */
:root{
  --font-size:16px;
  --background:#FAFAF8;
  --foreground: oklch(0.145 0 0);
  --card:#ffffff;
  --card-foreground: oklch(0.145 0 0);
  --primary:#030213;
  --primary-foreground:#ffffff;
  --secondary: oklch(0.95 0.0058 264.53);
  --muted:#ececf0;
  --muted-foreground:#717182;
  --accent:#e9ebef;
  --accent-foreground:#030213;
  --destructive:#d4183d;
  --destructive-foreground:#ffffff;
  --border:rgba(0,0,0,0.1);
  --input-background:#f3f3f5;
  --ring:oklch(0.708 0 0);
  --radius:10px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:var(--font-size);scroll-behavior:smooth}
body{
  background-color:var(--background);
  color:var(--foreground);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== 共通レイアウト ===== */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 16px}

/* スキップリンク */
.skip-link{
  position:absolute;top:1rem;left:1rem;z-index:50;
  padding:.5rem 1rem;background:var(--primary);color:var(--primary-foreground);
  border-radius:var(--radius);text-decoration:none;opacity:0;pointer-events:none;
}
.skip-link:focus{opacity:1;pointer-events:auto}

/* ====== Header（contact.html と同一クラス名・見た目） ====== */
.header{
  position:sticky;top:0;z-index:50;width:100%;
  border-bottom:1px solid var(--border);
  background-color:rgba(248,247,245,.95);
  backdrop-filter:blur(10px);
}
.header-content{display:flex;height:64px;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--foreground)}
.logo-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:8px;background:var(--primary);color:var(--primary-foreground)
}
/* Mobile Header CTA pill */
.header-cta-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 0.55rem 1rem;
  border-radius: 10px;

  background: #DC722F; /* 画像っぽいベージュ */
  color: #fff;
  text-decoration: none;

  line-height: 1.1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  max-width: 220px;
  flex: 0 1 auto;
}

.header-cta-pill__top {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.95;
  white-space: nowrap;
}

.header-cta-pill__bottom {
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}

.header-cta-pill:active {
  transform: translateY(1px);
}

.header-cta-pill:focus-visible {
  outline: 3px solid rgba(3, 2, 19, 0.25);
  outline-offset: 3px;
}

/* PCでは非表示（PCは既存の nav-desktop を使う） */
@media (min-width: 768px) {
  .header-cta-pill {
    display: none;
  }
}

/* かなり小さい端末で少し縮める */
@media (max-width: 360px) {
  .header-cta-pill {
    padding: 0.5rem 0.8rem;
    max-width: 200px;
  }
  .header-cta-pill__bottom {
    font-size: 0.95rem;
  }
}

.logo-text{font-weight:600}

.nav-desktop{display:none;align-items:center;gap:24px}
@media(min-width:768px){.nav-desktop{display:flex}}
.nav-link{background:none;border:none;color:var(--foreground);cursor:pointer;transition:color .2s;text-decoration:none}
.nav-link:hover{color:var(--primary)}

.menu-toggle{display:block;background:none;border:none;cursor:pointer;padding:.5rem;color:var(--foreground)}
@media(min-width:768px){.menu-toggle{display:none}}

.nav-mobile{padding:16px 0;flex-direction:column;gap:16px}
.nav-link-mobile{background:none;border:none;color:var(--foreground);cursor:pointer;transition:color .2s;text-decoration:none}
.nav-link-mobile:hover{color:var(--primary)}

.btn-primary{
  display:inline-block;padding:.5rem 1rem;border-radius:8px;background:var(--primary);
  color:var(--primary-foreground);border:none;cursor:pointer;transition:background-color .2s;text-decoration:none
}
.btn-primary:hover{background-color:rgba(3,2,19,.9)}
.btn-primary-mobile{
  padding:.5rem 1rem;border-radius:8px;background:var(--primary);color:var(--primary-foreground);
  width:100%;text-align:left;border:none;cursor:pointer;transition:background-color .2s;text-decoration:none
}
.btn-primary-mobile:hover{background-color:rgba(3,2,19,.9)}

/* ====== Footer（contact.html と同一クラス名・見た目） ====== */
.footer{background:var(--primary);color:var(--primary-foreground);padding:48px 0}
.footer-content{
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px
}
@media(min-width:768px){.footer-content{flex-direction:row}}
.footer-logo{display:flex;align-items:center;gap:.5rem}
.footer-logo-icon{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;
  background:var(--primary-foreground);color:var(--primary)
}
.footer-logo-text{font-weight:600}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.footer-link{color:var(--primary-foreground);text-decoration:none}
.footer-link:hover{text-decoration:underline}
.footer-copyright{text-align:center;font-size:.875rem;opacity:.85}

/* ====== 記事用スタイル ====== */
.section-article{background:#fff;padding:48px 0}
.article-header{margin:0 0 24px}
.article-title{font-size:1.875rem;line-height:1.4}
@media(min-width:768px){.article-title{font-size:2.25rem}}
.article-updated{color:var(--muted-foreground);margin-top:8px}

.article-intro p + p{margin-top:12px}
.article-section{margin-top:40px}
.article-section h2{font-size:1.5rem;margin-bottom:12px}
.article-section h3{font-size:1.25rem;margin:20px 0 8px}
.article-section h4{font-size:1.05rem;margin:14px 0 6px}

.article-section p{margin:8px 0}
ul,ol{padding-left:1.25rem}
ul li + li, ol li + li{margin-top:.35rem}

/* 記事本文の横幅を制限 */
.section-article .container{
  max-width: 800px;   /* 720〜800pxくらいがおすすめ。好みで調整OK */
  margin: 0 auto;     /* 中央寄せ（念のため明示） */
  padding: 0 16px;    /* 既存と同じ余白を維持 */
}

/* 目次 */
.toc{background:#F8F7F5;border:1px solid var(--border);border-radius:10px;padding:16px;margin:24px 0}
.toc-title{font-size:1.125rem;margin-bottom:8px}
.toc-list{padding-left:1.25rem}
.toc-list li + li{margin-top:.25rem}
.toc a{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(0,0,0,.2)}
.toc a:hover{border-bottom-color:transparent}

/* 出典 */
.refs{padding-left:1.25rem}
.refs li{word-break:break-all}

/* 画像や表（拡張時のためのベース） */
.article img{max-width:100%;height:auto;border-radius:8px}
table{width:100%;border-collapse:collapse;margin:12px 0}
th,td{border:1px solid var(--border);padding:8px;vertical-align:top}

/* ===== パンくずリスト ===== */
.breadcrumb {
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
  color: var(--muted-foreground);
  line-height: 1.6;           /* 行の高さを統一 */
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: baseline;      /* 子要素のベースラインでそろえる */
}

.breadcrumb li {
  display: flex;
  align-items: baseline;      /* li 内の a とテキストもベースラインそろえ */
}

.breadcrumb li::after {
  content: ">";
  margin: 0 0.25rem;
}

.breadcrumb li:last-child::after {
  content: "";
}

.breadcrumb a {
  text-decoration: none;
  color: inherit;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb li[aria-current="page"] {
  color: var(--muted-foreground);
}

/* ===== ふぞよ塾 CTA ===== */
.cta-fuzoyo-section {
  max-width: 720px;
  margin: 40px auto;
  text-align: center;
}

.cta-fuzoyo-label {
  margin: 0 0 6px;              /* ここを 12px → 6px にして余白を少しだけ詰めた */
  font-size: 18px;
  font-weight: 700;
  color: #000000;
}

.cta-fuzoyo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background-color: #E5A04C;     /* 画像に近いオレンジ */
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s ease, transform 0.1s ease,
              box-shadow 0.2s ease;
}

.cta-fuzoyo-button-text {
  white-space: nowrap;
}

/* ホバー時 */
.cta-fuzoyo-button:hover {
  background-color: #D78F39;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* スマホ向け */
@media (max-width: 600px) {
  .cta-fuzoyo-section {
    padding: 0 12px;
  }

  .cta-fuzoyo-button {
    width: 100%;
    padding: 14px 14px;
    font-size: 16px;
  }

  .cta-fuzoyo-button-text {
    white-space: normal; /* スマホで改行OKにする */
  }
}

/* ===== アクセス情報カード（記事用） ===== */
.access-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #F8F7F5; /* 目次(toc)と同系統に寄せる */
  padding: 14px 16px;
  margin: 12px 0 18px;
}

.access-card__dl{ margin: 0; }

.access-card__row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.access-card__row:last-child{ margin-bottom: 0; }

.access-card__dt{
  min-width: 7.5em;
  font-weight: 700;
}

.access-card__dd{ margin: 0; }

.access-card__note{
  margin: 10px 0 0;
  font-size: 0.95em;
  color: var(--muted-foreground);
}

@media (max-width: 480px){
  .access-card__dt{ min-width: 6.5em; }
}