/* KURA TOKYO 共通スタイル v2（DESIGN-v2.md）
   白地・1px線・角なし・影なし。色は黒と白と緑1色。書体は KURA Sans（欧文の表示用・Regularのみ。@font-faceは kura-head）+ Zen Kaku Gothic New。 */
:root{
  --ink:#111111; --ink-2:#555555; --ink-3:#8A8A8A;
  --line:#E3E3E3; --line-strong:#111111;
  --paper:#FFFFFF; --paper-2:#F6F6F4; --paper-dark:#111111;
  --green:#168553; --green-ink:#12643F; --green-tint:#E8F3EE;
  --danger:#B42318;
  --font-ja:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --font-en:"KURA Sans","Helvetica Neue",Arial,sans-serif;
  --fs-hero:clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  --fs-h2:clamp(1.375rem, 1.1rem + 1.3vw, 2rem);
  --fs-h3:clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.8125rem; --fs-label:.75rem;
  --fs-num:clamp(2rem, 1.5rem + 2vw, 3rem);
  --lh-body:1.8; --lh-head:1.35; --ls-body:.02em; --ls-head:.04em; --ls-label:.18em;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;
  --sp-section:clamp(4rem, 2.5rem + 6vw, 8rem);
  --sp-section-tight:clamp(2.5rem, 1.5rem + 4vw, 5rem);
  --wrap:1120px; --wrap-narrow:760px;
  --gutter:clamp(20px, 4vw, 32px);
  --bw:1px; --r:0px; --r-input:2px;
  --header-h:56px;
  --roof:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M1 7 L8 1 L15 7' fill='none' stroke='%23111111' stroke-width='1.25' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
@media (min-width:1024px){:root{--header-h:64px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ja);font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);letter-spacing:var(--ls-body);overflow-wrap:break-word;line-break:strict}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
code,a[href^="http"]{overflow-wrap:anywhere}
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.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}
.skip{position:absolute;left:8px;top:-60px;background:var(--paper);padding:.5em 1em;border:var(--bw) solid var(--ink);z-index:100}
.skip:focus{top:8px}
.en{font-family:var(--font-en)}
.en-note,.ring,.bubble,.ic{display:none!important}
[hidden]{display:none!important}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.is-narrow{max-width:calc(var(--wrap-narrow) + var(--gutter)*2)}
.kura-site main{display:block}

