/* =========================================================
   Contact Form 7 Modern Layout（必須・任意タグ対応）
   ========================================================= */

/* ------------------------------
   1) 全体レイアウト
------------------------------ */
/* asc-card 内の留守止めフォームカード調整 */
.asc-card.contact-flow {
  /* もし asc-card ベースで padding が弱い場合の上書き用（好みで調整） */
  padding: 24px 20px;
}

/* asc-card 内の cf7-modern 幅をフルに */
.asc-card.contact-flow .cf7-modern {
  width: 100%;
  max-width: 980px;
  margin: 24px auto 0;
}

.cf7-modern {
  width: 85%;
  max-width: 980px;
  margin: 0 auto 48px;
  --label-w: 220px;
}

@media (max-width: 768px) {
  .cf7-modern {
    width: 100%;
    padding: 0 auto;
    --label-w: auto;
  }
}

/* ------------------------------
   2) 行レイアウト
------------------------------ */
.f-row {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

/* ラベル */
.f-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-weight: 700;
  line-height: 1.6;
  word-break: break-word;
  justify-content: flex-start;
}

/* 必須・任意タグ */
.req,
.opt {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 0.45em 0.6em;
  border-radius: 999px;
  font-weight: 700;
  min-width: 2.8em;
  text-align: center;
  white-space: nowrap;
  margin-right: 10px;
}

.req {
  background: var(--vk-color-primary);
  color: #fff;
}

.opt {
  background: #ccc;
  color: #fff;
}

/* 入力欄 */
.f-ctrl {
  width: 100%;
}

.f-ctrl p {
  margin-bottom: 5px;
}

/* 補足テキスト */
.f-help {
  margin: 6px 0 8px;
  color: #777;
  font-size: 13px;
}

.f-help a {
  color: var(--vk-color-primary);
  text-decoration: underline;
  font-weight: 600;
}

.f-help a:hover {
  opacity: 0.75;
}

/* ------------------------------
   3) 入力部品
------------------------------ */
.mf-text,
.mf-date,
.mf-area {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  padding: 12px 14px;
  font-size: 16px;
  box-sizing: border-box;
}

.mf-area {
  min-height: 140px;
  line-height: 1.7;
}

.mf-text:focus,
.mf-date:focus,
.mf-area:focus {
  outline: none;
  border-color: var(--vk-color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vk-color-primary) 28%, transparent);
}

/* ラジオ・チェック */
.mf-radio .wpcf7-list-item,
.mf-check .wpcf7-list-item {
  margin-right: 16px;
}

.mf-radio input,
.mf-check input {
  accent-color: var(--vk-color-primary);
}

/* ------------------------------
   4) カレンダー（Flatpickr インライン）
------------------------------ */
.inline-calwrap {
  position: relative;
}

/* 外枠を入力ボックスと合わせる */
.inline-calendar {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

/* Flatpickr本体のラッパー調整 */
#cal-range .flatpickr-calendar.inline {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#cal-range .flatpickr-calendar {
  border: 0;
  box-shadow: none;
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
}

#cal-range .flatpickr-innerContainer {
  display: inline-flex;
}

/* 日セル共通（休マーク用に基準化） */
#cal-range .flatpickr-day {
  position: relative;
}

/* 祝日装飾（選択可） */
#cal-range .flatpickr-day.holiday {
  color: #c62828 !important;
  background: rgba(229, 57, 53, 0.2) !important;
}

/* 選択範囲の見た目 */
#cal-range .flatpickr-day.inRange,
#cal-range .flatpickr-day.startRange,
#cal-range .flatpickr-day.endRange {
  background: var(--vk-color-primary-vivid) !important;
  border-color: var(--vk-color-primary-vivid) !important;
  color: #fff !important;
}

/* 単日（開始＝終了の同日） */
#cal-range .flatpickr-day.startRange.endRange,
#cal-range .flatpickr-day.selected:not(.inRange) {
  background: var(--vk-color-primary-vivid) !important;
  border-color: var(--vk-color-primary-vivid) !important;
  color: #fff !important;
}

