@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 ※w560px以下で可変
================================================== */
.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: 520px) {
	.fz-xxsmall { font-size: clamp(9px, 1.964vw, 11px); }
	.fz-xsmall { font-size: clamp(10px, 2.143vw, 12px); }
	.fz-small { font-size: clamp(11px, 2.321vw, 13px); }
	.fz-regular { font-size: clamp(12px, 2.500vw, 14px); }
	.fz-large { font-size: clamp(13px, 2.679vw, 15px); }
	.fz-xlarge { font-size: clamp(14px, 2.857vw, 16px); }
	.fz-xxlarge { font-size: clamp(15px, 3.036vw, 17px); }
	.fz-extra { font-size: clamp(16px, 3.214vw, 18px); }
	.fz-xextra { font-size: clamp(18px, 3.571vw, 20px); }
}


/* 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 ※w560px以下で可変
================================================== */

/* margin-top */
.mt-1 { margin-top: min(1.786%, 10px); }
.mt-2 { margin-top: min(3.571%, 20px); }
.mt-3 { margin-top: min(5.357%, 30px); }
.mt-4 { margin-top: min(7.143%, 40px); }
.mt-5 { margin-top: min(8.929%, 50px); }
.mt-6 { margin-top: min(10.714%, 60px); }
.mt-7 { margin-top: min(12.500%, 70px); }
.mt-8 { margin-top: min(14.286%, 80px); }
.mt-9 { margin-top: min(16.071%, 90px); }
.mt-10 { margin-top: min(17.857%, 100px); }
.mt-12 { margin-top: min(21.429%, 120px); }
.mt-14 { margin-top: min(25.000%, 140px); }
.mt-15 { margin-top: min(26.786%, 150px); }
.mt-16 { margin-top: min(28.571%, 160px); }
.mt-18 { margin-top: min(32.143%, 180px); }
.mt-20 { margin-top: min(35.714%, 200px); }
.mt-22 { margin-top: min(39.286%, 220px); }
.mt-24 { margin-top: min(42.857%, 240px); }
.mt-26 { margin-top: min(46.429%, 260px); }
.mt-28 { margin-top: min(50.000%, 280px); }
.mt-30 { margin-top: min(53.571%, 300px); }

/* margin-bottom */
.mb-1 { margin-bottom: min(1.786%, 10px); }
.mb-2 { margin-bottom: min(3.571%, 20px); }
.mb-3 { margin-bottom: min(5.357%, 30px); }
.mb-4 { margin-bottom: min(7.143%, 40px); }
.mb-5 { margin-bottom: min(8.929%, 50px); }
.mb-6 { margin-bottom: min(10.714%, 60px); }
.mb-7 { margin-bottom: min(12.500%, 70px); }
.mb-8 { margin-bottom: min(14.286%, 80px); }
.mb-9 { margin-bottom: min(16.071%, 90px); }
.mb-10 { margin-bottom: min(17.857%, 100px); }
.mb-12 { margin-bottom: min(21.429%, 120px); }
.mb-14 { margin-bottom: min(25.000%, 140px); }
.mb-15 { margin-bottom: min(26.786%, 150px); }
.mb-16 { margin-bottom: min(28.571%, 160px); }
.mb-18 { margin-bottom: min(32.143%, 180px); }
.mb-20 { margin-bottom: min(35.714%, 200px); }
.mb-22 { margin-bottom: min(39.286%, 220px); }
.mb-24 { margin-bottom: min(42.857%, 240px); }
.mb-26 { margin-bottom: min(46.429%, 260px); }
.mb-28 { margin-bottom: min(50.000%, 280px); }
.mb-30 { margin-bottom: min(53.571%, 300px); }