@charset "euc-jp";

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

	��Ź�ѥ�������ꥻ�åȡ�����Ź�˥��ԡ��ػ�

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

* {
	margin: 0;
	padding: 0;
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}
ul, ol, li {
	list-style: none;
}
a, a:hover {
	color: #333;
	text-decoration: none;
}
img, a img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

#futon * {
	box-sizing: border-box;
}

#futon .pc_none {
	display: none;
}



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

	��������

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

body {
	color: #333333;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-weight: 400;
}
#futon {
	position: relative;
	width: 100%;
}



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

	����

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

#futon h1.main_title {
	position: relative;
	/*overflow: hidden;*/
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
/*#futon h1.main_title > img {
	width: auto;
	height: 480px;
}*/



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

	�ʥӥ��������

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

/* ���ƥ���ʥӡ����
================================================== */

#futon .category_nav {
	position: relative;
	max-width: 1000px;
	margin: 80px auto;
}

#futon .category_nav h2 {
	position: relative;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	margin-bottom: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
}
#futon .category_nav h2::before,
#futon .category_nav h2::after {
	position: relative;
	display: inline-block;
	content: "";
	width: 80px;
	height: 1px;
	background-color: #333;
}
#futon .category_nav h2::before { margin-right: 1em; }
#futon .category_nav h2::after { margin-left: 1em; }

#futon .category_nav ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items:flex-start;
}
#futon .category_nav ul li {
	width: calc((100% - 20px*2)/3);
	margin-right: 20px;
}
#futon .category_nav ul li:nth-child(3n),
#futon .category_nav ul li:last-child {
	margin-right: 0;
}
#futon .category_nav ul li:nth-child(n+4) {
	margin-top: 20px;
}
#futon .category_nav ul li a {
	position: relative;
	overflow: hidden;
	width: 100%;
	display: block;
	background-color: #e2e2e8;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	padding: 24px 0;
	border-radius: 100px;
}
#futon .category_nav ul li a::after {
	position: absolute;
	top: calc(50% - 6px);
	right: 24px;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-right: solid 3px #333;
	border-bottom: solid 3px #333;
	transform: rotate(45deg);
}

/* hover */
#futon .category_nav ul li:hover a {
	color: #fff;
	background-color: #acabbd;
}
#futon .category_nav ul li:hover a::after { border-color: #fff; }

/* animation */
#futon .category_nav ul li a,
#futon .category_nav ul li:hover a,
#futon .category_nav ul li a *,
#futon .category_nav ul li:hover a *,
#futon .category_nav ul li a::after,
#futon .category_nav ul li:hover a::after { transition: all 0.2s; }



/* ���ƥ���ʥӡʾ���
================================================== */

#futon .category_nav_s {
	position: relative;
	width: 100%;
	margin: 0 auto 60px;
}
#futon .category_nav_s > ul {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#futon .category_nav_s > ul > li {
	position: relative;
	width: calc((100% - 20px*2)/3);
	margin-right: 20px;
}
#futon .category_nav_s > ul > li:last-child { margin-right: 0; }
#futon .category_nav_s > ul > li > a {
	position: relative;
	display: block;
	font-size: 14px;
	font-weight: 700;
	background-color: #fff;
	border: solid 4px #e2e2e8;
	text-align: center;
	padding: 16px 0 12px;
	border-radius: 100px;
}
#futon .category_nav_s > ul > li > a::after {
	position: absolute;
	top: calc(50% - 6px);
	right: 24px;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-right: solid 3px #333;
	border-bottom: solid 3px #333;
	transform: rotate(45deg);
}
#futon .category_nav_s > ul > li > a > span {
	display: block;
	font-size: 18px;
	margin-top: 6px;
}

/* hover */
#futon .category_nav_s > ul > li:hover > a {
	background-color: #e2e2e8;
}

/* animation */
#futon .category_nav_s > ul > li > a,
#futon .category_nav_s > ul > li:hover > a {
	transition: all 0.2s;
}


/* �����˥塼
================================================== */

