@charset "utf-8";


/* ==================================================================
    reserve.css

=================================================================== */

/* ==================================================================
   ■ 共通指定
=================================================================== */
#reserve section .inner {
    max-width: 1128px;
    margin: auto;
}
#reserve section:last-child {
    padding-bottom: 150px;
}

/* --------------------------------
   □  footer
-------------------------------- */
#reserve footer {
    padding-top: 0;
}


/* --------------------------------
   □  specialOffer
-------------------------------- */
#specialOffer {
    padding-top: 0;
}
#specialOffer ul.text {
    margin-bottom: 0;
}

/* ◆ acd-check
---------------------------- */
.acd-check {
    display: none
}
.acd-check:checked + .acd-label + .acd-content {
    height: auto;
    opacity: 1;
    visibility: visible;
    margin-top: 30px;
}
.acd-label {
    color: #7993BA;
    cursor: pointer;
}
    .acd-label:hover{
            opacity: 0.7;
        }
.acd-content {
    height: 0;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
    margin-left: -1em;
}
#specialOffer .acd-content .boxArea {
    padding: 50px 4%;
}
#specialOffer .acd-content .boxArea .lv4.title {
    padding-left: 0;
    text-indent: 0;
}
#specialOffer .acd-content .boxArea .asterisk {
    margin-top: 10px;
}

/* ==================================================================
   ■ index ページ
=================================================================== */
/* --------------------------------
   □  accent
-------------------------------- */
#reserve main > .accent {
    background-image: url(../../images/reserve/accent.jpg);
}

/* --------------------------------
   □  step
-------------------------------- */
#step .lv5.title {
    font-size: 2.1rem;
    margin-bottom: 30px;
}
    #step .lv5.title span {
        font-size: 2.6rem;
    }

/* ◆ progressbar
-------------------------------- */
.progressbar {
    position: relative;
    margin-bottom: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.progressbar li {
    position: relative;
    width: calc( 100% / 3);
    font-size: 1.6rem;
    letter-spacing: 0;
}
.progressbar li span {
    position: absolute;
}
    .progressbar li:before {
        content: "";
        display: block;
        width: 107px;
        height: 107px;
        margin: 0 auto 10px auto;
        text-align: center;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        background: #FFF url(../../images/reserve/step01.svg) center no-repeat;
        border: 1px solid #002C6E;
    }
    .progressbar li:nth-child(2):before {
        background: #FFF url(../../images/reserve/step02.svg) center no-repeat;
    }
    .progressbar li:nth-child(3):before {
        background: #FFF url(../../images/reserve/step03.svg) center no-repeat;
    }

.progressbar li.active:before {
    background: #002C6E url(../../images/reserve/step01_w.svg) center no-repeat;
}
.progressbar li:nth-child(2).active:before {
    background: #002C6E url(../../images/reserve/step02_w.svg) center no-repeat;
}
.progressbar li:nth-child(3).active:before {
    background: #002C6E url(../../images/reserve/step03_w.svg) center no-repeat;
}

.progressbar li:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 53px;
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: #7993BA;
}
    .progressbar li:first-child:after {
        content: none;
    }

/* ◆ boxarea
-------------------------------- */
.boxarea {
    padding: 60px 84px;
}
/* ◆ note
-------------------------------- */
dl.note{
    padding: 12px;
    margin-top: 24px;
    background: #efefef;
}
dl.note dt{
    font-weight: 700;
    font-size: 108%;
    margin-bottom: 8px;
}
dl.note dd .heading{
    margin-bottom: 4px;
}
dl.note dd .inlinelist{
    display: flex;
    justify-content: flex-start;
    gap: 8px 14px;
}
dl.note dd .inlinelist li.buttonStyle{
    margin: 0;
}
dl.note dd .inlinelist li > span{
    line-height: 1.1;
    padding: 2px 8px;
}

dl.note dd .inlinelist + .heading{
    margin-top: 12px;
}


/* ◆ table.tableStyle
-------------------------------- */
form table.tableStyle {
    border: 0;
    width: 100%;
}
form table.tableStyle th,
form table.tableStyle td {
    display: block;
    border: 0;
}
form table.tableStyle th {
    font-size: 1.6rem;
    margin-bottom: 10px;
}
    form table.tableStyle th span.em {
        display: inline-block;
        line-height: 1;
        padding: 4px 6px;
        margin-right: 10px;
        font-size: 1.2rem;
        color:#002C6E;
        border:1px solid #002C6E;
    }
        form table.tableStyle th span.em.required {
            color:#fff;
            background-color: #002C6E;
        }

