@charset "utf-8";
/* ==================================================================
CSS information
style info :RESET
================================================================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;
}
body { line-height:1; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000;  font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

h1 , h2 , h3 , h4 { line-height:1; }
ul { list-style:none; }
p { line-height:1; }
img { vertical-align:bottom; border:none; }
table { font-size:inherit; font:100%;}




/* ==================================================================
CSS information
style info :共通
================================================================== */
html,body { -webkit-text-size-adjust: none;}
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; }
div, h1, h2, h3, h4, h5, p { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
ul, li, ol, dl, dt, dd, a, span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
header, footer, section, aside, article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
body *::before, body *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

img { max-width: 100%; height: auto;}
body { font-family: 'Roboto', 'Noto Sans JP', "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif; }
body .fo-serif { font-family: 'Noto Serif JP', serif;}

@media screen and (min-width: 641px) {
	body { overflow: hidden; }
	img { width: auto; max-height: 100%; }
}

/* --------------------------------------------------------
#allWrap
-------------------------------------------------------- */
/*#allWrap::before ,
#allWrap::after { content: ""; display: block; clear: both; }
#allWrap { zoom:1; overflow: hidden; }*/
#allWrap { position: relative; }
@media screen and (max-width: 640px) {
#allWrap { width: 100%; height: 100%; overflow: hidden;}
}
@media screen and (min-width: 641px) {
	#allWrap { width: 100%; height: 100vh;}
	#allWrap { display: inline-block; width: auto;}
}


/* --------------------------------------------------------
#nowloading
-------------------------------------------------------- */
#nowloading { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #fff; z-index: 9990; }
#loadingicon { position: absolute; top: 50%; left: 50%; width: calc(500/750*100%); margin-top: calc(-223/750*100%); margin-left: calc(-250/750*100%); 
	-ms-transition: all .3s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms; transition: all .3s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;}
#loadingicon.loaded { width: calc(305/750*100%); margin-top: calc(-135/750*100%); margin-left: calc(-152/750*100%); }
@media screen and (min-width: 641px) {
	#loadingicon { width: calc(500/1400*100%); margin-top: calc(-223/1400*100%); margin-left: calc(-250/1400*100%); }
	#loadingicon.loaded { width: calc(305/1400*100%); margin-top: calc(-135/1400*100%); margin-left: calc(-152/1400*100%); }
}
@media screen and (min-width: 1401px) {
	#loadingicon { width: 500px; margin-top: -223px; margin-left: -250px; }
	#loadingicon.loaded { width: 305px; margin-top: -135px; margin-left: -152px; }
}




/* --------------------------------------------------------
header
-------------------------------------------------------- */
header { display: block; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: auto; z-index: 9000; transform-origin: top left; padding: calc(20/750*100%) calc(30/750*100%); 
	border-bottom: 1px solid #808080; background: #fff; }
header { -webkit-transition: 0.6s cubic-bezier(0,.65,.44,1); transition: 0.6s cubic-bezier(0,.65,.44,1); -webkit-backface-visibility: hidden; }

header .hd__logo { position: relative; width: calc(70/690*100%);}

header .globalNav { width: 100%; height: auto; background: #fff; visibility: hidden; position: absolute; left: 0; bottom: 0; }
header .globalNav { -webkit-transition: 0.3s cubic-bezier(0,.65,.44,1); transition: 0.3s cubic-bezier(0,.65,.44,1); -webkit-backface-visibility: hidden; }
header .globalNav { -webkit-transform: scaleY(0); transform: scaleY(0); transform-origin: top;}

header .gNavList { width: calc(750/690*100%); position: absolute; top: 0; left: calc(-30/690*100%); border-bottom: 1px solid #808080; background: #fff; }
header .gNavList .gNl__item { width: 100%; border-top: 1px solid #ccc;}
header .gNavList .gNl__item { -webkit-transition: all 0.6s cubic-bezier(0,.65,.44,1) 0.3s; transition: all 0.6s cubic-bezier(0,.65,.44,1) 0.3s; -webkit-backface-visibility: hidden; }
header .gNavList .gNl__item { transform-origin: top; -webkit-transform:translateY(-10px); transform:translateY(-10px); opacity: 0;}
header .gNavList .gNl__item a { display: block; padding: calc(20/690*100%); text-align: center; text-decoration: none; color: #000; letter-spacing: 0.2rem;}

header.stateActive .globalNav { visibility: visible; -webkit-transform: scaleY(1); transform: scaleY(1);}
header.stateActive .gNavList .gNl__item { -webkit-transform:translateY(0px); transform:translateY(0px); opacity: 1; }

@media screen and (max-width: 640px) {
header { left: 0!important; }
}
@media screen and (min-width: 641px) {
	header { top: 100vh!important; width: 100vh; padding: 20px 60px; transform: rotate(-90deg); }
	header.stateActive { left: 0; }

	header .hd__logo { position: absolute; top: 14px; right: 50px; width: 44px; transform: rotate(90deg); z-index: 2;}

	header .globalNav { width: 100%; height: auto; visibility: visible; position: relative; left: 0; bottom: 0; }
	header .globalNav { -webkit-transform: scaleY(1); transform: scaleY(1); }

	header .gNavList { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; }
	header .gNavList { width: 100%; position: relative; top: 0; left: 0; border-bottom: none; }
	header .gNavList .gNl__item { width: auto; display: inline-block; margin-right: calc(40/970*100vh); border: none;}
	header .gNavList .gNl__item { -webkit-transform:translateY(0px); transform:translateY(0px); opacity: 1;}
	header .gNavList .gNl__item a { padding: 5px; text-align: left;}
	
	header .gNavList .gNl__item a { -webkit-transition: all 0.2s cubic-bezier(0,.65,.44,1) 0s; transition: all 0.2s cubic-bezier(0,.65,.44,1) 0s; }
	header .gNavList .gNl__item a:hover { -webkit-transform: scale(1.2); transform: scale(1.2); }

}

/* --------------------------------------------------------
.btn__spMenu
-------------------------------------------------------- */
.btn__spMenu { display: block; cursor: pointer; position: absolute; top: 0; right: calc(10/750*100%); margin-top: calc(10/750*100%); background: #fff; width: calc(90/750*100%); }
.btn__spMenu .btn__spMenu__inner { display: block; position: relative; padding: calc(30/90*100%) calc(20/90*100%);}
.btn__spMenu .btn__spMenu__icon { position: relative; margin: 0 auto; }
.btn__spMenu .btn__spMenu__icon::after, 
.btn__spMenu .btn__spMenu__icon::before { position: absolute; top: 0; left: 0; content: '';}
.btn__spMenu .btn__spMenu__icon, 
.btn__spMenu .btn__spMenu__icon::after, 
.btn__spMenu .btn__spMenu__icon::before { display: block; width: 100%; height: auto; padding-top: 2px; background-color: #808080;
	-webkit-transition: all .3s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .3s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.btn__spMenu .btn__spMenu__icon::before { margin-top: calc(-16/50*100%);}
.btn__spMenu .btn__spMenu__icon::after { margin-top: calc(16/50*100%);}

.btn__spMenu.active .btn__spMenu__icon { background-color: transparent; transform-origin: center;}
.btn__spMenu.active .btn__spMenu__icon:after, 
.btn__spMenu.active .btn__spMenu__icon:before { margin-top: 0; }
.btn__spMenu.active .btn__spMenu__icon:before { -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.btn__spMenu.active .btn__spMenu__icon:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
@media screen and (min-width: 641px) {
	.btn__spMenu { display: none;}
}


/* --------------------------------------------------------
.conts
-------------------------------------------------------- */
.conts {}
.section { width: 100%; padding: calc(60/750*100%) calc(30/750*100%) calc(90/750*100%); position: relative; color: #202020; }
@media screen and (max-width: 640px) {
.conts { width: 100%!important; transform: translate3d(0px, 0px, 0px)!important;}
div.section.sLast { padding: 0; }
}
@media screen and (min-width: 641px) {
	.conts { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; width: auto;}
	.conts { white-space: nowrap; overflow: visible; height: 100vh;}
	.conts { -webkit-transition: 1.2s cubic-bezier(0,.65,.44,1); transition: 1.2s cubic-bezier(0,.65,.44,1); -webkit-backface-visibility: hidden; }
	/*.conts { -webkit-transition: 1.2s ease-in-out; transition: 1.2s ease-in-out; -webkit-backface-visibility: hidden; }*/
	
	/*div.section { width: 100vw; height: 100vh; }
	*/
	.section {
		width: 100vw;
		height: 100vh;
		/*background: #efefef;*/
		/*float: left;*/
		display: inline;
		position: relative;
		padding: calc(60/1090*100vh) 0;
	}
	#nav {
		list-style: none;
		margin-bottom: 10px;
		position: fixed;
		left: 60px;
		top: 60px;
	}
	#nav li {
		display: inline;
		margin-right: 0.5em;
	}
	
}
@media screen and (min-height: 1091px) {
	div.section { padding: 120px 0; }
}



/* --------------------------------------------------------
.btn_ov
-------------------------------------------------------- */
@media screen and (min-width: 641px) {
	.btn_ov a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: block;}
	.btn_ov a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);}
}



/* ----------------------------------------------------------------------------------------------------------------
footer
---------------------------------------------------------------------------------------------------------------- */
footer { display: block; padding: 1rem; text-align: center; }
footer .copyright { font-size: 1rem; color: #202020; }
@media screen and (min-width: 641px) {
	footer { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 810px; height: auto; padding: 3px; z-index: 9000; }
}

/* ----------------------------------------------------------------------------------------------------------------
magnific
---------------------------------------------------------------------------------------------------------------- */
.modal_mfpYt.mfp-bg ,
.modal_mfpImg.mfp-bg ,
.modal_mfpImgGallery.mfp-bg ,
.modal_mfpInline.mfp-bg { z-index: 9999; }
.modal_mfpInline.mfp-bg { background: #fff; opacity: 0.9; }

.modal_mfpYt.mfp-wrap ,
.modal_mfpImg.mfp-wrap ,
.modal_mfpImgGallery.mfp-wrap ,
.modal_mfpInline.mfp-wrap { z-index: 9999;}

.modal_mfpYt .mfp-iframe-holder .mfp-content { max-width: 1080px; }
.modal_mfpImg .mfp-iframe-holder .mfp-content ,
.modal_mfpImgGallery .mfp-iframe-holder .mfp-content { max-width: 1280px; }
.modal_mfpInline .mfp-inline-holder .mfp-content { max-width: 1280px; }

.modal_mfpYt .mfp-iframe-holder .mfp-close ,
.modal_mfpImg .mfp-image-holder .mfp-close ,
.modal_mfpImgGallery .mfp-image-holder .mfp-close { position: fixed; top: 0; right: 0; background: url(../img/btn_close.png) top right no-repeat; background-size: auto 60%; background-position: calc(100% - 30px) 10px;}
.modal_mfpInline .mfp-inline-holder .mfp-close { position: fixed; top: 0; right: calc(30/750*100%); width:calc(35/750*100%); background: url(../img/btn_close.png) top right no-repeat; background-size: 100%; background-position: center;}
.modal_mfpImg img,
.modal_mfpImgGallery img {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
touch-callout:none;
user-select:none;
}

/* .modal_mfpImgGallery ---------------------------------------------------------------------------------------------------------------- */
.modal_mfpImgGallery .mfp-arrow { opacity: 0.5; width: 200px; }
.modal_mfpImgGallery .mfp-arrow { margin-top: -255px; height: 510px; }
.modal_mfpImgGallery .mfp-arrow:active { margin-top: -253px; }
.modal_mfpImgGallery .mfp-arrow:before,
.modal_mfpImgGallery .mfp-arrow:after { display: none; }
.modal_mfpImgGallery .mfp-arrow-left { background: url(../img/icon_arrow_left.png) left center no-repeat; }
.modal_mfpImgGallery .mfp-arrow-right { background: url(../img/icon_arrow_right.png) right center no-repeat; }
@media screen and (min-width: 641px) {
.modal_mfpImgGallery .mfp-arrow { opacity: 0.65; }
}

/* .modal_mfpInline ---------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 641px) {
	.modal_mfpInline .mfp-inline-holder .mfp-close { right: 30px; width: 35px; }
}



/* --------------------------------------------------------
汎用クラス
-------------------------------------------------------- */
@media screen and (max-width: 640px) {
.pc { display: none; }
}
@media screen and (min-width: 641px) {
	.sp { display: none; }
}