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

/*▽基本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; }
p{ margin-bottom:0; }

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


	#wrap{
		padding: 0;
	}

/*smp*/
@media screen and (max-width: 640px){
	
	#wrap .smp_none{ display: none !important;}
	
	/*コンテンツ大枠*/
	#wrap{
		width: 100%;
		margin: 5vw auto 8vw;
		/*overflow: hidden;*/
	}
	/*タブ調整*/
	#wrap .tab-group{
        display: flex;
        justify-content: center;
		flex-wrap: wrap;
		width: 100%;
		margin-bottom: 2vw;
		/*border-bottom: 5px solid #a7995b;*/
    }
	#wrap .tab{
		width: calc(98%/3);        
        padding:2vw 0 0;
        list-style:none;
        /*border:solid 1px #CCC;*/
        text-align:center;
        cursor:pointer;
		background-color: #dbdbdb;
		color: #202529;
		border-radius: 5px 5px;
		font-size: 3.5vw;
		font-weight: bold;
    }
	#wrap .tab:nth-child(2){
		margin: 0 1%;
		/*border-right: 2px solid #eee;
		border-left: 2px solid #eee;*/
	}
	#wrap .tab:nth-child(4){
		margin-right: 0.5%;
	}
	#wrap .tab:nth-child(5){
		margin-left: 0.5%;
	}
	.tab:nth-child(n+4){		
		margin-top: 1.5%;		
		/*border-top: 2px solid #eee;*/
	}
	#wrap .tab > span{
		font-size: 5vw;
		padding-right: 1vw;
	}
	#wrap span.point{
		font-weight: normal;
		font-size: 3vw;
	}
	#wrap span.setprice{
		border-top: solid 1px;
		line-height: 2 !important;
		/*padding-top: 1vw;*/
	}
	#wrap .panel-group{
        width:100%;        
        
    }
	#wrap .panel_sheep{
        display:none;
		width: 100%;
    }
	#wrap .panel_sheep > img{        
		max-width: 100%;
    }
	#wrap .tab.is-active{
        background:#a7995b;
        color:#FFF;
        transition: all 0.2s ease-out;
    }
	#wrap .panel_sheep.is-show{
        display:block;
        position: relative;
    }

	/*画像上価格*/
	#wrap p.imgprice{
		position: absolute;
		top: 4vw;
		right: 4.8vw;
		font-size: 4.5vw;
		font-weight: bold;
		color: #FFF;
}
	/*マットレス一覧*/
	#wrap .panel_sheep .mat_item{
		width: 100%;
		margin-top: 5vw;
	}
	#wrap .panel_sheep .mat_item h1{
		font-size: 6vw;
		margin-bottom: 3vw;
		font-weight: bold;
		position: relative;        
        border-bottom: solid 2px #c3bfad;
	}
	#wrap .panel_sheep .mat_item h1:after{
		position: absolute;
        bottom: -2px;
        content: " ";
        display: block;
        width: 15%;
        border-bottom: solid 2px #002746;
	}
	#wrap .panel_sheep .mat_item > ul.scroll_list{
		max-width: 640px;
		overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
		padding-bottom: 3vw;
	}
	#wrap .panel_sheep .mat_item > ul > li{
		width: 45%;	
		display: inline-block;        
	}
	#wrap .panel_sheep .mat_item > ul > li a{
		display: block;
		background-color: #f3f3f3;
		text-align: center;
		padding: 3%;
		white-space: normal;
	}
	#wrap .panel_sheep .mat_item > ul > li img{
		max-width: 95%;		
	}
	#wrap .panel_sheep .mat_item > ul > li p.item_name01{
		font-size: 3.5vw;
		font-weight: bold;
		margin: 2vw auto 1.5vw;
		color: #002746;
	}
	#wrap .panel_sheep .mat_item > ul > li p.item_name01 > span:nth-child(1){
		font-size: 5vw;
		padding-left: 2%;
		vertical-align: text-bottom;
	}
	#wrap .panel_sheep .mat_item > ul > li p.item_name01 > span.small{
		font-size: 3vw;
		padding: 0 1%;
	}
	#wrap .panel_sheep .mat_item > ul > li p.item_name02{
		font-size: 3.5vw;
		font-weight: bold;
		margin: 2vw auto 1.5vw;
	}
	#wrap .panel_sheep .mat_item > ul > li ul.point{
		border-top: 1px solid #cfcfcf;
        padding: 2vw 0 3vw;
        margin-top: 10vw;
		text-align: left;
		font-size: 3.5vw;
	}
	#wrap .panel_sheep .mat_item > ul > li ul.point p::before{
		font-family: "Font Awesome 5 Free";
        content: '\f058';
        font-weight: 900;
		margin: 0 1.5vw;
		color: #a7995b;
	}
	
	#wrap .panel_sheep .mat_item > ul > li p.buy_btn{
		width: 90%;
		font-size: 3.5vw;
		color: #fff;
		background-color: #12446c;
		padding: 2vw 0;		
		margin: 0 auto 2vw;
		position: relative;
	}
	#wrap .panel_sheep .mat_item > ul > li p.buy_btn::after{
		font-family: "Font Awesome 5 Free";
        content: '\f101';
        font-weight: 900;		
		position: absolute;
		top: 50%;
        right: 2vw;  
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	/*その他のサイズ*/
	#wrap .panel_sheep .size_item{
		width: 100%;
		margin: 8vw 0 0;
	}
	#wrap .panel_sheep .size_item h1{
		font-size: 6vw;
		margin-bottom: 3vw;
		font-weight: bold;
		position: relative;
        border-bottom: solid 2px #c3bfad;
    }
	#wrap .panel_sheep .size_item h1:after {
        position: absolute;
        bottom: -2px;
        content: " ";
        display: block;
        width: 20%;
        border-bottom: solid 2px #002746;
    }
	#wrap .panel_sheep .size_item > ul{
		width: 100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	#wrap .panel_sheep .size_item > ul li{
		width: calc(98%/2);		
	}
	#wrap .panel_sheep .size_item > ul li:nth-child(3){
		margin-top: 2vw;
	}
	#wrap .panel_sheep .size_item > ul li a{		
		display: flex;
		justify-content: space-between;
		border: 1px solid #afafaf;
		position: relative;
	}
	#wrap .panel_sheep .size_item > ul li a::after{
		position: absolute;
		top: 50%;
        right: 0.1px;        
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
		transform: translateY(-50%);
		font-family: "Font Awesome 5 Free";
        content: '\f105';
        font-weight: 900;	
		color: #afafaf;
		font-size: 14px;
	}
	#wrap .panel_sheep .size_item > ul li a > div{
		text-align: center;
		height: 17vw;
		position: relative;
	}
	/*box01*/
	#wrap .panel_sheep .size_item > ul li a > div.box01{		
		width: 35%;	
	}
	/*box02*/
	#wrap .panel_sheep .size_item > ul li a > div.box02{		
		width: 40%;	
	}
	#wrap .panel_sheep .size_item > ul li a > div.box02 > div{
		position: absolute;
		top: 50%;
        left: 50%;        
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
	}
	#wrap .panel_sheep .size_item > ul li a > div.box02 > div p{
		font-size: 3vw;
		color: #505050;
		margin-bottom: 0.5vw;
	}
	#wrap .panel_sheep .size_item > ul li a > div.box02 > div div.prices{
		font-size: 3.5vw;
		font-weight: bold;
		color: #333;
	}
	/*box03*/
	#wrap .panel_sheep .size_item > ul li a > div.box03{		
		width: 20%;		
		margin-right: 5%;
	}
	#wrap .panel_sheep .size_item > ul li a > div.box03 > p{
		position: absolute;
		top: 50%;
        left: 50%;        
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		padding: 2vw 0;
		background-color: #c3bfad;	
		border-radius: 8px;
		font-weight: bold;
		font-size: 5vw;
		color: #12446c;
	}
	#wrap .panel_sheep .size_item > ul li img{
		max-height: 100%;
		width: auto;
	}
	
	.textbox02b span {
		line-height: 100%;
	}
	div.item_zbox {
		line-height:0;
	}

}/*smp-end*/


