@charset "UTF-8";

/*--------------- front（オープニングシャッター） ---------------*/
.shutter {
	background: #111111;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}

/*--------------- front（トップページ） ---------------*/
/*==================
front h1
====================*/
/***************************************************
 * Generated by SVG Artista on 11/7/2024, 3:46:01 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
h1 .logo.active {
	z-index: 90000;
}

@-webkit-keyframes animate-svg-stroke-1 {
	0% {
		stroke-dashoffset: 307.65472412109375px;
		stroke-dasharray: 307.65472412109375px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 307.65472412109375px;
	}
}

@keyframes animate-svg-stroke-1 {
	0% {
		stroke-dashoffset: 307.65472412109375px;
		stroke-dasharray: 307.65472412109375px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 307.65472412109375px;
	}
}

@-webkit-keyframes animate-svg-fill-1 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-1 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-1 {
	-webkit-animation: animate-svg-stroke-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
		animate-svg-fill-1 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both;
	animation: animate-svg-stroke-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
		animate-svg-fill-1 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
	0% {
		stroke-dashoffset: 158.495849609375px;
		stroke-dasharray: 158.495849609375px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 158.495849609375px;
	}
}

@keyframes animate-svg-stroke-2 {
	0% {
		stroke-dashoffset: 158.495849609375px;
		stroke-dasharray: 158.495849609375px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 158.495849609375px;
	}
}

@-webkit-keyframes animate-svg-fill-2 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-2 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-2 {
	-webkit-animation: animate-svg-stroke-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
		animate-svg-fill-2 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
	animation: animate-svg-stroke-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
		animate-svg-fill-2 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
	0% {
		stroke-dashoffset: 48.3265266418457px;
		stroke-dasharray: 48.3265266418457px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.3265266418457px;
	}
}

@keyframes animate-svg-stroke-3 {
	0% {
		stroke-dashoffset: 48.3265266418457px;
		stroke-dasharray: 48.3265266418457px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.3265266418457px;
	}
}

@-webkit-keyframes animate-svg-fill-3 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-3 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-3 {
	-webkit-animation: animate-svg-stroke-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
		animate-svg-fill-3 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s both;
	animation: animate-svg-stroke-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
		animate-svg-fill-3 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
	0% {
		stroke-dashoffset: 148.05369567871094px;
		stroke-dasharray: 148.05369567871094px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 148.05369567871094px;
	}
}

@keyframes animate-svg-stroke-4 {
	0% {
		stroke-dashoffset: 148.05369567871094px;
		stroke-dasharray: 148.05369567871094px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 148.05369567871094px;
	}
}

@-webkit-keyframes animate-svg-fill-4 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-4 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-4 {
	-webkit-animation: animate-svg-stroke-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
		animate-svg-fill-4 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
	animation: animate-svg-stroke-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
		animate-svg-fill-4 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
	0% {
		stroke-dashoffset: 48.3265266418457px;
		stroke-dasharray: 48.3265266418457px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.3265266418457px;
	}
}

@keyframes animate-svg-stroke-5 {
	0% {
		stroke-dashoffset: 48.3265266418457px;
		stroke-dasharray: 48.3265266418457px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.3265266418457px;
	}
}

@-webkit-keyframes animate-svg-fill-5 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-5 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-5 {
	-webkit-animation: animate-svg-stroke-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
		animate-svg-fill-5 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
	animation: animate-svg-stroke-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
		animate-svg-fill-5 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
	0% {
		stroke-dashoffset: 148.05369567871094px;
		stroke-dasharray: 148.05369567871094px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 148.05369567871094px;
	}
}

@keyframes animate-svg-stroke-6 {
	0% {
		stroke-dashoffset: 148.05369567871094px;
		stroke-dasharray: 148.05369567871094px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 148.05369567871094px;
	}
}

@-webkit-keyframes animate-svg-fill-6 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-6 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-6 {
	-webkit-animation: animate-svg-stroke-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both,
		animate-svg-fill-6 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
	animation: animate-svg-stroke-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both,
		animate-svg-fill-6 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
	0% {
		stroke-dashoffset: 48.326534271240234px;
		stroke-dasharray: 48.326534271240234px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.326534271240234px;
	}
}

@keyframes animate-svg-stroke-7 {
	0% {
		stroke-dashoffset: 48.326534271240234px;
		stroke-dasharray: 48.326534271240234px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.326534271240234px;
	}
}

@-webkit-keyframes animate-svg-fill-7 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-7 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-7 {
	-webkit-animation: animate-svg-stroke-7 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both,
		animate-svg-fill-7 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
	animation: animate-svg-stroke-7 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both,
		animate-svg-fill-7 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
	0% {
		stroke-dashoffset: 147.91952514648438px;
		stroke-dasharray: 147.91952514648438px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 147.91952514648438px;
	}
}

@keyframes animate-svg-stroke-8 {
	0% {
		stroke-dashoffset: 147.91952514648438px;
		stroke-dasharray: 147.91952514648438px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 147.91952514648438px;
	}
}

@-webkit-keyframes animate-svg-fill-8 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-8 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-8 {
	-webkit-animation: animate-svg-stroke-8 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both,
		animate-svg-fill-8 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
	animation: animate-svg-stroke-8 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both,
		animate-svg-fill-8 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
	0% {
		stroke-dashoffset: 48.326568603515625px;
		stroke-dasharray: 48.326568603515625px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.326568603515625px;
	}
}

@keyframes animate-svg-stroke-9 {
	0% {
		stroke-dashoffset: 48.326568603515625px;
		stroke-dasharray: 48.326568603515625px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.326568603515625px;
	}
}

@-webkit-keyframes animate-svg-fill-9 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-9 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-9 {
	-webkit-animation: animate-svg-stroke-9 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both,
		animate-svg-fill-9 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
	animation: animate-svg-stroke-9 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both,
		animate-svg-fill-9 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
	0% {
		stroke-dashoffset: 147.91954040527344px;
		stroke-dasharray: 147.91954040527344px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 147.91954040527344px;
	}
}

@keyframes animate-svg-stroke-10 {
	0% {
		stroke-dashoffset: 147.91954040527344px;
		stroke-dasharray: 147.91954040527344px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 147.91954040527344px;
	}
}

@-webkit-keyframes animate-svg-fill-10 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-10 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-10 {
	-webkit-animation: animate-svg-stroke-10 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both,
		animate-svg-fill-10 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s both;
	animation: animate-svg-stroke-10 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both,
		animate-svg-fill-10 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
	0% {
		stroke-dashoffset: 48.32658004760742px;
		stroke-dasharray: 48.32658004760742px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.32658004760742px;
	}
}

@keyframes animate-svg-stroke-11 {
	0% {
		stroke-dashoffset: 48.32658004760742px;
		stroke-dasharray: 48.32658004760742px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 48.32658004760742px;
	}
}

@-webkit-keyframes animate-svg-fill-11 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-11 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-11 {
	-webkit-animation: animate-svg-stroke-11 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both,
		animate-svg-fill-11 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
	animation: animate-svg-stroke-11 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both,
		animate-svg-fill-11 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
	0% {
		stroke-dashoffset: 293.6846923828125px;
		stroke-dasharray: 293.6846923828125px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 293.6846923828125px;
	}
}

@keyframes animate-svg-stroke-12 {
	0% {
		stroke-dashoffset: 293.6846923828125px;
		stroke-dasharray: 293.6846923828125px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 293.6846923828125px;
	}
}

@-webkit-keyframes animate-svg-fill-12 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-12 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-12 {
	-webkit-animation: animate-svg-stroke-12 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s both,
		animate-svg-fill-12 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
	animation: animate-svg-stroke-12 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s both,
		animate-svg-fill-12 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}

@-webkit-keyframes animate-svg-stroke-13 {
	0% {
		stroke-dashoffset: 307.7764587402344px;
		stroke-dasharray: 307.7764587402344px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 307.7764587402344px;
	}
}

@keyframes animate-svg-stroke-13 {
	0% {
		stroke-dashoffset: 307.7764587402344px;
		stroke-dasharray: 307.7764587402344px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 307.7764587402344px;
	}
}

@-webkit-keyframes animate-svg-fill-13 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

@keyframes animate-svg-fill-13 {
	0% {
		fill: transparent;
	}

	100% {
		fill: rgb(193, 255, 0);
	}
}

.active .svg-elem-13 {
	-webkit-animation: animate-svg-stroke-13 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s both,
		animate-svg-fill-13 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
	animation: animate-svg-stroke-13 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s both,
		animate-svg-fill-13 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
}


/*==================
front mv sp
====================*/
.mv_box {
	width: 100%;
	height: 161vw;
	overflow: hidden;
	position: relative;
}

.mv_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 161vw;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: fade_mv;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}

