@charset "UTF-8";

/* ==========================
   Base
========================== */
:root {
  --blue: #00ABE2;
  --blue-dark: #036EB8;
  --blue-light: #B8DDEF;
  --blue-pale: #EEF6FC;
  --navy: #0F5AA1;
  --navy-dark: #02386B;
  --orange: #FC7142;
  --pink: #ec5a8c;
  --yellow: #FFDC2A;
  --yellow-dark: #e9c93a;
  --yellow-light: #FCEE21;
  --yellow-pale: #FFF9C9;
  --gold: #C9964B;
  --gray: #A6A6A6;
  --border: #E3E3E3;
  --text: #333;
  --text-sub: #555;
  --white: #fff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--white);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

h1, h2, p, ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/* 強調の点（お悩み の上の・・・） */
.dots {
  text-emphasis: filled dot var(--yellow);
  -webkit-text-emphasis: filled dot var(--yellow);
  text-emphasis-position: over right;
  -webkit-text-emphasis-position: over right;
}

/* ==========================
   Button
========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 2em;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--orange), var(--pink));
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s, transform 0.3s;
}

.btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.btn--sm {
  padding: 0.6em 1.6em;
  font-size: 1.6rem;
}

.btn__arrow {
  font-size: 0.85em;
}

/* ==========================
   Header
========================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blue);
}

.header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px;
  display: flex;
  justify-content: flex-end;
}

/* 追従するCTAボタンをゆっくり拡大・縮小させて目立たせる */
.header .btn {
  animation: btn-pulse 1.6s ease-in-out infinite;
}

@keyframes btn-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

/* 動きを減らす設定の端末では止める */
@media (prefers-reduced-motion: reduce) {
  .header .btn {
    animation: none;
  }
}

/* ==========================
   First View
========================== */
.fv {
  position: relative;
  overflow: hidden;
  padding: 200px 16px 40px;
}

.fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 下に向かって白くフェード */
.fv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 20%, rgba(240, 247, 253, 0.85) 55%, #eef6fc 80%);
}

.fv__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* 吹き出し */
.fv__balloon {
  position: relative;
  display: inline-block;
  margin: 0 0 20px -440px;
  padding: 30px 60px;
  color: var(--navy-dark);
  font-weight: 700;
  line-height: 1.3;
  transform: rotate(-8deg);
}

/* 楕円＋しっぽ（下にはみ出す分だけ高さを足す） */
.fv__balloon-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 114%;
  overflow: visible;
}

