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


/* タイトル */
.title{
	text-align: center;
	margin-bottom: 60px;
}

.title01{
	font-size: 40px;
	color: #18293e;
}

.title01 p{
	border-bottom: 3px solid #527695;
	display: inline-block;
	margin-bottom: 15px;
}

.btn1{
	background-color: #18293e;
	color: #ffffff;
	display: inline-block;
	width: 160px;
	padding:10px 0px;
	max-width: 100%;
	height: auto;
	margin-top: 60px;
	position: relative;
}


/* メインビジュアル（店名が長くて2行になっても、キャッチコピーが下にはみ出さないよう高さを固定しない） */
.main{
	height: auto;
	min-height: 630px;
	padding-bottom: 60px;
}

.catchcopy{
	padding-top: 330px;
	color: #fffbf2;
	text-shadow: 0 0 16px rgba(0, 0, 0, 0.35);
}

.catchcopy_name{
	font-family: 'Cormorant Garamond', '游明朝 Medium', 'Yu Mincho Medium', '游明朝', YuMincho, 'Hiragino Mincho ProN', serif;
	font-style: italic;
	font-synthesis: none; /* 和文は斜体の字形がないので、無理に傾けない */
	/* --fit-chars は書き出すときに店名の文字数から入る（全角1・半角0.55で数える）。長い店名ほど小さくして1行に収める */
	font-size: min(136px, calc(1120px / var(--fit-chars, 5)));
	line-height: 1.1;
}

.catchcopy_text{
	margin-top: 20px;
	font-size: 18px;
	letter-spacing: 0.25em;
}


/* ABOUT */
.about{
	padding-top: 130px;
}

.about01{
	display: flex;
	justify-content: space-between;
	margin-top: 130px;
}

.about02{
	display: flex;
	margin-top: 130px;
}

.text{
	margin-right: 60px;
	width: 560px;
}

.text1{
	font-size: 28px;
	margin-bottom: 30px;
}

