@charset "utf-8";

/*++++++++++++++++++++++++++++++ reset ++++++++++++++++++++++++++++++*/
/* HTML5 display definitions */ section, nav, article, aside, hgroup, header, footer, figure, figcaption, details {display: block; } video, audio, canvas {display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) {display: none; } [hidden] {display: none; } /* The root element */ html {font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* Sections */ body {font-family: sans-serif; margin: 0; } h1, h2, h3, h4, h5, h6 {font-size: 1em; margin: 0; } /* Grouping content */ p, blockquote, dl, dd, figure {margin: 0; } hr {color: inherit; height: auto; -moz-box-sizing: content-box; box-sizing: content-box; } pre {font-family: monospace, sans-serif; white-space: pre-wrap; word-wrap: break-word; margin: 0; } ol, ul {padding: 0; margin: 0; } li {list-style: none; } /* Text-level semantics */ a:focus {outline: none /*thin dotted*/; } a:hover, a:active {outline: 0; } strong, b {font-weight: bold; } small {font-size: 0.83em; } q {quotes: none; } abbr[title] {border-bottom: 1px dotted; } code, samp, kbd {font-family: monospace, sans-serif; } mark {color: black; background-color: yellow; } sub, sup {font-size: 0.83em; line-height: 0; vertical-align: baseline; position: relative; } sub {bottom: -0.25em; } sup {top: -0.5em; } br {letter-spacing: 0; } /* Embedded content */ img {width: 100%; border: 0; vertical-align: bottom; -ms-interpolation-mode: bicubic; } svg:not(:root) {overflow: hidden; } /* Tabular data */ table {border-collapse: collapse; border-spacing: 0; } caption {padding: 0; text-align: left; } th, td {text-align: left; vertical-align: baseline; padding: 0; } /* Forms */ form {margin: 0; } fieldset {border: 0; padding: 0; margin: 0; } legend {border: 0; *margin-left: -7px; } input, button, select, textarea {font-family: inherit; font-size: 1em; color: inherit; margin: 0; } input, button {line-height: normal; vertical-align: inherit; *vertical-align: middle; } input::-moz-focus-inner, button::-moz-focus-inner {border: 0; padding: 0; } input[type="search"] {-webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]:focus {outline-offset: -2px; } input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; } input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0; } input[type="submit"], input[type="reset"], input[type="button"], button {cursor: pointer; -webkit-appearance: button; *overflow: visible; } select {background-color: inherit; line-height: normal; } textarea {vertical-align: top; overflow: auto; *font-family: sans-serif; } address {font-style: normal; }
h1, h2,h3, h4, h5, h6, th, td {font-weight: normal; }
* {margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
/*============================== reset ==============================*/



/*++++++++++++++++++++++++++++++ basic ++++++++++++++++++++++++++++++*/
*	{
	margin:0;
	padding:0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
html, body {
	width: 100%;
	height: 100vh;
	}
html {
	height: -webkit-fill-available;
	font-size: 2.0vw;
	line-height: 2.2;
	color: #000;	/* main font color */
	letter-spacing: 0;
	}
body {
	min-height: 100vh;
	min-height: -webkit-fill-available;
	font-weight: normal;
	background: #fff;
	margin: 0 auto;
	padding: 0;
	animation: fx-body 1.5s ease 0.1s 1 normal both;
	-webkit-animation: fx-body 1.5s ease 0.1s 1 normal both;
	}
@keyframes fx-body {			0%	{opacity: 0; }	100%	{opacity: 1; } }
@-webkit-keyframes fx-body {		0%	{opacity: 0; }	100%	{opacity: 1; } }

br.spc {display: block; }
span.spc {display: none; }

a			{color: #000; }
a:link			{text-decoration: none; }
a:visited		{text-decoration: none; }
a:hover		{text-decoration: underline; }
a:active		{text-decoration: none; }
/*============================== basic ==============================*/



/*++++++++++++++++++++++++++++++ GENERAL ++++++++++++++++++++++++++++++*/


body>div {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	}


div#main {
	background: #fff;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	}

:root {
	--max_w: 1000;		/* max-width */
	--max: calc(var(--max_w) *1px/100);
	}

div#main>div {
	position: relative;
	width: 100%;
	max-width: calc(var(--max) *100);
	margin: 0 auto;
	}



header {
	position: relative;
	width: 100%;
	height: 100vh;
	text-align: right;
	border: solid 0px #f00;
	}
div.img_sub {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	filter: blur(10px);
	}
div.img_sub img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	}
div.img_main {
/*	position: absolute;
	top: 0;
	right: 0;
*/	width: 100%;
	height: 100vh;
/*	text-align: right;*/
	}
div.img_main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 88% 50%;
	}
