@charset "UTF-8";

/* 共通部分
----------------------*/
html{
    font-size: 100%;
}
body{
    font-family:"ヒラギノ角ゴシック W1", "ヒラギノ角ゴシック W3", "ヒラギノ角ゴシック W2", "ヒラギノ角ゴシック W4", "ヒラギノ角ゴシック W9", "ヒラギノ角ゴシック W8", "ヒラギノ角ゴシック W7", "ヒラギノ角ゴシック W5", "ヒラギノ角ゴシック W6";
    Line-height: 1.7;
    color: #000;
    margin: 0;
	padding: 0;
}
a{
    text-decoration:none;
}

a:link {
  color: #000;
}
a:visited {
  color: #000;
}
a:hover {
  color: #000;
}
a:active {
  color: #000;
}

img{
    max-width:100%;
    margin: 0;
}




/* じわっと画像が表示される ---------　一度追加していたら不要*/
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
 
/*古いブラウザ用　---------　一度追加していたら不要*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*------- // ナビゲーションメニュー //　--------*/

.navimenu {
	position: absolute;
	width: 20px;
	padding: 0;
	padding-top: 3px;
}

/*開くボタン*/
label[for="navi"]{
    position: absolute;
    left: 0; /* 左寄せ */
	width:45px;
	padding: 0;
    z-index: 999;
}

/*inputは隠す*/
input[type="checkbox"]#navi {
    visibility: hidden;
	padding:0;
	margin:0;
	width:0;
	height:0;
}

/*疑似要素で背景*/
input[type="checkbox"]#navi:checked:before{
	width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.40);
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    visibility: visible;
    z-index: 2147483645;
}

/*疑似要素で閉じるボタン*/
input[type="checkbox"]#navi:checked:after{
	width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.80);
    content: "\00d7";
	color: #000;
    text-align: center;
    font-size: 40px;
    line-height: 40px;
    border-radius: 50%;
	visibility: visible;
	display: block;
	z-index: 2147483647;
    position: fixed;
    top: 5px;
    left: 80%;
}

/*iframeを格納*/
input[type="checkbox"]#navi + #cover { 
	width: 80%;
	height: 100%;
	background:rgba(245, 245, 245, 0.1);
    transition: 0.1s ease-in-out;
    position:fixed;
    top:0;
    left: -80%;
}

/*iframeを格納(オープン時)*/
input[type="checkbox"]#navi:checked + #cover {
    overflow:scroll;
	-webkit-overflow-scrolling:touch;
    z-index: 2147483646;
    left: 0;
}

/*iframe*/
input[type="checkbox"]#navi + #cover > iframe {
    width: 100%;
    height: 100%;
    background:#fff;
    border:none;
    z-index: 2147483646;
}



/*------- // 検索フォーム //　--------*/

#search-form {
    padding: 12px;
    margin: 0 auto;
    font-family: メイリオ;
}
#search-form form {
    width: 100%;
    display: table;
    table-layout: fixed;
    font-size: 14px;
}
#search-form input[type=text] {
    display: table-cell;
    width: 100%;
    height: 38px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0;
    -webkit-appearance: none;
}
#search-form .search-button {
    display: table-cell;
    vertical-align: top;
    width: 20%;
}
#search-form .search-button input[type="submit"] {
    width: 100%;
    height: 38px;
    font-weight: bold;
    color: #444;
    border: none;
    background: #ddd;
    padding: 0;
    border-radius: 0;
    -webkit-appearance: none;
}
#search-form .search-keyword {
    list-style: none;
    padding: 0;
    margin: 12px auto 0;
	text-align: center;
}


/* --フォームデザイン-- */
#search-form.design-3 input[type=text] {
    border: 1px solid #111;
}
#search-form.design-3 .search-button input {
    background: #111;
    color: #fff;
    margin-left: 0px;
}
#search-form.design-3 .search-keyword li {
    background: #aaa;
    color: #fff;
    font-weight: bold;
    padding: 3px 12px;
    margin: 5px auto;
	font-size: 12px;
    display: inline-block;
}
#search-form.design-3 .search-keyword a {
    text-decoration: none;
}

.wrapper{
    max-width: 700px;
    margin: 0 auto;
	justify-content: center;
	text-align: center;
}


/*------- // ヘッダー //　--------*/

/* ヘッダー */
#header{
	margin:0 3% 5% 3%;
	vertical-align:middle;
}

.page-header{
    display: flex;
	width: 100%;
    position: relative;
	padding: 15px 0px 25px 0px;
}

.page-header p {
	font-size:0.6rem; 
	font-weight:bold;
	color: #000;
    text-align: left;
	margin: 0 auto;
	padding: 0;
	white-space: nowrap;
}

