@charset "utf-8";

/*-----------------------------------------------
    secCmnTop
-----------------------------------------------*/
.secCmnTop {
    background: url(../img/mypage/bgTop.jpg) center / cover no-repeat;
    height: 30rem;
}

@media only screen and (max-width:1215px) {
    .secCmnTop {
        background: url(../img/mypage/bgTop_sp.jpg) center / cover no-repeat;
        height: 18rem;
    }
}

/* スマホ: パンくず（.pnkzWrapper）を .secLogin の下へ（#container を flex + order で入れ替え） */
@media only screen and (max-width: 1215px) {
    #container {
        display: flex;
        flex-direction: column;
    }

    #container>header.cmnHeader {
        order: 1;
    }

    #container>.secCmnTop {
        order: 2;
    }

    #container > .main,
    #container > main#main {
        order: 3;
    }

    #container > .pnkzWrapper {
        order: 4;
        height: 3.5rem;
    }

    #container > footer.cmnFooter {
        order: 6;
    }

    /* <?parts_footer?> 等で #container 直下に追加される要素（フッター直前など） */
    #container > *:not(header.cmnHeader):not(.secCmnTop):not(.main):not(main#main):not(.pnkzWrapper):not(footer.cmnFooter) {
        order: 5;
    }
}

.wpcf7-not-valid-tip{
    display: none!important;
}
.hidden{
    display: none!important;
}
.wpcf7-spinner {
    display: none!important;
}
.wpcf7 form .wpcf7-response-output {
    display: none!important;
}

/*-----------------------------------------------
    secTopMypage（タブナビ）
-----------------------------------------------*/
.secTopMypage {
    margin-top: 4rem;
}

.secTopMypage .list {
    display: flex;
    gap: 4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.secTopMypage .item {
    flex: 1;
    min-width: 0;
}

.secTopMypage .itemInner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 8rem;
    padding: 1rem 0.5rem;
    border: 0.1rem solid var(--ColorBorder);
    background: var(--whiteColor);
    box-sizing: border-box;
    font-size: var(--pcFontSize16);
    font-weight: bold;
    color: var(--textColor);
    letter-spacing: var(--pcLetterSpacing100);
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
}

.secTopMypage .itemInner.isActive {
    background: var(--colorDarkBrown);
    border-color: var(--colorDarkBrown);
    color: var(--whiteColor);
    pointer-events: none;
}

.secTopMypage .itemInner:not(.isActive):hover {
    opacity: 0.8;
}

@media only screen and (max-width: 1215px) {
    .secTopMypage {
        margin-top: 4rem;
    }

    .secTopMypage .itemInner {
        height: 4.6rem;
        font-size: var(--spFontSize12);
        line-height: calc(16 / 12);
        letter-spacing: var(--spLetterSpacing50);
    }

    .secTopMypage .list {
        gap: 1rem;
    }
}

/*-----------------------------------------------
    boxName（挨拶）
-----------------------------------------------*/
.mypageForm .boxName {
    margin: 7.5rem auto 6rem;
    text-align: center;
}

.mypageForm .boxName .titName {
    font-size: var(--pcFontSize24);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: var(--pcLetterSpacing100);
    color: var(--textColor);
}

.mypageForm .boxName .txtMypage {
    margin-top: 3rem;
    font-size: var(--pcFontSize16);
    font-weight: normal;
    letter-spacing: var(--pcLetterSpacing100);
    color: var(--textColor);
    line-height: calc(38 / 16);
}

@media only screen and (max-width: 1215px) {
    .mypageForm .boxName {
        margin: 4rem auto 3rem;
    }

    .mypageForm .boxName .titName {
        font-size: var(--spFontSize16);
        line-height: calc(28 / 16);
        letter-spacing: var(--spLetterSpacing100);
    }

    .mypageForm .boxName .txtMypage {
        margin-top: 1rem;
        font-size: var(--spFontSize13);
        line-height: calc(24 / 13);
        letter-spacing: var(--spLetterSpacing50);
    }
}

/*-----------------------------------------------
    secMyPage
-----------------------------------------------*/
.secMyPage {
    padding-bottom: 15rem;
}

