/*!
Scrollin.css (fluffy fadein): https://codepen.io/sarap422/pen/dydBjPY
Author: sarap422
Description: You know why they call it that. It has no particular meaning.
Version: 0.231003%
License: Released under the MIT license.
License URI: https://opensource.org/licenses/MIT
*/

/* ■フェードイン
-------------------------------------- */
/* ベーススタイル */
.scroll-fadeIn,
.scroll-fadeInBottom,
.scroll-fadeInTop,
.scroll-fadeInLeft,
.scroll-fadeInRight {
	opacity: 0;
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

.scroll-fadeInBottom {
	transform: translateY(100px);
}

.scroll-fadeInTop {
	transform: translateY(-100px);
}

.scroll-fadeInLeft {
	transform: translateX(-100px);
}

.scroll-fadeInRight {
	transform: translateX(100px);
}

/* アニメーションキーフレーム定義 */
@keyframes fadeIn {
	100% {
		opacity: 1;
		transform: translate(0);
	}
}

/* .is-scloaded */
:is(.scroll-fadeIn,
	.scroll-fadeInBottom,
	.scroll-fadeInTop,
	.scroll-fadeInLeft,
	.scroll-fadeInRight).is-scloaded {
	animation-name: fadeIn;
}




/* ■ブラーイン
-------------------------------------- */
/* ベーススタイル */
.scroll-blurIn,
.scroll-blurInBottom,
.scroll-blurInTop,
.scroll-blurInLeft,
.scroll-blurInRight {
	filter: blur(4px) opacity(0);
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

.scroll-blurInBottom {
	transform: translateY(100px);
}

.scroll-blurInTop {
	transform: translateY(-100px);
}

.scroll-blurInLeft {
	transform: translateX(-100px);
}

.scroll-blurInRight {
	transform: translateX(100px);
}

/* アニメーションキーフレーム定義 */
@keyframes blurIn {
	100% {
		filter: blur(0) opacity(1);
		transform: translate(0);
	}
}

/* .is-scloaded */
:is(.scroll-blurIn,
	.scroll-blurInBottom,
	.scroll-blurInTop,
	.scroll-blurInLeft,
	.scroll-blurInRight).is-scloaded {
	animation-name: blurIn;
}




/* ■背景色が変化
-------------------------------------- */
/* ベーススタイル */
.scroll-bgFadeIn,
.scroll-bgInBottom,
.scroll-bgInLeft,
.scroll-bgOpenIn {
	position: relative;
	z-index: 1;
}

:is(.scroll-bgFadeIn,
	.scroll-bgInBottom,
	.scroll-bgInLeft,
	.scroll-bgOpenIn)::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: hsla(53, 100%, 74%, 1);
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

/* 背景色：フェードイン */
.scroll-bgFadeIn::before {
	opacity: 0;
}

/* 背景色：下から */
.scroll-bgInBottom::before {
	transform-origin: 0% 100%;
	transform: scaleY(0);
}

/* 背景色：左から */
.scroll-bgInLeft::before {
	transform-origin: 0% 50%;
	transform: scaleX(0);
}

/* 背景色：中央から */
.scroll-bgOpenIn::before {
	transform-origin: 50% 50%;
	transform: scaleX(0);
}

/* アニメーションキーフレーム定義 */
@keyframes bgInBefore {
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* .is-scloaded */
:is(.scroll-bgFadeIn,
	.scroll-bgInBottom,
	.scroll-bgInLeft,
	.scroll-bgOpenIn).is-scloaded::before {
	animation-name: bgInBefore;
}




/* ■ムーブイン
-------------------------------------- */
/* ベーススタイル */
.scroll-moveInBottom,
.scroll-moveInTop,
.scroll-moveInLeft,
.scroll-moveInRight {
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

.scroll-moveInBottom {
	transform: translateY(0.3em);
}

.scroll-moveInTop {
	transform: translateY(-0.3em);
}

.scroll-moveInLeft {
	transform: translateX(-0.3em);
}

.scroll-moveInRight {
	transform: translateX(0.3em);
}

/* アニメーションキーフレーム定義 */
@keyframes moveIn {
	100% {
		transform: translate(0);
	}
}

/* .is-scloaded */
:is(.scroll-moveInBottom,
	.scroll-moveInTop,
	.scroll-moveInLeft,
	.scroll-moveInRight).is-scloaded {
	animation-name: moveIn;
}




/* ■幕がかかってから消える
-------------------------------------- */
/* ベーススタイル */
.scrapper-coat {
position: relative;
overflow: hidden;
width: 100%;
}

.scroll-coatInBottomOut,
.scroll-coatInLeftOut,
.scroll-coatInRightOut {
	position: relative;
	display: inline-block;
	opacity: 0;
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

:is(.scroll-coatInBottomOut,
	.scroll-coatInLeftOut,
	.scroll-coatInRightOut)::after {
	content: "";
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #333;
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

/* 幕：下から上 */
.scroll-coatInBottomOut {
	transform: translateY(100%);
}

.scroll-coatInBottomOut::after {
	transform-origin: 50% 0%;
	transform: scale(1);
}

/* 幕：左から右 */
.scroll-coatInLeftOut {
	transform: translateX(-100%);
}

.scroll-coatInLeftOut::after {
	transform-origin: 100% 50%;
	transform: scale(1);
}

/* 幕：右から左 */
.scroll-coatInRightOut {
	transform: translateX(100%);
}

.scroll-coatInRightOut::after {
	transform-origin: 0% 50%;
	transform: scale(1);
}

/* アニメーションキーフレーム定義 */
@keyframes coatInOut {
	100% {
		opacity: 1;
		transform: translate(0);
	}
}

@keyframes coatInOutAfterY {
	100% {
		transform: scaleY(0);
	}
}

@keyframes coatInOutAfterX {
	100% {
		transform: scaleX(0);
	}
}

/* .is-scloaded */
:is(.scroll-coatInBottomOut,
	.scroll-coatInLeftOut,
	.scroll-coatInRightOut).is-scloaded {
	animation-name: coatInOut;
}

.scroll-coatInBottomOut.is-scloaded::after {
	animation-name: coatInOutAfterY;
}

:is(.scroll-coatInLeftOut,
	.scroll-coatInRightOut).is-scloaded::after {
	animation-name: coatInOutAfterX;
}




/* 幕：左下から右上 */
:is(.scroll-coatInBottomLeftOut,
	.scroll-coatInBottomRightOut)::after {
	content: "";
	position: absolute;
	z-index: 10;
	background-color: #333;
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

/* 幕：左下から右上 */
.scroll-coatInBottomLeftOut {
	transform: translate(0);
}

.scroll-coatInBottomLeftOut::after {
	width: 141.4%;
	height: 141.4%;
	top: 0;
	left: 50%;
	transform-origin: 100% 0%;
	transform: rotateZ(45deg) scale(2.414);
}

/* 幕：右下から左上 */
.scroll-coatInBottomRightOut {
	transform: translate(0);
}

.scroll-coatInBottomRightOut::after {
	width: 141.4%;
	height: 141.4%;
	top: 0;
	right: 50%;
	transform-origin: 0% 0%;
	transform: rotateZ(-45deg) scale(2.414);
}

/* アニメーションキーフレーム定義 */
@keyframes coatInBottomLeftOutAfter {
	99% {
		transform: rotateZ(45deg) scale(0.514);
	}

	100% {
		transform: rotateZ(45deg) scale(0);
	}
}

@keyframes coatInBottomRightOutAfter {
	99% {
		transform: rotateZ(-45deg) scale(0.514);
	}

	100% {
		transform: rotateZ(-45deg) scale(0);
	}
}

/* .is-scloaded */
.scroll-coatInBottomLeftOut.is-scloaded::after {
	animation-name: coatInBottomLeftOutAfter;
}

.scroll-coatInBottomRightOut.is-scloaded::after {
	animation-name: coatInBottomRightOutAfter;
}




/* ■幕が消える
-------------------------------------- */
/* ベーススタイル */
.scroll-coatFadeOut,
.scroll-coatOutTop,
.scroll-coatOutBottom,
.scroll-coatOutLeft,
.scroll-coatOutRight {
	position: relative;
}

:is(.scroll-coatFadeOut,
	.scroll-coatOutTop,
	.scroll-coatOutBottom,
	.scroll-coatOutLeft,
	.scroll-coatOutRight)::after {
	content: "";
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #333;
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

/* 幕消去：上へ消える */
.scroll-coatOutTop::after {
	transform-origin: 50% 0%;
}

/* 幕消去：下へ消える */
.scroll-coatOutBottom::after {
	transform-origin: 0% 100%;
}

/* 幕消去：左へ消える */
.scroll-coatOutLeft::after {
	transform-origin: 0% 50%;
}

/* 幕消去：右へ消える */
.scroll-coatOutRight::after {
	transform-origin: 100% 50%;
}

/* アニメーションキーフレーム定義 */
@keyframes coatFadeOutAfter {
	100% {
		opacity: 0;
	}
}

@keyframes coatOutAfterY {
	100% {
		transform: scaleY(0);
	}
}

@keyframes coatOutAfterX {
	100% {
		transform: scaleX(0);
	}
}

/* .is-scloaded */
.scroll-coatFadeOut.is-scloaded::after {
	animation-name: coatFadeOutAfter;
}

:is(.scroll-coatOutTop,
	.scroll-coatOutBottom).is-scloaded::after {
	animation-name: coatOutAfterY;
}

:is(.scroll-coatOutLeft,
	.scroll-coatOutRight).is-scloaded::after {
	animation-name: coatOutAfterX;
}





/* ■ブラーが消える
-------------------------------------- */
/* ベーススタイル */
.scroll-blurFadeOut,
.scroll-blurOutTop,
.scroll-blurOutBottom,
.scroll-blurOutLeft,
.scroll-blurOutRight {
	position: relative;
}

:is(.scroll-blurFadeOut,
	.scroll-blurOutTop,
	.scroll-blurOutBottom,
	.scroll-blurOutLeft,
	.scroll-blurOutRight)::after {
	content: "";
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

/* ブラー消去：上へ消える */
.scroll-blurOutTop::after {
	transform-origin: 50% 0%;
}

/* ブラー消去：下へ消える */
.scroll-blurOutBottom::after {
	transform-origin: 0% 100%;
}

/* ブラー消去：左へ消える */
.scroll-blurOutLeft::after {
	transform-origin: 0% 50%;
}

/* ブラー消去：右へ消える */
.scroll-blurOutRight::after {
	transform-origin: 100% 50%;
}

/* .is-scloaded */
.scroll-blurFadeOut.is-scloaded::after {
	animation-name: coatFadeOutAfter;
}

:is(.scroll-blurOutTop,
	.scroll-blurOutBottom).is-scloaded::after {
	animation-name: coatOutAfterY;
}

:is(.scroll-blurOutLeft,
	.scroll-blurOutRight).is-scloaded::after {
	animation-name: coatOutAfterX;
}




/* ■グラデーションマスク
-------------------------------------- */
.scroll-mirageInBottom,
.scroll-mirageInTop,
.scroll-mirageInRight,
.scroll-mirageInLeft {
	position: relative;
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

/* 下から上へ消える */
.scroll-mirageInBottom {
	-webkit-mask: no-repeat 50% -100%;
	mask: no-repeat 50% 200%;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 50%, rgba(0, 0, 0, 1) 100%);
	mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-size: 100% 200%;
	mask-size: 100% 200%;
}

/* 上から下へ消える */
.scroll-mirageInTop {
	-webkit-mask: no-repeat 50% 200%;
	mask: no-repeat 50% 200%;
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-size: 100% 200%;
	mask-size: 100% 200%;
}

/* 右から左へ消える */
.scroll-mirageInRight {
	-webkit-mask: no-repeat -100% 50%;
	mask: no-repeat -100% 50%;
	-webkit-mask-image: linear-gradient(to Right, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
	mask-image: linear-gradient(to Right, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
	-webkit-mask-size: 200% 100%;
	mask-size: 200% 100%;
}

/* 左から右へ消える */
.scroll-mirageInLeft {
	-webkit-mask: no-repeat 200% 50%;
	mask: no-repeat 200% 50%;
	-webkit-mask-image: linear-gradient(to Right, black 0%, black 50%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(to Right, black 0%, black 50%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-size: 200% 100%;
	mask-size: 200% 100%;
}

/* アニメーションキーフレーム定義 */
@keyframes mirageInBottom {
	100% {
		-webkit-mask-position: 50% 100%;
		mask-position: 50% 100%;
	}
}

@keyframes mirageInTop {
	100% {
		-webkit-mask-position: 50% 0%;
		mask-position: 50% 0%;
	}
}

@keyframes mirageInRight {
	100% {
		-webkit-mask-position: 100% 50%;
		mask-position: 100% 50%;
	}
}

@keyframes mirageInLeft {
	100% {
		-webkit-mask-position: 0% 50%;
		mask-position: 0% 50%;
	}
}

/* .is-scloaded */
.scroll-mirageInBottom.is-scloaded {
	animation-name: mirageInBottom;
}

.scroll-mirageInTop.is-scloaded {
	animation-name: mirageInTop;
}

.scroll-mirageInRight.is-scloaded {
	animation-name: mirageInRight;
}

.scroll-mirageInLeft.is-scloaded {
	animation-name: mirageInLeft;
}




/* ■背景色のある文字
-------------------------------------- */
/* ベーススタイル */
.scrapper-tepraInLeft,
.scrapper-tepraInRight,
.scrapper-tepraInTopLeft,
.scrapper-tepraInTopRight {
	position: relative;
	overflow: hidden;
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

/* 背景色：左から */
.scrapper-tepraInLeft {
	height: 3em;
	margin-right: auto;
	width: 0%;
	margin-bottom: 2px;
}

.scrapper-tepraInLeft .scroll-tepraInLeft {
	position: absolute;
	left: 0;
	line-height: 1;
	white-space: nowrap;
}

/* 背景色：右から */
.scrapper-tepraInRight {
	height: 3em;
	margin-left: auto;
	width: 0%;
	margin-bottom: 2px;
}

.scrapper-tepraInRight .scroll-tepraInRight {
	position: absolute;
	right: 0;
	line-height: 1;
	white-space: nowrap;
}

/* 背景色（縦書き）：左上から */
.overScrapper-tepraInTopLeft {
	writing-mode: vertical-lr;
}

.scrapper-tepraInTopLeft {
	margin-left: 2px;
	height: 0%;
}

.scroll-tepraInTopLeft {
	white-space: nowrap;
}

/* 背景色（縦書き）：右上から */
.overScrapper-tepraInTopRight {
	writing-mode: vertical-rl;
}

.scrapper-tepraInTopRight {
	margin-right: 2px;
	height: 0%;
}

.scroll-tepraInTopRight {
	white-space: nowrap;
}

/* アニメーションキーフレーム定義 */
@keyframes tepraInWidth {
	100% {
		width: 100%;
	}
}

/* .is-scloaded */
:is(.scrapper-tepraInLeft,
	.scrapper-tepraInRight).is-scloaded {
	animation-name: tepraInWidth;
}

@keyframes tepraInHeight {
	100% {
		height: 100%;
	}
}

/* .is-scloaded */
:is(.scrapper-tepraInTopLeft,
	.scrapper-tepraInTopRight).is-scloaded {
	animation-name: tepraInHeight;
}




/* ■縮小、拡大しながらイン・アウト
-------------------------------------- */
/* ベーススタイル */
:is(.scroll-growIn,
	.scroll-growOut,
	.scroll-shrinkIn,
	.scroll-shrinkOut) {
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

.scroll-growIn {
	transform: scale(0.01);
}

.scroll-growOut {
	transform: scale(1);
}

.scroll-shrinkIn {
	transform: scale(1.1);
}

.scroll-shrinkOut {
	transform: scale(1);
}

/* アニメーションキーフレーム定義 */
@keyframes growIn {
	100% {
		transform: scale(1);
	}
}

@keyframes growOut {
	100% {
		opacity: 0;
		transform: scale(1.1);
	}
}

@keyframes shrinkIn {
	100% {
		transform: scale(1);
	}
}

@keyframes shrinkOut {
	100% {
		opacity: 0;
		transform: scale(0);
	}
}

/* .is-scloaded */
.scroll-growIn.is-scloaded {
	animation-name: growIn;
}

.scroll-growOut.is-scloaded {
	animation-name: growOut;
}

.scroll-shrinkIn.is-scloaded {
	animation-name: shrinkIn;
}

.scroll-shrinkOut.is-scloaded {
	animation-name: shrinkOut;
}




/* ■ワイプイン（透明→不透明）
-------------------------------------- */
/* ベーススタイル */
:is(.scroll-wipeInCentral,
	.scroll-wipeInBottom,
	.scroll-wipeInTop,
	.scroll-wipeInLeft,
	.scroll-wipeInRight) {
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

/* ワイプイン：中央から */
.scroll-wipeInCentral {
	clip-path: circle(0% at 50% 50%);
}

/* ワイプイン：下から */
.scroll-wipeInBottom {
	clip-path: inset(100% 0% 0% 0%);
}

/* ワイプイン：上から */
.scroll-wipeInTop {
	clip-path: inset(0% 0% 100% 0%);
}

/* ワイプイン：左から */
.scroll-wipeInLeft {
	clip-path: inset(0% 100% 0% 0%);
}

/* ワイプイン：右から */
.scroll-wipeInRight {
	clip-path: inset(0% 0% 0% 100%);
}

/* アニメーションキーフレーム定義 */
@keyframes wipeInCentral {
	100% {
		clip-path: circle(100% at 50% 50%);
	}
}

@keyframes wipeInInset {
	100% {
		clip-path: inset(-999px);
	}
}

/* .is-scloaded */
.scroll-wipeInCentral.is-scloaded {
	animation-name: wipeInCentral;
}

:is(.scroll-wipeInBottom,
	.scroll-wipeInTop,
	.scroll-wipeInLeft,
	.scroll-wipeInRight).is-scloaded {
	animation-name: wipeInInset;
}




/* ■フリップイン
-------------------------------------- */
/* ベーススタイル */
:is(.scroll-flipInXUp,
	.scroll-flipInXDown,
	.scroll-flipInYFore,
	.scroll-flipInYBack) {
	/* anime: name | duration | easing | delay */
	animation: none 1s ease-out 0.25s;
	animation-fill-mode: forwards;
}

/* フリップイン：X軸 */
.scroll-flipInXUp,
.scroll-flipInXDown {
	transform: rotateX(90deg);
}

@keyframes flipInXUp {
	100% {
		transform: rotateX(180deg);
	}
}

@keyframes flipInXDown {
	100% {
		transform: rotateX(0deg);
	}
}

/* .is-scloaded */
.scroll-flipInXUp.is-scloaded {
	animation-name: flipInXUp;
}

.scroll-flipInXDown.is-scloaded {
	animation-name: flipInXDown;
}


/* フリップイン：Y軸 */
.scroll-flipInYFore,
.scroll-flipInYBack {
	transform: rotateY(90deg);
}

@keyframes flipInYFore {
	100% {
		transform: rotateY(0deg);
	}
}

@keyframes flipInYBack {
	100% {
		transform: rotateY(180deg);
	}
}

/* .is-scloaded */
.scroll-flipInYFore.is-scloaded {
	animation-name: flipInYFore;
}

.scroll-flipInYBack.is-scloaded {
	animation-name: flipInYBack;
}




/* ■回転
-------------------------------------- */
/* ベーススタイル */
:is(.scroll-rotationDext,
	.scroll-rotationLevo,
	.scroll-clockationDext,
	.scroll-clockationLevo) {
	/* anime: name | duration | easing | delay */
	animation: none 5.5s linear 0.25s;
	animation-iteration-count: infinite;
}

/* 順回り */
@keyframes rotationFore {

	0%,
	100% {
		transform: rotateZ(0deg);
	}

	100% {
		transform: rotateZ(359deg);
	}
}

.scroll-rotationDext.is-scloaded,
.scroll-clockationDext.is-scloaded {
	animation-name: rotationFore;
}

/* 逆回り */
@keyframes rotationBack {

	0%,
	100% {
		transform: rotateZ(0deg);
	}

	100% {
		transform: rotateZ(-359deg);
	}
}

.scroll-rotationLevo.is-scloaded,
.scroll-clockationLevo.is-scloaded {
	animation-name: rotationBack;
}




/* ■時計の針回転
-------------------------------------- */
.clocker {
	display: inline-block;
}

.clocker.bezelfwv1 {
	border-radius: 999em;
	background: url("https://i.gyazo.com/a91883f8ce60249fed8e92dd27aa5770.png") no-repeat;
	background-size: contain;
}

:is(.clocker.posfwv1,
	.clocker.posfwv2,
	.clocker.posfwv3) {
	position: relative;
}

.clocker.posfwv1 {
	z-index: 10;
	width: 300px;
	height: 300px;
}

.clocker.posfwv2 {
	position: absolute;
	z-index: 9;
	top: -10%;
	left: 15%;
	right: 0px;
	margin: auto;
	width: 360px;
	height: 360px;
}

.clocker.posfwv3 {
	position: absolute;
	z-index: 8;
	top: 20%;
	left: 75%;
	margin: auto;
	width: 160px;
	height: 160px;
}

/* 中心の軸となる部分 */
.clocker .clocker-pinion {
	position: relative;
	width: 100%;
	height: 100%;
}

/* 時計の針の位置 */
.clocker .clocker-pinion {
	position: relative;
	width: 100%;
	height: 100%;
}

/* 1時から12時までの回転角度 */
.clocker .clocker-pinion {
	position: relative;
	width: 100%;
	height: 100%;
}

.clocker .clocker-pinion.oclock-1 {
	-webkit-transform: rotateZ(30deg);
	transform: rotateZ(30deg);
}

.clocker .clocker-pinion.oclock-2 {
	-webkit-transform: rotateZ(60deg);
	transform: rotateZ(60deg);
}

.clocker .clocker-pinion.oclock-3 {
	-webkit-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
}

.clocker .clocker-pinion.oclock-4 {
	-webkit-transform: rotateZ(120deg);
	transform: rotateZ(120deg);
}

.clocker .clocker-pinion.oclock-5 {
	-webkit-transform: rotateZ(150deg);
	transform: rotateZ(150deg);
}

.clocker .clocker-pinion.oclock-6 {
	-webkit-transform: rotateZ(180deg);
	transform: rotateZ(180deg);
}

.clocker .clocker-pinion.oclock-7 {
	-webkit-transform: rotateZ(210deg);
	transform: rotateZ(210deg);
}

.clocker .clocker-pinion.oclock-8 {
	-webkit-transform: rotateZ(240deg);
	transform: rotateZ(240deg);
}

.clocker .clocker-pinion.oclock-9 {
	-webkit-transform: rotateZ(270deg);
	transform: rotateZ(270deg);
}

.clocker .clocker-pinion.oclock-10 {
	-webkit-transform: rotateZ(300deg);
	transform: rotateZ(300deg);
}

.clocker .clocker-pinion.oclock-11 {
	-webkit-transform: rotateZ(330deg);
	transform: rotateZ(330deg);
}

.clocker .clocker-pinion.oclock-12 {
	-webkit-transform: rotateZ(360deg);
	transform: rotateZ(360deg);
}

.clocker .pinionfwv1::after {
	content: "";
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	width: 24%;
	height: 24%;
	border-radius: 999em;
	background: url("https://i.gyazo.com/6a27e734ef65d207a57fcc34e8bba30b.png") no-repeat;
	background-size: contain;
}

.clocker :is(img.clocker-minutehand,
	img.clocker-hourhand) {
	position: absolute;
	bottom: 50%;
	left: calc(50% - 2.5%);
	width: 5%;
	height: auto;
	object-fit: contain;
}

.scroll-clockationDext,
.scroll-clockationLevo {
	transform-origin: 0% 100%;
}




/* ■（スクロール等を）促す
------------------------------------*/
/* ベーススタイル */
:is(.scroll-encourationToUp,
	.scroll-encourationToDown,
	.scroll-encourationToFore,
	.scroll-encourationToBack) {
	/* anime: name | duration | easing | delay */
	animation: none 1s var(--ease-in-out-expo) 0.25s;
	animation-iteration-count: infinite;
}

/* 上方向 */
.scroll-encourationToUp {
	clip-path: inset(100% 0% 0% 0%);
}

@keyframes encourationToUp {
	50% {
		clip-path: inset(-1em);
	}

	100% {
		clip-path: inset(0% 0% 100% 0%);
	}
}

.scroll-encourationToUp.is-scloaded {
	animation-name: encourationToUp;
}

/* 下方向 */
.scroll-encourationToDown {
	clip-path: inset(0% 0% 100% 0%);
}

@keyframes encourationToDown {
	50% {
		clip-path: inset(-1em);
	}

	100% {
		clip-path: inset(100% 0% 0% 0%);
	}
}

.scroll-encourationToDown.is-scloaded {
	animation-name: encourationToDown;
}

/* 順方向 */
.scroll-encourationToFore {
	clip-path: inset(0% 100% 0% 0%);
}

@keyframes encourationToFore {
	50% {
		clip-path: inset(-1em);
	}

	100% {
		clip-path: inset(0% 0% 0% 100%);
	}
}

.scroll-encourationToFore.is-scloaded {
	animation-name: encourationToFore;
}

/* 逆方向 */
.scroll-encourationToBack {
	clip-path: inset(0% 0% 0% 100%);
}

@keyframes encourationToBack {
	50% {
		clip-path: inset(-1em);
	}

	100% {
		clip-path: inset(0% 100% 0% 0%);
	}
}

.scroll-encourationToBack.is-scloaded {
	animation-name: encourationToBack;
}




/* ■円グラフ
------------------------------------*/
.chart-donut {
	position: relative;
	display: inline-block;
	width: 200px;
	height: 200px;
}

.chart-donut .chart-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.chart-donut .chart-wrapper::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 1rem 2.5rem 1rem;
	border-color: transparent transparent hsl(220, 71%, 28%) transparent;
	position: absolute;
	z-index: 20;
	bottom: 16%;
	left: 6%;
	transform: rotate(-120deg);
	transform-origin: bottom center;
}

.chart-donut svg {
	position: absolute;
	z-index: 10;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible !important;
}

.chart-donut svg circle {
	position: relative;
	fill: none;
	stroke-width: 1.5rem;
	stroke: #f3f3f3;
	/* scroll-chartationDonut x 3.142 */
	stroke-dasharray: calc(100% * 3.142);
	stroke-dashoffset: 0;
	stroke-linecap: butt;
}

.chart-donut .chart-central {
	position: absolute;
	z-index: 30;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* 見出し（h1, h2, h3, h4, h5, h6） */
.chart-donut .chart-central :is(h1, h2, h3, h4, h5, h6) {
	width: auto;
}

/* .scroll-chartation（ベーススタイル） */
.scroll-chartation .chartbar-thumb {
	/* anime: name | duration | easing | delay */
	animation: none 1s linear 0.25s;
	animation-fill-mode: forwards;
}

.chart-donut.scroll-chartation .chartbar-thumb {
	stroke: hsl(220, 71%, 28%);
	stroke-dasharray: 0 calc(100% * 3.142);
}

@keyframes chartationDonut {

	99%,
	to {
		stroke-dasharray: calc(100% * 3.142) calc(100% * 3.142);
	}
}

/* .is-scloaded */
.chart-donut.scroll-chartation.is-scloaded .chartbar-thumb {
	animation-name: chartationDonut;
}





/* ■画像ループ：上方向、下方向
-------------------------------------- */
.scrapper-loop {
	overflow: hidden;
}

/* ベーススタイル */
:is(.scroll-looptationToUp,
	.scroll-looptationToDown,
	.scroll-looptationToFore,
	.scroll-looptationToBack) .loop-list:first-child {
	/* anime: name | duration | easing | delay */
	animation: none 1s linear -0.5s;
	animation-iteration-count: infinite;
}

:is(.scroll-looptationToUp,
	.scroll-looptationToDown,
	.scroll-looptationToFore,
	.scroll-looptationToBack) .loop-list:last-child {
	/* anime: name | duration | easing | delay */
	animation: none 1s linear 0s;
	animation-iteration-count: infinite;
}

:is(.scroll-looptationToUp,
	.scroll-looptationToDown) {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	max-height: 100vh;
	overflow: hidden;
}

:is(.scroll-looptationToUp,
	.scroll-looptationToDown) .loop-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation-duration: 1s;
}

:is(.scroll-looptationToUp,
	.scroll-looptationToDown) .loop-list img {
	height: auto;
	object-fit: cover;
}

/* 上方向 */
.scroll-looptationToUp .loop-list:first-child {
	transform: translateY(100%);
}

.scroll-looptationToUp .loop-list:last-child {
	transform: translateY(0);
}

@keyframes looptationToUpFirst {
	100% {
		transform: translateY(-100%);
	}
}

@keyframes looptationToUpLast {
	100% {
		transform: translateY(-200%);
	}
}

/* .is-scloaded */
.scroll-looptationToUp.is-scloaded .loop-list:first-child {
	animation-name: looptationToUpFirst;
}

.scroll-looptationToUp.is-scloaded .loop-list:last-child {
	animation-name: looptationToUpLast;
}

/* 下方向 */
.scroll-looptationToDown .loop-list:first-child {
	transform: translateY(-100%);
}

.scroll-looptationToDown .loop-list:last-child {
	transform: translateY(-200%);
}

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

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

/* .is-scloaded */
.scroll-looptationToDown.is-scloaded .loop-list:first-child {
	animation-name: looptationToDownFirst;
}

.scroll-looptationToDown.is-scloaded .loop-list:last-child {
	animation-name: looptationToDownLast;
}




/* ■画像ループ：順方向、逆方向
-------------------------------------- */
:is(.scroll-looptationToFore,
	.scroll-looptationToBack) {
	display: flex;
	flex-direction: row;
	width: 200%;
	height: 100%;
	overflow: hidden;
}

:is(.scroll-looptationToFore,
	.scroll-looptationToBack) .loop-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	white-space: nowrap;
}

:is(.scroll-looptationToFore,
	.scroll-looptationToBack) picture.loop-list {
	width: 100%;
}

:is(.scroll-looptationToFore,
	.scroll-looptationToBack) .loop-list img {
	width: auto;
	object-fit: cover;
}

:is(.scroll-looptationToFore,
	.scroll-looptationToBack) .loop-list span {
	margin-right: 0.4em;
}

/* 順方向 */
.scroll-looptationToFore .loop-list:first-child {
	transform: translateX(-100%);
}

.scroll-looptationToFore .loop-list:last-child {
	transform: translateX(-200%);
}

@keyframes looptationToForeFirst {
	100% {
		transform: translateX(100%);
	}
}

@keyframes looptationToForeLast {
	100% {
		transform: translateX(0);
	}
}

/* .is-scloaded */
.scroll-looptationToFore.is-scloaded .loop-list:first-child {
	animation-name: looptationToForeFirst;
}

.scroll-looptationToFore.is-scloaded .loop-list:last-child {
	animation-name: looptationToForeLast;
}

/* 逆方向 */
.scroll-looptationToBack .loop-list:first-child {
	transform: translateX(100%);
}

.scroll-looptationToBack .loop-list:last-child {
	transform: translateX(0);
}

@keyframes looptationToBackFirst {
	100% {
		transform: translateX(-100%);
	}
}

@keyframes looptationToBackLast {
	100% {
		transform: translateX(-200%);
	}
}

/* .is-scloaded */
.scroll-looptationToBack.is-scloaded .loop-list:first-child {
	animation-name: looptationToBackFirst;
}

.scroll-looptationToBack.is-scloaded .loop-list:last-child {
	animation-name: looptationToBackLast;
}




/* ■.infinited（無限化）
-------------------------------------- */
[class*="scroll-"].infinited.is-scloaded {
	animation-iteration-count: infinite;
}




//scroll-class（SCSS）
$scroll-class: '.scroll-fadeIn, .scroll-fadeInBottom, .scroll-fadeInTop, .scroll-fadeInLeft, .scroll-fadeInRight, .scroll-blurIn, .scroll-blurInBottom, .scroll-blurInTop, .scroll-blurInLeft, .scroll-blurInRight, .scroll-bgFadeIn, .scroll-bgInBottom, .scroll-bgInLeft, .scroll-bgInRight, .scroll-coatInBottomOut, .scroll-coatInLeftOut, .scroll-coatInRightOut, .scroll-coatInBottomLeftOut, .scroll-coatInBottomRightOut, .scroll-coatInBottomOut, .scroll-coatInLeftOut, .scroll-coatInRightOut, .scroll-coatInBottomLeftOut, .scroll-coatInBottomRightOut, .scroll-coatFadeOut, .scroll-coatOutTop, .scroll-coatOutBottom, .scroll-coatOutLeft, .scroll-coatOutRight,.scroll-mirageInBottom, .scroll-mirageInTop, .scroll-mirageInRight, .scroll-mirageInLeft, .scrapper-tepraInLeft, .scrapper-tepraInRight, .scrapper-tepraInTopLeft, .scrapper-tepraInTopRight, .scroll-bdfBlurIn, .scroll-growIn, .scroll-growOut, .scroll-shrinkIn, .scroll-shrinkOut, .scroll-wipeInCentral, .scroll-wipeInBottom, .scroll-wipeInTop, .scroll-wipeInLeft, .scroll-wipeInRight, .scroll-flipInXUp, .scroll-flipInXDown, .scroll-flipInYFore, .scroll-flipInYBack, .scroll-rotationDext, .scroll-rotationLevo, .scroll-clockationDext, .scroll-clockationLevo, .scroll-chartation .chartbar-thumb';

//scroll-class::before
$scroll-class-before: '.scroll-coatInBottomOut, .scroll-coatInLeftOut, .scroll-coatInRightOut, .scroll-coatInBottomLeftOut, .scroll-coatInBottomRightOut, .scroll-coatFadeOut, .scroll-coatOutBottom, .scroll-coatOutTop, .scroll-coatOutLeft, .scroll-coatOutRight, .scroll-bgInBottom, .scroll-bgInLeft, .scroll-bgInRight';

//scroll-class::after
$scroll-class-after: '.scroll-bdfBlurIn';

//.loop-list:first-child
$scroll-loop-first: '.scroll-looptationToUp, .scroll-looptationToDown, .scroll-looptationToFore, .scroll-looptationToBack';

//.loop-list:last-child
$scroll-loop-last: '.scroll-looptationToUp, .scroll-looptationToDown, .scroll-looptationToFore, .scroll-looptationToBack';


/* ■.delayed（遅延）
-------------------------------------- */
.delayed-0:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-delay: -0.5s;
	transition-delay: -0.5s;
}

.delayed-0:is(#{$scroll-loop-last}) .loop-list:last-child,
.delayed-0:is(#{$scroll-class}),
.delayed-0:is(#{$scroll-class-before})::before,
.delayed-0:is(#{$scroll-class-after})::after {
	animation-delay: 0s;
	transition-delay: 0s;
}

.delayed-1:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-delay: -0.25s;
	transition-delay: -0.25s;
}

.delayed-1:is(#{$scroll-loop-last}) .loop-list:last-child,
.delayed-1:is(#{$scroll-class}),
.delayed-1:is(#{$scroll-class-before})::before,
.delayed-1:is(#{$scroll-class-after})::after {
	animation-delay: 0.25s;
	transition-delay: 0.25s;
}

.delayed-2:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-delay: 0s;
	transition-delay: 0s;
}

.delayed-2:is(#{$scroll-loop-last}) .loop-list:last-child,
.delayed-2:is(#{$scroll-class}),
.delayed-2:is(#{$scroll-class-before})::before,
.delayed-2:is(#{$scroll-class-after})::after {
	animation-delay: 0.5s;
	transition-delay: 0.5s;
}

.delayed-3:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-delay: 0.25s;
	transition-delay: 0.25s;
}

.delayed-3:is(#{$scroll-loop-last}) .loop-list:last-child,
.delayed-3:is(#{$scroll-class}),
.delayed-3:is(#{$scroll-class-before})::before,
.delayed-3:is(#{$scroll-class-after})::after {
	animation-delay: 0.75s;
	transition-delay: 0.75s;
}

.delayed-4:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-delay: 0.5s;
	transition-delay: 0.5s;
}

.delayed-4:is(#{$scroll-loop-last}) .loop-list:last-child,
.delayed-4:is(#{$scroll-class}),
.delayed-4:is(#{$scroll-class-before})::before,
.delayed-4:is(#{$scroll-class-after})::after {
	animation-delay: 1s;
	transition-delay: 1s;
}

.delayed-5:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-delay: 0.75s;
	transition-delay: 0.75s;
}

.delayed-5:is(#{$scroll-loop-last}) .loop-list:last-child,
.delayed-5:is(#{$scroll-class}),
.delayed-5:is(#{$scroll-class-before})::before,
.delayed-5:is(#{$scroll-class-after})::after {
	animation-delay: 1.25s;
	transition-delay: 1.25s;
}

.delayed-6:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-delay: 1s;
	transition-delay: 1s;
}

.delayed-6:is(#{$scroll-loop-last}) .loop-list:last-child,
.delayed-6:is(#{$scroll-class}),
.delayed-6:is(#{$scroll-class-before})::before,
.delayed-6:is(#{$scroll-class-after})::after {
	animation-delay: 1.5s;
	transition-delay: 1.5s;
}




/* ■.fasted（duration=速く）
-------------------------------------- */
.fasted-1:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 0.75s;
	animation-delay: -1.125s;
	transition-duration: 0.75s;
	transition-delay: -1.125s;
}

.fasted-1:is(#{$scroll-loop-last}) .loop-list:last-child,
.fasted-1:is(#{$scroll-class}),
.fasted-1:is(#{$scroll-class-before})::before,
.fasted-1:is(#{$scroll-class-after})::after {
	animation-duration: 0.75s;
	transition-duration: 0.75s;
}

.fasted-2:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 0.5s;
	animation-delay: -0.75s;
	transition-duration: 0.5s;
	transition-delay: -0.75s;
}

.fasted-2:is(#{$scroll-loop-last}) .loop-list:last-child,
.fasted-2:is(#{$scroll-class}),
.fasted-2:is(#{$scroll-class-before})::before,
.fasted-2:is(#{$scroll-class-after})::after {
	animation-duration: 0.5s;
	transition-duration: 0.5s;
}

.fasted-3:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 0.25s;
	animation-delay: -0.325s;
	transition-duration: 0.25s;
	transition-delay: -0.325s;
}

.fasted-3:is(#{$scroll-loop-last}) .loop-list:last-child,
.fasted-3:is(#{$scroll-class}),
.fasted-3:is(#{$scroll-class-before})::before,
.fasted-3:is(#{$scroll-class-after})::after {
	animation-duration: 0.25s;
	transition-duration: 0.25s;
}




/* ■.slowed（duration=遅く）
-------------------------------------- */
.slowed-1:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 1.5s;
	animation-delay: -0.75s;
	transition-duration: 1.5s;
	transition-delay: -0.75s;
}

.slowed-1:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-1:is(#{$scroll-class}),
.slowed-1:is(#{$scroll-class-before})::before,
.slowed-1:is(#{$scroll-class-after})::after {
	animation-duration: 1.5s;
	transition-duration: 1.5s;
}

.slowed-2:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 2s;
	animation-delay: -1s;
	transition-duration: 2s;
	transition-delay: -1s;
}

.slowed-2:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-2:is(#{$scroll-class}),
.slowed-2:is(#{$scroll-class-before})::before,
.slowed-2:is(#{$scroll-class-after})::after {
	animation-duration: 2s;
	transition-duration: 2s;
}

.slowed-3:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 3s;
	animation-delay: -1.5s;
	transition-duration: 3s;
	transition-delay: -1.5s;
}

.slowed-3:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-3:is(#{$scroll-class}),
.slowed-3:is(#{$scroll-class-before})::before,
.slowed-3:is(#{$scroll-class-after})::after {
	animation-duration: 3s;
	transition-duration: 3s;
}

.slowed-4:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 4s;
	animation-delay: -2s;
	transition-duration: 4s;
	transition-delay: -2s;
}

.slowed-4:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-4:is(#{$scroll-class}),
.slowed-4:is(#{$scroll-class-before})::before,
.slowed-4:is(#{$scroll-class-after})::after {
	animation-duration: 4s;
	transition-duration: 4s;
}

.slowed-5:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 5s;
	animation-delay: -2.5s;
	transition-duration: 5s;
	transition-delay: -2.5s;
}

.slowed-5:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-5:is(#{$scroll-class}),
.slowed-5:is(#{$scroll-class-before})::before,
.slowed-5:is(#{$scroll-class-after})::after {
	animation-duration: 5s;
	transition-duration: 5s;
}

.slowed-10:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 10s;
	animation-delay: -5s;
	transition-duration: 10s;
	transition-delay: -5s;
}

.slowed-10:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-10:is(#{$scroll-class}),
.slowed-10:is(#{$scroll-class-before})::before,
.slowed-10:is(#{$scroll-class-after})::after {
	animation-duration: 10s;
	transition-duration: 10s;
}

.slowed-20:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 20s;
	animation-delay: -10s;
	transition-duration: 20s;
	transition-delay: -10s;
}

.slowed-20:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-20:is(#{$scroll-class}),
.slowed-20:is(#{$scroll-class-before})::before,
.slowed-20:is(#{$scroll-class-after})::after {
	animation-duration: 20s;
	transition-duration: 20s;
}

.slowed-30:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 30s;
	animation-delay: -15s;
	transition-duration: 30s;
	transition-delay: -15s;
}

.slowed-30:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-30:is(#{$scroll-class}),
.slowed-30:is(#{$scroll-class-before})::before,
.slowed-30:is(#{$scroll-class-after})::after {
	animation-duration: 30s;
	transition-duration: 30s;
}

.slowed-60:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 60s;
	animation-delay: -30s;
	transition-duration: 60s;
	transition-delay: -30s;
}

.slowed-60:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-60:is(#{$scroll-class}),
.slowed-60:is(#{$scroll-class-before})::before,
.slowed-60:is(#{$scroll-class-after})::after {
	animation-duration: 60s;
	transition-duration: 60s;
}

.slowed-90:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 90s;
	animation-delay: -45s;
	transition-duration: 90s;
	transition-delay: -45s;
}

.slowed-90:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-90:is(#{$scroll-class}),
.slowed-90:is(#{$scroll-class-before})::before,
.slowed-90:is(#{$scroll-class-after})::after {
	animation-duration: 90s;
	transition-duration: 90s;
}

.slowed-120:is(#{$scroll-loop-first}) .loop-list:first-child {
	animation-duration: 120s;
	animation-delay: -60s;
	transition-duration: 120s;
	transition-delay: -60s;
}

.slowed-120:is(#{$scroll-loop-last}) .loop-list:last-child,
.slowed-120:is(#{$scroll-class}),
.slowed-120:is(#{$scroll-class-before})::before,
.slowed-120:is(#{$scroll-class-after})::after {
	animation-duration: 120s;
	transition-duration: 120s;
}