@charset "utf-8";

/* placeholderの色指定 */
::placeholder{
    color: var(--textColorAlpha30);
}

/* PHPエラー文 */
.secForm .txtError{
    color: #F00;
    font-size: 12px;
    background: url(../img/common/iconError.png) left top / 14px auto no-repeat;
    padding: 0 0 0 17px;
    margin-top: 15px;
    line-height: 14px;
}
.formPage #fNavi{
    display: none;
}

/* secForm */
.secForm{
    padding-top: 5rem;
}
.secForm .mustColor{
    color: var(--mustColor);
}
.secForm .formIn{
    position: relative;
    background-color: #fff;
    padding-top: 8.1rem;
    padding-bottom: 10rem;
}
.secForm .formIn::after{
    content: "";
    position: absolute;
    width: 0.1rem;
    height: 10rem;
    background-color: var(--textColor);
    top: calc(0% - 5rem);
    left: calc(50% - 0.05em);
}
@media only screen and (max-width:1215px){
    .secForm{
        padding-top: 2.5rem;
    }
    .secForm .formIn{
        padding-top: 4rem;
        padding-bottom: 6rem;
    }
    .secForm .formIn::after{
        height: 5rem;
        top: calc(0% - 2.5rem);
    }
}

/* secFormflow */
.secFormflow{
    margin-top: 3.5rem;
}
.secFormflow .list{
    display: flex;
    justify-content: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
.secFormflow .list::after{
    content: "";
    position: absolute;
    width: calc(100% - 3rem);
    left: 1.5rem;
    top: 0.75rem;
    height: 0.1rem;
    background-color: var(--textColor);
}
.secFormflow .item{
    display: inline-block;
    position: relative;
    padding-top: calc(1.5rem + 1rem);
    z-index: 2;
}
.secFormflow .item + .item{
    margin-left: 6rem;
}
.secFormflow .item::after{
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #fff;
    border-radius: 50%;
    border: 0.1rem solid;
    border-color: var(--textColor);
    top: 0;
    left: calc(50% - 0.75rem);
}
.secFormflow .item.on::after{
    background-color: var(--textColor);
}
.secFormflow .itemtxt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_32);
    letter-spacing: var(--pcLetterSpacing16_50);
    font-weight: bold;
}
@media only screen and (max-width:1215px){
    .secFormflow{
        margin-top: 1.7rem;
    }
    .secFormflow .list{
        margin: 0 auto;
    }
    .secFormflow .list::after{
        width: calc(100% - 2rem);
        left: 1rem;
        top: 0.5rem;
    }
    .secFormflow .item{
        padding-top: calc(1.1rem + 0.4rem);
    }
    .secFormflow .item + .item{
        margin-left: 3.2rem;
    }
    .secFormflow .item::after{
        width: 1.1rem;
        height: 1.1rem;
        left: calc(50% - 0.55rem);
    }
    .secFormflow .itemtxt{
        font-size: var(--spFontSize12);
    }
}

/* secFormCheck */
.secFormCheck{
    max-width:90rem;
    width:100%;
    margin: 0 auto;
    background-color: var(--formCheckBgColor);
    padding: 3.5rem 4rem;
    margin-top: 3rem;
}
.secFormCheck .Formchecktxt{
    font-size: var(--pcFontSize13);
    line-height: var(--pcLineHeight13_26);
}
.secForm .formOntxt{
    text-align: center;
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_32);
    font-weight: bold;
    margin-top: 3rem;
}
@media only screen and (max-width:1215px){
    .secFormCheck{
        max-width:100%;
        width:calc(335 / 375 * 100%);
        padding: 2rem 2.3rem;
        margin-top: 2rem;
    }
    .secFormCheck .Formchecktxt{
        font-size: var(--spFontSize10);
        line-height: var(--spLineHeight10_18);
    }
    .secForm .formOntxt{
        font-size: var(--spFontSize12);
        margin-top: 1.9rem;
    }
}
.secForm .formContent{
    margin-top: 2.3rem;
}

/* secFormTable */
.secFormTable{
    width: 100%;
    margin: 0 auto;
    border-top: 0.1rem solid;
    border-color: var(--textColor);
}
.secFormTable tr {
    border-bottom: solid 0.1rem;
    border-color: var(--textColor);
}
.secFormTable th,
.secFormTable td {
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_26);
}
.secFormTable th{
    position: relative;
    width: 22rem;
    vertical-align: top;
    padding-top: 4.9rem;
    font-weight: bold;
}
.secFormTable .musttxt{
    color: var(--mustColor);
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_26);
    padding-left: 0.7rem;
}

