@charset "utf-8";

/************************************************************
トップページ
************************************************************/


/*first-view*****************************************/
#first-view {
	position: relative;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	z-index: 1;
	animation: slider 18s infinite;
}
.slide-01 {
	background-image: url(../images/slide-1.webp);
}
.slide-02 {
	animation-delay: 6s;
	background-image: url(../images/slide-2.webp);
}
.slide-03 {
	animation-delay: 12s;
	background-image: url(../images/slide-3.webp);
}


@keyframes slider {
  0%       { opacity: 0; z-index: 2; transform: scale(1); } /* ここで z-index:2 に上げる */
  16.66%   { opacity: 1; z-index: 2; }
  33.33%   { opacity: 1; z-index: 2; }
  33.34%   { opacity: 1; z-index: 1; } /* フェードアウト開始時に下に落とす */
  50%      { opacity: 0; z-index: 0; transform: scale(1.2) ;} /* 完全に消えたら最背面へ */
  100%     { opacity: 0; z-index: 0; }
}

.home #content {
	margin-top: 0 !important;
}

.top-copy {
	display: inline-block;
	position: absolute;
	left:0;
	right: 0;
	margin: 0 auto;
	top: calc(50% + 100px);
	transform: translateY(-50%);
	z-index: 10;
}
 .top-copy .txt-80 {
	text-shadow:
	5px 5px 15px rgba(0,0,0,0.3),
	-5px 5px 15px rgba(0,0,0,0.3),
	5px -5px 15px rgba(0,0,0,0.3),
	-5px -5px 15px rgba(0,0,0,0.3);
}
.top-copy .txt-30 {
	text-shadow:
	2px 2px 6px rgba(0,0,0,0.3),
	-2px 2px 6px rgba(0,0,0,0.3),
	2px -2px 6px rgba(0,0,0,0.3),
	-2px -2px 6px rgba(0,0,0,0.3);
	
}

.scroll-bar {
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 60px;
	padding: 0 10px;
	transform: rotate(90deg);
	transform-origin: bottom right;
	color: #ffffff;
	font-size: 14px;
	text-shadow: 1px 1px 3px #000;
	z-index: 10;
}
.scroll-bar:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #ffffff;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 1px 1px 3px #000;
}
.scroll-bar:after {
	content: "";
	display: block;
	width: 10px;
	height: 1px;
	background-color:#fa2c04;
	position: absolute;
	left: -20px;
	bottom: 0;
	animation: shine 2s infinite;
}
@keyframes shine {
	from {
		left: -10px;
	}
	to {
		left: 150%;
	}
}

@media(max-width:1260px){
	.top-copy .txt-80 {
		font-size: 6vw;
	}
	.top-copy .txt-30 {
		font-size: 2.3vw;
		
	}
}
@media (max-width: 1100px) {
    .top-copy {
		top: calc(50% + 80px);
	}

}

@media(max-width:991px){
	.top-logo {
		top: 30px;
		left: 30px;
	}
}
@media(max-width:767px){
	.top-logo {
		top: 10px;
		left: 10px;
		width:35%;
		height: auto;
		max-width: 150px;
	}
	.scroll-bar {
		right: calc(50% + 0.7em);
	}
	.top-copy {
		top: calc(50% + 60px);
	}
	.slide-01 {
		background-image: url(../images/slide-1_sp.webp);
	}
	.slide-02 {
		background-image: url(../images/slide-2_sp.webp);
		background-position: 100% center;
	}
	.slide-03 {
		background-image: url(../images/slide-3_sp.webp);
	}
}
@media(max-width:500px){
	.top-copy .txt-80 {
		font-size: 6.5vw;
	}
	.top-copy .txt-30 {
		font-size: 3.3vw;
		
	}
}



/*home_01*****************************************/
#home_01 {
	position: relative; /* 子要素の絶対配置の基準にする */
	overflow: hidden;   /* 画像がはみ出さないようにする */
	padding-top: 200px;
	padding-bottom: 200px;
	z-index: 1;
}
  
#home_01 .parallax-1 {
	position: absolute; /* 絶対配置にして背景として固定 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;  /* 画像の縦横比を維持しながら要素全体にフィット */
	z-index: 1;         /* 背景として一番下に配置 */
}

#home_01 .container {
	position: relative; /* 親要素内で相対配置 */
	z-index: 2;         /* 画像より上に表示 */
}

