@charset "utf-8";

/* =========================================
* ページ全体の共通パーツ
* ======================================== */
html {
	scroll-padding-top: var(--header-height);
	/* 追従メニューの高さに応じて適切な値を設定 */
	scroll-behavior: smooth;
	box-sizing: border-box;
}

body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: var(--txt16-14);
	text-align: justify;
	line-height: 175%;
	color: var(--txt-color);
}

main {
	margin-top: var(--header-height);
	overflow: clip;
}

section {
	padding: var(--m56-32) 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}


section:last-child {
	padding-bottom: var(--m120-80);
}

a {
	text-decoration: none;
	color: inherit;
	transition: var(--hov-move);

	&:hover {
		transition: var(--hov-move);
	}
}


img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	vertical-align: bottom;
}

.container {
	width: 960px;
	max-width: 92%;
	display: block;
	margin: auto;
}

.tier02 {

	main {
		background-image: url(../imgs/tier02_bg.webp);
	}

	.tier02-top-txt {
		text-align: center;
	}

	h3 {
		text-align: center;
	}
}

.white-wrap {
	border-radius: 10px;
	padding: var(--m40-24);
	background-color: #fff;
	margin-bottom: var(--m40-24);
	box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1);
}

@media(max-width:768px) {

	.sp_none {
		display: none !important;
	}
}

@media(min-width:769px) {
	.pc_none {
		display: none !important;
	}
}

.txtC {
	text-align: center;
}

.txtR {
	text-align: right;
}

.txtL {
	text-align: left;
}

.txtJ {
	text-align: justify;
}


/* フレックス関連
* ---------------------------------- */
.flex {
	display: -ms-flexbox;
	display: flex;
}

.flexR {
	flex-direction: row-reverse;
}

.justC {
	justify-content: center;
}

.justS {
	justify-content: flex-start;
}

.justE {
	justify-content: flex-end;
}

