@charset "UTF-8";
/* ==========================================================
	PC閲覧用 481px以上
========================================================== */

@media print, screen and (min-width: 481px) {

/*----------------------------------------
common
-----------------------------------------*/
	.note {
		font-size: 1.1rem;
		margin-top: 5px;
	}
/*----------------------------------------
box1
-----------------------------------------*/
	#box1 {
		margin-top: 30px;
		padding: 3px;
		background:url(../../../img/cmn_main_color02.gif);
	}
	#box1 div {
		background: url(../img/high_01_pc.png) 20px bottom no-repeat;
		background-color: #FFFFFF;
	}
	#box1 dl {
		width: 420px;
		float: right;
		padding: 30px 30px 30px 0;
	}
	#box1 dt img {
		width: 336px;
		height: 34px;
	}
	#box1 dd {
		width: 420px;
		background: url(../../../img/cmn_main_dotline.gif) repeat;
		margin-top: 20px;
		line-height: 31px;
	}
/*----------------------------------------
box2
-----------------------------------------*/
	#box2 p {
		width: 430px;
		float: left;
		padding-right: 20px;
	}
	#box2 img {
		width: 250px;
		height: 170px;
	}
	#box2 .inner {
		margin-bottom: 20px;
	}
	#box2 h2 + .inner {
		margin-bottom: 20px;
	}
	#box2 div.inner > div.recommend {
		width: 660px;
		background-color: #f4f4f4;
		padding: 20px;
	}
	#box2 div.inner > div.recommend p {
		font-weight: bold;
		line-height: 1.2;
		border-left: 3px solid #666666;
		padding-left: 8px;
		margin-bottom: 8px;
		width: 100%;
		float: none;
	}
	#box2 div.inner > div.recommend ul {
		columns: 2;
	}
	#box2 div.inner > div.recommend ul li {
		background: url(../../../img/cmn_foot_line.gif) bottom repeat-x;
	}
/*----------------------------------------
box3
-----------------------------------------*/
	#box3 table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
	}
	#box3 table th,
	#box3 table td {
		border: 1px solid  #b7b7b7;
	}
	#box3 table th {
		background: url(../../../img/cmn_main_color01.gif);
		text-align: center;
		vertical-align: middle;
		padding: 0 30px;
	}
	#box3 table td {
		padding: 15px;
	}
/*----------------------------------------
box4
-----------------------------------------*/
	#box4 h2 + .inner {
		padding-bottom: 20px;
	}
	#box4 p {
		width: 430px;
		float: left;
		padding-right: 20px;
	}
	#box4 .inner img {
		width: 250px;
		height: 170px;
	}
/*----------------------------------------
box5
-----------------------------------------*/
	#box5 dl {
		margin-bottom: 30px;
	}
	#box5 dl dt {
		position: relative;
		font-size: 18px;
		font-size: 1.8rem;
		font-weight: bold;
		border-left: 5px solid #3eb2d4;
		padding: .15em 0 .25em .65em;
		margin-bottom: 15px;
		background: linear-gradient(to bottom, #fff, #fefefe 50%, #eaeaea);
		/* IE8 IE9 */
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#eaeaea))";
		zoom: 1;
	}
	#box5 dl dt:before {
		position: absolute;
		left: -5px;
		bottom: 0;
		content:"";
		width: 5px;
		height: 50%;
		background-color: #000066;
	}
	#box5 dl dt:after {
		position: absolute;
		left: 0;
		bottom: 0;
		content: "";
		width: 100%;
		height: 0;
		border-bottom: 1px solid #ccc;
	}
	#box5 table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
	}
	#box5 th,
	#box5 td {
		border: 1px solid #b7b7b7;
		vertical-align: middle;
	}
	#box5 th {
		width: 20%;
		text-align: center;
		background-color:#e4f6ff;
	}
	#box5 td {
		width: 80%;
		padding: 8px 10px;
	}
/*----------------------------------------
box6
-----------------------------------------*/
	#box6 {
		width: 694px;
		margin-top: 10px;
		padding: 3px;
		background:url(../../../img/cmn_main_color02.gif);
	}
	#box6 div {
		background-color: #FFFFFF;
		padding-left: 30px;
	}
	#box6 p {
		width: 299px;
		float: right;
		text-align: center;
		padding-top: 30px;
	}
	#box6 p img {
		width: 250px;
		height: 170px;
	}
	#box6 dl {
		width: 365px;
		float: left;
		padding: 30px 0;
	}
	#box6 dt img {
		width: 365px;
		height: 68px;
	}
	#box6 dd {
		width: 365px;
		margin-top: 10px;
	}
