@charset "UTF-8";
/* RESET - ADAPTED FROM MEYER RESET URL - http://meyerweb.com/eric/tools/css/reset/ LICENSE - PUBLIC DOMAIN */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, tfoot, thead, time, tr, th, td,u, ul, var, video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}ol, ul{list-style:none;}blockquote, q{quotes:none;}table{border-collapse:collapse;border-spacing:0;}body{line-height:1;}
/* YUI 3.14.1 (build 63049cb) Copyright 2013 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}#yui3-css-stamp.cssfonts{display:none}
/*12 COLUMN :RESPONSIVE GRID SYSTEM DEVELOPER :DENIS LEBLANC URL :http://responsive.gs VERSION :3.0 LICENSE :GPL & MIT */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 4%;}
@media(min-width:769px){
	.container{padding:0;}
}
@font-face{font-family:'fontello';src:url('font/fontello.eot?94586018');src:url('font/fontello.eot?94586018#iefix') format('embedded-opentype'),url('font/fontello.woff2?94586018') format('woff2'),url('font/fontello.woff?94586018') format('woff'),url('font/fontello.ttf?94586018') format('truetype'),url('font/fontello.svg?94586018#fontello') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:normal;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.icon-down-open-big:before{content:'\e800';}.icon-up-open-big:before{content:'\e801';}.icon-right-small:before{content:'\e802';}.icon-up-small:before{content:'\e803';}.icon-left-small:before{content:'\e804';}.icon-down-small:before{content:'\e805';}.icon-cancel:before{content:'\e806';}.icon-twitter:before{content:'\f099';}.icon-youtube-play-1:before{content:'\f16a';}.icon-instagram:before{content:'\f16d';}

// COLOR
@black:#000;
@white:#FFF;
@gray:#999;
@grayL:#ddd;
@red:#E20303;
@purple:#381d60;
@purpleLL:#eae9f2;

// LESS
@ncc:no-repeat center center;
// MIXIN
.trans{transition:0.3s;}
.fb{font-weight:700;}
.fbb{font-weight:900;}
.tac{text-align:center;}
.tar{text-align:right;}
.tdn{text-decoration:none;}
.tdu{text-decoration:underline;}
.bgsc{background-size:cover;}
.inline{display:inline-block;}

/*BASE*/
html,body{width:100%; height:100%; margin:0;}
body{color:@black; line-height:1; -webkit-text-size-adjust:100%; font-weight:400; font-style:normal; font-feature-settings:"palt";
font-family:"Noto Sans JP","游ゴシック Medium","YuGothic M","游ゴシック体","YuGothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Sans","ヒラギノ角ゴシック","Meiryo UI","メイリオ",Meiryo,sans-serif;}
img{max-width:100%; height:auto; vertical-align:middle;}

/*LETTER*/
strong{.fb()}
.wf{font-family:"tt-travels-next";}
.attention{color:@red;}
.fontgray{color:@gray;}
.fontsmall{font-size:85%!important;}
.fontlarge{font-size:124%!important;}
.italic{font-style:italic;}
i.rotate::before{font-size:120%; transform:rotate(-45deg);}
::selection{background:@purple; color:@white;}
::-moz-selection{background:@purple; color:@white;}
/*LINK*/
a:link{color:@black; .tdu(); .trans();}
a:visited{color:@black; .tdu();}
a:hover{color:@gray; .tdu();}
a:active{color:@black; .tdn();}
a img{border:none; .tdn(); .trans();}
a img:hover{opacity:0.6; .tdn();}
/*FADE*/
.fade{opacity:0;}
.faded{opacity:0;}
.fade.fadeSt{animation:fadeIn 0.85s ease-in-out 0.25s forwards;}
.faded.fadeSt{animation:fadeIn 0.85s ease-in-out 0.5s forwards;}

/*LOADING*/
div#loadingWrap{position:fixed; background:@white; top:0; left:0; width:100%; height:100vh; z-index:30000; overflow:hidden; overscroll-behavior:none; pointer-events:none!important;
	div{position:absolute; inset:0; margin:auto; width:180px; max-width:180px; height:fit-content; opacity:0;}
}
div#loadingWrap.fadeaway{animation:faded 0.7s 1.9s linear 1 forwards;
	div{animation:imgfaded 1.5s 0.5s ease 1 forwards;}
}

