@charset "UTF-8";
/*----------------------------------------
	fonts
----------------------------------------*/
.en {
	font-family: "Barlow Condensed", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
	letter-spacing: 0.02em;
}

/*----------------------------------------
	Vars
----------------------------------------*/
/*----------------------------------------
	Reset
----------------------------------------*/
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	font: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th, td {
	text-align: left;
	vertical-align: top;
}

img {
	border: none;
	vertical-align: top;
}

/*----------------------------------------
	Mediaquery
----------------------------------------*/
/*----------------------------------------
	fonts
----------------------------------------*/
.en {
	font-family: "Barlow Condensed", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
	letter-spacing: 0.02em;
}

/*----------------------------------------
	Base
----------------------------------------*/
html {
	font-size: 14px;
}
@media screen and (min-width: 769px) {
	html {
		font-size: 16px;
	}
}

body {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	line-height: 1.5;
	letter-spacing: 0.06em;
	background-color: #ffffff;
	color: #000000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: 100%;
}

img {
	width: 100%;
	height: auto;
}

a {
	text-decoration: none;
	transition: opacity 0.4s ease;
}
a:link, a:visited {
	color: #000000;
}

a:hover {
	opacity: 0.7;
}

a[data-rel=external]:after {
	content: "";
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5em;
	background: transparent url("../image/icon-external.png") no-repeat scroll center center;
	background-size: contain;
	margin-right: 0.5em;
}

/*----------------------------------------
	Setting
----------------------------------------*/
/* font family */
/*----------------------------------------
	Layout
----------------------------------------*/
.l-limit {
	margin: 0 auto;
}
@media screen and (min-width: 769px) {
	.l-limit {
		box-sizing: border-box;
		min-width: 1000px;
		max-width: 1600px;
	}
}

.l-frame {
	width: 89.3333333333%;
	margin: 0 auto;
}
@media screen and (min-width: 769px) {
	.l-frame {
		width: 89.0625%;
	}
}

/*----------------------------------------
	Header
----------------------------------------*/
header {
	position: absolute;
	top: 30px;
	width: 100%;
}
@media screen and (min-width: 769px) {
	header {
		top: 0;
	}
}
header .hero-topline {
	text-align: center;
	letter-spacing: 0.08em;
	font-size: 0.8571428571rem;
	line-height: 1;
	margin: 0 auto auto;
}
@media screen and (min-width: 769px) {
	header .hero-topline {
		font-size: 0.75rem;
		line-height: 1;
		margin: 38px auto auto;
	}
}

/*----------------------------------------
	Footer
----------------------------------------*/
footer {
	position: absolute;
	bottom: 30px;
	width: 100%;
	margin-top: auto;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	color: rgba(255, 255, 255, 0.9);
}
@media screen and (min-width: 769px) {
	footer {
		bottom: 46px;
	}
}
footer .footer-inner {
	width: 84.0740740741%;
	margin: 0 auto;
}
@media screen and (min-width: 769px) {
	footer .footer-inner {
		width: 89.5833333333%;
	}
}
footer .footer-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
}
footer .footer-left {
	font-weight: bold;
	font-size: 0.7857142857rem;
	line-height: 1.6363636364;
	letter-spacing: 0.08em;
	width: 100%;
	order: 2;
	margin-top: 10px;
}
@media screen and (min-width: 769px) {
	footer .footer-left {
		width: auto;
		font-size: clamp(12px, 0.9895833vw, 19px);
		order: 1;
		margin-top: 0;
	}
}
footer .footer-right {
	font-size: 0.7857142857rem;
	line-height: 1.3636363636;
	width: 100%;
	order: 1;
}
@media screen and (min-width: 769px) {
	footer .footer-right {
		width: auto;
		font-size: clamp(12px, 1.04166666vw, 20px);
		line-height: 1;
		order: 2;
	}
}

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - デスクトップ（デフォルトのグリッド）
   1024-768    - タブレット横長
   768-480     - タブレット縦長
   480-less    - スマホ
