@charset "UTF-8";
/* ▼▼▼ トップ
======================================================*/
/* ▼ 共通
----------------------------------------*/
#main{
	margin: 0;
}
#main::before,
#main::after{
	display: none;
}

section .title{
	display: table;
	}
	section .title span.playfair{
		display: block;
		margin:0 0 15px 0;
	}
	section .title span.icon{
		display: block;
	}
	section .title span.icon::before{
		content: "";
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: #edfdef; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #edfdef 1%, #fff1e8 98%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg,  #edfdef 1%,#fff1e8 98%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg,  #edfdef 1%,#fff1e8 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edfdef', endColorstr='#fff1e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		position: absolute;
		top: -10px;
		left: -25px;
		z-index: -1;
	}
/* ▼ メインビジュアル
----------------------------------------*/
#mainVisual{
	width: 100%;
	height: 100vh;
	background-color: #fff;
	background-image:
	 radial-gradient(rgba(152, 152, 152,.1) 3px, transparent 3px);
	background-size: 50px 50px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	}
	#mainVisual .container{
		height: 450px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		}
	#mainVisual .fade{
		height: 425px;
		margin-bottom: 30px;
		position: relative;
	}
	#mainVisual .fade p{
		width: 520px;
		height: 425px;
		animation: slideImg 12s ease infinite;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 10%;
		right: 0;
		opacity: 0;
	}
	#mainVisual .fade p.img02{
		animation-delay: 6s;
	}
	@keyframes slideImg{
		0%{ opacity: 0; }
	  25%{ opacity: 1; }
	  50%{ opacity: 1; }
	  75%{ opacity: 0; }
	 100%{ opacity: 0; }
	}

	#mainVisual .read{
		max-width: 318px;
		margin: 0 auto;
		position: relative;
		z-index: 1;
	}
	#mainVisual .scroll{
		font-size: 12px;
		text-align: center;
		position: absolute;
		bottom: 50px;
		right: 0;
		left: 0;
		margin: auto;
	}
	#mainVisual .scroll::after{
		content:"";
		width: 1px;
		height: 100px;
		background: #000;
		animation: scroll 2s ease infinite;
		position: absolute;
		top:25px;
		left: 0;
		right: 0;
		margin: auto;
	}
	@keyframes scroll{
		0%{
			height: 0;
		}
		100%{
			height: 100px;
		}
	}

	/* 背景 */
	.bg_circle > div{position: relative;}
	.bg_circle > div p{
		position: absolute;
		top: 0;
		left: 0;
		animation: bg_circle 12s ease infinite;
		opacity: 0;
	}
	.bg_circle p.circle01_2,
	.bg_circle p.circle02_2,
	.bg_circle p.circle03_2,
	.bg_circle p.circle04_2,
	.bg_circle p.circle05_2,
	.bg_circle p.circle06_2,
	.bg_circle p.circle07_2,
	.bg_circle p.circle08_2,
	.bg_circle p.circle09_2{
		animation-delay: 6s;
	}
	@keyframes bg_circle{
		0%{ opacity: 0; }
	  25%{ opacity: 1; }
	  50%{ opacity: 1; }
	  75%{ opacity: 0; }
	 100%{ opacity: 0; }
 	}
	/* 1つめ */
	.bg_circle > div.circle01{
		animation: bg_circle01 12s ease-in-out infinite;
		top: 10vh;
		left: 15vw;
	}
	@keyframes bg_circle01{
		0%{ transform: translate(0,0px);}
		50%{ transform: translate(-50px,50px); }
	 100%{ transform: translate(0,0px); }
	}
	/* 2つめ */
	.bg_circle > div.circle02{
		animation: bg_circle02 10s ease-in infinite;
		top: 40vh;
		left: 10vw;
	}
	@keyframes bg_circle02{
		0%{ transform: translate(0,0px);}
		50%{ transform: translate(-50px,-50px);opacity: 0; }
	 100%{ transform: translate(0,0px);opacity: 1; }
	}
	/* 3つめ */
	.bg_circle > div.circle03{
		animation: bg_circle03 8s ease-out infinite;
		top :65vh;
		left: 3vw;
	}
	@keyframes bg_circle03{
		0%{ transform: translate(0,0px);}
		50%{ transform: translate(50px,50px); }
	 100%{ transform: translate(0,0px); }
	}
	/* 4つめ */
	.bg_circle > div.circle04{
		animation: bg_circle04 10s ease-out infinite;
		top :85vh;
		left: 20vw;
	}
	@keyframes bg_circle04{
		0%{ transform: translate(0,0px);}
		50%{ transform: translate(50px,-50px); }
	 100%{ transform: translate(0,0px); }
	}
	/* 5つめ */
	.bg_circle > div.circle05{
		animation: bg_circle05 7s ease infinite;
		top :10vh;
		left: 65vw;
	}
	@keyframes bg_circle05{
		0%{ transform: translate(0,0px);}
		50%{ transform: translate(50px,-50px); }
	 100%{ transform: translate(0,0px); }
	}
	/* 6つめ */
	.bg_circle > div.circle06{
		animation: bg_circle06 13s ease-out infinite;
		top :20vh;
		left: 85vw;
	}
	@keyframes bg_circle06{
		0%{ transform: translate(0,0px);}
		50%{ transform: translate(50px,50px); }
	 100%{ transform: translate(0,0px); }
	}
	/* 7つめ */
	.bg_circle > div.circle07{
		animation: bg_circle07 8s ease-in-out infinite;
		top :65vh;
		left: 80vw;
	}
	@keyframes bg_circle07{
		0%{ transform: translate(0,0px);}
		50%{ transform: translate(-50px,-50px);opacity: 0; }
	 100%{ transform: translate(0,0px);opacity: 1; }
	}
	/* 8つめ */
	.bg_circle > div.circle08{
		animation: bg_circle08 8s ease-out infinite;
		top :75vh;
		left: 85vw;
	}
	@keyframes bg_circle08{
		0%{ transform: translate(0,0px);}
		50%{ transform: translate(50px,-50px); }
	 100%{ transform: translate(0,0px); }
	}
	/* 9つめ */
	.bg_circle > div.circle09{
		animation: bg_circle09 12s ease-in infinite;
		top :90vh;
		left: 65vw;
	}
	@keyframes bg_circle09{
		0%{ transform: translate(0,0px);}
		50%{ transform: translate(-50px,50px);opacity: 0; }
	 100%{ transform: translate(0,0px);opacity: 1; }
	}
