@charset "UTF-8";



/* ------------------------------------------

  global

------------------------------------------ */
* {
	margin: 0px;
	padding: 0px;
	}
html {
	font-size: 62.5%;
	height: 100%;

    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body { font-size: 10px; font-size: 1.0rem;}

body {
	text-align: center;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	/* 長いURL改行対策 */
	word-break: break-all;
	}

/* img
-----------------------------------------------------------  */
img {
	padding: 0px;
	margin: 0px;
	border: none;
	vertical-align: bottom;
	display: block;
	max-width: 100%;
	max-height: 100%;
	}

/* text link
----------------------------------------------------------- */
a:link,
a:visited,
a:active {
	color: #6ac01e;
	text-decoration: underline;
	}

a:hover {
	color: #999999;
	text-decoration: underline;
	}

/* h
----------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
	padding: 0px;
	}

/* ul li
----------------------------------------------------------- */
li { list-style: none;}


/* em
----------------------------------------------------------- */
em {font-style: normal;}


/* font family
----------------------------------------------------------- */
.headBox p,
.btngroupCont ul li a span
										{ font-family: 'Lato', sans-serif; font-style: normal;}

/* パーツ
----------------------------------------------------------- */
.mb30 { margin-bottom: 30px!important; }
.mb50 { margin-bottom: 50px!important; }
.mb60 { margin-bottom: 60px!important; }
.bgffede7 { background-color: #ffede7!important; }
.bold { font-weight: bold!important; }
.txRed { color: red; }

/* PC タブレット用スタイル */
@media (min-width: 768px) {	
	
/* pc sp
----------------------------------------------------------- */
.pc										{ }
.sp										{ display: none !important;}
	


/* link move
----------------------------------------------------------- */
.header .headerR .btn a,
.header .headerR ul li a,
.messageCont .txt .btn a
.btngroupCont ul li a,
.footer	a
	{
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	cursor: pointer;
	}

.header .headerR .btn a:hover,
.header .headerR ul li a:hover,
.messageCont .txt .btn a:hover
.btngroupCont ul li a:hover,
.footer	a:hover
	{
	filter: alpha(opacity=50);
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
	}
	


/* flex
----------------------------------------------------------- */
.flex 									{ display: flex;}
.flex_center 							{ justify-content: center;}
.between 								{ justify-content: space-between;}
.reverse 								{ flex-direction: row-reverse;}
.wrap									{ flex-wrap: wrap;}



/* width
-----------------------------------------------------------  */
.inner									
										{ margin: 0 auto; width: 1200px;}
.footerLink 
										{ margin: 0 auto; width: 730px;}

	
/* container
----------------------------------------------------------- */
.container {
	font-size: 16px; font-size: 1.6rem;
	line-height: 1.8;
	color: #333333;
	letter-spacing: 0.02em;
	text-align: left;
	}



/* headBox
----------------------------------------------------------- */
.headBox p 
										{ color: #6ac01e; letter-spacing: 0.05em; line-height: 1;}
.headBox h2
										{ color: #000033; font-weight: bold; padding: 0 0 40px 0; letter-spacing: 0.15em;}



/* header
----------------------------------------------------------- */
.header 								{ background-color: #fff; padding: 20px 0 0 0; height: 104px; box-sizing: border-box;}
.header .flex 							{ padding: 0 0 0 15px;}

.header h1 a,
.header p.logo a
										{ display: block; width: 200px; height: 60px; background: url("../../img/union/logo.png") no-repeat center center; background-size: cover;}


.header .headerR ul 					{ padding: 18px 50px 0 0;}
.header .headerR ul li a 				{ text-decoration: none; color: #3a3a3a; padding: 0 0 0 30px; font-weight: bold;}
.header .headerR ul li:nth-child(1) a 	{ padding: 0 0 0 0;}
.header .headerR .btn a					{ display: block; border-radius: 25px; box-shadow: 0px 4px 9px 0px rgba(18, 33, 4, 0.15); color: #fff; width: 200px; height: 57px; line-height: 57px; padding: 0 0 0 20px; text-decoration: none; box-sizing: border-box; text-align: left; letter-spacing: 0.05em;
										/* https://www.colorzilla.com/gradient-editor/ */
										background: #83ce3b; /* Old browsers */
										background: -moz-linear-gradient(top,  #83ce3b 0%, #72bc29 100%); /* FF3.6-15 */
										background: -webkit-linear-gradient(top,  #83ce3b 0%,#72bc29 100%); /* Chrome10-25,Safari5.1-6 */
										background: linear-gradient(to bottom,  #83ce3b 0%,#72bc29 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
										}
.header .headerR .btn a span			{ background: url("../../img/union/icon_btn_mail.png") no-repeat left center; padding: 0 0 0 40px; box-sizing: border-box; font-weight: bold;}



/* messageCont
----------------------------------------------------------- */
.messageCont 								{ padding: 80px 0 80px 0;
											/* https://www.colorzilla.com/gradient-editor/ */
											background: #217483; /* Old browsers */
											background: -moz-linear-gradient(left,  #217483 0%, #12ba83 100%); /* FF3.6-15 */
											background: -webkit-linear-gradient(left,  #217483 0%,#12ba83 100%); /* Chrome10-25,Safari5.1-6 */
											background: linear-gradient(to right,  #217483 0%,#12ba83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
											}
.messageCont .img 							{ width: 570px; margin: 0 0 0 20px;}
.messageCont .img img 						{ background: url("../../img/top/img_message01_bg.jpg") no-repeat -10px 10px; padding: 0 0 10px 10px;}
.messageCont .txt 							{ width: 570px;}

.messageCont .headBox p,
.messageCont .headBox h2,
.messageCont p 								{ color: #fff;}
.messageCont .headBox p:after 				{ content: ""; display: block; width: 54px; height: 2px; background-color: #fa9f00; margin: 10px 0 15px 0;}
.messageCont .headBox h2 					{ padding: 0 0 50px 0; line-height: 1;}	

.messageCont .txt .txt01 p 					{ padding: 0 0 50px 0; letter-spacing: 0.08em; line-height: 1.9;}

.messageCont .txt .btn a 					{ display: block; border-radius: 25px; background: #fff url("../../img/union/icon_arrow_r_black01.png") no-repeat 85% center; box-shadow: 0px 5px 9px 0px rgba(11, 101, 140, 0.63);
											width: 200px; height: 57px; line-height: 57px; text-align: center; color: #272727; font-weight: bold; text-decoration: none; padding: 0 20px 0 0; box-sizing: border-box;}



/* btngroupCont
----------------------------------------------------------- */
.btngroupCont							{ background: url("../../img/union/bg_link_group_.jpg") no-repeat center center; background-size: cover; padding: 80px 0 70px 0;}

.btngroupCont ul 						{ }
.btngroupCont ul li 					{ }
.btngroupCont ul li a					{ display: block; margin: 0 15px; text-decoration: none; color: #fff; width: 370px; height: 280px; border: #fff 5px solid; box-sizing: border-box; text-align: center; padding: 84px 0 0 0;}
.btngroupCont ul li a span 				{ letter-spacing: 0.08em; line-height: 1;}
.btngroupCont ul li a span:after 		{ content: ""; display: block; width: 104px; height: 1px; background-color: #fff; margin: 15px auto 10px auto;}
.btngroupCont ul li a h3 				{ letter-spacing: 0.2em; font-weight: bold;}



/* footer
----------------------------------------------------------- */
.footer									{ background-color: #18644c;}
.footer,
.footer	a 								{ color: #fff; text-decoration: none;}

.footerLogo 							{ padding: 30px 0 0 0;}
.footerLogo a 							{ margin: 0 auto 40px auto; display: block; width: 200px;}

.footerLink 							{ margin: 0 auto 50px auto;}
.footerLink dl dt 						{ margin: 0 0 30px 0;}

.footer ul 								{ text-align: center; margin: 0 0 40px 0;}
.footer ul li 							{ display: inline; padding: 0 10px;}


.copy 									{ border-top: #fff 1px solid; text-align: center; padding: 20px 0 10px;}



/* topcontrol ページの先頭へ戻る
----------------------------------------------------------- */
.footer .inner 							{ position: relative;}
#topcontrol p a {
	position: absolute; top: -27px; right: 15px;
	display: block;
	width: 53px;
	height: 53px;
	background: url(../../js/totop.png) no-repeat left top; background-size: cover;
	text-indent: -9999px;
	cursor: pointer;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}

#topcontrol p a:hover {
	filter: alpha(opacity=50);
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
	}



/* font
----------------------------------------------------------- */
.headBox p
										{ font-size: 48px;}
.btngroupCont ul li a span
										{ font-size: 40px;}
.btngroupCont ul li a h3
										{ font-size: 22px;}
.headBox h2
										{ font-size: 18px;}	
.header .headerR ul li
										{ font-size: 15px;}	
.header .headerR .btn
										{ font-size: 14px;}
.footer	
										{ font-size: 13px;}
.copy 
										{ font-size: 14px;}

}



/* タブレット用スタイル */
@media (min-width: 768px) and (max-width: 1200px) {

/* width
-----------------------------------------------------------  */
.inner									
										{ margin: 0 auto; width: 96%;}
.footerLink 
										{ margin: 0 auto; width: 96%;}

	

/* header
----------------------------------------------------------- */
.header 								{ background-color: #fff; padding: 20px 0 0 0; height: 104px; box-sizing: border-box;}
.header .flex 							{ padding: 0;}

.header h1 a,
.header p.logo a
										{ display: block; width: 140px; height: 42px; background: url("../../img/union/logo.png") no-repeat center center; background-size: cover;}


.header .headerR ul 					{ padding: 10px 15px 0 0;}
.header .headerR ul li a 				{ text-decoration: none; color: #3a3a3a; padding: 0 0 0 8px; font-weight: bold;}
.header .headerR ul li:nth-child(1) a 	{ padding: 0 0 0 0;}
.header .headerR .btn a					{ display: block; border-radius: 25px; box-shadow: 0px 4px 9px 0px rgba(18, 33, 4, 0.15); color: #fff; width: 160px; height: 42px; line-height: 42px; padding: 0 0 0 10px; text-decoration: none; box-sizing: border-box; text-align: left; letter-spacing: 0.02em;
										/* https://www.colorzilla.com/gradient-editor/ */
										background: #83ce3b; /* Old browsers */
										background: -moz-linear-gradient(top,  #83ce3b 0%, #72bc29 100%); /* FF3.6-15 */
										background: -webkit-linear-gradient(top,  #83ce3b 0%,#72bc29 100%); /* Chrome10-25,Safari5.1-6 */
										background: linear-gradient(to bottom,  #83ce3b 0%,#72bc29 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
										}
.header .headerR .btn a span			{ background: url("../../img/union/icon_btn_mail.png") no-repeat left center; /*padding: 0 0 0 40px;*/ padding: 0 0 0 30px; box-sizing: border-box; font-weight: bold;}



/* messageCont
----------------------------------------------------------- */
.messageCont 							{ padding: 80px 0 80px 0;
										/* https://www.colorzilla.com/gradient-editor/ */
										background: #217483; /* Old browsers */
										background: -moz-linear-gradient(left,  #217483 0%, #12ba83 100%); /* FF3.6-15 */
										background: -webkit-linear-gradient(left,  #217483 0%,#12ba83 100%); /* Chrome10-25,Safari5.1-6 */
										background: linear-gradient(to right,  #217483 0%,#12ba83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
										}
.messageCont .img 						{ width: 47%; margin: 0 0 0 3%;}
.messageCont .img img 					{ background: url("../../img/top/img_message01_bg.jpg") no-repeat -10px 10px; padding: 0 0 10px 10px;}
.messageCont .txt 						{ width: 50%;}

.messageCont .headBox p,
.messageCont .headBox h2,
.messageCont p 							{ color: #fff;}
.messageCont .headBox p:after 			{ content: ""; display: block; width: 54px; height: 2px; background-color: #fa9f00; margin: 10px 0 15px 0;}
.messageCont .headBox h2 				{ padding: 0 0 50px 0; line-height: 1;}	

.messageCont .txt .txt01 p 				{ padding: 0 0 50px 0; letter-spacing: 0.08em; line-height: 1.9;}

.messageCont .txt .btn a 				{ display: block; border-radius: 25px; background: #fff url("../../img/union/icon_arrow_r_black01.png") no-repeat 85% center; box-shadow: 0px 5px 9px 0px rgba(11, 101, 140, 0.63);
										width: 200px; height: 57px; line-height: 57px; text-align: center; color: #272727; font-weight: bold; text-decoration: none; padding: 0 20px 0 0; box-sizing: border-box;}



/* btngroupCont
----------------------------------------------------------- */
.btngroupCont							{ background: url("../../img/union/bg_link_group_.jpg") no-repeat center center; background-size: cover; padding: 80px 0 70px 0;}

.btngroupCont ul 						{ }
.btngroupCont ul li 					{ width: 31%; margin: 0 1.5%;}
.btngroupCont ul li a					{ display: block; margin: 0; text-decoration: none; color: #fff; width: 100%; height: 280px; border: #fff 5px solid; box-sizing: border-box; text-align: center; padding: 84px 0 0 0;}
.btngroupCont ul li a span 				{ letter-spacing: 0.08em; line-height: 1;}
.btngroupCont ul li a span:after 		{ content: ""; display: block; width: 104px; height: 1px; background-color: #fff; margin: 15px auto 10px auto;}
.btngroupCont ul li a h3 				{ letter-spacing: 0.2em; font-weight: bold;}



/* footer
----------------------------------------------------------- */
.footer									{ background-color: #18644c;}
.footer,
.footer	a 								{ color: #fff; text-decoration: none;}

.footerLogo 							{ padding: 30px 0 0 0;}
.footerLogo a 							{ margin: 0 auto 40px auto; display: block; width: 200px;}

.footerLink 							{ margin: 0 auto 50px auto;}
.footerLink dl dt 						{ margin: 0 0 30px 0;}

.footer ul 								{ text-align: center; margin: 0 0 40px 0;}
.footer ul li 							{ display: inline; padding: 0 10px;}


.copy 									{ border-top: #fff 1px solid; text-align: center; padding: 20px 0 10px;}



/* topcontrol ページの先頭へ戻る
----------------------------------------------------------- */
.footer .inner 							{ position: relative;}
#topcontrol p a {
	position: absolute; top: -27px; right: 15px;
	display: block;
	width: 53px;
	height: 53px;
	background: url(../../js/totop.png) no-repeat left top; background-size: cover;
	text-indent: -9999px;
	cursor: pointer;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}

#topcontrol p a:hover {
	filter: alpha(opacity=50);
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
	}



/* font
----------------------------------------------------------- */
.headBox p
										{ font-size: 48px;}
.btngroupCont ul li a span
										{ font-size: 40px;}
.btngroupCont ul li a h3
										{ font-size: 22px;}
.headBox h2
										{ font-size: 18px;}	
.header .headerR ul li
										{ font-size: 14px;}	
.header .headerR .btn
										{ font-size: 13px;}
.footer	
										{ font-size: 13px;}
.copy 
										{ font-size: 14px;}

	
}



/* スマホ用スタイル */
@media screen and (max-width: 767px){

			/* pc sp
			----------------------------------------------------------- */
			.pc										{ display: none !important;}
			.sp										{ }



			/* width
			-----------------------------------------------------------  */
			.inner									
													{ margin: 0 auto; width: 96%;}
			.footerLink 
													{ margin: 0 auto; width: 96%;}


			/* container
			----------------------------------------------------------- */
			.container {
				font-size: 15px; font-size: 1.5rem;
				line-height: 1.8;
				color: #333333;
				letter-spacing: 0.02em;
				text-align: left;
				}



			/* headBox
			----------------------------------------------------------- */
			.headBox p 
													{ color: #6ac01e; letter-spacing: 0.05em; line-height: 1;}
			.headBox h2
													{ color: #000033; font-weight: bold; padding: 0 0 2rem 0;}



			/* header
			----------------------------------------------------------- */
			.header 								{ background-color: #fff; padding: 10px 0 0 0; height: 50px; box-sizing: border-box;}
			.header .flex 							{ padding: 0; display: flex; justify-content: space-between;}

			.header h1 a,
			.header p.logo a
													{ display: block; width: 100px; height: 30px; background: url("../../img/union/logo.png") no-repeat center center; background-size: cover;}


			.header .headerR ul 					{ padding: 18px 50px 0 0;}
			.header .headerR ul li a 				{ text-decoration: none; color: #3a3a3a; padding: 0 0 0 30px; font-weight: bold;}
			.header .headerR ul li:nth-child(1) a 	{ padding: 0 0 0 0;}
			.header .headerR .btn a					{ display: block; border-radius: 25px; box-shadow: 0px 4px 9px 0px rgba(18, 33, 4, 0.15); color: #fff; width: 160px; height: 30px; line-height: 30px; padding: 0 0 0 10px; margin: 0 50px 0 2%; text-decoration: none; box-sizing: border-box; text-align: left; letter-spacing: 0.02em;
													/* https://www.colorzilla.com/gradient-editor/ */
													background: #83ce3b; /* Old browsers */
													background: -moz-linear-gradient(top,  #83ce3b 0%, #72bc29 100%); /* FF3.6-15 */
													background: -webkit-linear-gradient(top,  #83ce3b 0%,#72bc29 100%); /* Chrome10-25,Safari5.1-6 */
													background: linear-gradient(to bottom,  #83ce3b 0%,#72bc29 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
													}
			.header .headerR .btn a span			{ background: url("../../img/union/icon_btn_mail.png") no-repeat left center; padding: 0 0 0 25px; box-sizing: border-box; font-weight: bold; background-size: 21px 14px;}



			/* messageCont
			----------------------------------------------------------- */
			.messageCont 							{ padding: 5rem 0 5rem 0;
													/* https://www.colorzilla.com/gradient-editor/ */
													background: #217483; /* Old browsers */
													background: -moz-linear-gradient(left,  #217483 0%, #12ba83 100%); /* FF3.6-15 */
													background: -webkit-linear-gradient(left,  #217483 0%,#12ba83 100%); /* Chrome10-25,Safari5.1-6 */
													background: linear-gradient(to right,  #217483 0%,#12ba83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
													}
			.messageCont .img 						{ width: 80%; margin: 0 auto 2rem auto;}
			.messageCont .img img 					{ background: url("../../img/top/img_message01_bg.jpg") no-repeat -10px 10px; padding: 0 0 10px 10px;}
			.messageCont .txt 						{ width: 80%; margin: 0 auto;}

			.messageCont .headBox p,
			.messageCont .headBox h2,
			.messageCont p 							{ color: #fff;}
			.messageCont .headBox p:after 			{ content: ""; display: block; width: 54px; height: 2px; background-color: #fa9f00; margin: 1rem 0 1.5rem 0;}
			.messageCont .headBox h2 				{ padding: 0 0 2rem 0; line-height: 1;}	

			.messageCont .txt .txt01 p 				{ padding: 0 0 3rem 0; letter-spacing: 0.08em; line-height: 1.9;}

			.messageCont .txt .btn a 				{ display: block; border-radius: 25px; background: #fff url("../../img/union/icon_arrow_r_black01.png") no-repeat 85% center; box-shadow: 0px 5px 9px 0px rgba(11, 101, 140, 0.63);
													width: 200px; height: 57px; line-height: 57px; text-align: center; color: #272727; font-weight: bold; text-decoration: none; padding: 0 20px 0 0; box-sizing: border-box; margin: 0 auto;}



			/* btngroupCont
			----------------------------------------------------------- */
			.btngroupCont							{ background: url("../../img/union/bg_link_group_.jpg") no-repeat center center; background-size: cover; padding: 5rem 0 3rem 0;}

			.btngroupCont ul 						{ }
			.btngroupCont ul li 					{ }
			.btngroupCont ul li a					{ display: block; margin: 2rem auto; text-decoration: none; color: #fff; width: 80%; height: 200px; border: #fff 5px solid; box-sizing: border-box; text-align: center; padding: 5rem 0 0 0;}
			.btngroupCont ul li a span 				{ letter-spacing: 0.08em; line-height: 1;}
			.btngroupCont ul li a span:after 			{ content: ""; display: block; width: 104px; height: 1px; background-color: #fff; margin: 15px auto 10px auto;}
			.btngroupCont ul li a h3 				{ letter-spacing: 0.2em; font-weight: bold;}



			/* footer
			----------------------------------------------------------- */
			.footer									{ background-color: #18644c;}
			.footer,
			.footer	a 								{ color: #fff; text-decoration: none;}

			.footerLogo 							{ padding: 3rem 0 0 0;}
			.footerLogo a 							{ margin: 0 auto 4rem auto; display: block; width: 160px;}

			.footerLink 							{ margin: 0 auto 1rem auto; display: flex; flex-wrap: wrap;}
			.footerLink dl 							{ width: 50%; margin: 0 0 3rem 0;}
			.footerLink dl dt 						{ margin: 0 0 1rem 0;}

			.footer ul 								{ text-align: center; margin: 0 0 2rem 0;}
			.footer ul li 							{ display: inline; padding: 0 0.5rem;}


			.copy 									{ border-top: #fff 1px solid; text-align: center; padding: 1rem 0 1rem;}



			/* topcontrol ページの先頭へ戻る
			----------------------------------------------------------- */
			.footer .inner 							{ position: relative;}
			#topcontrol p a {
				position: absolute; top: -27px; right: 15px;
				display: block;
				width: 53px;
				height: 53px;
				background: url(../../js/totop.png) no-repeat left top; background-size: cover;
				text-indent: -9999px;
				cursor: pointer;

				-webkit-transition: all 0.3s ease;
				-moz-transition: all 0.3s ease;
				transition: all 0.3s ease;
				}

			#topcontrol p a:hover {
				filter: alpha(opacity=50);
				-webkit-opacity: 0.5;
				-moz-opacity: 0.5;
				opacity: 0.5;
				}



			/* font
			----------------------------------------------------------- */
			.headBox p
													{ font-size: 4.0rem;}
			.btngroupCont ul li a span
													{ font-size: 4.0rem;}
			.btngroupCont ul li a h3
													{ font-size: 2.2rem;}
			.headBox h2
													{ font-size: 2.0rem;}
			.header .headerR ul li
													{ font-size: 1.5rem;}	
			.header .headerR .btn
													{ font-size: 1.3rem;}
			.footer	
													{ font-size: 1.3rem;}
			.copy 
													{ font-size: 1.4rem}
	
	

}

/* スマホ用スタイル */
@media screen and (max-width: 320px){

/* font
----------------------------------------------------------- */
.headBox p
										{ font-size: 3.6rem;}
.headBox h2
										{ font-size: 1.8rem;}

	
}
