@charset "UTF-8";
/* ==========================================================
   3 Create — corporate site / TOP
   ========================================================== */
/* ==========================================================
   tokens
   ========================================================== */
:root{
  --paper:#FFFFFF;
  --ink:#1A1A1E;
  /* 青（#1730D9）は今回は使わない。トンマナは黄と黒だけ（2026-09-07「濃い青はトンマナ違反」） */
  --yellow:#FFD400;
  --dim:rgba(26,26,30,.55);
  --dimmer:rgba(26,26,30,.34);
  --rule:rgba(26,26,30,.10);
  --ph:#F0F0F1;
  --paper-2:#F2F2F0;   /* 白の地の上に置く一段暗い面（Business の帯） */
  --stage:#FFFFFF;   /* ヒーローの地（灰 #E9E9E7 は 2026-09-07 に白へ。キャンバスの地もこの値を読む） */

  --dim-i:rgba(255,255,255,.58);
  --rule-i:rgba(255,255,255,.14);

  --jp:"Noto Sans JP",system-ui,-apple-system,sans-serif;
  --en:"Google Sans","Noto Sans JP",system-ui,sans-serif;

  /* type ladder — max side ×1.4 / min side ×1.115, no other sizes exist */
  --t-1:clamp(0.688rem,0.9vw,0.750rem);   /* 11.0 / 12.0  label */
  --t-2:clamp(0.938rem,1.1vw,1.014rem);   /* 15.0 / 16.2  body  */
  --t-3:clamp(1.045rem,1.6vw,1.417rem);   /* 16.7 / 22.7  lead  */
  --t-4:clamp(1.163rem,2.2vw,1.981rem);   /* 18.6 / 31.7  title */
  --t-5:clamp(1.300rem,3.1vw,2.778rem);   /* 20.8 / 44.4  —     */
  --t-6:clamp(1.450rem,4.3vw,3.889rem);   /* 23.2 / 62.2  head  */
  --t-8:clamp(1.806rem,8.5vw,7.625rem);   /* 28.9 / 122   hero  */
  --t-h:clamp(1.35rem,3.3vw,2.9rem);      /* 21.6 / 46.4  セクション見出し。本文の約 3 倍（About で決めたジャンプ率を全セクションで使う） */

  --ease:cubic-bezier(.16,1,.3,1);
  --d-1:.4s;
  --d-2:.8s;
  --d-3:1.2s;

  --gut:clamp(20px,5vw,72px);
  --max:1440px;
  --sec:clamp(96px,13vw,200px);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--jp);
  font-weight:400;
  font-size:var(--t-2);
  line-height:2;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
h1,h2,h3,p,figure,dl,dd{margin:0;}
:focus-visible{outline:2px solid var(--ink);outline-offset:5px;}
.on-ink :focus-visible{outline-color:var(--yellow);}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);}

/* headings share one weight + one tracking */
.h{font-weight:300;letter-spacing:-.012em;line-height:1.45;text-wrap:balance;}

/* 見出しのシャイン：見出しが全部画面に入ったら、多段グラデーションの帯が 1 回だけ左から右へ横切る（JS が .is-shine を付ける）。
   色はヒーローの「3 Create」に走る帯（mv.js の SHIMMER、sunrise）と同じ。文字を背景でクリップし、3 倍幅の背景を横に送る */
