@charset "utf-8";

body {
    background: #261708;
}

.load_Box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}

.load_Box .bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .85);
    z-index: 0;
    cursor: pointer;
}

.load_Itm {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
}

.load_Itm a {
    display: block;
    background: #fff;
    max-width: 900px;
    width: 90vw;
    transition: .3s;
}

.load_Itm img {
    width: 100%;
    transition: all .5s;
}

.load_Itm a img:hover {
    opacity: .7;
}

.closeBtn {
    box-sizing: border-box;
    display: inline-block;
    color: #000;
    letter-spacing: 4px;
    background-color: #fff;
    padding: 10px 30px;
    margin: 10px auto 0;
    cursor: pointer;
}


.float_bnr {
    position: fixed;
    bottom: 20px;
    z-index: 999;
}

.float_bnr a {
    display: block;
    width: 100%;
    max-width: 280px;
    transition: all .5s;
}

.float_bnr a:hover {
    opacity: 0.7;
}

.float_bnr .btn_close {
    position: absolute;
    top: -10px;
    right: -5px;
    width: 30px;
    cursor: pointer;
}

.float_bnr.f-campaign {
    right: 20px;
}

.float_bnr.f-point {
    right: 330px;
}

@media only screen and (max-width: 820px) {
    .load_Box {
        position: fixed;
    }

    .closeBtn {
        font-size: 50px;
        color: #fff;
        letter-spacing: 4px;
        border: none;
        background: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: -55px;
        left: auto;
        right: 0;
        transform: none;
    }

    .float_bnr {
        width: 44%;
        right: initial;
    }

    .float_bnr .btn_close {
        right: -7px;
        width: 20px;
    }

    .float_bnr.f-campaign {
        right: 10px;
    }

    .float_bnr.f-point {
        left: 10px;
    }
}

/* 訴求ポイント */
.sokyu-box {
    background-image: -moz-linear-gradient(0deg, rgb(77, 49, 21) 0%, rgb(32, 19, 6) 99%);
    background-image: -webkit-linear-gradient(0deg, rgb(77, 49, 21) 0%, rgb(32, 19, 6) 99%);
    background-image: -ms-linear-gradient(0deg, rgb(77, 49, 21) 0%, rgb(32, 19, 6) 99%);
    padding: 30px 0;
}

.sokyu-box p {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

/* 行動提起 */
.teiki-box {
    background: #e6e7e6;
    padding: 56px 0 48px;
}

.teiki-box p {
    width: 90%;
    /* max-width: 1166px; */
    max-width: 701px;
    margin: 0 auto;
}
.teiki-box p.note{
    margin-top: 2.4em;
    font-size: 16px;
}
.teiki-box p.note .inline-block{
    margin-bottom: .4em;
    display: block;
}

.teiki-box a {
    display: block;
    max-width: 90%;
    width: 320px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    margin: 40px auto 0;
}

/* バナー */
.bnr-box {
    background: #fff;
    padding: 50px 0 0 0;
}

.bnr-box a {
    display: block;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 0;
    transition: all .5s;
}

.bnr-box a:nth-of-type(n+2) {
    margin-top: 40px;
}

.bnr-box a:hover {
    opacity: 0.7;
}

/* .bnr-box a.paypay {
    max-width: 960px;
} */
/* CM */
.cm-movie-box {
    background: #fff;
    padding: 50px 0;
}

.cm-movie-box a {
    display: block;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 0;
    transition: all .5s;
}

.cm-movie-box a:hover {
    opacity: 0.7;
}

/* モーダルビデオ */
/* movie */
.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
    left: 50%;
    padding: 0 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}

.modal__content a {
    position: absolute;
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 15px;
    letter-spacing: 4px;
    border: solid 1px #fff;
    padding: 10px 20px 10px 25px;
}

.modal__content video {
    width: 100%;
}

/* holidays */
.holidays {
    background: #fff;
    padding-top: 100px;
}

.holidays .inner {
    width: 100%;
    max-width: 1000px;
    border: 1px solid #870000;
    padding: 20px 20px;
    margin: 0 auto 0;
}

.holidays p {
    letter-spacing: 2px;
    line-height: 1.5;
    text-align: center;
}

.h-ttl {
    font-size: 22px;
    color: #870000;
    margin-bottom: 15px;
}

.h-text {
    font-size: 17px;
    margin-bottom: 5px;
}

.h-small {
    font-size: 13px;
}

/* インフォメーション */
.info-box {
    background: #fff;
    padding: 100px 0;
    margin: 0 auto;
}

.info_box>div {
    width: 90%;
    max-width: 1000px;
    background-color: #fff;
    padding: 10px;
    margin: 0 auto;
    overflow-y: scroll;
}

.info_ttl {
    font-size: 20px;
    text-align: center;
    line-height: 1;
    margin-bottom: 20px;
}

.scrollBox {
    /* height: 160px; */
    overflow-y: scroll;
}

