/* update_240222 */

/* ========================================================================== */
/* 再生停止ボタン */
/* ========================================================================== */
.pause-play-button {
	position: relative;
	min-width: 76px;
	padding: 7px 7px 8px 25px;
	height: auto;
	opacity: 0.8;
	font-size: 10px;
	font-size: 62.5%;
	font-weight: bold;
	background-color: #000;
	color: #fff;
	text-align: center;
	pointer-events: auto;
}
.pause-play-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 9px;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background: url(/commoncms/img/icon_controlbutton-pause.png) no-repeat center center;
	background-size: contain;
}
.pause-play-button.is-paused::before {
	background: url(/commoncms/img/icon_controlbutton-play.png) no-repeat center center;
	background-size: contain;
}
@media screen and (max-width: 768px) {
	.pause-play-button {
		min-width: 70px;
		padding: 5px 6px 6px 20px;
	}
	.pause-play-button::before {
		left: 7px;
		width: 10px;
		height: 10px;
	}
}

/* ========================================================================== */
/* MP4,youtube動画のベース */
/* ========================================================================== */
/* 全画面 */
.stream_wrap {
	position: relative;
	margin-bottom: 40px;
}
.stream {
	position: relative;
	background-color: #F2F2F2;
}
/* 動画下キャプション */
.stream_caption-wrap {
	margin: 0 auto;
	max-width: 1200px;
	padding: 14px 0 12px;
}
.stream_caption-text {
	font-size: 16px;
	font-size: 100%;
	line-height: 1.4;
}
.stream_caption-link {
	position: relative;
	margin-top: 6px;
	padding: 0 0 0 11px;
	display: block;
	font-size: 16px;
	font-size: 100%;
	line-height: 1.4;
}
.stream_caption-link a::before {
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #4d4d4d;
  position: absolute;
  top: 6px;
  left: 0;
}
@media screen and (max-width: 1200px) {
	.stream_caption-wrap {
		padding: 12px 10px 10px;
	}
}
@media screen and (max-width: 768px) {
	.stream_wrap {
		margin-bottom: 25px;
	}
	.stream_caption-wrap {
		padding: 5px 10px;
	}
	.stream_caption-text,
	.stream_caption-link {
		font-size: 87.5%;
	}
  .stream_caption-link a::before{
    border-width:  4.5px 0 4.5px 5px;
    top: 5px;
  }
}

/* 動画 コンテンツ幅 */
.stream_wrap.is-content {
	max-width: 1200px;
	margin: 0 auto 40px;
}
.stream_wrap.is-content .stream_caption-wrap {
	padding: 16px 20px 14px;
}
@media screen and (max-width: 768px) {
	.stream_wrap.is-content {
		margin-bottom: 25px;
	}
	.stream_wrap.is-content .stream_caption-wrap {
		padding: 12px 10px 10px;
	}
}

/* コンテンツ幅よりやや狭め */
.stream_wrap.is-narrow {
	max-width: 920px;
	margin: 0 auto 40px;
}
.stream_wrap.is-narrow .stream_caption-wrap {
	padding: 16px 20px 14px;
}
@media screen and (max-width: 768px) {
	.stream_wrap.is-narrow {
		margin-bottom: 25px;
	}
	.stream_wrap.is-narrow .stream_caption-wrap {
		padding: 12px 10px 10px;
	}
}
/* 下層 ページ配置 */
@media screen and (max-width: 1200px) {
	#content > .stream_wrap:nth-child(1) {
		margin-top: calc(96px - 57px);
	}
}
@media screen and (max-width: 736px) {
	#content > .stream_wrap:nth-child(1) {
		margin-top: calc(66px - 57px);
	}
}

.stream_wrap + #topinfoarea {
	margin-top: -25px;
}
@media screen and (max-width: 768px) {
	.stream_wrap + #topinfoarea {
		margin-top: -5px;
	}
}

/* ========================================================================== */
/* 動画(MP4) */
/* ========================================================================== */
/* 動画 位置指定クラス */
/* class="mp4-video_box is-top": 上揃え	 */
/* class="mp4-video_box is-center": 中央揃え  */
/* class="mp4-video_box is-bottom": 下揃え	 */
/* ========================================================================== */

