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


/* import
--------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;900&family=Zen+Kaku+Gothic+New:wght@400;500;600&display=swap");
@import "init.css";


/* html, body
--------------------------------------------------*/
html,body {
	position:absolute;
	width:100%;
	min-width:1280px;
	min-height:100%;
	margin:0;
	text-align:left;
	font-family: "Zen Kaku Gothic New", "Helvetica", "Arial", sans-serif;
	font-weight:400;
	font-feature-settings:"palt";
	letter-spacing:0.00em;
	-webkit-text-size-adjust:none;
	color:#3e3a39;
	background:#ffffff;
	text-underline-offset:4px;
}
	
html {
	overflow-y: scroll; /* ← スクロールバーの幅を最初から確保 */
}


body{
	padding:15px;
	box-sizing:border-box;
	overflow:hidden;
	height:100%;
}


body::after{
	content:"";
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:15px solid #f00f1d;
	box-sizing:border-box;
	pointer-events:none;
	z-index:9999;
}





/* 共通 */
.over{
	transition:0.2s ease;
}

.over:hover{
	opacity:0.8;
}
	
	
.go_top {
	position: fixed;
	right: 25px;
	bottom: 25px;
	display:none;
	z-index:3;
	transition:0.2s ease;
}

.go_top:hover{
	opacity:0.6;
}



/* ヘッダー */
.header_set{
	position:relative;
	display:none;
	z-index:3;
}


header{
	position:fixed;
	height:58px;
	top:0;
	right:0;
	padding-right:30px;
	padding-left:30px;
	background:#f00f1d;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:8px;
	box-sizing:border-box;
	z-index:3;
}

header a{
	color:#ffffff;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	text-decoration:none;
	letter-spacing:0.05em;
	height:58px;
	padding:10px;
	font-size:16px;
}

.header_block{
	position:relative;
	width:14px;
	height:auto;
	margin-top:3px;
}


/* コンテンツセット */
.contents_set{
	position:relative;
	width:100%;
	overflow:hidden;
}


.mv{
	position:relative;
	width:100%;
	height:745px;
}



.line{
	position:absolute;
	top:745px;
	left:50%;
	transform:translateX(-50%);
	width:2px;
	height:100px;
	overflow:hidden;
	/*opacity:0;*/
	opacity:1;
	animation:lineFadeIn 1.2s ease forwards;
	z-index:1;
}

.line.active{
	animation:lineFadeIn 1.2s ease forwards;
}

@keyframes lineFadeIn{

	0%{
		opacity:0;
	}

	100%{
		opacity:1;
	}
	}

.line::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#dd2819;

	animation:lineLoop 2s ease-in-out infinite;
}

@keyframes lineLoop{

	0%{
		transform:translateY(-100%);
	}

	45%{
		transform:translateY(0%);
	}

	55%{
		transform:translateY(0%);
	}

	100%{
		transform:translateY(100%);
	}

}



/* ヒストリーベースレイアウト */
.history_parts_set{
	position:relative;
	width:100%;
	z-index:1;
}

.history_parts_set02{
	position:relative;
	width:100%;
	z-index:1;
}

.history_parts01{
	position:absolute;
	top:400px;
	left:50%;
	margin-left:-405px;
	width:82px;
}

.history_parts02{
	position:absolute;
	top:540px;
	left:50%;
	margin-left:115px;
	width:220px;
}


.history_parts03{
	position:absolute;
	top:585px;
	left:50%;
	margin-left:410px;
	width:116px;
}

.history_parts04{
	position:absolute;
	top:1200px;
	left:50%;
	margin-left:-585px;
	width:103px;
}


.history_parts05{
	position:absolute;
	top:1440px;
	left:50%;
	margin-left:165px;
	width:61px;
}

.history_parts06{
	position:absolute;
	top:1600px;
	left:50%;
	margin-left:300px;
	width:177px;
}


.history_parts07{
	position:absolute;
	top:2690px;
	left:50%;
	margin-left:-600px;
	width:140px;
}



/* 後半 */

