@charset "UTF-8";

/* =========================================
   食べ痩せ講座（会員エリア）
   LPと同じ配色。ただし読むための画面なので、
   余白を広く・文字を大きめにしている。
   ========================================= */

:root{
  --pink:       #ee5e82;
  --pink-pale:  #fdeff3;
  --line:       #06c655;
  --green:      #8bb87a;
  --green-dark: #6f9d5f;
  --green-pale: #f0f6ec;
  --text:       #3f3a37;
  --text-thin:  #6d6663;
  --cream:      #fcfbf9;
  --rule:       #e7e0da;

  --serif: "Hiragino Mincho ProN","HiraMinProN-W3","Yu Mincho","YuMincho","MS PMincho",serif;
  --sans:  "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",sans-serif;

  --w: 720px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--cream);
  font-size:16px;
  line-height:2;
  letter-spacing:.02em;
}

img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

/* ---------- ヘッダー ---------- */
.head{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:12px 20px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.head__home{
  flex:0 0 auto;
  font-size:13px;
  text-decoration:none;
  color:var(--green-dark);
  border:1px solid var(--green);
  border-radius:999px;
  padding:3px 14px;
  line-height:1.7;
}
.head__title{
  margin:0;
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.1em;
  color:var(--text-thin);
}

/* ログイン中の表示。狭い画面では名前だけ隠して操作は残す。 */
.head__me{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:var(--text-thin);
}
.head__name{ white-space:nowrap; }
.head__link{
  text-decoration:none;
  color:var(--green-dark);
  border-bottom:1px solid var(--green-pale);
  white-space:nowrap;
}
@media (max-width:560px){
  .head{ gap:10px; padding-left:16px; padding-right:16px; }
  .head__name{ display:none; }
  .head__me{ gap:9px; font-size:11px; }
  /* タイトルが2行に折れるとヘッダの高さが倍になるので、折らずに詰める */
  .head__title{ font-size:12.5px; letter-spacing:.04em; white-space:nowrap; }
  .head__home{ padding:3px 11px; font-size:12px; }
}

/* =========================================
   ログイン・パスワード変更
   ========================================= */
.auth-body{
  background:linear-gradient(170deg,#f5f3e8 0%, #f2f7ec 45%, #fdfbf7 100%);
  min-height:100vh;
}
.auth{
  max-width:420px;
  margin:0 auto;
  padding:48px 20px 60px;
}
.auth__card{
  background:#fff;
  border-radius:18px;
  padding:32px 26px 28px;
  box-shadow:0 10px 32px rgba(63,58,55,.10);
}
.auth__brand{
  margin:0 0 3px;
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--green-dark);
}
.auth__tagline{
  margin:0 0 20px;
  font-size:11px;
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--text-thin);
}
.auth__title{
  margin:0 0 22px;
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
  letter-spacing:.1em;
}
.auth__lead{
  margin:0 0 20px;
  font-size:13.5px;
  line-height:1.9;
  color:var(--text-thin);
}
.auth__error{
  margin:0 0 18px;
  padding:12px 14px;
  border-radius:8px;
  background:var(--pink-pale);
  color:#b03a5b;
  font-size:13px;
  line-height:1.8;
}
.auth__ok{
  margin:0 0 18px;
  padding:12px 14px;
  border-radius:8px;
  background:var(--green-pale);
  color:var(--green-dark);
  font-size:13.5px;
}
.auth__form{ margin:0; }
.auth__label{
  display:block;
  margin:0 0 6px;
  font-size:12.5px;
  font-weight:700;
  color:var(--text-thin);
}
.auth__input{
  width:100%;
  padding:12px 14px;
  margin:0 0 18px;
  font-size:16px;          /* iOSで自動ズームさせないため16px以上 */
  font-family:inherit;
  color:var(--text);
  background:#fdfcfa;
  border:1px solid var(--rule);
  border-radius:10px;
}
.auth__input:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(139,184,122,.18);
}
.auth__btn{
  appearance:none;
  width:100%;
  border:0;
  border-radius:999px;
  padding:15px 20px;
  margin-top:4px;
  background:var(--line);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(6,198,85,.26);
}
.auth__btn:hover{ background:#05a948; }
.auth__note{
  margin:22px 0 0;
  font-size:12px;
  line-height:1.9;
  color:var(--text-thin);
}
.auth__back{
  margin:22px 0 0;
  text-align:center;
  font-size:12.5px;
}
.auth__back a{ color:var(--green-dark); }

/* =========================================
   管理画面
   ========================================= */
.admin{ max-width:960px; margin:0 auto; padding:36px 20px 70px; }
.admin__title{
  margin:0 0 8px;
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
  letter-spacing:.08em;
}
.admin__lead{ margin:0 0 28px; font-size:13.5px; color:var(--text-thin); }

.admin__box{
  background:#fff;
  border-radius:16px;
  padding:26px 24px;
  margin-bottom:26px;
  box-shadow:0 1px 3px rgba(63,58,55,.05), 0 8px 20px rgba(63,58,55,.045);
}
.admin__h2{
  margin:0 0 18px;
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  padding-left:12px;
  border-left:4px solid var(--green);
}
.admin__form{ max-width:420px; }
.admin__error,.admin__ok{
  margin:0 0 20px;
  padding:12px 16px;
  border-radius:10px;
  font-size:13.5px;
}
.admin__error{ background:var(--pink-pale); color:#b03a5b; }
.admin__ok{ background:var(--green-pale); color:var(--green-dark); }

/* 発行直後のパスワード表示。一度きりなので目立たせる。 */
.admin__issued{
  background:#fff8e6;
  border:1px solid #e8d9a8;
  border-radius:14px;
  padding:22px 24px;
  margin-bottom:26px;
}
.admin__issued-h{
  margin:0 0 14px;
  font-weight:700;
  color:#8a6d1f;
  font-size:15px;
}
.admin__issued dl{
  margin:0 0 14px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 18px;
  font-size:14px;
}
.admin__issued dt{ color:var(--text-thin); white-space:nowrap; }
.admin__issued dd{ margin:0; }
.admin__issued code{
  font-size:18px;
  font-weight:700;
  letter-spacing:.08em;
  background:#fff;
  border:1px solid #e8d9a8;
  border-radius:6px;
  padding:4px 12px;
  user-select:all;
}
.admin__issued-note{ margin:0; font-size:12.5px; line-height:1.9; color:#8a6d1f; }

.admin__tablewrap{ overflow-x:auto; }
.admin__table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  white-space:nowrap;
}
.admin__table th,.admin__table td{
  padding:11px 12px;
  border-bottom:1px solid var(--rule);
  text-align:left;
  vertical-align:middle;
}
.admin__table th{
  font-size:11.5px;
  color:var(--text-thin);
  font-weight:700;
  border-bottom-width:2px;
}
.admin__table tr.is-off{ opacity:.5; }
.admin__note{ white-space:normal; max-width:220px; color:var(--text-thin); font-size:12px; }
.admin__ops{ display:flex; gap:8px; }
.admin__ops form{ margin:0; }
.admin__mini{
  appearance:none;
  border:1px solid var(--rule);
  background:#fff;
  border-radius:999px;
  padding:5px 13px;
  font-family:inherit;
  font-size:11.5px;
  color:var(--text-thin);
  cursor:pointer;
  white-space:nowrap;
}
.admin__mini:hover{ border-color:var(--green); color:var(--green-dark); }

.tag{
  display:inline-block;
  border-radius:999px;
  padding:2px 10px;
  font-size:11px;
  line-height:1.7;
}
.tag--on{ background:var(--green-pale); color:var(--green-dark); }
.tag--off{ background:#eee9e4; color:#8a8073; }
.tag--warn{ background:#fff3d6; color:#8a6d1f; }

.admin__hint{
  margin:6px 0 0;
  font-size:12px;
  color:var(--text-thin);
  line-height:1.8;
}
.admin__empty{ margin:0; font-size:13.5px; color:var(--text-thin); }
.admin__foot{ margin:0; font-size:12px; color:var(--text-thin); line-height:1.9; }

/* 管理画面の進み具合。表のセルに収めるので、目次の progress より小さくする */
.bar{
  width:120px;
  height:8px;
  border-radius:999px;
  background:#eae4de;
  overflow:hidden;
}
.bar__fill{
  display:block; height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--line));
}
.bar__label{
  display:inline-block;
  margin-top:5px;
  font-size:11.5px;
  color:var(--text-thin);
  white-space:nowrap;
}

/* =========================================
   目次
   ========================================= */
.toc-main{ max-width:var(--w); margin:0 auto; padding:44px 20px 60px; }

.toc-eyebrow{
  text-align:center;
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--green-dark);
}
.toc-title{
  font-family:var(--serif);
  font-size:clamp(24px, 6vw, 30px);
  font-weight:600;
  text-align:center;
  margin:0 0 8px;
  letter-spacing:.14em;
  line-height:1.4;
}
.toc-tagline{
  text-align:center;
  margin:0 0 26px;
  font-family:var(--serif);
  font-size:13px;
  line-height:1.8;
  letter-spacing:.04em;
  color:var(--green-dark);
}
.toc-lead{
  text-align:center;
  font-size:14px;
  line-height:1.9;
  color:var(--text-thin);
  margin:0 0 34px;
}

.progress{ margin-bottom:34px; }
.progress__bar{
  height:10px;
  border-radius:999px;
  background:#eae4de;
  overflow:hidden;
}
.progress__bar span{
  display:block; height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--line));
  transition:width .4s ease;
}
.progress__text{
  margin:10px 0 0;
  text-align:right;
  font-size:13px;
  color:var(--text-thin);
}

