/* WordPressで動かすための追加分（試作に無いもの）。試作と同じ見た目は site.css が持つ */

/* 管理バーが出ているときは、固定ヘッダーとスマホのメニューを下げる */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}
@media (max-width:760px){.admin-bar .nav.open{top:122px}}

/* ---------- 下層ページ（会社概要・特商法・個人情報保護方針・お問い合わせ） ---------- */
/* ヒーローが無いので、ヘッダーは最初から白地（JSが動かなくても読めるように） */
.is-sub .hd{background:rgba(255,255,255,.94);color:var(--black);box-shadow:0 1px 0 var(--line)}
.sub{padding:calc(76px + clamp(64px,9vw,120px)) 0 clamp(90px,12vw,150px)}
.sub-in{max-width:calc(880px + var(--pad) * 2)}
.sub-title{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:900;line-height:1.45;padding-bottom:clamp(28px,4vw,44px);border-bottom:1px solid var(--black)}
.page-body{margin-top:clamp(36px,5vw,56px);font-size:15.5px;line-height:2.1;color:#2c2b29}
.page-body > * + *{margin-top:1.4em}
.page-body h2{font-size:clamp(1.3rem,2vw,1.6rem);margin-top:2.4em}
.page-body h3{font-size:clamp(1.1rem,1.6vw,1.3rem);margin-top:2em}
.page-body a{text-decoration:underline;text-underline-offset:3px}
.page-body ul,.page-body ol{padding-left:1.4em}

/* SWELLの画像バナー（本文の先頭）は、本文を書き換えずに隠す */
.page-body .swell-block-bannerLink,
.page-body .wp-block-columns:has(.swell-block-bannerLink){display:none}

/* 表（SWELLの表の装飾クラスに頼らない） */
.page-body figure.wp-block-table{margin:0}
.page-body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.9;color:var(--black)}
.page-body .wp-block-table{margin-top:0}
.page-body .wp-block-table td,.page-body .wp-block-table th,
.page-body td,.page-body th{padding:16px 16px 16px 0;border:0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.page-body td:first-child{width:12em;color:var(--gray-d);font-weight:500}
@media (max-width:760px){
  .page-body td,.page-body .wp-block-table td{display:block;width:auto;padding:0 0 16px}
  .page-body td:first-child{width:auto;padding:16px 0 2px;border-bottom:0}
}

/* ---------- Ninja Forms（試作のフォームの見た目に合わせる） ---------- */
/* お問い合わせページでは、トップの「ご相談」と同じ黒い箱にする */
.page-body .nf-form-cont{background:var(--black);padding:clamp(28px,4vw,52px);margin-top:2.4em}
.nf-form-cont{color:#fff}
.nf-form-cont .nf-form-fields-required,
.nf-form-cont .nf-form-title{display:none}
.nf-form-cont .nf-form-content{padding:0;max-width:none}
.nf-form-cont nf-fields-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.nf-form-cont nf-field{display:block;grid-column:1 / -1}
.nf-form-cont nf-field:has(.ms-half){grid-column:auto}
@media (max-width:760px){.nf-form-cont nf-field:has(.ms-half){grid-column:1 / -1}}
.nf-form-cont .nf-field-container{margin:0}
.nf-form-cont .nf-field-label{margin:0 0 6px;padding:0}
.nf-form-cont .nf-field-label label{display:block;font-size:13px;font-weight:400;color:#bdbab3;letter-spacing:.08em;line-height:1.6}
.nf-form-cont .ninja-forms-req-symbol{font-size:0;color:var(--red)}
.nf-form-cont .ninja-forms-req-symbol::after{content:"必須";font-size:11.5px;margin-left:8px}
.nf-form-cont .ninja-forms-field:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]){width:100%;height:auto;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);color:#fff;font:400 16px var(--jp);padding:8px 0 10px;border-radius:0;box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .25s}
.nf-form-cont textarea.ninja-forms-field{resize:vertical;min-height:80px;line-height:1.8}
.nf-form-cont select.ninja-forms-field option{background:#111}
.nf-form-cont .ninja-forms-field:focus{border-color:#fff}
.nf-form-cont .ninja-forms-field::placeholder{color:#6f6d68}
.nf-form-cont .list-select-wrap .nf-field-element > div{display:none}
/* 確認のチェック（文字は右） */
.nf-form-cont .checkbox-container .field-wrap{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:12px}
/* Ninja Forms はチェック欄の入れ物を透明・絶対配置にするので、通常の並びに戻す（チェック欄が左、文字が右）。
   Ninja Forms のCSSはテーマより後に読み込まれるため、同じ強さだと負ける。.label-right と > まで書いて上回る */
.nf-form-cont .checkbox-container.label-right .field-wrap > .nf-field-element{position:static;display:block;opacity:1;width:auto;flex:none;order:0}
.nf-form-cont .checkbox-container.label-right .field-wrap > .nf-field-label{margin:0;padding:0;order:1;flex:1;width:auto}
.nf-form-cont .checkbox-container .nf-field-label label{font-size:14px;color:#dcd9d2;line-height:1.8;letter-spacing:.04em;cursor:pointer}
/* Ninja Forms は本物のチェック欄を透明にし、文字の左に四角とチェック印の絵を重ねる。横並びに組み替えると絵がずれるので、絵を消して本物を出す（試作と同じ） */
.nf-form-cont .checkbox-container .nf-field-label label::before,
.nf-form-cont .checkbox-container .nf-field-label label::after{display:none !important;content:none !important}
/* 絵のために空けていた文字の左30pxを消す（スマホ幅だけ効く指定もあるので強めに書く） */
.nf-form-cont .checkbox-container.label-right .field-wrap > .nf-field-label label{padding:0;margin:0}
.nf-form-cont input[type=checkbox].ninja-forms-field{opacity:1;position:static;margin:6px 0 0;width:16px;height:16px;accent-color:var(--red);flex:none;-webkit-appearance:checkbox;appearance:auto;cursor:pointer}
/* 送信ボタン */
.nf-form-cont .submit-container .nf-field-element input{width:auto;height:auto;background:#fff;color:#000;border:0;border-radius:0;padding:15px 40px;font:700 14.5px var(--jp);letter-spacing:.12em;cursor:pointer;transition:background .25s,color .25s}
.nf-form-cont .submit-container .nf-field-element input:hover{background:var(--red);color:#fff}
/* 入力エラーと送信後のメッセージ */
.nf-form-cont .nf-error-msg{margin-top:6px;font-size:13px;color:#ff8a73}
.nf-form-cont .nf-error .ninja-forms-field{border-color:#ff8a73 !important}
.nf-form-cont .nf-form-errors .nf-error-msg{margin-top:14px}
.nf-form-cont .nf-response-msg{font-size:15.5px;line-height:2.1;color:#fff}