/* ================================
   全ページ共通：横幅固定
================================ */
.cw-site-container {
  max-width: 1100px;   /* ← 基準幅（おすすめ） */
  margin: 0 auto;
  padding: 0 16px;     /* スマホ余白 */
  box-sizing: border-box;
}

cw-site-container

.form-result-wrapper {
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1100px;
  margin: auto;
}

.form-area, .result-area {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #ccc;
  flex: 1;
  min-width: 300px;
}

/*--ラジオボタン用---*/

.radio-group {
    display: flex;
    gap: 70px;     /* ← 間隔を広げる */
    margin-top: 5px;
  }

  .custom-radio {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
  }

  .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  .checkmark {
    position: absolute;
    left: 0;
    top: 3px;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
    border: 2px solid #ccc;
    transition: all 0.3s ease;
  }

  .custom-radio:hover .checkmark {
    background-color: #ddd;
  }

  .custom-radio input:checked ~ .checkmark {
    background-color: #3399ff;
    border-color: #0077cc;
  }

  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  .custom-radio input:checked ~ .checkmark:after {
    display: block;
  }

  .custom-radio .checkmark:after {
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
  }
/*ホテル情報表示用レイアウト調整（左15文字幅で折り返し）*/
.hotel-info-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.hotel-info-name {
  flex: 0 0 15em; /* 全角15文字相当の幅を確保 */
  word-break: break-word;
}

.hotel-info-details {
  flex: 1;
  padding-left: 10px;
}

/* モバイル対応（横幅が狭くなったら縦並び） */
@media screen and (max-width: 600px) {
  .flight-form-grid {
    flex-direction: column;
  }
}
/* モバイル対応（センタリング） */
.center-wrapper {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.center-box {
  background: #f8f8f8;
  padding: 20px;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*モバイル対応　手動入植　空港プルダウンメニュー*/
@media screen and (max-width: 600px) {
  #departure_airport {
    width: 100%;
  }
}

/*航空会社名を改行させない*/
#flight-info-content strong {
  white-space: nowrap;
}
/*更新ボタンとfooterの距離を話す*/
.button-wrapper {
  margin-bottom: 50px; /* ⬅️ この余白で離す！ */
  text-align: center;  /* ⬅️ 中央揃えもOK */
}

.confirm-button {
  padding: 15px 30px;
  background: linear-gradient(to right, #0073aa, #003d80);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.full-width-border {
  border: none;
  border-top: 3px solid blue;
  width: 100%;
  margin: 0 auto;
}
/*送迎時間の最終確認部分（青点滅）*/
.full-width-border {
  border: none;
  border-top: 3px solid blue;
  width: 100%;
  margin: 0 auto;
}
.blinking-text {
  color: #007BFF; /* 青 */
  font-size: 22px; /* 大きめ */
  text-align: center;
  animation: blink 1.2s step-start infinite;
}
/*スマホ表示（折りたたみ）*/
@media (max-width: 600px) {
  .flight-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* 📅+⏰ ブロックの中をフラットにしないと制御できない */
  .flight-layout > div:nth-child(1) {
    display: contents;
    order: 1; /* このグループの内容がバラけて扱えるように */
  }

  .flight-layout > div:nth-child(2) {
    order: 2;
    width: 100% !important;
  }

  #arrival-date-block {
    order: 1;
    width: 30%;
  }

  #flight-number-block {
    width: 100%;
  }

  #flight-info-box {
    width: 100%;
  }

  #meeting-time-block {
    order: 3;
    width: 30%;
    margin-top: 10px;
  }
}

