@charset "shift_jis";

/* ▼▼▼▼▼ 直営店のみ使用・支店は不要 ▼▼▼▼▼ */

/*コンテンツ幅のリセット*/
main#wrapper {
	position: relative;
	width: 100%;
	max-width: initial;
	max-width: auto;
	padding: 0;
}
article#contents {
	width: 100%;
	padding-bottom: 0;
}
article#contents .inner_content {
	padding-top: 0;
}

/* ▲▲▲▲▲ 直営店のみ使用・支店は不要 ▲▲▲▲▲ */

#sofa_feature {
	position: relative;
	display: flex;
}
#sofa_feature * {
	line-height: 1.2;
	box-sizing: border-box;
}
#sofa_feature a {
	transition-duration: .3s;
}
#sofa_feature img {
	max-width: 100%;
	height: auto;
}
#sofa_feature .smp {
	display: none !important;
}

/* ==================================================

　　メインエリア

================================================== */

#sofa_feature .sofafeature_wrapper {
	position: relative;
	z-index: 1;
	order: 2;
	width: 30%;
	margin: 0 auto;
}

/* ==================================================

　　PC固定画面：左側／右側

================================================== */

/* PC背景の処理

   直営店は position:fixed で背景固定できないため
   position: stickyで対応
================================================== */

#sofa_feature .pc_left,
#sofa_feature .pc_right {
	width: 35%;
	position: sticky;
	/*top: 0;
	height: 100vh;*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}



/* PC固定画面：右側（画像）
================================================== */

#sofa_feature .pc_right {
	order: 3;
}
#sofa_feature .pc_right > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* PC固定画面：左側(ナビ)
================================================== */

#sofa_feature .pc_left {
	order: 1;
	background-color: #f2f2f0;
	display: flex;/*左側のメニュー全体を中央に*/
    justify-content: center;
    align-items: center;
}


/* 商品から選ぶ */
#sofa_feature .tab-inner {
	width: 40%;
}   

#sofa_feature .tab-inner-title {
	line-height: 40px;
	font-size: 15px;
	font-weight: bold;
	text-align: center;/*左側のタイトルを中央に*/
	color: #252525;
	margin-top: 20px;
}

#sofa_feature .navi { 
	color: #252525;
	font-size: 15px;
	line-height: 1.5;
	background-color: #fff;
	border-radius: 40px;
	padding: 15px;
	box-shadow: 0px 0px 40px -20px #333333;
	display: flex;/*左側のメニュー(タイトル以外)を中央に*/
    justify-content: center;
    align-items: center;
}

#sofa_feature .navi::after {
	display: inline-block;
	content: "";
	width: 5px;
	height: 5px;
	border-top: solid 1px #252525;
	border-right: solid 1px #252525;
	transform: rotate(45deg);
	margin-left: 10px;
}


#sofa_feature .navi:hover { 
	background-color: #7a9681;
	box-shadow: none;
}

/* ===============================ここからSMP_CSSにコピー=============================== */




/* ==================================================

　　コンテンツエリア詳細

================================================== */

/*▽基本CSS*/
#sofa_feature{
	/* font-size: 50%; */
	scroll-behavior: smooth; 
	/* font-family: "Futura PT", "游ゴシック",sans-serif; */
	color: #050505a8;
}
#sofa_feature a{ 
	text-decoration:none; 
	color: #050505a8;
}
#sofa_feature a img{ 
	border:none; 
}



/*andoroidフォント指定*/
#sofa_feature .Android div.prices{
	font-family: Roboto, sans-serif;
}
#sofa_feature .Android #wrap div.content-group div.content-box div.ranking_box > ul > li a > div.box01 > div:nth-child(1) p span{
	font-family: Roboto, sans-serif;
}

/*税込非表示*/
#sofa_feature div.prices span.prdisp-taxin span > span{ display: none !important;}


#sofa_feature .fadeUpTrigger{
    opacity: 0;
}
#sofa_feature .fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


