/*
Theme Name: iYell 法人AI研修
Description: iYell 法人向けAI研修 ランディングページテーマ
Author: iYell
Version: 1.0.0
Text Domain: iyell-ai-training
*/

:root{
  --ink:oklch(22% 0.02 255);
  --muted:oklch(48% 0.02 255);
  --paper:oklch(99% 0.003 255);
  --surface:oklch(96.5% 0.012 250);
  --surface2:oklch(93% 0.02 250);
  --rose-tint:oklch(94% 0.025 222);
  --line:oklch(89% 0.012 250);
  --primary:oklch(58% 0.17 252);
  --primary-dark:oklch(42% 0.15 255);
  --primary-deep:oklch(30% 0.1 258);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--paper);}
img{max-width:100%;display:block;}
a{color:oklch(52% 0.15 70);text-decoration:underline;}
a:hover{color:oklch(42% 0.16 70);}
button{font-family:inherit;}
h1,h2,h3,p{padding:0;}
@keyframes revealIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
.reveal{animation:revealIn .9s cubic-bezier(.22,.68,.32,1) both;}

.container{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,40px);}
.container-narrow{max-width:1000px;}
.center{text-align:center;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:700;font-size:16px;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;}

/* sticky cta */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:500;background:var(--primary-deep);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:center;gap:12px;padding:14px clamp(16px,4vw,24px);flex-wrap:wrap;}
.sticky-cta .btn-white{flex:1 1 200px;max-width:280px;justify-content:center;padding:15px 24px;background:#fff;color:var(--primary-deep);}
.sticky-cta .btn-outline-white{flex:1 1 200px;max-width:280px;justify-content:center;padding:9px 20px;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);}
body{padding-bottom:74px;}