span.mustColor.musttxt {}
.secFormTable td {
    padding: 3rem 0;
    padding-left: 1.5rem;
    width: calc(100% - 22rem);
}
@media only screen and (min-width:1216px){
    .secFormTable .radioContent th,
    .secFormTable .checkContent th{
        padding-top: 3.3rem;
    }
    .secFormTable th.type_middle{
        padding: 2rem 0;
        vertical-align: middle;
    }
}
@media only screen and (max-width:1215px){
    .secFormTable{
        width: 100%;
    }
    .secFormTable tr {
        border-bottom: solid 0.1rem;
    }
    .secFormTable th,
    .secFormTable td {
        width: 100%;
        display: block;
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_22);
    }
    .secFormTable th{
        position: relative;
        width: 100%;
        padding: 0;
        padding-top: 2.1rem;
    }
    .secFormTable .musttxt{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_22);
        padding-left: 0.3rem;
    }
    .secFormTable td {
        padding: 0;
        width: 100%;
        padding-top: 0.7rem;
        padding-bottom: 2.4rem;
    }
}

/* 入力ボックス */
.secFormTable input[type="text"], 
.secFormTable input[type="tel"], 
.secFormTable input[type="email"], 
.secFormTable input[type="number"], 
.secFormTable input[type="password"], 
.secFormTable select,
.secFormTable textarea {
    position: relative;
    height: 6rem;
    border:0.1rem solid;
    border-color: var(--formCheckBgColor);
    background: var(--formCheckBgColor);
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_30);
    padding: 1rem 1.5rem;
    font-family: inherit;
    color: var(--textColor);
    font-weight: bold;
    border-radius: 0.3rem;
}
.secFormTable textarea {
    width: 100%;
    height: 20rem;
    padding: 1.5rem 2rem;
    display: block;
}
.secFormTable .type_original{
    height: 6rem;
}
.secFormTable .selectbox,
.secFormTable .calendarbox{
    position: relative;
}
.secFormTable .selectbox::after{
    content: "";
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    top: calc(50% - 0.4rem);
    right: 2rem;
    background-color: var(--textColor);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.secFormTable select,
.secFormTable .calendarbox input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 3rem;
}
@media only screen and (max-width:1215px){
    .secFormTable input[type="text"], 
    .secFormTable input[type="tel"], 
    .secFormTable input[type="email"], 
    .secFormTable input[type="number"], 
    .secFormTable input[type="password"], 
    .secFormTable select,
    .secFormTable textarea {
        height: 5rem;
        padding: 0.5rem 1.5rem;
    }
    .secFormTable textarea {
        height: 19rem;
        padding: 1rem;
    }
    .secFormTable .type_original{
        height: 9rem;
    }
    .secFormTable select{
        padding-right: 3rem;
    }
    .secFormTable .selectbox::after{
        right: 2rem;
        width: 0.6rem;
        height: 0.6rem;
        top: calc(50% - 0.3rem);
    }
}
.secForm .fBox{
    display: flex;
    align-items: center;
}
.secForm .txtNote{
    font-size: var(--pcFontSize13);
    line-height: var(--pcLineHeight13_26);
    margin-top: 1.2rem;
    font-weight: 500;
}
@media only screen and (max-width:1215px){
    .secForm .txtNote{
        font-size: var(--spFontSize10);
        line-height: var(--spLineHeight10_18);
        margin-top: 1.6rem;
    }
    .secForm .fBox.block{
        display: block;
    }
}
.secForm .righttxt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_26);
    font-weight: bold;
    margin-left: 1.9rem;
}
@media only screen and (max-width:1215px){
    .secForm .righttxt{
        font-size: var(--spFontSize14);
        margin-left: 1.5rem;
    }
}
/* コンテンツ幅 */
.secForm .w100p{width: 100%;}
.secForm .w90{width: 9rem;}
.secForm .w200{width: 20rem;}
.secForm .w280{width: 28rem;}
.secForm .w500{width: 50rem;}
@media only screen and (max-width:1215px){
    .secForm .ws100p{width: 100%;}
    .secForm .ws150{width: 15rem;}
    .secForm .ws80{width: 8rem;}
}