.justB {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.justA {
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.flexW {
	flex-wrap: wrap;
}

.alignS {
	align-items: start;
}

.alignC {
	align-items: center;
}

.alignB {
	align-items: flex-end;
}

@media (max-width: 768px) {
	.sp_flclear {
		display: block;
	}

	.sp_flex {
		display: flex;
	}
}



/* =========================================
* 共通パーツ
* ======================================== */

/* 変数
* ---------------------------------- */
:root {
	--main-color: #065A9C;
	--sub-color01: #9D4A97;
	--sub-color02: #E95541;
	--txt-color: #5D5A5A;
	--gray-color: #ADABAB;
	--main-gd: linear-gradient(90deg, #E95897 0%, #53B1EA 54.33%, #06B3B5 100%);
	--ticket-gd: linear-gradient(84deg, #0086BC 7.76%, #00B39F 85.18%);
	--faq-gd: linear-gradient(270deg, #F9CE5B 0%, #F49D00 100%);
	--school-gd: linear-gradient(270deg, #8CD4A5 0%, #52BBB0 100%);
	--media-gd: linear-gradient(90deg, #C78FAC 0%, #DDA092 100%);
	--en-txt: "Shalimar", serif;
	--header-height: 100px;
	--kunoji: rotate(45deg) translateY(-50%);
	--hov-move: all .5s;
	--txt54-36: 54px;
	--txt40-24: 40px;
	--txt36-24: 36px;
	--txt32-24: 32px;
	--txt24-18: 24px;
	--txt20-18: 20px;
	--txt18-16: 18px;
	--txt16-14: 16px;
	--txt15-14: 14px;
	--txt14-13: 14px;
	--txt13-12: 13px;
	--m120-80: 80px;
	--m80-40: 80px;
	--m56-32: 56px;
	--m40-24: 40px;
	--m32-16: 32px;
	--m24-16: 24px;
	--m16-8: 16px;
}

/* ロード画面
* ---------------------------------- */
#loading {
	display: none;
	position: fixed;
	background-color: #FFF;
	min-height: 100lvh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 50000;
	display: grid;
	place-items: center;
	transition: all .3s;
	background-image: linear-gradient(135deg, rgba(255, 238, 251, 0.6) 16%, rgba(219, 243, 255, 0.6) 55%, rgba(252, 247, 235, 0.6) 80%);

	.loading-img {
		text-align: center;
		max-width: 200px;

		.load-skater {
			width: 180px;
			display: block;
			margin: auto;
			filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.2));
		}
	}
}

/* ページトップボタン
* ---------------------------------- */
#pagetop {
	position: fixed;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--main-color);
	box-shadow: 0px 2px 2px #333;
	cursor: pointer;
	right: 20px;
	bottom: 40px;
	z-index: 5;
	display: grid;
	place-items: center;

	span {
		display: inline-block;
		border-right: 3px solid #fff;
		border-top: 3px solid #fff;
		transform: rotate(-45deg);
		width: 13px;
		height: 13px;
		margin-top: 8px;
	}
}



/* テキストまわり
* ---------------------------------- */

/* --- 普通のリスト --- */
ul.normal-list {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.normal-list li {
	list-style-type: disc;
	list-style-position: inside;
}

/* --- 注釈 --- */
ul.note {
	padding-left: 1em;
	text-indent: -1em;
	text-align: justify;
}

/* --- 丸数字 --- */

ol.circle-number-list {
	padding-left: 1.3em;
	text-indent: -1.3em;
	text-align: justify;
}

a.inline-link {
	color: #0086BC;
	text-decoration: underline;
	font-weight: 500;
}

.main-color-txt {
	color: var(--main-color);
}

.bold {
	font-weight: 700;
}

.s-txt {
	font-size: .7em;
}


/* --- 見出し --- */
h2 {
	color: var(--main-color);
	font-family: "Zen Maru Gothic", sans-serif;
	position: relative;
	font-size: var(--txt40-24);
	font-weight: 500;
	letter-spacing: -0.8px;
	display: block;
	margin-bottom: var(--m56-32);
	margin-top: 1.5em;
	line-height: 1em;
	text-align: center;
	z-index: 2;

	&::before {
		content: attr(data-en);
		display: block;
		font-family: var(--en-txt);
		color: #DFDCDD;
		line-height: 130%;
		font-weight: 700;
		font-size: 3em;
		position: absolute;
		transform: translateX(-50%);
		font-weight: 300;
		line-height: 1em;
		top: 0;
		left: 50%;
		z-index: -1;
		white-space: nowrap;
		top: -.6em;
	}
}

h3 {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: var(--txt24-18);
	color: var(--sub-color01);
	font-weight: 700;
	margin-bottom: var(--m16-8);
}

/* ボタン
* ---------------------------------- */

.btn-gimmick {
	position: relative;

	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		background: #333;
		width: 100%;
		height: 100%;
		transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
		transform: scale(0, 1);
		transform-origin: left top;

	}

	&:hover {
		color: #fff;

		&:before {
			transform: scale(1, 1);
			color: #fff;
		}
	}

	p {
		position: relative;
		z-index: 3;
	}
}

.normal-btn {
	font-size: 14px;
	font-weight: 700;
	position: relative;
	display: grid;
	place-items: center;
	padding: 1em;
	background-color: #fff;
	max-width: 250px;
	margin-top: 16px;
	border: 1px solid #fff;

	&::after {
		content: "";
		position: absolute;
		transform: translateY(-50%)rotate(45deg);
		top: 50%;
		right: 1em;
		width: 8px;
		height: 8px;
		z-index: 3;
	}

	&.navy-btn {
		color: var(--main-color);
		border-image: var(--ticket-gd) 1;


		&::after {
			border-top: 2px solid var(--main-color);
			border-right: 2px solid var(--main-color);
		}

		&.btn-gimmick {
			&::before {
				background: var(--ticket-gd);
			}
		}

		&:hover {
			color: #fff;

			&::after {
				border-top: 2px solid #fff;
				border-right: 2px solid#fff;
			}
		}
	}

	&.purple-btn {
		color: var(--sub-color01);
		border-image: var(--media-gd) 1;


		&::after {
			border-top: 2px solid var(--sub-color01);
			border-right: 2px solid var(--sub-color01);
		}

		&.btn-gimmick {
			&::before {
				background: var(--media-gd);
			}
		}

		&:hover {
			color: #fff;

			&::after {
				border-top: 2px solid #fff;
				border-right: 2px solid#fff;
			}
		}
	}

	&.orange-btn {
		color: var(--sub-color02);
		border-image: var(--faq-gd) 1;


		&::after {
			border-top: 2px solid var(--sub-color02);
			border-right: 2px solid var(--sub-color02);
		}

		&.btn-gimmick {
			&::before {
				background: var(--faq-gd);
			}
		}

		&:hover {
			color: #fff;

			&::after {
				border-top: 2px solid #fff;
				border-right: 2px solid#fff;
			}
		}
	}
}

/* アンカーリンク
* ---------------------------------- */
.anchor-wrap {
	display: flex;
	justify-content: center;
	gap: var(--m16-8);
	margin: var(--m56-32) auto;
	align-items: center;

	.anchor-col {
		border: 1px solid var(--sub-color01);
		color: var(--sub-color01);
		font-weight: 600;
		background: #fff;
		border-radius: 10px;
		padding: .5em 1em;
		min-width: 220px;
		position: relative;
		width: 100%;
		max-width: 450px;
		display: flex;
		justify-content: center;
		transition: var(--hov-move);

		&::after {
			content: "";
			border-right: 2px solid var(--sub-color01);
			border-bottom: 2px solid var(--sub-color01);
			transform: translateY(-50%) rotate(45deg);
			width: 8px;
			height: 8px;
			top: 50%;
			right: 1em;
			position: absolute;
			transition: var(--hov-move);
		}

		&:hover {
			background: var(--media-gd);
			color: #fff;
			transition: var(--hov-move);
			border: 1px transparent solid;

			&::after {
				border-right: 2px solid #fff;
				border-bottom: 2px solid #fff;
				transition: var(--hov-move);
			}
		}
	}
}

/* =========================================
* ヘッダー
* ======================================== */
header {
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(5px);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9000;
	height: var(--header-height);
	padding-top: var(--m24-16);

	.top-logo {
		display: block;
	}

	.header-contents {
		max-width: 1000px;
		width: 92%;
		height: 100%;
		margin: auto;
		text-align: center;
		display: flex;
		justify-content: space-between;
		flex-direction: column;

		nav {
			ul {
				display: flex;
				justify-content: space-between;

				li {
					font-weight: 600;
					position: relative;

					&::after {
						content: "";
						height: 8px;
						width: 8px;
						border-top: 2px solid var(--gray-color);
						border-right: 2px solid var(--gray-color);
						position: absolute;
						transform: rotate(45deg)translateY(-50%);
						top: 50%;
						right: -1em;
					}

					&:hover {
						color: var(--main-color);
					}

					a {
						display: block;

						&.current {
							color: var(--main-color);
						}
					}
				}
			}
		}
	}
}



/* =========================================
* トップページ
* ======================================== */

/* メインビジュアル
* ---------------------------------- */
.mv-wrap {
	background-image: url(../imgs/mv_bg_pc.webp);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
	display: grid;
	place-items: center;
	position: relative;

	h1 {
		width: 49vw;
		position: relative;
		overflow: hidden;
		clip-path: polygon(17% 1%, 83% 1%, 100% 17%, 100% 83%, 83% 100%, 17% 100%, 0% 83%, 0% 17%);


		img {
			width: 100%;
		}
	}
}


h1::after {
	content: "";
	display: block;
	width: 30px;
	height: 100%;
	position: absolute;
	top: -180px;
	left: 0;
	background-color: #FFF;
	opacity: 0;
	transform: rotate(45deg);
	animation: reflect 3s ease-in-out infinite;
	-webkit-transform: rotate(45deg);
	-webkit-animation: reflect 3s ease-in-out infinite;
}

@keyframes reflect {
	0% {
		transform: scale(0) rotate(45deg);
		opacity: 0;
	}

	80% {
		transform: scale(0) rotate(45deg);
		opacity: 0.5;
	}

	81% {
		transform: scale(4) rotate(45deg);
		opacity: 1;
	}

	100% {
		transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}

@-webkit-keyframes reflect {
	0% {
		transform: scale(0) rotate(45deg);
		opacity: 0;
	}

	80% {
		transform: scale(0) rotate(45deg);
		opacity: 0.5;
	}

	81% {
		transform: scale(4) rotate(45deg);
		opacity: 1;
	}

	100% {
		transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}


.top-skater01,
.top-skater02,
.top-skater03,
.top-skater04,
.top-skater05 {
	position: absolute;
	filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.2));
	z-index: 10;
}

.top-skater01 {
	width: 16.1vw;
	top: 2vw;
	left: 10.5vw;
}

.top-skater02 {
	width: 23.4vw;
	bottom: 0;
	left: -2vw;
}

.top-skater03 {
	width: 14.3vw;
	top: 3.5vw;
	right: 17vw;
}

.top-skater04 {
	width: 11.9vw;
	top: 9vw;
	right: 2vw;
}

.top-skater05 {
	width: 14.1vw;
	bottom: -1vw;
	right: 17vw;
}

.date-wrap {
	padding: 24px 0;
	text-align: center;

	.top-txt {
		margin: auto;
		border-top: #D4D4D4 1px solid;
		border-bottom: #D4D4D4 1px solid;
		padding: 1em;
		max-width: 900px;
	}

	p {
		font-family: "Noto Serif JP", serif;
		font-size: var(--txt32-24);
		color: #065A9C;
		font-weight: 700;
		line-height: 130%;
		letter-spacing: .05em;

		span.s-txt {
			font-size: .7em;
		}
	}
}

.online-wrap {
	text-align: center;
	padding-bottom: var(--m56-32);

	.online-txt {
		background-image: url(/assets/imgs/skater_mini.png);
		background-position-x: 30%;
		height: 135px;
		background-size: contain;
		background-repeat: no-repeat;
		display: grid;
		place-items: center;
		padding: 0 80px;
	}

	p {
		font-size: var(--txt24-18);
		font-family: "Zen Maru Gothic", sans-serif;
		color: var(--sub-color01);
		font-weight: 700;
	}
}

.comments-col {
	padding: 0.2em 0.5em;
	margin: 2em 0;
	background: #f49e38;
	box-shadow: 0px 0px 0px 10px #f49e38;
	border: dashed 2px white;
	border-radius: 10px;
	margin: 0 10px;

	p {
		padding: 1em;
		text-align: center;
		color: #fff;
		font-weight: 600;
	}
}


/* お知らせ
* ---------------------------------- */
.top-news-area {

	h2 {
		text-align: left;
		justify-content: flex-start;

		&::before {
			left: .6em;
			transform: translateX(0);
		}
	}

	.top-news-wrap {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--m40-24);

		.top-btn-wrap {
			display: grid;
			gap: 16px;

			.top-btn-col {
				width: 282px;
				padding: 0 8px;
				transition: ease .3s;
				overflow: hidden;
				border: solid 2px #fff;

				p {
					display: flex;
					align-items: center;
					text-align: left;
					gap: 16px;
					font-weight: 700;
					position: relative;
					z-index: 5;

					.top-btn-icon {
						display: inline-block;
						width: 82px;
						height: 82px;
					}
				}

				&:first-child {
					border-image: var(--ticket-gd) 1;

					p {
						background: var(--ticket-gd);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

						.top-btn-icon {
							background-image: url(../imgs/icon_top_btn01.webp);
						}
					}
				}

				&:nth-child(2) {
					border-image: var(--faq-gd) 1;

					p {
						background: var(--faq-gd);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

						.top-btn-icon {
							background-image: url(../imgs/icon_top_btn02.webp);
						}
					}
				}

				&:nth-child(3) {
					border-image: var(--school-gd) 1;

					p {
						background: var(--school-gd);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

						.top-btn-icon {
							background-image: url(../imgs/icon_top_btn03.webp);
						}
					}
				}

				&:nth-child(4) {
					border-image: var(--media-gd) 1;

					p {

						background: var(--media-gd);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

						.top-btn-icon {
							background-image: url(../imgs/icon_top_btn04.webp);
						}
					}
				}
			}
		}


		.btn-gimmick {
			&:first-child {
				&:before {
					background: var(--ticket-gd);
				}

				&:hover {
					p {
						background: #fff;
						ackground-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

						.top-btn-icon {
							background-image: url(../imgs/icon_top_btn01_hov.webp);
						}
					}
				}
			}

			&:nth-child(2) {
				&:before {
					background: var(--faq-gd);
				}

				&:hover {
					p {
						background: #fff;
						ackground-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

						.top-btn-icon {
							background-image: url(../imgs/icon_top_btn02_hov.webp);
						}
					}
				}
			}

			&:nth-child(3) {
				&:before {
					background: var(--school-gd);
				}

				&:hover {
					p {
						background: #fff;
						ackground-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

						.top-btn-icon {
							background-image: url(../imgs/icon_top_btn03_hov.webp);
						}
					}
				}
			}

			&:nth-child(4) {
				&:before {
					background: var(--media-gd);
				}

				&:hover {
					p {
						background: #fff;
						ackground-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

						.top-btn-icon {
							background-image: url(../imgs/icon_top_btn04_hov.webp);
						}
					}
				}
			}
		}

		.top-news {
			text-align: left;
			width: 63%;

			.x-container {
				max-width: 100%;
				width: 100%;
				height: 400px;

				iframe {
					max-height: 100%;
				}
			}
		}
	}
}

/* グラデーションのエリア
* ---------------------------------- */
.gd-bg {
	background-image: url(../imgs/gd_bg.webp);
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;

	.side-skater01,
	.side-skater02 {
		position: absolute;
	}

	.side-skater01 {
		top: 25%;
		left: -20px;
	}

	.side-skater02 {
		top: 16%;
		right: -120px;
	}

	section {
		position: relative;
		z-index: unset;
	}
}

/* =========================================
* フィギュアスケートフェスティバルとは
* ======================================== */
.top-about-col {
	font-size: var(--txt15-14);
	font-weight: 600;

	.about-img {
		margin-bottom: var(--m16-8);
		object-fit: cover;
	}
}

.about-wrap {
	padding: var(--m40-24) 0;

	.about-col {
		display: flex;
		gap: var(--m40-24);
		align-items: center;
		justify-content: space-between;
		font-size: var(--txt15-14);
		font-weight: 600;

		.about-img {
			width: 56%;
			max-width: 480px;
			min-height: 350px;
			object-fit: cover;
		}

		.about-txt {
			width: 50%;
		}

		&:nth-child(2) {
			flex-direction: row-reverse;
		}
	}
}

.about-img {
	border-radius: 7px;
}


/* swipevideo埋め込みここから */
.swipevideo-wrap {
	/* コンテンツのオーバーフローを隠す */
	width: 80% !important;
	background-color: #000;
	height: 350px;
	border-radius: 10px;
	padding: var(--m24-16);
}

/* 
@media(max-width:1024px) {
	.swipevideo-wrap {
		margin: auto;
		overflow: visible;
		text-align: center;
		width: 100% !important;
	}
} */

/* 開催概要
* ---------------------------------- */
.overview-wrap {
	background-color: #fff;
	padding: var(--m56-32) var(--m24-16);
	border-radius: 10px;
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15) inset;

	.overview-table {
		width: 84%;
		margin: auto;

		th {
			width: 160px;
			color: var(--main-color);
			text-align: center;
			border-bottom: 1px solid var(--main-color);
			padding: 1em;
		}

		td {
			border-bottom: 1px var(--gray-color) solid;
			padding: 1em 24px;
		}

	}

}