form table.tableStyle td {
    font-size: 1.4rem;
    padding-left: 50px;
    margin-bottom: 60px;
}
    form table.tableStyle td ul.inline {
        overflow: hidden;
    }
        form table.tableStyle td ul.inline li {
            float: left;
            margin-bottom: 10px;
        }
            form table.tableStyle td ul.inline li:not(:last-child) {
                margin-right: 40px;
            }

    form table.tableStyle td input.short {
        box-sizing: border-box;
        width: 39%;
    }
    form table.tableStyle td input.middle {
        box-sizing: border-box;
        width: 46%;
    }
    form table.tableStyle td input.long {
        box-sizing: border-box;
        width: 99%;
    }
    form table.tableStyle td .select-wrap {
        width: 80%;
    }
    form table.tableStyle td textarea {
        box-sizing: border-box;
        width: 99%;
    }
    form table.tableStyle td .sample {
        display: block;
    }
    form table.tableStyle td .buttonStyle {
        margin-bottom: 30px;
    }

form table.tableStyle td .inTable {
    width: 100%;
}
    form table.tableStyle td .inTable tr {
        display: inline-block;
        min-width: 318px;
    }
    form table.tableStyle td .inTable tr:last-child {
        width: 100%;
    }
    form table.tableStyle td .inTable th,
    form table.tableStyle td .inTable td {
        display: inline-block;
        padding-left: 0;
        margin-bottom: 0;
    }
    form table.tableStyle td .inTable th {
        margin-right: 10px;
        min-width: 3em;
    }
    form table.tableStyle td .inTable td select {
        min-width: 230px;
        margin-right: 20px;
    }

/* ◆ telArea
-------------------------------- */
.telArea {
    padding: 45px;
}
.telArea .text {
    line-height: 2;
}
.boxarea .telArea .text._s {
   font-size: 1.3rem;
   letter-spacing: 0;
   margin-bottom: 0;
}
.telArea dl {
    margin: 20px auto;
}
.telArea dl dt {
    padding-right: 20px;
}
.telArea dl dd a {
    font-size: 3.6rem;
    color: #002C6E;
}
    .telArea dl dd a img {
        vertical-align: sub;
    }

/* ◆ calendar-wrap
-------------------------------- */
.calendar-wrap {
    margin: 60px auto 0;
}
.calendar-wrap .lv6.title {
    font-size: 1.4rem;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}
    .calendar-wrap .lv6.title span {
        font-size: 2rem;
    }
    .calendar-wrap .lv6.title:before,
    .calendar-wrap .lv6.title:after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background: url(../../images/common/icon/prev.svg) no-repeat center;
        background-size: contain;
        z-index: 1;
        transition: all 300ms 0s ease;
    }
    .calendar-wrap .lv6.title:before {
            left: -50px;
        }
        .calendar-wrap .lv6.title:after {
            background: url(../../images/common/icon/next.svg) no-repeat center;
            background-size: contain;
            right: -50px;
        }
        .calendar-wrap .lv6.title:hover:before,
        .calendar-wrap .lv6.title:hover:after {
            opacity: 0.7;
            cursor:pointer;
        }
.calendar-wrap .js-scrollable {
    margin-bottom: 60px;
}
table.calendar {
    width: 100%;
    border: 1px solid #D9D9D9;
}
table.calendar th,
table.calendar td {
    text-align: center;
    font-size: 1.4rem;
    padding: 10px 2px;
    border-bottom: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
}
 table.calendar thead th {
    color: #fff;
    background-color: #002C6E;
}
table.calendar tbody td {
    font-size: 1.8rem;
    color: #002C6E;
}
    table.calendar tbody td:first-child {
        font-size: 1.4rem;
        color: #111;
        width: 160px;
    }