/*TOP KV*/
div#topteaser{z-index:10000; width:100%; height:100vh; margin:auto; position:relative; overflow:hidden;
	h1{z-index:12000; width:180px; max-width:180px; position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); pointer-events:none;}
	div.txts{color:@white; position:absolute; top:calc(~'50% + 82px'); left:50%; transform:translateY(-50%) translateX(-50%);
		display:inline-grid; place-items:center; overflow:hidden; opacity:0;
		h2{position:relative; font-size:16px; letter-spacing:1px; line-height:1.1; grid-area:1/1; margin:0; white-space:nowrap; opacity:0; .tac();
			animation:swapCycle 10s ease-in-out infinite;
		}
		h2:nth-child(1){animation-delay:0s;}
		h2:nth-child(2){animation-delay:5s;}
		h2::before,h2::after{content:attr(data-text); position:absolute; inset:0; text-align:inherit; opacity:0; clip:rect(0, 9999px, 0, 0); pointer-events:none;}
		h2::before{color:#eaff00; mix-blend-mode:screen; animation:glitchBefore 2s infinite linear alternate-reverse;}
		h2::after{color:#98fafa; mix-blend-mode:screen; animation:glitchAfter 2s infinite linear alternate-reverse;}
	}
	div.logoline{width:100%; height:100vh; margin:0 auto; position:relative; overflow:hidden; pointer-events:none;
		img{width:180px; display:block; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}
	}
}
div#topteaser.appear{
	div.txts{opacity:1; transition:all 0.6s 4.8s ease;}
	div.logoline{opacity:0.1; transition:all 0.6s 4.2s ease;
		img{transform:translate(0%,0%); transition:all 1.5s 2.6s ease;}
		.z0{z-index:10000;}
		.z1{z-index:10010;}
		.z2{z-index:10020;}
		.z3{z-index:10030;}
		.z4{z-index:10040;}
		.z5{z-index:10050;}
		.z6{z-index:10060;}
		.z7{z-index:10070;}
		.z8{z-index:10080;}
		.z9{z-index:10090;}
		img.t0{top:0%; right:0%; opacity:0;}
		img.t1{top:10%; right:5%; opacity:0.9;}
		img.t2{top:20%; right:10%; opacity:0.8;}
		img.t3{top:30%; right:15%; opacity:0.7;}
		img.t4{top:40%; right:20%; opacity:0.6;}
		img.t5{top:50%; right:25%; opacity:0.5;}
		img.t6{top:60%; right:30%; opacity:0.4;}
		img.t7{top:70%; right:35%; opacity:0.3;}
		img.t8{top:80%; right:40%; opacity:0.2;}
		img.t9{top:90%; right:45%; opacity:0.1;}
		img.b0{bottom:0%; left:0%; opacity:0;}
		img.b1{bottom:10%; left:5%; opacity:0.9;}
		img.b2{bottom:20%; left:10%; opacity:0.8;}
		img.b3{bottom:30%; left:15%; opacity:0.7;}
		img.b4{bottom:40%; left:20%; opacity:0.6;}
		img.b5{bottom:50%; left:25%; opacity:0.5;}
		img.b6{bottom:60%; left:30%; opacity:0.4;}
		img.b7{bottom:70%; left:35%; opacity:0.3;}
		img.b8{bottom:80%; left:40%; opacity:0.2;}
		img.b9{bottom:90%; left:45%; opacity:0.1;}
	}
}
/*CANVAS*/
canvas{z-index:11000; position:absolute; bottom:calc(~'50% - 100px'); left:0; width:100%; pointer-events:none; overflow:hidden;}

/*HEADER*/
header{z-index:20000; position:fixed; top:24px; left:4%;
	h1{position:relative; width:90px; .trans();
		a{display:block;}
	}
}
header.fixed{mix-blend-mode:exclusion;
	h1{width:60px;}
}
/*LAYOUT*/
div.wrapper{position:relative; display:block; width:100%; overflow:hidden;}
main{position:relative; clear:both; display:block;}

