@use "common" as *;
@use "ease" as *;

/*------------------------------------------------------------
共通
------------------------------------------------------------*/
* .none{
	display: none;
}

html {
	font-size: calc(16 / 1440 * 100vw);
}
@media screen and (min-width: 1440px) {
	html {
		font-size: 16px;
	}	
}
@media screen and (max-width: $break_sp) and (orientation: portrait) {
	html {
		font-size: 62.5%;
	}
}

body {
	-webkit-text-size-adjust: 100%;
	//font-family: $base_font;
	//font-weight: 400;
	//font-style: normal;
	font-size: get_txt(13);
	line-height: $lh_main;
	color: #3E3A39;
	font-feature-settings: "palt";
	letter-spacing: 2%;
	word-break: break-all;
	background: #FAECDF;
	@extend .web_font_jp;
}
h1,h2,h3,h4,h5{
	font-weight: 400;
}

a {
	color: #3E3A39;
	text-decoration: none;
	// &:visited {}
	&:hover {
		text-decoration: none;
		color: #3E3A39;
	}
}

@media screen and (max-width: $break_sp) and (orientation: portrait) {
	body {
		font-size: get_px(12);
		//letter-spacing: 0.05em;
	}
}

/*------------------------------------------------------------
共通クラス
------------------------------------------------------------*/
.pc{
	display: block;
	&.in{
		display: inline;
	}
}
.sp{
	display: none;
}

@media screen and (max-width: $break_sp) and (orientation: portrait) {
	.pc{
		display: none;
		&.in {
				display: none;
			}
	}
	.sp{
		display: block;
	}
}
.inner{
    width: 94.4444444444vw;
    box-sizing: border-box;
	margin: 0 auto;
	position: relative;
}
.inner2{
	width: get_img(1120);
		box-sizing: border-box;
		margin: 0 auto;
		position: relative;
}

@media screen and (max-width: $break_sp) and (orientation: portrait) {
	.inner,.inner2{
		max-width: none;
		width: 100%;
		padding: 0 get_px(20);
		&.sp_no_pd{
			padding: 0;
		}
		&.sp_10 {
			padding: 0 get_px(10);
		}
		&.sp_28 {
			padding: 0 get_px(28);
		}
		&.sp_50 {
			padding: 0 get_px(50);
		}
	}
}

img {
	width: 100%;
	height: auto;
	line-height: 1;
}

/*------------------------------------------------------------
ラッパー
------------------------------------------------------------*/
#wrapper {
	position: relative;
	//overflow: hidden;
	margin: 0 auto;

}

@media screen and (max-width: $break_sp) and (orientation: portrait) {
	#wrapper {
		width: 100%;
		overflow: hidden;
	}
}

/*------------------------------------------------------------
#pageTransition
------------------------------------------------------------*/

/*------------------------------------------------------------
#header
------------------------------------------------------------*/

