@charset "UTF-8";
/* CSS Document */

.ctsArea{
	padding-bottom: 160px;
}

/*
	KV
-----------------------------------------------------------------------------------------------*/
:root{
	--anmTimingCmn: 1.8s;
}
#kvArea{
	height: 100svh;
	margin-bottom: 120px;
	position: relative;
	overflow: hidden;
}
#companyName{
	opacity: 0;
	animation: kvFadeInLtoR 0.8s ease var(--anmTimingCmn) 1 normal forwards;
}
#catch,#gNav{
	opacity: 0;
	animation: kvFadeInTtoB 0.8s ease var(--anmTimingCmn)  1 normal forwards;
}
#catch{
	padding:22px 0 0 25px;
	font-size: 2.1rem;
	font-weight: 900;
	line-height: 145%;
	font-feature-settings: 'pkna';
	letter-spacing: 0.1em;
}
#catch .shoulder{
	display: block;
	padding-bottom: 7px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 145%;
}
#catch img{
	width: 262px;
}

#scroll{
	height: 100px;
	padding:0 0 0 5px;
	font-size: 1.0rem;
	writing-mode: vertical-rl;
	text-align: left;
	line-height: 100%;
	letter-spacing: 0.2em;
	position: absolute;
	bottom: 0;
	left: 50%;
	opacity: 0;
	animation: kvFadeInBtoT 0.8s ease var(--anmTimingCmn) 1 normal forwards;
}
#scroll::before{
	content: ' ';
	display: block;
	width: 1px;
	height: 0%;
	background-color: #000000;
	position: absolute;
	top: 0;
	left: 0;
	animation: scrollLine 1.8s cubic-bezier(0.39, 0.58, 0.57, 1) 3.2s infinite normal forwards;
}

#kvLogo{
	width: 700px;
	height: 167px;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(calc(-50%), calc(-50% - 50px));
}
#kvLogo::before{
	content: ' ';
	display: block;
	width: 740px;
	height: 207px;
	position:absolute;
	top: -20px;
	left: -20px;
	background: url(../images/logo_light.png) left top no-repeat;
	opacity: 0;
	animation:kvLogo2nd 1.2s ease-in-out 1.7s 1 normal forwards;
}
#kvLogo > div{
	width:700px;
	height: 167px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	position:absolute;
	top:0;
	left:0;
}
#kvLogo > div::before{
	content:' ';
	display: block;
	width: 100%;
	height: 100%;
	mask-repeat: no-repeat;
	position: absolute;
	top: 0;
	transform: translateX(-100%);
}
/* STUDIO */
#logoStudio{
	-webkit-mask-image: url(../images/logo_studio.svg);
	mask-image: url(../images/logo_studio.svg);
}
#logoStudio::before{
	left: 0;
	background-color: #009FFF;
	animation:kvLogo1st 0.5s ease-in-out 0.5s 1 normal forwards;
}
/* A */
#logoA01{
	-webkit-mask-image: url(../images/logo_a01.svg);
	mask-image: url(../images/logo_a01.svg);
}
#logoA01::before{
	left: 227px;
	background-color: #FF0012;
	animation:kvLogo1st 0.8s ease-in-out 1s 1 normal forwards;
}
/* L */
#logoL{
	-webkit-mask-image: url(../images/logo_l.svg);
	mask-image: url(../images/logo_l.svg);
}
#logoL::before{
	left: 396px;
	background-color: #FFFF00;
	animation:kvLogo1st 0.8s ease-in-out 1s 1 normal forwards;
}
/* T */
#logoT{
	-webkit-mask-image: url(../images/logo_t.svg);
	mask-image: url(../images/logo_t.svg);
}
#logoT::before{
	left: 432px;
	background-color: #AA00BE;
	animation:kvLogo1st 0.8s ease-in-out 1s 1 normal forwards;
}
/* A */
#logoA02{
	-webkit-mask-image: url(../images/logo_a02.svg);
	mask-image: url(../images/logo_a02.svg);
}
#logoA02::before{
	left: 531px;
	background-color: #00DC44;
	animation:kvLogo1st 0.8s ease-in-out 1s 1 normal forwards;
}