@keyframes fade_mv {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	94% {
		opacity: 1;
		transform: scale(1.2);
	}

	95% {
		opacity: 0;
	}

	100% {
		z-index: 0;
		opacity: 0;
	}
}

/* 1枚目のスライド */
.mv_img:first-of-type {
	background-image: url("../images/front/mv_front01_sp.jpg");
}

/* 2枚目のスライド */
.mv_img:nth-of-type(2) {
	background-image: url("../images/front/mv_front02_sp.jpg");
	animation-delay: 5s;
}

/* 3枚目のスライド */
.mv_img:nth-of-type(3) {
	background-image: url("../images/front/mv_front03_sp.jpg");
	animation-delay: 10s;
}

.mv_box .shadow {
	background: rgb(17, 17, 17);
	background: linear-gradient(0deg, rgba(17, 17, 17, 1) 0%, rgba(17, 17, 17, 0) 100%);
	width: 100%;
	height: 150px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
}

.mv_box .logo {
	width: 283px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 10;
}

/* 今日の情報取得 */
.now_area {
	align-items: center;
	color: #C1FF00;
	position: absolute;
	bottom: 4.5rem;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 15;
	display: flex;
	width: 100%;
	justify-content: center;
}

.day_block {
	padding-right: 12px;
}

.day_block p {
	font-size: 1.2rem;
	line-height: 1.6;
}

