@charset "UTF-8";
/* =========================================================
   ムービングハウス事業ページ 専用CSS
   - 対象：/movinghouse/（page-movinghouse.php）
   - 前提：app.css を読み込んだ後に読み込む（後勝ち）
   - 版　：PC（1440基準）優先。SPは暫定スタック処理のみ＝別途SPデザインで詰める
   - トンマナ：ひらいHDコーポレートサイト準拠
       ネイビー #1D3E89 ／ Noto Sans JP + Noto Serif JP
       コンテナ1217px(左右40px) ／ 斜線1pxモチーフ ／ 細罫線
   ========================================================= */

:root {
  --mh-navy: #1D3E89;
  --mh-navy-deep: #0F2F70;
  --mh-navy-pale: #E7ECF6;
  --mh-ink: #222;
  --mh-ink-sub: #666;
  --mh-line: #D5D5D5;
  --mh-line-strong: #707070;
  --mh-bg-light: #FBF6F6;
  --mh-serif: "Noto Serif JP", serif;
  --mh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mh {
  color: var(--mh-ink);
  overflow-x: hidden;
}

/* ---------- 共通レイアウト ---------- */
.mh-container {
  max-width: 1217px;
  margin: 0 auto;
  padding: 0 40px;
}

.mh-container--narrow {
  max-width: 940px;
}

.mh-section {
  padding: 130px 0;
}

.mh-section--light {
  background-color: var(--mh-bg-light);
}

.mh-section--tight {
  padding-top: 0;
}

/* ---------- 見出し（斜線モチーフ＝既存サイト共通の意匠） ---------- */
.mh-heading {
  position: relative;
  padding-left: 34px;
  margin: 0 0 64px;
}

.mh-heading::before {
  content: "";
  display: block;
  width: 1px;
  height: 92px;
  background-color: var(--mh-navy);
  position: absolute;
  left: 6px;
  top: -14px;
  transform: rotate(26deg);
}

.mh-heading__en {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--mh-navy);
  line-height: 1;
  margin: 0 0 14px;
}

.mh-heading__ja {
  display: block;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--mh-ink);
  margin: 0;
}

.mh-heading__note {
  display: block;
  font-size: 15px;
  line-height: 2;
  color: var(--mh-ink-sub);
  letter-spacing: 0.08em;
  margin: 18px 0 0;
}

.mh-heading--center {
  padding-left: 0;
  text-align: center;
}

.mh-heading--center::before {
  left: calc(50% - 1px);
  top: -50px;
  height: 46px;
  transform: none;
}

.mh-subheading {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--mh-ink);
  border-left: 3px solid var(--mh-navy);
  padding: 4px 0 4px 18px;
  margin: 0 0 40px;
}

/* ---------- 本文 ---------- */
.mh-text {
  font-size: 16px;
  line-height: 2.15;
  letter-spacing: 0.09em;
  margin: 0;
}

.mh-text + .mh-text {
  margin-top: 26px;
}

.mh-text--lead {
  font-family: var(--mh-serif);
  font-size: 24px;
  line-height: 2;
  letter-spacing: 0.11em;
  font-weight: 400;
}

.mh-text--small {
  font-size: 13px;
  line-height: 1.9;
  color: var(--mh-ink-sub);
}

/* ---------- ボタン ---------- */
.mh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 320px;
  height: 68px;
  padding: 0 34px;
  background-color: var(--mh-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  transition: background-color 0.3s var(--mh-ease), color 0.3s var(--mh-ease);
}

.mh-button::after {
  content: "";
  width: 26px;
  height: 1px;
  background-color: currentColor;
  position: relative;
  transition: transform 0.3s var(--mh-ease);
}

.mh-button:hover {
  background-color: var(--mh-navy-deep);
  color: #fff;
}

.mh-button:hover::after {
  transform: translateX(6px);
}

.mh-button--invert {
  background-color: #fff;
  color: var(--mh-navy);
}

.mh-button--invert:hover {
  background-color: var(--mh-navy-pale);
  color: var(--mh-navy);
}

/* =========================================================
   ① 専用ヘッダー
   ========================================================= */
.mh-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: #fff;
  border-bottom: 1px solid var(--mh-line);
}

.mh-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.mh-header__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  transition: opacity 0.3s var(--mh-ease);
}

.mh-header__logo:hover {
  opacity: 0.6;
}

.mh-header__logo-mark {
  width: 186px;
  height: auto;
}

