@charset "utf-8";
@import url(reset.css);
@import url(base.css);



#wrap {
}


/*-------------------------------------------------------------------
	header
-------------------------------------------------------------------*/

#header {
	width:100%;
	/*background:#fffdf1;*/
	background:#fffdf1;
	border-top:6px solid #0065b0;
}

#header .header {
	max-width:1280px;
	margin:0 auto;
	overflow:hidden;
	zoom:1;
	padding:30px 0;
	position:relative;
}

#header .header .logo {
	text-align:center;
	margin:0 0 30px;
}

#header .header ul.pcnav {
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#header .header ul.pcnav li {
	/*display:inline-block;
	vertical-align:middle;
	margin:0 30px 0 0;
	padding:0;*/
	margin-right: 30px;
}

#header .header ul.pcnav li:last-child {
	margin:0;
}

#header .header ul.pcnav li a {
	font-size:1.5em;
	line-height:1.0;
	color:#361d05;
	font-weight:400;
}

#header .header ul.pcnav li a span {
	display:block;
	text-align:center;
	margin:8px 0 0;
	font-size:0.85em;
}

#header .header ul.pcnav li a:hover,
#header .header ul.pcnav li.current a {
	color:#0083c6;
	text-decoration:none;
}

#header .header .access {
	position:absolute;
	top:30px;
	right:0;
}

#header .header .access a {
	display:inline-block;
	font-size:1.6em;
	line-height:1.0;
	color:#FFF;
	background:#0083c7;
	padding:7px 25px 10px;
	border-radius:7px;
}

#header .header .access a:hover {
	text-decoration:none;
	background:#006397;
}

@media screen and (max-width: 1280px) {
	#header .header {
		max-width:94%;
	}
	
}


/*-------------------------------------------------------------------
	mainimg
-------------------------------------------------------------------*/

#mainimg {
	position:relative;
}

#mainimg .maximg img {
	width:100%;
}

#mainimg .wave01 {
	background:url(../image/common/wave001.png) top repeat;
	height:20px;
	width:100%;
	-webkit-animation: bgroop 5s linear infinite;
  animation: bgroop 5s linear infinite;
	position:absolute;
	left:0;
	top:-2px;
	z-index:5;
	opacity:0.5;
}

#mainimg .wave01s {
	background:url(../image/common/wave001.png) top repeat;
	height:20px;
	width:100%;
	-webkit-animation: bgroop 20s linear infinite;
  animation: bgroop 20s linear infinite;
	position:absolute;
	left:0;
	top:-2px;
	z-index:3;
}


#mainimg .wave02 {
	background:url(../image/common/wave002.png) bottom repeat;
	height:18px;
	width:100%;
	-webkit-animation: bgroop 5s linear infinite;
  animation: bgroop 5s linear infinite;
	position:absolute;
	left:0;
	bottom:0;
	z-index:5;
}

/* 背景動かす */
@-webkit-keyframes bgroop {
    from {
        background-position: 0  bottom;
		}
    to {
        background-position: -360px bottom;
		}
}
@keyframes bgroop {
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: -360px bottom;
    }
}




/*-------------------------------------------------------------------
	container
-------------------------------------------------------------------*/

#container {
	padding:80px 0;
	font-size:1.5em;
	line-height:1.6;
}

#container h2 {
	text-align:center;
	margin:0 0 50px;
}


#contents,
.inwrap {
	width:1100px;
	margin:0 auto;
}

/* タイトル制御 */

.move1 {
	visibility: visible !important;
  animation: poyon 0.5s linear 0s 1;
}

.move2 {
	visibility: visible !important;
  animation: poyon 1.0s linear 0s 1;
}

.move3 {
	visibility: visible !important;
  animation: poyon 1.5s linear 0s 1;
}

.move4 {
	visibility: visible !important;
  animation: poyon 2.0s linear 0s 1;
}

.move5 {
	visibility: visible !important;
  animation: poyon 2.5s linear 0s 1;
}

.move6 {
	visibility: visible !important;
  animation: poyon 3.0s linear 0s 1;
}

.move7 {
	visibility: visible !important;
  animation: poyon 3.5s linear 0s 1;
}

.move8 {
	visibility: visible !important;
  animation: poyon 4.0s linear 0s 1;
}

.move9 {
	visibility: visible !important;
  animation: poyon 4.5s linear 0s 1;
}

.move10 {
	visibility: visible !important;
  animation: poyon 5.0s linear 0s 1;
}

@keyframes poyon {
 	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  /*10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }*/
  30%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, -100%); }
  75%  { transform: scale(1.0, 1.0) translate(0%, -20%); }
  /*85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }*/
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}




/*-------------------------------------------------------------------
	footer
-------------------------------------------------------------------*/

#footer {
	position:relative;
	padding:50px 0 30px;
	background:#0083c7;
}


#footer .footer {
	width:1100px;
	margin:0 auto;
	overflow:hidden;
	zoom:1;
}

#footer .footer .logo {
	float:left;
}

#footer .footer .address {
	width:460px;
	float:right;
	color:#FFF;
	font-size:1.5em;
	line-height:1.0;
	overflow:hidden;
	zoom:1;
}

#footer .footer .address .add {
	margin:0 0 10px;
}

#footer .footer .address .link {
	float:left;
}

#footer .footer .address .link a {
	color:#FFF;
	position:relative;
}

#footer .footer .address .link a:before {
	content:'>'
}

#footer .footer .address .link a:hover {
	text-decoration:underline;
}


#footer .footer .address address {
	float:right;
	font-size:0.8em;
}


#footer .wave {
	background:url(../image/common/ft_bg.png) top repeat;
	height:15px;
	width:100%;
	-webkit-animation: ftroop 20s linear infinite;
  animation: ftroop 20s linear infinite;
	position:absolute;
	left:0;
	top:0;
	z-index:5;
}

#footer .waves {
	background:url(../image/common/ft_bg2.jpg) top repeat;
	height:15px;
	width:100%;
	-webkit-animation: ftroop 5s linear infinite;
  animation: ftroop 5s linear infinite;
	position:absolute;
	left:0;
	top:0;
	z-index:3;
}


/* 背景動かす */
@-webkit-keyframes ftroop {
    from {
        background-position: 0  bottom;
		}
    to {
        background-position: -360px bottom;
		}
}
@keyframes ftroop {
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: -360px bottom;
    }
}


@media screen and (max-width: 1080px) {
	#footer .footer {
		width:94%;
	}
}