@charset "shift_jis";
/* CSS Document */

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

   基本部分
   
================================ */

/* 各種非表示設定
================================ */

/* 左サイドナビ */
#leftnavi{ display:none!important; }
#wrapper,#middle_body{
	width: 100%!important;
	margin: 0 auto !important;
	padding: 0 !important;
	}
#contents{
	width: 100%!important;
	margin: 0 auto!important;
	float: none!important;
	padding: 0!important;
}
.inner_content{ width:100%!important; }

/* パンくず */
#pankuzu { 
	width: 1200px;
	min-width: 1200px;
	margin: 0 auto;
	padding: 0;
}


#warm-bedding2022{margin: 0 auto;}
#warm-bedding2022 *{font-family: 'りょうゴシック PlusN','Noto Sans JP', Meiryo ,'メイリオ',sans-serif;}

#warm-bedding2022 a:hover img{ opacity:0.8;}
.pc_none{ display: none !important;}


/* 看板
================================ */
#warm-bedding2022 #kanban_wrap{width: 100%;text-align: center;}
#warm-bedding2022 #kanban_wrap img{width: 100%;}



/* シーン画像アニメーション
================================ */

#warm-bedding2022 .slide2{ 
    animation-duration: 15s; 
    animation-iteration-count:infinite; 
    position: absolute; 
    left:0; 
    height: auto; 
    animation-fill-mode: both;
    animation-timing-function: linear; 
    animation-delay: 1s;
}
#warm-bedding2022 .slide1 { 
    animation-duration: 15s; 
    animation-iteration-count:infinite; 
    animation-fill-mode: both; 
    animation-timing-function: linear; 
    animation-delay: 1s;
}
#warm-bedding2022 .slide1 { 
    position: relative; 
    width: 100%; 
    height: auto; 
    top:0; 
    left:0;
}
#warm-bedding2022 .slide1 { animation-name: slide1;} 
#warm-bedding2022 .slide2 { animation-name: slide2;}

/*看板画像フェード切り替えアニメーション*/
/*１枚目*/
@keyframes slide1 {
    0% {opacity: 1;}
    25% {opacity: 1;}
    40% {opacity: 0;}
    60% {opacity: 0;}
    100% {opacity: 1;}
}
/*２枚目*/
@keyframes slide2 {
    0% {opacity: 0;}
    20% {opacity: 0;}
    35% {opacity: 1;}
    75% {opacity: 1;}
    85% {opacity: 0;}
    100% {opacity: 0;}
}
/*３枚目*/
/* @keyframes slide3 {
    0% {opacity: 0;}
    50% {opacity: 0;}
    65% {opacity: 1;}
    85% {opacity: 1;}
    100% {opacity: 0;}
} */


/*メニューボタン*/
#warm-bedding2022 #menu{ width: 100%; margin: 0 auto; font-weight: bold; padding: 5px 0 35px; background-color: #f1f1ef;}
#warm-bedding2022 #menu > h1{width: 100%; margin: 35px auto 15px; text-align: center; padding: 5px 0;font-size: 35px; color: #9e0c0c;letter-spacing: 0.2rem;line-height: 1.5;}
#warm-bedding2022 #menu ul {max-width: 1060px; width: 100%;margin: 30px auto 0;text-align: center;}
#warm-bedding2022 #menu ul li {display: inline-block;letter-spacing: normal;width: calc((100% - 20px*4)/3); margin: 0 20px 20px 0;border-radius: 10px;}
#warm-bedding2022 #menu ul li a{ display: block; text-align: center; position: relative;}
#warm-bedding2022 #menu ul li a img{ width: 100%; transition: 0.5s;}
#warm-bedding2022 #menu ul li a p{ padding: 30px 0; background-color: #fff; color:#9e0c0c; font-size: 28px; position: relative; transition: 0.5s;border-radius: 10px;letter-spacing: 0.2rem;}
#warm-bedding2022 #menu ul li a p::after{ content: '';  width: 10px;  height: 10px;  border: 2px solid; border-color:  transparent transparent #9e0c0c #9e0c0c;transform: rotate(-45deg);position: absolute; left: 48%;bottom: 20%;transition: 0.5s;}
#warm-bedding2022 #menu ul li a:hover img{ opacity: 0.8;}
#warm-bedding2022 #menu ul li a:hover p{ background-color: #9e0c0c;color: #fff;}
#warm-bedding2022 #menu ul li a:hover p::after{border-color:  transparent transparent #fff #fff;bottom: 15%;}


