@charset "utf-8";

/*------------------------------------------------------------------------------------------

あらイージー！ (arra-ez)  Responsive fluid column CSS
Version: 1.5.4 (2018-02-19)
Copyright 2019, ジュウロクデザイン (16design)
Licensed under MIT

------------------------------------------------------------------------------------------*/

body, html {margin:0; padding:0;}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* //////////////// clearfix ////////////////////////////////  */
.clearfix:before, .clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}

/* //////////////// arra-ez responsive set ////////////////////////////////  */
.container {width:auto; max-width:1020px;/*990px;*/ margin:0 auto; padding:0;}
.semi-wide-container {width:auto; max-width:1170px; margin:0 auto; padding:0;}
.wide-container {width:auto; max-width:1320px; margin:0 auto; padding:0;}
.full-container {width:100%; margin:0; padding:0;}


/*** flex width for [div, section] ***/
.solo, .full { float:left; width:98%; margin:1em 1%; overflow:hidden;}
.duo, .half { float:left; width:48%; margin:1em 1%; overflow:hidden;}
.trio, .one-third { float:left; width:31.33%; margin:1em 1%; overflow:hidden;}
.two-thirds { float:left; width:64.66%; margin:1em 1%; overflow:hidden;}
.quad, .quarter { float:left; width:23%; margin:1em 1%; overflow:hidden;}
.three-quarters { float:left; width:73%; margin:1em 1%; overflow:hidden;}
.penta, .twenty { float:left; width:18%; margin:1em 1%; overflow:hidden;}
.forty { float:left; width:38%; margin:1em 1%; overflow:hidden;} 
.sixty { float:left; width:58%; margin:1em 1%; overflow:hidden;}
.eighty { float:left; width:78%; margin:1em 1%; overflow:hidden;}

.narrow {margin-top:0.5em !important; margin-bottom:0.5em !important;}
.thin {margin-top:0.25em !important; margin-bottom:0.25em !important;}
.flat {margin-top:0 !important; margin-bottom:0 !important;}
.flat-top {margin-top:0 !important;}
.flat-bottom {margin-bottom:0 !important;}

/*.extend {margin:0 !important;}*/
.centering {float:none !important; margin-left:auto !important; margin-right:auto !important;}

.upside {margin-bottom:24px !important;}

.ofv {overflow:visible !important;}

.solo.alpha, .full.alpha { float:left; width:99%; margin:1em 1% 1em 0; overflow:hidden;}
.duo.alpha, .half.alpha { float:left; width:49%; margin:1em 1% 1em 0; overflow:hidden;}
.trio.alpha, .one-third.alpha { float:left; width:32.33%; margin:1em 1% 1em 0; overflow:hidden;}
.two-thirds.alpha { float:left; width:65.66%; margin:1em 1% 1em 0; overflow:hidden;}
.quad.alpha, .quarter.alpha { float:left; width:24%; margin:1em 1% 1em 0; overflow:hidden;}
.three-quarters.alpha { float:left; width:74%; margin:1em 1% 1em 0; overflow:hidden;}
.penta.alpha, .twenty.alpha { float:left; width:19%; margin:1em 1% 1em 0; overflow:hidden;}
.forty.alpha { float:left; width:39%; margin:1em 1% 1em 0; overflow:hidden;} 
.sixty.alpha { float:left; width:59%; margin:1em 1% 1em 0; overflow:hidden;}
.eighty.alpha { float:left; width:79%; margin:1em 1% 1em 0; overflow:hidden;}

