@charset "utf-8";
/* ============================================================
   公式メルマガ・LINE ページ  style.css
   道家道学院 埼玉校 埼玉道学院
   ------------------------------------------------------------
   ・色は :root の変数（--teal-text など）を書き換えれば全体に反映されます
   ・フォント指定は index.html 内の Google Fonts の link とセットです
   ・719px 以下はページ末尾のメディアクエリでスマホ表示に切り替わります
   ・HTML 内の <span class="wb"> は改行禁止（泣き別れ防止）用のため
     文言を差し替える際も文節の単位で囲ってください
   ============================================================ */

:root{
  --teal:#00E1DA; --teal-deep:#1C8FA0; --teal-text:#10796A; --teal-text-hover:#0A5F58;
  --teal-bg:#EAF8F6; --card-border:#D8EEEC;
  --ink:#17242A; --ink-soft:#3B4E52; --ink-mute:#3B4E52; --ink-faint:#5E7073;
}
*{box-sizing:border-box}

body {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  font-kerning: normal;
}
p,
li,
dd,
dt,
td,
th,
figcaption,
blockquote {
  line-break: strict;
}
a{color:var(--teal-text);text-decoration:none}
a:hover{color:var(--teal-text-hover)}
img{max-width:100%}
h1,h2{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
p,li{text-wrap:pretty}
.wb{white-space:nowrap}
.site-header{position:sticky;top:0;z-index:50;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 48px;border-bottom:1px solid rgba(23,36,42,0.14);flex-wrap:wrap}
.logo-block{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.logo-block img{height:32px;width:auto;display:block}
.logo-sub{font-size:14px;color:var(--ink-faint);letter-spacing:0.04em}
.header-back{font-size:16px;color:var(--teal-text);white-space:nowrap}

.breadcrumb{padding:20px 48px 0;font-size:14px;color:var(--ink-faint)}
.breadcrumb a{color:var(--ink-faint)}
.breadcrumb a:hover{color:var(--teal-text-hover)}

.article{max-width:760px;margin:0 auto;padding:40px 48px 72px}
.eyebrow{font-size:16px;letter-spacing:0.18em;color:var(--teal-text);margin-bottom:16px}
h1{margin:0 0 22px;font-family:'Shippori Mincho B1',serif;font-weight:600;font-size:34px;line-height:1.5}
.lead{margin:0 0 18px;font-size:18px;line-height:2;color:var(--ink-soft)}
h2{margin:48px 0 18px;font-family:'Shippori Mincho B1',serif;font-weight:600;font-size:24px;line-height:1.55}
.article p{margin:0 0 18px;font-size:16px;line-height:1.95;color:var(--ink-mute)}

.benefit{margin:0;padding:26px 28px;background:var(--teal-bg);border-radius:4px}
.benefit-title{font-family:'Shippori Mincho B1',serif;font-size:18px;color:var(--teal-text-hover);margin-bottom:12px}
.benefit p{margin:0 0 10px;font-size:16px;line-height:1.9;color:var(--ink-soft)}
.benefit p:last-child{margin-bottom:0}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:26px 0 0}
.actions a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 32px;border-radius:999px;font-size:16px;font-weight:700;transition:background .15s ease,transform .15s ease}
.actions a:hover{transform:translateY(-2px)}
.btn-mail{background:var(--teal-text);color:#fff}
.btn-mail:hover{background:var(--teal-text-hover);color:#fff}
.btn-line{background:#06C755;color:#fff}
.btn-line:hover{background:#05A948;color:#fff}
.course-box{margin:44px 0 0;padding:26px 28px;border:1px solid var(--card-border);border-radius:4px}
.course-box p{margin:0 0 14px}
.course-box a.course-link{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.notes{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--card-border)}
.notes p{margin:0 0 10px;font-size:14px;line-height:1.85;color:var(--ink-faint)}

.site-footer{padding:36px 48px;background:var(--teal-bg);border-top:1px solid var(--card-border);text-align:center}
.footer-org{font-family:'Shippori Mincho B1',serif;font-size:16px;color:var(--ink);margin-bottom:8px}
.site-footer p{margin:0 0 6px;font-size:14px;line-height:1.8;color:var(--ink-faint)}
.footer-home{display:inline-block;margin-top:14px;font-size:16px;color:var(--teal-text)}

@media (max-width:719px){
  .actions{flex-direction:column}
  .actions a{width:100%}
  .benefit,.course-box{padding:22px 20px}
  .site-header{padding:14px 20px}
  .breadcrumb{padding:16px 20px 0}
  .article{padding:28px 20px 56px}
  h1{font-size:26px}
  h2{font-size:21px;margin-top:40px}
  .lead{font-size:17px}
  .site-footer{padding:32px 20px}
  .notes p span {
    display: inline-block;
  }
  .site-footer p span {
    display: inline-block;
  }
  .footer-org span {
    display: inline-block;
  }
}