@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, textarea, 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;}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 */
/* SET ALL ELEMENTS TO BOX-SIZING :BORDER-BOX */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/*MAIN CONTAINER Set the width to whatever you want the width of your site to be. */
.container{width:100%; max-width:1080px; margin:0 auto; padding:0 6%;}
/*SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,.row:after,.col:after,.clr:after,.group:after{content:"";display:table;clear:both;}
/* DEFAULT ROW STYLES Set bottom padding according to preference */
.row{padding:auto; margin:0 auto;}
/* DEFAULT COLUMN STYLES */
.col{display:block;float:left;width:100%;}
.reverse .col{float:right;}
@media(min-width:769px){
	.container{width:1080px; padding:0 20px;}
	.gutters .col{margin-left:2%;}
	.gutters .col:first-child{margin-left:0;}
	.reverse .gutters .col{margin-left:0; margin-right:2%;}
	.reverse .gutters .col:first-child{margin-right:0;}
}
/*COLUMN WIDTH ON DISPLAYS +768px You might need to play with media queries here to suite your design. */
@media(min-width:769px){
.span_1 {width:8.33333333333%;}
.span_2 {width:16.6666666667%;}
.span_3 {width:25%;}
.span_4 {width:33.3333333333%;}
.span_5 {width:41.6666666667%;}
.span_6 {width:50%;}
.span_7 {width:58.3333333333%;}
.span_8 {width:66.6666666667%;}
.span_9 {width:75%;}
.span_10{width:83.3333333333%;}
.span_11{width:91.6666666667%;}
.span_12{width:100%;}
.gutters .span_1 {width:6.5%;}
.gutters .span_2 {width:15.0%;}
.gutters .span_3 {width:23.5%;}
.gutters .span_4 {width:32.0%;}
.gutters .span_5 {width:40.5%;}
.gutters .span_6 {width:49.0%;}
.gutters .span_7 {width:57.5%;}
.gutters .span_8 {width:66.0%;}
.gutters .span_9 {width:74.5%;}
.gutters .span_10{width:83.0%;}
.gutters .span_11{width:91.5%;}
.gutters .span_12{width:100%;}
}

