@charset "UTF-8";

.btn-buy-fixcont{
	display: none;
	background-color:#19479b;
	width:100%;
	padding:10px 0!important;
	position:fixed;
	top:100%;
	margin-top:-71px!important;
	z-index:3;
}

/* MAIN ------------------------------------------------------ */

section#main{
	width:100%;
	/* background: url("../img/mainimg.jpg") no-repeat center top; */
	background-size: cover;
}
div#main-wrap{
	position:relative;
	height: 674px;
}
section#main h1#main-logo{
	position:absolute;
	top:30px;
	left: 30px;
	z-index: 0;
}
section#main h1#main-logo img{
	width:255px;
	height: auto;
}
/* ナビゲーション */
ul#main-nav{
	position: absolute;
	top:40px;
	left:335px;
	z-index: 0;
}
ul#main-nav li{
	float:left;
	margin-right: 30px;
	color: #fff;
	font-size: 14px;
	letter-spacing: 2px;
}
ul#main-nav li a{
	color:#fff;
}
ul#main-nav li:hover{
	opacity: 0.5;
}
/* メインコピー */
section#main h2{
	position:absolute;
	z-index: 0;
	top:130px;
	left: 35px;
}
section#main h2 img{
	width:520px;
	height: auto;
}
/* リード */
h1#main-lead{
	font-size:16px;
	color:#fff;
	line-height: 32px;
	position:absolute;
	left:35px;
	top:260px;
	z-index: 0;
}
/* 購入するボタンまわり */
div#main-btncont{
	position:absolute;
	top:560px;
	left:35px;
	bottom:0;
	z-index: 1;
}
div#main-btncont div{
	float:left;
}
div#main-btncont div.btn-buy{
	/* margin-left: 4%;*/
}
/* OLD VERSION 2021.02.13  ------------------------------------------------ */

div#main-btncont-old{
	position:absolute;
	top:520px;
	left:35px;
	bottom:0;
	z-index: 1;
}
div#main-btncont-old > div{
	float:left;
}
div#main-btncont-old div.btn-buy-old,
div#main-btncont-old div.btn-buy-rakuten{
	margin-left: 4%;
}
@media screen and (min-width: 751px) {
	div#main-btncont-old > div.btn-shoplist-cont{
		min-width: 400px;
	}
}

p.txt-shoplist{
	padding:4px!important;
	font-size: 14px!important;
}
div#main-btncont-old p.txt-shoplist{
	color:#fff;
	position: absolute;
	left:0;
	top:70px;
	padding:4px!important;
	width: auto;
}
div.btn-shoplist{

	border:thin solid #96aacf;
	border-radius: 5px;
}
div.btn-shoplist:hover{
	background-color: #19479b!important;
	border-color:#19479b!important;
}
div#main-btncont-old div.btn-shoplist{
	border-color: rgba(255,255,255,0.5);
	color:#fff;
	position: absolute;
	top:70px;
	right: -2%;
	padding:4px 41px!important;
}

.btn-shoplist-cont{
	text-align: center;
	padding: 20px 0;
	clear: both;
}
.btn-shoplist-cont p.txt-shoplist{
	display: inline-block;
	padding:10px 30px 10px 0!important;
	color: #19479b;
	position: relative;
}
.btn-shoplist-cont p.txt-shoplist:after, div#main-btncont-old p.txt-shoplist:after {
	content: "";
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 7px solid #19479b;
	position: absolute;
	top: 50%;
	right: 5px;
	margin-top: -6px;
}
div#main-btncont-old p.txt-shoplist:after{
	border-left: 7px solid #fff;
	right: -18px;
}
.btn-shoplist-cont a{
	color: #19479b;
}
.btn-shoplist-cont a:hover{
	color:#fff!important;
}
.btn-shoplist-cont div.btn-shoplist{
	display: inline-block;
	padding:10px 40px;
}


@media screen and (max-width: 750px) {
	div#main-btncont-old{
		width:90%;
		left:5%;
		top:83%;
	}
	div#main-btncont-old > div,
	div.btn-buy-cont-old > div,
	div.btn-buy-fixcont-old > div
	{
		width:49%!important;
	}
	div.btn-buy-fixcont-old div.btn-buy-amazon-old,
	div.btn-buy-fixcont-old div.btn-buy-old{
		margin-left: 1.3%!important;
	}
	div.btn-buy-fixcont-old  div.buttons{
		padding-left: 1.3% !important;
		padding-right: 1.3% !important;
	}
	div.btn-buy-fixcont-old div.btn-buy-old{
		/* padding: 13px 0 13px 0!important; */
	}
	div#main-btncont-old div.btn-buy-amazon-old img,
	div.btn-buy-cont-old div.btn-buy-amazon-old img,
	div.btn-buy-fixcont-old div.btn-buy-amazon-old img{
		width: 43.5%;
		margin-right:5px;
	}
	div#main-btncont-old div.btn-buy-old,
	div#main-btncont-old div.btn-buy-amazon-old
	{
		min-width: inherit;
		width:100%;
	}
	div.btn-buy-cont-old div.btn-buy-old,
	div.btn-buy-cont-old div.btn-buy-amazon-old,
	div.btn-buy-fixcont-old div.btn-buy-old,
	div.btn-buy-fixcont-old div.btn-buy-amazon-old
	{
		min-width: inherit;
		width:48%!important;
		float:left!important;
	}
	div#main-btncont-old p.btn-buy-txt-old,
	div.btn-buy-cont-old p.btn-buy-txt-old
	{
		font-size: 3.1vw!important;
		line-height: 52px!important;
		letter-spacing: 0.3vw;

	}
	div.btn-buy-cont-old div.btn-buy-old p.btn-buy-img-old
	{
		width: 11%!important;
		/* padding: 2% 3% 0 9%!important; */
	}
	div.btn-buy-fixcont-old div.btn-buy-old p.btn-buy-img-old
	{
		width:11%!important;
		/* padding: 2% 5% 0 8%!important; */
	}
	div.btn-buy-fixcont-old p.btn-buy-txt-old{
		font-size: 3.1vw!important;
		line-height: 52px!important;
		letter-spacing: 0.4vw;
	}
}
@media screen and (max-width: 750px) {
	div#main-btncont-old div.btn-shoplist-cont{
		clear: both;
		width: 100%!important;
		margin-top: 0;
		padding: 6px 0 0 0;
	}
	div#main-btncont-old p.txt-shoplist{
		position: relative;
		top:0;
		font-size: 10px!important;
	}
	.btn-shoplist-cont p.txt-shoplist{
		padding-right: 0!important;
	}
	div#main-btncont-old div.btn-shoplist{
		position: relative;
		top:0;
		font-size: 14px!important;
		right: 0;
		padding:4px 0!important;
		width:100%;
	}
	p.txt-shoplist:after{
		display: none;
	}
	div.btn-buy-cont-old p.txt-shoplist{
		font-size: 10px!important;
		width: 100%;
	}
	div.btn-buy-cont-old > div.btn-shoplist-cont{
		width: 100%!important;
		font-size: 14px;
	}
}
/*  ------------------------------------------------ */
img#btn-appstore{
	z-index: 1;
	position:absolute;
}

