/* Base values for consistent scaling */
:root {
  --base-font-size: 16px; /* Fallback base font size */
  --base-margin: 1.5rem; /* Base margin for spacing */
  --base-padding: 1.5rem; /* Base padding for spacing */
  --container-max-width: 100vw; /* Full viewport width for page-contents */

  /* Widths and sizes */
  --w-review-detail: clamp(500px, 47.4444vw, 1250px); /* 1440px ~640px, max ~1150px at 2600px */
  --w-review-description: clamp(350px, 27.0833vw, 760px); /* 1440px ~390px, max ~700px at 2600px */
  --s-review-figure: clamp(150px, 13.8889vw, 360px); /* 1440px ~200px, max ~360px at 2600px */
  --w-qa-detail: clamp(400px, 53.125vw, 1380px); /* 1440px ~765px, max ~1380px at 2600px */
  --w-footer-wrap: clamp(600px, 63.1944vw, 1642px); /* 1440px ~910px, max ~1642px at 2600px */
  --w-cta-attention: clamp(90px, 8.8889vw, 128px); /* Min 64px, scales to 128px at 1440px */
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none; /* リストのデフォルトスタイルを削除 */
}

body {
  font-family: 'Zen Old Mincho', serif;
  line-height: 1.6;
  color: #333;
  background-image: url(../images/background-Bottom.png);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}

/* Set base font size relative to viewport width */
html {
  font-size: calc(14px + 0.5vw); /* Scales from 14px to ~18px on larger screens */
}

/* Animation for fade-in effect */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(1.25rem); /* 20px equivalent */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

section > header {
  display: flex;
  width: 100%;
  justify-content: center;
}

section .title-large {
  gap: 1em;
}

section .title-large .title {
  display: flex;
  align-items: center;
  line-height: 1em;
}

section .title-large .title:has(span) {
  flex-direction: column;
}

section .title-large .title span {
  display: block;
  width: 100%;
  margin-bottom: 7px;
}

#guarantee .title br {
  display: none;
}

/* Common container styles */
.page-contents {
  max-width: var(--container-max-width); /* Full screen width */
  margin: 0 auto;
  /* パディングは削除、各パーツで個別に設定 */
}

/* Header styles */
.common-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  /* padding: var(--base-padding); */
  padding-top: min(10px, max(5px, 0.6944vw));
  padding-bottom: min(10px, max(5px, 0.6944vw));
  padding-left: min(26px, max(10px, 1.8056vw));
  padding-right: min(26px, max(10px, 1.8056vw));
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
}

.cta {
  text-decoration: none;
}

.common-header .cta {
  background: #005A9F; /* デフォルト背景色 */
  color: #fff;
  padding: 0.75rem; /* 12px 20px equivalent */
  border-radius: 0.3125rem; /* 5px equivalent */
  text-align: center;
  cursor: pointer;
  border-radius: 100em;
  text-decoration: none;
}

.common-header .cta:hover {
  background: #03497f; /* hover時の背景色 */
}

.logo {
  display: flex;
  align-items: center;
}

.cta:not(.common-header .cta) {
  background: #ff9900; /* common-header以外の場合のデフォルト背景色 */
  color: #fff;
  padding: 0.75rem; /* 12px 20px equivalent */
  border-radius: 100em; /* 5px equivalent */
  text-align: center;
  cursor: pointer;
  margin: 0 var(--base-margin); /* 画面端の密着を防ぐ */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto; /* 中央揃え */
  margin-right: auto; /* 中央揃え */
  box-shadow: 
    0 31px 31px #FF990033,
    0 0 0 #00000000 inset;
}

.cta:not(.common-header .cta):hover {
  background: #FF7B00; /* common-header以外の場合のhover時の背景色 */
  box-shadow: 
    0 0 0 #FF990000,
    0 .52em .52em #00000033 inset;
}

.cta .cta-attention {
  width: var(--w-cta-attention); /* Use width instead of max-width for direct clamping */
  max-width: var(--w-cta-attention); /* Ensure it doesn't exceed the clamp max */
  position: absolute;
  top: -2em;
  left: 1em;
}

.cta dl {
  display: flex;
  /* align-items: center; */
  align-items: flex-end;
}

