/* QUEST 公式サイト見本：全ページ共通の見た目（トップの見本から切り出し） */
:root{
  /* 標準の色＝印刷風のオレンジ（M65 Y100 あたりの見え方）。濃い面はロゴの墨色 */
  --ink:#15191F; --ink2:#262C35; --slate:#5A6B80; --line:#DCE6EF; --white:#fff;
  --accent:#EE7800; --accent-deep:#C45F00; --accent-light:#F7931E;
  --tint:#FFF5EA;
  --on-dark:rgba(255,255,255,.76); --line-dark:rgba(255,255,255,.18);
  --gutter:clamp(20px,5vw,96px);
  --section:clamp(72px,9vw,168px);
  --hh:clamp(64px,5vw,88px);
  --maxw:2200px;
  /* 中身の左右余白。2200px超の超ワイドだけ中央寄せ */
  --edge-pct:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --edge:max(var(--gutter), calc((100cqw - var(--maxw)) / 2 + var(--gutter)));
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --en:"Montserrat","Noto Sans JP",sans-serif;
}
:root[data-accent="green"]{
  --accent:#00A693; --accent-deep:#00796C; --accent-light:#2CD3BE; --tint:#EEF6F4;
}
/* 見比べ用：シアン（営業資料と同じ） */
:root[data-accent="cyan"]{
  --accent:#009FCE; --accent-deep:#0062B2; --accent-light:#00C8E6; --tint:#EFF5FB;
  --ink:#0B1622; --ink2:#182636;
}
/* ロゴのオレンジそのまま（実測 #E8551F） */
:root[data-accent="logo"]{
  --accent:#E8551F; --accent-deep:#BF3F10; --accent-light:#F47A45; --tint:#FFF2EC;
  --ink:#15191F; --ink2:#262C35;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;padding-top:var(--hh);
  font-family:var(--jp);font-size:clamp(15px,1.05vw,18px);line-height:1.9;
  color:var(--slate);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html.menu-open{overflow:hidden}

.page{container-type:inline-size}
.wrap{padding-inline:var(--edge)}
.nb{display:inline-block}

/* 見出し */
h1,h2,h3,h4{color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;font-feature-settings:"palt"}
.entry .tt,.row-tt,.mq li{font-feature-settings:"palt"}
h2{font-size:clamp(26px,2.6vw,48px);font-weight:900;line-height:1.35}
.kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:24px;
  font-family:var(--en);font-weight:800;font-size:13px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.kicker::before{content:"";flex:none;width:28px;height:2px;background:currentColor}
/* 画面いっぱいの英字 */
.disp{
  font-family:var(--en);font-weight:900;font-size:clamp(64px,13cqw,260px);
  line-height:.82;letter-spacing:-.035em;color:var(--ink);
  margin:0 0 clamp(20px,2vw,40px) -.05em;
}
.sec-side h2{display:flex;align-items:center;gap:16px}
.sec-side h2::before{content:"";flex:none;width:clamp(28px,3vw,56px);height:4px;background:var(--accent)}
.sec-side .btn{margin-top:clamp(24px,2.4vw,40px)}
.sec-head.big{display:block}
.sec.has-disp{padding-top:clamp(56px,6vw,120px)}
.lead{max-width:40em;margin-top:20px;text-wrap:pretty}
p{text-wrap:pretty}
.sec-side .lead,.reasons p,.flow p,.card-desc,.grp-intro p,.row-ds,.entry .ds{text-wrap:balance;word-break:auto-phrase}

/* ボタン */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  height:56px;padding:0 28px;border:2px solid var(--ink);border-radius:4px;
  font-family:var(--jp);font-size:15px;font-weight:700;line-height:1;white-space:nowrap;
  transition:background-color .25s,color .25s,border-color .25s;
}
.arr{display:inline-block;font-family:var(--en);font-weight:800;transition:transform .25s}
.btn:hover .arr,.tlink:hover .arr{transform:translateX(4px)}
.btn-main{background:var(--ink);color:#fff}
.btn-main:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn-sub{background:#fff;color:var(--ink)}
.btn-sub:hover{background:var(--ink);color:#fff}
.btn-accent{
  height:clamp(64px,5vw,88px);padding:0 clamp(28px,3vw,56px);font-size:clamp(16px,1.3vw,22px);font-weight:900;
  background:var(--accent);border-color:var(--accent);color:var(--ink);
}
.btn-accent:hover{background:#fff;border-color:#fff}
.tlink{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;line-height:1.6;border-bottom:2px solid var(--accent);padding-bottom:4px}
.tlink:hover{color:var(--accent-deep)}
.circ{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:clamp(44px,3.6vw,64px);height:clamp(44px,3.6vw,64px);border:2px solid currentColor;border-radius:50%;
  font-family:var(--en);font-weight:800;font-size:clamp(16px,1.3vw,22px);line-height:1;
  transition:transform .3s,background-color .3s,border-color .3s,color .3s;
}

/* ヘッダー */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hh);
  background:#fff;padding-inline:var(--edge-pct);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hd-logo{display:block;flex:none;line-height:0}
.hd-logo img{height:clamp(28px,2.4vw,40px);width:auto}
/* ロゴ横の Instagram・公式LINE（旧サイトから引き継ぎ。色は墨、触れるとオレンジ） */
.hd-sns{display:flex;align-items:center;gap:2px;flex:none;margin-left:-8px;margin-right:auto}
.hd-sns a{display:grid;place-items:center;width:40px;height:40px;color:var(--ink);transition:color .2s}
.hd-sns a:hover{color:var(--accent)}
.hd-sns svg{width:24px;height:24px;fill:currentColor}
.hd-nav{display:none;align-items:center;gap:clamp(16px,2vw,40px)}
.hd-nav ul{display:flex;align-items:center;gap:clamp(16px,2vw,40px)}
.hd-nav ul a{position:relative;font-size:14px;font-weight:700;color:var(--ink);line-height:1;padding:10px 0}
.hd-nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.hd-nav ul a:hover::after{transform:scaleX(1)}
.hd-nav .btn{height:44px;padding:0 22px}
.burger{
  display:block;position:relative;flex:none;width:44px;height:44px;padding:0;
  border:2px solid var(--ink);border-radius:4px;background:#fff;
}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .3s,opacity .2s}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{
  position:fixed;left:0;right:0;top:var(--hh);bottom:0;z-index:99;background:var(--ink);
  overflow-y:auto;padding:16px var(--gutter) 48px;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.menu.open{opacity:1;visibility:visible}
.menu li a{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0;border-bottom:1px solid var(--line-dark);
  font-size:22px;font-weight:900;color:#fff;line-height:1.4;
}
.menu li a span{font-family:var(--en);color:var(--accent-light)}
.menu .btn{width:100%;margin-top:32px;background:var(--accent);border-color:var(--accent);color:var(--ink)}

/* 1. 最初の画面 */
.hero{position:relative;background:var(--ink);color:#fff}
.hero-text{padding:clamp(48px,8vw,72px) var(--edge) clamp(40px,6vw,56px)}
.hero .kicker{color:var(--accent-light)}
.hero h1{
  color:#fff;font-size:clamp(30px,8.6cqw,56px);font-weight:900;line-height:1.5;letter-spacing:-.01em;
}
.hero h1 .ln{display:block}
.hero h1 .ln1{margin-left:-.2em}
/* テロップの座布団 */
.pl{
  padding:.04em .2em;background:var(--ink);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.pl-a{background:var(--accent);color:var(--ink)}
.pl-w{background:#fff;color:var(--ink)}
.pl-n{white-space:nowrap}
.hero-lead{margin-top:clamp(20px,2vw,36px);color:rgba(255,255,255,.88);font-size:clamp(15px,1.15vw,20px);font-weight:500;word-break:keep-all;overflow-wrap:anywhere}
.hero-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#05090e}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-tools{
  position:absolute;right:16px;top:16px;z-index:3;display:flex;align-items:center;gap:12px;
  padding:4px 4px 4px 14px;border-radius:999px;background:rgba(5,9,14,.62);
  color:#fff;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.04em;
}
.hero-ctl{
  width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:background-color .2s;
}
.hero-ctl:hover{background:var(--accent-light)}
.hero-ctl svg{width:14px;height:14px;fill:currentColor}
.hero-ctl .i-play{display:block;margin-left:2px}
.hero-ctl .i-pause{display:none}
.hero-ctl.is-playing .i-play{display:none}
.hero-ctl.is-playing .i-pause{display:block}

/* 入口2つ（色の面） */
.entries{display:grid;grid-template-columns:1fr}
.entry{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:24px;
  min-height:clamp(112px,9.6vw,184px);padding:24px var(--edge);overflow:hidden;
  transition:background-color .3s,color .3s;
}
.entry-a{background:var(--accent);color:var(--ink)}
.entry-b{background:var(--ink2);color:#fff}
.entry .no{display:block;font-family:var(--en);font-weight:800;font-size:12px;letter-spacing:.16em;line-height:1;margin-bottom:12px;opacity:.7}
.entry .tt{display:block;font-size:clamp(22px,2.5vw,48px);font-weight:900;line-height:1.3;letter-spacing:-.01em}
.entry .ds{display:block;margin-top:8px;font-size:clamp(13px,.95vw,16px);font-weight:500;line-height:1.6;opacity:.86}
.entry:hover .circ{transform:translateX(8px);background:var(--ink);border-color:var(--ink);color:#fff}
.entry-b:hover{background:#fff;color:var(--ink)}
.entry-b:hover .circ{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.entry-a:hover{background:var(--accent-light)}

/* 共通セクション */
.sec{padding-block:var(--section)}
.sec.tint{background:var(--tint)}
.sec.dark{background:var(--ink);color:var(--on-dark)}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.pop{background:var(--accent);color:var(--ink)}
.sec-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:32px 48px;margin-bottom:clamp(40px,4.5vw,88px);
}

/* 2. 制作実績 */
.sub{
  display:flex;align-items:center;gap:16px;margin-bottom:clamp(24px,2.4vw,40px);
  font-size:clamp(20px,1.7vw,30px);font-weight:900;line-height:1.4;
}
.sub::before{content:"";flex:none;width:12px;height:12px;background:var(--accent)}
.sub::after{content:"";flex:1;height:2px;background:var(--ink)}
.sub.grp::before{background:var(--slate)}
.sub.grp::after{background:var(--line)}
.works-sub2{margin-top:clamp(64px,7vw,128px)}
.g2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,40px)}
.g2 .card-title{font-size:clamp(18px,1.7cqw,32px)}
.card-img .play{
  position:absolute;right:clamp(12px,1vw,20px);bottom:clamp(12px,1vw,20px);
  width:clamp(48px,3.4vw,64px);height:clamp(48px,3.4vw,64px);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--accent);color:var(--ink);transition:transform .3s,background-color .3s;
}
.card-img .play svg{width:34%;height:34%;margin-left:6%;fill:currentColor}
.card:hover .play{transform:scale(1.12);background:#fff}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,40px);align-items:start}
.card{display:block}
.card-img{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--tint)}
.card-img.wide{aspect-ratio:2/1}
.card-img.frame::after{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
.card-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.6,.2,1);
}
.card:hover .card-img img{transform:scale(1.04)}
.card-body{position:relative;padding-top:20px}
.tag{
  display:inline-block;background:var(--accent);padding:6px 10px 5px;color:var(--ink);
  font-size:12px;font-weight:900;line-height:1.2;letter-spacing:.06em;
}
.tag.grp{background:none;border:1px solid var(--slate);color:var(--slate);font-weight:700;padding:5px 9px 4px}
.g2 .tag{position:absolute;left:0;top:0;transform:translateY(-50%);font-size:13px;padding:8px 14px 7px}
.g2 .card-body{padding-top:clamp(28px,2.4vw,40px)}
.card-title{margin-top:12px;font-size:clamp(20px,2cqw,38px);font-weight:900;line-height:1.45;letter-spacing:-.005em}
.g2 .card-title{margin-top:0}
.g3 .card-title{font-size:clamp(16px,1.25vw,22px)}
.card-title span{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 3px no-repeat;transition:background-size .4s;padding-bottom:4px}
.card:hover .card-title span{background-size:100% 3px}
.card-desc{margin-top:10px;font-size:clamp(14px,.95vw,16px);line-height:1.8}
.grp-intro p{max-width:40em}
.grp-intro .tlink{margin-top:24px}

/* 流れる帯 */
.mq{overflow:hidden;background:var(--accent);color:var(--ink);padding-block:clamp(16px,1.6vw,28px)}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq ul{display:flex;flex:none}
.mq li{
  display:flex;align-items:center;white-space:nowrap;
  font-size:clamp(24px,3.4vw,64px);font-weight:900;line-height:1.2;letter-spacing:-.01em;
}
.mq li::after{content:"";width:.34em;height:.34em;margin:0 .7em;border-radius:50%;background:#fff}
@keyframes mq{to{transform:translateX(-50%)}}

/* 3. 考え方 */
.phil h2{font-size:clamp(30px,8cqw,64px);line-height:1.28;letter-spacing:-.02em;color:#fff}
.phil h2 em{font-style:normal;color:var(--accent-light)}
.phil-top{display:grid;gap:clamp(32px,4vw,80px)}
/* 自社制作CMの連続再生 */
.cm{min-width:0}
.cm-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px;font-size:13px;font-weight:700;line-height:1.4;color:#fff}
.cm-now{margin-left:auto;font-size:15px;font-weight:900;color:var(--accent-light)}
.cm-screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;cursor:pointer}
.cm-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 再生・音のボタンは動画の下の列に置く（動画の中に重ねると、PVの字幕や左上のロゴと重なるため） */
.cm-bar{display:flex;align-items:center;gap:8px;margin-top:10px}
.cm-btn{
  height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  background:none;color:#fff;font-size:12px;font-weight:700;line-height:1;
  display:flex;align-items:center;gap:8px;transition:background-color .2s,color .2s,border-color .2s;
}
.cm-btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.cm-btn svg{width:14px;height:14px;fill:currentColor}
.cm-play{width:36px;padding:0;justify-content:center}
.cm-play .i-play{display:block;margin-left:2px}
.cm-play .i-pause{display:none}
.cm-play.is-playing .i-play{display:none}
.cm-play.is-playing .i-pause{display:block}
.cm-hint{position:absolute;top:12px;right:12px;z-index:3;max-width:calc(100% - 24px);padding:8px 12px;border-radius:999px;background:rgba(5,9,14,.72);color:#fff;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s}
.cm-hint.is-on{opacity:1}
.cm-snd[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.cm-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:12px}
.cm-list .nm,.cm-list .ty{white-space:nowrap}
/* 会社PVの札は1段目をひとりで使う（15秒CMの6本と区別） */
.cm-list .pv{grid-column:1/-1}
.cm-list .pv .nm{white-space:normal}
.cm-head .tag{flex:none}
.cm-list button{
  display:block;width:100%;padding:0 0 4px;border:0;background:none;text-align:left;
  color:var(--on-dark);font-size:clamp(11px,.85vw,14px);font-weight:700;line-height:1.4;transition:color .2s;
}
.cm-list .bar{display:block;height:4px;background:var(--line-dark);overflow:hidden}
.cm-list .bar i{display:block;width:0;height:100%;background:var(--accent)}
.cm-list .nm{display:block;margin-top:8px}
.cm-list .ty{display:block;font-size:11px;font-weight:500;opacity:.7}
.cm-list button:hover,.cm-list button[aria-current="true"]{color:#fff}
.phil-row{
  margin-top:clamp(40px,5vw,96px);padding-top:clamp(32px,3vw,56px);border-top:1px solid var(--line-dark);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:start;
}
.phil-row p{max-width:40em}
.pillars{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2vw,32px)}
/* 2本柱：触ると白黒が反転し、それぞれの絵が動く。押すと各ページへ */
.pillar{
  position:relative;display:block;overflow:hidden;padding:clamp(20px,2.2vw,40px);
  border:1px solid var(--line-dark);border-top:4px solid var(--accent);
  color:var(--on-dark);transition:background-color .3s,color .3s,border-color .3s;
}
.pillar h3{position:relative;z-index:1;font-size:clamp(22px,2.2vw,40px);font-weight:900;line-height:1.4;transition:color .3s}
.pillar p{position:relative;z-index:1;margin-top:8px;font-size:clamp(14px,1vw,17px);line-height:1.7}
.pillar-go{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-top:12px;
  font-size:13px;font-weight:700;line-height:1.4;color:#fff;transition:color .3s;
}
.pillar:hover .pillar-go,.pillar:focus-visible .pillar-go{color:var(--ink)}
.pillar:hover,.pillar:focus-visible{background:#fff;border-color:var(--accent) #fff #fff;color:var(--slate)}
.sec.dark .pillar:hover h3,.sec.dark .pillar:focus-visible h3{color:var(--ink)}
.pillar:hover .arr,.pillar:focus-visible .arr{transform:translateX(6px)}
.fx{position:absolute;inset:0;pointer-events:none}
/* つくるチカラ：カメラの枠・録画の印・進む線 */
.fx-make .c{
  position:absolute;width:clamp(12px,1.1vw,20px);height:clamp(12px,1.1vw,20px);
  border:3px solid var(--accent);opacity:0;transition:opacity .25s,transform .45s cubic-bezier(.2,.9,.2,1);
}
.fx-make .c1{left:10px;top:10px;border-right:0;border-bottom:0;transform:translate(-12px,-12px)}
.fx-make .c2{right:10px;top:10px;border-left:0;border-bottom:0;transform:translate(12px,-12px)}
.fx-make .c3{left:10px;bottom:10px;border-right:0;border-top:0;transform:translate(-12px,12px)}
.fx-make .c4{right:10px;bottom:10px;border-left:0;border-top:0;transform:translate(12px,12px)}
.fx-make .rec{
  position:absolute;right:clamp(24px,2.4vw,44px);top:clamp(24px,2.5vw,46px);
  display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .25s .15s;
  font-family:var(--en);font-weight:800;font-size:clamp(12px,1vw,16px);line-height:1;letter-spacing:.14em;color:var(--ink);
}
.fx-make .rec::before{content:"";width:.8em;height:.8em;border-radius:50%;background:var(--accent)}
.fx-make .tl{position:absolute;left:0;bottom:0;height:5px;width:0;background:var(--accent)}
.pillar:hover .fx-make .c,.pillar:focus-visible .fx-make .c{opacity:1;transform:none}
.pillar:hover .fx-make .rec,.pillar:focus-visible .fx-make .rec{opacity:1}
.pillar:hover .fx-make .rec::before,.pillar:focus-visible .fx-make .rec::before{animation:blink 1s steps(1) infinite}
.pillar:hover .fx-make .tl,.pillar:focus-visible .fx-make .tl{width:100%;transition:width 2.4s linear .1s}
@keyframes blink{50%{opacity:0}}
/* 届けるチカラ：一点から広がる波 */
.fx-send{opacity:0;transition:opacity .25s}
.fx-send .o{
  position:absolute;right:clamp(36px,3.4vw,68px);top:50%;
  width:14px;height:14px;margin:-7px -7px 0 0;border-radius:50%;background:var(--accent);
}
.fx-send .w{
  position:absolute;right:clamp(36px,3.4vw,68px);top:50%;
  width:40px;height:40px;margin:-20px -20px 0 0;border-radius:50%;border:2px solid var(--accent);
  opacity:0;animation:wave 2.1s cubic-bezier(.2,.6,.3,1) infinite paused;
}
.fx-send .w2{animation-delay:.7s}
.fx-send .w3{animation-delay:1.4s}
.pillar:hover .fx-send,.pillar:focus-visible .fx-send{opacity:1}
.pillar:hover .fx-send .w,.pillar:focus-visible .fx-send .w{animation-play-state:running}
/* 波は文字にかからない大きさで止める */
@keyframes wave{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.6);opacity:0}}
.times{font-family:var(--en);font-weight:900;font-size:clamp(32px,3.6vw,64px);line-height:1;color:var(--accent-light)}

/* 4. サービス（触ると反転する一覧） */
.svc-list{border-bottom:2px solid var(--ink)}
.row{
  display:grid;grid-template-columns:clamp(64px,7vw,136px) minmax(0,4fr) minmax(0,5fr) auto;
  align-items:center;column-gap:clamp(20px,3vw,64px);
  padding:clamp(28px,3vw,56px) var(--edge);border-top:2px solid var(--ink);
  color:var(--ink);transition:background-color .3s,color .3s;
}
.row-no{font-family:var(--en);font-weight:900;font-size:clamp(20px,1.8vw,32px);line-height:1;color:var(--accent);transition:color .3s}
.row-tt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:clamp(28px,3.6vw,68px);font-weight:900;line-height:1.3;letter-spacing:-.02em}
.row-ds{color:var(--slate);transition:color .3s}
.row-go{display:flex;align-items:center;gap:16px;font-size:14px;font-weight:700;line-height:1.4;white-space:nowrap}
.row:hover{background:var(--ink);color:#fff}
.row:hover .row-ds{color:var(--on-dark)}
.row:hover .row-no{color:var(--accent-light)}
.row:hover .circ{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:translateX(8px)}

/* 5. 選ばれる理由（差し色の面） */
.reasons{display:grid;grid-template-columns:repeat(3,1fr)}
.reasons>div{padding:0 clamp(24px,3vw,64px)}
.reasons>div:first-child{padding-left:0}
.reasons>div:last-child{padding-right:0}
.reasons>div+div{border-left:2px solid rgba(11,22,34,.22)}
.reasons .rn{font-family:var(--en);font-weight:900;font-size:clamp(72px,9vw,176px);line-height:.85;letter-spacing:-.04em;color:#fff}
.reasons h3{margin-top:clamp(20px,2vw,36px);font-size:clamp(20px,1.7vw,30px);font-weight:900;line-height:1.45;color:var(--ink)}
.reasons p{margin-top:12px;color:var(--ink);font-weight:500}
.sec.pop .kicker{color:var(--ink)}
.reasons-head{margin-bottom:clamp(40px,4.5vw,88px)}

/* 6. 流れ */
.flow{--fg:24px;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--fg)}
.flow li{position:relative}
.flow .c{
  width:56px;height:56px;border-radius:50%;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--en);font-weight:900;font-size:20px;line-height:1;color:#fff;
}
.flow li:last-child .c{background:var(--accent);color:var(--ink)}
.flow li:not(:last-child)::after{
  content:"";position:absolute;top:27px;left:64px;right:calc(-1 * var(--fg) + 8px);height:2px;background:var(--ink);
}
.flow h3{margin-top:24px;font-size:clamp(17px,1.4vw,24px);font-weight:900;line-height:1.5}
.flow p{margin-top:8px;font-size:clamp(13px,.95vw,15px);line-height:1.8}

/* 7. FAQ */
.faq-wrap{display:grid;grid-template-columns:4fr 8fr;gap:clamp(40px,6vw,120px);align-items:start}
.faq-side{position:sticky;top:calc(var(--hh) + 32px)}
.faq-list{border-top:2px solid var(--ink)}
.faq-list details{border-bottom:1px solid rgba(11,22,34,.2)}
.faq-list summary{
  display:flex;align-items:center;gap:16px;padding:24px 0;cursor:pointer;list-style:none;
  font-size:clamp(16px,1.3vw,22px);font-weight:700;line-height:1.6;color:var(--ink);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .mk{flex:none;width:28px;font-family:var(--en);font-weight:900;font-size:20px;line-height:1;color:var(--accent)}
.faq-list .ans .mk{color:var(--slate);padding-top:.35em}
.faq-list .pm{position:relative;flex:none;width:16px;height:16px;margin-left:auto}
.faq-list .pm::before,.faq-list .pm::after{content:"";position:absolute;background:var(--ink);transition:transform .3s}
.faq-list .pm::before{left:0;right:0;top:7px;height:2px}
.faq-list .pm::after{top:0;bottom:0;left:7px;width:2px}
.faq-list details[open] .pm::after{transform:scaleY(0)}
.faq-list .ans{display:flex;gap:16px;padding:0 40px 28px 0;max-width:46em}
.faq-list details[open] .ans{animation:fadein .4s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* 8. お知らせ */
.news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(32px,3.4vw,56px)}
.news-list{border-top:2px solid var(--ink)}
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{
  display:grid;grid-template-columns:clamp(104px,10vw,168px) 1fr auto;gap:24px;align-items:baseline;
  padding:24px 0;color:var(--ink);font-weight:500;line-height:1.7;transition:color .2s,padding .3s;
}
.news-list time{font-family:var(--en);font-weight:800;font-size:14px;letter-spacing:.04em;color:var(--accent)}
.news-list a:hover{color:var(--accent-deep);padding-left:12px}

/* 9. お問い合わせ（濃い面） */
.band{background:var(--ink);color:#fff;padding-block:clamp(80px,9vw,176px)}
.band .kicker{color:var(--accent-light)}
.band h2{color:#fff;font-size:clamp(30px,5cqw,96px);line-height:1.3;letter-spacing:-.02em}
.band-row{
  margin-top:clamp(32px,3.6vw,72px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px 64px;
}
.band p{color:var(--on-dark);font-size:clamp(15px,1.2vw,20px);font-weight:500}

/* 10. フッター */
.ft{padding-top:clamp(56px,6vw,96px)}
.ft-grid{display:grid;grid-template-columns:1.3fr 1.5fr 1fr 1fr;gap:40px clamp(32px,4vw,80px)}
.ft-logo img{height:clamp(28px,2.4vw,40px);width:auto}
.ft-name{margin-top:20px;font-size:14px;font-weight:700;color:var(--ink);line-height:1.7}
.ft-name span{display:block;margin-top:4px;font-weight:400;color:var(--slate)}
.ft h4{margin-bottom:16px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--slate);line-height:1.4}
.ft address{font-style:normal;font-size:14px;line-height:1.8}
.ft address+address{margin-top:16px}
.ft address b{display:block;font-weight:700;color:var(--ink)}
.ft .tel{margin-top:16px;font-size:14px;line-height:1.8}
.ft .tel a{font-family:var(--en);font-weight:800;color:var(--ink)}
.ft-links{display:grid;gap:10px;font-size:14px;line-height:1.6}
.ft-links a{color:var(--ink);transition:color .2s}
.ft-links a:hover{color:var(--accent-deep)}
.ft-bottom{
  margin-top:clamp(48px,5vw,80px);padding:24px 0 32px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.6;color:var(--slate);
}

/* 11. AI相談 */
.ai{
  position:fixed;right:24px;bottom:24px;z-index:90;width:60px;height:60px;padding:0;
  border:2px solid #fff;border-radius:50%;background:var(--ink);color:#fff;
  font-family:var(--jp);font-size:11px;font-weight:700;line-height:1;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;transition:background-color .25s,color .25s;
}
.ai:hover{background:var(--accent);color:var(--ink)}

/* 12. 見本用の道具 */
.tool{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:95;
  display:flex;align-items:center;gap:10px;padding:6px 10px;
  background:#fff;border:1px solid var(--line);border-left:0;border-radius:0 4px 4px 0;
  font-family:var(--jp);font-size:11px;line-height:1;color:var(--slate);white-space:nowrap;
}
.tool i{width:1px;height:12px;background:var(--line)}
.tool b{font-family:var(--en);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tool button{
  padding:5px 8px;border:1px solid var(--line);border-radius:3px;background:#fff;
  font-size:11px;line-height:1;color:var(--slate);
}
.tool button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:700}
.tool .tool-tg{border:0;padding:4px 2px;font-weight:700;color:var(--ink)}
.tool.shut>*:not(.tool-tg){display:none}
.tool.shut{padding:10px 4px}
.tool.shut .tool-tg{writing-mode:vertical-rl;padding:0;letter-spacing:.1em}

/* ふわっと表示 */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* ===== 幅1024px以上 ===== */
@media (min-width:1024px){
  .burger,.menu{display:none}
  .hd-nav{display:flex}
  .hero{
    display:grid;grid-template-columns:44fr 56fr;grid-template-rows:1fr auto;
    height:clamp(600px,calc(100svh - var(--hh)),1160px);
  }
  .hero-media{grid-column:2;grid-row:1;aspect-ratio:auto;height:100%}
  .hero-text{
    grid-column:1/-1;grid-row:1;z-index:2;align-self:end;pointer-events:none;
    padding:0 var(--edge) clamp(40px,4vw,88px);
  }
  .hero h1{font-size:clamp(40px,4.2cqw,86px);line-height:1.5}
  .hero-lead{max-width:calc(44cqw - var(--edge) - 32px)}
  .hero-tools{right:var(--edge);top:24px}
  .entries{grid-column:1/-1;grid-row:2;grid-template-columns:44fr 56fr}
  .entry-a{padding-right:clamp(24px,3vw,64px)}
  .entry-b{padding-left:clamp(24px,3vw,64px);padding-right:max(var(--edge),120px)}
  .sec-head.big{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;
    column-gap:clamp(48px,6vw,128px);
  }
  .phil h2{font-size:clamp(48px,5.4cqw,108px)}
  .phil-top{grid-template-columns:auto minmax(0,1fr);align-items:end}
  .sec-head.big .disp{margin-bottom:-.04em}
  .sec-side{max-width:36em;padding-bottom:.4em}
}
/* ===== 幅1024px未満 ===== */
@media (max-width:1023.98px){
  .hd-sns a{width:36px;height:36px}
  .hd-sns svg{width:21px;height:21px}
  .hero h1 .ln1{margin-left:0}
  .hero h1 .pl:not(.pl-a):not(.pl-w){padding-inline:0;background:none}
  .hero-media{overflow:visible;margin-bottom:60px}
  .hero-tools{top:auto;bottom:-48px;right:auto;left:var(--edge);padding:0;background:none;flex-direction:row-reverse;color:rgba(255,255,255,.8)}
  .reasons>div+div{border-left:0}
  .phil-row,.faq-wrap{grid-template-columns:1fr}
  .faq-side{position:static}
  .row{grid-template-columns:auto 1fr auto;row-gap:12px}
  .row-ds{grid-column:1/-1;grid-row:2}
  .row-go span:first-child{display:none}
  .reasons{grid-template-columns:1fr}
  .reasons>div,.reasons>div:first-child,.reasons>div:last-child{padding:40px 0;border-left:0}
  .reasons>div:first-child{padding-top:0}
  .reasons>div:last-child{padding-bottom:0}
  .reasons>div+div{border-top:2px solid rgba(11,22,34,.22)}
  .flow{grid-template-columns:1fr;gap:32px}
  .flow li{padding-left:80px;min-height:56px}
  .flow .c{position:absolute;left:0;top:0}
  .flow h3{margin-top:0;padding-top:12px}
  .flow li:not(:last-child)::after{top:64px;left:27px;right:auto;bottom:calc(-1 * 32px + 8px);width:2px;height:auto}
  .ft-grid{grid-template-columns:1fr 1fr}
  .g2,.g3{grid-template-columns:1fr 1fr}
  .g2 .card-title{font-size:clamp(18px,2.6cqw,28px)}
  .g2{row-gap:48px}
  .g3 .grp-intro{grid-column:1/-1}
}
@media (max-width:767.98px){
  .g2,.g3{grid-template-columns:1fr}
  .g2{gap:48px}
  .ft-grid{grid-template-columns:1fr}
  .sec-head .btn{width:100%}
  .news-list a{grid-template-columns:1fr;gap:4px}
  .news-list a .arr{display:none}
  .band-row .btn{width:100%}
}
@media (max-width:639.98px){
  .cm-list .ty{display:none}
  .pillars{grid-template-columns:1fr;justify-items:stretch}
  .pillars .times{text-align:center}
  .faq-list .ans{padding-right:0}
  .hero-tools{font-size:11px}
  .tool{font-size:10px;gap:8px;padding:5px 8px}
  .tool button{font-size:10px;padding:4px 6px}
}
@media (max-width:479.98px){
  .kicker{font-size:12px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .mq-track{animation:none}
  .card-img img,.arr,.circ,.burger span,.faq-list .pm::after,.row,.entry,.pillar,.fx *,.card-img .play{transition:none!important;animation:none!important}
  .card:hover .card-img img{transform:none}
  .faq-list details[open] .ans{animation:none}
}

/* フッター最下段（プライバシーポリシーへのリンク） */
.ft-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.ft-bottom a{color:var(--ink);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:2px}
.ft-bottom a:hover{color:var(--accent-deep);border-color:var(--accent)}


/* ---- アドアーチグループ連結実績（本部の統一表記・2026-08-24の依頼）
   文言と数字は本部サイトと同じにする。「グループ連結」の言葉を外さない ---- */
.gstats{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:stretch;background:var(--ink);color:#fff;margin:0 0 clamp(24px,2.4vw,40px)}
.gstats>*{margin:0}
.gstats-t{display:flex;flex-wrap:wrap;align-items:center;align-content:center;padding:clamp(16px,1.6vw,28px) clamp(16px,2vw,36px);background:var(--accent);color:var(--ink);font-size:clamp(14px,1.1vw,18px);font-weight:900;line-height:1.5}
.gstats-i{padding:clamp(18px,1.8vw,32px) clamp(16px,2vw,36px);border-left:1px solid var(--line-dark)}
.gstats-i .l{display:block;font-size:clamp(12px,.9vw,15px);font-weight:700;color:var(--on-dark);line-height:1.4}
.gstats-i .n{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .12em;margin-top:6px;line-height:1}
.gstats-i .n b{font-family:var(--en);font-weight:900;font-size:clamp(36px,4vw,76px);letter-spacing:-.03em;color:#fff}
.gstats-i .n span{font-size:clamp(15px,1.3vw,22px);font-weight:900;color:var(--accent-light)}
.gstats-i .n small{margin-left:.6em;font-size:clamp(11px,.8vw,13px);font-weight:500;color:var(--on-dark)}
@media (max-width:1023.98px){ .gstats{grid-template-columns:repeat(3,minmax(0,1fr))} .gstats-t{grid-column:1/-1} .gstats-t+.gstats-i{border-left:0} }
@media (max-width:639.98px){ .gstats{grid-template-columns:1fr} .gstats-i{border-left:0;border-top:1px solid var(--line-dark)} }

/* いま居るページの印（ヘッダー・スマホ用メニュー）。トップでも効くよう共通側にも置く */
.hd-nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.menu li a[aria-current="page"]{color:var(--accent-light)}

/* トップの最初の画面：社名の行を大きく（どこの会社かが先に分かるように） */
.hero .kicker{gap:clamp(10px,1vw,18px);margin-bottom:clamp(20px,1.8vw,32px);font-size:clamp(14px,1.3vw,25px);font-weight:900;letter-spacing:.16em}
.hero .kicker::before{width:clamp(24px,2.6vw,52px);height:clamp(2px,.2vw,4px)}
@media (max-width:479.98px){
  .hero .kicker{font-size:13px;letter-spacing:.1em;gap:8px}
  .hero .kicker::before{width:18px}
}

/* ---- 最初の画面の見出し：テロップが入る動き（読み込み時に1回） ----
   3つとも同じ仕掛け：座布団と文字が一緒に、左から右へ拭き出される（ワイプ）。
   速さは「1文字あたり --u」で統一（文字数 --n × --u が所要時間）。幅が違っても進む速さが同じになる。
   順番: 1行目（12文字）→ オレンジ（7文字）→ 白（6文字）→ 説明文。
   「動きを減らす」設定では動かさない */
.hero .ln2 .pl{display:inline-block}
/* 1行目の文字も1つの箱にする（折り返して2行になっても箱ごと拭き出せる。inlineのままだと2行目に効かない）。
   上下の余白は0にして行の高さを変えない（この座布団は背景と同色で見えない） */
.hero h1 .ln1 .pl{display:inline-block;padding-block:0}
.hero h1{--u:45ms;--t0:.25s;--gap:70ms}
@media (prefers-reduced-motion:no-preference){
  /* 1行目は .ln1（行いっぱいの幅）でなく、文字の幅だけの .pl にかける（行幅にかけると文字の部分だけ速く見える） */
  .js .hero h1 .ln1 .pl,.js .hero h1 .pl-a,.js .hero h1 .pl-w{
    clip-path:inset(0 100% 0 0);
    animation:tl-wipe calc(var(--n)*var(--u)) cubic-bezier(.4,0,.2,1) var(--t) forwards;
  }
  .js .hero h1 .ln1 .pl{--n:12;--t:var(--t0)}
  .js .hero h1 .pl-a{--n:7;--t:calc(var(--t0) + 12*var(--u) + var(--gap))}
  .js .hero h1 .pl-w{--n:6;--t:calc(var(--t0) + 19*var(--u) + 2*var(--gap))}
  /* 小さい画面では1行目が「クリエイティブの／チカラで」の2行に折り返し、箱は行いっぱい（文字8字分より広い）になる。
     文字の部分が座布団と同じ速さで現れるよう、時間は11文字分にする（箱335px・文字229pxで実測して合わせた） */
  @media (max-width:479.98px){
    .js .hero h1 .ln1 .pl{--n:11}
    .js .hero h1 .pl-a{--t:calc(var(--t0) + 11*var(--u) + var(--gap))}
    .js .hero h1 .pl-w{--t:calc(var(--t0) + 18*var(--u) + 2*var(--gap))}
  }
}
@keyframes tl-wipe{to{clip-path:inset(0 0 0 0)}}