@charset "utf-8";
@import url('map_style.css');

/* =============================================

	Main-layout

============================================= */

body.no_scroll{
    overflow: hidden;
}

.next_btn {
	width 						: 100vw;
	height 						: 100vh;
	position 					: fixed;
	left 						: 0;
	top 						: 0;
	z-index 					: 1000;
	cursor 						: pointer;
}

.container > figure {
	position 					: absolute;
	top							: 0;
	left 						: 50%;
	transform 					: translateX(-50%);
	z-index 					: 0;
}

.skipe {
	width 						: 5vw;
	max-width: 100px;
	min-width: 80px;
	position 					: absolute;
	right						: 2vw;
	top 						: 2vw;
	z-index 					: 100000000;
}

.skit_area {
	width 						: 95cqw;
	height 						: 28cqw;
	
	position 					: absolute;
	bottom 						: 23cqw;
	left 						: 50%;
	transform 					: translateX(-50%);
	z-index 					: 10;
	
	& p {
		height 				: 23cqw;
		position 			: absolute;
		bottom				: 0;
		filter 				: drop-shadow(0.1cqw 0.1cqw 0.2cqw rgba(0, 0, 0, 0.35));
		
		& .alter {
			position 			: absolute;
			bottom				: 0;
			left 				: 0;
			display 			: none;
		}
	}
	& #boy {
		display: none;
		height 				: 20cqw;
		left 				: -4cqw;
		transition 			: left 0.8s;
		& .alter {
			height 				: 20cqw;
		}
	}
	& #girl {
		display: none;
		height 				: 19cqw;
		left 				: 5cqw;
		transition 			: left 1.6s;
		& .alter {
			height 				: 19cqw;
		}
	}
	
	& #doctor {
		display: none;
		right				: 0cqw;
		transition 			: right 1s;
		& .alter {
			height 				: 23cqw;
		}
	}
	
	& img {
		width 				: auto;
		height 				: 100%;
	}
}

.speech_area {
	background-color 			: #fff;
	width 						: 95cqw;
	height 						: 22cqw;
	padding 					: 1.5cqw;
	border-radius 				: 1.5cqw;
	position 					: absolute;
	bottom 						: 15px;
	left 						: 50%;
	transform 					: translateX(-50%);
	z-index 					: 100;
	filter						: drop-shadow(0.3cqw 0.3cqw 0.5cqw rgba(0, 0, 0, 0.2));
	
	& > div {
		width: 100%;
		height: 19cqw;
		overflow-y 			: auto;
		position 			: relative;
		z-index 			: 100;
		display 			: none;
		flex-flow 			: column;
		justify-content 	: center;
	}
	
	& figure {
		min-height 			: 7cqw;
		display 			: none;
	}
	
	& figcaption {
		width: 100%;
		text-align: center;
		
		& p {
			font-size 			: 2.6cqw;
			font-weight 		: 700;
			text-align: left;
			padding 			: 1.5cqw;
			padding-left 		: 10cqw;
			display: inline-block;
		}
	}
	
	& .next {
		display: none;
		position 			: absolute;
		bottom 				: 1.5cqw;
		right 				: 2cqw;
		line-height 		: 1.4;
		color 				: rgb(0,119,243);
		font-weight 		: 600;
		
		& span {
			background-image    : linear-gradient(-45deg, rgb(18,209,244) 50%, rgb(0,119,243) 50%);
			width 				: 1em;
			height 				: 1em;
			margin-left 		: 0.3em;
			position 			: relative;
			border-radius 		: 9999px;
			display 			: inline-block;
			vertical-align 		: middle;
		}
		& span::after {
			position 			: absolute;
			content 			: '';
			left 				: 22%;
			top 				: 25%;
			transform 			: translate(-50%,-50%);
			border 				: none;
			border-right 		: 0.35em solid transparent;
			border-bottom 		: 0.5em solid #fff;
			border-left 		: 0.35em solid transparent;
			transform-origin 	: center;
			transform 			: rotate(90deg);
			border-top-left-radius: 6px;
		}
	}
	
}
.speech_area::before{
    content 					: "";
    position 					: absolute;
    top 						: 0;
    left 						: 0;
    right 						: 0;
    bottom 						: 0;
	border-radius 				: 1.5cqw;
    border 						: 5px solid transparent;
    background                  : linear-gradient(90deg,rgb(18,209,244) 0%,rgb(0,119,243) 100%) border-box border-box;
    -webkit-mask                : linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite      : destination-out;
    mask                        : linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    mask-composite              : exclude;
  }

