@charset "UTF-8";

/* item section */
div.item { width:100%; margin:200px 0 0 0; padding:0; overflow: hidden; }
h2.it_h2 { width:50%; max-width: 350px; margin:0 auto; padding:20px 0 20px 0; border-style:solid; border-color:#000; border-width:2px 0 2px 0; font-size:200%; text-align: center; }

div.item_box { width:100%; margin:20px 0 0 0; padding:0; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }

div.item_obj { margin:20px 0 0 0; padding:0;  text-align: center; cursor: pointer; /*overflow: hidden;*/}
div.item_obj_in { width:95%; margin:0 auto 0 auto; padding: 0; border-radius: 5px; overflow: hidden; position: relative; }
div.item_img { width:100%; height: 200px; margin:0; padding:0; border-radius: 5px 5px 0 0; overflow: hidden; position: relative; }
div.item_img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;  }
div.item_img img { height: calc(100% + 16px); -webkit-transform: translateY(-16px); transform: translateY(-16px); }


div.item_obj_in,.item_img img { transition-duration:0.3s; transition-timing-function:ease; }
div.item_obj_in:hover { -webkit-transform: translateY(-16px); transform: translateY(-16px); }
div.item_obj_in:hover .item_img img { -webkit-transform: translateY(0); transform: translateY(0); }
div.item_obj_in:hover .item_str_box { background-color: #F5ECDB; }

div.item_str_box { width:100%; margin:0; padding:0; background-color: #D2D2D2; overflow: hidden; }
p.item_title { width:90%; margin:0 auto; padding:15px 0 0 0; font-size: 110%; text-align: center; color:#000; white-space: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
p.item_mess { width:90%; margin:15px auto 0 auto; padding:0; font-size: 100%; text-align: center; color:#000; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 32px; text-align: left; }
p.item_amount { width:90%; margin:15px 0 0 0; padding:0 0 15px 0; font-size: 100%; text-align: center; color:#000; text-align: right; }
p.item_label { margin:0; padding:5px 10px 5px 10px; border-radius: 4px; color:#fff; position: absolute; top:0; left:0; z-index:+1; }
span.kan { margin:0; padding:3px; background-color:#D36D6D; color:#fff; font-size:90%; }

div.sr_box { width:90%; max-width:300px; margin:20px auto 0 auto; padding:0; }
select.sr_sel { width:100%; margin:0; padding: 15px; border:none; background-color: #E4E4E4; font-size: 110%; }
select.sr_sel {-webkit-appearance: none; appearance: none; background-image: url(../app/img/arrow.png); background-position: right 5px center; background-repeat: no-repeat; background-size: 10px 10px; }

div.pre_info_box { width:95%; margin:20px auto -10px auto; padding:0; overflow: hidden; position: relative; }
p.pre_info { width:100%; margin:0; padding:0; font-size: 90%; text-align: right; }
span.dot_line { border-style:dotted; border-color:#8F8F8F; border-width:0 0 1px 0; cursor: pointer; }
span.dot_line:hover { color:#E474EB; cursor: pointer; }



/* ------------------------------------------------------
media query
-------------------------------------------------------- */
@media screen and (min-width: 300px ) and (max-width:599px) {
	body { font-size:100%; }
	div.item { margin:100px 0 0 0; }
	h2.it_h2 { font-size:110%; }
	div.item_box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
	div.item_img { height: 100px; }
	div.item_str_box { font-size: 90%; }
	p.pre_info { font-size: 85%; letter-spacing: 1px; }

}

@media screen and (min-width: 600px ) and (max-width:899px) {
	h2.it_h2 { font-size:130%; }
	div.item_box { grid-template-columns: repeat(2, 1fr); gap: 5px; }
}

@media screen and (min-width: 900px ) and (max-width:1100px) {
	div.item_box { grid-template-columns: repeat(3, 1fr); gap: 5px; }
}

@media screen and (min-width: 1450px ) and (max-width:1850px) {
	div.item_img { height: 170px; }
	div.item_box { grid-template-columns: repeat(5, 1fr); gap: 5px; }
}

@media screen and (min-width: 1851px ) and (max-width:2200px) {
	div.item_img { height: 170px; }
	div.item_box { grid-template-columns: repeat(6, 1fr); gap: 5px; }
}

@media screen and (min-width: 2201px ) and (max-width:2400px) {
	div.item_box { grid-template-columns: repeat(6, 1fr); gap: 5px; }
}

@media screen and (min-width: 2401px ) and (max-width:2600px) {
	div.item_img { height: 170px; }
	div.item_box { grid-template-columns: repeat(7, 1fr); gap: 5px; }
}

@media screen and (min-width: 2601px ) and (max-width:2800px) {
	div.item_img { height: 170px; }
	div.item_box { grid-template-columns: repeat(8, 1fr); gap: 5px; }
}

@media screen and (min-width: 2801px ) and (max-width:3300px) {
	div.item_img { height: 170px; }
	div.item_box { grid-template-columns: repeat(9, 1fr); gap: 5px; }
}

@media screen and (min-width: 3301px ) and (max-width:4000px) {
	div.item_img { height: 170px; }
	div.item_box { grid-template-columns: repeat(10, 1fr); gap: 5px; }
}