/* 広告エージェンシー */
#logoShoulder{
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.2em;;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 55px);
	opacity: 0;
	animation:fadeIn 1s ease var(--anmTimingCmn) 1 normal forwards;
}

/*
	KV_animation
-----------------------------------------------------------------------------------------------*/
@keyframes kvFadeInTtoB{
	0%{
		opacity: 0;
		transform: translateY(-100%);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes kvFadeInBtoT{
	0%{
		opacity: 0;
		transform: translateY(100%);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes kvFadeInLtoR{
	0%{
		opacity: 0;
		transform: translate(-100%, calc(-50% - 20px));
	}
	100%{
		opacity: 1;
		transform: translate(0, calc(-50% - 20px));
	}
}
@keyframes kvLogo1st{
	0%{
		transform: translateX(-100%);
	}
	100%{
		transform: translateX(0);
	}
}
@keyframes kvLogo2nd{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes kvBtoT{
	0%{
		transform: translateX(-100%);
	}
	40%, 60% {
		transform: translateX(0);
	}
	100%{
		transform: translateX(100%);
	}
}

@keyframes scrollLine{
	0% {
		height: 0;
	}
	50% {
		height:100%;
		top: 0;
	}
	100% {
		top: 100%;
	}
}

/*
	募金バナー（※一時的）
-----------------------------------------------------------------------------------------------*/

/*
.topBnrDonation{
	padding-bottom: 100px;
	margin-top: -50px;
}
.topBnrDonation a{
	display: block;
}
.topBnrDonation img{
	transition: opacity 0.25s;
}
.topBnrDonation a:hover img{
	opacity: 0.7;
}
*/


/*
	健康優良バナー（※年一更新？）
-----------------------------------------------------------------------------------------------*/
.topBnrKenkou{
	width:100%;
	padding:20px;
	border:1px solid #E6E6E9;
	display:flex;
	justify-content:center;
	gap:0 50px;
	margin-top:30px;
}
.topBnrKenkou p{
	font-size:1.2rem;
	line-height:160%;
}


/*
	事業紹介
-----------------------------------------------------------------------------------------------*/
#topBusinessArea{
	position: relative;
}
#topBusinessArea::before{
	content: ' ';
	display: block;
	width: calc(50% + 70px);
	height: 1px;
	background: linear-gradient(to left, var(--mainBlue) 640px, #000000 640px);
	position: absolute;
	top: 190px;
	left: 0;
}

/* タイトル
--------------------------------------*/
#topBusinessArea .ctsArea{
	position: relative;
}
#topBusinessArea .topTitBox{
	position: absolute;
	top: 0;
	left: 30px;
	letter-spacing: 0.1em;
}
.topTitBox .tit{
	margin-bottom: 20px;
	font-size: 4.8rem;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.2em;
}
.topTitBox .tit .ffEn{
	display: block;
	margin-top: 15px;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 100%;
	letter-spacing: 0.4em;
	color: var(--mainBlue);
}
.topTitBox .txt{
	font-weight: 900;
}


/* listTopBusiness
--------------------------------------*/
#listTopBusiness{
	display: flex;
	flex-wrap: wrap;
	gap: 0 60px;
}
#listTopBusiness li{
	flex: 0 0 240px;
}
#listTopBusiness li:first-of-type{
	margin-left: 600px;
}
#listTopBusiness li a{
	display: flex;
	flex-direction: column;
	position: relative;
	pointer-events: none;
	transition: color 0.25s;
}
#listTopBusiness li a *{
	pointer-events: all;
}
@media screen and (min-width:813px){
	#listTopBusiness li a:hover{
		color: var(--mainBlue);
	}
	#listTopBusiness li:nth-of-type(4n-1){
		/* 3,7,11 */
		margin-top: -78px;
	}
	#listTopBusiness li:nth-of-type(4n){
		/* 4,8,12 */
		margin-top: 0;
	}
	#listTopBusiness li:nth-of-type(4n+1){
		/* 1,5,9,13 */
		margin-top: calc(78px * 1);
	}
	#listTopBusiness li:nth-of-type(4n+2){
		/* 2,6,10,14 */
		margin-top: calc(78px * 2);
	}
}

