/* 案内ページ（七五三の一日の流れ・撮影の流れ・よくある質問・ご利用規約）とオプション一覧 */
.gd-lead { font-size: 16px; line-height: 2; margin: 0 0 8px; }
.gd-sec { font-size: 20px; margin: 44px 0 16px; padding-left: 12px; border-left: 3px solid var(--plum); }
.gd-note { font-size: 13px; color: var(--ink-2); background: var(--band); border-radius: var(--radius); padding: 12px 14px; }
.gd-list { padding-left: 1.2em; }
.gd-list li { margin: 6px 0; }

/* お任せいただけること */
.gd-cards { display: grid; gap: 12px; }
.gd-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.gd-card__title { font-size: 17px; margin: 0 0 4px; color: var(--plum); }
.gd-card__title::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .45em; border-radius: 50%; background: var(--plum); vertical-align: .12em; }
.gd-card p { margin: 0; }

/* 流れ：番号つきの縦の線 */
.gd-steps { counter-reset: gd-step; margin: 8px 0 20px; }
.gd-step { position: relative; padding: 0 0 22px 52px; counter-increment: gd-step; }
.gd-step::before { content: counter(gd-step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--plum); color: var(--white); font: 700 16px/36px var(--mincho); text-align: center; }
.gd-step:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--plum-soft); }
.gd-step__title { font-size: 17px; margin: 4px 0 4px; }
.gd-step p { margin: 0; }

/* 料金表：スマホでは横にスクロール */
.gd-table { margin: 12px 0 20px; overflow-x: auto; }
.gd-table table { min-width: 480px; }
.gd-table th, .gd-table td { text-align: center; white-space: nowrap; }
.gd-table tbody th { text-align: left; }
.gd-table figcaption { text-align: left; font-weight: 700; font-size: 14px; color: var(--ink); margin: 0 0 6px; caption-side: top; order: -1; }
.gd-table { display: flex; flex-direction: column; }

/* 2列の表（特定商取引法の表記など）：スマホは見出しの下に説明 */
.gd-def { margin: 12px 0 24px; }
.gd-def th, .gd-def td { text-align: left; vertical-align: top; padding: 10px 12px; line-height: 1.8; }
.gd-def th { width: 30%; font-weight: 700; }
@media (max-width: 599px) {
  .gd-def tr, .gd-def th, .gd-def td { display: block; width: auto; }
  .gd-def th { border-bottom: 0; padding-bottom: 6px; }
  .gd-def tr + tr th { border-top: 0; }
}

/* よくある質問：開閉 */
.gd-faq { border-bottom: 1px solid var(--line); }
.gd-faq summary { cursor: pointer; list-style: none; position: relative; padding: 14px 32px 14px 34px; font-weight: 700; }
.gd-faq summary::-webkit-details-marker { display: none; }
.gd-faq summary::before { content: "Q"; position: absolute; left: 4px; top: 13px; font: 700 17px var(--mincho); color: var(--plum); }
.gd-faq summary::after { content: "+"; position: absolute; right: 8px; top: 12px; font-size: 20px; color: var(--ink-2); transition: transform .2s; }
.gd-faq[open] summary::after { transform: rotate(45deg); }
.gd-faq > p { margin: 0 0 14px; padding: 0 8px 0 34px; position: relative; }
.gd-faq > p::before { content: "A"; position: absolute; left: 4px; top: 0; font: 700 17px var(--mincho); color: var(--gold-deep); }

/* ボタン */
.gd-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }
.entry__body .gd-btn .wp-block-button__link, .gd-btns > .btn { display: inline-block; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--plum); background: var(--white); color: var(--plum); text-decoration: none; font-weight: 700; font-size: 14px; }
.entry__body .gd-btn--gold .wp-block-button__link { background: var(--btn); border-color: var(--btn); color: var(--ink); }

/* オプション一覧 */
.op-list { list-style: none; margin: 16px 0; padding: 0; border-top: 1px solid var(--line); }
.op-list__link { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.op-list__name { font-weight: 700; }
.op-list__price { font: 700 15px var(--mincho); color: var(--gold-deep); text-align: right; white-space: nowrap; }
.op-list__desc { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); }

@media (min-width: 768px) {
  .gd-cards { grid-template-columns: repeat(2, 1fr); }
  .entry__body .gd-btn .wp-block-button__link, .gd-btns > .btn { padding: 12px 28px; }
}
@media (min-width: 1024px) {
  .gd-cards { grid-template-columns: repeat(3, 1fr); }
}