/*smp*/

	#sofa_feature .wrap {
		width: 100%;
		margin: 0 auto;
	}
	
	#sofa_feature .bg_0 {
		width: 100%;
	}
	
	#sofa_feature .welcome_area {
		width: 95%;
		margin: 0 auto;
		text-align: center;
		padding: 20px 0;
	}
	#sofa_feature .welcome_area .welcome_text {
		font-size: 15px;
		line-height: 20px;
	}
	
	#sofa_feature .welcome_area h2 {
		font-size: 20px;
		font-weight: 700;
		text-align: center;
		margin-bottom: 10px;
		color: #575757;
	}
	
	#sofa_feature .welcome_area ul {
		width: 98%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	
	#sofa_feature .welcome_area ul li {
		width: calc(97%/2);
	}

	#sofa_feature .welcome_area .widthhalf li {
		/* width: calc(97%/2); */
		width: 100%;
	}	

	
	#sofa_feature .welcome_area ul li p {
		color: #fff;
		padding: 15px 0;
		transition-duration: .6s;
		background-color: #7a9681;
		/* border: solid 1px #575757; */
		border-radius: 40px;
        position: relative
	}
	
	#sofa_feature .welcome_area ul li p::after {
        position: absolute;
        top: calc(50% - 8px);
        right: 2.5vw;
        display: inline-block;
        content: "";
        width: 0.4vw;
        height: 0.4vw;
        border-top: solid 3px #fff;
        border-right: solid 3px #fff;
        transform: rotate(135deg);
	}

	/* .wrap .welcome_area ul li a:hover p {
		box-shadow: none;
		transition: .6s;
		background-color: #efefef;
		color: #0badbe;
	} */

	/*ランキング追加*/
	/* #sofa_feature .rank_bottom{
		margin-bottom: 40px;
	} */



	
	/*検索窓*/
	/* #sofa_feature .welcome_area .search {
		width:100%;
		margin: 0 auto;
	}
	#sofa_feature .welcome_area .search h3 {
		font-size: 1.5rem;
		text-align: left;
		margin: 0 0 10px;
	}
	#sofa_feature .welcome_area .search_box {
		width: 100%;
		margin: 0 auto 20px;
		position: relative;
		text-align: center;
	}
	#sofa_feature .welcome_area .search_box p {
		color: #d7cdbe;
		text-align: center;
		margin-bottom: 5px;
	}
	#sofa_feature .welcome_area .search_box form {
		position: relative;
	}
	#sofa_feature .welcome_area .search_box input#search-kwbox,
	#sofa_feature .welcome_area .search_box input.header-btn {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: transparent;
		border: none;
		border-radius: 0;
		font: inherit;
		outline: none;
	}
	#sofa_feature .welcome_area .search_box input#search-kwbox {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		font-size: 1.3rem;
		background-color: #d7cdbe;
		padding: 20px 0;
	}
	#sofa_feature .welcome_area .search_box input#search-kwbox::placeholder {
		color: #fff;
	}
	#sofa_feature .welcome_area .search_box input.header-btn {
		position: absolute;
		top: 0;
		right: 0;
		padding: 7px;
		display: none;
	}
	
	#sofa_feature .search_box {
		position: relative
	}
	#sofa_feature .search_box::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		display: inline-block;
		content: "";
		width: 16px;
		height: 16px;
		margin: 25px 30px;
		background: url(https://www.rakuten.ne.jp/gold/kaguin/img/top2208/btn_form_pc.png) no-repeat left top;
	} */
	
	#sofa_feature .main_area {
		width: 100%;
		margin: 0 auto;
	}
	
	#sofa_feature .main_area .bg_01{
		background-color: rgb(237, 241, 234)
	}
	
	#sofa_feature .main_area .bg_02,
	#sofa_feature .main_area .bg_03,
	#sofa_feature .main_area .bg_04 {
		background-color: #f7f7f7;
	}
	
	#sofa_feature #rank,#sofa_feature #size,#sofa_feature #type,#sofa_feature #taste,#sofa_feature #coordinate{
		width: 95%;
		margin: 0 auto;
		padding: 40px 0;
		margin-bottom: 40px;

	}
	
	#sofa_feature .main_area h3 {
		font-size: 30px;
		padding-bottom: 20px;
		text-align: center;
		font-weight: 600;
		position: relative;
		color: #575757;
	}

	/*タブ*/
	#sofa_feature .tab_menu {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-wrap: wrap;
	  list-style: none;
	}
	#sofa_feature .tab_menu:nth-of-type(2) {
	  margin-top: 40px;
	}
	#sofa_feature .tab_menu li {
		width: calc(98%/3);
		cursor: pointer;
		margin: 10px 0;
		text-align: center;
		opacity: 0.5;

	}
	
	#sofa_feature .tab_menu li p {
		font-size: 1rem;
		padding-top: 5px;
		font-weight: 600;
		transition-duration: .6s;

	}
	
	#sofa_feature .tab_menu li img {
		width: 90px;
		height: 90px;
		border-radius: 50%;
		/* opacity: 0.2; */
		transition-duration: .6s;

	}
	
	#sofa_feature .tab_menu li img:hover {
		opacity: 0.75;
		transition: .6s;
	}
	
	#sofa_feature .tab_menu  .active {
		opacity: 1;
		transition: .6s;

	}

	#sofa_feature .tab_menu li:first-child {
	  border-left: none;
	}
	#sofa_feature .tab_menu:nth-of-type(2) li.active {
	  background: #81c7d4;
	}
	#sofa_feature .tab_content {
	  display: none;
	margin-top: 40px;
	}
	
	#sofa_feature .tab_content.active {
	  display: block;
	}
	
	#sofa_feature .tab_contents h4 {
		font-size: 23px;
		color: #575757;
		font-weight: 700;
	}
	
	#sofa_feature .tab_contents .inner_top {
		text-align: center;
	}
	
	#sofa_feature .tab_contents .inner_top h4 {
		margin: 30px 0;
	}
	
	#sofa_feature .tab_contents .inner_top p {
		font-size: 16px;
		line-height: 2;
	}
	
	#sofa_feature .tab_contents .item_list {
		display: grid;
		gap: 15px;
		grid-template-columns: 1fr 1fr;
		margin: 30px 0 0;
	}
	
	#sofa_feature .tab_contents .item_list .inner_text .item_name {
		font-size: 20px;
		text-align: center;
		padding-bottom: 2%;
		font-weight: bold;
		padding-top: 10%;
		line-height: 1.2;
	}
	
	#sofa_feature .tab_contents .item_list .inner_text .text {
		font-size: 15px;
		text-align: center;
		padding-top: 5%;
		line-height: 1.2;
	}
	
	#sofa_feature .tab_contents .item_list >li {
		background-color: #fff;
		display: block;
		padding-bottom: 10px;
		position: relative;
		transition-duration: .6s;
		border-radius: 10px;
	}
	

	#sofa_feature .tab_contents .item_list >li img{
		border-radius: 10px 10px 0 0;
	}

	#sofa_feature .tab_contents .item_list >li a:hover {
		opacity: 0.8;
		transition: .6s;
	}
	
	#sofa_feature .tab_contents .item_list >li a .space_box {
		padding: 0 10px 0;
	}
	
	#sofa_feature .tab_contents .color_ball ul {
		display: flex;
		justify-content:center ;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 10%;
	}
	
	#sofa_feature .tab_contents .item_list li .color_ball ul li span {
		display: inline-block;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		margin-right: 5px;
	}
	
	#sofa_feature .tab_contents .prices{
		text-align: center;
		padding: 10px;
	}