/*fondan・Blanko用*/
#warm-bedding2022 #menu ul li.series {width: calc((100% - 20px*3)/2);}
#warm-bedding2022 #menu ul li.series a p::after{content: none;}
#warm-bedding2022 #menu ul li.series a p{color:#000000; font-size: 18px; position: relative; transition: 0.3s;text-align: left;background-color: transparent;padding: 5px 0;padding-bottom: 5px;}
#warm-bedding2022 #menu ul li.series a p::before {
	background: #000000;
	content: '';
	width: 60%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform 1s;
}
#warm-bedding2022 #menu ul li.series a:hover p::before {transform-origin: left top;transform: scale(1, 1);}


/*看板下線*/
#warm-bedding2022 .l-section-top {
	position: relative;
}

#warm-bedding2022 .c-scrolldown {
	width: 2px;
	height: 5vw;
	position: absolute;
	top: -3vw;
	left: 0;
	right: 0;
	margin: 0 auto;
	overflow: hidden;
}
#warm-bedding2022 .c-scrolldown .c-line {
	width: 100%;
	height: 100%;
	display: block;
	background: linear-gradient(to bottom, #9e0c0c 50%, rgba(255, 255, 255, 0) 50%);
	background-size: 100% 200%;
	animation: scrolldown 2s cubic-bezier(0.76, 0, 0.3, 1) forwards ;
	/* animation: scrolldown 2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite; */
}
@keyframes scrolldown {
	0% {
		background-position: 0 -5vw;
	}
	75% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 5vw;
	}
	}



/*コンテンツ*/
#warm-bedding2022 #wrap{ width: 100%; margin: 0 auto 80px;}
#warm-bedding2022 #cate02,#warm-bedding2022 #cate04,#warm-bedding2022 #cate06,#warm-bedding2022 #cate08{background-color: #f8f9f4;}

/***商品***/	
#warm-bedding2022 #wrap div.item_box{ width: 100%; padding: 3% 0;margin: 0 auto;}
#warm-bedding2022 #wrap div.item_box h1{ width: 100%; margin: 0 auto 15px auto; text-align: center; padding: 5px 0;font-size: 35px; color: #9e0c0c;letter-spacing: 0.2rem;line-height: 1.5;}


/*ランキング表示*/
#warm-bedding2022 #wrap div.item_box div.wrap_cont{ width: 100%; max-width: 1060px; margin: 0 auto;}
#warm-bedding2022 #wrap div.item_box ul.item_box2{ width: 100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 0 6%;}
#warm-bedding2022 #wrap div.item_box ul.item_box2 > li > p{ text-align: center; margin: 2% auto 0 auto;font-size: 24px;font-weight: bold;color: #9e0c0c;letter-spacing: 0.2rem;}
#warm-bedding2022 #wrap div.item_box ul.item_box2 li .item_img{ position: relative;}
#warm-bedding2022 #wrap div.item_box ul.item_box2 li img{ width: 100%;}
#warm-bedding2022 #menu > h1::after,#warm-bedding2022 #wrap div.item_box h1::after{
	position: relative;
    display: block;
    content: "";
    height: 2px;
    background-color: #9e0c0c;
    margin: 0 auto;
}



/*フェードインアニメーション*/
/*コンテンツ*/
#warm-bedding2022 .fadein {
    opacity: 0;
}
#warm-bedding2022 .fadein.is-animated {
    animation: fadeIn 1.75s cubic-bezier(0.25, 1, 0.5, 1) 1 normal forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*タイトル下線*/
#warm-bedding2022 .h_line::after {
    width: 0;
}
#warm-bedding2022 .h_line.is-animated::after {
    animation: hLine 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1 normal forwards;
}
@keyframes hLine {
    0% {
        width: 0;
    }
    100% {
        width: 100px;
    }
}