/*TOPBOX*/
div.topbox{z-index:10; position:relative; padding:15% 0; margin:0 auto; overflow:hidden;
	h2.ttl{font-size:30px; margin:0 0 9%;
		background:linear-gradient(180deg, @white 0%, @purple 125%);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
	}
}
div.teasertxt{width:fit-content; margin:0 auto 12%; 
	h2{font-size:22px; letter-spacing:2px; line-height:1;
		span{background:@white; opacity:0; padding:3px; width:0; max-width:fit-content!important; white-space:nowrap; display:block; text-box-trim:trim-both;
			em{color:@purple; opacity:0; white-space:nowrap; display:block; width:fit-content; padding:0 5px; .fbb();}
		}
	}
	h2:first-child{margin:0 0 10px}
}
div.teasertxt.animSt{
	h2{
		span{animation:txtbg 0.5s ease-in-out 0.1s forwards;
			em{animation:txtin 0.5s ease-in-out 0.6s forwards;}
		}
	}
}

div.ticker{width:100%; white-space:nowrap; padding:0; pointer-events:none; overflow:hidden;
	ul{.inline(); animation:hscroll 180s linear infinite; opacity:0.1;
		li{.inline(); font-size:48px; padding:0 10px 0 0; letter-spacing:0; .fb();
			background:linear-gradient(180deg, @white 0%, @purple 90%);
			-webkit-background-clip:text;
			-webkit-text-fill-color:transparent;
		}
	}
}

div.topabout{color:@white; background:radial-gradient(circle,rgba(56,29,96,1) 0%,rgba(0,0,0,1) 100%);
	article{
		section{margin:0 auto; .tac();
			div.imgbox{width:100%; margin:0 auto 12%;
				img{position:relative; display:block; width:60%;}
				img:first-child{margin:0; z-index:2;}
				img:last-child{margin:-16% 0 0 auto; z-index:1;}
			}
			h2{font-size:27px; margin:0 0 9%; letter-spacing:1px;
				background:linear-gradient(180deg, @white 0%, @purple 125%);
				-webkit-background-clip:text;
				-webkit-text-fill-color:transparent;
			}
			h3{font-size:18px; margin:0 0 9%; letter-spacing:1px; line-height:1.7; .fbb();}
			p{font-size:13px; letter-spacing:0.5px; line-height:2.2; .fb(); .tac(); margin:0 auto 9%;}
		}
	}
	div.tickerbox{z-index:-1; position:absolute; top:0; left:0; overflow:hidden; width:100%;}
	div.tickerbox2{z-index:-1; position:absolute; bottom:0; left:0; overflow:hidden; width:100%;
		div.ticker{
			ul{animation:hscrollrev 350s linear infinite;}
		}
	}
}

div.sbtn{width:fit-content; margin:0 auto 30px; font-size:12px; .tac();
	a{display:block; padding:15px 22px 15px; border-radius:64px; border:1px solid @white;
		i{font-size:20px; vertical-align:sub;}
	}
	a:link{color:@white; .tdn();}
	a:visited{color:@white; .tdn();}
	a:hover{background:@purple; color:@white; .tdn();}
	a:active{color:@white; .tdn();}
}

div.topfeature{
	ul.ilist{padding:0 6%;
		li{margin:0 0 9%; padding:6%; background:@purpleLL; border-radius:4px; box-shadow:0px 0px 15px rgba(136,136,136,0.3); overflow:hidden;
			h3{font-size:24px; letter-spacing:2px; margin:0 0 5px; .fb(); .tac(); color:@purple;}
			h4{font-size:13px; letter-spacing:1px; margin:0 0 20px; .tac(); color:@purple;}
			h5{font-size:13px; letter-spacing:1px; margin:0 0 20px; .fb(); .tac(); color:@purple;}
			a{display:block;}
			img{display:block; margin:0 auto 20px; width:60%; border-radius:50%; box-shadow:0px 0px 8px rgba(136,136,136,0.15);}
			p{text-align:left; font-size:12px; line-height:1.6; letter-spacing:0.5px;
				span.gr{color:@gray;}
			}
		}
		li:last-child{margin:0;}
	}
}

div.topsunny{background:@black; color:@white;
	section{
		a{display:block; width:60%; margin:0 auto 9%;
			img{display:block; border-radius:4px;}
		}
		div{
			h3{font-size:28px; letter-spacing:2px; margin:0 0 30px;}
			h4{font-size:14px; letter-spacing:1px; line-height:1.6; margin:0 0 20px; .fb();}
			p{font-size:12px; letter-spacing:0.5px; line-height:1.6;}
		}
	}
}