@media only screen and (max-width: 1215px) {
    .secMyPage {
        padding-bottom: 4rem;
    }
}

/*-----------------------------------------------
    mypageForm（登録内容フォーム）
    ※レイアウト・入力サイズは common_form.css（イベントフォーム共通）に準拠
-----------------------------------------------*/
.mypageForm .formWrapper {
    padding-bottom: 0;
}

.mypageForm .wrapperInner {
    margin-top: 0;
}

.mypageForm .formInner {
    margin-top: 0;
}

/* 必須項目も背景を白に（common_form.css の #fffcfa を上書き） */
.mypageForm .secFormTable input[type="text"].inputRequired,
.mypageForm .secFormTable input[type="tel"].inputRequired,
.mypageForm .secFormTable input[type="email"].inputRequired,
.mypageForm .secFormTable select.inputRequired {
    background: #fff !important;
}

.mypageForm .btnForm {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 58rem;
    max-width: 100%;
    height: 9rem;
    margin: 5.5rem auto 0;
    border-radius: 0;
    background: var(--orangeColor);
    font-size: var(--pcFontSize18);
    font-weight: bold;
    color: var(--whiteColor);
    letter-spacing: var(--pcLetterSpacing100);
    transition: opacity 0.2s ease-out;
    cursor: pointer;
}

.mypageForm .btnForm:hover,
.mypageForm .btnForm:hover .btn {
    opacity: 1;
}

.mypageForm .btnForm .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-right: 1.5rem;
}

.mypageForm .btnForm input,
.mypageForm .btnForm .wpcf7-submit {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-size: 0;
    background: inherit;
}

.mypageForm .btnForm::after {
    content: "";
    position: absolute;
    top: 48%;
    left: calc(50% + 10rem);
    width: 1.5rem;
    height: 1.5rem;
    background: url(../img/common/iconArrowOrange.png) center / 1.5rem no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
}

.mypageForm .boxPass {
    margin-top: 3.5rem;
    text-align: center;
}

.mypageForm .boxPass .txtForget {
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing50);
    color: var(--ColorTag);
    text-decoration: underline;
}

.secFormTable table {
    width: 100%;
}
.secFormTable tr th {
    width: 23rem;
    flex: 0 0 24rem;
}
.secFormTable tr:first-child {
    border-top: 0.1rem solid var(--ColorBorder);
}
@media only screen and (max-width: 1215px) {
    .mypageForm .btnForm {
        width: 100%;
        height: 6rem;
        margin-top: 3rem;
        font-size: var(--spFontSize14);
    }

    .mypageForm .btnForm::after {
        left: calc(50% + 8rem);
    }

    .mypageForm .boxPass .txtForget {
        font-size: var(--spFontSize13);
    }
    .secFormTable tr th {
        flex-direction: row;
        margin: 0;
    }
    .mypageForm .boxPass {
        margin-top: 2rem;
    }
}

/*-----------------------------------------------
    mypageForm.co（入力内容確認）
-----------------------------------------------*/

.mypageForm.co .secFormTable tr td {
    padding: 4rem 0px;
    line-height: calc(38 / 17);
}

.mypageForm.co .txtConfirm {
    margin: 0;
    word-break: break-word;
}

.mypageForm.co .boxNameSingle {
    display: block;
}

.mypageForm.co .secBackBtn {
    margin: 3rem auto 0;
    text-align: center;
}

.mypageForm.co .secBackBtn .btnBack {
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing50);
    color: var(--ColorTag);
    text-decoration: underline;
}

@media only screen and (max-width: 1215px) {
    .mypageForm.co .secFormTable tr td {
        font-size: var(--spFontSize13);
        letter-spacing: var(--spLetterSpacing50);
        line-height: 1.6;
        padding: 1.3rem 0 2.6rem;
    }

    .mypageForm.co .secBackBtn .btnBack {
        font-size: var(--spFontSize13);
    }
}

/*-----------------------------------------------
    resettingForm（パスワード再設定）
-----------------------------------------------*/
.resettingForm .boxChangePassTop {
    margin: 7.5rem auto 6rem;
    text-align: center;
}

