@charset "utf-8";

/* font
-------------------------------------------------------------*/

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	src: url('../font/SourceSansPro-Light.otf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: url('../font/SourceSansPro-Regular.otf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 600;
	src: url('../font/SourceSansPro-SemiBold.otf') format('truetype');
	font-display: swap;
}


/* reset
-------------------------------------------------------------*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 100%;
	font: inherit;
}
header,footer,main,section,article,nav,aside {
	display: block;
}
p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,table,thead,tbody,tfoot,th,td,caption {
	max-height: 100%;
}
*,:before,:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
ol,ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	color: #000;
	text-decoration: none;
}
html {
	font-size: 62.5%;
}
body {
	-webkit-text-size-adjust: 100%;
	line-height: 1;
	font-size: 1.4rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	color: #000;
	background: #fff;
}

/* common
-------------------------------------------------------------*/

main .nowrap {white-space: nowrap}
main .clear {clear: both}
main .ofh {overflow: hidden}
main .center {text-align: center}
main .left {text-align: left}
main .right {text-align: right}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.clearfix{ zoom: 1; }

/* ScrollMagic
-------------------------------------------------------------*/

#main > article > section {
	opacity: 0;
	transform: translate(0,80px);
	transition: all 0.6s ease-in;
}
#main > article > section.show {
	opacity: 1;
	transform: translate(0);
}
#main > article > section.no-fade-pc {
	transition: transform 0s, opacity 0.3s ease-in;
}

@media print {
	#main > article > section.no-fade-pc {
		transform: translate(0) !important;
		opacity: 1 !important;
	}
}

/* lib (PC)
-------------------------------------------------------------*/

