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

#main-contents{
/*	background-color: #ddd;	*/
	font-size: 14px;
	width: 950px;
	margin: 0 0 0 10px;
	float: left;
}
#sub-contents{
	display:none;
}


/*------------------------------
  共通
------------------------------*/
#main-contents { line-height: 1.6; }
#main-contents p { margin-bottom: 15px; }

#main-contents strong { font-weight: bold; }

#main-contents img {
	height: auto;
	vertical-align: middle;
}


/* クリアフィックス */
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* マージン */
.mT10 { margin-top: 10px !important; }
.mT45 { margin-top: 45px !important; }
.mB15 { margin-bottom: 15px !important; }
.mB20 { margin-bottom: 20px !important; }
.mB45 { margin-bottom: 45px !important; }


/* アライン */
.center { text-align: center; }


/* フロート */
.flt-left { float: left; }
.flt-right { float: right; }


/* テキスト */
.note { font-size: 11px; }


/* 横幅 */
.w100p { width: 100% !important; }

.inblock {
	display: inline-block;
}

/*------------------------------
  PC
------------------------------*/
.sp,
.print { display: none; }

#key {
	margin-bottom: 20px;
}
#key img.sp {
	display: none;
}

.first-area {
	margin-bottom: 80px;
}
.first-area dl.top-box {
	display: table;
	width: 100%;
	margin-bottom: 20px;
}
.first-area dl.top-box dt,
.first-area dl.top-box dd {
	display: table-cell;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: middle;
}
.first-area dl.top-box dt {
	width: 170px;
}
.first-area dl.top-box dd {
	font-size: 18px;
	font-weight: bold;
}
.first-area ul {
	margin-bottom: 15px;
	margin-left: -20px;
	letter-spacing: -0.4em;
}
.first-area ul li {
	display: inline-block;
	width: 50%;
	margin-bottom: 10px;
	padding-left: 20px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	letter-spacing: normal;
	vertical-align: top;
}
.first-area ul li .item {
	display: table;
	width: 100%;
	padding: 10px 20px;
	background-color: #E9E9E9;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.first-area ul li .item>* {
	display: table-cell;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: middle;
}
.first-area ul li .item .pic {
	width: 45px;
}
.first-area ul li .item .text {
	color: #20314C;
	font-weight: bold;
}
.first-area h3 {
	margin-bottom: 5px;
	color: #4492CD;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.first-area p.text-box {
	margin-bottom: 20px;
	text-align: center;
}
.first-attention {
	display: table;
	width: 100%;
}
.first-attention>* {
	display: table-cell;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: middle;
}
.first-attention>.pic {
	width: 130px;
	padding: 30px 25px;
	background: #fcc61a; /* Old browsers */
	background: -moz-linear-gradient(top,  #fcc61a 0%, #ec8d00 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #fcc61a 0%,#ec8d00 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #fcc61a 0%,#ec8d00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc61a', endColorstr='#ec8d00',GradientType=0 ); /* IE6-9 */
	text-align: center;
}
.first-attention>.text {
	padding: 30px;
	background-color: #E9E9E9;
	font-size: 18px;
	font-weight: bold;
}

.trouble-area {
	margin-bottom: 90px;
}
.trouble-area h2 {
	margin-bottom: 35px;
	color: #23AC38;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}
.trouble-top-col2 {
	margin-left: -35px;
	letter-spacing: -0.4em;
}
.trouble-top-col2>* {
	display: inline-block;
	width: 50%;
	padding-left: 35px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	letter-spacing: normal;
	vertical-align: top;
}
.trouble-top-col2>.pic {
	margin-bottom: 20px;
	text-align: center;
}
.trouble-top-col2>.text {
	margin-bottom: 10px;
}
.trouble-top-col2>.text>.inner-box {
	margin-bottom: 10px;
	padding: 20px;
	background-color: #23AC38;
	-webkit-border-radius: 10px;
	        border-radius: 10px;
}
.trouble-top-col2>.text>.inner-box h4 {
	margin-bottom: 5px;
	color: #FFF100;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
}
.trouble-top-col2>.text>.inner-box ul {
	padding-left: 20px;
}
.trouble-top-col2>.text>.inner-box ul li {
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	list-style: disc;
}
.trouble-arrow {
	margin-bottom: 20px;
	text-align: center;
}
.trouble-solution-area {
	padding: 35px 40px 25px;
	background-color: #8FC31F;
}
.trouble-solution-area h3 {
	margin-bottom: 15px;
	color: #FFF100;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}
.trouble-solution-area p {
	margin-bottom: 20px;
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
ul.trouble-solution-list {
	margin-left: -10px;
	letter-spacing: -0.4em;
}
ul.trouble-solution-list li {
	display: inline-block;
	width: 33.333%;
	margin-bottom: 10px;
	padding-left: 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: top;
	letter-spacing: normal;
}
#main-contents ul.trouble-solution-list li p {
	margin-bottom: 0;
	padding: 10px;
	background-color: #23AC38;
	color: #FFF100;
	font-size: 16px;
	font-weight: bold;
}
ul.trouble-solution-list li .pic {
}
ul.trouble-solution-list li .pic img {
	width: 100%;
	height: auto;
}

.point-area {
	margin-bottom: 70px;
}
.point-box {
	margin-bottom: 35px;
	background-color: #4492CD;
	border: 5px solid #4492CD;
}
.point-box h3 {
	padding: 30px 40px;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.2;
}
.point-box-contents {
	padding: 30px 40px;
	background-color: #FFF;
}
.point-box-contents h4 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #EA5514;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.2;
}
.point-box-contents h4:first-child {
	margin-top: 0;
}
ol.point-flow {
	margin-left: -55px;
	letter-spacing: -0.4em;
}
ol.point-flow li {
	display: inline-block;
	width: 33.333%;
	margin-bottom: 10px;
	padding-left: 55px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: top;
	letter-spacing: normal;
	position: relative;
}
ol.point-flow li:before {
	content: url(../image/point_flow_arrow.png);
	margin-top: -13px;
	position: absolute;
	top: 50%;
	left: 15px;
}
ol.point-flow li:first-child:before {
	display: none;
}
.point-flow-item {
	padding: 15px;
	border: 1px solid #20314C;
}
.point-flow-item h5 {
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
}
.point-flow-item .spacing {
	letter-spacing: -0.1em;
}
.point-flow-item .pic {
	text-align: center;
}
.point-flow-item .pic.mT15 {
	margin-top: 15px;
}
.point-col2 {
	margin-bottom: 15px;
	margin-left: -10px;
	letter-spacing: -0.4em;
}
.point-col2>.inner {
	display: inline-block;
	width: 50%;
	margin-bottom: 10px;
	padding-left: 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: top;
	letter-spacing: normal;
}
.point-col2-item {
	display: table;
	padding: 20px;
	border: 1px solid #20314C;
}
.point-col2-item>* {
	display: table-cell;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: middle;
}
.point-col2-item>.text {
}
.point-col2-item>.text h5 {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
}
#main-contents .point-col2-item>.text p {
	margin-bottom: 0;
}
.point-col2-item>.pic {
	width: 210px;
	text-align: center;
}
ul.point-list {
}
ul.point-list li {
	padding-left: 1.5em;
	position: relative;
}
ul.point-list li:before {
	content: "●";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
.text-block {
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	padding: 10px 15px 8px;
	background-color: #E6E6E6;
	line-height: 1.1;
}
ul.point-list li .text-block.emp {
	background-color: #20314C;
	color: #fff;
	font-weight: bold;
}
.point-box.box3 .text-block.emp {
	color: #EA5514;
	font-weight: bold;
}
.point-col3 {
	margin-left: -10px;
	letter-spacing: -0.4em;
}
.point-col3>.inner {
	display: inline-block;
	width: 33.333%;
	margin-bottom: 10px;
	padding-left: 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	letter-spacing: normal;
}
.point-col3-item {
	padding: 20px;
	border: 1px solid #20314C;
	text-align: left;
}
.point-col3-item h5 {
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
}

.option-area {
}
.option-area h2 {
	margin-bottom: 30px;
	color: #4492CD;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}
.option-col3 {
	margin-left: -30px;
	letter-spacing: -0.4em;
}
.option-col3 .inner {
	display: inline-block;
	width: 33.333%;
	margin-bottom: 20px;
	padding-left: 30px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: top;
	letter-spacing: normal;
}
.option-col3 h4 {
	margin-bottom: 10px;
	padding: 15px 30px 12px;
	background-color: #20314C;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
}
#main-contents .option-col3 p {
	margin-bottom: 0;
}
#main-contents p.option-attention-text {
	margin-bottom: 20px;
	color: #EA5514;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}
.option-service-area {
	margin-bottom: 35px;
	background-color: #20314c;
	border: 5px solid #20314c;
}
.option-service-area h3 {
	padding: 20px 40px 15px;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.2;
}
.option-service-contents {
	padding: 30px 40px 15px;
	background-color: #FFF;
}
.option-service-contents h4 {
	margin-bottom: 15px;
	color: #4492cd;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
}
.option-service-col2 {
	margin-bottom: 20px;
	margin-left: -35px;
	letter-spacing: -0.4em;
}
.option-service-col2>.inner {
	display: inline-block;
	width: 50%;
	margin-bottom: 10px;
	padding-left: 35px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: top;
	letter-spacing: normal;
}

.spec-area {
	margin-bottom: 60px;
	padding: 40px;
	background-color: #E9E9E9;
}
.spec-area h2 {
	margin-bottom: 20px;
	color: #20314C;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}
.spec-area table {
	width: 100%;
}
.spec-area table th,
.spec-area table td {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #fff;
	border-bottom: 1px solid #E9E9E9;
	vertical-align: top;
}
.spec-area table th {
	padding-left: 40px;
}
.spec-area table td {
	padding-left: 40px;
	padding-right: 40px;
}
.spec-box {
	padding: 20px 40px;
	background-color: #FFF;
}
.spec-box h4 {
	margin-bottom: 10px;
	color: #20314C;
	font-size: 18px;
	font-weight: bold;
}
.spec-box .pic {
	margin-bottom: 20px;
	text-align: center;
}
.spec-box .pic img.pc {
	display: inline-block;
}

.button-area {
	margin-bottom: 40px;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.button-col2 {
	margin-left: -20px;
	letter-spacing: -0.4em;
}
.button-col2>.inner {
	display: inline-block;
	width: 50%;
	margin-bottom: 20px;
	padding-left: 20px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: top;
	letter-spacing: normal;
}
.button-col2 a {
	display: block;
	width: 100%;
	padding: 20px 20px 15px;
	border-bottom: 7px solid #000;
	-webkit-border-radius: 5px;
	        border-radius: 5px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	color: #FFF100;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
}
.button-col2 a:hover,
.button-col2 a:focus {
	opacity: 0.6;
}
a.btn-product {
	background-color: #C3236E;
	border-color: #9a1654;
}
a.btn-contact {
	background-color: #3fadc8;
	border-color: #2088a1;
}

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

	.first-area p.text-box {
		text-align: left;
	}
	.first-area p.text-box br {
		display: none;
	}
	.first-attention>.text br {
		display: none;
	}
	.trouble-area h2 br {
		display: none;
	}
	.trouble-top-col2>* {
		width: 100%;
	}
	.trouble-solution-area h3 br {
		display: none;
	}
	.trouble-solution-area>p {
		text-align: left;
	}
	.trouble-solution-area>p br.pc {
		display: none;
	}
	.point-col2>.inner {
		width: 100%;
	}
	.option-area h2 br {
		display: none;
	}
	.option-service-col2>.inner {
		width: 100%;
	}

	.button-area {
		max-width: 500px;
	}
	.button-col2>.inner {
		width: 100%;
	}

}

@media screen and (min-width: 500px) and (max-width: 799px){
	#main-contents{
		width:98%;
		margin:0 1%;
	}
	#sub-contents{
		display:none;
	}
	
	img { max-width: 100%; }
	
	.first-area dl.top-box dt {
		width: 130px;
		padding-right: 15px;
	}
	ul.trouble-solution-list li {
		width: 50%;
	}
	ol.point-flow {
		margin-left: -40px;
	}
	ol.point-flow li {
		width: 50%;
		padding-left: 40px;
	}
	ol.point-flow li:before {
		left: 10px;
	}
	.point-col3>.inner {
		width: 50%;
	}
	.point-col3>.inner:first-child {
		width: 100%;
		margin-bottom: 20px;
	}

	.option-col3 {
		margin-left: -15px;
	}
	.option-col3 .inner {
		padding-left: 15px;
	}

}



@media screen and (max-width:499px){
	#main-contents{
		width:98%;
		margin:0 1%;
	}
	#sub-contents{
		display:none;
	}
	
	img { max-width: 100%; }
	
	.pc { display: none !important; }
	.sp { display: block; }
	
	#key img.pc {
		display: none;
	}
	#key img.sp {
		display: block;
	}

	.first-area {
		margin-bottom: 60px;
	}
	.first-area dl.top-box {
		display: block;
	}
	.first-area dl.top-box dt,
	.first-area dl.top-box dd {
		display: block;
	}
	.first-area dl.top-box dt {
		display: block;
		width: auto;
		margin-bottom: 10px;
		text-align: center;
	}
	.first-area dl.top-box dt img.sp {
		display: inline-block;
	}
	.first-area dl.top-box dd {
		font-size: 16px;
	}
	.first-area ul li {
		width: 100%;
	}
	.first-area h3 {
		font-size: 16px;
	}
	.first-attention {
		display: block;
		width: 100%;
	}
	.first-attention>* {
		display: block;
	}
	.first-attention>.pic {
		width: auto;
		padding: 10px 20px;
	}
	.first-attention>.pic img {
		width: 40px;
	}
	.first-attention>.text {
		padding: 20px;
		font-size: 16px;
	}
	.trouble-area {
		margin-bottom: 60px;
	}
	.trouble-area h2 {
		font-size: 24px;
	}
	.trouble-solution-area {
		padding: 20px 20px 10px;
	}
	.trouble-solution-area h3 {
		font-size: 24px;
	}
	.trouble-solution-area>p {
		font-size: 14px;
	}
	ul.trouble-solution-list li {
		width: 100%;
	}
	#main-contents ul.trouble-solution-list li p {
		font-size: 14px;
	}

	.point-area {
		margin-bottom: 60px;
	}
	.point-box h3 {
		padding: 15px 20px;
		font-size: 20px;
	}
	.point-box-contents {
		padding: 20px;
	}
	.point-box-contents h4 {
		font-size: 18px;
	}
	ol.point-flow {
		margin-left: 0;
	}
	ol.point-flow li {
		width: 100%;
		padding-left: 0;
	}
	ol.point-flow li:before {
		content: url(../image/point_flow_arrow_bottom.png);
		display: block;
		margin-top: 0;
		text-align: center;
		position: static;
	}
	.point-flow-item h5 {
		font-size: 14px;
	}
	.point-col2-item {
		display: block;
	}
	.point-col2-item>* {
		display: block;
	}
	.point-col2-item>.text h5 {
		font-size: 14px;
	}
	.point-col2-item>.pic {
		width: auto;
	}
	.point-col3>.inner {
		width: 100%;
	}

	.option-area h2 {
		font-size: 20px;
	}
	.option-col3 .inner {
		width: 100%;
	}
	.option-col3 h4 {
		padding: 15px 20px 12px;
		font-size: 16px;
	}
	#main-contents p.option-attention-text {
		font-size: 20px;
	}
	.option-service-area h3 {
		padding: 20px 20px 15px;
		font-size: 20px;
	}
	.option-service-contents {
		padding: 20px 20px 15px;
	}
	.option-service-contents h4 {
		font-size: 16px;
	}

	.spec-area {
		padding: 20px;
	}
	.spec-area h2 {
		margin-bottom: 15px;
		font-size: 20px;
	}
	.spec-area table th {
		padding-left: 40px;
	}
	.spec-area table th,
	.spec-area table td {
		display: block;
	}
	.spec-area table th {
		padding-bottom: 5px;
		padding-left: 20px;
		padding-right: 20px;
		border-bottom-width: 0;
		font-weight: bold;
	}
	.spec-area table td {
		padding-top: 0;
		padding-left: 20px;
		padding-right: 20px;
		word-wrap: break-word;
		white-space: normal;
	}
	.spec-box {
		padding: 10px 20px;
	}
	.spec-box h4 {
		font-size: 16px;
	}
	.spec-box .pic img.pc {
		display: none;
	}
	.spec-box .pic img.sp {
		display: inline-block;
	}
	
}



