body {
  margin: 0;
}

#formBg{
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 100vh;
  padding: 0 20px;
  box-sizing: border-box;
}

#formBg::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: url("../img/form_background-sp.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

@media screen and (min-width:1400px) {
  #formBg::before{
    background-image: url("../img/form_background-pc.jpg");
  }
}

/* ======================
  STEPナビ
======================*/
.step-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 1000px;              /* フォーム幅と合わせる */
  margin: 0 auto 12px;
  overflow: hidden;
}

.step-img{
  flex: 0 0 auto;
  width: calc((100% / 9));
  height: auto;
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ★ 現在STEPを基準 */
.step-img.is-current{
  transform: scale(1);
  opacity: 1;
}

/* ★ それ以外は小さく */
.step-img:not(.is-current){
  transform: scale(0.5);
  opacity: 0.6;
}

@media screen and (min-width:1400px) {
  .step-img{
    width: calc(100% / 9);
  }

  .step-img:not(.is-current){
    transform: scale(0.5);
    opacity: 0.6;
  }

  .step-img.is-current{
    transform: scale(1);
    opacity: 1;
  }
}

/* STEP間ドット（画像版） */
.step-dot,
.step-ellipsis{
  flex: 0 0 auto;
  width: calc(100% / 9);        /* ★STEP画像と同じ“枠” */
  aspect-ratio: 1 / 1;
  display: block;

  background-image: url("../img/form-step-dot.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transform: scale(0.5);       /* ★非currentと同じ小ささ */
  opacity: 0.6;

  font-size: 0;
  line-height: 0;
}

@media screen and (min-width:1400px){
  .step-img:not(.is-current),
  .step-dot,
  .step-ellipsis{
    transform: scale(0.5);
  }
}

.step-title{
  text-align: center;
  margin: 0 0 12px;
}


/* =============================
   右下ヨット（固定＋ゆらゆら）
============================= */
#formBg::after{
  content: "";
  position: fixed;
  right: clamp(10px, 2.2vw, 28px);
  bottom: clamp(6px, 1.2vh, 18px);
  z-index: 0;  /* ★フォームより下＝背景扱い */

  width: min(220px, 35vw);
  height: auto;
  aspect-ratio: 1 / 1; /* ざっくり。崩れるなら消してOK */

  background-image: url("../img/form-yacht.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;

  pointer-events: none; /* クリック邪魔せん */
  animation: yachtFloat 3.6s ease-in-out infinite;
  transform-origin: 70% 80%;
  opacity: 0.95;
}

@keyframes yachtFloat{
  0%   { transform: translateY(0) rotate(-1.2deg); }
  50%  { transform: translateY(-12px) rotate(1.2deg); }
  100% { transform: translateY(0) rotate(-1.2deg); }
}


#formWrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 2; /* ★ヨットより上 */
}

@media screen and (min-width: 1400px) {
  #formWrap {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

h1 {
  font-size: 7vw;
  margin-top:0;
}

h2 {
  font-size: 5vw;
}

@media screen and (min-width:1400px) {
  h1{
    font-size:36px;
  }
  h2{
    font-size:24px;
  }
}
.formTable {
    margin-right:auto;
    margin-left:auto;
}

.formTable th {
  font-size: 4vw;
}

.formTable label {
  font-size:4vw;
}

/* =============================
   姓・名を横並びにするUI
============================= */
.name-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* スマホで折り返し */
}

.label-inline{
  font-weight: 700;
  white-space: nowrap;
}

.name-inline .inline-input{
  width: calc(50% - 40px);
  min-width: 120px;
  flex: 0 0 auto;
}
/* =============================
   お名前・フリガナ：PCだけ横並び
============================= */
@media screen and (min-width:1400px){

  .name-inline{
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .name-inline .label-inline{
    white-space: nowrap;
    font-weight: 700;
  }

  .name-inline .inline-input{
    width: auto;
    flex: 1;
  }

}



/* =============================
   formTable 内の入力UIを拡大
============================= */
.formTable input[type="text"],
.formTable input[type="email"],
.formTable input[type="tel"],
.formTable input[type="date"],
.formTable textarea,
.formTable select {
  font-size: 4vw;              /* スマホ：文字大きめ */
  padding: 18px 20px;          /* タップしやすく */
  border-radius: 10px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

.formTable input[type="radio"],
.formTable input[type="checkbox"]{
  transform: scale(1.4);
  margin-right: 8px;
}


@media screen and (min-width:1400px) {
  .formTable th {
    font-size:32px;
  }
  .formTable label {
    font-size:32px;
  }
  .formTable input[type="text"],
  .formTable input[type="email"],
  .formTable input[type="tel"],
  .formTable input[type="date"],
  .formTable textarea,
  .formTable select {
    font-size: 20px;
    padding: 12px 14px;
    border-radius: 6px;
  }
}


/* =========================
   大きいカレンダー（統合版）
   ========================= */

/* input自体は隠して、inlineカレンダーを表示 */
.js-date{
  display:none;
}

/* ===== 基本レイアウト（スマホファースト） ===== */
.flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 18px;
  height: auto !important;
  overflow: visible !important;
  display: inline-block;            /* 高さ計算を安定させる */
  padding-bottom: 18px;             /* 下旬が枠外に出ないよう余白を確保 */
  margin-bottom: 18px;  
}

.flatpickr-innerContainer {
  margin-top:24px;
}

/* 固定高さ・overflow由来の「見切れ/はみ出し」を根絶 */
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.flatpickr-calendar.inline .dayContainer{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
}

/* ===== ヘッダー（見切れ対策） ===== */
.flatpickr-months{
  padding: 10px 12px 14px !important;
  box-sizing: border-box;
  overflow: visible !important;
}

.flatpickr-months .flatpickr-month{
  height: auto !important;
  min-height: 56px; /* 年/月ラベルが見切れない高さ */
  overflow: visible !important;
}

/* 月移動ボタン */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{
  padding: 12px;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg{
  width: 56px !important;
  height: 56px !important;
}

@media screen and (min-width:1400px) {
  .flatpickr-months .flatpickr-prev-month svg,
  .flatpickr-months .flatpickr-next-month svg{
    width: 24px !important;
    height: 24px !important;
  }
}

/* 年/月ラベル（JSで生成する .k2-ym-label 用） */
.k2-ym-label{
  font-size: 5vh;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (min-width:1400px) {
  .k2-ym-label{
    font-size:20px;
  }
}
/* 既存の月/年UIは完全に隠す（「月 年/月」問題を防ぐ） */
.flatpickr-current-month .cur-month,
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-month{
  display: none !important;
}

/* ===== 曜日行（7等分で揃える） ===== */
.flatpickr-weekdays{
  width: 100% !important;
  margin-bottom: 6px;
  height: auto!important;
}
.flatpickr-calendar.inline .flatpickr-weekdays .flatpickr-weekdaycontainer{
  width: 100% !important;
  display: flex;
}
.flatpickr-calendar.inline .flatpickr-weekdays .flatpickr-weekday{
  flex: 0 0 calc(100% / 7);
  font-size: 5vw;
  padding: 12px 0;
}

@media screen and (min-width:1400px) {
  .flatpickr-calendar.inline .flatpickr-weekdays .flatpickr-weekday{
  font-size: 16px;
  }
}

/* ===== 日付グリッド（7等分・比率維持） ===== */
.flatpickr-calendar.inline .dayContainer{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* 日付セル：スマホは正方形寄りでタップしやすく */
.flatpickr-calendar.inline .dayContainer .flatpickr-day{
  flex: 0 0 calc(100% / 7) !important;
  max-width: calc(100% / 7) !important;

  aspect-ratio: 1 / 1;
  min-height: 52px;

  height: auto !important;        /* flatpickr標準の固定heightを無効化 */
  line-height: normal !important; /* 固定line-heightも無効化 */

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

  padding: 0;
  font-size: 5vw;
  border-radius: 10px;
}

@media screen and (min-width:1400px) {
  .flatpickr-calendar.inline .dayContainer .flatpickr-day{
    font-size:18px;
  }
}

.flatpickr-day:hover {
  background: #ced5e9!important;
  border-color: #ced5e9!important;
}

/* 選択時 */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  border-radius: 12px;
}

/* ===== 土日祝の色 ===== */
.flatpickr-day.is-sun,
.flatpickr-day.is-holiday{
  color: #d40000 !important;
}
.flatpickr-day.is-sat{
  color: #0077cc !important;
}

/* 前月/次月は土日祝も薄く */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
  opacity: 0.55;
}
.flatpickr-day.prevMonthDay.is-sun,
.flatpickr-day.nextMonthDay.is-sun,
.flatpickr-day.prevMonthDay.is-holiday,
.flatpickr-day.nextMonthDay.is-holiday{
  color: rgba(212, 0, 0, 0.35) !important;
}
.flatpickr-day.prevMonthDay.is-sat,
.flatpickr-day.nextMonthDay.is-sat{
  color: rgba(0, 119, 204, 0.35) !important;
}

/* ===== PC（1400px以上）：縦に伸びすぎないよう比率固定を解除 ===== */
@media (min-width: 1400px){
  .flatpickr-calendar.inline{
    font-size: 16px;
  }
  .flatpickr-calendar.inline .dayContainer .flatpickr-day{
    aspect-ratio: auto;
    min-height: 46px;
  }
}
/* 白背景（.flatpickr-calendar.animate.inline）を下まで伸ばす */
.flatpickr-calendar.animate.inline{
  background: rgba(255, 255, 255, 0.35);
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  display: inline-block;      /* 高さ計算を安定させる */
  padding-bottom: 18px;       /* 下旬が枠外に出るのを受け止める */
  margin-bottom: 18px;        /* 次へボタンに被らない距離 */
}

/* 中身側の固定高/overflowが残ってると背景だけ伸びないので念押し */
.flatpickr-calendar.animate.inline .flatpickr-innerContainer,
.flatpickr-calendar.animate.inline .flatpickr-rContainer,
.flatpickr-calendar.animate.inline .flatpickr-days,
.flatpickr-calendar.animate.inline .dayContainer{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}



/* 念のため：ボタンがクリック奪われないよう前面に */
.form-buttons{
  position: relative;
  z-index: 10;
}
.flatpickr-calendar{
  z-index: 1;
}

/*---カレンダーここまで---*/


.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0;
}

.choice-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 18px;
  font-size: 4vh;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

@media (min-width: 1400px) {
  .choice-card {
    font-size:24px;
  }
}

.choice-card:hover,
.choice-card.active {
  border-color: #007bff;
  background: #e9f3ff;
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.15);
  transform: translateY(-2px);
}

@media (min-width: 1400px) {
  .choice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================
   カード式セレクト汎用デザイン
============================= */
.card-select {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0;
}

.card-option {
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 14px;
  font-size: 4vh;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

@media screen and (min-width:1400px) {
  .card-option {
    font-size:24px;
  }
}


.card-option:hover,
.card-option.active {
  border-color: #007bff;
  background: #e9f3ff;
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.15);
  transform: translateY(-2px);
}

@media (min-width: 1400px) {
  .card-select {
    grid-template-columns: repeat(2, 1fr);
  }
}

.select-note {
  margin-top:10px;
  color:#db5a5a;
  font-weight:bold;
  font-size:4vw;
  margin-bottom: 50px;
}

@media screen and (min-width:1400px) {
  .select-note {
    font-size: 16px;
    line-height: 2;
  }
}

/* =============================
   ファイルアップロード（カード風）
============================= */
.file-upload-group {
  display: grid;
  gap: 15px;
  margin: 20px 0;
}
.file-card {
  margin: 8px auto;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.file-card:hover {
  background: #f5f9ff;
  border-color: #007bff;
}

.uploaded-list img.thumb {
  max-width: 120px;
  max-height: 120px;
  margin: 6px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* =======================================
   STEP4 添付書類アップロード UI（完全統一）
======================================= */
.drop-zone {
  position: relative;
  border: 2px dashed #bbb;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  background: #fafafa;
  transition: background 0.3s, border-color 0.3s;
  cursor: pointer;
  width: 100%;
  margin: 0 auto 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

@media screen and (min-width:1400px) {
  .drop-zone {
    max-width: 500px;     /* 幅統一 */
    min-height: 150px;
  }
}
.drop-zone.dragover {
  background: #e9f3ff;
  border-color: #007bff;
}

/* ファイル説明テキスト */
.drop-zone p {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  pointer-events: none; /* ドラッグ＆ドロップ時に干渉しない */
}

/* inputを全面オーバーレイ化 */
.drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

/* =============================
   Drop zone 見本画像
============================= */
.drop-samples{
  width:100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  pointer-events: none; /* ←クリックはファイル選択に通す */
}

.drop-sample{
  width: 100%;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.55);
}

@media screen and (min-width:1400px) {
  .drop-sample{
    width: 80%;
  }
 
}

/* プレビュー部分 */
.uploaded-preview {
  margin-top: 10px;
  text-align: center;
  color: #333;
}

.uploaded-preview img.thumb {
  max-width: 120px;
  max-height: 120px;
  margin-top: 6px;
  border: 1px solid #ccc;
  position: relative;
  border-radius: 6px;
}

.uploaded-preview .filename {
  display: block;
  font-size: 0.95rem;
  color: #222;
  background: #f8f8f8;
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: 6px;
  word-break: break-all;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* 削除ボタン（アップロードプレビュー用） */
.uploaded-preview .delete-btn{
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ff6666;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 22px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* もしHTML側が uploaded-name を使ってる場合の保険（不要なら入れなくてOK） */
.uploaded-preview .uploaded-name{
  font-size: 0.95rem;
  color: #333;
  margin-top: 6px;
}

.notice-text {
  color: #d63333;
  font-weight: bold;
  text-align: center;
  margin: 10px 0 20px 0;
  font-size: 0.95rem;
}

/* =======================================
   STEP4 アップロード済みリストの横並び表示
======================================= */
.uploaded-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-top: 15px;
}

.uploaded-item {
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  width: 130px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.uploaded-item .uploaded-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 6px;
}

.uploaded-item img.thumb {
  max-width: 100px;
  max-height: 100px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* 無効化された「次へ」ボタン */
.next-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ff4444;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.delete-btn:hover {
  background: #ff0000;
}
.preview-item {
  position: relative;
  display: inline-block;
  margin: 5px;
}

/* =============================
   STEP4 メッセージ欄を幅いっぱいに
============================= */
.formTable-message {
  width: 100%;
}

.formTable-message td {
  padding: 0;          /* ← 余白を消す */
  width: 100%;
}

.formTable-message textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;
}


/* =============================
   ボタン配置（縦並びで 左→中央→右）
============================= */
.form-buttons {
  display: flex;
  flex-direction: column; /* ✅ 縦並び固定 */
  align-items: stretch;
  gap: 16px;
  width: 100%;
  margin: 30px auto;
}

.prev-btn {
  align-self: flex-start;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 36px 48px;
  font-size: 4vw;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(108, 117, 125, 0.25);
}

.print-btn {
  align-self:flex-end;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 36px 48px;
  font-size: 4vw;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(108, 117, 125, 0.25);
}

.upload-btn {
  align-self: center;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 36px 48px;
  font-size: 4vw;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 123, 255, 0.25);
}

.next-btn {
  align-self: flex-end;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 36px 48px;
  font-size: 4vw;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 123, 255, 0.25);
}

@media screen and (min-width:1400px) {
  /* 戻る：左寄せ */
  .prev-btn {
    border-radius: 6px;
    padding: 12px 26px;
    font-size: 1rem;
  }
  /* アップロード：中央寄せ */
  .upload-btn {
    border-radius: 6px;
    padding: 12px 26px;
    font-size: 1rem;
  }
  /* 次へ：右寄せ */
  .next-btn,
  .print-btn {
    border-radius: 6px;
    padding: 12px 26px;
    font-size: 1rem;
  }
}

/* ホバー効果 */
.prev-btn:hover { background: #868e96; }
.upload-btn:hover, .next-btn:hover { background: #339dff; }

@media print{
  .no-print{
    display:none !important;
  }
  .print-mini {
    font-size:20px;
  }
}

/* =============================
   STEP5（お客様情報）を確認画面風に見やすく
============================= */
.formTable-step5{
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.formTable-step5 th,
.formTable-step5 td{
  border: 1px solid #ddd;
  padding: 14px 16px;
  vertical-align: middle;
  font-size: 4vw;            /* スマホで見やすく */
  line-height: 1.5;
}

/* 左（項目名）を色付きにして区切りを明確に */
.formTable-step5 th{
  width: 34%;
  background: #f3f6ff;
  font-weight: 700;
}

/* 行ごとに薄く色を変えて追いやすく */
.formTable-step5 tr:nth-child(even) td{
  background: #fafafa;
}

/* PC（1400px以上）は文字サイズを固定 */
@media screen and (min-width:1400px){
  .formTable-step5 th,
  .formTable-step5 td{
    font-size: 18px;
  }
}


/* =============================
   STEP6 入力内容確認画面
============================= */
.confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.confirm-table tr{
  display: flex;
  flex-direction: row;
}

/* ===== 最終確認：項目名→内容を縦に（受講料・メッセージ用） ===== */
.confirm-table tr.confirm-vertical-row{
  display: flex !important;
  flex-direction: column !important;
}

.confirm-table tr.confirm-vertical-row > th,
.confirm-table tr.confirm-vertical-row > td{
  width: 100% !important;
  display: block !important;
  text-align: left !important;
}

.confirm-table th,
.confirm-table td {
  display: block;
  width: 100%;
  border-bottom: 1px solid #ddd;
  text-align: center;
  font-size: 4vw;
}

.confirm-table th {
  background: #f3f6ff;
  padding: 10px;
}

.confirm-table td {
  padding: 10px;
}

.confirm-table img.thumb {
  max-width: 100px;
  max-height: 100px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin: 6px;
}

/* =============================
   STEP7：添付ファイル行だけ
   「項目と内容＝縦」「画像＝横」
============================= */
.confirm-table tr.confirm-files-row{
  display: flex !important;
  flex-direction: column !important;  /* ★ th → td を縦に */
}

.confirm-table tr.confirm-files-row > th,
.confirm-table tr.confirm-files-row > td{
  width: 100% !important;
  display: block !important;
  text-align: left;                  /* 見やすく */
}

/* 画像エリア：横並び（折り返しOK） */
.confirm-table tr.confirm-files-row .confirm-file-images{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: flex-start;
}

/* 画像/リンクが縦に落ちないように念押し */
.confirm-table tr.confirm-files-row .confirm-file-images img.thumb,
.confirm-table tr.confirm-files-row .confirm-file-images a{
  display: inline-block !important;
}
.confirm-table tr.confirm-files-row .confirm-file-images{
  justify-content: flex-start !important;
}

.confirm-table tr.confirm-files-row .confirm-file-images img.thumb{
  flex: 0 0 auto;
}
/* =============================
   STEP7（確認/印刷）添付ファイル：縦ラベル＋横レイアウト
============================= */
.confirm-table tr.confirm-files-row > th,
.confirm-table tr.confirm-files-row > td{
  display: block;
  width: 100%;
}

.confirm-files-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ブロック（=ラベルごと）を横に並べる */
.confirm-file-group{
  flex: 1 1 260px;                 /* ある程度幅があれば横に並ぶ */
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  background: #fafafa;
  page-break-inside: avoid;         /* 印刷で途中分割されにくくする */
}

.confirm-file-label{
  font-weight: 700;
  margin-bottom: 8px;
}

/* ブロック内の画像は横並び */
.confirm-file-images{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}



@media screen and (min-width:1400px) {
  .confirm-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .confirm-table th,
  .confirm-table td {
    padding: 12px 16px;
    vertical-align: middle;
    text-align: left;
    font-size: 18px;
  }

  .confirm-table th {
    width: 30%;
    background: #f1f5ff;
    color: #333;
    font-weight: bold;
  }

  .confirm-table td {
    color: #222;
    margin-bottom: 0;
  }
}

@media print {
  .confirm-table th,
  .confirm-table td {
    font-size:20px;
  }
  /* 画像サイズは印刷で少し小さくしてA4に収めやすく */
  .confirm-file-group{
    flex: 1 1 48%;                  /* 2列に寄せて縦長を抑える */
  }
  .confirm-file-images img.thumb{
    max-width: 90px !important;
    max-height: 90px !important;
    margin: 0 !important;
  }

  /* =============================
   印刷時：添付画像が縦に落ちる対策（最終上書き）
  ============================= */
  /* グリッド（ラベル枠）自体は横並びを維持 */
  .confirm-files-grid{
    display: block !important; /* flexが怪しい環境対策 */
  }
  .confirm-file-group{
    display: inline-block !important;
    vertical-align: top;
    width: 48% !important;     /* 2列 */
    box-sizing: border-box;
    margin: 0 8px 10px 0;
  }

  /* 画像だけは確実に横並び */
  .confirm-file-images{
    display: block !important; /* flexを捨てる */
    font-size: 0 !important;   /* inline-blockの隙間消し */
  }
  .confirm-file-images img.thumb,
  .confirm-file-images a{
    display: inline-block !important;
    vertical-align: top;
    margin: 0 6px 6px 0 !important;
    font-size: 12px;           /* a用（font-size:0の戻し） */
  }

}

/* =============================
   STEP6 確認画面の画像サイズ調整
============================= */
.thumb {
  max-width: 100px !important;
  max-height: 100px !important;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin: 4px;
}

/* 振込先ブロック内の行も念のため左寄せ */
.confirm-table td .yucho-box div,
.confirm-table td .bank-info div,
.confirm-table td .payment-info div {
  text-align: left !important;
}