@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/*-----COMMON-----*/
#recommend {
	color:#222;
	font-size:14px;
	font-family: "Noto Sans JP", sans-serif;
}
#recommend * {
 box-sizing: border-box;
}
#recommend img {
	width:100%;
	object-fit: cover;
}
#recommend h1 {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#recommend a {
	font-size: inherit;
	text-decoration: none;
	display: block;
	width: 100%;
}
#recommend h2 {
	font-size: 2.4rem;
	line-height: 1.3;
	font-weight: 500;
}
#recommend h2 span {
	font-size: 1.6rem;
	line-height: 1.6;
}
#recommend h3 {
	font-size: 2.0rem;
	padding-bottom: 20px;
	font-weight: 500;
}
#recommend ::selection {
	color: #000;
	background-color: #dfdfdf;
}
#recommend #armtray,
#recommend #armrest,
#recommend #cushion,
#recommend #cover,
#recommend #storage {
	margin-top: -6rem;
	padding-top: 6rem;
}
#recommend .sp-none {
	display: block;
}
#recommend .sp-show {
	display: none;
}
/* kv */
#recommend .kv {
	position: relative;
	margin: 0 auto;
	max-width: 1920px;
	width: 100%;
	height: 600px;
	display: block;
	background-image: url(../img/kv.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
#recommend .back-sheet {
	background: #f7f0e7;
  display: block;
  width: 200%;
  height: 100%;
  left: -50%;
  position: absolute;
  z-index: -1;
}
/*line-up　(navigation)*/
#recommend .line_up {
	padding: 80px 10%;
	margin: 0 auto;
	z-index: 9999;
}
#recommend .line_up ul {
	display: flex;
	gap: 2rem;
}
/*クラシカルな雰囲気のブティック向け。時を重ねた美しさ*/
#recommend .line_up ul li {
	padding: 1rem;
}
#recommend .line_up ul li:nth-child(1) {
  background: #b47b84e0;
}
#recommend .line_up ul li:nth-child(2) {
  background: #685457e0;
}
#recommend .line_up ul li:nth-child(3) {
  background: #c99da6e0;
}
#recommend .line_up ul li:nth-child(4) {
	background: #d4b6bae0;
}
#recommend .line_up ul li:nth-child(5) {
  background: #8c6a6ee0;
}

#recommend .line_up ul li:hover {
	opacity: 0.8;
	transition: 0.3s;
}
#recommend .line_up ul li p {
	color: #fff;
	margin-top: 1rem;
	min-height: 4.3rem;
	font-size: 1.3rem;
	line-height: 1.3;
	text-align: center;
	display: grid;
	place-items: center;
}
#recommend .line_up .container {
	display: flex;
	flex-direction: column;
	padding: 0;
}
#recommend .line_up .thumb {
  background: #fff;
	width: 100%;
}
#recommend .line_up picture {
	margin-inline: auto;
	height: 100%;
  aspect-ratio: 1;
}
#recommend .line_up picture img {
  display: block;
	margin: 0 auto;
	width: 60%;
}

/* features/製品 　共通*/
#recommend .features {
	background: #f9f9f9;
	padding: 2% 10%;
}
#recommend .features .body {
	position: relative;
	margin-top: 6rem;
	padding-inline: 4rem;
	padding-block: 4rem 9rem;
	background: #fff;
}
#recommend .features .heading {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: flex-end;
  padding-left: 16rem;
	padding-bottom: 4rem;
	width: 80%;
}
#recommend .features .heading picture {
	position: absolute;
	left: 0;
	top: -6.8rem;
	width: 12.6rem;
	z-index: 99;
}
#recommend .features .heading img {
	display: block;
	position: absolute;
	left: 0;
	top: 1rem;
	width: 12.6rem;
}
#recommend .features .title.sub {
	margin-top: 6rem;
}
#recommend .features .products.sub {
	margin-top: 0;
}
#recommend .features .products li {
	margin-top: 3rem;
	padding-bottom: 2rem;
}
#recommend .features .products li+li {
	border-left: solid 1px #e6e9ed;
}
#recommend .features .products picture {
	padding: 2rem;
}
#recommend .features .products img {
	display: block;
	margin: 0 auto;
  width: 80%;
}
#recommend .features .products img{
 transition:1s all;
}
#recommend .features .products img:hover{
  transform:scale(1.1,1.1);
	transition: 0.3s;
}
#recommend .features .product_name {
	font-weight: 600;
  padding: 0 2rem;
	margin: 1rem auto 0;
	width: fit-content;
}
#recommend .features .product_name span {
  display: block;
	font-weight: 400;
	margin-top: 1rem;
	text-align: justify;
}
#recommend .features .point {
	background: #f0f0f0;
	position: relative;
	margin-left: 30%;
  padding-inline: 3rem;
  padding-block: 2rem;
	width: 70%;
}
#recommend .features .point::before {
	width: 16rem;
  height: 16rem;
  display: block;
	content: "";
	background-image: url(../img/recommend_point.png);
	background-repeat: no-repeat, repeat-x;
	background-size: contain;
	background-position: center;
	top: -12rem;
  right: 0;
  position: absolute;
}
#recommend .features .point p {
	font-size: 1.8rem;
	line-height: 1.6;
}
#recommend .features .point .title {
	border-bottom: 1px solid #bcbfc3;
	display: block;
	font-weight: 500;
	line-height: 1.6;
  margin-bottom: .4rem;
	padding-bottom: .4rem;
	position: absolute;
  top: -9999px;
  left: -9999px;
}

