/*-------------------- css --------------------*/
@font-face{
	font-family:'RedHatDisplay-Regular';
	src:url('fonts/RedHatDisplay-Regular.ttf');
}
@font-face{
	font-family:'RedHatDisplay-Medium';
	src:url('fonts/RedHatDisplay-Medium.ttf');
}
@font-face{
	font-family:'RedHatDisplay-ExtraBold';
	src:url('fonts/RedHatDisplay-ExtraBold.ttf');
}
@font-face{
	font-family:'RedHatDisplay-Bold';
	src:url('fonts/RedHatDisplay-Bold.ttf');
}
@font-face{
	font-family:'RedHatDisplay-SemiBold';
	src:url('fonts/RedHatDisplay-SemiBold.ttf');
}
@font-face{
	font-family:'ZenOldMincho-Bold';
	src:url('fonts/ZenOldMincho-Bold.ttf');
}
@font-face{
	font-family:'kozminpro-medium';
	src:url('fonts/kozminpro-medium.otf');
}

.mobile{
	display:none;
}

body, html {
	height:100%;
	margin: 0 !important;
	padding: 0;
	font-family: "ryo-gothic-plusn", sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height:1.5;
	letter-spacing:1.5px;
	color:#23231e;
	background: #595757;
}
body.loading{
	overflow:hidden !important;
}

h1, h2, h3, h4, h5, h6, p{
	margin:0;
}
a{
	color: #23231e;
	text-decoration:none;
}
a:link、a:visited{
	color:#0075C2;
}
a:hover{
	color:#3C9DEA;
}

/*-------------------- header --------------------*/
.main_header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100px;
	background: #595757;
	z-index: 100;
	transition: height 0.2s ease-out, background 0.5s ease-out, 0.3s;
}
.main_header.top{
	background:none;
}
.main_header_wrapper {
	position:relative;
	max-width: 1200px;
    height: 100%;
    margin: 0 auto;
}
.main_header_logo {
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #595757;
	opacity: 1;
	transition: opacity 0.3s ease-out;
}
.main_header_logo img{
	height:50px;
}

.main_header_hamburger{
	display:none;
}
.main_header_nav{
	display:none;
}

/*-------------------- footer --------------------*/
.footer_area{
	background-color:#595757;
}
.footer_wrap{
	position:relative;
	max-width:1100px;
	margin:0 auto;
	padding:40px 50px 20px;
}
.footer_top{
	margin-bottom:10px;
}
.footer_top .return{
	margin-bottom:30px;
	padding-bottom:25px;
	border-bottom:1px solid #ffffff;
}
.footer_top .return a{
	display:inline-block;
}
.footer_top .return a span{
	display:flex;
	align-items:center;
	gap:10px;
	font-family:'RedHatDisplay-SemiBold';
	font-size:18px;
	color:#ffffff;
}
.footer_top .return a span img{
	width:20px;
	transform:rotate(-90deg);
}
.footer_top .nav{
	display:flex;
	justify-content:flex-end;
	gap:30px;
}
.footer_top .nav a{
	/* font-family:'RedHatDisplay-SemiBold'; */
	font-size:16px;
	color:#ffffff;
}
.footer_bottom{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin-bottom:70px;
}
.footer_bottom .logo img{
	width:125px;
}
.footer_bottom .youtube{
	display:flex;
	align-items:center;
	gap:10px;
}
.footer_bottom .youtube p{
	position:relative;
	font-family:'RedHatDisplay-SemiBold';
	font-size:16px;
	color:#ffffff;
}
.footer_bottom .youtube p:before{
	content:'';
	position:absolute;
	bottom:0;
	right:22px;
	left:0;
	border:1px solid #ffffff;
}
.footer_bottom .youtube img{
	width:57px;
}
.footer_copy p{
	/* font-family:'RedHatDisplay-SemiBold'; */
	font-size:14px;
	text-align:right;
	color:#ffffff;
}
.footer_top_return{
	display:block;
	position:fixed;
	left:50%;
    bottom:80px;
	transform:translateX(-50%);
	width:100%;
    max-width:1270px;
    margin:0 auto;
	z-index:200;
}
.footer_top_return img{
	position:absolute;
	top:0;
	right:0;
	width:60px;
}

/*-------------------- 共通 --------------------*/
.common_main{
	background-color:#ffffff;
}
.common_wrap{
	max-width:1100px;
	margin:0 auto;
	padding:240px 50px 160px;
}
.common_title h1{
	margin-bottom:96px;
	font-family:'RedHatDisplay-Medium';
	font-size:96px;
	line-height:1;
	text-align:center;
}
.common_title p{
	margin-bottom:64px;
	font-family:'RedHatDisplay-Medium';
	font-size:24px;
	text-align:center;
}

