@charset "utf-8";

/* kv
---------------------------------------------- */
#j_kv {
	background:url(../images/kv.jpg) center center no-repeat;
	background-size:cover;
	background-position:top;
	text-align:center;
	position:relative;
}
	@media(max-width:979px) {
		#j_kv > h1 > img {
			width:100%;
		}
	}

#j_kv > a {
	position:absolute;
	top:80%;
	left:50%;
	background-color:#FFF;
	border-radius:5px;
}
	@media(max-width:979px) {
		#j_kv > a {
			width:46.875%;
		}
	}

#j_kv > a:hover > img {
    opacity: 0.8;
}
	@media(max-width:979px) {
		#j_kv > a > img {
			width:100%;
		}
	}



/* j_title
---------------------------------------------- */
article > section > header.j_title {
	background:url(../images/bg_title1.png) left center repeat-x;
	text-align:center;
	margin-bottom:40px;
}
article > section > header.j_title > h2 {
	display:inline-block;
	font-size:32px;
	background-color:#FFF;
	padding:0 20px;
	line-height:1.3;
}
	@media(max-width:767px) {
		article > section > header.j_title > h2 {
			font-size:24px;
		}
	}

article > section > header.j_title > h2 > strong {
	background:url(../../shared/images/underline.png) left bottom repeat-x;
}



/* worry
---------------------------------------------- */
#worry {
	margin-bottom:200px;
}
	@media(max-width:767px) {
		#worry {
			margin-bottom:100px;
		}
	}

#worry > header {
		text-align:center;
		background:url(../images/icon_worry.png) top center no-repeat;
		background-size:70px 62px;
		padding-top:90px;
		margin-bottom:30px;
		font-size:32px;
		line-height:1.3;
}
	@media(max-width:767px) {
		#worry > header {
			padding-top:50px;
			background-size:35px 31px;
			font-size:24px;
		}
	}

#worry > ul {
	background:url(../images/worry_bg.png);
	text-align:center;
	padding:30px 30px 0 30px;
	margin-bottom:30px;
}

#worry > ul > li {
	width:25%;
	display:inline-block;
	text-align:center;
	margin:0 3.125% 30px 3.125%;
}
	@media(max-width:879px) {
		#worry > ul > li {
			width:30%;
			margin:0 2.5% 30px 2.5%;
		}
	}
	@media(max-width:767px) {
		#worry > ul > li {
			width:240px;
			margin:0 20px 30px 20px;
		}
	}
	@media(max-width:479px) {
		#worry > ul > li {
			width:auto;
			margin:0 0 30px 0;
		}
	}

#worry > ul > li > p  {
	text-align:left;
	background-color:#FFF;
	border-radius:10px;	
	padding:10px;
	margin-bottom:20px;
	position:relative;
	line-height:1.3;
}
#worry > ul > li > p:before{
	content: "";
	position: absolute;
	bottom: -25px;
	left: 48%;
	border: 13px solid transparent;
	border-top: 13px solid #FFF;
}
#worry > ul > li > img  {
}
#worry > div {
	text-align:center;
}
#worry > div > p {
	background:url(../images/arrow1.png) top center no-repeat;
	background-size:80px 32px;
	padding-top:70px;
	text-align:center;
	font-size:32px;
	margin-bottom:25px;	
	line-height:1.3;
	font-weight:bold;
}
	@media(max-width:767px) {
		#worry > div > p {
			font-size:24px;
			padding-top:60px;
		}
	}

#worry > div > img {
	width:100%;
	max-width:546px;
}



/* reason
---------------------------------------------- */
#reason {
	margin-bottom:200px;
}
	@media(max-width:767px) {
		#reason {
			margin-bottom:100px;
		}
	}

#reason > ul > li {
	margin-bottom:50px;
}
#reason > ul > li > div {
	width:60%;
	float:right;
}
	@media(max-width:767px) {
		#reason > ul > li > div {
			width:auto;
			float:none;
		}
	}

#reason > ul > li > div > header {
	display:table;
	margin-bottom:30px;
}
	@media(max-width:767px) {
		#reason > ul > li > div > header {
			margin-bottom:15px;
		}
	}

