@charset "utf-8";
/* CSS Document */

h1,h2,h3,h4{
	margin: 0;
	padding: 0;
}
#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
body{
	color: #333;
	background-color: #F0FEFF;
	line-height: 1.4em;
}

p{
	margin:0;
	padding: 0;
}
img{
	border: none;}

	header{
	max-width: 960px;
	margin: 0 auto;
	color: #1F4E79;
	border-bottom: 5px solid #1175d0;
	font-size: 2.2em;

	}
a:link,a:visited{color:#1F4E79;
text-decoration: none;}
a:hover{background-color: #D2E9FF;}

header{
	background-color: #fff;
}

header p{
	padding-top: 50px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 20px;
	text-align: center;
	line-height: 1em;
	
}
	footer{
	background: #5b9bd5;
	max-width: 960px;
	margin: 0 auto;
		font-size: 0.9em;
}

footer p{
	color: #fff;
	padding: 10px;
	text-align: center;
	
	
}
	
	.btn {
		width: 400px;
  background: #52b1f0;
  background-image: -webkit-linear-gradient(top, #52b1f0, #3694cf);
  background-image: -moz-linear-gradient(top, #52b1f0, #3694cf);
  background-image: -ms-linear-gradient(top, #52b1f0, #3694cf);
  background-image: -o-linear-gradient(top, #52b1f0, #3694cf);
  background-image: linear-gradient(to bottom, #52b1f0, #3694cf);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  -webkit-box-shadow: 0px 1px 3px #999999;
  -moz-box-shadow: 0px 1px 3px #999999;
  box-shadow: 0px 1px 3px #999999;
  font-family: Arial;
  color: #ffffff;
  font-size: 1.8em;
  padding: 20px;
  text-decoration: none;
	margin: 20px auto;
}

.btn:hover {
  background: #b5e3ff;
  background-image: -webkit-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: -moz-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: -ms-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: -o-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: linear-gradient(to bottom, #b5e3ff, #83c6f2);
  text-decoration: none;
}

.btn_calc {
		width: 80%;
	text-align: center;
  background: #52b1f0;
  background-image: -webkit-linear-gradient(top, #52b1f0, #3694cf);
  background-image: -moz-linear-gradient(top, #52b1f0, #3694cf);
  background-image: -ms-linear-gradient(top, #52b1f0, #3694cf);
  background-image: -o-linear-gradient(top, #52b1f0, #3694cf);
  background-image: linear-gradient(to bottom, #52b1f0, #3694cf);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  -webkit-box-shadow: 0px 1px 3px #999999;
  -moz-box-shadow: 0px 1px 3px #999999;
  box-shadow: 0px 1px 3px #999999;
  font-family: Arial;
  color: #ffffff;
  font-size: 1.8em;
  padding: 20px;
  text-decoration: none;
	margin: 20px auto;
}

.btn_calc:hover {
  background: #b5e3ff;
  background-image: -webkit-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: -moz-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: -ms-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: -o-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: linear-gradient(to bottom, #b5e3ff, #83c6f2);
  text-decoration: none;
}

.btn_o {
		width: 400px;
  background: #f0b352;
  background-image: -webkit-linear-gradient(top, #f0b352, #e3873d);
  background-image: -moz-linear-gradient(top, #f0b352, #e3873d);
  background-image: -ms-linear-gradient(top, #f0b352, #e3873d);
  background-image: -o-linear-gradient(top, #f0b352, #e3873d);
  background-image: linear-gradient(to bottom, #f0b352, #e3873d);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  -webkit-box-shadow: 0px 1px 3px #999999;
  -moz-box-shadow: 0px 1px 3px #999999;
  box-shadow: 0px 1px 3px #999999;
  font-family: Arial;
   color: #ffffff;
  font-size: 1.8em;
  padding: 20px;
  text-decoration: none;
	margin: 20px auto;
}

.btn_o:hover {
  background: #b5e3ff;
  background-image: -webkit-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: -moz-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: -ms-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: -o-linear-gradient(top, #b5e3ff, #83c6f2);
  background-image: linear-gradient(to bottom, #b5e3ff, #83c6f2);
  text-decoration: none;
}


.vtcl{
	-webkit-writing-mode: vertical-tb;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-tb;
}

/*白*/
a.white:link {
	text-decoration:none;
	color:#fff;
	}
 a.white:visited {
	text-decoration:none;
	color:#fff;
}
  a.white:hover {
	text-decoration:none;
	color:#fff;
}

/*汎用*/
.b{
	font-weight:bold;
}
.ub{
	text-decoration:underline;
	}
.red{
	color:#B7181B;
	}

.clear {
	clear:both;　/*floatの解除、ここがポイント*/
}

.center{
	text-align:center;
}
.right{
	text-align:right;
}
.left{
	text-align:left;
}
div{
	margin: 0;
	padding: 0;
}
img{border: none;}
p {margin:0; padding:0:}
.p10 {padding:10px;}
.p20 {padding:20px;}
.p30 {padding:30px;}
.p40 {padding:40px;}

.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt40 {padding-top:40px;}

.pb10 {padding-bottom:10px;}
.pb20 {padding-bottom:20px;}
.pb30 {padding-bottom:30px;}
.pb40 {padding-bottom:40px;}

.pr10 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pr30 {padding-right:30px;}
.pr40 {padding-right:40px;}

.pl10 {padding-left:10px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}
.pl40 {padding-left:40px;}

.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}

.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}

.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr35 {margin-right:35px;}
.mr40 {margin-right:40px;}

.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}


/*ページ用*/
#main_c{
	max-width: 960px;
	margin: 0px auto;
	padding: 40px 0px;
	background-color: #fff;
	min-height: 400px;
}

h1 {
border-bottom: solid 3px #cce4ff;
position: relative;
	font-size: 1.5em;
	margin:0 10px;
	padding-bottom: 5px;
	margin-bottom: 20px;
	color: #666;
	line-height: 1.3em;
}

h1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}


.h2_movie {
position: relative;/*相対位置*/
padding: 0.4em 0.5em 0.4em 1.2em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
color: #0050A4;/*文字色*/
	margin: 10px 20px;
	font-size: 1.4em;
}

.h2_movie:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f138";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0.25em;/*アイコンの位置*/
top: 0.4em;/*アイコンの位置*/
color: #52a4f0; /*アイコン色*/
}

.h2_manual {
position: relative;
/*background: #eff4ff;*/
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #5472CD;
border-radius: 0 10px 10px 0;
	margin-left: 20px;
}

.h2_manual:after {
font-family: FontAwesome;
content: "\f26c";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}
.h2_guide {
position: relative;
/*background: #eff4ff;*/
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #5472CD;
border-radius: 0 10px 10px 0;
	margin-left: 20px;
}

.h2_guide:after {
font-family: FontAwesome;
content: "\f02d";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}
.h3_manual {
padding-bottom:5px;
	color: #666;
border-bottom: dotted 2px #6594e0;
	margin-left: 30px;
}

.h3_guide {
padding-bottom:5px;
	color: #666;
border-bottom: dotted 2px #6594e0;
	margin-left: 10px;
}


h4{
	font-size: 1.0em;
	color: #547dd8;
	padding-left: 40px;
}



.learnlist{
	width: 800px;
	margin: 0 auto;
}
.learnlist ul {
  
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;

}

 .learnlist ul li {
  line-height: 1.5;
  padding: 10px 0 20px 10px;
  list-style-type: none!important;
	 color: #2b4aba;
	 font-size: 1.1em;
}

.learnlist ul li:before {/*疑似要素*/
  font-family: FontAwesome;
  content: " \f03d";/*アイコンの種類*/
  position: absolute;
  left : 0.8em;/*左端からのアイコンまでの距離*/
	margin-top: -5px;
  color: #5e7ded;/*アイコン色*/
font-size: 1.2em;
}

.learnlist ul li ul li{
	color: #333;
	font-size: 0.85em;
	padding-left: 0px;
}

.learnlist ul li ul li:before {/*疑似要素*/
  font-family: FontAwesome;
  content: " \f007";/*アイコンの種類*/
  position: absolute;
  left : 0.8em;/*左端からのアイコンまでの距離*/
  color: #81d3ea;/*アイコン色*/
font-size: 1.2rem;
}

.list_d{
	/*line-height: 1.5em;*/
	margin: 10px  0 30px 70px;
	padding: 0;
}
.list_d li{
	list-style-type: decimal;
	padding-bottom: 20px;
}

.list_d li ul li{
	list-style: none;
	padding: 10px 20px 10px 0;
	font-size: 0.95em;
	  text-indent:-1em;
}


.list_d li ul li:before{
	content:"※"; 
}




.list_n{
	/*line-height: 1.5em;*/
	margin: 10px  0 0 70px;
	padding: 0;
}
.list_n li{
	padding-bottom: 20px;
}

.manual_topic{
	background-color: #f0feff;
	border: 3px double #547dd8;
	padding: 10px;
	margin: 15px auto 40px auto;
	max-width: 800px;
}

.notice{
	font-size: 0.8em;
	margin: 0;
	float: right;
	
	padding: 10px;
}

.table_point {
	border-collapse: collapse;
	font-size: 0.9em;
}
.table_point th, .table_point td {
	border: 1px solid #30529d;
}
.table_point th{
	color: #fff;
	background-color:#547dd8; 
	padding: 10px;
}

.table_point tr:nth-child(odd) {
	background: #f0feff;
}
.table_point td{
	padding: 5px;
}
.table_calc {
	border-collapse: collapse;
	font-size: 0.9em;
}
.table_calc th, .table_calc td {
	border: 1px solid #30529d;
}
.table_calc th{
	color: #fff;
	background-color:#547dd8; 
	padding: 10px;
}

/*.table_point tr:nth-child(odd) {
	background: #f0feff;
}*/
.table_calc td{
	padding: 5px;
}