/* バクダンまわり */
div#main-bomcont{
	position:absolute;
	right:-60px;
	top:100%;
	margin-top:-100px;
	width:100%;
	z-index: 0;
}
img#bom-top{
	width:278px;
	height: auto;
	margin-top:-220px;
	margin-left: -30px;
}
div#main-bomcont>div:nth-child(2){margin-right:10px;color:#fff;font-size:10px;line-height: 18px;}
/* 再生ボタン */
img#main-btnplay{
	opacity:0.5;
	position:absolute;
	top:50%;
	left:50%;
	width:120px;
	height: auto;
	margin-left:-60px;
	margin-top:-60px;
	z-index:2;
}
img#main-btnplay:hover{opacity: 1;cursor: pointer;}

.slick-overlay, .slick-wrapper{
	width:100%;
	height:674px;
	overflow: hidden;
	position: absolute;
	z-index: 0;
	top:0;
	left:50%;
	font-size: 0;
	line-height: 0;
}
.slick-overlay{
	z-index: 1;
}
@media screen and (max-width: 750px) {
	.slick-overlay, .slick-wrapper{
		width:750px!important;
		height:650px;
		left:50%;
		margin-left:-375px!important;
	}
}
/*
.slick-wrapper div{
	position:absolute;
	top:0;
	left: 0!important;
}
.slick-wrapper div img{
	position:absolute;
	top:0;
	left: 0!important;
}*/
#video-wrapper{
	width:100%;
	height: 674px;
	left:50%;
	overflow: hidden;
	position: absolute;
}
#video-overlay{
	position: absolute;
	width:100%;
	height: 674px;
	top:0;
	left: 0;
	background-color: rgba(38,34,54,0.4);
	z-index: 0;
	display: none;
}
#video-background{
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width:100%;
	z-index:0;
}

#video-overlay {
  z-index: 0;
}
@media screen and (max-width: 750px) {
	div#main-wrap{
		height:650px;
		width:100%!important;
	}
	div#kokuyo-st-main-contents section#main .wrap{
		width:100%!important;
		margin-left: 0!important;
		top:-10px;
	}
	ul#main-nav{
		display:none;
	}
	section#main h1#main-logo{
		display:none;
	}
	section#main h2{
		top: 120px;
		left: 50%;
		margin-left: -39vw;
	}
	section#main h2 img{
		width:78vw;
	}
	img#main-btnplay{
		top:50%;
	}
	h1#main-lead{
		top:67%;
		line-height: 26px;
		font-size:14px;
		text-align: center;
		width:100%;
		left: 0;
	}
	div#main-btncont{
		width:83%;
		left:2%;
		top:88%;
	}


	div#main-btncont > div,
	div.btn-buy-cont > div,
	div.btn-buy-fixcont > div
	{
		/*width:49%!important;*/
	}
	div.btn-buy-fixcont div.btn-buy-amazon,
	div.btn-buy-fixcont div.btn-buy{
		/*margin-left: 1%!important;*/
	}
	div.btn-buy-fixcont div.btn-buy{
		/*padding: 13px 0 13px 0!important;*/
	}
	div#main-btncont div.btn-buy-amazon img,
	div.btn-buy-cont div.btn-buy-amazon img,
	div.btn-buy-fixcont div.btn-buy-amazon img{
		/*width: 43.5%;
		margin-right:5px;*/
	}
	div#main-btncont div.btn-buy,
	div#main-btncont div.btn-buy-amazon
	{
		min-width: inherit;
		width:100%;
	}
	div.btn-buy-cont div.btn-buy,
	div.btn-buy-cont div.btn-buy-amazon,
	div.btn-buy-fixcont div.btn-buy,
	div.btn-buy-fixcont div.btn-buy-amazon
	{
		min-width: inherit;
		/*width:48%!important;*/
		float:left!important;
	}
	div#main-btncont p.btn-buy-txt,
	div.btn-buy-cont p.btn-buy-txt,
	div.btn-buy-fixcont p.btn-buy-txt
	{
		font-size: 3vw!important;
		line-height: 3.5vw!important;
		letter-spacing: 0;

	}
	div.btn-buy-cont div.btn-buy p.btn-buy-img,
	div.btn-buy-fixcont div.btn-buy p.btn-buy-img
	{
		width:11%!important;
		padding: 2% 5% 0 5%!important;
	}



	img#btn-appstore{
		position:relative;
	}
	div#main-bomcont{
		right: 0;
		top: 116%;
		margin-top: 0;
	}
	img#bom-top{
		width: 40%;
		height: auto;
		margin-top: -100px;
		margin-left: 30%;
	}
	div#main-bomcont > div.fr{
		float: none;
	}
	div#main-bomcont>div:nth-child(2){
		color:#19479b;
		position: absolute;
		text-align: center;
		top: 120%;
		left: 10%;
		width:80%;
	}

}


