@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;400;600&display=swap');

/* ルートの文字サイズを10pxに設定 */
html {
    font-size: 62.5%;
}
/* bodyのフォントサイズを1.6em（16px）に設定 */
body {
    font-size: 1.6em;
}
a {
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}
.fade {
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}
p {
	font-family: 'Noto Sans JP', sans-serif;
}
.fade:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
}
#headWarp {
	height: 60px;
	background: #0B66B4;
	display: flex;
	justify-content: center;
	align-items: center;
}
#headWarp h1 img {
	width: 240px;
}
.mainWarp {
	margin-top: 60px;
}
.mainImg ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
.mainImg ul li {
	width: 20%;
}
.mainCopy {
	background: #0B66B4;
	text-align: center;
	padding: 12px 0 24px;
}
.mainCopy h2 {
	color: #FFF;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
	font-size: 3.6rem;
}
.mainCopy img {
	width: 60%;
	display: block;
	margin: 0 auto;
}
.subImg ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
.subImg ul li {
	width: 20%;
}
.lead {
	text-align: center;
	border-bottom: 1px solid #666;
	padding-top: 24px;
}
.lead p {
	margin-bottom: 24px;
	font-weight: 700;
}
.playerBox.kawamura {
	background: url(../images/voice-kawamura.png) no-repeat right center;
	background-position-x: 60px;
	background-position-y: 30px;
	background-size: cover;
}
.playerBox.yamamoto {
	background: url(../images/voice-yamamoto.png) no-repeat left center;
	background-position-x: -140px;
	background-position-y: 30px;
	background-size: cover;
}
.playerBox.tsuya {
	background: url(../images/voice-tsuya.png) no-repeat left center;
	background-position-x: 60px;
	background-position-y: 30px;
	background-size: cover;
}
.playerBox.nishida {
	background: url(../images/voice-nishida.png) no-repeat left center;
	background-position-x: -170px;
	background-position-y: 30px;
	background-size: cover;
}
.playerBox.todo {
	background: url(../images/voice-todo.png) no-repeat left center;
	background-position-x: 60px;
	background-position-y: 30px;
	background-size: cover;
}
.playerWarp.left {
	background-color: #F2F2F2;
}
.playerWarp.left .playerBox {
	display: flex;
	justify-content: right;
	align-items: center;
}
.playerWarp.right .playerBox .voiceText {
	width: 180px;
	padding-top: 120px;
	text-align: center;
	margin: 0 auto 0 24px;
}
.playerWarp.left .playerBox .voiceText {
	width: 180px;
	padding-top: 120px;
	text-align: center;
	margin: 0 24px 0 auto;
}
.playerWarp.right .playerBox .voiceText ul li,
.playerWarp.left .playerBox .voiceText ul li{
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 400;
	font-size: 1.3rem;
}

