@charset "UTF-8";

/* CSS Document */
:root {
  --font-family-en: 'Roboto', sans-serif;
  --font-family-en-2: 'Arial', sans-serif;
  --font-family-en-3: 'Oswald', sans-serif;
  --font-family-M: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
  --font-family-J: 'Noto Sans JP', sans-serif;
  --red: #F80000;
  --orange: #FF8000;
  --blue: #39A1DD;
  --black: #000;
  --ichi: 220, 0, 0;
  --senya:34, 157, 102;
  --furu:255, 207, 0;
  --musubi:0, 54, 140;
}

.link a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

#gou_ichi { background-color: rgb(var(--ichi));}
#gou_senya { background-color: rgb(var(--senya));}
#gou_furuichi { background-color: rgb(var(--furu));}
#gou_enmusubi { background-color: rgb(var(--musubi));}

.gou_shop {
	font-family: var(--font-family-J);
}		
.gou_shop .photo img { width: 100%; height: 100%; object-fit: cover;}

.map .btn li a {
	border-radius: 50%;
}

.map .btn .ichi { background: url(../images/gourmet_btn_ichi.png) no-repeat top center; background-size: contain;}
.map .btn .senya { background: url(../images/gourmet_btn_senya.png) no-repeat top center; background-size: contain;}
.map .btn .furu { background: url(../images/gourmet_btn_furu.png) no-repeat top center; background-size: contain;}
.map .btn .en { background: url(../images/gourmet_btn_en.png) no-repeat top center; background-size: contain;}


.txt_wrap .alcohol {
	background: rgb(var(--furu));
}
.txt_wrap .alcohol.no {
	background: #ccc;
}

.txt_wrap .shop_sns li.s_hp { background: url(../images/sns_hp.svg) no-repeat center; background-size: contain;}
.txt_wrap .shop_sns li.s_fb { background: url(../images/sns_fb.svg) no-repeat center; background-size: contain;}
.txt_wrap .shop_sns li.s_x { background: url(../images/sns_x.svg) no-repeat center; background-size: contain;}
.txt_wrap .shop_sns li.s_yt { background: url(../images/sns_yt.svg) no-repeat center; background-size: contain;}
.txt_wrap .shop_sns li.s_ig { background: url(../images/sns_ig.svg) no-repeat center; background-size: contain;}
.txt_wrap .shop_sns li.s_line { background: url(../images/sns_line.svg) no-repeat center; background-size: contain;}

.txt_wrap .pay li span { color: rgb(var(--musubi));}

.gou_shop .swiper-slide {position: relative;}
.gou_shop .swiper-slide p {
	text-align: center;
	color: #fff;
	font-weight: 700;
	position: absolute;
	line-height: 1.1em;
}
#gou_ichi .swiper-slide p { background-color: rgba(var(--ichi),0.75);}
#gou_senya .swiper-slide p { background-color: rgba(var(--senya),0.75);}
#gou_furuichi .swiper-slide p { background-color: rgba(var(--furu),0.75);}
#gou_enmusubi .swiper-slide p { background-color: rgba(var(--musubi),0.75);}

.enquete {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: 700;
	text-align: center;
}

.enq_btn {
	background: rgb(var(--musubi));
	border: solid 1px rgb(var(--senya));
}

.enq_btn a {
	background: url(../images/gou_enq_form.svg) no-repeat center;
	background-size: auto 22px;
}

.meshi { margin-top: 70px; position: relative;}

.meshi span {
	color: #0064DC;
	font-weight: 700;
}

.meshi::before {
	content: '';
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0;
    background: #fff89e80;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 50px;
    filter: blur(30px);
}

