/* TTC DX TYPE-B / contact.css */

.contact-intro{
  padding:clamp(60px,9vw,120px) 0;
  background:var(--c-white);
}
.contact-intro__inner{
  max-width:820px;
  text-align:center;
  margin:0 auto;
}
.contact-intro__lead{
  font-size:clamp(22px,3vw,32px);
  font-weight:700;
  color:var(--c-ink);
  line-height:1.5;
}
.contact-intro__lead .blue{
  color:var(--c-primary-2);
}
.contact-intro__body{
  margin-top:22px;
  color:var(--c-ink-sub);
  font-size:15px;
  line-height:2;
}
.contact-intro__gift{
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(135deg,#FFF3C9,#FFE792);
  color:#87651A;
  font-weight:700;
  font-size:14px;
  padding:14px 24px;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(255,212,65,.35);
}
.contact-intro__gift .gift-icon{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:11px;
  background:var(--c-primary);
  color:var(--c-white);
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.1em;
}

.contact-form-sec{
  background:var(--c-blue-soft);
  padding:clamp(60px,9vw,120px) 0;
}
.contact-form{
  max-width:880px;
  margin:0 auto;
  background:var(--c-white);
  border-radius:var(--radius-xl);
  padding:clamp(30px,5vw,60px);
  box-shadow:var(--shadow-md);
}
.contact-form__head{
  text-align:center;
  margin-bottom:40px;
  padding-bottom:28px;
  border-bottom:1px solid var(--c-line);
}
.contact-form__head .section-label{
  justify-content:center;
  display:inline-flex;
  margin-bottom:4px;
}
.contact-form__head .en-display{
  color:var(--c-primary);
  font-size:clamp(36px,5vw,52px);
  margin-bottom:6px;
}
.contact-form__title{
  font-size:clamp(20px,2.5vw,26px);
  color:var(--c-ink);
  margin-bottom:12px;
}
.contact-form__note{
  font-size:13px;
  color:var(--c-ink-sub);
}
.req{
  display:inline-block;
  background:#E84545;
  color:var(--c-white);
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:4px;
  margin-left:8px;
  letter-spacing:.06em;
}
.opt{
  display:inline-block;
  background:var(--c-blue-tint);
  color:var(--c-primary-2);
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:4px;
  margin-left:8px;
  letter-spacing:.06em;
}

.form-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid var(--c-line);
  align-items:flex-start;
}
.form-row:first-of-type{
  padding-top:0;
}
.form-row__label{
  font-weight:700;
  color:var(--c-ink);
  font-size:14px;
  padding-top:10px;
}
.form-row__control input[type="text"],
.form-row__control input[type="email"],
.form-row__control input[type="tel"],
.form-row__control select,
.form-row__control textarea{
  width:100%;
  padding:12px 16px;
  background:var(--c-blue-tint);
  border:1.5px solid transparent;
  border-radius:10px;
  font-size:14.5px;
  color:var(--c-ink);
  font-family:inherit;
  transition:border-color .2s ease,background-color .2s ease;
}
.form-row__control input:focus,
.form-row__control select:focus,
.form-row__control textarea:focus{
  outline:none;
  border-color:var(--c-primary-2);
  background:var(--c-white);
}
.form-row__control textarea{
  min-height:160px;
  resize:vertical;
  line-height:1.8;
}
.form-row__hint{
  margin-top:8px;
  font-size:12px;
  color:var(--c-ink-sub);
}

/* select要素：ブラウザデフォルトの矢印を解除し、独自の下矢印を表示 */
.form-row__control select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:44px; /* 矢印分のスペース確保 */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232156C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:12px 8px;
  cursor:pointer;
}
/* フォーカス時も矢印が消えないよう、背景画像を維持しつつ背景色だけ白に */
.form-row__control select:focus{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232156C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:12px 8px;
  background-color:var(--c-white);
}

.form-check__list,
.form-row__control .wpcf7-checkbox{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px 18px;
}
.form-check__label,
.form-row__control .wpcf7-checkbox .wpcf7-list-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--c-ink);
  padding:10px 14px;
  background:var(--c-blue-tint);
  border-radius:10px;
  cursor:pointer;
  margin:0;
}
.form-check__label input,
.form-row__control .wpcf7-checkbox input{
  accent-color:var(--c-primary-2);
  width:16px;
  height:16px;
}
.form-row__control .wpcf7-checkbox .wpcf7-list-item label{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  cursor:pointer;
}