/* STEPごとのグループ。並べただけの一覧だと章の関係が見えないため束ねる。 */
.toc-steps{ margin:0; }
.toc-step{ margin-bottom:30px; }
.toc-step__head{
  padding:16px 18px 14px;
  background:linear-gradient(180deg,#f4f8ef 0%, #fbfdf8 100%);
  border:1px solid #e3ecdb;
  border-radius:14px 14px 0 0;
  border-bottom:0;
  position:relative;
}
.toc-step__no{
  margin:0 0 2px;
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--green-dark);
}
.toc-step__ttl{
  margin:0 0 6px;
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  letter-spacing:.06em;
}
.toc-step__lead{
  margin:0;
  font-size:12.5px;
  line-height:1.85;
  color:var(--text-thin);
  padding-right:52px;
}
.toc-step__count{
  position:absolute;
  top:16px; right:16px;
  margin:0;
  font-size:11px;
  color:var(--green-dark);
  background:#fff;
  border:1px solid #dde9d1;
  border-radius:999px;
  padding:2px 10px;
  line-height:1.7;
}
.toc-step .toc{
  border:1px solid #e3ecdb;
  border-top:0;
  border-radius:0 0 14px 14px;
  background:#fff;
  padding:0 16px;
}

.toc__item{ border-bottom:1px solid var(--rule); }
.toc__item:last-child{ border-bottom:0; }

