/* トップページ
=========================================================================*/
/* Hero Area
-----------------------------------------------------------*/
#heroarea {
	overflow: hidden;
	position: relative;
	padding: 50px 0 0;
}

#heroarea .layout {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto 50px;
	padding: 0 20px;
	max-width: 1400px;
}

#heroarea .layout h1 {
	overflow: hidden;
	font-weight: 600;
	font-size: 3.0rem;
	font-size: calc(30 / 1400 * 100vw);
	line-height: 1em;
	color: #727171;
}

#heroarea .layout h1 span {
	display: inline-block;
}

#heroarea .layout figure {
	width: calc(500 / 1400 * 100%);
}

#heroarea .layout ol {
	display: flex;
	flex-wrap: wrap;
	width: calc(400 / 1400 * 100%);
	gap: 10px 0;
}

#heroarea .layout ol li {
	width: 100%;
}

#heroarea .layout ol li img {
	display: block;
}

#heroarea ul.photo_slider {
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	gap: 0 40px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding: 50px;
	width: fit-content;
	background: linear-gradient(180deg, #FFF 0%, #FFF 25%, #000 25%, #000 100%);
}

.photo_slider li {
  position: relative;
  overflow: hidden;
	width: 400px;
  border-radius: 20px;
}

.photo_slider li::before {
	content: "";
	display: block;
	padding-top: 65.3%;
}

.photo_slider li.large {
	width: 550px;
}

.photo_slider li picture {
	position: absolute;
	inset: 0;
}

.photo_slider li picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* COMPANY POLICY
-----------------------------------------------------------*/
#policy {
	position: relative;
	padding: 0 0 100px;
	text-align: center;
	background-color: #000;
	color: #FFF;
}

#policy .inner p.policy {
	margin-bottom: 80px;
	font-weight: 700;
	font-size: 1.8rem;
}

#policy .inner h2 {
	position: relative;
	margin-bottom: 30px;
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1em;
}

#policy .inner p.gradation {
	margin: 0 auto .5em;
	width: fit-content;
	font-weight: 900;
	font-size: 4.2rem;
	line-height: 1.6em;
	letter-spacing: -.07em;
	background: linear-gradient(to right, #00a5b5, #b8d303);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* MISSION
-----------------------------------------------------------*/
#mission {
	position: relative;
	padding: 80px 0 100px;
	text-align: center;
	background: url(../images/home/mission_bg.png) top center no-repeat;
	background-size: cover;
}

#mission .title_alphabet {
	overflow: hidden;
	margin: 0 auto 20px;
	width: fit-content;
	color: transparent;
}

#mission .title_alphabet svg {
	width: auto;
	height: 110px;
}

.char {
	opacity: 0;
	transform: translateY(100px);
}

#mission .inner h2 {
	position: relative;
	margin-bottom: 30px;
	font-weight: 700;
	font-size: 3.0rem;
	line-height: 1em;
	color: #FFF;
}

#mission .inner p {
	position: relative;
	font-weight: 700;
	font-size: 2.2rem;
	color: #FFF;
}

/* SLOGAN
-----------------------------------------------------------*/
#slogan {
	position: relative;
	padding: 80px 0 100px;
	text-align: center;
	background: url(../images/home/slogan_bg.png) top center no-repeat;
	background-size: cover;
}

#slogan .title_alphabet {
	overflow: hidden;
	margin: 0 auto 20px;
	width: fit-content;
	color: transparent;
}

#slogan .title_alphabet svg {
	width: auto;
	height: 110px;
}

#slogan .inner h2 {
	position: relative;
	margin-bottom: 30px;
	font-weight: 700;
	font-size: 3.0rem;
	line-height: 1em;
}

#slogan .inner h3 {
	position: relative;
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 1em;
	color: #8cc220;
}

#slogan .inner ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 15px 20px;
	margin-bottom: 40px;
}

#slogan .inner ol li {
	width: 150px;
	height: 30px;
	font-weight: 700;
	line-height: 30px;
	color: #FFF;
	text-align: center;
	background-color: #8cc220;
	border-radius: 50px;
}

#slogan .inner ol li:nth-child(2) {
	background-color: #49b232;
}

#slogan .inner ol li:nth-child(3) {
	background-color: #009e41;
}

#slogan .inner ol li:nth-child(4) {
	background-color: #00a28f;
}

#slogan .inner ol li:nth-child(5) {
	background-color: #00a4b8;
}

#slogan .inner figure {
	margin: 0 auto 30px;
	max-width: 900px;
	filter: drop-shadow(1px 1px 10px rgba(228, 228, 228, .75));
}

#slogan .inner h4 {
	font-weight: 700;
	font-size: 3.0rem;
}

