@charset "utf-8";
*{
	border: 0;
	 font-family: 'Roboto',Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
	font-size: 16px;
color: #232323;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	box-sizing:border-box;
}
a{
	text-decoration: none;
	color: #ffffff;
	text-decoration: underline;
	transition:color .2s ease-out;
}
a:hover{
	color: #ce2026;
}
.br:before {
	content: "\A" ;
	white-space: pre ;
}
.left{
	float: left;

}
html{
		width: 100%;
height: 100%;

}
body{
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;	width: 100%;
height: 100%;
background-image: url(img/bg.jpg);

}
img{
	vertical-align: top;
	max-width: 804px;
}

.s20{
	font-size: 20px;
}
.s32{
	font-size: 32px;
}

.underline{
	text-decoration: underline;
}
.bold{
		font-weight: bold;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;


}
.bg_ylw{

	padding: 0 16px;
	background-color: #ffff00; 
}
.bg_red{
	display: inline-block;
	padding: 8px 32px;
	background-color: #ff0000; 
}
.ylw{
	color: #ffff00;
}
.red{
	color: #ff0000;
}
.wit{
	color: #ffffff;
}
.blu{
	color: #0096ff;
}

.mt56{
	margin-top: 56px;
}


.lost{
	margin-top: 32px; 
	background: #000;
	padding: 16px 24px;
	display: inline-block;
	color: #ffffff;
}
.cau{
	font-size: 12px;
	line-height: 100%;
}
table tr td:nth-child(odd){
	min-width: 160px;
	font-size: 12px;
	vertical-align: middle;
	text-align: center;
}
table tr td{
	
	padding: 16px;
	border: 1px solid #ccc;
}
table tr td li{
	list-style: none;
}
header{
	width: 100%;
	
	text-align: center;
background-color: #fff200;
background-image: url(img/header_bg.jpg);
position: relative;
z-index: 9;
	box-shadow: 2px 0px 4px 2px rgba(0,0,0,0.5);


}
header h1{
vertical-align: top;

color: #eeeeee;
font-size: 12px;
font-weight: normal;
letter-spacing: .1em;



}
header p{
	display: inline-block;
	color: #ffffff;
}
header h1 img{vertical-align: top;
max-width: 100%;
}

.header_inner{

	max-width: 1100px;
	margin: 0 auto;
	

}


div.contents_bg{
	width: 100%;
	max-width: 900px;
	
	background: #fefefe;
	margin: 0 auto;
	box-shadow:0px 0px 20px 3px #aaaaaa;
-moz-box-shadow:0px 0px 20px 3px #aaaaaa;
-webkit-box-shadow:0px 0px 20px 3px #aaaaaa;
}

div.main_visual_01{
position: relative;
z-index: 5;
width: 100%;

text-align: center;
background-color: #000000;
background-size: cover;
background-image: url(img/mv_bg.jpg);
}
div.main_visual_05{
position: relative;
color: #fafafa;
z-index: 5;
padding: 40px 0;
width: 100%;
text-align: center;
background-color: #f10d0d;
background-image: url(img/youtube_bg.jpg);
border-top:2px solid #bf2424;
border-bottom:2px solid #bf2424;

box-shadow:0px 0px 20px 3px #000;
-moz-box-shadow:0px 0px 20px 3px #000;
-webkit-box-shadow:0px 0px 20px 3px #000;
}
div.main_visual_05 div{
	margin-bottom: 24px;
}
.product_area{
	width:804px;
	margin: 0 auto;
	position: relative;
	z-index: 999;
}
.product_bg{
	width: 200px;
	height: 100%;
	background-image: url(img/product_bg.png);
	position: absolute;
	top: 0;
}
.product_bg_02{
	width: 200px;
	height: 100%;
	background-image: url(img/product_bg_02.png);
	position: absolute;
	right: 0;
	top: 0;
}
.header_img{
	width: 100%;
	max-width: 1100px;
}

section.contents{
padding:32px 0;
width: 100%;
margin: 0 auto;
}
.text_area{
	padding: 0 48px;
}
.text_area p{
	letter-spacing: .1em;
	line-height: 180%;
	margin-bottom: 16px; 
}
.bled_div{
	overflow: hidden;
	margin-bottom: 32px;
}
.text_area p.bled_p{
	display: inline-block;
max-width: 620px;
	vertical-align: middle;
}

section.contents.law_contents{
	padding: 0 0 5% 0;
}

h2{
background-image: url(img/youtube_bg.jpg);
	padding: 40px 80px;
	text-align: center;
	letter-spacing: 0em;
font-size:32px;
margin: 32px 0;
color: #fafafa;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
text-shadow: 0px 0px 6px #ffffff; 
}
h2.img{
	background-color: #ffffff;
	background-image: none;
}
.law_h2{
			font-size: 24px;
			color: rgb(155, 0, 0);
			border: 1px solid #ccc;
			border-top: 4px solid rgb(155, 0, 0);
			
			text-align: left;
			margin: 0 0 3% 0;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
		}

.form_area{
	margin:40px 0;
	text-align: center;
	border:1px solid #ccc;
	padding-bottom: 40px;
background-color:#fffcef;
}
.h2_span{
	    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
color: #aa0000; 
    font-size:32px;

}
.arrow{
	max-width: 320px;
}

