:root{--navy:#1B2A4A;--yellow:#F5C518;--yellow2:#FBE38A;--cream:#FBF7EC;--sky:#E6EEF5;--sub:#5B6478;--line:#06C755;--accent:#F5C518}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--cream);color:var(--navy);font-family:"Zen Maru Gothic",sans-serif;font-weight:500;line-height:1.9;word-break:auto-phrase;overflow-wrap:anywhere}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.hand{font-family:"Yusei Magic",sans-serif;font-weight:400}
.in{max-width:1080px;margin:0 auto;padding:0 24px}
.mock{background:#B8322A;color:#fff;text-align:center;font-size:12px;padding:3px}

.hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid #ECE6D6}
.hd .in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{text-decoration:none;font-weight:900;font-size:20px;white-space:nowrap}
.logo em{font-style:normal;background:linear-gradient(transparent 55%,var(--yellow) 55%)}
.back{font-size:14px;font-weight:900;text-decoration:none;display:flex;align-items:center;gap:8px}
.back::before{content:"";width:8px;height:8px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--yellow);color:var(--navy);font-weight:900;border-radius:999px;padding:12px 26px;text-decoration:none;white-space:nowrap;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.navy{background:var(--navy);color:#fff}
.btn.line{background:var(--line);color:#fff}
.btn.ghost{background:#fff;border:2px solid var(--navy)}

/* ヒーロー */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#DCEAF6 0%,#F4F1E4 70%,var(--cream) 100%)}
.hero .in{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:end;min-height:560px;padding-top:40px}
.hero .fig{position:relative;align-self:end;display:flex;justify-content:center}
.hero .fig .sun{position:absolute;bottom:0;left:50%;width:420px;height:420px;margin-left:-210px;border-radius:50%;background:var(--accent);opacity:.55;animation:sunIn 1s cubic-bezier(.3,1.5,.5,1) both}
.hero .fig img{position:relative;width:auto;max-width:none;animation:rise .9s cubic-bezier(.2,.9,.25,1.2) .2s both, breathe 4s ease-in-out 1.2s infinite;transform-origin:50% 100%}
.hero .fig .say{position:absolute;right:2%;top:12%;z-index:2;background:#fff;border:.17em solid var(--navy);border-radius:999px;padding:10px 20px;font-family:"Yusei Magic";font-size:18px;white-space:nowrap;animation:pop .5s cubic-bezier(.3,1.8,.5,1) 1s both}
.hero .fig .say::after{content:"";position:absolute;left:16%;top:calc(100% - 3px);width:1.5em;height:1.35em;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'><path d='M3 0 L9 33 L37 0Z' fill='%23fff'/><path d='M3 0 L9 33 L37 0' fill='none' stroke='%231B2A4A' stroke-width='4.8' stroke-linejoin='round' stroke-linecap='round'/></svg>") no-repeat center/100% 100%}
.hero .txt{padding-bottom:56px;animation:slide .8s cubic-bezier(.2,.9,.25,1) .1s both}
.lab{margin:0;font-size:13px;letter-spacing:.14em;color:var(--sub);font-weight:700}
.hero .clogo{height:40px;width:auto;margin:14px 0 10px}
.hero .clogo.txt{height:auto;font-weight:900;letter-spacing:.24em;font-size:22px}
.hero h1{margin:4px 0 0;font-size:clamp(38px,5vw,58px);font-weight:900;line-height:1.2}
.hero h1 small{display:block;font-size:14px;letter-spacing:.2em;color:var(--sub);margin-top:6px}
.hero .role{margin:12px 0 0;font-weight:900;font-size:17px}
.hero .catch span{display:inline-block}
.hero .catch{margin:18px 0 0;font-family:"Yusei Magic";font-size:clamp(20px,2.3vw,26px);line-height:1.6;position:relative;display:inline-block}
.hero .catch::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:.36em;background:var(--yellow);opacity:.6;z-index:-1;border-radius:4px;transform-origin:left;animation:draw .8s ease-out 1s both}
.hero .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.hero .tags span{background:#fff;border-radius:999px;padding:3px 14px;font-size:13px;font-weight:900}
@keyframes sunIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:.55}}
@keyframes rise{from{transform:translateY(80px);opacity:0}to{transform:none;opacity:1}}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes slide{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

section{padding:72px 0}
.h2{margin:2px 0 24px;font-size:clamp(24px,3vw,30px);font-weight:900;line-height:1.4}
.white{background:#fff}
.sky{background:var(--sky)}

/* この会で話すこと */
.menu-box{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:#fff;border-radius:26px;padding:28px 32px}
.menu-box .ic{width:88px;height:88px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.menu-box .ic svg{width:44px;height:44px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-box h3{margin:0;font-size:22px;font-weight:900}
.menu-box p{margin:6px 0 0;color:var(--sub)}
.menu-box .next{display:inline-block;margin-top:10px;background:var(--cream);border-radius:12px;padding:6px 14px;font-size:14px;font-weight:700;color:var(--navy)}

/* 経歴 */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:3px;background:repeating-linear-gradient(var(--navy) 0 8px,transparent 8px 14px);opacity:.35}
.timeline li{position:relative;padding:0 0 26px 44px}
.timeline li::before{content:"";position:absolute;left:0;top:6px;width:23px;height:23px;border-radius:50%;background:var(--accent);border:3px solid var(--navy)}
.timeline b{display:block;font-size:14px;color:var(--sub)}
.timeline p{margin:2px 0 0;font-size:16px;font-weight:700}
.timeline small{display:block;font-size:12.5px;color:var(--sub);font-weight:500}

/* 数字 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.stat{background:#fff;border-radius:22px;padding:24px 22px;text-align:center}
.stat .n{font-family:"Yusei Magic";font-size:44px;line-height:1.1}
.stat .n small{font-size:20px;margin-left:2px}
.stat .n.word{font-size:clamp(28px,3.4vw,38px)}
.stat .n.word span{display:inline-block}
.stat p{margin:8px 0 0;font-size:14px;font-weight:700}
.stat .src{display:block;font-size:11.5px;color:var(--sub);font-weight:500;margin-top:4px}

/* 実績リスト */
.works{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.works li{background:#fff;border-radius:18px;padding:16px 22px;display:grid;grid-template-columns:7.5em 1fr;gap:14px;align-items:baseline}
.works b{font-size:13px;color:var(--sub)}
.works p{margin:0;font-weight:700}
.works small{display:block;font-weight:500;font-size:13px;color:var(--sub)}

/* 本人の言葉 */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.q{position:relative;background:#fff;border:3px solid var(--navy);border-radius:26px;padding:26px 26px 22px}
.q::before{content:"";position:absolute;left:30px;bottom:-17px;border-style:solid;border-width:17px 6px 0 14px;border-color:var(--navy) transparent transparent}
.q::after{content:"";position:absolute;left:34px;bottom:-11px;border-style:solid;border-width:12px 4px 0 10px;border-color:#fff transparent transparent}
.q p{margin:0;font-family:"Yusei Magic";font-size:19px;line-height:1.7}
.q small{display:block;margin-top:10px;font-size:12.5px;color:var(--sub)}

/* 会社 */
.company{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center;background:#fff;border-radius:28px;padding:34px}
.company .lgbox{background:var(--cream);border-radius:20px;height:150px;display:flex;align-items:center;justify-content:center;padding:24px}
.company .lgbox img{max-height:80px;width:auto}
.company .lgbox .txt{font-weight:900;letter-spacing:.24em;font-size:26px}
.company h3{margin:0;font-size:22px;font-weight:900}
.company dl{margin:10px 0 18px;display:grid;grid-template-columns:5em 1fr;gap:4px 12px;font-size:14.5px}
.company dt{color:var(--sub);font-weight:700}
.company dd{margin:0}
.links{display:flex;flex-wrap:wrap;gap:12px}
.sns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sns a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--navy);border-radius:999px;padding:6px 16px;font-weight:900;font-size:14px;text-decoration:none}

/* 他の講師 */
.others{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.other{display:flex;align-items:flex-end;gap:16px;background:#fff;border-radius:24px;padding:18px 22px 0;text-decoration:none;overflow:hidden;transition:transform .25s}
.other:hover{transform:translateY(-4px)}
.other img{height:130px;width:auto}
.other div{padding-bottom:18px}
.other small{display:block;font-size:12.5px;color:var(--sub);font-weight:700}
.other b{font-size:19px}

.cta{background:var(--yellow);text-align:center;padding:50px 0}
.cta p{margin:0 0 18px;font-family:"Yusei Magic";font-size:26px}
.cta .links{justify-content:center}
.note{font-size:12.5px;color:var(--sub);margin-top:22px}
footer{background:#fff;text-align:center;font-size:13px;color:var(--sub);padding:26px 0 36px}
footer a{margin:0 8px;display:inline-block;white-space:nowrap}

/* スクロールで出る */
.js [data-rv]{opacity:0;transform:translateY(30px);transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.9,.25,1.2) var(--d,0s)}
.js [data-rv].on{opacity:1;transform:none}

@media (max-width:820px){
  .hero .in{grid-template-columns:1fr;min-height:0;padding-top:24px}
  .hero .fig{order:-1}
  .hero .fig{--hh:340px}
  .hero .fig .sun{width:300px;height:300px;margin-left:-150px}
  .hero .fig{padding-top:58px}
  .hero .fig .say{font-size:15px;right:max(0px,calc(50% - 240px));top:0}
  .hero .txt{padding-bottom:40px;text-align:center}
  .hero .clogo{display:block;margin-left:auto;margin-right:auto}
  .hero .tags{justify-content:center}
  .hero .catch span{display:inline-block;background:linear-gradient(transparent 62%,rgba(245,197,24,.6) 62%,rgba(245,197,24,.6) 94%,transparent 94%)}
  .hero .catch::after{display:none}
  .menu-box{grid-template-columns:1fr;text-align:center}.menu-box .ic{margin:0 auto}
  .works li{grid-template-columns:1fr;gap:2px}
  .company{grid-template-columns:1fr;padding:24px}
  .others{grid-template-columns:1fr}
  .back span{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.js [data-rv]{opacity:1;transform:none;transition:none}}