@charset "utf-8";
/* CSS Document */
html{
	overflow-y:scroll
}
body{
	line-height:1;
	color:#000;
}
body{
	line-height:1;
	color:#000;
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;
	background:transparent;
}

@media screen and (min-width:768px) {
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;
	background:transparent;
}
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display:block
}
ul{
	list-style:none;
}
blockquote,q{
	quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after{
	content:'';
	content:none;
}
a{
	margin:0;
	padding:0;
	vertical-align:baseline;
	background:transparent;
}
ins{
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
mark{
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del{
text-decoration:line-through;
}
abbr[title],dfn[title]{
border-bottom:1px dotted;
cursor:help;
}
table{
border-collapse:collapse;
border-spacing:0;
}
hr{
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input,select{
vertical-align:middle;
}
select,input,button,textarea{
font:99% arial,helvetica,clean,sans-serif;
}
table{
font-size:inherit;
font:100%;
}
.font_else{
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
.situation_font{
	text-align: center;
	font-size: 20px;
	color: #5c3321;
	margin-bottom: 15px;
	font-weight: bold;
}
#back1 {
	background: url(../img/side_left.png) center;
	background-repeat:repeat-y;
	display: block;
	height: 100%;
	position: fixed;
	right: 90%;
	width: 16%;
	top:0px;
	z-index: 4;
}

#back2 {
	height: 100%;
	width:16%;
	position: fixed;
	left: 90%;
    background:url(../img/side_right.png) center;
	background-repeat:repeat-y;
	display: block;
	top:0px;
	z-index: 5;
}

#wrapper{
	width: 100%;
	background: url(../img/back.jpg) repeat;
	z-index: 1;
	font-family:"HalisR-Regular","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,メイリオ,sans-serif;
	overflow: hidden;
}
#title {
    position:relative;
    overflow:hidden;
    width:100%;
}

#title img {
    position:absolute;
    left:50%;
    width:2000px;
    margin-left:-1000px;
}


#catch{
	background: url(../img/title_01.png) no-repeat center;
	text-align: center;
	font-weight: bold;
	color: #cf251c;
	font-size: 43px;
	overflow: hidden;
	margin: 145px 0 0 0;
	line-height: 130%;
	height: 290px;
}
#catch p{
	padding: 40px 0;
	margin: 0 0 0 0;
}
#main_img{
	width: 100%;
	text-align: center;
	padding: 40px 0 ;
}


#use{
	width: 1100px;
	margin: 90px auto 70px;
	overflow: hidden;
}
#use_title,#situation_title,#other_function_title{
	text-align: center;
}
#use_title img,#situation_title img,#other_function_title img{
	margin: 0 auto;
	text-align: center;
}


#movie_bg{
	width: 100%;
	height: 400px;
	margin: 30px 0 70px;
	position: relative;
	text-shadow: 0 0 5px #fff;
}

#gencyo{
	font-weight: normal;
	font-size: 16px;
	padding-top: 15px;
	line-height: 160%;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
	border: 1px solid #5c3321;
	padding: 10px;
	margin-top: 20px;
	
}
.movie{
	width:95%;
	margin:1% auto;
}
#new_cate{
	margin: 90px 0 20px;
	overflow: hidden;
	display: block;
}
#new_cate_title{
	text-align: center;
	margin-bottom: 20px;
}
#new_cate_img{
	margin: 0 auto;
	width: 1100px;
	overflow: hidden;
}
#new_cate_img li{
	float: left;
	width: calc((100% - 6px) / 4);
}
#new_cate_img li:not(:first-child){
	margin-left: 2px;
}
#cp{
	width: 690px;
	margin: 40px auto 0;
}

@media screen and (max-width: 736px) {
div.topbottomp{
	font-size:120%;
}
}
.vide_pc{
	height: 400px;
	z-index: 0;
}
@media screen and (max-width: 1100px) {
#back1,#back2{
	display: none;
}
}
@media screen and (max-width: 736px) {
.vide_pc{
	display:none;
}
}

div.vide_sp{
	display:block;
	margin-top:10%;

}
.vide_sp iframe {
}
}
.cover{
	background-size: cover;
	background: url(img/cover.png) repeat;
	min-height: 100%;
	z-index: 2;
}
body > div.cover {
  height: auto;
}
@media screen and (max-width: 736px) {
.cover{
	background:none;
}
}
#movie_txt_main{
	position: absolute;
	top: 90px;
	z-index: 7;
	width: 100%;
	color: #3c201a;
}
#movie_txt{
	margin: 0 auto;
	padding: 0 0 60px;
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	line-height: 150%;

}
#movie_txt_sub{
	margin: 30px auto;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	line-height: 150%;
	color: #5c3321;
	line-height: 180%;
}