/* dayslist */
.secForm .dayslist{
    width: 100%;
}
.secForm .daysItem{
    display: flex;
    align-items: center;
}
.secForm .daysItem + .daysItem{
    margin-top: 2rem;
}
.secForm .daystxt{
    padding-right: 2rem;
    white-space: nowrap;
    font-weight: bold;
}
.secForm .calendarbox + .timebox{
    padding-left: 4rem;
}
.secForm .In_calendar{
    width: 50rem;
}
.secForm .In_time{
    width: 25rem;
}
@media only screen and (max-width:1215px){
    .secForm .dayslist{
        width: 100%;
    }
    .secForm .daysItem{
        display: block;
        width: 100%;
    }
    .secForm .daysItem + .daysItem{
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 0.1rem solid;
        border-color: var(--textColorAlpha15);
    }
    .secForm .daystxt{
        padding-right: 2rem;
        white-space: nowrap;
        font-weight: bold;
        width: 7rem;
    }
    .secForm .calendarbox + .timebox{
        padding-left: 0;
        margin-top: 0.9rem;
    }
    .secForm .In_calendar{
        max-width: calc(100% - 7rem);
        flex: 1;
        width: auto;
    }
    .secForm .In_time{
        max-width: calc(100% - 7rem);
        flex: 1;
        width: 100%;
    }
}
/* ziplist */
.secForm .ziplist{
    width: 100%;
}
.secForm .zipItem{
    width: 100%;
}
.secForm .zipItem + .zipItem{
    margin-top: 1rem;
}
.secForm .ziptxt{
    color: var(--textColorAlpha30);
    font-size: var(--pcFontSize16);
    padding-right: 1.8rem;
    font-weight: bold;
}
.secForm .zipbox{
    width: 20rem;
}
.secForm .zipBtnArea{
    width: 12rem;
    margin-left: 2rem;
}
.secForm .zipbtn{
    width: 100%;
    height: 4.6rem;
    background-color: #fff;
    border: 0.1rem solid;
    border-color: var(--textColor);
    border-radius: 2.5rem;
    display: flex;
    align-items: center;
}
.secForm .zipbtn .btnIntxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_22);
    font-weight: bold;
    display: inline-block;
    width: 100%;
    text-align: center;
}
.secForm .addressbox{
    flex: 1;
    padding-left:1rem;
}
@media only screen and (max-width:1215px){
    .secForm .zipItem + .zipItem{
        margin-top: 1rem;
    }
    .secForm .ziptxt{
        color: var(--textColor);
        font-size: var(--spFontSize14);
        padding-right: 1rem;
    }
    .secForm .zipbox{
        width:100%;
        max-width: 15rem;
    }
    .secForm .zipBtnArea{
        width: 8rem;
        margin-left: 1rem;
    }
    .secForm .zipbtn{
        height: 3.4rem;
    }
    .secForm .zipbtn .btnIntxt{
        font-size: var(--spFontSize12);
    }
    .secForm .addressbox{
        padding: 0;
        margin-top: 1rem;
    }
}
/* ▼ラジオボタン */
.secForm .Radiolist{}
.secForm .RadiolistItem{
    display: block;
}
.secForm .RadiolistItem + .RadiolistItem{
    margin-top: 1.2rem;
}
.secForm .RadiolistItem label{
    position: relative;
    pointer-events: all;
    cursor: pointer;
}
.secForm .radio_input{
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 0;
    top: 0;
}
.secForm .radiotxt{
    display: inline-block;
    position: relative;
    padding-left: calc(2.8rem + 1rem);
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_28);
    letter-spacing: var(--pcLetterSpacing16_50);
    font-weight: bold;
    color: var(--textColor);
}
.secForm .radiotxt::before,
.secForm .radiotxt::after{
    content: "";
    position: absolute;
}
.secForm .radiotxt::before{
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background-color: var(--formCheckBgColor);
    left: 0;
    top: 0;
}
.secForm .radiotxt::after{
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--textColor);
    left: calc((2.8rem / 2) - 0.6rem);
    top: calc((2.8rem / 2) - 0.6rem);
    border-radius: 50%;
    opacity: 0;
}
.secForm .radio_input:checked + .radiotxt::after{
    opacity: 1;
}
.secForm .Radiolist + .otherBox{
    margin-top: 1rem;
}
@media only screen and (max-width:1215px){
    .secForm .Radiolist{
        padding-top: 0.4rem;
    }
    .secForm .RadiolistItem + .RadiolistItem{
        margin-top: 0.9rem;
    }
    .secForm .radiotxt{
        padding-left: calc(2.2rem + 1rem);
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_22);
    }
    .secForm .radiotxt::before{
        width: 2.2rem;
        height: 2.2rem;
    }
    .secForm .radiotxt::after{
        width: 0.8rem;
        height: 0.8rem;
        left: calc((2.2rem / 2) - 0.4rem);
        top: calc((2.2rem / 2) - 0.4rem);
    }
    .secForm .Radiolist + .otherBox{
        margin-top: 1rem;
    }
}
@media only screen and (max-width:374px){
    .secForm .radiotxt{
        padding-left: calc((var(--spFontSize13) * var(--spLineHeight13_22)) + 1rem);
    }
    .secForm .radiotxt::before{
        width: calc(var(--spFontSize13) * var(--spLineHeight13_22));
        height: calc(var(--spFontSize13) * var(--spLineHeight13_22));
    }
    .secForm .radiotxt::after{
        left: calc(((var(--spFontSize13) * var(--spLineHeight13_22)) / 2) - 0.4rem);
        top: calc(((var(--spFontSize13) * var(--spLineHeight13_22)) / 2) - 0.4rem);
    }
}


