@charset "utf-8";
/* CSS Document */

#container{
	padding-top: 2%;
}

.title {
	font-size: 1rem;
	margin: 0 0 10px;
	letter-spacing: 0.25rem;
}

#main{
	width: 1020px;
	float:right;
}

#reccomend {
	margin:0 0 6%;
}

#reccomend h3 {
	text-align: center;
	letter-spacing: 0.25rem;
	font-size: 1.33rem;
	color: #FF7F00;
	font-weight: 700;
	margin: 0 0 4%;
}

#reccomend h3::before{
	content: '';
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url(/img/icon_shop.svg) no-repeat center top / contain;
	vertical-align: middle;
	padding: 0 30px 0 0;
	margin: -5px 0 0;
}


#reccomend ul {
}

#reccomend li{
	width: 240px;
	float:left;
	position:relative;
	margin: 0px 20px 0 0;
}

#reccomend li:last-child{
	margin:0;
}

.icon{
	position:absolute;
	background-color:#FF4D4D;
	text-align:center;
	color:#FFF;
	width:40px;
	height:40px;
	border-radius:20px;
	font-size:0.78rem;
	line-height:3.5em;
	right:2px;
	top:2px;
}

#reccomend li .photo{
}

#reccomend li .photo a img{
	width:100%;
	transition: 0.5s;
}

#reccomend li .photo a:hover img{
	filter:Alpha(opacity=40) ;
	opacity:0.4 ;
	-moz-opacity:0.4;
}

#reccomend li .shop{
	margin:5% 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#reccomend li .price{
}

#reccomend li .price span{
	font-size: 0.66rem;
	margin: 0 2% 0 0;
}

#number{
	overflow:hidden;
	margin:0 0 2%;
}

#number .thum{
}

#number .thum .select {
    display: inline-block;
    width: 280px;
}

#number .thum .select.short {
    width: 100px;
}

#number .thumr{
}

#detail{
}

#detail ul{
}

#detail li{
	border: 4px solid #ffdada;
	padding: 20px;
	margin:0 0 5%;
	position: relative;
}

#detail .data{
	font-weight: 700;
	font-size: 1.33rem;
}

#detail h3{
}

#detail h3 a{
	/* color:#ff5555; */
}

#detail h3 a:hover{
	color:#FF7F00;
}

#detail .tel{
	font-weight: 700;
	font-size: 1.66rem;
	position: absolute;
	top: 20px;
	right: 20px;
}

.tel a{
	color:#FF7F00;
}

.tel::before{
	content: '';
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url(/img/icon_tel.svg) no-repeat center top / contain;
	vertical-align: middle;
	padding: 0 10px 0 0;
	margin: -5px 0 0;
}

#detail .type{
	color: #4e2600;
}

#detail .type span {
	color: #FF7F00;
	font-size: 0.77rem;
	margin: 0 1% 0 0;
}

.item {
}

.item ul {
	margin: 4% 0;
}

#detail .item li {
	border:none;
	width: 240px;
	float:left;
	position:relative;
	margin: 0px 4px 0 0;
	padding: 0;
}

#detail .item li:last-child {
	margin: 0;
}

.item ul .photo{
}

.item ul .photo img {
	width:100%;
}

.item ul .photo a img {
	transition: 0.5s;
}

.item ul .photo a:hover img {
	filter:Alpha(opacity=40) ;
	opacity:0.4 ;
	-moz-opacity:0.4;
}

.item ul .shop{
	margin: 5% 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item ul .price{
}

.comment {
	font-size: 0.88rem;
}



/* =============================================================================
   Device
   ========================================================================== */


@media screen and (max-width: 768px) {
	#container .container{
		width: 100%;
	}
	#side {
	    width: auto;
	    float: none;
	}
	#main {
	    width: auto;
	    float: none;
	}
	#reccomend {
		padding: 0 2%;
	}
	#reccomend h3 {
		font-size: 1rem;
	}
	#reccomend h3::before {
		height: 20px;
		width: 20px;
		padding: 0 20px 0 0;
	}
	#reccomend li{
	    width: 49%;
		margin:0 0 5%;
	}
	#reccomend li:nth-child(odd){
		margin-right: 2%;
	}
	#reccomend li .shop {
		margin: 2% 0 0;
	}
	.icon {
	    width: 30px;
	    height: 30px;
	    border-radius: 15px;
	    font-size: 0.55rem;
	    right: 2px;
	    top: 2px;
	}
	#number{
		padding: 0 2%;
	}
	#number .thum{
		float: none;
		width: 100%;
	}
	#number .thumr{
		float: none;
		text-align: right;
		margin: 2% 0 0;
		font-size: 0.78rem;
	}
	#number .thum .select{
		width: 74%;
	}
	#number .thum .select.short {
		width: 24%;
	}
	#detail li{
		padding:4%;
	}
	#detail .data {
	    font-size: 1.13rem;
	}
	#detail .tel{
		position:inherit;
		font-size: 1.13rem;
	}
	.tel::before{
		height: 18px;
		width: 18px;
	}
	#detail .type {
		font-size: 0.78rem;
	}
	#detail .type span {
		font-size: 0.55rem;
	}
	.item ul {
	    margin: 4% 0 0;
	}
	#detail .item li {
	    width: 49%;
		margin:0 0 5%;
	}
	#detail .item li:nth-child(odd) {
		margin-right: 2%;
	}

	#detail .item li .shop {
	    font-size: 0.88rem;
		margin: 2% 0 0;
	}
	.comment {
	    font-size: 0.78rem;
		text-align: justify;
		text-justify: inter-ideograph;
	}
}