/* NEWS ------------------------------------------------------ */

section#news{
	background-color: #00c8ff;
	width:100%;
	color:#19479b;
	padding:10px 0;
}
section#news #news-cont{
	position: relative;
}
section#news #news-cont:hover{
	cursor: pointer;
}
section#news p{
	padding-left:20px;
	line-height: 20px;
}
section#news ul{
	padding-left:20px;
	position: relative;
}
section#news div.pulldownarrow{
	content: "";
	width: 0;
	height: 0;
	border-top: 8px solid #19479b;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid transparent;
	position:absolute;
	bottom:0;
	right:0;
	margin-left:-20px;
	margin-top:4px;
}
.refrect-ud{
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}
section#news li{
	font-size:14px;
	line-height: 20px;
	display: none;
}
section#news li a{
	color:#fff;
	text-decoration: underline!important;
}
section#news li.active_news{
	display: block;
}

@media screen and (max-width: 750px) {
	section#news{
		margin-top:200px;
		background-color: #d0ecef;

	}
	section#news p{
		padding-left:0;
		line-height: 40px;
		font-size:16px;
		font-weight: bold;
		text-align: center;
	}
	section#news ul{
		padding-left: 4%;
		width: 92%!important;
		padding-bottom: 15px;
		line-height: 25px;
	}
	section#news li{
		padding:5px 0!important;
	}
	section#news li a{
		color:#ff5f5a;
	}
	section#news div.pulldownarrow{
		top:100%;
		margin-top:-10px;
		right:50%;
		margin-right: -6px;
	}
}
/* BANNER ------------------------------------------------------ */

section#banner{
	padding:50px 0;
	width:820px;
	margin:0 auto;
}
div#banner-channel{
	width:810px;
	height: 170px;
	margin: 0 auto 15px auto;
	background-size: contain!important;
	background: url("../img/bnr_810_170.png") no-repeat;
}
div#banner-channel:hover{
	opacity: 0.5;
}
section#banner ul{
	width:100%;
	height: 65px;
}
section#banner ul li img{
	width:262px;
	height: auto;
}
section#banner ul li img:hover{
	opacity: 0.5;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #27bcee;
}
.slick-next:before{
	content:'>';
}
.slick-prev:before{
	content:'<';
}

@media screen and (max-width: 750px) {
	section#banner{
		padding:20px 0 50px 0;
		width:90%;
	}
	div#banner-channel{
		width:90%;
		padding-top: 42.1%;
		height: auto;
		margin: 0 auto 15px 5%;
		background: url("../img/bnr_760_320.png") no-repeat;
		background-size: contain;
	}
	section#banner ul{
		width:90%;
		margin-left: 5%;
		height: 20vw;
	}
	section#banner ul li img{
		width:100%;
	}
}

/* INTRO ------------------------------------------------------ */

section#intro{
	padding-bottom: 100px;
	overflow-x: hidden;
	background: url("../img/pen-horizon.jpg") no-repeat 110% 105px;
	background-color: #fff;
}
div#intro-main{
	position: relative;
	margin-bottom: 80px;
}
div#intro-main h2{
	padding:75px 0 0 0;
	width:584px;
}
div#intro-main h2 img{
	width:100%;
	height: auto;
}
div#intro-main div{
	position: absolute;
	left: 100%;
	margin-left: -500px;
	top: 105px;
	width:627px;
}
div#intro-main div img{
	width:100%;
	height: auto;
}


div#intro-steps{
	width:100%;
	margin:0 auto;
}
div#intro-steps div{
	width:271px;
	margin-right:73px;
}
div#intro-steps div:nth-child(3){margin-right: 0;}
div#intro-steps div img{
	width:271px;
	height: auto;
}
div#intro-steps>div:nth-child(1) img{
	padding-top:21px;
}
div#intro-steps div p{
	padding-top:10px;
	width:100%;
	text-align: center;
	font-size:16px;
	font-weight: bold;
	color:#19479b;
	padding-left:18px;
}
@media screen and (max-width: 750px) {
	section#intro{
		background:url("../img/pen-horizon.jpg") no-repeat 20% 165px;
		background-size:contain;
	}
	div#intro-main h2{
		width:90%!important;
		margin-left: 5%;
		padding-top:55px;
	}
	div#intro-steps{
		padding-top:40px;
	}
	div#intro-steps div{
		width:100%;
		text-align: center;
		padding-bottom: 30px;
	}
	div#intro-steps div img{
		margin-left:-21px;
	}
	div#intro-steps div p{
		width:inherit;
		margin-top:20px;
		padding-left: 5px!important;
	}
}

/* CYCLE ------------------------------------------------------ */

section#cycle{
	background-color: #00c8ff;
	width:100%;
	color:#19479b;
	max-width:100%;
	margin-bottom:50px;
}
div#cycle-wrap{
	padding: 50px 0;
}
div#cycle-header{

}
div#cycle-header>div:nth-child(1){
	width:53.3%;
}
div#cycle-header>div:nth-child(2){
	width: 43.5%;
	margin-left: 2.5%;
	line-height:23px;
}
img#cycle-header-shoulder{
	width:62.5%;
	height:auto;
}
img#cycle-header-title{
	width:100%;
	height:auto;
	margin-top:10px;
}
div#cycle-image{
	margin:0 auto;
	width:61.35%;
	position: relative;
}
div#cycle-image img#cycle-image-main{
	width:100%;
	height: auto;
}
div#cycle-image img#cycle-image-cycle{
	position:absolute;
	z-index: 2;
	width:34.4%;
	height: auto;
	left:31.4%;
	top:0;
}
div#cycle-image img#cycle-image-me{
	position:absolute;
	z-index: 3;
	width:6.5%;
	height: auto;
	left:45.9%;
	top:15.5%;
}