#header{
	top: 0;
	position: fixed;
	z-index: 1000;
	color: #FAECDF;
	color: #fff;
	//mix-blend-mode: difference;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: get_txt(24) get_img(22);
	box-sizing: border-box;

	//全ページ？
	opacity: 0;
	transition:
	opacity 0.3s 0.0s ease,
	top 0.3s 0.0s ease,
	background 0.3s 0.0s ease,
	color 0.3s 0.0s ease,
	transform 0.6s 0.0s ease, //topのみ
	;
	
	.nav_area a {
		transition: color 0.3s 0.0s ease;
	}

	.nav-toggle span {
		transition: background 0.3s 0.0s ease;
	}


	&:not(.open) {
	&.is-scroll-show {
			background: #FAECDF;
			color: #3E3A39;
			
			.logo_area {
					.logo {
						.white {
							display: none;
						}
			
						.black {
							display: block;
						}
					}
			}
		
			.nav_area {
				a {
					color: #3E3A39;
				}
		
				>ul {
					>li {
						a {
							&::after {
								background-color: #3E3A39;
							}
						}
		
						ul {
							&:before {
								background: #3E3A39;
								opacity: 0.4;
							}
						}
					}
				}
			}
		
			.tel_area {
				a {
					color: #3E3A39;
		
					.txt {
						&:before {
							background: url(../img/icon_tel.png) left top no-repeat;
							background-size: get_txt(10) get_txt(12);
						}
					}
				}
			}
		
			.nav-toggle {
				.txt {
					color: #3E3A39;
				}
		
				.btn {
					span {
						background: #3E3A39;
					}
				}
			}		
		}

	}
	a{
		color: #fff;
	}
	.header_inner{
width: 100%;
	}
	
	.nav_wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		position: relative;
		z-index: 1000;
		.right_area{
			display: flex;
				align-items: center;
		}
	}
		.logo_area {
			display: flex;
			align-items: center;
	
			//padding-top: get_txt(10);
			.logo {
				width: get_txt(160);
	
				.black {
					display: none;
				}
			}
	
			.txt {
				font-size: get_txt(12.5);
				margin-left: get_txt(20);
				letter-spacing: 2%;
			}
		}
	
		.nav_area {
			margin-right: get_txt(47);
			@extend .web_font_jp2;
	
			>ul {
				display: flex;
				align-items: center;
				gap: get_txt(26);
				font-size: get_txt(11);
	
				>li {
					display: flex;
					align-items: center;
					letter-spacing: 4%;
					font-weight: 500;
	
					a {
						display: inline-block;
						position: relative;
						text-decoration: none;
	
						&::after {
							background-color: #fff;
							bottom: 0px;
							content: "";
							height: 1px;
							left: 0;
							position: absolute;
							transform: scale(0, 1);
							transform-origin: right top;
							transition: transform .3s;
							width: 100%;
						}
	
						&:hover {
							&::after {
								transform-origin: left top;
								transform: scale(1, 1);
							}
						}
					}
	
					ul {
						font-size: get_txt(10);
						display: flex;
						gap: get_txt(12);
						position: relative;
						padding-left: get_txt(20);
						margin-left: get_txt(19);
						padding-right: get_txt(10);
						font-weight: 400;
	
						&:before {
							display: block;
							content: '';
							width: 1px;
							height: 90%;
							background: #fff;
							position: absolute;
							top: 5%;
							left: 0;
							opacity: 0.4;
						}
					}
				}
			}
	
		}
	
		.tel_area {
			margin-right: get_txt(16);
	
			a {
				display: flex;
				align-items: center;
				@extend .web_font_en_mini2;
				font-size: get_txt(13);
	
				// .icon{
				// 	width: get_txt(10);
				// 	margin-right: get_txt(6);
				// 	margin-top: get_txt(3);
				// }
				.txt {
					display: block;
					position: relative;
					padding-left: get_txt(15);
	
					&:before {
						display: block;
						content: '';
						width: get_txt(10);
						height: get_txt(12);
						background: url(../img/icon_tel.png) left top no-repeat;
						background-size: get_txt(10) get_txt(12);
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate3d(0, -50%, 0);
	
					}
				}
			}
		}
	
		.mini_cv_btn_area {
			margin-right: get_txt(30);
	
			.btn_style2 {
				height: get_txt(34);
				width: get_txt(90);
				font-size: get_txt(14);
				@extend .w_b;
				box-sizing: border-box;
				border: 1px solid rgba(255,255,255,0.0);
			}
	
		}
	
		.nav-toggle {
			top: get_txt(0);
			cursor: pointer;
			//z-index: 1010;
			display: flex;
			align-items: center;
	
			.txt {
				padding-right: get_txt(10);
				@extend .web_font_en_mini1;
				font-size: get_txt(15);
				position: relative;
				.txt2{
					display: none;
				}
	
			}
	
			.btn {
				position: relative;
				height: 100%;
				width: 100%;
				width: get_txt(20);
				height: get_txt(15);
	
				span {
					display: block;
					position: absolute;
					height: 2px;
					width: 100%;
					background: #fff;
					left: 50%;
					top: 50%;
					transform: translate3d(-50%, -50%, 0);
					-webkit-transition: .2s ease-in-out;
					-moz-transition: .2s ease-in-out;
					transition: .2s ease-in-out;
	
					&:nth-child(1) {
						margin-top: -6px;
					}
	
					&:nth-child(2) {
						margin-top: 6px;
					}
				}
			}
		}

		.in_wrap{
			display: block;
			position: fixed;
			z-index: 900;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			box-sizing: border-box;

			transform: translateY(-100%);
			transition: transform 0.4s 0.0s ease;
			&:before {
					display: block;
					content: '';
					width: 100%;
					height: get_img(761);
					height: 100%;
					background: $color2;
					position: absolute;

					// position: fixed;
					// height: 100vh;
					// bottom: 0;

					top: 0;
					left: 0;
					z-index: 800;
					//transform: translateY(-100%);
					opacity: 0;
					transition:opacity 0.4s 0.0s ease ;
				}

			.in_wrap_in{
				padding: get_img(162) get_img(70) get_img(30) get_img(80);
				z-index: 900;
				position: relative;
				opacity: 0;
				box-sizing: border-box;
				max-height: 100vh;
				overflow-y: scroll;

				//閉じるとき
				transition: opacity 0.2s 0.0s ease;
				
				&:before{
					display: block;
					content: '';
					width: calc(100% - #{get_img(40)});
					height: 1px;
					background:#fff;
					position: absolute;
					top: get_img(88);
					left: get_img(20);
					opacity: 0.3;
					
				}
			}

			.wrap{
				display: flex;
				justify-content: space-between;
				//margin-bottom:get_img(-100) ;
				.left_area{
					.in_nav_area {
						@extend .web_font_jp2;
				
						>ul {
							>li {
								margin-bottom: get_txt(14);
								font-size: get_txt(14);
								letter-spacing: 4%;
								a {
									color: #fff;
									display: inline-block;
									position: relative;
									text-decoration: none;
				
									&::after {
										background-color: #fff;
										bottom: 0px;
										content: "";
										height: 1px;
										left: 0;
										position: absolute;
										transform: scale(0, 1);
										transform-origin: right top;
										transition: transform .3s;
										width: 100%;
									}
				
									&:hover {
										&::after {
											transform-origin: left top;
											transform: scale(1, 1);
										}
									}
								}
				
								ul {
									display: flex;
									gap: get_txt(20);
									margin: get_txt(6) 0 0;
									padding-bottom: get_txt(10);
				
									li {
										opacity: 0.6;
										font-size: get_txt(13);
									}
								}
							}
						}
					}
				}
				.right_area{
					.access_area {
							display: flex;
							margin-bottom: get_img(90);
					
							dl {
								width: get_img(260);
					
								dt {
									font-size: get_txt(10);
									margin-bottom: get_txt(20);
									@extend .web_font_en_mini2;
								}
					
								dd {
									.txt1 {
										font-size: get_txt(12);
										margin-bottom: get_txt(20);
										line-height: 1.4;
										@extend .web_font_jp2;
									}
					
									.txt2 {
										font-size: get_txt(10);
										line-height: 1.8;
										margin-bottom: get_txt(40);
										@extend .web_font_en_mini2;
									}
									.txt3 {
										font-size: get_txt(12);
										margin-bottom: get_txt(20);
										line-height: 1.6;
										@extend .web_font_jp2;
									}
								}
							}
						}
					.btn_area{
						display: flex;
						gap: get_txt(10);
					}

				}
			}
			.bottom_area{
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: get_img(-36);
				.copy{
					display: block;
					font-size: get_txt(11);
					@extend .web_font_en_mini2;

				}
				.mini_nav_area {
					@extend .web_font_jp2;

					ul {
						display: flex;
						gap: get_txt(24);
						font-size: get_txt(10);

						a {
							color: #FAECDF;
						}

						a {
							display: inline-block;
							position: relative;
							text-decoration: none;

							&::after {
								background-color: #fff;
								bottom: 0px;
								content: "";
								height: 1px;
								left: 0;
								position: absolute;
								transform: scale(0, 1);
								transform-origin: right top;
								transition: transform .3s;
								width: 100%;
							}

							&:hover {
								&::after {
									transform-origin: left top;
									transform: scale(1, 1);
								}
							}
						}
					}

				}
				.img_area {
					//margin-left: auto;
					width: get_img(180);
					position: relative;

					&:hover {
						.img {
							&:after {
								opacity: 0.4;
							}

							img {
								transform: scale(1.1);
							}
						}
					}

					button {
						display: block;
						position: absolute;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
						z-index: 10;
						background: none;
						border: none;
						cursor: pointer;
					}

					.img {
						line-height: 0;
						overflow: hidden;
						border-radius: get_txt(6);
						position: relative;

						&:before {
							display: block;
							content: '';
							width: 0;
							height: 0;
							border-style: solid;
							border-top: get_txt(6) solid transparent;
							border-bottom: get_txt(6) solid transparent;
							border-left: get_txt(13) solid #FFFFFF;
							border-right: 0;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							z-index: 5;
							position: absolute;
						}

						&:after {
							display: block;
							content: '';
							width: 100%;
							height: 100%;
							background: #000;
							position: absolute;
							top: 0;
							left: 0;
							opacity: 0;
							z-index: 4;
							transition: opacity 0.3s ease;
						}

						img {
							position: relative;
							z-index: 1;
							transition: transform 0.3s ease;
						}

					}

					.txt {
						margin-top: get_txt(5);
						font-size: get_txt(10);
						@extend .web_font_jp2;

						display: flex;
						justify-content: space-between;

						.jp {
							letter-spacing: 4%;
							color: #fff;
						}

						.en {
							@extend .web_font_en_mini2;
							color: #FAECDF;
						}
					}

				}
			}
		}

		&.open {
			
		
			.mini_cv_btn_area {
				.btn_style2 {
					border: 1px solid rgba(255, 255, 255, 1);
				}
			}
					
			.nav-toggle {
				.txt {
				.txt1 {
						display: none;
					}
					.txt2 {
						display: block;
					}
				}
				.btn {
					span {
						margin-left: get_txt(-10);
			
						&:nth-child(1) {
							margin-top: 0;
							-webkit-transform: rotate(30deg);
							-moz-transform: rotate(30deg);
							transform: rotate(30deg);
						}
						&:nth-child(2) {
							margin-top: 0;
							-webkit-transform: rotate(-30deg);
							-moz-transform: rotate(-30deg);
							transform: rotate(-30deg);
						}
						&:nth-child(3) {
							opacity: 0;
						}
					}
					}
				}
			
			.in_wrap {
				transform: translateY(0);
				&:before {
					opacity: 1;
				}
				.in_wrap_in {
					//開くとき
					transition: opacity 0.2s 0.5s ease;
					opacity: 1;
				}
			}

		}
}
@media screen and (max-width: $break_sp) and (orientation: portrait) {
	#header {
			color: #3E3A39;
			background: #FAECDF;
			width: 100%;
			padding: get_px(17) get_px(16) get_px(40);
	
			.logo_area {
				display: flex;
				align-items: center;

				.logo {
					width: get_px(138);

					.black {
						display: block;
					}

					.white {
						display: none;
					}
				}

				.txt {
					display: none;
				}
			}

			.nav_area {
				display: none;
			}

			.tel_area {
				display: none;
			}

			.mini_cv_btn_area {
				margin-right: get_px(13);

				.btn_style2 {
					height: get_px(28);
					width: get_px(74);
					font-size: get_px(12);
				}

			}

			.nav-toggle {
				top: get_px(0);

				.txt {
					display: none;
				}

				.btn {
					width: get_px(17);
					height: get_px(15);

					span {
						height: 1px;
						background: #3E3A39;
						&:nth-child(1) {
							margin-top: -6px;
						}

						&:nth-child(2) {
							margin-top: 6px;
						}
					}
				}
			}
			.in_wrap {
				//top: 0;
				bottom: 0;
				height: 100vh;
				box-sizing: border-box;
				
				.in_wrap_in {
					height: 100vh;
					//overflow-y: scroll;
					//box-sizing: border-box;
					color: #fff;

					padding: get_px(122) get_px(12) get_px(160) get_px(77);
					&:before {

						display: none;
					}
				}
				

				
				.wrap {
					display: block;
					justify-content: space-between;

					//margin-bottom:get_img(-100) ;
					.left_area {
						margin-bottom: get_px(40);
						.in_nav_area {
								width: 100%;
								>ul {
									
									>li {
										font-size: get_px(12);
										margin-bottom: get_px(0);
										border-bottom: 1px solid rgba(255,255,255,0.4);
										>a{
											padding: get_px(12) 0 get_px(4);
										}
						
										
						
										ul {
											display: flex;
											gap: get_px(16);
											margin: 0 0 0;
											padding-bottom: get_px(10);
						
											li {
												opacity: 0.6;
												font-size: get_px(11);
												
											}
										}
									}
								}
							}


							
					}

					.right_area {


						.access_area {
								display: block;
								padding: 0;
								margin-bottom: get_px(50);
						
								dl {
									width: 100%;
									margin-bottom: get_px(40);
						
									&:last-child {
										margin-bottom: 0;
									}
						
									dt {
										font-size: get_px(10);
										margin-bottom: get_px(16);
										opacity: 0.4;
									}
						
									dd {
										.txt1 {
											font-size: get_px(12);
											margin-bottom: get_px(16);
											//line-height: 1.4;
										}
						
										.txt2 {
											font-size: get_px(10);
											line-height: 1.8;
											//margin-bottom: get_px(32);
										}
						
										.txt3 {
											font-size: get_px(12);
											margin-bottom: get_px(16);
										}
									}
								}
							}

						.btn_area {
							display: none;
							//gap: get_txt(10);
						}

					}
				}

				.bottom_area {
					display: flex;
					flex-direction: column-reverse;
					justify-content: flex-start;
					align-items: flex-start;

					.copy {
						display: block;
						font-size: get_px(11);
						

					}

					.mini_nav_area {
						margin-bottom: get_px(60);
						ul {
							display: block;
							gap: 0;
							font-size: get_px(10);
							li{
								margin-bottom: get_px(10);
							}

							
						}

					}

					.img_area {
						width: get_px(239);
						margin-left: 0;
						margin-bottom: get_px(60);

						.img {
							border-radius: get_px(6);
							height: get_px(160);

							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}

							&:before {
								display: block;
								content: '';
								width: 0;
								height: 0;
								border-style: solid;
								// border-top: get_px(6) solid transparent;
								// border-bottom: get_px(6) solid transparent;
								// border-left: get_px(13) solid #FFFFFF;
								border-top: get_px(9) solid transparent;
								border-bottom: get_px(9) solid transparent;
								border-left: get_px(20) solid #FFFFFF;
								border-right: 0;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								z-index: 5;
								position: absolute;
							}
						}

						.txt {
							margin-top: get_px(4);
							font-size: get_px(10);
							//display: none;
						}

					}
				}
			}
	
			&.open {
				.logo_area {
						.logo {
							.black {
								display: none;
							}
				
							.white {
								display: block;
							}
						}
					}
				.nav-toggle {
						span {
							margin-left: get_px(-16);
							background: #fff;
				
							
						}
					}
	
			}
	
	
		}

}

