@charset "UTF-8";

/*------------------------------------------*
* body, #movie-container, #wrapper CSS
*------------------------------------------*/
body {
  background: #0078C1;
}
a img:hover {
/*   opacity: 0.8; */
}
html,body { height: 100%; }



#wrapper {
  position: absolute;
  background: url("../image/wrapBg.png");
  width: 100%;
  height: 100%;
}
#container {
  background: url("../image/containerBg.png") no-repeat right bottom;
  width: 100%;
  height: 100%;
}

/*------------------------------------------*
* margin系 CSS
*------------------------------------------*/
.mza { margin: 0 auto; }
.mt4 { margin-top: 4px; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; }
.mr4 { margin-right: 4px; }
.mr8 { margin-right: 18px; }
.mr16 { margin-right: 24px; }
.mr24 { margin-right: 32px; }
.mb4 { margin-bottom: 4px; }
.mb8 { margin-bottom: 8px; }
.mb16 { margin-bottom: 16px; }
.mb24 { margin-bottom: 24px; }
.mb40 { margin-bottom: 40px; }
.mb64 { margin-bottom: 64px; }
.ml4 { margin-left: 4px; }
.ml8 { margin-left: 8px; }
.ml16 { margin-left: 16px; }
.ml24 { margin-left: 24px; }
.ml32 { margin-left: 32px; }
.ml40 { margin-left: 40px; }
.mtb8 { margin: 8px 0; }

/*------------------------------------------*
* padding系 CSS
*------------------------------------------*/
.pt4 { padding-top: 4px; }
.pt8 { padding-top: 8px; }
.pt16 { padding-top: 16px; }
.pt24 { padding-top: 24px; }
.pr4 { padding-right: 4px; }
.pr8 { padding-right: 18px; }
.pr16 { padding-right: 24px; }
.pr24 { padding-right: 32px; }
.pb4 { padding-bottom: 4px; }
.pb8 { padding-bottom: 8px; }
.pb16 { padding-bottom: 16px; }
.pb24 { padding-bottom: 24px; }
.pl4 { padding-left: 4px; }
.pl8 { padding-left: 8px; }
.pl16 { padding-left: 16px; }
.pl24 { padding-left: 24px; }
.pl32 { padding-left: 32px; }
.pl40 { padding-left: 40px; }
.ptb8 { padding: 8px 0; }
.ptb24 { padding: 24px 0; }
.pza { padding: 0 auto; }



/*------------------------------------------*
* #global-header CSS
*------------------------------------------*/
#global-header {
  background: #fff;
  width: 100%;
  height: 50px;
  position: relative;
  z-index: 10;
}
#global-header .global-header-inner {
  position: relative;
  overflow: hidden;
}
#global-header .global-header-inner h1 {
  font-weight: normal;
  font-size: 12px;
  float: left;
}
#global-header .global-header-inner h1 a {
  padding: 0 24px 8px 8px;
}
#global-header .global-header-inner h1 a img {
  padding: 12px 0 0 8px;
}
/*------------------------------------------*
* #global-navi CSS
*------------------------------------------*/
#global-navi {
  float: left;
  top: 50px;
  width: 900px;
}
#global-navi ul {}
#global-navi ul li {
  float: left;
  width: 180px;
  height: 32px;
  padding-top: 10px;
  text-align: center;
}
#global-navi ul li a {
  display: block;
}
#global-navi ul li a:hover {}

#global-header .global-header-inner ul.utility {
  float: right;
}
#global-header .global-header-inner ul.utility li {
  float: left;
  margin-right: 8px;
}



/*------------------------------------------*
* #footer CSS
*------------------------------------------*/
#global-footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: center;
  z-index: 1001;
}
#global-footer p.copy {
  color: #fff;
  font-size: 12px;
  padding-top: 16px;
}








/*---------------------------------------------------------------------------------------------------
--------------------------------------------* Media Query *------------------------------------------
-----------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 769px) {

  /*------------------------------------------*
  * #global-header CSS
  *------------------------------------------*/
  #global-header {
    background: #fff;
    height: auto;
    position: relative;
    z-index: 10;
  }
  #global-header .global-header-inner {
    position: relative;
    overflow: hidden;
  }
  #global-header .global-header-inner h1 {
    font-weight: normal;
    font-size: 12px;
    float: left;
  }
  #global-header .global-header-inner h1 a {
    padding: 0 24px 8px 8px;
  }
  #global-header .global-header-inner h1 a img {
    padding: 12px 0 0 0;
  }
  /*------------------------------------------*
  * #global-navi CSS
  *------------------------------------------*/
  #global-navi {
    float: left;
    top: 50px;
    width: 100%;
  }
  #global-navi ul {
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-justify-content: space-between; /* Safari */
    justify-content:         space-between;
    padding: 0 8px;
  }
  #global-navi ul li {
    float: left;
    width: auto;
    height: auto;
    padding-top: 10px;
    text-align: center;
  }
  #global-navi ul li a {
    display: block;
  }
  #global-navi ul li a:hover {}
  #global-navi ul li a img {
    width: 90%;
  }
  #global-header .global-header-inner ul.utility {
    float: none;
    padding-top: 0!important;
    position: absolute;
    right: 0;
    top: 12%;
  }
  #global-header .global-header-inner ul.utility li {
    float: left;
    margin-right: 8px;
  }
  
  
  
  /*------------------------------------------*
  * #footer CSS
  *------------------------------------------*/
  #global-footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    text-align: center;
    z-index: 1001;
  }
  #global-footer p.copy {
    color: #fff;
    font-size: 12px;
    padding-top: 16px;
  }
}