@charset "utf-8";
/* CSS Document */

.blueBox{
	margin:auto auto 2em;
	padding: 1em;
	max-width:1000px;
	box-sizing: border-box;
	background-color: #254884;
}

.blueBoxBorder{
	box-sizing: border-box; 
	padding: 1em; 
	background-color: #254884; 
	border: 1px solid transparent; 
	border-image-slice: 1; 
	border-image-source: linear-gradient(90deg,
			rgba(251, 207, 0, 1) 0%, 
			rgba(255, 252, 209, 1) 19%, 
			rgba(203, 155, 12, 1) 66%, 
			rgba(243, 225, 139, 1) 90%, 
			rgba(255, 252, 209, 1) 100%);
	color: #fff;
	text-align: center;
	font-size: 24px;
	font-weight: 800;
}
.scaBox{
margin: auto auto 4em;
max-width: 900px;
}
.scaBox p{
font-size: 16px;
line-height: 1.75em;
font-feature-settings: "palt";
}

.awardContainer{
margin: auto auto 4em;
display: flex;
justify-content: space-between;
max-width: 900px;
}

.acBox{
box-sizing: border-box;
width: 49%;
max-width: 440px;
border: solid 1px #000;
padding: 0.5em;
font-size: 16px;
}

.acBox h3{
padding: 0.5em;
background-color: #254884;
color: #fff;
text-align: center;
}

.acBox h4,.acBox p{
text-align: center;
}
.acBox h4{
margin: 0.5em auto;
font-weight: bold;
}

.acBox img{
width: 100%;
}

.oherEvent{
box-sizing: border-box;
margin: auto auto 4em;
padding: 1em;
max-width: 900px;
border: solid 1px #000;
text-align: center;
}

.oherEvent h2{
margin-bottom: 0.5em;
padding-bottom: 0.5em;
font-size: 24px;
font-weight: bold;
border-bottom: solid 1px #000;
}

.oherEvent h3{
font-size: 21px;
font-weight: bold;
}

.oherEvent p{
font-size: 16px;
}

.grayTit{
box-sizing: border-box;
margin: auto auto 1em;
padding: 0.5em;
max-width: 1000px;
background-color: #e6e6e6;
text-align: center;
font-size: 24px;
}

.acTable{
box-sizing: border-box;
margin: auto auto 4em;
max-width: 900px;
border-top: solid 1px #000;
border-left: solid 1px #000;
}

.acTable td{
padding: 0.5em;
width: 50%;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 14px;
vertical-align: top;
}

.acTable h3{
margin-bottom: 0.5em;
padding: 0.5em;
background-color: #d7e6e6;
}

.profileContainer{
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 868px;
}

.profileBox{
margin-bottom: 2em;
display: flex;
width: 48%;
max-width: 440px;
line-height: 1.5em;
}

.ProfilePhoto{
margin-right: 0.5em;
width: 100%;
max-width: 92px;
}

.profileTxt h3{
font-size: 18px;
font-weight: bold;
}

.profileTxt h4{
font-size: 16px;
font-weight: bold;
}

.profileTxt li{
font-size: 14px;
}

.moviePc {
  margin-bottom: 2em;
  text-align: center;
  /* 中央寄せのために、子要素がインラインブロックまたはブロック要素の場合は margin: 0 auto; も有効 */
}

/* iframe とファサード要素両方に共通のサイズとアスペクト比を適用 */
/* 既存の .moviePc iframe に加えて、.moviePc .youtube-facade も指定 */
.moviePc iframe,
.moviePc .youtube-facade {
  width: clamp(100px, 90%, 640px);
  /* height は aspect-ratio で自動計算されるため通常は不要 */
  aspect-ratio: 16 / 9;
  /* text-align: center の効果を受けさせるために、子要素をブロック要素にして中央に配置 */
  display: block;
  margin: 0 auto;
}

/* ファサード要素に特有のスタイル */
.moviePc .youtube-facade {
  position: relative; /* サムネイルとボタンを絶対配置するため */
  cursor: pointer;
  overflow: hidden; /* 子要素（サムネイル）がはみ出さないように */
  background-color: #000; /* ロード中の背景色など */
}

.moviePc .youtube-facade .youtube-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* サムネイル画像が要素を覆うように */
  display: block;
  transition: opacity 0.3s ease; /* ホバーエフェクトなど */
}

.moviePc .youtube-facade .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none; /* ボタン自体がクリックを捕捉しないように（親の.youtube-facadeでクリックを検出） */
}

/* （オプション）ホバー時のエフェクト */
.moviePc .youtube-facade:hover .youtube-thumbnail {
  opacity: 0.8;
}

/* iframe が追加された後にファサード要素が削除されるため、iframe には既存の .moviePc iframe スタイルが適用されます */


@media(max-width:600px){

	.awardContainer{
	display: block;
	}
	
	.oherEvent{
	width: 94%;
	}

	.acBox{
	margin: auto auto 1em;
	width: 100%;
	}
	
	.scaBox p{
	padding: 0 1em;
	}
	
	.acTable{
	width: 94%;
	}
	
	.profileContainer{
	display: block;
	}
	
	.profileBox{
	margin: auto auto 2em;
	width: 94%;
	max-width: 94%;
	}
}