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

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

   Sub-contents（全カテゴリーページ共通）

--------------------------------------------------------------------------------------------- */
.sub-contents-wrap{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

.sub-contents-item{
    width: 32%;
    margin-bottom: 2%;
    border: 1px solid #000;
	cursor: pointer;
    border-radius: 15px;
    position: relative;
}

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

.sub-contents-item{
    width: 49%;
}
}

@media screen and (max-width:800px) {
 
.sub-contents-item{
    width: 100%;
    margin-bottom: 4%;
}
}

/* Background背景マスク指定
------------------------------------------------------------*/
.sub-contents-item .box{
	overflow: hidden;
    width: 100%;
	position: relative;
}
.sub-contents-item .box .box-bg{
    width: 100%;
    height: 275px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform .6s ease;
}
.box:hover .box-bg {
	transform: scale(1.1);
}
/* マスク */
.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;
}


/* コンテンツ詳細指定
------------------------------------------------------------*/
.sub-contents-wrap h3{
    padding: 25px;
    text-align: center;
	font-size: clamp(20px, 2vw, 24px);
    line-height: 1.5;
}
.sub-contents-wrap h3 span{
	font-size: clamp(16px, 2vw, 20px);
    line-height: 1.5;
}

.sub-contents-item .more-wrap{
    padding: 25px;
}

.sub-contents-item .more-wrap .text-16{
    line-height: 1.75;
}

.sub-contents-item .more-wrap .read-more{
    text-align: center;
    line-height: 1;
    padding: 10px;
    border: 1px solid #000;
    border-radius: 25px;
	font-size: clamp(12px, 2vw, 14px);
    font-family: 'Poppins', sans-serif;
    width: 75%;
    margin: 25px auto 0 auto;
}
.sub-contents-item:hover .more-wrap .read-more{
    background: #f60;
}

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

.sub-contents-item .box .box-bg{
    height: 300px;
}
}

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

.sub-contents-item .box .box-bg{
    height: 250px;
}
}

@media screen and (max-width:800px) {
 
.sub-contents-item .box .box-bg{
    height: 375px;
}
}

@media screen and (max-width:600px) {
    
.sub-contents-wrap h3{
    padding: 20px;
}
.sub-contents-item .more-wrap{
    padding: 20px;
}
.sub-contents-item .box .box-bg{
    height: 300px;
}
}

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

.sub-contents-item .box .box-bg{
    height: 225px;
}
}



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

  食べる（背景画像指定）

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

/* 和食
------------------------------------------------------------*/
.japanese-food01{
	background-image: url("../eat/images/japanese-food01.png");
}
.japanese-food02{
	background-image: url(../eat/images/japanese-food02.png);
}
.japanese-food03{
	background-image: url("../eat/images/japanese-food03.png");
}
.japanese-food04{
	background-image: url(../eat/images/japanese-food04.png);
}
.japanese-food05{
	background-image: url(../eat/images/japanese-food05.png);
}
.japanese-food06{
	background-image: url(../eat/images/japanese-food06.png);
}
.japanese-food07{
	background-image: url(../eat/images/japanese-food07.png);
}
.japanese-food08{
	background-image: url(../eat/images/japanese-food08.png);
}
.japanese-food09{
	background-image: url(../eat/images/japanese-food09.png);
}


/* 洋食
------------------------------------------------------------*/
.western-food01{
	background-image: url(../eat/images/western-food01.png);
}
.western-food02{
	background-image: url(../eat/images/western-food02.png);
}
.western-food03{
	background-image: url(../eat/images/western-food03.png);
}


/* アジアン
------------------------------------------------------------*/
.asian-food01{
	background-image: url(../eat/images/asian-food01.png);
}


/* 焼肉・焼鳥・ステーキ
------------------------------------------------------------*/
.grilled-meat01{
	background-image: url(../eat/images/grilled-meat01.png);
}
.grilled-meat02{
	background-image: url(../eat/images/grilled-meat02.png);
}


/* 寿司・会席
------------------------------------------------------------*/
.sushi-seafood01{
	background-image: url(../eat/images/sushi-seafood01.png);
}


/* 会席・割烹旅館
------------------------------------------------------------*/
.kaiseki-cuisine01{
	background-image: url("../eat/images/kaiseki-cuisine01.png");
}
.kaiseki-cuisine02{
	background-image: url(../eat/images/kaiseki-cuisine02.png);
}
.kaiseki-cuisine03{
	background-image: url("../eat/images/kaiseki-cuisine03.png");
}
.kaiseki-cuisine04{
	background-image: url(../eat/images/kaiseki-cuisine04.png);
}
.kaiseki-cuisine05{
	background-image: url(../eat/images/kaiseki-cuisine05.png);
}


