@charset "UTF-8";
/***

メニューボタン

***/
/* ハンバーガーメニューボタン */
.hamburger-menu {
	position: absolute;
	top: 20px;
	right: 28px;
	width: 29px;
	height: 28px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	/* gap: 4px; */
	z-index: 99999;
}

.hamburger-line {
	width: 100%;
	height: 3px;
	/* background-color: #333;
	border-radius: 2px; */
	transition: all 0.3s ease-in-out;

	/* 基準となる色を白に設定（背景が白なら黒になり、黒なら白になる） */
	background-color: rgba(255, 255, 255, 0.8);
	background-color: white;
}
.hamburger-menu.gray1 .hamburger-line {
	background-color: #bfbfbf;
}
/* アクティブ状態（Xアニメーション） */
.hamburger-menu.active .hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(0, 0);
	transform: translateY(10px) rotate(45deg);
}
.hamburger-menu.active .hamburger-line:nth-child(2) {
	opacity: 0;
}
.hamburger-menu.active .hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(0, 0);
	transform: translateY(-15px) rotate(-45deg);
	
}




/* フェードスライドメニュー */
.slide-menu.fade-menu {
	position: fixed;
	top: 100%;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 0;
	background: rgba(0, 0, 0, 1);
/*	background: rgba(237,50,195,1.00);*/
/*	transition: all 0.4s ease-in-out;*/
	transition-property: all;
	transition-duration: 0.8s;
	/* 🌟イージングを指定 */
	transition-timing-function: cubic-bezier(0.19, 1, 0.5, 1); /* easeOutExpo */
/*  	transition-timing-function: ease-out;*/
	
	
	z-index: 9999;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	opacity: 1;
	overflow-y: hidden;
	overflow-x: auto;
	overflow: hidden;
}
@media screen and (min-width: 801px) {
.slide-menu.fade-menu {
	width: 482px;
/*	background: rgba(98,164,225,1.00);*/
	
	/*ヘッダーセンター*//*
	left: 50%;
	transform: translateX(-50%);
	
	/*ヘッダー右揃え*/
	left: calc( 100% - 482px );
}
}
/* 閉じているとき → クリックを透過させる */
.slide-menu.fade-menu {
  pointer-events: none; /* ← 追加 */
}




.slide-menu.fade-menu.active {
	height: 100vh;
	top: 0;
	opacity: 1;
}
/* 開いているとき → クリックを受け付ける */
.slide-menu.fade-menu.active {
  height: 100vh;
  top: 0;
  opacity: 1;
  pointer-events: auto; /* ← 追加 */
}



.hd_underline{
	clear: both;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: none;
	border-bottom: 1px solid #717171;

	position: fixed;
	top: 67px;

	opacity: 0;
	transition: all 0.4s ease-in-out;
	z-index: 999999;
}
.hd_underline.gray1{
	border-bottom: 1px solid #000;
	opacity: 1;
}
.hd_underline.active {
	border-bottom: 1px solid #717171;
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0;	
}

@media screen and (min-width: 801px) {
.hd_underline{
	width: 482px;

	/*ヘッダーセンター*//*
	left: 50%;
	transform: translateX(-50%);
	
	/*ヘッダー右揃え*/
	left: calc( 100% - 482px );
}
}




/* メニュー内レイアウト */
.menu_box1{
	clear:both;
	width:92%;
	max-width: 480px;
	height:100%;
	margin:0 auto;
	padding: 0;
	position:relative;
	z-index: 10030;
	
	/* background: #ead725; */
}
@media screen and (max-width: 800px) {
.menu_box1{
	width:100%;
	max-width: 800px;
}
}



.vh1 {
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	margin-bottom: 15.5vh;
}




