/* =========================================================
   thanks.css  モーダル「thanks」専用（スマホのメニューなど）。クラス名はすべて thanks- で始まる
   ========================================================= */

/* モーダルの外枠（ヘッダーのボタンで開く）。開閉は site.js */
.modal { position: fixed; inset: 0; z-index: 100; opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.modal[hidden] { display: none; }
.modal.open { opacity: 1; }
.modal > .modal-backdrop { position: fixed; inset: 0; z-index: -1; border: 0; padding: 0; cursor: pointer; pointer-events: auto; }
.modal > .modal-body { height: 100%; pointer-events: none; }
.modal > .modal-body > .b { pointer-events: none; background: none !important; }
.modal > .modal-body > .b > * { pointer-events: all; }
html.modal-opened { overflow: hidden; }
.modal-thanks > .modal-backdrop { background: rgba(0, 0, 0, 0.16); }

/* thanks-box1: お問い合わせありがとうございます。 送信が完了いたしました。 */
.thanks-box1 { background: rgba(0, 0, 0, 0.16); border-radius: 0px; height: 100%; justify-content: center; margin: 0px; opacity: 1; padding: 0px; width: 100%; max-width: 100%; }

/* thanks-box2: お問い合わせありがとうございます。 送信が完了いたしました。 */
.thanks-box2 { background: rgba(0, 0, 0, 0.16); border-radius: 0px; flex: 0 0 auto; height: 100vh; justify-content: center; margin: 0px; opacity: 1; padding: 0px; width: 100%; max-width: 100%; }

/* thanks-box3: お問い合わせありがとうございます。 送信が完了いたしました。 */
.thanks-box3 { place-content: center; align-items: center; background: rgb(255, 255, 255); border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 15px 0px; flex: 0 0 auto; flex-flow: column; height: 350px; margin: 20px; opacity: 1; overflow: hidden auto; padding: 0px 20px; width: 570px; max-width: calc(100% - 40px); }

/* thanks-pic1:  */
.thanks-pic1 { inset: 20px 20px auto auto; flex: 0 0 auto; height: 24px; margin: 0px; position: absolute; width: 24px; max-width: 100%; }
.thanks-pic1:hover { opacity: 0.5; }

/* thanks-box4: お問い合わせありがとうございます。 送信が完了いたしました。 */
.thanks-box4 { place-content: flex-start center; align-items: flex-start; flex-flow: column; padding: 0px; }
@media screen and (max-width: 540px) { .thanks-box4 { margin: 14px 0px 0px; max-width: 100%; } }

/* thanks-txt1: お問い合わせありがとうございます。 送信が完了いたしました。 */
.thanks-txt1 { color: rgb(51, 51, 51); flex: 0 0 auto; font-family: var(--font-a1-m); font-weight: var(--font-a1-m-weight); font-feature-settings: "palt"; font-size: 18px; font-style: normal; height: auto; letter-spacing: 0.06em; line-height: 1.73; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; }
@media screen and (max-width: 540px) { .thanks-txt1 { font-size: 15px; } }

/* thanks-txt2: 2営業日以内に折り返しご連絡させて頂きます。数日経過後も弊社 */
.thanks-txt2 { color: rgb(51, 51, 51); flex: 0 0 auto; font-family: var(--font-a1-r); font-weight: var(--font-a1-r-weight); font-feature-settings: "palt"; font-size: 13px; height: auto; letter-spacing: 0.05em; line-height: 2; margin: 19px 0px 0px; padding: 0px; text-align: justify; width: 320px; max-width: 100%; justify-content: space-between; }