/* KRAUTER PEEL ページ専用CSS（共通部分は /vavitte-life/styles.css）。すべて .kp- 接頭辞で他ページへ影響させない */
.kp{--kp-wine:#5a1f37;--kp-merlot:#38101f;--kp-rose:#d9718f;--kp-dusty:#c98a9b;--kp-cta:#b8335a;--kp-ivory:#fcf8f3;--kp-cream:#f6ede4;--kp-blush:#fbe9ee;--kp-ink:#2b2227;--kp-muted:#6a5a62;color:var(--kp-ink);overflow-x:clip}
.kp img{display:block;max-width:100%;height:auto}
.kp-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(20px,4.6vw,56px)}
.kp section{padding:clamp(60px,8.5vw,120px) 0}
.kp-tag{font:600 12px/1 var(--sans);letter-spacing:.24em;color:var(--kp-cta);margin-bottom:22px}
.kp h2{font:600 clamp(28px,3.8vw,50px)/1.42 var(--jp);letter-spacing:.03em;margin:0 0 22px;color:var(--kp-ink)}
.kp h3{font-family:var(--jp);margin:0}
.kp p{font:400 clamp(14.5px,1.25vw,16.5px)/2 var(--jp);margin:0 0 18px}
.kp-eyebrow{font:600 12px/1 var(--sans)!important;letter-spacing:.26em;color:var(--kp-cta);margin:0 0 18px!important}