@font-face {
  font-family: 'fontello';
  src: url('font/fontello.eot?40979728');
  src: url('font/fontello.eot?40979728#iefix') format('embedded-opentype'),
       url('font/fontello.woff2?40979728') format('woff2'),
       url('font/fontello.woff?40979728') format('woff'),
       url('font/fontello.ttf?40979728') format('truetype'),
       url('font/fontello.svg?40979728#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  margin-left: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-cancel:before { content: '\e804'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-angle-left:before { content: '\f104'; } /* '' */
.icon-angle-right:before { content: '\f105'; } /* '' */
.icon-angle-up:before { content: '\f106'; } /* '' */
.icon-angle-down:before { content: '\f107'; } /* '' */
.icon-youtube-play:before { content: '\f16a'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-facebook-official:before { content: '\f230'; } /* '' */

// COLOR
@black:#000;
@white:#FFF;
@suzu:#9EA1A3;
@gray:#ccc;
@grayD:#999;
@grayL:#bebebe;
@grayLL:#eee;
@grayLLL:#f5f5f5;
@orange:#e24413;
@red:#b21e28;
@yellow:#f5d003;
@green:#48a769;
@greenL:#dde6e1;

@ncc:no-repeat center center;

// MIXIN
.trans{-webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; transition:0.3s;}
.trans1{-webkit-transition:1s; -moz-transition:1s; -o-transition:1s; -ms-transition:1s; transition:1s;}
.trans2{-webkit-transition:2s; -moz-transition:2s; -o-transition:2s; -ms-transition:2s; transition:2s;}
.trans3{-webkit-transition:3s; -moz-transition:3s; -o-transition:3s; -ms-transition:3s; transition:3s;}
.trans4{-webkit-transition:4s; -moz-transition:4s; -o-transition:4s; -ms-transition:4s; transition:4s;}
.fb{font-weight:bold;}
.tac{text-align:center;}
.tdn{text-decoration:none;}
.tdu{text-decoration:underline;}
.bgsc{-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
.inline{display:-moz-inline-box; display:inline-block;}
.italic{font-style:italic;}

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

/*CF*/
.cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;}

/*LETTER*/
strong{.fb();}
.wf{font-family:futura-pt;}
.attention{color:@red;}
.fontsmall{font-size:85%!important;}
.fontlarge{font-size:124%!important;}
::selection{background:@orange; color:@black;}
::-moz-selection{background:@black; color:@black;}

/*LINK*/
a:link{color:@orange; .tdu(); .trans();}
a:visited{color:@orange; .tdu();}
a:hover{color:@black; .tdu();}
a:active{color:@orange; .tdu();}
a img{border:none; .tdn(); .trans();}
a img:hover{border:none; opacity:0.7; .tdn();}

/*NAV TOGGLE*/
div.navcircle{z-index:999; position:fixed; top:-100px; left:-100px; border-radius:50%; width:200px; height:200px; background:@white;}
#nav-toggle{z-index:1000; position:fixed; cursor:pointer; top:22px; left:20px; height:24px;}
#nav-toggle > div{position:relative; width:34px;}
#nav-toggle span{position:absolute; display:block; width:100%; height:2px; left:0; border-radius:2px; background:@black;
	transition:top .1s linear, -webkit-transform .3s linear;
	transition:transform .1s linear, top .1s linear;
	transition:transform .1s linear, top .1s linear, -webkit-transform .3s linear;
}
#nav-toggle span:nth-child(1){top:0;}
#nav-toggle span:nth-child(2){top:10px;}
#nav-toggle span:nth-child(3){top:20px;}
#nav-toggle:hover span:nth-child(1){top:3px;}
#nav-toggle:hover span:nth-child(3){top:17px;}
.open #nav-toggle span:nth-child(1){top:13px; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.open #nav-toggle span:nth-child(2){top:13px; width:0; left:50%;}
.open #nav-toggle span:nth-child(3){top:13px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}

/*NAV UL*/
#gloval-nav{position:fixed; background:rgba(255,255,255,0.9); width:100%; top:0; left:0; right:0; bottom:0; padding-left:0;
	display:flex; flex-direction:column; justify-content:center;
	-webkit-transform:translateX(200%);
			transform:translateX(200%);
	transition: -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	nav{z-index:998;}
}
.open #gloval-nav{z-index:998;
	-webkit-transform:translateX(0);
			transform:translateX(0);
}
#gloval-nav ul{margin:0 10%;}
#gloval-nav ul li{position:relative; text-align:right; letter-spacing:3px; font-size:22px;
	-webkit-transform: translateX(-200px);
			transform: translateX(-200px);
	transition:-webkit-transform 1.5s ease;
	transition:transform 1.5s ease;
	transition:transform 1.5s ease, -webkit-transform 1.5s ease;
	a{padding:15px 0; .tdn(); .inline();}
	a:link{color:@black;}
	a:visited{color:@black;}
	a:hover{color:@orange;}
	a:active{color:@black;}
}
#gloval-nav ul li.ja{font-size:12px; letter-spacing:1px;}
#gloval-nav ul li:nth-child(2){transition-delay: 0.2s;}
#gloval-nav ul li:nth-child(3){transition-delay: 0.4s;}
#gloval-nav ul li:nth-child(4){transition-delay: 0.6s;}
#gloval-nav ul li:nth-child(5){transition-delay: 0.8s;}
#gloval-nav ul li:nth-child(6){transition-delay: 1.0s;}
#gloval-nav ul li:nth-child(7){transition-delay: 1.2s;}
#gloval-nav ul li:nth-child(8){transition-delay: 1.4s;}
.open #gloval-nav li{
	-webkit-transform:translateX(0);
			transform:translateX(0);
}

/*SVG*/
div#splash{z-index:10000; position:fixed; width:100%; height:100%; background:@suzu;}
div#splash_logo {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
div#splash_logo svg{width:12px;}
svg#mask path{fill-opacity:0; transition:fill-opacity 0.5s; fill:none; stroke:@white;}
svg#mask.done path{fill:@white; fill-opacity:1; stroke:none;}

