/* くまくま v1 — 元の紺・生成り・黄を活かした静的サイト */
:root { --ink:#1e3541; --paper:#f7f4ed; --muted:#5b666a; --line:#d4d6cc; --yellow:#efc447; --font-body:"Noto Sans JP",sans-serif; --font-en:"Manrope",sans-serif; --ls-body:.025em; scroll-padding-top:100px; }
.kumakuma { font-family:var(--font-body); color:var(--ink); background:var(--paper); font-size:15px; line-height:1.9; -webkit-font-smoothing:antialiased; }
.kumakuma h1,.kumakuma h2,.kumakuma h3,.kumakuma p,.kumakuma figure { margin:0; }
.kumakuma h1,.kumakuma h2,.kumakuma h3 { font-family:var(--font-body); letter-spacing:-.055em; font-weight:700; }
.kumakuma a { color:inherit; }
.kumakuma a:focus-visible { outline:3px solid #22718a; outline-offset:6px; }
.kumakuma ::selection { color:var(--ink); background:var(--yellow); }
.k-header { height:106px; max-width:1600px; margin:auto; padding:0 5.5%; display:flex; align-items:center; gap:32px; border-bottom:1px solid var(--line); }
.k-brand { display:inline-flex; align-items:center; gap:12px; flex-shrink:0; font-size:23px; font-weight:800; letter-spacing:.03em; line-height:1.35; }
.k-brand small { display:block; font:600 8px/1.8 var(--font-en); letter-spacing:.17em; margin-top:6px; }
.k-monogram { display:grid; place-items:center; width:47px; height:47px; border:1px solid var(--ink); border-radius:50%; font:800 34px/1 var(--font-en); padding-bottom:6px; letter-spacing:-.08em; }
.k-nav { display:flex; gap:30px; margin-left:auto; font-size:12px; font-weight:500; }
.k-nav a { padding:12px 0; }
.k-nav a:hover,.k-text-link:hover { text-decoration:underline; text-underline-offset:7px; }
.k-button { display:inline-flex; justify-content:space-between; align-items:center; gap:32px; min-height:60px; padding:16px 28px; color:var(--ink); background:var(--yellow); border:1px solid transparent; border-radius:3px; font-size:14px; font-weight:700; line-height:1.6; transition:background .2s, transform .2s; }
.k-button:hover { background:#f5d779; transform:translateY(-2px); }
.k-button>span[aria-hidden] { font:500 26px/1 var(--font-en); }
.k-button-small { min-height:46px; padding:11px 18px; font-size:12px; gap:24px; }
.k-button-small>span { font-size:21px; }
.k-hero { max-width:1600px; margin:auto; padding:78px 5.5% 0; display:grid; grid-template-columns:1.05fr 1fr; column-gap:40px; position:relative; }
.k-eyebrow { font:600 10px/1.8 var(--font-en); letter-spacing:.12em; display:flex; align-items:center; gap:9px; }
.k-dot { width:7px; height:7px; border-radius:50%; background:var(--ink); display:inline-block; flex-shrink:0; }
.k-hero h1 { font-size:clamp(39px,4.4vw,67px); line-height:1.48; margin:25px 0 26px; font-weight:800; letter-spacing:-.065em; }
.k-highlight { position:relative; z-index:0; white-space:nowrap; }
.k-highlight::after { content:""; position:absolute; left:-.025em; right:-.01em; height:.18em; bottom:.07em; background:var(--yellow); z-index:-1; }
.k-lead { font-size:14px; line-height:2.05; color:var(--muted); }
.k-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; }
.k-text-link { font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:16px; min-height:44px; }
.k-status { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--muted); margin-top:24px!important; }
.k-status .k-dot { width:5px; height:5px; background:#748171; }
.k-hero-visual { position:relative; padding:16px 0 40px; align-self:center; min-width:0; }
.k-photo-mat { background:var(--ink); color:var(--paper); padding:20px; transform:rotate(2deg); box-shadow:0 15px 35px #20354015; }
.k-photo-topline { display:flex; justify-content:space-between; margin-bottom:18px; font:500 9px/1.5 var(--font-en); letter-spacing:.14em; }
.k-photo-mat img { width:100%; height:clamp(260px,26vw,390px); object-fit:cover; object-position:32% 50%; }
.k-photo-mat figcaption { display:flex; justify-content:space-between; align-items:center; margin-top:19px; font-size:13px; letter-spacing:.08em; }
.k-caption-arrow { font:400 28px/1 var(--font-en); }
.k-page-tag { position:absolute; right:-13px; bottom:5px; width:132px; height:132px; padding:20px; background:var(--yellow); transform:rotate(-8deg); box-shadow:0 6px 16px #1e354112; }
.k-page-tag>span { font:800 26px/1.05 var(--font-en); letter-spacing:-.05em; display:block; }
.k-page-tag small { font-size:9px; display:block; margin-top:11px; font-weight:500; }
.k-hero-bottom { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; padding:35px 0 25px; margin-top:35px; border-bottom:1px solid var(--line); font:600 9px/1.7 var(--font-en); letter-spacing:.13em; }
.k-hero-bottom i { font-style:normal; color:#9da6a1; margin:0 12px; }
.k-hero-bottom a { min-height:44px; display:flex; align-items:center; gap:22px; }
.k-hero-bottom a span { font-size:18px; }
.k-section { padding:104px 5.5%; max-width:1600px; margin:auto; }
.k-section h2 { font-size:clamp(30px,3vw,43px); line-height:1.6; }
.k-about { display:grid; grid-template-columns:1fr 3.4fr; gap:45px; padding-top:108px; padding-bottom:108px; }
.k-side-note { font-size:12px; font-weight:500; margin-top:12px!important; }
.k-about h2>span { color:#738175; }
.k-about-columns { margin-top:35px; display:grid; grid-template-columns:1fr 1.45fr; gap:40px; }
.k-about-principle { font-size:15px; font-weight:600; line-height:2; }
.k-body-copy { color:var(--muted); font-size:13px; line-height:2.1; }
.k-body-copy p+p { margin-top:18px; }
.k-services { background:#eaece3; }
.k-section-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:44px; }
.k-section-heading h2 { margin-top:13px; }
.k-section-description { font-size:13px; line-height:2; color:var(--muted); }
.k-service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.k-service { padding:24px; background:var(--paper); display:flex; flex-direction:column; min-width:0; }
.k-service-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.k-number { font:600 22px/1.4 var(--font-en); letter-spacing:-.05em; }
.k-service-category { font:500 8px/1.5 var(--font-en); letter-spacing:.1em; }
.k-mini { height:205px; margin:21px 0 26px; display:grid; place-items:center; overflow:hidden; padding:25px; }
.k-mini-shop { background:#e3e2d7; }
.k-mini-event { background:#e9e2cd; }
.k-mini-business { background:#d9e0df; }
.k-mini-browser { width:100%; max-width:245px; background:#fffdf7; box-shadow:0 6px 14px #20354012; transform:rotate(-4deg); }
.k-mini-toolbar { height:14px; border-bottom:1px solid #d4d6cc; display:flex; align-items:center; gap:3px; padding:0 7px; }
.k-mini-toolbar i { width:3px; height:3px; background:#9aa3a0; border-radius:50%; }
.k-mini-shop-hero { margin:10px; background:#718275; padding:12px; color:#fffdf7; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.k-mini-shop-hero>span { font:800 20px/1.1 var(--font-en); letter-spacing:-.05em; }
.k-mini-sun { width:42px; height:48px; border-radius:24px 24px 0 0; background:#e9cc7f; }
.k-mini-lines { height:12px; margin:9px 10px; width:60%; background:repeating-linear-gradient(to bottom,#bcc0b5 0px,#bcc0b5 1px,transparent 1px,transparent 5px); }
.k-mini-shop-footer { display:flex; justify-content:space-between; font:600 6px/1 var(--font-en); margin:15px 10px; }
.k-mini-event .k-mini-browser { transform:rotate(4deg); }
.k-mini-event-body { padding:14px; background:#eac552; position:relative; overflow:hidden; }
.k-mini-event-body small,.k-mini-business-body small { display:block; font:600 5px/1.3 var(--font-en); letter-spacing:.07em; }
.k-mini-event-body strong { display:block; font:800 34px/1 var(--font-en); letter-spacing:-.06em; margin:9px 0; }
.k-mini-event-pill { font:700 6px/1.5 var(--font-en); display:inline-block; border:1px solid var(--ink); border-radius:10px; padding:3px 9px; }
.k-event-star { position:absolute; right:10px; top:22px; font-size:64px; line-height:1; font-style:normal; }
.k-mini-business .k-mini-browser { transform:rotate(-3deg); }
.k-mini-business-body { background:var(--ink); color:var(--paper); padding:14px; position:relative; overflow:hidden; }
.k-mini-business-body strong { display:block; font:800 24px/1.1 var(--font-en); letter-spacing:-.06em; margin:17px 0 7px; position:relative; z-index:1; }
.k-mini-window { position:absolute; right:12px; top:33px; width:43px; height:64px; background:#718c8b; border-radius:40px 40px 0 0; }
.k-mini-business-footer { display:flex; gap:10px; padding:10px; font:600 5px/1.4 var(--font-en); }
.k-service h3 { font-size:20px; letter-spacing:-.035em; margin-bottom:14px; }
.k-service>p { font-size:13px; color:var(--muted); line-height:2; margin-bottom:25px; }
.k-service-link { margin-top:auto; padding:15px 0 0; border-top:1px solid var(--line); font-size:11px; font-weight:600; display:flex; justify-content:space-between; gap:10px; min-height:44px; }
.k-service-link span { font:500 22px/1 var(--font-en); }
.k-service-link:hover { color:#54725b; }
.k-scope-note { font-size:11px; color:var(--muted); margin-top:24px!important; line-height:1.9; }
.k-scope-note>span { display:inline-block; font-weight:600; color:var(--ink); margin-right:15px; }
.k-flow { padding-top:110px; padding-bottom:110px; }
.k-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.k-steps li { border-top:1px solid var(--ink); padding:23px 25px 10px 0; position:relative; }
.k-steps li+li { padding-left:25px; }
.k-steps li+li::before { content:""; position:absolute; top:25px; bottom:0; left:0; width:1px; background:var(--line); }
.k-step-index { display:flex; align-items:center; justify-content:space-between; font:500 43px/1.4 var(--font-en); letter-spacing:-.06em; }
.k-step-index>span { font:400 20px/1 var(--font-en); }
.k-step-en { font:600 9px/1.8 var(--font-en); letter-spacing:.12em; margin:18px 0 8px!important; color:#738175; }
.k-steps h3 { font-size:20px; letter-spacing:-.035em; margin-bottom:12px; }
.k-steps li>p:last-child { color:var(--muted); font-size:12px; line-height:2; }
.k-journal { display:grid; grid-template-columns:1fr 1fr; gap:80px; border-top:1px solid var(--line); padding-top:70px; padding-bottom:80px; }
.k-journal h2 { font-size:32px; margin-top:15px; }
.k-journal-note { position:relative; padding-right:85px; align-self:center; }
.k-status-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid #b6c1b3; border-radius:30px; padding:5px 12px; color:#52604f; font-size:10px; }
.k-status-pill .k-dot { background:#738175; width:5px; height:5px; }
.k-journal-note>p { font-size:13px; color:var(--muted); margin-top:20px; }
.k-journal-decoration { position:absolute; right:0; top:0; font:400 74px/1.4 var(--font-en); color:#a6b0a0; }
.k-contact { max-width:1600px; margin:auto; padding:80px 5.5%; background:var(--yellow); display:flex; align-items:center; justify-content:space-between; gap:45px; }
.k-contact h2 { font-size:clamp(31px,3.5vw,50px); line-height:1.55; margin:18px 0 22px; }
.k-contact p:not(.k-eyebrow) { font-size:13px; line-height:2; }
.k-button-dark { background:var(--ink); color:var(--paper)!important; margin-top:30px; min-width:245px; }
.k-button-dark:hover { background:#344e5c; }
.k-form-note { display:block; font-size:10px; margin-top:12px; }
.k-contact-arrow { font:400 clamp(100px,17vw,240px)/1 var(--font-en); padding-right:3%; }
.k-footer { max-width:1600px; margin:auto; padding:44px 5.5%; display:flex; align-items:center; gap:32px; }
.k-footer .k-brand { font-size:20px; }
.k-footer .k-monogram { width:39px; height:39px; font-size:28px; }
.k-footer .k-brand small { font-size:7px; }
.k-footer>p { font-size:11px; color:var(--muted); margin-left:28px; }
.k-footer>small { margin-left:auto; font-size:10px; color:var(--muted); }
.k-top-link { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:22px; }
.k-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.k-skip { position:fixed; top:10px; left:10px; z-index:100; padding:10px 20px; background:var(--ink); color:white!important; transform:translateY(-150%); }
.k-skip:focus { transform:translateY(0); }
@media(min-width:1600px) { .k-header,.k-hero,.k-section,.k-contact,.k-footer { padding-left:88px; padding-right:88px; } }
@media(max-width:1100px) { .k-nav { gap:18px; font-size:11px; } .k-header { gap:22px; } .k-hero { gap:25px; padding-top:56px; } .k-hero h1 { font-size:clamp(36px,4.5vw,50px); } .k-hero-actions { gap:16px; } .k-hero-actions .k-button { padding:15px 22px; gap:25px; } .k-photo-mat { padding:16px; } .k-page-tag { width:108px; height:108px; padding:16px; right:-6px; } .k-page-tag>span { font-size:22px; } .k-page-tag small { font-size:8px; margin-top:8px; } .k-service { padding:20px; } .k-service-grid { gap:16px; } .k-mini { padding:18px; height:180px; } .k-mini-shop-hero>span { font-size:16px; } .k-mini-business-body strong { font-size:20px; } .k-mini-event-body strong { font-size:28px; } .k-event-star { font-size:48px; } .k-about { grid-template-columns:1fr 3fr; gap:30px; } .k-about-columns { gap:24px; } .k-journal { gap:40px; } }
@media(max-width:820px) { .k-header { height:88px; padding-left:5%; padding-right:5%; } .k-nav { display:none; } .k-header>.k-button { margin-left:auto; } .k-hero { padding:48px 5% 0; column-gap:25px; grid-template-columns:1.1fr 1fr; } .k-hero h1 { font-size:36px; } .k-hero .k-eyebrow { font-size:8px; letter-spacing:.08em; } .k-lead { font-size:12px; } .k-desktop-break { display:none; } .k-hero-actions { gap:10px; } .k-hero-actions .k-button { min-height:52px; padding:13px 20px; font-size:12px; } .k-text-link { font-size:10px; gap:10px; } .k-photo-mat img { height:280px; } .k-photo-topline { font-size:7px; } .k-photo-mat figcaption { font-size:10px; } .k-section { padding:76px 5%; } .k-about { grid-template-columns:1fr; gap:30px; } .k-section-intro { display:flex; align-items:center; justify-content:space-between; } .k-side-note { margin-top:0!important; } .k-service-grid { gap:14px; } .k-service { padding:15px; } .k-service h3 { font-size:17px; } .k-service>p { font-size:12px; } .k-service-category { font-size:6px; } .k-mini { padding:13px; height:160px; } .k-mini-sun { width:28px; height:35px; } .k-mini-shop-hero { padding:8px; } .k-mini-shop-hero>span { font-size:13px; } .k-mini-event-body strong { font-size:24px; } .k-event-star { font-size:39px; } .k-mini-business-body strong { font-size:16px; } .k-mini-business-body { padding:10px; } .k-mini-window { width:25px; } .k-service-link { font-size:9px; } .k-section-description { font-size:11px; } .k-steps li { padding-right:16px; } .k-steps li+li { padding-left:16px; } .k-steps h3 { font-size:17px; } .k-steps li>p:last-child { font-size:11px; } .k-step-index { font-size:36px; } .k-journal { gap:30px; } .k-journal h2 { font-size:28px; } .k-journal-note { padding-right:40px; } .k-journal-decoration { font-size:40px; } .k-contact { padding:65px 5%; } .k-contact-arrow { font-size:125px; } .k-footer { padding:36px 5%; gap:20px; } .k-footer>p { display:none; } }
@media(max-width:600px) { :root { scroll-padding-top:20px; } .kumakuma { font-size:14px; } .k-header { height:83px; padding:0 22px; gap:12px; } .k-brand { gap:9px; font-size:20px; } .k-monogram { width:38px; height:38px; font-size:28px; } .k-brand small { font-size:6px; letter-spacing:.12em; margin-top:5px; } .k-button-small { padding:11px 13px; gap:14px; font-size:11px; } .k-hero { display:block; padding:44px 24px 0; } .k-hero .k-eyebrow { font-size:8px; } .k-hero h1 { font-size:clamp(33px,9.5vw,52px); line-height:1.5; margin:22px 0; } .k-lead { font-size:13px; line-height:2; } .k-hero-actions { margin-top:25px; gap:22px; } .k-hero-actions .k-button { padding:16px 22px; min-height:55px; font-size:13px; gap:30px; } .k-text-link { font-size:11px; } .k-status { font-size:9px; margin-top:18px!important; } .k-hero-visual { margin-top:35px!important; padding:8px 4px 35px 0; } .k-photo-mat { padding:15px; } .k-photo-mat img { height:260px; } .k-photo-topline { font-size:8px; margin-bottom:13px; } .k-photo-mat figcaption { font-size:11px; margin-top:15px; } .k-page-tag { bottom:0; right:-3px; width:108px; height:108px; } .k-hero-bottom { margin-top:14px; padding:24px 0 17px; font-size:7px; letter-spacing:.07em; gap:12px; } .k-hero-bottom i { margin:0 5px; } .k-hero-bottom a { gap:8px; font-size:6px; } .k-section { padding:65px 24px; } .k-section h2 { font-size:29px; line-height:1.65; } .k-eyebrow { font-size:9px; } .k-side-note { font-size:10px; } .k-about { display:block; } .k-about h2 { margin-top:26px; font-size:30px; } .k-about-columns { display:block; margin-top:25px; } .k-about-principle { font-size:14px; margin-bottom:22px!important; } .k-body-copy { font-size:13px; } .k-section-heading { display:block; margin-bottom:30px; } .k-section-description { margin-top:18px!important; font-size:12px; } .k-service-grid { grid-template-columns:1fr; gap:20px; } .k-service { padding:24px; } .k-service-category { font-size:9px; } .k-mini { height:205px; padding:22px; margin:20px 0 25px; } .k-mini-browser { max-width:240px; } .k-mini-shop-hero { padding:14px; } .k-mini-shop-hero>span { font-size:23px; } .k-mini-sun { width:45px; height:52px; } .k-mini-event-body strong { font-size:34px; } .k-event-star { font-size:63px; right:20px; } .k-mini-business-body { padding:15px; } .k-mini-business-body strong { font-size:27px; } .k-mini-window { width:48px; right:17px; } .k-service h3 { font-size:21px; } .k-service>p { font-size:13px; margin-bottom:23px; } .k-service-link { font-size:12px; padding-top:16px; } .k-scope-note { font-size:11px; line-height:2; } .k-scope-note>span { display:block; margin-bottom:5px; } .k-steps { grid-template-columns:1fr 1fr; row-gap:25px; } .k-steps li { padding:20px 16px 3px 0; } .k-steps li+li { padding-left:16px; } .k-steps li:nth-child(3) { padding-left:0; } .k-steps li:nth-child(3)::before { display:none; } .k-step-index { font-size:35px; } .k-steps h3 { font-size:17px; } .k-step-en { margin-top:12px!important; } .k-steps li>p:last-child { font-size:11px; } .k-steps li>p:last-child br { display:none; } .k-journal { grid-template-columns:1fr; gap:25px; } .k-journal h2 { font-size:28px; } .k-journal-note { padding-right:45px; } .k-journal-note>p { font-size:12px; } .k-contact { padding:58px 24px; position:relative; display:block; } .k-contact h2 { font-size:30px; line-height:1.6; } .k-contact p:not(.k-eyebrow) { font-size:13px; } .k-contact-arrow { display:none; } .k-button-dark { width:100%; margin-top:26px; min-height:60px; } .k-form-note { text-align:center; } .k-footer { padding:32px 24px; flex-wrap:wrap; column-gap:18px; row-gap:20px; } .k-footer .k-brand { font-size:18px; } .k-footer>small { font-size:9px; margin-left:auto; } .k-top-link { width:40px; height:40px; } }
@media(max-width:360px) { .k-header { padding:0 16px; } .k-header .k-brand small { display:none; } .k-hero,.k-section,.k-contact { padding-left:20px; padding-right:20px; } .k-hero-actions { gap:14px; } .k-text-link { font-size:10px; } .k-hero h1 { font-size:31px; } .k-section h2 { font-size:26px; } .k-section-intro { display:block; } .k-side-note { margin-top:8px!important; } .k-footer>small { margin-left:0; } .k-top-link { margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } .k-button { transition:none; } .k-button:hover { transform:none; } }

/* 検品後の調整：本文の読みやすさと文字の収まり */
.kumakuma .k-monogram { font-size:28px; padding-bottom:0; }
.kumakuma .k-footer .k-monogram { font-size:22px; padding-bottom:0; }
.kumakuma .k-lead,.kumakuma .k-body-copy,.kumakuma .k-service>p,.kumakuma .k-section-description,.kumakuma .k-scope-note,.kumakuma .k-steps li>p:last-child,.kumakuma .k-journal-note>p,.kumakuma .k-contact p:not(.k-eyebrow) { font-size:15px; }
.k-contact-aside { text-align:center; align-self:center; min-width:260px; }
.k-contact-aside>p { font-size:18px!important; font-weight:600; margin-top:18px; }
.k-contact-aside>small { font:600 9px/1.8 var(--font-en); letter-spacing:.13em; display:block; margin-top:10px; }
.k-contact-aside .k-contact-arrow { display:block; padding:0; }
.kumakuma .k-top-link { width:46px; height:46px; font-size:18px; line-height:1; }
@media(max-width:820px) { .k-contact-aside { min-width:160px; } .k-contact-aside>p { font-size:15px!important; } }
@media(max-width:600px) { .kumakuma .k-monogram { font-size:22px; } .k-contact-aside { display:none; } .kumakuma .k-steps h3 { font-size:16px; } }

/* v2：狭いスマホでもヘッダーの相談ボタンを一行で表示 */
.k-header .k-button-small { white-space:nowrap; flex-shrink:0; }
@media(max-width:360px) { .k-header { gap:10px; } .k-header .k-brand { font-size:18px; } .k-header .k-monogram { width:34px; height:34px; font-size:20px; } }
