/*common mod---------------*/
section h1 {
    margin: 0 0 80px;
}
/*top-visual---------------*/
.bg01 {
	animation: bg01Anime 6s forwards;
}
.bg02 {
	animation: bg02Anime 6s forwards;
}
.top-visual .logoArea{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 309px;
	height:44px;
	overflow:hidden;
	z-index: 3;
}
.top-visual .logoArea img{
	position:absolute;
	bottom:-44px;
	left:20px;
	width:100%;
	animation: logoAnime 6s forwards;
}

@keyframes bg01Anime {
	0% { opacity: 0; }
	20% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes logoAnime {
	15% { bottom: -44px;left:20px;}
	25% { bottom: 0; left:0;}
	40% { bottom: 0; left:0;opacity:1;}
	60% { bottom: 0; left:0;opacity:0;}
	100% { bottom: 0; left:0;opacity:0;display:none;}
}

@keyframes bg02Anime {
	0% { opacity: 0; }
	40% { opacity: 0; }
	55% { opacity: 1; }
	100% { opacity: 1; }
}

.top-navi{
	top:-76px;
	animation: topnaviAnime 6s forwards;
}
@keyframes topnaviAnime {
	70% { top:-76px; }
	85% { top:0px; }
	100% { top:0px; }
}
/*top----------------*/
.mainVis{
	position:fixed;
	width:calc(100% - 160px);
	opacity:1;
	height:calc(100vh - 76px);
	transition: opacity 1s;
}
.mainVis.invisible{
	opacity:0;
	transition: opacity 1s;
}
.mainVis .inner{
	position:absolute;
	max-width:100%;
	top: 50%;
	margin:-38px 0 0!important;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
	
}
.mainVis .inner div{
	color:#002940;
	box-sizing: border-box;
}
.copy01{
	height:54px;
	padding-top:54px;
	margin:0 0 34px;
	font-family: Albert Sans;
	font-weight: 700;
	font-size: 54px;
	line-height: 1;
	letter-spacing: 2px;
	overflow:hidden;
	animation: copyAnime01 6s forwards;
}
.copy02{
	height:24px;
	padding-top:24px;
	margin:0 0 64px;
	font-family: Albert Sans;
	font-weight: 800;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 1.96px;
	overflow:hidden;
	animation: copyAnime02 6s forwards;
}
.copy03,.copy04{
	height:20px;
	padding-top:20px;
	margin:0 0 28px;
	font-family: Noto Sans JP;
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 1.6px;
	overflow:hidden;
	animation: copyAnime03 6s forwards;
}
@keyframes copyAnime01{
	50% { padding-top:54px; }
	65% { padding-top:0; }
	100% { padding-top:0; }
}
@keyframes copyAnime02{
	65% { padding-top:24px; }
	80% { padding-top:0; }
	100% { padding-top:0; }
}
@keyframes copyAnime03{
	65% { padding-top:20px; }
	80% { padding-top:0; }
	100% { padding-top:0; }
}

section .inner.pickup{
	position:absolute;
	left:0;
	right:0;
	bottom:40px;
	width:calc(100% - 160px);
	height:0;
	padding:0 80px;
	overflow:hidden;
	animation: pickupAnime 6s forwards;
}
.pickup > div{
	width:50%;
	height:94px;
	margin:0 0 0 50%;
	padding:16px 24px;
	border-radius:12px;
	background: rgba(255, 253, 233, 0.4);
	border: 1px solid #FFFFFF;
	backdrop-filter: blur(40px);
	overflow:hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
@keyframes pickupAnime{
	70% { height:0; }
	85% { height:98px; }
	100% { height:98px; }
}
.pickup h2{
	position:relative;
	margin:0 0 16px;
	font-family: Albert Sans;
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 1.6px;
}
.pickup time{
	display:block;
	position:absolute;
	top:16px;
	right:24px;
	font-size:14px;
	line-height: 1;
	color:#8E9CA4;
}
.pickup a{
	display:block;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	line-height: 1;
	overflow: hidden;
}

/*-------------------*/
.gradation{
	position:relative;
	margin:100vh 0 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 249, 249, 0.9) 28.37%);
	z-index:2;
}
/*news---------------*/
.news dt{
	position:relative;
}
.news dt a.readmore{
	position:absolute;
	bottom:0;
	right:0;
}
.news dd ul{
    margin: 0 0 30px;
}
.news dd ul li{
	display:flex;
	padding:13px 16px;
	border-top:1px solid #8E9CA4;
	color:#002940;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.news dd ul li:last-child{
	border-bottom:1px solid #8E9CA4;
}
.news dd ul li a{
	display:inline-block;
	margin:0 0 0 20px;
	color:#002940;
}
/*our Initiatives----------*/
.ourinitiatives{
	color:#fff;
}
.ourinitiatives h2{
	color:#D3D7DC;
	font-size:36px;
	font-family: Albert Sans;
	font-weight: 700;
	font-style: Bold;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 8%;
	text-transform: uppercase;
}