#reason > ul > li > div > header > span {
	display:block;
	vertical-align:middle;
	background-color:#DA4D86;
	color:#FFF;
	border-radius:50%;
	line-height:48px;
	width:48px;
	text-align:center;
	font-size:32px;
}
#reason > ul > li > div > header > p {
	display:table-cell;
	vertical-align:middle;
	padding-left:15px;
	font-size:24px;
	line-height:1.3;
	font-weight:bold;
}
	@media(max-width:767px) {
		#reason > ul > li > div > header > p {
			font-size:20px;
		}
	}

#reason > ul > li > div > header > p > strong {
	background:url(../../shared/images/underline.png) left bottom repeat-x;
}
#reason > ul > li > div > p {
	font-size:20px;
	line-height:1.5;
}
	@media(max-width:767px) {
		#reason > ul > li > div > p {
			font-size:16px;
			margin-bottom:15px;
		}
	}

#reason > ul > li > figure {
	width:37.5%;
	float:left;
}
	@media(max-width:767px) {
		#reason > ul > li > figure {
			width:auto;
			float:none;
			text-align:center;
		}
	}

#reason > ul > li > figure > img {
	width:100%;
	max-width:360px;
}



/* system
---------------------------------------------- */
#system {
	margin-bottom:200px;
}
	@media(max-width:767px) {
		#system {
			margin-bottom:100px;
		}
	}

#system > ul > li {
	margin-bottom:50px;
}
#system > div {
	background-color:#F5F5EB;
	padding:50px 4.1666%;
}
	@media(max-width:767px) {
		#system > div {
			padding:25px 4.1666%;
		}
	}

#system > div > ul {
}
#system > div > ul > li {
	padding:20px 0;
}
#system > div > ul > li > p {
	width:120px;
	height:120px;
	float:left;
	background-color:#B6B48B;
	border-radius:50%;
	text-align:center;
	color:#FFF;
}
	@media(max-width:879px) {
		#system > div > ul > li > p {
			width:100px;
			height:100px;
		}
	}
	@media(max-width:767px) {
		#system > div > ul > li > p {
			float:none;
			margin:0 auto 20px auto;
		}
	}

#system > div > ul > li > p > span {
	display:block;
	padding-top:20px;
	line-height:1.1;
	font-size:24px;
}
	@media(max-width:879px) {
		#system > div > ul > li > p > span {
			font-size:20px;
		}
	}

#system > div > ul > li > p > span > strong {
	font-size:42px;
}
	@media(max-width:879px) {
		#system > div > ul > li > p > span > strong {
			font-size:36px;
		}
	}

#system > div > ul > li > figure {
	width:81.25%;
	float:right;
}
	@media(max-width:767px) {
		#system > div > ul > li > figure {
			width:100%;
			max-width:480px;
			margin:0 auto;
			float:none;
		}
	}

#system > div > ul > li > figure > img {
	width:50%;
}
	@media(max-width:767px) {
		#system > div > ul > li > figure > img {
			width:80%;
			margin-bottom:10px;
		}
		#system > div > ul > li > figure > img:nth-child(2) {
			margin-left:20%;
		}
	}

#system > div > ul.p8 > li > figure > img {
	width:100%;
}
#system > div > ul.p8 > li > figure > img.sp_only {
	display:none;
}
	@media(max-width:767px) {
		#system > div > ul.p8 > li > figure > img.pc_only {
			display:none;
		}
		#system > div > ul.p8 > li > figure > img.sp_only {
			display:block;
		}
		#system > div > ul.p8 > li > figure > img:nth-child(2) {
			margin-left:0;
		}
	}

#system > div > p {
	text-indent:-1em;
	padding-left:1em;
	line-height:1.3;
	margin-bottom:20px;
}



/* comparison
---------------------------------------------- */
#comparison {
	margin-bottom:200px;
	text-align:center;
}
	@media(max-width:767px) {
		#comparison {
			margin-bottom:100px;
		}
	}

#comparison > table {
	border:2px solid #CFE1C8;
	border-collapse:collapse;
	margin-bottom:60px;
}
	@media(max-width:767px) {
		#comparison > table {
			margin-bottom:30px;
		}
	}