--------------------------------------------*/
/*----------------------------------------
	Utility
----------------------------------------*/
@media screen and (max-width: 768px) {
	.pc-only {
		display: none;
	}
}

@media screen and (min-width: 769px) {
	.sp-only {
		display: none;
	}
}

/*----------------------------------------
	Page Top
----------------------------------------*/
.top {
	position: relative;
}

main {
	background-color: #fcfcfc;
}

.concept {
	background-image: linear-gradient(#fff, #6a90a3 96%);
	background-repeat: no-repeat;
	margin-top: -1px;
}
@media screen and (min-width: 769px) {
	.concept {
		margin-top: 0;
	}
}
.concept .concept-wrap {
	position: relative;
	width: 89.3333333333%;
	margin: 0 auto;
	padding: 110px 0 34px;
	text-align: center;
}
@media screen and (min-width: 769px) {
	.concept .concept-wrap {
		width: 89.5833333333%;
		max-width: 1600px;
		padding: 36px 0 70px;
	}
}
.concept .kicker {
	font-size: 0.8571428571rem;
	line-height: 1;
	letter-spacing: 0.1em;
}
@media screen and (min-width: 769px) {
	.concept .kicker {
		font-size: clamp(12px, 1.0416vw, 20px);
	}
}
.concept h1 {
	font-weight: bold;
	letter-spacing: 0.02em;
	margin: 12px auto 40px;
	font-size: 1.8571428571rem;
	line-height: 1;
}
@media screen and (min-width: 769px) {
	.concept h1 {
		font-size: clamp(36px, 3.3333vw, 64px);
		margin: 10px auto 58px;
	}
}
.concept p {
	color: rgba(28, 28, 28, 0.7);
	font-size: 0.7142857143rem;
	line-height: 1.9;
	margin-bottom: 16px;
	letter-spacing: 0;
}
@media screen and (min-width: 769px) {
	.concept p {
		font-size: 1.25rem;
		line-height: 2;
		font-size: clamp(12px, 1.0416vw, 20px);
		margin-bottom: 26px;
	}
}
.concept p:last-child {
	margin-bottom: 0;
}

.hero-media {
	display: flex;
	overflow: hidden;
	padding-top: 10px;
	background-color: #fff;
}
@media screen and (min-width: 769px) {
	.hero-media {
		padding-top: 0;
	}
}
.hero-media video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
@media screen and (min-width: 769px) {
	.hero-media video {
		width: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.25) 100%);
}