/* ▼ 新着情報
----------------------------------------*/
#news{
	padding-bottom: 0
	}
	#news .container::before{
		content: "";
		width: 520px;
		height: 630px;
		background: url(../img/top/bg_circle01.svg)no-repeat center center/cover;
		position: absolute;
		top: -200px;
		right: -430px;
		z-index: -1;
	}
	#news .flex_box{
		margin-bottom: 20px;
	}
	#news .txt{
		width: calc(100% - 230px);
		border-right: 1px solid #D3D3D3;
		padding: 0 25px;
	}
	#news .txt a{
		display: block;
	}
	#news .title{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 225px;
		margin-bottom: 0;
		border-left: 1px solid #D3D3D3;
		border-right: 1px solid #D3D3D3;
		color: #000;
		font-size: 16px;
	}
	#news .title span{
		display: inline-block;
		margin: 0 20px 10px 0;
		font-size: 36px;
	}
	#news	.more a{
		float: right;
		border-bottom: 1px solid #000;
		font-size: 19px;
	}
	#news	.more a::after{
		display: inline-block;
		content: "";
		width: 45px;
		height: 10px;
		background: url(../img/icon_arrow_black.svg)no-repeat center center/45px 10px;
		margin-left: 15px;
	}
	#news	.more a:hover::after{
		position: relative;
		left: 10px;
		animation: arrow_move .3s ease;
	}
@keyframes arrow_move{
	0%{
		left: 0;
	}
	100%{
		left: 10px;
	}
}