/* ◆ buttonStyle
-------------------------------- */
.submitArea .buttonStyle {
    text-align: center;
    max-width: 421px;
    margin: 0 auto;
}
.submitArea .buttonStyle.gold button {
    font-size: 1.6rem;
    padding: 17px 32px;
    width: 100%;
    text-align: center;
    color: #fff;
    background-color: #917C52;
    border: 1px solid #917C52;
}
    .submitArea .buttonStyle.gold button span:before {
        width: 7px;
        height: 11px;
        background: url(../../images/common/icon/arrow_white.svg) no-repeat right center;
        background-size: contain;
        top: 23px;
        right: 5%;
    }
    .submitArea .buttonStyle.gold button:hover {
        opacity: 1;
    }
        .submitArea .buttonStyle.gold button:hover span:before {
            right: 3%;
        }

.submitArea .buttonStyle + .buttonStyle {
        margin-top: 20px;
    }
.submitArea .buttonStyle.back a {
    font-size: 1.6rem;
    padding: 17px 32px;
    width: 100%;
    text-align: center;
    line-height: 1.5;
}
    .submitArea .buttonStyle.back a span:before {
        width: 7px;
        height: 11px;
        background: url(../../images/common/icon/arrow_blue.svg) no-repeat right center;
        background-size: contain;
        transform: scale(-1, 1);
        top: 23px;
        left: 5%;
    }
    .submitArea .buttonStyle.back a:hover {
        opacity: 1;
    }
        .submitArea .buttonStyle.back a:hover span:before {
            left: 3%;
        }

/* --------------------------------
   □  contact
-------------------------------- */
#contact {
    padding-top: 0;
}
#contact p.buttonStyle.web {
    width: 100%;
    max-width: 280px;
}


/* ==================================================================
   ■ user ページ
=================================================================== */


/* ==================================================================
   ■ userCheck ページ
=================================================================== */
#reserve.userCheck form table.tableStyle th {
    font-size: 1.8rem;
    font-weight: 700;
    padding: 0;
}
#reserve.userCheck form table.tableStyle td {
    font-size: 1.6rem;
    padding: 0;
}


/* ==================================================================
   ■ confirm ページ
=================================================================== */
/* --------------------------------
   □  accent
-------------------------------- */
/* --------------------------------
   □  confirm
-------------------------------- */
#reserve #confirm .inner {
    max-width: 740px;
    margin: auto;
}
#confirm .boxarea {
    margin-bottom: 100px
}
#confirm .flexbox li {
    background-color: #fff;
    border: 1px solid #002C6E;
    border-radius: 8px;
    padding: 30px;
}
#confirm .flexbox li dl {
    color: #002C6E;
    letter-spacing: 0.09em;
    font-weight: 700;
}
    #confirm .flexbox li dt {
        font-size: 1.4rem;
    }
    #confirm .flexbox li dd {
        font-size: 2.8rem;
    }
    #confirm .inner > .asterisk {
        letter-spacing: 0;
        margin-bottom: 30px;
    }
    #confirm .lv5.title {
        font-size: 2.4rem;
        margin-bottom: 30px;
    }
    #confirm .telArea {
        border-top: 1px solid #002C6E;
        border-bottom: 1px solid #002C6E;
        margin-top: 50px;
    }
    #confirm .telArea dl {
        margin-top: 0;
    }
    #confirm .telArea dt {
        font-size: 1.8rem;
    }
    #confirm .telArea .text._s {
        margin-bottom: 0;
    }


@media (max-width: 1600px) and (min-width: 768px) {
}


@media (max-width: 1200px) and (min-width: 768px) {
}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and (min-width: 768px) {
    
    /* --------------------------------
       □  specialOffer
    -------------------------------- */
    #specialOffer .acd-content .boxArea {
        padding: 30px 4%;
    }

    
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □  step
    -------------------------------- */
    /* ◆ progressbar
    -------------------------------- */
    .progressbar li {
        font-size: 1.4rem;
    }
        .progressbar li:before {
            width: 80px;
            height: 80px;
            background-size: 40%!important;
        }
        .progressbar li:after {
            top: 39px;
        }

    /* ◆ boxarea
    -------------------------------- */
    .boxarea {
        padding: 60px 4%;
    }

    /* ◆ telArea
    -------------------------------- */
    .telArea {
        padding: 45px 4%;
    }
    .telArea dl {
        flex-direction: column;
    }
}


