@charset 'UTF-8';

/**/
.section__container {
    /*font-family: '\6E38\30B4\30B7\30C3\30AF Medium', '\6E38\30B4\30B7\30C3\30AF', 'Yu Gothic Medium', 'YuGothic', sans-serif;*/
}

.sec-ttl {
    text-align: center;
    font-size: 2.429rem;
    /*32px*/
    margin-bottom: 40px;
    font-weight: bold;
}

.sec-subttl {
    font-size: 1.714rem;
    /*24px*/
    line-height: 1.5;
    font-weight: bold;
}

.js-imgSP {
    display: none;
}

/* mv */
#sec_mv {
    /* background: url(../img/mv_bg.jpg) center bottom; */
    background-color:#371f70;
    background-size: cover;
    position: relative;
}

#sec_mv .section__container {
    height: 350px;
    position: relative;
    text-align:center;
    color:#fff
}

/* search */
#sec_search h2:first-of-type {
    color: #371f70;
}

/* 検索BOXセット */
#searchBox {
    text-align: left;
    margin-bottom: 6rem;
}

#searchBox .md_searchTab {
    display: flex;
}

#searchBox .md_searchTab .md_search_tabList {
    margin: 0 3px 0 0;
}

#searchBox .md_search_tabList a {
    width: 180px;
    padding: 16px 0 10px 0;
    background: #fff;
    border-top: 2px solid #381f72;
    border-right: 2px solid #381f72;
    border-left: 2px solid #381f72;
    text-align: center;
    font-weight: bold;
    color: #381f72;
    display: block;
    text-decoration: none;
    transition: all 0.4s;
    font-size: 16px;
}

#searchBox .md_search_tabList a.is_block,
#searchBox .md_search_tabList a:hover {
    background: #381f72;
    color: #fff;
}

#searchBox .md_search_tabBody {
    border: solid 4px #381f72;
    background: #ffffff;
    padding: 15px 20px;
    clear: both;
}

#searchBox .md_search_tabBody .is_destCity div:first-of-type {
    left: inherit;
    right: 0
}

#searchBox .md_search_tabBody .md_search_item .md_search_label_reqIcon {
    width: 33px;
}

#searchBox .md_search_label {
    background-color: #381f72;
}

#searchBox .md_search_checkboxArea a.is_pleasureTrip,
#searchBox .md_search_tabBody .md_search_details_btn {
    color: #381f72;
}


/* PC -992px */
@media print,
screen and (min-width: 992px) {

    .only-sp,
    .goTop__img--sp {
        display: none !important;
    }
}

/* SP 0-992px */
@media screen and (min-width: 0px) and (max-width: 991px) {

    .only-pc,
    .goTop__img--pc {
        display: none !important;
    }

    .breadcrumb {
        width: auto;
    }

    .section__container {
        width: auto;
    }

    /* mv */
    #sec_mv .section__container {
        height: calc(55vw*1.236 + 20px);
    }

    #sec_mv .txt {
        right: 10px;
    }

    #sec_mv .txt img {
        width: calc(5100vw/375);
        max-width: 81px;
    }

    #sec_mv .mv_main {
        right: 0;
        width: 100%;
        text-align: center
    }

    #sec_mv .mv_main img {
        width: 85%;
        margin: auto;
    }

    #sec_mv .lead {
        width: auto;
        height: 85px;
    }

    #sec_mv .lead_icon {
        width: 80px;
    }

    #sec_mv .lead .lead_txt {
        font-size: 1.5rem;
        line-height: 1.5;
        padding-left: 5px;
        white-space: pre-wrap;
        padding-right: 5px;
    }

    #sec_mv .lead .lead_txt span {
        font-size: 1em;
    }

    #sec_mv h2 {
        top: auto;
        left: 0;
        width: 100%;
        text-align: center;
        bottom: 100px;
    }

    #sec_mv h2 img {
        width: 85%;
        max-width: 600px;
    }

    /* mov */
    #sec_mov .section__container {
        padding: 20px 0;
    }

    #sec_mov h2 {
        /*font-size: 2rem;*/
        line-height: 1.2;
    }

    #sec_mov .mov_box {
        padding-bottom: calc((90vw*.65));
        background: url(../img/sp/mov_main.png) bottom right no-repeat;
        background-size: 90vw;
    }

    #sec_mov .mov_box_sp img {
        width: 90vw;
        position: absolute;
        bottom: 0;
        right: -10px;
        z-index: 0;
    }

    .youtube_box {
        padding: 0 10px;
    }

    /*sec_support*/
    #sec_support .section__container {
        padding: 20px 10px;
    }

    #sec_support h2 {
        text-align: left;
        padding-left: 1em;
    }

    #sec_support .section__container > p {
        width: 100%;
        text-align: left;
        font-size: 1rem;
    }

    #sec_support .support_img {
        bottom: -20px;
        right: -10px;
        width: calc(11000vw/375);
        max-width: 110px;
    }

    #sec_support .list {
        width: 85%;
    }

    #sec_support .box {
        width: 100%;
        font-size: 1em;
    }

    /*present*/
    #sec_present .section__container {
        height: auto;
        background: url(../img/present_img.jpg) no-repeat;
        background-position: bottom -20px right -20px;
        background-size: contain;
    }

    #sec_present h2 {
        width: auto;
        margin: auto;
        top: auto;
        left: auto;
        text-align: center;
        padding: 0;
        position: relative;
    }

    #sec_present h2 img {
        width: 100%;
        max-width: 400px;
    }

    #sec_present .txt {
        position: relative;
        width: auto;
        margin: auto;
        font-size: 1.2rem;
        color: #fff;
        top: auto;
        left: auto;
        margin-top: 1rem;
    }

    #sec_present .txt > span {
        background-size: 50px;
        padding-left: 60px;
        line-height: 1.5;
        background-position-y: center;
        height: calc(50px *1.6);
    }

    #sec_present .download {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 400px;
        margin: 1rem auto 0;
    }

    #sec_present .download > span {
        width: 100%;
        padding-bottom: 1rem;
    }

    #sec_present .download a {
        width: 48%;
        margin: 0 1%;
    }

    /* search */
    #sec_search .searchsp {
        max-width: 400px;
        margin: 0 auto 2rem;
    }

    #sec_search .searchsp a {
        margin: 0 auto .8rem;
        width: 100%;
        max-width: none;
    }

    #sec_search .mailSection {
        display: block;
        padding-top: 24px;
    }

    #sec_search .mailSection a.mailto {
        height: calc(48em / 16);
        line-height: calc(48em / 16);
        background: #fff;
        border: 1px solid #555;
        color: #555;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
        border-radius: 4px;
        display: block;
        max-width: 400px;
        margin: 1rem auto 0;
    }

}