.resettingForm .titChangePass {
    font-size: var(--pcFontSize24);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: var(--pcLetterSpacing100);
    color: var(--textColor);
}
.resettingForm .txtChangePass {
    margin-top: 2rem;
    font-size: var(--pcFontSize16);
    font-weight: normal;
    letter-spacing: var(--pcLetterSpacing100);
    color: var(--textColor);
    line-height: calc(38 / 16);
}

.resettingForm.secLoginForm {
    margin-top: 0;
}

.resettingForm .boxName .titName {
    font-size: var(--pcFontSize18);
    letter-spacing: var(--pcLetterSpacing100);
}

.resettingForm .boxName {
    padding: 6rem 10rem 0;
    background: var(--ColorTagBg);
    box-sizing: border-box;
    margin: 0;
}

.resettingForm .boxName .txtAdress {
    margin-top: 1.5rem;
    font-size: var(--pcFontSize16);
    font-weight: normal;
    letter-spacing: var(--pcLetterSpacing50);
    color: var(--textColor);
}

.resettingForm .wrapperInner {
    width: 100%;
    max-width: 100rem;
    margin-inline: auto;
}

.resettingForm .formInner {
    padding: 4rem 10rem 6rem;
    background: var(--ColorTagBg);
    box-sizing: border-box;
}

.resettingForm .secFormTable,
.resettingForm .secFormTable tbody {
    display: block;
    width: 100%;
}

.resettingForm .secFormTable table {
    width: 100%;
    margin: 0;
}

.resettingForm .secFormTable tr {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 0.1rem solid var(--ColorBorder);
}

.resettingForm .secFormTable tr:last-child {
    margin-top: 2rem;
}

.resettingForm .secFormTable tr + tr {
    margin-top: 0;
}

.resettingForm .secFormTable tr th {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18rem;
    flex: 0 0 18rem;
    margin-bottom: 0;
    padding: 0 2rem;
    background: var(--ColorTagBg);
    border-right: 0.1rem solid var(--ColorBorder);
    font-size: var(--pcFontSize16);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing50);
    line-height: 1.4;
}

.resettingForm .secFormTable tr th::before {
    content: none;
    display: none;
}

.resettingForm .secFormTable tr td {
    flex: 1;
    min-width: 0;
    padding: 0;
    min-height: 0;
    font-size: inherit;
    font-weight: inherit;
    border-bottom: none;
}

.resettingForm .secFormTable tr td .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin: 0;
}

.resettingForm .passIn {
    position: relative;
    width: 100%;
}

.resettingForm .txtSub {
    margin-top: 1rem;
    font-size: var(--pcFontSize13);
    line-height: 1.6;
}

.resettingForm .secFormTable input[name="f_item_loginpass"],
.resettingForm .secFormTable input[name="f_item_loginpass_co"] {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 7rem;
    padding: 0 5rem 0 2rem;
    border: none;
    border-radius: 0;
    background: var(--whiteColor) !important;
    box-sizing: border-box;
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing50);
}

.resettingForm .iconEye {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    width: 2rem;
    height: 1.4rem;
    margin: 0;
    transform: translateY(-50%);
    cursor: pointer;
}

.resettingForm .iconEye img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.45;
}

.resettingForm .iconEye.isShow img {
    opacity: 1;
}

.resettingForm .btnForm {
    width: 58rem;
    max-width: 100%;
    height: 9rem;
    margin: 3.5rem auto 0;
}

.resettingForm .btnForm::after {
    left: calc(50% + 4.5rem);
}

.resettingForm .boxPass {
    margin-top: 3rem;
}