.step{
	margin: 10px 15px 0;
	overflow: hidden;
}
.step_img{
	float: left;
	width: 266px;
}
#step_title_01{
	background:  url(../img/step_01.png) no-repeat left;
	color: #007348;
	font-weight: bold;
	font-size: 22px;
	padding: 30px 0 0 70px;
	height: 50px;
}
#step_title_02{
	background:  url(../img/step_02.png) no-repeat left;
	color: #007348;
	font-weight: bold;
	font-size: 22px;
	padding: 30px 0 0 70px;
	height: 50px;
}
#step_title_03{
	background:  url(../img/step_03.png) no-repeat left;
	color: #007348;
	font-weight: bold;
	font-size: 22px;
	padding: 30px 0 0 70px;
	height: 50px;
}
#step_title_04{
	background:  url(../img/step_04.png) no-repeat left;
	color: #007348;
	font-weight: bold;
	font-size: 22px;
	padding: 30px 0 0 70px;
	height: 50px;
}
.step_detail{
	background-color: rgba(187,159,122,0.5);
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
	padding: 30px;
	font-size: 16px;
	color: #5c3321;
	float: right;
	height: 235px;
 	position: relative;
	display: inline-block;
	width: 500px;
}
.step_detail img{
	width: 308px;
}
.step_detail p{
	float: right;
	width: 180px;
	line-height: 180%;
}
.step_detail:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
 	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #d9cab7;
}
.step_detail img{
	opacity: 1;
}
#situation,#other_function{
	width: 1100px;
	margin: 0 auto;
	overflow: hidden;
}
#situation_title{
	margin: 10px 0 20px;
}

.situation_img01,.registration_img01{
	float: left;
	width: 50%;
}
.situation_img02,.registration_img02{
	float: right;
	width: 49%;
}
.situation_img02 span{
	font-size: 13px;
	color: #5c3321;
}
.situation_img03{
	float: left;
	width: 32%;
	margin-left: 1%;
}
.situation_in{
	margin: 50px 0;
	overflow: hidden;
}

#situation p{
	padding: 30px 0;
	color: #5c3321;
	font-size: 18px;
	line-height: 180%;
}
#item_in{
	margin: 10px 0 0;
	overflow: hidden;
}
#yuryou{
	color: #21465c;
	width: 1100px;
	margin: 30px auto 60px;
	background-color: rgba(255,255,255,1);  
}
#yuryou span{
	font-weight: bold;
	font-size: 25px;
	margin: 15px auto;
	text-align: center;
}
#yuryou_in{
	padding: 25px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 140%;
	overflow: hidden;
}
#yuryou_in p{
	padding: 10px 0 15px;
}
.yuryou_title{
	font-weight: bold;
	font-size: 21px;
	padding: 10px 0 8px;
}
#yuryou_left{
	float: left;
}
#yuryou_right{
	float: left;
	margin-top: 10px;
}
.yuryou_btn{
	float: left;
	border-radius: 8px;        /* CSS3草案 */  
    -webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 8px;   /* Firefox用 */
	border: 1px solid #21465c;
	padding: 10px 20px;
	margin: 20px 15px 0 0;
}
.yuryou_btn:hover{
	background: #21465c;
	color: #fff;
}
.yuryou_btn{
	text-decoration: none;
	color: #21465c;
}
.yuryou_btn a:hover{
	background: #21465c;
	color: #fff;
}

.dl_btn{
	border-radius: 8px;        /* CSS3草案 */  
    -webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 8px;   /* Firefox用 */
	border: 1px solid #00854b;
	padding: 15px 20px;
	margin: 30px 15px 0 0;
	width: 250px;
	font-size: 20px;
	background:  url(../img/dl.png) no-repeat 40px center;
}
.dl_btn p{
	padding-left: 30px;
}
.dl_btn:hover{
	color: #fff;
	background:  url(../img/dl_hover.png) no-repeat 40px center #00854b;
}
.dl_btn{
	text-decoration: none;
	color: #00854b;
}
.dl_btn a:hover{
	color: #fff;
	background:  url(../img/dl_hover.png) no-repeat 35px center #00854b;
}
.btn_some{
	border-radius: 8px;        /* CSS3草案 */  
    -webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 8px;   /* Firefox用 */
	border: 1px solid #5c3321;
	width: 250px;
	padding: 15px 0;
	margin: 0 auto;
	text-align: center;
}
a .btn_some{
	color: #5c3321;
}
a .btn_some:hover{
	background-color: #5c3321;
	color: #fff;
}
#registration_title{
	float: left;
	width: 265px;
}
#registration_txt{
	float: right;
	width: 820px;
}
#other_function{
	margin: 60px auto;
}
.other_function_in{
	margin: 20px 0 25px;
	overflow: hidden;
}
.other_function_in2{
	margin: 20px 0 0;
	overflow: hidden;
}
.other_function_in p{
	padding: 10px 0 0;
	color: #5c3321;
}
#registration_txt{
	margin: 20px auto;
	font-weight: bold;
	font-size: 20px;
	line-height: 150%;
	color: #5c3321;
	line-height: 160%;
	text-align: left;
}

