@charset "utf-8";
/* CSS Document */
p body {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
body{
	background-color: #f1edeb;
}
.pcArea{
    display: none;
}
/*========= 背景動画設定のCSS ===============*/
/*header設定*/
#header {
  position: relative; /*h1の中央寄せ配置の起点とするためのrelative*/
  height: 100vh; /*高さを全画面にあわせる*/
}
#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%;
}
.mbArea {
  width: 390px;
  margin-left: auto;
  margin-right: auto;
  background-color:#f1edeb;
  overflow: hidden;
}
/*******************************************************/
/***********ヘッダー写真のサイズ***********/
/*ロゴ画像のサイズ*/
header img{
	width:90px;
	height:90px;
}
/*トップの画像のサイズ*/
.top img{
	width: 350px;
	height: 320px;
}
/*トップの画像とテキストがその場で出現するアニメーション*/
.fadeIn{
animation-name:fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}
/***********design of your life***********/
.top{
	position: relative;/*親要素*/
}
/**********************/
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/**********************/
/*トップのテキスト（2行分）*/
.top h1{
	position: absolute;
	top: 280px;
	left: 200px;
	font-size: 25px;
	font-weight: bold;
	color: #9E5E5F;
}
.top h2{
	position: absolute;
	top: 310px;
	left: 250px;
	font-size: 25px;
	font-weight: bold;
	color: #9E5E5F;
}
/************************************/
/*暮らしをデザインするチェア誕生*/
.title{
	font-size:23px;
	padding: 70px 50px 70px 90px;
	color: #10295b;
}
/*スクロールの動くアイコン*/
/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.title_scroll{
	display: flex;
	position: relative;
}
.scrolldown1{
	position:absolute;
	left:4%;
	top:65%;
    /*全体の高さ*/
	height:50px;
}
/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color:#353030;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background:#353030;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}
/**********************************************/
/*スライド*/
.subtitle img{
	width: 70%;
	height: 50%;
}
/*１枚目*/
.first.subtitle p{
  writing-mode: vertical-rl;
  text-orientation: sideways;
	margin: 20px;
}
.first {
	position: relative;
	max-width: 630px;
	width: 100%;
	display: flex;
}
.background_1{
	margin-bottom: 20px;
}
.first img {
	display: block;
	margin-top: 15px;
}
.first::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: -1;
}
.background_1{
	width: 80%;
	height: 200px;
	background-color: #86acc3d6;
}
/*２枚目*/
.second.subtitle p{
  writing-mode: vertical-rl;
  text-orientation: sideways;
	transform: rotate(-180deg);
  margin: 20px;
}
.background_2{
	text-align: right;
}
.second {
	position: relative;
	text-align: right;
	max-width: 630px;
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
}
.second img {
	display: block;
	margin-top: 50px;
}
.second::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: -1;
}
.background_2{
	width: 80%;
	height: 250px;
	margin-left: 80px;
	background-color: #3a6a86d6;
}
/*========= 背景色の動きのCSS ===============*/

/*背景色が伸びて出現 共通*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;  
}
}
/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
/*--------- 左から --------*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #86acc3d6;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}
/*--------- 右から --------*/
.bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #3a6a86d6;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}
/*スライドここまで*/

/*h3のテキスト*/
h3{
  margin: 70px 0 30px 0;
　font-size: 20px;
　text-align: center;
  position: relative;
  padding: 1.5rem 2rem;
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
}
h3:before,
h3:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
}
h3:before {
  top: 0;
}
h3:after {
  bottom: 0;
}
/***************************************/
/*商品説明の上の写真*/
.explanation_img{
	text-align: center;
	margin-bottom: 40px;
}
/*写真サイズの設定*/
.explanation_img img{
	width:50%;
	height:50%;
}
/*商品説明テキスト*/
.explanation{
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
	margin: 0 20px;
	margin-bottom: 30px;
}
/*********最後の写真交互配置***********/
/*3枚目*/
.background_3{
	width: 80%;
	height: 280px;
	background-color:#e8dbc2;
	display: flex;
}
.background_3 img{
	width: 60%;
	height: 80%;
	margin-top: 30px;
}
.background_3  p{
	margin:110px 0 0 20px;
	color:#a77c29;
}
/*4枚目*/
.background_4{
	margin:20px 0 20px 80px;
	position: relative;
	width: 80%;
	height: 250px;
	background-color: #d7b87b;
	display: flex;
	flex-direction: row-reverse;
}
.background_4 img{
	width: 50%;
	height: 80%;
	margin-top: 25px;
}
.background_4 p{
  margin:135px 25px 0 20px;
  color:#63460e;
}
/*************************************/
/*購入ボタン*/
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ddd4d5;
  font-size: 18px;
  border-radius: 0px;
  width: 240px;
  height: 35px;
  font-weight: bold;
  transition: 0.3s;
 box-shadow: 10px 5px 0px 0px rgba(152, 152, 152, 1);
  background-color: #0a2559;
	margin: 50px auto;
}