.history_parts08{
	position:absolute;
	top:60px;
	left:50%;
	margin-left:460px;
	width:154px;
}


.history_parts09{
	position:absolute;
	top:650px;
	left:50%;
	margin-left:285px;
	width:278px;
}


.history_parts10{
	position:absolute;
	top:1100px;
	left:50%;
	margin-left:-400px;
	width:100px;
}



.history_parts01 img,
.history_parts02 img,
.history_parts03 img,
.history_parts04 img,
.history_parts05 img,
.history_parts06 img,
.history_parts07 img,
.history_parts08 img,
.history_parts09 img,
.history_parts10 img{
	width:100%;
	height:auto;
	display:block;
}


.history_set{
	position:relative;
	width:100%;
	margin-top:160px;
	padding-bottom:450px;
}

.history_caption01{
	position:relative;
	left:50%;
	width:1000px;
	transform:translateX(-50%);
	display:block;
	line-height:1;
	color:#f00f1d;
	font-family: "Lato";
	font-weight:bold;
	letter-spacing:0.1em;
	font-size:60px;
	margin-bottom:0;
}

.gtn_history .date01{
	position:relative;
	text-align:right;
	font-weight:bold;
	margin-bottom:10px;
	letter-spacing:0.05em;
	line-height:1;
	color:#f00f1d;
	display:block;
	font-size:32px;
}

.gtn_history{
	position:relative;
	left:50%;
	width:450px;
	margin-left:-500px;

	display:flex;
	flex-direction:column;
	gap:6px;
	margin-top:60px;
	z-index:1;
}

.gtn_history .box{
	width:100%;
	padding:15px 25px;
	background:#f00f1d;
	box-sizing:border-box;
	border-radius:8px;
	box-shadow: 0 0 10px 0px rgba(0,0,0,0.25);
}

.gtn_history .caption01{
	font-size:16px;
	font-weight:bold;
	line-height:1.8;
	color:#ffffff;
	display:block;
}

.gtn_history .caption02{
	font-size:18px;
	line-height:1.6;
	color:#ffffff;
	display:block;
	letter-spacing:0.05em;
}

.gtn_history .text01{
	font-size:13px;
	line-height:1.8;
	color:#ffffff;
	display:block;
	margin-top:10px;
}

.gtn_history .text02{
	font-size:14px;
	line-height:1.8;
	color:#ffffff;
	display:inline-block;
	margin-top:10px;
}

.gtn_history .text02::before{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 5px solid #ffffff; /* 色 */
	margin-right: 8px;
	vertical-align:2px;
}


.gtn_history .white_box{
	background:#ffffff;
}

.gtn_history .white_box .caption01{
	color:#f00f1d;
}

.gtn_history .white_box .text01{
	color:#f00f1d;
}

.gtn_history .attention{
	font-size:11px;
	line-height:1.8;
	color:#ffffff;
	display:block;
	margin-top:15px;
}
	
	
.society_history{
	position:absolute;
	left:50%;   /* ←右カラム位置 */
	margin-left:50px;
	width:450px;
	padding:15px 25px;
	background:#f5f5f5;
	box-sizing:border-box;
	border-radius:8px;
	box-shadow: 0 0 10px 0px rgba(0,0,0,0.1);
	z-index:1;
}

.foreign_history{
	position:absolute;
	left:50%;   /* ←右カラム位置 */
	margin-left:50px;
	width:450px;
	padding:15px 25px;
	background:#e6f6ff;
	box-sizing:border-box;
	border-radius:8px;
	box-shadow: 0 0 10px 0px rgba(0,0,0,0.1);
	z-index:1;
}

sup{
	font-size:10px;
	vertical-align: super;
	line-height: 0;
	margin-left:3px;
	margin-right:3px;
	letter-spacing:0.2em;
}

.annotation{
	position:absolute;
	width:1000px;
	left:50%;
	margin-left:-500px;
	z-index:1;
	margin-top:20px;
	text-align:right;
}

.annotation_text{
	font-size:12px;
	line-height:1.8;
	text-align:right;
	display:inline-block;
	color:#999999;
}