.text1 span{
	background: linear-gradient(transparent 60%,#ffeeb4 60%);
}

.text2{
	margin-left: 60px;
	width: 560px;
}

.about01_img img,
.about02_img img{
	display: block;
	width: 560px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 560 / 331;
	object-fit: cover; /* 写真の大きさ・形が違っても、この欄の形に収める */
}


/* MENU */
.menu{
	padding-top: 130px;
}

.menu1{
	display:flex;
	justify-content:space-between;
}

.menu01{
	text-align: center;
	margin:0px 10px;
	/* 4枚を同じ幅にする（文章の長さで幅が変わると、写真の大きさと下の見出し・ボタンがずれるため） */
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* 文章の行の数がちがっても、ボタンはカードのいちばん下にそろえる */
.btn_menu{
	margin-top: auto;
}

.menu01 img{
	display: block;
	margin: 0 auto;
	width: 266px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover; /* 写真の大きさ・形が違っても、この欄の形に収める */
}

.text3{
	font-size: 28px;
	margin-top: 30px;
}

.text3 p{
	border-bottom: 3px solid #ffc879;
	display: inline-block;
	line-height: 30px;
	padding-bottom: 10px;
}

/* 下線の色は並び順で変える（項目を増やしても4色を繰り返す） */
.menu01:nth-child(4n+2) .text3 p{
	border-bottom-color: #82a3bf;
}

.menu01:nth-child(4n+3) .text3 p{
	border-bottom-color: #8ebc88;
}

.menu01:nth-child(4n+4) .text3 p{
	border-bottom-color: #ecb6c0;
}


/* MENUボタン */
.btn1_menu{
	background-color: #18293e;
	color: #ffffff;
	display: inline-block;
	width: 160px;
	padding:10px 0px;
	max-width: 100%;
	height: auto;
	margin-top: 30px;
	position: relative;
}

.btn1_menu::before{
	border-right: 2px solid #ffffff;
	border-top:2px solid #ffffff;
	bottom:0px;
	content:"";
	height:5px;
	margin: auto;
	right:27px;
	top:0px;
	transform: rotate(45deg);
	width: 5px;
	position: absolute;
}

.btn1_menu:hover{
	opacity: 0.7;
}


/* PARTYPLAN */
.partyplan{
	padding-top: 130px;
}

.partyplan_back{
	width: 100%;
	padding:60px 0px 70px 0px;
	background-image: url("../img/index/partyplan_back.png");
}

.text_partyplan{
	color: #ffffff;
}

.title01_a p{
	color: #ffffff;
}

.title01_a p{
	border-bottom: 3px solid #ffffff;
}


/* PARTYPLANスライド */
.box2{
	display: flex;
	justify-content: space-around;
	margin-top: 90px;
}

.box3{
	width:570px;
	height: auto;
	background-color: #ffffff;
}

.box3 img{
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 570 / 419;
	object-fit: cover; /* 写真の大きさ・形が違っても、この欄の形に収める */
}

.text4_01{
	font-size: 28px;
	font-weight: bold;
	margin: 0px 30px;
	line-height: 30px;
}

.text4_01 p{
	border-bottom: 1px solid #000000;
	padding-top: 10px;
	padding-bottom: 10px;
}

.text4{
	padding-top: 20px;
}

.text4_02{
	margin-top: 10px;
	padding:5px 30px; 
}


/* PARTYPLANボタン */
.btn_plan{
	text-align: center;
}

.btn1_plan{
	background-color: #18293e;
	color: #ffffff;
	display: inline-block;
	width: 160px;
	padding:10px 0px;
	max-width: 100%;
	height: auto;
	margin-top: 30px;
	margin-bottom: 40px;
	position: relative;
}

.btn1_plan::before{
	border-right: 2px solid #ffffff;
	border-top:2px solid #ffffff;
	bottom:0px;
	content:"";
	height:5px;
	margin: auto;
	right:27px;
	top:0px;
	transform: rotate(45deg);
	width: 5px;
	position: absolute;
}

.btn1_plan:hover{
	opacity: 0.7;
}


/* NEWS */
.news{
	padding-top: 130px;
}

.news_list{
	border-bottom:1px solid #527695;
}

.news01{
	display: flex;
	border-top:1px solid #527695;
	padding:20px 20px;
}

.news01 p{
	color: #000000;
}

.news01:hover{
	opacity: 0.7;
}

.date{
	margin-right: 80px;
}


/* アクセス */
.access{
	padding-top: 130px;
}

.access_back{
	width: 100%;
	height: auto;
	background-color: #18293e;
	padding: 20px 0px;
}

.access_back_img{
	width: 100%;
	height: auto;
	padding: 60px 0px;
	background-image: url("../img/index/access_02.png");
	background-size: cover;
	background-position: center;
}

.access01{
	display: flex;
}

.access01_img{
	display: flex;
}

.access01_img img{
	display: block;
	width: 700px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 700 / 477;
	object-fit: cover; /* 写真の大きさ・形が違っても、この欄の形に収める */
}

.access01_back{
	width: 700px;
	height: auto;
	padding: 30px 30px;
	background-image: url("../img/index/access_03.png");
	background-size: cover;
	background-position: center;
}

.access_text01{
	font-size: 28px;
	border-bottom: 1px solid #527695;
	padding-bottom: 10px;
}

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

.access_text05{
	width: 100px;
}

.access_text02{
	margin-top: 30px;
}


/* アクセスボタン */
.btn_access{
	text-align: center;
}

.btn1_access{
	background-color: #18293e;
	color: #ffffff;
	display: inline-block;
	width: 160px;
	padding:10px 0px;
	max-width: 100%;
	height: auto;
	margin-top: 20px;
	position: relative;
}

.btn1_access::before{
	border-right: 2px solid #ffffff;
	border-top:2px solid #ffffff;
	bottom:0px;
	content:"";
	height:5px;
	margin: auto;
	right:27px;
	top:0px;
	transform: rotate(45deg);
	width: 5px;
	position: absolute;
}

.btn1_access:hover{
	opacity: 0.7;
}


/* インスタグラム */
.instagram{
	margin-top: 130px;
}

.instagram_img{
	display: flex;
	justify-content:space-between;
}

.instagram_img1:hover{
	opacity:0.7;
}

.instagram_img1{
	padding-right:10px;
	padding-left:10px;
}

.instagram_img1 img{
	display: block;
	width: 311px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover; /* 写真の大きさ・形が違っても、この欄の形に収める */
}


@media screen and (max-width: 1100px){

	/* メインビジュアル（固定ヘッダーの下から始める） */
	.main{
		margin-top: 80px;
	}
	
}


@media screen and (max-width: 1300px){

	/* PARTYPLANスライド */
	.box3{
		margin-left: 15px;
	}
	

	/* NEWS */
	.news01{
		padding:20px 20px;
	}
	

	/* アクセス */
	.access01{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	
}


@media screen and (max-width: 1000px){

	/* MENU（4列だと分類名が折り返すので2列にする） */
	.menu1{
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.menu01{
		flex: 0 0 calc(50% - 20px);
		width: calc(50% - 20px);
		margin-bottom: 60px;
	}
	
}


@media screen and (max-width: 750px){

	/* タイトル */
	.title{
		text-align: center;
		margin-bottom: 30px;
	}
	
	.title01{
		font-size: 30px;
		color: #18293e;
	}
	

	/* ボタン */
	.btn1{
		margin-top: 30px;
	}
	

	/* メインビジュアル */
	.main{
		height: auto;
		min-height: 0;
		padding-bottom: 50px;
		background-image: url("../img/index/img_mainvisual_sp.png");
	}
	
	.catchcopy{
		padding-top: 150px;
	}
	
	.catchcopy_name{
		font-size: min(72px, calc((100vw - 40px) / var(--fit-chars, 5)));
	}
	
	.catchcopy_text{
		margin-top: 12px;
		font-size: 13px;
		letter-spacing: 0.1em;
	}
	

	/* ABOUT */
	.about{
		padding-top: 70px;
	}
	
	.about01{
		flex-wrap: wrap-reverse;
		justify-content: center;
		margin-top: 60px;
	}
	
	.about02{
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 60px;
	}
	
	.text{
		margin-right: 0px;
		width: 100%;
	}
	
	.text2{
		margin-left: 0px;
		width: 100%;
	}
	
	.text1{
		font-size: 24px;
		margin: 20px 0px;
	}
	
	.about01_img img{
		width: 100%;
	}
	
	.about02_img img{
		width: 100%;
	}
	

	/* MENU */
	.menu{
		padding-top: 80px;
	}
	
	.menu1{
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.menu01{
		flex: 0 0 100%;
		width: 100%;
		margin-bottom: 60px;
	}
	
	.text3{
		font-size: 24px;
		margin-top: 20px;
	}
	

	/* PARTYPLAN */
	.partyplan{
		padding-top: 30px;
	}
	
	.text4_01{
		font-size: 24px;
		font-weight: bold;
	}
	
	.text4{
		padding-top: 20px;
	}
	

	/* PARTYPLANスライド */
	.box3{
		width: 80%;
		flex-shrink: 0;
	}
	
	.box2{
		overflow-x: scroll;
		padding-bottom: 20px;
		margin-top: 30px;
	}
	

	/* NEWS */
	.news{
		padding-top: 80px;
	}
	
	.news01{
		flex-wrap: wrap;
		padding:20px 20px;
	}
	

	/* アクセス */
	.access{
		padding-top: 80px;
	}
	
	.access_text01{
		font-size: 24px;
	}
	
	.access01_back{
		width: 100%;
	}
	
	.access_text04{
		flex-wrap: wrap;
	}
	
	.access_text05{
		width: 100px;
	}
	

	/* インスタグラム */
	.instagram{
		margin-top: 80px;
	}
	
	.instagram_img{
		flex-wrap: wrap;
		justify-content:center;
	}
	
	.instagram_img1{
		width: 45%;
		padding-right:10px;
		padding-left:10px;
	}
	
	.instagram_img1_a{
		padding-bottom: 15px;
	}
	
}