@charset "utf-8";
/* ====== size table =====================================================
 10px = 77%     11px = 85%     12px = 93%   13px = 100%    14px = 108%
 15px = 116%    16px = 123.1%  17px = 131%  18px = 138.5%  19px = 146.5%
 20px = 153.9%  21px = 161.6%  22px = 167%  23px = 174%    24px = 182%
======================================================================= */

/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	/*font: inherit;*/
	vertical-align: baseline;
}
div { box-sizing: border-box;}

img{ vertical-align: bottom;}
ul { list-style: none;}
ul li{ list-style-type: none;}
em { font-style: normal;}

table{border-collapse:collapse; border-spacing:0;}


/*		font-style
-------------------------------------------------- */
body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
}
input, textarea {font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;}

/* for IE */
*:first-child+html body { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;}
* html body { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}

.en {
	font-family: 'Neuton', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

a { color:#1d3994; text-decoration:none;}
a:link   { color: #121212;}
a:visited{ color: #232323;}
a:hover  { color: #454545;}
a:active { color: #454545;}


/*		utility
-------------------------------------------------- */
.fL{float:left;}
.fR{float:right;}
.cf{ /zoom: 1; clear: both;}
.cf:after{ content: ''; display: block; clear: both;}
.sp { display: none;}

@media (max-width: 768px) {
	.sp { display: block;}
}

.fig { width: 100%; text-align:center;}
.fig-L{ width: 100%; text-align:left;}
.fig-R{ width: 100%; text-align:right;}
.win { padding-right: 20px;
 background: url(/img/icn-win.gif) no-repeat 100% 50%;
 background-size: auto 13px;
}

#loading { position: absolute; left: 50%; top: 45%; margin-left: -30px; z-index: 200;}
#fade { position: absolute; top: 0px; left: 0px; z-index: 199;
 width: 100%; height: 100%; display: none; background: #fff;
}

/*		header
-------------------------------------------------- */
#hd{ position: absolute; left: 0; top: 0; width: 100%; z-index:100;}
#hd .inner-hd { position:relative; width: 90%; max-width: 1000px; margin:auto; padding: 30px 0 20px;}
#hd .inner-hd .logo{ width: 230px; float: left; margin-top: 8px;
 background: url(/img/logo_wh.png) no-repeat;
 text-indent: -9999em;
}
#hd .inner-hd .logo a{ display: block;}
#hd nav{ padding-top: 10px; transition: all 0.8s;}
#hd nav .gNav { text-align:right;}
#hd nav .gNav li{ display: inline-block; margin-right: 15px; vertical-align: middle; position: relative;
 font-size: 15px;
}
#hd nav .gNav li.arw span,
#hd nav .gNav li.arw a { padding-left: 10px; color: #fff;
 background: url(/img/arw-wh.gif) no-repeat;
 background-position: 0 50%;
}
#hd nav .gNav li span{}
#hd nav .gNav li.tel a { padding-left: 30px; color: #fff;
 background: url(/img/icn-free_wh.png) no-repeat;
 background-position: 0 50%;
}
#hd nav .gNav li.mail a { display: block; width: 25px; height: 20px; padding-left:0;
 background: url(/img/icn-mail_wh.png) no-repeat;
 background-position: 50% 50%;
}
#hd nav .gNav li.mail a em{ display: none;}


#hd .inner-hd .sNav { position: absolute; right: 0; top: 0; font-size: 0;}
#hd .inner-hd .sNav li { display: inline-block; width: 150px;color: #fff; font-size: 15px;}
#hd .inner-hd .sNav li a { color: #fff; display: block; width: 100%; height: 30px; line-height: 30px; text-align:center;}
#hd .inner-hd .sNav li:first-child{ background: #222;}
#hd .inner-hd .sNav li:last-child { background: #2a5e4d;}

#hd.fixed{ position: fixed;
 -webkit-animation: move 1s ease 0s 1 alternate;
		-moz-animation: move 1s ease 0s 1 alternate;
		 -ms-animation: move 1s ease 0s 1 alternate;
			-o-animation: move 1s ease 0s 1 alternate;
}
@-webkit-keyframes move {
	0% { top: -100px; opacity: 0;}
 100%{ top: 0px; opacity: 1;}
}
@-moz-keyframes move {
	0% { top: -100px; -moz-opacity: 0;}
 100%{ top: 0px;	-moz-opacity: 1;}
}
@-ms-keyframes move {
	0% { top: -100px; opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0);}
 100%{ top: 0px; opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); }
}
@keyframes move {
	0% { top: -100px; opacity: 0;}
 100%{ top: 0px; opacity: 1;}
}
#hd.fixed { background: #fff; border-bottom: solid 2px #ccc;}
#hd.fixed .inner-hd .logo{ background: url(/img/logo.png) no-repeat;}
#hd.fixed nav .gNav li.arw span,
#hd.fixed nav .gNav li.arw a { color: #222;
 background: url(/img/arw.gif) no-repeat; background-position: 0 50%;
}
#hd.fixed nav .gNav li.tel a { color: #222;
 background: url(/img/icn-free.png) no-repeat;
 background-position: 0 50%;
}
#hd.fixed nav .gNav li.mail a {
 background: url(/img/icn-mail.png) no-repeat;
 background-position: 50% 50%;
}


