body{
background-color: #000;
line-height: 1.8;
font-weight: normal;
font-style: normal;
color: #000;
}

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');
}

.dela-gothic-one-regular {
font-family: "Dela Gothic One", sans-serif;
font-weight: 0;
font-style: normal;
font-size:20px
}

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 li img {
vertical-align: bottom;
}

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

small{font-size: smaller;}

a{
color: #195CE3;
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;
}

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

.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;
}

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

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

.main_area{
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */

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:21%;
width:62%;
margin-top:13%;
}

.img-main-02{
position: absolute;
left:36%;
width:28%;
margin-top:49%;
}

.img-main-03{
position: absolute;
left:28%;
width:40%;
margin-top:49%;
}

.img-main-04{
position: absolute;
left: 25%;
width: 50%;
margin-top: 3%;
}

.c-btn {
cursor: pointer;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.c-btn {
background: #000;
border: 2px solid #000;
border-radius: 60px;
color: #fff;
display: block;
font-weight: none;
padding: 1% 2%;
text-align: center;
font-size: 28px;
}

.c-btn.press {
box-shadow: 0 4px 0 #454545;
}
.c-btn.press:hover {
transform: translateY(4px);
box-shadow: none;
}

/* about */

.about{
width: 100%;
margin: 0 auto ;
}

.about_inner{
width: 1000px;
margin: 0 auto; 
}

ul.line-up{
padding: 0;
width: 100%;
margin: 50px 0;
}

ul.maker_list {
padding: 0;
width: 100%;
margin: 50px 0;
}

ul.maker_list li{
float: left;
width: 44%;
margin-right: 4%;
margin-bottom: 4%;
list-style: none;
outline: 2px solid #000;
outline-offset: -2px;
padding: 2% 2%;
background: #fff;
background-image: linear-gradient(45deg, #c94389 10px, transparent 0),
linear-gradient(-45deg, #34a9d1 10px, transparent 0),
linear-gradient(135deg, #b4cd3d 10px, transparent 0),
linear-gradient(-135deg, #f2cf18 10px, transparent 0);
}

.about_img{
margin: 0 0 15px;
}

.about_txt{
margin: 15px 0
}

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

ul.maker_list .about_img{
text-align: center;
}

/* info */

.info{
width: 100%;
margin: 0 auto;
}

.info_inner{
width: 1000px;
margin: 0 auto; 
}

.info_inner .comingsoon{
margin: 100px 0;
}

ul.line-up{
padding: 0;
width: 100%;
margin: 50px 0;
}

ul.line-up li{
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
list-style: none;
outline: 2px solid #000;
outline-offset: -2px;
}

ul.line-up li:nth-child(2n){
margin-right: 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;
}

ul.maker_logo{
list-style: none;
padding-left: 0;
}

ul.maker_logo li{
float: left;
}

.hma_f img{
width: 80%;
margin-top: 5%;
margin-left: 5%;
}

@media screen and (max-width: 1200px) {
.c-btn {
font-size: 18px;
}

}

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

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

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

.info{
width: 100%;
margin: 0 auto;
}

.info_inner{
width: 90%;
margin: 0 5%; 
}

.about{
width: 100%;
margin: 0 auto;
}

.about_inner{
width: 90%;
margin: 0 5%; 
}



/* 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%;
}

}

/************* 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;}

.main_area{
padding-top: 141.25%;;
background-size: contain;
position:relative;
}

.img-main-01 {
position: absolute;
left: 7%;
width: 88%;
margin-top: 57.5%;
}

.img-main-02{
position: absolute;
left: 15%;
width: 70%;
margin-top: 125%;
}
.img-main-03 {
position: absolute;
right: 3%;
left: auto;
width: 90%;
margin-top: 113%;
}

.img-main-04{
position: absolute;
left: 20%;
width: 62%;
margin-top: 6%;
}

.c-btn {
padding: 5% 2%;
font-size: 30px;
}

/* info */

.info_inner .comingsoon{
margin: 50px 0;
}

ul.line-up{
margin: 0;
}

ul.line-up li{
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
}

ul.line-up li:nth-child(2n){
margin-right: 0%;
}
.about_img{
margin: 15px 0 15px;
}

.about_img img{
width: 50%;
}

ul.maker_list {
padding: 0;
width: 100%;
margin: 50px 0;
}

ul.maker_list li{
float: none;
width: 96%;
margin-right: 0%;
padding: 2% 2%;
}

#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;
}

}

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

.c-btn {
font-size: 20px;
}

ul.maker_logo{
width: 100%;
margin: 0;	
}

ul.maker_logo li{
text-align: center;
width: 30%;
margin:  0 10% 0 10%;
}

.threezero_f img{
width: 80%;
margin: 0 0  0 20%;
}

.hma_f img{
width: 95%;
margin: 12% 5% 0 0;
}

.sns_icon{
width: 50%;
margin: 0 25% 50px;
position: static;
padding-left: 0;
}

.sns_icon li{
text-align: center;
list-style: none;
float: left;
margin-top: 15px;
margin-left: 10px;
width: 27%;
}

}

@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;
}