@charset "utf-8";
/* =========================================================
   お問い合わせ系の共通部品（faq / contact / contact-confirm / thanks / download）
   - フォーム部品（Frame 1321321449 系：ラベル・必須/任意・入力欄・セレクト・チェックボックス・区切り線）
   - フォームの箱（Frame 1321321454）・左の説明箱（Frame 1321321466 / 1321321464）
   - 見出し（Frame 253：薄オレンジの棒＋38px）・暗い地の左上の三角（Vector 77）
   - チェック付きカード（Frame 1321321257）・リンクカード（Frame 1321321257 / 546:38571）
   - 相談フォーム付き CTA（Frame 627）
   1rem = 100 design-px
   ========================================================= */

/* ---------- 暗い地のページ上部：左上の三角（Vector 77：318×259 / 白 12%） ---------- */
.fm-top { position: relative; padding-top: .43rem; }
.fm-top::before {
  content: ""; position: absolute; left: 0; top: 0; width: 3.18rem; height: 2.59rem; pointer-events: none;
  background: rgba(255,255,255,.12); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.fm-top > * { position: relative; }
.fm-top .crumb { background: none; }

/* ---------- 見出し（Frame 253：棒 #f1a36e 10px＋38px） ---------- */
.fm-h2 { width: 11rem; margin: 0 auto; display: flex; align-items: stretch; gap: .19rem; }
.fm-h2::before { content: ""; flex: none; width: .10rem; background: #f1a36e; }
.fm-h2 > span { font-weight: 700; font-size: .38rem; line-height: .64rem; letter-spacing: .0266rem; white-space: nowrap; color: #fff; }

/* ---------- 2 段組（左：説明箱 / 右：フォームの箱）Frame 247 ---------- */
.fm-wrap { display: flex; align-items: flex-start; gap: .35rem; width: 12.47rem; margin: 0 auto; padding: .70rem 0; }
.fm-aside { flex: none; width: 4.12rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }

/* 説明箱（Frame 1321321466）：白帯の見出し＋番号付きリスト */
.fm-side { width: 4.11rem; display: flex; flex-direction: column; align-items: center; gap: .30rem; padding-bottom: .30rem; background: #4b4344; box-shadow: inset 0 0 0 .01rem #fff; color: #fff; }
.fm-side__h { width: 100%; display: flex; flex-direction: column; align-items: center; padding: .17rem .01rem; background: #fff; box-shadow: inset 0 .01rem 0 #fff; color: #fd6a05; font-weight: 700; font-size: .28rem; line-height: .41rem; letter-spacing: .0196rem; text-align: center; white-space: nowrap; }
.fm-side__h small { font-size: .19921rem; letter-spacing: .024791rem; }
.fm-side__h b { font-size: .30989rem; letter-spacing: .024791rem; }
.fm-side ol { width: 100%; display: flex; flex-direction: column; gap: .17rem; padding: 0 .33rem; counter-reset: fms; }
.fm-side li { display: flex; align-items: flex-start; gap: .17rem; counter-increment: fms; }
.fm-side li + li { position: relative; padding-top: .17rem; }
.fm-side li + li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .01rem; background: repeating-linear-gradient(90deg, #fff 0 .02rem, transparent .02rem .04rem); } /* Vector 113：2px 間隔の破線 */
.fm-side li::before {
  content: counter(fms); flex: none; width: .20rem; height: .20rem; border-radius: 50%; background: #fd6a05;
  display: flex; align-items: center; justify-content: center; padding-left: .005rem;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: .1249rem; line-height: 1; letter-spacing: .013739rem; color: #fff;
}
.fm-side li > div { display: flex; flex-direction: column; gap: .07rem; }
.fm-side li b { font-weight: 500; font-size: .20rem; line-height: .27rem; letter-spacing: .014rem; white-space: nowrap; }
.fm-side li p { width: 3.08rem; min-height: .22rem; font-size: .14rem; line-height: .22rem; letter-spacing: .021rem; }

/* 担当者の箱（Frame 1321321464） */
.fm-staff { width: 4.12rem; display: flex; align-items: center; justify-content: center; gap: .24rem; padding: .21rem .28rem; background: #4b4344; box-shadow: inset 0 0 0 .01rem #fff; color: #fff; } /* Figma 196 高（中身 154＋20×2＋枠） */
.fm-staff img { flex: none; width: 1.30rem; height: 1.30rem; border-radius: 50%; }
.fm-staff div { width: 2.00rem; display: flex; flex-direction: column; gap: .12rem; }
.fm-staff b { font-weight: 500; font-size: .20rem; line-height: .27rem; letter-spacing: .014rem; }
.fm-staff p { font-size: .14rem; line-height: .22rem; letter-spacing: .021rem; }

/* ---------- フォームの箱（Frame 1321321454：800 幅 / 余白 42・52） ---------- */
.fm-panel { flex: none; width: 8.00rem; padding: .42rem .52rem; background: #4b4344; color: #fff; }
.fm-groups { display: flex; flex-direction: column; gap: .36rem; }
.fm-group { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
/* legend は fieldset の flex に乗らないため、float で通常の流れに入れて余白を付ける */
.fm-group > .fm-gh { float: left; width: 100%; margin: 0 0 .24rem; }
.fm-group > .fm-gh + * { clear: both; }
.fm-group > .fm-rows + hr, .fm-group > .fm-agree { margin-top: .24rem; }
/* グループ見出し（Frame 227） */
.fm-gh { display: flex; align-items: stretch; gap: .14595rem; padding: 0; }
.fm-gh::before { content: ""; flex: none; width: .0695rem; background: #fd6a05; }
.fm-gh > span { display: flex; align-items: center; height: .2641rem; font-weight: 700; font-size: .2224rem; line-height: .5143rem; letter-spacing: .015568rem; white-space: nowrap; }
.fm-rows { display: flex; flex-direction: column; gap: .18rem; }
.fm-rows > hr, .fm-group > hr { width: 100%; height: 0; margin: 0; border: 0; box-shadow: 0 0 0 .005rem #fff; } /* Vector 107〜112：白 1px（レイアウト高 0） */

/* 1 行（ラベル 182 ＋ 55 ＋ 入力） */
.fm-row { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.fm-row--survey { gap: .37rem; }
.fm-lbl { flex: none; width: 1.82rem; display: flex; flex-direction: column; align-items: flex-start; gap: .16rem; padding: 0; }
.fm-row--survey .fm-lbl { width: 1.70rem; }
.fm-lbl__t { display: flex; align-items: center; gap: .16rem; }
.fm-lbl__t > :first-child { display: flex; align-items: center; height: .24rem; font-weight: 700; font-size: .16rem; line-height: .35542rem; letter-spacing: .0112rem; white-space: nowrap; }
.fm-row--survey .fm-lbl__t { flex-direction: column; align-items: flex-start; }
.fm-row--survey .fm-lbl__t > :first-child { height: .56rem; line-height: .28rem; } /* Figma 値は 35.54px だが枠は 56（2 行）。カンプの行送り 28 で実測 */
/* 必須・任意（Frame 1321321443） */
.fm-req, .fm-opt { flex: none; display: flex; align-items: center; justify-content: center; height: .24rem; padding: 0 .07rem; border-radius: .04rem; background: #fd6a05; color: #fff; font-weight: 500; font-size: .14rem; line-height: .18rem; letter-spacing: .0098rem; white-space: nowrap; }
.fm-opt { background: #9f9f9f; }
.fm-note { display: flex; align-items: center; height: .24rem; padding: 0 .09rem; background: #ffead7; color: #fd6a05; font-weight: 700; font-size: .16rem; letter-spacing: .0112rem; white-space: nowrap; }

/* 入力欄（テキストボックス：331×52 / 選択バー：高さ 38） */
.fm-field { display: flex; flex-direction: column; align-items: flex-start; gap: .08rem; min-width: 0; }
.fm-input, .fm-textarea, .fm-select {
  display: block; margin: 0; border: 0; border-radius: .08rem; background: #4d3529; box-shadow: inset 0 0 0 .01rem #fff;
  color: #fff; font-family: inherit; font-weight: 400; font-size: .15rem; letter-spacing: 0; outline: none;
}
.fm-input { width: 3.31rem; height: .52rem; padding: .10rem .14rem; line-height: .32rem; }
.fm-textarea { width: 3.31rem; height: 1.16rem; padding: .10rem .14rem; line-height: .32rem; resize: vertical; }
.fm-input::placeholder, .fm-textarea::placeholder { color: #fff; opacity: 1; }
.fm-select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  width: 2.21rem; height: .38rem; padding: 0 .40rem 0 .14rem; line-height: .38rem;
  background: #4d3529 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10.3923' viewBox='0 0 12 10.3923'%3E%3Cpath d='M6 10.3923L12 0H0Z' fill='%23D9D9D9'/%3E%3C/svg%3E") no-repeat right .14rem center / .12rem .103923rem;
}
.fm-select option { color: #352e2e; background: #fff; }
.fm-input:focus-visible, .fm-textarea:focus-visible, .fm-select:focus-visible { box-shadow: inset 0 0 0 .02rem #f1a36e; }
.fm-input[aria-invalid="true"], .fm-textarea[aria-invalid="true"], .fm-select[aria-invalid="true"] { box-shadow: inset 0 0 0 .02rem #ff8a3d; }

/* チェックボックス・ラジオ（19×19 / 枠 2px 白） */
.fm-checks { display: flex; align-items: flex-start; gap: .27rem; }
.fm-checks--survey { gap: .30rem; }
.fm-checks--row { gap: .29rem; }
.fm-checks__col { display: flex; flex-direction: column; align-items: flex-start; gap: .17rem; }
.fm-checks__col--224 { width: 2.24rem; }
.fm-checks__col--197 { width: 1.97rem; }
.fm-check { position: relative; display: flex; align-items: flex-start; gap: .16rem; cursor: pointer; }
.fm-check input { position: absolute; left: 0; top: 0; width: .19rem; height: .19rem; margin: 0; opacity: 0; cursor: pointer; }
.fm-check i { flex: none; position: relative; width: .19rem; height: .19rem; box-shadow: inset 0 0 0 .02rem #fff; }
.fm-check i::after { content: ""; position: absolute; left: .055rem; top: .02rem; width: .05rem; height: .10rem; border: solid #fff; border-width: 0 .02rem .02rem 0; transform: rotate(45deg); opacity: 0; }
.fm-check input:checked + i { background: #fd6a05; box-shadow: none; }
.fm-check input:checked + i::after { opacity: 1; }
.fm-check input:focus-visible + i { outline: .02rem solid #f1a36e; outline-offset: .02rem; }
.fm-check span { display: flex; align-items: flex-start; min-height: .20rem; font-size: .16rem; line-height: .19rem; letter-spacing: .024rem; white-space: nowrap; }
.fm-check span.l2 { line-height: .24rem; white-space: pre; }
.fm-checks[aria-invalid="true"] .fm-check i { box-shadow: inset 0 0 0 .02rem #ff8a3d; }

/* エラー表示 */
.fm-err { display: block; color: #ffb27a; font-weight: 500; font-size: .13rem; line-height: .20rem; letter-spacing: .01rem; }
.fm-err[hidden] { display: none; }
.fm-alert { margin-bottom: .24rem; padding: .12rem .16rem; border-radius: .08rem; background: #352e2e; box-shadow: inset 0 0 0 .01rem #ff8a3d; color: #ffb27a; font-weight: 500; font-size: .14rem; line-height: .24rem; }
.fm-alert[hidden] { display: none; }

/* 同意・送信 */
.fm-agree { display: flex; align-items: center; height: .24rem; font-size: .16rem; line-height: .35542rem; letter-spacing: .0112rem; white-space: nowrap; }
.fm-agree a { color: #f1a36e; text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }
.fm-submit { display: flex; flex-direction: column; align-items: center; gap: .26rem; margin-top: .44rem; }
.fm-submit .btn { border: 0; cursor: pointer; font-family: inherit; }
.fm-submit__note { font-weight: 700; font-size: .18rem; line-height: .26103rem; letter-spacing: .027rem; white-space: nowrap; }

/* ---------- チェック付きカード（Frame 1321321257：#4b4344・白枠・角丸 18.7） ---------- */
.fm-tcard { display: flex; flex-direction: column; align-items: flex-start; gap: .20599rem; padding: .25rem .32771rem; border-radius: .18726rem; background: #4b4344; box-shadow: inset 0 0 0 .00936rem #fff; color: #fff; }
.fm-tcard__h { display: flex; align-items: flex-start; gap: .13rem; font-weight: 700; font-size: .2322rem; line-height: .35rem; letter-spacing: .016254rem; }
.fm-tcard__h::before { content: ""; flex: none; width: .30rem; height: .30rem; background: url(../img/form/check-box.svg) no-repeat center / 100% 100%; }
.fm-tcard__line { width: 100%; height: 0; box-shadow: 0 0 0 .00936rem #fff; }
.fm-tcard p { font-size: .14981rem; line-height: .26217rem; letter-spacing: .010487rem; }

/* ---------- リンクカード（546:38571：#4b4344・白枠・角丸 20・右下に矢印丸） ---------- */
.fm-lcard { display: flex; flex-direction: column; align-items: flex-end; width: 4.18rem; padding: .27rem .35rem .19rem; border-radius: .20rem; background: #4b4344; box-shadow: inset 0 0 0 .01rem #fff; color: #fff; }
.fm-lcard__in { width: 100%; display: flex; flex-direction: column; gap: .22rem; margin-bottom: -.19rem; }
.fm-lcard__t { display: flex; align-items: center; height: .33516rem; font-weight: 700; font-size: .28rem; line-height: .57502rem; letter-spacing: .0196rem; white-space: nowrap; }
.fm-lcard__line { width: 100%; height: 0; box-shadow: 0 0 0 .01rem #fff; }
.fm-lcard__d { width: 3.46rem; font-size: .16rem; line-height: .28rem; letter-spacing: .0112rem; }
.fm-lcard__arw { flex: none; width: .38rem; height: .38rem; background: url(../img/form/arrow-circle.svg) no-repeat center / 100% 100%; }

/* ---------- 相談フォーム付き CTA（Frame 627：1204.83×559.59） ---------- */
.ccta { padding: .70rem 0; } /* Figma Frame 637：高さ 690（カード 550.14） */
.ccta__card {
  position: relative; overflow: hidden; width: 12.0483rem; height: 5.5014rem; margin: 0 auto; border-radius: .26421rem;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.ccta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ccta__card::before { content: ""; position: absolute; left: 50%; top: calc(50% - .0041rem); width: 12.22003rem; height: 5.97588rem; transform: translate(-50%, -50%); background: #fd6a05; opacity: .6; z-index: 1; }
.ccta__in { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: .27rem; padding: .41rem .57rem; }
.ccta__l { margin-left: -.03rem; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: .53rem; }
.ccta__txt { display: flex; flex-direction: column; align-items: flex-start; gap: .16rem; }
.ccta__head { display: flex; flex-direction: column; align-items: flex-start; gap: .19376rem; }
.ccta__ttl { font-weight: 700; font-size: .44096rem; line-height: .6499rem; letter-spacing: .030867rem; white-space: nowrap; }
.ccta__ttl > span { display: block; }
.ccta__sp { letter-spacing: -.1248rem; }
.ccta__ttl > span:first-child { margin-left: -.26rem; } /* 行頭の「の空き（Figma は「が左端にそろう） */ /* 先頭の空白（Figma：tracking −12.48px） */
.ccta__lead { font-weight: 500; font-size: .15503rem; line-height: .29rem; letter-spacing: .023254rem; white-space: nowrap; }
.ccta__tags { display: flex; gap: .14rem; }
.ccta__tags li { padding: .0488rem .19265rem .0888rem; /* 文字を塗りの上下中央に（カンプ実測） */ background: #352e2e; font-weight: 700; font-size: .18712rem; line-height: .27578rem; letter-spacing: .018712rem; white-space: nowrap; }
.ccta__badge { display: flex; align-items: center; gap: .20419rem; }
.ccta__circle { flex: none; width: 1.15308rem; height: 1.15308rem; border-radius: 50%; background: #352e2e; display: flex; align-items: center; justify-content: center; padding: 0 0 .06rem .0185rem; font-weight: 700; font-size: .18545rem; line-height: .27332rem; letter-spacing: .018545rem; text-align: center; }
.ccta__min { display: flex; align-items: flex-end; gap: .03603rem; }
.ccta__min b { display: flex; align-items: center; height: .63146rem; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .81563rem; line-height: 1.947rem; letter-spacing: .024469rem; }
.ccta__min span { width: .38201rem; height: .46015rem; font-weight: 700; font-size: .37701rem; line-height: .55565rem; letter-spacing: .026391rem; }
.ccta__r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .40rem; }
.ccta__form { display: contents; }
.ccta__top { display: flex; flex-direction: column; align-items: flex-start; gap: .26rem; }
.ccta__box { width: 5.24924rem; display: flex; flex-direction: column; align-items: center; gap: .20rem; }
.ccta__sub { display: flex; flex-direction: column; align-items: flex-start; gap: .06165rem; }
.ccta__sub > span, .ccta__sub > label { font-weight: 700; font-size: .19537rem; line-height: .28794rem; letter-spacing: .013676rem; white-space: nowrap; }
.ccta__sub::after { content: ""; width: 5.24924rem; height: .02rem; margin: -.01rem 0; background: #fff; } /* Figma 最新：水平な線（Vector 118） */
.ccta__ta { display: block; width: 100%; height: 1.52364rem; margin: 0; padding: .10rem .14rem; border: 0; border-radius: 0; background: #fff5e8; box-shadow: inset 0 0 0 .00881rem #9f9f9f; color: #352e2e; font-family: inherit; font-size: .14rem; line-height: .24rem; letter-spacing: .01rem; resize: none; outline: none; }
.ccta__ta:focus-visible { box-shadow: inset 0 0 0 .02rem #352e2e; }
.ccta__chips { display: grid; grid-template-columns: repeat(2, max-content); grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
.ccta__chip {
  display: flex; align-items: center; justify-content: center; gap: .0759rem; padding: 0 .17458rem; background: #fff;
  box-shadow: inset 0 0 0 .00759rem #9f9f9f; color: #9f9f9f; text-align: left; cursor: pointer;
  font-family: inherit; font-weight: 400; font-size: .09108rem; line-height: .29691rem; letter-spacing: .013662rem;
}
.ccta__chip:nth-child(3n+1) { box-shadow: inset 0 0 0 .01518rem #9f9f9f; }
.ccta__chip span { width: 2.13285rem; }
/* 2行になる悩み（10/29 入稿の文言）でも行の高さを変えない：行間を詰めて2行を1行分の高さに収め、改行位置をそろえる */
.ccta__chip { min-height: .29691rem; }
.ccta__chip span { line-height: .14rem; text-wrap-style: balance; word-break: auto-phrase; }
.ccta__chip i { flex: none; width: .106263rem; height: .106263rem; background: linear-gradient(#fd6a05, #fd6a05) center / .0152rem 100% no-repeat, linear-gradient(#fd6a05, #fd6a05) center / 100% .0152rem no-repeat; }
.ccta__btn {
  display: flex; align-items: center; justify-content: center; gap: .18rem; padding: .15725rem .33415rem; border-radius: .77rem; background: #352e2e;
  filter: drop-shadow(0 .07862rem .10483rem rgba(0,0,0,.08)); color: #fff; font-family: inherit;
  font-weight: 700; font-size: .16rem; line-height: .1761rem; letter-spacing: .024rem; white-space: nowrap; cursor: pointer; /* Figma 値（10.48px）はインスタンスの縮小値。カンプの字面で実測（16px） */
}
.ccta__btn i { flex: none; width: .58967rem; height: .04586rem; margin-right: -.0151rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.4773' height='5.413' viewBox='0 0 60.4773 5.413' preserveAspectRatio='none'%3E%3Cpath vector-effect='non-scaling-stroke' d='M51.9558 0.376622L58.9672 4.96296H0' fill='none' stroke='%23000' stroke-width='0.900083'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.4773' height='5.413' viewBox='0 0 60.4773 5.413' preserveAspectRatio='none'%3E%3Cpath vector-effect='non-scaling-stroke' d='M51.9558 0.376622L58.9672 4.96296H0' fill='none' stroke='%23000' stroke-width='0.900083'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  transition: transform .3s;
}
@media (hover: hover) {
  .ccta__btn:hover i { transform: translateX(.06rem); }
}

/* hidden 属性を display 指定より優先 */
.fm-clist[hidden], .cf__btns[hidden], .cf__empty[hidden], [data-only][hidden] { display: none; }

/* 視覚的に隠す（スクリーンリーダー用） */
.fm-vh { position: absolute !important; width: .01rem; height: .01rem; margin: -.01rem; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fm-select--budget { margin-top: .09rem; } /* チェックボックスの下 17px（Figma）＝ .fm-field の gap 8 ＋ 9 */