#recommend .features .point .marker {
	background-image: linear-gradient(90deg, #ff9fba80 9%, #ffcfad80 100%);
	background-position: left bottom;
	background-size: 100% 0.5em;
	background-repeat: no-repeat;
}

/*アームトレイ*/
#recommend .features #armtray .products {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	width: fit-content;
}
/*アームレスト*/
#recommend .features #armrest .products {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: unset;
}
#recommend .features #armrest .products img {
  width: 40%;
}
/*クッション*/
#recommend .features #cushion .products {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: fit-content;
}
#recommend .features #cushion .products li:nth-child(4n+1) {
	border-left: none;
}
/*カバー  ラウンジチェア・ベッド用*/
#recommend .features #chair_bed .products {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: fit-content;
}
#recommend .features #chair_bed .products li:nth-child(4n+1) {
	border-left: none;
}
/*カバー  スツール*/
#recommend .features #stool .products {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
  width: unset;
}
#recommend .features #stool .products img {
  width: 60%;
}
/* ストレージ*/
#recommend .features #storage .products {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: fit-content;
}
#recommend .features #storage .products li:nth-child(4n+1) {
	border-left: none;
}




@media screen and (max-width: 1199px){
	/*bootstrapを使用する場合。幅を1200pxとして
	左右に15pxずつpaddingをつけている為*/
}
@media screen and (max-width: 1169px){
	/*bootstrapを使用しない場合*/
}

@media screen and (max-width: 1024px){
}

@media (max-width: 767px){
		#recommend .sp-none {
			display: none;
		}
		#recommend .sp-show {
			display: block;
		}
		/* kv */
		#recommend .kv {
			height: 70vh;
			background-image: url(../img/kv_sp.png);
		}
		/*nav*/
		#recommend .line_up {
	    padding: 6%;
		}
		#recommend .line_up ul {
			gap: 0.1rem;
		}
		#recommend .line_up ul li {
			padding: 1%;
		}
		#recommend .line_up picture {
	    padding: 0 5%;
		}
		/*line-upからnavigation に切り替わり*/
		#recommend .line_up.fixed {
			padding: 0;
			position: fixed;
			top: 60px;
			width: 100%;
			overflow-x: scroll;
		}
		#recommend .line_up.fixed ul li {
			flex: 1;
		}
		#recommend .line_up.fixed .thumb {
			display: none;
		}

		/* features/製品 　共通*/
		#recommend .features {
			padding: 24px;
		}
		#recommend .features .body {
	    padding-inline: 2rem;
	    padding-block: 2.3rem 9rem;
	  }
		#recommend .features .heading {
			display: block;
			padding-left: 19%;
		}
		#recommend .features .heading picture {
			left: 0;
			right: 0;
			top: -9rem;
			width: 22%;
		}
		#recommend .features .heading img {
			width: 100%;
		}
		#recommend .features #armtray .products,
		#recommend .features #armtrest .products,
		#recommend .features #cushion .products,
		#recommend .features #chair_bed .products,
		#recommend .features #stool .products,
		#recommend .features #storage .products {
			grid-template-columns: repeat(2, 1fr);
		}

		/*navがfixedで画像消えて高さ無くなり潰れた分の修正*/
		#recommend .features.fixed #armtray {
			padding-top: 120px;
		}

		/*SPの製品の下線*/
		/*製品が奇数*/
		#recommend .features #armtray .products li:not(:last-child),
		#recommend .features #cover .products li:not(:last-child) {
			border-bottom: solid 1px #e6e9ed;
		}
		/*製品が偶数*/
		#recommend .features #armrest .products li:not(:last-child,:nth-last-child(-n + 2)),
		#recommend .features #cushion .products li:not(:last-child,:nth-last-child(-n + 2)),
		#recommend .features #storage .products li:not(:last-child,:nth-last-child(-n + 2)) {
			border-bottom: solid 1px #e6e9ed;
		}

		#recommend .features .products li+li {
			border-left: none;
		}
		#recommend .features .products li:nth-child(odd) {
			border-right: solid 1px #e6e9ed;
		}
		#recommend .features .products li {
			margin-top: 0;
	    margin-bottom: 0;
		}
		#recommend .features #armrest .products img,
		#recommend .features #stool .products img {
			width: 80%;
		}
		#recommend .features .product_name {
	    font-size: 1.6rem;
		}
		#recommend .features .product_name span {
			font-size: 1.6rem
		}
		#recommend .features .point {
			width: 100%;
			margin-inline: auto;
		}
		#recommend .features .point::before {
			width: 12rem;
	    height: 12rem;
	    right: -2rem;
      top: -9rem;
		}
		#recommend .features .point p {
			font-size: 1.4rem;
		}

}