@charset "utf-8";

/*-----------------------------------------------
  mainVisual
-----------------------------------------------*/
#mainVisual {
position: relative;
}
#mainVisual p {
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 200px);
z-index: 9999;
width: 400px;
}
#mainVisual li img {
width: 100%;
max-height: 500px;
object-fit: cover;
}
@media screen and (max-width: 640px) {
}


/*-----------------------------------------------
  info
-----------------------------------------------*/
#info {
width: 100%;
margin-top: 8%;
}
#info h2 {
padding: 0.5em 1em;
font-size: 1.25em;
line-height: 1.25;
color: rgba(16,143,174,1);
border: 1px solid rgba(16,143,174,1);
border-radius: 2em;
}
#info ul {
height: 400px;
margin-top: 2%;
overflow-y: scroll;
}
#info li {
padding: 1em 0;
}
#info li:not(:first-child) {
border-bottom: 1px dotted #999;
}

/*-----------------------------------------------
  reccomend
-----------------------------------------------*/
#update {
font-size: 0.85em;
text-align: right;
}
#reccomend {
margin-top: 0.5em;
}
#reccomend h2 {
padding: 0.5em 1em;
font-size: 1.25em;
line-height: 1.25;
color: rgba(16,143,174,1);
border: 1px solid rgba(16,143,174,1);
border-radius: 2em;
}
#reccomend .list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#reccomend .list > a {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 47.5%;
margin-top: 4%;
}
#reccomend .list a:hover img {
opacity: 0.8;
}
#reccomend .list dl {
width: calc(100% - 140px);
}
#reccomend .list .photo {
width: 120px;
}
#reccomend .list .photo img {
width: 100%;
height: 120px;
border-radius: 5px;
object-fit: cover;
}
#reccomend .list .price {
color: rgba(16,143,174,1);
}
#reccomend .list .price span {
font-size: 1.5em;
}
#reccomend .list .comment {
font-size: 0.85em;
}