/*-----------------------------------------
#step
-----------------------------------------*/
	#step{
		margin-top: 20px;
		margin-bottom: 10px;
	}
	#step li img{
		width:123px;
		height: auto;
	}
	#step h2{
		margin-top: 15px;
		background-color: #000066;
		color: #fff;
		font-weight: bold;
		font-size: 17px;
		padding: 2px 0 0 10px;
	}
	#step ul{
		margin-bottom: 0;
		margin-top: 10px;
	}	
	#step ul li{
		float: left;
		padding-left: 20px;
		background: url(../../img/step_ya.gif)  no-repeat 7px 43px;
	}
	#step li.first{
		padding-left: 0px;
		background: none;
		margin-top: -5px;
	}
	#step .step{
		color:#000066;
		display: inline-block;
		font-size: 0.85em;
	}
	#step .flow{
		display: block;
		font-size:0.85em;
		font-weight: bold;
	}
	#step h3{
		color: #000066;
	}
	#step .clearfix:after {
		content: ".";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
	#step .clearfix {
		zoom: 1;
		position: relative;
	}
	#step .caution{
		margin-top: 0;
		clear:both;
		text-align: right;
		font-size:small;
		margin-bottom: 20px;
	}		

}

/*----------------------------------------
	box2-1 CTA設置にともない追加
-----------------------------------------*/
#box2-1 p {
	width: 430px;
	float: left;
	padding-right: 20px;
}
#box2-1 img {
	width: 250px;
	height: 170px;
}
#box2-1 .inner {
	margin-bottom: 20px;
}
#box2-1 h2 + .inner {
	margin-bottom: 20px;
}
#box2-1 div.inner > div.recommend {
	width: 660px;
	background-color: #f4f4f4;
	padding: 20px;
}
#box2-1 div.inner > div.recommend p {
	font-weight: bold;
	line-height: 1.2;
	border-left: 3px solid #666666;
	padding-left: 8px;
	margin-bottom: 8px;
	width: 100%;
	float: none;
}
#box2-1 div.inner > div.recommend ul {
	columns: 2;
}
#box2-1 div.inner > div.recommend ul li {
	background: url(../../../img/cmn_foot_line.gif) bottom repeat-x;
}

/* ==========================================================
	スマホ閲覧用 480px以下
========================================================== */

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

/*----------------------------------------
common
-----------------------------------------*/
	.note {
		font-size: 1.1rem;
		margin-top: 5px;
	}
	/*
	.dir{
		display: none;
	}	
	*/
/*----------------------------------------
box1
-----------------------------------------*/
	#box1 div {
		background: url(../img/high_01_sp.png) bottom no-repeat;
		background-size: contain;
		padding-bottom: 90%;
	}
	#box1 dt img {
		width: 100%;
		height: auto;
	}
	#box1 dd {
		background: url(../../../img/cmn_main_dotline.gif);
		margin-top: 10px;
		line-height: 31px;
	}
/*----------------------------------------
box2
-----------------------------------------*/
	#box2 p {
		padding-bottom: 15px;
	}
	#box2 img {
		width: 100%;
	}
	#box2 .inner {
		margin-bottom: 20px;
	}
	#box2 h2 + .inner {
		margin-bottom: 20px;
	}
	#box2 div.inner > div.recommend {
		width: 88.6%;
		background-color: #f4f4f4;
		padding: 20px;
	}
	#box2 div.inner > div.recommend p {
		font-weight: bold;
		line-height: 1.2;
		border-left: 3px solid #666666;
		padding-left: 8px;
		margin-bottom: 4px;
		padding-bottom: 0px;
		width: 100%;
		float: none;
	}
	#box2 div.inner > div.recommend ul {
		columns: 2;
	}
	#box2 div.inner > div.recommend ul li {
		background: url(../../../img/cmn_foot_line.gif) bottom repeat-x;
		padding: 3px 0;
	}