/* ---------- 見出し・小見出し ---------- */
.label{display:block;font-family:var(--font-en);font-weight:400;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.label::after{content:"";display:block;width:24px;height:1px;background:var(--green);margin-top:.75rem}
.sec{padding-block:var(--sp-section);border-top:var(--bw) solid var(--line);background:var(--paper)}
.sec-head{margin-bottom:var(--sp-8)}
.sec-head .label{margin-bottom:var(--sp-3)}
.sec-title,.page-title,.hero-title{font-weight:500;line-height:var(--lh-head);letter-spacing:var(--ls-head)}
.sec-title{font-size:var(--fs-h2)}
.sec-title .status{margin-left:.5rem;vertical-align:middle}
.sec-lead,.sec-sub{margin-top:var(--sp-3);color:var(--ink-2);max-width:40em}
.sec-note{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-6)}
.sec-cta{margin-top:var(--sp-8);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
h3{font-weight:500;font-size:var(--fs-h3);line-height:var(--lh-head)}

/* ---------- ボタン・リンク・札 ---------- */
.btn,.btn-primary,.btn-solid,.btn-yellow,.btn-green,.btn-ghost,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:.5rem 1.5rem;border:var(--bw) solid var(--ink);border-radius:var(--r-input);background:transparent;color:var(--ink);font-family:var(--font-ja);font-weight:500;font-size:var(--fs-body);line-height:1.4;text-align:center;width:100%;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--paper-2)}
.btn-primary,.btn-solid,.btn-yellow,.btn-green{background:var(--green);border-color:var(--green);color:#fff}
.btn-primary:hover,.btn-solid:hover,.btn-yellow:hover,.btn-green:hover{background:#12643F;border-color:#12643F}
.btn small{display:none}
.btn-sm{min-height:44px;padding-inline:1rem;font-size:var(--fs-sm)}
.btn[aria-disabled="true"]{color:var(--ink-3);border-color:var(--line);pointer-events:none}
.btn-row{display:flex;flex-direction:column;gap:12px;margin-top:var(--sp-6)}
@media (min-width:480px){
  .btn,.btn-primary,.btn-solid,.btn-yellow,.btn-green,.btn-ghost,.btn-line{width:auto}
  .btn-row{flex-direction:row;flex-wrap:wrap}
}
.more{color:var(--green-ink);font-weight:500;font-size:var(--fs-sm)}
.more::after{content:" →";font-family:var(--font-en)}
.more:hover{text-decoration:underline;text-underline-offset:3px}
.status{display:inline-block;border:var(--bw) solid var(--ink);padding:0 8px;font-size:var(--fs-xs);font-weight:400;letter-spacing:.06em;line-height:1.7;background:transparent;color:var(--ink)}
.card{border:var(--bw) solid var(--line);padding:var(--sp-6);background:var(--paper)}
svg.icon{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;flex:none}
svg.icon.is-lg{width:32px;height:32px}

/* ---------- 箇条書き（屋根の印） ---------- */
.roof-list li,.plan-what li,.svc-facts li{position:relative;padding-left:1.5rem;font-size:var(--fs-sm)}
.roof-list li::before,.plan-what li::before,.svc-facts li::before{content:"";position:absolute;left:0;top:.7em;width:16px;height:8px;background:var(--roof) no-repeat center/contain}
.roof-list{display:grid;gap:var(--sp-2)}

/* ---------- ヘッダー ---------- */
.header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--bw) solid var(--line)}
.header .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:flex;align-items:center;height:100%}
.brand img{height:32px;width:auto;max-width:none}
.nav-toggle{position:relative;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;padding:0}
.nav-toggle span{position:absolute;left:12px;width:20px;height:1px;background:var(--ink);transition:transform .15s,top .15s}
.nav-toggle span:nth-child(1){top:18px}
.nav-toggle span:nth-child(2){top:25px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}
.nav{display:none}
.nav.is-open{display:block;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;overflow:auto;background:var(--paper);padding:0 var(--gutter) var(--sp-12);-webkit-overflow-scrolling:touch}
body.menu-open{overflow:hidden}
.nav-list > li{border-bottom:var(--bw) solid var(--line)}
.nav-list a,.nav-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0;border:0;background:transparent;font-size:var(--fs-body);font-weight:500;text-align:left}
.nav-btn::after{content:"+";font-family:var(--font-en);font-weight:300;font-size:1.25rem}
.nav-btn[aria-expanded="true"]::after{content:"−"}
.nav-list a[aria-current="page"],.nav-btn[data-current="true"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.nav-cta{display:grid;gap:12px;margin-top:var(--sp-6)}
.nav-cta .btn,.nav-cta .btn-primary{width:100%}
.nav-cta .btn-primary{order:-1}
.mega{padding-bottom:var(--sp-4)}
.mega-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
.mega-head{font-family:var(--font-en);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--sp-2)}
.mega-head .status{margin-left:6px;text-transform:none;letter-spacing:.06em}
.mega-item,.mega-sub a,.mega-more a{display:block;padding:.5rem 0;font-size:var(--fs-sm);font-weight:500}
.mega-item small{display:block;font-weight:400;color:var(--ink-2);font-size:var(--fs-xs)}
.mega-sub{margin-left:var(--sp-4);border-left:var(--bw) solid var(--line);padding-left:var(--sp-3)}
.mega-sub a{font-weight:400}
.mega-more{display:flex;flex-wrap:wrap;gap:0 var(--sp-6);border-top:var(--bw) solid var(--line);margin-top:var(--sp-2)}
.mega a:hover{text-decoration:underline;text-underline-offset:4px}
@media (min-width:1024px){
  .brand img{height:36px}
  .nav-toggle{display:none}
  .nav,.nav.is-open{display:flex;position:static;align-items:center;gap:24px;overflow:visible;background:transparent;padding:0}
  .nav-list{display:flex;align-items:center;gap:24px}
  .nav-list > li{border:0}
  .nav-list a,.nav-btn{width:auto;min-height:var(--header-h);font-size:var(--fs-sm);justify-content:flex-start;gap:4px}
  .nav-btn::after,.nav-btn[aria-expanded="true"]::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:6px}
  .nav-btn[aria-expanded="true"]::after{transform:rotate(225deg)}
  .nav-list a:hover,.nav-btn:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
  .has-mega{position:static}
  .mega{position:absolute;top:100%;left:var(--gutter);right:var(--gutter);background:var(--paper);border-top:var(--bw) solid var(--line);border-bottom:var(--bw) solid var(--line);padding:var(--sp-8) var(--sp-6)}
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12)}
  .nav-cta{display:flex;margin:0;gap:12px;align-items:center}
  .nav-cta .btn,.nav-cta .btn-primary{width:auto;min-height:40px;padding-inline:1rem;font-size:var(--fs-sm)}
  .nav-cta .btn-primary{order:0}
  .nav-cta .btn{order:-1}
}
@media (min-width:1024px) and (max-width:1279px){.nav,.nav-list{gap:16px}}