.resettingForm .boxFailureInner .btnForm::after {
    left: calc(50% + 10rem);
}
@media only screen and (max-width: 1215px) {
    .resettingForm .boxChangePassTop {
        margin: 3rem 0;
    }

    .resettingForm .boxName {
        padding: 2.2rem 0 0;
    }

    .resettingForm .titChangePass {
        font-size: var(--spFontSize16);
        line-height: calc(28 / 16);
        letter-spacing: var(--spLetterSpacing100);
    }

    .resettingForm .txtChangePass {
        margin-top: 1.5rem;
        font-size: var(--spFontSize13);
        line-height: calc(24 / 13);
        letter-spacing: var(--spLetterSpacing50);
    }

    .resettingForm .boxName .txtAdress {
        margin-top: 0.4rem;
        font-size: var(--spFontSize13);
        letter-spacing: var(--spLetterSpacing50);
    }

    .resettingForm .formInner {
        padding: 2.4rem 5.334% 3.5rem;
    }

    .resettingForm .secFormTable tr {
        flex-direction: column;
        border: 0.1rem solid var(--ColorBorder);
    }

    .resettingForm .secFormTable tr + tr {
        margin-top: 2rem;
    }

    .resettingForm .secFormTable tr:last-child {
        margin-top: 2rem;
    }

    .resettingForm .secFormTable tr th {
        width: 100%;
        flex: none;
        justify-content: flex-start;
        height: auto;
        min-height: 3.6rem;
        padding: 0 1.5rem;
        border-right: none;
        border-bottom: 0.1rem solid var(--ColorBorder);
        font-size: var(--spFontSize14);
    }

    .resettingForm .secFormTable tr td {
        width: 100%;
        flex: none;
    }

    .resettingForm .secFormTable input[name="f_item_loginpass"],
    .resettingForm .secFormTable input[name="f_item_loginpass_co"] {
        height: 4.8rem;
        padding: 0 4rem 0 1.2rem;
        font-size: var(--spFontSize16);
    }

    .resettingForm .btnForm {
        width: 100%;
        height: 6rem;
        margin-top: 2.5rem;
        font-size: var(--spFontSize15);
    }

    .resettingForm .btnForm::after {
        left: calc(50% + 3.5rem);
        top: 50%;
    }

    .resettingForm .boxPass {
        margin-top: 2rem;
    }

    .resettingForm .boxName .titName {
        font-size: var(--spFontSize14);
        line-height: calc(28 / 14);
        letter-spacing: var(--spLetterSpacing100);
    }
    .resettingForm .wrapperInner {
        max-width: none;
        width: 100%;
    }
    .resettingForm .boxFailureInner .btnForm::after {
        left: calc(50% + 6.5rem);
    }
}

/*-----------------------------------------------
    resettingFailure（認証失敗）
-----------------------------------------------*/
.resettingFailure .boxChangePassTop {
    margin: 7.5rem auto 6rem;
    text-align: center;
}

.resettingFailure .titFailure {
    font-size: var(--pcFontSize24);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: var(--pcLetterSpacing100);
    color: var(--textColor);
}

.resettingFailure .txtFailure {
    margin-top: 2rem;
    font-size: var(--pcFontSize16);
    font-weight: normal;
    letter-spacing: var(--pcLetterSpacing100);
    color: var(--textColor);
    line-height: calc(38 / 16);
}

.resettingFailure .boxFailureInner {
    width: 100%;
    max-width: 100rem;
    margin-inline: auto;
    box-sizing: border-box;
}

.resettingFailure .btnForm {
    margin-top: 0;
}

.resettingFailure .btnForm .btn {
    text-decoration: none;
    color: var(--whiteColor);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

@media only screen and (max-width: 1215px) {
    .resettingFailure .boxChangePassTop {
        margin: 3rem 0;
    }

    .resettingFailure .titFailure {
        font-size: var(--spFontSize16);
        line-height: calc(28 / 16);
        letter-spacing: var(--spLetterSpacing100);
    }

    .resettingFailure .txtFailure {
        margin-top: 1.5rem;
        font-size: var(--spFontSize13);
        line-height: calc(24 / 13);
        letter-spacing: var(--spLetterSpacing50);
    }

    .resettingFailure .btnForm {
        width: 100%;
        height: 6rem;
        font-size: var(--spFontSize15);
    }

    .resettingFailure .btnForm::after {
        left: calc(50% + 4.5rem);
    }
}

.resettingForm .boxBtn,
.mypageForm.ok .boxBtn {
    margin: 3.8rem auto 0;
    text-align: center;
}

.resettingForm .cmnBtnMore,
.mypageForm.ok .cmnBtnMore {
    width: 58rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-decoration: none;
    border-color: var(--borderColor);
}

@media only screen and (max-width: 1215px) {

    .resettingForm .boxBtn,
    .mypageForm.ok .boxBtn {
        margin: 2rem auto 0;
    }

    .resettingForm .cmnBtnMore,
    .mypageForm.ok .cmnBtnMore {
        width: 100%;
        height: 6rem;
        width: 89.334%;
        max-width: 33.5rem;
    }
}

/*-----------------------------------------------
    leaveForm（退会）
-----------------------------------------------*/
.leaveForm .boxName {
    padding-bottom: 0;
    text-align: center;
}

.leaveForm .formInner {
    padding-top: 3rem;
}

.leaveForm .boxLeaveReason .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.leaveForm .boxLeaveReason textarea {
    display: block;
    width: 100%;
    height: 20rem;
    padding: 2rem;
    border: 0.1rem solid var(--ColorBorder);
    border-radius: 0;
    background: var(--whiteColor);
    box-sizing: border-box;
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing50);
    line-height: calc(30 / 15);
    resize: vertical;
}