.mp4-video .mp4-video_box {
	position: relative;
	width: 100%;
	height: 620px;
	overflow: hidden;
}
.mp4-video .mp4-video_box video {
  position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
  top: 0;
  left: 0;
}
/* 中央揃え */
.mp4-video .mp4-video_box.is-center video {
	object-position: center;
}
/* 下揃え */
.mp4-video .mp4-video_box.is-bottom video {
	object-position: bottom;
}
/* 上揃え */
.mp4-video .mp4-video_box.is-top video {
	object-position: top;
}
/* 再生停止ボタン */
.mp4-video .mp4-video_button {
	position: absolute;
	top: 554px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1200px;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	z-index: 10;
	pointer-events: auto;
}
/* アンカーリンク */
.mp4-video .anchor-button {
	position: absolute;
	top: 522px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}
@media screen and (max-width: 1200px) {
	.mp4-video .anchor-button {
		top: 535px;
	}
}
@media screen and (max-width: 768px) {
	.mp4-video .mp4-video_box {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}
	.mp4-video .mp4-video_button {
		top: auto;
		bottom: 10px;
		width: calc(100% - 20px);
	}
	.mp4-video .anchor-button {
		margin-top: 20px;
		position: static;
		transform: none;
	}
}

/* 動画 コンテンツ幅 */
.stream_wrap.is-content.mp4-video .mp4-video_box {
	height: 560px;
}
.stream_wrap.is-content.mp4-video .mp4-video_button {
	top: 494px;
	max-width: 1120px;
	width: calc(100% - 40px);
}
/* アンカーリンク */
.stream_wrap.is-content.mp4-video .anchor-button {
	top: 462px;
}
@media screen and (max-width: 1200px) {
	.stream_wrap.is-content.mp4-video .anchor-button {
		top: 475px;
	}
	.stream_wrap.is-content.mp4-video .mp4-video_button {
		max-width: none;
		width: calc(100% - 20px);
	}
}
@media screen and (max-width: 768px) {
	.stream_wrap.is-content.mp4-video .mp4-video_box {
		height: auto;
	}
	.stream_wrap.is-content.mp4-video .mp4-video_button {
		top: auto;
		bottom: 10px;
	}
}


/* ========================================================================== */
/* youtube */
/* ========================================================================== */
.youtube-video:has(.anchor-button:not(.is-hide)) {
	padding-bottom: 40px;
}
.youtube-video .youtube-video_box {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.youtube-video .youtube-video_box iframe {
	display: block;
  width: 100%;
  height: 100%;
  border: none;
}
@media screen and (max-width: 768px) {
	.youtube-video:has(.anchor-button:not(.is-hide)) {
		padding-bottom: 25px;
	}
}
/* FireFox対策 */
@-moz-document url-prefix() {
	.youtube-video .anchor-button:not(.is-hide) {
		padding-bottom: 40px;
	}
}
@-moz-document url-prefix() {
	@media screen and (max-width: 768px) {
		.youtube-video .anchor-button:not(.is-hide) {
			padding-bottom: 25px;
		}
	}
}
/* FireFox対策 ここまで */

/* 下層 ページ配置 */
@media screen and (max-width: 1200px) {
	#content > .youtube-video:nth-child(1) {
		margin-top: calc(96px - 57px);
	}
}
@media screen and (max-width: 736px) {
	#content > .youtube-video:nth-child(1) {
		margin-top: calc(66px - 57px);
	}
}

.youtube-video + #topinfoarea {
	margin-top: -25px;
}
@media screen and (max-width: 768px) {
	.youtube-video + #topinfoarea {
		margin-top: -5px;
	}
}



/* ========================================================================== */
/* クリッカブルマップ */
/* ========================================================================== */
/* マップコンテンツのベース */
.map-select {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto 60px;
}
@media screen and (max-width: 1200px) {
	.map-select {
		display: block;
	}
}
@media screen and (max-width: 768px) {
	.map-select {
		margin: 30px auto 60px;
	}
}

