/* ==================================================
   ケアタクシー アラジン
   トップページ専用CSS
================================================== */

/* ==================================================
   基本設定
================================================== */

:root {
  --navy: #0d2b45;
  --navy-dark: #081f33;
  --blue-gray: #6f879a;
  --blue-gray-dark: #526b7e;
  --light-gray: #f3f6f8;
  --border-gray: #dce4e9;
  --text: #263746;
  --text-light: #5d6b76;
  --white: #ffffff;
  --shadow: 0 14px 35px rgba(13, 43, 69, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;

  color: var(--text);
  background: var(--white);
  line-height: 1.8;
  letter-spacing: 0.03em;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

.section {
  padding: 110px 0;
}

.section-inner {
  width: min(1120px, 90%);
  margin: 0 auto;
}

.section-label {
  margin-bottom: 8px;
  color: var(--blue-gray);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
}

.section-title {
  color: var(--navy);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.5;
  text-align: center;
}

.title-line {
  width: 68px;
  height: 4px;
  margin: 24px auto 45px;
  background: var(--blue-gray);
  border-radius: 999px;
}

.section-description {
  max-width: 780px;
  margin: 0 auto 45px;
  color: var(--text-light);
  font-size: 17px;
  text-align: center;
}

.mobile-break {
  display: none;
}

/* ==================================================
   ヘッダー
================================================== */


.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100%;
  background: #0d2b45;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
}

.header-inner {
  width: min(1280px, 94%);
  height: 88px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.header-brand {
  flex-shrink: 0;
  text-decoration: none;
}

.header-logo {
  width: 230px;
  max-height: 70px;
  object-fit: contain;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.main-nav a {
  position: relative;

  color: #ffffff;

  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -7px;

  width: 0;
  height: 2px;

  background: #ffffff;

  transition: width 0.25s ease;
}

.main-nav a:hover::after {
  width: 100%;
}

.header-phone {
  display: flex;
  flex-direction: column;
  align-items: center;

  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.phone-number {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.phone-hours {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.03em;
}


/* ==================================================
   ハンバーガーメニュー
================================================== */

.menu-button {
  display: none;

  width: 48px;
  height: 48px;
  padding: 9px;

  background: transparent;
  border: 0;

  cursor: pointer;
}

.menu-button span {
  display: block;

  width: 100%;
  height: 3px;
  margin: 6px 0;

  background: #ffffff;
  border-radius: 999px;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.menu-button.is-open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.menu-button.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-button.is-open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}


/* ==================================================
   ヒーロー全体
================================================== */

.hero {
  position: relative;

  min-height: 850px;
  padding-top: 88px;

  background-image: url("images/hero-bg.JPEG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;

  overflow: hidden;
}

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  background: transparent;

  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;

  width: min(1240px, 92%);
  min-height: 762px;
  margin: 0 auto;
}


/* ==================================================
   左上：キャッチコピー
================================================== */

.hero-message {
  position: absolute;
  top: 75px;
  left: 0;

  width: 58%;
  max-width: 720px;
}

.hero-main-copy {
  margin: 0;

  color: #0d2b45;

  font-size: clamp(42px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.07em;

  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.45);
}

.hero-copy-line {
  width: 290px;
  height: 1px;
  margin: 18px 0;
  background: rgba(13, 43, 69, 0.65);
}

.hero-sub-copy {
  margin: 0;

  color: #0d2b45;

  font-size: 21px;
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: 0.04em;

  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.45);
}


/* ==================================================
   右上：24時間・ロゴ
================================================== */

.hero-brand-area {
  position: absolute;
  top: 60px;
  right: 0;

  width: 470px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.always-open {
  position: relative;

  width: 100%;
  height: 105px;

  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.always-open span {
  position: relative;
  z-index: 2;
  margin-top: 0;
  color: #ffffff;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.03em;
  white-space: nowrap;
  -webkit-text-stroke: 1.2px #0d2b45;
  paint-order: stroke fill;
  text-shadow: 0 2px 5px rgba(13, 43, 69, 0.28);
}

.magic-line {
  position: absolute;
  z-index: 1;
  left: 5%;
  top: 28px;
  width: 90%;
  height: 80px;
  object-fit: contain;
  pointer-events: none;
}

.hero-logo {
  width: 300px;
  max-height: 150px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}


/* ==================================================
   左下：兵庫県地図
================================================== */

.hero-area-group {
  position: absolute;
  left: -48px;
  bottom: 2px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.hyogo-map-box {
  position: relative;

  width: 270px;
  height: 305px;

  flex-shrink: 0;
}

.hyogo-map {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.36;
  filter:
    brightness(1.55)
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.2));
}

.hyogo-title {
  position: absolute;
  left: 50%;
  top: 53%;

  transform: translate(-50%, -50%);

  color: #0d2b45;

  font-size: 29px;
  font-weight: 800;
  white-space: nowrap;

  text-shadow:
    0 1px 3px rgba(255, 255, 255, 0.9);
}

.akashi-star {
  position: absolute;
  left: 72%;
  bottom: 66px;
  transform: translateX(-50%);
  color: #ffc400;
  font-size: 48px;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(255, 196, 0, 0.5),
    0 3px 5px rgba(0, 0, 0, 0.25);
}

.service-area-box {
  position: relative;
  left: -28px;
  top: 14px;
  width: 345px;
  padding: 18px 22px;
  color: #ffffff;
  background: rgba(8, 31, 51, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(3px);
}

.service-area-box p {
  margin: 0;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}

.service-area-box .area-emphasis {
  color: #ffd52e;
  font-size: 18px;
}


/* ==================================================
   右下：30秒ワッペン
================================================== */

.hero-action-group {
  position: absolute;
  right: 0;
  bottom: 45px;

  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.quick-price-circle {
  position: relative;

  width: 205px;
  height: 205px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.91);

  border: 9px solid #cbd2da;
  border-radius: 50%;

  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.25);

  overflow: hidden;
}

.quick-price-circle::after {
  content: "";

  position: absolute;
  inset: 8px;

  border: 1px solid rgba(13, 43, 69, 0.25);
  border-radius: 50%;
}

.quick-price-genie {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -3px;
  width: 150px;
  height: 175px;
  transform: translateX(-50%);
  object-fit: contain;
  opacity: 0.22;
}

.quick-price-content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: #0d2b45;
}

.quick-price-shortest {
  margin-bottom: -10px;

  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.quick-price-number-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.quick-price-number-row strong {
  font-size: 78px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.quick-price-number-row span {
  margin: 0 0 10px 5px;

  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
}

.quick-price-content small {
  margin-top: 2px;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}


/* ==================================================
   右下：ボタン
================================================== */

.hero-buttons {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-button {
  min-height: 68px;
  padding: 14px 24px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  color: #ffffff;

  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;

  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.25);

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.hero-button:hover {
  transform: translateY(-4px);
  filter: brightness(1.08);
}

.simulation-button {
  background: linear-gradient(135deg, #0d2b45, #123d61);
}

.estimate-button {
  background: linear-gradient(135deg, #789bb3, #91b2c8);
}

.button-icon {
  font-size: 23px;
}

.hero-photo-caption {
  position: absolute;
  left: 0;
  bottom: 8px;

  margin: 0;

  color: #ffffff;

  font-size: 11px;
  font-weight: 500;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.75);
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) {

  .header-inner {
    height: 78px;
  }

  .header-logo {
    width: 195px;
  }

  .main-nav {
    gap: 16px;
  }

  .main-nav a {
    font-size: 13px;
  }

  .phone-number {
    font-size: 19px;
  }

  .hero {
    padding-top: 78px;
  }

  .hero-message {
    top: 65px;
  }

  .hero-main-copy {
    font-size: 42px;
  }

  .hero-sub-copy {
    font-size: 18px;
  }

  .hero-brand-area {
    width: 390px;
  }

  .always-open span {
    font-size: 29px;
  }

  .hero-logo {
    width: 300px;
  }

  .hyogo-map-box {
    width: 220px;
    height: 260px;
  }

  .service-area-box {
    width: 300px;
  }

  .quick-price-circle {
    width: 175px;
    height: 175px;
  }

  .quick-price-number-row strong {
    font-size: 64px;
  }

  .hero-buttons {
    width: 280px;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 820px) {

  .header-inner {
    width: 92%;
    height: 72px;
  }

  .header-logo {
    width: 175px;
  }

  .menu-button {
    display: block;
  }

  .header-right {
    position: absolute;
    top: 72px;
    left: 0;

    width: 100%;
    padding: 24px 6% 28px;

    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;

    background: rgba(13, 43, 69, 0.99);

    box-shadow:
      0 15px 28px rgba(0, 0, 0, 0.25);
  }

  .header-right.is-open {
    display: flex;
  }

  .main-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav a {
    padding: 14px 4px;

    border-bottom:
      1px solid rgba(255, 255, 255, 0.15);

    font-size: 16px;
  }

  .main-nav a::after {
    display: none;
  }

  .header-phone {
    padding: 13px;

    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
  }

  .phone-number {
    font-size: 21px;
  }

  .hero {
    min-height: auto;
    padding: 72px 0 50px;

    background-position: 58% bottom;
  }

  .hero-inner {
    width: 90%;
    min-height: auto;

    display: flex;
    flex-direction: column;
  }

  .hero-message,
  .hero-brand-area,
  .hero-area-group,
  .hero-action-group,
  .hero-photo-caption {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .hero-message {
    order: 1;

    width: 100%;
    padding-top: 55px;
  }

  .hero-main-copy {
    color: #0d2b45;

    font-size: clamp(32px, 8.5vw, 46px);
    line-height: 1.5;
  }

  .hero-copy-line {
    width: 190px;
  }

  .hero-sub-copy {
    font-size: 17px;
  }

  .hero-brand-area {
    order: 2;

    width: 100%;
    margin-top: 42px;
  }

  .always-open {
    max-width: 430px;
  }

  .always-open span {
    font-size: clamp(25px, 7vw, 34px);
  }

  .hero-logo {
    width: min(340px, 82%);
  }

  .hero-area-group {
    order: 3;

    width: 100%;
    margin-top: 50px;

    align-items: center;
    justify-content: center;
  }

  .hyogo-map-box {
    width: 185px;
    height: 225px;
  }

  .hyogo-title {
    font-size: 23px;
  }

  .akashi-star {
    bottom: 28px;
    font-size: 44px;
  }

  .service-area-box {
    width: min(330px, 55%);
    margin: 0;
  }

  .hero-action-group {
    order: 4;

    width: 100%;
    margin-top: 45px;

    flex-direction: column;
    align-items: center;
  }

  .quick-price-circle {
    width: 190px;
    height: 190px;
  }

  .hero-buttons {
    width: 100%;
    max-width: 440px;
  }

  .hero-photo-caption {
    order: 5;

    margin-top: 35px;

    font-size: 11px;
    text-align: center;
  }
}


/* ==================================================
   小さいスマートフォン
================================================== */

@media (max-width: 520px) {

  .hero-message {
    padding-top: 42px;
  }

  .hero-main-copy {
    font-size: 31px;
    letter-spacing: 0.03em;
  }

  .hero-sub-copy {
    font-size: 15px;
  }

  .hero-area-group {
    flex-direction: column;
  }

  .hyogo-map-box {
    width: 220px;
    height: 250px;
  }

  .service-area-box {
    width: 100%;
  }

  .hero-button {
    min-height: 62px;
    padding: 13px 16px;

    font-size: 16px;
  }
}

/* ==================================================
   ごあいさつ
================================================== */

.introduction {
  background: var(--white);
}

.introduction .section-inner {
  max-width: 920px;
}

.introduction-text {
  margin-bottom: 28px;

  color: var(--text);
  font-size: 18px;
  line-height: 2.1;
  text-align: center;
}

.introduction-text:last-child {
  margin-bottom: 0;
}

/* ==================================================
   サービス
================================================== */

.service-section {
  background: var(--light-gray);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card {
  padding: 36px 26px;

  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: 20px;

  box-shadow: 0 8px 24px rgba(13, 43, 69, 0.07);

  text-align: center;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
}

.service-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 23px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #eaf0f4;
  border-radius: 50%;

  font-size: 38px;
}

.service-card h3 {
  margin-bottom: 15px;
  color: var(--navy);
  font-size: 21px;
}

.service-card p {
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.9;
  text-align: left;
}

/* ==================================================
   料金
================================================== */

.price-section {
  background: var(--white);
}

.price-action-box {
  max-width: 940px;
  margin: 0 auto;
  padding: 42px 46px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;

  background: var(--light-gray);
  border: 1px solid var(--border-gray);
  border-radius: 22px;

  box-shadow: 0 12px 32px rgba(13, 43, 69, 0.08);
}

.price-action-text {
  flex: 1;
}

.price-action-title {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 25px;
  font-weight: 700;
}

.price-action-text p:not(.price-action-title) {
  color: var(--text-light);
  font-size: 15px;
}

.large-action-button {
  flex-shrink: 0;

  min-width: 270px;
  padding: 18px 30px;

  color: var(--white);
  background: var(--navy);

  border-radius: 14px;

  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;

  box-shadow: 0 10px 25px rgba(13, 43, 69, 0.2);

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.large-action-button:hover {
  background: var(--navy-dark);
  transform: translateY(-4px);
}

/* ==================================================
   ご利用の流れ
================================================== */

.flow-section {
  background: var(--light-gray);
}

.flow-list {
  max-width: 850px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 22px;
}

.flow-item {
  position: relative;

  padding: 30px 32px;

  display: flex;
  align-items: center;
  gap: 28px;

  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: 18px;

  box-shadow: 0 7px 20px rgba(13, 43, 69, 0.07);
}

.flow-number {
  flex-shrink: 0;

  width: 70px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--white);
  background: var(--navy);
  border-radius: 50%;

  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.flow-item h3 {
  margin-bottom: 7px;
  color: var(--navy);
  font-size: 21px;
}

.flow-item p {
  color: var(--text-light);
  font-size: 15px;
}

/* ==================================================
   お問い合わせCTA
================================================== */

.contact-cta {
  padding: 95px 0;

  color: var(--white);
  background:
    linear-gradient(
      135deg,
      var(--navy-dark),
      var(--navy),
      var(--blue-gray-dark)
    );
}

.contact-cta-inner {
  width: min(920px, 90%);
  margin: 0 auto;
  text-align: center;
}

.contact-cta-small {
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 600;
}

.contact-cta h2 {
  margin-bottom: 40px;
  font-size: clamp(30px, 4vw, 43px);
  line-height: 1.5;
}

.contact-cta-buttons {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 22px;
}

.contact-phone-button,
.contact-form-button {
  width: 360px;
  min-height: 110px;
  padding: 18px 25px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 16px;
  text-decoration: none;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.contact-phone-button:hover,
.contact-form-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.23);
}

.contact-phone-button {
  color: var(--navy);
  background: var(--white);
}

.contact-button-label {
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 700;
}

.contact-phone-button strong {
  font-size: 25px;
  line-height: 1.4;
}

.contact-phone-button small {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
}

.contact-form-button {
  color: var(--white);
  background: var(--blue-gray);

  font-size: 19px;
  font-weight: 700;
}

/* ==================================================
   フッター
================================================== */

.site-footer {
  padding-top: 65px;
  color: var(--white);
  background: #071b2b;
}

.footer-inner {
  width: min(1120px, 90%);
  margin: 0 auto 50px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
}

.footer-company {
  max-width: 430px;
}

.footer-logo {
  width: 235px;
  margin-bottom: 18px;
  padding: 8px;

  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
}

.footer-company p {
  margin-bottom: 8px;
  font-size: 15px;
}

.footer-company address {
  margin-bottom: 8px;
  font-size: 14px;
  font-style: normal;
  line-height: 1.8;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 14px 30px;
}

.footer-nav a {
  color: var(--white);
  font-size: 14px;
  text-decoration: none;
  opacity: 0.9;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.footer-nav a:hover {
  opacity: 1;
  transform: translateX(4px);
}

.copyright {
  padding: 18px 20px;

  background: #04131f;

  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ==================================================
   表示アニメーション
================================================== */

.section,
.contact-cta {
  animation: fadeUp 0.8s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================================================
   下層セクション：スマートフォン
================================================== */

@media (max-width: 820px) {
  html {
    scroll-padding-top: 72px;
  }

  .section {
    padding: 78px 0;
  }

  .section-inner {
    width: min(92%, 680px);
  }

  .mobile-break {
    display: block;
  }

  .desktop-break {
    display: none;
  }

  .introduction-text {
    font-size: 16px;
    text-align: left;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-card {
    padding: 30px 24px;
  }

  .price-action-box {
    padding: 32px 25px;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .price-action-title {
    font-size: 22px;
  }

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

  .flow-item {
    padding: 25px 22px;
    align-items: flex-start;
    gap: 18px;
  }

  .flow-number {
    width: 58px;
    height: 58px;
    font-size: 18px;
  }

  .flow-item h3 {
    font-size: 19px;
  }

  .contact-cta {
    padding: 75px 0;
  }

  .contact-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .contact-phone-button,
  .contact-form-button {
    width: 100%;
    max-width: 430px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 38px;
  }

  .footer-nav {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-nav a {
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 29px;
  }

  .section-description {
    font-size: 15px;
    text-align: left;
  }

  .price-action-box {
    padding: 27px 20px;
  }

  .flow-item {
    flex-direction: column;
  }

  .contact-phone-button strong {
    font-size: 22px;
  }

  .footer-logo {
    width: 210px;
  }
}


/* ==================================================
   最終位置調整
================================================== */

@media (min-width: 1101px) {
  .hero-area-group {
    left: -48px;
    bottom: 2px;
  }

  .service-area-box {
    left: -28px;
    top: 14px;
  }
}

@media (max-width: 1100px) and (min-width: 821px) {
  .hero-area-group {
    left: -28px;
    bottom: 4px;
  }

  .service-area-box {
    left: -18px;
    top: 12px;
  }

  .phone-hours {
    font-size: 13px;
  }
}

@media (max-width: 820px) {
  .hero-area-group {
    left: auto;
    bottom: auto;
  }

  .service-area-box {
    left: -12px;
    top: 10px;
  }

  .akashi-star {
    left: 72%;
    bottom: 48px;
    font-size: 42px;
  }

  .phone-hours {
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .service-area-box {
    left: 0;
    top: 0;
  }
}

/* ==================================================
   2026-07-22 ヒーロー最終調整
   このブロックは必ず home.css の一番下に置く
================================================== */

/* ヘッダー右上：余計な線を完全に消し、上下を整える */
.header-phone,
.header-phone:hover,
.header-phone:focus,
.phone-number,
.phone-hours {
  border: 0 !important;
  outline: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.header-phone::before,
.header-phone::after,
.phone-number::before,
.phone-number::after,
.phone-hours::before,
.phone-hours::after {
  content: none !important;
  display: none !important;
}

.header-phone {
  min-width: 222px;
  padding: 3px 0 1px;
  justify-content: center;
  gap: 5px;
}

.phone-number {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
}

.phone-hours {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.15;
}

/* 左下：地図を少し大きく、カードを上げてコンパクトに */
.hero-area-group {
  left: -42px;
  bottom: 8px;
  gap: 4px;
  align-items: flex-end;
}

.hyogo-map-box {
  width: 315px;
  height: 350px;
}

.hyogo-map {
  opacity: 0.40;
}

.hyogo-title {
  font-size: 31px;
}

.akashi-star {
  left: 72%;
  bottom: 76px;
  font-size: 50px;
}

.service-area-box {
  left: -30px;
  top: -15px;
  width: 350px;
  min-height: 0;
  height: auto;
  padding: 15px 20px 16px;
  display: block;
  color: #ffffff;
  background: rgba(8, 31, 51, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 15px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  overflow: visible;
}

.service-area-box::before,
.service-area-box::after,
.service-area-box p::before,
.service-area-box p::after {
  content: none !important;
  display: none !important;
}

.service-area-box p {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-style: normal;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.service-area-primary {
  color: #ffc400 !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.service-area-secondary {
  margin-top: 3px !important;
  color: #ffc400 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.075em;
  white-space: nowrap;
}

.service-area-description {
  margin-top: 7px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

/* 30秒ワッペン：白背景・大外の線1本だけ */
.hero-action-group {
  right: 0;
  bottom: 30px;
  gap: 22px;
  align-items: flex-end;
}

.quick-price-circle {
  width: 226px;
  height: 226px;
  background: #ffffff !important;
  border: 5px solid #0d2b45 !important;
  border-radius: 50%;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.25);
  outline: 0 !important;
}

.quick-price-circle::before,
.quick-price-circle::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.quick-price-genie {
  left: 45%;
  bottom: -8px;
  width: 176px;
  height: 206px;
  opacity: 0.34;
}

.quick-price-content {
  z-index: 2;
  transform: translateX(15px);
}

.quick-price-shortest {
  margin-bottom: -8px;
  font-size: 19px;
}

.quick-price-number-row strong {
  font-size: 76px;
  font-weight: 500;
}

.quick-price-number-row span {
  margin: 0 0 10px 5px;
  font-size: 23px;
}

.quick-price-content small {
  margin-top: 2px;
  font-size: 17px;
  line-height: 1.35;
}

/* CTA：文字とアイコンを大きく、何のボタンか明確に */
.hero-buttons {
  width: 310px;
  gap: 15px;
}

.hero-button {
  min-height: 74px;
  padding: 14px 20px;
  gap: 14px;
  border-radius: 17px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.button-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.button-icon svg {
  display: block;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* タブレット */
@media (max-width: 1100px) and (min-width: 821px) {
  .header-phone {
    min-width: 190px;
  }

  .phone-number {
    font-size: 20px;
  }

  .phone-hours {
    font-size: 13px;
  }

  .hero-area-group {
    left: -25px;
    bottom: 6px;
  }

  .hyogo-map-box {
    width: 245px;
    height: 280px;
  }

  .hyogo-title {
    font-size: 25px;
  }

  .akashi-star {
    bottom: 57px;
    font-size: 43px;
  }

  .service-area-box {
    left: -21px;
    top: -10px;
    width: 305px;
    padding: 13px 16px 14px;
  }

  .service-area-primary {
    font-size: 19px !important;
  }

  .service-area-secondary {
    font-size: 17px !important;
  }

  .service-area-description {
    font-size: 13px !important;
  }

  .hero-action-group {
    bottom: 28px;
    gap: 15px;
  }

  .quick-price-circle {
    width: 185px;
    height: 185px;
  }

  .quick-price-genie {
    width: 145px;
    height: 170px;
  }

  .quick-price-number-row strong {
    font-size: 62px;
  }

  .quick-price-number-row span {
    font-size: 19px;
  }

  .quick-price-content small {
    font-size: 14px;
  }

  .hero-buttons {
    width: 275px;
  }

  .hero-button {
    min-height: 66px;
    font-size: 17px;
  }

  .button-icon,
  .button-icon svg {
    width: 29px;
    height: 29px;
  }

  .button-icon {
    flex-basis: 29px;
  }
}

/* スマートフォン */
@media (max-width: 820px) {
  .header-phone {
    min-width: 0;
    gap: 5px;
  }

  .hero-area-group {
    left: auto;
    bottom: auto;
    gap: 10px;
  }

  .hyogo-map-box {
    width: 205px;
    height: 240px;
  }

  .akashi-star {
    bottom: 47px;
    font-size: 43px;
  }

  .service-area-box {
    left: -10px;
    top: 0;
    width: min(355px, 58%);
    padding: 14px 16px 15px;
  }

  .service-area-primary {
    font-size: 19px !important;
  }

  .service-area-secondary {
    font-size: 17px !important;
  }

  .service-area-description {
    font-size: 13px !important;
    white-space: normal;
  }

  .hero-action-group {
    right: auto;
    bottom: auto;
  }

  .quick-price-circle {
    width: 205px;
    height: 205px;
  }

  .quick-price-genie {
    width: 160px;
    height: 188px;
  }

  .hero-buttons {
    width: 100%;
    max-width: 440px;
  }

  .hero-button {
    min-height: 70px;
    font-size: 19px;
  }
}

@media (max-width: 520px) {
  .hero-area-group {
    gap: 16px;
  }

  .service-area-box {
    left: 0;
    width: 100%;
    max-width: 360px;
  }

  .service-area-primary {
    font-size: 21px !important;
  }

  .service-area-secondary {
    font-size: 18px !important;
  }

  .service-area-description {
    font-size: 14px !important;
  }
}

/* ==================================================
   2026-07-22 最新確定調整
   24h365d.png・地図・対応エリア・30秒ワッペン
   必ずこのブロックを home.css の一番下に置く
================================================== */

/* ヘッダー電話アイコン */
.phone-icon {
  display: inline-block !important;
  font-size: 0.95em !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

.phone-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}

/* ロゴ上：作成済みPNGに差し替え、赤いラインは使用しない */
.always-open {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.always-open-image {
  display: block !important;
  width: 390px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.magic-line,
.always-open span,
.always-open::before,
.always-open::after {
  display: none !important;
  content: none !important;
}

/* 地図をもう少し大きく */
.hero-area-group {
  left: -52px !important;
  bottom: 6px !important;
  gap: 0 !important;
  align-items: flex-end !important;
}

.hyogo-map-box {
  width: 345px !important;
  height: 385px !important;
}

.hyogo-map {
  opacity: 0.40 !important;
}

/* 「兵庫県」は少し小さく、少し上へ */
.hyogo-title {
  top: 44% !important;
  font-size: 26px !important;
  transform: translate(-50%, -50%) !important;
}

.akashi-star {
  left: 72% !important;
  bottom: 84px !important;
  font-size: 52px !important;
}

/* 対応エリア：文字サイズは維持し、右側の余白だけ縮める */
.service-area-box {
  left: -38px !important;
  top: -12px !important;
  width: 320px !important;
  min-width: 0 !important;
  max-width: 320px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 15px 16px 16px !important;
}

.service-area-primary {
  font-size: 23px !important;
  letter-spacing: 0.02em !important;
}

.service-area-secondary {
  font-size: 20px !important;
  letter-spacing: 0.055em !important;
}

.service-area-description {
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

/* 30秒ワッペン：円を少し小さく、ジーニーは中央 */
.quick-price-circle {
  position: relative !important;
  width: 185px !important;
  height: 185px !important;
  flex: 0 0 185px !important;
  background: #ffffff !important;
  border: 5px solid #0d2b45 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  outline: 0 !important;
}

.quick-price-circle::before,
.quick-price-circle::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.quick-price-genie {
  position: absolute !important;
  z-index: 1 !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 155px !important;
  height: 175px !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  opacity: 0.34 !important;
}

.quick-price-content {
  position: relative !important;
  z-index: 2 !important;
  transform: none !important;
}

.quick-price-shortest {
  margin-bottom: -7px !important;
  font-size: 18px !important;
}

.quick-price-number-row strong {
  font-size: 68px !important;
}

.quick-price-number-row span {
  margin: 0 0 9px 4px !important;
  font-size: 21px !important;
}

.quick-price-content small {
  margin-top: 1px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

/* タブレット */
@media (max-width: 1100px) and (min-width: 821px) {
  .always-open-image {
    width: 330px !important;
  }

  .hero-area-group {
    left: -28px !important;
    gap: 0 !important;
  }

  .hyogo-map-box {
    width: 270px !important;
    height: 310px !important;
  }

  .hyogo-title {
    top: 44% !important;
    font-size: 23px !important;
  }

  .akashi-star {
    bottom: 65px !important;
    font-size: 45px !important;
  }

  .service-area-box {
    left: -27px !important;
    top: -9px !important;
    width: 286px !important;
    max-width: 286px !important;
    padding: 13px 14px 14px !important;
  }

  .service-area-primary {
    font-size: 19px !important;
  }

  .service-area-secondary {
    font-size: 17px !important;
  }

  .service-area-description {
    font-size: 13px !important;
  }

  .quick-price-circle {
    width: 170px !important;
    height: 170px !important;
    flex-basis: 170px !important;
  }

  .quick-price-genie {
    width: 142px !important;
    height: 160px !important;
  }

  .quick-price-number-row strong {
    font-size: 61px !important;
  }

  .quick-price-number-row span {
    font-size: 19px !important;
  }

  .quick-price-content small {
    font-size: 14px !important;
  }
}

/* スマートフォン */
@media (max-width: 820px) {
  .always-open-image {
    width: min(360px, 92%) !important;
  }

  .hero-area-group {
    left: auto !important;
    bottom: auto !important;
    gap: 8px !important;
  }

  .hyogo-map-box {
    width: 220px !important;
    height: 260px !important;
  }

  .hyogo-title {
    top: 44% !important;
    font-size: 22px !important;
  }

  .akashi-star {
    bottom: 52px !important;
    font-size: 43px !important;
  }

  .service-area-box {
    left: -12px !important;
    top: 0 !important;
    width: min(320px, 58%) !important;
    max-width: 320px !important;
    padding: 13px 14px 14px !important;
  }

  .quick-price-circle {
    width: 180px !important;
    height: 180px !important;
    flex-basis: 180px !important;
  }

  .quick-price-genie {
    width: 150px !important;
    height: 169px !important;
  }
}

@media (max-width: 520px) {
  .hero-area-group {
    gap: 15px !important;
  }

  .hyogo-map-box {
    width: 230px !important;
    height: 270px !important;
  }

  .service-area-box {
    left: 0 !important;
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* ==================================================
   PC表示・各パーツ単体調整専用
   数字はこの :root の中だけ変更してください
   ※＋/－の向き
     X：＋で右、－で左
     Y：＋で下、－で上
================================================== */

:root {
  /* キャッチコピー */
  --copy-x: 0px;
  --copy-y: -20px;

  /* 24時間PNG＋ロゴ全体 */
  --brand-x: 0px;
  --brand-y: 0px;

  /* 24時間365日対応PNG */
  --always-open-width: 320px;

  /* アラジンロゴ */
  --hero-logo-width: 350px;

  /* 兵庫県地図だけ */
  --map-x: -25px;
  --map-y: 25px;
  --map-width: 345px;
  --map-height: 385px;

  /* 地図内「兵庫県」の文字だけ */
  --hyogo-title-x: -10px;
  --hyogo-title-y: 0px;
  --hyogo-title-size: 20px;

  /* ★だけ */
  --star-x: -45px;
  --star-y: -30px;
  --star-size: 52px;

  /* 対応エリアカードだけ */
  --area-card-x: -40px;
  --area-card-y: -15px;
  --area-card-width: 245px;

  /* ワッペン＋ボタン全体 */
  --action-x: 0px;
  --action-y: -5px;

  /* 30秒ワッペン */
  --badge-size: 185px;

  /* ワッペンだけの位置
     ＋で下、－で上 */
  --badge-position-y: 11px;

  /* ジーニーだけ */
  --genie-x: 10px;
  --genie-y: 0px;
  --genie-width: 155px;
  --genie-height: 175px;

  /* ボタン全体 */
  --hero-buttons-width: 300px;
}

@media (min-width: 821px) {

  /* キャッチコピー */
  .hero-message {
    transform: translate(
      var(--copy-x),
      var(--copy-y)
    ) !important;
  }

  /* 24時間PNG＋ロゴ全体 */
  .hero-brand-area {
    transform: translate(
      var(--brand-x),
      var(--brand-y)
    ) !important;
  }

  .always-open-image {
    width: var(--always-open-width) !important;
  }

  .hero-logo {
    width: var(--hero-logo-width) !important;
  }

  /* 地図だけ */
  .hyogo-map-box {
    position: relative !important;
    width: var(--map-width) !important;
    height: var(--map-height) !important;
    flex: 0 0 auto !important;
    transform: translate(
      var(--map-x),
      var(--map-y)
    ) !important;
  }

  /* 「兵庫県」の文字だけ */
  .hyogo-title {
    font-size: var(--hyogo-title-size) !important;
    transform:
      translate(-50%, -50%)
      translate(
        var(--hyogo-title-x),
        var(--hyogo-title-y)
      ) !important;
  }

  /* ★だけ */
  .akashi-star {
    font-size: var(--star-size) !important;
    transform:
      translateX(-50%)
      translate(
        var(--star-x),
        var(--star-y)
      ) !important;
  }

  /* 対応エリアカードだけ */
  .service-area-box {
    width: var(--area-card-width) !important;
    max-width: var(--area-card-width) !important;
    transform: translate(
      var(--area-card-x),
      var(--area-card-y)
    ) !important;
  }

  /* ワッペン＋ボタン全体 */
  .hero-action-group {
    transform: translate(
      var(--action-x),
      var(--action-y)
    ) !important;
  }

  /* ワッペン */
  .quick-price-circle {
    width: var(--badge-size) !important;
    height: var(--badge-size) !important;
    flex: 0 0 var(--badge-size) !important;

    transform:
      translateY(var(--badge-position-y)) !important;
  }

  /* ジーニーだけ */
  .quick-price-genie {
    width: var(--genie-width) !important;
    height: var(--genie-height) !important;
    transform:
      translate(-50%, -50%)
      translate(
        var(--genie-x),
        var(--genie-y)
      ) !important;
  }

  /* ボタン全体 */
  .hero-buttons {
    width: var(--hero-buttons-width) !important;
  }
}

/* ==================================================
   PC表示：ヘッダー＋ヒーローを1画面に収める
   現在の配置を保ち、画面の高さが低いPCだけ自動縮小
================================================== */

@media (min-width: 821px) {
  :root {
    --desktop-header-height: 88px;
    --hero-fit-scale: 1;
  }

  /* ヘッダーを含めて、ヒーローの終わりが画面下に合う */
  .hero {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 0 !important;
    padding-top: var(--desktop-header-height) !important;
  }

  .hero-inner {
    height: calc(100vh - var(--desktop-header-height)) !important;
    height: calc(100svh - var(--desktop-header-height)) !important;
    min-height: 0 !important;
  }

  /* 左上のキャッチコピー */
  .hero-message {
    transform:
      translate(var(--copy-x), var(--copy-y))
      scale(var(--hero-fit-scale)) !important;
    transform-origin: left top !important;
  }

  /* 右上の24時間PNG＋ロゴ */
  .hero-brand-area {
    transform:
      translate(var(--brand-x), var(--brand-y))
      scale(var(--hero-fit-scale)) !important;
    transform-origin: right top !important;
  }

  /* 左下の地図＋対応エリアカード */
  .hero-area-group {
    transform: scale(var(--hero-fit-scale)) !important;
    transform-origin: left bottom !important;
  }

  /* 右下のワッペン＋ボタン */
  .hero-action-group {
    transform:
      translate(var(--action-x), var(--action-y))
      scale(var(--hero-fit-scale)) !important;
    transform-origin: right bottom !important;
  }
}

/* 横幅が1100px以下のPC・タブレットはヘッダーが78px */
@media (max-width: 1100px) and (min-width: 821px) {
  :root {
    --desktop-header-height: 78px;
  }
}

/* 高さが低いパソコンだけ段階的に縮小 */
@media (min-width: 821px) and (max-height: 900px) {
  :root {
    --hero-fit-scale: 0.94;
  }
}

@media (min-width: 821px) and (max-height: 820px) {
  :root {
    --hero-fit-scale: 0.86;
  }
}

@media (min-width: 821px) and (max-height: 740px) {
  :root {
    --hero-fit-scale: 0.78;
  }
}

@media (min-width: 821px) and (max-height: 660px) {
  :root {
    --hero-fit-scale: 0.70;
  }
}

/* ==================================================
   PCヘッダー・コンパクト調整
   ヘッダーを細くし、ロゴも少し小さくする
   1画面表示の高さ計算にも連動
================================================== */

@media (min-width: 1101px) {
  :root {
    --desktop-header-height: 72px;
  }

  .header-inner {
    height: 72px !important;
  }

  .header-logo {
    width: 190px !important;
    max-height: 56px !important;
  }

  .header-right {
    gap: 28px !important;
  }

  .main-nav {
    gap: 22px !important;
  }

  .main-nav a {
    font-size: 14px !important;
  }

  .header-phone {
    min-width: 205px !important;
    gap: 3px !important;
  }

  .phone-number {
    font-size: 22px !important;
  }

  .phone-hours {
    font-size: 13px !important;
  }

  .hero {
    padding-top: var(--desktop-header-height) !important;
  }

  .hero-inner {
    height: calc(100vh - var(--desktop-header-height)) !important;
    height: calc(100svh - var(--desktop-header-height)) !important;
  }
}

/* 画面幅が少し狭いPC・タブレット */
@media (max-width: 1100px) and (min-width: 821px) {
  :root {
    --desktop-header-height: 68px;
  }

  .header-inner {
    height: 68px !important;
  }

  .header-logo {
    width: 172px !important;
    max-height: 52px !important;
  }

  .header-right {
    gap: 20px !important;
  }

  .main-nav {
    gap: 15px !important;
  }

  .main-nav a {
    font-size: 13px !important;
  }

  .header-phone {
    min-width: 175px !important;
    gap: 2px !important;
  }

  .phone-number {
    font-size: 19px !important;
  }

  .phone-hours {
    font-size: 12px !important;
  }

  .hero {
    padding-top: var(--desktop-header-height) !important;
  }

  .hero-inner {
    height: calc(100vh - var(--desktop-header-height)) !important;
    height: calc(100svh - var(--desktop-header-height)) !important;
  }
}
:root {
  /* 朝日の背景写真 */
  --photo-x: 0px;
  --photo-y: 100px;
  --photo-scale: 1;

  /* キャッチコピー */
  --copy-balance-x: 40px;
  --copy-balance-y: -20px;
  --copy-scale: 1.15;

  /* 24時間PNG＋ロゴ全体 */
  --brand-balance-x: -30px;
  --brand-balance-y: -40px;
  --brand-scale: 1.4;

  /* 24時間365日対応PNGだけ */
  --always-open-x: -130px;
  --always-open-y: 10px;

  /* 地図＋対応エリアカード全体 */
  --area-group-x: 30px;
  --area-group-y: 0px;
  --area-group-scale: 1.2;

  /* ワッペン＋ボタン全体 */
  --action-balance-x: -55px;
  --action-balance-y: 5px;
  --action-scale: 1.1;
}

/* キャッチコピー文字サイズ調整 */
@media (min-width: 821px) {

  /* 安心・安全・快適に */
  .hero-main-copy {
    font-size: 60px !important;
    line-height: 1.35 !important;
    margin-bottom: 22px !important;
  }

  /* ひとりひとりに寄り添い〜 */
  .hero-sub-copy {
    font-size: 30px !important;
    line-height: 1.75 !important;
  }
}

/* ==================================================
   最終・全パーツ調整を確実に反映するブロック
   必ず home.css の一番下に置く
================================================== */

@media (min-width: 821px) {

  /* ヒーロー全体を1画面に収める */
  .hero {
    position: relative !important;
    height: 100vh !important;
    height: 100svh !important;
    min-height: 0 !important;
    padding-top: var(--desktop-header-height) !important;
    background-image: none !important;
    overflow: hidden !important;
  }

  .hero-inner {
    position: relative !important;
    z-index: 2 !important;
    height: calc(100vh - var(--desktop-header-height)) !important;
    height: calc(100svh - var(--desktop-header-height)) !important;
    min-height: 0 !important;
  }

  /* 朝日の背景写真だけを移動・拡大縮小 */
  .hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0% !important;
    z-index: 0 !important;
    pointer-events: none !important;

    background-image: url("images/hero-bg.JPEG") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center bottom !important;

    transform:
      translate(var(--photo-x), var(--photo-y))
      scale(var(--photo-scale)) !important;
    transform-origin: center center !important;
  }

  .hero::after {
    z-index: 1 !important;
  }

  /* キャッチコピー */
  .hero-message {
    transform:
      translate(
        calc(var(--copy-x) + var(--copy-balance-x)),
        calc(var(--copy-y) + var(--copy-balance-y))
      )
      scale(var(--hero-fit-scale))
      scale(var(--copy-scale)) !important;
    transform-origin: left top !important;
  }

  /* 24時間PNG＋ロゴ全体 */
  .hero-brand-area {
    transform:
      translate(
        calc(var(--brand-x) + var(--brand-balance-x)),
        calc(var(--brand-y) + var(--brand-balance-y))
      )
      scale(var(--hero-fit-scale))
      scale(var(--brand-scale)) !important;
    transform-origin: right top !important;
  }

  /* 24時間365日対応PNGだけ */
  .always-open-image {
    width: var(--always-open-width) !important;
    transform:
      translate(var(--always-open-x), var(--always-open-y)) !important;
  }

  /* 地図＋カード全体 */
  .hero-area-group {
    transform:
      translate(var(--area-group-x), var(--area-group-y))
      scale(var(--hero-fit-scale))
      scale(var(--area-group-scale)) !important;
    transform-origin: left bottom !important;
  }

  /* 地図だけ */
  .hyogo-map-box {
    width: var(--map-width) !important;
    height: var(--map-height) !important;
    transform:
      translate(var(--map-x), var(--map-y)) !important;
  }

  /* 「兵庫県」の文字だけ */
  .hyogo-title {
    font-size: var(--hyogo-title-size) !important;
    transform:
      translate(-50%, -50%)
      translate(var(--hyogo-title-x), var(--hyogo-title-y)) !important;
  }

  /* ★だけ */
  .akashi-star {
    font-size: var(--star-size) !important;
    transform:
      translateX(-50%)
      translate(var(--star-x), var(--star-y)) !important;
  }

  /* 対応エリアカードだけ */
  .service-area-box {
    width: var(--area-card-width) !important;
    max-width: var(--area-card-width) !important;
    transform:
      translate(var(--area-card-x), var(--area-card-y)) !important;
  }

  /* ワッペン＋ボタン全体 */
  .hero-action-group {
    transform:
      translate(
        calc(var(--action-x) + var(--action-balance-x)),
        calc(var(--action-y) + var(--action-balance-y))
      )
      scale(var(--hero-fit-scale))
      scale(var(--action-scale)) !important;
    transform-origin: right bottom !important;
  }

  /* ワッペン */
  .quick-price-circle {
    width: var(--badge-size) !important;
    height: var(--badge-size) !important;
    flex: 0 0 var(--badge-size) !important;
  }

  /* ジーニーだけ */
  .quick-price-genie {
    width: var(--genie-width) !important;
    height: var(--genie-height) !important;
    transform:
      translate(-50%, -50%)
      translate(var(--genie-x), var(--genie-y)) !important;
  }

  /* ボタン */
  .hero-buttons {
    width: var(--hero-buttons-width) !important;
  }
}
/* ==================================================
   背景写真の位置調整・隙間防止
================================================== */

@media (min-width: 821px) {
  .hero::before {
    inset: 0 !important;

    background-image: url("images/hero-bg.JPEG") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    /* 写真の位置はこちらで変更 */
    background-position:
      calc(50% + var(--photo-x))
      calc(100% + var(--photo-y)) !important;

    /* レイヤー自体は移動させない */
    transform: scale(var(--photo-scale)) !important;
    transform-origin: center center !important;
  }
}
/* ==================================================
   30秒ワッペン・文字バランス調整専用
   数字はこの :root 内だけ変更
================================================== */

:root {
  /* ワッペン内の文字全体 */
  --badge-text-x: 0px;
  --badge-text-y: 0px;

  /* 「最短」 */
  --badge-shortest-x: 0px;
  --badge-shortest-y: -4.5px;
  --badge-shortest-size: 23px;

  /* 「30」と「秒で」の行全体 */
  --badge-number-row-x: 0px;
  --badge-number-row-y: -4px;

  /* 「30」 */
  --badge-number-size: 87px;

  /* 「秒で」 */
  --badge-seconds-x: 0px;
  --badge-seconds-y: 2px;
  --badge-seconds-size: 23px;

  /* 「概算料金を確認できます！」 */
  --badge-description-x: 0px;
  --badge-description-y: -15px;
  --badge-description-size: 18.5px;
  --badge-description-line-height: 1.3;
}

@media (min-width: 821px) {

  /* ワッペン内の文字全体 */
  .quick-price-content {
    transform: translate(
      var(--badge-text-x),
      var(--badge-text-y)
    ) !important;
  }

  /* 「最短」 */
  .quick-price-shortest {
    font-size: var(--badge-shortest-size) !important;
    transform: translate(
      var(--badge-shortest-x),
      var(--badge-shortest-y)
    ) !important;
  }

  /* 「30」と「秒で」の行全体 */
  .quick-price-number-row {
    transform: translate(
      var(--badge-number-row-x),
      var(--badge-number-row-y)
    ) !important;
  }

  /* 「30」 */
  .quick-price-number-row strong {
    font-size: var(--badge-number-size) !important;
  }

  /* 「秒で」 */
  .quick-price-number-row span {
    font-size: var(--badge-seconds-size) !important;
    transform: translate(
      var(--badge-seconds-x),
      var(--badge-seconds-y)
    ) !important;
  }

  /* 下の説明文 */
  .quick-price-content small {
    font-size: var(--badge-description-size) !important;
    line-height: var(--badge-description-line-height) !important;
    transform: translate(
      var(--badge-description-x),
      var(--badge-description-y)
    ) !important;
  }
}

/* ==================================================
   ヒーロー以下・詳細ページ構成
   ヘッダー／ヒーローには影響しません
================================================== */

.home-detail-section {
  padding: 92px 0;
}

.home-detail-inner {
  width: min(1180px, 92%);
  margin: 0 auto;
}

.home-section-heading {
  margin-bottom: 46px;
  text-align: center;
}

.home-section-kicker {
  margin-bottom: 8px;
  color: #6f879a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.home-section-heading h2 {
  color: #0d2b45;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.45;
}


/* 選ばれる3つの理由 見出しランプ */
.reasons-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.reasons-heading-title span {
  display: inline-block;
}

.reasons-heading-lamp {
  width: 34px;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  flex: 0 0 auto;
}

.home-section-note {
  max-width: 760px;
  margin: 13px auto 0;
  color: #607181;
  font-size: 15px;
}

.home-heading-rule {
  display: block;
  width: 76px;
  height: 3px;
  margin: 20px auto 0;
  background: #6f879a;
  border-radius: 999px;
}

/* 3つの理由 */
.reasons-section {
  background: #e9eff3;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.reason-card {
  min-height: 345px;
  padding: 34px 28px 30px;
  background: #ffffff;
  border: 1px solid #d8e1e7;
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(13, 43, 69, 0.12);
  text-align: center;
}

.detail-icon {
  width: 92px;
  height: 92px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  color: #0d2b45;
  background: #edf3f7;
  border: 2px solid #c7d4de;
  border-radius: 50%;
}

.detail-icon svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reason-card h3 {
  margin-bottom: 17px;
  color: #0d2b45;
  font-size: 22px;
  line-height: 1.5;
}

.reason-card p {
  color: #506270;
  font-size: 15px;
  line-height: 1.95;
  text-align: left;
}

/* アラジンについて */
.about-detail-section {
  background: #ffffff;
}

.about-detail-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: 28px;
  margin-bottom: 28px;
}

.about-story-card,
.history-card,
.profile-card,
.vehicle-card {
  background: #f6f9fb;
  border: 1px solid #dbe4ea;
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(13, 43, 69, 0.08);
}

.about-story-card {
  padding: 34px;
}

.about-lead {
  margin-bottom: 20px;
  color: #0d2b45;
  font-size: 21px;
  line-height: 1.75;
}

.about-lead strong {
  color: #0d2b45;
  font-size: 1.18em;
}

.about-story-card > p:not(.about-lead) {
  margin-top: 15px;
  color: #506270;
  font-size: 15px;
  line-height: 2;
}

.history-card {
  padding: 32px;
}

.history-card h3 {
  margin-bottom: 24px;
  color: #0d2b45;
  font-size: 24px;
}

.history-item {
  position: relative;
  padding-left: 23px;
  border-left: 3px solid #8ba0b0;
}

.history-item + .history-item {
  margin-top: 24px;
}

.history-date {
  display: inline-block;
  margin-bottom: 8px;
  color: #0d2b45;
  font-weight: 900;
}

.history-item p {
  color: #506270;
  font-size: 14px;
  line-height: 1.8;
}

.profile-vehicle-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
}

.profile-card {
  position: relative;
  padding: 34px;
  color: #ffffff;
  background: linear-gradient(145deg, #0b2740, #163f60);
}

.profile-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  color: #0d2b45;
  background: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.profile-card h3 {
  font-size: 25px;
}

.profile-card h3 small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.8;
}

.profile-role {
  margin: 8px 0 18px;
  color: #dceaf3;
  font-weight: 700;
}

.profile-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 16px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.profile-list li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
}

.profile-list li::before {
  content: "•";
  position: absolute;
  left: 0;
}

.profile-card > p:last-child {
  font-size: 14px;
  line-height: 1.85;
}

.vehicle-card {
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) 1.1fr;
  align-items: center;
  gap: 24px;
}

.vehicle-illustration {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #0d2b45;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.95), rgba(226,235,241,0.95));
  border-radius: 18px;
}

.vehicle-illustration svg {
  width: 86%;
  max-width: 300px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vehicle-kicker {
  color: #6f879a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.vehicle-card h3 {
  margin: 6px 0 14px;
  color: #0d2b45;
  font-size: 24px;
  line-height: 1.5;
}

.vehicle-card p:last-child {
  color: #506270;
  font-size: 15px;
  line-height: 1.9;
}

/* ==================================================
   機材紹介
   参考画像に合わせた3段・横線区切りレイアウト
================================================== */

.equipment-section {
  /* 背景色 */
  background: #dce6ec;

  /* ==================================================
     写真調整パネル

     width / height：写真枠の大きさ
     x：プラスで右、マイナスで左
     y：プラスで下、マイナスで上
     scale：1より大きくすると拡大、1より小さくすると縮小
  ================================================== */

  /* 普通車いす normal.png */
  --normal-width: 250px;
  --normal-height: 230px;
  --normal-x: 0px;
  --normal-y: 0px;
  --normal-scale: 1;

  /* リクライニング車いす reclining.png */
  --reclining-width: 250px;
  --reclining-height: 230px;
  --reclining-x: 0px;
  --reclining-y: 0px;
  --reclining-scale: 1;

  /* ストレッチャー状態 reclining.flat.png */
  --flat-width: 200px;
  --flat-height: 130px;
  --flat-x: 0px;
  --flat-y: 0px;
  --flat-scale: 1;

  /* リクライニング車いす車中 reclining-incar.png */
  --incar-width: 210px;
  --incar-height: 230px;
  --incar-x: 0px;
  --incar-y: 0px;
  --incar-scale: 1;

  /* 階段昇降機 step.png */
  --step-width: 250px;
  --step-height: 230px;
  --step-x: 0px;
  --step-y: 0px;
  --step-scale: 1;

  /* 階段昇降機使用中 step-use.png */
  --step-use-width: 210px;
  --step-use-height: 230px;
  --step-use-x: 0px;
  --step-use-y: 0px;
  --step-use-scale: 1;
}

.equipment-inner {
  width: min(1040px, 92%);
}

/* 見出し */
.equipment-heading {
  margin-bottom: 30px;
}

.equipment-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.equipment-heading-title span {
  display: inline-block;
}

.equipment-heading-lamp {
  width: 35px;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  opacity: 0.88;
  filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(12%)
    saturate(780%)
    hue-rotate(163deg)
    brightness(93%)
    contrast(87%);
}

.equipment-heading-lamp-right {
  transform: scaleX(-1);
}

/* 3段全体・白い横線 */
.equipment-list {
  border-top: 2px solid rgba(255, 255, 255, 0.96);
}

.equipment-row {
  display: grid;
  align-items: start;
  column-gap: 24px;
  padding: 24px 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.96);
}

.equipment-row-normal {
  grid-template-columns: 270px minmax(0, 1fr);
}

.equipment-row-reclining,
.equipment-row-step {
  grid-template-columns: 270px minmax(0, 1fr) 220px;
}

/* 写真共通 */
.equipment-photo-box {
  min-width: 0;
}

.equipment-photo-frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.2);
}

.equipment-photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform-origin: center;
}

/* 普通車いす */
.equipment-photo-box-normal {
  width: var(--normal-width);
  height: var(--normal-height);
}

.equipment-photo-box-normal .equipment-photo {
  transform:
    translate(var(--normal-x), var(--normal-y))
    scale(var(--normal-scale));
}

/* リクライニング車いす */
.equipment-photo-box-reclining {
  width: var(--reclining-width);
  height: var(--reclining-height);
}

.equipment-photo-box-reclining .equipment-photo {
  transform:
    translate(var(--reclining-x), var(--reclining-y))
    scale(var(--reclining-scale));
}

/* ストレッチャー状態 */
.equipment-photo-box-flat {
  width: var(--flat-width);
  height: var(--flat-height);
  flex: 0 0 auto;
}

.equipment-photo-box-flat .equipment-photo {
  transform:
    translate(var(--flat-x), var(--flat-y))
    scale(var(--flat-scale));
}

/* リクライニング車いす車中 */
.equipment-photo-box-incar {
  width: var(--incar-width);
  height: var(--incar-height);
  justify-self: end;
}

.equipment-photo-box-incar .equipment-photo {
  transform:
    translate(var(--incar-x), var(--incar-y))
    scale(var(--incar-scale));
}

/* 階段昇降機 */
.equipment-photo-box-step {
  width: var(--step-width);
  height: var(--step-height);
}

.equipment-photo-box-step .equipment-photo {
  transform:
    translate(var(--step-x), var(--step-y))
    scale(var(--step-scale));
}

/* 階段昇降機使用中 */
.equipment-photo-box-step-use {
  width: var(--step-use-width);
  height: var(--step-use-height);
  justify-self: end;
}

.equipment-photo-box-step-use .equipment-photo {
  transform:
    translate(var(--step-use-x), var(--step-use-y))
    scale(var(--step-use-scale));
}

/* 説明文 */
.equipment-copy {
  min-width: 0;
  color: #173b63;
}

.equipment-copy h3 {
  margin: 0 0 6px;
  color: #0d2b45;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.035em;
}

.equipment-copy p {
  margin: 0;
  color: #173b63;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: 0.02em;
}

.equipment-copy-reclining {
  min-height: var(--reclining-height);
  display: flex;
  flex-direction: column;
  align-self: start;
}

.equipment-flat-group {
  display: grid;
  grid-template-columns: var(--flat-width) minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  margin-top: auto;
}

.equipment-copy .equipment-flat-copy {
  align-self: start;
  font-size: 14px;
  line-height: 1.58;
}

/* タブレット */
@media (max-width: 980px) and (min-width: 701px) {
  .equipment-section {
    --normal-width: 210px;
    --normal-height: 185px;
    --reclining-width: 210px;
    --reclining-height: 205px;
    --flat-width: 118px;
    --flat-height: 72px;
    --incar-width: 165px;
    --incar-height: 205px;
    --step-width: 210px;
    --step-height: 190px;
    --step-use-width: 165px;
    --step-use-height: 190px;
  }

  .equipment-row-normal {
    grid-template-columns: 225px minmax(0, 1fr);
  }

  .equipment-row-reclining,
  .equipment-row-step {
    grid-template-columns: 225px minmax(0, 1fr) 175px;
  }

  .equipment-row {
    column-gap: 18px;
  }

  .equipment-copy p {
    font-size: 14px;
  }

  .equipment-copy .equipment-flat-copy {
    font-size: 12px;
  }
}

/* スマートフォン：参考画像のように横並びを維持 */
@media (max-width: 700px) {
  .equipment-section {
    /* スマホ用の写真調整値 */
    --normal-width: 106px;
    --normal-height: 132px;
    --reclining-width: 106px;
    --reclining-height: 166px;
    --flat-width: 74px;
    --flat-height: 49px;
    --incar-width: 82px;
    --incar-height: 166px;
    --step-width: 106px;
    --step-height: 150px;
    --step-use-width: 82px;
    --step-use-height: 150px;
  }

  .equipment-inner {
    width: min(96%, 520px);
  }

  .equipment-heading {
    margin-bottom: 20px;
  }

  .equipment-heading-title {
    gap: 7px;
  }

  .equipment-heading-title span {
    font-size: 23px;
  }

  .equipment-heading-lamp {
    width: 26px;
  }

  .equipment-row {
    column-gap: 9px;
    padding: 13px 0;
  }

  .equipment-row-normal {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .equipment-row-reclining,
  .equipment-row-step {
    grid-template-columns: 112px minmax(0, 1fr) 86px;
  }

  .equipment-photo-frame {
    border-radius: 6px;
  }

  .equipment-copy h3 {
    margin-bottom: 3px;
    font-size: 16px;
    line-height: 1.32;
    letter-spacing: 0;
  }

  .equipment-copy p {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: 0;
  }

  .equipment-flat-group {
    grid-template-columns: var(--flat-width) minmax(0, 1fr);
    gap: 7px;
    margin-top: auto;
  }

  .equipment-copy .equipment-flat-copy {
    font-size: 10.5px;
    line-height: 1.4;
  }
}

/* かなり小さいスマートフォン */
@media (max-width: 390px) {
  .equipment-section {
    --normal-width: 98px;
    --normal-height: 126px;
    --reclining-width: 98px;
    --reclining-height: 158px;
    --flat-width: 68px;
    --flat-height: 45px;
    --incar-width: 74px;
    --incar-height: 158px;
    --step-width: 98px;
    --step-height: 144px;
    --step-use-width: 74px;
    --step-use-height: 144px;
  }

  .equipment-row-normal {
    grid-template-columns: 103px minmax(0, 1fr);
  }

  .equipment-row-reclining,
  .equipment-row-step {
    grid-template-columns: 103px minmax(0, 1fr) 78px;
  }

  .equipment-row {
    column-gap: 7px;
  }

  .equipment-copy h3 {
    font-size: 15px;
  }

  .equipment-copy p {
    font-size: 10.5px;
  }

  .equipment-copy .equipment-flat-copy {
    font-size: 9.6px;
  }
}

/* 料金 */
.taxi-price-section {
  background: #eef3f6;
}

.price-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.price-detail-card {
  padding: 27px;
  background: #ffffff;
  border: 1px solid #d9e2e8;
  border-radius: 18px;
  box-shadow: 0 9px 22px rgba(13, 43, 69, 0.1);
}

.price-detail-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0d2b45;
  font-size: 22px;
}

.price-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #0d2b45;
  border-radius: 10px;
  font-size: 20px;
}

.price-card-sub {
  margin: 7px 0 17px;
  color: #7a8b98;
  font-size: 13px;
}

.price-list {
  margin: 0;
}

.price-list > div {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px dashed #d4dee5;
}

.price-list dt {
  color: #435663;
  font-weight: 700;
}

.price-list dd {
  color: #0d2b45;
  font-weight: 800;
  text-align: right;
}

.price-list dd strong {
  color: #e45b4d;
  font-size: 1.15em;
}

.price-small-note {
  margin-top: 14px;
  color: #6a7b87;
  font-size: 12px;
  line-height: 1.7;
}

.price-caution {
  margin-top: 22px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.72);
  border-radius: 14px;
}

.price-caution p {
  color: #536570;
  font-size: 12px;
  line-height: 1.75;
}

.simulation-panel {
  margin-top: 26px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  background: #ffffff;
  border: 1px solid #cbd8e1;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(13, 43, 69, 0.11);
}

.simulation-panel-copy {
  display: flex;
  align-items: center;
  gap: 18px;
}

.simulation-badge {
  min-width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  color: #0d2b45;
  background: #eef3f6;
  border: 2px solid #9db0bf;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.simulation-panel h3 {
  color: #0d2b45;
  font-size: 24px;
}

.simulation-panel p {
  color: #5c6e7a;
  font-size: 14px;
}

.simulation-panel-button {
  min-width: 260px;
  padding: 17px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #25119e, #3216d1);
  border-radius: 14px;
  box-shadow: 0 9px 18px rgba(39, 25, 152, 0.25);
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
}

/* 介護保険外 */
.private-service-section {
  background: #ffffff;
}

.private-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.private-service-card {
  padding: 28px;
  background: #f7fafc;
  border: 1px solid #d9e3e9;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(13, 43, 69, 0.09);
}

.private-service-icon {
  width: 74px;
  height: 74px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  color: #0d2b45;
  background: #e6eef3;
  border-radius: 17px;
}

.private-service-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.private-service-card h3 {
  color: #0d2b45;
  font-size: 21px;
}

.private-service-card > p:not(.private-service-fee) {
  margin-top: 10px;
  color: #536570;
  font-size: 14px;
  line-height: 1.85;
}

.private-service-fee {
  margin-top: 16px;
  padding-top: 13px;
  color: #0d2b45;
  border-top: 1px solid #d7e1e7;
  font-size: 13px;
  font-weight: 900;
}

.private-fee-list {
  margin-top: 14px;
}

.private-fee-list > div {
  padding: 9px 0;
  border-bottom: 1px dashed #d2dde4;
}

.private-fee-list dt {
  color: #536570;
  font-size: 12px;
  font-weight: 700;
}

.private-fee-list dd {
  color: #0d2b45;
  font-size: 14px;
  font-weight: 900;
}

/* ご利用の流れ */
.detailed-flow-section {
  background: #edf2f5;
}

.detailed-flow-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.detailed-flow-item {
  position: relative;
  min-height: 240px;
  padding: 25px 18px 20px;
  background: #ffffff;
  border: 1px solid #d8e2e8;
  border-radius: 17px;
  box-shadow: 0 8px 20px rgba(13, 43, 69, 0.1);
  text-align: center;
}

.detailed-flow-item:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -12px;
  top: 50%;
  z-index: 2;
  color: #0d2b45;
  font-size: 30px;
  font-weight: 900;
  transform: translateY(-50%);
}

.flow-step-number {
  position: absolute;
  top: 9px;
  left: 12px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #0d2b45;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}

.flow-step-icon {
  width: 68px;
  height: 68px;
  margin: 12px auto 15px;
  display: grid;
  place-items: center;
  color: #0d2b45;
  background: #edf3f7;
  border-radius: 50%;
  font-size: 30px;
}

.detailed-flow-item h3 {
  color: #0d2b45;
  font-size: 17px;
}

.detailed-flow-item p {
  margin-top: 10px;
  color: #5d6e7a;
  font-size: 12px;
  line-height: 1.7;
}

/* お問い合わせ */
.home-contact-section {
  padding: 78px 0;
  color: #0d2b45;
  background: #e7edf1;
}

.home-contact-inner {
  width: min(1180px, 92%);
  margin: 0 auto;
}

.home-contact-copy {
  margin-bottom: 30px;
  text-align: center;
}

.home-contact-kicker {
  color: #0d2b45;
  font-size: 18px;
  font-weight: 900;
}

.home-contact-copy h2 {
  margin-top: 3px;
  font-size: clamp(28px, 4vw, 40px);
}

.home-contact-copy > p:last-child {
  margin-top: 9px;
  color: #536570;
}

.home-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.home-contact-card {
  min-height: 130px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 17px;
  box-shadow: 0 9px 21px rgba(13, 43, 69, 0.12);
  text-decoration: none;
  text-align: center;
}

.home-contact-card-label {
  font-size: 12px;
  font-weight: 800;
}

.home-contact-card strong {
  margin-top: 5px;
  font-size: 20px;
}

.home-contact-card small {
  margin-top: 4px;
  font-size: 11px;
}

.phone-contact-card {
  color: #ffffff;
  background: #0d2b45;
}

.line-contact-card {
  color: #ffffff;
  background: #22a942;
}

.form-contact-card {
  color: #ffffff;
  background: #7fa4bd;
}

.simulation-contact-card {
  color: #ffffff;
  background: #2c16b8;
}

/* 詳細フッター */
.detailed-footer {
  padding-top: 48px;
}

.detailed-footer-inner {
  align-items: flex-start;
}

.footer-company-name {
  font-weight: 900;
}

.detailed-footer-nav {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

/* レスポンシブ */
@media (max-width: 980px) {
  .reason-grid,
  .private-service-grid {
    grid-template-columns: 1fr;
  }

  .about-detail-grid,
  .profile-vehicle-grid {
    grid-template-columns: 1fr;
  }

  .vehicle-card {
    grid-template-columns: 1fr;
  }

  .price-detail-grid {
    grid-template-columns: 1fr;
  }

  .detailed-flow-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .detailed-flow-item:not(:last-child)::after {
    display: none;
  }

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

@media (max-width: 700px) {
  .home-detail-section {
    padding: 68px 0;
  }

  .home-section-heading {
    margin-bottom: 32px;
  }

  .reason-card,
  .about-story-card,
  .history-card,
  .profile-card,
  .vehicle-card,
  .private-service-card,
  .price-detail-card {
    padding: 24px 20px;
  }

  .profile-list {
    grid-template-columns: 1fr;
  }

  .simulation-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .simulation-panel-copy {
    align-items: flex-start;
  }

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

  .detailed-flow-list {
    grid-template-columns: 1fr;
  }

  .detailed-flow-item {
    min-height: 0;
  }

  .home-contact-grid {
    grid-template-columns: 1fr;
  }

  .detailed-footer-nav {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   選ばれる3つの理由：保存したPNGアイコン
================================================== */

.reason-card .detail-icon img {
  display: block;
  width: 74px;
  height: 74px;
  object-fit: contain;
}

@media (max-width: 700px) {
  .reason-card .detail-icon img {
    width: 68px;
    height: 68px;
  }
}

/* ==================================================
   「選ばれる3つの理由」調整パネル
   数字はこの :root 内だけ変更してください

   X：＋で右、－で左
   Y：＋で下、－で上
   scale：1が基準／1.1で10％拡大／0.9で10％縮小
================================================== */

:root {
  /* セクション全体 */
  --reasons-content-width: 1180px;
  --reasons-padding-top: 50px;
  --reasons-padding-bottom: 30px;

  /* 見出し全体 */
  --reasons-heading-x: 0px;
  --reasons-heading-y: -15px;
  --reasons-heading-bottom-space: 46px;

  /* 英字「WHY CHOOSE US」 */
  --reasons-kicker-size: 13px;
  --reasons-kicker-y: 30px;

  /* 日本語見出し */
  --reasons-title-size: 35px;
  --reasons-title-gap: 14px;
  --reasons-title-y: 0px;

  /* 左右のランプ */
  --reasons-lamp-size: 90px;

  --reasons-left-lamp-x: 5px;
  --reasons-left-lamp-y: 0px;
  --reasons-left-lamp-scale: 1;

  --reasons-right-lamp-x: -5px;
  --reasons-right-lamp-y: 0px;
  --reasons-right-lamp-scale: 1;

  /* 見出し下の線 */
  --reasons-rule-width: 76px;
  --reasons-rule-height: 3px;
  --reasons-rule-y: -35px;

  /* 3枚のカード全体 */
  --reasons-grid-x: 0px;
  --reasons-grid-y: -50px;
  --reasons-card-gap: 24px;

  /* 各カードの位置 */
  --reason-card1-x: 0px;
  --reason-card1-y: 0px;

  --reason-card2-x: 0px;
  --reason-card2-y: 0px;

  --reason-card3-x: 0px;
  --reason-card3-y: 0px;

  /* カード共通サイズ */
  --reason-card-min-height: 345px;
  --reason-card-padding-top: 34px;
  --reason-card-padding-right: 28px;
  --reason-card-padding-bottom: 30px;
  --reason-card-padding-left: 28px;
  --reason-card-radius: 22px;

  /* アイコンの丸い枠 */
  --reason-icon-box-size: 92px;
  --reason-icon-box-bottom-space: 22px;

  /* 画像アイコン共通サイズ */
  --reason-icon-image-size: 74px;

  /* 料金アイコンだけ */
  --reason-icon1-x: 0px;
  --reason-icon1-y: 0px;
  --reason-icon1-scale: 1.55;

  /* 24時間365日アイコンだけ */
  --reason-icon2-x: 0px;
  --reason-icon2-y: 0px;
  --reason-icon2-scale: 1.5;

  /* 介護福祉士アイコンだけ */
  --reason-icon3-x: 0px;
  --reason-icon3-y: 0px;
  --reason-icon3-scale: 1.5;

  /* カード見出し */
  --reason-card-title-size: 30px;
  --reason-card-title-bottom-space: 17px;
  --reason-card-title-y: 0px;

  /* カード説明文 */
  --reason-card-text-size: 20px;
  --reason-card-text-line-height: 1.5;
  --reason-card-text-y: 0px;
}

@media (min-width: 821px) {

  /* セクション全体 */
  .reasons-section {
    padding-top: var(--reasons-padding-top) !important;
    padding-bottom: var(--reasons-padding-bottom) !important;
  }

  .reasons-section .home-detail-inner {
    width: min(var(--reasons-content-width), 92%) !important;
  }

  /* 見出し全体 */
  .reasons-section .home-section-heading {
    margin-bottom: var(--reasons-heading-bottom-space) !important;
    transform: translate(
      var(--reasons-heading-x),
      var(--reasons-heading-y)
    ) !important;
  }

  .reasons-section .home-section-kicker {
    font-size: var(--reasons-kicker-size) !important;
    transform: translateY(var(--reasons-kicker-y)) !important;
  }

  .reasons-heading-title {
    gap: var(--reasons-title-gap) !important;
    font-size: var(--reasons-title-size) !important;
    transform: translateY(var(--reasons-title-y)) !important;
  }

  /* 左のランプ */
  .reasons-heading-title .reasons-heading-lamp:first-child {
    width: var(--reasons-lamp-size) !important;
    transform:
      translate(
        var(--reasons-left-lamp-x),
        var(--reasons-left-lamp-y)
      )
      scale(var(--reasons-left-lamp-scale)) !important;
  }

  /* 右のランプ：左右反転 */
  .reasons-heading-title .reasons-heading-lamp:last-child {
    width: var(--reasons-lamp-size) !important;
    transform:
      translate(
        var(--reasons-right-lamp-x),
        var(--reasons-right-lamp-y)
      )
      scaleX(-1)
      scale(var(--reasons-right-lamp-scale)) !important;
  }

  .reasons-section .home-heading-rule {
    width: var(--reasons-rule-width) !important;
    height: var(--reasons-rule-height) !important;
    transform: translateY(var(--reasons-rule-y)) !important;
  }

  /* 3枚のカード全体 */
  .reason-grid {
    gap: var(--reasons-card-gap) !important;
    transform: translate(
      var(--reasons-grid-x),
      var(--reasons-grid-y)
    ) !important;
  }

  /* 各カードの位置 */
  .reason-card:nth-child(1) {
    transform: translate(
      var(--reason-card1-x),
      var(--reason-card1-y)
    ) !important;
  }

  .reason-card:nth-child(2) {
    transform: translate(
      var(--reason-card2-x),
      var(--reason-card2-y)
    ) !important;
  }

  .reason-card:nth-child(3) {
    transform: translate(
      var(--reason-card3-x),
      var(--reason-card3-y)
    ) !important;
  }

  /* カード共通 */
  .reason-card {
    min-height: var(--reason-card-min-height) !important;
    padding:
      var(--reason-card-padding-top)
      var(--reason-card-padding-right)
      var(--reason-card-padding-bottom)
      var(--reason-card-padding-left) !important;
    border-radius: var(--reason-card-radius) !important;
  }

  /* アイコンの丸い枠 */
  .reason-card .detail-icon {
    width: var(--reason-icon-box-size) !important;
    height: var(--reason-icon-box-size) !important;
    margin-bottom: var(--reason-icon-box-bottom-space) !important;
  }

  /* 画像アイコン共通 */
  .reason-card .detail-icon img {
    width: var(--reason-icon-image-size) !important;
    height: var(--reason-icon-image-size) !important;
  }

  /* 各アイコン個別 */
  .reason-card:nth-child(1) .detail-icon img {
    transform:
      translate(var(--reason-icon1-x), var(--reason-icon1-y))
      scale(var(--reason-icon1-scale)) !important;
  }

  .reason-card:nth-child(2) .detail-icon img {
    transform:
      translate(var(--reason-icon2-x), var(--reason-icon2-y))
      scale(var(--reason-icon2-scale)) !important;
  }

  .reason-card:nth-child(3) .detail-icon img {
    transform:
      translate(var(--reason-icon3-x), var(--reason-icon3-y))
      scale(var(--reason-icon3-scale)) !important;
  }

  /* カード見出し */
  .reason-card h3 {
    margin-bottom: var(--reason-card-title-bottom-space) !important;
    font-size: var(--reason-card-title-size) !important;
    transform: translateY(var(--reason-card-title-y)) !important;
  }

  /* カード説明文 */
  .reason-card p {
    font-size: var(--reason-card-text-size) !important;
    line-height: var(--reason-card-text-line-height) !important;
    transform: translateY(var(--reason-card-text-y)) !important;
  }
}

/* スマートフォンではランプを少し小さくして見出しを折り返しやすくする */
@media (max-width: 820px) {
  .reasons-heading-title {
    gap: 8px !important;
  }

  .reasons-heading-lamp {
    width: 24px !important;
  }

  .reasons-heading-title .reasons-heading-lamp:last-child {
    transform: scaleX(-1) !important;
  }
}

/* ==================================================
   選ばれる3つの理由：ユーザー調整済みCSSからの仕上げ変更

   ・ランプを「WHY CHOOSE US」と同じブルーグレーに
   ・右側ランプを反転
   ・カードアイコンもブルーグレーに
   ・アイコンを囲う丸を削除
   ・中央と右の見出しを、左の2行見出しの中央に配置
   ・見出しと説明文の間にブルーグレーの線を追加
================================================== */

:root {
  /* 英字と同じブルーグレー */
  --reasons-accent-color: #6f879a;

  /* 見出し文字が入る高さ */
  --reason-title-area-height: 72px;

  /* 見出し下の区切り線 */
  --reason-divider-width: 84px;
  --reason-divider-height: 2px;
  --reason-divider-top-space: 13px;
  --reason-divider-bottom-space: 19px;
}

/*
  PNGをブルーグレーへ変換するフィルター
  対象色：#6f879a
*/
.reasons-heading-lamp,
.reason-card .detail-icon img {
  filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(12%)
    saturate(780%)
    hue-rotate(163deg)
    brightness(93%)
    contrast(87%) !important;
}

/* ランプは英字と同じ濃さ */
.reasons-heading-lamp {
  opacity: 1 !important;
}

/* 右側ランプを反転し、調整パネルの位置・拡大率も維持 */
@media (min-width: 821px) {
  .reasons-heading-title .reasons-heading-lamp:last-child {
    transform:
      translate(
        var(--reasons-right-lamp-x),
        var(--reasons-right-lamp-y)
      )
      scaleX(-1)
      scale(var(--reasons-right-lamp-scale)) !important;
  }
}

/* アイコンを囲っていた丸い背景と枠線を削除 */
.reason-card .detail-icon {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/*
  3枚とも見出し文字の高さを統一。
  左の2行見出しを基準に、中央・右の1行見出しを縦中央へ配置。
*/
.reason-card h3 {
  min-height:
    calc(
      var(--reason-title-area-height)
      + var(--reason-divider-height)
      + var(--reason-divider-top-space)
    ) !important;

  margin-bottom: var(--reason-divider-bottom-space) !important;

  display: grid !important;
  grid-template-rows:
    var(--reason-title-area-height)
    var(--reason-divider-height);
  justify-items: center !important;
  align-items: center !important;
  row-gap: var(--reason-divider-top-space) !important;

  text-align: center !important;

  transform:
    translateY(var(--reason-card-title-y)) !important;
}

/* 見出しと説明文の間のブルーグレー線 */
.reason-card h3::after {
  content: "";
  display: block;

  width: var(--reason-divider-width);
  height: var(--reason-divider-height);

  background: var(--reasons-accent-color);
  border-radius: 999px;
}

/* スマートフォン */
@media (max-width: 820px) {
  .reasons-heading-title .reasons-heading-lamp:last-child {
    transform: scaleX(-1) !important;
  }

  .reason-card h3 {
    grid-template-rows:
      auto
      var(--reason-divider-height);

    min-height: 0 !important;
  }
}

/* ==================================================
   選ばれる3つの理由：カードを浮かせる調整
   数字はこの :root 内だけ変更してください
================================================== */

:root {
  /* 通常時にカードを上へ持ち上げる量 */
  --reason-card-lift: 5px;

  /* マウスを重ねた時に上へ持ち上げる量 */
  --reason-card-hover-lift: 11px;

  /* 通常時の影 */
  --reason-card-shadow:
    0 22px 42px rgba(13, 43, 69, 0.17),
    0 8px 18px rgba(13, 43, 69, 0.10);

  /* マウスを重ねた時の影 */
  --reason-card-hover-shadow:
    0 30px 56px rgba(13, 43, 69, 0.22),
    0 12px 24px rgba(13, 43, 69, 0.13);
}

/* カードの立体感 */
.reason-card {
  position: relative !important;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: var(--reason-card-shadow) !important;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease !important;
}

/* 上側に薄い光を入れて立体感を補強 */
.reason-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(111, 135, 154, 0.08);
}

/* 個別に調整したX・Yを残したまま、全カードを少し浮かせる */
@media (min-width: 821px) {
  .reason-card:nth-child(1) {
    transform:
      translate(
        var(--reason-card1-x),
        calc(var(--reason-card1-y) - var(--reason-card-lift))
      ) !important;
  }

  .reason-card:nth-child(2) {
    transform:
      translate(
        var(--reason-card2-x),
        calc(var(--reason-card2-y) - var(--reason-card-lift))
      ) !important;
  }

  .reason-card:nth-child(3) {
    transform:
      translate(
        var(--reason-card3-x),
        calc(var(--reason-card3-y) - var(--reason-card-lift))
      ) !important;
  }

  .reason-card:nth-child(1):hover {
    z-index: 3;
    box-shadow: var(--reason-card-hover-shadow) !important;
    transform:
      translate(
        var(--reason-card1-x),
        calc(var(--reason-card1-y) - var(--reason-card-hover-lift))
      ) !important;
  }

  .reason-card:nth-child(2):hover {
    z-index: 3;
    box-shadow: var(--reason-card-hover-shadow) !important;
    transform:
      translate(
        var(--reason-card2-x),
        calc(var(--reason-card2-y) - var(--reason-card-hover-lift))
      ) !important;
  }

  .reason-card:nth-child(3):hover {
    z-index: 3;
    box-shadow: var(--reason-card-hover-shadow) !important;
    transform:
      translate(
        var(--reason-card3-x),
        calc(var(--reason-card3-y) - var(--reason-card-hover-lift))
      ) !important;
  }
}

/* スマートフォンでは移動量を少し控えめにする */
@media (max-width: 820px) {
  .reason-card {
    box-shadow:
      0 16px 32px rgba(13, 43, 69, 0.15),
      0 6px 14px rgba(13, 43, 69, 0.08) !important;
  }
}

/* ==================================================
   選ばれる3つの理由：区切り線と説明文の太さ調整
================================================== */

:root {
  /* 説明文と同じ横幅 */
  --reason-divider-width: 100%;

  /* 説明文の太さ */
  --reason-card-text-weight: 500;
}

/* 見出しと説明文の間の線を、説明文と同じ幅にする */
.reason-card h3::after {
  width: var(--reason-divider-width) !important;
}

/* 説明文を少し太くして読みやすくする */
.reason-card p {
  font-weight: var(--reason-card-text-weight) !important;
}

/* ==================================================
   ケアタクシーアラジンについて
   参考画像の構成をそのまま広げたレイアウト

   左：沿革＋ドライバーカード
   右：車両写真2枚
   ロゴはカードに入れず、そのまま表示
================================================== */

:root {
  /* セクション全体 */
  --about-reference-content-width: 1080px;
  --about-reference-padding-top: 92px;
  --about-reference-padding-bottom: 105px;

  /* 左右の比率・間隔 */
  --about-reference-left-width: 1.45fr;
  --about-reference-right-width: 0.8fr;
  --about-reference-column-gap: 58px;

  /* 沿革 */
  --about-reference-history-gap: 30px;
  --about-reference-mark-width: 118px;
  --about-reference-noah-width: 98px;
  --about-reference-aladdin-width: 108px;

  /* ドライバーカード */
  --about-reference-driver-top-space: 42px;
  --about-reference-driver-photo-width: 170px;
  --about-reference-driver-card-padding: 20px;
  --about-reference-driver-gap: 22px;

  /* 車両写真 */
  --about-reference-vehicle-gap: 34px;
  --about-reference-vehicle-height: 245px;
}

/* セクション */
.about-reference-section {
  padding-top: var(--about-reference-padding-top) !important;
  padding-bottom: var(--about-reference-padding-bottom) !important;
  background: #f7f9fb !important;
}

.about-reference-section .home-detail-inner {
  width: min(var(--about-reference-content-width), 92%) !important;
}

/* 見出し */
.about-reference-heading {
  margin-bottom: 46px !important;
}

.about-reference-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.about-reference-title span {
  display: inline-block;
}

.about-reference-lamp {
  width: 34px;
  height: auto;
  object-fit: contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(12%)
    saturate(780%)
    hue-rotate(163deg)
    brightness(93%)
    contrast(87%);
}

.about-reference-lamp-right {
  transform: scaleX(-1);
}

/* 全体配置 */
.about-reference-layout {
  display: grid;
  grid-template-columns:
    minmax(0, var(--about-reference-left-width))
    minmax(260px, var(--about-reference-right-width));
  align-items: start;
  gap: var(--about-reference-column-gap);
}

.about-reference-main {
  min-width: 0;
}

/* 沿革タイムライン */
.about-reference-timeline {
  position: relative;
  display: grid;
  gap: var(--about-reference-history-gap);
}

.about-reference-timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--about-reference-mark-width) / 2);
  top: 86px;
  bottom: 72px;
  width: 2px;
  background: #8da2b2;
  transform: translateX(-50%);
}

.about-reference-history-item {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: var(--about-reference-mark-width) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.about-reference-mark {
  min-height: 82px;
  display: grid;
  place-items: center;
}

.about-reference-logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

.about-reference-logo-noah {
  max-width: var(--about-reference-noah-width);
  max-height: 76px;
}

.about-reference-logo-aladdin {
  max-width: var(--about-reference-aladdin-width);
  max-height: 66px;
}

.about-reference-home-mark {
  width: 66px;
  height: 66px;
  margin: 0 auto;

  color: #ffffff;
  background: #0d2b45;

  border-radius: 50%;
}

.about-reference-home-mark svg {
  width: 38px;
  height: 38px;
  fill: currentColor;
}

.about-reference-history-copy time {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;

  color: #ffffff;
  background: #0d2b45;

  border-radius: 5px;

  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.about-reference-history-copy p {
  color: #314858;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.75;
}

/* ドライバーカード */
.about-reference-driver-card {
  margin-top: var(--about-reference-driver-top-space);
  padding: var(--about-reference-driver-card-padding);

  display: grid;
  grid-template-columns: var(--about-reference-driver-photo-width) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--about-reference-driver-gap);

  color: #ffffff;
  background: linear-gradient(145deg, #0b2944, #123a5c);

  border-radius: 14px;

  box-shadow:
    0 18px 38px rgba(13, 43, 69, 0.23);
}

.about-reference-driver-photo-box {
  min-height: 210px;
  overflow: hidden;
  background: #dce5eb;
  border-radius: 10px;
}

.about-reference-driver-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about-reference-driver-copy {
  min-width: 0;
}

.about-reference-driver-label {
  font-size: 12px;
  font-weight: 700;
}

.about-reference-driver-copy h3 {
  margin-top: 2px;
  padding-bottom: 8px;

  border-bottom: 2px solid rgba(255, 255, 255, 0.9);

  font-size: 20px;
  line-height: 1.35;
}

.about-reference-driver-copy h3 small {
  margin-left: 7px;
  font-size: 11px;
  font-weight: 600;
}

.about-reference-driver-list {
  margin-top: 10px;
}

.about-reference-driver-list > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
}

.about-reference-driver-list dt,
.about-reference-driver-list dd {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
}

.about-reference-driver-list dt {
  color: #dce9f2;
}

.about-reference-driver-message {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 800;
}

/* 右側の車両写真 */
.about-reference-vehicles {
  display: grid;
  gap: var(--about-reference-vehicle-gap);
}

.about-reference-vehicle-item {
  margin: 0;
}

.about-reference-vehicle-item figcaption {
  margin-bottom: 10px;
  color: #6f879a;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.about-reference-vehicle-item:first-child figcaption {
  margin-top: 9px;
  margin-bottom: 0;
  text-align: right;
}

.about-reference-vehicle-photo {
  display: block;
  width: 100%;
  height: var(--about-reference-vehicle-height);
  object-fit: cover;

  border-radius: 16px;

  box-shadow:
    0 14px 28px rgba(13, 43, 69, 0.15);
}

/* タブレット */
@media (max-width: 980px) {
  .about-reference-layout {
    grid-template-columns: 1fr;
  }

  .about-reference-vehicles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* スマートフォン */
@media (max-width: 700px) {
  .about-reference-section {
    padding-top: 70px !important;
    padding-bottom: 80px !important;
  }

  .about-reference-title {
    gap: 8px;
  }

  .about-reference-lamp {
    width: 25px;
  }

  .about-reference-history-item {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
  }

  .about-reference-timeline::before {
    left: 41px;
  }

  .about-reference-driver-card {
    grid-template-columns: 1fr;
  }

  .about-reference-driver-photo-box {
    width: 185px;
    min-height: 220px;
    margin: 0 auto;
  }

  .about-reference-vehicles {
    grid-template-columns: 1fr;
  }

  .about-reference-vehicle-photo {
    height: 230px;
  }
}

/* ==================================================
   アラジンについて：縦ライン2本＋黒い車を縦長比率で表示
================================================== */

:root {
  /* 縦ライン共通 */
  --about-line-width: 2px;
  --about-line-color: #8da2b2;

  /* 1本目：Noahロゴからアラジンロゴの間 */
  --about-line1-x: 0px;
  --about-line1-y: 38px;
  --about-line1-height: 48px;

  /* 2本目：アラジンロゴから家アイコンの間 */
  --about-line2-x: 0px;
  --about-line2-y: 38px;
  --about-line2-height: 48px;

  /* 黒い車の横幅 */
  --about-new-car-width: 100%;
}

/* 以前の1本ラインは非表示 */
.about-reference-timeline::before {
  display: none !important;
}

/* 各沿革項目をラインの基準にする */
.about-reference-history-item {
  position: relative !important;
}

/* 2本の縦ライン共通 */
.about-reference-line {
  position: absolute;
  z-index: 0;

  left: calc(var(--about-reference-mark-width) / 2);
  top: 50%;

  width: var(--about-line-width);
  background: var(--about-line-color);

  transform: translateX(-50%);
  pointer-events: none;
}

/* 1本目 */
.about-reference-line-one {
  height: var(--about-line1-height);
  margin-left: var(--about-line1-x);
  margin-top: var(--about-line1-y);
}

/* 2本目 */
.about-reference-line-two {
  height: var(--about-line2-height);
  margin-left: var(--about-line2-x);
  margin-top: var(--about-line2-y);
}

/* ロゴや家アイコンをラインより前に表示 */
.about-reference-mark,
.about-reference-history-copy {
  position: relative;
  z-index: 1;
}

/* 現在の車両はこれまでどおり */
.about-reference-vehicle-photo-current {
  height: var(--about-reference-vehicle-height) !important;
  object-fit: cover !important;
}

/* 黒い車は元画像の縦長比率をそのまま表示 */
.about-reference-vehicle-photo-new {
  width: var(--about-new-car-width) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* スマートフォンでは線の基準位置を小さいマーク幅へ合わせる */
@media (max-width: 700px) {
  .about-reference-line {
    left: 41px;
  }
}


/* 3つの理由：スマートフォンの下余白も少し縮める */
@media (max-width: 700px) {
  .reasons-section {
    padding-bottom: 24px !important;
  }
}

/* ==================================================
   黒い車：縦長比率を高さ基準で調整
   new-car.png 本来の縦横比を維持したまま表示
================================================== */

:root {
  /* 黒い車の表示サイズ・位置 */
  --about-new-car-height: 390px;
  --about-new-car-x: 0px;
  --about-new-car-y: 0px;
  --about-new-car-scale: 1;
}

/* 黒い車の写真を中央に配置 */
.about-reference-vehicle-item:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 横幅ではなく高さを基準にし、元画像の比率を維持 */
.about-reference-vehicle-photo-new {
  width: auto !important;
  height: var(--about-new-car-height) !important;
  max-width: 100% !important;
  max-height: none !important;

  object-fit: contain !important;

  transform:
    translate(
      var(--about-new-car-x),
      var(--about-new-car-y)
    )
    scale(var(--about-new-car-scale)) !important;

  transform-origin: center center !important;
}

/* 黒い車の見出しも写真幅の中央に合わせる */
.about-reference-vehicle-item:last-child figcaption {
  width: 100%;
  text-align: center !important;
}

@media (max-width: 700px) {
  :root {
    --about-new-car-height: 320px;
  }
}

/* ==================================================
   ABOUT ALADDIN：全パーツ調整パネル
   数字はこの :root 内だけ変更してください

   X：＋で右、－で左
   Y：＋で下、－で上
   scale：1が基準／1.1で10％拡大／0.9で10％縮小
================================================== */

:root {
  /* セクション全体 */
  --about-section-x: 0px;
  --about-section-y: 0px;
  --about-section-content-width: 1080px;

  /* 見出し全体 */
  --about-heading-x: 0px;
  --about-heading-y: 0px;
  --about-heading-bottom-space: 46px;

  /* ABOUT ALADDIN 英字 */
  --about-kicker-size: 13px;
  --about-kicker-x: 0px;
  --about-kicker-y: 0px;

  /* 日本語タイトル */
  --about-title-size: 42px;
  --about-title-gap: 15px;
  --about-title-x: 0px;
  --about-title-y: 0px;

  /* 左右の carpet.png */
  --about-carpet-width: 34px;

  --about-carpet-left-x: -20px;
  --about-carpet-left-y: -5px;
  --about-carpet-left-scale: 2;

  --about-carpet-right-x: 20px;
  --about-carpet-right-y: -5px;
  --about-carpet-right-scale: 2;

  /* タイトル下の線 */
  --about-heading-rule-width: 76px;
  --about-heading-rule-height: 3px;
  --about-heading-rule-x: 0px;
  --about-heading-rule-y: 0px;

  /* 左カラム＋右カラム全体 */
  --about-layout-x: 0px;
  --about-layout-y: 0px;
  --about-left-column-width: 1.45fr;
  --about-right-column-width: 0.8fr;
  --about-column-gap: 58px;

  /* 沿革全体 */
  --about-timeline-x: 0px;
  --about-timeline-y: 0px;
  --about-history-gap: 50px;
  --about-mark-column-width: 118px;
  --about-history-text-gap: 20px;

  /* Noahロゴ */
  --about-noah-logo-width: 98px;
  --about-noah-logo-x: 0px;
  --about-noah-logo-y: 0px;
  --about-noah-logo-scale: 1.5;

  /* アラジンロゴ */
  --about-aladdin-logo-width: 108px;
  --about-aladdin-logo-x: 0px;
  --about-aladdin-logo-y: -10px;
  --about-aladdin-logo-scale: 1.2;

  /* 日付 */
  --about-date-size: 16px;
  --about-date-x: 0px;
  --about-date-y: 0px;

  /* 沿革説明文 */
  --about-history-text-size: 16px;
  --about-history-text-weight: 600;
  --about-history-text-x: 0px;
  --about-history-text-y: 0px;

  /* 家の外側の真円 */
  --about-home-circle-size: 90px;
  --about-home-circle-x: 0px;
  --about-home-circle-y: -30px;
  --about-home-circle-color: #0d2b45;

  /* home.png */
  --about-home-image-size: 50px;
  --about-home-image-x: -3px;
  --about-home-image-y: -2px;
  --about-home-image-scale: 1.4;

  /* 縦ライン共通 */
  --about-line-width: 2px;
  --about-line-color: #8da2b2;

  /* 1本目：Noah → アラジン */
  --about-line1-x: 0px;
  --about-line1-y: 60px;
  --about-line1-height: 40px;

  /* 2本目：アラジン → 家 */
  --about-line2-x: 0px;
  --about-line2-y: 30px;
  --about-line2-height: 48px;

  /* ドライバーカード全体 */
  --about-driver-card-x: 0px;
  --about-driver-card-y: 0px;
  --about-driver-card-width: 100%;
  --about-driver-card-top-space: 42px;
  --about-driver-card-padding: 20px;
  --about-driver-card-radius: 14px;
  --about-driver-card-gap: 22px;

  /* ドライバー写真 */
  --about-driver-photo-column: 170px;
  --about-driver-photo-height: 210px;
  --about-driver-photo-x: 0px;
  --about-driver-photo-y: 0px;
  --about-driver-photo-scale: 1;

  /* ドライバー文字 */
  --about-driver-copy-x: 0px;
  --about-driver-copy-y: 0px;
  --about-driver-name-size: 22px;
  --about-driver-text-size: 14px;

  /* 車両写真エリア全体 */
  --about-vehicles-x: 0px;
  --about-vehicles-y: 0px;
  --about-vehicle-gap: 34px;

  /* 現在の車両 */
  --about-current-car-width: 100%;
  --about-current-car-height: 380px;
  --about-current-car-x: 0px;
  --about-current-car-y: 0px;
  --about-current-car-scale: 1;

  /* 黒い車 */
  --about-new-car-height: 250px;
  --about-new-car-x: 0px;
  --about-new-car-y: -35px;
  --about-new-car-scale: 1.08;

  /* 車両見出し */
  --about-vehicle-caption-size: 13px;
  --about-vehicle-caption-x: 0px;
  --about-vehicle-caption-y: -30px;
}

@media (min-width: 821px) {

  /* セクション */
  .about-reference-section .home-detail-inner {
    width: min(var(--about-section-content-width), 92%) !important;
    transform:
      translate(var(--about-section-x), var(--about-section-y)) !important;
  }

  /* 見出し */
  .about-reference-heading {
    margin-bottom: var(--about-heading-bottom-space) !important;
    transform:
      translate(var(--about-heading-x), var(--about-heading-y)) !important;
  }

  .about-reference-heading .home-section-kicker {
    font-size: var(--about-kicker-size) !important;
    transform:
      translate(var(--about-kicker-x), var(--about-kicker-y)) !important;
  }

  .about-reference-title {
    gap: var(--about-title-gap) !important;
    font-size: var(--about-title-size) !important;
    transform:
      translate(var(--about-title-x), var(--about-title-y)) !important;
  }

  /* carpet.png */
  .about-reference-lamp {
    width: var(--about-carpet-width) !important;
    height: auto !important;
    filter: none !important;
  }

  .about-reference-lamp-left {
    transform:
      translate(var(--about-carpet-left-x), var(--about-carpet-left-y))
      scale(var(--about-carpet-left-scale)) !important;
  }

  .about-reference-lamp-right {
    transform:
      translate(var(--about-carpet-right-x), var(--about-carpet-right-y))
      scaleX(-1)
      scale(var(--about-carpet-right-scale)) !important;
  }

  .about-reference-heading .home-heading-rule {
    width: var(--about-heading-rule-width) !important;
    height: var(--about-heading-rule-height) !important;
    transform:
      translate(var(--about-heading-rule-x), var(--about-heading-rule-y)) !important;
  }

  /* 左右カラム */
  .about-reference-layout {
    grid-template-columns:
      minmax(0, var(--about-left-column-width))
      minmax(260px, var(--about-right-column-width)) !important;
    gap: var(--about-column-gap) !important;
    transform:
      translate(var(--about-layout-x), var(--about-layout-y)) !important;
  }

  /* 沿革 */
  .about-reference-timeline {
    gap: var(--about-history-gap) !important;
    transform:
      translate(var(--about-timeline-x), var(--about-timeline-y)) !important;
  }

  .about-reference-history-item {
    grid-template-columns:
      var(--about-mark-column-width)
      minmax(0, 1fr) !important;
    gap: var(--about-history-text-gap) !important;
  }

  /* ロゴ */
  .about-reference-logo-noah {
    max-width: none !important;
    width: var(--about-noah-logo-width) !important;
    transform:
      translate(var(--about-noah-logo-x), var(--about-noah-logo-y))
      scale(var(--about-noah-logo-scale)) !important;
  }

  .about-reference-logo-aladdin {
    max-width: none !important;
    width: var(--about-aladdin-logo-width) !important;
    transform:
      translate(var(--about-aladdin-logo-x), var(--about-aladdin-logo-y))
      scale(var(--about-aladdin-logo-scale)) !important;
  }

  /* 日付・説明文 */
  .about-reference-history-copy time {
    font-size: var(--about-date-size) !important;
    transform:
      translate(var(--about-date-x), var(--about-date-y)) !important;
  }

  .about-reference-history-copy p {
    font-size: var(--about-history-text-size) !important;
    font-weight: var(--about-history-text-weight) !important;
    transform:
      translate(var(--about-history-text-x), var(--about-history-text-y)) !important;
  }

  /* 家の外側は必ず真円 */
  .about-reference-home-mark {
    width: var(--about-home-circle-size) !important;
    height: var(--about-home-circle-size) !important;
    min-width: var(--about-home-circle-size) !important;
    min-height: var(--about-home-circle-size) !important;
    aspect-ratio: 1 / 1 !important;

    margin: 0 auto !important;

    display: grid !important;
    place-items: center !important;

    background: var(--about-home-circle-color) !important;
    border-radius: 50% !important;

    transform:
      translate(var(--about-home-circle-x), var(--about-home-circle-y)) !important;
  }

  .about-reference-home-image {
    width: var(--about-home-image-size) !important;
    height: var(--about-home-image-size) !important;
    object-fit: contain !important;

    transform:
      translate(var(--about-home-image-x), var(--about-home-image-y))
      scale(var(--about-home-image-scale)) !important;
  }

  /* 縦ライン */
  .about-reference-line {
    left: calc(var(--about-mark-column-width) / 2) !important;
    width: var(--about-line-width) !important;
    background: var(--about-line-color) !important;
  }

  .about-reference-line-one {
    height: var(--about-line1-height) !important;
    margin-left: var(--about-line1-x) !important;
    margin-top: var(--about-line1-y) !important;
  }

  .about-reference-line-two {
    height: var(--about-line2-height) !important;
    margin-left: var(--about-line2-x) !important;
    margin-top: var(--about-line2-y) !important;
  }

  /* ドライバーカード */
  .about-reference-driver-card {
    width: var(--about-driver-card-width) !important;
    margin-top: var(--about-driver-card-top-space) !important;
    padding: var(--about-driver-card-padding) !important;

    grid-template-columns:
      var(--about-driver-photo-column)
      minmax(0, 1fr) !important;

    gap: var(--about-driver-card-gap) !important;
    border-radius: var(--about-driver-card-radius) !important;

    transform:
      translate(var(--about-driver-card-x), var(--about-driver-card-y)) !important;
  }

  .about-reference-driver-photo-box {
    min-height: var(--about-driver-photo-height) !important;
    height: var(--about-driver-photo-height) !important;
  }

  .about-reference-driver-photo {
    transform:
      translate(var(--about-driver-photo-x), var(--about-driver-photo-y))
      scale(var(--about-driver-photo-scale)) !important;
  }

  .about-reference-driver-copy {
    transform:
      translate(var(--about-driver-copy-x), var(--about-driver-copy-y)) !important;
  }

  .about-reference-driver-copy h3 {
    font-size: var(--about-driver-name-size) !important;
  }

  .about-reference-driver-list dt,
  .about-reference-driver-list dd,
  .about-reference-driver-message {
    font-size: var(--about-driver-text-size) !important;
  }

  /* 車両写真エリア */
  .about-reference-vehicles {
    gap: var(--about-vehicle-gap) !important;
    transform:
      translate(var(--about-vehicles-x), var(--about-vehicles-y)) !important;
  }

  .about-reference-vehicle-photo-current {
    width: var(--about-current-car-width) !important;
    height: var(--about-current-car-height) !important;

    transform:
      translate(var(--about-current-car-x), var(--about-current-car-y))
      scale(var(--about-current-car-scale)) !important;
  }

  .about-reference-vehicle-photo-new {
    width: auto !important;
    height: var(--about-new-car-height) !important;

    transform:
      translate(var(--about-new-car-x), var(--about-new-car-y))
      scale(var(--about-new-car-scale)) !important;
  }

  .about-reference-vehicle-item figcaption {
    font-size: var(--about-vehicle-caption-size) !important;
    transform:
      translate(var(--about-vehicle-caption-x), var(--about-vehicle-caption-y)) !important;
  }
}

/* スマートフォン */
@media (max-width: 820px) {
  .about-reference-lamp {
    width: 25px !important;
    filter: none !important;
  }

  .about-reference-lamp-right {
    transform: scaleX(-1) !important;
  }

  .about-reference-home-mark {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }

  .about-reference-home-image {
    width: 32px !important;
    height: 32px !important;
  }
}


/* home.png を白表示 */
.about-reference-home-image {
  filter: brightness(0) invert(1) !important;
}

/* ==================================================
   ABOUT ALADDIN：車両写真を左側2段の高さへ揃える最終調整

   上段
   ・現在の黒い車 ＝ 沿革全体の高さ

   下段
   ・変更予定車両 ＝ ドライバー紹介カードの高さ

   ・2枚の横幅は同じ
   ・現在の車両タイトルは右下
   ・変更予定タイトルは左上
   ・ABOUTセクション下余白は「3つの理由」と同じ
   ・carpet.png はブルーグレー
================================================== */

:root {
  /* 左右2列の間隔 */
  --about-final-column-gap: 58px;

  /* 沿革とドライバーカードの間隔 */
  --about-final-row-gap: 42px;

  /* 右側の車両写真2枚の共通横幅 */
  --about-vehicle-common-width: 100%;

  /* 現在の黒い車：写真内の見せる位置 */
  --about-current-car-object-x: 50%;
  --about-current-car-object-y: 50%;

  /* 変更予定車両：写真内の見せる位置 */
  --about-new-car-object-x: 50%;
  --about-new-car-object-y: 50%;

  /* 写真の拡大率 */
  --about-current-car-photo-scale: 1;
  --about-new-car-photo-scale: 1;

  /* 写真タイトル */
  --about-vehicle-title-size: 13px;
  --about-vehicle-title-padding-y: 5px;
  --about-vehicle-title-padding-x: 10px;

  /* 「現在の車両」右下位置 */
  --about-current-title-right: 13px;
  --about-current-title-bottom: 12px;

  /* 「令和8年秋頃 車両変更予定」左上位置 */
  --about-new-title-left: 13px;
  --about-new-title-top: 12px;
}

/* ABOUTの下余白を「3つの理由」と同じ値にする */
.about-reference-section {
  padding-bottom: var(--reasons-padding-bottom) !important;
}

/*
  親を2段グリッドにする。
  左の「沿革／ドライバー」と右の「車両2枚」が
  同じ行の高さを共有する。
*/
@media (min-width: 981px) {
  .about-reference-layout {
    display: grid !important;

    grid-template-columns:
      minmax(0, var(--about-left-column-width))
      minmax(260px, var(--about-right-column-width)) !important;

    grid-template-rows: auto auto !important;

    column-gap: var(--about-final-column-gap) !important;
    row-gap: var(--about-final-row-gap) !important;

    align-items: stretch !important;
  }

  /*
    左カラムを親の2段に連動
    1段目：沿革
    2段目：ドライバーカード
  */
  .about-reference-main {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    display: grid !important;
    grid-template-rows: subgrid !important;

    min-width: 0 !important;
  }

  .about-reference-timeline {
    grid-row: 1 !important;
    align-self: stretch !important;
  }

  .about-reference-driver-card {
    grid-row: 2 !important;

    width: 100% !important;
    height: 100% !important;

    margin-top: 0 !important;
    align-self: stretch !important;
  }

  /*
    右カラムも同じ2段に連動
    1段目：現在の黒い車
    2段目：変更予定車両
  */
  .about-reference-vehicles {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;

    width: var(--about-vehicle-common-width) !important;

    display: grid !important;
    grid-template-rows: subgrid !important;

    gap: 0 !important;
    align-self: stretch !important;
    justify-self: end !important;

    transform:
      translate(
        var(--about-vehicles-x),
        var(--about-vehicles-y)
      ) !important;
  }

  /* 2枚とも同じ横幅・同じ角丸 */
  .about-reference-vehicle-item {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    display: block !important;

    overflow: hidden !important;

    background: #ffffff !important;
    border-radius: 16px !important;

    box-shadow:
      0 14px 28px rgba(13, 43, 69, 0.15) !important;
  }

  .about-reference-vehicle-item:first-child {
    grid-row: 1 !important;
  }

  .about-reference-vehicle-item:last-child {
    grid-row: 2 !important;
    align-items: initial !important;
  }

  /* 写真は各段の高さ・横幅いっぱいに合わせる */
  .about-reference-vehicle-photo {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    transform-origin: center center !important;
  }

  /* 上段：沿革の縦幅に合わせる黒い車 */
  .about-reference-vehicle-photo-current {
    object-fit: cover !important;
    object-position:
      var(--about-current-car-object-x)
      var(--about-current-car-object-y) !important;

    transform:
      scale(var(--about-current-car-photo-scale)) !important;
  }

  /* 下段：ドライバーカードの縦幅に合わせる変更予定車両 */
  .about-reference-vehicle-photo-new {
    object-fit: cover !important;
    object-position:
      var(--about-new-car-object-x)
      var(--about-new-car-object-y) !important;

    transform:
      scale(var(--about-new-car-photo-scale)) !important;
  }

  /* 写真タイトル共通 */
  .about-reference-vehicle-item figcaption {
    position: absolute !important;
    z-index: 3 !important;

    width: auto !important;
    margin: 0 !important;
    padding:
      var(--about-vehicle-title-padding-y)
      var(--about-vehicle-title-padding-x) !important;

    color: #0d2b45 !important;
    background: rgba(255, 255, 255, 0.88) !important;

    border-radius: 7px !important;

    font-size: var(--about-vehicle-title-size) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    text-align: left !important;

    box-shadow:
      0 4px 12px rgba(13, 43, 69, 0.12) !important;

    transform: none !important;
  }

  /* 現在の車両：黒い車の右下 */
  .about-reference-vehicle-item:first-child figcaption {
    top: auto !important;
    right: var(--about-current-title-right) !important;
    bottom: var(--about-current-title-bottom) !important;
    left: auto !important;
  }

  /* 令和8年秋頃 車両変更予定：下の写真の左上 */
  .about-reference-vehicle-item:last-child figcaption {
    top: var(--about-new-title-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--about-new-title-left) !important;
  }
}

/* carpet.png を「3つの理由」のブルーグレーに合わせる */
.about-reference-lamp {
  filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(12%)
    saturate(780%)
    hue-rotate(163deg)
    brightness(93%)
    contrast(87%) !important;
}

/* タブレット・スマートフォンは縦並びを維持 */
@media (max-width: 980px) {
  .about-reference-section {
    padding-bottom: 24px !important;
  }

  .about-reference-vehicle-item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .about-reference-vehicle-item figcaption {
    position: absolute !important;
    z-index: 3 !important;

    width: auto !important;
    margin: 0 !important;
    padding: 5px 9px !important;

    color: #0d2b45 !important;
    background: rgba(255, 255, 255, 0.88) !important;

    border-radius: 7px !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    transform: none !important;
  }

  .about-reference-vehicle-item:first-child figcaption {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
  }

  .about-reference-vehicle-item:last-child figcaption {
    top: 10px !important;
    right: auto !important;
    bottom: auto !important;
    left: 10px !important;
  }
}


/* ==================================================
   変更予定車両：ドライバーカードの実測高さに完全同期
================================================== */

@media (min-width: 981px) {
  .about-reference-vehicle-item:last-child {
    height:
      var(
        --synced-driver-card-height,
        100%
      ) !important;

    min-height:
      var(
        --synced-driver-card-height,
        100%
      ) !important;

    max-height:
      var(
        --synced-driver-card-height,
        none
      ) !important;

    align-self: start !important;
  }
}

/* ==================================================
   変更予定車両：ドライバーカードの上位置にも完全同期
================================================== */

@media (min-width: 981px) {
  .about-reference-vehicle-item:last-child {
    transform:
      translateY(
        var(--synced-driver-card-offset-y, 0px)
      ) !important;
  }
}
/* ==================================================
   機材紹介：選ばれる3つの理由と見出し・余白を統一
================================================== */

/* パソコン・タブレット */
@media (min-width: 821px) {
  /* セクション上下の余白を「3つの理由」と同じにする */
  .equipment-section {
    padding-top: var(--reasons-padding-top) !important;
    padding-bottom: var(--reasons-padding-bottom) !important;
  }

  /* 見出し全体の下余白も同じにする */
  .equipment-section .equipment-heading {
    margin-bottom: var(--reasons-heading-bottom-space) !important;
    transform: translate(
      var(--reasons-heading-x),
      var(--reasons-heading-y)
    ) !important;
  }

  /* 英字見出しの大きさ・位置を同じにする */
  .equipment-section .home-section-kicker {
    font-size: var(--reasons-kicker-size) !important;
    transform: translateY(var(--reasons-kicker-y)) !important;
  }

  /* 題名とランプの間隔を同じにする */
  .equipment-heading-title {
    gap: var(--reasons-title-gap) !important;
    transform: translateY(var(--reasons-title-y)) !important;
  }

  /* 左右のランプを「3つの理由」と同じサイズ・位置にする */
  .equipment-heading-title .equipment-heading-lamp:first-child {
    width: var(--reasons-lamp-size) !important;
    transform:
      translate(
        var(--reasons-left-lamp-x),
        var(--reasons-left-lamp-y)
      )
      scale(var(--reasons-left-lamp-scale)) !important;
  }

  .equipment-heading-title .equipment-heading-lamp:last-child {
    width: var(--reasons-lamp-size) !important;
    transform:
      translate(
        var(--reasons-right-lamp-x),
        var(--reasons-right-lamp-y)
      )
      scaleX(-1)
      scale(var(--reasons-right-lamp-scale)) !important;
  }

  /* 見出し下の線も同じ大きさ・位置にする */
  .equipment-section .home-heading-rule {
    width: var(--reasons-rule-width) !important;
    height: var(--reasons-rule-height) !important;
    transform: translateY(var(--reasons-rule-y)) !important;
  }
}

/* スマートフォンも「3つの理由」の見出しと統一 */
@media (max-width: 820px) {
  .equipment-heading-title {
    gap: 8px !important;
  }

  .equipment-heading-lamp {
    width: 24px !important;
  }

  .equipment-heading-title .equipment-heading-lamp:last-child {
    transform: scaleX(-1) !important;
  }
}

/* 小さいスマートフォンの下余白も「3つの理由」と同じにする */
@media (max-width: 700px) {
  .equipment-section {
    padding-top: 68px !important;
    padding-bottom: 24px !important;
  }
}

/* ==================================================
   機材紹介：説明文・区切り線・見出し下余白 最終調整
================================================== */

/* 説明文を少し大きくする */
.equipment-copy p {
  font-size: 16px !important;
}

.equipment-copy .equipment-flat-copy {
  font-size: 15px !important;
}

/* 一番上と一番下の白線だけ消す */
.equipment-list {
  border-top: 0 !important;
}

.equipment-row:last-child {
  border-bottom: 0 !important;
}

/* タイトル下の線から最初の写真までの余白を縮める */
.equipment-section .equipment-heading {
  margin-bottom: 6px !important;
}

/* タブレット */
@media (max-width: 980px) and (min-width: 701px) {
  .equipment-copy p {
    font-size: 15px !important;
  }

  .equipment-copy .equipment-flat-copy {
    font-size: 13px !important;
  }
}

/* スマートフォン */
@media (max-width: 700px) {
  .equipment-section .equipment-heading {
    margin-bottom: 5px !important;
  }

  .equipment-copy p {
    font-size: 12.5px !important;
  }

  .equipment-copy .equipment-flat-copy {
    font-size: 11.5px !important;
  }
}

/* かなり小さいスマートフォン */
@media (max-width: 390px) {
  .equipment-copy p {
    font-size: 11.5px !important;
  }

  .equipment-copy .equipment-flat-copy {
    font-size: 10.5px !important;
  }
}

/* ==================================================
   2026-07-23 介護タクシー料金表・デザイン完成版
   送付画像の構成をホームページ向けに再現
================================================== */

.taxi-price-section {
  padding-top: 54px;
  padding-bottom: 54px;
  background:
    linear-gradient(
      180deg,
      #b9c6d3 0%,
      #c9d4de 46%,
      #b5c3cf 100%
    );
}

.taxi-price-inner {
  width: min(1120px, 92%);
}

.taxi-price-heading {
  margin-bottom: 24px;
  color: #0d2b45;
}

.taxi-price-heading .home-section-kicker {
  margin-bottom: 1px;
  color: #36536d;
}

.taxi-price-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.taxi-price-title-row h2 {
  flex: 0 0 auto;
  margin: 0;
  color: #0d2b45;
  font-size: clamp(31px, 3.7vw, 43px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.055em;
}

.taxi-price-title-line {
  width: min(180px, 17vw);
  height: 2px;
  background: #55738d;
  border-radius: 999px;
}

.taxi-price-heading .home-section-note {
  margin: 8px auto 0;
  color: #0d2b45;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.65;
  text-align: center;
}

.price-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.price-board-card {
  min-width: 0;
  padding: 19px 22px 20px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 17px;
  box-shadow:
    0 5px 0 rgba(75, 91, 105, 0.26),
    0 12px 24px rgba(13, 43, 69, 0.14);
}

.price-board-card-heading {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 2px solid #1d4c70;
}

.price-board-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #082d4b;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16);
}

.price-board-card-wheelchair .price-board-icon,
.price-board-card-assistance .price-board-icon {
  background: #2615a8;
}

.price-board-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.price-board-card-heading h3 {
  margin: 0;
  color: #0d2b45;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.035em;
}

.price-board-card-heading p {
  margin: 1px 0 0;
  color: #425967;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.price-board-description {
  margin: 9px 0 4px;
  color: #334b5b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
}

.price-board-list {
  margin: 7px 0 0;
}

.price-board-list > div {
  min-height: 38px;
  padding: 7px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #b8c4cd;
}

.price-board-list > div:last-child {
  border-bottom: 0;
}

.price-board-list dt,
.price-board-list dd {
  margin: 0;
  line-height: 1.5;
}

.price-board-list dt {
  color: #29475c;
  font-size: 13px;
  font-weight: 800;
}

.price-board-list dd {
  color: #0d2b45;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.price-board-list dd strong {
  color: #df1d13;
  font-size: 18px;
  line-height: 1;
}

.price-board-list-tall {
  min-height: 54px !important;
  align-items: flex-start !important;
}

.price-wheelchair-list {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.price-wheelchair-item {
  min-height: 100px;
  padding: 8px 10px 8px 7px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  background: #e9edf1;
  border-radius: 13px;
}

.price-wheelchair-image-box {
  width: 112px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.price-wheelchair-photo {
  display: block;
  max-width: none;
  object-fit: contain;

  /* ご指定どおり2枚とも左右反転 */
  transform: scaleX(-1);
  transform-origin: center;
}

.price-wheelchair-photo-normal {
  width: 105px;
  height: 83px;
}

.price-wheelchair-photo-reclining {
  width: 118px;
  height: 92px;
}

.price-wheelchair-copy h4 {
  margin: 0;
  color: #152f43;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
}

.price-wheelchair-copy p {
  margin: 2px 0 0;
  color: #4d6372;
  font-size: 11px;
  font-weight: 700;
}

.price-wheelchair-fee {
  color: #0d2b45;
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

.price-stair-layout {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 145px;
  align-items: stretch;
  gap: 16px;
}

.price-stair-list {
  margin-top: 0;
}

.price-stair-photo-box {
  min-height: 142px;
  overflow: hidden;
  background: #e9edf1;
  border-radius: 11px;
}

.price-stair-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.price-board-small-note {
  margin: 8px 0 0;
  color: #304b5e;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.55;
}

.price-board-caution {
  margin-top: 17px;
  padding: 0 5px;
}

.price-board-caution p {
  margin: 0;
  color: #17364e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.65;
}

.price-simulation-panel {
  margin-top: 22px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 16px;
  box-shadow:
    0 5px 0 rgba(75, 91, 105, 0.26),
    0 12px 24px rgba(13, 43, 69, 0.15);
}

.price-simulation-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.price-simulation-badge {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  display: grid;
  place-items: center;
  color: #355a73;
  background: #e8f2f5;
  border: 2px solid #91abb8;
  border-radius: 50%;
}

.price-simulation-badge svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.price-simulation-copy h3 {
  margin: 0;
  color: #0d2b45;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0.055em;
}

.price-simulation-copy p {
  margin: 2px 0 0;
  color: #405968;
  font-size: 12px;
  font-weight: 700;
}

.price-simulation-button {
  min-width: 260px;
  padding: 16px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #17117f, #2c19c7);
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 13px;
  box-shadow: 0 8px 16px rgba(28, 19, 145, 0.28);
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.price-simulation-button:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

@media (max-width: 980px) {
  .price-board-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .taxi-price-section {
    padding-top: 46px;
    padding-bottom: 48px;
  }

  .taxi-price-title-row {
    gap: 10px;
  }

  .taxi-price-title-row h2 {
    font-size: 28px;
  }

  .taxi-price-title-line {
    width: 42px;
  }

  .taxi-price-heading .home-section-note {
    font-size: 12px;
  }

  .price-board-card {
    padding: 17px 15px 18px;
  }

  .price-board-card-heading h3 {
    font-size: 19px;
  }

  .price-board-list > div {
    gap: 10px;
  }

  .price-board-list dt,
  .price-board-list dd {
    font-size: 12px;
  }

  .price-wheelchair-item {
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .price-wheelchair-image-box {
    width: 92px;
    height: 76px;
  }

  .price-wheelchair-photo-normal {
    width: 89px;
    height: 72px;
  }

  .price-wheelchair-photo-reclining {
    width: 99px;
    height: 78px;
  }

  .price-wheelchair-copy h4 {
    font-size: 13px;
  }

  .price-wheelchair-copy p {
    font-size: 10px;
  }

  .price-wheelchair-fee {
    font-size: 14px;
  }

  .price-stair-layout {
    grid-template-columns: minmax(0, 1fr) 105px;
    gap: 10px;
  }

  .price-stair-photo-box {
    min-height: 126px;
  }

  .price-simulation-panel {
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
  }

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

@media (max-width: 460px) {
  .price-wheelchair-item {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .price-wheelchair-image-box {
    width: 82px;
  }

  .price-wheelchair-fee {
    grid-column: 2;
    justify-self: end;
    margin-top: -16px;
  }

  .price-stair-layout {
    grid-template-columns: 1fr 92px;
  }

  .price-simulation-copy h3 {
    font-size: 19px;
  }
}



/* ==================================================
   2026-07-23 介護タクシー料金表・見本寄せ最終調整
   土台色は維持し、カード比率・文字組み・余白を見本へ寄せる
================================================== */

.taxi-price-section {
  padding-top: 38px !important;
  padding-bottom: 42px !important;
}

.taxi-price-inner {
  width: min(900px, 92%) !important;
}

.taxi-price-heading {
  position: relative;
  margin-bottom: 12px !important;
}

.taxi-price-heading .home-section-kicker {
  display: none !important;
}

.taxi-price-title-row {
  position: relative;
  gap: 12px !important;
}

.taxi-price-title-row::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 142px;
  height: 22px;
  border-top: 4px solid rgba(79, 110, 136, 0.38);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.taxi-price-title-row h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(27px, 3.2vw, 35px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
}

.taxi-price-title-line {
  width: min(145px, 16vw) !important;
  height: 1px !important;
  background: #466984 !important;
}

.taxi-price-heading .home-section-note {
  margin-top: 6px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.02em !important;
}

.price-board-grid {
  gap: 12px !important;
}

.price-board-card {
  padding: 11px 13px 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow:
    0 4px 3px rgba(60, 72, 82, 0.31),
    0 8px 12px rgba(13, 43, 69, 0.10) !important;
}

.price-board-card-heading {
  min-height: 47px;
  padding-bottom: 5px !important;
  gap: 8px !important;
  border-bottom-width: 1.5px !important;
}

.price-board-icon {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
}

.price-board-icon svg {
  width: 25px !important;
  height: 25px !important;
  stroke-width: 2.4 !important;
}

.price-board-card-heading h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.015em !important;
}

.price-board-card-heading p {
  margin-top: 0 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

.price-board-description {
  margin: 5px 0 2px !important;
  font-size: 9.5px !important;
  line-height: 1.45 !important;
}

.price-board-list {
  margin-top: 3px !important;
}

.price-board-list > div {
  min-height: 27px !important;
  padding: 4px 1px !important;
  gap: 10px !important;
  border-bottom-color: #b9c5ce !important;
}

.price-board-list dt,
.price-board-list dd {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

.price-board-list dd strong {
  font-size: 17px !important;
}

.price-board-list-tall {
  min-height: 38px !important;
}

.price-board-card-meter,
.price-board-card-wheelchair,
.price-board-card-assistance,
.price-board-card-stair {
  min-height: 222px;
}

.price-wheelchair-list {
  margin-top: 7px !important;
  gap: 7px !important;
}

.price-wheelchair-item {
  min-height: 70px !important;
  padding: 4px 8px 4px 4px !important;
  grid-template-columns: 82px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  border-radius: 9px !important;
  background: #e5e9ed !important;
}

.price-wheelchair-image-box {
  width: 82px !important;
  height: 62px !important;
}

.price-wheelchair-photo-normal {
  width: 78px !important;
  height: 61px !important;
}

.price-wheelchair-photo-reclining {
  width: 88px !important;
  height: 67px !important;
}

.price-wheelchair-copy h4 {
  font-size: 11px !important;
  line-height: 1.3 !important;
}

.price-wheelchair-copy p {
  margin-top: 1px !important;
  font-size: 8.5px !important;
  line-height: 1.25 !important;
}

.price-wheelchair-fee {
  font-size: 13px !important;
}

.price-stair-layout {
  margin-top: 5px !important;
  grid-template-columns: minmax(0, 1fr) 118px !important;
  gap: 9px !important;
}

.price-stair-photo-box {
  min-height: 126px !important;
  border-radius: 8px !important;
}

.price-stair-photo {
  object-position: center 42% !important;
}

.price-board-small-note {
  margin-top: 4px !important;
  font-size: 8px !important;
  line-height: 1.35 !important;
}

.price-board-caution {
  margin-top: 10px !important;
  padding: 0 2px !important;
}

.price-board-caution p {
  font-size: 8.5px !important;
  line-height: 1.45 !important;
}

.price-simulation-panel {
  margin-top: 12px !important;
  padding: 9px 12px !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow:
    0 4px 3px rgba(60, 72, 82, 0.31),
    0 8px 12px rgba(13, 43, 69, 0.10) !important;
}

.price-simulation-copy {
  gap: 10px !important;
}

.price-simulation-badge {
  position: relative;
  width: 74px !important;
  height: 74px !important;
  flex-basis: 74px !important;
  background: #eef7f8 !important;
  border-width: 1.5px !important;
}

.price-simulation-badge-text {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 64px;
  transform: translateX(-50%);
  color: #355a73;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.price-simulation-badge svg {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 32px !important;
  height: 32px !important;
  transform: translateX(-50%);
}

.price-simulation-text {
  min-width: 0;
}

.price-simulation-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.price-simulation-title-row h3 {
  flex: 0 0 auto;
}

.price-simulation-title-row > span {
  color: #30495b;
  font-size: 8.5px;
  font-weight: 800;
  white-space: nowrap;
}

.price-simulation-copy h3 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.035em !important;
}

.price-simulation-copy p {
  margin-top: 3px !important;
  max-width: 330px;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

.price-simulation-button {
  min-width: 220px !important;
  padding: 12px 15px !important;
  gap: 8px !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.price-simulation-button > svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.price-simulation-arrow {
  font-size: 24px;
  line-height: 0.7;
}

@media (max-width: 980px) {
  .taxi-price-inner {
    width: min(760px, 92%) !important;
  }

  .price-board-card-meter,
  .price-board-card-wheelchair,
  .price-board-card-assistance,
  .price-board-card-stair {
    min-height: 0;
  }
}

@media (max-width: 700px) {
  .taxi-price-section {
    padding-top: 32px !important;
    padding-bottom: 36px !important;
  }

  .taxi-price-title-row::before {
    width: 108px;
  }

  .taxi-price-title-row h2 {
    font-size: 24px !important;
  }

  .taxi-price-heading .home-section-note {
    font-size: 9.5px !important;
  }

  .price-board-grid {
    gap: 10px !important;
  }

  .price-board-card {
    padding: 10px 11px 11px !important;
  }

  .price-board-card-heading h3 {
    font-size: 15px !important;
  }

  .price-simulation-panel {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .price-simulation-copy {
    justify-content: center;
  }

  .price-simulation-title-row {
    flex-wrap: wrap;
    gap: 2px 8px;
  }

  .price-simulation-title-row > span {
    white-space: normal;
  }

  .price-simulation-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  .taxi-price-inner {
    width: 94% !important;
  }

  .taxi-price-title-line {
    width: 34px !important;
  }

  .price-wheelchair-item {
    grid-template-columns: 76px minmax(0, 1fr) auto !important;
  }

  .price-wheelchair-image-box {
    width: 76px !important;
  }

  .price-stair-layout {
    grid-template-columns: minmax(0, 1fr) 100px !important;
  }
}


/* ==================================================
   2026-07-23 料金表デザイン第3版
   タイトルを「アラジンについて」に統一
   4枚のカードと文字を大きくして視認性を向上
================================================== */

/* タイトル周り：アラジンについてと同じ構成 */
.taxi-price-heading {
  margin-bottom: 34px !important;
  color: #0d2b45;
}

.taxi-price-heading .home-section-kicker {
  margin-bottom: 8px !important;
  color: #6f879a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
}

.taxi-price-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 0;
  color: #0d2b45;
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 900;
  line-height: 1.45;
}

.taxi-price-title span {
  display: inline-block;
}

.taxi-price-title-icon {
  width: 34px;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(12%)
    saturate(780%)
    hue-rotate(163deg)
    brightness(93%)
    contrast(87%);
}

.taxi-price-title-icon-right {
  transform: scaleX(-1);
}

.taxi-price-heading .home-heading-rule {
  display: block !important;
  width: 76px !important;
  height: 3px !important;
  margin: 20px auto 0 !important;
  background: #6f879a !important;
  border-radius: 999px !important;
}

.taxi-price-heading .home-section-note {
  max-width: 820px;
  margin: 14px auto 0 !important;
  color: #29465a !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.75 !important;
  text-align: center;
}

/* 料金表全体を広くする */
.taxi-price-inner {
  width: min(1260px, 94%) !important;
}

.price-board-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch;
}

/* カードを大きく、読みやすく */
.price-board-card {
  padding: 28px 32px 30px !important;
  border-radius: 20px !important;
  box-shadow:
    0 6px 0 rgba(75, 91, 105, 0.25),
    0 15px 30px rgba(13, 43, 69, 0.16) !important;
}

.price-board-card-meter,
.price-board-card-wheelchair {
  min-height: 430px;
}

.price-board-card-assistance,
.price-board-card-stair {
  min-height: 350px;
}

.price-board-card-heading {
  padding-bottom: 14px !important;
  gap: 15px !important;
  border-bottom-width: 2px !important;
}

.price-board-icon {
  width: 58px !important;
  height: 58px !important;
  flex-basis: 58px !important;
}

.price-board-icon svg {
  width: 37px !important;
  height: 37px !important;
}

.price-board-card-heading h3 {
  font-size: 26px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
}

.price-board-card-heading p {
  margin-top: 3px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.price-board-description {
  margin: 13px 0 7px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.price-board-list {
  margin-top: 10px !important;
}

.price-board-list > div {
  min-height: 48px !important;
  padding: 10px 4px !important;
  gap: 22px !important;
}

.price-board-list dt {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.price-board-list dd {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.price-board-list dd strong {
  font-size: 23px !important;
}

.price-board-list-tall {
  min-height: 70px !important;
  align-items: flex-start !important;
}

/* 車いすカード */
.price-wheelchair-list {
  margin-top: 15px !important;
  gap: 14px !important;
}

.price-wheelchair-item {
  min-height: 132px !important;
  padding: 10px 15px 10px 10px !important;
  grid-template-columns: 145px minmax(0, 1fr) auto !important;
  gap: 15px !important;
  border-radius: 15px !important;
}

.price-wheelchair-image-box {
  width: 145px !important;
  height: 108px !important;
}

.price-wheelchair-photo-normal {
  width: 132px !important;
  height: 104px !important;
}

.price-wheelchair-photo-reclining {
  width: 148px !important;
  height: 114px !important;
}

.price-wheelchair-copy h4 {
  font-size: 19px !important;
  line-height: 1.45 !important;
}

.price-wheelchair-copy p {
  margin-top: 4px !important;
  font-size: 14px !important;
}

.price-wheelchair-fee {
  font-size: 22px !important;
}

/* 階段昇降機カード */
.price-stair-layout {
  margin-top: 15px !important;
  grid-template-columns: minmax(0, 1fr) 190px !important;
  gap: 22px !important;
}

.price-stair-photo-box {
  min-height: 178px !important;
  border-radius: 14px !important;
}

.price-board-small-note {
  margin-top: 12px !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* 注意書き */
.price-board-caution {
  margin-top: 23px !important;
  padding: 0 8px !important;
}

.price-board-caution p {
  font-size: 13px !important;
  line-height: 1.8 !important;
}

/* 下部シミュレーション帯もカードに合わせて拡大 */
.price-simulation-panel {
  margin-top: 28px !important;
  padding: 21px 26px !important;
  gap: 28px !important;
  border-radius: 19px !important;
}

.price-simulation-badge {
  width: 82px !important;
  height: 82px !important;
  flex-basis: 82px !important;
}

.price-simulation-copy {
  gap: 20px !important;
}

.price-simulation-copy h3 {
  font-size: 27px !important;
}

.price-simulation-copy p {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.price-simulation-button {
  min-width: 300px !important;
  padding: 19px 27px !important;
  font-size: 20px !important;
}

/* タブレット */
@media (max-width: 1100px) and (min-width: 701px) {
  .taxi-price-inner {
    width: min(980px, 94%) !important;
  }

  .price-board-grid {
    gap: 22px !important;
  }

  .price-board-card {
    padding: 24px 25px 26px !important;
  }

  .price-board-card-heading h3 {
    font-size: 23px !important;
  }

  .price-board-list dt,
  .price-board-list dd {
    font-size: 14.5px !important;
  }

  .price-wheelchair-item {
    grid-template-columns: 120px minmax(0, 1fr) auto !important;
  }

  .price-wheelchair-image-box {
    width: 120px !important;
  }

  .price-stair-layout {
    grid-template-columns: minmax(0, 1fr) 150px !important;
  }
}

/* スマートフォン */
@media (max-width: 700px) {
  .taxi-price-heading {
    margin-bottom: 28px !important;
  }

  .taxi-price-title {
    gap: 8px;
    font-size: 28px !important;
  }

  .taxi-price-title-icon {
    width: 25px;
  }

  .taxi-price-heading .home-section-note {
    font-size: 14px !important;
  }

  .price-board-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .price-board-card,
  .price-board-card-meter,
  .price-board-card-wheelchair,
  .price-board-card-assistance,
  .price-board-card-stair {
    min-height: 0 !important;
    padding: 22px 18px 24px !important;
  }

  .price-board-icon {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }

  .price-board-card-heading h3 {
    font-size: 22px !important;
  }

  .price-board-card-heading p {
    font-size: 12.5px !important;
  }

  .price-board-description {
    font-size: 14px !important;
  }

  .price-board-list dt,
  .price-board-list dd {
    font-size: 14px !important;
  }

  .price-wheelchair-item {
    min-height: 112px !important;
    grid-template-columns: 105px minmax(0, 1fr) auto !important;
    gap: 9px !important;
  }

  .price-wheelchair-image-box {
    width: 105px !important;
    height: 88px !important;
  }

  .price-wheelchair-photo-normal {
    width: 100px !important;
    height: 82px !important;
  }

  .price-wheelchair-photo-reclining {
    width: 110px !important;
    height: 88px !important;
  }

  .price-wheelchair-copy h4 {
    font-size: 15px !important;
  }

  .price-wheelchair-copy p {
    font-size: 12px !important;
  }

  .price-wheelchair-fee {
    font-size: 17px !important;
  }

  .price-stair-layout {
    grid-template-columns: minmax(0, 1fr) 115px !important;
    gap: 12px !important;
  }

  .price-stair-photo-box {
    min-height: 145px !important;
  }

  .price-simulation-panel {
    padding: 19px !important;
  }

  .price-simulation-copy h3 {
    font-size: 22px !important;
  }

  .price-simulation-copy p {
    font-size: 13.5px !important;
  }

  .price-simulation-button {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 18px !important;
  }
}

@media (max-width: 460px) {
  .taxi-price-title {
    font-size: 25px !important;
  }

  .price-wheelchair-item {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  .price-wheelchair-image-box {
    width: 92px !important;
  }

  .price-wheelchair-fee {
    grid-column: 2;
    justify-self: end;
    margin-top: -16px;
  }

  .price-stair-layout {
    grid-template-columns: 1fr 100px !important;
  }
}


/* ==================================================
   2026-07-23 料金表デザイン第4版
   ・タイトルのcarpet.pngを「アラジンについて」と完全統一
   ・4枚のカード全体幅を「3つの理由」のカード全体幅と統一
   ・料金カードのアイコンを指定PNGへ変更し白色表示
================================================== */

/* 料金表全体幅＝「選ばれる3つの理由」の3枚全体幅 */
.taxi-price-inner {
  width: min(var(--reasons-content-width), 92%) !important;
}

/* タイトルサイズ・間隔も「アラジンについて」と同じ */
.taxi-price-title {
  gap: var(--about-title-gap) !important;
  font-size: var(--about-title-size) !important;
}

/* carpet.pngを「アラジンについて」と同じ大きさ・位置にする */
.taxi-price-title-icon {
  width: var(--about-carpet-width) !important;
  height: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  filter: none !important;
}

.taxi-price-title-icon-left {
  transform:
    translate(
      var(--about-carpet-left-x),
      var(--about-carpet-left-y)
    )
    scale(var(--about-carpet-left-scale)) !important;
}

.taxi-price-title-icon-right {
  transform:
    translate(
      var(--about-carpet-right-x),
      var(--about-carpet-right-y)
    )
    scaleX(-1)
    scale(var(--about-carpet-right-scale)) !important;
}

/* 指定PNGアイコンを白一色で表示 */
.price-board-icon-image {
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: brightness(0) invert(1) !important;
}

@media (max-width: 700px) {
  .taxi-price-inner {
    width: 92% !important;
  }

  .taxi-price-title {
    gap: 8px !important;
    font-size: 28px !important;
  }

  .taxi-price-title-icon {
    width: 25px !important;
  }

  .taxi-price-title-icon-left {
    transform: translate(-7px, -2px) scale(1.45) !important;
  }

  .taxi-price-title-icon-right {
    transform: translate(7px, -2px) scaleX(-1) scale(1.45) !important;
  }

}

@media (max-width: 460px) {
  .taxi-price-title {
    font-size: 25px !important;
  }

  .taxi-price-title-icon {
    width: 22px !important;
  }
}

/* ==================================================
   2026-07-23 料金表デザイン第5版
   ・表の罫線をすべて撤去
   ・塗り分けと余白だけで項目を整理
   ・見本画像に近い、やわらかい帯状レイアウト
================================================== */

/* カード外枠は線を使わず、白い面と影だけで表現 */
.price-board-card {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow:
    0 6px 0 rgba(75, 91, 105, 0.24),
    0 13px 27px rgba(13, 43, 69, 0.15) !important;
}

/* カード見出し下の罫線を撤去 */
.price-board-card-heading {
  padding-bottom: 8px !important;
  border-bottom: 0 !important;
}

/* 見出し下の説明は淡い塗りでひとまとまりにする */
.price-board-description {
  padding: 8px 12px !important;
  background: #eef3f6 !important;
  border-radius: 8px !important;
}

/* ==================================================
   料金表：罫線なしの塗り分け
================================================== */

.price-board-list {
  display: grid !important;
  gap: 5px !important;
}

.price-board-list > div {
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) !important;
  align-items: stretch !important;
  gap: 4px !important;
  background: transparent !important;
  border: 0 !important;
}

.price-board-list dt,
.price-board-list dd {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 13px !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 7px !important;
}

/* 左側はブルーグレー、右側は明るい白系で塗り分け */
.price-board-list dt {
  justify-content: flex-start !important;
  background: #e6edf2 !important;
}

.price-board-list dd {
  justify-content: flex-end !important;
  background: #f7f9fa !important;
}

/* 交互に濃淡を変え、線なしでも行が分かるようにする */
.price-board-list > div:nth-child(even) dt {
  background: #f0f4f7 !important;
}

.price-board-list > div:nth-child(even) dd {
  background: #e9eff3 !important;
}

.price-board-list > div:last-child,
.price-board-list > div:last-child dt,
.price-board-list > div:last-child dd {
  border-bottom: 0 !important;
}

.price-board-list-tall {
  min-height: 70px !important;
}

.price-board-list-tall dt,
.price-board-list-tall dd {
  align-items: flex-start !important;
}

/* ==================================================
   車いす貸出：灰色の塗りブロックで表現
================================================== */

.price-wheelchair-item {
  border: 0 !important;
  background: #e7ecef !important;
  box-shadow: none !important;
}

.price-wheelchair-item:nth-child(even) {
  background: #eef2f5 !important;
}

.price-wheelchair-image-box {
  background: rgba(255, 255, 255, 0.34) !important;
  border-radius: 10px !important;
}

.price-wheelchair-fee {
  padding: 9px 12px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 0 !important;
  border-radius: 8px !important;
  line-height: 1.25 !important;
}

/* ==================================================
   階段昇降機：表部分も同じ塗り分けに統一
================================================== */

.price-stair-list > div {
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) !important;
}

.price-stair-photo-box {
  border: 0 !important;
  background: #e7ecef !important;
  box-shadow: none !important;
}

.price-board-small-note {
  padding: 9px 11px !important;
  background: #eef3f6 !important;
  border: 0 !important;
  border-radius: 8px !important;
}

/* ==================================================
   注意書き・シミュレーション帯も線なし
================================================== */

.price-board-caution {
  padding: 11px 14px !important;
  background: rgba(255, 255, 255, 0.40) !important;
  border: 0 !important;
  border-radius: 10px !important;
}

.price-simulation-panel {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow:
    0 6px 0 rgba(75, 91, 105, 0.24),
    0 13px 27px rgba(13, 43, 69, 0.15) !important;
}

/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  .price-board-list > div {
    grid-template-columns: minmax(0, 1fr) minmax(130px, auto) !important;
  }

  .price-board-list dt,
  .price-board-list dd {
    padding: 9px 11px !important;
  }

  .price-stair-list > div {
    grid-template-columns: minmax(0, 1fr) minmax(105px, auto) !important;
  }
}

/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  .price-board-list {
    gap: 4px !important;
  }

  .price-board-list > div {
    min-height: 44px !important;
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto) !important;
    gap: 3px !important;
  }

  .price-board-list dt,
  .price-board-list dd {
    padding: 8px 9px !important;
    border-radius: 6px !important;
  }

  .price-stair-list > div {
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto) !important;
  }

  .price-wheelchair-fee {
    padding: 7px 9px !important;
  }

  .price-board-caution {
    padding: 10px 11px !important;
  }
}

@media (max-width: 460px) {
  .price-board-list > div {
    grid-template-columns: minmax(0, 1fr) minmax(100px, auto) !important;
  }

  .price-stair-list > div {
    grid-template-columns: minmax(0, 1fr) minmax(84px, auto) !important;
  }
}

/* ==================================================
   料金表：メーター運賃の加算料金
   見出しはカードなし、条件と金額だけを左右配置
================================================== */

.price-board-card-meter .price-meter-addition-group {
  min-height: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
}

.price-board-card-meter .price-meter-addition-title {
  min-height: 0 !important;
  margin: 2px 0 5px !important;
  padding: 0 2px !important;
  display: block !important;
  color: var(--navy) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

.price-board-card-meter .price-meter-addition-lines {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 5px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.price-board-card-meter .price-meter-addition-line {
  min-height: 48px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  color: var(--text);
  background: #e9eff3;
  border: 0;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

.price-board-card-meter .price-meter-addition-line:nth-child(2) {
  background: #f0f4f7;
}

.price-board-card-meter .price-meter-addition-line > span:first-child {
  min-width: 0;
}

.price-board-card-meter .price-meter-addition-line strong {
  color: #cc3542;
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .price-board-card-meter .price-meter-addition-title {
    font-size: 16px !important;
  }

  .price-board-card-meter .price-meter-addition-line {
    padding: 9px 11px;
    gap: 14px;
    font-size: 15px;
  }
}

@media (max-width: 700px) {
  .price-board-card-meter .price-meter-addition-line {
    min-height: 44px;
    padding: 8px 9px;
    gap: 10px;
    border-radius: 6px;
    font-size: 14px;
  }

  .price-board-card-meter .price-meter-addition-line strong {
    font-size: 18px;
  }
}

/* ==================================================
   料金表：時間制運賃
================================================== */

.price-time-fare {
  margin-top: 14px;
}

.price-time-fare h4 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.price-time-fare-row {
  min-height: 50px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  color: var(--text);
  background: #e9eff3;
  border: 0;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

.price-time-fare-row strong {
  color: #cc3542;
  font-size: 21px;
  font-weight: 900;
  white-space: nowrap;
}

.price-time-fare p {
  margin: 7px 2px 0;
  color: var(--text-light);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .price-time-fare h4 {
    font-size: 16px;
  }

  .price-time-fare-row {
    padding: 9px 11px;
    gap: 14px;
    font-size: 15px;
  }

  .price-time-fare-row strong {
    font-size: 20px;
  }
}

@media (max-width: 700px) {
  .price-time-fare {
    margin-top: 12px;
  }

  .price-time-fare-row {
    min-height: 44px;
    padding: 8px 9px;
    gap: 10px;
    border-radius: 6px;
    font-size: 14px;
  }

  .price-time-fare-row strong {
    font-size: 18px;
  }

  .price-time-fare p {
    font-size: 13px;
  }
}

/* ==================================================
   料金表：夜間・早朝の注記
================================================== */

.price-meter-night-note {
  margin: 8px 2px 0;
  color: var(--text-light);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .price-meter-night-note {
    margin-top: 7px;
    font-size: 13px;
  }
}

/* ==================================================
   料金表：4カード共通見出し
   各パーツは下の変数で調整できます
================================================== */

:root {
  /* 4枚共通 */
  --price-head-icon-size: 72px;
  --price-head-gap: 16px;

  /* 青い〇の中の白いピクトグラム個別調整 */

  /* 基本料金：タクシー */
  --meter-pictogram-size: 60px;
  --meter-pictogram-x: 1px;
  --meter-pictogram-y: -2.5px;

  /* 車いす貸出料金 */
  --wheelchair-pictogram-size: 60px;
  --wheelchair-pictogram-x: 0px;
  --wheelchair-pictogram-y: -1px;

  /* 介助料金 */
  --assistance-pictogram-size: 48px;
  --assistance-pictogram-x: 0.5px;
  --assistance-pictogram-y: -1.3px;

  /* 階段昇降機料金 */
  --stair-pictogram-size: 50px;
  --stair-pictogram-x: 2px;
  --stair-pictogram-y: 0.5px;

  --price-head-title-size: 27px;
  --price-head-subtitle-size: 20px;
  --price-head-title-gap: 8px;

  --price-head-rule-thickness: 3px;
  --price-head-rule-gap-top: 7px;

  --price-head-description-gap-top: 7px;
  --price-head-description-size: 15px;
  --price-head-description-line-height: 1.55;

  /* 基本料金 */
  --meter-head-icon-x: 6px;
  --meter-head-icon-y: 10px;
  --meter-head-icon-scale: 1.3;
  --meter-head-title-x: 13px;
  --meter-head-title-y: 10px;
  --meter-head-rule-x: 0px;
  --meter-head-rule-y: 5px;

  /* 車いす貸出料金 */
  --wheelchair-head-icon-x: 6px;
  --wheelchair-head-icon-y: 10px;
  --wheelchair-head-icon-scale: 1.3;
  --wheelchair-head-title-x: 13px;
  --wheelchair-head-title-y: 10px;
  --wheelchair-head-rule-x: 0px;
  --wheelchair-head-rule-y: 5px;
  --wheelchair-head-description-x: 13px;
  --wheelchair-head-description-y: 10px;

  /* 介助料金 */
  --assistance-head-icon-x: 6px;
  --assistance-head-icon-y: 10px;
  --assistance-head-icon-scale: 1.3;
  --assistance-head-title-x: 13px;
  --assistance-head-title-y: 10px;
  --assistance-head-rule-x: 0px;
  --assistance-head-rule-y: 5px;
  --assistance-head-description-x: 13px;
  --assistance-head-description-y: 10px;

  /* 階段昇降機料金 */
  --stair-head-icon-x: 6px;
  --stair-head-icon-y: 10px;
  --stair-head-icon-scale: 1.3;
  --stair-head-title-x: 13px;
  --stair-head-title-y: 10px;
  --stair-head-rule-x: 0px;
  --stair-head-rule-y: 5px;
  --stair-head-description-x: 13px;
  --stair-head-description-y: 10px;
}

/* 共通構造 */
.price-board-card-heading.price-card-head {
  min-height: 0 !important;
  padding: 0 0 12px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start !important;
  gap: var(--price-head-gap) !important;
  border: 0 !important;
}

.price-card-head-content {
  min-width: 0;
  padding-top: 2px;
}

.price-card-head-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--price-head-title-gap);
}

.price-board-card-heading.price-card-head h3 {
  margin: 0 !important;
  color: var(--navy) !important;
  font-size: var(--price-head-title-size) !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
  letter-spacing: 0.02em !important;
}

.price-card-head-subtitle {
  color: var(--navy);
  font-size: var(--price-head-subtitle-size);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.price-card-head-rule {
  display: block;
  width: 100%;
  height: var(--price-head-rule-thickness);
  margin-top: var(--price-head-rule-gap-top);
  background: #173f63;
  border-radius: 999px;
}

.price-card-head-description {
  margin: var(--price-head-description-gap-top) 0 0 !important;
  color: var(--navy) !important;
  font-size: var(--price-head-description-size) !important;
  font-weight: 600 !important;
  line-height: var(--price-head-description-line-height) !important;
}

/* 丸アイコン */
.price-board-card-heading.price-card-head .price-card-head-icon {
  width: var(--price-head-icon-size) !important;
  height: var(--price-head-icon-size) !important;
  flex: 0 0 var(--price-head-icon-size) !important;
  display: grid !important;
  place-items: center !important;
  background: #0b365d !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.price-board-card-heading.price-card-head .price-board-icon-image {
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  transform-origin: center center !important;
}

.price-card-head-meter .price-board-icon-image {
  width: var(--meter-pictogram-size) !important;
  height: auto !important;
  transform: translate(
    var(--meter-pictogram-x),
    var(--meter-pictogram-y)
  ) !important;
}

.price-card-head-wheelchair .price-board-icon-image {
  width: var(--wheelchair-pictogram-size) !important;
  height: auto !important;
  transform: translate(
    var(--wheelchair-pictogram-x),
    var(--wheelchair-pictogram-y)
  ) !important;
}

.price-card-head-assistance .price-board-icon-image {
  width: var(--assistance-pictogram-size) !important;
  height: auto !important;
  transform: translate(
    var(--assistance-pictogram-x),
    var(--assistance-pictogram-y)
  ) !important;
}

.price-card-head-stair .price-board-icon-image {
  width: var(--stair-pictogram-size) !important;
  height: auto !important;
  transform: translate(
    var(--stair-pictogram-x),
    var(--stair-pictogram-y)
  ) !important;
}

/* 基本料金：説明文なし */
.price-card-head-meter .price-card-head-icon {
  transform:
    translate(var(--meter-head-icon-x), var(--meter-head-icon-y))
    scale(var(--meter-head-icon-scale));
}

.price-card-head-meter .price-card-head-title-row {
  transform: translate(var(--meter-head-title-x), var(--meter-head-title-y));
}

.price-card-head-meter .price-card-head-rule {
  transform: translate(var(--meter-head-rule-x), var(--meter-head-rule-y));
}

/* 車いす貸出料金 */
.price-card-head-wheelchair .price-card-head-icon {
  transform:
    translate(var(--wheelchair-head-icon-x), var(--wheelchair-head-icon-y))
    scale(var(--wheelchair-head-icon-scale));
}

.price-card-head-wheelchair .price-card-head-title-row {
  transform:
    translate(var(--wheelchair-head-title-x), var(--wheelchair-head-title-y));
}

.price-card-head-wheelchair .price-card-head-rule {
  transform:
    translate(var(--wheelchair-head-rule-x), var(--wheelchair-head-rule-y));
}

.price-card-head-wheelchair .price-card-head-description {
  transform:
    translate(
      var(--wheelchair-head-description-x),
      var(--wheelchair-head-description-y)
    );
}

/* 介助料金 */
.price-card-head-assistance .price-card-head-icon {
  transform:
    translate(var(--assistance-head-icon-x), var(--assistance-head-icon-y))
    scale(var(--assistance-head-icon-scale));
}

.price-card-head-assistance .price-card-head-title-row {
  transform:
    translate(var(--assistance-head-title-x), var(--assistance-head-title-y));
}

.price-card-head-assistance .price-card-head-rule {
  transform:
    translate(var(--assistance-head-rule-x), var(--assistance-head-rule-y));
}

.price-card-head-assistance .price-card-head-description {
  transform:
    translate(
      var(--assistance-head-description-x),
      var(--assistance-head-description-y)
    );
}

/* 階段昇降機料金 */
.price-card-head-stair .price-card-head-icon {
  transform:
    translate(var(--stair-head-icon-x), var(--stair-head-icon-y))
    scale(var(--stair-head-icon-scale));
}

.price-card-head-stair .price-card-head-title-row {
  transform:
    translate(var(--stair-head-title-x), var(--stair-head-title-y));
}

.price-card-head-stair .price-card-head-rule {
  transform:
    translate(var(--stair-head-rule-x), var(--stair-head-rule-y));
}

.price-card-head-stair .price-card-head-description {
  transform:
    translate(
      var(--stair-head-description-x),
      var(--stair-head-description-y)
    );
}

/* タブレット */
@media (max-width: 1100px) {
  :root {
    --price-head-icon-size: 64px;
    --price-head-gap: 14px;
    --price-head-title-size: 23px;
    --price-head-subtitle-size: 18px;
    --price-head-description-size: 14px;
  }
}

/* スマートフォン */
@media (max-width: 700px) {
  :root {
    --price-head-icon-size: 56px;
    --price-head-gap: 12px;
    --price-head-title-size: 21px;
    --price-head-subtitle-size: 16px;
    --price-head-rule-thickness: 2px;
    --price-head-description-size: 13px;
  }

  .price-card-head-title-row {
    gap: 5px;
  }
}

/* ==================================================
   料金表：内側の料金欄を角エッジに変更
   車いす貸出料金カードだけは丸角を維持
================================================== */

/* 基本料金・介助料金・階段昇降機料金の料金行 */
.price-board-card-meter .price-board-list dt,
.price-board-card-meter .price-board-list dd,
.price-board-card-assistance .price-board-list dt,
.price-board-card-assistance .price-board-list dd,
.price-board-card-stair .price-board-list dt,
.price-board-card-stair .price-board-list dd {
  border-radius: 0 !important;
}

/* 基本料金内の加算料金・時間制運賃 */
.price-board-card-meter .price-meter-addition-line,
.price-board-card-meter .price-time-fare-row {
  border-radius: 0 !important;
}

/* スマートフォンでも角を丸めない */
@media (max-width: 700px) {
  .price-board-card-meter .price-board-list dt,
  .price-board-card-meter .price-board-list dd,
  .price-board-card-assistance .price-board-list dt,
  .price-board-card-assistance .price-board-list dd,
  .price-board-card-stair .price-board-list dt,
  .price-board-card-stair .price-board-list dd,
  .price-board-card-meter .price-meter-addition-line,
  .price-board-card-meter .price-time-fare-row {
    border-radius: 0 !important;
  }
}

/* ==================================================
   車いす貸出料金：最終レイアウト調整
   目標：車いすPNGをカード最前面に出し、
   拡大時は行カードの外へはみ出せる状態にする

   X：＋で右、－で左
   Y：＋で下、－で上
================================================== */

:root {
  /* ---------- 2行カード共通 ---------- */

  --wheelchair-row-height: 96px;
  --wheelchair-row-radius: 18px;
  --wheelchair-row-gap: 14px;

  /* 画像分として左側に確保する幅 */
  --wheelchair-row-image-space: 104px;

  /* 項目名 */
  --wheelchair-row-title-size: 19px;

  /* 説明文 */
  --wheelchair-row-description-size: 15px;

  /* 金額 */
  --wheelchair-row-fee-size: 28px;


  /* ---------- 普通車いすの行カード ---------- */

  --normal-wheelchair-card-x: 0px;
  --normal-wheelchair-card-y: 95px;

  /* 普通車いすPNG */
  --normal-wheelchair-image-width: 120px;
  --normal-wheelchair-image-x: 10px;
  --normal-wheelchair-image-y: 10px;
  --normal-wheelchair-image-scale: 1.8;

  /* 普通車いすの項目名＋説明文 */
  --normal-wheelchair-copy-x: 50px;
  --normal-wheelchair-copy-y: 0px;

  /* 普通車いすの金額 */
  --normal-wheelchair-fee-x: 0px;
  --normal-wheelchair-fee-y: 0px;


  /* ---------- リクライニング車いすの行カード ---------- */

  --reclining-wheelchair-card-x: 0px;
  --reclining-wheelchair-card-y: 175px;

  /* リクライニング車いすPNG */
  --reclining-wheelchair-image-width: 120px;
  --reclining-wheelchair-image-x: 20px;
  --reclining-wheelchair-image-y: 0px;
  --reclining-wheelchair-image-scale: 1.8;

  /* リクライニング車いすの項目名＋説明文 */
  --reclining-wheelchair-copy-x: 50px;
  --reclining-wheelchair-copy-y: 0px;

  /* リクライニング車いすの金額 */
  --reclining-wheelchair-fee-x: 0px;
  --reclining-wheelchair-fee-y: 0px;
}


/* 外側でPNGを切らない */
.price-board-card-wheelchair,
.price-wheelchair-list,
.price-wheelchair-item {
  overflow: visible !important;
}


/* 2行の並び */
.price-wheelchair-list {
  position: relative !important;
  display: grid !important;
  gap: var(--wheelchair-row-gap) !important;
}


/* 2行の大きなカードは残す */
.price-board-card-wheelchair .price-wheelchair-item {
  position: relative !important;

  min-height: var(--wheelchair-row-height) !important;
  padding:
    12px
    18px
    12px
    var(--wheelchair-row-image-space) !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 18px !important;

  background: #e7ecef !important;
  border: 0 !important;
  border-radius: var(--wheelchair-row-radius) !important;
  box-shadow: none !important;
}


/* 2行目だけ背景を少し変える */
.price-board-card-wheelchair .price-wheelchair-item:nth-child(2) {
  background: #eef2f5 !important;
}


/* 画像用の小カードは完全に消す */
.price-board-card-wheelchair .price-wheelchair-image-box {
  position: absolute !important;
  z-index: 30 !important;

  top: 50% !important;
  left: 0 !important;

  width: auto !important;
  height: auto !important;

  display: block !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}


/* PNG共通：縦横比を崩さず、全体を表示 */
.price-board-card-wheelchair .price-wheelchair-photo,
.price-board-card-wheelchair .price-wheelchair-photo-normal,
.price-board-card-wheelchair .price-wheelchair-photo-reclining {
  position: relative !important;
  z-index: 40 !important;

  display: block !important;
  max-width: none !important;
  max-height: none !important;

  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;

  transform-origin: center center !important;
}


/* ---------- 普通車いす ---------- */

.price-board-card-wheelchair .price-wheelchair-item:nth-child(1) {
  transform: translate(
    var(--normal-wheelchair-card-x),
    var(--normal-wheelchair-card-y)
  ) !important;
}

.price-board-card-wheelchair
.price-wheelchair-item:nth-child(1)
.price-wheelchair-image-box {
  transform:
    translate(
      var(--normal-wheelchair-image-x),
      calc(-50% + var(--normal-wheelchair-image-y))
    ) !important;
}

.price-board-card-wheelchair .price-wheelchair-photo-normal {
  width: var(--normal-wheelchair-image-width) !important;
  height: auto !important;

  transform:
    scaleX(-1)
    scale(var(--normal-wheelchair-image-scale)) !important;
}

.price-board-card-wheelchair
.price-wheelchair-item:nth-child(1)
.price-wheelchair-copy {
  transform: translate(
    var(--normal-wheelchair-copy-x),
    var(--normal-wheelchair-copy-y)
  ) !important;
}

.price-board-card-wheelchair
.price-wheelchair-item:nth-child(1)
.price-wheelchair-fee {
  transform: translate(
    var(--normal-wheelchair-fee-x),
    var(--normal-wheelchair-fee-y)
  ) !important;
}


/* ---------- リクライニング車いす ---------- */

.price-board-card-wheelchair .price-wheelchair-item:nth-child(2) {
  transform: translate(
    var(--reclining-wheelchair-card-x),
    var(--reclining-wheelchair-card-y)
  ) !important;
}

.price-board-card-wheelchair
.price-wheelchair-item:nth-child(2)
.price-wheelchair-image-box {
  transform:
    translate(
      var(--reclining-wheelchair-image-x),
      calc(-50% + var(--reclining-wheelchair-image-y))
    ) !important;
}

.price-board-card-wheelchair .price-wheelchair-photo-reclining {
  width: var(--reclining-wheelchair-image-width) !important;
  height: auto !important;

  transform:
    scaleX(-1)
    scale(var(--reclining-wheelchair-image-scale)) !important;
}

.price-board-card-wheelchair
.price-wheelchair-item:nth-child(2)
.price-wheelchair-copy {
  transform: translate(
    var(--reclining-wheelchair-copy-x),
    var(--reclining-wheelchair-copy-y)
  ) !important;
}

.price-board-card-wheelchair
.price-wheelchair-item:nth-child(2)
.price-wheelchair-fee {
  transform: translate(
    var(--reclining-wheelchair-fee-x),
    var(--reclining-wheelchair-fee-y)
  ) !important;
}


/* 項目名＋説明文 */
.price-board-card-wheelchair .price-wheelchair-copy {
  position: relative !important;
  z-index: 10 !important;
  min-width: 0 !important;
}

.price-board-card-wheelchair .price-wheelchair-copy h4 {
  margin: 0 !important;
  color: #0d2b45 !important;
  font-size: var(--wheelchair-row-title-size) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.price-board-card-wheelchair .price-wheelchair-copy p {
  margin: 2px 0 0 !important;
  color: #0d2b45 !important;
  font-size: var(--wheelchair-row-description-size) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}


/* 金額カードは消し、文字だけ表示 */
.price-board-card-wheelchair .price-wheelchair-fee {
  position: relative !important;
  z-index: 12 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #0d2b45 !important;
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: var(--wheelchair-row-fee-size) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}


/* タブレット */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --wheelchair-row-height: 88px;
    --wheelchair-row-image-space: 92px;

    --normal-wheelchair-image-width: 102px;
    --reclining-wheelchair-image-width: 110px;

    --wheelchair-row-title-size: 17px;
    --wheelchair-row-description-size: 13px;
    --wheelchair-row-fee-size: 24px;
  }
}


/* スマートフォン */
@media (max-width: 700px) {
  :root {
    --wheelchair-row-height: 78px;
    --wheelchair-row-radius: 14px;
    --wheelchair-row-gap: 10px;
    --wheelchair-row-image-space: 80px;

    --normal-wheelchair-image-width: 88px;
    --reclining-wheelchair-image-width: 94px;

    --wheelchair-row-title-size: 15px;
    --wheelchair-row-description-size: 12px;
    --wheelchair-row-fee-size: 20px;
  }

  .price-board-card-wheelchair .price-wheelchair-item {
    padding:
      9px
      12px
      9px
      var(--wheelchair-row-image-space) !important;

    column-gap: 10px !important;
  }
}

/* ==================================================
   介護タクシー料金：基本料金 最終調整

   X：＋で右、－で左
   Y：＋で下、－で上
================================================== */

:root {
  /* 英語見出し追加後のセクション上余白 */
  --taxi-price-padding-top-final: 68px;

  /* 基本料金の説明文 */
  --meter-description-x: 13px;
  --meter-description-y: 10px;

  /* 迎車料金・初乗り */
  --meter-base-table-x: 0px;
  --meter-base-table-y: 0px;

  /* 加算料金 */
  --meter-addition-table-x: 0px;
  --meter-addition-table-y: 0px;

  /* 夜間・早朝注記 */
  --meter-night-note-x: 0px;
  --meter-night-note-y: 0px;

  /* 時間制運賃 */
  --meter-time-table-x: 0px;
  --meter-time-table-y: -5px;

  /* 表の列設定 */
  --meter-table-column-gap: 4px;
  --meter-table-price-column-width: 150px;
}

/* CARE TAXI PRICEと上余白 */
.taxi-price-section {
  padding-top: var(--taxi-price-padding-top-final) !important;
}

.taxi-price-heading .home-section-kicker {
  display: block !important;
  margin: 0 0 8px !important;
  color: #6f879a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;
  transform: none !important;
}

/* carpet.pngをABOUT ALADDINと同じブルーグレーへ統一 */
.taxi-price-title-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(12%)
    saturate(780%)
    hue-rotate(163deg)
    brightness(93%)
    contrast(87%) !important;
}

/* 基本料金の説明文 */
.price-card-head-meter .price-card-head-description-meter {
  display: block !important;
  margin: var(--price-head-description-gap-top) 0 0 !important;
  color: var(--navy) !important;
  font-size: var(--price-head-description-size) !important;
  font-weight: 600 !important;
  line-height: var(--price-head-description-line-height) !important;
  transform: translate(
    var(--meter-description-x),
    var(--meter-description-y)
  ) !important;
}

/* 迎車料金・初乗り表の位置 */
.price-board-card-meter .price-board-list > div:nth-child(1),
.price-board-card-meter .price-board-list > div:nth-child(2) {
  position: relative !important;
  transform: translate(
    var(--meter-base-table-x),
    var(--meter-base-table-y)
  ) !important;
}

/* 650円だけ赤字 */
.price-board-card-meter .price-board-list dd,
.price-board-card-meter .price-board-list dd strong,
.price-board-card-meter .price-meter-addition-line strong,
.price-board-card-meter .price-time-fare-row strong {
  color: var(--navy) !important;
}

.price-board-card-meter .price-board-list > div:nth-child(2) dd strong {
  color: #cc3542 !important;
}

/* 加算料金：2行×2列 */
.price-board-card-meter .price-meter-addition-group {
  position: relative !important;
  min-height: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  transform: translate(
    var(--meter-addition-table-x),
    var(--meter-addition-table-y)
  ) !important;
}

.price-board-card-meter .price-meter-addition-title {
  min-height: 0 !important;
  margin: 2px 0 5px !important;
  padding: 0 2px !important;
  display: block !important;
  color: var(--navy) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

.price-board-card-meter .price-meter-addition-lines {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  background: transparent !important;
  border: 0 !important;
}

.price-board-card-meter .price-meter-addition-line {
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(var(--meter-table-price-column-width), auto) !important;
  align-items: stretch !important;
  gap: var(--meter-table-column-gap) !important;
  color: var(--text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.price-board-card-meter .price-meter-addition-line > span {
  min-width: 0 !important;
  padding: 10px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #e6edf2 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.price-board-card-meter .price-meter-addition-line > strong {
  min-width: 0 !important;
  padding: 10px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  color: var(--navy) !important;
  background: #f7f9fa !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.price-board-card-meter .price-meter-addition-line:nth-child(2) > span {
  background: #f0f4f7 !important;
}

.price-board-card-meter .price-meter-addition-line:nth-child(2) > strong {
  background: #e9eff3 !important;
}

/* 夜間・早朝注記の位置 */
.price-board-card-meter .price-meter-night-note {
  position: relative !important;
  transform: translate(
    var(--meter-night-note-x),
    var(--meter-night-note-y)
  ) !important;
}

/* 時間制運賃：1行×2列 */
.price-board-card-meter .price-time-fare {
  position: relative !important;
  transform: translate(
    var(--meter-time-table-x),
    var(--meter-time-table-y)
  ) !important;
}

.price-board-card-meter .price-time-fare-row {
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(var(--meter-table-price-column-width), auto) !important;
  align-items: stretch !important;
  gap: var(--meter-table-column-gap) !important;
  color: var(--text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.price-board-card-meter .price-time-fare-row > span {
  min-width: 0 !important;
  padding: 10px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #e6edf2 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.price-board-card-meter .price-time-fare-row > strong {
  min-width: 0 !important;
  padding: 10px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  color: var(--navy) !important;
  background: #f7f9fa !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --taxi-price-padding-top-final: 58px;
    --meter-table-price-column-width: 130px;
  }
}

@media (max-width: 700px) {
  :root {
    --taxi-price-padding-top-final: 50px;
    --meter-description-x: 0px;
    --meter-description-y: 6px;
    --meter-table-price-column-width: 100px;
    --meter-table-column-gap: 3px;
  }

  .taxi-price-heading .home-section-kicker {
    font-size: 12px !important;
  }

  .price-board-card-meter .price-meter-addition-title,
  .price-board-card-meter .price-time-fare h4 {
    font-size: 15px !important;
  }

  .price-board-card-meter .price-meter-addition-line,
  .price-board-card-meter .price-time-fare-row {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .price-board-card-meter .price-meter-addition-line > span,
  .price-board-card-meter .price-meter-addition-line > strong,
  .price-board-card-meter .price-time-fare-row > span,
  .price-board-card-meter .price-time-fare-row > strong {
    padding: 8px 9px !important;
  }

  .price-board-card-meter .price-meter-addition-line > strong,
  .price-board-card-meter .price-time-fare-row > strong {
    font-size: 18px !important;
  }
}

/* ==================================================
   基本料金：文字サイズ・文章位置 調整パネル
   この :root の数値だけ変更してください

   X：＋で右、－で左
   Y：＋で下、－で上

   ※ピクトグラム・carpet.png・車いす欄には影響しません
================================================== */

:root {
  /* ---------- 見出し ---------- */

  /* 「基本料金」 */
  --meter-title-size-final: 27px;

  /* 「（メーター運賃）」 */
  --meter-subtitle-size-final: 20px;


  /* ---------- 基本料金の説明文 ---------- */

  /* 「メーター運賃に迎車料金を加えた金額が
      基本料金となります。」 */
  --meter-description-size-final: 16px;
  --meter-description-weight-final: 600;
  --meter-description-line-height-final: 1.55;
  --meter-description-x-final: 10px;
  --meter-description-y-final: 5px;


  /* ---------- 迎車料金・初乗り ---------- */

  /* 左側の項目名 */
  --meter-base-label-size-final: 18px;
  --meter-base-label-weight-final: 800;

  /* 500円 */
  --meter-base-price-size-final: 20px;
  --meter-base-price-weight-final: 900;

  /* 650円 */
  --meter-first-fare-size-final: 30px;


  /* ---------- 加算料金 ---------- */

  /* 「加算料金」の見出し */
  --meter-addition-title-size-final: 16px;
  --meter-addition-title-x-final: 0px;
  --meter-addition-title-y-final: 5px;

  /* 左側の条件文 */
  --meter-addition-label-size-final: 18px;
  --meter-addition-label-weight-final: 700;

  /* 100円 */
  --meter-addition-price-size-final: 20px;
  --meter-addition-price-weight-final: 900;


  /* ---------- 夜間・早朝の注記 ---------- */

  --meter-night-note-size-final: 14px;
  --meter-night-note-weight-final: 700;
  --meter-night-note-x-final: 0px;
  --meter-night-note-y-final: -3px;


  /* ---------- 時間制運賃 ---------- */

  /* 「時間制運賃」の見出し */
  --meter-time-title-size-final: 16px;
  --meter-time-title-x-final: 0px;
  --meter-time-title-y-final: 5px;

  /* 表全体の位置 */
  --meter-time-row-x-final: 0px;
  --meter-time-row-y-final: 0px;

  /* 「30分毎に」 */
  --meter-time-label-size-final: 18px;
  --meter-time-label-weight-final: 700;

  /* 3,070円 */
  --meter-time-price-size-final: 20px;
  --meter-time-price-weight-final: 900;


  /* ---------- 旅行・観光の注記 ---------- */

  --meter-time-note-size-final: 14px;
  --meter-time-note-weight-final: 600;
  --meter-time-note-x-final: 0px;
  --meter-time-note-y-final: -3px;
}


/* ==================================================
   見出し
================================================== */

.price-card-head-meter h3 {
  font-size: var(--meter-title-size-final) !important;
}

.price-card-head-meter .price-card-head-subtitle {
  font-size: var(--meter-subtitle-size-final) !important;
}


/* ==================================================
   基本料金の説明文
================================================== */

.price-card-head-meter .price-card-head-description-meter {
  display: block !important;

  font-size: var(--meter-description-size-final) !important;
  font-weight: var(--meter-description-weight-final) !important;
  line-height: var(--meter-description-line-height-final) !important;

  transform:
    translate(
      var(--meter-description-x-final),
      var(--meter-description-y-final)
    ) !important;
}


/* ==================================================
   迎車料金・初乗り
================================================== */

.price-board-card-meter
.price-board-list > div:nth-child(1) dt,
.price-board-card-meter
.price-board-list > div:nth-child(2) dt {
  font-size: var(--meter-base-label-size-final) !important;
  font-weight: var(--meter-base-label-weight-final) !important;
}

.price-board-card-meter
.price-board-list > div:nth-child(1) dd,
.price-board-card-meter
.price-board-list > div:nth-child(2) dd {
  font-size: var(--meter-base-price-size-final) !important;
  font-weight: var(--meter-base-price-weight-final) !important;
}

/* 650円だけ個別サイズ・赤字 */
.price-board-card-meter
.price-board-list > div:nth-child(2) dd strong {
  color: #cc3542 !important;
  font-size: var(--meter-first-fare-size-final) !important;
}


/* ==================================================
   加算料金
================================================== */

.price-board-card-meter .price-meter-addition-title {
  font-size: var(--meter-addition-title-size-final) !important;

  transform:
    translate(
      var(--meter-addition-title-x-final),
      var(--meter-addition-title-y-final)
    ) !important;
}

.price-board-card-meter
.price-meter-addition-line > span {
  font-size: var(--meter-addition-label-size-final) !important;
  font-weight: var(--meter-addition-label-weight-final) !important;
}

.price-board-card-meter
.price-meter-addition-line > strong {
  color: var(--navy) !important;
  font-size: var(--meter-addition-price-size-final) !important;
  font-weight: var(--meter-addition-price-weight-final) !important;
}


/* ==================================================
   夜間・早朝の注記
================================================== */

.price-board-card-meter .price-meter-night-note {
  font-size: var(--meter-night-note-size-final) !important;
  font-weight: var(--meter-night-note-weight-final) !important;

  transform:
    translate(
      var(--meter-night-note-x-final),
      var(--meter-night-note-y-final)
    ) !important;
}


/* ==================================================
   時間制運賃
================================================== */

.price-board-card-meter .price-time-fare h4 {
  font-size: var(--meter-time-title-size-final) !important;

  transform:
    translate(
      var(--meter-time-title-x-final),
      var(--meter-time-title-y-final)
    ) !important;
}

.price-board-card-meter .price-time-fare-row {
  transform:
    translate(
      var(--meter-time-row-x-final),
      var(--meter-time-row-y-final)
    ) !important;
}

.price-board-card-meter
.price-time-fare-row > span {
  font-size: var(--meter-time-label-size-final) !important;
  font-weight: var(--meter-time-label-weight-final) !important;
}

.price-board-card-meter
.price-time-fare-row > strong {
  color: var(--navy) !important;
  font-size: var(--meter-time-price-size-final) !important;
  font-weight: var(--meter-time-price-weight-final) !important;
}


/* ==================================================
   旅行・観光の注記
================================================== */

.price-board-card-meter .price-time-fare > p {
  font-size: var(--meter-time-note-size-final) !important;
  font-weight: var(--meter-time-note-weight-final) !important;

  transform:
    translate(
      var(--meter-time-note-x-final),
      var(--meter-time-note-y-final)
    ) !important;
}


/* ==================================================
   スマートフォン
   PC用の調整値を基準に自動で少し小さくします
================================================== */

@media (max-width: 700px) {
  :root {
    --meter-title-size-final: 22px;
    --meter-subtitle-size-final: 16px;

    --meter-description-size-final: 13px;
    --meter-description-x-final: 0px;
    --meter-description-y-final: 6px;

    --meter-base-label-size-final: 14px;
    --meter-base-price-size-final: 14px;
    --meter-first-fare-size-final: 19px;

    --meter-addition-title-size-final: 15px;
    --meter-addition-label-size-final: 14px;
    --meter-addition-price-size-final: 18px;

    --meter-night-note-size-final: 13px;

    --meter-time-title-size-final: 15px;
    --meter-time-label-size-final: 14px;
    --meter-time-price-size-final: 18px;
    --meter-time-note-size-final: 13px;
  }
}

/* ==================================================
   介助料金：基本料金カードに合わせた最終レイアウト
   このブロックは home.css の一番下に置く

   X：＋で右、－で左
   Y：＋で下、－で上

   ※基本料金・車いす貸出料金・ピクトグラムには影響しません
================================================== */

:root {
  /* 介助料金の説明文 */
  --assistance-description-size-final: 15px;
  --assistance-description-weight-final: 600;
  --assistance-description-line-height-final: 1.55;
  --assistance-description-x-final: 0px;
  --assistance-description-y-final: 0px;

  /* 介助料金表全体 */
  --assistance-table-x-final: 0px;
  --assistance-table-y-final: 20px;

  /* 表の左右列の間隔 */
  --assistance-table-column-gap-final: 4px;

  /* 金額列の幅 */
  --assistance-price-column-width-final: 150px;

  /* 各行の高さ */
  --assistance-row-min-height-final: 52px;

  /* 左側の項目名 */
  --assistance-label-size-final: 16px;
  --assistance-label-weight-final: 800;

  /* 右側の金額 */
  --assistance-price-size-final: 20px;
  --assistance-price-weight-final: 900;
}


/* ==================================================
   介助料金の説明文
================================================== */

.price-card-head-assistance .price-card-head-description {
  display: block !important;

  font-size: var(--assistance-description-size-final) !important;
  font-weight: var(--assistance-description-weight-final) !important;
  line-height: var(--assistance-description-line-height-final) !important;

  transform:
    translate(
      var(--assistance-description-x-final),
      var(--assistance-description-y-final)
    ) !important;
}


/* ==================================================
   介助料金表全体
================================================== */

.price-board-card-assistance .price-board-list {
  position: relative !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;

  background: transparent !important;
  border: 0 !important;

  transform:
    translate(
      var(--assistance-table-x-final),
      var(--assistance-table-y-final)
    ) !important;
}


/* ==================================================
   介助料金：各行を基本料金と同じ2列表示
================================================== */

.price-board-card-assistance .price-board-list > div {
  min-height: var(--assistance-row-min-height-final) !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(var(--assistance-price-column-width-final), auto) !important;
  align-items: stretch !important;
  gap: var(--assistance-table-column-gap-final) !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}


/* 左列：項目名 */
.price-board-card-assistance .price-board-list dt {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 13px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  color: var(--navy) !important;
  background: #e6edf2 !important;

  border: 0 !important;
  border-radius: 0 !important;

  font-size: var(--assistance-label-size-final) !important;
  font-weight: var(--assistance-label-weight-final) !important;
  line-height: 1.5 !important;
}


/* 右列：金額 */
.price-board-card-assistance .price-board-list dd {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 13px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  color: var(--navy) !important;
  background: #f7f9fa !important;

  border: 0 !important;
  border-radius: 0 !important;

  font-size: var(--assistance-price-size-final) !important;
  font-weight: var(--assistance-price-weight-final) !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}


/* strongが付いている700円もネイビー */
.price-board-card-assistance .price-board-list dd strong {
  color: var(--navy) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}


/* 基本料金カードと同じ交互の濃淡 */
.price-board-card-assistance
.price-board-list > div:nth-child(even) dt {
  background: #f0f4f7 !important;
}

.price-board-card-assistance
.price-board-list > div:nth-child(even) dd {
  background: #e9eff3 !important;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --assistance-price-column-width-final: 130px;
    --assistance-description-size-final: 14px;
    --assistance-label-size-final: 15px;
    --assistance-price-size-final: 19px;
  }

  .price-board-card-assistance .price-board-list dt,
  .price-board-card-assistance .price-board-list dd {
    padding: 9px 11px !important;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --assistance-table-y-final: 14px;
    --assistance-table-column-gap-final: 3px;
    --assistance-price-column-width-final: 105px;
    --assistance-row-min-height-final: 46px;

    --assistance-description-size-final: 13px;
    --assistance-label-size-final: 14px;
    --assistance-price-size-final: 18px;
  }

  .price-board-card-assistance .price-board-list dt,
  .price-board-card-assistance .price-board-list dd {
    padding: 8px 9px !important;
  }
}

/* ==================================================
   介助料金：基本料金との位置合わせ・項目変更 最終版
   このブロックは home.css の一番下に置く

   ・説明文を基本料金と同じ位置へ
   ・見出し全体の高さを基本料金に合わせる
   ・表の開始位置を基本料金に合わせる
   ・2行目と3行目の間に「追加介助」を表示
================================================== */

:root {
  /* 基本料金の2行説明文と同じ高さになるように調整 */
  --assistance-head-min-height-v2: 114px;

  /* 説明文：基本料金と同じ位置 */
  --assistance-description-x-v2: 10px;
  --assistance-description-y-v2: 5px;

  /* 表全体：基本料金と同じ横位置 */
  --assistance-table-x-v2: 0px;

  /* 追加介助見出し */
  --assistance-additional-title-size-v2: 16px;
  --assistance-additional-title-gap-top-v2: 26px;
  --assistance-additional-title-gap-bottom-v2: 9px;

  /* 表の文字 */
  --assistance-label-size-v2: 18px;
  --assistance-price-size-v2: 20px;

  /* 必須加算の注意書き */
  --assistance-required-note-size-v2: 12px;
}


/* ==================================================
   見出し・説明文の位置を基本料金に合わせる
================================================== */

.price-card-head-assistance {
  min-height: var(--assistance-head-min-height-v2) !important;
}

.price-card-head-assistance .price-card-head-description {
  margin: var(--price-head-description-gap-top) 0 0 !important;

  color: var(--navy) !important;

  font-size: var(--meter-description-size-final) !important;
  font-weight: var(--meter-description-weight-final) !important;
  line-height: var(--meter-description-line-height-final) !important;

  transform:
    translate(
      var(--assistance-description-x-v2),
      var(--assistance-description-y-v2)
    ) !important;
}


/* ==================================================
   介助料金表の開始位置を基本料金に合わせる
   青い丸の下端から表の上端までの距離を統一
================================================== */

.price-board-card-assistance .price-board-list {
  margin: 33px 0 0 !important;

  transform:
    translateX(var(--assistance-table-x-v2)) !important;
}

.price-board-card-assistance .assistance-additional-list {
  margin-top: 0 !important;
}


/* ==================================================
   介助料金：基本料金と同じ表サイズ
================================================== */

.price-board-card-assistance .price-board-list > div {
  min-height: 60px !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(var(--meter-table-price-column-width), auto) !important;

  gap: var(--meter-table-column-gap) !important;
}

.price-board-card-assistance .price-board-list dt {
  gap: 8px !important;
  flex-wrap: wrap !important;

  color: var(--navy) !important;

  font-size: var(--assistance-label-size-v2) !important;
  font-weight: var(--meter-base-label-weight-final) !important;
}

.price-board-card-assistance .price-board-list dd,
.price-board-card-assistance .price-board-list dd strong {
  color: var(--navy) !important;

  font-size: var(--assistance-price-size-v2) !important;
  font-weight: var(--meter-base-price-weight-final) !important;
}


/* ==================================================
   基本乗降介助の注意書き
================================================== */

.assistance-required-note {
  color: var(--text-light) !important;

  font-size: var(--assistance-required-note-size-v2) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}


/* ==================================================
   2行目と3行目の間：「追加介助」
================================================== */

.assistance-additional-heading {
  margin:
    var(--assistance-additional-title-gap-top-v2)
    0
    var(--assistance-additional-title-gap-bottom-v2)
    2px !important;

  color: var(--navy) !important;

  font-size: var(--assistance-additional-title-size-v2) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --assistance-head-min-height-v2: 97px;

    --assistance-description-x-v2: 0px;
    --assistance-description-y-v2: 6px;

    --assistance-additional-title-size-v2: 15px;
    --assistance-additional-title-gap-top-v2: 12px;

    --assistance-label-size-v2: 14px;
    --assistance-price-size-v2: 18px;
    --assistance-required-note-size-v2: 11px;
  }

  .price-board-card-assistance .price-board-list > div {
    min-height: 50px !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(100px, auto) !important;
  }

  .assistance-required-note {
    white-space: normal !important;
  }
}

/* ==================================================
   介助料金：細かい位置調整専用
   この :root の数値だけ変更してください

   X：＋で右、－で左
   Y：＋で下、－で上
================================================== */

:root {
  /* 上2行の表
     基本乗降介助／夜間・早朝 */
  --assistance-primary-table-x-final: 0px;
  --assistance-primary-table-y-final: 0px;

  /* 「追加介助」の見出し */
  --assistance-additional-heading-x-final: 0px;
  --assistance-additional-heading-y-final: 0px;

  /* 下2行の表
     初めの15分／その後
     マイナスで上へ移動（追加介助との間隔調整） */
  --assistance-additional-table-x-final: 0px;
  --assistance-additional-table-y-final: -7px;
}


/* 上2行の表 */
.price-board-card-assistance .assistance-primary-list {
  transform:
    translate(
      var(--assistance-primary-table-x-final),
      var(--assistance-primary-table-y-final)
    ) !important;
}


/* 「追加介助」の見出し */
.price-board-card-assistance .assistance-additional-heading {
  position: relative !important;

  transform:
    translate(
      var(--assistance-additional-heading-x-final),
      var(--assistance-additional-heading-y-final)
    ) !important;
}


/* 下2行の表 */
.price-board-card-assistance .assistance-additional-list {
  transform:
    translate(
      var(--assistance-additional-table-x-final),
      var(--assistance-additional-table-y-final)
    ) !important;
}


/* スマートフォンはPCと同じ調整値を使用 */
@media (max-width: 700px) {
  .price-board-card-assistance .assistance-primary-list {
    transform:
      translate(
        var(--assistance-primary-table-x-final),
        var(--assistance-primary-table-y-final)
      ) !important;
  }

  .price-board-card-assistance .assistance-additional-heading {
    transform:
      translate(
        var(--assistance-additional-heading-x-final),
        var(--assistance-additional-heading-y-final)
      ) !important;
  }

  .price-board-card-assistance .assistance-additional-list {
    transform:
      translate(
        var(--assistance-additional-table-x-final),
        var(--assistance-additional-table-y-final)
      ) !important;
  }
}

/* ==================================================
   魔法の絨毯アニメーション
   位置をそれぞれ独立して調整できます

   X：＋で右、－で左
   Y：＋で下、－で上
================================================== */

:root {
  /* ==================================================
     ① アラジンロゴ
  ================================================== */

  --magic-logo-x: 80px;
  --magic-logo-y: 75px;
  --magic-logo-width: 300px;


  /* ==================================================
     ② 停止する魔法の絨毯PNG
  ================================================== */

  --magic-carpet-x: -50px;
  --magic-carpet-y: 4px;
  --magic-carpet-width: 120px;


  /* ==================================================
     ③ 24h365d.png
  ================================================== */

  --magic-24h-x: 55px;
  --magic-24h-y: 20px;
  --magic-24h-width: 360px;


  /* ==================================================
     ④ 伸びる赤い線
  ================================================== */

  --magic-line-x: 68px;
  --magic-line-y: 65px;
  --magic-line-width: 364px;
  --magic-line-height: 4px;
  --magic-line-color: #ed051b;


  /* ==================================================
     ⑤ 線と24h365d.pngの共通アニメーション
     必ず同時に始まり、同時に終わります
  ================================================== */

  --magic-sync-duration: 2.5s;
  --magic-sync-delay: 0s;
  --magic-sync-easing: linear;


  /* ==================================================
     ⑥ 飛行アニメーション
  ================================================== */

  /* 1回目の通過位置：＋で下、－で上 */
  --magic-first-pass-y-adjust: 50px;

  /* 1回目と2回目の飛行時間 */
  --magic-first-flight-duration: 2450ms;
  --magic-second-flight-duration: 5500ms;
}


/* ==================================================
   ロゴ・演出を同じ領域内で完全に独立配置
================================================== */

.hero-brand-area {
  position: absolute !important;

  width: 470px !important;
  height: 270px !important;

  display: block !important;
}


/* ==================================================
   ① アラジンロゴ
================================================== */

.hero-brand-area > .hero-logo {
  position: absolute !important;
  z-index: 1 !important;

  left: var(--magic-logo-x) !important;
  top: var(--magic-logo-y) !important;

  width: var(--magic-logo-width) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;

  margin: 0 !important;

  transform: none !important;
  object-fit: contain !important;
}


/* ==================================================
   演出用ステージ
   ロゴの位置には影響しません
================================================== */

.magic-carpet-stage {
  position: absolute !important;
  z-index: 2 !important;

  left: 0 !important;
  top: 0 !important;

  width: 470px !important;
  height: 105px !important;

  margin: 0 !important;

  display: block !important;

  overflow: visible !important;
  pointer-events: none !important;
}


/* ==================================================
   ② 停止する魔法の絨毯PNG
================================================== */

.magic-carpet-landed-image {
  position: absolute !important;
  z-index: 4 !important;

  left: var(--magic-carpet-x) !important;
  top: var(--magic-carpet-y) !important;

  width: var(--magic-carpet-width) !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;

  opacity: 0;

  transform: none !important;
  object-fit: contain !important;

  filter:
    drop-shadow(
      0 5px 5px
      rgba(13, 43, 69, 0.18)
    );
}

.magic-carpet-stage.is-landed
.magic-carpet-landed-image {
  opacity: 1;
}


/* ==================================================
   ③ 24h365d.png
================================================== */

.magic-carpet-24h {
  position: absolute !important;
  z-index: 3 !important;

  left: var(--magic-24h-x) !important;
  top: var(--magic-24h-y) !important;

  width: var(--magic-24h-width) !important;
  height: auto !important;

  margin: 0 !important;

  overflow: visible !important;
}

.magic-carpet-24h-reveal {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  overflow: hidden !important;

  clip-path: inset(0 100% 0 0);

  transition: none !important;
  animation: none;

  will-change: clip-path;
}

.magic-carpet-24h-image {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;

  transform: none !important;
  object-fit: contain !important;
}


/* ==================================================
   ④ 伸びる赤い線
   線の箱そのものを0pxから指定幅へ伸ばします
================================================== */

.magic-carpet-extension {
  position: absolute !important;
  z-index: 2 !important;

  /* 左端はこの位置から動きません */
  left: var(--magic-line-x) !important;
  top: var(--magic-line-y) !important;

  /* 最初は幅0px */
  width: 0;
  min-width: 0;
  height: var(--magic-line-height) !important;

  display: block !important;

  margin: 0 !important;

  background: var(--magic-line-color) !important;

  border: 0 !important;
  border-radius:
    calc(var(--magic-line-height) / 2) !important;

  opacity: 1 !important;
  visibility: visible !important;

  overflow: visible !important;

  clip-path: none !important;
  transform-origin: left center !important;

  transition: none !important;
  animation: none;

  will-change: width;
}


/* 以前の内側spanは使いません */
.magic-carpet-extension-line {
  display: none !important;
}


/* ==================================================
   着地後の表示
================================================== */

.magic-carpet-stage.is-landed
.magic-carpet-extension {
  animation:
    magic-line-grow-left-to-right
    var(--magic-sync-duration)
    var(--magic-sync-easing)
    var(--magic-sync-delay)
    1
    forwards;
}


/* 左端を固定して、右端だけを右へ伸ばします */
@keyframes magic-line-grow-left-to-right {
  from {
    width: 0;
    min-width: 0;
  }

  to {
    width: var(--magic-line-width);
    min-width: var(--magic-line-width);
  }
}

.magic-carpet-stage.is-landed
.magic-carpet-24h-reveal {
  animation:
    magic-24h-grow-left-to-right
    var(--magic-sync-duration)
    var(--magic-sync-easing)
    var(--magic-sync-delay)
    1
    forwards;
}


/* 線と同じ時間・同じ進み方で左から右へ表示 */
@keyframes magic-24h-grow-left-to-right {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}


/* ==================================================
   画面全体を飛ぶ一時レイヤー
================================================== */

.magic-carpet-flight-layer {
  position: fixed !important;
  z-index: 5000 !important;

  top: 0 !important;
  left: 0 !important;

  display: block !important;
  max-width: none !important;
  height: auto !important;

  opacity: 0;

  pointer-events: none !important;
  user-select: none !important;

  filter:
    drop-shadow(
      0 8px 7px
      rgba(13, 43, 69, 0.22)
    );

  will-change:
    transform,
    opacity;
}


/* ==================================================
   タブレット
   位置は上の調整値を基準に縮小
================================================== */

@media (max-width: 1100px) and (min-width: 821px) {
  .hero-brand-area {
    transform: scale(0.84);
    transform-origin: top center;
  }
}


/* ==================================================
   スマートフォン
   完成状態で表示
================================================== */

@media (max-width: 820px) {
  .hero-brand-area {
    transform: scale(0.7);
    transform-origin: top center;
  }

  .magic-carpet-landed-image {
    opacity: 1 !important;
  }

  .magic-carpet-extension {
    width: var(--magic-line-width) !important;
    min-width: var(--magic-line-width) !important;
    transition: none !important;
    animation: none !important;
  }

  .magic-carpet-24h-reveal {
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
    animation: none !important;
  }
}


/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .magic-carpet-landed-image {
    opacity: 1 !important;
  }

  .magic-carpet-extension {
    width: var(--magic-line-width) !important;
    min-width: var(--magic-line-width) !important;
    transition: none !important;
    animation: none !important;
  }

  .magic-carpet-24h-reveal {
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ==================================================
   階段昇降機料金：料金表・写真・注意書き最終調整
   ※青い丸／横線／ピクトグラム／題名は変更しません
================================================== */

:root {
  /* 見出し下から表・写真までの間隔 */
  --stair-content-gap-top-final: 15px;

  /* 表と写真の横間隔 */
  --stair-content-column-gap-final: 22px;

  /* 写真の横幅 */
  --stair-photo-width-final: 190px;

  /* 料金表1行の高さ
     56px × 3行 ＋ 行間5px × 2 ＝ 178px */
  --stair-row-height-final: 56px;

  /* 表と写真の共通高さ */
  --stair-content-height-final: 178px;

  /* 写真の表示位置 */
  --stair-photo-position-x-final: 50%;
  --stair-photo-position-y-final: 50%;

  /* 注意書き */
  --stair-note-gap-top-final: 12px;
}


/* 表と写真の枠組み */
.price-board-card-stair .price-stair-layout {
  margin-top: var(--stair-content-gap-top-final) !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    var(--stair-photo-width-final) !important;

  align-items: stretch !important;
  gap: var(--stair-content-column-gap-final) !important;
}


/* 料金表 */
.price-board-card-stair .price-stair-list {
  height: var(--stair-content-height-final) !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 5px !important;
}

.price-board-card-stair .price-stair-list > div {
  min-height: var(--stair-row-height-final) !important;
  height: auto !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(120px, auto) !important;
}


/* 写真 */
.price-board-card-stair .price-stair-photo-box {
  width: 100% !important;
  min-height: 0 !important;
  height: var(--stair-content-height-final) !important;

  overflow: hidden !important;
  border-radius: 14px !important;
}

.price-board-card-stair .price-stair-photo {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position:
    var(--stair-photo-position-x-final)
    var(--stair-photo-position-y-final) !important;
}


/* 注意書き */
.price-board-card-stair .price-board-small-note {
  margin-top: var(--stair-note-gap-top-final) !important;
  padding: 10px 12px !important;

  font-size: 13px !important;
  line-height: 1.65 !important;
}


/* タブレット */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --stair-content-column-gap-final: 16px;
    --stair-photo-width-final: 150px;
    --stair-row-height-final: 52px;
    --stair-content-height-final: 166px;
  }

  .price-board-card-stair .price-stair-list > div {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(105px, auto) !important;
  }
}


/* スマートフォン */
@media (max-width: 700px) {
  :root {
    --stair-content-gap-top-final: 13px;
    --stair-content-column-gap-final: 12px;
    --stair-photo-width-final: 115px;
    --stair-row-height-final: 50px;
    --stair-content-height-final: 158px;
    --stair-note-gap-top-final: 10px;
  }

  .price-board-card-stair .price-stair-list {
    gap: 4px !important;
  }

  .price-board-card-stair .price-stair-list > div {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(92px, auto) !important;
  }

  .price-board-card-stair .price-board-small-note {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
}


@media (max-width: 460px) {
  :root {
    --stair-photo-width-final: 100px;
    --stair-row-height-final: 48px;
    --stair-content-height-final: 152px;
  }

  .price-board-card-stair .price-stair-list > div {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(84px, auto) !important;
  }
}



/* ==================================================
   階段昇降機料金：左右レイアウト再調整
   右は画像のみ / 左は料金表＋注意書き
   見出し（●・線・ピクトグラム・題名）はそのまま
================================================== */

:root {
  --stair-layout-top-gap-v2: 38px;
  --stair-layout-column-gap-v2: 18px;
  --stair-left-width-basis-v2: minmax(0, 1fr);
  --stair-photo-width-v2: 152px;
  --stair-row-height-v2: 44px;
  --stair-row-gap-v2: 5px;

  /* 介助料金の最初の表上端から
     「その後」の表下端までに合わせる */
  --stair-photo-height-v2: 300px;
  --stair-note-gap-v2: 8px;
  --stair-note-size-v2: 12px;
  --stair-note-line-height-v2: 1.45;
}

.price-board-card-stair .price-stair-layout {
  margin-top: var(--stair-layout-top-gap-v2) !important;
  display: grid !important;
  grid-template-columns: var(--stair-left-width-basis-v2) var(--stair-photo-width-v2) !important;
  align-items: start !important;
  gap: var(--stair-layout-column-gap-v2) !important;
}

.price-board-card-stair .price-stair-left {
  min-width: 0 !important;
}

.price-board-card-stair .price-stair-list {
  margin-top: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: repeat(3, minmax(var(--stair-row-height-v2), auto)) !important;
  gap: var(--stair-row-gap-v2) !important;
}

.price-board-card-stair .price-stair-list > div {
  min-height: var(--stair-row-height-v2) !important;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto) !important;
}

.price-board-card-stair .price-stair-photo-box {
  width: 100% !important;
  height: var(--stair-photo-height-v2) !important;
  min-height: 0 !important;
  align-self: start !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.price-board-card-stair .price-stair-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 45% !important;
}

.price-board-card-stair .price-stair-note,
.price-board-card-stair .price-board-small-note.price-stair-note {
  margin-top: var(--stair-note-gap-v2) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: var(--stair-note-size-v2) !important;
  line-height: var(--stair-note-line-height-v2) !important;
  color: var(--navy) !important;
}

@media (max-width: 1100px) {
  :root {
    --stair-layout-column-gap-v2: 14px;
    --stair-photo-width-v2: 136px;
    --stair-row-height-v2: 42px;
    --stair-photo-height-v2: 285px;
    --stair-note-size-v2: 11.5px;
  }

  .price-board-card-stair .price-stair-list > div {
    grid-template-columns: minmax(0, 1fr) minmax(100px, auto) !important;
  }
}

@media (max-width: 700px) {
  :root {
    --stair-layout-column-gap-v2: 10px;
    --stair-photo-width-v2: 112px;
    --stair-row-height-v2: 38px;
    --stair-row-gap-v2: 4px;
    --stair-photo-height-v2: 245px;
    --stair-note-gap-v2: 6px;
    --stair-note-size-v2: 10.5px;
  }

  .price-board-card-stair .price-stair-list > div {
    grid-template-columns: minmax(0, 1fr) minmax(84px, auto) !important;
  }
}

/* ==================================================
   階段昇降機料金：表を介助料金と完全統一
   ・PC／タブレット：行高60px、項目18px、金額20px
   ・スマートフォン：行高50px、項目14px、金額18px
   ※画像・注意書き・見出しの位置は変更しません
================================================== */

:root {
  --stair-table-row-height-match: 60px;
  --stair-table-label-size-match: 18px;
  --stair-table-price-size-match: 20px;
}

.price-board-card-stair .price-stair-list {
  grid-template-rows:
    repeat(3, minmax(var(--stair-table-row-height-match), auto))
    !important;
}

.price-board-card-stair .price-stair-list > div {
  min-height: var(--stair-table-row-height-match) !important;
}

.price-board-card-stair .price-stair-list dt {
  color: var(--navy) !important;
  font-size: var(--stair-table-label-size-match) !important;
  font-weight: var(--meter-base-label-weight-final) !important;
  line-height: 1.5 !important;
}

.price-board-card-stair .price-stair-list dd,
.price-board-card-stair .price-stair-list dd strong {
  color: var(--navy) !important;
  font-size: var(--stair-table-price-size-match) !important;
  font-weight: var(--meter-base-price-weight-final) !important;
  line-height: 1.5 !important;
}


/* スマートフォンは介助料金と同じ数値 */
@media (max-width: 700px) {
  :root {
    --stair-table-row-height-match: 50px;
    --stair-table-label-size-match: 14px;
    --stair-table-price-size-match: 18px;
  }
}

/* ==================================================
   階段昇降機料金：注意書きを基本料金と統一
   ・色：基本料金の注意書きと同じ
   ・サイズ：PC 14px／スマホ 13px
   ※位置・画像・料金表・見出しは変更しません
================================================== */

.price-board-card-stair .price-stair-note,
.price-board-card-stair .price-board-small-note.price-stair-note {
  color: var(--text-light) !important;
  font-size: var(--meter-night-note-size-final) !important;
  font-weight: var(--meter-night-note-weight-final) !important;
  line-height: 1.6 !important;
}

@media (max-width: 700px) {
  .price-board-card-stair .price-stair-note,
  .price-board-card-stair .price-board-small-note.price-stair-note {
    font-size: 13px !important;
  }
}

/* ==================================================
   料金表4カード：3つの理由カードと同じ立体感・動き
   ＋カード下の注意書きをカードなしに変更
================================================== */

:root {
  /* 通常時にカードを上へ浮かせる量 */
  --price-card-lift-final: 5px;

  /* マウスを重ねた時に上へ浮かせる量 */
  --price-card-hover-lift-final: 11px;

  /* 通常時の影 */
  --price-card-shadow-final:
    0 22px 42px rgba(13, 43, 69, 0.17),
    0 8px 18px rgba(13, 43, 69, 0.10);

  /* マウスを重ねた時の影 */
  --price-card-hover-shadow-final:
    0 30px 56px rgba(13, 43, 69, 0.22),
    0 12px 24px rgba(13, 43, 69, 0.13);

  /* 4カードと下の注意書きの間隔 */
  --price-caution-gap-final: 10px;
}


/* 料金カードの立体感 */
.price-board-card {
  position: relative !important;
  z-index: 1 !important;

  border:
    1px solid rgba(255, 255, 255, 0.95)
    !important;

  background:
    rgba(255, 255, 255, 0.98)
    !important;

  box-shadow:
    var(--price-card-shadow-final)
    !important;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease
    !important;

  will-change: transform;
}


/* カード上側に薄い光を入れて立体感を強調 */
.price-board-card::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(111, 135, 154, 0.08);
}


/* カード内の内容を光レイヤーより前に保つ */
.price-board-card > * {
  position: relative;
  z-index: 1;
}


/* PC：通常時から少し浮かせ、ホバー時にさらに上へ */
@media (min-width: 821px) {
  .price-board-card {
    transform:
      translateY(
        calc(var(--price-card-lift-final) * -1)
      ) !important;
  }

  .price-board-card:hover {
    z-index: 3 !important;

    transform:
      translateY(
        calc(var(--price-card-hover-lift-final) * -1)
      ) !important;

    box-shadow:
      var(--price-card-hover-shadow-final)
      !important;
  }
}


/* スマートフォンは立体感だけ少し控えめ */
@media (max-width: 820px) {
  .price-board-card {
    box-shadow:
      0 16px 32px rgba(13, 43, 69, 0.15),
      0 6px 14px rgba(13, 43, 69, 0.08)
      !important;
  }
}


/* ==================================================
   4カード下の共通注意書き
   背景・枠・角丸をなくし、カードへ寄せる
================================================== */

.price-board-caution {
  margin-top:
    var(--price-caution-gap-final)
    !important;

  padding: 0 4px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* 注意書き内の各行 */
.price-board-caution p {
  margin: 0 !important;
}


/* スマートフォン */
@media (max-width: 700px) {
  :root {
    --price-caution-gap-final: 8px;
  }

  .price-board-caution {
    padding: 0 2px !important;
  }
}

/* ==================================================
   料金シミュレーション帯：見本画像レイアウト
   左画像：simulation1.png ＋ fukidasi.png
================================================== */

:root {
  /* 帯全体 */
  --simulation-panel-gap-final: 24px;
  --simulation-panel-padding-y-final: 16px;
  --simulation-panel-padding-x-final: 22px;
  --simulation-panel-radius-final: 15px;

  /* 左側の画像エリア */
  --simulation-visual-width-final: 118px;
  --simulation-visual-height-final: 102px;

  /* 電卓・スマートフォン画像 */
  --simulation-main-image-width-final: 78px;
  --simulation-main-image-x-final: 0px;
  --simulation-main-image-y-final: 0px;

  /* 吹き出し画像 */
  --simulation-balloon-width-final: 92px;
  --simulation-balloon-x-final: 46px;
  --simulation-balloon-y-final: -8px;

  /* 見出し・説明 */
  --simulation-title-size-final: 27px;
  --simulation-trial-size-final: 14px;
  --simulation-description-size-final: 15px;

  /* ボタン */
  --simulation-button-width-final: 355px;
  --simulation-button-height-final: 72px;
  --simulation-button-size-final: 22px;
}


/* 横長の帯全体 */
.price-simulation-panel {
  width: 100% !important;
  margin-top: 24px !important;
  padding:
    var(--simulation-panel-padding-y-final)
    var(--simulation-panel-padding-x-final)
    !important;

  display: grid !important;
  grid-template-columns:
    var(--simulation-visual-width-final)
    minmax(0, 1fr)
    var(--simulation-button-width-final)
    !important;

  align-items: center !important;
  gap: var(--simulation-panel-gap-final) !important;

  background: #f4f5f6 !important;
  border: 2px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: var(--simulation-panel-radius-final) !important;

  box-shadow:
    0 5px 0 rgba(75, 91, 105, 0.18),
    0 13px 26px rgba(13, 43, 69, 0.13)
    !important;
}


/* ==================================================
   左側：電卓画像＋吹き出し画像
================================================== */

.price-simulation-visual {
  position: relative;
  width: var(--simulation-visual-width-final);
  height: var(--simulation-visual-height-final);
  align-self: center;
}


.price-simulation-main-image {
  position: absolute;
  left: var(--simulation-main-image-x-final);
  bottom: var(--simulation-main-image-y-final);

  width: var(--simulation-main-image-width-final);
  max-width: none;
  height: auto;

  object-fit: contain;
}


.price-simulation-balloon-image {
  position: absolute;
  z-index: 2;

  left: var(--simulation-balloon-x-final);
  top: var(--simulation-balloon-y-final);

  width: var(--simulation-balloon-width-final);
  max-width: none;
  height: auto;

  object-fit: contain;
}


/* ==================================================
   中央：題名・案内・説明文
================================================== */

.price-simulation-text {
  min-width: 0;
}


.price-simulation-title-row {
  width: 100%;
  padding-bottom: 6px;

  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start;
  gap: 22px !important;

  border-bottom: 2px solid #66859a;
}


.price-simulation-title-row h3 {
  flex: 0 0 auto;

  margin: 0 !important;

  color: var(--navy) !important;
  font-size: var(--simulation-title-size-final) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.035em !important;
}


.price-simulation-trial-copy {
  color: #30495b !important;
  font-size: var(--simulation-trial-size-final) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}


.price-simulation-text > p {
  margin: 8px 0 0 !important;

  color: #18364e !important;
  font-size: var(--simulation-description-size-final) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}


/* ==================================================
   右側：料金を計算するボタン
================================================== */

.price-simulation-button {
  width: var(--simulation-button-width-final) !important;
  min-width: 0 !important;
  min-height: var(--simulation-button-height-final) !important;
  padding: 13px 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;

  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      #3216dc 0%,
      #2100b8 58%,
      #16008f 100%
    )
    !important;

  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 11px !important;

  box-shadow:
    0 5px 0 rgba(16, 0, 95, 0.34),
    0 11px 20px rgba(23, 0, 130, 0.28)
    !important;

  font-size: var(--simulation-button-size-final) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap;

  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease
    !important;
}


.price-simulation-button > svg {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.price-simulation-arrow {
  margin-left: auto;

  font-size: 28px !important;
  font-weight: 500;
  line-height: 1 !important;
  letter-spacing: -0.16em;
}


.price-simulation-button:hover {
  transform: translateY(-4px) !important;

  box-shadow:
    0 8px 0 rgba(16, 0, 95, 0.30),
    0 17px 27px rgba(23, 0, 130, 0.30)
    !important;

  filter: brightness(1.08);
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --simulation-panel-gap-final: 16px;
    --simulation-panel-padding-x-final: 16px;

    --simulation-visual-width-final: 102px;
    --simulation-visual-height-final: 94px;

    --simulation-main-image-width-final: 70px;
    --simulation-balloon-width-final: 81px;
    --simulation-balloon-x-final: 38px;

    --simulation-title-size-final: 22px;
    --simulation-trial-size-final: 11px;
    --simulation-description-size-final: 13px;

    --simulation-button-width-final: 285px;
    --simulation-button-height-final: 64px;
    --simulation-button-size-final: 18px;
  }

  .price-simulation-title-row {
    gap: 12px !important;
  }

  .price-simulation-button > svg {
    width: 29px !important;
    height: 29px !important;
    flex-basis: 29px;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --simulation-panel-gap-final: 14px;
    --simulation-panel-padding-y-final: 17px;
    --simulation-panel-padding-x-final: 15px;

    --simulation-visual-width-final: 105px;
    --simulation-visual-height-final: 94px;

    --simulation-main-image-width-final: 68px;
    --simulation-balloon-width-final: 78px;
    --simulation-balloon-x-final: 37px;
    --simulation-balloon-y-final: -5px;

    --simulation-title-size-final: 22px;
    --simulation-trial-size-final: 12px;
    --simulation-description-size-final: 13px;

    --simulation-button-height-final: 62px;
    --simulation-button-size-final: 18px;
  }

  .price-simulation-panel {
    grid-template-columns:
      var(--simulation-visual-width-final)
      minmax(0, 1fr)
      !important;
  }

  .price-simulation-title-row {
    padding-bottom: 5px;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  .price-simulation-trial-copy {
    white-space: normal;
  }

  .price-simulation-button {
    grid-column: 1 / -1;

    width: 100% !important;
    margin-top: 2px;
  }
}


@media (max-width: 470px) {
  :root {
    --simulation-visual-width-final: 88px;
    --simulation-visual-height-final: 82px;

    --simulation-main-image-width-final: 58px;
    --simulation-balloon-width-final: 65px;
    --simulation-balloon-x-final: 31px;

    --simulation-title-size-final: 19px;
    --simulation-trial-size-final: 10.5px;
    --simulation-description-size-final: 12px;
  }

  .price-simulation-panel {
    gap: 10px !important;
  }

  .price-simulation-text > p br {
    display: none;
  }
}

/* ==================================================
   料金シミュレーション：
   案内文をボタン上へ移動し、ボタンを少し下げる
================================================== */

:root {
  /* 右側全体を下へ動かす量 */
  --simulation-action-y-final: 6px;

  /* 案内文とボタンの間隔 */
  --simulation-trial-button-gap-final: 4px;
}


/* 右側：案内文＋ボタン */
.price-simulation-action {
  width: var(--simulation-button-width-final);
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  transform:
    translateY(var(--simulation-action-y-final));
}


/* 「まずはお気軽にお試しください」 */
.price-simulation-action .price-simulation-trial-copy {
  width: 100%;
  margin:
    0
    0
    var(--simulation-trial-button-gap-final)
    !important;

  color: #30495b !important;
  font-size: var(--simulation-trial-size-final) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: center;
  white-space: nowrap;
}


/* ボタンは右側の幅いっぱい */
.price-simulation-action .price-simulation-button {
  width: 100% !important;
}


/* 中央タイトル横に残っていた案内文用の余白を解除 */
.price-simulation-title-row {
  gap: 0 !important;
}


/* タブレット */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --simulation-action-y-final: 5px;
    --simulation-trial-button-gap-final: 3px;
  }
}


/* スマートフォン */
@media (max-width: 700px) {
  :root {
    --simulation-action-y-final: 0px;
    --simulation-trial-button-gap-final: 5px;
  }

  .price-simulation-action {
    grid-column: 1 / -1;

    width: 100%;
    margin-top: 3px;

    transform: none;
  }

  .price-simulation-action .price-simulation-trial-copy {
    font-size: var(--simulation-trial-size-final) !important;
    white-space: normal;
  }

  .price-simulation-action .price-simulation-button {
    margin-top: 0 !important;
  }
}

/* ==================================================
   料金シミュレーション
   左アイコン・吹き出し 最終調整専用
   ※ここだけ変更すればサイズと位置を調整できます

   X：＋で右／－で左
   Y：＋で下／－で上
================================================== */

/* PC */
:root {
  /* 左アイコン：simulation1.png */
  --simulation-main-image-width-final: 120px;
  --simulation-main-image-x-final: -20px;
  --simulation-main-image-y-final: -62px;

  /* 吹き出し：fukidasi.png */
  --simulation-balloon-width-final: 300px;
  --simulation-balloon-x-final: -13px;
  --simulation-balloon-y-final: -55px;
}


/* タブレット */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    /* 左アイコン */
    --simulation-main-image-width-final: 70px;
    --simulation-main-image-x-final: 0px;
    --simulation-main-image-y-final: 0px;

    /* 吹き出し */
    --simulation-balloon-width-final: 81px;
    --simulation-balloon-x-final: 38px;
    --simulation-balloon-y-final: -8px;
  }
}


/* スマートフォン */
@media (max-width: 700px) {
  :root {
    /* 左アイコン */
    --simulation-main-image-width-final: 68px;
    --simulation-main-image-x-final: 0px;
    --simulation-main-image-y-final: 0px;

    /* 吹き出し */
    --simulation-balloon-width-final: 78px;
    --simulation-balloon-x-final: 37px;
    --simulation-balloon-y-final: -5px;
  }
}


/* 小さいスマートフォン */
@media (max-width: 470px) {
  :root {
    /* 左アイコン */
    --simulation-main-image-width-final: 58px;
    --simulation-main-image-x-final: 0px;
    --simulation-main-image-y-final: 0px;

    /* 吹き出し */
    --simulation-balloon-width-final: 65px;
    --simulation-balloon-x-final: 31px;
    --simulation-balloon-y-final: -5px;
  }
}

/* ==================================================
   料金シミュレーション
   吹き出し内文字＋中央テキスト重なり防止 最終調整

   X：＋で右／－で左
   Y：＋で下／－で上
================================================== */

/* PC */
:root {
  /*
    吹き出しが大きくなった分、左画像エリアを広げます。
    この値を大きくすると、題名・ライン・説明文が右へ移動します。
  */
  --simulation-visual-width-final: 300px;

  /* 題名・ライン・説明文全体の追加移動 */
  --simulation-text-x-final: 5px;
  --simulation-text-y-final: 0px;

  /* 吹き出し内の文字 */
  --simulation-balloon-copy-width-final: 170px;
  --simulation-balloon-copy-x-final: 72px;
  --simulation-balloon-copy-y-final: -26px;
  --simulation-balloon-copy-size-final: 18px;
  --simulation-balloon-copy-line-height-final: 1.35;
  --simulation-balloon-copy-color-final: #6f879a;
}


/* 題名・ライン・説明文をまとめて移動 */
.price-simulation-text {
  transform:
    translate(
      var(--simulation-text-x-final),
      var(--simulation-text-y-final)
    ) !important;
}


/* 吹き出し内の文字 */
.price-simulation-balloon-copy {
  position: absolute;
  z-index: 3;

  left: var(--simulation-balloon-copy-x-final);
  top: var(--simulation-balloon-copy-y-final);

  width: var(--simulation-balloon-copy-width-final);
  margin: 0 !important;
  padding: 0 !important;

  color: var(--simulation-balloon-copy-color-final);
  background: transparent;
  border: 0;

  font-size: var(--simulation-balloon-copy-size-final);
  font-weight: 900;
  line-height: var(--simulation-balloon-copy-line-height-final);
  letter-spacing: 0.035em;
  text-align: center;

  pointer-events: none;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --simulation-visual-width-final: 150px;

    --simulation-text-x-final: 3px;
    --simulation-text-y-final: 0px;

    --simulation-balloon-copy-width-final: 72px;
    --simulation-balloon-copy-x-final: 43px;
    --simulation-balloon-copy-y-final: 8px;
    --simulation-balloon-copy-size-final: 8px;
    --simulation-balloon-copy-line-height-final: 1.3;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --simulation-visual-width-final: 130px;

    --simulation-text-x-final: 0px;
    --simulation-text-y-final: 0px;

    --simulation-balloon-copy-width-final: 67px;
    --simulation-balloon-copy-x-final: 42px;
    --simulation-balloon-copy-y-final: 10px;
    --simulation-balloon-copy-size-final: 7px;
    --simulation-balloon-copy-line-height-final: 1.3;
  }
}


/* 小さいスマートフォン */
@media (max-width: 470px) {
  :root {
    --simulation-visual-width-final: 108px;

    --simulation-balloon-copy-width-final: 56px;
    --simulation-balloon-copy-x-final: 35px;
    --simulation-balloon-copy-y-final: 12px;
    --simulation-balloon-copy-size-final: 6px;
  }
}

/* ==================================================
   料金シミュレーション帯
   スクリーンショット確認後の最終バランス調整

   X：＋で右／－で左
   Y：＋で下／－で上
================================================== */

/* PC */
:root {
  /*
    左画像エリアを少し狭めて、
    題名・ライン・説明文を自然に左へ寄せます。
  */
  --simulation-visual-width-final: 225px;

  /* 題名・ライン・説明文全体 */
  --simulation-text-x-final: 0px;
  --simulation-text-y-final: 0px;

  /*
    吹き出し内の文字
    見えている吹き出しの内側へ収めます。
  */
  --simulation-balloon-copy-width-final: 132px;
  --simulation-balloon-copy-x-final: 73px;
  --simulation-balloon-copy-y-final: 2px;
  --simulation-balloon-copy-size-final: 16px;
  --simulation-balloon-copy-line-height-final: 1.35;
}


/* 吹き出し内文字の中央揃えを安定させる */
.price-simulation-balloon-copy {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  text-align: center !important;
}


/* 題名・ライン・説明文 */
.price-simulation-text {
  min-width: 0;
}


/* タブレット */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --simulation-visual-width-final: 145px;

    --simulation-balloon-copy-width-final: 70px;
    --simulation-balloon-copy-x-final: 43px;
    --simulation-balloon-copy-y-final: 9px;
    --simulation-balloon-copy-size-final: 8px;
    --simulation-balloon-copy-line-height-final: 1.3;
  }

  .price-simulation-balloon-copy {
    min-height: 25px;
  }
}


/* スマートフォン */
@media (max-width: 700px) {
  :root {
    --simulation-visual-width-final: 125px;

    --simulation-balloon-copy-width-final: 65px;
    --simulation-balloon-copy-x-final: 42px;
    --simulation-balloon-copy-y-final: 10px;
    --simulation-balloon-copy-size-final: 7px;
    --simulation-balloon-copy-line-height-final: 1.3;
  }

  .price-simulation-balloon-copy {
    min-height: 23px;
  }
}


/* 小さいスマートフォン */
@media (max-width: 470px) {
  :root {
    --simulation-visual-width-final: 105px;

    --simulation-balloon-copy-width-final: 54px;
    --simulation-balloon-copy-x-final: 35px;
    --simulation-balloon-copy-y-final: 11px;
    --simulation-balloon-copy-size-final: 6px;
  }

  .price-simulation-balloon-copy {
    min-height: 20px;
  }
}

/* ==================================================
   料金シミュレーション帯
   吹き出し3行＋案内文を少し拡大
================================================== */

:root {
  /* 吹き出し内の3行文字 */
  --simulation-balloon-copy-y-final: 4px;
  --simulation-balloon-copy-size-final: 15px;
  --simulation-balloon-copy-line-height-final: 1.25;

  /* 「まずはお気軽にお試しください」 */
  --simulation-trial-size-final: 16px;
}


/* タブレット */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --simulation-trial-size-final: 12px;
  }
}


/* スマートフォン */
@media (max-width: 700px) {
  :root {
    --simulation-trial-size-final: 13px;
  }
}

/* ==================================================
   料金シミュレーション横長カード
   上の料金4カードと同じ立体感だけ付ける
   ※カード自体は動かしません
   ※ボタンのホバー動作はそのまま維持
================================================== */

.price-simulation-panel {
  position: relative !important;
  z-index: 1 !important;

  border:
    1px solid rgba(255, 255, 255, 0.95)
    !important;

  background:
    rgba(255, 255, 255, 0.98)
    !important;

  box-shadow:
    var(--price-card-shadow-final)
    !important;

  transform: none !important;
  transition: none !important;
}


/* 上側の薄い光も料金4カードと統一 */
.price-simulation-panel::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(111, 135, 154, 0.08);
}


/* 中身を光レイヤーより前へ */
.price-simulation-panel > * {
  position: relative;
  z-index: 1;
}


/* マウスを乗せてもカードは動かさない */
.price-simulation-panel:hover {
  transform: none !important;
  box-shadow:
    var(--price-card-shadow-final)
    !important;
}


/* スマートフォンも動かさず、立体感だけ維持 */
@media (max-width: 820px) {
  .price-simulation-panel,
  .price-simulation-panel:hover {
    transform: none !important;

    box-shadow:
      0 16px 32px rgba(13, 43, 69, 0.15),
      0 6px 14px rgba(13, 43, 69, 0.08)
      !important;
  }
}

/* ==================================================
   介護保険外サービス：見本画像レイアウト
================================================== */

:root {
  --private-service-bg-final: #dce6ed;
  --private-service-content-width-final: 1220px;
  --private-service-card-gap-final: 22px;
  --private-service-card-radius-final: 18px;
  --private-service-card-padding-final: 24px;
  --private-service-card-min-height-final: 510px;

  --private-service-navy-final: #0d2b45;
  --private-service-purple-final: #2c16cc;
  --private-service-row-bg-final: #eef1f3;
}


/* セクション全体 */
.private-service-section {
  padding: 54px 0 72px !important;
  background: var(--private-service-bg-final) !important;
}


.private-service-inner {
  width:
    min(
      var(--private-service-content-width-final),
      94%
    )
    !important;
}


/* ==================================================
   見出し
================================================== */

.private-service-heading {
  margin-bottom: 28px;
  text-align: center;
}


.private-service-title {
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;

  color: var(--private-service-navy-final);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.035em;
}


.private-service-heading-lamp {
  width: 68px;
  height: auto;

  filter:
    grayscale(1)
    brightness(1.35)
    contrast(0.72);

  opacity: 0.75;
}


.private-service-heading-lamp-right {
  transform: scaleX(-1);
}


.private-service-subtitle-row {
  margin-top: 2px;

  display: grid;
  grid-template-columns: minmax(35px, 120px) auto minmax(35px, 120px);
  align-items: center;
  justify-content: center;
  gap: 12px;
}


.private-service-subtitle-row > span {
  height: 2px;
  background: #66859a;
}


.private-service-subtitle-row p {
  margin: 0;

  color: var(--private-service-navy-final);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}


.private-service-lead {
  margin: 14px auto 0 !important;

  color: var(--private-service-navy-final) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  text-align: center;
}


.private-service-lead strong {
  margin-left: 8px;
  font-weight: 900;
}


/* ==================================================
   3カード
================================================== */

.private-service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--private-service-card-gap-final) !important;
  align-items: stretch;
}


.private-service-card {
  min-height: var(--private-service-card-min-height-final) !important;
  padding: var(--private-service-card-padding-final) !important;

  display: flex;
  flex-direction: column;

  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: var(--private-service-card-radius-final) !important;

  box-shadow:
    0 8px 0 rgba(75, 91, 105, 0.17),
    0 18px 34px rgba(13, 43, 69, 0.19)
    !important;

  transform: none !important;
  transition: none !important;
}


.private-service-card:hover {
  transform: none !important;
}


/* ==================================================
   カード見出し
================================================== */

.private-service-card-head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}


.private-service-icon {
  width: 76px !important;
  height: 76px !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center;

  color: #ffffff !important;
  background: var(--private-service-navy-final) !important;
  border-radius: 50% !important;
}


.private-service-card-outing .private-service-icon {
  background: var(--private-service-purple-final) !important;
}


.private-service-icon svg {
  width: 54px !important;
  height: 54px !important;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.private-service-card-head-copy {
  min-width: 0;
}


.private-service-card-head-copy h3 {
  margin: 0 !important;

  color: var(--private-service-navy-final) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}


.private-service-card-outing .private-service-card-head-copy h3,
.private-service-card-outing .private-service-card-head-copy strong {
  color: var(--private-service-purple-final) !important;
}


.private-service-card-head-copy > span {
  display: block;

  width: 100%;
  height: 3px;
  margin: 3px 0 2px;

  background: var(--private-service-navy-final);
}


.private-service-card-outing .private-service-card-head-copy > span {
  background: var(--private-service-purple-final);
}


.private-service-card-head-copy strong {
  display: block;

  color: var(--private-service-navy-final);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
  text-align: right;
}


/* ==================================================
   説明文
================================================== */

.private-service-description {
  min-height: 145px;
  margin-top: 22px;
}


.private-service-description,
.private-service-description p,
.private-service-description li {
  color: var(--private-service-navy-final) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
}


.private-service-card-outing .private-service-description,
.private-service-card-outing .private-service-description p {
  color: var(--private-service-purple-final) !important;
}


.private-service-description ul {
  margin: 0;
  padding-left: 1.15em;
}


.private-service-description p {
  margin: 3px 0 0 !important;
}


/* ==================================================
   料金
================================================== */

.private-service-fee-heading {
  width: 94px;
  min-height: 34px;
  padding: 4px 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  background: var(--private-service-navy-final);
  border-radius: 7px;

  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}


.private-service-card-outing .private-service-fee-heading {
  background: var(--private-service-purple-final);
}


.private-fee-list {
  margin: 8px 0 0 !important;

  display: grid;
  gap: 5px;
}


.private-fee-list > div {
  min-height: 37px;
  padding: 5px 8px !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;

  background: var(--private-service-row-bg-final) !important;
  border: 0 !important;
  border-radius: 4px;
}


.private-fee-list dt,
.private-fee-list dd {
  margin: 0 !important;

  color: var(--private-service-navy-final) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}


.private-service-card-outing .private-fee-list dt,
.private-service-card-outing .private-fee-list dd {
  color: var(--private-service-purple-final) !important;
}


.private-fee-list dd {
  text-align: right;
  white-space: nowrap;
}


/* 階段介助カードの注意書き */
.private-service-card-note {
  margin-top: 10px;
}


.private-service-card-note p {
  margin: 0 !important;

  color: var(--private-service-navy-final) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --private-service-card-gap-final: 16px;
    --private-service-card-padding-final: 18px;
  }

  .private-service-title {
    font-size: 30px;
  }

  .private-service-heading-lamp {
    width: 60px;
  }

  .private-service-subtitle-row p {
    font-size: 19px;
  }

  .private-service-lead {
    font-size: 14px !important;
  }

  .private-service-card-head {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .private-service-icon {
    width: 62px !important;
    height: 62px !important;
  }

  .private-service-icon svg {
    width: 44px !important;
    height: 44px !important;
  }

  .private-service-card-head-copy h3 {
    font-size: 18px !important;
  }

  .private-service-card-head-copy strong {
    font-size: 16px;
  }

  .private-service-description,
  .private-service-description p,
  .private-service-description li {
    font-size: 12px !important;
  }

  .private-fee-list dt,
  .private-fee-list dd {
    font-size: 12px !important;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  .private-service-section {
    padding: 52px 0 60px !important;
  }

  .private-service-title {
    gap: 8px;
    font-size: 25px;
  }

  .private-service-heading-lamp {
    width: 44px;
  }

  .private-service-subtitle-row {
    grid-template-columns: 35px auto 35px;
    gap: 7px;
  }

  .private-service-subtitle-row p {
    font-size: 15px;
  }

  .private-service-lead {
    font-size: 13px !important;
    text-align: left;
  }

  .private-service-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .private-service-card {
    min-height: 0 !important;
  }

  .private-service-card-head-copy h3 {
    font-size: 21px !important;
  }

  .private-service-description {
    min-height: 0;
  }
}

/* ==================================================
   介護保険外サービス見出し 最終調整
   ・英語見出しを追加
   ・ランプを他セクションと同じ色・サイズへ統一

   X：＋で右／－で左
   Y：＋で下／－で上
================================================== */

:root {
  /* 英語見出し */
  --private-service-kicker-size-final: 13px;
  --private-service-kicker-x-final: 0px;
  --private-service-kicker-y-final: 0px;
  --private-service-kicker-bottom-gap-final: 2px;

  /* 左右のランプ */
  --private-service-lamp-size-final: 90px;

  --private-service-left-lamp-x-final: 0px;
  --private-service-left-lamp-y-final: 0px;

  --private-service-right-lamp-x-final: 0px;
  --private-service-right-lamp-y-final: 0px;
}


/* 英語見出し */
.private-service-kicker {
  margin:
    0
    0
    var(--private-service-kicker-bottom-gap-final)
    !important;

  color: var(--blue-gray) !important;
  font-size: var(--private-service-kicker-size-final) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-align: center;

  transform:
    translate(
      var(--private-service-kicker-x-final),
      var(--private-service-kicker-y-final)
    )
    !important;
}


/* ランプの色・サイズを他のセクションと統一 */
.private-service-heading-lamp {
  width: var(--private-service-lamp-size-final) !important;
  height: auto !important;
  flex: 0 0 auto;

  opacity: 1 !important;

  filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(12%)
    saturate(780%)
    hue-rotate(163deg)
    brightness(93%)
    contrast(87%)
    !important;
}


/* 左ランプ */
.private-service-title
.private-service-heading-lamp:first-child {
  transform:
    translate(
      var(--private-service-left-lamp-x-final),
      var(--private-service-left-lamp-y-final)
    )
    !important;
}


/* 右ランプ */
.private-service-title
.private-service-heading-lamp:last-child {
  transform:
    translate(
      var(--private-service-right-lamp-x-final),
      var(--private-service-right-lamp-y-final)
    )
    scaleX(-1)
    !important;
}


/* タブレット */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --private-service-kicker-size-final: 12px;
    --private-service-lamp-size-final: 76px;
  }
}


/* スマートフォン */
@media (max-width: 700px) {
  :root {
    --private-service-kicker-size-final: 11px;
    --private-service-kicker-bottom-gap-final: 4px;
    --private-service-lamp-size-final: 48px;
  }
}

/* ==================================================
   介護保険外サービス 最終調整
   ・見出しの高さ／余白を既存セクションと統一
   ・説明文と料金の間を詰める
   ・カードを短くする
   ・PNGピクトグラムへ差し替え
================================================== */

:root {
  /* セクション・見出し */
  --private-service-section-padding-top-final: 50px;
  --private-service-section-padding-bottom-final: 56px;
  --private-service-heading-bottom-gap-final: 34px;

  --private-service-kicker-bottom-gap-final: 8px;
  --private-service-title-size-final: 35px;
  --private-service-title-line-height-final: 1.45;

  --private-service-subtitle-top-gap-final: 12px;
  --private-service-lead-top-gap-final: 12px;

  /* カードを短くする */
  --private-service-card-min-height-final: 440px;
  --private-service-card-padding-final: 22px;

  /* 説明文と料金の距離 */
  --private-service-description-top-gap-final: 14px;
  --private-service-description-min-height-final: 102px;
  --private-service-fee-list-gap-final: 4px;
  --private-service-fee-row-height-final: 34px;

  /* 丸枠・PNGピクトグラム */
  --private-service-icon-size-final: 70px;
  --private-service-pictogram-emergency-size-final: 54px;
  --private-service-pictogram-outing-size-final: 52px;
  --private-service-pictogram-stair-size-final: 52px;
}


/* ==================================================
   見出し：これまでのセクションと同じ高さ・余白
================================================== */

.private-service-section {
  padding:
    var(--private-service-section-padding-top-final)
    0
    var(--private-service-section-padding-bottom-final)
    !important;
}


.private-service-heading {
  margin-bottom:
    var(--private-service-heading-bottom-gap-final)
    !important;

  text-align: center;
}


.private-service-kicker {
  margin:
    0
    0
    var(--private-service-kicker-bottom-gap-final)
    !important;

  font-size: 13px !important;
  line-height: 1.4 !important;
  transform: none !important;
}


.private-service-title {
  margin: 0 !important;

  font-size:
    var(--private-service-title-size-final)
    !important;

  line-height:
    var(--private-service-title-line-height-final)
    !important;
}


.private-service-subtitle-row {
  margin-top:
    var(--private-service-subtitle-top-gap-final)
    !important;
}


.private-service-lead {
  margin:
    var(--private-service-lead-top-gap-final)
    auto
    0
    !important;
}


/* ==================================================
   カードを短くし、説明文と料金を近づける
================================================== */

.private-service-card {
  min-height:
    var(--private-service-card-min-height-final)
    !important;

  padding:
    var(--private-service-card-padding-final)
    !important;
}


.private-service-description {
  min-height:
    var(--private-service-description-min-height-final)
    !important;

  margin-top:
    var(--private-service-description-top-gap-final)
    !important;
}


.private-fee-list {
  margin-top: 7px !important;

  gap:
    var(--private-service-fee-list-gap-final)
    !important;
}


.private-fee-list > div {
  min-height:
    var(--private-service-fee-row-height-final)
    !important;

  padding: 4px 8px !important;
}


.private-service-card-note {
  margin-top: 7px !important;
}


/* ==================================================
   PNGピクトグラム
================================================== */

.private-service-card-head {
  grid-template-columns:
    var(--private-service-icon-size-final)
    minmax(0, 1fr)
    !important;
}


.private-service-icon {
  width:
    var(--private-service-icon-size-final)
    !important;

  height:
    var(--private-service-icon-size-final)
    !important;
}


.private-service-pictogram {
  display: block;

  max-width: none !important;
  height: auto;

  object-fit: contain;
}


.private-service-pictogram-emergency {
  width:
    var(--private-service-pictogram-emergency-size-final)
    !important;
}


.private-service-pictogram-outing {
  width:
    var(--private-service-pictogram-outing-size-final)
    !important;
}


.private-service-pictogram-stair {
  width:
    var(--private-service-pictogram-stair-size-final)
    !important;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --private-service-section-padding-top-final: 46px;
    --private-service-section-padding-bottom-final: 52px;
    --private-service-heading-bottom-gap-final: 30px;

    --private-service-title-size-final: 30px;

    --private-service-card-min-height-final: 410px;
    --private-service-card-padding-final: 18px;

    --private-service-description-min-height-final: 90px;

    --private-service-icon-size-final: 62px;
    --private-service-pictogram-emergency-size-final: 48px;
    --private-service-pictogram-outing-size-final: 46px;
    --private-service-pictogram-stair-size-final: 46px;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --private-service-section-padding-top-final: 48px;
    --private-service-section-padding-bottom-final: 54px;
    --private-service-heading-bottom-gap-final: 28px;

    --private-service-kicker-bottom-gap-final: 6px;
    --private-service-title-size-final: 25px;

    --private-service-subtitle-top-gap-final: 10px;
    --private-service-lead-top-gap-final: 10px;

    --private-service-card-min-height-final: 0px;
    --private-service-description-min-height-final: 0px;

    --private-service-icon-size-final: 62px;
    --private-service-pictogram-emergency-size-final: 47px;
    --private-service-pictogram-outing-size-final: 45px;
    --private-service-pictogram-stair-size-final: 45px;
  }

  .private-service-card {
    min-height: 0 !important;
  }
}


/* ==================================================
   2026-07-26 介護保険外サービス 微調整
   ・ピクトグラムを白に統一
   ・英語→タイトル→サブタイトルの間隔を
     介護タクシー料金セクション基準に調整
================================================== */

:root {
  --private-service-kicker-bottom-gap-match-taxi: 8px;
  --private-service-title-to-subtitle-gap-match-taxi: 20px;
}

/* 英語見出し → タイトル */
.private-service-kicker {
  margin: 0 0 var(--private-service-kicker-bottom-gap-match-taxi) !important;
}

/* タイトル → サブタイトル */
.private-service-subtitle-row {
  margin-top: var(--private-service-title-to-subtitle-gap-match-taxi) !important;
}

/* ピクトグラムを白へ */
.private-service-pictogram {
  filter: brightness(0) invert(1) !important;
}

/* スマホで少しだけ詰める */
@media (max-width: 700px) {
  :root {
    --private-service-title-to-subtitle-gap-match-taxi: 16px;
  }
}

/* ==================================================
   介護保険外サービス 見出し間隔・確定修正
   原因：ランプ画像の90pxがタイトル行の高さを広げていた

   介護タクシー料金と同じ間隔
   英語 → タイトル       8px
   タイトル → サブタイトル 20px
   サブタイトル → 説明文  14px
================================================== */

:root {
  /* 見出し間隔 */
  --private-service-kicker-title-gap-exact: 8px;
  --private-service-title-subtitle-gap-exact: 20px;
  --private-service-subtitle-lead-gap-exact: 14px;

  /* ランプは見た目のサイズを保ち、タイトル行から分離 */
  --private-service-lamp-width-exact: 90px;
  --private-service-left-lamp-position-exact: -108px;
  --private-service-right-lamp-position-exact: -108px;
}


/* 英語 → タイトル */
.private-service-kicker {
  margin:
    0
    0
    var(--private-service-kicker-title-gap-exact)
    !important;
}


/*
  タイトル行は文字だけの高さで計算します。
  ランプはabsolute配置なので、上下の余白を押し広げません。
*/
.private-service-title {
  position: relative !important;

  width: max-content;
  max-width: 100%;

  min-height: 0 !important;
  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  white-space: nowrap;
}


/* 左右ランプ共通 */
.private-service-title .private-service-heading-lamp {
  position: absolute !important;
  top: 50% !important;

  width:
    var(--private-service-lamp-width-exact)
    !important;

  height: auto !important;

  margin: 0 !important;
  flex: none !important;

  pointer-events: none;
}


/* 左ランプ */
.private-service-title
.private-service-heading-lamp:first-child {
  left:
    var(--private-service-left-lamp-position-exact)
    !important;

  right: auto !important;

  transform:
    translateY(-50%)
    translate(
      var(--private-service-left-lamp-x-final),
      var(--private-service-left-lamp-y-final)
    )
    !important;
}


/* 右ランプ */
.private-service-title
.private-service-heading-lamp:last-child {
  right:
    var(--private-service-right-lamp-position-exact)
    !important;

  left: auto !important;

  transform:
    translateY(-50%)
    translate(
      var(--private-service-right-lamp-x-final),
      var(--private-service-right-lamp-y-final)
    )
    scaleX(-1)
    !important;
}


/* タイトル → サブタイトル */
.private-service-subtitle-row {
  margin-top:
    var(--private-service-title-subtitle-gap-exact)
    !important;
}


/* サブタイトル → 説明文 */
.private-service-lead {
  margin:
    var(--private-service-subtitle-lead-gap-exact)
    auto
    0
    !important;
}


/* ピクトグラムは白を維持 */
.private-service-pictogram {
  filter:
    brightness(0)
    invert(1)
    !important;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --private-service-lamp-width-exact: 76px;
    --private-service-left-lamp-position-exact: -90px;
    --private-service-right-lamp-position-exact: -90px;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --private-service-kicker-title-gap-exact: 6px;
    --private-service-title-subtitle-gap-exact: 16px;
    --private-service-subtitle-lead-gap-exact: 12px;

    --private-service-lamp-width-exact: 42px;
    --private-service-left-lamp-position-exact: -48px;
    --private-service-right-lamp-position-exact: -48px;
  }
}

/* ==================================================
   介護保険外サービス
   3カード 個別微調整専用

   X：＋で右／－で左
   Y：＋で下／－で上

   各カードごとに調整可能：
   ・青い丸
   ・白いピクトグラム
   ・タイトル
   ・横線
   ・サブタイトル
   ・説明文
   ・「料金」見出し
   ・料金表の項目文字
   ・料金表の金額文字
================================================== */

:root {

  /* ================================================
     1枚目：緊急時対応
  ================================================ */

  /* 青い丸 */
  --emergency-circle-size: 80px;
  --emergency-circle-x: 0px;
  --emergency-circle-y: 0px;

  /* 白いピクトグラム */
  --emergency-pictogram-size: 65px;
  --emergency-pictogram-x: 0px;
  --emergency-pictogram-y: 0px;

  /* タイトル「緊急時対応」 */
  --emergency-title-size: 23px;
  --emergency-title-x: 0px;
  --emergency-title-y: 4px;

  /* 横線 */
  --emergency-line-width: 103%;
  --emergency-line-height: 3px;
  --emergency-line-x: -10px;
  --emergency-line-y: 0px;

  /* サブタイトル「通常料金」 */
  --emergency-subtitle-size: 20px;
  --emergency-subtitle-x: -10px;
  --emergency-subtitle-y: 0px;

  /* 説明文 */
  --emergency-description-size: 14.5px;
  --emergency-description-x: 2px;
  --emergency-description-y: 0px;

  /* 「料金」見出し */
  --emergency-fee-title-size: 17px;
  --emergency-fee-title-x: 0px;
  --emergency-fee-title-y: 0px;

  /* 料金表：左側項目 */
  --emergency-table-label-size: 15px;
  --emergency-table-label-x: 0px;
  --emergency-table-label-y: 0px;

  /* 料金表：右側金額 */
  --emergency-table-price-size: 16px;
  --emergency-table-price-x: 0px;
  --emergency-table-price-y: 0px;


  /* ================================================
     2枚目：院内付き添い・外出支援
  ================================================ */

  /* 紫の丸 */
  --outing-circle-size: 80px;
  --outing-circle-x: 0px;
  --outing-circle-y: 0px;

  /* 白いピクトグラム */
  --outing-pictogram-size: 52px;
  --outing-pictogram-x: 0px;
  --outing-pictogram-y: 0px;

  /* タイトル「院内付き添い」 */
  --outing-title-size: 23px;
  --outing-title-x: 0px;
  --outing-title-y: 4px;

  /* 横線 */
  --outing-line-width: 103%;
  --outing-line-height: 3px;
  --outing-line-x: -10px;
  --outing-line-y: 0px;

  /* サブタイトル「外出支援」 */
  --outing-subtitle-size: 20px;
  --outing-subtitle-x: -10px;
  --outing-subtitle-y: 0px;

  /* 説明文 */
  --outing-description-size: 14.5px;
  --outing-description-x: 0px;
  --outing-description-y: 0px;

  /* 「料金」見出し */
  --outing-fee-title-size: 17px;
  --outing-fee-title-x: 0px;
  --outing-fee-title-y: 0px;

  /* 料金表：左側項目 */
  --outing-table-label-size: 16px;
  --outing-table-label-x: 0px;
  --outing-table-label-y: 0px;

  /* 料金表：右側金額 */
  --outing-table-price-size: 16px;
  --outing-table-price-x: 0px;
  --outing-table-price-y: 0px;


  /* ================================================
     3枚目：階段介助
  ================================================ */

  /* 青い丸 */
  --service-stair-circle-size: 80px;
  --service-stair-circle-x: 0px;
  --service-stair-circle-y: 0px;

  /* 白いピクトグラム */
  --service-stair-pictogram-size: 52px;
  --service-stair-pictogram-x: 0px;
  --service-stair-pictogram-y: 0px;

  /* タイトル「階段介助」 */
  --service-stair-title-size: 23px;
  --service-stair-title-x: 0px;
  --service-stair-title-y: 4px;

  /* 横線 */
  --service-stair-line-width: 103%;
  --service-stair-line-height: 3px;
  --service-stair-line-x: -10px;
  --service-stair-line-y: 0px;

  /* サブタイトル「昇降機使用」 */
  --service-stair-subtitle-size: 20px;
  --service-stair-subtitle-x: -10px;
  --service-stair-subtitle-y: 0px;

  /* 説明文 */
  --service-stair-description-size: 14.5px;
  --service-stair-description-x: 0px;
  --service-stair-description-y: 0px;

  /* 「料金」見出し */
  --service-stair-fee-title-size: 17px;
  --service-stair-fee-title-x: 0px;
  --service-stair-fee-title-y: 0px;

  /* 料金表：左側項目 */
  --service-stair-table-label-size: 16px;
  --service-stair-table-label-x: 0px;
  --service-stair-table-label-y: 0px;

  /* 料金表：右側金額 */
  --service-stair-table-price-size: 14px;
  --service-stair-table-price-x: 0px;
  --service-stair-table-price-y: 0px;
}


/* ==================================================
   1枚目：緊急時対応
================================================== */

.private-service-card-emergency .private-service-card-head {
  grid-template-columns:
    var(--emergency-circle-size)
    minmax(0, 1fr)
    !important;
}

.private-service-card-emergency .private-service-icon {
  width: var(--emergency-circle-size) !important;
  height: var(--emergency-circle-size) !important;

  transform:
    translate(
      var(--emergency-circle-x),
      var(--emergency-circle-y)
    )
    !important;
}

.private-service-card-emergency .private-service-pictogram {
  width: var(--emergency-pictogram-size) !important;

  filter:
    brightness(0)
    invert(1)
    !important;

  transform:
    translate(
      var(--emergency-pictogram-x),
      var(--emergency-pictogram-y)
    )
    !important;
}

.private-service-card-emergency .private-service-card-head-copy h3 {
  font-size: var(--emergency-title-size) !important;

  transform:
    translate(
      var(--emergency-title-x),
      var(--emergency-title-y)
    )
    !important;
}

.private-service-card-emergency
.private-service-card-head-copy > span {
  width: var(--emergency-line-width) !important;
  height: var(--emergency-line-height) !important;

  transform:
    translate(
      var(--emergency-line-x),
      var(--emergency-line-y)
    )
    !important;
}

.private-service-card-emergency
.private-service-card-head-copy > strong {
  font-size: var(--emergency-subtitle-size) !important;

  transform:
    translate(
      var(--emergency-subtitle-x),
      var(--emergency-subtitle-y)
    )
    !important;
}

.private-service-card-emergency .private-service-description,
.private-service-card-emergency .private-service-description p,
.private-service-card-emergency .private-service-description li {
  font-size: var(--emergency-description-size) !important;
}

.private-service-card-emergency .private-service-description {
  transform:
    translate(
      var(--emergency-description-x),
      var(--emergency-description-y)
    )
    !important;
}

.private-service-card-emergency .private-service-fee-heading {
  font-size: var(--emergency-fee-title-size) !important;

  transform:
    translate(
      var(--emergency-fee-title-x),
      var(--emergency-fee-title-y)
    )
    !important;
}

.private-service-card-emergency .private-fee-list dt {
  font-size: var(--emergency-table-label-size) !important;

  transform:
    translate(
      var(--emergency-table-label-x),
      var(--emergency-table-label-y)
    )
    !important;
}

.private-service-card-emergency .private-fee-list dd {
  font-size: var(--emergency-table-price-size) !important;

  transform:
    translate(
      var(--emergency-table-price-x),
      var(--emergency-table-price-y)
    )
    !important;
}


/* ==================================================
   2枚目：院内付き添い・外出支援
================================================== */

.private-service-card-outing .private-service-card-head {
  grid-template-columns:
    var(--outing-circle-size)
    minmax(0, 1fr)
    !important;
}

.private-service-card-outing .private-service-icon {
  width: var(--outing-circle-size) !important;
  height: var(--outing-circle-size) !important;

  transform:
    translate(
      var(--outing-circle-x),
      var(--outing-circle-y)
    )
    !important;
}

.private-service-card-outing .private-service-pictogram {
  width: var(--outing-pictogram-size) !important;

  filter:
    brightness(0)
    invert(1)
    !important;

  transform:
    translate(
      var(--outing-pictogram-x),
      var(--outing-pictogram-y)
    )
    !important;
}

.private-service-card-outing .private-service-card-head-copy h3 {
  font-size: var(--outing-title-size) !important;

  transform:
    translate(
      var(--outing-title-x),
      var(--outing-title-y)
    )
    !important;
}

.private-service-card-outing
.private-service-card-head-copy > span {
  width: var(--outing-line-width) !important;
  height: var(--outing-line-height) !important;

  transform:
    translate(
      var(--outing-line-x),
      var(--outing-line-y)
    )
    !important;
}

.private-service-card-outing
.private-service-card-head-copy > strong {
  font-size: var(--outing-subtitle-size) !important;

  transform:
    translate(
      var(--outing-subtitle-x),
      var(--outing-subtitle-y)
    )
    !important;
}

.private-service-card-outing .private-service-description,
.private-service-card-outing .private-service-description p,
.private-service-card-outing .private-service-description li {
  font-size: var(--outing-description-size) !important;
}

.private-service-card-outing .private-service-description {
  transform:
    translate(
      var(--outing-description-x),
      var(--outing-description-y)
    )
    !important;
}

.private-service-card-outing .private-service-fee-heading {
  font-size: var(--outing-fee-title-size) !important;

  transform:
    translate(
      var(--outing-fee-title-x),
      var(--outing-fee-title-y)
    )
    !important;
}

.private-service-card-outing .private-fee-list dt {
  font-size: var(--outing-table-label-size) !important;

  transform:
    translate(
      var(--outing-table-label-x),
      var(--outing-table-label-y)
    )
    !important;
}

.private-service-card-outing .private-fee-list dd {
  font-size: var(--outing-table-price-size) !important;

  transform:
    translate(
      var(--outing-table-price-x),
      var(--outing-table-price-y)
    )
    !important;
}


/* ==================================================
   3枚目：階段介助
================================================== */

.private-service-card-stair .private-service-card-head {
  grid-template-columns:
    var(--service-stair-circle-size)
    minmax(0, 1fr)
    !important;
}

.private-service-card-stair .private-service-icon {
  width: var(--service-stair-circle-size) !important;
  height: var(--service-stair-circle-size) !important;

  transform:
    translate(
      var(--service-stair-circle-x),
      var(--service-stair-circle-y)
    )
    !important;
}

.private-service-card-stair .private-service-pictogram {
  width: var(--service-stair-pictogram-size) !important;

  filter:
    brightness(0)
    invert(1)
    !important;

  transform:
    translate(
      var(--service-stair-pictogram-x),
      var(--service-stair-pictogram-y)
    )
    !important;
}

.private-service-card-stair .private-service-card-head-copy h3 {
  font-size: var(--service-stair-title-size) !important;

  transform:
    translate(
      var(--service-stair-title-x),
      var(--service-stair-title-y)
    )
    !important;
}

.private-service-card-stair
.private-service-card-head-copy > span {
  width: var(--service-stair-line-width) !important;
  height: var(--service-stair-line-height) !important;

  transform:
    translate(
      var(--service-stair-line-x),
      var(--service-stair-line-y)
    )
    !important;
}

.private-service-card-stair
.private-service-card-head-copy > strong {
  font-size: var(--service-stair-subtitle-size) !important;

  transform:
    translate(
      var(--service-stair-subtitle-x),
      var(--service-stair-subtitle-y)
    )
    !important;
}

.private-service-card-stair .private-service-description,
.private-service-card-stair .private-service-description p,
.private-service-card-stair .private-service-description li {
  font-size: var(--service-stair-description-size) !important;
}

.private-service-card-stair .private-service-description {
  transform:
    translate(
      var(--service-stair-description-x),
      var(--service-stair-description-y)
    )
    !important;
}

.private-service-card-stair .private-service-fee-heading {
  font-size: var(--service-stair-fee-title-size) !important;

  transform:
    translate(
      var(--service-stair-fee-title-x),
      var(--service-stair-fee-title-y)
    )
    !important;
}

.private-service-card-stair .private-fee-list dt {
  font-size: var(--service-stair-table-label-size) !important;

  transform:
    translate(
      var(--service-stair-table-label-x),
      var(--service-stair-table-label-y)
    )
    !important;
}

.private-service-card-stair .private-fee-list dd {
  font-size: var(--service-stair-table-price-size) !important;

  transform:
    translate(
      var(--service-stair-table-price-x),
      var(--service-stair-table-price-y)
    )
    !important;
}


/* ==================================================
   スマートフォン
   サイズは既存のレスポンシブ値を基準に縮小
================================================== */

@media (max-width: 700px) {
  :root {
    --emergency-circle-size: 62px;
    --emergency-pictogram-size: 47px;
    --emergency-title-size: 21px;
    --emergency-subtitle-size: 18px;

    --outing-circle-size: 62px;
    --outing-pictogram-size: 45px;
    --outing-title-size: 21px;
    --outing-subtitle-size: 18px;

    --service-stair-circle-size: 62px;
    --service-stair-pictogram-size: 45px;
    --service-stair-title-size: 21px;
    --service-stair-subtitle-size: 18px;
  }
}

/* ==================================================
   2026-07-26 料金見出し・シミュレーションボタン
   ＋介護保険外サービスカード 最終調整
================================================== */

:root {
  /* 料金見出し */
  --taxi-price-subtitle-size-final: 20px;
  --taxi-price-subtitle-gap-top-final: 14px;
  --taxi-price-description-gap-top-final: 2px;

  /* シミュレーションボタン */
  --simulation-button-lift-final: 4px;
  --simulation-button-hover-lift-final: 10px;

  /* 介護保険外サービスカード */
  --private-card-lift-final: 5px;
  --private-card-hover-lift-final: 11px;
}


/* ==================================================
   介護タクシー料金
   1行目をサブタイトルへ変更
================================================== */

.taxi-price-heading .taxi-price-subtitle {
  max-width: 820px;

  margin:
    var(--taxi-price-subtitle-gap-top-final)
    auto
    0
    !important;

  color: #29465a !important;
  font-size: var(--taxi-price-subtitle-size-final) !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.045em !important;
  text-align: center;
}


.taxi-price-heading
.home-section-note.taxi-price-description {
  max-width: 820px;

  margin:
    var(--taxi-price-description-gap-top-final)
    auto
    0
    !important;

  color: #29465a !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.75 !important;
  text-align: center;
}


/* ==================================================
   料金シミュレーションボタン
   少し上へ移動＋料金カードと同じ立体感
================================================== */

.price-simulation-action .price-simulation-button {
  transform:
    translateY(
      calc(var(--simulation-button-lift-final) * -1)
    )
    !important;

  box-shadow:
    var(--price-card-shadow-final)
    !important;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease
    !important;

  will-change: transform;
}


.price-simulation-action .price-simulation-button:hover {
  transform:
    translateY(
      calc(var(--simulation-button-hover-lift-final) * -1)
    )
    !important;

  box-shadow:
    var(--price-card-hover-shadow-final)
    !important;

  filter: brightness(1.08);
}


/* ==================================================
   介護保険外サービス3カード
   介護タクシー料金4カードと同じ立体感・動き
================================================== */

.private-service-card {
  position: relative !important;
  z-index: 1 !important;

  border:
    1px solid rgba(255, 255, 255, 0.95)
    !important;

  background:
    rgba(255, 255, 255, 0.98)
    !important;

  box-shadow:
    var(--price-card-shadow-final)
    !important;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease
    !important;

  will-change: transform;
}


.private-service-card::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(111, 135, 154, 0.08);
}


.private-service-card > * {
  position: relative;
  z-index: 1;
}


@media (min-width: 821px) {
  .private-service-card {
    transform:
      translateY(
        calc(var(--private-card-lift-final) * -1)
      )
      !important;
  }

  .private-service-card:hover {
    z-index: 3 !important;

    transform:
      translateY(
        calc(var(--private-card-hover-lift-final) * -1)
      )
      !important;

    box-shadow:
      var(--price-card-hover-shadow-final)
      !important;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 820px) {
  .taxi-price-heading .taxi-price-subtitle {
    font-size: 17px !important;
  }

  .taxi-price-heading
  .home-section-note.taxi-price-description {
    font-size: 14px !important;
  }

  .private-service-card {
    transform: none !important;

    box-shadow:
      0 16px 32px rgba(13, 43, 69, 0.15),
      0 6px 14px rgba(13, 43, 69, 0.08)
      !important;
  }
}

/* ==================================================
   介護タクシー料金 サブタイトル
   介護保険外サービスと同じ見た目・間隔へ統一
================================================== */

:root {
  --taxi-subtitle-title-gap-match-private: 20px;
  --taxi-subtitle-description-gap-match-private: 14px;
}


/* 左右線付きサブタイトル */
.taxi-price-subtitle-row {
  margin-top:
    var(--taxi-subtitle-title-gap-match-private)
    !important;

  display: grid;
  grid-template-columns:
    minmax(35px, 120px)
    auto
    minmax(35px, 120px);

  align-items: center;
  justify-content: center;
  gap: 12px;
}


.taxi-price-subtitle-row > span {
  height: 2px;

  background: #66859a;
}


.taxi-price-subtitle-row p {
  margin: 0 !important;

  color: #29465a !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.03em !important;
  text-align: center;
  white-space: nowrap;
}


/* サブタイトル → 説明文 */
.taxi-price-heading
.home-section-note.taxi-price-description {
  margin:
    var(--taxi-subtitle-description-gap-match-private)
    auto
    0
    !important;
}


/* 旧サブタイトル指定を無効化 */
.taxi-price-heading .taxi-price-subtitle {
  display: none !important;
}


/* スマートフォン */
@media (max-width: 700px) {
  :root {
    --taxi-subtitle-title-gap-match-private: 16px;
    --taxi-subtitle-description-gap-match-private: 12px;
  }

  .taxi-price-subtitle-row {
    grid-template-columns: 35px auto 35px;
    gap: 7px;
  }

  .taxi-price-subtitle-row p {
    font-size: 15px !important;
    white-space: normal;
  }
}

/* ==================================================
   ご利用の流れ：見本画像レイアウト
================================================== */

:root {
  /* セクション */
  --flow-section-padding-top-final: 54px;
  --flow-section-padding-bottom-final: 60px;
  --flow-content-width-final: 1180px;

  /* 見出し */
  --flow-heading-bottom-gap-final: 20px;
  --flow-title-size-final: 34px;
  --flow-lead-size-final: 16px;

  /* カード */
  --flow-card-gap-final: 28px;
  --flow-card-min-height-final: 390px;
  --flow-card-padding-x-final: 14px;
  --flow-card-padding-top-final: 15px;
  --flow-card-padding-bottom-final: 18px;
  --flow-card-radius-final: 14px;

  /* 番号 */
  --flow-number-size-final: 38px;
  --flow-number-font-size-final: 20px;

  /* ピクトグラム */
  --flow-icon-box-size-final: 92px;
  --flow-contact-icon-size-final: 70px;
  --flow-estimate-icon-size-final: 69px;
  --flow-reserve-icon-size-final: 68px;
  --flow-pickup-icon-size-final: 72px;
  --flow-payment-icon-size-final: 69px;

  /* 文字 */
  --flow-card-title-size-final: 16px;
  --flow-card-description-size-final: 13px;
}


/* セクション */
.detailed-flow-section {
  padding:
    var(--flow-section-padding-top-final)
    0
    var(--flow-section-padding-bottom-final)
    !important;

  background: #f2f5f7 !important;
}


.detailed-flow-inner {
  width:
    min(
      var(--flow-content-width-final),
      94%
    )
    !important;
}


/* ==================================================
   見出し
================================================== */

.detailed-flow-heading {
  position: relative;

  margin-bottom:
    var(--flow-heading-bottom-gap-final);

  text-align: center;
}


.detailed-flow-heading .home-section-kicker {
  margin: 0 0 7px !important;

  color: var(--blue-gray) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
}


.detailed-flow-heading h2 {
  position: relative;
  z-index: 1;

  width: max-content;
  max-width: 100%;
  margin: 0 auto;

  color: var(--navy);
  font-size: var(--flow-title-size-final);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
}


/* タイトル後ろの薄い装飾ライン */
.detailed-flow-heading h2::after {
  content: "";

  position: absolute;
  z-index: -1;
  left: 50%;
  top: 56%;

  width: 210px;
  height: 35px;

  transform: translate(-50%, -50%) rotate(-3deg);

  border-top: 2px solid rgba(111, 135, 154, 0.34);
  border-radius: 50%;
}


.detailed-flow-lead {
  margin: 8px auto 0 !important;

  color: var(--navy) !important;
  font-size: var(--flow-lead-size-final) !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  text-align: center;
}


/* ==================================================
   5カード
================================================== */

.detailed-flow-list {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr))
    !important;

  gap:
    var(--flow-card-gap-final)
    !important;

  align-items: stretch;
}


.detailed-flow-item {
  position: relative;

  min-height:
    var(--flow-card-min-height-final)
    !important;

  padding:
    var(--flow-card-padding-top-final)
    var(--flow-card-padding-x-final)
    var(--flow-card-padding-bottom-final)
    !important;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  background: #dfe4e8 !important;
  border: 0 !important;
  border-radius:
    var(--flow-card-radius-final)
    !important;

  box-shadow:
    0 7px 0 rgba(75, 91, 105, 0.15),
    0 15px 26px rgba(13, 43, 69, 0.18)
    !important;

  text-align: center;

  transform: none !important;
  transition: none !important;
}


/* カード間の青い矢印 */
.detailed-flow-item:not(:last-child)::after {
  content: "";

  position: absolute;
  z-index: 3;

  right: calc(var(--flow-card-gap-final) * -0.67);
  top: 47%;

  width: 0;
  height: 0;

  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid var(--navy);

  transform: translateY(-50%);
}


/* ==================================================
   番号
================================================== */

.flow-step-number {
  position: static !important;

  width:
    var(--flow-number-size-final)
    !important;

  height:
    var(--flow-number-size-final)
    !important;

  margin: 0 auto 5px;

  display: grid;
  place-items: center;

  color: var(--navy) !important;
  background: #ffffff !important;
  border-radius: 50%;

  font-size:
    var(--flow-number-font-size-final)
    !important;

  font-weight: 900 !important;
  line-height: 1 !important;

  box-shadow: none !important;
}


/* ==================================================
   ピクトグラム
================================================== */

.flow-step-icon {
  width:
    var(--flow-icon-box-size-final)
    !important;

  height:
    var(--flow-icon-box-size-final)
    !important;

  margin: 0 auto 4px !important;

  display: grid !important;
  place-items: center;

  background: transparent !important;
  border-radius: 0 !important;
}


.flow-step-pictogram {
  display: block;

  max-width: none !important;
  height: auto;

  object-fit: contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(15%)
    sepia(20%)
    saturate(1700%)
    hue-rotate(165deg)
    brightness(86%)
    contrast(101%)
    !important;
}


.flow-step-pictogram-contact {
  width:
    var(--flow-contact-icon-size-final)
    !important;
}


.flow-step-pictogram-estimate {
  width:
    var(--flow-estimate-icon-size-final)
    !important;
}


.flow-step-pictogram-reserve {
  width:
    var(--flow-reserve-icon-size-final)
    !important;
}


.flow-step-pictogram-pickup {
  width:
    var(--flow-pickup-icon-size-final)
    !important;
}


.flow-step-pictogram-payment {
  width:
    var(--flow-payment-icon-size-final)
    !important;
}


/* ==================================================
   カード内文字
================================================== */

.detailed-flow-item h3 {
  min-height: 42px;
  margin: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--navy) !important;
  font-size:
    var(--flow-card-title-size-final)
    !important;

  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
}


.detailed-flow-item p {
  margin: 8px 0 0 !important;
  padding-top: 8px;

  color: var(--navy) !important;
  border-top: 1px solid rgba(13, 43, 69, 0.12);

  font-size:
    var(--flow-card-description-size-final)
    !important;

  font-weight: 600 !important;
  line-height: 1.6 !important;
  text-align: left;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --flow-card-gap-final: 18px;
    --flow-card-min-height-final: 350px;
    --flow-card-padding-x-final: 10px;

    --flow-icon-box-size-final: 76px;
    --flow-contact-icon-size-final: 58px;
    --flow-estimate-icon-size-final: 57px;
    --flow-reserve-icon-size-final: 56px;
    --flow-pickup-icon-size-final: 60px;
    --flow-payment-icon-size-final: 57px;

    --flow-card-title-size-final: 13px;
    --flow-card-description-size-final: 10.5px;
  }

  .detailed-flow-item:not(:last-child)::after {
    right: calc(var(--flow-card-gap-final) * -0.72);

    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 13px;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --flow-section-padding-top-final: 48px;
    --flow-section-padding-bottom-final: 54px;
    --flow-title-size-final: 27px;
    --flow-lead-size-final: 14px;

    --flow-card-min-height-final: 0px;
    --flow-card-padding-x-final: 20px;
    --flow-card-padding-top-final: 16px;
    --flow-card-padding-bottom-final: 18px;

    --flow-icon-box-size-final: 78px;
    --flow-card-title-size-final: 18px;
    --flow-card-description-size-final: 14px;
  }

  .detailed-flow-list {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .detailed-flow-item {
    min-height: 0 !important;
  }

  .detailed-flow-item:not(:last-child)::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -16px;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid var(--navy);
    border-bottom: 0;

    transform: translateX(-50%);
  }

  .detailed-flow-item h3 {
    min-height: 0;
  }

  .detailed-flow-item p {
    text-align: center;
  }

  .detailed-flow-item p br {
    display: none;
  }
}

/* ==================================================
   ご利用の流れ 最終統一
   ・見出しを介護タクシー料金と同じ構成へ
   ・背景とカードの色差を明確化
   ・カードの立体感・動きを料金カードと統一
================================================== */

:root {
  /* 背景とカード */
  --flow-section-background-final: #dbe6ee;
  --flow-card-background-final: rgba(255, 255, 255, 0.98);

  /* カードの浮き量 */
  --flow-card-lift-final: 5px;
  --flow-card-hover-lift-final: 11px;
}


/* ==================================================
   セクション背景
================================================== */

.detailed-flow-section {
  background:
    var(--flow-section-background-final)
    !important;
}


/* ==================================================
   見出し
   介護タクシー料金と同じ間隔・サイズ
================================================== */

.detailed-flow-heading {
  margin-bottom: 34px !important;
  color: var(--navy);
  text-align: center;
}


.detailed-flow-heading .home-section-kicker {
  display: block !important;

  margin: 0 0 8px !important;

  color: var(--blue-gray) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;

  transform: none !important;
}


.detailed-flow-title {
  position: static !important;

  width: auto !important;
  max-width: none !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;

  color: var(--navy) !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.035em !important;
}


.detailed-flow-title::after {
  content: none !important;
  display: none !important;
}


.detailed-flow-title span {
  display: inline-block;
}


.detailed-flow-title-icon {
  width: 34px !important;
  height: auto !important;
  flex: 0 0 auto;

  object-fit: contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(12%)
    saturate(780%)
    hue-rotate(163deg)
    brightness(93%)
    contrast(87%)
    !important;
}


.detailed-flow-title-icon-right {
  transform: scaleX(-1);
}


.detailed-flow-heading .home-heading-rule {
  display: block !important;

  width: 76px !important;
  height: 3px !important;

  margin: 20px auto 0 !important;

  background: var(--blue-gray) !important;
  border-radius: 999px !important;
}


.detailed-flow-heading
.home-section-note.detailed-flow-lead {
  max-width: 820px;

  margin: 14px auto 0 !important;

  color: #29465a !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.75 !important;
  text-align: center !important;
}


/* ==================================================
   カード
   介護タクシー料金カードと同じ立体感
================================================== */

.detailed-flow-item {
  position: relative !important;
  z-index: 1 !important;

  background:
    var(--flow-card-background-final)
    !important;

  border:
    1px solid rgba(255, 255, 255, 0.95)
    !important;

  box-shadow:
    var(--price-card-shadow-final)
    !important;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease
    !important;

  will-change: transform;
}


/* カード上側の薄い光 */
.detailed-flow-item::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(111, 135, 154, 0.08);
}


/* カード内容を光レイヤーより前へ */
.detailed-flow-item > * {
  position: relative;
  z-index: 1;
}


/* 矢印は光レイヤーより前へ */
.detailed-flow-item:not(:last-child)::after {
  z-index: 4 !important;
}


/* PC：通常時から少し浮き、ホバー時にさらに上へ */
@media (min-width: 821px) {
  .detailed-flow-item {
    transform:
      translateY(
        calc(var(--flow-card-lift-final) * -1)
      )
      !important;
  }

  .detailed-flow-item:hover {
    z-index: 3 !important;

    transform:
      translateY(
        calc(var(--flow-card-hover-lift-final) * -1)
      )
      !important;

    box-shadow:
      var(--price-card-hover-shadow-final)
      !important;
  }
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  .detailed-flow-title-icon {
    width: 30px !important;
  }

  .detailed-flow-heading
  .home-section-note.detailed-flow-lead {
    font-size: 14px !important;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 820px) {
  .detailed-flow-item {
    transform: none !important;

    box-shadow:
      0 16px 32px rgba(13, 43, 69, 0.15),
      0 6px 14px rgba(13, 43, 69, 0.08)
      !important;
  }
}


@media (max-width: 700px) {
  .detailed-flow-heading {
    margin-bottom: 28px !important;
  }

  .detailed-flow-title {
    gap: 9px !important;
    font-size: 27px !important;
  }

  .detailed-flow-title-icon {
    width: 28px !important;
  }

  .detailed-flow-heading .home-heading-rule {
    margin-top: 16px !important;
  }

  .detailed-flow-heading
  .home-section-note.detailed-flow-lead {
    margin-top: 12px !important;
    font-size: 14px !important;
    text-align: center !important;
  }
}

/* ==================================================
   ご利用の流れ
   背景色とカード色を逆転
   ・セクション背景：白
   ・カード：ブルーグレー
   ※立体感・ホバー動作・見出しは維持
================================================== */

:root {
  --flow-section-background-final: #ffffff;
  --flow-card-background-final: #dbe6ee;
}

.detailed-flow-section {
  background:
    var(--flow-section-background-final)
    !important;
}

.detailed-flow-item {
  background:
    var(--flow-card-background-final)
    !important;

  border:
    1px solid rgba(111, 135, 154, 0.20)
    !important;
}

.detailed-flow-item::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(13, 43, 69, 0.10)
    !important;
}

/* ==================================================
   全セクション 日本語タイトル・両側PNG 統一
   PC：
   ・タイトル最大 42px
   ・両側PNG 34px
   ・タイトルとPNGの間隔 15px

   スマートフォン：
   ・タイトル 27px
   ・両側PNG 28px
   ・間隔 9px
================================================== */

:root {
  --common-section-title-size-final:
    clamp(28px, 4vw, 42px);

  --common-section-title-icon-size-final: 34px;
  --common-section-title-icon-gap-final: 15px;
}


/* ==================================================
   全タイトル共通
================================================== */

.reasons-heading-title,
.about-reference-title,
.equipment-heading-title,
.taxi-price-title,
.private-service-title,
.detailed-flow-title {
  position: relative !important;

  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;

  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;

  gap:
    var(--common-section-title-icon-gap-final)
    !important;

  color: var(--navy) !important;

  font-size:
    var(--common-section-title-size-final)
    !important;

  font-weight: 900 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.035em !important;
  text-align: center !important;
}


/* タイトル文字 */
.reasons-heading-title > span,
.about-reference-title > span,
.equipment-heading-title > span,
.taxi-price-title > span,
.private-service-title > span,
.detailed-flow-title > span {
  display: inline-block !important;
  min-width: 0;
}


/* ==================================================
   両側PNG共通
================================================== */

.reasons-heading-lamp,
.about-reference-lamp,
.equipment-heading-lamp,
.taxi-price-title-icon,
.private-service-heading-lamp,
.detailed-flow-title-icon {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width:
    var(--common-section-title-icon-size-final)
    !important;

  min-width:
    var(--common-section-title-icon-size-final)
    !important;

  max-width:
    var(--common-section-title-icon-size-final)
    !important;

  height: auto !important;
  max-height: none !important;

  margin: 0 !important;

  flex:
    0
    0
    var(--common-section-title-icon-size-final)
    !important;

  object-fit: contain !important;
}


/* 左側PNG */
.reasons-heading-title
.reasons-heading-lamp:first-child,
.about-reference-lamp-left,
.equipment-heading-title
.equipment-heading-lamp:first-child,
.taxi-price-title-icon-left,
.private-service-title
.private-service-heading-lamp:first-child,
.detailed-flow-title-icon-left {
  transform: none !important;
}


/* 右側PNG */
.reasons-heading-title
.reasons-heading-lamp:last-child,
.about-reference-lamp-right,
.equipment-heading-lamp-right,
.taxi-price-title-icon-right,
.private-service-heading-lamp-right,
.detailed-flow-title-icon-right {
  transform: scaleX(-1) !important;
}


/* ==================================================
   これまでの個別タイトルサイズ指定を確実に統一
================================================== */

.private-service-title {
  font-size:
    var(--common-section-title-size-final)
    !important;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --common-section-title-icon-size-final: 32px;
    --common-section-title-icon-gap-final: 12px;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --common-section-title-size-final: 27px;
    --common-section-title-icon-size-final: 28px;
    --common-section-title-icon-gap-final: 9px;
  }

  .reasons-heading-title,
  .about-reference-title,
  .equipment-heading-title,
  .taxi-price-title,
  .private-service-title,
  .detailed-flow-title {
    font-size:
      var(--common-section-title-size-final)
      !important;

    gap:
      var(--common-section-title-icon-gap-final)
      !important;
  }

  /* 長いタイトルだけ文字部分の折り返しを許可 */
  .reasons-heading-title > span,
  .about-reference-title > span {
    white-space: normal !important;
  }
}

/* ==================================================
   全セクション タイトル両側PNG 修正版
   前回34pxに縮めた指定を上書き

   PC：90px
   タブレット：76px
   スマホ：42px

   PNGはタイトル行の高さに影響しないようabsolute配置
================================================== */

:root {
  --common-section-title-icon-size-final: 90px;
  --common-section-title-icon-gap-final: 15px;
}


/* タイトル本体 */
.reasons-heading-title,
.about-reference-title,
.equipment-heading-title,
.taxi-price-title,
.private-service-title,
.detailed-flow-title {
  position: relative !important;

  width: max-content !important;
  max-width: 100% !important;

  min-height: 0 !important;
  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;
}


/* タイトル文字 */
.reasons-heading-title > span,
.about-reference-title > span,
.equipment-heading-title > span,
.taxi-price-title > span,
.private-service-title > span,
.detailed-flow-title > span {
  display: inline-block !important;
  position: relative;
  z-index: 2;
}


/* 両側PNG共通 */
.reasons-heading-lamp,
.about-reference-lamp,
.equipment-heading-lamp,
.taxi-price-title-icon,
.private-service-heading-lamp,
.detailed-flow-title-icon {
  position: absolute !important;
  top: 50% !important;

  width:
    var(--common-section-title-icon-size-final)
    !important;

  min-width:
    var(--common-section-title-icon-size-final)
    !important;

  max-width:
    var(--common-section-title-icon-size-final)
    !important;

  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  flex: none !important;

  opacity: 1 !important;
  object-fit: contain !important;
  pointer-events: none;
}


/* 左側PNG */
.reasons-heading-title
.reasons-heading-lamp:first-child,
.about-reference-lamp-left,
.equipment-heading-title
.equipment-heading-lamp:first-child,
.taxi-price-title-icon-left,
.private-service-title
.private-service-heading-lamp:first-child,
.detailed-flow-title-icon-left {
  left:
    calc(
      (
        var(--common-section-title-icon-size-final)
        +
        var(--common-section-title-icon-gap-final)
      )
      * -1
    )
    !important;

  right: auto !important;

  transform:
    translateY(-50%)
    !important;
}


/* 右側PNG */
.reasons-heading-title
.reasons-heading-lamp:last-child,
.about-reference-lamp-right,
.equipment-heading-lamp-right,
.taxi-price-title-icon-right,
.private-service-heading-lamp-right,
.detailed-flow-title-icon-right {
  right:
    calc(
      (
        var(--common-section-title-icon-size-final)
        +
        var(--common-section-title-icon-gap-final)
      )
      * -1
    )
    !important;

  left: auto !important;

  transform:
    translateY(-50%)
    scaleX(-1)
    !important;
}


/* 介護保険外サービスのランプを確実に表示 */
.private-service-title .private-service-heading-lamp {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
}


/* 介護保険外サービスの左右位置を共通位置に統一 */
.private-service-title
.private-service-heading-lamp:first-child {
  left:
    calc(
      (
        var(--common-section-title-icon-size-final)
        +
        var(--common-section-title-icon-gap-final)
      )
      * -1
    )
    !important;

  right: auto !important;

  transform:
    translateY(-50%)
    !important;
}


.private-service-title
.private-service-heading-lamp:last-child {
  right:
    calc(
      (
        var(--common-section-title-icon-size-final)
        +
        var(--common-section-title-icon-gap-final)
      )
      * -1
    )
    !important;

  left: auto !important;

  transform:
    translateY(-50%)
    scaleX(-1)
    !important;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --common-section-title-icon-size-final: 76px;
    --common-section-title-icon-gap-final: 12px;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --common-section-title-icon-size-final: 42px;
    --common-section-title-icon-gap-final: 7px;
  }

  .reasons-heading-title,
  .about-reference-title,
  .equipment-heading-title,
  .taxi-price-title,
  .private-service-title,
  .detailed-flow-title {
    width:
      calc(
        100%
        -
        (
          (
            var(--common-section-title-icon-size-final)
            +
            var(--common-section-title-icon-gap-final)
          )
          * 2
        )
      )
      !important;

    max-width:
      calc(
        100%
        -
        (
          (
            var(--common-section-title-icon-size-final)
            +
            var(--common-section-title-icon-gap-final)
          )
          * 2
        )
      )
      !important;
  }

  .reasons-heading-title > span,
  .about-reference-title > span,
  .equipment-heading-title > span,
  .taxi-price-title > span,
  .private-service-title > span,
  .detailed-flow-title > span {
    white-space: normal !important;
    text-align: center !important;
  }
}

/* ==================================================
   Aladdinの機材 見出し重なり修正
   古い位置移動指定を解除し、
   介護タクシー料金と同じ間隔へ統一

   英語 → タイトル：8px
   タイトル → 横線：20px
   見出し全体 → 内容：34px
================================================== */

.equipment-section .equipment-heading {
  margin-bottom: 34px !important;

  transform: none !important;
}


/* 英語見出し */
.equipment-section
.equipment-heading
.home-section-kicker {
  margin: 0 0 8px !important;

  color: #6f879a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;

  transform: none !important;
}


/* 日本語タイトル */
.equipment-section
.equipment-heading-title {
  margin: 0 auto !important;

  color: #0d2b45 !important;
  font-size:
    var(--common-section-title-size-final)
    !important;

  font-weight: 900 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.035em !important;
  text-align: center !important;

  transform: none !important;
}


/* 左右ランプ
   共通サイズ・共通位置を維持 */
.equipment-section
.equipment-heading-title
.equipment-heading-lamp:first-child {
  width:
    var(--common-section-title-icon-size-final)
    !important;

  transform:
    translateY(-50%)
    !important;
}


.equipment-section
.equipment-heading-title
.equipment-heading-lamp:last-child {
  width:
    var(--common-section-title-icon-size-final)
    !important;

  transform:
    translateY(-50%)
    scaleX(-1)
    !important;
}


/* タイトル下の横線 */
.equipment-section
.equipment-heading
.home-heading-rule {
  display: block !important;

  width: 76px !important;
  height: 3px !important;

  margin: 20px auto 0 !important;

  background: #6f879a !important;
  border-radius: 999px !important;

  transform: none !important;
}


/* スマートフォンも同じ順序・間隔 */
@media (max-width: 700px) {
  .equipment-section
  .equipment-heading {
    margin-bottom: 28px !important;
  }

  .equipment-section
  .equipment-heading
  .home-section-kicker {
    margin-bottom: 6px !important;
  }

  .equipment-section
  .equipment-heading
  .home-heading-rule {
    margin-top: 16px !important;
  }
}

/* ==================================================
   カーペットのサイズ・高さ修正
   ランプ：90pxを維持
   カーペット：少し小さい76px
   透明余白を考慮して見た目を4px上へ
================================================== */

:root {
  --common-carpet-title-size-final: 76px;
  --common-carpet-title-gap-final: 13px;
  --common-carpet-title-y-final: -4px;
}


/* カーペットを使用している見出し */
.about-reference-title,
.taxi-price-title,
.detailed-flow-title {
  position: relative !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
}


/* 左右カーペット共通 */
.about-reference-lamp,
.taxi-price-title-icon,
.detailed-flow-title-icon {
  position: absolute !important;
  top: 50% !important;

  width:
    var(--common-carpet-title-size-final)
    !important;

  min-width:
    var(--common-carpet-title-size-final)
    !important;

  max-width:
    var(--common-carpet-title-size-final)
    !important;

  height: auto !important;
  margin: 0 !important;
  flex: none !important;

  opacity: 1 !important;
  object-fit: contain !important;
  pointer-events: none;
}


/* 左カーペット */
.about-reference-lamp-left,
.taxi-price-title-icon-left,
.detailed-flow-title-icon-left {
  left:
    calc(
      (
        var(--common-carpet-title-size-final)
        +
        var(--common-carpet-title-gap-final)
      )
      * -1
    )
    !important;

  right: auto !important;

  transform:
    translateY(
      calc(
        -50%
        +
        var(--common-carpet-title-y-final)
      )
    )
    !important;
}


/* 右カーペット */
.about-reference-lamp-right,
.taxi-price-title-icon-right,
.detailed-flow-title-icon-right {
  right:
    calc(
      (
        var(--common-carpet-title-size-final)
        +
        var(--common-carpet-title-gap-final)
      )
      * -1
    )
    !important;

  left: auto !important;

  transform:
    translateY(
      calc(
        -50%
        +
        var(--common-carpet-title-y-final)
      )
    )
    scaleX(-1)
    !important;
}


/* ==================================================
   選ばれる3つの理由 見出し重なり修正
   介護タクシー料金と同じ間隔へ統一
================================================== */

.reasons-section .home-section-heading {
  margin-bottom: 34px !important;
  transform: none !important;
}


/* 英語 */
.reasons-section
.home-section-heading
.home-section-kicker {
  display: block !important;

  margin: 0 0 8px !important;

  color: #6f879a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;

  transform: none !important;
}


/* 日本語タイトル */
.reasons-section
.reasons-heading-title {
  position: relative !important;

  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;

  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #0d2b45 !important;

  font-size:
    var(--common-section-title-size-final)
    !important;

  font-weight: 900 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.035em !important;
  text-align: center !important;

  transform: none !important;
}


/* 左右ランプは90pxを維持 */
.reasons-section
.reasons-heading-title
.reasons-heading-lamp {
  position: absolute !important;
  top: 50% !important;

  width:
    var(--common-section-title-icon-size-final)
    !important;

  min-width:
    var(--common-section-title-icon-size-final)
    !important;

  max-width:
    var(--common-section-title-icon-size-final)
    !important;

  height: auto !important;
  margin: 0 !important;
  flex: none !important;

  opacity: 1 !important;
  object-fit: contain !important;
}


/* 左ランプ */
.reasons-section
.reasons-heading-title
.reasons-heading-lamp:first-child {
  left:
    calc(
      (
        var(--common-section-title-icon-size-final)
        +
        var(--common-section-title-icon-gap-final)
      )
      * -1
    )
    !important;

  right: auto !important;

  transform:
    translateY(-50%)
    !important;
}


/* 右ランプ */
.reasons-section
.reasons-heading-title
.reasons-heading-lamp:last-child {
  right:
    calc(
      (
        var(--common-section-title-icon-size-final)
        +
        var(--common-section-title-icon-gap-final)
      )
      * -1
    )
    !important;

  left: auto !important;

  transform:
    translateY(-50%)
    scaleX(-1)
    !important;
}


/* タイトル下の横線 */
.reasons-section
.home-section-heading
.home-heading-rule {
  display: block !important;

  width: 76px !important;
  height: 3px !important;

  margin: 20px auto 0 !important;

  background: #6f879a !important;
  border-radius: 999px !important;

  transform: none !important;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --common-carpet-title-size-final: 64px;
    --common-carpet-title-gap-final: 11px;
    --common-carpet-title-y-final: -3px;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --common-carpet-title-size-final: 38px;
    --common-carpet-title-gap-final: 6px;
    --common-carpet-title-y-final: -2px;
  }

  .about-reference-title,
  .taxi-price-title,
  .detailed-flow-title {
    width:
      calc(
        100%
        -
        (
          (
            var(--common-carpet-title-size-final)
            +
            var(--common-carpet-title-gap-final)
          )
          * 2
        )
      )
      !important;

    max-width:
      calc(
        100%
        -
        (
          (
            var(--common-carpet-title-size-final)
            +
            var(--common-carpet-title-gap-final)
          )
          * 2
        )
      )
      !important;
  }

  .reasons-section .home-section-heading {
    margin-bottom: 28px !important;
  }

  .reasons-section
  .home-section-heading
  .home-section-kicker {
    margin-bottom: 6px !important;
  }

  .reasons-section
  .home-section-heading
  .home-heading-rule {
    margin-top: 16px !important;
  }

  .reasons-section
  .reasons-heading-title {
    width:
      calc(
        100%
        -
        (
          (
            var(--common-section-title-icon-size-final)
            +
            var(--common-section-title-icon-gap-final)
          )
          * 2
        )
      )
      !important;

    max-width:
      calc(
        100%
        -
        (
          (
            var(--common-section-title-icon-size-final)
            +
            var(--common-section-title-icon-gap-final)
          )
          * 2
        )
      )
      !important;
  }

  .reasons-section
  .reasons-heading-title > span {
    white-space: normal !important;
    text-align: center !important;
  }
}

/* ==================================================
   アラジンについて 上余白
   ＋選ばれる3つの理由 横線 最終修正

   原因：
   ・アラジンについてだけ古い上余白92pxが残っていた
   ・3つの理由の横線に古い個別指定が重なっていた
================================================== */


/* ==================================================
   アラジンについて
   上余白を他セクションと同じ基準へ
================================================== */

:root {
  --about-reference-padding-top: 50px;
}


.about-reference-section {
  padding-top: 50px !important;
}


/* ==================================================
   選ばれる3つの理由
   横線を確実に1本表示
================================================== */

/* HTML内にある古い線は一度非表示 */
.reasons-section
.home-section-heading
> .home-heading-rule {
  display: none !important;
}


/* 見出しの最後に新しい横線を表示 */
.reasons-section
.home-section-heading::after {
  content: "";

  display: block !important;

  width: 76px !important;
  height: 3px !important;

  margin: 20px auto 0 !important;

  visibility: visible !important;
  opacity: 1 !important;

  background: #6f879a !important;
  border: 0 !important;
  border-radius: 999px !important;

  transform: none !important;
}


/* 見出し全体の下余白 */
.reasons-section
.home-section-heading {
  margin-bottom: 34px !important;
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  .about-reference-section {
    padding-top: 48px !important;
  }

  .reasons-section
  .home-section-heading::after {
    margin-top: 16px !important;
  }

  .reasons-section
  .home-section-heading {
    margin-bottom: 28px !important;
  }
}

/* ==================================================
   セクション上余白＆カーペットサイズ 微調整
   ・カーペットを少しだけ小さく
   ・各セクションの一番上の余白を統一
================================================== */

:root {
  /* カーペットを少しだけ小さく */
  --common-carpet-title-size-final: 70px;
  --common-carpet-title-gap-final: 12px;
  --common-carpet-title-y-final: -4px;

  /* 全セクション共通の上余白 */
  --all-section-padding-top-unified: 50px;
  --all-section-padding-top-unified-sp: 48px;
}

/* PC / タブレット：一番上の余白を統一 */
.home-detail-section,
.about-reference-section,
.reasons-section,
.equipment-section,
.taxi-price-section,
.private-service-section,
.detailed-flow-section {
  padding-top: var(--all-section-padding-top-unified) !important;
}

/* スマートフォン：一番上の余白を統一 */
@media (max-width: 700px) {
  .home-detail-section,
  .about-reference-section,
  .reasons-section,
  .equipment-section,
  .taxi-price-section,
  .private-service-section,
  .detailed-flow-section {
    padding-top: var(--all-section-padding-top-unified-sp) !important;
  }

  :root {
    --common-carpet-title-size-final: 36px;
    --common-carpet-title-gap-final: 6px;
    --common-carpet-title-y-final: -2px;
  }
}

/* タブレットだけ中間サイズ */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --common-carpet-title-size-final: 60px;
    --common-carpet-title-gap-final: 10px;
    --common-carpet-title-y-final: -3px;
  }
}

/* ==================================================
   選ばれる3つの理由
   タイトル下の横線を元のHTML要素で確実に表示
================================================== */

/* 疑似要素の横線は使用しない */
.reasons-section
.home-section-heading::after {
  content: none !important;
  display: none !important;
}


/* HTMLにある横線を表示 */
.reasons-section
.home-section-heading
> .home-heading-rule {
  display: block !important;

  width: 76px !important;
  height: 3px !important;

  margin: 20px auto 0 !important;

  visibility: visible !important;
  opacity: 1 !important;

  background: #6f879a !important;
  border: 0 !important;
  border-radius: 999px !important;

  transform: none !important;
}


/* スマートフォン */
@media (max-width: 700px) {
  .reasons-section
  .home-section-heading
  > .home-heading-rule {
    margin-top: 16px !important;
  }
}



/* ==================================================
   ご利用の流れ
   矢印をカード間に固定 ＋ 各カードの調整用変数
================================================== */

:root {
  /* 矢印 */
  --flow-arrow-column-width-final: 34px;
  --flow-arrow-size-final: 18px;
  --flow-arrow-offset-x-final: 0px;
  --flow-arrow-offset-y-final: 0px;

  /* 各カード 調整用（必要に応じて数値変更） */
  --flow-contact-icon-size-adjust: var(--flow-contact-icon-size-final);
  --flow-contact-icon-x: 0px;
  --flow-contact-icon-y: 0px;
  --flow-contact-title-size-adjust: var(--flow-card-title-size-final);
  --flow-contact-title-x: 0px;
  --flow-contact-title-y: 0px;
  --flow-contact-text-size-adjust: var(--flow-card-description-size-final);
  --flow-contact-text-x: 0px;
  --flow-contact-text-y: 0px;

  --flow-estimate-icon-size-adjust: var(--flow-estimate-icon-size-final);
  --flow-estimate-icon-x: 0px;
  --flow-estimate-icon-y: 0px;
  --flow-estimate-title-size-adjust: var(--flow-card-title-size-final);
  --flow-estimate-title-x: 0px;
  --flow-estimate-title-y: 0px;
  --flow-estimate-text-size-adjust: var(--flow-card-description-size-final);
  --flow-estimate-text-x: 0px;
  --flow-estimate-text-y: 0px;

  --flow-reserve-icon-size-adjust: var(--flow-reserve-icon-size-final);
  --flow-reserve-icon-x: 0px;
  --flow-reserve-icon-y: 0px;
  --flow-reserve-title-size-adjust: var(--flow-card-title-size-final);
  --flow-reserve-title-x: 0px;
  --flow-reserve-title-y: 0px;
  --flow-reserve-text-size-adjust: var(--flow-card-description-size-final);
  --flow-reserve-text-x: 0px;
  --flow-reserve-text-y: 0px;

  --flow-pickup-icon-size-adjust: var(--flow-pickup-icon-size-final);
  --flow-pickup-icon-x: 0px;
  --flow-pickup-icon-y: 0px;
  --flow-pickup-title-size-adjust: var(--flow-card-title-size-final);
  --flow-pickup-title-x: 0px;
  --flow-pickup-title-y: 0px;
  --flow-pickup-text-size-adjust: var(--flow-card-description-size-final);
  --flow-pickup-text-x: 0px;
  --flow-pickup-text-y: 0px;

  --flow-payment-icon-size-adjust: var(--flow-payment-icon-size-final);
  --flow-payment-icon-x: 0px;
  --flow-payment-icon-y: 0px;
  --flow-payment-title-size-adjust: var(--flow-card-title-size-final);
  --flow-payment-title-x: 0px;
  --flow-payment-title-y: 0px;
  --flow-payment-text-size-adjust: var(--flow-card-description-size-final);
  --flow-payment-text-x: 0px;
  --flow-payment-text-y: 0px;
}

/* 5枚カード + 4つの矢印列 */
.detailed-flow-list {
  grid-template-columns:
    minmax(0, 1fr) var(--flow-arrow-column-width-final)
    minmax(0, 1fr) var(--flow-arrow-column-width-final)
    minmax(0, 1fr) var(--flow-arrow-column-width-final)
    minmax(0, 1fr) var(--flow-arrow-column-width-final)
    minmax(0, 1fr)
    !important;

  column-gap: 0 !important;
  row-gap: var(--flow-card-gap-final) !important;
  align-items: stretch !important;
}

/* 古い疑似要素矢印は無効化 */
.detailed-flow-item:not(:last-child)::after {
  content: none !important;
  display: none !important;
}

/* 新しい矢印 */
.detailed-flow-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.detailed-flow-arrow span {
  display: block;
  width: 0;
  height: 0;
  border-top: calc(var(--flow-arrow-size-final) * 0.72) solid transparent;
  border-bottom: calc(var(--flow-arrow-size-final) * 0.72) solid transparent;
  border-left: var(--flow-arrow-size-final) solid var(--navy);
  transform: translate(var(--flow-arrow-offset-x-final), var(--flow-arrow-offset-y-final));
}

/* 各カード内の調整をしやすくする */
.detailed-flow-item .flow-step-icon,
.detailed-flow-item h3,
.detailed-flow-item p {
  position: relative;
}

/* お問い合わせ */
.detailed-flow-item-contact .flow-step-pictogram { width: var(--flow-contact-icon-size-adjust) !important; }
.detailed-flow-item-contact .flow-step-icon { transform: translate(var(--flow-contact-icon-x), var(--flow-contact-icon-y)); }
.detailed-flow-item-contact h3 { font-size: var(--flow-contact-title-size-adjust) !important; transform: translate(var(--flow-contact-title-x), var(--flow-contact-title-y)); }
.detailed-flow-item-contact p { font-size: var(--flow-contact-text-size-adjust) !important; transform: translate(var(--flow-contact-text-x), var(--flow-contact-text-y)); }

/* 内容確認・お見積り */
.detailed-flow-item-estimate .flow-step-pictogram { width: var(--flow-estimate-icon-size-adjust) !important; }
.detailed-flow-item-estimate .flow-step-icon { transform: translate(var(--flow-estimate-icon-x), var(--flow-estimate-icon-y)); }
.detailed-flow-item-estimate h3 { font-size: var(--flow-estimate-title-size-adjust) !important; transform: translate(var(--flow-estimate-title-x), var(--flow-estimate-title-y)); }
.detailed-flow-item-estimate p { font-size: var(--flow-estimate-text-size-adjust) !important; transform: translate(var(--flow-estimate-text-x), var(--flow-estimate-text-y)); }

/* ご予約 */
.detailed-flow-item-reserve .flow-step-pictogram { width: var(--flow-reserve-icon-size-adjust) !important; }
.detailed-flow-item-reserve .flow-step-icon { transform: translate(var(--flow-reserve-icon-x), var(--flow-reserve-icon-y)); }
.detailed-flow-item-reserve h3 { font-size: var(--flow-reserve-title-size-adjust) !important; transform: translate(var(--flow-reserve-title-x), var(--flow-reserve-title-y)); }
.detailed-flow-item-reserve p { font-size: var(--flow-reserve-text-size-adjust) !important; transform: translate(var(--flow-reserve-text-x), var(--flow-reserve-text-y)); }

/* 当日お迎え */
.detailed-flow-item-pickup .flow-step-pictogram { width: var(--flow-pickup-icon-size-adjust) !important; }
.detailed-flow-item-pickup .flow-step-icon { transform: translate(var(--flow-pickup-icon-x), var(--flow-pickup-icon-y)); }
.detailed-flow-item-pickup h3 { font-size: var(--flow-pickup-title-size-adjust) !important; transform: translate(var(--flow-pickup-title-x), var(--flow-pickup-title-y)); }
.detailed-flow-item-pickup p { font-size: var(--flow-pickup-text-size-adjust) !important; transform: translate(var(--flow-pickup-text-x), var(--flow-pickup-text-y)); }

/* お支払い */
.detailed-flow-item-payment .flow-step-pictogram { width: var(--flow-payment-icon-size-adjust) !important; }
.detailed-flow-item-payment .flow-step-icon { transform: translate(var(--flow-payment-icon-x), var(--flow-payment-icon-y)); }
.detailed-flow-item-payment h3 { font-size: var(--flow-payment-title-size-adjust) !important; transform: translate(var(--flow-payment-title-x), var(--flow-payment-title-y)); }
.detailed-flow-item-payment p { font-size: var(--flow-payment-text-size-adjust) !important; transform: translate(var(--flow-payment-text-x), var(--flow-payment-text-y)); }

/* タブレット */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --flow-arrow-column-width-final: 24px;
    --flow-arrow-size-final: 13px;
  }
}

/* スマホでは縦並び、矢印は非表示 */
@media (max-width: 700px) {
  .detailed-flow-list {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .detailed-flow-arrow {
    display: none !important;
  }
}

/* ==================================================
   選ばれる3つの理由
   タイトル下の横線がカードに隠れる問題を修正
================================================== */

/* 見出しと線をカードより前面へ */
.reasons-section .home-section-heading {
  position: relative !important;
  z-index: 5 !important;
  margin-bottom: 34px !important;
}

/* 横線を確実に表示 */
.reasons-section
.home-section-heading
> .home-heading-rule {
  position: relative !important;
  z-index: 6 !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 76px !important;
  height: 3px !important;
  margin: 20px auto 0 !important;

  background: #6f879a !important;
  border: 0 !important;
  border-radius: 999px !important;
  transform: none !important;
}

/* カード全体の古い上移動 -50px を解除 */
.reasons-section .reason-grid {
  position: relative !important;
  z-index: 1 !important;
  transform: none !important;
}

@media (max-width: 700px) {
  .reasons-section
  .home-section-heading
  > .home-heading-rule {
    margin-top: 16px !important;
  }
}

/* ==================================================
   ご利用の流れ 最終調整パネル

   数字を直接変更してください。

   size：サイズ
   x：プラスで右／マイナスで左
   y：プラスで下／マイナスで上
================================================== */

:root {
  /* 1：お問い合わせ */
  --flow-contact-pictogram-size: 150px;
  --flow-contact-pictogram-x: -32px;
  --flow-contact-pictogram-y: -25px;
  --flow-contact-title-size: 18px;
  --flow-contact-title-x-control: 0px;
  --flow-contact-title-y-control: 0px;
  --flow-contact-text-size: 15.5px;
  --flow-contact-text-x-control: 0px;
  --flow-contact-text-y-control: 0px;

  /* 2：内容確認・お見積り */
  --flow-estimate-pictogram-size: 150px;
  --flow-estimate-pictogram-x: -30px;
  --flow-estimate-pictogram-y: -25px;
  --flow-estimate-title-size: 18px;
  --flow-estimate-title-x-control: 0px;
  --flow-estimate-title-y-control: 0px;
  --flow-estimate-text-size: 15.5px;
  --flow-estimate-text-x-control: 0px;
  --flow-estimate-text-y-control: 0px;

  /* 3：ご予約 */
  --flow-reserve-pictogram-size: 150px;
  --flow-reserve-pictogram-x: -30px;
  --flow-reserve-pictogram-y: -25px;
  --flow-reserve-title-size: 18px;
  --flow-reserve-title-x-control: 0px;
  --flow-reserve-title-y-control: 0px;
  --flow-reserve-text-size: 15.5px;
  --flow-reserve-text-x-control: 0px;
  --flow-reserve-text-y-control: 0px;

  /* 4：当日お迎え */
  --flow-pickup-pictogram-size: 90px;
  --flow-pickup-pictogram-x: 0px;
  --flow-pickup-pictogram-y: 0px;
  --flow-pickup-title-size: 18px;
  --flow-pickup-title-x-control: 0px;
  --flow-pickup-title-y-control: 0px;
  --flow-pickup-text-size: 15.5px;
  --flow-pickup-text-x-control: 0px;
  --flow-pickup-text-y-control: 0px;

  /* 5：お支払い */
  --flow-payment-pictogram-size: 150px;
  --flow-payment-pictogram-x: -30px;
  --flow-payment-pictogram-y: -22px;
  --flow-payment-title-size: 18px;
  --flow-payment-title-x-control: 0px;
  --flow-payment-title-y-control: 0px;
  --flow-payment-text-size: 15.5px;
  --flow-payment-text-x-control: 0px;
  --flow-payment-text-y-control: 0px;
}

/* 1：お問い合わせ */
body .detailed-flow-item-contact .flow-step-pictogram-contact {
  width: var(--flow-contact-pictogram-size) !important;
  max-width: none !important;
  transform: translate(
    var(--flow-contact-pictogram-x),
    var(--flow-contact-pictogram-y)
  ) !important;
}

body .detailed-flow-item-contact h3 {
  font-size: var(--flow-contact-title-size) !important;
  transform: translate(
    var(--flow-contact-title-x-control),
    var(--flow-contact-title-y-control)
  ) !important;
}

body .detailed-flow-item-contact p {
  font-size: var(--flow-contact-text-size) !important;
  transform: translate(
    var(--flow-contact-text-x-control),
    var(--flow-contact-text-y-control)
  ) !important;
}

/* 2：内容確認・お見積り */
body .detailed-flow-item-estimate .flow-step-pictogram-estimate {
  width: var(--flow-estimate-pictogram-size) !important;
  max-width: none !important;
  transform: translate(
    var(--flow-estimate-pictogram-x),
    var(--flow-estimate-pictogram-y)
  ) !important;
}

body .detailed-flow-item-estimate h3 {
  font-size: var(--flow-estimate-title-size) !important;
  transform: translate(
    var(--flow-estimate-title-x-control),
    var(--flow-estimate-title-y-control)
  ) !important;
}

body .detailed-flow-item-estimate p {
  font-size: var(--flow-estimate-text-size) !important;
  transform: translate(
    var(--flow-estimate-text-x-control),
    var(--flow-estimate-text-y-control)
  ) !important;
}

/* 3：ご予約 */
body .detailed-flow-item-reserve .flow-step-pictogram-reserve {
  width: var(--flow-reserve-pictogram-size) !important;
  max-width: none !important;
  transform: translate(
    var(--flow-reserve-pictogram-x),
    var(--flow-reserve-pictogram-y)
  ) !important;
}

body .detailed-flow-item-reserve h3 {
  font-size: var(--flow-reserve-title-size) !important;
  transform: translate(
    var(--flow-reserve-title-x-control),
    var(--flow-reserve-title-y-control)
  ) !important;
}

body .detailed-flow-item-reserve p {
  font-size: var(--flow-reserve-text-size) !important;
  transform: translate(
    var(--flow-reserve-text-x-control),
    var(--flow-reserve-text-y-control)
  ) !important;
}

/* 4：当日お迎え */
body .detailed-flow-item-pickup .flow-step-pictogram-pickup {
  width: var(--flow-pickup-pictogram-size) !important;
  max-width: none !important;
  transform: translate(
    var(--flow-pickup-pictogram-x),
    var(--flow-pickup-pictogram-y)
  ) !important;
}

body .detailed-flow-item-pickup h3 {
  font-size: var(--flow-pickup-title-size) !important;
  transform: translate(
    var(--flow-pickup-title-x-control),
    var(--flow-pickup-title-y-control)
  ) !important;
}

body .detailed-flow-item-pickup p {
  font-size: var(--flow-pickup-text-size) !important;
  transform: translate(
    var(--flow-pickup-text-x-control),
    var(--flow-pickup-text-y-control)
  ) !important;
}

/* 5：お支払い */
body .detailed-flow-item-payment .flow-step-pictogram-payment {
  width: var(--flow-payment-pictogram-size) !important;
  max-width: none !important;
  transform: translate(
    var(--flow-payment-pictogram-x),
    var(--flow-payment-pictogram-y)
  ) !important;
}

body .detailed-flow-item-payment h3 {
  font-size: var(--flow-payment-title-size) !important;
  transform: translate(
    var(--flow-payment-title-x-control),
    var(--flow-payment-title-y-control)
  ) !important;
}

body .detailed-flow-item-payment p {
  font-size: var(--flow-payment-text-size) !important;
  transform: translate(
    var(--flow-payment-text-x-control),
    var(--flow-payment-text-y-control)
  ) !important;
}

/* タブレットの初期サイズ */
@media (max-width: 1100px) and (min-width: 701px) {
  :root {
    --flow-contact-pictogram-size: 58px;
    --flow-estimate-pictogram-size: 57px;
    --flow-reserve-pictogram-size: 56px;
    --flow-pickup-pictogram-size: 60px;
    --flow-payment-pictogram-size: 57px;

    --flow-contact-title-size: 13px;
    --flow-estimate-title-size: 13px;
    --flow-reserve-title-size: 13px;
    --flow-pickup-title-size: 13px;
    --flow-payment-title-size: 13px;

    --flow-contact-text-size: 10.5px;
    --flow-estimate-text-size: 10.5px;
    --flow-reserve-text-size: 10.5px;
    --flow-pickup-text-size: 10.5px;
    --flow-payment-text-size: 10.5px;
  }
}

/* スマートフォンの初期サイズ */
@media (max-width: 700px) {
  :root {
    --flow-contact-pictogram-size: 58px;
    --flow-estimate-pictogram-size: 57px;
    --flow-reserve-pictogram-size: 56px;
    --flow-pickup-pictogram-size: 60px;
    --flow-payment-pictogram-size: 57px;

    --flow-contact-title-size: 18px;
    --flow-estimate-title-size: 18px;
    --flow-reserve-title-size: 18px;
    --flow-pickup-title-size: 18px;
    --flow-payment-title-size: 18px;

    --flow-contact-text-size: 14px;
    --flow-estimate-text-size: 14px;
    --flow-reserve-text-size: 14px;
    --flow-pickup-text-size: 14px;
    --flow-payment-text-size: 14px;
  }
}

/* ==================================================
   お問い合わせセクション 完成版
   見本画像に合わせた2×2カード＋ジーニー
================================================== */

:root {
  /* セクション */
  --contact-section-padding-top-final: 48px;
  --contact-section-padding-bottom-final: 46px;
  --contact-section-background-final: #dfe8f0;
  --contact-content-width-final: 1120px;

  /* 題名 */
  --contact-title-icon-size-final: 70px;
  --contact-title-icon-x-final: 0px;
  --contact-title-icon-y-final: 0px;
  --contact-title-size-final: 25px;
  --contact-title-gap-final: 14px;
  --contact-heading-bottom-gap-final: 26px;

  /* カード */
  --contact-card-gap-x-final: 16px;
  --contact-card-gap-y-final: 14px;
  --contact-card-min-height-final: 146px;
  --contact-card-radius-final: 13px;
  --contact-card-padding-x-final: 15px;
  --contact-card-padding-y-final: 13px;

  /* カード内アイコン */
  --contact-phone-icon-size-final: 66px;
  --contact-phone-icon-x-final: 0px;
  --contact-phone-icon-y-final: 0px;

  --contact-line-icon-size-final: 66px;
  --contact-line-icon-x-final: 0px;
  --contact-line-icon-y-final: 0px;

  --contact-form-icon-size-final: 66px;
  --contact-form-icon-x-final: 0px;
  --contact-form-icon-y-final: 0px;

  --contact-simulation-icon-size-final: 66px;
  --contact-simulation-icon-x-final: 0px;
  --contact-simulation-icon-y-final: 0px;

  /* 右のジーニー */
  --contact-genie-width-final: 315px;
  --contact-genie-x-final: 0px;
  --contact-genie-y-final: 8px;
  --contact-genie-opacity-final: 0.30;
}


/* ==================================================
   セクション
================================================== */

body .home-contact-section {
  padding:
    var(--contact-section-padding-top-final)
    0
    var(--contact-section-padding-bottom-final)
    !important;

  color: var(--navy) !important;
  background: var(--contact-section-background-final) !important;
  overflow: hidden;
}

body .home-contact-inner {
  width: min(var(--contact-content-width-final), 92%) !important;
  margin: 0 auto !important;
}

body .home-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(250px, 1fr);
  align-items: center;
  gap: 42px;
}

body .home-contact-main {
  min-width: 0;
}


/* ==================================================
   題名
================================================== */

body .home-contact-copy {
  margin: 0 0 var(--contact-heading-bottom-gap-final) !important;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--contact-title-gap-final);

  text-align: left !important;
}

body .home-contact-title-icon {
  width: var(--contact-title-icon-size-final) !important;
  min-width: var(--contact-title-icon-size-final) !important;
  height: auto !important;
  object-fit: contain;

  transform:
    translate(
      var(--contact-title-icon-x-final),
      var(--contact-title-icon-y-final)
    );
}

body .home-contact-copy h2 {
  margin: 0 !important;

  color: var(--navy) !important;
  font-size: var(--contact-title-size-final) !important;
  font-weight: 900 !important;
  line-height: 1.42 !important;
  letter-spacing: 0.025em !important;
  text-align: left !important;
}

body .home-contact-copy h2 span {
  display: block;
}


/* ==================================================
   4カード
================================================== */

body .home-contact-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap:
    var(--contact-card-gap-y-final)
    var(--contact-card-gap-x-final)
    !important;
}

body .home-contact-card {
  position: relative;

  min-width: 0;
  min-height: var(--contact-card-min-height-final) !important;
  padding:
    var(--contact-card-padding-y-final)
    var(--contact-card-padding-x-final)
    !important;

  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  color: var(--navy) !important;
  background: rgba(255, 255, 255, 0.98) !important;

  border: 2px solid var(--contact-card-color) !important;
  border-radius: var(--contact-card-radius-final) !important;

  box-shadow:
    0 8px 0 rgba(13, 43, 69, 0.08),
    0 13px 24px rgba(13, 43, 69, 0.16)
    !important;

  text-decoration: none !important;
  text-align: left !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease
    !important;
}

body .home-contact-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 11px 0 rgba(13, 43, 69, 0.07),
    0 19px 31px rgba(13, 43, 69, 0.20)
    !important;

  filter: brightness(1.02);
}

body .contact-card-phone {
  --contact-card-color: #173b68;
}

body .contact-card-line {
  --contact-card-color: #44ba43;
}

body .contact-card-form {
  --contact-card-color: #7eacc6;
}

body .contact-card-simulation {
  --contact-card-color: #3215bd;
}

body .contact-card-icon-box {
  width: 70px;
  height: 78px;

  display: grid;
  place-items: center;
}

body .contact-card-icon {
  display: block;
  height: auto !important;
  max-width: none !important;
  object-fit: contain;
}

body .contact-card-icon-phone {
  width: var(--contact-phone-icon-size-final) !important;
  transform:
    translate(
      var(--contact-phone-icon-x-final),
      var(--contact-phone-icon-y-final)
    );
}

body .contact-card-icon-line {
  width: var(--contact-line-icon-size-final) !important;
  transform:
    translate(
      var(--contact-line-icon-x-final),
      var(--contact-line-icon-y-final)
    );
}

body .contact-card-icon-form {
  width: var(--contact-form-icon-size-final) !important;
  transform:
    translate(
      var(--contact-form-icon-x-final),
      var(--contact-form-icon-y-final)
    );
}

body .contact-card-icon-simulation {
  width: var(--contact-simulation-icon-size-final) !important;
  transform:
    translate(
      var(--contact-simulation-icon-x-final),
      var(--contact-simulation-icon-y-final)
    );
}

body .contact-card-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

body .contact-card-content h3 {
  margin: 0 !important;

  color: var(--contact-card-color) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

body .contact-phone-number {
  margin: 2px 0 4px !important;

  color: #515a64 !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.015em !important;
  white-space: nowrap;
}

body .contact-card-description {
  margin: 3px 0 5px !important;

  color: #334451 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

body .contact-card-action {
  width: 100%;
  min-height: 25px;
  padding: 3px 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: #ffffff !important;
  background: var(--contact-card-color) !important;
  border-radius: 4px;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

body .contact-card-action b {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

body .contact-card-action-phone {
  max-width: 175px;
  margin: 0 auto;
}


/* ==================================================
   LINEアイコン画像
   images/line-icn.png
================================================== */

body .contact-line-icon {
  display: none !important;
}


/* ==================================================
   右側ジーニー
================================================== */

body .home-contact-genie-box {
  min-height: 285px;

  display: flex;
  align-items: center;
  justify-content: center;
}

body .home-contact-genie {
  width: var(--contact-genie-width-final) !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;

  opacity: var(--contact-genie-opacity-final);

  filter:
    grayscale(1)
    brightness(0.68)
    contrast(0.82)
    sepia(0.12)
    hue-rotate(160deg);

  transform:
    translate(
      var(--contact-genie-x-final),
      var(--contact-genie-y-final)
    );
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1050px) and (min-width: 701px) {
  :root {
    --contact-title-icon-size-final: 62px;
    --contact-title-size-final: 21px;
    --contact-card-min-height-final: 138px;
    --contact-phone-icon-size-final: 58px;
    --contact-line-icon-size-final: 58px;
    --contact-form-icon-size-final: 58px;
    --contact-simulation-icon-size-final: 58px;
    --contact-genie-width-final: 250px;
  }

  body .home-contact-layout {
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 24px;
  }

  body .home-contact-card {
    grid-template-columns: 62px minmax(0, 1fr);
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body .contact-card-icon-box {
    width: 62px;
  }

  body .contact-card-content h3 {
    font-size: 13px !important;
  }

  body .contact-phone-number {
    font-size: 18px !important;
  }

  body .contact-card-description {
    font-size: 9.5px !important;
  }

  body .contact-card-action {
    font-size: 10px !important;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --contact-section-padding-top-final: 44px;
    --contact-section-padding-bottom-final: 42px;
    --contact-title-icon-size-final: 54px;
    --contact-title-size-final: 19px;
    --contact-heading-bottom-gap-final: 22px;
    --contact-card-min-height-final: 126px;
    --contact-phone-icon-size-final: 56px;
    --contact-line-icon-size-final: 56px;
    --contact-form-icon-size-final: 56px;
    --contact-simulation-icon-size-final: 56px;
    --contact-genie-width-final: 180px;
  }

  body .home-contact-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body .home-contact-copy {
    justify-content: center;
  }

  body .home-contact-copy h2 {
    text-align: left !important;
  }

  body .home-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 13px !important;
  }

  body .home-contact-card {
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: 66px minmax(0, 1fr);
  }

  body .home-contact-genie-box {
    min-height: 0;
  }

  body .home-contact-genie {
    margin: -2px auto 0;
  }
}


/* ==================================================
   小さいスマートフォン
================================================== */

@media (max-width: 420px) {
  :root {
    --contact-title-icon-size-final: 47px;
    --contact-title-size-final: 16px;
  }

  body .home-contact-copy {
    gap: 10px;
  }

  body .home-contact-card {
    grid-template-columns: 59px minmax(0, 1fr);
    padding: 11px 10px !important;
  }

  body .contact-card-icon-box {
    width: 59px;
  }

  body .contact-card-content h3 {
    font-size: 13px !important;
  }

  body .contact-phone-number {
    font-size: 18px !important;
  }
}

/* ==================================================
   お問い合わせセクション
   パーツ別・最終調整欄

   数値だけ変更してください。
   X：プラスで右／マイナスで左
   Y：プラスで下／マイナスで上
================================================== */

:root {
  /* ----------------------------------------------
     セクション全体
  ---------------------------------------------- */
  --contact-section-x-adjust: 0px;
  --contact-section-y-adjust: 0px;

  /* ----------------------------------------------
     題名全体
  ---------------------------------------------- */
  --contact-heading-x-adjust: 0px;
  --contact-heading-y-adjust: 0px;
  --contact-heading-bottom-gap-adjust: 26px;

  /* 題名アイコン：toiawase-icon.png */
  --contact-heading-icon-size-adjust: 100px;
  --contact-heading-icon-x-adjust: 75px;
  --contact-heading-icon-y-adjust: 0px;

  /* 題名文字 */
  --contact-heading-text-size-adjust: 30px;
  --contact-heading-text-x-adjust: 65px;
  --contact-heading-text-y-adjust: 0px;

  /* ----------------------------------------------
     4カード全体
  ---------------------------------------------- */
  --contact-grid-x-adjust: 0px;
  --contact-grid-y-adjust: 0px;
  --contact-card-gap-x-adjust: 16px;
  --contact-card-gap-y-adjust: 14px;
  --contact-card-radius-adjust: 13px;

  /* ==============================================
     電話カード
  ============================================== */
  --contact-phone-card-width-adjust: 100%;
  --contact-phone-card-height-adjust: 146px;
  --contact-phone-card-x-adjust: 80px;
  --contact-phone-card-y-adjust: 0px;

  --contact-phone-icon-column-adjust: 90px;
  --contact-phone-circle-size-adjust: 80px;
  --contact-phone-circle-x-adjust: 0px;
  --contact-phone-circle-y-adjust: 0px;

  --contact-phone-icon-size-adjust: 110px;
  --contact-phone-icon-x-adjust: -14px;
  --contact-phone-icon-y-adjust: -14px;

  --contact-phone-content-x-adjust: 0px;
  --contact-phone-content-y-adjust: -10px;

  --contact-phone-title-size-adjust: 20px;
  --contact-phone-title-x-adjust: 0px;
  --contact-phone-title-y-adjust: 0px;

  --contact-phone-number-size-adjust: 29.5px;
  --contact-phone-number-x-adjust: 0px;
  --contact-phone-number-y-adjust: 7px;

  --contact-phone-button-width-adjust: 100%;
  --contact-phone-button-height-adjust: 30px;
  --contact-phone-button-font-size-adjust: 14px;
  --contact-phone-button-x-adjust: 0px;
  --contact-phone-button-y-adjust: 15px;

  /* ==============================================
     LINEカード
     line-icon.pngは色・形をそのまま使用
  ============================================== */
  --contact-line-card-width-adjust: 100%;
  --contact-line-card-height-adjust: 146px;
  --contact-line-card-x-adjust: 80px;
  --contact-line-card-y-adjust: 0px;

  --contact-line-icon-column-adjust: 90px;
  --contact-line-icon-box-size-adjust: 80px;
  --contact-line-icon-box-x-adjust: 0px;
  --contact-line-icon-box-y-adjust: 0px;

  --contact-line-icon-size-adjust: 80px;
  --contact-line-icon-x-adjust: 0px;
  --contact-line-icon-y-adjust: 0px;

  --contact-line-content-x-adjust: 0px;
  --contact-line-content-y-adjust: -5px;

  --contact-line-title-size-adjust: 20px;
  --contact-line-title-x-adjust: 0px;
  --contact-line-title-y-adjust: 0px;

  --contact-line-text-size-adjust: 14px;
  --contact-line-text-x-adjust: 0px;
  --contact-line-text-y-adjust: 5px;

  --contact-line-button-width-adjust: 100%;
  --contact-line-button-height-adjust: 30px;
  --contact-line-button-font-size-adjust: 14px;
  --contact-line-button-x-adjust: 0px;
  --contact-line-button-y-adjust: 5px;

  /* ==============================================
     フォームカード
  ============================================== */
  --contact-form-card-width-adjust: 100%;
  --contact-form-card-height-adjust: 146px;
  --contact-form-card-x-adjust: 80px;
  --contact-form-card-y-adjust: 0px;

  --contact-form-icon-column-adjust: 90px;
  --contact-form-circle-size-adjust: 80px;
  --contact-form-circle-x-adjust: 0px;
  --contact-form-circle-y-adjust: 0px;

  --contact-form-icon-size-adjust: 60px;
  --contact-form-icon-x-adjust: 0px;
  --contact-form-icon-y-adjust: 0px;

  --contact-form-content-x-adjust: 0px;
  --contact-form-content-y-adjust: -5px;

  --contact-form-title-size-adjust: 20px;
  --contact-form-title-x-adjust: 0px;
  --contact-form-title-y-adjust: 0px;

  --contact-form-text-size-adjust: 14px;
  --contact-form-text-x-adjust: 0px;
  --contact-form-text-y-adjust: 2px;

  --contact-form-button-width-adjust: 100%;
  --contact-form-button-height-adjust: 30px;
  --contact-form-button-font-size-adjust: 14px;
  --contact-form-button-x-adjust: 0px;
  --contact-form-button-y-adjust: 5px;

  /* ==============================================
     料金シミュレーションカード
  ============================================== */
  --contact-simulation-card-width-adjust: 100%;
  --contact-simulation-card-height-adjust: 146px;
  --contact-simulation-card-x-adjust: 80px;
  --contact-simulation-card-y-adjust: 0px;

  --contact-simulation-icon-column-adjust: 90px;
  --contact-simulation-circle-size-adjust: 80px;
  --contact-simulation-circle-x-adjust: 0px;
  --contact-simulation-circle-y-adjust: 0px;

  --contact-simulation-icon-size-adjust: 80px;
  --contact-simulation-icon-x-adjust: 2px;
  --contact-simulation-icon-y-adjust: -15px;

  --contact-simulation-content-x-adjust: 0px;
  --contact-simulation-content-y-adjust: -5px;

  --contact-simulation-title-size-adjust: 20px;
  --contact-simulation-title-x-adjust: 0px;
  --contact-simulation-title-y-adjust: 0px;

  --contact-simulation-text-size-adjust: 14px;
  --contact-simulation-text-x-adjust: 0px;
  --contact-simulation-text-y-adjust: 2px;

  --contact-simulation-button-width-adjust: 100%;
  --contact-simulation-button-height-adjust: 30px;
  --contact-simulation-button-font-size-adjust: 14px;
  --contact-simulation-button-x-adjust: 0px;
  --contact-simulation-button-y-adjust: 5px;

  /* ----------------------------------------------
     右側ジーニー：genie.png
  ---------------------------------------------- */
  --contact-genie-size-adjust: 600px;
  --contact-genie-x-adjust: 20px;
  --contact-genie-y-adjust: 55px;
  --contact-genie-opacity-adjust: 0.5;
}


/* ==================================================
   調整値の反映
================================================== */

body .home-contact-inner {
  position: relative;
  left: var(--contact-section-x-adjust);
  top: var(--contact-section-y-adjust);
}

body .home-contact-copy {
  position: relative;
  left: var(--contact-heading-x-adjust);
  top: var(--contact-heading-y-adjust);
  margin-bottom: var(--contact-heading-bottom-gap-adjust) !important;
}

body .home-contact-title-icon {
  width: var(--contact-heading-icon-size-adjust) !important;
  min-width: var(--contact-heading-icon-size-adjust) !important;
  transform: translate(
    var(--contact-heading-icon-x-adjust),
    var(--contact-heading-icon-y-adjust)
  ) !important;
}

body .home-contact-copy h2 {
  position: relative;
  left: var(--contact-heading-text-x-adjust);
  top: var(--contact-heading-text-y-adjust);
  font-size: var(--contact-heading-text-size-adjust) !important;
}

body .home-contact-grid {
  position: relative;
  left: var(--contact-grid-x-adjust);
  top: var(--contact-grid-y-adjust);
  gap: var(--contact-card-gap-y-adjust) var(--contact-card-gap-x-adjust) !important;
}

body .home-contact-card {
  border-radius: var(--contact-card-radius-adjust) !important;
  justify-self: center;
}


/* 電話カード */
body .contact-card-phone {
  width: var(--contact-phone-card-width-adjust) !important;
  min-height: var(--contact-phone-card-height-adjust) !important;
  left: var(--contact-phone-card-x-adjust);
  top: var(--contact-phone-card-y-adjust);
  grid-template-columns: var(--contact-phone-icon-column-adjust) minmax(0, 1fr) !important;
}

body .contact-card-phone .contact-card-icon-box {
  width: var(--contact-phone-circle-size-adjust) !important;
  height: var(--contact-phone-circle-size-adjust) !important;
  min-width: var(--contact-phone-circle-size-adjust) !important;
  position: relative;
  left: var(--contact-phone-circle-x-adjust);
  top: var(--contact-phone-circle-y-adjust);
  display: grid !important;
  place-items: center !important;
  background: var(--contact-card-color) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 13px rgba(13, 43, 69, 0.17) !important;
  overflow: hidden !important;
}

body .contact-card-phone .contact-card-icon-phone {
  width: var(--contact-phone-icon-size-adjust) !important;
  transform: translate(
    var(--contact-phone-icon-x-adjust),
    var(--contact-phone-icon-y-adjust)
  ) !important;
  filter: brightness(0) invert(1) !important;
}

body .contact-card-phone .contact-card-content {
  position: relative;
  left: var(--contact-phone-content-x-adjust);
  top: var(--contact-phone-content-y-adjust);
}

body .contact-card-phone h3 {
  position: relative;
  left: var(--contact-phone-title-x-adjust);
  top: var(--contact-phone-title-y-adjust);
  font-size: var(--contact-phone-title-size-adjust) !important;
}

body .contact-card-phone .contact-phone-number {
  position: relative;
  left: var(--contact-phone-number-x-adjust);
  top: var(--contact-phone-number-y-adjust);
  font-size: var(--contact-phone-number-size-adjust) !important;
}

body .contact-card-phone .contact-card-action {
  width: var(--contact-phone-button-width-adjust) !important;
  min-height: var(--contact-phone-button-height-adjust) !important;
  position: relative;
  left: var(--contact-phone-button-x-adjust);
  top: var(--contact-phone-button-y-adjust);
  font-size: var(--contact-phone-button-font-size-adjust) !important;
}


/* LINEカード：背景丸なし */
body .contact-card-line {
  width: var(--contact-line-card-width-adjust) !important;
  min-height: var(--contact-line-card-height-adjust) !important;
  left: var(--contact-line-card-x-adjust);
  top: var(--contact-line-card-y-adjust);
  grid-template-columns: var(--contact-line-icon-column-adjust) minmax(0, 1fr) !important;
}

body .contact-card-line .contact-card-icon-box {
  width: var(--contact-line-icon-box-size-adjust) !important;
  height: var(--contact-line-icon-box-size-adjust) !important;
  min-width: var(--contact-line-icon-box-size-adjust) !important;
  position: relative;
  left: var(--contact-line-icon-box-x-adjust);
  top: var(--contact-line-icon-box-y-adjust);
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body .contact-card-line .contact-card-icon-line {
  width: var(--contact-line-icon-size-adjust) !important;
  transform: translate(
    var(--contact-line-icon-x-adjust),
    var(--contact-line-icon-y-adjust)
  ) !important;
  filter: none !important;
}

body .contact-card-line .contact-card-content {
  position: relative;
  left: var(--contact-line-content-x-adjust);
  top: var(--contact-line-content-y-adjust);
}

body .contact-card-line h3 {
  position: relative;
  left: var(--contact-line-title-x-adjust);
  top: var(--contact-line-title-y-adjust);
  font-size: var(--contact-line-title-size-adjust) !important;
}

body .contact-card-line .contact-card-description {
  position: relative;
  left: var(--contact-line-text-x-adjust);
  top: var(--contact-line-text-y-adjust);
  font-size: var(--contact-line-text-size-adjust) !important;
}

body .contact-card-line .contact-card-action {
  width: var(--contact-line-button-width-adjust) !important;
  min-height: var(--contact-line-button-height-adjust) !important;
  position: relative;
  left: var(--contact-line-button-x-adjust);
  top: var(--contact-line-button-y-adjust);
  font-size: var(--contact-line-button-font-size-adjust) !important;
}


/* フォームカード */
body .contact-card-form {
  width: var(--contact-form-card-width-adjust) !important;
  min-height: var(--contact-form-card-height-adjust) !important;
  left: var(--contact-form-card-x-adjust);
  top: var(--contact-form-card-y-adjust);
  grid-template-columns: var(--contact-form-icon-column-adjust) minmax(0, 1fr) !important;
}

body .contact-card-form .contact-card-icon-box {
  width: var(--contact-form-circle-size-adjust) !important;
  height: var(--contact-form-circle-size-adjust) !important;
  min-width: var(--contact-form-circle-size-adjust) !important;
  position: relative;
  left: var(--contact-form-circle-x-adjust);
  top: var(--contact-form-circle-y-adjust);
  display: grid !important;
  place-items: center !important;
  background: var(--contact-card-color) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 13px rgba(13, 43, 69, 0.17) !important;
  overflow: hidden !important;
}

body .contact-card-form .contact-card-icon-form {
  width: var(--contact-form-icon-size-adjust) !important;
  transform: translate(
    var(--contact-form-icon-x-adjust),
    var(--contact-form-icon-y-adjust)
  ) !important;
  filter: brightness(0) invert(1) !important;
}

body .contact-card-form .contact-card-content {
  position: relative;
  left: var(--contact-form-content-x-adjust);
  top: var(--contact-form-content-y-adjust);
}

body .contact-card-form h3 {
  position: relative;
  left: var(--contact-form-title-x-adjust);
  top: var(--contact-form-title-y-adjust);
  font-size: var(--contact-form-title-size-adjust) !important;
}

body .contact-card-form .contact-card-description {
  position: relative;
  left: var(--contact-form-text-x-adjust);
  top: var(--contact-form-text-y-adjust);
  font-size: var(--contact-form-text-size-adjust) !important;
}

body .contact-card-form .contact-card-action {
  width: var(--contact-form-button-width-adjust) !important;
  min-height: var(--contact-form-button-height-adjust) !important;
  position: relative;
  left: var(--contact-form-button-x-adjust);
  top: var(--contact-form-button-y-adjust);
  font-size: var(--contact-form-button-font-size-adjust) !important;
}


/* 料金シミュレーションカード */
body .contact-card-simulation {
  width: var(--contact-simulation-card-width-adjust) !important;
  min-height: var(--contact-simulation-card-height-adjust) !important;
  left: var(--contact-simulation-card-x-adjust);
  top: var(--contact-simulation-card-y-adjust);
  grid-template-columns: var(--contact-simulation-icon-column-adjust) minmax(0, 1fr) !important;
}

body .contact-card-simulation .contact-card-icon-box {
  width: var(--contact-simulation-circle-size-adjust) !important;
  height: var(--contact-simulation-circle-size-adjust) !important;
  min-width: var(--contact-simulation-circle-size-adjust) !important;
  position: relative;
  left: var(--contact-simulation-circle-x-adjust);
  top: var(--contact-simulation-circle-y-adjust);
  display: grid !important;
  place-items: center !important;
  background: var(--contact-card-color) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 13px rgba(13, 43, 69, 0.17) !important;
  overflow: hidden !important;
}

body .contact-card-simulation .contact-card-icon-simulation {
  width: var(--contact-simulation-icon-size-adjust) !important;
  transform: translate(
    var(--contact-simulation-icon-x-adjust),
    var(--contact-simulation-icon-y-adjust)
  ) !important;
  filter: brightness(0) invert(1) !important;
}

body .contact-card-simulation .contact-card-content {
  position: relative;
  left: var(--contact-simulation-content-x-adjust);
  top: var(--contact-simulation-content-y-adjust);
}

body .contact-card-simulation h3 {
  position: relative;
  left: var(--contact-simulation-title-x-adjust);
  top: var(--contact-simulation-title-y-adjust);
  font-size: var(--contact-simulation-title-size-adjust) !important;
}

body .contact-card-simulation .contact-card-description {
  position: relative;
  left: var(--contact-simulation-text-x-adjust);
  top: var(--contact-simulation-text-y-adjust);
  font-size: var(--contact-simulation-text-size-adjust) !important;
}

body .contact-card-simulation .contact-card-action {
  width: var(--contact-simulation-button-width-adjust) !important;
  min-height: var(--contact-simulation-button-height-adjust) !important;
  position: relative;
  left: var(--contact-simulation-button-x-adjust);
  top: var(--contact-simulation-button-y-adjust);
  font-size: var(--contact-simulation-button-font-size-adjust) !important;
}


/* ジーニー */
body .home-contact-genie {
  width: var(--contact-genie-size-adjust) !important;
  opacity: var(--contact-genie-opacity-adjust) !important;
  transform: translate(
    var(--contact-genie-x-adjust),
    var(--contact-genie-y-adjust)
  ) !important;
}


/* ==================================================
   スマホ用の調整値
   必要な場合はここだけ変更してください
================================================== */

@media (max-width: 700px) {
  :root {
    --contact-heading-icon-size-adjust: 54px;
    --contact-heading-text-size-adjust: 19px;

    --contact-phone-card-height-adjust: 126px;
    --contact-line-card-height-adjust: 126px;
    --contact-form-card-height-adjust: 126px;
    --contact-simulation-card-height-adjust: 126px;

    --contact-phone-icon-column-adjust: 58px;
    --contact-phone-circle-size-adjust: 58px;
    --contact-phone-icon-size-adjust: 39px;

    --contact-line-icon-column-adjust: 58px;
    --contact-line-icon-box-size-adjust: 58px;
    --contact-line-icon-size-adjust: 56px;

    --contact-form-icon-column-adjust: 58px;
    --contact-form-circle-size-adjust: 58px;
    --contact-form-icon-size-adjust: 39px;

    --contact-simulation-icon-column-adjust: 58px;
    --contact-simulation-circle-size-adjust: 58px;
    --contact-simulation-icon-size-adjust: 39px;

    --contact-genie-size-adjust: 180px;
  }
}

/* ==================================================
   お問い合わせ・電話ボタン幅 最終修正

   調整済みの値はそのまま維持し、
   「24時間365日対応」の175px制限だけ解除します。
================================================== */

body .contact-card-phone .contact-card-action,
body .contact-card-action-phone {
  width: var(--contact-phone-button-width-adjust) !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

/* ==================================================
   お問い合わせカード
   影を右下45度へ変更・完成版
================================================== */

body .home-contact-card {
  box-shadow:
    8px 8px 0 rgba(13, 43, 69, 0.08),
    13px 13px 24px rgba(13, 43, 69, 0.16)
    !important;
}

body .home-contact-card:hover {
  box-shadow:
    11px 11px 0 rgba(13, 43, 69, 0.07),
    19px 19px 31px rgba(13, 43, 69, 0.20)
    !important;
}

/* ==================================================
   ラストセクション
   会社情報・フッター完成版

   X：＋で右、－で左
   Y：＋で下、－で上
================================================== */

:root {
  /* フッター全体 */
  --footer-background-final: #0d3569;
  --footer-inner-width-final: 1180px;
  --footer-padding-top-final: 24px;
  --footer-padding-bottom-final: 42px;
  --footer-column-gap-final: 0px;

  /* 各列 */
  --footer-column-padding-x-final: 25px;
  --footer-divider-color-final:
    rgba(255, 255, 255, 0.55);

  /* 見出し */
  --footer-heading-size-final: 15px;
  --footer-heading-x-final: 0px;
  --footer-heading-y-final: 0px;

  /* 左列 */
  --footer-brand-x-final: 0px;
  --footer-brand-y-final: 0px;

  --footer-logo-width-final: 174px;
  --footer-logo-x-final: 0px;
  --footer-logo-y-final: 0px;

  --footer-company-size-final: 17px;
  --footer-company-x-final: 0px;
  --footer-company-y-final: 0px;

  --footer-address-size-final: 12px;
  --footer-address-x-final: 0px;
  --footer-address-y-final: 0px;

  /* サービス列 */
  --footer-services-x-final: 0px;
  --footer-services-y-final: 0px;
  --footer-services-size-final: 12px;
  --footer-services-line-height-final: 1.42;

  /* 対応エリア列 */
  --footer-area-x-final: 0px;
  --footer-area-y-final: 0px;
  --footer-area-size-final: 12px;
  --footer-area-line-height-final: 1.48;

  /* 連絡先列 */
  --footer-contact-x-final: 0px;
  --footer-contact-y-final: 0px;

  --footer-contact-label-size-final: 11px;
  --footer-phone-size-final: 20px;
  --footer-mail-size-final: 10px;
  --footer-follow-size-final: 13px;

  /* SNS */
  --footer-social-size-final: 42px;
  --footer-social-gap-final: 12px;
  --footer-social-x-final: 0px;
  --footer-social-y-final: 0px;

  /* コピーライト */
  --footer-copyright-size-final: 10px;
  --footer-copyright-x-final: 0px;
  --footer-copyright-y-final: 0px;
}


/* ==================================================
   フッター本体
================================================== */

body .site-footer.aladdin-footer {
  position: relative !important;

  padding:
    var(--footer-padding-top-final)
    0
    var(--footer-padding-bottom-final)
    !important;

  color: #ffffff !important;
  background:
    var(--footer-background-final)
    !important;

  overflow: hidden !important;
}


body .aladdin-footer-inner {
  width:
    min(
      var(--footer-inner-width-final),
      94%
    );

  margin: 0 auto !important;

  display: grid !important;

  grid-template-columns:
    1.18fr
    1.08fr
    1.14fr
    1.04fr
    !important;

  align-items: stretch !important;

  gap:
    var(--footer-column-gap-final)
    !important;
}


body .aladdin-footer-column {
  position: relative;

  min-width: 0;

  padding:
    0
    var(--footer-column-padding-x-final)
    !important;
}


body .aladdin-footer-column:not(:last-child) {
  border-right:
    1px dotted
    var(--footer-divider-color-final)
    !important;
}


/* ==================================================
   共通見出し
================================================== */

body .aladdin-footer-heading {
  margin: 0 0 6px !important;

  color: #ffffff !important;

  font-size:
    var(--footer-heading-size-final)
    !important;

  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;

  transform:
    translate(
      var(--footer-heading-x-final),
      var(--footer-heading-y-final)
    );
}


/* ==================================================
   左：会社情報
================================================== */

body .aladdin-footer-brand {
  transform:
    translate(
      var(--footer-brand-x-final),
      var(--footer-brand-y-final)
    );
}


body .aladdin-footer-logo-link {
  display: block;
  width: fit-content;

  margin: 1px 0 4px;

  text-decoration: none;
}


body .aladdin-footer-logo {
  width:
    var(--footer-logo-width-final)
    !important;

  max-width: none !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  object-fit: contain !important;

  transform:
    translate(
      var(--footer-logo-x-final),
      var(--footer-logo-y-final)
    );
}


body .aladdin-footer-company-name {
  margin: 0 0 2px !important;

  color: #ffffff !important;

  font-size:
    var(--footer-company-size-final)
    !important;

  font-weight: 900 !important;
  line-height: 1.3 !important;

  transform:
    translate(
      var(--footer-company-x-final),
      var(--footer-company-y-final)
    );
}


body .aladdin-footer-address {
  margin: 0 !important;

  color: #ffffff !important;

  font-size:
    var(--footer-address-size-final)
    !important;

  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;

  transform:
    translate(
      var(--footer-address-x-final),
      var(--footer-address-y-final)
    );
}


/* ==================================================
   中左：サービス
================================================== */

body .aladdin-footer-services {
  transform:
    translate(
      var(--footer-services-x-final),
      var(--footer-services-y-final)
    );
}


body .aladdin-footer-link-list {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


body .aladdin-footer-link-list li {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size:
    var(--footer-services-size-final)
    !important;

  font-weight: 700 !important;
  line-height:
    var(--footer-services-line-height-final)
    !important;
}


body .aladdin-footer-link-list li::before {
  content: "・";
}


body .aladdin-footer-link-list a {
  color: #ffffff !important;

  text-decoration: none !important;

  opacity: 1 !important;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


body .aladdin-footer-link-list a:hover {
  display: inline-block;

  opacity: 0.72 !important;

  transform: translateX(3px);
}


/* ==================================================
   中右：対応エリア
================================================== */

body .aladdin-footer-area {
  transform:
    translate(
      var(--footer-area-x-final),
      var(--footer-area-y-final)
    );
}


body .aladdin-footer-area-main,
body .aladdin-footer-area-note {
  margin: 0 !important;

  color: #ffffff !important;

  font-size:
    var(--footer-area-size-final)
    !important;

  font-weight: 800 !important;
  line-height:
    var(--footer-area-line-height-final)
    !important;
}


body .aladdin-footer-area-note {
  margin-top: 4px !important;
}


/* ==================================================
   右：連絡先
================================================== */

body .aladdin-footer-contact {
  transform:
    translate(
      var(--footer-contact-x-final),
      var(--footer-contact-y-final)
    );
}


body .aladdin-footer-contact-label {
  margin: 0 !important;

  color: #ffffff !important;

  font-size:
    var(--footer-contact-label-size-final)
    !important;

  font-weight: 900 !important;
  line-height: 1.2 !important;
}


body .aladdin-footer-phone {
  display: inline-block;

  margin: -2px 0 4px !important;

  color: #ffffff !important;

  font-size:
    var(--footer-phone-size-final)
    !important;

  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;

  text-decoration: none !important;
  white-space: nowrap;
}


body .aladdin-footer-mail-label {
  margin-top: 1px !important;
}


body .aladdin-footer-mail {
  display: block;

  width: max-content;
  max-width: 100%;

  margin: -1px 0 4px !important;

  color: #ffffff !important;

  font-size:
    var(--footer-mail-size-final)
    !important;

  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;

  text-decoration: none !important;
  overflow-wrap: anywhere;
}


body .aladdin-footer-follow {
  margin: 4px 0 5px !important;

  color: #ffffff !important;

  font-size:
    var(--footer-follow-size-final)
    !important;

  font-weight: 900 !important;
  line-height: 1.3 !important;
}


/* ==================================================
   SNSアイコン
================================================== */

body .aladdin-footer-socials {
  display: flex;
  align-items: center;

  gap:
    var(--footer-social-gap-final);

  transform:
    translate(
      var(--footer-social-x-final),
      var(--footer-social-y-final)
    );
}


body .aladdin-footer-social {
  width:
    var(--footer-social-size-final);

  height:
    var(--footer-social-size-final);

  flex:
    0 0
    var(--footer-social-size-final);

  display: grid;
  place-items: center;

  color:
    var(--footer-background-final)
    !important;

  background: #f5f6f8 !important;

  border:
    3px solid
    rgba(255, 255, 255, 0.45);

  border-radius: 50%;

  text-decoration: none !important;

  box-shadow:
    0 4px 10px
    rgba(0, 0, 0, 0.18);

  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}


body .aladdin-footer-social:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}


body .aladdin-footer-instagram svg {
  width: 27px;
  height: 27px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}


body .aladdin-footer-instagram .instagram-dot {
  fill: currentColor;
  stroke: none;
}


body .aladdin-footer-line span {
  font-family:
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: -0.04em;
}


/* ==================================================
   コピーライト
================================================== */

body .aladdin-footer-copyright {
  position: absolute;

  right: 0;
  bottom: 7px;
  left: 0;

  margin: 0 !important;
  padding: 0 15px !important;

  color: #ffffff !important;
  background: transparent !important;

  font-size:
    var(--footer-copyright-size-final)
    !important;

  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;

  transform:
    translate(
      var(--footer-copyright-x-final),
      var(--footer-copyright-y-final)
    );
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 980px) {
  body .aladdin-footer-inner {
    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;

    row-gap: 25px !important;
  }

  body .aladdin-footer-column {
    padding:
      0
      28px
      !important;
  }

  body .aladdin-footer-column:nth-child(2) {
    border-right: 0 !important;
  }

  body .aladdin-footer-column:nth-child(1),
  body .aladdin-footer-column:nth-child(2) {
    padding-bottom: 22px !important;

    border-bottom:
      1px dotted
      var(--footer-divider-color-final)
      !important;
  }
}


/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 700px) {
  :root {
    --footer-padding-top-final: 34px;
    --footer-padding-bottom-final: 48px;

    --footer-logo-width-final: 180px;
    --footer-company-size-final: 17px;
    --footer-address-size-final: 12px;

    --footer-heading-size-final: 16px;
    --footer-services-size-final: 13px;
    --footer-area-size-final: 13px;

    --footer-phone-size-final: 22px;
    --footer-mail-size-final: 11px;
    --footer-follow-size-final: 14px;

    --footer-social-size-final: 44px;
  }

  body .aladdin-footer-inner {
    width: min(88%, 480px);

    grid-template-columns:
      1fr
      !important;

    row-gap: 0 !important;
  }

  body .aladdin-footer-column {
    padding:
      23px
      0
      !important;

    border-right: 0 !important;

    border-bottom:
      1px dotted
      var(--footer-divider-color-final)
      !important;
  }

  body .aladdin-footer-column:first-child {
    padding-top: 0 !important;
  }

  body .aladdin-footer-column:last-child {
    border-bottom: 0 !important;
  }

  body .aladdin-footer-logo-link {
    margin-right: auto;
    margin-left: auto;
  }

  body .aladdin-footer-brand,
  body .aladdin-footer-contact {
    text-align: center;
  }

  body .aladdin-footer-socials {
    justify-content: center;
  }

  body .aladdin-footer-mail {
    margin-right: auto !important;
    margin-left: auto !important;
  }
}


/* ==================================================
   ヘッダー：ロゴ横の事業名
================================================== */

.header-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  text-decoration: none;
}

.header-site-name {
  flex: 0 1 auto;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

@media (max-width: 1100px) and (min-width: 821px) {
  .header-brand {
    gap: 10px;
  }

  .header-site-name {
    font-size: 15px;
  }
}

@media (max-width: 820px) {
  .header-brand {
    gap: 9px;
    max-width: calc(100% - 62px);
  }

  .header-logo {
    width: 145px;
  }

  .header-site-name {
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  .header-brand {
    gap: 7px;
  }

  .header-logo {
    width: 112px;
  }

  .header-site-name {
    font-size: 11px;
    letter-spacing: 0;
  }
}

@media (max-width: 380px) {
  .header-logo {
    width: 98px;
  }

  .header-site-name {
    font-size: 10px;
  }
}