/*styles.css */
.options {
  display: none;
}

.w100to130MWC {
  display: none;
}

.LessThan100PWC {
  display: none;
}

.w100to130PWC {
  display: none;
}

.noOptionsMessage {
  display: none;
}


body {
  padding-top: 68px;
  font-family: 'Arial', sans-serif;
  /* お好みのフォントに変更 */
  background-color: #fff;
  /* 背景色を指定 */
}

@media only screen and (min-width: 1050px) {
  body {
    padding-top: 90px;
  }
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

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

h1 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

main h1 {
  margin: 0;
  text-align: center;
  line-height: 1.5;
  font-size: 32px;
  background-color: coral;
  color: white;
  padding: 5px 0;
}
.main-visual {
    position: relative; /* 基準点にする */
    /* ...既存のスタイル... */
}

.mv-content {
    /* 中央揃えを維持しつつ、h1だけ外に出すために relative */
    position: relative; 
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 左上のグループ全体の配置 */
.mv-header-group {
    position: absolute;
    top: 20px;   /* 上からの距離 */
    left: 20px;  /* 左からの距離 */
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: flex-start; /* 左揃え */
    z-index: 10;
}

/* H1のスタイル（座布団などは維持） */
.mv-h1-seo {
    font-size: 0.85rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 10px; /* 少しスリムに */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
}

/* 星評価のスタイル（H1のすぐ下） */
.mv-rating-mini {
    margin-top: 5px; /* H1との隙間 */
    padding-left: 5px; /* H1の座布団と位置を微調整 */
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem; /* スマホでも邪魔にならないサイズ */
}

.mv-rating-mini .stars {
    color: #ffb400; /* ゴールド */
    letter-spacing: 1px;
}

.mv-rating-mini .rating-num {
    color: #fff;
    font-weight: bold;
}

.mv-rating-mini .review-count {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
}

/* スマホ用：さらに端に寄せる場合 */
@media (max-width: 480px) {
    .mv-header-group {
        top: 10px;
        left: 10px;
    }
    .mv-h1-seo {
        font-size: 0.75rem;
    }
}

/* スマホでは左上が窮屈になるので位置を微調整 */
@media (max-width: 768px) {
    .mv-h1-seo {
        top: 10px;
        left: 10px;
        font-size: 0.75rem;
    }
}

#logo {
  line-height: 64px;
  height: 64px;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
}

#logo img {
  height: 30px;
}

#logo a {
  display: table-cell;
  vertical-align: middle;
  height: 64px;
}

/* ロゴのh1をpに変えた場合の微調整 */
.logo-wrap {
    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 1050px) {
  #logo {
    line-height: 88px;
    height: 88px;
    position: absolute;
    z-index: 200;
    top: 0;
    left: 0;
  }

  #logo img {
    height: 88px;
  }

  #logo a {
    padding: 0 20px;
    height: 88px;
  }
}

.container {
  margin-top: 20px;
  /* 全体の上部マージンを追加 */
}

h2,
h3 {
  font-size: 1.5rem;
  color: #333;
  /* 見出しの色を指定 */
}

/* フォーム要素のスタイル */
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* ボタンスタイル */
input[type="submit"],
input[type="reset"] {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #0056b3;
}

/* 住所入力フォームスタイル */
.h-adr {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 見出しのスタイル */
.h-adr h3 {
  color: #113052;
  font-size: 1.5em;
  /* フォントサイズを小さく調整 */
}

.p-country-name {
  display: none;
}

/* 郵便番号入力部分のスタイル */
.p-postal-code {
  width: 100px;
}

/* 住所入力部分のスタイル */
.address {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  box-sizing: border-box;
}

/* ホテル名入力部分のスタイル */
#deliveryAddressContainer input:last-child,
#ShipFromAddress input:last-child {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  box-sizing: border-box;
}


.resultContainer {
  background-color: #ecfcde;
  /* エラーのバックグラウンドカラー */
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}


/* 駆動選択横並び */

#powerSelection {
  display: flex;
  flex-direction: column;
  /* 要素を縦に配置する */
}

#powerSelection label {
  display: flex;
  align-items: center;
  /* ラベル内の要素を中央に揃える */
  margin-top: 10px;
  margin-bottom: 10px;
  /* 選択項目の下にマージンを追加 */
}