.right_history01{
	margin-top:-140px;
}

.right_history02{
	margin-top:-100px;
}

.right_history03{
	margin-top:-35px;
}


.right_history04{
	margin-top:50px;
}

.right_history05{
	margin-top:-10px;
}

.right_history06{
	margin-top:-125px;
}




.right_history07{
	margin-top:-70px;
}

.right_history08{
	margin-top:-5px;
}

.right_history09{
	margin-top:-40px;
}

.right_history10{
	margin-top:-120px;
}

.right_history11{
	margin-top:10px;
}



/* ヒストリー世の中の動き見出し */
.society_history .caption,
.foreign_history .caption{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin-bottom:20px;
	line-height:1;
	font-size:14px;
	font-weight:bold;
	letter-spacing:0.075em;
}

.society_history .caption::before,
.society_history .caption::after,
.foreign_history .caption::before,
.foreign_history .caption::after{
	content:"";
	width:20px;
	height:1px;
	background:#d0d0cf;
	display:block;
}


/* ヒストリー世の中の動きテキスト */
.society_history .text_set{
	display:flex;
	gap:15px;
	align-items:flex-start;
	line-height:1.6;
	margin-bottom:10px;
	letter-spacing:0.05em;
	font-size:15px;
}

.society_history .text_set:last-child{
	margin-bottom:0;
}


.society_history .year{
	font-weight:bold;
	white-space:nowrap;
}

.society_history .text{
	display:block;
}


/* 在留外国人をとりまく環境テキスト */
.foreign_history .text_set{
	display:flex;
	gap:15px;
	align-items:flex-start;
	line-height:1.6;
	margin-bottom:10px;
	letter-spacing:0.05em;
	font-size:15px;
}

.foreign_history .text_set:last-child{
	margin-bottom:0;
}

.foreign_history .year{
	font-weight:bold;
	white-space:nowrap;
}

.foreign_history .text{
	display:block;
}



/* ヒストリー赤丸 */
.pulse{
	position:absolute;
	top:-13px;
	right:-82px;
	width:63px;
	height:63px;
}

/* 中央の固定丸 */
.pulse_core{
	position:absolute;
	top:50%;
	left:50%;
	width:18px;
	height:18px;
	transform:translate(-50%,-50%);
	border-radius:50%;
	background:#ff0000;
	z-index:2;
}

.pulse span{
	position:absolute;
	top:50%;
	left:50%;
	width:63px;
	height:63px;
	margin:-31.5px 0 0 -31.5px;
	border-radius:50%;
	background:#ff0000;
	opacity:0;
	transform:scale(0.2);
	animation:pulseCircle 2s infinite;
}

.pulse span:nth-child(2){
	animation-delay:0.4s;
}

@keyframes pulseCircle{

	0%{
		transform:scale(0.2);
		opacity:0.6;
	}

	75%{
		transform:scale(1);
		opacity:0;
	}

	100%{
		transform:scale(1);
		opacity:0;
	}

}


/* ヒストリーバー */
.history_bar_bg{
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:2px;
	height:100%;
	background:#f5f5f5;
	opacity:0;
	transition-duration:0.2s;
}

.history_bar{
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:2px;
	height:0;
	background:#dd231b;
	border-radius:999px;
	opacity:0;
	transition-duration:0.2s;
}

.history_bar_bg.is-active,
.history_bar.is-active{
	opacity:1;
}


/* スライダー */
.history_photo_set{
	position:relative;
	overflow:hidden;
	width:100%;
	margin-top:60px;
}

.history_photo_set_first{
	margin-top:60px;
}

.history_photo_box{
	display:flex;
	width:max-content;
}

.history_photo{
	width:300px;
	flex-shrink:0;
}

.history_photo img{
	width:100%;
	display:block;
}




/* ミッション */
.mission_parts_set{
	position:relative;
	width:100%;
	z-index:1;
}

.mission_parts01{
	position:absolute;
	top:-67px;
	left:50%;
	margin-left:170px;
	width:82px;
}

