@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');


/*----------------------------------------------------
	☆Reset
----------------------------------------------------*/
body, h1, h2, h3, h4, h5, h6, pre, ul , ol , li, dl, dt, dd, p, img {
	margin:0;
	padding:0;
}
h1, h2, h3, h4, h5, h6{
    font-weight: 500;
}
body {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	color: #2d2d2d;
	background: #fffbf3;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.2em;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
}

#wrapper{
	width: 100%;
    overflow: hidden;
}

body, div, p, span, ul, ol, li, dl, dt, dd, table, tr, th, td, img, header, footer, small, section, a, h1, h2, h3, h4, h5, h6{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
a {
	color:#1e2b3a;
	text-decoration:none;
	cursor:pointer;
	outline:none;
}
a:link {
	color:#000;
	text-decoration:none;
	outline:none;
}
a:hover {
	text-decoration:none;
	outline:none;
}
ul, ol {
	list-style-type:none;
}
a:focus {
  outline: none;
}
img{ 
	vertical-align:bottom;
	-webkit-backface-visibility: hidden;
  	max-width: 100%; /* 親要素の幅を超えない */
  	height: auto;    /* 縦横比を維持 */
}

.pc-none { display: none;}

.sp-none { display: block;}


/*FONT*/
.nowrap{
    white-space: nowrap;
    display: inline-block;
}

.en {
    font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

.deco {
    position: absolute;
    left: 0;
    top: 0;
}

#pagetop {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 10;
    opacity: 0;
    transition: .4s;
    cursor: pointer;
    background: #50c98c;
	visibility: hidden;
	border-radius: 15px 0 0 0;
}

#pagetop::before {
    content: "";
    display: block;
    position: relative;
    background: url(../images/arrow_01.svg) center center / contain no-repeat;
    width: 20%;
    height: 30%;
    left: 40%;
    top: 35%;
}

#pagetop.is-fadein {
    visibility: visible;
    opacity: 1;
}




/*----------------------------------------------------
	☆ANIMATION
----------------------------------------------------*/
#mv .slidein,
.out.slidein,
.out .slidein{
    opacity: 0;
}

#mv .slidein,
.in.slidein,
.in .slidein{
    animation: slidein 0.8s ease forwards;
}

@keyframes slidein{
    0%{ transform: translate(0,10px); opacity: 0; }
    100%{  transform: translate(0,0);opacity: 1;}
}


/*斜め移動*/
#part-time-job #mv .mvInr .imgBox .pattern.deco01 {
	animation: slideinToL .6s ease-in-out forwards;
}
@keyframes slideinToL {
	0% { transform: translate(50%,0); opacity: 0;}
	100% { transform: translate(0,0); opacity: 1;}
}

#part-time-job #mv .mvInr .imgBox .pattern.deco02 {
	animation: slideinToRT .6s ease-in-out forwards;
}
@keyframes slideinToRT {
	0% { transform: translate(-50%,50%); opacity: 0;}
	100% { transform: translate(0,0); opacity: 1;}
}

#part-time-job #mv .mvInr .imgBox .pattern.deco03 {
	animation: slideinToRB .6s ease-in-out forwards;
}
@keyframes slideinToRB {
	0% { transform: translate(-50%,-50%); opacity: 0;}
	100% { transform: translate(0,0); opacity: 1;}
}

/*ぽんっ*/
#part-time-job #mv .mvInr .imgBox .illust.deco01 img,
#part-time-job #mv .mvInr .imgBox .illust.deco02 img {
	opacity: 0;
    display: block;
	animation: popin .5s ease forwards;
}

.popin img {
    opacity: 0;
    transform: scale(0);
}

.in .popin img,
.in.popin img {
    animation: popin .5s ease forwards;
}

@keyframes popin{
    0%{ transform: scale(0); opacity: 0; }
    75%{  transform: scale(1.1);opacity: 1;}
    100%{  transform: scale(1);opacity: 1;}
}

/*落下*/

.in .rakka img,
.in.rakka img {
    opacity: 0;
    transform: scale(0);
}

.in .rakka img,
.in.rakka img {
	animation: rakka 0.6s cubic-bezier(.3,1.4,.5,1) forwards;
}


