@charset "UTF-8";

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

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

/*@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 ※w640px以下で可変
================================================== */
.fz-xxsmall { font-size: 11px; }
.fz-xsmall { font-size: 12px; }
.fz-small { font-size: 13px; }
.fz-regular { font-size: 14px; }
.fz-large { font-size: 15px; }
.fz-xlarge { font-size: 16px; }
.fz-xxlarge { font-size: 17px; }
.fz-extra { font-size: 18px; }
.fz-xextra { font-size: 20px; }


@media screen and (max-width: 640px) {
	.fz-xxsmall { font-size: clamp(9px, 1.719vw, 11px); }
	.fz-xsmall { font-size: clamp(10px, 1.875vw, 12px); }
	.fz-small { font-size: clamp(11px, 2.031vw, 13px); }
	.fz-regular { font-size: clamp(12px, 2.188vw, 14px); }
	.fz-large { font-size: clamp(13px, 2.344vw, 15px); }
	.fz-xlarge { font-size: clamp(14px, 2.500vw, 16px); }
	.fz-xxlarge { font-size: clamp(15px, 2.656vw, 17px); }
	.fz-extra { font-size: clamp(16px, 2.813vw, 18px); }
	.fz-xextra { font-size: clamp(17px, 3.125vw, 20px); }
}


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

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

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

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

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

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


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


/* ==================================================
Magine ※w640px以下で可変
================================================== */

/* margin-top */
.mt-1 { margin-top: min(1.563%, 10px); }
.mt-2 { margin-top: min(3.125%, 20px); }
.mt-3 { margin-top: min(4.688%, 30px); }
.mt-4 { margin-top: min(6.250%, 40px); }
.mt-5 { margin-top: min(7.813%, 50px); }
.mt-6 { margin-top: min(9.375%, 60px); }
.mt-7 { margin-top: min(10.938%, 70px); }
.mt-8 { margin-top: min(12.500%, 80px); }
.mt-9 { margin-top: min(14.063%, 90px); }
.mt-10 { margin-top: min(15.625%, 100px); }
.mt-12 { margin-top: min(18.750%, 120px); }
.mt-14 { margin-top: min(21.875%, 140px); }
.mt-15 { margin-top: min(23.438%, 150px); }
.mt-16 { margin-top: min(25.000%, 160px); }
.mt-18 { margin-top: min(28.125%, 180px); }
.mt-20 { margin-top: min(31.250%, 200px); }
.mt-22 { margin-top: min(34.375%, 220px); }
.mt-24 { margin-top: min(37.500%, 240px); }
.mt-26 { margin-top: min(40.625%, 260px); }
.mt-28 { margin-top: min(43.750%, 280px); }
.mt-30 { margin-top: min(46.875%, 300px); }

/* margin-bottom */
.mb-1 { margin-bottom: min(1.563%, 10px); }
.mb-2 { margin-bottom: min(3.125%, 20px); }
.mb-3 { margin-bottom: min(4.688%, 30px); }
.mb-4 { margin-bottom: min(6.250%, 40px); }
.mb-5 { margin-bottom: min(7.813%, 50px); }
.mb-6 { margin-bottom: min(9.375%, 60px); }
.mb-7 { margin-bottom: min(10.938%, 70px); }
.mb-8 { margin-bottom: min(12.500%, 80px); }
.mb-9 { margin-bottom: min(14.063%, 90px); }
.mb-10 { margin-bottom: min(15.625%, 100px); }
.mb-12 { margin-bottom: min(18.750%, 120px); }
.mb-14 { margin-bottom: min(21.875%, 140px); }
.mb-15 { margin-bottom: min(23.438%, 150px); }
.mb-16 { margin-bottom: min(25.000%, 160px); }
.mb-18 { margin-bottom: min(28.125%, 180px); }
.mb-20 { margin-bottom: min(31.250%, 200px); }
.mb-22 { margin-bottom: min(34.375%, 220px); }
.mb-24 { margin-bottom: min(37.500%, 240px); }
.mb-26 { margin-bottom: min(40.625%, 260px); }
.mb-28 { margin-bottom: min(43.750%, 280px); }
.mb-30 { margin-bottom: min(46.875%, 300px); }