@charset "UTF-8";
/* CSS Document */
/*-----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, 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,
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;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { max-width: 100%; width: auto; height: auto; vertical-align: bottom; }

html { font-size: 100%; }
body { color: #333333; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-style: normal; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-align: justify; text-justify: inter-ideograph; }
a { color: #000; text-decoration: none; }

#Container { position: relative; }
#Contents { position: relative; min-height: 400px; background: #FFF; }
.inner { max-width: 960px; width: 95%; margin: auto; }

/*-----------------------------------------------------
header
-----------------------------------------------------*/
header { position: fixed; top: 0; z-index: 10; width: 100%; box-shadow: 0px 4px 4px rgba(0,0,0,0.3); }
header::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; z-index: -1; box-shadow: 0px 0px 4px rgba(0,0,0,0.1); }
header .inner { display: flex; justify-content: space-between; align-items: center; height: 100px; }
header .logo a { display: flex; justify-content: flex-start; align-items: center; }
header svg { fill: #158b3b; width: 38px; height: auto; }
header .logo p { font-size: 0.625em; color: #158b3b; margin-left: 15px; }
header .logo p strong { display: block; font-size: 1.250rem; color: #000; margin-bottom: 5px; font-weight: 700; }
header ul { display: flex; justify-content: flex-end; }
header ul li a { padding: 0 20px; }
header ul li a:hover { color: #008842; transition: 0.3s; }
header ul li::before { content: ""; display: inline-block; width: 1px; height: 30px; transform: skewX(-15deg); background: #c8c8c8; vertical-align: middle; }
header #Menu { display: none; }
header ul li:first-child::before { background: transparent; }


/*-----------------------------------------------------
footer
-----------------------------------------------------*/
#Pagetop { position: absolute; z-index: 0; max-width: 1200px; width: 95%; margin: auto; bottom: 0; left: 0; right: 0; }
#Pagetop a { display: block; position: absolute; width: 40px; top: -60px; right: 0; z-index: 11; }

footer { background: #383838; padding-top: 60px; margin-top: 0; position: relative; z-index: 1; }
footer .inner { display: flex; justify-content: space-between; align-items: flex-start; }
footer .logo { display: flex; justify-content: flex-start; align-items: center; }
footer svg { fill: #FFF; width: 38px; height: auto; }
footer .logo p { font-size: 0.625em; color: #FFF; margin-left: 15px; }
footer .logo p strong { display: block; font-size: 1.250rem; margin-bottom: 5px; font-weight: 700; }
footer address { color: #FFF; font-style: normal; font-size: 0.875em; line-height: 1.5em; margin-top: 20px; }
footer address span { display: inline-block; margin-left: 1em; }
footer address .addr { width: 16.5em; }
footer nav { width: 100%; border-top: 1px solid #FFF; margin-top: 15px; }
footer nav ul { display: flex; justify-content: flex-start; flex-wrap: wrap; font-size: 0.875em; }
footer nav ul li { margin-top: 15px; margin-right: 1em; }
footer nav ul li a { color: #FFF; }

footer .rightaera { width: 181px; color: #FFF; font-size: 0.875em; line-height: 1.5em; }
footer .rightaera img { margin-bottom: 15px; }

footer .copy { background: #008842; color: #FFF; text-align: center; padding: 10px 0; font-size: 0.750em; margin-top: 55px; }


@media screen and (max-width:960px) {
/*-----------------------------------------------------
header
-----------------------------------------------------*/
	header .inner { display: flex; justify-content: space-between; align-items: center; height: 80px; }
	header nav { background: #393a3a; width: 100%; height: auto; position: absolute; top: 0; left: 0; transform: translateY(-100%); transition: 0.5s; align-items: center; text-align: left; z-index: -2; }
	header .logo { margin-top: 10px; }
	header ul { display: block; padding: 1px 30px 30px 30px; }
	header ul li + li { margin-top: 30px; }
	header ul li + li::before { display: none; }
	header ul li a { display: block; text-align: center; color: #FFF; }
	header ul li a:hover { color: #FFF; }
	header #Menu { display: block; position: relative; width: 40px; height: 40px; margin-top: 10px; }
	header #Menu span { display: inline-block; transition: all .4s; box-sizing: border-box; width: 30px; }
	header #Menu span { position: absolute; left: 0; right: 0; margin: auto; height: 2px; background-color: #008842; }
	header #Menu span:nth-of-type(1) { top: 8px; }
	header #Menu span:nth-of-type(2) { top: 0; bottom: 0; margin: auto; }
	header #Menu span:nth-of-type(3) { bottom: 8px; }
	
	header.active nav { transform: translateY(0); transition: 0.5s; top: 80px; }
	header.active span:nth-of-type(1) { transform: translateY(12px) rotate(-315deg); }
	header.active span:nth-of-type(2) { opacity: 0; }
	header.active span:nth-of-type(3) { transform: translateY(-10px) rotate(315deg); }

/*-----------------------------------------------------
footer
-----------------------------------------------------*/
	footer address span + span { display: block; margin-left: 0; }
	
}

@media screen and (max-width:600px) {
/*-----------------------------------------------------
footer
-----------------------------------------------------*/
	footer .inner { flex-direction: column; max-width: 310px; }
	footer nav { display: none; }
	footer address .addr { display: block; margin-left: 0; }
	footer .rightaera { margin-top: 30px; }

}

@keyframes text {
  0% { transform: rotate(1deg) translate3D(0, 50%, 0); opacity: 0; }
  100% { transform: rotate(0) translate3D(0, 0, 0); opacity: 1; }
}