/* ==========================================================================
   Karutto 新規LP（/start/, /professional/）共通デザインシステム
   既存サイト（index.html / products.html の緑系トーン）とは意図的に分離し、
   白ベース・淡いグレー・ウォルナット・チャコールの、落ち着いた家具ブランド調にする。
   ========================================================================== */
:root{
  --lp-paper:#ffffff;
  --lp-paper-warm:#faf8f5;
  --lp-gray-pale:#f1efec;
  --lp-gray-mid:#c9c4bb;
  --lp-ink:#262320;
  --lp-ink-soft:#6b6459;
  --lp-walnut:#8a5a3c;
  --lp-walnut-deep:#5e3c27;
  --lp-charcoal:#33302b;
  --lp-charcoal-deep:#1c1a17;
  --lp-line:#e7e3dc;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.lp{margin:0;background:var(--lp-paper);color:var(--lp-ink);font-family:"Zen Kaku Gothic New",sans-serif;-webkit-font-smoothing:antialiased;}
.lp h1,.lp h2,.lp h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;margin:0;letter-spacing:.01em;text-wrap:balance;}
.lp p{margin:0;}
.lp a{color:inherit;text-decoration:none;}
.lp img{max-width:100%;display:block;}
.lp .serif{font-family:"Zen Old Mincho",serif;}

.lp .wrap{max-width:1120px;margin-inline:auto;padding-inline:24px;box-sizing:border-box;}

.lp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border-radius:4px;font-weight:700;font-size:15px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;}
.lp .btn-primary{background:var(--lp-charcoal);color:#fff;}
.lp .btn-primary:hover{background:var(--lp-charcoal-deep);}
.lp .btn-outline{background:transparent;color:var(--lp-charcoal);border-color:var(--lp-charcoal);}
.lp .btn-outline:hover{background:var(--lp-gray-pale);}

.lp .eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--lp-walnut);text-transform:uppercase;margin-bottom:10px;}

/* ===== header / footer ===== */
.lp .lp-header{width:100%;background:var(--lp-paper);border-bottom:1px solid var(--lp-line);position:sticky;top:0;z-index:50;}
.lp .lp-header-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;flex-wrap:wrap;}
.lp .lp-header nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.lp .lp-header nav a.navlink{font-size:13.5px;font-weight:500;color:var(--lp-ink);}
@media (max-width:640px){ .lp .hide-phone{display:none !important;} }
.lp .nav-toggle{display:none;}
.lp .nav-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;height:20px;cursor:pointer;flex-shrink:0;}
.lp .nav-btn span{display:block;width:100%;height:2px;background:var(--lp-ink);border-radius:2px;}
.lp .mobile-nav{display:none;flex-direction:column;width:100%;background:var(--lp-paper);border-top:1px solid var(--lp-line);}
.lp .mobile-nav a{padding:14px 24px;font-size:14px;font-weight:500;color:var(--lp-ink);border-bottom:1px solid var(--lp-line);}
@media (max-width:640px){
  .lp .nav-btn{display:flex;}
  .lp .nav-toggle:checked ~ .mobile-nav{display:flex;}
}

