/*
Theme Name: Kailani Shonan
Theme URI: https://kailani-shonan.example
Author: Kailani Shonan
Description: Kailani Shonan 外壁・防水工事コーポレートサイト用 WordPress テーマ
Version: 1.0.106
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: kailani
*/

:root {
  --blue: #0182e8;
  --brand: #1d73bb;
  --accent: #306ff8;
  --black: #222222;
  --pink: #fbf8f8;
  --line: #d8d8d8;
  /* 100vw は縦スクロールバー分だけ広くなることがある → 対応ブラウザは 100dvw */
  --stage-offset: max(0px, calc((100vw - 1280px) / 2));
  --stage-offset: max(0px, calc((100dvw - 1280px) / 2));
}

* {
  box-sizing: border-box;
}

html {
  /* 100vw と実幅のズレ（縦スクロールバー分）を抑え、ページ間の見え方を揃える */
  scrollbar-gutter: stable;
  overflow-y: auto;
}

/* Windows の游ゴシック対策：
   Mac(ヒラギノ)で中太〜太く見える weight が、Winでは細く見える問題を吸収する */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium"), local("YuGothic-Medium");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium"), local("YuGothic-Medium");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium"), local("YuGothic-Medium");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium"), local("YuGothic-Medium");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: 900;
  font-style: normal;
}

body {
  margin: 0;
  color: var(--black);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 400;
  background: #ffffff;
  overflow-y: visible;
}