#comparison > table th, #comparison > table td {
	border:1px solid #CFE1C8;
	text-align:center;
	vertical-align:middle;
	padding:12px 8px;
	line-height:1.3;
}
	@media(max-width:767px) {
		#comparison > table th, #comparison > table td {
			font-size:16px;
			padding:8px 3px;
		}
	}

#comparison > table th {
	background-color:#F7F9F6;
}
#comparison > table span {
	display:block;
	font-size:16px;
}
	@media(max-width:767px) {
		#comparison > table span {
			font-size:14px;
		}
	}

#comparison > table tr.own th, #comparison > table tr.own td {
	background-color:#FFFFBF;
}

#comparison > p {
	margin-bottom:15px;
	line-height:1.3;
	font-size:22px;
}
#comparison > p > strong {
	background:url(../../shared/images/underline.png) left bottom repeat-x;
}
#comparison > img {
	width:100%;
	max-width:717px;
}



/* voice
---------------------------------------------- */
#voice {
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#voice {
			margin-bottom:100px;
		}
	}

#voice > ul {
	padding:0 20px;
}
	@media(max-width:479px) {
		#voice > ul {
			padding:0;
		}
	}

#voice > ul > li {
	float:left;
	width:48%;
	margin-bottom:35px;
}
	@media(max-width:767px) {
		#voice > ul > li {
			float:none;
			width:auto;
			max-width:540px;
			margin:0 auto 50px auto;
		}
	}

#voice > ul > li:nth-child(even) {
	float:right;
}
	@media(max-width:767px) {
		#voice > ul > li:nth-child(even) {
			float:none;
		}
	}

#voice > ul > li > figure {
	padding:0 10px;
}
	@media(max-width:479px) {
		#voice > ul > li > figure {
			padding:0;
		}
	}

#voice > ul > li > figure > img {
	width:32%;
	float:left;
	border:5px solid #DDD;
	border-radius:50%;
}
#voice > ul > li > figure > figcaption {
	width:60%;
	float:right;
	padding-top:20px;
}
	@media(max-width:479px) {
		#voice > ul > li > figure > figcaption {
			padding-top:10px;
		}
	}

#voice > ul > li > figure > figcaption > strong {
	display:inline-block;
	font-size:20px;
	margin-bottom:15px;
}
	@media(max-width:979px) {
		#voice > ul > li > figure > figcaption > strong {
			margin-bottom:10px;
		}
	}
	@media(max-width:479px) {
		#voice > ul > li > figure > figcaption > strong {
			font-size:18px;
			margin-bottom:5px;
		}
	}

#voice > ul > li > figure > figcaption > p {
	line-height:1.3;
}
#voice > ul > li > p {
	background-color:#F6F6F6;
	margin-top:-20px;
	padding:30px 15px 20px 15px;
	line-height:1.5;
}
	@media(max-width:979px) {
		#voice > ul > li > p {
			margin-top:-10px;
			padding-top:20px;
		}
	}

#voice > ul > li > p > strong {
	background:url(../../shared/images/underline.png) left bottom repeat-x;
}



/* price
---------------------------------------------- */
#price {
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#price {
			margin-bottom:100px;
		}
	}

#price > ul {
	margin-bottom:10px;
}
#price > ul > li {
	width:31.25%;
	margin:0 1.041666%;
	float:left;
}
	@media(max-width:767px) {
		#price > ul > li {
			width:100%;
			float:none;
			max-width:300px;
			margin:0 auto 50px auto;
		}
	}

#price > ul > li > h3 {
	background-color:#DA4D86;
	font-size:22px;
	text-align:center;
	padding:12px 0;
	color:#FFF;
	margin-bottom:15px;
}
#price > ul > li > p {
	text-align:center;
	margin-bottom:15px;
	font-weight:bold;
}
#price > ul > li > p > span {
	font-size:20px;
}
#price > ul > li > p > span > strong {
	color:#F00;
	font-size:32px;
}
#price > ul > li > img {
	width:100%;
}
#price > p {
	margin-left:1.041666%;
	margin-bottom:40px;
}
#price > p > span {
	color:#64AF4C;
}
#price > div {
	margin:0 1.041666%;
	border-radius:0 0 5px 5px / 0 0 5px 5px;
	background-color:#EEEEEE;
	text-align:center;
}
#price > div > h3 {
	background-color:#333333;
	color:#FFF;
	padding:10px 0;
	font-size:20px;
	border-radius:5px 5px 0 0 / 5px 5px 0 0;
}
#price > div > ul {
	padding:20px;
	display:inline-block;
}
#price > div > ul > li {
	width:18%;
	margin:0 1%;
	float:left;
}
	@media(max-width:767px) {
		#price > div > ul > li {
			width:30%;
			margin:0 1% 15px 1%;
			font-size:16px;
		}
	}

