@charset "UTF-8";

/* ---------------------------------------
  基本情報
-----------------------------------------*/
html,body{	height:100%;}
html{
	font-size:62.5%;
    overflow-y: scroll;
}
*,*:after,*:before{
	box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form ,figure{
	margin: 0;
	padding: 0;
	border: none;
	line-height: 100%;
	list-style-type: none;
	font-style: normal;
	font-weight: normal;
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
}
input, button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
select::-ms-expand {
	display: none;
}
textarea{
	resize: vertical;
}
button{
	cursor: pointer;
}

a {
	color: #000;
	text-decoration: none;
	transition: opacity 0.3s ease;
	outline: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
a img {
	outline: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
img{
	vertical-align: bottom;
	max-width: 100%;
}

@media screen and (min-width: 769px) {
	.sp{
		display: none!important;
	}
}
@media screen and (max-width: 768px) {
	.pc{
		display: none!important;
	}
	img{
		width: 100%;
	}
}


/* マウスオーバー
--------------------------------*/
@media screen and (min-width: 769px) {
	.fade:hover,a:hover img{
		opacity: 0.7;
	}
	.fade,a img{
		transition: opacity 0.3s ease-out;
	}
}


/* base
--------------------------------*/
body {
	color: #000;
	min-width: 1180px;
	font-size: 1.0rem;
}
section {
	position: relative;
}
.wrap{
  width: 830px;
	margin: 0 auto;
	position: relative;
}
p,th,td,dt,dd,li,input,button,textarea {
	font-size: 1.4rem;
	line-height: 1.8;
}
.flex {
	display: flex;
  flex-wrap: wrap;
	justify-content: space-between;
}
.left{
	float: left;
}
.right{
	float: right;
}
.center{
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.a_right{
  text-align: right;
}
.a_center{
  text-align: center;
}
.txt_small{
  font-size: 1.2rem;
}
.txt_blue{
  color: #00b9cd;
}
.link_txt{
  text-decoration: underline;
  color: #c2003f;
}
.bold{
  font-weight: bold;
}
.fixed {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 768px) {
	body {
		min-width: inherit;
	}
	.wrap{
		width: 100%;
	}
}


/* ----------------------------------------------------------------------------------------------------
*  ヘッダー
* --------------------------------------------------------------------------------------------------*/
header{
	overflow: hidden;
}
#header{
	width:100%;
	height: 130px;
	background: #fff;
}
#header.fixed{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
#header .wrap{
	width: 100%;
	height: 130px;
}
#header .logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 9999;
}
#header .logo a{
	display: block;
}
#header .toggle{
	width: 42px;
	height: 38px;
	top: 50%;
	right: 3.5%;
	position: absolute;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	transform: translateY(-50%);
	z-index: 9999;
	transition: opacity 0.3s ease;
}
#header .toggle:hover{
	opacity: .7;
}
#header .toggle span{
	width:100%;
	height:6px;
	background-color: #000;
	position:absolute;
	border-radius: 3px;
	left: 0;
}
#header .toggle.open span:nth-child(1){
	top: 0;
}
#header .toggle.open span:nth-child(2){
	top: 16px;
}
#header .toggle.open span:nth-child(3){
	bottom: 0;
}

#header .toggle.close{
	width: 70px;
	height: 87px;
	top: 0;
	right: auto;
	background: #323232;
	transform: none;
	z-index: 9999;
}
#header .toggle.close span{
	width:30px;
	height:4px;
	background-color: #fff;
	position:absolute;
	border-radius: 3px;
	left: 20px;
}
#header .toggle.close span:nth-child(1){
	top: 40px;
	transform: rotate(45deg);
}
#header .toggle.close span:nth-child(2){
	top:40px;
	transform: rotate(-45deg);
}

#header .header_nav {
	position: fixed;
	top: 0;
	right: -530px;
	background: #f4f4f4;
	width: 530px;
	height: 100%;
	z-index: 9999;
	overflow: hidden;
	height: 100%;
	transition: .35s ease-in-out;
	padding: 40px 40px 0 0;
}

