/* =========================================================
   暁装飾 — Top page（第3版）
   白地・黒・差し色1色の端正なコーポレートスタイル。
   差し色のオレンジを「暁＝朝焼けの色」として使う。
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Type families */
  --f-jp: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","YuGothic","游ゴシック",Meiryo,sans-serif;
  --f-en: "Roboto","Helvetica Neue",Arial,var(--f-jp);

  /* Type scale */
  --fs-hero: clamp(2.5rem, 4.6vw, 4.375rem);
  --fs-en-xl: clamp(2.5rem, 4.4vw, 4rem);      /* セクションの英字見出し */
  --fs-en-l: clamp(1.625rem, 2.5vw, 2.375rem); /* 事業名の英字 */
  --fs-h3: clamp(1.25rem, 1.9vw, 1.625rem);
  --fs-body: .9375rem;
  --fs-sm: .875rem;
  --fs-cap: .75rem;

  /* Spacing */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 1140px;
  --wrap-narrow: 970px;
  --sec-pad: clamp(5rem, 10vw, 9rem);
  --edge: 40px;            /* 左右の縦ガイドラインの位置 */
  --header-h: 90px;

  /* Color — 役割で命名 */
  --bg: #ffffff;
  --surface-2: #f5f5f5;    /* 施工事例の帯・エリアの地 */
  --ink: #111111;          /* 見出し・ボタン   白地 18.88:1 */
  --ink-2: #222222;        /* 本文             白地 15.91:1 */
  --ink-mut: #666666;      /* 注釈             白地 5.74:1 / #f5f5f5 5.27:1 */
  --ghost: #f3f3f3;        /* 背景の大きな英字・数字（装飾） */
  --line: #e2e2e2;         /* 罫線 */
  --guide: rgba(0,0,0,.05);/* 背景の縦ガイドライン */
  --accent: #f99900;       /* 朝焼け：面・線・装飾。白地の文字には使わない／黒地の文字 8.62:1 */
  --accent-ink: #a65300;   /* 白地の強調文字   白地 5.44:1 / #f5f5f5 4.99:1 */
  --accent-large: #c96f00; /* 白地の大きな数字（24px以上の太字のみ） 3.65:1 */
  --accent-btn: #a65300;   /* 白文字を載せる面 5.44:1 */
  --dark: #111111;         /* お問い合わせの地 */
  --on-dark: #ffffff;
  --on-dark-mut: #a3a3a3;  /* #111 上 7.49:1 */
  --line-dark: rgba(255,255,255,.18);

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}
@media (max-width: 1024px){ :root{ --header-h: 72px; --edge: 24px; } }
@media (max-width: 820px){ :root{ --header-h: 64px; --edge: 12px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--f-jp);
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1,h2,h3,p,ol,ul,dl,dd,figure{ margin:0; }
ol,ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button,input,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3{
  color: var(--ink);
  line-height: 1.5;
  font-feature-settings: "palt";
  word-break: auto-phrase;  /* 文節単位で改行（対応ブラウザのみ） */
  text-wrap: initial;       /* 日本語に balance は使わない */
}
p{ text-wrap: pretty; }
.about__text, .svc__text, .contact__lead, .news__title, .area__lead, .area__note, .work__title, .company__table dd, .prose{ word-break: auto-phrase; }
::selection{ background: var(--accent); color: var(--ink); }
:focus-visible{ outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.contact :focus-visible{ outline-color: var(--accent); }

.u-vh{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.u-svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.br-sp{ display:none; }
@media (max-width: 820px){ .br-sp{ display:inline; } .br-pc{ display:none; } }

.skip{ position:fixed; left:var(--gutter); top:-100px; z-index:200; padding:.75rem 1.25rem; background:var(--ink); color:#fff; }
.skip:focus{ top:1rem; }

.wrap{ width:100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline:auto; padding-inline: var(--gutter); }
.wrap--narrow{ max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }
.section{ padding-block: var(--sec-pad); }

/* ---------- 背景の縦ガイドライン（装飾） ---------- */
.guides{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.guides span{ position:absolute; top:0; bottom:0; width:1px; background: var(--guide); }
.guides span:nth-child(1){ left: var(--edge); }
.guides span:nth-child(2){ left: 50%; }
.guides span:nth-child(3){ right: var(--edge); }

/* ---------- セクション見出し（英字＋日本語ラベル） ---------- */
.sec-head{
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap: clamp(1rem, 2vw, 1.5rem); row-gap:.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  font-weight:400; line-height:1;
}
.sec-head__en{
  position:relative; isolation:isolate;
  font-family: var(--f-en); font-weight:900; font-size: var(--fs-en-xl);
  letter-spacing:.01em; line-height:1; color: var(--ink);
}
.sec-head__en::before{
  content:""; position:absolute; z-index:-1; left:-.16em; bottom:-.06em;
  width:.42em; height:.42em; background: var(--accent);
}
.sec-head__line{ width: clamp(40px, 8vw, 110px); height:1px; background: var(--line); }
.sec-head__jp{ font-size: var(--fs-sm); font-weight:500; letter-spacing:.12em; color: var(--ink); }
.sec-head--light .sec-head__en, .sec-head--light .sec-head__jp{ color: var(--on-dark); }
.sec-head--light .sec-head__line{ background: var(--line-dark); }

/* ---------- Buttons（黒い四角ボタン。すべてここから派生） ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center;
  min-width: 200px; min-height: 52px; padding: .8em 2.75em .8em 1.4em;
  border:1px solid var(--ink); background: var(--ink); color:#fff;
  font-size: var(--fs-sm); font-weight:700; letter-spacing:.1em; line-height:1.4;
  transition: background-color .3s, border-color .3s, color .3s;
}
/* 右端から突き出すオレンジの線 */
.btn::after{
  content:""; position:absolute; top:50%; right:-16px; width:32px; height:1px;
  background: var(--accent);
  transition: right .4s var(--ease-out), width .4s var(--ease-out);
}
.btn:hover{ background: var(--accent-btn); border-color: var(--accent-btn); }
.btn:hover::after{ right:-24px; width:48px; }
.btn--block{ width:100%; justify-content:center; padding-inline:1.4em; }
.btn--block::after{ display:none; }
.btn--outline{ background: var(--bg); color: var(--ink); }
.btn--outline:hover{ color:#fff; }
.btn--accent{ border-color: var(--accent); background: var(--accent); color: var(--ink); }  /* 黒文字 8.62:1 */
.btn--accent::after{ background: var(--on-dark); }
.btn--accent:hover{ border-color:#ffb13d; background:#ffb13d; }                            /* 黒文字 10.44:1 */

/* 四角い矢印ボタン（スライド送り） */
.sq-btn{
  display:grid; place-items:center; width:44px; height:44px;
  background: var(--ink); color:#fff;
  transition: background-color .3s, opacity .3s;
}
.sq-btn svg{ width:16px; height:16px; transform: rotate(180deg); }
.sq-btn--next svg{ transform:none; }
.sq-btn:hover{ background: var(--accent-btn); }
.sq-btn[aria-disabled="true"]{ opacity:.25; cursor:default; background: var(--ink); }

/* 矢印付きテキストリンク（左に区切り線） */
.link-list{ display:flex; flex-wrap:wrap; }
.link-arrow{
  display:inline-flex; align-items:center; gap:.9rem;
  min-height:44px; padding: .4rem 0 .4rem 1.75rem;
  border-left:1px solid var(--line);
  font-size: var(--fs-sm); letter-spacing:.08em; color: var(--ink);
  transition: color .3s;
}
.link-arrow svg{ width:14px; height:14px; color: var(--accent); transition: transform .3s var(--ease-out); }
.link-arrow:hover{ color: var(--accent-ink); }
.link-arrow:hover svg{ transform: translateX(4px); }

/* タグ（オレンジの枠） */
.tags{ display:flex; flex-wrap:wrap; gap:.375rem; }
.tags li, .tag{
  display:inline-block; padding: .05em .55em;
  border:1px solid var(--accent); color: var(--accent-ink);
  font-size: var(--fs-cap); line-height:1.7; letter-spacing:.06em; white-space:nowrap;
}

/* 仮画像の印 */
.ph-tag{
  position:absolute; right:.5rem; top:.5rem; z-index:1;
  padding:.1em .5em; background: rgba(17,17,17,.72); color:#fff;
  font-size:.625rem; line-height:1.6; letter-spacing:.1em;
}

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; gap: clamp(1.25rem, 2.6vw, 2.5rem);
  height: var(--header-h); padding-left: clamp(1.25rem, 2.2vw, 2rem);
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: box-shadow .3s;
}
.header.is-scrolled{ box-shadow: 0 1px 0 var(--line); }
.logo{ display:flex; align-items:center; gap:.7rem; margin-right:auto; color: var(--ink); line-height:1; }
.logo__mark{ width:42px; height:42px; flex:none; --sun: var(--accent); }
.logo__text{ display:grid; gap:.4rem; }
.logo__jp{ font-weight:900; font-size:1.375rem; letter-spacing:.16em; }
.logo__en{
  position:relative; isolation:isolate; justify-self:start;
  font-family: var(--f-en); font-weight:500; font-size:.625rem; letter-spacing:.14em;
}
.logo__en::before{ content:""; position:absolute; z-index:-1; left:-3px; bottom:-2px; width:9px; height:9px; background: var(--accent); }

.nav__list{ display:flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.nav__link{
  position:relative; display:block; padding-block:.5rem;
  font-size: var(--fs-sm); font-weight:500; letter-spacing:.1em; color: var(--ink);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background: var(--accent);
  transform: scaleX(0); transform-origin:right; transition: transform .4s var(--ease-out);
}
.nav__link:hover::after{ transform: scaleX(1); transform-origin:left; }

.header__cta{
  display:inline-flex; align-items:center; gap:.6rem; align-self:stretch;
  padding-inline: clamp(1.25rem, 2.2vw, 2rem);
  background: var(--ink); color:#fff;
  font-size: var(--fs-sm); font-weight:700; letter-spacing:.1em;
  transition: background-color .3s;
}
.header__cta svg{ width:20px; height:20px; color: var(--accent); }
.header__cta:hover{ background: var(--accent-btn); }
.header__cta:hover svg{ color:#fff; }

/* ハンバーガー：上段のみオレンジ */
.menu-btn{ display:none; position:relative; width:52px; height:52px; margin-right: calc(var(--gutter) - 12px); }
.menu-btn__lines,
.menu-btn__lines::before,
.menu-btn__lines::after,
.menu-btn__lines span{ position:absolute; left:11px; right:11px; height:2px; }
.menu-btn__lines{ top:50%; left:0; right:0; margin-top:-1px; }
.menu-btn__lines::before{ content:""; top:-9px; background: var(--accent); transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.menu-btn__lines span{ top:0; background: var(--ink); transition: opacity .3s; }
.menu-btn__lines::after{ content:""; top:9px; background: var(--ink); transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.is-menu-open .menu-btn__lines::before{ top:0; transform: rotate(35deg); }
.is-menu-open .menu-btn__lines span{ opacity:0; }
.is-menu-open .menu-btn__lines::after{ top:0; transform: rotate(-35deg); }

.sp-menu{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  padding: calc(var(--header-h) + 1.25rem) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--bg); overflow-y:auto;
  opacity:0; visibility:hidden; transition: opacity .35s, visibility 0s .35s;
}
.is-menu-open .sp-menu{ opacity:1; visibility:visible; transition: opacity .35s; }
.sp-menu__nav a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-block:1rem; border-bottom:1px solid var(--line);
  font-size:1rem; font-weight:700; letter-spacing:.1em; color: var(--ink);
}
.sp-menu__nav span{ font-family: var(--f-en); font-weight:700; font-size:.75rem; letter-spacing:.14em; color: var(--accent-ink); }
.sp-menu__foot{ display:grid; gap:.75rem; }

/* ---------- Hero ---------- */
.hero{ position:relative; height: max(640px, 100svh); }

/* 左の白い余白に縦書きの英字（装飾） */
.hero__ghost{
  position:absolute; left:0; top: calc(var(--header-h) + 8px);
  writing-mode: vertical-rl;
  font-family: var(--f-en); font-weight:900; font-size: clamp(5rem, 8.6vw, 8.5rem);
  line-height:.82; letter-spacing:-.01em; color: var(--ghost);
  white-space:nowrap; user-select:none; pointer-events:none;
}
.hero__ghost span{ display:block; }

.hero__slider{
  position:absolute; top: var(--header-h); bottom:40px; left:18.75%; right:0;
  overflow:hidden; background: var(--surface-2);
}
.hero__slides, .hero__slide{ position:absolute; inset:0; }
.hero__slide{ opacity:0; transition: opacity 1.6s var(--ease-io); }
.hero__slide.is-active{ opacity:1; z-index:1; }
/* 表示中はゆっくり引き、切り替わって見えなくなってから元に戻す */
.hero__slide img{
  width:100%; height:100%; object-fit:cover; object-position: var(--pos, 50% 50%);
  transform: scale(1.1); transition: transform 0s linear 1.6s;
}
.hero__slide.is-active img{ transform: scale(1); transition: transform 8s linear; }
.js:not(.is-ready) .hero__slide.is-active img{ transform: scale(1.1); }
/* キャッチが重なる左端だけ白く明るくして読みやすく */
.hero__slider::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,0) 32%);
}
.hero__emblem{
  position:absolute; z-index:3; left:56%; top:50%; transform: translate(-50%,-50%);
  display:grid; justify-items:center; gap:.7rem;
  color:#fff; filter: drop-shadow(0 2px 14px rgba(0,0,0,.35));
}
.hero__emblem svg{ width: clamp(64px, 6.2vw, 88px); height:auto; aspect-ratio:1; }
.hero__emblem span{ font-family: var(--f-en); font-weight:700; font-size:.8125rem; letter-spacing:.18em; line-height:1; }

.hero__copy{ position:absolute; z-index:4; left: max(var(--gutter), 5vw); top:50%; transform: translateY(-44%); }
.hero__eyebrow{
  display:inline-block; margin-bottom: 1.5rem; padding:.3em .8em;
  background: var(--ink); color:#fff;
  font-size: var(--fs-cap); font-weight:700; letter-spacing:.12em; line-height:1.6;
}
.hero__title{
  position:relative; isolation:isolate;
  font-size: var(--fs-hero); font-weight:900; line-height:1.36; letter-spacing:.04em; color: var(--ink);
}
.hero__line{ display:block; overflow:hidden; padding-block:.04em; }
.hero__line > span{ display:inline-block; }
/* 最終行の左下にオレンジの四角 */
.hero__title::before{
  content:""; position:absolute; z-index:-1; left:-.3em; bottom:-.16em;
  width:.8em; height:.8em; background: var(--accent);
}
.hero__lead{ margin-top: 1.75rem; font-size: var(--fs-sm); font-weight:500; line-height:2.2; letter-spacing:.08em; color: var(--ink); }
.hero__lead span{ padding:.25em .6em; background: rgba(255,255,255,.92); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* 右端の黒い操作パネル（枚数・前後） */
.hero__ctrl{
  position:absolute; z-index:5; right:0; top:50%; transform: translateY(-50%);
  display:grid; width:44px; background: var(--ink); color:#fff;
}
.hero__count{
  display:flex; align-items:center; justify-content:center; height:44px;
  border-bottom:1px solid rgba(255,255,255,.2);
  font-family: var(--f-en); font-size:.75rem; font-weight:500; letter-spacing:.04em; line-height:1;
}
.hero__arrow{ display:grid; place-items:center; width:44px; height:44px; color: var(--accent); transition: color .3s; }
.hero__arrow svg{ width:16px; height:16px; transform: rotate(-90deg); }
.hero__arrow--next svg{ transform: rotate(90deg); }
.hero__arrow:hover{ color:#fff; }

/* 左下の Scroll（左のガイドライン上） */
.hero__scroll{
  position:absolute; z-index:4; left: calc(var(--edge) - 22px); bottom:0;
  display:block; width:44px; padding-bottom: 80px;
  writing-mode: vertical-rl;
  font-family: var(--f-en); font-size:.6875rem; font-weight:500; letter-spacing:.16em; line-height:44px;
  color: var(--ink);
}
.hero__scroll::before, .hero__scroll::after{ content:""; position:absolute; left:50%; bottom:0; width:1px; height:64px; }
.hero__scroll::before{ background: var(--line); }
.hero__scroll::after{ background: var(--ink); animation: scroll-line 2.4s var(--ease-io) infinite; }
@keyframes scroll-line{
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  50.1%{ transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* 開幕：写真が右から開き、キャッチがせり上がる */
.js .hero__slider{ clip-path: inset(0 0 0 100%); transition: clip-path 1.4s var(--ease-io) .1s; }
.js .hero__line > span{ transform: translateY(105%); transition: transform 1.1s var(--ease-out) .45s; }
.js .hero__line:nth-child(3) > span{ transition-delay: .57s; }
.js .hero__title::before{ transform: scale(0); transform-origin: left bottom; transition: transform .7s var(--ease-out) 1s; }
.js .hero__eyebrow, .js .hero__lead, .js .hero__ghost, .js .hero__scroll{ opacity:0; transition: opacity 1.2s var(--ease-out) .9s; }
.is-ready .hero__slider{ clip-path: inset(0); }
.is-ready .hero__line > span, .is-ready .hero__title::before{ transform:none; }
.is-ready .hero__eyebrow, .is-ready .hero__lead, .is-ready .hero__ghost, .is-ready .hero__scroll{ opacity:1; }

/* ---------- スクロールで表示 ---------- */
.js [data-reveal]:not([data-reveal="img"]){
  opacity:0; transform: translateY(24px);
  transition: opacity .9s var(--ease-out) var(--d,0s), transform .9s var(--ease-out) var(--d,0s);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }
/* 写真は左から幕が開くように。
   監視対象の枠そのものを clip-path で隠すと「画面外」と判定されるため、隠すのは中の画像 */
.js [data-reveal="img"] img{
  clip-path: inset(0 100% 0 0); transform: scale(1.12);
  transition: clip-path 1.2s var(--ease-io) var(--d,0s), transform 1.8s var(--ease-out) var(--d,0s);
}
.js [data-reveal="img"].is-in img{ clip-path: inset(0); transform:none; }
/* 見出しの四角と線は、文字のあとから */
.js .sec-head[data-reveal] .sec-head__en::before{ transform: scale(0); transition: transform .6s var(--ease-out) .35s; }
.js .sec-head[data-reveal] .sec-head__line{ transform: scaleX(0); transform-origin:left; transition: transform .8s var(--ease-out) .25s; }
.js .sec-head[data-reveal].is-in .sec-head__en::before,
.js .sec-head[data-reveal].is-in .sec-head__line{ transform:none; }

/* ---------- About ---------- */
.about__grid{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items:start;
}
.about__title{ margin-bottom: 1.75rem; font-size: var(--fs-h3); font-weight:500; line-height:1.65; letter-spacing:.06em; color: var(--ink); word-break: auto-phrase; }
.about__text{ line-height:2.1; }
.points{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  margin-block: 2.5rem 3.25rem;
  border-block:1px solid var(--line);
}
.points__item{ padding: 1.1rem 1rem 1.2rem; font-size: var(--fs-sm); font-weight:700; line-height:1.6; letter-spacing:.06em; color: var(--ink); }
.points__item:first-child{ padding-left:0; }
.points__item + .points__item{ border-left:1px solid var(--line); }
.points__en{ display:block; margin-bottom:.45rem; font-family: var(--f-en); font-weight:900; font-size:.8125rem; letter-spacing:.14em; color: var(--accent-ink); }
.about__media{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2.25rem);
  margin-right: calc(var(--gutter) * -1); padding-top: clamp(0rem, 4vw, 3.5rem);
}
.about__img{ aspect-ratio: 324 / 370; overflow:hidden; }
.about__img--2{ margin-top: clamp(3rem, 7vw, 6rem); }
.about__img img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Services ---------- */
.svc{ display:grid; gap: clamp(5rem, 9vw, 8rem); }
.svc__item{ position:relative; isolation:isolate; overflow-x:clip; display:grid; grid-template-columns: 60% minmax(0, 1fr); align-items:center; }
.svc__img{ aspect-ratio: 16 / 9; overflow:hidden; }
.svc__img img{ width:100%; height:100%; object-fit:cover; object-position: var(--pos, 50% 50%); }
.svc__body{ position:relative; max-width: 520px; padding-inline: clamp(2rem, 4.2vw, 4rem) var(--gutter); }
/* 背景の大きな番号（装飾） */
.svc__num{
  position:absolute; z-index:-1; right: calc(var(--edge) * -1 - .04em); top:50%; transform: translateY(-62%);
  font-family: var(--f-en); font-weight:900; font-size: clamp(9rem, 21vw, 19rem);
  line-height:1; letter-spacing:-.03em; color: var(--ghost);
  user-select:none; pointer-events:none;
}
.svc__title{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.1rem; margin-bottom: 1.4rem; line-height:1.2; }
.svc__en{ font-family: var(--f-en); font-weight:700; font-size: var(--fs-en-l); letter-spacing:.01em; color: var(--ink); }
.svc__jp{ font-size: var(--fs-sm); font-weight:500; letter-spacing:.1em; color: var(--ink); }
.svc__text{ margin-bottom: 1.5rem; line-height:2.1; }

/* ---------- Works（グレーの帯＋横スクロール） ---------- */
.works__band{ margin-right: var(--edge); padding-block: var(--sec-pad); background: var(--surface-2); }
.works__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.75rem 2rem; }
.works__head .sec-head{ margin-bottom:0; }
.works__note{ font-size: var(--fs-cap); color: var(--ink-mut); line-height:1.6; }
.works__track{
  /* 1枚目の左端を本文の左端にそろえ、右は画面端まで流す */
  --track-pad: max(var(--gutter), calc((100% + var(--edge) - var(--wrap)) / 2));
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow-x:auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--track-pad);
  scrollbar-width:none;
}
.works__track::-webkit-scrollbar{ display:none; }
.works__track:focus-visible{ outline-offset:-2px; }
.works__list{ display:flex; gap: clamp(1.5rem, 2.8vw, 2.5rem); width:max-content; padding-inline: var(--track-pad); }
.work{ flex:none; width: clamp(240px, 21vw, 290px); scroll-snap-align:start; }
.work__img{ position:relative; aspect-ratio: 10 / 7; margin-bottom: 1rem; overflow:hidden; background:#e6e6e6; }
.work__img img{ width:100%; height:100%; object-fit:cover; }
.work__title{ margin-bottom:.65rem; font-size: var(--fs-sm); font-weight:500; line-height:1.6; letter-spacing:.06em; }
.work__more{
  position:relative; display:grid; align-content:center; justify-items:start; gap:.6rem;
  aspect-ratio: 10 / 7; padding: 1.5rem 1.75rem;
  background: var(--ink); color:#fff; transition: background-color .3s;
}
.work__more svg{ width:26px; height:26px; color: var(--accent); }
.work__more-en{ font-family: var(--f-en); font-weight:900; font-size:1.25rem; letter-spacing:.06em; line-height:1.2; }
.work__more-jp{ font-size: var(--fs-cap); line-height:1.8; letter-spacing:.06em; }
.work__more-id{ font-family: var(--f-en); font-size: var(--fs-cap); color: var(--accent); letter-spacing:.04em; }
.work__more:hover{ background: var(--accent-btn); }
.work__more:hover svg, .work__more:hover .work__more-id{ color:#fff; }
.works__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.works__nav{ display:flex; gap:1px; }
/* カード全体が詳細ページへのリンク（microCMS から生成） */
.work__link{ display:block; }
.work__link .work__img img{ transition: transform .8s var(--ease-out); }
.work__link:hover .work__img img{ transform: scale(1.05); }
.work__link .work__title{ transition: color .3s; }
.work__link:hover .work__title{ color: var(--accent-ink); }

/* ---------- News ---------- */
.news__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.news__head .sec-head{ margin-bottom:0; }
.news__item{
  display:grid; grid-template-columns: 6.5rem 6.25rem minmax(0,1fr); align-items:baseline; gap:.5rem 1.5rem;
  padding-block: 1.3rem; border-bottom:1px solid var(--line);
}
.news__item:first-child{ border-top:1px solid var(--line); }
.news__date{ font-family: var(--f-en); font-size: var(--fs-sm); font-weight:500; letter-spacing:.06em; color: var(--ink); }
.news__item .tag{ text-align:center; }
.news__title{ line-height:1.8; color: var(--ink); }
.news__title a{ transition: color .3s; }
.news__title a:hover{ color: var(--accent-ink); }
.news__empty{ grid-column: 1 / -1; }

/* ---------- Company ---------- */
.company__grid{ display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items:start; }
.company__table > div{ display:grid; grid-template-columns: 7.5em minmax(0,1fr); gap:1rem; padding-block: 1.25rem; border-bottom:1px solid var(--line); line-height:1.9; }
.company__table > div:first-child{ border-top:2px solid var(--ink); }
.company__table dt{ font-weight:700; color: var(--ink); }
.company__table dd a{ text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset:.3em; }
.company__table dd a:hover{ color: var(--accent-ink); }
.area__img{ aspect-ratio: 2 / 1; margin-bottom: 1.75rem; overflow:hidden; }
.area__img img{ width:100%; height:100%; object-fit:cover; }
.area__title{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:.5rem; font-size:1.0625rem; font-weight:700; letter-spacing:.1em; line-height:1.4; color: var(--ink); }
.area__en{ font-family: var(--f-en); font-weight:900; font-size:1.5rem; letter-spacing:.04em; }
.area__list{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.5rem; margin-block: 1.25rem; }
.area__list li{ display:grid; place-items:center; min-height:44px; background: var(--surface-2); font-size: var(--fs-sm); font-weight:500; letter-spacing:.06em; color: var(--ink); }
.area__note{ font-size: var(--fs-cap); color: var(--ink-mut); line-height:1.8; }

/* ---------- Contact（黒地） ---------- */
.contact{ background: var(--dark); color: var(--on-dark); }
.contact__head .sec-head{ margin-bottom: 1.75rem; }
.contact__lead{ line-height:2.1; }
.contact__grid{
  display:grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items:start;
}
.contact__ways{ display:grid; gap:1rem; }
.contact__tel{ display:block; margin-bottom:.5rem; padding-bottom: 1.5rem; border-bottom:1px solid var(--line-dark); }
.contact__tel-label{ display:block; font-size: var(--fs-sm); font-weight:700; letter-spacing:.1em; }
.contact__tel-num{
  display:flex; align-items:baseline; gap:.5rem;
  font-family: var(--f-en); font-weight:700; font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height:1.25; letter-spacing:.02em; color: var(--accent); white-space:nowrap;
}
.contact__tel-num small{ font-size:.5em; }
.way{
  display:flex; align-items:center; gap:1rem; min-height:72px; padding:.9rem 1.25rem;
  border:1px solid var(--line-dark); transition: background-color .3s, border-color .3s;
}
.way:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.45); }
.way__icon{ flex:none; width:24px; height:24px; color: var(--accent); }
.way__body{ display:grid; flex:1; min-width:0; line-height:1.5; }
.way__label{ font-size: var(--fs-cap); letter-spacing:.1em; color: var(--on-dark-mut); }
.way__value{ font-family: var(--f-en); font-size:1rem; font-weight:500; letter-spacing:.04em; overflow-wrap:anywhere; }
.way__chev{ flex:none; width:14px; height:14px; color: var(--accent); transition: transform .3s var(--ease-out); }
.way:hover .way__chev{ transform: translateX(4px); }

.form{ display:grid; gap:1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); border:1px solid var(--line-dark); }
.form__title{ font-size:1.0625rem; font-weight:700; letter-spacing:.1em; line-height:1.5; }
.form__row{ display:grid; grid-template-columns: 1fr 1fr; gap:1.25rem; }
.form__field{ display:grid; gap:.5rem; min-width:0; margin:0; padding:0; border:0; }
.form__label{ display:flex; align-items:center; gap:.6rem; padding:0; font-size: var(--fs-cap); font-weight:500; letter-spacing:.1em; line-height:1.6; color: var(--on-dark); }
.form__label em{ flex:none; white-space:nowrap; padding:0 .5em; background: var(--accent); color: var(--ink); font-style:normal; font-size:.6875rem; font-weight:700; letter-spacing:.08em; line-height:1.7; }
.form input[type="text"], .form textarea{
  width:100%; min-height:48px; padding:.7rem .9rem;
  border:2px solid transparent; border-radius:0; background:#fff; color: var(--ink);
  font-size:1rem; line-height:1.6;
}
.form textarea{ resize:vertical; min-height:7.5rem; }
.form input::placeholder, .form textarea::placeholder{ color:#767676; } /* 白地 4.54:1 */
.form input:focus, .form textarea:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.form [aria-invalid="true"]{ border-color:#ff7a59; }
.form__chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.form__chips legend{ width:100%; margin-bottom:.6rem; }
.chip{ position:relative; }
.chip input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:.35rem 1rem;
  border:1px solid rgba(255,255,255,.35);
  font-size: var(--fs-cap); letter-spacing:.06em; line-height:1.5;
  transition: background-color .3s, color .3s, border-color .3s;
}
.chip input:checked + span{ border-color: var(--accent); background: var(--accent); color: var(--ink); font-weight:700; }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:3px; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2.75rem; margin-top:.25rem; }
.form__note{ font-size: var(--fs-cap); line-height:1.8; color: var(--on-dark-mut); }
.form__note.is-error{ color:#ffb199; } /* #111 上 10.79:1 */

/* ---------- Footer ---------- */
.footer{ padding-block: clamp(3.5rem, 6vw, 5rem) 1.5rem; background: var(--bg); }
.footer__inner{ display:grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items:start; }
.logo--lg{ margin-right:0; }
.logo--lg .logo__mark{ width:58px; height:58px; }
.logo--lg .logo__jp{ font-size:1.875rem; }
.logo--lg .logo__en{ font-size:.75rem; }
.logo--lg .logo__en::before{ width:11px; height:11px; }
.footer__btns{ display:flex; gap:1.5rem; margin-top: 1.75rem; }
.icon-btn{
  position:relative; display:grid; justify-items:center; align-content:center; gap:.3rem;
  width:108px; height:64px; border:1px solid var(--ink); background: var(--bg); color: var(--ink);
  font-size:.6875rem; font-weight:700; letter-spacing:.06em; line-height:1.4;
  transition: background-color .3s, border-color .3s, color .3s;
}
.icon-btn svg{ width:22px; height:22px; }
.icon-btn::after{ content:""; position:absolute; top:50%; right:-12px; width:20px; height:1px; background: var(--accent); }
.icon-btn--dark{ background: var(--ink); color:#fff; }
.icon-btn:hover{ border-color: var(--accent-btn); background: var(--accent-btn); color:#fff; }
.footer__name{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-bottom:.6rem; }
.footer__name p{ font-size:1.0625rem; font-weight:700; letter-spacing:.1em; color: var(--ink); }
.footer__addr, .footer__mail{ font-size: var(--fs-sm); line-height:1.9; }
.footer__mail a:hover{ color: var(--accent-ink); }
.footer__tel{
  display:flex; align-items:baseline; gap:.4rem;
  font-family: var(--f-en); font-weight:700; font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height:1.3; letter-spacing:.02em; color: var(--accent-large); white-space:nowrap;
}
.footer__tel small{ font-size:.5em; }
.footer__nav{ display:grid; grid-template-columns: repeat(2, auto); gap:.25rem 2.5rem; }
.footer__nav a{ padding-block:.35rem; font-size: var(--fs-sm); color: var(--ink); transition: color .3s; }
.footer__nav a:hover{ color: var(--accent-ink); }
.footer__bottom{ margin-top: clamp(2.5rem, 5vw, 4rem); }
.footer__bottom small{ font-family: var(--f-en); font-size:.75rem; letter-spacing:.04em; color: var(--ink-mut); }

/* ---------- 下層ページ（施工事例・お知らせの一覧と詳細。scripts/build.mjs で生成） ---------- */
.page{ padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) var(--sec-pad); }
.page__info{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; margin-bottom:.75rem; }
.page__title{ margin-bottom: clamp(2rem, 4vw, 3rem); font-size: var(--fs-h3); font-weight:700; letter-spacing:.06em; }
.page__img{ aspect-ratio: 3 / 2; margin-bottom: clamp(2rem, 4vw, 3rem); overflow:hidden; background: var(--surface-2); }
.page__img img{ width:100%; height:100%; object-fit:cover; }
.page__meta{ margin-bottom: clamp(2rem, 4vw, 3rem); }
.page__gallery{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(.75rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.page__gallery figure{ aspect-ratio: 4 / 3; overflow:hidden; background: var(--surface-2); }
.page__gallery img{ width:100%; height:100%; object-fit:cover; }
.page__foot{ display:flex; flex-wrap:wrap; gap:1.25rem 3rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top:1px solid var(--line); }
.works-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 2.8vw, 2.5rem); }
.works-grid .work{ width:auto; }

/* リッチエディタの本文 */
.prose{ line-height:2.1; overflow-wrap:anywhere; }
.prose > * + *{ margin-top:1.4em; }
.prose h2{ margin-top:2.6em; padding-left:.9em; border-left:4px solid var(--accent); font-size:1.25rem; }
.prose h3{ margin-top:2.2em; font-size:1.0625rem; }
.prose ul{ padding-left:1.5em; list-style:disc; }
.prose ol{ padding-left:1.5em; list-style:decimal; }
.prose a{ text-decoration:underline; text-decoration-color: var(--accent); text-underline-offset:.3em; }
.prose a:hover{ color: var(--accent-ink); }
.prose img{ width:auto; height:auto; max-height:80svh; } /* 縦長の写真も画面に収める */
.prose blockquote{ margin-inline:0; padding-left:1.25em; border-left:2px solid var(--line); color: var(--ink-mut); }
.prose hr{ border:0; border-top:1px solid var(--line); }

/* ---------- ページ上部へ（右端の縦書き） ---------- */
.pagetop{
  position:fixed; z-index:40; right:8px; bottom:1.5rem;
  display:flex; align-items:center; gap:.75rem; width:44px; padding-block:.5rem;
  writing-mode: vertical-rl;
  font-family: var(--f-en); font-size:.6875rem; font-weight:500; letter-spacing:.14em; line-height:1;
  color: var(--ink);
  opacity:0; visibility:hidden; transition: opacity .4s, visibility 0s .4s, color .3s;
}
.pagetop::before{ content:""; flex:none; width:1px; height:56px; background: var(--accent); transition: height .4s var(--ease-out); }
.pagetop.is-visible{ opacity:1; visibility:visible; transition: opacity .4s, color .3s; }
.pagetop.is-on-dark{ color: var(--on-dark); }
.pagetop:hover::before{ height:72px; }

/* ---------- SP固定CTA ---------- */
.sp-cta{ display:none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .nav, .header__cta{ display:none; }
  .menu-btn{ display:block; }
  .header{ padding-inline: var(--gutter) 0; }

  .contact__grid{ grid-template-columns: minmax(0,1fr); }
  .footer__inner{ grid-template-columns: auto minmax(0,1fr); }
  .footer__nav{ grid-column: 1 / -1; grid-template-columns: repeat(3, auto); justify-content:start; }
}

@media (max-width: 820px){
  .guides span:nth-child(2){ display:none; }

  /* Hero：写真を上、キャッチを下に */
  .hero{ display:flex; flex-direction:column; height:auto; padding-top: var(--header-h); }
  .hero__ghost, .hero__scroll{ display:none; }
  .hero__slider{ position:relative; inset:auto; height: 60svh; min-height: 340px; }
  .hero__slider::after{ background: linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,0) 32%); }
  .hero__emblem{ left:50%; top:42%; }
  .hero__emblem svg{ width:56px; }
  .hero__emblem span{ font-size:.6875rem; }
  .hero__ctrl{ top:auto; bottom:0; transform:none; }
  .hero__copy{ position:relative; left:auto; top:auto; transform:none; margin-top: -3.4rem; padding: 0 var(--gutter) 3.5rem; }
  .hero__eyebrow{ margin-bottom:1rem; }
  .hero__title{ font-size: clamp(2.375rem, 11vw, 3.25rem); }
  .hero__lead{ margin-top:1.25rem; }

  .about__grid{ grid-template-columns: minmax(0,1fr); }
  .about__media{ margin-right:0; padding-top:0; }
  .points__item{ padding-inline:.75rem; }

  .svc__item{ grid-template-columns: minmax(0,1fr); }
  .svc__img{ aspect-ratio: 3 / 2; }
  .svc__body{ max-width:none; padding: 1.75rem var(--gutter) 0; }
  .svc__num{ top:.5rem; right: var(--gutter); transform:none; font-size: 6.5rem; }

  .works__band{ margin-right:0; }
  .works__foot{ flex-direction:column; align-items:flex-start; }
  .work{ width: min(72vw, 290px); }

  .news__item{ grid-template-columns: auto minmax(0,1fr); column-gap:1rem; }
  .news__item .tag{ justify-self:start; }
  .news__title{ grid-column: 1 / -1; }

  .company__grid{ grid-template-columns: minmax(0,1fr); }
  .company__table > div{ grid-template-columns: 5.5em minmax(0,1fr); }

  .form__row{ grid-template-columns: minmax(0,1fr); }

  .footer{ padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .footer__inner{ grid-template-columns: minmax(0,1fr); }
  .footer__nav{ grid-template-columns: repeat(2, auto); }

  .pagetop{ display:none; }

  .sp-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    display:grid; grid-template-columns: 1fr 1fr; gap:.5rem;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); border-top:1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translateY(110%); transition: transform .5s var(--ease-out);
  }
  .sp-cta.is-visible{ transform:none; }
  .sp-cta__btn{
    display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px;
    border:1px solid var(--ink); background: var(--bg); color: var(--ink);
    font-size: var(--fs-sm); font-weight:700; letter-spacing:.08em;
  }
  .sp-cta__btn svg{ width:18px; height:18px; }
  .sp-cta__btn--primary{ background: var(--ink); color:#fff; }
  .sp-cta__btn--primary svg{ color: var(--accent); }
}

@media (max-width: 480px){
  .logo__mark{ width:36px; height:36px; }
  .logo__jp{ font-size:1.1875rem; }
  .points__item{ padding-inline:.5rem; font-size:.8125rem; }
  .points__en{ font-size:.75rem; letter-spacing:.08em; }
  .footer__btns{ gap:1.25rem; }
}

/* ---------- Preview badge（プレビュー用。正式公開時に削除） ---------- */
.preview-badge{
  position:fixed; left:12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index:54;
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .85rem;
  background: rgba(17,17,17,.86); color:#fff;
  font-size:.6875rem; font-weight:500; line-height:1.4; letter-spacing:.1em;
  pointer-events:none;
  transition: bottom .5s var(--ease-out);
}
.preview-badge::before{ content:""; flex:none; width:6px; height:6px; background: var(--accent); }
@media (max-width: 820px){
  .sp-cta.is-visible ~ .preview-badge{ bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0s!important; scroll-behavior:auto!important; }
  .hero__slide img, .js:not(.is-ready) .hero__slide.is-active img{ transform:none; }
  .js .hero__slider{ clip-path:none; }
  .js .hero__line > span, .js .hero__title::before{ transform:none; }
  .js .hero__eyebrow, .js .hero__lead, .js .hero__ghost, .js .hero__scroll{ opacity:1; }
  .js [data-reveal]{ opacity:1!important; transform:none!important; clip-path:none!important; }
  .js [data-reveal] img{ transform:none!important; clip-path:none!important; }
  .js .sec-head[data-reveal] .sec-head__en::before, .js .sec-head[data-reveal] .sec-head__line{ transform:none; }
}