.menu-list {
	list-style: none;

	clear: both;
	width: 75%;
	width: 78%;
	width: 100%;
	height: 100%;
	height: calc( 100% -75px);
/*
	margin: 75px 22% 0 0;
	margin: 75px 0 0 0;
*/
	margin: 0;
	padding: 0;
}
.menu-list {
	position:relative;
	line-height:1;
/*	opacity:0;*/
/*
	--e:cubic-bezier(0,.55,.45,1) .65s;
	translate:0 20px;

	transition:opacity ease-out .2s,translate var(--e);
*/
	
/*	background: rgba(187,157,230,1.00);*/
}


.menu-list li {
	opacity: 0;
	transform: translatey(15px);
	transition: all 0.6s ease-in-out;

	width: 78%;
	width: 75%;
	padding: 0;
	margin: 0;
	margin-bottom: 3.2vh;
/*	background: rgba(210,80,82,1.00);*/
}
.menu-list li.vh2 {
	margin-bottom: 6.5vh;
}
.menu-list.ft_opacity1 li {
	opacity: 1;
	translate:none;
	transition:none;
	
}
/*
.menu-list li.m01 {
	margin: 0 22% 0 0;
}
*/



.menu-list li.menu-list_li_last {
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	margin-bottom: 0;
/*	background: #f00;*/
}



.slide-menu.fade-menu.active .menu-list li {
	opacity: 1;
	transform: translateX(0);
}

