/*---top---*/
body{
	font-family: 'Arial','游ゴシック',YuGothic,'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','メイリオ','Meiryo', sans-serif !important;

}

/*============================
#MAP
============================*/

.t_map{
	position:relative;
	height: min(792vw / 19.2, 792px);
	overflow:hidden;
}
.t_map_logo{
	position:absolute;
    	width: min(250vw / 19.2, 250px);
    	height: min(123vw / 19.2, 123px);
    	top: min(10vw / 19.2, 10px);
    	right: min(10vw / 19.2, 10px);
	z-index:10;
}
.map_conts{
	position:absolute;
}
.map_conts li img{
    	max-width: 100%;
    	height: auto;
    	vertical-align: middle;
}
.map_conts .popup-open p{
	font-size: min(14 / 1920 * 100vw, 14px);
	font-weight:bold;
	padding:0;
	background-color:#ffe42c;
	border-radius:50px;
	padding:8px 0px;
	border: 3px solid #fff;
	position:relative;
	z-index:1;
	transition:0.3s;
	text-align:center;
}
.map_conts a{
	text-decoration:none;
	color:#000;
}

/*map_contents*/
.ill01{
    	width: min(250vw / 19.2, 250px);
    	height: min(204vw / 19.2, 204px);
    	top: min(340vw / 19.2, 340px);
    	left: min(400vw / 19.2, 400px);
	z-index:2;
}
.ill01 p{
    	width: min(270vw / 19.2, 270px);
    	margin:-20px;
}
.yaruzo01{
    	width: min(105vw / 19.2, 105px);
    	height: min(90vw / 19.2, 90px);
    	position: absolute;
	top: min(100vw / 19.2, 100px);
    	left: min(-30vw / 19.2, -30px);
}
.ill02{
    	width: min(264vw / 19.2, 264px);
    	height: min(259vw / 19.2, 259px);
    	top: min(178vw / 19.2, 178px);
    	left: min(557vw / 19.2, 557px);
}
.ill02 p{
    	width: min(270vw / 19.2, 270px);
	margin-top: -110px;
    	margin-left: 40px;
}
.ill03{
    	width: min(252vw / 19.2, 252px);
    	height: min(232vw / 19.2, 232px);
    	top: min(25vw / 19.2, 25px);
    	left: min(882vw / 19.2, 882px);
}
.ill03 p{
    	width: min(200vw / 19.2, 200px);
	margin-top: -50px;
}
.ill04{
	width: min(268vw / 19.2, 268px);
    	height: min(240vw / 19.2, 240px);
    	top: min(38vw / 19.2, 38px);
    	right: min(260vw / 19.2, 270px);
}
.ill04 p{
    	width: min(320vw / 19.2, 320px);
	margin-top: -70px;
}
.ill05{
    	width: min(278vw / 19.2, 278px);
    	height: min(282vw / 19.2, 282px);
    	top: min(295vw / 19.2, 295px);
    	right: min(240vw / 19.2, 240px);
}
.ill05 p{
    	width: min(320vw / 19.2, 320px);
	margin-top: -50px;
}
.ill06{
    	width: min(400vw / 19.2, 400px);
    	height: min(306vw / 19.2, 306px);
    	top: min(270vw / 19.2, 270px);
    	left: min(860vw / 19.2, 860px);
}
.ill06 p{
    	width: min(280vw / 19.2, 280px);
	margin-top: -60px;
	margin-left:60px;
}
.yaruzo02{
    	width: min(162vw / 19.2, 162px);
    	height: min(109vw / 19.2, 109px);
    	position: absolute;
	top: min(145vw / 19.2, 145px);
    	left: min(-30vw / 19.2, -30px);
}
.ill07{
    	width: min(160vw / 19.2, 160px);
    	height: min(150vw / 19.2, 150px);
    	top: min(562vw / 19.2, 562px);
    	left: min(665vw / 19.2, 665px);
}
.ill07 p{
    	width: min(130vw / 19.2, 210px);
	margin-top: 0px;
	margin-left:10px;
}
.ill11{
    	width: min(160vw / 19.2, 160px);
    	height: min(150vw / 19.2, 150px);
    	top: min(580vw / 19.2, 580px);
    	left: min(860vw / 19.2, 860px);
}
.ill11 p{
    	width: min(250vw / 19.2, 250px);
	margin-top: 10px;
	margin-left:-60px
}
.yaruzo03{
    	width: min(94vw / 19.2, 94px);
    	height: min(101vw / 19.2, 101px);
    	position: absolute;
	top: min(90vw / 19.2, 90px);
    	right: min(-50vw / 19.2, -50px);
}
.ill08{
    	width: min(197vw / 19.2, 197px);
    	height: min(212vw / 19.2, 212px);
	top: min(575vw / 19.2, 575px);
    	right: min(515vw / 19.2, 515px);
}
.ill08 p{
    	width: min(170vw / 19.2, 170px);
	margin-top: -50px;
	margin-left:60px;
}
.yaruzo04{
    	width: min(110vw / 19.2, 89px);
    	height: min(101vw / 19.2, 101px);
    	position: absolute;
	top: min(90vw / 19.2, 90px);
    	right: min(-50vw / 19.2, -50px);
}
.ill09{
    	width: min(355vw / 19.2, 355px);
    	height: min(348vw / 19.2, 348px);
	top: min(405vw / 19.2, 405px);
    	right: min(0vw / 19.2, 0px);
}
.ill09 p{
    	width: min(240vw / 19.2, 240px);
	margin-top: -50px;
	margin-left:60px;
}
.yaruzo05{
    	width: min(96vw / 19.2, 96px);
    	height: min(83vw / 19.2, 83px);
    	position: absolute;
	bottom: min(43vw / 19.2, 43px);
    	right: min(50vw / 19.2, 50px);
}
.ill010{
    	width: min(355vw / 19.2, 355px);
    	height: min(348vw / 19.2, 348px);
	top: min(405vw / 19.2, 405px);
    	right: min(0vw / 19.2, 0px);
}
.ill10 p{
    	width: min(130vw / 19.2, 130px);
	margin-top: -100px;
	margin-left:330px;
	font-size: min(14 / 1920 * 100vw, 14px);
	font-weight:bold;
	padding:0;
	background-color:#ffe42c;
	border-radius:50px;
	padding:10px 0px;
	line-height:18px;
	border: 3px solid #fff;
	position:relative;
	z-index:1;
	transition:0.3s;
	text-align:center;
}
.yaruzo06{
    	width: min(128vw / 19.2, 128px);
    	height: min(118vw / 19.2, 118px);
    	position: absolute;
	bottom: min(90vw / 19.2, 90px);
    	right: min(-90vw / 19.2, -90px);
}

