:root{
	--main-color: #22AEA8 ;
	--mincho: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper{
	height: 100vh;
}
figure{
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

h2,h3,p,figcaption{
	color: #333;
}
p{
	font-size:1em;
	line-height: 1.8;
	margin-bottom: 1em;
	font-family: var(--mincho);
	text-align: justify;
}

/* ---------------------
	共通設定
--------------------- */
.container {
	display: block;
	margin:0 auto 150px;
	width:100%;
	padding:0 5%;
	max-width:1080px;
}
.h2{
	text-align: center;
	font-family: var(--mincho);
	font-size:2.5em;
	margin: 3em  0 1.5em;
	position: relative;
}
.h2::before {
	content:attr(data-en);
	color: var(--main-color);
	opacity: .3;
	position:absolute;
	top:-0.8em;
	left:50%;
	z-index: -999;
	transform: translate(-50%,0%);
	font-family: 'Oooh Baby', cursive;
	font-size: 2em;
}
.inline-block{
	display: inline-block;
}
.flex{
	display: flex;
}
a.link{
	font-family: var(--mincho);
	color: var(--main-color);
	display: block;
	text-align:center;
	margin-top: 3em;
	padding:10px 20px;
	border: 1px solid var(--main-color);
	transition-duration:.3s
}
a.link:hover{
	color: #fff;
	background: var(--main-color);
	transition-duration: .3s;
	cursor:pointer;
	}

ul li{
	list-style: none;
	width:100%;
	display: block;
	margin: 0 auto 1.5em;
	font-family: var(--mincho);
	color: var(--main-color);
	text-align: center;
}

/* ---------------------
	ヘッダー
--------------------- */
header {
	display: block;
  width: 100%;
}
/* ---------------------
	section#top
--------------------- */
#top{
	background:url("../img/topimg-pc.jpg");
	height:100vh;
	background-size: cover;
	background-position: center;
	position: relative;
}
#top svg{
	margin-top: 50vh;
	margin-left: 0;
	transform: translateY(-50%);
	max-width:600px;
	position: relative;
	text-shadow: 0px 0px 10px #000;
	z-index: 999;
}

#top::before{
	content:'';
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(#29b56d, #abdee5);
	mix-blend-mode: color-burn;	
	opacity: .5;
}

#top::after{
	content:'';
	display: block;
	width:550px;
	height:200px;
	background: var(--main-color);
	opacity: 0;
	mix-blend-mode: color-burn;
	position: absolute;
	transform: translateY(-50%);
	top:50%;
	left:0;
	z-index: 0;
	animation: titleback 2s ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: .5s;
}
@keyframes titleback {
	0%{
		width:0;
		opacity: 0
	}
	100%{
		width:550px;
		opacity:.5
	}
}

span[class^="square"]{
	position: absolute;
	display: block;
	background: #fff;
	transform: translate(0%,-50%);
	z-index: 998;
}
@keyframes square{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.square1{
	opacity:0;
	width:80px;
	height:80px;
	top:38vh;
	left:30px;
	animation: square ease-in-out forwards;
	animation-duration: 1s;
	animation-delay: .7s;
}
.square2{
	opacity:0;
	width:50px;
	height:50px;
	top:60vh;
	left:650px;
	animation: square ease-in-out forwards;
	animation-duration: 1.5s;
	animation-delay: .8s;
}
.square3{
	opacity:0;
	width:30px;
	height:30px;
	top:calc(60vh + 50px);
	left:712px;
	animation: square ease-in-out forwards;
	animation-duration: 1.7s;
	animation-delay: 1s;

}

/*スクロールダウン全体の場所*/
.scrolldown1{
	/*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:10px;
	/*全体の高さ*/
	height:80px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
	/*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
	/*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
	/*描画位置*/
	position: absolute;
	top: 0;
	/*線の形状*/
	width: 1px;
	height: 80px;
	background: #eee;
	/*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:50px;
		opacity: 1;
	}
	100%{
		height:0;
		top:100px;
		opacity: 0;
	}
}
/* ---------------------
	section#interviews
--------------------- */
#interview1 figure, #interview3 figure{
	margin-right: calc(50% - 50vw);
	position: relative;
	overflow: visible;
}
#interview2 figure{
	margin-left: calc(50% - 50vw);
	position: relative;
	overflow: visible;
}