/* ---------- パンくず ---------- */
.crumbs{font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:var(--sp-6)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 .5rem}
.crumbs li + li::before{content:"/";margin-right:.5rem;color:var(--ink-3)}
.crumbs a:hover{text-decoration:underline}

/* ---------- ページの頭（下層） ---------- */
.page-hero,.svc-hero{padding-block:var(--sp-12) var(--sp-section-tight);background:var(--paper)}
.page-title,.page-hero h1,.svc-hero h1{font-size:var(--fs-hero);font-weight:500;line-height:var(--lh-head);letter-spacing:var(--ls-head)}
.page-hero .label{margin-bottom:var(--sp-3)}
.page-sub,.page-lead,.page-hero .lead,.svc-hero .lead{margin-top:var(--sp-4);max-width:34em;color:var(--ink)}
.page-title .status{vertical-align:middle;margin-left:.5rem;font-size:var(--fs-xs)}
.svc-kicker,.svc-kicker-row{font-family:var(--font-en);font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-2);margin-bottom:var(--sp-3);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.svc-facts{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.svc-art,.svc-badge,.app-art{display:none}

/* ---------- 番号つきの流れ ---------- */
.flow{display:grid;grid-template-columns:minmax(0,1fr);counter-reset:flow}
.flow > li{counter-increment:flow;position:relative;padding:var(--sp-4) 0 var(--sp-4) 3rem;border-top:var(--bw) solid var(--line);min-width:0}
.flow > li::before{content:counter(flow,decimal-leading-zero);position:absolute;left:0;top:var(--sp-4);font-family:var(--font-en);font-weight:500;font-size:var(--fs-sm);letter-spacing:.04em;font-feature-settings:"tnum";line-height:var(--lh-body)}
.flow h3{font-size:var(--fs-body);margin-bottom:var(--sp-1)}
.flow p{font-size:var(--fs-sm);color:var(--ink-2)}
.flow-circle{display:none}
@media (min-width:768px){
  .flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--sp-6)}
  .flow > li{padding:var(--sp-4) 0 var(--sp-6)}
  .flow > li::before{position:static;display:block;margin-bottom:var(--sp-2)}
}
@media (min-width:1024px){
  .flow.is-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .flow.is-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .flow.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- 料金 ---------- */
.price-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
.price{border-top:var(--bw) solid var(--ink);padding-top:var(--sp-4);min-width:0}
.price h3{font-size:var(--fs-body)}
.price-num{font-family:var(--font-en);font-weight:400;font-size:var(--fs-num);line-height:1.2;letter-spacing:.04em;font-feature-settings:"tnum";margin:var(--sp-3) 0}
.price-num small{font-family:var(--font-ja);font-size:var(--fs-body);margin-left:.25rem;letter-spacing:var(--ls-body)}
.price-num.is-text{font-family:var(--font-ja);font-weight:500;font-size:var(--fs-h2)}
.price p{font-size:var(--fs-sm)}
.price .price-num{font-size:var(--fs-num)}
.price .price-num.is-text{font-size:var(--fs-h2)}
.price .note{margin-top:var(--sp-3);color:var(--ink-2);font-size:var(--fs-xs)}
@media (min-width:768px){.price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- 3列などの罫線カード ---------- */
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
.svc-grid > li{border-top:var(--bw) solid var(--ink);padding-top:var(--sp-4);min-width:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.svc-grid h3{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.svc-grid p{font-size:var(--fs-sm)}
.svc-grid .more{margin-top:auto}
@media (min-width:768px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}}
@media (min-width:1024px){.svc-grid{gap:var(--sp-8)}}

/* ---------- FAQ ---------- */
.faq{border-bottom:var(--bw) solid var(--line)}
.faq details{border-top:var(--bw) solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:.75rem;align-items:baseline;padding:var(--sp-4) 2rem var(--sp-4) 0;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:var(--sp-4);font-family:var(--font-en);font-weight:300;font-size:1.25rem;line-height:1.4}
.faq details[open] summary::after{content:"−"}
.faq .q,.faq .a{font-family:var(--font-en);font-weight:500;flex:none}
.faq .answer{display:flex;gap:.75rem;align-items:baseline;padding:0 0 var(--sp-4);color:var(--ink-2);font-size:var(--fs-sm)}

/* ---------- お知らせ ---------- */
.news li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 12px;padding:var(--sp-4) 0;border-top:var(--bw) solid var(--line);align-items:baseline}
.news li:last-child{border-bottom:var(--bw) solid var(--line)}
.news time{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.04em;font-feature-settings:"tnum";color:var(--ink-2)}
.news .kind{display:inline-block;border:var(--bw) solid var(--ink);padding:0 8px;font-size:var(--fs-xs);letter-spacing:.06em;justify-self:start}
.news p{font-size:var(--fs-sm)}
@media (min-width:768px){.news li{grid-template-columns:7rem 8rem minmax(0,1fr)}}
.filter{margin-bottom:var(--sp-6)}
.filter-name{font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:6px}
.filter-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-3)}
.chip{border:var(--bw) solid var(--line);border-radius:0;background:transparent;padding:.25rem .75rem;min-height:36px;font-size:var(--fs-sm)}
.chip[aria-pressed="true"]{border-color:var(--green);background:var(--green-tint)}
.empty{display:none;color:var(--ink-2);font-size:var(--fs-sm);padding:var(--sp-4) 0}
.empty.is-on{display:block}