.t_map_sns{
	position:absolute;
    	width: min(280vw / 19.2, 280px);
    	height: min(200vw / 19.2, 200px);
	top: min(50vw / 19.2, 50px);
    	left: min(140vw / 19.2, 140px);
}
.map_sns{
    	width: min(70vw / 19.2, 70px);
    	height: min(70vw / 19.2, 70px);
	position:absolute;
}
.sns01{
    	top:0;
	left:0;
}
.sns02{
    	top:0;
	right:0;
}
.sns03{
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	margin: auto;
}
.sns04{
    	bottom:0;
	left:0;
}
.sns05{
    	bottom:0;
	right:0;
}

.t_sns_tl{
	width: min(100vw / 19.2, 100px);
	font-size: min(14 / 1920 * 100vw, 14px);
    	font-weight: bold;
    	padding: 0;
    	background-color: #ffe42c;
    	border-radius: 50px;
    	padding: 8px 0;
    	border: 3px solid #fff;
    	position: relative;
    	z-index: 1;
	text-align:center;
	margin:220px auto 0;
}

/*map_contents*/

/*popup*/

#popup01, #popup02, #popup03, #popup04, #popup05, #popup06, #popup07, #popup08, #popup09, #popup10{
  	display: none; /* label でコントロールするので input は非表示に */
}