#header.active .header_nav {
	right: 0;
}
#header .header_nav .menu {
	overflow-y: scroll!important;
	width: 350px;
	height: 100%;
	margin-left: auto;
	padding-bottom: 90px;
	-ms-overflow-style: none;    /* IE, Edge 対応 */
  scrollbar-width: none;  
}
#header .header_nav .menu::-webkit-scrollbar {
	display: none;
}
#header .header_nav .menu > li {
	border-bottom: 1px solid #565353;
}
#header .header_nav .menu li a {
	display: block;
	font-size: 2.4rem;
	color: #565353;
	padding: 1em 0 1em .4em;
	transition: opacity 0.3s ease;
}
#header .header_nav .menu li a:hover{
	opacity: .7;
}
#header .header_nav .menu ul.child a {
	padding: 1em 0 1em 1.4em;
}
@media screen and (max-width: 768px) {
	#header{
		height: 50px;
		background: transparent;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}
	#header.fixed{
		background: #fff;
	}
	#header .wrap{
		height: 50px;
	}
	#header .toggle{
		width: 28px;
		height: 24px;
		top: 50%;
		right: 3.5%;
		background: transparent;
	}
	#header .toggle span{
		height:4px;
		background-color: #fff;
		border-radius: 2px;
	}
	#header.fixed .toggle span{
		background: #000;
	}
	#header .toggle.open span:nth-child(1){
		top: 0;
	}
	#header .toggle.open span:nth-child(2){
		top: 10px;
	}
	#header .toggle.open span:nth-child(3){
		bottom: 0;
	}
	
	
	#header .toggle.close{
		width: 50px;
		height: 60px;
		top: 1%;
		left: 2%;
	}
	#header .toggle.close span{
		width:26px;
		height:4px;
		border-radius: 23px;
		left: 13px;
		background: #fff;
	}
	#header .toggle.close span:nth-child(1){
		top: 28px;
	}
	#header .toggle.close span:nth-child(2){
		top:28px;
	}

	#header .header_nav {
		right: -76vw;
		width: 76vw;
		padding: 4% 4% 0 0;
	}

	#header .header_nav .menu {
		width: calc(94% - 50px);
		padding-bottom: 18%;
	}
	#header .header_nav .menu li a {
		font-size: 3.53vw;
	}
}

/* ------------------------------
    mv
------------------------------ */
#mv{
	width: 100%;
	height: 740px;
	background: #1b1a1b;
	position: relative;
}
#mv .wrap{
	width: 100%;
	height: 100%;
	position: relative;
}
#mv .mv_img{
	width: 2000px;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translatex(-50%);
}
#mv .mv_txt{
	position: absolute;
	top: 130px;
	left: calc(50% - 570px);
	
}

@media screen and (max-width: 768px) {
	#mv{
		height: auto;
	}
	#mv .mv_img{
		width: 100%;
		position: static;
		transform: none;
	}
	#mv .mv_txt{
		width: 27.5%;
		top: 7.35%;
		left: 50%;
		transform: translatex(-50%);
		

	}
}

/* ------------------------------
    opt
------------------------------ */
#opt{
	padding: 147px 0 65px;
}
#opt .flex{
	align-items: flex-end;
}
#opt .secttl{
	margin-bottom: 56px;
}
#opt .txt01{
	margin-bottom: 78px;
}
#opt .btn{
	margin-top: 28px;
}
#opt .img02{
	width: 100%;
	margin-top: 80px;
}

#opt.opt2{
	padding: 155px 0 56px;
}
@media screen and (max-width: 768px) {
	#opt{
		padding: 12.9% 0 8%;
	}
	#opt .wrap{
		width: 82.5%;
	}
	#opt .flex .opt_l{
		width: 50%;
	}
	#opt .secttl{
		width: 88%;
		margin-bottom: 24.6%;
	}
	#opt .txt01{
		width: 84.1%;
		margin-bottom: 24.6%;
	}
	#opt .txt02{
		width: 86%;
	}
	#opt .flex .img01{
		width: 50%;
	}
	#opt .btn{
		width: 100%;
		margin-top: 3.9%;
	}
	#opt .img02{
		width: 100%!important;
		margin-top: 6%;
	}
	
	#opt.opt2{
		padding: 20% 0 14%;
	}
}

/* ------------------------------
    info
------------------------------ */
#info{
	padding: 65px 0 85px;
}
#info .secttl{
	margin-bottom: 56px;
}
#info .img01{
	margin-bottom: 85px;
}
@media screen and (max-width: 768px) {
	#info{
		padding: 8% 0 9.7%;
	}
	#info .secttl{
		margin-bottom: 8%;
	}
	#info .img01{
		margin-bottom: 11.02%;
	}
}