/* ▼ 会社概要
----------------------------------------*/
#company{
	padding-bottom: 0
	}
	#company .title{
		margin-bottom: 0;
	}
	/* テキスト */
	#company .txt{
		max-width: 460px;
		position: absolute;
		top: 230px;
		z-index: 1;
	}
	#company .txt p{
		margin-bottom: 60px;
	}
	#company .txt p.mincho{
		margin-bottom: 20px;
		font-size: 20px;
	}
	/* 写真 */
	#company .photo{
		min-height: 780px;
		}
		#company .photo p{
			position: absolute;
		}
		#company .photo p:nth-child(1){
			margin: auto;
			text-align: center;
			bottom: 8px;
			right: -243px;
			left: 0px;
		}
		#company .photo p:nth-child(2){
			bottom: 100px;
			left: 65px;
		}

/* ▼ 事業内容
----------------------------------------*/
#business{
	overflow: hidden;
	}
	#business::before{
		content: "";
		width: 100%;
		height: 100%;
		background: #edfdef; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #edfdef 1%, #fff1e8 98%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg,  #edfdef 1%,#fff1e8 98%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg,  #edfdef 1%,#fff1e8 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edfdef', endColorstr='#fff1e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		position: absolute;
		top: 200px;
		left: 0;
	}
	#business .title,
	#business .title span.playfair,
	#business .read{
		text-align: center;
	}
	#business .title{
		margin: 0 auto 40px;
	}
	#business .flex_box{
		/* justify-content: space-between; */
		margin-bottom: 60px;
		justify-content: center;
	}
	#business .flex_box > div{
		/* width: 46%; */
		width: calc(100% / 2 - 40px);
	}
	#business .flex_box > div:first-of-type{
		margin-right: 80px;
	}
	#business .flex_box > div:last-of-type{
		margin-top: 75px;
	}
	#business .flex_box > div p{
		margin-bottom: 5px;
	}
	#business .flex_box > div h3{
		color: #13AE67;
		font-size: 24px;
		text-align: center;
	}
	#business .arrow_btn a{
		margin: 0 auto;
	}

/* ▼ 事業内容
----------------------------------------*/
#facility .container::before,
#facility .container::after{
	content: "";
	position: absolute;
	z-index: -1;
	}
	#facility .container::before{
		width: 730px;
		height: 1050px;
		background: url(../img/top/bg_circle02.svg)no-repeat center center/cover;
		top: -350px;
		left: -670px;
	}
	#facility .container::after{
		width: 590px;
		height: 840px;
		background: url(../img/top/bg_circle03.svg)no-repeat center center/cover;
		bottom: -345px;
		right: -515px;
	}
	#facility .flex_box{
		justify-content: space-between;
		margin-bottom: 100px;
	}
	#facility .flex_box > .txt{
		width: 41%;
		margin-top: -20px;
	}
	#facility .flex_box > .txt::after{
		display: block;
		content: "";
		clear: both;
	}
	#facility .flex_box > .txt p{
		margin-bottom: 50px;
	}
	#facility .flex_box > .photo{
		width: 51%;
	}

	#facility .flex_box:nth-child(even) > div.txt{
		order: 2;
	}
	#facility .arrow_btn a{
		float: right;
	}