.lp .lp-footer{width:100%;background:var(--lp-paper-warm);border-top:1px solid var(--lp-line);color:var(--lp-ink-soft);}
.lp .lp-footer-in{padding-block:36px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.lp .lp-footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;}
.lp .lp-license{padding-bottom:24px;font-size:11px;color:#9a9388;}

/* ===== hero ===== */
.lp .lp-hero{width:100%;background:linear-gradient(180deg,var(--lp-paper-warm) 0%,var(--lp-paper) 100%);}
.lp .lp-hero-in{padding-block:64px 52px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
@media (max-width:860px){ .lp .lp-hero-in{grid-template-columns:1fr;padding-block:36px 28px;} }
.lp .lp-hero h1{font-size:40px;line-height:1.5;color:var(--lp-charcoal);}
@media (max-width:640px){ .lp .lp-hero h1{font-size:28px;} }
.lp .lp-hero .sub{margin-top:18px;font-size:15.5px;line-height:1.95;color:var(--lp-ink-soft);max-width:460px;}
.lp .lp-hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
.lp .lp-hero-photo{border-radius:6px;overflow:hidden;background:var(--lp-gray-pale);aspect-ratio:4/3;}
.lp .lp-hero-photo img{width:100%;height:100%;object-fit:cover;}

/* ===== generic section rhythm ===== */
.lp section.lp-sec{width:100%;}
.lp section.lp-sec.alt{background:var(--lp-paper-warm);}
.lp .lp-sec-in{padding-block:64px;}
@media (max-width:640px){ .lp .lp-sec-in{padding-block:44px;} }
.lp .lp-sec-head{max-width:640px;margin-bottom:36px;}
.lp .lp-sec-head h2{font-size:27px;line-height:1.5;color:var(--lp-charcoal);}
@media (max-width:640px){ .lp .lp-sec-head h2{font-size:22px;} }
.lp .lp-sec-head .lead{margin-top:12px;font-size:14.5px;line-height:1.9;color:var(--lp-ink-soft);}

/* ===== pain grid (悩み) ===== */
.lp .pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lp-line);border:1px solid var(--lp-line);}
@media (max-width:760px){ .lp .pain-grid{grid-template-columns:1fr;} }
.lp .pain-item{background:var(--lp-paper);padding:26px 24px;display:flex;flex-direction:column;gap:10px;}
.lp .pain-item .q{font-size:14.5px;font-weight:700;color:var(--lp-charcoal);}
.lp .pain-item .a{font-size:13px;line-height:1.85;color:var(--lp-ink-soft);}

/* ===== service grid ===== */
.lp .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lp-line);border:1px solid var(--lp-line);}
@media (max-width:860px){ .lp .svc-grid{grid-template-columns:repeat(2,1fr);} }
.lp .svc-item{background:var(--lp-paper);padding:24px 20px;display:flex;flex-direction:column;gap:10px;}
.lp .svc-item .num{font-size:11px;font-weight:700;color:var(--lp-walnut);letter-spacing:.08em;}
.lp .svc-item h3{font-size:14.5px;line-height:1.5;}
.lp .svc-item p{font-size:12.5px;line-height:1.8;color:var(--lp-ink-soft);}

/* ===== headcount / set cards ===== */
.lp .headcount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:860px){ .lp .headcount-grid{grid-template-columns:repeat(2,1fr);} }
.lp .headcount-card{border:1px solid var(--lp-line);border-radius:6px;overflow:hidden;background:var(--lp-paper);}
.lp .headcount-card .photo{aspect-ratio:1;background:var(--lp-gray-pale);display:flex;align-items:center;justify-content:center;padding:18px;}
.lp .headcount-card .photo img{width:100%;height:100%;object-fit:contain;}
.lp .headcount-card .body{padding:14px 16px 18px;}
.lp .headcount-card .ttl{font-size:14px;font-weight:700;}
.lp .headcount-card ul{margin:10px 0 0;padding-left:18px;font-size:12px;line-height:1.9;color:var(--lp-ink-soft);}

/* ===== tier compare cards ===== */
.lp .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:760px){ .lp .tier-grid{grid-template-columns:1fr;} }
.lp .tier-card{border:1px solid var(--lp-line);border-radius:6px;background:var(--lp-paper);padding:22px;display:flex;flex-direction:column;gap:12px;}
.lp .tier-card.is-reco{border-color:var(--lp-walnut);box-shadow:0 0 0 1px var(--lp-walnut);}
.lp .tier-card .photo{aspect-ratio:4/3;background:var(--lp-gray-pale);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:14px;}
.lp .tier-card .photo img{width:100%;height:100%;object-fit:contain;}
.lp .tier-card .badge{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--lp-walnut);padding:3px 10px;border-radius:999px;}
.lp .tier-card .ttl{font-size:16px;font-weight:700;}
.lp .tier-card .desc{font-size:12.5px;line-height:1.8;color:var(--lp-ink-soft);}