.mh-header__logo-text {
  width: 122px;
  height: auto;
}

.mh-header__nav {
  display: flex;
  align-items: center;
  gap: 38px;
}

.mh-header__link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.3s var(--mh-ease);
}

/* 901px幅では専用ナビ4項目＋お問い合わせボタンが収まりきらないため、
   幅に応じてロゴ・gap・文字サイズを段階的に詰める（900px以下はハンバーガーに切替） */
@media only screen and (min-width: 901px) and (max-width: 1023px) {
  .mh-header__inner {
    gap: 12px;
    padding: 0 16px;
  }
  .mh-header__logo-mark {
    width: 140px;
  }
  .mh-header__logo-text {
    display: none;
  }
  .mh-header__nav {
    gap: 10px;
  }
  .mh-header__link {
    font-size: 11px;
  }
  .mh-header__cta {
    gap: 8px;
    padding: 0 12px;
    font-size: 11px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1180px) {
  .mh-header__inner {
    gap: 20px;
    padding: 0 24px;
  }
  .mh-header__nav {
    gap: 18px;
  }
  .mh-header__link {
    font-size: 13px;
  }
  .mh-header__cta {
    padding: 0 16px;
    font-size: 12px;
  }
}

@media only screen and (min-width: 1181px) and (max-width: 1400px) {
  .mh-header__nav {
    gap: 26px;
  }
  .mh-header__link {
    font-size: 14px;
  }
}

.mh-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--mh-navy);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--mh-ease);
}

.mh-header__link:hover {
  color: var(--mh-navy);
}

.mh-header__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.mh-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 26px;
  background-color: var(--mh-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: background-color 0.3s var(--mh-ease);
}

.mh-header__cta::after {
  content: "";
  width: 18px;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.3s var(--mh-ease);
}

.mh-header__cta:hover {
  background-color: var(--mh-navy-deep);
  color: #fff;
}

.mh-header__cta:hover::after {
  transform: translateX(4px);
}

/* ---------- ハンバーガー／SPメニューパネル（900px以下でのみ表示） ---------- */
html.mh-noscroll,
html.mh-noscroll body {
  overflow: hidden;
}

.mh-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.mh-header__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--mh-navy);
  transition: transform 0.3s var(--mh-ease), opacity 0.3s var(--mh-ease);
}

.js-mh-header.is-open .mh-header__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.js-mh-header.is-open .mh-header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.js-mh-header.is-open .mh-header__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.mh-header__panel {
  display: none;
}

/* =========================================================
   ② ヒーロー
   ========================================================= */
.mh-hero {
  position: relative;
  height: calc(100vh - 92px);
  min-height: 560px;
  max-height: 760px;
  overflow: hidden;
  background-color: #0B1428;
}

.mh-hero__slides {
  position: absolute;
  inset: 0;
}

.mh-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--mh-ease);
}

.mh-hero__slide.is-active {
  opacity: 1;
}

.mh-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 7.5s linear;
}

.mh-hero__slide.is-active img {
  transform: scale(1.12);
}

.mh-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(9, 20, 46, 0.72) 0%, rgba(9, 20, 46, 0.42) 55%, rgba(9, 20, 46, 0.22) 100%);
}

.mh-hero__body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mh-hero__inner {
  max-width: 1217px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  color: #fff;
}

.mh-hero__sub {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.22em;
  margin: 0 0 26px;
}

.mh-hero__sub::before {
  content: "";
  width: 48px;
  height: 1px;
  background-color: #fff;
}

.mh-hero__main {
  font-family: var(--mh-serif);
  font-size: 62px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  margin: 0;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
}

.mh-hero__caption {
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.1em;
  margin: 34px 0 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.mh-hero__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 46px;
  display: flex;
  gap: 14px;
  z-index: 2;
}

.mh-hero__dot {
  width: 40px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s var(--mh-ease);
}

.mh-hero__dot.is-active {
  background-color: #fff;
}

.mh-hero__scroll {
  position: absolute;
  right: 56px;
  bottom: 0;
  z-index: 2;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.24em;
  writing-mode: vertical-rl;
  padding-bottom: 84px;
}

.mh-hero__scroll::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

/* =========================================================
   ③ イントロ
   ========================================================= */
.mh-intro {
  padding: 140px 0 0;
}