b,
strong {
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

.page {
  position: relative;
  width: 100%;
  min-width: 1280px;
  min-height: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: visible;
  background: #ffffff;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  width: 100%;
  height: 80px;
  background: var(--brand);
}

.logo {
  position: absolute;
  left: 34px;
  top: 16px;
  width: 169px;
  height: 50px;
  transform: translateX(var(--stage-offset));
}

.logo img,
.footer-logo {
  width: 169px;
  height: auto;
}

.nav {
  position: absolute;
  left: 258px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 1px;
  height: 38px;
  transform: translateX(var(--stage-offset));
}

.nav a {
  display: grid;
  place-items: center;
  height: 38px;
  padding: 0 13px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.waterproof {
  position: absolute;
  left: 887px;
  top: 22px;
  display: grid;
  place-items: center;
  width: 122px;
  height: 38px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #ffffff;
  border-radius: 30px;
  transform: translateX(var(--stage-offset));
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.header-contact {
  position: absolute;
  left: 1027px;
  top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 145px;
  height: 38px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #ffffff;
  border-radius: 7px;
  transform: translateX(var(--stage-offset));
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.header-contact::after,
.footer-contact::after {
  content: "\f1d8";
  font-family: "Font Awesome 6 Free";
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.hamburger {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 80px;
  height: 80px;
  padding: 0;
  background: #ffffff;
  border: 0;
  transition: background-color 0.3s ease;
}

.hamburger span {
  display: block;
  width: 33px;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
  transform-origin: center;
  transition:
    background-color 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.topbar.is-open {
  z-index: 200;
}

.page [id] {
  scroll-margin-top: 96px;
}

/* fixed 子が .page の overflow に切られないようにする（メニュー中のみ） */
:root:has(.topbar.is-open) .page {
  overflow: visible;
}

.topbar.is-open .nav {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  /* vh だけだとスクロールバー有無で幅がずれるため dvh/svh を優先 */
  min-height: 100dvh;
  min-height: 100svh;
  min-height: 100vh;
  padding: calc(80px + env(safe-area-inset-top, 0px)) 24px max(32px, env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  transform: none;
}

.topbar.is-open .hamburger {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 220;
  gap: 0;
  isolation: isolate;
}

.topbar.is-open .hamburger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 33px;
  margin: 0;
  background: var(--brand);
  transform-origin: center;
}

.topbar.is-open .nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: min(100%, 280px);
  padding: 16px 32px;
  border: 0;
  color: var(--brand);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

@keyframes nav-link-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .topbar.is-open .nav a {
    animation: nav-link-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .topbar.is-open .nav a:nth-child(1) {
    animation-delay: 0.04s;
  }

  .topbar.is-open .nav a:nth-child(2) {
    animation-delay: 0.09s;
  }

  .topbar.is-open .nav a:nth-child(3) {
    animation-delay: 0.14s;
  }

  .topbar.is-open .nav a:nth-child(4) {
    animation-delay: 0.19s;
  }

  .topbar.is-open .nav a:nth-child(5) {
    animation-delay: 0.26s;
  }

  .topbar.is-open .nav a:nth-child(6) {
    animation-delay: 0.36s;
    animation-duration: 0.85s;
  }

  .topbar.is-open .nav a:nth-child(7) {
    animation-delay: 0.48s;
    animation-duration: 0.95s;
  }

  .topbar.is-open .nav a:nth-child(8) {
    animation-delay: 0.62s;
    animation-duration: 1.05s;
  }
}

.topbar.is-open .hamburger span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.topbar.is-open .hamburger span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
}

.topbar.is-open .hamburger span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 917px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
    url("./images/top/hero_bg.jpg") center top / cover no-repeat;
}

.copy-badge {
  position: absolute;
  left: 50%;
  top: 88px;
  z-index: 2;
  width: 120px;
  height: auto;
  transform: translateX(-50%);
}

.hero > picture {
  display: contents;
}

.copy-main {
  position: absolute;
  left: 179px;
  top: 220px;
  width: 927px;
  height: auto;
  transform: translateX(var(--stage-offset));
}

.copy-logo {
  position: absolute;
  left: 262px;
  top: 415px;
  width: 281px;
  height: auto;
  transform: translateX(var(--stage-offset));
}

.copy-illust {
  position: absolute;
  left: 593px;
  top: 371px;
  width: 433px;
  height: 340px;
  object-fit: cover;
  transform: translateX(var(--stage-offset));
}

.copy-info {
  position: absolute;
  left: 330px;
  top: 730px;
  width: 649px;
  height: auto;
  transform: translateX(var(--stage-offset));
}

.side-tabs {
  position: fixed;
  top: 188px;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.side-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  padding: 0 0 42px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  border-radius: 0 0 0 10px;
  border: 1px solid transparent;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.side-tab::after {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 20px;
  height: 20px;
  content: "";
  background: center / contain no-repeat;
  transform: translateX(-50%);
  writing-mode: horizontal-tb;
  transition: filter 0.3s ease;
}

.side-tab--sim {
  height: 262px;
  background: var(--blue);
}

.side-tab--sim::after {
  background-image: url("./images/common/cali_icon.svg");
}

.side-tab--estimate {
  height: 218px;
  background: #4fc5fd;
}

.side-tab--estimate::after {
  background-image: url("./images/common/scope_icon.svg");
}

.side-tab--line {
  height: 170px;
  font-size: 14px;
  background: #3db887;
}

.side-tab__line-en {
  letter-spacing: -0.15em;
  margin-inline-end: 0.3em;
}

.side-tab__line-ja {
  letter-spacing: normal;
}

.side-tab__line-text {
  display: contents;
}

.side-tab--line::after {
  display: none;
  content: none;
}

.side-tab__icon {
  position: absolute;
  left: 50%;
  bottom: 18px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  writing-mode: horizontal-tb;
  transform: translateX(-50%);
  transition: color 0.3s ease;
}

@media (max-height: 820px) {
  .side-tabs {
    top: 160px;
    gap: 14px;
  }

  .side-tab {
    width: 42px;
    padding-bottom: 38px;
    font-size: 14px;
  }

  .side-tab::after {
    bottom: 16px;
    width: 18px;
    height: 18px;
  }

  .side-tab__icon {
    bottom: 16px;
    font-size: 18px;
  }

  .side-tab--sim {
    height: 230px;
  }

  .side-tab--estimate {
    height: 190px;
  }

  .side-tab--line {
    height: 150px;
    font-size: 13px;
  }
}

@media (max-height: 680px) {
  .side-tabs {
    top: 140px;
    gap: 10px;
  }

  .side-tab {
    width: 40px;
    padding-bottom: 34px;
    font-size: 13px;
  }

  .side-tab::after {
    bottom: 14px;
    width: 16px;
    height: 16px;
  }

  .side-tab__icon {
    bottom: 14px;
    font-size: 16px;
  }

  .side-tab--sim {
    height: 200px;
  }

  .side-tab--estimate {
    height: 165px;
  }

  .side-tab--line {
    height: 130px;
    font-size: 12px;
  }
}

.en-title {
  position: absolute;
  margin: 0;
  color: var(--accent);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  transform: translateX(var(--stage-offset));
}

.jp-title {
  position: absolute;
  margin: 0;
  color: #000000;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  transform: translateX(var(--stage-offset));
}

.title-line {
  position: absolute;
  width: 128.48px;
  height: auto;
  transform: translateX(var(--stage-offset));
}

.concept-en {
  left: 144px;
  top: 983px;
}

.concept-line {
  left: 144px;
  top: 1011px;
}

.concept h1 {
  position: absolute;
  left: 144px;
  top: 1114px;
  width: 336px;
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  transform: translateX(var(--stage-offset));
}

.concept-catch {
  position: absolute;
  left: 144px;
  top: 1243px;
  width: 217px;
  margin: 0;
  color: #d9d9d9;
  font-family: "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.07em;
  transform: translateX(var(--stage-offset));
}

.concept-text {
  position: absolute;
  left: 654px;
  top: 1114px;
  width: 574px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  transform: translateX(var(--stage-offset));
}

.youtube {
  position: absolute;
  left: 144px;
  top: 1378px;
  width: 1004px;
  height: 556px;
  overflow: hidden;
  background: #4fc5fd;
  border-radius: 2px;
  transform: translateX(var(--stage-offset));
}

.youtube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.cta {
  position: absolute;
  left: 0;
  width: 100%;
  height: 448px;
  background: url("./images/top/cta_bg.jpg") center / cover no-repeat;
}

.cta--first {
  top: 2064px;
}

.cta-title {
  position: absolute;
  left: 386px;
  top: 109px;
  width: 544px;
  color: #000000;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform: translateX(var(--stage-offset));
}

.mail-button,
.tel-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700;
  transform: translateX(var(--stage-offset));
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.mail-button {
  left: 334px;
  top: 170px;
  width: 648px;
  height: 92px;
  color: #ffffff;
  font-size: 30px;
  letter-spacing: 0.015em;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 100px;
}

.mail-button img {
  width: 24px;
  transition: filter 0.3s ease;
}

.tel-button {
  left: 389px;
  top: 282px;
  width: 526px;
  height: 61px;
  color: var(--blue);
  font-family: Poppins, Arial, sans-serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid var(--blue);
  border-radius: 31px;
}

.tel-button img {
  width: 24px;
  transition: filter 0.3s ease;
}

.waterproof:is(:hover, :focus-visible),
.header-contact:is(:hover, :focus-visible) {
  color: var(--brand);
  background: #ffffff;
  border-color: #ffffff;
}

.footer-waterproof:is(:hover, :focus-visible),
.footer-contact:is(:hover, :focus-visible) {
  color: #ffffff;
  background: var(--blue);
  border-color: var(--blue);
}

.hamburger:is(:hover, :focus-visible) {
  background: var(--brand);
}

.hamburger:is(:hover, :focus-visible) span {
  background: #ffffff;
}

/* メニューオープン中（×表示時）は、ホバーしても青背景にしない */
.topbar.is-open .hamburger:is(:hover, :focus-visible) {
  background: #ffffff;
}

.topbar.is-open .hamburger:is(:hover, :focus-visible) span {
  background: var(--brand);
}

.side-tab--sim:is(:hover, :focus-visible) {
  color: var(--blue);
  background: #ffffff;
  border-color: var(--blue);
}

.side-tab--sim:is(:hover, :focus-visible)::after {
  filter: brightness(0) saturate(100%) invert(36%) sepia(91%) saturate(2685%) hue-rotate(187deg) brightness(95%) contrast(99%);
}

.side-tab--estimate:is(:hover, :focus-visible) {
  color: #4fc5fd;
  background: #ffffff;
  border-color: #4fc5fd;
}

.side-tab--estimate:is(:hover, :focus-visible)::after {
  filter: brightness(0) saturate(100%) invert(72%) sepia(69%) saturate(1807%) hue-rotate(172deg) brightness(102%) contrast(98%);
}

.side-tab--line:is(:hover, :focus-visible) {
  color: #3db887;
  background: #ffffff;
  border-color: #3db887;
}

.side-tab--line:is(:hover, :focus-visible) .side-tab__icon {
  color: #3db887;
}

.mail-button:is(:hover, :focus-visible),
.more:is(:hover, :focus-visible) {
  color: var(--blue);
  background: #ffffff;
  border-color: var(--blue);
}

.mail-button:is(:hover, :focus-visible) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(91%) saturate(2685%) hue-rotate(187deg) brightness(95%) contrast(99%);
}

.tel-button:is(:hover, :focus-visible) {
  color: #ffffff;
  background: var(--blue);
  border-color: var(--blue);
}

.tel-button:is(:hover, :focus-visible) img {
  filter: brightness(0) invert(1);
}

.feature-en {
  left: 129px;
  top: 2596px;
}

.feature-title {
  left: 129px;
  top: 2664px;
  width: 360px;
  white-space: nowrap;
}

.feature-line {
  left: 129px;
  top: 2624px;
}

.feature-item {
  position: absolute;
  width: 1038px;
  min-height: 242px;
  transform: translateX(var(--stage-offset));
}

.feature-item img {
  position: absolute;
  width: 360px;
  height: 242px;
  object-fit: cover;
  border-radius: 10px;
}

.feature-item > div {
  position: absolute;
}

.feature-heading {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  height: 122px;
  margin: 0 0 31px;
}

.feature-heading::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #40a1ee;
}

.feature-item span {
  display: block;
  flex: 0 0 auto;
  color: var(--blue);
  font-family: Poppins, Arial, sans-serif;
  font-size: 75px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
}

.service-grid span {
  display: block;
  color: var(--blue);
  font-family: Roboto, Arial, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.feature-item h3 {
  margin: 50px 0 0;
  color: #000000;
  font-size: 24px;
  line-height: 1;
}

.feature-item p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

.feature-item--01 {
  left: 126px;
  top: 2816px;
}

.feature-item--01 img {
  right: 0;
  top: 0;
}

.feature-item--01 > div {
  left: 0;
  top: -19px;
  width: 638px;
}

.feature-item--02 {
  left: 126px;
  top: 3138px;
}

.feature-item--02 img {
  left: 0;
  top: 0;
}

.feature-item--02 > div {
  left: 420px;
  top: -35px;
  width: 618px;
}

.feature-item--02 .feature-heading {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.feature-item--03 {
  left: 126px;
  top: 3448px;
}

.feature-item--03 img {
  right: 0;
  top: 0;
}

.feature-item--03 > div {
  left: 0;
  top: -34px;
  width: 638px;
}

.feature-item--04 {
  left: 126px;
  top: 3785px;
}

.feature-item--04 img {
  left: 0;
  top: 0;
}

.feature-item--04 > div {
  left: 420px;
  top: -33px;
  width: 618px;
}

.feature-item--04 .feature-heading {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.feature-item--05 {
  left: 126px;
  top: 4095px;
}

.feature-item--05 img {
  right: 0;
  top: 0;
}

.feature-item--05 > div {
  left: 0;
  top: -32px;
  width: 638px;
}

.bg-pink::before,
.service::before,
.works::before,
.faq::before,
.access::before {
  position: absolute;
  left: 0;
  width: 100%;
  content: "";
  background: var(--pink);
}

.service::before {
  top: 4445px;
  height: 2520px;
}

.service-en {
  left: 129px;
  top: 4549px;
}

.service-title {
  left: 129px;
  top: 4617px;
  width: 192px;
}

.service-line {
  left: 129px;
  top: 4577px;
}

.service-grid {
  position: absolute;
  left: 129px;
  top: 4740px;
  display: grid;
  grid-template-columns: repeat(2, 494px);
  align-items: stretch;
  gap: 52px 50px;
  width: 1038px;
  padding-bottom: 64px;
  transform: translateX(var(--stage-offset));
}

.service-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 494px;
  height: 100%;
}

.service-copy {
  flex: 1 1 auto;
  width: 100%;
}

.service-block h3 {
  margin: 0;
  color: #000000;
  font-family: Roboto, Arial, sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}

.service-block p {
  margin: 0;
  color: #000000;
  font-family: Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.service-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 30px 0 26px;
  background: #40a1ee;
}

.service-image {
  flex: 0 0 278px;
  position: relative;
  width: 100%;
  height: 278px;
  margin-top: auto;
  background: #d9d9d9 center / cover no-repeat;
  border-radius: 10px;
}

.service-block--scaffold .service-image {
  background-image: url("./images/top/service_img_04.jpg");
}

.service-block--roof .service-image {
  background-image: url("./images/top/service_img_05.jpg");
}

.service-block--paint .service-image {
  background-image: url("./images/top/service_img_02.jpg");
}

.service-block--sealing .service-image {
  background-image: url("./images/top/service_img_03.jpg");
}

.service-block--waterproof .service-image {
  background-image: url("./images/top/service_img_01.jpg");
}

.service-block--waterproof {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 494px;
  column-gap: 10px;
  align-items: end;
  width: 100%;
  height: auto;
}

.service-block--waterproof .service-copy {
  flex: initial;
  width: auto;
}

.service-block--waterproof .service-image {
  width: 494px;
  height: 278px;
  margin-top: 0;
  flex: none;
}

.service-block--survey .service-image {
  background-image: url("./images/top/service_img_06.jpg");
}

.service-block--waterproof .more {
  width: 220px;
  height: 56px;
  margin-top: 24px;
  font-size: 16px;
  border-radius: 8px;
}

.more {
  display: grid;
  place-items: center;
  width: 260px;
  height: 70px;
  margin-top: 32px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 10px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.flow {
  position: absolute;
  left: 0;
  top: 6965px;
  width: 100%;
  height: 2350px;
  background: #ffffff;
}

.flow-en {
  left: 129px;
  top: 111px;
}

.flow-line {
  left: 129px;
  top: 139px;
}

.flow h2 {
  position: absolute;
  left: 129px;
  top: 179px;
  margin: 0;
  color: #000000;
  font-family: Roboto, Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  transform: translateX(var(--stage-offset));
}

.flow-accordion {
  position: absolute;
  left: 132px;
  top: 270px;
  width: 1032px;
  transform: translateX(var(--stage-offset));
}

.flow-accordion details {
  position: relative;
  margin-bottom: 66px;
}

.flow-accordion details:not(:last-child)::after {
  position: absolute;
  left: 50%;
  bottom: -42px;
  width: 0;
  height: 0;
  content: "";
  border-top: 18px solid #d9d9d9;
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;
  transform: translateX(-50%);
}

.flow-accordion summary {
  position: relative;
  display: grid;
  grid-template-columns: 103px 1fr 70px;
  align-items: center;
  min-height: 103px;
  overflow: hidden;
  color: #000000;
  background: rgba(50, 112, 248, 0.05);
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}

.flow-accordion summary::-webkit-details-marker {
  display: none;
}

.flow-accordion summary span {
  display: grid;
  place-items: center;
  align-self: stretch;
  color: #ffffff;
  font-family: Roboto, Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  background: rgba(48, 111, 248, 0.9);
  border-radius: 10px 0 0 10px;
}

.flow-accordion summary b {
  padding-left: 48px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}

.flow-accordion summary::after {
  justify-self: center;
  color: #447df9;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  content: "+";
}

.flow-accordion details[open] summary::after {
  content: "-";
}

.flow-content {
  display: grid;
  grid-template-columns: 710px 283px;
  gap: 42px;
  padding: 35px 0 24px;
}

.flow-content p {
  margin: 0;
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.flow-content__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.flow-content__text .more {
  margin-top: 24px;
}

.flow-image {
  width: 283px;
  aspect-ratio: 1 / 1;
  background-color: #d9d9d9;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 8px;
}

.flow-accordion > details:nth-child(1) .flow-image {
  background-image: url("./images/top/flow_01.jpg");
}

.flow-accordion > details:nth-child(2) .flow-image {
  background-image: url("./images/top/flow_02.jpg");
}

.flow-accordion > details:nth-child(3) .flow-image {
  background-image: url("./images/top/flow_03.jpg");
}

.flow-accordion > details:nth-child(4) .flow-image {
  background-image: url("./images/top/flow_04.jpg");
}

.flow-accordion > details:nth-child(5) .flow-image {
  background-image: url("./images/top/flow_05.jpg");
}

.flow-accordion > details:nth-child(6) .flow-image {
  background-image: url("./images/top/flow_06.jpg");
}

.flow-accordion > details:nth-child(7) .flow-image {
  background-image: url("./images/top/flow_07.jpg");
}

.flow-accordion > details:nth-child(8) .flow-image {
  background-image: url("./images/top/flow_08.jpg");
}

.flow-accordion > details:nth-child(9) .flow-image {
  background-image: url("./images/top/flow_09.jpg");
}

.price {
  position: absolute;
  left: 0;
  top: 9315px;
  width: 100%;
  height: 994px;
  background: #ffffff;
}

.price-en {
  left: 129px;
  top: 105px;
}

.price-title {
  left: 129px;
  top: 173px;
  width: 128px;
}

.price-line {
  left: 129px;
  top: 133px;
}

.price-lead {
  position: absolute;
  left: 129px;
  top: 240px;
  width: 417px;
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  text-align: left;
  transform: translateX(var(--stage-offset));
}

.price-board {
  position: absolute;
  left: 132px;
  top: 339px;
  width: 1037px;
  background: transparent;
  border-top: 1px solid var(--line);
  transform: translateX(var(--stage-offset));
}

.price-board div {
  display: grid;
  grid-template-columns: 383px 390px minmax(130px, 1fr);
  align-items: center;
  min-height: 76px;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
}

.price-board b {
  color: #000000;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.price-board span {
  color: #000000;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
}

.price-board strong {
  color: #000000;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.price-note {
  position: absolute;
  left: 132px;
  top: 841px;
  width: 1037px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
  transform: translateX(var(--stage-offset));
}

.works::before {
  top: 10309px;
  height: 771px;
}

.works-en {
  left: 129px;
  top: 10400px;
}

.works-title {
  left: 129px;
  top: 10468px;
  width: 128px;
}

.works-line {
  left: 129px;
  top: 10439px;
}

.works-grid {
  position: absolute;
  left: 132px;
  top: 10554px;
  display: grid;
  grid-template-columns: repeat(3, 316.54px);
  gap: 39px;
  transform: translateX(var(--stage-offset));
}

.works-grid article {
  width: 316.54px;
}

.works-grid img {
  width: 316.54px;
  height: 212.64px;
  object-fit: cover;
  border-radius: 9.71px;
}

.works-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 14px;
}

.works-meta h3 {
  margin: 0;
  padding-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.works-meta span {
  color: #6750a4;
  font-family: Roboto, Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.works-grid p {
  width: 100%;
  max-width: 323px;
  margin: 13px 0 0;
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.staff-en {
  left: 129px;
  top: 11198px;
}

.staff-title {
  left: 129px;
  top: 11266px;
  width: 192px;
}

.staff-line {
  left: 129px;
  top: 11237px;
}

.staff-grid {
  position: absolute;
  left: 132px;
  top: 11450px;
  display: grid;
  grid-template-columns: repeat(3, 316px);
  gap: 30px 39px;
  transform: translateX(var(--stage-offset));
}

.staff-grid article {
  position: relative;
  width: 316px;
  min-height: 300px;
  padding: 34px 24px 28px 120px;
  background: var(--pink);
  border-radius: 8px;
}

.staff-photo {
  position: absolute;
  left: 28px;
  top: 34px;
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: center top;
  background: #d9d9d9;
  border-radius: 50%;
}

span.staff-photo {
  display: block;
}

.staff-grid h3 {
  margin: 0 0 14px;
  font-size: 17px;
}

.staff-tag {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.staff-detail {
  margin: 0;
}

.staff-detail div {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 2px 10px;
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.55;
}

.staff-detail div:last-child {
  margin-bottom: 0;
}

.staff-detail dt,
.staff-detail dd {
  margin: 0;
}

.staff-detail dt {
  font-weight: 700;
}

.staff-detail dd {
  font-weight: 500;
}

.faq::before {
  top: 12525px;
  height: 1022px;
}

.faq-en {
  left: 129px;
  top: 12646px;
}

.faq-title {
  left: 129px;
  top: 12714px;
  width: 192px;
}

.faq-line {
  left: 129px;
  top: 12685px;
}

.faq-list {
  position: absolute;
  left: 132px;
  top: 12855px;
  width: 1032px;
  transform: translateX(var(--stage-offset));
}

.faq-list details {
  margin-bottom: 25px;
  background: #ffffff;
  border-radius: 10px;
}

.faq-list summary {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 76px;
  padding: 0 34px;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  margin-left: auto;
  color: var(--blue);
  font-size: 30px;
  content: "+";
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  color: var(--blue);
  font-family: Roboto, Arial, sans-serif;
  font-size: 26px;
  line-height: 1;
}

.faq-list p {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin: 0;
  padding: 24px 34px 28px;
  font-size: 15px;
  line-height: 1.8;
}

.faq-list p b {
  transform: translateY(1px);
}

.faq-answer {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 24px 34px 28px;
  font-size: 15px;
  line-height: 1.8;
}

.faq-answer > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  color: var(--blue);
  font-family: Roboto, Arial, sans-serif;
  font-size: 26px;
  line-height: 1;
  transform: translateY(1px);
}

.faq-answer-body {
  flex: 1;
  min-width: 0;
}

.faq-answer-body p {
  margin: 0;
}

.faq-answer-body ul {
  margin: 12px 0 0;
  padding-left: 1.2em;
}

.faq-answer-body li + li {
  margin-top: 6px;
}

.company-en {
  left: 129px;
  top: 13635px;
}

.company-title {
  left: 129px;
  top: 13703px;
  width: 128px;
}

.company-line {
  left: 129px;
  top: 13674px;
}

.message {
  position: absolute;
  left: 132px;
  top: 13905px;
  width: 1032px;
  transform: translateX(var(--stage-offset));
}

.message h3,
.profile h3 {
  margin: 0 0 24px;
  font-size: 26px;
  text-align: center;
}

.message p {
  width: 1032px;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.message p + p {
  margin-top: 16px;
}

.profile {
  position: absolute;
  left: 132px;
  top: 14590px;
  width: 1032px;
  transform: translateX(var(--stage-offset));
}

.profile dl {
  margin: 0;
  border-top: 1px solid var(--line);
}

.profile div {
  display: grid;
  grid-template-columns: 190px 1fr;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}

.profile dt,
.profile dd {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 15px;
}

.profile dt {
  font-weight: 700;
}

.company-history {
  position: absolute;
  left: 132px;
  top: 15170px;
  width: 1032px;
  transform: translateX(var(--stage-offset));
}

.company-history__title {
  margin: 0 0 32px;
  font-size: 26px;
  text-align: center;
}

.company-story__title {
  margin: 0 0 32px;
  font-size: 26px;
  text-align: center;
}

.company-history__list {
  margin: 0;
  padding: 0 0 0 28px;
  list-style: none;
  border-left: 2px solid var(--accent);
}

.company-history__item {
  position: relative;
  padding: 0 0 36px 24px;
}

.company-history__item:last-child {
  padding-bottom: 0;
}

.company-history__item::before {
  position: absolute;
  left: -35px;
  top: 6px;
  width: 12px;
  height: 12px;
  content: "";
  background: var(--accent);
  border-radius: 50%;
}

.company-history__date {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.company-history__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.company-story {
  position: absolute;
  left: 132px;
  top: 15470px;
  width: 1032px;
  padding: 48px 64px;
  background: var(--pink);
  border-radius: 4px;
  transform: translateX(var(--stage-offset));
}

.company-story__lead {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  text-align: left;
}

.company-story__heading {
  margin: 32px 0 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}

.company-story__text {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  text-align: left;
}

.company-story__text + .company-story__text {
  margin-top: 16px;
}

.access::before {
  top: 15760px;
  height: 770px;
}

.access-en {
  left: 191px;
  top: 15881px;
}

.access-title {
  left: 191px;
  top: 15949px;
  width: 140px;
  white-space: nowrap;
}

.access-line {
  left: 191px;
  top: 15920px;
}

.address {
  position: absolute;
  left: 191px;
  top: 16090px;
  width: 368px;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  transform: translateX(var(--stage-offset));
}

.map {
  position: absolute;
  left: 586px;
  top: 15881px;
  width: 520px;
  height: 360px;
  background: #d9d9d9;
  transform: translateX(var(--stage-offset));
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.cta--second {
  top: 16530px;
}

.footer {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 200px;
  color: var(--blue);
  background: #fbf8f8;
}

.footer-logo {
  position: absolute;
  left: 54px;
  top: 53px;
  transform: translateX(var(--stage-offset));
}

.footer nav {
  position: absolute;
  left: 254px;
  top: 58px;
  display: flex;
  align-items: center;
  gap: 1px;
  transform: translateX(var(--stage-offset));
}

.footer nav a {
  display: grid;
  place-items: center;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.footer-waterproof {
  position: absolute;
  left: 883px;
  top: 58px;
  display: grid;
  place-items: center;
  width: 122px;
  height: 38px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.035em;
  border: 1px solid var(--blue);
  border-radius: 30px;
  transform: translateX(var(--stage-offset));
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.footer-contact {
  position: absolute;
  left: 1023px;
  top: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 145px;
  height: 38px;
  border: 1px solid var(--blue);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  transform: translateX(var(--stage-offset));
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.footer small {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  padding: 8px 0;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  background: var(--brand);
}

@media (min-width: 768px) {
  .flow,
  .price,
  .works,
  .staff,
  .faq,
  .company,
  .access,
  .cta--second {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .footer {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .flow {
    height: auto;
    margin-top: 6965px;
    padding: 120px 0;
  }

  .flow .flow-en,
  .flow .flow-line,
  .flow h2 {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin-left: calc(129px + var(--stage-offset));
    transform: none;
  }

  .flow .flow-en {
    margin-bottom: 8px;
  }

  .flow .flow-line {
    display: block;
    margin-bottom: 16px;
  }

  .flow h2 {
    margin: 0 0 48px calc(129px + var(--stage-offset));
  }

  .flow-accordion {
    position: relative;
    left: auto;
    top: auto;
    width: 1032px;
    margin-left: calc(var(--stage-offset) + 132px);
    transform: none;
  }

  .price {
    height: 994px;
  }

  .price-en {
    top: 105px;
  }

  .price-title {
    top: 173px;
  }

  .price-line {
    top: 133px;
  }

  .price-lead {
    top: 240px;
  }

  .price-board {
    top: 339px;
  }

  .price-note {
    top: 841px;
  }

  .works,
  .faq,
  .access {
    background: var(--pink);
  }

  .works::before,
  .faq::before,
  .access::before {
    display: none;
  }

  .works {
    height: auto;
    min-height: 771px;
    padding: 120px 0 100px;
  }

  .works .works-en,
  .works .works-line,
  .works .works-title {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin-left: calc(129px + var(--stage-offset));
    transform: none;
  }

  .works .works-en {
    margin-bottom: 8px;
  }

  .works .works-line {
    display: block;
    margin-bottom: 16px;
  }

  .works .works-title {
    margin: 0 0 40px calc(129px + var(--stage-offset));
  }

  .works-grid {
    position: relative;
    top: auto;
    left: auto;
    margin-left: calc(129px + var(--stage-offset));
    transform: none;
  }

  .staff {
    height: auto;
    padding: 120px 0 140px;
    background: #ffffff;
  }

  .staff-en,
  .staff-title,
  .staff-line {
    position: relative;
    top: auto;
    left: auto;
    margin-left: calc(129px + var(--stage-offset));
    transform: none;
  }

  .staff-en {
    margin-bottom: 8px;
  }

  .staff-line {
    display: block;
    margin-bottom: 16px;
  }

  .staff-title {
    margin: 0 0 48px calc(129px + var(--stage-offset));
  }

  .staff-grid {
    position: relative;
    top: auto;
    left: auto;
    width: 1032px;
    margin-left: calc(132px + var(--stage-offset));
    transform: none;
  }

  .faq {
    height: auto;
    padding-bottom: 120px;
  }

  .faq-en {
    top: 121px;
  }

  .faq-title {
    top: 189px;
  }

  .faq-line {
    top: 160px;
  }

  .faq-list {
    position: relative;
    top: 330px;
    margin-bottom: 330px;
    padding-bottom: 48px;
  }

  .company {
    height: auto;
    padding: 120px 0 100px;
    background: #ffffff;
  }

  .company-en,
  .company-title,
  .company-line {
    position: relative;
    top: auto;
    left: auto;
    margin-left: calc(129px + var(--stage-offset));
    transform: none;
  }

  .company-en {
    margin-bottom: 8px;
  }

  .company-line {
    display: block;
    margin-bottom: 16px;
  }

  .company-title {
    margin: 0 0 48px calc(129px + var(--stage-offset));
  }

  .company .message,
  .company .profile,
  .company .company-history,
  .company .company-story {
    position: relative;
    top: auto;
    left: auto;
    width: min(1032px, calc(100% - 264px));
    margin-left: calc(132px + var(--stage-offset));
    transform: none;
  }

  .company .message {
    margin-bottom: 80px;
  }

  .company .profile {
    margin-bottom: 80px;
  }

  .company .company-history {
    margin-bottom: 80px;
  }

  .company .company-story {
    margin-bottom: 0;
  }

  .access {
    height: 770px;
  }

  .access-en,
  .map {
    top: 121px;
  }

  .access-title {
    top: 189px;
  }

  .access-line {
    top: 160px;
  }

  .address {
    top: 330px;
  }

  .cta--second {
    height: 448px;
  }

  .footer {
    height: 200px;
  }
}

@media (max-width: 767px) {
  :root {
    --stage-offset: 0px;
  }

  body {
    overflow-x: hidden;
  }

  .page {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .page:not(.page--waterproof):not(.page--management):not(.page--front):not(.page--simulator):not(.page--contact):not(.page--estimate):not(.page--thanks) {
    min-height: 100vh;
  }

  .topbar {
    height: 62px;
  }

  .page [id] {
    scroll-margin-top: 78px;
  }

  .logo {
    left: 26px;
    top: 12px;
    width: 128px;
    height: 38px;
    transform: none;
  }

  .logo img,
  .footer-logo {
    width: 128px;
  }

  .nav,
  .header-contact {
    display: none;
  }

  /* index: 防水工事 / waterproof: 外壁塗装（ハンバーガー左） */
  .page--waterproof .waterproof {
    display: none;
  }

  .page:not(.page--waterproof) .waterproof,
  .page--waterproof .topbar-link--exterior {
    position: absolute;
    top: 50%;
    right: calc(62px + 8px);
    left: auto;
    z-index: 1;
    display: grid;
    place-items: center;
    width: auto;
    height: 34px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 30px;
    transform: translateY(-50%);
  }

  .side-tabs {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    flex-direction: row;
    gap: 0;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  }

  body:has(.side-tabs) .page {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .side-tab {
    z-index: 120;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    padding: 6px 4px;
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.28);
  }

  .side-tab:last-child {
    border-right: none;
  }

  .side-tab::after {
    position: static;
    bottom: auto;
    left: auto;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transform: none;
    writing-mode: horizontal-tb;
  }

  .side-tab__icon {
    position: static;
    bottom: auto;
    left: auto;
    flex-shrink: 0;
    font-size: 18px;
    transform: none;
    writing-mode: horizontal-tb;
  }

  .side-tab--sim,
  .side-tab--estimate,
  .side-tab--line {
    height: auto;
    font-size: 10px;
  }

  .side-tab--line {
    gap: 2px;
  }

  .side-tab--line .side-tab__line-text {
    order: 1;
    display: block;
    white-space: nowrap;
    line-height: 1.2;
  }

  .side-tab--line .side-tab__icon {
    order: 2;
  }

  .side-tab--line .side-tab__line-en,
  .side-tab--line .side-tab__line-ja {
    display: inline;
    letter-spacing: 0;
    margin-inline-end: 0;
  }

  .hamburger {
    width: 62px;
    height: 62px;
  }

  .hamburger span {
    width: 27px;
  }

  .topbar.is-open .hamburger {
    width: 62px;
    height: 62px;
  }

  .topbar.is-open .hamburger span {
    width: 27px;
  }

  .topbar.is-open .nav {
    padding: calc(62px + env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px));
  }

  .topbar.is-open .nav a {
    min-width: min(100%, 260px);
    padding: 14px 24px;
    font-size: 17px;
    line-height: 1.55;
  }

  .topbar.is-open .nav {
    gap: 10px;
  }

  main {
    display: block;
  }

  .hero,
  .concept,
  .cta,
  .feature,
  .service,
  .method,
  .flow,
  .price,
  .works,
  .staff,
  .faq,
  .company,
  .access,
  .footer {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  .hero {
    height: 580px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
      url("./images/top/hero_bg.jpg") center top / cover no-repeat;
  }

  .copy-badge {
    left: 50%;
    top: 66px;
    width: min(22vw, 88px);
    transform: translateX(-50%);
  }

  .copy-main {
    left: 50%;
    top: 162px;
    width: min(96vw, 378px);
    transform: translateX(-50%);
  }

  .copy-logo {
    left: 50%;
    top: 294px;
    width: min(36vw, 130px);
    margin-left: -108px;
    transform: translateX(-50%);
  }

  .copy-illust {
    left: 50%;
    top: 252px;
    width: min(70vw, 262px);
    height: auto;
    margin-left: 72px;
    transform: translateX(-50%);
  }

  .copy-info {
    left: 50%;
    top: 432px;
    width: min(92vw, 352px);
    transform: translateX(-50%);
  }

  .en-title,
  .jp-title,
  .title-line {
    left: 26px;
    transform: none;
  }

  .en-title {
    top: 58px;
    font-size: 14px;
  }

  .title-line {
    top: 79px;
    width: 97px;
  }

  .jp-title {
    top: 110px;
    width: calc(100% - 52px);
    font-size: 26px;
    white-space: nowrap;
  }

  .jp-title.feature-title {
    font-size: 23px;
  }

  .concept {
    padding: 40px 26px 70px;
  }

  .concept-en {
    position: relative;
    left: 0;
    top: 0;
  }

  .concept-line {
    position: relative;
    left: 0;
    top: 0;
    margin-top: 0;
  }

  .concept h1,
  .concept-catch,
  .concept-text,
  .youtube {
    position: static;
    width: auto;
    transform: none;
  }

  .concept h1 {
    margin: 74px 0 24px;
    font-size: 24px;
    line-height: 1.45;
  }

  .concept-catch {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
  }

  .concept-text {
    margin: 0 0 48px;
    font-size: 12px;
    line-height: 1.85;
  }

  .youtube {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: auto;
    padding: 54px 26px;
  }

  .cta-title,
  .mail-button,
  .tel-button {
    position: static;
    transform: none;
  }

  .cta-title {
    width: auto;
    font-size: 14px;
  }

  .mail-button {
    width: 298px;
    height: 42px;
    font-size: 14px;
  }

  .tel-button {
    width: 242px;
    height: 40px;
    font-size: 22px;
  }

  .feature,
  .service,
  .method,
  .flow,
  .price,
  .works,
  .staff,
  .faq,
  .company,
  .access {
    height: auto;
    padding: 162px 26px 72px;
    background: #ffffff;
  }

  .faq {
    padding-bottom: 96px;
  }

  .service,
  .method,
  .works,
  .faq,
  .access {
    background: var(--pink);
  }

  .bg-pink::before,
  .service::before,
  .method::before,
  .works::before,
  .faq::before,
  .access::before {
    display: none;
  }

  .feature-item,
  .service-grid,
  .service-block,
  .service-copy,
  .price-board,
  .works-grid,
  .staff-grid,
  .faq-list,
  .message,
  .profile,
  .company-history,
  .company-story,
  .address,
  .map {
    position: static;
    width: 100%;
    transform: none;
  }

  .feature-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 56px;
  }

  .feature-item > div {
    order: 1;
    position: static;
    width: 100%;
  }

  .feature-item img {
    order: 2;
    position: static;
    width: 100%;
    height: 180px;
    margin-top: 24px;
    margin-bottom: 0;
  }

  .feature-heading {
    height: auto;
    min-height: 86px;
    margin-bottom: 22px;
    gap: 20px;
  }

  .feature-item--02 .feature-heading,
  .feature-item--04 .feature-heading {
    flex-direction: row;
    justify-content: flex-start;
  }

  .feature-item span {
    font-size: 39px;
  }

  .feature-item h3 {
    margin-top: 26px;
    font-size: 18px;
  }

  .feature-item p {
    font-size: 12px;
    line-height: 1.7;
  }

  .service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    width: 100%;
  }

  .service-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }

  .service-copy {
    flex: 1 1 auto;
  }

  .service-block h3 {
    font-size: 15px;
  }

  .service-block p {
    font-size: 12px;
    line-height: 1.7;
  }

  .service-rule {
    margin: 16px 0 20px;
  }

  .service-image {
    flex: 0 0 180px;
    position: static;
    width: 100%;
    height: 180px;
    margin-top: auto;
  }

  .service-block--waterproof {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .service-block--waterproof .service-copy {
    width: 100%;
  }

  .service-block--waterproof .service-image {
    width: 100%;
    height: 180px;
    margin-top: auto;
  }

  .service-block--waterproof .more {
    width: 180px;
    height: 46px;
    margin-top: 20px;
    font-size: 13px;
  }

  .more {
    width: 208px;
    height: 52px;
    margin-top: 28px;
    font-size: 14px;
  }

  .flow {
    padding: 72px 26px 84px;
  }

  .flow .flow-en,
  .flow .flow-line,
  .flow h2 {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin-left: 0;
    transform: none;
  }

  .flow .flow-en {
    margin-bottom: 6px;
  }

  .flow .title-line.flow-line {
    width: 97px;
    margin-bottom: 12px;
  }

  .flow h2 {
    margin: 0 0 28px;
    font-size: 26px;
    line-height: 1.3;
  }

  .flow-accordion {
    position: static;
    width: 100%;
    transform: none;
  }

  .flow-accordion details {
    margin-bottom: 58px;
  }

  .flow-accordion details:not(:last-child)::after {
    bottom: -38px;
  }

  .flow-accordion summary {
    grid-template-columns: 64px 1fr 46px;
    min-height: 72px;
  }

  .flow-accordion summary span {
    font-size: 23px;
  }

  .flow-accordion summary b {
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.4;
  }

  .flow-content {
    display: block;
    padding: 26px 0 10px;
  }

  .flow-content p {
    font-size: 12px;
  }

  .flow-content__text .more {
    width: min(100%, 260px);
    min-height: 56px;
    margin-top: 20px;
    font-size: 15px;
  }

  .flow-image {
    width: 100%;
    max-width: 283px;
    margin: 22px auto 0;
    aspect-ratio: 1 / 1;
    background-size: contain;
  }

  .price-lead,
  .price-note {
    position: static;
    width: 100%;
    font-size: 13px;
    transform: none;
  }

  .price-lead {
    margin-bottom: 32px;
  }

  .price-board {
    margin-bottom: 24px;
  }

  .price-board div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 18px 0;
  }

  .price-board b,
  .price-board span,
  .price-board strong {
    font-size: 13px;
    text-align: left;
  }

  .works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 38px;
    margin-left: 0;
    transform: none;
  }

  .works-grid article,
  .works-grid img,
  .works-grid p {
    width: 100%;
  }

  .works-grid img {
    height: 219px;
  }

  .works-meta {
    margin-top: 16px;
  }

  .works-meta span {
    font-size: 19px;
  }

  .works-grid p {
    margin-top: 12px;
    font-size: 12px;
  }

  .staff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
  }

  .staff-grid article {
    width: 100%;
    min-height: 0;
    padding: 108px 16px 20px;
  }

  .staff-photo {
    left: 50%;
    top: 22px;
    width: 72px;
    height: 72px;
    transform: translateX(-50%);
  }

  .staff-grid h3,
  .staff-detail {
    text-align: center;
  }

  .staff-detail div {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-bottom: 10px;
  }

  .staff-detail dt,
  .staff-detail dd {
    justify-content: center;
  }

  .faq-list details {
    margin-bottom: 16px;
  }

  .faq-list summary {
    min-height: 68px;
    height: auto;
    gap: 16px;
    padding: 18px;
    font-size: 12px;
  }

  .faq-list b {
    flex-basis: 22px;
    font-size: 21px;
  }

  .faq-list p {
    gap: 16px;
    padding: 18px;
    font-size: 12px;
  }

  .faq-answer {
    gap: 16px;
    padding: 18px;
    font-size: 12px;
  }

  .faq-answer > b {
    flex-basis: 22px;
    font-size: 21px;
  }

  .message {
    margin-bottom: 48px;
  }

  .message h3,
  .profile h3 {
    font-size: 21px;
  }

  .message p {
    width: 100%;
    font-size: 12px;
  }

  .profile div {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }

  .profile dt,
  .profile dd {
    display: block;
    font-size: 12px;
  }

  .profile {
    margin-bottom: 48px;
  }

  .company-history {
    margin-top: 8px;
    margin-bottom: 48px;
  }

  .company-history__title,
  .company-story__title {
    font-size: 21px;
  }

  .company-history__date,
  .company-history__text,
  .company-story__text {
    font-size: 12px;
  }

  .company-story__lead {
    margin-bottom: 20px;
    font-size: 15px;
  }

  .company-story__heading {
    margin: 24px 0 12px;
    font-size: 14px;
  }

  .company-story {
    padding: 32px 24px;
  }

  .address {
    margin: 0 0 24px;
    font-size: 12px;
    line-height: 1.8;
  }

  .map {
    height: 171px;
    font-size: 17px;
  }

  .footer {
    height: 130px;
    padding: 27px 0 0;
  }

  .footer-logo,
  .footer nav,
  .footer-waterproof,
  .footer-contact,
  .footer small {
    position: static;
    transform: none;
  }

  .footer-logo {
    width: 157px;
    margin: 0 auto;
  }

  .footer nav {
    display: none;
  }

  .footer-waterproof,
  .footer-contact {
    display: none;
  }

  .footer small {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 6px 0;
    font-size: 8px;
    line-height: 1;
    text-align: center;
  }
}

@media (max-width: 1279px) {
  .hero {
    height: clamp(452px, calc(318px + 49.94vw), 862px);
  }

  .copy-badge {
    left: 50vw;
    top: clamp(64px, calc(54px + 3vw), 88px);
    width: clamp(76px, calc(48px + 6vw), 120px);
    transform: translateX(-50%);
  }

  .copy-main {
    left: 50vw;
    top: clamp(155px, calc(132px + 7.5vw), 225px);
    width: clamp(238px, calc(28.3px + 70.23vw), 871px);
    transform: translateX(-50%);
  }

  .copy-logo {
    left: calc(50vw + clamp(-214px, calc(-37.4px - 13.78vw), -89px));
    top: clamp(262px, calc(223px + 15.17vw), 399px);
    width: clamp(81px, calc(20.4px + 20.27vw), 264px);
    margin-left: 0;
    transform: translateX(-50%);
  }

  .copy-illust {
    left: calc(50vw + clamp(59px, calc(25.9px + 9.89vw), 144px));
    top: clamp(228px, calc(190.1px + 14.31vw), 358px);
    width: clamp(178px, calc(108.4px + 25.42vw), 407px);
    height: auto;
    margin-left: 0;
    transform: translateX(-50%);
  }

  .copy-info {
    left: 50vw;
    top: clamp(375px, calc(274.2px + 36.03vw), 695px);
    width: clamp(230px, calc(116.2px + 41.63vw), 610px);
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .copy-badge {
    top: 76px;
  }

  .copy-main {
    width: clamp(300px, calc(40px + 80vw), 400px);
    height: auto;
  }

  .copy-logo {
    top: 334px;
  }

  .copy-illust {
    top: 292px;
  }
}

/* ========== 防水工事ページ (waterproof.html) ========== */

/* 縦フロー（外壁LPの固定高さは使わない）。横幅は .page と同じ min-width: 1280px を継承 */
.page--waterproof.page {
  --gutter: 129px;
  height: auto;
  min-height: auto;
  overflow: visible;
}

.page--waterproof .footer {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
}

:root:has(.topbar.is-open) .page--waterproof {
  overflow: visible;
}

/* ヘッダー差分（外壁リンク＋防水工事ボタン active）— PC のみ */
@media (min-width: 768px) {
  .page--waterproof .topbar-link--exterior {
    position: absolute;
    left: 760px;
    top: 22px;
    display: grid;
    place-items: center;
    width: 110px;
    height: 38px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #ffffff;
    border-radius: 30px;
    transform: translateX(var(--stage-offset));
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  }

  .page--waterproof .waterproof {
    color: var(--brand);
    background: #ffffff;
    border-color: #ffffff;
    pointer-events: none;
  }
}

.topbar-link--exterior {
  color: #ffffff;
  font-weight: 700;
  border: 1px solid #ffffff;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.topbar-link--exterior:is(:hover, :focus-visible) {
  color: var(--brand);
  background: #ffffff;
  border-color: #ffffff;
}

.page--waterproof main {
  display: block;
  width: 100%;
}

/* ── セクション共通 ── */
.wp-section {
  padding: 100px var(--gutter);
}

.wp-section--pink {
  background: var(--pink);
}

.wp-eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.wp-line {
  width: 128px;
  max-width: 128px;
  height: auto;
  margin: 0 0 28px;
}

.wp-heading {
  margin: 0 0 48px;
  color: #000000;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
}

/* ── ヒーロー（白文字・中央・キャッチ＋本文） ── */
.wp-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 917px;
  padding: 140px var(--gutter) 100px;
  color: #ffffff;
  text-align: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
    url("./images/waterproof/bg_waterproof.jpg") center top / cover no-repeat;
}

.wp-hero__inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.wp-hero__label {
  display: inline-block;
  margin: 0 0 28px;
  padding: 12px 32px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.95);
  color: var(--brand);
  border-radius: 999px;
}

.wp-hero__catch {
  margin: 0 0 24px;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.wp-hero__catch-line {
  display: block;
}

.wp-hero__wave {
  width: 128px;
  height: auto;
  margin: 0 auto 40px;
  filter: brightness(0) invert(1);
}

.wp-hero__body {
  max-width: 920px;
  margin: 0 auto;
  font-size: 19px;
  font-weight: 700;
  line-height: 2.1;
  text-align: center;
}

.wp-hero__hl {
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(transparent 52%, rgba(1, 130, 232, 0.75) 52%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.12em;
}

.wp-hero__body p {
  margin: 0;
}

.wp-hero__body p + p {
  margin-top: 1.5em;
}

.wp-hero__trust {
  max-width: 780px;
  margin: 48px auto 0;
  padding: 22px 28px 24px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.85;
  text-align: center;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: none;
}

.wp-hero__trust-label {
  display: block;
  width: fit-content;
  margin: 0 auto 12px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  color: #ffffff;
  background: var(--brand);
  border: none;
  border-radius: 999px;
}

/* ── お困りごと（PNGデザイン：白カード＋背後の水色ブロック） ── */
.wp-trouble {
  padding-bottom: 80px;
}

.wp-trouble__head {
  margin-bottom: 64px;
  text-align: center;
}

.wp-trouble__title {
  margin: 0 0 6px;
  color: #000000;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}

.wp-trouble__lead {
  margin: 0 0 16px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
}

.wp-trouble__wave {
  display: block;
  width: 128px;
  height: auto;
  margin: 0 auto;
}

.wp-trouble__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: min(100%, 1022px);
  margin: 0 auto 64px;
  overflow: visible;
  border: 1px solid #abd7fb;
}

.wp-trouble__item {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 0;
  padding: 24px 32px;
  overflow: visible;
  background: #f7fcff;
  border-bottom: 1px solid #abd7fb;
}

.wp-trouble__item:last-child {
  border-bottom: 0;
}

.wp-trouble__checkbox {
  position: relative;
  flex: 0 0 22px;
  align-self: center;
  width: 22px;
  height: 22px;
  margin-top: 0;
  overflow: visible;
  background: #ffffff;
  border: 2px solid var(--brand);
}

.wp-trouble__checkbox::before {
  position: absolute;
  top: -10px;
  right: -12px;
  content: "✓";
  font-family: Roboto, Arial, sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: var(--brand);
}

.wp-trouble__item-text {
  display: flex;
  flex: 1;
  align-items: center;
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
}

.wp-trouble__item-photo {
  flex: 0 0 180px;
  width: 180px;
  height: 121px;
  object-fit: cover;
  background: #d9d9d9;
}

.wp-trouble__message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: min(100%, 1022px);
  margin: 0 auto;
}

.wp-trouble__bubble {
  position: relative;
  flex: 1;
  max-width: 520px;
  margin: 0;
  padding: 28px 36px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  background: #ffffff;
  border: 2px solid var(--brand);
  border-radius: 12px;
}

.wp-trouble__bubble::before {
  position: absolute;
  right: -20px;
  top: 50%;
  width: 0;
  height: 0;
  content: "";
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 20px solid var(--brand);
  transform: translateY(-50%);
}

.wp-trouble__bubble::after {
  position: absolute;
  right: -17px;
  top: 50%;
  width: 0;
  height: 0;
  content: "";
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 18px solid #ffffff;
  transform: translateY(-50%);
}

.wp-trouble__illust {
  flex: 0 0 auto;
  width: auto;
  max-width: 340px;
  height: auto;
}

/* お見積りシミュレーター帯 */
.wp-sim-band {
  width: 100%;
  padding: 56px var(--gutter);
  background: linear-gradient(180deg, #e8f6fe 0%, #d4ecfa 100%);
}

.wp-sim-band__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  width: min(100%, 1022px);
  margin: 0 auto;
}

.wp-sim-band__img {
  flex: 0 0 auto;
  width: auto;
  max-width: 180px;
  height: auto;
}

.wp-sim-band__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.wp-sim-band__text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.wp-sim-band__text-deco {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}

.wp-sim-band__text-main {
  flex: 0 1 auto;
}

.wp-sim-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 560px;
  padding: 18px 72px;
  color: var(--blue);
  font-size: 17px;
  font-weight: 700;
  background: #ffffff;
  border: 2px solid var(--blue);
  border-radius: 999px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.wp-sim-band__btn .fa-calculator {
  font-size: 19px;
  line-height: 1;
}

.wp-sim-band__btn:is(:hover, :focus-visible) {
  color: #ffffff;
  background: var(--blue);
}

/* ── コンテンツ幅（index .feature-item と同じ 1038px / 126px 基準） ── */
.page--waterproof .wp-feature,
.page--waterproof .wp-method,
.page--waterproof .wp-price,
.page--waterproof .wp-faq {
  padding: 100px 0;
}

.page--waterproof .wp-faq {
  padding-bottom: 140px;
}

.page--waterproof .wp-feature .wp-eyebrow,
.page--waterproof .wp-feature .wp-line,
.page--waterproof .wp-method .wp-eyebrow,
.page--waterproof .wp-method .wp-line,
.page--waterproof .wp-price .wp-eyebrow,
.page--waterproof .wp-price .wp-line,
.page--waterproof .wp-faq .wp-eyebrow,
.page--waterproof .wp-faq .wp-line {
  margin-left: calc(129px + var(--stage-offset));
  margin-right: auto;
}

.page--waterproof .wp-feature .wp-heading,
.page--waterproof .wp-method .wp-heading,
.page--waterproof .wp-price .wp-heading,
.page--waterproof .wp-faq .wp-heading {
  width: auto;
  max-width: 1038px;
  margin-left: calc(129px + var(--stage-offset));
  margin-right: auto;
}

.page--waterproof .wp-feature__list,
.page--waterproof .wp-method__grid,
.page--waterproof .wp-price__lead,
.page--waterproof .wp-price__table,
.page--waterproof .wp-price__note,
.page--waterproof .wp-faq__list {
  width: 1038px;
  max-width: calc(100% - 252px);
  margin-left: calc(126px + var(--stage-offset));
  margin-right: auto;
}

.page--waterproof .wp-feature__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.wp-feature-card {
  display: grid;
  grid-template-columns: 638px 360px;
  gap: 40px;
  align-items: start;
  width: 100%;
}

.wp-feature-card:nth-child(odd) .wp-feature-card__visual {
  order: 2;
}

.wp-feature-card:nth-child(even) .wp-feature-card__visual {
  order: 1;
}

.wp-feature-card:nth-child(even) .wp-feature-card__body {
  order: 2;
}

.wp-feature-card:nth-child(even) {
  grid-template-columns: 360px 618px;
}

/* 奇数: テキスト左・画像右（index .feature-item--01 など） */
.wp-feature-card:nth-child(odd) .wp-feature-card__img {
  order: 2;
}

.wp-feature-card:nth-child(odd) .wp-feature-card__body {
  order: 1;
}

/* 偶数: 画像左・テキスト右（index .feature-item--02 など） */
.wp-feature-card:nth-child(even) .wp-feature-card__img {
  order: 1;
}

.wp-feature-card__visual {
  position: relative;
  width: 100%;
  height: 242px;
  border-radius: 10px;
  overflow: hidden;
}

.wp-feature-card__hatena {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--blue);
  font-size: 53px;
  font-weight: 900;
  line-height: 1;
}

.wp-feature-card__img {
  width: 100%;
  height: 242px;
  background: #d9d9d9 center / cover no-repeat;
  border-radius: 10px;
}

.page--waterproof .wp-feature-card__hatena {
  display: none;
}

.page--waterproof .wp-feature-card:nth-child(1) .wp-feature-card__img {
  background-image: url("./images/waterproof/wp_reason_01.jpg");
}

.page--waterproof .wp-feature-card:nth-child(2) .wp-feature-card__img {
  background-image: url("./images/waterproof/wp_reason_02.jpg");
}

.page--waterproof .wp-feature-card:nth-child(3) .wp-feature-card__img {
  background-image: url("./images/waterproof/wp_reason_03.jpg");
}

.page--waterproof .wp-feature-card:nth-child(4) .wp-feature-card__img {
  background-image: url("./images/waterproof/wp_reason_04.jpg");
}

.page--waterproof .wp-feature-card:nth-child(5) .wp-feature-card__img {
  background-image: url("./images/waterproof/wp_reason_05.jpg");
}

.page--waterproof .wp-feature-card:nth-child(6) .wp-feature-card__img {
  background-image: url("./images/waterproof/wp_reason_06.jpg");
}

.wp-feature-card__head {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 122px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #40a1ee;
}

.wp-feature-card:nth-child(even) .wp-feature-card__head {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.wp-feature-card__num {
  flex: 0 0 auto;
  align-self: center;
  color: var(--blue);
  font-family: Poppins, Arial, sans-serif;
  font-size: 75px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.wp-feature-card__head h3 {
  flex: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.wp-feature-card:nth-child(even) .wp-feature-card__head h3 {
  text-align: right;
}

.wp-feature-card__body p {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
}

.wp-feature-card__diagrams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.wp-feature-card__diagram {
  margin: 0;
}

.wp-feature-card__diagram img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.wp-vinyl__method-note {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
}

/* ── 工法 ── */
.wp-method__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wp-method-card {
  display: grid;
  grid-template-columns: 1fr 360px;
  column-gap: 40px;
  align-items: start;
}

.wp-method-card h3 {
  grid-column: 1;
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 700;
}

.wp-method-card__rule {
  grid-column: 1;
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 20px;
  background: var(--line);
}

.wp-method-card p {
  grid-column: 1;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
}

.wp-method-card__visual {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 3;
}

.wp-method-card__hatena {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: var(--blue);
  font-size: 53px;
  font-weight: 900;
  line-height: 1;
}

.wp-method-card__img {
  width: 100%;
  height: 242px;
  border-radius: 10px;
  object-fit: cover;
}

.wp-method-card__visual .wp-method-card__img {
  background: #d9d9d9 center / cover no-repeat;
}

.wp-method-card--vinyl .wp-method-card__img,
.wp-method-card--urethane .wp-method-card__img,
.wp-method-card--base .wp-method-card__img {
  display: block;
  grid-column: 2;
  grid-row: 1 / span 3;
}

/* ── 工法詳細（塩ビシート・ウレタン） ── */
.wp-vinyl {
  grid-column: 1 / -1;
  padding: 40px 48px 48px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.wp-vinyl__head {
  margin-bottom: 36px;
}

.wp-vinyl__title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.wp-vinyl__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
}

.wp-vinyl__subhead {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.wp-vinyl__subhead--center {
  text-align: center;
  margin-bottom: 32px;
}

.wp-vinyl__intro {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
  margin-bottom: 56px;
}

.wp-vinyl__intro-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.wp-vinyl__intro-body strong {
  font-weight: 700;
}

.wp-vinyl__catalog {
  margin: 40px 0 0;
  padding-top: 8px;
}

.wp-vinyl__catalog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  background: #ffffff;
  border: 2px solid var(--brand);
  border-radius: 999px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.wp-vinyl__catalog-btn .fa-up-right-from-square {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
}

.wp-vinyl__catalog-btn:is(:hover, :focus-visible) {
  color: #ffffff;
  background: var(--brand);
}

.wp-vinyl__figure {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

.wp-vinyl__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.wp-vinyl__figure--hero img {
  aspect-ratio: 1147 / 860;
}

.wp-vinyl__figure--diagram img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  background: #f5f5f5;
}

.wp-vinyl__intro--base {
  margin-bottom: 40px;
}

.wp-vinyl__intro--base p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.wp-vinyl__caption {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #555;
  text-align: center;
}

.wp-vinyl__draft-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: #8a6d3b;
  background: #fff8e6;
  border-left: 3px solid #e0c36a;
}

.wp-vinyl-steps--detail .wp-vinyl__draft-note {
  margin-top: 10px;
}

.wp-vinyl__figure--base-product img,
.wp-vinyl__figure--base-layout img {
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
}

.wp-base-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 320px);
  gap: 28px;
  align-items: start;
}

.wp-base-diagram__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.wp-base-diagram__body p + p {
  margin-top: 12px;
}

.wp-base-layout-copy {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
}

.wp-base-layout-copy__block p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.wp-base-layout-copy__block p + p {
  margin-top: 6px;
}

.wp-base-layout-copy__label {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue);
}

.wp-vinyl__subhead--nested {
  margin: 28px 0 16px;
  font-size: 16px;
}

.wp-vinyl__figure--base-layout {
  margin-bottom: 8px;
}

.wp-vinyl__methods {
  margin-bottom: 56px;
}

.wp-vinyl-method {
  padding: 32px;
  margin-bottom: 24px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
}

.wp-vinyl-method:last-child {
  margin-bottom: 0;
}

.wp-vinyl-method__head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.wp-vinyl-method__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  background: var(--blue);
  border-radius: 50%;
}

.wp-vinyl-method__name {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.wp-vinyl-method__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}

.wp-vinyl-method__photos {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  margin-bottom: 28px;
}

.wp-vinyl-method__photos .wp-vinyl__figure:first-child img {
  aspect-ratio: 1288 / 860;
}

.wp-vinyl-method__photos .wp-vinyl__figure:last-child img {
  aspect-ratio: 480 / 360;
  height: 100%;
  min-height: 180px;
}

.wp-vinyl-method__photos--tile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wp-vinyl-method__photos--tile .wp-vinyl__figure {
  margin: 0;
  min-width: 0;
}

.wp-vinyl-method__photos--tile .wp-vinyl__figure img,
.wp-vinyl-method__photos--tile .wp-vinyl__figure:first-child img,
.wp-vinyl-method__photos--tile .wp-vinyl__figure:last-child img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  min-height: 0;
}

.wp-vinyl-method__photos--tile.wp-vinyl-method__photos--frp {
  margin-bottom: 28px;
}

#method-patiroll .wp-vinyl-method__photos--tile {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wp-base-flow {
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.wp-base-flow__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 380px);
  gap: 24px;
  align-items: stretch;
  padding: 24px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
}

.wp-base-flow__body {
  min-width: 0;
}

.wp-base-flow__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 0 12px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.wp-base-flow__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.wp-base-flow__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}

.wp-base-flow__figure {
  margin: 0;
  min-width: 0;
}

.wp-base-flow__figure img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wp-vinyl-method__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.wp-vinyl__label {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue);
}

.wp-vinyl-steps {
  margin: 0;
  padding-left: 1.4em;
  font-size: 14px;
  line-height: 1.8;
}

.wp-vinyl-steps li + li {
  margin-top: 4px;
}

.wp-vinyl-layers {
  margin-bottom: 24px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  overflow: hidden;
}

.wp-vinyl-layers__row {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  border-bottom: 1px solid #d0d0d0;
}

.wp-vinyl-layers__row:last-child {
  border-bottom: none;
}

.wp-vinyl-layers__row:nth-child(1) {
  background: #c8e6c9;
}

.wp-vinyl-layers__row:nth-child(2) {
  background: #e3f2fd;
}

.wp-vinyl-layers__row:nth-child(3) {
  background: #fff9c4;
}

.wp-vinyl-layers__row:nth-child(4) {
  background: #eeeeee;
}

.wp-vinyl-layers--adhesion .wp-vinyl-layers__row:nth-child(2) {
  background: #ffe0b2;
}

.wp-vinyl-layers--adhesion .wp-vinyl-layers__row:nth-child(3) {
  background: #eeeeee;
}

.wp-vinyl-layers--patiroll-close .wp-vinyl-layers__row:nth-child(1) {
  background: #fff9c4;
}

.wp-vinyl-layers--patiroll-close .wp-vinyl-layers__row:nth-child(2) {
  background: #c8e6c9;
}

.wp-vinyl-layers--patiroll-close .wp-vinyl-layers__row:nth-child(3) {
  background: #ffe0b2;
}

.wp-vinyl-layers--patiroll-close .wp-vinyl-layers__row:nth-child(4) {
  background: #eeeeee;
}

.wp-vinyl-layers--patiroll-vent .wp-vinyl-layers__row:nth-child(1) {
  background: #fff9c4;
}

.wp-vinyl-layers--patiroll-vent .wp-vinyl-layers__row:nth-child(2) {
  background: #c8e6c9;
}

.wp-vinyl-layers--patiroll-vent .wp-vinyl-layers__row:nth-child(3) {
  background: #f8bbd0;
}

.wp-vinyl-layers--patiroll-vent .wp-vinyl-layers__row:nth-child(4) {
  background: #eeeeee;
}

.wp-vinyl__figure--patiroll-intro img {
  aspect-ratio: 690 / 450;
}

.wp-vinyl-method__photos--patiroll {
  grid-template-columns: 1fr 1fr;
}

.wp-vinyl-method__photos--patiroll .wp-vinyl__figure:first-child img {
  aspect-ratio: 973 / 974;
  min-height: 0;
  height: auto;
}

.wp-vinyl-method__photos--patiroll .wp-vinyl__figure:last-child img {
  aspect-ratio: 978 / 552;
  min-height: 0;
  height: auto;
}

.wp-vinyl-method__photos--patiroll.wp-vinyl-method__photos--contain {
  grid-template-columns: minmax(0, 1.446fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.wp-vinyl-method__photos--patiroll.wp-vinyl-method__photos--contain .wp-vinyl__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  background: #f5f5f5;
}

.wp-vinyl-method__photos--patiroll.wp-vinyl-method__photos--contain .wp-vinyl__figure:last-child {
  aspect-ratio: 720 / 540;
}

.wp-vinyl-method__photos--patiroll.wp-vinyl-method__photos--contain .wp-vinyl__figure:first-child img,
.wp-vinyl-method__photos--patiroll.wp-vinyl-method__photos--contain .wp-vinyl__figure:last-child img {
  aspect-ratio: auto;
  min-height: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
}

.wp-vinyl-method__photos--patiroll.wp-vinyl-method__photos--contain .wp-vinyl__figure:first-child img {
  height: 100%;
}

.wp-vinyl-method__photos--patiroll.wp-vinyl-method__photos--contain .wp-vinyl__figure:last-child img {
  width: 100%;
}

.wp-vinyl-method .wp-vinyl__figure--diagram {
  margin: 0 0 40px;
}

.wp-vinyl__sections {
  margin-bottom: 56px;
}

.wp-vinyl-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.wp-vinyl-sections__name {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.wp-vinyl__layer-note {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #555555;
  text-align: center;
}

.wp-vinyl__steps {
  margin-bottom: 56px;
}

.wp-vinyl__figure--frp-intro img {
  aspect-ratio: 1147 / 860;
}

.wp-vinyl__figure--frp-process {
  margin-bottom: 28px;
}

.wp-vinyl__figure--frp-process img {
  aspect-ratio: 1200 / 794;
}

.wp-vinyl-steps--detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  padding-left: 0;
  list-style: none;
  counter-reset: frp-step;
}

.wp-vinyl-steps--detail li {
  counter-increment: frp-step;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

.wp-vinyl-steps--detail li strong {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue);
}

.wp-vinyl-steps--detail li strong::before {
  content: counter(frp-step) ".";
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--blue);
}

.wp-vinyl-steps--detail li span {
  display: block;
  font-size: 14px;
  line-height: 1.7;
}

.wp-vinyl-layers--frp .wp-vinyl-layers__row:nth-child(1) {
  background: #fff9c4;
}

.wp-vinyl-layers--frp .wp-vinyl-layers__row:nth-child(2) {
  background: #c8e6c9;
}

.wp-vinyl-layers--frp .wp-vinyl-layers__row:nth-child(3) {
  background: #ffe0b2;
}

.wp-vinyl-layers--frp .wp-vinyl-layers__row:nth-child(4) {
  background: #eeeeee;
}

.wp-vinyl-sections--single {
  grid-template-columns: 320px 1fr;
  align-items: start;
}

.wp-vinyl-sections--single .wp-vinyl__figure img {
  aspect-ratio: 595 / 390;
}

.wp-vinyl-list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.8;
}

.wp-vinyl-list li + li {
  margin-top: 4px;
}

.wp-vinyl__joint {
  margin-bottom: 56px;
}

.wp-vinyl__joint-lead {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.8;
}

.wp-vinyl__joint-lead strong {
  font-weight: 700;
}

.wp-vinyl__joint-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  margin-bottom: 24px;
}

.wp-vinyl__joint-grid .wp-vinyl__figure:first-child img {
  aspect-ratio: 1290 / 860;
}

.wp-vinyl__joint-grid .wp-vinyl__figure:last-child img {
  aspect-ratio: 1024 / 1536;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.wp-vinyl__joint-note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #444444;
}

.wp-vinyl__summary {
  margin-bottom: 56px;
}

#method-patiroll .wp-vinyl__summary {
  margin-bottom: 0;
}

#method-frp .wp-vinyl__summary {
  margin-bottom: 0;
}

.wp-vinyl__summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.wp-vinyl__summary-grid--nested {
  margin-top: 24px;
  margin-bottom: 0;
}

.wp-vinyl__summary-grid--nested .wp-vinyl-box__title {
  margin: 0 0 12px;
  font-size: 16px;
}

.wp-vinyl-box {
  padding: 24px 28px;
  border-radius: 10px;
}

.wp-vinyl-box--merit {
  background: #f0f8ff;
  border: 1px solid #b3d9f7;
}

.wp-vinyl-box--demerit {
  background: #fff8f0;
  border: 1px solid #f5d4b3;
}

.wp-vinyl-box--uses {
  padding: 24px 28px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
}

.wp-vinyl-box__title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.wp-vinyl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-vinyl-tags li {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
}

.wp-vinyl__compare-note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #444444;
}

.wp-vinyl-compare {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.wp-vinyl-compare__row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  border-bottom: 1px solid #e0e0e0;
}

.wp-vinyl-compare__row:last-child {
  border-bottom: none;
}

.wp-vinyl-compare__row--head {
  background: var(--blue);
  color: #ffffff;
  font-weight: 700;
}

.wp-vinyl-compare__row--head .wp-vinyl-compare__cell {
  font-size: 14px;
}

.wp-vinyl-compare__row:not(.wp-vinyl-compare__row--head):nth-child(even) {
  background: #fafafa;
}

.wp-vinyl-compare__cell {
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.5;
  border-right: 1px solid #e0e0e0;
}

.wp-vinyl-compare__cell:last-child {
  border-right: none;
}

.wp-vinyl-compare__row--head .wp-vinyl-compare__cell {
  border-right-color: rgba(255, 255, 255, 0.25);
}

.wp-vinyl-compare__row:not(.wp-vinyl-compare__row--head) .wp-vinyl-compare__cell:first-child {
  font-weight: 700;
  background: #f5f5f5;
}

/* ── 料金 ── */
.wp-price__lead {
  margin: 0 0 40px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
}

.wp-price__table {
  border-top: 1px solid var(--line);
}

.wp-price__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 76px;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
}

