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

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');

/* 全体・枠作り */

html,body {
	height:100%;
}

html {
	font-size:62.5%;
}


body {
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, sans-serif;
	text-align:center;
	min-height: 100vh;
	min-width: 1200px;
	font-size: 1.0rem;
	background-size: cover;
	background-attachment: fixed;
}

.inv {opacity: 0; transition:0.7s; transform:translate(0,20px); }
.inv2 {opacity: 0; transition:0.7s; transform:translate(0,20px); }
.vie {opacity: 1.0; transform:translate(0);}

#PageWrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	width:100%;
	min-width: 1200px;
	background-color:rgba(255,255,255,1.00);
}

/*メインビジュアル*/

#Mainvisual {
	width:100%;
	height:860px;
	position: relative;
	box-sizing: border-box;
	background:url("../img/bg_mv.jpg") center top no-repeat;
	background-size: cover;
}

h1, h2 {
	display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bg_mv_pt {
	background:url("../img/bg_mv_pt.png") left top repeat;
	width:100%;
	height:860px;
	position: relative;
}

.bg_window {
	width:100%;
	height:860px;
	position: relative;
	box-sizing: border-box;
	background:url("../img/bg_mv.jpg") center top no-repeat;
	background-size: cover;
	clip-path:inset(100px);
}

.bg_window:after {
	content: "";
	display: block;
	width:calc(100% - 200px);
	height:660px;
	z-index:90;
	box-sizing: border-box;
	border:5px solid #fff;
	position: absolute;
	left:100px;
	top:100px;
	background:url("../img/bg_txt.png") left top no-repeat;
}

.mv {
	background:url("../img/mainvisual.png") center top no-repeat;
	width:100%;
	height:860px;
	position: absolute;
	left:0;
	top:0;
	z-index:100;
}

/*アバウト*/

#About {
	background:url("../img/bg_about.jpg") center top no-repeat;
	width:100%;
	background-size: cover;
}

.about_body {
	background:url("../img/about_body.png") center top no-repeat;
	height:1140px;
	width:100%;
	position: relative;
}

.about_body ul {
	width:100%;
	display: flex;
	justify-content: center;
	gap:60px;
	position: absolute;
	left:0;
	bottom:50px;
}

.about_body ul li a {
	width:238px;
	height:276px;
	transition: all 0.3s;
	display: block;
}

.about_body ul li a:hover {
	transform: translate(0, -30px);
}

/*コンテンツ*/


#Contents {
	display: block;
	position: relative;
	width:100%;
	background-color:rgba(25,25,25,1.00);
}

h3 {
	width:524px;
	height:93px;
	display: block;
	overflow: hidden;
	margin:0 auto 72px;
	background-size: cover;
	color:#fff;
	background:url("../img/head_attention.png") center top no-repeat;
}

#Head_JAM_info {background:url("../img/head_info.png") center top no-repeat;}
#Head_Meal {background:url("../img/head_meal.png") center top no-repeat;}
#Head_Novelty {background:url("../img/head_novelty.png") center top no-repeat;}
#Head_Canvas {background:url("../img/head_canvas.png") center top no-repeat;}
#Head_Goods {background:url("../img/head_goods.png") center top no-repeat;}
#Head_Attention {background:url("../img/head_attention.png") center top no-repeat;}

h4 {
	background-color:#5f0800;
	font-size: 3rem;
	text-align: center;
	width:800px;
	margin:0 auto 36px;
	color:#fff;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	box-sizing: border-box;
	padding:8px;
	border-radius: 10px;
}

.areawrap {
	width:1200px;
	margin:0 auto;
}

.txtbx {
	width:1200px;
	background-color:rgba(255,255,255,0.85);
	box-sizing: border-box;
	padding:48px;
	border-radius: 15px;
	margin:0 auto 48px;
	font-size: 1.8rem;
	text-align: left;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
	color:#5f0800;
}

.txtbx2 {
	width:1200px;
	box-sizing: border-box;
	padding:48px;
	margin:0 auto 0;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
	color:#5f0800;
}

.mr48 {margin-bottom:48px!important;}
.mr72 {margin-bottom:72px!important;}

strong.highlight {
	background-color:yellow;
	font-weight: 700;
}

.txtbx p a {
	color:orangered;
	text-decoration: none;
}

.txtbx p.small {
	font-size:1.5rem!important;
}

