/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hurricane&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Splash&display=swap');
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
:root {
	--default-font: "BIZ UDPGothic", "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--heading-font: "Raleway", sans-serif;
	--nav-font: "Poppins", sans-serif;
}
:root {
	--background-color: #1c2a54;
	--default-color: #fff;
	--heading-color: #124265;
	--accent-color: #2487ce;
	--surface-color: #fff;
	--contrast-color: #fff;
}
:root {
	--nav-color: #fff;
	--nav-hover-color: #2487ce;
	--nav-mobile-background-color: #1c2a54;
	--nav-dropdown-background-color: #1c2a54;
	--nav-dropdown-color: #fff;
	--nav-dropdown-hover-color: #eee;
}
.light-background {
	--background-color: rgba(255, 255, 255, 0.1);
	--surface-color: #fff;
}
.dark-background {
	--background-color: rgba(0, 0, 0, 0.43);
	--default-color: #fff;
	--heading-color: #fff;
	--surface-color: #252525;
	--contrast-color: #fff;
}
.accent-background {
	--background-color: #224196;
	--default-color: #fff;
	--heading-color: #fff;
	--accent-color: #fff;
	--surface-color: #469fdf;
	--contrast-color: #fff;
}
:root {
	scroll-behavior: smooth;
}
/*--------------------------------------------------------------

# 共通設定

--------------------------------------------------------------*/
body {
	color: var(--default-color);
	background-color: var(--background-color);
	font-family: var(--default-font);
}
p {
	line-height: 2;
}
a {
	color: var(--accent-color);
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	color: color-mix(in srgb, var(--accent-color), transparent 25%);
	text-decoration: none;
}
.center_center {
	position: absolute;
	left: calc(50% - 150px);
	top: calc(50% - 100px);
}
.link_btn a {
	position: relative;
	overflow: hidden;
	padding: .5rem 30% .5rem 0;
	border: 2px solid #000;
	display: grid;
	place-items: center;
}
.link_btn a:before {
	position: absolute;
	top: -25%;
	right: -10%;
	width: 25%;
	height: 400%;
	content: '';
	-webkit-transform: rotate(25deg);
	transform: rotate(25deg);
	background: #000;
}
.link_btn a span {
	font-size: 1em;
	position: absolute;
	z-index: 1;
	top: calc(50% - 1em);
	right: 0;
	display: block;
	padding-top: 3px;
	padding-left: 16px;
	color: #fff;
}
/*--------------------------------------------------------------

masonry card_design03

--------------------------------------------------------------*/
.item {
	display: block;
	width: 100%;
	margin-bottom: 3rem;
	img {
		width: 100%;
	}
}
/*--------------------------------------------------------------

# スケジュール（EXPO STAGE）

--------------------------------------------------------------*/
.container_timeline {
	width: 100%;
	padding: 0;
	margin: 10px auto;
	position: relative;
	overflow: hidden;
}
.container_timeline:before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 100%;
	background: #CCD1D9;
	z-index: 1
}
.timeline-block {
	width: -webkit-calc(50% + 8px);
	width: -moz-calc(50% + 8px);
	width: calc(50% + 8px);
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-moz-box-pack: justify;
	justify-content: space-between;
	clear: both;
}
.timeline-block-right {
	float: right;
}
.timeline-block-left {
	float: left;
	direction: rtl
}
.marker {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #F5F7FA;
	background: #4FC1E9;
	margin-top: 10px;
	z-index: 9
}
.timeline-content {
	width: 95%;
	padding: 0 15px;
	color: #fff;
}
.timeline-content h3 {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 1.5em;
	font-weight: 500
}
.timeline-content h3 span.small {
	font-size: 70%;
	color: #efefef;
	text-align: left;
}
.timeline-content span {
	font-size: 1em;
	color: #a4a4a4;
}
.timeline-content p {
	font-size: .8em;
	line-height: 1.5;
	word-spacing: 1px;
	color: #fff;
}
@media screen and (max-width: 768px) {
	.container_timeline {
		width: 90%;
	}
	.container_timeline:before {
		left: 8px;
		width: 2px;
	}
	.timeline-block {
		width: 100%;
		margin-bottom: 30px;
	}
	.timeline-block-right {
		float: none;
	}
	.timeline-block-left {
		float: none;
		direction: ltr;
	}
	.timeline-content h3 {
		font-size: 1.2em;
	}
}
/*--------------------------------------------------------------

# 背景

--------------------------------------------------------------*/
.bg_expo {
	background-color: firebrick;
}
.bg_tokyo {
	background-color: yellowgreen;
}
.bg_kansai {
	background-color: orange;
}
.bg_white10 {
	background-color: rgba(0, 0, 0, .2);
}
.bg_stripes {
	background: var(--background-color);
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 3px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 11px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 23px, transparent 0);
	background-size: 11px 100%, 21px 100%, 33px 100%;
	background-clip: content-box;
}
.bg_checkerboard {
	background-color: var(--background-color);
	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2)), linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2));
	background-size: 50px 50px;
	background-position: 0 0, 25px 25px;
}
.bg_tartan {
	background-color: var(--background-color);
	background-image: repeating-linear-gradient(transparent, transparent 30px, rgba(0, 0, 0, 0.4) 30px, rgba(0, 0, 0, 0.4) 32px, transparent 32px, transparent 37px, rgba(0, 0, 0, 0.4) 37px, rgba(0, 0, 0, 0.4) 39px, transparent 39px, transparent 69px, rgba(0, 0, 0, 0.4) 69px, rgba(0, 0, 0, 0.4) 99px, rgba(255, 255, 255, 0.2) 99px, rgba(255, 255, 255, 0.2) 101px, rgba(0, 0, 0, 0.4) 101px, rgba(0, 0, 0, 0.4) 106px, rgba(255, 255, 255, 0.2) 106px, rgba(255, 255, 255, 0.2) 108px, rgba(0, 0, 0, 0.4) 108px, rgba(0, 0, 0, 0.4) 138px, transparent 138px), repeating-linear-gradient(270deg, transparent, transparent 30px, rgba(0, 0, 0, 0.4) 30px, rgba(0, 0, 0, 0.4) 32px, transparent 32px, transparent 37px, rgba(0, 0, 0, 0.4) 37px, rgba(0, 0, 0, 0.4) 39px, transparent 39px, transparent 69px, rgba(0, 0, 0, 0.4) 69px, rgba(0, 0, 0, 0.4) 99px, rgba(255, 255, 255, 0.2) 99px, rgba(255, 255, 255, 0.2) 101px, rgba(0, 0, 0, 0.4) 101px, rgba(0, 0, 0, 0.4) 106px, rgba(255, 255, 255, 0.2) 106px, rgba(255, 255, 255, 0.2) 108px, rgba(0, 0, 0, 0.4) 108px, rgba(0, 0, 0, 0.4) 138px, transparent 138px), repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.2) 5px);
}
.bg_mm {
	background-color: var(--background-color);
	background-image: url("../img/bg_mm.png");
	background-repeat: repeat;
	background-position: center top;
	background-size: contain;
}
/*--------------------------------------------------------------

# 文字色・装飾

--------------------------------------------------------------*/
.text_expo {
	olor: firebrick;
}
.text_tokyo {
	color: yellowgreen;
}
.text_kansai {
	color: orange;
}
.text_small {
	font-size: 65%;
}
/* -- Google フォント指定 -- */
.birthstone-regular {
	font-family: "Birthstone", cursive;
	font-weight: 400;
	font-style: normal;
}
.hurricane-regular {
	font-family: "Hurricane", cursive;
	font-weight: 400;
	font-style: normal;
}
.splash-regular {
	font-family: "Splash", cursive;
	font-weight: 400;
	font-style: normal;
}
/* --文字装飾エフェクト -- */
.bgText {
	width: 100%;
	height: 300px;
	font-size: 80px;
	ffont-family: var(--nav-font);
	font-weight: 900;
	color: transparent;
	-webkit-background-clip: text;
	background-size: cover;
	background-image: url(https://webparts.cman.jp/image/shizen550.jpg);
	animation: bgAnime 15s linear infinite;
}
@keyframes bgAnime { /* スクロール */
	0% {
		background-position: 0 0
	}
	100% {
		background-position: 600px 0px
	}
}
/* -- 画像文字切り抜き -- */
.image-area {
	position: relative;
	display: flex;
	justify-content: end;
	place-items: center;
	width: 100% !important;
	min-height: 338px;
	background-image: url(../img/image_bg01.jpg);
	background-size: cover;
	background-position: left center;
	overflow: hidden;
	z-index: 0;
}
.image-area::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(90deg, rgba(28, 42, 84, .9) 0 50%, rgba(251, 253, 255, .3) 0 50%);
	content: '';
	z-index: -1;
}
.title {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 100%;
	height: 100%;
	background: inherit;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-size: 3em;
	font-weight: bold;
	line-height: 1.1;
}
/*--------------------------------------------------------------

# レスポンシブテーブルデザイン

--------------------------------------------------------------*/
.tbl-r01 table {
	font-size: .8em;
	width: 100%;
}
.tbl-r01 th {
	color: #fff;
	padding: 3px 8px 3px 0;
	white-space: nowrap;
	font-size: .8em;
	vertical-align: top;
}
.tbl-r01 td {
	padding: 3px 8px 3px 0;
	font-size: .8em;
	line-height: 1.6;
	vertical-align: top;
}
@media screen and (max-width: 380px) {
	.last td:last-child {
		width: 100%;
	}
	.tbl-r01 {
		width: 80%;
	}
	.tbl-r01 th, .tbl-r01 td {
		display: block;
		width: 100%;
	}
}
/* -- 装飾付き -- */
.tbl-r02 table {
	font-size: .8em;
	width: 100%;
}
.tbl-r02 th {
	background-color: rgba(0, 0, 0, 0.43);
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	color: #fff;
	padding: 10px;
	white-space: nowrap;
	font-size: .8em;
}
.tbl-r02 td {
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	padding: 10px;
	font-size: .8em;
	line-height: 2;
}
@media screen and (max-width: 640px) {
	.tbl-r02 .last td:last-child {
		border-bottom: solid 1px #ccc;
		width: 100%;
	}
	.tbl-r02 {
		width: 80%;
	}
	.tbl-r02 th, .tbl-r02 td {
		border-bottom: none;
		display: block;
		width: 100%;
	}
}
/*--------------------------------------------------------------

# 見出しデザイン

--------------------------------------------------------------*/
/* -- 見出し00 -- */
.midashi_design00 {
	text-align: center;
	margin: 2rem 0 .5rem;
	padding-bottom: 60px;
	position: relative;
}
.midashi_design00 h2 {
	padding: 0.5rem 0 1rem;
	margin: 0 0 .5rem;
	background: linear-gradient(90deg, #00f 0% 33%, #fff 33% 66%, #f00 66%);
	background-repeat: no-repeat;
	background-size: 15% 0.2rem;
	background-position: bottom;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
.midashi_design00 p {
	margin-bottom: 0;
}
/* -- 見出し01 -- */
.midashi_design01 {
	padding: 0.5rem 0 1rem;
	margin-bottom: 2.5rem;
	background: linear-gradient(90deg, #00f 0% 33%, #fff 33% 66%, #f00 66%);
	background-repeat: no-repeat;
	background-size: 50% 0.2rem;
	background-position: bottom;
	font-weight: bold;
	text-align: center;
}
/* -- 見出し02 -- */
.midashi_design02 {
	position: relative;
	margin: 1rem 0;
	padding: 15px;
	border-radius: 5px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.midashi_design02:before {
	position: absolute;
	top: 90%;
	left: 50%;
	transform: traslateX(-50%) rotate(-20deg);
	border-left: 5px dotted #fff;
	height: 20px;
	content: "";
}
/* -- 見出し03 -- */
.midashi_design03 {
	position: relative;
	padding: 50px 0;
	text-align: center;
}
.midashi_design03::before {
	content: attr(data-en);
	display: block;
	color: #fff;
	margin-bottom: .7em;
	font-size: 1em;
	font-style: italic;
	text-transform: uppercase;
}
/* -- 見出し04 -- */
.midashi_design04 {
	position: relative;
	padding: 1rem 1.5rem;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
.midashi_design04::before, .midashi_design04::after {
	position: absolute;
	width: 20px;
	height: 30px;
	content: '';
}
.midashi_design04::before {
	border-left: solid 3px;
	border-top: solid 3px;
	border-radius: 5px 0 0 0;
	top: 0;
	left: 0;
}
.midashi_design04::after {
	border-right: solid 3px;
	border-bottom: solid 3px;
	border-radius: 0 0 5px 0;
	bottom: 0;
	right: 0;
}
.midashi_design05 {
	position: relative;
	padding: 0 1rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
}
.midashi_design05:before, .midashi_design05:after {
	position: absolute;
	top: 48%;
	width: 3rem;
	height: 0.1rem;
	background-color: #2a2a72;
	background-color: #fff;
	content: '';
}
.midashi_design05:before {
	left: 0rem;
}
.midashi_design05:after {
	right: 0rem;
}
/*--------------------------------------------------------------

# リストスタイル

--------------------------------------------------------------*/
.list_style01 ul {
	list-style: none;
	padding: 0;
}
.list_style01 ul li {
	padding-bottom: 5px;
	display: flex;
	align-items: center;
	line-height: 2;
}
.list_style01 ul i {
	font-size: 20px;
	padding-right: 4px;
	color: var(--accent-color);
}
.listnum_style01 ol {
	counter-reset: number;
	list-style-type: none !important;
	padding: 0.3em 0.8em;
	border: solid 2px var(--accent-color);
}
.listnum_style01 ol li {
	border-bottom: dashed 1px orange;
	position: relative;
	padding: 0.5em 0.5em 0.5em 30px;
	line-height: 1.5em;
}
.listnum_style01 ol li:before {
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	display: inline-block;
	background: var(--accent-color);
	color: #fff;
	font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
	font-weight: bold;
	font-size: 15px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.listnum_style01 ol li:last-of-type {
	border-bottom: none; /*最後のliの線だけ消す*/
}
/*--------------------------------------------------------------

# カードデザイン

--------------------------------------------------------------*/
.card_design01 {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	color: #fff;
	display: inline-block;
	margin: 0;
	position: relative;
	text-align: center;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 5px;
	border-top: 5px solid var(--accent-color);
	border-bottom: 5px solid var(--accent-color);
	border-radius: .5em;
}
.card_design01 *, .card_design01 *:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}
.card_design01 figcaption {
	padding: 13% 1% 12%;
}
.card_design01 figcaption:before {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	color: var(--accent-color);
	content: "\f1ad";
	font-family: 'FontAwesome';
	font-size: 32px;
	font-style: normal;
	left: 50%;
	line-height: 60px;
	position: absolute;
	top: -30px;
	width: 60px;
}
.card_design01 h3 {
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.75;
	margin: 1em 0;
}
.card_design01 h3 span {
	font-size: 90%;
}
.card_design01 blockquote {
	font-style: italic;
	font-weight: 300;
	margin: 0 0 20px;
}
/* -- アーティストカード -- */
.card_design02 {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	color: #9e9e9e;
	margin: 10px;
	position: relative;
	text-align: center;
	width: 100%;
	background-color: #ffffff;
	border-radius: 5px;
	border-top: 5px solid #000;
}
.card_design02 *, .card_design02 *:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
.card_design02 img {
	max-width: 100%;
	vertical-align: top;
}
.card_design02 figcaption {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.card_design02 h3 {
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	line-height: 26px;
	background-color: var(--accent-color);
	;
	margin: 0;
	padding: 10px 0;
}
.card_design02 i {
	font-size: 60px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	opacity: 0;
	color: var(--accent-color);
	;
}
.card_design02 a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.card_design02:hover img, .card_design02.hover img {
	opacity: 0.2;
}
.card_design02:hover i, .card_design02.hover i {
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 1;
}
/* -- card -- */
.card_design03 {
	position: relative;
	clear: both;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}
/* Common style */
.card_design03 figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0;
	width: 100%;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}
.card_design03 figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}
.card_design03 figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.card_design03 figure figcaption::before, .card_design03 figure figcaption::after {
	pointer-events: none;
}
.card_design03 figure figcaption, .card_design03 figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.card_design03 figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}
.card_design03 figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}
.card_design03 figure h2 span {
	font-weight: 800;
}
.card_design03 figure h2, .card_design03 figure p {
	margin: 0;
}
.card_design03 figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
figure.effect-julia {
	background: #2f3238;
}
figure.effect-julia img {
	width: 100%;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
figure.effect-julia figcaption {
	text-align: left;
	opacity: 1;
}
figure.effect-julia h2 {
	position: absolute;
	padding: 0.5em 0;
	bottom: 40px;
	font-size: 1.2em;
}
figure.effect-julia p {
	position: absolute;
	bottom: 10px;
	display: inline-block;
	margin: 0 0 0.25em;
	padding: 0.2em 1em;
	background: rgba(255, 255, 255, 0.9);
	color: #2f3238;
	text-transform: none;
	font-weight: 500;
	font-size: 75%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-360px, 0, 0);
	transform: translate3d(-360px, 0, 0);
}
figure.effect-julia p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}
figure.effect-julia p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
figure.effect-julia p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}
figure.effect-julia:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
figure.effect-julia:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}
figure.effect-julia:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
figure.effect-julia:hover img {
	opacity: 0.4;
	-webkit-transform: scale3d(1.1, 1.1, 1);
	transform: scale3d(1.1, 1.1, 1);
}
figure.effect-julia:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
/* -- アーカイブ用 --*/
.card_design04 {
	font-family: 'Raleway', Arial, sans-serif;
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin: 0px;
	width: 100%;
	color: #333;
	text-align: left;
	font-size: 1em;
	background: #fff;
}
.card_design04 *, .card_design04:before, .card_design04:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.card_design04 img {
	max-width: 100%;
	backface-visibility: hidden;
	vertical-align: top;
}
.card_design04:before, .card_design04:after {
	content: '';
	background-color: #000;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	opacity: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.card_design04:before {
	width: 300px;
	height: 2px;
}
.card_design04:after {
	height: 300px;
	width: 2px;
}
.card_design04 figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
}
.card_design04 h3 {
	font-weight: 400;
	padding: 8px 15px;
	margin: 0;
	opacity: 0;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	font-size: 1.1em;
}
.card_design04 a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
.card_design04:hover img, .card_design04.hover img {
	zoom: 1;
	filter: alpha(opacity=25);
	-webkit-opacity: 0.25;
	opacity: 0.25;
}
.card_design04:hover:before, .card_design04.hover:before, .card_design04:hover:after, .card_design04.hover:after {
	opacity: 1;
}
.card_design04:hover:before, .card_design04.hover:before {
	width: 50px;
}
.card_design04:hover:after, .card_design04.hover:after {
	height: 50px;
}
.card_design04:hover h3, .card_design04.hover h3 {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
	opacity: 1;
}
/* -- フリップカード -- */
figure.card_design05 {
	position: relative;
	overflow: hidden;
	margin: 1em 0px;
	width: 100%;
	color: #fff;
	text-align: center;
	background-color: #000;
}
figure.card_design05 *, figure.card_design05 *:before, figure.card_design05 *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.55s ease;
	transition: all 0.55s ease;
}
figure.card_design05 img {
	max-width: 100%;
	backface-visibility: hidden;
	vertical-align: top;
	opacity: 0.9;
}
figure.card_design05 .title {
	position: absolute;
	top: 60%;
	left: 35px;
	padding: 5px 0px 10px;
}
figure.card_design05 .title:before, figure.card_design05 .title:after {
	height: 2px;
	width: 400px;
	position: absolute;
	content: '';
	background-color: #fff;
}
figure.card_design05 .title:before {
	top: 0;
	left: 10px;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
figure.card_design05 .title:after {
	bottom: 0;
	right: 10px;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
figure.card_design05 .title div:before, figure.card_design05 .title div:after {
	width: 2px;
	height: 200px;
	position: absolute;
	content: '';
	background-color: #fff;
}
figure.card_design05 .title div:before {
	top: 10px;
	right: 0;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}
figure.card_design05 .title div:after {
	bottom: 10px;
	left: 0;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}
figure.card_design05 h2, figure.card_design05 h4 {
	margin: 0;
}
figure.card_design05 h2 {
	font-size: 15px;
	font-weight: bold;
	color: #fff;
}
figure.card_design05 h4 {
	display: block;
	font-size: .25em;
	font-weight: 700;
	background-color: rgba(255, 255, 255, 0.75);
	padding: 5px 10px;
	color: #000;
}
figure.card_design05 figcaption {
	position: absolute;
	bottom: 40%;
	left: 15px;
	text-align: left;
	opacity: 0;
	padding: 5px 20px 5px 10px;
	font-size: 0.7em;
	font-weight: 500;
	letter-spacing: 1.5px;
}
figure.card_design05 figcaption p {
	margin: 0;
}
figure.card_design05 a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
figure.card_design05:hover img, figure.card_design05.hover img {
	zoom: 1;
	filter: alpha(opacity=35);
	-webkit-opacity: 0.35;
	opacity: 0.35;
}
figure.card_design05:hover .title:before, figure.card_design05.hover .title:before, figure.card_design05:hover .title:after, figure.card_design05.hover .title:after, figure.card_design05:hover .title div:before, figure.card_design05.hover .title div:before, figure.card_design05:hover .title div:after, figure.card_design05.hover .title div:after {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
figure.card_design05:hover .title:before, figure.card_design05.hover .title:before, figure.card_design05:hover .title:after, figure.card_design05.hover .title:after {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}
figure.card_design05:hover figcaption, figure.card_design05.hover figcaption {
	opacity: 1;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
/* -- オーバーレイ  -- */
.slide_card_container {
	flex: 100%;
	margin: 20px;
}
.slide_card_container .slide_card {
	font-weight: bold;
	position: relative;
	width: 100%;
}
.slide_card_container .slide_card a {
	padding: 30px;
	width: 100%;
	height: 200px;
	border: 2px solid white;
	background: none;
	text-decoration: none;
	color: white;
	display: block;
	transition: 0.25s ease;
}
.slide_card_container .slide_card a:hover {
	transform: translate(-10px, -10px);
	border-color: #fff;
}
.slide_card_container .slide_card a:hover .card--display {
	display: none;
}
.slide_card_container .slide_card a:hover .card--hover {
	display: block;
}
.slide_card_container .slide_card a .card--display i {
	font-size: 1em;
	margin-top: 10px;
}
.slide_card_container .slide_card a .card--display h2 {
	margin: 10px 0 0;
	font-size: 1.2em;
}
.slide_card_container .slide_card a .card--hover {
	display: none;
}
.slide_card_container .slide_card a .card--hover h2 {
	margin: 20px 0;
}
.slide_card_container .slide_card a .card--hover p {
	font-weight: normal;
	line-height: 1.5;
}
.slide_card_container .slide_card a .card--hover p.link {
	margin: 20px 0 0;
	font-weight: bold;
	color: #5bc0eb;
}
.slide_card_container .slide_card .card--border {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border: 2px dashed rgba(255, 255, 255, .6);
	z-index: -1;
}
.slide_card_container .slide_card.card--dark a {
	color: white;
	background-color: black;
	border-color: black;
}
.slide_card_container .slide_card.card--dark a .card--hover .link {
	color: #fde74c;
}
/*--------------------------------------------------------------

# ボタンスタイル

--------------------------------------------------------------*/
.btn_design01 {
	background: var(--accent-color);
	color: var(--contrast-color);
	font-family: var(--heading-font);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	padding: 10px 28px;
	border-radius: 5px;
	transition: 0.3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.btn_design01 i {
	font-size: 18px;
	margin-left: 5px;
	line-height: 0;
	transition: 0.3s;
}
.btn_design01:hover {
	background: color-mix(in srgb, #fff, transparent 80%);
}
.btn_design01:hover i {
	transform: translate(5px, 0);
}
/*--------------------------------------------------------------

# 動画再生ボタン

--------------------------------------------------------------*/
.pulsating-play-btn {
	width: 94px;
	height: 94px;
	background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
	border-radius: 50%;
	display: block;
	position: relative;
	overflow: hidden;
}
.pulsating-play-btn:before {
	content: "";
	position: absolute;
	width: 120px;
	height: 120px;
	animation-delay: 0s;
	animation: pulsate-play-btn 2s;
	animation-direction: forwards;
	animation-iteration-count: infinite;
	animation-timing-function: steps;
	opacity: 1;
	border-radius: 50%;
	border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
	top: -15%;
	left: -15%;
	background: rgba(198, 16, 0, 0);
}
.pulsating-play-btn:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-40%) translateY(-50%);
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	z-index: 100;
	transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.pulsating-play-btn:hover:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-40%) translateY(-50%);
	width: 0;
	height: 0;
	border: none;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	z-index: 200;
	animation: none;
	border-radius: 0;
}
.pulsating-play-btn:hover:after {
	border-left: 15px solid var(--accent-color);
	transform: scale(20);
}
@keyframes pulsate-play-btn {
	0% {
		transform: scale(0.6, 0.6);
		opacity: 1;
	}
	100% {
		transform: scale(1, 1);
		opacity: 0;
	}
}
/*--------------------------------------------------------------

# ヘッダー設定

--------------------------------------------------------------*/
.header {
	color: var(--default-color);
	background-color: var(--background-color);
	padding: 20px 0;
	transition: all 0.5s;
	z-index: 997;
	border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}
.header .logo {
	line-height: 1;
}
.header .logo img {
	max-height: 36px;
	margin-right: 8px;
}
.header .logo h1 {
	font-size: 2.4em;
	margin: 0;
	font-weight: 300;
	color: var(--default-color);
}
.header .btn-basic, .header .btn-basic:focus {
	color: var(--contrast-color);
	background: var(--accent-color);
	font-size: 14px;
	padding: 8px 25px;
	margin: 0 0 0 30px;
	border-radius: 4px;
	transition: 0.3s;
}
.header .btn-basic:hover, .header .btn-basic:focus:hover {
	color: var(--contrast-color);
	background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
@media (max-width: 1200px) {
	.header .logo {
		order: 1;
	}
	.header .logo h1 {
		font-size: 1.4em;
	}
	.header .btn-basic {
		order: 2;
		margin: 0 15px 0 0;
		padding: 6px 15px;
	}
	.header .navmenu {
		order: 3;
	}
}
.scrolled .header {
	border-color: var(--contrast-color);
	box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}
.icon_heading {
	display: inline-block;
}
.icon_heading::before {
	content: "";
	display: inline-block;
	width: 120px; /* 画像の幅 */
	height: 75px; /* 画像の高さ */
	background-image: url("../img/fm_logo01.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align: middle;
	margin-right: 10px;
}
@media (max-width: 1200px) {
	.icon_heading::before {
		width: 60px; /* 画像の幅 */
		height: 37px; /* 画像の高さ */
	}
}
/*--------------------------------------------------------------

# ナビゲーション設定

--------------------------------------------------------------*/
/* -- PC用 -- */
@media (min-width: 1098px) {
	.navmenu {
		padding: 0;
	}
	.navmenu ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;
	}
	.navmenu li {
		position: relative;
	}
	.navmenu a, .navmenu a:focus {
		color: var(--nav-color);
		padding: 18px 15px;
		font-size: 1em;
		font-family: var(--nav-font);
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: 0.3s;
	}
	.navmenu a i, .navmenu a:focus i {
		font-size: 12px;
		line-height: 0;
		margin-left: 5px;
		transition: 0.3s;
	}
	.navmenu li:last-child a {
		padding-right: 0;
	}
	.navmenu li:hover > a, .navmenu .active, .navmenu .active:focus {
		color: var(--nav-hover-color);
	}
	.navmenu .dropdown ul {
		margin: 0;
		padding: 10px 0;
		background: var(--nav-dropdown-background-color);
		display: block;
		position: absolute;
		visibility: hidden;
		left: 14px;
		top: 130%;
		opacity: 0;
		transition: 0.3s;
		border-radius: 4px;
		z-index: 99;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	}
	.navmenu .dropdown ul li {
		min-width: 200px;
	}
	.navmenu .dropdown ul a {
		padding: 10px 20px;
		font-size: 15px;
		text-transform: none;
		color: var(--nav-dropdown-color);
	}
	.navmenu .dropdown ul a i {
		font-size: 12px;
	}
	.navmenu .dropdown ul a:hover, .navmenu .dropdown ul .active:hover, .navmenu .dropdown ul li:hover > a {
		color: var(--nav-dropdown-hover-color);
	}
	.navmenu .dropdown:hover > ul {
		opacity: 1;
		top: 100%;
		visibility: visible;
	}
	.navmenu .dropdown .dropdown ul {
		top: 0;
		left: -90%;
		visibility: hidden;
	}
	.navmenu .dropdown .dropdown:hover > ul {
		opacity: 1;
		top: 0;
		left: -100%;
		visibility: visible;
	}
}
/* モバイル用 */
@media (max-width: 1199px) {
	.mobile-nav-toggle {
		color: var(--nav-color);
		font-size: 2em;
		line-height: 0;
		margin-right: 10px;
		cursor: pointer;
		transition: color 0.3s;
	}
	.navmenu {
		padding: 0;
		z-index: 9997;
	}
	.navmenu ul {
		display: none;
		list-style: none;
		position: absolute;
		inset: 60px 20px 20px 20px;
		padding: 10px 0;
		margin: 0;
		border-radius: 6px;
		background-color: var(--nav-mobile-background-color);
		overflow-y: auto;
		transition: 0.3s;
		z-index: 9998;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	}
	.navmenu a, .navmenu a:focus {
		color: var(--nav-dropdown-color);
		padding: 10px 20px;
		font-family: var(--nav-font);
		font-size: 1em;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: 0.3s;
	}
	.navmenu a i, .navmenu a:focus i {
		font-size: .9em;
		line-height: 0;
		margin-left: 5px;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: 0.3s;
		background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
	}
	.navmenu a i:hover, .navmenu a:focus i:hover {
		background-color: var(--accent-color);
		color: var(--contrast-color);
	}
	.navmenu a:hover, .navmenu .active, .navmenu .active:focus {
		color: var(--nav-dropdown-hover-color);
	}
	.navmenu .active i, .navmenu .active:focus i {
		background-color: var(--accent-color);
		color: var(--contrast-color);
		transform: rotate(180deg);
	}
	.navmenu .dropdown ul {
		position: static;
		display: none;
		z-index: 99;
		padding: 10px 0;
		margin: 10px 20px;
		background-color: var(--nav-dropdown-background-color);
		border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
		box-shadow: none;
		transition: all 0.5s ease-in-out;
	}
	.navmenu .dropdown ul ul {
		background-color: rgba(33, 37, 41, 0.1);
	}
	.navmenu .dropdown > .dropdown-active {
		display: block;
		background-color: rgba(33, 37, 41, 0.03);
	}
	.mobile-nav-active {
		overflow: hidden;
	}
	.mobile-nav-active .mobile-nav-toggle {
		color: #fff;
		position: absolute;
		font-size: 32px;
		top: 15px;
		right: 15px;
		margin-right: 0;
		z-index: 9999;
	}
	.mobile-nav-active .navmenu {
		position: fixed;
		overflow: hidden;
		inset: 0;
		background: rgba(33, 37, 41, 0.8);
		transition: 0.3s;
	}
	.mobile-nav-active .navmenu > ul {
		display: block;
	}
}
/*--------------------------------------------------------------

# フッター設定

--------------------------------------------------------------*/
.footer {
	color: var(--default-color);
	background-color: var(--background-color);
	border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
	font-size: .9em;
	padding-bottom: 50px;
	position: relative;
}
.footer .footer-top {
	padding-top: 50px;
}
.footer .footer-about .logo {
	line-height: 1;
	margin-bottom: 25px;
}
.footer .footer-about .logo img {
	max-height: 40px;
	margin-right: 6px;
}
.footer .footer-about .logo span {
	color: var(--heading-color);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 1px;
	font-family: var(--heading-font);
}
.footer .footer-about p {
	font-size: 14px;
	font-family: var(--heading-font);
}
.footer .social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	border: 1px solid color-mix(in srgb, var(--accent-color), transparent 50%);
	font-size: 16px;
	color: var(--accent-color);
	margin-right: 10px;
	transition: 0.3s;
}
.footer .social-links a:hover {
	background-color: var(--accent-color);
	color: var(--contrast-color);
	border-color: var(--accent-color);
}
.footer h4 {
	font-size: 16px;
	font-weight: bold;
	position: relative;
	padding-bottom: 12px;
}
.footer .footer-links {
	margin-bottom: 30px;
}
.footer .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer .footer-links ul i {
	padding-right: 2px;
	font-size: 12px;
	line-height: 0;
}
.footer .footer-links ul li {
	padding: 10px 0;
	display: flex;
	align-items: center;
}
.footer .footer-links ul li:first-child {
	padding-top: 0;
}
.footer .footer-links ul a {
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	display: inline-block;
	line-height: 1;
}
.footer .footer-links ul a:hover {
	color: var(--accent-color);
}
.footer .footer-contact p {
	margin-bottom: 5px;
}
.footer .copyright {
	padding-top: 25px;
	padding-bottom: 25px;
	background-color: none;
	color: var(--contrast-color);
}
.footer .copyright p {
	margin-bottom: 0;
}
.footer .credits {
	margin-top: 4px;
	font-size: 13px;
}
.footer .credits a {
	color: color-mix(in srgb, var(--contrast-color), transparent 30%);
}
/*--------------------------------------------------------------

# プレローダー

--------------------------------------------------------------*/
#preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	overflow: hidden;
	background: var(--background-color);
	transition: all 0.6s ease-out;
}
#preloader:before {
	content: "";
	position: fixed;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	border: 6px solid #fff;
	border-color: var(--accent-color) transparent var(--accent-color) transparent;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: animate-preloader 1.5s linear infinite;
}
@keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/*--------------------------------------------------------------

# トップへ戻るボタン

--------------------------------------------------------------*/
.scroll-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 99999;
	background-color: var(--accent-color);
	width: 40px;
	height: 40px;
	border-radius: 4px;
	transition: all 0.4s;
}
.scroll-top i {
	font-size: 24px;
	color: var(--contrast-color);
	line-height: 0;
}
.scroll-top:hover {
	background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
	color: var(--contrast-color);
}
.scroll-top.active {
	visibility: visible;
	opacity: 1;
}
/*--------------------------------------------------------------

# Disable aos animation delay on mobile devices

--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	[data-aos-delay] {
		transition-delay: 0 !important;
	}
}
/*--------------------------------------------------------------

# Heroセクション

--------------------------------------------------------------*/
.hero {
	width: 100%;
	min-height: calc(100vh - 100px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: -100px 0 60px 0;
	overflow: hidden;
}
.hero:before {
	content: "";
	background: color-mix(in srgb, var(--background-color), transparent 30%);
	position: absolute;
	inset: 0;
	z-index: 2;
}
.hero .container {
	position: relative;
	z-index: 3;
}
.hero h1 {
	margin: 0;
	font-size: 56px;
	font-weight: 700;
	line-height: 72px;
	color: white;
}
.hero p {
	margin: 10px 0 0 0;
	font-size: 22px;
	color: color-mix(in srgb, var(--default-color), transparent 30%);
}
@media (max-width: 992px) {
	.hero h1 {
		font-size: 28px;
		line-height: 36px;
	}
	.hero p {
		font-size: 18px;
		line-height: 24px;
	}
}
.hero .btn-get-started {
	color: var(--contrast-color);
	background: var(--accent-color);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.5px;
	display: inline-block;
	padding: 14px 50px;
	border-radius: 5px;
	transition: 0.5s;
	margin-top: 30px;
}
.hero .btn-get-started:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
.hero .icon-box {
	background-color: var(--surface-color);
	padding: 50px 30px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease-in-out;
	border-radius: 8px;
	z-index: 1;
	height: 100%;
	width: 100%;
}
.hero .icon-box .title {
	font-weight: 700;
	margin-bottom: 15px;
	font-size: 18px;
}
.hero .icon-box .title a {
	color: var(--heading-color);
	transition: 0.3s;
}
.hero .icon-box .description {
	font-size: 15px;
	margin-bottom: 0;
	color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.hero .icon-box .icon {
	margin-bottom: 20px;
	padding-top: 10px;
	display: inline-block;
	transition: all 0.3s ease-in-out;
	font-size: 36px;
	line-height: 1;
	color: var(--accent-color);
}
@media (min-width: 640px) {
	.hero .icon-box:hover {
		transform: scale(1.08);
	}
	.hero .icon-box:hover .title a {
		color: var(--accent-color);
	}
}
/*--------------------------------------------------------------

# 下層ページヘッダー（パンくず）

--------------------------------------------------------------*/
.page-title {
	color: #fff;
	background-color: var(--background-color);
	padding: 20px 0;
	text-align: center;
	position: relative;
}
.page-title h1 {
	font-size: 2em;
	font-weight: 700;
	margin-bottom: 10px;
}
.page-title .breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	justify-content: center;
	padding: 0;
	margin: 0;
	font-size: 1em;
	font-weight: 400;
}
.page-title .breadcrumbs ol a {
	color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.page-title .breadcrumbs ol li + li {
	padding-left: 10px;
}
.page-title .breadcrumbs ol li + li::before {
	content: "/";
	display: inline-block;
	padding-right: 10px;
	color: color-mix(in srgb, var(--default-color), transparent 70%);
}
/*--------------------------------------------------------------

# セクション設定

--------------------------------------------------------------*/
section, .section {
	color: var(--default-color);
	background-color: var(--background-color);
	margin: 0;
	padding: 60px 0;
	scroll-margin-top: 100px;
	overflow: clip;
}
@media (max-width: 1199px) {
	section, .section {
		scroll-margin-top: 76px;
	}
}
/* -- スクロール -- */
.scroll_container {
	position: relative;
	width: 24px;
	height: 24px;
}
.chevron {
	position: absolute;
	width: 28px;
	height: 4px;
	opacity: 0;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
}
.chevron:first-child {
	animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
	animation: move 3s ease-out 2s infinite;
}
.chevron:before, .chevron:after {
	content: ' ';
	position: absolute;
	top: 0;
	height: 100%;
	width: 51%;
	background: #fff;
}
.chevron:before {
	left: 0;
	transform: skew(0deg, 30deg);
}
.chevron:after {
	right: 0;
	width: 50%;
	transform: skew(0deg, -30deg);
}
@keyframes move {
	25% {
		opacity: 0;
	}
	33% {
		opacity: .5;
		transform: translateY(30px);
	}
	67% {
		opacity: 1;
		transform: translateY(40px);
	}
	100% {
		opacity: 0;
		transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
	}
}
.text {
	display: block;
	margin: 55px 0 50px -15px;
	text-align: center;
	font-size: .8em;
	color: #fff;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: .05;
	animation: pulse 2s linear alternate infinite;
}
@keyframes pulse {
	to {
		opacity: 1;
	}
}
/*--------------------------------------------------------------

# スケジュールタイムライン

--------------------------------------------------------------*/
.timeline_area {
	position: relative;
	z-index: 1;
}
.single-timeline-area {
	position: relative;
	z-index: 1;
	padding-left: 10%;
}
@media only screen and (max-width: 575px) {
	.single-timeline-area {
		padding-left: 20%;
	}
}
.single-timeline-area .timeline-date {
	position: absolute;
	width: 10%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: top;
	justify-content: flex-end;
	padding-right: 50px;
}
@media only screen and (max-width: 575px) {
	.single-timeline-area .timeline-date {
		width: 20%;
	}
}
.single-timeline-area .timeline-date::after {
	position: absolute;
	width: 3px;
	height: 100%;
	content: "";
	background-color: #fff;
	top: 0;
	right: 30px;
	z-index: 1;
}
.single-timeline-area .timeline-date::before {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #f1c40f;
	content: "";
	top: 0%;
	right: 22px;
	z-index: 5;
	margin-top: -10px;
}
.single-timeline-area .timeline-date p {
	margin-top: -1.5em;
	color: #fff;
	font-size: 1.2em;
	font-weight: 700;
	font-family: var(--nav-font);
	text-align: center;
	line-height: 1;
}
.single-timeline-area .timeline-date span.large {
	font-size: 1.6em;
	font-weight: 700;
	font-family: var(--nav-font);
}
.single-timeline-area .single-timeline-content {
	position: relative;
	z-index: 1;
	padding: 20px 10px 25px;
	border-radius: 12px;
	margin-bottom: 15px;
	margin-top: 15px;
	-webkit-box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
	box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
	border: 1px solid #ebebeb;
}
@media only screen and (max-width: 575px) {
	.single-timeline-area .single-timeline-content {
		padding: 10px;
	}
	.single-timeline-area .timeline-date p {
		font-size: 1em;
	}
	.single-timeline-area .timeline-date span.large {
		font-size: 1.2em;
	}
}
.single-timeline-area .single-timeline-content .timeline-icon {
	transition-duration: 500ms;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	text-align: center;
	max-width: 30px;
	border-radius: 50%;
	margin-right: 15px;
}
.single-timeline-area .single-timeline-content .timeline-icon i {
	color: #fff;
	line-height: 30px;
	font-size: 1em;
	margin-left: -4px;
}
.single-timeline-area .single-timeline-content .timeline-text h6 {
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
	color: #fff;
	line-height: 1.8;
}
.single-timeline-area .single-timeline-content .timeline-text p {
	font-size: 13px;
	margin-bottom: 0;
}
.single-timeline-area .single-timeline-content:hover .timeline-icon, .single-timeline-area .single-timeline-content:focus .timeline-icon {
	opacity: 1;
}
.single-timeline-area .single-timeline-content:hover .timeline-text h6, .single-timeline-area .single-timeline-content:focus .timeline-text h6 {
	opacity: 1;
}
/*--------------------------------------------------------------
# About Alt Section
--------------------------------------------------------------*/
.about-alt .content p:last-child {
	margin-bottom: 0;
}
.about-alt .pulsating-play-btn {
	position: absolute;
	left: calc(50% - 47px);
	top: calc(50% - 47px);
}
/*--------------------------------------------------------------
# program section
--------------------------------------------------------------*/
.clip {
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 4.5em;
	font-weight: 900;
	line-height: 1;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.clip_bd01 {
	background-image: url("../img/image_bg01.jpg");
}
.clip_bd02 {
	background-image: url("../img/image_bg02.jpg");
}
.top {
	background-color: rgba(255, 255, 255, 0);
	width;
	100%;
	height: 100%;
	border: 2px solid white;
	border-radius: 10px;
	padding: 2em
}
.noto-sans-jp {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}
.ex_small {
	font-size: 30%;
}
.days_small {
	font-size: 50%;
}
@media screen and (max-width: 768px) {
	.clip {
		font-size: 4em;
	}
}
/*--------------------------------------------------------------
# partners Section
--------------------------------------------------------------*/
.partners {
	padding: 20px 0;
}
.partners .partner-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.partners .partner-logo img {
	padding: 20px 40px;
	max-width: 90%;
	transition: 0.3s;
	opacity: 0.5;
	filter: grayscale(100);
}
.partners .partner-logo img:hover {
	filter: none;
	opacity: 1;
	transform: scale(1.1);
}
@media (max-width: 640px) {
	.partners .partner-logo img {
		padding: 20px;
	}
}
/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
	padding: 80px 0;
	position: relative;
	clip-path: inset(0);
}
.call-to-action h3 {
	font-size: 28px;
	font-weight: 700;
	color: var(--default-color);
}
.call-to-action p {
	color: var(--default-color);
}
.call-to-action .cta-btn {
	font-family: var(--heading-font);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	display: inline-block;
	padding: 12px 40px;
	border-radius: 5px;
	transition: 0.5s;
	margin: 10px;
	border: 2px solid var(--contrast-color);
	color: var(--contrast-color);
}
.call-to-action .cta-btn:hover {
	background: var(--surface-color);
	color: var(--accent-color);
}
/*--------------------------------------------------------------
# airtist Section
--------------------------------------------------------------*/
.airtist .airtist-filters {
	padding: 0;
	margin: 0 auto 20px auto;
	list-style: none;
	text-align: center;
}
.airtist .airtist-filters li {
	cursor: pointer;
	display: inline-block;
	padding: 8px 20px 10px 20px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	margin-bottom: 5px;
	border-radius: 50px;
	transition: all 0.3s ease-in-out;
	font-family: var(--heading-font);
}
.airtist .airtist-filters li:hover, .airtist .airtist-filters li.filter-active {
	color: var(--accent-color);
}
.airtist .airtist-filters li:first-child {
	margin-left: 0;
}
.airtist .airtist-filters li:last-child {
	margin-right: 0;
}
@media (max-width: 575px) {
	.airtist .airtist-filters li {
		font-size: 14px;
		margin: 0 0 10px 0;
	}
}
.airtist .airtist-item {
	position: relative;
	overflow: hidden;
}
.airtist .airtist-item .airtist-info {
	opacity: 0;
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -100%;
	z-index: 3;
	transition: all ease-in-out 0.5s;
	background: color-mix(in srgb, var(--background-color), transparent 10%);
	padding: 15px;
}
.airtist .airtist-item .airtist-info h4 {
	font-size: 1em;
	font-weight: 600;
	padding-right: 50px;
	color: #fff;
}
.airtist .airtist-item .airtist-info p {
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	font-size: .8em;
	margin-bottom: 0;
	padding-right: 50px;
}
.airtist .airtist-item .airtist-info .preview-link, .airtist .airtist-item .airtist-info .details-link {
	position: absolute;
	right: 50px;
	font-size: 24px;
	top: calc(50% - 14px);
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	transition: 0.3s;
	line-height: 0;
}
.airtist .airtist-item .airtist-info .preview-link:hover, .airtist .airtist-item .airtist-info .details-link:hover {
	color: var(--accent-color);
}
.airtist .airtist-item .airtist-info .details-link {
	right: 14px;
	font-size: 28px;
}
.airtist .airtist-item:hover .airtist-info {
	opacity: 1;
	bottom: 0;
}
/*--------------------------------------------------------------
# airtist Details Section
--------------------------------------------------------------*/
.airtist-details .airtist-details-slider img {
	width: 100%;
}
.airtist-details .swiper-wrapper {
	width: 100%;
	height: 100%;
}
.airtist-details .swiper-button-prev, .airtist-details .swiper-button-next {
	width: 48px;
	height: 48px;
}
.airtist-details .swiper-button-prev:after, .airtist-details .swiper-button-next:after {
	color: rgba(255, 255, 255, 0.8);
	background-color: rgba(0, 0, 0, 0.15);
	font-size: 24px;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}
.airtist-details .swiper-button-prev:hover:after, .airtist-details .swiper-button-next:hover:after {
	background-color: rgba(0, 0, 0, 0.3);
}
@media (max-width: 575px) {
	.airtist-details .swiper-button-prev, .airtist-details .swiper-button-next {
		display: none;
	}
}
.airtist-details .swiper-pagination {
	margin-top: 20px;
	position: relative;
}
.airtist-details .swiper-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background-color: color-mix(in srgb, var(--default-color), transparent 85%);
	opacity: 1;
}
.airtist-details .swiper-pagination .swiper-pagination-bullet-active {
	background-color: var(--accent-color);
}
.airtist-details .airtist-info h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
	padding-bottom: 20px;
	position: relative;
}
.airtist-details .airtist-info h3:after {
	content: "";
	position: absolute;
	display: block;
	width: 50px;
	height: 3px;
	background: var(--accent-color);
	left: 0;
	bottom: 0;
}
.airtist-details .airtist-info ul {
	list-style: none;
	padding: 0;
	font-size: 15px;
}
.airtist-details .airtist-info ul li {
	display: flex;
	flex-direction: column;
	padding-bottom: 15px;
}
.airtist-details .airtist-info ul strong {
	text-transform: uppercase;
	font-weight: 400;
	color: color-mix(in srgb, var(--default-color), transparent 50%);
	font-size: 14px;
}
.airtist-details .airtist-info .btn-visit {
	padding: 8px 40px;
	background: var(--accent-color);
	color: var(--contrast-color);
	border-radius: 50px;
	transition: 0.3s;
}
.airtist-details .airtist-info .btn-visit:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
.airtist-details .airtist-description h2 {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 20px;
}
.airtist-details .airtist-description p {
	padding: 0;
}
.airtist-details .airtist-description .testimonial-item {
	padding: 30px 30px 0 30px;
	position: relative;
	background: color-mix(in srgb, var(--default-color), transparent 97%);
	margin-bottom: 50px;
}
.airtist-details .airtist-description .testimonial-item .testimonial-img {
	width: 90px;
	border-radius: 50px;
	border: 6px solid var(--background-color);
	float: left;
	margin: 0 10px 0 0;
}
.airtist-details .airtist-description .testimonial-item h3 {
	font-size: 18px;
	font-weight: bold;
	margin: 15px 0 5px 0;
	padding-top: 20px;
}
.airtist-details .airtist-description .testimonial-item h4 {
	font-size: 14px;
	color: #6c757d;
	margin: 0;
}
.airtist-details .airtist-description .testimonial-item .quote-icon-left, .airtist-details .airtist-description .testimonial-item .quote-icon-right {
	color: color-mix(in srgb, var(--accent-color), transparent 50%);
	font-size: 26px;
	line-height: 0;
}
.airtist-details .airtist-description .testimonial-item .quote-icon-left {
	display: inline-block;
	left: -5px;
	position: relative;
}
.airtist-details .airtist-description .testimonial-item .quote-icon-right {
	display: inline-block;
	right: -5px;
	position: relative;
	top: 10px;
	transform: scale(-1, -1);
}
.airtist-details .airtist-description .testimonial-item p {
	font-style: italic;
	margin: 0 0 15px 0 0 0;
	padding: 0;
}
/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
	background-color: var(--surface-color);
	padding: 10px 30px;
	border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
	margin-bottom: 20px;
}
.service-details .services-list a {
	display: block;
	line-height: 1;
	padding: 8px 0 8px 15px;
	border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
	margin: 20px 0;
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	transition: 0.3s;
}
.service-details .services-list a.active {
	color: var(--heading-color);
	font-weight: 700;
	border-color: var(--accent-color);
}
.service-details .services-list a:hover {
	border-color: var(--accent-color);
}
.service-details .services-img {
	margin-bottom: 20px;
}
.service-details h3 {
	font-size: 26px;
	font-weight: 700;
}
.service-details h4 {
	font-size: 20px;
	font-weight: 700;
}
.service-details p {
	font-size: 15px;
}
.service-details ul {
	list-style: none;
	padding: 0;
	font-size: 15px;
}
.service-details ul li {
	padding: 5px 0;
	display: flex;
	align-items: center;
}
.service-details ul i {
	font-size: 20px;
	margin-right: 8px;
	color: var(--accent-color);
}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
	/* Add your styles here */
}