.mh-intro__body {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.mh-intro__lead {
  font-family: var(--mh-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.12em;
  color: var(--mh-navy);
  margin: 0 0 44px;
}

.mh-intro__body .mh-text {
  text-align: center;
}

.mh-intro__company {
  max-width: 860px;
  margin: 56px auto 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--mh-line);
  font-size: 16px;
  line-height: 2.15;
  letter-spacing: 0.09em;
  text-align: center;
  color: var(--mh-navy);
}

.mh-intro__visual {
  position: relative;
  margin: 96px auto 0;
  max-width: 1217px;
  padding: 0 40px;
}

.mh-intro__visual::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 320px;
  height: 200px;
  background-color: var(--mh-navy-pale);
  z-index: 0;
}

.mh-intro__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}

/* =========================================================
   ④ 特長
   ========================================================= */
.mh-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 70px;
  align-items: center;
}

.mh-feature + .mh-feature {
  margin-top: 120px;
}

.mh-feature--reverse .mh-feature__visual {
  order: 2;
}

.mh-feature__visual {
  position: relative;
}

.mh-feature__visual img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.mh-feature__visual::after {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--mh-navy);
  z-index: -1;
}

.mh-feature--reverse .mh-feature__visual::after {
  inset: 16px 16px -16px -16px;
}

.mh-feature__num {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mh-serif);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--mh-navy);
  margin: 0 0 18px;
}

.mh-feature__num strong {
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
}

.mh-feature__num::after {
  content: "";
  width: 56px;
  height: 1px;
  background-color: var(--mh-navy);
}

.mh-feature__title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.09em;
  margin: 0 0 20px;
}

.mh-feature__lead {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.09em;
  color: var(--mh-navy);
  margin: 0 0 22px;
}

/* 特長内のスペック表記（サイズ2種） */
.mh-spec {
  display: flex;
  gap: 20px;
  margin: 30px 0 0;
}

.mh-spec__item {
  flex: 1;
  border: 1px solid var(--mh-navy);
  padding: 20px 22px;
}

.mh-spec__label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--mh-navy);
  margin: 0 0 6px;
}

.mh-spec__value {
  display: block;
  font-family: var(--mh-serif);
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.mh-spec__value small {
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* 特長の補助図版グリッド */
.mh-figures {
  margin: 56px 0 0;
}

.mh-figures__list {
  display: grid;
  gap: 28px;
}

.mh-figures__list--2 {
  grid-template-columns: repeat(2, 1fr);
}

.mh-figures__list--4 {
  grid-template-columns: repeat(4, 1fr);
}

.mh-figures__item {
  margin: 0;
}

.mh-figures__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: #fff;
  display: block;
  border: 1px solid var(--mh-line);
}

.mh-figures__item--contain img {
  object-fit: contain;
}

.mh-figures__caption {
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-align: center;
  margin: 14px 0 0;
}

/* ---------- ユニット形状ラインナップ ---------- */
.mh-units {
  margin-top: 130px;
  padding-top: 90px;
  border-top: 1px solid var(--mh-line);
}

.mh-units__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.mh-units__item {
  margin: 0;
}

.mh-units__item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.mh-units__name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 18px 0 6px;
  color: var(--mh-navy);
}

.mh-units__desc {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--mh-ink-sub);
  margin: 0;
}

/* =========================================================
   ⑤ 360°バーチャルツアー
   ========================================================= */
.mh-tour__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.mh-tour__item {
  background-color: #fff;
  border: 1px solid var(--mh-line);
}

.mh-tour__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #EDEDEA;
  overflow: hidden;
}

.mh-tour__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mh-tour__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--mh-ink-sub);
}

.mh-tour__placeholder-icon {
  width: 62px;
  height: 62px;
  border: 1px solid var(--mh-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mh-serif);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--mh-navy);
}

.mh-tour__placeholder-text {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.mh-tour__caption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.mh-tour__index {
  font-family: var(--mh-serif);
  font-size: 20px;
  color: var(--mh-navy);
  line-height: 1;
}

.mh-tour__credit {
  margin: 30px 0 0;
  text-align: right;
}

/* =========================================================
   ⑥ 災害時応急仮設住宅
   ========================================================= */
.mh-disaster__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 70px;
  align-items: start;
}

.mh-disaster__gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin: 80px 0 0;
}

.mh-disaster__gallery figure {
  margin: 0;
  grid-column: span 2;
}

.mh-disaster__gallery figure:nth-child(1),
.mh-disaster__gallery figure:nth-child(2) {
  grid-column: span 3;
}

