/*-----------------------------------------------
	#sugai
-----------------------------------------------*/

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

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

#main {
	padding: 0;
	margin: 0 auto;
	width: 100%;
 	height: 100vh;
	background-size: cover;
	background-position: center top;
	background-repeat:no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
	
	}

#main h1 {
	font-family: "Noto Sans JP", sans-serif;
	font-size:128%;
	font-weight: 400;
	text-align: center;
	color: #FFFFFF;
	line-height: 1.6em;
}
@media screen and (max-width: 680px) {
	#main h1 {
		font-size:114%;
		text-align: center;
	}
}

#main h2 {
	font-family: "Yuji Syuku", serif;
	font-size:368%;
	font-weight: 500;
	color: #000000;
	line-height: 1.6em;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
}
#main h2 span {
	background-color: #FFFFFF;
	padding: 10px 0;
}
@media screen and (max-width: 2440px) {
	#main h2 {
		font-size:248%;
	}
}
@media screen and (max-width: 1280px) {
	#main h2 {
		font-size:168%;
	}
}

@media screen and (max-width: 991px) {
	#main h2 {
		font-size:144%;
		text-align: center;
		writing-mode:horizontal-tb;
		margin-bottom: 30px;
	}
	#main h2 span {
		background-color: #FFFFFF;
		padding: 0 10px;
	}
}
@media screen and (max-width: 680px) {
	#main h2 {
		font-size:128%;
		text-align: center;
		writing-mode:horizontal-tb;
		margin-bottom: 30px;
	}
	#main h2 span {
		background-color: #FFFFFF;
		padding: 0 10px;
	}
}

#main .mainwaku {
	margin: 0 auto;
	padding: 10px;
	border: 1px solid #FFFFFF;
	width: 90vw;
 	height: 80vh;
	box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media screen and (max-width: 991px) {
	#main .mainwaku {
		width: 95vw;
 		height: 98vh;
	}
}

#main .mainarea {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
	max-width: 991px;
	display: flex;
    justify-content:center;
	align-items: center;
	
}
#main .mainarea img {
	filter: drop-shadow(1px 3px 1px rgba(0,0,0,0.8));
}
@media screen and (max-width: 991px) {
	#main .mainarea {
		flex-flow: column wrap;
		margin: 0 auto;
		padding: 0;
	}
	#main .mainarea img {
		width: 70%;
	}
}


#main .maindata {
	margin: 0 auto;
	padding: 0 0 0 0;
	flex: 1;
}
@media screen and (max-width: 991px) {
	#main .maindata {
		padding: 0;
	}
}
#main .infodata {	
	margin: 0 auto;
	padding: 0 0 0 13%;
	flex: 1;
}

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

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

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

#service h2 {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:168%;
	font-weight: 500;
	line-height: 2.0em;
	text-align: left;
	color: #FFFFFF;
	letter-spacing: 3px;
	padding-left: 140px;
	background-image: url("../img/top/smile.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	
}
@media screen and (max-width: 680px) {
	#service h2 {
		font-size:128%;
		padding-left: 0;
		padding-top: 90px; 
		background-position: top center;
		background-size: 25%;
	}
}
#service h3 {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:100%;
	font-weight: 500;
	line-height: 1.8em;
	letter-spacing: 1px;
	text-align: left;
	color: #000000;
	margin-bottom: 10px;
}
@media screen and (max-width: 680px) {
	#service h3 {
		font-size: 100%;
		margin-bottom: 10px;
	}
}
#service h3 span {
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.8);
	box-shadow:3px 3px 1px rgba(0,0,0,0.8);
}

#service p {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:100%;
	font-weight: 500;
	text-align: left;
	color: #000000;
	line-height: 1.8em;
	letter-spacing: 1px;
}
@media screen and (max-width: 680px) {
	#service p {
		font-size: 88%;
		line-height: 1.6em;
	}
}
#service .servicettlarea {
	margin: 0 auto;
	padding: 30px 0;
	background-color: #CC0000;
}
@media screen and (max-width: 680px) {
	#service .servicettlarea {
		padding: 30px 30px;
	}
}

#service .servicettl {
	margin: 0 auto;
	padding: 0;
	max-width: 1280px;
}