.common_container{
	display:grid;
	gap:62px;
}
.common_box .title{
	display:flex;
	align-items:center;
	gap:24px;
	margin-bottom:40px;
	border-bottom:1px solid #23231e;
}
.common_box .title span{
	display:flex;
	justify-content:center;
	align-items:center;
	width:40px;
	height:64px;
	font-family:'RedHatDisplay-Medium';
	font-size:24px;
	color:#ffffff;
	background-color:#23231e;
}
.common_box .title h2{
	font-family:'RedHatDisplay-Medium';
	font-size:24px;
}
.common_box > p{
	font-family:'RedHatDisplay-Regular';
	font-size:18px;
	line-height:32px;
}
.common_box > p.mgb_15{
	margin-bottom:15px;
}
.common_box > ul{
	display:grid;
	gap:10px;
	margin:0;
	padding-left:20px;
}
.common_box > ul li{
	font-family:'RedHatDisplay-Regular';
	font-size:18px;
	line-height:32px;
}
.common_box > ol{
	display:grid;
	gap:40px;
	margin:0;
	padding-left:20px;
}
.common_box > ol li{
	position:relative;
	list-style-type:none;
	font-family:'RedHatDisplay-Regular';
	font-size:18px;
	line-height:32px;
}
.common_box > ol li:before{
	position:absolute;
	right:calc(100% + 0.5rem);
	content:"(" counter(list-item) ")";
}

.common_box .list{
	display:grid;
	gap:30px;
	margin-top:30px;
}
.common_box .list h3{
	margin-bottom:10px;
	font-family:'RedHatDisplay-Bold';
	font-size:18px;
	line-height:32px;
}
.common_box .list p{
	font-family:'RedHatDisplay-Regular';
	font-size:18px;
	line-height:32px;
}
.common_box .list ul{
	margin:0;
	padding-left:20px;
}
.common_box .list ul li{
	margin-top:10px;
	font-family:'RedHatDisplay-Regular';
	font-size:18px;
}

.common_box .cookie{
	display:grid;
	gap:48px;
	margin-top:48px;
}
.common_box .cookie .box h3{
	margin-bottom:32px;
	padding-bottom:14px;
	font-family:'RedHatDisplay-Medium';
	font-size:18px;
	border-bottom:2px dotted #23231e;
}
.common_box .cookie .box ul{
	display:grid;
	gap:15px;
	margin:0 0 32px;
	padding:0 0 0 20px;
}	
.common_box .cookie .box ul li{
	font-family:'RedHatDisplay-Regular';
	font-size:18px;
	line-height:32px;
}
.common_box .cookie .box p{
	font-family:'RedHatDisplay-Regular';
	font-size:18px;
	line-height:32px;
}

.common_box .line{
	position:relative;
	margin-top:24px;
}
.common_box .line:before{
	content:'・';
}
.common_box .line a{
	font-family:'RedHatDisplay-Regular';
	font-size:18px;
	color:#0075c1;
	text-decoration:underline;
}

.common_memo{
	margin-top:60px;
}
.common_memo p{
	font-family:'RedHatDisplay-Regular';
	font-size:18px;
	line-height:32px;
}

.contact_bot_button{
	max-width: 1100px;
	margin: 240px auto 0;
	color: #23231e;

	a {
        border: 1px solid #23231e;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
		border-radius: 100px;
		font-family:'RedHatDisplay-Bold';
		font-size: 55px;
		letter-spacing: 5px;

		img{
			position: absolute;
			height: 202px;
			width: 202px;
			top: -1px;
			left: -1px;
		}
    }
}
.contact_bot_button:hover{
	a {
        background-color: #23231e;
		color: #ffffff;

		img{
			top: -1px;
			right: -1px;
			left: auto;
		}
    }
}