.fv__balloon-shape path {
  fill: var(--white);
  stroke: var(--text);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fv__balloon-sub,
.fv__balloon-main {
  position: relative;
  display: block;
}

.fv__balloon-sub {
  font-size: 1.3rem;
}

.fv__balloon-main {
  font-size: 2rem;
}

/* タイトル */
.fv__title {
  color: var(--navy);
  font-weight: 700;
  line-height: 1.4;
}

.fv__title-sub {
  display: block;
  font-size: clamp(1.4rem, 3.6vw, 2.8rem);
  color: var(--text);
}

/* 1行（全角17.2文字分）が画面幅に収まらないときは、収まる大きさまで縮める */
.fv__title-main {
  display: block;
  font-size: min(clamp(1.4rem, 4.4vw, 2.8rem), calc((100vw - 34px) / 17.4));
  white-space: nowrap;
}

.fv__title-main em {
  font-style: normal;
  font-size: 1.6em;
  vertical-align: -0.08em;
}

/* 価格ボックス */
.fv__price {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 24px 10px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.fv__price-label {
  font-size: 1.5rem;
  font-weight: 600;
}

/* こちらも1行（約15.4文字分）が箱に収まる大きさまで縮める */
.fv__price-main {
  font-size: min(clamp(1.4rem, 4vw, 1.9rem), calc((100vw - 62px) / 15.6));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.fv__price-main strong {
  margin: 0 0.1em;
  color: var(--orange);
  font-size: 4em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fv__price-note {
  margin-top: 8px;
  font-size: min(0.7rem, calc((100vw - 62px) / 31.5));
  color: var(--text-sub);
  white-space: nowrap;
}

/* ==========================
   Worry
========================== */
.worry {
  position: relative;
  padding: 40px 16px 130px;
  background: var(--blue-dark);
  /* 下向きの矢印型 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 50% 100%, 0 calc(100% - 90px));
}

.worry__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.worry__title {
  margin-bottom: 24px;
  color: var(--white);
  /* 1行（約13.8文字分）が画面幅に収まらないときは、収まる大きさまで縮める */
  font-size: min(1.8rem, calc((100vw - 34px) / 14));
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.worry__title .dots {
  font-size: 1.4em;
}

.worry__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.worry__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 6px;
  background: var(--white);
  border-radius: 6px;
  text-align: center;
}

.worry__icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 14px;
}

/* 最長の行（9文字）が6列のカード幅に収まる大きさまで縮め、<br>以外では折り返さない */
.worry__item p {
  font-size: min(0.9rem, calc((100vw - 154px) / 55.2));
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* 黄色の二重シェブロン */
.worry__arrow {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 100px;
  transform: translateX(-50%);
}

.worry__arrow polyline {
  fill: none;
  stroke: var(--yellow-dark);
  stroke-width: 4;
}

/* ==========================
   Solution
========================== */
.solution {
  padding: 40px 16px 70px;
  text-align: center;
}

.solution__inner {
  max-width: 800px;
  margin: 0 auto;
}

.solution__lead {
  color: var(--navy-dark);
  font-size: clamp(1.3rem, 3.8vw, 1.9rem);
  font-weight: 500;
}

.solution__name {
  font-size: 1.15em;
}

.solution__price {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 28px;
}

.solution__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  background: var(--yellow-light);
  color: var(--navy-dark);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
}

.solution__num {
  color: var(--orange);
  font-size: clamp(5rem, 12vw, 7rem);
  font-weight: 600;
  line-height: 1;
}

.solution__num small {
  font-size: 0.8em;
}

.solution__text {
  align-self: flex-end;
  padding-bottom: 0.5em;
  color: var(--navy-dark);
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  font-weight: 500;
}

/* ==========================
   Why
========================== */
.why {
  position: relative;
  overflow: hidden;
  padding: 60px 16px 80px;
}

.why__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.why__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 背景画像を白っぽく */
.why__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(238, 246, 252, 0.8) 60%, #eef6fc 100%);
}

.why__inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
}

/* 見出し */
.why__head {
  position: relative;
  padding: 60px 0 0 40px;
  margin-bottom: 60px;
}

.why__en {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: -1;
  color: var(--white);
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.why__title {
  color: var(--text);
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 40px;
}

.why__title em {
  color: var(--orange);
  font-style: normal;
  font-size: 1.25em;
}

.why__lead {
  margin-top: 4px;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 500;
}

/* フロー */
.why__flow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.why__card {
  flex: 0 1 290px;
  padding: 32px 20px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 90, 161, 0.12);
  text-align: center;
}

.why__card-title {
  margin: 0 0 16px;
  font-size: 1.3rem;
  font-weight: 500;
}

.why__card-img {
  width: 110px;
  height: 90px;
  object-fit: cover;
  margin-bottom: 16px;
}

.why__card-text {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
}

.why__card-point {
  margin-top: 16px;
  font-size: 1.1rem;
  font-weight: 700;
}

/* 中央の当社カード */
.why__card--main {
  flex-basis: 350px;
  padding: 24px 28px;
  background: var(--white);
  border: 2px solid rgba(252, 113, 66, 0.3);
  box-shadow: 0 0 24px rgba(252, 113, 66, 0.25);
}

.why__service {
  padding: 16px 12px 20px;
  border: 2px solid var(--text);
}

.why__service-title {
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 500;
}

.why__service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.why__service-list li {
  padding: 0 12px;
  background: #f0f0f0;
  border: 1px solid var(--text);
  font-size: 1rem;
}

.why__company {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 16px 0 12px;
}

.why__company-img {
  width: 96px;
  height: 80px;
  object-fit: cover;
}

.why__company-name {
  margin: 0;
  color: var(--orange);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.3em;
}

.why__company-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
}

.why__company-list span {
  margin-right: 0.2em;
  font-size: 1.3em;
}

/* 矢印 */
.why__arrow {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.why__arrow svg {
  width: 40px;
}

.why__arrow polyline {
  fill: none;
  stroke: var(--orange);
  stroke-width: 4;
}

/* ==========================
   Services
========================== */
.services {
  overflow: hidden;
  padding: 80px 16px;
}

.services__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* 見出し */
.services__head {
  position: relative;
  padding: 60px 0 0 40px;
  margin-bottom: 48px;
}

.services__en {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--blue-light);
  font-size: clamp(5rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.services__title {
  position: relative;
  color: var(--text);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 700;
  margin-top: 10px;
}

/* 共通の箱 */
.services__rental,
.services__building {
  padding: 40px 48px;
  border-radius: 6px;
  text-align: center;
}

.services__box-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
}

/* 賃貸管理業務 */
.services__rental {
  background: #ABDCF1;
}

.services__price {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
}

.services__price strong {
  margin-left: 0.1em;
  color: var(--orange);
  font-size: 3.4em;
  font-weight: 700;
}

/* 関係者の並び */
.services__actors {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr 0.8fr 1fr;
  align-items: end;
  margin-top: 24px;
}

.services__actor-name {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 500;
}

.services__actor-img {
  width: 150px;
  height: 120px;
  object-fit: contain;
}

/* SPの2段目でだけ表示する当社 */
.services__actor--sp {
  display: none;
}

/* チェックボックス */
.check {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--blue-dark);
  border-radius: 2px;
  background: transparent;
}