#price > div > ul > li > img {
	width:80%;
	margin-bottom:5px;
}
#price > div > ul > li > span {
	display:block;

}



/* certification
---------------------------------------------- */
#certification {
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#certification {
			margin-bottom:100px;
		}
	}

#certification > ul {
	text-align:center;
}
#certification > ul > li {
	width:100%;
	max-width:300px;
	display:inline-block;
	margin:0 20px 40px 20px;
}
	@media(max-width:479px) {
		#certification > ul > li {
			margin:0 0 30px 0;
		}
	}

#certification > ul > li > figure > img {
	max-width:100%;
	margin-bottom:5px;
}



/* media
---------------------------------------------- */
#media {
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#media {
			margin-bottom:100px;
		}
	}

#media > ul {
	text-align:center;
}
#media > ul > li {
	width:100%;
	max-width:300px;
	display:inline-block;
	margin:0 20px 30px 20px;
}
	@media(max-width:479px) {
		#media > ul > li {
			margin:0 0 30px 0;
		}
	}

#media > ul > li > figure > img {
	max-width:100%;
	margin-bottom:5px;
}
#media > ul > li > figure > figcaption {
	text-align:left;
	line-height:1.2;
}



/* faq
---------------------------------------------- */
#faq {
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#faq {
			margin-bottom:100px;
		}
	}

#faq > ul > li {
	background:url(../images/faq_q.png) top left no-repeat;
	background-size:48px 48px;
	margin-bottom:30px;
}
#faq > ul > li > h3 {
	margin:0 0 10px 60px;
	padding-top:10px;
	line-height:1.3;
}
#faq > ul > li > p {
	margin:0 0 0 60px;
	padding:12px;
	border-radius:3px;
	background-color:#F0F0E1;
	line-height:1.3;
}



/* feature
---------------------------------------------- */
#feature {
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#feature {
			margin-bottom:100px;
		}
	}

#feature > div {
	margin:0 auto;
	width:87.5%;
	max-width:800px;
	background-color:#F6F6F6;
	padding:30px 6.25%;
	position:relative;
}
	@media(max-width:479px) {
		#feature > div {
			padding:20px 3.125%;
			position:static;
		}
	}

#feature > div > ul li {
	background:url(../images/feature_icon.png) center left no-repeat;
	background-size:60px 50px;
	padding-left:80px;
	line-height:50px;
	margin-bottom:20px;
	font-size:24px;
	font-weight:bold;
}
	@media(max-width:767px) {
		#feature > div > ul li {
			background:url(../images/feature_icon.png) center left no-repeat;
			background-size:42px 35px;
			padding-left:60px;
			font-size:20px;
			line-height:35px;
		}
	}
	@media(max-width:479px) {
		#feature > div > ul li {
			padding-left:50px;
			font-size:16px;
			line-height:35px;
		}
	}

#feature > div > img {
	position:absolute;
	right:6.25%;
	bottom:0;
	width:30%;
}
	@media(max-width:479px) {
		#feature > div > img {
			position:static;
			width:60%;
			margin:0 auto;
			display:block;
		}
	}




/* access
---------------------------------------------- */
#access {
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#access {
			margin-bottom:100px;
		}
	}

#access > p {
	width:100%;
	max-width:640px;
	margin:0 auto 30px auto;
	line-height:1.3;
}
#access > div {
	width:100%;
	max-width:636px;
	margin:0 auto;
	border:2px solid #DFDFD0;
}
#access > div > img {
	width:100%;
	border-bottom:2px solid #DFDFD0;
}
#access > div > iframe {
	height:320px;
	vertical-align:bottom;
}