@media only screen and (max-width : 767px) {
    /* ==================================================================
       ■ 共通指定
    =================================================================== */
    #reserve section:last-child {
        padding-bottom: 60px;
    }


    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □  accent
    -------------------------------- */
    #reserve main > .accent {
        background-position: right 30% center;
    }

    /* --------------------------------
       □  flow
    -------------------------------- */
    #flow h3.lv3 {
        margin-bottom: 30px;
    }

    /* --------------------------------
       □  step
    -------------------------------- */
    /* ◆ progressbar
    -------------------------------- */
    .progressbar li {
        font-size: 1.3rem;
    }
        .progressbar li:before {
            width: 60px;
            height: 60px;
            background-size: 40%!important;
            margin-bottom: 5px;
        }
        .progressbar li:after {
            top: 29px;
        }

    /* ◆ table.tableStyle
    -------------------------------- */
    form table.tableStyle th,
    #reserve.userCheck form table.tableStyle th {
        font-size: 1.5rem;
        letter-spacing: 0;
        margin-bottom: 0;
        padding: 10px 0;
    }
    form table.tableStyle td,
    #reserve.userCheck form table.tableStyle td {
        font-size: 1.4rem;
        padding-left: 0;
        margin-bottom: 20px;
    }
    form table.tableStyle td .buttonStyle {
        margin-bottom: 15px;
    }
        form table.tableStyle td .buttonStyle.store a {
            padding: 12px 32px;
        }
    form table.tableStyle td .inTable th,
    form table.tableStyle td .inTable td {
        display: inline-block;
        padding-left: 0;
        margin-bottom: 0;
    }
    form table.tableStyle td .inTable th {
        margin-right: 0;
        min-width: 4em;
    }
    form table.tableStyle td .inTable td select {
        margin-right: 0;
    }
    form table.tableStyle td select,
    form table.tableStyle td input.short,
    form table.tableStyle td input.middle {
        width:100%;
    }
    form table.tableStyle td ul.inline li:not(:last-child) {
        margin-right: 30px;
    }

    /* ◆ boxarea
    -------------------------------- */
    .boxarea {
        padding: 40px 2%;
    }

    /* ◆ note
    -------------------------------- */
    dl.note{
        padding: 12px;
        margin-top: 24px;
        background: #efefef;
    }
    dl.note dt{
        font-weight: 700;
        font-size: 108%;
        margin-bottom: 8px;
    }
    dl.note dd .heading{
        margin-bottom: 4px;
    }
    dl.note dd .inlinelist{
        display: block;
        padding-left: 12px;
    }
    dl.note dd .inlinelist li + li{
        margin-top: 3px!important;
    }

    dl.note dd .inlinelist li > span{
        line-height: 1.1;
        padding: 2px 0;
    }


    
    /* ◆ telArea
    -------------------------------- */
    .telArea {
        padding: 30px 4%;
    }
    .telArea dl dd a {
        font-size: 2.6rem;
    }
    .telArea dl dd a img {
        zoom: 0.7;
    }

    /* ◆ calendar-wrap
    -------------------------------- */
    .calendar-wrap .js-scrollable {
        margin-bottom: 30px;
    }
    table.calendar th, table.calendar td {
        font-size: 1.1rem;
    }

    /* ◆ buttonStyle
    -------------------------------- */
    .submitArea .buttonStyle {
        max-width: 315px;
    }
    .submitArea .buttonStyle.gold button,
    .submitArea .buttonStyle.back a {
        font-size: 1.4rem;
        padding: 12.5px 32px;
    }
        .submitArea .buttonStyle.gold button span:before,
        .submitArea .buttonStyle.back a span:before{
            top: 18px;
        }

    /* --------------------------------
       □  contact
    -------------------------------- */
    #contact p.buttonStyle.web {
        max-width: 315px;
    }
    #contact .contactBox .txtArea .text._s {
        margin-bottom: 20px;
    }


    /* ==================================================================
       ■ confirm ページ
    =================================================================== */
    /* --------------------------------
       □  confirm
    -------------------------------- */
    #confirm .boxarea {
        margin-bottom: 60px;
    }
    #confirm .flexbox li {
        background-color: #fff;
        padding: 20px 4%;
    }
        #confirm .flexbox li:not(:last-child) {
            margin-bottom: 20px;
        }
    #confirm .flexbox li dl {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    #confirm .flexbox li dd {
        font-size: 2rem;
    }
    #confirm .lv5.title {
        font-size: 2rem;
    }

}