.logo{	
    width:30%;
	left: 8%;
	position: absolute;
}



/*------- // メインコンテンツ //　--------*/

/* 共通 */
.main-content{
    max-width:100%;
    margin-top: 3%;
    text-align: center;
    padding: 0;
}


/* バナー */

.bn_wrap{
	position: relative;
	margin: 0 auto;
	padding: 0;
}


.absolute {
    position: absolute;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	right: 0;
	top: 0;
	animation: fadeIn 8s ease 0s 1 normal;
    -webkit-animation: fadeIn 8s ease 0s 1 normal;
}



.mozi{
	width: 100%;
	height:auto;
	padding: 0;
	margin: 0 auto;
	top: 0;
	overflow: hidden;
	position:absolute;
	z-index: 100;
	animation: fadeIn 3s ease 0s 1 normal;
	-webkit-animation: fadeIn 3s ease 0s 1 normal;
}


.fadeslide {
	position: relative;
	width: 100%;
	height:auto;
	margin: 0 auto;
	padding: 70% 0;
	overflow: hidden;
	z-index: 0;
}

.fadeslide div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0;
	animation: fadeslide 20s infinite;
}

.fadeslide div:nth-of-type(1) {
	/*animation: fadeslide 20s 1s infinite both;*/
	z-index: 6;
}

.fadeslide div:nth-of-type(2) {
	animation-delay  : 5s;
	z-index: 5;
}

.fadeslide div:nth-of-type(3) {
	animation-delay  : 10s;
	z-index: 4;
}

.fadeslide div:nth-of-type(4) {
	 animation-delay  : 15s;
	z-index: 3;
}

@keyframes fadeslide {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}

/* 文字部分 */
@keyframes load {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


.table-center {
	display: table;
	width: 100%;
	height:auto;
	margin: 0 auto;
	padding: 50% 0;
}


section{
	width: 100%;
	margin: 10% auto;
	margin-bottom: 30%;
}

.comment_img{
	width: 100%;
	margin: 3% auto;
	padding: 0;
}

.comment_img:last-child{
	margin-bottom: 10%;
}


.titleimg{
	width: 95%;
	margin: 0 auto;
	margin-top: 5%;
	margin-bottom: -3%;
}

.titleimg img{
	width: 95%;
}

.wake_img{
	width: 100%;
	margin: 1% auto;
	padding: 0;
}

.wake_img :first-child{
	margin-top: 0;
}

.newitem{
	width: 48%;
	margin: 2% 1%;
}

.item_warp_a{
	width: 100%;
	margin: 5% auto;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
}

.topitem{
	width: 31%;
	margin: 3% 1%;
}

.allitemimg{
	width: 80%;
	margin: 0 auto;
}

.review{
	background:#F4F6F5;
	padding-top: 7%;
	padding-bottom: 4%;
}

.reviewimg{
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.scene{
	margin-top: -10%;
	margin-bottom: 5%;
}

.scene_img{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	margin-top: 5%;
}


/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}
 
/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
 

.title{
	width: 80%;
	margin-top: 30%;
	margin-bottom: 7%;
}


/* 小物 */
.komono_item{
	width: 100%;
	padding-bottom: 10%;
	align-content: center;
	justify-content: center;

}

/* --スワイプ--*/
.swiper-container {
	width: 100%;
	height: 100%;
	outline: none;
	padding-bottom: 15% !important;

}

.swiper-slide {
	display: grid;
	grid-template-rows: 50% 50%;
	grid-template-columns: 100%;
}


.item_main {
	padding: 5% 1%;
	margin-bottom: -7%;
}

.item_main img{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	justify-content: center;
}

.item_line{
	width: 100%;
}

.item_line ul{
	width: 100%;
	margin: 0 auto;
	padding:0;
	text-align: center;
	display: flex;
	flex-flow: wrap;
	list-style:none;
	justify-content: center;
}

.item_line ul > li{
	width: 30%;
	margin: 0 1%;
	padding: 0;
	
}

.swiper-pagination {
	margin: 0 auto;
	padding: 0;
	bottom: 0;
}

.swiper-button-prev,.swiper-button-next{
	outline: none;
	position:absolute;
	margin:0;
	top:0.3%;
	height:100%;
	padding:0 1%;
	z-index:10;
	cursor:pointer;
}




/*---- イメージ　----*/

.image{
	width: 100%;
	margin: 3% auto;
	align-content: center;
	text-align: center;
	overflow: hidden;
}

.ykttop{
	width: 100%;
	margin: 10% auto;
	padding: 15% 0;
	padding-top: 0;
	position: relative;
	overflow: hidden;
}
		
.front{
	position: absolute;
	left: 0;
}

.ab{
	padding-bottom: 0;
}

.cde{
	padding-bottom: 35%;
}

.d{
	top: 60%;
}

.e{
	top: 70%;
}

.h,.i{
	top: 40%;
}

.jk{
	padding-bottom: 15%;
}

.k{
	bottom: 0%;
}

.lmn{
	padding-bottom: 15%;
}

.m{
	top: 10%;
}

.n{
	top:13%;
}

.op{
	padding-bottom: 5%;
}

.p{
	top: 5%;
}

.qrs{
	padding-bottom: 65%;
}

.r{
	bottom: 0%;
}

.s{
	top:25%;
}
			
.u,.v{
	top: 0%;
}

.wx{
	padding-bottom: 20%;
}
				
.x{
	top:25%;
}

.yz{
	padding-bottom: 20%;
}

.z{
	top:45%;
}


/*------- // スタイルブック //　--------*/


.stylebook_wrapper{
	width: 100%;
	margin: 10% auto;
	margin-bottom: 25%;
	justify-content: center;
}

/*タブ切替表示*/
.tab-container{
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 0;
	justify-content: center;
	width: 100%;

}

.tab-title{
	color: #000;
	white-space: nowrap;
	text-align: center;
	letter-spacing: 1.5px;
	font-size: 0.7rem;
	font-weight: 600;
	margin: 0 5%;
	margin-bottom: 5%;
	padding:1% 0;
	order: -1;
	position: relative;
	z-index: 1;
	cursor: pointer;
	flex: 1;
}

.tab-title:not(:last-of-type) {
	margin-right: 5px;
}

.tab-switch:checked+.tab-title {
	border-bottom: solid 1px rgba(0,0,0,1.00);
}

.tab-switch { /*ラジオボタン非表示*/
	display: none;
}


.tab-container .tab-body > div {
	visibility:hidden;
	height:0;
}

.tab-body {
	width: 100%;

}

/*タブのコントロール*/
.tab-container #tab1:checked ~ .tab-body > .body1 {
	visibility:visible;
	height:auto;
	
}
.tab-container #tab2:checked ~ .tab-body > .body2 {
	visibility:visible;
	height:auto;
}
.tab-container #tab3:checked ~ .tab-body > .body3 {
	visibility:visible;
	height:auto;
}
.tab-container #tab4:checked ~ .tab-body > .body4 {
	visibility:visible;
	height:auto;
}