.toc__link{
  display:flex; align-items:center; gap:14px;
  padding:18px 6px;
  text-decoration:none;
}
.toc__check{
  flex:0 0 22px;
  width:22px; height:22px;
  border:1.5px solid #d5cdc6;
  border-radius:50%;
  position:relative;
}
.toc__item.is-done .toc__check{
  background:var(--line);
  border-color:var(--line);
}
.toc__item.is-done .toc__check::after{
  content:"";
  position:absolute; left:6px; top:6px;
  width:8px; height:4px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

.toc__text{ flex:1 1 auto; line-height:1.6; }
.toc__no{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--green-dark);
}
.toc__ttl{
  display:block;
  font-family:var(--serif);
  font-size:18px;
}
.toc__meta{
  display:block;
  font-size:11.5px;
  color:var(--text-thin);
  margin-top:2px;
}

.toc__item--draft .toc__link{ opacity:.45; cursor:default; }

.toc-note{
  margin-top:30px;
  font-size:12px;
  color:var(--text-thin);
  line-height:1.8;
}
/* 端末に残っていたチェックを引き継いだときだけ出る一文 */
.toc-note--sync{
  margin-top:8px;
  padding:8px 12px;
  border-radius:8px;
  background:var(--green-pale);
  color:var(--green-dark);
}