/*HEADER*/
header{position:absolute; z-index:910; padding:16px; top:22px; right:20px; background:@white;
	h1{width:6px;}
}

/*LAYER*/
div.layer{position:relative; overflow:hidden; width:100%; height:auto; z-index:1;}
main{width:100%; max-width:100%;}

/*SLIDER*/
div.topteaser{position:relative; width:100%; height:~"calc(100vh - 66px)"; margin:0 auto; z-index:900;}
div#sliderbox{position:relative; width:100%; height:~"calc(100vh - 66px)"; margin:0;}
ul#carousel{position:relative; width:100%; height:~"calc(100vh - 66px)"; margin:0;
	li{display:block; width:100%; height:~"calc(100vh - 66px)";}
	li.bg01{background:url("../img/slider/01sp.jpg") @ncc; .bgsc();}
	li.bg02{background:url("../img/slider/02.jpg") @ncc; .bgsc();}
	li.bg03{background:url("../img/slider/03.jpg") @ncc; .bgsc();}
}
/*TOP*/
div.topbox{position:relative; width:100%;
	a:link{color:@black; .tdn();}
	a:visited{color:@black; .tdn();}
	a:hover{color:@black; .tdn();}
	a:active{color:@black; .tdn();}
	section{line-height:1.9; .tac();
		h2{font-size:132%; letter-spacing:3px;}
		h3{font-size:93%; letter-spacing:3px;}
	}
}
div.topblend{background:@yellow; height:50vh;
	a{height:50vh;}
	section{position:absolute; top:50%; transform:translateY(-50%); margin:0 auto; width:100%;}
	h2{opacity:0; width:100%; .tac();}
	h3{opacity:0; width:100%; .tac();}
}
div.topabout{
	div.aboutsen{height:auto;
		a{display:block; width:40vh; height:40vh; margin:15% auto; border-radius:50%; background:url("../img/bg/top01.jpg") @ncc; .bgsc(); animation:fluidrotate 20s ease 1.5s infinite;
			section{height:40vh;
				display:-webkit-flex; display:flex;
				-webkit-justify-content:center; justify-content:center;
				-webkit-align-items:center; align-items:center;
			}
		}
	}
	div.aboutsex{height:35vh;
		a{height:35vh;
			display:-webkit-flex; display:flex;
			-webkit-flex-flow:row nowrap; flex-flow:row nowrap; 
			-webkit-justify-content:center; justify-content:center;
			-webkit-align-items:center; align-items:center;
			section{height:35vh; width:50%; background:url("../img/bg/top02.jpg") @ncc; .bgsc();
				div.bg{background:rgba(0,0,0,0.3); height:35vh; width:100%;
					display:-webkit-flex; display:flex;
					-webkit-justify-content:center; justify-content:center;
					-webkit-align-items:center; align-items:center;
					h2{color:@white; line-height:1;
						span{background:@black; padding:0 5px 3px 9px;}
					}
				}
			}
			section:last-child{background:url("../img/bg/top03.jpg") @ncc; .bgsc();}
		}
	}
}
div.topcollabo{background:@grayLL; padding:12% 6%;
	section{padding:6% 0;
		h2{font-size:169%;}
	}
}
ul.postlist{margin:0 0 12%;
	li{margin:0 0 9%;
		a{line-height:1.85;
			article{
				div{
					img{border-radius:54px 10px 54px 10px;}
					h3{font-size:100%; margin:0 0 10px;}
					p{font-size:85%;}
				}
				div:first-child{margin:0 0 15px;}
			}
		}
		a:link{color:@black; .tdn();}
		a:visited{color:@black; .tdn();}
		a:hover{color:@black; .tdn();}
		a:active{color:@black; .tdn();}
	}
}
ul.itemslist{
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row wrap; flex-flow:row wrap; 
	-webkit-justify-content:space-between; justify-content:space-between;
	-webkit-align-items:flex-start; align-items:flex-start;
	li{width:47%; margin:0 0 6%;
		a{
			article{
				div{
					img{border-radius:36px 6px 36px 6px;}
					h3{font-size:93%; .tac();}
				}
			}
		}
	}
}
div.morebtn{width:60%; font-size:124%; letter-spacing:1px; margin:0 auto 6%;
	a{display:block; padding:20px 0; .tac(); border:2px solid @black;}
	a:link{color:@black; .tdn();}
	a:visited{color:@black; .tdn();}
	a:hover{color:@white; .tdn(); background:@black;}
	a:active{color:@black; .tdn();}
}
div.topitem{padding:12% 0;
	section{padding:6% 0;
		h2{font-size:169%;}
	}
}

