@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : base.css
Description :
===================================================================== */


/* =====================================================================
*    共通・大枠
* =================================================================== */

html {
    font-size: calc(10 / 750 * 100vw);
}

@media screen and (min-width: 768px) {
    html {
        font-size: calc(10 / 1200 * 100vw);
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size: 10px;
    }
}

.gDef-top-banner {
    background: url(../images/common/bg_blue.jpg) repeat center top;
    background-size: calc(300 / 750 * 100%) auto;
    position: relative;
    z-index: 101;
}

.gDef-contents {
    color: #3b3433;
    font-size: 2.4rem;
    font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height: 1.833;
    letter-spacing: 0.05em;
}

.set1,
.set1 * {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.set1 img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.set1 a {
    display: block;
    color: #3b3433;
    text-decoration: none;
}

svg {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px) {
    .gDef-top-banner {
        background-size: calc(300 / 1200 * 100%);
    }
    .gDef-contents {
        font-size: 1.4rem;
        line-height: 1.714;
    }
    .set1 a {
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
}

@media screen and (min-width: 1200px) {
    .gDef-top-banner {
        background-size: 300px;
    }
}

@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .sp {
        display: none !important;
    }
}

body {
    overflow-x: hidden;
}

.main {
    display: block;
    position: relative;
}

.inner {}

@media screen and (min-width: 768px) {
    .inner {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }
}

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


/* =====================================================================
*    header
* =================================================================== */

.header {
    padding-top: calc(150 / 750 * 100%);
    z-index: 100;
}

.header_box {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

.fixed .header_box {
    position: fixed;
}

.header_box::before {
    content: "";
    display: block;
    padding-top: calc(150 / 750 * 100%);
    background: url(../images/common/bg_white.jpg) repeat center top;
    background-size: calc(320 / 750 * 100%) auto;
}

#subpage .header_box::before {
    display: none;
}

.header_ttl {
    width: calc(197 / 750 * 100%);
    margin: calc(20 / 750 * 100%) 0 0 calc(20 / 750 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.menu_btn {
    width: calc(110 / 750 * 100%);
    padding-top: calc(110 / 750 * 100%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
    margin: calc(20 / 750 * 100%) calc(20 / 750 * 100%) 0 0;
}

#subpage .menu_btn {
    background: url(../images/common/bg_white.jpg) repeat center top;
    background-size: calc(320 / 110 * 100%) auto;
}

.menu_btn .menu_padding {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: calc(70 / 110 * 100%);
    margin: calc(18 / 110 * 100%) auto 0;
    padding-top: calc(46 / 110 * 100%);
}

.menu_btn .menu_padding span {
    display: block;
    width: 100%;
    height: 0;
    padding-top: calc(6 / 70 * 100%);
    background-color: #34304e;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.menu_btn .menu_padding span:nth-child(1) {}

.menu_btn .menu_padding span:nth-child(2) {
    margin-top: calc(20 / 70 * 100%);
}

.menu_btn .menu_padding span:nth-child(3) {
    margin-top: calc(40 / 70 * 100%);
}

.menu_btn.active {}

.menu_btn.active .menu_padding span {
    width: 120%;
    left: -10%
}

.menu_btn.active .menu_padding span:nth-child(1) {
    -webkit-transform: translateY(300%) rotate(-330deg);
    -ms-transform: translateY(300%) rotate(-330deg);
    transform: translateY(300%) rotate(-330deg);
    margin-top: calc(4 / 48 * 100%);
}

.menu_btn.active .menu_padding span:nth-child(2) {
    opacity: 0;
}

.menu_btn.active .menu_padding span:nth-child(3) {
    -webkit-transform: translateY(-300%) rotate(330deg);
    -ms-transform: translateY(-300%) rotate(330deg);
    transform: translateY(-300%) rotate(330deg);
    margin-top: calc(28 / 48 * 100%);
}

.menu_txt {
    width: calc(70 / 110 * 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto calc(15 / 110 * 100%);
}

.nav {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: -100vh;
    left: 0;
    overflow-y: scroll;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.nav.active {
    top: 0;
}

.nav_menu {
    width: 100%;
    min-height: 100vh;
    padding: calc(165 / 750 * 100%) calc(50 / 750 * 100%) calc(225 / 750 * 100%);
    background: url(../images/nav/bg_nav.png) no-repeat center bottom, url(../images/common/bg_white.jpg) repeat center top;
    background-size: 100% auto, calc(320 / 750 * 100%) auto;
}

.nav_menu li.nolink a {
    pointer-events: none;
    opacity: 0.4;
}

.nav_menu li a {
    padding: calc(43 / 650 * 100%) 0;
}

.nav_menu li a img {
    width: auto;
    height: calc(34 / 750 * 100vw);
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .header {
        padding-top: 0;
    }
    #subpage .header {
        width: calc(160 / 1200 * 100%);
    }
    .header_box {
        width: calc(160 / 1200 * 100vw);
        height: 100vh;
        background: url(../images/common/bg_white.jpg) repeat center top;
        background-size: calc(320 / 160 * 100%) auto;
    }
    .fixed2 .header_box {
        top: auto;
        bottom: 0;
    }
    .header_box::before {
        display: none;
    }
    .header_ttl {
        position: relative;
        width: calc(146 / 160 * 100%);
        margin: calc(20 / 160 * 100%) auto 0;
    }
    .menu_btn {
        display: none;
    }
    .nav {
        display: block;
        position: relative;
        height: auto;
        top: 0;
        right: 0;
        overflow-y: visible;
    }
    .nav_menu {
        min-height: auto;
        padding: calc(20 / 160 * 100%) 0 0;
        background: none;
    }
    .nav_menu li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 5vh;
        max-height: 60px;
        padding: 0 calc(12 / 160 * 100%) 0 calc(11 / 160 * 100%);
    }
    .nav_menu li a img {
        width: 100%;
        height: auto;
        opacity: 1;
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .nav_menu li a::before,
    .nav_menu li a::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url(../images/common/bg_red.jpg) repeat center top;
        background-size: calc(300 / 160 * 100%) auto;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .nav_menu li a::after {
        width: calc(140 / 160 * 100%);
        margin: 0 auto;
        right: 0;
    }
    .nav_menu li a:hover::before {
        opacity: 1;
    }
    .nav_menu li a:hover::after {
        opacity: 1;
    }
    .nav_menu li a:hover img {
        opacity: 0;
    }
    .nav_menu li.nav1 a::after {
        background: url(../images/nav/btn_nav01_h.png) no-repeat center center;
        background-size: 100% auto;
    }
    .nav_menu li.nav2 a::after {
        background: url(../images/nav/btn_nav02_h.png) no-repeat center center;
        background-size: 100% auto;
    }
    .nav_menu li.nav3 a::after {
        background: url(../images/nav/btn_nav03_h.png) no-repeat center center;
        background-size: 100% auto;
    }
    .nav_menu li.nav4 a::after {
        background: url(../images/nav/btn_nav04_h.png) no-repeat center center;
        background-size: 100% auto;
    }
    .nav_menu li.nav5 a::after {
        background: url(../images/nav/btn_nav05_h.png) no-repeat center center;
        background-size: 100% auto;
    }
    .nav_menu li.nav6 a::after {
        background: url(../images/nav/btn_nav06_h.png) no-repeat center center;
        background-size: 100% auto;
    }
    .nav_menu li.nav7 a::after {
        background: url(../images/nav/btn_nav07_h.png) no-repeat center center;
        background-size: 100% auto;
    }
    .nav_menu li.nav8 a::after {
        background: url(../images/nav/btn_nav08_h.png) no-repeat center center;
        background-size: 100% auto;
    }
    .nav_menu li a:hover::after {
        margin-top: 0;
    }
    .nav_menu li.current a::before {
        background: url(../images/common/bg_blue.jpg) repeat center top;
        background-size: calc(300 / 160 * 100%) auto;
        opacity: 1;
    }
    .nav_menu li.current a::after {
        opacity: 1;
    }
    .nav_menu li.current a img {
        opacity: 0;
    }
}

@media screen and (min-width: 1200px) {
    .header_box {
        width: 160px;
    }
}


/* =====================================================================
*    subpage_header
* =================================================================== */

#subpage #wrapper {
    padding: 0 0 calc(150 / 750 * 100%);
    background: url(../images/common/bg_deco3_left.png) repeat-y left top, url(../images/common/bg_deco3_right.png) repeat-y right top, url(../images/common/bg_gray.jpg) repeat center top;
    background-size: calc(150 / 750 * 100%) auto, calc(150 / 750 * 100%) auto, calc(640 / 750 * 100%) auto;
}

.subpage_ttl {
    padding: 0 0 calc(50 / 750 * 100%);
}

.subpage_ttl::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(156 / 750 * 100%);
    background: url(../images/common/bg_deco4.png) no-repeat center center;
    background-size: auto 100%;
    -webkit-backface-visibility: hidden;
}

.subpage_ttl img {
    width: auto;
    height: calc(156 / 750 * 100vw);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    #subpage #wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 0;
        background: none;
    }
    #subpage .main {
        width: calc(1040 / 1200 * 100%);
        margin: 0 0 0 auto;
        background: url(../images/common/bg_deco3_left.png) repeat-y left top, url(../images/common/bg_deco3_right.png) repeat-y right top, url(../images/common/bg_gray.jpg) repeat center top;
        background-size: calc(150 / 1040 * 100%) auto, calc(150 / 1040 * 100%) auto, calc(320 / 1040 * 100%) auto;
    }
    .subpage_ttl {
        padding: calc(76 / 1040 * 100%) 0;
    }
    .subpage_ttl::before {
        padding-top: calc(101 / 1040 * 100%);
    }
    .subpage_ttl img {
        height: calc(101 / 1200 * 100vw);
        margin: auto;
    }
    .subpage_copy {
        margin: calc(150 / 1040 * 100%) 0 0;
        padding-top: calc(93 / 1040 * 100%);
        background: url(../images/common/bg_red.jpg) repeat center top;
        background-size: calc(640 / 1040 * 100%) auto;
    }
    .subpage_copy small {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        color: #ebe7e1;
        font-size: 1.4rem;
        line-height: 1;
    }
}

@media screen and (min-width: 1200px) {
    #subpage .header {
        width: 160px;
    }
    #subpage .main {
        width: calc(100% - 160px);
        background-size: 150px auto, 150px auto, 320px auto;
    }
    .subpage_ttl {
        padding: 76px 0;
    }
    .subpage_ttl::before {
        padding-top: 101px;
    }
    .subpage_ttl img {
        height: 101px;
    }
    .subpage_copy {
        margin: 150px 0 0;
        padding-top: 93px;
        background-size: 640px auto;
    }
}


