body.v2 { background: #333; min-width: 320px; }
.v2 #wrap.main, .v2 #wrap.main #header, .v2 #wrap.main #header .header_inner, .v2 #wrap.main #footer, .v2 #side .sharing-wrap .js-motion-sharing { max-width: 1200px; width: 100%; }
.v2 #wrap.main { padding: 0; }
.v2 #wrap.main > .inner { padding: 0; }
.v2 #wrap.main #header { position: fixed; background: rgba(0, 0, 0, 0.7); }
.main #header, .main #header .header_inner { height: 70px; }
.v2 #wrap.main #footer {  }

.v2 #wrap.main #header .header_inner { background: none; height: auto; top: auto !important; }

.v2 #wrap.main #header .logo { margin: 0; padding: 20px; }
.v2 #wrap.main #header .logo img.logMain { display: block; max-height: 25px; }
.v2 #wrap.main #header .logo img.logB { display: none; }

.v2 #wrap.main #header .utility { margin: 0; padding: 20px; }
.v2 #wrap.main #header .utility li { background: none; }
.dpnone { display: none; }
.v2 #wrap.main #header .utility li.signMenu { display: none; }
.v2 #wrap.main #header .utility li a { color: #fff; line-height: 1; font-size: 14px; cursor: pointer; }
.v2 #wrap.main #header .utility li a:hover { color: #ffe2c7; }

.v2 #side .sharing-wrap { width: 100%; left: auto; margin: 0; }
.v2 #side .sharing-wrap .js-motion-sharing { position: relative; margin: 0 auto; }

.v2 .footer_middle { padding: 30px 25px; margin: 0; }
.v2 .footer_middle p { margin: 0; padding: 0 0px 5px; height: auto; line-height: 1.5; }
.v2 .footer_bottom { padding: 0 25px 25px; }
.v2 .footer_bottom ul { padding: 0; }
.v2 .footer_bottom ul li { margin-top: 0px !important; }
.v2 .footer_bottom ul.sns_list { margin: 0; width: auto; display: inline-block; }
.v2 .footer_bottom ul.app_list { position: relative; top: auto; right: auto; float: right; }
.v2 .footer_bottom ul.other_list { margin: 0; padding: 20px 0 50px; width: 100%; }
@media screen and (max-width:420px) { 
    .v2 .footer_bottom ul.sns_list { width: 100%; text-align: center; }
    .v2 .footer_bottom ul.sns_list li { float: none; display: inline-block; }
    .v2 .footer_bottom ul.app_list { width: 100%; text-align: center; }
    .v2 .footer_bottom ul.app_list li { float: none; display: inline-block; }
    .v2 .footer_middle p { font-size: 12px; }
}

.v2 .topMenuBtn { display: none; color: #fff; padding: 20px; z-index: 1; position: absolute; top: 0; right: 0; cursor: pointer; }
.v2 .topMenuBtn .fa { font-size: 26px; }
.v2 .sidebarDiv {  }
.v2 .sidebarDiv .closeBtn { color: #fff; float: right; padding: 20px; }
@media screen and (min-width:1000px) { 
    .v2 .sidebarDiv { display: block !important; }
}
@media screen and (max-width:1000px) { 
    .v2 .topMenuBtn { display: block;  }
    .v2 .sidebarDiv {  display: none; position: absolute; right: 0; top: 70px; background: rgba(0, 0, 0, 0.7); }
    .v2 #wrap.main #header .utility { position: relative; }
    .v2 #wrap.main #header .utility li { float: none; padding: 10px 0; }
}

section { position: relative; width: 100%; }
.mainVisual { width: 100%; margin: 0 auto; overflow: hidden; }
img { vertical-align: middle; max-width: 100%; }

.mainVisual .brandSloganBox { position: relative; background-image: url(/resources/opg/img/main_v2/brandSlogan_000-80.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 150px; display: flex;align-items: center;justify-content: center; }
.mainVisual .brandSloganBox .btnBox { text-align: center; padding-top: 20px; }
.mainVisual .brandSloganBox .btnBox .title { vertical-align: top; }
.mainVisual .brandSloganBox .btnBox .desc { padding: 5px 0 0 20px; display: inline-block; max-width: 400px; text-align: left; color: #fff; line-height: 1.5; }

.mainVisual .brandBox { position: relative; background-image: url(/resources/opg/img/main_v2/brand_003-80.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 500px; }
.mainVisual .brandBox .titleBox { position: absolute; bottom: 40%; text-align: center; display: flex; align-items: center; justify-content: center; width: 100%; }
.mainVisual .brandBox .titleBox .btn { cursor: pointer; }
.mainVisual .brandBox .btnBox { position: absolute; bottom: 5%; text-align: center; display: flex; align-items: center; justify-content: center; width: 100%; }
.mainVisual .brandBox .btnBox .btn { padding: 0 20px; box-sizing: border-box; }
.mainVisual .brandBox .btnBox .btn.instagram {  }
.mainVisual .brandBox .btnBox .btn.youtube {  }

.mainVisual .youtubeBox { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: ; }
.mainVisual .youtubeBox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.mainVisual .youtubeBox #closeYoutube { position:absolute; top:-40px; right:0px; z-index:10; background:rgba(0,0,0,0.5); color:#fff; border:0; border-radius:0%; width:40px; height:40px; font-size:20px; cursor:pointer; }

@media screen and (max-width:750px) { 
    .mainVisual .brandSloganBox { min-height: 175px; }
    .mainVisual .brandSloganBox .btnBox { padding-top: 0px; }
    .mainVisual .brandSloganBox .btnBox .title { padding-top: 15px; height: 50px; }
    .mainVisual .brandSloganBox .btnBox .desc { padding: 20px 0 0 0px; max-width: 90%; text-align: center; }
    .mainVisual .brandBox .titleBox .btn img { height: 40px; }
}
@media screen and (max-width:600px) { 
    .mainVisual .brandBox { min-height: 500px; }
}
@media screen and (max-width:500px) { 
    .mainVisual .brandBox { min-height: 400px; }
}
@media screen and (max-width:400px) { 
    .mainVisual .brandBox { min-height: 350px; }
}
@media screen and (max-width:350px) { 
    .mainVisual .brandBox { min-height: 300px; }
}

.mainVisual .eventBox { position: relative; background: #cbb6a3; min-height: 200px; padding: 0 10px 10px 10px; }
.mainVisual .eventBox .titleBox { display: flex; align-items: center; justify-content: center; }
.mainVisual .eventBox .titleBox img { width: 8%; }

.mainVisual .eventBox .btnScrollBox { }
.mainVisual .eventBox .btnBox { display: flex; flex-wrap: wrap; justify-content: center; padding: 20px 0 10px; gap: 10px; text-align: center; box-sizing: border-box; }

.mainVisual .eventBox .btnBox.even .btn { flex: 0 0 calc(50% - 10px); box-sizing: border-box; }
.mainVisual .eventBox .btnBox.odd .btn { flex: 0 0 calc(33.333% - 10px); box-sizing: border-box; }
.mainVisual .eventBox .btnBox .btn img { width: 100%; display: block; }

.mainVisual .eventBox .btnBox .btn { }
.mainVisual .eventBox .linkBox {  }
.mainVisual .eventBox .linkBox .btn { display: block; text-align: center; padding: 20px 15px; font-size: 18px; font-weight: bold; color: #fff; background: #83633f; }

.mainVisual .storeBox { position: relative; background-image: url(/resources/opg/img/main_v2/store_000-80.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 600px; }
.mainVisual .storeBox .titleBox { display: flex; align-items: center; justify-content: center; }
.mainVisual .storeBox .titleBox img { width: 8%; }

.mainVisual .storeBox .btnBox { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.mainVisual .storeBox .btnBox .btn { text-align: center; }
.mainVisual .storeBox .btnBox .btn img { width: 40%; }

.mainVisual .storeBox .linkBox { display: none; position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 0; text-align: center; background: rgba(0, 0, 0, 0.5); }
.mainVisual .storeBox .linkBox .btn { display: inline-block; font-size: 18px; color: #EDD3B3; margin-left: 20px; }
.mainVisual .storeBox .linkBox .btn:first-child { margin-left: 0px; }
.mainVisual .storeBox .linkBox .btn.active { color: #fff; }
.mainVisual .storeBox .linkBox .btn:hover { color: #fff; }
@media screen and (max-width:1000px) { 
    .mainVisual .eventBox .btnBox { flex-direction: column; flex-wrap: nowrap; padding: 20px 0 5px; }
}
@media screen and (max-width:900px) { 
    .mainVisual .eventBox .titleBox img { width: 12%; }
    .mainVisual .storeBox .titleBox img { width: 12%; }
}
@media screen and (max-width:800px) { 
    .mainVisual .eventBox .btnBox { flex-direction: column; padding: 20px 0 0px; }
    .mainVisual .storeBox { min-height: 400px; }
    .mainVisual .storeBox .linkBox .btn { font-size: 16px; margin-left: 15px; }
}
@media screen and (max-width:700px) { 
    .mainVisual .eventBox .titleBox img { width: 13%; }
    .mainVisual .storeBox .titleBox img { width: 13%; }
    .mainVisual .storeBox .linkBox .btn { font-size: 12px; margin-left: 10px; }
}
@media screen and (max-width:600px) { 
    .mainVisual .eventBox .titleBox img { width: 15%; }
    .mainVisual .storeBox .titleBox img { width: 15%; }
    .mainVisual .storeBox { min-height: 350px; }
    .mainVisual .storeBox .linkBox { padding: 10px 0;  }
    .mainVisual .storeBox .linkBox .btn { width: 45%; margin-left: 0px; }
    .mainVisual .eventBox .linkBox .btn { padding: 15px 15px; font-size: 16px; }
}
@media screen and (max-width:400px) { 
    .mainVisual .eventBox .titleBox img { width: 18%; }
    .mainVisual .storeBox .titleBox img { width: 18%; }
    .mainVisual .storeBox { min-height: 250px; }
    .mainVisual .storeBox .linkBox .btn { width: 100%; }
}

.mainVisual .mclubBox { position: relative; background-image: url(/resources/opg/img/main_v2/mclub_000-80.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 600px; }
.mainVisual .mclubBox .btnBox { position: absolute; bottom: 24%; left: calc((100% - 35%) / 2); width: 35%; height: 20%; text-align: center; }
.mainVisual .mclubBox .btnBox .btn { float: left; width: 50%; height: 100%; padding: 0 5px; box-sizing: border-box; }
@media screen and (max-width:900px) { 
    .mainVisual .mclubBox .btnBox { left: calc((100% - 50%) / 2); width: 50%; height: 20%; }
}
@media screen and (max-width:700px) { 
    .mainVisual .mclubBox { min-height: 400px; }
    .mainVisual .mclubBox .btnBox { left: calc((100% - 70%) / 2); width: 70%; height: 20%; }
}
@media screen and (max-width:400px) { 
    .mainVisual .mclubBox { min-height: 300px; }
    .mainVisual .mclubBox .btnBox { left: calc((100% - 80%) / 2); width: 80%; height: 20%; }
}