#powerSelection input[type="radio"] {
  margin-right: 5px;
  /* ラジオボタンとテキストの間隔を調整 */
}

/* 新しいクラスとしてOKマークのスタイルを追加 */
.ok-div {
  color: green;
  font-weight: bold;
  display: none;
}

/* エラー時のスタイルを追加 */
.error {
  border: 1px solid red;
}

/*==================================================
 goTop
===================================*/

.goTop {
  display: block;
  position: fixed;
  bottom: 50px;
  right: 10px;
  width: 50px;
  height: 50px;
  line-height: 48px;
  background-color: #FF9576;
  border-radius: 50%;
  text-align: center;
  -webkit-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
  z-index: 1000;

  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

@media only screen and (min-width: 850px) {
  .goTop {
    bottom: 50px;
    right: 70px;
    width: 60px;
    height: 60px;
    line-height: 60px;
  }
}

.goTop:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.goTop:hover {
  background-color: rgba(255, 149, 118, 0.7);
}

/* .goTop img {} */

/*このクラスが付与されると表示する*/
.active {
  opacity: 1;
  visibility: visible;
}



/*商品説明文と画像*/
.productImage {
  width: 100%;
  /* 画像の幅を画面幅に合わせる */
  height: auto;
  /* 高さは自動調整 */
}

/* タブレット以上の画面幅でのみ適用するメディアクエリ */
@media screen and (min-width: 768px) {
  .productDetails {
    display: flex;
    align-items: center;
    /* 垂直方向の中央揃え */
  }

  .productImageContainer {
    margin-right: 10px;
    /* 画像と説明文の間隔を調整 */
    flex: 0 0 150px;
    /* 画像の固定幅 */
  }

  .productImage {
    width: 100%;
    /* 画像の幅を100%に設定 */
    height: auto;
    /* 高さは自動調整 */
  }

  .productDescription {
    flex: 1;
    /* 残りのスペースを説明文が占める */
  }
}

/* 今すぐ見積もりボタン */
#estimate-section {
  padding: 20px;
  background-color: #f9f9f9;
  margin-top: 1000px;
  /* サンプルとして下に配置 */
}

.estimate-button {
  position: fixed;
  bottom: 20px;
  left: 10px;
  background-color: #ff9900;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

.estimate-button.hidden {
  display: none;
}

/* キャンセルポリシーのアコーディオン */
.accordion-toggle {
  width: 100%;
  padding: 10px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  text-align: left;
}

.accordion-content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #ffffff;
}


/* イメージ横並び */
.main-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.main-content {
  width: 48%;
}

.main-image {
  width: 48%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.main-image2 {
  width: 40%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  align-items: center;
}

/* reverseクラスで左右入れ替え */
.main-section.reverse {
  flex-direction: row-reverse;
}

/* スマホ表示では縦並びに */
@media (max-width: 768px) {
  .main-section {
    flex-direction: column;
    align-items: center;
  }

  .main-content,
  .main-image {
    width: 100%;
  }

  .main-image2 {
    width: 100%;
  }

  .main-section.reverse {
    flex-direction: column;
  }
}


@media screen and (max-width: 768px) {
  #summer-holiday-notice {
    text-align: left;
    padding-left: 24px;
    text-align: left;
    padding: 16px 24px;
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

#summer-holiday-notice {
  background: linear-gradient(to right, #d46b6b 0%, #e15757 20%, #e15757 80%, #da5e5e 100%);
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 14px 20px;
  font-size: 1.05rem;
  border-bottom: 2px solid #c44;
  font-family: 'Helvetica Neue', 'Segoe UI', sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  border-radius: 6px;
  margin: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}


/*日本の時刻*/

.jst-clock {
  display: flex;
  flex-wrap: wrap;
  /* 折り返しを許可 */
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  margin-left: 15px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: .6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  font-size: 0.95rem;
  color: #333;
}

.jst-clock-label {
  flex-basis: 100%;
  /* スマホ時に改行 */
}

.jst-chip {
  padding: .1rem .45rem;
  border: 1px solid #e6e6e6;
  border-radius: .4rem;
  font-size: .8rem;
  line-height: 1;
  color: #555;
  background: #f8f8f8;
}

#japan-datetime {
  background: #4747ff;
  color: #fff;
  padding: .2rem .4rem;
  border-radius: .4rem;
  font-family: monospace;
}

.jst-sub {
  font-size: .8rem;
  color: #777;
}

@media (min-width: 600px) {
  .jst-clock-label {
    flex-basis: auto;
    /* PCでは横並び */
  }
}


/* レンタル価格カードの装飾 */
.rental-price-card {
  background-color: #fcfcfc;
  border: 2px solid #555;
  /* 既存の雰囲気に合わせた落ち着いた色 */
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
  max-width: 320px;
}

.price-header {
  font-size: 0.9rem;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.price-body {
  margin: 10px 0;
  color: #333;
}

.amount {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
}

.currency {
  font-size: 1.5rem;
  vertical-align: super;
  font-weight: bold;
}

.period {
  font-size: 1.1rem;
  color: #666;
}

.deposit-free-tag {
  display: inline-block;
  background-color: #27ae60;
  /* 安心感を与える緑色 */
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 50px;
  margin-top: 10px;
}

.benefit-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
}

.benefit-list li {
  margin-bottom: 8px;
  padding-left: 25px;
  position: relative;
}

.benefit-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: bold;
}