div#h1 {
	position: absolute;
	top: 75.8%;
	left: 50%;
	width: 56%;
	line-height: 0;
	transform: translate(-50%, -50%);
	border: dotted 0px #f00;
	}
div#h1 img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	}
header h1 {display: none; }
div.inst {
	position: absolute;
	top: 3vh;
	right: 3vh;
	width: 4vh;
	line-height: 0;
	opacity: 0.5;
	border: dotted 0px #f00;
	}
div.inst:hover {opacity: 0.9; }
div.inst img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	}

div.set {
	position: relative;
	margin-top: 12vw;
	overflow: hidden;
	border: solid 0px #f00;
	}
div.set:nth-of-type(1) {margin-top: 10vw; margin-bottom: -14vw;}
div.set:nth-of-type(4) {margin-top: 13vw; }
div.set:nth-of-type(6) {margin-top: 15vw; }
div.set:nth-of-type(7) {margin-top: 13vw; }
div.set:nth-of-type(8) {margin-top: 17vw; }
div.flow {overflow: hidden; }
div.set img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
	}
div.set img:hover {
/*	transform: scale(1.3);*/
/*	filter: sepia(0.7);*/
	}


div.purpose {
                width: 79.5vw;
                height: 67.2vw;
	margin-left: 21.5vw;
	border: solid 0px #f00;
	}
div.purpose img {}

div.p01 {
	width: 64vw;
	height: 65vw;
	margin-left: 36vw;
	border: solid 0px #f00;
	}
div.p01 img {
	object-position: 68% 0;
	transform: translate(0, 0) rotate(0deg) scale(1.03323076923);
	}

div.p02 {
	position: absolute;
	top: 23vw;
	width: 44vw;
	height: 63vw;
	border: solid 0px #00f;
	}
div.p02 img {
	object-position: 40% 50%;
	transform: translate(0, 0) rotate(0deg) scale(1.01087301587);
	}

div.p03 {
position: absolute;
    left: 15.5vw;
    top: 57vw;
    width: 70vw;
    height: 100vw;
    border: solid 0px #f00;
	}
div.p03 img {
    object-position: 0% 0%;
    transform: translate(0%, 0%) rotate(0deg) scale(1);
                }

div.p04 {
    width: 70vw;
    height: 57vw;
    margin: 0 15.5vw 104vw;
    border: solid 0px #00f;
	}
div.p04 img {
    object-position: 50% 23%;
    transform: translate(0%, 0) rotate(0deg) scale(1);
                }

div.p05 {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 57vw;
	height: 77vw;
	z-index: 2;
	border: solid 0px #f00;
	}
div.p05 img {
	object-position: 50% 20%;
	transform: translate(2%, 0) rotate(2deg) scale(1.10159649122); }
div.p06 {
	width: 53vw;
	height: 73vw;
	margin-bottom: 42vw;
	border: solid 0px #00f;
	}
div.p06 img {
	object-position: 31% 50%;
	transform: translate(0, 0) rotate(0deg) scale(1.0000); }

div.p07 {
	width: 70vw;
	height: 94vw;
	margin: 0 15vw;
	border: solid 0px #f00;
	}
div.p07 img {
	object-position: 50% 34%;
	transform: translate(0.9%, 0) rotate(0deg) scale(1.01841428571); }


div.p08 {
    width: 100vw;
    height: 67vw;
    margin-top: 49vw;
    border: solid 0px #00f;
	}
div.p08 img {
    object-position: 100% 50%;
    transform: translate(0, 0) rotate(1.1deg) scale(1.05);
                }
div.p09 {
	position: absolute;
	top: 0;
	right: 0;
	width: 44vw;
	height: 60vw;
	border: solid 0px #f00;
	}
div.p09 img {
	object-position: 50% 50%;
	transform: translate(0, 0) rotate(0deg) scale(1.01009090909); }

div.p10 {
	width: 54vw;
	height: 74vw;
	border: solid 0px #00f;
	}
div.p10 img {
	object-position: 50% 50%;
transform: translate(0%, 0%) rotate(0deg) scale(1.1);
                }
div.p11 {
	position: absolute;
	right: 0;
	top: 0;
	width: 46vw;
	height: 74vw;
	border: solid 0px #f00;
	}
div.p11 img {
    object-position: 100% 50%;
    transform: translate(0, 0%) rotate(0deg) scale(1.1);
                }

div.p12 {
width: 80vw;
    height: 111vw;
    margin-top: 30vw;
    border: solid 0px #00f;
	}
div.p12 img {
    object-position: 0% 50%;
    transform: translate(0, 2%) scale(1.1);
                }
div.p13 {
	position: absolute;
	right: 0;
	top: 0;
	width: 40vw;
	height: 61vw;
	border: solid 0px #f00;
	}
div.p13 img {
    object-position: 50% 50%;
    transform: translate(0, 0%) scale(1);
                }

