@charset "utf-8";
/*-----------------------------------------------
* 01. Template
* 02. Header
* 03. Top Contents
* 04. Footer
* 05. Sub Page
*     05 - 01. News
*     05 - 02. Blu-ray & DVD
* 06. Modal
-------------------------------------------------*/
/*-----------------------------------------------
* Breakpoint
* (max-width:768px)
-------------------------------------------------*/
/*-----------------------------------------------
* 01. Template
-------------------------------------------------*/
html{ overflow: auto; }
body{
-webkit-text-size-adjust: 100%;
background-color: #000;
color: #fff;
font-family: 'Noto Serif JP', "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.07em;
line-height: 1.8;
min-width: 1200px;
word-wrap: break-word;
overflow: hidden;
position: relative;
cursor: none; 
}
body#tp{
background-color: transparent;
cursor: auto;
min-width: 100%;
}
body#tp a{
cursor: pointer;
}
@media screen and (max-width:768px){
html{ font-size: 62.5%; }
body{
font-size: 10px; 
font-size: 1rem;
min-width: 320px;
}
}
/* Cursor pointer */
.cursor,
.follower{
border-radius: 50%;
position: fixed; 
top: 0;
left: 0; 
cursor: none; 
pointer-events: none;
}
.cursor{
width: 10px;
height: 10px;
background-color: #fff;
z-index: 1001;
transition: background-color .3s ease-in-out;
}
.cursor.active{
background-color: #e7ca3c;
}
.cursor:before{
content: "";
background-color: #fff;
border-radius: 50%;
width: 3px;
height: 3px;
margin: auto;
position: absolute;
top: 0;
right: -9px;
bottom: 0;
}
.cursor:after{
content: "";
background-color: #fff;
border-radius: 50%;
width: 3px;
height: 3px;
margin: auto;
position: absolute;
top: 0;
left: -9px;
bottom: 0;
}
.follower{
width: 20px;
height: 20px;
background-color: #fff;
opacity: .4;
z-index: 1000;
transition: background-color 0s ease-in-out,
transform .3s ease-in-out,
filter .3s ease-in-out;
}
.follower.active{
background-color: #e7ca3c;
-ms-filter: blur(5px);
filter: blur(5px);
transform: scale(10);
}
/* Default */
.pc{ display: block; }
.sp{ display: none; }
a{ color: #fff; cursor: none; }
a:hover{ text-decoration: none; }
.ah { transition: opacity .3s ease; }
.ah:hover { opacity: .7; }
::selection{ background: #910000; color: #fff; }
::-moz-selection{ background: #910000; color: #fff; }
.font_en{ font-family: 'Amiri', serif; }
.fontC_y{ color: #ebc300; }
@media screen and (max-width:768px){ 
.pc{ display: none; }
.sp{ display: block; }
img{ max-width: 100%; height: auto; }
.ah:hover { opacity: 1; }
}
/* loading */
.loading{
min-width: 1200px;
min-height: 620px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
}
@media screen and (max-width:768px){
.loading{
min-width: auto;
min-height: auto;
}
}
.loading:after{
content: "";
background-image: url(../img/common/full_bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: calc(100% + 2px);
min-width: 1200px;
min-height: 620px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
@media screen and (max-width:768px){
.loading:after{
background-image: url(../img/common/full_bg_sp.jpg);
min-width: auto;
min-height: auto;
}
}
.loading__in{
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.loading__in:before{
content: "";
background: url(../img/common/loading_grd.png) repeat-y 0 0 / 100%;
width: 6.6%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
z-index: 3;
}
@media screen and (max-width:768px){
.loading__in:before{
content: none;
}
}
.loading__in__textWrap{
background-color: #fff;
width: 50%;
height: 100%;
overflow: hidden;
position: relative;
z-index: 1;
}
@media screen and (max-width:768px){
.loading__in__textWrap{
display: none;
}
}
.loading__in__textWrap:after{
content: "";
background: url(../img/common/loading_grd_m.png) repeat-y 0 0 / 100%;
width: 0;
height: 100%;
position: absolute;
top: 0;
right: 0;
transition: all 1.5s ease-in-out;
}
@media screen and (max-width:768px){
.loading__in__textWrap:after{
content: none;
}
}
.loading.active .loading__in__textWrap:after{
width: 100%;
right: -10%;
}
.loading__in__textWrap:before{
content: "";
background-color: #910000;
width: 1px;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
@media screen and (max-width:768px){
.loading__in__textWrap:before{
content: none;
}
}
.loading__in__text{
width: 120px;
height: 185px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.loading__in__logoWrap{
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
transition: transform 1.5s ease-in-out;
transform-origin: 0% 50%;
perspective: 10000px;
transform: rotateY(0);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 2;
}
@media screen and (max-width:768px){
.loading__in__logoWrap{
width: 100%;
transform-origin: 0;
perspective: 500px;
}
}
.loading.active .loading__in__logoWrap{
transform: rotateY(180deg);
}
.loading__in__logo__front{
background: #fff url(../img/common/loading_logo.png) no-repeat center / auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
position: absolute;
}
@media screen and (max-width:768px){
.loading__in__logo__front{
background: #fff;
}
.loading__in__logo__front__in{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loading__in__logo__front__in:before{
content: "";
background: url(../img/common/loading_text.png) no-repeat 0 0 / 100%;
display: block;
width: 120px;
height: 185px;
margin-bottom: 70px;
}
.loading__in__logo__front__in:after{
content: "";
background: url(../img/common/loading_logo.png) no-repeat 0 0 / 100%;
display: block;
width: 121px;
height: 48px;
}
}
.loading__in__logo__back{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: calc(100% + 2px);
overflow: hidden;
position: absolute;
transform: rotateY(180deg);
}
.loading__in__logo__back:before{
content: "";
background-image: url(../img/common/full_bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width:768px){
.loading__in__logo__back:before{
background-image: url(../img/common/full_bg_sp.jpg);
width: 100%;
}
}
/* fullWrap */
#fullWrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 1200px;
min-height: 100vh;
position: relative;
z-index: 1;
}
#fullWrap:after{
content: "";
background-image: url(../img/common/full_bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: calc(100% + 2px);
min-width: 1200px;
min-height: 620px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
@media screen and (max-width:768px){ 
#fullWrap{
min-width: 320px;
}
#fullWrap:after{
background-image: url(../img/common/full_bg_sp.jpg);
min-width: 320px;
min-height: auto;
}
}
/*-----------------------------------------------
* 02. Header
-------------------------------------------------*/
.header{
width: 100%;
position: fixed;
top: 0;
z-index: 9999;
}
.header:after{
content: "";
background: url(../img/common/deco_grd_ptn_t.png) repeat-x;
width: 100%;
height: 96px;
position: absolute;
pointer-events: none;
top: 0;
left: 0;
z-index: -1;
}
@media screen and (max-width:768px){
.header:after{
background: url(../img/top/deco_grd_ptn_t.png) no-repeat 0 0 / 100%;
height: auto;
padding-top: 12.8%;
}
}
/**
* header__cont
*/
.header__cont{
-webkit-overflow-scrolling: touch;
position: fixed;
width: 100%;
height: calc(100% + 1px);
min-width: 1200px;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
display: none;
}
.header__cont.over{
overflow: auto;
}
@media screen and (max-width:768px){
.header__cont{
min-width: auto;
min-height: auto;
}
}
/**
* header__cont__logoWrap
*/
.header__cont__logoWrap{
background-color: #fff;
float: left;
width: 50%;
height: 100%;
min-height: 620px;
position: relative;
top: 0;
transform: translateY(-100%);
transition: transform .8s cubic-bezier(.7,0,.170,1);
}
.header__cont.active .header__cont__logoWrap{
transform: translateY(0);
}
@media screen and (max-width:768px){
.header__cont__logoWrap{
display: flex;
float: none;
width: 100%;
height: 156px;
min-height: auto;
}
}
/* logo */
.header__cont__logoWrap__logo{
width: 366px;
height: 147px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@media screen and (max-width:768px){
.header__cont__logoWrap__logo{
width: 183px;
height: auto;
margin-top: auto;
position: static;
}
}
/* left text */
.header__cont__logoWrap__text{
color: #7f0202;
font-size: 16px;
position: absolute;
top: 40px;
left: 40px;
}
@media screen and (max-width:768px){
.header__cont__logoWrap__text{
font-size: 12px;
font-size: 1.2rem;
top: 24px;
left: 24px;
}
}
/**
* header__cont__navWrap
*/
.header__cont__navWrap{
background-image: url(../img/common/full_bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: right;
width: 50%;
height: 100%;
min-height: 620px;
position: relative;
transform: translateY(100%);
transition: transform .8s cubic-bezier(.7,0,.170,1);
}
.header__cont.active .header__cont__navWrap{
transform: translateY(0);
}
@media screen and (max-width:768px){
.header__cont__navWrap{
background-image: url(../img/common/full_bg_sp.jpg);
display: flex;
flex-direction: column;
float: none;
width: 100%;
height: auto;
min-height: calc(100vh - 155px);
padding: 40px;
}
}
/* gNavLists */
.gNavLists{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width:768px){
.gNavLists{
position: static;
transform: translate(0, 0);
margin-bottom: 50px;
}
}
.gNavLists__item{
margin-bottom: 12px;
}
.gNavLists__item:first-child{
margin-bottom: 26px;
}
.gNavLists__item:last-child{
margin-bottom: 0;
}
.gNavLists__item__link{
color: #fff;
font-size: 20px;
letter-spacing: 0.4em;
text-decoration: none;
}
@media screen and (max-width:768px){
.gNavLists__item__link{
font-size: 2rem;
}
}
/* header__cont__bottom */
@media screen and (max-width:768px){
.header__cont__bottom{
margin-top: auto;
}
}
.gNavLists__item__link__in{
display: block;
transition: all .3s ease-in-out;   
}
.gNavLists__item__link:hover .gNavLists__item__link__in{
transform: translateX(10px);
text-shadow: rgba(255,212,0,0.8) 1px 1px 8px, rgba(255,212,0,0.8) -1px 1px 8px, rgba(255,212,0,0.8) 1px -1px 8px, rgba(255,212,0,0.8) -1px -1px 8px;
}
@media screen and (max-width:768px){
.gNavLists__item__link:hover .gNavLists__item__link__in{
transform: translateX(0);
text-shadow: none;
}
}
.gNavLists__item__link.active .gNavLists__item__link__in{
text-shadow: rgba(255,212,0,0.8) 1px 1px 8px, rgba(255,212,0,0.8) -1px 1px 8px, rgba(255,212,0,0.8) 1px -1px 8px, rgba(255,212,0,0.8) -1px -1px 8px;
}
/* copyRight */
.header__cont__copyRight{
color: #fff;
display: block;
font-size: 10px;
letter-spacing: 0.2em;
position: absolute;
bottom: 40px;
left: 40px;
}
@media screen and (max-width:768px){
.header__cont__copyRight{
font-size: 10px;
font-size: 1rem;
position: static;
text-align: center;
}
}
/* share */
.header__cont__shareWrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
position: absolute;
right: 40px;
bottom: 40px;
}
@media screen and (max-width:768px){
.header__cont__shareWrap{
align-items: center;
position: static;
margin-bottom: 40px;
}
}
.header__cont__share__dt{
color: #fff;
font-size: 12px;
margin-left: 20px;
}
.header__cont__share__dt a{
color: #fff;
text-decoration: none;
}
.header__cont__share__dd{
opacity: 0;
pointer-events: none;
transition: all .3s ease-in-out;
}
@media screen and (max-width:768px){
.header__cont__share__dd{
opacity: 1;
pointer-events: auto;
}
}
.header__cont__share__dd.active{
opacity: 1;
pointer-events: auto;
}
/**
* ShareLists
*/
.shareLists{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.shareList{
width: 20px;
height: 20px;
margin: 0 10px;
}
@media screen and (max-width:768px){
.shareList{
width: 30px;
height: 30px;
}
}
.shareList__link{
background-repeat: no-repeat;
background-position: center;
display: block;
width: 100%;
height: 100%;
}
.shareList__link--tw{
background-image: url(../img/common/sns_tw.svg);
background-size: 15px;
}
.shareList__link--fb{
background-image: url(../img/common/sns_fb.svg);
background-size: 15px;
}
.shareList__link--li{
background-image: url(../img/common/sns_line.svg);
background-size: 15px;
}
@media screen and (max-width:768px){
.shareList__link--tw{
background-size: 20px;
}
.shareList__link--fb{
background-size: 20px;
}
.shareList__link--li{
background-size: 20px;
}
}
/**
* mTrigger
*/
.mTrigger{
display: block;
width: 50px;
height: 16px;
position: fixed;
top: 40px;
right: 40px;
pointer-events: auto;
text-decoration: none;
z-index: 2;
}
@media screen and (max-width:768px){
.mTrigger{
width: 40px;
height: 12px;
top: 24px;
right: 24px;
}
}
/* line */
.mTrigger__in__line{
background-color: #fff;
display: block;
width: 100%;
height: 1px;
position: absolute;
transition: all .3s ease-in-out;
}
@media screen and (max-width:768px){
.mTrigger.active .mTrigger__in__line{
background-color: #720000;
}
}
.mTrigger__in__line:nth-child(1){
top: 0;
left: 0;
}
.mTrigger__in__line:nth-child(2){
bottom: 0;
left: 0;
}
.mTrigger.active .mTrigger__in__line:nth-child(1){
transform: rotate(-20deg);
top: 8px;
}
@media screen and (max-width:768px){
.mTrigger.active .mTrigger__in__line:nth-child(1){
top: 5px;
}
}
.mTrigger.active .mTrigger__in__line:nth-child(2){
transform: rotate(20deg);
bottom: 6px;
}
/**
* header__logo
*/
.header__logo{
width: 100%;
min-width: 1200px;
position: fixed;
top: 40px;
text-align: center;
z-index: 0;
}
@media screen and (max-width:768px){
.header__logo{
width: 138px;
margin: auto;
min-width: auto;
top: 20px;
right: 0;
left: 0;
}
.header__logo img{
width: 100%;
}
}
/**
* pc share
*/
.header__shareWrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
position: fixed;
right: 40px;
bottom: 40px;
z-index: 0;
}
@media screen and (max-width:768px){
.header__shareWrap{
display: none;
}
}
.header__share__dt{
color: #fff;
font-size: 12px;
margin-left: 20px;
}
.header__share__dt a{
color: #fff;
text-decoration: none;
}
.header__share__dd{
opacity: 0;
pointer-events: none;
transition: all .3s ease-in-out;
}
.header__share__dd.active{
opacity: 1;
pointer-events: auto;
}
/**
* fade
*/
.fade{
opacity: 0;
transition: all .3s ease-in-out;
}
.fade.active{
opacity: 1;
}
/*-----------------------------------------------
* 03. Top Contents
-------------------------------------------------*/
.top__fullWrap{ opacity: 0; }
.top__fullWrap.active{ opacity: 1; }
/**
* mainWrap
*/
.mainWrap{
position: relative;
z-index: 1;
}
@media screen and (max-width:768px){
.mainWrap{
padding-bottom: 40px;
}
}
/**
* mainFirst
*/
.mainFirst{
width: 100%;
height: 100vh;
min-height: 620px;
position: relative;
}
@media screen and (max-width:768px){
.mainFirst{
height: 68.9vh;
min-height: 390px;
}
}
/* fream deco */ 
.mainFirst:after{
content: "";
background-image: url(../img/top/deco_frame_1.png),
url(../img/top/deco_frame_2.png), 
url(../img/top/deco_frame_3.png), 
url(../img/top/deco_frame_4.png), 
url(../img/top/deco_frame_5.png), 
url(../img/top/deco_frame_6.png), 
url(../img/top/deco_frame_7.png), 
url(../img/top/deco_frame_8.png);
background-position: top left, 
top center, 
top right, 
center right, 
bottom right, 
bottom center, 
bottom left, 
center left;
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
@media screen and (max-width:768px){
.mainFirst:after{
background-image: url(../img/top/deco_frame_1.png),
url(../img/top/deco_frame_2.png), 
url(../img/top/deco_frame_3.png), 
none, 
url(../img/top/deco_frame_5.png), 
url(../img/top/deco_frame_6_sp.png), 
url(../img/top/deco_frame_7.png), 
none;
background-size: 26.9%,  /* 1 */
45.3%,  /* 2 */
26.9%,  /* 3 */
auto,   /* 4 */
26.9%,  /* 5 */
52.9%,  /* 6 */
26.9%,  /* 7 */
auto;   /* 8 */
}
.mainFirst:before{
content: "";
background-image: url(../img/top/deco_frame_4_sp.png),
url(../img/top/deco_frame_8_sp.png);
background-position: center right, 
center left;
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 30%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 0;
}
}
/* h1 title */
.mainFirst__logo{
background-image: url(../img/top/deco_logo.png);
background-position: bottom left;
background-repeat: no-repeat;
background-size: auto;
width: 640px;
height: 105px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
opacity: 0;
transform: translateY(30px);
transition: all 1s ease-in-out;
}
.mainFirst__logo.active{
opacity: 1;
transform: translateY(0);
}
@media screen and (max-width:768px){
.mainFirst__logo{
background-size: 100%;
width: 270px;
height: 45px;
top: -36px;
}
}
.mainFirst__logo__in{
background-image: url(../img/top/top_logo.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
display: block;
width: 640px;
height: 56px;
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
}
@media screen and (max-width:768px){
.mainFirst__logo__in{
width: 270px;
height: 24px;
}
}
/* catch */
.mainFirst__catch{
width: 401px;
height: 23px;
margin: auto;
position: absolute;
top: 200px;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
opacity: 0;
transform: translateY(30px);
transition: all 1s ease-in-out;
}
.mainFirst__catch.active{
opacity: 1;
transform: translateY(0);
}
@media screen and (max-width:768px){
.mainFirst__catch{
width: 240px;
height: 22px;
top: 68px;
}
}
/* scroll */
.mainFirst__scroll{
font-size: 16px;
position: absolute;
bottom: 110px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.mainFirst__scroll__link{
color: #fff;
text-decoration: none;
position: relative;
}
@media screen and (max-width:768px){
.mainFirst__scroll{
font-size: 10px;
font-size: 1rem;
bottom: 16.5%;
display: none;
}
}
@media screen and (max-width:500px){
.mainFirst__scroll{
display: block;
}
}
.mainFirst__scroll__link:before{
content: "";
background-color: #fff;
width: 100%;
height: 1px;
position: absolute;
bottom: -4px;
left: 0;
}
/**
* contWrap, contTitle, contWidth
*/
.contWrap{
overflow: hidden;
position: relative;
}
.contTitle{
color: #fff;
font-size: 16px;
letter-spacing: 0.4em;
position: absolute;
top: 40px;
left: 40px;
}
@media screen and (max-width:768px){
.contTitle{
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 30px;
position: static;
top: 0;
left: 0;
text-align: center;
}
}
.contWidth{
width: 1040px;
margin: 0 auto;
}
@media screen and (max-width:768px){
.contWidth{
width: 100%;
}
}
/**
* lineup
*/
.lineupWrap{
padding-top: 160px;
padding-bottom: 160px;
}
@media screen and (max-width:768px){
.lineupWrap{
padding-top: 60px;
padding-bottom: 0;
position: relative;
}
}
/* title */
.lineup__title{
z-index: 2;
}
/**
* lineup swiper
*/
.lineup__listsWrap{
position: relative;
z-index: 1;
}
/* side grd */
.lineup__listsWrap .swiper-container:before{
content: "";
background-image: url(../img/top/deco_grd_ptn_l.png);
background-repeat: repeat-y;
background-size: 100%;
width: 20%;
height: 100vh;
pointer-events: none;
position: fixed;
top: 0;
z-index: 2;
left: -20%;
opacity: 0;
transition: all .6s ease-in-out;
}
@media screen and (max-width:768px){
.lineup__listsWrap .swiper-container:before{
/*content: none;*/
height: calc(100% + 120px);
top: -120px;
}
}
.lineupWrap.active .lineup__listsWrap .swiper-container:before{
left: 0;
opacity: 1;
}
.lineup__listsWrap .swiper-container:after{
content: "";
background-image: url(../img/top/deco_grd_ptn_r.png);
background-repeat: repeat-y;
background-size: 100%;
width: 20%;
height: 100vh;
pointer-events: none;
position: fixed;
top: 0;
z-index: 2;
right: -20%;
opacity: 0;
transition: all .6s ease-in-out;
}
@media screen and (max-width:768px){
.lineup__listsWrap .swiper-container:after{
/*content: none;*/
height: calc(100% + 120px);
top: -120px;
}
}
.lineupWrap.active .lineup__listsWrap .swiper-container:after{
right: 0;
opacity: 1;
}
.lineup__listsWrap .swiper-container{
overflow: unset;
padding-bottom: 80px;
}
@media screen and (max-width:768px){
.lineup__listsWrap .swiper-container{
padding-bottom: 60px;
}
}
/* image */
.lineup__lists__item__image{
display: block;
width: 56%;
max-width: 500px;
margin: 0 auto 40px;
position: relative;
z-index: 1;
}
.lineup__lists__item__image.comingsoon{
pointer-events: none;
}
@media screen and (max-width:768px){
.lineup__lists__item__image{
width: 75%;
max-width: auto;
}
}
.lineup__lists__item__image:after{
content: "";
background-image: url(../img/top/frame_shaddow.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
display: block;
width: 150%;
height: auto;
padding-top: 200%;
pointer-events: none;
position: absolute;
top: -9%;
left: -30%;
z-index: 1;
}
.lineup__lists__item__image--gaku{
display: block;
position: relative;
z-index: 3;
}
.lineup__lists__item__image--gaku img{
width: 100%;
}
.lineup__lists__item__image--pic{
display: block;
width: calc(100% - 2px);
height: calc(100% - 2px);
overflow: hidden;
padding: 7%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.lineup__lists__item__image--pic img{
width: 100%;
transition: transform .3s ease-in-out;
}
.lineup__lists__item__image:hover .lineup__lists__item__image--pic img{
transform: scale(1.1);
}

/*visual_landscape*/
.lineup__lists__item__image.visual_landscape .lineup__lists__item__image--gaku{
	transform: rotate(90deg);
}
.lineup__lists__item__image.visual_landscape .lineup__lists__item__image--pic{
	display: flex;
	width: 137.2997%;
}
.lineup__lists__item__image.visual_landscape .lineup__lists__item__image--pic img{
	margin: auto;
	display: block;
}
.lineup__lists__item__image.visual_landscape:after{
	background-image: url(../img/top/frame_shaddow_landscape.png);
	width: 200%;
	top: 5%;
	left: -50%;
}



/* detail */
.lineup__lists__item__detail{
background-color: #fff;
max-width: 480px;
margin: 0 auto;
padding: 24px;
position: relative;
z-index: 2;
opacity: 0;
transform: translateY(50px);
transition: all .6s ease-in-out;
}
@media screen and (max-width:768px){
.lineup__lists__item__detail {
width: 175%;
max-width: 175%;
margin: 0 0 0 -37.5%;
padding: 12px 20%;
}
}
.lineup__listsWrap .swiper-slide-active .lineup__lists__item__detail{
transform: translateY(0);
opacity: 1;
}
.lineup__lists__item__detail__title{
color: #000;
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
}
.lineup__lists__item__detail__title.comingsoon{
text-align: center;
margin-bottom: 0;
}
@media screen and (max-width:768px){
.lineup__lists__item__detail__title{
font-size: 12px;
font-size: 1.2rem;
text-align: center;
}
}
.lineup__lists__item__detail__lists__item{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width:768px){
.lineup__lists__item__detail__lists__item{
justify-content: center;
}
}
.lineup__lists__item__detail__lists__item__title{
color: #000;
font-size: 12px;
min-width: 40px;
}
@media screen and (max-width:768px){
.lineup__lists__item__detail__lists__item__title{
font-size: 10px;
font-size: 1rem;
}
}
.lineup__lists__item__detail__lists__item__detail{
color: #000;
font-size: 12px;
}
@media screen and (max-width:768px){
.lineup__lists__item__detail__lists__item__detail{
font-size: 10px;
font-size: 1rem;
}
}
/* swiper-pagination */
.lineup__listsWrap .swiper-pagination{
color: #fff;
font-size: 12px;
bottom: 0 !important;
}
@media screen and (max-width:768px){
.lineup__listsWrap .swiper-pagination{
font-size: 10px;
font-size: 1rem;
}
}
.lineup__listsWrap .swiper-pagination-total{
color: #acacac;
}
/* swiper-button */
.lineup__listsWrap .swiper-button-next, .lineup__listsWrap .swiper-button-prev{
position: absolute;
top: auto;
bottom: 0;
width: 70px;
height: 30px;
margin-top: 0;
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
@media screen and (max-width:768px){
.lineup__listsWrap .swiper-button-next, .lineup__listsWrap .swiper-button-prev{
width: 48px;
height: 26px;
}
}
.lineup__listsWrap .swiper-button-next{
left: auto;
right: 0;
}
.lineup__listsWrap .swiper-button-prev{
left: 0;
right: auto;
}
.lineup__listsWrap .swiper-button-next:before,
.lineup__listsWrap .swiper-button-prev:before{
content: "";
background-color: #fff;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
transition: width .3s ease-in-out;
}
.lineup__listsWrap .swiper-button-next:before{
left: 0;
}
.lineup__listsWrap .swiper-button-prev:before{
right: 0;
}
.lineup__listsWrap .swiper-button-next:hover:before,
.lineup__listsWrap .swiper-button-prev:hover:before{
width: 50%;
}
@media screen and (max-width:768px){
.lineup__listsWrap .swiper-button-next:hover:before,
.lineup__listsWrap .swiper-button-prev:hover:before{
width: 100%;
}
}
.lineup__listsWrap .swiper-button-next:after{
content: "Next";
color: #fff;
font-family: 'Amiri', serif;
font-size: 12px;
position: absolute;
top: 0;
left: 0;
}
.lineup__listsWrap .swiper-button-prev:after{
content: "Prev";
color: #fff;
font-family: 'Amiri', serif;
font-size: 12px;
position: absolute;
top: 0;
right: 0;
}
@media screen and (max-width:768px){
.lineup__listsWrap .swiper-button-next:after,
.lineup__listsWrap .swiper-button-prev:after{
font-size: 10px;
font-size: 1rem;
}
}
/**
* aboutWrap
*/
.aboutWrap{
min-height: 100vh;
padding-top: 140px;
padding-bottom: 140px;
}
.about__sec{
margin-bottom: 140px;
}
@media screen and (max-width:768px){
.aboutWrap{
min-height: auto;
padding-top: 60px;
padding-bottom: 0;
}
.about__sec{
margin-bottom: 60px;
}
}
.about__sec:last-of-type{
margin-bottom: 0;
}
/* about__title */
.about__title{
margin-left: -20px;
margin-bottom: 60px;
}
@media screen and (max-width:768px){
.about__title{
margin-left: 0;
margin-bottom: 20px;
}
}
/* about__text */
.about__textWrap{
padding-left: 30px;
}
.about__text{
color: #fff;
font-size: 16px;
letter-spacing: 0.15em;
line-height: 40px;
transform: scaleX(0.9);
margin-bottom: 40px;
}
@media screen and (max-width:768px){
.about__textWrap{
padding-left: 24px;
padding-right: 24px;
}
.about__text{
font-size: 12px;
font-size: 1.2rem;
line-height: 24px;
margin-bottom: 24px;
}
}
.about__text:last-of-type{
margin-bottom: 0;
}
/**
* about__director
*/
.about__director{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
@media screen and (max-width:768px){
.about__director{
display: block;
}
}
/* image */
.about__director__image{
width: 360px;
height: 480px;
position: relative;
}
@media screen and (max-width:768px){
.about__director__image{
width: 180px;
height: 240px;
margin: 0 auto 24px;
z-index: 1
}
}
.about__director__image:before{
content: "";
background-image: url(../img/top/frame_4.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
display: block;
width: 360px;
height: 480px;
position: relative;
z-index: 3;
}
@media screen and (max-width:768px){
.about__director__image:before{
width: 180px;
height: 240px;
}
}
.about__director__image__pic{
width: 280px;
height: 400px;
margin: auto;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
@media screen and (max-width:768px){
.about__director__image__pic{
width: 141px;
height: 200px;
}
}
.about__director__image:after{
content: "";
background-image: url(../img/top/frame_shaddow.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
display: block;
width: 555px;
height: 710px;
position: absolute;
top: -40px;
left: -115px;
z-index: 1;
}
@media screen and (max-width:768px){
.about__director__image:after{
width: 296px;
height: 386px;
top: -28px;
left: -66px;
}
}
/* text */
.about__director__textWrap{
width: calc(100% - 360px);
padding-right: 30px;
padding-left: 30px;
}
.about__director__text{
color: #fff;
font-size: 16px;
letter-spacing: 0.15em;
line-height: 40px;
transform: scaleX(0.9);
}
@media screen and (max-width:768px){
.about__director__textWrap{
width: 100%;
padding-right: 24px;
padding-left: 24px;
position: relative;
z-index: 2;
}
.about__director__text{
font-size: 12px;
font-size: 1.2rem;
line-height: 24px;
}
}
/**
* topNews
*/
.topNewsWrap{
height: 100vh;
min-height: 620px;
}
.topNews__listsWrap{
width: 880px;
height: 440px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@media screen and (max-width:768px){
.topNewsWrap{
height: auto;
min-height: auto;
margin-bottom: 30px;
padding-top: 60px;
}
.topNews__listsWrap{
width: 100%;
height: auto;
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
padding: 0 24px;
}
}
/**
* topicsLists
*/
@media screen and (max-width:768px){
.topicsLists{
margin-bottom: 30px;
}
}
/* item */
.topicsLists__item{
margin-bottom: 24px;
position: relative;
}
.topicsLists__item:last-child{
margin-bottom: 0;
}
.topicsLists__item:after{
content: "";
background-image: url(../img/common/deco_list_1.png),
url(../img/common/deco_list_2.png), 
url(../img/common/deco_list_3.png), 
url(../img/common/deco_list_4.png);
background-position: top left, 
top right, 
bottom right, 
bottom left;
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.topicsLists__item:before{
content: "";
background-image: url(../img/common/deco_list_5.png),
url(../img/common/deco_list_5.png);
background-position: top left, 
bottom left;
background-repeat: repeat-x;
background-size: auto;
width: calc(100% - 18px);
height: 100%;
position: absolute;
top: 0;
left: 9px;
z-index: 0;
}
/* link */
.topicsLists__item__link{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 24px 40px; 
position: relative;
text-decoration: none;
z-index: 1;
}
@media screen and (max-width:768px){
.topicsLists__item__link{
padding: 12px; 
}
}
.topicsLists__item__link:before{
content: "";
background-image: url(../img/common/deco_list_6.png),
url(../img/common/deco_list_6.png);
background-position: top left, 
top right;
background-repeat: repeat-y;
background-size: auto;
width: 100%;
height: calc(100% - 18px);
position: absolute;
top: 9px;
left: 0;
z-index: 0;
}
/* date */
.topicsLists__item__date{
width: 120px;
}
.topicsLists__item__date__in{
color: #e7ca3c;
display: block;
font-size: 16px;
transform: scaleX(0.9) translateX(-6px);
}
@media screen and (max-width:768px){
.topicsLists__item__date{
width: 80px;
}
.topicsLists__item__date__in{
font-size: 12px;
font-size: 1.2rem;
transform: scaleX(0.9) translateX(2px);
}
}
/* title */
.topicsLists__item__title{
width: calc(100% - 120px);
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
@media screen and (max-width:768px){
.topicsLists__item__title{
width: calc(100% - 80px);
}
}
.topicsLists__item__title:before{
content: "";
background-color: #fff;
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .4;
}
.topicsLists__item__title__in{
display: block;
color: #fff;
font-size: 16px;
line-height: 32px;
transform: scaleX(0.9);
transition: all .3s ease-in-out;
}
@media screen and (max-width:768px){
.topicsLists__item__title__in{
font-size: 12px;
font-size: 1.2rem;
line-height: 24px;
}
}
.topicsLists__item__link:hover .topicsLists__item__title__in{
text-shadow: rgba(255,212,0,0.8) 1px 1px 8px, rgba(255,212,0,0.8) -1px 1px 8px, rgba(255,212,0,0.8) 1px -1px 8px, rgba(255,212,0,0.8) -1px -1px 8px;
}
/* more */
.topNews__listsWrap__more{
font-size: 16px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
@media screen and (max-width:768px){
.topNews__listsWrap__more{
font-size: 10px;
font-size: 1rem;
position: static;
bottom: auto;
left: auto;
text-align: center;
transform: translateX(0);
}
}
.topNews__listsWrap__more__link{
color: #fff;
text-decoration: none;
position: relative;
}
.topNews__listsWrap__more__link:before{
content: "";
background-color: #fff;
width: 100%;
height: 1px;
position: absolute;
bottom: -4px;
left: 0;
}
@media screen and (max-width:768px){
.topNews__listsWrap__more__link:before{
bottom: 0;
}
}
/*-----------------------------------------------
* 04. Footer
-------------------------------------------------*/
.footerWrap{
background-color: #000;
height: 100vh;
min-height: 620px;
margin-top: auto; 
position: relative;
z-index: 1;
}
@media screen and (max-width:768px){
.footerWrap{
height: auto;
min-height: auto;
padding-top: 40px;
padding-bottom: 40px;
}
}
/* copyRight */
.footer__copyRight{
color: #fff;
display: block;
font-size: 10px;
letter-spacing: 0.2em;
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width:768px){
.footer__copyRight{
font-size: 1rem;
position: static;
bottom: auto;
left: auto;
transform: translateX(0);
text-align: center;
}
}
/**
* contact__cont
*/
.contact__cont{
width: 100%;
height: 280px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@media screen and (max-width:768px){
.contact__cont{
height: auto;
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
}
@media screen and (max-width:768px){
.contact__title{
margin-bottom: 40px;
}
}
/* title */
.contact__cont__title{
background: url(../img/common/contact_h2.png) no-repeat 0 0 / 100%;
height: 29px;
width: 282px;
margin: 0 auto 50px;
}
@media screen and (max-width:768px){
.contact__cont__title{
background: url(../img/common/contact_h2_sp.png) no-repeat 0 0 / 100%;
height: auto;
width: 100%;
margin: 0 auto 10px;
padding-top: 4.5%;
}
}
/* lists */
@media screen and (max-width:768px){
.contact__cont__lists{
margin-bottom: 10px;
padding: 20px 10px;
}
}
.contact__cont__lists__title{
color: #fff;
font-size: 16px;
font-weight: 600;
text-align: center;
margin-bottom: 10px;
}
.contact__cont__lists__title:not(:first-child) {
margin-top: 30px;
}
@media screen and (max-width:768px){
.contact__cont__lists__title{
font-size: 12px;
font-size: 1.2rem;
}
}
.contact__cont__lists__detail{
color: #fff;
font-size: 16px;
text-align: center;
}
@media screen and (max-width:768px){
.contact__cont__lists__detail{
font-size: 12px;
font-size: 1.2rem;
}
}
.contact__cont__lists__detail__link{
color: #fff;
}
.contact__cont__lists__detail__link__fontS{
font-size: 13px;
}
@media screen and (max-width:768px){
.contact__cont__lists__title:not(:first-child){
margin-top: 16px;
}
.contact__cont__lists__detail__link__fontS{
font-size: 10px;
font-size: 1rem;
}
}
/*-----------------------------------------------
* 05. Sub Page
-------------------------------------------------*/
.subMainWrap{
padding-top: 134px;
position: relative;
z-index: 1;
}
@media screen and (max-width:768px){
.subMainWrap{
padding-top: 80px;
}
}
.sub__copyRight{
margin-top: auto;
display: block;
color: #fff;
display: block;
font-size: 10px;
letter-spacing: 0.2em;
padding-top: 160px;
padding-bottom: 40px;
position: relative;
text-align: center;
z-index: 1;
}
@media screen and (max-width:768px){
.sub__copyRight{
font-size: 1rem;
padding-top: 40px;
}
}
/*-----------------------------------------------
* 05 - 01. News
-------------------------------------------------*/
/**
* newsLists
*/
.newsLists{
width: 880px;
margin: 0 auto 80px;
}
@media screen and (max-width:768px){
.newsLists{
width: 100%;
margin: 0 auto 40px;
padding: 0 24px;
}
}
/* item */
.newsLists__item{
margin-bottom: 24px;
position: relative;
}
.newsLists__item:last-child{
margin-bottom: 0;
}
.newsLists__item:after{
content: "";
background-image: url(../img/common/deco_list_1.png),
url(../img/common/deco_list_2.png), 
url(../img/common/deco_list_3.png), 
url(../img/common/deco_list_4.png);
background-position: top left, 
top right, 
bottom right, 
bottom left;
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.newsLists__item:before{
content: "";
background-image: url(../img/common/deco_list_5.png),
url(../img/common/deco_list_5.png);
background-position: top left, 
bottom left;
background-repeat: repeat-x;
background-size: auto;
width: calc(100% - 18px);
height: 100%;
position: absolute;
top: 0;
left: 9px;
z-index: 0;
}
/* link */
.newsLists__item__link{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 24px 40px; 
position: relative;
text-decoration: none;
z-index: 1;
}
@media screen and (max-width:768px){
.newsLists__item__link{
padding: 12px; 
}
}
.newsLists__item__link:before{
content: "";
background-image: url(../img/common/deco_list_6.png),
url(../img/common/deco_list_6.png);
background-position: top left, 
top right;
background-repeat: repeat-y;
background-size: auto;
width: 100%;
height: calc(100% - 18px);
position: absolute;
top: 9px;
left: 0;
z-index: 0;
}
/* date */
.newsLists__item__date{
width: 120px;
}
.newsLists__item__date__in{
color: #e7ca3c;
display: block;
font-size: 16px;
transform: scaleX(0.9) translateX(-6px);
}
@media screen and (max-width:768px){
.newsLists__item__date{
width: 80px;
}
.newsLists__item__date__in{
font-size: 12px;
font-size: 1.2rem;
transform: scaleX(0.9) translateX(2px);
}
}
/* title */
.newsLists__item__title{
width: calc(100% - 120px);
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
@media screen and (max-width:768px){
.newsLists__item__title{
width: calc(100% - 80px);
}
}
.newsLists__item__title:before{
content: "";
background-color: #fff;
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .4;
}
.newsLists__item__title__in{
display: block;
color: #fff;
font-size: 16px;
line-height: 32px;
transform: scaleX(0.9);
transition: all .3s ease-in-out;
}
@media screen and (max-width:768px){
.newsLists__item__title__in{
font-size: 12px;
font-size: 1.2rem;
line-height: 24px;
}
}
.newsLists__item__link:hover .newsLists__item__title__in{
text-shadow: rgba(255,212,0,0.8) 1px 1px 8px, rgba(255,212,0,0.8) -1px 1px 8px, rgba(255,212,0,0.8) 1px -1px 8px, rgba(255,212,0,0.8) -1px -1px 8px;
}
/**
* Paging
*/
.pagingListsWrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 1;
}
/* Next, Prev */
.pagingLists__next,
.pagingLists__prev{
width: 70px;
height: 30px;
position: relative;
z-index: 2;
}
@media screen and (max-width:768px){
.pagingLists__next,
.pagingLists__prev{
width: 48px;
height: 26px;
}
}
.pagingLists__next{
margin-left: auto;
}
.pagingLists__next a,
.pagingLists__prev a{
color: #fff;
display: block;
width: 100%;
height: 100%;
font-size: 12px;
position: relative;
text-decoration: none;
}
@media screen and (max-width:768px){
.pagingLists__next a,
.pagingLists__prev a{
font-size: 10px;
font-size: 1rem;
}
}
.pagingLists__prev a{
text-align: right;
}
.pagingLists__next a:before,
.pagingLists__prev a:before {
content: "";
background-color: #fff;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
transition: width .3s ease-in-out;
}
.pagingLists__next a:before{
left: 0;
}
.pagingLists__prev a:before{
right: 0;
}
.pagingLists__next a:hover:before,
.pagingLists__prev a:hover:before{
width: 50%;
}
/* lists */
.pagingLists{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
padding: 0 60px;
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width:768px){
.pagingLists{
padding: 0 10px;
}
}
.pagingLists__item{
margin: 0 10px;
}
@media screen and (max-width:768px){
.pagingLists__item{
margin: 0 5px;
}
}
.pagingLists__item__link,
.pagingLists__item__active{
display: block;
font-size: 16px;
padding: 3px 6px;
position: relative;
text-decoration: none;
}
@media screen and (max-width:768px){
.pagingLists__item__link,
.pagingLists__item__active{
font-size: 12px;
font-size: 1.2rem;
}
}
.pagingLists__item__link{
color: #fff;
transition: all .3s ease-in-out;
}
.pagingLists__item__link:hover{
color: #e7ca3c;
}
.pagingLists__item__link:before{
content: "";
background-color: #e7ca3c;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
transform: translateY(10px);
transition: all .3s ease-in-out;
}
.pagingLists__item__link:hover:before{
opacity: 1;
transform: translateY(0);
}
.pagingLists__item__active{
color: #e7ca3c;
}
.pagingLists__item__active:before{
content: "";
background-color: #e7ca3c;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
}
/**
* newsDtail
*/
.newsDetailWrap{
width: 880px;
margin: 0 auto;
padding: 40px;
position: relative;
}
@media screen and (max-width:768px){
.newsDetailWrap{
width: calc(100% - 48px);
padding: 24px;
}
}
.newsDetailWrap:before {
content: "";
background-image: url(../img/common/deco_list_5.png), url(../img/common/deco_list_5.png);
background-position: top left, bottom left;
background-repeat: repeat-x;
background-size: auto;
width: calc(100% - 18px);
height: 100%;
position: absolute;
top: 0;
left: 9px;
z-index: 0;
}
.newsDetailWrap:after {
content: "";
background-image: url(../img/common/deco_list_1.png), url(../img/common/deco_list_2.png), url(../img/common/deco_list_3.png), url(../img/common/deco_list_4.png);
background-position: top left, top right, bottom right, bottom left;
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.newsDetail:before {
content: "";
background-image: url(../img/common/deco_list_6.png), url(../img/common/deco_list_6.png);
background-position: top left, top right;
background-repeat: repeat-y;
background-size: auto;
width: 100%;
height: calc(100% - 18px);
position: absolute;
top: 9px;
left: 0;
z-index: 0;
}
/**
* article title
*/
.newsDetail__title{
margin-bottom: 40px;
padding-bottom: 40px;
position: relative;
z-index: 1;
}
@media screen and (max-width:768px){
.newsDetail__title{
margin-bottom: 24px;
padding-bottom: 12px;
}
}
.newsDetail__title:after{
content: "";
background-color: #fff;
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
opacity: .4;
}
/* date */
.newsDetail__title__date{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 24px;
position: relative;
}
@media screen and (max-width:768px){
.newsDetail__title__date{
margin-bottom: 4px;
}
}
.newsDetail__title__date:after{
content: "";
background-color: #fff;
display: block;
width: 100%;
height: 1px;
opacity: .4;
}
.newsDetail__title__date__in{
display: block;
color: #e7ca3c;
font-size: 16px;
transform: scaleX(0.9) translateX(-5px);
margin-right: 5px;
}
@media screen and (max-width:768px){
.newsDetail__title__date__in{
font-size: 12px;
font-size: 1.2rem;
}
}
/* text */
.newsDetail__title__text{
color: #fff;
display: block;
width: calc(100% + 85px);
font-size: 20px;
line-height: 40px;
transform: scaleX(0.9) translateX(-45px);
}
@media screen and (max-width:768px){
.newsDetail__title__text{
width: calc(100% + 10%);
font-size: 14px;
font-size: 1.4rem;
line-height: 28px;
transform: scaleX(0.9) translateX(-5%);
}
}
/**
* article text
*/
.newsDetail__textWrap{
position: relative;
z-index: 1;
}
/* p */
.newsDetail__text{
color: #fff;
font-size: 16px;
line-height: 32px;
}
@media screen and (max-width:768px){
.newsDetail__text{
font-size: 12px;
font-size: 1.2rem;
line-height: 24px;
}
}
/* image */
.newsDetail__textWrap img {
height: auto;
max-width: 100%;
}
@media screen and (max-width:768px){
.newsDetail__textWrap img {
height: auto !important;
max-width: 100% !important;
}
}
/* iframe */
.newsDetail__textWrap iframe[src*="youtube"]{
width: 100%;
height: 100%;
}
.newsDetail__textWrap .ytWrap{
display: block;
width: 640px;
height: 360px;
}
@media screen and (max-width:768px){
.newsDetail__textWrap iframe[src*="youtube"]{
position: absolute;
top: 0;
left: 0;
}
.newsDetail__textWrap .ytWrap{
width: 100%;
height: auto;
padding-top: 56.25%;
position: relative;
}
}
/* back to */
.backto{
margin-top: 80px;
text-align: center;
}
@media screen and (max-width:768px){
.backto{
margin-top: 50px;
}
}
.backto__link{
color: #fff;
font-size: 16px;
text-decoration: none;
position: relative;
}
@media screen and (max-width:768px){
.backto__link{
font-size: 10px;
font-size: 1rem;
}
}
.backto__link:before {
content: "";
background-color: #fff;
width: 100%;
height: 1px;
position: absolute;
bottom: -4px;
left: 0;
}
/*-----------------------------------------------
* 05 - 02. Blu-ray & DVD
-------------------------------------------------*/
/**
* tagLists
*/
.tagListsWrap{
width: 880px;
margin: 0 auto 80px;
}
.tagLists{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tagLists__item{
margin-right: 20px;
}
.tagLists__item:last-child{
margin-right: 0;
}
.tagLists__item__link{
color: #fff;
display: block;
font-size: 14px;
padding: 4px 0px;
position: relative;
text-decoration: none;
transition: all .3s ease-in-out;
}
.tagLists__item__link:hover{
color: #e7ca3c;
}
.tagLists__item__link:before{
content: "";
background-color: #e7ca3c;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
transform: translateY(10px);
transition: all .3s ease-in-out;
}
.tagLists__item__link:hover:before,
.tagLists__item__link.active:before{
opacity: 1;
transform: translateY(0);
}
.tagLists__item__link.active{
color: #e7ca3c;
}
@media screen and (max-width:768px){
.tagListsWrap{
width: 100%;
margin: 0 auto 30px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.tagLists{
width: 100%;
-ms-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
padding: 0 20px;
}
.tagLists__item__link{
font-size: 12px;
font-size: 1.2rem;
}
.tagLists__item {
margin-right: 10px;
margin-left: 10px;
}
.tagLists__item:last-child .tagLists__item__link {
margin-right: 30px;
}
}
/**
* bddvdLists
*/
.discList{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 880px;
margin: 0 auto 100px;
}
@media screen and (max-width:768px){
.discList{
width: calc(100% - 30px);
margin: 0 auto 60px;
}
}
/* item */
.discList__item{
width: 278px;
margin-right: 23px;
margin-bottom: 23px;
position: relative;
}
.discList__item:nth-child(3n){
margin-right: 0;
}
.discList__item:after{
content: "";
background-image: url(../img/common/deco_list_1.png),
url(../img/common/deco_list_2.png), 
url(../img/common/deco_list_3.png), 
url(../img/common/deco_list_4.png);
background-position: top left, 
top right, 
bottom right, 
bottom left;
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.discList__item:before{
content: "";
background-image: url(../img/common/deco_list_5.png),
url(../img/common/deco_list_5.png);
background-position: top left, 
bottom left;
background-repeat: repeat-x;
background-size: auto;
width: calc(100% - 18px);
height: 100%;
position: absolute;
top: 0;
left: 9px;
z-index: 0;
}
@media screen and (max-width:768px){
.discList__item{
width: calc(50% - 10px);
margin-right: 5px;
margin-left: 5px;
margin-bottom: 20px;
position: relative;
}
.discList__item:nth-child(3n) {
margin-right: 5px;
}
}
/* link */
.discList__link{
display: block;
width: 100%;
height: 100%;
padding: 24px; 
position: relative;
text-decoration: none;
z-index: 1;
}
.discList__link:before{
content: "";
background-image: url(../img/common/deco_list_6.png),
url(../img/common/deco_list_6.png);
background-position: top left, 
top right;
background-repeat: repeat-y;
background-size: auto;
width: 100%;
height: calc(100% - 18px);
position: absolute;
top: 9px;
left: 0;
z-index: 0;
}
.discList__thumb{
margin-bottom: 23px;
}
.discList__thumb img{
width: 100%;
}
.discList__title{
color: #fff;
font-size: 14px;
transition: all .3s ease-in-out;
}
.discList__link:hover .discList__title{
text-shadow: rgba(255,212,0,0.8) 1px 1px 8px, rgba(255,212,0,0.8) -1px 1px 8px, rgba(255,212,0,0.8) 1px -1px 8px, rgba(255,212,0,0.8) -1px -1px 8px;
}
@media screen and (max-width:768px){
.discList__link{
padding: 12px; 
}
.discList__thumb{
margin-bottom: 12px;
}
.discList__title{
font-size: 10px;
font-size: 1rem;
}
}
/**
* bddvdDtail
*/
.discDetailWrap{
width: 880px;
margin: 0 auto;
padding: 40px;
position: relative;
}
.discDetailWrap:before {
content: "";
background-image: url(../img/common/deco_list_5.png), url(../img/common/deco_list_5.png);
background-position: top left, bottom left;
background-repeat: repeat-x;
background-size: auto;
width: calc(100% - 18px);
height: 100%;
pointer-events: none;
position: absolute;
top: 0;
left: 9px;
z-index: 0;
}
.discDetailWrap:after {
content: "";
background-image: url(../img/common/deco_list_1.png), url(../img/common/deco_list_2.png), url(../img/common/deco_list_3.png), url(../img/common/deco_list_4.png);
background-position: top left, top right, bottom right, bottom left;
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.discDetail:before {
content: "";
background-image: url(../img/common/deco_list_6.png), url(../img/common/deco_list_6.png);
background-position: top left, top right;
background-repeat: repeat-y;
background-size: auto;
width: 100%;
height: calc(100% - 18px);
pointer-events: none;
position: absolute;
top: 9px;
left: 0;
z-index: 0;
}
.discDetailWrap img{
max-width: 100%;
height: auto !important;
}
@media screen and (max-width:768px){
.discDetailWrap{
width: calc(100% - 48px);
padding: 24px;
}
}
/* iframe */
.discDetailWrap iframe[src*="youtube"]{
width: 100%;
height: 100%;
}
.discDetailWrap .ytWrap{
display: block;
width: 640px;
height: 360px;
}
@media screen and (max-width:768px){
.discDetailWrap iframe[src*="youtube"]{
position: absolute;
top: 0;
left: 0;
}
.discDetailWrap .ytWrap{
width: 100%;
height: auto;
padding-top: 56.25%;
position: relative;
}
}
/* titleWrap */
.discDetail__titleWrap{
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 40px;
position: relative;
z-index: 1;
}
.discDetail__titleWrap:before{
content: "";
background-color: #fff;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
opacity: .4;
}
.discDetail__titleWrap:after{
content: "";
background-color: #fff;
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
opacity: .4;
}
.discDetail__titleWrap a{
color: #fff;
}
.discDetail__title{
color: #fff;
display: block;
width: calc(100% + 85px);
font-size: 20px;
line-height: 40px;
transform: scaleX(0.9) translateX(-45px);
}
.discDetail__title__text{
font-size: 16px;
margin-bottom: 60px;
}
@media screen and (max-width:768px){
.discDetail__titleWrap{
padding-top: 12px;
padding-bottom: 12px;
margin-bottom: 20px;
}
.discDetail__title{
width: calc(100% + 10%);
font-size: 14px;
font-size: 1.4rem;
line-height: 24px;
transform: scaleX(0.9) translateX(-5%);
}
.discDetail__title__text{
font-size: 12px;
font-size: 1.2rem;
margin-bottom: 40px;
}
}
/* discDetail__text */
.discDetail__text{
font-size: 16px;
margin-top: 80px;
}
@media screen and (max-width:768px){
.discDetail__text{
font-size: 12px;
font-size: 1.2rem;
margin-top: 40px;
}
}
/* oneDisc */
.oneDisc{
margin-bottom: 60px;
}
.oneDisc:last-of-type{
margin-bottom: 0;
}
/* type */
.oneDisc__type{
background: rgba(0,0,0,.3);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
color: #fff;
display: inline-block;
font-size: 12px;
margin-bottom: 20px;
padding: 0 50px;
}
@media screen and (max-width:768px){
.oneDisc__type{
font-size: 10px;
font-size: 1rem;
width: 100%;
text-align: center;
}
}
/* flex */
.oneDisc__flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* flex wrap */
.oneDisc__imageWrap{
width: 34%;
}
.oneDisc__textWrap{
width: 66%;
}
@media screen and (max-width:768px){
.oneDisc__flex{
display: block;
}
.oneDisc__imageWrap,
.oneDisc__textWrap{
width: 100%;
}
.oneDisc__textWrap{
margin-top: 30px;
}
}
/**
* Detail oneDisc__imageWrap
*/
.oneDisc__imageWrap{
padding-right: 50px;
}
.oneDisc__image--imgWrap{
overflow: hidden;
}
.oneDisc__image--img{
width: 100%;
}
@media screen and (max-width:768px){
.oneDisc__imageWrap{
padding-right: 0;
}
}
/* link lists */
.oneDisc__linkLists{
width: 100%;
margin: 20px auto 0;
}
.oneDisc__linkLists__item{
width: 100%;
margin-bottom: 10px;
}
.oneDisc__linkLists__item:last-child{
margin-bottom: 0;
}
.oneDisc__linkLists__item__link{
background-color: #fff;
border: 1px solid #fff;
color: #7f0202;
display: block;
font-size: 16px;
font-weight: bold;
width: 100%;
padding: 10px 0;
text-align: center;
text-decoration: none;
transition: all .3s ease-in-out;
}
.oneDisc__linkLists__item__link:hover{
background-color: transparent;
color: #fff;
text-shadow: rgba(255,212,0,0.8) 1px 1px 8px, rgba(255,212,0,0.8) -1px 1px 8px, rgba(255,212,0,0.8) 1px -1px 8px, rgba(255,212,0,0.8) -1px -1px 8px;
}
@media screen and (max-width:768px){
.oneDisc__linkLists{
margin: 10px auto 0;
}
.oneDisc__linkLists__item__link{
font-size: 14px;
font-size: 1.4rem;
padding: 6px 0;
}
.oneDisc__linkLists__item__link:hover{
background-color: #fff;
color: #7f0202;
text-shadow: none;
}
}
/**
* Detail oneDisc__textWrap
*/
.oneDisc__textWrap{
font-size: 15px;
}
/* title */
.oneDisc__text__title{
font-size: 22px;
line-height: 1.6;
}
@media screen and (max-width:768px){
.oneDisc__textWrap{
font-size: 12px;
font-size: 1.2rem;
}
.oneDisc__text__title{
font-size: 18px;
font-size: 1.8rem;
}
}
/* lists */
.oneDisc__prdLists{
margin-top: 30px;
}
.oneDisc__prdLists__item{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 6px;
color: #fff;
font-size: 16px;
width: calc(100% - 80px);
}
.oneDisc__prdLists__item__left{
color: #e7ca3c;
font-size: 16px;
min-width: 80px;
padding-right: 40px;
position: relative;
text-align: right;
}
.oneDisc__prdLists__item__left:after{
content: "";
background-color: #fff;
width: 1px;
height: 20px;
position: absolute;
top: 4px;
right: 20px;
opacity: .4;
}
.oneDisc__text__comment{
margin-top: 30px;
}
@media screen and (max-width:768px){
.oneDisc__prdLists__item{
font-size: 12px;
font-size: 1.2rem;
width: 100%;
}
.oneDisc__prdLists__item__left{
font-size: 12px;
font-size: 1.2rem;
}
.oneDisc__prdLists__item__left:after{
top: 2px;
height: 16px;
}
}
/**
* Detail disk
*/
/* dl dt dd */
.oneDisc__disk{
margin-top: 30px;
}
.oneDisc__disk__title{
font-size: 18px;
}
.oneDisc__disk__cont{
margin-top: 10px;
}
@media screen and (max-width:768px){
.oneDisc__disk__title{
font-size: 14px;
font-size: 1.4rem;
}
}
/* lists */
.oneDisc__diskLists__item{
background: rgba(0,0,0,.3);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
margin-bottom: 6px;
padding: 8px 14px;
position: relative;
}
.oneDisc__diskLists__item:last-child{
margin-bottom: 0;
}
.oneDisc__diskLists__item.has-trial{
padding-right: 50px;
}
.oneDisc__diskLists__item__title{
font-size: 14px;
line-height: 1.4;
margin-bottom: 2px;
}
.disk__musicComment{
font-size: 12px;
}
@media screen and (max-width:768px){
.oneDisc__diskLists__item__title{
font-size: 12px;
font-size: 1.2rem;
}
.disk__musicComment{
font-size: 10px;
font-size: 1.0rem;
}
}
/* linkLists */
.disk__linkLists{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.disk__linkLists__item{
line-height: 1;
margin-top: 6px;
}
.disk__linkLists__item a{
display: block;
}
.disk__iconWrap{
width: 28px;
height: 28px;
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
}
@media screen and (max-width:768px){
.disk__iconWrap{
width: 22px;
height: 22px;
}
}
/* trial */
.trial_image{
background-color: #7f0202;
border-radius: 50%;
display: block;
width: 100%;
height: 100%;
}
/* comment */
.oneDisc__disk__comment{
font-size: 14px;
margin-top: 20px;
}
/**
* Shop
*/
.shopLists{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.shopLists__item{
margin: 5px 5px;
}
@media screen and (max-width:799px){
.shopLists{
max-width: 400px;
margin: 0 auto;
padding: 80px 10px;
}
.shopLists__item{
width: calc(50% - 10px);
margin: 0 5px 10px;
}
.shopLists__item img{
width: 100%;
}
}
/**
* Download
*/
.downloadLists{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 30px 0;
}
.downloadLists__item{
background-color: rgba(0,0,0,.2);
border: 1px solid rgba(255,255,255,.6);
width: 220px;
margin: 0 10px 20px;
padding: 20px;
}
.downloadLists__name{
color: #fff;
font-size: 16px;
text-align: center;
margin-bottom: 12px;
}
.downloadLists__img{
text-align: center;
margin-bottom: 12px;
}
.downloadLists__qr{
text-align: center;
}
@media screen and (max-width:739px){
.downloadLists{
padding: 80px 10px;
}
.downloadLists__item{
width: calc(50% - 10px);
margin: 0 5px 10px;
padding: 10px;
}
.downloadLists__name{
font-size: 12px;
font-size: 1.2rem;
}
}


/* old */
.bddvdDetailWrap{
width: 880px;
margin: 0 auto;
padding: 40px;
position: relative;
}
@media screen and (max-width:768px){
.bddvdDetailWrap{
width: calc(100% - 48px);
padding: 24px;
}
}
.bddvdDetailWrap:before {
content: "";
background-image: url(../img/common/deco_list_5.png), url(../img/common/deco_list_5.png);
background-position: top left, bottom left;
background-repeat: repeat-x;
background-size: auto;
width: calc(100% - 18px);
height: 100%;
position: absolute;
top: 0;
left: 9px;
z-index: 0;
}
.bddvdDetailWrap:after {
content: "";
background-image: url(../img/common/deco_list_1.png), url(../img/common/deco_list_2.png), url(../img/common/deco_list_3.png), url(../img/common/deco_list_4.png);
background-position: top left, top right, bottom right, bottom left;
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.bddvdDetail:before {
content: "";
background-image: url(../img/common/deco_list_6.png), url(../img/common/deco_list_6.png);
background-position: top left, top right;
background-repeat: repeat-y;
background-size: auto;
width: 100%;
height: calc(100% - 18px);
position: absolute;
top: 9px;
left: 0;
z-index: 0;
}
/**
* article title
*/
.bddvdDetail__title{
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 40px;
position: relative;
z-index: 1;
}
@media screen and (max-width:768px){
.bddvdDetail__title{
padding-top: 12px;
padding-bottom: 12px;
margin-bottom: 20px;
}
}
.bddvdDetail__title:before{
content: "";
background-color: #fff;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
opacity: .4;
}
.bddvdDetail__title:after{
content: "";
background-color: #fff;
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
opacity: .4;
}
/* text */
.bddvdDetail__title__text{
color: #fff;
display: block;
width: calc(100% + 85px);
font-size: 20px;
line-height: 40px;
transform: scaleX(0.9) translateX(-45px);
}
@media screen and (max-width:768px){
.bddvdDetail__title__text{
width: calc(100% + 10%);
font-size: 14px;
font-size: 1.4rem;
line-height: 28px;
transform: scaleX(0.9) translateX(-5%);
}
}
/**
* bddvdDetail__textWrap
*/
.bddvdDetail__textWrap{
position: relative;
z-index: 1;
}
/* read */
.bddvdDetail__text__read{
color: #fff;
font-size: 16px;
line-height: 32px;
margin-bottom: 40px;
}
@media screen and (max-width:768px){
.bddvdDetail__text__read{
font-size: 12px;
font-size: 1.2rem;
line-height: 24px;
margin-bottom: 20px;
}
}
.bddvdDetail__text__read:last-of-type{
margin-bottom: 0;
}
/* bddvdDetail__text__product */
.bddvdDetail__text__product{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 40px;
}
@media screen and (max-width:768px){
.bddvdDetail__text__product{
display: block;
margin-bottom: 20px;
}
}
/* img */
.bddvdDetail__text__product__imgWrap{
width: 360px;   
}
@media screen and (max-width:768px){
.bddvdDetail__text__product__imgWrap{
width: 100%;
margin-bottom: 20px;
}
}
.bddvdDetail__text__product__imgWrap img{
width: 100%;
}
/* detail */
.bddvdDetail__text__product__detail{
width: calc(100% - 360px);
padding-left: 40px;
}
@media screen and (max-width:768px){
.bddvdDetail__text__product__detail{
width: 100%;
padding-left: 0;
}
}
.bddvdDetail__text__product__detail__one{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
}
.bddvdDetail__text__product__detail__one__dt{
color: #e7ca3c;
font-size: 16px;
min-width: 80px;
position: relative;
text-align: right;
padding-right: 20px;
}
@media screen and (max-width:768px){
.bddvdDetail__text__product__detail__one__dt{
font-size: 12px;
font-size: 1.2rem;
min-width: 60px;
}
}
.bddvdDetail__text__product__detail__one__dt:after{
content: "";
background-color: #fff;
width: 1px;
height: 20px;
position: absolute;
top: 4px;
right: 0;
opacity: .4;
}
@media screen and (max-width:768px){
.bddvdDetail__text__product__detail__one__dt:after{
top: 2px;
}
}
.bddvdDetail__text__product__detail__one__dd{
color: #fff;
font-size: 16px;
width: calc(100% - 80px);
padding-left: 20px;
}
@media screen and (max-width:768px){
.bddvdDetail__text__product__detail__one__dd{
font-size: 12px;
font-size: 1.2rem;
width: calc(100% - 60px);
}
}
/*-----------------------------------------------
* 06. Modal
-------------------------------------------------*/
.modalBox {
-webkit-overflow-scrolling: touch;
background: rgba(0,0,0,.6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
width: 100%;
height: 100%;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.js-modalBox{
display: none;
}
.closeBtn {
width: 100%;
height: 100%;
min-width: 1200px;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.closeBtn a{
background: url(../img/common/close.png) no-repeat center;
display: block;
width: 37px;
height: 37px;
pointer-events: auto;
position: absolute;
top: 40px;
right: 40px;
}
.oneModal {
display: none;
width: 100%;
height: 100%;
z-index: 1;
}
.oneModalIn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: auto;
width: 100%;
min-width: 1200px;
min-height: 100%;
margin: 0 auto;
position: relative;
}
.oneModalIn__cont{
padding: 50px 0;
}
@media screen and (max-width:768px){
.oneModalIn{
min-width: 100%;
}
.closeBtn{
min-width: 100%;
}
.closeBtn a{
width: 30px;
height: 30px;
top: 10px;
right: 10px;
}
}
/* common */
.commonIframe{
width: 100%;
height: 100%;
display: block;
}
/* youtube */
.ytIframeWrap{
width: 920px;
height: 520px;
}
@media screen and (max-width:768px){
.ytIframeWrap{
width: 100%;
height: auto;
padding-top: 56.25%;
position: relative;
}
.ytIframe{
position: absolute;
top: 0;
left: 0;
}
}
/* goods */
.goodsIframeWrap{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width:768px){
.goodsIframeWrap{
width: 100%;
height: 100%;
}
}
/* shop */
.shopIframeWrap{
width: 800px;
}
@media screen and (max-width:768px){
.shopIframeWrap{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.shopIframeWrap iframe{
height: 100% !important;
}
}
/* download */
.dlIframeWrap{
width: 740px;
}
@media screen and (max-width:768px){
.dlIframeWrap{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.dlIframeWrap iframe{
height: 100% !important;
}
}