.small-print {
  font-size: 0.8rem;
  color: #888;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

/* 既存の左右比率を固定する補正 */
@media screen and (min-width: 850px) {
  .main-section.reverse {
    display: flex;
    align-items: flex-start;
    /* 上揃えにしてガタつきを防止 */
    gap: 40px;
    /* 左右の余白 */
  }

  .main-section.reverse .main-text {
    flex: 1;
    /* 残りの幅をすべて使う */
  }

  .main-section.reverse .main-image {
    flex: 0 0 45%;
    /* 画像側の幅を45%に固定して圧迫を防ぐ */
    max-width: 45%;
  }
}

/* 画像内の要素調整 */
.main-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.img-disclaimer {
  font-size: 0.75rem;
  color: #999;
  margin-top: 10px;
  line-height: 1.3;
  text-align: center;
}

/* 価格カード等の装飾（前回のものと同じ） */
.rental-price-card {
  background-color: #fcfcfc;
  border: 2px solid #555;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
}

.amount {
  font-size: 2.8rem;
  font-weight: 800;
}

.deposit-free-tag {
  display: inline-block;
  background-color: #27ae60;
  color: #fff;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 50px;
}

.benefit-list {
  list-style: none !important;
  padding: 0 !important;
}

.benefit-list li::before {
  content: '✓';
  color: #27ae60;
  margin-right: 8px;
  font-weight: bold;
}

/* --- レイアウト補正 --- */
@media screen and (min-width: 850px) {
  .main-section.reverse {
    display: flex !important;
    flex-direction: row-reverse !important;
    /* PCで画像を右に */
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 5% !important;
  }

  .main-section.reverse .main-text {
    flex: 0 0 55% !important;
    /* テキスト側を55%に固定 */
    max-width: 55% !important;
  }

  .main-section.reverse .main-image {
    flex: 0 0 40% !important;
    /* 画像側を40%に固定 */
    max-width: 40% !important;
  }
}

/* --- 価格カード --- */
.rental-price-card {
  background-color: #fcfcfc;
  border: 2px solid #555;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
  max-width: 320px;
}

.price-header {
  font-size: 0.9rem;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.price-body {
  margin: 10px 0;
  color: #333;
}

.amount {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
}

.currency {
  font-size: 1.5rem;
  vertical-align: super;
  font-weight: bold;
}

.period {
  font-size: 1.1rem;
  color: #666;
}

.deposit-free-tag {
  display: inline-block;
  background-color: #27ae60;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 50px;
  margin-top: 10px;
}

/* --- リスト・注釈 --- */
.benefit-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
}

.benefit-list li {
  margin-bottom: 8px;
  padding-left: 25px;
  position: relative;
}

.benefit-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: bold;
}

