@charset "UTF-8";
/* CSS Document */
@media screen and (max-width: 1150px) {
	#spa #key_vis { top:-60px; }
	#spa #c_nav { margin-top:150px; width:90%;}
	#spa #c_nav li { font-size:16px;margin-right:1%; width:19%;} 
	#spa #c_nav li span { display: inline;}
	#spa section { width:96%;}
	#spa section .note { margin-bottom:10px; padding:8px 0; width:70%; width:calc(96% - 230px); width:-webkit-calc(96% - 230px); }
	#spa section .note p { float:none; padding:6px 10px 10px;}
	#spa section:not(#sec3):not(#sec4) figure.item02 { float:none; margin-top:-50px; width:100%; }
	#spa section:not(#sec3):not(#sec4) figure.item02 figcaption{ float:left; margin:0 0 -200px 60px; }
	
	#spa #sec1 .sub_box .txt {margin:45px 0 0 3%; width:330px;}
	#spa #sec1 figure.item02 + p { float:none; width:100%; box-sizing: border-box;}
	
	#spa #sec2 .sub_box span { float:right; width:58%;}
	#spa #sec2 .sub_box span img { float:left; margin-left:2px; width:calc(50% - 2px); }
	#spa #sec2 .sub_box img.txt { margin:50px 2% 0 2%; width:38%; }	
	#spa #sec2 figure.item02::after { content:none; }
	
	#spa #sec3 figure.item01 figcaption { margin:45px 5% 40px 0; width:21%;}
	#spa #sec3 figure.item01 figcaption + img { width:70%;}
	#spa #sec3 figure.item01 span { width:29%;}
	#spa #sec3 figure.item02 figcaption { float:left; margin:45px 0 40px 5%; width:21%;}
	#spa #sec3 figure.item02 figcaption + img { float:right; width:70%; }
	#spa #sec3 figure.item02 span { float:left; width:29%;}
	
	#spa #sec4 figure.item01 { width:50%; }
	#spa #sec4 figure.item02 { width:50%; }
	#spa #sec4 figure figcaption + img { margin: 0 2%; width:96%; }
	
	#spa #sec5 figure figcaption { margin-top:60px; height:210px; width:30%; }
	#spa #sec5 figure figcaption + img { margin:50px 0 30px; width:70%; }
	#spa #sec5 figure + dl { width:29%;  }
	
	#spa #sec6 h3 { padding:30px 0 0 7%; }
	#spa #sec6 dl { width:65%; }
    /* 170710 mori */
    #spa #sec6 dt.effict { height: 100px;}
}
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
	#spa #key_vis { top:0; }
	#spa h3 { float:none; padding-top:45px; margin:0 auto;}
	#spa #c_nav { margin-top:80px; }
	#spa section .note { float:none; margin:10px auto; width:80%; }
	#spa section .note p { text-align: center;}
	#spa section .note dl { margin:auto 15%; }
	#spa section figure.item01 { margin-top:0;}
	
	#spa section:not(#sec3):not(#sec4) figure.item02 { float:none; margin-top:-50px; width:100%;}
	
	#spa #sec1 h3 { padding-top:25px;}
	#spa #sec1 .sub_box .txt { float:left; margin:45px 0 0 3%; width:45%;}
	#spa #sec1 .sub_box img:not(.txt) { float:right; margin:10px 0 ; width:45%;}
	
	#spa #sec3 figure.item01 figcaption { float:none; width:239px; margin:10px auto ;}
	#spa #sec3 figure.item01 figcaption + img { float:none; width:100%;}
	#spa #sec3 figure.item01 span { float:none; display: block; width:100%; }
	#spa #sec3 figure.item01 span img:nth-child(1) { float:left; width:55%; }
	#spa #sec3 figure.item01 span img:nth-child(2) { float:left; width:45%; }
	#spa #sec3 figure.item02 figcaption { float:none; width:232px; margin:10px auto ;}
	#spa #sec3 figure.item02 figcaption + img { float:none; width:100%;}
	#spa #sec3 figure.item02 span { float:none; display: block; width:100%; }
	#spa #sec3 figure.item02 span img:nth-child(1) { float:left; width:55%; }
	#spa #sec3 figure.item02 span img:nth-child(2) { float:left; width:45%; }
	
	#spa #sec4_wap { background: none;}
	#spa #sec4 h3 { margin-bottom:0;}
	#spa #sec4 figure.item01 { background:url(../../spa/img/4_bg.jpg) no-repeat left 0; width:100%; margin-bottom:30px; }
	#spa #sec4 figure.item02 { background:url(../../spa/img/4_bg.jpg) no-repeat right 0; width:100%; }
	#spa #sec4 figure figcaption + img { margin: 0 10%; width:80%; }
	
	#spa #sec5_wap { background: none;} 
	#spa section#sec5 { width:100%;}
	#spa #sec5 figure { display: inline-block; background:url(../../spa/img/5_bg.jpg) no-repeat; padding:10px 2%; width:100%; box-sizing: border-box; }
	#spa #sec5 figure figcaption { margin-top:0; height:auto; width:100%; }
	#spa #sec5 figure figcaption + img { margin:20px 5% ; width:90%; }
	#spa #sec5 figure + dl { float:none; margin:20px auto; width:90%; }
	#spa #sec5 figure + dl dd { padding:5px 0;}	
	
 #spa #sec6 h3 { padding: 30px 0 2%; height: inherit;}
	#spa #sec6 dl { float:none; margin:auto; height:auto; width:90%; }
}
@media screen and (max-width: 640px) {
	#spa section .note dl { margin:auto 10%; }
	#spa section:not(#sec3):not(#sec4) figure.item01 figcaption{ margin:0 20px -150px 0; width:35px; }
	#spa section:not(#sec3):not(#sec4) figure.item02 figcaption{ margin:0 0 -160px 20px;width:35px; }
	#spa #sec1 .sub_box { margin-bottom:30px; text-align: center;}
	#spa #sec1 .sub_box .txt { float:none; margin:10px auto;  width:330px;}
	#spa #sec1 .sub_box img:not(.txt) { float:none; margin:auto; width:340px;}
	#spa #sec2 .sub_box { text-align: center; }
	#spa #sec2 .sub_box span { float:none; width:90%;}
	#spa #sec2 .sub_box span img { float:left; margin-left:2px; width:calc(50% - 2px); }
	#spa #sec2 .sub_box img.txt { margin:20px auto 0 auto; width:80%; }
	#spa #sec6 dt { float:none; background:#222; border-top:1px solid #666; padding:2px 10px; width:100%; box-sizing: border-box; }
	#spa #sec6 dd { padding-left:0; border-top:0; width:100%;}
    /* 170710 mori */
    #spa #sec6 dt.effict { height: inherit;}
}
@media screen and (max-width: 480px) {
	#spa #c_nav { margin-top:50px; }
	#spa #lead span.wbr { display: block;}
	#spa section .note { float:none; margin:10px auto; width:90%; }
	#spa section .note p { text-align:left;}
	#spa section .note dl { margin:auto 0; }
	#spa section .note dt { margin:auto 2% auto 0; }
	#spa section .note dd .wbr { display: block;}
	#spa #sec4 figure figcaption + img { margin: 0 2%; width:96%; }
	#spa #sec5 figure figcaption + img { margin:20px 0 ; width:100%; }
}