/* ==========================================================
   Spring — Talk page overrides (talk.css)
   base.css を読み込んだ後に追加で読み込む。
   /talk/ 専用の相談フォーム・送信完了画面のみを持つ。
   ========================================================== */

/* ---------- compose : 相談フォーム ---------- */
.compose{
  padding:60px 64px 220px;
  background:var(--white);
  display:flex; justify-content:center;
}
.compose-inner{max-width:560px; width:100%;}
.compose-tag{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:28px;
}
.compose-tag .topic-label{
  font-family:var(--label); font-size:12px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--green);
}
.compose-tag .change-topic{
  font-family:var(--label); font-size:11px; letter-spacing:0.18em;
  color:var(--ink-faint); border-bottom:1px solid var(--line);
  padding-bottom:2px; transition:color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.compose-tag .change-topic:hover{color:var(--ink); border-color:var(--ink-faint);}
.compose h2{
  font-family:var(--serif-jp); font-weight:600;
  font-size:clamp(24px,2.8vw,32px);
  line-height:1.7; letter-spacing:0.02em;
  margin-bottom:16px;
}
.compose .lead{
  font-size:15px; color:var(--ink-soft); font-weight:300;
  max-width:440px; margin-bottom:64px;
}

.field{margin-bottom:44px;}
.field label{
  display:block;
  font-family:var(--label); font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:16px;
}
.field input,
.field textarea{
  width:100%;
  background:none; border:0; border-bottom:1px solid var(--line);
  padding:10px 2px 16px;
  font-family:var(--sans-jp); font-weight:300; font-size:16px;
  color:var(--ink); letter-spacing:0.02em;
  transition:border-color 0.6s var(--ease);
}
.field textarea{resize:vertical; min-height:120px; line-height:1.9;}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-faint); font-weight:300;}
.field input:focus,
.field textarea:focus{outline:none; border-color:var(--green);}

/* ---------- field-radio : ご希望の連絡方法 ---------- */
.field-radio{border:0; padding:0; margin-bottom:44px;}
.field-radio legend{
  font-family:var(--label); font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:16px; padding:0;
}
.radio-group{display:flex; gap:28px; flex-wrap:wrap;}
.radio-option{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans-jp); font-weight:300; font-size:15px; color:var(--ink);
  cursor:pointer;
}
.radio-option input[type="radio"]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; margin:0; flex-shrink:0;
  border:1px solid var(--line); border-radius:50%;
  position:relative; cursor:pointer;
  transition:border-color 0.4s var(--ease);
}
.radio-option input[type="radio"]::after{
  content:""; position:absolute; inset:4px; border-radius:50%;
  background:var(--green); transform:scale(0);
  transition:transform 0.35s var(--ease);
}
.radio-option input[type="radio"]:checked{border-color:var(--green);}
.radio-option input[type="radio"]:checked::after{transform:scale(1);}
.radio-option input[type="radio"]:focus-visible{outline:2px solid var(--green); outline-offset:3px;}

/* ---------- submit-btn : 送信ボタン ---------- */
.compose-submit-row{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:56px;
}
.submit-heading{
  font-family:var(--label); font-size:11px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--ink-faint);
}
.submit-btn{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--green); color:var(--white);
  border:1px solid var(--green); border-radius:100px;
  padding:19px 38px;
  font-family:var(--label); font-size:14px; letter-spacing:0.14em;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  box-shadow:0 18px 40px -24px rgba(44,78,57,0.55);
  transition:background 0.5s var(--ease), border-color 0.5s var(--ease),
             transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.submit-btn:hover,
.submit-btn:focus-visible{
  background:var(--green-deep); border-color:var(--green-deep);
  transform:translateY(-2px);
  box-shadow:0 24px 48px -20px rgba(44,78,57,0.6);
}
.submit-btn-arrow{display:inline-block; transition:transform 0.5s var(--ease);}
.submit-btn:hover .submit-btn-arrow,
.submit-btn:focus-visible .submit-btn-arrow{transform:translateX(4px);}
.submit-btn[disabled]{opacity:0.5; pointer-events:none; transform:none; box-shadow:none;}
.compose .talk-note{
  font-family:var(--sans-jp); font-size:13px; color:var(--ink-faint);
}
.form-error{
  margin-top:0;
  font-family:var(--sans-jp); font-size:13px; color:var(--ink-soft);
  border-left:1px solid var(--line); padding-left:16px;
}
#formError{margin-top:28px;}
#contactError{margin-bottom:44px; margin-top:-20px;}

