@charset "utf-8";
/* CSS Document */

html , body {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	font-size:  clamp(13px,calc(26 / 1000 * 100vw),26px);
	line-height: 0;
}


div.notfind {
	position:fixed;
	width: 100%;
	z-index: 9999;
	/*
	height: 100%;
	*/
	overscroll-behavior: contain;
	height: 100vh;
	scroll-bar-width:none;
	background-image: url("images/bg.png");
	opacity: 1.0;
}

div.notfind::-webkit-scrollbar {
	display: none;
}
	
div.notfind img {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: bottom;
	max-width:400px;
	width:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
	
.loading {
	animation-name: loadingAnime;
	animation-duration:5s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes loadingAnime{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media screen and (max-width:480px){
	div.notfind img {width:70%;}
}
		
#header{
	/*position: relative;*//*h1の中央寄せ配置の起点とするためのrelative*/
	/*height: 100vh;*//*高さを全画面にあわせる*/
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	display: block;
}

h1{
	width: 100%;
	max-width: 40%;
	text-align: center;
	margin: 0 auto;
}

h2{
	width: 100%;
	max-width: 95%;
	text-align: center;
	margin: 0 auto;
}

#video-area{
	position: fixed;
	z-index: -1;/*最背面に設定*/
	top: 0;
	right:0;
	left:0;
	bottom:0;
	overflow: hidden;
}

#video {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*縦横幅指定*/
	width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
	height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
	min-height: 100%;
	min-width: 100%;
}

.container {
	/*background: #fff;
	opacity: 0.8;
	padding: 500px 0;*/
	text-align: center;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	display: block;
}

#fv{padding-bottom: 2rem;}

.fv_txt{
	width: 62.3%;
	margin: 0 auto;
	text-align: center;
}

.fv_pkg{
	width: 75.3%;
	margin: 0 auto;
	text-align: center;
}

#concept,
#concept_bottom{
	position: relative;
	width: 100%;
	max-width: 1920px;
	/*height: 100px;*/
	left: 50%;
	transform: translate(-50%, -0);
	/*margin: 7vh 0 0;*/
	margin: 0;
}

.concept_top_txtbox1{
	position:absolute;
	width: 100%;
	max-width: 1000px;
	/*top:15%;*/
	top: calc( 20% - 1em);
	left: 50%;
	transform: translate(-50%, 0);
	font-size: 0.8rem;
	line-height: 2.0;
	color: #FFF;
	text-align: center;
	text-shadow: 1px 2px 3px #808080;
}

.concept_top_txtbox2{
	position:absolute;
	width: 100%;
	max-width: 1000px;
	/*bottom:15%;*/
	bottom: calc( 20% - 1em);
	left: 50%;
	transform: translate(-50%, 0);
	font-size: 1.0rem;
	line-height: 2.0;
	color: #FFF;
	text-align: center;
	text-shadow: 1px 2px 3px #808080;
}


#features,#qa{
	padding: 5% 0;
	
}

.features_ttl{
	width: 57%;
	margin: 0 auto;
	text-align: center;
}

.features_subttl{
	width: 48.5%;
	margin: 5% auto 1%;
	text-align: center;
}


.features_conts{
	width:100%;
	max-width: 1000px;
	margin: 0 auto 15px;
	display: block;
	background: #FFF;
	border-radius: 15px;
	padding:15px 0;
}

.features_img{
	width:100%;
	max-width: 91.7%;
	margin: 15px auto 0;
	text-align: center;
}

.features_ba{
	width:100%;
	max-width: 1070px;
	margin: 0 auto;
}

.fit_subttl{
	width: 44.5%;
	margin: 5% auto 1%;
	text-align: center;
}

.fit_img{
	width:100%;
	max-width: 1000px;
	margin: 0 auto;
	border-radius: 15px;
}

#magazine{
	width: 100%;
	max-width: 1920px;
	display: block;
	margin: 0 auto;
	position: relative;
	background: #be2a46;
	padding: 5% 0;
	background-image: url("./images/magazine_bg_pc.png");
	background-size: contain;
	background-repeat:no-repeat;
	background-position: bottom;
}

