@charset "utf-8";


body {
	line-height: 1.6;
	font-weight: 200;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
  	min-height: -webkit-fill-available;
    animation: fadeIn 1.6s ease 0s 1 normal;
    -webkit-animation: fadeIn 1.6s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

html{
  height: -webkit-fill-available;
}

body, html {
	position: relative;
	color: #333;
	font: 14px/1.8 'メイリオ', "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	padding: 0 0 0 0;
	background-color: #fff;
}


a {
  color: #333;
  text-decoration: none;
}

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

iframe, img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s
}

.clearfix:after, .inner:after {
  content: "";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden
}

.text-center {
  text-align: center
}

ul {
	list-style: none;
}




#container {
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
	min-height: 500px;
}


#sub_container {
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
}






/* # =================================================================
   # header
   # ================================================================= */

#header {
	display: block;
	position:fixed;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: 120px;
	z-index: 10;
	top: 0;
	left: 0;
	z-index: 1000;
}

.header-inner {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 95%;
	max-width: 1600px;
	height:120px;
	z-index: 1000;
}


.header-logo {
	display: block;
	position: absolute;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	top: 32px;
	left: 150px;
	width: 210px;
	height: 53px;
  z-index: 100;
}

@media screen and (max-width:1400px) {

	.header-logo {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		top: 32px;
		left: 40px;
		width: 210px;
		height: 53px;
	  z-index: 100;
	}

}

@media screen and (max-width:540px) {

	.header-logo {
		display: block;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 -110px;
		top: 32px;
		left: 50%;
		width: 210px;
		height: 53px;
	  z-index: 100;
	}

}





	
	
.header-inq {
	display: block;
	position: fixed;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 262px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	top: 36px;
	right: 150px;
}
	
.header-inq a {
	display: block;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 262px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	color: #fff;
	background-color: #489aba;
	font-size: 1.1em;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
	border-radius: 28px;
}	

@media screen and (max-width:1400px) {
	
	.header-inq {
		display: block;
		position: fixed;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		width: 262px;
		height: 56px;
		line-height: 56px;
		text-align: center;
		top: 36px;
		right: 40px;
	}
	
}

@media screen and (max-width:630px) {
	
	.header-inq {
		display: none;
	}
	
}
	
	
/*　ヘッダー上下　*/

#header.UpMove {
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}

/* */

#header.DownMove {
	animation: DownAnime 1.0s forwards;
}
@keyframes DownAnime {
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}




/* # =================================================================
   # page-top
   # ================================================================= */

/* GoToTop */
#page-top a {
	display: block;
	width: 48px;
	height: 48px;
	color: #fff;
	transition:all 0.3s;
}

#page-top a img {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 48px;
	height: 48px;
}


/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 40px;
	bottom: 50px;
	z-index: 2000;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}




@media screen and (max-width:900px) {
	
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 2000;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}
	
	
}










@media screen and (max-width: 430px) {

#page-top,
#page-top a {
	display: none;
}

}















#footer {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
	height: 220px;
	background-color: #489aba;
	overflow: hidden;
}

#footer img {
	display: block;
	position: relative;
	margin: 70px auto 0 auto;
	padding: 0 0 0 0;
	width: 230px;
	height: auto;
}

#footer p {
	display: block;
	position: relative;
	margin: 10px auto 0 auto;
	padding: 0 0 0 0;
	color: #fff;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.1em;
}

#footer p a {
	color: #fff;
	text-decoration: none;
}





#footer-bottom {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 40px 0 40px 0;
	width: 100%;
	height: auto;
	min-height: 120px;	
	text-align: center;
	color: #489aba;
	background-color: #fff;
	overflow: hidden;
}

#footer-bottom a {
	color: #489aba;
}

#footer-bottom img {
	position: relative;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	width: 240px;
	height: 60px;
}
	
#footer-bottom p {
	display: block;
	position: relative;
	margin: 0 0 0 0;
	padding: 12px 0 12px 0;
	font-size: 1.1em;
	line-height: 1.3em;
	/*
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
	*/
	color: #489aba;
	text-decoration: none;
	text-align: center;
}

#footer-bottom p br {
	display: none;
}


@media screen and (max-width:768px) {

	#footer-bottom p br {
		display: block;
	}

}