.popup-open {
  	cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

.popup-overlay {
  	display: none; /* input にチェックが入るまでは非表示に */
}

#popup01:checked ~ .popup-overlay,
#popup02:checked ~ .popup-overlay,
#popup03:checked ~ .popup-overlay,
#popup04:checked ~ .popup-overlay,
#popup05:checked ~ .popup-overlay,
#popup06:checked ~ .popup-overlay,
#popup07:checked ~ .popup-overlay,
#popup08:checked ~ .popup-overlay,
#popup09:checked ~ .popup-overlay,
#popup10:checked ~ .popup-overlay,
#popup11:checked ~ .popup-overlay {
  	display: block;
  	z-index: 99999;
  	background-color: #00000070;
  	position: fixed;
  	width: 100%;
  	height: 100vh;
  	top: 0;
  	left: 0;
}
.popup-window {
  	width: 90vw;
  	max-width: 600px;
  	padding: 30px 30px 15px 30px ;
  	background-color: #ffffff;
  	border-radius: 15px;
  	position: fixed;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	z-index:6;
	animation-name:fadeInAnime;
	animation-duration:0.6s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.popup_top{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:95%;
	margin:0 auto;
}
.popup_top img{
	width:180px;
}
.pop_r{
	width:310px;
}
.pop_r p{
	width:310px;
	font-size:22px;
	font-weight:bold;
	color:#1fac4c;
	line-height:30px;
	margin:0 0 10px 0;
	padding:0;
	text-align:center;
}
.pop_txt{
	font-size:14px;
	line-height:20px;
}
.popup_link{
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	align-items:center;
	margin-top:15px;
}
.popup_link:after{
    	content: "";
    	display: block;
    	width: 32%;  /* .boxに指定したwidthと同じ幅を指定する */
    	height: 0;
}
.popup_link li{
	width:100%;
	margin:0 10px 10px 0;
}
.popup_link li a{
    	display: block;
    	background-color: #ffe42c;
    	border-radius: 50px;
    	border: 2px solid #ffe42c;
    	padding:15px 0 15px 25px;
    	font-size: 15px;
	letter-spacing:1px;
    	font-weight: bold;
    	text-decoration: none;
    	position: relative;
	line-height:18px;
	width:100%;
}
.popup_link li a:hover{
	background-color:#FFF;
}
.popup_link li a::after {
    	content: '';
    	border: 0;
    	border-top: solid 1px #000;
    	border-right: solid 1px #000;
    	display: inline-block;
    	width: 7px;
    	height: 7px;
    	position: absolute;
    	top: 50%;
    	right: 15px;
    	transform: translateY(-50%) rotate(45deg);
}
.popup_link li a:hover {
    	background-color: #fff;
}
.popup-close {
  	cursor: pointer;
  	position: absolute;
  	top: 15px;
  	right: 17px;
}
/*popup*/


/*map_human*/
.illh01{
	width: min(102vw / 19.2, 102px);
    	height: min(140vw / 19.2, 140px);
    	top: min(330vw / 19.2, 330px);
    	left: min(155vw / 19.2, 155px);
	animation: shaking 0.5s linear infinite;
}
.illh02{
    	width: min(52vw / 19.2, 52px);
    	height: min(79vw / 19.2, 79px);
    	top: min(270vw / 19.2, 270px);
    	left: min(400vw / 19.2, 400px);
	animation: dog 10s ease-in-out infinite normal;
}
@keyframes dog {
    	0% {
    	    transform: none
    	}

    	10% {
    	    transform: none
    	}

    	30% {
    	    transform: translate(178%, -30%)
    	}

    	40% {
    	    transform: translate(178%, -30%)
    	}

    	50% {
    	    transform: translate(178%, -30%) scale(-1, 1)
    	}

    	80% {
    	    transform: scale(-1, 1)
    	}

    	90% {
    	    transform: scale(-1, 1)
    	}

    	100% {
    	    transform: none
    	}
}
.illh03{
    	width: min(95vw / 19.2, 95px);
    	height: min(80vw / 19.2, 80px);
    	top: min(390vw / 19.2, 390px);
    	right: min(500vw / 19.2, 500px);
	animation: fuwafuwa 3s infinite;
}
@keyframes fuwafuwa {
  	0% { transform:translateY(0px); }
  	50% { transform:translateY(20px); }
  	100% { transform:translateY(  0px); }
}
.illh04{
    	width: min(94vw / 19.2, 94px);
    	height: min(90vw / 19.2, 90px);
    	top: min(380vw / 19.2, 380px);
    	left: min(650vw / 19.2, 650px);
}
.illh05{
    	width: min(38vw / 19.2, 38px);
    	height: min(55vw / 19.2, 55px);
    	bottom: min(30vw / 19.2, 30px);
    	left: min(230vw / 19.2, 230px);
	animation: swim1 7s ease-in-out infinite normal;
}
.illh06{
    	width: min(37vw / 19.2, 37px);
    	height: min(43vw / 19.2, 43px);
    	bottom: min(100vw / 19.2, 100px);
    	left: min(50vw / 19.2, 50px);
	animation: swim2 11s ease-in-out infinite normal;
}
@keyframes swim1 {
    	0% {
    	    transform: none
    	}
    	10% {
    	    transform: none
    	}
    	30% {
    	    transform: translate(-120%, -60%)
    	}
    	40% {
    	    transform: translate(-120%, -60%)
    	}
    	50% {
    	    transform: translate(-120%, -60%) scale(-1, 1)
    	}
    	80% {
    	    transform: scale(-1, 1)
    	}
    	90% {
    	    transform: scale(-1, 1)
    	}
    	100% {
    	    transform: none
    	}
}
@keyframes swim2 {
    	0% {
    	    transform: none
    	}
    	10% {
    	    transform: none
    	}
    	30% {
    	    transform: translate(40%, 60%)
    	}
    	40% {
    	    transform: translate(40%, 60%)
    	}
    	50% {
    	    transform: translate(40%, 60%) scale(-1, 1)
    	}
    	80% {
    	    transform: scale(-1, 1)
    	}
    	90% {
    	    transform: scale(-1, 1)
    	}
    	100% {
    	    transform: none
    	}
}
/*map_human*/

/*map_icon*/
.illi01{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(-20vw / 19.2, -20px);
    	left: min(120vw / 19.2, 120px);
    	z-index: 3;
}
.illi02{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(0vw / 19.2, 0px);
    	left: min(120vw / 19.2, 120px);
}
.illi03{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(0vw / 19.2, 0px);
    	left: min(90vw / 19.2, 90px);
}
.illi04{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(0vw / 19.2, 0px);
    	left: min(90vw / 19.2, 90px);
}
.illi05{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(0vw / 19.2, 0px);
    	left: min(120vw / 19.2, 120px);
}
.illi06{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(0vw / 19.2, 0px);
    	left: min(180vw / 19.2, 180px);
}
.illi07{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(0vw / 19.2, -30px);
    	left: min(140vw / 19.2, 100px);
}
.illi08{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(0vw / 19.2, 0px);
    	left: min(90vw / 19.2, 90px);
}
.illi09{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(60vw / 19.2, 60px);
    	left: min(180vw / 19.2, 180px);
}
.illi10{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(-200vw / 19.2, -200px);
    	left: min(280vw / 19.2, 280px);
}
.illi11{
    	width: min(41vw / 19.2, 41px);
    	height: min(71vw / 19.2, 71px);
	top: min(0vw / 19.2, -5px);
    	left: min(100vw / 19.2, 10px);
}
/*map_icon*/

.sdgs{
    	width: min(120vw / 19.2, 120px);
    	height: min(111vw / 19.2, 111px);
    	top: min(430vw / 19.2, 430px);
    	right: min(595vw / 19.2, 595px);
	transform: scale(1);
}
.sdgs a{
	display:block;
}
.sdgs a:hover{
	animation: puyon 1.0s linear 0s 1;
}

.map_conts:hover p{
	background-color:#FFF;
}
.map_conts:hover .icon{
	animation:shake 0.4s ease;
}
@keyframes shake {
    0%   { transform:translate(0, 0); }
    25%  { transform:translate(0, 10px); }
    50%  { transform:translate(0, -10px); }
    75%  { transform:translate(0, 10px); }
    100%  { transform:translate(0, 0px); }
}

.map_sns a img{
	transform: scale(1);
}	

.map_sns a img:hover {
  animation: puyon 1.0s linear 0s 1;
}

/* アニメーション */
@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}


