@charset "utf-8";
/* CSS Document */
.en_title {
    letter-spacing: 0.12em;
}
.cate1 .titlebox,.cate2 .titlebox{
    color: #0158A7;
        justify-content: flex-start;
}
.line1 {
  display: flex;
  align-items: center;
  position: relative;
}


.line1::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #0158A7;
width: 200px;
  margin-left: 10px;
}

.loader{
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #1a1a1a;
}
.loader .logo{
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 50vw;
	max-width: 600px;
	opacity: 1;
}
body:not(.on) .loader{display: none;}
.entrance_wrap{
	align-items: stretch;
}
.entrance_wrap{
	background-color: #1a1a1a;
}
body.on .entrance_wrap{
	width: 100%;
	height: 100vh;
	background-color: #1a1a1a;
	flex-wrap: nowrap;
}
.entrance_wrap > .logo{
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 50vw;
	max-width: 600px;
	opacity: 0.5;
	-ms-filter: blur(3px);
	filter: blur(3px);
}
.entrance_wrap .box{
	position: relative;
	width: calc(100% / 3);
	padding: 5%;
	transition: ease 0.3s;
	z-index: 2;
}
body.on .entrance_wrap .box:hover{
	width: 50%;
	opacity: 1;
}

body.on .entrance_wrap .box .bg_box{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	overflow: hidden;
}

.entrance_wrap.on .box .bg_box > div{
	transition: 0.3s;
}
body.on .entrance_wrap .box .bg_box > div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
}
body.on .entrance_wrap.active .box .bg_box > div{

}
body.on .entrance_wrap .box:hover .bg_box > div{
	transform: translate(-50%,-50%) scale(1.2);
}

.entrance_wrap .box .txtbox{
	position: relative;
	z-index: 3;
	color: #fff;
flex-direction: column;
}
body.on .entrance_wrap .box .txtbox{
	width: calc(100vw / 4.5);
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
	z-index: 3;
	color: #fff;
}

.entrance_wrap .box .txtbox .logo img{
        width: 90px;
}
.entrance_wrap .box .txtbox .txt{
	padding: 50px 0;
	font-weight: 700;
	line-height: 2.5;
}
.entrance_wrap .box .txtbox .more_txt{
	text-align: center;
margin-top: clamp(20px, 8vw, 150px);
}
.entrance_wrap .box .txtbox .more_txt > div {
  display: inline-block;
  padding: 10px 40px;
  border-radius: 200px;
  border: 1px solid #fff;
  position: relative;
  overflow: hidden;
}

/* 擬似要素：背景（白）が左からスライドイン） */
.entrance_wrap .box .txtbox .more_txt > div::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  background-color: #fff;
  transition: transform 0.4s ease;
}

/* box を hover したときに more_txt の背景を動かす */
.entrance_wrap .box:hover .more_txt > div::after {
  transform: translateX(0);
}

/* テキスト（白 → 黒） */
.entrance_wrap .box .txtbox .more_txt > div p {
  color: #fff;
  position: relative;
  z-index: 2;
  transition: color 0.4s ease;
  font-size: 22px;
}

/* box を hover したときに文字色だけ黒へ */
.entrance_wrap .box:hover .more_txt > div p {
  color: #1a1a1a;
}
.main-wrap .cate_wrap .cate1 .boxwrap{
	align-items: stretch;
	gap: 20px;
}
.main-wrap .cate_wrap .cate1 .boxwrap .box{
	width: calc(50% - 10px);
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	padding: 5%;
}
.main-wrap .cate_wrap .cate1 .boxwrap .box .txtbox h3,.main-wrap .cate_wrap .cate1 .boxwrap .box .txtbox p{color: #fff;}
body.on .main-wrap .cate_wrap .cate1 .boxwrap .box::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0B2E50;
	opacity: 0.5;
}
.main-wrap .cate_wrap .cate1 .boxwrap .box > div{
	position: relative;
	z-index: 2;
}
.main-wrap .cate_wrap .cate1 .boxwrap .box i {
	margin-left: 20px;
    color: #fff;
    font-size: 14px;
    background-color: #0158A6;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.main-wrap .cate_wrap .cate1 .boxwrap a:hover i {
    transform: translateX(5px);
}

.main-wrap .cate_wrap .cate1 .boxwrap .box1{
	width: 100%;
}
.main-wrap .cate_wrap .cate1 .boxwrap .box1 > div{
	width: 47.5%;
}
.main-wrap .cate_wrap .cate1 .boxwrap .box1 .item{
	background-color: #fff;
	border-radius: 10px;
	padding: 5%;
	width: 100%;
}
.main-wrap .cate_wrap .cate1 .boxwrap .box1 .item i{
	background-color: transparent;
	border: 1px solid #111111;
	color: #111111;
}

.main-wrap .cate_wrap .cate2{
	background-color: #F7F7F7;
}
.youtube_wrap{
	/*
	background-color: #F7F7F7;
	*/
}
.youtube_wrap .titlebox{
	flex-direction: column;
}
.youtube_wrap .titlebox img{
	width: 15%;
}



.more-youtube .more-title {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 10px;
    color: #0158A6;
	letter-spacing: 0.1em;
	font-weight: 500;
}
.more-youtube .more-title::before,
.more-youtube .more-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 25px;
    height: 1.5px; 
    background-color: #0158A6; 
    transform-origin: center;
}
.more-youtube .more-title::before {
    left: -10%;
    transform: rotate(65deg);
}
.more-youtube .more-title::after {
    right: -10%;
    transform: rotate(-65deg);
}