.txtbx ul li {
	border-bottom:1px solid #fff;
	box-sizing: border-box;
	padding:6px 0;
}

/*ミール*/

#Meal {
	box-sizing: border-box;
	padding:80px 0 ;
	background:url("../img/bg_meal.png") center top no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.meal_wrap {
	width:1200px;
	margin:0 auto 72px;
	display: flex;
	justify-content:center;
	gap:24px 2%;
	flex-wrap: wrap;
}

.menu_single {
	width:32%;
	background-color:#fff;
	box-shadow:0 0 15px rgba(0,0,0,0.05);
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: 15px;
}

.menu_img {
	width:100%;
	padding-top:100%;
	position: relative;
	border-radius: 15px 15px 0 0;
}

.menu_tag {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	width:40%;
	line-height: 32px;
	font-size: 1.7rem;
	position: absolute;
	left:0;
	bottom:12px;
	color:#fff;
	border-radius: 0 5px 5px 0;
}

.tag_drink {background-color:#eb6d94;}
.tag_food {background-color:#ffd900;}
.tag_alcohol {background-color:mediumpurple;}

.menu_title {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	color:#ffffff;
	font-size:2.2rem;
	text-align: left;
	margin-bottom:12px;
	padding:12px 12px;
	box-sizing: border-box;
	background:#5f0800;
	background-size: cover;
}

.menu_price {
	margin-top: auto;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	color:#5f0800;
	font-size:3.5rem;
	padding:12px;
	text-align: right;
	box-sizing: border-box;
}

.menu_price span {
	margin-left:8px;
	font-size:50%;
	color:#5f0800;
}

.menu_txt {
	text-align:justify;
	color:rgba(25,25,25,1.00);
	font-size: 1.7rem;
	padding:12px 16px 0;
	box-sizing: border-box;
}

.menu_outline {
	text-align:justify;
	color:rgba(85,85,85,1.00);
	font-size: 1.4rem;
	padding:12px 16px;
	box-sizing: border-box;
	background-color:rgba(206,206,206,1.00);
	border-radius:0 0 15px 15px;
}

#JAM01 .menu_img {background:url("../img/menu/drink01.jpg") center top no-repeat;background-size: cover;}
#JAM02 .menu_img {background:url("../img/menu/drink02.jpg") center top no-repeat;background-size: cover;}
#JAM03 .menu_img {background:url("../img/menu/drink03.jpg") center top no-repeat;background-size: cover;}
#JAM04 .menu_img {background:url("../img/menu/drink04.jpg") center top no-repeat;background-size: cover;}
#JAM05 .menu_img {background:url("../img/menu/drink05.jpg") center top no-repeat;background-size: cover;}
#JAM06 .menu_img {background:url("../img/menu/drink06.jpg") center top no-repeat;background-size: cover;}
#JAM07 .menu_img {background:url("../img/menu/food01.jpg") center top no-repeat;background-size: cover;}
#JAM08 .menu_img {background:url("../img/menu/food02.jpg") center top no-repeat;background-size: cover;}
#JAM09 .menu_img {background:url("../img/menu/food03.jpg") center top no-repeat;background-size: cover;}


/*ノベルティ*/

#Novelty {
	box-sizing: border-box;
	padding:80px 0 ;
	margin-top:0;
	background:url("../img/bg_mnovelty.jpg") center top repeat;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 2;
}

.coaster_wrap {
	width:1200px;
	margin:0 auto 48px;
}

.coaster_wrap ul {
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
	gap:20px;
}

.coaster_wrap ul li {
	width:220px;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	box-shadow:0 0 10px rgba(227,145,147,0.20);
}

.coaster_wrap ul li span {
	display: block;
	width:100%;
	padding-top:100%;
}

li.coaster01 span {background: url("../img/coaster/coaster01.jpg") center top no-repeat; background-size: cover;}
li.coaster02 span {background: url("../img/coaster/coaster02.jpg") center top no-repeat; background-size: cover;}
li.coaster03 span {background: url("../img/coaster/coaster03.jpg") center top no-repeat; background-size: cover;}
li.coaster04 span {background: url("../img/coaster/coaster04.jpg") center top no-repeat; background-size: cover;}
li.coaster05 span {background: url("../img/coaster/coaster05.jpg") center top no-repeat; background-size: cover;}
li.coaster06 span {background: url("../img/coaster/coaster06.jpg") center top no-repeat; background-size: cover;}
li.coaster07 span {background: url("../img/coaster/coaster07.jpg") center top no-repeat; background-size: cover;}
li.coaster08 span {background: url("../img/coaster/coaster08.jpg") center top no-repeat; background-size: cover;}
li.coaster09 span {background: url("../img/coaster/coaster09.jpg") center top no-repeat; background-size: cover;}
li.coaster10 span {background: url("../img/coaster/coaster10.jpg") center top no-repeat; background-size: cover;}

.mat_wrap {
	width:1200px;
	margin:0 auto 48px;
}

.mat_wrap ul {
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
	gap:20px;
}

.mat_wrap ul li {
	width:550px;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	box-shadow:0 0 10px rgba(227,145,147,0.20);
}

.mat_wrap ul li span {
	display: block;
	width:100%;
	padding-top:70.78%;
}

li.mat01 span {background: url("../img/mat01.jpg") center top no-repeat; background-size: cover;}
li.mat02 span {background: url("../img/mat02.jpg") center top no-repeat; background-size: cover;}

/*インフォ*/

#Information {
	box-sizing: border-box;
	padding:80px 0 ;
	background:url("../img/info_bg.png") center top repeat;
	position: relative;
	z-index: 1;
}