.magazine_ttl{
	width: 91.8%;
	max-width: 918px;
}

.slider {
	text-align: center;
	width: 100%;
	max-width: 1400px;
	margin: 5% auto;
	display: block;
	padding: 0 10px;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


#products{
	background: #FFF;
	padding: 5% 0;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	display: block;
}


.products_ttl{
	width: 41%;
	margin: 0 auto;
	text-align: center;
}

.products_lineup{
	width: 100%;
	list-style: none;
	padding: 0;
	display: block;
	overflow: hidden;
	margin: 5% auto;
}

.products_lineup::after{
	content:"";
	display:block;
	clear:both;
}

.products_lineup li{
	width: calc( 100% / 3);
	float: left;
	margin-bottom: 2rem;
	/*padding:0;*/
}

.products_lineup li h3,.products_lineup li span{
	font-size: 0.6rem;
	line-height: 1.8;
	font-weight: bold;
	margin: 0 auto;
	text-align: left;
	padding-left: 1.2rem;
	display: block;
}

.products_lineup li a{
	text-decoration: none;
	color:#000;
}

.qa_ttl{
	width: 21.3%;
	max-width: 213px;
	text-align: center;
	margin: 0 auto;
}

.qa_area{
	width:100%;
	max-width: 1000px;
	margin: 5% auto;
	background: #fff;
	border-radius: 20px;
	padding: 1% 2%;
	box-sizing: border-box;
}


.accordion-area{
    list-style: none;
	margin:0 auto;
	padding: 0;
}

.accordion-area li{
    margin: 10px 0;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1.2rem;
    font-weight: normal;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 20px;
    height: 5px;
	background-color: #FFF;    
}
.title::before{
    top:48%;
    right: 20px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 20px;
}

/*　closeというクラスがついたら形状変化　*/

.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
}

footer p{
	min-height: 30px;
	width: 100%;
	background: #ee4766;
	text-align: center;
	color: #fff;
	font-size: 0.8rem;
	padding: 40px 0 0;
	margin: 0;
}


#g-nav{
    position:fixed;
    z-index: 999;
	top:0;
    right: -120%;
	width:30%;
    height: 100vh;/*ナビの高さ*/
	background:#ee4766;
	transition: all 0.6s;
}

#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 30%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    position: absolute;
    z-index: 999; 
    top:40%;
    left:50%;
    transform: translate(-50%,-50%);
	padding:0;
	width: 100%;
}

/*リストのレイアウト設定*/
#g-nav li{
	list-style: none;
    text-align: center;
	width: 100%;
}

#g-nav li a{
	color: #fff;
	font-size: 1.0rem;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	/*font-weight: bold;*/
	line-height: 2;
}

a.link_new::after{
	content:url("images/link_new.png");
	display:inline-block;
	background-size: contain;
	vertical-align: middle;
	padding-left: 10px;
	font-size: 10px;
	width: 10px;
	transform: scale(0.8);
}

.yb_logo{
	position: absolute;
	bottom: 1%;
	left:50%;
    transform: translate(-50%,0);
	max-width: 239px;
	width: 100%;
}
/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9998;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
	background: #FFF;
	border-radius: 50%;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
	z-index: 9998;/*ボタンを最前面に*/
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #ee4766;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}


.pc{display: block;margin: 0 auto;}
.sp{display: none;margin: 0 auto;}

@media screen and (max-width: 999px) {
	.pc{display: none;margin: 0 auto;}
	.sp{display: block;margin: 0 auto;}
	.features_conts,.products_lineup,.fit_img,.qa_area{width: 94%;}
	#g-nav,#g-nav.panelactive #g-nav-list{width: 100%;}
	#g-nav li a{font-size: 1.8rem;}
}
@media screen and (max-width: 749px) {
	#magazine{background-image: url("./images/magazine_bg_sp.png");background-size: cover;}
}

@media screen and (max-width: 499px) {
	.products_lineup li{width: calc( 100% / 2);}
	.title::before,.title::after{right:15px;width: 10px;height:2px;}
}