/* 影のつなぎリセット */
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 transparent;
  box-shadow: -10px 0 0 transparent;
}

/* 今日強調 */
#cal-range .flatpickr-day.today {
  border-color: var(--vk-color-primary-vivid) !important;
}

/* ホバー時（選択範囲） */
#cal-range .flatpickr-day.inRange:hover,
#cal-range .flatpickr-day.startRange:hover,
#cal-range .flatpickr-day.endRange:hover {
  filter: brightness(1.02);
}

/* モバイル時（横幅調整） */
@media (max-width: 768px) {
  .inline-calendar {
    width: 100%;
    padding: 10px 12px;
  }

  .inline-calendar .flatpickr-calendar {
    width: 100%;
  }
}

/* ============================
   曜日別カラーリング
============================ */
#cal-range .flatpickr-day.sunday:not(.selected):not(.inRange):not(.startRange):not(.endRange) {
  color: #e53935 !important;
}

#cal-range .flatpickr-day.saturday:not(.selected):not(.inRange):not(.startRange):not(.endRange) {
  color: #1e88e5 !important;
}

/* 祝日（未選択時） */
#cal-range .flatpickr-day.holiday:not(.selected):not(.inRange):not(.startRange):not(.endRange) {
  color: #e53935 !important;
}

/* ============================
   クリック不可セル
============================ */
/* JS側で .is-blocked を付けたセル */
#cal-range .flatpickr-day.is-blocked {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .45;
}

/* disabled / 前月 / 来月セルは真っ白で統一 */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  background: #fff !important;
  color: #ccc !important;
  border-color: #fff !important;
  cursor: default !important;
}

/* ============================
   休刊日マーク「休」
============================ */
#cal-range .offday-mark {
  position: absolute;
  inset: 0; /* セルいっぱい */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: rgba(229, 57, 53, 0.4) !important;
  pointer-events: none;
}

/* ------------------------------
   カレンダー凡例
------------------------------ */
.calendar-legend {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 16px;
  font-size: 14px;
}

.calendar-legend .legend-item {
  display: inline-block;
  margin: 0;
  white-space: nowrap;
  line-height: 1;
}

/* アイコンと文字を同じ高さに */
.calendar-legend .legend-item span {
  vertical-align: middle;
  margin-top: -3px;
}

/* 祝日：赤丸 */
.legend-dot {
  display: inline-block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(229, 57, 53, 0.4);
  margin-right: 4px;
}

/* 休刊日：「休」文字だけ */
.legend-kikan {
  display: inline-block;
  font-weight: 700;
  font-size: 21px;
  color: rgba(229, 57, 53, 0.4);
  margin-right: 2px;
  line-height: 1;
}

/* ------------------------------
   5) 終了日未定ボタン
------------------------------ */
#btn_noend {
  display: inline-block;
  margin-top: 10px;
  padding: .6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f8f8f8;
  color: #666;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#btn_noend:hover {
  background: #eee;
  border-color: #d0d0d0;
}

#btn_noend:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
  border-color: #c8c8c8;
}

#btn_noend:active {
  background: #e9e9e9;
  border-color: #cfcfcf;
}

/* 無効時 */
#btn_noend[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  background: #f5f5f5;
  color: #888;
}

@media (max-width: 768px) {
  #btn_noend {
    width: 100%;
  }
}

/* ------------------------------
   6) 朝刊・夕刊モーダル
------------------------------ */
.cf7-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.cf7-modal[aria-hidden="false"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf7-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(2px);
}

.cf7-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 12px;
  min-width: 280px;
  max-width: 92vw;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
  margin: 0;
}

#edition-title {
  margin: 2px 0 12px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #222;
  padding-bottom: 10px;
  position: relative;
}

.cf7-modal__desc {
  margin: .25rem 0 1rem;
  color: #333;
  text-align: center;
}

/* ボタン行：横並びを強制 */
.cf7-modal__actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: .5rem;
}