.booking-note {
  font-size: 0.85rem;
  color: #777;
  margin-top: 15px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

/* --- 画像周り --- */
.main-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.img-disclaimer {
  font-size: 0.75rem;
  color: #999;
  margin-top: 10px;
  line-height: 1.3;
  text-align: center;
}

/* スマホ用調整 */
@media screen and (max-width: 849px) {
  .main-section.reverse {
    display: block !important;
  }

  .main-image {
    margin-top: 20px;
    width: 100%;
  }

  .rental-price-card {
    margin: 20px auto;
  }
}

/* 配送用カードの個別装飾 */
.delivery-card {
  border-color: #2980b9 !important;
  /* 青系にして店舗受け取りと区別 */
  background-color: #f0f7ff !important;
}

.delivery-card .price-header {
  color: #2980b9 !important;
}

.delivery-card .deposit-free-tag {
  background-color: #2980b9 !important;
}

/* 配送セクションのレイアウト（PC用） */
@media screen and (min-width: 850px) {
  .main-section:not(.reverse) {
    display: flex !important;
    flex-direction: row !important;
    /* 画像を右に */
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 5% !important;
  }

  .main-section:not(.reverse) .main-text {
    flex: 0 0 55% !important;
  }

  .main-section:not(.reverse) .main-image {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
}

/* 配送カード専用の調整 */
.delivery-card .period {
  font-size: 1rem;
  font-weight: bold;
  color: #2980b9;
  /* 2-Day Packであることを強調 */
}


/* --- 配送セクション共通レイアウト --- */
@media screen and (min-width: 850px) {
  .main-section:not(.reverse) {
    display: flex !important;
    flex-direction: row !important;
    /* 画像を右、テキストを左 */
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 5% !important;
    margin-bottom: 50px;
  }

  .main-section:not(.reverse) .main-text {
    flex: 0 0 55% !important;
    max-width: 55% !important;
  }

  .main-section:not(.reverse) .main-image {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
}

/* --- 配送用価格カードのカラー調整 --- */
.delivery-card {
  border-color: #2980b9 !important;
  /* 清潔感のある青 */
  background-color: #f0f7ff !important;
}

.delivery-card .price-header {
  color: #2980b9 !important;
}

.delivery-card .deposit-free-tag {
  background-color: #2980b9 !important;
}

/* --- 共通：画像と注釈のスタイル --- */
.main-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.img-disclaimer {
  font-size: 0.75rem;
  color: #999;
  margin-top: 10px;
  line-height: 1.4;
  text-align: center;
}

/* スマホ用レスポンシブ */
@media screen and (max-width: 849px) {
  .main-section:not(.reverse) {
    display: block !important;
  }

  .main-image {
    margin-top: 30px;
    width: 100%;
  }

  .delivery-card {
    margin-left: auto;
    margin-right: auto;
  }
}


/* プレミアムカードの装飾 */
.premium-card {
  border-color: #8e44ad !important;
  /* 高貴な紫、または #d4af37 (ゴールド) */
  background-color: #f9f4ff !important;
}

.premium-card .price-header {
  color: #8e44ad !important;
}

.premium-card .deposit-free-tag {
  background-color: #8e44ad !important;
}

/* 既存の左右比率を維持（reverse用） */
@media screen and (min-width: 850px) {
  .main-section.reverse {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: flex-start !important;
    gap: 5% !important;
  }
}

.price-tip {
  background-color: #f8f9fa;
  border-left: 4px solid #007bff;
  padding: 12px;
  margin-top: 15px;
  font-size: 0.9em;
  border-radius: 4px;
}

/* 支払いセクションのボックスデザイン */
.payment-box {
  background-color: #f0f7ff;
  /* 清潔感のある薄い青 */
  border: 1px solid #cce3ff;
  padding: 20px;
  margin: 15px 0;
  border-radius: 8px;
  color: #333;
}

.payment-box ul {
  margin: 10px 0;
  padding-left: 20px;
}

.payment-box li {
  margin-bottom: 5px;
}

.note-text {
  font-size: 0.85em;
  color: #d9534f;
  /* 警告色（赤系）で現金不可を強調 */
  font-weight: bold;
  margin-top: 10px;
}


.card-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  /* グループ間の隙間（少し広めにする） */
  align-items: center;
}

/* グループごとの設定 */
.card-icon-group {
  display: flex;
  align-items: center;
  gap: 12px;
  /* グループ内（ロゴ同士）の隙間 */
}

/* 1. 基本設定（すべてのロゴ共通） */
.card-icon {
  height: 32px;
  width: auto;
  vertical-align: middle;
  object-fit: contain;
}

/* 2. クレジットカード専用（枠・背景・影あり） */
/* pay-logo クラスを持っていない card-icon にだけ適用 */
.card-icon:not(.pay-logo) {
  background-color: #ffffff;
  padding: 2px 6px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 3. Pay系専用（枠なし・背景透明） */
.card-icon.pay-logo {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* 4. Google Payのサイズ大幅アップ */
.card-icon.is-google-pay {
  height: 60px;
  margin-left: -10px;
  margin-right: -10px;
  /* スマホで2行になった時のために上下の余白も削っておく */
  margin-top: -10px;
  margin-bottom: -10px;
}

/* 5. Apple Payも少しだけ調整（お好みで） */
.card-icon[alt="Apple Pay"] {
  height: 36px;
}

/* ヒーローセクション全体 */
.main-visual {
    position: relative;
    width: 100%;
    height: 75vh;
    background: url('img/hero-visual.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* メインコンテンツのコンテナ（背景は透明） */
.mv-content {
    max-width: 90%;
    z-index: 2;
}

/* 1. 大きなタイトル：多重シャドウでパキッと見せる */
.mv-main-title {
    color: #ffffff;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 25px;
    /* 輪郭を強調する影の重ね掛け */
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(0, 0, 0, 0.2);
}

/* 2. 細かなテキスト：すりガラス風のラベル */
.mv-sub-info {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2); /* 白を少し混ぜる */
    backdrop-filter: blur(8px);           /* 背景をぼかす */
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 3. ボタン：すりガラス風で囲むリッチなリンク */
.mv-btn-glass {
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);       /* 黒ベースのすりガラス */
    backdrop-filter: blur(12px);          /* ぼかし強め */
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.mv-btn-glass:hover {
    background: rgba(255, 255, 255, 0.9); /* ホバーで白く反転 */
    color: #333;
    transform: translateY(-3px);
}

/*内部リンクナビ予約誘導強調*/
/* ヘッダーの白抜きボタン */
.nav-btn-reserve {
    background-color: transparent;
    color: #ff9900 !important;
    border: 2px solid #ff9900;
    border-bottom: 2px solid #ff9900 !important; /* ←追加 */
    padding: 8px 18px !important;
    cursor: pointer;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}


/* ホバーした時に色を反転させると、クリックできることが明確になります */
.nav-btn-reserve:hover {
    background-color: #ff9900;
    color: #fff !important;
    text-decoration: none;
}

/* メッセージ入力欄だけを高くする */
.message-area {
    min-height: 180px; /* ここで高さを自由に調整 */
    line-height: 1.6;  /* 長文になるので行間も少し広めがおすすめ */
}

/* スマホでもう少し調整したい場合 */
@media only screen and (max-width: 768px) {
    .message-area {
        min-height: 150px; 
    }
}

/* --- 電動版ヒーローセクション全体 --- */
.main-visual-ev {
    position: relative;
    width: 100%;
    height: 75vh; /* 元の高さ設定を維持 */
    background: url('img/electric-wheelchair-rental.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- コンテンツを包むコンテナ：高さを100%にして絶対配置の基準にする --- */
.mv-content-ev {
    position: relative;
    width: 100%;
    height: 100%; /* 親の75vhいっぱいに広げる */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* これでh2（メインタイトル）が垂直方向の真ん中に来ます */
    text-align: center;
    padding: 0 20px;
}


/* --- メインタイトル：真ん中に配置（共通の装飾を継承） --- */
/* 電動車椅子用：細身でスタイリッシュなスタイル */
.mv-main-title-ev {
    font-weight: 300;           /* 300〜400にすることで細くスタイリッシュに */
    letter-spacing: 0.05em;    /* 少し字間を広げるとより洗練されます */
    z-index: 2;
    margin-bottom: 0;           /* 中央配置を優先 */
    
    /* 共通の多重シャドウが強すぎると細い字が潰れるので、少し軽めに調整 */
    text-shadow: 
        1px 1px 3px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(0, 0, 0, 0.2);
}

/* スマホ表示（768px以下）の設定 */
@media screen and (max-width: 768px) {
    .mv-main-title-ev {
        /* 375pxでも2行に収まるサイズ感（1.8rem〜2.0rem程度） */
        font-size: 2.0rem; 
        line-height: 1.2;
        display: block;
    }

    /* 「Explore Japan」と「Without Boundaries」をそれぞれ1行ずつに死守する */
    .mv-main-title-ev br {
        display: block;
    }
}

/* 375px以下の非常に小さな端末（iPhone SEなど）への配慮 */
@media screen and (max-width: 380px) {
    .mv-main-title-ev {
        font-size: 1.8rem; /* ここまで落とせば確実に2行に収まります */
    }
}

/* PC表示（769px以上）では br を無視して1行にしたい場合 */
@media screen and (min-width: 769px) {
    .mv-main-title-ev br {
        display: none;         /* PCでは1行で長く見せる（お好みで） */
    }
}

/* --- ボタン：画面下部に固定 --- */
.mv-action-bottom {
    position: absolute;
    bottom: 50px; /* 下端から適度な余白 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 100%;
}

/* --- スマホ用調整 --- */
@media screen and (max-width: 768px) {
    .main-visual-ev {
        height: 80vh; /* スマホでは少し高さを出した方が写真が映えます */
    }
    .mv-action-bottom {
        bottom: 30px; /* スマホでは少し位置を上げる */
    }
}

#ev-rental-concept {
    padding: 120px 20px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #f2f6f9 100%);
}

#ev-rental-concept h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.3;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
}

#ev-rental-concept .highlight {
    display: inline-block;
    margin-top: 15px;
    font-size: 0.9em;
    font-weight: 600;
    color: #0077ff;
}

.concept-text {
    margin-top: 40px;
    font-size: 1.15rem;
    color: #444;
    line-height: 1.9;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.shinkansen-info {
    margin-top: 70px;
    padding: 35px 40px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.info-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #0077ff;
    margin-bottom: 15px;
}

.shinkansen-info p {
    font-size: 1rem;
    color: #333;
    line-height: 1.8;
}

#product-spec {
    padding: 100px 0;
    background: #fff;
}

.product-container {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    gap: 20px;
}

@media screen and (min-width: 1050px) {
    .product-container {
        flex-direction: row; /* PCでは横並び */
        align-items: flex-start;
    }
    
    .product-image {
        flex: 1; /* 画像エリアの幅を調整 */
        max-width: 45%;
    }
    
    .product-details {
        flex: 1; /* 説明文エリアの幅を調整 */
    }
}
/* 左側：画像 */
.product-image {
    flex: 1;
    position: sticky; /* スクロールしても画像がついてくる（PCのみ） */
    top: 100px;
}

.product-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* 右側：テキスト */
.product-details {
    flex: 1;
    text-align: left;
}

.section-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.product-intro {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 40px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 50px;
}

.feature-list li {
    margin-bottom: 25px;
    padding-left: 20px;
    border-left: 3px solid #007AFF; /* アクセントカラーの線 */
}

.feature-list strong {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.feature-list span {
    color: #666;
    font-size: 0.95rem;
}

/* スペック表 */
/* --- 商品スペック表専用のリセット & スタイリング --- */

/* 既存の main th / td の設定を打ち消す */
#product-spec .spec-table th,
#product-spec .spec-table td {
    display: table-cell;     /* 強制的にブロック化を解除して横並びにする */
    background-color: transparent; /* オレンジ背景を消す */
    color: #333;             /* 文字色を黒に戻す */
    border-bottom: 1px solid #eee; /* ドット線を細い実線に */
    padding: 12px 0;
    text-align: left;
}

/* ヘッダー列（項目名）の調整 */
#product-spec .spec-table th {
    width: 30%;             /* 項目名の幅を固定 */
    font-weight: bold;
    color: #888;            /* 項目名は少し薄くしてスタイリッシュに */
    background-color: transparent !important; /* 強制的に背景をなしに */
}

/* 値の列の調整 */
#product-spec .spec-table td {
    width: 70%;
    color: #333;
    font-weight: 400;
}

/* 既存の margin-top 20px が邪魔な場合はリセット */
#product-spec .spec-table {
    margin-top: 10px;
    border-collapse: collapse;
    width: 100%;
}

/* スマホ表示でも「横並び」を維持したい場合（スペック表は横並びが読みやすいため） */
@media screen and (max-width: 768px) {
    #product-spec .spec-table th,
    #product-spec .spec-table td {
        display: table-cell !important; /* 既存の display: block を強制上書き */
        font-size: 0.85rem;
    }
}

/* スマホ表示対応 */
@media screen and (max-width: 768px) {
    .product-container {
        flex-direction: column;
    }
    .product-image {
        position: static;
        margin-bottom: 40px;
    }
    .section-title {
        font-size: 1.6rem;
    }
}

#pricing-list {
    padding: 80px 0;
    background: #fff;
    text-align: center;
}

.price-table-container {
    max-width: 600px;
    margin: 40px auto;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.ev-price-table {
    width: 100%;
    border-collapse: collapse;
}

/* 既存のmain th/td を強力に上書き */
#pricing-list .ev-price-table th,
#pricing-list .ev-price-table td {
    display: table-cell !important; /* 横並びを死守 */
    padding: 20px;
    text-align: center;
    background-color: transparent !important;
    color: #333 !important;
    border-bottom: 1px solid #eee;
}

#pricing-list .ev-price-table thead th {
    background-color: #f8f8f8 !important;
    font-weight: bold;
    color: #ed6103 !important; /* オレンジをアクセントに */
    text-transform: uppercase;
    font-size: 0.9rem;
}

