@charset "utf-8";

/*------------------------------------------------------------------------------------------
あらイージー！ (arra-ez)  Responsive fluid column CSS / based on flexbox
Version: 3.1.3 (2023-09-13) 
Copyright 2016-2023, ジュウロクデザイン (16design) https://16deza.com/
Licensed under MIT
------------------------------------------------------------------------------------------*/

/* ///////// !! YOUR-SETTING from here  ///////////////////////////////////////  */

:root {--flex-gap: 1.5rem; }

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

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

}
@media only screen and (max-width: 900px) {

}
@media only screen and (max-width: 768px) {
	:root {--flex-gap: 1rem;}
}
@media only screen and (max-width: 599px) {
	:root {--flex-gap: 0.5rem; }
}
@media only screen and (max-width: 480px) {

}
.container, .std-container {width:auto; max-width:calc(1024px + 3em); margin:0 auto; padding:0}
.semi-wide-container {width:auto; max-width:calc(1190px + 3em); margin:0 auto; padding:0;}
.wide-container {width:auto; max-width:calc(1360px + 3em); margin:0 auto; padding:0;}
.x-wide-container {width:auto; max-width:calc(1440px + 3em); margin:0 auto; padding:0;}
.xx-wide-container {width:auto; max-width:calc(1600px + 3em); margin:0 auto; padding:0;}
.xxx-wide-container {width:auto; max-width:calc(1980px + 3em); margin:0 auto; padding:0;}
.full-container {width:100%; margin:0; padding:0;}
@media only screen and (min-width: 769px) { 
	.container,	.std-container,
	.semi-wide-container, .wide-container, 
	.x-wide-container, .xx-wide-container, .xxx-wide-container {padding:0 1.5em !important;} 
}
@media only screen and (max-width: 768px) { 
	.container,	.std-container,
	.semi-wide-container, .wide-container, 
	.x-wide-container, .xx-wide-container, .xxx-wide-container {padding:0 1em !important;} 
}
@media only screen and (max-width: 480px) { 
	.container,	.std-container,
	.semi-wide-container, .wide-container, 
	.x-wide-container, .xx-wide-container, .xxx-wide-container {padding:0 0.5em !important;} 
}
/* ////////////////////////////////////// !! end of YOUR-SETTING  //////////  */


/* ////// arra-ez responsive set --- please custom as you like //////////////////////////  */
body, html {margin:0; padding:0;}
.shell, .shell *, .shelf * { box-sizing: border-box; }

.shell { display: flex; flex-direction:row; flex-wrap:wrap; }
.shell.reverse { display: flex; flex-direction:row-reverse; flex-wrap:wrap; }
.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.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 > .grow-x {flex-grow:1;}
.stretch, .grow-y { align-self:stretch; }

.solo, .full { width:100%;}
.duo, .half { width:50%;}
.trio, .one-third { width:calc(100% / 3);}
.two-thirds { width:calc(100% / 3 * 2);}
.quad, .quarter { width:25%;}
.three-quarters { width:75%;}
.penta, .twenty { width:20%;}
.thirty { width:30%;} 
.forty { width:40%;} 
.forty-five { width:45%;} 
.fifty-five { width:55%;} 
.sixty { width:60%;}
.seventy { width:70%;}
.eighty { width:80%;}

.shell.gap {gap:var(--flex-gap);}
.shell.gap > :is(.solo, .full) { width:100%;}
.shell.gap > :is(.duo, .half) { width:calc((100% - (var(--flex-gap))) / 2);}
.shell.gap > :is(.trio, .one-third) { width:calc((100% - (var(--flex-gap)) * 2)  / 3);}
.shell.gap > .two-thirds { width:calc((100% - (var(--flex-gap)) * 2)  / 3 * 2);}
.shell.gap > :is(.quad, .quarter) { width:calc((100% - (var(--flex-gap)) * 3)  / 4);}
.shell.gap > .three-quarters { width:calc((100% - (var(--flex-gap)) * 3)  / 4 * 3);}
.shell.gap > :is(.penta, .twenty) { width:calc((100% - (var(--flex-gap)) * 4)  / 5);}
.shell.gap > .thirty { width:calc(30% - (var(--flex-gap) / 2) );} 
.shell.gap > .forty { width:calc(40% - (var(--flex-gap) / 2) );} 
.shell.gap > .forty-five { width:calc(45% - (var(--flex-gap) / 2) );} 
.shell.gap > .fifty-five { width:calc(55% - (var(--flex-gap) / 2) );} 
.shell.gap > .sixty { width:calc(60% - (var(--flex-gap) / 2) );}
.shell.gap > .seventy { width:calc(70% - (var(--flex-gap) / 2) );}
.shell.gap > .eighty { width:calc(80% - (var(--flex-gap) / 2) );}

.shelf {display: flex; flex-direction: column;}
.shelf > .bottom {margin-top:auto;}


.centering {text-align:center;}
.centering > * { margin-left:auto !important; margin-right:auto !important;}



/* 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;}

/* clearfix --- for use together with legacy float layout */
.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;}


/*** Media Query ***/

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

	.shell.step > .penta { width:25%;}
	.shell.step.gap > .penta { width:calc((100% - (var(--flex-gap)) * 3)  / 4);}

	.shell.break1170 > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{width:100%;}

	.shell.break1170.step > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{width:50%;}

	.shell.break1170.step.gap > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
	{width:calc((100% - (var(--flex-gap))) / 2);}
	
}

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

	.shell.break900:not(.step) { flex-direction:column;}
	.shell.break900:not(.step) > :is(.solo, .full, .duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{width:100%;}
	
	.shell.step { flex-direction:row; flex-wrap:wrap; }
	.shell.step > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{width:50%;}
	
	.shell.step.gap > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{width:calc((100% - (var(--flex-gap))) / 2);}
	
	.shell.gap.keep-third:not(.keep) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
	{width:calc((100% - (var(--flex-gap)) * 2)  / 3);}

}