/* 協賛・協力
* ---------------------------------- */
.support-midashi {
	text-align: center;
	font-weight: 600;
	margin: var(--m16-8)auto;
	font-size: var(--txt18-16);
}

.support-wrap {
	display: flex;
	justify-content: center;
	gap: 8px;

	.support-link {
		display: block;
		width: 40%;
		max-width: 320px;

		&:hover {
			filter: brightness(110%);
		}
	}
}

/* =========================================
* 出場予定選手
* ======================================== */

.skater-area {
	padding: var(--m40-24) 0;

	.skater-contents {
		margin-bottom: var(--m40-24);

		.skater-wrap {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
			gap: var(--m24-16);

			.skater-col {
				border-radius: 10px;
				background-color: #fff;
				box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1);
				overflow: hidden;

				.skater-img {
					object-fit: cover;
				}

				.skater-profile {
					padding: 1em var(--m16-8);

					.skater-name {
						color: var(--main-color);
						font-weight: 600;
						font-size: 16px;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.icon-lens {
							height: 16px;
							width: 16px;
							display: grid;
							place-items: center;

							img {
								object-fit: contain;
								height: auto;
							}
						}
					}
				}
			}
		}

	}
}

.lity-wrap .person-col {
	background-color: #fff;
	width: 960px;
	max-width: 92%;
	margin: auto;
	padding: 24px;
	border-radius: 10px;
	max-height: 85vh;
	/* 高さを超えた場合のみ、縦方向にスクロールバーを表示 */
	overflow-y: auto;
	/* iOSデバイスでスムーズなスクロールを有効にする（お好みで） */
	-webkit-overflow-scrolling: touch;
	/* パディングやボーダーを含めて高さを計算する（推奨） */
	box-sizing: border-box;

	.person-plofile {
		height: 100%;
	}

	.normal-btn {
		max-width: 500px;
	}
}


