/* CSS Document */
@import url("reset.css");
@import url("swiper-bundle.min.css");
@import url("common.css");

section{ padding: 50px 0;}

h2{
	margin: 30px 0;
	font-weight: 400;
	font-size: 2.6rem;
	line-height: 1.3;
}

.more{ text-align: right;}
.link_btn{ background-color: inherit !important;}

@media screen and (max-width: 768px) and  (orientation: portrait) {
	h2{ font-size: 1.7rem;}
	section{ padding: 20px 0;}
}


/* header
---------------------------------------------------------- */
header{ background-color: inherit;}
header.scrolled{
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


/* container
---------------------------------------------------------- */
.container{ margin-top: 0 ;}


/* main_visual
---------------------------------------------------------- */
.main_visual{
	position: relative;
	height: 100vh;
	max-height: 860px;
	overflow: hidden;
	background : linear-gradient(180deg, rgba(228, 239, 239, 1) 80%, rgba(255, 255, 255, 1) 100%);
}
.main_visual::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -20%;
	z-index: 1;
	width: 120%;
	height: 80%;
	margin: auto 0;
	background: url(../img/top/main_visual_bg.svg) no-repeat center / contain;
	opacity: 0.5;
}

.mv_txt{
	position: absolute;
	top: 50%;
	left: 20%;
	transform: translate(0%, -50%);
	display: block;
	width: 100vw;
	height: auto;
	z-index: 3;
	width: 70%;
	margin: auto;
}

