:root {
	--theme-color-01: #f1b055;
	--theme-color-02: #5683ba;
	--theme-color-03: #f17255;
	--theme-color-04: #52b573;
}

@media (min-width: 768px) {
	.sp{display: none !important;}
}
@media (max-width: 767px) {
	.pc{display: none !important;}
}

.main{color: #424242; font-family: 'Noto Sans JP', sans-serif;font-weight: 400;overflow: hidden;}
.main img{max-width: 100%;height: auto;vertical-align: top;}
@media only screen and (max-width: 767px) {
	.main{font-size: calc((10/10.5)*100%);}
}

.container{margin: 0 auto;padding: 0 13px;max-width: 1174px;}
@media only screen and (max-width: 767px) {
	.container{margin: 0 25px;padding: 0;max-width: none;}
}

[data-js-anime="slide-in"]{opacity: 0;transform: translateY(50px);transition: opacity .5s ease, transform .5s ease;}
[data-js-anime="slide-in"].is-play{opacity: 1;transform: translateY(0);}
[data-js-anime="rote-left"].is-play{animation: rote-left 1s forwards;transform-origin: center bottom;animation-timing-function: steps(1, start);}
[data-js-anime="rote-right"].is-play{animation: rote-right 1s forwards;transform-origin: center bottom;animation-timing-function: steps(1, start);}
[data-js-anime="in-right"]{transform: rotate(0deg) translateX(20px);}
[data-js-anime="in-right"].is-play{animation: in-right 1s forwards;transform-origin: center bottom;animation-timing-function: steps(1, start);}
[data-js-anime="in-left"]{transform: rotate(0deg) translateX(-20px);}
[data-js-anime="in-left"].is-play{animation: in-left 1s forwards;transform-origin: center bottom;animation-timing-function: steps(1, start);}
[data-js-anime="up-down"].is-play{animation: up-down 1s forwards;transform-origin: center bottom;animation-timing-function: steps(1, start);}
@keyframes rote-left {
	0%{transform: rotate(0deg);}
	25%{transform: rotate(-5deg);}
	50%{transform: rotate(0deg);}
	75%{transform: rotate(-5deg);}
	100%{transform: rotate(0deg);}
}
@keyframes rote-right {
	0%{transform: rotate(0deg);}
	25%{transform: rotate(5deg);}
	50%{transform: rotate(0deg);}
	75%{transform: rotate(5deg);}
	100%{transform: rotate(0deg);}
}
@keyframes in-left {
	0%{transform: rotate(0deg) translateX(-20px);}
	25%{transform: rotate(5deg) translateX(-15px);}
	50%{transform: rotate(0deg) translateX(-10px);}
	75%{transform: rotate(5deg) translateX(-5px);}
	100%{transform: rotate(0deg) translateX(0px);}
}
@keyframes in-right {
	0%{transform: rotate(0deg) translateX(20px);}
	25%{transform: rotate(5deg) translateX(15px);}
	50%{transform: rotate(0deg) translateX(10px);}
	75%{transform: rotate(5deg) translateX(5px);}
	100%{transform: rotate(0deg) translateX(0px);}
}
@keyframes up-down {
	0%{transform: translateY(0px);}
	25%{transform: translateY(10px);}
	50%{transform: translateY(0px);}
	75%{transform: translateY(10px);}
	100%{transform: translateY(0px);}
}