/*----------------------------------------
box3
-----------------------------------------*/
	#box3 p {
		padding-bottom: 15px;
	}
	#box3 table {
		width: 100%;
		border-collapse: collapse;
	}
	#box3 table th,
	#box3 table td {
		border: 1px solid  #b7b7b7;
	}
	#box3 table th {
		background: url(../../../img/cmn_main_color01.gif);
		text-align: center;
		vertical-align: middle;
		padding: 0 30px;
	}
	#box3 table td {
		padding: 15px;
	}
/*----------------------------------------
box4
-----------------------------------------*/
	#box4 h2 + .inner {
		padding-bottom: 20px;
	}
	#box4 p {
		padding-bottom: 15px;
	}
	#box4 img {
		width: 100%;
	}
/*----------------------------------------
box5
-----------------------------------------*/
	#box5 dl dt {
		position: relative;
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 1.3;
		border-left: 5px solid #3eb2d4;
		padding: .15em 0 .25em .65em;
		margin-bottom: 15px;
		background: linear-gradient(to bottom, #fff, #fefefe 50%, #eaeaea);
		/* IE8 IE9 */
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#eaeaea))";
		zoom: 1;
	}
	#box5 dl dt:before {
		position: absolute;
		left: -5px;
		bottom: 0;
		content:"";
		width: 5px;
		height: 50%;
		background-color: #000066;
	}
	#box5 dl dt:after {
		position: absolute;
		left: 0;
		bottom: 0;
		content: "";
		width: 100%;
		height: 0;
		border-bottom: 1px solid #ccc;
	}
	#box5 table {
		width: 100%;
		margin: 10px 0 30px;
		border-collapse: collapse;
	}
	#box5 th,
	#box5 td {
		border: 1px solid #b7b7b7;
		vertical-align: middle;
	}
	#box5 th {
		width: 30%;
		text-align: center;
		background-color:#e4f6ff;
	}
	#box5 td {
		width: 70%;
		padding: 10px;
	}
/*----------------------------------------
box6
-----------------------------------------*/
	#box6 {
		margin-top: 10px;	
	}
	#box6 dt,
	#box6 dd  {
		padding-bottom: 15px;
	}
	#box6 img {
		width: 100%;
	}
/*----------------------------------------
#step
----------------------------------------*/	
	#step h2{
		margin-top: 15px;
		margin-bottom: 15px;
		background-color: #000066;
		color: #fff;
		font-weight: bold;
		font-size: 17px;
		padding: 2px 0 0 10px;
	}
	#step ul li.first{
		background: none;
	}
	#step ul li{
		float: none;
		width:100%;
		background:none;
		padding-left: 0;
	}
	#step dt:after{
		content: url("../../img/step_ya_sp.gif");
		position: absolute;
		left: 50%;
		margin-left: -45px;
		bottom: 0px; 
	}
	#step dt.last:after{
		content: none;
	}
	#step li img{
		width:40%;
		height: auto;
		display: block;
		margin: 5px auto 5px;
		padding-bottom: 3px;
	}		
	#step .caution{
		text-align: left;
		font-size: 12px;
		margin: 5px 0 20px;
	}
	#step .step{
		color:#000066;
		display: inline-block;
		font-size: 0.85em;
	}
	#step .flow{
		display: inline-block;
		margin-left: 10px;
		font-size:0.85em;
		font-weight: bold;
	}
	#step h3{
		text-align: center;
		color: #000066;
	}	
/*----------------------------------------
box2-1
-----------------------------------------*/
	#box2-1 p {
		padding-bottom: 15px;
		width: auto;
	}
	#box2-1 img {
		width: 100%;
		height: auto;
	}
	#box2-1 .inner {
		margin-bottom: 20px;
	}
	#box2-1 h2 + .inner {
		margin-bottom: 20px;
	}
	#box2-1 div.inner > div.recommend {
		width: 88.6%;
		background-color: #f4f4f4;
		padding: 20px;
	}
	#box2-1 div.inner > div.recommend p {
		font-weight: bold;
		line-height: 1.2;
		border-left: 3px solid #666666;
		padding-left: 8px;
		margin-bottom: 4px;
		padding-bottom: 0px;
		width: 100%;
		float: none;
	}
	#box2-1 div.inner > div.recommend ul {
		columns: 2;
	}
	#box2-1 div.inner > div.recommend ul li {
		background: url(../../../img/cmn_foot_line.gif) bottom repeat-x;
		padding: 3px 0;
	}

}