#dateDisplay {
	font-size: 1.6rem;
	font-weight: bold;
}

#timeDisplay,
#temperatureDisplay {
	font-size: 4.6rem;
	font-weight: bold;
	position: relative;
	line-height: 1;
	padding: 0 1.2rem .6rem;
}

#timeDisplay::before,
#timeDisplay::after {
	background: #C1FF00;
	content: "";
	width: 1px;
	height: 40px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

#timeDisplay::after {
	left: auto;
	right: 0;
}

#temperatureDisplay {
	padding-right: 0;
}

.mv_area {
	position: relative;
	padding-bottom: 4rem;
}

.about_btn01 {
	border: solid 1px #C1FF00;
	border-radius: 20px;
	color: #C1FF00;
	display: block;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	width: 168px;
	height: 40px;
	line-height: 2.3;
	position: absolute;
	z-index: 30;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding-left: 1.2rem;
}

.arrows {
	width: 19px;
	/* 矢印全体の横幅 */
	height: 9px;
	/* 矢印の高さ */
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

.arrows path {
	stroke: #C1FF00;
	fill: transparent;
	stroke-width: 1px;
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite;
}

@keyframes arrow {
	0% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	80% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@-webkit-keyframes arrow

/* SafariとChrome用 */
	{
	0% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	80% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

.arrows path.a1 {
	animation-delay: -1s;
	-webkit-animation-delay: -1s;
}

.arrows path.a2 {
	animation-delay: -0.5s;
	-webkit-animation-delay: -0.5s;
}

.arrows path.a3 {
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
}
/*==================
front mv pc
====================*/
@media (min-width: 600px) {
	.mv_box {
		height: 48vw;
	}

	.mv_img {
		height: 48vw;
	}

	/* 1枚目のスライド */
	.mv_img:first-of-type {
		background-image: url("../images/front/mv_front01_pc.jpg");
	}

	/* 2枚目のスライド */
	.mv_img:nth-of-type(2) {
		background-image: url("../images/front/mv_front02_pc.jpg");
	}

	/* 3枚目のスライド */
	.mv_img:nth-of-type(3) {
		background-image: url("../images/front/mv_front03_pc.jpg");
	}

	.mv_box .logo {
		width: 530px;
	}

	.about_btn01 {
		position: absolute;
		top: 2.5rem;
		bottom: auto;
		right: 2.5rem;
		left: auto;
	}

	/* 今日の情報取得 */
	.now_area {
		bottom: 11%;
	}

	.day_block {
		padding-right: 25px;
	}

	.day_block p {
		font-size: 1.6rem;
		line-height: 1.6;
	}

	#dateDisplay {
		font-size: 2rem;
	}

	#timeDisplay,
	#temperatureDisplay {
		font-size: 6.2rem;
		padding: 0 2.5rem 1.2rem;
	}

	#temperatureDisplay {
		padding-right: 0;
	}
}

/*==================
front person_area sp
====================*/
.person_area {
	position: relative;
	z-index: 0;
	padding: 12rem 0 18rem;
}

.person_area .bg_logo01 {
	width: 100%;
	position: absolute;
	top: 12rem;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
}

.person_area .bg_logo01.active {
	opacity: 0;
	animation: zoom_in_sp 3s ease forwards;
}

