/* =========================================================
   ひなた工務店 改修版の追加スタイル（style.css の上に重ねる）
   4つの窓口・水彩イラスト・スタッフの似顔絵
   ========================================================= */

/* 4つの窓口 */
.doors-wrap { padding: 0 0 40px; position: relative; z-index: 2; }
.doors { position: relative; z-index: 3; margin-top: -70px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.door { background: var(--paper); border-radius: 18px; padding: 14px 20px 22px; box-shadow: var(--shadow-lg); text-decoration: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; border-top: 5px solid var(--ki); transition: transform .3s; }
.door:hover { transform: translateY(-6px); }
.door:nth-child(2) { border-top-color: var(--wakakusa); }
.door:nth-child(3) { border-top-color: var(--kaki); }
.door:nth-child(4) { border-top-color: #5b8aa6; }
.door__art { width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s; }
.door:hover .door__art { transform: scale(1.05) rotate(-1deg); }
.door .verb { font-family: var(--mincho); font-weight: 700; font-size: 22px; letter-spacing: .12em; }
.door .what { font-size: 13px; color: var(--sumi-3); line-height: 1.7; }
.door .go { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--kaki); }
.doors-lead { text-align: center; margin: 36px 0 0; color: var(--sumi-2); font-size: 15px; }

/* ヒーロー：下に窓口カードが重なる分、文章とボタンを上げる */
.hero__lead { bottom: 120px; }
.hero__inner { padding-bottom: 170px; }

/* 3つの約束のイラスト */
.promise { padding-top: 36px; }
.pr__art { width: 150px; height: 150px; object-fit: contain; mix-blend-mode: multiply; margin: 0 auto 10px; display: block; }
.promise h3 { text-align: center; }

/* 地域の活動のイラスト */
.activities li { grid-template-columns: 96px 1fr; align-items: center; }
.ac__art { width: 96px; height: 96px; object-fit: contain; mix-blend-mode: multiply; background: var(--paper); border-radius: 20px; box-shadow: var(--shadow); }

/* お客様の声：頭文字 */
.voice .who .av { font-family: var(--mincho); font-weight: 700; font-size: 18px; color: var(--ki); background: var(--kinari); border: 1px solid var(--line); }

/* スタッフの似顔絵（水彩） */
.member .face { width: 120px; height: 120px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 4px var(--kinari), 0 6px 16px rgba(60,40,20,.12); }
.member .face img { width: 100%; height: 100%; object-fit: cover; }

/* スマホ下の固定ボタン（線のアイコン） */
.fixed-cta a b { display: flex; justify-content: center; margin-bottom: 2px; }

@media (max-width: 1080px) {
  .doors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .doors { margin-top: 24px; }
  .hero__lead { bottom: auto; }
  .hero__inner { padding-bottom: 36px; }
}
@media (max-width: 600px) {
  .doors { gap: 10px; }
  .door { padding: 10px 10px 16px; }
  .door__art { max-width: 120px; }
  .door .verb { font-size: 17px; letter-spacing: .06em; }
  .member .face { width: 96px; height: 96px; }
  .activities li { grid-template-columns: 76px 1fr; }
  .ac__art { width: 76px; height: 76px; }
}

/* リフォームのビフォーアフター（左右にずらして見比べる） */
.ba { position: relative; overflow: hidden; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service:hover .ba img { transform: none; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.35); transform: translateX(-1px); pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #fff; color: var(--kaki); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.ba__tag { position: absolute; top: 12px; font-size: 12px; font-weight: 700; color: #fff; border-radius: 99px; padding: 2px 12px; pointer-events: none; font-family: var(--maru); letter-spacing: .1em; }
.ba__tag--b { left: 12px; background: rgba(44,38,32,.75); }
.ba__tag--a { right: 12px; background: var(--kaki); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba__range:focus-visible + * , .ba:focus-within .ba__knob { outline: 3px solid var(--kaki); outline-offset: 2px; }
.ba-hint { font-size: 12.5px; color: var(--kaki); font-weight: 700; margin: -6px 0 10px; }
.ba__hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: #fff; background: rgba(44,38,32,.72); border-radius: 99px; padding: 3px 14px; pointer-events: none; white-space: nowrap; transition: opacity .4s; }
.ba.is-touched .ba__hint { opacity: 0; }