.cta dl dt {
    margin-right: .2em;
}
.cta dl::before {
    /* content: "【"; */
}
.cta dl::after {
    /* content: "】"; */
}
.cta dl dt::before {
    content: "【";
}

.cta dl dd::after {
    content: "】";
}

.btn {
  display: flex;
  justify-content: center;
  padding: .25em 1em;
  width: 18.5em;
  color: #005A9F;
  border: 1px solid #005A9F;
  border-radius: 100em;
  text-align: center;
  text-decoration: none;
  background-color: #ffffff;
}

.text-link img,
.btn img {
  margin-left: .5em;
}

.btn:hover {
  color: #ffffff;
  background-color: #005A9F;
}

.text-link img:first-child,
.text-link:hover img:last-child,
.btn-link img:first-child,
.btn-link:hover img:last-child {
  display: inherit;
}

.text-link:hover img:first-child,
.text-link img:last-child,
.btn-link:hover img:first-child,
.btn-link img:last-child {
  display: none;
}

.text-link {
  color: #2B2A2A;
  text-decoration: none;
}

.text-link:hover {
  color: #005A9F;
  text-decoration: underline;
}

/* .header-bg-wave */
.header-bg-wave header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 6em;
  background-image: url(../images/wave.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}

.header-bg-wave header h2 {
  display: inline-block;
}

.header-bg-wave {
  display: grid;
  gap: calc(var(--base-margin) * 1.2); /* 30px equivalent */
}

.header-bg-wave li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.header-bg-wave li:nth-child(odd) .description {
  order: 1;
}

.header-bg-wave .description {
  display: flex;
  justify-content: center;
  width: 50vw;
}

.header-bg-wave .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60%;
}

.header-bg-wave figure {
  width: 50vw;
}

.header-bg-wave img {
  width: 100%;
  height: auto;
}

/* Hero section */
#hero {
  margin-top: 0;
}

.kv {
  display: flex;
  flex-wrap: nowrap; /* 横並びを維持 */
  justify-content: space-between; /* 左右端に配置 */
  align-items: flex-start; /* 上端を基準に */
  width: 100vw; /* 画面いっぱいの幅 */
  position: relative; /* #copy の絶対位置指定のための基準 */
  margin-bottom: calc(var(--base-margin) * 1.2); /* 30px equivalent */
  height: auto; /* figureの高さに応じて拡張 */
}

.kv figure {
  flex: 0 0 50.6111vw; /* 1440px以下で700px相当 */
  max-width: 50.6111vw; /* 1440px以下でスケール */
  height: 40.2778vw; /* 1440pxで580px（580 ÷ 1440 ≈ 40.2778vw） */
  max-height: 582px;
  margin: 0; /* 画面左端にピッタリ */
  margin-top: 12.8056vw; /* 1440pxで約170px、比率を維持 */
  margin-bottom: 0; /* figureをkvの下にくっつける */
  z-index: 2; /* figure を #copy より前に */
  background-image: url('../images/kv-bg-l.jpg'); /* figureに背景画像を設定 */
  background-size: cover; /* 画像をコンテナにフィット */
  background-position: center; /* 中央に配置 */
  background-repeat: no-repeat; /* repeatしない */
}

.kv figure img {
  display: none; /* HTMLのimgを非表示 */
}

#copy {
  position: absolute; /* figure の上に重ねる */
  top: 0; /* kvの上端にくっつける */
  right: 0; /* 画面右端にピッタリ */
  transform: translateY(0); /* 縦方向の調整を削除 */
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.5); /* 背景の可読性向上 */
  padding: var(--base-padding);
  writing-mode: vertical-rl; /* 縦書き表示 */
  text-orientation: mixed; /* 文字の向きを最適化 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1; /* #copy を figure の後ろに */
  background-image: url('../images/kv-bg-r.jpg'); /* CSSから1つ上のimagesフォルダを参照 */
  background-repeat: no-repeat; /* repeatしない */
  background-size: cover; /* 画像をコンテナにフィット */
}