#download{
	width: 100%;
	background-color: rgba(134,94,39,0.7);  
	overflow: hidden;
}
#download_in{
	width: 860px;
	margin: 0 auto;
}
#download p{
	float: left;
}
#dl{
	padding-left:50px;
}
#footer{
	background: #6e4b22;
	width: 100%;
	color: #fff;
	overflow: hidden;
}
#footer_in{
	margin: 15px auto;
	width: 1100px;	
}
#footer ul#footer_left{
	text-align: left;
	font-size: 18px;
	overflow: hidden;
	margin-bottom: 10px;
}
#footer ul#footer_left li{
	float: left;
	margin-right: 15px;
	font-size: 14px;
	padding: 0 0 10px;
}
#footer ul#footer_left li.cust{
	background:#007348;
	padding:1%;
	font-size:75%;
	float:right;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */  
}
#footer ul#footer_right{
	float: right;
}
#footer ul#footer_right li{
	padding: 0 5px;
	float: left;
}
#footer_in a{
	text-decoration: none;
	color: #fff;
}
#copy,#copy a{
	color:#b68c5b;
	font-size:14px;
	text-align:center;
	text-decoration: none;
}


@media only screen and (max-width: 640px){
#main_img img,#yuryou,#download_in,#footer_in,.step,#catch p,.registration_img03{
	width: 98%;
}


#pc{
	display: none;	
}
#catch{
	background: none;
	height: auto;
}
#item_in{
	margin: 0;
}
#catch p{
	padding: 0 0 ;
}
#use{
	margin: 30px auto 30px;
}
#step_title_01{
	font-size: 18px;
}
#step_title_02{
	font-size: 19px;
}
#step_title_03{
	font-size: 19px;
}
#step_title_04{
	font-size: 19px;
}
#catch{
	width: 100%;
	font-size: 25px;
}
	#new_cate_title img{
		width: 50%;
	}
#new_cate,#new_cate_img{
	width: 100%;
}
	#new_cate_img{

	}
#new_cate_img li{
	width: 43%;
	margin-left: 5% !important;
}
#new_cate_img li img{
	width: 100%;
}
#other_function{
	margin: 20px auto;
}
	.video-container01 {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.video-container01 iframe,  
.video-container01 object,  
.video-container01 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-container02 {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.video-container02 iframe,  
.video-container02 object,  
.video-container02 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#movie_txt_sub{
	font-size: 18px;
	line-height: 140%;
	width: 98%;
}
#main_img{
		padding: 20px 0;
}
	#movie_bg{
		display: none;
	}
#main_img{
		padding: 20px 0;
}
	.yuryou_title{
		font-size: 19px;
		padding-top: 20px;
	}
	#yuryou_in{
		padding: 10px;
		font-size: 16px;
	}
		#yuryou_in p img{
		width: 80%;
	}
	#yuryou_in img{
		width: 100%;
	}
	#situation_title img,#other_function_title img{
		width: 80%;
	}
	#other_function_title img{
		width: 80%;
	}
	.step{
		margin: 0 auto 10px;
	}
	.step_detail{
		padding: 0;
		height: auto;
		width: 96%;
	}
	.step_detail img{
		width: 96%;
		margin: 1% auto;
		padding: 2%;
	}
	.step_detail p{
		width: 98%;
		padding: 1%;
		line-height: 140%;
	}
.situation_in{
	margin: 15px 0;
	overflow: hidden;
}
	#registration_title{
	float: left;
	width: 50%;
}
	#registration_title img{
	width: 100%;
}
	.other_function_in{
		margin-top: 10px;
	}
	#use,#download,#download_in p,#footer,#footer_left,#use_title,#situation,.step_img,.step_img img,#other_function_title,#other_function,#other_function_in,.registration_img01 img,.other_function_in{
		width: 100%;
	}
	.other_function_in{
	margin-left: 1%;
	}
	
	#use_title img{
		width: 80%;
	}
	#download_in p{
		padding: 0;
		text-align: center;
	}
	#download_in p img{
		width: 90%;
	}

	#ipad,#registration_txt,.registration_img01{
		width: 98%;
	}
	#registration_txt{
		font-size: 17px;
	}
	#download_in p#dl{
		width: 100%;
		margin: 0 auto;
	}
	#download_in p#dl img{
		width: 90%;
		margin: 0 auto;
	}
	.step_img{
		width: 100%;
	}
	.step_img img{
		width: 100%;
	}
	#yuryou_right{
	width: 100%;
	float: left;
}
	.situation_img01{
	margin-left: 1%;
	width: 98%;
	float: none;
	}
	.situation_img01 img,.situation_img02 img,.registration_img02 img{
	width: 100%;
	float: none;
	}

	.situation_img02,.registration_img02{
	width: 98%;
	float: none;
	margin: 4% 0 0 1%;
}
	.registration_img03{
		width: 98%;
		font-weight: bold;
		font-size: 20px;
		line-height: 150%;
		color: #5c3321;
		line-height: 160%;
		text-align: left;
	}
	.other_function_in{
		margin-bottom: 0;
	}