@keyframes zoom_in_sp {
	0% {
		transform: scale(0.5);
	}

	100% {
		opacity: 1;
		transform: scale(1.1);
	}
}

@keyframes zoom_in_pc {
	0% {
		transform: scale(0.5);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}




.scroll-infinity__list li>img {
	max-width: none;
}

.scroll-infinity li:first-child img {
	width: 162px;
}

.scroll-infinity li:nth-child(2) img {
	width: 156px;
}

.scroll-infinity li:nth-child(3) img {
	width: 168px;
	margin-left: -2rem;
}

.scroll-infinity li:nth-child(4) img {
	width: 217px;
	margin-left: -2rem;
}

.scroll-infinity li:nth-child(5) img {
	width: 166px;
}

/* スライダー */
@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

@media (max-width: 599px) {
	.scroll-infinity__wrap {
		display: flex;
		overflow: hidden;
	}

	.scroll-infinity__list {
		display: flex;
		list-style: none;
		padding: 0;
		align-items: flex-end;
	}

	.scroll-infinity__list--left {
		animation: infinity-scroll-left 12s infinite linear 0.5s both;
	}

	.scroll-infinity__list li {
		width: calc(100vw / 2.2);
	}

	/* .scroll-infinity__list li >img {
		  width: 100%;
		} */
}

/* ふわふわ動く人 */
.img_person02 {
	height: 436px;
	position: relative;
}

.img_person02 .shadow {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	animation: fuwafuwa_shadow 1.8s infinite ease-in-out;
}

.img_person02 .person {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	visibility: visible;
	opacity: 1;
	animation: fuwafuwa 1.8s infinite ease-in-out;
}

@keyframes fuwafuwa {
	0% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(0, -15px);
	}

	100% {
		transform: translate(0, 0);
	}
}

@keyframes fuwafuwa_shadow {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}

	50% {
		transform: translate(0, 10px) scale(0.95);
		opacity: 0.7;
	}

	100% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}
}

@keyframes slide_left_in {
	0% {
		transform: translateX(-80px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
	}

	40%,
	100% {
		opacity: 1;
	}
}

/* @keyframes slide_left_stretch {
	0% {
	  transform: translateX(-80px);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0);
	}
	40%,100% {
	  opacity: 1;
	}
  } */
/*==================
front person_area pc
====================*/
@media (min-width: 600px) {
	.person_area {
		padding: 28rem 0 10rem;
	}

	.person_area .bg_logo01 {
		width: 1147px;
		top: 12.5rem;
	}

	.person_area .bg_logo01.active {
		animation: zoom_in_pc 3s ease forwards;
	}


	.scroll-infinity__list {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		max-width: 1080px;
		margin: 0 auto;
	}

	.scroll-infinity__list.tb_none {
		display: none;
	}

	.scroll-infinity li:first-child img {
		width: 228px;
	}

	.scroll-infinity li:nth-child(2) img {
		width: 226px;
	}

	.scroll-infinity li:nth-child(3) img {
		width: 236px;
		margin-left: -4rem;
	}

	.scroll-infinity li:nth-child(4) img {
		width: 302px;
		margin-left: -6rem;
	}

	.scroll-infinity li:nth-child(5) img {
		width: 240px;
		margin-left: -4rem;
	}

	.scroll-infinity li {
		opacity: 0;
	}

	.scroll-infinity li.active {
		animation: slide_left_in 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}

	.scroll-infinity li:first-child {
		animation-delay: 0.3s;
	}

	.scroll-infinity li:nth-child(2) {
		animation-delay: 0.5s;
	}

	.scroll-infinity li:nth-child(3) {
		animation-delay: 0.7s;
	}

	.scroll-infinity li:nth-child(4) {
		animation-delay: 0.9s;
	}

	.scroll-infinity li:nth-child(5) {
		animation-delay: 1.1s;
	}


	/* ふわふわ動く人 */
	.img_person02 {
		width: 226px;
		height: 614px;
		margin-left: -1rem;
	}
}

/*==================
front epic_area sp
====================*/
.epic_area {
	background: #B3B3B3;
	padding: 8rem 1rem 3.5rem;
	position: relative;
	z-index: 0;
}

.logo_symbol01 {
	position: absolute;
	top: -15rem;
	left: 0;
	right: 0;
	margin: auto;
	width: 186px;
	z-index: -1;
	animation: stretch_logo 5s linear 0s infinite;
}

@keyframes stretch_logo {
	0% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	10% {
		transform: scale(0.95, 1.2) translate(0%, -10%);
	}

	15% {
		transform: scale(1.1, 0.9) translate(0%, 5%);
	}

	20% {
		transform: scale(0.95, 1.05) translate(0%, -3%);
	}

	25% {
		transform: scale(1.05, 0.95) translate(0%, 3%);
	}

	30% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	100% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}
}

