/* Life Design Tame｜募集LP
   世界観ガイドの参考画像から：ノート罫線の背景／やわらかい不定形の色面／ピーチの手描き下線／
   セージの丸チェック／淡いグレーの角丸カード／細い線のアイコン */
:root{
  --ivory:#FFFCF5;--white:#FAFAF7;--ink:#52574F;--text:#6E6F6B;--slate:#4E5D6B;--deep:#4E6D7A;
  --sage:#8EA89B;--peach:#E2B8A2;--greige:#CEC7BC;--bluegray:#8EA3AD;
  --sage-tint:#E4ECE7;--blue-tint:#DDE2E5;--peach-tint:#F5E6DD;--band-peach:#FAF1EB;--band-blue:#F1F3F2;
  --rule:#E8EAE7;--line:#E4DED4;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--text);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-weight:400;font-size:16px;line-height:1.95;letter-spacing:.05em;overflow-wrap:anywhere}
svg{max-width:100%}
a{color:var(--slate)}
p{margin:0 0 1.2em}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.6;letter-spacing:.07em;margin:0}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:640px}
section{padding:56px 0;position:relative}
section .wrap>:last-child{margin-bottom:0}
.small{font-size:.88rem}
.lead-center{text-align:center}

/* ノート罫線の背景（参考画像のフィード投稿） */
.ruled{background-color:var(--ivory)}
.ruled>.wrap{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 46px,var(--rule) 46px,var(--rule) 48px);
  background-clip:content-box;background-origin:content-box;padding-top:24px;padding-bottom:24px;box-sizing:border-box}
.ruled>.wrap>*{position:relative}
.band-peach{background:var(--band-peach)}
.band-blue{background:var(--band-blue)}
.changes,.howto,.profile,.worries-sec{background:var(--ivory)}

/* 見出し：ピーチの手描き風下線 */
.sec-title{font-size:1.35rem;text-align:center;margin:0 auto 44px;width:fit-content;max-width:100%;position:relative;padding:0 6px 10px}
.sec-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5C30 4 60 7.5 100 5.2S170 3.6 198 6' fill='none' stroke='%23E2B8A2' stroke-width='5' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") no-repeat center/100% 100%}

/* 不定形のやわらかい色面 */
.soft-blob{position:relative;display:block;padding:26px 28px;margin:8px auto 28px;max-width:560px;
  background:var(--blue-tint);border-radius:46% 54% 50% 50% / 58% 52% 48% 42%;color:var(--ink);font-weight:700;line-height:1.9}

/* ---------- 1 ファーストビュー ---------- */
.fv{padding:84px 0 76px;text-align:center}
.fv .catch{font-size:1.45rem;line-height:1.8;margin-bottom:26px;letter-spacing:.1em}
.fv .title{display:inline-block;font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:14px;padding:6px 22px;
  border-radius:999px}
.fv .label{display:block;width:fit-content;margin:0 auto 28px;font-size:.84rem;color:var(--deep);border:1px solid var(--bluegray);border-radius:999px;padding:1px 16px;background:var(--ivory)}
.fv .lead{margin:0 auto 36px;max-width:640px}

/* 人生の土台 → 仕事の土台 → 最初の一歩 */
.path{display:flex;align-items:flex-end;justify-content:center;gap:6px;max-width:520px;margin:0 auto 36px}
.path-step{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:10px 4px 12px;
  border-radius:18px 18px 10px 10px;color:var(--ink);position:relative}