/* ▼▼▼ 768px〜1366px
======================================================*/
@media screen and (max-width: 1366px){
	/* ▼ メインビジュアル
	----------------------------------------*/
	#mainVisual .container{
		top: -50px;
	}
	#mainVisual .scroll{
		bottom: 40px;
	}
	#mainVisual .scroll::after{
		height: 60px;
	}
}
/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px){
	/* ▼ 共通
	----------------------------------------*/
	.title span.playfair{
		font-size: 65px;
		text-align: center;
	}
	section h2.title span.icon::before{
		width: 50px;
		height: 50px;
		left: -20px;
	}
	/* ▼ メインビジュアル
	----------------------------------------*/
	#mainVisual{
		height: 97vh;
	}
	#mainVisual .container{
		height: 320px;
		}
		#mainVisual .fade{
			height: 280px;
			margin-bottom: 20px;
		}
		#mainVisual .fade p{
			width: 310px;
			height: 280px;
			left: 9%;
		}
		#mainVisual .read{
			max-width: 270px;
			margin: 0 auto;
		}
		#mainVisual .scroll{
			bottom: 90px;
		}
		#mainVisual .scroll::after{
			height: 95px;
		}
	/* 背景 */
	/* 1つめ */
	.bg_circle > div.circle01{
		width: 17%;
		top: 5vh;
		left: 45vw;
	}
	@keyframes bg_circle01{
		50%{ transform: translate(-50px,20px); }
	}
	/* 2つめ */
	.bg_circle > div.circle02{
		width: 30%;
		top: 10vh;
		left: 0vw;
	}
	@keyframes bg_circle02{
		50%{ transform: translate(-20px,-20px);opacity: 0; }
		100%{ transform: translate(0,0px);opacity: 1; }
	}
	/* 3つめ */
	.bg_circle > div.circle03{
		width: 4%;
		top :75vh;
		left: 4vw;
	}
	/* 4つめ */
	.bg_circle > div.circle04{
		width: 17%;
		top :80vh;
		left: -10vw;
	}
	/* 5つめ */
	.bg_circle > div.circle05{
		top: 5vh;
		left: 55vw;
	}
	@keyframes bg_circle05{
		50%{ transform: translate(20px,-20px); }
	}
	/* 6つめ */
	.bg_circle > div.circle06{
		width: 18%;
		top :15vh;
		left: 80vw;
	}
	/* 7つめ */
	.bg_circle > div.circle07{
		display: none;
	}
	/* 8つめ */
	.bg_circle > div.circle08{
		width: 40%;
		top :65vh;
		left: 75vw;
	}
	@keyframes bg_circle08{
		50%{ transform: translate(20px,-20px); }
	}
	/* 9つめ */
	.bg_circle > div.circle09{
		width: 10%;
		top: 75vh;
		left: 70vw;
	}



	/* ▼ 新着情報
	----------------------------------------*/
		#news .container::before{
			width: 184px;
			height: 220px;
			top: -80px;
			right: -105px;
		}
		#news .flex_box{
			margin-bottom: 20px;
		}
		#news .txt{
			width: 100%;
			border-right: none;
			padding: 0 10px 0 0;
		}
		#news .title{
			width: 200px;
			margin: 0 0 15px 0;
			font-size: 16px;
		}
		#news .title span{
			margin-right: 15px;
			font-size: 31px;
		}
	/* ▼ 会社概要
	----------------------------------------*/
	#company{
		padding-bottom: 40px;
		}
		#company .title{
		margin-bottom: 20px;
		}
		/* テキスト */
		#company .txt{
			position: unset;
		}
		#company .txt p{
			margin-bottom: 30px;
		}
		#company .txt p.mincho{
			margin-bottom: 10px;
			text-align: center;
		}
		/* 写真 */
		#company .photo{
			min-height: 400px;
			}
			#company .photo p:nth-child(1){
				max-width: 375px;
				bottom: 70px;
				right: 0;
			}
			#company .photo p:nth-child(2){
				max-width: 190px;
				bottom: 0;
				left: 20px;
			}

	/* ▼ 事業内容
	----------------------------------------*/
		#business::before{
			top: 95px;
		}
		#business .read{
			margin-bottom: 30px;
			text-align: left;
		}
		#business .title{
			margin: 0 auto 25px;
		}
		#business .flex_box{
			margin-bottom: 30px;
		}
		#business .flex_box > div{
			width: 100%;
		}
		#business .flex_box > div:last-of-type{
			margin-top: 0;
		}
		#business .flex_box > div:not(:last-child){
			margin-bottom: 20px;
		}
		#business .flex_box > div h3{
			font-size: 18px;
		}

	/* ▼ 事業内容
	----------------------------------------*/
		#facility .container::before{
			width: 230px;
			height: 330px;
			top: -150px;
			left: -130px;
		}
		#facility .container::after{
			width: 285px;
			height: 408px;
			bottom: -248px;
			right: -150px;
		}
		#facility .flex_box{
			margin-bottom: 60px;
		}
		#facility .flex_box > .txt{
			width: 100%;
			margin:0 auto 25px;
		}
		#facility .flex_box > .txt p{
			margin-bottom: 20px;
		}
		#facility .flex_box > .photo{
			width: 100%;
		}
		#facility .arrow_btn a{
			float: none;
		}
}
/* ▼▼▼ 320px〜480px
======================================================*/
@media screen and (max-width: 320px){

	/* ▼ メインビジュアル
	----------------------------------------*/
		#mainVisual .fade p{
			width: 275px;
			height: 215px;
			left: 7%;
		}
}