/* Mobile Single Column ( like 7-10 inch Tablet ) */
@media only screen and (max-width: 768px) {

	:is(.container, .std-container, .semi-wide-container, .wide-container, .x-wide-container, .xx-wide-container, .xxx-wide-container):not(.stretch):not(.pd-side) {padding:0 0.3em;}
	:is(.container, .std-container, .semi-wide-container, .wide-container, .x-wide-container, .xx-wide-container, .xxx-wide-container).stretch {padding:0;}
	:is(.container, .std-container, .semi-wide-container, .wide-container, .x-wide-container, .xx-wide-container, .xxx-wide-container).pd-side {padding:0 max(3%, 1em);}

	.shell.break768:not(.step) { flex-direction:column;}
	.shell.break768 > :is(.solo, .full, .duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{ width:100%; }
	
	.shell:not(.break600):not(.keep) > :is(.solo, .full, .duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{ width:100%; margin:0; }	

	.shell.step:not(.keep) { flex-direction:row; flex-wrap:wrap; }
	.shell.step:not(.keep) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quarter, .three-quarters, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{ width:50%;}

	:is(.shell.step.gap:not(.break600):not(.keep), .shell.step.gap:not(.keep)) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{width:calc((100% - (var(--flex-gap))) / 2);}

	.shell.keep-half:not(.keep) { flex-direction:row !important;}
	.shell.keep-half:not(.keep) > :is(.solo, .full) {width:100% !important;}
	.shell.keep-half:not(.keep) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quarter, .three-quarters, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
 	{ width:50%;}	
	
	.shell.gap.keep-half:not(.keep) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
	{width:calc((100% - (var(--flex-gap))) / 2);}


	
	/* 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;}
	
}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width:660px) and (max-width:900px) {

	.shell.step { flex-direction:row; flex-wrap:wrap; }
	.shell.step > .quad { width:calc(100% / 3);}
	.shell.gap.step > .quad { width:calc((100% - (var(--flex-gap)) * 2)  / 3);}
	.shell.step > .penta { width:calc(100% / 3);}
	.shell.step.gap > .penta { width:calc((100% - (var(--flex-gap)) * 2)  / 3);}
	

	.shell.keep-half:not(.keep) { flex-direction:row !important;}
	.shell.keep-half:not(.keep) > .quad { width:calc(100% / 3);}
	.shell.gap.keep-half:not(.keep) > .quad { width:calc((100% - (var(--flex-gap)) * 2)  / 3);}
	.shell.keep-half:not(.keep) > .penta { width:calc(100% / 3);}
	.shell.gap.keep-half:not(.keep) > .penta { width:calc((100% - (var(--flex-gap)) * 2)  / 3);}


}

@media only screen and (max-width:599px) {
	
	:is(.shell.break1170.step, .shell.break1170.step.gap) > :is(.duo, .half, .trio)
	{width:100%;}

	.shell.break600:not(.keep) > :is(.solo, .full, .duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{ width:100%;}	

	:is(.shell.break600.step:not(.keep), .shell.break600.step.gap:not(.keep)) > :is(.duo, .half, .trio)
	{width:100%;}

	.shell.break600.step:not(.keep) > :is(.one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{ width:50%;}	

	.shell.break600.gap.keep-half:not(.keep) > :is(.one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
	{width:calc((100% - (var(--flex-gap))) / 2);}

}


/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width:481px) and (max-width:660px) {

	.shell.step { flex-direction:row; flex-wrap:wrap; }
	.shell.step > :is(.quad, .penta) { width:50%;}	
	.shell.gap.step > .quad, .shell.gap.step > .penta { width:calc((100% - (var(--flex-gap))) / 2);}

	.shell.keep-half:not(.keep) { flex-direction:row !important;}
	.shell.keep-half:not(.keep) > :is(.quad, .penta) { width:50% !important;}
	.shell.gap.keep-half:not(.keep) > :is(.quad, .penta) { width:calc((100% - (var(--flex-gap))) / 2) !important;}
	
}


/* Traditional SmartPhone Portrait Size */
@media only screen and (max-width: 480px) {

	:is(.shell.break1170.step, .shell.break1170.step.gap) > :is(.one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
	{width:100%;}

	.shell:not(.keep):not(.keep-half), .shell.step:not(.keep):not(.keep-half), .shell.step.gap:not(.keep):not(.keep-half) { flex-direction:column;}
	:is(.shell:not(.keep):not(.keep-half), .shell.step:not(.keep):not(.keep-half), .shell.step.gap:not(.keep):not(.keep-half)) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
 	{ width:100%;}

	:is(.shell.step.gap:not(.break600):not(.keep):not(.keep-half), .shell.step.gap:not(.keep):not(.keep-half)) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty) 
	{width:100%;}
	
	.shell.keep-half:not(.keep) { flex-direction:row !important;}
	.shell.keep-half:not(.keep) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
	{ width:50%;}
	
	.shell.keep-third:not(.keep) { flex-direction:row !important;}
	.shell.keep-third:not(.keep) > :is(.trio, .quad, .penta)
	{ width:calc(100% / 3) !important;}

	.shell.gap.keep-half:not(.keep) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
	{width:calc((100% - (var(--flex-gap))) / 2);}

	.shell.gap.keep-third:not(.keep) > :is(.duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .thirty, .forty, .forty-five, .fifty-five, .sixty, .seventy, .eighty)
	{width:calc((100% - (var(--flex-gap)) * 2)  / 3);}


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

}



@media only screen and (min-width:600px) and (max-width: 768px) {

	
}