.taxi-spinner {
  width: 60px;
  height: 60px;
  font-size: 40px;
  animation: spin 1.5s linear infinite;
  margin: 0 auto;
  text-align: center;
}
/* 検索待ち時間 */
#loading-spinner {
  position: fixed;         /* 画面全体の中央に固定 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;           /* 最前面に出す */
  background: rgba(255, 255, 255, 0.7); /* 薄白背景もOK（任意） */
  padding: 30px;
  border-radius: 12px;
  display: none;
}
/*一回り大きく（例：40px → 60px に拡大）*/
@keyframes spin {
  0%   { transform: rotate(0deg)   translateX(60px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}
/*トップページ予約処理ボタン*/
.reservation-button {
        background: linear-gradient(135deg, #0066cc, #003366);
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        padding: 14px 30px;
        border-radius: 8px;
        border: none;
        width: 330px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
      }

      .reservation-button:hover {
        background: linear-gradient(135deg, #0055aa, #002244);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
        transform: translateY(-2px);
      }

/* モバイルでのみ日付・時刻のラベル改行を防ぐ */
@media screen and (max-width: 768px) {
    /* ラベルの親要素をFlexboxにして、ラベルと入力フィールドを縦に並べる */
    .date-time-input-block {
        display: flex;
        flex-direction: column; /* 縦並び */
        align-items: flex-start; /* 左寄せ */
    }

    /* ラベルが改行しないように設定 */
    .date-time-input-block label {
        white-space: nowrap; /* テキストの折り返しを防ぐ */
        /* 必要に応じて右側に少し余白を持たせると、絵文字とテキストが詰まりすぎるのを防げます */
        padding-right: 5px; 
    }

    /* 入力フィールドの幅が親要素に合わせて100%になるように */
    .date-time-input-block input {
        width: 100%;
        box-sizing: border-box; /* paddingとborderをwidthに含める */
    }
}

/* オプション選択ページの３カラム指定 */

.option-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.option-wrapper .option-box {
  flex: 0 1 calc(33.333% - 20px);
  background: #f0f0fa;
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
}


/*==============================================
  全体的な情報ブロックのスタイル（出発地、送迎詳細）
==============================================*/

/* 出発地情報のブロック */
.origin-info-block {
    max-width: 600px; /* fare-info-wrapperと同じ幅に合わせる */
    width: 100%;
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
    margin-top: 10px; /* 上のh3からの余白 */
    padding: 5px 10px; /* 左右の余白 */
    text-align: center; /* テキストを中央寄せ */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

.origin-info-block .origin-text {
    font-size: 1em;
    color: #333;
    line-height: 1.5;
    word-break: keep-all; /* 日本語の単語の途中での改行を防ぐ */
    white-space: normal; /* 通常の改行を許可 */
}

/*==============================================
  送迎詳細と運賃情報セクションのレイアウト
  PCは中央寄せ横並び、モバイルで2カラム2段、各項目は左寄せ
==============================================*/

/* 最外のラッパー（PCでのFlexbox、モバイルでのGridの親） */
.fare-info-wrapper {
    display: flex; /* ✅ PC表示: デフォルトでFlexbox（横並び） */
    justify-content: center; /* ✅ PCで中央寄せ */
    align-items: flex-start; /* 上揃え */
    gap: 20px; /* 左右カラム間の間隔（PC） */
    margin-top: 20px;
    
    /* ボーダーと余白（h3のインラインスタイルから移動を推奨） */
    border-bottom: 1px solid #ccc; 
    padding-bottom: 10px; 

    /* 全体の幅の調整（はみ出し防止） */
    max-width: 600px; /* 例として600px。フォームの最大幅などに合わせる。 */
    width: 100%; /* 親要素の幅いっぱいに広がる */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    padding-left: 10px; /* 左右に少し余白 */
    padding-right: 10px; 
    
    /* ✅ 全体の中央寄せ (max-widthと組み合わせることで機能します) */
    margin-left: auto; 
    margin-right: auto;
}

/* 左右それぞれのカラムとなる.fare-grid要素 (PCでのFlexアイテム) */
.fare-grid {
    flex-shrink: 1; /* 縮小を許可 */
    min-width: 0; /* Flexアイテムの最小幅を0に設定し、コンテンツがはみ出すのを防ぐ */
    text-align: left; /* 内部テキストを左寄せ */
    /* PCではfare-grid自体はFlexアイテムとして機能し、縦並びにはしません */
}

/* 各情報行のスタイル */
.fare-item {
    white-space: nowrap; /* テキストの改行を防ぐ */
    overflow-x: hidden; /* はみ出したテキストを隠す */
    text-overflow: ellipsis; /* はみ出したら省略記号 (...) を表示 */
    padding-right: 5px; /* 必要であれば少し右余白 */
    text-align: left; /* 各アイテムも左寄せを徹底 */
}


/* --- モバイル対応 (768px以下) --- */
@media screen and (max-width: 768px) { 
    .fare-info-wrapper {
        display: grid; /* ✅ モバイルではGridレイアウトに切り替える */
        grid-template-columns: 1fr 1fr; /* 2つのカラムを均等幅にする */
        grid-template-rows: auto auto; /* 2つの行を自動調整 */
        gap: 10px 10px; /* 行と列のギャップを詰める */
        justify-items: start; /* ✅ Gridアイテムをグリッドセル内で左寄せを徹底 */

        /* モバイルでの幅と余白 */
        max-width: 100%; /* 画面幅いっぱいに広がる */
        padding-left: 10px; /* 左余白 */
        padding-right: 10px; /* 右余白 */
        margin-left: auto; /* ✅ モバイルでも中央寄せを維持 */
        margin-right: auto; /* ✅ モバイルでも中央寄せを維持 */
    }

    /* 各fare-gridはモバイルではdisplay: contents; を使うことで、その中の fare-item が Grid アイテムとなる */
    .fare-grid {
        display: contents; /* ✅ これで fare-item が .fare-info-wrapper の直接の子として扱われ、Grid配置可能に */
    }

    /* モバイルでの配置: 各 fare-item を直接Gridセルに配置 */
    /* 送迎時間 (左カラムの1つ目) */
    .left-fare-grid .fare-item:nth-child(1) {
        grid-column: 1 / 2; /* 1列目 */
        grid-row: 1 / 2; /* 1行目 */
    }
    /* 運賃区分 (右カラムの1つ目) */
    .right-fare-grid .fare-item:nth-child(1) {
        grid-column: 2 / 3; /* 2列目 */
        grid-row: 1 / 2; /* 1行目 */
    }
    /* 定額区分 (左カラムの2つ目) */
    .left-fare-grid .fare-item:nth-child(2) {
        grid-column: 1 / 2; /* 1列目 */
        grid-row: 2 / 3; /* 2行目 */
    }
    /* 定額料金 (右カラムの2つ目) */
    .right-fare-grid .fare-item:nth-child(2) {
        grid-column: 2 / 3; /* 2列目 */
        grid-row: 2 / 3; /* 2行目 */
    }
}

/* 🌍 言語スイッチャー */
.lang-switcher {
  text-align: center;
  margin-bottom: 25px;
}

.lang-switcher .lang-btn {
  background: #ffffff;
  border: 1px solid #ccc;
  color: #444;
  padding: 8px 18px;
  margin: 0 6px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.lang-switcher .lang-btn:hover {
  background: #f0f0f0;
}

.lang-switcher .lang-btn.is-active {
  background: #0078ff;
  color: #fff;
  border-color: #0078ff;
  box-shadow: 0 2px 6px rgba(0,120,255,0.4);
}

#lang-switcher .lang-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.2s ease;
}

#lang-switcher .lang-btn.is-active {
  opacity: 1;
  transform: scale(1.1);
}

#lang-switcher .lang-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}
#lang-switcher .lang-btn {
    width: 2.2rem;          /* だいたい「50%サイズ」イメージ */
    height: 2.2rem;
    border-radius: 999px;   /* まん丸 */
    border: none;
    font-size: 1.3rem;      /* 絵文字を少し小さめに */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  #lang-switcher .lang-btn:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background: #f9fafb;
  }

  #lang-switcher .lang-btn.is-active {
    box-shadow: 0 0 0 2px #2563eb;
    background: #e0edff;
    transform: translateY(-1px) scale(1.08);
  }


/* ==============================
   共通スタイル統一（全ページ）
   ============================== */

/* 外側背景 */
.cw-resv-page {
  background: #B6CED6 !important;  /* ← スクショの濃い青 */
  padding: 32px 0;
}

/* 中枠（全ページ共通） */
.cw-resv-inner {
  max-width: 680px !important;     /* ← 全ページ統一 */
  margin: 0 auto;
  padding: 24px;
  border-radius: 12px;
  background: #F0F8FF !important;  /* 内側の薄い青（既存と同じ） */
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* 横幅無限拡大対策（select-option 対応） */
.option-wrapper,
.form-result-wrapper,
.result-area,
.form-area {
  max-width: 680px !important;
  margin: 0 auto !important;
}


/* スマホで少しだけ左右に余裕 */
@media (max-width: 768px) {
  .cw-resv-inner {
    margin: 0 10px;
    padding: 18px 16px 22px;
  }
}

/* =====================================
   🛬 Manual Flight Input - Airport radio
   PC & SP 共通：横並び
===================================== */

.manual-airport-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  white-space: nowrap;   /* 折り返し防止 → 常に横並び */
}

.manual-airport-wrap input.manual-airport {
  margin: 0;
}

/* page-session-confirm.php 用 */
.cw-passenger-block {
  margin: 16px 0 24px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f5fbff;      /* 薄い水色の背景 */
  border: 1px solid #c5e0ff; /* うすい青の枠線 */
}

.cw-passenger-input label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.cw-passenger-input input[type="number"] {
  max-width: 90px;
  padding: 4px 6px;
}

.cw-passenger-note {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #666;
}


.cw-addoption-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.cw-addoption-row > div {
  flex: 0 1 calc(33.333% - 20px);
}

@media (max-width: 768px) {
  .cw-addoption-row {
    flex-direction: column;
  }
  .cw-addoption-row > div {
    flex: 1 1 100%;
  }
}

    .cw-vehicle-class-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .cw-vehicle-class-badge {
    display: inline-block;
    background: #0073aa;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
  }
  .cw-vehicle-class-name {
    font-weight: 600;
  }
  .cw-vehicle-class-price {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #d35400;
  }

  .cw-vehicle-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 6px;
  }
  .cw-vehicle-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fafafa;
  }
  .cw-img-label {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
  }

  .cw-vehicle-meta {
    margin: 0 0 4px;
    padding-left: 18px;
  }
  .cw-vehicle-meta li {
    list-style: disc;
    font-size: 13px;
  }
  .cw-meta-note {
    font-size: 11px;
    color: #666;
  }

  .cw-vehicle-luggage-note {
    font-size: 12px;
    margin-top: 4px;
    color: #444;
  }
  .cw-vehicle-luggage-note summary {
    cursor: pointer;
    font-weight: 600;
    color: #0073aa;
    text-decoration: underline;
  }
  .cw-vehicle-luggage-note summary:hover {
    color: #005177;
  }
  .cw-vehicle-luggage-inner {
    margin-top: 4px;
    background: #f8f8f8;
    padding: 4px 6px;
    border-radius: 3px;
  }

  /* 「車種クラスの見出し」と上ボックスの間に余白 */
  .cw-option-block {
    margin-top: 20px;
  }

  /* 追加オプション：PC は 3 カラム / スマホは縦並び */