.mh-disaster__gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.mh-disaster__gallery figcaption {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mh-ink-sub);
  margin: 10px 0 0;
}

/* 実績表 */
.mh-record {
  margin: 100px 0 0;
}

.mh-record__hint {
  display: none;
}

.mh-record__scroll {
  overflow-x: visible;
}

.mh-record__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  letter-spacing: 0.06em;
}

.mh-record__table th,
.mh-record__table td {
  border-bottom: 1px solid var(--mh-line);
  padding: 20px 24px;
  text-align: left;
  line-height: 1.8;
  vertical-align: top;
}

.mh-record__table thead th {
  background-color: var(--mh-navy);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.1em;
  border-bottom: 0;
}

.mh-record__table tbody tr:nth-child(even) {
  background-color: #FAFAFA;
}

.mh-record__table col.is-date {
  width: 210px;
}

.mh-record__table col.is-name {
  width: 300px;
}

.mh-record__table td:first-child {
  font-weight: 500;
  color: var(--mh-navy);
  white-space: nowrap;
}

/* 協会バナー */
.mh-association {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 70px 0 0;
  padding: 34px 40px;
  border: 1px solid var(--mh-navy);
  background-color: #fff;
  transition: background-color 0.3s var(--mh-ease);
}

.mh-association:hover {
  background-color: var(--mh-navy-pale);
}

.mh-association__logo {
  flex-shrink: 0;
  height: 56px;
  width: auto;
  display: block;
}

.mh-association__text {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.08em;
  margin: 0;
}

.mh-association__name {
  display: block;
  font-size: 19px;
  font-weight: 500;
  color: var(--mh-navy);
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}

/* =========================================================
   ⑦ ユーズシーン（タブ＋スライダー）
   ========================================================= */
.mh-usage__tabs {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--mh-line);
  margin: 0 0 60px;
}

.mh-usage__tab {
  flex: 0 1 auto;
  white-space: nowrap;
  position: relative;
  background: none;
  border: 0;
  padding: 20px 16px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--mh-ink-sub);
  cursor: pointer;
  transition: color 0.3s var(--mh-ease);
}

.mh-usage__tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: var(--mh-navy);
  transform: scaleX(0);
  transition: transform 0.4s var(--mh-ease);
}

.mh-usage__tab:hover {
  color: var(--mh-navy);
}

.mh-usage__tab.is-active {
  color: var(--mh-navy);
}

.mh-usage__tab.is-active::after {
  transform: scaleX(1);
}

.mh-usage__panel {
  display: none;
}

.mh-usage__panel.is-active {
  display: block;
  animation: mhFadeUp 0.6s var(--mh-ease) both;
}

@keyframes mhFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mh-usage__head {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 0 60px;
  align-items: start;
  margin: 0 0 44px;
}

.mh-usage__catch {
  font-family: var(--mh-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--mh-navy);
  margin: 0;
}

/* スライダー */
.mh-slider {
  position: relative;
}

.mh-slider__viewport {
  overflow: hidden;
}

.mh-slider__track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s var(--mh-ease);
}

.mh-slider__item {
  flex: 0 0 calc((100% - 48px) / 3);
  margin: 0;
}

.mh-slider__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.mh-slider__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 26px 0 0;
}

.mh-slider__arrow {
  width: 52px;
  height: 52px;
  border: 1px solid var(--mh-navy);
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s var(--mh-ease);
}

.mh-slider__arrow::before,
.mh-slider__arrow::after {
  content: "";
  position: absolute;
  background-color: var(--mh-navy);
  transition: background-color 0.3s var(--mh-ease);
}

.mh-slider__arrow::before {
  left: 16px;
  top: 50%;
  width: 20px;
  height: 1px;
}

.mh-slider__arrow::after {
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--mh-navy);
  border-top: 1px solid var(--mh-navy);
  background: none;
  top: calc(50% - 5px);
  right: 15px;
  transform: rotate(45deg);
}

.mh-slider__arrow--prev {
  transform: scaleX(-1);
}

.mh-slider__arrow:hover {
  background-color: var(--mh-navy);
}

.mh-slider__arrow:hover::before {
  background-color: #fff;
}

.mh-slider__arrow:hover::after {
  border-color: #fff;
}

.mh-slider__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.mh-slider__arrow:disabled:hover {
  background-color: #fff;
}