.epic_area h2 {
	color: #000000;
	font-size: 2rem;
	text-align: center;
}

.epic_area h2 span {
	color: #0000FF;
}

.epic_text {
	border: solid 1px #262626;
	background: #999999;
	width: 220px;
	height: 50px;
	text-align: center;
	color: #C1FF00;
	display: block;
	font-weight: bold;
	font-size: 5rem;
	margin: 3.5rem auto 0;
	line-height: 0.8;
	overflow-y: hidden;
}

.epic_text span {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	animation: ShiftText 12s ease-in-out infinite;
	margin-bottom: 1rem;
}

@keyframes ShiftText {
	0% {
		top: 0;
		transform: translateY(2rem);
	}

	1%,
	25% {
		opacity: 1;
		top: 0;
		transform: translateY(0);
	}

	26%,
	50% {
		opacity: 1;
		top: -5.8rem;
	}

	51%,
	75% {
		opacity: 1;
		top: -11.5rem;
	}

	76%,
	100% {
		opacity: 1;
		top: -17.4rem;
	}
}
.epic_text em {
	color: #0000FF;
	font-style: normal;
}

.epic_area ul.flex_b {
	max-width: 230px;
	margin: 5.5rem auto 0;
}

.epic_area li {
	margin-bottom: 3.5rem;
}

/* ball_grid */
.ball_grid {
	width: 90px;
	height: 90px;
}

.ball_block {
	display: flex;
	height: auto;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.ball_block:last-child {
	margin-bottom: 0;
}

.ball {
	background: #0000FF;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	transition: background-color 1s;
}

.ball.yellow {
	background-color: #C1FF00;
	/* 黄色 */
}

.ball.blue {
	background-color: #0000FF;
	/* 青色 */
}

/* 円グラフ */
.circle svg {
	position: relative;
	width: 90px;
	height: 90px;
}

.circle circle {
	position: relative;
	fill: none;
	stroke-width: 20;
	stroke: #CCCCCC;
	stroke-dasharray: 219.9;
	stroke-dashoffset: 0;
	stroke-linecap: butt;
	/* 丸みをなくす */
}

.circle circle.line {
	stroke-dashoffset: calc(282.6 - (282.6 * 88) / 100);
	stroke: #C1FF00;
	animation: circleAnim_sp 6s infinite;
}

@keyframes circleAnim_sp {
	0% {
		stroke-dasharray: 35 219.9;
	}

	60% {
		stroke-dasharray: 219.9 219.9;
	}

	80% {
		stroke-dasharray: 219.9 219.9;
	}

	100% {
		stroke-dasharray: 35 219.9;
	}
}

@keyframes circleAnim_pc {
	0% {
		stroke-dasharray: 31 282.6;
		/* スタートは0% */
	}

	60% {
		stroke-dasharray: 282.6 282.6;
		/* 88%に達するまで進む */
	}

	80% {
		stroke-dasharray: 282.6 282.6;
		/* 88%の位置で待機 */
	}

	100% {
		stroke-dasharray: 35 282.6;
		/* 0%に戻る */
	}
}

.circle svg {
	transform: rotate(-90deg);
}

/* チャート */
.graph-bg {
	width: 90px;
	height: 85px;
	/* margin: 7.5rem auto; */
	background: url("../images/front/bg_graph01.svg") no-repeat center/contain;
	position: relative;
}

.pentagon01 {
	clip-path: polygon(50% 17%, 91% 37%, 80% 92%, 26% 85%, 10% 37%);
	margin: 0 auto;
	width: 90px;
	height: 85px;
	background: rgba(193, 255, 0, 0.7);
	animation: graphAnim01 9s infinite;
	opacity: 1;
	position: absolute;
	top: 3px;
	left: 0;
	right: 0;
	margin: auto;
}


@keyframes graphAnim01 {
	0% {
		clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
		/* 中央で開始 */
	}

	30% {
		clip-path: polygon(50% 17%, 91% 37%, 80% 92%, 26% 85%, 10% 37%)
			/* 第1の最大サイズ */
	}

	50% {
		clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
		/* 再び小さく */
	}

	70% {
		clip-path: polygon(50% 8%, 82% 40%, 80% 91%, 25% 85%, 1% 34%)
			/* 第2の最大サイズ */
			/* 第2の最大サイズ */
	}

	100% {
		clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
		/* 再び小さく */
	}
}

/* 棒グラフ */
.bar-graph-wrap {
	width: 90px;
	height: 90px;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-items: end;
}

.bar-graph-wrap .graph {
	width: 21px;
	background: #C1FF00;
	height: 100%;
	animation: graphAnim 7s infinite;
}

.bar-graph-wrap .graph:first-child {
	background: #808080;
	margin-left: 0;
	height: 40%;
}

.bar-graph-wrap .graph:nth-child(2) {
	background: #0000FF;
	height: 80%;
}

.bar-graph-wrap .graph:last-child {
	margin-right: 0;
}

@keyframes graphAnim {
	0% {
		transform: translateY(100%);
	}

	50% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(100%);
	}
}