.mv_main_txt{ width: 100%;}
.mv_main_txt img{
	filter:
	drop-shadow(0 0 5px #fff)
	drop-shadow(0 0 8px rgba(255, 255, 255, 1));
}
.start_from202604{
	margin-top: 30px;
	max-width: 160px;
}

.mv_swiper{
	position: absolute;
	z-index: 2;
}
.mv_r{
	right: -2%;
	top: 100px;
	width: 40%;
	height: auto;
}
.mv_l{
	left: -8%;
	bottom: 0;
	width: 25%;
	height: auto;
}

.pickup{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 900px;
	max-width: 100%;
	flex-wrap: nowrap;
}
.pu_tit{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20%;
	padding: 10px;
	background-color: var(--sec-color);
	color: #fff;
	font-size: 0.9rem;
	text-align: center;
}
.pu_txt{
	width: 80%;
	background-color: #fff;
	overflow: hidden;
	height: 80px;
	font-size: 0.9rem;
	line-height: 1.4;
}
.pu_txt .swiper-slide {
	padding: 0 2rem; /* 左右の余白 */
	display: flex;   /* 上下中央揃え用 */
	align-items: center; /* 上下中央揃え用 */
	height: 80px; /* 親要素と同じ高さを指定 */
}
.pu_txt .date{ margin: 0 10px 0 0;}

.limit_text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* ここに表示したい行数を数字で入れる */
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	.main_visual{ height: calc(100vh - 80px);}
	.main_visual::after{
		height: 70%;
		background-size: cover;
		background-position: right 10% center;
	}
	.mv_r{
		width: 100%;
		right: -20%;
	}
	.mv_l{ display: none;}
	.mv_txt{
		left: 20px;
		top: calc(60px + 6vh);
		/* bottom: 140px; */
		transform: none;
		height: 60vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.start_from202604{ max-width: 140px;}
	.pickup{ bottom: 0;}
	.pu_tit{
		width: 25%;
		padding: 10px;
		font-size: 0.7rem;
	}
	.pu_txt .swiper-slide { padding: 0 10px;}
}


/* headline
---------------------------------------------------------- */
.headline{ position: relative;}

.headline_h2{
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: nowrap;
}
.headline_h2 .more{ margin: 0;}

.swiper_arrow{
	position: relative;
	top: inherit;
	bottom: -30px;
	left: 0;
	width: 10%;
	min-width: 100px;
}
.swiper-button-next::after, .swiper-button-prev::after {
	font-size: 1.5rem;
	color: #000;
}

@media screen and (max-width: 768px) and  (orientation: portrait) {
	.headline_h2 h2{ font-size: 1.2rem;}
}


/* topics
---------------------------------------------------------- */
.topics_inner{ justify-content: space-between;}

.news{ width: 65%;}
.news_inner{ justify-content: space-between;}
.news_menu{
	width: 20%;
	margin: 0;
	font-size: 0.8rem;
	flex-direction: column;
}
.news_menu li{
	margin: 5px 0;
	list-style: none;
}
.news_menu li a{ text-decoration: none;}
.news_menu li.here a,
.news_menu li a:hover{ color: var(--sec-color);}
.news_menu li.here a::before,
.news_menu li a:hover::before{
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 5px 0 0;
	background-color: var(--sec-color);
	border-radius: 50%;
	vertical-align: middle;
}

.news_list{
	width: 75%;
	display: none;
}

.movie{ width: 30%;}
.movie_inner{
	padding: 30px;
	background-color: var(--bg-color);
	text-decoration: none;
}
.movie_img{ text-align: center;}
.movie_inner a{ display: block;}
.movie p{
	margin: 0;
	font-family: var(--primary-font-set);
	text-align: center;
}

@media screen and (max-width: 768px) and  (orientation: portrait) {
	.news,.news_menu,.news_list,.movie{ width: 100%;}
	.news_menu{
		margin-bottom: 20px;
		padding: 10px;
		flex-direction: row;
		background-color: var(--bg-color);
	}
	.news_menu li{ padding-right: 1rem;}
}


/* about
---------------------------------------------------------- */
.about{
	position: relative;
	overflow: hidden;
	padding: 100px 0;
}
.about::before,
.about::after{
	content: '';
	position: absolute;
	z-index: 1;
	width: 80%;
	height: 80%;
	background: no-repeat center / contain;
	opacity: 0.5;
}
.about::before{
	top: 0;
	left: -20%;
	background-image: url(../img/top/about_bg_l.svg);
}
.about::after{
	bottom: 0;
	right: -20%;
	background-image: url(../img/top/about_bg_r.svg);
}

.about_inner{
	position: relative;
	z-index: 3;
	width: 50%;
	max-width: 480px;
	margin: auto;
	padding: 50px;
	background-color: rgba(255, 255, 255, 0.4);
}
.about h2{ text-align: center;}
.about .copy{
	margin: 50px auto;
	font-size: 1.8rem;
	/* white-space: nowrap; */
}

.slide_number{
	position: absolute;
	overflow: inherit;
	bottom: 0;
	right: 0;
	width: 30%;
	min-width: 320px;
	max-width: 420px;
	padding: 30px;
	border-color: var(--bg-color);
	text-align: center;
}
.slide_number h4{
	position: relative;
	z-index: 6;
	display: inline-block;
	margin: 0 auto;
	padding: 5px 1rem;
	background-color: var(--main-color);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1;
}
.slide_number::before,
.slide_number::after{
	content: '';
	position: absolute;
	z-index: 2;
	background : #EFF4F0;
	background : rgba(239, 244, 240, 1);
}
.slide_number::before{
	top: -20px;
	right: -20px;
	width: 40%;
	height: 40%;
}
.slide_number::after{
	bottom: -20px;
	left: -20px;
	width: 30%;
	height: 30%;
}

.slide_number .swiper{
	z-index: 5;
	margin-top: -10px;
	background : linear-gradient(90deg, rgba(228, 239, 239, 1) 38.99%, rgba(218, 239, 221, 1) 100%);
}

.slide_number_item{
	overflow-y: inherit;
	padding: 20px;
}
.slide_number_item p{
	margin: 5px 0;
	line-height: 1.2;
}
.slide_number_item .num{
	margin: 0;
	font-size: 4.0rem;
	white-space: nowrap;
}

.slide_number .swiper-button-prev{ left: 0;}
.slide_number .swiper-button-next{ right: 0;}

.about_img_hanger{
	position: absolute;
	top: 10%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 80%;
	will-change: transform;
}

.about_img{ position: absolute;}
.fast .about_rt{ right: 0; top: 0; width: 15%; min-width: 80px;}
.slow .about_rt{ right: 5%; top: 2%; width: 25%; min-width: 140px;}
.about_lt{ left: 5%; top: -5%; width: 20%; min-width: 160px;}
.fast .about_lb{ left: 8%; bottom: -10%; width: 25%; min-width: 180px;}
.slow .about_lb{ left: 0%; bottom: 20%; width: 10%; min-width: 100px;}

@media screen and (max-width: 768px) and  (orientation: portrait) {
	.about .copy{
		margin: 30px auto;
		font-size: 1.6rem;
	}
	.about_inner{ width: calc(100% - 40px);}
	.slide_number{
		position: relative;
		margin: auto;
	}
}

/* research
---------------------------------------------------------- */
.research{
	position: relative;
	overflow: hidden;
	background : linear-gradient(0deg, rgba(228, 239, 239, 0) 0.18%, rgba(223, 239, 229, 1) 50.52%, rgba(218, 239, 221, 0) 100%);
}
.research::before,
.research::after{
	content: '';
	position: absolute;
	top: 20%;
	width: 76%;
	height: 80%;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.5;
}
.research::before{
	left: -20%;
	background-position: right center;
	background-image: url(../img/top/path_bg_l.svg);
}
.research::after{
	right: -20%;
	background-position: left center;
	background-image: url(../img/top/path_bg_r.svg);
}

.research h2{ text-align: center;}

.rp_inner{
	position: relative;
	z-index: 3;
	align-items: center;
	justify-content: space-around;
}

.rp_hanger{ width: 32%;}

.rp_list{
	margin: 10px 0;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.3);
}
.rp_list h3{
	margin: 0 0 20px 0;
	font-size: 1.4rem;
	text-align: center;
}
.hs h3{ color: var(--main-color);}
.ns h3{ color: var(--blue-color);}
.hsns h3{ color: var(--joint-color);}
.rp_list h3 small{ color: var(--primary-text-color);}

