@charset "UTF-8";

:root {

	--ease-in: .5,0,1,.5 ;
	--ease-out:.35,.6,.4,1;
	--ease-in-out:1,0,0,1;
	
	
	--color: #d1e0d1;
}

.keyColor{ color: #d1e0d1;}


@font-face {
  font-family: "Gotham-Bold";
  src: url("../font/Gotham-Bold.otf") format('opentype'),
	  url("../font/Gotham-Bold.eot?") format('eot'),
       url("../font/Gotham-Bold.woff") format('woff');
}


@font-face {
  font-family: "Gotham-Book";
  src: url("../font/Gotham-Book.otf") format('opentype'),
	  url("../font/Gotham-Book.eot?") format('eot'),
       url("../font/Gotham-Book.woff") format('woff');
}

@font-face {
  font-family: "Gotham-Light";
  src: url("./font/Gotham-Light.otf") format('opentype'),
	  url("./font/Gotham-Light.eot?") format('eot'),
       url("./font/Gotham-Light.woff") format('woff');
}



/* 
================================================================================
reset
================================================================================
*/
/*/////////////////////////
 reset
//////////////////////////*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }


dt,dd{  align-self: normal;}

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }
  
  
  
img,
div,
a,
*:after,
*:before{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	vertical-align: bottom;
}


::-webkit-scrollbar
{
        overflow:hidden;
        width:3px;
        background:#999;
         

}
::-webkit-scrollbar:horizontal
        {
                height:3px;
                background:#fafafa;
        }
::-webkit-scrollbar-button
{
       display:none;
}
::-webkit-scrollbar-piece
{
        background:#eee;
}
::-webkit-scrollbar-piece:start
        {
                background:#eee;
        }
::-webkit-scrollbar-thumb
{
        overflow:hidden;
        -webkit-border-radius:3px;
        border-radius:3px;
         
        background:#333;
}
::-webkit-scrollbar-corner
{
        overflow:hidden;
        -webkit-border-radius:3px;
        border-radius:3px;
         
        background:#333;
}

/*/////////////////////////
 clearfix
//////////////////////////*/
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */
:placeholder-shown {
  color: #666;
  opacity: 1; }

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
  color: #666;
  opacity: 1; }

/* Firefox 18- */
:-moz-placeholder {
  color: #666;
  opacity: 1; }

/* Firefox 19+ */
::-moz-placeholder {
  color: #666;
  opacity: 1; }

/* IE 10+ */
:-ms-input-placeholder {
  color: #666;
  opacity: 1; }

.placeholder {
  color: #666;
  opacity: 1; }

:disabled {
  color: #fff !important;
  opacity: 1 !important; }

textarea[disabled][readonly], input[disabled][readonly] {
  color: #fff !important;
  opacity: 1 !important; }

/* IE Only
----------------------------------------------- */
#dp_swf_engine {
  display: none; }

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0; }

input[type="submit"],
input[type="button"] {
  border-radius: 0 !important;
  -webkit-box-sizing: content-box !important;
  -webkit-appearance: button !important;
  appearance: button !important;
  border: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important; }

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none !important; }

input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px !important; }

/* 
================================================================================
core > _global.scss
================================================================================
*/
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: auto;
  outline: 0;
  box-sizing: border-box;
  max-height: 999999px;
}

a, button {
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none !important; }

a:hover, a:active {
  text-decoration: none; }

p {
 }

hr {
  border: 0;
  padding: 0;
  margin: 0;
  height: 1px; }


a,a:link,a:visited{ text-decoration: none; color: #fff;}
 
/* 
================================================================================
class
================================================================================
*/

.onlyIE{ display: none ;}
.hide{ display: none;}
.wFull{ width: 100%; height: auto;}
.en{ font-family: "Gotham-Book" ; font-weight: normal;}
.enBold{ font-family: "Gotham-Bold" ; font-weight: normal;}

.jpBold{font-family: 'Noto Sans JP'; font-weight: 900;}

.grid{
	display: -ms-grid;
		 display: grid;
		  -ms-grid-columns: 1fr 1fr;
		 grid-template-columns: 1fr 1fr;
		 grid-gap: 20px;
		 align-items: center;
}
.grid.itemsCenter{align-items: center;}
.grid.col_3{grid-template-columns: 1fr 1fr  1fr;}
.grid.col_4{grid-template-columns: 1fr 1fr  1fr 1fr;}
.grid.col_5{grid-template-columns: 1fr 1fr  1fr 1fr 1fr;}

ol { list-style: decimal; padding-left: 1.5em; margin-left: 1em;}
ol li{ margin-bottom: 1em;}


ul{ list-style: disc; padding-left: 1.5em;margin-left: 1em;}
ul.list{margin-left: 0.2em;}
ul li{ margin-bottom: 0.2em;}

a.uline{ text-decoration: underline;}

#loader{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background:#fff;
	z-index:9999;
}

