/* セブワークス 下層 v43: v42.css の上に重ねる。トップと同じ色面・1書体・線や番号なし
   手本: The Queue(sheets.works)=文字は巨大見出し・中見出し・本文の3段だけ / E-agent 会社ページ=代表メッセージは主張の一文から、会社概要は項目と内容の2列
   Takram About=段ごとに主張+短い段落、所在地に地図 / Sakana AI 採用=手順は短い題+1行を3つ / CP+B About=段ごとに色面を切り替え、文字の大きさと太さで流れを作る */

/* ヘッダー: ページ頭の色に合わせ、過ぎたら紙の地 */
.hd.on-paper{background:var(--paper);color:var(--ink)}
.hd.on-stone{background:var(--stone);color:var(--ink)}
.hd.on-signal{background:var(--signal);color:var(--ink)}
.hd.on-signal .cta{background:var(--ink);color:var(--paper)}
.hd.on-signal .cta:hover{background:#fff;color:var(--ink)}
.hd.on-ink{background:var(--ink);color:var(--paper)}
.hd.s{background:var(--paper);color:var(--ink)}
.hd.s .cta{background:var(--signal);color:var(--ink)}
.hd nav>a[aria-current]:not(.cta){text-decoration-line:underline}
.ov a[aria-current]{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:10px}

/* ページ頭: 見出しを画面いっぱいに */
.pg{padding:calc(72px + clamp(72px,11vw,170px)) 0 clamp(72px,9vw,140px)}
.pg .up{font-size:15px;font-weight:700;margin-bottom:20px}
.pg .up a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.pg h1{font-weight:900;font-size:clamp(56px,12vw,196px);line-height:1;letter-spacing:-.03em}
.pg h1 small,.bzs h2 small{display:inline-block;vertical-align:middle;margin-left:.4em;font-size:14px;font-weight:700;letter-spacing:.02em;line-height:1.6;padding:2px 10px;background:var(--ink);color:var(--paper)}
.pg.ink h1 small,.bzs.ink h2 small{background:var(--paper);color:var(--ink)}
.pg .tag{margin-top:clamp(28px,3.4vw,48px);font-weight:900;font-size:clamp(24px,2.8vw,40px);line-height:1.45}
.pg .lead{margin-top:28px;font-size:clamp(17px,1.4vw,20px);max-width:34em}
.pg .tag+.lead{margin-top:16px}
.pg.ink .lead{color:rgba(238,238,234,.88)}
.pg .btns{margin-top:36px}

/* 段の中見出し */
.h2s{font-weight:900;font-size:clamp(30px,3.6vw,52px)!important;line-height:1.25!important;letter-spacing:0!important}
.ink p,.ink span,.ink li{color:rgba(238,238,234,.9)}
.ink b,.ink h2,.ink h3{color:var(--paper)}

/* 会社紹介 */
.stmt .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:end}
.stmt h2{font-size:clamp(36px,5vw,80px)}
.stmt .big{font-weight:900;font-size:clamp(24px,2.4vw,34px);line-height:1.5;margin-bottom:20px}
.stmt .txt p:not(.big){font-size:17px;max-width:26em}
.mvv .wrap>div+div{margin-top:clamp(80px,10vw,150px)}
.mvv .vi h2{font-size:clamp(48px,9vw,150px);line-height:1.05;letter-spacing:-.02em;margin:6px 0 24px}
.mvv .vi p:not(.k),.mvv .va li p{font-size:17px}
.mvv .st{font-weight:900;font-size:clamp(26px,3.4vw,52px);line-height:1.45;color:var(--paper);max-width:20em}
.mvv .va ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 72px;margin-top:20px;max-width:1100px}
.mvv .va h3{font-weight:900;font-size:clamp(22px,2vw,28px);line-height:1.4;margin-bottom:8px}
#member .mg h3{font-size:16px;font-weight:700;opacity:.62;margin:32px 0 16px}
#member .mem{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px}
#member .mem b{display:block;font-size:22px;font-weight:900}
#member .mem img{aspect-ratio:4/5;object-fit:cover;margin-bottom:14px}