.solo.omega, .full.omega { float:left; width:99%; margin:1em 0 1em 1%; overflow:hidden;}
.duo.omega, .half.omega { float:left; width:49%; margin:1em 0 1em 1%; overflow:hidden;}
.trio.omega, .one-third.omega { float:left; width:32.33%; margin:1em 0 1em 1%; overflow:hidden;}
.two-thirds.omega { float:left; width:65.66%; margin:1em 0 1em 1%; overflow:hidden;}
.quad.omega, .quarter.omega { float:left; width:24%; margin:1em 0 1em 1%; overflow:hidden;}
.three-quarters.omega { float:left; width:74%; margin:1em 0 1em 1%; overflow:hidden;}
.penta.omega, .twenty.omega { float:left; width:19%; margin:1em 0 1em 1%; overflow:hidden;}
.forty.omega { float:left; width:39%; margin:1em 0 1em 1%; overflow:hidden;} 
.sixty.omega { float:left; width:59%; margin:1em 0 1em 1%; overflow:hidden;}
.eighty.omega { float:left; width:79%; margin:1em 0 1em 1%; overflow:hidden;}

.solo.alpha.omega, .full.alpha.omega { float:left; width:100%; margin:1em 0; overflow:hidden;}
.duo.alpha.omega, .half.alpha.omega { float:left; width:50%; margin:1em 0; overflow:hidden;}
.trio.alpha.omega, .one-third.alpha.omega { float:left; width:33.3333%; margin:1em 0; overflow:hidden;}
.two-thirds.alpha.omega { float:left; width:66.6666%; margin:1em 0; overflow:hidden;}
.quad.alpha.omega, .quarter.alpha.omega { float:left; width:25%; margin:1em 0; overflow:hidden;}
.three-quarters.alpha.omega { float:left; width:75%; margin:1em 0; overflow:hidden;}
.penta.alpha.omega, .twenty.alpha.omega { float:left; width:20%; margin:1em 0; overflow:hidden;}
.forty.alpha.omega { float:left; width:40%; margin:1em 0; overflow:hidden;} 
.sixty.alpha.omega { float:left; width:60%; margin:1em 0; overflow:hidden;}
.eighty.alpha.omega { float:left; width:80%; margin:1em 0; overflow:hidden;}

.solo.extend, .full.extend { float:left; width:100%; margin:0 !important; overflow:hidden;}
.duo.extend, .half.extend { float:left; width:50%; margin:0 !important; overflow:hidden;}
.trio.extend, .one-third.extend { float:left; width:33.33%; margin:0 !important; overflow:hidden;}
.two-thirds.extend { float:left; width:66.6666%; margin:0 !important; overflow:hidden;}
.quad.extend, .quarter.extend { float:left; width:25%; margin:0 !important; overflow:hidden;}
.three-quarters.extend { float:left; width:75%; margin:0 !important; overflow:hidden;}
.penta.extend, .twenty.extend { float:left; width:20%; margin:0 !important; overflow:hidden;}
.forty.extend { float:left; width:40%; margin:0 !important; overflow:hidden;} 
.sixty.extend { float:left; width:60%; margin:0 !important; overflow:hidden;}
.eighty.extend { float:left; width:80%; margin:0 !important; overflow:hidden;}

.pd-var {padding-left:16px; padding-right:16px;}
.extend .pd-var, .extend.pd-var {padding:2.75% 3.6%; }

.fl2fn {float:left; margin:1.5em 1.5em 1em 0;}


/* Universal Padding Class --- as you like */
.pd-around {padding:1.5em 1.5em;}
.pd-side {padding:0 1.5em;}
.pd-top-bottom {padding:1.5em 0;}
.pd-right {padding-right:1.5em;}
.pd-left {padding-left:1.5em;}



.shell { display: flex; flex-direction:row; flex-wrap:wrap; }
.shell.reverse { display: flex; flex-direction:row-reverse; flex-wrap:wrap; }
.shell .cell {/* flex: 1; flex-grow: 1;*/ }
.shell.nowrap-x { flex-wrap:nowrap; }
.shell.left { justify-content:flex-start; }
.shell.center, .shell.x-center { justify-content:center; }
.shell.right { justify-content:flex-end; }
.shell.fill, .shell.fill-x, .shell.split { justify-content:space-between; }
.shell.equalize { justify-content:space-around; }
.shell.stretch, .shell.grow-y { align-items:stretch; }
.shell.top { align-items:flex-start; }
.shell.middle, .shell.y-center { align-items:center; }
.shell.baseline { align-items:baseline; }
.shell.bottom { align-items:flex-end; }
.shell > .cell.grow-x {flex-grow:1;}



