:root{
  --ink:#434242;        /* 本文の文字色（yoyaku2023.cssの.yoyakubi境界線色に合わせた濃いグレー） */
  --ink-soft:#6e6e6e;
  --primary:#303979;    /* サイト共通のアクセント色（yoyaku2023.cssの.yoyakucontact spanと同じ紺色） */
  --primary-deep:#232a5c;
  --line:#dddddd;        /* yoyakucontactの枠線と同じグレー */
  --note-bg:#f8dce0;    /* yoyakusetsumeiと同じ薄いピンクの案内ボックス */
  --white:#ffffff;
  --panel:#ffffff;
  --panel-alt:#f7f7f7;
  --form-bg:#faf8f5; /* syohin.html と同系のページ背景 */
}

/* 問い合わせ・予約ページ：商品案内ページに合わせた背景 */
body:has(main .card){
  background-color:var(--form-bg);
}

*{ box-sizing:border-box; }

/* ページ全体の背景色や文字色はサイト側の基本スタイルに委ねるため、
   ここでは body への font-family / background の上書きは行いません。
   （ヘッダーのメニュー文字と幅がズレる原因になるため） */

a{ color:inherit; }

/* ---------- Header ----------
   ヘッダー(.container/.headA/#g-nav など)は他ページと共通の
   CSS/navi.css・CSS/gotop.css 側でスタイリングされる前提のため、
   ここでは一切上書きしません。
*/

/* ---------- Main ---------- */
main{
  max-width:760px;
  margin:0 auto;
  padding:48px 20px 80px;
  position:relative;
  font-family: inherit;
  font-weight:500;
  color:var(--ink);
  line-height:1.8;
}

.page-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--primary);
  font-size:13px;
  letter-spacing:.15em;
  margin-bottom:10px;
}
.page-eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--primary);
}

h1.page-title{
  font-weight:700;
  font-size:clamp(22px, 1.102rem + 1.36vw, 34px);
  margin:0 0 8px;
}

p.page-lead{
  color:var(--ink-soft);
  margin:0 0 40px;
  font-size:14.5px;
}

form{ margin:0; }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(163, 153, 143, 0.12);
  overflow:hidden;
}

.section{
  padding:28px 28px;
  border-bottom:1px solid var(--line);
}
.section:last-of-type{ border-bottom:none; }

.section-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px;
}
.section-head .bar{
  width:3px;
  align-self:stretch;
  min-height:22px;
  background:var(--primary);
  flex-shrink:0;
  margin-top:2px;
}
.section-head h2{
  font-size:17px;
  font-weight:600;
  margin:0;
}
.section-head .note{
  display:block;
  font-weight:500;
  font-size:12.5px;
  color:var(--ink-soft);
  margin-top:3px;
}

label.field-label{
  display:block;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:8px;
}
label.field-label .req{
  color:#a94442;
  font-size:11px;
  border:1px solid #a94442;
  border-radius:2px;
  padding:1px 5px;
  margin-left:6px;
  letter-spacing:.05em;
  vertical-align:1px;
}
label.field-label .opt{
  color:var(--ink-soft);
  font-size:11px;
  margin-left:6px;
}

/* checkbox / radio list（チェックボックスとラジオボタン共通のカード型リスト） */
.check-list{ display:flex; flex-direction:column; gap:10px; }
.check-list.inline{ flex-direction:row; flex-wrap:wrap; }
.check-list.inline .check-item{ flex:0 0 auto; }
.check-list.two-col{ display:grid; grid-template-columns:1fr; gap:10px; }
.check-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:3px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.check-item:hover{ border-color:var(--primary); background:var(--panel-alt); }
.check-item input[type="checkbox"],
.check-item input[type="radio"]{
  width:17px; height:17px;
  margin-top:2px;
  accent-color:var(--primary);
  flex-shrink:0;
}
.check-item span{ font-size:14px; }
.check-item small{
  display:block;
  color:var(--ink-soft);
  font-size:12px;
  margin-top:2px;
}

/* inputs */
.input, input[type="text"], input[type="tel"], input[type="email"], input[type="date"], textarea{
  width:100%;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:11px 12px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder{ color:#aaaaaa; }
input:focus, textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(48,57,121,0.12);
  background:var(--white);
}

.row{ display:flex; gap:12px; flex-wrap:wrap; }
.row > *{ flex:1 1 160px; }

.tel-row{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.tel-row input{ text-align:center; }
.tel-row span{ color:var(--ink-soft); }

.zip-row{ display:flex; align-items:center; gap:8px; max-width:220px; }
.zip-row .mark{ font-size:15px; color:var(--ink-soft); }

.help-text{
  font-size:12px;
  color:var(--ink-soft);
  margin:8px 0 0;
}

.field-gap{ margin-bottom:18px; }
.field-gap:last-child{ margin-bottom:0; }

#address-block{
  margin-top:6px;
  padding-top:6px;
  display:none;
}
#address-block.is-visible{ display:block; }

textarea{ min-height:130px; resize:vertical; }

/* submit */
.submit-wrap{
  padding:28px;
  display:flex;
  justify-content:center;
  background:var(--panel-alt);
}
button.submit-btn{
  font-size:16px;
  letter-spacing:.1em;
  color:var(--white);
  background:var(--primary);
  border:none;
  border-radius:2px;
  padding:14px 56px;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
button.submit-btn:hover{ background:var(--primary-deep); }
button.submit-btn:active{ transform:translateY(1px); }
button.submit-btn:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
}

/* =========================================================
   以下、yoyaku2023.css から統合したスタイル（yoyaku.html用）
   ========================================================= */

/* ---------- 案内ボックス（旧 .yoyakusetsumei） ---------- */
.notice-box{
  background:var(--note-bg);
  padding:14px 16px;
  font-size:13.5px;
  border-radius:2px;
  margin:0 0 32px;
}
.notice-box ul{ margin:0; padding-left:20px; }
.notice-box li{ list-style-type:circle; margin-bottom:8px; }
.notice-box li:last-child{ margin-bottom:0; }

/* ---------- お問い合わせ導線カード（旧 .yoyakucontact） ---------- */
.contact-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0 0 28px;
}
.contact-link{
  flex:1;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:18px 20px;
  text-decoration:none;
  color:var(--ink);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.contact-link:hover{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--white);
}
.contact-link:hover .contact-icon{ color:var(--white); }
.contact-link .contact-icon{
  flex-shrink:0;
  width:22px; height:22px;
  color:var(--primary);
  transition:color .15s ease;
}
.contact-link h3{
  margin:0;
  font-size:clamp(15px, 1.148rem + 0.3vw, 18px);
  font-weight:600;
}

/* ---------- 希望日程グループ（旧 .yoyakubi） ---------- */
.date-group{
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  margin-bottom:20px;
}
.date-group:last-child{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}
.date-group .field-gap:last-child{ margin-bottom:0; }
.date-input{ max-width:220px; }

/* ==========================================================================
   Responsive（768px以上=横並び / 767px以下=フォーム調整 / 480px以下=コンパクト）
   ========================================================================== */
@media (min-width: 768px) {
  .check-list.two-col { grid-template-columns: 1fr 1fr; }
  .contact-links { flex-direction: row; }
}

@media (max-width: 480px) {
  .section { padding: 22px 18px; }
  .submit-wrap { padding: 22px 18px; }
  button.submit-btn { width: 100%; padding: 14px 0; }
}