.wp-price__row b {
  font-size: 19px;
  font-weight: 700;
}

.wp-price__row span {
  font-size: 19px;
  font-weight: 500;
}

.wp-price__row strong {
  font-size: 19px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.wp-price__note {
  margin: 32px 0 0;
  font-size: 15px;
  line-height: 1.7;
}

/* ── FAQ ── */
.wp-faq__list details {
  margin-bottom: 25px;
  background: #ffffff;
  border-radius: 10px;
}

.wp-faq__list summary {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 76px;
  padding: 0 34px;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.wp-faq__list summary::-webkit-details-marker {
  display: none;
}

.wp-faq__list summary::after {
  margin-left: auto;
  color: var(--blue);
  font-size: 30px;
  content: "+";
}

.wp-faq__list details[open] summary::after {
  content: "−";
}

.wp-faq__list summary b,
.wp-faq__list .wp-faq__a b {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-family: Roboto, Arial, sans-serif;
  font-size: 26px;
  line-height: 1;
}

.wp-faq__a {
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0 34px 28px;
  font-size: 15px;
  line-height: 1.8;
}

/* ── CTA ── */
.page--waterproof .wp-cta {
  position: relative;
  left: auto;
  top: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 54px 26px;
  transform: none;
  /* index.html の CTA と同じ背景に揃える */
  background: url("./images/top/cta_bg.jpg") center / cover no-repeat;
  box-sizing: border-box;
}

.page--waterproof .wp-cta__title,
.page--waterproof .wp-cta__mail,
.page--waterproof .wp-cta__tel {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}

.wp-cta__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

.wp-cta__mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 648px);
  min-height: 92px;
  padding: 18px 32px;
  color: #ffffff;
  font-family: Roboto, Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 100px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.wp-cta__mail img {
  width: 24px;
  transition: filter 0.3s ease;
}

.wp-cta__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 526px);
  min-height: 61px;
  padding: 12px 28px;
  color: var(--blue);
  font-family: Poppins, Arial, sans-serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid var(--blue);
  border-radius: 31px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.wp-cta__tel img {
  width: 24px;
  transition: filter 0.3s ease;
}