/* =============================================

	Scenario 

============================================= */

/* -- Load
============================================= */

.load_action {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

.progress_txt {
	font-weight: 600;
	color: #555;
}

.load_images {
	display: none;
}



/* -- Material
============================================= */

.scenario_material {
	width 						: 100%;
	aspect-ratio 				: 4 / 3;
	position 					: relative;
	z-index 					: 10;
	
	& .scenario_1_2 {
		background-image: linear-gradient(90deg, rgb(255,255,255,0), rgb(255,255,255,0.7) 30%, rgb(255,255,255,0.7) 70%, rgb(255,255,255,0));
		width 				: 0;
		height 				: 15cqw; 
		position 			: absolute;
		top 				: 35%;
		left 				: 50%;
		transform 			: translate(-50%,-50%);
		transition 			: width 1s;
		overflow 			: hidden;
		
		& p {
			width 			: 100%;
			height 			: 15cqw; 
			display 		: flex;
			align-items 	: center;
			justify-content : center;
		}
		& > p > img {
			width 			: 30cqw;
			height 			: 100wh;
			transform 		: scale(1.2);
			opacity 		: 0;
			transition 		: transform 0.5s 0.5s, opacity 0.5s 0.5s;
		}
		&.open {
			top 			: 35%;
			width 			: 100%;
			& > p > img {
				transform 	: scale(1);
				opacity 	: 1;
			}
		}
		&.close {
			& > p > img {
				transition 	: width 1s 0.3s;
				transform 	: scale(0.7);
				opacity 	: 0;
				transition 	: transform 0.3s, opacity 0.3s;
			}
		}
	}
	
	& .scenario_10,
	& .scenario_11 {
		display 			: none;
		width 				: auto;
		max-width 			: 70cqw;
		height 				: 40cqw;
		position 			: absolute;
		top 				: 35%;
		left 				: 50%;
		transform 			: translate(-50%,-50%);
		filter				: drop-shadow(0.3cqw 0.3cqw 0.5cqw rgba(0, 0, 0, 0.2));
		& img {
			width 		: auto;
			height 		: 100%;
		}
	}
	
}	



/* == Phase 0 
	Opening Animation
============================================= */

.island_container {
	width 						: 70cqw;
	position 					: absolute;
	top 						: 35%;
	left 						: 50%;
	transform 					: translate(-50%,-50%);
	transition 					: top 1s ease-in-out,width 1s ease-in-out,height 1s ease-in-out;
	opacity 					: 1;
}

.island_container.step1 {
	width 						: 100cqw;
	top 						: 50%;
	left 						: 50%;
	transform 					: translate(-50%,-50%);
	transition 					: all 0.7s ease-in-out;
	opacity 					: 1;
}

.island_container.stop {
	width 						: 90cqw;
	top 						: 50%;
	left 						: 50%;
	transform 					: translate(-50%,-50%);
	opacity 					: 0;
}

/* == Phase 1 
	ここは、『みらいチャレンジEXPO』。
============================================= */

.skit_area {
	& #doctor.phase1 {
		right				: 5cqw;
	}
	& #doctor.phase1.animation01 {
		animation 			: doctor_phase1_01 0.8s ease-in-out;
	}
	& #doctor.phase1.animation02 {
		animation 			: doctor_phase1_02 0.8s ease-in-out;
	}
	& #girl.phase1 {
		left 				: 15cqw;
	}
	& #girl.phase1.animation01 {
		animation 			: girl_phase1_01 0.8s ease-in-out;
	}
	& #boy.phase1 {
		left 				: 1cqw;
	}
	& #boy.phase1.animation01 {
		animation 			: girl_phase1_01 1s ease-in-out;
	}	
}
.speech_area {
	display: none;
	
	& div.phase1:nth-child(1) {
		display 			: flex;
	}
	& div.phase1:nth-child(1) figure p {
		width: 26ch;
		padding-left 		: 1.5cqw;
		text-align: left;
	}
	& div.phase1:nth-child(1) figure span.typing_01 {
		display: inline-block;
 		white-space: nowrap;
 		overflow: hidden;
		animation: typing 1s steps(35, end) forwards;
	}
}

