@charset "UTF-8";










/* ----------------------------------------------------------------------------------------------------



	base



--------------------------------------------------- */

/* IE6用の文字サイズ指定 / 12px = 75%; */
* html body	{ font-size: 100%; }
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	}

body {
	font-family: Helvetica, Arial, Osaka, "MS PGothic", "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF";
	background: rgba(255, 255, 255, 1);
	color: rgba(45, 45, 45, 1);
	font-size: 100%;
	margin: 0;
	min-width: 1120px;
	overflow-x: hidden;
	padding: 0;
	position: relative;
	/*font-family: "ヒラギノ角ゴ W3 JIS2004", "ヒラギノ角ゴ Pro W3"，"ＭＳ Ｐゴシック", "メイリオ";*/
	}

img {
	border: none;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	}

a {
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
	}
a:link,
a:visited,
a:active {
	text-decoration: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	}










/* ----------------------------------------------------------------------------------------------------



	Common



--------------------------------------------------- */
a.orderlink {
	display: block;
	position: relative;
	top: 0;
	background-color: #e4f434;
	background-image: -webkit-linear-gradient(160deg, #e4f434 0%, #17fec6 100%);
	background-image: -moz-linear-gradient(160deg, #e4f434 0%, #17fec6 100%);
	background-image: -o-linear-gradient(160deg, #e4f434 0%, #17fec6 100%);
	background-image: linear-gradient(160deg, #e4f434 0%, #17fec6 100%);
	border-radius: 10px;
	box-shadow: 0 6px 0 rgba(13, 137, 100, 1);
	transition: all .3s;
	}
	a.orderlink:hover {
		top: 5px;
		box-shadow: 0 1px 0 rgba(13, 137, 100, 1);
		}
a.orderlink img { vertical-align: bottom; }










/* ----------------------------------------------------------------------------------------------------



	base



--------------------------------------------------- */

#container { position: relative; }

	#hero {}
	#about,
	#voice { background: url(/lib/img/common/bg-pattern-blur.jpg) top left repeat; }
	#feature {}
	#howto { background: url(/lib/img/common/bg-pattern-pink.jpg) top left repeat; }
	#faq {}
	#order {}

		.inner { 
			margin: 0 auto;
			overflow: hidden;
			position: relative;
			width: 1080px;
			}










/* ----------------------------------------------------------------------------------------------------



	header



--------------------------------------------------- */

#header {
	position: relative;
	width: 100%;
	}
	.fixed {
		background: rgba(0, 0, 0, 0.8);
		left: 0;
		margin: 0;
	    position: fixed;
	    top: 0;
	    width: 100%;
	    z-index: 10000;

		-webkit-transition-duration: 0.5s;
		-moz-transition-duration: 0.5s;
		-ms-transition-duration: 0.5s;
		-o-transition-duration: 0.5s;
		transition-duration: 0.5s;
		}
		#header.fixed .inner { box-shadow: none; }

	#header h1 {
		font-size: 16px;
		left: 0;
		position: absolute;
		top: 15px;
		}

	#header p {
		text-align: center;
		width: 100%;
		}

	#header ul#nav {
		background: rgba(90, 200, 230, 1);
		height: 65px;
		}
	#header ul#nav .inner { overflow: unset; }
	#header ul#nav .inner:after {
		clear: both;
		content: '';
		display: block;
		}
		#header ul#nav li {
			float: left;
			padding: 16px 0;
			width: 15%;

			-webkit-transition-duration: 0.5s;
			-moz-transition-duration: 0.5s;
			-ms-transition-duration: 0.5s;
			-o-transition-duration: 0.5s;
			transition-duration: 0.5s;
			}
			#header ul#nav li:hover {
				cursor: pointer;
				background: rgba(10, 150, 220, 1);
				}
			#header ul#nav li a {
				border-left: 1px solid #fff;
				color: #fff;
				display: block;
				font-size: 17px;
				font-weight: bold;
				text-align: center;
				padding: 5px 0;
				}
		#header ul#nav span {
			display: inline-block;
			padding: 7px 0 0;
			}









/* ----------------------------------------------------------------------------------------------------



	content



--------------------------------------------------- */

