@charset "utf-8";
/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

  00. 基本
  01. mainVisual
  02. concept
  03. movie
  04. location
  05. access

******************************************************************************* */
/* ==

　00. 基本

=============================================================================== */
.container div:after {
  content: '';
  display: block;
  clear: both;
}
.container .section{
  margin:0;
  font-size:16px;
  min-width:1200px;
}
.container .section h3{
  font-size:36px;
  letter-spacing:0.1em;
  font-weight:normal;
  line-height:1.3;
}
.container .section .aid{
  letter-spacing:0.3em;
  font-weight:normal;
  margin-bottom:30px;  
}
.container .section p{font-size:100%;}
.container .section img,
.mainVisual img{
  width:100%;
  max-width: 100%;
  height: auto;
}

.devPc{display:block;}
img.devPc{display:inline-block;}
.devSmp{display:none;}
img.devSmp{display:none;}

/* ==

　01. mainVisual

=============================================================================== */
.mainVisual{
  display:-webkit-box;
  display:-ms-flexbox; 
  display:flex;
  min-width:1200px;
  align-items: center;
  background:#1a2d47;
}
.mainVisual .img{
  -ms-flex-preferred-size:63%;
  flex-basis:63%;
}
.mainVisual .txt{
  -ms-flex-preferred-size:37%;
  flex-basis:37%;
  padding:20px;
  align-self: center;
  text-align:center;
  line-height:1.6;
  color:#fff;
  box-sizing:border-box; 
}
.mainVisual .txt .txtIn{display:inline-block;}
.mainVisual .txt .txtIn h1{
  text-align:left;
  padding-bottom:20px;
  font-weight:normal;
  font-size:36px;
  letter-spacing:0.2em;
}
.mainVisual .txt p{
  text-align:left;
  font-size:11px;
  font-weight:normal;
  letter-spacing:0.5em;
}
@media screen and (max-width: 1400px) {
  .mainVisual .txt .txtIn h1{font-size:32px;}
  .mainVisual .txt p{letter-spacing:0.4em;}
}
@media screen and (max-width: 1120px) {
  .mainVisual .txt .txtIn h1{font-size:28px;}
  .mainVisual .txt p{letter-spacing:0.3em;}
}

/* ==

　02. concept

=============================================================================== */
#concept{
  position: relative;
  margin-bottom:0;
  padding:80px 0;
  text-align:center;
}
#concept .conceptIn:before, #concept .conceptIn:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../images/img_concept_bg01.png") no-repeat left 0 ;
    z-index: 0;
}
#concept .conceptIn:after{background: url("../images/img_concept_bg02.png") no-repeat right 0 ;}
#concept h2{
  margin-bottom:10px;
  font-size:36px;
  text-align:center;
  letter-spacing:0.2em; 
  z-index: 1;
  position: relative;
}
#concept .aid{
  margin-bottom:30px;
  letter-spacing:0.3em;
  z-index: 1;
  position: relative;
}
#concept p{
  z-index: 1;
  position: relative;
}

@media screen and (max-width: 1120px) {
  #concept .conceptIn:before {background-position: left -200px top 0 ;}
  #concept .conceptIn:after {background-position: right -200px top 0 ;}
}


/* ==

　03. movie

=============================================================================== */
#movie2{
	padding:50px 10px;
	background:#efefef;
	box-sizing: border-box;
}
#movie2 img{
	width:100%;
	max-width:400px;
}
#movie{background:#1a2d47;}
#movie .movieIn{
  display:-webkit-box;
  display:-ms-flexbox; 
  display:flex;
  max-width:1920px;
  margin:0 auto; 
  align-items:center;
}
#movie .movie{flex-basis:55%;}
#movie .txt{
  -ms-flex-preferred-size:45%;
  flex-basis:45%;
  padding:100px;
  box-sizing: border-box;
}
#movie .txt h3{
  color:#fff;
  text-align:center;
}



/* ==

　04. facility

=============================================================================== */
#facility{
  position:relative;
  background:#515f74;
  max-width:1920px;
  }