/* 車 */
.car01 {
    	width: min(110vw / 19.2, 110px);
    	height: min(95vw / 19.2, 95px);
	top: min(95vw / 19.2, 95px);
    	right: min(118vw / 19.2, 118px);
	position:absolute;
	animation: shaking 0.5s linear infinite;
}
.car02 {
    	width: min(112vw / 19.2, 112px);
    	height: min(80vw / 19.2, 80px);
	top: min(81vw / 19.2, 81px);
    	left: min(650vw / 19.2, 650px);
	position:absolute;
	animation: shaking 0.5s linear infinite;

}
@keyframes shaking {
    0% {
        translate: 0 0px;
    }
    20% {
        translate: 0 1px;
    }
    40% {
        translate: 0 2px;
    }
    60% {
        translate: 0 1px;
    }
    80% {
        translate: 0 2px;
    }
    100% {
        translate: 0 1px;
    }
}
/* 車 */
/* 飛行機 */
.airplane{
    	width: min(322vw / 19.2, 322px);
    	height: min(212vw / 19.2, 212px);
    	animation: move 10s linear infinite;
	position:absolute;
	top: min(0vw / 19.2, 0px);
    	left: min(0vw / 19.2, 0px);
	z-index:500;
    	transform: translate(1500px, -200px);
	overflow:hidden;
}
@keyframes move {
    to {
        transform: translate(-400px, 450px);
    }
}
/* 飛行機 */
h1{
	display:none;
}