.info_List li:not(:first-child) {
    padding: 15px 0 0;
}

.info_List dl {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 14px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #030303;
}

.info_List dt {
    padding: 0 10px 0 0;
}

.info_List dd a {
    text-decoration: underline;
    transition: all .5s;
}

.info_List dd a:hover {
    text-decoration: none;
}

/* コンセプトゾーン */
.concept-box {
    background-image: url(../img/cocept-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 0;
}

.concept-box p {
    font-weight: 600;
    color: #4d3115;
    letter-spacing: 2px;
    text-align: center;
}

.concept-ttl {
    width: 90%;
    max-width: 692px;
    margin: 0 auto 60px;
}

.concept-sub-ttl {
    font-size: 20px;
    line-height: 1.8;
    text-shadow: 0 0 5px #fff;
    margin-bottom: 40px;
}

.concepet-text {
    font-size: 14px;
    line-height: 2.2;
    text-shadow: 0 0 5px #fff;
}

/* Googleマップ */
.map-box {
    padding: 120px 0 0 0;
}

.map-inner {
    position: relative;
    /* padding-bottom: 75%; */
    padding-bottom: 45%;
    height: 0;
    overflow: hidden;
}

.map-inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.map-ttl {
    font-size: 26px;
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

/* 下層ページボタンエリア */

.under_bnr {
    flex-wrap: wrap;
}

.under_bnr li {
    width: 50%;
}

.under_bnr li a {
    display: block;
    position: relative;
}

.under_bnr li a figure {
    overflow: hidden;
}

.under_bnr li a figure img {
    transition: 1s all;
    opacity: 0.6;
    height: 500px;
    object-fit: cover;
}

.under_bnr li a figure img:hover {
    transform: scale(1.2, 1.2);
    transition: 1s all;
}

.under_bnr li a p {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    position: absolute;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.under_bnr li a p.en {
    font-family: "Marcellus", serif;
    font-size: 40px;
    font-weight: 400;
    font-style: normal;
    width: 90%;

}

.under_bnr li a p .ja {
    display: block;
    font-size: 18px;
    margin-top: 20px;
    letter-spacing: 2px;
    line-height: 1.8;
}
.link-none{
    pointer-events: none;
}
.text-center{
    text-align: center;
}
@media only screen and (max-width: 1180px) {
    .modal__content {
        width: 94%;
    }
}

@media (max-width: 820px) {
    .bnr-box {
        background: #fff;
        padding: 32px 0 0 0;
    }
    .cm-movie-box{
        padding: 20px 0 32px;
    }
    /* 訴求ポイント */
    .sokyu-box {
        padding: 0 0 25px 0;
    }

    .sokyu-box p {
        width: 100%;
    }

    /* 行動提起 */
    .teiki-box {
        padding: 30px 0;
    }

    .teiki-box a {
        margin: 20px auto 0;
    }

    .bnr-box a:nth-of-type(n+2) {
        margin-top: 20px;
    }

    /* モーダル動画 */
    .modal__bg {
        background: rgba(0, 0, 0, 0.8);
        height: 100vh;
        position: absolute;
        width: 100%;
    }

    .modal__content {
        left: 50%;
        padding: 0 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    .modal__content video {
        width: 100%;
        height: auto;
    }

    .modal__content a {
        position: absolute;
        top: -55px;
        left: auto;
        right: 0;
        color: #fff;
        font-size: 50px;
        border: none;
        padding: 0;
        transform: none;
    }

    /* holidays */
    .holidays {
        padding: 60px 0 0 0;
    }

    .holidays .inner {
        width: 90%;
        padding: 12px 12px;
        margin: 0 auto;
    }

    .holidays p {
        text-align: left;
    }

    .h-ttl {
        font-size: 16px;
        letter-spacing: 1px;
        text-align: center !important;
        margin-bottom: 8px;
    }

    .h-text {
        font-size: 14px;
    }

    .h-small {
        font-size: 12px;
    }

    .info-box {
        padding: 50px 0;
    }

    /* コンセプトゾーン */
    .concept-box {
        background-position: top center;
        padding: 50px 0;
    }

    .concept-ttl {
        width: 70%;
        margin: 0 auto 30px;
    }

    .concept-sub-ttl {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .concepet-text {
        font-size: 12px;
    }

    /* Googleマップ */
    .map-inner {
        padding-bottom: 75%;
    }

    .map-box {
        padding: 50px 0 0 0;
    }

    .map-ttl {
        font-size: 20px;
    }

    /* 下層ページボタンエリア */

    .under_bnr li {
        width: 100%;
    }

    .under_bnr li a figure img {
        height: auto;
    }

    .under_bnr li a p.en {
        font-size: 20px;
    }

    .under_bnr li a p .ja {
        font-size: 14px;
        margin-top: 10px;
        line-height: 1.5;
    }
    .teiki-box p.note{
        font-size: 12px;
        margin-top: 2em;
    }
}