@media(max-width:767px){
	#home_01 {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	#home_01 .txt-46 {
		font-size: 22px;
	}
}

.archive-list .flex {
	column-gap: 30px;
}
.blog-date-wrapper {
	width: 120px;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.blog-date-wrapper:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	background: #005AB7;
	z-index: 1;
	transition: .2s;
}
.blog-date-wrapper span {
	position: relative;
	z-index: 2;
	color: #fff;
	font-size: 16px;
	line-height: 1.3;
}
ul.archive-list li {
	margin-bottom: 30px;
}
ul.archive-list li:last-child {
	margin-bottom: 0;
}
.link-more {
	column-gap: 10px;
}

@media (min-width:768px){
	.link-more img {
		transition: .3s;
	}
	.link-more:hover img {
		transform: translateX(5px);
	}
	.archive-list a:hover .blog-date-wrapper:after {
		transform: scale(1.07);
	}
}

@media(max-width:767px){
	.blog-date-wrapper {
		width: 70px;
		font-size: 14px;
	}
	.blog-date-wrapper span {
		font-weight: 500;
	}
	.archive-list .flex {
		column-gap: 10px;
	}
	.blog-info-wrpper {
		width: calc(100% - 80px);
	}
	.blog-archive-ttl {
		margin-bottom: 5px;
	}

}



/*home_02*****************************************/

#home_02 {
	background-image: url(../images/umi.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	background-color: #9cfeff;
  }

.onView .cyber_bg-03 {
	animation:leftIn 3s 0.2s forwards;
}
.onView .cyber_bg-04 {
	animation:rightIn 4s 0.3s forwards;
}
#home_03 .container-full {
	position: relative;
	z-index: 2;
}

.text-block {
	width: calc(50% + 50px);
	max-width: 780px;
	position: relative;
	background: rgba(255,255,255,.85);
	padding: 50px 60px;
	border: 1px solid #005AB7;
}
.rev .text-block {
	margin-left: auto;
	margin-right: -50px;
}
.fwd .text-block {
	margin-left: -50px;
	margin-right: auto;
}

.one-third li {
	width: 32%;
	aspect-ratio: 1 / 2;
}
.one-third li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.one-third li:nth-child(1){
	margin-top: -12%;
}
.one-third li:nth-child(2){
	margin-top: 15%;
}

.one-third li:nth-child(2){
	animation-delay: .4s;
}
.one-third li:nth-child(3){
	animation-delay: .6s;
}
.home_02_2 .text-block {
	animation-delay: .4s;
}
.home_02_1 .text-block {
	animation-delay: .4s;
}

@media(max-width:1560px){
	.text-block {
		width: calc(50% + 3.2vw);
		max-width: 100%;
	}
	.rev .text-block {
		margin-right: -3.2vw;
	}
	.fwd .text-block {
		margin-left: -3.2vw;
	}

}


@media(max-width:991px){
	.photo-block {
		width: 100%;
		max-width: 100%;
	}
	.rev .photo-block {
		margin-left: -30px;
		margin-right: auto;
	}
	.fwd .photo-block {
		margin-right: -30px;
		margin-left: auto;
	}
	.text-block {
		width: 100%;
		max-width: 100%;
		margin-top: -5vw;
		padding: 7vw 30px 30px;
	}
	.rev .text-block {
		margin-right: -30px;
	}
	.fwd .text-block {
		margin-left: -30px;
	}

}
@media(max-width:767px){
	.rev .photo-block {
		margin-left: -15px;
		margin-right: auto;
	}
	.fwd .photo-block {
		margin-right: -15px;
		margin-left: auto;
	}
	.rev .text-block {
		margin-right: -15px;
	}
	.fwd .text-block {
		margin-left: -15px;
	}
	.text-block {
		padding: 7vw 15px 15px;
	}


}

/*home_03*****************************************/

.link-banner {
	row-gap: 30px;
}
.link-banner a {
	display: block;
	position: relative;
	aspect-ratio: 7 / 3;
	overflow: hidden;
}
.link-banner a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	position: relative;
	z-index: -1;
	transition: .3s;
}
.link-banner a:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.2);
}
.link-banner h3 {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content:center;
	align-items: center;
}

@media(min-width:768px) {
	.link-banner a:hover img {
		transform: scale(1.1);}
}