.mission_parts02{
	position:absolute;
	top:-100px;
	left:50%;
	margin-left:400px;
	width:144px;
}


.mission_parts03{
	position:absolute;
	top:-35px;
	left:50%;
	margin-left:-600px;
	width:111px;
}

.mission_parts04{
	position:absolute;
	top:145px;
	left:50%;
	margin-left:400px;
	width:68px;
}


.mission_parts05{
	position:absolute;
	top:280px;
	left:50%;
	margin-left:545px;
	width:96px;
}

.mission_parts06{
	position:absolute;
	top:155px;
	left:50%;
	margin-left:-655px;
	width:96px;
}


.mission_parts07{
	position:absolute;
	top:365px;
	left:50%;
	margin-left:-595px;
	width:82px;
}



.mission_parts01 img,
.mission_parts02 img,
.mission_parts03 img,
.mission_parts04 img,
.mission_parts05 img,
.mission_parts06 img,
.mission_parts07 img{
	width:100%;
	height:auto;
	display:block;
}



.mission_vision_set{
	position:relative;
	width:100%;
	background:#f00f1d;
	padding-bottom:180px;
}

.mission_bg_parts01{
	position:relative;
	width:auto;
	height:247px;
	margin-top:-247px;
}

.mission_bg_parts01 img{
	position:relative;
	width:100%;
	height:247px;
	display:block;
}

.mission_vision_caption01{
	font-size:24px;
	font-family: "Lato";
	font-weight:bold;
	letter-spacing:0.1em;
	text-align:center;
	color:#ffffff;
	line-height:1;
	display:block;
	margin-bottom:40px;
}

.mission_vision_text01{
	font-size:36px;
	font-weight:bold;
	letter-spacing:0.025em;
	text-align:center;
	color:#ffffff;
	line-height:1;
	display:block;
	margin-bottom:50px;
}

.mission_vision_text02{
	font-size:18px;
	text-align:center;
	color:#ffffff;
	line-height:2.5;
	display:block;
	margin-bottom:50px;
}



.mission_vision_movie_set01{
	position:relative;
	width:854px;
	aspect-ratio:16 / 9;
	display:block;
	margin:0 auto 0;
}


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

	
.mission_vision_link_text01,
.mission_vision_link_text02{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:40px;
	margin-bottom:20px;
}

	
.mission_vision_link_text02{
	margin-top:0;
	margin-bottom:0;
}

.mission_vision_link_text01 a,
.mission_vision_link_text02 a{
	position:relative;
	width:854px;
	height:70px;
	color:#ffffff;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0;
	text-decoration:none;
	letter-spacing:0.05em;
	line-height:1;
	font-size:18px;
	background:#f33f4a;
	transition:0.2s ease;
	border-radius:8px;
}

.mission_vision_link_text01 a:hover,
.mission_vision_link_text02 a:hover{
	color:#f00f1d;
	background:#fee7e9;
	transition:0.2s ease;
}


.cursor02{
	position:absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 40px;
	width:27px;
	height:auto;
}






/* メッセージ */
.message_parts_set{
	position:relative;
	width:100%;
	z-index:1;
}

.message_parts01{
	position:absolute;
	top:-70px;
	left:50%;
	margin-left:-69px;
	width:138px;
}

.message_parts02{
	position:absolute;
	top:-120px;
	left:50%;
	margin-left:275px;
	width:525px;
}

.message_parts01 img,
.message_parts02 img{
	width:100%;
	height:auto;
	display:block;
}


.message_set{
	position:relative;
	width:100%;
	background:#f2f2f2;
	padding-top:180px;
	padding-bottom:180px;
}

.message_caption01{
	font-size:24px;
	font-family: "Lato";
	font-weight:bold;
	letter-spacing:0.1em;
	text-align:center;
	color:#f00f1d;
	line-height:1;
	display:block;
	margin-bottom:40px;
}


.message_box01{
	width:1000px;
	padding:40px;
	background:#ffffff;
	box-sizing:border-box;
	border-radius:8px;
	box-shadow: 0 0 10px 0px rgba(0,0,0,0.25);
	margin:auto;
	display:flex;
	gap:40px;
	align-items:flex-start;
}