/* 文字詰まり防止（環境依存のフォント置換でも潰れにくくする） */
.wp-cta__mail,
.wp-cta__tel {
  line-height: 1.2;
  white-space: normal;
}

.wp-cta__mail:is(:hover, :focus-visible) {
  color: var(--blue);
  background: #ffffff;
}

.wp-cta__mail:is(:hover, :focus-visible) img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(91%) saturate(2685%) hue-rotate(187deg) brightness(95%) contrast(99%);
}

.wp-cta__tel:is(:hover, :focus-visible) {
  color: #ffffff;
  background: var(--blue);
}

.wp-cta__tel:is(:hover, :focus-visible) img {
  filter: brightness(0) invert(1);
}

/* ── SP ── */
@media (max-width: 767px) {
  .page--waterproof.page {
    --gutter: 20px;
    width: 100%;
    min-width: 0;
  }

  .wp-section {
    padding: 72px 26px;
  }

  .page--waterproof .wp-feature,
  .page--waterproof .wp-method,
  .page--waterproof .wp-price,
  .page--waterproof .wp-faq {
    padding: 72px 26px;
  }

  .page--waterproof .wp-feature .wp-eyebrow,
  .page--waterproof .wp-feature .wp-heading,
  .page--waterproof .wp-feature__list,
  .page--waterproof .wp-method .wp-eyebrow,
  .page--waterproof .wp-method .wp-heading,
  .page--waterproof .wp-method__grid,
  .page--waterproof .wp-price .wp-eyebrow,
  .page--waterproof .wp-price .wp-heading,
  .page--waterproof .wp-price__lead,
  .page--waterproof .wp-price__table,
  .page--waterproof .wp-price__note,
  .page--waterproof .wp-faq .wp-eyebrow,
  .page--waterproof .wp-faq .wp-heading,
  .page--waterproof .wp-faq__list {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .wp-line {
    width: 97px;
    max-width: 97px;
    margin-bottom: 22px;
  }

  .wp-hero {
    min-height: 0;
    padding: 100px 26px 64px;
  }

  .wp-hero__label {
    font-size: 14px;
    padding: 10px 22px;
  }

  .wp-hero__catch {
    font-size: clamp(23px, 7vw, 27px);
    line-height: 1.45;
  }

  .wp-hero__catch-line {
    display: block;
  }

  .wp-hero__catch-line--brand {
    white-space: nowrap;
  }

  .wp-hero__wave {
    width: 110px;
    margin-bottom: 28px;
  }

  .wp-hero__body {
    font-size: 14px;
    line-height: 1.85;
  }

  .wp-hero__trust {
    margin-top: 32px;
    padding: 18px 16px 20px;
    font-size: 13px;
    line-height: 1.8;
  }

  .wp-hero__trust-label {
    margin: 0 auto 10px;
    padding: 5px 12px;
    font-size: 11px;
  }

  .wp-heading {
    margin-bottom: 36px;
    font-size: 23px;
  }

  .wp-feature-card,
  .wp-feature-card:nth-child(even) {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .wp-feature-card:nth-child(odd) .wp-feature-card__body,
  .wp-feature-card:nth-child(even) .wp-feature-card__body {
    order: 1;
  }

  .wp-feature-card:nth-child(odd) .wp-feature-card__visual,
  .wp-feature-card:nth-child(even) .wp-feature-card__visual {
    order: 2;
    width: 100%;
    height: 180px;
    margin-top: 24px;
    aspect-ratio: auto;
  }

  .wp-feature-card__img {
    height: 100%;
    margin-bottom: 0;
  }

  .wp-feature-card__hatena {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 41px;
  }

  .wp-feature-card__head,
  .wp-feature-card:nth-child(even) .wp-feature-card__head {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding-bottom: 16px;
  }

  .wp-feature-card:nth-child(even) .wp-feature-card__head h3 {
    text-align: left;
  }

  .wp-feature-card__num {
    font-size: 39px;
    line-height: 1;
  }

  .wp-feature-card__head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
  }

  .wp-feature-card__body p {
    font-size: 13px;
    line-height: 1.7;
  }

  .wp-feature-card__diagrams {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
  }

  .wp-trouble__title {
    font-size: 20px;
  }

  .wp-trouble__lead {
    font-size: 15px;
  }

  .wp-trouble__item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 20px 16px;
  }

  .wp-trouble__checkbox {
    align-self: center;
    margin-top: 0;
  }

  .wp-trouble__item-text {
    font-size: 13px;
    line-height: 1.5;
  }

  .wp-trouble__checkbox::before {
    top: -8px;
    right: -10px;
    font-size: 26px;
    font-weight: 900;
  }

  .wp-trouble__item-photo {
    flex: 0 0 140px;
    width: 140px;
    max-width: none;
    height: auto;
    aspect-ratio: 360 / 242;
    object-fit: cover;
  }

  .wp-trouble__message {
    flex-direction: column;
    gap: 20px;
  }

  .wp-trouble__bubble {
    width: 100%;
    max-width: none;
    padding: 22px 20px 32px;
    font-size: 13px;
    line-height: 1.55;
    border: 2px solid var(--brand);
  }

  .wp-trouble__bubble::before {
    right: auto;
    top: auto;
    left: 50%;
    bottom: -20px;
    border-top: 20px solid var(--brand);
    border-right: 16px solid transparent;
    border-bottom: 0;
    border-left: 16px solid transparent;
    transform: translateX(-50%);
  }

  .wp-trouble__bubble::after {
    display: block;
    right: auto;
    top: auto;
    left: 50%;
    bottom: -17px;
    border-top: 18px solid #ffffff;
    border-right: 14px solid transparent;
    border-bottom: 0;
    border-left: 14px solid transparent;
    transform: translateX(-50%);
  }

  .wp-trouble__illust {
    display: block;
    width: min(72%, 240px);
    max-width: 240px;
    height: auto;
    margin: 0 auto;
  }

  .wp-sim-band {
    padding-left: 20px;
    padding-right: 20px;
  }

  .wp-sim-band__inner {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .wp-sim-band__img {
    display: block;
    max-width: 150px;
    margin: 0 auto;
  }

  .wp-sim-band__content {
    width: 100%;
    align-items: stretch;
  }

  .wp-sim-band__text {
    gap: 8px;
    width: 100%;
    font-size: 15px;
  }

  .wp-sim-band__text-deco {
    font-size: 17px;
  }

  .wp-sim-band__text-main {
    flex: 1 1 auto;
  }

  .wp-sim-band__btn {
    min-width: 0;
    width: 100%;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }

  .wp-method__grid {
    gap: 32px;
  }

  .wp-method-card {
    display: block;
  }

  .wp-method-card p {
    margin-bottom: 16px;
  }

  .wp-method-card__visual {
    width: 100%;
    margin-top: 18px;
  }

  .wp-method-card__hatena {
    font-size: 41px;
  }

  .wp-method-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 360 / 242;
    margin-top: 0;
  }

  .wp-method-card--vinyl .wp-method-card__img,
  .wp-method-card--urethane .wp-method-card__img {
    margin-top: 18px;
  }

  .wp-vinyl {
    padding: 24px 20px 28px;
  }

  .wp-vinyl__title {
    font-size: 19px;
  }

  .wp-vinyl__subhead {
    font-size: 17px;
  }

  .wp-vinyl__intro {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
  }

  .wp-vinyl__methods {
    margin-bottom: 40px;
  }

  .wp-vinyl-method {
    padding: 20px 16px;
  }

  .wp-vinyl-method__photos {
    grid-template-columns: 1fr;
  }

  .wp-vinyl-method__photos--tile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #method-patiroll .wp-vinyl-method__photos--tile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wp-vinyl-method__photos .wp-vinyl__figure:last-child img {
    min-height: 0;
    aspect-ratio: 480 / 360;
  }

  .wp-base-flow {
    margin-bottom: 40px;
  }

  .wp-base-flow__item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 16px;
  }

  .wp-base-flow__figure img {
    min-height: 0;
  }

  .wp-vinyl-method__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wp-vinyl__joint {
    margin-bottom: 40px;
  }

  .wp-base-diagram {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wp-vinyl__joint-grid {
    grid-template-columns: 1fr;
  }

  .wp-vinyl__joint-grid .wp-vinyl__figure:last-child img {
    min-height: 0;
    aspect-ratio: 1024 / 1536;
    max-height: 360px;
  }

  .wp-vinyl__summary {
    margin-bottom: 40px;
  }

  .wp-vinyl__sections {
    margin-bottom: 40px;
  }

  .wp-vinyl-sections {
    grid-template-columns: 1fr;
  }

  .wp-vinyl-method__photos--patiroll {
    grid-template-columns: 1fr;
  }

  .wp-vinyl-method__photos--patiroll.wp-vinyl-method__photos--contain .wp-vinyl__figure:first-child img {
    height: auto;
    width: 100%;
  }

  .wp-vinyl__steps {
    margin-bottom: 40px;
  }

  .wp-vinyl-steps--detail {
    grid-template-columns: 1fr;
  }

  .wp-vinyl-sections--single {
    grid-template-columns: 1fr;
  }

  .wp-vinyl__summary-grid {
    grid-template-columns: 1fr;
  }

  .wp-vinyl-compare__row {
    grid-template-columns: 1fr;
  }

  .wp-vinyl-compare__row--head {
    display: none;
  }

  .wp-vinyl-compare__row:not(.wp-vinyl-compare__row--head) {
    padding: 16px;
    gap: 8px;
  }

  .wp-vinyl-compare__row:not(.wp-vinyl-compare__row--head) .wp-vinyl-compare__cell {
    display: block;
    padding: 0;
    border-right: none;
    background: transparent;
  }

  .wp-vinyl-compare__row:not(.wp-vinyl-compare__row--head) .wp-vinyl-compare__cell:first-child {
    margin-bottom: 8px;
    padding-bottom: 8px;
    font-size: 15px;
    border-bottom: 1px solid #e0e0e0;
  }

  .wp-vinyl-compare__row:not(.wp-vinyl-compare__row--head) .wp-vinyl-compare__cell:nth-child(2)::before {
    content: "塩ビシート防水：";
    font-weight: 700;
    color: var(--blue);
  }

  .wp-vinyl-compare__row:not(.wp-vinyl-compare__row--head) .wp-vinyl-compare__cell:nth-child(3)::before {
    content: "FRP防水：";
    font-weight: 700;
    color: var(--blue);
  }

  .wp-price__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }

  .wp-price__row strong {
    text-align: left;
  }

  .wp-cta__title {
    font-size: 17px;
  }

  .wp-cta__mail {
    min-height: 52px;
    padding: 14px 20px;
    font-size: 15px;
  }

  .wp-cta__tel {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 21px;
  }

}