/*** Media Query ***/
@media only screen and (max-width: 1040px) {
	.container {padding:0 0.4em;}
}


/*** Media Query ***/
@media only screen and (max-width: 880px) {

	.quad.step, .quarter.step, .penta.step, .twenty.step { width:48% !important; margin:0.5em 1% !important;}
	.quad.step.extend, .quarter.step.extend, .penta.step.extend, .twenty.step.extend { width:50% !important; margin:0 !important;}

}


@media only screen and (min-width:825px) and (max-width: 1169px) {

	.container, .wide-container {padding:0 5px; text-align:center;}

	.solo, .full, .duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .forty, .sixty, .eighty, 
	.solo.alpha, .full.alpha, .duo.alpha, .half.alpha, .trio.alpha, .one-third.alpha, .two-thirds.alpha, .quad.alpha, .quarter.alpha, .three-quarters.alpha, .penta.alpha, .twenty.alpha, .forty.alpha, .sixty.alpha, .eighty.alpha,
	.solo.omega, .full.omega, .duo.omega, .half.omega, .trio.omega, .one-third.omega, .two-thirds.omega, .quad.omega, .quarter.omega, .three-quarters.omega, .penta.omega, .twenty.omega, .forty.omega, .sixty.omega, .eighty.omega,	
	.solo.alpha.omega, .full.alpha.omega, .duo.alpha.omega, .half.alpha.omega, .trio.alpha.omega, .one-third.alpha.omega, .two-thirds.alpha.omega, .quad.alpha.omega, .quarter.alpha.omega, .three-quarters.alpha.omega, .penta.alpha.omega, .twenty.alpha.omega, .forty.alpha.omega, .sixty.alpha.omega, .eighty.alpha.omega 
	{ width:100%; margin:0.5em auto !important; max-width:825px !important; text-align:left;}

	.quad.step, .quarter.step, .penta.step, .twenty.step { width:48% !important; margin:0.5em 1% !important;}
	.quad.step.extend, .quarter.step.extend, .penta.step.extend, .twenty.step.extend { width:50% !important; margin:0 !important;}


}


