.main_visual_circle01,
.main_visual_circle02,
.main_visual_circle03{
	position:absolute;
	border-radius:50%;
	z-index:0;

	opacity:0;
	transform:scale(1);
	
	
	transition:opacity 2s ease;
}

/* circle01 */
.main_visual_circle01{
	width:420px;
	height:420px;

	top:-250px;
	left:50%;
	margin-left:-765px;
	background:rgba(232,201,46,0.4);
	animation:floatCircle01 12s ease-in-out infinite;
}

/* circle02 */
.main_visual_circle02{
	width:160px;
	height:160px;

	bottom:25px;
	left:50%;
	margin-left:-350px;

	animation-duration:15s;
	animation-delay:2s;
	background:rgba(232,201,46,0.3);
	animation:floatCircle02 12s ease-in-out infinite;
}

/* circle03 */
.main_visual_circle03{
	width:90px;
	height:90px;

	top:40px;
	left:50%;
	margin-left:105px;

	animation-duration:10s;
	animation-delay:1s;
	background:rgba(232,201,46,0.2);
	animation:floatCircle03 12s ease-in-out infinite;
}


.main_visual_circle01.active,
.main_visual_circle02.active,
.main_visual_circle03.active{
	opacity:1;
}

/* ゆらゆら */
@keyframes floatCircle01{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(-20px,20px);
	}
	50%{
		transform:translate(0,20px);
	}
	75%{
		transform:translate(20px,20px);
	}
	100%{
		transform:translate(0,0);
	}
}
@keyframes floatCircle02{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(10px,-20px);
	}
	50%{
		transform:translate(0,-20px);
	}
	75%{
		transform:translate(-20px,-10px);
	}
	100%{
		transform:translate(0,0);
	}
}
@keyframes floatCircle03{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(20px,10px);
	}
	50%{
		transform:translate(10,20px);
	}
	75%{
		transform:translate(-10px,20px);
	}
	100%{
		transform:translate(0,0);
	}
}



/* メインビジュアル */
.top_main_visual{
	position:relative;
	width:100%;
	height:610px;
	background-color:#007f41;
	overflow:hidden;
}