.cf7-modal__actions > * {
  margin: 0 !important;
}

.cf7-modal__actions p,
.cf7-modal__actions br {
  display: contents !important;
}

/* モーダル内ボタン（朝刊／夕刊） */
.cf7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--vk-color-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .14);
  transition: background .15s, transform .1s, box-shadow .15s;
}

.cf7-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.cf7-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

/* disabled 視覚化 */
.cf7-btn[disabled] {
  background: #dcdcdc !important;
  color: #9a9a9a !important;
  box-shadow: none !important;
  cursor: not-allowed;
  filter: none !important;
  transform: none !important;
}

/* 閉じる(X) */
.cf7-modal__close {
  position: absolute;
  right: .35rem;
  top: .35rem;
  width: 28px;
  height: 28px;
  font-size: 20px;
  background: transparent;
  border: 0;
  color: #888;
  border-radius: 6px;
}

.cf7-modal__close:hover {
  background: #f3f3f3;
  color: #555;
}

/* ------------------------------
   7) 区切り線・同意・ボタン・メッセージ
------------------------------ */
.mf-sep {
  border: 0;
  height: 1px;
  background: #eee;
  margin: 24px 0;
}

.privacy-wrap {
  margin: 8px 0 16px;
}

.privacy-note {
  color: #333;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

.privacy-note a {
  color: var(--vk-color-primary);
  text-decoration: underline;
}

.privacy-check {
  display: block;
  margin-top: 8px;
  text-align: center;
}

.privacy-check input {
  accent-color: var(--vk-color-primary);
}

.mf-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  text-align: center;
}

.mf-btn {
  background: #fff;
  color: var(--vk-color-primary);
  border: 2px solid var(--vk-color-primary);
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}

.mf-btn:hover {
  background: var(--vk-color-primary);
  color: #fff;
}

/* CF7スピナー */
.mf-actions .wpcf7-spinner {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  opacity: 0;
  transition: opacity .2s;
}

.wpcf7 form.submitting .mf-actions .wpcf7-spinner {
  width: 24px !important;
  height: 24px !important;
  margin-left: 8px !important;
  opacity: 1;
}

/* レスポンスメッセージ枠 */
.wpcf7-response-output {
  margin: 16px 0 0;
  border-color: #ffbaba;
}

/* ------------------------------
   8) モバイル最適化（フォーム）
------------------------------ */
@media (max-width: 768px) {
  .f-row {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .f-label {
    line-height: 1.5;
  }

  .mf-text,
  .mf-date,
  .mf-area {
    font-size: 16px;
  }

  .mf-radio .wpcf7-list-item,
  .mf-check .wpcf7-list-item {
    margin-right: 12px;
  }
}

/* ------------------------------
   9) エラー時の入力欄
------------------------------ */
.wpcf7 .wpcf7-form-control.wpcf7-not-valid {
  background: #fff7f7;
  border-color: #e06666 !important;
  box-shadow: 0 0 0 2px rgba(229, 57, 53, .06);
}

/* ラップは通常フロー */
.wpcf7 .wpcf7-form-control-wrap {
  position: static;
  display: block;
}

/* ピル型メッセージ */
.wpcf7 .wpcf7-not-valid-tip {
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.2;
  background: #fde8e8;
  color: #b71c1c;
  border: 1px solid #f2b7b7;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
  text-align: right;
  float: right;
  clear: both;
  pointer-events: none;
  animation: cf7-tip-fade .18s ease-out;
}

.wpcf7 .wpcf7-not-valid-tip::before {
  content: "⚠";
  font-size: 1.05em;
}

.wpcf7 .mf-radio + .wpcf7-not-valid-tip,
.wpcf7 .mf-check + .wpcf7-not-valid-tip {
  margin-top: 8px;
}

/* スマホ時エラーメッセージ */
@media (max-width: 480px) {
  .wpcf7 .wpcf7-not-valid-tip {
    max-width: 100%;
    white-space: normal;
    float: none;
    display: inline-block;
  }
}

/* 下部の大きいメッセージは非表示 */
.wpcf7 form.invalid .wpcf7-response-output {
  display: none !important;
}

/* エラーメッセージのアニメーション */
@keyframes cf7-tip-fade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------
   10) 確認画面用スタイル