/*PC*/
@media screen and (min-width: 640px){
	
	#wrap a:hover img{ opacity:0.8;}
	#wrap .pc_none{ display: none !important;}
	
	/*コンテンツ大枠*/
	#wrap{
		max-width: 750px;
		margin: 30px auto 10px;
	}
	/*タブ調整*/
	#wrap .tab-group{
        display: flex;
        justify-content: space-between;
		width: 100%;
		border-bottom: 5px solid #a7995b;
    }
	#wrap .tab{
		width: calc(95%/5);        
        padding:10px 0 0;
        list-style:none;
        /*border:solid 1px #CCC;*/
        text-align:center;
        cursor:pointer;
		background-color: #dbdbdb;
		color: #202529;
		border-radius: 5px 5px 0 0; /* 左上、右上、右下、左下 */
		font-size: 15px;
		font-weight: bold;
    }
	#wrap .tab > span{
		font-size: 23px;
		padding-right: 3px;
	}
	#wrap span.point{
		font-weight: normal;
		font-size: 13px;
	}
	#wrap span.setprice{
		border-top: solid 1px;
		margin-top: 2px;
		line-height: 2;
	}
	#wrap .panel-group{
        width:100%;        
        
    }
	#wrap .panel_sheep{
        display:none;
		width: 100%;
    }
	#wrap .panel_sheep > img{        
		max-width: 100%;
    }
	#wrap .tab.is-active{
        background:#a7995b;
        color:#FFF;
        transition: all 0.2s ease-out;
    }
	#wrap .panel_sheep.is-show{
        display:block;
        position: relative;
    }

	/*画像上価格*/
	#wrap p.imgprice{
		position: absolute;
		top: 28px;
		right: 54px;
		font-size: 30px;
		font-weight: bold;
		color: #FFF;
}
	/*マットレス一覧*/
	#wrap .panel_sheep .mat_item{
		width: 100%;
		margin-top: 25px;
	}
	#wrap .panel_sheep .mat_item h1{
		font-size: 20px;
		margin-bottom: 8px;
		font-weight: bold;
		position: relative;
        padding-bottom: 3px;
        border-bottom: solid 2px #c3bfad;
	}
	#wrap .panel_sheep .mat_item h1:after{
		position: absolute;
        bottom: -2px;
        content: " ";
        display: block;
        width: 20%;
        border-bottom: solid 2px #002746;
	}
	#wrap .panel_sheep .mat_item > ul{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	#wrap .panel_sheep .mat_item > ul > li{
		width: calc(99%/5);	