#facility .imgLogo{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-175px;
  margin-top:-175px;
  z-index:1;
}
#facility .facilityIn{
  max-width:1920px;
  margin:0 auto;    
}
#facility ul{
  display:-webkit-box;
  display:-ms-flexbox; 
  display:flex;
  -ms-flex-wrap: wrap;
  flex-wrap:wrap;
}
#facility li{
  -ms-flex-preferred-size:50%;
  flex-basis:50%;
  position:relative;
}
#facility li .txt{
  position:absolute;
  top:50%;
  width:100%;
  margin-top:-40px;
}
#facility li h3{
  color:#fff;
  text-align:center;
  font-weight:normal;
}
#facility li span{
  margin-top:10px;
  display:block;
  color:#fff;
  font-size:11px;
  font-weight:normal;
  letter-spacing:0.5em;
  text-align:center;  
}
#facility li h3,
#facility li span{
  text-decoration: none;
}
@media screen and (max-width: 1920px) {#facility .imgLogo{width:330px; margin:-165px 0 0 -165px;}}
@media screen and (max-width: 1760px) {#facility .imgLogo{width:300px; margin:-150px 0 0 -150px;}}
@media screen and (max-width: 1600px) {#facility .imgLogo{width:274px; margin:-137px 0 0 -137px;}}
@media screen and (max-width: 1440px) {#facility .imgLogo{width:246px; margin:-123px 0 0 -123px;}}
@media screen and (max-width: 1200px) {#facility .imgLogo{width:220px; margin:-110px 0 0 -110px;}}




/* ==

　04. location
 
=============================================================================== */
#location{
  display:-webkit-box;
  display:-ms-flexbox; 
  display:flex;
  max-width:1920px;
  background: url("../images/img_location_bg.png") no-repeat left 0 ;
}
#location .img{
  position: relative;
  -ms-flex-preferred-size:50%;
  flex-basis:50%;
  padding:90px 0;
  background:#172949;
}
#location .img:before{
  content: "";
  width: 300px;
  height: 99.999%;
  background-color: #172949;
  transform: skewX(-21.5deg) scale(1.0);
  position: absolute;
  top: 0;
  left: -150px;
  z-index: 5;
}
#location .img img{
  margin-left:-60px;
  position: relative;
  width:auto;
  max-width:100%;
  z-index: 6;
}
#location .txt{
  -ms-flex-preferred-size:50%;
  flex-basis:50%;
  padding:170px 30px 0 0;
}
#location .txt .txtIn{
  padding:0 200px 0 220px;
  float:right;
  box-sizing: border-box;
}
#location .txt .txtIn h3{margin-bottom:10px;}

@media screen and (max-width: 1400px) {
  #location{background-position: -80px 0 ;}
  #location .txt .txtIn{padding:0 200px 0 180px; }
  #location .txt .txtIn p:last-child{padding-right:20px;}    
  }
@media screen and (max-width: 1100px) {
  #location .txt .txtIn{padding:0 130px 0 180px; }
  #location .txt .txtIn p:last-child{padding-right:30px;}  
  }


/* ==

　05. access
 
=============================================================================== */
#access{
  display:-webkit-box;
  display:-ms-flexbox; 
  display:flex;
  max-width:1920px;
}
#access .txt{
  position: relative;
  -ms-flex-preferred-size:50%;
  flex-basis:50%;
  padding:125px 0 100px;
  background:#172949;
}
#access .map{
  -ms-flex-preferred-size:50%;
  flex-basis:50%;
  height:100%;
  min-height:600px;  
}
#access .txt:after{
  content: "";
  width: 300px;
  height: 99.999%;
  background-color: #172949;
  transform: skewX(21.5deg) scale(1.0);
  position: absolute;
  top: 0;
  right: -150px;
  z-index: 5;
}
#access .txt .txtIn{
  padding:0 50px 0 220px;
  float:right;
  position: relative;;  
  box-sizing: border-box;
  z-index:6;
}
#access .txt .txtIn h3{
  margin-bottom:10px;
  color:#fff;
}
#access .txt .txtIn .aid{color:#fff; }
#access .txt .txtIn p{
  color:#fff;
  font-weight:normal;
}