.form-agree{
  margin-top:28px;
  background:var(--c-blue-tint);
  padding:18px 20px;
  border-radius:12px;
}
.form-agree label{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:13.5px;
  color:var(--c-ink-sub);
  line-height:1.8;
  cursor:pointer;
  margin:0;
}
.form-agree input{
  accent-color:var(--c-primary-2);
}
.form-agree a{
  color:var(--c-primary-2);
  text-decoration:underline;
  font-weight:700;
}
/* Contact Form 7 のacceptance出力対応 */
.form-agree .wpcf7-form-control-wrap,
.form-agree .wpcf7-acceptance,
.form-agree .wpcf7-list-item{
  display:block;
  margin:0;
}
.form-agree .wpcf7-list-item-label{
  display:inline;
}

.form-submit{
  text-align:center;
  margin-top:32px;
}
.form-submit button,
.form-submit input[type="submit"],
.form-submit .wpcf7-submit{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:var(--c-primary);
  color:var(--c-white);
  padding:18px 90px 18px 56px; /* 右側に丸い矢印分のスペース確保 */
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  display:inline-flex;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 24px rgba(22,59,134,.3);
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;
  -webkit-appearance:none;
  appearance:none; /* iOSのinput装飾を解除 */
}
.form-submit button:hover,
.form-submit input[type="submit"]:hover,
.form-submit .wpcf7-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(22,59,134,.4);
}
/* CF7版：submit-wrap内のinputには個別transformを当てず、wrap全体を浮かせる */
.form-submit span.submit-wrap:hover .wpcf7-submit{
  transform:none;
}
/* <button>内の<span>用（HTML静的版の矢印） */
.form-submit button span{
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--c-white);
  color:var(--c-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}
/* CF7用：PHP側で<input>を<span class="submit-wrap">でラップし、::afterで矢印を再現 */
.form-submit span.submit-wrap{
  position:relative;
  display:inline-block !important;
  vertical-align:middle;
  transition:transform .2s ease,opacity .2s ease; /* ホバー時にボタンと矢印を一緒に動かす */
}
.form-submit span.submit-wrap:hover{
  transform:translateY(-2px);
}
.form-submit span.submit-wrap::after{
  content:"→";
  position:absolute;
  top:50%;right:20px;
  transform:translateY(-50%);
  width:30px;height:30px;
  border-radius:50%;
  background:var(--c-white);
  color:var(--c-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  pointer-events:none; /* クリックを下のボタンに透過 */
  z-index:2;
}
/* 送信不可状態（必須項目が未入力など）：ボタン全体を薄く、ホバーアニメも無効化 */
.form-submit span.submit-wrap:has(.wpcf7-submit:disabled),
.form-submit span.submit-wrap:has(.wpcf7-submit[aria-disabled="true"]){
  opacity:0.5;
  cursor:not-allowed;
}
.form-submit span.submit-wrap:has(.wpcf7-submit:disabled):hover,
.form-submit span.submit-wrap:has(.wpcf7-submit[aria-disabled="true"]):hover{
  transform:none; /* ホバーで持ち上がらない */
}
.form-submit span.submit-wrap:has(.wpcf7-submit:disabled) .wpcf7-submit,
.form-submit span.submit-wrap:has(.wpcf7-submit[aria-disabled="true"]) .wpcf7-submit{
  cursor:not-allowed;
  box-shadow:0 4px 12px rgba(22,59,134,.15); /* シャドウも弱める */
}
.form-submit span.submit-wrap:has(.wpcf7-submit:disabled) .wpcf7-submit:hover,
.form-submit span.submit-wrap:has(.wpcf7-submit[aria-disabled="true"]) .wpcf7-submit:hover{
  transform:none; /* 内側のinputホバーtransformも無効化 */
  box-shadow:0 4px 12px rgba(22,59,134,.15);
}
/* CF7のAjaxスピナーをボタンと重ならない位置に調整（CF7デフォルトCSSを上書き） */
/* デフォルトの margin:0 24px を打ち消し、送信中のみボタン内に表示 */
.form-submit .wpcf7-spinner{
  position:absolute !important;
  top:50%;right:20px;
  margin:0 !important;
  transform:translateY(-50%);
  width:24px;height:24px;
  pointer-events:none;
  z-index:3; /* 送信中は矢印より前面に */
}

@media(max-width:820px){
  .form-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:16px 0;
  }
  .form-row__label{
    padding-top:0;
  }
  .form-check__list,
  .form-row__control .wpcf7-checkbox{
    grid-template-columns:1fr;
  }
}