.shine{
  background-image:linear-gradient(105deg,
    var(--ink) 0 39%,
    #B6D3EF 41.5%, #CAD1D7 43%, #D7CFC8 44.5%, #E1CDB9 46%, #EAC6A5 47.5%, #EDB185 49%,
    #EF9B62 50.5%, #F18F60 52%, #F48D7A 53.5%, #F78A94 55%, #F888A0 56.5%,
    var(--ink) 59% 100%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.shine--i{                                               /* 墨の面（Contact のパネル）の上：両端を白にした同じ帯（2026-09-08） */
  background-image:linear-gradient(105deg,
    var(--paper) 0 39%,
    #B6D3EF 41.5%, #CAD1D7 43%, #D7CFC8 44.5%, #E1CDB9 46%, #EAC6A5 47.5%, #EDB185 49%,
    #EF9B62 50.5%, #F18F60 52%, #F48D7A 53.5%, #F78A94 55%, #F888A0 56.5%,
    var(--paper) 59% 100%);
}
.shine.is-shine{animation:shine 1.45s cubic-bezier(.45,0,.55,1) forwards;}
@keyframes shine{from{background-position:100% 0;}to{background-position:0% 0;}}

/* セクションのラベル。About で決めた姿（括弧なし・本文サイズ）を全セクションで使う */
.label{
  font-family:var(--en);font-weight:500;font-size:var(--t-2);
  letter-spacing:.02em;line-height:1;color:var(--ink);
}

.note{font-size:var(--t-1);line-height:1.9;color:var(--dimmer);}


/* ==========================================================
   line mask (shared by every reveal)
   ========================================================== */
.ln{display:block;overflow:hidden;}
.js .ln > span{
  display:block;transform:translateY(106%);opacity:0;
  transition:transform var(--d-2) var(--ease),opacity calc(var(--d-2) * .55) linear;
}
.js .is-in .ln > span,
.js .ln.is-in > span{transform:none;opacity:1;}

.js .fade{opacity:0;transform:translateY(24px);
  transition:opacity var(--d-2) var(--ease),transform var(--d-2) var(--ease);}
.js .fade.is-in{opacity:1;transform:none;}

/* ==========================================================
   nav
   ========================================================== */
/* 背景は持たない。mix-blend-mode:difference で下の画面と差分合成し、重なった所だけ反転する
   （白い所は黒く、黒い所は白く、ヒーローの灰の地の上では墨色に見える）。
   要素の色は白で固定し、反転はすべてブラウザの合成に任せる */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  color:#fff;
  mix-blend-mode:difference;
}
.nav__in{
  padding-inline:var(--gut);                  /* コンテンツ幅に縛らず、画面の端から余白ぶんだけ空けて広がる */
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(20px,3vw,48px);
  padding-block:clamp(16px,2vw,28px);
}
.lock{display:block;}
.lock__mark{
  font-family:var(--en);font-weight:700;
  font-size:clamp(1.15rem,1.9vw,1.75rem);
  letter-spacing:-.035em;line-height:1;white-space:nowrap;
  display:inline-block;
}

.menu{display:flex;justify-content:center;flex-wrap:wrap;gap:4px clamp(16px,2.6vw,40px);}
.menu a{
  font-family:var(--en);font-weight:600;font-size:var(--t-2);
  letter-spacing:.01em;line-height:1.6;
  transition:color var(--d-1) var(--ease);
}
.menu a{transition:opacity var(--d-1) var(--ease);}
.menu a:hover{opacity:.55;}

/* Contact のピル。白地＋黒文字を difference で合成すると、地が黒いピル＋地の色の文字に反転する */
.nav__cta{
  font-family:var(--en);font-weight:600;font-size:var(--t-2);
  line-height:1;padding:.85em 1.8em;border-radius:999px;
  background:#fff;color:#000;white-space:nowrap;
  transition:opacity var(--d-1) var(--ease),transform var(--d-1) var(--ease);
}
.nav__cta:hover{opacity:.85;transform:translateY(-1px);}
/* ハンバーガー（720px 以下だけ）。2 本の線が × に変わる。色は nav と同じ白固定で、difference 合成に任せる */
.nav__burger{
  display:none;position:relative;width:44px;height:44px;margin:-8px -10px -8px 0;padding:0;
  border:0;background:none;color:inherit;cursor:pointer;
}
.nav__burger span{
  position:absolute;left:11px;right:11px;top:50%;height:2px;margin-top:-1px;background:currentColor;
  transition:transform .55s var(--ease);
}
.nav__burger span:nth-child(1){transform:translateY(-5px);}
.nav__burger span:nth-child(2){transform:translateY(5px);}
html.is-menu .nav__burger span:nth-child(1){transform:rotate(45deg);}
html.is-menu .nav__burger span:nth-child(2){transform:rotate(-45deg);}
/* Contact のパネル（墨の半透明）がナビの下に来ている間は差分合成をやめて白で描く。
   difference のままだと中間の灰色の上で文字も灰色になり、ナビがパネルの下に潜って見えた（2026-09-08「ヘッダーが下に被ってる」）。main.js が html.is-on-ink を付ける */
html.is-on-ink:not(.is-menu) .nav{mix-blend-mode:normal;}
@media(max-width:720px){
  .nav__in{grid-template-columns:auto auto;justify-content:space-between;}
  .menu,.nav__cta{display:none;}                        /* Contact はメニューの中に置く */
  .nav__burger{display:block;}
}

/* ==========================================================
   スマホの全画面メニュー（.mmenu）。nav の下（z 55）。開閉は html.is-menu（main.js）
   ========================================================== */
html.is-menu, html.is-menu body{overflow:hidden;}        /* 開いている間はページを止める */
.mmenu{
  position:fixed;inset:0;z-index:58;                   /* ヒーローのお知らせカード（z 55）より上、nav（z 60）より下 */
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);   /* 背後のガラスがにじむ（参考のぼけた地） */
  display:flex;flex-direction:column;justify-content:center;
  --mgut:clamp(32px,9vw,48px);                          /* 項目の両サイドの余白。--gut（20px）では狭い（2026-09-08） */
  padding:calc(var(--gut) + 56px) var(--mgut) calc(var(--gut) + 64px);
  visibility:hidden;opacity:0;
  transition:opacity .5s var(--ease),visibility 0s linear .5s;
}
html.is-menu .mmenu{visibility:visible;opacity:1;transition:opacity .45s var(--ease);}
@media(min-width:721px){.mmenu{display:none;}}
.mmenu__list{display:flex;flex-direction:column;gap:.9em;}    /* 行間を広げる（.04 → .3 → .6 → .9em。2026-09-08） */
.mmenu__list a{
  font-family:var(--en);font-weight:600;
  font-size:clamp(1.9rem,8.2vw,3rem);line-height:1.18;letter-spacing:-.02em;   /* 一段小さく（10.5vw → 8.2vw。2026-09-08） */
  display:block;overflow:hidden;padding:.05em 0;         /* マスク（イントロの .intro__tag と同じ作法） */
}
.mmenu__list .ch{display:inline-block;transform-origin:0 100%;will-change:transform;}
.mmenu__foot{
  position:absolute;left:var(--mgut);right:var(--mgut);bottom:max(var(--gut),env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:flex-start;gap:16px;
}
.mmenu__sns{flex:none;display:flex;gap:14px;font-family:var(--en);font-weight:500;font-size:var(--t-1);letter-spacing:.04em;}   /* SNS は小さく（t-2 → t-1。2026-09-08） */

/* ==========================================================
   intro — 白幕。タグラインが立ち上がり、抜け、幕がクリップで上がる
   ========================================================== */
.intro{
  position:fixed;inset:0;z-index:80;background:var(--paper);
  display:grid;place-items:center;pointer-events:none;
  clip-path:inset(0 0 0% 0);
}
.intro__tag{
  font-size:var(--t-4);font-weight:700;letter-spacing:.08em;line-height:1.4;   /* 和文。--t-5 は「大きい」で一段下げた（2026-09-17） */
  text-align:center;
}
.intro__l{display:block;white-space:nowrap;overflow:hidden;padding:.12em .1em;}   /* マスクは行ごと（英文＋和文の 2 行。2026-09-17） */
.intro__tag .ch{display:inline-block;transform-origin:0 100%;will-change:transform;}

/* タグラインは英文＋和文。英文は和文よりラダーで一段下げ、従属させる（2026-09-17）。
   イントロとフッターは 2 行（上が英文）、ヒーローだけ横に並べて 1 行。
   「3-Win」が折り返しで切れないよう英文は nowrap */
.tag__en{display:block;font-family:var(--en);font-weight:700;letter-spacing:.06em;white-space:nowrap;}
.tag__jp{display:block;font-weight:700;letter-spacing:.08em;}
.intro__tag .tag__en{font-size:var(--t-3);}   /* 英文は和文の一段下（2026-09-17） */
/* イントロ中も overflow は隠さない。隠すと解除時にスクロールバー幅ぶんレイアウトがずれる。
   スクロール自体は JS で止める（main.js の lockScroll） */
html{scrollbar-gutter:stable;}

/* ==========================================================
   stage — ヒーローと About を載せるひとつの地。
   キャンバスだけ sticky で画面に固定され、地とガラスが About まで続く（文字はヒーローと一緒に抜ける）。
   ========================================================== */
.stage{position:relative;background:var(--stage);}
.stage__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}   /* 高さ（sticky の範囲）は mv.js の fitStickyRange が About の上端＋画面の高さに決める */
/* ステージ末尾で白へ溶かす帯（.stage::after）は撤去。地が白になってからはガラスの下端だけが薄れて「謎の白いグラデーション」に見えていた（2026-09-07） */
.stage > section,.stage > footer{position:relative;z-index:1;}   /* キャンバス（z 0）の上に載せる。ヒーローも relative。フッターもステージの中（2026-09-08） */

/* ==========================================================
   hero — ワードマークを幅いっぱいに。普通にスクロールで抜ける（固定して About の背景に残すのは「うるさい」で取りやめ）
   ========================================================== */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(96px,14vh,170px);
  padding-bottom:clamp(40px,8vh,96px);
}
.hero__in{
  position:relative;
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  transform-origin:50% 60%;
}

