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

 2024.12.19

--------------------------------------------*/
/* Cormorant Infant */
@import url("https://use.typekit.net/jth1oor.css");
/* Noto Serif Japanese */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
/* ----------------------------------------------

 * タグの設定

---------------------------------------------- */
a {
	display: inline-block;
	outline:none;
	color: #262626;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
    transition: all .5s ease;
	user-select: none;
}
a.link {position: absolute;top: 0;left: 0;z-index: 4;width: 100%;height: 100%;}
input,
input[type="submit"],
input[type="button"],
button {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	box-sizing: border-box;
	outline: none;
	color: #262626;
	font-style: normal;
	font-weight: 500;
	font-family: "Noto Serif JP", serif;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea {
   -webkit-appearance: none;
   appearance: none;
   border-radius: 0;
   color: #111;
}
select {
	font-family: "Noto Serif JP", serif;
    -webkit-appearance: none;
	 -moz-appearance: none;
    appearance: none;
}
select::-ms-expand{
	font-family: "Noto Serif JP", serif;
}
/*------------------------------------------------*/
html {
	margin: 0;
	padding: 0;
	background: #F8F7F1;
	color: #262626;
	font-style: normal;
	font-weight: 500;
	font-size: 62.5%;
	line-height: 1.7;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	-webkit-font-smoodting: antialiased;
	-moz-osx-font-smoodting: grayscale;
	word-break: break-all;
}
body {font-size: clamp(13px, calc(13px + 3 * ((100vw - 375px) / 1545)), 16px);line-height: 1.7;}
main {overflow: hidden;}
.HinaMinchoR {font-family: "hina-mincho", sans-serif;font-weight: 400;font-style: normal;}
.CormorantInfantR {font-family: "cormorant-infant", sans-serif;font-weight: 400;font-style: normal;}
section {position: relative;z-index: 1;}
h2,h3,h4,h5 {line-height: 1.5;letter-spacing: 0;}
p {font-size: clamp(13px, calc(13px + 3 * ((100vw - 375px) / 1545)), 16px);line-height: 1.7;letter-spacing: .05em;}
li,th,td,dt,dd,figcaption {line-height: 1.7;letter-spacing: .05em;}
a img {-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.inner {width: 90%;max-width: 1536px;margin: 0 auto;}
.blank {
	padding-top: clamp(30px, calc(30px + 72 * ((100vw - 375px) / 1545)), 102px);
	padding-bottom: clamp(30px, calc(30px + 72 * ((100vw - 375px) / 1545)), 102px);
}
.flexbox {display: flex;flex-wrap: wrap;justify-content: space-between;}
/* title_common */
.title_common {margin-bottom: clamp(30px, calc(30px + 70 * ((100vw - 375px) / 1545)), 100px);}
.title_common h2 {font-size: clamp(22px, calc(22px + 25 * ((100vw - 375px) / 1545)), 47px);}
/* button */
.read {text-align: center;}
.slidebtn {
	display: inline-block;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 240px;
	padding: 10px 0;
	border: 1px solid #F66C02;
	border-radius: 5em;
	overflow: hidden;
	background: #F66C02;
	color: #fff;
	font-weight: bold;
	letter-spacing: .03em;
	text-align: center;
}
.slidebtn:hover {color: #F66C02;}
.slidebtn::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	transform-origin: left top;
	transform: scale(0, 1);
	height: 110%;
	background: #fff;
	transition: transform .3s;
}
.slidebtn:hover::before {transform-origin: left top;transform: scale(1, 1);}
.pc {display: block;}
.sp {display: none;}
@media only screen and ( max-width : 767px ) {
	.pc {display: none;}
	.sp {display: block;}
}
@media only screen and ( max-width : 500px ) {
	.title_common h2 {text-align: center;}
}
/*------------------------------------------------

    header

------------------------------------------------*/
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	width: 100%;
	padding: 20px 4vw;
	background: rgba(255, 255, 255, 65%);
	transition: .3s;
}
header .header_btn {display: none;}
header .logo {position: relative;z-index: 5;width: clamp(150px, calc(150px + 50 * ((100vw - 375px) / 1545)), 200px);}
/* nav */
header nav .wrap {display: flex;justify-content: flex-end;align-items: center;}
header nav .wrap ul {
	display: flex;
	justify-content: flex-end;
	flex: 1;
	gap: clamp(10px, calc(10px + 40 * ((100vw - 375px) / 1545)), 50px);
	width: 100%;
	height: 100%;
}
header nav .wrap ul li {display: flex;justify-content: center;align-items: center;}
header nav .wrap ul li a {position: relative;font-size: 1vw;text-align: center;}
#sp-menu {display: none;}
@media only screen and ( max-width : 1024px ) {
	header {padding: 10px 20px;}
	header nav {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background: #F8F7F1;
		transition: all .3s linear;
		visibility: visible;
	}
	header nav.clicked {display: block;right: 0%;overflow: auto;}
	header nav .wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -50%);
		flex-direction: column;
	}
	header nav .wrap ul {flex-direction: column; gap: 20px;margin-bottom: 20px;}
	header nav .wrap ul li a {display: inline-block;font-size: 1.6rem;}
	header .header_btn {
		display: flex;
		align-items: center;
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		z-index: 50;
		cursor: pointer;
	}
	header .header_btn p {
		position: relative;
		margin: 6px 10px 0 0;
		color: #2A2A2A;
		font-size: calc(16px + 4 * ((100vw - 375px) / 649));
		letter-spacing: .04em;
		line-height: 1;
		user-select: none;
	}
	header .header_btn:hover p {cursor: pointer;}
	header .header_btn p::after {	
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		height: 1px;
		background: #262626;
		transition: all .6s cubic-bezier(.77, 0 ,.175, 1);
	}
	header .header_btn:hover p::after {width: 100%;}
	#sp-menu {
		display: block;
		position: relative;
		z-index: 10;
		width: 24px;
		height: 18px;
		cursor: pointer;
	}
	#sp-menu span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		border-radius: 4px;
		background-color: #262626;
		transition: all .5s;
	}
	#sp-menu span:nth-of-type(1) {top: 0;}
	#sp-menu span:nth-of-type(2) {top: 8px;}
	#sp-menu span:nth-of-type(3) {bottom: 0;}
	#sp-menu.clicked span:nth-of-type(1) {transform: translateY(8px) rotate(-45deg);}
	#sp-menu.clicked span:nth-of-type(2) {left: 50%;opacity: 0;animation: bar02 .8s forwards;}
	@keyframes bar02 {
		100% {height: 0;}
	}
	#sp-menu.clicked span:nth-of-type(3) {transform: translateY(-8px) rotate(45deg);}
}
@media only screen and ( max-width : 500px ) {
	header .header_btn p {display: none;}
	header .logo {width: 110px;}
}
/*------------------------------------------------

    footer

------------------------------------------------*/
footer {overflow: hidden;background: #192C4E;color: #fff;}
footer .inner {max-width: 1730px;}
footer .block1 {
	padding-top: clamp(20px, calc(20px + 65 * ((100vw - 375px) / 1545)), 85px);
	padding-bottom: clamp(20px, calc(20px + 58 * ((100vw - 375px) / 1545)), 78px);
}
footer .block1 .logo {position: relative;z-index: 5;color: #fff;}
footer .block1 .logo p.jp {
	margin-bottom: 6px;
	font-size: clamp(22px, calc(22px + 10 * ((100vw - 375px) / 1545)), 28px);
	line-height: 1;
	text-align: center;
}
footer .block1 .logo p.jpsmall {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1;
	text-align: center;
	margin-bottom: 6px;
}
footer .block1 .logo p.en {
	font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);
	line-height: 1;
	letter-spacing: .2em;
	text-align: center;
}
footer .block1 .container {width: 66%;}
footer .block1 .container .wrap {width: 45%;}
footer .block1 .container .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	border-bottom: 1px solid #A3A3A3;
	color: #A3A3A3;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
}
footer .block1 .container .wrap:nth-child(1) ul {display: grid;gap: clamp(10px, calc(10px + 20 * ((100vw - 375px) / 1545)), 30px);}
footer .block1 .container .wrap:nth-child(2) .content ul {
	display: grid;
	gap: clamp(10px, calc(20px + 10 * ((100vw - 375px) / 1545)), 20px);
	width: 32%;
}
footer .block1 .container .wrap:nth-child(1) ul li h4 {
	display: inline-block;
	position: relative;
	padding-left: 15px;
	font-size: clamp(11px, calc(11px + 5 * ((100vw - 375px) / 1545)), 16px);
	letter-spacing: .1em;
}
footer .block1 .container .wrap:nth-child(1) ul li h4::before {
	content: '';
	position: absolute;
	top: clamp(2px, calc(2px + 6 * ((100vw - 375px) / 1545)), 8px);
	left: 0;
	width: 10px;
	height: 10px;
	background: #fff;
}
/*footer .block1 .container .wrap:nth-child(1) ul li p {
	font-size: clamp(10px, calc(10px + 6 * ((100vw - 375px) / 1545)), 16px);
	letter-spacing: .1em;
}*/
footer .block1 .container .wrap:nth-child(2) .content ul li a {
	color: #fff;
	font-size: clamp(13px, calc(13px + 3 * ((100vw - 375px) / 1545)), 15px);
}
footer .block2 {
	align-items: center;
	position: relative;
	padding-top: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	padding-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
}
footer .block2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 1px;
	left: calc(50% - 50vw);
	background: #A3A3A3;
}
footer .block2 ul {display: flex;gap: clamp(20px, calc(20px + 25 * ((100vw - 375px) / 1545)), 45px);}
footer .block2 ul li a {color: #A3A3A3;font-size: clamp(15px, calc(15px + 6 * ((100vw - 375px) / 1545)), 21px);}
footer .block2 small {display: block;color: #A3A3A3;font-size: clamp(12px, calc(12px + 9 * ((100vw - 375px) / 1545)), 21px);}

/* logo-wrapper の追加スタイル */
footer .block1 .logo-wrapper {
	position: relative;
	z-index: 5;
	flex: 1;
}

footer .block1 .logo-wrapper .alcohol-warning {
	margin-top: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	font-size: clamp(10px, calc(10px + 2 * ((100vw - 375px) / 1545)), 12px);
	line-height: 1.6;
	text-align: left;
}

@media only screen and ( max-width : 1024px ) {
	footer .block1 .logo {margin-bottom: 40px;}
	footer .block1 .container {width: 100%;}
	footer .block1 .logo-wrapper {margin-bottom: 40px;}
}
@media only screen and ( max-width : 767px ) {
	footer .block1 .container {gap: 40px;}
	footer .block1 .container .wrap {width: 100%;}
	footer .block2 ul {width: 100%;margin-bottom: 20px;}
}
@media only screen and ( max-width : 500px ) {
	footer .block1 .logo {margin: 0 auto 20px;}
	footer .block1 .container .wrap h3 {text-align: center;}
	footer .block1 .container .wrap:nth-child(1) ul li {text-align: center;}
	footer .block1 .container .wrap:nth-child(1) ul li p {text-align: center;}
	footer .block1 .container .wrap:nth-child(2) .content ul {width: 100%;gap: 10px;margin-bottom: 10px;}
	footer .block1 .container .wrap:nth-child(2) .content ul:last-child {margin-bottom: 0;}
	footer .block1 .container .wrap:nth-child(2) .content ul li {text-align: center;}
	footer .block2 {justify-content: center;}
	footer .block2 ul {justify-content: center;}
	footer .block1 .logo p.jp {font-size: 24px;}
	footer .block1 .logo p.jpsmall {font-size: 12px; margin-top: 40px;}
	footer .block1 .logo p.en {font-size: 13px;}
	footer .block1 .logo-wrapper {margin: 0 auto 20px; text-align: center;}
	footer .block1 .logo-wrapper .alcohol-warning {
		text-align: left;
		font-size: 10px;
	}
}
/*-----------------------------------------------

	404 Not Found

------------------------------------------------*/
#notfound {
	padding-top: calc(130px + 70 * ((100vw - 375px) / 1545));
	padding-bottom: calc(70px + 30 * ((100vw - 375px) / 1545));
}
#notfound h2 {margin-bottom: 50px;text-align: center;}
#notfound h2 span {display: block;font-size: 2.3em;text-align: center;}
#notfound p {margin-bottom: 40px;text-align: center;}
#notfound a {
	display: block;
	position: relative;
	z-index: 1;
	width: 70%;
	max-width: 300px;
	margin: 0 auto;
	padding: 15px;
	border: 1px solid #222;
	background: #222;
	color: #fff;
	text-align: center;
}
#notfound a:hover {color: #222;}
#notfound a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	z-index: -5;
	background: #fff;
	color: #222;
}
#notfound a:hover::after {transform-origin: left top;transform: scale(1, 1);}
#notfound a span {display: block;position: relative;text-align: center;}
/*--------------------------------------------------

    Fixed-banner

--------------------------------------------------*/
.fixed-banner {position: fixed;z-index: 30;right: 4%;bottom: 52px;}
.fixed-btn-banner {animation:fuwafuwa 3s infinite;}
@keyframes fuwafuwa {
	0% {transform:translateY(0)}
	50% {transform:translateY(-20px)}
	100% {transform:translateY(0)}
}
.fixed-btn-banner a {
	position: relative;
	width: 300px;
	height: 60px;
}
.fixed-btn-banner a img {position: absolute;left: 0;}
.fixed-btn-banner a img:last-of-type {opacity: 0;transition: opacity .7s;}
.fixed-btn-banner a:hover img:last-of-type {opacity: 1;}

@media only screen and ( max-width : 767px ) {
	.fixed-banner {right: 8%;}
	.fixed-btn-banner a {
		position: relative;
		width: 200px;
		height: 40px;
	}
}
/*--------------------------------------------------

    年齢確認ポップアップ

--------------------------------------------------*/
.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}
.popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	text-align: center;
}
.popup h3 {margin: 0 0 20px 0;font-size: 18px;color: #333;}
.popup-buttons {display: flex;gap: 10px;justify-content: center;}
.btn {
	padding: 10px 30px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
}
.btn-yes {background-color: #4CAF50;color: white;}
.btn-yes:hover {background-color: #45a049;}
.btn-no {background-color: #f44336;color: white;}
.btn-no:hover {background-color: #da190b;}