/*-------------------- top --------------------*/
.top_mv{
	position:relative;
	height:100%;
	z-index:20;
	animation-duration:2.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:top_mv;
}
@keyframes top_mv{
	0%, 99%{
		background-color:#595757;
	}
	100%{
		background:none;
	}
}
.mv_left, .mv_right {
	flex: 1;
	position: fixed;
	top: 0;
	bottom: 0;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding:100px 0;
	color: white;
	background-color:#595757;
	text-align: center;
	align-items: flex-end;
}
.mv_left {
	left: 0;
}
.mv_right {
	right: 0;
}
.mv_left a, .mv_right a{
	width:100%;
	height:100%;
	background-size: cover;
	background-position: center;
	background-repeat:no-repeat;
}
.mv_left a{
	background-image: url('images/banner1.png');
}
.mv_right a{
	background-image: url('images/banner2.png');
}
.main_header_link_box{
	position: absolute;
    right: 0;
    top: 0;
	height:100px;
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
.main_header_link{
/*     position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, 50%);
	opacity: 0; */
	display:flex;
	align-items:center;
	gap:20px;
	padding:0 20px;
	transition: opacity 0.3s ease;
	
	.news{
		display:flex;
		align-items:center;
		gap:25px;
		padding:10px 20px;
		font-size:16px;
		color:#ffffff;
		border-left:1px solid #ffffff;
		border-right:1px solid #ffffff;
		background-image: none;
		width: auto;
		z-index: 9999;
		
		img{
			width:16px;
		}
	}
	.lang{
		padding:5px 10px;
		font-size:14px;
		color:#ffffff;
		border:1px solid #ffffff;
	}
}
.main_link_contact {
	position: absolute;
	bottom: 20px;
    right: 80px;
	transform: translate(-50%);
	
	a{
		background: none;
		display: flex;
		align-items: center;
		gap: 25px;
		padding: 10px 20px;
		font-size: 16px;
		color: #ffffff;
		border-left: 1px solid #ffffff;
		border-right: 1px solid #ffffff;
		width: auto;
		
		img{
			width: 16px;
		}
	}
}

.mv_content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2px;
	position:absolute;
	bottom:100px;
	left:0;
	width:100%;
}
.mv_content .title {
	width: auto;
	height: 90px;
}
.mv_content .title h2 {
	font-family:'RedHatDisplay-Bold';
	letter-spacing: 1px;
	color:#ffffff;
}
.mv_content .circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	position: absolute;
	bottom: -30px;
}
.mv_content .circle.blue {
	background: linear-gradient(to right, #005D9E, #0075C2);
	left: 50%;
	transform: translateX(-50%);
}
.mv_content .circle.red {
	background: linear-gradient(to right, #AF000F, #E60012);
	left: 50%;
	transform: translateX(-50%);
}
.center-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 80px;
	font-weight: 900;
	color: white;
	position: absolute;
	left: 50%;
	top: 50%;
	line-height: 1;
	transform: translate(-50%, -50%);
	transition:0.6s;
}

.scroll-indicator {
	position: fixed;
	left:0;
	bottom:0;
	width:100%;
	transition:0.6s;
}
.triangle {
	width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-bottom: 130px solid white;
	position: relative;
	left: 50%;
	bottom:0;
	transform: translateX(-50%);
}
.triangle p {
	position: absolute;
	top: 70px;
	left: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
	font-size: 16px;
	color: black;
	letter-spacing: 2px;
	white-space: nowrap;
}

.content-section {
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	/* max-width:50%; */
	margin:0 auto;
	/* padding-top: 200px; */
	background-color: white;
	overflow: visible;
	/* opacity: 0; */
	/* transition:0.6s; */
	z-index:10;
}

.sticky_area{
	/* height:2100px; */
	height:100vw;
}

.sticky_content{
	position:sticky;
	top:15%;
}
.sticky_box{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
/* 	width:100%; */
	overflow:hidden;
}
.content-slogan {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	gap:50px;
	margin:0 auto;
	padding:0 64px;
	/* writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 5px;
	line-height: 1.4; */
}
.content-slogan p{
	font-family:'RedHatDisplay-ExtraBold';
/* 	font-size: 30px;
	line-height:60px; */
	font-size: 2vw;
	line-height:4vw;
	letter-spacing:0;
	text-align:center;
	white-space:nowrap;
}
.content-70th{
	margin-top:50px;
	text-align:center;
}
.content-70th img{
	width:200px;
}
.content-box {
	width: 100%;
	margin-top: 500px;
}
.content-box p {
	margin:0;
	padding:0 64px;
	font-family:'RedHatDisplay-Regular';
	font-size: 18px;
	letter-spacing:0;
	line-height:2.2;
	color: black;
}

.site-footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:100%;
	padding:100px 0 30px;
	background-color: #fff;
}
.site-footer img {
	display: block;
	width: 260px;
}
.copyright {
	margin: 40px 0 0;
	font-family:'RedHatDisplay-ExtraBold';
	font-size: 14px;
	letter-spacing: 0;
	line-height: 27px;
	text-align:center;
	color:#d6d8d6;
}
.top_mv_mobile {
	display: none;
}

/*---------- animation ----------*/
.mv_title span{
	animation-duration:2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:mv_title;
	font-family:'RedHatDisplay-Bold';
}

@keyframes mv_title{
	0%, 20%{
		transform:translateY(50px);
		opacity:0;
	}
	50%, 70%{
		transform:translateY(0);
		opacity:1;
	}
	100%{
		transform:translateY(0);
		opacity:1;
	}
}

.mv_left{
	animation-duration:2.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:mv_left;
}

@keyframes mv_left{
	0%, 40%{
		transform:translateX(-100%);
		opacity:0;
	}
	80%, 100%{
		transform:translateX(0%);
		opacity:1;
	}
}

.mv_left .content{
	animation-duration:2.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:mv_left_content;
}

@keyframes mv_left_content{
	0%, 80%{
		transform:translateY(50%);
		opacity:0;
	}
	100%{
		transform:translateY(0%);
		opacity:1;
	}
}

.mv_right{
	animation-duration:2.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:mv_right;
}

@keyframes mv_right{
	0%, 40%{
		transform:translateX(100%);
		opacity:0;
	}
	80%, 100%{
		transform:translateX(0%);
		opacity:1;
	}
}

.mv_right .content{
	animation-duration:2.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:mv_right_content;
}

@keyframes mv_right_content{
	0%, 80%{
		transform:translateY(50%);
		opacity:0;
	}
	100%{
		transform:translateY(0%);
		opacity:1;
	}
}

.mv_triangle{
	animation-duration:2.5s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:mv_triangle;
}

@keyframes mv_triangle{
	0%, 70%{
		transform:translate(-50%, 100%);
		opacity:0;
	}
	100%{
		transform:translate(-50%, 0%);
		opacity:1;
	}
}