/* =========================================
* チケット・アクセス
* ======================================== */

h4 {
	font-weight: 700;
	font-size: var(--txt18-16);
	border-bottom: 2px solid #000;
	border-image: var(--ticket-gd) 1;
	padding: .5em 0;
	color: var(--main-color);
}

h5 {
	font-weight: 700;
	font-size: 16px;
	margin: 8px 0;
}

/* チケット情報
* ---------------------------------- */
.price-list-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0;

	.price-list-col {

		&:first-child {
			h4 {
				margin: 0 16px 16px 0;
			}

			dl {
				padding-right: 16px;
				border-right: solid var(--gray-color) 1px;
			}
		}

		&:nth-child(2) {
			h4 {
				margin: 0 0 16px 16px;
			}

			dl {
				padding-left: 16px;
			}
		}
	}

	.price-col {
		display: flex;
		justify-content: space-between;
		padding: .8em 0;
		border-bottom: 1px solid var(--gray-color);
	}

	.normal-btn {
		max-width: none;
	}

	.info-map {
		margin: 8px auto;
		display: block;
	}
}

/* チケットのご購入
* ---------------------------------- */
.ticket-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--m40-24);
	padding: var(--m16-8) 0;

	.ticket-col {
		.bold {
			margin-top: var(--m24-16);

			h5+& {
				margin-top: 0;
			}
		}

		iframe {
			width: 100% !important;
		}
	}
}