@media screen and (max-width: 750px) {
	div#cycle-header div{
		width:100%!important;
		margin:0!important;
	}
	p#cycle-header-shoulder-cont{
		text-align: center;
	}
	img#cycle-header-shoulder{
		width:80%!important;
	}
	div#cycle-header>div:nth-child(2){
		width: 90%!important;
		margin-left: 5%!important;
		margin-top:20px!important;
		font-size:14px;
		line-height:23px;
		margin-bottom: 30px!important;
	}
	div#cycle-image{
		width:100%!important;
	}
}

/* REPORT ------------------------------------------------------ */

section#report{
	margin-top:50px;
	background-color: #00c8ff;
	width:100%;
	color:#19479b;
	max-width:100%;
	margin-bottom:50px;
}
div#report-wrap{
	padding: 30px 0;
}
div#report-header h2{
	margin: 0 auto;
	display: table;
	width:46.25%;
}
div#report-header h2 img{
	width:100%;
	height: auto;
}
div#report-header p{
	text-align: center;
	font-size: 22px;
}
div#report-graf{
	margin-top:30px;
	position: relative;
}
div#report-graf div{
	text-align: center;
	width:35%;
	margin:0 auto;
	position:relative;
}
img#graf-photo{
	position:absolute;
	z-index: 2;
	top:31px;
	left:19.5%;
	width:20.5%;
	height: auto;
}
img#graf-graf{
	width:80%;
	height: auto;
	margin-left:22%;
}
div#report-graf p{
	position:absolute;
	top:100%;
	right:-35%;
	margin-left:-10px;
	margin-top:-30px;
	font-size:10px;
	line-height: 18px;
}
div#report-monitor{
	width:100%;
	margin: 50px auto!important;
}
div.monitor-cont{
	width:28%;
	margin-left:14.6%!important;
}
div#report-monitor>div.monitor-cont:nth-child(2){
	margin-right: 0!important;
}
div.monitor-cont h3{
	color:#fff;
	border-radius: 10px;
	background-color:#19469a;
	padding:20px!important;
	position:relative;
	margin-bottom: 20px!important;
	font-size: 16px!important;
	font-weight: normal;
	line-height: 24px;
}
div.monitor-cont h3:after{
	content: "";
	width: 0;
	height: 0;
	border-top: 8px solid #19479b;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid transparent;
	position:absolute;
	top:100%;
	right:50%;
	margin-left:-5px;
}

div.monitor-cont img.monitor-thumb{
	width:100%;
	height: auto;
}

img.icon-cycle{
	width:49px;
	height: auto;
	position:absolute;
	top:100%;
	left: 100%;
	margin:-30px 0 0 -30px;
}
div.monitor-cont p{
	text-align: center;
	font-size: 16px;
	padding:14px 0!important;
	line-height: 22px;
}
div.monitor-cont div.btn-frame{
	font-size:14px;
	width:94%;
	line-height: 46px;
	padding:0 0 0 5%!important;
}

@media screen and (max-width: 750px) {
	div#report-header h2{
		width:100%;
	}
	div#report-header p{
		font-size:4.4vw;
	}
	img#graf-photo{
		display:none;
	}
	div#report-graf div{
		width:100%;
	}
	img#graf-graf{
		margin-left:0;
	}
	div#report-graf p{
		position:relative;
		text-align: right;
		margin:0!important;
		right:0;
	}
	div#report-monitor{
		padding-left:0!important;
	}
	div.monitor-cont{
		width:80%!important;
		margin-left:10%!important;
		margin-bottom:50px!important;
	}
}

/* HOWTO ------------------------------------------------------ */

section#howto{
	padding:50px 0;
}
section#howto h2{
	font-size: 25px;
	color:#19479b;
	font-weight: bold;
	text-align: center;
	margin-bottom:30px;
}
div#howto-title{
	background-color:#00c8ff;
	color:#fff;
	border-radius: 10px;
	position:relative;
	max-width: 920px;
	padding:2%;
	margin:0 auto;
}
div#howto-title:after{
	content: "";
	width: 0;
	height: 0;
	border-top: 8px solid #00c8ff;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid transparent;
	position:absolute;
	top:100%;
	right:50%;
	margin-left:-5px;
}
div#howto-title h3{
	font-size:25px;
	margin-bottom:10px;
}
div#howto-title p{
	font-size:14px;
}
div#howto-title img{
	position: absolute;
	width:165px;
	height: auto;
	right:20px;
	bottom:0;
}