.price-val {
    font-weight: 800;
    font-size: 1.2rem;
}

/* スマホでも表を崩さない */
@media screen and (max-width: 768px) {
    #pricing-list .ev-price-table th,
    #pricing-list .ev-price-table td {
        padding: 15px 10px;
        font-size: 0.95rem;
    }
}

#service-areas {
    padding: 60px 0;
    background-color: #fff;
    text-align: center;
}

.area-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
}

.area-item {
    flex: 1;
    max-width: 300px;
    text-align: left;
    background: #f9f9f9;
    padding: 25px;
    border-radius: 12px;
}

.area-item h3 {
    font-size: 1.2rem;
    color: #ed6103; /* オレンジをアクセントに */
    margin-bottom: 15px;
    border-bottom: 2px solid #ed6103;
    display: inline-block;
}

.area-item ul {
    list-style: none;
    padding: 0;
}

.area-item li {
    font-size: 1rem;
    margin-bottom: 8px;
    color: #333;
    position: relative;
    padding-left: 15px;
}

.area-item li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ed6103;
}

.other-areas {
    margin-top: 30px;
    font-size: 0.9rem;
    color: #888;
}

/* スマホ対応：縦に並べる */
@media screen and (max-width: 768px) {
    .area-grid {
        flex-direction: column;
        align-items: center;
    }
    .area-item {
        width: 100%;
    }
}