#con {
	min-width: 1120px;
	}

	/* hero
	----------------------------------------------- */
	#hero {
		background: url(/lib/img/hero/bg.jpg) center center no-repeat;
		height: 590px;
		text-align: center;
		}
		#hero h2 { padding: 150px 0 0; }
		#hero p {
			font-size: 25px;
			letter-spacing: -2px;
			padding: 40px 0 0;
			}
			#hero p small { font-size: 20px; }
			#hero p span {
				color: rgba(90, 200, 230, 1);
				font-size: 35px;
				}

	/* about
	----------------------------------------------- */
	#about {
		color: rgba(255, 255, 255, 1);
		padding: 30px 0;
		}
		#about .inner {
			background: url(/lib/img/about/bg.png) center center no-repeat;
			height: 645px;
			padding: 0 0 0 230px;
			}
		#about h2 {
			background: url(/lib/img/about/label.png) right center no-repeat;
			display: inline-block;
			font-size: 75px;
			padding: 40px 170px 40px 0;
			}
			#about h2 small {
				font-size: 45px;
				}
			#about h2 img { vertical-align: bottom; }
		#about p {
			font-size: 19px;
			line-height: 1.75em;
			}
		#about ul {
			bottom: 0;
			overflow: hidden;
			padding: 0 0 0 230px;
			position: absolute;
			right: 0;
			width: 100%;
			}
			#about ul li {
				background: url(/lib/img/about/bg-point.png) center top no-repeat;
				color: rgba(35, 35, 35, 1);
				float: left;
				font-size: 23px;
				font-weight: bold;
				line-height: 1.25em;
				height: 310px;
				padding: 110px 0 0;
				text-align: center;
				width: 33.33333333333333%;
				}
				#about ul li:nth-child(3) { padding: 120px 0 0; }

	/* feature
	----------------------------------------------- */
	#feature { padding: 40px 0 0; }
		#feature .inner {
			border-bottom: 1px dotted rgba(90, 90, 90, 1);
			padding: 0 0 70px;
			}
		#feature h2 {
			font-size: 45px;
			padding: 40px 0 50px;
			text-align: center;
			}
		#feature ul {
			overflow: hidden;
			padding: 0 0 10px;
			}
			#feature ul.feature-img { padding: 0 0 70px; }
			#feature ul li {
				float: left;
				text-align: center;
				margin: 0 1%;
				width: 23%;
				}
				#feature ul.feature-img li { width: 31.33333333333333%; }

				#feature ul li p { font-size: 23px; }
				#feature ul li p img { width: 100%; }
				#feature ul li p small { font-size: 17px; }
				#feature ul li p.feature-point {
					color: rgba(255, 255, 255, 1);
					height: 5.5em;
					padding: 23px 0 0;
					line-height: 1.2;
					position: relative;
					}
					#feature ul li:nth-child(1) p.feature-point,
					#feature ul li:nth-child(3) p.feature-point { padding: 35px 0 0; }
					#feature ul li p.feature-point:before {
						bottom: -23px;
						border: 12px solid transparent;
						border-top: 12px solid rgba(33, 113, 188, 1);
						content: "";
						left: 50%;
						margin: 0 0 0 -12px;
						position: absolute;
						}
				#feature ul li p.feature-point-img {
					border: 5px solid rgba(50, 140, 203, 1);
					margin: 20px 10px 0;

					-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
					-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
					-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
					-o-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
					box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
					}
					#feature ul li p.feature-point-img img { width: 100%; }

			#feature p img {
				display: inline-block;
				}
		#feature p#feature-sub-ttl {
			color: rgba(255, 255, 255, 1);
			font-size: 48px;
			margin: 40px 0 30px;
			padding: 10px 0;
			position: relative;
			text-align: center;
			}
			#feature p#feature-sub-ttl .feature-img-arrow {
				bottom: -21px;
				margin: 0 0 0 -12px;
				position: absolute;
				}
				#feature p#feature-sub-ttl #fia-01 { left: 17%; }
				#feature p#feature-sub-ttl #fia-02 { left: 50%; }
				#feature p#feature-sub-ttl #fia-03 { left: 83%; }

			#feature ul li p.feature-point,
			#feature p#feature-sub-ttl {
				-webkit-border-radius: 60px;
				-moz-border-radius: 60px;
				-ms-border-radius: 60px;
				-o-border-radius: 60px;
				border-radius: 60px;
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4ea1d7+0,2272bc+100 */
				background: #4ea1d7; /* Old browsers */
				background: -moz-linear-gradient(top,  #4ea1d7 0%, #2272bc 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ea1d7), color-stop(100%,#2272bc)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top,  #4ea1d7 0%,#2272bc 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top,  #4ea1d7 0%,#2272bc 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top,  #4ea1d7 0%,#2272bc 100%); /* IE10+ */
				background: linear-gradient(to bottom,  #4ea1d7 0%,#2272bc 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ea1d7', endColorstr='#2272bc',GradientType=0 ); /* IE6-9 */
				}
		#feature #feature-movie {
			margin: 30px auto 0;
			text-align: center;
			width: 644px;
			}
			#feature #feature-movie iframe {
				margin: 0;
				padding: 0;
				}
			#feature #feature-movie p a img {
				margin: 0;
				padding: 0;
				width: 100%;
				}

	/* howto
	----------------------------------------------- */
	#howto { padding: 20px 0 0; }
		#howto .inner {}
		#howto h2 {
			font-size: 45px;
			padding: 40px 0 50px;
			text-align: center;
			}
		#howto p {
			font-size: 17px;
			line-height: 1.75em;
			padding: 20px 0 40px;
			}
		#howto ul#howto-flow {
			background: url(/lib/img/howto/bg.png) right top no-repeat;
			padding: 0 230px 0 0;
			}
			#howto ul#howto-flow li {
				height: 175px;
				font-size: 23px;
				margin: 0 0 50px;
				position: relative;

				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				-ms-border-radius: 20px;
				-o-border-radius: 20px;
				border-radius: 20px;
				box-shadow: 1px 1px 10px rgba(240, 155, 185, 1);
				}
				#howto ul#howto-flow li:nth-child(1) { background: rgba(255, 255, 255, 1) url(/lib/img/howto/illust-01.jpg) 25px center no-repeat; }
				#howto ul#howto-flow li:nth-child(2) { background: rgba(255, 255, 255, 1) url(/lib/img/howto/illust-02.jpg) 25px center no-repeat; }
				#howto ul#howto-flow li:nth-child(3) { background: rgba(255, 255, 255, 1) url(/lib/img/howto/illust-03.jpg) 25px center no-repeat; }
				#howto ul#howto-flow li:nth-child(1),
				#howto ul#howto-flow li:nth-child(2) { padding: 70px 30px 0 195px; }
				#howto ul#howto-flow li:nth-child(3) { padding: 55px 30px 0 195px; }

				#howto ul#howto-flow li img.howto-flow-arrow {
					bottom: -50px;
					left: 50%;
					margin: 0 0 0 -20px;
					position: absolute;
					}

		#howto ul#howto-point {
			overflow: hidden;
			padding: 0 0 10px;
			}
			#howto ul#howto-point li {
				background: rgba(245, 105, 155, 1) url(/lib/img/howto/bg-point.png) 20px center no-repeat;
				border: 3px solid rgba(255, 255, 255, 1);
				height: 120px;
				float: left;
				margin: 0 3% 0 0;
				padding: 40px 0 0 90px;
				text-align: left;
				width: 47%;

				border-radius: 10px;
				box-shadow: 5px 5px 0px rgba(255, 155, 185, 1);
				}

	/* faq
	----------------------------------------------- */
	#faq { padding: 30px 0 0; }
		#faq .inner {
			border-bottom: 1px dotted rgba(90, 90, 90, 1);
			text-align: center;
			}
		#faq h2 {
			font-size: 45px;
			padding: 40px 0 50px;
			text-align: center;
			}
		#faq dl {
			text-align: left;
			}
			#faq dl dt {
				background: rgba(240, 190, 25, 1) url(/lib/img/faq/bg-question.png) 15px center no-repeat;
				color: rgba(255, 255, 255, 1);
				font-size: 25px;
				padding: 10px 0 10px 50px;
				}
			#faq dl dd {
				font-size: 17px;
				padding: 20px 0 70px;
				line-height: 1.75;
				overflow: hidden;
				}
				#faq dl dd img {
					display: inline-block;
					float: right;
					padding: 0 0 0 95px;
					}

	/* voice
	----------------------------------------------- */
	#voice {
		padding: 40px 0 0;
		position: relative;
		}
		#voice:before {
			background: url(/lib/img/voice/bg.png) right center no-repeat;
			background-size: auto 100%;
			content: '';
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
			}
		#voice .inner {
			/*background: url(/lib/img/voice/bg.png) right top no-repeat;*/
			padding: 0 0 80px;
			}
		#voice h2 {
			color: rgba(255, 255, 255, 1);
			font-size: 45px;
			padding: 40px 0 50px;
			text-align: center;
			}
		#voice ul {
			margin: 0 0 30px;
			padding: 0 5px 0 110px;
			}
			#voice ul:nth-child(odd) { background: url(/lib/img/voice/icon-person-pink.png) left top no-repeat; }
			#voice ul:nth-child(even) { background: url(/lib/img/voice/icon-person-blue.png) left top no-repeat; }
			#voice ul li {
				background: rgba(255, 255, 255, 1) url(/lib/img/voice/bg-block.png) right top no-repeat;
				font-size: 16px;
				height: 110px;
				padding: 30px 30px 0 30px;
				position: relative;

				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				-webkit-box-shadow: 4px 4px 10px rgba(25, 110, 140, 1);
				-moz-box-shadow: 4px 4px 10px rgba(25, 110, 140, 1);
				box-shadow: 4px 4px 10px rgba(25, 110, 140, 1);
				}
				#voice ul:nth-child(2) li,
				#voice ul:nth-child(7) li,
				#voice ul:nth-child(8) li,
				#voice ul:nth-child(9) li,
				#voice ul:nth-child(10) li { padding: 30px 30px 0 30px; }
				#voice ul li img.voice-arrow {
					display: inline-block;
					height: 25px;
					left: -20px;
					position: absolute;
					top: 30px;
					width: 20px;
					}

	/* order
	----------------------------------------------- */
	#order {}
		#order .inner {
			background: url(/lib/img/order/bg.png) center center no-repeat;
			height: 580px;
			padding: 70px 0 0 350px;
			}
			#order .inner p img { overflow: hidden; }
		#order .order-des {
			background: url(/lib/img/common/logo-kelo-cote.png) left top no-repeat;
			padding: 0 0 40px 160px;
			}
			#order .order-des h2 {
				color: rgba(90, 200, 230, 1);
				font-size: 57px;
				font-weight: bold;
				padding: 0 170px 20px 0;
				}
			#order .order-des p { font-size: 17px; }
			#order .order-des p.ttl-sub {
				font-size: 21px;
				padding: 0 0 20px;
				}

	/* common
	----------------------------------------------- */
	p.txt-att {
		font-size: 52px;
		font-weight: bold;
		line-height: 1.3em;
		text-align: center;
		}
		p.txt-att span {
			color: rgba(208, 62, 48, 1);
			font-size: 72px;				
			}
			p.txt-att span#feature-underline {
				background: url(/lib/img/common/bg-underline.png) center bottom repeat-x;
				display: inline-block;
				padding: 5px 0;
				}
			p.txt-att small { font-size: 52px; }
	/* F&Q
	----------------------------------------------- */
	#faq p.txt-att {
		display: inline-block;
		line-height: 1.5;
		padding: 0 0 100px;
		text-align: left;
		}
		#faq p.txt-att span {
			background: url(/lib/img/common/bg-underline.png) center bottom repeat-x;
			font-size: 60px;
			padding: 5px 0;
			}
		#faq p.txt-att small { font-size: 38px; }









/* ----------------------------------------------------------------------------------------------------



	footer



--------------------------------------------------- */

#footer {
	border-top: 1px solid rgba(190, 190, 190, 1);
	padding: 50px 0;
	text-align: center;
	}










/* ----------------------------------------------------------------------------------------------------



	pagetop



--------------------------------------------------- */

#pagetop {
	background: rgba(90, 200, 230, 1);
	bottom: 20px;
	position: fixed;
	right: 20px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	}
	#pagetop a {
		color: rgba(255, 255, 255, 1);
		display: block;
		padding: 15px 20px;
		}










/* ----------------------------------------------------------------------------------------------------





	print

	
	


-------------------------------------------------- */

@media print {

	#pagetop { display: none; }

}