/*------------------------------------------------------------
#big_cv_btn_area
------------------------------------------------------------*/
#big_cv_btn_area {
	position: fixed;
	bottom: 0;
	left: 50%;
	//display: flex;
	transform: translate(-50%, 0);
	z-index: 700;
	padding-bottom:get_img(24);
	transition: bottom 0.4s ease, opacity 0.3s ease;
	.big_cv_inner{
		display: flex;
		gap: get_txt(10);
		position: relative;
	}
	&.is-scroll-show {
		
			/* 必要なら背景やopacity変化 */
		}
	&.is-footer-hide {
		opacity: 0 !important;
		pointer-events: none !important;
	}
	.btn4{
		display: none;
	}


}
@media screen and (max-width: $break_sp) and (orientation: portrait) {
	#big_cv_btn_area{
		//display: none;
		padding-bottom: get_px(4);
		.big_cv_inner {
				gap: get_px(2);
			}
		.btn1{
			width: get_px(100);
		}
		.btn2 {
			width: get_px(118);
		}
		.btn3 {
			width: get_px(105);
		}
		.btn4 {
			display: block;
			width: get_px(40);
			margin-left: get_px(4);
			a{
				background: #E9BBA6;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.icon{
				line-height: 0;
				width:get_px(16);
			}
		}
	}
}