/* ---------- 文章・行・メンバー・会社概要 ---------- */
.prose{display:grid;gap:var(--sp-4);max-width:40em}
.about-cover{width:min(240px,60vw);margin:0 auto var(--sp-8)}
.rows > li{padding:var(--sp-4) 0;border-top:var(--bw) solid var(--line)}
.rows > li:last-child{border-bottom:var(--bw) solid var(--line)}
.rows h3{font-size:var(--fs-body)}
.rows p{color:var(--ink-2);font-size:var(--fs-sm);margin-top:2px}
.members{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-12)}
.member{min-width:0;display:grid;gap:var(--sp-3);align-content:start}
.member-photo{width:160px;border:var(--bw) solid var(--line)}
.member-photo img{width:100%;aspect-ratio:1;object-fit:cover}
.member .role{font-size:var(--fs-xs);color:var(--ink-2)}
.member .bio{font-size:var(--fs-sm)}
@media (min-width:768px){.members{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}}
.company{width:100%;border-collapse:collapse}
.company th,.company td{display:block;text-align:left;padding:var(--sp-2) 0;font-weight:400}
.company th{width:auto;white-space:normal;color:var(--ink-2);font-size:var(--fs-sm);padding-top:var(--sp-4);border-top:var(--bw) solid var(--line)}
.company td{padding-bottom:var(--sp-4)}
.company ul{display:grid;gap:4px}
.company li{position:relative;padding-left:1.25rem}
.company li::before{content:"";position:absolute;left:0;top:.9em;width:10px;height:1px;background:var(--ink)}
@media (min-width:768px){
  .company{display:table}
  .company tbody{display:table-row-group}
  .company tr{display:table-row}
  .company th,.company td{display:table-cell;padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;border-top:var(--bw) solid var(--line);vertical-align:top}
  .company th{width:9em;font-size:var(--fs-body);color:var(--ink)}
  .company tr:last-child th,.company tr:last-child td{border-bottom:var(--bw) solid var(--line)}
}
.partner-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
.partner-grid > li{border-top:var(--bw) solid var(--ink);padding-top:var(--sp-4);display:grid;gap:var(--sp-3);align-content:start;min-width:0}
.partner-grid p{font-size:var(--fs-sm)}
@media (min-width:768px){.partner-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12)}}
.logo-line{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:36px}
.logo-line img{height:28px;width:auto;max-width:none}
.logo-line .lg-inc{height:56px}
@media (min-width:768px){.logo-line img{height:36px}.logo-line .lg-inc{height:72px}}

/* ---------- フォーム ---------- */
.contact-page{padding-block:var(--sp-12) var(--sp-section-tight)}
.contact-page-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-12)}
.contact-page-grid > *{min-width:0}
.contact-aside h1{font-size:var(--fs-hero);font-weight:500;line-height:var(--lh-head);letter-spacing:var(--ls-head);margin-bottom:var(--sp-4)}
.contact-aside p{margin-top:var(--sp-3)}
.steps{margin-top:var(--sp-6);display:grid;gap:var(--sp-2);counter-reset:step}
.steps li{counter-increment:step;display:flex;gap:.75rem;font-size:var(--fs-sm);padding-top:var(--sp-2);border-top:var(--bw) solid var(--line)}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-en);font-weight:500}
.form{display:grid;gap:var(--sp-4);border:var(--bw) solid var(--line);padding:var(--sp-6);min-width:0}
.form h2{font-size:var(--fs-h3);font-weight:500}
.field{display:grid;gap:6px;min-width:0}
.field label,.field legend{font-size:var(--fs-sm);font-weight:500}
.field label small,.field legend small{font-weight:400;color:var(--ink-2);margin-left:.5rem;font-size:var(--fs-xs)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.5rem .75rem;border:var(--bw) solid var(--ink-3);border-radius:var(--r-input);background:var(--paper);font-size:16px}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--green);background-color:var(--green-tint)}
.field fieldset{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.choice{display:flex;gap:.5rem;align-items:center;font-weight:400}
.field .choice input{width:20px;min-height:0;height:20px;accent-color:var(--green)}
.form-note{font-size:var(--fs-xs);color:var(--ink-2)}
.form-note[role="alert"]{color:var(--danger)}
@media (min-width:1024px){.contact-page-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-16)}}