/*------------------------------
  印刷
------------------------------*/
@media print {
	body,
	#container,
	#contents-area,
	#main-contents {
		float: none;
		margin: 0;
		padding: 0;
		width: 700px;
	}
	#header,
	#footer,
	#sub-contents,
	.topicpath {
		display: none;
	}
	
	.print { display: inline-block; }
	
	img { max-width: 100%; }
	

	.first-area ul li .item {
		border: 2px solid #E9E9E9;
	}
	.first-area p.text-box {
		text-align: left;
	}
	.first-area p.text-box br {
		display: none;
	}
	.first-attention>.pic {
		border: 2px solid #FCC61A;
	}
	.first-attention>.text {
		border: 2px solid #E9E9E9;
	}
	.first-attention>.text br {
		display: none;
	}
	.trouble-area h2 br {
		display: none;
	}
	.trouble-top-col2>.text>.inner-box {
		border: 2px solid #23AC38;
	}
	.trouble-top-col2>.text>.inner-box h4 {
		color: #D7B204;
	}
	.trouble-top-col2>.text>.inner-box ul li {
		color: #000;
	}
	.trouble-solution-area {
		padding: 35px 30px 25px;
		border: 2px solid #8FC31F;
	}
	.trouble-solution-area h3 {
		color: #d7b204;
	}
	.trouble-solution-area h3 br {
		display: none;
	}
	.trouble-solution-area>p {
		color: #000;
	}
	#main-contents ul.trouble-solution-list li p {
		border: 2px solid #23AC38;
		color: #D7B204;
	}
	.point-box h3 {
		color: #000;
		border-bottom: 2px solid #4492CD;
	}
	.point-col2-item>.pic {
		width: 160px;
	}

	ol.point-flow {
		page-break-inside: avoid;
	}

	.point-col3>.inner {
		vertical-align: top;
	}
	.point-col3>.inner:first-child {
		padding-top: 50px;
	}
	.point-col3-item {
		height: auto !important;
	}

	.option-col3 h4 {
		padding: 15px 15px 12px;
		border: 2px solid #20314C;
		color: #000;
	}
	.option-service-area h3 {
		border-bottom: 2px solid #20314C;
		color: #000;
	}
	.text-block {
		border: 2px solid #E6E6E6;
	}
	ul.point-list li .text-block.emp {
		border: 2px solid #20314C;
		color: #20314C;
	}

	.spec-box {
		page-break-inside: avoid;
	}

	.spec-area {
		border: 2px solid #E9E9E9;
	}

	a.btn-product {
		border: 2px solid #C3236E;
		color: #D7B204;
	}
	a.btn-contact {
		border: 2px solid #3fadc8;
		color: #D7B204;
	}

	
}