/* ── 制作中モーダル ── */
.wip-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
}

.wip-modal[hidden] {
  display: none;
}

.wip-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.wip-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  padding: 40px 36px 32px;
  text-align: center;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.wip-modal__eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.wip-modal__title {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
}

.wip-modal__text {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.7;
}

.wip-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  padding: 0 28px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.wip-modal__close:is(:hover, :focus-visible) {
  color: var(--blue);
  background: #ffffff;
}

body.is-wip-modal-open {
  overflow: hidden;
}

/* PC: ハンバーガーメニュー（index / waterproof 共通） */
@media (min-width: 768px) {
  .topbar.is-open .nav {
    gap: 20px;
  }

  .topbar.is-open .nav a {
    min-width: min(100%, 360px);
    padding: 24px 36px;
    font-size: 23px;
    line-height: 1.75;
  }
}

.page--waterproof [id] {
  scroll-margin-top: 96px;
}

/* ── お見積りシミュレーター（simulator） ── */
.page--simulator .side-tab--sim {
  color: #ffffff;
  background: var(--blue);
  border-color: var(--blue);
  pointer-events: none;
}

.est-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 120px 24px 72px;
  background: url("./images/waterproof/bg_waterproof.jpg") center / cover no-repeat;
}

.est-hero__pill {
  margin: 0;
  padding: 16px 48px;
  color: #ffffff;
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
}