@media screen and (min-width:801px),print {

main .pc{display: block !important;}
main .sp{display: none !important;}

main .mt0   {margin-top:    0 !important}
main .mt05  {margin-top:  5px !important}
main .mt10  {margin-top: 10px !important}
main .mt15  {margin-top: 15px !important}
main .mt20  {margin-top: 20px !important}
main .mt25  {margin-top: 25px !important}
main .mt30  {margin-top: 30px !important}
main .mt35  {margin-top: 35px !important}
main .mt40  {margin-top: 40px !important}
main .mt45  {margin-top: 45px !important}
main .mt50  {margin-top: 50px !important}
main .mt55  {margin-top: 55px !important}
main .mt60  {margin-top: 60px !important}
main .mt65  {margin-top: 65px !important}
main .mt70  {margin-top: 70px !important}
main .mt75  {margin-top: 75px !important}
main .mt80  {margin-top: 80px !important}
main .mt85  {margin-top: 85px !important}
main .mt90  {margin-top: 90px !important}
main .mt95  {margin-top: 95px !important}
main .mt100 {margin-top:100px !important}
main .mt105 {margin-top:105px !important}
main .mt110 {margin-top:110px !important}
main .mt115 {margin-top:115px !important}
main .mt120 {margin-top:120px !important}
main .mt125 {margin-top:125px !important}
main .mt130 {margin-top:130px !important}
main .mt135 {margin-top:135px !important}
main .mt140 {margin-top:140px !important}
main .mt145 {margin-top:145px !important}
main .mt150 {margin-top:150px !important}
main .mt155 {margin-top:155px !important}
main .mt160 {margin-top:160px !important}
main .mt165 {margin-top:165px !important}
main .mt170 {margin-top:170px !important}
main .mt175 {margin-top:175px !important}
main .mt180 {margin-top:180px !important}
main .mt185 {margin-top:185px !important}
main .mt190 {margin-top:190px !important}
main .mt195 {margin-top:195px !important}
main .mt200 {margin-top:200px !important}

main .mt-05  {margin-top:  -5px !important}
main .mt-10  {margin-top: -10px !important}
main .mt-15  {margin-top: -15px !important}
main .mt-20  {margin-top: -20px !important}
main .mt-25  {margin-top: -25px !important}
main .mt-30  {margin-top: -30px !important}
main .mt-35  {margin-top: -35px !important}
main .mt-40  {margin-top: -40px !important}
main .mt-45  {margin-top: -45px !important}
main .mt-50  {margin-top: -50px !important}
main .mt-55  {margin-top: -55px !important}
main .mt-60  {margin-top: -60px !important}
main .mt-65  {margin-top: -65px !important}
main .mt-70  {margin-top: -70px !important}
main .mt-75  {margin-top: -75px !important}
main .mt-80  {margin-top: -80px !important}
main .mt-85  {margin-top: -85px !important}
main .mt-90  {margin-top: -90px !important}
main .mt-95  {margin-top: -95px !important}
main .mt-100 {margin-top:-100px !important}
main .mt-105 {margin-top:-105px !important}
main .mt-110 {margin-top:-110px !important}
main .mt-115 {margin-top:-115px !important}
main .mt-120 {margin-top:-120px !important}
main .mt-125 {margin-top:-125px !important}
main .mt-130 {margin-top:-130px !important}
main .mt-135 {margin-top:-135px !important}
main .mt-140 {margin-top:-140px !important}
main .mt-145 {margin-top:-145px !important}
main .mt-150 {margin-top:-150px !important}
main .mt-155 {margin-top:-155px !important}
main .mt-160 {margin-top:-160px !important}
main .mt-165 {margin-top:-165px !important}
main .mt-170 {margin-top:-170px !important}
main .mt-175 {margin-top:-175px !important}
main .mt-180 {margin-top:-180px !important}
main .mt-185 {margin-top:-185px !important}
main .mt-190 {margin-top:-190px !important}
main .mt-195 {margin-top:-195px !important}
main .mt-200 {margin-top:-200px !important}

main .mb0   {margin-bottom:    0 !important}
main .mb05  {margin-bottom:  5px !important}
main .mb10  {margin-bottom: 10px !important}
main .mb15  {margin-bottom: 15px !important}
main .mb20  {margin-bottom: 20px !important}
main .mb25  {margin-bottom: 25px !important}
main .mb30  {margin-bottom: 30px !important}
main .mb35  {margin-bottom: 35px !important}
main .mb40  {margin-bottom: 40px !important}
main .mb45  {margin-bottom: 45px !important}
main .mb50  {margin-bottom: 50px !important}
main .mb55  {margin-bottom: 55px !important}
main .mb60  {margin-bottom: 60px !important}
main .mb65  {margin-bottom: 65px !important}
main .mb70  {margin-bottom: 70px !important}
main .mb75  {margin-bottom: 75px !important}
main .mb80  {margin-bottom: 80px !important}
main .mb85  {margin-bottom: 85px !important}
main .mb90  {margin-bottom: 90px !important}
main .mb95  {margin-bottom: 95px !important}
main .mb100 {margin-bottom:100px !important}
main .mb105 {margin-bottom:105px !important}
main .mb110 {margin-bottom:110px !important}
main .mb115 {margin-bottom:115px !important}
main .mb120 {margin-bottom:120px !important}
main .mb125 {margin-bottom:125px !important}
main .mb130 {margin-bottom:130px !important}
main .mb135 {margin-bottom:135px !important}
main .mb140 {margin-bottom:140px !important}
main .mb145 {margin-bottom:145px !important}
main .mb150 {margin-bottom:150px !important}
main .mb155 {margin-bottom:155px !important}
main .mb160 {margin-bottom:160px !important}
main .mb165 {margin-bottom:165px !important}
main .mb170 {margin-bottom:170px !important}
main .mb175 {margin-bottom:175px !important}
main .mb180 {margin-bottom:180px !important}
main .mb185 {margin-bottom:185px !important}
main .mb190 {margin-bottom:190px !important}
main .mb195 {margin-bottom:195px !important}
main .mb200 {margin-bottom:200px !important}

main .mb-05  {margin-bottom:  -5px !important}
main .mb-10  {margin-bottom: -10px !important}
main .mb-15  {margin-bottom: -15px !important}
main .mb-20  {margin-bottom: -20px !important}
main .mb-25  {margin-bottom: -25px !important}
main .mb-30  {margin-bottom: -30px !important}
main .mb-35  {margin-bottom: -35px !important}
main .mb-40  {margin-bottom: -40px !important}
main .mb-45  {margin-bottom: -45px !important}
main .mb-50  {margin-bottom: -50px !important}
main .mb-55  {margin-bottom: -55px !important}
main .mb-60  {margin-bottom: -60px !important}
main .mb-65  {margin-bottom: -65px !important}
main .mb-70  {margin-bottom: -70px !important}
main .mb-75  {margin-bottom: -75px !important}
main .mb-80  {margin-bottom: -80px !important}
main .mb-85  {margin-bottom: -85px !important}
main .mb-90  {margin-bottom: -90px !important}
main .mb-95  {margin-bottom: -95px !important}
main .mb-100 {margin-bottom:-100px !important}
main .mb-105 {margin-bottom:-105px !important}
main .mb-110 {margin-bottom:-110px !important}
main .mb-115 {margin-bottom:-115px !important}
main .mb-120 {margin-bottom:-120px !important}
main .mb-125 {margin-bottom:-125px !important}
main .mb-130 {margin-bottom:-130px !important}
main .mb-135 {margin-bottom:-135px !important}
main .mb-140 {margin-bottom:-140px !important}
main .mb-145 {margin-bottom:-145px !important}
main .mb-150 {margin-bottom:-150px !important}
main .mb-155 {margin-bottom:-155px !important}
main .mb-160 {margin-bottom:-160px !important}
main .mb-165 {margin-bottom:-165px !important}
main .mb-170 {margin-bottom:-170px !important}
main .mb-175 {margin-bottom:-175px !important}
main .mb-180 {margin-bottom:-180px !important}
main .mb-185 {margin-bottom:-185px !important}
main .mb-190 {margin-bottom:-190px !important}
main .mb-195 {margin-bottom:-195px !important}
main .mb-200 {margin-bottom:-200px !important}

main .ml0   {margin-left:    0 !important}
main .ml05  {margin-left:  5px !important}
main .ml10  {margin-left: 10px !important}
main .ml15  {margin-left: 15px !important}
main .ml20  {margin-left: 20px !important}
main .ml25  {margin-left: 25px !important}
main .ml30  {margin-left: 30px !important}
main .ml35  {margin-left: 35px !important}
main .ml40  {margin-left: 40px !important}
main .ml45  {margin-left: 45px !important}
main .ml50  {margin-left: 50px !important}

main .pl50  {padding-left: 50px !important}

main .w100p {width:  100% !important}
main .w5 {width:  5px !important}
main .w10 {width: 10px !important}
main .w15 {width: 15px !important}
main .w20 {width: 20px !important}
main .w25 {width: 25px !important}
main .w30 {width: 30px !important}
main .w35 {width: 35px !important}
main .w40 {width: 40px !important}
main .w45 {width: 45px !important}
main .w50 {width: 50px !important}
main .w55 {width: 55px !important}
main .w60 {width: 60px !important}
main .w65 {width: 65px !important}
main .w70 {width: 70px !important}
main .w75 {width: 75px !important}
main .w80 {width: 80px !important}
main .w85 {width: 85px !important}
main .w90 {width: 90px !important}
main .w95 {width: 95px !important}
main .w100 {width:100px !important}
main .w105 {width:105px !important}
main .w110 {width:110px !important}
main .w115 {width:115px !important}
main .w120 {width:120px !important}
main .w125 {width:125px !important}
main .w130 {width:130px !important}
main .w135 {width:135px !important}
main .w140 {width:140px !important}
main .w145 {width:145px !important}
main .w150 {width:150px !important}
main .w155 {width:155px !important}
main .w160 {width:160px !important}
main .w165 {width:165px !important}
main .w170 {width:170px !important}
main .w175 {width:175px !important}
main .w180 {width:180px !important}
main .w185 {width:185px !important}
main .w190 {width:190px !important}
main .w195 {width:195px !important}
main .w200 {width:200px !important}
main .w205 {width:205px !important}
main .w210 {width:210px !important}
main .w215 {width:215px !important}
main .w220 {width:220px !important}
main .w225 {width:225px !important}
main .w230 {width:230px !important}
main .w235 {width:235px !important}
main .w240 {width:240px !important}
main .w245 {width:245px !important}
main .w250 {width:250px !important}
main .w255 {width:255px !important}
main .w260 {width:260px !important}
main .w265 {width:265px !important}
main .w270 {width:270px !important}
main .w275 {width:275px !important}
main .w280 {width:280px !important}
main .w285 {width:285px !important}
main .w290 {width:290px !important}
main .w295 {width:295px !important}
main .w300 {width:300px !important}
main .w305 {width:305px !important}
main .w310 {width:310px !important}
main .w315 {width:315px !important}
main .w320 {width:320px !important}
main .w325 {width:325px !important}
main .w330 {width:330px !important}
main .w335 {width:335px !important}
main .w340 {width:340px !important}
main .w345 {width:345px !important}
main .w350 {width:350px !important}
main .w355 {width:355px !important}
main .w360 {width:360px !important}
main .w365 {width:365px !important}
main .w370 {width:370px !important}
main .w375 {width:375px !important}
main .w380 {width:380px !important}
main .w385 {width:385px !important}
main .w390 {width:390px !important}
main .w395 {width:395px !important}
main .w400 {width:400px !important}
main .w405 {width:405px !important}
main .w410 {width:410px !important}
main .w415 {width:415px !important}
main .w420 {width:420px !important}
main .w425 {width:425px !important}
main .w430 {width:430px !important}
main .w435 {width:435px !important}
main .w440 {width:440px !important}
main .w445 {width:445px !important}
main .w450 {width:450px !important}
main .w455 {width:455px !important}
main .w460 {width:460px !important}
main .w465 {width:465px !important}
main .w470 {width:470px !important}
main .w475 {width:475px !important}
main .w480 {width:480px !important}
main .w485 {width:485px !important}
main .w490 {width:490px !important}
main .w495 {width:495px !important}
main .w500 {width:500px !important}
main .w505 {width:505px !important}
main .w510 {width:510px !important}
main .w515 {width:515px !important}
main .w520 {width:520px !important}
main .w525 {width:525px !important}
main .w530 {width:530px !important}
main .w535 {width:535px !important}
main .w540 {width:540px !important}
main .w545 {width:545px !important}
main .w550 {width:550px !important}
main .w555 {width:555px !important}
main .w560 {width:560px !important}
main .w565 {width:565px !important}
main .w570 {width:570px !important}
main .w575 {width:575px !important}
main .w580 {width:580px !important}
main .w585 {width:585px !important}
main .w590 {width:590px !important}
main .w595 {width:595px !important}
main .w600 {width:600px !important}
main .w605 {width:605px !important}
main .w610 {width:610px !important}
main .w615 {width:615px !important}
main .w620 {width:620px !important}
main .w625 {width:625px !important}
main .w630 {width:630px !important}
main .w635 {width:635px !important}
main .w640 {width:640px !important}
main .w645 {width:645px !important}
main .w650 {width:650px !important}
main .w655 {width:655px !important}
main .w660 {width:660px !important}
main .w665 {width:665px !important}
main .w670 {width:670px !important}
main .w675 {width:675px !important}
main .w680 {width:680px !important}
main .w685 {width:685px !important}
main .w690 {width:690px !important}
main .w695 {width:695px !important}
main .w700 {width:700px !important}
main .w705 {width:705px !important}
main .w710 {width:710px !important}
main .w715 {width:715px !important}
main .w720 {width:720px !important}
main .w725 {width:725px !important}
main .w730 {width:730px !important}
main .w735 {width:735px !important}
main .w740 {width:740px !important}
main .w745 {width:745px !important}
main .w750 {width:750px !important}
main .w755 {width:755px !important}
main .w760 {width:760px !important}
main .w765 {width:765px !important}
main .w770 {width:770px !important}
main .w775 {width:775px !important}
main .w780 {width:780px !important}
main .w785 {width:785px !important}
main .w790 {width:790px !important}
main .w795 {width:795px !important}
main .w800 {width:800px !important}
main .w805 {width:805px !important}
main .w810 {width:810px !important}
main .w815 {width:815px !important}
main .w820 {width:820px !important}
main .w825 {width:825px !important}
main .w830 {width:830px !important}
main .w835 {width:835px !important}
main .w840 {width:840px !important}
main .w845 {width:845px !important}
main .w850 {width:850px !important}
main .w855 {width:855px !important}
main .w860 {width:860px !important}
main .w865 {width:865px !important}
main .w870 {width:870px !important}
main .w875 {width:875px !important}
main .w880 {width:880px !important}
main .w885 {width:885px !important}
main .w890 {width:890px !important}
main .w895 {width:895px !important}
main .w900 {width:900px !important}
main .w905 {width:905px !important}
main .w910 {width:910px !important}
main .w915 {width:915px !important}
main .w920 {width:920px !important}
main .w925 {width:925px !important}
main .w930 {width:930px !important}
main .w935 {width:935px !important}
main .w940 {width:940px !important}
main .w945 {width:945px !important}
main .w950 {width:950px !important}
main .w955 {width:955px !important}
main .w960 {width:960px !important}
main .w965 {width:965px !important}
main .w970 {width:970px !important}
main .w975 {width:975px !important}
main .w980 {width:980px !important}
main .w985 {width:985px !important}
main .w990 {width:990px !important}
main .w995 {width:995px !important}
main .w1000 {width:1000px !important}
main .w1005 {width:1005px !important}
main .w1010 {width:1010px !important}
main .w1015 {width:1015px !important}
main .w1020 {width:1020px !important}
main .w1025 {width:1025px !important}
main .w1030 {width:1030px !important}
main .w1035 {width:1035px !important}
main .w1040 {width:1040px !important}
main .w1045 {width:1045px !important}
main .w1050 {width:1050px !important}
main .w1055 {width:1055px !important}
main .w1060 {width:1060px !important}
main .w1065 {width:1065px !important}
main .w1070 {width:1070px !important}
main .w1075 {width:1075px !important}
main .w1080 {width:1080px !important}
main .w1085 {width:1085px !important}
main .w1090 {width:1090px !important}
main .w1095 {width:1095px !important}
main .w1100 {width:1100px !important}
main .w1105 {width:1105px !important}
main .w1110 {width:1110px !important}
main .w1115 {width:1115px !important}
main .w1120 {width:1120px !important}
main .w1125 {width:1125px !important}
main .w1130 {width:1130px !important}
main .w1135 {width:1135px !important}
main .w1140 {width:1140px !important}
main .w1145 {width:1145px !important}
main .w1150 {width:1150px !important}
main .w1155 {width:1155px !important}
main .w1160 {width:1160px !important}
main .w1165 {width:1165px !important}
main .w1170 {width:1170px !important}
main .w1175 {width:1175px !important}
main .w1180 {width:1180px !important}
main .w1185 {width:1185px !important}
main .w1190 {width:1190px !important}
main .w1195 {width:1195px !important}
main .w1200 {width:1200px !important}

}

