@charset "UTF-8";
/* ============================================================
   お問合せページ  css/contact.css
   ============================================================ */

/* 電話ボックス */
.ct-tel__box{
  text-align:center;
  background:
    radial-gradient(600px 260px at 90% -20%, rgba(0,160,233,.25), transparent 60%),
    linear-gradient(135deg, var(--blue-deep), var(--blue));
  color:#fff;
  border-radius: var(--radius);
  padding: clamp(34px, 5vw, 54px) 24px;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow);
}
.ct-tel__box::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1.4px, transparent 1.5px);
  background-size:22px 22px;
  mask-image: linear-gradient(115deg, transparent 40%, #000);
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, #000);
}
.ct-tel__label{
  position:relative;
  font-weight:700; letter-spacing:.2em; font-size:14px;
  display:inline-flex; align-items:center; gap:1em;
}
.ct-tel__label::before, .ct-tel__label::after{
  content:""; width:2.2em; height:2px; background:var(--yellow);
}
.ct-tel__num{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-en); font-weight:700;
  font-size: clamp(36px, 7vw, 58px); letter-spacing:.03em;
  margin-top: 14px;
  transition: color .3s;
}
.ct-tel__num svg{ width:.75em; height:.75em; color:var(--yellow); }
.ct-tel__num:hover{ color:var(--yellow); }
.ct-tel__hours{ position:relative; margin-top:10px; font-size:13px; color:var(--text-on-blue); }

/* フォーム */
.ct-form__lead{ margin: -16px 0 36px; font-size:14.5px; color:#39414f; }
.ct-form__body{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(26px, 4vw, 46px);
}
.field{ margin-bottom: 26px; }
.field label, .field .label{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:14.5px; color:var(--navy);
  letter-spacing:.06em; margin-bottom:10px;
}
.field em{
  font-style:normal; font-size:11px; font-weight:700; color:#fff;
  background: var(--magenta);
  border-radius:5px; padding: 2px 8px; letter-spacing:.1em;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea{
  width:100%;
  font:inherit; font-size:15px;
  color:var(--ink);
  background:var(--paper);
  border:2px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color: var(--blue-bright);
  background:#fff;
  box-shadow: 0 0 0 4px rgba(61,104,184,.15);
}
.field input.is-error,
.field textarea.is-error{
  border-color: var(--magenta);
  background:#fff5fa;
}
.field textarea{ resize: vertical; min-height: 150px; }
.err{ margin-top:8px; font-size:12.5px; font-weight:700; color:var(--magenta); }

/* ラジオ */
.radios{ display:flex; flex-wrap:wrap; gap:10px; }
.radios label{
  margin:0; cursor:pointer;
}
.radios input{ position:absolute; opacity:0; }
.radios span{
  display:inline-block;
  font-size:13.5px; font-weight:700; color:var(--blue-deep);
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:999px;
  padding: 9px 20px;
  transition: all .25s;
}
.radios input:checked + span{
  color:#fff;
  background: linear-gradient(120deg, var(--cyan), var(--blue-bright));
  border-color: var(--blue-bright);
  box-shadow: 0 6px 14px rgba(0,160,233,.3);
}
.radios input:focus-visible + span{ outline:3px solid var(--yellow); outline-offset:2px; }

/* ハニーポット（非表示） */
.hp-field{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space:nowrap;
}

/* 同意 */
.field--agree{ text-align:center; margin-top: 34px; }
.agree{ justify-content:center; cursor:pointer; }
.agree input{
  width:20px; height:20px;
  accent-color: var(--blue);
}
.agree a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.field--agree .err{ text-align:center; }

/* 送信 */
.ct-form__submit{ text-align:center; margin-top: 10px; }
.ct-form__submit .btn{ min-width: 300px; justify-content:center; gap:.9em; }
.sending{ margin-top:12px; font-size:13px; color:var(--blue-deep); font-weight:700; }

/* 完了/エラーメッセージ（contact.php から戻った時用） */
.ct-result{
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align:center;
  padding: clamp(36px, 6vw, 64px) 24px;
}
.ct-result h2{
  font-size: clamp(20px, 3vw, 26px); font-weight:900; color:var(--navy);
  letter-spacing:.12em; margin-bottom:14px;
}
.ct-result p{ font-size:14.5px; color:#39414f; margin-bottom:26px; }
.ct-result .ok-icon{
  width:84px; height:84px; margin:0 auto 20px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--cyan), var(--blue-bright));
  display:grid; place-items:center;
  color:#fff;
  box-shadow: 0 12px 26px rgba(0,160,233,.35);
}
.ct-result .ok-icon svg{ width:40px; height:40px; }

/* 窓口 */
.ct-window__box{
  border:1px solid var(--line);
  border-left:5px solid var(--blue-bright);
  border-radius:10px;
  background:var(--paper);
  padding: 24px 28px;
}
.ct-window__box h2{
  font-size:16px; font-weight:900; color:var(--navy);
  letter-spacing:.1em; margin-bottom:8px;
}
.ct-window__box p{ font-size:14px; color:#39414f; }

@media (max-width: 560px){
  .ct-form__submit .btn{ min-width:0; width:100%; }
  .radios{ flex-direction:column; }
  .radios span{ display:block; text-align:center; }
}