#slogan .inner .emphasis {
	margin: 1em auto;
	padding: 1em;
	max-width: 900px;
	font-weight: 700;
	font-size: 2.0rem;
	line-height: 1.6em;
	color: #FFF;
	background: linear-gradient(to right, #00a5b5, #b8d303);
	border-radius: 100px;
}

/* BUSINESS
-----------------------------------------------------------*/
#business {
	position: relative;
	padding: 80px 0 100px;
	text-align: center;
}

#business .title_alphabet {
	overflow: hidden;
	margin: 0 auto 20px;
	width: fit-content;
	color: transparent;
}

#business .title_alphabet svg {
	width: auto;
	height: 110px;
}

#business .inner h2 {
	position: relative;
	margin-bottom: 50px;
	font-weight: 700;
	font-size: 3.0rem;
	line-height: 1em;
}

#business .inner .large {
	position: relative;
	margin-bottom: 40px;
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1.6em;
}

#business .layout {
	position: relative;
	margin-bottom: 40px;
}

#business .layout .text {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: calc(1400 / 1914 * 100%);
	height: fit-content;
	color: #FFF;
}

#business .layout .text h3 {
	margin: 0 auto .5em;
	width: fit-content;
	font-weight: 700;
	font-size: 4.2rem;
	line-height: 1em;
	letter-spacing: -.07em;
	background: linear-gradient(to right, #00a5b5, #b8d303);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#business .layout .text p {
	margin-bottom: 1em;
	font-size: 2.0rem;
}

#business .layout .text a.button {
	position: relative;
	display: block;
	margin: 0 auto;
	width: fit-content;
	color: #FFF;
	text-decoration: none;
}

#business .layout .text a.button::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #FFF;
	transform: scale(1);
	transform-origin: right;
	transition: 0.4s;
}

#business .layout .text a.button:hover::before {
	transform: scale(0, 1);
}

#business .inner p.note {
	position: relative;
	margin: 3em auto 0;
	padding-left: 1.25em;
	width: fit-content;
	line-height: 1.5em;
	text-align: left;
	color: #ff3a00;
}

#business .inner p.note::before {
	content: "＊";
	position: absolute;
	left: 0;
	top: 0;
}

/* RECRUIT
-----------------------------------------------------------*/
#recruit {
	padding: 80px 0 100px;
	background: url(../images/home/recuit_bg.jpg) bottom center no-repeat;
	background-size: cover;
}

#recruit .title_alphabet {
	overflow: hidden;
	margin: 0 auto 20px;
	width: fit-content;
	color: transparent;
}

#recruit .title_alphabet svg {
	width: auto;
	height: 110px;
}

#recruit .inner h2 {
	position: relative;
	margin-bottom: 80px;
	font-weight: 700;
	font-size: 3.0rem;
	line-height: 1em;
	text-align: center;
}

#recruit .layout01 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

#recruit .layout01 .text {
	padding-left: calc(70 / 1400 * 100%);
}

#recruit h4 {
	margin-bottom: 50px;
	font-weight: 700;
	font-size: 3.8rem;
	line-height: 1em;
}

@media screen and (max-width:1000px) {
	#recruit h4 {
		font-size: calc(40 / 1400 * 100vw);
	}
}

#recruit p {
	font-size: 2.0rem;
	line-height: 2em;
}

@media screen and (max-width:1000px) {
	#recruit p {
		font-size: calc(28 / 1400 * 100vw);
	}
}

#recruit .layout01 picture {
	width: calc(756 / 1400 * 100%);
}

#recruit .example {
	margin-bottom: 50px;
	padding: 50px 35px;
	background-color: #FFF;
	border-radius: 20px;
	box-shadow: 1px 1px 2px rgba(228, 228, 228, .75);
}

#recruit .example .layout {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 0 calc(48 / 1400 * 100%);
	margin-bottom: 50px;
}

#recruit .example .layout p.title01 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 3em;
	font-weight: 700;
	font-size: 2.4rem;
	color: #FFF;
	background-color: #000;
}

#recruit .example .layout ul li {
	position: relative;
	padding-left: 1.5em;
	font-weight: 700;
	font-size: 2.4rem;
}

#recruit .example .layout ul li::before {
	content: "●";
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
	font-size: 2.4rem;
}

#recruit .example p.title02 {
	margin: 1em 0;
	font-weight: 700;
	font-size: 2.4rem;
	text-align: center;
}

#recruit .example ul.list {
	margin: 0 auto 40px;
	padding-left: 1.5em;
	width: fit-content;
	list-style: disc;
	font-size: 1.8rem;
	line-height: 1.2em;
}

#recruit .example ul.list li {
	margin-bottom: 1em;
}

#recruit .example ul.list li:last-child {
	margin-bottom: 0;
}

