/* SP */
/* ======================================= */

/* 00, common */
/* --------------------------------------- */
html {
	scroll-behavior: smooth;
}

html main {
	padding: 0;
}

body {
	overflow-x: hidden;
}

.gallery,
.access,
.attention {
	background-color: #f2f3f4;
}

.content-title p {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 32px;
	padding-bottom: 16px;
	line-height: 100%;
	border-bottom: 2px solid #000620;
	max-width: 86px;
	margin: 0 auto 40px;
}

.site-btn {
	max-width: 340px;
	margin: 0 auto;
}

.button__vector {
	width: 20px;
	height: 20px;
}

/* 01, price */
/* --------------------------------------- */
.price {
	position: relative;
	padding: 64px 16px;
	max-width: 532px;
	margin: 0 auto;
}

.price .background-image-sp {
	display: block;
	z-index: -100;
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
}

.price .background-image-pc {
	display: none;
}

.content-table-items {
	padding-bottom: 40px;
}

.content-table-items:first-child {
	padding-bottom: 32px;
}

.content-table-items__title {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 100%;
	padding-bottom: 24px;
}

.content-table-items__content {
	border-collapse: collapse;
	border: none;
}

.row,
.col,
.cell {
	border: 1px solid #000620;
	font-family: "Montserrat", sans-serif;
}

.row > span,
.col {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
}

.row--no-border {
	border: none;
}

.col {
	padding: 28px 0;
	font-size: 14px;
}

.row {
	padding: 17px 0;
	line-height: 150%;
}

.row__firstline {
	font-size: 12px;
}

.row__secondline {
	font-size: 14px;
}

.cell {
	padding: 26px 0;
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
}

.content-table-items-sub-text {
	display: flex;
	justify-content: flex-end;
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 400;
	font-size: 10px;
	line-height: 100%;
	color: #000620;
	padding-top: 5px;
}

.content-table-items-sub-text p:first-child {
	padding-right: 9.98px;
}

/* 02, gallery*/
/* --------------------------------------- */
.gallery {
	position: relative;
	transform: translateX(-50%);
	left: 50%;
	width: 100vw;
	padding: 64px 0;
}

.gallery-inner {
	max-width: 500px;
	margin: 0 auto;
}

.gallery .content-title p {
	max-width: 118px;
}

.content-body-gallery + .content-body-gallery {
	margin-top: 64px;
}

.content-body-gallery__title {
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 100%;
	color: #000620;
	padding-bottom: 24px;
	display: flex;
	padding-left: 16px;
	align-items: center;
}

.content-body-gallery__title__icon {
	background-color: #000620;
	width: 30px;
	height: 2px;
}

.content-body-gallery__title__text {
	font-family: "Montserrat", sans-serif;
	margin-left: 12px;
	font-weight: 700;
	font-size: 24px;
	line-height: 100%;
}

.content-body-gallery-content-item {
	position: relative;
}

.content-body-gallery-content-item img {
	width: 100%;
	vertical-align: bottom;
}

.content-body-gallery-content .only-pc {
	display: none;
}

.gallery #flexible_container {
	height: 0;
	overflow: hidden;
	transition: height 0.7s;
}

.gallery #flexible_items {
	display: block;
	flex-wrap: nowrap;
	gap: 0;
}

.content-body-gallery-content__text {
	position: absolute;
	right: 24px;
	bottom: 24px;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 100%;
	z-index: 2;
}

.content-body-gallery-content-item {
	height: auto;
	position: relative;
}

.content-body-gallery-content-item::after {
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	display: block;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 1;
}

.content-body-gallery-content-item img {
	height: 100%;
}

.content-body-gallery-event img {
	width: 100%;
	vertical-align: bottom;
}

.content-body-gallery-event .only-pc {
	display: none;
}

.content-body-gallery .site-btn {
	margin-top: 40px;
}

/* 03, resident DJ*/
/* --------------------------------------- */
.dj {
	width: 100%;
	margin: 0 auto;
	padding: 64px 16px;
}

.dj-inner {
	max-width: 500px;
	margin: 0 auto;
}

.dj .content-title p {
	max-width: 202px;
}

.dj .content-title.content-title--soundproducer p {
	max-width: 328px;
}

.content-title--dj {
	margin-top: 64px;
}

.dj .content-body {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
}

.dj .site-btn {
	margin-top: 32px;
}

.dj .content-body {
	display: flex;
	flex-wrap: wrap;
}

.dj .content-body__item {
	width: calc((100% - 7px) / 2);
	position: relative;
}

.dj .content-body__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 42/47;
	object-fit: cover;
	object-position: top;
	vertical-align: middle;
}

.dj .content-body__item img.content-body__blanklink {
	position: absolute;
	width: 20px;
	height: 20px;
	bottom: 3px;
	right: 5px;
}