#hd nav .gNav li ul.downMenu{ width: 180px; padding-top: 20px; opacity: 0; display:none;
 position: absolute; left: 50%; margin-left: -90px;
 background: rgba(255,255,255,0.95);
 box-shadow: 0 3px 3px #ccc;
 text-align:center;
 -moz-transition: all 0.4s linear;
 -webkit-transition: all 0.4s linear;
 transition: all 0.4s linear;
}
#hd nav .gNav li ul.downMenu li{ display: block; margin: 0;}
#hd nav .gNav li ul.downMenu li a{ display: block; padding: 10px 0; background: none !important; color: #043;}
#hd nav .gNav li ul.downMenu li a:hover{ text-decoration: underline;}
#hd nav .gNav li:hover ul.downMenu{ opacity: 1; display: block;}



#hd .menuBtn{ display: none; width: 35px; height: 40px;
 position: absolute; right: 0; top: 10px; z-index: 101;
 transition: all 0.8s;
}
#hd .menuBtn span{ display: block; width: 100%; height: 3px; position: absolute; left: 0;
 -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;
 background: #fff; box-sizing: border-box;
 transition: all .4s;
}
#hd.fixed .menuBtn span{ background: #043;}

#hd .menuBtn span:nth-of-type(1){ top: 4px;}
#hd .menuBtn span:nth-of-type(2){ top: 15px; opacity: 1;}
#hd .menuBtn span:nth-of-type(3){ top: 26px;}
#hd .menuBtn.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
#hd .menuBtn.active span{ background: #043;}
#hd .menuBtn.active span:nth-of-type(1){
 -webkit-transform: translateY(15px) rotate(45deg);
  transform: translateY(15px) rotate(45deg);
}
#hd .menuBtn.active span:nth-of-type(2){
 -webkit-transform: translateY(4px) rotate(-45deg);
  transform: translateY(4px) rotate(-45deg);
}
#hd .menuBtn.active span:nth-of-type(3){ opacity: 0;}

@media (max-width: 768px) {
	#hd .inner-hd{ padding: 15px 0;}
	#hd .inner-hd .logo{ float: none; margin: 0;}
	#hd nav{ position: fixed; display: block; width: 300px; height: 100vh; top: 0; right: -300px;
	 background: rgba(255, 255, 255, 0.85); z-index: 99;
	 transition: all .4s;
	}
	#hd .inner-hd .sNav { position: relative; top: auto; left: auto;}
	#hd .inner-hd .sNav li { display: block; width: 100%;}
	#hd .inner-hd .sNav li a{ display: block; height: auto; line-height: 1.6;}
	#hd .inner-hd .sNav li:first-child,
	#hd .inner-hd .sNav li:last-child{ background: none;}

	#hd .menuBtn{ display: block;}
}


#hd nav.open { right: 0;}
#hd nav.open .inner{ box-sizing: border-box; width: 100%; height: 80vh; overflow-y:scroll;}
#hd nav.open .gNav { position: relative; text-align: center; padding-left: 0px; padding-top: 30px;}
#hd nav.open .sNav { position: relative; text-align: center; padding-left: 0px;}
#hd nav.open .gNav li,
#hd nav.open .gNav li,
#hd nav.open .sNav li { width: 100%; background: none; box-sizing: border-box; margin: 0;}
#hd nav.open .gNav li.arw span { display:none;}
#hd nav.open .gNav li.arw a{ display: block; padding: 8px 0; color: #043; background: none !important;}
#hd nav.open .sNav li { color: #043; background: none !important;}
#hd nav.open .sNav li a,
#hd nav.open .gNav li.tel a,
#hd nav.open .gNav li.mail a{ display: block; width: 90%; padding: 10px; background: none; color: #043;}
#hd nav.open .gNav li.mail a em{ display: block; font-style: normal;}
#hd nav.open .gNav li ul.downMenu{ width: 100%; display:block; opacity: 1;
 position: relative; left: 0; margin-left: 0px; padding-top: 10px;
 background: none; box-shadow: none;
}
#hd nav.open .gNav li ul.downMenu li{ display: block; margin: 0;}
#hd nav.open .gNav li ul.downMenu li a{ display: block; padding: 10px 0; background: none; color: #043;}