#recruit .example .note {
	text-align: center;
	font-size: 1.7rem;
	line-height: 1.2em;
}

#recruit a.button {
	overflow: hidden;
	position: relative;
	display: block;
	margin: 0 auto;
	width: 550px;
	height: 80px;
	font-weight: 500;
	font-size: 2.4rem;
	line-height: 80px;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	background: linear-gradient(to right, #00a5b5, #b8d303);
	border-radius: 100px;
}

#recruit a.button span {
	position: relative;
	display: block;
	padding-left: 2em;
	width: 100%;
	height: 100%;
	z-index: 2;
}

#recruit a.button span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #6AB82C;
	transform: scale(0, 1);
	transform-origin: left;
	z-index: -1;
	transition: 0.4s;
}

#recruit a.button:hover span::before {
	transform: scale(1);
}

/* SNS
-----------------------------------------------------------*/
#sns {
	position: relative;
	margin-bottom: 50px;
	padding: 80px 0 100px;
	color: #FFF;
	text-align: center;
	background-color: #000;
}

#sns .title_alphabet {
	overflow: hidden;
	margin: 0 auto 20px;
	width: fit-content;
	color: transparent;
}

#sns .title_alphabet svg {
	width: auto;
	height: 110px;
}

#sns .inner h2 {
	position: relative;
	margin-bottom: 60px;
	font-weight: 700;
	font-size: 3.0rem;
	line-height: 1em;
}

/* ----- Instagram ----- */
#sns .inner ul.insta_list {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 0 0 100px;
}

#sns .inner ul.insta_list li {
	position: relative;
	width: calc((100% - 90px)/4);
}

#sns .inner ul.insta_list li::before {
	content: "";
	display: block;
	padding-top: 100%;
}

#sns .inner ul.insta_list a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #FFF;
}

#sns .inner ul.insta_list img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .3s;
}

#sns .inner ul.insta_list a:hover img {
	opacity: .7;
}

/* ----- SNS ----- */
#sns .inner ul.sns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 calc(200 / 1086 * 100%);
	margin: 0 auto;
	text-align: center;
	font-size: 1.6rem;
}

#sns .inner ul.sns li a {
	text-decoration: none;
	color: #FFF;
}

#sns .inner ul.sns li a:visited {
	color: #FFF;
}

#sns .inner ul.sns li a:hover {
	color: #6AB82C;
	text-decoration: none;
}

#sns .inner ul.sns li figure img {
	width: 50px;
	height: auto;
}

/*  Desktop（1200px以下）
=========================================================================
=========================================================================*/
@media screen and (max-width:1200px) {
	/* BUSINESS
	-----------------------------------------------------------*/
	#business .layout .text h3 {
		font-size: calc(42 / 1200 * 100vw);
	}

	#business .layout .text p {
		font-size: calc(20 / 1200 * 100vw);
	}

	/* RECRUIT
	-----------------------------------------------------------*/
	#recruit p {
		font-size: calc(22 / 1200 * 100vw);
	}

	#recruit .example .layout p.title01,
	#recruit .example .layout ul li,
	#recruit .example .layout ul li::before {
		font-size: calc(24 / 1200 * 100vw);
	}

	#recruit .example p.title02 {
		font-size: calc(26 / 1200 * 100vw);
	}

	#recruit .example ul.list {
		font-size: calc(20 / 1200 * 100vw);
	}

	#recruit .example .note {
		font-size: calc(17 / 1200 * 100vw);
	}


}