/* ロゴタイプ扱い。タイプラダーの外で、JS が幅に合わせて実寸を決める */
.mark{
  position:relative;z-index:70;               /* ナビの上を通ってロゴ位置へ */
  display:block;font-family:var(--en);font-weight:700;
  line-height:1;letter-spacing:-.035em;white-space:nowrap;
  font-size:17vw;                             /* JS 前の仮値 */
  transform-origin:0 0;will-change:transform;
}
.mark__mask{display:block;overflow:hidden;padding-bottom:.06em;}

/* Three.js の面。地と「3 Create」をテクスチャで描き、手前でガラスのロゴが回る。
   ステージの高さいっぱいの箱の中で sticky にして、スクロールしても画面に留まる。
   About では輪郭を保ち、回転・拡大して右側に全体を収める（mv.js） */
.hero__gl{
  position:sticky;top:0;width:100%;height:100svh;display:block;
  pointer-events:none;opacity:0;
}
.stage.is-gl .hero__gl{opacity:1;}
.hero.is-gltext .mark__w,
.hero.is-gltext #heroTagW{visibility:hidden;}   /* キャンバス側の文字に切り替わったら DOM の文字を隠す（タグラインも。2026-09-18） */
.hero__tag .ch{display:inline-block;}           /* 1 文字ずつの矩形をキャンバスの描画に使う */
.mark__w{display:inline-block;}

.mark .ch{display:inline-block;transform-origin:0 100%;will-change:transform;}

.hero__tag{
  margin-top:clamp(-26px,-1.7vw,-6px);text-align:right;   /* マスクの余白ぶんを詰めて、ロゴに寄せる */
  font-size:var(--t-4);font-weight:700;letter-spacing:.08em;line-height:1.4;   /* 和文。--t-5 から一段下げた（2026-09-17） */
  overflow:hidden;padding:.1em 0;
  will-change:transform,opacity;
}
.hero__tag > span{display:inline-block;will-change:transform;}   /* 英文と和文を包む箱。マスク（.hero__tag）の高さは行数ぶんになるので yPercent はそのままで効く（2026-09-17） */
/* ヒーローだけ英文と和文を横に並べて 1 行にする（2 行は「バランスが悪い」2026-09-17）。
   狭い画面では 1 行に入らないので、英文 → 和文の順に折れる（右寄せのまま）。
   間の余白は和文側に持たせる。折れたときに行末へ余白が残らない */
.hero__tag .tag__en,.hero__tag .tag__jp{display:inline-block;}
.hero__tag .tag__en{font-size:var(--t-3);}   /* 英文は和文の一段下（2026-09-17） */
.hero__tag .tag__jp{margin-inline-start:.8em;}
@media(max-width:759px){
  .hero__tag{margin-top:clamp(0px,.6vw,4px);}   /* 2 行に折れると「Create」の下端に寄りすぎる。負の margin はここだけ緩める（2026-09-17） */
}

/* 右下のニュース。最新3件をカードで回す */
/* 右下のニュース。最新1件だけ。すりガラスの地に、右上に閉じるボタン */
.hero__news{
  position:fixed;right:clamp(20px,2.8vw,40px);bottom:clamp(20px,2.8vw,40px);   /* 画面に追従。右と下の余白は同じ値。2.2vw/32px → 2.8vw/40px。画面の縁から少し離す（2026-10-06） */
  z-index:55;
  width:clamp(360px,30vw,460px);
  will-change:transform;   /* opacity を入れると backdrop root になり、カードの backdrop-filter が下の画面をぼかせなくなる */
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.hero__news.is-closed{opacity:0;transform:translateY(12px);pointer-events:none;}
.hnews__card{
  position:relative;overflow:hidden;                    /* ぼかした写真（.hnews__glow）を角丸の中に収める */
  display:flex;gap:16px;align-items:center;             /* 14 → 16。余白が狭い（2026-10-06） */
  padding:16px;border-radius:16px;                      /* 18 → 14。高さを抑える（2026-09-08）。14 → 16。文字が縁に詰まって見える（2026-10-06） */
  /* .78 → .66。写真の色が滲む分だけ透かす（2026-09-08）。
     白 .66 の 1 色だと白い地の上では不透明な白い箱に見える（「透明感かなぁ。背景の」2026-10-06）。
     面をごく薄い灰（--paper-2）の半透明にして地から一段だけ分け、左上から白い艶を斜めに落としてガラスの板に見せる。
     ぼかしも 22 → 16px に弱め、背後のロゴや写真の形が残るようにする。文字は艶の濃い左側に来る */
  background-color:rgba(242,242,240,.42);
  background-image:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 64%);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 2px rgba(26,26,30,.04), 0 10px 24px -8px rgba(26,26,30,.10), 0 32px 64px -24px rgba(26,26,30,.20);   /* 白い地から浮かせる柔らかい影（2026-09-07。「影なし」は撤回）。白い縁取りは「ボーダーを消して」で撤去（2026-09-08）。下に濃い 1 枚 → 接地・中距離・遠くの 3 層。柔らかく（2026-10-06） */
  transition:background-color var(--d-1) var(--ease),transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease);   /* transform と影を足す（2026-10-06） */
}
@media(hover:hover){
  .hnews__card:hover{
    background-color:rgba(242,242,240,.6);              /* 面を少し濃く（艶はそのまま。2026-10-06） */
    transform:translateY(-2px);                         /* 少し持ち上げ、影を一段深く（2026-10-06） */
    box-shadow:0 1px 2px rgba(26,26,30,.04), 0 14px 28px -8px rgba(26,26,30,.14), 0 40px 72px -24px rgba(26,26,30,.26);
  }
}
@media(hover:hover) and (prefers-reduced-motion:reduce){
  .hnews__card:hover{transform:none;}                   /* 動きを減らす設定では持ち上げない（2026-10-06） */
}
/* 写真をぼかしてカードの背後に敷く。大きく拡大して端の抜けを隠す。文字の上には乗らない（z 0。中身は relative で上へ） */
.hnews__glow{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hnews__glow img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.6);filter:blur(36px) saturate(1.3);opacity:.28;   /* .5 → .28「少し色が映ってるなーくらい」（2026-09-08） */
}
.hnews__thumb,.hnews__body{position:relative;z-index:1;}
.hnews__thumb{
  flex:none;width:108px;height:80px;border-radius:10px;overflow:hidden;background:var(--ph);   /* 150×110 → 108×80。角丸（2026-09-08） */
  display:grid;place-items:center;
}
.hnews__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.hnews__thumb span{font-family:var(--en);font-size:var(--t-1);letter-spacing:.06em;color:var(--dimmer);}
.hnews__body{min-width:0;}
.hnews__d{display:flex;align-items:baseline;font-family:var(--en);font-weight:600;font-size:var(--t-1);line-height:1.4;letter-spacing:.04em;color:var(--dim);}   /* block → flex。前に「News」を並べる（2026-10-06） */
.hnews__d::before{content:"News";margin-right:.9em;color:var(--ink);}   /* 何のカードか分かるように、日付の前に墨のラベル。日付は JS が textContent で差し替えるので擬似要素で置く（2026-10-06） */
.hnews__t{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;   /* 3行まで。三点リーダーは基本出さない */
  margin-top:8px;font-size:clamp(0.8rem,0.95vw,0.875rem);font-weight:500;line-height:1.6;   /* 本文は一段小さく（12.8〜14px）。…になりにくく（2026-09-08）。日付との間 5 → 8、行間 1.55 → 1.6（2026-10-06） */
}
.hnews__close{
  position:absolute;top:10px;right:10px;z-index:1;     /* カードの内側、右上。×だけ */
  width:28px;height:28px;border:0;border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;padding:0;
  display:grid;place-items:center;opacity:.6;
  transition:opacity var(--d-1) var(--ease),background-color var(--d-1) var(--ease);
}
.hnews__close:hover{opacity:1;background:rgba(26,26,30,.06);}
.hnews__body{padding-right:32px;}                       /* ×と文字が重ならないように。24 → 32。余白を広げた分（2026-10-06） */
@media(max-width:720px){
  .hero__news{left:clamp(16px,4vw,24px);right:clamp(16px,4vw,24px);bottom:clamp(16px,4vw,24px);width:auto;}
  .hnews__card{padding:14px;gap:14px;}        /* スマホは 14 のまま（2026-10-06） */
  .hnews__thumb{width:88px;height:66px;}       /* スマホは文字の幅を優先。三点リーダーを出さない */
  .hnews__t{-webkit-line-clamp:3;}
}