.mh-slider__arrow:disabled:hover::before {
  background-color: var(--mh-navy);
}

.mh-slider__arrow:disabled:hover::after {
  border-color: var(--mh-navy);
}

.mh-slider__counter {
  font-family: var(--mh-serif);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--mh-ink-sub);
  margin-right: auto;
}

/* =========================================================
   ⑧ よくある質問
   ========================================================= */
.mh-faq__list {
  border-top: 1px solid var(--mh-line);
}

.mh-faq__item {
  border-bottom: 1px solid var(--mh-line);
}

.mh-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  background: none;
  border: 0;
  padding: 30px 60px 30px 4px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.7;
  text-align: left;
  color: var(--mh-ink);
  cursor: pointer;
  position: relative;
  transition: color 0.3s var(--mh-ease);
}

.mh-faq__q:hover {
  color: var(--mh-navy);
}

.mh-faq__mark {
  font-family: var(--mh-serif);
  font-size: 24px;
  line-height: 1;
  color: var(--mh-navy);
  flex-shrink: 0;
}

.mh-faq__toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}

.mh-faq__toggle::before,
.mh-faq__toggle::after {
  content: "";
  position: absolute;
  background-color: var(--mh-navy);
  left: 0;
  top: 50%;
  width: 18px;
  height: 1px;
  transition: transform 0.3s var(--mh-ease);
}

.mh-faq__toggle::after {
  transform: rotate(90deg);
}

.mh-faq__item.is-open .mh-faq__toggle::after {
  transform: rotate(0deg);
}

.mh-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--mh-ease);
}

.mh-faq__item.is-open .mh-faq__a {
  grid-template-rows: 1fr;
}

.mh-faq__a-inner {
  overflow: hidden;
}

.mh-faq__a-body {
  display: flex;
  gap: 22px;
  padding: 4px 60px 34px 4px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.08em;
  color: #444;
}

/* =========================================================
   ⑨ CTA
   ========================================================= */
.mh-cta {
  position: relative;
  background-color: var(--mh-navy);
  color: #fff;
  padding: 96px 0;
  overflow: hidden;
}

.mh-cta::before,
.mh-cta::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 380px;
  background-color: rgba(255, 255, 255, 0.22);
  transform: rotate(26deg);
}

.mh-cta::before {
  left: 8%;
  top: -110px;
}

.mh-cta::after {
  right: 10%;
  bottom: -110px;
}

.mh-cta__inner {
  position: relative;
  text-align: center;
}

.mh-cta__en {
  display: block;
  font-size: 12px;
  letter-spacing: 0.24em;
  margin: 0 0 16px;
  opacity: 0.75;
}

.mh-cta__title {
  font-family: var(--mh-serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin: 0 0 18px;
}

.mh-cta__text {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.08em;
  margin: 0 0 40px;
  opacity: 0.9;
}

/* =========================================================
   ライトボックス（各セクションのメイン画像以外のギャラリー用）
   対象：特長03/04の補助図版、ユニット形状、災害時実績ギャラリー、
        ユーズシーンのスライダー画像
   ========================================================= */
.mh-lightbox-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
}

.mh-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.mh-lightbox.is-open {
  display: flex;
}

.mh-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(9, 20, 46, 0.92);
}

.mh-lightbox__figure {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 88vw);
  max-height: 84vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mh-lightbox__img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.mh-lightbox__caption {
  margin: 16px 0 0;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-align: center;
}

.mh-lightbox__caption:empty {
  display: none;
}

.mh-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s var(--mh-ease);
}

.mh-lightbox__close:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.mh-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.3s var(--mh-ease);
}

/* → 向きの山形を基本形として作り、prevはボタンごと左右反転させる
   （既存の .mh-slider__arrow と同じ手法） */
.mh-lightbox__arrow::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: calc(50% - 5px);
  left: calc(50% - 7px);
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: rotate(45deg);
}

.mh-lightbox__arrow--prev {
  left: 24px;
  transform: translateY(-50%) scaleX(-1);
}

.mh-lightbox__arrow--next {
  right: 24px;
}

.mh-lightbox__arrow:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.mh-lightbox__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.mh-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--mh-serif);
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* =========================================================
   SP（〜900px。ヘッダーのハンバーガー切替と合わせた単一ブレークポイント）
   ========================================================= */