/* =====================================================================
*    sec_ttl / btn
* =================================================================== */

.sec_ttl {
    padding: calc(50 / 750 * 100%) 0;
}

.sec_ttl::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(150 / 750 * 100%);
    background: url(../images/common/bg_deco1.png) no-repeat center center;
    background-size: auto 100%;
}

.sec_ttl img {
    width: auto;
    height: calc(150 / 750 * 100vw);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.btn1 a {
    padding: calc(31 / 750 * 100vw) 0;
    background: url(../images/common/bg_blue.jpg) repeat center top;
    background-size: calc(300 / 750 * 100vw) auto;
    color: #ebe7e1;
    text-align: center;
}

.arrow1::after {
    content: "";
    display: inline-block;
    width: calc(12 / 750 * 100vw);
    padding-top: calc(22 / 750 * 100vw);
    background: url(../images/common/btn_arrow1.png) no-repeat center center;
    background-size: auto 100%;
    margin: 0 0 0 calc(30 / 750 * 100vw);
    position: relative;
    top: 0.1em;
}

@media screen and (min-width: 768px) {
    .btn1 a {
        padding: calc(13 / 1200 * 100vw) 0;
        background-size: calc(300 / 1200 * 100vw) auto;
    }
    .btn1 a::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url(../images/common/bg_red.jpg) repeat center top;
        background-size: calc(300 / 1200 * 100vw) auto;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .btn1 a:hover::before {
        opacity: 1;
    }
    .arrow1::after {
        width: calc(8 / 1200 * 100vw);
        padding-top: calc(14 / 1200 * 100vw);
        margin: 0 0 0 calc(18 / 1200 * 100vw);
        top: 0.15em;
    }
}

@media screen and (min-width: 1200px) {
    .btn1 a {
        padding: 13px 0;
        background-size: 300px auto;
    }
    .btn1 a::before {
        background-size: 300px auto;
    }
    .arrow1::after {
        width: 8px;
        padding-top: 14px;
        margin: 0 0 0 20px;
    }
}


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


/*    slick
/* ================================================================== */

.slick-list {
    font-size: 0;
}

.slick-arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(85 / 750 * 100vw);
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.slick-arrow.prev {
    left: calc(-85 / 750 * 100vw);
}

.slick-arrow.next {
    right: calc(-85 / 750 * 100vw);
}

.slick-arrow::before,
.slick-arrow::after {
    content: "";
    display: block;
    width: calc(65 / 750 * 100vw);
    height: calc(65 / 750 * 100vw);
    background-color: #222e4c;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.slick-arrow.prev::after {
    background: url(../images/common/btn_slick_prev.png) no-repeat center center;
    background-size: 100% auto;
}

.slick-arrow.next::after {
    background: url(../images/common/btn_slick_next.png) no-repeat center center;
    background-size: 100% auto;
}

.slick-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: calc(-42 / 750 * 100vw);
}

