@charset "UTF-8";
/*
 * top_layout.css
 *
 */

 /* !mainvisual
---------------------------------------------------------- */
.mainvisual {
	position: relative;
	width:100%;
	height:100vh;
	overflow: hidden;
}
.mainvisual__bg {
	position: absolute;
	width:100%;
	height:100vh;
	z-index:0;
}
.mainvisual__slider {
	width: 100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size: cover;
	position: relative;
	z-index:1;
}
.mainvisual__filter {
	position: absolute;
	width:100%;
	height: 50vh;
	background: rgb(34, 50, 50, .2);
	background: linear-gradient(0deg,rgba(34, 50, 50, 0.9) 0%, rgba(34, 50, 50, 0) 100%);
	z-index: 2;
	left: 0;
	bottom:0;
}
.mainvisual__content {
	position: absolute;
	width:100%;
	height:100vh;
	z-index:3;
}

/* --- アニメーション定義 --- */
.mainvisual__copy {
    position: absolute;
    bottom: 130px;
    left: 5%;
    z-index: 4;
    font-size: 58px;
    font-weight: var(--font-weight-bold);
    color: #FFF;
    line-height: 1.5;
}
.mainvisual__copy .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: charReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    /* 遅延して、流れるような速さに調整 */
    animation-delay: calc(0.06s * var(--i) + 0.5s);
}

