/*-----------------------------------------------
	#ice
-----------------------------------------------*/

#ice {
	margin: 0;
	padding: 0;
}

/*-----------------------------------------------
	#main
-----------------------------------------------*/

#main {
	margin: 0 auto;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	}
@media screen and (max-width: 680px) {
	#main {
		background: none;
	}
}

#main h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:128%;
	font-weight: 400;
	text-align: left;
	color: #111111;
	line-height: 1.6em;
	letter-spacing: 2px;
	margin-bottom: 40px;
}
@media screen and (max-width: 680px) {
	#main h2 {
		font-size:114%;
		text-align: center;
		margin-bottom: 30px;
		letter-spacing: 1px;
	}
}

#main h3 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:314%;
	font-weight: 500;
	text-align: left;
	color: #1DA5A8;
	margin-bottom: 40px;
}
@media screen and (max-width: 680px) {
	#main h3 {
		font-size:88%;
		text-align: center;
		margin-bottom: 20px;
		padding: 0 20px;
	}
}

#main h4 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:168%;
	font-weight: 500;
	text-align: left;
	color: #333333;
	margin-bottom: 15px;
}
@media screen and (max-width: 680px) {
	#main h4 {
		font-size:128%;
		text-align: center;
	}
}

#main h5 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:100%;
	font-weight: 500;
	text-align: left;
	color: #333333;
	box-sizing: border-box;
	letter-spacing: 1px;
}
#main h5 a {
	display: inline-block;
	width: 100%;
	max-width: 250px;
	color: #FFFFFF;
	background: #1DA5A8;
	padding: 15px 0;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
	border-radius: 50px;
	border: 1px solid #1DA5A8;
	box-sizing: border-box;
}

#main h5 a:hover {
	color: #1DA5A8;
	background: #FFFFFF;
	border: 1px solid #1DA5A8;
	box-sizing: border-box;
}
@media screen and (max-width: 680px) {
	#main h5 {
		font-size:88%;
		text-align: center;
	}
	#main h5 a {
		padding: 10px 0;
		max-width: 150px;
	}
}

#main .mainarea {
	margin: 0;
	padding: 160px 0 0 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
    justify-content:center;
	align-items: flex-end;
	max-width: 1280px;
	background-image: url("../img/top/bg_main.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 800px;
	/*border-bottom: 2px solid #1DA5A8;*/
}
@media screen and (max-width: 680px) {
#main .mainarea {
		flex-flow: column wrap;
		width: 100%;
		margin: 0 auto;
		padding: 60px 0 90px 0;
		background-size: 100% auto;
	}
}

#main .maindata {
	margin: 0 auto;
	padding: 0 0 90px 60px;
	flex: 1;
}

@media screen and (max-width: 991px) {
	#main .maindata {
		padding: 60px 0 60px 0;
	}
}

#main .info {
	margin: 0;
	padding: 0 ;
	flex: 1;
	box-sizing: border-box;
}
@media screen and (max-width: 991px) {
	#main .info {
		padding: 30px 30px 0 30px;
	}
}


/*-----------------------------------------------
	#service
-----------------------------------------------*/

#service {
	margin: 0 auto;
	padding: 60px 0;
	}
@media screen and (max-width: 680px) {
	#service {
		padding: 30px 0;
		background: none;
	}
}

#service h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:168%;
	font-weight: 500;
	line-height: 1.6em;
	letter-spacing: 1px;
	text-align: center;
	color: #1DA5A8;
	margin-bottom: 40px;
}
@media screen and (max-width: 680px) {
	#service h2 {
		font-size:128%;
		margin-bottom: 20px;
	}
}

#service h3 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:286%;
	font-weight: 500;
	line-height: 1.6em;
	letter-spacing: 3px;
	text-align: center;
	color: #333333;
	margin-bottom: 30px;
}
@media screen and (max-width: 680px) {
	#service h3 {
		font-size: 168%;
		letter-spacing: 1px;
		margin-bottom: 15px;
	}
}

