/* ============================================================
   maru-M  sub.css — 下層ページ共通（事業・実績・コラム・お知らせ・規約）
   base.css の上に読む。赤グラデ地・白文字、紙は使わず1px白線で区切る
   ============================================================ */
body.sub{background:linear-gradient(180deg,#9e0a21 0%,#8a0a20 100%)}
body.sub main{padding-top:max(60px,calc(94 * var(--u)))}

/* ---------- ページヘッダー ---------- */
.ph{padding:calc(90 * var(--u)) 0 calc(70 * var(--u));border-bottom:1px solid rgba(255,255,255,.22);position:relative;overflow:hidden}
.ph .in{width:min(1040px,calc(100% - 48px))}
.crumb{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6em;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.6);margin-bottom:clamp(18px,2vw,34px)}
.crumb a:hover{color:var(--yellow)}
.crumb li+li::before{content:"/";margin-right:.6em;color:rgba(255,255,255,.35)}
.k{font-family:var(--futura);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ph h1{margin-top:clamp(8px,.8vw,14px);font-weight:900;font-size:clamp(26px,3vw,52px);letter-spacing:.08em;line-height:1.3;color:#fff}
.ph .lead{margin-top:clamp(14px,1.4vw,26px);max-width:760px;font-size:clamp(14px,1.05vw,19px);line-height:2;letter-spacing:.06em;color:rgba(255,255,255,.85);font-weight:400}
.ph .tags{margin-top:clamp(14px,1.4vw,26px);display:flex;flex-wrap:wrap;gap:8px}
.ph .tag{display:inline-block;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.25em .9em;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.85)}
.ph .tag.y{border-color:var(--yellow);color:var(--yellow)}

/* ---------- セクション ---------- */
.sec{padding:calc(90 * var(--u)) 0}
.sec .in{width:min(1040px,calc(100% - 48px))}
.sec+.sec{border-top:1px solid rgba(255,255,255,.18)}
.h3{font-weight:900;font-size:clamp(18px,1.6vw,28px);letter-spacing:.1em;color:#fff;line-height:1.4}
.h3::before{content:"◯";font-size:.75em;color:var(--yellow);margin-right:.5em;vertical-align:.1em}
.sec p{margin-top:clamp(12px,1.2vw,20px);font-size:clamp(14px,1vw,18px);line-height:2;letter-spacing:.05em;color:rgba(255,255,255,.88);font-weight:400;max-width:820px}
.sec p .w{display:inline-block}
.sec p b{font-weight:900;color:#fff}
.sec ul.dots{margin-top:clamp(12px,1.2vw,20px);max-width:820px}
.sec ul.dots li{position:relative;padding-left:1.2em;font-size:clamp(14px,1vw,18px);line-height:2;letter-spacing:.05em;color:rgba(255,255,255,.88)}
.sec ul.dots li::before{content:"";position:absolute;left:0;top:1em;width:.6em;height:1px;background:var(--yellow)}

/* KV */
.kv{margin:0 auto;max-width:1040px;padding:clamp(24px,3vw,56px) 0 0}
.kv .box{background:#fff;border-radius:clamp(14px,1.4vw,24px);padding:clamp(24px,3.5vw,64px);display:flex;align-items:center;justify-content:center;min-height:clamp(200px,24vw,420px);box-shadow:0 24px 60px rgba(60,0,8,.3)}
.kv .box img{max-height:clamp(160px,22vw,380px);width:auto;max-width:100%}
.kv .box.dark{background:#1a1a1a}
.kv .box.photo{padding:0;overflow:hidden}
.kv .box.photo img{max-height:none;width:100%;height:100%;object-fit:cover}
.kv .txt{font-weight:900;font-size:clamp(24px,3vw,52px);letter-spacing:.14em;color:var(--red-dark);text-align:center;line-height:1.3}
.kv .txt small{display:block;font-family:var(--futura);font-weight:500;font-size:.35em;letter-spacing:.32em;color:var(--ink-3);margin-top:.6em}

/* 仕様表 */
.spec{margin-top:clamp(16px,1.6vw,28px);border-top:1px solid rgba(255,255,255,.25);max-width:820px}
.spec div{display:grid;grid-template-columns:max(110px,calc(170 * var(--u))) 1fr;gap:12px;padding:clamp(10px,1vw,16px) 0;border-bottom:1px solid rgba(255,255,255,.25);font-size:clamp(13px,.95vw,17px);letter-spacing:.06em;line-height:1.8}
.spec dt{color:rgba(255,255,255,.6);white-space:nowrap}
.spec dd{color:#fff}

/* カードグリッド（一覧） */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,28px);margin-top:clamp(24px,2.6vw,46px)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.gcard{display:block;border:1px solid rgba(255,255,255,.22);border-radius:clamp(12px,1.2vw,20px);overflow:hidden;background:rgba(0,0,0,.12);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.gcard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.6);box-shadow:0 20px 44px rgba(60,0,8,.3)}
.gcard .im{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;padding:clamp(14px,1.6vw,26px)}
.gcard .im img{max-width:100%;max-height:100%;object-fit:contain}
.gcard .im.dark{background:#1a1a1a}
.gcard .im.t{flex-direction:column;background:linear-gradient(160deg,#ad1e26,#7d0f15);color:#fff;font-weight:900;font-size:clamp(16px,1.4vw,24px);letter-spacing:.12em;text-align:center;line-height:1.4;padding:clamp(18px,2vw,34px)}
.gcard .im.t small{display:block;font-family:var(--futura);font-weight:500;font-size:.6em;letter-spacing:.3em;opacity:.7;margin-top:.6em}
.gcard .bd{padding:clamp(14px,1.4vw,22px) clamp(16px,1.6vw,24px) clamp(18px,1.8vw,26px)}
.gcard .cat{font-family:var(--futura);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--yellow)}
.gcard h3{margin-top:.3em;font-weight:900;font-size:clamp(15px,1.15vw,20px);letter-spacing:.08em;line-height:1.4;color:#fff}
.gcard p{margin-top:.4em;font-size:clamp(12px,.85vw,14px);line-height:1.8;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.gcard .soon{display:inline-block;margin-top:.6em;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.3);padding:.15em .7em;border-radius:999px}

/* フィルタ */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2vw,34px)}
.filter button{border:1px solid rgba(255,255,255,.4);background:none;color:rgba(255,255,255,.85);border-radius:999px;padding:.35em 1.1em;font-size:13px;letter-spacing:.12em;cursor:pointer;transition:background .3s,color .3s}
.filter button.on,.filter button:hover{background:#fff;color:var(--red)}
.grid .gcard.hide{display:none}

/* 一覧（お知らせ・記事） */
.list{margin-top:clamp(18px,2vw,34px);border-top:1px solid rgba(255,255,255,.25)}
.list li{display:grid;grid-template-columns:max(96px,calc(150 * var(--u))) max(80px,calc(120 * var(--u))) 1fr;gap:14px;padding:clamp(14px,1.3vw,22px) 4px;border-bottom:1px solid rgba(255,255,255,.25);font-size:clamp(14px,1vw,18px);letter-spacing:.05em;align-items:baseline}
.list time{font-family:var(--futura);letter-spacing:.1em;color:rgba(255,255,255,.7)}
.list .cat{font-size:11px;letter-spacing:.2em;color:var(--yellow)}
.list a:hover{color:var(--yellow)}

/* 数字タイル */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,24px);margin-top:clamp(18px,2vw,34px)}
.tile{border:1px solid rgba(255,255,255,.25);border-radius:clamp(12px,1.2vw,20px);padding:clamp(18px,2vw,32px);text-align:center}
.tile .n{font-family:var(--futura);font-weight:500;font-size:clamp(32px,3.4vw,60px);line-height:1;color:var(--yellow)}
.tile .n small{font-size:.4em;color:#fff;margin-left:.1em;font-family:var(--font);font-weight:700}
.tile .l{margin-top:.6em;font-size:clamp(12px,.9vw,15px);letter-spacing:.1em;color:rgba(255,255,255,.85);line-height:1.6}

/* ステップ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,24px);margin-top:clamp(18px,2vw,34px)}
.steps li{border:1px solid rgba(255,255,255,.25);border-radius:clamp(12px,1.2vw,20px);padding:clamp(16px,1.8vw,28px)}
.steps .no{font-family:var(--futura);font-size:clamp(22px,2vw,34px);color:var(--yellow);line-height:1}
.steps h4{margin-top:.5em;font-weight:900;font-size:clamp(14px,1.1vw,19px);letter-spacing:.08em;color:#fff}
.steps p{margin-top:.5em;font-size:clamp(12px,.85vw,15px);line-height:1.8;color:rgba(255,255,255,.75)}

/* 準備中 */
.soonbox{margin-top:clamp(18px,2vw,34px);border:1px dashed rgba(255,255,255,.4);border-radius:clamp(12px,1.2vw,20px);padding:clamp(22px,2.6vw,44px);text-align:center}
.soonbox .k{color:var(--yellow)}
.soonbox p{margin:.6em auto 0;text-align:center}

/* CTA */
.cta{padding:calc(90 * var(--u)) 0;text-align:center;border-top:1px solid rgba(255,255,255,.18)}
.cta .t{font-weight:900;font-size:clamp(18px,1.8vw,30px);letter-spacing:.14em;color:#fff}
.cta .btns{margin-top:clamp(18px,2vw,32px);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 clamp(26px,3vw,48px);border-radius:999px;border:1px solid rgba(255,255,255,.6);font-weight:700;font-size:14px;letter-spacing:.14em;color:#fff;transition:background .3s,color .3s,transform .25s var(--ease)}
.btn:hover{background:#fff;color:var(--red);transform:translateY(-2px)}
.btn.solid{background:#fff;color:var(--red)}
.btn.solid:hover{background:var(--yellow);border-color:var(--yellow)}

/* 前後ナビ */
.pn{display:flex;justify-content:space-between;gap:16px;padding:calc(40 * var(--u)) 0;border-top:1px solid rgba(255,255,255,.18);font-size:13px;letter-spacing:.1em}
.pn a{color:rgba(255,255,255,.8)}.pn a:hover{color:var(--yellow)}

/* ---------- 共通ヘッダーのドロップダウン ---------- */
.hdr nav .dd{position:relative}
.hdr nav .dd>a::after{display:none}
.hdr nav .dd .menu{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);min-width:220px;background:#fff;border-radius:12px;padding:10px 0;box-shadow:0 20px 50px rgba(60,0,8,.35);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.hdr nav .dd:hover .menu,.hdr nav .dd:focus-within .menu{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.hdr nav .dd .menu a{display:block;padding:9px 20px;font-size:13px;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.hdr nav .dd .menu a:hover{color:var(--red);background:var(--red-soft)}
.hdr nav .dd .menu .gl{padding:8px 20px 4px;font-family:var(--futura);font-size:10px;letter-spacing:.3em;color:var(--ink-3)}
.menu-ov .grp{display:grid;grid-template-columns:repeat(3,auto);gap:10px 36px;margin-top:10px}
.menu-ov .grp a{font-size:clamp(13px,1.1vw,16px);font-weight:400;letter-spacing:.1em;color:rgba(255,255,255,.8)}
.menu-ov .grp .gl{grid-column:1/-1;font-family:var(--futura);font-size:10px;letter-spacing:.3em;color:rgba(255,255,255,.5);margin-top:6px}

@media (max-width:1100px){.hdr nav{display:none}}
@media (max-width:860px){
  .ph{padding:50px 0 40px}
  .sec{padding:56px 0}
  .grid,.grid.two,.tiles,.steps{grid-template-columns:1fr}
  .list li{grid-template-columns:84px 1fr;grid-template-rows:auto auto}
  .list li .cat{grid-column:2}
  .list li a,.list li span:last-child{grid-column:1/-1}
  .spec div{grid-template-columns:96px 1fr}
  .menu-ov .grp{grid-template-columns:1fr 1fr;gap:8px 24px}
  .cta{padding:56px 0}
}
/* phrase wrap */
.tile .l,.spec dd,.gcard .bd p,.steps p,.sec p,.ph .lead,.soonbox p,.cta .t{word-break:keep-all;overflow-wrap:anywhere}
.tile .l .w,.spec dd .w,.gcard .bd p .w,.steps p .w,.ph .lead .w,.sl{display:inline-block}
.hdr nav .dd .menu a.c{padding-left:34px;font-size:12px;color:var(--ink-2,#444)}
.hdr nav .dd .menu a.c::before{content:"–";margin-right:.5em;opacity:.5}
/* figures (works detail) */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,24px);margin-top:clamp(18px,2vw,32px)}
.figs.two{grid-template-columns:repeat(2,1fr)}
.fig{margin:0}
.fig .im{background:#fff;border-radius:clamp(10px,1vw,16px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.fig .im.dark{background:#4a4a4a}
.fig img{width:100%;height:auto;display:block}
.fig figcaption{margin-top:10px;font-size:clamp(11px,.8vw,13px);letter-spacing:.12em;color:rgba(255,255,255,.7);line-height:1.7}
.fig figcaption b{display:block;font-family:var(--futura);font-weight:500;font-size:1.15em;letter-spacing:.2em;color:#fff;margin-bottom:2px}
.fig.single{margin-top:clamp(18px,2vw,32px)}
.fig.single .im{padding:0}
@media (max-width:860px){.figs,.figs.two{grid-template-columns:1fr}}
.fig.single .im{background:#ececec}
.fig.single .im img{max-height:min(70vh,640px);width:auto;max-width:100%}
.fig.single.small .im{background:#fff;padding:clamp(28px,4vw,64px)}
.fig.single.small .im img{max-height:clamp(140px,18vw,260px)}