.leaveForm .boxLeaveReason textarea::placeholder {
    white-space: pre-line;
}

.leaveForm .boxLeaveCheck {
    margin-top: 3rem;
    text-align: center;
}

.leaveForm .boxLeaveCheck .wpcf7-form-control-wrap,
.leaveForm .boxLeaveCheck .wpcf7-checkbox,
.leaveForm .boxLeaveCheck .wpcf7-list-item {
    display: inline-block;
    margin: 0;
}

.leaveForm .boxLeaveCheck label {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
}

.leaveForm .boxLeaveCheck input[type="checkbox"] {
    position: static;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--textColor);
    border-radius: 0.4rem;
}

.leaveForm .boxLeaveCheck .wpcf7-list-item-label {
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing50);
    color: #cd0001;
}

.leaveForm .boxLeaveCheck input[type="checkbox"] + .wpcf7-list-item-label::before,
.leaveForm .boxLeaveCheck input[type="checkbox"] + .wpcf7-list-item-label::after {
    content: none;
    display: none;
}

.leaveForm .btnForm {
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
    border: 0.1rem solid var(--colorGray);
    background: var(--colorGray);
    transition: opacity 0.2s ease-out, border-color 0.4s ease;
}
.leaveForm .btnForm::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--textColor);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s ease;
    z-index: -1;
}
.leaveForm .btnForm:hover {
    opacity: 1;
    border-color: var(--textColor);
}
.leaveForm .btnForm:hover::before {
    transform: scaleX(1);
}
.leaveForm .btnForm:hover::after {
    background-image: url(../img/common/iconArrowBlack.png);
}

.leaveForm .btnForm::after {
    left: calc(50% + 4.5rem);
    background: url(../img/common/iconArrowGray.png) center / 1.5rem no-repeat;
}

@media only screen and (max-width: 1215px) {
    .leaveForm .formInner {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    .leaveForm .boxLeaveReason textarea {
        height: 20rem;
        padding: 1.2rem;
        font-size: var(--spFontSize16);
    }

    .leaveForm .boxLeaveReason textarea::placeholder {
        font-size: 13px;
        line-height: 2;
    }

    .leaveForm .boxLeaveCheck {
        margin-top: 2.5rem;
    }

    .leaveForm .boxLeaveCheck .wpcf7-list-item-label {
        font-size: var(--spFontSize13);
    }

    .leaveForm .btnForm::after {
        left: calc(50% + 3.5rem);
    }
}

.wpcf7-not-valid-tip {
    display: block !important;
    background: url(../img/common/iconError.png) left 2px / 14px auto no-repeat;
    width: 100%;
    color: #F00 !important;
    font-size: 12px !important;
    line-height: 1.5;
    padding: 0 0 0 17px;
    margin-top: 10px;
}
.wpcf7 form .wpcf7-response-output {
    margin: 4rem auto;
    font-size: var(--pcFontSize18);
    padding: 3rem;
}
@media only screen and (max-width: 1215px){
    .wpcf7 form .wpcf7-response-output {
        margin: 2rem auto !important;
        font-size: var(--spFontSize14) !important;
        padding: 1.5rem !important;
        line-height: 1.5 !important;
    }
}