.cw-addoption-row > div {
  flex: 0 1 calc(33.333% - 20px);
}
@media (max-width: 768px) {
  .cw-addoption-row {
    flex-direction: column;
  }
  .cw-addoption-row > div {
    flex: 1 1 100%;
  }
}


/* ラジオボタン + カード */
.cw-vehicle-class-card {
  display: block;
  cursor: pointer;
}
.cw-vehicle-class-card input[type="radio"] {
  margin: 0 8px 6px 0;   /* 見出しの左に自然に付くように */
}

/* カード本体 */
.cw-vehicle-class-inner {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
}

/* ヘッダー行（クラスバッジ／名前／価格） */
.cw-vehicle-class-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.cw-vehicle-class-badge {
  display: inline-block;
  background: #0073aa;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}
.cw-vehicle-class-name {
  font-weight: 600;
}
.cw-vehicle-class-price {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #d35400;
}

/* 写真は常に「外観・内装」を横並び＋中央寄せ */
.cw-vehicle-images {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cw-vehicle-image {
  flex: 1 1 0;
  max-width: 260px;
}
.cw-vehicle-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #fafafa;
}

/* 以下は今まで通りでOK（メタ情報・荷物詳細など） */
.cw-vehicle-meta {
  margin: 0 0 4px;
  padding-left: 18px;
}
.cw-vehicle-meta li {
  list-style: disc;
  font-size: 13px;
}
.cw-meta-note {
  font-size: 11px;
  color: #666;
}
.cw-vehicle-luggage-note {
  font-size: 12px;
  margin-top: 4px;
  color: #444;
}
.cw-vehicle-luggage-note summary {
  cursor: pointer;
  font-weight: 600;
  color: #0073aa;
  text-decoration: underline;
}
.cw-vehicle-luggage-note summary:hover {
  color: #005177;
}
.cw-vehicle-luggage-inner {
  margin-top: 4px;
  background: #f8f8f8;
  padding: 4px 6px;
  border-radius: 3px;
}
/* ラジオボタンをカードの中の左上に固定する */
.cw-vehicle-class-card {
  display: block;
  position: relative;  /* ← これで子要素を絶対配置できる */
}

.cw-vehicle-class-card input[type="radio"] {
  position: absolute;
  top: 10px;     /* 上からの余白：お好みで調整可 */
  left: 10px;    /* 左からの余白：お好みで調整可 */
  margin: 0;
  z-index: 2;
}

/* ラジオボタンと重ならないようにカード内側に余白を足す */
.cw-vehicle-class-inner {
  padding: 12px 14px 10px 44px;  /* 上 右 下 左 */
}

/* カード全体（今まで通り） */
.cw-vehicle-class-card {
  display: block;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: relative;
}

/* 🔴 ネイティブのラジオボタンは完全に隠す（レイアウトに影響させない） */
.cw-vehicle-class-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* カード本体の見た目はここで調整 */
.cw-vehicle-class-inner {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

/* 選択されているカードの枠と影を少し強く */
.cw-vehicle-class-card input[type="radio"]:checked + .cw-vehicle-class-inner {
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0,115,170,0.25);
}

/* バッジも強調（ここが “選択スイッチ” の見た目になる） */
.cw-vehicle-class-card input[type="radio"]:checked
  + .cw-vehicle-class-inner
  .cw-vehicle-class-badge {
  background: #0073aa;
  color: #fff;
}

/* ▼ 車種クラスカード：スマホ1列 / PC2列 ＋ 横幅を固定して中央寄せ */
.cw-vehicle-class-wrap {
  display: grid;
  grid-template-columns: 1fr;     /* スマホ：1列 */
  gap: 16px;
  margin: 16px auto 0;            /* 上余白＋左右 auto で中央寄せ */
  max-width: 880px;               /* ★ オレンジ枠とほぼ同じ幅に制限（必要なら 900〜960 で微調整） */
  padding: 0 10px;
  box-sizing: border-box;
}

.world-lang-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  padding: 12px 6px;

  /* 🔽 ここが今回の変更点（自然になじむ背景） */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  backdrop-filter: blur(4px); /* 半透明ページに合う */
}