/*		border-right: 1px dotted #fff;*/
	}
	#wrap .panel_sheep .mat_item > ul > li a{
		display: block;
		background-color: #f3f3f3;
		text-align: center;
		padding: 5px;		
	}
	#wrap .panel_sheep .mat_item > ul > li img{
		max-width: 95%;		
	}
	#wrap .panel_sheep .mat_item > ul > li p.item_name01{
		font-size: 14px;
		font-weight: bold;
		margin: 10px 0 5px;
		color: #002746;
	}
	#wrap .panel_sheep .mat_item > ul > li p.item_name01 > span:nth-child(1){
		font-size: 17px;
/*		padding-left: 2px;*/
		vertical-align: baseline;
	}
	#wrap .panel_sheep .mat_item > ul > li p.item_name01 > span.small{
		font-size: 13px;
	}
	#wrap .panel_sheep .mat_item > ul > li p.item_name02{
		font-size: 14px;
		font-weight: bold;
		margin: 10px 0 5px;
	}
	#wrap .panel_sheep .mat_item > ul > li ul.point{
		border-top: 1px solid #cfcfcf;
        padding: 10px 0;
        margin-top: 5px;
		text-align: left;
		font-size: 13px;
	}
	#wrap .panel_sheep .mat_item > ul > li ul.point p::before{
		font-family: "Font Awesome 5 Free";
        content: '\f058';
        font-weight: 900;
		margin: 0 5px;
		color: #a7995b;
	}
	
	#wrap .panel_sheep .mat_item > ul > li p.buy_btn{
		width: 90%;
		font-size: 12px;
		color: #fff;
		background-color: #12446c;
		padding: 5px 0;		
		margin: 0 auto 5px;
		position: relative;
	}
	#wrap .panel_sheep .mat_item > ul > li p.buy_btn::after{
		font-family: "Font Awesome 5 Free";
        content: '\f101';
        font-weight: 900;		
		position: absolute;
		top: 50%;
        right: 5px;        
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	/*その他のサイズ*/
	#wrap .panel_sheep .size_item{
		width: 100%;
		margin: 40px 0 0;
	}
	#wrap .panel_sheep .size_item h1{
		font-size: 20px;
		margin-bottom: 8px;
		font-weight: bold;
		position: relative;
        padding-bottom: 3px;
        border-bottom: solid 2px #c3bfad;
    }
	#wrap .panel_sheep .size_item h1:after {
        position: absolute;
        bottom: -2px;
        content: " ";
        display: block;
        width: 20%;
        border-bottom: solid 2px #002746;
    }
	#wrap .panel_sheep .size_item > ul{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	#wrap .panel_sheep .size_item > ul li{
		width: calc(98%/3);		
	}
	#wrap .panel_sheep .size_item > ul li a{		
		display: flex;
		justify-content: space-between;
		border: 1px solid #afafaf;
		position: relative;
	}
	#wrap .panel_sheep .size_item > ul li a::after{
		position: absolute;
		top: 50%;
        right: 0.1%;        
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
		transform: translateY(-50%);
		font-family: "Font Awesome 5 Free";
        content: '\f105';
        font-weight: 900;	
		color: #afafaf;
		font-size: 14px;
	}
	#wrap .panel_sheep .size_item > ul li a > div{
		text-align: center;
		height: 85px;
		position: relative;
	}
	/*box01*/
	#wrap .panel_sheep .size_item > ul li a > div.box01{		
		width: 35%;	
	}
	/*box02*/
	#wrap .panel_sheep .size_item > ul li a > div.box02{		
		width: 40%;	
	}
	#wrap .panel_sheep .size_item > ul li a > div.box02 > div{
		position: absolute;
		top: 50%;
        left: 50%;        
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
	}
	#wrap .panel_sheep .size_item > ul li a > div.box02 > div p{
		font-size: 12px;
		color: #505050;
		margin-bottom: 3px;
	}
	#wrap .panel_sheep .size_item > ul li a > div.box02 > div div.prices{
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}
	/*box03*/
	#wrap .panel_sheep .size_item > ul li a > div.box03{		
		width: 20%;		
		margin-right: 5%;
	}
	#wrap .panel_sheep .size_item > ul li a > div.box03 > p{
		position: absolute;
		top: 50%;
        left: 50%;        
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		padding: 25% 0;
		background-color: #c3bfad;	
		border-radius: 8px;
		font-weight: bold;
		font-size: 20px;
		color: #12446c;
	}
	#wrap .panel_sheep .size_item > ul li img{
		max-width: 100%;
	}
	
	
	
	
}

/*ラグ部分マトリクス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;
	}
}