/* -- animation --*/

@keyframes doctor_phase1_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

@keyframes doctor_phase1_02 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

@keyframes girl_phase1_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

@keyframes typing {
	from {
		width: 0
	}
  	to { width: 100% }
}

/* == Phase 2
	みらいにチャレンジする「EXPO」？
============================================= */

.skit_area {
	& #girl.phase2 {
		left 				: 15cqw;
	}
	& #boy.phase2 {
		left 				: 1cqw;
	}
	& #boy.phase2.animation01 {
		animation 			: boy_phase2_02 1s;
	}
	& #doctor.phase2 {
		right				: 5cqw;
	}
}
.speech_area {
	& div.phase2 {
		display 			: flex;
	}
	& div.phase2 figure p {
		width: 33ch;
		min-height: 10cqw; 
		padding : 3cqw 1.5cqw 3cqw 10cqw;
		background: url("../images/home/bg_boy_01.png") no-repeat left center / 7cqw;
	}
	& div.phase2 figure p span.typing_01 {
		display: inline-block;
 		white-space: nowrap;
 		overflow: hidden;
		animation: typing 1s steps(35, end) forwards;
	}
	
}

@keyframes boy_phase2_02 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 3
	EXPO（Exposition）とは博覧会のこと。・・・・
============================================= */

.skit_area {
	& #girl.phase3 {
		left 				: 15cqw;
	}
	& #boy.phase3 {
		left 				: 1cqw;
	}
	& #doctor.phase3 {
		right				: 5cqw;
	}
	& #doctor.phase3.animation01 {
		animation 			: doctor_phase3_01 4.5s;
	}	
}
.speech_area {
	& div.phase3 {
		display 			: flex;
	}
	& div.phase3 figure {
		font-size 			: 3cqw;
		font-weight 		: 700;
		line-height  		: 1.4;
	}
	& div.phase3 figure p {
		width 				: 49ch;
		line-height  		: 1.4;
		background: url("../images/home/bg_doctor_01.png") no-repeat left center / 7cqw;
	}
	& div.phase3 figure p span {
		width 				: 0ch;
		display 			: inline-block;
 		white-space 		: nowrap;
 		overflow: hidden;
	}
	& div.phase3 figure p span.typing_01 {
		animation: typing 1.5s steps(35, end) forwards;
	}
	& div.phase3 figure p span.typing_02 {
		animation: typing 1.5s steps(35, end) forwards;
		animation-delay: 1.5s;
	}
	& div.phase3 figure p span.typing_03 {
		animation: typing 1.5s steps(35, end) forwards;
		animation-delay: 3.3s;
	}
}

@keyframes doctor_phase3_01 {
	0%,5%,15%,25%,35%,45%,55%,65%,75%,85%,95%,100% {
		bottom : 0;
	}
	10%,20%,30%,40%,60%,70%,80%,90% {
		bottom : 0.5cqw;
	}
}


/* == Phase 4
	⾃然を⼤切にし、限りある資源を⼤切に使う「環境‧エネルギー」
============================================= */