/* ==========================================================
   works — full bleed
   ========================================================== */
/* 見出しは .sec__top（Business / News と共通）。グリッドだけ画面幅いっぱい。ステージ内なので地は透明（ロゴが背後に見える） */
.works__grid{display:grid;grid-template-columns:repeat(2,1fr);}
@media(max-width:700px){.works__grid{grid-template-columns:1fr;}}
.works__foot{display:flex;justify-content:center;margin-top:clamp(28px,4vw,56px);}   /* View More はグリッドの下・中央（2026-09-08） */

/* カードは <article>。詳細へのリンクは案件名だけが持ち、::before を広げてカード全体を押せるようにする。
   外部サイトの View Site はリンクの入れ子にできないので、その上に重ねる（2026-09-17） */
.wk{position:relative;display:block;}
.wk__media{
  position:relative;overflow:hidden;aspect-ratio:16/10;
  clip-path:inset(100% 0 0 0);
}
.js .wk__media{transition:clip-path var(--d-3) var(--ease) var(--dly,0ms);}
.wk.is-in .wk__media{clip-path:inset(0 0 0 0);}

.wk__img{
  position:absolute;inset:0;background:var(--ph);
  display:grid;place-items:center;
  transform:scale(var(--s,1.12));
  transition:transform var(--d-3) var(--ease) var(--dly,0ms);
}
.wk.is-in{--s:1;}
.wk:hover{--s:1.04;}
.wk:hover .wk__img{transition:transform var(--d-1) var(--ease);}
.wk__img img{width:100%;height:100%;object-fit:cover;display:block;}   /* サンプル写真（Unsplash）。本番写真に差し替える（2026-09-08） */
.wk__ph{
  font-family:var(--en);font-weight:500;font-size:var(--t-1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);
}

/* メタは 3 行：案件名（＋View Site）／ カテゴリと Client の 1 行 ／ タグ。行間は詰め、写真との間だけ空ける */
.wk__meta{
  padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,40px) clamp(34px,4vw,56px);
  display:flex;flex-direction:column;gap:7px;
}
/* 1 行目。View Site は右端。案件名が長いと折り返し、View Site は次の行の右端に付く */
.wk__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(12px,1.6vw,24px);}
.wk__name{font-size:var(--t-4);font-weight:400;line-height:1.55;letter-spacing:-.005em;min-width:0;}
.wk__link{display:inline-block;}
.wk__link::before{content:"";position:absolute;inset:0;z-index:1;}   /* カード全体を押せる範囲に広げる */
.wk__t{position:relative;}
.wk__t::after{                                                       /* 下線が左から伸びる（Business の .row__t と同じ作法） */
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.wk__link:hover .wk__t::after{transform:scaleX(1);}
.wk__ext{
  margin-left:auto;position:relative;z-index:2;                      /* 折り返しても右端に。カードのリンクより上に重ねる */
  font-family:var(--en);font-weight:500;font-size:var(--t-1);letter-spacing:.06em;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:opacity var(--d-1) var(--ease);
}
.wk__ext:hover{opacity:.55;}
.wk__arr{width:1em;height:1em;flex:none;}
/* 2 行目。カテゴリと Client を「／」でつなぐ。ラベル扱いの小さな文字なので薄い色でよい */
.wk__meta-line{font-size:var(--t-1);letter-spacing:.04em;color:var(--dim);line-height:1.7;}
.wk__sub-k{font-family:var(--en);font-weight:500;}   /* 「Client」の語だけ欧文に。サイズ・色は行のまま（2026-09-17） */

/* ==========================================================
   generic section
   ========================================================== */
.sec{padding-block:var(--sec);}
.sec__top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px 40px;margin-bottom:clamp(34px,4.5vw,68px);
}
.sec__head{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px);}
.sec__title{font-size:var(--t-h);}
/* 見出しの下のリード（Business。2026-09-17）。行長は ch ではなく em で決める：
   一番長い 3 行目（30 文字）が入る幅にして、<br> どおりの 3 行で見せる（44ch では「実行します。」が 4 行目に落ちた） */
.sec__lead{font-size:var(--t-2);line-height:1.95;color:var(--ink);max-width:32em;text-wrap:pretty;line-break:strict;}
@media(max-width:759px){
  .sec__lead br{display:none;}   /* 狭い画面は強制改行をやめて自然に流す（About の本文と同じ作法。2026-09-17） */
}
.nb{display:inline-block;}                                /* 見出しの折り返しを読点の位置に限る（スマホで語の途中で折れないように） */

/* ==========================================================
   business
   ========================================================== */
