body{
background-color: #000;
line-height: 1.8;
font-family: "Zen Old Mincho", serif;
font-weight: normal;
font-style: normal;
color: #fff;
}

body:after {
content:'';
width:100%;
height:100vh;
display:block;
backgrond-repeat:no-repeat;
background-size:cover;
position:fixed;
top:0;
left:0;
z-index:-1;
}
body.bg:after {
background-image:url('../images/img_bg.jpg');
}

hr {
background-image: url("../images/hr.png");
height: 28px;
width: 354px;
border:0px;/*hrの罫線を消す*/
margin: 150px auto; 
}

.mb0{
margin-bottom: 0;
}

h2{
text-align: center;
margin:150px 0 100px; 
}

h3{
text-align: center;
margin:0 0 100px; 
}

.pc{display:inline-block}
.sp{display:none;}
.ssp{display:none;}

img {
max-width:100%;
vertical-align: bottom;
}

ul li{
line-height: 2.5;
}

ul.br{
margin-left: 1.4em;
text-indent: -1.4em;
}

small{font-size: smaller;}

a{
color: #fff;
text-decoration: underline;
word-break: break-all;
}

a:hover{
text-decoration: none;
}

a img{
transition:0.7s;
}

a img:hover{
opacity: 0.7 ;
}

p{
margin: 50px 0;
font-size: 1em;
}

.cf:before,
.cf:after {
content: " "; 
display: table; 
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.fadein_c {
opacity : 0;
transform : translate(0, 0);
transition : all 1500ms;
}
.fadein_c.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein{
opacity : 0;
transform : translate(0, 50px);
transition : all 1500ms;
}

.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein02 {
opacity : 0;
transform : translate(-150px, 0);
transition : all 1500ms;
}
.fadein02.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein03 {
opacity : 0;
transform : translate(150px, 0);
transition : all 1500ms;
}
.fadein03.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein04{
opacity : 0;
transform : translate(0, -50px);
transition : all 1500ms;
}

.fadein04.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.movie-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:0 0 150px;
}

.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* 　コンテンツスタイル　 */

.dli-external-link {
display: inline-block;
vertical-align: middle;
color: #fff;
line-height: 1;
width: 0.9em;
height: 0.9em;
border: 0.1em solid currentColor;
border-radius: 0.1em;
background: #000;
box-sizing: content-box;
position: relative;
margin: 0 5px
}

.dli-external-link > span {
position: absolute;
top: -0.2em;
right: -0.2em;
width: 45%;
height: 45%;
border: 0.1em solid currentColor;
border-bottom: 0;
border-left: 0;
background: #000;
box-shadow: -0.1em 0.1em 0 0.1em #000;
box-sizing: border-box;
}

.dli-external-link > span::before {
content: '';
position: absolute;
top: -0.05em;
right: -0.1em;
width: 0.1em;
height: 0.9em;
background: currentColor;
transform: rotate(45deg);
transform-origin: top center;
}

.dli-external-link-event {
display: inline-block;
vertical-align: middle;
color: #fff;
line-height: 1;
width: 0.5em;
height: 0.5em;
border: 0.1em solid currentColor;
border-radius: 0.1em;
background: #2722da;
box-sizing: content-box;
position: relative;
margin: 0 5px
}

.dli-external-link-event > span {
position: absolute;
top: -0.1em;
right: -0.1em;
width: 40%;
height: 40%;
border: 0.1em solid currentColor;
border-bottom: 0;
border-left: 0;
background: #2722da;
box-shadow: -0.1em 0.1em 0 0.1em #2722da;
box-sizing: border-box;
}

.dli-external-link-event > span::before {
content: '';
position: absolute;
top: -0.05em;
right: -0.1em;
width: 0.1em;
height: 0.5em;
background: currentColor;
transform: rotate(45deg);
transform-origin: top center;
}

.mb{
margin-bottom: 50px;	
}

.center{
text-align: center;
}

.col1{
padding: 0;
}

.col1 li{
list-style: none;
width: 100%;
margin-bottom: 2%;
}

.col1 li img{
max-width: 100%;
width: 100%;
height: auto;
}

.col2{
padding: 0;
}

.col2 li{
list-style: none;
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
}

.col2 li img{
max-width: 100%;
width: 100%;
height: auto;
}