/* ---------- methods : 選べる相談方法 ---------- */
.methods{
  padding:120px 64px 140px;
  background:var(--white-soft);
}
.methods-head{
  text-align:center; max-width:640px; margin:0 auto 64px;
}
.methods-head h2{
  font-family:var(--serif-jp); font-weight:600;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.7; margin-top:16px; letter-spacing:0.02em;
}
.methods-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  max-width:1180px; margin:0 auto;
}
.method-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px 28px;
  display:flex; flex-direction:column; align-items:flex-start;
  position:relative;
  transition:transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}
.method-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -30px rgba(26,26,22,0.25);
  border-color:var(--green-tint);
}
.method-badge{
  position:absolute; top:-11px; right:20px;
  background:var(--green); color:var(--white);
  font-family:var(--label); font-size:10px; letter-spacing:0.12em;
  padding:5px 12px; border-radius:100px;
}
.method-badge-soon{background:var(--ink-faint);}
.method-icon{width:32px; height:32px; margin-bottom:22px;}
.method-icon svg{width:100%; height:100%; overflow:visible;}
.method-icon path,
.method-icon rect,
.method-icon circle{
  fill:none; stroke:var(--green); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:120; stroke-dashoffset:120;
  transition:stroke-dashoffset 1s var(--ease);
}
.method-card:hover .method-icon path,
.method-card:hover .method-icon rect,
.method-card:hover .method-icon circle{stroke-dashoffset:0;}
.method-card h3{
  font-family:var(--serif-jp); font-weight:600; font-size:17px;
  margin-bottom:10px; letter-spacing:0.03em;
}
.method-value{
  font-family:var(--label); font-size:13px; letter-spacing:0.02em;
  color:var(--green-deep); margin-bottom:8px; word-break:break-all;
}
.method-card p{
  font-size:13.5px; color:var(--ink-soft); font-weight:300;
  line-height:1.8; margin-bottom:22px;
}
.method-btn{
  margin-top:auto; align-self:stretch; text-align:center;
  font-family:var(--label); font-size:12px; letter-spacing:0.1em;
  color:var(--green-deep); background:none; cursor:pointer;
  border:1px solid var(--line); border-radius:100px;
  padding:12px 18px;
  transition:background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.method-btn:hover,
.method-btn:focus-visible{background:var(--green); border-color:var(--green); color:var(--white);}
.method-card.is-disabled{opacity:0.65;}
.method-card.is-disabled:hover{transform:none; box-shadow:none; border-color:var(--line);}
.method-btn[disabled]{cursor:default; pointer-events:none; opacity:0.7;}
.methods-note{
  text-align:center; margin-top:56px;
  font-family:var(--serif-jp); font-size:15px; color:var(--ink-soft); letter-spacing:0.02em;
}

/* ---------- talk : responsive ---------- */
@media (max-width:960px){
  .compose{padding:60px 28px 160px;}
  .methods{padding:80px 28px 100px;}
  .methods-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .methods-grid{grid-template-columns:1fr;}
  .submit-btn{width:100%; justify-content:center;}
}

/* ---------- reveal-screen : 送信完了画面 ---------- */
.reveal-screen{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:var(--white);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 1s var(--ease), visibility 0s linear 1s;
}
.reveal-screen.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity 1s var(--ease), visibility 0s linear 0s;
}
.reveal-screen-halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle, rgba(62,107,79,0.06), transparent 65%);
}
.reveal-screen .back-link{
  position:absolute; top:40px; left:64px;
  background:none; border:0; cursor:pointer;
  font-family:var(--label); font-size:12px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--ink-faint);
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.reveal-screen .back-link:hover{color:var(--ink); border-color:var(--line);}
.reveal-screen-inner{position:relative; padding:0 64px;}
.reveal-screen-sprout{width:96px; margin:0 auto 40px; position:relative;}
.reveal-screen-sprout path{fill:none; stroke:var(--green); stroke-width:1.4; stroke-linecap:round;}
.reveal-screen-eyebrow{margin-bottom:20px;}
.reveal-screen-statement{
  font-family:var(--serif-jp); font-weight:600;
  font-size:clamp(22px,2.8vw,32px);
  line-height:1.85; letter-spacing:0.02em;
  color:var(--ink);
}