/* num */
#listTopBusiness li a .num{
	font-family: var(--ffEn);
	font-size: 5.0rem;
	font-weight: 600;
	line-height: 100%;
	letter-spacing: 0;
	position: absolute;
	top: -20px;
	left: 0;
	z-index: 1;
}

/* tit */
#listTopBusiness li a .tit{
	width: fit-content;
	padding-top: 30px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 145%;
}

/* ph */
#listTopBusiness li a .ph{
	order: -1;
	margin: 0 auto;
	box-shadow: 10px 18px 22px -22px rgb(0 0 0 / .5);
	overflow: hidden;
}
@media screen and (min-width:813px){
	#listTopBusiness li a .ph img{
		transition: transform 0.5s;
		transform-origin: left center;
	}
	#listTopBusiness li a:hover .ph img{
		transform: translate(4px,0);
	}
}

/* linkViewMore */
#listTopBusiness li a .linkViewMore{
	top: 217px;
	right: 0;
}
@media screen and (min-width:813px){
	#listTopBusiness li a:hover .linkViewMore{
		right: -5px;
	}
}


/*
	実績紹介
-----------------------------------------------------------------------------------------------*/
#topCaseArea{
	padding-bottom: 120px;
	position: relative;
}
#topCaseArea::before{
	content: ' ';
	display: block;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, #000000 calc(50% - 570px), var(--mainRed) calc(50% - 570px), var(--mainRed) calc(50% + 570px), #000000 calc(50% - 570px));
	position: absolute;
	top: 290px;
	left: 0;
}
#topCaseArea .ctsArea{
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0 120px;
	padding-bottom: 50px;
}
#topCaseArea .topTitBox{
	flex: 0 0 auto;
}
#topCaseArea .topTitBox .tit .ffEn{
	color: var(--mainRed);
}


/* swiper
--------------------------------------*/
.topCaseSwiperOut{
	overflow: hidden; /* 2.代わりに親要素で hidden にする */
}
.topCaseSwiper{
	overflow: visible; /* 1.はみ出させるように visible で上書き */
}
.topCaseSwiper .swiper-slide,.topCaseSwiper .swiper-slide a .tit,.topCaseSwiper .swiper-slide a .tag{
	width: fit-content;
}

.topCaseSwiper .swiper-slide a{
	display: flex;
	flex-direction: column-reverse;
	max-width: 600px;
}

/* 画像_out */
.topCaseSwiper .swiper-slide a .phOut{
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: 400px;
	margin: 0 auto;
	position: relative;
}

/* VIEW MORE */
.topCaseSwiper .swiper-slide a .linkViewMore{
	bottom: 35px;
	right: -30px;
}

/* 画像_影 */
.topCaseSwiper .swiper-slide a .ph{
	box-shadow: 10px 18px 22px -22px rgb(0 0 0 / .5);
	backface-visibility: hidden;
	overflow: hidden;
}
/* 画像_サイズ */
.topCaseSwiper .swiper-slide a .ph img{
	max-width: 600px;
	max-height: 400px;
	object-fit: contain;
	transition: transform 0.5s;
}
/* タグ */
.topCaseSwiper .swiper-slide a .tag{
	padding: 22px 0 2px 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--tagGray);
}
/* タイトル */
.topCaseSwiper .swiper-slide a .tit{
	font-size: 2.4rem;
	font-weight: 700;
	transition: color 0.25s;
}