/*==================
front epic_area pc
====================*/
@media (min-width: 600px) {
	.epic_area {
		padding: 19rem 1.5rem 20rem;
		position: relative;
	}

	.logo_symbol01 {
		top: -18rem;
		width: 250px;
	}

	.epic_area ul.flex_b {
		max-width: 1280px;
		margin-top: -13rem;
	}

	.epic_area li {
		margin-bottom: 0;
	}

	/* ball_grid */
	.ball_grid {
		width: 130px;
		height: 130px;
	}

	.ball {
		width: 30px;
		height: 30px;
	}

	.ball_block {
		margin-bottom: 1.9rem;
	}

	.ball_block:last-child {
		margin-bottom: 0;
	}

	.blank_space {
		width: 230px;
	}

	/* 円グラフ */
	.circle svg {
		width: 130px;
		height: 130px;
	}

	.circle circle {
		stroke-width: 30;
		stroke-dasharray: 282.6;
	}

	.circle circle.line {
		stroke-dashoffset: calc(282.6 - (282.6 * 88) / 100);
		animation: circleAnim_pc 6s infinite;
	}

	/* チャート */
	.graph-bg {
		width: 130px;
		height: 130px;
	}

	.pentagon01 {
		width: 130px;
		height: 130px;
		top: 6px;
	}

	/* 棒グラフ */
	.bar-graph-wrap {
		width: 130px;
		height: 130px;
	}

	.bar-graph-wrap .graph {
		width: 30px;
	}
}

@media screen and (min-width: 600px) and (max-width: 800px) {
	.epic_area ul.flex_b {
		margin-top: 5rem;
	}

	.blank_space {
		display: none;
	}
}

/*==================
front info sp
====================*/
.info {
	background: url(../images/front/bg_info01_sp.jpg) no-repeat center;
	background-size: cover;
	position: relative;
	padding: 9rem 1.5rem;
}

.info .logo02 {
	display: block;
	width: 230px;
	margin: 0 auto 3rem;
}

.info table {
	position: relative;
}

.info table::before {
	content: "";
	background: #C1FF00;
	width: 6.06%;
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
}

.info table::after {
	content: "";
	background: #CCCCCC;
	width: 90.91%;
	height: 1px;
	position: absolute;
	top: 0;
	right: 0;
}

.info tr {
	border-bottom: dotted 1px #808080;
	display: block;
	padding: 2rem 1rem;
	line-height: 2;
}

.info th {
	text-align: left;
	padding-bottom: 1rem;
}

@media screen and (max-width: 599px) {
	.info th,
	.info td {
		display: block;
		width: 100%;
	}

	.info th {
		color: #C1FF00;
	}

	.info tr a {
		text-decoration: underline;
	}
}
/*==================
front info pc
====================*/
@media (min-width: 600px) {
	.info {
		background: url(../images/front/bg_info01_pc.jpg) no-repeat center;
		background-size: cover;
		padding: 16.8rem 1.5rem 13rem;
	}

	.info_block {
		max-width: 515px;
		margin: 0 0 0 auto;
	}

	.info table {
		width: 100%;
	}

	.info_inner {
		max-width: 1300px;
		margin: 0 auto;
	}

	.info tr {
		padding: 1.5rem 1rem;
	}

	.info th {
		width: 7rem;
		padding-bottom: 0;
		vertical-align: middle;
	}

	.info table::before {
		width: 4.06%;
	}

	.info table::after {
		width: 93.5%;
	}

	.info .logo02 {
		width: 260px;
		margin: 0 auto 1.5rem 0;
	}
}