/* =========================================
* オンライン配信
* ======================================== */

#livestream .swipevideo-wrap {
	height: auto;
	margin: auto;
}

#livestream .white-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m32-16);

	h4 {
		margin-bottom: var(--m24-16);
	}

	.person-col .normal-btn {
		display: none;
	}
}

/* オンライン配信解説者
* ---------------------------------- */
.person-col {
	display: flex;
	gap: var(--m24-16);
	justify-content: space-between;
	margin-bottom: var(--m40-24);

	.person-img {
		width: 25%;
		max-width: 206px;
		text-align: center;
		font-size: var(--txt13-12);
		margin: 0 auto;

		img {
			border-radius: 10px;
		}
	}

	.person-plofile {
		width: 75%;
		display: flex;
		flex-direction: column;
		gap: var(--m24-16);

		.person-name {
			font-size: var(--txt24-18);
			font-weight: 500;
		}

		.color-txt {
			font-weight: 600;
		}
	}

	&.suzuki {
		.person-plofile {
			.color-txt {
				background: var(--faq-gd);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

			}
		}
	}

	&.mura {
		.person-plofile {
			.color-txt {
				background: var(--ticket-gd);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

			}
		}
	}

	&.hongo {
		.person-plofile {
			.color-txt {
				background: var(--media-gd);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

			}
		}
	}
}