@media only screen and (max-width: 900px) {

  /* ---------- 共通 ---------- */
  /* app.css の body{padding-top:60px}（サイト標準ヘッダー用）が本ページの
     sticky型専用ヘッダーにも掛かってしまうため無効化 */
  body {
    padding-top: 0;
  }

  .mh-container {
    padding: 0 20px;
  }

  .mh-section {
    padding: 64px 0;
  }

  .mh-text {
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.04em;
  }

  .mh-text--lead {
    font-size: 19px;
    line-height: 1.8;
  }

  .mh-button {
    min-width: 0;
    width: 100%;
  }

  .mh-heading {
    padding-left: 18px;
    margin: 0 0 40px;
  }

  .mh-heading::before {
    height: 54px;
    top: -6px;
    left: 1px;
  }

  .mh-heading__en {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .mh-heading__ja {
    font-size: 23px;
  }

  .mh-heading__note {
    font-size: 13px;
    margin-top: 14px;
  }

  .mh-heading--center {
    padding-left: 0;
  }

  .mh-heading--center::before {
    top: -32px;
    height: 30px;
  }

  .mh-subheading {
    font-size: 18px;
    padding-left: 14px;
    margin: 0 0 28px;
  }

  /* ---------- ① ヘッダー ---------- */
  .mh-header__inner {
    height: 64px;
    padding: 0 16px;
  }

  .mh-header__nav {
    display: none;
  }

  .mh-header__logo-mark {
    width: 130px;
  }

  .mh-header__logo-text {
    display: none;
  }

  .mh-header__hamburger {
    display: flex;
  }

  .mh-header__panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 95;
    background: linear-gradient(90deg, var(--mh-navy) 0%, var(--mh-navy-deep) 100%);
    padding: max(20px, env(safe-area-inset-top)) 24px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s var(--mh-ease), opacity 0.3s var(--mh-ease), visibility 0.35s;
  }

  .js-mh-header.is-open .mh-header__panel {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mh-header__panel-close {
    display: flex;
    align-items: center;
    align-self: flex-end;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 2px;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
  }

  .mh-header__panel-close-icon {
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
  }

  .mh-header__panel-close-text {
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  .mh-header__panel-nav {
    display: flex;
    flex-direction: column;
  }

  .mh-header__panel-link {
    padding: 20px 4px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.06em;
  }

  .mh-header__panel-promo {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px dashed rgba(255, 255, 255, 0.35);
  }

  .mh-header__panel-promo-title {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
  }

  .mh-header__panel-promo-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    margin: 0;
  }

  .mh-header__panel-promo-text + .mh-header__panel-promo-text {
    margin-top: 16px;
  }

  .mh-header__panel-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    margin-top: 24px;
    background-color: #fff;
    color: var(--mh-navy);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  /* ---------- ② ヒーロー ---------- */
  .mh-hero {
    height: 440px;
    min-height: 0;
    max-height: none;
  }

  .mh-hero__inner {
    padding: 0 24px;
  }

  .mh-hero__sub {
    font-size: 12px;
    gap: 12px;
    margin: 0 0 16px;
  }

  .mh-hero__sub::before {
    width: 26px;
  }

  .mh-hero__main {
    font-size: 29px;
    line-height: 1.6;
  }

  .mh-hero__caption {
    font-size: 12px;
    line-height: 1.9;
    margin-top: 20px;
  }

  .mh-hero__dots {
    bottom: 24px;
    gap: 10px;
  }

  .mh-hero__dot {
    width: 24px;
    height: 22px;
    background-color: transparent;
    position: relative;
  }

  .mh-hero__dot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background-color: rgba(255, 255, 255, 0.4);
  }

  .mh-hero__dot.is-active {
    background-color: transparent;
  }

  .mh-hero__dot.is-active::after {
    background-color: #fff;
  }

  .mh-hero__scroll {
    display: none;
  }

  /* ---------- ③ イントロ ---------- */
  .mh-intro {
    padding-top: 64px;
  }

  .mh-intro__lead {
    font-size: 21px;
    line-height: 1.8;
  }

  .mh-intro__body .mh-text,
  .mh-intro__company {
    text-align: left;
  }

  .mh-intro__company {
    margin-top: 44px;
    padding-top: 28px;
  }

  .mh-intro__visual {
    padding: 0 20px;
    margin-top: 48px;
  }

  .mh-intro__visual::before {
    display: none;
  }

  .mh-intro__visual img {
    height: 220px;
  }

  /* ---------- ④ 特長 ---------- */
  .mh-feature,
  .mh-disaster__body,
  .mh-usage__head,
  .mh-tour__list,
  .mh-units__list {
    grid-template-columns: 1fr;
    display: grid;
    gap: 24px;
  }

  .mh-feature--reverse .mh-feature__visual {
    order: 0;
  }

  .mh-feature__visual::after {
    display: none;
  }

  .mh-feature__visual img {
    height: 220px;
  }

  .mh-feature + .mh-feature {
    margin-top: 56px;
  }

  .mh-feature__num strong {
    font-size: 30px;
  }

  .mh-feature__title {
    font-size: 21px;
  }

  .mh-feature__lead {
    font-size: 16px;
  }

  .mh-spec {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
  }

  .mh-spec__item {
    padding: 14px 16px;
  }

  .mh-spec__value {
    font-size: 21px;
  }

  .mh-figures {
    margin-top: 40px;
  }

  .mh-figures__list--2,
  .mh-figures__list--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .mh-figures__caption {
    font-size: 12px;
    margin-top: 8px;
  }

  .mh-units {
    margin-top: 56px;
    padding-top: 40px;
  }

  .mh-units__name {
    font-size: 16px;
  }

  /* ---------- ⑤ 360°バーチャルツアー ---------- */
  .mh-tour__caption {
    padding: 14px 16px;
    font-size: 14px;
  }

  .mh-tour__placeholder-icon {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }

  .mh-tour__placeholder-text {
    font-size: 11px;
  }

  /* ---------- ⑥ 災害時応急仮設住宅 ---------- */
  .mh-disaster__gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 48px;
  }

  .mh-disaster__gallery figure,
  .mh-disaster__gallery figure:nth-child(1),
  .mh-disaster__gallery figure:nth-child(2) {
    grid-column: span 1;
  }

  .mh-disaster__gallery figcaption {
    font-size: 12px;
  }

  .mh-record {
    margin-top: 56px;
  }

  .mh-record__hint {
    display: block;
    font-size: 12px;
    color: var(--mh-ink-sub);
    text-align: center;
    margin: 0 0 10px;
  }

  .mh-record__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mh-record__table {
    min-width: 640px;
    font-size: 13px;
  }

  .mh-record__table th,
  .mh-record__table td {
    padding: 12px 10px;
  }

  .mh-association {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 28px 20px;
    margin-top: 48px;
  }

  .mh-association__logo {
    height: auto;
    width: 100%;
    max-width: 240px;
  }

  .mh-association__desc {
    display: block;
    text-align: left;
  }

  /* ---------- ⑦ ユーズシーン ---------- */
  .mh-usage__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    margin: 0 -20px 40px;
    padding: 0 20px;
    scrollbar-width: none;
  }

  .mh-usage__tabs::-webkit-scrollbar {
    display: none;
  }

  .mh-usage__tab {
    font-size: 13px;
    padding: 14px 14px 16px;
  }

  .mh-usage__catch {
    font-size: 22px;
  }

  .mh-slider__item {
    flex: 0 0 100%;
  }

  .mh-slider__nav {
    margin-top: 20px;
  }

  /* ---------- ⑧ よくある質問 ---------- */
  .mh-faq__q {
    padding: 22px 38px 22px 2px;
    font-size: 15px;
    gap: 14px;
  }

  .mh-faq__a-body {
    padding: 4px 38px 24px 2px;
    font-size: 14px;
  }

  .mh-faq__toggle {
    right: 4px;
    width: 16px;
    height: 16px;
  }

  /* ---------- ⑨ CTA ---------- */
  .mh-cta {
    padding: 64px 0;
  }

  .mh-cta__title {
    font-size: 22px;
  }

  .mh-cta__text {
    font-size: 14px;
  }

  /* ---------- ライトボックス ---------- */
  .mh-lightbox__figure {
    max-width: 92vw;
    max-height: 78vh;
  }

  .mh-lightbox__img {
    max-height: 62vh;
  }

  .mh-lightbox__close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .mh-lightbox__arrow {
    width: 40px;
    height: 40px;
  }

  .mh-lightbox__arrow--prev {
    left: 8px;
  }

  .mh-lightbox__arrow--next {
    right: 8px;
  }

  .mh-lightbox__caption {
    font-size: 12px;
  }

  .mh-lightbox__counter {
    bottom: 14px;
    font-size: 12px;
  }
}