.col2 li:nth-child(2n){
margin-right: 0;
}

.col3{
padding: 0;
}

.col3 li{
list-style: none;
float: left;
width: 30.6666666%;
margin-right: 4%;
margin-bottom: 4%;
}

.col3 li img{
max-width: 100%;
width: 100%;
height: auto;
}

.col3 li:nth-child(3n){
margin-right: 0;
}

p.txt_box{
background-color: #000;
padding: 3%;
border: 3px double #efdd92;
box-sizing: border-box;
}

/************* main_area *************/

.main_area{
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background: url(../images/img_main_pc.jpg) 0 no-repeat #000;
background-size: contain;
position:relative;
padding-top: 56.25%;
width:100%;
margin-top: 0;
margin-bottom: 0;
}

.main_area_inner{
position:absolute;
top: 0px;
width:100%;
}

.img-main-01{
position: absolute;
left:1%;
width:8%;
margin-top:1.5%;
}

.img-main-02{
position: absolute;
left:9.5%;
width:10%;
margin-top:2.5%;
}

.img-main-03{
position: absolute;
left:20%;
width:11.969%;
margin-top:2.5%;
}

.img-main-04{
position: absolute;
left:13.15%;
width:73.7%;
margin-top:27%;
}

/************* area_01 *************/

.area_01 {
margin: 0 auto 150px;
overflow-x:hidden;
}

.area_01_inner {
width: 1000px;
margin: 0px auto;
position: relative;
}

.area_01 .img-area01-01{
width:50.4%;
}

.area_01 .img-area01-02{
position: absolute;
right:15%;
width:38.8%;
margin-top:0;
}

.area_01 .img-area01-03{
position: absolute;
right:0%;
width:38.8%;
margin-top:34%;
}

.area_01 .img-area01-04{
position: absolute;
right:13%;
width:38.8%;
margin-top:70%;
}

/************* area_02 *************/

.area_02 {
margin: 150px auto;
}

.area_02_inner {
width: 1000px;
margin: 50px auto;
}

.area_02_gm{
position: relative;
} 

.area_02_gm .img-area02-02{
width:58.8%;
margin-top:5%;
margin-left: 41.2%;
}

.area_02_gm .img-area02-03{
position: absolute;
left:4%;
width:63.3%;
margin-top:9%;
}

/************* area_03 *************/

.area_03 {
margin: 150px auto;
overflow-x:hidden;
}

.area_03_inner {
width: 1000px;
margin:0  auto 50px;
position: relative;
}

.area_03 .img-area03-01{
width:40.1%;
margin-left:27%;
}

.area_03 .img-area03-02{
position: absolute;
left:-2%;
width:41%;
margin-top:3%;
}

.area_03 .img-area03-03{
position: absolute;
left:-2%;
width:43.9%;
margin-top:53%;
}

.area_03 .img-area03-04{
position: absolute;
right:-2%;
width:38.9%;
margin-top:3%;
}

.area_03 .img-area03-05{
position: absolute;
right:-2%;
width:41.9%;
margin-top:53%;
}

/************* area_04 *************/

.area_04 {
margin: 100px auto;
}

.area_04_inner {
width: 1000px;
margin: 50px auto;
position: relative;
}

.area_04 .img-area04-01{
width:60%;
}

.area_04 .img-area04-02{
position: absolute;
right:0;
width:35%;
}

.area_04 .img-area04-03{
position: absolute;
right:0;
width:35%;
margin-top:39.2%;
}

/************* area_05 area_06 area_07 *************/

.area_05,.area_06 {
margin: 100px auto;
}

.area_05_inner,.area_06_inner {
width: 1000px;
margin: 50px auto;
position: relative;
}

/************* area_shop *************/

.product_info{
border:  solid 1px #fff;
box-sizing: border-box;
padding: 5% 10%;
background-color: #000;
margin-bottom: 0;
border-bottom: none;
}	

.bb1{
border:  solid 1px #fff;
}

.product_info th{
border-right: solid 1px; 
padding-right: 30px;
padding-bottom: 15px;
text-shadow: 2px 15px 13px rgba(0, 0, 0, 1);
}

.product_info td{
padding-left: 30px;
padding-bottom: 15px;
text-shadow: 2px 15px 13px rgba(0, 0, 0, 1);
}

