:root{
  --bg:#ffffff; --bg-deep:#eef2f7; --bg-warm:#f5f7fa;
  --ink:#2d3744; --ink-soft:#6c7785; --line:#d4dbe3;
  --accent:#445A69;
  --body-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --label-en:"Jost","Futura","Helvetica Neue",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--body-jp);
  font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.95;font-size:14.5px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ===== HEADER (テストサイト準拠) ===== */
header.site{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:flex-end;padding:24px 40px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,0))}
header.site .util,header.site .gnav{display:flex;gap:30px;align-items:center;pointer-events:auto}
header.site .util a,header.site .gnav a{font-size:12px;letter-spacing:.12em;color:var(--ink);display:flex;align-items:center;gap:8px}
header.site .gnav a{font-family:var(--label-en);letter-spacing:.36em;padding:6px 2px}
header.site .util svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.2}
header.site .hamb{margin-left:24px;pointer-events:auto;width:auto;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;background:transparent;border:0;padding:6px 4px;cursor:pointer}
header.site .hamb .ic{display:flex;flex-direction:column;gap:5px;align-items:center}
header.site .hamb .ic span{display:block;width:26px;height:1px;background:var(--ink);transition:width .3s ease,background .3s ease}
header.site .hamb .ic span:last-child{width:18px;align-self:flex-end}
header.site .hamb .lbl{font-family:"Jost",sans-serif;font-weight:300;font-size:9.5px;letter-spacing:.42em;color:var(--ink);line-height:1;padding-left:.42em;transition:color .3s ease}
header.site .hamb:hover .ic span,header.site .hamb:hover .ic span:last-child{width:26px}
.brandmark{position:fixed;left:40px;top:24px;z-index:60;color:var(--ink);display:flex;flex-direction:column}
.brandmark .tag{font-size:10px;letter-spacing:.3em;margin-bottom:4px;color:var(--ink-soft);font-family:var(--body-jp);font-weight:400}
.brandmark .logo{font-family:var(--label-en);font-weight:400;font-size:22px;letter-spacing:.5em;padding-left:.4em;line-height:1}
/* ==== AUTO COLOR INVERSION — dark bg behind header ==== */
header.site .gnav a,header.site .util a{transition:color .35s ease}
header.site .util svg{transition:stroke .35s ease}
header.site .hamb .ic span,header.site .hamb .lbl{transition:background .35s ease,color .35s ease}
.brandmark,.brandmark .tag,.brandmark .logo{transition:color .35s ease}
header.site.over-dark .gnav a,header.site.over-dark .util a{color:#fff}
header.site.over-dark .util svg{stroke:#fff}
header.site.over-dark .hamb .ic span{background:#fff}
header.site.over-dark .hamb .lbl{color:#fff}
.brandmark.over-dark,.brandmark.over-dark .logo{color:#fff}
.brandmark.over-dark .tag{color:rgba(255,255,255,.85)}


.canvas-note{background:#2d3744;color:#c5d2e0;font-family:var(--label-en);font-size:11px;letter-spacing:.18em;padding:12px 32px;text-align:center}
.canvas-note span{opacity:.5;margin:0 8px}

/* ===== REVEAL ANIMATIONS ===== */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .85s cubic-bezier(.19,1,.22,1),transform .85s cubic-bezier(.19,1,.22,1);will-change:opacity,transform}
.reveal.is-inview{opacity:1;transform:translateY(0)}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}
/* image clip-path reveal — unveils from left to right */
.reveal-img{position:relative;overflow:hidden}
.reveal-img > img,.reveal-img > div{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.23,1,.32,1)}
.reveal-img.is-inview > img,.reveal-img.is-inview > div{clip-path:inset(0 0 0 0)}

/* ===== PAGE HERO ===== */
/* PAGE COVER — left-flush + vertical heading right */
.page-hero{padding:120px 0 0;background:var(--bg);position:relative;overflow:hidden}
.pagecover-left{position:relative;padding-right:140px}
.pagecover-left .cover-image{
  width:85vw;max-width:1200px;
  aspect-ratio:21/9;min-height:380px;
  overflow:hidden;
  margin:0;
}
.pagecover-left .cover-image img{width:100%;height:100%;object-fit:cover;display:block}
/* Vertical heading on the right edge — like calligraphy column */
.pagecover-left .vert-heading{
  position:absolute;top:24px;right:80px;
  display:flex;align-items:flex-start;gap:10px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  line-height:1.4;
}
.pagecover-left .vert-heading .ja{
  font-family:var(--body-jp);font-weight:700;
  font-size:16px;letter-spacing:.42em;color:var(--ink);
}
.pagecover-left .vert-heading .en{
  font-family:var(--label-en);font-weight:500;
  font-size:10.5px;letter-spacing:.42em;color:var(--ink-soft);
  padding-top:6px;
}
/* Catchphrase below image, large gothic display */
.pagecover-left .cover-catch{
  padding:64px 80px 0 80px;
  max-width:920px;
}
.pagecover-left .cover-catch .eyebrow{
  font-family:var(--label-en);font-size:11.5px;letter-spacing:.5em;
  color:var(--accent);font-weight:500;margin-bottom:24px;display:inline-block;
}
.pagecover-left .cover-catch :is(h1,h2){
  font-family:var(--body-jp);font-weight:700;
  font-size:clamp(22px,2.4vw,32px);
  letter-spacing:.05em;line-height:1.75;color:var(--ink);
  margin-bottom:32px;
  max-width:820px;
}
.pagecover-left .cover-catch .signage{
  font-family:var(--label-en);font-weight:300;
  font-size:clamp(32px,3.6vw,52px);
  letter-spacing:.16em;color:var(--ink-soft);line-height:1;
  padding-left:0;
}

/* ===== LEAD ARTICLE 雑誌の導入記事スタイル ===== */
.lead-article{padding:140px 80px 60px}
.lead-article .inner{max-width:1100px;margin:0 auto}
.lead-article .pull-quote{font-family:var(--body-jp);font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:.12em;line-height:1.95;color:var(--ink);text-align:center;margin:0 auto 80px;max-width:880px;padding-bottom:80px;position:relative}
.lead-article .pull-quote::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:48px;height:2px;background:var(--accent)}
.lead-article .body{max-width:720px;margin:0 auto}
.lead-article .body p{font-size:15px;line-height:2.3;margin-bottom:22px;letter-spacing:.04em;color:var(--ink)}

/* ===== COLLAGE — compact pinboard (uniform heights) ===== */
.collage{margin:64px auto;max-width:980px;padding:0 80px}
.collage > *{overflow:hidden}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
/* Pattern A — big left + 2 stacked right */
.collage.A,.collage.p1{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:2.6/1}
.collage.A > *:nth-child(1),.collage.p1 > *:nth-child(1){grid-row:1/3}
/* Pattern B — triptych row */
.collage.B,.collage.p2,.collage.p3,.collage.p4{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;aspect-ratio:3.6/1}
/* CHART variant — preserve diagram aspect ratios & full content */
.collage.B.charts{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:24px 28px;aspect-ratio:auto;max-width:1100px;margin-left:auto;margin-right:auto}
.collage.B.charts > *{flex:1 1 0;min-width:240px;max-width:380px;overflow:visible;aspect-ratio:auto;background:transparent}
.collage.B.charts img{width:100%;height:auto;object-fit:contain;display:block;background:transparent}
@media(max-width:767px){
  .collage.B.charts{flex-direction:column;align-items:center;gap:32px}
  .collage.B.charts > *{width:100%;max-width:420px;flex:0 0 auto}
}
/* Pattern C: 4-image asymmetric pinboard */
.collage.C{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:14px;aspect-ratio:5/3}
.collage.C > *{overflow:hidden}
.collage.C img{width:100%;height:100%;object-fit:cover}
.collage.C > *:nth-child(1){grid-column:1/3;grid-row:1}
.collage.C > *:nth-child(2){grid-column:3;grid-row:1/3}
.collage.C > *:nth-child(3){grid-column:1;grid-row:2}
.collage.C > *:nth-child(4){grid-column:2;grid-row:2}

/* ===== MERIT — editorial article列挙 ===== */
.merit{padding:140px 80px;background:var(--bg-deep)}
.merit .head{max-width:1100px;margin:0 auto 80px;text-align:center}
.merit .head .eb{font-family:var(--label-en);font-size:13px;letter-spacing:.5em;color:var(--accent);font-weight:500;margin-bottom:20px}
.merit .head h2{font-family:var(--body-jp);font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:.14em;line-height:1.7;color:var(--ink)}
.merit .head .lead{margin-top:24px;font-size:15px;line-height:2.2;color:var(--ink-soft);letter-spacing:.04em}
.merit .items{max-width:1100px;margin:0 auto}
.merit .item{display:grid;grid-template-columns:auto 1fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--line);align-items:center}
.merit .item:first-child{border-top:1px solid var(--line)}
.merit .item .meta{position:relative;display:flex;align-items:center;gap:24px;width:200px}
.merit .item .meta .no{font-family:var(--label-en);font-weight:300;font-size:32px;letter-spacing:.04em;color:var(--accent);line-height:1;flex-shrink:0}
.merit .item .meta .ph{width:80px;height:80px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.merit .item .meta .ph img{width:100%;height:100%;object-fit:contain}
.merit .item .body h3{font-family:var(--body-jp);font-weight:700;font-size:22px;letter-spacing:.14em;line-height:1.7;margin-bottom:22px;color:var(--ink)}
.merit .item .body p{font-size:14.5px;line-height:2.3;color:var(--ink-soft);letter-spacing:.04em;max-width:560px}

/* ===== DETAIL ARTICLES (numbered chapters, magazine flow) ===== */
.detail-art{padding:160px 80px}
.detail-art.alt{background:var(--bg-deep)}
.detail-art > .inner{max-width:1100px;margin:0 auto}
.detail-art .chapter{text-align:center;margin-bottom:48px}
.detail-art .chapter .no{font-family:var(--label-en);font-weight:300;font-size:14px;letter-spacing:.5em;color:var(--accent);margin-bottom:24px;display:inline-block;position:relative}
.detail-art .chapter .no::before,.detail-art .chapter .no::after{content:"";display:inline-block;width:24px;height:1px;background:var(--accent);margin:0 14px;vertical-align:middle;opacity:.7}
.detail-art .chapter h2{font-family:var(--body-jp);font-weight:700;font-size:clamp(28px,3.4vw,44px);letter-spacing:.14em;line-height:1.7;color:var(--ink);max-width:820px;margin:0 auto}
.detail-art .lead{max-width:680px;margin:0 auto 60px;text-align:center;font-family:var(--body-jp);font-weight:400;font-size:16px;line-height:2.25;color:var(--ink);letter-spacing:.06em}
.detail-art .body{max-width:720px;margin:60px auto 0}
.detail-art .body p{font-size:14.5px;line-height:2.3;color:var(--ink-soft);margin-bottom:24px;letter-spacing:.04em}
.detail-art .body p .em{color:var(--ink);font-weight:500}
.detail-art .body .note{font-size:11.5px;color:var(--ink-soft);opacity:.75;margin-top:14px;border-left:2px solid var(--line);padding-left:14px}

/* ===== SYSTEM — compact, tight gap above ===== */
.system{padding:0 80px 80px;text-align:center;background:var(--bg);margin-top:-100px}
.system .eb{font-family:var(--label-en);font-size:12px;letter-spacing:.5em;color:var(--accent);font-weight:500;margin-bottom:14px}
.system h2{font-family:var(--label-en);font-weight:300;font-size:clamp(28px,3vw,42px);letter-spacing:.14em;margin-bottom:10px;line-height:1;color:var(--ink)}
.system .sub{font-family:var(--body-jp);font-weight:700;font-size:13px;letter-spacing:.18em;color:var(--ink-soft);margin-bottom:48px}
.system .ph{max-width:640px;margin:0 auto}
.system .ph img{width:100%}

/* ===== IMPORTANT — editorial spread ===== */
.important{padding:160px 80px;background:var(--bg-deep)}
.important .head{text-align:center;margin-bottom:96px}
.important .head .eb{font-family:var(--label-en);font-size:13px;letter-spacing:.5em;color:var(--accent);font-weight:500;margin-bottom:20px}
.important .head h2{font-family:var(--body-jp);font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:.14em;line-height:1.7;color:var(--ink)}
.important .items{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.important .item{display:grid;grid-template-columns:80px 1fr;gap:40px;align-items:center}
.important .item .ph{width:80px;height:80px;border-radius:50%;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.important .item .ph img{width:75%;height:75%;object-fit:contain}
/* voice photos (loan cases) */
.important .items .item{grid-template-columns:125px 1fr !important}
.important .items .item .ph{width:125px !important;height:125px !important;border-radius:50% !important;overflow:hidden !important;aspect-ratio:auto !important;max-width:none !important;background:#eef1f4 !important}
.important .items .item .ph img{width:100% !important;height:100% !important;max-width:none !important;object-fit:cover !important;display:block !important;transform:none !important}
.important .items .item .ph img.vp1{object-position:38% 28% !important}
.important .items .item .ph img.vp2{object-position:66% 30% !important}
.important .items .item .ph img.vp3{object-position:58% 22% !important}

.important .item .body h3{font-family:var(--body-jp);font-weight:700;font-size:19px;letter-spacing:.16em;margin-bottom:14px;color:var(--ink)}
.important .item .body p{font-size:14.5px;line-height:2.3;color:var(--ink-soft);max-width:600px}

/* ==== SERVICE PAGES: REFINED DESIGN (Slide review feedback) ==== */
/* FIX 2: sv-tags row break between 03 & 04 — balance 3+4 layout */
.sv-tag-break{flex-basis:100%;width:100%;height:0;display:block;margin:0;padding:0;border:0}

/* FIX 3: .merit cards — image-on-top panel layout (visibility + design) */
.merit .items{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:28px;max-width:1180px;margin:0 auto}
.merit .item{justify-content:flex-start !important;display:flex !important;flex-direction:column !important;grid-template-columns:none !important;background:#fff;border:1px solid var(--line) !important;padding:0 !important;align-items:stretch !important;gap:0 !important;border-top:1px solid var(--line) !important;border-bottom:1px solid var(--line) !important;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;overflow:hidden;justify-content:center;}
.merit .item:first-child{border-top:1px solid var(--line) !important}
.merit .item:hover{transform:translateY(-6px);box-shadow:0 20px 50px -25px rgba(45,55,68,.25)}
.merit .item .meta{display:flex !important;flex-direction:column !important;width:auto !important;gap:0 !important;align-items:stretch !important;padding:0 !important;position:relative}
.merit .item .meta .ph{width:100% !important;height:240px !important;background:#f0ede6;display:block;border-radius:0;flex-shrink:0}
.merit .item .meta .ph img{width:100% !important;height:100% !important;object-fit:cover !important;display:block}
.merit .item .meta .no{padding:22px 28px 0 !important;font-size:34px !important;line-height:1 !important;color:var(--accent) !important}
.merit .item .body{padding:12px 28px 30px !important}
.merit .item .body h3{font-size:18px !important;letter-spacing:.12em !important;line-height:1.75 !important;margin-bottom:16px !important;color:var(--ink) !important}
.merit .item .body p{font-size:13.5px !important;line-height:2.1 !important;max-width:none !important;color:var(--ink-soft) !important}

/* FIX 5: .important section — panel/grid for case examples & commitments */
.important .items{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:28px !important;max-width:1180px !important;margin:0 auto !important;flex-direction:row !important}
.important .item{justify-content:flex-start !important;display:flex !important;flex-direction:column !important;grid-template-columns:none !important;background:#fff !important;border:1px solid var(--line) !important;overflow:hidden;align-items:stretch !important;gap:0 !important;padding:0 !important;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;justify-content:center}
.important .item:hover{transform:translateY(-6px);box-shadow:0 20px 50px -25px rgba(45,55,68,.25)}
.important .item .ph{width:100% !important;height:210px !important;border-radius:0 !important;border:none !important;background:#f0ede6 !important;display:block !important;align-items:stretch !important;justify-content:initial !important;flex-shrink:0}
.important .item .ph img{width:100% !important;height:100% !important;object-fit:cover !important;display:block}
.important .item .body{padding:26px 28px 30px !important}
.important .item .body h3{font-size:17px !important;letter-spacing:.12em !important;line-height:1.75 !important;margin-bottom:14px !important;color:var(--ink) !important}
.important .item .body p{font-size:13.5px !important;line-height:2.05 !important;max-width:none !important;color:var(--ink-soft) !important}

/* FIX 4: Loan Chapter 2 step-flow diagram */
.loan-flow-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;max-width:1180px;margin:60px auto;padding:0 40px;gap:0;justify-items:stretch}
.loan-flow-steps .lfs-step{background:#fff;border:1px solid var(--line);padding:36px 22px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.loan-flow-steps .lfs-step:hover{transform:translateY(-4px);box-shadow:0 16px 40px -22px rgba(45,55,68,.25)}
.loan-flow-steps .lfs-num{font-family:var(--label-en);font-weight:300;font-size:28px;letter-spacing:.08em;color:var(--accent);line-height:1}
.loan-flow-steps .lfs-icon{width:56px;height:56px;color:var(--accent);opacity:.85}
.loan-flow-steps .lfs-icon svg{width:100%;height:100%}
.loan-flow-steps .lfs-label{font-family:var(--body-jp);font-weight:600;font-size:15.5px;letter-spacing:.12em;color:var(--ink);margin-top:4px}
.loan-flow-steps .lfs-desc{font-size:12.5px;line-height:1.95;color:var(--ink-soft);letter-spacing:.04em;margin-top:4px}
.loan-flow-steps .lfs-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:24px;opacity:.55;font-weight:300;padding:0 6px}

@media (max-width:1023px){
  
  .merit .item .meta .ph,.important .item .ph{height:200px !important}
  .merit .item .meta .no{padding:20px 24px 0 !important;font-size:28px !important}
  .merit .item .body,.important .item .body{padding:12px 24px 26px !important}
  .loan-flow-steps{grid-template-columns:1fr;gap:14px;padding:0 24px}
  .loan-flow-steps .lfs-arrow{transform:rotate(90deg);padding:4px 0}
}
@media (max-width:767px){.merit .items,.important .items{grid-template-columns:1fr !important;gap:20px !important;max-width:480px !important}}

/* ===== SIDE SECTIONS (補助金・メンテナンス) ===== */
.side-section{padding:140px 80px;background:var(--bg)}
.side-section .inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.side-section .col .eb{font-family:var(--label-en);font-size:12px;letter-spacing:.4em;color:var(--accent);font-weight:500;margin-bottom:14px}
.side-section .col h3{font-family:var(--body-jp);font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:.14em;line-height:1.8;color:var(--ink);margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.side-section .col p{font-size:14.5px;line-height:2.3;color:var(--ink-soft);margin-bottom:18px}
.side-section .col .ph{margin-top:32px;aspect-ratio:3/2;overflow:hidden}
.side-section .col .ph img{width:100%;height:100%;object-fit:cover}
.side-section .col .note{font-size:11.5px;color:var(--ink-soft);opacity:.75;margin-top:12px}

/* ===== ALL-DENKI — 2-column editorial ===== */
.allden{padding:120px 80px;background:var(--bg-deep)}
.allden .inner{max-width:1100px;margin:0 auto}
.allden .top{text-align:center;margin-bottom:56px}
.allden .top .eb{font-family:var(--label-en);font-size:12px;letter-spacing:.5em;color:var(--accent);font-weight:500;margin-bottom:14px}
.allden .top h2{font-family:var(--body-jp);font-weight:700;font-size:clamp(24px,3vw,36px);letter-spacing:.14em;line-height:1.7;color:var(--ink);margin-bottom:10px}
.allden .top .sub{font-family:var(--label-en);font-size:13px;letter-spacing:.36em;color:var(--ink-soft)}
/* 2-column main content */
.allden .main{display:grid;grid-template-columns:.95fr 1.1fr;gap:56px;align-items:center;margin-bottom:56px}
.allden .main .ph{overflow:hidden;aspect-ratio:4/3}
.allden .main .ph img{width:100%;height:100%;object-fit:cover}
.allden .main .body{text-align:left}
.allden .main .body .lead{font-family:var(--body-jp);font-weight:700;font-size:18px;letter-spacing:.12em;line-height:1.85;color:var(--ink);margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.allden .main .body p{font-size:14px;line-height:2.2;color:var(--ink-soft);letter-spacing:.04em}
.allden .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:780px;margin:0 auto}
.allden .pillar{padding:32px 20px;background:#fff;text-align:center;font-family:var(--body-jp);font-weight:700;font-size:14.5px;letter-spacing:.14em;color:var(--ink);line-height:1.6;border:1px solid var(--line)}

/* ===== CTA — compact ===== */
.cta-band{padding:100px 80px 80px;background:var(--bg);text-align:center;border-top:1px solid var(--line)}
.cta-band .ph{max-width:420px;margin:0 auto 40px;overflow:hidden;aspect-ratio:16/9}
.cta-band .ph img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.cta-band .en{font-family:var(--label-en);font-weight:400;font-size:clamp(18px,2vw,24px);letter-spacing:.32em;margin-bottom:14px;line-height:1.4;color:var(--ink)}
.cta-band p{font-size:13.5px;line-height:2;color:var(--ink-soft);max-width:520px;margin:0 auto 18px}
.cta-band .tel{font-family:var(--label-en);font-size:22px;letter-spacing:.1em;margin:18px 0;font-weight:300;color:var(--ink)}
.cta-band .btns{display:flex;justify-content:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.cta-band .btn{padding:14px 36px;background:var(--ink);color:#fff;font-family:var(--label-en);font-size:11px;letter-spacing:.32em;border:1px solid var(--ink);transition:.3s}
.cta-band .btn:hover{background:transparent;color:var(--ink)}
.cta-band .btn.outline{background:transparent;color:var(--ink)}

/* ===== FOOTER ===== */
/* ========== FOOTER ========== */
footer.site{background:var(--bg-deep);padding:56px 56px 22px;border-top:1px solid var(--line);color:var(--ink)}
footer.site .ft-top{display:grid;grid-template-columns:1.25fr 1fr 1fr .85fr;gap:48px;align-items:flex-start;padding-bottom:32px;border-bottom:1px solid var(--line)}
footer.site .ft-brand .tag{font-size:12px;letter-spacing:.32em;color:var(--ink-soft);margin-bottom:6px}
footer.site .ft-brand .logo{font-family:var(--label-en);font-size:26px;letter-spacing:.5em;padding-left:.4em;margin-bottom:14px;color:var(--ink)}
footer.site .ft-brand .company{font-size:14px;letter-spacing:.1em;color:var(--ink);margin-bottom:6px;font-weight:500}
footer.site .ft-brand .catch{font-size:13.5px;letter-spacing:.1em;color:var(--ink-soft);line-height:1.8}
footer.site .ft-nav{display:contents}
footer.site .ft-col h4{font-family:var(--label-en);font-size:12.5px;letter-spacing:.42em;margin-bottom:18px;color:var(--accent);font-weight:500}
footer.site .ft-col ul{list-style:none;margin:0;padding:0}
footer.site .ft-col li{margin-bottom:10px;font-size:13.5px;letter-spacing:.08em;line-height:1.5}
footer.site .ft-col li a{color:var(--ink);text-decoration:none;transition:color .25s ease,opacity .25s ease;opacity:.78}
footer.site .ft-col li a:hover{opacity:1;color:var(--accent)}
footer.site .ft-follow .sns{display:flex;gap:10px;margin-bottom:18px}
footer.site .ft-follow .sns a{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .25s ease,color .25s ease,border-color .25s ease;border-color:var(--ink);}
footer.site .ft-follow .sns a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
footer.site .contact-mini{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--ink);border-radius:999px;font-size:13px;letter-spacing:.22em;color:var(--ink);text-decoration:none;background:#fff;transition:background .25s ease,color .25s ease}
footer.site .contact-mini:hover{background:var(--ink);color:#fff}
footer.site .contact-mini .arrow{font-size:14px}
footer.site .ft-offices{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:24px 0 18px;border-bottom:1px solid var(--line)}
footer.site .ft-office .ofc-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
footer.site .ft-office .ofc-head .ja{font-size:13.5px;letter-spacing:.16em;color:var(--ink);font-weight:500}
footer.site .ft-office .ofc-head .en{font-family:var(--label-en);font-size:11.5px;letter-spacing:.36em;color:var(--ink-soft);font-weight:500}
footer.site .ft-office p{font-size:13px;line-height:1.85;color:var(--ink-soft);letter-spacing:.04em;margin:0}
footer.site .ft-office .tel{display:inline-block;margin-left:14px;padding-left:14px;border-left:1px solid var(--line);font-family:var(--label-en);font-size:14.5px;letter-spacing:.12em;color:var(--ink)}
footer.site .copy-row{display:flex;justify-content:space-between;padding-top:18px;font-family:var(--label-en);font-size:11.5px;letter-spacing:.28em;color:var(--ink-soft);gap:20px;flex-wrap:wrap}
@media (max-width:1023px){
  footer.site{padding:48px 28px 20px}
  footer.site .ft-top{grid-template-columns:1fr 1fr;gap:32px}
  footer.site .ft-brand{grid-column:1 / -1;padding-bottom:8px;border-bottom:1px solid var(--line)}
  footer.site .ft-offices{grid-template-columns:1fr;gap:18px;padding:20px 0 14px}
  footer.site .ft-office .tel{display:block;margin-left:0;padding-left:0;border-left:0;margin-top:4px}
}
@media (max-width:767px){
  footer.site{padding:40px 18px 18px}
  footer.site .ft-top{grid-template-columns:1fr;gap:28px}
  footer.site .copy-row{flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:11px}
}
/* ============================ */
.floating{position:fixed;right:0;bottom:0;z-index:30;background:#445A69;color:#fff;padding:18px 24px;display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.2em;border:1px solid #445A69;transition:background .25s ease,color .25s ease,bottom .25s ease}
.floating:hover{background:#fff;color:#445A69}
.floating:hover svg{stroke:#445A69 !important}

/* ========== SOLAR MOBILE OPTIMIZATION ========== */
@media (max-width:767px){
  /* Reset shared paddings */
  .lead-article,.merit,.detail-art,.system,.important,.side-section,.allden,.cta-band{padding-left:20px !important;padding-right:20px !important}
  
  /* HEADER mobile */
  header.site{padding:18px 20px}
  header.site .gnav{display:none}
  header.site .util a{font-size:0;gap:0}
  header.site .util a svg{width:22px;height:22px}
  header.site .hamb{margin-left:14px;width:auto;height:auto;background:transparent;border-radius:0;flex-direction:column;gap:6px;padding:4px 2px;box-shadow:none}
  header.site .hamb:active{transform:scale(.94)}
  header.site .hamb .ic{display:flex;flex-direction:column;gap:5px;align-items:center}
  header.site .hamb .ic span{display:block;width:22px;height:1px;background:var(--ink);border-radius:0}
  header.site .hamb .ic span:last-child{width:14px;align-self:flex-end}
  header.site .hamb .lbl{font-family:"Jost",sans-serif;font-weight:300;font-size:8.5px;letter-spacing:.36em;color:var(--ink);line-height:1;padding-left:.36em}
  .brandmark{left:20px;top:20px}
  .brandmark .tag{font-size:9px;letter-spacing:.25em}
  .brandmark .logo{font-size:18px;letter-spacing:.4em}

  /* PAGE COVER — → mobile */
  .page-hero{padding:88px 0 0}
  .pagecover-left{padding-right:0}
  .pagecover-left .cover-image{
    width:100vw;max-width:none;
    aspect-ratio:16/10;min-height:240px;
  }
  /* Move vertical heading from right edge to top-right corner, smaller */
  .pagecover-left .vert-heading{
    top:104px;right:14px;
    gap:6px;line-height:1.2;
  }
  .pagecover-left .vert-heading .ja{font-size:12px;letter-spacing:.32em}
  .pagecover-left .vert-heading .en{font-size:8px;letter-spacing:.36em}
  .pagecover-left .cover-catch{padding:36px 16px 0}
  .pagecover-left .cover-catch .eyebrow{font-size:10px;letter-spacing:.4em;margin-bottom:16px}
  .pagecover-left .cover-catch :is(h1,h2){font-size:17px;letter-spacing:.04em;line-height:1.8;margin-bottom:24px}
  .pagecover-left .cover-catch .signage{font-size:26px;letter-spacing:.14em}

  /* LEAD ARTICLE */
  .lead-article{padding:80px 20px 40px}
  .lead-article .pull-quote{font-size:20px;line-height:1.85;padding-bottom:48px;margin-bottom:48px;max-width:none}
  .lead-article .body p{font-size:13.5px;line-height:2.05;margin-bottom:18px}

  /* COLLAGE — mobile: stack vertically */
  .collage{margin:48px auto;padding:0 20px;max-width:none}
  .collage.A,.collage.B,.collage.p1,.collage.p2,.collage.p3,.collage.p4,.collage.C{
    grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto;gap:8px;
  }
  .collage.A > *:nth-child(1),.collage.p1 > *:nth-child(1){grid-row:auto}
  .collage > *{aspect-ratio:4/3}

  /* MERIT */
  .merit{padding:80px 20px}
  .merit .head{margin-bottom:48px}
  .merit .head .eb{font-size:10px;letter-spacing:.4em}
  .merit .head h2{font-size:21px;letter-spacing:.1em;line-height:1.85}
  .merit .head .lead{font-size:13px;line-height:1.95;margin-top:18px}
  .merit .items{margin-bottom:0}
  .merit .item{grid-template-columns:1fr;gap:18px;padding:32px 0}
  .merit .item .meta{flex-direction:row;width:auto;gap:18px;justify-content:flex-start}
  .merit .item .meta .no{font-size:26px}
  .merit .item .meta .ph{width:64px;height:64px}
  .merit .item .body h3{font-size:18px;letter-spacing:.1em;margin-bottom:14px}
  .merit .item .body p{font-size:13px;line-height:2;max-width:none}

  /* DETAIL ARTICLE chapters */
  .detail-art{padding:80px 20px}
  .detail-art .chapter{margin-bottom:32px}
  .detail-art .chapter .no{font-size:11px;letter-spacing:.4em;margin-bottom:18px}
  .detail-art .chapter .no::before,.detail-art .chapter .no::after{width:14px;margin:0 8px}
  .detail-art .chapter h2{font-size:22px;letter-spacing:.1em;line-height:1.85;max-width:none}
  .detail-art .lead{font-size:14px;line-height:2;margin-bottom:36px;max-width:none}
  .detail-art .body{max-width:none;margin-top:40px}
  .detail-art .body p{font-size:13px;line-height:2.05;margin-bottom:18px}

  /* SYSTEM */
  .system{padding:48px 20px 64px}
  .system .eb{font-size:10px;letter-spacing:.4em}
  .system h2{font-size:30px;letter-spacing:.1em}
  .system .sub{font-size:11.5px;letter-spacing:.16em;margin-bottom:32px}
  .system .ph{max-width:100%}

  /* IMPORTANT */
  .important{padding:80px 20px}
  .important .head{margin-bottom:48px}
  .important .head .eb{font-size:10px}
  .important .head h2{font-size:21px;line-height:1.85}
  .important .items{gap:36px}
  .important .item{grid-template-columns:1fr;gap:20px;text-align:center}
  .important .item .ph{width:96px;height:96px;margin:0 auto}
  .important .item .body h3{font-size:17px;letter-spacing:.14em;margin-bottom:12px}
  .important .item .body p{font-size:13px;line-height:2;max-width:none}

  /* SIDE-SECTION 2cols → 1col */
  .side-section{padding:80px 20px}
  .side-section .inner{grid-template-columns:1fr;gap:64px}
  .side-section .col .eb{font-size:10px}
  .side-section .col h3{font-size:19px;line-height:1.7}
  .side-section .col p{font-size:13px;line-height:2}

  /* ALL-DENKI */
  .allden{padding:80px 20px}
  .allden .top{margin-bottom:36px}
  .allden .top .eb{font-size:10px}
  .allden .top h2{font-size:22px;line-height:1.85}
  .allden .top .sub{font-size:10px;letter-spacing:.3em}
  .allden .main{grid-template-columns:1fr;gap:32px;margin-bottom:40px}
  .allden .main .ph{aspect-ratio:4/3;max-width:none}
  .allden .main .body .lead{font-size:16px;line-height:1.85;letter-spacing:.08em;margin-bottom:18px;padding-bottom:14px}
  .allden .main .body p{font-size:13px;line-height:2}
  .allden .pillars{grid-template-columns:1fr;gap:8px;max-width:none}
  .allden .pillar{padding:24px 18px;font-size:14px}

  /* CTA BAND */
  .cta-band{padding:64px 20px 56px}
  .cta-band .ph{max-width:80%;margin:0 auto 28px}
  .cta-band .en{font-size:18px;letter-spacing:.22em}
  .cta-band p{font-size:12.5px;line-height:1.85}
  .cta-band .tel{font-size:24px}
  .cta-band .btn{padding:14px 32px;font-size:11px;letter-spacing:.28em}

  /* FOOTER */

  /* Floating */
  .floating{padding:14px 18px;font-size:10px}
  
  /* Hide canvas-note in mobile */
  .canvas-note{font-size:9px;padding:8px 16px}
}

@media (max-width:767px){
  .pagecover-left .cover-image{aspect-ratio:4/3;min-height:200px}
  .pagecover-left .cover-catch :is(h1,h2){font-size:15px;letter-spacing:.02em}
  .pagecover-left .cover-catch .signage{font-size:22px}
  .lead-article .pull-quote{font-size:18px}
  .merit .head h2,.detail-art .chapter h2{font-size:19px}
  .allden .top h2{font-size:19px}
  .important .item .body h3{font-size:16px}
}

@media (max-width:1023px){
  .lead-article,.collage,.merit,.detail-art,.system,.important,.side-section,.allden,.cta-band{padding-left:24px;padding-right:24px}
  .page-hero{padding:100px 0 0}
  .pagecover-left{padding-right:80px}
  .pagecover-left .cover-image{width:92vw;min-height:280px}
  .pagecover-left .vert-heading{right:24px;top:16px}
  .pagecover-left .vert-heading .ja{font-size:13px;letter-spacing:.32em}
  .pagecover-left .cover-catch{padding:40px 24px 0}
  .merit .item,.important .item,.side-section .inner,.allden .main{grid-template-columns:1fr;gap:36px}
  .merit .item .meta .ph,.important .item .ph{width:160px;height:160px}
  .collage.A,.collage.B{grid-template-columns:1fr;aspect-ratio:auto}
  .collage.A > *,.collage.B > *{aspect-ratio:4/3}
}


/* icon-card-redesign v1 */
.merit .item .meta .ph,.merit .item .ph,.important .item .ph{background:transparent !important;border:none !important;border-radius:0 !important;height:120px !important;display:flex !important;align-items:center !important;justify-content:center !important;overflow:visible !important}
.merit .item .meta .ph img,.merit .item .ph img,.important .item .ph img{width:96px !important;height:96px !important;object-fit:contain !important;filter:brightness(0) saturate(100%) invert(32%) sepia(13%) saturate(890%) hue-rotate(161deg) brightness(97%) contrast(90%) !important}

/* menu-svc-nowrap v1 */
.menu-overlay .svc-col .sub a .ja,.menu-overlay .svc-col .sub a .en{white-space:nowrap !important;}