/* swiper_pagenation */
#topCaseArea .swiper-pagination{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}
#topCaseArea .swiper-pagination li{
	flex: 0 0 calc((100% - 40px)/3);
	font-size: 1.1rem;
	line-height: 125%;
	color: #CCCCCC;
	transition: color 0.4s;
}
#topCaseArea .swiper-pagination li:hover{
	color: #000000;
	cursor: pointer;
}
#topCaseArea .swiper-pagination li.swiper-pagination-bullet-active{
	color: var(--mainRed);
}
#topCaseArea .swiper-pagination li.swiper-pagination-bullet-active::before{
	content: '- ';

}

@media screen and (min-width:813px){
	.topCaseSwiper .swiper-slide a:hover .linkViewMore{
		right: -35px;
	}
	.topCaseSwiper .swiper-slide a:hover .ph img{
		transform: translate(6px,0);
	}
	.topCaseSwiper .swiper-slide a:hover .tit{
		color: var(--mainRed);
	}
}


/*
	企業情報 / お知らせ
-----------------------------------------------------------------------------------------------*/
#topAboutUsNewsArea{
	padding-top: 80px;
	background:
		linear-gradient(to right, #000000 calc(50% - 570px), var(--mainPurple) calc(50% - 570px), var(--mainPurple) 50%,
		var(--mainGreen) 50%, var(--mainGreen) calc(50% + 570px), #000000 calc(50% - 570px)) left top / 100% 1px no-repeat;
}
#topAboutUsNewsArea .ctsArea{
	display: flex;
	justify-content: space-between;
	gap: 0 90px;
}
#topAboutUsNewsArea .ctsArea > div{
	width: 525px;
}
#topAboutUsNewsArea .topTitBox .tit{
	font-size: 3.8rem;
	margin-bottom: 30px;
}
#topAboutUsNewsArea .topTitBox .tit .ffEn{
	font-size: 1.3rem;
}

/* 企業情報
--------------------------------------*/
.topAboutUsArea .topTitBox .tit .ffEn{
	color: var(--mainPurple);
}
.listTopAboutUs{
	display: flex;
	flex-wrap: wrap;
	gap: 19px;
}
.listTopAboutUs li{
	width: 253px;
}
.listTopAboutUs li a.btnBasic{
	padding: 20px 30px 20px 15px;
	text-align: left;
	width:254px;
}


/* お知らせ
--------------------------------------*/
.topNewsArea .topTitBox .tit .ffEn{
	color: var(--mainGreen);
}
.dlistNews{
	margin-top: -5px;
}
.dlistNews dd:nth-last-of-type(n+2){
	margin-bottom: 30px;
}
.dlistNews dd a{
	color: #888888;
}
.topNewsArea .linkViewMore{
	margin-top: 30px;
	position: relative;
}


/*
	バナー
-----------------------------------------------------------------------------------------------*/
.topBnrArea{
	padding:40px 30px;
	background-color: var(--bgGray);
}
.topBnrArea a.bnrFH{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px 0;
	width: 900px;
	height: 140px;
	margin: 0 auto;
	text-align: center;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E9;
	transition: background-color 0.25s, border-color 0.25s;
}
.topBnrArea a.bnrFH img{
	width: 328px;
}
.topBnrArea a.bnrFH .txt{
	font-size: 1.2rem;
	color: va(--linkGray);
	line-height: 125%;
	background: linear-gradient(to top, var(--bgSubGray) 3px, transparent  3px);
}
@media screen and (min-width:813px){
	.topBnrArea a.bnrFH:hover{
		background-color: rgb(255 255 255 / .7);
		border-color: var(--a30Black);
	}
}