/* =========================================
* イベント情報
* ======================================== */
.event-mv {
	display: block;
	margin: var(--m24-16) auto;
	border-radius: 10px;
}

.event-wrap {
	margin: var(--m56-32) 0;

	h4 {
		font-size: var(--txt20-18);
		padding-left: 1.3em;
		text-indent: -1.3em;
	}

	h5 {
		padding-left: 1.3em;
		text-indent: -1.3em;
	}

	.deadline-txt {
		display: block;
		max-width: 500px;
		text-align: center;
		margin: var(--m24-16) auto;
		position: relative;
		background-color: var(--main-color);
		color: #fff;
		font-weight: 600;
		font-size: var(--txt20-18);
		padding: .5em 1em;
		border-radius: 10px;

		&::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border: 10px solid transparent;
			border-top: 10px solid var(--main-color);
			width: 0;
			height: 0;
		}

	}

	.event-table {
		th {
			color: var(--main-color);
			width: 8em;
			padding: .5em 0;
		}

		td {
			padding: .5em .5em;
		}
	}
}

/* =========================================
* 過去の開催
* ======================================== */

#topics h4 {
	margin-bottom: var(--m24-16);
}

.topics-img {
	display: block;
	margin: 16px auto;
}

.topics-table {
	width: 100%;

	th,
	td {
		padding: .2em 0;
	}

	th {
		width: 4em;
	}

	&.guest {
		th {
			width: 10em;
		}
	}
}

.olympic-wrap {
	background-color: #F4F4F5;
	padding: var(--m24-16);
	text-align: center;
	margin-top: var(--m32-16);
	border-radius: 8px;

	h5 {
		margin-bottom: var(--m24-16);
	}

	.player-wrap {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 16px 0;
	}
}

/* =========================================
* よくあるご質問
* ======================================== */
.faq-col {
	margin-bottom: var(--m40-24);
	display: flex;
	flex-direction: column;
	gap: 8px;

	&:last-child {
		margin-bottom: 0;
	}

	.q-col,
	.a-col {
		display: flex;
		align-items: center;
		gap: var(--m16-8);

		span {
			display: grid;
			place-items: center;
			line-height: var(--txt24-18);
			color: #fff;
			font-size: var(--txt24-18);
			font-weight: 600;
			min-width: 1.8em;
			aspect-ratio: 1/1;
			border-radius: 50%;
			padding: .2em;

			.q-col & {
				background-image: var(--ticket-gd);
			}

			.a-col & {
				background-image: var(--faq-gd);
			}
		}
	}
}

/* =========================================
* フッター
* ======================================== */
footer {
	background: var(--main-gd);
	padding: var(--m56-32) 0;

	.footer-container {
		color: #fff;
		font-weight: 700;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		text-align: left;

		.copyright-wrap {

			.icon-x {
				display: inline-block;

				&:hover {
					filter: brightness(110%);
				}
			}

			.copyright {
				font-size: var(--txt14-13);
			}
		}
	}
}