/* PCでの横並び設定 */
@media screen and (min-width: 851px) {
    .flex-container {
        display: flex;
        align-items: flex-start; /* 上端で揃える */
        justify-content: space-between;
        gap: 40px; /* 料金表と画像の間の余白 */
    }

    .pricing-side {
        flex: 1.2; /* 料金表を少し広めに */
    }

    .trust-side {
        flex: 1;
        margin-top: 80px; /* 料金表のタイトル分の高さを調整して画像の位置を下げる */
    }
}

/* 共通・スマホ用設定 */
#pricing-and-trust {
    padding: 80px 0;
    background-color: #fff;
}

.price-table-container {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.delivery-trust-box {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

@media screen and (max-width: 850px) {
    .flex-container {
        display: block; /* スマホでは縦に並べる */
    }
    .trust-side {
        margin-top: 40px;
    }
}


/* メイン画像の設定*/
.main-image-container img {
    width: 100%;
    height: auto;
    max-height: 350px; /* スマホで見た時の画像の高さを抑える */
    object-fit: contain; /* 画像の比率を保ちつつ枠に収める */
    background-color: #f9f9f9; /* 余白ができる場合に備えて背景色を設定 */
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

/* PC（画面が広い時）は画像の高さ制限を解除、または大きくする */
@media screen and (min-width: 768px) {
    .main-image-container img {
        max-height: 500px; /* PCではもう少し大きく表示 */
    }
}

/* サムネイルリストの設定 */
.thumbnail-list {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto; /* スマホで画像が多い場合に横スクロール可能に */
    padding-bottom: 5px;
}

.thumbnail-list img {
    width: 60px;  /* スマホでは少し小さめに（80pxから60pxへ） */
    height: 60px;
    object-fit: cover;
    border: 2px solid #eee;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .thumbnail-list img {
        width: 80px; /* PCでは元のサイズ */
        height: 80px;
    }
}

/* マウスホップ時と選択中（後述のJSで制御可能）のスタイル */
.thumbnail-list img:hover {
    border-color: #007bff; /* ブランドカラーに合わせて調整 */
}

/* PC等の広い画面での調整 */
@media (min-width: 768px) {
    .thumbnail-list {
        flex-wrap: wrap; /* PCでは折り返して表示 */
        overflow-x: visible;
    }
}

.image-caption {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #f8f9fa; /* 薄いグレーの背景 */
    border-left: 4px solid #7A3202; /* アクセントカラーの線 */
    font-size: 0.95rem;
    color: #333;
    min-height: 3em; /* テキストが入れ替わってもガタつかないように高さを確保 */
    line-height: 1.4;
    border-radius: 0 4px 4px 0;
}

/* 特徴セクション全体のコンテナ */
.product-features {
    padding: 40px 15px;
    max-width: 1100px; /* PCでの広がりすぎを防止 */
    margin: 0 auto;
}

/* グリッドの設定 */
.feature-grid {
    display: grid;
    gap: 30px; /* アイテム同士の隙間 */
}

/* 各アイテム（画像＋テキストのセット） */
.feature-item {
    display: flex;         /* 横並びにする */
    align-items: center;    /* 上下中央揃え */
    gap: 20px;            /* 画像とテキストの間の隙間 */
}

/* 画像の設定 */
.feature-item img {
    flex: 0 0 40%;        /* 画像の幅を40%に固定（大きすぎないように） */
    max-width: 300px;     /* PCで画像が巨大化するのを防ぐ */
    aspect-ratio: 1 / 1;  /* 正方形に統一（4/3などでもOK） */
    object-fit: cover;
    border-radius: 10px;
}

/* テキストの設定 */
.feature-item-text {
    flex: 1;              /* 残りの幅をすべて使う */
}

/* PC（横幅が広い時）の設定：2カラム */
@media screen and (min-width: 850px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr); /* 2カラムにする */
    }
}