.skit_area {
	& #girl.phase4 {
		left 				: 15cqw;
	}
	& #boy.phase4 {
		left 				: 1cqw;
	}
	& #doctor.phase4 {
		right				: 5cqw;
	}
	& #doctor.phase4.animation01 {
		animation 			: doctor_phase4_01 2.5s;
	}	
}
.speech_area {
	& div.phase4 {
		display 			: flex;
	}
	& div.phase4 figure p {
		width 				: 34ch;
		
		padding-left 		: 1.5cqw;
		text-align 			: center;
		line-height 		: 1.4;
		
		& span.big {
			font-size 	: 4cqw;
			font-style 	: normal;
			font-weight : 800;
			color 		: #00cd97;
		}
	}
	& div.phase4 figure p span {
		width 				: 0ch;
		display 			: inline-block;
 		white-space 		: nowrap;
 		overflow: hidden;
	}
	& div.phase4 figure p span.typing_01 {
		animation: typing 1.5s steps(35, end) forwards;
	}
	& div.phase4 figure p span.typing_02 {
		animation: typing 1s steps(35, end) forwards;
		animation-delay: 1.5s;
	}
}

.island_container.step4 {
	width 						: 160cqw;
	top 						: 83%;
	left 						: 80%;
	transition 					: all 0.5s ease-in-out;
	opacity 					: 1;
}

@keyframes doctor_phase4_01 {
	0%,30%,60%,100% {
		bottom : 0;
	}
	15%,45%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 5
	便利で、安全‧安⼼に暮らせる「まち」
============================================= */

.skit_area {
	& #girl.phase5 {
		left 				: 15cqw;
	}
	& #boy.phase5 {
		left 				: 1cqw;
	}
	& #doctor.phase5 {
		right				: 5cqw;
	}
	& #doctor.phase5.animation01 {
		animation 			: doctor_phase5_01 2s;
	}	
}
.island_container.step5 {
	width 						: 160cqw;
	top 						: 76.5%;
	left 						: 18%;
	transition 					: all 0.8s;
	opacity 					: 1;
}

.speech_area {
	& div.phase5 {
		display 			: flex;
	}
	& div.phase5 figure p {
		width 				: 25ch;
		
		padding-left 		: 1.5cqw;
		text-align 			: center;
		line-height 		: 1.4;
		
		& span.big {
			font-size 	: 4cqw;
			font-style 	: normal;
			font-weight : 800;
			color 		: #ffad1d;
		}
	}
	& div.phase5 figure p span {
		width 				: 0ch;
		display 			: inline-block;
 		white-space 		: nowrap;
 		overflow: hidden;
	}
	& div.phase5 figure p span.typing_01 {
		animation: typing 1s steps(35, end) forwards;
	}
	& div.phase5 figure p span.typing_02 {
		animation: typing 1s steps(35, end) forwards;
		animation-delay: 1s;
	}
}
@keyframes doctor_phase5_01 {
	0%,30%,60%,100% {
		bottom : 0;
	}
	15%,45%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 6
	伝統や知恵を受け継ぎ、いきいきと過ごす「文化」
============================================= */

.skit_area {
	& #girl.phase6 {
		left 				: 15cqw;
	}
	& #boy.phase6 {
		left 				: 1cqw;
	}
	& #doctor.phase6 {
		right				: 5cqw;
	}
	& #doctor.phase6.animation01 {
		animation 			: doctor_phase6_01 2.5s;
	}	
}

.island_container.step6 {
	width 						: 160cqw;
	top 						: 6%;
	left 						: 2%;
	transition 					: all 0.8s;
	opacity 					: 1;
}