/* 湧き上がる動きの定義 */
@keyframes charReveal {
    0% {
        opacity: 0;
        transform: translateY(100%);
        /* 登場時に少しだけぼかすとより洗練されます */
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.mainvisual__copy-en {
	position: absolute;
    bottom: 70px;
    left: 5%;
    font-family: var(--font-family-en);
    font-size: 24px;
    color: #AFE7F6;
    z-index: 3;
    /* 初期状態 */
    opacity: 0;
    animation: modernFadeIn 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 2.8s; /* 日本語が終わる頃に開始 */
}
/* アクセント：英語コピーの左側に小さなラインを追加 */
.mainvisual__copy-en::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 1px;
    background: #AFE7F6;
    vertical-align: middle;
    margin-right: 0;
    transition: all 1s ease 1.2s;
}

/* 画面表示後にラインを伸ばす演出 */
.mainvisual__copy-en {
    display: flex;
    align-items: center;
}

/* 英語コピー：ぼかしから鮮明に、かつ広がる */
@keyframes modernFadeIn {
    0% {
        opacity: 0;
        filter: blur(10px);
        letter-spacing: -0.5em;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        letter-spacing: 0.05em;
        transform: translateX(0);
    }
}

@media screen and (max-width:1039px){
.mainvisual {
	height:100vh;
	height:100svh;
}
.mainvisual__bg {
	height:100vh;
	height:100svh;
}
.mainvisual__content {
	height:100vh;
	height:100svh;
}
.mainvisual__copy {
    bottom: 110px;
    font-size: 48px;
}
.mainvisual__copy-en {
    bottom: 60px;
    font-size: 20px;
}
}

@media screen and (max-width:767px){
.mainvisual {
	height:100vh;
	height:100svh;
}
.mainvisual__copy {
    bottom: 60px;
    font-size: 24px;
}
.mainvisual__copy-en {
    bottom: 26px;
    font-size: 14px;
}
}

@media screen and (max-width:360px){
.mainvisual__copy {
    font-size: 22px;
}
}

@media screen and (max-width:359px){
.mainvisual__copy {
    bottom: 50px;
    font-size: 20px;
}
.mainvisual__copy-en {
    bottom: 20px;
    font-size: 13px;
}
}

/* !私たちについて
---------------------------------------------------------- */
.about {
	width:100%;
	padding:120px 50px 100px 50px;
	position: relative;
	overflow: hidden;
}

.about__triangle {
	position: absolute;
	width: 0;
	height: 0;
	border-top: 400px solid var(--second-color);   /* 高さ */
	border-left: 240px solid transparent; /* 幅（左側を透明に） */
	top:0;
	right: 0;
	z-index: 0;
}

.about__inner {
	display: flex;
	justify-content: space-between;
}

.about__left {
	width:calc(100% - 580px);
}

.about__title {
	margin-bottom: 50px;
}

.about__right {
	width:500px;
	position: relative;
}

.about__img01 {
	position: absolute;
	display: block;
	width:246px;
	top:0;
	left:0;
}

.about__img02 {
	position: absolute;
	display: block;
	width:202px;
	top:110px;
	right:30px;
}
.about__img03 {
	position: absolute;
	display: block;
	width:180px;
	top:270px;
	left:100px;
}

@media screen and (max-width:1039px) {
.about {
	padding:100px 30px 80px 30px;
}

.about__triangle {
	border-top: 300px solid var(--second-color);   /* 高さ */
	border-left: 180px solid transparent; /* 幅（左側を透明に） */
}

.about__left {
	width:calc(100% - 400px);
}

.about__title {
	margin-bottom: 40px;
}

.about__right {
	width:360px;
}

.about__img01 {
	width:180px;
}

.about__img02 {
	width:150px;
	top:70px;
	right:30px;
}
.about__img03 {
	width:140px;
	top:220px;
	left:50px;
}
}

@media screen and (max-width:767px){
.about {
	padding:70px 25px 40px 25px;
}

.about__triangle {
	border-top: 200px solid var(--second-color);   /* 高さ */
	border-left: 120px solid transparent; /* 幅（左側を透明に） */
}

.about__inner {
	flex-wrap: wrap;
}

.about__left {
	width:100%;
	margin-bottom: 30px;
}

.about__title {
	margin-bottom: 30px;
}

.about__right {
	max-width:320px;
	height: 276px;
	margin: 0 auto;
}

.about__img01 {
	width:150px;
	top:0;
	left:0;
}

.about__img02 {
	width:130px;
	top:60px;
	right:0px;
}
.about__img03 {
	width:110px;
	top:auto;
	left:70px;
	bottom:0;
}
}

@media screen and (max-width:359px){
.about__right {
	height: 260px;
}

.about__img01 {
	width:130px;
}

.about__img02 {
	width:120px;
	top:60px;
	right:0px;
}
.about__img03 {
	width:100px;
	top:auto;
	left:50px;
	bottom:0;
}
}

/* !事業内容
---------------------------------------------------------- */
.service-top-bg {
	width:100%;
	height: auto;
}
	.service-top-bg svg {
		display: block;
		position: relative;
		bottom:-1px;
	}

.service {
	width:100%;
	background: #F4FDFF;
	padding:0 50px 100px 50px;
	position: relative;
	overflow: hidden;
}

.service__title {
	margin-bottom: 60px;
}

.service__menu {
	width:100%;
	display: flex;
	justify-content: space-between;
}

.service__item {
	width:32.4%;
}

.service__item-link {
	position:relative;
	overflow: hidden;
	display:block;
	width:100%;
	height:300px;
	border-radius: 4px;
}

.service__item-bg {
	position:absolute;
	width:100%;
	height:100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	top:0;
	left:0;
	transition: .5s;
	z-index:1;
}

a:hover .service__item-bg {
	transform: scale(1.1);
}

.service__item-link--01 {
	background-image:url(../img/service01_img.jpg);
}

.service__item-link--02 {
	background-image:url(../img/service02_img.jpg);
}

.service__item-link--03 {
	background-image:url(../img/service03_img.jpg);
}

.service__item-mask {
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(34, 50, 50, .5);
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: top right;
	transform-origin: top right;
	background: linear-gradient(to bottom,  rgba(34,50,50,0) 0%,rgba(34,50,50,1) 100%);
	transition: .5s;
	z-index:2;
}

.service__item-title {
	position: relative;
	font-size:18px;
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
	color: #FFF;
	text-align: center;
	top:190px;
	z-index: 3;
}

.service__arrow {
	position: absolute;
	width:30px;
	height: 30px;
	background: #FFF;
	border:1px solid #FFF;
	border-radius: 50%;
	right:15px;
	bottom:15px;
	transform: scale(.3);
	transition: .3s;
	overflow: hidden;
	z-index: 4;
}
	a:hover .service__arrow {
		border:1px solid #FFF;
		background: none;
		transform: scale(1);
	}
	.service__arrow span {
		position: absolute;
		display: block; 
		width: 13px;
		height: 6px;
		background-color: #FFF;
		-webkit-mask-image: url("../img/icon_arrow.svg");
		mask-image: url("../img/icon_arrow.svg");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

@media screen and (max-width:1139px) {
.service__item-title {
	font-size:16px;
	top:196px;
}
}

@media screen and (max-width:1039px) {
.service {
	padding:0 30px 70px 30px;
}

.service__title {
	margin-bottom: 50px;
}

.service__item {
	width:32%;
}

.service__item-link {
	height:220px;
}

a:hover .service__item-bg {
	transform: none;
}

.service__item-title {
	font-size:15px;
	top:116px;
}

.service__arrow {
	background: none;
	transform: scale(1);
}
	a:hover .service__arrow {
		transform: none;
	}
}

@media screen and (max-width:899px){
.service__item-title {
	font-size:12px;
	top:124px;
}
}

@media screen and (max-width:767px){
.service {
	padding:20px 25px 50px 25px;
}

.service__title {
	margin-bottom: 40px;
}

.service__menu {
	max-width:320px;
	flex-wrap: wrap;
	margin:0 auto;
	
}

.service__item {
	width:100%;
	margin-bottom: 10px;
}
.service__item:last-child {
	margin-bottom: 0;
}

.service__item-title {
	font-size:15px;
	top:116px;
}
}

/* !部門紹介
---------------------------------------------------------- */
.department {
	width:100%;
	position: relative;
	overflow: hidden;
}

.department__bg {
	width:100%;
	height: auto;
}
	.department__bg svg {
		display: block;
		position: relative;
		min-height: 210px;
		top:-1px;
	}

.department__triangle {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 500px solid var(--main-color);
  	border-bottom: 180px solid transparent;
	top:0;
	left: 0;
	z-index: -1;
}

.department__container {
	width:100%;
	padding:0px 50px 100px 50px;
}

.department__title {
	margin-bottom: 60px;
}

.department__menu {
	width:100%;
	display: flex;
}

.department__item {
	width:33.33%;
	padding:10px 35px;
	border-right:1px solid #ddd;
}
.department__item:first-child {
	border-left:1px solid #ddd;
}

.department__icon {
	display: block;
	width:130px;
	margin: 0 auto 20px auto;
}

.department__item-title {
	font-size:20px;
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
	text-align: center;
	margin-bottom: 20px;
}

.department__item-txt {
	line-height: 1.8;
}

@media screen and (max-width:1039px) {
	.department__bg svg {
		min-height: 180px;
	}

.department__triangle {
	border-left: 400px solid var(--main-color);
  	border-bottom: 144px solid transparent;
}

.department__container {
	padding:0px 30px 80px 30px;
}

.department__title {
	margin-bottom: 50px;
}

.department__item {
	padding:10px 30px;
}

.department__icon {
	width:120px;
	margin: 0 auto 15px auto;
}

.department__item-title {
	font-size:18px;
}
}

@media screen and (max-width:899px) {
.department__item {
	padding:10px 18px;
}

.department__item-title {
	font-size:16px;
}
}

@media screen and (max-width:767px){
	.department__bg svg {
		min-height: 120px;
	}

.department__triangle {
	border-left: 250px solid var(--main-color);
  	border-bottom: 90px solid transparent;
}

.department__container {
	padding:0px 25px 70px 25px;
}

.department__title {
	margin-bottom: 10px;
}

.department__menu {
	max-width:320px;
	flex-wrap: wrap;
	margin: 0 auto;
}

.department__item {
	width:100%;
	padding:30px 0;
	border-bottom:1px solid #ddd;
	border-right:none;
}
.department__item:first-child {
	border-left:none;
}

.department__icon {
	width:110px;
}

.department__item-title {
	font-size:16px;
}
}

/* !お知らせ
---------------------------------------------------------- */
.news {
	width:100%;
	padding:110px 50px 50px 50px;
	position: relative;
	overflow: hidden;
}

.news__triangle {
	position: absolute;
	width: 0;
	height: 0;
	border-top: 120px solid var(--second-color);   /* 高さ */
	border-left: 420px solid transparent; /* 幅（左側を透明に） */
	top:0;
	right: 0;
	z-index: 0;
}

.news__inner {
	display: flex;
	justify-content: space-between;
}

.news__left {
	width:25%;
}

.news__title-en {
	margin-top: 20px;
}

.news__right {
	width:70%;
}

.news__list {
	width: 100%;
}

.news__link {
	display: block;
}

.news__item {
	width:100%;
	display: flex;
	justify-content: space-between;
	padding:1.4em 0;
	border-bottom: 1px solid #ddd;
	position: relative;
}

.news__date {
	width:150px;
	opacity: .7;
}

.news__txt {
	width:calc(100% - 150px);
	transition: color .6s;
	padding-right:60px;
}
	a:hover .news__txt {
		color: var(--second-color);
	}

.news__arrow {
	position: absolute;
	width:30px;
	height: 30px;
	background: var(--accent-color);
	border:1px solid var(--accent-color);
	border-radius: 50%;
	right:10px;
	top:50%;
	margin-top: -15px;
	transform: scale(.3);
	transition: .3s;
	overflow: hidden;
	z-index: 4;
}
	a:hover .news__arrow {
		border:1px solid var(--accent-color);
		background: none;
		transform: scale(1);
	}
	.news__arrow span {
		position: absolute;
		display: block; 
		width: 13px;
		height: 6px;
		background-color: var(--accent-color);
		-webkit-mask-image: url("../img/icon_arrow.svg");
		mask-image: url("../img/icon_arrow.svg");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

@media screen and (max-width:1039px) {
.news {
	padding:100px 30px 40px 30px;
}

.news__triangle {
	border-top: 100px solid var(--second-color);   /* 高さ */
	border-left: 350px solid transparent; /* 幅（左側を透明に） */
}

.news__date {
	width:120px;
}

.news__txt {
	width:calc(100% - 120px);
}
	a:hover .news__txt {
		color: var(--base-font-color);
	}

.news__arrow {
	background: none;
	transform: scale(1);
}
	a:hover .news__arrow {
		transform: none;
	}
}

@media screen and (max-width:767px){
.news {
	padding:70px 25px 20px 25px;
}

.news__triangle {
	border-top: 60px solid var(--second-color);   /* 高さ */
	border-left: 210px solid transparent; /* 幅（左側を透明に） */
}

.news__inner {
	flex-wrap: wrap;
}

.news__left {
	width:100%;
	margin-bottom: 30px;
}

.news__title-en {
	margin-top: 0;
}

.news__right {
	width:100%;
}

.news__list {
	width: 100%;
}

.news__item {
	width:100%;
	flex-wrap: wrap;
	padding:1.2em 0;
}

.news__date {
	width:100%;
}

.news__txt {
	width:100%;
}
	a:hover .news__txt {
		color: var(--base-font-color);
	}
}