.est-body {
  padding: 56px 0 80px;
  background: #ffffff;
}

.page--estimate .side-tab--estimate {
  color: #ffffff;
  background: var(--blue);
  border-color: var(--blue);
  pointer-events: none;
}

.page--simulator,
.page--estimate,
.page--contact,
.page--management {
  --est-content-width: 840px;
}

.page--simulator .est-view,
.page--estimate .est-view,
.page--contact .est-view,
.page--management .est-view {
  width: min(100% - 52px, var(--est-content-width));
  max-width: var(--est-content-width);
  margin: 0 auto;
}

.page--simulator .est-view.is-hidden {
  display: none;
}

.est-page-title {
  margin: 0 0 48px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.est-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.est-block__card {
  overflow: hidden;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.est-block__head {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.est-block__num {
  display: grid;
  place-items: center;
  flex: 0 0 88px;
  width: 88px;
  min-height: 88px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  background: var(--blue);
  border-radius: 0;
}

.est-block__title {
  display: flex;
  flex: 1;
  align-items: center;
  margin: 0;
  padding: 12px 28px;
  color: #000000;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  background: #ffffff;
}

.est-block__rule {
  height: 1px;
  margin: 0;
  background: #dddddd;
}

.est-block__body {
  padding: 28px 32px 36px;
  background: #fafafa;
}

.est-block__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.est-block.is-hidden {
  display: none;
}

.est-field-group {
  margin-bottom: 40px;
}

.est-field-group:last-child {
  margin-bottom: 0;
}

.est-block__note {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.est-block__note--sub {
  margin: 12px 0 0;
  color: #555;
}

.est-video-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding: 12px 24px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  background: var(--blue);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.est-video-link:is(:hover, :focus-visible) {
  opacity: 0.88;
}

.est-subtitle {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.est-fields {
  display: grid;
  gap: 20px 24px;
}

.est-fields--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.est-fields--stack {
  grid-template-columns: 1fr;
  gap: 24px;
}

.est-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.est-field--full {
  grid-column: 1 / -1;
}

.est-field__label {
  color: #000000;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.est-field__control {
  position: relative;
  display: block;
}

.est-field__control:has(.est-field__unit) .est-field__input {
  padding-right: 48px;
}

.est-field__unit {
  position: absolute;
  top: 50%;
  right: 16px;
  color: #666666;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.est-field__input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  color: var(--black);
  font-size: 15px;
  font-family: inherit;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.est-field__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(1, 130, 232, 0.12);
}

.est-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.est-method {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 64px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  cursor: pointer;
}

.est-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.est-method__mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: #ffffff;
}

.est-method__text {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.est-method:has(input:checked) {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.est-method:has(input:checked) .est-method__mark {
  background: var(--blue);
  box-shadow: inset 0 0 0 3px #ffffff;
}

.est-calc-wrap {
  margin-top: 8px;
}

.est-calc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 16px 32px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
  font-family: inherit;
  background: var(--blue);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.est-calc-btn:is(:hover, :focus-visible) {
  opacity: 0.9;
}

.est-arrow {
  display: grid;
  place-items: center;
  margin: 32px 0 24px;
  color: #cccccc;
  font-size: 26px;
}

.est-arrow.is-hidden {
  display: none;
}

.est-result-panel {
  overflow: hidden;
  border-radius: 6px;
}

.est-result-panel.is-hidden {
  display: none;
}

.est-result-panel__head {
  margin: 0;
  padding: 18px 24px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  background: var(--blue);
}

.est-result-panel__body {
  padding: 36px 32px 40px;
  text-align: center;
  background: #eaf6fd;
}

.est-result-panel__method {
  margin: 0 0 32px;
  line-height: 1.5;
}

.est-result-panel__method-label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

.est-result-panel__method-name {
  display: block;
  font-size: clamp(21px, 3vw, 26px);
  font-weight: 900;
  line-height: 1.4;
}

.est-result-panel__price-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 520px);
  margin: 0 auto 28px;
  padding: 28px 56px;
  background: #ffffff;
  border-radius: 999px;
}

.est-result-panel__label {
  margin: 0;
  color: var(--black);
  font-size: 15px;
  font-weight: 700;
}

.est-result-panel__price {
  margin: 0;
  color: var(--blue);
  font-family: Poppins, Arial, sans-serif;
  font-size: clamp(38px, 5vw, 49px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
}

.est-result-panel__note,
.est-confirm-price__note {
  max-width: 640px;
  margin: 0 auto 24px;
  color: #666666;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
}

.est-result-panel__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.est-result-panel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 380px);
  min-height: 60px;
  padding: 14px 32px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  background: var(--blue);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.est-result-panel__cta:is(:hover, :focus-visible) {
  opacity: 0.9;
}

.est-result-panel__line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: min(100%, 380px);
  min-height: 60px;
  padding: 14px 28px 14px 32px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  background: #3db887;
  border: 1px solid #3db887;
  border-radius: 999px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.est-result-panel__line i {
  font-size: 22px;
  line-height: 1;
}

.est-result-panel__line:is(:hover, :focus-visible) {
  color: #3db887;
  background: #ffffff;
}

.est-confirm-section {
  margin-bottom: 40px;
}

.est-confirm-section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.est-confirm-section__title::before {
  flex: 0 0 4px;
  width: 4px;
  height: 28px;
  content: "";
  background: var(--blue);
}

.est-confirm-list {
  margin: 0;
}

.est-confirm-list div {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e8e8e8;
}

.est-confirm-list div:last-child {
  border-bottom: 0;
}

.est-confirm-list dt {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.est-confirm-list dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.est-confirm-list__row--inline dd {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

.est-confirm-list__row--inline dd strong {
  font-weight: 700;
}

.est-confirm-price {
  margin-bottom: 40px;
}

.est-confirm-price__label {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 17px;
  font-weight: 700;
}

.est-confirm-price__value {
  margin: 0 0 16px;
  padding: 28px 24px;
  color: var(--blue);
  font-family: Poppins, Arial, sans-serif;
  font-size: clamp(38px, 5vw, 49px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  background: #f2f2f2;
  border-radius: 4px;
}

.est-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.est-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  padding: 16px 32px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
  font-family: inherit;
  background: var(--blue);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.est-submit-btn:is(:hover, :focus-visible) {
  opacity: 0.9;
}

.est-submit-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.est-cf7-wrap {
  display: none;
}

.contact-body {
  padding-bottom: 80px;
}

.contact-form-wrap {
  width: min(100% - 52px, 840px);
  margin: 0 auto;
}

.contact-form-wrap .wpcf7 {
  width: 100%;
}

.contact-form-wrap .wpcf7-form {
  display: grid;
  gap: 20px;
}

.contact-form-wrap label {
  display: grid;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}

.contact-form-wrap .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.contact-form-wrap textarea.wpcf7-form-control {
  min-height: 160px;
  resize: vertical;
}

.contact-form-wrap .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 52px;
  margin: 12px auto 0;
  padding: 0 32px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  background: var(--blue);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.contact-form-placeholder {
  margin: 0;
  padding: 24px;
  text-align: center;
  color: #666666;
  background: #f7f7f7;
  border-radius: 8px;
}

/* 無料診断・お問い合わせ（estimate / contact）— CF7 をシミュレーター風に */
.page--estimate .est-cf7-form .wpcf7,
.page--contact .est-cf7-form .wpcf7 {
  width: 100%;
}

.page--estimate .est-cf7-form .wpcf7-form,
.page--contact .est-cf7-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page--estimate .est-cf7-form .wpcf7-form > p,
.page--contact .est-cf7-form .wpcf7-form > p {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.page--estimate .est-cf7-form label,
.page--contact .est-cf7-form label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #000000;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.page--estimate .est-cf7-form .wpcf7-form-control-wrap,
.page--contact .est-cf7-form .wpcf7-form-control-wrap {
  display: block;
}

.page--estimate .est-cf7-form .wpcf7-form-control:not(.wpcf7-submit),
.page--contact .est-cf7-form .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  color: var(--black);
  font-size: 15px;
  font-family: inherit;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page--estimate .est-cf7-form textarea.wpcf7-form-control,
.page--contact .est-cf7-form textarea.wpcf7-form-control {
  min-height: 160px;
  resize: vertical;
}

.page--estimate .est-cf7-form select.wpcf7-form-control,
.page--contact .est-cf7-form select.wpcf7-form-control {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.page--estimate .est-cf7-form .wpcf7-form-control:focus,
.page--contact .est-cf7-form .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(1, 130, 232, 0.12);
}

.page--estimate .est-cf7-form .wpcf7-form > p:has(.wpcf7-submit),
.page--contact .est-cf7-form .wpcf7-form > p:has(.wpcf7-submit) {
  gap: 0;
  margin-top: 8px;
}

.page--estimate .est-cf7-form .wpcf7-submit,
.page--contact .est-cf7-form .wpcf7-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  padding: 16px 32px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
  font-family: inherit;
  background: var(--blue);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.page--estimate .est-cf7-form .wpcf7-submit:is(:hover, :focus-visible),
.page--contact .est-cf7-form .wpcf7-submit:is(:hover, :focus-visible) {
  opacity: 0.9;
}

.page--estimate .est-cf7-form .wpcf7-not-valid-tip,
.page--contact .est-cf7-form .wpcf7-not-valid-tip {
  margin-top: 4px;
  color: #c0392b;
  font-size: 12px;
  font-weight: 500;
}

.page--estimate .est-cf7-form .wpcf7-response-output,
.page--contact .est-cf7-form .wpcf7-response-output {
  margin: 0;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  border-radius: 6px;
}

.page--estimate .est-cf7-form .wpcf7-spinner,
.page--contact .est-cf7-form .wpcf7-spinner {
  margin: 12px auto 0;
}

.est-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 44px;
  padding: 10px 24px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  background: #ffffff;
  border: 1px solid var(--blue);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.est-back-btn:is(:hover, :focus-visible) {
  color: #ffffff;
  background: var(--blue);
}

.est-video-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
}

.est-video-modal[hidden] {
  display: none;
}

.est-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.est-video-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 920px);
  padding: 28px;
  background: #ffffff;
  border-radius: 8px;
}

.est-video-modal__title {
  margin: 0 0 16px;
  font-size: 21px;
  font-weight: 700;
}

.est-video-modal__frame {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 6px;
  overflow: hidden;
}

.est-video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

body.is-est-video-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .est-hero {
    min-height: 280px;
    padding: 100px 20px 56px;
  }

  .est-hero__pill {
    padding: 14px 28px;
    font-size: 17px;
  }

  .est-body {
    padding: 40px 0 64px;
  }

  .page--simulator .est-view,
  .page--estimate .est-view,
  .page--contact .est-view,
  .page--management .est-view {
    width: min(100% - 52px, var(--est-content-width));
    padding: 0;
  }

  .est-page-title {
    margin-bottom: 32px;
    font-size: 24px;
  }

  .est-block__body {
    padding: 24px 20px 28px;
  }

  .est-field-group {
    margin-bottom: 32px;
  }

  .est-block__title {
    padding: 10px 16px;
    font-size: 17px;
  }

  .est-block__num {
    flex-basis: 64px;
    width: 64px;
    min-height: 64px;
    font-size: 23px;
  }

  .est-fields--2,
  .est-methods {
    grid-template-columns: 1fr;
  }

  .est-confirm-list div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

}

/* ========== 施工管理ページ (management.html) ========== */
.page--management.page {
  height: auto;
  min-height: auto;
  overflow: visible;
}

:root:has(.topbar.is-open) .page--management {
  overflow: visible;
}

.page--management main {
  display: block;
  width: 100%;
}

.page--management .footer {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
}

.page--management .wp-cta {
  position: relative;
  left: auto;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-height: 448px;
  margin: 0;
  padding: 80px 26px;
  transform: none;
  background: url("./images/top/cta_bg.jpg") center / cover no-repeat;
  box-sizing: border-box;
}

.page--management .wp-cta__title,
.page--management .wp-cta__mail,
.page--management .wp-cta__tel {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}

.mgmt-intro {
  margin: 0 0 48px;
  text-align: left;
}

.mgmt-intro__eyebrow {
  margin: 0 0 12px;
  color: var(--blue);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.mgmt-intro__line {
  display: block;
  width: 128px;
  height: auto;
  margin: 0 0 28px;
}

.mgmt-intro__title {
  margin: 0 0 28px;
  font-size: clamp(23px, 2.8vw, 30px);
  font-weight: 700;
  line-height: 1.55;
}

.mgmt-intro__lead p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
}

.mgmt-intro__lead p + p {
  margin-top: 20px;
}

.mgmt-block__text {
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
}

.mgmt-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
  gap: 24px;
  align-items: start;
}

.mgmt-split .mgmt-block__text {
  margin-bottom: 0;
}

.mgmt-flow {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.mgmt-flow__step {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
}

.mgmt-flow__label {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  background: var(--blue);
}

.mgmt-flow__visual {
  flex: 1;
  min-height: 140px;
  background: #ececec;
}

.mgmt-flow__visual img,
.mgmt-panel__visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  object-position: center;
}

.mgmt-flow__arrow {
  position: relative;
  flex: 0 0 24px;
  align-self: center;
  width: 24px;
  height: 2px;
  background: var(--blue);
}

.mgmt-flow__arrow::after {
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.mgmt-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
}

.mgmt-panel__label {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  background: var(--blue);
}

.mgmt-panel__visual {
  flex: 1;
  min-height: 140px;
  background: #ececec;
}

.mgmt-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .mgmt-intro {
    margin-bottom: 32px;
  }

  .mgmt-intro__title {
    font-size: 21px;
  }

  .mgmt-intro__lead p {
    font-size: 14px;
  }

  .mgmt-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mgmt-flow {
    flex-direction: column;
    gap: 12px;
  }

  .mgmt-flow__arrow {
    flex: 0 0 auto;
    width: 2px;
    height: 20px;
    margin: 0 auto;
  }

  .mgmt-flow__arrow::after {
    right: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(50%) rotate(135deg);
  }

  .page--management .wp-cta {
    min-height: auto;
    padding: 56px 20px;
  }

  .page--management .wp-cta__title {
    width: 100%;
    font-size: 21px;
    line-height: 1.5;
  }

  .page--management .wp-cta__mail,
  .page--management .wp-cta__tel {
    width: min(100%, 320px);
  }
}

/* ── スクロールフェイドイン ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    translate: 0 28px;
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
  }

  .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    translate: none;
  }
}

/* 送信完了（thank you） */
.thanks__panel {
  text-align: center;
  padding: 24px 0 48px;
}

.thanks__check {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  color: #ffffff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  background: var(--brand);
  border-radius: 50%;
}

.thanks__title {
  margin-bottom: 16px;
}

.thanks__lead {
  margin: 0 0 12px;
  color: var(--black);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.thanks__body {
  margin: 0 0 32px;
  color: #555;
  font-size: 15px;
  line-height: 1.8;
}

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 36px;
}

.thanks__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 48px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.thanks__btn--primary {
  color: #ffffff;
  background: var(--blue);
  border: 1px solid var(--blue);
}

.thanks__btn--primary:is(:hover, :focus-visible) {
  color: var(--blue);
  background: #ffffff;
}

.thanks__btn--ghost {
  color: var(--brand);
  background: #ffffff;
  border: 1px solid var(--brand);
}

.thanks__btn--ghost:is(:hover, :focus-visible) {
  color: #ffffff;
  background: var(--brand);
}

.thanks__tel-note {
  margin: 0 0 8px;
  color: #666;
  font-size: 13px;
}

.thanks__tel {
  display: inline-block;
  color: var(--brand);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .thanks__btn {
    width: 100%;
    min-width: 0;
  }
}

/* 縦フローページ：トップ用 canvas 高さを引き継がない */
body.layout-simulator .page,
body.layout-contact .page,
body.layout-estimate .page,
body.layout-thanks .page,
body.layout-waterproof .page,
body.layout-management .page,
.page--waterproof.page,
.page--management.page,
.page--simulator.page,
.page--contact.page,
.page--estimate.page,
.page--thanks.page {
  min-height: 0;
  height: auto;
}

body.layout-simulator .footer,
body.layout-contact .footer,
body.layout-estimate .footer,
body.layout-thanks .footer,
body.layout-waterproof .footer,
body.layout-management .footer,
.page--waterproof .footer,
.page--management .footer,
.page--simulator .footer,
.page--contact .footer,
.page--estimate .footer,
.page--thanks .footer {
  position: relative;
  top: auto;
  left: auto;
}

@media (min-width: 768px) {
  body.layout-simulator .footer,
  body.layout-contact .footer,
  body.layout-estimate .footer,
  body.layout-thanks .footer,
  body.layout-waterproof .footer,
  body.layout-management .footer,
  .page--waterproof .footer,
  .page--management .footer,
  .page--simulator .footer,
  .page--contact .footer,
  .page--estimate .footer,
  .page--thanks .footer {
    height: 200px;
    min-height: 200px;
  }
}