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

.title_wrap{
	color:#ffffff;
	padding: 1rem;
	background-color: #123359;
	margin: 2rem 0;
}

.category_title {
    background: #eeeeee;
    padding: 0.5rem 1rem;
    border-left: 15px solid #b3141f;
}

.text_box{
	text-align: right;
	color: #333333;
	padding: 0.5rem;
}

.loca{
	color: #123359;
	margin-bottom: 0;
	font-size: 80%;
}

.text_box h3{
	font-size: 80%;
	color: #333333;
}

.modal_loca{margin-bottom:0;}

.ph img{
	vertical-align: bottom;
	position: relative;
	-o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 50vw;
}


.ph::before{
	content: "";
	background-image: url("../../dist/default-skin.png");
	width: 20px;
	height: 20px;
}

.pswp__caption__center a{
	text-decoration: underline;
	text-decoration-color: #ffffff;
	text-decoration-style: dotted;
}
.pswp__caption__center a{
	text-decoration: underline;
	text-decoration-color: #ffffff;
	text-decoration-style: dotted;
}

.new::after{content: "";
    background-image: url("../../img/new.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    position: absolute;
    right: -3px;
    top: -3px;
    z-index: 80;}


.modal_title{
	color: #ffffff;
	font-weight: normal;
}

.modal_cate li{
	color: #ffffff;
	margin-right: 0.5em;
	display: inline;
}

.category_box .text_box{padding: 0.5rem;}

@media print, screen and (min-width: 980px){

.section{
	width:980px;
	margin: 5rem auto 2rem auto;
	overflow: inherit;
}
	
.section:first-of-type{
	margin-top: 0;
}
	
.title{
	width: 980px;
	margin: 0 auto;
	color:#ffffff;
	font-size: 170%;
	font-weight: normal;
}
	

	
}

.h02{
	font-size: 130%;
}

.category_wrap{
    display: grid;
    margin-top: 2rem;
	grid-column-gap: 1%;
}

.category_wrap a{text-decoration: none;}

.ph{
	width: 100%;
	box-sizing: border-box;
	border:1px solid #eeeeee;
	display: inline-block;
	text-align: right;
	margin-bottom: 1.5rem;
	position: relative;

}



@media screen and (min-width: 520px) and (max-width: 879px){
	
.category_wrap .ph{
}
	
.ph img{
    height: 50vw;
}
	
.category_wrap .ph:nth-child(2n){
	margin-right: 0;
}
	
/*最後に一つ追加して2つに*/
.category_wrap::after{
	content: "";
	width: 45%;
	height: 0;
	}
	
} /* 画面が480～980pxの場合 */



@media print, screen and (min-width: 880px){
.category_wrap{
grid-template-columns: 24% 24% 24% 24%;
	}

.category_wrap .ph{
	width: 100%;
	margin-right: 10px;
	}
	
figure.ph.pickup {
    grid-column: 1/3;
    grid-row: 1/3;
}

.ph img{
	vertical-align: bottom;
    height: 134px;
}
	
.pickup a img {
    height:355px;
}
	
.category_wrap .ph:nth-child(4n){
	margin-right: 0;
}

}

.ph:hover{
	box-shadow: 0 0 10px #cccccc;
}



.menu_img {
  width: 100%;
	vertical-align: top;
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
}
/*
.ph:hover .menu_img{
 -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
	
}*/

.loca li{
	display: inline-block;
	padding: 0.5em;
}

.nav_path{
	margin-bottom: 1rem;
    text-align: right;
    color: #123359;
}

.nav_path li{
	display: inline-block;
}


.nav_path li a{
    color: #123359;
}

.nav_path li::before{
	content: ">";
	margin: 0 0.5rem;
    color: #123359;
}


.page{text-align: center;}

.count li{
	font-size: 90%;
	padding: 0.2rem 0.7rem;
	display: inline-block;
	background-color: #ECECEC;
}

.count a{
	margin-right:0.5rem;
	color: #123359;
}

.count li:last-child{margin-right: 0;}

.count .none{display: none;}

.count .now{border: 1px solid #123359;}

.count .cut{
	background:none;
	padding: 0;
}

/*ie専用*/

@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, .category_wrap{
    display: -webkit-box;
	display: -ms-flexbox;
	-ms-flex-wrap: wrap;
}
	
*::-ms-backdrop, .category_wrap .ph{
  	width: 24%;
	margin-right: 10px;
}
*::-ms-backdrop, .pickup a img{
		height: auto;
	}
	

}