/* Mobile Single Column ( like 7 inch Tablet ) */
@media only screen and (max-width: 824px) {
	
	.container, .wide-container {padding:0 0.3em;}

	.solo, .full, .duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .forty, .sixty, .eighty, 
	.solo.alpha, .full.alpha, .duo.alpha, .half.alpha, .trio.alpha, .one-third.alpha, .two-thirds.alpha, .quad.alpha, .quarter.alpha, .three-quarters.alpha, .penta.alpha, .twenty.alpha, .forty.alpha, .sixty.alpha, .eighty.alpha,
	.solo.omega, .full.omega, .duo.omega, .half.omega, .trio.omega, .one-third.omega, .two-thirds.omega, .quad.omega, .quarter.omega, .three-quarters.omega, .penta.omega, .twenty.omega, .forty.omega, .sixty.omega, .eighty.omega,	
	.solo.alpha.omega, .full.alpha.omega, .duo.alpha.omega, .half.alpha.omega, .trio.alpha.omega, .one-third.alpha.omega, .two-thirds.alpha.omega, .quad.alpha.omega, .quarter.alpha.omega, .three-quarters.alpha.omega, .penta.alpha.omega, .twenty.alpha.omega, .forty.alpha.omega, .sixty.alpha.omega, .eighty.alpha.omega 
	{ width:98%; margin:0.5em 1% !important; max-width:auto;}

	.solo.extend, .full.extend, .duo.extend, .half.extend, .trio.extend, .one-third.extend, .two-thirds.extend, .quad.extend, .quarter.extend, .three-quarters.extend, .penta.extend, .twenty.extend, .forty.extend, .sixty.extend, .eighty.extend
	{ width:100%; margin:0 !important; }

	.solo.keep, .full.keep { width:98%; margin:0.5em 1%; }
	.duo.keep, .half.keep { width:48%; margin:0.5em 1%; }
	.trio.keep, .one-third.keep { width:31.33%; margin:0.5em 1%; }
	.two-thirds.keep { width:64.66%; margin:0.5em 1%; }
	.quad.keep, .quarter.keep { width:23%; margin:0.5em 1%; }
	.three-quarters.keep { width:73%; margin:0.5em 1%; }
	.penta.keep, .twenty.keep { width:18%; margin:0.5em 1%; }
	.forty.keep { width:38%; margin:0.5em 1%; } 
	.sixty.keep { width:58%; margin:0.5em 1%; }
	.eighty.keep { width:78%; margin:0.5em 1%; }

	.solo.keep.alpha, .full.keep.alpha { width:99%; margin:0.5em 1% 0.5em 0; }
	.duo.keep.alpha, .half.keep.alpha { width:49%; margin:0.5em 1% 0.5em 0; }
	.trio.keep.alpha, .one-third.keep.alpha { width:32.33%; margin:0.5em 1% 0.5em 0; }
	.two-thirds.keep.alpha { width:65.66%; margin:0.5em 1% 0.5em 0; }
	.quad.keep.alpha, .quarter.keep.alpha { width:24%; margin:0.5em 1% 0.5em 0; }
	.three-quarters.keep.alpha { width:74%; margin:0.5em 1% 0.5em 0; }
	.penta.keep.alpha, .twenty.keep.alpha { width:19%; margin:0.5em 1% 0.5em 0; }
	.forty.keep.alpha { width:39%; margin:0.5em 1% 0.5em 0; } 
	.sixty.keep.alpha { width:59%; margin:0.5em 1% 0.5em 0; }
	.eighty.keep.alpha { width:79%; margin:0.5em 1% 0.5em 0; }

	.solo.keep.omega, .full.keep.omega { width:99%; margin:0.5em 0 0.5em 1%; }
	.duo.keep.omega, .half.keep.omega { width:49%; margin:0.5em 0 0.5em 1%; }
	.trio.keep.omega, .one-third.keep.omega { width:32.33%; margin:0.5em 0 0.5em 1%; }
	.two-thirds.keep.omega { width:65.66%; margin:0.5em 0 0.5em 1%; }
	.quad.keep.omega, .quarter.keep.omega { width:24%; margin:0.5em 0 0.5em 1%; }
	.three-quarters.keep.omega { width:74%; margin:0.5em 0 0.5em 1%; }
	.penta.keep.omega, .twenty.keep.omega { width:19%; margin:0.5em 0 0.5em 1%; }
	.forty.keep.omega { width:39%; margin:0.5em 0 0.5em 1%; } 
	.sixty.keep.omega { width:59%; margin:0.5em 0 0.5em 1%; }
	.eighty.keep.omega { width:79%; margin:0.5em 0 0.5em 1%; }

	.solo.keep.alpha.omega, .full.keep.alpha.omega { width:100%; margin:0.5em 0; }
	.duo.keep.alpha.omega, .half.keep.alpha.omega { width:50%; margin:0.5em 0; }
	.trio.keep.alpha.omega, .one-third.keep.alpha.omega { width:33.3333%; margin:0.5em 0; }
	.two-thirds.keep.alpha.omega { width:66.6666%; margin:0.5em 0; }
	.quad.keep.alpha.omega, .quarter.keep.alpha.omega { width:25%; margin:0.5em 0; }
	.three-quarters.keep.alpha.omega { width:75%; margin:0.5em 0; }
	.penta.keep.alpha.omega, .twenty.keep.alpha.omega { width:19%; margin:0.5em 0; }
	.forty.keep.alpha.omega { width:40%; margin:0.5em 0; } 
	.sixty.keep.alpha.omega { width:60%; margin:0.5em 0; }
	.eighty.keep.alpha.omega { width:80%; margin:0.5em 0; }

	.solo.keep.extend, .full.keep.extend { width:100%; margin:0; }
	.duo.keep.extend, .half.keep.extend { width:50%; margin:0; }
	.trio.keep.extend, .one-third.keep.extend { width:33.3333%; margin:0; }
	.two-thirds.keep.extend { width:66.6666%; margin:0; }
	.quad.keep.extend, .quarter.keep.extend { width:25%; margin:0; }
	.three-quarters.keep.extend { width:75%; margin:0; }
	.penta.keep.extend, .twenty.keep.extend { width:20%; margin:0; }
	.forty.keep.extend { width:40%; margin:0; } 
	.sixty.keep.extend { width:60%; margin:0; }
	.eighty.keep.extend { width:80%; margin:0; }


	.duo.step, .half.step, .trio.step, .one-third.step, .two-thirds.step, 
	.three-quarters.step, .forty.step, .sixty.step, .eighty.step { width:48% !important; margin:0.5em inherit !important;}

	.duo.step.extend, .half.step.extend, .trio.step.extend, .one-third.step.extend, .two-thirds.step.extend, 
	.three-quarters.step.extend, .forty.step.extend, .sixty.step.extend, .eighty.step.extend { width:50% !important; margin:0 !important;}


	.narrow {margin-top:0.5em !important; margin-bottom:0.5em !important;}
	.thin {margin-top:0.25em !important; margin-bottom:0.25em !important;}
	.flat {margin-top:0 !important; margin-bottom:0 !important;}
	.ofv {overflow:visible !important;}

	.pd-var {padding-left:1%; padding-right:1%;}
	.extend .pd-var, .extend.pd-var {padding:4% 2%;}
	
	.fl2fn {float:none; margin:1.5em auto 1em;}


	/* Universal padding class --- as you like */
	.pd-around {padding:1.5em 1.5em;}
	.pd-side {padding:0 1.5em;}
	.ttal {text-align:left !important;}
	.ttac {text-align:center !important;}
	.ttal:not(.pd-side) { padding:0 1.5em;}
	.pd-around .ttal:not(.pd-side), .pd-side .ttal:not(.pd-side) { padding:0;}	
	.upper {margin-bottom:2em !important;}
	

}



