@charset "euc-jp";

/*▽基本CSS*/
html{scroll-behavior: smooth; font-family: 'Open Sans', sans-serif;}
*{ list-style:none; margin:0; padding:0;}
a{ text-decoration:none; color: #000000;}
a img{ border:none; }

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

#wrap .anime1{ animation: fluffy1 2s ease infinite;}
@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(-5px) }
  20% { transform:translateY(0) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-5px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
#wrap .anime2{ animation: fluffy2 6s ease infinite;}
@keyframes fluffy2 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(0) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-5px)}
  35% { transform:translateY(0) }	
  40% { transform:translateY(-5px)}	
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
#wrap .anime3{ animation: fluffy3 7s ease infinite;}
@keyframes fluffy3 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(0) }
  25% { transform:translateY(0) }
  30% { transform:translateY(0) }
  35% { transform:translateY(0)}
  40% { transform:translateY(-5px) }
  45% { transform:translateY(0)}	
  50% { transform:translateY(-5px) }
  100% { transform:translateY(0) }
}
#wrap .anime4{ animation: fluffy4 8s ease infinite;}
@keyframes fluffy4 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(0) }
  25% { transform:translateY(0) }
  30% { transform:translateY(0) }
  30% { transform:translateY(0) }
  30% { transform:translateY(0) }
  35% { transform:translateY(0) }
  40% { transform:translateY(0) }
  45% { transform:translateY(0) }	
  50% { transform:translateY(-5px)}
  55% { transform:translateY(0)}
  60% { transform:translateY(-5px)}
  100% { transform:translateY(0) }
}


