/* =========================================================
   NEW MADE  CONTACT / THANKS
   style.css の後に読み込む
   ========================================================= */

/* ---------- CONTACT ---------- */
.contact-page{
  width:min(100% - var(--gutter) * 2, 1100px);
  margin-inline:auto;
  padding:clamp(40px,6vw,120px) 0 var(--section-space);
}
.contact-page-title{
  font-weight:400;
  font-size:clamp(36px,5.2vw,84px);
  line-height:1;letter-spacing:-.01em;
  margin:0 0 clamp(40px,5vw,80px);
}

.form-block{border:0;margin:0;padding:0;min-width:0}
.form-block + .form-block{margin-top:clamp(56px,7vw,110px)}
.form-heading{
  padding:0;
  font-weight:500;
  font-size:clamp(16px,1.5vw,24px);
  letter-spacing:.01em;
}
.form-note{
  margin-top:.9em;
  font-family:var(--font-ja);
  font-size:11px;color:var(--mute);
}

/* PROJECT TYPE のチェックボックス */
.check-list{display:grid;gap:clamp(10px,1vw,16px);margin-top:clamp(14px,1.4vw,22px)}
.check{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:clamp(16px,1.5vw,24px);
  cursor:pointer;width:fit-content;
}
.check-ja{font-family:var(--font-ja);font-weight:500;font-size:.8em;letter-spacing:.04em}
.check input{
  appearance:none;-webkit-appearance:none;
  flex:none;margin:0;
  width:.78em;height:.78em;
  border:1px solid var(--ink);background:var(--paper);
  display:grid;place-content:center;cursor:pointer;
}
.check input::after{
  content:"";width:.46em;height:.46em;background:var(--ink);
  transform:scale(0);transition:transform .15s ease;
}
.check input:checked::after{transform:scale(1)}
.check input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 入力欄 */
.field{margin-top:clamp(22px,2.2vw,34px)}
.form-heading + .field{margin-top:clamp(20px,2vw,30px)}
.field label{
  position:relative;display:block;
  font-family:var(--font-ja);font-weight:500;
  font-size:clamp(13px,1vw,16px);
  margin-bottom:clamp(10px,1vw,14px);
}
/* 必須項目は、ラベルの左外側に＊ */
.field.is-required label::before{
  content:"＊";position:absolute;right:100%;top:.05em;
  font-size:.75em;
}
.field input,.field textarea{
  display:block;width:100%;
  font:inherit;font-family:var(--font-ja);font-size:16px;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--ink);border-radius:0;
  padding:.6em .75em;
}
.field input{height:clamp(42px,3.2vw,50px)}
.field textarea{min-height:clamp(220px,22vw,360px);resize:vertical;line-height:1.7}
.field input:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 1px var(--ink)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#b3261e;box-shadow:inset 0 0 0 1px #b3261e}

/* 黒いボタン（SEND / TOP） */
.btn-black{
  display:flex;align-items:center;justify-content:center;
  margin:clamp(40px,4vw,64px) auto 0;
  width:clamp(160px,15vw,240px);height:clamp(48px,4vw,64px);
  font:inherit;font-weight:700;font-size:clamp(16px,1.4vw,22px);letter-spacing:.02em;
  color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:0;
  cursor:pointer;transition:background-color .3s,color .3s;
}
.btn-black:hover,.btn-black:focus-visible{background:var(--paper);color:var(--ink)}
.btn-black:disabled{opacity:.5;cursor:default}

/* 迷惑送信よけの隠し欄（人には見えない） */
.form-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* 送信できなかったときの案内 */
.form-error{
  margin-top:1.6em;text-align:center;
  font-family:var(--font-ja);font-size:13px;line-height:1.9;color:#b3261e;
}
.form-error-note a{text-decoration:underline;text-underline-offset:.2em}
.form-error .form-mail-btn{margin-top:1.4em}
.form-error-note{margin-top:1.4em;font-size:12px;color:var(--mute)}

