@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:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,メイリオ,Meiryo,sans-serif;
	}

/* 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: #0085c3;
	text-decoration: none;
	}

a:hover {
	color: #CCC;
	text-decoration: none;
	}


/* clearfix
----------------------------------------------------------- */
/* clearfix */
.cf:before,
.cf:after{
    display: table; 
    content: '';
}

.cf:after{
    clear: both;
}

/* h
----------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
	padding: 0px;
	}


/* ul li
----------------------------------------------------------- */
li { list-style: none}


/* em
----------------------------------------------------------- */
em {font-style: normal;}


/* text-indent
----------------------------------------------------------- */
#header h1.logo a,
#header p.logo a,
.pageTop a
										{ overflow: hidden; text-indent: 100%; white-space: nowrap;}

/* parts
----------------------------------------------------------- */
.font14 { font-size: 14px!important; }
.font16 { font-size: 16px!important; }
.font18 { font-size: 18px!important; }
.left { float: left; }
.right { float: right; }
.center { text-align: center; }
.txLeft { text-align: left; }
.txRight { text-align: right; }

/* PC タブレット用スタイル */
@media (min-width: 768px) {	

/* link move
----------------------------------------------------------- */
#headerR ul li a,
.pageTop a,
#footer a,
a:link
	{
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	cursor: pointer;
	}

#headerR ul li a:hover,
.pageTop a:hover,
#footer a:hover,
a:hover
	{
	filter: alpha(opacity=50);
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
	}


/* width
-----------------------------------------------------------  */
.inner 									{ margin: 0 auto; width: 1000px;}
#header .inner 							{ margin: 0 auto; width: 1100px;}


/* container
----------------------------------------------------------- */
#container 								{
	font-size: 14px; font-size: 1.4rem;
	line-height: 1.8;	
	color: #333;
	letter-spacing: 0.05em;
	text-align: left;
	width: 100%;
	}


/* header
----------------------------------------------------------- */
#header 								{ background-color: #fff; padding: 20px 0 20px;}
#header h1.logo a,
#header p.logo a						{ display: block; width: 440px; height: 90px; float: left; background: url(../../img/union/logo_ok.png) no-repeat left top;}
	
#headerR 								{ float: right; width: 540px;}
#headerR ul li a 						{ float: left; padding-right: 25px; margin: 45px 0 0; color: #333;}
#headerR ul li:nth-child(3)	a			{ padding-right: 50px;}
#headerR ul li a:after 					{ content: "▼"; padding: 0 0 0 3px; position: relative; top: -2px;}
#headerR ul li.contact a				{ border: #000 1px solid; border-radius: 5px; padding: 5px 40px; margin: 40px 0 0; display: block; color: #333;}
#headerR ul li.contact a:after 			{ content: "";}	
#headerR ul li.contact a:hover 			{ background-color: #000; color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1.0;
	-moz-opacity: 1.0;
	opacity: 1.0;
	}
	
/* pageTop
----------------------------------------------------------- */
.pageTop a 								{ display: block; margin: 0 auto; width: 192px; height: 96px; background: url(../../img/union/pagetop.png) no-repeat center top;}

	
/* footer
----------------------------------------------------------- */
#footer 								{ background-color: #333; padding: 90px 0 50px 0; color: #fff;}
	
#footer a 								{ color: #fff;}
#footer ul.fNav 						{ padding-left: 74px; padding-bottom: 50px;}
#footer ul.fNav li 						{ float: left; width: 200px; margin-right: 16px;}
#footer ul.fNav li:last-child			{ margin-right: 0px;}
#footer ul.fNav li h4 					{ padding-bottom: 16px;}
#footer ul.fNav li ul li:before 		{ content :"・";}

#footer p.copy 							{ text-align: center;}
#footer p.copy small 					{ font-style: normal;}


/* font
----------------------------------------------------------- */
/* basic font-size: 14px; */
#footer ul.fNav li h4
										{ font-size: 18px;}
#headerR 
										{ font-size: 16px;}
#headerR ul li a:after,
#headerR ul li.contact
										{ font-size: 14px;}
#footer p.copy small
										{ font-size: 12px;}
}


