/* 「季節の暮らしごと」第1回 味噌をつくる会
   参考：BEAMS「別府・竹細工」の手書き×細枠×余白。
   色はわいが舎の「白と黒」（地は白・文字は黒・線は薄いグレー）。2026-10-12 に緑と生成りから直した */
:root{
  --bg:#FAFAFA;        /* やわらかい白（きなりはやめる・2026-10-15 あんちゃん） */
  --paper:#FFFFFF;
  --panel:#F2F2F2;     /* 情報欄：薄いグレー */
  --ink:#333333;       /* 文字 */
  --sub:#6B6B6B;       /* 補助の文字 */
  --green:#2F6B52;     /* 緑の差し色（2026-10-15 あんちゃん・緑デザインに戻す） */
  --green-soft:#7FA68F;
  --line:#E4E4E4;      /* 薄いグレーの罫線 */
  --serif:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --hand:"Yomogi","Shippori Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.95}

/* 全体を囲む細い罫線のフレーム（参考サイトの枠） */
.frame{
  max-width:860px;margin:24px auto;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;
  padding:0 0 8px;overflow:hidden;position:relative;
}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}

/* ヒーロー写真＋縦書きラテン */
.hero{position:relative;margin:28px 20px 0;border:1px solid var(--line);overflow:hidden;border-radius:2px}
.hero img{width:100%;height:auto;max-height:68vh;object-fit:cover;object-position:center;display:block}
.vlatin{
  position:absolute;top:14px;left:14px;z-index:2;
  writing-mode:vertical-rl;letter-spacing:.35em;font-size:12px;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35);font-family:var(--serif)
}

/* シリーズ名・タイトル */
.series{text-align:center;color:var(--green);font-family:var(--serif);font-size:15px;letter-spacing:.1em;margin:34px 0 6px}
.series .no{color:var(--green-soft);font-size:13px}
h1.brush{font-family:var(--hand);font-weight:400;color:var(--green);
  font-size:clamp(34px,9vw,54px);line-height:1.3;text-align:center;margin:4px 0 10px}
.tagline{font-family:var(--hand);text-align:center;color:var(--ink);
  font-size:clamp(15px,3.8vw,19px);line-height:1.9;margin:0 0 6px}
.sprout,.wrap .sprout{width:32px;height:1px;background:var(--ink);margin:18px auto 28px}   /* 区切りの印：黒の細い線（絵文字はやめた） */

/* 本文 */
.lead{font-family:var(--hand);font-size:clamp(18px,4.6vw,23px);line-height:1.95;text-align:center;color:var(--ink);margin:26px 0}
.wrap p{margin:18px 0}
strong{color:var(--green);font-weight:600}

/* 見出し：手書き＋上に黒の細い線 */
h2.brush{font-family:var(--hand);font-weight:400;color:var(--green);
  font-size:clamp(23px,5.2vw,30px);text-align:center;margin:46px 0 18px;position:relative}
h2.brush::before{content:"";display:block;width:32px;height:1px;background:var(--ink);margin:0 auto 14px}

/* 写真ギャラリー */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:30px 0}
.gallery figure{margin:0}
.gallery img{width:100%;height:190px;object-fit:cover;display:block;border:1px solid var(--line);border-radius:3px}
.gallery figcaption{font-family:var(--hand);color:var(--sub);font-size:14px;text-align:center;margin-top:8px}

/* 情報枠 */
.info{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:22px 24px;margin:30px 0}
.info dt{color:var(--green);font-family:var(--serif);font-size:14px;letter-spacing:.06em;margin-top:14px}
.info dt:first-child{margin-top:0}
.info dd{margin:2px 0 0}
.note{color:var(--sub);font-size:14px;line-height:1.85}

/* 当日の流れ */
.flow{list-style:none;counter-reset:step;padding:0;margin:18px 0}
.flow li{counter-increment:step;position:relative;padding:16px 0 16px 56px;border-bottom:1px dashed var(--line)}
.flow li:last-child{border-bottom:none}
.flow li::before{content:counter(step);position:absolute;left:0;top:15px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:transparent;border:1.5px solid var(--green);color:var(--green);
  font-family:var(--serif);font-size:17px}

/* ボタン：参考サイトの囲みピル（アウトライン） */
.cta{text-align:center}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;
  padding:15px 44px;border-radius:999px;font-size:17px;margin:32px 0;letter-spacing:.04em}
.btn span{font-size:14px;margin-left:4px}

/* フッター */
.ft{text-align:center;color:var(--sub);font-size:13px;padding:44px 20px 24px}
.ft .sprout{margin:0 auto 16px}
.ft-series{color:var(--green);font-size:18px;margin:0 0 10px}
.ft a{color:var(--sub)}

/* お申し込み（LINE）欄 */
.apply-steps{list-style:none;counter-reset:ap;padding:0;margin:16px 0}
.apply-steps li{counter-increment:ap;position:relative;padding:10px 0 10px 44px;font-weight:700;line-height:1.7;border-bottom:1px dashed var(--line)}
.apply-steps li:last-child{border-bottom:none}
.apply-steps li::before{content:counter(ap);position:absolute;left:0;top:9px;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-size:15px;line-height:30px;text-align:center}
.ib{display:inline-block}

/* 最初の画面（スマホ1画面に、見出し・やること3つ・日時など・申し込みボタンまで入れる 2026-10-22） */
.fv{max-width:520px;margin:0 auto;padding:0 0 10px}
.fv .hero{margin:16px 20px 0}
.fv .hero img{aspect-ratio:3/2;height:auto;max-height:none;object-position:center 55%}
.fv-in{padding:0 20px}
.fv .series{margin:14px 0 0;font-size:13px}
.fv h1.brush{font-size:clamp(32px,8.6vw,46px);line-height:1.25;margin:0 0 10px}
.fv-do-k{margin:0 0 2px;font-weight:700;font-size:14px;color:var(--green)}
.fv-do{list-style:none;counter-reset:fd;padding:0;margin:0 0 12px}
.fv-do li{counter-increment:fd;position:relative;padding:6px 0 6px 36px;font-weight:700;font-size:16px;line-height:1.5;border-bottom:1px dashed var(--line)}
.fv-do li:last-child{border-bottom:none}
.fv-do li::before{content:counter(fd);position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;line-height:24px;text-align:center}
.fv-do small{display:block;font-size:12px;font-weight:500;color:var(--sub);line-height:1.5}
.fv-info{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin:0 0 14px;padding:6px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.fv-info div{display:flex;gap:10px;align-items:baseline;padding:2px 0}
.fv-info-w{grid-column:1 / -1}
.fv-info dt{font-size:12px;font-weight:700;color:var(--green);flex:none}
.fv-info dd{margin:0;font-weight:700;font-size:15px;line-height:1.5}
.fv-cta{text-align:center;margin:0}
.fv-cta .btn{margin:0;padding:13px 44px}
.fv-cta-n{margin:6px 0 0;text-align:center;font-size:12px;color:var(--sub);line-height:1.6}
.wrap .tagline{margin-top:0}