/* ------------------------------
    recommended
------------------------------ */
#recommended{
	padding: 96px 0;
	background: url(../img/bg_recommended.jpg) no-repeat center / cover;
}
#recommended .secttl{
	margin-bottom: 86px;
}
@media screen and (max-width: 768px) {
	#recommended{
		padding: 16.32% 0 42.64%;
		background: url(../img/bg_recommended_sp.jpg) no-repeat center / cover;
	}
	#recommended .secttl{
		margin-bottom: 86px;
	}
}

/* ------------------------------
    secret
------------------------------ */
#secret{
	padding: 90px 0 0;
}
#secret .subttl{
	position: absolute;
}

/*secret_01*/
#secret .secret_01{
	position: relative;
	margin-top: 58px;
}
#secret .secret_01 .subttl{
	right: calc(50% - 598px);
	top: -74px;
}
#secret .secret_01 .secret_01_1{
	padding: 92px 0 0;
	background: url(../img/bg_secret_01_1.png) no-repeat center / cover;
}

#secret .secret_01 .secret_01_2{
	padding: 68px 0 52px;
	background: url(../img/bg_secret_01_2.png) no-repeat center / cover;
}
#secret .secret_01 .secret_01_2 .flex{
	width: 864px;
	margin-top: 62px;
}

/*secret_02*/
#secret .secret_02{
	position: relative;
}
#secret .secret_02 .subttl{
	right: calc(50% - 542px);
	top: -33px;
}
#secret .secret_02 .secret_02_1{
	padding: 77px 0 136px;
	background: url(../img/bg_secret_02_1.png) no-repeat center / cover;
}

#secret .secret_02 .secret_02_2{
	padding: 88px 0 150px;
	background: url(../img/bg_secret_02_2.png) no-repeat center / cover;
}
#secret .secret_02 .secret_02_2 .img03{
	margin-top: 72px;
}

/*secret_03*/
#secret .secret_03{
	position: relative;
}
#secret .secret_03 .subttl{
	right: calc(50% - 583px);
	top: -28px;
}
#secret .secret_03 .secret_03_1{
	padding: 77px 0 60px;
	background: url(../img/bg_secret_02_1.png) no-repeat center / cover;
}
#secret .secret_03 .secret_03_2{
	padding: 78px 0 60px;
	background: 
		url(../img/bg_secret_03_2.png) no-repeat center / cover;
}
#secret .secret_03 .secret_03_2 .img02{
	margin-left: auto;
}
#secret .secret_03 .secret_03_3{
	padding: 58px 0 63px;
	background: #f4f4f4;
}
#secret .secret_03 .secret_03_3 .flex{
	width: 864px;
}
#secret .secret_03 .secret_03_4{
	padding: 75px 0 80px;
}
@media screen and (max-width: 768px) {
	#secret{
		padding: 25% 0 0;
	}

	/*secret_01*/
	#secret .secret_01{
		margin-top: 21.17%;
	}
	#secret .secret_01 .subttl{
		width: 58%;
		right: 1.8%;
		top: -1.4%;
	}
	#secret .secret_01 .secret_01_1{
		padding: 44.11% 0 6.6%;
		background: url(../img/bg_secret_02_1_sp.png) no-repeat left top -6.5% / 100% auto;
	}
	#secret .secret_01 .secret_01_1 .ttl{
		margin-bottom: 17.64%;
	}

	#secret .secret_01 .secret_01_2{
		padding:  6.6% 0 0;
		background: #fff;
	}
	#secret .secret_01 .secret_01_2 .img01{
		width: 73.52%;
		margin-left: 8%;
	}
	#secret .secret_01 .secret_01_2 .img02{
		margin-bottom: 15.8%;
	}
	#secret .secret_01 .secret_01_2 .flex{
		width: 100%;
		display: block;
		margin-top: 11.76%;
		background: url(../img/bg_secret_01_2.png) no-repeat center / cover;
		padding: 18.6% 0 17.05%;
	}

	/*secret_02*/
	#secret .secret_02 .subttl{
		width: 43.38%;
		right: 8%;
		top: -.6%;
	}
	#secret .secret_02 .secret_02_1{
		padding: 30.14% 0 11.02%;
		background: url(../img/bg_secret_02_1_sp.png) no-repeat left top -6.5% / 100% auto;
	}
	#secret .secret_02 .secret_02_1 .ttl{
		margin-bottom: 8.8%;
	}
	#secret .secret_02 .secret_02_2{
		padding: 20.8% 0 47.5%;
	}
	#secret .secret_02 .secret_02_2 .img03{
		margin-top: 17.64%;
	}

	/*secret_03*/
	#secret .secret_03 .subttl{
		width: 67.2%;
		right: 6%;
		top: -.4%;
	}
	#secret .secret_03 .secret_03_1{
		padding: 38.2% 0 21.7%;
		background: url(../img/bg_secret_02_1_sp.png) no-repeat left top -6.5% / 100% auto;
	}
	#secret .secret_03 .secret_03_1 .ttl{
		margin-bottom: 4.4%;
	}
	#secret .secret_03 .secret_03_2{
		padding: 0;
		background: none;
	}
	#secret .secret_03 .secret_03_2 .img02{
		margin-bottom: 21.4%;
	}
	#secret .secret_03 .secret_03_3{
		padding: 13.8% 0 26.76%;
	}
	#secret .secret_03 .secret_03_3 .flex{
		width: 100%;
		display: block;
	}
	#secret .secret_03 .secret_03_3 .img03{
		margin-bottom: 22%;
	}
	#secret .secret_03 .secret_03_4{
		padding: 16.32% 0 14.8%;
	}

}