------------------------------ */
/* dt/dd の余白リセット */
.cf7-modern .confirm-table .c-row dt,
.cf7-modern .confirm-table .c-row dd {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6;
}

/* dt/dd 内の p, ul, ol のマージンを潰す */
.cf7-modern .confirm-table .c-row dt > p,
.cf7-modern .confirm-table .c-row dd > p,
.cf7-modern .confirm-table .c-row dt > ul,
.cf7-modern .confirm-table .c-row dd > ul,
.cf7-modern .confirm-table .c-row dt > ol,
.cf7-modern .confirm-table .c-row dd > ol {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Multi-step プラグイン用の保険 */
.cf7-modern .confirm-table .c-row .wpcf7mstep-value {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6;
}

/* 行レイアウト */
.cf7-modern .confirm-table .c-row {
    display: grid;
    /* 入力画面と同じラベル幅変数を利用 */
    grid-template-columns: var(--label-w) minmax(0, 1fr);
    gap: 24px;
    padding: 10px 0;
    align-items: center;
    /* ボーダー色も border 用の変数に寄せておく */
    border-bottom: 1px solid var(--vk-color-border, #eee);
}


/* 複数行OKな行（例：お問い合わせ内容） */
.cf7-modern .confirm-table .c-row.is-multi dd {
  white-space: pre-wrap;
  align-self: start;
}

/* 通常行は1行で表示 */
.cf7-modern .confirm-table dd {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ボタン行：1個でも2個でも中央寄せ */
.cf7-modern .mf-actions {
  display: flex !important;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.cf7-modern .mf-actions br {
  display: none;
}

.cf7-modern .mf-actions > * {
  margin: 0 !important;
}

/* 共通ボタン体裁（確認画面用） */
.cf7-modern .mf-actions .mf-btn,
.cf7-modern .mf-actions input[type="submit"],
.cf7-modern .mf-actions input[type="button"],
.cf7-modern .mf-actions button {
  min-width: 200px;
  padding: 12px 20px;
  margin: 10px 12px;
  border-radius: 6px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

/* 修正ボタン（previous／ghost） */
.cf7-modern .mf-actions .wpcf7mstep-previous,
.cf7-modern .mf-actions .mf-btn.ghost {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #bdbdbd !important;
}

/* 送信ボタン（プライマリ） */
.cf7-modern .mf-actions input[type="submit"],
.cf7-modern .mf-actions .mf-btn:not(.ghost) {
  background: var(--vk-color-primary, #e53935) !important;
  color: #fff !important;
  border: none !important;
}

.cf7-modern .mf-actions input[type="submit"]:hover,
.cf7-modern .mf-actions .mf-btn:not(.ghost):hover {
  opacity: .92;
}

/* 確認テーブルのモバイル対応 */
@media (max-width: 640px) {
  .cf7-modern .confirm-table .c-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
    align-items: start;
  }

  .cf7-modern .confirm-table dt {
    font-size: 14px;
    font-weight: 700;
    white-space: normal;
  }

  .cf7-modern .confirm-table dd {
    font-size: 14px;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
  }

  .cf7-modern .confirm-table .c-row.is-multi dd {
    line-height: 1.8;
  }

  .cf7-modern .mf-actions {
    justify-content: stretch;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .cf7-modern .mf-actions .mf-btn,
  .cf7-modern .mf-actions input[type="submit"],
  .cf7-modern .mf-actions input[type="button"],
  .cf7-modern .mf-actions button {
    width: 90%;
    min-width: auto;
  }
}

/* ------------------------------
   11) CF7 が自動挿入する <br> を消す
------------------------------ */
.cf7-modern br {
  display: none !important;
}