@charset "utf-8";
/* CSS Document */
html{
	scroll-behavior:smooth;
}
body{
	  height:100vh;
	background-image: repeating-linear-gradient(90deg, #fef3eb, #fef3eb 10px, #ffeee4 10px, #ffeee4 20px);
	margin:0;
	font-size: 16px;
	font-family: "Zen Maru Gothic", sans-serif;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.kaisei-opti-regular {
  font-family: "Kaisei Opti", serif;
  font-style: normal;
}
/* ---------- 全体 ---------- */
.lp-layout{
  display:grid;
  grid-template-columns:
    minmax(0px,1fr)
    480px
    380px;
}
/* ---------- 左 ---------- */
.left-area{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.left-inner{
  text-align:center;
	--photo-size: clamp(280px, 22vw, 420px);
}
.photo-wrap{
	margin:50px 0 20px 0;
  position:relative;
  width:var(--photo-size);
  height:var(--photo-size);
}
.photo-slider{
	position:relative;
  width:100%;
  height:100%;
  mask-image:url(../img/mask.svg);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  -webkit-mask-image:url(../img/mask.svg);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
	z-index:9;
}
.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.5s ease;
}
.slide.active{
  opacity:1;
}
.chara{
  position:absolute;
  width:calc(var(--photo-size) * 0.49);
	top:calc(var(--photo-size) * -0.21);
	right:calc(var(--photo-size) * -0.03);
  z-index:1;
  pointer-events:none;
}
.left-inner h1 img{
	width:clamp(180px,18vw,320px);
	height:auto;
}
.left-inner > img:last-child{
	width:clamp(180px,18vw,300px);
	height:auto;
}
/* ---------- 中央 ---------- */
.center-area{
  width:480px;
	background: #FFFBF3;
  min-height:100vh;
}
.poster img{
  width:100%;
  display:block;
}
.main-content{
	padding:clamp(20.00px, calc(1.23vw + 15.59px), 25.00px);
}
/* ---------- 右 ---------- */
.right-area{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.right-menu{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;
}

/*ハンバーガー用*/
.hamburger{
  display:none;
  position:fixed;
  top:15px;
  right:15px;
  width:48px;
  height:48px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:10000;
}
.hamburger span{
  position:absolute;
  left:10px;
  width:28px;
  height:2px;
  background:#8c1b5a;
  transition:.3s;
}
.hamburger span:nth-child(1){
  top:14px;
}
.hamburger span:nth-child(2){
  top:23px;
}
.hamburger span:nth-child(3){
  top:32px;
}
/*×に変形*/
.hamburger.active span:nth-child(1){
  top:23px;
  transform:rotate(45deg);
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  top:23px;
  transform:rotate(-45deg);
}
/*フルスクリーンメニュー*/
.fullscreen-menu{
  position:fixed;
  inset:0;
  background-image: repeating-linear-gradient(90deg, #fef3eb, #fef3eb 10px, #ffeee4 10px, #ffeee4 20px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:center;
  gap:35px;
  opacity:0;
  visibility:hidden;
  transition:.3s;
  z-index:9999;
	padding:25px;
}
.fullscreen-menu.active{
  opacity:1;
  visibility:visible;
}
.fullscreen-menu a,.right-menu a{
	font-family: "Kaisei Opti", serif;
	font-weight: 700;
  width:120px;
  text-decoration:none;
  color:#7a2352;
  text-align:center;
}
.fullscreen-menu img,.right-menu img{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto 10px;
	background: #fff;
	transition:all .3s ease;
}
.fullscreen-menu span,.right-menu span{
  font-size:14px;
	line-height: 16px;
}
.ullscreen-menu a:hover img{
	background:#7a2352;
}
.right-menu a:hover img{
    background: #7a2352;
    /*border: 2px solid #7a2352;*/
}
/*開いた時に背景スクロールを止める*/
body.menu-open{
  overflow:hidden;
}

/*中身のスタイル*/
.pt-30{
	padding-top:30px;
}
.pb-24{
	padding-bottom:24px;
}
.pb-12{
	padding-bottom:12px;
}
h2{
	font-weight: 700;
	font-size: clamp(25.00px, calc(2.81vw + 14.48px), 36.00px);
	text-align: center;
	margin:10px 0 30px 0;
	color: #7A004B;
}
.title-icon img{
	width:90px;
	height:90px;
	border-radius:50%;
	object-fit:cover;
	display:block;
	margin:0 auto 10px;
	background: #fff;
}
.info-area{
	margin:30px 0;
	background:#fff;
	padding:5px 15px;
	color:#7a2352;
}
.info-date{
	display:flex;
	padding:10px 0;
}
.info-date-first{
    border-bottom: 1px solid #7a2352;
}
.info-date .date01{
	width:85px;
	flex-shrink:0;
}
.img-center{
	text-align:center;
}
/*カテゴリーボタン*/
.categry-area{
	padding:20px 0;
	display:flex;
	flex-wrap:wrap;
	gap:16px 5px;
	justify-content:center;
}
.categry-area button{
	font-family: "Kaisei Opti", serif;
	min-width:200px;
	padding:12px 12px;
	border:2px solid transparent;
	border-radius:999px;
	font-size: clamp(11.00px, calc(0.25vw + 10.12px), 12.00px);
	line-height:1;
	color:#fff;
	cursor:pointer;
	transition:all .3s ease;
}
/* 通常時 */
.categry-area .cate01{
	background:#6EBB59;
}
.categry-area .cate02{
	background:#5686C4;
}
.categry-area .cate03{
	background:#AB84B8;
}
.categry-area .cate04{
	background:#F29E77;
}
.categry-area .cate05{
	background:#FFE1CF;
	color:#7a2352;
}
/* ホバー時 */
.categry-area .cate01:hover{
	background:#fff;
	border-color:#6EBB59;
	color:#6EBB59;
}
.categry-area .cate02:hover{
	background:#fff;
	border-color:#5686C4;
	color:#5686C4;
}
.categry-area .cate03:hover{
	background:#fff;
	border-color:#AB84B8;
	color:#AB84B8;
}
.categry-area .cate04:hover{
	background:#fff;
	border-color:#F29E77;
	color:#F29E77;
}
.categry-area .cate05:hover{
	background:#fff;
	border-color:#FFE1CF;
	color:#FFE1CF;
}
/*カテゴリーボタンおわり*/
/*モーダル開閉用css*/
.modal-overlay{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.5);
	z-index:10001;
	opacity:0;
	visibility:hidden;
	transition:opacity .3s ease;
}
.modal-overlay.is-open{
	opacity:1;
	visibility:visible;
}
.modal-window{
	position:relative;
	width:min(90vw,440px);
	max-height:90vh;
	overflow:auto;
	background:#fff;
	border:2px solid #7a2352;
	border-radius:10px;
	padding:40px 20px 20px;
	transform:translateY(20px) scale(.95);
	opacity:0;
	transition:
		transform .35s ease,
		opacity .35s ease;
}
.modal-overlay.is-open .modal-window{
	transform:translateY(0) scale(1);
	opacity:1;
}
.modal-close{
	position:absolute;
	top:5px;
	right:15px;
	border:none;
	background:none;
	font-size:32px;
	cursor:pointer;
	z-index:10;
	color: #7a2352;
}
/*モーダル開閉用cssおわり*/
/*ショップリスト*/
.shop-list{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	gap:15px;
}
.shop-card{
	background:#fff;
	padding:15px;
	cursor:pointer;
	transition:.3s;
}
.shop-card:hover{
	transform:translateY(-3px);
	box-shadow:0 5px 5px rgba(0,0,0,.08);
}
.shop-card__img{
	aspect-ratio:1/1;
	overflow:hidden;
	margin-bottom:10px;
}
.shop-card__img img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.shop-card__title{
	font-size: 20px;
	margin:0 0 10px 0;
	font-weight:700;
	line-height:1.4;
	text-align:center;
	color:#7a2352;
}
.shop-card__shop{
	display:flex;
	align-items:flex-start;
	gap:8px;
	margin:0;
	font-size: 14px;
	/*line-height:1.7;*/
}
.shop-card__shop::before{
	content:"";
	width:24px;
	height:24px;
	flex-shrink:0;
	background:url("../img/store-icon.svg") center center / contain no-repeat;
}
/*モーダル内*/
.modal-body img{
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	display:block;
	margin-bottom:10px;
}
.modal-shop{
	margin-bottom:10px;
	padding:5px 10px;
	border-radius:999px;
	background:#7a2352;
	color:#fff;
	text-align:center;
	font-size: 14px;
}
.modal-body h2{
	margin:0 0 10px;
	font-weight:700;
	text-align:center;
	color:#7a2352;
	font-size: 24px;
}
.modal-body > p{
	text-align:center;
	font-size: 14px;
	margin-bottom: 10px;
}
.modal-detail{
	padding-top:24px;
	border-top:1px dotted #7a2352;
}
.modal-detail p{
	display:flex;
	align-items:flex-start;
	gap:12px;
	margin:0 0 10px;
}
.detail-price::before{
	content:"";
	width:24px;
	height:24px;
	flex-shrink:0;
	background:url("../img/yen-icon.svg") center center / contain no-repeat;
}
.detail-time::before{
	content:"";
	width:24px;
	height:24px;
	flex-shrink:0;
	background:url("../img/schedule-icon.svg") center center / contain no-repeat;
}
.detail-holiday::before{
	content:"";
	width:24px;
	height:24px;
	flex-shrink:0;
	background:url("../img/yasumi-icon.svg") center center / contain no-repeat;
}
.detail-address::before{
	content:"";
	width:24px;
	height:24px;
	flex-shrink:0;
	background:url("../img/map-icon.svg") center center / contain no-repeat;
}
.detail-tel::before{
	content:"";
	width:24px;
	height:24px;
	flex-shrink:0;
	background:url("../img/call-icon.svg") center center / contain no-repeat;
}
.icon-area{
	display:flex;
	gap:10px;
	justify-content: flex-end;
}
.icon-area img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}
.icon-area a{
	width:24px;
	height:24px;
}
.googlemap{
	margin-top:10px;
}
.googlemap a{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	width:100%;
	padding:15px 15px;
	border-radius:999px;
	background:#FFEEE4;
	color:#7a2352;
	text-decoration:none;
	transition:.3s;
}
.googlemap a::after{
	content:"";
	width:24px;
	height:24px;
	background-color:#7a2352;
	mask:url("../img/new_window.svg") center/contain no-repeat;
	-webkit-mask:url("../img/new_window.svg") center/contain no-repeat;
	transition:.3s;
}
.googlemap a:hover{
	background-color:#7a2352;
	color:#fff;
}
.googlemap a:hover::after{
	background-color:#fff;
}
/*モーダル内おわり*/
/*番号*/
.shop-card__img,
.modal-img{
	position:relative;
}
.item-no{
	position:absolute;
  --r: .8em; /* control the cutout */
  margin-top:5px;
  padding-right: calc(var(--r) + 15px);
	padding-left:15px;
  line-height: 1.8;
  clip-path: polygon(
  0 0,
  100% 0,
  calc(100% - var(--r)) 50%,
  100% 100%,
  0 100%
);
  /*border-image: conic-gradient(#FF6B6B 0 0) fill 0//100vw;*/
  width: fit-content;
	color:#fff;
	font-family: "Kaisei Opti", serif;
}
.shop-card__img .cate01,
.modal-img .cate01{
border-image: conic-gradient(#6EBB59 0 0) fill 0//100vw;
}
.shop-card__img .cate02,
.modal-img .cate02{
border-image: conic-gradient(#5686C4 0 0) fill 0//100vw;
}
.shop-card__img .cate03,
.modal-img .cate03{
border-image: conic-gradient(#AB84B8 0 0) fill 0//100vw;
}
.shop-card__img .cate04,
.modal-img .cate04{
border-image: conic-gradient(#F29E77 0 0) fill 0//100vw;
}
/*番号おわり*/
.googlemymap{
	width:100%;
	margin:40px 0 40px 0;
}
#event-area h3{
	color:#7a2352;
	text-align: center;
	font-size:24px;
}
.event-info{
	margin:30px 0 0 0;
    background: #fff;
    padding: 20px;
    border: 2px solid #7a2352;
    border-radius: 10px;
}
.event-info .kaisei-opti-regular{
	color:#7a2352;
}
.event-info02{
    background: #7a2352;
    color: #fff;
    text-align: center;
    border-radius: 10px;
	padding:24px;
}
.event-info02 img{
  width:100%;
  display:block;
}
.azuki-wrap{
	position:relative;
}
.img-size img{
  width:100%;
  display:block;
}
.banner{
	position:absolute;
	top:120px;
	right:-10px;
}
.banner img{
	display:block;
}
.banner-hover{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	/*transition:opacity .2s ease;*/
}
.banner:hover .banner-hover{
	opacity:1;
}
.banner:hover .banner-default{
	opacity:0;
}
.youtube-video {
	margin-top:60px;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube-video iframe {
  width: 100%;
  height: 100%;
}
/*共通ボタン*/
.link-button a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 10px 10px;
    border-radius: 999px;
    background: #fff;
    color: #7a2352;
    text-decoration: none;
    transition: .3s;
    border: 2px solid #7a2352;
	font-family: "Kaisei Opti", serif;
}
.link-button a::after{
	content:"";
	width:24px;
	height:24px;
	background-color:#7a2352;
	mask:url("../img/new_window.svg") center/contain no-repeat;
	-webkit-mask:url("../img/new_window.svg") center/contain no-repeat;
	transition:.3s;
}
.link-button a:hover{
	background-color:#7a2352;
	color:#fff;
}
.link-button a:hover::after{
	background-color:#fff;
}
footer{
	background: #7a2352;
	padding:40px;
	width: 100%;
}
.footer-img{
	text-align: center;
}
footer img{
	width: 60%;
}
/*共通ボタンおわり*/
/*戻るボタン*/
.pagetop{
	position:fixed;
	right:10px;
	bottom:10px;
	z-index:999;
	display:block;
	width:70px;
	opacity:0;
	visibility:hidden;
	transition:.3s;
}
.pagetop img{
	display:block;
	width:100%;
	height:auto;
}
.pagetop.show{
	opacity:1;
	visibility:visible;
}
/*戻るボタンおわり*/
/*レスポンシブ*/
@media (max-width: 1100px){
	.left-inner{display:none;}
}
@media (max-width: 768px){
  body{
    overflow:auto;
  }
  .lp-layout{
    display:block;
  }
  .left-area,
  .right-area{
    display:none;
  }
  .center-area{
    width:100%;
    max-width:480px;
    margin:0 auto;
  }
  /*.center-scroll{
    height:auto;
    overflow:visible;
  }*/
  .hamburger{
    display:block;
  }
}
@media (max-width: 425px){
	.categry-area button{
		min-width:180px;
		padding:12px 5px;
	}
	.youtube-video{
		margin-top:60px;
	}
}
@media (max-width: 406px){
	.categry-area button{
		min-width:163px;
		padding:12px 5px;
	}
	.youtube-video{
		margin-top:100px;
	}
}
@media (max-width: 375px){
	.categry-area button{
		min-width:163px;
		padding:12px 5px;
	}
	.youtube-video{
		margin-top:100px;
	}
}
@media (max-width: 324px){
	.fullscreen-menu{
		gap:20px;
	}
	.fullscreen-menu img{
	  width:90px;
	  height:90px;
	}
	.youtube-video{
		margin-top:130px;
	}

}
/*spだけ改行*/
.br-sp {
    display: none;
}
@media (max-width: 425px) {
    .br-sp {
        display: block;
    }
}