@charset "UTF-8";
/* ==========================================================
   ARIWAKA KENSETSU — TOP page
   ========================================================== */
:root {
  --navy-deep:#0a1a38;
  --navy:#12305e;
  --navy-light:#1d4a8a;
  --blue-tint:#0d2b6b;
  --beige:#eceae4;
  --white:#fff;
  --serif-en:"Cinzel","EB Garamond",serif;
  --serif-ja:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Sans CJK JP",serif;
  --ease-out:cubic-bezier(.2,.7,.25,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; }
body {
  font-family:var(--serif-ja);
  color:#1c1c1c; background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

/* ---------- header ---------- */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 36px;
  transition:background .4s ease, padding .4s ease;
}
.site-header.scrolled { background:rgba(8,20,45,.88); backdrop-filter:blur(6px); padding:10px 36px; }
.logo img { width:150px; height:auto; }
.gnav ul { display:flex; gap:2.4em; }
.gnav a { display:flex; flex-direction:column; align-items:center; color:#fff; }
.gnav .en { font-family:var(--serif-en); font-size:14px; letter-spacing:.22em; text-transform:uppercase; }
.gnav .ja { font-size:10px; letter-spacing:.1em; margin-top:4px; opacity:.72; }
.gnav a:hover .en { opacity:.7; }
.menu-btn { display:none; }

/* ---------- section heading ---------- */
.sec-head { text-align:center; }
.sec-title {
  font-family:var(--serif-en); font-weight:400;
  font-size:clamp(26px, 2.4vw, 34px); letter-spacing:.3em; text-transform:uppercase;
  display:inline-block; padding:0 .6em .3em; border-bottom:1px solid currentColor;
}
.sec-sub { font-size:12px; letter-spacing:.2em; margin-top:12px; }

/* ==========================================================
   FIRST VIEW
   ========================================================== */
.fv {
  position:relative; height:100vh; height:100svh; min-height:640px; overflow:hidden;
  background:
    radial-gradient(130% 90% at 82% 12%, #2a5ea8 0%, rgba(42,94,168,0) 45%),
    radial-gradient(120% 100% at 12% 88%, #163e78 0%, rgba(22,62,120,0) 55%),
    linear-gradient(155deg, #0c2148 0%, #123262 38%, #0e2750 68%, #081733 100%);
}
/* ===== デザイン座標ステージ =====
   PC: 1920x1150 / SP: 750x1500 の原稿座標系。
   JSが max(横比率, 縦比率) で等倍スケール(cover)する */
.fv-stage {
  position:absolute; top:0; left:50%;
  width:1920px; height:1150px;
  transform:translateX(-50%) scale(1);
  transform-origin:top center;
}
/* デザイナー支給の背景あしらい(原稿座標・原稿と同じ lighten 18%) */
.fv-deco, .fv-deco img {
  position:absolute; top:64px; left:0; width:1920px; height:auto;
  pointer-events:none;
}
.fv-deco img { top:0; mix-blend-mode:lighten; opacity:.18; z-index:2; } /* 写真より下 */

/* --- 写真スロット ---
   移動・拡縮はtransformのみ(GPU合成=低スペック端末でも滑らか)。
   ぼかしは事前生成の.blurレイヤーをopacityでクロスフェード */
.fv-photos { position:absolute; inset:0; }
.fv-photo {
  position:absolute; top:0; left:0; overflow:hidden;
  box-shadow:0 40px 90px rgba(0,5,25,.5);
  will-change:transform,opacity;
  transition: transform 1.4s var(--ease-inout), opacity 1.4s var(--ease-inout);
}
.fv-photo img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.fv-photo img.blur {
  filter:blur(9px) saturate(.78);
  opacity:0;
  transition:opacity 1.4s var(--ease-inout);
  will-change:opacity;
}
.fv-photo.is-bg img.blur { opacity:1; }
.fv-photo.no-trans, .fv-photo.no-trans img { transition:none !important; }
/* メイン写真のゆっくりした漂い(両レイヤー同期) */
@keyframes fvDrift { from{transform:scale(1.02) translate(0,0)} to{transform:scale(1.06) translate(-1.4%,1.2%)} }
.fv-photo.is-main img { animation:fvDrift 6.5s ease-in-out infinite alternate; }
.fv-photo.is-bg { opacity:.78; box-shadow:none; }
.fv-photo.is-main { opacity:1; z-index:6; }

/* --- 縦書きコピー（デザイン原稿から切り出した画像） --- */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* キャッチコピー: 原稿座標(PC: x400 y220 w242 / SP: x310 y111 w130)に固定 */
.fv-copy {
  position:absolute; z-index:20;
  left:400px; top:220px; width:242px;
  filter:drop-shadow(0 3px 6px rgba(4,12,35,.6)) drop-shadow(0 8px 34px rgba(0,10,40,.5));
}
.fv-copy img { width:100%; height:auto; opacity:0; transform:translateY(-14px); transition:opacity 1.2s var(--ease-out) .5s, transform 1.2s var(--ease-out) .5s; }
.fv-copy.shown img { opacity:1; transform:none; }

/* --- PRIDE OF INTEGRITY（デザイン原稿から切り出した画像） --- */
.fv-title {
  position:absolute; z-index:22;
  left:50%; bottom:6.5vh; bottom:6.5svh; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(0 6px 44px rgba(0,10,40,.55));
}
.fv-title .line1 { width:clamp(300px, 26.4vw, 560px); }
.fv-title .line2 { width:clamp(287px, 25.2vw, 535px); margin-top:1.4vw; }
.fv-title img { opacity:0; transform:translateY(24px); transition:opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); }
.fv-title.shown img { opacity:1; transform:none; }
.fv-title.shown .line1 { transition-delay:1.5s; }
.fv-title.shown .line2 { transition-delay:1.75s; }

/* --- scroll indicator --- */
.fv-scroll {
  position:absolute; right:34px; bottom:26px; z-index:22;
  color:#fff; font-family:var(--serif-en); font-size:11px; letter-spacing:.24em;
  display:flex; align-items:center; gap:10px; opacity:.85;
}
.fv-scroll i { display:block; width:1px; height:44px; background:linear-gradient(#fff,transparent); position:relative; overflow:hidden; }
.fv-scroll i::after { content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#9fc4ff; animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { to { top:100%; } }

/* ==========================================================
   ABOUT
   ========================================================== */
.about {
  color:#fff; text-align:center;
  padding:110px 24px 150px;
  background:
    radial-gradient(110% 80% at 85% 0%, #1c4176 0%, rgba(28,65,118,0) 50%),
    linear-gradient(170deg, #081733 0%, #123262 45%, #0d2750 78%, #0a1d40 100%);
}
/* ABOUTキャッチ: デザイン原稿から切り出した画像(書体一致) */
.about-catch { margin-top:80px; }
.about-catch img { display:block; margin:0 auto; width:min(86vw, clamp(300px, 31.6vw, 606px)); height:auto; }
.about-text { margin-top:56px; font-size:15px; line-height:2.5; letter-spacing:.12em; }
.about-text p + p { margin-top:2.4em; }
.about-text span { display:inline-block; } /* 折り返しは文節の切れ目のみ */

/* ==========================================================
   WORKS
   ========================================================== */
.works { padding:110px 24px 130px; background:#fff; text-align:center; }
.works .sec-title { color:#15305c; }
.works-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
  max-width:1180px; margin:70px auto 0;
}
.work-item { position:relative; aspect-ratio:3/2; overflow:hidden; cursor:pointer; }
.work-item img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.work-item:hover img { transform:scale(1.05); }
/* ホバー時：青系に暗転して物件情報 */
.work-cover {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px;
  background:linear-gradient(rgba(10,28,74,.78), rgba(8,22,60,.82));
  color:#fff; opacity:0; transition:opacity .5s ease; padding:16px;
}
.work-item:hover .work-cover, .work-item:focus-within .work-cover, .work-item.touched .work-cover { opacity:1; }
.work-cover .wt { font-size:clamp(13px, 1.15vw, 16px); letter-spacing:.14em; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:10px; }
.work-cover .wd { font-size:12px; letter-spacing:.18em; }

/* ==========================================================
   SERVICE
   ========================================================== */
.service {
  position:relative; color:#fff; text-align:center; overflow:hidden;
  padding:110px 24px 0;
  /* 原稿の背景画像(幅100%・下端固定=鉄骨は常に最下部)+
     上部は画像上端色に収束するグラデーションで空を延長。
     文字と鉄骨は構造上重ならない */
  background:url(../img/service_bg.jpg) center bottom / 100% auto no-repeat #5758b0;
}
.service-grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:64px 72px;
  max-width:1080px; margin:80px auto 0; text-align:left;
}
.service-item h3 {
  font-size:clamp(19px, 1.8vw, 24px); font-weight:500; letter-spacing:.3em; text-align:center;
  padding-bottom:14px; margin-bottom:26px; position:relative;
}
.service-item h3::after { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:56px; height:1px; background:rgba(255,255,255,.7); }
.service-item p { font-size:14px; line-height:2.2; letter-spacing:.06em; }
/* 鉄骨シルエットが見える下部の余白(背景は.serviceの1枚画像) */
.service-photo { position:relative; height:clamp(240px, 30vw, 580px); }

/* ==========================================================
   COMMITMENT
   ========================================================== */
.commitment { padding:110px 0 0; background:#fff; text-align:center; }
.commitment .sec-title { color:#15305c; }
.cm-row {
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  text-align:left; margin-top:90px; background:var(--beige);
}
.commitment .cm-row:first-of-type { margin-top:70px; }
.cm-img { overflow:hidden; }
.cm-img img { width:100%; height:100%; object-fit:cover; min-height:380px; }
.cm-text { display:flex; flex-direction:column; justify-content:center; padding:clamp(36px, 5vw, 90px); }
.cm-text h3 { font-size:clamp(19px, 1.9vw, 25px); font-weight:500; letter-spacing:.28em; margin-bottom:26px; color:#222; }
.cm-text p { font-size:14px; line-height:2.3; letter-spacing:.05em; color:#333; }
.cm-row + .cm-row { margin-top:0; }

/* ==========================================================
   COMPANY
   ========================================================== */
.company {
  color:#fff; text-align:center;
  padding:120px 24px 110px;
  background:
    radial-gradient(120% 90% at 15% 10%, #1c4a8c 0%, rgba(28,74,140,0) 55%),
    linear-gradient(160deg, #0a1d40 0%, #123262 50%, #081733 100%);
}
.company-table { max-width:640px; margin:70px auto 0; text-align:left; }
.company-table > div { display:flex; gap:2em; padding:13px 4px; }
.company-table dt {
  flex:0 0 7em; font-size:14px; letter-spacing:.1em; color:#cfe0f5;
  display:flex; justify-content:space-between;
  white-space:nowrap; /* 建設業許可 などのラベルを1行に */
}
.company-table dt::after { content:"："; }
.company-table dd { font-size:14px; letter-spacing:.08em; }
/* Googleマップ埋め込み(会社所在地にピン) */
.company-map { display:block; max-width:780px; margin:70px auto 0; aspect-ratio:780/460; }
.company-map iframe { width:100%; height:100%; border:0; display:block; }

/* --- ASJ banner --- */
.asj-banner {
  display:flex; align-items:center; justify-content:center; gap:clamp(18px, 3vw, 42px);
  max-width:780px; margin:64px auto 0; padding:22px clamp(18px, 3vw, 46px);
  background:#fff; color:#1c1c1c; border-radius:10px;
  box-shadow:0 16px 50px rgba(0,5,25,.45);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.asj-banner:hover { transform:translateY(-3px); box-shadow:0 22px 60px rgba(0,5,25,.55); }
.asj-logo { width:clamp(68px, 8vw, 96px); }
.asj-copy { font-size:clamp(12px, 1.2vw, 15px); letter-spacing:.12em; line-height:1.9; text-align:left; }
.asj-name { font-family:var(--serif-ja); font-size:clamp(26px, 3vw, 40px); letter-spacing:.06em; font-weight:600; display:flex; flex-direction:column; align-items:center; }
.asj-name small { font-size:10px; letter-spacing:.08em; font-weight:400; margin-top:4px; }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer { background:#0a1d40; }
.footer-nav { padding:34px 24px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-nav ul { display:flex; justify-content:center; gap:0; flex-wrap:wrap; }
.footer-nav li { padding:0 2.4em; border-right:1px solid rgba(255,255,255,.25); }
.footer-nav li:last-child { border-right:none; }
.footer-nav a { display:flex; flex-direction:column; align-items:center; color:#fff; }
.footer-nav .en { font-family:var(--serif-en); font-size:13px; letter-spacing:.22em; text-transform:uppercase; }
.footer-nav .ja { font-size:10px; margin-top:4px; opacity:.7; letter-spacing:.08em; }
.footer-band {
  background:#fff; padding:30px 24px;
  display:flex; align-items:center; justify-content:center; gap:clamp(24px, 5vw, 70px); flex-wrap:wrap;
}
.footer-logo { width:130px; }
.footer-contact { text-align:left; }
.footer-contact .label {
  display:flex; justify-content:space-between; align-items:baseline; gap:2em;
  color:#15305c; font-size:13px; letter-spacing:.14em;
  border-bottom:1px solid #15305c; padding-bottom:6px;
}
.footer-contact .label small { font-size:12px; letter-spacing:.08em; }
.footer-contact .tel { margin-top:12px; display:flex; align-items:center; gap:.8em; }
.footer-contact .tel a {
  color:#15305c; font-family:var(--serif-en); font-size:clamp(24px, 2.6vw, 32px); letter-spacing:.04em;
  display:inline-flex; align-items:center; white-space:nowrap;
}
.footer-contact .tel .freedial img { height:.68em; width:auto; margin-right:.3em; }
.copyright {
  background:#fff; color:#333; text-align:center;
  font-family:var(--serif-en); font-size:12px; letter-spacing:.16em;
  padding:16px 0 22px; border-top:1px solid #d8d8d8;
}

/* ==========================================================
   スクロール・リビール共通
   ========================================================== */
.reveal, .reveal-left, .reveal-right {
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal-left  { transform:translateX(-50px); }
.reveal-right { transform:translateX(50px); }
.reveal.shown, .reveal-left.shown, .reveal-right.shown { opacity:1; transform:none; }
/* 実績グリッドはリズミカルに順番に(ポンポンと) */
.stagger .reveal { transform:translateY(38px) scale(.96); }
.stagger .reveal.shown { transform:none; }

@media (prefers-reduced-motion: reduce) {
  .reveal,.reveal-left,.reveal-right { opacity:1; transform:none; transition:none; }
}

/* ==========================================================
   SP
   ========================================================== */
@media (max-width: 820px) {
  .site-header { padding:14px 18px; }
  .site-header.scrolled { padding:10px 18px; }
  .logo img { width:118px; }
  .gnav {
    position:fixed; inset:0; background:rgba(8,20,45,.96);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .4s ease;
  }
  .gnav.open { opacity:1; pointer-events:auto; }
  .gnav ul { flex-direction:column; gap:2em; text-align:center; }
  .menu-btn {
    display:block; position:relative; z-index:110;
    width:44px; height:44px; background:none; border:none; cursor:pointer;
  }
  .menu-btn span {
    position:absolute; left:10px; width:24px; height:2px; background:#fff;
    transition:transform .35s ease, opacity .35s ease;
  }
  .menu-btn span:nth-child(1){ top:14px } .menu-btn span:nth-child(2){ top:21px } .menu-btn span:nth-child(3){ top:28px }
  .menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .menu-btn.open span:nth-child(2){ opacity:0 }
  .menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

  .fv { min-height:560px; }
  /* SPはステージを素通し(実画面座標)。JS側でも transform:none を設定 */
  .fv-stage { width:100%; height:100%; left:0; transform:none; }
  /* あしらいは幅基準だが、横長めのSP画面では高さ基準で上限をかけて
     原稿と同じ「上部6割程度」の存在感に保つ */
  .fv-deco { top:12px; left:auto; right:0; width:min(100vw, 52vh); width:min(100vw, 52svh); }
  .fv-deco img { top:0; left:auto; right:0; width:100%; }
  /* SP原稿どおりキャッチはセンター配置 */
  .fv-copy {
    left:50%; transform:translateX(-50%);
    top:clamp(96px, 12vh, 180px);
    top:clamp(96px, 12svh, 180px);
    width:clamp(118px, 34vw, 170px);
  }
  .fv-copy img { transform:translateY(-14px); }
  .fv-copy.shown img { transform:none; }
  .fv-title { bottom:10vh; bottom:10svh; }
  .fv-title .line1 { width:62vw; }
  .fv-title .line2 { width:74vw; margin-top:3vw; }
  .fv-scroll { right:18px; bottom:18px; }

  .about { padding:80px 22px 100px; }
  .about-text { font-size:13.5px; line-height:2.3; letter-spacing:.06em; }
  /* SPは固定改行を外し、文節単位の自然な折り返しに任せる */
  .about-text br { display:none; }

  .works { padding:80px 20px 90px; }
  .works-grid { grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:50px; }
  .work-cover .wt { font-size:11.5px; letter-spacing:.08em; }
  .work-cover .wd { font-size:10.5px; }

  .service { padding:80px 22px 0; }
  .service-grid { grid-template-columns:1fr; gap:52px; margin-top:56px; }
  .service-item p { font-size:13.5px; line-height:2.1; }
  .service-photo { margin-top:64px; height:52vw; }

  .commitment { padding:80px 0 0; }
  /* SPは原稿どおり「写真→テキスト」の交互並び(全ブロックで写真が先) */
  /* SP: ブロックは隙間なく連続(原稿どおり)。見出しと最初のブロックの間だけ余白 */
  .cm-row, .cm-row.rev { display:flex; flex-direction:column; margin-top:0; }
  .cm-row .cm-img { order:-1; }
  .cm-row .cm-img img { width:100%; }
  .commitment .sec-head + .cm-row { margin-top:60px; }
  .cm-img img { min-height:0; height:58vw; }
  .cm-text { padding:34px 24px 44px; }
  .cm-text p { font-size:13.5px; line-height:2.15; }

  .company { padding:80px 22px 80px; }
  .company-table { margin-top:48px; }
  .company-table > div { gap:1em; padding:10px 0; }
  .company-table dt { flex-basis:7.5em; font-size:12.5px; }
  .company-table dd { font-size:12.5px; }
  .company-map { margin-top:48px; }
  .asj-banner { flex-direction:row; flex-wrap:wrap; gap:14px; margin-top:44px; padding:18px; }
  .asj-copy { font-size:11px; }
  .asj-name { font-size:24px; }

  /* SPは2列グリッド(1行に収まらず崩れるため) */
  .footer-nav ul { display:grid; grid-template-columns:repeat(2, auto); justify-content:center; gap:22px 0; }
  .footer-nav li { padding:0 1.6em; border-right:none; }
  .footer-nav li:nth-child(odd) { border-right:1px solid rgba(255,255,255,.25); }
  .footer-nav .en { font-size:11px; }
  .footer-band { flex-direction:column; gap:18px; text-align:center; }
  .footer-contact { text-align:center; }
  /* SP原稿: 番号は縦積み・間に罫線 */
  .footer-contact .tel { flex-direction:column; gap:0; align-items:center; }
  .footer-contact .tel .freedial {
    border-bottom:1px solid rgba(21,48,92,.45);
    padding-bottom:10px; margin-bottom:10px;
  }
}