#yuryou span{
	line-height: 130%;
}
.situation_in p{
	width: 70%;
	padding: 0;
}
.situation_in p img{
	width: 100%;
}
	.yuryou_btn{
	margin: 10px 15px 0 0;
	}
#footer ul#footer_left li.cust{
	float:left;
	padding:2%;
	margin:3% 1%;
}
}

#movie{
	background: url(../img/movie.png) no-repeat 10px center;
	color: #222222;
	border: 1px solid #222222;
	padding: 12px 0 12px 50px;
	width: 110px;
	font-size: 18px;
	font-weight: normal !important;
	line-height: 100% !important;
	margin: 10px auto;
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
}
#movie:hover{
	background: url(../img/movie_hover.png) no-repeat 10px center ;
	background-color: #222222;
	color: #dac9aa;
	border: 1px solid #222222;
	padding: 12px 0 12px 50px;
	width: 110px;
	font-size: 18px;
	font-weight: normal !important;
	line-height: 100% !important;
	margin: 10px auto;
}
#movie a{
	text-decoration: none;
	color: #222222;
}
#movie a:hover{
	text-decoration: none;
	color: #dac9aa;
}


@media screen and (min-width: 641px) {
#sp{
	display: none;	
}
	#ipad{
		width: 60%;
	}
	#download_in p#dl{
		width: 40%;
		padding: 0;
	}
		.step_img{
		width: 46%;
	}
	.step_img img{
		width: 100%;
	}
	.step_detail{
		padding: 0;
		height: auto;
		width: 54%;
	}
	.step_detail img{
		width: 51%;
		margin: 0 auto;
		padding: 2%;
	}
	.step_detail p{
		width: 41%;
		padding: 2%;
	}
	.registration_img03{
		width: 50%;
		font-weight: bold;
		font-size: 20px;
		line-height: 150%;
		color: #5c3321;
		line-height: 160%;
		text-align: left;
		float: right;
		margin: 60px 0 0 0;
}
}

@media screen and (min-width: 641px) and (max-width: 1099px) { 
		#download,#download_in,#download_in p img,#footer,#footer_in,#situation,#other_function,#other_function{
		width: 100%;
	}
		.registration_img01,.registration_img02{
		width: 50%;
	}
	.registration_img01 img,.registration_img02 img{
		width: 100%;
	}
	#registration_title{
		width: 30%;
		float: left;
	}
	#registration_txt{
		width: 65%;
		float: right;		
	}
	.registration_img03{
		width: 48%;
		font-weight: bold;
		font-size: 20px;
		line-height: 150%;
		color: #5c3321;
		line-height: 160%;
		text-align: left;
		margin: 30px 0 0 0;
	}
	.situation_img01 img,.situation_img02 img,.registration_img02 img{
	width: 100%;
	float: none;
}
#situation p{
	padding: 15px 0;

}
.situation_in,.other_function_in{
	margin: 20px 1% 55px;
	overflow: hidden;
	width: 98%;
}
.step{
	width: 98%;
	margin: 0 1% ;
}
#yuryou_in img{
		width: 50%;
}
	#new_cate_title img{
		width: 60%;
	}
	#new_cate,#new_cate_img{
	width: 100%;
	}
	#new_cate_img{

	}
#new_cate_img li{
	width: 24%;
	margin-left: 1% !important;
}
#new_cate_img li img{
	width: 100%;
}
}

@media screen and (min-width: 641px) and (max-width: 768px) {
.video-container02 {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.video-container02 iframe,  
.video-container02 object,  
.video-container02 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

}


@media screen and (max-width: 1099px) {
	#main_img img,#use,#download,#download_in,#download_in p img,#footer,#footer_in,#situation{
		width: 100%;
	}

	#main_img{
		width: 98%;
		margin: 0 auto;
		padding: 30px 0;
	}
	#yuryou{
		width: 98%;
		margin: 30px auto;
	}


	.step{
		margin: 0 auto 10px;
	}


}