@charset "utf-8";

/***[共通]***/
a:link, a:hover, .share-btn, .share-btn:hover {
	-webkit-transition:all 0.3s ease-in-out 0s;transition:all 0.3s ease-in-out 0s;
}
a:hover, .share-btn:hover {
	opacity:0.8;
}
.block::after {
	display: block;
	content: "";
}
body {
	font-family:Roboto, 'Droid Sans', '游ゴシック', YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'メイリオ', Meiryo, sans-serif;
	color:#fff;
	background: #00a0e9;
	background: -moz-linear-gradient(top,  #00a0e9 0%, #036eb8 100%);
	background: -webkit-linear-gradient(top,  #00a0e9 0%,#036eb8 100%);
	background: linear-gradient(to bottom,  #00a0e9 0%,#036eb8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0e9', endColorstr='#036eb8',GradientType=0 );

}
.wrapper {
	width: 100%;
	margin: 0 auto;
}
.wrapper img {
	width:100%;
	height:auto;
}
.w800 {
	width:800px;
	margin:0 auto;
}
.pc-block {
	display:block;
}
.sp-block {
	display:none;
}

/***[header,main]***/
.head-txt {
	display:-webkit-box;display:-webkit-flex;display: flex;
	-webkit-box-align:center;-webkit-align-items: center;align-items: center;
	-webkit-box-pack:center;-webkit-justify-content: center;justify-content: center;
	height: 100vh;
	margin-bottom: 100px;
}
.head-txt a {
	width:120px;
}
.logo {
	width: 800px;
	height: auto;
	margin: 0 auto;
}
.intro {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	font-size: 18px;
	margin:120px auto 100px;
	padding:30px 0 25px;
}
.intro-title {
	width:188px;
	margin-bottom: 30px;
}
.intro-body {
	line-height: 2.2;
}
.intro01 span {
	color: #fff100;
	font-weight: bold;
	font-size: 30px;
	line-height: 1;
}
.intro02 {
	margin: 50px 0;
}
.intro-name {
	text-align: right;
}
.main-txt-top {
	margin: 100px auto 20px;
}
.contents {
	width: 800px;
	border: 1px solid #fff;
	margin: 0 auto;
	padding: 16px;
}
.cont-title {
	width:130px;
}
.cont-list {
	display:-webkit-box;display:-webkit-flex;display:flex;
	-webkit-flex-pack:justify;-webkit-justify-content: space-between;justify-content: space-between;
	-webkit-flex-wrap: wrap;flex-wrap: wrap;
	width: 700px;
	margin: 0 auto;
}
.cont-list-item {
	width:180px;
	margin-top: 18px;
}
.main-com {
	margin: 50px auto;
}
.sample {
	display:-webkit-box;display:-webkit-flex;display:flex;
	-webkit-flex-pack:justify;-webkit-justify-content: space-between;justify-content: space-between;
	-webkit-flex-wrap: wrap;flex-wrap: wrap;
	width: 1120px;
	margin: 0 auto;
}
.sample-item {
	width:550px;
	margin-bottom: 20px;
}
.video {
	margin: 80px auto;
}
.video-title {
	color: #fff100;
	font-weight: bold;
	font-size: 26px;
	text-align: center;
}
.youtube {
	position:relative;
	height:0;
	overflow:hidden;
	margin:10px auto;
	padding-top:56.25%;
}
.youtube iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.video-caption a {
	color: #fff;
	text-decoration: underline;
}
.cart-btn {
	display: block;
	margin: 70px auto 40px;
}

/***[footer]***/
.footer {
	text-align: center;
	padding-bottom: 36px;
}
.share-wrap {
	display:-webkit-box;display:-webkit-flex;display:flex;
	-webkit-flex-pack:justify;-webkit-justify-content: space-between;justify-content: space-between;
	width:156px;
	margin:0 auto;
}
.share-btn {
	display: block;
	width: 60px;
	height:60px;
	cursor: pointer;
}
.share-btn img {
	width: 100%;
	height:100%;
}
.pagetop {
	display: block;
	position: relative;
	margin: 40px auto 10px;
	width: 46px;
	height: 40px;
}
.pagetop::before, .pagetop::after {
	display: block;
	content: "";
	position: absolute;
	width: 45px;
	height: 4px;
	background-color: #fff;
	top: 18px;
}
.pagetop::before {
	-webkit-transform: rotate(-60deg);transform: rotate(-60deg);
	left: -10px;
}
.pagetop::after {
	-webkit-transform: rotate(60deg);transform: rotate(60deg);
	left: 11px;
}
.link-txt {
	display:-webkit-box;display:-webkit-flex;display:flex;
	-webkit-flex-pack:justify;-webkit-justify-content: space-between;justify-content: space-between;
	width: 530px;
	margin: 0 auto;
}
.link-txt-item {
	display: block;
	margin: 20px 0;
	color: #fff;
	font-size: 15px;
}
.copyright {
	color: #fff;
}

@media screen and (max-width:768px) {
	/***[共通]***/
	.wrapper {
		width: 94%;
	}
	.block::after {
		display: none;
	}
	.after768::after {
		display: block;
		content: "";
	}
	.pc-block {
		display:none;
	}
	.sp-block {
		display:block;
	}
	.head-txt a {
		display: block;
		width: 30%;
	}
	.cont-list {
		width:100%;
	}
	.cont-list-item {
		width: 46%;
	}
	.sample {
		width: 100%;
	}
	.cart-btn {
		width: 100%;
		height: auto;
	}
	
	/***[header,main]***/
	.logo {
		width: 100%;
	}
	.w800 {
		width: 100%;
	}
	.intro {
		margin: 40px auto;
	}
	.intro-body {
		line-height: 1.5;
	}
	.intro02 {
		margin: 30px 0;
	}
	.contents {
		margin: 40px auto;
	}
	.sample-sp {
		margin: 40px auto;
	}
	.sample-item-sp {
		margin: 20px auto;
	}
	.chara-sp {
		color: #fff100;
		margin: 0 0 10px;
	}
	.com-sp {
		margin: 10px auto 0;
	}
	.video {
		margin: 40px auto;
	}
	.video-title {
		font-size: 1.5rem;
		text-align: left;
	}
	.cart-btn {
		margin-top: 40px;
	}
	
	/***[footer]***/
	.link-txt {
		display: block;
		width: 100%;
		text-align: center;
	}
	.link-txt .border {
		display: none;
	}
	.link-txt-item {
		margin: 20px 0;
	}
}