.flag-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  font-size: 11px;
  transition: 0.15s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.flag-link:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.flag {
  font-size: 16px;
}
.flag-label {
  white-space: nowrap;
}
.cw-price-note{
  margin-left:6px;
  font-size:12px;
  color:#666;
  white-space:nowrap;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .flag-link { font-size: 10px; padding: 3px 7px; }
  .flag { font-size: 14px; }
}

@media (min-width: 900px) {
  .cw-vehicle-class-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* PC：2列、はみ出さないよう minmax(0,1fr) */
  }
}

#opt-breakdown {
  display: none !important;
}

/*                       */
.world-lang-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  padding: 12px 6px;

  /* 🔽 ここが今回の変更点（自然になじむ背景） */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  backdrop-filter: blur(4px); /* 半透明ページに合う */
}

.flag-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  font-size: 11px;
  transition: 0.15s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.flag-link:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.flag {
  font-size: 16px;
}
.flag-label {
  white-space: nowrap;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .flag-link { font-size: 10px; padding: 3px 7px; }
  .flag { font-size: 14px; }
}

/*        */
     

    .cw-final-quote-btn {
      display:inline-block;
      padding: 8px 20px;
      border-radius: 999px;
      border: 1px solid #0ea5e9;
      background:#e0f2fe;
      color:#075985;
      font-size:14px;
      font-weight:500;
      cursor:pointer;
      box-shadow:0 2px 5px rgba(15,23,42,0.15);
      transition:0.15s ease;
    }
    .cw-final-quote-btn:hover {
      background:#bfdbfe;
      transform:translateY(-1px);
      box-shadow:0 4px 8px rgba(15,23,42,0.2);
    }
    .cw-final-quote-btn:active {
      transform:translateY(1px);
      box-shadow:0 1px 3px rgba(15,23,42,0.2);
      opacity:0.95;
    }

    .cw-final-confirm-btn {
      display: inline-block;
      padding: 12px 28px;
      border-radius: 999px;
      border: none;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.03em;
      cursor: pointer;
      background: linear-gradient(135deg, #0ea5e9, #2563eb);
      color: #fff;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
      transition:
        transform 0.15s ease-out,
        box-shadow 0.15s ease-out,
        opacity 0.15s ease-out;
    }
    .cw-final-confirm-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(37, 99, 235, 0.45);
      opacity: 0.95;
    }
    .cw-final-confirm-btn:active {
      transform: translateY(1px);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
      opacity: 0.9;
    }

    .cw-final-cancel-btn {
      display:inline-block;
      padding: 10px 22px;
      border-radius: 999px;
      border: 1px solid #9ca3af;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      cursor: pointer;
      background: #f9fafb;
      color: #374151;
      box-shadow: 0 2px 5px rgba(15,23,42,0.12);
      transition:
        transform 0.15s ease-out,
        box-shadow 0.15s ease-out,
        background-color 0.15s ease-out,
        opacity 0.15s ease-out;
    }
    .cw-final-cancel-btn:hover {
      background:#e5e7eb;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(15,23,42,0.18);
    }
    .cw-final-cancel-btn:active {
      transform: translateY(1px);
      box-shadow: 0 1px 3px rgba(15,23,42,0.18);
      opacity:0.9;
    }
 
    