/* SP 0-640px */
@media screen and (min-width: 0px) and (max-width: 640px) {
    #sec_mv .lead .lead_txt {
        font-size: calc(12*100vw/375);
        text-align: left;
    }

    #sec_mov h2 {
        font-size: calc(26*100vw/375);
    }

    #sec_support h2 {
        font-size: 1rem;
    }

    #sec_support .list {
        width: 74%;
    }

    #sec_support .section__container > p {
        font-size: .85rem;
    }

    #sec_present .section__container {
        background-size: 35vw;
        background-position: bottom -20px right calc(-3500vw/375);
    }

    #sec_present .txt {
        font-size: calc(13*100vw/375);
    }
}

/* qr */
.QRcode .codeBox {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

.QRcode .codeBox .codeTxt {
    position: absolute;
    background: #fff;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    width: 700px;
    padding: .6em 0;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 420px;
    text-align: center;
}

.QRcode .codeBox .codeTxt .code {
    color: #e7000f;
}

.QRcode .codeImg img {
    width: 100%;
}

@media screen and (min-width: 0px) and (max-width: 991px) {
    #sec_qr .section__container {
        padding: 0;
    }

    #sec_qr .innerSection {
        padding: calc(30vw / (375/ 100)) calc(20vw / (375/ 100)) 0;
    }

    .QRcode .codeBox {
        padding: 0;
    }

    .QRcode .codeBox .codeTxt {
        width: calc((1208 / 1667) * 100%);
        font-size: calc(34vw / (1667 / 100));
        padding: calc((30 / 1667) * 100%) 0 calc((28 / 1667) * 100%);
        margin-top: calc((771 / 1667) * 100%);
    }

    #sec_qr .app {
        margin-top: calc(40vw / (375 / 100));
    }

    #sec_qr .app-inner img {
        width: 100%;
    }
}

/* app DL */
.app {
    margin-top: calc(60vw / (375 / 100));
    padding: calc(60vw / (375 / 100)) calc(30vw / (375 / 100));
    background: linear-gradient(45deg, #fcfcff, #f0edff)
}

.app figure {
    margin: 0;
}

.app-inner:first-child {
    text-align: center;
    margin-bottom: 12vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.app .sec-ttl {
    font-size: calc(16vw / (375 / 100));
    font-weight: bold;
    order: 2;
    margin-top: calc(15vw / (375 / 100));
    margin-bottom: 0;
}

.app .sec-ttl > span {
    display: inline-block;
}

.app .logo {
    order: 1;
}

.download-container p {
    font-size: calc(14vw / (375 / 100));
    margin-bottom: calc(15vw / (375 / 100));
    position: relative;
    text-align: center;
}

.download-container p:after,
.download-container p:before {
    content: "";
    display: block;
    background-color: #333;
    width: 23.33vw;
    height: 1px;
    position: absolute;
    top: calc(50% - 1px);
}

.download-container p:after {
    right: 0;
}

.download-container p:before {
    left: 0;
}

.download-container ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.download-container li {
    width: calc(50% - 2.67vw);
    text-align: center;
}

.download-container li a {
    display: block;
}

@media only screen and (min-width: 769px) {
    .app {
        margin-top: 80px;
        padding: 60px 0;
    }

    .app-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        max-width: 832px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .app-inner {
        width: 460px;
    }

    .app-inner:first-child {
        width: 274px;
        margin-bottom: 0;
    }

    .app .sec-ttl {
        font-size: 16px;
        margin-top: 0;
        width: 160px;
        padding: 15px;
    }

    .download-container p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .download-container p:after,
    .download-container p:before {
        width: 153px;
    }

    .download-container li {
        width: calc(50% - 10px);
        text-align: center;
    }
}

@media only screen and (max-width: 768px) {
    .QRcode + .app {
        margin-top: calc(40vw / (375 / 100));
    }
}