.info_block {
	width:100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color:rgba(255,255,255,0.80);
	border-radius: 30px;
}

.map {
	display: block;
	width:550px;
	position: relative;
	box-sizing: border-box;
	padding:50px 0 50px 50px;
}

iframe.map_pc {
	width:100%;
}

.info_wrap {
	display: block;
	width:650px;
	height:auto;
	box-sizing: border-box;
	padding:50px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
	color:#292929;
	margin:0 auto 0;
	position: relative;
	
}

.info_wrap a {
	color:#00a0e9;
	text-decoration: none;
}

.info_wrap a:hover {
	color:#00a0e9;
	text-decoration: underline;
}

.info_wrap dl {
	display: flex;
	justify-content: space-between;
	width:100%;
	border-bottom:1px solid #292929;
	font-size:1.8rem;
	line-height: 1.8;
}

.info_wrap dl:first-child {
	border-top:1px solid #292929;
}

.info_wrap dl dt {
	padding:18px 0;
	text-align: left;
	width:30%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.info_wrap dl dd {
	width:70%;
	padding:18px 0;
	text-align: left;
	box-sizing: border-box;
}

/*キャンバス*/

#Canvas {
	box-sizing: border-box;
	padding:80px 0 ;
	margin-top:0;
	background:rgba(247,241,181,1.00);
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 2;
}

.canvas_group {
	width:1200px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin:0 auto 72px;
	box-sizing: border-box;
	gap:24px 2%;
}

.canvas_box_l {
	width:49%;
	border-radius: 15px;
	overflow: hidden;
	padding-bottom:15px;
	text-align: left;
	line-height: 1.8;
	position: relative;
	background-color:#FFFFFF;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
	font-size: 1.7rem;
	box-sizing: border-box;
	color:#5f0800;
	border:5px solid #5f0800;
	display: flex;
	flex-direction: column;
}

span.img_large {
	background:url("../img/canvas/thum01.jpg") center bottom no-repeat;
	background-size: cover;
	width:100%;
	padding-top:47%;
	display: block;
}

.canvas_box_m {
	width:32%;
	border-radius: 15px;
	overflow: hidden;
	padding-bottom:15px;
	text-align: left;
	line-height: 1.8;
	position: relative;
	background-color:#FFFFFF;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
	font-size: 1.7rem;
	box-sizing: border-box;
	color:#5f0800;
	border:5px solid #5f0800;
	display: flex;
	flex-direction: column;
}


.canvas_box {
	width:23.5%;
	border-radius: 15px;
	overflow: hidden;
	padding-bottom:15px;
	text-align: left;
	line-height: 1.8;
	position: relative;
	background-color:#FFFFFF;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
	font-size: 1.7rem;
	box-sizing: border-box;
	color:#5f0800;
	border:5px solid #5f0800;
	display: flex;
	flex-direction: column;
}

.canvas_thum {
	width:100%;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
}

.canvas_thum a img {
	display: block;
	width:100%;
	transition: all 0.3s;
}

.canvas_thum a:hover img {
	opacity: 0.6;
}