/*スマホ用　短縮文　*/
.tr-short{display:none;}
.tr-long{display:inline;}

@media (max-width:768px){
  .tr-short{display:inline;}
  .tr-long{display:none;}
}


.world-lang-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      justify-content: center;
      padding: 12px 6px;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      backdrop-filter: blur(4px);
    }

    .flag-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      background: #ffffff;
      border-radius: 999px;
      text-decoration: none;
      color: #111827;
      font-size: 11px;
      transition: 0.15s ease;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    }

    .flag-link:hover {
      transform: translateY(-1px) scale(1.05);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .flag {
      font-size: 16px;
    }
    .flag-label {
      white-space: nowrap;
    }

    @media (max-width: 600px) {
      .flag-link { font-size: 10px; padding: 3px 7px; }
      .flag { font-size: 14px; }
    }
/* ============================
   スマホだけ 三段表示 page-final-confirmation-initial.php
============================ */
/* スマホのみ三段表示 */
@media screen and (max-width: 768px) {

  .fare-line {
    text-align: center;
  }

  .fare-line-1 {
    display: block;
    font-size: 1.1em;
    color: #444;
  }

  .fare-line-2 {
    display: block;
    font-size: 0.95em;
    color: #666;
    margin-top: 2px;
  }

  .fare-line-3 {
    display: block;
    font-size: 1.6em;
    font-weight: 800;
    margin-top: 6px;
    color: #d32f2f;
  }
}
/* =========================
   PC（デフォルト）
========================= */

.fare-line {
  text-align: center;
  margin: 10px 0;
}

/* h3 相当 */
.fare-line-1,
.fare-line-2 {
  font-size: 1.5em;      /* h3 相当 */
  font-weight: 600;
  color: #444;
}

/* 金額はさらに大きく */
.fare-line-3 {
  font-size: 1.8em;      /* 強調 */
  font-weight: 800;
  color: #d32f2f;
  margin-left: 6px;
}
/* =========================
   スマホ（3段表示）
========================= */
@media screen and (max-width: 768px) {

  .fare-line {
    text-align: center;
  }

  /* ① 地域＋定額運賃 */
  .fare-line-1 {
    display: block;
    font-size: 1.5em;      /* h3 */
    font-weight: 600;
    color: #444;
    line-height: 1.25;     /* ← 行間を詰める */
    margin-bottom: 2px;   /* ← ここ重要（狭く） */
  }

  /* ②（片道・昼間） */
  .fare-line-2 {
    display: block;
    font-size: 1.0em;      /* h3 */
    font-weight: 500;
    color: #555;
    line-height: 1.25;     /* ← 行間を詰める */
    margin-top: 0;
    margin-bottom: 4px;   /* ← 今までの約1/2 */
  }

/* PCはフル */
.cw-label-full  { display:inline; }
.cw-label-short { display:none; }

/* PCは今まで通り：1行で詰める */
.cw-label{
  white-space: nowrap;
}
/* スマホだけ：EN/FR等の定額運賃を読みやすく整形（PCは影響なし） */
@media (max-width: 480px){
  .cw-fare-desc{
    margin:10px 0 2px !important;
    font-size:1.15em !important;   /* 説明は少し小さめ */
    line-height:1.2;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  .cw-fare-amt{
    margin:0 0 10px !important;
    font-size:1.55em !important;   /* 金額は大きめ */
    line-height:1.1;
    white-space:nowrap;            /* 金額は折らない */
  }
}

/* スマホだけ：左ラベルを2段OKにする */

/* ===== PCは従来：左右1行 ===== */
.cw-amt-row { display:flex; justify-content:space-between; }
.cw-amt-label { white-space:nowrap; }
.cw-amt-val { white-space:nowrap; text-align:right; }

/* ===== スマホだけ：ラベル → 次行に金額（右寄せ） ===== */
@media (max-width: 480px){
  .cw-amt-row{
    display:flex !important;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:4px 0;
  }

  .cw-amt-label{
    flex:1 1 100%;
    white-space:normal !important;
    line-height:1.15;
    word-break:break-word;
    overflow-wrap:anywhere;
  }

  .cw-amt-val{
    flex:0 0 auto;
    margin-left:auto;
    text-align:right;
    white-space:nowrap;
  }

  /* 割引の「%」と「(JPY...)」はスマホでも1段表示 */
  .cw-disc-pct,
  .cw-disc-amt{
    display:inline;
    white-space:nowrap;
    font-weight:normal;
    font-size:0.95em;
  }
}

/* 区切り線（横一本） */
.cw-note-divider{
  width:100%;
  max-width:480px;
  margin:10px auto 0;
  border-top:1px solid #ddd;
}

/* 全体は現状通り中央寄せ（料金区分はこのまま） */
.cw-note-box{
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}

/* ※有料道路… だけはスマホでも左寄せにする */
@media (max-width: 480px){
  .cw-note-toll{
    text-align:left !important;
  }
}


  /* ③ 金額（サイズは触らない） */
  .fare-line-3 {
    display: block;
    margin-top: 4px;      /* ← 今までの約1/2 */
    line-height: 1.2;     /* 念のため */
  }
}

/* ================================
   Campaign Banner
================================ */

.cw-campaign-banner {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cw-campaign-inner {
  text-align: center;
}

.cw-campaign-normal{
  background:#eff6ff;
  border:1px solid #93c5fd;
  border-radius:10px;
  padding:10px 12px;

  text-align: center;        /* ← 追加 */
  margin: 0 auto;            /* ← 念のため */
  max-width: 720px;          /* ← 見た目安定 */
}



/* 外枠：ここを基準（原点）にする */
.cw-style-crawl {
    margin: 14px auto;
    max-width: 500px;
    width: calc(100% - 24px);
    overflow: hidden; /* ★枠外にはみ出た文字を隠す */
    border: 1px solid #fb923c;
    background: #fff7ed;
    border-radius: 12px;
    position: relative; /* ★アニメーションの基準点 */
}

/* 動く中身：2段・センタリング */
.cw-crawl-inner {
    display: flex;
    flex-direction: column;
    align-items: center; /* 上下段をセンターで揃える */
    padding: 10px 0;
    white-space: nowrap;
    width: 100%;
    
    /* アニメーション：枠内だけで動かす */
    animation: cw-crawl-anim 15s linear infinite;
}

/* 1段目・2段目の共通設定 */
.crawl-title, .crawl-details {
    text-align: center;
    width: 100%;
}

/* アニメーションの修正 */
@keyframes cw-crawl-anim {
    0%   { transform: translateX(100%); }  /* ★枠の右端ギリギリからスタート */
    100% { transform: translateX(-100%); } /* 左端へ消えていく */
}

/* ホバーで停止 */
.cw-style-crawl:hover .cw-crawl-inner {
    animation-play-state: paused;
}

/* ================================
   Campaign Banner 強制センタリング
================================ */

.campaign-banner-box {
  max-width: 520px;
  width: 100%;
  margin: 16px auto !important; /* ← ここが最重要 */
  box-sizing: border-box;
}

/* 親が flex / grid でも中央に来る保険 */
.campaign-banner-box {
  align-self: center;
  justify-self: center;
}
/* ================================
   Free Badge
================================ */
.cw-free-badge{
  color:#e53935 !important;
  font-weight:700;
  background:transparent !important;

  /* 下線・下ボーダーを完全に殺す */
  text-decoration:none !important;
  text-decoration-line:none !important;
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;

  padding:0 !important;
  margin-left:6px;
}

.world-lang-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  padding: 12px 6px;

  /* 🔽 ここが今回の変更点（自然になじむ背景） */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  backdrop-filter: blur(4px); /* 半透明ページに合う */
}

.flag-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  font-size: 11px;
  transition: 0.15s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.flag-link:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.flag {
  font-size: 16px;
}
.flag-label {
  white-space: nowrap;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .flag-link { font-size: 10px; padding: 3px 7px; }
  .flag { font-size: 14px; }
}
/* =========================================
   PC：2カラム維持
========================================= */
.cw-mail-2col td{
  width:50%;
  vertical-align:top;
}

/* =========================================
   📱 スマホ：縦2段表示
========================================= */
@media screen and (max-width: 768px){

  .cw-mail-2col,
  .cw-mail-2col tbody,
  .cw-mail-2col tr,
  .cw-mail-2col td{
    display:block !important;
    width:100% !important;
  }

  .cw-mail-2col td{
    border-right:none !important;
    border-bottom:1px solid #eef2f7;
  }

  .cw-mail-2col td:last-child{
    border-bottom:none;
  }
}
/* =========================================
   📱 Final Confirmation：スマホ1カラム化
========================================= */
@media screen and (max-width:768px){

  /* display:grid を強制上書き */
  div[style*="grid-template-columns:1fr 1fr"]{
    display:block !important;
  }

  /* 左右カラム */
  div[style*="grid-template-columns:1fr 1fr"] > div{
    width:100% !important;
    border-right:none !important;
  }

  /* 下側カードに区切り線 */
  div[style*="grid-template-columns:1fr 1fr"] > div + div{
    border-top:1px solid #eee !important;
  }
}

.world-lang-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  padding: 12px 6px;

  /* 🔽 ここが今回の変更点（自然になじむ背景） */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  backdrop-filter: blur(4px); /* 半透明ページに合う */
}

.flag-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  font-size: 11px;
  transition: 0.15s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.flag-link:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.flag {
  font-size: 16px;
}
.flag-label {
  white-space: nowrap;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .flag-link { font-size: 10px; padding: 3px 7px; }
  .flag { font-size: 14px; }
}
/* 金額が表示されるエリアの揺れを止める */
#total-price, #deposit-amount, #pay-outward, #pay-return {
    display: inline-block;
    min-height: 1.2em; /* 文字1行分の高さを常に確保 */
    min-width: 50px;   /* 数字が入る幅を確保 */
    line-height: 1.2;
    vertical-align: bottom;
}