.product_info .last{
padding-bottom: 0;
}

ul.shop{
list-style: none;
width: 100%;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
background-color: #000;
}

ul.shop li{
width:50%;
float: left;
border: solid 1px;
border-bottom: 0;
padding: 3.4%;
text-align: center;
box-sizing: border-box;
}

ul.shop li img{
width: 85%;
}

ul.shop_02{
list-style: none;
width: 100%;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
background-color: #000;
}

ul.shop_02 li{
width:100%;
float: left;
border: solid 1px;
border-bottom: 0;
padding: 3.4% 8%;
text-align: center;
box-sizing: border-box;
}

ul.shop_02 li img{
width: 100%;
text-align: center;
}

.area_shop,.area_notice{
width: 1000px;
margin: 0 auto;
}

.date{
width: 96%;
text-align: center;
background-color: #f4ff3c;
color: #000;
font-weight: bold;
padding: 2%;
margin-bottom: 50px;
}

.date .preorder{
font-size: 22px;
margin-top: 0;
margin-bottom:0;
}

.date .small{
font-size: 14px;
font-weight: normal;
margin: 0;
}

.store_notice{
font-size: 12px;
list-style: none;
padding-left: 0;
margin-left: 1.5em;
text-indent: -1.5em;
}

.notice{
list-style: none;
padding-left: 0;
margin-left: 1em;
text-indent: -1em;
}

.copy{
text-align: center;
margin: 50px 0;
}


/* footer */

footer{
border-top: solid 1px #fff;
padding: 30px 0;
background-color: #000;
}

.footer_inner{
width: 1000px;
margin: 0 auto;
position: relative;
}

/* sns_media */

.sns_media h2 img{
text-align: center;
width: 25%;
margin-bottom: 30px;
}

.sns_media{
width: 1000px;
margin: 0px auto;
padding: 100px 0;
}

.sns_media ul{
padding: 0;
margin: 0;
}

.sns_media ul li{
width: 30%;
float: left;
margin-right:5%; 
list-style: none;
}

.sns_media ul li:last-child{
margin-right: 0;
}

.sns_icon{
position: absolute;
right: 0;
margin: 0;
}

.sns_icon li{
list-style: none;
float: left;
margin-top: 15px;
margin-left: 10px;
}

.threezero_icon{
left: 0;
padding-bottom: 30px;
}

.slider{
border: solid 1px;
outline-offset: -1px;
width: 80%;
margin: 0 10% 100px;
}

@media screen and (max-width: 1000px) {

p{
margin: 20px 0;
font-size: 1em;
}

/************* area_01 *************/

.area_01_inner {
width: 94%;
margin: 0px auto;
position: relative;
}

/************* area_02 *************/

.area_02 {
margin: 100px auto;
}

.area_02_inner {
width: 94%;
margin: 30px auto 50px;
}	

/************* area_03 *************/

.area_03 {
margin: 100px auto;
}

.area_03_inner {
width: 94%;
margin: 0 auto 0;
}	

/************* area_04 *************/

.area_04 {
margin: 100px auto;
}

.area_04_inner {
width: 94%;
margin: 30px auto 50px;
}	

/************* area_shop *************/

.area_shop,.area_notice{
width: 94%;
margin: 100px auto;
}

.footer_inner{
width: 94%;
margin: 0 3%;
}

/* sns_media */

.sns_media h2 img{
width: 25%;
}

.sns_media{
width: 94%;
padding: 50px 0;
}

.sns_icon li img{
width: 100%;
}

.threezero_icon{
width: 100%;
}

/************* area_05 area_06 *************/

.area_05,.area_06 {
margin: 100px auto;
}

.area_05_inner,.area_06_inner {
width: 1000px;
width: 94%;
margin: 30px auto 50px;
}

}

/************* SP *************/