.path-step.s1{height:78px;background:var(--sage-tint)}
.path-step.s2{height:104px;background:var(--blue-tint)}
.path-step.s3{height:136px;background:var(--peach-tint)}
.path-name{font-weight:700;font-size:.86rem;line-height:1.4;letter-spacing:.04em}
.path-no{font-size:.75rem;color:var(--text);line-height:1.4;margin-top:2px}
.path-arrow{flex:none;width:16px;height:16px;margin-bottom:28px;stroke:var(--sage);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sprout{width:26px;height:26px;stroke:#6E6F6B;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:auto}

.facts{list-style:none;padding:18px 16px;margin:0 auto 36px;max-width:460px;background:var(--white);
  border:1px solid var(--line);border-radius:16px;font-size:.9rem;line-height:1.9;color:var(--ink)}
.facts li{padding:3px 0}
.facts li+li{border-top:1px dashed var(--line)}

/* ボタン */
.cta{text-align:center}
.btn{display:inline-block;text-decoration:none;border-radius:999px;font-weight:700;letter-spacing:.1em;transition:background-color .2s,opacity .2s}
.btn-apply{background:var(--sage);color:#fff;padding:14px 44px;font-size:1rem;min-width:240px}
.btn-apply:hover{background:#7D9A8C}
.btn-line{background:var(--white);color:var(--slate);border:1px solid var(--bluegray);padding:9px 26px;font-size:.9rem}
.btn-line:hover{background:var(--blue-tint)}
.cta .note{display:block;font-size:.78rem;margin-top:8px}

/* ---------- 2 こんなことを感じていませんか？ ---------- */
.worries{list-style:none;padding:24px 22px;margin:0 auto 44px;max-width:620px;background:var(--white);border:1px solid var(--line);border-radius:18px}
.worries li{position:relative;padding:12px 0 12px 40px}
.worries li+li{border-top:1px dashed var(--line)}
.worries li::before{content:"";position:absolute;left:0;top:16px;width:26px;height:26px;border-radius:50%;
  background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/14px}

/* ---------- 3 この講座を作った理由 ---------- */
.reason .reason-close{margin-top:44px;padding:28px 26px;background:var(--white);border:1px solid var(--line);border-radius:18px;text-align:right;color:var(--ink)}
.hl{font-weight:700;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(transparent 62%,var(--peach-tint) 62%)}

/* ---------- 4 目指す変化 ---------- */
.changes .lead-center{margin-bottom:32px}
.cards{display:grid;gap:14px;margin-bottom:36px}
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px 20px}
.card h3{font-size:1rem;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start}
.card h3 .num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--peach-tint);color:var(--ink);font-size:.9rem;
  display:flex;align-items:center;justify-content:center;margin-top:1px;letter-spacing:0}
.card p{margin:0;font-size:.94rem}
.box{background:var(--blue-tint);border-radius:22px;padding:26px 24px;font-size:.93rem}
.box h3{font-size:.98rem;margin-bottom:8px}
.box p{margin:0}

/* ---------- 5 講座内容 ---------- */
.courses .lead-center{margin-bottom:8px}
.stage{display:flex;align-items:center;gap:12px;margin:52px 0 18px;font-size:1.02rem}
.stage .step{font-size:.75rem;letter-spacing:.12em;color:var(--ink);border-radius:999px;padding:3px 14px;font-weight:700;white-space:nowrap}
.stage.st1 .step{background:var(--sage-tint)}
.stage.st2 .step{background:var(--blue-tint)}
.stage.st3 .step{background:var(--peach-tint)}
.stage::after{content:"";flex:1;height:1px;background:var(--greige)}
.course{background:var(--ivory);border:1px solid var(--line);border-radius:20px;padding:26px 22px;margin-bottom:16px}
.course h4{font-size:1.08rem;margin-bottom:6px}
.course .one{color:var(--slate);font-weight:700;font-size:.92rem;margin-bottom:16px}
.course .one span{background:linear-gradient(transparent 60%,var(--blue-tint) 60%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.course p{font-size:.95rem}
.course .made{margin-top:4px;background:var(--white);border-left:3px solid var(--sage);border-radius:4px 14px 14px 4px;padding:14px 16px;font-size:.92rem}
.course .made-label{font-size:.78rem;font-weight:700;color:var(--sage);letter-spacing:.12em;margin-bottom:4px}
.course .made ul{margin:0;padding-left:1.2em}
.course .aside{font-size:.84rem;margin:14px 0 0}

/* ---------- 6 講座の進み方 ---------- */
.flow{display:grid;gap:14px}
.flow-item{display:flex;gap:16px;align-items:flex-start;padding:22px 20px;background:var(--white);border:1px solid var(--line);border-radius:18px}
.icon{flex:none;width:44px;height:44px;border-radius:50%;background:var(--sage-tint);display:flex;align-items:center;justify-content:center}
.icon svg{width:20px;height:20px;stroke:#6E6F6B;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.flow-item h3{font-size:.97rem;margin-bottom:6px}
.flow-item p{margin:0;font-size:.92rem}

/* ---------- 定義リスト（日程・募集概要・特商法） ---------- */
.dl{margin:0}
.dl .row{display:grid;grid-template-columns:9em 1fr;gap:4px 16px;padding:14px 4px;border-bottom:1px solid var(--line)}
.dl .row:first-child{border-top:1px solid var(--line)}
.dl dt{color:var(--ink);font-weight:700;font-size:.9rem}
.dl dd{margin:0;font-size:.93rem}

/* ---------- 7 開催日程 ---------- */
.schedule-sec .lead-center{margin-bottom:28px}
.schedule{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:8px 18px}
.schedule .row{grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:16px 2px}
.schedule .row:first-child{border-top:none}
.schedule .row:last-child{border-bottom:none}
.schedule dt{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;letter-spacing:.04em}
.schedule .row:nth-child(1) dt,.schedule .row:nth-child(2) dt{background:var(--sage-tint)}
.schedule .row:nth-child(3) dt,.schedule .row:nth-child(4) dt{background:var(--blue-tint)}
.schedule .row:nth-child(5) dt{background:var(--peach-tint)}
.schedule dd{font-weight:700;color:var(--ink)}
.schedule .date{display:block;font-weight:400;color:var(--text);font-size:.88rem}
.schedule-note{margin-top:22px}

/* ---------- 8 講師プロフィール ---------- */
.profile-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:34px 24px 26px;position:relative}
.profile-name{text-align:center;margin-bottom:26px;padding-bottom:22px;border-bottom:1px dashed var(--line)}
.profile-name .name{font-size:1.3rem;color:var(--ink);font-weight:700;letter-spacing:.14em}
.profile-name .kana{font-size:.78rem;display:block;letter-spacing:.12em}
.profile-name .role{display:inline-block;font-size:.84rem;margin-top:10px;padding:1px 14px;background:var(--sage-tint);border-radius:999px;color:var(--ink)}
.profile-card p{font-size:.95rem}
.profile-card p:last-child{margin:0;padding:18px 20px;background:var(--band-peach);border-radius:14px;color:var(--ink)}

/* ---------- 9 募集概要 ---------- */
.outline .dl{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:6px 18px}
.outline .dl .row:first-child{border-top:none}
.outline .dl .row:last-child{border-bottom:none}
.outline .dl .row.key dd{color:var(--ink);font-weight:700}
h3.sub{font-size:1rem;margin:44px 0 16px;text-align:center}
.steps{list-style:none;counter-reset:st;padding:0;margin:0;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:10px 18px}
.steps li{counter-increment:st;position:relative;padding:14px 0 14px 44px}
.steps li+li{border-top:1px dashed var(--line)}
.steps li::before{content:counter(st);position:absolute;left:0;top:15px;width:30px;height:30px;border-radius:50%;background:var(--blue-tint);
  color:var(--ink);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.steps .cta{text-align:left;margin:12px 0 2px}

/* ---------- 10 よくある質問 ---------- */
.faq details{background:var(--white);border:1px solid var(--line);border-radius:16px;margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:16px 44px 16px 56px;position:relative;color:var(--ink);font-weight:700;font-size:.94rem;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:1.5px solid var(--sage);border-bottom:1.5px solid var(--sage);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .q{position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--sage);color:#fff;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;letter-spacing:0}
.faq .a{padding:0 20px 18px 56px;font-size:.92rem}
.faq .a p{margin:0 0 6px}

/* ---------- 11 最後のご案内 ---------- */
.closing{text-align:center;padding-bottom:88px}
.closing .meta{display:block;width:fit-content;margin:36px auto 30px;padding:18px 34px;color:var(--ink);font-weight:700;
  background:var(--peach-tint);border-radius:48% 52% 50% 50% / 60% 56% 44% 40%}
.closing .meta .small{display:block;font-weight:400}
.closing .after{font-size:.88rem;margin:34px auto 16px;max-width:520px}

/* フッター */
footer{background:var(--white);border-top:1px solid var(--line);padding:40px 0 48px;text-align:center;font-size:.8rem;line-height:1.9}
footer .brand{color:var(--ink);font-weight:700;letter-spacing:.2em;margin-bottom:8px}
footer p{margin:0}
footer .legal{margin-top:12px}

/* 特商法ページ */
.legal-page{padding:64px 0}
.legal-page h1{font-size:1.25rem;text-align:center;margin:0 auto 36px;width:fit-content;position:relative;padding:0 6px 10px}
.legal-page h1::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5C30 4 60 7.5 100 5.2S170 3.6 198 6' fill='none' stroke='%23E2B8A2' stroke-width='5' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.legal-page .dl{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:6px 18px}
.legal-page .dl .row:first-child{border-top:none}
.legal-page .dl .row:last-child{border-bottom:none}
.back{text-align:center;margin-top:40px}

/* 日本語の改行を文節で（対応ブラウザのみ） */
h1,h2,h3,h4,.reason p,.worries li,summary,.facts,.cta .note,.course .one,.soft-blob,.path-name{word-break:auto-phrase;text-wrap:pretty}
p,li,dd{text-wrap:pretty}

/* ---------- PC ---------- */
@media (min-width:768px){
  body{font-size:17px}
  section{padding:80px 0}
  .fv{padding:120px 0 104px}
  .fv .catch{font-size:2.05rem}
  .sec-title{font-size:1.5rem;margin-bottom:52px}
  .path{gap:10px}
  .path-step.s1{height:92px}.path-step.s2{height:124px}.path-step.s3{height:160px}
  .path-name{font-size:.95rem}
  .cards{grid-template-columns:1fr 1fr}
  .cards .card:last-child{grid-column:1/-1}
  .course{padding:32px 34px}
  .flow{grid-template-columns:1fr 1fr}
  .flow-item:last-child{grid-column:1/-1}
  .soft-blob{padding:34px 48px}
  .profile-card{padding:44px 44px 36px}
}

/* ---------- スマートフォン ---------- */
@media (max-width:767px){
  .fv .lead br,.lead-center br,.closing p br,.profile br,.card p br,.box p br,.course p br,.flow-item p br,.soft-blob br,.worries-sec p br{display:none}
  .facts{font-size:.86rem;padding:14px 12px}
  .soft-blob{border-radius:36px;padding:24px 22px}
  .reason .reason-close{text-align:center}
}
@media (max-width:420px){
  .dl .row{grid-template-columns:1fr}
  .schedule .row{grid-template-columns:auto 1fr}
  .btn-apply{min-width:0;width:100%;max-width:300px;padding:14px 20px}
  .path-name{font-size:.78rem}
  .path-no{font-size:.75rem}
  .path-arrow{width:12px;height:12px}
  .worries{padding:16px 16px}
  .faq summary{padding-left:52px}
  .faq .a{padding-left:20px}
}
.reason .reason-close{text-wrap:balance}
.ruled>.wrap{padding-top:8px;padding-bottom:8px}
.sp-only{display:none}
@media (max-width:767px){.sp-only{display:inline}}
/* スマートフォンでは罫線を出さず、文字に線が重ならないようにする */
@media (max-width:767px){
  .ruled>.wrap{background-image:none;padding-top:0;padding-bottom:0}
  .fv .title{padding:6px 8px;letter-spacing:.04em}
}
@media (max-width:420px){.fv .title{font-size:.98rem}}
/* 罫線はノートの一部のように、FVの図の下地にだけ使う（文字には重ねない） */
.ruled>.wrap{background-image:none;padding-top:0;padding-bottom:0}
.path{position:relative;isolation:isolate;padding:18px 0 0}
.path::before{content:"";position:absolute;left:-40px;right:-40px;top:0;bottom:0;z-index:-1;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 22px,var(--rule) 22px,var(--rule) 23px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}
.path::after{content:"";position:absolute;left:-12px;right:-12px;bottom:-1px;height:1px;background:var(--greige)}
.path-step{position:relative;z-index:1}
.reason .reason-close{text-align:center}
@media (max-width:767px){.path::before{left:-8px;right:-8px}}
@media (min-width:768px){.reason p{text-wrap:wrap}}
/* 人物イラスト（ためさん提供の3点） */
.illu{margin:0 auto 28px}
.illu img{display:block;width:100%;height:auto;border-radius:18px}
.illu-fv{max-width:520px;margin:8px auto 28px}
.illu-worries{max-width:560px;margin:0 auto 32px}
.illu-step{max-width:560px;margin:0 auto 36px}