/* ▼チェックボタン */
.secForm .Checklist{}
.secForm .ChecklistItem{
    display: block;
}
.secForm .ChecklistItem + .ChecklistItem{
    margin-top: 1.2rem;
}
.secForm .ChecklistItem label{
    position: relative;
    pointer-events: all;
    cursor: pointer;
}
.secForm .check_input{
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 0;
    top: 0;
}
.secForm .checktxt{
    display: inline-block;
    position: relative;
    padding-left: calc(2.8rem + 1rem);
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_28);
    letter-spacing: var(--pcLetterSpacing16_50);
    font-weight: bold;
    color: var(--textColor);
}
.secForm .checktxt::before{
    content: "";
    position: absolute;
}
.secForm .checktxt::before{
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.5rem;
    background-color: var(--formCheckBgColor);
    left: 0;
    top: 0;
}
.secForm.lazyloaded .check_input:checked + .checktxt::before{
    background: url(../img/event/imgIconcheck.png) center center no-repeat;
    background-size: 1.3rem auto;
    background-color:var(--textColor);
}
.secForm .Radiolist + .otherBox{
    margin-top: 1rem;
}
@media only screen and (max-width:1215px){
    .secForm .Checklist{
        padding-top: 0.4rem;
    }
    .secForm .ChecklistItem + .ChecklistItem{
        margin-top: 0.9rem;
    }
    .secForm .checktxt{
        padding-left: calc(2.2rem + 1rem);
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_22);
    }
    .secForm .checktxt::before{
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 0.3rem;
    }
    .secForm.lazyloaded .check_input:checked + .checktxt::before{
        background-size: 1rem auto;
    }
}
@media only screen and (max-width:374px){
    .secForm .checktxt{
        padding-left: calc((var(--spFontSize13) * var(--spLineHeight13_22)) + 1rem);
    }
    .secForm .checktxt::before{
        width: calc(var(--spFontSize13) * var(--spLineHeight13_22));
        height: calc(var(--spFontSize13) * var(--spLineHeight13_22));
    }
    .secForm .checktxt::after{
        left: calc(((var(--spFontSize13) * var(--spLineHeight13_22)) / 2) - 0.4rem);
        top: calc(((var(--spFontSize13) * var(--spLineHeight13_22)) / 2) - 0.4rem);
    }
}
/* secPrivatebox */
.secPrivatebox{
    text-align: center;
    margin-top: 5rem;
}
.secPrivatebox .private_label{
    display: flex;
    align-items: center;
    width: fit-content;
    height: 6rem;
    margin: 0 auto;
    pointer-events: all;
    cursor: pointer;
    position: relative;
}
.secPrivatebox .private_input{
    position: absolute;
    width: 1rem;
    height: 1rem;
    left: 0;
    bottom: 0;
    visibility: hidden;
}
.secPrivatebox .private_txt{
    padding-left: calc(6rem + 2rem);
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_28);
    font-weight: bold;
    position: relative;
}
.secPrivatebox .private_txt::before,
.secPrivatebox .private_txt::after{
    content: "";
    position: absolute;
}
.secPrivatebox .private_txt::before{
    width: 6rem;
    height: 6rem;
    background-color: var(--formCheckBgColor);
    left: 0;
    top: calc(50% - 3rem);
    border-radius: 50%;
}
.secPrivatebox .private_txt::after{
    width: 1.4rem;
    height: 1.4rem;
    background-color: var(--textColor);
    left: calc((6rem / 2) - 0.7rem);
    top: calc(50% - 0.7rem);
    border-radius: 50%;
    opacity: 0;
}
.secPrivatebox .private_input:checked + .private_txt::after{
    opacity: 1;
}
.secPrivatebox .private_under_txt{
    font-size: var(--pcFontSize13);
    line-height: var(--pcLineHeight13_28);
    text-align: center;
    font-weight: bold;
    margin-top: 2.3rem;
}
@media only screen and (max-width:1215px){
    .secPrivatebox{
        width: calc((335 / 375) * 100%);
        margin: 0 auto;
        margin-top: 2.7rem;
    }
    .secPrivatebox .private_label{
        height: 3rem;
    }
    .secPrivatebox .private_txt{
        padding-left: calc(3rem + 1rem);
        font-size: var(--spFontSize14);
    }
    .secPrivatebox .private_txt::before{
        width: 3rem;
        height: 3rem;
        top: calc(50% - 1.5rem);
    }
    .secPrivatebox .private_txt::after{
        width: 1rem;
        height: 1rem;
        left: calc((3rem / 2) - 0.5rem);
        top: calc(50% - 0.5rem);
    }
    .secPrivatebox .private_under_txt{
        font-size: var(--spFontSize10);
        line-height: var(--spLineHeight10_18);
        text-align: left;
        margin-top: 1.6rem;
    }
}
.secSendbtn{
    margin: 0 auto;
    margin-top: 4.2rem;
    max-width: 44rem
}
.secForm .btnForm{
    display: flex;
    align-items: center;
    width:100%;
    height: 9.4rem;
    background-color: var(--keyColor);
    color: #fff;
    border-radius: 10rem;
}
.secForm .btnFormtxt{
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_30);
    font-weight: bold;
    text-align: center;
    display: inline-block;
    width: 100%;
}
@media only screen and (max-width:1215px){
    .secSendbtn{
        margin-top: 3.7rem;
        width: calc(335 / 375 * 100%);
        max-width: 40rem;
    }
    .secForm .btnForm{
        height: 6.6rem;
    }
    .secForm .btnFormtxt{
        font-size: var(--spFontSize16);
    }
}

