@charset "UTF-8";

/* ==================================================
Library
================================================== */

/* Mediaquery
------------------------------ */
@media screen and (min-width: 901px) {}
@media screen and (max-width: 900px) {}

/*@media screen and (max-width: 640px) {}*/
/*@media screen and (max-width: 560px) {}*/
/*@media screen and (max-width: 480px) {}*/


/* View Switch
------------------------------ */
@media screen and (min-width: 901px) {
	.sp-only { display: none !important; }
}

@media screen and (max-width: 900px) {
	.pc-only { display: none !important; }
}


/* Introduction Animation
------------------------------ */
#all-wrap {
	will-change: animation;
	animation: accessFadein 1.8s linear 0.2s both;
}

@keyframes accessFadein {
	0% { opacity: 0; }
	30% { opacity: 0; }
	100% { opacity: 1; }
} 

/* アニメーションスクロール
------------------------------ */
.scrollto {}


/* Clrfix
------------------------------ */
.clrfix::before, .clrfix::after { display: table; content: ''; }
.clrfix::after { clear: both; }


/* 検証用
------------------------------ */
.none { display: none; }


/* ==================================================
Fonts Size - Variable ※w420-w900px間で可変
================================================== */
/* rootフォントサイズ＝10px想定 */
.fz-xxsmall { font-size: clamp(0.9rem, 0.725rem + 0.417vw, 1.1rem); }
.fz-xsmall { font-size: clamp(1rem, 0.825rem + 0.417vw, 1.2rem); }
.fz-small { font-size: clamp(1.1rem, 0.925rem + 0.417vw, 1.3rem); }
.fz-regular { font-size: clamp(1.2rem, 1.025rem + 0.417vw, 1.4rem); }
.fz-large { font-size: clamp(1.3rem, 1.125rem + 0.417vw, 1.5rem); }
.fz-xlarge { font-size: clamp(1.4rem, 1.225rem + 0.417vw, 1.6rem); }
.fz-xxlarge { font-size: clamp(1.5rem, 1.325rem + 0.417vw, 1.7rem); }
.fz-extra { font-size: clamp(1.6rem, 1.425rem + 0.417vw, 1.8rem); }
.fz-xextra { font-size: clamp(1.7rem, 1.525rem + 0.417vw, 1.9rem); }
.fz-xxextra { font-size: clamp(1.8rem, 1.625rem + 0.417vw, 2rem); }


/* font-weight
------------------------------ */
/* Light */
.fw300 { font-weight: 300; }

/* Regular */
.fw400 { font-weight: 400; }

/* Medium */
.fw500 { font-weight: 500; }

/* SemiBold */
.fw600 { font-weight: 600; }

/* Bold */
.fw700 { font-weight: 700; }

/* Extra Bold */
.fw700 { font-weight: 700; }

/* Black */
.fw900 { font-weight: 900; }


/* ==================================================
Text Color
================================================== */
/*.txt-red { color: #C66; }*/
.txt-red { color: #f00; }


/* ==================================================
Magine ※w420-w900px間で可変
================================================== */

/* margin-top */
.mt-1 { margin-top: clamp(6px, 2.5px + 0.833vw, 10px); }
.mt-2 { margin-top: clamp(12px, 5px + 1.667vw, 20px); }
.mt-3 { margin-top: clamp(18px, 7.5px + 2.5vw, 30px); }
.mt-4 { margin-top: clamp(24px, 10px + 3.333vw, 40px); }
.mt-5 { margin-top: clamp(30px, 12.5px + 4.167vw, 50px); }
.mt-6 { margin-top: clamp(36px, 15px + 5vw, 60px); }
.mt-7 { margin-top: clamp(42px, 17.5px + 5.833vw, 70px); }
.mt-8 { margin-top: clamp(48px, 20px + 6.667vw, 80px); }
.mt-9 { margin-top: clamp(54px, 22.5px + 7.5vw, 90px); }
.mt-10 { margin-top: clamp(60px, 25px + 8.333vw, 100px); }
.mt-12 { margin-top: clamp(72px, 30px + 10vw, 120px); }
.mt-14 { margin-top: clamp(84px, 35px + 11.667vw, 140px); }
.mt-15 { margin-top: clamp(90px, 37.5px + 12.5vw, 150px); }
.mt-16 { margin-top: clamp(96px, 40px + 13.333vw, 160px); }
.mt-18 { margin-top: clamp(108px, 45px + 15vw, 180px); }
.mt-20 { margin-top: clamp(120px, 50px + 16.667vw, 200px); }
.mt-22 { margin-top: clamp(132px, 55px + 18.333vw, 220px); }
.mt-24 { margin-top: clamp(144px, 60px + 20vw, 240px); }
.mt-26 { margin-top: clamp(156px, 65px + 21.667vw, 260px); }
.mt-28 { margin-top: clamp(168px, 70px + 23.333vw, 280px); }
.mt-30 { margin-top: clamp(180px, 75px + 25vw, 300px); }

/* margin-bottom */
.mb-1 { margin-bottom: clamp(6px, 2.5px + 0.833vw, 10px); }
.mb-2 { margin-bottom: clamp(12px, 5px + 1.667vw, 20px); }
.mb-3 { margin-bottom: clamp(18px, 7.5px + 2.5vw, 30px); }
.mb-4 { margin-bottom: clamp(24px, 10px + 3.333vw, 40px); }
.mb-5 { margin-bottom: clamp(30px, 12.5px + 4.167vw, 50px); }
.mb-6 { margin-bottom: clamp(36px, 15px + 5vw, 60px); }
.mb-7 { margin-bottom: clamp(42px, 17.5px + 5.833vw, 70px); }
.mb-8 { margin-bottom: clamp(48px, 20px + 6.667vw, 80px); }
.mb-9 { margin-bottom: clamp(54px, 22.5px + 7.5vw, 90px); }
.mb-10 { margin-bottom: clamp(60px, 25px + 8.333vw, 100px); }
.mb-12 { margin-bottom: clamp(72px, 30px + 10vw, 120px); }
.mb-14 { margin-bottom: clamp(84px, 35px + 11.667vw, 140px); }
.mb-15 { margin-bottom: clamp(90px, 37.5px + 12.5vw, 150px); }
.mb-16 { margin-bottom: clamp(96px, 40px + 13.333vw, 160px); }
.mb-18 { margin-bottom: clamp(108px, 45px + 15vw, 180px); }
.mb-20 { margin-bottom: clamp(120px, 50px + 16.667vw, 200px); }
.mb-22 { margin-bottom: clamp(132px, 55px + 18.333vw, 220px); }
.mb-24 { margin-bottom: clamp(144px, 60px + 20vw, 240px); }
.mb-26 { margin-bottom: clamp(156px, 65px + 21.667vw, 260px); }
.mb-28 { margin-bottom: clamp(168px, 70px + 23.333vw, 280px); }
.mb-30 { margin-bottom: clamp(180px, 75px + 25vw, 300px); }