div#howto-timeline{
	max-width:100%;
	margin:30px auto!important;
}
div.timeline{
	background-color: #d0ecef;
	border-bottom: dotted 3px #fff;
	padding:2% 0!important;
}
div.timeline-txt{
	color:#19479b;
	width:23%;
	margin-left:2%!important;
}
img.timeline-clock{
	width:46px;
	height: auto;
}
img.timeline-graf{
	width:197px;
	height: auto;
}
div.timeline span{
	font-size: 25px;
	margin-left: 10px!important;
	margin-top: 9px!important;
	font-weight: bold;
}
div.timeline p{
	margin:10px 0!important;
	font-size:16px;
	line-height: 1.5em!important;
}
div.timeline-img{
	width:33.3%;
	margin-left:2%!important;
	text-align: center;
}
div#howto-timeline>div.timeline:nth-child(1){
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
div#howto-timeline>div.timeline:nth-child(5){
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom: none;
}
div#howto-timeline>div.timeline:nth-child(2),
div#howto-timeline>div.timeline:nth-child(4){
	background-color: #fdebd1;
}
div.timeline-img p{
	color:#fff;
	border-radius: 10px;
	background-color:#19469a;
	padding:0.5em 1em!important;
	position:relative;
	margin:0 auto 20px auto!important;
	font-size: 14px;
	font-weight: normal;
	line-height: 18px;
	display: table;
}
div.timeline-img p:after{
	content: "";
	width: 0;
	height: 0;
	border-top: 8px solid #19479b;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid transparent;
	position:absolute;
	top:100%;
	right:50%;
	margin-left:-5px;
}
@media screen and (max-width: 750px) {
	section#howto{
		padding:20px 0!important;
	}
	section#howto h2{
		font-size:6vw;
	}
	div#howto-title{
		padding: 4% 4% 30% 4%!important;
	}
	div#howto-title h3{
		font-size: 9vw;
		line-height: 11vw;
		margin-bottom: 4vw;
		text-align: center;
	}
	div#howto-title p{
		font-size: 3.6vw;
		width: 40vw;
		line-height: 5vw;
		float: left;
		margin-left: 3vw;
	}
	div#howto-title img{
		width:42%;
		right:9px;
	}
	div.timeline-txt{
		width:100%;
		text-align: center;
		padding-top:10px!important;
		margin-left:0!important;
	}
	img.timeline-clock{
		width:36px!important;
		margin-top:-13px!important;
		float: none!important;
	}

	div.timeline-img{
		width:90%!important;
		margin-bottom:5%!important;
		margin-left:5%!important;
	}
	div.timeline-img p{
		margin-bottom:-20px!important;
	}
	div.timeline-img img{
		width:80%;
		height:auto;
	}
}

/* KOTU ------------------------------------------------------ */


section#kotu{
	margin-top:70px;
	width:100%;
	margin-bottom:50px;
}
section#kotu h2{
	font-size: 45px;
	color:#00c8ff;
	text-align: center;
	font-weight: bold;
}
div#kotu-header{
	background: url("../img/kotu-mainimage.jpg") center top no-repeat;
	background-size: cover;
	position:relative;
	width:100%;
	height: 330px;
	margin-top:30px;
}
div#kotu-header h2{
	position:absolute;
	left:30px;
	top:95px;
}
div#kotu-header h2 img{
	width:606px;
	height: auto;
}
div#kotu-header p{
	position:absolute;
	left:564px;
	top:250px;
}
div#kotu-header p img{
	width:127px;
	height: auto;
}

div#kotu-cont{
	background-color: #00c8ff;
	max-width:100%;
}
div#kotu-wrap{
	color:#19479b;
	padding: 30px 0;
}

div#kotu-baloon{
	background-color: #fff;
	border-radius: 10px;
	margin-top:10px!important;
	padding:30px 0!important;
	position:relative;
}
div#kotu-baloon:before{
	content: "";
	width: 0;
	height: 0;
	border-top: 18px solid transparent;
	border-right: 17px solid transparent;
	border-bottom: 17px solid #fff;
	border-left: 17px solid transparent;
	position:absolute;
	top: 0;
	right: 80px;
	margin-top: -30px;
}
div#kotu-baloon>div:nth-child(1){
	width:50%;
	margin-left:4%;
	position:relative;
}
div#kotu-baloon>div:nth-child(2){
	width:40%;
	margin-left:4%;
	font-size: 16px;
	line-height: 1.5em;
}
img#kotu-change-image{ width:100%; height: auto; }
img#kotu-change-gray{
	position:absolute;
	width:22.45%;
	height: auto;
	top:0;
	left:10.8%;
}
img#kotu-change-color{
	position:absolute;
	width:22.45%;
	height: auto;
	top:0;
	left:67.15%;
}

div#kotu-prof{
	width:65%;
	float:right;
	margin-top:20px!important;
}
div#kotu-prof>div:nth-child(1){
	font-size:14px;
	font-weight: bold;
	width:30%;
}
div#kotu-prof>div:nth-child(2){
	width: 70%;
	font-size: 10px;
	line-height: 15px;
}

div#kotu-midasi{
	clear: both;
	text-align: center;
	font-size:30px;
	color:#19479b;
	font-weight: bold;
	margin-top:50px!important;
}
div#kotu-midasi span{
	color:#fff;
	padding-left:5px;
}

div#kotu-steps{
	display:table;
	margin-left:9%!important;
	margin-top:50px!important;
}
div.kotu-step{
	width:25%;
	margin-right:6.25%!important;
}
div#kotu-steps>div.kotu-step:nth-child(3){ margin-right: 0;}
div.kotu-step h3{
	position:relative;
	width:100%;
	height:150px;
}
div.kotu-step h3 img{
	position:absolute;
	height:122px;
	width: auto;
	left: 50%;
	margin-left: -32px;
}
div.kotu-step h3 p{
	position:absolute;
	line-height:122px;
	font-weight: bold;
	z-index: 2;
	width:100%;
	font-size:25px;
	text-align: center;
}
div.kotu-step>p{
	margin-top:30px!important;
	font-size: 16px;
	line-height: 1.5em;
}
div#btn-frame-cont{
	margin-top:30px!important;
}