/*smp*/
@media screen and (max-width: 640px){
	
	body{background: #fff;}
	
	.smp_none{ display: none !important;}
	
	/*看板画像*/
	#kanban_wrap{ max-width: 100%; }
	#kanban_wrap img{ max-width: 100%;}
	
	/*コンテンツ*/
	#wrap{ max-width: 100%; margin: 0 auto;}
	#wrap img{ max-width: 100%;}
	
	
	/*マップ*/
	#map{ width: 100%; position: relative;}
	#map img.base_img{ width: 100%;}
	#map img{ width: 19vw; height: auto;}
	#map img.pmts20n{position: absolute; bottom: 17vw; left: 40vw; cursor: pointer;}
	#map img.pmts21n{position: absolute; bottom: 17vw; right: 8vw; cursor: pointer;}
	#map img.pmts22n{position: absolute; bottom: 23vw; left: 24vw; cursor: pointer;}
	#map img.pmts25n{position: absolute; bottom: 30vw; left: 8vw; cursor: pointer;}
	#map img.pmtd30n{position: absolute; top: 20vw; left: 26vw; cursor: pointer;}
	#map img.pmts30h{position: absolute; top: 19vw; right: 25vw; cursor: pointer;}	
	#map > p{ font-size: 3.5vw; color: #666; text-align: right; width: 95%; margin: 0 auto;}
	#map > p i{ font-size: 5vw; padding-right: 1%; color: #957d37;}
	
	/*マットレス一覧*/
	div.item_box{ width: 100%; margin-top: 10vw;}
	div.item_box div.mida{ width: 100%; background-color: #202529; color: #fff; padding: 2vw 0; font-weight: bold; display: flex;}
	div.item_box div.mida > p{/*display: inline-block;*/ vertical-align: top; border: 1px solid #fff; font-size: 3.5vw; padding: 1vw; margin-right: 2vw;}
	div.item_box > p.item_name{ color: #fff; background-color: #202529; font-weight: bold; padding: 0.5vw 0 1vw 2vw; font-size: 6vw;}
	div.item_box div.mida > p:nth-child(1){margin-left: 2vw;}
	div.item_box div.mida > p span{ font-size: 4.5vw;}
	div.item_box div.mida > p span.num{padding: 0 0.5vw;}
	div.item_box div.mida > ul{ margin-left: 1vw; letter-spacing: 3px;}
	div.item_box div.mida > ul > li:nth-child(1){font-size: 4.5vw; margin: 1.5vw 0 0; font-weight: normal;}
	div.item_box div.mida > ul > li:nth-child(2){ display: none !important;/*font-size: 6vw;*/}
	div.item_box div.mida > ul > li.urethane{ font-size: 6vw;}
	
	/*サイズマトリクス*/
	div.item_box ul.size_mtx{ width: 99%; margin: 10px auto 0; display: flex; justify-content: space-between; }
	div.item_box ul.size_mtx > li{ width: calc(98%/3);}
	div.item_box ul.size_mtx li a{ display: block; border: 1px solid #202529;}
	/*div.item_box ul.size_mtx li a:hover{ opacity: 0.9;}*/
	div.item_box ul.size_mtx li a > div.size_top{ width: 100%; background-color: #9e9e9e; text-align: center; display: flex; justify-content: space-around; padding-top: 1vw;}
	div.item_box ul.size_mtx li a > div.size_top > p{ /*width: 35%;*/ font-weight: bold; font-size: 8vw; color: #21262a; padding-top: 0.5vw;}
	div.item_box ul.size_mtx li a > div.size_top > ul{ /*width: 55%;*/ color: #fff; font-weight: bold; font-size: 3.5vw;}
	div.item_box ul.size_mtx li a > div.size_top > ul li span{ font-size: 5vw; padding-right: 3px;}
	div.item_box ul.size_mtx li a div.prices{ text-align: left; padding: 10px 0; font-size: 4.5vw; font-weight: bold; color: #957d37; position: relative; padding-left: 1vw;}
	div.item_box ul.size_mtx li a div.prices::after{ position: absolute; font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 900; color: #1f2428; top: 50%; right: 0.5vw; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 5vw;}
	
	
	/***モーダルウィンドウ***/
	/*起動ボタン（sp時）*/
	.js-modal-open.pc_none{ cursor: pointer; background-color: #34282d; color: #fff; padding: 2.5% 0; border-radius: 8px; margin: 5.5vw auto; width: 75%;}	
	.js-modal-open.pc_none:active{ background-color: #221a1d;}
	.js-modal-open.pc_none p{ margin-top: 0 !important; font-weight: bold; font-size: 85%; position: relative;}
	.js-modal-open.pc_none p span{ font-size: 150%; margin-right: 1%;}
	.js-modal-open.pc_none p::after{ font-family: "Font Awesome 5 Free"; content: '\f055'; font-weight: 900; position: absolute; right: 3%; top: 1.5vw;}
	
    /*{ margin: 0; padding: 0; }*/
    /* モーダル全体(背景＋本体) */
    .modal{ display: none; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 9999;	line-height: 1;}
    /* モーダル背景 */
    .modal-bg{ position: absolute; height: 100vh; width: 100%; background: rgba(0, 0, 0, 0.8); cursor: pointer;}
    /* モーダル本体 */
    .modal-content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden;  height: auto; width: 95%; /*background: white;*/}
	.modal-content img{ max-width: 100%;}
	.modal-content02{ position: relative; line-height: 1;}
	.modal-content02 .js-modal-close{ position: absolute; top: 1.5vw; right: 3%; font-size: 7vw; color: #fff; cursor: pointer;}
	
	/*モーダル内のマットレス一覧*/
	.modal-content div.item_box{ margin-top: 0!important; padding-bottom: 1vw;}
	.modal-content div.item_box ul.size_mtx{ width: 100%; background-color: #fff; margin: 0 auto; padding: 10px 0; justify-content: space-around;}
	
	/*フッター*/
	div#foot{ max-width: 100%; margin: 8vw auto 5vw; border-top: 1px solid #6c6c6c; padding-top: 5vw;}
	div#foot ul{ display: flex; justify-content: center;}
	div#foot ul li a{ display: block; color: #333; font-size: 85%;}
	/*div#foot ul li a span{ border-bottom: 1px solid #fff;}*/
	div#foot ul li:nth-child(2) a{ margin: 0 5vw; border-right: 1px dashed #6b6c6c; border-left: 1px dashed #6b6c6c; padding: 0 5vw;}		
	
	
	
	
}/*smp-end*/


/*PC*/
@media screen and (min-width: 640px){
	
	body{ background: #fff;}

	a:hover img{ opacity:0.8;}
	.pc_none{ display: none !important;}
	
	/*コンテンツ*/
	#wrap{ width: 750px; margin: 0 auto;}
	
	/*看板画像*/
	#kanban_wrap{ width: 100%;}
	#kanban_wrap img{ max-width: 100%;}
	
	
	/*マップ*/
	#map{ width: 100%; position: relative;}
	#map img{ max-width: 100%;}
	#map img.pmts20n{position: absolute; bottom: 115px; left: 310px; cursor: pointer;}
	#map img.pmts21n{position: absolute; bottom: 115px; right: 55px; cursor: pointer;}
	#map img.pmts22n{position: absolute; bottom: 152px; left: 200px; cursor: pointer;}
	#map img.pmts25n{position: absolute; bottom: 190px; left: 55px; cursor: pointer;}
	#map img.pmtd30n{position: absolute; top: 155px; left: 180px; cursor: pointer;}
	#map img.pmts30h{position: absolute; top: 144px; right: 200px; cursor: pointer;}	
	#map > p{ font-size: 13px; color: #666; text-align: right; width: 95%; margin: 0 auto;}
	#map > p i{ font-size: 15px; padding-right: 5px; color: #957d37;}
	
	/*マットレス一覧*/
	div.item_box{ width: 100%; margin-top: 45px;}
	div.item_box div.mida{ width: 100%; background-color: #202529; color: #fff; padding: 15px 0; font-weight: bold; }
	div.item_box div.mida > p{display: inline-block; vertical-align: top; border: 1px solid #fff; font-size: 25px; padding: 10px; margin-right: 7px;}
	div.item_box div.mida > p:nth-child(1){margin-left: 20px;}
	div.item_box div.mida > p span{ font-size: 30px;}
	div.item_box div.mida > p span.num{padding: 0 2px;}
	div.item_box div.mida > ul{display: inline-block; vertical-align: bottom; margin-left: 20px; letter-spacing: 3px;}
	div.item_box div.mida > ul > li:nth-child(1){font-size: 20px; margin-bottom: 0px; font-weight: normal;}
	div.item_box div.mida > ul > li:nth-child(2){font-size: 30px;}
	div.item_box div.mida > ul > li.urethane{ font-size: 28px;}
	
	/*サイズマトリクス*/
	div.item_box ul.size_mtx{ width: 98%; margin: 10px auto 0; display: flex; justify-content: space-between; }
	div.item_box ul.size_mtx > li{ width: calc(97%/3);}
	div.item_box ul.size_mtx li a{ display: block; border: 1px solid #202529;}
	div.item_box ul.size_mtx li a:hover{ opacity: 0.9;}
	div.item_box ul.size_mtx li a > div.size_top{ width: 100%; display: flex; justify-content: space-around; background-color: #9e9e9e; text-align: center; padding-top: 10px;}
	div.item_box ul.size_mtx li a > div.size_top > p{ /*width: 35%;*/ font-weight: bold; font-size: 55px; color: #21262a;}
	div.item_box ul.size_mtx li a > div.size_top > ul{ /*width: 55%;*/ color: #fff; font-weight: bold; font-size: 20px;}
	div.item_box ul.size_mtx li a > div.size_top > ul li span{ font-size: 30px; padding-right: 3px;}
	div.item_box ul.size_mtx li a div.prices{ text-align: left; padding: 10px 0; font-size: 30px; font-weight: bold; color: #957d37; position: relative; padding-left: 20px;}
	div.item_box ul.size_mtx li a div.prices::after{ position: absolute; font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 900; color: #1f2428; top: 50%; right: 5px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
	
	
	/***モーダルウィンドウ***/
	/*起動ボタン（PC時）*/
	.js-modal-open.smp_none{ cursor: pointer; position: absolute; right: 5px; bottom: 70px; background-color: #f0292c; color: #fff; padding: 10px; width: 90px; height: 90px; line-height: 90px; border-radius: 50%; box-shadow: 0 0 8px #2c2c22;
	background-image: -webkit-linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%);
  background-image:         linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%);
  background-repeat: no-repeat;}
	
	.js-modal-open.smp_none.wear_mofu{ bottom: 210px; right: 290px;}
	
	#wrap div.item_box ul.item_box2 > li:nth-child(n+2) .js-modal-open.smp_none{ bottom: 55px; width: 80px; height: 80px; line-height: 80px; border-radius: 50%;}
	#wrap div.item_box ul.item_box2 > li:nth-child(n+2) .js-modal-open.smp_none p{ font-size: 14px;}
	
	.js-modal-open.smp_none:hover{ background-color: #de373a;}
	.js-modal-open.smp_none p{ margin-top: 0 !important; font-weight: bold; position: relative; font-size: 15px;}
	.js-modal-open.smp_none p::after{ font-family: "Font Awesome 5 Free"; content: '\f055'; font-weight: 900; margin-left: 5px; position: absolute; bottom: -30px; left: 45%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
	
	
	/* これが無いとモーダルウィンドウ表示の際に余白が出る */
    /*{ margin: 0; padding: 0; }*/
    /* モーダル全体(背景＋本体) */
    .modal{ display: none; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 9999;	}
    /* モーダル背景 */
    .modal-bg{ position: absolute; height: 100vh; width: 100%; background: rgba(0, 0, 0, 0.8); cursor: pointer;}
    /* モーダル本体 */
    .modal-content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow-y: hidden;  overflow-x: hidden;  height: 702px; width: 750px; background: rgba(255,255,255,0); padding-top: 40px;}
	.modal-content img{ max-width: 100%;}
	
	.modal-content02{ position: relative;}
	.modal-content02 .js-modal-close{ position: absolute; top: -30px; right: 3px; font-size: 30px; color: #fff; cursor: pointer;}

	/*モーダル内のマットレス一覧*/
	.modal-content div.item_box{ margin-top: 0!important; background-color: #fff; padding-bottom: 10px;}
   
	/*フッター*/
	div#foot{ max-width: 750px; margin: 35px auto 20px; border-top: 1px solid #6c6c6c; padding-top: 20px;}
	div#foot ul{ display: flex; justify-content: center;}
	div#foot ul li a{ display: block; color: #333;}	
	div#foot ul li:nth-child(2) a{ margin: 0 50px; border-right: 1px dashed #6b6c6c; border-left: 1px dashed #6b6c6c; padding: 0 50px;}
	
	
	
}

/*ラグ部分マトリクスIE表示くずれ対策*/
@media all and (-ms-high-contrast: none) {
	#wrap div.item_box ul.item_box2.lug ul.size_mtx1 li a div.prices > span{
		transform: none;
	}
	#wrap div.item_box ul.item_box2.lug ul.size_mtx2 li a div.prices > span{
		transform: none;
	}
}