/* ============================================================================================================================
フォーム専用
============================================================================================================================ */

:root {
--input:#f1f1f1;
--hissu:#f5938e;
}

/* ベース */
section.form { flex-direction:column; gap:40px; padding:0 20px; margin:auto; margin-bottom:80px; }
section.form input[type="text"],
section.form input[type="email"],
section.form textarea { background-color:var(--input); padding:5px 10px; max-width:100%; width:100%; }
section.form input[type="text"]:focus,
section.form input[type="email"]:focus,
section.form textarea:focus { background-color:var(--wh); }

/* 項目まとめ */
div.form-item { flex-direction:column; gap:8px; }

/* 項目タイトル */
.item-title { font-size:16px; font-weight:700; line-height:35px; letter-spacing:4px; }

/* 必須 */
.hissu { color:var(--hissu); display:inline-block; margin-left:16px; }

/* ボタン */
.btn { text-align:center; }
.btn input[type="submit"] { align-items:center; background-color:var(--ye); border-radius:50px; font-size:16px; font-weight:700; display:flex; justify-content:center; line-height:35px; letter-spacing:4px; margin:auto; margin-bottom:120px; height:45px; width:314px; }

@container( min-width:960px ) {

/* ベース */
section.form { margin-bottom:150px; max-width:680px; }

/* ページタイトル */
h2.page-title br { display:none; }

/* 項目まとめ */
div.form-item br { display:none; }

/* 必須 */
.hissu { margin-right:16px; }

}

@media( min-width:960px ) {

/* デコレーション */
main::before, main::after { position:absolute; z-index:-1; }
main::before { aspect-ratio:345/716; background-image:url('../img/common/sakura-right.png'); top:539px; right:0; height:716px; width:345px; }
main::after { aspect-ratio:327/716; background-image:url('../img/common/sakura-left-form.png'); top:1157px; left:0; height:716px; width:327px; }
}