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

/*-----------------------------------------------
#E86480
-----------------------------------------------*/


/*-----------------------------------------------
  mainVisual
-----------------------------------------------*/

#mainVisual {
width:100%;
}


/*-----------------------------------------------
  search
-----------------------------------------------*/

#search ul {
display:flex;
flex-flow:row wrap;
justify-content:space-between;
align-items:center;
}
#search li {
width:calc(33.33% - 1.33em);
border:1px solid #F1F1F1;
}
#search li a  {
color:#333;
transition:all 0.3s ease;
}
#search li a:hover  {
opacity:0.7;
}

@media screen and (max-width:640px) {
#search li {
width:48%;
margin:1% 0;
}
}


/*-----------------------------------------------
  reccomend
-----------------------------------------------*/

#recommend {
width:92%;
max-width:1000px;
margin:0 auto;
}
#recommend .inner {
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
align-items:stretch;
}
#recommend dl {
display:block;
width:23.5%;
margin:1em 1%;
text-align:center;
color:#333;
transition:all 0.3s ease;
}
#recommend dl:nth-child(4n + 1) {
margin-left: 0;
}
#recommend dl:nth-child(4n + 4) {
margin-right: 0;
}
#recommend .category {
padding:0.2em 0.5em;
color:#FFF;
background:#E86480;
}
#recommend .photo img{
width:100%;
height:160px;
object-fit:cover;
}
#recommend .name {
margin-top:0.5em;
}
#recommend .price {
}
#recommend .price span {
font-size:1.5em;
font-weight: bold;
}
#recommend .comment {
font-size:0.9em;
text-align:left;
}
#recommend .detail {
margin-top:2px;
text-align:left;
}
#recommend .detail a {
padding-left:12px;
color:#F60;
background:url(img/arw_osusume_detail.gif) left center no-repeat;
}
#recommend .detail a:hover {
text-decoration:underline;
}
#recommend .movie {
margin-top:2px;
text-align:left;
}
#recommend .movie a {
padding-left:12px;
color:#060;
background:url(img/arw_osusume_movie.gif) left center no-repeat;
}
#recommend .movie a:hover {
text-decoration:underline;
}

@media screen and (max-width:800px) {
#recommend .inner {
justify-content: space-between;
}
#recommend dl {
width:48%;
}
}


/*-----------------------------------------------
  news
-----------------------------------------------*/

#news ul {
margin-top: 1em;
height: 300px;
overflow-y: auto;
}
#news li {
padding: 0.8em;
border-bottom: 1px dotted #CCC;
}

#news dl {
display:flex;
flex-flow:row nowrap;
justify-content:flex-start;
align-items:center;
padding:1em 0;
line-height:1.5;
border-bottom:1px dotted #999;
}
#news .date {
margin-right:1em;
font-size:0.85em;
color:#999;
}
#news .category {
width:7em;
margin-right:0.8em;
padding:0.1em 0.5em;
text-align:center;
color:#FFF;
border-radius:0.2em;
}
#news .category.color1 {
background:#EE7800;
}
#news .category.color2 {
background:#0099D9;
}
#news .category.color3 {
background:#92308D;
}
#news .category.color4 {
background:#5CB531;
}
#news a:hover {
text-decoration:underline;
}

@media screen and (max-width:800px) {
#news dl {
flex-wrap:wrap;
}
#news dt {
width:100%;
margin-top:0.5em;
}
}


/*-----------------------------------------------
  message
-----------------------------------------------*/

#message dl {
max-width: 800px;
margin: 0 auto;
padding: 1.5em;
text-align: center;
border: 1px solid #CCC;
border-radius: 1em;
}
#message dt {
font-size: 1.5em;
color: #E86480;
}
#message dd {
margin-top: 0.5em;
}

@media screen and (max-width:640px) {
	#message dl {
	padding: 0 4% 0 6%;
	text-align: left;
	border: 0;
	border-radius: 0;
	border-left: 2px solid #E86480;
	}
	#message dt {
	font-size: 1.2em;
	}
}