/* ------------------------------
    howto
------------------------------ */
#howto{
	padding: 74px 0 90px;
	background: url(../img/bg_howto.png) no-repeat center / cover;
}
#howto .secttl{
	margin-bottom: 54px;
}
#howto .flex{
	margin-top: 66px;
	align-items: flex-end;
}
@media screen and (max-width: 768px) {
	#howto{
		padding: 23.67% 0 22.94%;
		background: url(../img/bg_howto_sp.png) no-repeat center / cover;
	}
	#howto .secttl{
		margin-bottom: 6.3%;
	}
	#howto .flex{
		margin-top: 13.67%;;
		display: block;
	}
	#howto .img01{
		margin-bottom: 23.23%;
	}
}

/* ------------------------------
    voice
------------------------------ */
#voice{
	padding: 104px 0 114px;
}
#voice .secttl{
	margin-bottom: 68px;
}
#voice .flex > div:nth-child(n+3){
	margin-top: 124px;
}
#voice .img05{
	margin-top: 78px;
}
@media screen and (max-width: 768px) {
	#voice{
		padding: 20.44% 0 19.7%;
	}
	#voice .secttl{
		margin-bottom: 19.26%;
	}
	#voice .flex > div:nth-child(n+3){
		margin-top: 0;
	}
	#voice .img05{
		width: 61.17%;
		margin: 0 auto;
	}
}

/* ------------------------------
    story
------------------------------ */
#story .wrap{
	padding: 84px 0 90px;
	background: #f0f7fa;
}
#story .secttl{
	margin-bottom: 40px;
}
#story .img01{
	margin-bottom: 64px;
}
@media screen and (max-width: 768px) {
	#story .wrap{
		padding: 14.26% 0 20.44%;
	}
	#story .secttl{
		margin-bottom: 12.64%;
	}
	#story .img01{
		margin-bottom: 0;
		margin-top: 19.11%;
	}
}


/* ------------------------------
    faq
------------------------------ */
#faq{
	padding: 84px 0 186px;
}
#faq .secttl{
	margin-bottom: 72px;
}
#faq .flex > div:nth-child(n+3){
	margin-top: 80px;
}
@media screen and (max-width: 768px) {
	#faq{
		padding: 17.64% 0 20%;
	}
	#faq .secttl{
		margin-bottom: 21.76%;
	}
	#faq .flex > div:nth-child(n+3){
		margin-top: 0;
	}
}


/* ------------------------------
    footer
------------------------------ */
footer{
	background: #aec4cd;
	padding: 25px 0 20px;
}
footer .f_nav{
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}
footer .f_nav li:not(:last-child)::after{
	content: "|";
	color: #fff;
	font-size: 1.9rem;
	margin: 0 .5em;
}
footer .f_nav li a{
	color: #fff;
	font-size: 1.9rem;
}
footer .copyright{
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
	line-height: 1.76;
}
@media screen and (max-width: 768px) {
	footer{
		padding: 3vw 0;
	}
	footer .f_nav{
		margin-bottom: 3vw;
	}
	footer .f_nav li:not(:last-child)::after{
		font-size: 3.1vw;
	}
	footer .f_nav li a{
		font-size: 3.1vw;
	}
	footer .copyright{
		font-size: 2.5vw;
	}
}


/* ------------------------------
    clearfix
------------------------------ */

.cf:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.cf {display: inline-block;}

/* Hides from IE Mac */
* html .cf {height: 1%;}
.cf {display:block;}
/* End Hack */