#loadingAnim{
	position: fixed;
	top: 0;
	left: 0;
	right:0;
	bottom: 0;
}

#loading_count{
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: #032e86;
	transition: all 0.8s ease-in-out 0s;
}


#preload{
		width: 0%;
	height: 0%;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;

	z-index:9999;
	pointer-events: none;
}

/*　layout　*/


body{ background-color: #032e86; color: #fff; line-height: 1.8; font-size: 98%;   font-family: 'Noto Sans JP'; font-weight: 400; overflow: hidden; overflow-y: scroll;}

#container{}
.pcDevice #container{ min-width: 1000px}

#base{}
footer#siteFooter{text-align: center; padding: 2em; font-size: 0.8em;}


section.area{ width: 100%; position: relative; padding: 150px 0;}
section.area .contentsWrap{ margin: auto; width: 90%; max-width: 960px; border: solid 0px #000;transition: opacity 500ms ease;}

section.area h2{ font-size: 3.0em; font-weight: 900; line-height: 1.2; margin-bottom: 0.2em;}

.sectionTitle{ transition: opacity 500ms ease;}
.sectionRead{ transition: opacity 500ms ease 250ms;}


.labelLine{border: solid 0px #c00; position: relative;  transition: width 500ms ease-in-out; width: 0; overflow: hidden;}
.labelLine .labelText{ border: solid 0px #ccc; display: inline-block; visibility: hidden; }
.labelLine .labelText.copy{ position: absolute; top: 0; left: 0; visibility: visible; }
.labelLine.inShow{width: 100%; }

.inview.inShow .labelLine{width: 100%; }

#top_visual{ height: 100vh;	min-height: 600px; max-height: 800px; padding: 0; overflow: hidden;}


#top_visual .parallaxBG{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: -1; overflow: hidden;}

#top_visual .parallaxBG:before{ content: '';display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../img/top/visual.jpg) center center no-repeat; background-size: cover; opacity: .3; transition: transform 60000ms ease;}


.loadingEnd #top_visual .parallaxBG:before{ transform: scale(1.2);}


	#siteLogo{ width: 50%; max-width: 300px; position: absolute; top: 50px; left: 50px;opacity: 0;transition: opacity 500ms ease 200ms;}
	#markAnv{ width: 15%; max-width: 150px; position: absolute; top: 50px; right: 50px;opacity: 0;transition: opacity 500ms ease 2000ms;}

#top_visual .contentsWrap{
	height: 100vh;	
	min-height: 600px; 
	max-height: 800px;
	display: grid;
	align-content: center;
	position: relative;
	z-index: 2;
	opacity: 0;
	transition: opacity 500ms ease 200ms;
}

.isTablet #top_visual,
.isTablet #top_visual .contentsWrap{min-height: 100vh; }
.isTablet #top_visual .content{ padding: 0;}

#top_visual .content{ padding-top: 3rem; }

#top_visual .content h3{ font-size: 1.6em; margin-bottom: 1rem; line-height: 1.3;}
#top_visual .content .read{margin-bottom: 3rem;}
#top_visual .content .en{}
#top_visual .content .en h4{margin-bottom:0.5rem;}
#top_visual .content .en p{ font-size: 0.8em; }



#top_work{}
#top_work .read{ margin-bottom: 5em;}

.galleryWrap{ opacity: 0;	transition: opacity 500ms ease 600ms;}

 .photo-gallery > ul {
		 list-style: none;
		 padding: 0;
		 margin: 0;
		 display: grid;
		 grid-template-columns: 1fr 1fr 1fr 1fr;
		 grid-gap: 10px;
		 align-items: center;
 }
            .photo-gallery > ul > li {
				padding: 0;
				margin: 0;
				position: relative;

            }
             .photo-gallery > ul > li:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 56%;}
            .photo-gallery > ul > li a {

                display: block;
                position: absolute;
                top: 0; left: 0;
                width: 100%;
                height: 100%;

            }
            .photo-gallery > ul > li a > img {
                -webkit-transition: -webkit-transform 0.15s ease 0s;
                -moz-transition: -moz-transform 0.15s ease 0s;
                -o-transition: -o-transform 0.15s ease 0s;
                transition: transform 0.15s ease 0s;
                -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
                height: 100%;
                width: 100%;
            }
            .photo-gallery > ul > li a:hover > img {
                -webkit-transform: scale3d(1.1, 1.1, 1.1);
                transform: scale3d(1.1, 1.1, 1.1);
            }
            .photo-gallery > ul > li a:hover .photo-gallery-poster > img {
                opacity: 1;
            }
            .photo-gallery > ul > li a .photo-gallery-poster {
                background-color: rgba(0, 0, 0, 0.1);
                bottom: 0;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
                -webkit-transition: background-color 0.15s ease 0s;
                -o-transition: background-color 0.15s ease 0s;
                transition: background-color 0.15s ease 0s;
            }
            .photo-gallery > ul > li a .photo-gallery-poster > img {
                left: 50%;
                margin-left: -10px;
                margin-top: -10px;
                opacity: 0;
                position: absolute;
                top: 50%;
                -webkit-transition: opacity 0.3s ease 0s;
                -o-transition: opacity 0.3s ease 0s;
                transition: opacity 0.3s ease 0s;
            }
            .photo-gallery > ul > li a:hover .photo-gallery-poster {
                background-color: rgba(0, 0, 0, 0.5);
            }
            .photo-gallery .justified-gallery > a > img {
                -webkit-transition: -webkit-transform 0.15s ease 0s;
                -moz-transition: -moz-transform 0.15s ease 0s;
                -o-transition: -o-transform 0.15s ease 0s;
                transition: transform 0.15s ease 0s;
                -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
                height: 100%;
                width: 100%;
            }
            .photo-gallery .justified-gallery > a:hover > img {
                -webkit-transform: scale3d(1.1, 1.1, 1.1);
                transform: scale3d(1.1, 1.1, 1.1);
            }
            .photo-gallery .justified-gallery > a:hover .photo-gallery-poster > img {
                opacity: 1;
            }
            .photo-gallery .justified-gallery > a .photo-gallery-poster {
                background-color: rgba(0, 0, 0, 0.1);
                bottom: 0;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
                -webkit-transition: background-color 0.15s ease 0s;
                -o-transition: background-color 0.15s ease 0s;
                transition: background-color 0.15s ease 0s;
            }
            .photo-gallery .justified-gallery > a .photo-gallery-poster > img {
                left: 50%;
                margin-left: -10px;
                margin-top: -10px;
                opacity: 0;
                position: absolute;
                top: 50%;
                -webkit-transition: opacity 0.3s ease 0s;
                -o-transition: opacity 0.3s ease 0s;
                transition: opacity 0.3s ease 0s;
            }
            .photo-gallery .justified-gallery > a:hover .photo-gallery-poster {
                background-color: rgba(0, 0, 0, 0.5);
            }
            .photo-gallery .video .photo-gallery-poster img {
                height: 48px;
                margin-left: -24px;
                margin-top: -24px;
                opacity: 0.8;
                width: 48px;
            }
            .photo-gallery.dark > ul > li a {
                border: 3px solid #04070a;
            }



			.lg-img-wrap-bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0.6);			}
			.lg-img-wrap img{ opacity: 0 !important;position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
			
			.pcDevice  .lg-img-wrap-bg{pointer-events: none;}
			.pcDevice .lg-img-wrap img{ display: none !important; pointer-events: none;}

			#lg-counter,
			#lg-download{ display: none;}
			
			.lg-toolbar .lg-icon{
				    font-size: 50px;
					    height: 80px;
					    line-height:80px;
					    padding: 0px 0;
					    text-align: center;
					    width: 80px;

			}
			.lg-actions .lg-next, .lg-actions .lg-prev{    padding: 50px 10px 50px;    margin-top: -70px;}

#top_about{ padding-top: 0;}
		#top_about h2{ margin-bottom: 80px;}
		#top_about .dataWrap{opacity: 0;	transition: opacity 500ms ease 300ms;}
		
		
				#top_about .dataWrap dl{
					    grid-template-columns: 200px 1fr;
					    grid-gap: 40px 20px;
					    
				}
						#top_about .dataWrap > dl > dt{ border-bottom: solid 1px #fff; padding-bottom: 40px; font-weight: 900;}
						#top_about .dataWrap .en{ font-size: 0.8rem; padding-top: 0.3em;}
						#top_about .dataWrap  > dl > dd{border-bottom: solid 1px #fff;padding-bottom: 40px; font-size: 0.9rem;  }
						
						#top_about .gmapBtn{ display: inline-block; border: solid 1px #fff; padding: 0.2em 1em; text-align: center; line-height: 2; font-size: 0.8em;    transition: background-color 300ms ease 0s;}
						#top_about .gmapBtn:hover{ background: rgba(255,255,255,0.25);}
						#top_about .gmapBtn span{ display: inline-block; position: relative; padding-left: 1.5em;}
						#top_about .gmapBtn span:before{ content:''; display: inline-block; width: 1em; height: 1em; background: url(../img/common/icon_map_pin.svg) center center no-repeat; background-size: contain; position: absolute; top: 50%; left: 0; transform: translate(0,-50%);  margin-right: 0.5em;}
						
						#top_about .dataWrap dl.inData{
					    	grid-template-columns: auto 1fr;
					    	grid-gap:20px;
						}
						#top_about .dataWrap dl.inData dt,
						#top_about .dataWrap dl.inData dd{ border: 0; padding-bottom: 0px; font-weight: 500;}