/* ---------- CTA ---------- */
.cta{padding-block:var(--sp-section);border-top:var(--bw) solid var(--line);background:var(--paper)}
.cta .wrap{display:grid;gap:var(--sp-2)}
.cta h2{font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-head);letter-spacing:var(--ls-head)}
.cta p{color:var(--ink-2)}

/* ---------- フッター ---------- */
.footer{background:var(--paper-dark);color:#fff;padding-block:var(--sp-12) var(--sp-8)}
.footer a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
.footer-top > *{min-width:0}
.footer-logo img{width:160px;height:auto;margin-left:-12px}
.footer-addr{font-style:normal;font-size:var(--fs-xs);color:#cfcfcf;margin-top:var(--sp-4);line-height:1.8}
.footer h3{font-family:var(--font-en);font-weight:400;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#cfcfcf;margin-bottom:var(--sp-3)}
.footer li a{display:block;padding:.25rem 0;font-size:var(--fs-sm)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);justify-content:space-between;align-items:baseline;margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid #444;font-size:var(--fs-xs);color:#cfcfcf}
.footer-policy{display:flex;flex-wrap:wrap;gap:4px var(--sp-6)}
.footer-bottom small{font-family:var(--font-en);letter-spacing:.06em;font-size:var(--fs-xs)}
@media (min-width:768px){.footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.footer-top > :first-child{grid-column:1/-1}}
@media (min-width:1024px){.footer-top{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr))}.footer-top > :first-child{grid-column:auto}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

mark{background:none;color:inherit;font-weight:500}
u{text-decoration:none}
strong,b{font-weight:500}
.more:empty{display:inline-flex;align-items:center;min-width:44px;min-height:32px}
.more:empty::after{content:"→"}

/* =====================================================================
   v3：図解・薄い面・文字の段・余白（本人指示 2026-11-10「文字が多い、図解で」「デザインもしっかり」）
   文字の段は 12/14/16/20/28/40/56 のみ。図は 4:3・線1.5px・8px格子。緑は図ごとに1か所。
   ===================================================================== */
:root{
  --fig-bg:#F4F6F4; --card-line:#D9DDD9;
  --fs-hero:1.75rem; --fs-h2:1.75rem; --fs-h3:1.25rem; --fs-xs:.875rem; --fs-sm:.875rem; --fs-label:.75rem; --ls-label:.12em;
  --fs-num:2.5rem;
  --sp-section:4rem; --card-pad:1.5rem;
}
@media (min-width:768px){:root{--sp-section:5.5rem;--fs-num:3.5rem}}
@media (min-width:1024px){:root{--sp-section:7rem;--fs-hero:2.5rem;--card-pad:2rem}}
.sec-title{font-size:var(--fs-h2)}
.label{letter-spacing:var(--ls-label)}

/* 図 */
.draw{width:100%;height:100%;display:block;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}
.d-w{fill:#fff}
.d-g{stroke:var(--green)}
.d-k{stroke:var(--ink)}
.d-gf{fill:var(--green);stroke:none}
.d-dash{stroke-dasharray:4 4}
.d-dim{opacity:.4}
.d-move{transition:transform 200ms ease}

/* カード */
.tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
@media (min-width:768px){.tiles.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tiles{gap:var(--sp-6)}}
.tiles > li{display:flex;min-width:0}
.tiles > li > .tile,.tiles > li > a.tile{flex:1}
.tile{display:flex;flex-direction:column;min-width:0;border:var(--bw) solid var(--card-line);background:var(--paper);transition:border-color 200ms ease}
.tile:hover,.tile:focus-within{border-color:var(--ink)}
.tile:hover .d-move,.tile:focus-within .d-move{transform:translateY(-4px)}
.tile-fig{background:var(--fig-bg);height:clamp(160px,50vw,200px);border-bottom:var(--bw) solid var(--card-line);overflow:hidden}
.tile-fig.is-sm{height:clamp(160px,50vw,184px)}
.tile-fig.is-logo{display:grid;place-items:center;height:160px}
.tile-fig.is-logo img{height:40px;width:auto;max-width:none}
.tile-fig.is-logo img.lg-inc{height:80px}
.tile-body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--card-pad);flex:1}
.tile-body.is-row{flex-direction:row;justify-content:space-between;align-items:center;gap:var(--sp-4)}
.tile-body h3,.tile-h{font-size:var(--fs-h3);font-weight:500;line-height:var(--lh-head)}
.tile-body p{font-size:var(--fs-sm)}
.tile-line{font-size:var(--fs-body)!important}
.tile .roof-list{margin-top:0}
.tile .more-btn,.tile-body .roof-list + .more-btn{margin-top:auto}
.tile-body > div + .roof-list{margin-top:0}
.tile-link{color:inherit}
.tile-go{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border:var(--bw) solid var(--ink);font-family:var(--font-en);transition:background 200ms ease,border-color 200ms ease}
.tile:hover .tile-go,.tile:focus-visible .tile-go{background:var(--green-tint);border-color:var(--green)}
.more-btn{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;min-height:44px;padding:0 1.25rem;border:var(--bw) solid var(--ink);border-radius:var(--r-input);background:var(--paper);color:var(--ink);font-size:var(--fs-sm);font-weight:500;transition:background 200ms ease,border-color 200ms ease}
.more-btn::after{content:"→";font-family:var(--font-en)}
.more-btn:hover{background:var(--green-tint);border-color:var(--green)}
.home-links .more-btn{align-self:auto}
.tile-body .status{font-size:var(--fs-xs)}

/* 流れ図：番号つき。矢印の先は屋根の線（傾き約17.7度） */
.flow-chain{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;counter-reset:st}
.flow-chain > li{counter-increment:st;position:relative;display:flex;align-items:center;gap:var(--sp-4);background:var(--fig-bg);border:var(--bw) solid var(--card-line);padding:var(--sp-4)}
.flow-chain > li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-24px;width:28px;height:20px;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20'%3E%3Cpath d='M14 0V16M4 12.8L14 16L24 12.8' fill='none' stroke='%23168553' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center}
.st-ic{flex:none;display:grid;place-items:center;width:64px;height:64px;background:#fff;border:var(--bw) solid var(--card-line)}
.st-ic svg.icon{width:32px;height:32px}
.st-body{min-width:0}
.st-name{font-size:var(--fs-body);font-weight:500}
.st-name::before{content:counter(st,decimal-leading-zero);display:block;font-family:var(--font-en);font-weight:500;font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--green-ink)}
.st-tx{font-size:var(--fs-sm);color:var(--ink-2)}
@media (min-width:768px){
  .flow-chain.is-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:768px){.flow-chain.is-5 > li{flex-direction:column;justify-content:flex-start;text-align:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-3);min-height:200px}
  .flow-chain.is-5 > li:not(:last-child)::after{left:auto;bottom:auto;right:-26px;top:50%;width:20px;height:28px;transform:translateY(-50%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M0 14H16M12.8 4L16 14L12.8 24' fill='none' stroke='%23168553' stroke-width='1.5'/%3E%3C/svg%3E")}}
@media (min-width:1024px){
  .flow-chain.is-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .flow-chain.is-6 > li{flex-direction:column;justify-content:flex-start;text-align:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-3);min-height:200px}
  .flow-chain.is-6 > li:not(:last-child)::after{left:auto;bottom:auto;right:-26px;top:50%;width:20px;height:28px;transform:translateY(-50%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M0 14H16M12.8 4L16 14L12.8 24' fill='none' stroke='%23168553' stroke-width='1.5'/%3E%3C/svg%3E")}
}

@media (prefers-reduced-motion:reduce){
  .d-move,.tile,.tile-go,.more-btn{transition:none!important}
  .tile:hover .d-move,.tile:focus-within .d-move{transform:none}
}

.hero-title{word-break:keep-all}
.sec-title,.hero-lead,.page-lead,.sec-lead,.tile-body p{word-break:auto-phrase;text-wrap:balance}
.hero-title{text-wrap:balance}
.home-links{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4)}
.tile-body .app-target{margin-top:4px}
@media (min-width:768px) and (max-width:1023px){
  .tiles.is-3.is-wide{grid-template-columns:minmax(0,1fr)}
  .flow-chain.is-5 > li{padding-inline:var(--sp-2)}
}
.st-name{white-space:normal}

/* KURA Sans：Regularのみ。にせの太字を出さない。英字の表示用だけに当てる（本文・文中の英字には当てない） */
body{font-synthesis:none}
.label,.mega-head,.svc-kicker,.svc-kicker-row,.flow > li::before,.price-num,.news time,.steps li::before,.footer h3,.footer-bottom small,.faq .q,.faq .a,.st-name::before,.tile-go,.more::after,.more-btn::after,.nav-btn::after,.faq summary::after{font-weight:400;font-synthesis:none}
.news time,.steps li::before,.flow > li::before,.st-name::before{letter-spacing:.08em}
.price-num{letter-spacing:.02em}
.price-num small{font-family:var(--font-ja)}

/* ---------- SEO記事ページ（移行・比較）と構築ページのFAQ ---------- */
.seo-prose > p,.seo-prose > ul,.seo-prose > ol{max-width:44em;margin-top:var(--sp-4)}
.seo-prose .sec-head + p,.seo-prose .sec-head + .seo-table-wrap{margin-top:0}
.seo-prose .faq{margin-top:0}
.seo-prose a,.seo-related + p a{color:var(--green-ink);text-decoration:underline;text-underline-offset:3px}
.seo-prose strong{font-weight:500}
.seo-steps{counter-reset:seo}
.seo-steps > li{counter-increment:seo;position:relative;padding:var(--sp-3) 0 var(--sp-3) 3rem;border-top:1.5px solid var(--line)}
.seo-steps > li:last-child{border-bottom:1.5px solid var(--line)}
.seo-steps > li::before{content:counter(seo,decimal-leading-zero);position:absolute;left:0;top:var(--sp-3);font-family:var(--font-en);font-weight:500;font-size:var(--fs-sm);letter-spacing:.04em;color:var(--green-ink)}
.seo-table-wrap{margin-top:var(--sp-4);overflow-x:auto;-webkit-overflow-scrolling:touch;border:1.5px solid var(--ink);max-width:100%}
.seo-table-wrap:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.seo-table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.7;text-align:left}
.seo-table th,.seo-table td{padding:var(--sp-3) var(--sp-4);border-top:1.5px solid var(--line);border-left:1.5px solid var(--line);vertical-align:top;font-weight:400}
.seo-table thead th{background:#F4F6F4;font-weight:500;border-top:0;white-space:nowrap}
.seo-table tbody th{font-weight:500;background:#F4F6F4;min-width:7em}
.seo-table th:first-child,.seo-table td:first-child{border-left:0}
.seo-prose > .seo-updated{margin-top:var(--sp-8);font-size:var(--fs-sm);color:var(--ink-2)}
.seo-related{margin-top:var(--sp-8)}

/* ---------- ガイド記事（ブログ） ---------- */
.guide-byline{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--ink-2)}
.guide-body > h2.sec-title{margin-top:var(--sp-12)}
.guide-body > h2.sec-title:first-child{margin-top:0}
.guide-body > .seo-answer{font-size:var(--fs-lg,1.125rem);line-height:1.9;max-width:44em;margin-top:0;padding-bottom:var(--sp-4);border-bottom:1.5px solid var(--line)}
.guide-body > h2 + p,.guide-body > h2 + ul,.guide-body > h2 + .seo-table-wrap{margin-top:var(--sp-4)}
.guide-body > ul{list-style:disc;padding-left:1.4em}
.guide-body > ul li + li{margin-top:var(--sp-2)}
.guide-body > .seo-table-wrap{margin-top:var(--sp-4)}
.guide-body > .faq{margin-top:var(--sp-4)}
.guide-list{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
.guide-card{border:1.5px solid var(--ink)}
.guide-card-link{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-6)}
.guide-card-link:hover .guide-card-title{text-decoration:underline;text-underline-offset:3px}
.guide-card-title{font-weight:500;font-size:var(--fs-h3,1.25rem);line-height:1.5}
.guide-card-sum{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.8}
.guide-card-date{font-size:var(--fs-xs);color:var(--ink-3)}
.guide-list:not(:has(li)){display:none}
@media (min-width:720px){.guide-list{grid-template-columns:repeat(2,1fr)}}

/* ---------- 横幅の使い方：PCで中身が左に寄りすぎないようにする ---------- */
.cta-copy{display:grid;gap:var(--sp-2)}
.notify-box{display:grid;gap:var(--sp-3)}
.notify-box h3{font-size:var(--fs-h3,1.25rem);font-weight:500;line-height:var(--lh-head)}
.notify-box > p{color:var(--ink-2);max-width:40em}
@media (min-width:1024px){
  /* 見出しとボタンだけの帯：左に言葉、右にボタン */
  .cta .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-12)}
  .cta .btn-row,.notify-box .btn-row,.sec > .wrap:has(> .sec-head:first-child + .btn-row:last-child) > .btn-row{margin-top:0;flex-wrap:nowrap;flex-shrink:0}
  .sec > .wrap:has(> .sec-head:first-child + .btn-row:last-child){display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-12)}
  .sec > .wrap:has(> .sec-head:first-child + .btn-row:last-child) > .sec-head{margin-bottom:0}
  .notify-box{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-12);align-items:end}
  .notify-box > *{grid-column:1}
  .notify-box > .btn-row{grid-column:2;grid-row:1 / span 2;align-self:end}
  /* 下層ページの頭：左に題、右に説明 */
  .page-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--sp-12);align-items:end}
  .page-hero .wrap > *{grid-column:1 / -1}
  .page-hero .wrap > h1{grid-column:1}
  .page-hero .wrap > :is(.page-lead,.page-sub,.lead){grid-column:2;margin-top:0}
  .page-hero .wrap > h1 ~ .btn-row{grid-column:2;margin-top:var(--sp-4)}
  /* 見出し＋短い本文の区画：左に見出し、右に本文 */
  .seo-prose:has(> .sec-head),.sec > .wrap:has(> .sec-head + :is(.prose,.company):last-child){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);column-gap:var(--sp-12);align-items:start}
  .seo-prose:has(> .sec-head) > *,.sec > .wrap:has(> .sec-head + :is(.prose,.company):last-child) > :is(.prose,.company){grid-column:2}
  .sec > .wrap:has(> .sec-head + :is(.prose,.company):last-child) > *{grid-column:1 / -1}
  .sec > .wrap:has(> .sec-head + :is(.prose,.company):last-child) > .sec-head{grid-column:1;margin-bottom:0}
  .sec > .wrap:has(> .sec-head + :is(.prose,.company):last-child) > :is(.prose,.company){grid-column:2}
  .seo-prose:has(> .sec-head) > .sec-head{grid-column:1;grid-row:1 / span 40;margin-bottom:0;position:sticky;top:calc(var(--header-h) + var(--sp-6))}
  /* 記事本文は読みやすい幅で中央に置く */
  .guide-body{max-width:calc(44em + var(--gutter)*2)}
}
@media (min-width:1024px){.page-hero:has(.guide-byline) .wrap{display:block;max-width:calc(44em + var(--gutter)*2)}}
/* 見出しの折り返し：1文字だけ次の行に落ちないようにする */
.page-title,.sec-title,.cta h2,.notify-box h2,.notify-box h3{text-wrap:balance;word-break:auto-phrase}
@media (min-width:1024px){
  .page-hero .wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}