#copy span {
  display: block;
  font-weight: bold;
  text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5); /* 2px 2px 4px */
  margin: 0 0.2083vw; /* 1440pxで約3px（3 ÷ 1440 ≈ 0.2083vw）、左右に隙間 */
  padding: 1.2083vw 0; /* 1440pxで約17px（17 ÷ 1440 ≈ 1.2083vw）、上下に隙間 */
  color: white; /* テキスト色を白に */
  mix-blend-mode: hard-light; /* backdrop-filterの代わりに追加 */
  position: relative; /* ::beforeの位置決め用 */
  white-space: nowrap; /* 意図しない折り返しを防ぐ */
}

#copy span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #000151 15%, #00599fcf 100%); /* デスクトップ版グラデーション */
  z-index: -1; /* テキストの下に */
}

.three-point-li {
  display: flex;
  justify-content: space-between;
  gap: 30px; /* 1440pxで30pxの間隔 */
  margin-bottom: calc(var(--base-margin) * 1.2); /* 30px equivalent */
  padding: 0 var(--base-padding); /* 画面端の密着を防ぐ */
  margin-left: auto; /* 中央揃え */
  margin-right: auto; /* 中央揃え */
}

.three-point-li li {
  flex: 1;
}

#tagline {
  text-align: center;
  padding: 0 var(--base-padding); /* 画面端の密着を防ぐ */
}

#tagline h1 span {
  display: block;
  margin-bottom: 0.625rem; /* 10px equivalent */
}

/* Thinking section */
#thinking .content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--base-margin);
  margin-bottom: calc(var(--base-margin) * 1.2); /* 30px equivalent */
}

#thinking .inner {
  display: flex;
}

#thinking li img {
  margin-right: .5em;
}

#thinking figure img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を維持しつつはみ出ない */
  overflow: hidden; /* はみ出しを防ぐ */
}

#thinking .description {
  background: linear-gradient(to bottom, #E6F8FF, #DDFFFF); /* 背景色グラデーション */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#punchline {
  display: flex;
  justify-content: center;
  width: 100vw;
  text-align: center;
  font-weight: bold;
  padding: 0 var(--base-padding); /* 画面端の密着を防ぐ */
}

/* Service section */
.service_features-transfer .inner p:last-child,
.guarantee-smile .inner p:last-child  {
  text-align: center;
}

.guarantee-smile .wrap {
  width: 70%;
}

.service_features-return .wrap {
  width: 80%;
}

.service_features-support .wrap,
.service_features-marine .wrap,
.guarantee-loaner_car .wrap {
  width: 90%;
}

.service_features-transfer h2,
.service_features-support h2,
.service_features-marine h2,
.guarantee-loaner_car h2,
.service_features-trouble h2,
.service_features-return h2,
.guarantee-smile h2,
.quality_control-maintenance h2 {
  width: 100%;
  text-align: center;
}

.guarantee-loaner_car .inner {
  width: 72%;
}

.service_features-return .inner,
.service_features-support .inner,
.service_features-marine .inner {
  text-align: center;
}

.service_features-support .inner p:last-child,
.service_features-marine .inner p:last-child {
  text-align: left;
}

/* Review section */
#review {
  background: linear-gradient(to bottom, #E6F8FF 0%, #DDFFFF 100%); /* スマホ版グラデーション */
}

#review .container {
  background-image: url(../images/review-bg-cloud-l.png), url(../images/review-bg-cloud-r.png);
  background-repeat: no-repeat;
  background-size: 30vw, 30vw;
  background-position: left top, right bottom;
}

#review .container > header {
  display: flex;
  padding: calc(var(--base-margin) * 1.5);
  width: 100%;
  justify-content: center;
  align-items: center;
}

#review h1 br {
  display: none;
}

#review .content ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#review .data {
  text-align: center;
  margin-bottom: calc(var(--base-margin) * 1.2); /* 30px equivalent */
}

#review .detail,
#review .detail dl {
  display: flex;
  justify-content: center;
  gap: var(--base-margin);
}

#review .detail dl + dl::before {
  content: "/";
}

.review-detail {
  display: flex;
  align-items: center;
  gap: var(--base-margin);
  margin-bottom: calc(var(--base-margin) * 1.2); /* 30px equivalent */
  padding: var(--base-padding) var(--base-padding); /* 画面端の密着を防ぐ */
}