/* セクション全体を一段暗い面（--paper-2 の半透明）の角丸パネルにして、白い About と切り分ける（2026-09-07。地が白どうしだと境目が無く、余白だけが目立った）。
   画面端まで敷かず、両サイドに余白を残した角丸の面（参考：三菱商事系サイトの About Us パネル）。
   面は ::before に描き、小さく現れてスクロールで広がる（--bgS。main.js が書く）。ステージ内でキャンバス（z 0）の上に載る。不透明なので背後のロゴは見えない（2026-09-08） */
.biz-sec{
  --inset:clamp(12px,1.4vw,24px);
  --bgS:1;                                                 /* 面の拡大率。0.86 → 1 */
  --headTop:12px;                                          /* 題の行の積み始め。ナビの高さは残さず被せる（2026-09-08） */
  --stackTop:12px;                                         /* 項目の題の行が留まる位置。main.js が書く */
  --rowH:48px;                                             /* 題の行の高さ。main.js が測る */
  position:relative;
  margin-inline:var(--inset);
}
.biz-sec::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--paper-2);                               /* 不透明。半透明（.45）＋backdrop-filter で背後のロゴを透かしていたが「そもそも半透明やめてみて」で不透明に（2026-09-08） */
  border-radius:clamp(20px,2.2vw,32px);
  transform:scale(var(--bgS));transform-origin:50% 0;
  will-change:transform;
}
/* 中の文字はヘッダーやほかのセクションと同じ列に揃える（パネルの余白ぶんだけガターを減らす）。スマホはパネル内の余白 20px を優先 */
.biz__in{position:relative;z-index:1;padding-inline:max(calc(var(--gut) - var(--inset)),20px);}

/* 見出しは sticky にせず流して上へ抜ける（2026-09-08。留めると画面の 1/3 を食い、後ろの項目の中身が見切れた）。下に墨の罫線（項目の罫線より濃い） */
.biz__head{padding-bottom:clamp(16px,2vw,28px);border-bottom:1px solid var(--ink);}

/* 罫線で区切ったリスト。sticky なのは題の行（.item__t）だけ（参考：ユーザー提示の塗装会社サイトの Service。2026-09-08）。
   項目全体を sticky にすると後ろの項目ほど留まる位置が下がり、中身が画面下に押し出されて見切れた。
   中身（.item__c）は普通に流れ、積み重なった題の行の下に入った分を main.js が clip-path で切り取る。パネルのすりガラスを活かすため、不透明な背景では覆わない。
   項目は入れ子（項目 i の箱が i+1 以降を含む）。題の行の sticky の基準がリストの末尾まで届く */
.items{display:flex;flex-direction:column;}
.item{position:relative;}
.item__t{
  font-family:var(--en);font-weight:500;font-size:var(--t-2);letter-spacing:.01em;line-height:1.4;
  display:flex;align-items:center;gap:12px;
  padding-block:14px;border-bottom:1px solid var(--rule);
}
.item:first-child .item__t{border-top:0;}
.item__n{font-size:var(--t-1);letter-spacing:.06em;color:var(--dim);}
.item__c{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,40px);
  padding-block:clamp(24px,3vw,44px) clamp(40px,5vw,72px);
}
.item__media{
  position:relative;                                       /* 写真を inset:0 で敷くための基準（2026-09-17） */
  aspect-ratio:16 / 10;overflow:hidden;background:var(--ph);
  display:grid;place-items:center;
}
.item__media picture{display:contents;}
/* 写真は箱いっぱいに敷く。<picture> を display:contents にしたうえで height:100% にすると、
   grid の領域に対して百分率が解けず高さが足りなかったので、inset:0 の絶対配置で確実に埋める（2026-09-17） */
