@charset "utf-8";
/**
 * layout pc
 */


/* import
--------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap");
@import "init.css";


/* html, body
--------------------------------------------------*/

html,body{
	min-width:1200px;
}



/* 全体設定 */
main {
	position:relative;
	width:100%;
	min-width:1200px;
	min-height:100%;
	margin:0;
	text-align:left;
	font-family: Verdana,"メイリオ","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
	font-feature-settings:"palt";
	letter-spacing:0.075em;
	-webkit-text-size-adjust:none;
	color:#000000;
}


/* メインポップアップ */
.mfp-inline-holder .mfp-content {
	display: flex;
	align-items: center;
	min-height: 100vh;
}


#jt_popup {
	position: relative;
	width: 1000px;
	height:92dvh;
	background: #fff;
	border-radius: 8px;
	box-sizing: border-box;
	padding:60px 0 60px;
	overflow-y:scroll;
}

.jt-popup_logo_set{
	position:relative;
	width:80%;
	margin:30px auto 0;
}

.jt-popup_logo{
	display: block;
	width: 144px;
	margin-left: auto;
}


.jt-popup_caption{
	position:relative;
	margin:0 auto 30px;
}

.jt-popup_text{
	font-size:16px;
	font-weight:bold;
	color:#166FB0;
	text-align:center;
	line-height:2.2;
}

.jt-popup-transparent.mfp-bg {
	background: #166fb0;
	/*background: transparent;*/
}

/* フェード時の暗転も消す */
.jt-popup-transparent.mfp-fade.mfp-bg {
	/*opacity: 0;*/
}

.jt-popup-transparent .mfp-close {
	font-size: 48px;   /* ← 好きなサイズに */
	line-height: 1;
	width: 48px;
	height: 48px;
	padding-top:10px;
	padding-right:10px;
}



/* メインビジュアル */
.jt_mv{
	position: relative;
	width: 100%;
	height: 82vh;
	min-height: 650px;
	overflow: hidden;
	margin-bottom:40px;
	background: #166fb0;
}

.jt_mv_img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 108%;
	width: auto;
	max-width: none !important; /* グローバルの max-width:100% を打ち消し */
	
}

.jt_mv_caption01{
	position: relative;
	margin:40px auto 0;
}

.jt_mv_title01{
	position: relative;
	margin:20px auto 0;
}

.jt_mv_text01{
	position: relative;
	margin:20px auto 0;
}

.jt_mv_text02{
	position: absolute;
	top:40px;
	right:0;
}

@media screen and (max-width: 1400px) {
	.jt_mv_text02{
	width:300px;
	height:auto;
	}
}

.jt_mv_popup_btn{
	position: absolute;
	top:130px;
	right:45px;
}

.jt_mv_btn_set{
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 20px;          /* ボタン同士の間隔 */
	padding: 0 20px;    /* ブラウザ左右マージン */
	box-sizing: border-box;
}





/* 共通アニメ */
.over img{
	transition: filter 0.3s ease;
}

.over:hover img{
	filter: brightness(1.05);
	animation: poyon02 0.4s;
}

.over02{
	transition: opacity 0.3s ease;
}

.over02:hover{
	opacity:0.6;
}

.over03{
	transition: opacity 0.3s ease;
}

.over03:hover{
	animation: poyon02 0.4s;
}

@keyframes poyon02 {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.02); } /* 最大膨張 */
	100% { transform: scale(1); } /* 最終的に少し大きめで止まる */
}







/* ライン */
.jt_line01 {
	position:relative;
	width: 100%;
	height: 48px;
	background: url("../images/line_bg_pc.png") repeat-x;
}

.jt_line02{
	position:relative;
	width:100%;
	height:1px;
	background:#166FB0;
	left:50%;
	margin-left:-500px;
}



/* 特設サイトについて */
.jt_ct01{
	position:relative;
	padding-top:60px;
	padding-bottom:60px;
	
}

