@charset "UTF-8";
/* CSS Document */
html {
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
}
html.wf-active,
html.loading-delay {
	visibility: visible;
	opacity: 1;
}
* {
    word-break: break-all;
}

body {
font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  font-style: normal;
	font-size: 14px;
	color: #fff;
	line-height: 1.6;
	letter-spacing: 0.02em;
	background: rgb(0, 0, 0);
	background: linear-gradient(90deg, rgba(0 0 08 / 1) 0%, rgba(93 89 88 / 1) 90%) !important;
}
#wrapper {
	overflow: hidden;
}
a {
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
a img {
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
a:hover {
	color: #700000;
}
.inner {
	max-width: 1480px;
	margin-right: auto;
	margin-left: auto;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}
/* font */
.sm_r {
	font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
}
.sm_m {
	font-family: "Shippori Mincho B1", serif;
  font-weight: 500;
}
.sm_b {
	font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
}
.ns_r {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
}
.ns_m {
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
.ns_b {
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

/* color */
.bordeaux {
	color: #700000;
}

/* fade */
.fadeUpTrigger {
	opacity: 0;
}
/* fadeup */
.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUpAnime {
  from {
	opacity: 0;
	transform: translateY(160px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}

/* header */
header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	width: 100%;
	background-color: #fff;
}
header .h_inner .h_top {
	height: 80px;
	.item {
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40px;
		.h_logo {
			width: 80px;
			a {
				display: block;
				&:hover {
					opacity: .7;
				}
			}
		}
		h1.h1_img {
			width: 435px;
			a {
				display: block;
				&:hover {
					opacity: .7;
				}
			}
		}
		.h_sns {
			width: 120px;
			ul {
				display: flex;
				justify-content: space-between;
				li {
					width: calc(33.3% - 8px);
					a {
						display: block;
						&:hover img {
							opacity: .7;
							transform: scale(1.1);
						}
					}
				}
			}
		}
	}
}
.header.is-animation {
	background-position: top center;
	transition: 1s;
}
header.is-animation .h_inner .h_top {
	height: 0;
	transition: .6s;
	padding: 0;
	.item {
		opacity: 0;
	}
}
header .h_inner .h_bottom {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #000;
	padding: 10px 0 0;
}
header .h_inner .h_bottom .global-nav .global-nav_list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 930px;
	margin: 0 auto;
	li {
		width: 110px;
		a {
			font-weight: 700;
			font-size: 17px;
			display: block;
			text-transform: uppercase;
			position: relative;
			overflow: hidden;
			text-align: center;
			padding-bottom: 18px;
			span {
				display: none;
			}
			&::after {
				position: absolute;
				top: 18px;
				left: 50%;
				transform: translateX(-50%);
				width: 100%;
				transition: .6s;
				opacity: 0;
				color: #000;
				font-size: 12px;
			}
		}
		&:hover a::after {
			top: 22px;
			opacity: 1;
			color: #fff;
		}
		&.nav01 a::after {
			content: "FDLについて";
		}
		&.nav02 a::after {
			content: "新着情報";
		}
		&.nav03 a::after {
			content: "公演";
		}
		&.nav04 a::after {
			content: "レッスン";
		}
		&.nav05 a::after {
			content: "コラム";
		}
		&.nav06 a::after {
			content: "セミナー";
		}
		&.nav07 a::after {
			content: "メンバー";
		}
		&.nav08 a::after {
			content: "お問い合わせ";
		}
	}
}

/* fixBtn */
.fixBtn {
  position: fixed;
  z-index: 600;
  right: 0;
  top: 80px;
  transition: all 0.3s;
}

/* 共通ボタン設定 */
.fixBtn li {
  position: absolute;
  right: -10px;
  width: 100px;
  height: 80px;
  transition: all 0.3s;
}

.fixBtn li a {
  height: 100%;
  font-size: 12px;
  padding-top: 42px;
  font-weight: 700;
  display: block;
  text-transform: uppercase;
  text-align: center;
  color: #000;
  background-color: #fff;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  position: relative;
}

.fixBtn li a::before {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
}

/* 1段目共通スタイル */
.fixBtn li:nth-of-type(1) {
  top: 80px;
}
.fixBtn li:nth-of-type(1) a {
  height: 100%;
  font-size: 12px;
  padding-top: 42px;
  font-weight: 700;
  display: block;
  text-transform: uppercase;
  text-align: center;
  color: #000;
  background-color: #fff;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  position: relative;
}

/* --- 未ログイン時：Log in (ログインアイコン) --- */
.fixBtn li.isGuest a::before {
  content: url("../img/common/fix_icon01.svg"); /* ← 鍵アイコン */
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
}

/* --- ログイン時：My Page (ペンアイコン) --- */
.fixBtn li.isLogin a::before {
  content: url("../img/common/fix_icon02.svg");
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
}

/* Ticket */
.fixBtn li:nth-of-type(2) {
  top: 165px;
}
.fixBtn li:nth-of-type(2) a::before {
  /* content: url("../img/common/fix_icon01.svg"); */
  content: url("../img/common/fix_icon04.svg");
}

/* Log Out */
.fixBtn li:nth-of-type(3) {
  top: 250px; /* ← ここで確実に見える */
}
.fixBtn li:nth-of-type(3) a::before {
  content: url("../img/common/fix_icon03.svg");
}

/* hover時 */
.fixBtn li:hover {
  right: 0;
}
/* ログアウトボタン */
.fixBtn li:nth-of-type(3) {
  top: 250px;
}

.logoutBtn {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-top: 42px;
  padding-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background-color: #000;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  position: relative;
  cursor: pointer;
  font-family: "Shippori Mincho B1", serif;
}

/* アイコン配置 */
.fixBtn li:nth-of-type(3) .logoutBtn::before {
  content: url("../img/common/fix_icon03.svg");
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
}

/* hover動作統一 */
.fixBtn li:nth-of-type(3):hover {
  right: 0;
}

/* bosyufixBtn */
.bosyufixBtn {
	position: absolute;
    position: fixed;
	/* bottom: 10vh; */
	bottom: 4vh;
	right: 10vw;
	z-index: 400;
	width: 10rem;
	height: 10rem;
}

.bosyufixBtn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/common/bosyufixTxt.svg");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	animation: rotateBg 10s linear infinite;
	z-index: -1; /* 背景として背面に */
}

/* 回転アニメーション */
@keyframes rotateBg {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.bosyufixBtn a img {
	transform: scale(0.8, 0.8);
	position: relative;
	z-index: 1;
}

.bosyufixBtn a:hover {
	opacity: .7;
}


/* footer */
footer {
	position: relative;
	background-color: #000;
	padding-bottom: 40px;
	.copy {
		color: #fff;
		padding-top: 50px;
		font-weight: 400;
		font-size: 12px;
		text-transform: uppercase;
		text-align: center;
	}
}
footer .f_inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 60px 40px 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.f_left {
		width: 50%;
		.f_logo {
			width: 260px;
			a {
				display: block;
				&:hover {
					opacity: .7;
				}
			}
		}
		.f_sns {
			max-width: 260px;
		ul {
				width: 165px;
				margin: 52px auto 0;
				display: flex;
				justify-content: space-between;
				li {
					width: calc(33.3% - 16px);
					a {
						display: block;
						&:hover img {
							opacity: .7;
							transform: scale(1.1);
						}
					}
				}
			}
		}
	}
	.f_right {
		width: 50%;
		.f_nav {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			li {
				width: calc(50% - 10px);
				margin-bottom: 30px;
				a {
					font-weight: 700;
					text-transform: uppercase;
					font-size: 15px;
					display: block;
				}
			}
		}
	}
}
footer .pagetop {
	position: fixed;
	bottom: 40px;
	right: 20px;
	height: auto;
	z-index: 200;
	a {
		display: block;
		width: 50px;
		height: 50px;
		line-height: 1;
		background-color: #fff;
		border: 1px solid #000;
		cursor: pointer;
		text-align: center;
		border-radius: 50%;
		padding-top: 12px;
		&::before {
			position: absolute;
			top: 8px;
			right: 0;
			bottom: 0;
			left: 0;
			display: block;
			width: 12px;
			height: 12px;
			margin: auto;
			content: "";
			transform: rotate(-45deg);
			border-top: 2px solid #000;
			border-right: 2px solid #000;
		}
	}
}

@media screen and (max-width: 1000px) {
	/* 共通 */
	.inner {
		width: 100%;
		max-width: 100%;
	}
	/*header*/
	header .h_inner {
		width: 100%;
		height: 80px;
		padding: 0 16px 0;
		.h_top {
			.item {
				opacity: 1;
				padding: 0;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: repeat(1, 1fr);
				gap: 6px;
			.h_logo {
					width: 60px;
				}
				h1.h1_img {
					width: 435px;
					margin: 0 auto;
				}
				.h_sns {
					display: none;
				}
			}
		}
	}
	header.is-animation .h_inner .h_top {
		height: 100%;
		.item {
			opacity: 1;
			padding: 0;
		}
	}
	header .h_inner .h_bottom {
		padding: 0;
		.global-nav	.h_sns {
			width: 120px;
			padding: 16px 0 50px;
			margin-left: 18vw;
			ul {
				display: flex;
				justify-content: space-between;
				li {
					width: calc(33.3% - 8px);
					a {
						display: block;
					}
				}
			}
		}
	}
	.global-nav {
		position: fixed;
		right: -100%;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-top: 40px;
		background-color: rgb(255 255 255 / 0.98);
		transition: all .6s;
		z-index: 9999;
		overflow-y: auto;
	}
	header .h_inner .h_bottom .global-nav {
    padding-top: 0;
		.global-nav_list {
			display: block;
			padding: 56px 18vw 0;
			li {
				margin: 0 0 6px;
				width: 100%;
				&:first-of-type a {
					position: static;
					display: block;
					img {
						width: 260px;
					}
				}
				a {
					color: #000;
					font-size: 1.2rem;
					display: block;
					padding: 6px 0;
					text-align: left;
					span {
						display: block;
						font-size: .8rem;
						color: #700000;
						line-height: 1;
					}
					&:hover::after {
						display: none;
					}
				}
			}
		}
	}

/* hamburgeメニュー */
	.hamburger {
		position: absolute;
		right: 16px;
		top: 24px;
		width: 32px;
		height: 30px;
		cursor: pointer;
		z-index: 9999;
		.hamburger_line {
			position: absolute;
			right: 0;
			height: 2px;
			background-color: #000;
			transition: all .6s;
		}
	}
	.hamburger_line1 {
		top: 6px;
		width: 30px;
	}
	.hamburger_line2 {
		top: 14px;
		width: 30px;
	}
	.hamburger_line3 {
		top: 22px;
		width: 30px;
	}
	.nav-open .global-nav {
		right: 0;
	}
	.nav-open .hamburger_line1 {
		transform: rotate(45deg);
		top: 16px;
		width: 32px;
	}
	.nav-open .hamburger_line2 {
		width: 0;
		left: 50%;
	}
	.nav-open .hamburger_line3 {
		transform: rotate(-45deg);
		top: 16px;
		width: 32px;
	}

/* footer */
	footer .f_inner {
		padding-left: 6vw;
		padding-right: 6vw;
		.f_left {
			width: 40%;
			.f_logo {
				width: 180px;
			}
			.f_sns {
				max-width: 180px;
			ul {
					width: 180px;
					margin-top: 40px;
					li {
						width: calc(33.3% - 16px);
						a:hover img {
							opacity: 1;
							transform: scale(1.0);
						}
					}
				}
			}
		}
		.f_right {
			width: 60%;
			.f_nav li a {
				font-size: clamp(0.813rem, 0.754rem + 0.29vw, 0.938rem);
			}
		}
	}
}

	@media screen and (max-width: 768px) {
/* footer */
	footer {
	.copy {
		padding-top: 40px;
	}
	.f_inner {
			padding-top: 50px;
			flex-direction: column-reverse;
			.f_left {
				width: 100%;
				padding-top: 40px;
				.f_logo {
					width: 200px;
					margin: 0 auto;
				}
				.f_sns {
					max-width: 200px;
					margin: 0 auto;
				ul {
						width: 200px;
						margin-top: 30px;
					}
				}
			}
			.f_right {
					width: 100%;
			.f_nav li {
					margin-bottom: 20px;
				}
			}
		}
	}
	footer .pagetop {
		bottom: 30px;
		right: 16px;
	}

/* bosyufixBtn */
	.bosyufixBtn {
        bottom: 2vh;
		right: 3vw;
		width: 9rem;
		height: 9rem;
	}
}

@media screen and (max-width: 600px) {
/* header */
	header .h_inner {
		height: 70px;
		padding: 0 5px;
		.h_top {
			height: 100%;
			.item {
				.h_logo {
					width: 50px;
					}
				h1.h1_img {
					width: 265px;
					}
				}
			}
		}
	header .h_inner .h_bottom .global-nav {
	.global-nav_list {
			padding: 46px 10vw 0;
			li:first-of-type a img {
				width: 200px;
			}
		}
	.h_sns {
			margin-left: 10vw;
		}
	}
	.hamburger {
		top: 22px;
	}

/* footer */
	footer {
	.copy {
		padding-top: 30px;
	}
	.f_inner {
			padding-top: 40px;
			.f_left {
				.f_logo {
					width: 160px;
				}
				.f_sns {
					max-width: 160px;
				ul {
						width: 120px;
						margin-top: 20px;
						li {
							width: calc(33.3% - 8px);
						}
					}
				}
			}
			.f_right {
					width: 100%;
			}
		}
	}

/* bosyufixBtn */
	.bosyufixBtn {
		right: 2vw;
		width: 7rem;
		height: 7rem;
	}
}
@media screen and (max-width: 450px) {
/* header */
	h1.h1_img {
		width: 200px!important;
	}
}