@charset "utf-8";
/* .splide__slide {
	transition: opacity 1500ms cubic-bezier(0.25, 1, 0.5, 1) 0s!important;
  } */
/*//////// TOP ////////*/

/*共通-全体*/
.contents {
	height: min(calc((2128 / 1700)* 100vw), 2128px);
}

@media only screen and (max-width: 768px) {
	.contents {
        height: calc((4502 / 750) * 100vw);
		/* height: calc((4022 / 750)* 100vw); */
	}
}


/*読み込み時フェード表示01*/
.js-load-fadein_1 {
	opacity: 0;
	animation: js-load-fadein_1 1s ease forwards 1.5s;
	transform: translateX(-70px);
	filter: blur(20px);
}

@keyframes js-load-fadein_1 {
	100% {
		opacity: 1;
		transform: translateX(0);
		filter: blur(0);
	}
}

/*読み込み時フェード表示02*/
.js-load-fadein_2 {
	animation: js-load-fadein_2 1.5s ease forwards 1.5s;
	opacity: 0;
	transform: translateX(70px);
	filter: blur(20px);
}

@keyframes js-load-fadein_2 {
	100% {
		opacity: 1;
		transform: translate(0);
		filter: blur(0);
	}
}

@media only screen and (max-width: 768px) {
	.js-load-fadein_2 {
		transform: translateY(-70px);
	}
}

/*読み込み時フェード表示03*/
.js-load-fadein_3 {
	opacity: 0;
	animation: js-load-fadein_3 1.0s ease forwards 2s;
	transform: translateY(70px);
	filter: blur(20px);
}

@keyframes js-load-fadein_3 {
	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}


/* ページタイトル */
.mainTxtBl {
	position: absolute;
	top: min(calc((57 / 1700)* 100vw), 57px);
	right: min(calc((140 / 1700)* 100vw), 140px);
}

.mainTxt_tit {
	text-align: center;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .18em;
}

.mainTxt_tit span {
	font-size: min(calc((77 / 1700)* 100vw), 77px);
}

.mainTxt_tit_red {
	color: #cd4a39;
}

.mainTxt_tit_orange {
	color: #dc9538;
}

.mainTxt_tit_1 {
	letter-spacing: .31em;
	position: relative;
	left: min(calc((10 / 1700)* 100vw), 10px);
}

.mainTxt_tit_2 {
	letter-spacing: .23em;
}


.mainTxt_tit_3 {
	letter-spacing: .3em;
}

.mainTxt_lead {
	text-align: left;
	font-weight: 500;
	font-size: min(calc((28 / 1700)* 100vw), 28px);
	letter-spacing: .22em;
	line-height: 1.5;
	position: relative;
	left: min(calc((10 / 1700)* 100vw), 10px);
}

@media only screen and (max-width: 768px) {
	.mainTxtBl {
		top: calc((34 / 750)* 100vw);
		right: 0;
		left: 0;
	}

	.mainTxt_tit {
		line-height: 1.23;
	}

	.mainTxt_tit span {
		font-size: calc((75/750)*100vw);
	}

	.mainTxt_tit .mainTxt_tit_1 {
		font-size: calc((81/750)*100vw);
		left: calc((11 / 750)* 100vw);
		letter-spacing: .26em;
	}

	.mainTxt_tit .mainTxt_tit_2 {
		letter-spacing: .25em;
	}

	.mainTxt_tit .mainTxt_tit_3 {
		letter-spacing: .3em;
	}

	.mainTxt_lead {
		font-size: calc((28/750)*100vw);
		left: 0;
		margin-top: calc((5 / 750)* 100vw);
		display: flex;
		justify-content: center;
	}

}

/* スライダー（splide） */

.splide-wrap {
	position: absolute;
	top: min(calc((-102 / 1700)* 100vw), -113px);
	left: min(calc((-85 / 1700)* 100vw), -94px);
}

.splide__slide__inner {
	position: relative;
}

.splide__track {
	overflow: visible;
	position: relative;
	z-index: 0;
}

.svg-wrap {
	width: min(calc((1043 / 1700)* 100vw), 1043px);
	position: absolute;
	top: 0;
	left: 0;
}

.svg-inner {
	position: relative;
}

.svg {
	width: 100%;
	height: auto;
}