#hd .copy { display:none; position: absolute; left:0; top: 0px;}
#hd .copy a { display: block; padding: 2px 20px; background: #d00; color: #fff; font-size: 14px; text-shadow: 0 0 2px #666;}
#hd .copy a:hover { text-decoration: none; opacity: 0.85;}
#hd .copy a:before { content: none; display: inline-block; width: 8px; height: 8px; position:relative; transform: rotate(45deg);
border-top: solid 1px #fff; border-right: solid 1px #fff; margin-right: 8px; top: -2px;
}
#hd.fixed .copy a { color: #222; text-shadow: none;}
#hd.fixed .copy a:before { border-color: #222;}
@media (max-width: 768px) {
	#hd .copy { position: relative; top: 30px; text-align: center;}
	#hd .copy a{ display: block; width: 80%; margin: 0 auto;}
	#hd .copy a:before { content: none;}
	#hd .copy a span{ display: block;}
}

/*		footer
-------------------------------------------------- */
.pageTop{ display:block; width: 50px; height:50px; position:fixed; bottom: 50px; right: 5%; z-index: 10;}
.pageTop a{ display: block; width: 50px; height: 50px; position: relative;}
.pageTop a:before{ content: ''; display: block; width: 25px; height:25px;
 position:absolute; left: 50%; top: 50%; margin-left: -13px; margin-top: -5px;
 border-top: solid 2px #6e645a; border-right: solid 2px #6e645a;
 -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);
}

#ft { position: relative; width: 100%; padding: 50px 0 10px; background: #eeece3; color: #6e645a;}
#ft .inner { width: 90%; max-width: 960px; margin:auto;}
#ft .inner:first-child{ border-bottom: dashed 1px #6e645a;}
#ft .inner a{ color: #6e645a;}
#ft .inner a:hover{ text-decoration: none;}
#ft .company { width: 400px; float:left;}
#ft .company h3{ margin-bottom: 10px; font-size: 20px; font-weight: 700;}
#ft .company dl{ position:relative; padding-left: 100px;}
#ft .company dl dt{ position: absolute; left:0; font-size: 15px; font-weight:700;}
#ft .company dl dd{ margin-bottom: 5px; font-size: 14px;}
#ft .fb{ width: 500px; float: right;}
#ft ul.fNav{ padding-top: 50px; font-size: 0;}
#ft ul.fNav > li { display: inline-block; width: 25%; margin: 0 auto; vertical-align:top; font-size: 14px;}
#ft ul.fNav dl { width: 85%; margin-bottom: 40px;}
#ft ul.fNav dl dt{ margin-bottom: 20px; border-bottom: solid 1px #6e645a;}
#ft ul.fNav dl dd{ margin-bottom: 10px; line-height: 1;}
#ft ul.fNav dl dd:before{ content:''; display: inline-block; width: 10px; height: 1px;
 margin-right: 10px; background: #6e645a; vertical-align: super;
}
#ft ul.etc {}
#ft ul.etc li { display: block; width: 100%; margin-bottom: 5px}

#ft address{ font-style: normal; font-size: 10px; text-align:center;}

@media (max-width: 769px) {
	#ft .inner{ display: none;}
	#ft address{ padding: 15px 0; font-size: 10px;}
}

.kv{ width: 100%; height: 300px;}
.kv-nopic{ height: 150px; background: #2a5e4d;}
.ctn{ width: 90%; max-width: 920px; margin: auto; padding: 40px 0;}


.ptl { padding-top: 80px;}
.ptl h2{ margin-bottom: 30px; font-size: 36px; font-weight: normal; text-align: center;}
.ptl h2 span{ display: block; font-size: 18px; color: #aaa;}
.ptl h3{ margin-bottom: 20px; font-size: 28px; font-weight: normal; text-align:center;}
.ptl .read { width: 80%; max-width: 800px; margin: 0 auto;}
.ptl .read p { letter-spacing: 0.125rem; line-height: 1.8; line-height: 1.8;}
.ptl .read p img{ margin: 5px;}

.stl{ margin-bottom: 30px; padding-left: 15px; border-left: solid 4px #ccc;
 font-size: 30px; font-weight: normal; line-height: 1.2;}
.stl span{ font-size: 24px;}

@media (max-width: 769px) {
	.kv { height: 200px; background-size: auto 100% !important;}
	.ptl h2 { font-size: 1.4rem;}
	.ptl h3 { font-size: 1.2rem;}
}

.sct{ position:relative; width: 100%;}

.tc{ text-align: center;}