html {
	font-size: var(--font-size-base);
}

body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	line-height: 1.5;
}

header {
	padding: 1em;
}

header a{
	display: inline-block;
	padding: 0;
	margin: 0;
}

.header-logo {
	display: block;
	max-width: 35%;
	height: auto;
	padding: 10px;
}

footer{
	width: 100%;
	padding: 1em;
	text-align: center;
	background: var(--secondary-bg-color);
}

footer p{
	color: var(--secondary-text-color);
	line-height: 1.5;
	white-space: pre-line;
}

/*- 本文 -*/

.titlelogo{
	width:100%;
	background: rgb(187,0,0);
	background: radial-gradient(circle, rgba(187,0,0,1) 0%, rgba(91,0,0,1) 100%);
	border-top: 10px solid #b39855;
	border-bottom: 10px solid #b39855;
}

.titlelogo p {
	line-height: 1.3;
	font-size: var(--font-size-large);
	color: var(--primary-bg-color);
	text-align: center;
}

/* 追加: タイトル画像のはみ出し防止設定 */
.titlelogo img {
	width: 100%;
	height: auto;
	display: block;
}

.container {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.contents{
	padding:1.5em;
}

.awards_wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 16px;
}

.awards_main {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 100%; /* スマホでは1列に表示 */
	max-width: 100%; /* スマホ幅を超えないようにする */
}

.awards {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex: 1 1 100%; /* スマホでは1列に表示 */
	max-width: 100%; /* スマホ幅を超えないようにする */
}

.awards img {
	max-width: 120px;
	height: auto;
	margin-right: 8px;
}

.awards-text {
	display: flex;
	flex-direction: column; /* テキストを縦並びに保持 */
}

.sankasho {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex: 1 1 100%; /* スマホでは1列に表示 */
	max-width: 100%; /* スマホ幅を超えないようにする */
}

.sankasho img {
	max-width: 120px;
	height: auto;
	margin-right: 8px;
}

.sankasho-text {
	display: flex;
	flex-direction: column; /* テキストを縦並びに保持 */
}

/*- 背景グラデ -*/

.bg-gold {
	background: linear-gradient(45deg, #DAAF08 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #DAAF08 90% 100%);
}

.bg-silver {
	background: linear-gradient(45deg, #A3A3A3 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #A3A3A3 90% 100%);
}

.bg-bronze {
	background: linear-gradient(45deg, #B79884 0%, #B79884 45%, #f3cfb8 70%, #B79884 85%, #B79884 90% 100%);
}

.video {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9のアスペクト比 */
	height: 0;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pagetop {
	height: 40px;
	width: 40px;
	position: fixed;
	right: 15px;
	bottom: 15px;
	background: #fff;
	border: solid 2px #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	opacity: 0.7;
}

.pagetop__arrow {
	height: 10px;
	width: 10px;
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	transform: translateY(20%) rotate(-45deg);
}

/* =========================================
   .video-link 関連の完全版CSS
   ========================================= */

/* �@ 親枠の設定（スマホ・デフォルト） */
.video-link {
  position: relative; /* これがないとボタンが変な場所に飛びます */
  display: block;
  width: 120px;       /* スマホでのサムネイル幅 */
  flex-shrink: 0;     /* 押しつぶされないように */
  margin-right: 8px;
}

/* �A 画像の設定 */
.video-link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* �B 再生ボタン：円 */
.video-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
  width: 48px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  z-index: 10; /* 数値を上げました */
  transition: all 0.3s ease;
}

/* �C 再生ボタン：三角 */
.video-link::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%); /* 微調整 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  z-index: 11; /* 円より上に */
  pointer-events: none;
}




/* タブレット向けスタイル */
@media (min-width: 601px) {
	html {
		font-size: var(--font-size-base);
	}
}

/* PC向けスタイル */
@media (min-width: 768px) {
	html {
		font-size: var(--font-size-large);
	}

	.header-logo {
		width:150px;
		padding:0 20px;
	}

	.titlelogo{
		border-top: 15px solid #b39855;
		border-bottom: 15px solid #b39855;
	}

    /* 追加: PCサイズでは最大幅を制限して中央寄せ */
    .titlelogo img {
        max-width: 1200px;
        margin: 0 auto;
    }

	.wrap{
		max-width: 1200px;
		margin: 0 auto;
	}

	.awards_wrap {
		flex-wrap: wrap; /* 子要素を折り返す設定 */
		flex-direction: row;
	}

	.awards_main {
		display: flex;
		flex-direction: column;
		padding: 8px;
		flex: 1 1 calc(50% - 16px); /* 横に3つ並べる */
		max-width: calc(50% - 16px); /* 最大幅を指定 */
	}

	.awards {
		flex: 1 1 calc(33.333% - 16px); /* 横に3つ並べる */
		flex-direction: column;
	}

	.awards img {
		max-width: 100%; /* PC時に画像サイズを調整 */
		margin-right: 0;
		margin-bottom:0.5rem;
	}

	.sankasho {
		flex: 1 1 calc(33.333% - 16px); /* 横に3つ並べる */
		max-width: calc(33.333% - 16px); /* 最大幅を指定 */
		flex-direction: column;
	}

	.sankasho img {
		max-width: 100%;
		margin-right: 0;
		margin-bottom: 0.5rem;
	}

	.awards img:hover,.sankasho img:hover {
		opacity: 0.5;
	}

	.titlelogo p {
		font-size: var(--font-size-ularge);
	}

/* PCでは幅を100%に広げる */
  .video-link {
    width: 100%;
    margin-right: 0;
  }

  /* PCサイズ用のボタン拡大 */
  .video-link::before {
    width: 64px;
    height: 64px;
  }

  .video-link::after {
    border-width: 11px 0 11px 20px;
  }

  /* PCのみホバーアクション */
  .video-link:hover::before {
    background-color: rgba(255, 0, 0, 0.85);
    transform: translate(-50%, -50%) scale(1.1);
  }
  
	.video-link:hover img {
    opacity: 0.5;
  }
}