:root{--ink:#2e2622;--muted:#726c67;--green:#31976f;--green-dark:#227a59;--mint:#eaf7f1;--coral:#ff897e;--peach:#fff0e9;--yellow:#f9b73b;--yellow-bg:#fff6dc;--blue:#65a9da;--blue-bg:#edf7ff;--lav:#eeeaff;--line:#e8ece9;--cream:#fffaf1;--shadow:0 18px 48px rgba(70,84,76,.10);--radius:26px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(15px);border-bottom:1px solid rgba(228,233,230,.85)}.header-inner{max-width:1180px;margin:auto;height:84px;padding:0 26px;display:flex;align-items:center;gap:28px}.logo{display:flex;align-items:center;gap:12px;margin-right:auto}.logo-mark{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--mint);font-size:24px}.logo strong{display:block;font-size:1.22rem;letter-spacing:.08em}.logo small{display:block;font-size:.69rem;color:var(--muted);letter-spacing:.04em}.nav{display:flex;gap:30px;font-size:.88rem;font-weight:700}.nav a:hover{color:var(--green)}.header-cta{background:var(--green);color:#fff;padding:11px 20px;border-radius:10px;font-size:.86rem;font-weight:800;box-shadow:0 7px 18px rgba(49,151,111,.18)}
.hero{position:relative;overflow:hidden;border-bottom:1px solid #f0f1ef}.hero-inner{max-width:1180px;margin:auto;min-height:560px;padding:72px 34px 64px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:44px}.demo-badge{display:inline-flex;align-items:center;background:var(--mint);color:var(--green-dark);padding:6px 13px;border-radius:999px;font-weight:800;font-size:.72rem;letter-spacing:.08em}.hero h1{font-size:clamp(2.4rem,5vw,4.65rem);line-height:1.32;letter-spacing:.05em;margin:20px 0 20px;font-weight:800}.hero h1 em{font-style:normal;color:var(--green)}.hero-copy>p{max-width:590px;font-size:1.02rem;color:#554f4b;margin:0 0 26px}.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}.hero-tags span{font-size:.82rem;padding:8px 13px;border-radius:999px;background:#fafafa;border:1px solid #edf0ed}.hero-tags span:nth-child(1){background:var(--mint);color:var(--green-dark)}.hero-tags span:nth-child(2){background:var(--peach);color:#cc6b5d}.hero-tags span:nth-child(3){background:var(--yellow-bg);color:#b57d17}.hero-tags span:nth-child(4){background:var(--lav);color:#6b60ad}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-width:330px;max-width:100%;background:linear-gradient(135deg,#3eb68a,#26976e);color:#fff;padding:16px 26px;border:0;border-radius:999px;font-weight:800;font-size:1.02rem;box-shadow:0 12px 28px rgba(49,151,111,.22);cursor:pointer}.primary-btn span{font-size:1.5rem;line-height:1}.primary-btn:hover{transform:translateY(-1px);filter:saturate(1.05)}.hero-art{min-height:440px;position:relative}.hero-art .wash{position:absolute;border-radius:50%;filter:blur(.2px)}.wash-green{width:390px;height:390px;background:radial-gradient(circle at 40% 40%,rgba(226,244,218,.9),rgba(246,250,230,.45) 65%,transparent 72%);left:30px;top:12px}.wash-peach{width:230px;height:230px;background:radial-gradient(circle,rgba(255,230,217,.55),transparent 70%);right:-20px;bottom:30px}.branch{position:absolute;width:315px;height:390px;left:62px;top:30px;transform:rotate(4deg)}.stem{position:absolute;width:8px;height:330px;border-radius:8px;background:linear-gradient(#527c53,#7f9362);left:145px;top:45px;transform:rotate(12deg);transform-origin:bottom}.leaf{position:absolute;width:70px;height:30px;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#66ad74,#b9cf7d);transform-origin:right center;box-shadow:inset 0 0 12px rgba(255,255,255,.22)}.l1{left:90px;top:88px;transform:rotate(18deg)}.l2{left:150px;top:112px;transform:rotate(158deg)}.l3{left:78px;top:150px;transform:rotate(26deg)}.l4{left:163px;top:176px;transform:rotate(155deg)}.l5{left:67px;top:222px;transform:rotate(34deg)}.l6{left:160px;top:246px;transform:rotate(153deg)}.l7{left:54px;top:284px;transform:rotate(40deg)}.l8{left:152px;top:305px;transform:rotate(148deg)}.flower{position:absolute;width:16px;height:16px;background:#f1c54f;border-radius:50% 50% 45% 55%;box-shadow:12px 1px 0 #f7d66e,6px 10px 0 #efb73f}.f1{left:95px;top:58px}.f2{left:202px;top:142px}.f3{left:75px;top:255px}.hero-art p{position:absolute;right:0;top:125px;font-size:1rem;line-height:2.3;letter-spacing:.13em}.hero-art p strong{font-weight:500}.bird{position:absolute;font-size:44px;color:#69b3dd;transform:rotate(-15deg)}.b1{right:58px;top:45px}.b2{right:4px;top:70px;font-size:34px}.spark{position:absolute;color:#8dc9b0}.s1{right:28px;bottom:90px}.s2{left:22px;top:80px;color:#f4c95f}.hero-bg{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.bubble-a{width:180px;height:180px;background:rgba(225,246,246,.7);left:-80px;top:20px}.bubble-b{width:140px;height:140px;background:rgba(244,235,255,.65);right:-65px;top:0}
.section{max-width:1180px;margin:auto;padding:74px 34px}.section-title{text-align:center;margin-bottom:38px}.section-title>span{font-size:.7rem;letter-spacing:.2em;color:var(--green);font-weight:800}.section-title h2{font-size:clamp(1.7rem,3.5vw,2.25rem);margin:7px 0 6px;letter-spacing:.07em}.section-title p{margin:0;color:var(--muted);font-size:.91rem}.feature-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.feature-grid article{min-width:0;text-align:center;border:1px solid #edf0ee;border-radius:18px;padding:24px 14px 22px;background:#fff;box-shadow:0 8px 24px rgba(77,90,82,.06);transition:.2s}.feature-grid article:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.icon,.result-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font-size:1.65rem}.mint{background:var(--mint);color:var(--green)}.coral{background:var(--peach);color:var(--coral)}.yellow{background:var(--yellow-bg);color:var(--yellow)}.green{background:#eef7e8;color:#68a251}.sun{background:#fff3d5;color:#e9a31d}.blue{background:var(--blue-bg);color:var(--blue)}.feature-grid h3{font-size:.98rem;margin:0 0 8px}.feature-grid p{font-size:.78rem;color:#625e5a;line-height:1.75;margin:0}
.flow{padding-top:20px}.flow-card{background:linear-gradient(135deg,#f7fbfa,#fbfcf8);border:1px solid #eff3f0;border-radius:28px;padding:36px 38px 40px;box-shadow:0 12px 40px rgba(77,90,82,.05)}.section-title.compact{margin-bottom:24px}.section-title.compact h2{font-size:1.45rem}.section-title.compact em{font-style:normal;color:var(--green);font-size:1.7rem}.flow-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:22px}.flow-item{text-align:center;position:relative}.num{position:absolute;top:-5px;left:calc(50% - 45px);background:var(--green);color:#fff;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem}.flow-icon{width:88px;height:88px;border-radius:50%;margin:0 auto 14px;background:#fff;border:1px solid #e5ece7;display:grid;place-items:center;font-size:2rem;color:var(--green);box-shadow:0 7px 20px rgba(71,95,82,.06)}.flow-item:nth-of-type(3) .flow-icon{color:#e8a825}.flow-item:nth-of-type(5) .flow-icon{color:#e77b75}.flow-item h3{margin:0 0 5px;font-size:1.03rem}.flow-item p{margin:0;color:#645f5a;font-size:.8rem}.flow-arrow{color:#afc9b8;font-size:1.5rem;letter-spacing:.08em}
.start{padding-top:56px}.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}.role-card{appearance:none;border:1px solid #d9e8df;background:#fff;border-radius:18px;padding:27px 24px 18px;text-align:center;color:var(--ink);cursor:pointer;transition:.2s;box-shadow:0 8px 24px rgba(77,90,82,.04)}.role-card:hover,.role-card.selected{transform:translateY(-3px);box-shadow:var(--shadow)}.role-self.selected,.role-self:hover{border-color:#8bc6a8;background:#fbfffd}.role-parent{border-color:#f2d6d0}.role-parent.selected,.role-parent:hover{border-color:#ff9c8e;background:#fffdfc}.role-support{border-color:#cfe2f2}.role-support.selected,.role-support:hover{border-color:#82bce4;background:#fbfdff}.role-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;font-size:1.9rem;color:var(--green);background:var(--mint)}.role-parent .role-icon{color:var(--coral);background:var(--peach)}.role-support .role-icon{color:var(--blue);background:var(--blue-bg)}.role-card h3{margin:0 0 5px;font-size:1.08rem}.role-card p{font-size:.8rem;color:#66605d;line-height:1.75;margin:0 0 18px}.role-btn{display:block;margin:0 -10px;border-radius:999px;padding:9px 12px;background:var(--green);color:#fff;font-weight:800;font-size:.8rem}.role-parent .role-btn{background:linear-gradient(90deg,#ff9987,#ff7e79)}.role-support .role-btn{background:linear-gradient(90deg,#71b9e4,#5e9fd6)}
.form-card,.result-card{margin-top:30px;border:1px solid #e7ece9;border-radius:var(--radius);background:#fff;padding:clamp(24px,4vw,48px);box-shadow:var(--shadow)}.form-heading{display:flex;align-items:flex-start;gap:14px;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid #eef1ef}.mini-sprout{font-size:1.8rem}.form-heading h2{margin:0 0 4px;font-size:1.4rem}.form-heading p{margin:0;color:var(--muted);font-size:.86rem}.selected-role{background:#f3faf6;border:1px solid #dceee4;color:var(--green-dark);padding:11px 14px;border-radius:12px;margin-bottom:22px;font-size:.88rem;font-weight:700}.selected-role.attention{background:#fff3f1;border-color:#ffd0c9;color:#b4574d}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field.full{grid-column:1/-1}.field label{display:block;font-weight:800;font-size:.91rem;margin-bottom:7px}.field label span{font-size:.7rem;font-weight:500;color:#938b85;margin-left:5px}.field label b{font-size:.65rem;background:#fff0ee;color:#d85e55;padding:2px 5px;border-radius:5px;margin-left:5px}input,select,textarea{width:100%;border:1px solid #dce5df;background:#fff;border-radius:13px;padding:13px 14px;color:var(--ink);outline:none;transition:.15s}textarea{min-height:106px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:#72b898;box-shadow:0 0 0 4px rgba(63,165,123,.10)}.privacy-note{display:flex;gap:13px;align-items:flex-start;background:linear-gradient(90deg,#fff7e6,#fffaf2);border:1px solid #f3dfb0;border-radius:15px;padding:14px 17px;margin-top:22px;color:#655744}.privacy-note>span{flex:0 0 31px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#f6c356;color:#fff;font-weight:900}.privacy-note p{margin:0;font-size:.78rem;line-height:1.7}.submit-wrap{text-align:center;margin-top:28px}.submit-btn{min-width:360px}.loading{display:none;color:var(--muted);font-size:.84rem;margin-top:12px}.is-loading .loading{display:block}.is-loading .submit-btn{opacity:.58;pointer-events:none}.error{margin:20px 0;background:#fff2f0;border:1px solid #ffd1ca;color:#a0443a;padding:14px 17px;border-radius:14px}
.result-section{padding-top:25px}.result-head{text-align:center;max-width:750px;margin:0 auto 32px}.result-head h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:10px 0}.result-head p{color:var(--muted);margin:0}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.result-box{border:1px solid #e8ece9;border-radius:18px;padding:22px;background:#fff}.result-box.wide{grid-column:1/-1}.result-box .result-icon{width:48px;height:48px;margin:0 0 10px;font-size:1.15rem}.result-box h3{font-size:1.02rem;margin:0 0 9px}.result-box p,.result-box li{color:#5e5a56;font-size:.87rem}.result-box p{white-space:pre-wrap;margin:0}.result-box ul{margin:0;padding-left:1.25em}.result-box li+li{margin-top:6px}.result-box.hope{background:linear-gradient(135deg,#edf9f2,#fffdf5);border-color:#d9ebdf}.result-note{margin-top:18px}.outline-btn{display:inline-block;border:1px solid var(--green);color:var(--green);font-weight:800;border-radius:999px;padding:11px 24px}
footer{position:relative;text-align:center;padding:62px 20px 30px;background:linear-gradient(#fff,#eff9f4);overflow:hidden;color:#5d6f65}footer p{font-size:.9rem;letter-spacing:.06em;margin:0 0 8px}footer small{font-size:.72rem}.footer-wave{position:absolute;left:-5%;right:-5%;top:8px;height:55px;background:radial-gradient(80% 80% at 50% 100%,rgba(175,223,197,.5),transparent 72%)}
@media(max-width:980px){.nav{display:none}.feature-grid{grid-template-columns:repeat(3,1fr)}.hero-inner{grid-template-columns:1fr}.hero-art{min-height:330px}.hero-art p{right:6%;top:90px}.branch{left:24%;top:-10px;transform:scale(.85)}.wash-green{left:25%;top:-10px}.hero{text-align:left}}
@media(max-width:700px){.header-inner{height:70px;padding:0 15px}.logo-mark{width:40px;height:40px}.logo strong{font-size:1rem}.logo small{display:none}.header-cta{font-size:.73rem;padding:9px 12px}.hero-inner,.section{padding-left:20px;padding-right:20px}.hero-inner{padding-top:50px;min-height:auto}.hero h1{font-size:clamp(2rem,11vw,3.2rem);letter-spacing:.02em}.primary-btn{min-width:100%}.hero-art{min-height:290px;margin-top:-10px;overflow:hidden}.branch{left:3%;top:-30px;transform:scale(.72)}.wash-green{width:310px;height:310px;left:0}.hero-art p{right:0;top:88px;font-size:.82rem}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-grid article{padding:20px 10px}.icon{width:60px;height:60px}.flow-card{padding:28px 20px}.flow-grid{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);height:24px}.role-grid,.form-grid,.result-grid{grid-template-columns:1fr}.submit-btn{min-width:100%}.result-box.wide{grid-column:auto}.section{padding-top:55px;padding-bottom:55px}.form-card,.result-card{padding:22px 16px;border-radius:20px}.form-heading h2{font-size:1.15rem}}
@media(max-width:430px){.feature-grid{grid-template-columns:1fr}.hero-tags span{font-size:.74rem}.hero-art{display:none}}

/* STEP12-01 KIBOU KARTE */
.hero-note{font-size:.75rem!important;color:#7c817e!important;margin-top:12px!important}.journey{padding-top:70px}.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1180px;margin:34px auto 0}.journey-card{position:relative;display:block;padding:26px 22px;border:1px solid #e2e9e5;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 12px 35px rgba(51,88,68,.06);transition:.2s}.journey-card[href]:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(51,88,68,.10)}.journey-card.active{background:linear-gradient(145deg,#eaf8f0,#fffdf6);border-color:#a9d9bf}.journey-card.future{background:#fafbfa}.journey-no{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#edf7f1;color:var(--green-dark);font-weight:900;font-size:.78rem;margin-bottom:18px}.journey-card small{display:block;color:#7b9588;font-weight:800;letter-spacing:.08em}.journey-card h3{font-size:1.35rem;margin:5px 0 10px}.journey-card p{color:var(--muted);font-size:.84rem;line-height:1.8;min-height:92px}.journey-card b{color:var(--green);font-size:.8rem}.journey-loop{max-width:920px;margin:22px auto 0;padding:15px 20px;border-radius:999px;background:#f0f8f4;text-align:center;color:var(--green-dark);font-size:.82rem;font-weight:800}.three-views{padding-top:45px}.view-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1050px;margin:34px auto 0}.view-grid article{padding:30px 26px;border-radius:22px;background:#fff;border:1px solid #e6ece8;text-align:center;box-shadow:0 12px 35px rgba(51,88,68,.05)}.view-grid article>span{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 13px;border-radius:50%;background:#eef8f3;color:var(--green);font-size:1.5rem}.view-grid h3{margin:0 0 3px;font-size:1.25rem}.view-grid strong{display:block;color:var(--green-dark);font-size:.9rem;margin-bottom:10px}.view-grid p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.8}.karte-next{margin-top:25px;padding:25px;border-radius:18px;background:linear-gradient(135deg,#edf9f2,#fffaf0);text-align:center}.karte-next h3{margin:0 0 8px;font-size:1.2rem}.karte-next p{max-width:720px;margin:0 auto;color:var(--muted);font-size:.85rem;line-height:1.8}.karte-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.small-btn{min-width:auto;padding:11px 22px;font-size:.84rem}
@media(max-width:980px){.journey-grid{grid-template-columns:repeat(2,1fr)}.journey-card p{min-height:0}}
@media(max-width:700px){.journey-grid,.view-grid{grid-template-columns:1fr}.journey-loop{border-radius:18px;line-height:1.8}.journey-card{padding:22px}.karte-actions{flex-direction:column}.small-btn{width:100%}}