/* Traditional SmartPhone Portrait Size */
@media only screen and (max-width: 479px) {
	
	.duo.step, .half.step, .trio.step, .one-third.step, .two-thirds.step, .quad.step, .quarter.step, .three-quarters.step, .penta.step, .twenty.step, .forty.step, .sixty.step, .eighty.step { width:98% !important; margin:0.5em inherit !important;}

	.duo.step.smp-duo, .half.step.smp-duo, .trio.step.smp-duo, .one-third.step.smp-duo, .two-thirds.step.smp-duo, .quad.step.smp-duo, .quarter.step.smp-duo, .three-quarters.step.smp-duo, .penta.step.smp-duo, .twenty.step.smp-duo, .forty.step.smp-duo, .sixty.step.smp-duo, .eighty.step.smp-duo { width:48% !important; margin:inherit 1% !important;/*0.5em inherit !important*;*/}

	.duo.step.extend, .half.step.extend, .trio.step.extend, .one-third.step.extend, .two-thirds.step.extend, .quad.step.extend, .quarter.step.extend, .three-quarters.step.extend, .penta.step.extend, .twenty.step.extend, .forty.step.extend, .sixty.step.extend, .eighty.step.extend { width:100% !important; margin:0 !important;}

	.extend .pd-var, .extend.pd-var {padding:6% 2%;}


	/* Universal padding class --- as you like */
	.pd-around {padding:3.75vmin 3%;}
	.pd-side, .pd-right, .pd-left {padding:0 3%;}
	.stal {text-align:left !important;}
	.stac {text-align:center !important;}
	.stal:not(.pd-side) { padding:0 3%;}
	.pd-around .stal:not(.pd-side), .pd-side .stal:not(.pd-side) { padding:0;}	


}