@charset "UTF-8";

#hometopspace { width: 100%; max-height: 960px; overflow: hidden; }
	.hometopmovie {width: 100%; padding-top: 56.25%; overflow:hidden; position: relative;z-index: 0; }
/* 
		.hometopmovie::before { content:""; width: 100%; height:100%; ; position: absolute; z-index:1; left: 0; top: 0; background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 1px, rgba(0,0,0,.2) 1px, rgba(0,0,0,.2) 2px);}
		.hometopmovie::after { content:""; width: 100%; height:100%; ; position: absolute; z-index:1; left: 0; top: 0; background:repeating-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 1px, rgba(0,0,0,.2) 1px, rgba(0,0,0,.2) 2px);}
*/
		.hometopmovie video { width: 100%; height:100%; position: absolute; z-index: -10; left: 0; top: 0; background: url("../images/hometopmovie.jpg") center / cover no-repeat;}

.fadeInUp { animation-duration: 1s; animation-delay: 1s; animation-fill-mode: both; animation-name: fadeInUp;}
	@keyframes fadeInUp {
		from {opacity: 0; transform: translate3d(0, 50%, 0);}
		to {opacity: 1; transform: translate3d(0, 0, 0);}
	}


.follow-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #005e86;
  color: #fff;
  text-align: center;
  padding: 10px;
z-index: 100;
}
.follow-banner p { font-size: 14px; padding: 0 10px}
	.follow-banner p strong { display: inline-block; padding:2px 10px 2px 2px; background:#FFF; color:#005e86; margin:4px 20px;}
	.follow-banner a { text-decoration: none; opacity: 1; transition: .3s;}
		.follow-banner a:hover { text-decoration: underline; opacity: .5;}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

#information { position: relative; z-index: 0;}
	#information .inner { background: rgba(255,255,255,.8); max-width: 1600px;  margin: 0 auto; }
	#information h2 { padding: 20px 15px;}
	#information p { font-size: 16px; padding: 10px 30px; line-height: 2em;}

#greetings { position: relative; z-index: 0; background: url("../images/greetings-bg.jpg") center center / cover no-repeat;}
	#greetings .inner { background: rgba(255,255,255,.8); max-width: 1600px;  margin: 0 auto;}
	#greetings h2 { padding: 30px 0;}
	#greetings p { font-size: 16px; padding: 15px 0; line-height: 2em;}

#aboutus { }
	#aboutus::before { display: block; content:""; width: 100%; background:url("../images/aboutus-bg.jpg") center center / cover no-repeat;}
	#aboutus h2 { padding: 20px 0;}
	#aboutus .inner { padding-left: 20px; padding-right: 20px;}
	#aboutus dl { width: 100%; max-width:560px; margin: 40px auto; padding: 0; display: flex; justify-content: space-between; flex-wrap: wrap; }
		#aboutus dt { padding:10px 0 0 0;}
		#aboutus dd { padding:0 0 10px 0;}

#business { }
	#business h2 { padding: 20px 0;}
	#business h3 { padding: 48px 0 4px 0; text-align: center; font-weight: 600; font-weight: bold; font-size: 22px; border-bottom: 1px solid #005e86; color:#005e86;}
	#business p { padding: 20px 0;}
	#business .inner { max-width: 1080px;  margin: 0 auto;}
	.bbox { width: 100%; max-width: 1080px; margin: 20px auto 0 auto; padding: 20px; display: flex; justify-content: space-between; flex-wrap: wrap;}
	.bimg { padding: 5px 0;}
	.btxt { padding: 5px 0; text-align: left;}
		.btxt h4 { font-weight: bold; padding: 10px 0; font-size: 18px;}
		.btxt p {font-size: 16px; padding: 10px 0;}
		.btxt li { font-size: 16px; padding: 2px 0 2px 1em; text-indent: -1em;}
			.btxt li::before { content: "・";}

@media all and (min-width:320px) {
	/* 320px+ settings */
	#greetings { padding:40px 20px;}
		#greetings .inner { padding: 20px;}
		#greetings p { text-align: left;}
	#aboutus { padding:0 0 60px 0;}
		#aboutus::before { height: 80px;}
		#aboutus dt{ width: 100%; text-align: left; font-weight: bold;}
		#aboutus dd { width: 100%;text-align: left;}
	#business { padding:60px 0; background:#E5F3FF;}
	.bimg { width: 100%;}
	.btxt { width: 100%;}
	#information { text-align: left;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#greetings { padding:60px 20px;}
		#greetings .inner { padding: 40px 20px;}
	#aboutus::before { height:120px;}
	#information { text-align: center;}
}

@media all and (min-width:740px) {
	/* 740px+ settings */
	#greetings p { text-align: center;}
	#aboutus::before { height: 160px;}
	#aboutus dl {background:repeating-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 160px, rgba(0,0,0,.2) 160px, rgba(0,0,0,.2) 161px, rgba(0,0,0,0) 161px, rgba(0,0,0,0) 960px); }
	#aboutus dt { width: 120px; text-align-last: justify; font-weight: normal; padding: 20px 0;}
	#aboutus dd { width: 360px; text-align: left; padding: 20px 0;}
	.bimg { width: 48%; border-right:5px solid #09C; padding:0 10px 0 0;}
	.btxt { width: 48%; padding: 0;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#greetings { padding:80px 40px;}
			#greetings .inner { padding: 60px 40px;}
	#aboutus::before { height: 320px;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	#greetings { padding:120px 20px;}
		#greetings .inner { padding: 80px 40px;}
	#aboutus::before { height: 420px;}
}