.item__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.item__ph{font-family:var(--en);font-size:var(--t-1);letter-spacing:.06em;color:var(--dimmer);}   /* 写真が無いあいだの仮置き */
.item__body{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);}
@media(min-width:840px){
  .item__t{position:sticky;top:calc(var(--stackTop) + var(--i) * var(--rowH));z-index:3;
    background:var(--paper-2);}                          /* 題の行はパネルと同じ色で塗る。速いスクロールで切り取りが 1 フレーム遅れて潜った写真の縁が透けないように（2026-09-08） */
  .item__c{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;}
  .item__media{aspect-ratio:4 / 3;}
  .item__body{padding-inline-end:clamp(0px,4vw,64px);}
}
.row__en{
  font-family:var(--en);font-weight:500;font-size:var(--t-4);
  letter-spacing:-.012em;line-height:1.35;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.row__t{position:relative;}
.row__t::after{                                           /* 下線が左から伸びる */
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.item__c:hover .row__t::after{transform:scaleX(1);}
.row__arr{                                                /* 右上向きの矢印が左下から滑り込む */
  width:.85em;height:.85em;color:var(--dim);flex:none;
  opacity:0;transform:translate(-6px,6px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.item__c:hover .row__arr{opacity:1;transform:none;}
@media(hover:none){.row__arr{opacity:1;transform:none;}}  /* タッチ端末では常に見せる */
.row__jp{font-size:var(--t-2);line-height:1.95;color:var(--ink);text-wrap:pretty;max-width:44ch;}   /* 本文は墨。--dim は薄すぎて読めない（2026-09-08「この薄さの文字色は使わない」） */

.chip{
  font-family:var(--en);font-weight:500;font-size:0.625rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;background:var(--yellow);color:var(--ink);line-height:1.4;white-space:nowrap;
}

/* ==========================================================
   黒い面（Contact）。adora のセクションは 2026-09-08 に TOP から外した（事業内容ページへ）
   ========================================================== */
.on-ink{background:var(--ink);color:var(--paper);}
.on-ink .label{color:var(--dim-i);margin-bottom:clamp(16px,2vw,26px);}

/* ==========================================================
   about — 固定されたヒーローの上に重なる。文字はセンター寄せ
   ========================================================== */
.about{
  position:relative;z-index:2;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding-top:clamp(120px,16vh,220px);
  padding-bottom:clamp(72px,9vh,120px);                   /* 次の Business は灰の帯なので、白の余白は詰める（--sec ＋溶けぶんは広すぎた。2026-09-07） */
  text-align:center;
}
.about__in{
  width:100%;
  display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,28px);
}
.about__h{font-size:var(--t-h);}                          /* ラベルとの間は about__in の gap だけ */
.about__l{display:block;}
.about__col{
  display:flex;flex-direction:column;align-items:center;gap:clamp(24px,3vw,40px);
  margin-top:clamp(4px,1vw,12px);                         /* 見出しとの間は about__in の gap ＋ 少しだけ */
  max-width:56ch;                                         /* 本文だけ行長を絞る。見出しは行ごとの span で折るので幅いっぱい（52 → 56。1440px で「ます。」が孤立していた。2026-09-17） */
}
.stage.is-gl .about__in{align-items:flex-start;text-align:left;}
.stage.is-gl .about__h{font-size:clamp(24px,3.05vw,44px);}
.stage.is-gl .about__col{width:52%;align-items:flex-start;}
@media(max-width:759px){
  .stage.is-gl .about{padding-top:52svh;}                /* 上に置いたロゴとラベルの間を空ける（48→52。2026-09-07） */
  .stage.is-gl .about__in{align-items:center;text-align:center;}
  .stage.is-gl .about__h{font-size:var(--t-h);}
  .stage.is-gl .about__col{width:100%;align-items:center;}
}
.msg{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,28px);}
.msg p{line-height:2.15;text-wrap:pretty;line-break:strict;}   /* <br> の改行と自動折り返しが混ざるので、行末の孤立を抑える。長音が行頭に来ないよう禁則は strict（2026-09-17） */
@media(max-width:759px){
  .msg br{display:none;}   /* センター寄せに強制改行が混ざると段落の途中に短い行が浮く。スマホは自然に流す（センター寄せは維持。2026-09-17） */
}

/* 黒いピルのボタン。余白と矢印は参考（Flow Button）に揃える：
   上下は文字の約 0.9 倍、左は 1.6 倍、文字と矢印の間は 1.25 倍、右は 1.3 倍。矢印は太さ 1.5 の線画（テキストの → は使わない） */
.btn{
  font-family:var(--en);font-weight:600;font-size:var(--t-2);
  line-height:1;padding:.9em 1.3em .9em 1.6em;border-radius:999px;
  background:var(--ink);color:#fff;
  white-space:nowrap;display:inline-flex;align-items:center;gap:1.25em;
  transition:opacity var(--d-1) var(--ease),transform var(--d-1) var(--ease);
}
.btn--paper{background:var(--paper);color:var(--ink);}       /* 黒い面（Contact）の上では白いピル */
.btn__arrow{display:block;width:1em;height:1em;flex:none;transition:transform var(--d-1) var(--ease);}
.btn:hover{opacity:.85;transform:translateY(-1px);}
.btn:hover .btn__arrow{transform:translateX(3px);}
.js .btn.fade.is-in:hover{transform:translateY(-1px);}
.btn--plain{padding-inline:1.6em;gap:0;}   /* 矢印が無いぶん左右の余白を揃える（2026-09-17） */

/* ==========================================================
   news
   ========================================================== */
.news__list{border-top:1px solid var(--rule);}
.news__item{
  display:grid;gap:2px clamp(20px,3vw,52px);grid-template-columns:minmax(0,1fr);
  padding-block:clamp(20px,2.2vw,28px);border-bottom:1px solid var(--rule);
  transition:background-color var(--d-1) var(--ease);
}
@media(min-width:760px){.news__item{grid-template-columns:9ch 10ch minmax(0,1fr);align-items:baseline;}}
.news__item:hover .news__t{color:var(--dim);}
.news__d{font-family:var(--en);font-weight:500;font-size:var(--t-1);color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.news__c{font-family:var(--en);font-weight:500;font-size:var(--t-1);letter-spacing:.06em;color:var(--dim);}
.news__t{font-size:var(--t-2);line-height:1.85;transition:color var(--d-1) var(--ease);}

/* ==========================================================
   contact
   ========================================================== */
.contact{
  --inset:clamp(12px,1.4vw,24px);                          /* Business のパネルと同じ余白・角丸（2026-09-08「左右と下にも同じように余白を」） */
  position:relative;z-index:1;
  margin-inline:var(--inset);margin-bottom:var(--inset);
  padding-block:clamp(96px,12vw,180px);                    /* 一度 64〜120 に詰めたが「バランスが悪い。もう少し高さを」で 96〜180 に（2026-09-08） */
  border-radius:clamp(20px,2.2vw,32px);
  background:rgba(26,26,30,.54);                           /* 墨の半透明。背後のロゴがすりガラス越しに透ける（.86 → .74 → .64 → .54「もう少し透明度を上げて」2026-09-08） */
  -webkit-backdrop-filter:blur(56px);backdrop-filter:blur(56px);
}
.contact__in{
  padding-inline:max(calc(var(--gut) + clamp(16px,3vw,48px) - var(--inset)),28px);   /* 他のセクションの列より内側に（「左右のパディングを広げて」2026-09-08） */
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px 40px;   /* 左にラベル＋見出し、右に丸いボタン。上下中央で揃える＝パネルの上下中央 */
}
.contact__body{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px);}
.contact__h{font-size:var(--t-h);display:block;}
.contact__p{font-size:var(--t-2);line-height:1.95;color:var(--paper);text-wrap:pretty;max-width:44ch;}   /* 本文は白。薄い色は使わない */
/* アウトラインの丸に矢印だけ。大きめ。ホバーで白く塗り、矢印が右へ滑る */
.ring-btn{
  flex:none;width:clamp(76px,9vw,124px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.72);color:#fff;
  display:grid;place-items:center;
  transition:background-color var(--d-1) var(--ease),color var(--d-1) var(--ease),border-color var(--d-1) var(--ease);
}
.ring-btn svg{width:34%;height:34%;display:block;transition:transform var(--d-1) var(--ease);}
.ring-btn:hover{background:#fff;color:var(--ink);border-color:#fff;}
.ring-btn:hover svg{transform:translateX(12%);}

/* ==========================================================
   footer
   ========================================================== */
/* 白の地。Contact のパネルの下の余白に続く。上段：左にロゴ、右にナビ・SNS・お問い合わせの列（住所は未確定で載せない）。下段：コピーライトだけ（2026-09-08） */
.foot{padding-block:clamp(40px,6vw,88px) clamp(28px,3vw,44px);background:var(--paper);color:var(--ink);}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:36px clamp(40px,8vw,120px);}
.foot__brand{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);}
.foot__tag{font-size:var(--t-2);font-weight:700;letter-spacing:.08em;line-height:1.4;}   /* ロゴの下にタグライン（2026-09-08）。英文＋和文の 2 行に（2026-09-17） */
.foot__tag .tag__en{font-size:var(--t-1);}
.foot__corp{font-size:var(--t-1);letter-spacing:.04em;line-height:1;}   /* タグラインの下に正式名称。社名で検索されたときの手がかりとして、全ページに文字で置く（2026-10-12） */
.foot__logo{
  font-family:var(--en);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.75rem);
  letter-spacing:-.035em;line-height:1;display:inline-block;
}
.foot__nav{display:flex;flex-wrap:wrap;gap:28px clamp(40px,6vw,88px);}
.foot__col{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:10px clamp(40px,6vw,88px);}   /* 3 行 2 列。縦に流す（2026-09-08） */
.foot__col a{
  font-family:var(--en);font-weight:500;font-size:var(--t-2);letter-spacing:.01em;line-height:1.6;   /* 600 は「濃い」で 500 に */
  transition:opacity var(--d-1) var(--ease);
}
.foot__col a:hover{opacity:.55;}
.foot__bottom{
  margin-top:clamp(40px,5vw,72px);padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;
}
.foot__sns{list-style:none;margin:0;padding:0;display:flex;gap:20px;}
.foot__sns a{font-family:var(--en);font-weight:500;font-size:var(--t-1);letter-spacing:.04em;transition:opacity var(--d-1) var(--ease);}
.foot__sns a:hover{opacity:.55;}
.foot__copy{font-family:var(--en);font-size:var(--t-1);letter-spacing:.05em;}
@media(max-width:720px){
  .foot__top{flex-direction:column;}
  .foot__nav{gap:24px 40px;}
}