/* マップのベース */
.clickable-map {
	position: relative;
	width: 49%;
}
.clickable-map .line {
	fill: none;
	stroke: #474645;
	stroke-miterlimit: 10;
	stroke-width: 0.5px;
}

.clickable-map path {
	stroke-width: 0px;
	fill: #767676;
}
.clickable-map a path {
	fill: #4D75B3;
}
.clickable-map a.is-hover path {
	fill: #002474;
}

@media screen and (max-width: 1200px) {
	.clickable-map {
		max-width: 580px;
		width: 100%;
		margin: 60px auto 0;
	}

}
@media screen and (max-width: 768px) {
	.clickable-map {
		display: none;
	}
}

/* パターン１ 47都道府県別 */
.map-select .select-area {
	width: 49%;
}
.map-select .select-area .select-area_name .is-PC {
	display: block;
}
.map-select .select-area .select-area_name .is-SP {
	display: none;
}
.map-select h1.select-area_name,
.map-select h2.select-area_name,
.map-select h3.select-area_name,
.map-select h4.select-area_name,
.map-select h5.select-area_name,
.map-select h6.select-area_name{
	border: none;
	margin-bottom: 0!important;
	line-height: 1.6;
}
.map-select h4.select-area_name,
.map-select h5.select-area_name {
	margin-bottom: 0 !important; /* h4,h5の同箇所がimportantで指定されていたため上書き */
}
.map-select .select-area_name {
	display: block;
	max-width: 320px;
	padding: 12px;
	box-sizing: border-box;
	font-size: 16px;
	font-size: 100%;
	font-weight: bold;
	background-color: #EDEEF4;
	text-align: center;
}
.map-select .select-area_name:not(:first-child) {
	margin-top: 22px;
}
.map-select .select-area_list {
	margin-top: 8px;
}
.map-select .select-area_list li {
	display: inline-block;
	font-size: 18px;
	font-size: 112.5%;
	line-height: 2;
}
.map-select .select-area_list li:not(:last-child)::after {
	content: '｜';
	margin: 0 0 0 5px;
}
.map-select .select-area_list a.is-hover {
	text-decoration: underline;
}
@media screen and (max-width: 1200px) {
	.map-select .select-area {
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.map-select .select-area .select-area_name .is-PC {
		display: none;
	}
	.map-select .select-area .select-area_name .is-SP {
		display: block;
	}
	.map-select .select-area_name {
		max-width: none;
		padding: 0;
		background-color: transparent;
	}
	.map-select .select-area_name button {
		position: relative;
		width: 100%;
		padding: 0;
		min-height: 41px;
		display: block;
		font-size: 18px;
		font-size: 112.5%;
		line-height: 2.15;
		font-weight: bold;
		color: #fff;
		background-color: #132474;
		border: 1px solid #132474;
		font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",Verdana, Arial,  sans-serif;
	}
	.map-select .select-area_name button[aria-expanded="true"]::before,
	.map-select .select-area_name button[aria-expanded="false"]::before {
		content: '';
		position: absolute;
		right: 10px;
		width: 0px;
		height: 0px;
		border-top: 4px solid transparent;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
		border-bottom: 4px solid #fff;
	}
	.map-select .select-area_name button[aria-expanded="true"]::before {
		top: 33%;
	}
	.map-select .select-area_name button[aria-expanded="false"]::before {
		top: 45%;
		transform: rotate(180deg);
	}

	.map-select .select-area_name:not(:first-child) {
		margin-top: 22px;
	}
	.map-select .select-area_list {
		margin-top: 0;
		display: flex;
		flex-wrap: wrap;
	}
	.map-select .select-area_list li {
		width: 50%;
		padding: 0;
		border-right: 1px solid #132474;
		border-bottom: 1px solid #132474;
		background-color: #F2F2F2;
		font-size: 16px;
		font-size: 100%;
		font-weight: bold;
		text-align: center;
		line-height: 2.5;
		min-height: 41px;
		box-sizing: border-box;
		margin-bottom: 0;
	}
	.map-select .select-area_list li:nth-child(odd) {
		border-left: 1px solid #132474;

	}
	/* 偶数の場合は最後と最後から2番目、奇数の場合は最後のみ */
	.map-select .select-area_list li:nth-child(even):not(:nth-child(-2)),
	.map-select .select-area_list li:nth-child(odd):last-child {
		border-right: 1px solid #132474;
	}
	.map-select .select-area_list li:not(:last-child)::after {
		content: none;
	}
	.map-select .select-area_list li a {
		display: block;
		height: 100%;
	}
	.map-select .select-area_list li a:focus-visible {
		outline-offset: -1px;
	}
	/* safariの時のみ */
	_::-webkit-full-page-media, _:future, :root .map-select .select-area_list li a:focus-visible {
		outline-width: 0;
		outline-offset: -3px;
	}
	/* firefoxの時のみ */
	@-moz-document url-prefix(){
		.map-select .select-area_list li a:focus-visible {
			outline-offset: -2px;
		}
	}
}
@media screen and (max-width: 736px) {
	.map-select h2.select-area_name {
		font-size: 16px !important; /* h2の同箇所がimportantで指定されていたため上書き */
		font-size: 100% !important; /* h2の同箇所がimportantで指定されていたため上書き */
	}
}


/* パターン２ 東西別 4地方別 */
.map-select .select-area2 {
	width: 46%;
}
.map-select h1.select-area2_name,
.map-select h2.select-area2_name,
.map-select h3.select-area2_name,
.map-select h4.select-area2_name,
.map-select h5.select-area2_name,
.map-select h6.select-area2_name{
	border: none;
	margin: 0;
	line-height: 1.6;
}
.map-select h4.select-area2_name,
.map-select h5.select-area2_name {
	margin-bottom: 0 !important; /* h4,h5の同箇所がimportantで指定されていたため上書き */
}
.map-select .select-area2_name {
	position: relative;
	padding: 0;
	display: block;
	max-width: 320px;
	box-sizing: border-box;
	font-size: 16px;
	font-size: 100%;
	font-weight: bold;
	color: #fff;
	text-align: center;
}
.map-select .select-area2_name a {
	display: block;
	padding: 12px;
	background-color: #4D75B3;
	color: #fff;
}
.map-select .select-area2_name.disabled {
	padding: 13px;
	background-color: #767676;
	pointer-events: none;
}
.map-select .select-area2_name:not(:first-child) {
	margin-top: 22px;
}
.map-select .select-area2_name::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(45deg);
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.map-select .select-area2_name.disabled::before {
	content: none;
}

.map-select .select-area2_name a:hover {
	text-decoration: none;
}
.map-select .select-area2_name a.is-hover {
	text-decoration: none;
	background-color: #132474;
}
.map-select .select-area2_list {
	margin-top: 8px;
}
.map-select .select-area2_list li {
	display: inline-block;
	font-size: 16px;
	font-size: 100%;
	line-height: 2;
}
.map-select .select-area2_list li:not(:last-child)::after {
	content: '・';
}
@media screen and (max-width: 1200px) {
	.map-select .select-area2 {
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.map-select .select-area2_name{
		max-width: none;
	}
	.map-select .select-area2_name:not(:first-child) {
		margin-top: 20px;
	}
	.map-select .select-area2_list {
		margin-top: 6px;
	}
	.map-select .select-area2_list li {
		font-size: 14px;
		font-size: 87.5%;
	}
}
@media screen and (max-width: 736px) {
	.map-select h2.select-area2_name {
		font-size: 16px !important; /* h2の同箇所がimportantで指定されていたため上書き */
		font-size: 100% !important; /* h2の同箇所がimportantで指定されていたため上書き */
	}
}

/* 20240522追記：.tabWrapper内にある地図パーツの都道府県名に下余白が出ないよう修正 */
.tabWrapper .map-select ul li{
	margin-bottom: 0;
}

/* 下層 ページ配置 */
@media screen and (max-width: 1200px) {
	#content > .map-select:nth-child(1) {
		margin-top: calc(96px - 57px + 30px);
	}
}
@media screen and (max-width: 736px) {
	#content > .map-select:nth-child(1) {
		margin-top: calc(66px - 57px + 30px);
	}
}