.slick-dots li {
    display: block;
    width: calc(24 / 750 * 100vw);
    height: calc(24 / 750 * 100vw);
    margin: 0 calc(7 / 750 * 100vw);
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(89, 73, 63, 0.25);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(89, 73, 63, 0.25);
    border: 1px solid rgba(89, 73, 63, 0.25);
    text-indent: -9999px;
}

.slick-dots li button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
}

.slick-dots li.slick-active {
    background-color: #da4043;
}

@media screen and (min-width: 768px) {
    .slick-arrow {
        width: calc(105 / 1200 * 100vw);
        cursor: pointer;
    }
    .slick-arrow.prev {
        left: calc(-105 / 1200 * 100vw);
    }
    .slick-arrow.next {
        right: calc(-105 / 1200 * 100vw);
    }
    .slick-arrow::before,
    .slick-arrow::after {
        width: calc(65 / 1200 * 100vw);
        height: calc(65 / 1200 * 100vw);
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .slick-arrow:hover::before,
    .slick-arrow:hover::after {
        background-color: #da4043;
    }
    .slick-dots {
        margin-bottom: calc(-37 / 1200 * 100vw);
    }
    .slick-dots li {
        width: calc(18 / 1200 * 100vw);
        height: calc(18 / 1200 * 100vw);
        margin: 0 calc(5 / 1200 * 100vw);
        -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 5px rgba(89, 73, 63, 0.25);
        box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 5px rgba(89, 73, 63, 0.25);
        border: none;
        cursor: pointer;
    }
}

@media screen and (min-width: 1200px) {
    .slick-arrow {
        width: 105px;
    }
    .slick-arrow.prev {
        left: -105px;
    }
    .slick-arrow.next {
        right: -105px;
    }
    .slick-arrow::before,
    .slick-arrow::after {
        width: 65px;
        height: 65px;
    }
    .slick-dots {
        margin-bottom: -37px;
    }
    .slick-dots li {
        width: 18px;
        height: 18px;
        margin: 0 5px;
    }
}


/* =====================================================================
*    share
* =================================================================== */

.sns_share {
    background: url(../images/common/bg_red.jpg) repeat center top;
    background-size: calc(300 / 750 * 100%) auto;
}

.sns_share::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(30 / 750 * 100%);
    background: url(../images/common/bg_gold.jpg) repeat center top;
    background-size: calc(560 / 750 * 100%) auto;
}