/*------------------------------------------------------------
#Moviefix_area
------------------------------------------------------------*/
#Moviefix_area {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
	position: fixed;
	z-index: 10000;
	bottom: get_img(24);
	right:get_img(20);
	width: get_txt(290);
	height: get_txt(202);
	background: #3E3A39;
	background: $color2;
	border-radius: get_txt(4);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	&.is-show {
		opacity: 1;
		pointer-events: auto;
	}
	.close{
		display: block;
		position: absolute;
		width: get_txt(15);
		top:get_txt(14);
		right: get_txt(7);
		z-index: 15;
		cursor: pointer;
		&::before,&::after {
				content: "";
					width: 100%;
					height: 1px;
					display: inline-block;
					background: #fff;
					position: absolute;
					top: 0;
					left: 0;
			}
		
			&::before {
				transform: rotate(45deg);
			}
		
			&::after{
				transform: rotate(-45deg);
			}
	}
	>button{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index:10;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}
	&:hover{
		.img_area {
			
			.img {
				&:after {
						opacity: 0.4;
					}
				img {
					transform: scale(1.1);
				}
			}
		}
	}
	.img_area{
		width: get_txt(236);
		height: get_txt(158);
		position: relative;
		.txt_big{
			font-size: get_txt(16);
			line-height: 1.4;
			position: absolute;
			top: get_txt(-10);
			left: get_txt(-10);
			@extend .web_font_en_mini2;
			@extend .web_font_jp2;
			z-index: 4;

			
		}
		.txt_mini {
			@extend .web_font_en_mini2;
			font-size: get_txt(11);
			line-height: 1;
			position: absolute;
			bottom: get_txt(4);
			right:get_txt(6);
			z-index: 4;
		}
		&:before {
				display: block;
				content: '';
				
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 5;
				position: absolute;

				width: 0;
				height: 0;
				border-style: solid;
				border-top: get_txt(9) solid transparent;
				border-bottom: get_txt(9) solid transparent;
				border-left: get_txt(20) solid #fff;
				border-right: 0;
				margin-left:get_txt(5);
			}
			
		.img{
			width: get_txt(236);
			height: get_txt(158);
			overflow: hidden;
			border-radius: get_txt(4);
			opacity: 0.7;
			&:after {
					display: block;
					content: '';
					width: 100%;
					height: 100%;
					background: #000;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					z-index: 3;
					transition: opacity 0.3s ease;
				}
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.3s ease;
				
			}
		}
	}
}
@media screen and (max-width: $break_sp) and (orientation: portrait) {
	#Moviefix_area {
			bottom: get_px(57);
			right: get_px(10);
			width: get_px(202);
			height: get_px(160);
			border-radius: get_px(4);
			
	
			.close {
				width: get_px(15);
				right: get_px(10);
				top: auto;
				bottom:get_px(14);
			}
	
			.img_area {
				width: get_px(185);
				height: auto;
				margin: 0 auto;
	
				.txt_big {
					font-size: get_px(11);
					top: get_px(-10);
					left: get_px(-10);

					position: relative;
					top: auto;
					left: auto;
					padding-top: get_px(7);
				}
	
				.txt_mini {
					font-size: get_px(10);
					bottom: get_px(50);
					right:auto;
					left: 50%;
					transform: translate(-50%,0);
				}
	
				&:before {
					border-top: get_px(8) solid transparent;
					border-bottom: get_px(8) solid transparent;
					border-left: get_px(18) solid #fff;
					border-right: 0;
					margin-left: get_px(5);
					margin-top: get_px(-10);
				}
	
				.img {
					width: get_px(185);
					height: get_px(125);
					border-radius: get_px(6);
	
				}
			}
		}

}