/* ランキング1位の商品 横向き調整 */

	#sofa_feature #rank .col1{
		background-color: #fff;
		border-radius: 10px;
	}

	#sofa_feature #rank .col1 img{
		border-radius: 10px 0 0 10px;
	}

	#sofa_feature #rank li{
		padding-bottom: 0;
	}


/*下部のクッションのレイアウト*/
#sofa_feature .set dt{

	font-size: 16px;
	margin-left: 8%;
}

#sofa_feature .set {
    position: relative;
    width: 95%;
	padding: 30px 0; 
    border-bottom: dashed 1px #ccc;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#sofa_feature .set:hover{
	background-color: #e7e7e7;
}

/*下部のクッションの価格*/
#sofa_feature .tab_contents .set .prices {
	color: #303030;
    /* position: absolute;
    top: 0px;
    right: 0; */
	padding: 0;
}

/* もっと見るボタン */
#sofa_feature .tab_contents .more {
    width: 80%;
    margin: 5% auto 0;
    display: block;
    font-size: 16px;
    color: #fff;
    /* border: 1px solid #575757; */
	background-color: #7a9681;
    text-align: center;
    /* box-shadow: 4px 4px 5px rgb(0 0 0 / 15%); */
    border-radius: 30px;
    padding: 20px 0;
}

#sofa_feature .tab_contents .more::after {
    display: inline-block;
    content: "";
    width: 9px;
    height: 9px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: rotate(45deg);
    margin-left: 10px;
}

/* smp専用固定ナビを非表示（pcのcssのみ) */
#sofa_feature .pc_none{
	display: none;
}


/* 本店価格表示 */
#sofa_feature .buy_price,
#sofa_feature .buy_price > ul,
#sofa_feature .buy_price > ul > li { position: relative; }

#sofa_feature .buy_price > ul > li { color: #d07157; }
#sofa_feature .spesicalprice { display: none; }