/* カフェ・喫茶
------------------------------------------------------------*/
.cafe01{
	background-image: url("../eat/images/cafe01.png");
}


/* テイクアウト
------------------------------------------------------------*/
.takeout01{
	background-image: url("../eat/images/takeout01.png");
}
.takeout02{
	background-image: url("../eat/images/takeout02.png");
}



/* 居酒屋・バー
------------------------------------------------------------*/
.izakaya-bar01{
	background-image: url("../eat/images/izakaya-bar01.png");
}
.izakaya-bar02{
	background-image: url("../eat/images/izakaya-bar02.png");
}


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

  買いもの（背景画像指定）

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

/* 量販店・スーパー
------------------------------------------------------------*/
.supermarket01{
	background-image: url("../shopping/images/supermarket01.png");
}
.supermarket02{
	background-image: url("../shopping/images/supermarket02.png");
}
.supermarket03{
	background-image: url("../shopping/images/supermarket03.png");
}
.supermarket04{
	background-image: url("../shopping/images/supermarket04.png");
}
.supermarket05{
	background-image: url("../shopping/images/supermarket05.png");
}
.supermarket06{
	background-image: url("../shopping/images/supermarket06.png");
}
.supermarket07{
	background-image: url("../shopping/images/supermarket07.png");
}
.supermarket08{
	background-image: url("../shopping/images/supermarket08.png");
}
.supermarket09{
	background-image: url("../shopping/images/supermarket09.png");
}


/* ファッション・雑貨
------------------------------------------------------------*/
.fashion-goods01{
	background-image: url("../shopping/images/fashion-goods01.png");
}
.fashion-goods02{
	background-image: url("../shopping/images/fashion-goods02.png");
}
.fashion-goods03{
	background-image: url("../shopping/images/fashion-goods03.png");
}


/* お土産
------------------------------------------------------------*/
.souvenir01{
	background-image: url("../shopping/images/souvenir01.png");
}


/* DIY・工具
------------------------------------------------------------*/
.diy-tool01{
	background-image: url("../shopping/images/diy-tool01.png");
}


/* 医薬品
------------------------------------------------------------*/
.medicine-kasuya{
	background-image: url("../shopping/images/medicine-kasuya.png");
}



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

  観る（背景画像指定）

--------------------------------------------------------------------------------------------- */
.watch01{
	background-image: url("../watch/images/watch01.png");
}
.watch02{
	background-image: url(../watch/images/watch02.png);
}
.watch03{
	background-image: url("../watch/images/watch03.png");
}
.watch04{
	background-image: url(../watch/images/watch04.png);
}
.watch05{
	background-image: url(../watch/images/watch05.png);
}
.watch06{
	background-image: url("../watch/images/watch06.png");
}
.watch07{
	background-image: url(../watch/images/watch07.png);
}
.watch08{
	background-image: url("../watch/images/watch08.png");
}
.watch09{
	background-image: url(../watch/images/watch09.png);
}
.watch10{
	background-image: url(../watch/images/watch10.png);
}
.watch11{
	background-image: url(../watch/images/watch11.png);
}
.watch12{
	background-image: url(../watch/images/watch12.png);
}
.watch13{
	background-image: url(../watch/images/watch13.png);
}
.watch14{
	background-image: url(../watch/images/watch14.png);
}



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

  体験する（背景画像指定）

--------------------------------------------------------------------------------------------- */
.experience01{
	background-image: url("../experience/images/experience01.png");
}
.experience02{
	background-image: url("../experience/images/experience02.png");
}
.experience03{
	background-image: url("../experience/images/experience03.png");
}
.experience04{
	background-image: url("../experience/images/experience04.png");
}
.experience05{
	background-image: url("../experience/images/experience05.png");
}
.experience06{
	background-image: url("../experience/images/experience06.png");
}
.experience07{
	background-image: url("../experience/images/experience07.png");
}
.experience08{
	background-image: url("../experience/images/experience08.png");
}
.experience09{
	background-image: url("../experience/images/experience09.png");
}
.experience10{
	background-image: url("../experience/images/experience10.png");
}
.experience11{
	background-image: url("../experience/images/experience11.png");
}
.experience12{
	background-image: url("../experience/images/experience12.png");
}
.experience13{
	background-image: url("../experience/images/experience13.png");
}
.experience14{
	background-image: url("../experience/images/experience14.png");
}



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

  泊まる（背景画像指定）

--------------------------------------------------------------------------------------------- */
.stay00{
	background-image: url("../stay/images/stay00.png");
}

.stay01{
	background-image: url("../stay/images/stay01.png");
}