.check::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--blue-dark);
  border-bottom: 2px solid var(--blue-dark);
  transform: rotate(45deg);
}

/* アプリで完結 */
.services__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  align-self: center;
  margin-top: 24px;
}

/* 下のカードへ伸びる点線 */
.services__link::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  height: 72px;
  border-left: 1px dashed var(--text-sub);
}

/* 楕円＋下向きのしっぽ（しっぽ分も含めて背景SVGで描く） */
.services__bubble {
  padding: 5px 20px 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cellipse cx='50' cy='16' rx='50' ry='15.5' fill='%23036EB8'/%3E%3Cpath d='M43,29 L45,40 L53,29 Z' fill='%23036EB8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.services__link-arrow {
  width: 80px;
}

.services__link-arrow line,
.services__link-arrow polyline {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 3;
}

/* 業務カード */
.services__cards {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: start;
  gap: 12px;
  margin-top: 24px;
  text-align: left;
}

.services__card {
  position: relative;
  padding: 20px 16px;
  background: var(--white);
  border-radius: 8px;
}

.services__card + .services__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services__card > .services__item + .services__item {
  margin-top: 20px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.services__item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 500;
}

.services__item-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.services__item-text {
  font-size: 0.8rem;
  line-height: 1.6;
}

/* 緊急対応 */
.services__emergency {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 80%;
  margin: 0 auto;
  padding: 12px 16px;
  background: var(--blue-pale);
  border-radius: 6px;
}

.services__emergency-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.services__note {
  font-size: 0.6rem;
}

/* 建物管理業務 */
.services__building {
  margin-top: 12px;
  background: var(--yellow);
}

.services__building-lead {
  color: var(--orange);
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  font-weight: 600;
}

.services__building-lead span {
  display: inline-block;
}

.services__building-text {
  font-size: 0.9rem;
  line-height: 1.5;
}

.services__building-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.services__building-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 16px 8px;
  background: var(--white);
  font-size: 1.2rem;
  font-weight: 500;
}

.services__building-list img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

/* ==========================
   Network
========================== */
.network {
  overflow: hidden;
  padding: 80px 16px;
  background: var(--blue-pale);
}

.network__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* 見出し */
.network__head {
  position: relative;
  padding: 60px 0 0 8px;
  margin-bottom: 48px;
}

.network__en {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--blue-light);
  font-size: clamp(5rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.network__title {
  position: relative;
  color: var(--text);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  margin-top: 10px;
}

.network__catch {
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.5;
}

.network__area {
  margin-top: 16px;
  font-size:  1rem;
  font-weight: 700;
}

/* 店舗一覧と地図 */
.network__body {
  display: grid;
  grid-template-columns: 1fr 340px;
  align-items: end;
  gap: 24px;
  margin-top: 40px;
  align-items: start;
}

.network__shops-title {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--text-sub);
  font-size: 1.4rem;
  font-weight: 700;
}

.network__list {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.9;
}

.network__list strong {
  font-weight: 700;
}

.network__map {
  width: 100%;
  aspect-ratio: 991 / 769;
  object-fit: contain;
}

.network__notes {
  margin-top: 16px;
  font-size: 0.7rem;
  line-height: 1.7;
}

/* ==========================
   Merit
========================== */
.merit {
  overflow: hidden;
  padding: 80px 16px;
  background: var(--blue-dark);
}

.merit__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* 見出し */
.merit__head {
  position: relative;
  padding: 60px 0 0 8px;
  margin-bottom: 64px;
}

.merit__en {
  position: absolute;
  top: 0;
  left: 0px;
  color: rgba(255, 255, 255, 0.35);
  font-size: clamp(5rem, 14vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.merit__title {
  position: relative;
  color: var(--white);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 500;
}

/* カード */
.merit__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.merit__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 16px 24px;
  background: var(--blue-pale);
  border-radius: 6px;
  text-align: center;
}

.merit__num {
  position: absolute;
  top: -40px;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 2.2rem;
  font-weight: 500;
  transform: translateX(-50%);
}

.merit__card-title {
  display: flex;
  align-items: center;
  min-height: 2.8em;
  margin: 0 0 24px;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.4;
}

.merit__img {
  width: 180px;
  height: 150px;
  object-fit: cover;
  margin-bottom: 24px;
}

.merit__text {
  font-size: 1.05rem;
  line-height: 1.6;
}

.merit__point {
  margin-top: 16px;
  font-size: 1.1rem;
  font-weight: 700;
}

/* 従来 → 当社 */
.merit__compare {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.merit__compare-box {
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid #ddd;
  font-size: 0.85rem;
  line-height: 1.4;
}

.merit__compare-box span {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
}

.merit__compare-box--ours {
  background: #f2f2f2;
  border: 3px solid var(--navy-dark);
}

.merit__compare-arrow {
  color: var(--navy-dark);
  font-size: 1.6rem;
}

.merit__note {
  margin-top: 12px;
  font-size: 0.65rem;
}

.merit__cta {
  margin-top: 48px;
  text-align: center;
}

/* ==========================
   Simulation
========================== */
.sim {
  position: relative;
  overflow: hidden;
  padding: 80px 16px;
}

.sim__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 背景画像は上端と下端に1枚ずつ置き、中央に向かって消えていく */
.sim__bg-img {
  position: absolute;
  left: 0;
  width: 100%;
  height: max(43.5vw, 320px);
  object-fit: cover;
}

.sim__bg-img--top {
  top: 0;
  object-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}

.sim__bg-img--bottom {
  bottom: 0;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(0deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 45%, transparent 100%);
}

/* 背景画像を白っぽく */
.sim__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(238, 246, 252, 0.55);
}

.sim__inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
}