@media screen and (max-width: 750px) {
	section#kotu h2{
		font-size: 8.3vw;
		line-height: 11vw;
	}
	div#kotu-header{
		height:100px;
	}
	div#kotu-header h2{
		left:3%;
		top:30px;
		text-align: left;
	}
	div#kotu-header h2 img{
		width:70%;
	}
	div#kotu-header p img{
		display:none;
	}
	div#kotu-baloon>div:nth-child(1){
		width:92%;
	}
	div#kotu-baloon>div:nth-child(2){
		width:92%;
		margin-top:20px!important;
	}
	div#kotu-prof{
		width:92%;
		margin-left:4%!important;
		float:none;
	}
	div#kotu-prof>div:nth-child(1),div#kotu-prof>div:nth-child(2){
		width:100%;
	}
	div#kotu-prof>div:nth-child(2){
		margin-top:10px!important;
	}
	div#kotu-midasi{
		font-size: 10vw;
		line-height: 13vw;
	}
	div#kotu-steps{
		margin-left:0!important;
	}
	div.kotu-step{
		width:92%!important;
		margin-left:4%!important;
		text-align: center;
		margin-bottom:30px!important;
	}
	div.kotu-step>p{
		text-align: left;
	}

}

/* GARDEN ------------------------------------------------------ */

section#garden{
	width: 100%;
	margin:50px auto 50px auto!important;
	text-align: center;
}
section#garden h3{
	width:100%;
	background-color: #00c8ff;
	border-radius: 10px;
	font-size:25px;
	font-weight: bold;
	color:#fff;
	position: relative;
	padding:20px 0;
}
section#garden h3:after {
	content: "";
	width: 0;
	height: 0;
	border-top: 8px solid #00c8ff;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid transparent;
	position: absolute;
	top: 100%;
	right: 50%;
	margin-left: -5px;
}
section#garden h4{
	color:#19479b;
	font-weight: bold;
	font-size: 25px;
	padding:20px 0;
}
div#garden-cont{
	position: relative;
	height: 736px;
}
div#garden-cont img{
	position: absolute;
	height: auto;
}
img#garden-img1{left:20px;top:11px;width: 250px;}
img#garden-img2{left:233px;top:20px;width: 427px;}
img#garden-img4{left:635px;top:22px;width: 299px;}
img#garden-img3{left:-107px;top:178px;width: 446px;}
img#garden-img5{left:321px;top:440px;width: 377px;}

div.btn-frame-garden{
	background-color: #fff;
	border: solid 3px #19479b;
	color: #19479b;
	border-radius: 10px;
	line-height: 66px;
	font-weight: bold;
	position: relative;
	font-size: 20px;
	letter-spacing: 2px;
	display: table;
	padding: 0!important;
	margin: 0 auto!important;
	position: relative;
	width: 100%;
}
div.btn-frame-garden:after {
	content: "";
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid #19479b;
	position: absolute;
	top: 50%;
	right: 20px;
	margin-top: -5px;
}
@media screen and (max-width: 750px) {
	div#garden-cont{
		height: auto;
	}
	div#garden-cont img{
		position: relative;
		top:inherit!important;
		left:inherit!important;
	}
	img#garden-img1{width: 62.8%;}
	img#garden-img2{width: 86%;margin-left: -9%;}
	img#garden-img3{width: 90%;margin-top:-10%;}
	img#garden-img4{width: 74.8%;margin-top:10%;}
	img#garden-img5{width: 96.6%;padding:1rem 0!important;}
	section#garden h3,section#garden h4,div.btn-frame-garden{
		font-size: 19px;
		line-height: 26px;
	}
	div.btn-frame-garden{
		padding:1rem 0!important;
	}
	div.btn-frame-garden:after{
		right: 5px;
	}
}

/* SPEC ------------------------------------------------------ */

section#spec{
	margin-top:50px!important;
}
section#spec h2{
	width: 100%;
	margin:0 auto!important;
	border:solid thin #96aacf;
	padding:10px 0!important;
	font-size: 30px;
	color:#19479b;
	text-align: center;
}
div#spec-cont{
	position:relative;
	width: 100%;
	margin:50px auto 50px auto!important;
}
img#spec-logo{
	position:absolute;
	width:255px;
	height:auto;
	left:50%;
	top:-20px;
	margin-left:-122px!important;
}
img#spec-plus{
	position:absolute;
	top:50%;
	left:50%;
	width:64px;
	height: auto;
	z-index: 2;
	margin-left: -32px;
	margin-top:-32px;
}
div#spec-cont div{
	width:48%;
	position: relative;
}
p#app-script{
	text-align: center;
	font-size:10px;
	color:#19479b;
}
div#spec-cont div img{
	width:100%;
	height: auto;
}
div#spec-cont div img#btn-appstore-spec{
	position: absolute;
	z-index: 1;
	left:7.592%;
	top:68.9%;
	width:29.284%;
	height: auto;
	opacity:0;
}
div#spec-cont div img#btn-android-spec{
	position: absolute;
	z-index: 1;
	left:7.592%;
	top: 81.6%;
	width:29.284%;
	height: auto;
	opacity:0;
}



@media screen and (max-width: 750px) {
	div#spec-cont{
		margin-top:100px!important;
	}
	div#spec-cont div{
		width:100%;
		margin-top:80px!important;
	}
	img#spec-logo{
		top:-50px;
	}
	img#spec-plus{
		top:54%;
	}
}

/* SPEC - Y ------------------------------------------------------ */

section#spec-y{
	padding-top:50px!important;
}
div.spec-header{
	text-align: center;
	height:120px;
	overflow:hidden;
	position:relative;
	margin:0 auto!important;
}
div.spec-header-charas{
	max-width:960px;
	position: relative;
	margin:0 auto!important;
	overflow: hidden;
	height:120px;
}
div.spec-header h2{
	font-size:31px!important;
	color:#19479b;
	line-height: 50px;
	font-weight: bold!important;
}
div.spec-header img{
	position:absolute;
}
div.spec-header img.arrow-l,div.spec-header img.arrow-r{ height:120px; width:auto; }
div.spec-header img.arrow-l{
	left: 50%;
	margin-left: -960px;
}
div.spec-header img.arrow-r{
	left: 50%;
	margin-left:260px;
}
div.spec-header img.chara-l,div.spec-header img.chara-r{
	height:220px;
	width:auto;
}
div.spec-header img.chara-l{
	left:0;
}
div.spec-header img.chara-r{
	right:0;
}
div#spec-wrap-y{
	background-color:#ffd603;
	width:100%;
	padding: 30px 0!important;
}

