/* 合同会社フュージョン コーポレートサイト
   見た目の正本＝directions/fusion/selection.json の絵（全体 v3・区画 v2・スマホ 3-sp-*・メニュー 3-sp-menu v1）
   間合い＝スキル hp-design-fidelity「最初に読む」4（区画の上下 88/64/52・見出し→中身 32/28/24） */

@font-face{font-family:"FSans";src:url(../fonts/sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"FSans";src:url(../fonts/sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"FSans";src:url(../fonts/sans-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"FSerif";src:url(../fonts/serif-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"FSerif";src:url(../fonts/serif-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#f9fafb;
  --white:#ffffff;
  --navy:#112d74;
  --navy-2:#0f3b94;
  --ink:#22345d;
  --muted:#4b5b7e;
  --cyan:#23d2ef;
  --sky:#e9f4fb;
  --sky-2:#f2f8fc;
  --lav:#efedfb;
  --line:#d9e7f2;
  --frame:1280px;
  --gutter:40px;
  --space:88px;
  --head:32px;
  --radius:24px;
  --shadow:0 10px 30px rgba(38,86,160,.08);
  --sans:"FSans","Yu Gothic","YuGothic","Hiragino Sans","Meiryo",sans-serif;
  --serif:"FSerif","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
}
@media (max-width:1199px){:root{--space:64px;--head:28px;--gutter:32px}}
@media (max-width:640px){:root{--space:52px;--head:24px;--gutter:20px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8;overflow-x:clip;word-break:normal;line-break:strict;overflow-wrap:anywhere}
html.menu-open,html.menu-open body{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4,.serif{font-family:var(--serif);color:var(--navy);font-weight:700;letter-spacing:.02em;line-height:1.4;margin:0;word-break:auto-phrase;text-wrap:balance}
ul,ol{margin:0;padding:0}
.nw{white-space:nowrap}
/* 折り方（4b の2）：本文（p・li・dd・td）は普通の折り返し。見出し・札・ボタン・短い句だけ文節で折る。
   Safari は auto-phrase が効かないので、短い句は keep-all（句読点と空白でだけ折る）＋はみ出しの保険に overflow-wrap:anywhere */
p,li,dd,td,th,label,summary,legend,small,strong{word-break:normal;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}
h1,h2,h3,h4,summary .q,.tile,.tag,.btn,.crumbs,.gnav,.sp-menu a,.filter a,.pills li,.pills a,.cats a span,.rel-card strong,.rel3 strong,.dia strong,.list-card h2,.other2 strong,.lbl{word-break:auto-phrase;text-wrap:balance}
.chev p,.clouds li,.worries li p,.svc-card p,.cta-band p,.box li,.hero-lead,.lead,.lead-serif,.col-head .lead,.who p.main,.conclusion .lbl,.case h3,.toc a,.ft-loc span,.rel-board strong,.rel-board span,.col-card h3,.quad h3,.cat-hd .sec-h,.vflow h3,.vflow .box h4,.dots a,[class*=card] p,.rel3 p,.other2 p,p.catch,p.main,p.sign{word-break:auto-phrase;text-wrap:balance}
.ib{display:inline-block}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:200;background:#fff;padding:12px 16px}
@media (max-width:767px){.pc-br{display:none}}
.sp-only{display:none}
@media (max-width:767px){.sp-only{display:revert}.pc-only{display:none!important}}

.frame{max-width:calc(var(--frame) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--space);position:relative}
.sec + .sec.tight{padding-top:16px}
.sec-h{display:flex;align-items:center;gap:20px;font-size:clamp(28px,3.1vw,46px);margin-bottom:var(--head)}
.sec-h::before{content:"";flex:none;width:52px;height:3px;border-radius:2px;background:var(--cyan);transform-origin:left center}
.sec-h.lg{font-size:clamp(34px,4.4vw,64px)}
.sec-h.sm{font-size:20px;font-weight:600}
.lead-serif{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.3vw,34px);color:var(--navy);line-height:1.6;margin:calc(var(--head)*-0.5) 0 var(--head)}
@media (max-width:767px){.sec-h{font-size:clamp(24px,7.2vw,28px);align-items:flex-start}.sec-h.long{font-size:21px}.sec-h::before{margin-top:.7em}.sec-h.sm{font-size:18px}}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:56px;padding:0 30px 0 34px;border-radius:999px;background:linear-gradient(90deg,#0c3a91,#1b4fb3);color:#fff;font-weight:500;font-size:16px;text-decoration:none;letter-spacing:.04em;box-shadow:0 10px 22px rgba(16,58,145,.22);transition:background-color .16s,box-shadow .16s,filter .16s;white-space:nowrap}
.btn:hover{filter:brightness(1.12);box-shadow:0 12px 26px rgba(16,58,145,.3)}
.btn svg{width:16px;height:16px;flex:none}
.btn.sm{min-height:44px;padding:0 20px 0 24px;font-size:14px;gap:12px}
.btn-row{margin-top:40px}
.btn-row.center{text-align:center}
@media (max-width:640px){.btn{white-space:normal;text-align:center}.btn-row .btn{width:100%;max-width:420px}.btn-row{text-align:center}}
.arrow{width:22px;height:22px;color:#1d5fd0;flex:none}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(17,45,116,.06)}
.hd-in{display:flex;align-items:center;gap:24px;height:84px;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-height:44px}
.logo img{width:54px;height:54px}
.logo span{font-family:var(--sans);font-weight:500;font-size:32px;color:var(--navy);letter-spacing:.06em;line-height:1}
.gnav ul{display:flex;list-style:none;gap:4px}
.gnav a{display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px;font-weight:500;color:var(--navy);text-decoration:none;letter-spacing:.06em;white-space:nowrap;transition:color .16s}
.gnav a:hover,.gnav a[aria-current="page"]{color:#1d8fd8}
.hd .btn{min-height:48px;font-size:14px;padding:0 22px 0 26px}
.menu-btn{display:none;width:48px;height:48px;border:0;border-radius:14px;background:transparent;color:var(--navy);cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:28px;height:28px}
@media (max-width:1199px){
  .gnav,.hd-cta{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:767px){
  .hd{background:transparent;border:0;padding:10px 12px 0;pointer-events:none}
  .hd-in{pointer-events:auto;height:64px;padding-inline:16px 8px;background:rgba(255,255,255,.92);border-radius:22px;box-shadow:0 6px 24px rgba(38,86,160,.1)}
  .logo img{width:40px;height:40px}
  .logo span{font-size:24px}
}

/* スマホのメニュー（3-sp-menu v1 の右＝全画面の淡い地・大きなリンク・問い合わせのボタン） */
.sp-menu{position:fixed;inset:0;z-index:100;background:linear-gradient(160deg,#f4f9fd 0%,#eaf3fb 60%,#eef0fb 100%);overflow-y:auto;overscroll-behavior:contain}
.sp-menu[hidden]{display:none}
.sp-menu-hd{display:flex;align-items:center;height:64px;margin:10px 12px 0;padding-inline:16px 8px}
.sp-menu-hd .logo span{font-size:24px}
.sp-menu-hd .logo img{width:40px;height:40px}
.menu-close{width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.8);color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(38,86,160,.1)}
.menu-close svg{width:24px;height:24px}
.sp-menu nav{padding:16px 24px 32px;max-width:560px;margin-inline:auto}
.sp-menu ul{list-style:none}
.sp-menu li a{position:relative;display:flex;align-items:center;min-height:56px;padding:0 20px;font-family:var(--serif);font-weight:600;font-size:22px;color:var(--navy);text-decoration:none;border-radius:16px;letter-spacing:.06em}
.sp-menu li a[aria-current="page"]{background:linear-gradient(90deg,rgba(214,238,252,.95),rgba(232,244,252,.6))}
.sp-menu li a[aria-current="page"]::before{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--cyan)}
.sp-menu .btn{display:flex;width:100%;margin-top:28px;min-height:60px;font-size:18px}

/* パンくず */
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;gap:4px 10px;font-size:13px;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:">";color:#7b8db0}
.crumbs a{color:#2b67c9;text-decoration:none;display:inline-flex;min-height:44px;min-width:44px;justify-content:center;align-items:center}
.crumbs [aria-current]{display:inline-flex;min-height:44px;align-items:center}

/* トップ：ファーストビュー（2-section-hero v2・3-sp-section-hero v2） */
.hero{position:relative;overflow:clip;background:#f6f8fa}
.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(249,250,251,.96) 0%,rgba(249,250,251,.82) 34%,rgba(249,250,251,.15) 62%,rgba(249,250,251,0) 100%),url(../img/photo-office.jpg) right center/cover no-repeat}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t f" "b f";align-items:center;column-gap:0;min-height:780px;padding-block:72px 96px}
.hero-txt{grid-area:t;align-self:end;position:relative;z-index:2}
.hero-cta{position:relative;z-index:2}
.hero-fig{grid-area:f;position:relative;z-index:1}
.hero-fig img{width:118%;max-width:760px;margin-left:-14%}
.hero-cta{grid-area:b;align-self:start;margin-top:44px}
.hero-cta .btn{min-height:64px;font-size:18px;padding:0 36px 0 42px}
.eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--navy);letter-spacing:.12em;margin-bottom:12px}
.eyebrow::before{content:"";width:40px;height:2px;background:var(--cyan);flex:none;transform-origin:left center}
.hero h1{font-size:clamp(40px,7.8vw,114px);line-height:1.2;letter-spacing:.01em}
.hero h1 span{display:block;white-space:nowrap}
.hero-lead{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.1vw,30px);color:var(--navy);line-height:1.75;margin-top:28px}
.hero-ring{position:absolute;z-index:1;border:1px solid rgba(35,210,239,.55);border-radius:50%;pointer-events:none}
.hero-ring.r1{width:1100px;height:520px;left:-260px;top:-180px;rotate:-28deg}
@media (max-width:767px){
  .hero{margin-top:-74px}
  .hero-bg{background:linear-gradient(180deg,rgba(249,250,251,.94) 0%,rgba(249,250,251,.88) 45%,rgba(249,250,251,.35) 100%),url(../img/photo-office.jpg) 70% center/cover no-repeat}
  .hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "f" "b";min-height:0;padding-block:112px 52px}
  .hero-fig img{max-width:420px;margin:24px auto 0}
  .hero-cta{margin-top:16px;text-align:center}
  .hero-cta .btn{width:100%;max-width:340px;min-height:64px;font-size:18px}
  .eyebrow{font-size:16px}
  .hero h1{font-size:clamp(36px,12.4vw,64px)}
  .hero-ring.r1{width:700px;height:320px;left:-200px;top:-60px}
}

/* こんなお悩み（2-section-worries v2・3-sp-section-worries v1） */
.blob-bg{background:radial-gradient(ellipse 60% 55% at 30% 60%,rgba(222,238,250,.95) 0%,rgba(232,243,251,.6) 50%,rgba(249,250,251,0) 78%),radial-gradient(ellipse 50% 45% at 85% 30%,rgba(230,240,252,.8) 0%,rgba(249,250,251,0) 70%)}
.sec>.frame{position:relative;z-index:1}
.curve{position:relative;overflow-x:clip}
.curve::after{content:"";position:absolute;z-index:0;left:-15%;right:-15%;top:6%;height:90%;border-top:1px solid rgba(35,200,236,.5);border-radius:50%;rotate:-6deg;pointer-events:none}
.curve.c2::after{top:auto;bottom:-30%;rotate:4deg;border-color:rgba(150,140,236,.4)}
.worries ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-inline:-40px}
.worries li{text-align:center}
.worries li img{width:100%;max-width:280px;height:250px;object-fit:contain;object-position:center bottom;margin:0 auto 18px}
.worries li p{font-weight:500;font-size:clamp(16px,1.6vw,23px);color:var(--navy);line-height:1.7;letter-spacing:.04em;word-break:auto-phrase}
@media (max-width:1199px) and (min-width:768px){.worries ul{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.worries li p{font-size:15px}}
@media (max-width:767px){
  .worries ul{grid-template-columns:minmax(0,1fr);gap:16px}
  .worries li{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:center;gap:12px;text-align:left;padding:14px 20px 14px 8px;border-radius:999px;background:linear-gradient(90deg,rgba(232,243,251,.95),rgba(240,247,252,.7));box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
  .worries li img{margin:0}
  .worries li p{font-size:19px}
}

/* 事業内容（2-section-services v2・3-sp-section-services v2） */
.svc-grid{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 28px}
.svc-grid>li{grid-column:span 4}
.svc-grid>li:nth-child(4){grid-column:2 / 7}
.svc-grid>li:nth-child(5){grid-column:7 / 12}
.svc-card{position:relative;display:block;height:100%;min-height:270px;padding:30px 34px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,247,252,.9));box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.9);text-decoration:none;overflow:clip;transition:box-shadow .2s}
.svc-card .num{display:block;font-family:var(--sans);font-weight:700;font-size:64px;line-height:1;background:linear-gradient(180deg,#3fd8f5,#2b8ee0);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.svc-grid>li:nth-child(even) .svc-card .num{background-image:linear-gradient(180deg,#9a92f0,#6d78e6)}
.svc-card h3{font-size:clamp(20px,1.9vw,27px);line-height:1.5;max-width:62%;position:relative;z-index:1}
.svc-card p{font-size:15px;color:var(--ink);margin-top:12px;max-width:56%;line-height:1.8;position:relative;z-index:1}
.svc-card .obj{position:absolute;right:-6px;bottom:-4px;width:54%;max-width:300px;transition:scale .4s}
.svc-card .more{display:none}
.svc-card:hover{box-shadow:0 16px 36px rgba(38,86,160,.14)}
.svc-band{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:36px;padding:34px 48px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(236,245,252,.9));box-shadow:var(--shadow);text-decoration:none;min-height:150px}
.svc-band .eyebrow{font-size:17px;margin:0 0 6px}
.svc-band .eyebrow::before{width:28px}
.svc-band strong{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(22px,3.2vw,46px);color:var(--navy);line-height:1.4}
.svc-band img{width:300px;flex:none;margin:-56px 0 -56px}
@media (max-width:1199px) and (min-width:768px){
  .svc-grid>li{grid-column:span 6}
  .svc-grid>li:nth-child(4),.svc-grid>li:nth-child(5){grid-column:span 6}
  .svc-grid>li:nth-child(5){grid-column:4 / 10}
}
@media (max-width:767px){
  .svc-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .svc-grid>li,.svc-grid>li:nth-child(4),.svc-grid>li:nth-child(5){grid-column:auto}
  .svc-card{min-height:0;padding:22px 20px 24px}
  .svc-card h3{font-size:21px;max-width:74%}
  .svc-card p{max-width:60%;font-size:15px}
  .svc-card .obj{width:40%;right:-4px;top:14px;bottom:auto;z-index:0}
  .svc-card .more{display:inline-flex;margin-top:16px}
  .svc-band{border-radius:28px;padding:22px 20px;min-height:0}
  .svc-band img{width:96px;margin:0}
}

/* 私たちのやり方（2-section-approach v2・3-sp-section-approach v2） */
.trio{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.trio>li{position:relative;display:grid;grid-template-rows:auto 1fr}
.trio .fig{position:relative;height:320px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px}
.trio .fig img{max-height:300px;width:auto}
.trio>li+li .fig::before{content:"";position:absolute;left:-30px;top:52%;width:28px;height:28px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323b4ea' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M15 6l6 6-6 6'/%3E%3C/svg%3E")}
.chev{position:relative;padding:30px 60px 34px 40px;min-height:270px;background:var(--sky);clip-path:polygon(0 12px,1px 6px,6px 1px,12px 0,calc(100% - 52px) 0,100% 50%,calc(100% - 52px) 100%,12px 100%,6px calc(100% - 1px),1px calc(100% - 6px),0 calc(100% - 12px))}
.trio>li:nth-child(2) .chev{background:var(--lav)}
.trio>li:nth-child(3) .chev{background:#e8f8fd}
.chev .num{display:block;font-family:var(--sans);font-weight:700;font-size:72px;line-height:1;background:linear-gradient(180deg,#46dcf7,#1fb3e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.trio>li:nth-child(2) .chev .num{background-image:linear-gradient(180deg,#a59cf2,#7a82e8)}
.chev h3{font-size:clamp(20px,2.2vw,32px);margin:8px 0 16px}
.chev p{font-size:clamp(15px,1.3vw,18px);color:var(--ink);line-height:1.9}
.trio>li+li::before{content:"";position:absolute;left:-24px;top:calc(320px + 120px);width:20px;height:20px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323b4ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E")}
@media (max-width:1199px) and (min-width:768px){.chev{padding:24px 56px 24px 28px}.trio .fig{height:200px}.trio .fig img{max-height:190px}.trio>li+li::before{top:300px}}
@media (max-width:767px){
  .trio{grid-template-columns:minmax(0,1fr);gap:44px}
  .trio>li{grid-template-rows:auto;grid-template-columns:minmax(0,1fr)}
  .trio .fig{position:absolute;z-index:1;right:30px;top:36px;height:auto;width:44%;padding:0;pointer-events:none}
  .trio .fig img{max-height:none;width:100%}
  .chev{grid-row:1;padding:22px 52px 26px 22px;min-height:220px}
  .chev .num{font-size:60px}
  .chev h3{font-size:27px;position:relative;z-index:2;white-space:normal;word-break:keep-all}
  .chev p{font-size:16px;max-width:62%;position:relative;z-index:2}
  .chev .num{position:relative;z-index:2}
  .trio>li+li::before{left:50%;top:-34px;translate:-50% 0;rotate:90deg}
}

/* 支援の流れ（2-section-flow v2・3-sp-section-flow v2） */
.flow5{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.flow5>li{position:relative;text-align:center}
.flow5 img{width:100%;max-width:250px;height:230px;object-fit:contain;object-position:center bottom;margin:0 auto 10px}
.flow5 .num{display:none}
.flow5 .tile{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:116px;padding:14px 16px;font-family:var(--serif);font-weight:600;font-size:clamp(16px,1.7vw,24px);color:var(--navy);line-height:1.5;word-break:auto-phrase;text-wrap:balance}
.flow5 .tile::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:22px;background:rgba(255,255,255,.72);box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.95);transform:skewX(-8deg)}
.flow5>li+li::before{content:"";position:absolute;left:-23px;bottom:46px;width:18px;height:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323c3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E")}
@media (max-width:1199px) and (min-width:768px){.flow5{gap:20px}.flow5 .tile{font-size:16px;min-height:80px}.flow5>li+li::before{left:-19px}}
@media (max-width:767px){
  .flow5{grid-template-columns:minmax(0,1fr);gap:40px}
  .flow5>li{display:grid;grid-template-columns:minmax(0,1fr) 44%;align-items:center;text-align:left;padding:22px 16px 22px 26px;border-radius:48px;background:linear-gradient(90deg,rgba(234,244,251,.95),rgba(242,248,252,.75));box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
  .flow5 img{grid-column:2;grid-row:1 / 3;margin:0}
  .flow5 .num{display:block;grid-column:1;font-family:var(--sans);font-weight:700;font-size:48px;line-height:1;background:linear-gradient(180deg,#3fd8f5,#2b9be4);-webkit-background-clip:text;background-clip:text;color:transparent}
  .flow5 .tile{grid-column:1;justify-content:flex-start;min-height:0;padding:6px 0 0;background:none;box-shadow:none;font-size:24px;text-align:left}
  .flow5>li+li::before{left:50%;top:-30px;bottom:auto;translate:-50% 0;rotate:90deg}
}

/* 代表メッセージ（2-section-message v2・3-sp-section-message v1） */
.msg-card{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:24px;padding:72px 64px 72px 72px;border-radius:var(--radius);background:linear-gradient(90deg,rgba(236,245,251,.98) 0%,rgba(236,245,251,.9) 42%,rgba(236,245,251,.25) 75%,rgba(236,245,251,.1) 100%),url(../img/photo-office.jpg) right center/cover no-repeat;overflow:clip}
.msg-card .sec-h{font-size:22px;font-weight:600;margin-bottom:18px}
.msg-card .catch{font-family:var(--serif);font-weight:700;font-size:clamp(30px,3.6vw,52px);color:var(--navy);line-height:1.4;margin-bottom:28px}
.msg-card .body p{font-size:clamp(16px,1.3vw,18px);line-height:2}
.msg-card .sign{display:flex;align-items:baseline;gap:20px;margin-top:28px;font-size:16px;color:var(--ink)}
.msg-card .sign{flex-wrap:wrap}
.msg-card .sign b{white-space:nowrap;font-family:var(--serif);font-size:34px;color:var(--navy);letter-spacing:.06em}
.msg-card figure{margin:0}
.msg-card figure img{width:112%;max-width:720px;margin-left:-6%}
@media (max-width:767px){
  .msg-card{grid-template-columns:minmax(0,1fr);padding:36px 20px 32px;background:linear-gradient(180deg,rgba(236,245,251,.97) 0%,rgba(236,245,251,.9) 55%,rgba(236,245,251,.55) 100%),url(../img/photo-office.jpg) 70% bottom/cover no-repeat}
  .msg-card .catch{font-size:clamp(24px,7.6vw,40px)}
  .msg-card .sign{margin-top:8px}
}

/* コラム（2-section-column v2・3-sp-section-column v2） */
.col-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:center;gap:24px;margin-bottom:24px}
.col-head .lead{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.1vw,30px);color:var(--navy);letter-spacing:.04em}
.col-head img{width:100%;max-width:400px;margin:-40px 8% -40px auto}
.col-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.col-card{position:relative;display:flex;flex-direction:column;height:100%;min-height:440px;padding:30px 34px 32px;border-radius:20px;background:linear-gradient(160deg,#fff 0%,#fff 55%,rgba(236,245,251,.9) 100%);box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.9);text-decoration:none;overflow:clip;transition:box-shadow .2s}
.col-card:hover{box-shadow:0 16px 36px rgba(38,86,160,.14)}
.col-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:0 16px;border-radius:999px;background:#d8f1fb;color:var(--navy);font-size:14px;font-weight:500;white-space:nowrap}
.col-meta time{font-size:14px;color:#2b5fb6;letter-spacing:.04em}
.col-card h3{font-size:clamp(17px,1.75vw,25px);line-height:1.75;font-weight:600}
.col-card .thumb{position:absolute;right:10px;bottom:6px;width:56%;max-width:250px;transition:scale .4s}
.col-card .go{margin-top:auto;display:flex;align-items:center;min-height:44px}
.col-card .read{display:none}
@media (max-width:1199px) and (min-width:768px){.col-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.col-card{padding:20px}.col-card h3{font-size:17px}}
@media (max-width:767px){
  .col-head{grid-template-columns:minmax(0,1fr) 42%;gap:8px}
  .col-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .col-card{min-height:0;padding:22px 20px 24px}
  .col-card h3{font-size:20px;max-width:100%;margin-bottom:16px;position:relative;z-index:1}
  .col-card .thumb{width:36%;bottom:6px;right:8px}
  .col-card .go{display:none}
  .col-card .read{display:inline-flex;align-self:flex-start;margin-top:4px;position:relative;z-index:1}
}

/* よくある質問（2-section-faq v2・3-sp-section-faq v4） */
.faq-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"l o";gap:40px;align-items:center}
.faq-l{grid-area:l}.faq-top .obj{grid-area:o;width:120%;max-width:560px;margin-left:-6%}
.faq-top .obj{width:100%;max-width:440px;margin-left:auto}
.qa{list-style:none;display:grid;gap:16px}
.qa details{border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(38,86,160,.07),inset 0 0 0 1px rgba(217,231,242,.7)}
.qa summary{display:flex;align-items:center;gap:16px;min-height:84px;padding:14px 32px 14px 36px;cursor:pointer;list-style:none;font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.7vw,24px);color:var(--navy);line-height:1.6}
.qa summary::-webkit-details-marker{display:none}
.qa summary .q{flex:1;min-width:0;word-break:auto-phrase}
.qa summary .ic{display:none}
.qa summary svg{width:22px;height:22px;flex:none;color:var(--navy);transition:rotate .22s}
.qa details[open] summary svg{rotate:180deg}
.qa .a{padding:0 32px 24px;font-size:16px;color:var(--ink)}
@media (max-width:767px){
  .faq-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"l";gap:0}
  .faq-top .obj{grid-area:l;align-self:start;justify-self:end;width:52%;max-width:240px;margin:-24px -8px 0 0;position:relative;z-index:0}
  .faq-l{position:relative;z-index:1}
  .faq-top .sec-h{min-height:170px;align-items:flex-end;padding-bottom:12px;font-size:36px;position:relative;z-index:1}
  .faq-top .sec-h::before{margin-top:0;margin-bottom:.6em}
  .qa summary{padding:16px 18px;gap:14px;font-size:19px;min-height:88px}
  .qa summary .ic{display:block;width:64px;height:64px;flex:none;border-radius:50%;background:radial-gradient(circle,#e8f4fb 0%,#dcecf8 100%);padding:8px}
  .qa .a{padding:0 20px 22px}
}

/* お問い合わせの帯（2-section-contact v2・3-sp-section-contact v1） */
.cta-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;padding:88px 64px 88px 96px;border-radius:64px;background:linear-gradient(90deg,rgba(240,247,252,.98) 0%,rgba(240,247,252,.9) 42%,rgba(240,247,252,.2) 78%),url(../img/photo-office.jpg) right center/cover no-repeat;overflow:clip}
.cta-band .bar{display:block;width:48px;height:3px;background:var(--cyan);border-radius:2px;margin-bottom:22px}
.cta-band h2,.cta-band .catch{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.2vw,62px);line-height:1.4;color:var(--navy);margin-bottom:24px}
.cta-band p{font-size:clamp(16px,1.5vw,21px);line-height:1.9}
.cta-band .btn{margin-top:32px}
.cta-band figure{margin:0}
.cta-band figure img{width:116%;max-width:640px;margin-left:-8%}
.cta-band.sub{border-radius:var(--radius);padding:48px 56px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:linear-gradient(90deg,rgba(236,245,251,.98) 0%,rgba(236,245,251,.92) 46%,rgba(236,245,251,.15) 80%),url(../img/photo-desk.jpg) right center/cover no-repeat}
.cta-band.sub .catch{font-size:clamp(26px,2.8vw,40px)}
.cta-band.sub figure img{width:100%;max-width:360px;margin-left:auto}
.cta-band.sub{padding:56px 56px 56px 64px}
.cta-band.sub p{font-size:16px}
@media (max-width:767px){
  .cta-band,.cta-band.sub{grid-template-columns:minmax(0,1fr);padding:40px 20px 32px;border-radius:28px;background:linear-gradient(180deg,rgba(240,247,252,.97) 0%,rgba(240,247,252,.88) 50%,rgba(240,247,252,.6) 100%),url(../img/photo-office.jpg) 70% bottom/cover no-repeat}
  .cta-band .btn{display:flex;width:100%;margin-top:8px;min-height:64px;font-size:18px}
  .cta-band figure img{max-width:340px;margin:0 auto}
  
}

/* フッター（2-section-footer v2・3-sp-section-footer v2） */
.ft{position:relative;padding:120px 0 64px;background:radial-gradient(ellipse 60% 70% at 15% 30%,rgba(226,240,250,.9),rgba(249,250,251,0) 70%),var(--bg);overflow:clip}
.ft-in{display:grid;grid-template-columns:auto minmax(0,1.6fr) minmax(0,.8fr);grid-template-areas:"logo links loc";gap:40px;align-items:start;position:relative;z-index:2}
.ft-in>.logo{grid-area:logo}.ft-links{grid-area:links}.ft-loc{grid-area:loc}
.ft .logo span{font-size:48px}
.ft .logo img{width:84px;height:84px}
.ft-in>.logo{align-self:center;margin-top:-40px}
.ft-links{padding:36px 48px;border-radius:56px;background:rgba(255,255,255,.62);box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.9)}
.ft-links ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.ft-links a{display:flex;align-items:center;gap:14px;min-height:52px;color:var(--navy);text-decoration:none;font-size:16px;white-space:nowrap;transition:color .16s}
.ft-links a:hover{color:#1d8fd8}
.ft-links .pv{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:block}
.ft-links svg{width:18px;height:18px;color:#3c86e0;flex:none}
.ft-loc{display:flex;align-items:center;gap:16px;padding:22px 26px;border-radius:32px;background:rgba(255,255,255,.7);box-shadow:var(--shadow)}
.ft-loc img{width:56px;flex:none}
.ft-loc small{display:block;font-size:13px;color:var(--navy)}
.ft-loc span{display:block;font-size:17px;color:var(--navy);font-weight:500}
.ft-obj{position:absolute;right:4%;bottom:-10px;width:420px;z-index:1;pointer-events:none}
.copy{position:relative;z-index:2;text-align:center;margin-top:150px;font-size:14px;color:var(--navy);letter-spacing:.06em}
@media (max-width:1199px){.ft-in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"logo loc" "links links"}.ft-obj{width:200px}}
@media (max-width:767px){
  .ft{padding:56px 0 200px}
  .ft-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"logo" "loc" "links";justify-items:center;gap:24px}
  .ft .logo{margin:0}
  .ft .logo span{font-size:36px}
  .ft-links{width:100%;padding:24px 28px;border-radius:40px}
  .ft-links ul{grid-template-columns:minmax(0,1fr)}
  .ft-links a{font-size:17px;min-height:52px}
  .ft-obj{left:50%;right:auto;translate:-50% 0;width:240px}
  .copy{margin-top:28px}
}

/* 下層：頭（2-sub-* の冒頭） */
.sub-hero{position:relative;overflow:clip;background:#f6f8fa}
.sub-hero .hero-bg{background:linear-gradient(90deg,rgba(249,250,251,.97) 0%,rgba(249,250,251,.86) 40%,rgba(249,250,251,.2) 68%,rgba(249,250,251,0) 100%),url(../img/photo-office.jpg) right center/cover no-repeat}
.sub-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr);align-items:center;gap:24px;min-height:440px;padding-block:24px 56px}
.sub-hero .crumbs{grid-column:1 / -1;align-self:start}
.sub-hero .name{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5vw,72px);color:var(--navy);line-height:1.3;margin-bottom:12px}
.sub-hero h1{font-size:clamp(26px,3.3vw,48px);line-height:1.45}
.sub-hero h1.big{font-size:clamp(40px,5.6vw,80px);line-height:1.25}
.sub-hero .lead{margin-top:20px;font-size:17px;line-height:1.9;color:var(--ink);max-width:36em}
.sub-hero .meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;font-size:14px;color:var(--ink)}
.sub-hero .meta b{font-weight:500;color:var(--navy)}
.sub-hero .hero-fig{grid-area:auto}
.sub-hero .hero-fig img{width:100%;max-width:440px;margin-left:auto}
@media (max-width:767px){
  .sub-hero{margin-top:-74px}
  .sub-hero .hero-bg{background:linear-gradient(180deg,rgba(249,250,251,.95) 0%,rgba(249,250,251,.88) 60%,rgba(249,250,251,.5) 100%),url(../img/photo-office.jpg) 70% center/cover no-repeat}
  .sub-hero-in{grid-template-columns:minmax(0,1fr) 34%;min-height:0;padding-block:92px 36px;gap:8px 12px;align-items:start}
  .sub-hero .txt{grid-column:1 / -1}
  .sub-hero .hero-fig{grid-column:2;grid-row:2;margin-top:-8px}
  .sub-hero .crumbs{grid-column:1}
  .sub-hero.has-fig .txt{grid-column:1;grid-row:2 / 4}
  .sub-hero .name{font-size:clamp(28px,8vw,40px)}
  .sub-hero h1{font-size:clamp(22px,6.4vw,32px)}
  .sub-hero h1.big{font-size:clamp(34px,10vw,52px)}
  .sub-hero .lead{font-size:15px}
}
@media (max-width:420px){
  .sub-hero.has-fig .txt{grid-column:1 / -1;grid-row:auto}
  .sub-hero .hero-fig{grid-column:1 / -1;grid-row:auto;width:56%;margin:8px 0 0 auto}
}

/* 下層：こんな会社に（2-sub-service） */
.who{display:grid;grid-template-columns:200px 1px minmax(0,1fr);align-items:center;gap:40px;padding:40px 56px;border-radius:120px;background:linear-gradient(90deg,rgba(226,240,250,.9),rgba(236,245,251,.7))}
.who img{width:140px;margin:0 auto}
.who .rule{width:1px;align-self:stretch;background:#1d6fd0;opacity:.5}
.who p{font-size:17px;line-height:2}
.who p.main{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--navy);line-height:1.8}
@media (max-width:767px){.who{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:24px 20px;border-radius:32px}.who img{width:72px}.who .rule{display:none}.who .txt{grid-column:1 / -1}.who p.main{font-size:19px}}

/* 困りごと（雲の吹き出し） */
.clouds{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.clouds li{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1.08;padding:12% 14% 26%;background:no-repeat center/contain url(../img/cloud.png);text-align:center;font-weight:500;font-size:clamp(15px,1.4vw,19px);color:var(--navy);line-height:1.7;word-break:auto-phrase}
@media (max-width:767px){.clouds{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.clouds li{font-size:15px}}

/* どう解くか */
.how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.how .main{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--navy);line-height:1.9;margin-bottom:20px}
.how-fig{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:20px}
.how-fig img{width:100%;max-width:260px}
.pills{list-style:none;display:grid;gap:14px}
.pills li,.pills a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:linear-gradient(90deg,#7f8ff0,#5fb6f0);color:#fff;font-weight:500;font-size:16px;white-space:nowrap;box-shadow:0 8px 18px rgba(80,120,220,.2);text-decoration:none}
.pills li:has(a){display:block;padding:0;background:none;box-shadow:none;min-height:0}
.pills li:has(a)::before{display:none}
.pills a{display:block;padding:12px 22px;line-height:1.5;white-space:normal}
.pills li:nth-child(3):not(:has(a)),.pills li:nth-child(4):not(:has(a)),.pills li:nth-child(3) a,.pills li:nth-child(4) a{background:linear-gradient(90deg,#5ed0ef,#43c4e8)}
.pills li::before{content:"";width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.8);flex:none}
@media (max-width:767px){.how{grid-template-columns:minmax(0,1fr);gap:24px}.how-fig{grid-template-columns:36% minmax(0,1fr)}.pills li,.pills a{font-size:15px;padding:8px 16px;white-space:normal;min-height:48px}}

/* 進め方 4段 */
.quad{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
.quad>li{position:relative;padding:22px 22px 26px;border-radius:20px;background:#fff;box-shadow:var(--shadow);text-align:center}
.quad .n{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#52d4f3,#2e9be6);color:#fff;font-weight:700;font-size:20px}
.quad img{width:150px;margin:6px auto 12px}
.quad h3{font-size:18px;font-weight:600;line-height:1.6;margin-bottom:10px}
.quad p{font-size:14px;text-align:left;color:var(--ink);line-height:1.8}
.quad>li+li::before{content:"";position:absolute;left:-29px;top:96px;width:22px;height:22px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323c3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E")}
@media (max-width:1199px) and (min-width:768px){.quad{grid-template-columns:repeat(2,minmax(0,1fr))}.quad>li:nth-child(3)::before{display:none}}
@media (max-width:767px){
  .quad{grid-template-columns:minmax(0,1fr);gap:36px}
  .quad>li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;align-items:center;text-align:left;padding:18px 18px 20px;background:linear-gradient(90deg,#eef6fc,#f6fafd)}
  .quad img{width:96px;margin:0;grid-row:1 / 3}
  .quad h3{font-size:18px;margin:0}
  .quad p{grid-column:1 / -1;margin-top:8px}
  .quad>li+li::before{left:50%;top:-30px;translate:-50% 0;rotate:90deg}
}

/* 関係する事業（横長のカード） */
.rel{list-style:none;display:grid;gap:20px}
.rel-card{display:grid;grid-template-columns:200px minmax(0,1fr) auto;align-items:center;gap:32px;padding:20px 40px 20px 24px;border-radius:20px;background:linear-gradient(90deg,#eef6fc,#f6fafd);box-shadow:inset 0 0 0 1px rgba(217,231,242,.8);text-decoration:none;transition:box-shadow .2s}
.rel-card:hover{box-shadow:0 12px 28px rgba(38,86,160,.12)}
.rel-card img{width:150px;margin:0 auto}
.rel-card small{display:block;font-size:13px;color:#2bb7e6;letter-spacing:.06em}
.rel-card strong{display:block;font-family:var(--serif);font-weight:700;font-size:22px;color:var(--navy);line-height:1.5}
.rel-card p{font-size:14px;color:var(--muted);margin-top:6px}
@media (max-width:767px){.rel-card{grid-template-columns:84px minmax(0,1fr);gap:8px 16px;padding:18px}.rel-card img{width:84px}.rel-card .btn{grid-column:1 / -1;justify-self:start}.rel-card strong{font-size:19px}}

/* 本文（記事・個人情報・メッセージ） */
.prose{max-width:820px;margin-inline:auto}
.prose h2{display:flex;align-items:baseline;gap:16px;font-size:clamp(22px,2.4vw,28px);margin:56px 0 20px;scroll-margin-top:100px}
.prose h2 .no{font-family:var(--sans);font-weight:500;font-size:clamp(26px,3vw,36px);color:#1f9be0;flex:none}
.prose h3{font-size:20px;margin:32px 0 12px}
.prose p,.prose li{font-size:16px;line-height:2}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.tbl-wrap{overflow-x:auto;margin:24px 0 28px;border-radius:16px;box-shadow:var(--shadow);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
.tbl th,.tbl td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{background:linear-gradient(180deg,#e3f2fb,#d9edf9);color:var(--navy);font-weight:500;white-space:nowrap}
.tbl tbody th{color:var(--navy);font-weight:500;white-space:nowrap}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tbl.pick td:last-child{min-width:15em}
.tbl a{color:#1d6fd0;display:inline-block;padding-block:11px;line-height:1.6;min-height:46px}
@media (max-width:767px){.tbl{font-size:14px;min-width:560px}.tbl th,.tbl td{padding:12px}}

/* 記事（2-sub-article） */
.conclusion{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:32px;padding:36px 48px 36px 32px;border-radius:40px;background:linear-gradient(90deg,rgba(226,240,250,.95),rgba(236,245,251,.75))}
.conclusion img{width:200px}
.conclusion .lbl{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--navy);margin-bottom:12px;line-height:1.6}
.conclusion p{font-size:16px;line-height:2}
.toc{max-width:820px;margin-inline:auto;border-radius:16px;background:#fff;box-shadow:var(--shadow);padding:8px 24px}
.toc ol{list-style:none}
.toc li+li{border-top:1px solid var(--line)}
.toc a{display:flex;gap:20px;align-items:center;min-height:52px;color:var(--navy);text-decoration:none;font-size:15px}
.toc a>span:first-child{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#e3f3fb;color:#1f8fd8;font-size:13px;font-weight:700}
.rel3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rel3 a{display:flex;flex-direction:column;height:100%;padding:24px;border-radius:20px;background:#fff;box-shadow:var(--shadow);text-decoration:none;transition:box-shadow .2s}
.rel3 a:hover{box-shadow:0 14px 30px rgba(38,86,160,.14)}
.rel3 img{width:140px;margin:0 auto 12px}
.rel3 strong{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--navy);line-height:1.6}
.rel3 p{font-size:14px;color:var(--muted);margin:8px 0 12px}
.rel3 .arrow{margin-top:auto}
.other2{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.other2 a{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:center;padding:16px;border-radius:18px;background:#fff;box-shadow:var(--shadow);text-decoration:none;transition:box-shadow .2s}
.other2 a:hover{box-shadow:0 14px 30px rgba(38,86,160,.14)}
.other2 .ph{position:relative;aspect-ratio:4/3;border-radius:12px;background:#eef3f8 center/cover no-repeat;overflow:clip}
.other2 .ph img{position:absolute;right:4%;bottom:4%;width:62%}
.other2 strong{display:block;font-family:var(--serif);font-weight:600;font-size:17px;color:var(--navy);line-height:1.6}
.other2 p{font-size:13px;color:var(--muted);margin-top:6px}
@media (max-width:1199px) and (min-width:768px){.rel3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.other2 a{grid-template-columns:120px minmax(0,1fr)}}
@media (max-width:767px){
  .conclusion{grid-template-columns:96px minmax(0,1fr);gap:8px 16px;padding:22px 20px;border-radius:28px}
  .conclusion img{width:96px}
  .conclusion .txt{grid-column:1 / -1}
  .conclusion .lbl{grid-column:2;grid-row:1;font-size:18px;margin:0}
  .rel3{grid-template-columns:minmax(0,1fr)}
  .rel3 a{display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 16px;padding:18px}
  .rel3 img{width:84px;margin:0;grid-row:1 / 4}
  .other2{grid-template-columns:minmax(0,1fr)}
  .other2 a{grid-template-columns:110px minmax(0,1fr);gap:14px}
}

/* 一覧（2-sub-list） */
.filter{list-style:none;display:flex;flex-wrap:wrap;gap:16px}
.filter a{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;min-width:180px;padding:0 24px;border-radius:999px;background:#fff;box-shadow:var(--shadow);color:var(--navy);font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .16s,color .16s}
.filter a.on{background:linear-gradient(90deg,#0c3a91,#1b4fb3);color:#fff}
.filter svg{width:14px;height:14px}
.list-cards{list-style:none;display:grid;gap:40px;max-width:900px;margin-inline:auto}
.list-card{display:block;padding:20px 20px 36px;border-radius:20px;background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px rgba(217,231,242,.6);text-decoration:none;transition:box-shadow .2s}
.list-card:hover{box-shadow:0 16px 36px rgba(38,86,160,.14)}
.list-card .ph{position:relative;aspect-ratio:3.8/1;border-radius:14px;background:#eef3f8 center/cover no-repeat;overflow:clip;margin-bottom:20px}
.list-card .ph img{position:absolute;left:50%;bottom:4%;translate:-50% 0;height:92%;width:auto;transition:scale .4s}
.list-card .body{padding:0 24px}
.list-card h2{font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1.6;margin-bottom:14px}
.list-card p{font-size:15px;color:var(--ink);line-height:1.9}
.list-card .btn{margin-top:20px}
@media (max-width:767px){.filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.filter a{min-width:0;padding:0 14px}.list-card .body{padding:0 6px}.list-card .ph{aspect-ratio:2.6/1}}

/* 会社（2-sub-company） */
.co-tbl{border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:clip}
.co-tbl table{width:100%;border-collapse:collapse}
.co-tbl th{width:24%;padding:24px 28px;background:linear-gradient(90deg,#eef6fc,#f4f9fd);color:var(--navy);font-weight:500;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);white-space:nowrap}
.co-tbl td{padding:24px 28px;border-bottom:1px solid var(--line);font-size:16px}
.co-tbl tr:last-child th,.co-tbl tr:last-child td{border-bottom:0}
.co-tbl th img{display:none}
.dots{list-style:none;margin-top:10px;display:grid;gap:6px}
.dots li{display:flex;align-items:center;gap:12px}
.dots li::before{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9be8f7,#5fc2ef);flex:none}
.dots li:nth-child(even)::before{background:radial-gradient(circle at 35% 35%,#c5c0f6,#8e9bec)}
.dots a{color:var(--navy);text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
@media (max-width:767px){
  .co-tbl table,.co-tbl tbody,.co-tbl tr,.co-tbl th,.co-tbl td{display:block;width:auto}
  .co-tbl tr{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 14px;padding:18px 18px;border-bottom:1px solid var(--line)}
  .co-tbl tr:last-child{border-bottom:0}
  .co-tbl th{grid-column:2;padding:0;background:none;border:0;font-size:14px;display:flex;align-items:center}
  .co-tbl th img{display:block;position:absolute;width:52px}
  .co-tbl td{grid-column:2;padding:2px 0 0;border:0;font-size:17px;color:var(--navy)}
  .co-tbl tr{position:relative}
  .co-tbl th img{left:16px;top:18px}
}
.dia{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.dia>li{grid-column:span 2}
.dia>li:nth-child(4){grid-column:2 / 4}
.dia>li:nth-child(5){grid-column:4 / 6}
.dia a{display:flex;flex-direction:column;align-items:center;height:100%;padding:28px 24px;border-radius:48px;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(239,247,252,.85));box-shadow:var(--shadow);text-align:center;text-decoration:none;transition:box-shadow .2s}
.dia a:hover{box-shadow:0 14px 30px rgba(38,86,160,.14)}
.dia img{width:110px;margin-bottom:10px}
.dia strong{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--navy);line-height:1.6}
.dia p{font-size:14px;color:var(--muted);margin-top:8px;text-align:left}
@media (max-width:1199px) and (min-width:768px){.dia{grid-template-columns:repeat(2,minmax(0,1fr))}.dia>li,.dia>li:nth-child(4),.dia>li:nth-child(5){grid-column:auto}.dia>li:nth-child(5){grid-column:1 / -1}}
@media (max-width:767px){.dia{grid-template-columns:minmax(0,1fr)}.dia>li,.dia>li:nth-child(4),.dia>li:nth-child(5){grid-column:auto}.dia a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 14px;text-align:left;padding:18px 20px;border-radius:28px}.dia img{width:72px;grid-row:1 / 3;margin:0}}
.map{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:clip}
.map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.map .addr{padding:32px 36px}
.map .addr small{display:block;color:#2bb7e6;font-size:13px;letter-spacing:.06em}
.map .addr p{font-size:17px;color:var(--navy);margin-top:6px}
@media (max-width:767px){.map{grid-template-columns:minmax(0,1fr)}.map iframe{min-height:240px}.map .addr{padding:20px}}

/* 流れ（2-sub-flow） */
.vflow{list-style:none;position:relative;display:grid;gap:48px}
.vflow::before{content:"";position:absolute;left:46px;top:40px;bottom:40px;width:2px;background:linear-gradient(180deg,#7fe1f6,#b6b3f3,#7fe1f6)}
.vflow>li{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) 260px;gap:12px 32px;align-items:start}
.vflow .n{position:relative;z-index:1;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:linear-gradient(160deg,#58dbf6,#5d8ee8);color:#fff;font-weight:700;font-size:32px;box-shadow:0 10px 24px rgba(60,140,230,.25)}
.vflow>li:nth-child(even) .n{background:linear-gradient(160deg,#9aa4f2,#6f86e6)}
.vflow h3{font-size:clamp(24px,2.6vw,34px);margin:16px 0 14px}
.vflow .desc{font-size:16px}
.vflow .ill{grid-column:3;grid-row:1 / 3;width:100%;max-width:240px;margin-left:auto}
.vflow .boxes{grid-column:2 / 4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vflow .box{padding:20px 24px;border-radius:16px;background:linear-gradient(160deg,rgba(236,245,252,.95),rgba(246,250,253,.9));box-shadow:inset 0 0 0 1px rgba(217,231,242,.8)}
.vflow .box h4{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--navy);margin-bottom:8px}
.vflow .box h4 svg{width:22px;height:22px;color:#2d8be2;flex:none}
.vflow .box ul{list-style:none}
.vflow .box li{font-size:15px;line-height:1.9}
.vflow .box li::before{content:"・";color:#2d8be2}
@media (max-width:767px){
  .vflow::before{left:22px}
  .vflow>li{grid-template-columns:52px minmax(0,1fr) 30%;gap:8px 12px}
  .vflow .n{width:52px;height:52px;font-size:20px}
  .vflow h3{margin:8px 0 6px;font-size:24px}
  .vflow .desc{grid-column:2 / 4;font-size:15px}
  .vflow .ill{grid-column:3;grid-row:1}
  .vflow .boxes{grid-column:2 / 4;grid-template-columns:minmax(0,1fr);gap:12px}
}

/* よくある質問のページ（2-sub-faq） */
.cats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cats a{display:flex;align-items:center;gap:16px;min-height:100px;padding:16px 64px 16px 28px;background:var(--sky);clip-path:polygon(0 12px,12px 0,calc(100% - 40px) 0,100% 50%,calc(100% - 40px) 100%,12px 100%,0 calc(100% - 12px));text-decoration:none;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--navy);transition:background-color .16s}
.cats li:nth-child(2) a{background:var(--lav)}
.cats a:hover{background:#dff0fa}
.cats img{width:44px;flex:none}
.cat-block{padding:48px 48px 40px;border-radius:64px;background:linear-gradient(160deg,rgba(226,240,250,.9),rgba(240,247,252,.7));scroll-margin-top:100px}
.cat-block+.cat-block{margin-top:48px}
.cat-hd{display:grid;grid-template-columns:minmax(0,1fr) 200px;align-items:center;margin-bottom:16px}
.cat-hd img{width:180px;margin-left:auto}
.cat-block .qa summary{font-size:17px;min-height:60px;font-family:var(--sans);font-weight:500}
@media (max-width:767px){
  .cats{grid-template-columns:minmax(0,1fr);gap:12px}
  .cats a{min-height:76px;clip-path:none;border-radius:16px;padding:12px 20px}
  .cat-block{padding:28px 16px 24px;border-radius:32px}
  .cat-hd{grid-template-columns:minmax(0,1fr) 88px}
  .cat-hd img{width:88px}
  .cat-hd .sec-h{font-size:20px;gap:10px}
  .cat-hd .sec-h::before{width:24px}
  .cat-block .qa summary{font-size:16px;padding:14px 16px;min-height:56px}
}

/* お問い合わせのフォーム（2-sub-contact） */
.form-card{max-width:900px;margin-inline:auto;padding:48px 56px;border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.fld{margin-bottom:36px;border:0;padding:0;min-width:0}
.fld>label,.fld>legend{display:flex;align-items:center;gap:12px;font-weight:500;font-size:16px;color:var(--navy);margin-bottom:12px;padding:0}
.fld>label::before,.fld>legend::before{content:"";width:22px;height:2px;background:var(--cyan)}
.req{font-size:12px;color:#fff;background:#2b6fd0;border-radius:4px;padding:2px 8px;line-height:1.6}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-card input[type=text],.form-card input[type=email],.form-card textarea{width:100%;min-height:56px;padding:14px 18px;border:1px solid #cfe0ee;border-radius:12px;background:#f8fbfe;font:inherit;font-size:16px;color:var(--ink)}
.form-card textarea{min-height:180px;resize:vertical}
.form-card input::placeholder,.form-card textarea::placeholder{color:#7a8aa8}
.form-card input:focus,.form-card textarea:focus{outline:2px solid #5fb6f0;outline-offset:1px}
.radios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.radios label{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px;border:1px solid #cfe0ee;border-radius:12px;background:#f8fbfe;cursor:pointer}
.radios input{width:20px;height:20px;accent-color:#1b4fb3;margin:0}
.agree{padding:22px 26px;border-radius:14px;background:linear-gradient(160deg,#eef6fc,#f6fafd)}
.agree label{display:flex;align-items:center;gap:14px;min-height:44px;font-size:16px;color:var(--navy);cursor:pointer}
.agree input{width:22px;height:22px;accent-color:#1b4fb3;margin:0;flex:none}
.agree p{font-size:14px;color:var(--muted);margin-top:8px}
.agree a{color:#1d6fd0;display:inline-flex;min-height:44px;align-items:center}
.submit{text-align:center;margin-top:8px}
.submit .btn{border:0;cursor:pointer;min-width:240px;font-family:inherit}
.hp{position:absolute;left:-9999px}
@media (max-width:767px){.form-card{padding:28px 18px}.radios{grid-template-columns:minmax(0,1fr)}.row2{grid-template-columns:minmax(0,1fr)}}

/* お問い合わせの前置き */
.form-guide{max-width:900px;margin:0 auto 32px;padding:28px 32px;border-radius:20px;background:linear-gradient(160deg,rgba(236,245,252,.9),rgba(246,250,253,.8))}
.form-guide .gh{font-weight:500;color:var(--navy);margin:16px 0 4px}
.form-guide ul{list-style:none;display:grid;gap:2px}
.form-guide li::before{content:"・";color:#2d8be2}
.form-guide a{color:#1d6fd0;display:inline-flex;min-height:44px;align-items:center}
@media (max-width:767px){.form-guide{padding:20px 18px}}

/* 採用（2-sub-recruit） */
.think{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center}
.think .catch{font-family:var(--serif);font-weight:700;font-size:clamp(30px,3.6vw,50px);color:var(--navy);line-height:1.45;margin-bottom:28px}
.think img{width:100%;max-width:360px;margin-left:auto}
.circles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px}
.circles li{text-align:center}
.circles .c{display:grid;place-items:center;width:200px;aspect-ratio:1;margin:0 auto 16px;border-radius:50%;background:radial-gradient(circle,#f3f9fd 0%,#e6f2fb 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),var(--shadow)}
.circles .c img{width:84px}
.circles h3{font-size:22px;font-weight:600;margin-bottom:10px}
.circles p{font-size:15px;text-align:left;line-height:1.9}
.soon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;padding:56px 64px;border-radius:120px;background:linear-gradient(90deg,rgba(226,240,250,.95) 0%,rgba(226,240,250,.85) 45%,rgba(226,240,250,.2) 80%),url(../img/photo-desk.jpg) right center/cover no-repeat}
.soon .catch{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3vw,40px);color:var(--navy);line-height:1.5;margin-bottom:20px}
.closing{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:24px;padding-block:48px}
.closing p{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.6vw,34px);color:var(--navy);line-height:1.7}
.closing img{width:280px;margin-left:auto}
@media (max-width:767px){
  .think{grid-template-columns:minmax(0,1fr)}
  .think img{max-width:220px;margin:0 auto}
  .circles{grid-template-columns:minmax(0,1fr);gap:16px}
  .circles li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;align-items:center;text-align:left;padding:16px 18px;border-radius:40px;background:linear-gradient(90deg,#eef6fc,#f6fafd)}
  .circles .c{width:96px;margin:0;grid-row:1 / 3}
  .circles .c img{width:48px}
  .circles h3{margin:0}
  .circles p{grid-column:2}
  .soon{grid-template-columns:minmax(0,1fr);padding:32px 22px;border-radius:32px;background:linear-gradient(180deg,rgba(226,240,250,.96),rgba(226,240,250,.75)),url(../img/photo-desk.jpg) 70% center/cover no-repeat}
  .closing{grid-template-columns:minmax(0,1fr)}
  .closing img{width:200px;margin:0 auto}
}

/* セルフチェック */
.chk-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.chk-card{padding:28px 32px;border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.chk-card .hd2{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.chk-card .hd2 img{width:84px;flex:none}
.chk-card h3{font-size:22px}
.chk-card ul{list-style:none}
.chk-card li{position:relative;padding:10px 0 10px 38px;border-top:1px dashed var(--line);font-size:16px;line-height:1.8}
.chk-card li::before{content:"";position:absolute;left:4px;top:15px;width:20px;height:20px;border:2px solid #4aa6e8;border-radius:5px;background:#fff}
@media (max-width:1199px){.chk-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.chk-card{padding:22px 18px}.chk-card .hd2 img{width:64px}}

/* 相談の例 */
.case{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;padding:40px 48px;border-radius:32px;background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(239,247,252,.9));box-shadow:var(--shadow)}
.case+.case{margin-top:32px}
.case img{width:180px}
.case .no{font-family:var(--sans);font-weight:700;font-size:44px;line-height:1;background:linear-gradient(180deg,#3fd8f5,#2b8ee0);-webkit-background-clip:text;background-clip:text;color:transparent}
.case h3{font-size:clamp(22px,2.4vw,28px);margin:10px 0 16px}
.case h4{font-family:var(--sans);font-weight:500;font-size:15px;color:#1f8fd8;margin:16px 0 6px;letter-spacing:.06em}
.case ul{padding-left:1.3em}
.case li{font-size:16px;line-height:1.9}
.case .btn{margin-top:20px}
@media (max-width:767px){.case{grid-template-columns:minmax(0,1fr);gap:12px;padding:24px 20px}.case img{width:110px}}

/* 印刷（セルフチェック） */
@media print{.hd,.ft,.sp-menu,.cta-band,.btn,.crumbs{display:none!important}body{background:#fff}.chk-card{box-shadow:none;border:1px solid #ccd}}

/* 動き（スキル 最初に読む 4h・絶対ゲート19。登場は view() だけ・0.3から・transform を書かない） */
@media screen and (prefers-reduced-motion:no-preference){
  .svc-card:hover,.col-card:hover,.rel-card:hover,.rel3 a:hover,.other2 a:hover,.list-card:hover,.dia a:hover{translate:0 -4px}
  .svc-card,.col-card,.rel-card,.rel3 a,.other2 a,.list-card,.dia a{transition:translate .2s,box-shadow .2s}
  .svc-card:hover .obj,.col-card:hover .thumb,.list-card:hover .ph img{scale:1.04}
  .btn svg,.arrow,.ft-links svg,.filter svg{transition:translate .16s}
  .btn:hover svg,a:hover .arrow,.ft-links a:hover svg,.filter a:hover svg{translate:4px 0}
  .qa details[open] .a{animation:qa-open .22s ease-out}
  .sp-menu:not([hidden]) nav{animation:qa-open .22s ease-out}
  @keyframes qa-open{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
  @supports (animation-timeline:view()){
    main section :is(li,article,figure,details,.rv):not(:is(table,form,.crumbs,.prose,.hero,.no-rv) *):not(.hero-fig){animation:rv-rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    main section :is(li,figure,details,.rv):nth-child(2):not(:is(table,form,.crumbs,.prose,.hero,.no-rv) *){animation-range:entry 4% entry 100%}
    main section :is(li,figure,details,.rv):nth-child(3):not(:is(table,form,.crumbs,.prose,.hero,.no-rv) *){animation-range:entry 8% entry 100%}
    main section :is(li,figure,details,.rv):nth-child(n+4):not(:is(table,form,.crumbs,.prose,.hero,.no-rv) *){animation-range:entry 12% entry 100%}
    .sec-h::before,.eyebrow::before,.cta-band .bar{animation:line-grow linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .hero .eyebrow::before{animation:none}
    main section :is(li,details,.rv):focus-within{animation:none}
    @keyframes rv-rise{from{opacity:.3;translate:0 16px}to{opacity:1;translate:0 0}}
    @keyframes line-grow{from{scale:0 1}to{scale:1 1}}
  }
}

/* スマホ：拡大した PC の値を戻す（3-sp-section-* の絵に合わせる） */
@media (max-width:767px){
  .worries li img{height:auto;max-width:none}
  .worries li p{font-size:19px}
  .flow5 img{height:auto;max-width:none}
  .flow5 .tile{font-size:24px}
  .svc-card .num{font-size:52px}
  .msg-card .catch{font-size:clamp(24px,7.8vw,40px)}
  .cta-band h2,.cta-band .catch{font-size:clamp(28px,9vw,40px)}
  .cta-band p{font-size:16px}
  .hero-cta .btn{min-height:64px}
  .chev .num{font-size:60px}
  .chev h3{font-size:26px}
}

/* 記事の結論の箱・写真の枠（2-sub-article・2-sub-list） */
.conclusion img{grid-row:1 / 3}
.conclusion .lbl{grid-column:2;align-self:end;margin:0}
.conclusion .txt{grid-column:2;align-self:start}
.list-card .ph,.other2 .ph{display:block}
@media (max-width:767px){
  .conclusion img{grid-row:1}
  .conclusion .lbl{grid-column:2;grid-row:1;align-self:center}
  .conclusion .txt{grid-column:1 / -1;grid-row:2}
}

/* スマホ：流れの段（3-sp-sub-flow v2＝番号と見出しの横に絵、説明と箱は全幅）・こんな会社に（3-sp-sub-service v2＝絵の右に字） */
@media (max-width:767px){
  .vflow>li{grid-template-columns:52px minmax(0,1fr);position:relative}
  .vflow>li>div:not(.boxes){grid-column:2}
  .vflow h3{padding-right:34%;min-height:72px}
  .vflow .ill{position:absolute;right:0;top:0;width:min(30vw,120px);max-width:none;height:auto}
  .vflow .box li{word-break:normal}
  .vflow .boxes{grid-column:2}
  .who{grid-template-columns:64px minmax(0,1fr);align-items:start}
  .who img{width:64px}
  .who .txt{grid-column:2}
}
@media (max-width:767px){.hero .hero-fig img{width:100%;max-width:420px;margin:24px auto 0}}

/* PC で拡大した値をスマホ・タブレットで戻す（PC の規則より後ろに置く） */
@media (max-width:767px){
  .hero-fig img{width:100%;margin:24px auto 0}
  .worries ul{margin-inline:0}
  .svc-card .obj{max-width:none}
  .msg-card figure img{width:100%;margin:0}
  .faq-top .obj{width:52%;margin:-24px -8px 0 0}
  .cta-band figure img{width:100%;margin:0 auto}
  .col-head img{margin:0 0 0 auto}
  .ft-in>.logo{margin-top:0}
  .ft-obj{width:260px;bottom:0}
  .copy{margin-top:28px}
  .flow5 .tile::before{display:none}
  .trio>li+li .fig::before{display:none}
}
@media (max-width:1199px) and (min-width:768px){.hero-fig img{width:100%;margin:0}.ft-obj{width:260px}.copy{margin-top:120px}}

/* ===== 第1周の直し（work/review/r0.md・測った値は work/review/r0-reply.md） ===== */
/* 地の流れる曲線（GPT の素材 waves.png）と不定形のガラスの塊（blob-*.png） */
.curve::after{border:0;border-radius:0;rotate:0deg;left:-4%;right:-4%;top:auto;bottom:0;height:min(42%,360px);background:url(../img/waves.png) center bottom/100% 100% no-repeat;opacity:.9}
.curve.c2::after{top:0;bottom:auto;scale:-1 1}
.waved{background:url(../img/waves.png) center 70%/100% auto no-repeat}
.blobbed{background:url(../img/blob-wide.png) center/100% 100% no-repeat;padding:40px 48px}
.co-tbl.blobbed{overflow:visible;box-shadow:none}
.co-tbl.blobbed table{background:rgba(255,255,255,.88);border-radius:20px;box-shadow:var(--shadow);overflow:clip}
@media (max-width:767px){.blobbed{padding:20px 12px}}

/* 悩み・流れ：絵の後ろの塊（PC）・スマホの札の地 */
.worries li img,.flow5 img{background:url(../img/blob-1.png) center 70%/92% auto no-repeat}
.worries li:nth-child(2n) img,.flow5 li:nth-child(2n) img{background-image:url(../img/blob-2.png)}
.worries li:nth-child(3n) img,.flow5 li:nth-child(3n) img{background-image:url(../img/blob-3.png)}
.worries li p{font-weight:700}
@media (max-width:767px){
  .worries li img,.flow5 img{background:none}
  .worries li{grid-template-columns:120px minmax(0,1fr);padding:8px 20px 8px 8px;background:url(../img/blob-wide.png) center/100% 100% no-repeat;box-shadow:none}
  .worries li img{max-width:120px}
  .worries li p{font-size:19px}
  .flow5>li{background:url(../img/blob-wide.png) center/100% 100% no-repeat;box-shadow:none;padding:26px 20px 26px 30px}
  .flow5 .tile{font-size:22px;white-space:nowrap}
  .flow5>li+li::before,.trio>li+li::before,.quad>li+li::before{width:30px;height:30px;top:-34px}
}

/* 事業カード：立体を縁からはみ出させる・ガラスの縁・一体プランの帯を低く */
.svc-card{overflow:visible;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(236,245,252,.6));box-shadow:0 10px 30px rgba(38,86,160,.08),inset 0 0 0 1px rgba(255,255,255,.95)}
.svc-card .obj{right:-20px;bottom:auto;top:-10px;width:44%}
.svc-card h3,.svc-card p{max-width:58%}
.svc-band{min-height:0;padding:20px 48px;border-radius:999px}
.svc-band strong{font-size:clamp(20px,2.4vw,34px)}
.svc-band img{width:170px;margin:-30px 0}
@media (max-width:767px){
  .svc-card{padding:16px 18px 18px}
  .svc-card .num{font-size:40px;margin-bottom:4px}
  .svc-card h3{font-size:19px;max-width:58%}
  .svc-card p{font-size:14px;max-width:58%;margin-top:6px}
  .svc-card .obj{width:42%;top:50%;translate:0 -50%;right:-6px}
  .svc-card .more{margin-top:10px;min-height:44px;font-size:13px;padding:0 16px 0 18px}
  .svc-band{padding:14px 18px}
  .svc-band strong{font-size:18px}
  .svc-band .eyebrow{font-size:13px}
  .svc-band img{width:72px;margin:0}
}

/* やり方：矢印を大きく・番号と題を大きく */
.trio>li+li .fig::before{width:40px;height:40px;left:-36px}
.trio>li+li::before{width:30px;height:30px;left:-29px}
.chev .num{font-size:80px}
.chev h3{font-size:clamp(22px,2.4vw,34px)}
@media (max-width:767px){
  .trio .fig{width:40%;top:18px;right:34px}
  .chev h3{max-width:58%}
  .chev p{max-width:100%}
  .chev .num{font-size:60px}
}

/* 流れの札を大きく */
.flow5 .tile{min-height:132px;font-size:clamp(17px,1.95vw,28px)}

/* 代表メッセージ：軌道の線・字を大きく・署名は面で置く */
.msg-card{grid-template-areas:"t f" "s f"}
.msg-card .txt{grid-area:t}.msg-card figure{grid-area:f;position:relative}.msg-card .sign{grid-area:s;margin-top:0}
.msg-card figure::before{content:"";position:absolute;inset:18% -10% 22% -18%;background:url(../img/ribbon.png) center/100% 100% no-repeat;rotate:-8deg;pointer-events:none}
.msg-card .body p{font-size:clamp(17px,1.4vw,20px)}
.msg-card .catch{font-size:clamp(32px,3.9vw,56px)}
@media (max-width:767px){
  .message .frame{padding-inline:0}
  .msg-card{grid-template-areas:"t" "f" "s";border-radius:0;padding:40px var(--gutter) 36px}
}

/* コラム（トップ）：台なしの絵・題と絵が重ならないよう下に余白 */
.col-card{padding-bottom:190px}
.col-card .thumb{width:46%;max-width:200px;bottom:14px}
.col-card .go{position:absolute;left:34px;bottom:28px}
@media (max-width:767px){
  .col-card{padding-bottom:24px}
  .col-head .lead{font-size:18px}
  .col-head .sec-h.lg{font-size:40px}
}

/* よくある質問（トップ）：印を太く・スマホは見出しの右に立体 */
.qa summary svg{stroke-width:2.6}
@media (max-width:767px){
  .faq-top .obj{width:46%;max-width:200px;margin:0 -6px 0 0;align-self:start}
  .faq-top .sec-h{min-height:150px;align-items:center;padding-right:44%;padding-bottom:0}
  .faq-top .sec-h::before{margin:0}
  .qa .ic{background:#fff;box-shadow:0 4px 12px rgba(38,86,160,.12)}
}

/* お問い合わせの帯：GPT の塊の形で抜く・スマホは全面・絵の後ろにボタン */
.cta-band{grid-template-areas:"t f" "b f";-webkit-mask:url(../img/blob-mask.png) center/100% 100% no-repeat;mask:url(../img/blob-mask.png) center/100% 100% no-repeat;border-radius:0;padding:110px 80px 110px 110px}
.cta-band .cta-txt{grid-area:t;align-self:end}.cta-band figure{grid-area:f}.cta-band .cta-btn{grid-area:b;align-self:start;margin:0}
.cta-band .btn{margin-top:28px;min-height:60px;font-size:17px}
/* 下層の帯は写真なしの細い帯＋立方体 */
.cta-band.sub{-webkit-mask:none;mask:none;border-radius:999px;padding:36px 72px;background:linear-gradient(90deg,rgba(226,240,250,.95),rgba(240,247,252,.7));grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);grid-template-areas:"t f"}
.cta-band.sub .cta-txt{display:flex;flex-direction:column;align-items:flex-start;align-self:center}
.cta-band.sub .catch{font-size:clamp(24px,2.6vw,38px);margin-bottom:10px}
.cta-band.sub .btn{margin-top:18px}
.cta-band.sub figure img{max-width:240px;margin:-50px 0 -50px auto}
@media (max-width:767px){
  .contact .frame{padding-inline:0}
  .cta-band{-webkit-mask:none;mask:none;border-radius:0;grid-template-areas:"t" "f" "b";padding:44px var(--gutter) 40px}
  .cta-band .cta-btn{text-align:center}
  .cta-band .btn{width:72%;margin:16px auto 0}
  .cta-band.sub{border-radius:28px;grid-template-areas:"t" "f";padding:28px 22px}
  .cta-band.sub figure img{max-width:150px;margin:0 auto}
  .cta-band.sub .btn{width:100%}
}

/* フッター：曲線・所在地を縦中央・立体を小さく */
.ft::before{content:"";position:absolute;left:-5%;right:-5%;top:38%;height:260px;background:url(../img/waves.png) center/100% 100% no-repeat;opacity:.9;pointer-events:none}
.ft-in{align-items:center}
.ft-in>.logo{margin-top:0}
.ft-links{background:rgba(255,255,255,.55);box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.95)}
.ft-in{background:url(../img/blob-wide.png) 45% center/70% 160% no-repeat}
.ft-obj{width:340px}
@media (max-width:767px){
  .ft .logo span{font-size:28px}.ft .logo img{width:56px;height:56px}
  .ft-links{background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.95);width:calc(100% - 24px)}
  .ft-obj{width:210px}
}

/* スマホのボタンは幅いっぱいにせず中央（3-sp-section-* の絵） */
@media (max-width:767px){
  .btn-row .btn,.hero-cta .btn{width:auto;min-width:240px;max-width:300px}
  .hero-cta .btn{min-height:56px;font-size:16px}
}

/* メニュー：×は素の印・項目を少し小さく */
.menu-close{background:transparent;box-shadow:none}
.sp-menu li a{font-size:20px;min-height:50px}

/* ===== 下層の字の比（2-sub-* を幅1024＝列約900px として 1440 の列 1280px に換算。本文は決まりの16〜18px） ===== */
.sub-hero-in{min-height:520px}
.sub-hero .name{font-size:clamp(36px,6.4vw,96px);line-height:1.2}
.sub-hero h1{font-size:clamp(26px,4.4vw,64px);line-height:1.35}
.sub-hero h1.big{font-size:clamp(44px,7vw,104px)}
.sub-hero h1.art{font-size:clamp(30px,4.2vw,60px)}
.sub-hero .lead{font-size:clamp(16px,1.5vw,21px)}
.sub-hero .meta{font-size:15px}
.sub-hero .hero-fig img{max-width:520px}
.who{padding:48px 72px}
.who p{font-size:17px}
.who p.main{font-size:clamp(20px,2vw,28px)}
.who img{width:170px}
.how p{font-size:17px;line-height:2}
.how .main{font-size:clamp(20px,1.9vw,27px)}
.clouds li{background-image:var(--cloud,url(../img/cloud-1.png));padding:8% 16% 16%;font-size:clamp(16px,1.6vw,22px);font-weight:500}
.quad img{width:190px}
.quad h3{font-size:20px}
.quad p{font-size:15px}
.rel-card{padding:28px 48px 28px 28px;grid-template-columns:220px minmax(0,1fr) auto}
.rel-card img{width:190px}
.rel-card strong{font-size:clamp(20px,2vw,28px)}
.rel-card p{font-size:16px}
/* 枝分かれ（2-sub-service の「どう解くか」）：線の終点 1.4%・32%・63.7%・93.5%（branch.png を測った値） */
.how-fig.branch{display:block;position:relative;height:300px}
.how-fig.branch img{width:66%;max-width:none;height:100%;object-fit:fill}
.how-fig.branch .pills{position:absolute;left:62%;top:0;height:100%;width:38%;display:block}
.how-fig.branch .pills li{position:absolute;left:0;translate:0 -50%;white-space:nowrap}
.how-fig.branch .pills li:nth-child(1){top:4%}.how-fig.branch .pills li:nth-child(2){top:32%}
.how-fig.branch .pills li:nth-child(3){top:63.7%}.how-fig.branch .pills li:nth-child(4){top:93.5%}
@media (max-width:767px){
  .sub-hero-in{min-height:0;grid-template-columns:minmax(0,1fr) 38%;grid-template-areas:"c c" "t f";align-items:center}
  .sub-hero .crumbs{grid-area:c}
  .sub-hero .txt,.sub-hero.has-fig .txt{grid-area:t;grid-column:auto;grid-row:auto}
  .sub-hero .hero-fig{grid-area:f;grid-column:auto;grid-row:auto;width:100%;margin:0}
  .sub-hero .name{font-size:clamp(30px,9vw,40px)}
  .sub-hero h1{font-size:clamp(20px,5.8vw,26px)}
  .sub-hero h1.big{font-size:clamp(34px,10.4vw,48px)}
  .sub-hero h1.art{font-size:clamp(22px,6.4vw,28px)}
  .crumbs ol{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  .crumbs li:last-child{min-width:0;overflow:hidden}
  .crumbs li:last-child span{display:block;overflow:hidden;text-overflow:ellipsis}
  .who{padding:22px 18px;border-radius:32px;background:url(../img/blob-wide.png) center/100% 100% no-repeat}
  .who p.main{font-size:19px}
  .who p{font-size:16px}
  .clouds{display:flex;gap:4px;margin-inline:-8px}
  .clouds li{flex:1 1 0;min-width:0;font-size:12px;padding:6% 8% 14%}
  .how-fig.branch{height:200px}
  .how-fig.branch img{width:58%}
  .how-fig.branch .pills{left:54%;width:46%}
  .quad>li{grid-template-columns:110px minmax(0,1fr)}
  .quad img{width:110px}
  .rel-card{grid-template-columns:96px minmax(0,1fr);padding:18px}
  .rel-card img{width:96px}
  .rel-card strong{font-size:19px}
}

/* 記事：結論を太字で先頭・目次を本文幅・章の番号を丸に・表の見出し行と番号 */
.conclusion .lbl{font-size:clamp(19px,1.8vw,25px);font-weight:700}
.conclusion .txt p{font-size:16px}
.toc{max-width:none}
.toc a{font-size:16px;min-height:56px}
.prose{max-width:960px}
.prose h2{align-items:center}
.prose h2 .no{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;background:linear-gradient(160deg,#58dbf6,#5d8ee8);color:#fff;font-size:20px;font-weight:700}
.prose p,.prose li{font-size:17px}
.tbl tbody{counter-reset:row}
.tbl tbody th[scope=row]::before{counter-increment:row;content:counter(row);display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;border-radius:50%;background:#e3f3fb;color:#1f8fd8;font-size:13px;font-weight:700;vertical-align:middle}
.tbl thead th{background:linear-gradient(180deg,#d6ecfa,#c9e6f8)}
@media (max-width:767px){.prose h2 .no{width:42px;height:42px;font-size:16px}.prose p,.prose li{font-size:16px}}

/* 一覧：カードを本文幅・題を大きく・絞り込みの札を大きく（スマホは1列の横送り） */
.list-cards{max-width:none}
.list-card{padding:24px 24px 40px}
.list-card .ph{aspect-ratio:3.2/1}
.list-card h2{font-size:clamp(22px,2.6vw,34px)}
.list-card p{font-size:17px}
.filter a{min-height:64px;min-width:220px;font-size:18px}
@media (max-width:767px){
  .filter{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;padding:4px 2px 12px;scrollbar-width:none}
  .filter a{min-width:0;min-height:48px;font-size:15px;padding:0 18px;gap:8px}
  .list-card h2{font-size:22px}
}

/* 会社：表の字を大きく・ひし形の札（diamond.png）と流れる輪（ribbon.png） */
.co-tbl th{font-size:17px}.co-tbl td{font-size:18px}
.dots li{align-items:flex-start}.dots li::before{margin-top:15px}
.dots span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px}
.dots small{font-size:14px;color:var(--muted)}
.dia.gem{position:relative;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 40px;max-width:1040px;margin-inline:auto}
.dia.gem::before{content:"";position:absolute;inset:22% -6% 18%;background:url(../img/ribbon.png) center/100% 100% no-repeat;pointer-events:none}
.dia.gem a{position:relative;aspect-ratio:1;justify-content:center;padding:18%;border-radius:0;background:url(../img/diamond.png) center/contain no-repeat;box-shadow:none}
.dia.gem a:hover{box-shadow:none}
.dia.gem img{width:46%;margin-bottom:6px}
.dia.gem strong{font-size:clamp(15px,1.4vw,19px)}
.map iframe{background:#eef4fa url(../img/pin.png) center/90px no-repeat}
.map{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
@media (max-width:1199px) and (min-width:768px){.dia.gem{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .dia.gem{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
  .dia.gem>li,.dia.gem>li:nth-child(4),.dia.gem>li:nth-child(5){grid-column:auto}
  .dia.gem>li:nth-child(5){grid-column:1 / -1;width:50%;justify-self:center}
  .dia.gem a{display:flex;padding:16%}
  .dia.gem img{width:48%;grid-row:auto}
  .dia.gem strong{font-size:14px}
  .co-tbl th img{width:64px}
  .co-tbl tr{grid-template-columns:72px minmax(0,1fr)}
  .map iframe{min-height:200px}
}

/* 流れ（下層）：うねる線（sline.png）・段ごとの塊・字を大きく */
.vflow::before{width:70px;left:12px;background:url(../img/sline.png) center top/100% 520px repeat-y}
.vflow>li{padding:28px 32px 32px 0;background:url(../img/blob-wide.png) 60% center/100% 100% no-repeat}
.vflow .n{width:96px;height:96px;font-size:34px}
.vflow h3{font-size:clamp(26px,3vw,42px)}
.vflow .desc{font-size:18px}
.vflow .box li{font-size:16px}
.vflow .box h4{font-size:16px}
@media (max-width:767px){
  .vflow::before{width:40px;left:4px;background-size:100% 420px}
  .vflow>li{padding:18px 12px 20px 0;background-size:120% 100%}
  .vflow .n{width:56px;height:56px;font-size:20px}
  .vflow h3{font-size:24px;min-height:92px;padding-right:38%}
  .vflow .desc{font-size:15px}
  .vflow .ill{width:min(32vw,120px)}
}

/* FAQ ページ：札を高く・立体の絵・矢印・まとまりの頭に大きな番号 */
.cats a{flex-wrap:wrap;align-content:center;min-height:140px;gap:8px 14px;padding:18px 70px 18px 32px}
.cats img{width:64px}
.cats a span{flex:1 1 auto}
.cats .arrow{width:26px;height:26px}
.cat-block{background:url(../img/blob-wide.png) center/100% 100% no-repeat;padding:60px 64px 52px}
.cat-block .qa summary{font-size:clamp(17px,1.5vw,20px)}
.cno{font-family:var(--sans);font-weight:700;color:#23b4ea;margin-right:14px;padding-right:14px;border-right:2px solid #9fdcf3}
@media (max-width:767px){
  .cats a{min-height:76px;padding:10px 16px;flex-wrap:nowrap}
  .cats img{width:52px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(38,86,160,.1)}
  .cat-block{padding:28px 14px 22px;border-radius:0}
  .cat-hd .sec-h{font-size:21px}
  .cat-hd .sec-h::before{display:none}
  .cno{font-size:26px}
}

/* お問い合わせ（下層）：入力の板を本文幅・案内文を大きく・スマホは項目ごとの板に番号 */
.form-card{max-width:none;padding:56px 64px}
.fld>label,.fld>legend{font-size:17px}
.form-card input[type=text],.form-card input[type=email]{min-height:58px}
#main .lead-serif{font-size:clamp(20px,2.2vw,30px)}
.fno{display:none}
.form-guide{max-width:none;font-size:16px}
@media (max-width:767px){
  .form-card{padding:0;background:none;box-shadow:none}
  .form-card .fld{padding:18px 16px;border-radius:16px;background:#fff;box-shadow:var(--shadow);margin-bottom:16px}
  .fld>label::before,.fld>legend::before{display:none}
  .fno{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:700;font-size:22px;color:#23b4ea;margin-right:8px;padding-right:12px;border-right:2px solid #9fdcf3}
  .row2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .radios{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .radios label{padding:0 10px;gap:8px;font-size:15px}
}

/* 採用：塊・丸を大きく曲線でつなぐ・番号付きの横長の丸帯（スマホ）・準備中の板を塊の形に */
.think .catch{font-size:clamp(32px,4.2vw,60px)}
.think p{font-size:17px;line-height:2}
.circles{position:relative}
.circles::before{content:"";position:absolute;left:8%;right:8%;top:40px;height:160px;background:url(../img/ribbon.png) center/100% 100% no-repeat;pointer-events:none}
.circles .c{width:240px;position:relative}
.circles .c img{width:100px}
.circles h3{font-size:26px}
.circles p{font-size:16px}
.circles .cno{display:none}
.soon{-webkit-mask:url(../img/blob-mask.png) center/100% 100% no-repeat;mask:url(../img/blob-mask.png) center/100% 100% no-repeat;border-radius:0;padding:80px 100px}
.closing p{font-size:clamp(24px,3vw,42px)}
@media (max-width:767px){
  .circles::before{display:none}
  .circles li{grid-template-columns:auto 84px minmax(0,1fr);border-radius:999px;padding:12px 22px 12px 18px;background:url(../img/blob-wide.png) center/100% 100% no-repeat}
  .circles .cno{display:block;grid-row:1 / 3;font-family:var(--sans);font-weight:700;font-size:30px;color:#23b4ea;margin:0;padding:0;border:0}
  .circles .c{width:84px;grid-row:1 / 3}
  .circles .c img{width:44px}
  .circles h3{font-size:20px}
  .circles p{grid-column:3;font-size:14px}
  .soon{-webkit-mask:none;mask:none;padding:40px 22px;border-radius:0}
  .think .catch{font-size:30px}
}
@media (max-width:767px){
  .flow5 .tile{font-size:22px;min-height:0}
  .faq-top .sec-h{font-size:32px;padding-right:40%}
  .faq-top .sec-h span{white-space:nowrap}
}
/* スマホの困りごとの雲は2列（1列4つでは字の列が細く、語の途中で割れる＝4b が勝つ） */
@media (max-width:767px){
  .clouds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-inline:0}
  .clouds li{font-size:15px;padding:8% 14% 16%}
  .crumbs li:not(:last-child){flex:none}
  .crumbs a{white-space:nowrap}
}
/* はみ出しの直し：枝分かれの札は幅で折る・ひし形の輪は列の中に収める */
.how-fig.branch .pills li{white-space:normal;max-width:100%;line-height:1.4}
.dia.gem::before{inset:22% 0 18%}
@media (max-width:1199px){.how-fig.branch .pills li{font-size:14px;padding:6px 14px;min-height:44px}}
@media (max-width:1199px){.worries ul{margin-inline:0}}
@media (max-width:767px){.tbl.pick{min-width:0}.tbl.pick td:last-child{min-width:0}}
@media (max-width:767px){.worries li:nth-child(n) img,.flow5 li:nth-child(n) img{background:none}.curve::after{opacity:.45}}
.dia.gem::before{opacity:.55}

/* ===== 第2周の直し（work/review/r1.md・測った値は work/review/r1-reply.md） ===== */
@font-face{font-family:"FSerif";src:url(../fonts/serif-900.woff2) format("woff2");font-weight:900;font-display:swap}
/* トップの h1：絵の線の太さ÷字の高さ 0.116（700 は 0.107）→ 900。立体は1割小さく見出しへ寄せる */
.hero:not(.sub-hero) h1{font-weight:900}
.hero:not(.sub-hero) .hero-fig img{width:106%;max-width:690px;margin-left:-18%}
@media (max-width:767px){
  .hero-bg{background:linear-gradient(180deg,rgba(249,250,251,.86) 0%,rgba(249,250,251,.72) 40%,rgba(249,250,251,.3) 100%),url(../img/photo-office.jpg) 70% center/cover no-repeat}
}

/* 悩み・流れ（PC）：太く柔らかい波の帯（wave-band.png）・塊を1.2倍 */
.curve::after{background-image:url(../img/wave-band.png);height:min(55%,440px);opacity:1}
.worries li img,.flow5 img{background-size:110% auto}
/* 流れ：絵の後ろをつなぐ曲線 */
.flow5{position:relative}
.flow5::before{content:"";position:absolute;left:0;right:0;top:60px;height:140px;background:url(../img/waves.png) center/100% 100% no-repeat;opacity:.8;pointer-events:none}
.flow5 .tile{font-weight:700}

/* 悩み（スマホ）：札の形はカプセル（capsule.png） */
@media (max-width:767px){
  .worries li{background:url(../img/capsule.png) center/100% 100% no-repeat;border-radius:999px}
  .flow5>li+li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323c3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");rotate:0deg;width:32px;height:32px}
}

/* 事業カード：立体を1.5倍にして右端から1/4はみ出す・間を縫う曲線 */
.svc-grid{position:relative}
.svc-grid::before{content:"";position:absolute;left:-4%;right:-4%;top:42%;height:200px;background:url(../img/waves.png) center/100% 100% no-repeat;opacity:.85;pointer-events:none}
.svc-card .obj{width:62%;max-width:none;right:-24%;top:50%;translate:0 -50%}
.svc-card h3,.svc-card p{max-width:62%}
@media (max-width:1199px){.svc-card .obj{width:48%;right:-8%}}
@media (max-width:767px){
  .svc-grid::before{display:none}
  .svc-card{padding:12px 16px 14px}
  .svc-card .num{font-size:34px;margin-bottom:2px}
  .svc-card h3{font-size:17px;max-width:60%}
  .svc-card p{font-size:14px;line-height:1.6;max-width:60%}
  .svc-card .obj{width:40%;right:-4px}
  .svc-card .more{margin-top:8px;font-size:12px;padding:0 12px 0 14px;gap:6px}
  .svc-band strong{font-size:15px;white-space:nowrap}
  .svc-band img{width:56px}
}

/* やり方：矢印を1.3倍・題を1行（PC） */
.trio>li+li .fig::before{width:52px;height:52px;left:-44px}
.trio>li+li::before{width:40px;height:40px;left:-34px}
@media (min-width:1200px){.chev h3{font-size:clamp(22px,2.1vw,30px);white-space:nowrap}}
@media (max-width:767px){
  .chev h3{font-size:28px}
  .trio .fig{width:48%;top:10px;right:26px}
  .trio>li+li::before{display:block;content:"";position:absolute;left:50%;top:-38px;translate:-50% 0;rotate:0deg;width:32px;height:32px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323b4ea' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E")}
}

/* 代表メッセージ：軌道は細い楕円の線（orbit.png）・本文を1px上げる */
.msg-card figure::before{background-image:url(../img/orbit.png);inset:6% -8% 14% -14%;rotate:0deg}
.msg-card .body p{font-size:clamp(18px,1.45vw,21px)}
/* 会社の代表メッセージは写真（ノート）の板 */
.msg-card.photo{background:linear-gradient(90deg,rgba(236,245,251,.98) 0%,rgba(236,245,251,.9) 45%,rgba(236,245,251,.1) 80%),url(../img/photo-desk.jpg) right center/cover no-repeat;grid-template-areas:"t" "s";grid-template-columns:minmax(0,1fr);min-height:360px}
@media (max-width:767px){.msg-card.photo{background:linear-gradient(180deg,rgba(236,245,251,.96),rgba(236,245,251,.7)),url(../img/photo-desk.jpg) 70% bottom/cover no-repeat}}

/* コラム：題を1px下げる・スマホは題と絵が重ならない・副題を2行 */
.col-card h3{font-size:clamp(17px,1.7vw,24px)}
@media (max-width:767px){
  .col-card h3{max-width:66%}
  .col-card .thumb{width:32%;bottom:8px}
  .col-head{grid-template-columns:minmax(0,1fr);position:relative}
  .col-head>img{position:absolute;right:-6px;top:-10px;width:40%;max-width:170px}
  .col-head .lead{max-width:62%}
}

/* よくある質問：掃いた帯（brush.png）・問いの字を2px上げる・スマホは見出しと立体を重ねない */
.faq{background:url(../img/brush.png) right -60px center/60% auto no-repeat}
.qa summary{font-size:clamp(18px,1.85vw,26px)}
.cat-block .qa summary{font-size:clamp(17px,1.6vw,22px)}
@media (max-width:767px){
  .faq{background:url(../img/brush.png) left -80px top -20px/110% auto no-repeat}
  .faq-top .obj{width:38%}
  .faq-top .sec-h{padding-right:42%;font-size:30px}
  .qa summary{font-size:17px}
}

/* お問い合わせの帯：立体の下に光る台の輪（ring-base.png）・板の縁を少し強める */
.cta-band figure{position:relative}
.cta-band figure::after{content:"";position:absolute;left:8%;right:4%;bottom:2%;height:22%;background:url(../img/ring-base.png) center/contain no-repeat;z-index:-1}
.cta-band:not(.sub){background:linear-gradient(90deg,rgba(232,243,251,1) 0%,rgba(236,245,251,.94) 42%,rgba(240,247,252,.25) 78%),url(../img/photo-office.jpg) right center/cover no-repeat}
.cta-band figure img{position:relative}

/* 下層の帯：既定は写真の板（service・list・faq）、article・company・flow は立方体の帯 */
.cta-band.sub.photo{border-radius:var(--radius);padding:56px 64px;min-height:280px;background:linear-gradient(90deg,rgba(236,245,251,.98) 0%,rgba(236,245,251,.92) 46%,rgba(236,245,251,.1) 80%),url(../img/photo-desk.jpg) right center/cover no-repeat;grid-template-columns:minmax(0,1fr)}
.cta-band.sub .btn{white-space:nowrap}
@media (max-width:767px){
  .cta-band.sub.photo{padding:32px 22px 180px;border-radius:24px;background:linear-gradient(180deg,rgba(236,245,251,.97) 0%,rgba(236,245,251,.88) 55%,rgba(236,245,251,.1) 100%),url(../img/photo-desk.jpg) 70% bottom/cover no-repeat}
  .cta-band.sub .btn{width:auto;min-width:220px}
}

/* フッター（トップ）：立体の板を広げる・スマホのロゴと行間・縦に伸びた塊を外す */
.ft-obj{width:380px}
@media (max-width:1199px){.ft-in{background:none}}
@media (max-width:767px){
  .ft .logo span{font-size:24px}.ft .logo img{width:46px;height:46px}
  .ft-links a{min-height:44px;font-size:16px}
  .ft-obj{width:200px}
}
/* 下層のフッター：1行の簡素な型（2-sub-* の下端） */
.ft-sub{padding:40px 0 40px;background:linear-gradient(180deg,rgba(249,250,251,0),rgba(226,240,250,.6))}
.ft-sub::before{top:-40px;height:160px}
.ft-sub-in{display:flex;align-items:center;gap:48px;flex-wrap:wrap;position:relative;z-index:2}
.ft-sub .logo{margin-right:0}
.ft-sub .logo span{font-size:30px}.ft-sub .logo img{width:52px;height:52px}
.ft-sub-links ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 32px}
.ft-sub-links a{display:flex;align-items:center;min-height:44px;color:var(--navy);text-decoration:none;font-size:15px}
.ft-sub-links a:hover{color:#1d8fd8}
.ft-sub .copy{margin:0 0 0 auto;font-size:13px}
.ft-sub .ft-obj{width:150px;right:3%;bottom:4px}
.ft-sub-in{padding-right:160px}
@media (max-width:767px){
  .ft-sub{padding:32px 0 120px}
  .ft-sub-in{flex-direction:column;align-items:flex-start;gap:12px;padding-right:var(--gutter)}
  .ft-sub-links ul{flex-direction:column}
  .ft-sub .copy{margin:8px 0 0}
  .ft-sub .ft-obj{width:120px;left:auto;right:16px;translate:none;bottom:12px}
}

/* メニューの地に薄い斜めの曲線 */
.sp-menu{background:url(../img/waves.png) center 70%/180% auto no-repeat,linear-gradient(160deg,#f4f9fd 0%,#eaf3fb 60%,#eef0fb 100%)}

/* ===== 下層 ===== */
/* 副題（.lead）：前の周は service の h1 だけに効き、ほかの7型の副題は 21px のままだった。絵を測ると list 約34px・company 約31px（1440 換算） */
.sub-hero h1.big{font-size:clamp(44px,8.6vw,124px)}
.sub-hero h1.big + .lead,.sub-hero .name ~ .lead{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(18px,2.1vw,30px);line-height:1.7;max-width:none}
.sub-hero h1.art{font-size:clamp(30px,5vw,72px)}
@media (max-width:767px){
  .sub-hero h1.big{font-size:clamp(30px,9vw,40px)}
  .sub-hero h1.big + .lead,.sub-hero .name ~ .lead{font-size:16px}
  /* パンくずの最後の項目が上へずれる：block にして min-height の中で上寄せになっていた → 行の高さで中央 */
  .crumbs li:last-child span{display:block;line-height:44px;min-height:44px}
}

/* 事業ページ：こんな会社に・進め方の絵・関係する事業を大きく */
.who p.main{font-size:clamp(22px,2.15vw,30px)}
.quad img{width:230px}
.rel-card{padding:36px 56px 36px 32px;grid-template-columns:260px minmax(0,1fr) auto}
.rel-card img{width:240px}
/* スマホ：塊は縦に伸ばさない（縦横比を保つ物だけに）。背の高い箱は角丸の淡い板 */
@media (max-width:767px){
  .who,.vflow>li,.cat-block,.think.blobbed{background:linear-gradient(160deg,rgba(226,240,250,.9),rgba(240,247,252,.75));border-radius:28px}
  .think.blobbed{background:url(../img/blob-wide.png) center top/100% auto no-repeat;border-radius:0;padding:24px 8px 0}
  .cat-block{background:#fff;box-shadow:var(--shadow)}
  .how{grid-template-areas:"f" "t"}
  .how>div:first-child{grid-area:t}
  .how-fig{grid-area:f}
}

/* 記事：結論（スマホ）は絵を上・太字を板の幅で */
@media (max-width:767px){
  .conclusion{grid-template-columns:minmax(0,1fr)}
  .conclusion img{grid-row:auto;width:84px}
  .conclusion .lbl{grid-column:1;grid-row:auto}
  .conclusion .txt{grid-column:1;grid-row:auto}
}

/* 一覧：絞り込みの札を大きく */
.filter a{min-height:72px;font-size:20px;min-width:240px}
@media (max-width:767px){.filter a{min-height:48px;font-size:15px;min-width:0}}

/* 会社（スマホ）：地図の枠を上・住所を下（r1 の .map の2列が後ろにあって勝っていた） */
@media (max-width:767px){.map{grid-template-columns:minmax(0,1fr)}}

/* 流れ（下層）：番号の丸 128px（絵 104px÷1024×1440＝146）・絵を1.3倍・箇条は語で折る */
.vflow>li{grid-template-columns:128px minmax(0,1fr) 310px}
.vflow .n{width:128px;height:128px;font-size:44px}
.vflow::before{left:28px}
.vflow .ill{max-width:310px}
.vflow .box li{word-break:auto-phrase}
@media (max-width:767px){
  .vflow>li{grid-template-columns:56px minmax(0,1fr)}
  .vflow .n{width:56px;height:56px;font-size:20px}
  .vflow::before{left:4px}
}

/* FAQ ページ：札は背を高く絵を上・題を下（前の周は矢羽根の clip-path と横並びが残っていた）・PC は番号なし */
.cats a{flex-direction:column;align-items:flex-start;justify-content:center;flex-wrap:nowrap;min-height:220px;padding:28px 64px 28px 32px;clip-path:none;border-radius:28px;position:relative;box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.9)}
.cats img{width:96px}
.cats a span{flex:none}
.cats .arrow{position:absolute;right:26px;top:50%;translate:0 -50%}
@media (min-width:768px){.cat-block .cno{display:none}}
@media (max-width:767px){
  .cats a{flex-direction:row;align-items:center;min-height:76px;padding:10px 52px 10px 14px}
  .cats img{width:52px}
}

/* お問い合わせ（下層）：項目名の「お問い合わせ　の種類」の空き＝label が flex で gap が字の間にも入っていた */
.fld>label,.fld>legend{gap:0}
.fld>label::before,.fld>legend::before{margin-right:12px}
.fld .req{margin-left:12px}
.fld>label,.fld>legend{font-size:18px}
.form-card input[type=text],.form-card input[type=email]{min-height:60px;font-size:17px}
.form-guide.fold summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:500;color:var(--navy)}

/* 採用：丸を1.2倍・準備中の題とボタンを大きく・スマホの柱は丸帯＋長文は帯の下・準備中は板なしで写真 */
.circles .c{width:288px}
.circles .c img{width:120px}
.soon .catch{font-size:clamp(30px,3.6vw,50px)}
.soon .btn{min-height:60px;font-size:17px}
@media (max-width:767px){
  .circles li{position:relative;grid-template-columns:auto 72px minmax(0,1fr);grid-template-areas:"n c h" "p p p";background:none;padding:0;border-radius:0;gap:10px 14px;text-align:left}
  .circles li::before{content:"";position:absolute;left:0;right:0;top:0;height:88px;border-radius:999px;background:url(../img/capsule.png) center/100% 100% no-repeat;z-index:-1}
  .circles li{isolation:isolate}
  .circles .cno{grid-area:n;align-self:center;padding-left:20px}
  .circles .c{grid-area:c;width:72px;height:72px;margin:8px 0}
  .circles .c img{width:40px}
  .circles h3{grid-area:h;align-self:center}
  .circles p{grid-area:p;grid-column:auto;padding:0 6px}
  .soon{padding:44px var(--gutter);margin-inline:calc(var(--gutter)*-1);background:linear-gradient(180deg,rgba(226,240,250,.92) 0%,rgba(226,240,250,.7) 55%,rgba(226,240,250,.15) 100%),url(../img/photo-desk.jpg) 70% bottom/cover no-repeat;min-height:520px}
}
/* 第2周の撮り直しで見つけた差 */
.svc-card .obj{right:-16%}
@media (max-width:767px){
  .chev h3{font-size:23px;max-width:60%}
  .faq-top .sec-h{padding-right:0;min-height:200px;align-items:flex-end}
  .faq-top .obj{width:auto;max-width:150px;margin:0 4px 0 0}
  .col-head .lead{font-size:15px;max-width:72%}
}
@media (max-width:767px){
  .circles li{grid-template-columns:56px 72px minmax(0,1fr)}
  .who p.main{font-size:19px}
  .sub-hero h1.big{font-size:clamp(28px,8.2vw,34px)}
}
/* 関係する事業：PC の列（260px）を後ろに足したため、狭い幅の打ち消しが負けていた＝末尾で幅ごとに戻す */
@media (max-width:1199px){.rel-card{grid-template-columns:180px minmax(0,1fr) auto;padding:24px 32px 24px 20px}.rel-card img{width:160px}}
@media (max-width:767px){.rel-card{grid-template-columns:96px minmax(0,1fr);padding:18px}.rel-card img{width:96px}.rel-card .btn{grid-column:1 / -1;justify-self:start}}
@media (max-width:1299px){.svc-card .obj{right:-8%;width:54%}}
@media (max-width:767px){.circles p{grid-column:1 / -1}}
@media (max-width:767px){.svc-card .obj{right:-4px;width:40%}}
@media (max-width:1199px) and (min-width:768px){.circles .c{width:min(100%,200px)}.circles .c img{width:84px}}
.services,.sec:has(.svc-grid){overflow-x:clip}

/* ===== 第3周の直し（work/review/r2.md） ===== */
/* 問い合わせのフォーム：絵の比（板 907px→1280px＝1.41倍）で項目名と入力欄を大きく。前の周の 18px・61px は PC にも当たっていたが絵の比に足りなかった */
.fld>label,.fld>legend{font-size:22px}
.form-card input[type=text],.form-card input[type=email]{min-height:72px;font-size:18px;padding:16px 22px}
.radios label{min-height:72px;font-size:18px}
.form-card textarea{min-height:200px;font-size:18px}
#main [data-audit=form] .lead-serif{font-size:clamp(22px,2.6vw,38px)}
@media (max-width:767px){
  .fld>label,.fld>legend{font-size:17px}
  .form-card input[type=text],.form-card input[type=email],.radios label{min-height:52px;font-size:16px}
  .form-card .fld{padding-top:22px}
  #main [data-audit=form] .lead-serif{font-size:20px}
}
/* 下層 PC の補足の字の最小 14px 前後（記事カードの本文・流れの箇条・採用の柱の説明・FAQ の札の題） */
.list-card p{font-size:18px}
.vflow .box li{font-size:17px}
.circles p{font-size:18px}
.cats a span{font-size:24px}
.sub-hero h1.big + .lead,.sub-hero .name ~ .lead{font-size:clamp(18px,2.5vw,36px)}
.sub-hero h1.art{font-size:clamp(30px,5.8vw,84px)}
/* 流れ（下層）の箇条はぶら下げ */
.vflow .box li{padding-left:1em;text-indent:-1em}
/* 事業ページ：こんな会社にの説明は塊の外・関係する事業は1枚の大きな板 */
.who-more{max-width:48em;margin:24px 0 0;font-size:17px}
.rel-board{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);align-items:center;gap:32px;padding:40px 56px;border-radius:32px;background:linear-gradient(120deg,rgba(226,240,250,.95),rgba(240,247,252,.75));box-shadow:var(--shadow)}
.rel-board .rb-fig{width:100%;max-width:340px;margin:0 auto}
.rel-board ul{list-style:none;display:grid;gap:12px}
.rel-board a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:16px 22px;border-radius:18px;background:rgba(255,255,255,.75);text-decoration:none;transition:background-color .16s}
.rel-board a:hover{background:#fff}
.rel-board small{grid-column:1;font-size:13px;color:#2bb7e6;letter-spacing:.06em}
.rel-board strong{grid-column:1;font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.7vw,24px);color:var(--navy);line-height:1.5}
.rel-board a>span{grid-column:1;font-size:15px;color:var(--muted)}
.rel-board .arrow{grid-column:2;grid-row:1 / 4}
@media (max-width:767px){.rel-board{grid-template-columns:minmax(0,1fr);padding:22px 16px;gap:12px}.rel-board .rb-fig{max-width:180px}.rel-board a{padding:14px 16px}.who-more{font-size:16px}}
/* 会社：事業内容の説明は札の下の1つ */
.gem-note{max-width:48em;margin:40px auto 0;font-size:17px}
/* 会社スマホ：読み込み前の地図の枠を低く */
@media (max-width:767px){.map iframe{min-height:180px;height:180px}}
/* トップ：hero の立体を寄せて下に光の台・事業4・5の立体を0.8倍 */
.hero:not(.sub-hero) .hero-fig{position:relative}
.hero:not(.sub-hero) .hero-fig img{position:relative;z-index:1}
.hero:not(.sub-hero) .hero-fig::after{content:"";position:absolute;left:4%;right:14%;bottom:6%;height:20%;background:url(../img/ring-base.png) center/contain no-repeat;opacity:.9}
@media (min-width:768px){.hero:not(.sub-hero) .hero-fig img{width:96%;margin-left:-22%}}
.svc-grid>li:nth-child(n+4) .svc-card .obj{width:50%}
@media (max-width:767px){
  .hero-fig::after{display:none}
  .hero-bg{background:linear-gradient(180deg,rgba(249,250,251,.8) 0%,rgba(249,250,251,.62) 40%,rgba(249,250,251,.22) 100%),url(../img/photo-office.jpg) 70% center/cover no-repeat}
  .worries li{background-color:transparent}
  .worries{background:none}
  .svc-card .num{margin-bottom:0;line-height:1}
  .svc-card p{margin-top:4px}
  .svc-card .more{margin-top:6px}
  .chev h3{font-size:22px}
  .flow5 .num{font-size:44px}
  .flow5 .tile{font-size:24px;padding-top:2px}
  .msg-card .body p{font-size:16px;line-height:1.85}
  .col-card h3{max-width:100%}
  .col-card .thumb{position:static;width:46%;margin:0 0 4px auto;display:block}
  .col-card .read{margin-top:-30px}
  .faq-top .sec-h{flex-direction:column;align-items:flex-start;gap:10px}
  .faq-top .sec-h::before{margin:0}
  .ft-loc{padding:10px 18px}
  .ft-loc img{width:40px}
}
.chk-card li,.toc a{word-break:auto-phrase}
@media (max-width:767px){.tbl.pick{font-size:14px}.tbl.pick th,.tbl.pick td{padding:12px 10px}}

/* 折り方の最終（4b の2・3）：main の字は生成の段で文節の切れ目に <wbr> を入れてある（BudouX・build_site.py の phrases）。
   短い字（見出し・札・カード・リード・ボタン・表）は keep-all＝<wbr> と句読点でだけ折る＝Safari でも Chrome でも同じ。
   長い本文（記事・説明の段落）は普通の折り返し＋pretty（auto-phrase を掛けない） */
main :is(p,li,td,th,dd,label,strong,small,span,a,h1,h2,h3,h4,summary,legend){word-break:keep-all;overflow-wrap:break-word}
main :is(.prose p,.prose li,.how p:not(.main),.who-more,.think p,.form-guide p,.form-guide li,.case p,.case li,.vflow .desc,.qa .a p,.gem-note,.soon p:not(.catch)){word-break:normal;text-wrap:pretty}
main :is(.msg-card .body p,.quad p,.co-tbl td){text-wrap:pretty}
/* 狭い幅では塊（.ib）を解いて文節（<wbr>）で折る：塊が列より広いと保険の改行で語の途中が割れた */
@media (max-width:767px){
  .sub-hero .name{font-size:clamp(26px,7.6vw,34px)}
  .quad h3{font-size:17px}
  .cta-band.sub .catch{font-size:22px}
  .clouds li{font-size:14px}
}

/* auto-phrase が効くブラウザ（Chrome）は文節の判定をブラウザに任せる。効かないブラウザ（Safari）は上の keep-all＋<wbr> */
@supports (word-break:auto-phrase){
  main :is(p,li,td,th,dd,label,strong,small,span,a,h1,h2,h3,h4,summary,legend){word-break:auto-phrase}
  main :is(.prose p,.prose li,.how p:not(.main),.who-more,.think p,.form-guide p,.form-guide li,.case p,.case li,.vflow .desc,.qa .a p,.gem-note,.soon p:not(.catch)){word-break:normal}
}
@supports not (word-break:auto-phrase){@media (max-width:767px){.ib{display:inline}}}
@media (max-width:767px){.dots a{font-size:15px}.dots li,.dots span{min-width:0}}
/* WebKit は keep-all と text-wrap:balance/pretty を一緒に使うとページごと落ちる（2026-10-07 実測：どちらかを外すと開く）＝auto-phrase の無いブラウザは text-wrap を普通に */
@supports not (word-break:auto-phrase){main :is(p,li,td,th,dd,label,strong,small,span,a,h1,h2,h3,h4,summary,legend){text-wrap:wrap !important}
  main :is(.prose p,.prose li,.how p:not(.main),.who-more,.think p,.form-guide p,.form-guide li,.case p,.case li,.vflow .desc,.qa .a p,.gem-note,.soon p:not(.catch),.vflow .box li,td){word-break:normal;text-wrap:pretty !important}}
@media (max-width:767px){.sub-hero .name{font-size:clamp(24px,7vw,30px)}.sub-hero h1.big{font-size:clamp(26px,7.6vw,32px)}}
@media (max-width:767px){.dots .nw{white-space:normal}.dots a{font-size:14px}.sub-hero h1.big{font-size:clamp(24px,7vw,28px)}}
/* 会社の表の事業のリンク：flex の箱では字が折れずに右へはみ出した（測った値：a 210px・列 178px）→ block で折る */
.dots a{display:block;padding:10px 0;min-height:44px;line-height:1.5}
.dots span{min-width:0;flex:1 1 auto}
@media (max-width:1199px){.tbl.pick td:last-child{min-width:0}}
@media (max-width:420px){.ib{display:inline}}
/* 目次：flex の中の字は最小幅で縮まず 320 幅ではみ出した → 2列の grid（字の列は minmax(0,1fr)） */
.toc a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px}
.chev .ib{display:inline-block}

/* ===== 第4周の直し（work/review/r3.md） ===== */
main,footer{line-break:strict}
/* ボタンは1行（640px 以下は幅いっぱい＝r2 で直した物の再発を止める） */
.btn{white-space:nowrap}
@media (max-width:640px){.btn-row .btn,.cta-band .btn,.cta-band.sub .btn{white-space:nowrap;width:100%;max-width:360px;font-size:15px;padding-inline:20px}}
/* トップの大見出しは3行（900 の字の幅で「仕組みに／する。」と折れた）→ 各行を折らず、字を1割下げる */
.hero:not(.sub-hero) h1 span{white-space:nowrap}
@media (min-width:768px){.hero:not(.sub-hero) h1{font-size:clamp(40px,7vw,102px)}}
/* 塊（.ib）を解くのは目次と記事の本文だけ（r3 で全部を解いたら事業の題が3行に） */
@media (max-width:420px){.ib{display:inline-block}.prose .ib,.toc .ib,.dots .ib{display:inline}}
/* 会社の表の事業内容：点＋名前の行、その下に説明 */
.dots li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:0 12px;align-items:start}
.dots li::before{margin-top:15px}
.dots span{display:block;min-width:0}
.dots a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.dots small{display:block;margin:-6px 0 6px}
/* 悩みスマホ：後ろの塊（波の帯）を外す */
@media (max-width:767px){.worries.curve::after{display:none}}
/* 事業カード（スマホ）：上下の余白を2/3 */
@media (max-width:767px){.svc-card{padding:8px 16px 10px}}
/* やり方スマホ3の題・流れスマホの題は1行 */
@media (max-width:767px){.chev h3{white-space:nowrap;font-size:20px;max-width:none}.flow5 .tile{white-space:nowrap;font-size:22px}}
/* 代表メッセージの名前を2割小さく */
.msg-card .sign b{font-size:27px}
@media (max-width:767px){.msg-card .sign b{font-size:22px}}
/* コラムスマホ：絵はボタンの段の右（題の段と重ねない・空きを作らない） */
@media (max-width:767px){
  .col-card{padding-bottom:22px}
  .col-card .thumb{position:absolute;display:block;right:10px;bottom:8px;width:34%;margin:0}
  .col-card .read{margin-top:4px}
  .col-card h3{margin-bottom:12px}
}
/* 問い合わせ：測った値（絵の比 1.41倍）＝項目名 30px・入力欄 92px。入力の字は本文の決まりの 18px。案内文は 700 */
.fld>label,.fld>legend{font-size:30px}
.form-card input[type=text],.form-card input[type=email]{min-height:92px;font-size:18px;padding:20px 26px}
.radios label{min-height:92px;font-size:20px}
.form-card textarea{min-height:240px}
#main [data-audit=form] .lead-serif{font-weight:700}
.req{font-size:14px}
@media (max-width:767px){.fld>label,.fld>legend{font-size:17px}.form-card input[type=text],.form-card input[type=email],.radios label{min-height:52px;font-size:16px;padding:12px 14px}.form-card textarea{min-height:160px}}

/* r0 のトップ用 .hero h1 span{display:block} が下層の頭（class に hero）にも当たり、割らない語の span が行ごとに分かれていた */
.sub-hero h1 span{display:inline;white-space:normal}
.sub-hero h1 span.nw{white-space:nowrap}
.sub-hero h1 span.ib{display:inline-block}
@media (max-width:420px){.sub-hero h1 span.ib{display:inline-block}}
@media (min-width:768px){.hero:not(.sub-hero) h1{font-size:clamp(40px,6.2vw,90px)}}
/* 流れの札：flex の箱だと <wbr> で字が別々の箱に割れた → スマホは block */
@media (max-width:767px){.flow5 .tile{display:block}}
@media (max-width:767px){.sub-hero h1:not(.big):not(.art){font-size:clamp(19px,5.2vw,23px)}}
@media (max-width:767px){.flow5 .tile{font-size:20px}}
.dots a{display:block;padding:10px 0;min-height:44px}
@media (max-width:767px){.dia.gem strong .nw{white-space:normal}.dia.gem strong{font-size:13px}.radios label{padding:0 8px;gap:6px;font-size:15px;white-space:nowrap}}
/* 会社の表の事業内容：点と名前を同じ行に（名前の箱 44px の縦中央＝点の上 15px）・説明は名前のすぐ下 */
.dots a{display:flex;align-items:center;padding:0;min-height:44px}
.dots li::before{margin-top:15px}
.dots small{margin:-8px 0 8px;line-height:1.6}
@media (max-width:767px){.col-card .thumb{width:26%;bottom:6px}.col-card h3{margin-bottom:22px}}
/* flex の箱は <wbr> で字が別々の箱に割れる → block＋行の高さで点と揃える（上 10px＋行 24px の中央＝点の上 15px） */
.dots a{display:block;padding:10px 0;line-height:24px;min-height:44px}
.dots small{margin:-6px 0 8px;word-break:normal !important}
/* .dots span{display:block} が名前の中の割らない語（.nw）にも当たり、名前が行ごとに割れていた → 外側だけ */
.dots a span,.dots small span{display:inline}

/* ===== 第5周の直し（work/review/r4.md） ===== */
/* 大見出し：文字の列を 640px→約768px に広げ、字を絵の比（約100px）に戻す（各行 nowrap・3行のまま） */
@media (min-width:1200px){.hero:not(.sub-hero) .hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.hero:not(.sub-hero) h1{font-size:clamp(40px,7vw,100px)}.hero:not(.sub-hero) .hero-fig img{width:118%;margin-left:-26%}}
/* 事業カードの題：PC は列 211px に 27px の字で「進捗管理・定例会議」（243px）が入らず3行だった → 列を 72%・字 25px */
@media (min-width:768px){.svc-card h3{max-width:74%;font-size:clamp(20px,1.75vw,25px)}}
/* スマホの03の題：列 191px・17px で塊が割れて2行 → 列を 66%・字 16px（12px 以上） */
@media (max-width:767px){.svc-card h3{max-width:66%;font-size:16px}.svc-card h3 .ib{display:inline}}
@media (min-width:768px){.svc-grid>li:nth-child(5) .svc-card h3 .ib{display:block}}

/* ===== 第6周の直し ===== */
/* <wbr> を含む字の塊（生成の段で包む）は常にふつうの行の中の箱 */
span.wb{display:inline !important;flex:0 1 auto;min-width:0}
/* パンくず：最後の項目は省略記号で1行（<wbr> は入れない） */
.crumbs ol{align-items:center}
.crumbs li{min-width:0}
.crumbs [aria-current]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:44px;min-height:44px}
.crumbs li:last-child{flex:1 1 0;overflow:hidden}
/* 下層の大きな題は文字の列に収める（代表メッセージの「ジ」が飾りの立体に重なった：7字×124px＝868px＞列 約780px） */
@media (min-width:768px){.sub-hero h1.big{font-size:clamp(44px,7.4vw,106px)}}
.sub-hero .hero-fig{position:relative;z-index:0}.sub-hero .txt{position:relative;z-index:1}
/* パンくずの最後の項目の中の span（.wb・.nw）は行の中の箱（r1 の .crumbs li:last-child span{display:block} が中にも当たっていた） */
.crumbs [aria-current] span{display:inline !important;min-height:0;line-height:inherit}
/* トップのコラムの見出しと飾り（320〜360）：飾りを小さくして見出しに重ねない */
@media (max-width:380px){.col-head>img{width:30%}}
/* 下層スマホの大きな題は字の列に収める */
@media (max-width:767px){.sub-hero h1.big{font-size:clamp(22px,6.4vw,26px)}}

/* パンくずの最後の項目：省略記号で切ると字が切れる＝普通の折り返し。1行目の中心を他の項目（44px の箱の中央）にそろえる */
.crumbs ol{align-items:flex-start}
.crumbs [aria-current]{display:block;white-space:normal;overflow:visible;text-overflow:clip;line-height:20px;padding-block:12px;min-height:44px}
.crumbs li:last-child{overflow:visible}
@media (max-width:767px){.hero:not(.sub-hero) .hero-fig img{width:100%;margin:24px auto 0}}
.crumbs li:last-child span[aria-current]{line-height:20px;padding-block:12px;min-height:44px;display:block}
/* 中の span に r1 の line-height:44px が当たり1行が 44px になっていた */
.crumbs li:last-child [aria-current] span{line-height:inherit;min-height:0;display:inline !important}
/* WebKit：pretty の段落の中に keep-all の字（.wb）が入るとページが落ちた（2026-10-07 実測）＝auto-phrase の無いブラウザは text-wrap を全部普通に、.wb は親の折り方に従う */
@supports not (word-break:auto-phrase){main,main *{text-wrap:wrap !important}main :is(.prose p,.prose li,.how p,.who-more,.think p,.form-guide p,.form-guide li,.case p,.case li,.vflow .desc,.qa .a p,.gem-note,.soon p) .wb{word-break:inherit}}
/* パンくずの最後の項目（WebKit）：keep-all だと折れ目が無く保険の改行で「り」だけの行になった（列 200px・16字×13px＝208px）→ 12px・普通の折り返し */
@media (max-width:767px){.crumbs ol{font-size:12px}main .crumbs [aria-current]{word-break:normal}}

/* ===== 第7周の直し（work/review/r6.md） ===== */
/* 表（640px 以下）：横に送らず、行ごとのカード。行の見出しを題に、各列は「列の名前」の札＋本文で縦に */
@media (max-width:640px){
  .tbl-wrap{overflow:visible;background:none;box-shadow:none;border-radius:0}
  .tbl,.tbl.pick{min-width:0;display:block}
  .tbl thead{display:none}
  .tbl tbody{display:grid;gap:12px}
  .tbl tr{display:block;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:var(--shadow)}
  .tbl th,.tbl td{display:block;padding:0;border:0;white-space:normal}
  .tbl tbody th[scope=row]{font-size:16px;margin-bottom:8px}
  .tbl td{margin-top:8px;font-size:15px}
  .tbl td[data-label]::before{content:attr(data-label);display:inline-block;margin:0 10px 4px 0;padding:2px 10px;border-radius:999px;background:#e3f3fb;color:var(--navy);font-size:12px;font-weight:500}
}
/* 題の全角空白：PC は空白、スマホは改行 */
@media (max-width:767px){.zsp{display:block;height:0;overflow:hidden}}
/* 下層の頭（スマホ）：説明文は立体の横の細い列に入れず、全幅 */
@media (max-width:767px){
  .sub-hero-in{grid-template-areas:none;grid-template-columns:minmax(0,1fr) 34%}
  .sub-hero .crumbs{grid-column:1 / -1;grid-row:1}
  .sub-hero .txt,.sub-hero.has-fig .txt{display:contents}
  .sub-hero .txt>*{grid-column:1}
  .sub-hero .txt>.lead,.sub-hero .txt>.meta{grid-column:1 / -1}
  .sub-hero .hero-fig,.sub-hero.has-fig .hero-fig{grid-column:2;grid-row:2 / span 3;width:100%;margin:0;align-self:center}
}
@media (max-width:420px){.sub-hero .hero-fig,.sub-hero.has-fig .hero-fig{grid-column:2;grid-row:2 / span 3;width:100%;margin:0}}
/* 説明の板（スマホ）：アイコンは見出しの左、本文は板の幅いっぱい */
@media (max-width:767px){
  .who{grid-template-columns:56px minmax(0,1fr);gap:8px 12px;align-items:center}
  .who img{width:56px;grid-column:1;grid-row:1}
  .who .txt{display:contents}
  .who p.main{grid-column:2;grid-row:1}
  .who .txt>p:not(.main){grid-column:1 / -1}
}
/* 流れ（下層・スマホ）：説明と箱は番号の列の下から全幅 */
@media (max-width:767px){
  .vflow>li>div:not(.boxes){display:contents}
  .vflow h3{grid-column:2}
  .vflow .desc,.vflow .boxes{grid-column:1 / -1}
}
/* やり方の矢羽根（スマホ）：先端を細くして本文の列を 300px 以上に・立体は題に重ねない（上へ） */
@media (max-width:767px){
  .chev{clip-path:polygon(0 12px,6px 1px,12px 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,12px 100%,1px calc(100% - 6px),0 calc(100% - 12px));padding-right:26px}
  .chev h3{max-width:none}
}
/* 一覧のカード（スマホ）：本文の列を広く */
@media (max-width:767px){.list-card{padding:14px 14px 24px}.list-card .body{padding:0}}
/* トップのコラムの副題（スマホ）：飾りに重ねない */
@media (max-width:767px){.col-head .lead{max-width:58%}}
/* 狭い幅（380px 以下）の重なり：流れの札・事業カードの題・流れの段の題 */
@media (max-width:380px){
  .flow5 .tile{font-size:17px}
  .svc-card h3{max-width:56%;font-size:15px}
  .svc-card .obj{width:36%}
  .vflow h3{font-size:20px}
}
@media (max-width:380px){.vflow h3{padding-right:calc(min(32vw,120px) + 10px)}}
@media (max-width:340px){.flow5>li{grid-template-columns:minmax(0,1fr) 38%;padding-inline:18px 10px}.flow5 .tile{font-size:15px}}
@media (max-width:767px){span.zsp{display:block !important;height:0;overflow:hidden}}

/* ===== 第8周の直し（work/review/r7.md）：重なりは素材を縮めず、字の列と素材の置き場を分ける ===== */
/* 事業カード（PC）：立体は r6 の大きさ（カードの右半分・縦中央）。題・説明の列は立体の左端（カードの 54%）で止める */
@media (min-width:768px){
  .svc-card h3,.svc-card p{max-width:54%}
  .svc-card h3{font-size:clamp(19px,1.6vw,23px)}
}
/* トップのコラムのカード（PC）：絵は r6 の大きさ（カードの右下）。題の列は絵の上で止める＝カードの下に絵の段を取る */
@media (min-width:768px){.col-card{padding-bottom:220px}}
/* やり方の矢羽根（スマホ）：立体は r6 の大きさ（矢羽根の右上 44%）。題・番号は立体の左（56%）で止め、本文は立体の下から全幅 */
@media (max-width:767px){
  .trio .fig{top:14px;right:24px;width:44%}
  .chev .num,.chev h3{max-width:54%}
  .chev h3{white-space:normal}
  .chev p{padding-top:6px}
}
/* 困りごとから選ぶ：左右の段は上そろえ */
.how{align-items:start}
/* 進め方4段：短い題は折らない・絵の箱の高さをそろえて題の上端を合わせる */
.quad img{height:170px;object-fit:contain;object-position:center bottom}
.quad h3 .wb{white-space:nowrap}
@media (max-width:1199px){.quad h3 .wb{white-space:normal}}
@media (max-width:767px){.quad img{height:96px}}
/* FAQ の札：絵の箱の高さをそろえる */
.cats img{height:80px;width:96px;object-fit:contain;object-position:left center}
@media (max-width:767px){.cats img{height:52px;width:52px}}
/* 採用の準備中：題の下にかすみ（「ある」が写真の白に溶けた） */
.soon .catch{display:inline;background:linear-gradient(transparent 8%,rgba(235,244,252,.9) 8%,rgba(235,244,252,.9) 92%,transparent 92%);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 6px}
.soon .catch + p{margin-top:24px}
/* 代表メッセージ（PC）：本文の列を写真の手前（板の 58%）で止め、本文の下に面 */
@media (min-width:768px){
  .message .msg-card[style] .txt{max-width:58%}
  .message .msg-card[style] .body{background:rgba(236,245,251,.82);border-radius:16px;padding:8px 12px;margin-inline:-12px}
}

@media (max-width:767px){main .crumbs [aria-current]{word-break:keep-all;overflow-wrap:break-word}}
/* 第7周の組み替えで頭の立体（38%→34%）・説明の板のアイコン（64→56px）が約0.89倍に縮んだのを r6 の大きさに戻す */
@media (max-width:767px){.sub-hero-in{grid-template-columns:minmax(0,1fr) 38%}.who{grid-template-columns:64px minmax(0,1fr)}.who img{width:64px}}
/* 下段の事業カード4の立体が右隣のカード5の題にはみ出す → 4・5の間をあけて置き場を分ける（立体の大きさは r6 のまま） */
@media (min-width:1200px){.svc-grid>li:nth-child(4){grid-column:1 / 6}.svc-grid>li:nth-child(5){grid-column:8 / 13}}
/* やり方（380px 以下）：題の字を下げて立体の左に収める（立体は縮めない） */
@media (max-width:380px){.chev h3{font-size:18px}.chev .num{font-size:48px}}
/* 事業カード2の題（PC）：54% では「進捗管理・定例会議」が入らず3行 → 題だけ 60%（立体の左端の手前まで。立体の大きさは r6 のまま） */
@media (min-width:768px){.svc-card h3{max-width:60%}}
/* やり方3の題（スマホ）：「自動化する・任せる」は1行（絵も1行）＝題の列は立体の手前まで 60% */
@media (max-width:767px) and (min-width:381px){.chev h3{max-width:62%;font-size:21px;white-space:nowrap}}
/* 事業カードの題（PC・タブレット）：字の大きさをカードの幅に合わせ（cqi）、「進捗管理・定例会議」が立体の左の列（58%）に1行で入るように。立体は r6 の大きさのまま */
@media (min-width:768px){.svc-card{container-type:inline-size}.svc-card h3{max-width:58%;font-size:clamp(16px,5.2cqi,22px)}.svc-card p{max-width:56%}}
/* やり方3の題（スマホ）：1行（絵も1行）のまま、立体の左に収める＝題は 18px・立体は r6 の大きさで右へ 12px 寄せる */
@media (max-width:767px) and (min-width:381px){.chev h3{font-size:18px;max-width:none}.trio .fig{right:10px}}
/* 採用の準備中（PC）：「ある」「わ」が薄いのは塊の型（mask）の中の半透明の所が字まで薄くしていたため（写真のせいではない）
   → 型は地（::before の写真と面）にだけ掛け、字には掛けない */
@media (min-width:768px){
  .soon{-webkit-mask:none;mask:none;background:none;position:relative;isolation:isolate}
  .soon::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(226,240,250,.95) 0%,rgba(226,240,250,.85) 45%,rgba(226,240,250,.2) 80%),url(../img/photo-desk.jpg) right center/cover no-repeat;-webkit-mask:url(../img/blob-mask.png) center/100% 100% no-repeat;mask:url(../img/blob-mask.png) center/100% 100% no-repeat}
  .soon .catch{background:none;padding:0}
}
/* お問い合わせの帯（トップ）も同じ：型は地にだけ */
@media (min-width:768px){
  .cta-band:not(.sub){-webkit-mask:none;mask:none;background:none;isolation:isolate}
  .cta-band:not(.sub)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(232,243,251,1) 0%,rgba(236,245,251,.94) 42%,rgba(240,247,252,.25) 78%),url(../img/photo-office.jpg) right center/cover no-repeat;-webkit-mask:url(../img/blob-mask.png) center/100% 100% no-repeat;mask:url(../img/blob-mask.png) center/100% 100% no-repeat}
}

/* ===== 第9周の直し（work/review/r8.md）：折れ目の入れ方 ===== */
/* 題・一文は balance でなく pretty（balance は短い行を作った）。記事の題（スマホ）は絵の 1行8〜10字の4行 */
main p.main,main .lead,.sub-hero h1{text-wrap:pretty}
@media (max-width:767px){.sub-hero h1.art{font-size:clamp(22px,6.2vw,26px)}}
/* 進め方4段の短い題は1行 */
.quad h3{text-wrap:pretty}
/* トップのコラムの一文（スマホ）：列いっぱい（立体は見出しの横だけ） */
@media (max-width:767px){.col-head .lead{max-width:none}.col-head>img{top:-24px}.col-head .sec-h{min-height:96px;align-items:center}}
/* 問い合わせの入力欄の案内（スマホ）：字を下げて折らない */
@media (max-width:767px){.form-card textarea::placeholder{font-size:14px}}
@media (max-width:767px){.sub-hero h1.art{font-size:clamp(19px,5.4vw,21px);line-height:1.5}}