/* ==========================================================
   reduced motion
   ========================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .ln > span{transform:none;opacity:1;transition:none;}
  .js .fade{opacity:1;transform:none;transition:none;}
  .shine.is-shine{animation:none;background-position:0 0;}
  .intro{display:none;}
  .hero__gl{display:none;}
  .hero.is-gltext .mark__w{visibility:visible;}
  .js .wk__media,.wk.is-in .wk__media{clip-path:inset(0 0 0 0);transition:none;}
  .wk__img{transform:none;transition:none;}
  .wk:hover{--s:1;}
  *{transition-duration:.01ms !important;}
}

/* ==========================================================
   下層ページ（works / news）。2026-09-17
   TOP と同じ作法のまま（type ladder・.wrap・.label・.h・.shine・.btn・.fade）、
   地は白でイントロもヒーローも無い。ナビは difference 合成のままなので白地の上では墨に見える。
   ========================================================== */
.page{padding-top:clamp(120px,16vh,200px);padding-bottom:var(--sec);}
.page-head{
  display:flex;flex-direction:column;gap:clamp(16px,2vw,28px);
  margin-bottom:clamp(40px,6vw,88px);
}
.page-head h1{font-size:var(--t-h);}
.page__foot{display:flex;justify-content:center;margin-top:clamp(48px,6vw,88px);}

/* 小さなピルのタグ。枠は罫線の色、文字は墨（薄い文字色は使わない） */
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  font-size:var(--t-1);line-height:1;letter-spacing:.04em;color:var(--ink);
  padding:.62em .9em;border:1px solid var(--rule);border-radius:999px;white-space:nowrap;
}

/* Works 一覧。カードの作法（.wk）は TOP と同じで、グリッドだけ .wrap の幅に収める（TOP は画面幅いっぱい） */
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(36px,4.5vw,72px) clamp(24px,3vw,48px);}
@media(max-width:700px){.works-grid{grid-template-columns:1fr;}}
.works-grid .wk__meta{padding:clamp(16px,1.8vw,24px) 0 0;}

/* Works 詳細 */
.wk-detail__head{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);margin-bottom:clamp(32px,4vw,56px);}
.wk-detail__head h1{font-size:var(--t-h);}
.wk-detail__head .wk__head{align-items:baseline;}
.wk-detail__media,.wk-detail__fig{position:relative;overflow:hidden;background:var(--ph);}
.wk-detail__media{aspect-ratio:16 / 10;}
.wk-detail__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* ギャラリーは切り抜かず、元の比率のまま（幅だけ列に合わせる） */
.wk-detail__fig img{display:block;width:100%;height:auto;}
.wk-detail__cols{display:grid;gap:clamp(36px,5vw,64px);margin-top:clamp(40px,5vw,80px);}
@media(min-width:840px){
  .wk-detail__cols{grid-template-columns:minmax(0,20em) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start;}
}
/* 概要の表。ラベルだけ小さく薄く、値は墨 */
.spec{border-top:1px solid var(--rule);}
.spec__row{display:grid;gap:4px;padding-block:clamp(14px,1.5vw,20px);border-bottom:1px solid var(--rule);}
.spec__k{font-family:var(--en);font-weight:500;font-size:var(--t-1);letter-spacing:.06em;color:var(--dim);}
.spec__v{font-size:var(--t-2);line-height:1.8;color:var(--ink);}
.wk-detail__figs{display:grid;gap:clamp(20px,2.4vw,32px);margin-top:clamp(28px,3.2vw,48px);align-items:start;}
@media(min-width:640px){.wk-detail__figs{grid-template-columns:repeat(2,1fr);}}

/* News 詳細。本文は microCMS のリッチエディタの HTML をそのまま流し込む想定なので、
   .news-body の中の素の要素に最低限のスタイルを当てる（2026-09-17） */
.news-detail__head{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);margin-bottom:clamp(32px,4vw,56px);}
.news-detail__head h1{font-size:var(--t-h);}
.news-detail__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(14px,1.6vw,24px);}
/* 間隔は .msg に頼らず自前で持つ。.msg は About 用（759px 以下で br を消すなど）で、
   リッチエディタの HTML には向かない（2026-09-17） */
/* News 詳細は 1 列を狭くして画面の中央に置く（見出し・アイキャッチ・本文・戻るボタンをまとめて。2026-09-17） */
.news-detail{max-width:44em;margin-inline:auto;}
.news-body{margin-top:clamp(40px,5vw,80px);line-break:strict;}
.news-body > * + *{margin-top:clamp(20px,2.2vw,28px);}      /* About の .msg と同じ段落間隔 */
.news-body p,.news-body li{line-height:2.15;}
.news-body h2{font-size:var(--t-4);font-weight:400;line-height:1.55;letter-spacing:-.005em;}
.news-body h3{font-size:var(--t-3);font-weight:500;line-height:1.6;}
.news-body > h2{margin-top:clamp(30px,3.3vw,48px);}         /* 見出しの前だけ少し広く（従来の gap ＋ margin と同じ量） */
.news-body > h3{margin-top:clamp(26px,2.6vw,38px);}
.news-body ul,.news-body ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px;}
.news-body > ul,.news-body > ol{margin-top:clamp(20px,2.2vw,28px);}
.news-body a{text-decoration:underline;text-underline-offset:.2em;transition:opacity var(--d-1) var(--ease);}
.news-body a:hover{opacity:.55;}
.news-body strong{font-weight:500;}
.news-body img{display:block;width:100%;height:auto;}

/* News 一覧。TOP の .news__list をそのまま使い、カテゴリの列を出さないぶん 2 列にする */
.news__list--2 .news__item{grid-template-columns:minmax(0,1fr);}
@media(min-width:760px){.news__list--2 .news__item{grid-template-columns:9ch minmax(0,1fr);}}

