/* ==================================================================================================== */
/* フォームCSS */
/* ==================================================================================================== */

/* ベース */
main.form { margin-top:60px; max-width:100vw; }
main.form input[type="text"], main.form input[type="email"], main.form input[type="tel"], main.form textarea { background-color:#ddd; border:1px solid var(--bk); box-sizing:border-box; padding:5px; max-width:100%; }
main.form input[type="text"]:focus, main.form input[type="email"]:focus, main.form input[type="tel"]:focus, main.form textarea:focus { background-color:var(--wh); }
.msg { color:#f00; }
section.content-block { background-color:var(--wh); padding:20px; margin:auto; margin-bottom:40px; }
section.content-block.fax-box { padding:20px; max-width:calc( 100% - 40px ); }

/* 見出し */
h2.page-title { text-align:center; margin:auto; margin-top:40px; margin-bottom:16px; }
h2.page-title img { height:auto; max-width:209px; width:100%; }

/* リスト */
main.form section.form-section, div.row { flex-direction:column; }
main.form section.form-section { display:flex; gap:24px; padding:0 20px; margin-bottom:40px; }
div.row { align-items:flex-start; gap:8px; }

/* テキスト */
div.row p { font-size:16px; font-weight:500; gap:24px; line-height:200%; }
div.row p span.hissu { align-items:center; background-color:#ff6613; border-radius:20px; color:var(--wh); display:inline-flex; font-size:12px; font-weight:500; justify-content:center; line-height:24px; padding:0 8px; width:52px; }

/* ボタン */
p.btn { text-align:center; padding-top:56px; }
p.btn input[type="submit"], p.btn input[type="button"] { appearance:none; background-color:transparent; border:none; background-image:url(../img/submit.png); background-repeat:no-repeat; background-position:center; background-size:contain; cursor:pointer; display:inline-block; text-indent:-9999px; overflow:hidden; transition:filter 0.3s, opacity 0.3s; height:40px; width:225px; }
p.btn input[type="submit"]:hover { background-image:url(../img/submit-ov.png); }
p.btn input.send[type="submit"] { background-image:url(../img/send.png); }
p.btn input.send[type="submit"]:hover { background-image:url(../img/send-ov.png); }
p.btn input.back[type="button"] { background-image:url(../img/back.png); }
p.btn input.back[type="button"]:hover { background-image:url(../img/back-ov.png); }

/* FAXでの申し込み */
section.content-block.fax-box p { font-size:16px; font-weight:500; line-height:200%; margin-bottom:8px; }
section.content-block.fax-box p a.flex { align-items:center; flex-direction:column; gap:8px; justify-content:center; }
section.content-block.fax-box p.fax-nmb { font-size:18px; text-align:center; line-height:30px; letter-spacing: -0.9px; }
section.content-block.fax-box p.fax-nmb::before { aspect-ratio:1/1; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:url('../img/icon-fax.svg'); content:''; display:inline-block; vertical-align:middle; margin-right:16px; height:37px; width:37px; }

@container( min-width:960px ) {

/* ベース */
main.form { margin-top:100px; }
main.form section.form-section { margin:auto; margin-bottom:113px; max-width:1000px; }
section.content-block { padding:40px; margin-bottom:80px; max-width:1000px; width:100%; }
section.content-block.fax-box { padding:40px; margin:auto; margin-bottom:204px; max-width:425px; }

/* 見出し */
h2.page-title { margin-top:60px; margin-bottom:80px; }
h2.page-title img { max-width:336px; width:100%; }

/* リスト */
div.row { align-content:flex-start; flex-direction:row; }
div.row p { width:calc( 100% - 600px ); }
main.form input[type="text"], main.form input[type="email"], main.form input[type="tel"], main.form textarea, p.input { max-width:600px; width:100%; }

/* FAXでの申し込み */
section.content-block.fax-box p a.flex { flex-direction:row; gap:auto; justify-content:space-between; }
section.content-block.fax-box p.fax-nmb { font-size:24px; text-align:left; line-height:32px; }

}

/* ==================================================================================================== */
/* 入会フォーム */
/* ==================================================================================================== */

/* 見出し */
h2.page-title.join img { aspect-ratio:390/58; height:auto; max-width:390px; min-width:300px; width:100%; }

/* 前文 */
section.join div.flex { flex-direction:column; gap:24px; }
section.join div.flex h3 { color:var(--gr-3); font-size:16px; font-weight:500; line-height:200%; }

@container( min-width:960px ) {

/* 見出し */
h2.page-title.join img { aspect-ratio:592/66; height:auto; max-width:592px; width:592px; }

}

/* ==================================================================================================== */
/* 通信購読 */
/* ==================================================================================================== */

/* 見出し */
h2.page-title.subscription img { aspect-ratio:368/58; height:auto; max-width:368px; min-width:300px; width:100%; }
section.content-block h2 { color:var(--gr-1); font-size:18px; font-weight:500; line-height:30px; letter-spacing:-0.9px; margin-bottom:16px; }
section.tsushin h2 span { font-size:32px; display:inline-block; margin:0 5px; }

/* トップ部分 */
section.tsushin p.kodoku { align-items:center; gap:16px; margin-bottom:24px; }
section.tsushin p.kodoku span.price { align-items:center; background-color:var(--ye); border-radius:20px; color:var(--bk); display:flex; gap:10px; justify-content:center; padding:5px 16px; }
section.tsushin p.kodoku span.breakdown span.big { font-size:32px; font-weight:500; }

/* ページトップ本文 */
div.honbun p { font-size:16px; font-weight:300; line-height:30px; letter-spacing:-0.8px; }

/* 本文 */
div.tsushin-content h3 { color:var(--gr-1); font-weight:500; line-height:200%; }
div.tsushin-content p, div.tsushin-content ul li { font-size:16px; font-weight:300; line-height:30px; letter-spacing:-0.8px; margin-bottom:40px; }
div.tsushin-content img { display:block; text-align:center; margin:auto; margin-bottom:40px; height:auto; max-width:100%; width:100%; }

/* 賛助口数 */
div.row p.join-flex { align-items:baseline; gap:8px; justify-content:flex-start; margin-bottom:8px; max-width:100%; }
div.row p.join-flex input[type="text"] { width:auto; }
div.row p.join-flex.w80 input[type="text"] { width:80px; }
div.row p.join-flex.w80 input.w-auto[type="text"] { max-width:150px; width:auto; }

@container( min-width:960px ) {

/* 見出し */
h2.page-title.subscription img { aspect-ratio:592/66; height:auto; max-width:592px; width:592px; }
section.content-block.tsushin h2 { text-align:justify; margin:auto; margin-bottom:16px; max-width:371px; }

/* トップ部分 */
section.tsushin p.kodoku { margin:auto; margin-bottom:24px; max-width:371px; }

/* 本文 */
div.tsushin-content p, div.tsushin-content ul li { line-height:200%; }
div.tsushin-content img { max-width:750px; }

/* 賛助口数 */
div.row div.all-row { flex-direction:row; display:flex; justify-content:flex-start; gap:8px; max-width:600px; width:100%; }
div.row div.all-row p.join-flex { width:auto; }
div.row p.join-flex.w80 input.w-auto[type="text"] { max-width:150px; width:auto; }

}