.speech_area {
	& div.phase6 {
		display 			: flex;
	}
	& div.phase6 figure p {
		width 				: 33ch;
		
		padding-left 		: 1.5cqw;
		text-align 			: center;
		line-height 		: 1.4;
		
		& span.big {
			font-size 	: 4cqw;
			font-style 	: normal;
			font-weight : 800;
			color 		: #e9425d;
		}
	}
	& div.phase6 figure p span {
		width 				: 0ch;
		display 			: inline-block;
 		white-space 		: nowrap;
 		overflow: hidden;
	}
	& div.phase6 figure p span.typing_01 {
		animation: typing 1.5s steps(35, end) forwards;
	}
	& div.phase6 figure p span.typing_02 {
		animation: typing 1s steps(35, end) forwards;
		animation-delay: 1.5s;
	}
}

@keyframes doctor_phase6_01 {
	0%,30%,60%,100% {
		bottom : 0;
	}
	15%,45%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 7
	⾷や健康など、毎⽇の⽣活を豊かに⽣きる「くらし」
============================================= */

.skit_area {
	& #girl.phase7 {
		left 				: 15cqw;
	}
	& #boy.phase7 {
		left 				: 1cqw;
	}
	& #doctor.phase7 {
		right				: 5cqw;
	}
	& #doctor.phase7.animation01 {
		animation 			: doctor_phase7_01 2.5s;
	}	
}

.island_container.step7 {
	width 						: 160cqw;
	top 						: -13%;
	left 						: 55%;
	transition 					: all 0.8s;
	opacity 					: 1;
}

.speech_area {
	& div.phase7 {
		display 			: flex;
	}
	& div.phase7 figure p {
		width 				: 33ch;
		
		padding-left 		: 1.5cqw;
		text-align 			: center;
		line-height 		: 1.4;
		
		& span.big {
			font-size 	: 4cqw;
			font-style 	: normal;
			font-weight : 800;
			color 		: #2fa1ff;
		}
	}
	& div.phase7 figure p span {
		width 				: 0ch;
		display 			: inline-block;
 		white-space 		: nowrap;
 		overflow: hidden;
	}
	& div.phase7 figure p span.typing_01 {
		animation: typing 1.5s steps(35, end) forwards;
	}
	& div.phase7 figure p span.typing_02 {
		animation: typing 1s steps(35, end) forwards;
		animation-delay: 1.5s;
	}
}

@keyframes doctor_phase7_01 {
	0%,30%,60%,100% {
		bottom : 0;
	}
	15%,45%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 8
	多様な⼈たちと、お互いに尊重し合い、協⼒する「共⽣」
============================================= */

.skit_area {
	& #girl.phase8 {
		left 				: 15cqw;
	}
	& #boy.phase8 {
		left 				: 1cqw;
	}
	& #doctor.phase8 {
		right				: 5cqw;
	}
	& #doctor.phase8.animation01 {
		animation 			: doctor_phase8_01 2.5s;
	}	
}

.island_container.step8 {
	width 						: 160cqw;
	top 						: 27%;
	left 						: 103%;
	transition 					: all 0.8s;
	opacity 					: 1;
}

.speech_area {
	& div.phase8 {
		display 			: flex;
	}
	& div.phase8 figure p {
		width 				: 37ch;
		
		padding-left 		: 1.5cqw;
		text-align 			: center;
		line-height 		: 1.4;
		
		& span.big {
			font-size 	: 4cqw;
			font-size 	: 4cqw;
			font-style 	: normal;
			font-weight : 800;
			color 		: #ff9200;
		}
	}
	& div.phase8 figure p span {
		width 				: 0ch;
		display 			: inline-block;
 		white-space 		: nowrap;
 		overflow: hidden;
	}
	& div.phase8 figure p span.typing_01 {
		animation: typing 1.5s steps(35, end) forwards;
	}
	& div.phase8 figure p span.typing_02 {
		animation: typing 1s steps(35, end) forwards;
		animation-delay: 1.5s;
	}
}