/* 見出し */
.sim__head {
  position: relative;
  padding: 60px 0 0 8px;
  margin-bottom: 48px;
}

.sim__en {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: var(--white);
  font-size: clamp(5rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sim__title {
  color: var(--text);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
}

.sim__title span {
  color: var(--orange);
}

/* ケース */
.sim__case + .sim__case {
  margin-top: 64px;
}

.sim__case-title {
  margin: 0 0 20px;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: 500;
  text-align: center;
}

.sim__case-title span + span {
  margin-left: 1em;
}

/* 表 */
.sim__table-wrap {
  /* 右の差額列（12%）と同じ幅を左に空け、表本体を中央に寄せる */
  padding-left: 10.7%;
  overflow-x: auto;
}

.sim__table {
  width: 100%;
  min-width: 600px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  text-align: center;
}

.sim__table th,
.sim__table td {
  /* 行の高さを吹き出しより大きくして、上下の吹き出しが重ならないようにする */
  padding: 16px 8px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  line-height: 1.4;
}

.sim__table td {
  border-left: 1px solid var(--border);
}

.sim__table tbody th {
  width: 34%;
  color: var(--blue-dark);
  font-size: 0.9rem;
}

.sim__table small {
  display: block;
  font-size: 0.55rem;
}

/* 見出し行（After だけ背が高い） */
.sim__table thead th {
  border-top: 12px solid transparent;
  background-clip: padding-box;
  color: var(--blue-dark);
}

.sim__table thead .sim__before {
  width: 27%;
  background: var(--gray);
  color: var(--white);
}

.sim__table thead .sim__after {
  width: 27%;
  border-top: 0;
  border-radius: 4px 4px 0 0;
  background: var(--orange);
  color: var(--white);
  font-size: 1.3rem;
}

/* After列 */
.sim__table tbody .sim__after {
  position: relative;
  padding-left: 28px;
  background: var(--yellow-pale);
  color: var(--orange);
}

/* Before → After の ≫ */
.sim__table tbody .sim__after::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 20px;
  height: 20px;
  background: var(--yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 2l7 8-7 8M10 2l7 8-7 8' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 2l7 8-7 8M10 2l7 8-7 8' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateY(-50%);
}

.sim__table .sim__same {
  background: var(--yellow-pale);
}

/* 差額の吹き出し（After列の右端に重ねる） */
.sim__table .sim__diff {
  position: relative;
  width: 12%;
  padding: 0;
  background: none;
  border: 0;
}

.sim__balloon {
  position: absolute;
  bottom: 35%;
  left: -40px;
  z-index: 1;
  padding: 5px 16px 14px 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M32.56,47.75 A46,24 0 1,0 16.76,41.43 L4,57 Z' fill='white' stroke='%23333' stroke-width='1' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.sim__balloon small {
  color: var(--text);
  font-size: 0.55rem;
  font-weight: 700;
}

/* 結果 */
.sim__result {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.sim__result-box {
  flex: 0 1 210px;
  padding: 16px 12px;
  background: var(--blue-pale);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.sim__result-box small {
  display: block;
  font-size: 0.6rem;
}

.sim__result-box strong {
  display: block;
  margin-top: 4px;
  color: var(--blue-dark);
  font-size: 1.6rem;
  font-weight: 700;
}

.sim__result-box--total {
  background: var(--white);
  border: 2px solid var(--gold);
  color: var(--orange);
}

.sim__result-box--total strong {
  color: var(--gold);
}

.sim__note {
  margin-top: 16px;
  font-size: 0.65rem;
  text-align: center;
}

/* ==========================
   Step
========================== */
.step {
  overflow: hidden;
  padding: 80px 16px;
  background: var(--blue-light);
}

.step__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* 見出し */
.step__head {
  position: relative;
  padding: 60px 0 0 8px;
  margin-bottom: 80px;
}

.step__en {
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(5rem, 14vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.step__title {
  position: relative;
  color: var(--text);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 500;
}

/* カードの並び */
.step__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step__card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 4px 32px;
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(252, 113, 66, 0.35);
  text-align: center;
}

.step__label {
  padding: 0 10px;
  background: var(--orange);
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
}

.step__card-title {
  margin: 4px 0 24px;
  color: var(--orange);
  font-size: 1.45rem;
  font-weight: 500;
}

.step__img {
  width: 110px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 24px;
}

.step__text {
  display: flex;
  align-items: center;
  flex-grow: 1;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* STEP3の吹き出し */
.step__balloon {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  width: 230px;
  padding: 20px 0;
  background: var(--blue-dark);
  border-radius: 50%;
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  transform: translateX(-50%);
}

.step__balloon::after {
  content: "";
  position: absolute;
  top: calc(100% - 4px);
  left: 38%;
  border-top: 30px solid var(--blue-dark);
  border-left: 14px solid transparent;
}

/* 矢印 */
.step__arrow {
  flex-shrink: 0;
  align-self: center;
}

.step__arrow svg {
  display: block;
  width: 28px;
}

.step__arrow polyline {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
}

.step__cta {
  margin-top: 64px;
  text-align: center;
}

/* ==========================
   Q&A
========================== */
.qa {
  overflow: hidden;
  padding: 80px 16px;
}

.qa__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* 見出し */
.qa__head {
  position: relative;
  padding: 60px 0 0 8px;
  margin-bottom: 48px;
}

.qa__en {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--blue-light);
  font-size: clamp(5rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.qa__title {
  position: relative;
  color: var(--orange);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
}

/* 質問と回答 */
.qa__item {
  border: 1px solid var(--blue-dark);
}

.qa__item + .qa__item {
  margin-top: 20px;
}

.qa__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 64px 16px 36px;
  background: var(--white);
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.qa__q::-webkit-details-marker {
  display: none;
}

/* ＋ アイコン（開くと − になる） */
.qa__q::before,
.qa__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 22px;
  height: 1px;
  background: var(--text);
  transition: transform 0.3s;
}

.qa__q::after {
  transform: rotate(90deg);
}

.qa__item[open] .qa__q::after {
  transform: rotate(0deg);
}

.qa__mark {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background: var(--blue-dark);
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

.qa__a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 28px 16px 36px;
  background: var(--blue-dark);
  color: var(--white);
}

.qa__a .qa__mark {
  margin-top: 2px;
  background: var(--white);
  color: var(--blue-dark);
}

.qa__a p {
  font-size: 0.9rem;
  line-height: 1.9;
}

.qa__a small {
  display: block;
  font-size: 0.6rem;
  line-height: 1.5;
}

/* ==========================
   CTA
========================== */
.cta {
  position: relative;
  overflow: hidden;
  padding: 60px 16px;
  text-align: center;
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 背景画像を白っぽく */
.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.cta__label {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 500;
}

.cta__price {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.cta__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background: var(--yellow-light);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 500;
}

.cta__num {
  color: var(--orange);
  font-size: clamp(4.5rem, 14vw, 8rem);
  font-weight: 500;
  line-height: 1;
}

.cta__num small {
  font-size: 0.9em;
}

.cta__text {
  align-self: flex-end;
  padding-bottom: 0.4em;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  font-weight: 500;
}

.cta__lead {
  margin: 12px 0 28px;
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  font-weight: 500;
}

.btn--lg {
  padding: 0.8em 3em;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
}

/* ==========================
   Company
========================== */
.company {
  overflow: hidden;
  padding: 80px 16px;
}

.company__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* 見出し */
.company__head {
  position: relative;
  padding: 60px 0 0 8px;
  margin-bottom: 80px;
}

.company__en {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--blue-light);
  font-size: clamp(5rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.company__title {
  position: relative;
  color: var(--text);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 500;
}

/* 会社情報 */
.company__list {
  max-width: 640px;
  margin: 0 auto;
}

.company__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
}

.company__row + .company__row {
  margin-top: 20px;
}

.company__row dt {
  font-size: 1rem;
  text-align: center;
}

.company__row dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

/* ==========================
   Footer
========================== */
.footer {
  padding: 80px 16px 12px;
  background: var(--blue);
  color: var(--white);
}

.footer__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: 0.75rem;
}

.footer__link {
  color: var(--white);
  transition: opacity 0.3s;
}

.footer__link:hover {
  opacity: 0.7;
}

/* 区切りの縦線 */
.footer__link::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 16px;
  background: rgba(255, 255, 255, 0.6);
  vertical-align: -0.15em;
}

.footer__copy {
  font-size: inherit;
}

.footer__copy a {
  color: inherit;
  transition: opacity 0.3s;
}

.footer__copy a:hover {
  opacity: 0.7;
}

/* ==========================
   Responsive
========================== */
@media (max-width: 768px) {
  /* ヘッダーを画面下に固定 */
  body {
    padding-bottom: calc(123px + env(safe-area-inset-bottom));
  }

  .header {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .header__inner {
    padding: 30px 16px;
    justify-content: center;
  }

  /* 狭い画面では文字を縮めて1行に収める */
  .header .btn--sm {
    justify-content: center;
    font-size: min(1.4rem, 5.6vw);
  }

  /* FV上部にヘッダーと同じ水色の帯を敷く（上余白は帯の高さ＋40px） */
  .fv {
    padding-top: calc(14vw + 40px);
  }

  .fv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 14vw;
    background: var(--blue);
  }

  .fv__balloon {
    margin-left: -140px;
    padding: 14px 26px;
  }

  .fv__balloon-main {
    font-size: 1.15rem;
  }

  .fv__price {
    padding: 12px 14px 8px;
  }

  .fv__price-label {
    font-size: 1.05rem;
  }

  .fv__price-main strong {
    font-size: 3em;
  }

  .worry__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .worry__item {
    padding: 12px 2px;
  }

  /* 3列のカード幅に合わせて同じように縮める */
  .worry__item p {
    font-size: min(0.75rem, calc((100vw - 60px) / 27.6));
  }

  /* Why：縦並びにし、見出しは左寄せ、左右のカードは画像＋テキストの横並び */
  .why__head {
    padding: 30px 0 0;
    margin-bottom: 40px;
  }

  .why__en {
    left: 0;
  }

  .why__title {
    font-size: min(5.6vw, 1.9rem);
    white-space: nowrap;
  }

  .why__lead {
    font-size: min(3.9vw, 1.25rem);
  }

  .why__flow {
    flex-direction: column;
    gap: 5px;
  }

  .why__card {
    flex-basis: auto;
    width: 100%;
  }

  .why__card:not(.why__card--main) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    max-width: 300px;
    padding: 10px 14px 10px;
    text-align: left;
  }

  .why__card:not(.why__card--main) .why__card-title {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    font-size: 1.15rem;
    text-align: center;
  }

  .why__card:not(.why__card--main) .why__card-img {
    grid-row: 2 / 4;
    width: 80px;
    height: 66px;
    margin-bottom: 0;
  }

  .why__card:not(.why__card--main) .why__card-text {
    align-self: end;
    font-size: 0.85rem;
  }

  .why__card:not(.why__card--main) .why__card-point {
    align-self: start;
    margin-top: 4px;
    font-size: 1rem;
  }

  /* 当社カードは縦長にならないよう、4つのサービスを1行に並べて余白を詰める */
  .why__card--main {
    max-width: 320px;
    padding: 14px 20px 16px;
  }

  .why__service {
    padding: 8px 6px 10px;
  }

  .why__service-title {
    margin-bottom: 6px;
  }

  .why__service-list {
    gap: 6px;
  }

  .why__service-list li {
    padding: 0 8px;
    font-size: 0.95rem;
  }

  .why__company {
    gap: 12px;
    margin: 6px 0;
  }

  .why__company-img {
    width: 72px;
    height: 60px;
  }

  .why__card--main .why__card-point {
    margin-top: 10px;
  }

  .why__arrow {
    flex-direction: row;
  }

  .why__arrow svg {
    width: 32px;
    transform: rotate(90deg);
  }

  .why__arrow br {
    display: none;
  }

  /* Services：関係者2者＋カードを1組として縦に2組並べる */
  .services__head {
    padding: 9vw 0 0 12px;
    margin-bottom: 24px;
  }

  .services {
    padding: 80px 40px;
  }

  .services__en {
    font-size: 13vw;
  }

  .services__rental,
  .services__building {
    padding: 32px 16px;
  }

  /* 関係者の列は最大150px。広い画面では中央に寄せ、カードは全幅に広げる */
  .services__rental {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 150px) auto minmax(0, 150px) minmax(0, 1fr);
    align-items: end;
  }

  .services__box-title,
  .services__price,
  .services__card {
    grid-column: 1 / -1;
  }

  .services__price strong {
    display: block;
    margin-left: 0;
    line-height: 1.1;
  }

  /* 中身を親のグリッドに直接並べる */
  .services__actors,
  .services__cards {
    display: contents;
  }

  .services__actor--sp {
    display: block;
  }

  .services__actor,
  .services__link {
    margin-top: 20px;
  }

  /* 名前が長くても列幅を広げず、1行のまま中央に置く */
  .services__actor {
    min-width: 0;
  }

  .services__actor-name {
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .services__actor-img {
    width: 96px;
    height: 80px;
  }

  .services__link {
    align-self: end;
    margin-bottom: 36px;
  }

  .services__bubble {
    padding: 4px 14px 10px;
    font-size: 0.65rem;
  }

  .services__link-arrow {
    width: 64px;
  }

  /* カードへ伸びる点線 */
  .services__link::after {
    top: calc(100% + 4px);
    height: 44px;
  }

  .services__card {
    margin-top: 12px;
    padding: 20px 35px;
  }

  /* 並び順：オーナー様 ⇄ 当社 → カード1、当社 ⇄ 入居者様 → カード2 */
  .services__actors > :nth-child(1) { order: 1; }
  .services__actors > :nth-child(2) { order: 2; }
  .services__actors > :nth-child(3) { order: 3; }
  .services__cards > :nth-child(1) { order: 4; }
  .services__actors > :nth-child(4) { order: 5; }
  .services__actors > :nth-child(5) { order: 6; }
  .services__actors > :nth-child(6) { order: 7; }
  .services__cards > :nth-child(2) { order: 8; }

  .services__actors > :nth-child(n + 4) {
    margin-top: 32px;
  }

  /* 左の関係者・矢印・右の関係者を中央の3列に置く */
  .services__actors > :nth-child(3n + 1) { grid-column: 2; }
  .services__actors > :nth-child(3n + 2) { grid-column: 3; }
  .services__actors > :nth-child(3n) { grid-column: 4; }

  .services__emergency {
    width: 100%;
  }

  .services__item-icon {
    width: 40px;
    height: 40px;
  }

  /* 建物管理業務 */
  .services__building-lead {
    font-size: min(6.2vw, 1.95rem);
    line-height: 1.4;
  }

  .services__building-text {
    margin-top: 16px;
    text-align: left;
  }

  .services__building-text br {
    display: none;
  }

  .services__building-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .services__building-list li {
    gap: 8px;
    padding: 14px 4px;
    font-size: 1rem;

  }

  .services__building-list img {
    width: 40px;
    height: 40px;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }
  .network__body {
    grid-template-columns: 1fr;
  }

  .network__map {
    order: -1;
    max-width: 340px;
    margin: 0 auto;
  }

  /* Merit：タイトルの下を「左に画像・右にテキスト」の横並びにする */
  .merit__head {
    padding-left: 24px;
    margin-bottom: 72px;
  }

  .merit__en {
    left: 0;
  }

  .merit__list {
    grid-template-columns: 1fr;
    gap: 56px;
    max-width: 420px;
    margin: 0 auto;
  }

  .merit__card {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: center;
    align-items: center;
    column-gap: 14px;
    padding: 52px 16px 24px;
  }

  .merit__card-title,
  .merit__compare,
  .merit__point,
  .merit__note {
    grid-column: 1 / -1;
  }

  .merit__card-title {
    min-height: 0;
    margin-bottom: 12px;
    font-size: 1.25rem;
  }

  .merit__card-title br,
  .merit__text br {
    display: none;
  }

  .merit__img {
    width: 96px;
    height: 80px;
    margin-bottom: 0;
  }

  .merit__text {
    justify-self: start;
    font-size: 1rem;
    text-align: left;
  }

  .merit__compare {
    margin-top: 16px;
  }

  .merit__point {
    font-size: 1.2rem;
  }

  .merit__note {
    margin-top: 8px;
  }

  .merit__cta .btn {
    font-size: 1.1rem;
  }

  /* Step：縦並びにし、ラベル＋タイトルの下を「左に画像・右にテキスト」の横並びにする */
  .step__head {
    margin-bottom: 56px;
  }

  .step__list {
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }

  .step__card {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 10px 24px;
    width: 100%;
    max-width: 480px;
    flex: none;
    padding: 22px 28px 26px;
  }

  .step__label {
    justify-self: center;
    font-size: 1rem;
  }

  .step__card-title {
    justify-self: start;
    margin: 0;
    font-size: 1.5rem;
  }

  .step__img {
    justify-self: center;
    width: 104px;
    height: 92px;
    margin-bottom: 0;
  }

  .step__text {
    display: block;
    font-size: 1.05rem;
    text-align: left;
  }

  .step__text br {
    display: none;
  }

  /* STEP3の吹き出し：カード右上に重ねる */
  .step__balloon {
    top: -46px;
    right: -12px;
    bottom: auto;
    left: auto;
    width: 170px;
    padding: 12px 0;
    font-size: 0.8rem;
    transform: none;
  }

  .step__balloon::after {
    top: calc(100% - 4px);
    left: 34%;
    border-top: 20px solid var(--blue-dark);
    border-right: 14px solid transparent;
    border-left: 0;
  }

  .step__arrow {
    margin: 14px 0;
  }

  .step__arrow svg {
    width: 48px;
    transform: rotate(90deg);
  }

  .step__cta {
    margin-top: 48px;
  }

  .step__cta .btn {
    font-size: 1.25rem;
  }

  .qa__q {
    gap: 12px;
    padding: 14px 52px 14px 16px;
    font-size: 1rem;
  }

  .qa__q::before,
  .qa__q::after {
    right: 18px;
    width: 18px;
  }

  .qa__a {
    gap: 12px;
    padding: 14px 16px;
  }

  .company__row {
    grid-template-columns: 96px 1fr;
  }

  .company__row dt {
    text-align: left;
  }

  /* Simulation：横スクロールさせず、表を画面幅に収める */
  .sim__head {
    padding-top: 8vw;
    margin-bottom: 32px;
  }

  .sim {
    padding: 80px 30px;
  }

  .sim__en {
    font-size: 12.5vw;
  }

  .sim__case + .sim__case {
    margin-top: 48px;
  }

  .sim__case-title {
    font-size: 1.05rem;
    line-height: 1.4;
  }

  .sim__case-title span {
    display: block;
  }

  .sim__case-title span + span {
    margin-left: 0;
  }

  .sim__table-wrap {
    padding-left: 0;
    overflow: visible;
  }

  .sim__table {
    min-width: 0;
    table-layout: fixed;
    font-size: 0.8rem;
  }

  .sim__table th,
  .sim__table td {
    padding: 9px 2px;
  }

  .sim__table thead th:first-child {
    width: 36%;
  }

  .sim__table thead .sim__before {
    width: 30%;
  }

  .sim__table thead .sim__after {
    width: 34%;
    font-size: 1.1rem;
  }

  .sim__table tbody th {
    font-size: 0.72rem;
  }

  .sim__table small {
    font-size: 0.5rem;
  }

  .sim__table tbody .sim__after {
    padding-left: 16px;
  }

  .sim__table tbody .sim__after::before {
    left: 2px;
    width: 14px;
    height: 14px;
  }

  /* 差額列は幅を取らず、吹き出しをAfter列の右端に重ねる */
  .sim__table .sim__diff {
    width: 0;
  }

  .sim__balloon {
    right: -10px;
    bottom: 55%;
    left: auto;
    padding: 3px 8px 9px 13px;
    font-size: 0.8rem;
  }

  .sim__balloon small {
    font-size: 0.45rem;
  }

  .sim__result {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 16px;
  }

  .sim__result-box {
    flex: 1 1 0;
    max-width: 240px;
    padding: 10px 4px;
    font-size: 0.8rem;
  }

  .sim__result-box strong {
    font-size: 1.35rem;
  }

  .sim__note {
    margin-top: 12px;
    font-size: 0.6rem;
    text-align: left;
  }
}

@media (max-width: 500px) {
  /* 帯の下に背景のイラストが見える余白を取る */
  .fv {
    padding-top: calc(16vw + 28vw);
  }

  /* 吹き出しは左寄せ */
  .fv__balloon {
    display: block;
    width: fit-content;
    margin: 0 0 16px;
  }

  .fv__balloon-sub {
    font-size: 0.8rem;
  }

  .fv__balloon-main {
    font-size: 1.05rem;
  }

  .solution__badge {
    font-size: 1rem;
  }

  /* Network：見出しとキャッチを画面幅に収める */
  .network__head {
    padding-top: 9vw;
    margin-bottom: 40px;
  }

  .network__en {
    font-size: 11.5vw;
  }

  .network__catch {
    font-size: 5vw;
  }

  .network__area {
    margin-top: 12px;
    font-size: 0.9rem;
    font-weight: 500;
  }

  .network__body {
    gap: 16px;
    margin-top: 24px;
  }

  .network__shops-title {
    padding-left: 16px;
  }

  .network__list {
    padding: 0 8px;
    font-size: 1rem;
  }

  .network__notes {
    padding: 0 8px;
  }

  /* Step：500px以下はひと回り小さく */
  .step__card {
    grid-template-columns: 76px 1fr;
    gap: 8px 16px;
    max-width: 310px;
    padding: 14px 16px 18px;
  }

  .step__label {
    font-size: 0.9rem;
  }

  .step__card-title {
    font-size: 1.25rem;
  }

  .step__img {
    width: 72px;
    height: 64px;
  }

  .step__text {
    font-size: 0.9rem;
  }

  .step__balloon {
    top: -34px;
    right: -24px;
    width: 126px;
    padding: 8px 0;
    font-size: 0.6rem;
  }

  .step__balloon::after {
    border-top-width: 16px;
    border-right-width: 12px;
  }

  .step__arrow {
    margin: 10px 0;
  }

  .step__arrow svg {
    width: 40px;
  }

  .step__cta .btn {
    font-size: 1.1rem;
  }
}