/* タブレット用スタイル */
@media (min-width: 768px) and (max-width: 1024px) {

/* width
-----------------------------------------------------------  */
.inner 									{ margin: 0 auto; width: 720px;}
#header .inner 							{ margin: 0 auto; width: 740px;}


/* header
----------------------------------------------------------- */
#header h1.logo a,
#header p.logo a 						{ display: block; width: 260px; height: 52px; float: left; background: url(../../img/union/logo_ok.png) no-repeat left top; background-size: cover;}

#headerR 								{ float: right; width: 460px;}
#headerR ul li a 						{ float: left; padding-right: 15px; margin: 25px 0 0;}
#headerR ul li:nth-child(3)	a			{ padding-right: 20px;}
#headerR ul li.contact a				{ border: #000 1px solid; border-radius: 5px; padding: 5px 20px; margin: 16px 0 0; display: block;}


/* footer
----------------------------------------------------------- */
#footer ul.fNav 						{ padding-left: 0px; padding-bottom: 50px;}
#footer ul.fNav li 						{ float: left; width: 170px; margin-right: 10px;}



/* font
----------------------------------------------------------- */
/* basic font-size: 14px; */
#footer ul.fNav li h4
										{ font-size: 16px;}
#headerR 
										{ font-size: 14px;}


	
}
	
/* スマホ用スタイル */
@media screen and (max-width: 767px){
			
			.br 									{ display: block;}

			/* width
			-----------------------------------------------------------  */
			.inner 									{ margin: 0 auto; width: 90%;}
			#header .inner 							{ margin: 0 auto; width: 100%;}


			/* container
			----------------------------------------------------------- */
			#container 								{
				font-size: 14px; font-size: 1.4rem;
				line-height: 1.8;	
				color: #333;
				letter-spacing: 0.05em;
				text-align: left;
				width: 100%;
				}


			/* header
			----------------------------------------------------------- */
			#header 								{ background-color: #fff; padding: 20px 0 20px; position: relative;}
			#header h1.logo a,
			#header p.logo a 						{ display: block; width: 220px; height: 44px; float: left; background: url(../../img/union/logo_ok.png) no-repeat left top; background-size: cover; z-index: 9999;}

			#headerR 								{ float: right; width: 540px;}
			#headerR ul li a 						{ float: left; padding-right: 25px; margin: 45px 0 0;}
			#headerR ul li:nth-child(3)	a			{ padding-right: 50px;}
			#headerR ul li a:after 					{ content: "▼"; padding: 0 0 0 3px; position: relative; top: -2px;}
			#headerR ul li.contact a				{ border: #000 1px solid; border-radius: 5px; padding: 5px 40px; margin: 40px 0 0; display: block;}
			#headerR ul li.contact a:after 			{ content: "";}	
			#headerR ul li.contact a:hover 			{ background-color: #000; color: #fff;
				filter: alpha(opacity=100);
				-webkit-opacity: 1.0;
				-moz-opacity: 1.0;
				opacity: 1.0;
				}


			/* pageTop
			----------------------------------------------------------- */
			.pageTop a 								{ display: block; margin: 0 auto; width: 100px; height: 50px; background: url(../../img/union/pagetop.png) no-repeat center top; background-size: cover;}


			/* footer
			----------------------------------------------------------- */
			#footer 								{ background-color: #333; padding: 3rem 0 2rem 0; color: #fff;}

			#footer a 								{ color: #fff;}
			#footer ul.fNav 						{ padding-bottom: 2rem; display: flex; flex-wrap: wrap; width: 100%;}
			#footer ul.fNav > li 					{ width: 48%; margin-right: 1%; margin-bottom: 2rem;}
			#footer ul.fNav li h4 					{ padding-bottom: 1rem;}
			#footer ul.fNav li ul.fNavsub li:before { content :"・";}

			#footer p.copy 							{ text-align: center;}
			#footer p.copy small 					{ font-style: normal;}


			/* font
			----------------------------------------------------------- */
			/* basic font-size: 14px; */
			#footer ul.fNav li h4
													{ font-size: 1.6rem;}
			#headerR 
													{ font-size: 1.6rem;}
			#headerR ul li a:after,
			#headerR ul li.contact
													{ }
	
			#footer ul.fNav li ul.fNavsub li
													{ font-size: 1.2rem;}
			#footer p.copy small
													{ font-size: 1.2rem;}
			}

}