img.width100{
	width: 100%;
}
.qa{
	padding: 32px;
	border:4px solid #880000;
	background:url(img/qa_bg.jpg);
	margin-bottom: 32px;
}
.n_bled_area{
padding: 32px;
	border:8px solid #094eac;
	margin-bottom: 32px;
	background-image: url(img/n_bled_bg.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
}
.p_bled_area{
padding: 32px;
	border:8px solid #880000;
	margin-bottom: 32px;

	background-repeat: no-repeat;
	background-position: right bottom;
}

.m_bled_area{
padding: 32px;
	border:8px solid #880000;
	margin-bottom: 32px;

	background-repeat: no-repeat;
	background-position: right bottom;
}

.n_bled_area p img,.p_bled_area p img,.m_bled_area p img{
	vertical-align: middle;
	margin-right: 16px;
}
.n_bled_area p span,.p_bled_area p span,.m_bled_area p img{
	vertical-align: middle;
}

.voice_area{
padding: 32px;
	border:4px solid #880000;
	background:url(img/voice_bg.jpg);
	margin-bottom: 32px;

}
.voice_area h3{

	vertical-align: top;
	width: calc(100% - 150px);
	display: inline-block;
}
img.chk_img{
	width: 50px;
}
img.in_img{
	display: inline-block;
	margin-bottom: 24px;
	width:80%;
	max-width: 600px;
}
img.in_img_02{
	display: inline-block;
	margin-bottom: 24px;
	width:80%;
	max-width: 300px;
}
img.in_img_03{
	display: inline-block;
	margin-bottom: 24px;
	width:100%;

}
img.voice_img{
	display: inline-block;
	margin-right: 24px;
	vertical-align: top;
}

.btn_area{
	display: inline-block;
	max-width: 320px;
}
img.btn{
	max-width:320px; 
}
img.btn:hover{
	opacity: .6
}

footer{

	width: 100%;
padding: 8px;
	background: #000000;
	color: #fafafa;
	text-align: center;
	font-size: 14px;
	line-height: 56px;

}
footer p{
	color: #ffffff;
	font-size: 12px;
	padding: 8px;
	line-height: 130%;
}


.box_01{
padding: 32px;
border: 4px solid #000;
margin: 48px 0 48px 0;
text-align: left;
}
.mail_form{
	width:80%;
	max-width: 500px;
	margin: 40px auto;
}
.form_content{
	margin-bottom: 24px;

}
label{
	display: block;

}
input, button, select, textarea {
    -webkit-appearance: none;}
.form_text_area{
	border:1px solid #ccc;
	display: block;
	width: 100%;
	font-size: 16px;
	padding: 8px 10px;
margin-bottom: 8px;
	border-radius: 4px;

	 transition: border .4s ease-out;
}

input:focus,textarea:focus {
border:1px solid #f00;
}

textarea{

	height: 160px;
}
.form_tel{
	font-size: 13px;
}
.error_msg{
	font-size: 13px;
	color: #e00;
}

.submit_btn{
    width: 100%;
	max-width: 300px;
	height: 72px;
	border-radius: 4px;
	color: #fefefe;
	opacity: 1;
background-color: #ffffff;
	 background-image: url("img/send_btn.jpg");
	 background-repeat: no-repeat;
	 background-size: 100%;
 transition: all .2s ease-out;

 cursor: pointer;
}
.submit_btn:hover{
	opacity: .6;
}

input[type="submit"][disabled]{ 
	color: #aaa;
background-position: 0 0;
	cursor: default;
}
input[type="submit"][disabled]:hover{
	opacity: 1;
}
	@media screen and (max-width: 1360px){

img.header_img{
	width:90%;
}
	}


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


img{
	width: 100%;
}

header h1 img{
	width: 90%;
}

	}

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

		h2{
			font-size: 16px;
			padding: 16px;
			line-height: 120%;
			text-align: center;
		}

		span.h2_span{
			font-size: 16px;
		}
h2 img{
	display: none;
}
h2 img.product_h2_img{
	display: inline-block;
}
img.chk_img{
	width: 30px;
}
div.main_visual_05{
	padding: 3% 0;

}
div.contents_bg{
	width: 94%;
	-webkit-box-shadow: 0px 0px 14px 1px #aaaaaa;
}
.product_area{
	width: 94%;
}
section.contents{
	width: 94%;
	margin: 0 auto;

}
.text_area{
	width: 94%;
	padding:3%; 
	margin: 0 auto;
	}

footer{
	font-size: 8px;
}
footer a{
	font-size: 10px;
	color: #efefef;
	text-decoration: underline;
}
header{
	padding: 4px 0 2px 0;
}
header h1{
	font-size: 8px;
}
header p{
	font-size: 10px;
}
section.contents{
	
}
#countOutput span{
	font-size: 10px;
}
#countOutput span.time{
	font-size: 14px;
}

p.bled_p{
	width: 80%;
}
p.chk_area{
	width: 40px;
}
}
@media screen and (max-width: 768px){
.product_bg{
	background-size: 60%;
	background-repeat: repeat-y;
	
}
.product_bg_02{
	background-size: 60%;
	background-repeat: repeat-y;
	background-position: right;
}
table tr td:nth-child(odd){
	min-width: 120px;
	font-size: 10px;
	vertical-align: middle;
	text-align: center;
}table tr td:nth-child(even){
	
	font-size: 10px;

}
table tr td ul li{
	font-size: 10px;
}

.text_area p{
	font-size: 12px;
}

}

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

.youtube2 {
  position: relative;
  width: 100%;

  padding-top: 56.25%;

}
.youtube2 iframe {
  position: absolute;

  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
}
	@media screen and (max-width: 376px){
*{
	font-size: 12px;
}


.s20{
	font-size: 16px;
}
.s32{
	font-size: 20px;
}

.m_bled_area{
	padding: 16px;
}
.bled_div{
	margin-bottom: 0px;
}
p.bled_p span{
	font-size: 14px;
}
.form_area{
	padding: 16px;
}
.box_01{
	margin: 24px 0;
	}
}