@keyframes rakka{
0% { transform: translate(0,-20%); opacity: 0;}
100% { transform: translate(0,0); opacity: 1;}
}



.delay01{ animation-delay: 0.1s!important;}
.delay02{ animation-delay: 0.2s!important;}
.delay03{ animation-delay: 0.3s!important;}
.delay04{ animation-delay: 0.4s!important;}
.delay05{ animation-delay: 0.5s!important;}
.delay06{ animation-delay: 0.6s!important;}
.delay07{ animation-delay: 0.7s!important;}
.delay08{ animation-delay: 0.8s!important;}
.delay09{ animation-delay: 0.9s!important;}
.delay10{ animation-delay: 1.0s!important;}
.delay11{ animation-delay: 1.1s!important;}
.delay12{ animation-delay: 1.2s!important;}
.delay13{ animation-delay: 1.3s!important;}
.delay14{ animation-delay: 1.4s!important;}
.delay15{ animation-delay: 1.5s!important;}
.delay16{ animation-delay: 1.6s!important;}
.delay17{ animation-delay: 1.7s!important;}
.delay18{ animation-delay: 1.8s!important;}
.delay19{ animation-delay: 1.9s!important;}
.delay20{ animation-delay: 2.0s!important;}
.delay21{ animation-delay: 2.1s!important;}
.delay22{ animation-delay: 2.2s!important;}
.delay23{ animation-delay: 2.3s!important;}
.delay24{ animation-delay: 2.4s!important;}
.delay25{ animation-delay: 2.5s!important;}
.delay26{ animation-delay: 2.6s!important;}
.delay27{ animation-delay: 2.7s!important;}
.delay28{ animation-delay: 2.8s!important;}
.delay29{ animation-delay: 2.9s!important;}
.delay30{ animation-delay: 3.0s!important;}
.delay31{ animation-delay: 3.1s!important;}
.delay32{ animation-delay: 3.2s!important;}
.delay33{ animation-delay: 3.3s!important;}
.delay34{ animation-delay: 3.4s!important;}
.delay35{ animation-delay: 3.5s!important;}
.delay36{ animation-delay: 3.6s!important;}
.delay37{ animation-delay: 3.7s!important;}
.delay38{ animation-delay: 3.8s!important;}
.delay39{ animation-delay: 3.9s!important;}
.delay40{ animation-delay: 4.0s!important;}


@keyframes slide {
	0% { transform: translateX(10px); opacity: 0;}
	3% { transform: translateX(10px); opacity: 1;}
	100% { transform: translateX(-10px); opacity: 0; }
}


/*----------------------------------------------------
	☆TOP UNDER 900
----------------------------------------------------*/

@media screen and (max-width:900px) {
	.pc-none { display: block;}
	.sp-none { display: none;}

	.spOverflow {
		overflow-x: scroll;
	}

	.spOverflow.touched .inr,
    .spOverflow.touched img{
        opacity: 1;
    }
	
	.spOverflow img{
        opacity: 0.3;
        transition: .4s;
	}
	
    .spOverflow .inr{
        opacity: 0.3;
        position: relative;
    }
	
    .spOverflow .deco img{
        width: 100%;
    }
	
    .howToScroll.is-ua-sp{
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	
	.howToScroll.is-ua-sp .howToScrollInr::after{
		content: "";
		display: block;
		width: 70%;
		height: 100%;
		position: absolute;
		left: 15%;
		top: 0;
		z-index: 2;
		background: url("../images/icon_swipe.svg")center center / 60% auto no-repeat;
		animation: slide 1500ms linear infinite;
		transition: all 300ms;
	}
	
    .howToScroll.is-ua-sp.delete,
	.howToScroll.is-ua-sp .howToScrollInr.delete {
		animation: none;
		transition: .3s;
		opacity: 0;
		visibility: hidden;
	}
	
	.howToScroll.is-ua-sp.delete .howToScrollInr::after {
		animation: none;
		opacity: 0;
		visibility: hidden;
	}
	
	.spOverflow.delete img {
        opacity: 1;
	}

}



/*--- 画像ボケ防止 ---*/
@media screen and (min-width:769px) {
	img { 
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		image-rendering: crisp-edges;
		image-rendering: -webkit-optimize-contrast;
	}
}