/* 事業内容の一覧: 1事業1色面 */
.bzs h2{font-weight:900;font-size:clamp(52px,10vw,170px);line-height:1;letter-spacing:-.03em}
.bzs .big{margin-top:clamp(28px,3.4vw,48px);font-weight:900;font-size:clamp(24px,2.8vw,40px);line-height:1.45}
.bzs .cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;margin-top:40px;max-width:1100px}
.bzs .cols p{font-size:17px}

/* 事業ページ */
.pains ul{margin-top:40px}
.pains li{font-weight:900;font-size:clamp(28px,4.4vw,68px);line-height:1.3;letter-spacing:-.01em}
.pains li+li{margin-top:.35em}
.pains .n{margin-top:48px;font-size:clamp(18px,1.5vw,21px);font-weight:700;max-width:30em}
.flow ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:48px}
.flow li{padding:clamp(28px,3vw,44px);background:rgba(18,18,18,.07)}
.ink.flow li{background:rgba(238,238,234,.07)}
.flow li b{display:block;font-weight:900;font-size:clamp(22px,2vw,30px);line-height:1.4;margin:4px 0 12px}
.flow li span{display:block;font-size:16px;line-height:1.8}
.flow li .k{margin:0}
.price .big{font-weight:900;font-size:clamp(32px,5vw,80px);line-height:1.3;letter-spacing:-.01em}
.price em{font-style:normal;color:var(--signal)}
.signal.price em{color:var(--paper)}
.price .sub{margin-top:40px;font-size:17px;max-width:40em}
.price .sub b{font-weight:900}
.sp .wrap,.why .wrap,.news .wrap,.qa .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:56px}
.sp .tx p{font-size:17px;max-width:34em}.sp .tx p+p{margin-top:1em}
.items li{padding:0 0 28px}
.items b{display:block;font-weight:900;font-size:clamp(22px,2vw,30px);line-height:1.4}
.items small{display:block;font-size:16px;margin-top:4px}
.items+p{font-size:15px;opacity:.72}
.why blockquote{font-weight:700;font-size:clamp(20px,1.9vw,27px);line-height:1.8}
.why blockquote b{font-weight:900;background:var(--paper);padding:0 .15em}
.why cite{display:block;margin-top:28px;font-style:normal;font-size:15px;font-weight:700}
.others .idx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}
.others .idx a{display:block;padding:clamp(28px,3vw,48px);background:#E2E2DD;transition:background .25s,color .25s}
.others .idx a:hover{background:var(--ink);color:var(--paper)}
.others .idx b{display:block;font-weight:900;font-size:clamp(28px,3.4vw,52px);line-height:1.2}
.others .idx span{display:block;margin-top:12px;font-size:16px;font-weight:700}

/* 代表挨拶: 主張の一文から読ませる(E-agent型) */
.letter .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:56px}
.letter .who{position:sticky;top:112px;align-self:start}
.letter .who b{display:block;font-weight:900;font-size:clamp(32px,3.6vw,52px);line-height:1.2}
.letter .body{max-width:36em}
.letter .body p{font-size:18px}
.letter .body p+p{margin-top:1.2em}
.letter .q1{font-weight:900;font-size:clamp(26px,2.8vw,40px)!important;line-height:1.5}
.letter .sign{margin-top:48px!important;font-size:15px!important;font-weight:700}
.letter .sign b{display:block;font-size:26px;font-weight:900}
.career ol{list-style:none;margin-top:44px;max-width:1000px}
.career li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:32px;padding:20px 0}
.career li b{font-weight:900;font-size:clamp(20px,1.8vw,26px)}
.career li span{font-size:17px}