/* ===== layout diagrams (模式図、捏造事例ではない旨を明記) ===== */
.lp .layout-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media (max-width:760px){ .lp .layout-grid{grid-template-columns:1fr;} }
.lp .layout-card{border:1px solid var(--lp-line);border-radius:6px;overflow:hidden;background:var(--lp-paper);}
.lp .layout-card svg{width:100%;height:auto;display:block;background:var(--lp-paper-warm);}
.lp .layout-card .cap{padding:14px 16px;}
.lp .layout-card .ttl{font-size:13.5px;font-weight:700;}
.lp .layout-card .note{margin-top:4px;font-size:11.5px;color:var(--lp-ink-soft);line-height:1.7;}

/* ===== fee table ===== */
.lp .fee-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.lp .fee-table th,.lp .fee-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--lp-line);}
.lp .fee-table th{width:40%;color:var(--lp-ink-soft);font-weight:500;}
.lp .fee-table td{font-weight:700;color:var(--lp-charcoal);}
.lp .fee-note{margin-top:14px;font-size:11.5px;line-height:1.8;color:var(--lp-ink-soft);}

/* ===== flow stepper ===== */
.lp .flow-list{display:flex;flex-direction:column;}
.lp .flow-item{display:flex;gap:18px;padding-block:20px;border-bottom:1px solid var(--lp-line);}
.lp .flow-item:last-child{border-bottom:none;}
.lp .flow-num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--lp-charcoal);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.lp .flow-body .ttl{font-size:14.5px;font-weight:700;}
.lp .flow-body .desc{margin-top:4px;font-size:12.5px;line-height:1.8;color:var(--lp-ink-soft);}

/* ===== cta band ===== */
.lp .cta-band{background:var(--lp-charcoal);color:#fff;border-radius:6px;padding:40px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.lp .cta-band h3{font-size:20px;color:#fff;}
.lp .cta-band p{margin-top:8px;font-size:13px;color:#cfc9bf;max-width:420px;}
.lp .cta-band .btn-primary{background:var(--lp-walnut);}
.lp .cta-band .btn-primary:hover{background:var(--lp-walnut-deep);}

/* ===== feature row（写真＋テキストの横並びカード。スマホでは縦並びにする） =====
   2026-10-26、「画像の大きさがバグってる。スマホで見た時の後半」の指摘対応。
   以前はこの横並びを style="" のインラインで組んでいたため、ブレークポイントが無く、
   スマホの狭い幅でも写真側が固定220pxのまま崩れずに残り、テキスト側だけが極端に
   圧縮されて写真が不釣り合いに大きく見えていた。専用クラス化してブレークポイントを持たせる。 */
.lp .feature-row{display:flex;flex-direction:row;align-items:center;gap:24px;}
.lp .feature-row .photo{flex:0 0 220px;}
@media (max-width:640px){
  .lp .feature-row{flex-direction:column;align-items:stretch;}
  .lp .feature-row .photo{flex:0 0 auto;width:100%;}
}

/* ===== faq ===== */
.lp .faq-list{display:flex;flex-direction:column;border-top:1px solid var(--lp-line);}
.lp .faq-item{border-bottom:1px solid var(--lp-line);}
.lp .faq-item summary{list-style:none;cursor:pointer;padding:18px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;font-weight:700;color:var(--lp-charcoal);}
.lp .faq-item summary::-webkit-details-marker{display:none;}
.lp .faq-item summary::after{content:"+";font-size:20px;font-weight:400;color:var(--lp-walnut);flex:0 0 auto;}
.lp .faq-item[open] summary::after{content:"−";}
.lp .faq-item .a{padding:0 4px 18px;font-size:13px;line-height:1.9;color:var(--lp-ink-soft);}