@charset "utf-8";

.fs-l-main {
    max-width: 720px;
}

.fs-l-main [type="text"],
.fs-l-main [type="password"],
.fs-l-main [type="tel"] {
    padding: 0.5em;
    box-shadow: inset 1px 1px 3px rgb(0 0 0 / 10%);
}

.fs-c-inputInformation__field {
    max-width: 720px;
}

/* 入力欄 */
.fs-c-inputTable > tbody > tr {
    gap: 0.5em;
}

/* 入力欄 ラベル */
.fs-c-inputTable__label {
    display: flex;
    align-items: center;
}

/* [ 必須 ]マーク */
.fs-c-requiredMark {
    display: inline;
    order: -1;
    width: auto;
    height: auto;
    padding: 1px 5px 3px;
    margin: 1px 1em 0 0;
    font-size: 12px;
    line-height: 1;
    color: #fff !important;
    text-indent: 0;
    background-color: #ad1f1f;
    border-radius: 3px;
}

/* [ 必須 ]マーク */
.fs-c-requiredMark::before {
    display: inline;
    content: "";
}

/* [ 任意 ]マーク */
.fs-c-optionMark {
    padding: 4px 5px;
    margin: 1px 1em 0 0;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background-color: #3678b3;
    border-radius: 3px;
}

/* メールアドレスの注意メッセージ */
.mail_message {
    padding: 12px;
    margin: 20px 0;
    color: #223a70;
    background-color: #e8efff;
    border: 1px solid #c3d5ff;
    border-radius: 10px;
}

/* メールアドレスの注意メッセージ */
.mail_message p {
    margin: 0;
}

/* メールアドレスの注意メッセージ */
.mail_message p span.alert-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 16px;
    margin-right: 0.5em;
}

/* メールアドレスの注意メッセージ */
.mail_message p span.alert-icon::before {
    position: absolute;
    top: 65%;
    width: 20px;
    height: 20px;
    content: "";
    background-color: #223a70;
    border-radius: 50%;
    translate: 0 -50%;
}

/* メールアドレスの注意メッセージ */
.mail_message p span.alert-icon::after {
    position: absolute;
    top: 60%;
    left: 53%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    content: "!";
    translate: 0 -50%;
    translate: -50% -50%;
}

/* メールアドレスの注意メッセージ */
.mail_message--contant {
    padding: 0 0 0 16px;
    margin-top: 16px;
    border-left: 3px solid #223a70;
}

/* メールアドレスの注意メッセージ */
.mail_message--contant p {
    font-weight: bold;
}

/* メールアドレスの注意メッセージ */
.mail_message--contant p span {
    position: relative; /* 擬似要素の基準にする */
    display: inline-block;
    width: 4em;
}

.mail_message--contant p span::after {
    position: absolute;
    right: 0; /* 右端に配置 */
    padding-right: 0.5em;
    content: ":";
}

/* 郵便番号 */
.fs-c-inputField__field--zipCode {
    gap: 8px;
    align-items: flex-end;
}

/* 入力欄 ドロップダウン */
.fs-c-dropdown__menu {
    padding: 0.5em;
}

/* メールマガジンの購読 チェックマーク */
.fs-c-radioGroup {
    flex-flow: row wrap;
    width: 100%;
}

/* メールマガジンの購読 チェックマーク */
.fs-c-radioGroup > * {
    flex-basis: auto;
}

/* メールマガジンの購読 注意書き */
.fs-c-radioGroup + .fs-c-inputField__explanation {
    margin: 0.5em 0 0;
    font-size: 12px;
}

/* 会員規約、個人情報保護方針のチェックマーク */
.fs-c-additionalCheckField {
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
}

/* 会員規約、個人情報保護方針のチェックマーク */
fieldset:not(.fs-c-additionalCheckField) + .fs-c-additionalCheckField {
    margin-top: 48px;
}

/* [ 登録 ] [ショッピングカートへ戻る] [ 退会する ] ボタン */
#fs_Register button.fs-c-button--confirmRegister.fs-c-button--primary,
#fs_RegisterSuccess .fs-c-button--primary,
#fs_EditAccountSettings .fs-c-button--primary,
#fs_MyAccountSettings .fs-c-button--primary,
#fs_DeleteAccount .fs-c-button--primary {
    padding: 1.2em 1.6em;
    background: #223a70;
    border: none;
    border-radius: 10px;
}

/* [ キャンセル ]ボタン */
#fs_DeleteAccount .fs-c-button--cancel {
    padding: 1.2em 1.6em;
    background: #f1f1f1;
    border: 1px solid #d5d9d9;
    border-radius: 10px;
    box-shadow: none;
}

/* [ キャンセル ]ボタン */
#fs_DeleteAccount .fs-c-button--cancel .fs-c-button__label {
    margin-bottom: 0;
}

/* [ 退会する ] ボタン */
#fs_DeleteAccount .fs-c-buttonContainer--pair > .fs-c-button--confirmLeave {
    grid-row: 1;
    grid-column: 1;
    justify-self: end;
}

/* [ キャンセル ] ボタン */
#fs_DeleteAccount .fs-c-buttonContainer--pair > .fs-c-button--cancel {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
}

#fs_RegisterSuccess .fs-c-button--primary .fs-c-button__label,
#fs_EditAccountSettings .fs-c-button--primary .fs-c-button__label,
#fs_MyAccountSettings .fs-c-button--primary .fs-c-button__label {
    margin-bottom: 0;
}

#fs_RegisterSuccess .fs-c-cartPayment__button {
    margin-top: 4em;
}

@media (max-width: 767px) {
    /* メールアドレスの注意メッセージ */
    .mail_message p {
        font-size: 12px;
    }

    /* メールアドレスの注意メッセージ */
    .mail_message p span.alert-icon::after {
        top: 63%;
        left: 50%;
        font-size: 12px;
    }

    #fs_Register .fs-c-inputInformation__field .fs-c-inputTable {
        padding: 0;
    }

    .fs-c-button--primary .fs-c-button__label,
    .fs-c-button--secondary .fs-c-button__label {
        font-size: 16px;
        font-weight: bold;
    }

    #fs_RegisterSuccess .fs-c-button--primary .fs-c-button__label,
    #fs_MyAccountSettings .fs-c-button--primary .fs-c-button__label {
        font-size: 14px;
    }
}