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

/* ---------------------------------------------------------------------------------------------

   Sub-top

--------------------------------------------------------------------------------------------- */
.genre-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    z-index: 50;
}

.genre-wrap .box{
    width: 25%;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.genre-wrap .box .box-bg{
    width: 100%;
    height: 320px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform .6s ease;
}
.box:hover .box-bg {
	transform: scale(1.1);
}

@media screen and (max-width:1400px) {

.genre-wrap .box{
    width: 33.33%;
}
}
@media screen and (max-width:1000px) {

.genre-wrap .box{
    width: 50%;
}
}
@media screen and (max-width:700px) {

.genre-wrap .box .box-bg{
    height: 200px;
}
}
@media screen and (max-width:500px) {

.genre-wrap .box .box-bg{
    height: 175px;
}
}


.box h2.sub-h2{
    position: absolute;
    top: 25%;
    width: 100%;
    align-items: center;
    text-align: center;
	font-size: clamp(20px, 3vw, 36px);
    line-height: 1;
    color: #fff;
    font-weight: 700;
    filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
    z-index: 10;
}

.box h2.sub-h2 span.eg{
	font-size: clamp(14px, 3vw, 20px);
    color: #fff;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
}

.box h2.sub-h2 span.read-more{
    display: block;
    width: 50%;
    text-align: center;
    padding: 2% 5%;
    /*border: 1px solid #000;*/
    background: #fff;
    border-radius: 25px;
    line-height: 1;
    font-weight: normal;
	font-size: clamp(10px, 2vw, 14px);
    font-family: 'Poppins', sans-serif;
    margin: 10% auto 0 auto;
    opacity: 0.75;
}
.box:hover h2.sub-h2 span.read-more{
    background: #f60;
}

@media screen and (max-width:700px) {

.box h2 span.read-more{
    width: 75%;
}
}

/* マスク */
.box::before {
	background: rgba(0, 0, 0, .5);/* マスクの色(黒の50%) */
	bottom: 0;
	content: '';
	height: auto;
	left: 0;
	opacity: 0;/* 最初は透明（非表示） */
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity .6s ease;/* ゆっくりopacityのみへ変化させる */
	width: 100%;
	z-index: 1;
}
.box:hover::before {
	opacity: 1;
}


/* ---------------------------------------------------------------------------------------------

   Eat-sub

--------------------------------------------------------------------------------------------- */

/* 食べる背景画像指定
------------------------------------------------------------*/
.japanese-food-nav{
	background-image: url("../eat/images/japanese-food-nav.png");
}
.western-food-nav{
	background-image: url("../eat/images/western-food-nav.png");
}
.chinese-food-nav{
	background-image: url("../eat/images/chinese-food-nav.png");
}
.grilled-meat-nav{
	background-image: url("../eat/images/grilled-meat-nav.png");
}
.sushi-seafood-nav{
	background-image: url("../eat/images/sushi-seafood-nav.png");
}
.kaiseki-cuisine-nav{
	background-image: url("../eat/images/kaiseki-cuisine-nav.png");
}
.asian-nav{
	background-image: url("../eat/images/asian-nav.png");
}
.izakaya-bar-nav{
	background-image: url("../eat/images/izakaya-bar-nav.png");
}
.cafe-nav{
	background-image: url("../eat/images/cafe-nav.png");
}
.sweets-bakery-nav{
	background-image: url("../eat/images/sweets-bakery-nav.png");
}
.takeout-nav{
	background-image: url("../eat/images/takeout-nav.png");
}
.buffet-nav{
	background-image: url("../eat/images/buffet-nav.png");
}


/* ---------------------------------------------------------------------------------------------

   Shopping-sub

--------------------------------------------------------------------------------------------- */

/* 買いもの背景画像指定
------------------------------------------------------------*/
.souvenir-shop-nav{
	background-image: url("../shopping/images/souvenir-shop-nav.png");
}
.fresh-food-nav{
	background-image: url("../shopping/images/fresh-food-nav.png");
}
.supermarket-nav{
	background-image: url("../shopping/images/supermarket-nav.png");
}
.convenience-store-nav{
	background-image: url("../shopping/images/convenience-store-nav.png");
}
.fashion-goods-nav{
	background-image: url("../shopping/images/fashion-goods-nav.png");
}
.flower-shop-nav{
	background-image: url("../shopping/images/flower-shop-nav.png");
}
.cars-bikes-nav{
	background-image: url("../shopping/images/cars-bikes-nav.png");
}
.other-stores-nav{
	background-image: url("../shopping/images/other-stores-nav.png");
}
.furniture-interior-nav{
	background-image: url("../shopping/images/furniture-interior-nav.png");
}
.appliance-nav{
	background-image: url("../shopping/images/appliance-nav.png");
}
.diy-tool-nav{
	background-image: url("../shopping/images/diy-tool-nav.png");
}
.stationery-nav{
	background-image: url("../shopping/images/stationery-nav.png");
}
.medicine-nav{
	background-image: url("../shopping/images/medicine-nav.png");
}