.message_box_left_set01{
	width:301px;
	flex-shrink:0;
}

.message_box_right_set01{
	flex:1;
}

.message_box_left_text01{
	text-align:center;
	line-height:1;
	display:block;
	font-size:18px;
	margin-top:18px;
	margin-bottom:15px;
}

.message_box_left_text02{
	text-align:center;
	line-height:1.6;
	display:block;
	font-size:14px;
}

.message_box_right_text01{
	font-size:16px;
	line-height:2;
	letter-spacing:0.05em;
	display:block;
}

.message_box_right_text01_bold{
	font-weight:bold;
}





/* カミングスーン */
.coming_parts_set{
	position:relative;
	width:100%;
}

.coming_parts01{
	position:absolute;
	top:-214px;
	left:50%;
	margin-left:-460px;
	width:82px;
}

.coming_parts02{
	position:absolute;
	top:-55px;
	left:50%;
	margin-left:-360px;
	width:144px;
}

.coming_parts03{
	position:absolute;
	top:-20px;
	left:50%;
	margin-left:-565px;
	width:138px;
}

.coming_parts04{
	position:absolute;
	top:400px;
	left:50%;
	margin-left:450px;
	width:68px;
}

.coming_parts01 img,
.coming_parts02 img,
.coming_parts03 img,
.coming_parts04 img{
	width:100%;
	height:auto;
	display:block;
}

.coming_set{
	position:relative;
	width:100%;
	padding-top:180px;
	padding-bottom:180px;

}

.coming_caption01{
	font-size:48px;
	font-family: "Lato";
	font-weight:bold;
	letter-spacing:0.1em;
	text-align:center;
	color:#cccccc;
	line-height:1;
	display:block;
	margin-bottom:40px;
}

.coming_text01{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	letter-spacing:0.1em;
	color:#999999;
	line-height:1;
	display:block;
}






/* フッター */

footer{
	position:relative;
	width:100%;
	padding-bottom:40px;
}

.gtn_logo_img01{
	position:relative;
	width:150px;
	margin:0 auto 30px;
	display:block;
}

.gtn_logo_img01 img{
	position:relative;
	width:100%;
	height:auto;
	display:block;
}

.gtn_link_text01{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:50px;
}

.gtn_link_text01 a{
	position:relative;
	color:#f00f1d;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	text-decoration:none;
	letter-spacing:0.05em;
	line-height:1;
	font-size:14px;
}

.cursor{
	position:relative;
	width:19px;
	height:auto;
	margin-top:3px;
}

.copyright_text01{
	display:block;
	text-align:center;
	font-size:14px;
	color:#666666;
	letter-spacing:0.05em;
}








/* アニメ系 */

.poyon{
	transform:scale(0);
}

.poyon.active{
	animation:
		poyonInitial .6s ease-out forwards,
		float 4s ease-in-out .6s infinite;
}

@keyframes poyonInitial{
	0%{
		transform:scale(0.2);
	}
	40%{
		transform:scale(1.2);
	}
	60%{
		transform:scale(1);
	}
	80%{
		transform:scale(1.1);
	}
	100%{
		transform:scale(1) translateY(0);
	}
}

@keyframes float{
	0%{
		transform:scale(1) translateY(0);
	}
	50%{
		transform:scale(1) translateY(-10px);
	}
	100%{
		transform:scale(1) translateY(0);
	}
}



.headline{
	opacity:0;
}

.headline.is-active {
	opacity:1;
	--opacity: 1;
	--scale: 1;
}

.headline .char {
	display: inline-block;
	transform: scale(var(--scale, 0));
	opacity: var(--opacity, 0);
	transition:
		opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1),
		transform 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition-delay: calc(0.016s * var(--char-index));
}


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

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


.fade-bg {
	background-color: transparent;
	transition: background-color 0.46s ease;
}

.fade-bg.scrolled {
	background-color: rgba(255, 255, 255, 0.5);
}






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

.rps_del{
    display:block;
}