.cw-money{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  white-space:nowrap;
}

.cw-money-num{
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1;
}

.cw-money-unit{
  margin-left:0;
}

.option-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.option-label{
  flex:1 1 auto;
  min-width:0;
  line-height:1.4;
  word-break:break-word;
}

.option-price{
  flex:0 0 auto;
  white-space:nowrap;
  text-align:right;
}

/* ===== 復路・金額行のスマホ折返し調整 ===== */
.cw-amt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cw-amt-label {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.4;
}

.cw-amt-val {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  text-align: right;
}

/* スマホだけ少し詰める */
@media (max-width: 768px) {
  .cw-amt-row {
    gap: 8px;
  }

  .cw-amt-label {
    font-size: 14px;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .cw-amt-val {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/*　page-final-confirmation-inital.php*/

@media only screen and (max-width: 768px){

  .cw-line{
    display:block !important;
  }

  .cw-line .l{
    width:100% !important;
  }

  .cw-line .txt{
    display:block !important;
    text-align:left !important;
  }

  .cw-line .r{
    width:100% !important;
    text-align:right !important;
    margin-top:4px;
  }

}

@media (max-width: 768px){

  .cw-line .r{
    width:100%;
    text-align:right;
  }

  .cw-line .pct{
    text-align:right;
  }

  .cw-line .amt{
    text-align:right;
  }

}
@media (max-width: 768px){

  .cw-line .r{
    width:100%;
    display:flex;
    justify-content:flex-end;  /* ←これが効く */
    gap:12px;
  }

}

@media (max-width: 768px){

  .cw-pay-row{
    display:block;
    margin:6px 0;
  }

  .cw-pay-row .label{
    display:block;
    text-align:left;
    line-height:1.5;
  }

  .cw-pay-row .value{
    display:block;
    text-align:right;
    margin-top:2px;
    font-weight:bold;
  }

  /* 総合計だけ少し強調 */
  .cw-total .value{
    font-size:1.1em;
  }

}

/*page-serect-option.php*/
@media only screen and (max-width: 768px){

  .cw-line{
    display:block !important;
  }

  .cw-line .l{
    width:100% !important;
  }

  .cw-line .txt{
    display:block !important;
    text-align:left !important;
  }

  .cw-line .r{
    width:100% !important;
    text-align:right !important;
    margin-top:4px;
  }

}

@media (max-width: 768px){

  .cw-line .r{
    width:100%;
    text-align:right;
  }

  .cw-line .pct{
    text-align:right;
  }

  .cw-line .amt{
    text-align:right;
  }

}

@media (max-width: 768px){

  .cw-line .r{
    width:100%;
    display:flex;
    justify-content:flex-end;
    gap:12px;
  }

}
/* page-serect-option.php内の選択内容送信ボタン*/

.cw-submit-btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 1.1em;
  background: linear-gradient(145deg, #008cff, #006fd6);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;

  /* 立体 */
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);

  /* アニメーション */
  transition: all 0.15s ease;
}

/* ホバー */
.cw-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.3);
}