/* 画像全体に焼き込みカラー重ねる */
figure img {
	display: block;
	width: 100%;
	height: 50vh;
	margin-bottom: 3em;
	object-position: top center;
	object-fit: cover;
}
figure:last-child img{
	object-position: center center;
}
/* 画像に四角いオブジェクトを重ねる */
#interview1 figure::before, #interview3 figure::before{
	content:'';
	position: absolute;
	width: 300px;
	height: 300px;
	top:-50px;
	left: -50px;
	background: linear-gradient(#29b56d, #abdee5);
	opacity: 0.3;
}
#interview2 figure::before{
	content:'';
	position: absolute;
	width: 300px;
	height: 300px;
	bottom:-50px;
	right: -50px;
	background: linear-gradient(#29b56d, #abdee5);
	opacity: 0.3;
}
.square4{
	width:50px;
	height:50px;
	top:60%;
	left:20%;
	}
.square5{
	width:30px;
	height:30px;
	top:calc(60% + 50px);
	left:calc(20% + 55px);
	}
.square6{
	width:50px;
	height:50px;
	top:60%;
	left:80%;
	}
.square7{
	width:30px;
	height:30px;
	top:calc(60% - 50px);
	left:calc(80% + 55px);
	}
section[id^="interview"] h2{
	font-size:1.3em;
	margin-bottom: 1em;
	font-family: var(--mincho);
	font-weight: bold;
}

.prof{
	display: block;
	font-size: .7em;
	margin-top: .7em;
}
.question{
	color: var(--main-color);
	font-family: var(--mincho);
	letter-spacing: 1px;
	font-weight: 600;
	font-size:1.3em;
	margin: 1.5em 0 1em;
	line-height: 1.5;
}

/* ---------------------
	section#link
--------------------- */

	/* リンクセクション */
		#link ul{
			margin: 0 auto;
		}
		#link ul li{
			background: var(--main-color);
			color: #fff;
			font-size: 20px;
			height: 80px;
			line-height: 1.5;
			font-weight: 800;
			font-family: sans-serif;
			transition: .3s;
			border: 2px solid var(--main-color);
			padding: 15px;
			border-radius:100px;
			position: relative;
		}
		#link ul li:hover{
			background: #fff;
			color: var(--main-color);
		}
		#link ul li:nth-child(2){
			background: #fff;
			color: var(--main-color);
			font-size: 20px;
			border: 2px solid var(--main-color);
		}

		#link ul li:nth-child(2):hover{
			background: var(--main-color);
			color: #fff;
		}

		#link ul li a{
		background-color: transparent;
		text-decoration: none;
		color: inherit;
		position: absolute;
		display: block;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		line-height: 80px;
		}
		
		.material-symbols-outlined {
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			padding-right: 10%;
			transition: .3s;
		}
		#link ul li a:hover .material-symbols-outlined{
			transform: translate(-40%,-50%);
			transition: .3s;

		}
		@media screen and (max-width:768px){


}

/* ---------------------
	フッター
--------------------- */
footer {
	position: sticky;
  	top: 100vh;
	padding: 10px;
	width: 100%;
	background: var(--main-color);
	font-size:12px;
	text-align: center;
	color: #fff;
}

/* ---------------------
	レスポンシブ設定
--------------------- */
@media screen and (min-width:1550px){
	figure {
		margin-right: calc(50% - 40vw);
		margin-left: calc(50% - 40vw);
	}

	figure img {
		display: block;
		width: 100%;
		height: 80vh;
		margin-bottom: 3em;
		object-fit: cover;
	}
}


