@charset "utf-8";
.panelsWrap {
		overflow: hidden;
		position: relative;
		z-index: 100;
}
.panelsContainer {
		position: absolute;
		top: 0;
		display: flex;
		align-items: center;
		overflow: hidden
}
.panelsWrap, .panelsContainer {
		height: 800px;
		overflow: hidden
}
.pin-spacer {
		background: #cfdcea;
		border-radius: 160px 0 0 0;
}
.section {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		width: 1870px;
		height: 700px;
		background: #cfdcea;
}
.section.panel0 {
		width: 200px;
		border-radius: 160px 0 0 0;
}
.section.panel1 {
		width: 1010px;
}
.section.panel2 {
		width: 860px;
}
.section.panel3 {
		width: 1000px;
}
.section.panel4 {
		width: 870px;
}
.section.panel5 {
		width: 655px;
}
.section.panel6 {
		width: 1580px;
}
.section img {
		width: 100%;
		height: auto;
}
.aligncenter {
		text-align: center;
}
.panel1, .panel2, .panel3, .panel4, .panel5, .panel6 {
		position: relative;
}
.panel1 .circle_btn, .panel2 .circle_btn, .panel3 .circle_btn, .panel4 .circle_btn, .panel5 .circle_btn, .panel6 .circle_btn {
		position: absolute;
		z-index: 10;
		border-radius: 50%;
}
.circle_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		opacity: 0;
		transform: scale(1.3);
		transition: opacity 0.3s linear, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.panel3 .circle_btn3-2, .panel4 .circle_btn4-2, .panel4 .circle_btn5-2, .panel6 .circle_btn6-2 {
		transition-delay: 0.1s;
}
.panel3 .circle_btn3-3, .panel4 .circle_btn4-3, .panel6 .circle_btn6-3 {
		transition-delay: 0.2s;
}
.panel1 .circle_btn2-2, .panel3 .circle_btn3-4, .panel4 .circle_btn4-4, .panel5 .circle_btn5-2, .panel6 .circle_btn6-4, .panel6 .circle_btn6-5, .panel6 .circle_btn6-6 {
		transition-delay: 0.3s;
}
.panel1 .circle_btn2-3 {
		transition-delay: 0.4s;
}
.panel1 .circle_btn2-4 {
		transition-delay: 0.5s;
}
.panel1 .chara1-1, .panel5 .chara5-2 {
		transition-delay: 0.3s;
}
.panel1 .chara1-2, .panel1 .chara2-1, .panel5 .chara5-3 {
		transition-delay: 0.5s;
}
.panel3 .chara3-2 {
		transition-delay: 0.7s;
}
.panel5 .chara5-3 {
		transition-delay: 0.9s;
}
.chara {
		opacity: 0;
		transform: scale(1.3);
		transition: opacity 0.3s linear, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.panelActive .circle_btn, .panelActive .chara {
		opacity: 1;
		transform: scale(1);
}
.circle_btn_inner {
		position: relative;
		z-index: 2;
}
.circle_btn_year {
		font-family: 'Outfit', sans-serif;
		text-align: center;
		font-size: 24px;
		font-weight: 500;
		line-height: 1;
		margin: 0 0 5px;
}
.circle_figure {
		margin: 0 0 10px;
}
.circle_figure img {
		width: 100%;
		height: auto;
}
.circle_btn p {
		text-align: justify;
		line-height: 1.5;
		font-size: 13px;
		font-weight: 500;
		padding: 0 35px;
		font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		word-break: break-all;
}
.circle_btn_year + p {
		margin-top: 15px;
}
.circle_btn .circle_figure + p {
		padding: 0 50px;
}
.circle_btn p.aligncenter {
		text-align: center;
}
.w_s {
		width: 230px;
		height: 230px;
}
.w_l {
		width: 270px;
		height: 270px;
}
.nolink_nvy {
		background: #003D72;
		border-radius: 50%;
}
.nolink_red {
		background: #E5003F;
		border-radius: 50%;
}
.popup {
		cursor: pointer;
		position: relative;
}
.redExtraCircle {
		position: relative;
}
.popup::before, .redExtraCircle::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.redExtraCircle::before {
		background: #E5003F;
}
@media (hover: hover) {
		.popup:hover::before {
				transform: scale(1.1)
		}
		.redExtraCircle.hover::before {
				transform: scale(1.1)
		}
}
.nvy.popup::before {
		background: #003D72;
}
.red.popup::before {
		background: #E5003F;
}
.popup .zoom_icon {
		position: absolute;
		width: 46px;
		height: 46px;
		box-sizing: border-box;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
		top: 20px;
		right: 8px;
		border-radius: 50%;
}
.w_l .zoom_icon {
		right: 19px;
}
.circle_btn6-4 .zoom_icon {
		right: 40px;
}
.nvy .zoom_icon {
		border: 2px solid #003d72;
		background-image: url("../images/icon_zoom_nvy.png")
}
.red .zoom_icon, .circle_btn6-4 .zoom_icon {
		border: 2px solid #e5003f;
		background-image: url("../images/icon_zoom_red.png")
}
.panel1 .circle_btn1-1 {
		left: 305px;
		top: 400px;
}
.panel1 .circle_btn1-2 {
		left: 643px;
		top: 339px;
}
/* section2 */
.panel1 .circle_btn2-1 {
		left: 1019px;
		top: 336px;
}
.panel1 .circle_btn2-2 {
		left: 1205px;
		top: 114px;
}
.panel1 .circle_btn2-3 {
		left: 1490px;
		top: 57px;
}
.panel1 .circle_btn2-4 {
		left: 1634px;
		top: 288px;
}
/* section3 */
.panel3 .circle_btn3-1 {
		left: 13px;
		top: 400px;
}
.panel3 .circle_btn3-2 {
		left: 293px;
		top: 278px;
}
.panel3 .circle_btn3-3 {
		left: 448px;
		top: 66px;
}
.panel3 .circle_btn3-4 {
		left: 659px;
		top: 194px;
}
/* section4 */
.panel4 .circle_btn4-1 {
		left: 13px;
		top: 351px;
}
.panel4 .circle_btn4-2 {
		left: 177px;
		top: 114px;
}
.panel4 .circle_btn4-3 {
		left: 422px;
		top: 57px;
}
.panel4 .circle_btn4-4 {
		left: 625px;
		top: 274px;
}
/* section5 */
.panel5 .circle_btn5-1 {
		left: 11px;
		top: 402px;
}
.panel5 .circle_btn5-2 {
		left: 481px;
		top: 44px;
}
/* section6 */
.panel6 .circle_btn6-1 {
		left: 76px;
		top: 79px;
}
.panel6 .circle_btn6-2 {
		left: 214px;
		top: 295px;
}
.panel6 .circle_btn6-3 {
		left: 440px;
		top: 460px;
}
.panel6 .circle_btn6-5 {
		left: 716px;
		top: 330px;
}
.panel6 .circle_btn6-6 {
		left: 883px;
		top: 98px;
}
.panel6 .circle_btn6-4 {
		left: 1130px;
		top: 26px;
		width: 360px;
		height: 360px
}
/* =========== */
.panel1 .chara, .panel2 .chara, .panel3 .chara, .panel4 .chara, .panel5 .chara, .panel6 .chara {
		position: absolute;
		z-index: 10;
}
.panel1 .run0 {
		position: absolute;
		width: 170px;
		top: 400px;
		left: 120px;
		transform: translateX(-100px);
		transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}
.panelActive .run0 {
		opacity: 1;
		transform: translateX(0);
}
.panel1 .run0 img {
		width: 100%;
		height: auto;
}
.panel1 .chara1-1 {
		left: 503px;
		top: 484px;
		width: 172px;
}
.panel1 .chara1-2 {
		left: 845px;
		top: 449px;
		width: 241px;
}
.panel1 .chara2-1 {
		left: 1388px;
		top: 360px;
		width: 206px;
}
.panel3 .chara3-1 {
		left: 24px;
		top: 220px;
		width: 232px;
}
.panel3 .chara3-2 {
		left: 770px;
		top: 317px;
		width: 254px;
}
.panel4 .chara4-1 {
		left: 262px;
		top: 280px;
		width: 210px;
}
.panel5 .chara5-1 {
		left: -300px;
		top: 445px;
		width: 292px;
}
.panel5 .chara5-2 {
		left: 270px;
		top: 206px;
		width: 142px;
}
.panel5 .chara5-3 {
		left: 600px;
		top: 230px;
		width: 114px;
}
.panel6 .chara6-1 {
		left: 800px;
		top: 500px;
		width: 360px;
}
/* ========== */
.panel1 .story_catch {
		position: absolute;
		left: 153px;
		top: 100px;
		width: 560px;
		color: #003d72;
}
.story_catch_run {
		font-size: 40px;
		font-weight: 700;
		line-height: 1;
		margin: 0 0 10px;
		font-family: 'Outfit', 'Noto Sans JP', sans-serif;
}
.story_catch_hd {
		opacity: 0;
		transform: translateX(200px);
		transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
		transition-delay: 0.4s;
}
.story_catch_lead {
		line-height: 1.8;
		font-weight: 700;
		opacity: 0;
		transform: translateX(200px);
		transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
		transition-delay: 0.5s;
}
.story_catch_run span {
		transform: translateX(800px);
		opacity: 0;
		display: inline-block;
		margin-right: 2px;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}
.panelActive .story_catch_hd, .panelActive .story_catch_lead {
		opacity: 1;
		transform: translateX(0);
}
.panelActive .story_catch_run span {
		opacity: 1;
		transform: translateX(0);
}
.story_catch_run span:nth-child(1) {
		transition-delay: 0.03s;
}
.story_catch_run span:nth-child(2) {
		transition-delay: 0.06s;
}
.story_catch_run span:nth-child(3) {
		transition-delay: 0.09s;
}
.story_catch_run span:nth-child(4) {
		transition-delay: 0.12s;
}
.story_catch_run span:nth-child(5) {
		transition-delay: 0.15s;
}
.story_catch_run span:nth-child(6) {
		transition-delay: 0.18s;
}
.story_catch_run span:nth-child(7) {
		transition-delay: 0.21s;
}
.story_catch_run span:nth-child(8) {
		transition-delay: 0.24s;
}
.story_catch_run span:nth-child(9) {
		transition-delay: 0.27s;
}
.story_catch_run span:nth-child(10) {
		transition-delay: 0.3s;
}
.story_catch_run span:nth-child(11) {
		transition-delay: 0.33s;
}
.story_catch_run span:nth-child(12) {
		transition-delay: 0.36s;
}
.story_catch_run span:nth-child(13) {
		transition-delay: 0.39s;
}
.story_catch_run span:nth-child(14) {
		transition-delay: 0.42s;
}
.story_catch_run span:nth-child(15) {
		transition-delay: 0.45s;
}
.story_catch_run span:nth-child(16) {
		transition-delay: 0.48s;
}
.story_catch_run span:nth-child(17) {
		transition-delay: 0.51s;
}
.story_catch_run span:nth-child(18) {
		transition-delay: 0.54s;
}
.story_catch_run span:nth-child(19) {
		transition-delay: 0.57s;
}
.story_catch_run span:nth-child(20) {
		transition-delay: 0.6s;
}
.story_catch_run span:nth-child(21) {
		transition-delay: 0.63s;
}
@media(min-width: 768px) {
		.panel2 .circle_btn2-1, .panel2 .circle_btn2-2, .panel2 .circle_btn2-3, .panel2 .circle_btn2-4, .panel6 .chara6-2, .panel2 .chara2-1 {
				display: none;
		}
}
@media(max-width: 767px) {
		.panelsWrap, .panelsContainer {
				height: 660px !important;
		}
		.spActive .circle_btn, .spActive .chara {
				opacity: 1;
				transform: scale(1);
		}
		.panel1 .story_catch {
				left: 0;
				top: 100px;
				width: auto;
		}
		.story_catch_run {
				font-size: 18px;
				margin-bottom: 5px;
		}
		.story_catch_lead {
				line-height: 1.6;
		}
		.panel1 .run0 {
				width: 70px;
				top: 440px;
				left: 0px;
				z-index: 50;
		}
		.w_s {
				width: 164px;
				height: 164px;
		}
		.w_l {
				width: 200px;
				height: 200px;
		}
		.popup .zoom_icon {
				width: 36px;
				height: 36px;
				top: 20px;
				right: 0px;
		}
		.circle_btn_year {
				font-size: 20px;
		}
		.circle_btn p {
				font-size: 11px;
				padding: 0 20px;
				line-height: 1.5;
		}
		.circle_btn .circle_figure + p {
				font-size: 10px;
				padding: 0 33px;
				line-height: 1.5;
		}
		.section.panel0 {
				width: 80px;
				border-radius: 80px 0 0 0;
		}
		.section.panel1 {
				width: 520px;
		}
		.section.panel2 {
				width: 660px;
		}
		.section.panel3 {
				width: 230px;
		}
		.section.panel4 {
				width: 415px;
		}
		.section.panel5 {
				width: 180px;
		}
		.section.panel6 {
				width: 1000px !important;
		}
		.panel6 .chara6-1 {
				transition-delay: 0s;
		}
		.panel1 .circle_btn1-1 {
				left: 33px;
				top: 352px;
		}
		.panel1 .circle_btn1-2 {
				left: 245px;
				top: 290px;
		}
		.panel1 .circle_btn2-1 {
				left: 336px;
				top: 112px;
		}
		.panel1 .circle_btn2-2 {
				top: 82px;
				left: 510px;
		}
		.panel1 .circle_btn2-3 {
				top: 287px;
				left: 590px;
		}
		.panel1 .circle_btn2-4 {
				top: 445px;
				left: 690px;
		}
		/* section2 */
		.panel1 .chara2-1 {
				display: none;
		}
		.panel2 .circle_btn2-3 {
				left: 65px;
		}
		.panel2 .circle_btn2-4 {
				left: 170px;
				top: 445px;
		}
		.panel3 .circle_btn3-1 {
				left: -288px;
				top: 324px;
		}
		.panel3 .circle_btn3-2 {
				left: -230px;
				top: 115px;
				width: 180px;
				height: 180px;
		}
		.panel3 .circle_btn3-3 {
				left: -55px;
				top: 25px;
		}
		.panel3 .circle_btn3-4 {
				left: 0px;
				top: 190px;
		}
		/* section4 */
		.panel4 .circle_btn4-1 {
				left: -230px;
				top: 370px;
		}
		.panel4 .circle_btn4-2 {
				left: -10px;
				top: 410px;
		}
		.panel4 .circle_btn4-3 {
				left: 40px;
				top: 70px;
		}
		.panel4 .circle_btn4-4 {
				left: 230px;
				top: 210px;
		}
		/* section5 */
		.panel5 .circle_btn5-1 {
				left: -159px;
				top: 392px;
		}
		.panel5 .circle_btn5-2 {
				left: 11px;
				top: 389px;
		}
		/* section6 */
		.panel6 .circle_btn6-1 {
				left: -107px;
				top: 166px;
		}
		.panel6 .circle_btn6-2 {
				left: 100px;
				top: 112px;
		}
		.panel6 .circle_btn6-3 {
				left: 200px;
				top: 269px;
		}
				.panel6 .circle_btn6-5 {
				left: 360px;
				top: 360px;
		}
				.panel6 .circle_btn6-6 {
				left: 530px;
				top: 290px;
		}
		.panel6 .circle_btn6-4 {
				left: 680px;
				top: 100px;
				width: 280px;
				height: 280px;
		}
		.circle_btn6-4 .zoom_icon {
				right: 30px;
		}
		/* chara */
		.panel1 .chara1-1 {
				left: 131px;
				top: 474px;
				width: 100px;
		}
		.panel1 .chara1-2 {
				left: 330px;
				top: 490px;
				width: 140px;
		}
		.panel2 .chara2-1 {
				position: absolute;
				left: 146px;
				top: 193px;
				width: 133px;
		}
		.panel3 .chara3-1 {
				left: -266px;
				top: 504px;
				width: 130px;
		}
		.panel3 .chara3-2 {
				left: 220px;
				top: 269px;
				width: 140px;
		}
		.panel4 .chara4-1 {
				left: 228px;
				top: 110px;
				width: 107px;
		}
		.panel5 .chara5-1 {
				left: -220px;
				top: 513px;
				width: 184px;
		}
		.panel5 .chara5-2 {
				left: 198px;
				top: 86px;
				width: 100px;
		}
		.panel5 .chara5-3 {
				display: none;
		}
		.panel6 .chara6-1 {
				left: 530px;
				top: 462px;
				width: 200px;
		}
		.panel6 .chara6-2 {
				left: 396px;
				top: 235px;
				width: 115px;
		}
		.panel6 .circle_btn6-1 {
				transition-delay: 0.2s;
		}
		.panel6 .circle_btn6-2 {
				transition-delay: 0.4s;
		}
		.panel6 .circle_btn6-2 {
				transition-delay: 0.6s;
		}
		.panel6 .circle_btn6-4 {
				transition-delay: 0.8s;
		}
}