.sns_share .sns_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: calc(50 / 750 * 100%) 0;
}

.sns_share .sns_btn li {
    width: calc(48 / 750 * 100%);
    margin: 0 calc(75 / 750 * 100%) 0 0;
}

.sns_share .sns_btn li:last-child {
    margin-right: 0;
}

.pagetop {
    z-index: 2;
}

.pagetop a {
    width: calc(86 / 750 * 100%);
    margin: calc(-65 / 750 * 100%) calc(60 / 750 * 100%) 0 0;
    position: absolute;
    top: 0;
    right: 0;
}

@media screen and (min-width: 768px) {
    .sns_share {
        width: 100%;
        background-size: calc(300 / 160 * 100%) auto;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .sns_share::before {
        display: none;
    }
    .sns_share .sns_btn {
        padding: calc(25 / 160 * 100%) 0;
    }
    .sns_share .sns_btn::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(11 / 160 * 100%);
        background: url(../images/common/img_share_txt.png) no-repeat center top;
        background-size: calc(42 / 160 * 100%) auto;
        margin: 0 auto calc(8 / 160 * 100%);
    }
    .sns_share .sns_btn li {
        width: calc(24 / 160 * 100%);
        margin: 0 calc(20 / 160 * 100%) 0 0;
    }
    .sns_share .sns_btn li a::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .sns_share .sns_btn li a:hover::after {
        opacity: 1;
    }
    .sns_share .sns_btn li a img {
        opacity: 1;
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .sns_share .sns_btn li a:hover img {
        opacity: 0;
    }
    .twitterShare a::after {
        background: url(../images/common/btn_sns1_h.png) no-repeat center top;
        background-size: 100% auto;
    }
    .facebookShare a::after {
        background: url(../images/common/btn_sns2_h.png) no-repeat center top;
        background-size: 100% auto;
    }
    .lineShare a::after {
        background: url(../images/common/btn_sns3_h.png) no-repeat center top;
        background-size: 100% auto;
    }
    .pagetop a {
        width: calc(52 / 160 * 100%);
        left: 0;
        margin: calc(-45 / 160 * 100%) auto 0;
    }
    .pagetop a:hover {
        top: calc(-10 / 1200 * 100vw);
    }
}

@media screen and (min-width: 1200px) {
    .pagetop a:hover {
        top: -10px;
    }
}


/* =====================================================================
*    footer
* =================================================================== */

.footer_box {}

.footer_copy {
    background: url(../images/common/bg_red.jpg) repeat center top;
    background-size: calc(300 / 750 * 100%) auto;
}

.footer_copy::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(30 / 750 * 100%);
    background: url(../images/common/line1.jpg) repeat center top;
    background-size: calc(217 / 750 * 100%) auto;
    margin: calc(50 / 750 * 100%) 0 0;
}