.more-youtube .more-title p{
	letter-spacing: 0.2em;
}
.more-youtube img{
	max-width: 280px;
}
.more-youtube i {
	margin-left: 20px;
    color: #fff;
    font-size: 14px;
    background-color: #0158A6;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.more-youtube a:hover i {
    transform: translateX(5px);
}

.youtube_wrap .youtubebox{
	position: relative;
	aspect-ratio: 1.777 / 1;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;
	overflow: hidden;
}
.youtube_wrap .youtubebox iframe{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


.main-wrap .cate_wrap .cate2 .boxwrap{
	gap: 20px;
}
.main-wrap .cate_wrap .cate2 .boxwrap .box{
	width: calc(100% / 6 - 100px / 6);
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	body.on .entrance_wrap .box .txtbox{
		width: calc(100vw / 4);
	}

}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	body.on .entrance_wrap{
		flex-wrap: wrap;
	}
	.entrance_wrap .box{
		position: relative;
		width: 100%;
		padding: 5%;
		height: calc(100vh / 3);
	}
	body.on .entrance_wrap .box{
		opacity:0;
		-ms-filter: blur(6px);
		filter: blur(6px);
	}

	body.on .entrance_wrap.active .box{
		animation-name: blurin;
		animation-delay: 1.4s;
		animation-duration: 1.2s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	body.on .entrance_wrap.active .box1{
		animation-delay: 1.4s;
	}
	body.on .entrance_wrap.active .box2{
		animation-delay: 1.6s;
	}
	body.on .entrance_wrap.active .box3{
		animation-delay: 1.8s;
	}
  .entrance_wrap .box a{display:block; width: 100%;}
	body.on .entrance_wrap .box .txtbox{
		width: 100%;
		transform: translate(0,0);
		position: static;
	}
	body.on .entrance_wrap .box .txtbox .logo{
		width: 60%;
		margin: 0 auto;
	}
	.entrance_wrap .box .txtbox .txt{
		padding: 25px 0;
	}
	.entrance_wrap .box:hover{
		width: 100%;
		opacity: 1;
	}
	body.on .entrance_wrap.active:hover .box:not(:hover){
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
	body.on .entrance_wrap .box:hover .bg_box > div{
		transform: translate(-50%,-50%) scale(1);
	}
	.entrance_wrap .box .txtbox .more_txt > div{
		padding: 8px 30px
	}
	.entrance_wrap .box .txtbox .more_txt > div p{
		font-size: 14px;
	}
body.on .entrance_wrap .box:hover{
	width: 100%;
	opacity: 1;
}
.main-wrap .cate_wrap .cate2 .boxwrap{
	gap: 30px 20px;
}
.main-wrap .cate_wrap .cate2 .boxwrap .box{
	width: calc(100% / 3 - 60px / 3);
}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	body.on .entrance_wrap .box .txtbox{
		width: 100%;
	}
	body.on .entrance_wrap .box .txtbox .logo{
		width: 50%;
		margin: 0 auto;
	}
.main-wrap .cate_wrap .cate1 .boxwrap .box1 > div{
	width: 100%;
}
	.main-wrap .cate_wrap .cate1 .boxwrap .box1 .txtbox{margin-bottom: 20px;}
	.entrance_wrap .box .txtbox .txt{
		padding: 30px 0;
		font-size: 14px;
		line-height: 2;
	}
	.entrance_wrap .box .txtbox .more_txt > div p{
		font-size: 12px;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	body.on .entrance_wrap .box .txtbox .logo{
		width: 70%;
		margin: 0 auto;
	}
	.entrance_wrap .box .txtbox .default_title{
		font-size: 22px;
		margin-bottom: 10px;
	}
	.entrance_wrap .box .txtbox p{
		font-size: 20px;
	}
	.entrance_wrap .box .txtbox .txt{
		padding: 10px 0;
		font-size: 10px;
		line-height: 1.5;
	}
	.entrance_wrap .box .txtbox .logo img{
		width: 70px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 15px;
	}
	.entrance_wrap .box .txtbox .more_txt{
		margin-top: 15px;
	}
	.entrance_wrap .box .txtbox .more_txt > div{
		padding: 5px 20px
	}
	.entrance_wrap .box .txtbox .more_txt > div p{
		font-size: 10px;
	}
	.more-youtube .more-title{
		width: 60%;
	}
	.more-youtube .more-title::before{
		left: -7%;
	}
	.more-youtube .more-title::after{
		right: -7%;
	}
	.more-youtube{
		padding: 30px 0;
	}
	.more-youtube img{
		width: 180px;
	}
.main-wrap .cate_wrap .cate1 .boxwrap .box{
	width: 100%;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	padding: 5%;
}
.main-wrap .cate_wrap .cate2 .boxwrap{
	gap: 30px 15px;
}
.main-wrap .cate_wrap .cate2 .boxwrap .box{
	width: calc(100% / 2 - 15px / 2);
}
	.entrance_wrap .box .txtbox .more_txt > a{
	display: inline-block;
	padding: 5px 20px;
	border-radius: 200px;
	border: 1px solid #fff;
	position: relative;
	overflow: hidden;
}

}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}