.loadingFinish{ overflow: auto;}
.loadingFinish  #top_visual #siteLogo{ opacity: 1;}
.loadingFinish  #top_visual .contentsWrap{ opacity: 1;}
.loadingFinish  #top_visual #markAnv{ opacity: 1;}
.loadingFinish  #top_visual:after{ width:0;}


#top_visual h3 .labelLine:nth-of-type(1) { transition-delay: 500ms;}
#top_visual h3 .labelLine:nth-of-type(2) { transition-delay: 600ms;}
#top_visual .read .labelLine:nth-of-type(1) { transition-delay: 800ms;}
#top_visual .read .labelLine:nth-of-type(2) { transition-delay: 900ms;}
#top_visual .en h4 .labelLine:nth-of-type(1) { transition-delay: 1000ms;}
#top_visual .en .labelLine:nth-of-type(1) { transition-delay: 1100ms;}
#top_visual .en .labelLine:nth-of-type(2) { transition-delay: 1200ms;}
.loadingFinish  #top_visual .labelLine{width: 100%; }

.inShow{ opacity: 1 !important;}



@media screen and (min-width:769px) and ( max-width:1300px) {

}

@media screen and (min-width:769px) and ( max-width:950px) {

	
	
}
@media (max-width: 768px){
	/*　768px以下　*/
	 *{overflow-wrap: break-word;}
		.onlyPC{ display: none ;}
		.onlySP{ display: block ;}
		.labelLine.onlySP{ display: inline-block ;}

		html,body{ }
		.touchDevice body{  font-size:100%;     line-height: 1.4;}
		
		.pcDevice #container{min-width: inherit; }
		
		section.area{ padding: 20vw 0;}
		section.area .contentsWrap{    width: 86vw;}
		section.area h2{font-size: 1.85em;}
		
		
		#top_visual{min-height: 650px;}
		#top_visual .contentsWrap{min-height: 650px;}
		#siteLogo {
		    width: 50%;
		    top: 20vw;
		    left: 8vw;
		}
		
		.touchDevice #siteLogo { top: 10vw;}
		
		#markAnv {
		    width: 15%;
		    top: 5vw;
		    right: 5vw;
		}
		
		.touchDevice #markAnv { width: 22%; top: 10vw;}
		
		.touchDevice #top_visual{ min-height: 100vh;}
		#top_visual .content{     padding-top: 50vw; padding-bottom: 20vw; font-size: 0.8em;}
		.touchDevice #top_visual .content{     padding-top: 0vw; padding-bottom: 0vw; }
		#top_visual .content h3{   }
		#top_visual .content h3 br{ display: none;}
		
		.touchDevice #top_visual .content .en{ font-size: 0.9em;}
		
		#top_work .read{ margin-bottom: 5vw;font-size: 0.85em;}
		
		 .photo-gallery > ul {
					 grid-template-columns:  1fr 1fr 1fr;
					 grid-gap: 0.5em;		 
            }
	
			.sp_col_1{
				 grid-template-columns: 1fr !important;
					    grid-gap: 2vw !important;
			}
			
			
			#top_about h2{margin-bottom: 10vw;}
			#top_about .dataWrap dl{}
			#top_about .dataWrap > dl dt{ border: 0; padding-bottom: 1.5em }
			#top_about .dataWrap > dl > dt:not(:first-child){ padding-top: 1.5em; }
			#top_about .dataWrap > dl > dd{padding-bottom: 2em; }
	
			#top_about .dataWrap > dl > dt{ line-height: 1.7rem;}
			#top_about .dataWrap > dl > dt .en{ display: inline-block; margin-left: 1em;}
		
		.contactData{
			    grid-gap: 4vw !important;
			    margin-bottom: 4vw;
		}
		
		
		
}


@media screen and (min-width: 769px) {
    /*　769px以上　*/
    
    	.onlyPC{ display: block ;}
		.onlySP{ display: none;}
    


}