/* ==========================================================
   お問い合わせ（claude-design-output/contact.dc.html）
   ========================================================== */
.ty-contact { position: relative; overflow: hidden; padding: clamp(44px, 9vw, 120px) clamp(20px, 5vw, 64px) clamp(52px, 11vw, 150px); }
.ty-contact__inner { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); }
.ty-contact__intro { position: relative; margin: 0; text-align: center; font-family: "Noto Serif JP", serif; font-size: clamp(16.5px, 1.6vw, 19px); line-height: 2.3; letter-spacing: .08em; color: #00132F; }
/* 見出しは画面幅いっぱいに広げて、背景の英字を画面の右端に置く */
.ty-contact__head { position: relative; width: 100vw; margin-left: calc(50% - 50vw); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding-top: clamp(16px, 3vw, 32px); }
.ty-contact__bgword { right: calc(8px - 2vw); top: -20px; color: #FEFEFC; }
.ty-contact__label, .ty-contact__h2 { position: relative; }
@media (max-width: 767px) {
  .ty-contact__intro { text-align: left; }
}

/* ===== フォーム（外枠はサイト側、中身はフォームCMS 28899-1 の出力） =====
   CMS の mail-form.css（.form-contents form dl dt:not(.pattern-exclusion) など）より強い指定で、デザインの見た目に合わせる */
.ty-form { position: relative; padding: clamp(22px, 5vw, 64px); background: #FFFFFF; border: 1px solid transparent; }
.ty-form__corner { position: absolute; width: 40px; height: 40px; border: 0 solid #B8933F; }
.ty-form__corner--tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.ty-form__corner--br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.ty-form .form-contents { padding: 0; background: none; color: #2A3344; }
/* 1行＝項目名（240px）＋入力欄。dt と dd を2列のグリッドに並べる */
.ty-form .form-contents form dl { margin: 0; display: grid; grid-template-columns: calc(240px + clamp(20px, 3vw, 32px)) minmax(0, 1fr); } /* 列の間をすき間にすると行の線が途切れるため、1列目の幅に含める */
.ty-form .form-contents form dl dt:not(.pattern-exclusion),
.ty-form .form-contents form dl dd:not(.pattern-exclusion) { float: none; width: auto; margin: 0; padding: 26px 0; border-bottom: 1px solid rgba(0,19,47,.1); line-height: normal; }
.ty-form .form-contents form dl dt:not(.pattern-exclusion) { display: flex; align-items: flex-start; padding-top: 40px; font-family: "Noto Serif JP", serif; font-size: 15px; font-weight: 500; letter-spacing: .08em; color: #00132F; }
.ty-form .form-contents form dl dt:not(.pattern-exclusion) span { display: flex; align-items: center; }
/* 「ご希望のSNS」の項目名は上の余白を 10px 狭く（デザインどおり） */
.ty-form .form-contents form dl dt.ty-form__check-dt { padding-top: 36px; }
/* CMS のスパム対策の見えない入力欄が1行分の高さを取らないように */
.ty-form .form-contents form > input[name="winnie_the_pooh"] { display: block; }
/* 必須／任意のバッジ */
.ty-form .form-pattern-1 dl dt:not(.pattern-exclusion) span::before { display: inline-block; flex: none; margin: 0 12px 0 0; padding: 3px 8px; top: 0; border-radius: 0; font-family: "Noto Sans JP", sans-serif; font-size: 11px; font-weight: 400; line-height: normal; letter-spacing: .08em; }
.ty-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before { content: '必須'; background: #00132F; color: #FAF8F4; border: 1px solid #00132F; }
.ty-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before { content: '任意'; background: none; color: #5A6273; border: 1px solid rgba(0,19,47,.25); }
/* 入力欄 */
.ty-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea { display: block; width: 100%; height: 54px; padding: 0 16px; border: 1px solid transparent; border-radius: 0; background: #FAF8F4; font: inherit; font-size: 15px; color: #2A3344; outline: none; transition: border-color .3s, background .3s; }
.ty-form .form-pattern-1 dd:not(.pattern-exclusion) textarea.textarea { height: 230px; padding: 14px 16px; line-height: 1.9; resize: vertical; }
.ty-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea:focus { border-color: #B8933F; background: #FFFFFF; }
.ty-form .form-contents .textarea::placeholder { color: #757575; }
/* チェックボックス（ご希望のSNS・同意） */
.ty-form .form-contents form dl dd.ty-form__check-dd { display: flex; flex-wrap: wrap; gap: 4px clamp(20px, 3.5vw, 36px); }
.ty-form .form-contents dd label { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin: 0; border: 1px solid transparent; color: #00132F; font-size: 14px; letter-spacing: .08em; cursor: pointer; }
.ty-form .form-contents dd .checkbox { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; /* デザインは 16px＋枠線 */ border: 1px solid rgba(0,19,47,.35); background: #FFFFFF center / 12px no-repeat; cursor: pointer; transition: background-color .5s, border-color .5s; }
.ty-form .form-contents dd .checkbox:checked { border-color: #B8933F; background-color: #B8933F; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 L10 17 L19 7' fill='none' stroke='%2300132F' stroke-width='2.6'/%3E%3C/svg%3E"); }
.ty-form .form-contents dd .checkbox:focus-visible { outline: 2px solid #B8933F; outline-offset: 2px; }
/* 同意欄：項目名は隠し、「[必須] 個人情報の取り扱いに同意 [□]」を中央に1つ置く（デザインの形） */
.ty-form .form-contents form dl dt.ty-form__agree-dt { display: none; }
.ty-form .form-contents form dl dd.ty-form__agree-dd { grid-column: 1 / -1; padding: 18px 0 0; border-bottom: 0; text-align: center; }
.ty-form .form-contents dd.ty-form__agree-dd label { margin: 0; height: auto; border: 0; gap: 14px; padding: 10px 4px; letter-spacing: .06em; }
.ty-form .form-contents dd.ty-form__agree-dd label::before { content: '必須'; padding: 3px 8px; background: #00132F; border: 1px solid #00132F; color: #FAF8F4; font-size: 11px; letter-spacing: .08em; }
.ty-form .form-contents dd.ty-form__agree-dd .checkbox { order: 2; }
/* 同意のチェックは大きめ・ネイビー */
.ty-form .form-contents dd input[name^="個人情報の取り扱いに同意"] { width: 24px; height: 24px; background-size: 14px; }
.ty-form .form-contents dd input[name^="個人情報の取り扱いに同意"]:checked { border-color: #00132F; background-color: #00132F; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 L10 17 L19 7' fill='none' stroke='%23FAF8F4' stroke-width='2.4'/%3E%3C/svg%3E"); }

/* 個人情報の取り扱い（contact.js が同意欄の前へ移す。グリッドの2列ぶん使う） */
.ty-form__privacy { grid-column: 1 / -1; margin-top: 32px; padding: 22px 24px; background: #F1F3F7; font-size: 13px; line-height: 2; letter-spacing: .04em; color: #3A4356; }
.ty-form__privacy-title { margin: 0 0 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-family: "Noto Serif JP", serif; font-size: 16px; font-weight: 500; letter-spacing: .08em; color: #00132F; }
.ty-form__privacy-line { width: 24px; height: 1px; background: #B8933F; }
.ty-form__privacy-text { margin: 0; }
.ty-form__note { margin: 18px 0 0; text-align: center; font-size: 12.5px; line-height: 2; letter-spacing: .04em; color: #5A6273; }

/* 送信ボタン（6px ずれた影。同意前は押せない） */
.ty-form .form-pattern-1 .submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.6vw, 22px);
  width: auto;
  margin: 30px auto 8px;
  padding: clamp(13px, 3vw, 24px) clamp(28px, 6vw, 56px);
  border: 1px solid #00132F;
  border-radius: 0;
  background: #00132F;
  color: #FAF8F4;
  font: inherit;
  font-size: clamp(13px, 1.8vw, 14px);
  font-weight: 500;
  letter-spacing: .12em;
  box-shadow: 6px 6px 0 -1px #FFFFFF, 6px 6px 0 0 #00132F;
  transition: border-color .5s, background .6s, color .6s, opacity .5s, box-shadow .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.ty-form .form-pattern-1 .submit-btn::before { content: none; }
.ty-form .form-pattern-1 .submit-btn::after { content: ''; width: 8px; height: 8px; flex: none; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.ty-form .form-pattern-1 .submit-btn:not(:disabled):hover { background: transparent; color: #00132F; border-color: #00132F; box-shadow: 0 0 0 -1px #FFFFFF, 0 0 0 0 #00132F; transform: translate(3px, 3px); }
.ty-form .form-pattern-1 .submit-btn:disabled { opacity: .45; cursor: not-allowed; background: #5A6273; border-color: #5A6273; }

/* 送信完了（CMS の完了表示）：背景色なし。白い枠の中に文字とボタン */
.ty-form .form-pattern-1 .form-thanks-msg { padding: clamp(24px, 5vw, 48px) 0; border: 0; background: none; color: #2A3344; text-align: center; }
.ty-form .form-contents .form-thanks-msg p { font-size: 15px; line-height: 2.2; letter-spacing: .06em; }
.ty-form .form-contents .form-thanks-msg .back-home-btn { width: auto; margin-top: 32px; }
.ty-form .form-pattern-1 .form-thanks-msg .back-home-btn a { display: inline-flex; align-items: center; gap: 18px; padding: 18px 36px; border: 1px solid #00132F; border-radius: 0; background: none; color: #00132F; font-size: 14px; font-weight: 500; letter-spacing: .1em; box-shadow: 6px 6px 0 -1px #FFFFFF, 6px 6px 0 0 #00132F; transition: background .6s, color .6s, box-shadow .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.ty-form .form-pattern-1 .form-thanks-msg .back-home-btn a:hover { background: #00132F; color: #FAF8F4; box-shadow: 0 0 0 -1px #FFFFFF, 0 0 0 0 #00132F; transform: translate(3px, 3px); }
@media (max-width: 767px) {
  .ty-form__note { text-align: left; }
  /* スマホは項目名の下に入力欄 */
  .ty-form .form-contents form dl { grid-template-columns: minmax(0, 1fr); }
  .ty-form .form-contents form dl dt:not(.pattern-exclusion) { padding: 40px 0 12px; border-bottom: 0; }
  .ty-form .form-contents form dl dt.ty-form__check-dt { padding-top: 36px; }
  .ty-form .form-contents form dl dd:not(.pattern-exclusion) { padding-top: 0; }
  .ty-form .form-contents form dl dd.ty-form__agree-dd { padding-top: 18px; }
}
/* iOS Safari の入力時ズーム対策：タッチ端末では入力欄を 16px 以上にする */
@media (hover: none) and (pointer: coarse) {
  .ty-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea { font-size: 16px; }
}