/*------------------------------------------------------------
#footer
------------------------------------------------------------*/
#footer {
	background: #D9CDBF;
	color: #FAECDF;
	padding: get_img(70) 0 get_img(20);
	position: relative;
	z-index: 10;
	
	//背景色
	&:before {
		display: block;
		content: '';
		width: 100%;
		height:100%;
		background: $color1;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 15;
		border-radius: get_txt(10) get_txt(10) 0 0;
	}
	.pagetop{
		background: #4C4242;
		border-radius: 0 get_txt(10) 0 get_txt(10);
		position: absolute;
		z-index: 20;
		top: 0;
		right: 0;
		font-size: get_txt(10);
		@extend .web_font_en_mini2;
		a{
			color: #fff;
			width: get_txt(100);
			height: get_txt(40);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.footer_inner{
		z-index: 20;
		position: relative;
	}
	#News_area{
		margin-bottom: get_txt(75);
		.wrap {
			padding-bottom: get_txt(44);
			position: relative;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				&:before {
						display: block;
						content: '';
						width: 100%;
						height: 1px;
						background: #fff;
						position: absolute;
						bottom: 0;
						left: 0;
						opacity: 0.2;
				}
			}
		
			.ttl_area {
				width: get_img(340);
				display: flex;
				flex-direction: column;
				justify-content: space-between;				
				.btn_area {
					display: flex;
					justify-content: flex-end;
				}
		
				
			}
		
			.content_area {
				ul {
					display: flex;
					//flex-wrap: wrap;
					gap: get_img(18);
		
					li {
						position: relative;
						width: get_img(320);		
						>a {
							display: block;
							position: absolute;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
							z-index: 10;
						}
						dl{
							display: flex;
							justify-content: space-between;
							dt{
								width: get_img(100);
								line-height: 0;
								border-radius: get_txt(4);
								overflow: hidden;
							}
							dd{
								width: get_img(210);
								@extend .web_font_jp2;
							}
						}
						.sub_area{
							display: flex;
							align-items: center;
							margin-bottom: get_txt(4);
							.day{
								font-size:get_txt(10);
								margin-right: get_txt(10);
								@extend .web_font_en_mini2;
							}
							.tag_area {
								display: flex;
								align-items: center;
								gap: get_txt(3);
								margin-bottom: get_txt(6);
							}
						}
		
						.txt {
							line-height: 1.4;
							font-size: get_txt(11);
						}
		
						
					}
				}
				
			}
			.swiper_btn_area_style {
				display: none;
			}

	}

	#Access_area{
		.wrap{
			display: flex;
			position: relative;
			padding-bottom: get_txt(75);
			&:before {
					display: block;
					content: '';
					width: 100%;
					height: 1px;
					background: #fff;
					position: absolute;
					bottom: 0;
					left: 0;
					opacity: 0.2;
				}
		}
		.img_area{
			width: get_img(437);
			margin-right: get_img(78);
			img{
				border-radius:get_txt(6);
			}
		}
		.content_area{
			display: flex;
			dl{
				width: get_img(260);
				dt{
					font-size: get_txt(10);
					margin-bottom: get_txt(40);
					@extend .web_font_en_mini2;
				}
				dd{
					.txt1{
						font-size: get_txt(12);
						margin-bottom: get_txt(20);
						line-height: 1.4;
						@extend .web_font_jp2;
					}
					.txt2{
						font-size: get_txt(10);
						line-height: 1.8;
						margin-bottom: get_txt(40);
						@extend .web_font_en_mini2;
					}
					.txt3 {
						font-size: get_txt(12);
						margin-bottom: get_txt(20);
						line-height: 1.6;
						@extend .web_font_jp2;
					}
				}
			}
		}

	}

	.bottom_top_area{
		padding-top: get_txt(20);
		margin-bottom: get_img(80);
		
		.wrap{
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		}
		#Reservation_area{
			margin-top: get_txt(-17);
			width: 50%;
			.ttl_area{
				margin-bottom: get_txt(30);
				.ttl_style{				
					display: flex;
					justify-content: flex-end;
					color: $color2;
					.big{
						font-size:get_txt(110);
					}
				}

			}
			.btn_area{
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-end;
				//justify-content: flex-end;
				margin-bottom: get_txt(80);
				gap: get_img(30);
				.btn_style{
					margin-bottom:get_txt(-16);
					a{
					//font-size: get_txt(19);
					}
					&.white2{
						opacity: 0.6;
					}
				}

			}
			.img_area{
				margin-left: auto;
				width:get_img(180) ;
				position: relative;
				&:hover{
					.img {
						&:after {
							opacity: 0.4;
						}
						img {
							transform: scale(1.1);
						}
					}
				}
				button{
					display: block;
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					z-index:10;
					background: none;
					border: none;
					cursor: pointer;
				}
				.img{
					line-height: 0;
					overflow: hidden;
					border-radius:get_txt(6);
					position: relative;
					&:before{
						display: block;
						content: '';
						width: 0;
						height: 0;
						border-style: solid;
						border-top: get_txt(6) solid transparent;
						border-bottom: get_txt(6) solid transparent;
						border-left: get_txt(13) solid #FFFFFF;
						border-right: 0;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						z-index: 5;
						position: absolute;
					}
					&:after {
						display: block;
						content: '';
						width: 100%;
						height: 100%;
						background: #000;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
						z-index: 4;
						transition: opacity 0.3s ease;
					}
					img{
						position: relative;
						z-index: 1;
						transition: transform 0.3s ease;
					}

				}
				.txt{
					margin-top: get_txt(5);
					font-size: get_txt(10);
					@extend .web_font_jp2;
					
					display: flex;
					justify-content: space-between;
					.jp{
						letter-spacing: 4%;
						color: #fff;
					}
					.en{
						@extend .web_font_en_mini2;
						color: #FAECDF;
					}
				}

			}

		}
		.nav_area{
			width: 50%;
			@extend .web_font_jp2;
			margin-top: get_img(20);
			>ul{
				>li{
					margin-bottom: get_txt(14);
					a{
						color: #fff;
					}
					a {
						display: inline-block;
						position: relative;
						text-decoration: none;

						&::after {
							background-color: #fff;
							bottom: 0px;
							content: "";
							height: 1px;
							left: 0;
							position: absolute;
							transform: scale(0, 1);
							transform-origin: right top;
							transition: transform .3s;
							width: 100%;
						}

						&:hover {
							&::after {
								transform-origin: left top;
								transform: scale(1, 1);
							}
						}
					}
					ul{
						display: flex;
						gap: get_txt(20);
						margin: get_txt(6) 0 0;
						padding-bottom: get_txt(10);
						li{
							opacity: 0.6;
						}
					}
				}
			}
		}


	}
	.bottom_bottom_area{
		.wrap {
				display: flex;
				justify-content: space-between;
			}
		.nav_area{
			@extend .web_font_jp2;
			ul{
				display: flex;
				gap: get_txt(24);
				font-size: get_txt(10);
				a {
						color: #FAECDF;
					}
				a {
					display: inline-block;
					position: relative;
					text-decoration: none;

					&::after {
						background-color: #fff;
						bottom: 0px;
						content: "";
						height: 1px;
						left: 0;
						position: absolute;
						transform: scale(0, 1);
						transform-origin: right top;
						transition: transform .3s;
						width: 100%;
					}

					&:hover {
						&::after {
							transform-origin: left top;
							transform: scale(1, 1);
						}
					}
				}
			}

		}
		.logo{
			width: get_img(140);
		}
		.right_area{
			display: flex;
			.sns_area{
				display: flex;
				gap: get_txt(6);
				li{
					width: get_txt(26);
				}
			}
			small{
				display: block;
				margin-left:get_img(60);
				font-size: get_txt(11);
				@extend .web_font_en_mini2;
			}
		}

	}
	
}