div.p14 {
	position: absolute;
	left: 0;
	top: 0;
	width: 46vw;
	height: 70vw;
	border: solid 0px #00f;
	}
div.p14 img {
    object-position: 50% 50%;
    transform: translate(0, 0) rotate(0deg) scale(1.06);
                }
div.p15 {
    width: 66vw;
    height: 99vw;
    margin: 40vw 0 0 34vw;
    border: solid 0px #f00;
	}
div.p15 img {
object-position: 50% 50%;
    transform: translate(0.2%, 0%) rotate(0deg) scale(1.02);
                }



div#footer {
	position: relative;
	width: 100%;
	height: 100vh
	margin-top: 16vw;
	border: solid 0px #f00;
	}
div#footer img {
	width: 100%;
	height: 100%;
	}
div.pf {
    overflow: hidden;
    width: 53vw;
    height: 71vw;
    margin: 37vw 23.5vw 0;
    border: solid 0px #f00;
	}

div.pf img {
	object-fit: cover;
	transform: (0, 0) rotate(0deg) scale(1.0000);
                object-position: 96% 20%;
                }

footer {
	display: inline-block;
	width: 100%;
	border: solid 0px #f00;
	}

div#inst, div#logo {
	margin: 9vw auto 0;
	line-height: 0;
	border: solid 0px #f00;
	}
div#inst {width: 8%; }
div#logo {
	width: 30%;
	margin-top: 6vw
	}
footer address {
	margin: 6vw auto 9vw;
	font-size: min(0.9rem, 10px);
	color: #666;
	text-align: center;
	}




/* ========== Remodal [Necessary Styles] ========== */
/* Hide scroll bar */ html.remodal-is-locked {overflow: hidden; touch-action: none; } /* Anti FOUC */ .remodal, [data-remodal-id] {display: none; } /* Necessary styles of the overlay */ .remodal-overlay {position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; } /* Necessary styles of the wrapper */ .remodal-wrapper {position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto; text-align: center; -webkit-overflow-scrolling: touch; } .remodal-wrapper:after {display: inline-block; height: 100%; content: ""; } /* Fix iPad, iPhone glitches */ .remodal-overlay, .remodal-wrapper {backface-visibility: hidden; } /* Necessary styles of the modal dialog */ .remodal {position: relative; outline: none; text-size-adjust: 100%; } .remodal-is-initialized {/* Disable Anti-FOUC */ display: inline-block; }


/* ========== Remodal ========== */

/* Default theme styles for the background */
.remodal-bg.remodal-is-opening, .remodal-bg.remodal-is-opened {
	filter: blur(3px);
	height: -webkit-fill-available;
	}