@keyframes doctor_phase8_01 {
	0%,30%,60%,100% {
		bottom : 0;
	}
	15%,45%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 9
	どんなことが紹介されているの？
============================================= */

.skit_area {
	& #girl.phase9 {
		left 				: 15cqw;
	}
	& #girl.phase9.animation01 {
		animation 			: girl_phase9_01 1s;
	}
	& #boy.phase9 {
		left 				: 1cqw;
	}
	& #doctor.phase9 {
		right				: 5cqw;
	}	
}

.island_container.step9 {
	transition 					: all 0.7s ease-in-out;
}
.speech_area {
	& div.phase9 {
		display 			: flex;
	}
	& div.phase9 figure p {
		/*border: solid 1px red;*/
		background: url("../images/home/bg_girl_01.png") no-repeat left center / 7cqw;
		width 				: 32ch;
		
		min-height: 10cqw; 
		padding : 3cqw 1.5cqw 3cqw 10cqw;
	}
	& div.phase9 figure p span.typing_01 {
		display: inline-block;
 		white-space: nowrap;
 		overflow: hidden;
		animation: typing 1s steps(35, end) forwards;
	}
}

@keyframes girl_phase9_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 10
	たくさんの企業や団体が、それぞれの特⻑をいかしたチャレンジをしていて、
============================================= */

.skit_area {
	& #girl.phase10 {
		left 				: 15cqw;
	}
	& #boy.phase10 {
		left 				: 1cqw;
	}
	& #doctor.phase10 {
		right				: 5cqw;
	}
	& #doctor.phase10.animation01 {
		animation 			: doctor_phase10_01 2.5s;
	}	
}

.island_container.step10 {
	transition 					: all 1s ease-in-out;
	opacity 					: 0.5;
}
.speech_area {
	& div.phase10 {
		display 			: flex;
	}
	& div.phase10 figure p {
		/*border: solid 1px red;*/
		background: url("../images/home/bg_doctor_01.png") no-repeat left center / 7cqw;
		width 				: 47ch;
		
		line-height 		: 1.4;
	}
	& div.phase10 figure p span {
		width 				: 0ch;
		display 			: inline-block;
 		white-space 		: nowrap;
 		overflow: hidden;
	}
	& div.phase10 figure p span.typing_01 {
		animation: typing 1.5s steps(35, end) forwards;
	}
	& div.phase10 figure p span.typing_02 {
		animation: typing 1s steps(35, end) forwards;
		animation-delay: 1.5s;
	}
}

@keyframes doctor_phase10_01 {
	0%,30%,60%,100% {
		bottom : 0;
	}
	15%,45%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 11
	それがパビリオン（展⽰館）として紹介されているんだよ。
============================================= */

.skit_area {
	& #girl.phase11 {
		left 				: 15cqw;
	}
	& #boy.phase11 {
		left 				: 1cqw;
	}
	& #doctor.phase11 {
		right				: 5cqw;
	}
	& #doctor.phase11.animation01 {
		animation 			: doctor_phase11_01 1s;
	}	
}

.island_container.step11 {
	opacity 					: 0.5;
	transition 		: opacity 0.5s ease-in-out;
}

.speech_area {
	& div.phase11 {
		display 			: flex;
	}
	& div.phase11 figure p {
		/*border: solid 1px red;*/
		background: url("../images/home/bg_doctor_01.png") no-repeat left center / 7cqw;
		width 				: 49ch;
		
		min-height: 10cqw; 
		padding : 3cqw 1.5cqw 3cqw 10cqw;
	}
	& div.phase11 figure p span.typing_01 {
		display: inline-block;
 		white-space: nowrap;
 		overflow: hidden;
		animation: typing 1s steps(35, end) forwards;
	}
}
@keyframes doctor_phase11_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 12
	最先端の取組が⾒られるんだね！
============================================= */