.svg-wrap image {
	width: 100%;
	height: 100%;
	transform: scale(1, .87);
}

.splide__slide {
	transition: all 1s;
}

.splide__slide .svg-wrap svg {
	position: absolute;
	top: 0;
	left: 0;
	/* opacity: 0; */

	transform: scale(1.1);
	transform-origin: center;
	transition: all 1s;
}

.svg-wrap clipPath {
	transform: scale(1.2);
	transform-origin: center;
}

.country-flag__inner {
	position: absolute;
	top: min(calc((163 / 1700)* 100vw), 163px);
	left: min(calc((144 / 1700)* 100vw), 144px);
	z-index: 3;
	opacity: 0;
	transform: translateX(-100px);
}

.country-flag__inner.active {
	animation: flag-fade 8s ease forwards;
	/* animation: flag-fade 12s ease forwards; */
}

@keyframes flag-fade {
	0% {
		opacity: 0;
		transform: translateX(-100px);
	}

	15% {
		opacity: 1;
		transform: translateX(0);
	}

	85% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.country-flag__imgwrap {
	width: min(calc((187 / 1700)* 100vw), 187px);
}

.country-flag__name {
	text-align: center;
	color: #fff;
	font-size: min(calc((15 / 1700)* 100vw), 15px);
	font-weight: 500;
	margin-top: min(calc((8 / 1700)* 100vw), 8px);
	transform: scale(1, 1.5);
}

@media only screen and (max-width: 1500px) {
	.country-flag__inner {
		position: absolute;
		top: 133px;
		left: 114px;
	}
}

@media only screen and (max-width: 768px) {
	.splide-wrap {
		top: calc((461 / 750)* 100vw);
		left: calc((-68 / 750)* 100vw);
	}

	.svg-wrap {
		width: calc((640 / 750)* 100vw);
	}

	.svg-wrap clipPath {
		transform: scale(1.2);

	}

	.country-flag__inner {
		top: calc((32 / 750)* 100vw);
		left: calc((110 / 750)* 100vw);
	}

	.country-flag__imgwrap {
		width: calc((187 / 750)* 100vw);
	}

	.country-flag__name {
		font-size: calc((16/750)*100vw);
		margin-top: calc((8 / 750)* 100vw);
		letter-spacing: 0.05em;
	}

}


/* 若者のイメージ */
.youth {
	position: absolute;
	top: min(calc((456 / 1700)* 100vw), 456px);
	right: min(calc((815 / 1700)* 100vw), 815px);
}

.youth .svg-wrap {
	width: min(calc((855 / 1700)* 100vw), 855px);
	height: min(calc((855 / 1700)* 100vw), 855px);
	/* height: min(calc((515 / 1700)* 100vw), 515px); */
}

.youth .svg-wrap image {
	transform: scale(1, 0.72);
}

.youth .svg-wrap clipPath {
	transform: scale(1.2);
}


@media only screen and (max-width: 768px) {
	.youth {
		top: calc((1026 / 750)* 100vw);
		right: calc((481 / 750)* 100vw);
	}

	.youth .svg-wrap {
		width: calc((600 / 750)* 100vw);
		height: calc((600 / 750)* 100vw);
	}

	.youth .svg-wrap clipPath {
		transform: scale(1.15);
	}
}

/* 下層ページへのリンクボタン */
.circle-button-ul__li {
	position: absolute;
	width: min(calc((400 / 1700)* 100vw), 400px);
	height: min(calc((400 / 1700)* 100vw), 400px);
}

.circle-button-ul__li:nth-child(1) {
	top: min(calc((900 / 1700)* 100vw), 900px);
	right: min(calc((1186 / 1700)* 100vw), 1186px);
}

.circle-button-ul__li:nth-child(2) {
	top: min(calc((1102 / 1700)* 100vw), 1102px);
	/* top: min(calc((1202 / 1700)* 100vw), 1202px); */
	right: min(calc((701 / 1700)* 100vw), 701px);
	/* right: min(calc((761 / 1700)* 100vw), 761px); */
}

.circle-button-ul__li:nth-child(3) {
	top: min(calc((1129 / 1700)* 100vw), 1129px);
	right: min(calc((108 / 1700)* 100vw), 108px);
}

.circle-button-ul__li:nth-child(4) {
	top: min(calc((1467 / 1700)* 100vw), 1467px);
	right: min(calc((1213 / 1700)* 100vw), 1213px);
}

.circle-button-ul__li:nth-child(5) {
	top: min(calc((1578 / 1700)* 100vw), 1578px);
	/* top: min(calc((1628 / 1700)* 100vw), 1628px); */
	right: min(calc((622 / 1700)* 100vw), 622px);
	/* right: min(calc((422 / 1700)* 100vw), 422px); */
}

.circle-button-ul__li:nth-child(6) {
	top: min(calc((1628 / 1700)* 100vw), 1628px);
	right: min(calc((122 / 1700)* 100vw), 122px);
}

.circle-button-ul__li__inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	overflow: hidden;
	border-radius: 61% 39% 16% 84% / 57% 72% 28% 43%;
}

