@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* =====================================================================
clear-setting
===================================================================== */
.clrFix:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
*:first-child+html .clrFix { display:inline-block; }

html {
font-size: 16px;
line-height: 28px;
letter-spacing: 1px;
font-style: normal;
font-weight: 200;
color: #000;

}
body{overflow-x: hidden;}
li{list-style:none;}
p{padding:0; margin:0;}



/* ==============================================
共通
============================================== */
#SC {font-family: 'Noto Sans Japanese', sans-serif;}

.sp{
display:none;
}

@media (max-width:640px){
.pc{
display:none;
}
.sp{
display:block;
width: 100%;
height: auto;
}
}

#SC h1{
	margin: 0;
	padding: 0;
}



/* ==============================================
#main
============================================== */
#SC #main .pc{
background: url(../images/sc_h1_bg.jpg) center;
margin: 0 -500%;
padding: 0 500%;
width: 100%;
}
#SC #main .pc .txt-box{
width: 1200px;
margin: auto;
padding: 120px 0 80px 0;
}
#SC #main .pc .txt-box h1{
margin: 0;
line-height: 1.4;
font-size: 150%;
padding-bottom: 10px;
}
#SC #main .pc .txt-box div{
color: #000;
width: 320px;
font-weight: 500;
line-height: 1.8;
}

#SC #main .sp img{
width: 100%;
height: auto;
margin: 10px 0 5px 0;
}



/* ==============================================
#movie
============================================== */
#SC #movie{
text-align: center;
margin: 50px auto 150px auto;
}
#SC #movie h2{
font-size: 200%;
font-weight: 500;
letter-spacing: 4px;
}
#SC #movie img{
width: 100%;
max-width: 895px;
height: auto;
}

@media (max-width:640px){
#SC #movie{
text-align: center;
margin: 50px auto;
}
#SC #movie h2{
font-size: 140%;
letter-spacing: 0;
}
}



/* ==============================================
#charge
============================================== */
#SC #charge .h2_bg {
background: url(../images/sc_charge_h2_bg.jpg) center;
height: 300px;
margin: 0 -500%;
padding: 0 500%;
width: 100%;
font-size: 0;
}
#SC #charge h2{	max-width: 1200px; margin: auto;}
#SC #charge h2 img{ margin: 100px 0;}



/* ==============================================
#charge > #feature共通
============================================== */
#SC #feature01,#feature02,#feature03{
max-width: 1200px;
margin: 0 auto 150px auto;
}

#SC .title{
width: 100%;
max-width: 1200px;
margin: 40px 0;
}
#SC .title .txt p{
margin-top: 20px;
font-size: 120%;
font-weight: 200;
line-height: 1.6;
}

#SC #feature01 .title .img{
float: left;
width: 50%;
}
#SC #feature01 .title .txt{
font-size: 110%;
font-weight: 300;

float: right;
width: 48%;
margin: 10% 0 0 0;
}

#SC #feature02 .title .img{
float: right;
text-align: right;
width: 50%;
}
#SC #feature02 .title .txt{
font-size: 110%;
font-weight: 300;

float: left;
width: 50%;
margin: 10% 0 0 0;
}

#SC #feature03 .title .img{
float: left;
width: 50%;
}
#SC #feature03 .title .txt{
font-size: 110%;
font-weight: 300;

float: right;
width: 50%;
margin: 10% 0 0 0;
}

#SC #feature01 strong,
#SC #feature02 strong,
#SC #feature03 strong{
font-size: 34px;
font-weight: 500;
letter-spacing: 4px;

}

#SC #feature01 .title img,
#SC #feature03 .title img{
width: 100%;
max-width: 480px;
height: auto;
}
#SC #feature02 .title img{
width: 100%;
max-width: 580px;
height: auto;
}


@media (max-width:640px){
#SC #feature01,#feature02,#feature03{
max-width: 1200px;
margin: 0 auto 20px auto;
}

#SC .title{
font-size: 90%;
width: 100%;
max-width: none;
margin: 40px 0 0 0;
}

#SC .title .txt p{
margin-top: 10px;
font-size: 110%;
line-height: 1.6;
}

#SC #feature01 .title .img{
float: none;
width: 100%;
}
#SC #feature01 .title .txt{
float: none;
width: 100%;
margin: 5% 0 0 0;
}

#SC #feature02 .title .img{
float: none;
width: 100%;
}
#SC #feature02 .title .txt{
float: none;
width: 100%;
margin: 5% 0 0 0;
}

#SC #feature03 .title .img{
float: none;
width: 100%;
}
#SC #feature03 .title .txt{
float: none;
width: 100%;
margin: 5% 0 0 0;
}

#SC #feature01 strong,
#SC #feature02 strong,
#SC #feature03 strong{
font-size: 140%;
letter-spacing: 0;
}

#SC #feature01 .title img,
#SC #feature02 .title img,
#SC #feature03 .title img{
width: 100%;
max-width:none;
height: auto;
}
}



/* ==============================================
set2 (feature03)
============================================== */
#SC .set2{
max-width: 1200px;
width: 100%;
margin: auto;
overflow: hidden;
}
#SC .set2 .sttl{
font-size: 110%;
width: 100%;
font-weight: bold;	border-bottom: 1px solid;
margin: 20px 0;
padding-bottom: 10px;
}
#SC .set2 img{
width: 100%;
max-width: 550px;
	text-align: center;
height: auto;
}
#SC .set2 .txt{
width: 47.5%;
margin-right: 5%;
float: left;
}
#SC .set2 .txt-last{
width: 47.5%;
margin-right: 0;
float: left;
}