/* =========================================
   進み具合の帯（ヘッダ直下）
   出すのは進み具合だけ。STEPの名前と説明は目次に置いてある。
   ========================================= */
.rail{
  background:#fff;
  border-bottom:1px solid var(--rule);
}
.rail__inner{
  max-width:var(--w);
  margin:0 auto;
  padding:13px 20px 14px;
}

/* 数字とバーは「終えた章の数」で、目次のバーと同じ意味。
   同じ見た目の部品が2つの意味を持たないよう、太さだけ変えて色は揃える。 */
.rail__prog{ margin:0; }
.rail__prog-h{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 6px;
  font-size:11.5px;
  color:var(--text-thin);
  letter-spacing:.04em;
}
.rail__prog-n{
  flex:none;
  font-size:12px;
  font-weight:700;
  color:var(--green-dark);
  letter-spacing:.06em;
}
.rail__bar{
  height:6px;
  border-radius:999px;
  background:#eae4de;
  overflow:hidden;
}
.rail__bar span{
  display:block; height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--line));
  transition:width .4s ease;
}

.rail__meta{
  margin:9px 0 0;
  font-size:11.5px;
  color:var(--text-thin);
  letter-spacing:.04em;
}
.rail__meta b{ color:var(--green-dark); }

/* =========================================
   この章のねらい
   「なぜいま読むのか」と「読み終えると何が変わるか」の2つだけ。
   STEPの説明と前後の章は帯とページャーが持つので、ここでは重ねない。
   ========================================= */
.aim{
  margin:0 0 40px;
  padding:0 0 0 20px;
  border-left:3px solid var(--green);
}
.aim__title{
  margin:0 0 16px;
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  letter-spacing:.08em;
}
.aim__list{ margin:0; }
.aim__list dt{
  margin:0 0 5px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--green-dark);
}
.aim__list dd{
  margin:0 0 20px;
  font-size:14.5px;
  line-height:1.95;
}
.aim__list dd:last-child{ margin-bottom:0; }

/* =========================================
   各章
   ========================================= */
.chapter{ padding-bottom:50px; }
.chapter__body{ max-width:var(--w); margin:0 auto; padding:0 20px; }

/* ---------- 章扉 ----------
   写真の上に文字を乗せると読みづらいので、白いカードを重ねる形にする。 */
.hero__img img{
  width:100%;
  height:clamp(170px, 32vw, 290px);
  object-fit:cover;
  object-position:center 55%;
}
.hero__card{
  position:relative;
  z-index:1;
  width:calc(100% - 32px);
  max-width:var(--w);
  margin:-52px auto 38px;
  background:#fff;
  border-radius:18px;
  padding:28px 24px 26px;
  box-shadow:0 10px 32px rgba(63,58,55,.10);
}
.hero--plain .hero__card{
  margin-top:34px;
  box-shadow:none;
  background:transparent;
  padding-left:20px; padding-right:20px;
}
.hero__no{
  display:inline-block;
  margin:0 0 10px;
  padding:3px 12px;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--green-dark);
  background:var(--green-pale);
  border-radius:999px;
  line-height:1.8;
}
.hero__title{
  font-family:var(--serif);
  font-size:clamp(27px, 7vw, 36px);
  font-weight:600;
  margin:0 0 14px;
  letter-spacing:.1em;
  line-height:1.4;
}
.hero__lead{
  margin:0;
  font-size:14.5px;
  line-height:1.9;
  color:var(--text-thin);
}

.block{ margin-bottom:44px; }
.block__title{
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  margin:0 0 18px;
  padding-left:14px;
  border-left:4px solid var(--green);
  line-height:1.6;
  letter-spacing:.06em;
}
.block__list li{
  position:relative;
  padding:0 0 0 24px;
  margin-bottom:18px;
  font-size:15.5px;
}
.block__list li::before{
  content:"";
  position:absolute; left:2px; top:.95em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--green-pale);
  border:2px solid var(--green);
}
.block__list b{ color:var(--green-dark); }