.review-detail .description {
  flex: 1 1 auto;
}

.review-detail .description header h2 {
  color: #005A9F;
  text-align: center;
}

.review-detail .description .wrap {
  position: relative;
  padding: var(--base-padding); /* 画面端の密着を防ぐ */
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 1px 43px 43px #005A9F33;
}

.review-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 1px 43px 43px #005A9F33;
}

.review-detail:nth-child(odd) .description {
  order: 1;
}

.review-detail:nth-child(even) .description .wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #ffffff;
}

.review-detail:nth-child(odd) .description .wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ffffff;
}

/* Banner section */
.bunner {
  background: #f0f0f0;
  padding: calc(var(--base-padding) * 7.5); /* 40px equivalent, 画面端の密着を防ぐ */
  text-align: center;
  background-image: url(../images/iv-travel.jpg);
  background-size: cover;
  background-position: center;
}

.bunner .title {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: fit-content;
  align-items: center;
}

.bunner .title span {
  position: relative; /* ::beforeの位置決め用 */
  display: block;
  padding: 0.2em .5em;
  line-height: 1em;
  color: white; /* テキスト色を白に */
  mix-blend-mode: hard-light; /* backdrop-filterの代わりに追加 */
  backdrop-filter: contrast(3.5);
  white-space: nowrap; /* 意図しない折り返しを防ぐ */
}

.bunner .title span:nth-child(even) {
  margin-left: 2em;
}

.bunner .title span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #000151 15%, #00599fcf 100%); /* デスクトップ版グラデーション */
  z-index: -1; /* テキストの下に */
}

/* QA section */
#qa {
  background-image: url(../images/review-bg-cloud-l.png), url(../images/review-bg-cloud-r.png);
  background-repeat: no-repeat;
  background-size: 30vw, 30vw;
  background-position: left top, right bottom;
}

#qa .qa-detail {
  position: relative;
  padding: var(--base-padding); /* 画面端の密着を防ぐ */
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 
    1px 43px 43px #005A9F33,
    0px -1px 43px #005A9F22;
  margin-left: auto;
  margin-right: auto;
}

#qa .qa-detail ul {
  display: grid;
  gap: var(--base-margin);
}

#qa .qa-detail li {
  gap: 35px;
}

#qa .question {
  padding-left: calc(var(--fs-large-text)*2.3);
  margin-bottom: 0.625rem; /* 10px equivalent */
  font-weight: bold;
  color: #005A9F;
}

#qa .question::before {
  background-image: url(../images/icon-question.svg);
}

#qa .answer {
  margin-top: 25px;
  padding-left: calc(var(--fs-large-text)*2.3);
}

#qa .question,
#qa .answer {
  position: relative;
  display: flex;
  align-items: center;
}

#qa .answer::before {
  background-image: url(../images/icon-answer.svg);
}

#qa .question::before,
#qa .answer::before {
  content: "";
  position: absolute;
  width: 2em;
  height: 2em;
  top: 0;
  left: 0;
  background-size: contain;
}

/* Guarantee and Quality Control sections */
#quality_control {
  padding-bottom: 1em;
}

#guarantee .title span,
#quality_control .title {
  display: block;
  text-align: center;
}

.quality_control-li li:nth-child(even) .description {
  order: 1;
}

.quality_control-li li:nth-child(odd) .description {
  order: 0;
}

#quality_control footer {
  text-align: center;
}

#quality_control footer h3,
#quality_control footer p {
  font-weight: bold;
}

/* Footer */
body > div > footer {
  display: flex;
  align-items: center;
  flex-direction: column;
}

body > div > footer > .wrap {
  display: flex;
  justify-content: space-between;
  padding: calc(var(--base-padding) * 1.5); /* 40px equivalent, 画面端の密着を防ぐ */
  margin-left: auto;
  margin-right: auto;
}

.address {
  color: #2B2A2A;
}

/* Additional animations for華やかさ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* 上下からふわっと */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px); /* 左からふわっと */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px); /* 右からふわっと */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animation classes */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards; /* 時間を0.8sに調整（わかりやすく） */
}

.fade-in-left {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
}