@media (max-width:640px){
#SC .set2{
max-width: none;
width: 100%;
margin: auto;
overflow: hidden;
}
#SC .set2 .sttl{
font-weight: normal;
font-size: 110%;
width: 100%;
border-bottom: 1px solid;
margin: 30px 0 10px 0;
padding-bottom: 0;
}
#SC .set2 .txt{
font-size: 90%;
line-height: 1.6;


width: 100%;
margin-right: 0;
float: none;
}
#SC .set2 .txt-last{
font-size: 90%;
line-height: 1.6;

width: 100%;
margin-right: 0;
float: none;
}
}


/* ==============================================
set3 (feature01/02)
============================================== */
#SC .set3{
max-width: 1200px;
width: 100%;
margin: auto;
overflow: hidden;
}
#SC .set3 .sttl{
font-size: 110%;
width: 100%;
font-weight: bold;
border-bottom: 1px solid;
margin: 20px 0;
padding-bottom: 10px;
}
#SC .set3 .txt{
width: 30%;
margin-right: 5%;
float: left;
min-height: 10%;
}
#SC .set3 .txt-last{
width: 30%;
margin-right: 0;
float: left;
}


@media (max-width:640px){
#SC .set3{
max-width: none;
width: 100%;
margin: auto;
}
#SC .set3 .sttl{
font-weight: normal;
font-size: 110%;
width: 100%;
border-bottom: 1px solid;
margin: 30px 0 10px 0;
padding-bottom: 0;
}
#SC .set3 .txt{
font-size: 90%;
line-height: 1.6;

width: 100%;
margin-right: 5%;
float: left;
min-height: 10%;
}
#SC .set3 .txt-last{
font-size: 90%;
line-height: 1.6;

width: 100%;
margin-right: 0;
float: left;
}
}



/* ==============================================
set4 (Testing)
============================================== */

#SC .set4{
max-width: 1200px;
width: 100%;
margin: auto;
overflow: hidden;
}
#SC .set4 .sttl{
font-size: 110%;
font-weight: bold;
padding-bottom: 10px;
}
#SC .set4 .txt{
font-size: 14px;
line-height: 24px;
width: 22%;
margin-right: 4%;
float: left;
margin-bottom: 80px
}
#SC .set4 .txt-last{
width: 22%;
margin-right: 0;
float: left;
}

#SC .set4 .txt img,
#SC .set4 .txt-last img{
max-width: 264px;
width: 100%;
height: auto;
}

#SC .set4 .txt p.btn,
#SC .set4 .txt-last p.btn{
	text-align: center;
	margin: 20px 0;
}

@media (max-width:640px){
#SC .set4{
max-width: none;
width: 100%;
margin: auto;
overflow: hidden;
}

#SC .set4 .sttl{
font-weight: normal;
padding-bottom: 0;
}


#SC .set4 .txt{
font-size: 14px;
line-height: 24px;
width: 100%;
margin-right: 0;
float: none;
margin-bottom: 40px;
}

#SC .set4 .txt-last{
font-size: 14px;
line-height: 24px;
width: 100%;
margin-right: 0;
float: none;
margin-bottom: 40px;
}

#SC .set4 .txt img,
#SC .set4 .txt-last img{
max-width: none;
width: 100%;
height: auto;
}

#SC .set4 .txt p.btn,
#SC .set4 .txt-last p.btn{
	text-align: center;
	margin: 20px 0 0 0;
}
}



/* ==============================================
#testing
============================================== */
#SC #testing .h2_bg {
background:url(../images/sc_testing_h2_bg.jpg) center -20%;
height: 300px;
margin-bottom: 20px;
margin: 0 -500%;
padding: 0 500%;
width: 100%;
font-size: 0;
}
#SC #testing h2{ max-width: 1200px; margin: auto;}
#SC #testing h2 img{
float: right;
margin: 100px 0 0 0;
}
#SC #testing .att{
max-width: 1200px;
font-size: 14px;
line-height: 1.4;
color: #808080;
margin: 20px 0;
}
#SC #testing span {
font-size: 12px;
color: #808080;
}

@media (max-width:640px){
#SC #testing .att{
font-size: 80%;
max-width: none;
margin: 10px 0;
}
}



/* ==============================================
modal
============================================== */

#modal-win {
width: 100%;
position: absolute;
}
#modal-win-inner {
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
margin: 0 auto;
position: relative;
z-index: 9999;
border-radius: 0;
}
#modal-win-inner > * {
border-radius: 10px;
}
#modal-bg {
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
z-index: 9998;
cursor: pointer;
}
.pp{
display:none;
width:853px;
position:relative;
background:#FFF;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.pp iframe{
width:853px;
height:480px;
border:none;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
vertical-align:top;
}
.pp .modal-close {
position:absolute;
top:-22px;
right:-22px;
padding:0;
}
.modal-close-sp {
display:none;
}


@media (max-width:640px){
#modal-win {
width: 100%;
position: absolute;
}
#modal-win-inner {
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
margin: 0 auto;
position: relative;
z-index: 9999;
border-radius: 0;
}
#modal-win-inner > * {
border-radius: 10px;
}
#modal-bg {
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
z-index: 9998;
cursor: pointer;
}
.pp{
display:none;
width:300px;
position:relative;
background:#FFF;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.pp iframe{
width:300px;
height:169px;
border:none;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
vertical-align:top;
}
.pp .modal-close-sp {
position:absolute;
bottom:-50px;
right:0;
padding:0;
text-align:center;
width:100%;
}
.pp .modal-close-sp img {
width:30px;
	height:auto;
}
.modal-close {
display:none;
}
.modal-close-sp {
display:block;
}
	
}