@media screen and (max-width:768px){
	#top{
		height:100vh;
	}
	#top svg{
		width:80%;
		margin-top: 50vh; /* #top::after のtopの値（%）と合わせる */

	}
	#top::after{
		width:70%;
		top:50%;
		left:0;
		animation: titleback 2s ease-in-out forwards;
		animation-delay: .5s;
	}
	@keyframes titleback {
		0%{
			width: 0%;
		}
		100%{
			opacity:.5;
			width:70%;
		}
	}
	.square1{
	width:80px;
	height:80px;
	top:38vh;
	left:30px;
	}
	.square2{
		width:50px;
		height:50px;
		top:70vh;
		left:50vw;
	}
	.square3{
		width:30px;
		height:30px;
		top:calc(70vh + 50px);
		left:calc(50vw + 50px);
	}
	.square4{
		width:30px;
		height:30px;
		top:30%;
		left:20%;
	}
	.square5{
		width:15px;
		height:15px;
		top:calc(30% + 30px);
		left:calc(20% + 30px);
		}
	.square6{
		width:30px;
		height:30px;
		top:80%;
		left:80%;
		}
	.square7{
		width:15px;
		height:15px;
		top:calc(80% - 30px);
		left:calc(80% + 35px);
		}

	/* #interviews */
	#interview1 figure, #interview3 figure{
		margin-right: calc(50% - 50vw);
		position: relative;
	}
	#interview2 figure{
		width:100%;
		margin-left: calc(50% - 50vw);
		position: relative;
	}
	/* 画像に四角いオブジェクトを重ねる */
	#interview1 figure::before, #interview3 figure::before{
		content:'';
		position: absolute;
		width: 200px;
		height: 200px;
		top:-50px;
		left:-50px;
		background: linear-gradient(#29b56d, #abdee5);
		opacity: 0.3;
		/*mix-blend-mode: color-burn;*/
	}
	#interview2 figure::before{
		content:'';
		position: absolute;
		width: 200px;
		height: 200px;
		bottom:-50px;
		right: -50px;
		background: linear-gradient(#29b56d, #abdee5);
		opacity: 0.3;
		/*mix-blend-mode: color-burn;*/
	}	
	figure img {
		display: block;
		width: 100%;
		height: 30vh;
		margin-bottom: 3em;
		object-fit: cover;
	}
	#interviews h2,#interviews p {
		margin-left: 40px;
	}
	ul.flex{
		flex-wrap: wrap;
	}
	ul li{
		width:80%;
		display: block;
	}
	/*リンクセクション*/
	.material-symbols-outlined {
		display: none;
	}
}


@media screen and (max-width:500px){
	#top{
	background:url("../img/topimg-sp.jpg") no-repeat;
	background-size: cover;
	}
	.container{
		padding:0 5%;
		margin: 0 auto 90px;
	}
	.h2{
		font-size:1.8em;
	}
	.h2::before {
		width:80%;
	}
	.square1{
		width:50px;
		height:50px;
		top:35vh;
		left:10px;
	}
	.square2{
		width:40px;
		height:40px;
		top:70vh;
		left:55vw;
	}
	.square3{
		width:20px;
		height:20px;
		top:calc(70vh + 40px);
		left:calc(55vw + 40px);
	}
	
	/* #interviews */
	section[id^="interview"] span.small{
		font-size: 1em;
	}
	#interview1 figure, #interview3 figure{
		position: relative;
	}
	#interview2 figure{
		width:100%;
		position: relative;
	}
	/* 画像に四角いオブジェクトを重ねる */
	#interview1 figure::before, #interview3 figure::before{
		content:'';
		position: absolute;
		width: 120px;
		height: 120px;
		top:-30px;
		left:-30px;
		background: linear-gradient(#29b56d, #abdee5);
		opacity: 0.3;
	}
	#interview2 figure::before{
		content:'';
		position: absolute;
		width: 120px;
		height: 120px;
		bottom:-30px;
		right: -30px;
		background: linear-gradient(#29b56d, #abdee5);
		opacity: 0.3;
	}	

	figure img {
		height:40vh;
	}
	#interviews h2,#interviews h3, #interviews p {
		margin: 1em;
	}

}