/* 押した時（へこむ） */
.cw-submit-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* 中央安定用（保険） */
.cw-submit-btn {
  margin: 0 auto;
}

.cw-submit-btn:active {
  transform: translateY(2px) scale(0.98);
}

@media (max-width: 768px){
  .cw-submit-btn{
    width: 90%;
    font-size: 1.2em;
    padding: 16px;
  }
}
/*送信ボタンここまで*/
/*page-final-confirmation-inital.php*/
/*表示調整（項目と金額を2段にする）*/
@media (max-width: 768px){

  .cw-amt-row {
    display: block !important;
    width: 100% !important;
    padding: 8px 0 !important;
  }

  .cw-amt-row .l,
  .cw-amt-row .r {
    display: block !important;
    width: 100% !important;
  }

  .cw-amt-row .l {
    text-align: left !important;
    margin: 0 0 4px 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  .cw-amt-row .r {
    text-align: right !important;
    margin: 0 !important;
  }

}
@media (max-width: 768px){

  .cw-pay-row{
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
  }

  .cw-pay-row .label{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.5 !important;
  }

  .cw-pay-row .value{
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin: 0 !important;
    line-height: 1.5 !important;
  }

}

/*総合計の注釈対応*/

@media (max-width: 768px){

  .cw-total .label{
    font-size: 1em !important;
    line-height: 1.4 !important;
  }

  .cw-total .label-sub{
    display: block !important;
    font-size: 0.72em !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin-top: 2px !important;
    color: #666 !important;
  }

  .cw-total .value{
    margin-top: 8px !important;
    font-size: 1.15em !important;
    text-align: right !important;
  }

}

/*page-manual-input.php用　表示CSS*/

.cw-page-title{
      text-align:center;
      margin:16px 0 16px;
      font-size:1.9em;
      line-height:1.35;
      font-weight:700;
    }

    .cw-langbar-fixed{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      gap:8px 12px;
      padding:10px 6px;
      min-height:60px;
      background:rgba(255,255,255,0.8);
      border:1px solid #e5e7eb;
      border-radius:10px;
      backdrop-filter:blur(4px);
      box-sizing:border-box;
      margin:0 0 14px;
    }

    .flag-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      background: #ffffff;
      border-radius: 999px;
      text-decoration: none;
      color: #111827;
      font-size: 11px;
      transition: 0.15s ease;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    }

    .flag-link:hover {
      transform: translateY(-1px) scale(1.05);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .flag {
      font-size: 16px;
    }

    .flag-label {
      white-space: nowrap;
    }

    .cw-btn-wrap {
      text-align: center;
      margin-top: 24px;
    }

    .cw-btn-primary {
      appearance: none;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, #ff9800, #ff5722);
      border-radius: 999px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.25);
      transition: all 0.2s ease;
    }

    .cw-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(0,0,0,0.35);
      background: linear-gradient(135deg, #ffa726, #ff7043);
    }

    .cw-btn-primary:active {
      transform: translateY(0);
      box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    }

    .cw-btn-primary span {
      white-space: nowrap;
    }

    @media (max-width: 600px) {
      .cw-page-title{
        font-size:1.35em;
        line-height:1.45;
        margin:14px 0 14px;
      }

      .cw-langbar-fixed{
        gap:6px 8px;
        padding:8px 6px;
        min-height:56px;
      }

      .cw-btn-primary {
        width: 100%;
        justify-content: center;
        font-size: 15px;
        padding: 14px 20px;
      }

      .flag-link {
        font-size: 10px;
        padding: 3px 7px;
      }

      .flag {
        font-size: 14px;
      }
    }

    /*  page-session-confirm.php　　   */