/* Default theme styles of the overlay */
.remodal-overlay {background: #fff; }
.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {animation-duration: 0.3s; animation-fill-mode: forwards; }
.remodal-overlay.remodal-is-opening {animation-name: remodal-overlay-opening-keyframes; }
.remodal-overlay.remodal-is-closing {animation-name: remodal-overlay-closing-keyframes; }

/* Default theme styles of the wrapper */
.remodal-wrapper {
	padding: 1vh;
/*	padding: 1dvh;*/
	vertical-align: top;
	border: solid 0px #000;
	}
.remodal-wrapper:after, .remodal {vertical-align: middle; }

/* Default theme styles of the modal dialog */

:root {
	--rem_p: 14;
	}

.remodal {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: calc(var(--rem_p) *1vh) 0 0;
/*	padding: calc(var(--rem_p) *1dvh) 0 0;*/
	border: solid 0px #f00;
	}
.remodal.remodal-is-opening,
.remodal.remodal-is-closing {animation-duration: 0.3s; animation-fill-mode: forwards; }
.remodal.remodal-is-opening {animation-name: remodal-opening-keyframes; }
.remodal.remodal-is-closing {animation-name: remodal-closing-keyframes; }

/* Close button */
.remodal-close {
	display: block;
	overflow: visible;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 8vh;
/*	height: 8dvh;*/
	margin: 0;
	padding: 0;
	cursor: pointer;
	transition: color 0.2s;
	text-decoration: none;
	text-align: right;
	border: 0;
	outline: 0;
	background: transparent;
	z-index: 9999;
	border: solid 0px #ccc;
	}
.remodal-close img {
	width: 6vh;
	height: 6vh;
	margin: 0 0 2vh;
/*	width: 6dvh;
	height: 6dvh;
	margin: 0 0 2dvh;*/
	padding: 0;
	line-height: 0;
	}
.remodal-confirm::-moz-focus-inner, .remodal-cancel::-moz-focus-inner, .remodal-close::-moz-focus-inner {padding: 0; border: 0; }

/* Keyframes ========================================================================== */
@keyframes remodal-opening-keyframes {from {transform: scale(1.05); opacity: 0; } to {transform: none; opacity: 1; filter: blur(0); } }
@keyframes remodal-closing-keyframes {from {transform: scale(1); opacity: 1; } to {transform: scale(0.95); opacity: 0; filter: blur(0); } }
@keyframes remodal-overlay-opening-keyframes {from {opacity: 0; } to {opacity: 1; } }
@keyframes remodal-overlay-closing-keyframes {from {opacity: 1; } to {opacity: 0; } }




:root {
	--photo_w: 0.70518713066;
	--photo_w: 0.75045871559;
	--photo_h: 60;	/* Photo Height % */
	}

h2 {
	position: absolute;
	top: calc(var(--photo_h) * 1vh + calc(var(--rem_p) *1vh));
	left: max(calc(calc(calc(100% - calc(var(--photo_h) * 1vh * var(--photo_w))) / 2)), 0vh);
/*	top: calc(var(--photo_h) * 1dvh + calc(var(--rem_p) *1dvh));
	left: max(calc(calc(calc(100% - calc(var(--photo_h) * 1dvh * var(--photo_w))) / 2)), 0dvh);*/
	width: auto;
	height: auto;
	margin: 0 auto;
	font-size: min(1.5rem, 12px);
	font-weight: normal;
	text-align: left;
	border: dotted 0px #f00;
	display: none;
	}


.remodal .bx-wrapper, remodal .bx-viewport {
	display: block;
	width: auto;
	height: auto;
	height: calc(var(--photo_h) * 1vh) !important;
/*	height: calc(var(--photo_h) * 1dvh) !important;*/
	vertical-align: middle;
	}
.remodal .bx-wrapper {border: dotted 0px #000; }
.remodal .bx-viewport {border: dotted 0px #f00; }
.rem_slider {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	text-align: center !important;
	border: solid 0px #00f;
	}
.rem_slider li {
	position: relative;
	width: 100% !important;
	height: calc(var(--photo_h) * 1vh + 3vh) !important;
/*	height: calc(var(--photo_h) * 1dvh) !important;*/
	margin: auto !important;
	text-align: center !important;
	border: solid 0px #f00;
	}

div.bx-caption {
	position: absolute;
	z-index: 9998;
	top: calc(var(--photo_h) * 1vh + 0.5vh) !important;
	left: max(calc(calc(calc(100% - calc(var(--photo_h) * 1vh * var(--photo_w))) / 2)), 0vh);
	font-size: min(1.5rem, 12px);
	line-height: 1;
	border: solid 0px #000;
	}


.rem_slider li img {
	width: 100% !important;
	height: 100% !important;
	max-height: calc(var(--photo_h) * 1vh) !important;
/*	max-width: calc(var(--photo_w) * var(--photo_h) *1vh) !important;
	max-width: calc(var(--photo_w) * var(--photo_h) *1dvh) !important;
	max-height: calc(var(--photo_h) * 1vh) !important;
	max-height: calc(var(--photo_h) * 1dvh) !important;*/
	object-fit: contain;
	border: dotted 0px #000;
	}

.bx-prev, .bx-next {
	position: absolute;
	width: 50%;
	height: 90vh;
/*	height: 90dvh;*/
	bottom: 0;
	text-indent: -9999px;
	z-index: 9999;
	border: solid 0px #ccc;
	}

:root {
	--arrow_margin: 0.4;
	--arrow_size: 5;
	--arrow_p: center;
	--arrow_s: calc(var(--arrow_size) * 1vh);
	--arrow: calc(calc(calc(var(--photo_h) * 1vh * var(--photo_w)) / 2) + calc(var(--arrow_margin) * 1vh));
/*	--arrow_s: calc(var(--arrow_size) * 1dvh);*/
/*	--arrow: calc(calc(calc(var(--photo_h) * 1dvh * var(--photo_w)) / 2) + calc(var(--arrow_margin) * 1dvh));*/
	}

.bx-prev {
	background: url(../img/prev.png) 0/var(--arrow_s) no-repeat;
	background-position: right var(--arrow) var(--arrow_p);
	left: 0;
	}

.bx-next {
	background: url(../img/next.png) 0/var(--arrow_s) no-repeat;
	background-position: left var(--arrow) var(--arrow_p);
	right: 0;
	}

@media(orientation: portrait) and (max-aspect-ratio: 2/3) {
:root {
	--arrow_posi: 11;	/*add*/
	--arrow_p: top calc(calc(var(--photo_h) *1vh) + calc(var(--arrow_posi) *1vh));
	--arrow_calc: calc(calc(calc(var(--photo_h) * 1vh * var(--photo_w)) / 2) - calc(var(--arrow_size) * 1vh));	/*add*/
	--arrow: min(var(--arrow_calc), calc(50vw - 1vh - calc(var(--arrow_size) * 1vh)));
	}
.bx-prev, .bx-next {border: solid 0px #f00; }
}