.button:active{
  box-shadow: 0 0 #DDD4D5;
  color:#1E1E1E;
  background-color:#DDD4D5;
}
/******値段・送料無料テキスト*********/
.value{
	text-align: center;
	margin-top: 60px;
}
/*Infinity Chair*/
.value h4{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}
/*¥18,500~(税込)/1脚*/
.value h5{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 40px;
}
/*当サイトより<br>ご購入いただいた方に限り*/
.value h6{
	font-size: 15px;
	margin-bottom: 20px;
}
/*全国どこでも送料無料!*/
.value h7{
	font-size: 25px;
	font-weight: bold;
}
/*（離島・一部地域への配送は<br>対象外となる場合がございます<br>&#8251;通常配送料金となります）*/
.value p{
	font-size: 12px;
    line-height: 1.5;
	margin-top: 10px;
}
/***********インテリアモデル*******************************/
/*全体を中央寄せ*/
.interiormodel li{
	text-align: center;
}
/*文字の間隔*/
.interiormodel li p{
	margin: 20px;
}
/*写真のサイズ*/
.interiormodel li img{
	width: 300px;
	height: 200px;
}
/*モデル1*/
.model_1{
	padding: 20px;
}
/*モデル2*/
.model_2{
	padding: 20px;
}
/*モデル3*/
.model_3{
	padding: 20px;
}
/*モデル4*/
.model_4{
	padding: 20px;
}
/*モデル5*/
.model_5{
	padding: 20px;
}
/***************************************/
/*==================================================
インテリアモデルのスライダーcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
	margin: 50px auto 30px auto;
}

.slider img {
    width:340px;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.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:#3F4273;/*ドットボタンの現在地表示の色*/
}
/************************************/
/*footerここから*/
footer{
  background-image: url("../images/footer.jpg");
  height: 198px;
  background-size: cover;
  text-align: center;
  color: #fff;
  padding-top: 10px;
 display: flex;
flex-direction: column;
justify-content: space-between;
}
footer a{
	font-size: 20px;
}
/*snsのアイコン*/
.snsicon{
	margin: 30px 0;
}
.snsicon img{
	width: 50px;
	height: 50px;
}
/*コピーライト*/
footer small{
  text-align: center;
  color: #fff;
 margin-bottom: 10px;
}

/*=====ここからPC用の設定=====*/
@media screen and (min-width:960px) {
  .pcArea {
    position: relative;
    display: block;
  }
	.scrolldown1{
	left:8%;
	top:70%;
}
/*topのボタン*********************/
  .topBtn {
    color:#b7c7d1;
    font-size: 30px;
    font-weight: bold;
    position: fixed;
    top: 300px;
    left: 150px;
    /*border: solid 3px #b7c7d1;*/
  }
  .topBtn:hover {
    transform: scale(1.2);
  }
/*conceptのボタン*********************/
	 .conceptBtn {
    color:#b7c7d1;
    font-size: 30px;
    font-weight: bold;
    position: fixed;
    top: 400px;
    left: 150px;
  /*  border: solid 3px #fff;*/
  }
  .conceptBtn:hover {
    transform: scale(1.2);
  }
/*Interiorのボタン*********************/
	 .interiorBtn {
    color:#b7c7d1;
    font-size: 30px;
    font-weight: bold;
    position: fixed;
    top: 500px;
    left:150px;
    /*border: solid 3px #fff;*/
  }
  .interiorBtn:hover {
    transform: scale(1.2);
  }
/*otherのボタン*********************/
	 .otherBtn {
    color:#b7c7d1;
    font-size: 30px;
    font-weight: bold;
    position: fixed;
    top: 600px;
    left:150px;
    /*border: solid 3px #fff;*/
  }
  .otherBtn:hover {
    transform: scale(1.2);
  }
/**************************************/
  .gMenu {
    position: static;
	  align-items: center;
	  flex-wrap: wrap;
	  justify-content: space-between;
  }
  .gMenu .menu-icon {
	  position: static;
	  justify-content: space-between;
	}
}