@media screen and (max-width: $break_sp) and (orientation: portrait) {
	#footer {
			padding: get_px(52) 0 get_px(84);

			.pagetop {
					border-radius: 0 get_px(10) 0 get_px(10);
					
					font-size: get_px(10);
			
					a {
						width: get_px(77);
						height: get_px(31);
					}
				}
	
			#News_area {
				margin-bottom: get_px(24);
	
				.wrap {
					padding-bottom: get_px(10);
					display: block;

					//flex-direction: column-reverse;
					// justify-content: flex-start;
					// align-items: flex-start;
					
				}
	
				.ttl_area {
					width:100%;
					//display: flex;
					//flex-direction: column;
					justify-content:center;
					position: relative;
	
					.btn_area {
						display: flex;
						justify-content: flex-end;
					}
				}
	
				.content_area {
					margin-bottom: get_px(28);
					ul {
						display: flex;
						//gap: get_px(25);
						gap: 0;
	
						li {
							position: relative;
							//width: get_px(268);
							width: get_px(293);
							

							&:before {
									display: block;
									content: '';
									width: 1px;
									height: 100%;
									background: #fff;
									position: absolute;
									top: 0;
									right: get_px(15);
									opacity: 0.2;
								}
							
								&:last-child {
									&:before {
										display: none;
									}
								}
							dl {
								width: get_px(293);
								padding-right: get_px(25);
								box-sizing: border-box;
								//display: flex;
								//justify-content: space-between;
	
								dt {
									width: get_px(100);
									//line-height: 0;
									border-radius: get_px(4);
									//overflow: hidden;
								}
	
								dd {
									width: get_px(160);
								}
							}
	
							.sub_area {
								//display: flex;
								//align-items: center;
	
								.day {
									font-size: get_px(10);
									margin-right: get_px(10);
								}
	
								.tag_area {
									//display: flex;
									//align-items: center;
									gap: get_px(3);
									margin-bottom: get_px(6);
								}
							}
	
							.txt {
								//line-height: 1.4;
								font-size: get_px(10);
							}
	
	
						}
					}
					
				}
				.swiper_btn_area_style {
					display: flex;
					position: absolute;
						bottom: 0;
						left: 0;
				}

				// .swiper_btn_area_style {
				// 	position: absolute;
				// 	bottom: 0;
				// 	left: 0;
				// 	height: get_px(20);
				// 	display: flex;
				// 	align-items: center;
				// 	gap: get_px(10);
				// 	.swiper-button-prev,
				// 	.swiper-button-next {
				// 		width: get_px(16);
				// 		display: flex;
				// 		justify-content: center;
				// 		svg {
				// 			display: none;
				// 		}
				// 	}
				// 	.swiper-button-prev {
				// 		.arrow {
				// 			transform: scale(-1, 1);
				// 		}
				// 	}
				// 	.arrow {
				// 		position: relative;
				// 		display: inline-block;
				// 		width: get_px(10.1);
				// 		height: get_px(10.8);
				// 		overflow: hidden;

				// 		&::before,
				// 		&::after {
				// 			content: "";
				// 			position: absolute;
				// 			top: calc(50% - 0.5px);
				// 			right: 0;
				// 			width: get_px(11);
				// 			height: 1px;
				// 			border-radius: 9999px;
				// 			background-color: #FAECDF;
				// 			transform-origin: calc(100% - 0.5px) 50%;
				// 		}

				// 		&::before {
				// 			transform: rotate(28.5deg);
				// 		}

				// 		&::after {
				// 			transform: rotate(-28.5deg);
				// 		}


				// 	}
				// }
	
			}
	
			#Access_area {
				//margin-bottom: get_img(80);
				.wrap {
					display: block;
					//position: relative;
					padding-bottom: get_px(60);
	
					// &:before {
					// 	display: block;
					// 	content: '';
					// 	width: 100%;
					// 	height: 1px;
					// 	background: #fff;
					// 	position: absolute;
					// 	bottom: 0;
					// 	left: 0;
					// 	opacity: 0.2;
					// }
				}
	
				.img_area {
					width:100%;
					margin-right: 0;
					margin-bottom: get_px(24);
					img {
						border-radius: get_px(6);
					}
				}
	
				.content_area {
					display: block;
					padding: 0 get_px(10);
	
					dl {
						width:100%;
						margin-bottom: get_px(40);
						&:last-child{
							margin-bottom: 0;
						}
						dt {
							font-size: get_px(10);
							margin-bottom: get_px(16);
						}
	
						dd {
							.txt1 {
								font-size: get_px(12);
								margin-bottom: get_px(16);
								line-height: 1.4;
							}
	
							.txt2 {
								font-size: get_px(10);
								line-height: 1.8;
								margin-bottom: get_px(32);
							}
						}
					}
				}
	
			}
	
			.bottom_top_area {
				padding-top: get_px(10);
				margin-bottom: get_px(70);
	
				.wrap {
					display: block;
					//justify-content:flex-start;
					//flex-direction: row-reverse;
				}
	
				#Reservation_area {
					width: 100%;
					margin-bottom: get_px(60);
	
					.ttl_area {
						margin-bottom: get_px(30);
	
						.ttl_style {
							display: flex;
							justify-content: flex-end;
						}
	
					}
	
					.btn_area {
						//display: flex;
						//justify-content: flex-end;
						margin-bottom: get_px(40);
						gap: get_px(20);
	
						.btn_style {
							a {
								font-size: get_px(15);
							}
	
							&.white2 {
								opacity: 0.6;
							}
						}
	
					}
	
					.img_area {
						width: get_px(164);
						.img {
							border-radius: get_px(6);
							height: get_px(84);
							img{
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
	
							&:before {
								display: block;
								content: '';
								width: 0;
								height: 0;
								border-style: solid;
								border-top: get_px(6) solid transparent;
								border-bottom: get_px(6) solid transparent;
								border-left: get_px(13) solid #FFFFFF;
								border-right: 0;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								z-index: 5;
								position: absolute;
							}
						}
	
						.txt {
							margin-top: get_px(10);
							font-size: get_px(10);
							display: none;
						}
	
					}
	
				}
	
				.nav_area {
					width: 100%;
	
					>ul {
						>li {
							margin-bottom: get_px(10);
	
							a {
								//color: #FAECDF;
							}
	
							ul {
								display: flex;
								gap: get_px(16);
								margin: get_px(6) 0 0;
								padding-bottom: get_px(10);
								font-size: get_px(11);
	
								li {
									opacity: 0.6;
								}
							}
						}
					}
				}
	
	
			}
	
			.bottom_bottom_area {
				.wrap {
					align-items: flex-end;
				}
	
				.nav_area {
					ul {
						display: block;
						gap: get_px(0);
						font-size: get_px(10);
						li{
							margin-bottom: get_px(6);
							&:last-child{
								margin-bottom: 0;
							}
						}

					}
	
				}
	
				.logo {
					//width: get_px(140);
					display: none;
				}
	
				.right_area {
					display: block;
	
					.sns_area {
						//display: flex;
						justify-content: flex-end;
						gap: get_px(6);
						margin-bottom: get_px(20);
						li {
							width: get_px(26);
						}
					}
	
					small {
						display: block;
						margin-left: 0;
						font-size: get_px(11);
					}
				}
	
			}
	
		}
}