#service h4 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:168%;
	font-weight: 500;
	line-height: 1.6em;
	letter-spacing: 1px;
	text-align: center;
	color: #333333;
	margin-bottom: 30px;

}
#service h4 span {
	padding: 0 0 0 35px;
	background-repeat: no-repeat;
	background-size: contain;
}
#service h4 span.ico01 {
	background-image: url("../img/top/ico01.png");
}
#service h4 span.ico02 {
	background-image: url("../img/top/ico02.png");
}
#service h4 span.ico03 {
	background-image: url("../img/top/ico03.png");
}
@media screen and (max-width: 680px) {
	#service h4 {
		font-size:128%;
		margin-bottom: 15px;
	}
}

#service p {
	font-family: "Noto Sans JP", sans-serif;
	font-size:88%;
	font-weight: 400;
	text-align: left;
	color: #111111;
	line-height: 1.8em;
}
@media screen and (max-width: 680px) {
	#service p {
		font-size: 78%;
	}
}

#service .servicearea {
	margin: 0 auto;
	padding: 0;
	max-width: 1280px;
}
#service .servicearea article {
	margin: 0 auto 60px auto;
	padding: 0 0 60px 0;
	border-bottom: 1px solid #CCCCCC;
}
#service .servicearea article:last-child {
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 991px) {
	#service .servicearea {
		flex-flow: column wrap;
		width: 100%;
		margin: 0 auto;
	}
	#service .servicearea article {
		margin: 0 auto 30px auto;
		padding: 0 0 30px 0;
	}
}

#service .serviceul {
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
	display: flex;
    justify-content:center;
	align-items: stretch;
	list-style: none;
}
#service .serviceul li {
	flex: 1;
	padding: 0 15px;
	box-sizing: border-box;
}
@media screen and (max-width: 991px) {
#service .serviceul {
		flex-flow: column wrap;
		width: 100%;
		margin: 0 auto;
	}
	#service .serviceul li {
		margin: 0 0 15px 0;
		padding: 0;
	}
	#service .serviceul li:last-child {
		margin: 0 0 0 0;
	}
	
}

/*-----------------------------------------------
	#outline
-----------------------------------------------*/

#outline {
	margin: 0 auto;
	padding: 0 0 90px 0;
	}
@media screen and (max-width: 680px) {
	#outline {
		padding: 0 0 30px 0;
		background: none;
		background-image: url("../img/top/ph_outlineoutline.png");
		background-size: 100% auto;
		background-position: center center;
		background-repeat: no-repeat;
	}
}

#outline .pc {
	display: block;	
}
@media screen and (max-width: 991px) {
#outline .pc {
	display: none;
}
}
#outline .sp {
	display: none;
}
@media screen and (max-width: 991px) {
#outline .sp {
	display: block;
}
}

#outline h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:168%;
	font-weight: 500;
	line-height: 1.6em;
	letter-spacing: 1px;
	text-align: center;
	color: #1DA5A8;
	margin-bottom: 40px;
}
@media screen and (max-width: 680px) {
	#outline h2 {
		font-size:128%;
		margin-bottom: 20px;
	}
}

#outline h3 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:186%;
	font-weight: 500;
	line-height: 1.6em;
	letter-spacing: 3px;
	text-align: center;
	color: #333333;
	margin-bottom: 15px;
}
@media screen and (max-width: 680px) {
	#outline h3 {
		font-size: 128%;
		letter-spacing: 1px;
		margin-bottom: 15px;
	}
}

#outline .outlinearea {
	margin: 0 auto;
	padding: 0;
	max-width: 1280px;
	box-sizing: border-box;
	display: flex;
    justify-content: center;
	align-items: center;
}
#outline .outlinearea article {
	margin: 0 auto;
	padding: 0;
	flex: 1;
}
#outline .outlinearea article.about {
	padding: 30px;
}
@media screen and (max-width: 680px) {
	#outline .outlinearea {
		flex-flow: column wrap;
		width: auto;
		margin: 0 15px;
		padding: 0;
		background: rgba(255,255,255,0.8);
		border-radius: 15px;
	}
	#outline .outlinearea article.about {
		padding: 0 15px;
	}
}

