@charset "UTF-8";
/* =========================================================
   無料相談（入力・確認）／完了　PC版（末尾にスマホ版）
   1rem = デザイン上の10px（1440px幅基準）。共通パーツは style.css
   ========================================================= */
:root { --beige: #f6f4ed; --line: #d9d3c7; --sub: #8a8378; --err: #c2462e; }

/* ---------- KV（下層共通の帯） ---------- */
.ct-hero { height: 43.7rem; }
.ct-hero__img { position: absolute; left: 0; top: 7.7rem; width: 144rem; height: 36rem; overflow: hidden; }
.ct-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.ct-hero__ttl { position: absolute; left: 0; top: 23.92rem; width: 144rem; text-align: center; font-size: 3.4rem; line-height: 3.4rem; font-weight: 700; }
.ct-hero--sm { height: 27.7rem; }
.ct-hero--sm .ct-hero__img { height: 20rem; }
.ct-hero--sm .ct-hero__ttl { top: 16rem; font-size: 3rem; line-height: 3rem; }

/* ---------- 見出し・流れ ---------- */
.ct-intro { padding: 4.8rem 0 9.6rem; text-align: center; }
.ct-intro__ttl { font-size: 3.2rem; line-height: 4.8rem; font-weight: 700; }
.ct-intro__txt { margin-top: 1.7rem; font-size: 2.4rem; line-height: 3.5rem; font-weight: 400; }
.ct-flow { list-style: none; display: flex; justify-content: center; gap: 6.4rem; margin-top: 6.4rem; }
.ct-flow li { position: relative; display: flex; flex-direction: column; align-items: center; width: 27rem; }
.ct-flow li + li::before { content: ""; position: absolute; left: -5.8rem; top: 2.8rem; width: 5.2rem; height: 2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 20'%3E%3Cpath d='M0 10H48' fill='none' stroke='%23231e19' stroke-width='3' stroke-dasharray='3 3'/%3E%3Cpath d='M42 3.5L48.5 10L42 16.5' fill='none' stroke='%23231e19' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } /* 点線と先端を1枚の絵に */
.ct-flow__c { display: flex; align-items: center; justify-content: center; width: 7.6rem; height: 7.6rem; border: .3rem solid var(--ink); border-radius: 50%; background: #e0ecf8; font-family: "Barlow", sans-serif; font-size: 2.4rem; font-weight: 700; }
.ct-flow b { margin-top: 1.6rem; font-size: 2rem; line-height: 3rem; font-weight: 700; }
.ct-flow small { margin-top: .4rem; font-size: 1.5rem; line-height: 2.4rem; color: var(--sub); }

/* ---------- フォーム ---------- */
.ct-body { padding: 10.4rem 0 14rem; background: var(--beige); clip-path: polygon(0 0, calc(50% - 3.6rem) 0, 50% 3.6rem, calc(50% + 3.6rem) 0, 100% 0, 100% 100%, 0 100%); }
.ct-card { width: 112rem; margin: 0 auto; padding: 7.2rem 9.6rem 8rem; border-radius: 2rem; background: var(--white); box-shadow: 0 3rem 6rem -4rem rgba(35, 30, 25, .35); }
.ct-card__ttl { text-align: center; font-size: 3rem; line-height: 4.2rem; font-weight: 700; }
.ct-steps { list-style: none; display: flex; justify-content: center; gap: 1.2rem; margin-top: 3.2rem; }
.ct-steps li { display: flex; align-items: center; gap: .8rem; padding: .6rem 2rem .6rem .6rem; border-radius: 3rem; background: var(--beige); color: var(--sub); font-size: 1.5rem; line-height: 2.4rem; font-weight: 700; transition: background .4s, color .4s; }
.ct-steps li + li { position: relative; margin-left: 2.4rem; }
.ct-steps li + li::before { content: ""; position: absolute; left: -2.6rem; top: 50%; width: 2.4rem; height: .2rem; background: var(--line); }
.ct-steps i { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--white); font-style: normal; font-family: "Barlow", sans-serif; }
.ct-steps li.is-now { background: var(--ink); color: var(--white); }
.ct-steps li.is-now i { background: var(--white); color: var(--ink); }
.u-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-confirm__lead:focus { outline: none; }
.ct-dummy { margin-top: 2.4rem; padding: 1rem 2rem; border-radius: .8rem; background: #fdf2e4; color: #9a5d17; font-size: 1.4rem; line-height: 2.2rem; text-align: center; }

.ct-form { margin-top: 4.8rem; }
.ct-row { display: grid; grid-template-columns: 26rem 1fr; gap: 3.2rem; padding: 2.8rem 0; border: 0; border-bottom: .15rem solid var(--line); margin: 0; }
.ct-row:first-child { border-top: .15rem solid var(--line); }
.ct-row__lbl { display: flex; align-items: center; gap: 1.2rem; padding-top: 1.2rem; align-self: start; font-size: 1.8rem; line-height: 2.6rem; font-weight: 700; }
.ct-req, .ct-opt { flex: none; padding: .1rem 1rem; border-radius: .4rem; font-style: normal; font-size: 1.2rem; line-height: 2rem; font-weight: 700; }
.ct-req { background: var(--teal); color: var(--white); }
.ct-opt { background: #ece8df; color: var(--sub); }
.ct-row__note { margin-bottom: 1rem; font-size: 1.4rem; line-height: 2.2rem; color: var(--sub); }
/* 入力欄：選ぶと下線が緑に伸びる */
.ct-ctl { position: relative; }
.ct-ctl input, .ct-ctl textarea { display: block; width: 100%; padding: 1.4rem 1.8rem; border: .2rem solid var(--line); border-radius: .8rem; background: #fbfaf6; color: var(--ink); font-family: var(--font); font-size: max(16px, 1.8rem); line-height: 1.6; transition: border-color .3s, background .3s; -webkit-appearance: none; appearance: none; }
.ct-ctl textarea { resize: vertical; min-height: 18rem; }
.ct-ctl input::placeholder, .ct-ctl textarea::placeholder { color: #b8b0a3; }
.ct-ctl input:focus, .ct-ctl textarea:focus { outline: none; border-color: var(--ink); background: var(--white); }
.ct-line { position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: .3rem; border-radius: .2rem; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.ct-ctl input:focus ~ .ct-line, .ct-ctl textarea:focus ~ .ct-line { transform: scaleX(1); }
.ct-row.is-ok .ct-ctl input { border-color: #9fd6d0; }
.ct-row.is-bad .ct-ctl input, .ct-row.is-bad .ct-ctl textarea { border-color: var(--err); background: #fff7f5; }
.ct-err { min-height: 0; font-size: 1.4rem; line-height: 2.2rem; color: var(--err); font-weight: 700; }
.ct-err:not(:empty) { margin-top: .8rem; }
.ct-err:not(:empty)::before { content: "! "; }
/* 今のご状況 */
.ct-radios { display: flex; flex-wrap: wrap; gap: 1.2rem; padding-top: .4rem; }
.ct-radio { position: relative; cursor: pointer; }
.ct-radio input { position: absolute; opacity: 0; }
.ct-radio span { display: block; padding: 1rem 2.2rem; border: .2rem solid var(--line); border-radius: 3rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; transition: background .3s, color .3s, border-color .3s; }
.ct-radio input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ct-radio input:focus-visible + span { outline: .3rem solid var(--teal); outline-offset: .2rem; }
@media (hover: hover) { .ct-radio:hover span { border-color: var(--ink); } }
/* 同意 */
.ct-agree { margin-top: 4rem; text-align: center; }
.ct-check { display: inline-flex; align-items: center; gap: 1.2rem; font-size: 1.7rem; line-height: 2.6rem; font-weight: 700; cursor: pointer; }
.ct-check input { width: 2.4rem; height: 2.4rem; accent-color: var(--teal); }
.ct-link { color: var(--teal); text-decoration: underline; text-underline-offset: .3rem; }
/* ボタン */
.ct-actions { display: flex; justify-content: center; gap: 2.4rem; margin-top: 4rem; }
.ct-submit { width: 46rem; height: 8rem; margin: 0; border: 0; font-family: var(--font); cursor: pointer; font-size: 2.6rem; transition: filter .4s, opacity .4s; }
.ct-submit { animation: none; box-shadow: none; }
.ct-submit .chev { animation: none; }
.ct-form:not(.is-ready) #ctToConfirm { background: #c4bcae; } /* 必須がそろうまで控えめ（押すと未入力の項目をお知らせ） */
.ct-form:not(.is-ready) #ctToConfirm::after { animation: none; opacity: 0; }
@media (hover: hover) { .ct-submit:hover { box-shadow: 0 1.2rem 2.4rem -1.2rem rgba(18, 168, 157, .7); } }
.ct-back { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.2rem; width: 30rem; height: 8rem; border: .3rem solid var(--ink); border-radius: 4.4rem; background: var(--white); color: var(--ink); font-family: var(--font); font-size: 2rem; font-weight: 700; cursor: pointer; }
.ct-back .chev { position: static; width: .9rem; height: 1.5rem; margin: 0; transform: rotate(180deg); fill: none; stroke: currentColor; stroke-width: 2; }
/* 確認 */
.ct-confirm__lead { text-align: center; font-size: 1.8rem; line-height: 3rem; }
.ct-confirm { margin-top: 3.2rem; border-top: .15rem solid var(--line); }
.ct-confirm div { display: grid; grid-template-columns: 26rem 1fr; gap: 3.2rem; padding: 2.4rem 0; border-bottom: .15rem solid var(--line); }
.ct-confirm dt { font-size: 1.7rem; line-height: 2.8rem; font-weight: 700; color: var(--sub); }
.ct-confirm dd { font-size: 1.8rem; line-height: 2.8rem; white-space: pre-wrap; word-break: break-all; }
.ct-confirm dd.is-empty { color: #b8b0a3; }

/* =========================================================
   完了
   ========================================================= */
.th-body { padding: 8rem 0 14rem; background: var(--beige); }
.th-card { width: 96rem; margin: 0 auto; padding: 7.2rem 8rem 8rem; border-radius: 2rem; background: var(--white); text-align: center; box-shadow: 0 3rem 6rem -4rem rgba(35, 30, 25, .35); }
.th-check { width: 12rem; height: 12rem; fill: none; stroke: var(--teal); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.th-check circle { stroke: #cfe9e6; }
.th-card .ct-steps { margin-top: 3.2rem; }
.th-ttl { margin-top: 4rem; font-size: 3.2rem; line-height: 4.8rem; font-weight: 700; }
.th-txt { margin-top: 3.2rem; font-size: 1.8rem; line-height: 3.2rem; }
.th-txt p + p { margin-top: 2rem; }
.th-btns { display: flex; justify-content: center; gap: 2.4rem; margin-top: 5.6rem; }
.th-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 39rem; height: 7.3rem; border: .3rem solid var(--teal); border-radius: 4rem; background: var(--teal); color: var(--white); font-size: 2.2rem; font-weight: 700; transition: background .3s, color .3s; }
.th-btn--sub { background: var(--white); color: var(--teal); }
.th-btn .chev { position: absolute; right: 2.6rem; top: 50%; width: .8rem; height: 1.4rem; margin-top: -.7rem; fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) { .th-btn:hover { background: var(--white); color: var(--teal); } .th-btn--sub:hover { background: var(--teal); color: var(--white); } }

/* =========================================================
   スマホ版（767px以下・375px幅基準）　望月チームでPC版をもとに組んだレイアウト
   ========================================================= */
@media (max-width: 767px) {
  .ct-hero { height: 18rem; }
  .ct-hero__img { top: 6rem; width: 37.5rem; height: 12rem; }
  .ct-hero__img img { object-position: 18% 50%; }
  .ct-hero__ttl { top: 10.4rem; width: 37.5rem; font-size: 2.2rem; line-height: 2.2rem; }
  .ct-hero--sm { height: 14rem; }
  .ct-hero--sm .ct-hero__img { height: 8rem; }
  .ct-hero--sm .ct-hero__ttl { top: 8.9rem; font-size: 1.8rem; line-height: 1.8rem; }

  .ct-intro { padding: 3.6rem 2rem 5.6rem; }
  .ct-intro__ttl { font-size: 1.9rem; line-height: 2.9rem; }
  .ct-intro__txt { margin-top: 1.4rem; font-size: 1.35rem; line-height: 2.4rem; }
  .ct-flow { flex-direction: column; gap: 2rem; margin-top: 3.6rem; text-align: left; }
  .ct-flow li { display: grid; grid-template-columns: 5.2rem 1fr; grid-template-areas: "c b" "c s"; column-gap: 1.4rem; align-items: center; width: auto; }
  .ct-flow li + li::before { left: 2.45rem; top: -1.8rem; width: .3rem; height: 1.4rem; background: linear-gradient(180deg, var(--ink) 0 .3rem, transparent .3rem) 0 0 / .3rem .6rem repeat-y; }
  .ct-flow li + li::after { display: none; }
  .ct-flow__c { grid-area: c; width: 5.2rem; height: 5.2rem; border-width: .2rem; font-size: 1.7rem; }
  .ct-flow b { grid-area: b; margin: 0; font-size: 1.5rem; line-height: 2.2rem; align-self: end; }
  .ct-flow small { grid-area: s; margin: .2rem 0 0; font-size: 1.2rem; line-height: 1.8rem; align-self: start; }

  .ct-body { padding: 5.2rem 1.2rem 6rem; clip-path: polygon(0 0, calc(50% - 2rem) 0, 50% 2rem, calc(50% + 2rem) 0, 100% 0, 100% 100%, 0 100%); }
  .ct-card { width: auto; padding: 3.2rem 1.8rem 4rem; border-radius: 1.2rem; }
  .ct-card__ttl { font-size: 1.9rem; line-height: 2.8rem; }
  .ct-steps { gap: .6rem; margin-top: 2rem; }
  .ct-steps li { gap: .4rem; padding: .3rem 1rem .3rem .3rem; font-size: 1.1rem; line-height: 1.8rem; }
  .ct-steps li + li { margin-left: 1.2rem; }
  .ct-steps li + li::before { left: -1.4rem; width: 1.2rem; height: .15rem; }
  .ct-steps i { width: 2rem; height: 2rem; }
  .u-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-confirm__lead:focus { outline: none; }
.ct-dummy { margin-top: 1.6rem; padding: .8rem 1.2rem; font-size: 1.1rem; line-height: 1.8rem; text-align: left; }
  .ct-form { margin-top: 2.4rem; }
  .ct-row { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
  .ct-row__lbl { padding-top: 0; gap: .8rem; font-size: 1.45rem; line-height: 2.2rem; }
  .ct-req, .ct-opt { padding: 0 .7rem; font-size: 1rem; line-height: 1.7rem; }
  .ct-row__note { margin-bottom: .8rem; font-size: 1.15rem; line-height: 1.8rem; }
  .ct-ctl input, .ct-ctl textarea { padding: 1.1rem 1.3rem; border-width: .15rem; border-radius: .6rem; font-size: max(16px, 1.6rem); line-height: 1.5; } /* 16px未満だとiPhoneで拡大されるため */
  .ct-ctl textarea { min-height: 14rem; }
  .ct-err { font-size: 1.2rem; line-height: 1.8rem; }
  .ct-radios { gap: .8rem; }
  .ct-radio span { padding: 1.1rem 1.5rem; border-width: .15rem; font-size: 1.3rem; line-height: 2rem; }
  .ct-agree { margin-top: 2.8rem; }
  .ct-check { gap: .8rem; font-size: 1.35rem; line-height: 2.2rem; }
  .ct-check input { width: 2rem; height: 2rem; }
  .ct-actions { margin-top: 2.8rem; }
  .ct-actions--2 { flex-direction: column-reverse; align-items: center; gap: 1.4rem; }
  .ct-submit { width: 100%; height: 6rem; font-size: 1.8rem; }
  .ct-back { width: 22rem; height: 5rem; border-width: .2rem; font-size: 1.4rem; }
  .ct-back .chev { width: .7rem; height: 1.2rem; }
  .ct-confirm__lead { font-size: 1.35rem; line-height: 2.3rem; text-align: left; }
  .ct-confirm { margin-top: 2rem; }
  .ct-confirm div { grid-template-columns: 1fr; gap: .4rem; padding: 1.6rem 0; }
  .ct-confirm dt { font-size: 1.25rem; line-height: 2rem; }
  .ct-confirm dd { font-size: 1.5rem; line-height: 2.4rem; }

  .th-body { padding: 4rem 1.2rem 6rem; }
  .th-card { width: auto; padding: 4rem 2rem 4.4rem; border-radius: 1.2rem; }
  .th-check { width: 8rem; height: 8rem; }
  .th-card .ct-steps { margin-top: 2rem; }
  .th-ttl { margin-top: 2.8rem; font-size: 2rem; line-height: 3.2rem; }
  .th-txt { margin-top: 2rem; font-size: 1.35rem; line-height: 2.4rem; text-align: left; }
  .th-txt p + p { margin-top: 1.4rem; }
  .th-txt br.pc { display: none; }
  .th-btns { flex-direction: column; align-items: center; gap: 1.2rem; margin-top: 3.2rem; }
  .th-btn { width: 26rem; height: 5.4rem; border-width: .2rem; font-size: 1.6rem; }
  .th-btn .chev { right: 2rem; width: .7rem; height: 1.2rem; margin-top: -.6rem; }
}