.circle-button-ul__li:nth-child(1) .circle-button-ul__li__inner,
.circle-button-ul__li:nth-child(6) .circle-button-ul__li__inner {
	animation: fluid-anim_1 30s infinite;
}

@keyframes fluid-anim_1 {
	0% {
		border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%;
	}

	12.5% {
		border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%;
	}

	25% {
		border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%;
	}

	37.5% {
		border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%;
	}

	50% {
		border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%;
	}

	62.5% {
		border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%;
	}

	75% {
		border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%;
	}

	87.5% {
		border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%;
	}

	100% {
		border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%;
	}
}

.circle-button-ul__li:nth-child(2) .circle-button-ul__li__inner {
	animation: fluid-anim_2 22s infinite;
}

@keyframes fluid-anim_2 {
	0% {
		border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%;
	}

	12.5% {
		border-radius: 55% 80% 45% 85% / 70% 70% 65% 65%;
	}

	25% {
		border-radius: 50% 100% 60% 90% / 75% 70% 85% 75%;
	}

	37.5% {
		border-radius: 55% 45% 55% 45% / 60% 40% 60% 40%;
	}

	50% {
		border-radius: 50% 100% 60% 90% / 75% 70% 85% 75%;
	}

	62.5% {
		border-radius: 55% 45% 55% 45% / 60% 40% 60% 40%;
	}

	75% {
		border-radius: 55% 80% 45% 85% / 70% 70% 65% 65%;
	}

	87.5% {
		border-radius: 45% 55% 55% 45% / 55% 55% 55% 45%;
	}

	100% {
		border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%;
	}
}

.circle-button-ul__li:nth-child(3) .circle-button-ul__li__inner {
	animation: fluid-anim_3 25s infinite;
}

@keyframes fluid-anim_3 {
	0% {
		border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%;
	}

	12.5% {
		border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%;
	}

	25% {
		border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%;
	}

	37.5% {
		border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%;
	}

	50% {
		border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%;
	}

	62.5% {
		border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%;
	}

	75% {
		border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%;
	}

	87.5% {
		border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%;
	}

	100% {
		border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%;
	}
}

.circle-button-ul__li:nth-child(4) .circle-button-ul__li__inner {
	animation: fluid-anim_4 21s infinite;
}

@keyframes fluid-anim_4 {
	0% {
		border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%;
	}

	12.5% {
		border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%;
	}

	25% {
		border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%;
	}

	37.5% {
		border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%;
	}

	50% {
		border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%;
	}

	62.5% {
		border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%;
	}

	75% {
		border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%;
	}

	87.5% {
		border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%;
	}

	100% {
		border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%;
	}
}

.circle-button-ul__li:nth-child(5) .circle-button-ul__li__inner {
	animation: fluid-anim_5 27s infinite;
}

@keyframes fluid-anim_5 {
	0% {
		border-radius: 63% 37% 53% 47% / 53% 50% 53% 47%;
	}

	12.5% {
		border-radius: 58% 73% 42% 78% / 68% 68% 58% 63%;
	}

	25% {
		border-radius: 53% 93% 63% 88% / 73% 63% 83% 68%;
	}

	37.5% {
		border-radius: 58% 42% 52% 47% / 58% 42% 58% 42%;
	}

	50% {
		border-radius: 53% 93% 63% 88% / 73% 63% 83% 68%;
	}

	62.5% {
		border-radius: 58% 42% 52% 47% / 58% 42% 58% 42%;
	}

	75% {
		border-radius: 58% 73% 42% 78% / 68% 68% 58% 63%;
	}

	87.5% {
		border-radius: 43% 63% 53% 47% / 53% 63% 43% 53%;
	}

	100% {
		border-radius: 63% 37% 53% 47% / 53% 50% 53% 47%;
	}
}