div.topfee{
	div.coursebox{background:@purpleLL; border-radius:4px; padding:6%;}
}
div.topcur{color:@white; background:radial-gradient(circle,rgba(56,29,96,1) 0%,rgba(0,0,0,1) 100%);
	h3{font-size:22px; .tac(); .fb(); letter-spacing:1px;}
	h4{font-size:17px; .tac(); .fb(); letter-spacing:1px; line-height:2.5; margin:0 0 6%;}
}

/*TABLE*/
table.btbl{width:100%; margin:0;
	tr{width:100%; line-height:1.6; border-top:1px solid @grayL;
		th{width:100%; display:block; padding:10px; text-align:left; white-space:nowrap; letter-spacing:0.5px; .fbb(); background:@white;}
		td{width:100%; display:block; padding:10px 0;}
	}
	tr:last-child{border-bottom:1px solid @grayL;}
}
table.ntbl{width:100%; margin:0;
	tr{width:100%; line-height:1.6; border-top:1px solid @purple;
		th{padding:15px 15px 15px 0; white-space:nowrap; vertical-align:middle; letter-spacing:0.5px; .tar(); .fbb();}
		td{padding:15px 0; vertical-align:middle;}
	}
	tr:last-child{border-bottom:1px solid @purple;}
}

div.topfaq{}
ul.faqlist{
	li{margin:0 0 12px; background:@purpleLL; color:@black; box-shadow:0px 0px 12px rgba(136,136,136,0.15); border-radius:4px;
		section:first-child{padding:5%; width:100%; cursor:pointer; .trans();
			display:flex;
			-webkit-flex-flow:row nowrap; flex-flow:row nowrap; 
			-webkit-justify-content:space-between; justify-content:space-between;
			-webkit-align-items:center; align-items:center;
			span{font-size:18px; width:1.5em; .fb(); color:@purple;}
			h4{word-wrap:break-word; width:85%; font-size:13px; line-height:1.7; .fb();}
		}
		section:last-child{padding:5%; background:@white; border-radius:0 0 4px 4px;
			display:flex;
			-webkit-flex-flow:row nowrap; flex-flow:row nowrap; 
			-webkit-justify-content:space-between; justify-content:space-between;
			-webkit-align-items:flex-start; align-items:flex-start;
			span{font-size:18px; width:1.5em; .fb(); color:@purple;}
			p{font-size:13px; line-height:1.6; width:92%; color:@black;}
		}
		section:first-child:hover{opacity:0.7;}
		section.none-submenu:after{.fb(); width:1.5em; content:'↓'; font-family:-apple-system,"system-ui","Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size:116%; line-height:1; float:right;}
		section.active-submenu:after{.fb(); width:1.5em; content:'↑'; font-family:-apple-system,"system-ui","Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size:116%; line-height:1; float:right;}
	}
}

div.linkbtn{width:100%; margin:0 auto 6%; font-size:20px; letter-spacing:2px; color:@white; .tac(); .fbb();
	a{display:block; padding:20px 0 22px; border-radius:64px; background:@purple; box-shadow:0px 0px 15px rgba(136,136,136,0.3);}
	a:link{color:@white; .tdn();}
	a:visited{color:@white; .tdn();}
	a:hover{background:@purple; color:@white; .tdn();}
	a:active{color:@white; .tdn();}
}

/*PAGE*/
section.pagettl{padding:152px 0 100px;
	h2{font-size:30px; letter-spacing:1px; .tac();
		background:linear-gradient(180deg, @white 0%, @purple 125%);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
	}
}
div.pagebody{width:100%; margin:0 auto 12%;
	article{width:100%; margin:0 auto; padding:18px 18px 1px; border-radius:4px; background:@white;
		h3{font-size:18px; letter-spacing:1px; padding:0 0 10px; margin:0 0 24px; line-height:1.5; border-bottom:1px solid @purple; .fb();}
		div.postbody{line-height:1.7; margin:0 0 9%;
			p{font-size:14px; margin:0 0 6%;}
			p>img{margin:0;}
			img{margin-bottom:6%;}
		}
	}
}

/*CONTACT*/
table.mailform{width:100%; margin-bottom:20px; font-size:16px;
	tr{width:100%; border-top:1px solid @grayL; border-bottom:1px solid @grayL;
		th{padding:12px 0 5px; width:100%; display:block; text-align:left; .fb();}
		td{padding:5px 0 12px; width:100%; display:block;}
	}
	textarea{width:100%; padding:10px; font-size:16px; resize:vertical; background:@white; border:1px solid #777;}
	input{width:100%; padding:10px; font-size:16px;}
	tr{
		th{text-align:left;}
	}
	div.ppbox{border:1px solid #777; padding:15px 20px; height:220px; overflow:hidden; overflow-y:scroll;
		p{margin:0!important;}
	}
}
input[type="radio"]{width:auto!important; vertical-align:baseline; .inline();}
input[type="checkbox"]{width:auto!important; vertical-align:baseline; .inline();}
input[type="submit"],button{-webkit-appearance:button; cursor:pointer; outline:none;}
input.soushin{position:relative; width:100%; font-size:116%; border:none; .inline(); .fb(); .tac(); .tdn(); .trans(); padding:15px 0;
border-radius:6px; background-color:none; background:@white; color:@black; -webkit-transition:none; transition:none; cursor:pointer; border:3px solid @black;}
input.soushin:hover{background-color:@purple; border:3px solid @purple; color:@white;}
input.soushin:active{background-color:@white;}
img.ajax-loader{float:left; width:auto!important;}

/*FOOTER*/
footer{position:relative; z-index:10; background:@black; padding:66px 6%;
	h1{width:180px; margin:0 auto 42px;}
	small{font-size:10px; display:block; color:@white; .tac();}
}

/*** BN ***/
div.bn{z-index:20004; position:fixed; right:2%; bottom:2%; width:124px; .trans();
	a{z-index:20005; position:relative; display:block;
		p{z-index:20005; position:absolute; display:block; font-size:12px; line-height:1.5; .tac(); .fbb(); top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; color:@purple;}
	}
	div.bg{animation:rotation 15s linear infinite;
		img{opacity:1!important;}
	}
}
div.bn:hover{opacity:0.7;}

/****************************************************/
/************************ PC ************************/
/****************************************************/
@media(min-width:769px){
.sp{display:none!important;}
body{background:url("../img/bg/math.jpg") @ncc; .bgsc(); background-attachment:fixed;}

/*LOADING*/
div#loadingWrap{
	div{width:280px; max-width:280px;}
}

/*TOP KV*/
div#topteaser{
	h1{width:280px; max-width:280px;}
	div.txts{top:calc(~'50% + 124px'); 
		h2{font-size:23px;}
	}
	div.logoline{
		img{width:280px;}
	}
}

/*HEADER*/
header{top:24px; left:2%; width:96%;
	display:flex;
	flex-flow:row nowrap; 
	justify-content:space-between;
	align-items:center;
	h1{width:136px;}
	nav{
		ul{
			display:flex;
			flex-flow:row nowrap; 
			justify-content:space-between;
			align-items:flex-start;
			li{margin:0 0 0 24px; .fb();
				a{white-space:nowrap;}
				a:link{color:@white; .tdn();}
				a:visited{color:@white; .tdn();}
				a:hover{color:@gray; .tdn();}
				a:active{color:@white; .tdn();}
			}
		}
	}
}
header.fixed{
	h1{width:88px;}
}

/*TOPBOX*/
div.topbox{padding:120px 0;
	h2.ttl{font-size:48px; margin:0 0 72px;}
}
div.teasertxt{margin:0 auto 120px; 
	h2{font-size:46px; letter-spacing:4px;
		span{padding:4px;
			em{padding:0 12px;}
		}
	}
	h2:first-child{margin:0 0 10px}
}

div.ticker{
	ul{
		li{font-size:150px;}
	}
}

div.topabout{
	article{
		section{margin:0 auto; .tac();
			div.imgbox{width:100%; margin:0 auto 120px;}
			h2{font-size:48px; margin:0 0 60px; letter-spacing:1px;}
			h3{font-size:27px; margin:0 0 60px; letter-spacing:2px;}
			p{font-size:16px; letter-spacing:0.5px; line-height:2.2; margin:0 auto 42px;}
		}
	}
}

div.sbtn{margin:0 auto 42px; font-size:14px;
	a{border-radius:64px;
		i{font-size:24px;}
	}
}

div.topfeature{
	ul.ilist{padding:0; display:flex; flex-flow:row nowrap;
		li{width:31%; margin:0 3.5% 0 0; padding:30px;
			h3{font-size:27px; margin:0 0 5px;}
			h4{font-size:16px; letter-spacing:2px;}
			h5{font-size:14px;}
			img{width:66%;}
			p{font-size:13px;}
		}
	}
}

div.topsunny{
	section{
		display:flex;
		flex-flow:row nowrap; 
		align-items:center;
		a{width:33%; margin:0;}
		div{padding:0 0 0 60px;
			h3{font-size:38px;}
			h4{font-size:16px; margin:0 0 30px;}
			p{font-size:14px;}
		}
	}
}

div.topfee{
	div.coursebox{padding:72px;}
}
div.topcur{
	h3{font-size:36px; letter-spacing:3px;}
	h4{font-size:28px; letter-spacing:3px; margin:0 0 60px;}
}

/*TABLE*/
table.btbl{font-size:15px;
	tr{line-height:1.7;
		th{padding:15px; letter-spacing:1px;}
		td{padding:15px 0;}
	}
	tr:last-child{border-bottom:1px solid @grayL;}
}
table.ntbl{font-size:15px; width:72%; margin:0 auto;
	tr{line-height:1.7;
		th{padding:18px; letter-spacing:2px;}
		td{padding:18px;}
	}
	tr:last-child{border-bottom:1px solid @purple;}
}

ul.faqlist{width:72%; margin:0 auto;
	li{margin:0 0 20px;
		section:first-child{padding:36px 60px;
			span{font-size:22px;}
			h4{font-size:16px; letter-spacing:1px;}
		}
		section:last-child{padding:36px 60px; border-radius:0 0 20px 20px;
			span{font-size:22px;}
			p{font-size:16px;}
		}
	}
}

/*PAGE*/
section.pagettl{padding:196px 0 128px;
	h2{font-size:46px; letter-spacing:3px;}
}
div.pagebody{margin:0 auto 120px;
	article{width:84%; padding:36px 42px 1px;
		h3{font-size:24px; letter-spacing:2px;}
		div.postbody{margin:0 0 60px;
			p{font-size:16px; margin:0 0 24px;}
			img{margin-bottom:24px;}
		}
	}
}

/*FOOTER*/
footer{padding:90px 6% 45px;
	h1{width:220px; margin:0 auto 72px;}
	small{font-size:12px;}
}
/*** BN ***/
div.bn{width:180px;
	a{
		p{font-size:17px; letter-spacing:1px;}
	}
	div.bg{animation:rotation 18s linear infinite;}
}

}
/************************ SP ************************/
@media (max-width:768px){
.pc{display:none;}
.spmb{margin-bottom:6%;}
body::before{
	content:"";
	display:block;
	position:fixed;
	overflow:hidden;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url("../img/bg/mathsp.jpg") @ncc;
	.bgsc();
}
/*SP NAV*/
button.spmenu{z-index:20003; position:fixed; top:27px; right:4%; height:22px; width:34px;
	background-color:transparent; border:none; cursor:pointer; outline:none; padding:0; appearance:none;
	span{z-index:20002; position:absolute; left:0; width:100%; height:2px; background-color:@white; .inline(); .trans();}
	span:nth-of-type(1){top:0px;}
	span:nth-of-type(2){top:10px;}
	span:nth-of-type(3){bottom:0px;}
}
button.spmenu.fixed{mix-blend-mode:exclusion;}
button.spmenu.active{position:fixed;
	span{background-color:@white;}
	span:nth-of-type(1){-webkit-transform:translateY(10px) rotate(45deg); transform:translateY(10px) rotate(45deg);}
	span:nth-of-type(2){opacity:0;}
	span:nth-of-type(3){-webkit-transform:translateY(-10px) rotate(-45deg); transform:translateY(-10px) rotate(-45deg);}
}
div#spnav{z-index:20001; position:fixed; top:0; right:0; width:100%; height:100%; opacity:0; background:rgba(0,0,0,0.85); .trans();
	overflow-y:auto; -webkit-overflow-scrolling:touch; visibility:hidden; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
div#spnav.active{right:0; opacity:1; -moz-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); visibility:visible;}
ul.mainnav{padding:75px 0 0;
	li{text-align:right;
		>a{padding:15px 4%; display:block; font-size:18px; letter-spacing:2px; .fb();}
		a:link{color:@white; .tdn(); .trans();}
		a:visited{color:@white; .tdn();}
		a:hover{color:@gray; .tdn();}
		a:active{color:@white; .tdn();}
	}
}

}
/************************ ANIM ************************/
@keyframes fadeIn{
	  0%{opacity:0; transform:translate(0,12px);}
	100%{opacity:1; transform:translate(0,0px);}
}
@keyframes faded{
	  0%{opacity:1; display:block;}
	 99%{opacity:0; display:block;}
	100%{opacity:0; display:none;}
}
@keyframes imgfaded{
	0%{transform:scale(2,2); filter:blur(30px); opacity:0;}
	99%{transform:scale(1,1); filter:blur(0px); opacity:1;}
	100%{transform:scale(1,1); filter:blur(0px); opacity:1;}
}
@keyframes swapCycle{
	  0%{opacity: 0; transform:translateY(0);}
	  5%{opacity: 1; transform:translateY(0);}
	 35%{opacity: 1; transform:translateY(0);}
	 49%{opacity:.9; transform:translateY(0px);}
	 50%{opacity: 0; transform:translateY(-12px);}
	100%{opacity: 0; transform:translateY(0);}
}
@keyframes glitchBefore{
	  0%{clip:rect(0,   9999px,0,   0); opacity:0; transform:translate(0,0);}
	  6%{clip:rect(6px, 9999px,34px,0); opacity:1; transform:translate(-2px,-2px) skewX(-1deg);}
	 12%{clip:rect(18px,9999px,48px,0);}
	 18%{clip:rect(10px,9999px,28px,0);}
	 24%{clip:rect(22px,9999px,54px,0); opacity:.8; transform:translate(-1px,-1px);}
	 30%{clip:rect(0,   9999px,0,   0); opacity:0; transform:translate(0,0);}
	100%{clip:rect(0,   9999px,0,   0); opacity:0;}
}
@keyframes glitchAfter{
	  0%{clip:rect(0,   9999px, 0,   0); opacity:0; transform:translate(0,0);}
	  6%{clip:rect(14px,9999px, 40px,0); opacity:1; transform:translate(2px,2px) skewX(1deg);}
	 12%{clip:rect(26px,9999px, 58px,0);}
	 18%{clip:rect(8px, 9999px, 24px,0);}
	 24%{clip:rect(20px,9999px, 50px,0); opacity:.8; transform:translate(1px,1px);}
	 30%{clip:rect(0,   9999px, 0,   0); opacity:0; transform:translate(0,0);}
	100%{clip:rect(0,   9999px, 0,   0); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
	div#topteaser div.txts h2{animation:none!important; opacity:1;}
	div#topteaser div.txts h2::before,#topteaser .txts h2::after{animation:none!important; opacity:0;}
}
@keyframes txtbg{
	  0%{opacity:0; width:0%;}
	  1%{opacity:1; width:0%;}
	100%{opacity:1; width:100%;}
}
@keyframes txtin{
	  0%{opacity:0; filter:blur(5px);}
	100%{opacity:1; filter:blur(0px);}
}
@keyframes sliderAnimation{
	to{transform:translateX(-50%);}
}
@keyframes hscroll{
	to{transform:translateX(-50%);}
}
@keyframes hscrollrev{
	0%{transform:translateX(-100%);}
	100%{transform:translateX(4%);}
}
@keyframes rotation{
	  0%{transform:rotate(360deg);}
	100%{transform:rotate(0);}
}
/************************ NOISE ************************/
div.noisewrap{z-index:-1; position:absolute; display:block; overflow:hidden; top:0; left:0; width:100%; height:100%;}
div.noisebg{width:100%; height:100%; opacity:0.25;}
div.noisebg::before{content:''; position:absolute; display:block; top:-50%; left:-50%; width:200%; height:200%;
	background-image:url(../img/bg/noise.png); will-change:transform; animation:noiseBGS 0.9s steps(4) infinite;
}
div.noisebk::before{background-image:url(../img/bg/noisebk.png);}
@keyframes noiseBGS{
	  0%{transform:translate(0);}
	 10%{transform:translate(-5%,-5%);}
	 20%{transform:translate(-10%,5%);}
	 30%{transform:translate(5%,-10%);}
	 40%{transform:translate(-5%,15%);}
	 50%{transform:translate(-10%,5%);}
	 60%{transform:translate(15%);}
	 70%{transform:translateY(10%);}
	 80%{transform:translate(-15%);}
	 90%{transform:translate(10%,5%);}
	100%{transform:translate(5%);}
}