/* header */
.site-header{background:#fff;padding-top:clamp(28px,6vw,48px);}
.site-header .container{display:flex;align-items:center;}
.site-logo{height:clamp(24px,4vw,30px);width:auto;}

/* hero */
.hero{position:relative;overflow:hidden;background:#fff;padding-bottom:clamp(80px,18vw,140px);}
.hero-inner{max-width:1180px;margin:0 auto;padding:clamp(24px,6vw,44px) clamp(20px,5vw,40px) 0;display:flex;gap:clamp(20px,4vw,40px);align-items:center;flex-wrap:wrap;}
.hero-copy{flex:1 1 360px;min-width:280px;}
.hero-eyebrow{color:var(--muted);font-size:18px;line-height:1.6;font-weight:500;margin:0 0 14px;}
.hero-title{color:var(--ink);font-size:clamp(34px,6vw,54px);line-height:1.25;font-weight:700;margin:0 0 32px;}
.hero-title span{color:var(--primary-dark);}
.hero-cta{display:flex;gap:20px;flex-wrap:wrap;}
.hero-cta .btn-primary{padding:17px 32px;background:var(--primary-dark);color:#fff;}
.hero-cta .btn-outline{padding:17px 32px;background:var(--surface);color:var(--primary-dark);border:1.5px solid var(--line);}
.hero-media{flex:1 1 360px;min-width:280px;}
.hero-media-tag{color:var(--primary-dark);font-weight:700;font-size:16px;margin-bottom:14px;}
.hero-photo-slot{width:100%;aspect-ratio:4/3;border-radius:20px;}

.img-placeholder{background:var(--surface);border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:13px;line-height:1.6;padding:12px;}

/* tools card */
.tools-card-wrap{max-width:1100px;margin:-48px auto 0;padding:0 clamp(20px,5vw,40px);position:relative;z-index:10;}
.tools-card{background:#fff;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.12);padding:clamp(24px,5vw,40px);}
.tools-card-title{font-size:clamp(20px,3.4vw,28px);font-weight:700;line-height:1.5;text-align:center;margin-bottom:clamp(24px,4vw,36px);}
.tools-card-title span{color:var(--primary-dark);}
.tools-logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:clamp(16px,3vw,32px);align-items:center;}
.tools-logo-grid img{width:100%;height:clamp(48px,10vw,90px);object-fit:contain;}

/* generic section */
.section{padding:clamp(56px,10vw,100px) 0;}
.section-tight-top{padding-top:clamp(64px,12vw,110px);}
.section-paper{background:var(--paper);}
.section-surface{background:var(--surface);}
.section-white{background:#fff;}
h2{font-size:clamp(24px,4vw,32px);font-weight:700;line-height:1.5;margin:0 0 24px;}
.lead{font-size:16px;color:var(--muted);line-height:1.9;margin:0 0 clamp(32px,6vw,48px);}

/* course cards */
.course-cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;}
.course-card{flex:1 1 260px;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,4vw,28px) 24px;text-align:left;}
.course-label{font-weight:700;font-size:19px;color:var(--primary-dark);margin-bottom:4px;}
.course-hours{font-size:16px;color:var(--muted);margin-bottom:16px;}
.course-tagline{font-weight:700;font-size:17px;}

/* curriculum */
.dept-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.dept-tab{padding:14px clamp(14px,3vw,24px);border:none;border-radius:12px 12px 0 0;cursor:pointer;background:var(--surface2);position:relative;min-width:clamp(100px,28vw,130px);color:var(--muted);font-weight:700;font-size:16px;}
.dept-tab.is-active{color:var(--primary-dark);}
.dept-tab.is-active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--primary-dark);}
.dept-panel{display:none;background:#fff;border:2px solid var(--primary-dark);border-radius:0 16px 16px 16px;padding:clamp(18px,4vw,32px);}
.dept-panel.is-active{display:block;}

.overview-table{display:grid;grid-template-columns:clamp(100px,32vw,150px) 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:32px;}
.overview-table>div{font-size:16px;}
.overview-head{background:var(--primary-deep);color:#fff;font-weight:700;padding:13px 16px;}
.overview-level{padding:15px 16px;border-top:1px solid var(--line);font-weight:700;color:var(--primary-dark);background:var(--surface);}
.overview-points{padding:15px 16px;border-top:1px solid var(--line);color:var(--ink);display:flex;flex-direction:column;gap:4px;}

.level-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.level-tab{padding:9px 22px;border-radius:999px;border:1px solid var(--line);cursor:pointer;background:var(--surface);color:var(--muted);font-weight:700;font-size:16px;}
.level-tab.is-active{border:none;background:var(--primary-dark);color:#fff;}

.level-panel{display:none;}
.level-panel.is-active{display:block;}
.level-panel-title{font-weight:700;font-size:16px;margin-bottom:14px;}
.detail-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;}
.detail-table{display:grid;grid-template-columns:80px 200px 1fr;min-width:640px;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.detail-table>div{font-size:16px;padding:12px;}
.detail-head{background:var(--primary-deep);color:#fff;font-weight:700;}
.detail-h{border-top:1px solid var(--line);color:var(--muted);}
.detail-cat{border-top:1px solid var(--line);font-weight:700;color:var(--primary-dark);}
.detail-content{border-top:1px solid var(--line);color:var(--ink);}

.learning-cycle{margin-top:clamp(40px,8vw,60px);}
.learning-cycle h3{text-align:center;font-size:clamp(19px,3vw,21px);font-weight:700;margin:0 0 8px;}
.cycle-cols{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:stretch;}
.cycle-col{flex:1 1 200px;max-width:240px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;}
.cycle-col-title{background:var(--primary-deep);color:#fff;text-align:center;padding:11px;font-weight:700;font-size:16px;}
.cycle-col-body{padding:16px;display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center;font-size:16px;}
.cycle-step{font-weight:700;background:var(--surface);padding:8px 14px;border-radius:8px;}
.cycle-step-3{background:var(--rose-tint);}
.cycle-step2{font-weight:700;color:var(--muted);line-height:1.4;}
.cycle-arrow{color:var(--muted);}
.cycle-note{background:var(--primary-deep);color:#fff;text-align:center;padding:18px;border-radius:14px;margin-top:20px;font-weight:700;font-size:16px;line-height:1.6;}

/* training format */
.format-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;border-radius:16px;overflow:hidden;background:var(--surface);}
.format-step{background:var(--primary-dark);color:#fff;text-align:center;padding:26px 10px;min-width:0;}
.format-n{font-size:16px;opacity:.7;margin-bottom:8px;}
.format-label{font-weight:700;font-size:17px;margin-bottom:8px;}
.format-desc{font-size:16px;opacity:.85;line-height:1.6;}
.format-note{text-align:center;margin-top:48px;}
.format-note p{margin:0;}
.format-note .format-lead{font-size:16px;color:var(--muted);margin:0 0 8px;}
.format-note .format-quote{font-size:clamp(19px,3.4vw,24px);font-weight:700;margin:0 0 24px;}
.format-note .format-desc2{font-size:16px;color:var(--muted);line-height:1.8;}

/* pricing */
.price-cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-bottom:40px;}
.price-card{flex:1 1 300px;max-width:360px;border:1px solid var(--line);border-radius:16px;padding:32px 28px;position:relative;}
.price-card.is-highlight{border:2px solid var(--primary-dark);}
.price-tag{position:absolute;top:-15px;left:28px;background:var(--primary-dark);color:#fff;font-size:16px;font-weight:700;padding:4px 16px;border-radius:999px;}
.price-name{font-weight:700;font-size:18px;margin-bottom:4px;}
.price-desc{color:var(--muted);font-size:16px;margin-bottom:24px;}
.price-amount{font-size:34px;font-weight:700;color:var(--primary-dark);}
.price-amount span{font-size:16px;margin-left:2px;}
.price-unit{color:var(--muted);font-size:16px;margin-top:4px;}
.stat-row{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;margin-bottom:16px;}
.stat-col{flex:1 1 260px;max-width:340px;text-align:center;}
.stat-label{font-size:16px;color:var(--muted);margin-bottom:8px;}
.stat-num{font-size:clamp(38px,7vw,52px);font-weight:700;color:var(--primary-dark);line-height:1;}
.stat-num span{font-size:20px;}
.stat-sub{font-size:16px;color:var(--muted);margin-top:10px;}
.price-note{text-align:center;color:var(--muted);font-size:16px;line-height:1.8;margin:0;}

/* faq */
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto;}
.faq-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.faq-question{width:100%;display:flex;align-items:center;gap:16px;padding:20px 24px;background:#fff;border:none;cursor:pointer;text-align:left;}
.faq-q-badge{width:32px;height:32px;border-radius:50%;background:var(--primary-deep);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.faq-question-text{flex:1;font-weight:700;font-size:16px;}
.faq-toggle{font-size:20px;color:var(--muted);flex-shrink:0;}
.faq-answer{display:none;padding:0 24px 22px 72px;font-size:16px;color:var(--muted);line-height:1.8;}
.faq-item.is-open .faq-answer{display:block;}

/* company */
.company-table{max-width:820px;margin:0 auto;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.company-grid{display:grid;grid-template-columns:clamp(110px,30vw,160px) 1fr;}
.company-label{padding:18px 20px;border-top:1px solid var(--line);font-weight:700;background:var(--surface);font-size:16px;}
.company-value{padding:18px 20px;border-top:1px solid var(--line);font-size:16px;color:var(--ink);line-height:1.7;}

/* closing + footer */
.closing-banner{background:radial-gradient(120% 140% at 85% 0%,var(--primary-dark) 0%,var(--primary-deep) 100%);padding:clamp(56px,10vw,84px) 0;}
.closing-banner p{color:#fff;font-size:clamp(20px,3.6vw,26px);font-weight:700;line-height:1.6;margin:0;}
.site-footer{background:var(--primary-deep);padding:clamp(40px,8vw,60px) 0 30px;}
.footer-row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.footer-logo-chip{background:#fff;display:inline-flex;align-items:center;padding:8px 14px;border-radius:8px;width:fit-content;}
.footer-logo-chip img{height:24px;width:auto;}
.footer-info{color:rgba(255,255,255,.7);font-size:16px;line-height:2;}
.footer-info span{color:#fff;font-weight:700;margin-right:12px;}
.footer-copyright{text-align:center;color:rgba(255,255,255,.4);font-size:16px;margin-top:44px;}

/* password gate */
.pw-gate{position:fixed;inset:0;z-index:1000;background:var(--primary-deep);display:flex;align-items:center;justify-content:center;padding:24px;}
.pw-gate-box{background:#fff;border-radius:20px;padding:clamp(28px,6vw,44px);max-width:380px;width:100%;text-align:center;}
.pw-gate-text{font-size:16px;color:var(--muted);line-height:1.7;margin:0 0 20px;}
.pw-gate-input{width:100%;padding:14px 16px;font-size:16px;border:1.5px solid var(--line);border-radius:10px;margin-bottom:14px;box-sizing:border-box;}
.pw-gate-error{color:#c0392b;font-size:16px;margin:0 0 14px;}
.pw-gate-submit{width:100%;padding:14px;border-radius:10px;background:var(--primary-dark);color:#fff;font-weight:700;font-size:16px;border:none;cursor:pointer;}