#service .servicearea {
	margin: 0 auto;
	padding: 60px 0 45px 0;
	max-width: 1280px;
	box-sizing: border-box;
	display: flex;
    justify-content:center;
	align-items: stretch;
	flex-wrap: wrap;
}
#service .servicearea article {
	width: 33.3%;
	margin: 0 0 15px 0;
	padding: 0;
	max-width: 1280px;
	box-sizing: border-box;
	display: flex;
    justify-content:center;
	align-items: stretch;
	flex-wrap: wrap;
}
#service .servicearea article .serviceph {
	flex: 1;
}
#service .servicearea article .servicetxt {
	flex: 1;
	padding: 10px;
	background-color: #FFFFFF;

}
@media screen and (max-width: 680px) {
	#service .servicearea {
		flex-flow: column wrap;
		margin: 0 auto;
		padding: 30px 0;
	}
	#service .servicearea article {
		width: 100%;
		margin: 0 0 15px 0;
		padding: 0;
		align-items: center;
	}
	#service .servicearea article:last-child {
		margin: 0;
	}
}

#service .serviceul {
	margin: 10px 0 0 0;
	list-style: none;
}
#service .serviceul li {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:88%;
	font-weight: 500;
	text-align: left;
	color: #111111;
	line-height: 1.6em;
	margin: 0 0 5px 0;
	letter-spacing: 1px;
}
#service .serviceul li span {
	background-color: #EFEFEF;
	border-radius: 5px;
	padding: 5px 10px;
}
#service .serviceul li:last-child {
	margin: 0;
}

@media screen and (max-width: 991px) {
	#service .serviceul {
		width: 100%;
		margin: 10px 0 0 0;

	}
	#service .serviceul li {
		font-size:88%;
		margin: 0 0 5px 0;
		padding: 0;
	}
	#service .serviceul li:last-child {
		margin: 0 0 0 0;
	}
}

/*-----------------------------------------------
	#boundary
-----------------------------------------------*/

#boundary {
	margin: 0 auto;
	padding: 160px 0 0 0;
	background-color: #fff45d;
	}
@media screen and (max-width: 680px) {
	#boundary {
		padding: 30px 0 0 0;
	}
}
#boundary .boundarybg {
	padding: 0;
	background-image: url("../img/top/bg_boundary.png");
	background-repeat: repeat-x;
	background-position: center bottom;
	/*background-size: contain;*/
	height: 158px;
	animation: bgscroll 50s linear infinite;
}
@media screen and (max-width: 680px) {
	#boundary .boundarybg {
		padding: 0;
		background-size: cover;
		height: 60px;
		animation: bgscroll 20s linear infinite;
	}
}
@-webkit-keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 50vw 0;}
 }

 @keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 50vw 0;}
 }

#boundary h2 {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:168%;
	font-weight: 500;
	line-height: 2.0em;
	text-align: right;
	color: #000000;
}
@media screen and (max-width: 680px) {
	#boundary h2 {
		font-size:128%;
		text-align: left;
		margin-bottom: 30px;
	}
}
#boundary h5 {
	font-family: "BIZ UDGothic", sans-serif;
	font-size: 100%;
	font-weight: 700;
	text-align: center;
	color: #FFFFFF;
	line-height: 1.6em;
	margin-top: 15px;

}
@media screen and (max-width: 680px) {
	#boundary h5 {
		font-size: 88%;
	}
}
#boundary h5 .button {
	font-family: "BIZ UDGothic", sans-serif;
	font-size: 100%;
	font-weight: 500;
	line-height: 1.4em;
	padding: 10px ;
	margin: 0;
	min-width: 300px;
	max-height: 100%;
	cursor: pointer;
	color: #FFFFFF;
	background-color: #CC0000;
	text-decoration: none;
	display: inline-block;
}
#boundary h5 .button:hover {
	color: #000000;
	background-color: #EFEFEF;
}
@media screen and (max-width: 680px) {
	#boundary h5 .button {
		min-width: 200px;
	}	
}

#boundary p {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:100%;
	font-weight: 500;
	text-align: center;
	color: #000000;
	line-height: 1.8em;
	letter-spacing: 1px;
}
@media screen and (max-width: 680px) {
	#boundary p {
		font-size: 88%;
		line-height: 1.6em;
		text-align: left;
	}
}