/* co */
.coPage .secForm{
    padding-top: 10rem;
    padding-bottom: 10rem;
}
@media only screen and (min-width:1216px){
    .coPage .secFormTable th{
        padding: 2rem 0;
        vertical-align: middle;
    }
}
@media only screen and (max-width:1215px){
    .coPage .secForm{
        padding-top: 5rem;
        padding-bottom:5rem;
    }
    .coPage .secFormTable th{
        padding-top: 1.5rem;
    }
    .coPage .secFormTable td{
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }
}
.coPage .secSendbtn{
    margin-top: 8rem;
}
.secForm .btnForm.backbtn{
    width: calc(100% - 10rem);
    margin: 0 auto;
    margin-top: 3rem;
    background-color: var(--textColor);
    height: 6rem;
}
.secForm .btnForm.backbtn .btnFormtxt{
    font-size: var(--pcFontSize16);
}
@media only screen and (max-width:1215px){
    .coPage .secSendbtn{
        margin-top: 4rem;
    }
    .secForm .btnForm.backbtn{
        margin-top: 2rem;
        height: 5rem;
    }
    .secForm .btnForm.backbtn .btnFormtxt{
        font-size: var(--spFontSize14);
    }
}

.btnSendCo.no_tap,
.btnSendCoBack.no_tap{
    opacity: 0.3!important;
    pointer-events: none!important;
    transition: none!important;
}
.btnSendCo.no_tap{
    background: url(../img/common/iconLoader.png) center center / 32px auto no-repeat,var(--keyColor)!important;
    font-size: 0!important;
}
.btnSendCo.no_tap p{
    font-size: 0!important;
}
/* ok */
.okPage .okBox{
    text-align: center;
    margin-top: 5rem;
}
.okPage .oktit{
    font-size: var(--pcFontSize30);
    line-height: var(--pcLineHeight30_34);
    font-weight: bold;
}
.okPage .oktxt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_26);
    font-weight: bold;
    margin-top: 2rem;
}
.okPage .secCmnBack{
    margin-top: 3rem;
}
@media only screen and (max-width:1215px){
    .okPage .okBox{
        margin-top: 3rem;
    }
    .okPage .oktit{
        font-size: var(--spFontSize18);
        line-height: var(--spLineHeight18_28);
    }
    .okPage .oktxt{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_21);
        margin-top: 2rem;
        text-align: left;
    }
    .okPage .secCmnBack{
        margin-top: 3rem;
    }
}