/*  Mobile（767px以下）
=========================================================================
=========================================================================*/
@media screen and (max-width:767px) {
	/* Header
	-----------------------------------------------------------*/
	header {
		top: 0;
	}

	/* Hero Area
	-----------------------------------------------------------*/
	#heroarea {
		padding: 50px 0 0;
	}

	#heroarea .layout {
		justify-content: center;
		gap: 0 calc(25 / 750 * 100%);
		margin: 0 auto 25px;
		padding: 0;
	}

	#heroarea .layout h1 {
		margin-bottom: 40px;
		font-size: 2.4rem;
		width: 100%;
		text-align: center;
	}

	#heroarea .layout figure {
		width: calc(360 / 750 * 100%);
	}

	#heroarea .layout ol {
		width: calc(260 / 750 * 100%);
		gap: 3px 0;
	}

	#heroarea ul.photo_slider {
		gap: 0 25px;
		padding: 25px;
		width: fit-content;
		background: linear-gradient(180deg, #FFF 0%, #FFF 25%, #000 25%, #000 100%);
	}

	.photo_slider li {
		width: 200px;
		border-radius: 10px;
	}

	.photo_slider li.large {
		width: 300px;
	}

	/* COMPANY POLICY
	-----------------------------------------------------------*/
	#policy {
		padding: 0 0 50px;
	}

	#policy .inner p.policy {
		margin-bottom: 50px;
		font-size: 1.4rem;
	}

	#policy .inner h2 {
		margin-bottom: 20px;
		font-size: 2.0rem;
	}

	#policy .inner p.gradation {
		font-size: 2.4rem;
	}

	/* MISSION
	-----------------------------------------------------------*/
	#mission {
		position: relative;
		padding: 40px 0 50px;
		text-align: center;
		background: url(../images/home/mission_bg@2x.png) top center no-repeat;
		background-size: cover;
	}

	#mission .title_alphabet svg {
		height: 40px;
	}

	#mission .inner h2 {
		font-size: 1.6rem;
	}

	#mission .inner p {
		font-size: 1.4rem;
	}

	/* SLOGAN
	-----------------------------------------------------------*/
	#slogan {
		padding: 40px 0 50px;
		background: url(../images/home/slogan_bg.png) bottom center no-repeat;
		background-size: cover;
	}

	#slogan .title_alphabet svg {
		height: 40px;
	}

	#slogan .inner h2 {
		font-size: 1.6rem;
	}

	#slogan .inner h3 {
		font-size: 2.0rem;
	}


	#slogan .inner h4 {
		font-size: 1.8rem;
	}

	#slogan .inner .emphasis {
		padding: 1.5em 1em;
		font-size: 1.6rem;
	}

	/* BUSINESS
	-----------------------------------------------------------*/
	#business {
		padding: 40px 0 50px;
	}

	#business .title_alphabet svg {
		height: 40px;
	}

	#business .inner h2 {
		margin-bottom: 20px;
		font-size: 1.6rem;
	}

	#business .inner .large {
		margin-bottom: 20px;
		font-size: 1.5rem;
	}

	#business .layout {
		margin-bottom: 30px;
	}

	#business .layout .text h3 {
		font-size: 2.6rem;
	}

	#business .layout .text p {
		font-size: 1.4rem;
	}

	/* RECRUIT
	-----------------------------------------------------------*/
	#recruit {
		padding: 40px 0 50px;
		background: url(../images/home/recuit_bg@2x.jpg) top center no-repeat;
		background-size: cover;
	}

	#recruit .title_alphabet svg {
		height: 40px;
	}

	#recruit .inner h2 {
		margin-bottom: 60px;
		font-size: 1.6rem;
	}


	#recruit .layout01 {
		flex-wrap: wrap;
		gap: 20px 0;
		margin-bottom: 30px;
	}

	#recruit .layout01 .text {
		padding-left: 0;
		margin: 0 auto;
		width: fit-content;
	}

	#recruit h4 {
		margin-bottom: 20px;
		font-size: 2.0rem;
		text-align: center;
	}

	#recruit p {
		font-size: 1.4rem;
		line-height: 2em;
	}

	#recruit .layout01 picture {
		margin: 0 auto;
		width: calc(570 / 750 * 100%);
	}

	#recruit .example {
		margin-bottom: 30px;
		padding: 30px 10px;
		border-radius: 12px;
	}

	#recruit .example .layout {
		gap: 15px calc(48 / 1400 * 100%);
		margin-bottom: 25px;
	}

	#recruit .example .layout p.title01 {
		padding: .5em 3em;
		font-size: 1.8rem;
	}

	#recruit .example .layout ul li {
		font-size: 1.5rem;
	}

	#recruit .example .layout ul li::before {
		font-size: 1.5rem;
	}

	#recruit .example p.title02 {
		font-size: 2.0rem;
	}

	#recruit .example ul.list {
		font-size: 1.5rem;
	}

	#recruit .example .note {
		font-size: 1.2rem;
	}


	#recruit a.button {
		width: 100%;
		height: 60px;
		font-size: 1.8rem;
		line-height: 60px;
	}

	/* SNS
	-----------------------------------------------------------*/
	#sns {
		padding: 40px 0 35px;
	}

	#sns .title_alphabet svg {
		height: 40px;
	}

	#sns .inner h2 {
		margin-bottom: 20px;
		font-size: 1.6rem;
	}

	/* ----- Instagram ----- */
	#sns .inner ul.insta_list {
		gap: 20px;
		margin: 0 0 50px;
	}

	#sns .inner ul.insta_list li {
		width: calc((100% - 20px)/2);
	}

	/* ----- SNS ----- */
	#sns .inner ul.sns {
		width: calc(543 / 750 * 100%);
		font-size: 1.2rem;
	}

	#sns .inner ul.sns li figure img {
		width: 55%;
		max-width: 54px;
		height: auto;
	}
}


/*  Mobile（420px）
=========================================================================
=========================================================================*/
@media screen and (max-width:420px) {}