@media (max-width: 768px) {

	/* =========================================
* 共通パーツ
* ======================================== */

	/* 変数
* ---------------------------------- */
	:root {
		--header-height: 48px;
		--txt54-36: 36px;
		--txt40-24: 24px;
		--txt36-24: 24px;
		--txt32-24: 24px;
		--txt24-18: 18px;
		--txt20-18: 18px;
		--txt18-16: 16px;
		--txt16-14: 14px;
		--txt15-14: 15px;
		--txt14-13: 13px;
		--txt13-12: 12px;
		--m120-80: 80px;
		--m80-40: 40px;
		--m56-32: 32px;
		--m40-24: 24px;
		--m32-16: 16px;
		--m24-16: 16px;
		--m16-8: 8px;
	}

	/* =========================================
* 共通パーツ
* ======================================== */

	/* ボタン
* ---------------------------------- */
	.normal-btn {
		margin: 16px auto 0 auto;
	}


	/* アンカーリンク
* ---------------------------------- */
	.anchor-wrap {
		flex-direction: column;
		align-items: center;

		.anchor-col {
			width: 100%;
			max-width: 450px;
		}
	}

	/* =========================================
* ヘッダー
* ======================================== */
	header {
		padding-top: 0;
		display: grid;
		place-items: center;
		background: rgba(255, 255, 255, 0.9);

		.top-logo {
			width: 84%;
			max-width: 350px;
		}

		.header-contents {
			max-width: 96%;
			flex-direction: row;
			align-items: center;
			text-align: left;

			nav {
				display: block;
				position: fixed;
				z-index: 100;
				width: 92%;
				top: var(--header-height);
				height: auto;
				transition: right 0.3s ease-in-out;
				right: -100%;
				background: rgba(255, 255, 255, 0.95);
				margin-top: 4%;
				border-radius: 10px;
				box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
				color: var(--main-color);

				&.active {
					right: 4%;
				}

				ul {
					display: block;
					justify-content: space-between;

					li {
						padding: 1em 2em;
						border-bottom: var(--gray-color) dashed 1px;

						&:last-child {
							border-bottom: none;
						}

						&::after {
							right: 2em;
							border-top: 2px solid var(--main-color);
							border-right: 2px solid var(--main-color);
						}
					}
				}
			}
		}
	}




	/* ハンバーガー
	* ---------------------------------- */

	.burger {
		display: none;
	}


	/* ハンバーガー
* ---------------------------------- */

	/* --- 3本線を囲ってる正方形を囲ってる正方形 --- */
	.burger {
		position: absolute;
		cursor: pointer;
		display: grid;
		place-items: center;
		width: var(--header-height);
		height: var(--header-height);
		right: 0;
		top: 0;
		z-index: 100001;
		background: var(--main-gd);

		/* --- 3本線を囲ってる正方形(widthが3本線の長さになる) --- */

		.burger-wrap {
			width: 20px;
			height: 20px;
			position: relative;
			margin: auto;

			span {
				display: inline-block;
				transition: all 0.4s;
				height: 2px;
				width: 20px;
				background-color: #fff;
				position: absolute;

				&:nth-of-type(1) {
					top: 2px;

					.burger.active & {
						transform: translateY(20px) rotate(315deg);
						top: -12px;
					}
				}

				&:nth-of-type(2) {
					top: 9px;

					.burger.active & {
						opacity: 0;
					}
				}

				&:nth-of-type(3) {
					bottom: 2px;

					.burger.active & {
						transform: translateY(-20px) rotate(-315deg);
						bottom: -10px;
					}
				}
			}
		}
	}

	/* =========================================
* トップページ
* ======================================== */

	/* メインビジュアル
* ---------------------------------- */
	.mv-wrap {
		background-image: url(../imgs/mv_bg_sp.webp);
		aspect-ratio: 195 / 262;

		h1 {
			width: 90vw;
			clip-path: polygon(20% 0%,
					/* 上の左寄り */
					81% 0%,
					/* 上の右寄り */
					100% 15%,
					/* 右上 */
					100% 85%,
					/* 右下 */
					80% 100%,
					/* 下の右寄り */
					20% 100%,
					/* 下の左寄り */
					0% 85%,
					/* 左下 */
					0% 16%);

			img {
				width: 100%;
			}
		}
	}

	.top-skater01 {
		width: 49.1vw;
		top: -25vw;
	}

	.top-skater02 {
		width: 199.9vw;
		bottom: auto;
		top: 41vw;
		left: -16vw;

	}

	.top-skater03 {
		width: 95.5vw;
		top: auto;
		right: -16vw;
		bottom: -7vw;
	}

	.top-skater04 {
		width: 120.4vw;
		top: auto;
		right: 34vw;
		bottom: -26vw;
	}

	.top-skater05 {
		width: 74.4vw;
		bottom: -52vw;
		right: auto;
		left: -24vw;
	}


	.date-wrap {
		padding-top: 40px;

	}

	.online-wrap {
		text-align: center;
		padding-bottom: var(--m56-32);

		.online-txt {
			background-image: none;
			height: auto;
			padding: 00;
		}
	}





	/* お知らせ
* ---------------------------------- */
	.top-news-area {

		h2 {
			text-align: center;
			justify-content: center;


			&::before {
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.top-news-wrap {
			flex-direction: column;
			align-items: center;

			.top-news {
				width: 100%;
			}
		}
	}

	/* グラデーションのエリア
* ---------------------------------- */
	.gd-bg {

		.side-skater01,
		.side-skater02 {
			position: absolute;
			opacity: .5;
		}

		.side-skater01 {
			top: 9%;
		}

		.side-skater02 {
			top: 15%;
		}
	}

	/* =========================================
* フィギュアスケートフェスティバルとは
* ======================================== */
	.top-about-col {
		font-weight: 500;
	}

	.about-wrap {

		.about-col {
			flex-direction: column;
			font-weight: 500;
			margin-bottom: 24px;

			.about-img {
				width: 100%;
				min-height: auto;
				aspect-ratio: 2/1;
			}

			.about-txt {
				width: 100%;
			}

			&:nth-child(2) {
				flex-direction: column;
			}
		}
	}

	.about-img {
		border-radius: 7px;
	}


	/* swipevideo埋め込みここから */
	.swipevideo-wrap {
		/* コンテンツのオーバーフローを隠す */
		width: 100% !important;
		height: auto;
		aspect-ratio: inherit !important;
	}


	/* 開催概要
* ---------------------------------- */
	.overview-wrap {

		.overview-table {
			width: 90%;

			th,
			td {
				display: block;
				width: 100%;
				padding: .5em 0;
			}

			th {
				text-align: left;
			}

			td {
				border-bottom: none;
			}
		}

	}

	/* 協賛・協力
* ---------------------------------- */

	.support-wrap {
		flex-direction: column;

		.support-link {
			width: 100%;
			margin: auto;
		}
	}

	/* =========================================
	* 出場予定選手
	* ======================================== */

	.skater-area {

		.skater-contents {
			.skater-wrap {
				grid-template-columns: repeat(2, 1fr);

				.skater-col {
					border-radius: 5px;
				}
			}
		}
	}

	/* =========================================
* チケット・アクセス
* ======================================== */

	/* チケット情報
* ---------------------------------- */
	.price-list-wrap {
		gap: 16px;

		.price-list-col {
			&:first-child {
				h4 {
					margin: 0;
				}

				dl {
					padding-right: 0;
					border-right: none;
				}
			}

			&:nth-child(2) {
				h4 {
					margin: 0;
				}

				dl {
					padding-left: 0;
				}
			}
		}
	}

	/* =========================================
* オンライン配信
* ======================================== */
	/* --- subsub --- */

	#livestream .white-wrap {
		display: flex;
		flex-direction: column;
		gap: var(--m32-16);

		h4 {
			margin-bottom: var(--m24-16);
		}
	}

	/* オンライン配信解説者
* ---------------------------------- */
	.person-col {
		flex-direction: column;

		.person-img {
			width: 100%;
		}

		.person-plofile {
			width: 100%;
		}
	}


	/* =========================================
* イベント情報
* ======================================== */
	.event-mv {
		border-radius: 8px;
	}

	.event-wrap {
		.event-table {
			th {
				display: block;
				width: 100%;
			}

			td {
				display: block;
				width: 100%;
				padding: 0;
			}
		}
	}

	/* =========================================
* 過去の開催
* ======================================== */
	#topics .white-wrap {
		padding: 24px 16px;
	}

	.topics-table {

		th,
		td {
			display: block;
		}
	}

	/* =========================================
* よくあるご質問
* ======================================== */
	.faq-col {

		.q-col,
		.a-col {
			align-items: flex-start;
		}
	}

	/* =========================================
* フッター
* ======================================== */
	footer {
		.footer-container {
			display: block;

			.copyright-wrap {
				margin-top: 24px;
			}
		}
	}

}