.jt_ct01_title{
	position:relative;
	margin:0 auto 60px;
}

.jt_ct01_box01{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
}

.jt_ct01_box01 img{
	width: auto;
	height: auto;
	flex-shrink: 0;
	max-width: none;      /* 縮小防止 */
}

.jt_ct01_text{
	position: relative;
	margin-top:-5px;
	color:#2F2F2F;
	font-size:20px;
	line-height:2;
	font-weight:bold;
}





/* 自転車交通安全ゲーム */

.jt_ct02_mv{
	position: relative;
	width: 100%;
	height: 470px;
	overflow: hidden;
	margin-bottom:60px;
}

.jt_ct02_mv_img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: auto;
	width: 100%;
	max-width: none !important; /* グローバルの max-width:100% を打ち消し */
}

.jt_ct02_title{
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:50px;
}


.jt_ct02_box01{
	position: relative;
	padding-bottom:60px;
}

.jt_ct02_caption{
	position: relative;
	left:50%;
	margin-left:-432px;
	
}

.jt_ct02_text{
	position: relative;
	width:510px;
	left:50%;
	margin-top:150px;
	margin-left:-80px;
	font-size:16px;
	font-weight:bold;
	line-height:2.2;
	color:#2F2F2F;
}

.jt_ct02_box01_img01{
	position:absolute;
	top:260px;
	left:50%;
	margin-left:-414px;
}

.jt_ct02_box01_img02{
	position:absolute;
	top:20px;
	left:50%;
	margin-left:50px;
}



/* 全編再生・ダウンロードはこちら */
.jt_ct03{
	text-align:center;
}

.jt_ct03_caption01{
	position:relative;
	width:100%;
	font-size:40px;
	line-height:1;
	color:#166FB0;
	font-weight:bold;
	text-align:center;
	margin-top:60px;
	margin-bottom:60px;
}

.jt_ct03_caption02{
	position:relative;
	width:100%;
	font-size:40px;
	line-height:1;
	color:#166FB0;
	font-weight:bold;
	text-align:center;
	margin-top:60px;
	margin-bottom:60px;
}

.jt_ct03_movie01_text{
	position:relative;
	font-size:20px;
	font-weight:bold;
	color:#2F2F2F;
	margin-top:40px;
	margin-bottom:20px;
}

.jt_ct03_movie_btn01{
	position: relative;
	width: 580px;
	margin:0 auto 60px;
	display: block;
	background:#E5E2E2;
	padding-top:50px;
	padding-bottom:50px;
	border-radius:8px;
	font-size:24px;
	font-weight:bold;
	line-height:1;
}

.jt_ct03_movie_icon{
	position:absolute;
	top:50%;
	right:30px;
	transform: translateY(-50%);
}


/* ムービーセット */
.jt_ct03_movie_set{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start; /* ← 上揃え */
	gap: 55px;
	margin-bottom:60px;
}

.jt_ct03_movie_box_caption{
	position: relative;
	font-size:24px;
	line-height:32px;
	font-weight:bold;
	display:block;
	text-align:left;
	border-bottom:solid 2px #156FB0;
	color:#156FB0;
	padding-bottom:8px;
	margin-bottom:18px;
}

.jt_ct03_movie_box_text{
	position: relative;
	height:107px;
	font-size:24px;
	line-height:40px;
	font-weight:bold;
	display:flex;
	text-align:left;
	border-bottom:solid 2px #156FB0;
	color:#156FB0;
	padding-bottom:8px;
	align-items: center;
}

.jt_ct03_movie_box_annotation{
	position: relative;
	display:flex;
	justify-content: space-between; /* ← 追加 */
	align-items: center;
	text-align:left;
	border-bottom:solid 2px #156FB0;
	padding-top:12px;
	padding-bottom:12px;
	margin-bottom:18px;
	padding-left:10px;
	padding-right:20px;
	box-sizing:border-box;
}