@media screen and (max-width:812px){
	.ctsArea{
		padding-bottom: 100px;
	}

	/*
		KV
	-----------------------------------------------------------------------------------------------*/
	#catch{
		padding:12px 0 0 15px;
		font-size: 1.8rem;
		line-height: 145%;
	}
	#catch .shoulder{
		padding-bottom: 5px;
	}
	#catch img{
		width: 190px;
	}

	#companyName{
		display: block;
		padding:0 0 0 15px;
	}
	#gNav{
		opacity: 1;
		animation: none;
	}
	#gNav a[class^="btn"],#btnHmbg{
		opacity: 0;
		animation: fadeInTtoB 0.8s ease var(--anmTimingCmn)  1 normal forwards
	}
	#scroll{
		height: 80px;
	}
	#kvLogo{
		width: 290px;
		height: 69px;
	}
	#kvLogo::before{
		width: 306px;
		height: 85px;
		background-size: contain;
		top: -8px;
		left: -7px;
	}
	#kvLogo{
		transform: translate(calc(-50% + 10px), calc(-50% - 50px))
	}
	#kvLogo > div{
		width:290px;
		height: 69px;
	}
	#kvLogo > div::before{
		width:290px;
		height: 69px;
	}

	/* STUDIO */

	/* A */
	#logoA01::before{
		left: 95px;
	}

	/* L */
	#logoL::before{
		left: 166px;
	}
	/* T */
	#logoT::before{
		left: 180px;
	}
	/* A */
	#logoA02::before{
		left: 221px;
	}

	/* 広告エージェンシー */
	#logoShoulder{
		font-size: 1.6rem;
		line-height: 145%;
		white-space: nowrap;
		top: calc(50% - 55px);
		left: calc(50% + 10px);
	}

	/*
		募金バナー（※一時的）
	-----------------------------------------------------------------------------------------------*/

	/*
	.topBnrDonation{
		padding-bottom: 60px;
		margin-top: -60px;
	}
	*/

	/*
		健康優良バナー（※年一更新？）
	-----------------------------------------------------------------------------------------------*/
	.topBnrKenkou{
		flex-flow: column;
		gap:10px 0;
		margin-top:25px;
	}
	.topBnrKenkou p{
		text-align:center;
	}
	.logoKenkouYu{
		width:134px;
		margin:0 auto;
	}

	/*
		事業紹介
	-----------------------------------------------------------------------------------------------*/
	#topBusinessArea::before{
		width: calc(50% + 80px);
		background: linear-gradient(to right, #000000 25px, var(--mainBlue) 25px);
		top: 210px;
	}

	/* タイトル
	--------------------------------------*/
	#topBusinessArea .topTitBox{
		margin-bottom: 30px;
		position: static;
	}
	.topTitBox .tit{
		margin-bottom: 15px;
		font-size: 2.8rem;
	}
	.topTitBox .tit .ffEn{
		margin-top: 10px;
		font-size: 1rem;
	}
	.topTitBox .txt{
		font-size: 1.2rem;
	}


	/* listTopBusiness
	--------------------------------------*/
	#listTopBusiness{
		display: flex;
		flex-wrap: wrap;
		gap: 20px 20px;
	}
	#listTopBusiness li{
		flex: 0 0 calc(50% - 10px);
	}
	#listTopBusiness li:first-of-type{
		margin-left: 0;
	}
	#listTopBusiness li:nth-of-type(2n){
		margin-top: 40px;
	}
	#listTopBusiness li a{
		display: flex;
		flex-direction: column;
		position: relative;
		pointer-events: none;
		transition: color 0.25s;
	}
	#listTopBusiness li a *{
		pointer-events: all;
	}

	/* num */
	#listTopBusiness li a .num{
		font-size: 2.7rem;
		top: -13px;
	}

	/* tit */
	#listTopBusiness li a .tit{
		padding-top: 15px;
		font-size: 1.5rem;
	}

	/* ph */
	#listTopBusiness li a .ph{
		width: 130px;
	}

	/* linkViewMore */
	#listTopBusiness li a .linkViewMore{
		top: 159px;
	}


	/*
		実績紹介
	-----------------------------------------------------------------------------------------------*/
	#topCaseArea{
		padding-bottom: 80px;
	}
	#topCaseArea::before{
		display: none;
	}
	#topCaseArea .ctsArea{
		flex-direction: column;
		align-items: flex-start;
		gap: 20px 0;
		padding-bottom: 20px;
		position: relative;
	}
	#topCaseArea .ctsArea::before{
		content: ' ';
		display: block;
		width: 100%;
		height: 1px;
		background: linear-gradient(to right, #000000 25px, var(--mainRed) 25px, var(--mainRed) calc(100% - 25px), #000000 calc(100% - 25px));
		position: absolute;
		bottom: -40px;
		left: 0;
	}


	/* swiper
	--------------------------------------*/
	.topCaseSwiper .swiper-slide a{
		max-width: 300px;
	}

	/* 画像_out */
	.topCaseSwiper .swiper-slide a .phOut{
		height: 200px;
	}

	/* VIEW MORE */
	.topCaseSwiper .swiper-slide a .linkViewMore{
		bottom: 20px;
		right: -15px;
	}

	/* 画像_影 */
	.topCaseSwiper .swiper-slide a .ph{
		width: fit-content;
		box-shadow: 10px 18px 22px -22px rgb(0 0 0 / .5);
	}

	/* 画像_サイズ */
	.topCaseSwiper .swiper-slide a .ph img{
		width: auto;
		max-width: 300px;
		max-height: 200px;
	}
	/* タグ */
	.topCaseSwiper .swiper-slide a .tag{
		padding: 16px 0 2px 0;
		font-size: 1rem;
	}
	/* タイトル */
	.topCaseSwiper .swiper-slide a .tit{
		font-size: 1.6rem;
	}


	/* swiper_pagenation */
	#topCaseArea .swiper-pagination{
		gap: 5px 20px;
	}
	#topCaseArea .swiper-pagination li{
		flex: 0 0 calc((100% - 20px)/2);
		font-size: 1.1rem;
		line-height: 125%;
		color: #CCCCCC;
		transition: color 0.4s;
	}


	/*
		企業情報 / お知らせ
	-----------------------------------------------------------------------------------------------*/
	#topAboutUsNewsArea{
		padding-top: 0;
		background: none;
	}
	#topAboutUsNewsArea .ctsArea{
		flex-direction: column;
		justify-content: space-between;
		gap: 80px 0;
	}
	#topAboutUsNewsArea .ctsArea > div{
		width: 100%;
	}
	#topAboutUsNewsArea .topTitBox{
		padding-bottom: 20px;
		margin-bottom: 25px;
		position: relative;
	}
	#topAboutUsNewsArea .topTitBox::before{
		content: ' ';
		display: block;
		width: calc(100% + 50px);
		height: 1px;
		background: linear-gradient(to right, #000000 15px, var(--mainPurple) 15px, var(--mainPurple) calc(100% - 15px), #000000 calc(100% - 15px));
		position: absolute;
		bottom: 0;
		left: -25px;
	}
		#topAboutUsNewsArea .topTitBox .tit{
		font-size: 2.8rem;
		margin-bottom: 0;
	}
	#topAboutUsNewsArea .topTitBox .tit .ffEn{
		font-size: 1rem;
	}



	/* 企業情報
	--------------------------------------*/
	.listTopAboutUs{
		display: flex;
		flex-wrap: wrap;
		gap: 10px 0;
	}
	.listTopAboutUs li{
		width: 100%;
	}
	.listTopAboutUs li a.btnBasic{
		width: 100%;
		padding: 15px;
	}


	/* お知らせ
	--------------------------------------*/
	#topAboutUsNewsArea .topNewsArea .topTitBox::before{
		background: linear-gradient(to right, #000000 15px, var(--mainGreen) 15px, var(--mainGreen) calc(100% - 15px), #000000 calc(100% - 15px));
	}
	.dlistNews dd:nth-last-of-type(n+2){
		margin-bottom: 25px;
	}

	/*
		バナー
	-----------------------------------------------------------------------------------------------*/
	.topBnrArea{
		padding: 30px 25px;
	}
	.topBnrArea a.bnrFH{
		gap: 10px 0;
		width: 100%;
		height: 100px;
	}
	.topBnrArea a.bnrFH img{
		width: 220px;
	}
	.topBnrArea a.bnrFH .txt{
		font-size: 1rem;
	}
}