.content-body__dj-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 120%;
	color: #ffffff;
	position: absolute;
	left: 3.3%;
	bottom: 2%;
	max-width: 100px;
	height: auto;
}

.dj .content-body__item .only-pc {
	display: none;
}

#dj_flexible_container {
	height: 0;
	overflow: hidden;
	transition: height 0.7s;
}

#dj_flexible_items {
	display: block;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 7px;
}

.content-body__dj-name--white {
	color: #ffffff;
}

.content-body__dj-name--black {
	color: #000620;
}

/* 04, access*/
/* --------------------------------------- */
.access {
	position: relative;
	transform: translateX(-50%);
	left: 50%;
	width: 100vw;
	padding: 64px 0;
}

.access-inner {
	max-width: 532px;
	padding: 0 16px;
	margin: 0 auto;
}

.access .content-title p {
	max-width: 116px;
}

.access-content-item {
	display: flex;
	gap: 8px;
}

.access-content-item-head img {
	max-width: 24px;
	height: 24px;
}

iframe.access-map {
	margin-top: 48px;
}

.access-content-item-title__text {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	color: #000620;
}

.access-content-item-english {
	padding-bottom: 24px;
}

.access-content-item-title__indent {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	color: #000620;
	padding-bottom: 8px;
}

/* 05, recruit*/
/* --------------------------------------- */
.recruit {
	position: relative;
	padding: 64px 16px;
	max-width: 532px;
	margin: 0 auto;
}

.recruit .content-title p {
	max-width: 122px;
}

.recruit .background-image-sp {
	display: block;
	z-index: -100;
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
}

.recruit .background-image-pc {
	display: none;
}

.recruit .content-body {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 160%;
	text-align: center;
	padding-bottom: 40px;
}

/* 06, attention*/
/* --------------------------------------- */
.attention {
	position: relative;
	z-index: -99;
	transform: translateX(-50%);
	left: 50%;
	width: 100vw;
	padding: 64px 0;
	max-width: initial;
	overflow: hidden;
}

.attention-inner {
	max-width: 532px;
	padding: 0 16px;
	margin: 0 auto;
}

.attention_background-image {
	display: block;
	z-index: -100;
	position: absolute;
	right: -15%;
	top: 8.8%;
	width: 384px;
	height: 384px;
}

.attention .content-title p {
	max-width: 161px;
	margin-left: 0;
}

.content-body-warning:first-child {
	padding-bottom: 32px;
}

.content-body-warning-title {
	display: flex;
	align-items: center;
}

.content-body-warning-title img {
	max-width: 24px;
	height: 24px;
}

.content-body-warning-title__text {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	padding-left: 6.4px;
}

.content-body-warning-content {
	list-style: none;
}

.content-body-warning-content__title {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 150%;
	color: #000620;
	padding: 24px 0 4px;
}

.content-body-warning-content__description {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #000620;
}

.content-body-warning-content__helper {
	padding-top: 16px;
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 150%;
	color: #000620;
}