.jt_ct03_movie_box_annotation_text01{
	text-align:center;
	line-height:1.2;
	font-size:20px;
	font-weight:bold;
	color:#156FB0;
}


.jt_ct03_plus{
	margin-right:1em;
}


.jt_ct03_movie_box_annotation_text02{
	font-size:20px;
	color:#2F2F2F;
	font-weight:bold;
}



.jt_ct03_movie_btn02{
	position: relative;
	width: 297px;
	margin:0 auto 0;
	display: block;
	background:#E5E2E2;
	padding-top:30px;
	padding-bottom:30px;
	border-radius:8px;
	font-size:20px;
	font-weight:bold;
	line-height:32px;
	text-align:left;
	padding-left:20px;
	box-sizing:border-box;
}

.jt_ct03_movie_btn02 .jt_ct03_movie_icon{
	position:absolute;
	top:50%;
	right:15px;
	transform: translateY(-50%);
}



/* ムービーセット02 */
.jt_ct03_movie_set02{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start; /* ← 上揃え */
	gap: 30px;
	margin-bottom:35px;
}

.jt_ct03_movie_set02.last{
	margin-bottom:100px;
}


.jt_ct03_movie_set02 .jt_ct03_movie_box{

	position: relative;
	
	padding:12px 10px;
	box-sizing:border-box;
	border:solid 3px #166FB0;
	border-radius:16px;

}

.jt_ct03_movie_set02 .jt_ct03_movie_box_annotation{
	padding-top:20px;
	padding-bottom:32px;
	margin-bottom:12px;
}

.jt_ct03_movie_set02 .jt_ct03_movie_box_annotation_text01{
	font-size:25px;
}






/* 教職員の皆さまへの教材 */
.jt_ct04{
	position:relative;
	margin-top:60px;
	padding-top:60px;
	padding-bottom:100px;
	background:#166FB0;
}

.jt_ct04_title{
	position:relative;
	margin:0 auto 0;
}

.jt_ct04_img{
	position:relative;
	margin:30px auto 30px;
}

.jt_ct04_read{
	position:relative;
	text-align:center;
	display:block;
	color:#ffffff;
	font-size:32px;
	font-weight:bold;
	line-height:2;
	margin-bottom:120px;
}



.jt_ct04_dl_set{
	position:relative;
	width:1040px;
	left:50%;
	margin-left:-560px;
	display:flex;
	gap:50px;
	align-items: center;
	margin-top:80px;
}
.
jt_ct04_dl_set.first{
	margin-top:0;
}


.jt_ct04_dl_text01{
	position:relative;
	font-size:48px;
	line-height:1.4;
	font-weight:bold;
	color:#ffffff;
}

.jt_ct04_dl_text02{
	position:relative;
	font-size:24px;
	line-height:1.4;
	font-weight:bold;
	color:#ffffff;
}


.jt_ct04_dl_btn{
	position: relative;
	width: 400px;
	display: block;
	background:#ffffff;
	padding-top:30px;
	padding-bottom:30px;
	border-radius:100px;
	font-size:29px;
	font-weight:bold;
	text-align:center;
	box-sizing:border-box;
	line-height:1;
	color:#166FB0;
	margin-top:20px;
	margin-bottom:20px;
}

.jt_ct04_dl_icon{
	position:absolute;
	top:50%;
	right:15px;
	transform: translateY(-50%);
}






/* 参考情報 */
.jt_ct05{
	position:relative;
	margin-top:60px;
	padding-top:60px;
	padding-bottom:100px;
	padding-bottom:120px;
}

.jt_ct05_box01{
	position:relative;
}

.jt_ct05_title{
	position:relative;
	left:50%;
	transform: translateX(-50%);
	margin-bottom:60px;
}

.jt_ct05_read{
	position:relative;
	text-align:center;
	display:block;
	font-size:24px;
	font-weight:bold;
	line-height:1;
	margin-bottom:90px;
	color:#2F2F2F;
}