#outline .outlinetbl {
	margin: 0 auto 30px auto;
	padding: 0;
	width: 100%;
}
#outline .outlinetbl th {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 100%;
	font-weight: 400;
	text-align: left;
	color: #111111;
	line-height: 1.6em;
	word-break: keep-all;
	box-sizing: border-box;
	border-bottom: 1px solid #1DA5A8;
	padding: 15px 30px 15px 0;
}
#outline .outlinetbl td {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 100%;
	font-weight: 500;
	text-align: left;
	color: #111111;
	line-height: 1.6em;
	border-bottom: 1px solid #1DA5A8;
	padding: 15px 0 15px 0;
	word-break: break-all;
}
@media screen and (max-width: 680px) {
	#outline .outlinetbl {
		margin: 0 auto 5px auto;
		width: 100%;

	}
	#outline .outlinetbl th,
	#outline .outlinetbl td {
		display: block;
		width: 100%;
		border-bottom:none;
	}
	#outline .outlinetbl th {
		font-size: 88%;
		padding: 0 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #8BB5CF;
	}
	#outline .outlinetbl td {
		font-size: 88%;
		padding: 0 10px;
		margin-bottom: 15px;
	}
}

#outline .map {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
#outline .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#outline .outlineul {
	margin: 0;
	padding: 0 0 0 20px;
	width: 100%;
}
#outline .outlineul li {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 100%;
	font-weight: 500;
	text-align: left;
	line-height: 1.6em;
	box-sizing: border-box;
	color: #1DA5A8;
}
#outline .outlineul li span {
	color: #111111;
}



/*-----------------------------------------------
	#contact
-----------------------------------------------*/

#contact {
	margin: 0 auto 90px auto;
	padding: 0;
	}
@media screen and (max-width: 680px) {
	#contact {
		margin: 0 auto 30px auto;
		padding: 0 30px;
		background: none;
	}
}

#contact h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:168%;
	font-weight: 500;
	line-height: 1.6em;
	letter-spacing: 1px;
	text-align: center;
	color: #1DA5A8;
	margin-bottom: 40px;
}
@media screen and (max-width: 680px) {
	#contact h2 {
		font-size:128%;
		margin-bottom: 20px;
	}
}

#contact h3 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:186%;
	font-weight: 500;
	line-height: 1.6em;
	letter-spacing: 3px;
	text-align: center;
	color: #333333;

}
#contact h3 span {
	padding: 0 0 0 85px;
	background-repeat: no-repeat;
	background-size: contain;
}
#contact h3 span.ico {
	background-image: url("../img/top/ico_contact.png");
}
@media screen and (max-width: 680px) {
	#contact h3 {
		font-size: 128%;
		letter-spacing: 0;
	}
	#contact h3 span {
		padding: 0 0 0 100px;
		display: inline-block;
	}
}

#contact p {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 100%;
	font-weight: 400;
	text-align: center;
	color: #111111;
	line-height: 1.6em;
	margin-bottom: 30px;
}
@media screen and (max-width: 680px) {
	#contact p {
		font-size: 88%;
		text-align: left;
	}
}

#contact .contactarea {
	margin: 0 auto;
	padding: 0;
	max-width: 1280px;
}
@media screen and (max-width: 991px) {
	#contact .contactarea {
		width: 100%;
		margin: 0 auto;
	}
}





.fade_main {
	animation-name: fade_main;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
  }
  @keyframes fade_main {
	0% {
		opacity: 0;
		transform: translateY(300px);
		}
	100% {
		opacity: 1;
		transform: translateY(0);
		}
	}
.fade_main_d {
	animation-name: fade_main_d;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
  }
  @keyframes fade_main_d {
	0% {
		opacity: 0;
		transform: translateY(-300px);
		}
	100% {
		opacity: 1;
		transform: translateY(0);
		}
	}

.fade_main_sp {
	animation-name: fade_main_sp;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
  }
  @keyframes fade_main_sp {
	0% {
		opacity: 0;
		transform: translateX(300px);
		}
	100% {
		opacity: 1;
		transform: translateX(0);
		}
	}


#error {
	margin: 0 auto;
	padding: 0;
	}
@media screen and (max-width: 991px) {
#error {
	margin: 0 auto;
	}
}

#error h2 {
	font-weight: 300;
	font-size: 168%;
	padding-bottom: 5px;
	letter-spacing: 1px;
	margin-bottom: 15px;
	color: #0F467E;
	border-bottom: 1px solid #0F467E;

}
@media screen and (max-width: 680px) {
#error h2 {
	font-size: 88%;
	}
}

#error .dit {
	margin: 0 auto;
	padding: 0;
	display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center;
	height: 90vh;
	}