/* lib (SP)
-------------------------------------------------------------*/

@media screen and (max-width:800px) {

main .pc{display: none !important;}
main .sp{display: block !important;}

main .sp_mt0   {margin-top:    0 !important}
main .sp_mt05  {margin-top:  5px !important}
main .sp_mt10  {margin-top: 10px !important}
main .sp_mt15  {margin-top: 15px !important}
main .sp_mt20  {margin-top: 20px !important}
main .sp_mt25  {margin-top: 25px !important}
main .sp_mt30  {margin-top: 30px !important}
main .sp_mt35  {margin-top: 35px !important}
main .sp_mt40  {margin-top: 40px !important}
main .sp_mt45  {margin-top: 45px !important}
main .sp_mt50  {margin-top: 50px !important}
main .sp_mt55  {margin-top: 55px !important}
main .sp_mt60  {margin-top: 60px !important}
main .sp_mt65  {margin-top: 65px !important}
main .sp_mt70  {margin-top: 70px !important}
main .sp_mt75  {margin-top: 75px !important}
main .sp_mt80  {margin-top: 80px !important}
main .sp_mt85  {margin-top: 85px !important}
main .sp_mt90  {margin-top: 90px !important}
main .sp_mt95  {margin-top: 95px !important}
main .sp_mt100 {margin-top:100px !important}
main .sp_mt105 {margin-top:105px !important}
main .sp_mt110 {margin-top:110px !important}
main .sp_mt115 {margin-top:115px !important}
main .sp_mt120 {margin-top:120px !important}
main .sp_mt125 {margin-top:125px !important}
main .sp_mt130 {margin-top:130px !important}
main .sp_mt135 {margin-top:135px !important}
main .sp_mt140 {margin-top:140px !important}
main .sp_mt145 {margin-top:145px !important}
main .sp_mt150 {margin-top:150px !important}
main .sp_mt155 {margin-top:155px !important}
main .sp_mt160 {margin-top:160px !important}
main .sp_mt165 {margin-top:165px !important}
main .sp_mt170 {margin-top:170px !important}
main .sp_mt175 {margin-top:175px !important}
main .sp_mt180 {margin-top:180px !important}
main .sp_mt185 {margin-top:185px !important}
main .sp_mt190 {margin-top:190px !important}
main .sp_mt195 {margin-top:195px !important}
main .sp_mt200 {margin-top:200px !important}

main .sp_mt-05  {margin-top:  -5px !important}
main .sp_mt-10  {margin-top: -10px !important}
main .sp_mt-15  {margin-top: -15px !important}
main .sp_mt-20  {margin-top: -20px !important}
main .sp_mt-25  {margin-top: -25px !important}
main .sp_mt-30  {margin-top: -30px !important}
main .sp_mt-35  {margin-top: -35px !important}
main .sp_mt-40  {margin-top: -40px !important}
main .sp_mt-45  {margin-top: -45px !important}
main .sp_mt-50  {margin-top: -50px !important}
main .sp_mt-55  {margin-top: -55px !important}
main .sp_mt-60  {margin-top: -60px !important}
main .sp_mt-65  {margin-top: -65px !important}
main .sp_mt-70  {margin-top: -70px !important}
main .sp_mt-75  {margin-top: -75px !important}
main .sp_mt-80  {margin-top: -80px !important}
main .sp_mt-85  {margin-top: -85px !important}
main .sp_mt-90  {margin-top: -90px !important}
main .sp_mt-95  {margin-top: -95px !important}
main .sp_mt-100 {margin-top:-100px !important}
main .sp_mt-105 {margin-top:-105px !important}
main .sp_mt-110 {margin-top:-110px !important}
main .sp_mt-115 {margin-top:-115px !important}
main .sp_mt-120 {margin-top:-120px !important}
main .sp_mt-125 {margin-top:-125px !important}
main .sp_mt-130 {margin-top:-130px !important}
main .sp_mt-135 {margin-top:-135px !important}
main .sp_mt-140 {margin-top:-140px !important}
main .sp_mt-145 {margin-top:-145px !important}
main .sp_mt-150 {margin-top:-150px !important}
main .sp_mt-155 {margin-top:-155px !important}
main .sp_mt-160 {margin-top:-160px !important}
main .sp_mt-165 {margin-top:-165px !important}
main .sp_mt-170 {margin-top:-170px !important}
main .sp_mt-175 {margin-top:-175px !important}
main .sp_mt-180 {margin-top:-180px !important}
main .sp_mt-185 {margin-top:-185px !important}
main .sp_mt-190 {margin-top:-190px !important}
main .sp_mt-195 {margin-top:-195px !important}
main .sp_mt-200 {margin-top:-200px !important}

main .sp_mb0   {margin-bottom:    0 !important}
main .sp_mb05  {margin-bottom:  5px !important}
main .sp_mb10  {margin-bottom: 10px !important}
main .sp_mb15  {margin-bottom: 15px !important}
main .sp_mb20  {margin-bottom: 20px !important}
main .sp_mb25  {margin-bottom: 25px !important}
main .sp_mb30  {margin-bottom: 30px !important}
main .sp_mb35  {margin-bottom: 35px !important}
main .sp_mb40  {margin-bottom: 40px !important}
main .sp_mb45  {margin-bottom: 45px !important}
main .sp_mb50  {margin-bottom: 50px !important}
main .sp_mb55  {margin-bottom: 55px !important}
main .sp_mb60  {margin-bottom: 60px !important}
main .sp_mb65  {margin-bottom: 65px !important}
main .sp_mb70  {margin-bottom: 70px !important}
main .sp_mb75  {margin-bottom: 75px !important}
main .sp_mb80  {margin-bottom: 80px !important}
main .sp_mb85  {margin-bottom: 85px !important}
main .sp_mb90  {margin-bottom: 90px !important}
main .sp_mb95  {margin-bottom: 95px !important}
main .sp_mb100 {margin-bottom:100px !important}
main .sp_mb105 {margin-bottom:105px !important}
main .sp_mb110 {margin-bottom:110px !important}
main .sp_mb115 {margin-bottom:115px !important}
main .sp_mb120 {margin-bottom:120px !important}
main .sp_mb125 {margin-bottom:125px !important}
main .sp_mb130 {margin-bottom:130px !important}
main .sp_mb135 {margin-bottom:135px !important}
main .sp_mb140 {margin-bottom:140px !important}
main .sp_mb145 {margin-bottom:145px !important}
main .sp_mb150 {margin-bottom:150px !important}
main .sp_mb155 {margin-bottom:155px !important}
main .sp_mb160 {margin-bottom:160px !important}
main .sp_mb165 {margin-bottom:165px !important}
main .sp_mb170 {margin-bottom:170px !important}
main .sp_mb175 {margin-bottom:175px !important}
main .sp_mb180 {margin-bottom:180px !important}
main .sp_mb185 {margin-bottom:185px !important}
main .sp_mb190 {margin-bottom:190px !important}
main .sp_mb195 {margin-bottom:195px !important}
main .sp_mb200 {margin-bottom:200px !important}

main .sp_mb-05  {margin-bottom:  -5px !important}
main .sp_mb-10  {margin-bottom: -10px !important}
main .sp_mb-15  {margin-bottom: -15px !important}
main .sp_mb-20  {margin-bottom: -20px !important}
main .sp_mb-25  {margin-bottom: -25px !important}
main .sp_mb-30  {margin-bottom: -30px !important}
main .sp_mb-35  {margin-bottom: -35px !important}
main .sp_mb-40  {margin-bottom: -40px !important}
main .sp_mb-45  {margin-bottom: -45px !important}
main .sp_mb-50  {margin-bottom: -50px !important}
main .sp_mb-55  {margin-bottom: -55px !important}
main .sp_mb-60  {margin-bottom: -60px !important}
main .sp_mb-65  {margin-bottom: -65px !important}
main .sp_mb-70  {margin-bottom: -70px !important}
main .sp_mb-75  {margin-bottom: -75px !important}
main .sp_mb-80  {margin-bottom: -80px !important}
main .sp_mb-85  {margin-bottom: -85px !important}
main .sp_mb-90  {margin-bottom: -90px !important}
main .sp_mb-95  {margin-bottom: -95px !important}
main .sp_mb-100 {margin-bottom:-100px !important}
main .sp_mb-105 {margin-bottom:-105px !important}
main .sp_mb-110 {margin-bottom:-110px !important}
main .sp_mb-115 {margin-bottom:-115px !important}
main .sp_mb-120 {margin-bottom:-120px !important}
main .sp_mb-125 {margin-bottom:-125px !important}
main .sp_mb-130 {margin-bottom:-130px !important}
main .sp_mb-135 {margin-bottom:-135px !important}
main .sp_mb-140 {margin-bottom:-140px !important}
main .sp_mb-145 {margin-bottom:-145px !important}
main .sp_mb-150 {margin-bottom:-150px !important}
main .sp_mb-155 {margin-bottom:-155px !important}
main .sp_mb-160 {margin-bottom:-160px !important}
main .sp_mb-165 {margin-bottom:-165px !important}
main .sp_mb-170 {margin-bottom:-170px !important}
main .sp_mb-175 {margin-bottom:-175px !important}
main .sp_mb-180 {margin-bottom:-180px !important}
main .sp_mb-185 {margin-bottom:-185px !important}
main .sp_mb-190 {margin-bottom:-190px !important}
main .sp_mb-195 {margin-bottom:-195px !important}
main .sp_mb-200 {margin-bottom:-200px !important}

main .sp_w100p {width: 100% !important}
main .sp_w5 {width:  5px !important}
main .sp_w10 {width: 10px !important}
main .sp_w15 {width: 15px !important}
main .sp_w20 {width: 20px !important}
main .sp_w25 {width: 25px !important}
main .sp_w30 {width: 30px !important}
main .sp_w35 {width: 35px !important}
main .sp_w40 {width: 40px !important}
main .sp_w45 {width: 45px !important}
main .sp_w50 {width: 50px !important}
main .sp_w55 {width: 55px !important}
main .sp_w60 {width: 60px !important}
main .sp_w65 {width: 65px !important}
main .sp_w70 {width: 70px !important}
main .sp_w75 {width: 75px !important}
main .sp_w80 {width: 80px !important}
main .sp_w85 {width: 85px !important}
main .sp_w90 {width: 90px !important}
main .sp_w95 {width: 95px !important}
main .sp_w100 {width:100px !important}
main .sp_w105 {width:105px !important}
main .sp_w110 {width:110px !important}
main .sp_w115 {width:115px !important}
main .sp_w120 {width:120px !important}
main .sp_w125 {width:125px !important}
main .sp_w130 {width:130px !important}
main .sp_w135 {width:135px !important}
main .sp_w140 {width:140px !important}
main .sp_w145 {width:145px !important}
main .sp_w150 {width:150px !important}
main .sp_w155 {width:155px !important}
main .sp_w160 {width:160px !important}
main .sp_w165 {width:165px !important}
main .sp_w170 {width:170px !important}
main .sp_w175 {width:175px !important}
main .sp_w180 {width:180px !important}
main .sp_w185 {width:185px !important}
main .sp_w190 {width:190px !important}
main .sp_w195 {width:195px !important}
main .sp_w200 {width:200px !important}
main .sp_w205 {width:205px !important}
main .sp_w210 {width:210px !important}
main .sp_w215 {width:215px !important}
main .sp_w220 {width:220px !important}
main .sp_w225 {width:225px !important}
main .sp_w230 {width:230px !important}
main .sp_w235 {width:235px !important}
main .sp_w240 {width:240px !important}
main .sp_w245 {width:245px !important}
main .sp_w250 {width:250px !important}
main .sp_w255 {width:255px !important}
main .sp_w260 {width:260px !important}
main .sp_w265 {width:265px !important}
main .sp_w270 {width:270px !important}
main .sp_w275 {width:275px !important}
main .sp_w280 {width:280px !important}
main .sp_w285 {width:285px !important}
main .sp_w290 {width:290px !important}
main .sp_w295 {width:295px !important}
main .sp_w300 {width:300px !important}
main .sp_w305 {width:305px !important}
main .sp_w310 {width:310px !important}
main .sp_w315 {width:315px !important}
main .sp_w320 {width:320px !important}
main .sp_w325 {width:325px !important}
main .sp_w330 {width:330px !important}
main .sp_w335 {width:335px !important}
main .sp_w340 {width:340px !important}
main .sp_w345 {width:345px !important}
main .sp_w350 {width:350px !important}
main .sp_w355 {width:355px !important}
main .sp_w360 {width:360px !important}
main .sp_w365 {width:365px !important}
main .sp_w370 {width:370px !important}
main .sp_w375 {width:375px !important}
main .sp_w380 {width:380px !important}
main .sp_w385 {width:385px !important}
main .sp_w390 {width:390px !important}
main .sp_w395 {width:395px !important}
main .sp_w400 {width:400px !important}
main .sp_w405 {width:405px !important}
main .sp_w410 {width:410px !important}
main .sp_w415 {width:415px !important}
main .sp_w420 {width:420px !important}
main .sp_w425 {width:425px !important}
main .sp_w430 {width:430px !important}
main .sp_w435 {width:435px !important}
main .sp_w440 {width:440px !important}
main .sp_w445 {width:445px !important}
main .sp_w450 {width:450px !important}
main .sp_w455 {width:455px !important}
main .sp_w460 {width:460px !important}
main .sp_w465 {width:465px !important}
main .sp_w470 {width:470px !important}
main .sp_w475 {width:475px !important}
main .sp_w480 {width:480px !important}
main .sp_w485 {width:485px !important}
main .sp_w490 {width:490px !important}
main .sp_w495 {width:495px !important}
main .sp_w500 {width:500px !important}
main .sp_w505 {width:505px !important}
main .sp_w510 {width:510px !important}
main .sp_w515 {width:515px !important}
main .sp_w520 {width:520px !important}
main .sp_w525 {width:525px !important}
main .sp_w530 {width:530px !important}
main .sp_w535 {width:535px !important}
main .sp_w540 {width:540px !important}
main .sp_w545 {width:545px !important}
main .sp_w550 {width:550px !important}
main .sp_w555 {width:555px !important}
main .sp_w560 {width:560px !important}
main .sp_w565 {width:565px !important}
main .sp_w570 {width:570px !important}
main .sp_w575 {width:575px !important}
main .sp_w580 {width:580px !important}
main .sp_w585 {width:585px !important}
main .sp_w590 {width:590px !important}
main .sp_w595 {width:595px !important}
main .sp_w600 {width:600px !important}
main .sp_w605 {width:605px !important}
main .sp_w610 {width:610px !important}
main .sp_w615 {width:615px !important}
main .sp_w620 {width:620px !important}
main .sp_w625 {width:625px !important}
main .sp_w630 {width:630px !important}
main .sp_w635 {width:635px !important}
main .sp_w640 {width:640px !important}
main .sp_w645 {width:645px !important}
main .sp_w650 {width:650px !important}
main .sp_w655 {width:655px !important}
main .sp_w660 {width:660px !important}
main .sp_w665 {width:665px !important}
main .sp_w670 {width:670px !important}
main .sp_w675 {width:675px !important}
main .sp_w680 {width:680px !important}
main .sp_w685 {width:685px !important}
main .sp_w690 {width:690px !important}
main .sp_w695 {width:695px !important}
main .sp_w700 {width:700px !important}
main .sp_w705 {width:705px !important}
main .sp_w710 {width:710px !important}
main .sp_w715 {width:715px !important}
main .sp_w720 {width:720px !important}
main .sp_w725 {width:725px !important}
main .sp_w730 {width:730px !important}
main .sp_w735 {width:735px !important}
main .sp_w740 {width:740px !important}
main .sp_w745 {width:745px !important}
main .sp_w750 {width:750px !important}
main .sp_w755 {width:755px !important}
main .sp_w760 {width:760px !important}
main .sp_w765 {width:765px !important}
main .sp_w770 {width:770px !important}
main .sp_w775 {width:775px !important}
main .sp_w780 {width:780px !important}
main .sp_w785 {width:785px !important}
main .sp_w790 {width:790px !important}
main .sp_w795 {width:795px !important}
main .sp_w800 {width:800px !important}
main .sp_w805 {width:805px !important}
main .sp_w810 {width:810px !important}
main .sp_w815 {width:815px !important}
main .sp_w820 {width:820px !important}
main .sp_w825 {width:825px !important}
main .sp_w830 {width:830px !important}
main .sp_w835 {width:835px !important}
main .sp_w840 {width:840px !important}
main .sp_w845 {width:845px !important}
main .sp_w850 {width:850px !important}
main .sp_w855 {width:855px !important}
main .sp_w860 {width:860px !important}
main .sp_w865 {width:865px !important}
main .sp_w870 {width:870px !important}
main .sp_w875 {width:875px !important}
main .sp_w880 {width:880px !important}
main .sp_w885 {width:885px !important}
main .sp_w890 {width:890px !important}
main .sp_w895 {width:895px !important}
main .sp_w900 {width:900px !important}
main .sp_w905 {width:905px !important}
main .sp_w910 {width:910px !important}
main .sp_w915 {width:915px !important}
main .sp_w920 {width:920px !important}
main .sp_w925 {width:925px !important}
main .sp_w930 {width:930px !important}
main .sp_w935 {width:935px !important}
main .sp_w940 {width:940px !important}
main .sp_w945 {width:945px !important}
main .sp_w950 {width:950px !important}
main .sp_w955 {width:955px !important}
main .sp_w960 {width:960px !important}
main .sp_w965 {width:965px !important}
main .sp_w970 {width:970px !important}
main .sp_w975 {width:975px !important}
main .sp_w980 {width:980px !important}
main .sp_w985 {width:985px !important}
main .sp_w990 {width:990px !important}
main .sp_w995 {width:995px !important}
main .sp_w1000 {width:1000px !important}
main .sp_w1005 {width:1005px !important}
main .sp_w1010 {width:1010px !important}
main .sp_w1015 {width:1015px !important}
main .sp_w1020 {width:1020px !important}
main .sp_w1025 {width:1025px !important}
main .sp_w1030 {width:1030px !important}
main .sp_w1035 {width:1035px !important}
main .sp_w1040 {width:1040px !important}
main .sp_w1045 {width:1045px !important}
main .sp_w1050 {width:1050px !important}
main .sp_w1055 {width:1055px !important}
main .sp_w1060 {width:1060px !important}
main .sp_w1065 {width:1065px !important}
main .sp_w1070 {width:1070px !important}
main .sp_w1075 {width:1075px !important}
main .sp_w1080 {width:1080px !important}
main .sp_w1085 {width:1085px !important}
main .sp_w1090 {width:1090px !important}
main .sp_w1095 {width:1095px !important}
main .sp_w1100 {width:1100px !important}
main .sp_w1105 {width:1105px !important}
main .sp_w1110 {width:1110px !important}
main .sp_w1115 {width:1115px !important}
main .sp_w1120 {width:1120px !important}
main .sp_w1125 {width:1125px !important}
main .sp_w1130 {width:1130px !important}
main .sp_w1135 {width:1135px !important}
main .sp_w1140 {width:1140px !important}
main .sp_w1145 {width:1145px !important}
main .sp_w1150 {width:1150px !important}
main .sp_w1155 {width:1155px !important}
main .sp_w1160 {width:1160px !important}
main .sp_w1165 {width:1165px !important}
main .sp_w1170 {width:1170px !important}
main .sp_w1175 {width:1175px !important}
main .sp_w1180 {width:1180px !important}
main .sp_w1185 {width:1185px !important}
main .sp_w1190 {width:1190px !important}
main .sp_w1195 {width:1195px !important}
main .sp_w1200 {width:1200px !important}
}


/* animation
-------------------------------------------------------------*/
/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
  animation-name:rotateXAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
  from{
    transform: rotateX(0);
    opacity: 0;
    }
  to{
    transform: rotateX(-360deg);
    opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ{
  animation-name:rotateLeftZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ{
  animation-name:rotateRightZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  　transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*右から*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*下から*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*上から*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}