/* 実践のポイントはチェック印にする */
.block--practice .block__list li::before{
  width:11px; height:6px;
  border:0;
  border-left:2.5px solid var(--green);
  border-bottom:2.5px solid var(--green);
  border-radius:0;
  background:none;
  transform:rotate(-45deg);
  top:.85em;
}

/* ---------- 要点カード ---------- */
.cards{ display:grid; gap:12px; }
.card{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
  border-radius:14px;
  padding:20px 22px;
  box-shadow:0 1px 3px rgba(63,58,55,.05), 0 8px 20px rgba(63,58,55,.045);
}
.card__n{
  flex:0 0 34px;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.04em;
  margin-top:.35em;
}
.card__text{ margin:0; font-size:15.5px; line-height:1.95; }
.card__text b{ color:var(--green-dark); }

/* ---------- よくある勘違い ---------- */
.myth{
  display:grid;
  gap:2px;
  margin:0 0 44px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(63,58,55,.05), 0 8px 20px rgba(63,58,55,.045);
}
.myth__wrong,
.myth__right{ padding:20px 22px; }
.myth__wrong{ background:#f5f2ef; }
.myth__right{ background:#fff; }

.myth__label{
  margin:0 0 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  display:inline-block;
  border-radius:999px;
  padding:3px 12px;
  line-height:1.7;
}
.myth__wrong .myth__label{ background:#e6ded6; color:#7d7266; }
.myth__right .myth__label{ background:var(--green); color:#fff; }

.myth__text{ margin:0; font-size:14.5px; line-height:1.95; }
.myth__wrong .myth__text{
  color:#7d7266;
  text-decoration:line-through;
  text-decoration-color:rgba(125,114,102,.4);
  text-decoration-thickness:1px;
}
.myth__right .myth__text b{ color:var(--green-dark); }

@media (min-width:600px){
  .myth{ grid-template-columns:1fr 1fr; }
}

/* ---------- 分解図（炭水化物＝糖質＋食物繊維） ---------- */
.formula{
  margin:0 0 44px;
  padding:26px 20px 22px;
  text-align:center;
  background:linear-gradient(180deg,#f4f8ef 0%, #fbfdf8 100%);
  border:1px solid #e3ecdb;
  border-radius:16px;
}
.formula__whole{
  position:relative;
  display:inline-block;
  margin:0 0 22px;
  padding-bottom:16px;
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:.12em;
  color:var(--text-thin);
}
.formula__whole::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:1.5px; height:14px;
  background:#cfe0c0;
  transform:translateX(-50%);
}
.formula__row{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}
.formula__part{
  min-width:118px;
  padding:13px 18px;
  background:#fff;
  border:1.5px solid #dde9d1;
  border-radius:12px;
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:.08em;
  line-height:1.5;
}
.formula__part.is-key{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
  box-shadow:0 6px 16px rgba(139,184,122,.34);
}
.formula__plus{ color:var(--green-dark); font-size:15px; }
.formula__note{
  margin:20px 0 0;
  font-size:13.5px;
  line-height:1.85;
  color:var(--text-thin);
}
.formula__note b{ color:var(--green-dark); }

/* ---------- たとえ話カード ---------- */
.figcard{
  margin:0 0 44px;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(63,58,55,.05), 0 14px 34px rgba(63,58,55,.07);
}
.figcard__img img{
  width:100%;
  aspect-ratio:12/5;
  object-fit:cover;
}
.figcard__body{ padding:24px 22px 26px; }
.figcard__title{
  margin:0 0 12px;
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.6;
}
.figcard__text{ margin:0; font-size:15px; line-height:1.95; }
.figcard__text b{ color:var(--green-dark); }

/* ---------- 写真カード（3枚並び） ---------- */
.gallery{ display:grid; gap:16px; margin:0 0 44px; }
.gcard{
  margin:0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(63,58,55,.05), 0 8px 20px rgba(63,58,55,.05);
}
.gcard img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.gcard figcaption{ padding:16px 16px 18px; }
.gcard__label{
  margin:0 0 6px;
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.08em;
  color:var(--green-dark);
}
.gcard__note{ margin:0; font-size:13px; line-height:1.8; color:var(--text-thin); }

@media (min-width:600px){
  .gallery{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- 写真の出所 ---------- */
.credits{
  margin:0 0 32px;
  font-size:12.5px;
  color:var(--text-thin);
}
.credits summary{
  cursor:pointer;
  list-style:none;
  color:var(--green-dark);
  padding:4px 0;
}
.credits summary::-webkit-details-marker{ display:none; }
.credits summary::before{ content:"＋ "; }
.credits[open] summary::before{ content:"− "; }
.credits p{ margin:8px 0 6px; line-height:1.8; }
.credits ul{ margin:0; }
.credits li{ line-height:1.9; }
.credits a{ color:var(--green-dark); }

/* ---------- 本編動画 ----------
   枠は 16:9 で先に確保しておく。あとから iframe を入れても
   下の要素が押し下げられない（レイアウトシフトを起こさない）。 */
.block--video{
  background:#fff;
  border-radius:16px;
  padding:24px 22px 22px;
  box-shadow:0 1px 3px rgba(63,58,55,.05), 0 8px 20px rgba(63,58,55,.045);
}
.block--video .block__title{ margin-bottom:14px; }

.video__label{
  margin:0 0 2px;
  font-size:14px;
  font-weight:700;
}
.video__meta{
  margin:0 0 4px;
  font-size:12px;
  color:var(--text-thin);
}

.video__frame{
  position:relative;
  margin-top:14px;
  aspect-ratio:16 / 9;
  border-radius:12px;
  overflow:hidden;
  background:#efeae4;
}
.video__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* 動画が入るまでのプレースホルダ */
.video__ph{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  background:
    radial-gradient(120% 90% at 50% 32%, #f7f4ef 0%, rgba(247,244,239,0) 70%),
    linear-gradient(160deg, #eee9e2 0%, #e6e0d7 100%);
  border:1px dashed #cfc6ba;
  border-radius:12px;
}
.video__ph-icon{
  flex:0 0 auto;          /* 縦方向のflexで潰されないように */
  width:44px; height:44px;
  border-radius:50%;
  border:1.5px solid #b9ad9f;
  position:relative;
  margin-bottom:10px;
}
.video__ph-icon::after{
  content:"";
  position:absolute;
  left:53%; top:50%;
  transform:translate(-50%,-50%);
  border-left:12px solid #b9ad9f;
  border-top:7.5px solid transparent;
  border-bottom:7.5px solid transparent;
}
.video__ph-text{
  margin:0 0 5px;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.08em;
  color:#6f6558;
}
.video__ph-sub{
  margin:0;
  font-size:11.5px;
  line-height:1.7;
  color:#8a8073;
}

@media (min-width:768px){
  .video__ph{ padding:20px; }
  .video__ph-icon{ width:54px; height:54px; margin-bottom:14px; }
  .video__ph-icon::after{
    border-left-width:14px;
    border-top-width:9px;
    border-bottom-width:9px;
  }
  .video__ph-text{ font-size:16px; margin-bottom:6px; }
  .video__ph-sub{ font-size:12px; line-height:1.85; }
}

/* 音声 */
.block--audio{
  background:#fff;
  border-radius:16px;
  padding:24px 22px 20px;
  box-shadow:0 1px 3px rgba(63,58,55,.05), 0 8px 20px rgba(63,58,55,.045);
}
.block--audio .block__title{ margin-bottom:16px; }
.audio{ margin-bottom:20px; }
.audio__label{
  margin:0 0 8px;
  font-size:14px;
  font-weight:700;
}
.audio audio{ width:100%; height:40px; }
.audio__note{
  margin:14px 0 0;
  font-size:11.5px;
  color:var(--text-thin);
  line-height:1.7;
}

/* 体験談 */
.block--story{
  background:var(--pink-pale);
  border-radius:16px;
  padding:28px 24px;
}
.block--story .block__title{
  border-left-color:var(--pink);
  color:var(--pink);
}
.block--story p{ margin:0 0 1em; font-size:15px; }
.block__sign{
  text-align:right;
  font-family:var(--serif);
  font-size:13px !important;
  color:var(--text-thin);
  margin:0 !important;
}

/* アクションプラン */
.block--action{
  background:var(--green-pale);
  border-radius:16px;
  padding:28px 24px;
}
.ap li{ margin-bottom:12px; }
.ap label{
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer;
  font-size:15px;
  line-height:1.8;
}
.ap input{
  flex:0 0 20px;
  width:20px; height:20px;
  margin-top:.5em;
  accent-color:var(--line);
}
.ap input:checked + span{
  color:var(--text-thin);
  text-decoration:line-through;
}
.ap__note{
  margin:18px 0 0;
  font-size:12px;
  color:var(--text-thin);
  line-height:1.8;
}

/* 書き起こし */
.ts{
  border:1px solid var(--rule);
  border-radius:12px;
  background:#fff;
}
.ts summary{
  cursor:pointer;
  list-style:none;
  padding:14px 20px;
  font-size:14px;
  font-weight:700;
  color:var(--green-dark);
  position:relative;
}
.ts summary::-webkit-details-marker{ display:none; }
.ts summary::after{
  content:"";
  position:absolute; right:20px; top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--green-dark);
  border-bottom:2px solid var(--green-dark);
  transform:translateY(-70%) rotate(45deg);
}
.ts[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.ts__caution{
  margin:0;
  padding:0 20px 10px;
  font-size:11.5px;
  color:var(--pink);
}
.ts__h{
  margin:18px 0 8px;
  padding:0 20px;
  font-family:var(--serif);
  font-size:16px;
}
.ts p{
  margin:0 0 1em;
  padding:0 20px;
  font-size:14px;
  line-height:1.95;
  color:var(--text-thin);
}

/* 注記 */
.draft, .todo{
  border-radius:4px;
  padding:14px 18px;
  font-size:13.5px;
  line-height:1.8;
  margin:0 0 32px;
}
.draft{ background:#f3f0ec; color:var(--text-thin); }
.todo{ background:#fff7e2; color:#8a6d1f; }

/* 完了ボタン */
.done{ text-align:center; margin:50px 0 34px; }
.done__btn{
  appearance:none;
  border:0;
  background:var(--line);
  color:#fff;
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  padding:16px 34px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(6,198,85,.24);
}
.done__btn.is-done{
  background:#fff;
  color:var(--text-thin);
  border:1px solid var(--rule);
  box-shadow:none;
}
.done__note{
  margin:12px 0 0;
  font-size:12.5px;
  color:var(--green-dark);
}

/* ページ送り */
.pager{
  display:flex; justify-content:space-between; gap:14px;
  border-top:1px solid var(--rule);
  padding-top:24px;
  font-size:13px;
}
.pager a{
  text-decoration:none;
  color:var(--green-dark);
  line-height:1.7;
}
.pager__next{ text-align:right; }

/* フッター */
.foot{
  border-top:1px solid var(--rule);
  padding:28px 20px 40px;
  text-align:center;
  font-size:12px;
  color:var(--text-thin);
  background:#fff;
}
.foot p{ margin:0 0 6px; }
.foot__warn{ font-size:11px; }

.foot__links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px 18px;
  margin:0 0 20px;
}
.foot__links a{
  text-decoration:none;
  color:var(--green-dark);
  border-bottom:1px solid var(--rule);
  font-size:12.5px;
}

@media (min-width:768px){
  body{ font-size:17px; }
  .chapter{ padding-bottom:70px; }
  .chapter__body{ padding:0 24px; }
  .hero__card{ margin-top:-64px; padding:36px 34px 32px; }
  .figcard__body{ padding:30px 32px 32px; }
  .toc-main{ padding:60px 24px 80px; }
}