/* 会社概要: 項目と内容の2列+地図(E-agent・Takram型) */
.cotbl .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start}
.cotbl dl>div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:24px;padding:18px 0}
.cotbl dt{font-size:15px;font-weight:700;opacity:.62;padding-top:.2em}
.cotbl dd{font-size:clamp(17px,1.4vw,20px);font-weight:700;line-height:1.7}
.map{width:100%;aspect-ratio:1/1;border:0;filter:grayscale(1) contrast(1.05);position:sticky;top:112px}
.news ul li{display:grid;grid-template-columns:6.5em 7em minmax(0,1fr);gap:16px;padding:14px 0;font-size:17px}
.news time{font-weight:700}
.news .ct{font-size:14px;font-weight:700;opacity:.7;padding-top:.2em}
.news .tt a{text-decoration:underline;text-underline-offset:5px}

/* お問い合わせ: 手順は短い題+1行(Sakana AI型) */
.qa details{background:rgba(238,238,234,.07)}
.qa details+details{margin-top:8px}
.qa summary{cursor:pointer;list-style:none;padding:22px 64px 22px 28px;position:relative;font-weight:700;font-size:clamp(17px,1.4vw,20px);color:var(--paper)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:28px;top:50%;transform:translateY(-50%);font-size:28px;font-weight:400;line-height:1;transition:transform .25s}
.qa details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa details p{padding:0 28px 24px;font-size:16px}
.qa summary:hover{color:var(--signal)}

/* 個人情報の取り扱い */
.legal .wrap{max-width:820px;margin-left:max(24px,(100% - 1320px)/2)}
.legal h2{font-weight:900;font-size:clamp(22px,2vw,28px);line-height:1.4;margin:48px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{font-size:17px}
.legal a{text-decoration:underline;text-underline-offset:5px}

@media(max-width:860px){
 .stmt .wrap,.sp .wrap,.why .wrap,.news .wrap,.qa .wrap,.letter .wrap,.cotbl .wrap,.bzs .cols{grid-template-columns:1fr;gap:28px}
 .mvv .va ul,.others .idx,.flow ol{grid-template-columns:1fr}
 .letter .who,.map{position:static}
 .career li{grid-template-columns:1fr;gap:4px;padding:14px 0}
 .news ul li{grid-template-columns:auto 1fr;gap:4px 14px}.news .tt{grid-column:1/-1}
 .cotbl dl>div{grid-template-columns:6em minmax(0,1fr);gap:14px;padding:14px 0}
 .map{aspect-ratio:4/3}
}

/* 長い見出し・締めの見出しが途中で折れないように */
.pg h1.long{font-size:clamp(38px,8.4vw,150px);line-height:1.1}
.bzs.long h2{font-size:clamp(38px,8vw,140px);line-height:1.1}
.fin h2{font-size:clamp(40px,5.4vw,88px)}

/* v43.1 自己批評の反映: 日本語の見出しを文節で折る/ページ頭を画面の大半に/しくみの3枚カードをやめる */
h1,h2,h3,.q1,.big,.tag,.st,blockquote,.pains li,.items b,.idx b{word-break:auto-phrase;text-wrap:balance}
.pg{min-height:min(76svh,860px);display:flex;align-items:flex-end}
.pg .wrap{width:min(1320px,100% - 48px)}
.flow ol{gap:clamp(32px,4vw,64px)}
.flow li,.ink.flow li{background:none;padding:0}
.flow li b{font-size:clamp(26px,2.6vw,40px)}
.flow li b{font-size:clamp(24px,2.1vw,32px)}
.flow li b span{display:inline-block;font-size:inherit;line-height:inherit}
.price .big{font-size:clamp(26px,5vw,80px)}

/* 活動報告: 文章を左に止め、写真は1枚を大きく+残りを小さく */
.nw{padding:clamp(72px,9vw,130px) 0}
.nw .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:56px;align-items:start}
.nw .tx{position:sticky;top:112px}
.nw h2{font-weight:900;font-size:clamp(24px,2.4vw,36px);line-height:1.45;margin:6px 0 20px;word-break:auto-phrase}
.nw .tx p:not(.k){font-size:17px;max-width:30em}
.nw .ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nw .ph img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.nw .ph img:first-child{grid-column:1/-1;aspect-ratio:4/3}
.nw .ph.n1 img:first-child{aspect-ratio:3/2}
.nw .ph.n2 img:last-child{grid-column:1/-1;aspect-ratio:3/2}
.nw .ph.n4 img:not(:first-child){aspect-ratio:3/4}
.nw .ph.n4{grid-template-columns:repeat(3,minmax(0,1fr))}
.nw.np .wrap{grid-template-columns:1fr}
.nw.np .tx{position:static}
@media(max-width:860px){.nw .wrap{grid-template-columns:1fr;gap:24px}.nw .tx{position:static}.nw .ph.n4{grid-template-columns:repeat(2,minmax(0,1fr))}.nw .ph.n4 img:last-child{grid-column:1/-1;aspect-ratio:3/2}}
@media(max-width:860px){.nw .wrap{grid-template-columns:minmax(0,1fr)}}