/* ボタン */
.kp-actions{display:flex;flex-wrap:wrap;gap:12px 14px;margin:24px 0 0}
.kp-actions--center{justify-content:center}
.kp-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:16px 28px;border-radius:12px;font:600 15px/1.4 var(--jp);letter-spacing:.04em;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;text-align:left}
.kp-btn span{font-size:18px}
.kp-btn:hover{transform:translateY(-2px)}
.kp-btn--primary{background:var(--kp-cta);color:#fff;box-shadow:0 14px 30px rgba(184,51,90,.28)}
.kp-btn--primary:hover{background:var(--kp-wine)}
.kp-btn--ghost{background:rgba(255,255,255,.85);color:var(--kp-wine);border:1.5px solid rgba(90,31,55,.35)}
.kp-btn--ghost:hover{border-color:var(--kp-wine);background:#fff}
.kp-btn--white{background:#fff;color:var(--kp-wine);box-shadow:0 14px 34px rgba(30,8,18,.3)}
.kp-btn--outline{background:rgba(56,16,31,.25);color:#fff;border:1.5px solid rgba(255,255,255,.75)}
.kp-btn--outline:hover{background:rgba(255,255,255,.14)}
.kp-textlink{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;color:var(--kp-wine);font:600 14px/1.6 var(--jp);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* 01 HERO：アーチ型の写真 */
.kp-hero{background:linear-gradient(160deg,#fffdfa 0%,#fbe9ee 55%,#f5d5df 100%);padding:clamp(28px,4vw,56px) 0 clamp(52px,6vw,100px)!important;position:relative;overflow:hidden}
.kp-hero:before{content:"";position:absolute;left:-12%;bottom:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 68%);pointer-events:none}
.kp-hero-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;position:relative}
.kp-hero-visual{position:relative;order:-1}
.kp-arch{margin:0;overflow:hidden;border-radius:999px 999px 24px 24px;aspect-ratio:4/3;box-shadow:0 28px 60px rgba(90,31,55,.22)}
.kp .kp-arch img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.kp .kp-hero-herb{position:absolute;left:-6px;bottom:-14px;width:84px;height:84px;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 12px 26px rgba(90,31,55,.22)}
.kp-hero-badge{position:absolute;right:6px;bottom:10px;background:var(--kp-wine);color:#fff;border-radius:12px;padding:10px 16px;font:600 11px/1.4 var(--sans);letter-spacing:.2em;display:flex;flex-direction:column;gap:2px}
.kp-hero-badge b{font:600 14px/1.3 var(--jp);letter-spacing:.06em}
.kp h1{margin:0 0 16px;font-weight:600;word-break:keep-all}
.kp-h1-en{display:block;font:italic 500 clamp(22px,6.4vw,38px)/1.1 var(--serif);letter-spacing:.04em;color:var(--kp-cta);margin-bottom:12px}
.kp-h1-jp{display:block;font:700 clamp(32px,9.4vw,66px)/1.38 var(--jp);letter-spacing:.03em;color:var(--kp-wine)}
.kp-lead{font-size:clamp(14.5px,1.45vw,18px)!important;line-height:1.9!important;max-width:32em;color:#4a3e45;margin-bottom:0!important}

/* 02 ABOUT */
.kp-about{background:var(--kp-ivory)}
.kp-about-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.kp-about-photo{margin:0;position:relative}
.kp .kp-about-photo img{width:100%;aspect-ratio:4/3.6;object-fit:cover;object-position:50% 40%;border-radius:24px 24px 24px 120px;box-shadow:0 24px 54px rgba(90,31,55,.18)}
.kp-name{font:600 13px/1.6 var(--jp)!important;letter-spacing:.14em;color:var(--kp-muted);margin:0 0 10px!important}
.kp-about-copy h2{color:var(--kp-wine);font-size:clamp(30px,4.4vw,58px)}

/* 03 4つの力（ワイン背景） */
.kp-power{background:linear-gradient(160deg,var(--kp-wine) 0%,var(--kp-merlot) 100%);color:#fff;position:relative}
.kp-head--light .kp-tag{color:#f2b3c6}
.kp-head--light h2{color:#fff}
.kp-power-list{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:14px;counter-reset:none}
.kp-power-list li{position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:22px 20px}
.kp-power-list svg{grid-row:1/5;width:44px;height:44px;fill:none;stroke:#f2b3c6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kp-power-list b{font:italic 500 16px/1 var(--serif);color:#f2b3c6;margin-bottom:6px}
.kp-power-list small{font:600 11px/1 var(--sans);letter-spacing:.2em;color:#e8c3cf;margin-bottom:8px}
.kp-power-list h3{font:700 clamp(18px,1.9vw,22px)/1.45 var(--jp);color:#fff}
.kp-power-list p{font:400 13.5px/1.7 var(--jp);color:#e6d3da;margin:6px 0 0}

/* 04 おすすめ（左見出し＋右リスト） */
.kp-fit{background:#fff}
.kp-fit-grid{display:grid;grid-template-columns:1fr;gap:30px}
.kp-fit-list{list-style:none;margin:0;padding:0}
.kp-fit-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:22px 0;border-bottom:1px solid #ecd9df}
.kp-fit-list li:first-child{border-top:1px solid #ecd9df}
.kp-fit-no{font:italic 500 28px/1 var(--serif);color:var(--kp-rose);min-width:2em}
.kp-fit-list h3{font:700 clamp(16.5px,1.7vw,21px)/1.55 var(--jp);color:var(--kp-wine);margin-bottom:6px}
.kp-fit-list p{font-size:14px!important;line-height:1.85!important;color:var(--kp-muted);margin:0}
.kp-fit .kp-head p{color:var(--kp-muted)}

/* 05 研修 */
.kp-learn{background:var(--kp-blush)}
.kp-learn-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.kp-learn-photos{position:relative;padding-bottom:12px}
.kp-lph{margin:0}
.kp .kp-lph img{width:100%;object-fit:cover;border-radius:20px}
.kp .kp-lph--a img{aspect-ratio:16/10;box-shadow:0 22px 48px rgba(90,31,55,.18)}
.kp-lph--b{position:absolute;right:-6px;bottom:-26px;width:46%}
.kp .kp-lph--b img{aspect-ratio:4/3;border:4px solid #fff;box-shadow:0 16px 34px rgba(90,31,55,.22)}
.kp-caption{font:500 12px/1.6 var(--jp)!important;color:var(--kp-muted);margin:14px 0 0!important}
.kp-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.kp-steps li{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 8px 22px rgba(90,31,55,.07)}
.kp-steps b{flex:none;width:34px;height:34px;border-radius:50%;background:var(--kp-wine);color:#fff;font:600 12px/34px var(--sans);text-align:center;letter-spacing:.04em}
.kp-steps span{font:600 15px/1.6 var(--jp);color:var(--kp-ink)}

/* 06 導入後の価値（横の道すじ） */
.kp-value{background:var(--kp-cream)}
.kp-head--center{text-align:center;max-width:760px;margin:0 auto}
.kp-path{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0;position:relative}
.kp-path li{position:relative;display:grid;grid-template-columns:52px 1fr;column-gap:18px;align-items:center;padding:0 0 26px}
.kp-path li:before{content:"";position:absolute;left:25px;top:52px;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,var(--kp-dusty) 0 5px,transparent 5px 10px)}
.kp-path li:last-child{padding-bottom:0}
.kp-path li:last-child:before{display:none}
.kp-path i{grid-row:1/3;width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--kp-rose);color:var(--kp-wine);font:italic 500 22px/48px var(--serif);text-align:center}
.kp-path small{font:600 11px/1 var(--sans);letter-spacing:.2em;color:var(--kp-cta);align-self:end;margin-bottom:6px}
.kp-path strong{font:700 clamp(17px,1.8vw,21px)/1.5 var(--jp);color:var(--kp-wine);align-self:start}
.kp-path .kp-path-goal i{background:var(--kp-wine);border-color:var(--kp-wine);color:#fff}

/* 07 認定サロン */
.kp-cert{background:#fff}
.kp-cert-card{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;background:linear-gradient(135deg,#fff 0%,var(--kp-blush) 100%);border:1px solid #efd3dc;border-radius:28px;padding:clamp(28px,5vw,64px);box-shadow:0 24px 56px rgba(90,31,55,.1)}
.kp-cert-mark{margin:0;width:clamp(150px,22vw,250px);aspect-ratio:1;border-radius:50%;padding:8px;background:linear-gradient(145deg,#f3d3dd,#d9b1be);box-shadow:0 18px 40px rgba(90,31,55,.22)}
.kp .kp-cert-mark img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.kp-cert-copy h2{color:var(--kp-wine)}

/* 08 最終CTA（写真背景） */
.kp-final{position:relative;color:#fff;overflow:hidden;background:var(--kp-merlot)}
.kp-final-bg{position:absolute;inset:0}
.kp .kp-final-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}
.kp-final-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(56,16,31,.72),rgba(90,31,55,.82))}
.kp-final .kp-wrap{position:relative}
.kp-final-inner{text-align:center;max-width:820px;margin:0 auto}
.kp-final .kp-eyebrow{color:#f2b3c6}
.kp .kp-final h2{color:#fff;font-size:clamp(28px,4.4vw,54px)}
.kp-final-lead{font:600 clamp(16px,1.8vw,21px)/1.7 var(--jp)!important;color:#fbe9ee;margin-bottom:6px!important}

/* PC */
@media (min-width:700px){
.kp-power-list{grid-template-columns:repeat(2,1fr);gap:16px}
.kp-hero-herb{width:110px}
.kp .kp-hero-herb{width:110px;height:110px}
.kp-path{grid-template-columns:repeat(5,1fr);gap:14px}
.kp-path:before{content:"";position:absolute;left:10%;right:10%;top:26px;height:2px;background:repeating-linear-gradient(to right,var(--kp-dusty) 0 6px,transparent 6px 12px)}
.kp-path li{grid-template-columns:1fr;justify-items:center;align-content:start;align-items:start;text-align:center;padding:0}
.kp-path li:before{display:none}
.kp-path i{grid-row:auto;position:relative;margin-bottom:14px}
.kp-path small{align-self:auto;margin-bottom:8px}
.kp-path strong{align-self:auto}
}
@media (min-width:900px){
.kp-hero-grid{grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px)}
.kp-hero-visual{order:2}
.kp-hero-copy{order:1}
.kp-arch{aspect-ratio:4/5}
.kp .kp-arch img{object-position:74% 50%}
.kp-about-grid{grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px)}
.kp-power-list{grid-template-columns:repeat(4,1fr);gap:18px}
.kp-power-list li{grid-template-columns:1fr;row-gap:0;padding:30px 24px 32px;align-items:start}
.kp-power-list svg{grid-row:auto;width:52px;height:52px;margin-bottom:20px}
.kp-fit-grid{grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,110px);align-items:start}
.kp-fit .kp-head{position:sticky;top:110px}
.kp-learn-grid{grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px)}
.kp-cert-card{grid-template-columns:auto 1fr;gap:clamp(32px,6vw,90px)}
}
@media (max-width:420px){
.kp-btn{width:100%}
}