/* スマホ・タブレット（横幅が狭い時）の設定：1カラム */
@media screen and (max-width: 849px) {
    .feature-grid {
        grid-template-columns: 1fr; /* 1カラムにする */
    }
    
    .feature-item {
        gap: 15px; /* 隙間を少し狭く */
    }

    .feature-item img {
        flex: 0 0 35%; /* スマホでは画像を少し小さめにしてテキスト領域を確保 */
        max-width: 150px; /* スマホでの最大サイズ制限 */
    }

    .feature-item h4 {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .feature-item p {
        font-size: 0.85rem;
    }
}

/*テキスト見た目調整*/
.ngt-text-block p {
  margin: 0;
  line-height: 1.4;
}
.ngt-text-block p + p {
  margin-top: 4px;
}


/*フッター多言語リンク用*/
.footer-language {
  text-align: center;
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #ddd;
  font-size: 14px;
  color: #666;
}

.footer-language p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #999;
  letter-spacing: 0.5px;
}

.footer-language a {
  color: #333;
  text-decoration: none;
  margin: 0 6px;
  transition: color 0.2s ease;
  font-weight: 500;
}

.footer-language a:hover {
  color: #007bff;
  text-decoration: underline;
}
.footer-language {
  text-align: center;
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #ddd;
  font-size: 14px;
  color: #666;
}

.footer-language p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #999;
  letter-spacing: 0.5px;
}

.footer-language a {
  color: #333;
  text-decoration: none;
  margin: 0 6px;
  transition: color 0.2s ease;
  font-weight: 500;
}

.footer-language a:hover {
  color: #007bff;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .footer-language {
    font-size: 13px;
  }

  .footer-language a {
    display: inline-block;
    margin: 4px 6px;
  }
}
.footer-language a.active {
  font-weight: bold;
  color: #000;
  text-decoration: underline;
}