/* ===== スマホ幅の調整（2026-11-10） ===== */
/* 日本語の折り返し：budoux-ja.js が文節の切れ目を入れる。ここは切れ目以外で折らない指定 */
.budoux [data-budoux]{word-break:keep-all;overflow-wrap:anywhere}
/* 長い段落は文節で折ると行末がそろわないので、ふつうの折り返しに戻す（BudouXが要素に直接スタイルを書くため !important） */
.budoux .seo-answer[data-budoux]{word-break:normal !important;overflow-wrap:break-word !important}
.faq summary,.guide-card-title,.kh-row-t,.kh-flow-name,.contact-aside h1{text-wrap:pretty}
.kura-site main [id],main [id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.brand{min-width:0}
.nav-toggle{flex:0 0 44px}
@media (max-width:374px){
  .brand img{height:auto;max-height:32px;width:auto;max-width:calc(100vw - 104px)}
  .st-ic{width:48px;height:48px}
  .flow-chain > li{gap:12px}
}
@media (max-width:479px){
  .tile-fig:not(.is-logo),.tile-fig.is-sm{height:auto;aspect-ratio:4/3}
}
@media (max-width:767px){
  .sec-title .status{display:block;width:fit-content;margin:var(--sp-3) 0 0}
}
@media (max-width:1023px){
  .chip{min-height:44px}
  .more{display:inline-flex;align-items:center;min-height:44px}
  .footer li a{display:flex;align-items:center;min-height:44px}
  .choice{min-height:44px}
}
/* 表：2列の表は画面幅に収める。3列以上は横に送れることを見せる */
.seo-table-hint{display:none;margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--ink-2)}
.seo-table-hint.is-on + .seo-table-wrap{margin-top:var(--sp-2)}
.seo-table-wrap.is-scroll:not(.is-end){-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.2),#000 28px);mask-image:linear-gradient(to left,rgba(0,0,0,.2),#000 28px)}
@media (max-width:767px){
  .seo-table{min-width:0;font-size:.8125rem;line-height:1.65}
  .seo-table th,.seo-table td{padding:var(--sp-2) var(--sp-3)}
  .seo-table thead th{white-space:normal}
  .seo-table tbody th{min-width:7.5em;max-width:10em}
  .seo-table td{min-width:5.5em}
  .seo-table:has(thead th:nth-child(3)){min-width:480px}
  .seo-table:has(thead th:nth-child(4)){min-width:540px}
  .seo-table:has(thead th:nth-child(5)){min-width:640px}
  .seo-table-wrap.is-scroll .seo-table tbody th,.seo-table-wrap.is-scroll .seo-table thead th:first-child{position:sticky;left:0;z-index:1;box-shadow:1.5px 0 0 var(--line)}
  .seo-table-wrap.is-scroll + *{margin-top:var(--sp-4)}
  .seo-table-hint.is-on{display:block}
}
.field select{-webkit-appearance:none;appearance:none;padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}