.slide-menu.fade-menu.active .menu-list li:nth-child(1) { transition-delay: 0.04s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(2) { transition-delay: 0.08s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(3) { transition-delay: 0.12s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(4) { transition-delay: 0.16s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(5) { transition-delay: 0.20s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(6) { transition-delay: 0.24s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(7) { transition-delay: 0.28s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(8) { transition-delay: 0.32s; }
.slide-menu.fade-menu.active .menu-list li:nth-child(9) { transition-delay: 0.36s; }



.menu-list a {
/*	transition: background-color 0.3s ease;*/

	clear: both;
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: end;
	align-items: center;

	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#fff;
	font-weight: 600;
	letter-spacing: 0;

	font-size: 21px;
	/* font-size: 5.25vw;
	font-size: 4.2vw; */
	line-height:100.5%;
	
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.06em;
	text-align: right;
}
@media screen and (max-width: 800px) {
.menu-list a {
	font-size: 2em;
}
}
@media screen and (max-width: 600px) {
.menu-list a {
	font-size: 4.2vw;
}
}


/* メニューボタン（テキスト） */
/* 通常時の状態 */
.menu-list a{
	--delay:0s;
	--y:22%;
	position: relative;        /* ← 追加 */
	height: 1.5em;             /* ← 追加：フォントサイズに合わせて調整 */
}
.menu-list a:before{
	display:block;
	position:absolute;
	height:-moz-fit-content;
	height:fit-content;
	margin:auto;
	inset:0;translate:0 var(--y);
	content:attr(data-txt);
	color:var(--color-02);
	color: #d0a378;
	clip-path:inset(-10% 0 130% 0);
	opacity:.3;
	margin: auto;
	margin-right: 4rem;        /* ← 右だけ上書き */
	margin-right: 5.5rem;        /* ← 右だけ上書き */
	text-align: right;
}
.menu-list .menu_txt1{
	position: absolute;
	height: fit-content;
	inset: 0;
	line-height:1;
	clip-path:inset(-10% 0 -10% 0);
	margin: auto;
	margin-right: 4rem;        /* ← 右だけ上書き */
	margin-right: 5.5rem;        /* ← 右だけ上書き */
	text-align: right;
}
.menu-list a .menu_txt1,
.menu-list a:before{
	transition:translate .9s cubic-bezier(.16,1,.3,1),clip-path .6s cubic-bezier(0,.55,.45,1),opacity .3s ease-in;
}


@media (any-hover:hover){
.menu-list a:hover .menu_txt1{
	translate:0 calc(var(--y)*-1);
	translate:0 calc(var(--y)*0);
	clip-path:inset(130% 0 -10% 0);
	opacity:.3;
	transition-delay:0s;
}
.menu-list a:hover:before{
	translate:0 0;
	clip-path:inset(-10% 0 -10% 0);
	opacity:1;
	transition-delay:var(--delay);
}
}






.menu_box2{
	clear:both;
	width:82%;
	width:88%;
	height:100%;
	margin:0 auto;
	padding: 0;
	position:relative;

	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	
	/* background: #e780cf; */
}
.menu_box2.m01{
	justify-content: center;

}
.menu_box2.ft_w1{
	width:82%;
}
@media screen and (max-width: 800px) {
.menu_box2 {
	width:74%;
/*	max-width: 440px;*/
}
}
@media screen and (max-width: 600px) {
.menu_box2 {
	width:88%;
}
.menu_box2.ft_w1{
	width:92%;
	width:90%;
}
}



.menu_box2_btn1{
	transition: background-color 0.3s ease;

	clear: both;
	width: 48%;
	height: 24px;
	display: flex;
	flex-wrap: nowrap;
	justify-content:flex-start;
	align-items: center;

/*	 background: #7cd167; */
}
.menu_box2_btn1.m01{
	justify-content:flex-end;

	/* background: #d5a664; */
}
.menu_box2_btn1.m02{
	justify-content:center;
/*	background:rgba(161,132,169,1.00);*/
}
@media screen and (min-width: 801px) {
.menu_box2_btn1{
	width: 45%;
}
.menu_box2_btn1.m01,
.menu_box2_btn1.m02{
	width: 54%;
}
}
@media screen and (max-width: 800px) {
.menu_box2_btn1{
	width: 45%;
}
.menu_box2_btn1.m01,
.menu_box2_btn1.m02{
	width: 54%;
}
}
@media screen and (max-width: 600px) {
.menu_box2_btn1{
	width: 40%;
}
.menu_box2_btn1.m01,
.menu_box2_btn1.m02{
	width: 58%;
}
}

.menu_box2_btn1 a{
	clear: both;
	width: auto;
	height: 24px;
	display: flex;
	flex-wrap: nowrap;
	justify-content:flex-start;
	align-items: center;
	
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-family: "din-2014";
	
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-feature-settings: "palt";
	line-height: 1;
}
.menu_box2_btn1.m01 a{
	justify-content:flex-end;

}


.menu_box2_btn1 a .menu_txt2 {
	position: relative;
	margin: auto;
	clip-path: inset(-10% 0 -10% 0);
	
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-feature-settings: "palt";
	line-height: 1;
}


/* メニューボタン2（テキスト） */
/* 通常時の状態 */
.menu_box2_btn1 a {
	position: relative;
	--delay: 0s;
	--y: 22%;
}

.menu_box2_btn1 a:before {
	display: block;
	position: absolute;
	height: fit-content;
	height: -moz-fit-content;
	margin: 0;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(calc(-50% + var(--y-px, 5px)));
	translate: none;
	content: attr(data-txt);
	
	clip-path: inset(-10% 0 130% 0);
	opacity: .3;

	color: #d0a378;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-feature-settings: "palt";
	line-height: 1;
}



@media screen and (max-width: 600px) {
.menu_box2_btn1 a .menu_txt2 {
	font-size: 13px;
	font-size: clamp(13px, 4vw, 15px);
}
}
.menu-list li .menu_txt2 {
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-feature-settings: "palt";
	line-height: 1;
}
.menu-list.ft_opacity1 li .menu_txt2 {
	color: #000;
	
	
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-feature-settings: "palt";
	line-height: 1;
	
}


.menu_box2_btn1 a .menu_txt2,
.menu_box2_btn1 a:before {
	transition: translate .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), clip-path .6s cubic-bezier(0,.55,.45,1), opacity .3s ease-in;
}

/* メールアイコンがある場合、::before をアイコン幅分だけ右にずらす */
.menu_box2_btn1 a:has(.menu_mail1):before {
	left: calc( 32px + 0.8em );
}

@media (any-hover: hover) {
.menu_box2_btn1 a:hover .menu_txt2 {
	translate: 0 calc(var(--y) * -1);
	clip-path: inset(130% 0 -10% 0);
	opacity: .3;
	transition-delay: 0s;
}
.menu_box2_btn1 a:hover:before {
	transform: translateY(-50%);
	clip-path: inset(-10% 0 -10% 0);
	opacity: 1;
	transition-delay: var(--delay);
}
/*
.menu_box2_btn1 a:hover:before .menu_txt2 span {
	font-size: 15px;
	font-size: 3em;
}
*/
}








/* メニューメールアイコン */
.menu_mail1{
	clear: both;
	width: auto;
	height: 24px;
	margin: 0 0.8em 0 0;
	padding: 0;
	position: relative;
}
.menu_mail1 img{
	width: auto;
	height: 100%;
}

/* メニューボタン（矢印） */
.menu_arrow_btn1{
	clear: both;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	position: relative;

	background: #fff;

	/* display: flex;
	flex-direction: column;
	align-items: center; */
	/* justify-content: center; */
}
.menu_arrow_box1{
  clear: both;
  width: 15px;
  height: 2px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: visible;
}
.menu_arrow1 {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 2px;
  margin: 4.3px 0;
  border-radius: 9999px;
  background-color: #222222;
}

.menu_arrow1::before,
.menu_arrow1::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 8px;
  height: 2px;
  border-radius: 9999px;
  background-color: #222222;
  transform-origin: calc(100% - 1px) 50%;
}

.menu_arrow1::before {
  transform: rotate(45deg);
}

.menu_arrow1::after {
  transform: rotate(-45deg);
}





/***

メニュー内
ムービー

***/
.slide-menu.fade-menu .menu_mov_bg1{
	clear: both;
	width: 100%;
	height: 100%;
	height: 100dvh; /* 動的VH：アドレスバーを考慮した正確な値 */
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10010;
	background: rgba(0,232,219,1.00);
	background: #000;
}
.slide-menu.fade-menu .menu_mov_bg2{
	clear: both;
	width: 100%;
	height: 100%;
	height: 100dvh; /* 動的VH：アドレスバーを考慮した正確な値 */
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10020;
	background: rgba(0,0,0,0.75);
}

/*ムービー*/
.slide-menu.fade-menu .menu_mov1{
	clear: both;
	width: 100%;
	height: 100%;
	height: 100dvh; /* 動的VH：アドレスバーを考慮した正確な値 */
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10010;
	background: rgba(0,232,219,1.00);
	background: #000;
}
/*ムービー枠*/
.bg-video-wrap {
	position: relative;
	width: 100%;
	height: 100vh; /* 必要に応じて調整 */
	height: 100dvh; /* 動的VH：アドレスバーを考慮した正確な値 */
	overflow: hidden;
}
.bg-video {
	position: absolute;
	/*
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	*/
/*
	min-width: 100%;
	min-height: 100%;
*/
	width: auto;
	height: auto;
	max-width: 1150px;
	max-width: 1170px;
	object-fit: cover;
	top: 0;
	left: -150px;
	left: -133px;
}



/*ムービー文字*/
.slide-menu.fade-menu .menu_txt_bg1{
	clear: both;
	width: 104.167%;
	height: auto;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
}
.slide-menu.fade-menu.active .menu_txt_bg1{
	opacity: 1;
	transition: all 1s ease-in-out;
}

.menu_txt1,
.menu_txt2{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
	tab: 0;
	left: 0;
	
}


.menu_txt1_1,
.menu_txt1_2,
.menu_txt1_3,
.menu_txt1_4,
.menu_txt1_5,
.menu_txt2_1,
.menu_txt2_2,
.menu_txt2_3,
.menu_txt2_4{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	
}