.rp_list ul{
	margin: 0;
	padding: 0;
}
.rp_list ul li{
	margin: 5px 0;
	list-style: none;
	text-align: center;
}
.rp_list ul li a{
	display: block;
	padding: 5px 1rem;
	border-radius: 3rem;
	color: #fff;
	text-decoration: none;
}
.hs ul li a{ background-color: var(--main-color);}
.ns ul li a{ background-color: var(--blue-color);}
.hsns ul li a{ background-color: var(--joint-color);}

.rp_list ul li a:hover{
	background: var(--bg-color);
	box-shadow: 0 10px 10px -5px rgba(0,0,0,0.5);
	transform: scale(1.05) rotate(0.1deg) translateX(0);
}
.hs ul li a:hover{ color: var(--main-color);}
.ns ul li a:hover{ color: var(--blue-color);}
.hsns ul li a:hover{ color: var(--joint-color);}

.research .more{ text-align: center;}

@media screen and (max-width: 768px) and  (orientation: portrait) {
	.rp_hanger{ width: 100%;}
}


/* visitor
---------------------------------------------------------- */
.visitor{
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
	overflow: hidden;
	background : linear-gradient(90deg, rgba(203, 232, 236, 1) 38.99%, rgba(225, 239, 213, 1) 100%);
}
.visitor::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/visitor_bg.svg) no-repeat center / cover;
	opacity: 0.5;
	filter: blur(1px);
}
.visitor .inner{
	position: relative;
	z-index: 1;
}

.visitor h2{ text-align: center;}

.visitor_menu{
	justify-content: center;
	width: 100%;
	max-width: 800px;
	margin: 30px auto;
	line-height: 1.4;
}
.visitor_menu li{
	width: calc(100% / 5);
	margin: 0;
	padding: 5px;
	list-style: none;
	text-align: center;
}
.visitor_menu li a{
	display: block;
	color: var(--primary-text-color);
	text-decoration: none;
	font-weight: 500;
}
.visitor_menu li img{
	display: block;
	width: 60%;
	margin: 0 auto 10px;
	border-radius: 50%;
}

.visitor .search_input{
	width: 800px;
	max-width: 100%;
	margin: auto;
}

@media screen and (max-width: 768px) and  (orientation: portrait) {
	.visitor{ padding: 20px 0;}
	.visitor_menu li{
		width: 33%;
		margin: 10px 0;
		font-size: 0.9rem;
	}
	.visitor .search_input{ width: 100%;}
}