.circle-button-ul__li__inner .svg-wrap {
	width: auto;
	height: auto;
}

.circle-button-ul__li__inner .svg-wrap image {
	transform: scale(1);
}

.circle-button-ul__li__inner__hover-mask {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background: rgba(220, 149, 56, 0.9);
	opacity: 0;
	color: #fff;
	display: flex;
	align-items: center;
	text-align: center;
	transition: all 0.5s ease;
	text-align: center;
}

.circle-button-ul__li__inner:hover .circle-button-ul__li__inner__hover-mask {
	opacity: 1;
}

.circle-button-ul__li__inner__hover-mask__txt {
	width: 100%;
	box-sizing: border-box;
	font-size: min(calc((22 / 1700)* 100vw), 22px);
	line-height: 1.77;
	letter-spacing: .05em;
	font-weight: 500;

	transition: all 0.5s ease;
	transform: translateY(20px);
}

.circle-button-ul__li__inner:hover .circle-button-ul__li__inner__hover-mask__txt {
	transform: translateY(0);
}

.circle-button-ul__li__inner__hover-mask__txt__a {
	color: #fff;
	display: table;
	font-size: min(calc((20 / 1700)* 100vw), 20px);
	margin: min(calc((15 / 1700)* 100vw), 15px) auto 0;
	position: relative;
	padding-left: min(calc((17 / 1700)* 100vw), 17px);
}

.circle-button-ul__li__inner__hover-mask__txt__a::before {
	content: "";
	display: inline-block;
	width: min(calc((7 / 1700)* 100vw), 7px);
	height: min(calc((7 / 1700)* 100vw), 7px);
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
	position: absolute;
	top: min(calc((14 / 1700)* 100vw), 14px);
	left: 0;
}

.circle-button-ul__li__inner__tit {
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;
	font-size: min(calc((26 / 1700)* 100vw), 26px);
	font-weight: 500;
	line-height: 1.38;
	letter-spacing: .1em;
	color: #fff;
}

.circle-button-ul__li__inner__tit__s {
	font-size: min(calc((20 / 1700)* 100vw), 20px);
}

@media only screen and (max-width: 768px) {
	.circle-button-ul__li {
		width: calc((475 / 750)* 100vw);
		height: calc((475 / 750)* 100vw);
	}

	.circle-button-ul__li:nth-child(1) {
		top: calc((1480 / 750)* 100vw);
		right: calc((255 / 750)* 100vw);
	}

	.circle-button-ul__li:nth-child(2) {
		top: calc((1935 / 750)* 100vw);
		right: calc((-5 / 750)* 100vw);
	}

	.circle-button-ul__li:nth-child(3) {
		top: calc((2382 / 750)* 100vw);
		right: calc((260 / 750)* 100vw);
	}

	.circle-button-ul__li:nth-child(4) {
		top: calc((2828 / 750)* 100vw);
		right: calc((-3 / 750)* 100vw);
	}

	.circle-button-ul__li:nth-child(5) {
		top: calc((3302 / 750)* 100vw);
		right: calc((257 / 750)* 100vw);
	}

	.circle-button-ul__li:nth-child(6) {
        top: calc((3802 / 750) * 100vw);
        right: calc((30 / 750) * 100vw);
	}

	.circle-button-ul__li__inner__tit {
		font-size: calc((31.2/750)*100vw);
	}

	.circle-button-ul__li__inner__tit__s {
		font-size: calc((24/750)*100vw);
	}

	.circle-button-ul__li__inner__hover-mask__txt {
		font-size: calc((28/750)*100vw);
	}

	.circle-button-ul__li__inner__hover-mask__txt__a {
		font-size: calc((26/750)*100vw);
		margin: calc((24 / 750)* 100vw) auto 0;
		padding-left: calc((22 / 750)* 100vw);
	}

	.circle-button-ul__li__inner__hover-mask__txt__a::before {
		width: calc((9 / 750)* 100vw);
		height: calc((9 / 750)* 100vw);
		top: calc((16 / 750)* 100vw);
	}

}