/* ハピネススタイルAX教室 — 共有スタイル（やさしさ重視版） */
:root{
  --navy:#0f2e3d; --teal:#117a8b; --teal-d:#0d5e6b; --teal-l:#e6f1f3;
  --accent:#e0913f; --accent-l:#fff5ea; --ink:#1f2933; --gray:#5b6770;
  --line:#dde3e6; --bg:#f4f7f8; --ok:#2e7d57; --ok-l:#eef6f1;
  --you:#2e7d57; --you-l:#eaf5ee; --ai:#117a8b; --ai-l:#e6f1f3; --look:#c9772a; --look-l:#fff3e6;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.9; font-size:17.5px; letter-spacing:.01em;
}
a{color:var(--teal-d);}
img{max-width:100%;}
strong{color:var(--navy);}

/* header */
.site-head{background:var(--navy); color:#fff; position:sticky; top:0; z-index:10;}
.site-head .inner{max-width:920px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.site-head .logo{font-weight:800; font-size:18px; color:#fff; text-decoration:none; letter-spacing:.5px;}
.site-head .logo small{display:block; font-size:11px; color:#8fc3cd; font-weight:600; letter-spacing:1px;}
.site-head nav a{color:#cfe0e4; text-decoration:none; font-size:13.5px; margin-left:16px;}
.site-head nav a:hover{color:#fff; text-decoration:underline;}

/* container */
.wrap{max-width:920px; margin:0 auto; padding:0 20px;}
.page{background:#fff; max-width:920px; margin:24px auto; padding:0 0 40px; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06);}

/* hero (top) */
.hero{background:linear-gradient(135deg,#0f2e3d,#15485a); color:#fff; padding:48px 36px 40px;}
.hero .brand{font-size:13px; letter-spacing:2px; color:#8fc3cd; font-weight:700;}
.hero h1{font-size:34px; line-height:1.4; margin:10px 0 0; font-weight:800;}
.hero h1 .hl{color:#f0b86e;}
.hero p{font-size:17px; color:#dfeaed; margin:16px 0 0; max-width:660px;}
.hero .badge{display:inline-block; margin-top:20px; background:#f0b86e; color:#0f2e3d; font-weight:800; padding:9px 18px; border-radius:8px;}

/* section */
.sec{padding:30px 36px;}
.sec h2{font-size:23px; color:var(--navy); border-left:6px solid var(--accent); padding-left:12px; margin:0 0 18px; line-height:1.5;}
.sec h3{font-size:18px; color:var(--teal-d); margin:26px 0 8px;}
.lead{color:var(--gray); font-size:16px;}
.big{font-size:18px;}

/* lesson cards (top) */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:640px){.cards{grid-template-columns:1fr;}}
.card{display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:10px; padding:16px 18px; transition:.15s; background:#fff;}
.card:hover{border-color:var(--teal); box-shadow:0 3px 12px rgba(17,122,139,.12); transform:translateY(-2px);}
.card .no{display:inline-block; background:var(--teal); color:#fff; font-weight:800; font-size:13px; padding:2px 10px; border-radius:20px;}
.card .skill{font-size:12px; color:var(--gray); margin-left:8px;}
.card .free{background:#f0b86e; color:#0f2e3d; font-weight:800; font-size:11px; padding:2px 8px; border-radius:20px; margin-left:6px;}
.card h4{margin:10px 0 4px; font-size:17px; color:var(--navy);}
.card p{margin:0; font-size:14px; color:var(--gray);}

/* steps */
ol.steps{list-style:none; counter-reset:step; padding:0; margin:0;}
ol.steps>li{counter-increment:step; position:relative; padding:0 0 26px 56px; margin:0;}
ol.steps>li::before{content:counter(step); position:absolute; left:0; top:0; width:38px; height:38px; background:var(--teal); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px;}
ol.steps>li::after{content:""; position:absolute; left:18px; top:42px; bottom:0; width:2px; background:var(--line);}
ol.steps>li:last-child::after{display:none;}
ol.steps>li h4{margin:5px 0 8px; font-size:18px; color:var(--navy); line-height:1.5;}
ol.steps>li p{margin:0 0 10px;}

/* やること区分タグ（あなた / AI / 見て確認） */
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 10px;}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:700; padding:4px 12px; border-radius:20px; border:1px solid transparent;}
.tag.you{background:var(--you-l); color:var(--you); border-color:#bfe0cc;}
.tag.ai{background:var(--ai-l); color:var(--ai); border-color:#bcdce1;}
.tag.look{background:var(--look-l); color:var(--look); border-color:#f0d3ad;}
.step-time{display:inline-block; font-size:12.5px; color:var(--gray); background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:2px 11px; margin-left:6px; vertical-align:middle;}

/* prompt box with copy */
.prompt{position:relative; background:#0f2e3d; color:#eaf2f4; border-radius:8px; padding:16px 16px 16px; margin:10px 0 6px; font-size:14.5px; line-height:1.75;}
.prompt .label{display:block; font-size:12px; color:#f0b86e; font-weight:700; letter-spacing:.5px; margin-bottom:8px; padding-right:120px;}
.prompt pre{margin:0; white-space:pre-wrap; word-break:break-word; font-family:"SFMono-Regular",Consolas,"Noto Sans Mono CJK JP",monospace; font-size:14px;}
.prompt .copy{position:absolute; top:12px; right:12px; background:#f0b86e; color:#0f2e3d; border:none; border-radius:6px; padding:8px 16px; font-size:13.5px; font-weight:800; cursor:pointer;}
.prompt .copy:hover{background:#f6c886;}
.prompt .copy.done{background:var(--ok); color:#fff;}
.prompt-note{font-size:13.5px; color:var(--gray); margin:2px 0 0;}

/* チェックポイント（ここまでできたらOK） */
.check{background:var(--ok-l); border:1px solid #bfe0cc; border-radius:10px; padding:14px 18px 14px 48px; margin:14px 0; position:relative; font-size:16px;}
.check::before{content:"✓"; position:absolute; left:16px; top:13px; width:22px; height:22px; background:var(--ok); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;}
.check b{color:var(--ok);}

/* 画面の見本プレースホルダ */
.shot{border:2px dashed #bcc7cc; border-radius:10px; background:#fbfdfd; color:var(--gray); padding:22px 16px; text-align:center; font-size:14px; margin:10px 0;}
.shot .ic{font-size:26px; display:block; margin-bottom:4px;}

/* callouts */
.callout{border-radius:10px; padding:16px 20px; margin:16px 0;}
.callout.goal{background:var(--accent-l); border:1px solid #f0d3ad;}
.callout.goal h3{margin:0 0 6px; color:var(--accent);}
.callout.tip{background:var(--teal-l); border-left:5px solid var(--teal);}
.callout.warn{background:#fff4f0; border-left:5px solid #d9694a;}
.callout.home{background:var(--ok-l); border-left:5px solid var(--ok);}
.callout.calm{background:#f3f0fb; border-left:5px solid #7d6bb0;}
.callout h4{margin:0 0 6px; font-size:16.5px;}
.callout p,.callout ul{margin:6px 0;}

.meta{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 18px;}
.meta span{background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:5px 15px; font-size:13.5px; color:var(--gray);}

.lesson-head{background:linear-gradient(135deg,#0f2e3d,#15485a); color:#fff; padding:32px 36px 28px;}
.lesson-head .crumb{font-size:12.5px; color:#8fc3cd;}
.lesson-head .crumb a{color:#8fc3cd;}
.lesson-head h1{font-size:28px; margin:8px 0 0; font-weight:800; line-height:1.45;}
.lesson-head .free{display:inline-block; background:#f0b86e; color:#0f2e3d; font-weight:800; font-size:12px; padding:3px 12px; border-radius:20px; margin-top:10px;}

/* 進行バー（全6回のいまここ） */
.progress{display:flex; gap:6px; max-width:920px; margin:18px auto -6px; padding:0 20px; overflow-x:auto;}
.progress .pstep{flex:1 0 auto; min-width:92px; text-decoration:none; text-align:center; border-radius:8px; padding:8px 6px 7px; font-size:12.5px; line-height:1.35; border:1px solid var(--line); background:#fff; color:var(--gray);}
.progress .pstep .pno{display:block; font-weight:800; font-size:13px;}
.progress .pstep.done{background:var(--ok-l); border-color:#bfe0cc; color:var(--ok);}
.progress .pstep.current{background:var(--navy); border-color:var(--navy); color:#fff;}
.progress .pstep.current .pno{color:#f0b86e;}

/* 今日の地図 minimap */
.minimap{background:var(--teal-l); border:1px solid #bcdce1; border-radius:10px; padding:14px 18px; margin:14px 0;}
.minimap h4{margin:0 0 8px; color:var(--teal-d); font-size:15px;}
.minimap ol{margin:0; padding-left:22px;}
.minimap li{margin:3px 0; font-size:15px;}

ul.plain{padding-left:22px;}
ul.plain li{margin-bottom:7px;}

/* 用語（やさしい言い換え）— インラインの小注記 */
.term{font-weight:700; color:var(--teal-d); border-bottom:2px dotted #9cc6cd; cursor:help;}

/* 用語集ページ */
.glossary{display:grid; gap:14px;}
.gterm{border:1px solid var(--line); border-radius:10px; padding:16px 18px; background:#fff;}
.gterm h3{margin:0 0 4px; color:var(--navy); font-size:18px;}
.gterm .kana{font-size:13px; color:var(--gray); font-weight:600; margin-left:6px;}
.gterm p{margin:6px 0 0; font-size:15.5px;}
.gterm .ex{background:var(--accent-l); border-radius:8px; padding:8px 12px; margin-top:8px; font-size:14.5px; color:#7a5a2a;}

/* FAQ */
.faq{border-top:1px solid var(--line); margin-top:8px;}
.faq details{border-bottom:1px solid var(--line); padding:4px 0;}
.faq summary{cursor:pointer; padding:14px 4px; font-weight:700; color:var(--navy); font-size:16.5px; list-style:none; position:relative; padding-right:30px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"＋"; position:absolute; right:6px; top:13px; color:var(--teal); font-weight:800;}
.faq details[open] summary::after{content:"−";}
.faq .ans{padding:0 4px 16px; color:var(--ink); font-size:15.5px;}

/* prev next */
.nav-lr{display:flex; justify-content:space-between; gap:12px; padding:24px 36px 0;}
.nav-lr a{flex:1; text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:14px 16px; color:var(--navy); font-size:14.5px; background:#fff;}
.nav-lr a:hover{border-color:var(--teal); box-shadow:0 2px 10px rgba(17,122,139,.1);}
.nav-lr a.next{text-align:right;}
.nav-lr a small{display:block; color:var(--gray); font-size:11.5px; margin-bottom:2px;}
.nav-lr a.disabled{opacity:.35; pointer-events:none;}

.footer{max-width:920px; margin:0 auto; padding:24px 20px 50px; color:var(--gray); font-size:12.5px; text-align:center; line-height:1.8;}

.roadmap{background:var(--teal-l); border:1px solid #bcdce1; border-radius:8px; padding:14px 18px; font-size:15px; color:#27424c;}
.roadmap b{color:var(--navy);}

/* ボタン風リンク */
.btn{display:inline-block; background:var(--accent); color:#fff; font-weight:800; text-decoration:none; padding:13px 26px; border-radius:8px; font-size:16px;}
.btn:hover{background:#cf8030; color:#fff;}
.btn.ghost{background:#fff; color:var(--teal-d); border:2px solid var(--teal);}
.btn.ghost:hover{background:var(--teal-l);}

@media(max-width:640px){
  .hero{padding:36px 22px 30px;} .hero h1{font-size:27px;}
  .sec{padding:26px 22px;} .lesson-head{padding:26px 22px 22px;}
  .nav-lr{padding:20px 22px 0;}
}