.concept-object {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.concept-object-parts {
	position: absolute;
}
.concept-object-parts img {
	animation: kakukaku 1s steps(2, end) infinite alternate;
}
.concept-object-parts.tree01 {
	width: 32.4%;
	top: -7%;
	left: -3%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.tree01 {
		width: 20.1666666667%;
		top: -15%;
		left: 0;
	}
}
.concept-object-parts.tree01 img {
	animation: none;
}
.concept-object-parts.tree02 {
	width: 32.4%;
	bottom: -43%;
	right: -3%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.tree02 {
		width: 20.8888888889%;
		bottom: -2%;
		right: 2%;
	}
}
.concept-object-parts.tree02 img {
	animation: none;
}
.concept-object-parts.people01 {
	width: 8.5185185185%;
	left: 36%;
	top: 13%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.people01 {
		width: 5.7777777778%;
		left: 8%;
		top: 29%;
	}
}
.concept-object-parts.people02 {
	width: 7.6%;
	left: 2%;
	top: 37%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.people02 {
		width: 4.7777777778%;
		left: 19%;
		top: 46%;
	}
}
.concept-object-parts.people03 {
	width: 12.8%;
	left: 1%;
	top: 91%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.people03 {
		width: 7.6666666667%;
		left: 5%;
		top: 69%;
	}
}
.concept-object-parts.people04 {
	width: 12%;
	left: 10%;
	top: 117%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.people04 {
		width: 6.1111111111%;
		left: 16%;
		top: 86%;
	}
}
.concept-object-parts.people05 {
	width: 4.6%;
	right: 15%;
	top: 6%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.people05 {
		width: 2.8888888889%;
		right: 20%;
		top: -2%;
	}
}
.concept-object-parts.people06 {
	width: 6.4%;
	right: 2%;
	top: 11%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.people06 {
		width: 4%;
		right: 8%;
		top: 0%;
	}
}
.concept-object-parts.people07 {
	width: 15.2%;
	right: 0%;
	top: 51%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.people07 {
		width: 9.5%;
		right: 17%;
		top: 20%;
	}
}
.concept-object-parts.people08 {
	width: 4.6%;
	right: 3%;
	top: 85%;
}
@media screen and (min-width: 769px) {
	.concept-object-parts.people08 {
		width: 2.3888888889%;
		right: 6%;
		top: 25%;
	}
}

@keyframes kakukaku {
	0% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(30deg);
	}
}
.cta {
	padding-bottom: 276px;
}
@media screen and (min-width: 769px) {
	.cta {
		padding-bottom: 218px;
	}
}
.cta .cta-wrap {
	text-align: center;
}
.cta .cta-kicker {
	color: #efd76b;
	font-style: italic;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
}
@media screen and (min-width: 769px) {
	.cta .cta-kicker {
		font-size: clamp(16px, 1.5625vw, 30px);
	}
}
.cta .cta-link {
	position: relative;
	display: inline-flex;
	justify-content: center;
	margin-top: 8px;
	color: transparent;
	font-weight: bold;
	letter-spacing: -0.01em;
	margin-left: -8%;
	background: linear-gradient(to right, #efd76b 50%, #fff 50%) 100%;
	-webkit-background-clip: text;
	background-clip: text;
	background-size: 200% 100%;
	transition: background-position 0.3s;
	font-size: 2.1428571429rem;
	line-height: 1;
}
@media screen and (min-width: 769px) {
	.cta .cta-link {
		font-size: clamp(30px, 3.3333vw, 64px);
		margin-left: -3%;
		margin-top: 12px;
	}
}
.cta .cta-link:hover {
	background-position: 0 100%;
	opacity: 1;
}
.cta .cta-link:hover .arrow {
	color: #efd76b;
	transform: scale(1.3);
}
.cta .cta-link .arrow {
	position: absolute;
	right: -13%;
	color: #fff;
	transition: 0.3s;
}

/* フェードイン(初期値) */
.js-fadeIn {
	opacity: 0; /* 最初は非表示 */
	transition: opacity 0.8s, transform 0.5s; /* 透過率と縦方向の移動を0.8秒/0.4秒 */
}

.js-fadeUp {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(20px); /* 下に30pxの位置から */
	transition: opacity 0.8s, transform 0.8s; /* 透過率と縦方向の移動を0.8秒/0.4秒 */
}

.js-fadeLeft {
	opacity: 0; /* 最初は非表示 */
	transform: translateX(-20px); /* 下に30pxの位置から */
	transition: opacity 0.8s, transform 0.8s; /* 透過率と縦方向の移動を0.8秒 */
}

.js-fadeRight {
	opacity: 0; /* 最初は非表示 */
	transform: translateX(20px); /* 下に30pxの位置から */
	transition: opacity 0.8s, transform 0.8s; /* 透過率と縦方向の移動を0.8秒 */
}

/* フォントカラー(初期値) */
.js-color {
	color: blue; /* 最初は青色 */
	font-size: 15px; /* 最初は15px */
	transition: color 0.8s, font-size 0.8s; /* 色の変化を0.8秒かける */
}

/* フェードイン(スクロールした後) */
.js-fadeIn.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transition-delay: 0.5s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: 0.5s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeLeft.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateX(0); /* 30px上に移動する */
	transition-delay: 0.5s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeRight.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateX(0); /* 30px上に移動する */
	transition-delay: 0.5s; /* フェード開始を0.5秒遅らせる */
}

/* フォントカラー変更(スクロールした後) */
.js-color.is-inview {
	color: green; /* 表示領域に入ったら色を変える */
	font-size: 25px; /* 表示領域に入ったら25px */
	transition-delay: 0.5s; /* 開始を0.5秒遅らせる */
}