@charset "utf-8";
/* CSS Document */
html{scroll-behavior: smooth;}
*{box-sizing: border-box;}
body{
	letter-spacing: .01em;
	line-height: 1.8;
	color: #282828;
	font-size: 16px;
	font-family: "Geist", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
img{width: 100%;}
h3,.sec2 h3{font-size: 48px;margin-bottom: 50px;}
.orenge{color: #eb5505;font-weight: 600;}
.blue,.btn,.sec2 h4{color: #1d4294;font-weight: 600;}
.w1200{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}
.br540,.br425{display: none;}
@media only screen and (max-width: 850px){
	.br850{display: none;}
}
@media only screen and (max-width: 768px){
	body{font-size: 14px;}
	h3,.sec2 h3{font-size: 24px;margin-bottom:20px;}
	.pc_none{display: none;}
}
@media only screen and (max-width: 540px) {
	.br540{display: block;}
	.pc{display: none;}
}
@media only screen and (max-width: 425px) {
	.br425{display: block;}
	.br540{display: none;}
}
@media only screen and (max-width: 375px) {
	.br425{display: none;}
}
/*=============================================================

mv

=============================================================*/
.mv{position: relative;}
h1{
	position: absolute;
	max-width: 150px;
	width: 15%;
	top: 30px;
	right: 30px;
	z-index: 100;
}
h2{opacity: 0;position: absolute;}
.hero-slider {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.hero-slider .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: fadeSlider 12s infinite ease-in-out;
}
.hero-slider .slide-2 {animation-delay: 6s;}
.hero-slider picture {
	display: block;
	width: 100%;
	height: 100%;
}
.hero-slider img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media screen and (min-aspect-ratio: 21/9) {
	.hero-slider img {
		width: 100vw;
		height: auto;
		object-fit: contain;
	}
}
@media screen and (max-width: 1024px) {
	.hero-slider{max-height: 800px;}   
}
@media screen and (max-width: 768px) {
	.hero-slider {
		height: auto;
		aspect-ratio: 5 / 8;
	}
	h1{
		top: 15px;
		right: 5%;
	}
}
@keyframes fadeSlider {
0% {opacity: 0;}
10% {opacity: 1;}
50% {opacity: 1;}
60% {opacity: 0;}
100% {opacity: 0;}
}
/*=============================================================

cm

=============================================================*/
.cm{
	background-image: linear-gradient(45deg, #27ccfc 20%, #ffa9a5 71%);
	padding: 120px 0;
	text-align: center;
}
.cm h3{color: #fff;}
.video{
	max-width: 800px;
	width: 90%;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}
.video iframe{
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 768px) {
	.cm{padding: 50px 0;}
}
/*=============================================================

sec1

=============================================================*/
.sec1{text-align: center;}
.message{
	padding: 120px 0;
	text-align: center;
	font-size: 21px;
	line-height: 2.5;
}
.clm_2{
	display: flex;
	gap:5%;
	text-align: left;
	margin-top: -5px;
	align-items: center;
	background: url(../img/l.webp) no-repeat top right / 50%;
}
.clm_l{flex-direction: row-reverse;background: url(../img/l.webp) no-repeat top left / 50%;}
.clm_2>div{width: 45%;}
.clm_2>img{width: 50%;}
.first>img::before{
	content: "";
	background: #000;
}
.clm_2 h4{
	display: flex;
	align-items: flex-start;
	gap:10px;
	font-size: 24px;
	margin-bottom: 30px;
}
.clm_2 h4 img{
	max-width: 85px;
	width: 18%;
}
.s600{
	max-width: 603px;
	width: 50.3%;
	margin: 0 auto;
 }
.w50{
	width: 50%;
	margin-left: 50%;
}
.gradient-btn {
	display: block;
	text-align: center;
	width: 320px;
	margin-top: 40px;
	padding: 20px 60px;
	font-size: 18px;
	color: #1d4294;
	font-weight: bold;
	background: #fff;
	cursor: pointer;
	position: relative;
	z-index: 1;
	transition: 0.3s;
}
.gradient-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2px;
	background: linear-gradient(to right, #eb5505 0%, #1d4294 100%);
	-webkit-mask: 
	 linear-gradient(#fff 0 0) content-box, 
	 linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	z-index: -1;
}
.gradient-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -30px;
	width: 50px;
	height: 2px;
	background-color: #1d4294;
	transition: 0.3s;
}
.gradient-btn:hover::after {right: -40px;}
@media only screen and (max-width: 1024px) {
	.clm_2 h4 {font-size: 21px;}
}
@media only screen and (max-width: 768px) {
	.message{
		padding: 50px 0;
		font-size: 16px;
	}
	.clm_2{flex-direction:column-reverse;}
	.clm_2>div{width: 100%;}
	.clm_2>img{
		width: 80%;
		margin: 0 auto 10px;
	}
	.clm_2 h4{
		font-size: 16px;
		margin-bottom: 20px;
	}
	.clm_2 h4 img{
		max-width: 50px;
		width: 18%;
	}
	.clm_2,.clm_l{background:none;margin-bottom: 70px;}
	.s600{display: none;}
	.w50{
		width: 80%;
		margin-left: 0;
	}
	.gradient-btn {
		width: 250px;
		margin: 20px auto 0;
		padding: 15px 30px;
		font-size: 14px;
	}
	.gradient-btn::after {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: -20px;
		width: 40px;
		height: 2px;
		background-color: #1d4294;
		transition: 0.3s;
	}
	.gradient-btn:hover::after {right: -30px;}
}
@media only screen and (max-width: 540px) {
	.message{
		text-align: left;
		font-size: 15px;
	}
}
/*=============================================================

sec2

=============================================================*/
.sec2{
	background: 
    url("../img/text.png") top 50px left 10px / 55% auto no-repeat,
    linear-gradient(0deg, #a5baf5, #f2bba7 45%, #ffffff 80%);
	padding: 9% 0 100px;
}
.sec2 h4{
	color: #1d4294;
	font-size: 32px;
	margin-bottom: 15px;
}
.open-btn{
	background: #eb5505;
	line-height: 50px;
	padding: 0 30px;
	display: block;
	width: 250px;
	color: #fff;
	font-weight: 600;
	margin-top: 40px;
	text-align: left;
	position: relative;
	transition: 0.3s;
	z-index: 20;
}
.open-btn span{
	display: block;
	font-size: 16px;
}
.open-btn span::after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 12px solid #ffffff;
	border-right: 0;
	position: absolute;
	right: 20px;
	top: 50%;
	transform:translateY(-50%);
}
.open-btn:hover{
	background: #1d4294;
}
.int01{
	display: flex;
	gap:8%;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto 100px;
}
.int01>picture{
	width: 35%;
	display: block;
}
.int01>div{
	width: 57%;
	background: url("../img/int01.png") no-repeat top left / 25%;
	padding: 3% 0 0 5%;
}
.int01 h4 span{
	font-size: 18px;
	display: block;
}
.sec2 .hikidasi li{
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}
.sec2 .hikidasi li:nth-child(even){flex-direction: row-reverse;}
.sec2 .hikidasi li picture{
	width: 20%;
	display: block;
}
.sec2 .hikidasi li div{
	background: #fff;
	padding: 40px;
	border-radius: 10px;
	width: 80%;
}
@media only screen and (max-width: 768px) {
	.sec2{padding: 80px 0 20px;}
	.sec2 h4{
		font-size: 21px;
		margin-bottom: 15px;
	}
	.open-btn{
		line-height: 50px;
		padding: 0 30px;
		margin-top: 30px;
	}
	.int01{
		flex-direction: column;
		gap:50px;
		width: 100%;
		margin-bottom: 80px;
	}
	.int01>picture{width: 100%;}
	.int01>div{
		width: 100%;
		padding: 10% 5% 0;
		background: url(../img/int01.png) no-repeat top left / 25%;
	}
	.sec2 .int01 h4{padding: 0;}
	.int01 h4 span{font-size: 12px;}
	.sec2 .hikidasi li{
		margin-bottom: 50px;
		position: relative;
	}
	.sec2 .hikidasi li:nth-child(even){flex-direction: row;}
	.sec2 .hikidasi li picture{
		width: 120px;
		position: absolute;
		right: -2%;
		bottom: -30px;
		z-index: 10;
	}
	.sec2 .hikidasi li div{
		padding: 30px 5% 50px;
		border-radius: 5px;
		width: 100%;
		position: relative;
	}
}
@media only screen and (max-width: 480px) {
	.sec2 .hikidasi li div{padding: 40px 5%;}
	.sec2 .hikidasi li:first-child div{padding: 60px 5% 30px;}
	.open-btn {width: 100%;}
	.sec2 h4 {
        font-size: 16px;
        padding-right: 80px;
    }
	.sec2 .hikidasi li picture{
		width: 90px;
		right: -2%;
		top: -20px;
		z-index: 10;
	}
}
/*=============================================================

popup

=============================================================*/
body.no-scroll {overflow: hidden;}
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 1000;
}
.popup-overlay.is-active {
	opacity: 1;
	pointer-events: auto;
}
.popup-content {
	background: 
    url("../img/map.png") center right 10px / 80% auto no-repeat,
    linear-gradient(0deg, #fbe7e0, #ffffff 100%);
	padding: 40px 30px 40px 40px;
	border-radius: 10px;
	max-width: 1000px;
	width: 90%;
	position: relative;
	top: 30px;
}
.popup-inner{
	max-height: 70vh;
    overflow-y: scroll;
	padding-right: 10px;
}
.close-btn{
	position: absolute;
	top: -30px;
	right: -30px;
	width: 60px;
	transition: 0.3s;
	background-color: transparent;
}
.popup-content li{margin-bottom: 40px;}
.popup-content li div{
	margin-bottom: 10px;
	font-size: 21px;
}
.popup-content .em{margin:30px 0 50px;}
.popup-content .em div{font-size: 36px;}
.popup-content .em p{font-size: 18px;}
.popup-content .bg_w {
	background: #fff;
	border-radius: 10px;
	padding: 30px;
}
@media only screen and (max-width: 768px) {
	.popup-content {
		padding: 20px 3% 20px 5%;
		top: 20px;
	}
	.popup-inner{padding-right: 2%;}
	.close-btn{
		top: -10px;
		right: -10px;
		width: 40px;
	}
	.popup-content li{margin-bottom: 20px;}
	.popup-content li div{font-size: 14px;}
	.popup-content .em{margin:20px 0 40px;}
	.popup-content .em div{font-size: 16px;}
	.popup-content .em p{font-size: 14px;}
	.popup-content .bg_w {padding: 20px 5%;}
}
/*=============================================================

footer

=============================================================*/
footer{
	padding: 30px 5%;
	text-align: center;
}
footer img{
	width: 30%;
	max-width: 180px;
	margin: 0 auto 20px;
	display: block;
}
/*=============================================================

pagetop

=============================================================*/
.page-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	max-width: 35px;
	width: 5%;
	min-width: 15px;
	border: none;
	cursor: pointer;
	background-color: transparent;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.page-top.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.page-top:hover {transform: translateY(-3px);}
@media only screen and (max-width: 768px) {
	.page-top {right: 2.5%;}
}