/*PAGES*/
section.pagetitle{padding:140px 20px 120px; margin:0 0 18%;
	h2{font-size:169%; letter-spacing:3px;}
}
.page-about section.pagetitle{background:url("../img/bg/bg_about.jpg") @ncc; .bgsc();
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
}
.page-blend section.pagetitle{background:url("../img/bg/bg_blend.jpg") @ncc; .bgsc();
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
}
.page-howto section.pagetitle{background:url("../img/bg/bg_howto.jpg") @ncc; .bgsc();
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
}
.category-items section.pagetitle{background:url("../img/bg/bg_items.jpg") @ncc; .bgsc();
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
}
.category-collaboration section.pagetitle{background:url("../img/bg/bg_collaboration.jpg") @ncc; .bgsc();
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
}
section.collabosg{background:url("../img/bg/bg_collaboration.jpg") @ncc; .bgsc();
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
}

article.introbox{margin:0 auto 18%;
	h3{font-size:154%; letter-spacing:2px; margin:0 0 18%;}
	p{font-size:116%; line-height:2.5; margin:0 auto 6%;}
}
article.aboutbox{margin:0 3% 18%;
	h3{margin:0 0 18%;}
	p{font-size:116%; line-height:2.5; margin:0 auto 6%;}
	p.nomb{margin:0 auto;}
	div.img01{margin:0 auto 18%;}
}
article.blender{
	h3{font-size:154%; letter-spacing:2px; margin:0 0 18%; .tac();}
	ul{margin:0 0 18%;
		li{margin:0 0 12%;
			div.namebox{position:relative; z-index:1; width:120px; height:120px; border-radius:100%; padding:25px 15px; font-size:13px; letter-spacing:3px; .tac();
				span{font-size:40px; display:block; margin:0 0 15px;}
			}
			div.blendbox{position:relative; z-index:-1; margin-top:-60px;
				section:first-child{width:70%; margin:0 auto 12%;}
				section{line-height:1.85;
					h4{font-size:116%; .fb(); margin:0 0 3%;}
					h5{font-size:116%; .fb(); color:@suzu;}
					p{margin:0 0 6%;}
					p:last-child{margin:0;}
				}
			}
		}
		li.spring{
			div.namebox{background:#dade03;}
			div.blendbox{
				section:first-child{
					img{box-shadow:25px 25px 0 #dade03;}
				}
			}
		}
		li.summer{
			div.namebox{background:#9dd5ee;}
			div.blendbox{
				section:first-child{
					img{box-shadow:25px 25px 0 #9dd5ee;}
				}
			}
		}
		li.autumn{
			div.namebox{background:#dd007d;}
			div.blendbox{
				section:first-child{
					img{box-shadow:25px 25px 0 #dd007d;}
				}
			}
		}
		li.winter{
			div.namebox{background:#b2a8b3;}
			div.blendbox{
				section:first-child{
					img{box-shadow:25px 25px 0 #b2a8b3;}
				}
			}
		}
	}
}
article.howto{margin:0 0 12%;
	div.postbody{
		div{
			section{margin:0 0 6%;}
		}
		h3{font-size:154%; letter-spacing:2px; margin:0 0 6%;}
		p{line-height:1.7; margin:0 0 6%;}
	}
}
/*SINGLE*/
div.pagebody{
	article.collabosg{position:relative; margin:0 0 12%;
		span{color:@grayL; margin:0 0 4.5%; padding:5px; border:1px solid @black; .inline();}
		h3.postttl{font-size:154%; line-height:1.7; margin:0 0 9%; border-bottom:1px solid @black; padding-bottom:10px;}
		div.postbody{margin-bottom:12%; word-wrap:break-word;
			section:first-child{background:@grayLLL; padding:6%;}
			section:last-child{border:1px solid @gray; padding:6%;}
			section{margin-bottom:6%;
				h4{font-size:132%; line-height:1.7; margin:0 0 4.5%;}
				img{margin:0 0 6%;}
				img.width50{max-width:50%; height:auto;}
				p{line-height:1.7; margin-bottom:4.5%;}
				p > img{margin-bottom:0;}
				p:last-child{margin-bottom:0;}
				div:first-child{margin-bottom:9%;
					img{margin:0 auto;}
				}
			}
		}
	}
}

/*FOOTER*/
footer{width:100%; padding:3% 0; line-height:1.8; background:@black; .tac();
	small{display:block; font-size:77%; color:@white;}
	a{font-size:250%; .tac(); .inline(); margin:0 0 10px;}
	a:link{color:@white; .tdn();}
	a:visited{color:@white; .tdn();}
	a:hover{color:@gray; .tdn();}
	a:active{color:@white; .tdn();}
}

/****************************************************/
/************************ PC ************************/
/****************************************************/
@media(min-width:769px){
html,body{min-width:1080px;}
.sp{display:none;}
.leftbox{padding-right:20px;}
.rightbox{padding-left:20px;}

/*NAV TOGGLE*/
#nav-toggle{top:30px; left:28px; height:32px;}
#nav-toggle > div{width:42px;}
#nav-toggle span:nth-child(2){top:14px;}
#nav-toggle span:nth-child(3){top:28px;}
#nav-toggle:hover span:nth-child(1){top:4px;}
#nav-toggle:hover span:nth-child(3){top:24px;}
.open #nav-toggle span:nth-child(1){top:15px;}
.open #nav-toggle span:nth-child(2){top:15px;}
.open #nav-toggle span:nth-child(3){top:15px;}
/*NAV UL*/
#gloval-nav ul{margin:0 10%;}
#gloval-nav ul li{font-size:28px; letter-spacing:6px;}
#gloval-nav ul li.ja{font-size:13px; letter-spacing:2px;}

/*SVG*/
div#splash_logo svg{width:16px;}

/*HEADER*/
header{width:100px; height:100vh; position:fixed; top:0; left:0; z-index:1000; background:@white; padding:0;
	h1{width:8px; margin:300px auto 0;}
	div{position:absolute; bottom:4%; left:0; width:100%; .tac();
		a{font-size:250%;}
		a:link{color:@black; .tdn();}
		a:visited{color:@black; .tdn();}
		a:hover{color:@orange; .tdn();}
		a:active{color:@black; .tdn();}
	}
}

/*LAYER*/
main{margin-left:100px; width:~"calc(100% - 100px)";}

/*SLIDER*/
div.topteaser{margin-left:100px; width:~"calc(100% - 100px)"; height:100vh;}
div#sliderbox{height:100vh;}
ul#carousel{height:100vh;
	li{height:100vh;}
	li.bg01{background:url("../img/slider/01.jpg") @ncc; .bgsc();}
}

/*TOP*/
div.topbox{
	section{
		h2{font-size:180%; letter-spacing:4px;}
		h3{font-size:116%;}
	}
}
div.topblend{height:60vh;
	a{height:60vh; .trans();}
	a:hover{opacity:0.3;}
	section{
		h3{letter-spacing:6px;}
	}
}
div.topabout{height:60vh;
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row nowrap; flex-flow:row nowrap; 
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:center; align-items:center;
	div.aboutsen{width:50%; height:60vh;
		a{width:50vh; height:50vh; margin:5% auto; .trans();
			section{height:50vh;}
		}
		a:hover{opacity:0.6;}
	}
	div.aboutsex{width:50%; height:60vh;
		a{height:60vh; .trans();
			section{height:60vh;
				div.bg{height:60vh;
					h2{
						span{padding:0 8px 4px 12pxl}
					}
				}
			}
		}
		a:hover{opacity:0.6;}
	}
}
div.topcollabo{padding:6%;
	section{
		h2{font-size:200%;}
	}
}
ul.postlist{margin:0;
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row wrap; flex-flow:row wrap; 
	-webkit-justify-content:flex-start; justify-content:flex-start;
	-webkit-align-items:flex-start; align-items:flex-start;
	li{width:30%; margin:0 5% 5% 0;
		a{
			article{
				div{
					h3{font-size:108%; margin:0 0 15px;}
					p{font-size:93%;}
				}
				div:first-child{margin:0 0 20px;}
			}
		}
	}
	li:nth-child(3n){margin:0 0 5% 0;}
}
ul.itemslist{margin:0 0 12%;
	-webkit-justify-content:flex-start; justify-content:flex-start;
	li{
		a{
			article{
				div{
					img{border-radius:54px 10px 54px 10px;}
					h3{font-size:100%; margin:0; .tac();}
				}
			}
		}
	}
}
div.morebtn{width:40%;
	a{padding:20px 0;}
}
div.topitem{
	ul.itemslist{margin:0;}
	section{
		h2{font-size:200%;}
	}
}

/*PAGES*/
section.pagetitle{padding:180px 0; margin:0 0 12%;
	h2{font-size:28px; letter-spacing:6px;}
}
article.introbox{margin:0 0 12%; .tac();
	h3{font-size:28px; letter-spacing:3px; margin:0 0 6%;}
	p{font-size:124%; letter-spacing:2px; .tac(); margin:0 0 6%;}
}
article.aboutbox{margin:0 auto;
	h3{margin:0 auto; width:482px;}
	p{font-size:124%; letter-spacing:2px; .tac(); width:560px; margin:0 auto 40px;}
	div.img01{margin:0 auto;}
}

.page-blend section.pagetitle{background:url("../img/bg/bg_blend.jpg") @ncc; .bgsc();
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
}
article.blender{
	h3{font-size:28px; letter-spacing:3px; margin:0 0 6%;}
	ul{margin:0 0 9%;
		display:-webkit-flex; display:flex;
		-webkit-flex-flow:row wrap; flex-flow:row wrap; 
		-webkit-justify-content:space-between; justify-content:space-between;
		-webkit-align-items:flex-start; align-items:flex-start;
		li{width:46%; margin:0 0 6%;
			div.blendbox{
				section:first-child{width:80%;}
				section:last-child{width:80%; margin:0 auto;}
			}
		}
		li.summer{margin-top:12%;}
		li.winter{margin-top:12%;}
	}
}
article.howto{margin:0 0 15%;
	div.postbody{
		div{margin:0 0 9%;
			display:-webkit-flex; 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;
			section{width:47%; margin:0;}
		}
		div.revbox{
			-webkit-flex-flow:row-reverse nowrap; flex-flow:row-reverse nowrap;
			h3{text-align:right;} 
		}
		h3{font-size:169%; letter-spacing:3px;}
		p{font-size:13px; margin:0;
			span{display:block;}
		}
		.pctar{text-align:right!important;}
		
	}
}
/*SINGLE*/
div.pagebody{
	article.collabosg{margin:0 4.5% 12%;
		span{font-size:116%; margin:0 0 1.5%; padding:7px;}
		h3.postttl{font-size:220%; margin:0 0 4.5%;}
		div.postbody{
			section:first-child{
				display:-webkit-flex; 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;
				div{width:47%;}
			}
			section:last-child{
				display:-webkit-flex; 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;
				div{width:47%;}
			}
			section{padding:0 6%;
				h4{font-size:169%; margin:0 0 3%;}
				img{margin:0 0 3%;}
				.size-thumbnail{width:320px; height:auto;}
				.size-medium{width:640px; height:auto;}
				.size-large{width:1080px; height:auto;}
				.aligncenter{clear:both; display:block; overflow:hidden; margin: 0 auto 3%;}
				.alignleft{float:left; margin:0 3% 3% 0; .inline();}
				.alignright{float:right; margin:0 0 3% 3%; .inline();}
				p{font-size:16px; line-height:1.9; margin-bottom:3%;}
				div:first-child{margin-bottom:0;}
			}
		}
	}
}

/*FOOTER*/
footer{padding:40px 0; background:@black;}

}
/************************ SP ************************/
@media(max-width:768px){
	.pc{display:none;}
	.spmb{margin-bottom:6%;}
	div.video_box{margin-bottom:6%;}
}
/************************ VIDEO ************************/
div.video_box{position:relative; overflow:hidden; padding-bottom:56.25%; padding-top:0; height:0; margin-bottom:20px;}
div.video_box iframe,div.video_box object,div.video_box embed{position:absolute; top:0; left:0; width:100%; height:100%}
/************************ ANIM **********************/
.txt-blur{
	-webkit-animation-name:txtBlur;
	animation-name:txtBlur;
	-webkit-animation-duration:2.2s;
	animation-duration:2.2s;
	-webkit-animation-delay:0.5s;
	animation-delay:0.5s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-transform-origin:center center;
	transform-origin:center center;
}

.p-blur{
	-webkit-animation-name:pBlur;
	animation-name:pBlur;
	-webkit-animation-duration:1.0s;
	animation-duration:1.0s;
	-webkit-animation-delay:1.5s;
	animation-delay:1.5s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

@-webkit-keyframes txtBlur {
	from{opacity: 0.5;
		-webkit-filter: blur(20px) brightness(200%);
		-moz-filter: blur(20px) brightness(200%);
		-ms-filter: blur(20px) brightness(200%);
		-o-filter: blur(20px) brightness(200%);
		filter: blur(20px) brightness(200%);
		-webkit-transform:scale(0.8,0.8);
				transform:scale(0.8,0.8);
	}
	to{opacity: 1;
		-webkit-filter: blur(0px) brightness(100%);
		-moz-filter: blur(0px) brightness(100%);
		-ms-filter: blur(0px) brightness(100%);
		-o-filter: blur(0px) brightness(100%);
		filter: blur(0px) brightness(100%);
		-webkit-transform:scale(1,1);
				transform:scale(1,1);
	}
}
@keyframes txtBlur {
	from{opacity: 0.5;
		-webkit-filter: blur(20px) brightness(200%);
		-moz-filter: blur(20px) brightness(200%);
		-ms-filter: blur(20px) brightness(200%);
		-o-filter: blur(20px) brightness(200%);
		filter: blur(20px) brightness(200%);
		-webkit-transform:scale(0.8,0.8);
				transform:scale(0.8,0.8);
	}
	to{opacity: 1;
		-webkit-filter: blur(0px) brightness(100%);
		-moz-filter: blur(0px) brightness(100%);
		-ms-filter: blur(0px) brightness(100%);
		-o-filter: blur(0px) brightness(100%);
		filter: blur(0px) brightness(100%);
		-webkit-transform:scale(1,1);
				transform:scale(1,1);
	}
}

@-webkit-keyframes pBlur {
	from{opacity: 0;
		-webkit-filter: blur(10px);
		-moz-filter: blur(10px);
		-ms-filter: blur(10px);
		-o-filter: blur(10px);
		filter: blur(10px);
	}
	to{opacity: 1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-ms-filter: blur(0px);
		-o-filter: blur(0px);
		filter: blur(0px);
	}
}
@keyframes pBlur {
	from{opacity: 0;
		-webkit-filter: blur(10px);
		-moz-filter: blur(10px);
		-ms-filter: blur(10px);
		-o-filter: blur(10px);
		filter: blur(10px);
	}
	to{opacity: 1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-ms-filter: blur(0px);
		-o-filter: blur(0px);
		filter: blur(0px);
	}
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 60% 40% 60% 40%/50% 45% 50% 45%;
}
14% {
    border-radius: 40% 60% 50% 45%/50% 60% 40% 50%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}
/*-----------------------------------------------------
 6px = 46.1%    7px = 53.8%    8px = 61.5%    9px = 69.2%
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
------------------------------------------------------*/