.footer_copy small {
    display: block;
    color: #ebe7e1;
    font-size: 2rem;
    line-height: 1;
    text-align: center;
}

.banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: calc(50 / 750 * 100%) 0 0;
    background: url(../images/common/bg_gold.jpg) repeat center top;
    background-size: calc(560 / 750 * 100%) auto;
}

.banner li {
    width: calc(300 / 750 * 100%);
    margin: 0 calc(50 / 750 * 100%) calc(50 / 750 * 100%) 0;
}

.banner li:nth-child(even),
.banner li:last-child {
    margin-right: 0;
}

@media screen and (min-width: 768px) {
    .footer {
        z-index: 100;
    }
    .footer_copy {
        background-size: calc(300 / 360 * 100%) auto;
    }
    .footer_copy small {
        display: none;
        font-size: 1.4rem;
    }
    .footer_copy::after {
        padding-top: calc(15 / 1200 * 100%);
        background-size: calc(108 / 1200 * 100%) auto;
        margin: 0;
    }
    .banner {
        padding: calc(30 / 1200 * 100%) 0 0;
        background-size: calc(560 / 1200 * 100%) auto;
    }
    .banner li,
    .banner li:nth-child(even) {
        width: calc(200 / 1200 * 100%);
        margin: 0 calc(50 / 1200 * 100%) calc(30 / 1200 * 100%) 0;
    }
    .banner li:last-child {
        margin-right: 0;
    }
    .banner li a:hover {
        opacity: 0.7;
    }
}

@media screen and (min-width: 1200px) {
    .footer_copy::after {
        padding-top: 15px;
        background-size: 108px auto;
    }
    .banner {
        padding: 30px 0 0;
        background-size: 560px auto;
    }
    .banner li,
    .banner li:nth-child(even) {
        width: 200px;
        margin: 0 50px 30px 0;
    }
    .banner li:last-child {
        margin-right: 0;
    }
}


/* =====================================================================
*    bridecove_popup
* =================================================================== */

#wrapper .bc_wrapper {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 100000;
    display: none;
    cursor: pointer;
}

.bc_wrapper .return_box {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.bc_wrapper .bc_movie_wrap {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.bc_wrapper .bc_movie_wrap .bc_movie {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

.bc_wrapper .bc_movie_wrap .bc_movie video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.vjs-icon-placeholder {
    display: block;
    margin: -1em 0 0;
    position: static;
}

.bc_wrapper .btn_close {
    width: calc(400 / 750 * 100%);
    margin: 5% auto 0;
}

.bc_wrapper .btn_close a {
    display: block;
    text-decoration: none;
}

@media screen and (min-width:768px) {
    .bc_wrapper .bc_movie_wrap {
        width: 50%;
    }
    .bc_wrapper .btn_close {
        width: calc(400 / 1200 * 100%);
        max-width: 400px;
    }
    .bc_wrapper .btn_close a {
        position: relative;
    }
    .bc_wrapper .btn_close a span {
        position: relative;
    }
}

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


/* =====================================================================
*    img_popup
* =================================================================== */

.imgpp_wrapper {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 100000;
    display: none;
}

.imgpp_wrapper .return_box {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.imgpp_wrapper .imgBox {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.imgpp_wrapper .btn_close {
    width: calc(400 / 750 * 100%);
    margin: 5% auto 0;
    cursor: pointer;
}

.imgpp_wrapper .btn_close a {
    display: block;
    text-decoration: none;
}

@media screen and (min-width:768px) {
    .imgpp_wrapper .imgBox {
        width: 50%;
    }
    .imgpp_wrapper .btn_close {
        width: calc(400 / 1200 * 100%);
        max-width: 400px;
    }
    .imgpp_wrapper .btn_close a {
        position: relative;
    }
    .imgpp_wrapper .btn_close a span {
        position: relative;
    }
}


/* 画像ガード */

.s-cmn-protect {
    position: relative;
    display: inline-block;
    pointer-events: auto;
}

.s-cmn-protect::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
}

@media print {
    .s-cmn-protect,
    .sec_content,
    #top main {
        display: none;
    }
}