div.specbox{
	padding-bottom:30px!important;
}
div.specbox h3{
	color:#19479b;
	text-align: center;
	font-size:22px!important;
	font-weight: bold!important;
	line-height:30px;
	padding:10px 0!important;
}
div.specbox h3 img{
	width:24px;
	height: auto;
	margin-right:0.5em!important;
}
div.specbox-cont>div{ width:50%; }
div.specbox-l{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	overflow: hidden;
}
div.specbox-r{
	position:relative;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	background:#fff;
	text-align: center;
	height: 480px;
}
div.specbox-r p{
	color:#19479b;
	font-size:16px;
	line-height: 1.4em;
}
img.spec-graf{
	width:200px;
	height: auto;
	padding:30px 0 23px 0!important;
}
img.spec-bom{
	position:absolute;
	width:132px;
	height: auto;
	top:50%;
	left:100%;
	margin-left:-60px;
	margin-top:-127px;
}
div.specbox-script{
	width:100%;
	text-align: right;
	font-size:12px;
	line-height: 16px;
	color:#fff;
	margin-top: -20px!important;
	margin-bottom: 30px!important;
}
@media screen and (max-width: 750px) {
	div.spec-header h2{
		font-size: 5.6vw!important;
		line-height: 7vw;
	}
	div.spec-header img.chara-l, div.spec-header img.chara-r{
		height:150px;
	}
	div.spec-header img.arrow-l{
		margin-left: -135vw!important;
	}
	div.spec-header img.arrow-l, div.spec-header img.arrow-r{
		height: 19.5vw;
	}
	div.spec-header img.arrow-r{
		margin-left:19.5vw!important;
	}
	div.specbox-cont>div{
		width:100%;
	}
	div.specbox-l{
		border-top-right-radius: 10px;
		border-bottom-left-radius:0;
	}
	div.specbox-l img{
		width:100%;
	}
	div.specbox-r{
		border-top-right-radius: 0;
		border-bottom-left-radius:10px;
	}
	img.spec-bom{
		width: 26vw;
		margin-left: -24vw;
		margin-top: -10vw;
	}
}
/* SPEC - B ------------------------------------------------------ */
section#spec-b{
	padding-top:50px!important;
}
div#spec-wrap-b{
	background-color:#19479b;
	width:100%;
	padding: 30px 0!important;
}
div#spec-wrap-b div.specbox h3{
	color:#fff;
}

/* PRD ------------------------------------------------------ */

section#prd{
	padding-top:50px!important;
	overflow-x: hidden;
}
section#prd h1{
	text-align: center;
	padding:0 0 30px 0!important;
}
section#prd h1 img{
	width:375px;
	height: auto;
}
div#prdbox{
	max-width:960px;
	margin:0 auto!important;
}
div#prdbox-l{
	position:relative;
	width:31.4%;
	height:405px;
}
div#prdbox-l p, div#prdbox-r p{
	position:absolute;
	z-index: 2;
	top:148px;
	width:100%;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
}
div#prdbox-l p{ color:#19469a; }
div#prdbox-r p{ color:#fff; }

div#prdbox-c{
	width:37.2%;
}
div#prdbox-c img{
	width:100%;
	height: auto;
}
div#prdbox-r{
	position:relative;
	width:31.4%;
	height:405px;
}
div#prdbox-l img, div#prdbox-r img{
	position:absolute;

}
img#big-arrow-l, img#big-arrow-r{
	height: 327px;
	width:auto;
}
img#big-arrow-l{
	left:-700px;
	margin-left:262px;
}
img#prd-chara-l{
	width:145px;
	height: auto;
	left:50%;
	margin-left:-72px!important;
	bottom:0;
}
img#prd-chara-r{
	width:175px;
	height: auto;
	left:50%;
	margin-left:-87px!important;
	bottom:0;
}
div#prd-price{
	text-align: center;
	color:#19469a;
}
p#price-l1{
	font-size: 12px;
}
p#price-l2{
	padding:10px 0!important;
	font-size:40px;
	font-weight: bold;
}
p#price-l2 span{
	font-size: 12px;
}
p#price-l3{
	font-size:14px;
	padding:10px 0 0 0!important;
	line-height: 1.5em;
}
p#price-l4{
	font-size:10px;
	padding:10px 0 20px 0!important;
	line-height: 1.5em;
}
@media screen and (max-width: 750px) {
	section#prd h1 img{
		width:85vw;
	}
	div#prdbox-l, div#prdbox-r{
		display:none;
	}
	div#prdbox-c{
		width:100%;
	}
	div#prd-price{
		width:92%;
		margin-left:4%;
	}
}

/* FAQ ------------------------------------------------------ */