.canvas_thum:before {
	content: "";
	width:60px;
	height:60px;
	position: absolute;
	right:10px;
	bottom:10px;
	background:#5f0800;
	background-size: cover;
	transform: scale(90%);
	display: block;
	border-radius: 30px;
	z-index: 5;
}

.canvas_thum:after {
	content: "";
	width:60px;
	height:60px;
	position: absolute;
	right:10px;
	bottom:10px;
	background:url("../img/canvas/zoom_icon.png") center top no-repeat;
	background-size: cover;
	display: block;
	border-radius: 30px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	z-index: 10;
}

.canvas_title {
	display: block;
	width:100%;
	padding:8px 5%;
	color:#5f0800;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	margin:0 auto 8px;
	box-sizing: border-box;
}

.goods_title {
	display: block;
	width:100%;
	padding:8px 5%;
	background-color:#5f0800;
	color:#fff;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	margin:0 auto 8px;
	box-sizing: border-box;
}

a.shoplink {
	width:90%;
	position: relative;
	margin:0 auto;
	box-sizing: border-box;
	padding:4px 8px;
	text-align: center;
	display: block;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	font-size: 2rem;
	color:#ffffff;
	transition: all 0.3s;
	text-decoration: none;
	border-radius: 10px;
}

a:hover.shoplink {
	opacity: 0.6;
}

.shop01 {background-color:#f29600; margin:auto auto 12px!important;}
.shop02 {background-color:#00b2b3;}

.canvas_price {
	display: block;
	width:100%;
	padding:8px 5% 0;
	box-sizing: border-box;
	color:#5f0800;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	margin:0 auto;
	font-size: 2.2rem;
	text-align: right;
}

.canvas_date {
	width:100%;
	margin:0 auto 72px;
}

.canvas_date dl {
	display: flex;
	justify-content: space-between;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
	font-size:1.6rem;
	margin-bottom:3px;
}

.canvas_date dl dt {
	width:30%;
	background-color:#5f0800;
	padding:8px;
	box-sizing: border-box;
	color:#fff;
}

.canvas_date dl dd {
	width:70%;
	background-color:#FFFFFF;
	padding:8px;
	box-sizing: border-box;
	color:#5f0800;
}

/*グッズ*/

#Goods {
	box-sizing: border-box;
	padding:80px 0 ;
	margin-top:0;
	background:#A8938D;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 2;
}

/*諸注意*/

#Attention {
	box-sizing: border-box;
	padding:80px 0 ;
	background:url("../img/bg_attention.jpg") center center no-repeat;
	background-size: cover;
}

.attention {
	font-size: 1.6rem;
	line-height: 1.8;
	color:#202020;
	width:1200px;
	margin:0 auto 60px;
	text-align: left;
}

/*フッター*/

footer {
	padding:64px 0;
	background:#5f0800;
}

.foot_logo {
	background:url("../img/foot_logo.png") center top no-repeat;
	width:480px;
	height:256px;
	margin:0 auto 48px;
}

.copyright {
	color:#fff;
	text-align: center;
	font-size: 1.6rem;
	margin:0 auto 36px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
}

.foot_link {
	width:1200px;
	margin:0 auto 36px;
	display: flex;
	justify-content: center;
	gap:24px;
}

.snsbt {
	display: flex;
	justify-content: center;
	gap:12px;
}

.foot_link a {
	display: block;
	background-color:#fff;
	width:240px;
	height:80px;
	transition: all 0.3s;
}

.foot_link a:hover {
	opacity: 0.6;
}

.link_jam {
	background:url("../img/link_jam.png") left top no-repeat;background-size:cover;
}

.link_flagments {
	background:url("../img/link_flagments.png") left top no-repeat;background-size:cover;
}

/*ルミナス*/
.lum-lightbox{
  z-index: 999;
}

@media (max-width: 460px) {

  .lum-lightbox-inner img {
    max-width: 150vw;  /* 好きなサイズ感で */
    max-height: 88vh;  /* 90vhだと数pxだけ上下にスクロールできてしまうためこのサイズ */
   /* display: block;  を追加すると max-height: 92vh くらいでも大丈夫 */
  }

　 /* 矢印ナビが大きすぎると感じたら */
  .lum-gallery-button:after {
    width: 6vw;
    height: 6vw;
  }
}

.lum-lightbox-inner img.lum-img {
  max-width: 100%;
}