/* ミディアムデバイス (タブレット) のスタイル */
@media (max-width: 1024px) {
	.sp_non { display: none !important;}
	
	.header{
	width: 100%;
	height: 80px;	
	background: rgb(213,238,245);
    background: linear-gradient(180deg, rgba(213,238,245,1) 0%, rgba(255,255,255,1) 100%);
	position: relative;
	padding-top: 18px;	
	}
	
	h3{
	width: 100%;
	height: 58px;
	background:url("../images/gou_h3_gourmet.svg") no-repeat center center;
	background-size: contain;
	}

	.map {
		width: 100%;
		height: 575px;
		background: url(../images/gourmet_map_sp.png) no-repeat top center;
		background-size: contain;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.map .enq_btn {
		width: 200px;
		height: 40px;
		margin: 0px -1px 25px auto;
		border-radius: 20px 0 0 20px;
	}

	.enq_btn a {
		background: url(../images/gou_enq_form.svg) no-repeat center;
		background-size: auto 14px;
	}

	.map .btn {
		display: flex;
		margin-bottom: 10px;
	}

	.map .btn li {
		width: 91px;
		height: 100px;
		filter: drop-shadow(0px 7px 6px #00000029);
		margin: 4px;
	}

	.map .btn li a {
		border-radius: 50%;
	}

	.gou_shop {
		padding: 10px;
	}

	.gou_shop .inner {
		background: #fff;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 50px;
	}

	.gou_shop .photo {
		width: 380px;
		height: 200px;
		border-radius: 15px 15px 0 0;
		overflow: hidden;
	}

	.gou_shop .logo {display: none;}

	.shop_sns {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.shop_sns li {
		width: 42px;
		height: 42px;
		margin: 2.5px;
	}

	.shop_sns li a {
		text-indent: -3000px;
	}
	.txt_wrap {
        font-size: 14px;
        font-weight: 700;
		padding: 10px;
		display: flex;
        flex-direction: column;
        align-items: center;
    }

	.txt_wrap h4 {
		font-size: 28px;
		margin-bottom: 10px;
	}
	.txt_wrap h4 span {
		font-size: 20px;
	}

	.txt_wrap .alcohol {
		width: 120px;
		height: 20px;
		font-size: 10px;
		padding: 3px 10px;
		margin: auto;
	}


	.txt_wrap p {
		padding: 10px;
	}

	p.shop_open {
		width: 100%;
		padding: 0;
	}

	.gou_shop .swiper-slide p {
		width: 227px;
		left: 3px;
		bottom: 4px;
		padding: 2px 0 3px;
		min-height: 23px;
	}

	.enquete {
		margin: 45px 0;
	}

	.enquete h4 {
		font-size: 24px;
		margin-bottom: 10px;
	}


	.enquete p {
		font-size: 14px;
	}

	.enquete img {
		width: 106px;
		height: 137px;
		object-fit: contain;
		margin: 25px 0;
	}

	.enquete .enq_btn {
		width: 220px;
		height: 40px;
		margin-bottom: 40px;
	}

	.meshi img { width: 240px; height: 70px;}

	.slider_wrap {
		width: 100%;
		position: relative;
	}

	.swiper-slide{
		width: 100%;
		height: 151px;
	}
	.swiper-slide img{
		width: 100%;
		height: 151px;
		object-fit: contain;
		object-position: top center;
	}

	#gourmet .gou_shop .swiper-pagination-bullet {
		background: rgb(var(--musubi));
		height: 15px;
		width: 15px;
	}


} /* SP */

/* ラージデバイス (デスクトップ) のスタイル */
@media (min-width: 1025px) {

	.pc_non {display: none !important;}

	.contents{
		width: 94.8%;
		padding-bottom: 40px;
	}
	
	.header{
	width: 100%;
	height: 110px;
	background: rgb(213,238,245);
    background: linear-gradient(180deg, rgba(213,238,245,1) 0%, rgba(255,255,255,1) 100%);
	position: relative;
	}
	
	h3{
	width: 100%;
	height: 110px;
	background:url("../images/gou_h3_gourmet.svg") no-repeat center center;
	background-size: 275px 57px;
	}

	.map {
		width: 100%;
		height: 660px;
		background: url(../images/gourmet_map.png) no-repeat top left;
		background-size: contain;

	}

	.map .enq_btn {
		width: 320px;
		height: 60px;
		border-radius: 40px 0 0 40px;
		margin: 0 -1px 0 auto;
	}

	.map .btn {
		width: 518px;
		height: 568px;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-end;
		align-items: flex-end;
		margin: 0 170px 0 auto;
	}

	.map .btn li {
		width: 236px;
		height: 252px;
		margin: 11px;
		filter: drop-shadow(0px 7px 6px #00000029);
		transition: all 0.3s;
	}

	.map .btn li:hover,
	.shop_sns li:hover {
		opacity: 0.7;
		transform: scale(0.95);
	}

	.gou_shop {
		padding: 44px 78px;
	}
	
	.gou_shop .inner {
		background: #fff;
		border-radius: 30px;
		padding: 60px 88px;
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}

	.gou_shop .photo {
		width: 495px;
		height: 380px;
		margin-right: 45px;
	}
	.gou_shop .logo {
		position: absolute;
		top: 130px;
		right: 88px;
	}

	.txt_wrap {
		font-size: 18px;
		font-weight: 700;
	}

	.txt_wrap .name {
		display: flex;
		align-items: center;
		margin-bottom: 45px;
	}

	.txt_wrap h4 {
		font-size: 50px;
	}	
	.txt_wrap h4 span {
		font-size: 40px;
	}

	.txt_wrap .alcohol {
		background: rgb(var(--furu));
		padding: 7px 20px 8px;
		width: 220px;
		height: 40px;
		margin-left: 30px;
	}
	.txt_wrap .alcohol.no {
		background: #ccc;
	}

	.txt_wrap .shop_sns {
		margin: 20px 0;
	}
	.txt_wrap .shop_sns li {
		width: 65px;
		height: 65px;
		display: inline-block;
		margin-right: 10px;
		transition: all 0.3s;

	}
	.txt_wrap .shop_sns li a {
		display: inline-block;
		width: 100%;
		height: 100%;
		text-indent: -3000px;
	}

	.txt_wrap p {
		width: 615px;
		text-align: justify;
	}	

	.txt_wrap .pay {
		margin-left: 108px;
	}
	.txt_wrap .pay li:first-child {
		text-indent: -108px;
	}

	.gou_shop .slider_wrap {
		width: 100%;
		margin-top: 20px;
		position: relative;
	}

	#gou_furuichi .swiper-wrapper { /* 枚数が増えたら消してください */
		justify-content: center;
	}
	
	.gou_shop .swiper-slide {
		width: 340px;
	}
	.gou_shop .swiper-slide p {
		bottom: 6px;
		width: 340px;
		min-height: 32px;
		font-size: 22px;
		line-height: 1.1em;
		padding: 5px 0;
	}
	#gou_ichi .swiper-slide p { background-color: rgba(var(--ichi),0.75);}
	#gou_senya .swiper-slide p { background-color: rgba(var(--senya),0.75);}
	#gou_furuichi .swiper-slide p { background-color: rgba(var(--furu),0.75);}
	#gou_enmusubi .swiper-slide p { background-color: rgba(var(--musubi),0.75);}

	.swiper-pagination {display: none;}

	.enquete {

		margin: 70px;
	}

	.enquete h4 {
		font-size: 50px;
	}
	
	
	.enquete p {
		font-size: 18px;
		margin: 30px 0 20px;
	}

	.enquete .enq_btn {
		width: 500px;
		height: 70px;
		margin: 40px;
	}

	.meshi {width: 1040px;}

} /* PC */

.custom-pagination img {
    animation: heartbeat 2s infinite ease-in-out;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}