@charset "utf-8";



div.topImageArea {
	width: 100%;
	display: fixed;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
}


.topImage {
	width: 100%;
	position: absolute;
	overflow: hidden;
	padding: 0px;
}

#topImageAnimationOfZoomByCSS img{
	width: 100%;
	animation: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 24s;
	animation-name: zoomin;
	opacity: 0;
	margin-top: -10%;
	margin-bottom: -10%;
}

.topImageDescriptions .topImageDescription{
	position: absolute;
	top: 150px;
	left: 0px;
	margin-top: 10%;
	margin-left: 10%;
	width: 70%;
	font-size: 2.6em;
	font-weight: 800;
	color: #FFFFFF;
	text-shadow: 2px 2px 2px #111111;
}
.topImageDescriptions .topImageDescription{
	opacity: 0;
	animation: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 24s;
	animation-name: zoomin;
}

@keyframes zoomin{
	0%{
	opacity: 0;
	}
	8%{
	opacity: 1;
    transform: scale(1);
	}
	33%{
	opacity: 1;
    transform: scale(1.1);
	}
	41%{
	opacity: 0;
    transform: scale(1.4);
	}
	100%{
	opacity: 0;
	}
}

#topImageAnimationOfZoomByCSS .topImage:nth-of-type(1) img,
#topImageAnimationOfZoomByCSS .topImageDescription:nth-of-type(1){
    animation-delay: 0s;
}
#topImageAnimationOfZoomByCSS .topImage:nth-of-type(2) img,
#topImageAnimationOfZoomByCSS .topImageDescription:nth-of-type(2){
    animation-delay: 8s;
}
#topImageAnimationOfZoomByCSS .topImage:nth-of-type(3) img,
#topImageAnimationOfZoomByCSS .topImageDescription:nth-of-type(3){
    animation-delay: 16s;
}



@media screen and (max-width: 1199px) {
	.topImageDescriptions .topImageDescription{
		font-size: 1.5em;
	}
}

@media screen and (max-width: 799px) {
	.topImageDescriptions .topImageDescription{
		font-size: 1em;
	}
}


/*
@media screen and (min-width: 800px) { /* 800px以上用の記述 */

  #global-nav-top{
    /*background:#ffffff;*/
    background: rgba(255,255,255,0.85);
  }

  #global-nav-top > ul > li{
    line-height: 80px;
  }

  /* Fixed */
  #headwrap.fixed #global-nav-top > ul > li{
    line-height: 60px;
  }

  #global-nav{
    /*background:#ffffff;*/
    background: rgba(255,255,255,0.85);
  }

  #global-nav > ul > li{
    line-height: 80px;
  }

  /* Fixed */
  #headwrap.fixed #global-nav > ul > li{
    line-height: 60px;
  }

/* ****************** Media Queries による切り替え ***************** */

@media screen and (min-width: 1200px) { /* 1200px以上用の記述 */
  #global-nav ul li a {
    padding: 0.6rem 0rem;
    margin-left: 3rem;
  }
  #global-nav-top ul li a {
    padding: 0.6rem 0rem;
    margin-left: 3rem;
  }

  /* Fixed */
  #headwrap.fixed #global-nav ul li a {
    color: #fff;
    padding: 0 0 0.6rem;
    margin-left: 3rem;
  }
  #headwrap.fixed #global-nav-top ul li a {
    color: #fff;
    padding: 0 0 0.6rem;
    margin-left: 3rem;
  }
}

/* ****************** Media Queries による切り替え ***************** */

@media screen and (max-width: 799px) { /* 799px以下用の記述 */

  #headwrap .navwrap {
    width: 100%;
    padding: 0;
  }
  #headwrap {
    top: 0;
    position: fixed;
    margin-top: 0;
  }
  /* Fixed reset */
  #headwrap.fixed {
    padding-top: 0;
    background: transparent;
  }
  #mobile-head {
    /*background: #fff;*/
    background: rgba(25,48,76,1);
    width: 100%;
    height: 60px;
    z-index: 999;
    position: relative;
  }
  #headwrap.fixed .h-logo,
  #headwrap .h-logo {
    position: absolute;
    left: 0px;
    top: 5px;
    color: #333;
  }
  #headwrap .h-logo,
  #headwrap.fixed .h-logo{
    padding:10px ;
  }
  #headwrap .h-logo a img,
  #headwrap.fixed .h-logo a img {
    width:auto;
    height:25px;
  }

  #headwrap .wlogo {
    display: none;
  }
  #headwrap .glogo {
    display: block;
  }
  #headwrap .glogo-top {
    display: none;
  }

  #global-nav-top,
  #global-nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -496px;
    background: #333;
    opacity: 0.9;
    filter: alpha(opacity=90);
    -ms-filter: "alpha(opacity=90)";
    width: 100%;
    text-align:left;
    padding: 0;
    text-indent:0.5em;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
  }
  #global-nav-top ul,
  #global-nav ul {
    float: left;
    width: 100%;
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
    font-size: 14px;
    margin:0;
    padding:0;
  }
  #global-nav-top ul li,
  #global-nav ul li {
    float: none;
    position: static;
    border-top:#666 solid 1px;
  }
  #headwrap #global-nav-top ul li a,
  #headwrap #global-nav ul li a,
   #headwrap.fixed #global-nav-top ul li a,
  #headwrap.fixed #global-nav ul li a {
    width: 100%;
    display: block;
    color: #fff;
    padding: 1rem 0;
    }

  #global-nav-top ul li a:hover,
  #global-nav ul li a:hover {
    border-bottom: none;
  }

  #nav-toggle {
	display: block;
  }

  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }

  /* #global-nav スライドアニメーション */
  .open #global-nav-top {
      /* #global-nav top + #mobile-head height */
    -moz-transform: translateY(556px);
    -webkit-transform: translateY(556px);
    transform: translateY(556px);
  }
  .open #global-nav {
      /* #global-nav top + #mobile-head height */
    -moz-transform: translateY(556px);
    -webkit-transform: translateY(556px);
    transform: translateY(556px);
  }
}