/* keyword */
.t_keyword{
	width: 90%;
	max-width:1300px;
	margin: 30px auto 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.t_keyword_logo{
	width: 158px;
}
.t_keyword_tag{
	width: 84%;
}
.t_keyword_tag ul{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.t_keyword_tag ul li{
	margin: 0 8px 8px 0;
	& a{
		font-size: 13px;
		background-color: #f2f2f2;
		padding: 4px 20px;
		display: block;
		border-radius: 50px;
		color: #000;
		text-decoration: none;
		transition: 0.2s;
		&:hover{
			background-color: #000;
			color: #fff;
		}
	}
}
.t_conts_tl_wrap{
	text-align: center;
}
.t_conts_tl{
	height: 55px;
}
.t_conts_tl_wrap span{
	background-color: #009844;
	color: #fff;
	font-size: 25px;
	padding: 5px 10px;
	font-weight: 500;
	margin-top: 10px;
}
/* yfp */
.t_yfp{
	background: url(/channel_setting/img/top/2026/t_park_bg.webp)no-repeat center top;
}
.t_yfp_in{
	width: 90%;
	max-width:1580px;
	margin: 0 auto;
	position: relative;
	min-height: 1735px;
}
.t_yfp_tl{
}
.t_yfp_box{
	position: absolute;
	width: 45%;
}
.t_yfp_box.teach{
	right:0;
	top:10%;
}
.t_yfp_more{
	width: 200px;
	margin: 20px auto 0;
}
.t_yfp_more a{
	background-color: #009844;
	color: #fff;
	text-align: center;
	border-radius: 50px;
	border: 1px solid #000;
	padding: 15px 0;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	display: block;
	transition: 0.2s;
	&:hover{
		background-color: #fff;
		color: #009844;
	}
}
.t_teach_com{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
}
.t_teach_com p{
	font-size: 15px;
	line-height: 23px;
	font-weight: 500;
}
.t_teach_com img{
	width: 30%;
}
.t_fyp_mv {
	position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
	background-color: #fff;
}
.t_fyp_mv iframe{
	aspect-ratio: 16 / 9;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 1px solid #000;
    box-sizing: border-box;
}
.t_yfp_box.challenge{
	left:0;
	top:35%;
}
.t_fyp_conts_s{
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}
.t_fyp_mv_s{
	width: 47%;
	position: relative;
    padding-bottom: 83.25%;
    height: 0;
    overflow: hidden;
	background-color: #fff;
}
.t_fyp_mv_s iframe{
	aspect-ratio: 9/16;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 1px solid #000;
    box-sizing: border-box;
}
.t_yfp_box.activity .t_fyp_conts{
	margin-top: 30px;
}
.t_yfp_box.activity{
	right:0;
	bottom:8%;
}
.t_yfp_yaruzou02 img{
  	position: absolute;
  	right: 0;
  	left: 0;
  	margin: 0 auto;
	top: 50%;
	width: 8%;
}

/*============================
t_modal
============================*/

.t_modal {
	background-color: rgba(68, 68, 68, .9);
	display: none; /* 初期非表示 */
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 550;
}
.t_modal-overlay {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
}
.t_modal-content {
	background: #fff;
	max-height: calc(90% - 40px);
	max-width: calc(90% - 40px);
	overflow-y: auto;
	padding: 20px;
	text-align: center;
}
.t_modal-close {
	background: none;
    	border: none;
    	color: #fff;
    	cursor: pointer;
    	font-size: 80px;
    	position: absolute;
    	right: 10px;
    	top: 20px;
    	font-weight: normal;
}
.t_modal img {
	max-width: 100%;
}
/*============================
gamifes
============================*/
.gamifes_wrap{
	background-color: #005151;
	padding: 60px 0 100px;
}
.gamifes_tl{
	text-align: center;
	margin-bottom: 80px;
}
.gamifes_tl img{
}
.gamifes_tl p{
	font-size: 25px;
	font-weight: bold;
	color: #fff;
	margin-top: -20px;
}
.gamifes_in{
	width: 1200px;
	margin: 0px auto;
	display: flex;
	justify-content: space-between;
}
.gamifes_box{
	width: 570px;
	background-color: #fff;
	text-align: center;
	border-radius: 10px;
	padding: 30px;
	box-sizing: border-box;
	border: 1px solid #000;
}
.gamifes_box p{
	font-size: 18px;
	font-weight: 500;
	line-height: 25px;
	margin: 20px 0;
	height: 50px;
}
.gamifes_box p span{
	display: block;
	color: #ec6e22;
	font-weight: bold;
}
.gamifes_box img{
}
.gamifes_box_tl{
    background: url(/channel_setting/img/top/t_gamifes_box_tl.webp) no-repeat center;
    font-size: 25px;
    text-align: center;
    height: 70px;
    font-weight: bold;
    line-height: 70px;
	margin-top: -65px;
}
.gamifes_mv{
	width: 235px;
	margin: 0 auto;
}
.gamifes_mv img{
	border-radius: 10px;
}
/* --- サムネイルのスタイル --- */
.thumbnail-container {
    cursor: pointer;
    position: relative;
	transition: all 0.3s ease;
}
.thumbnail-container:hover {
    filter: brightness(0.5);
}
.thumbnail-img {
    width: 230px;
    object-fit: cover;
    border-radius: 8px;
}
.play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 1);
    color: #0ead3e;
    padding: 19px 16px 19px 19px;
    border-radius: 50%;
    font-size: 25px;
	border: 1px solid #0ead3e;
}

/* --- ポップアップ（モーダル）のスタイル --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 420px;
    aspect-ratio: 9 / 16;
    background: #000;
}

/* iframeを親要素のいっぱいに広げる */
.modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 閉じるボタン */
.close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}
.gamifes_btn{
	width: 800px;
	margin: 50px auto 0;
}
.gamifes_btn a{
	background-color: #ecb922;
	border: 1px solid #000;
	border-radius: 50px;
	display: flex;
	justify-content: space-between;
	padding: 20px 30px 20px  50px;
	align-items: center;
	color: #000;
	text-decoration: none;
	transition: 0.2s;
}
.gamifes_btn a p{
	font-size: 20px;
	font-weight: bold;
}
.gamifes_btn a:hover{
	background-color: #fff;
}