/* サイズ回遊 : ボタン改修 */
/* 共通要素 */
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 2%;
}
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx li a{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	padding: 5px 0 5px 5px;
	transition: 0.5s;
	background-color: transparent;
	box-sizing: border-box;
	border-radius: 50px;
	transition: 0.5s;
}
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx li a:hover{background-color: #9e0c0c;}
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx li a::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	display: inline-block;
	width: 6px;
	height: 6px;
	border: none;
	border-top: 2px solid #9e0c0c;
	border-right: 2px solid #9e0c0c;
	transform: rotate(45deg);
	margin: -3px auto auto auto;
	transition: 0.5s;
}
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx li a:hover::after{right: 10px;border-top: 2px solid #fff;border-right: 2px solid #fff;}
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx li a p{
	width: 50px;
	height: 50px;
	color: #9e0c0c;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    font-weight: bold;
    margin: 0 !important;
    border: 3px solid #9e0c0c;
    border-radius: 50px;
	transition: 0.5s;
	padding: 0px 15px;
}
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx li a:hover p{color: #fff;border: 3px solid #fff;}
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx li a div.prices{
	position: relative;
	width: calc(100% - 60px);
	font-size: 28px;
	font-weight: bold;
	padding-right: 30px;
	box-sizing: border-box;
	transition: 0.5s;
}



/* ボタン：サイズ表記 S/SD/D用 */

/* 1カラムの画像下に入るボタンが1つ入る場合*/
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx.size_mtx1 > li { width: 50%;}
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx.size_mtx1 li a {justify-content: center;} 
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx.size_mtx1 li a p {margin: 0 1% 0 0!important;} 
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx.size_mtx1 li a div.prices{width: 50%;}

/* 1カラムの画像下に入るボタンが3つ入る場合*/
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx.size_mtx3 > li { width: calc((100% - 20px*2) /3); margin-right: 20px; }
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx.size_mtx3 > li:nth-child(3n) { margin-right: 0; }
/* 1カラムの画像下に入るボタンが4つ入る場合*/
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx.size_mtx4 > li { width: calc((100% - 10px*3) /4); margin-right: 10px; }
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx.size_mtx4 > li:nth-child(4n) { margin-right: 0; }



/* ボタン：サイズ表記 000cm × 000cm 用 */

/* ボタン幅 */
#warm-bedding2022 #wrap .item_box2 .sml_2clm > li { width: calc((100% - 20px*2)/2); margin: 0 20px 0 0;}
#warm-bedding2022 #wrap .item_box2 .sml_3clm > li { width: calc((100% - 10px*1)/3); margin: 0 10px 0 0;}
#warm-bedding2022 #wrap .item_box2 .sml_2clm > li:nth-child(2n){ margin-right: 0;}
#warm-bedding2022 #wrap .item_box2 .sml_3clm > li:nth-child(2n){ margin-right: 0;}
#warm-bedding2022 #wrap .item_box2 .sml_2clm li a p,
#warm-bedding2022 #wrap .item_box2 .sml_3clm li a p{
	width: auto!important;
	height: auto!important;
    font-size: 24px!important;
	line-height: 1.5!important;
	padding: 0 5%;
	letter-spacing: 0.1rem;
}
#warm-bedding2022 #wrap .item_box2 .sml_2clm li a p span,
#warm-bedding2022 #wrap .item_box2 .sml_3clm li a p span{font-size: 18px;}
#warm-bedding2022 #wrap .item_box2 .sml_2clm li div.prices{width: 50%!important;}
#warm-bedding2022 #wrap .item_box2 .sml_3clm li div.prices{width: 60%!important;}



/*もっと見る*/
#warm-bedding2022 #wrap .other{width: 1060px;margin: 3% auto;}
#warm-bedding2022 #wrap .other a{width: 80%;display: block;background-color: #9e0c0c;margin: 0 auto;padding: 10px 0;position: relative;transition: 0.5s;border-radius: 50px;border: 2px solid #9e0c0c;transition: 0.5s;}
#warm-bedding2022 #wrap .other a p{font-size: 28px;color: #fff;text-align: center;transition: 0.5s;letter-spacing: 0.2rem;}
#warm-bedding2022 #wrap .other a::after{content: '';
	position: absolute;
	top: 50%;
	right: 30px;
	display: inline-block;
	width: 10px;
	height: 10px;
	border: none;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	margin: -4px auto auto auto;
	transition: 0.5s;
}
#warm-bedding2022 #wrap .other a:hover{background: none; text-decoration: none;}
#warm-bedding2022 #wrap .other a:hover::after{right: 25px;border-top: 2px solid #9e0c0c;border-right: 2px solid #9e0c0c;}
#warm-bedding2022 #wrap .other a:hover p{color: #9e0c0c;}