#boundary .boundaryarea {
	margin: 0 auto;
	padding: 0 30px;
	max-width: 1280px;
	display: flex;
    justify-content:center;
	align-items: center;
}
#boundary .boundattl {
	flex: 1;
	padding: 30px 90px 30px 0;
}

#boundary .boundatxt {
	flex: 1;
	padding: 30px 0 30px 90px;
	border-left: 1px solid #CC0000;
}
@media screen and (max-width: 680px) {
	#boundary .boundaryarea {
		flex-flow: column wrap;
	}
	#boundary .boundaryarea .boundattl {
		padding: 0 0 0 0;
	}
	#boundary .boundaryarea .boundatxt {
		padding: 15px 0 15px 30px;
		border-left: 1px solid #CC0000;
	}
}


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

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

#outline h2 {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:168%;
	font-weight: 500;
	line-height: 2.0em;
	text-align: left;
	color: #111111;
	margin-bottom: 15px;
}
@media screen and (max-width: 680px) {
	#outline h2 {
		font-size:128%;
		margin-bottom: 15px;
	}
}

#outline .outlinehead {
	margin: 0 auto;
	padding: 0;
	max-width: 1280px;
	background-image: url("../img/top/ico_plus.png");
	background-repeat: no-repeat;
	background-position: bottom left;
}
#outline .outlinearea {
	margin: 0 auto;
	padding: 30px 0 10px 0;
	max-width: 1280px;
	box-sizing: border-box;
	display: flex;
    justify-content: center;
	align-items: stretch;
	background-image: url("../img/top/ico_tri.png");
	background-repeat: no-repeat;
	background-position: top right;
}
#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: 100%;
	}
	#outline .outlinearea article.about {
		width: 100%;
		margin-bottom: 15px;
		padding: 0 30px;
	}
}

#outline .outlinetbl {
	margin: 0 auto 30px auto;
	padding: 0;
	width: 100%;
}
#outline .outlinetbl th {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:100%;
	font-weight: 400;
	text-align: left;
	color: #111111;
	line-height: 1.8em;
	word-break: keep-all;
	box-sizing: border-box;
	border-bottom: 1px solid #CCCCCC;
	padding: 10px 30px 10px 0;
}
#outline .outlinetbl td {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:100%;
	font-weight: 400;
	text-align: left;
	color: #111111;
	line-height: 1.8em;
	border-bottom: 1px solid #CCCCCC;
	padding: 10px 0 10px 0;
	word-break: break-all;
}
@media screen and (max-width: 680px) {
	#outline .outlinetbl {
		margin: 0 auto;
		width: 100%;
	}
	#outline .outlinetbl th,
	#outline .outlinetbl td {
		display: block;
		width: 100%;
		border-bottom:none;
	}
	#outline .outlinetbl th {
		font-size: 88%;
		padding: 0;
		margin-bottom: 10px;
		border-bottom: 1px solid #CCCCCC;
	}
	#outline .outlinetbl td {
		font-size: 88%;
		padding: 0;
		margin-bottom: 15px;
	}
}

#outline .maparea {
	margin: 0 auto;
	padding: 0;
}

#outline .map {
	width: 100%;
	margin:0 auto;
}
#outline .map iframe {
	height:500px;
}
@media screen and (max-width: 680px) {
	#outline .map {
        width:100%;
    }
	#outline .map iframe{
		height:250px;
	}
}

#outline .outlineul {
	margin: 0;
	padding: 0 0 0 20px;
	width: 100%;
}
#outline .outlineul li {
	font-family: "BIZ UDGothic", sans-serif;
	font-size:100%;
	font-weight: 400;
	text-align: left;
	color: #111111;
	line-height: 1.6em;
	box-sizing: border-box;
	margin-bottom: 5px;
}
#outline .outlineul li span {
	color: #111111;
}
@media screen and (max-width: 680px) {
	#outline .outlineul li {
       font-size:88%;
	}
}


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

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

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

#contact h3 {
	font-family: "BIZ UDGothic", 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 50px;
		display: inline-block;
	}
}

#contact p {
	font-family: "BIZ UDGothic", sans-serif;
	font-size: 100%;
	font-weight: 500;
	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;
	}