section#faq{
	background-color:#e6e6e6;
	margin-top:100px!important;
	padding:0 0 50px 0!important;
}
section#faq h2{
	max-width:960px;
	margin:0 auto!important;
	padding:10px 0!important;
	font-size: 30px;
	color:#fff;
	background-color:#19469a;
	text-align: center;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	margin-bottom: 20px!important;
}
section#faq h3.faqbtn{
	width:95%;
	padding-left: 5%;
	background-color: #fff;
	font-weight: bold;
	font-size:16px;
	color:#19469a;
	text-align: left;
	border-radius: 10px;
	line-height: 50px;
	margin-bottom:20px;
	position: relative;
}
section#faq h3.faqbtn:after{
	content: "";
	width: 0;
	height: 0;
	border-top: 7px solid #19479b;
	border-right: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid transparent;
	position: absolute;
	top: 48%;
	left: 95%;
}
section#faq h3.faqbtn:hover{
	opacity:0.8;
	cursor: pointer;

}
div.faq-wrap{
	max-width:960px;
	margin: 0 auto!important;
	padding:30px 0!important;
}
div.faqcont{
	display:none;
}
div.faq-set{
	padding:0 0 30px 0!important;
	color:#19469a;
}
p.faq-q, p.faq-a, section#faq h5, section#faq h6{
	position:relative;
	padding-top:8px!important;
	padding-left:60px!important;
}
section#faq ul{
	padding-left:60px!important;
}
p.faq-q:before, p.faq-a:before{
	content: "";
	position:absolute;
	width:45px;
	height:45px;
	top:0;
	left: 0;
}
p.faq-q{
	font-size:22px;
	font-weight: bold;
	line-height: 30px;
	margin-bottom:20px!important;
}
p.faq-q:before{
	background: url("../img/icon-q__2x.svg") no-repeat left;
}
p.faq-a, section#faq h5, p#devicelist-lead{
	font-size:16px;
	line-height: 30px;
	padding-top:8px!important;
}
section#faq h6, p#devicelist-head{
	font-size:14px;
	line-height: 22px;
	padding-top:8px!important;
}
p.faq-a:before{
	background: url("../img/icon-a__2x.svg") no-repeat left;
}

section#faq ul li{
	font-size:16px;
	line-height: 30px;
	padding-bottom:8px!important;
}

table#devicelist, p#devicelist-head{
	width: 80%;
	margin-left: 10%;
	margin-top:30px;
}
section#faq table th{
	padding:5px 5px;
	background-color: #fff;
	font-size:14px;
}
section#faq table td{
	padding:10px 5px;
	border-bottom: thin solid #fff;
}
img.faq-image{
	margin-top: 10px;
	width:auto;
}
p.faq-a a{
	color:#00c7ff;
}

@media screen and (max-width: 750px) {
	section#faq h2{
		width:92%;
		margin-left:4%;
	}
	section#faq h3.faqbtn{
		font-size:4vw;
	}

	div.faqcont{
		width:90%;
		margin-left: 5%!important;
	}

	table#devicelist,p#devicelist-head{
		width:100%;
		margin-left: 0!important;
	}
	img.faq-image{
		width:100%;
	}
}

/* INTERVIEW ------------------------------------------------------ */

.yarukipen_interview{
	padding:0 0 50px 0!important;
	background-color:#fff;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	letter-spacing: 0.05em;
}
.yarukipen_interview div.interview-header{
	background-color:#00c7ff;
	height: 210px;
	position: relative;
}
img.interview-header-titleimg{
	width:262px;
	height: auto;
	position:absolute;
	top:31px;
	left:44px;
}
div.interview-header-baloon{
	background-color:#fff;
	border-radius: 10px;
	color:#1d4999;
	font-weight: bold;
	font-size:25px;
	width:400PX;
	height:137px;
	top:43px;
	left:353px;
	position: absolute;
	line-height: 36px;
	padding: 32px 0 0 0!important;
	text-align: center;
}
div.interview-header-baloon:before{
	content: "";
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-right: 14px solid #fff;
	border-bottom: 14px solid transparent;
	border-left: 14px solid transparent;
	position:absolute;
	top: 50%;
	left: -28px;
	margin-top:-14px;
}
p.interview-data{
	font-size:14px;
	color:#1d4999;
	margin-left:353px!important;
	margin-top: 16px;
	line-height: 22px;
}
div.interview-wrap{
	width:80%;
	margin-left:10%;
	padding-top:50px!important;
}
div.interview-wrap h3{
	margin:30px 0;
	color:#1d4999;
	font-size:22px;
	line-height:1.8em;
}
div.interview-wrap div.cf {
	zoom:1;
}
div.interview-wrap div.cf:after {
	content: "";
	display: block;
	clear: both;
}
div.interview-wrap p{
	margin:30px 0;
	line-height: 1.8em;
	font-size:16px;
	color:#1d4999;
	padding-bottom: 30px!important;
}
div.interview-wrap p.fl{
	width:65%;
	float:left;
	margin:0!important;
}
div.interview-wrap div img{
	width:30%;
	height: auto;
}
div.interview-wrap div img.fl{
	float:left;
	margin-right:5%!important;
}
div.interview-wrap div img.fr{
	float: right;
	margin-left:5%!important;
}

@media screen and (max-width: 750px) {
	.yarukipen_interview div.interview-header{
		height:360px;
	}
	img.interview-header-titleimg{
		left:50%;
		margin-left:-131px!important;
	}
	div.interview-header-baloon{
		font-size: 6vw;
		line-height: 1.5em;
		width: 86%;
		height: 117px;
		top: 263px;
		left: 7%;
		padding-top:22px!important;
	}
	div.interview-header-baloon:before{
		border-top: 14px solid transparent;
		border-right: 14px solid transparent;
		border-bottom: 14px solid #fff;
		border-left: 14px solid transparent;
		position:absolute;
		top: -14px;
		left: 50%;
		margin-left:-14px;
	}
	p.interview-data{
		width:100%;
		text-align: center;
		margin-left: 0!important;
	}
	div.interview-wrap h3{
		line-height: 1.5em;
	}
	div.interview-wrap p.fl{
		width:100%;
		float:none;
	}
	p.interview-data{
		font-size:3.6vw;
	}
	div.interview-wrap div img{
		width:80%;
		height: auto;
		margin-bottom: 30px!important;
	}
	div.interview-wrap div img.fl{
		float:none;
		margin-left:10%!important;
	}
	div.interview-wrap div img.fr{
		float:none;
		margin-left:10%!important;

	}
}