@charset "utf-8";

/*-----------------------------------------------
    index
-----------------------------------------------*/
/* secReserveHero */
.secReserveHero{
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    max-width: 1800px;
    width: calc(100% - 40px);
    margin: 0 auto;
}
@media only screen and (max-width:767px){
    .secReserveHero{
        height: auto;
        border-radius: 0;
    }
    .secReserveHero img{
        position: static;
        width: 100%;
    }
}

/* secReserveTop */
.secReserveTop{
    margin-top: 80px;
}
.secReserveTop .tit{
    font-size: 24px;
    color: #f36021;
    line-height: 36px;
    text-align: center;
    font-weight: 700;
    margin-top: 9px;
}
.secReserveTop .txt{
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1.25px;
}
.secReserveTop .topList{
    display: flex;
    width: 1340px;
    max-width: calc(100% - 40px);
    margin: 53px auto 0;
}
.secReserveTop .item{
    width: 21.642%;
    margin-right: 4.4773%;
}
.secReserveTop .item:last-child{
    margin-right: 0;
}
.secReserveTop .itemTxt{
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
    margin-top: 26px;
    font-weight: 700;
    letter-spacing: 1px;
}
.secReserveTop .bgLine{
    background: linear-gradient(transparent 5%, #fed400 5% ,#fed400 95%,transparent 95%);
}
@media only screen and (max-width:767px){
    .secReserveTop{
        margin-top: 26px;
    }
    .secReserveTop .tit{
        font-size: 17px;
        line-height: 1.647;
        margin-top: 3px;
    }
    .secReserveTop .txt{
        font-size: 13px;
        line-height: 1.69;
        letter-spacing: normal;
    }
    .secReserveTop .topList{
        flex-wrap: wrap;
        width: 92%;
        max-width: 100%;
        margin: 14px auto 0;
    }
    .secReserveTop .item{
        width: 47.827%;
        margin-right: 4.346%;
    }
    .secReserveTop .item:nth-child(2n){
        margin-right: 0;
    }
    .secReserveTop .item:nth-child(n+3){
        margin-top: 22px;
    }
    .secReserveTop .img{
        width: 81.819%;
        margin: 0 auto;
    }
    .secReserveTop .itemTxt{
        font-size: 11px;
        line-height: 1.63;
        margin-top: 11px;
        letter-spacing: normal;
    }
    .secReserveTop .bgLine{
        background: linear-gradient(transparent 3%, #fed400 5% ,#fed400 97%,transparent 97%);
    }
}
@media only screen and (max-width:359px){
    .secReserveTop .tit{
        font-size: 14px;
    }
    .secReserveTop .txt{
        font-size: 11px;
    }
    .secReserveTop .itemTxt{
        font-size: 10px;
    }
}
/* secArea */
.secArea{
    margin-top: 64px;
}
.secArea .areaList{
    display: flex;
}
.secArea .areaItem{
    width: calc(50% - 30px);
    margin-right: 60px;
    background: #faf8f5;
    padding: 40px 36px;
}
.secArea .areaItem:last-child{
    margin-right: 0;
}
.secArea .areaItem.map{
    padding: 40px;
}
.secArea .map .img{
    padding: 0 45px;
}
.secArea .btn{
    width: 100%;
    height: 44px;
    border: solid 1px #00b4ff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    margin-top: 27px;
    border-radius: 3px;
    color: #00b4ff;
}
.secArea .spanIcon{
    position: relative;
    padding-left: 36px;
}
.secArea .spanIcon::after{
    position: absolute;
    content: "";
    width: 18px;
    height: 18px;
    left: 4px;
    top: -3px;
}
.secArea .spanIcon.lazyloaded::after{
    background: url(../img/reserve/iconAccess.gif) center top / cover;
}
.secArea .itemTxt{
    font-size: 15px;
    line-height: 2;
    margin-top: 21px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.secArea .map .itemTxt{
    margin-top: 33px;
}
.secArea .txtSub{
    font-size: 11px;
    margin-top: 15px;
    font-weight: 500;
}
@media only screen and (max-width:767px){
    .secArea{
        margin-top: 26px;
    }
    .secArea .areaList{
        display: block;
    }
    .secArea .areaItem{
        width: 100%;
        margin-right: 0;
        padding: 30px 4% 26px;
    }
    .secArea .areaItem:last-child{
        margin-top: 10px;
    }
    .secArea .areaItem.map{
        padding: 30px 4% 26px;
    }
    .secArea .map .img{
        padding: 0;
    }
    .secArea .btn{
        font-size: 12px;
        margin-top: 20px;
    }
    .secArea .spanIcon{
        padding-left: 18px;
    }
    .secArea .spanIcon::after{
        width: 12px;
        height: 12px;
        left: 0;
        top: 0;
    }
    .secArea .itemTxt{
        font-size: 12px;
        line-height: 1.8;
        margin-top: 16px;
        letter-spacing: normal;
    }
    .secArea .map .itemTxt{
        margin-top: 16px;
    }
    .secArea .txtSub{
        font-size: 10px;
        line-height: 1.4;
        margin-top: 7px;
    }
}

/* popup */
#popup .popupMain {
    width: 1440px;
}
#popup .popupAccess{
    padding: 30px;
    background: #fff;
}
@media only screen and (max-width:767px){
    #popup .popupMain{
        width: 100%;
    }
    #popup .popupAccess{
        padding: 10px;
    }
}
/* secModelhouse */
.secModelhouse{
    margin-top: 260px;
}
.secModelhouse .titJpn{
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    position: relative;
}
.secModelhouse .titJpn::after{
    position: absolute;
    content: "";
    width: 131px;
    height: 162px;
    left: calc(50% - 65px);
    top: -190px;
}
.secModelhouse .titJpn.lazyloaded::after{
    background: url(../img/reserve/iconModel.gif) center top / cover;
}
.secModelhouse .modelList{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 58px;
}
.secModelhouse .modelList:has(> .modelItem:nth-child(4)){
    justify-content: flex-start;
}
.secModelhouse .modelItem{
    width: 20.715%;
    margin-right: 5.7133%;
    text-align: center;
    position: relative;
    padding-bottom: 132px;
}
.secModelhouse .modelItem:nth-child(4n),.secModelhouse .modelItem:last-child{
    margin-right: 0;
}
.secModelhouse .modelItem:nth-child(n+5){
    margin-top: 50px;
}
.secModelhouse .img{
    width: 100%;
    padding-top: 130.345%;
}
.secModelhouse .modelName{
    font-size: 23px;
    line-height: 1.5;
    margin-top: 25px;
}
.secModelhouse .placeTxt{
    font-size: 12px;
    line-height: 1.5;
    margin-top: 14px;
    letter-spacing: 1px;
}
.secModelhouse .btnBox{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.secModelhouse .btnReserve{
    width: 86.207%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #fff;
    background: #00b4ff;
    border-radius: 25px;
    margin: 0 auto;
    text-decoration: none;
    letter-spacing: 0.5px;
}
.secModelhouse .moreBox{
    display: flex;
    width: 79.311%;
    margin: 20px auto 0;
}
.secModelhouse .moreBtn{
    width: calc(50% - 5px);
    margin-right: 10px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #504f4a;
    border: solid 1px #edeae6;
    border-radius: 3px;
    text-decoration: none;
}
.secModelhouse .moreBtn:last-child{
    margin-right: 0;
}
.secModelhouse  .spanIcon{
    position: relative;
    padding-left: 16px;
}
.secModelhouse  .spanIcon::after{
    position: absolute;
    content: "";
    width: 5px;
    height: 6px;
    background: #504f4a;
    clip-path: polygon(0 0,100% 50%,0 100%);
    top: 3px;
    left: 0;
}
@media only screen and (max-width:767px){
    .secModelhouse{
        margin-top: 170px;
    }
    .secModelhouse .titJpn{
        font-size: 17px;
        line-height: 1.52;
    }
    .secModelhouse .titJpn::after{
        width: 87px;
        height: 108px;
        left: calc(50% - 43px);
        top: -121px;
    }
    .secModelhouse .modelList{
        display: block;
        margin-top: 25px;
    }
    .secModelhouse .modelItem{
        width: 100%;
        margin-right: 0;
        padding: 20px 0;
        display: flex;
        align-items: center;
        border-top: solid 1px #edeae6;
    }
    .secModelhouse .modelItem:nth-child(n+5){
        margin-top: 0;
    }
    .secModelhouse .modelItem:last-child{
        border-bottom: solid 1px #edeae6;
    }
    .secModelhouse .img{
        width: 135px;
        padding-top: 0;
        height: 176px;
    }
    .secModelhouse .txtBox{
        width: calc(100% - 135px);
        padding: 0 0 10px 15px;
        text-align: left;
    }
    .secModelhouse .modelName{
        font-size: 16px;
        margin-top: 0;
    }
    .secModelhouse .placeTxt{
        font-size: 10px;
        margin-top: 7px;
        letter-spacing: 0.5px;
    }
    .secModelhouse .btnBox{
        position: static;
    }
    .secModelhouse .btnReserve{
        width: 160px;
        height: 34px;
        font-size: 11px;
        border-radius: 17px;
        margin: 13px auto 0 0;
    }
    .secModelhouse .moreBox{
        display: flex;
        width: 100%;
        margin: 12px auto 0;
        padding-left: 17px;
    }
    .secModelhouse .moreBtn{
        width: auto;
        margin-right: 26px;
        height: auto;
        display: inline-block;
        font-size: 10px;
        border: none;
        border-radius: 0;
        text-decoration: underline;
        text-underline-offset: 6px;
    }
    .secModelhouse  .spanIcon{
        padding-left: 0;
    }
    .secModelhouse  .spanIcon::after{
        top: 4px;
        left: -10px;
    }
}
@media only screen and (max-width:374px){
    .secModelhouse .modelName {
        font-size: 15px;
    }
}

@media only screen and (max-width:359px){
    .secModelhouse .modelName{
        font-size: 13px;
    }
    .secModelhouse .img{
        width: 125px;
        height: 163px;
    }
    .secModelhouse .txtBox {
        width: calc(100% - 125px);
        padding: 0 0 10px 10px;
    }
    .secModelhouse .btnReserve {
        width: 140px;
        height: 28px;
        border-radius: 14px;
        margin: 10px auto 0 0;
    }
}

/* secPresent */
.secPresent{
    width: 1100px;
    margin: 65px auto 0;
    position: relative;
    padding: 56px 55px 46px;
    background: #fff;
    border-radius: 15px;
}
.secPresent .presentTit{
    position: absolute;
    top: -35px;
    left: calc(50% - 329px);
}
.secPresent .presentTxt{
    font-size: 12px;
    line-height: 1.83;
    font-weight: 500;
    letter-spacing: 0.25px;
}
@media only screen and (max-width:767px){
    .secPresent{
        width: 92%;
        margin: 49px auto 0;
        padding: 45px 15px 16px;
        border-radius: 7px;
    }
    .secPresent .presentTit{
        width: 87.827%;
        top: -27px;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 303px;
    }
    .secPresent .presentTxt{
        font-size: 10px;
        line-height: 1.9;
        letter-spacing: normal;
    }
}

/* secForm */
.secForm .formIn{
    padding-top: 20px;
}
.secCalendar{
    margin-top: 30px;
}
@media only screen and (max-width:767px){
    .secForm .formIn{
        padding-top: 5px;
    }
    .secCalendar{
        margin-top: 25px;
    }
}

.btnQuestion {
    margin-top: 20px;
    text-align: center;
}
.btnQuestion .btnQuestionLink {
    background: #fed400;
    text-align: center;
    font-size: 15px;
    width: 400px;
    padding: 28px 0;
    display: inline-block;
    color: #504f4a;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    position: relative;
}
.btnQuestionLink::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 10px;
    right: 40px;
    top: calc(50% - 5px);
}
.btnQuestionLink.lazyloaded::after {
    background: url(../img/common/iconQuestionLink.png) center top / cover;
}
.ok .secCmnBack {
    margin-top: 40px;
}

@media only screen and (max-width:767px) {
    .btnQuestion {
        margin-top: 9px;
    }
    .btnQuestion .btnQuestionLink {
        width: 265px;
        padding: 17px 0;
        font-size: 12px;
    }
    .btnQuestionLink::after {
        width: 6px;
        height: 8px;
        right: 20px;
        top: calc(50% - 3px);
    }
    .ok .secCmnBack {
        margin-top: 20px;
    } 
}

.formIn .txtcampaign {
    font-size: 15px;
    color: #eb5c02;
    text-align: center;
    margin-top: 30px;
    font-weight: bold;
    letter-spacing: 1px;
}
@media only screen and (max-width:767px)  {
    .formIn .txtcampaign {
        font-size: 13px;
        line-height: 1.69;
        letter-spacing: 0;
        margin-top: 19px;
    }
}