/* ============================================================
   きょうさい. LP v4「叩き台 → プロのポスター」（2026-11-11 前田さん）
   絵の章は image 2.6（_tools/kiki-src/v4/）。ここは絵の上に重ねる本物の部品と、フォーム・ヘッダー・下のボタン
   色：生成り #F3EEE3／墨 #17181A／朱 #E1412A／深緑 #14382A
   文字の大きさの下限：本文 16px・注意書き 14px（スキル wakariyasuku-sense）
   ============================================================ */
html[data-theme="kinari4"]{--k4-paper:#F3EEE3;--k4-ink:#17181A;--k4-sub:#4A463F;--k4-line:#DCD3C1;--k4-shu:#E1412A;--k4-card:#FFFDF8}
html[data-theme="kinari4"] body{background:var(--k4-paper);color:var(--k4-ink)}
html[data-theme="kinari4"] main{display:block}

/* ヘッダー */
html[data-theme="kinari4"] .k-hdr{background:rgba(243,238,227,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(23,24,26,.06)}
html[data-theme="kinari4"] .k-hdr .lg-w{display:none}
html[data-theme="kinari4"] .k-hdr .lg-d{display:block}
html[data-theme="kinari4"] .k-hdr .k-btn{min-height:46px;padding:10px 22px;font-size:15px}

/* 絵の章 */
.k4-pn{position:relative;background:var(--k4-paper)}
.k4-fig{position:relative;max-width:1600px;margin:0 auto;container-type:inline-size}
.k4-fig picture,.k4-fig picture>img{display:block;width:100%;height:auto}
.k4-at{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%)}
@media (max-width:699px){.k4-at{left:calc(var(--xs)*1%);top:calc(var(--ys)*1%);width:calc(var(--ws)*1%);height:calc(var(--hs)*1%)}}
.k4-hot{display:block;border-radius:999px;outline-offset:4px}
.k4-hot:hover{box-shadow:0 0 0 3px rgba(225,65,42,.28)}
.k4-hot:focus-visible{outline:3px solid var(--k4-shu)}
.k4-note{color:var(--k4-sub);max-width:1100px;margin:0 auto;padding:8px 20px 0;font-size:14px;line-height:1.7;text-align:center}
.k4-cta{display:flex;justify-content:center;padding:28px 20px 56px}
.k4-cta .k-btn{min-width:min(560px,100%)}
html[data-theme="kinari4"] .k-marq{padding:18px 0 40px}

/* ボタン（朱） */
html[data-theme="kinari4"] .k-btn--cy{background:linear-gradient(180deg,#EF5A3F 0%,#E1412A 55%,#C9341F 100%);text-shadow:0 1px 0 rgba(110,20,5,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(90,15,5,.22),0 16px 30px -12px rgba(225,65,42,.65),0 3px 8px rgba(90,20,5,.18)}
html[data-theme="kinari4"] .k-btn--cy svg{color:var(--k4-shu)}
html[data-theme="kinari4"] .k-btn--cy::after{display:none}

/* セルフチェック：絵の上の本物の部品 */
.k4-check{padding:0}
.k4-card{display:block;cursor:pointer;border-radius:1.1cqw;transition:box-shadow .15s,background .15s}
.k4-card input{position:absolute;opacity:0;width:1px;height:1px}
.k4-card:hover{box-shadow:0 0 0 2px rgba(225,65,42,.35)}
.k4-card:has(input:focus-visible){outline:3px solid var(--k4-shu);outline-offset:2px}
.k4-card:has(input:checked){box-shadow:0 0 0 .3cqw var(--k4-shu);background:rgba(225,65,42,.05)}
.k4-tick{pointer-events:none;border-radius:.6cqw;background:var(--k4-shu);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.k4-tick svg{width:78%;height:78%;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.k4-card:has(input:checked)+.k4-tick{opacity:1;transform:none}
@media (max-width:699px){.k4-card{border-radius:3.4cqw}.k4-card:has(input:checked){box-shadow:0 0 0 .8cqw var(--k4-shu)}.k4-tick{border-radius:1.6cqw}}

/* 結果：絵の「0」・言葉を同じ色の面でおおって、本物を出す */
.k4-num{display:flex;align-items:center;justify-content:center;background:#FDFCF8;color:#E04B2A;font-family:"Archivo","Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:15.2cqw;line-height:1;letter-spacing:-.02em;font-feature-settings:"tnum"}
.k4-msg{display:flex;align-items:center;margin:0;background:#FDFCF8;color:var(--k4-ink);font-weight:900;font-size:1.95cqw;line-height:1.35}
#kmeter i{display:block;border-radius:999px;background:transparent;transition:background .25s}
#kmeter i.on{background:var(--k4-shu)}
@media (max-width:699px){
  .k4-num{background:#FDFAF5;color:#111;font-size:43cqw;padding-top:3cqw}
  .k4-msg{background:#FDFAF5;font-size:5.2cqw;justify-content:flex-start}
}

/* 申し込み：左に絵（ポスター）、右にフォーム */
.k4-apply{background:var(--k4-paper);padding:40px 0 96px}
.k4-apply__in{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:48px;align-items:start}
.k4-apply__pic{width:100%;margin:0;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(60,40,10,.35)}
.k4-qr{display:block;background:#fff;border-radius:10%;padding:1.2%}
.k4-qr img{display:block;width:100%;height:100%;object-fit:contain}
@media (max-width:1080px){.k4-apply__in{grid-template-columns:1fr;max-width:640px}}
@media (max-width:699px){.k4-apply{padding:0 0 72px}.k4-apply__in{padding:0;gap:0}.k4-apply__pic{border-radius:0;box-shadow:none}.k4-apply .fc{margin:0 14px}}

/* フォーム：大きな字 */
html[data-theme="kinari4"] .fc{position:sticky;top:90px;background:#fff;color:var(--k4-ink);border-radius:28px;border:2px solid var(--k4-shu);box-shadow:0 30px 60px -36px rgba(60,40,10,.4);padding:34px 32px 30px}
html[data-theme="kinari4"] .fc .tag{background:var(--k4-shu);color:#fff;font-size:15px;padding:6px 14px}
html[data-theme="kinari4"] .fc h3{color:var(--k4-ink);font-size:clamp(24px,2.2vw,30px);line-height:1.4;font-weight:900}
html[data-theme="kinari4"] .fc .fl{color:var(--k4-sub);font-size:17px}
html[data-theme="kinari4"] .fc label{font-size:17px;font-weight:800}
html[data-theme="kinari4"] .fc .hint{color:var(--k4-sub);font-size:15px}
html[data-theme="kinari4"] .fc input[type=text],html[data-theme="kinari4"] .fc input[type=email],html[data-theme="kinari4"] .fc input[type=tel]{font-size:18px;min-height:56px;background:#FBF8F1;border:2px solid var(--k4-line);border-radius:14px}
html[data-theme="kinari4"] .fc input:focus{border-color:var(--k4-shu);box-shadow:0 0 0 4px rgba(225,65,42,.14);outline:0}
html[data-theme="kinari4"] .fc .rq{background:var(--k4-shu);font-size:12.5px}
html[data-theme="kinari4"] .fc .op{font-size:12.5px}
html[data-theme="kinari4"] .fc .agree{background:#F6F1E6;border-radius:14px}
html[data-theme="kinari4"] .fc .agree span{font-size:15.5px}
html[data-theme="kinari4"] .fc a{color:var(--k4-shu)}
html[data-theme="kinari4"] .fc .k-btn{min-height:68px;font-size:19px}
html[data-theme="kinari4"] .fc .picked{font-size:15px}
@media (max-width:1080px){html[data-theme="kinari4"] .fc{position:relative;top:0}}
@media (max-width:699px){html[data-theme="kinari4"] .fc{padding:26px 20px 24px;border-radius:22px}}

/* スマホの下のボタン・ページの下 */
html[data-theme="kinari4"] .k-sbar{background:rgba(243,238,227,.94);border-top:1px solid var(--k4-line)}
html[data-theme="kinari4"] .k-foot{background:#17181A}

/* 動き（2026-11-11 前田さん「数字がまわるとか、目を引くデザイン」） */
.k4-count{display:flex;align-items:flex-end;justify-content:flex-end;background:#FDF6ED;color:#DF4527;font-family:"Archivo","Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:12.9cqw;line-height:.8;letter-spacing:-.035em;font-feature-settings:"tnum";padding-bottom:.25cqw;pointer-events:none}
.k4-count.is-done{animation:k4pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes k4pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@media (max-width:699px){.k4-count{font-size:17.2cqw;padding-bottom:.4cqw}}
/* 絵に描いたボタンに、ときどき光が流れる */
.k4-hot{overflow:hidden}
.k4-hot::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:skewX(-18deg);animation:k4shine 3.6s ease-in-out infinite;pointer-events:none}
@keyframes k4shine{0%,55%{left:-40%}85%,100%{left:120%}}
@media (prefers-reduced-motion:reduce){.k4-hot::after,.k4-count.is-done{animation:none}}

/* ============================================================
   ボタン（2026-11-11 前田さん「なぜかボタンは安っぽい」）
   絵に描いたボタンと同じにそろえる：太いゴシック（Noto Sans JP 900）・平らな朱・白い丸に朱の矢印・やわらかい影。
   内側の光沢・字の影・広い字間はやめる（安っぽく見える元）
   ============================================================ */
html[data-theme="kinari4"] .k-btn--cy{background:#E0432A;background:linear-gradient(180deg,#E64A2E 0%,#DA3E23 100%);color:#fff;border:0;text-shadow:none;
  font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;font-weight:900;letter-spacing:.01em;font-feature-settings:"palt";
  box-shadow:0 18px 30px -16px rgba(190,50,22,.75),0 3px 0 rgba(160,40,16,.35);gap:18px}
html[data-theme="kinari4"] .k-btn--cy:hover{background:linear-gradient(180deg,#EB5536 0%,#DE4428 100%);transform:translateY(-2px);box-shadow:0 22px 34px -16px rgba(190,50,22,.8),0 3px 0 rgba(160,40,16,.35)}
html[data-theme="kinari4"] .k-btn--cy:active{transform:translateY(2px);box-shadow:0 8px 16px -10px rgba(190,50,22,.7),0 1px 0 rgba(160,40,16,.35)}
html[data-theme="kinari4"] .k-btn--cy svg{box-sizing:content-box;width:.95em;height:.95em;padding:.42em;border-radius:50%;background:#fff;color:#E0432A;stroke-width:3.2;box-shadow:none;margin-right:-.35em}
html[data-theme="kinari4"] .k-btn--xl{min-height:84px;padding:18px 26px 18px 44px;font-size:clamp(20px,1.7vw,25px)}
html[data-theme="kinari4"] .k4-cta .k-btn{min-width:min(640px,100%)}
html[data-theme="kinari4"] .k-hdr .k-btn{min-height:48px;padding:10px 24px;font-size:15.5px;box-shadow:0 10px 20px -12px rgba(190,50,22,.7)}
html[data-theme="kinari4"] .k-sbar .k-btn{min-height:62px;font-size:18px;padding:12px 14px 12px 26px;justify-content:space-between}
html[data-theme="kinari4"] .fc .k-btn{min-height:74px;font-size:21px}
@media (max-width:699px){html[data-theme="kinari4"] .k-btn--xl{min-height:72px;font-size:19px;padding:14px 16px 14px 28px;justify-content:space-between}}
/* 字を大きく（ボタンの高さの4割）・矢印は右の端に置いて、字はまんなか */
html[data-theme="kinari4"] .k-btn--xl{position:relative;min-height:88px;padding:16px 96px;font-size:clamp(24px,2.15vw,31px);letter-spacing:0}
html[data-theme="kinari4"] .k-btn--xl svg{position:absolute;right:20px;top:50%;margin:-.9em 0 0;width:.9em;height:.9em;padding:.45em}
html[data-theme="kinari4"] .k-btn--xl:hover svg{transform:translateX(3px)}
html[data-theme="kinari4"] .k-sbar .k-btn{position:relative;justify-content:center;padding:12px 64px;font-size:19px;min-height:64px}
html[data-theme="kinari4"] .k-sbar .k-btn svg{position:absolute;right:12px;top:50%;margin:-.9em 0 0}
@media (max-width:699px){html[data-theme="kinari4"] .k-btn--xl{min-height:76px;padding:14px 70px 14px 26px;font-size:20.5px;justify-content:flex-start}html[data-theme="kinari4"] .k-btn--xl svg{right:14px}}

/* v5（booth・website・site・line） */
.k4-only-sp{display:none}
@media (max-width:699px){.k4-only-pc{display:none!important}.k4-only-sp{display:block}}
@media (min-width:700px){
  .k4-check--gen .k4-num{font-size:var(--num-cqw);color:var(--num-c);background:var(--num-bg)}
  .k4-check--gen .k4-msg{font-size:var(--msg-cqw);background:var(--num-bg)}
}
.k4-wall{background:var(--k4-paper);padding:56px 0 24px}
.k4-wall .k-wall{max-width:1280px;margin:28px auto 0;padding:0 20px}
.k4-wall .k-wall img{display:block;width:100%;height:auto;border-radius:18px}
/* 導入実績の下に、実際の会場のブースの写真を2段で流す（2026-11-14 前田さん。上の段は左へ・下の段は右へ） */
.k4-wall .k-marq2{display:grid;gap:14px;margin-top:30px}
html[data-theme="kinari4"] .k4-wall .k-marq{padding:0}
.k4-wall .k-marq img{width:320px;height:240px;border-radius:16px}
.k4-wall .k-marq__in{animation-duration:64s}
.k4-wall .k-marq--rev .k-marq__in{animation-duration:72s;animation-direction:reverse}
.k4-wall .k4-note{margin-top:16px}
@media (max-width:699px){.k4-wall .k-marq2{gap:10px;margin-top:22px}.k4-wall .k-marq img{width:208px;height:156px;border-radius:12px}}
/* 導入実績 No.1（生成りの地で読める色に） */
html[data-theme="kinari4"] .k-no1b__k{color:var(--k4-shu)}
html[data-theme="kinari4"] .k-no1b__h{color:var(--k4-ink)}
html[data-theme="kinari4"] .k-no1b__h b{background:none;-webkit-text-fill-color:var(--k4-shu);color:var(--k4-shu);animation:none}
html[data-theme="kinari4"] .k-no1b__s{color:var(--k4-sub);font-size:clamp(16px,1.25vw,18px)}
html[data-theme="kinari4"] .k-no1b__m small{color:#9A6B12}
html[data-theme="kinari4"] .k-no1b__note,html[data-theme="kinari4"] .k4-wall .k-ip__note{color:var(--k4-sub);font-size:14px;text-align:center}
html[data-theme="kinari4"] .k4-wall .rv{opacity:1;transform:none}
/* 2026-11-11 スマホで14px未満の字をなくす・申し込み欄のはみ出しをなくす */
html[data-theme="kinari4"] .fc .rq,html[data-theme="kinari4"] .fc .op{font-size:14px}
html[data-theme="kinari4"] .k-foot,html[data-theme="kinari4"] .k-foot p,html[data-theme="kinari4"] .k-foot a,html[data-theme="kinari4"] .k-foot summary,html[data-theme="kinari4"] .k-foot .copy{font-size:14px}
html[data-theme="kinari4"] .k-no1b__m small{font-size:14px}
.k4-apply__in>*{min-width:0}
@media (max-width:1080px){.k4-apply__in{grid-template-columns:minmax(0,1fr)}}