/* ご予約ページ：選択式プランで選んだ内容 */
.bk-sel { background: var(--plum-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 28px; }
.bk-sel__title { font-size: 18px; margin: 0 0 10px; }
.bk-sel__list { margin: 0; background: var(--white); border-radius: 8px; overflow: hidden; }
.bk-sel__row { display: grid; grid-template-columns: 8.5em 1fr; border-bottom: 1px solid var(--line); }
.bk-sel__row:last-child { border-bottom: 0; }
.bk-sel__row dt { padding: 8px 10px; font-weight: 700; font-size: 13px; background: var(--band); }
.bk-sel__row dd { margin: 0; padding: 8px 10px; }
.bk-sel .btn--block { margin-top: 16px; }
.bk-sel__note { font-size: 13px; color: var(--ink-2); margin: 10px 0 0; }
.bk-sel__lead { margin: 14px 0 0; }

/* 予約メールフォーム（Contact Form 7）：白いカードに、項目名の上に大きめの入力欄 */
.wpcf7 { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px 24px; margin: 0 0 24px; }
.wpcf7-form > p { margin: 0 0 22px; font-weight: 700; font-size: 15px; line-height: 1.6; }
.wpcf7-form > p > br { display: none; }
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7-form > p:last-of-type { margin-bottom: 0; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: 8px; font-weight: 400; }
.wpcf7-form .text-danger { font-size: 0; }
.wpcf7-form .text-danger::after { content: "必須"; display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 4px; background: var(--plum); color: var(--white); font-size: 11px; line-height: 20px; vertical-align: 2px; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form select, .wpcf7-form textarea {
  display: block; width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--ivory);
  color: var(--ink); font: 16px/1.6 var(--gothic); transition: border-color .15s, box-shadow .15s, background .15s;
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2385344B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; }
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: 0; border-color: var(--plum); background-color: var(--white); box-shadow: 0 0 0 3px var(--plum-soft); }
.wpcf7-form ::placeholder { color: #B5ADB8; }
/* チェックボックス：押せる範囲を文字まで広げ、薄い帯で囲む */
.wpcf7-form .wpcf7-list-item { display: block; margin: 0; }
.wpcf7-form .wpcf7-list-item label, .wpcf7-form .wpcf7-checkbox .wpcf7-list-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: var(--band); font-size: 14px; line-height: 1.7; cursor: pointer; }
.wpcf7-form input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--plum); cursor: pointer; }
.wpcf7-form .wpcf7-list-item-label { white-space: pre-line; }
/* 送信ボタンは塗りボタンと同じ見た目 */
.wpcf7-form input[type="submit"] { display: block; width: 100%; margin: 8px 0 0; padding: 16px 24px; border: 0; border-radius: 999px; background: var(--btn); color: var(--ink); font: 700 17px var(--gothic); letter-spacing: .1em; cursor: pointer; }
.wpcf7-form input[type="submit"]:hover { filter: brightness(.96); }
.wpcf7-form input[type="submit"]:disabled { background: var(--btn-disabled); cursor: default; }
.wpcf7-form .wpcf7-spinner { display: block; margin: 8px auto 0; }
.wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: #C0392B; }
.wpcf7-form .wpcf7-not-valid { border-color: #C0392B; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; }
@media (min-width: 768px) {
  .wpcf7 { max-width: 720px; margin-left: auto; margin-right: auto; padding: 36px 40px 40px; }
  .bk-sel { max-width: 720px; margin-left: auto; margin-right: auto; }
  .wpcf7-form input[type="submit"] { max-width: 360px; margin: 8px auto 0; }
}

/* 空き状況のカレンダー：スマホは予定の一覧、PCは月の表 */
.dh-cal { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 16px; margin: 24px 0; }
.entry__body .dh-cal__title { font-size: 18px; margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--plum); }
.dh-cal__frame { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.dh-cal__frame iframe { display: block; width: 100%; border: 0; }
.dh-cal__frame--sp iframe { height: 420px; }
.dh-cal__frame--pc { display: none; }
.dh-cal__frame--pc iframe { height: 560px; }
.entry__body .dh-cal__note { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
@media (min-width: 768px) {
  .dh-cal { padding: 24px; }
  .dh-cal__frame--sp { display: none; }
  .dh-cal__frame--pc { display: block; }
  .dh-cal--form { max-width: 720px; margin-left: auto; margin-right: auto; padding: 28px 40px; }
}

/* ご予約の方法：カードの下端にボタンをそろえる */
.gd-way { display: flex; flex-direction: column; }
.gd-way > p { flex: 1; }
.gd-way .gd-btns { margin: 14px 0 0; }
.gd-way .gd-btn { width: 100%; }
.entry__body .gd-way .gd-btn .wp-block-button__link { display: block; text-align: center; }

/* 希望日時：カレンダーで日付＋時間のリスト（inc/booking.php）。元の文字の欄は隠して、選んだ内容を入れる */
.wpcf7-form .dahlia-dt { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 600px) { .wpcf7-form .dahlia-dt { grid-template-columns: 3fr 2fr; } }
.wpcf7-form .dahlia-dt__date { display: block; width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--ivory); font: 400 16px/1.6 var(--gothic); min-height: 52px; color: var(--ink); }
.wpcf7-form .dahlia-dt__date:focus { outline: 0; border-color: var(--plum); background-color: var(--white); box-shadow: 0 0 0 3px var(--plum-soft); }
.wpcf7-form .dahlia-dt__note { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 400; color: var(--plum); }
.wpcf7-form input.dahlia-dt__raw { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* ページ内のボタンのうち、予約のボタンは黄色で目立たせる */
.entry__body .gd-btns > .btn--gold { background: var(--btn); border-color: var(--btn); color: var(--ink); }