/*　タブの中身　スライダー　*/

.book-container {
	width: 100%;
	height: 100%;
}

.book_slide {
	grid-template-rows: 100% ;
	grid-template-columns: 33% 33% 33%;
}

.book_slide div {
	padding: 0 5%;
	padding-bottom: 30%;
}

.book_slide div > img{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	justify-content: center;
}

.book_pagination{
	bottom: 10%;
	margin: 0 auto;
	padding: 0;
}


.swiper-button-prev .swiper-button-next{
	outline: none;
}



.item_contens{
	width: 100%;
	margin: 0 auto;
	margin-top: 10%;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
}

.tab-wrap {
	width: 100%;
	margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.tab-label {
	width: 25%;
    color: #000;
	margin: 1% 0;
	margin: 0 auto;
	padding: 2% 1%;
    order: -1;
	font-size: 0.6rem;
}

.tab-content {
    width: 99%;
	margin:0 auto;
	margin-top: 3%;
    display: none;
}

/* アクティブなタブ */
.tab-switch:checked+.tab-label {
	border-bottom: #000 solid 1px;
	font-weight: 900;
}
.tab-switch:checked+.tab-label+.tab-content {
     display: block;
}

.tab-switch {
    display: none;
}

/* タブホバー */
.tab-label:hover{
	opacity: 0.5;
}

/*　コンテンツ */

.recommend_item{
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.recommend_item ul{
	width: 100%;
	margin: 3% auto;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style:none;
}

.recommend_item li{
	width: 45%;
	list-style:none;
	padding: 0;
	margin: 1% auto;
}


.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 140px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	font-size: 0.7rem;
	position: absolute;
	z-index: 2;
	left: 50%;
	margin: 0 auto;
	padding: 0;
	width: 12rem;
	content: '▼ もっとみる ▼';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	bottom: -10%;
	color: #ffffff;
	background-color:#4F4E49;

}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 28rem; /* 開く前に見えている部分の高さ */
	transition: all 2s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
	height: 3%;
}
.cp_box input:checked + label:after {
	content: '× 閉じる';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 18%; /* 閉じるボタンのbottomからの位置 */
	transition: all 2s;
}

.firstrow{
	width: 48%;
	position: relative;
}

.secondrow{
	width: 31.3%;
	position: relative;
}

.recommend_item p{
	width: 100%;
	font-size: 0.75rem;
	margin: 1% auto;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.6px;
}