/* 10/31 代表挨拶の章立て(事業内容の段と同じ組み) */
.mch h2{font-size:clamp(34px,5.6vw,92px);line-height:1.2;letter-spacing:-.02em}
.mch .cols{grid-template-columns:minmax(0,1fr);max-width:40em}
.mch .tx p+p{margin-top:1.2em}
.mch .sign{margin-top:48px!important;font-size:15px!important;font-weight:700}
.mch .sign b{display:block;font-size:26px;font-weight:900}
/* 10/31 分析→改善: 下層の頭の空白を減らす/代表挨拶の章を詰め、PCは見出し左・本文右 */
.pg{min-height:min(56svh,600px)}
.mch{padding:clamp(72px,8vw,128px) 0}
.mch .tx p{font-size:18px}
@media(min-width:861px){.mch .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start}
 .mch h2{font-size:clamp(34px,3.6vw,58px);position:sticky;top:112px}.mch .cols{margin-top:0;max-width:none}}

/* 10/31 事業内容: 比較表としくみの図 */
.svcx table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.6}
.svcx th,.svcx td{text-align:left;vertical-align:top;padding:20px 24px 20px 0;border-bottom:1px solid rgba(18,18,18,.18)}
.svcx thead th{font-size:14px;font-weight:700;padding-bottom:12px}
.svcx tbody th{font-weight:900;font-size:20px;white-space:nowrap}
.bzs .k{margin-top:36px;font-size:14px;font-weight:700;opacity:.75}
.bzs .for,.bzs .fee{font-size:18px;font-weight:700;max-width:40em}
.bzs .sf{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:10px;max-width:1100px}
.bzs .sf li{position:relative;padding:18px 40px 18px 0}
.bzs .sf li+li{padding-left:8px}
.bzs .sf li:not(:last-child)::after{content:"";position:absolute;right:12px;top:50%;width:16px;height:16px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.bzs .sf b{display:block;font-weight:900;font-size:22px}
.bzs .sf span{display:block;font-size:16px;margin-top:4px}
@media(max-width:760px){.svcx thead{display:none}.svcx tr{display:block;padding:18px 0;border-bottom:1px solid rgba(18,18,18,.18)}.svcx th,.svcx td{display:block;border:0;padding:2px 0}
 .svcx td::before{content:attr(data-h);display:block;font-size:12px;font-weight:700;opacity:.7;margin-top:8px}
 .bzs .sf{grid-template-columns:1fr}.bzs .sf li{padding:14px 0 30px}.bzs .sf li+li{padding-left:0}.bzs .sf li:not(:last-child)::after{right:auto;left:4px;top:auto;bottom:6px;transform:rotate(135deg)}}