#futon #nav_fixed_pc {
	position: fixed;
	width: 200px;
	right: 0;
	bottom: 40px;
	z-index: 100;
	background-color: rgba(226,226,232,0.9);
}
#futon #nav_fixed_pc > ul {
	width: 100%;
}
#futon #nav_fixed_pc > ul > li:not(:last-child) {
	border-bottom: solid 1px #fff;
}
#futon #nav_fixed_pc > ul > li > a {
	position: relative;
	width: 100%;
	display: block;
	font-size: 14px;
	padding: 1.5em 2em;
}
#futon #nav_fixed_pc > ul > li > a::after {
	position: absolute;
	top: calc(50% - 2px);
	right: 2em;
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-right: solid 2px #333;
	border-bottom: solid 2px #333;
	transform: rotate(45deg);
}
#futon #nav_fixed_pc > ul > li:last-child > a::after {
	transform: rotate(-135deg);
}
#futon #nav_fixed_pc > ul > li:hover > a {
	background-color: #e6edf7;
}




/* Ĵ����
================================================== 

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

}*/



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

	����ƥ�ĥ��ꥢ

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

/* ����
================================================== */

#futon .section {
	position: relative;
	width: 100%;
	padding: 0 0 120px;
}
#futon .section::before {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	content: "";
	width: 100%;
	height: 1px;
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,0) 5%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 95%);
}
#futon .section > .inner {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}


/* ����
================================================== */

#futon .section > .inner > h2 {
	position: relative;
	width: 100%;
	text-align: center;
	padding: 120px 0 40px;
}

/*#futon .section > .inner > h2.heading01 { background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u44587884/pc/common/css/../../images/futon_feature2023/heading01.jpg); }
#futon .section > .inner > h2.heading02 { background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u44587884/pc/common/css/../../images/futon_feature2023/heading02.jpg); }
#futon .section > .inner > h2.heading03 { background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u44587884/pc/common/css/../../images/futon_feature2023/heading03.jpg); }
#futon .section > .inner > h2.heading04 { background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u44587884/pc/common/css/../../images/futon_feature2023/heading04.jpg); }
#futon .section > .inner > h2.heading05 { background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u44587884/pc/common/css/../../images/futon_feature2023/heading05.jpg); }*/

#futon .section > .inner > h2 > span {
	color: #333;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	/*text-shadow: 0px 0px 16px #bca596,
				 0px 0px 32px #bca596,
				 0px 0px 48px #bca596;*/
}

#futon .section > .inner > h3 {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
}
#futon .section > .inner > .item + h3 { margin-top: 80px; }
#futon .section > .inner > h3::before,
#futon .section > .inner > h3::after {
	position: relative;
	display: inline-block;
	content: "";
	width: 120px;
	height: 1px;
	background-color: #333;
}
#futon .section > .inner > h3::before { margin-right: 1.5em; }
#futon .section > .inner > h3::after { margin-left: 1.5em; }

#futon .section > .inner > h3 span {
	font-size: 16px;
	line-height: 1.75;
	text-align: center;
}
#futon .section > .inner > h3 b {
	display: block;
	font-size: 24px;
}


/* ���ʰ���
================================================== */

#futon .item {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
}
#futon .item > li {
	position: relative;
	width: calc((100% - 50px*2)/3);
	margin-right: 50px;
	display: flex;
	flex-direction: column;
}
#futon .item > li:nth-child(3n) { margin-right: 0; }
#futon .item > li:nth-child(n+4) { margin-top: 50px; }

/* ���ʲ��� */
#futon .thumb {
	position: relative;
	width: 100%;
	margin-bottom: 8px;
}

/* ���ʾ��� */
#futon .spec {
	position: relative;
	width: 100%;
	/*height: 100%;*/
	display: flex;
	flex-direction: column;
}

/* ����̾ */
#futon .spec h4 {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 8px;
}
#futon .spec h4.pc_h2em { height: 3em; }


/* �ʵᥢ������ */
#futon .icon_appeal {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
#futon .icon_appeal > li {
	position: relative;
	width: auto;
	font-size: 11px;
	border: solid 1px #333;
	padding: 4px;
	margin: 0 4px 4px 0;
}

/* ���ʥץ� */
#futon .wrap_price {
	position: relative;
	width: 100%;
	margin-top: auto;
}
#futon .wrap_price > li {
	position: relative;
	width: 100%;
}
#futon .wrap_price > li { border-top: dotted 1px #999; }
#futon .wrap_price > li:last-child { border-bottom: dotted 1px #999; }
#futon .wrap_price > li > a {
	position: relative;
	width: 100%;
	display: block;
	padding: 0.5em 0;
}
#futon .wrap_price > li > a::after {
	position: absolute;
	top: calc(50% - 3px);
	right: 12px;
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 2px #333;
	border-right: solid 2px #333;
	transform: rotate(45deg);
}
#futon .wrap_price > li > a > dl {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}
#futon .wrap_price > li > a > dl dt {
	width: 50%;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	border-right: solid 1px #ccc;
}
#futon .wrap_price > li > a > dl dt span {
	font-size: 12px;
}
#futon .wrap_price > li > a > dl dt:empty {
	border-right: none;
}
#futon .wrap_price > li > a > dl dd {
	width: 50%;
	margin-left: auto;
	text-align: right;
	padding-right: 32px;
}