@media screen and (max-width: 768px) {

hr {
margin: 100px auto; 
}

body.bg:after {
background-image:url('../images/img_bg_sp.jpg');
}

.pc{display:none;}
.sp{display:inline-block;}

h2{
text-align: center;
margin:50px 0; 
}

h3{
text-align: center;
margin:0 0 50px; 
}

p{font-size: 0.8em;}

.col2{
margin-bottom: 0;
}

.col3{
margin-top: 0;
}

.col3 li{
list-style: none;
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
}

.col3 li img{
max-width: 100%;
width: 100%;
height: auto;
}

.col3 li:nth-child(odd){
margin-right: 0;
}

.col3 li:nth-child(3n){
margin-right: auto;
}

.movie-wrap {
margin:0 0 50px;
}
	
.main_area{
padding-top: 156.25%;
background: url(../images/img_main_sp.jpg) 0 no-repeat #000;
background-size: contain;
position:relative;
}

.img-main-01{
position: absolute;
left:3%;
width:14%;
margin-top:4.5%;
}

.img-main-02{
position: absolute;
left:18%;
width:19%;
margin-top:6%;
}

.img-main-03{
position: absolute;
right:3%;
left: auto;
width:23%;
margin-top:6%;
}

.img-main-04{
position: absolute;
left:0%;
width:100%;
margin-top:103%;
}

.area_01 {
margin: 0 auto 100px;
}

/************* area_02 *************/

.area_02 .img-area02-01{
width:100%;
margin-left:0%;
}

.area_02 .col2 {
margin-top: 5%;
}

/************* area_04 *************/

.area_04 .img-area04-01{
width:100%;
margin-left:0%;
}

.area_04 .col2 {
margin-top: 5%;
}

/************* area_shop *************/	

.product_info{
box-sizing: border-box;
padding: 5% 5%;
margin-bottom: 0px;
font-size: 0.8em;
}	
.bb1{
margin-bottom: 100px;
}

.product_info th{
width: 22%;
border-right: solid 1px; 
padding-right: 15px;
padding-bottom: 15px;
text-shadow: 2px 15px 13px rgba(0, 0, 0, 1);
}

.product_info td{
width: 73%;
padding-left: 15px;
padding-bottom: 15px;
text-shadow: 2px 15px 13px rgba(0, 0, 0, 1);
}

.product_info .last{
padding-bottom: 0;
}

ul.shop li{
width:100%;
float: none;
border: solid 1px;
border-bottom: 0;
padding: 6% 3.3%;
text-align: center;
}

ul.shop_02 li{
width:100%;
float: none;
border: solid 1px;
border-bottom: 0;
padding: 6% 3.3%;
text-align: center;
}

ul.shop li img {
width: 100%;
}

ul.shop_02 li img {
width: 100%;
}

ul.shop li:nth-child(even){
border-right: solid 1px #fff;
}

ul.shop li:nth-of-type(10){
border-bottom: 0;
}

#pagetop {
width: 70px;
}

/* sns_media */

.sns_media h2 img{
width: 50%;
}

.sns_media ul li{
width: 100%;
float: none;
margin-right:0%; 
margin-bottom: 20px;
text-align: center;
}

.sns_media ul li:last-child{
margin-right: 0;
}

.slider{
border: solid 1px;
outline-offset: -1px;
width: 100%;
margin: 0 0% 50px;
}

}

@media screen and (max-width: 500px) {
.ssp{display:block;}
}

/* PAGETOP */

#pagetop {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
line-height: .1;
cursor: pointer;
}

#pagetop img {
opacity: .4;
filter: alpha(opacity=40)
}

#pagetop img:hover {
opacity: 1;
filter: alpha(opacity=100)
}

#pagetop {
display: none;
}

/* GENERAL */

.bgbk{
background-color: #000;
padding-top: 50px;
border-top:solid 1px #fff;
}

.wrap{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.youtube {
position: relative;
height: 0;
margin-bottom: 20px;
padding-bottom: 56.25%;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.wrap img{
width: 100%;
}

.float-left{
margin-bottom:  1.5rem;
}

/* ココから下がPC表示（600px以上）のレイアウト */
@media screen and (min-width: 600px) {
.float-right{
float: right;
width: 49.5%;
}
.float-left{
float:left;
width: 49.5%;
margin-bottom: 0;
}
.wrap:after{
display: block;
clear: both;
content: "";
}
}

.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10;
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeOut 1.5s 2.5s forwards;
}

@keyframes fadeOut {
0% {
opacity: 1;
}

100% {
opacity: 0;
visibility: hidden;
}
}

.loading__logo {
opacity: 0;
animation: logo_fade 2s 0.5s forwards;
width: 300px;
}

@keyframes logo_fade {
0% {
opacity: 0;
transform: translateY(20px);
}

60% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
}
}