.world-lang-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  padding: 12px 6px;

  /* 🔽 ここが今回の変更点（自然になじむ背景） */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  backdrop-filter: blur(4px); /* 半透明ページに合う */
}

.flag-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  font-size: 11px;
  transition: 0.15s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.flag-link:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.flag {
  font-size: 16px;
}
.flag-label {
  white-space: nowrap;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .flag-link { font-size: 10px; padding: 3px 7px; }
  .flag { font-size: 14px; }
}

/* PCのみ表示（session右説明文） */
@media (max-width: 768px) {
  .pc-only-session-right {
    display: none !important;
  }
}
.cw-session-box{
  max-width: 680px;
  margin: 40px auto;
  padding: 30px;
  background: #f0f8ff;
  border-radius: 12px;
  box-sizing: border-box;
}
/*--page-verify-auth-code.php--*/
/*表示内容*/
.world-lang-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  padding: 12px 6px;

  /* 🔽 ここが今回の変更点（自然になじむ背景） */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  backdrop-filter: blur(4px); /* 半透明ページに合う */
}

.flag-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  font-size: 11px;
  transition: 0.15s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.flag-link:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.flag {
  font-size: 16px;
}
.flag-label {
  white-space: nowrap;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .flag-link { font-size: 10px; padding: 3px 7px; }
  .flag { font-size: 14px; }
}

.cw-verify-auth-box{
  max-width: 680px;
  margin: 40px auto;
  padding: 30px;
  background: #f0f8ff;
  border-radius: 12px;
  box-sizing: border-box;
  }

  /* =====================================================
   フォーム目的の説明ボックス（全ページ共通）
===================================================== */
.cw-caption-box{
  margin:10px 0 18px;
  padding:12px 16px;
  background:#e0f2ff;
  border:1px solid #bfdbfe;
  border-radius:12px;
  font-size:14px;
  color:#0f172a;
  line-height:1.7;
  text-align:left;
  box-sizing:border-box;
}

.cw-caption-title{
  margin:0 0 6px;
  font-weight:bold;
}

.cw-caption-text{
  margin:0;
}

.cw-caption-text + .cw-caption-text{
  margin-top:2px;
}

/* PCでは長文表示 */
.tr-short{
  display:none;
}

/* スマホでは短文表示 */
@media (max-width: 768px){
  .cw-caption-box{
    padding:10px 12px;
    font-size:13px;
    line-height:1.6;
  }

  .tr-long{
    display:none !important;
  }

  .tr-short{
    display:inline !important;
  }
}

@keyframes fireflyBlink {
  0%   { background-color: #fff3b0; }
  50%  { background-color: #ffffff; }
  100% { background-color: #fff3b0; }
}

.cw-blink-row {
  animation: fireflyBlink 1s ease-in-out 5;
}