#futon .prices,
#futon .prices span { position: relative; }
#futon .prices span span {
	/* ��ޡ��� */
	/*font-family: Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN','Yu Gothic', Meiryo;*/
	font-size: 14px;
}
#futon .prices span span.value {
	/* ���� */
	font-size: 20px;
	font-weight: 700;
}
#futon .prices span span span {
	/* �ǹ��Ȥ���ʸ�� */
	display: none;
}

/* hover */
#futon .wrap_price > li:hover > a {
	color: #fff;
	background-color: #edae4b;
}
#futon .wrap_price > li:hover > a::after {
	border-color: #fff;
}

/* animation */
#futon .wrap_price > li > a,
#futon .wrap_price > li:hover > a {
	transition: all 0.2s;
}




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

	Ź���⸡��

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

#futon .tenpo_search {
	position: relative;
	width: 100%;
	padding: 40px;
	background-color: #e2e2e8;
	text-align: center;
}
#futon .tenpo_search h2 {
	font-size: 24px;
	margin-bottom: 1em;
}
#futon .tenpo_search .search_box {
	position: relative;
	max-width: 710px;
	margin: 0 auto;
}

/* CSS��ö�ꥻ�å� */
#futon .search_box input[type="text"],
#futon .search_box input[type="image"],
#futon .search_box input[type="submit"] {
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	font: inherit;
	outline: none;
}
#futon .search_box input[type="text"] {
	position: relative;
	width: 100%;
	font-size: 16px;
	background-color: #fff;
	padding: 16px 64px 16px 32px;
	border-radius: 100px;
}
#futon .search_box input[type="image"] {
	position: absolute;
	top: 12px;
	right: 16px;
	width: 32px;
	height: 32px;
}

/**/
#futon .search_box input[type="submit"] {
	position: absolute;
    top:0;
    right: 0;
    display: inline-block;
    content: "";
    width: 56px;
    height: 56px;
    background: url(//image.wowma.click/44587884/image/futon_feature2023/icon_search.gif) no-repeat center center;
    background-size: 28px auto;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}


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

	banner_area

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

#futon .banner_area {
	position: relative;
	width: 100%;
	margin: 64px auto;
	text-align: center;
}
#futon .banner_area h2 {
	font-size: 24px;
	margin-bottom: 1em;
}

#futon .banner_area ul {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
}
#futon .banner_area ul li {
	width: calc((100% - 20px*1)/2);
	margin-right: 20px;
}
#futon .banner_area ul li:nth-child(2n) {
	margin-right: 0;
}
#futon .banner_area ul li a {
	display: block;
}

/* hover */
#futon .banner_area ul li:hover a img {
	opacity: 0.8;
}

/* animation */
#futon .banner_area ul li a img,
#futon .banner_area ul li:hover a img {
	transition: 0.2s all;
}

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

	�եå���

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

footer {
	position: relative;
	width: 100%;
	background-color: #333;
	padding: 48px 0;
	text-align: center;
}
footer ul {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer ul li {
	position: relative;
}
footer ul li:not(:nth-of-type(1))::before {
	content: "|";
	margin: 0 1em;
}
footer ul li a {
	font-size: 14px;
}

footer ul li,
footer ul li a {
	color: #fff;
}
footer ul li:hover a {
	color: #fff;
	opacity: 0.8;
}

/* animation */
footer ul li a,
footer ul li:hover a {
	transition: all 0.2s;
}


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

	���˥᡼�����

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

/* ������ǤؤΥ��˥᡼�����
================================================== */

/*#futon a,
#futon a:hover,
#futon a::after,
#futon a:hover::after,
#futon span::after,
#futon span:hover::after {
	transition: 0.2s all;
}*/


/* �ե����ɥ���
================================================== */

#futon .fadein {
	opacity: 0;
}
#futon .fadein.is-animated {
	animation: fadeIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1 normal forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}



/* �������˥��饤�ɥ���
================================================== */

#futon .slidein {
	opacity: 0;
}
#futon .slidein.is-animated {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 normal forwards;
}
@keyframes slideIn {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}