/* ==========================================================
   お問い合わせフォーム（contact/）。2026-09-17
   入力欄は下罫線だけ。背景も角丸も持たせない。サイズは type ladder のまま
   ========================================================== */
/* お問い合わせは列ごと中央に寄せる（News 詳細の .news-detail と同じ作法で、幅だけ狭く。2026-09-17） */
.contact-col{max-width:40em;margin-inline:auto;}
.page__lead{font-size:var(--t-2);line-height:1.95;color:var(--ink);max-width:44em;}
.form{display:flex;flex-direction:column;gap:clamp(24px,3vw,36px);}
.field{display:flex;flex-direction:column;gap:8px;}
.field__label{font-size:var(--t-2);font-weight:500;line-height:1.6;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.field__in{
  font-family:inherit;font-size:var(--t-2);line-height:1.6;color:var(--ink);
  width:100%;padding:7px 2px;background:none;          /* ラベル → 入力欄 → 罫線の縦のリズムを締める（2026-09-17） */
  border:0;border-bottom:1px solid var(--rule);border-radius:0;
  transition:border-color var(--d-1) var(--ease);
}
.field__in:focus{outline:none;border-bottom-color:var(--ink);}
.field__in::placeholder{color:var(--dimmer);}
select.field__in{
  appearance:none;-webkit-appearance:none;padding-right:26px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:12px 8px;
}
textarea.field__in{resize:vertical;min-height:10em;line-height:1.9;padding-block:9px;}
.form__agree{display:flex;align-items:flex-start;gap:12px;font-size:var(--t-2);line-height:1.8;}
.form__agree input{flex:none;width:17px;height:17px;margin:.45em 0 0;accent-color:var(--ink);}
.form__agree label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.form__agree a{text-decoration:underline;text-underline-offset:.2em;transition:opacity var(--d-1) var(--ease);}
.form__agree a:hover{opacity:.55;}
.form__error{font-size:var(--t-2);line-height:1.9;color:var(--ink);}
.form__foot{margin-top:clamp(4px,1vw,12px);}
button.btn{border:0;cursor:pointer;}
.btn[disabled]{opacity:.32;pointer-events:none;}

/* フッター下段のプライバシーポリシー。SNS と同じ組み（2026-09-17） */
.foot__legal{font-family:var(--jp);font-size:var(--t-1);letter-spacing:.04em;transition:opacity var(--d-1) var(--ease);}
.foot__legal:hover{opacity:.55;}

/* ==========================================================
   microCMS から描くときの器（2026-09-18）
   ========================================================== */
.works-grid{min-height:40vh;}                              /* 取得待ちでレイアウトが跳ねないように */
/* 詳細は取得できるまで中身が空で、ページが短い。フッターが視界に入ったまま下へ動くのでレイアウトシフトになる。
   画面 1 つぶんの高さを先に確保し、中身が入って伸びてもフッターは視界の外で動くようにする（2026-09-18） */
#worksList,#newsList,
#workDetail,#newsDetail{min-height:calc(100svh + 80px);}
[data-loading]{visibility:hidden;}   /* cms.js が中身を入れるまで隠す。空の見出しが埋まるときの跳ねを防ぐ（2026-09-18） */   /* ちょうど 100svh だとフッターの上端が画面の下端に重なり、計測で拾われることがある */
.cms-error{font-size:var(--t-2);line-height:1.95;color:var(--ink);padding-block:clamp(24px,3vw,40px);}
.wk-detail__cols .news-body{margin-top:0;}                 /* 2 列の右側に置くので上の余白は要らない */
/* お知らせカード：写真が無い記事はサムネと glow を隠し、文字だけにする（幅は変えない） */
.hero__news.is-noimg .hnews__thumb,
.hero__news.is-noimg .hnews__glow{display:none;}
/* 余白は変数で持ち、× の位置をそこから出す：× の中心を「News 日付」の行の中心に、× の右端を文字の右端（padding の内側）に揃える（2026-10-06） */
.hero__news.is-noimg{--hn-py:clamp(18px,1.5vw,22px);--hn-px:clamp(20px,1.8vw,26px);}
.hero__news.is-noimg .hnews__card{padding:var(--hn-py) var(--hn-px);}   /* 14 → 上下 18〜22・左右 20〜26。文字だけだと縁に詰まって見える（2026-10-06） */
.hero__news.is-noimg .hnews__close{top:calc(var(--hn-py) - 6px);right:calc(var(--hn-px) - 8px);}   /* ボタンは 28px・× は 12px なので、行の中心と右端に合うぶんだけ外へ出す（2026-10-06） */
@media(max-width:720px){
  .hero__news.is-noimg{--hn-py:18px;--hn-px:20px;}        /* スマホは固定値（2026-10-06） */
}

/* ==========================================================
   About / Business のページ（2026-09-18）
   ========================================================== */
/* About の「会社概要」。本文（.msg）と表のあいだを空ける */
.about-page__h2{
  font-size:var(--t-4);font-weight:400;line-height:1.55;letter-spacing:-.005em;
  margin-top:clamp(56px,7vw,104px);margin-bottom:clamp(16px,2vw,24px);
}
.page__foot--start{justify-content:flex-start;}              /* About のボタンだけ本文と同じ左端に（他ページの戻るボタンは中央のまま） */

/* Business のページは TOP のような sticky の積み重ねをしない素の縦並び。
   .biz-sec のパネルも使わないので、題の行に色は敷かない。項目はリンクではないので下線も出さない */
.items--flat .item{position:static;}
.items--flat .row__t::after{display:none;}
@media(min-width:840px){
  .items--flat .item__t{position:static;background:none;}
}

/* ==========================================================
   ページ遷移（2026-09-18）
   出ていくとき：main と footer をゆっくり薄くしてから移動する。ナビは固定のまま消さない。
   入ってくるとき：下層は隠した状態で始め（head.js の .is-entering）、読み込み後に外して現れる。
   隠れている間は中の要素の transition を切る。main.js が画面内の .fade / .wk を最終状態にしてから外すので、
   見える動きは main のフェード 1 本だけになる（2026-10-06）
   ========================================================== */
.js main,.js footer{transition:opacity var(--d-2) var(--ease);}
.js.is-entering main,.js.is-entering footer{opacity:0;transition:none;}
.js.is-entering main *,.js.is-entering footer *{transition:none !important;}
.is-leaving main,.is-leaving footer{opacity:0;transition:opacity .35s var(--ease);}

@media(prefers-reduced-motion:reduce){
  .js main,.js footer,.js.is-entering main,.js.is-entering footer,
  .is-leaving main,.is-leaving footer{opacity:1;transition:none;}
}