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

h2{
text-align: center;
}

h2 img{
margin-bottom: 30px;
}

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

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

ul li{
line-height: 1.8;
}

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: 10px 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);
}

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

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

.col2{
padding: 0;
}

.col2 li{
list-style: none;
float: left;
width: 48%;
margin-right: 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%;
margin-right: 5%;
}

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

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

.col4{
padding: 0;
}

.col4 li{
list-style: none;
float: left;
width: 22%;
margin-right: 4%;
}

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

.col4 li:nth-child(4n){
margin-right: 0;
}

.img-right-30{
width: 30%;
float: right;
margin-left: 20px;
}

.img-right-40{
width: 40%;
float: right;
margin-left: 20px;
}

.img-right-60{
width: 60%;
float: right;
margin-left: 20px;
}

.img-right{
float: right;
margin-left: 20px;
}

.img-left{
float: left;
margin-right: 20px;
width: 30%;
}

.l-space{
padding-left: 50px;
}

.w-box{
margin: 50px 0;
}

.border_w{
  box-sizing: border-box;
  border: 1px solid #fff;
}

h3{
text-decoration: underline;
}

h4{
margin-bottom: 0px;
}

h5{
margin: 10px 0;
font-weight: 0;
text-decoration: underline;
}

hr{
	margin: 100px 0;
}


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

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

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

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

.area_01 {
margin: 50px auto;
}

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

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

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

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

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

.area_03 {
margin: 100px auto;
color: #000;
}

.area_03_inner {
width: 900px;
padding: 50px;
margin: 50px auto;
background-color: #fff;
}

.area_notice{
width: 1000px;
margin: 0 auto;
background-color: #000;
}

.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: 35%;
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;
}


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

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

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

.area_01 {
margin: 50px auto;
}

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

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

.area_02 {
margin: 50px auto;
}

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

.process h3{
margin: 0 0 30px;
}

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

.area_03 {
margin: 100px auto;
}

.area_03_inner {
width: 90%;
padding: 5%;
}
	
/************* area_shop *************/

.area_shop,.area_notice{
width: 94%;
margin: 0 3;
}

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

}


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

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

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

p{font-size: 0.8em;}


.img-right-30{
width: auto;
float: none;
margin-left: 0px;
margin: 20px auto;
}

.img-right-40{
width: auto;
float: none;
margin-left: 0px;
margin: 20px auto;
}

.img-right-60{
width: auto;
float: none;
margin-left: 0px;
margin: 20px auto;
}

.img-right{
width: auto;
float: none;
margin-left: 0px;
margin: 20px auto;
}

.img-left{
width: auto;
float: none;
margin-right: 0px;
margin: 20px auto;
}

.col3 li{
float: none;
width: 100%;
margin-right: 0%;
margin: 0 auto;
}

.col4 li{
float: none;
width: 100%;
margin-right: 0%;
margin: 0 auto;
}
	
#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: 500px) {
.ssp{display:block;}
	
.col2 li{
list-style: none;
float: none;
width: 100%;
margin: 0 auto 50px;
}
	
.col2 li img{
	text-align: center;
}

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

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