.jt_ct05_site_set{
	position:relative;
	margin:0 auto 0;
	width:1100px;
	background:#156FB0;
	border-radius:28px;
	padding-top:100px;
	padding-bottom:130px;
}

.jt_ct05_site_set_caption{
	position:relative;
	text-align:center;
	display:block;
	font-size:64px;
	font-weight:normal;
	line-height:1;
	color:#ffffff;
}


.jt_ct05_site_set_box{
	position:relative;
	margin:130px auto 0;
	width:940px;
	border-radius:28px;
	padding-top:80px;
	padding-bottom:64px;
	box-sizing:border-box;
	border:solid 4px #ffffff;
	text-align:center;
}

.jt_ct05_site_set_box.first{
	margin:100px auto 0;
}

.jt_ct05_site_set02{
	position:relative;
	margin:80px auto 0;
	width:1100px;
	border-radius:28px;
	padding-top:100px;
	padding-bottom:100px;
	box-sizing:border-box;
	border:solid 8px #1370B0;
	text-align:center;
}

.jt_ct05_site_set_box_text01{
	position:relative;
	text-align:center;
	display:block;
	font-size:40px;
	font-weight:bold;
	line-height:1.4;
	color:#ffffff;
	margin-bottom:40px;
}

.jt_ct05_site_set_box_text02{
	position:relative;
	text-align:center;
	display:block;
	font-size:24px;
	font-weight:bold;
	line-height:2;
	color:#ffffff;
	margin-bottom:40px;
}


.jt_ct05_btn01{
	position:absolute;
	left:50%;
	margin-left:-200px;
}




.jt_ct05_site_set_box02_text01{
	position:relative;
	text-align:center;
	display:block;
	font-size:33px;
	font-weight:bold;
	line-height:1.4;
	color:#1370B0;
	margin-bottom:50px;
}

.jt_ct05_site_set_box02_text02{
	position:relative;
	text-align:center;
	display:block;
	font-size:40px;
	font-weight:bold;
	line-height:1.4;
	color:#2F2F2F;
	margin-bottom:40px;
}


.jt_ct05_site_set_box02_set{
	position:relative;
	display:flex;
	justify-content: center;
	align-items: center; /* ← 上揃え */
	gap: 35px;          /* ボタン同士の間隔 */
}

.jt_ct05_site_set_box02_text03{
	position:relative;
	text-align:left;
	display:block;
	font-size:20px;
	font-weight:bold;
	line-height:2.2;
	color:#2F2F2F;
}


.jt_ct05_btn02{
	position:relative;
	left:50%;
	margin-left:-200px;
	display: block;
	background:#ffffff;
	padding-top:30px;
	padding-bottom:30px;
	border-radius:100px;
	font-size:29px;
	font-weight:bold;
	text-align:center;
	box-sizing:border-box;
	line-height:1;
	color:#166FB0;
	margin-top:60px;
	border:solid 4px #166FB0;
}

.jt_ct05_btn02.over03 {
	will-change:transform;
}







/* 最後 */
.jt_ct06{
	position:relative;
	padding-top:200px;
	padding-bottom:200px;
}


.jt_ct06_caption{
	position:relative;
	display:block;
	text-align:center;
	font-size:40px;
	font-weight:bold;
	line-height:1.4;
	color:#166FB0;
}











/* ムービー */
.movie_popup{
	position:relative;
	display:inline-block;
}



/* 初回ブラー演出用 */
.blur-start {
	opacity: 0;
	filter: blur(6px);
	transform: scale(1.05);
}

.blur-show {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition:
		opacity 0.8s ease,
		filter 1.2s ease,
		transform 1.0s ease;
}




/* アニメ */
.fade-up {
	opacity: 0;
	transform: translateY(10px); 
	transition: opacity 0.8s ease, transform 0.6s ease;
}

.fade-up.show {
	opacity: 1;
	transform: translateY(0);
}





/* ここからテンプレートエリア */
.rps_visible{
    display:none;
}

.rps_del{
    display:block;
}