@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root {
	--color01: #E8F7FF;
	--color02: #1F73B7;
	--color03: #CB221E;
	--color04: #FDDF2A;
	--color05: #2F6253;
}
html {
	scroll-behavior: smooth;
}
.header {
	position: relative;
	z-index: 2;
}
ol,ul {
	padding: 0;
}
a {
	color: currentColor;
	display: block; 
	height: 100%;
}
.pc {
	display: block;
}
@media screen and (max-width : 374px) {	
	.pc {
		display: none;
	}
}
/* ========================================
   FadeIn
======================================== */
.fade-in {
	opacity: 0;
	transform: translateY(30px)!important;
	transition: opacity 0.8s ease, transform 0.8s ease!important;
}
.fade-in.is-show {
	opacity: 1;
	transform: translateY(0)!important;
}
.fade-in-only {
	opacity: 0;
	transition: opacity 0.8s ease!important;
}
.fade-in-only.is-show {
	opacity: 1;
}
.fade {
	opacity: 0;
	transition:
		opacity 1s ease,
		transform 1s cubic-bezier(0.22, 1, 0.36, 1)!important;
}
.fade.is-show {
	opacity: 1;
}
/* ========================================
   その場で下から
======================================== */
.reveal-up {
	opacity: 0;
	transform: translateY(40px);
	animation: reveal-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes reveal-up {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
/* ========================================
   バウンス
======================================== */
.bounce-in {
	opacity: 0;
	transform: scale(0.6);
	animation: bounce-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) 0.8s both;
}
@keyframes bounce-in {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}
	55% {
		opacity: 1;
		transform: scale(1.12);
	}
	75% {
		transform: scale(0.98);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
/* ========================================
   左から右へ
======================================== */
.reveal-left {
	clip-path: inset(0 100% 0 0);
	-webkit-clip-path: inset(0 100% 0 0);
	animation-name: reveal-left;
	animation-duration: 1.3s;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	animation-fill-mode: both;
}
@keyframes reveal-left {
	0% {
		clip-path: inset(0 100% 0 0);
		-webkit-clip-path: inset(0 100% 0 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
		-webkit-clip-path: inset(0 0 0 0);
	}
}
/* ========================================
   真ん中から
======================================== */
.reveal-center {
	clip-path: inset(0 50% 0 50%);
	-webkit-clip-path: inset(0 50% 0 50%);
	animation: reveal-center 0.45s cubic-bezier(0.77, 0, 0.18, 1) both;
}
@keyframes reveal-center {
	0% {
		clip-path: inset(0 50% 0 50%);
		-webkit-clip-path: inset(0 50% 0 50%);
	}
	100% {
		clip-path: inset(0 0 0 0);
		-webkit-clip-path: inset(0 0 0 0);
	}
}
.reveal-center-scroll {
	clip-path: inset(0 50% 0 50%);
	-webkit-clip-path: inset(0 50% 0 50%);
	transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}
.reveal-center-scroll.is-show {
	clip-path: inset(0 0 0 0);
	-webkit-clip-path: inset(0 0 0 0);
}
/* ========================================
   時間差
======================================== */
.delay-1 {
	transition-delay: 0.3s !important;
	animation-delay: 0.3s !important;
}
.delay-2 {
	transition-delay: 0.5s !important;
	animation-delay: 0.5s !important;
}
.delay-3 {
	transition-delay: 0.7s !important;
	animation-delay: 0.7s !important;
}
.delay-4 {
	transition-delay: 0.9s !important;
	animation-delay: 0.9s !important;
}
.delay-5 {
	transition-delay: 1.1s !important;
	animation-delay: 1.1s !important;
}
.delay-6 {
	transition-delay: 1.3s !important;
	animation-delay: 1.3s !important;
}
.delay-7 {
	transition-delay: 1.5s !important;
	animation-delay: 1.5s !important;
}
.delay-8 {
	transition-delay: 1.7s !important;
	animation-delay: 1.7s !important;
}
.delay-9 {
	transition-delay: 2.0s !important;
	animation-delay: 2.0s !important;
}
.delay-10 {
	transition-delay: 2.1s !important;
	animation-delay: 2.1s !important;
}
.delay-11 {
	transition-delay: 2.2s !important;
	animation-delay: 2.2s !important;
}
.delay-12 {
	transition-delay: 2.3s !important;
	animation-delay: 2.3s !important;
}
.delay-13 {
	transition-delay: 2.4s !important;
	animation-delay: 2.4s !important;
}
/* ========================================
   HOVER
======================================== */
@media (min-width: 751px) and (hover: hover) and (pointer: fine) {
	a {transition: .3s!important;}
    a:hover {opacity: 0.7;transition: .3s!important;}
}
/* ========================================
   レイアウト
======================================== */
#lp {
    font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-weight: 500;
	font-feature-settings: normal;
	width: 100%;
	position: relative;
	min-height: 100vh;
	background: url(../img/pc-bg2.webp) top center / cover no-repeat;
	background-attachment: fixed;
	overflow: hidden;
}
#lp img {
	max-width: 100%;
	margin: auto;
}
/* 中央コンテンツ */
.lp__inner {
	width: 375px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	background: #fff;
}
/*PCナビと飾りテキスト*/
.lp__bg {
	display: flex;
	height: 100vh;
	justify-content: space-between;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
}
.lp__nav,
.lp__deco {
	display: flex;
	flex-direction: column;
	justify-content: center;
	pointer-events: initial;
	width: calc((100% - 375px) / 2);
	position: relative;
}
.lp__nav {
	font-family: "Bebas Neue", sans-serif;
	font-size: 26px;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	color: #fff;
	margin-top: -142px;
	padding-right: 15.54vw;
	align-items: flex-end;
}
.lp__nav-item + .lp__nav-item {
	margin-top: 14px;
}
/*流れる文字*/
.lp__deco {
	margin-top: -310px;
    align-items: flex-start;
}
.lp__deco > img {
	margin: initial!important;
	position: absolute; 
}
.lp__deco-item1 {
	top: 349px;
    left: 40px;
}
.lp__deco-item2 {
	top: 379px;
    left: 35px;
}
.lp__deco-item3 {
	top: 415px;
    left: 55px;
}
@media screen and (max-width : 950px) {
	.lp__nav {
		padding-right: 7vw;
	}
}
@media screen and (max-width : 767px) {
	.lp__nav,
	.lp__deco {
		display: none;
	}
}
@media screen and (max-width : 650px) {
	.lp__bg {
		display: none;
	}
}
@media screen and (max-width : 425px) {
	.lp__inner {
		width: 100%;
	}
}
@media screen and (max-width : 375px) {
	#lp {
		background: none;
	}
}
/* ========================================
   共通
======================================== */
.l-section {
	padding-inline: 15px;
}
.l-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}
.l-cluster--end {
	justify-content: flex-end;
}
.l-cluster--center {
	justify-content: center;
}
.l-cluster--between {
	justify-content: space-between;
}
.section-title {
	text-align: center;
	font-weight: 700;
	margin-bottom: 16px;
}
.section-title span {
	display: block;
	margin-bottom: 9px;
}
@media screen and (max-width : 374px) {
	.l-cluster {
		gap: 10px;
	}
}
/* ========================================
   BUTTON
======================================== */
.btn-wrapper {
	z-index: 10;
	position: relative;
}
.btn {
	width: 100%;
	max-width: 304px;
	background: var(--color03);
	color: #fff;
	font-size: 18px; 
	font-weight: 700;
	display: flex; 
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	height: 58px;
	border: none;
	margin: auto;
	position: relative;
}
.btn span {
	position: absolute; 
	right: 22px;
	transition: .3s;
}
.btn:hover span {
	right: 15px;
	transition: .3s;
}
/*ショップ情報へ*/
.btn-shop {
	max-width: 145px;
	height: 32px;
	font-size: 12px;
	font-weight: 500;
	background: var(--color02);
	margin: auto 0 0;
}
.btn-shop a {
	display :flex; 
	align-items: center;
}
.btn-shop span {
    right: 11px;
    width: 7px;
    height: 10px;
}
.btn-shop:hover span {
	right: 8px;
}
@media screen and (max-width : 374px) {
	.btn-shop {
		margin: 20px auto 0;
	}
}
/* ========================================
   黄色い背景
======================================== */
.yellow-bg {
	position: relative; 
	z-index: 10;
}
.yellow-bg > * {
	background: var(--color04);
}
.yellow-bg::before {
	content: "";
	background: url(../img/bg__yellow.webp) center / cover no-repeat;
	width: 100%;
	height: 131px;
	display: block;
}
.yellow-bg::after {
	content: "";
	background: url(../img/bg__yellow2.webp) center / cover no-repeat;
	width: 100%;
	height: 141px;
	display: block;
}
/* ========================================
   水色背景
======================================== */
.blue-bg {
	background: var(--color01);
}
/* ========================================
   ラベル
======================================== */
.item__label {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 12px; 
	font-weight: 700;
	display: block; 
	justify-content: center;
	align-items: center;
	padding: 1px 5px;
	color: #fff;
}
.item-label2 {
	background: var(--color03);
}
.item-label3 {
	background: #956134;
}
.item-label4 {
	background: #006835;
}
.item-label5 {
	background: var(--color04);
	color: #000;
}
.item-label6 {
	background: var(--color02);
}
/* ========================================
   01FV
======================================== */
.fv {
	background: url(../img/fv.webp) top center / cover no-repeat;
	height: 515px;
	position: relative;
}
.fv__inner {
	position: relative;
	z-index: 2;
	text-align: center; 
	width: 100%;
	height: 100%;
}
.fv__title {
	padding-top: 77px;
}
.fv__subtitle {
	margin-top: -47px;
	margin-top: -51px;
}
.fv__date {
	margin-top: 1px;
	margin-top: -3px;
}
.fv__date img,
.fv__time img {
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}
.fv__time {
	margin-top: 11px;
	margin-top: 9px;
}
.fv__text {
	font-weight: 600;
	margin-top: 8px;
	margin-top: 6px;
}
.fv__img1 {
	position: absolute; 
	top: 18px;
    left: 27px;
}
.fv__img1 img {
	width: 126px;
	height: 60px;
}
.fv__img2 {
	position: absolute; 
	top: 30px;
    right: 20px;
}
@media screen and (max-width: 375px) {
	.fv {
		height: 137.333vw;
	}
	.fv__title {
		padding-top: 20.533vw;
	}
	.fv__title img {
		width: 86.4vw;
		height: auto;
	}
	.fv__subtitle {
		margin-top: -13.6vw;
	}
	.fv__subtitle img {
		width: 88vw;
		height: auto;
	}
	.fv__date img {
		width: 80.266vw;
		height: auto;
	}
	.fv__time {
		margin-top: 2.4vw;
	}
	.fv__time img {
		width: 85.6vw;
		height: auto;
	}
	.fv__text {
		margin-top: 1.6vw;
		font-size: 4vw;
	}
	.fv__img1 {
		top: 4.8vw;
		left: 7.199vw;
	}
	.fv__img1 img {
		width: 33.6vw;
		height: auto;
	}
	.fv__img2 {
		top: 7.2vw;
		right: 4vw;
	}
	.fv__img2 img {
		width: 41.6vw;
		height: auto;
	}
}
/* ========================================
   02GUIDE
======================================== */
.guide {
	margin-top: -51px;
    z-index: 3;
    position: relative;
}
.guide::after {
	content: "";
	margin-top: -69px;
}
.guide__inner {
	background: var(--color04);
	margin-top: -55px;
}
.guide__title {
	margin-bottom: 16px;
}
.guide__list {
	gap: 9px; 
}
.guide__item {
	width: 80px; 
	height: 91px;
	background: #fff;
	border-radius: 8px;
	padding: 7px 5px 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	font-weight: 600;
	line-height: 18px;
}
.guide__item a {
	display: flex;
	flex-direction: column;
}
.guide__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
}
.guide__text {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	line-height: 1.2;
	text-align: center;
}
@media screen and (max-width : 374px) {
	.guide {
		margin-top: -15.2vw;
	}
}
@media screen and (max-width : 320px) {
	.guide {
		margin-top: -19.2vw;
	}
}
/* ========================================
   03ABOUT
======================================== */
.about {
	background: var(--color01);
	margin-top: -48px;
}
.about__inner {
	padding-block: 67px;
}
.about__detail {
	margin-top: 25px;
}
.about__item {
	text-align: center;
}
.about__item + .about__item {
	margin-top: 17px;
}
.about__subtitle {
	margin: auto auto 6px;
	width: 97px; 
	height: 26px; 
	background: var(--color02);
	color: #fff;
	font-weight: 700;
	display: flex; 
	align-items: center;
	justify-content: center;
	border-radius: 15px;
}
.about__text {
	line-height: 1.8;
}
.about__text a {
	display: inline;
	text-decoration: underline;
}
.about__beerfes {
	background: #fff;
	margin-top: 18px;
	padding: 13px 18px 15px 16px;
	border-radius: 10px;
}
.about__beerfes-title {
	font-size: 18px; 
	color: var(--color03);
	font-weight: 700;
	text-align: center;
	margin-bottom: 6px;
}
.about__beerfes-text {
	font-size: 14px; 
	line-height: 1.57;
}
/* ========================================
   04BEER & FOOD
======================================== */
.beerfood {
	margin-top: -58px;
}
.beerfood::after {
	margin-top: -50px;
}
.beerfood__inner {
	margin-top: -35px;
	position: relative;
}
.beerfood__list {	
    background: #fff;
    border-radius: 10px;
    width: 100%;
    margin: auto auto 30px;
    padding: 16px 13px 19px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 19px 14px;
}
.beerfood__item {
    counter-increment: beerfood;
}
.beerfood__subtitle {
	font-size: 14px;
	line-height: 1.285;
	font-weight: 700;
	margin-bottom: 6px;
	margin-right: -1px;
	display: flex;
}
.beerfood__subtitle::before {
	flex-shrink: 0;
    content: counter(beerfood);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #CB221E;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-right: 7px;
	line-height: 1;
	padding-bottom: 1px;
	margin-top: 2px;
}
.beerfood__logo {
	height: 55px;
	display: flex; 
	align-items: center;
	justify-content: center;
	font-weight: 700;
    font-size: 17px;
	text-align: center;
}
.beerfood__text {
	font-size: 12px; 
	font-weight: 400;
	line-height: 1.333;
}
.beerfood__text span {
	display: block; 
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #000;
}
/* ========================================
   ビールの絵
======================================== */
.cheers {
	position: absolute;
    bottom: 30px;
    right: 30px;
}
.cheers__beer:last-of-type {
	margin-top: 20px;
	display: block;
}
@media screen and (max-width : 425px) {
	.beerfood__img img {
		width: 100%; 
		height: auto;
	}
}
@media screen and (max-width : 374px) {
	.beerfood__list {
		grid-template-columns: 1fr;
	}
	.cheers {
		display: none;
	}
}
/* ========================================
   05MAP&AREA
======================================== */
.map {
	background: var(--color01);
	margin-top: -50px;
}
.map__inner {
	padding-top: 86px;
	padding-block: 86px 75px;
}
.map__img,
.map__img-button button {
	cursor: pointer;
}
.map-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
}
.map-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.4s ease,
		visibility 0s;
}
.map-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}
.map-modal__content {
	position: relative;
	z-index: 1;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
}
.map-modal__content img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 40px);
	width: auto;
	height: auto;
	object-fit: contain;
}
.map-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}
/*マップアイコン*/
.map__icon {
	margin-top: 25px;
	justify-content: center;
}
/* ========================================
   06EVENT
======================================== */
.event {
	margin-top: -53px;
}
.event::after {
	margin-top: -53px;
}
.event__inner {
	margin-top: -20px;
	position: relative;
	z-index: 2;
}
.event__item {
	background: #fff;
	border-radius: 10px;
}
.event__item + .event__item {
	margin-top: 25px;
}
.event__subtitle {
	display: flex; 
	align-items: center; 
	justify-content: center;
	background: #069A3E;
	color: #fff;
	font-size: 18px; 
	font-weight: 700;
	border-radius: 10px 10px 0 0;
	padding-block: 4px;
}
.color-orange {
	background: #ea5516!important;
}
.event__body {
	padding: 19px 19px 21px;
}
.event__name {
	font-size: 18px; 
	font-weight: 700;
}
.event__text {
	font-size: 16px; 
	font-weight: 400;
	margin-block: 8px;
	line-height: 1.36;
}
.event__body .l-cluster {
	flex-wrap: nowrap;
	gap: 18px; 
	align-items: flex-start;
	border-bottom: 1px solid #ccc;
    padding-bottom: 12px;
	margin-bottom: 16px;
}
.event__body .l-cluster .event__text {
	margin: 0;
}
.event__img {
	flex-shrink: 0;
	margin-top: 10px;
}
.event__body .btn-shop {
	margin: auto auto 10px;
	background: #069A3E;
}
/* ========================================
   07AFTER PARTY
======================================== */
.afterparty {
	margin-top: -52px;
    z-index: 3;
    position: relative;
}
.afterparty::after {
	margin-top: -75px;
}
.afterparty__inner {
	margin-top: -36px;
	padding-bottom: 20px;
	position: relative;
	z-index: 2;
}
.afterparty__copy {
	margin-block: 20px;
	text-align: center;
	font-size: 14px;
}
.afterparty__icon-list {
	margin-bottom: 15px;
}
.afterparty__icon-item {
	font-size: 12px; 
	font-weight: 600;
	gap: 5px;
}
.afterparty__list {
	background: #fff;
	border-radius: 10px;
	width: 100%;
	margin: auto auto 30px;
	padding: 20px 13px 26px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 15px;
}
.afterparty__item {
    position: relative;
	display: flex;
    flex-direction: column;
}
.afterparty__subtitle {
	background: #eee;
	display: flex; 
	align-items: center; 
	width: 100%;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.285;
	padding: 4px 5px;
	margin-bottom: 7px;
}
.afterparty__text {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.333;
	position: relative;
	display: flex;
	gap: 6px;
}
.afterparty__text-detail {
	color: #A6230A;
	font-weight: 600;
	margin-top: 10px; 
	padding-top: 10px;
	margin-bottom: 20px;
	border-top: 2px dashed #333;
}
.afterparty__text::before {
	content: "";
	background: url(../img/afterparty_icon.svg) center / cover no-repeat;
	width: 15px;
	height: 16px;
	display: block;
	flex-shrink: 0;
}
.afterparty__text-detail::before {
	background: url(../img/afterparty_icon2.svg) center / cover no-repeat;
	width: 20px;
	height: 16px;
	margin-top: 2px;
}
@media screen and (max-width : 425px) {
	.afterparty__img img {
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width : 374px) {
	.afterparty__list {
		grid-template-columns: 1fr;
	}
}
/* ========================================
   08ACCESS
======================================== */
.access {
	margin-top: -55px;
}
.access__inner {
	padding-block: 81px 60px;
}
.access__detail {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    margin: auto auto 30px;
    padding: 20px 19px 26px 18px;
	position: relative; 
	z-index: 2;
	text-align: center;
}
.access__subtitle {
	font-size: 20px; 
	font-weight: 700;
}
.access__text {
	line-height: 1.5;
	font-size: 10px;
}
.access__text + .access__text {
	margin-top: 13px;
	margin-bottom: 19px;
	font-size: 16px;
	font-weight: 700;
}
.access.yellow-bg::before {
	margin-top: -52px;
}
.access.yellow-bg::after {
	margin-top: -85px;
}
.access__map {
	margin-bottom: 25px;
}
.access__att {
	font-size: 10px; 
    line-height: 1.57;
}
/* ========================================
   09SNS
======================================== */
.sns__inner {
	padding-block: 32px;
}
.sns__title {
	margin-bottom: 30px;
}
@media screen and (max-width : 375px) {
	.sns__inner {
		padding-bottom: 0;
	}
}
/* ========================================
   10注意書き
======================================== */
.attention__list {
	padding-block: 17px 30px;
}
.attention__item {
	font-weight: 500;
    display: flex;
    font-size: 16px;
}
.attention__item::before {
	content: "※";
}
.attention__item + .attention__item {
	margin-top: 20px;
}
@media screen and (max-width : 375px) {
	.attention__item {
		font-size: 4.266vw;
	}
}
/* ========================================
   11PAGETOP
======================================== */
.page-top {
	position: fixed;
	right: 11px;
	bottom: 25px;
	z-index: 100;
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #fff;
	border: 2px solid var(--color05);
	color: var(--color05);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	padding-bottom: 4px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0);
	transition:
		opacity 0.4s ease,
		transform 0.3s ease,
		visibility 0s linear 0.4s;
}
.page-top.is-show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.4s ease,
		transform 0.3s ease,
		visibility 0s;
}
@media (hover: hover) {
	.page-top:hover {
		transform: translateY(-5px);
	}
}