.skit_area {
	& #girl.phase12 {
		left 				: 13cqw;
	}
	& #girl.phase12.animation01 {
		animation 			: girl_phase12_01 1s;
	}
	& #boy.phase12 {
		left 				: 1cqw;
	}
	/*
	& #boy.phase12.animation01 {
		animation 			: boy_phase12_01 1s;
	}*/
	
	& #doctor.phase12 {
		right				: 5cqw;
	}
}

.island_container.step12 {
	transition 					: all 0.7s ease-in-out;
	opacity 					: 1;
	& .pin {
		opacity 			: 1;
		transition 		: opacity 0.3s ease-in-out;
	}
}
.speech_area {
	& div.phase12 {
		display 			: flex;
	}
	& div.phase12 figure p {
		width 				: 41ch;
		
		/*width: 70cqw;*/
	}
	& div.phase12 figure:nth-child(1) p {
		background: url("../images/home/bg_girl_01.png") no-repeat left center / 5.5cqw;
	}
	& div.phase12 figure:nth-child(2) p {
		background: url("../images/home/bg_boy_01.png") no-repeat left center / 5.5cqw;
	}
	
	
	& div.phase12 figure p span.typing_01 {
		display: inline-block;
 		white-space: nowrap;
 		overflow: hidden;
		animation: typing 1s steps(35, end) forwards;
	}
}

@keyframes girl_phase12_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

@keyframes boy_phase12_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 13
	それじゃあ、『みらいチャレンジEXPO』に⾏ってみよう！
============================================= */

.skit_area {
	& #girl.phase13 {
		left 				: 13cqw;
	}
	& #boy.phase13 {
		left 				: 1cqw;
	}
	& #doctor.phase13 {
		right				: 5cqw;
	}
	& #doctor.phase13.animation01 {
		animation 			: doctor_phase13_01 1s;
	}	
}

.island_container.step13 {
	opacity 					: 1;
	& .pin {
		opacity 			: 1;
	}
}

.speech_area {
	& div.phase13 {
		display 			: flex;
	}
	& div.phase13 figure p {
		/*border: solid 1px red;*/
		background: url("../images/home/bg_doctor_01.png") no-repeat left center / 7cqw;
		width 				: 49ch;
		
		min-height: 10cqw; 
		padding : 3cqw 1.5cqw 3cqw 10cqw;
	}
	& div.phase13 figure p span.typing_01 {
		display: inline-block;
 		white-space: nowrap;
 		overflow: hidden;
		animation: typing 1s steps(35, end) forwards;
	}
}
@keyframes doctor_phase13_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

/* == Phase 14
	Last Page
============================================= */

.skit_area {
	& #doctor.phase14 {
		right				: 0cqw;
		animation 			: doctor_phase14_01 0.8s ease-in-out;
	}
	& #girl.phase14 {
		left 				: 10cqw;
		animation 			: boy_phase14_01 0.8s ease-in-out;
	}
	& #boy.phase14 {
		left 				: -4cqw;
		animation 			: girl_phase14_01 0.8s ease-in-out;
	}
}

.island_container.step14 {
	width 						: 100cqw;
	top 						: 50%;
	left 						: 50%;
	transform 					: translate(-50%,-50%);
	transition 					: all 2.6s ease-in-out;
	opacity 					: 1;
	& .pin {
		opacity 			: 1;
	}
	
}

.speech_area.close {
	animation 				: contentScale 1s forwards;
	transform-origin 		: center;
}

@keyframes doctor_phase14_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

@keyframes boy_phase14_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}

@keyframes girl_phase14_01 {
	0%,50%,100% {
		bottom : 0;
	}
	25%,75% {
		bottom : 0.5cqw;
	}
}
@keyframes contentScale {
	0% {
		-webkit-transform: scale(1) translateX(-50%);
				transform: scale(1) translateX(-50%);
		opacity : 1;
	}
	100% {
		left:55%;
		-webkit-transform: scale(1.1) translateX(-50%);
				transform: scale(1.1) translateX(-50%);
		opacity : 0;
	}
}