@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, main {
	display: block;
}

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

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


html { font-size: 100%; }
body { color: #251E1C; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; min-width: 100%; }
@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome/fontawesome-webfont.eot?v=4.7.0');
  src: url('../font/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../font/fontawesome/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../font/fontawesome/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../font/fontawesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* -----------------------------------------------------
Layout
----------------------------------------------------- */
#Container { width: 100%; overflow: hidden; }
#Contents { max-width: 960px; width: 100%; margin: 0 auto; min-height: 400px; }


/* -----------------------------------------------------
Header
----------------------------------------------------- */
header { background: #F5F3F0; }
.head-inner { max-width: 960px; width: 95%; margin: auto auto; padding: 20px 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
header p { font-size: 0.938em; font-weight: bold; line-height: 1.3em; width: calc(100% - 305px); } 
header h1 { width: 305px; padding: 0 10px; box-sizing: border-box; }
header #Menu { display: none; }

.fixed { position: fixed; top: 0; width: 100%; z-index: 100; }


/* -----------------------------------------------------
Navi
----------------------------------------------------- */
#grobal-navi { background: #505050; border-bottom: 5px solid #DD001D; }
#head-navi { background: #D3D1CF; }
#head-navi > ul { max-width: 960px; width: 95%; margin: auto auto; padding: 7px 0; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; font-size: 0.813em; }
#head-navi > ul li { margin-left: 2em; }
#head-navi > ul li a { color: #251E1C; text-decoration: none; }
#head-navi > ul li a:hover { text-decoration: underline; }
#grobal-navi > ul { max-width: 960px; width: 95%; margin: auto auto; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
#grobal-navi > ul li { width: 33.3333%; border-right: 1px solid #8C8C8C; box-sizing: border-box; padding: 5px 0; }
#grobal-navi > ul li:first-child { border-left: 1px solid #8C8C8C; }
#grobal-navi > ul li:hover { background: rgba(255,255,255,0.20); }
#grobal-navi > ul li a { display: block; color: #FFF; text-decoration: none; font-size: 1.125em; padding: 7px 0; text-align: center; }

strong { font-weight: bold; }


/* -----------------------------------------------------
Footer
----------------------------------------------------- */
#PageTop { position: relative; max-width: 1060px; width: 100%; margin: auto; top: 35px; left: 0; right: 0; }
#PageTop a { background: #505050; width: 40px; height: 0; position: absolute; right: 0; bottom: -20px; overflow: hidden; padding-top: 40px; color: #FFF; font-size: 2.2em; text-decoration: none; }
#PageTop a:before { position: absolute; content: ""; background: url(../images/ic_pagetop.png); display: inline-block; width: 22px; height: 11px; text-align: center; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
#PageTop a:hover { background: #505050; transition: all .4s; }

footer { max-width: 960px; width: 95%; margin: 40px auto 20px auto; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0 10px; box-sizing: border-box; }
footer address { font-size: 0.875em; line-height: 1.5em; }
footer address strong { font-weight: bold; font-size: 1.143em; }

footer ul { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; }
footer ul li { margin-right: 10px; }

footer p { text-align: center; width: 100%; font-size: 0.750em; margin-top: 40px; }

br.br-on { display: none; }

@media screen and (max-width:960px) {
	.head-inner { justify-content: space-between; }
	header p { font-size: 0.813em; width: calc(100% - 290px); } 
	header h1 { width: 260px; }
	
	footer ul li { margin-left: 10px; }
	footer ul { flex-direction: column; }
	footer ul li + li { margin-top: 10px; }
}


@media screen and (max-width:767px) {
	#Contents { max-width: 960px; width: 100%; margin: 0 auto; min-height: 200px; }
	header { position: relative; }
	header p { display: none; }
	header #Menu { display: block; position: relative; width: 40px; height: 35px; text-align: center; }
	header #Menu::after { content: "メニュー"; font-size: 0.688em; display: block; position: absolute; bottom: -5px; left: 0; right: 0; margin: auto; letter-spacing: -0.15em; }
	header #Menu span { width: 30px; height: 2px; background: #DD001D; display: block; position: absolute; top: -10px; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transition: all 0.3s; transition: all 0.3s; }
	header #Menu span::before { content:''; height: 2px; width: 30px; background: #DD001D; position: absolute; top: -8px; left: 0; right: 0; margin: auto; }
	header #Menu span::after { content:''; height: 2px; width: 30px; background: #DD001D; position: absolute; top: 8px; left: 0; right: 0; margin: auto; -webkit-transition: all 0.3s; transition: all 0.3s; }	
	header #Menu.active span { -webkit-transform: translateY(20px) rotate(-45deg); transform: translateY(20px) rotate(-45deg); -webkit-transition: all 0.3s; transition: all 0.3s; top: -50px; width: 30px; }
	header .active span::before { opacity: 0; }
	header .active span::after { -webkit-transform: translateY(-20px) rotate(-90deg); transform: translateY(-20px) rotate(-90deg); -webkit-transition: all 0.3s; transition: all 0.3s; width: 30px; top: 20px!important; }
	
	#grobal-navi { position: absolute; background: rgba(243,245,240,0.70); top: 100%; left: 0; z-index: 9; padding: 20px; box-sizing: border-box; border: none; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; }
	#head-navi { order: 1; width: 100%; background: #FFF; font-size: 1.154em; }
	#head-navi > ul,#grobal-navi > ul { -webkit-flex-direction: column; flex-direction: column; max-width: 100%; width: 100%; padding: 0; }
	#head-navi > ul li { width: 100%; margin-left: 0; border-bottom: 1px dashed #C8C8C9; }
	#head-navi > ul li:last-child { border-bottom: none; }
	#head-navi > ul li a { padding: 15px; display: block; }
	#head-navi > ul li a:hover { text-decoration: none; }
	#grobal-navi > ul { order: 0; background: #FFF; }
	#grobal-navi > ul li { width: 100%; border: none; padding: 0; border-bottom: 1px dashed #C8C8C9; }
	#grobal-navi > ul li:first-child { border-left: none; }
	#grobal-navi > ul li a { color: #000; font-size: 0.875em; text-align: left; padding: 15px; }
	
	
	
	footer ul li { margin: 0 10px; }
	footer ul { -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center; width: 100%; margin-top: 20px; }
	footer ul li + li { margin-top: 0; }
	br.br-on { display: block; }
}

@media screen and (max-width:414px) {
	.head-inner { padding: 10px 0; }
	header h1 { width: 135px; }
}