/* PC */
/* ======================================= */
@media screen and (min-width: 1024px) {
	/* 00, common */
	/* --------------------------------------- */
	.gallery,
	.access,
	.attention {
		background-color: #f2f3f4;
	}

	.content-title p {
		font-size: 48px;
		max-width: 128px;
		margin: 0 auto 64px;
	}

	.site-btn {
		max-width: 280px;
		margin: 0 auto;
	}

	/* 01, price */
	/* --------------------------------------- */
	.price {
		position: relative;
		max-width: 1280px;
		margin: 0 auto;
		padding: 80px 40px;
	}

	.price-inner {
		max-width: 1200px;
		margin: 0 auto;
	}

	.price .background-image-pc {
		display: block;
		z-index: -100;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0 auto;
	}

	.price .background-image-sp {
		display: none;
	}

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

	.content-table-items {
		width: calc((100% - 100px) / 2);
	}

	.content-table-items__title {
		font-size: 24px;
	}

	.col {
		padding: 46px 0;
		font-size: 20px;
	}

	.row {
		padding: 27px 0;
		font-size: 20px;
	}

	.row__firstline {
		font-size: 16px;
		padding-bottom: 8px;
	}

	.row__secondline {
		font-size: 20px;
	}

	.cell {
		text-align: center;
		font-weight: 700;
		font-size: 28px;
	}

	.content-table-items-sub-text {
		display: flex;
		justify-content: flex-end;
		font-family: "Noto Sans JP";
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 100%;
		color: #000620;
		padding-top: 8px;
	}

	.content-table-items-sub-text p:first-child {
		padding-right: 16px;
	}

	/* 02, gallery*/
	/* --------------------------------------- */
	.gallery {
		position: relative;
		transform: translateX(-50%);
		left: 50%;
		width: 100vw;
		padding: 96px 0;
	}

	.gallery-inner {
		max-width: 1920px;
	}

	.gallery .content-title p {
		max-width: 176px;
	}

	.gallery #flexible_container {
		height: auto;
	}

	.gallery #flexible_items {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
	}

	.content-body-gallery-content {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 16px;
	}

	.content-body-gallery-content.only-sp {
		display: none;
	}

	.content-body-gallery-content.only-pc {
		display: flex;
	}

	.content-body-gallery__title__text {
		font-family: "Montserrat", sans-serif;
		font-weight: 700;
		font-size: 40px;
		line-height: 100%;
	}

	.content-body-gallery-content-item {
		width: calc(100% / 3);
	}

	.content-body-gallery-content-item {
		position: relative;
	}

	.content-body-gallery-content__text {
		position: absolute;
		right: 24px;
		bottom: 24px;
		color: #fff;
		font-family: "Montserrat", sans-serif;
		font-style: normal;
		font-weight: 700;
		font-size: 24px;
		line-height: 100%;
	}

	.content-body-gallery__title {
		padding-bottom: 48px;
	}

	.content-body-gallery .site-btn {
		margin: 64px auto 0;
	}

	.content-body-gallery-event .only-pc {
		display: block;
	}

	.content-body-gallery-event-container {
		display: flex;
		flex-wrap: wrap;
	}

	.content-body-gallery-event {
		width: 50%;
		height: auto;
	}

	.content-body-gallery-event img {
		width: 100%;
		height: 100%;
	}

	/* 03, resident DJ*/
	/* --------------------------------------- */
	.dj {
		max-width: 1280px;
		margin: 0 auto;
		padding: 96px 40px;
	}

	.dj-inner {
		max-width: 1200px;
		margin: 0 auto;
	}

	.dj .content-title p {
		max-width: 302px;
		margin-bottom: 56px;
	}

	.dj .content-title.content-title--soundproducer p {
		max-width: 492px;
	}

	.content-title--dj {
		margin-top: 80px;
	}

	.dj .content-body {
		display: flex;
		flex-wrap: wrap;
		gap: 56px 42px;
		max-width: 888px;
		margin: 0 auto;
		justify-content: center;
	}

	#dj_flexible_items {
		display: flex;
		flex-wrap: wrap;
		gap: 24px 42px;
	}

	#dj_flexible_container {
		height: 100%;
	}

	.dj .content-body__item {
		width: calc((100% - (42px * 2)) / 3);
	}

	.dj .content-body__item img {
		width: 100%;
		aspect-ratio: 9/10;
	}

	.dj .content-body__item img.content-body__blanklink {
		width: 26px;
		height: 26px;
		bottom: 10px;
		right: 10px;
	}

	.dj .content-body .content-body__dj-name {
		position: absolute;
		max-width: 151px;
		height: auto;
		bottom: 3.5%;
		font-size: 20px;
	}

	.dj .content-body__item .only-sp {
		display: none;
	}

	/* 04, access*/
	/* --------------------------------------- */
	.access {
		padding: 96px 40px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		max-width: initial;
	}

	.access-inner {
		max-width: 1200px;
		margin: 0 auto;
	}

	.access .content-title p {
		max-width: 174px;
	}

	.access-content {
		display: flex;
		align-items: flex-start;
		gap: 20px;
	}

	.access-content-inner {
		max-width: 560px;
	}

	iframe.access-map {
		max-width: 620px;
	}

	.access-content-item {
		padding-bottom: 34.5px;
		display: flex;
		gap: 8px;
	}

	.access-content-item-body {
		max-width: 528px;
	}

	/* 05, recruit*/
	/* --------------------------------------- */
	.recruit {
		position: relative;
		max-width: 1440px;
		margin: 0 auto;
		padding: 96px 40px;
	}

	.recruit .content-title p {
		max-width: 183px;
	}

	.recruit .content-body {
		font-size: 18px;
		padding-bottom: 0;
	}

	.recruit .background-image-sp {
		display: none;
	}

	.recruit .background-image-pc {
		display: block;
		z-index: -100;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0 auto;
	}

	.recruit .site-btn {
		margin: 64px auto 0;
	}

	/* 06, attention*/
	/* --------------------------------------- */
	.attention {
		padding: 96px 40px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		max-width: initial;
	}

	.attention-inner {
		max-width: 1200px;
		margin: 0 auto;
	}

	.attention .content-title p {
		max-width: 241px;
	}

	.content-body-warning:first-child {
		padding-bottom: 48px;
	}

	.content-body-warning-title__text {
		font-size: 24px;
	}

	.content-body-warning-title img {
		max-width: 28px;
		height: 28px;
	}

	.content-body-warning-content__title {
		font-size: 20px;
		padding: 24px 0 8px;
	}

	.content-body-warning-content > li + li .content-body-warning-content__title {
		padding: 16px 0 8px;
	}

	.content-body-warning-content__description {
		font-size: 16px;
	}

	.content-body-warning-content__helper {
		font-size: 16px;
	}

	.attention_background-image {
		display: block;
		z-index: -100;
		position: absolute;
		left: 50%;
		right: 0;
		top: 24%;
		bottom: 8.3%;
		width: 742px;
		height: 742px;
	}
}