/*その他特集
=======================*/
#warm-bedding2022 .tokushu{
    max-width: 1060px;
    margin: 0 auto 40px;
}

#warm-bedding2022 .tokushu a {
    margin-bottom: 5px;
    display: block;
}

#warm-bedding2022 h3{
    font-size: 24px;
    text-align: center;
    color: #716868;
    background-color: #e4e0dc;
    margin-bottom: 10px;
    padding: 10px 0;
}

/*TOP*/
#page_top{ position: fixed;right: 20px;bottom: 20px}
#page_top a{position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    background-color: #9e0c0c;
    border-radius: 50%;
}
#page_top a::before{
	position: relative;
    display: block;
    content: "";
    width: 6px;
    height: 6px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(-45deg);
    margin-bottom: 3px;
}
#page_top a:hover{ opacity: 0.8;color: #fff!important;}



/*PC用ナビ*/
#pc_navi{ position: fixed; right: 0; top: 8vw; width: 8vw;}
#pc_navi ul li a{ display: block; margin-bottom: 0; text-align: center; font-size: 15px; padding: 12px 5px; color: #9e0c0c; position: relative; font-weight: bold; background-color: rgba(255,255,255,0.5); }
#pc_navi ul li a { border-top: 2px solid #9e0c0c;}
#pc_navi ul li:last-child a { border-bottom: 2px solid #9e0c0c; }
#pc_navi ul li a:hover{  color: #fff!important; background-color: #9e0c0c; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;}	



/* 自社価格プロ関係 */

/*価格少し上にずらす*/
/* #warm-bedding2022 #wrap .buy_price ul { margin-top: -5px; } */

/*幅解除*/
#warm-bedding2022 #wrap .buy_price ul li.price { width: 100%!important;font-size: 28px;}

/*フォント*/
#warm-bedding2022 .buy_price .price,
#warm-bedding2022 .buy_price .intax {font-family: centuryGB,"Century Gothic",helvetica,Arial,sans-serif;font-weight: bold;}

#warm-bedding2022 #wrap .buy_price ul li{color: #9e0c0c!important;transition: 0.5s;}
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_mtx li a:hover div.prices .buy_price ul li{color: #fff!important;}

/*販売価格文字非表示*/
#warm-bedding2022 #wrap .buy_price .price .spesicalprice{ display: none; }

/*税込み文字非表示*/
#warm-bedding2022 #wrap .buy_price ul li.intax{display: none;}


/*20221111商品追加
=================================================*/
/*追従ナビ全体幅*/
#pc_navi {
    width: 10vw;
}
/*アンカー*/
#warm-bedding2022 #menu ul li a p {
    font-size: 25px;
}
/*ラグ・ホットカーペット 畳数ボタン*/
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.zyosu li a p {
	width: 160px!important;
}
/*こたつ布団、その他ラグはこちらボタン*/
#warm-bedding2022 #wrap .other {
    display: flex;
}
#warm-bedding2022 #wrap .btn_col a {
    margin: 0 2px;
}
#warm-bedding2022 #wrap .other a::after {
    right: 10px;
}
#warm-bedding2022 #wrap .other a:hover::after {
    right: 5px;
}
#warm-bedding2022 #wrap .other a p {
    font-size: 23px;
}
/*電気掛け敷毛布*/
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_d li a p,
#warm-bedding2022 #wrap div.item_box ul.item_box2 ul.size_d li a div.prices{
	width: auto!important;
}