.fixed_top{
	position:fixed;
	width: 100%;
	z-index:999;
	transition: all 0.5s;
	opacity:0;/* 最初読み込んだときは透過 */
	top: -200px;
	background: #FFF;
	border-bottom: 1px solid #000;
}

.fixed_top ul{
	overflow:hidden;
	padding:0;
	margin:0;
	text-align: center;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
}

.fixed_top li{
	list-style-type:none;
	width:14.2%;
	border-top: 0;
}

.fixed_top a{
	margin: auto;
	font-size: 0.5rem;
	letter-spacing: 0.1px;
	padding: 20% 0;
	display: block;
	text-align:center;
	text-decoration:none;
	color:#000;
	vertical-align: middle;
}

.fixed_top a:hover{
	background-color:#000;
	color:#FFF;
	opacity:1;
}

.fixed_top li+li{
	border-left: 0.1px solid #000;
}

.fixed_bottom{
	position: fixed;
	width: 100%;
	z-index:888;
	background-color:#000;
	transition: all 0.5s;
	opacity:0;/* 最初読み込んだときは透過 */
	bottom: -200px;
}

.fixed_bottom ul{
	overflow:hidden;
	max-width: 500px;
	padding:0;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.fixed_bottom li{
	list-style-type:none;
	width: 23%;
	margin: 0 1px;
	padding: 0;
	padding-top: 2px;
}

.fixed_bottom a{
	text-align:center;
	margin: 0 ;
	padding: 0;
}

.fixed_bottom img{
	text-align:center;
	margin: 0;
	padding: 0;
}

.fixed_bottom a:hover{
	opacity: 0.8;
}


/*Q&Aアコーディオンここから*/
.accbox {
    margin: 1% auto;
	margin-bottom: 20%;
	width: 90%;
	justify-content: center;
}

/*ラベル*/
.accbox label {
    display: block;
	text-align: left;
	margin: 4% auto;
	padding: 1% 0;
	font-size: 0.7rem;
	border-bottom: 1px  rgba(0,0,0,0.59) solid;
    cursor :pointer;
    transition: all 0.8s;
}

/*アイコンを表示*/
.accbox label:before {
    content: "▷";
    /*font-family: 'FontAwesome'; */
    padding-right: 8px;
	position: relative;
	width: 16px;
	/*background-image:url(../img/qa_right.png); */
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    opacity: 1;
}

.accshow{
	width: 100%;
	justify-content: center;
	margin: 2% auto;
	letter-spacing: 1px;
}

.accbox .accshow p {
    margin: 8% 0;
	font-size: 0.7rem;
    font-weight: bold;
	text-align: left;
    background: linear-gradient(transparent 70%, yellow 70%);
}
	
.answer {
	text-align: left;
	font-size: 0.7rem;
	margin-bottom: 13%;
}
	
	
/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: "▽";
	position: relative;
	width: 16px;
}

.answer_span {
	color:#C70003;
    font-weight: bold;
}

/*Q&Aアコーディオンここまで*/


.back-top{
	width: 12%;
	max-width: 50px;
	padding: 0;
	margin: 10% auto 0;
	position:fixed;
	right: 6%;
	bottom: 13%;
	z-index: 100;
}

/* footer */
footer{
	width: 100%;
	margin: 0 auto;
	display: block;
	padding: 0;
	padding-bottom: 10%;
	background: rgba(197,197,197,0.3);
}
footer p{
	text-align: center;
	margin: 2px auto;
	margin-bottom: 0;
	font-size: 0.7rem;
	font-weight: 500;
}


.footer-logo{
	width: 45%;
	max-width: 250px;
	margin: 0 auto;
	padding: 10% 0;
	padding-bottom: 4%;
	text-align: center;
}
.footer-logo img{
	margin: 0 auto;
}
.footer-box{
	display: flex;
	justify-content: space-evenly;
	margin: 0 auto;
	padding: 1% 0;
}
.footer-box ul{
	display: flex;
	list-style: none;
	margin: 3% auto;
	padding: 0;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
	width: 100%;
	max-width: 600px;
	margin-bottom: 1%;
}

.footer-box li{
	width: 28%;
	margin: 1%;
	font-size: 0.7rem;
	font-weight: 600;
}


.footer_box2{
	width: 100%;
	margin: 8% auto;
	margin-bottom: 10%;
}

.footer_box2 p{
	line-height: 1.8;
}

/*　PC用 */

@media screen and (min-width: 768px) {
	.main-content{
		max-width: 700px;
	}
	
	footer{
		padding-bottom: 1%;
	}
	
	.footer-logo{
	padding: 5% 0;
	padding-bottom: 0%;
	}
	
	.footer_box2{
		margin: 2% auto;
		margin-bottom: 3%;
	}
}