.voiceText ul li span {
	font-weight: 600;
	color: #0B66B4;
	font-size: 2rem;
}
.voiceText ul li hr {
	width: 10%;
}
.voiceText ul li hr.left {
	margin-right: 8px;
}
.voiceText ul li hr.right {
	margin-left: 8px;
}
.voiceText .name {
	font-size: 3rem;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
}
.voiceText .name span {
	color: #0B66B4;
	font-weight: 600;
}
.voiceText .en-name {
	font-size: 1.2rem;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 200;
	margin-bottom: 12px;
}
.voiceText .biography {
	font-size: 1.2rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 200;
	line-height: 1.5em;
}
.playerWarp.right .playerBox .voiceCopy {
	background:rgba(255,255,255,0.8);
	padding: 12px;
	border-radius: 0 12px 12px 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.8em;
	margin-top: 80px;
	display: inline-block;
}
.playerWarp.right .playerBox .voiceCopy .note {
	font-size: 1.4rem;
	text-align: right;
	font-weight: 200;
}
.playerWarp.left .playerBox .voiceCopy {
	background:rgba(255,255,255,0.8);
	padding: 12px;
	border-radius: 12px 0 0 12px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.8em;
	margin-top: 80px;
	display: inline-block;
}
.playerWarp.left .playerBox .voiceCopy .note {
	font-size: 1.4rem;
	text-align: right;
	font-weight: 200;
}
.voiceWarp a {
	display: block;
}
.playerWarp.right .playerBox .voicesubImg {
	margin-top: 24px;
	padding-bottom: 24px;
}
.playerWarp.right .playerBox .voicesubImg img {
	display: block;
	margin: 0 auto 0 24px;
	width: 210px;
}
.playerWarp.left .playerBox .voicesubImg {
	margin-top: 24px;
	padding-bottom: 24px;
}
.playerWarp.left .playerBox .voicesubImg img {
	display: block;
	margin: 0 24px 0 auto;
	width: 210px;
}
.foot-banner {
	padding: 24px;
	background: #0B66B4;
	text-align: center;
}
.foot-banner p {
	color: #FFF;
	font-size: 1.4rem;
	margin-bottom: 8px;
}
.foot-banner img {
	width: 210px;
	height: auto;
	display: block;
	margin: 0 auto;
}
#foot {
	padding: 12px 0 36px 0;
}
.footWarp p {
	text-align: center;
	font-size: 1.2rem;
}
@media screen and (min-width:749px) {
#headWarp {
	height: 80px;
}
#headWarp h1 img {
	width: 590px;
}
.mainWarp {
	margin-top: 80px;
}
.mainImg {
	width: 100%;
}
.mainCopy h2 {
	font-size: 6rem;
}
.mainCopy h2 br {
	display: none;
}
.mainCopy img {
	width: 530px;
}
.lead {
	width: 100%;
	min-width: 1180px;
}
.lead p {
	margin-bottom: 24px;
	font-weight: 700;
	font-size: 3.2rem;
}
.lead p .sp {
	display: none;
}
.playerWarp .playerBox {
	width: 1180px;
	margin: 0 auto;
}
.playerBox.kawamura {
	background-position-x: right;
	background-position-y: bottom;
	background-size: 70%;
}
.playerBox.yamamoto {
	background-position-x: left;
	background-position-y: bottom;
	background-size: 70%;
}
.playerBox.tsuya {
	background-position-x: right;
	background-position-y: bottom;
	background-size: 70%;
}
.playerBox.nishida {
	background-position-x: left;
	background-position-y: bottom;
	background-size: 70%;
}
.playerBox.todo {
	background-position-x: right;
	background-position-y: bottom;
	background-size: 70%;
}
.voiceWarp {
	display: inline-block;
}
.playerWarp.right .playerBox {
	padding-left: 80px;
}
.playerWarp.right .playerBox .voiceText {
	width: 440px;
	padding-top: 120px;
	text-align: center;
}
.playerWarp.left .playerBox .voiceText {
	width: 440px;
	padding-top: 120px;
	text-align: center;
}
.playerWarp.right .playerBox .voiceText ul li,
.playerWarp.left .playerBox .voiceText ul li{
	font-size: 3rem;
}
.voiceText ul li span {
	font-size: 5.5rem;
}
.voiceText ul li hr {
	width: 80px;
}
.voiceText .name {
	font-size: 7rem;
}
.voiceText .en-name {
	font-size: 1.8rem;
}
.voiceText .biography {
	font-size: 1.8rem;
}
.voiceText .biography br {
	display: none;
}
.playerWarp.right .playerBox .voiceCopy {
	background:rgba(255,255,255,0.8);
	padding: 12px;
	border-radius: 12px;
	font-size: 4rem;
	margin-top: 120px;
}
.playerWarp.left .playerBox .voiceCopy {
	background:rgba(255,255,255,0.8);
	padding: 12px;
	border-radius: 12px;
	font-size: 4rem;
	margin-top: 120px;
}
.playerWarp.right .playerBox .voiceCopy .note {
	font-size: 1.8rem;
	font-weight: 200;
}
.playerWarp.left .playerBox .voiceCopy .note {
	font-size: 1.8rem;
	font-weight: 200;
}
.playerWarp.right .playerBox .voicesubImg img {
	display: block;
	margin: 0 auto!important;
	width: 300px;
}
.playerWarp.left .playerBox .voicesubImg img {
	display: block;
	margin: 0 auto!important; 
	width: 300px;
}
}