/* デザイン ver.3（2026-10-30 CEO「fujiihouse.co.jp の UI・UX・見出し・フォントを踏襲」）
   見出し＝Zen Old Mincho（縦書きの大見出し・左に線の見出し・下線の見出し）、本文＝Zen Kaku Gothic New、英字ラベル＝Raleway
   透明のヘッダー（今のページに点）、全面写真の FV と右下の案内・お知らせ、屋根の三角の模様、丸いボタン＋文字、写真カードの縦の線
   色はロゴの青と緑。参考サイトの黄緑の役をロゴの緑に置き換えた */
:root {
  --ink: #303030; --sub: #6b6b6b; --line: #e2e2e2; --paper: #ffffff; --gray: #f3f3f1; --dark: #1f2a36;
  --blue: #1d5fb4; --acc: #3f9a5a; --acc-soft: #a9d3b4;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --en: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--gothic); font-weight: 500; font-size: 15px; line-height: 2; letter-spacing: .08em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
.mincho { font-family: var(--mincho); font-weight: 600; }
.pc { display: inline; }

/* ヘッダー：FV の上は透明・白い文字。下へ進むと白地 */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: 96px; display: flex; align-items: center; gap: 28px; padding: env(safe-area-inset-top, 0px) max(40px, env(safe-area-inset-right, 0px)) 0 max(40px, env(safe-area-inset-left, 0px)); color: #fff; transition: background .4s, color .4s, height .4s, box-shadow .4s; }
.hd-logo { display: grid; gap: 4px; margin-right: auto; }
.hd-logo small { font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; }
/* ロゴの画像は白地つき（透過でない）ため、FV の上では白い札にのせる */
.hd-logo img { width: 210px; background: #fff; padding: 8px 12px; box-sizing: content-box; transition: padding .4s; }
.hd-nav ul { display: flex; gap: 34px; }
.hd-nav a { position: relative; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.hd-nav a::before { content: ""; position: absolute; left: 50%; top: -12px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .3s; }
.hd-nav a.on::before, .hd-nav a:hover::before { opacity: 1; }
.hd-nav-tel { display: none; }
.hd-icon { display: grid; justify-items: center; gap: 2px; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .4); transition: border-color .4s; }
.hd-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hd-menu { display: none; }
.hd.solid { height: 76px; background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.hd.solid .hd-logo img { padding: 0; }
.hd.solid .hd-icon { border-color: var(--line); }
.hd.solid .hd-nav a.on { color: var(--acc); }

/* FV */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; color: #fff; }
.hero-photo { position: absolute; inset: 0; overflow: hidden; background: #2a2f33; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 24, 28, .42), rgba(20, 24, 28, 0) 62%), linear-gradient(rgba(20, 24, 28, .42), rgba(20, 24, 28, .3)); }
/* スライドショー：6秒ごとに重ねて切り替え、表示中はゆっくりズームイン。消えきってから元の大きさに戻す */
.hero-slide { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1); transition: opacity 1.6s ease, transform 0s 1.6s; }
.hero-slide.first { opacity: 1; }
.hero-slide.on { opacity: 1; transform: scale(1.1); transition: opacity 1.6s ease, transform 8s linear; }
.hero-copy { position: absolute; left: max(8vw, var(--gut)); top: 50%; transform: translateY(-46%); display: grid; gap: 28px; }
.hero-copy h1 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.7; letter-spacing: .14em; opacity: 0; animation: up 1.4s .3s ease-out forwards; }
.hero-copy { text-shadow: 0 1px 14px rgba(20, 24, 28, .45); }
.hero-copy p { font-size: 14px; font-weight: 700; letter-spacing: .1em; opacity: 0; animation: up 1.4s .8s ease-out forwards; }
@keyframes up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-side { position: absolute; right: 0; bottom: 0; width: 380px; display: grid; }
.bnr { display: grid; grid-template-columns: 44px 1fr 28px; align-items: center; gap: 14px; padding: 14px 24px; background: rgba(255, 255, 255, .9); color: var(--ink); border-bottom: 1px solid var(--line); transition: background .3s; }
.bnr:hover { background: #fff; }
.bnr-ic { width: 44px; height: 44px; display: grid; place-items: center; background: var(--acc); color: #fff; }
.bnr-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.bnr b { font-size: 18px; letter-spacing: .1em; }
.arw { width: 28px; height: 28px; border-radius: 50%; border: 1px solid currentColor; position: relative; }
.arw::after { content: ""; position: absolute; left: 10px; top: 10px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.hero-news { background: #fff; color: var(--ink); padding: 14px 24px 18px; }
.hero-news a { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 6px 0; font-size: 12px; line-height: 1.7; }
.hero-news time { font-family: var(--en); color: var(--sub); }
.hero-news span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hero-news a:hover span { color: var(--acc); }

/* 共通の部品 */
section { position: relative; }
.ttl-v { display: grid; justify-items: center; gap: 18px; }
.ttl-v .en { font-family: var(--en); font-size: 18px; letter-spacing: .06em; }
.ttl-v h2 { writing-mode: vertical-rl; font-size: 36px; letter-spacing: .26em; line-height: 1.3; color: #000; }
.ttl-2 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1.75; letter-spacing: .04em; }
.ttl-line { display: flex; align-items: center; gap: 28px; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: .2em; line-height: 1.4; white-space: nowrap; }
.ttl-line::before { content: ""; width: 56px; height: 3px; background: var(--acc); flex: none; }
.ttl-under { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: .2em; line-height: 1.4; padding-bottom: 20px; position: relative; }
.ttl-under::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--acc); }
.cbtn { display: inline-flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.cbtn i { width: 48px; height: 48px; border-radius: 50%; background: var(--acc-soft); position: relative; flex: none; transition: background .3s, transform .3s; }
.cbtn i::after { content: ""; position: absolute; left: 17px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.cbtn:hover i, a:hover > .cbtn i { background: var(--acc); transform: scale(1.06); }
.roof { width: 100%; fill: var(--acc-soft); }
.sec-h { display: grid; grid-template-columns: auto 1fr; gap: 40px 80px; align-items: center; margin-bottom: 56px; }
.sec-h p { font-size: 14px; max-width: 34em; }

/* 動き：下から現れる */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s ease; }
.js .rv.in { opacity: 1; transform: none; }

/* アップウェルについて */
.about { display: grid; grid-template-columns: 38% 1fr; gap: 6vw; align-items: center; padding: 140px max(6vw, var(--gut)) 140px max(6vw, var(--gut)); }
.about-side { position: relative; display: grid; justify-items: center; gap: 36px; padding-top: 40px; }
.about-side .roof { position: absolute; inset: 0 0 auto; z-index: -1; max-width: 520px; margin: 0 auto; }
.about-side .ttl-v { padding-top: 34%; }
.about-body { display: grid; gap: 28px; max-width: 640px; }
.circles { display: flex; gap: 24px; margin-bottom: 12px; }
.circles li { width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-content: center; text-align: center; gap: 2px; }
.circles small { font-family: var(--en); font-size: 13px; color: var(--sub); line-height: 1.4; }
.circles b { font-family: var(--mincho); font-weight: 600; font-size: 22px; letter-spacing: .1em; line-height: 1.5; color: var(--acc); }
.about-body p { font-size: 15px; }

/* 事業内容 */
.biz { padding: 40px 0 140px; }
.biz .sec-h { padding: 0 max(6vw, var(--gut)); }
.biz-cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.biz-card { display: grid; grid-template-rows: auto 1fr; }
.biz-card .ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gray); }
.biz-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.biz-card:hover .ph img { transform: scale(1.05); }
.ph-empty { display: grid; place-items: center; padding: 24px; font-size: 12px; color: var(--sub); text-align: center; background: repeating-linear-gradient(45deg, var(--gray) 0 12px, #ebebe8 12px 24px); }
.biz-card .tx { position: relative; padding: 32px 40px 8px 52px; display: grid; gap: 8px; align-content: start; }
.biz-card .tx::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 6px; background: var(--acc); }
.biz-card h3 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; letter-spacing: .08em; line-height: 1.6; }
.biz-card h3::before { content: ""; width: 10px; height: 10px; background: var(--acc); flex: none; }
.biz-card .lead { font-weight: 700; }
.biz-card p { font-size: 14px; }

/* 相談から施工まで */
.flow { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; padding: 60px max(6vw, var(--gut)) 160px 0; }
.flow-photos { position: relative; aspect-ratio: 5 / 4; }
.flow-photos .p1 { position: absolute; left: 0; top: 0; width: 82%; aspect-ratio: 4 / 3; object-fit: cover; }
.flow-photos .p2 { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 1; object-fit: cover; border: 10px solid #fff; }
.flow-body { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: start; }
.flow-body .roof-sm { position: absolute; left: -36px; top: -40px; width: 200px; z-index: -1; }
.flow-body .ttl-v { padding-top: 60px; }
.flow-tx { display: grid; gap: 24px; padding-top: 190px; align-content: start; justify-items: start; }
.flow-tx p { font-size: 14px; }

/* 施工実績・コラム */
.feed { background: var(--gray); padding: 120px max(6vw, var(--gut)); }
.feed-in { max-width: 1200px; margin: 0 auto; }
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; }
.works a { display: grid; gap: 14px; align-content: start; }
.works .ph { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.works .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.works a:hover img { transform: scale(1.05); }
.works h3 { font-size: 15px; font-weight: 700; line-height: 1.7; }
.works p { font-size: 12px; color: var(--sub); }
.cols { border-top: 1px solid #d8d8d4; }
.cols a { display: grid; grid-template-columns: 110px auto 1fr; gap: 20px; align-items: center; padding: 18px 4px; border-bottom: 1px solid #d8d8d4; font-size: 14px; line-height: 1.7; }
.cols time { font-family: var(--en); color: var(--sub); }
.cols .tag { justify-self: start; font-size: 11px; padding: 0 12px; border: 1px solid var(--acc); color: var(--acc); }
.cols a:hover span:last-child { color: var(--acc); }

/* アップリフォームへの大きい案内 */
.wide-bnr { padding: 140px max(6vw, var(--gut)); }
.wb { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 64px; background: var(--gray); overflow: hidden; }
.wb-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; z-index: 1; }
.wb-ph img { aspect-ratio: 4 / 3; object-fit: cover; }
.wb-tx { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; }
.wb-tx h2 { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: .14em; line-height: 1.5; }
.wb-tx p { font-size: 14px; }
.wb-en { position: absolute; right: -10px; bottom: -40px; font-family: var(--en); font-weight: 300; font-size: clamp(80px, 11vw, 170px); line-height: 1; letter-spacing: .04em; color: #fff; white-space: nowrap; pointer-events: none; }

/* 会社概要 */
.company { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; padding: 0 max(6vw, var(--gut)) 160px 0; }
/* 元の写真の上の方に文字が入っているため、下の方だけを見せる */
.company-ph img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; object-position: center bottom; }
.company-tx { display: grid; gap: 36px; justify-items: start; }
.company dl { width: 100%; border-top: 1px solid var(--line); }
.company dl div { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.85; }
.company dt { font-weight: 700; }
.company dd { min-width: 0; }

/* お問い合わせ */
.contact { padding: 0 max(6vw, var(--gut)) 140px; overflow: hidden; }
.contact-en { font-family: var(--en); font-weight: 300; font-size: clamp(80px, 12.5vw, 180px); line-height: 1; letter-spacing: .06em; color: var(--blue); text-align: center; margin-bottom: 40px; }
.contact-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: 56px; border-top: 1px solid var(--line); }
.contact-h { display: grid; gap: 20px; }
.contact-h h2 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: .2em; line-height: 1.4; }
.contact-h p { font-size: 14px; }
.contact-ways { display: grid; gap: 16px; }
.cw { display: grid; grid-template-columns: 5em 1fr auto; align-items: center; gap: 4px 20px; padding: 24px 28px; border: 1px solid var(--line); }
.cw-l { grid-row: span 2; font-size: 13px; font-weight: 700; color: var(--acc); border-right: 1px solid var(--line); }
.cw .tel { font-family: var(--en); font-weight: 500; font-size: 32px; letter-spacing: .06em; line-height: 1.2; color: var(--ink); }
.cw small { grid-column: 2 / 4; font-size: 12px; color: var(--sub); line-height: 1.6; }
.cw-mail { grid-template-rows: auto; background: var(--acc); color: #fff; border-color: var(--acc); transition: background .3s; }
.cw-mail .cw-l { grid-row: auto; color: #fff; border-color: rgba(255, 255, 255, .4); }
.cw-mail b { font-size: 18px; letter-spacing: .1em; }
.cw-mail:hover { background: #33804a; }

/* フッター */
.ft { background: var(--dark); color: #d9dde2; padding: 72px max(6vw, var(--gut)) 32px; }
.ft-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 40px 80px; }
.ft-brand { display: grid; gap: 18px; }
.ft-brand img { width: 183px; background: #fff; padding: 10px 14px; box-sizing: content-box; }
.ft-brand p { font-size: 13px; line-height: 1.9; }
.ft-nav { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 40px; justify-content: end; font-size: 13px; }
.ft-nav a:hover { color: #fff; }
.ft-copy { display: block; max-width: 1200px; margin: 56px auto 0; font-family: var(--en); font-size: 11px; color: #8f98a3; }

/* タブレット */
@media (max-width: 1180px) {
  .hd { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .hd-nav ul { gap: 20px; }
  .hd-nav a { font-size: 13px; }
}

/* スマホ・小さい画面：メニューは右上のボタンで開く */
@media (max-width: 960px) {
  body { font-size: 14px; }
  .pc { display: none; }
  .hd { height: 64px; gap: 12px; padding-left: var(--gut); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .hd.solid { height: 64px; }
  .hd-logo small { display: none; }
  .hd-logo img { width: 140px; padding: 6px 8px; }
  .hd-icon { padding-left: 0; border: 0; }
  .hd-icon span { display: none; }
  .hd-menu { display: grid; gap: 7px; width: 44px; height: 44px; place-content: center; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
  .hd-menu i { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform .3s; }
  .hd-nav { position: fixed; inset: 0; z-index: -1; background: #fff; color: var(--ink); padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gut) 40px; display: grid; align-content: start; gap: 32px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; overflow-y: auto; }
  .hd-nav ul { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .hd-nav li a { display: block; padding: 16px 4px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .hd-nav a::before { display: none; }
  .hd-nav-tel { display: grid; font-size: 12px; color: var(--sub); }
  .hd-nav-tel b { font-family: var(--en); font-size: 26px; color: var(--ink); letter-spacing: .06em; line-height: 1.4; }
  .hd.open { color: var(--ink); background: #fff; }
  .hd.open .hd-logo img { padding: 0; }
  .hd.open .hd-nav { opacity: 1; visibility: visible; }
  .hd.open .hd-menu i:first-child { transform: translateY(4.25px) rotate(30deg); }
  .hd.open .hd-menu i:last-child { transform: translateY(-4.25px) rotate(-30deg); }

  .hero { height: auto; min-height: 0; display: grid; }
  .hero-photo { position: relative; grid-area: 1 / 1; height: 88svh; min-height: 520px; }
  .hero-photo::after { background: rgba(20, 24, 28, .56); }
  .hero-copy { grid-area: 1 / 1; position: relative; left: auto; top: auto; transform: none; align-self: center; padding: 0 var(--gut); gap: 20px; }
  .hero-copy h1 { font-size: clamp(32px, 9vw, 44px); }
  .hero-copy p { font-size: 13px; }
  .hero-side { position: static; width: auto; }
  .bnr { padding: 12px var(--gut); background: var(--gray); }
  .hero-news { padding: 12px var(--gut) 16px; border-bottom: 1px solid var(--line); }

  .ttl-v h2 { font-size: 28px; }
  .ttl-line { gap: 18px; white-space: normal; }
  .ttl-line::before { width: 36px; }
  .sec-h { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }

  .about { grid-template-columns: 1fr; gap: 48px; padding: 80px var(--gut); }
  .about-side { padding-top: 0; }
  .about-side .roof { max-width: 340px; }
  .circles { gap: 10px; justify-content: center; }
  .circles li { width: min(28vw, 108px); height: min(28vw, 108px); }
  .circles b { font-size: 16px; letter-spacing: .04em; }

  .biz { padding: 20px 0 80px; }
  .biz .sec-h { padding: 0 var(--gut); }
  .biz-cards { grid-template-columns: 1fr; gap: 40px; }
  .biz-card .tx { padding: 24px var(--gut) 0 calc(var(--gut) + 28px); }
  .biz-card .tx::before { left: var(--gut); }

  .flow { grid-template-columns: 1fr; gap: 48px; padding: 0 var(--gut) 80px; }
  .flow-photos { margin-left: calc(-1 * var(--gut)); }
  .flow-body { gap: 24px; }
  .flow-body .roof-sm { display: none; }
  .contact-h p br, .wb-tx p br { display: none; }
  .flow-body .ttl-v, .flow-tx { padding-top: 20px; }

  .feed { padding: 80px var(--gut); }
  .works { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
  .cols a { grid-template-columns: auto 1fr; gap: 6px 14px; }
  .cols a span:last-child { grid-column: 1 / -1; }

  .wide-bnr { padding: 80px var(--gut); }
  .wb { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 64px; }
  .wb-en { font-size: 72px; bottom: -14px; }

  .company { grid-template-columns: 1fr; gap: 36px; padding: 0 var(--gut) 80px; }
  .company-ph { margin-left: calc(-1 * var(--gut)); }
  .company dl div { grid-template-columns: 1fr; gap: 2px; }

  .contact { padding: 0 var(--gut) 80px; }
  .contact-en { font-size: clamp(56px, 20vw, 96px); margin-bottom: 20px; }
  .contact-in { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
  .cw { padding: 20px 18px; gap: 4px 14px; grid-template-columns: 4.2em 1fr auto; }
  .cw .tel { font-size: 24px; }

  .ft { padding: 56px var(--gut) 28px; }
  .ft-in { grid-template-columns: 1fr; }
  .ft-nav { grid-template-columns: repeat(2, auto); justify-content: start; gap: 6px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.on { transform: none; }
  .hero-copy h1, .hero-copy p { animation: none; opacity: 1; }
  .js .rv { opacity: 1; transform: none; transition: none; }
}