/* CSS Document */

#visual {
	width: 100%;
	position: relative;
}
#visual .image {
	width: calc( 100vw * ( 1655 / 1918 ) ); /* 画像の幅を80%に */
}
#visual .image img {
	width: 100%;	
}
#visual .title {
	position: absolute;
	width: calc( 100vw * ( 494 / 1918 ) ); /* タイトルの幅を80%に */
	top: calc( 100vw * ( 591 / 1918 ) ); /* タイトルのtop位置を80%に */
	left: calc( 100vw * ( 1250 / 1918 ) ); /* タイトルのleft位置を80%に */
	background-color: #f18700;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(100vw * (60/1920) ); /* フォントサイズを80%に */
	color: #fff;
}

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 767px) {
	#visual .image {
		width: calc( 100vw * ( 626 / 730 ));
	}
	#visual .title {
		position: absolute;
		width: calc( 100vw * ( 220 / 730 ));
		top: calc( 100vw * ( 260 / 730 ));
		left:  calc( 100vw * ( 445 / 730 ));
		font-size: calc(100vw * (26.8/730));
	}
}

#staff01 {
	padding-top: calc(70px * 0.8);
}
.staff-wrap {
	padding-bottom: calc(200px * 0.8);
}
.staff-wrap .header-wrap {
	width: calc(1207px * 0.8); /* 幅を80%に */
	margin: 0 auto;
	padding-bottom: calc(120px * 0.8); /* パディングを80%に */
}
.staff-wrap .header-wrap .video,
.staff-wrap .header-wrap .image {
	padding-bottom: calc(100px * 0.8); /* パディングを80%に */
}
.staff-wrap .header-wrap .video video {
	width: 100%;
}
.staff-wrap .header-wrap .image img {
	width: 100%; /* 親要素の幅に追従 */
}
.staff-wrap .header-wrap h2 {
	text-align: center;
	font-size: calc(40px * 0.8); /* フォントサイズを80%に */
}

@media only screen and (max-width: 1024px) {
	#staff01 {
		padding-top: calc(100vw * (70 / 1280));
	}
	.staff-wrap {
		padding-bottom: calc(100vw * (200 / 1280));
	}
	.staff-wrap .header-wrap {
		width: calc(100vw * (1207 / 1280));
		padding-bottom: calc(100vw * (120 / 1280));
	}
	.staff-wrap .header-wrap .image {
		padding-bottom: calc(100vw * (100 / 1280));
	}
	.staff-wrap .header-wrap h2 {
		font-size: calc(100vw * (40 / 1280));
	}
}

@media only screen and (max-width: 767px) {
	#staff01 {
		padding-top: 70px;
	}
	.staff-wrap {
		padding-bottom: calc(100vw * (200 / 730));
	}
	.staff-wrap .header-wrap {
		width: calc(100vw * (598 / 730));
		padding-bottom: calc(100vw * (40 / 730));
	}
	.staff-wrap .header-wrap .image {
		padding-bottom: calc(100vw * (40 / 730));
	}
	.staff-wrap .header-wrap h2 {
		text-align: center;
		font-size: calc(100vw * (30 / 730));
	}

}

.comment {
	display: flex;
	/*justify-content: space-between;*/
	justify-content: flex-start;
	align-items: center;
	padding-bottom: calc(80px * 0.8); /* 80px を 80% に */
}
.comment:nth-child(even) {
	flex-direction: row-reverse;
}
.comment .ico {
	/*width: calc(179px * 0.8); /* 179px を 80% に */
	width: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.comment .ico img {
	width: 123px;
	max-width: 100%;	
}
.comment .ico .name {
	padding-top: 5px;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.comment .ico .name span {
	display: flex;
	justify-content: center;
	align-items: center;
}
.comment .ico .name .section > span:first-child::after {
	content: ' ';
	width: 0.5em;
}
.comment .text {
	/*width: calc(956px * 0.8); /* 956px を 80% に */
	width: calc( 100% - (180px * 2));
}
.comment h3.showPc {
	display: flex !important;
}
.comment h3 {
	margin: 0 auto 30px auto;
	padding: 0;
	width: 543px;
	flex-direction: column;
	align-items: flex-start;
	border-bottom: 2px solid #000;
}
.comment h3 .en {
	color: #eb616a;
	font-size: 21px;
}
.comment h3 .ja {
	font-size: 25px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.comment .text p {
	font-size: calc(24px * 0.8); /* 24px を 80% に */
	line-height: 1.6;
	margin: 0 auto;
	padding: 0;
	width: 543px;
}

@media only screen and (max-width: 1024px) {
	.comment {
		padding-bottom: calc(100vw * (80 / 1280));
	}
	.comment .ico {
		width: calc(100vw * (180 / 1024));
	}
	.comment .ico img {
		width: calc(100vw * (122 / 1024));
	}
	.comment .ico .name {
		padding-top: calc(100vw * (5 / 1024));
		font-size: calc(100vw * (14 / 1024));
	}
	.comment .text {
		/*width: calc(100vw * (956 / 1280));*/
		width: calc( 100% - ( (100vw * (180 / 1024)) * 2) );
	}
	.comment h3 {
		margin: 0 auto calc(100vw * (30 / 1280)) auto;
		width: calc(100vw * (543 / 1024));
	}
	.comment h3 .en {
		font-size: calc(100vw * (21 / 1024));
	}
	.comment h3 .ja {
		font-size: calc(100vw * (25 / 1024));
	}
	.comment .text p {
		font-size: calc(100vw * (24 / 1280));
		width: calc(100vw * (543 / 1024));
	}
}

@media only screen and (max-width: 767px) {
	.comment {
		padding-bottom: calc(100vw * (80 / 730));
		width: calc(100vw * (600 / 730));
		margin: 0 auto;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.comment:nth-child(even)  {

	}
	.comment h3.showPc {
		display: none !important;
	}
	.comment h3.showSp {
		width: 100%;
		display: flex !important;
		text-align: center;
		align-items: center;
		justify-content: center;
	}
	.comment h3.showSp span {

	}
	.comment .ico {
		width: calc(100vw * (125 / 730));
		
		padding-bottom: calc(100vw * (20 / 730));
	}
	.comment .ico img {
		width: calc(100vw * (125 / 730));	
	}
	.comment .ico .name {
		width: calc(100vw * (125 / 730));
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: calc(100vw * (16 / 730));
	}
	.comment .ico .name .section {
		display: flex;
		flex-wrap: wrap;
	}
	.comment .ico .name .section::after {
		display: none;
	}
	.comment .text {
		width: calc(100vw * (435 / 730));
	}
	.comment h3 {
		margin: 0 auto calc(100vw * (30 / 730)) auto;
		width: calc(100vw * (600 / 730));
	}
	.comment h3 .en {
		font-size: calc(100vw * (16 / 730));
	}
	.comment h3 .ja {
		font-size: calc(100vw * (22 / 730));
		padding-bottom: 1em;
	}
	.comment .text p {
		width: 100%;
		font-size: calc(100vw * (22 / 730));
	}
}