/* プレビュー用：受け取ったお問い合わせの一覧 */
.inquiry-log{margin-top:clamp(56px,8vw,120px)}
.inquiry-list{list-style:none;margin:1.4em 0 0;padding:0;font-family:var(--font-ja);font-size:13px;line-height:1.8}
.inquiry-list>li{padding:1.2em 0;border-top:1px solid var(--ink)}
.inquiry-time{font-size:11px;color:var(--mute);margin:0 0 .6em}
.inquiry-list dl{display:grid;grid-template-columns:7em 1fr;gap:.3em 1em;margin:0}
.inquiry-list dt{color:var(--mute)}
.inquiry-list dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- THANKS ---------- */
.thanks-page{
  min-height:calc(100svh - var(--header-h));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(48px,6vw,120px) var(--gutter) var(--section-space);
}
.thanks-title{
  margin:0;
  font-weight:500;
  font-size:clamp(22px,2.6vw,44px);
  letter-spacing:-.005em;line-height:1.25;
}
.thanks-ja{
  margin-top:clamp(40px,5vw,90px);
  font-family:var(--font-ja);
  font-size:clamp(13px,1.3vw,20px);
  line-height:2.2;letter-spacing:.04em;
}
.thanks-en{
  margin-top:clamp(18px,2vw,32px);
  font-weight:500;
  font-size:clamp(13px,1.35vw,21px);
  line-height:2.2;
}
.thanks-page .btn-black{margin-top:clamp(48px,6vw,110px);width:clamp(180px,19vw,320px);height:clamp(52px,5.4vw,88px);font-size:clamp(18px,1.9vw,30px)}

@media (max-width:720px){
  .contact-page{width:auto;margin-inline:28px}  /* ＊が左外側に出る分の余白 */
  .thanks-ja br,.thanks-en br{display:none}
}

/* ---------- Contact Form 7 のHTMLに合わせる ---------- */
.wpcf7 .hidden-fields-container{display:none}
.wpcf7-form-control-wrap{display:block;position:relative}
.check-list .wpcf7-form-control-wrap{display:contents}
.check-list .wpcf7-checkbox{display:grid;gap:clamp(10px,1vw,16px)}
.check-list .wpcf7-list-item{display:block;margin:0}
.check-list .wpcf7-list-item label{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:clamp(16px,1.5vw,24px);
  cursor:pointer;width:fit-content;
}
.check-list input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  flex:none;margin:0;
  width:.78em;height:.78em;
  border:1px solid var(--ink);background:var(--paper);
  display:grid;place-content:center;cursor:pointer;
}
.check-list input[type="checkbox"]::after{
  content:"";width:.46em;height:.46em;background:var(--ink);
  transform:scale(0);transition:transform .15s ease;
}
.check-list input[type="checkbox"]:checked::after{transform:scale(1)}
.check-list input[type="checkbox"]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* 「APPAREL OEM／アパレルOEM」の「／」から後ろは nav.js が .check-ja で包む */
.field .wpcf7-not-valid{border-color:#b3261e;box-shadow:inset 0 0 0 1px #b3261e}
.wpcf7-not-valid-tip{
  display:block;margin-top:.5em;
  font-family:var(--font-ja);font-size:12px;color:#b3261e;
}
.wpcf7-submit.btn-black{display:block;-webkit-appearance:none;appearance:none}
.wpcf7-spinner{display:none}
.wpcf7-form.submitting .wpcf7-submit{opacity:.5;cursor:default}
.wpcf7-response-output{
  margin:1.6em 0 0;text-align:center;
  font-family:var(--font-ja);font-size:13px;line-height:1.9;color:#b3261e;
}
.wpcf7-response-output:empty{display:none}
.wpcf7-form.sent .wpcf7-response-output{color:var(--ink)}
.screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* CF7 の textarea は rows="10" が付くので、高さを元のフォームに合わせる */
.field textarea{height:clamp(220px,22vw,360px)}