.contact-alt{
  background:var(--c-white);
}
.alt__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.alt__card{
  background:var(--c-blue-tint);
  border-radius:var(--radius-lg);
  padding:36px 32px;
  text-align:center;
  border-top:4px solid var(--c-primary-2);
}
.alt__label{
  display:inline-block;
  font-family:'Outfit',sans-serif;
  font-weight:800;
  color:var(--c-primary-2);
  background:var(--c-white);
  padding:4px 14px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.14em;
  margin-bottom:16px;
}
.alt__card h4{
  font-size:16px;
  color:var(--c-ink);
  margin-bottom:10px;
}
.alt__big{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:clamp(22px,3vw,30px);
  color:var(--c-primary);
  margin:10px 0 16px;
  letter-spacing:-.01em;
}
.alt__card p{
  color:var(--c-ink-sub);
  font-size:13.5px;
  line-height:1.9;
}
@media(max-width:820px){
  .alt__grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   サンクスページ（送信完了）
   page-thanks-contact.php で使用
   ※ page-hero--compact のスタイル定義は common.css に移管（全ページ共通修飾子）
   ============================================================ */

.thanks-message{
  background:var(--c-blue-soft);
  padding:clamp(40px,7vw,90px) 0 clamp(60px,9vw,120px);
}
.thanks-message__card{
  position:relative;
  max-width:720px;
  margin:0 auto;
  background:var(--c-white);
  border-radius:var(--radius-xl);
  padding:clamp(40px,6vw,72px) clamp(30px,5vw,60px);
  box-shadow:var(--shadow-md);
  text-align:center;
  border-top:4px solid var(--c-primary-2);
  overflow:hidden;
}
/* カード左上に淡いグラデ装飾（ベージュではなくブランドの青系） */
.thanks-message__card::before{
  content:"";
  position:absolute;
  top:-80px;left:-80px;
  width:240px;height:240px;
  background:radial-gradient(circle,rgba(76,139,232,.12) 0%,rgba(76,139,232,0) 70%);
  pointer-events:none;
  z-index:0;
}
.thanks-message__card > *{
  position:relative;
  z-index:1;
}

.thanks-message__icon{
  width:84px;
  height:84px;
  margin:0 auto 28px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--c-primary-2),var(--c-primary-3));
  color:var(--c-white);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(33,86,194,.28);
  position:relative;
  animation:thanksPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
/* アイコン外周のソフトリング */
.thanks-message__icon::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid rgba(33,86,194,.18);
  pointer-events:none;
}
.thanks-message__icon svg{
  width:40px;
  height:40px;
}
@keyframes thanksPop{
  0%  { transform:scale(.6); opacity:0; }
  60% { transform:scale(1.08); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}

.thanks-message__title{
  font-size:clamp(22px,3vw,30px);
  font-weight:700;
  color:var(--c-ink);
  margin-bottom:20px;
  line-height:1.5;
}
.thanks-message__body{
  color:var(--c-ink-sub);
  font-size:15px;
  line-height:2;
  margin-bottom:28px;
}
.thanks-message__body strong{
  color:var(--c-primary-2);
  font-weight:700;
}
/* 補足ボックスに左ボーダーアクセントを追加して情報の階層を強調 */
.thanks-message__sub{
  color:var(--c-ink-sub);
  font-size:13px;
  line-height:1.9;
  padding:18px 22px;
  background:var(--c-blue-tint);
  border-left:3px solid var(--c-primary-3);
  border-radius:var(--radius-md);
  margin-bottom:36px;
  text-align:left;
}
.thanks-message__action{
  display:flex;
  justify-content:center;
}

@media(max-width:820px){
  .thanks-message__sub{
    text-align:center;
    border-left:none;
    border-top:3px solid var(--c-primary-3);
  }
}

/*------------------------------------
page-hero 背景画像（contact / thanks-contact 共通）
- contact.css は header.php で is_page(array('contact','thanks-contact')) の時に読み込まれるため、
  この上書きは「お問い合わせ」と「サンクス（送信完了）」の両ページに適用される。
  ＝両ページで同じヒーロー背景画像になる。
- thanks-contact は .page-hero--compact（高さ控えめ）だが ::before は共通で適用される。
- ※CSSファイルでは PHP（get_template_directory_uri 等）は使えないため、
  画像URLは contact.css の位置（/assets/css/）からの相対パスで指定する。
  /assets/images/contact/hero.jpg → ../images/contact/hero.jpg
- 白いかぶせ（.page-hero::after）と文字（.page-hero > .container）は common.css 側のまま有効。
------------------------------------*/
.page-hero::before{
  background-image:
    url("../images/contact/hero.webp"),
    linear-gradient(135deg,var(--c-placeholder-1),var(--c-placeholder-2));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}