.top_main_visual::before{
	content:"";

	position:absolute;
	inset:0;

	background-image:url("../images/top/main_pc.jpg");
	background-position:center center;
	background-size:cover;

	opacity:0;
	transform:scale(1.1);

	transition:
		opacity 2s ease,
		transform 40s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 背景表示 */

.top_main_visual.active::before{
	opacity:1;
	transform:scale(1);
}



.top_main_visual_title_set{
	position:absolute;
	top:197px;
	left:50%;
	margin-left:-500px;
}

.top_main_visual_title{
	position:absolute;
	top:-18px;
	
	width:497px;
	height:auto;
	display:block;

	opacity:0;
	transform:translateX(-20px);

	transition:
		opacity 0.6s ease,
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.top_main_visual_read_set{
	position:absolute;
	top:116px;
	display:block;
}

.top_main_visual_read01{
	position:relative;
	display:block;

	opacity:0;
	transform:translateX(-20px);

	transition:
		opacity 0.6s ease,
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.top_main_visual_read02{
	position:relative;
	margin-top:15px;
	display:block;

	opacity:0;
	transform:translateX(-20px);

	transition:
		opacity 0.6s ease,
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}



/* =========================
	表示
========================= */

.top_main_visual_title.active,
.top_main_visual_read01.active,
.top_main_visual_read02.active{
	opacity:1;
	transform:translateX(0);
}


/* =========================
	位置
========================= */

.top_main_visual_illust01{
	position:absolute;
	top:160px;
	left:50%;
	margin-left:290px;
}

.top_main_visual_illust02{
	position:absolute;
	top:140px;
	left:50%;
	margin-left:290px;
}

.top_main_visual_illust03{
	position:absolute;
	top:-20px;
	left:50%;
	margin-left:250px;
}

.top_main_visual_illust04{
	position:absolute;
	top:-113px;
	left:50%;
	margin-left:260px;
}


.top_main_visual_illust01,
.top_main_visual_illust02,
.top_main_visual_illust03,
.top_main_visual_illust04{
	opacity:0;
	transform-origin:center center;
}


/* =========================
	active
========================= */

.top_main_visual_illust01.active,
.top_main_visual_illust02.active,
.top_main_visual_illust03.active{
	animation:illust_fade 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.top_main_visual_illust04.active{
	animation:illust_fade04 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
	illust_zoom04 36s linear forwards 1.2s;
}



/* =========================
	1〜3共通
========================= */

@keyframes illust_fade{

	0%{
		opacity:0;
		transform:translateX(-50%) scale(0.8);
	}

	50%{
		opacity:1;
		transform:translateX(-50%) scale(0.9);
	}

	100%{
		opacity:0;
		transform:translateX(-50%) scale(1);
	}
}



/* =========================
	4枚目 表示
========================= */

@keyframes illust_fade04{

	0%{
		opacity:0;
		transform:translateX(-50%) scale(0.7);
	}

	60%{
		opacity:1;
		transform:translateX(-50%) scale(0.8);
	}

	100%{
		opacity:1;
		transform:translateX(-50%) scale(0.8);
	}
}



/* =========================
	4枚目 拡大
========================= */

@keyframes illust_zoom04{

	0%{
		transform:translateX(-50%) scale(0.8);
	}

	100%{
		transform:translateX(-50%) scale(1);
	}
}







/* リード */
.top_read_bg{
	position:absolute;
	left:50%;
	margin-left:-740px;
	opacity:0;
}

.top_read_bg.active{
	opacity:1;
	transition:opacity 0.6s ease;
}

.top_read_text{
	position:relative;
	padding-top:100px;
	padding-bottom:100px;
	text-align:center;
	line-height:3.2;
	color:#666666;
	z-index:1;
}



/* DXリンク */
.top_dx_link{
	position:relative;
	width:100%;
	margin-bottom:120px;
}


.top_dx_link_box{
	position:relative;
	width:1000px;
	margin:auto;
	box-shadow: 0 0 8px 0 rgba(64,128,128,0.4);
	box-sizing:border-box;
	padding:60px 0;
	border-radius:16px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:60px;
}

.top_dx_link_img{
	width:168px;
	height:auto;
	display:block;
	flex:none;
}

.top_dx_link_right_set{
	flex:none;
}


.top_dx_link_caption01{
	font-weight:500;
	line-height:1;
	margin-bottom:20px;
}

.top_dx_link_caption02{
	font-weight:500;
	line-height:1;
	margin-bottom:25px;
	text-indent:-0.5em;
}

.top_dx_link_text {
	color:#666666;
	line-height:1;
	margin-bottom:30px;
}


/* ニュース */
.top_news{
	position:relative;
	width:100%;
	background:#fffff2;
	padding-top:120px;
	padding-bottom:120px;
}


.top_news_title{
	position:relative;
	margin:auto;
}

.top_news_list{
	position:relative;
	width:1000px;
	margin:10px auto 50px;
}

.top_news_list li{
	position:relative;
	margin-top:40px;
}

.top_news_list li a{
	display:flex;
	align-items:flex-start;
	gap:50px;
}

.top_news_list time{
	position:relative;
	color:#007f41;
	font-weight:500;
	line-height:2;
}

.top_news_text{
	color:#000000;
	line-height:2;
}


.top_news_more_link{
	position:relative;
	width:1000px;
	text-align:right;
	margin:auto;
}

.top_news_more_link_text{
	color:#000000;
}




/* コンテンツ */
.top_contents{
	position:relative;
	width:100%;
	background:
	linear-gradient(
		135deg,
		rgba(0,127,65,0.4) 0%,
		rgba(9,86,125,0.4) 150%
	),
	#007f41;
	padding-top:120px;
	padding-bottom:120px;
}


/* 共通 */
.top_contents_circle01,
.top_contents_circle02,
.top_contents_circle03{
	position:absolute;
	border-radius:50%;
	z-index:0;

	animation:floatCircle 12s ease-in-out infinite;
}

/* circle01 */
.top_contents_circle01{
	width:420px;
	height:420px;

	top:-80px;
	left:50%;
	margin-left:-800px;
	background:rgba(232,201,46,0.4);
}

/* circle02 */
.top_contents_circle02{
	width:160px;
	height:160px;

	top:290px;
	left:50%;
	margin-left:490px;

	animation-duration:15s;
	animation-delay:2s;
	background:rgba(232,201,46,0.3);
}

/* circle03 */
.top_contents_circle03{
	width:90px;
	height:90px;

	bottom:-60px;
	left:50%;
	margin-left:105px;

	animation-duration:10s;
	animation-delay:1s;
	background:rgba(232,201,46,0.2);
}

/* ゆらゆら */
@keyframes floatCircle{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(-20px,20px);
	}
	50%{
		transform:translate(0,20px);
	}
	75%{
		transform:translate(20px,20px);
	}
	100%{
		transform:translate(0,0);
	}
}


.top_contents_title{
	position:relative;
	z-index:1;
	margin:auto;
}

.top_contents_list{
	position:relative;
	z-index:1;

	width:1000px;
	margin:80px auto 0;

	display:flex;
	flex-wrap:wrap;
	gap:20px;
}


.top_contents_list li{
	opacity:0;
	transform:translateY(20px);
	transition:opacity 0.6s ease, transform 0.6s ease;
}

.top_contents_list li.show{
	opacity:1;
	transform:translateY(0);
}



/* 3列 */
.top_contents_list li{
	width:320px;
	list-style:none;

	display:flex;
}

/* ボックス */
.top_contents_list li a{
	position:relative;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	width:100%;
	height:100%;
	padding:35px 25px;
	border-radius:16px;
	text-decoration:none;
	color:#fff;
	background:rgba(255,255,255,0.15);
	backdrop-filter:blur(1px);
	-webkit-backdrop-filter:blur(1px);
	box-shadow: 0 0 8px 0 rgba(0,104,67,0.4);
	transition:
		transform 0.2s,
		background 0.2s,
		box-shadow 0.2s;
}

/* hover */
.top_contents_list li a:hover{
	transform:translateY(-4px);
	box-shadow: 0 0 16px 0 rgba(0,104,67,0.8);
	background:rgba(255,255,255,0.2);
}

/* アイコン */
.top_contents_icon{
	position:absolute;
	top:13px;
	right:15px;
	height:auto;
	display:block;
}

/* タイトル */
.top_contents_caption{
	position:relative;
	font-weight:500;
	line-height:1;
}

/* テキスト */
.top_contents_text{
	position:relative;
	margin-top:25px;
	line-height:2;
	color:#9be7c9;
}

/* 白丸 */
.top_contents_list li a::after{
	content:"";
	position:absolute;

	right:15px;
	bottom:15px;

	width:20px;
	height:20px;

	border-radius:50%;
	background:#fff;
}

/* 三角 */
.top_contents_list li a::before{
	content:"";
	position:absolute;

	right:22px;
	bottom:21.5px;

	width:0;
	height:0;

	border-top:3.5px solid transparent;
	border-bottom:3.5px solid transparent;
	border-left:6px solid #046f59;

	z-index:1;
	transition:transform 0.2s ease;
}

/* hover */
.top_contents_list li a:hover::before{
	transform:translateX(5%) scale(1.2);
}





/* リクルートリンク */
.top_recruit_link{
	position:relative;
	width:100%;
	margin-top:120px;
}

.top_recruit_link_box{
	position:relative;
	width:1000px;
	margin:auto;
	box-shadow: 0 0 8px 0 rgba(64,128,128,0.4);
	box-sizing:border-box;
	padding:40px 0;
	border-radius:16px;
	display:flex;
	align-items:center;
	gap:60px;
	background:
	url("../images/top/recruit_link_img01.png")
	calc(100% + 20px)
	calc(50% + 50px)
	no-repeat,
	linear-gradient(
		135deg,
		rgba(0,127,65,0.4) 0%,
		rgba(9,86,125,0.6) 100%
	),
	#007f41;
}


.top_recruit_link_img01{
	position:absolute;
	top:0;
	left:50%;
	margin-top:-40px;
	margin-left:-434px;
}


.top_recruit_link_img02{
	position:absolute;
	top:0;
	left:50%;
	margin-top:56px;
	margin-left:-520px;
}


.top_recruit_link_img03{
	position:absolute;
	top:0;
	left:50%;
	margin-top:155px;
	margin-left:-366px;
}

.top_recruit_link_right_set{
	position:relative;
	margin-left:310px;
}

.top_recruit_link_caption{
	color:#ffffff;
	font-weight:500;
	line-height:1;
	margin-bottom:15px;
}

.top_recruit_link_text{
	color:#ffffff;
	line-height:2;
	margin-bottom:20px;
}