.ourinitiatives dt{
	position:relative;
}
.ourinitiatives dd{
	margin:0 0 64px;
}
.ourinitiatives dd:last-child{
	margin:0;
}
.ourinitiatives dt a.readmore{
	position:absolute;
	bottom:0;
	right:0;
}
.ourinitiatives div.article{
	margin:0 0 30px;
	font-weight:500;
	font-family: Noto Sans JP;
	font-weight: 500;
	font-style: Medium;
	font-size: 18px;
	leading-trim: NONE;
	line-height: 240%;
	letter-spacing: 8%;
}
.ourinitiatives ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.ourinitiatives ul li:firt-child{
	width:72%;
}
.ourinitiatives ul li:last-child{
	width:25.5%;
}
.book{
	position:relative;
	padding:20px;
	background:#fff;
	color:#002940;
	border-radius:18px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.book a:not(.readmore){
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}
.book h3{
	font-weight:700;
}
.book img{
	display:block;
	width:62%;
	margin:15px auto 20px;
	box-shadow: 4px 5px 5px 0px rgba(0, 0, 0, 0.17);
}
.book .readmore{
	margin:0 auto;
}
.book:hover a.readmore.blue-border{
	background:#002940 url(../assets/img/arrow-external_w.svg) no-repeat;
	background-position:right 16px center;
	color:#D3D7DC;
}
.book:hover a.readmore.blue-border:hover{
	background:url(../assets/img/arrow-external_b.svg) no-repeat;
	background-position:right 16px center;
	color:#002940;
	border:1px solid #002940;
}
/*our services----------*/
.ourservice dt{
	position:relative;
}
.ourservice dt a.readmore{
	position:absolute;
	bottom:0;
	right:0;
}
.service{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.service > li{
	position:relative;
	width:31.87%;
	padding:3.57% 2.57% 3.57% 3.57%;
	border-radius:16px;
	/*aspect-ratio:119 / 130;*/
	background:#fff;
	color:#002940;
	z-index:0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	transition-duration: 0.3s;
}
.service > li:hover{
	color:#fff;
}
.service > li::after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:16px;
	z-index:-1;
	transition-duration: 0.3s;
	opacity: 0;
	pointer-events: none;
}
.service > li:nth-of-type(1)::after{
	background-image:
		url('../assets/img/ourservice-jinzai_bg.png'),
		linear-gradient(rgba(0, 41, 64, 0.8), rgba(0, 41, 64, 0.8));
	background-repeat: no-repeat;
	background-size:100.5%;
	background-position: center;
}
.service > li:nth-of-type(2)::after{
	background-image:
		url('../assets/img/ourservice-consulting_bg.png'),
		linear-gradient(rgba(0, 41, 64, 0.8), rgba(0, 41, 64, 0.8));
	background-repeat: no-repeat;
	background-size:100.5%;
	background-position: center;
}
.service > li:nth-of-type(3)::after{
	background-image:
		url('../assets/img/ourservice-art_bg.png'),
		linear-gradient(rgba(0, 41, 64, 0.8), rgba(0, 41, 64, 0.8));
	background-repeat: no-repeat;
	background-size:100.5%;
	background-position: center;
}
.service > li:hover::after {
	opacity: 1;
}
.service > li a:not(.readmore){
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
}
.service > li h3{
	margin:0 0 24px;
	padding:2px 0;
	font-weight: 700;
	font-size: clamp(18px, 1.8vw, 24px);
	line-height: 1;
}
.service > li:hover h3{
	transition-duration: 0.3s;
}
.service > li div{
	aspect-ratio:79 / 31;
	line-height:1.7;
}
.service > li a.readmore{
	position:absolute;
	bottom:5.2%;
	right:8.2%;
}
/* li:hover 中は readmore を「hover見た目」にしておく */
.service > li:hover a.readmore.blue{
	background:#fff url(../assets/img/arrow_b.svg) no-repeat;
	background-position:right 16px center;
	color:#002940;
}

/* ただし li:hover 中に readmore 自体を hover しても変化させない（同じ値を当てる） */
.service > li:hover a.readmore.blue:hover{
	background:#fff url(../assets/img/arrow_b.svg) no-repeat;
	background-position:right 16px center;
	color:#002940;
}

.results{
	padding:0 0 30px;
}
.results li{
	padding:0 0 0 32px;
	margin:0 0 4px;
	font-size: clamp(12px, 1.2vw, 16px);
	background:url(../assets/img/icon-check_o.svg) left center no-repeat;
}
.results li:last-child{
	margin:0;
}
.service > li:hover .results li{
	background:url(../assets/img/icon-check_w.svg) left center no-repeat;
	transition-duration: 0.3s;
}

/*note------------------*/
.note{
	position:relative;
}
.note > a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}
.note ul{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	aspect-ratio:560 / 177;
	margin:40px 0 0;
	padding:23% 3.39% 32px 5.54%;
	background:url(../assets/img/note_bg.png) no-repeat top left / 100%;
	border-radius:16px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.note ul li{
	width:50%;
	color:#fff;
}
.note ul li:last-child a{
	margin:10px 0 0 auto;
}
/* li:hover 中は readmore を「hover見た目」にしておく */
.note:hover a.readmore.white.external-link{
	background:#002940 url(../assets/img/arrow-external_w.svg) no-repeat;
	background-position:right 16px center;
	background-size:16px;
	color:#fff;
	border:1px solid #002940;
}

/* ただし li:hover 中に readmore 自体を hover しても変化させない（同じ値を当てる） */
.note:hover a.readmore.white.external-link:hover{
	background:#002940 url(../assets/img/arrow-external_w.svg) no-repeat;
	background-position:right 16px center;
	background-size:16px;
	color:#fff;
	border:1px solid #002940;
}


/*company---------------*/
.company{
	margin:80px auto 0;
	padding:0 0 80px;
	text-align:center;
}
.company dl{
	display:flex;
	flex-wrap:wrap;
	max-width:840px;
	margin:0 auto 40px;
	color:#002940;
	text-align:left;
}
.company dt{
	display:flex;
	align-items:center;
	width:18.57%;
	padding:16px 0 13px 16px;
	border-top:1px solid #8E9CA4;
	font-size:14px;
	font-weight: 500;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.company dd{
	width:81.43%;
	padding:16px 0 13px;
	font-weight:600;
	border-top:1px solid #8E9CA4;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

.company dd div{
	color:#8E9CA4;
	font-weight:400;
	font-size:14px;
	line-height:1.6;
}
.company dt:last-of-type,.company dd:last-of-type{
	border-bottom:1px solid #8E9CA4;
}


@media screen and (max-width: 960px) {
	section h1{
		margin: 0 0 30px;
	}
	.mainVis{
		width:87.2%;
		height:calc(calc(var(--vh, 1vh) * 100) - 48px);
	}
	.mainVis .inner{
		margin:-44px 0 0!important;
	}
	.copy01{
		height:32px;
		font-size: 36px;
	}
	.copy02{
		height:52px;
		padding-top:50px;
		margin:0 0 40px;
		font-size: 20px;
		line-height:1.4;
	}
	.copy03,.copy04{
		height:43px;
		padding-top:40px;
		margin:0 0 4px;
		font-size: 16px;
		line-height:1.4;
	}
	@keyframes copyAnime02{
		65% { padding-top:50px; }
		80% { padding-top:0; }
		100% { padding-top:0; }
	}
	@keyframes copyAnime03{
		65% { padding-top:40px; }
		80% { padding-top:0; }
		100% { padding-top:0; }
	}
	
	section .inner.pickup{
		width:auto;
		padding:0 6.4%;
		bottom:100px;
		left:0;
	}
	.pickup > div{
		width:100%;
		margin:0;
	}

	/*news---------------*/
	.news dt{
		width:100%;
	}
	.news dt a.readmore-w{
		position:relative;
	}
	.news dd{
		width:100%;
	}
	.news dd ul{
		margin:0 0 32px;
	}
	.news dd ul li{
		display:block;
		padding:13px 0;
		font-size:13px;
	}
	.news dd ul li time{
		display:block;
		margin:0 0 1px;
	}
	.news dd ul li a{
		margin:0;
	}/*our Initiatives----------*/
	.ourinitiatives dt{
		margin:0 0 40px;
	}
	.ourinitiatives h2{
		font-size:20px;
	}
	.ourinitiatives div.article{
		font-size: 14px;
	}
	.ourinitiatives ul li:firt-child{
		width:100%;
	}
	.ourinitiatives ul li:last-child{
		width:100%;
	}
	.ourinitiatives ul li:last-child div{
		margin:30px auto 0;
	}
	/*our services----------*/
	.service > li{
		width:100%;
		margin:0 0 24px;
		padding:7.3% 7.3% 18%;
		aspect-ratio:initial;
	}
	.service > li div{
	    aspect-ratio: initial;
		margin:0 0 20px;
	}
	.service > li a.readmore {
		right: 7.3%;
	}
	.results{
		padding:0 0 10px;
	}
	.results li{
		margin:0 0 6px;
		font-size:14px;
	}
	/*note------------------*/
	.note{
		align-items:end;
		margin:0;
		padding:23.7% 6.4% 4.8%;
		aspect-ratio: 163 / 141;
		background:url(../assets/img/note_bg_sp.png) no-repeat top left / 100%;
		border-radius: 16px;
		box-sizing: border-box;
	}
	.note ul {
		flex-wrap:wrap;
		padding:0;
		background:none;
	}
	.note ul li{
		width:100%;
	}
	.note ul li:last-child{
		margin:20% 0 0;
	}
	.note ul li:last-child a{
		margin:0 auto 0 0;
	}

	/*company---------------*/
	.company{
		margin:40px auto 0;
		padding:0 0 40px;
	}
	.company dt{
		width:100%;
		padding:15px 0 5px 4.8%;
	}
	.company dd{
		width:100%;
		padding:0 0 13px 4.8%;
		border-top:none;
		font-weight:500;
	}
	.company dt:last-of-type{
		border-bottom:none;
	}

	
}