/* fv */
.fv {
	width: 100%;
}

.fv__bg {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.fv-content {
	padding: 16px 16px 48px;
	background: linear-gradient(to top, #000620 0%, #000829 46.88%, #000829 92.38%, rgba(0, 6, 32, 0) 100%);
	position: relative;
	margin-top: -14%;
}

.fv-content-inner {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

.fv-content-inner__title {
	font-weight: 600;
	font-size: 24px;
	line-height: 100%;
	color: #ffffff;
	font-family: "Montserrat", sans-serif;
}

.fv-content-inner-body {
	margin-top: 16px;
}

.fv-content-inner-body-item + .fv-content-inner-body-item {
	margin-top: 16px;
}

.fv-content-inner-body-item-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fv-content-inner-body-item-inner-head__text {
	font-weight: 600;
	font-size: 28px;
	line-height: 100%;
	color: #ffffff;
	font-family: "Montserrat", sans-serif;
}

.fv-content-inner-body-item-inner-head__helper {
	margin-top: 4px;
	font-weight: 500;
	font-size: 10px;
	line-height: 140%;
	color: #ffffff;
}

.fv-content-inner-body-item-inner-content {
	width: 140px;
}

.fv-content-inner-body-item-inner-content-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fv-content-inner-body-item-inner-content-item + .fv-content-inner-body-item-inner-content-item {
	margin-top: 8px;
}

.fv-content-inner-body-item-inner-content-item__text {
	font-weight: 600;
	font-size: 14px;
	line-height: 100%;
	color: #ffffff;
	font-family: "Montserrat", sans-serif;
}

.fv-content-inner-body-item__helper {
	margin-top: 12px;
	text-align: right;
	font-weight: 500;
	font-size: 10px;
	line-height: 100%;
	color: #ffffff;
}

.fv-content-inner-cta {
	margin-top: 40px;
}

.fv-content-inner-cta-blanklink {	
	margin-top: 24px;	
	}

.fv-content-inner-cta-btn + .fv-content-inner-cta-btn {
	margin-top: 24px;
}

@media screen and (min-width: 1024px) {
	html main {
		margin: 0 auto;
	}

	.fv {
		width: 100%;
		position: relative;
	}

	.fv__bg {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}

	.fv-content {
		position: absolute;
		padding: 40px;
		background: initial;
		margin: 0;
		top: 56%;
		right: 4%;
		translate: 0 -50%;
		width: 672px;
		max-width: initial;
	}

	.fv-content-inner {
		max-width: 592px;
	}

	.fv-content-inner__title {
		font-size: 32px;
	}

	.fv-content-inner-body {
		margin-top: 12px;
	}

	.fv-content-inner-body-item + .fv-content-inner-body-item {
		margin-top: 30px;
	}

	.fv-content-inner-body-item-inner-head__text {
		font-size: 48px;
	}

	.fv-content-inner-body-item-inner-head__helper {
		margin-top: 6px;
		font-size: 14px;
	}

	.fv-content-inner-body-item-inner-content {
		width: 202px;
	}

	.fv-content-inner-body-item-inner-content-item + .fv-content-inner-body-item-inner-content-item {
		margin-top: 20px;
	}

	.fv-content-inner-body-item-inner-content-item__text {
		font-size: 24px;
	}

	.fv-content-inner-body-item__helper {
		margin-top: 8px;
		font-weight: 500;
		font-size: 14px;
	}

	.fv-content-inner-cta {
		margin-top: 40px;
		display: flex;
		justify-content: space-between;
		gap: 32px;
	}

	.fv-content-inner-cta-blanklink {	
		margin-top: 24px;	
		}

	.fv-content-inner-cta-btn {
		width: calc((100% - 32px) / 2);
	}

	.fv-content-inner-cta-btn-blanklink {	
		width: 100%;	
	}	
		.fv-content-inner-cta-btn-blanklink .site-btn {	
		max-width: 100%;	
	}

	.fv-content-inner-cta-btn + .fv-content-inner-cta-btn {
		margin: 0;
	}
}

.fv-closed-contents {
	position: absolute;
	z-index: 999;
	top: 32%;
	left: 0;
	right: 0;
	margin: auto;
	width: calc(100% - 32px);
	max-width: 480px;
}

.fv-closed-contents__image {
	width: 100%;
	height: auto;
}

@media screen and (min-width: 1024px) {
	.fv-closed-contents {
		top: 56%;
		max-width: 600px;
		translate: 0 -50%;
	}
}