@charset "UTF-8";
body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; color: #23292f; font-size: 1; background: #fff; -webkit-text-size-adjust: 100%; }
body.fixed { position: fixed; width: 100%; height: 100%; left: 0; }
body img { max-width: 100%; height: auto; }

body a, body a:hover { transition: all 0.4s ease; }

/* menu open */
#menuOpen { display: none; position: fixed; top: 10px; right: 10px; width: 50px; height: 50px; line-height: 50px; text-indent: -9999px; background: url(../images/bt_menu.png) center top no-repeat; z-index: 3; cursor: pointer; transition: all 0.4s ease; }
#menuOpen:hover { opacity: 0.85; }
#menuOpen.selected { background-position: center bottom; }
@media screen and (max-width: 1024px) { #menuOpen { display: block; } }

/*
=================================================
	header
=================================================
*/
header { position: fixed; top: 0; left: 0; width: 100%; background: #23292f; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
header #header { padding: 15px; }
@media screen and (max-width: 1024px) { header #header { padding: 10px; } }
header #header h1 { text-indent: -9999px; }
header #header a { display: block; width: 200px; line-height: 50px; background: url(../images/logo_jupaken.png) center center no-repeat; background-size: 100%; }
header #header a:hover { opacity: .85; }
header #header #nav-open { display: none; background: url(../images/bt_menu.png) right top no-repeat; text-indent: -9999px; width: 50px; line-height: 50px; transition: all 0.4s ease; position: fixed; top: 10px; right: 10px; z-index: 5; }
@media screen and (max-width: 1024px) { header #header #nav-open { display: block; } }
header #header #nav-open.selected { background-position: right bottom; }
header #navi { width: 100%; flex-shrink: 100; }
header #navi a { color: #fff; }

/* nav global */
@media screen and (max-width: 1024px) { #navi { position: fixed; top: 70px; left: 0; width: 100%; height: calc(100% - 70px); background: #23292f; overflow: auto; display: none; } }

#nav-global { position: fixed; top: 80px; left: 0; width: 100%; background: #e70; }
@media screen and (max-width: 1024px) { #nav-global { position: static; background: transparent; } }
#nav-global #mainNav { display: flex; }
@media screen and (max-width: 1024px) { #nav-global #mainNav { display: block; } }
#nav-global #mainNav li { width: 16.6666%; text-align: center; position: relative; }
@media screen and (max-width: 1024px) { #nav-global #mainNav li { width: auto; display: flex; align-items: center; border-bottom: 1px solid #53595f; padding: 20px; } }
@media screen and (max-width: 520px) { #nav-global #mainNav li { display: block; } }
#nav-global #mainNav li a { display: block; font-size: 1.0625rem; line-height: 60px; font-weight: bold; letter-spacing: 1px; }
#nav-global #mainNav li a:hover, #nav-global #mainNav li a.active { background: #e40; }
@media screen and (max-width: 1024px) { #nav-global #mainNav li a { font-size: 0.9375rem; } }
@media screen and (max-width: 1024px) { #nav-global #mainNav li a.nav-icon { width: 160px; line-height: 1; } }
@media screen and (max-width: 520px) { #nav-global #mainNav li a.nav-icon { width: auto; } }
#nav-global #mainNav li a.nav-icon::before { content: ""; width: 30px; height: 60px; display: inline-block; margin-right: 8px; vertical-align: bottom; background-position: center center; background-repeat: no-repeat; background-size: 100%; }
@media screen and (max-width: 1024px) { #nav-global #mainNav li a.nav-icon::before { display: block; width: 40px; height: 40px; margin: 0 auto 10px; } }
#nav-global #mainNav li:nth-child(1) a.nav-icon::before { background-image: url(../images/icon_navi1.png); }
#nav-global #mainNav li:nth-child(2) a.nav-icon::before { background-image: url(../images/icon_navi2.png); }
#nav-global #mainNav li:nth-child(3) a.nav-icon::before { background-image: url(../images/icon_navi3.png); }
#nav-global #mainNav li:nth-child(4) a.nav-icon::before { background-image: url(../images/icon_navi4.png); }
#nav-global #mainNav li:nth-child(5) a.nav-icon::before { background-image: url(../images/icon_navi5.png); }
#nav-global #mainNav li:nth-child(6) a.nav-icon::before { background-image: url(../images/icon_navi6.png); }
#nav-global #mainNav .subNav { position: absolute; top: 60px; left: 0; width: 100%; background: #43494f; display: none; }
@media screen and (max-width: 1024px) { #nav-global #mainNav .subNav { position: static; background: transparent; flex-shrink: 100; display: block; } }
@media screen and (max-width: 520px) { #nav-global #mainNav .subNav { margin-top: 20px; } }
#nav-global #mainNav .subNav ul { display: block; }
@media screen and (max-width: 1024px) { #nav-global #mainNav .subNav ul { display: flex; flex-wrap: wrap; } }
@media screen and (max-width: 520px) { #nav-global #mainNav .subNav ul { display: block; } }
#nav-global #mainNav .subNav ul li { width: auto; border-bottom: 1px solid #53595f; }
#nav-global #mainNav .subNav ul li:last-child { border: none; }
@media screen and (max-width: 1024px) { #nav-global #mainNav .subNav ul li { display: block; border: none; width: 50%; padding: 0; } }
@media screen and (max-width: 520px) { #nav-global #mainNav .subNav ul li { width: auto; } }
#nav-global #mainNav .subNav ul li a { font-weight: normal; font-size: 0.9375rem; line-height: 50px; }
#nav-global #mainNav .subNav ul li a:hover { background: #53595f; }
@media screen and (max-width: 1024px) { #nav-global #mainNav .subNav ul li a { background: #43494f; margin: 2px; text-align: center; line-height: 45px; } }
@media screen and (max-width: 520px) { #nav-global #mainNav .subNav ul li a { margin: 2px 0; } }

/* nav utility */
#nav-utility { display: flex; justify-content: flex-end; align-items: center; padding: 0 30px; }
@media screen and (max-width: 1024px) { #nav-utility { justify-content: center; padding: 20px 20px 60px; } }
@media screen and (max-width: 520px) { #nav-utility { display: block; } }
#nav-utility #link-bt { margin-left: 30px; display: flex; justify-content: center; }
@media screen and (max-width: 1024px) { #nav-utility #link-bt { margin-left: 0; } }
@media screen and (max-width: 520px) { #nav-utility #link-bt { margin-bottom: 20px; } }
#nav-utility #link-bt .bt-icon { margin-right: 30px; }
@media screen and (max-width: 1024px) { #nav-utility #link-bt .bt-icon { background: #1da1f2; width: 40px; height: 40px; padding: 9px; border-radius: 20px; } }
#nav-utility #link-bt a { display: block; width: 22px; line-height: 22px; background-position: center center; background-repeat: no-repeat; background-size: 100%; text-indent: -9999px; }
#nav-utility #link-bt a:hover { opacity: .85; }
@media screen and (max-width: 1024px) { #nav-utility #link-bt #home { background: #43494f; } }
#nav-utility #link-bt #home a { background-image: url(../images/icon_home.png); }
@media screen and (max-width: 520px) { #nav-utility #link-bt #twitter { margin-right: 0; } }
#nav-utility #link-bt #twitter a { background-image: url(../images/icon_twitter.png); }
#nav-utility #search #search-button span { display: block; width: 22px; line-height: 22px; background: url(../images/icon_search.png) center center no-repeat; background-size: 100%; text-indent: -9999px; cursor: pointer; transition: all 0.4s ease; }
#nav-utility #search #search-button span:hover { opacity: .85; }
#nav-utility #search #search-button.active span { background-image: url(../images/icon_close.png); }
@media screen and (max-width: 1024px) { #nav-utility #search #search-button { display: none; } }
@media screen and (max-width: 520px) { #nav-utility #search #search-button { margin-left: 0; } }
#nav-utility #search #search-box { position: absolute; top: 80px; right: 0; width: 420px; background: #23292f; border-top: 1px solid #555; z-index: 1; display: none; }
@media screen and (max-width: 1024px) { #nav-utility #search #search-box { display: block; position: static; border-top: none; } }
@media screen and (max-width: 520px) { #nav-utility #search #search-box { width: auto; } }
#nav-utility #search #search-box form { display: flex; justify-content: center; padding: 15px; }
@media screen and (max-width: 520px) { #nav-utility #search #search-box form { padding: 0; } }
#nav-utility #search #search-box #q { border: none; line-height: 40px; background: #fff; width: 100%; flex-shrink: 100; margin-right: 10px; font-size: 1em; padding: 0 20px; }
#nav-utility #search #search-box #q:focus { outline: none; }
#nav-utility #search #search-box #submit { height: 40px; width: 70px; background: #e70; border: none; font-size: 1em; border-radius: 5px; cursor: pointer; }
#nav-utility #search #search-box #submit span { color: #fff; line-height: 40px; display: block; text-align: center; }

/*
=================================================
	contents
=================================================
*/
#contents { margin-top: 140px; }
@media screen and (max-width: 1024px) { #contents { margin-top: 70px; } }

#contents a { color: #e40; text-decoration: underline; }
#contents a:hover { text-decoration: none; }
#contents p, #contents li, #contents dt, #contents dd { line-height: 1.8em; }
@media screen and (max-width: 768px) { #contents p, #contents li, #contents dt, #contents dd { line-height: 1.6em; } }
#contents ol li { margin-left: 1.5em; list-style: decimal; }
#contents ul.list li { margin-left: 1.5em; list-style: disc; }
#contents table { width: 100%; border-collapse: collapse; margin-top: 30px; }
#contents table th, #contents table td { line-height: 1.5em; padding: 10px; border: 1px solid #ddd; vertical-align: middle; }
#contents table th { background: #942737; color: #fff; text-align: center; font-weight: bold; }
#contents table th a { color: #fff; }
#contents table.type td { text-align: center; }
#contents table.type td span { font-size: 0.8125rem; }
#contents table.type td p { font-size: 0.8125rem; line-height: 1.35em; }
#contents table.type tr td:first-child { background: #e3e9ef; font-weight: bold; width: 40%; }
#contents sup, #contents sub { line-height: 1em; }
#contents .txtNote { font-size: 0.8125rem; margin-top: 20px; margin-left: 1em; text-indent: -1em; }
#contents .serif { font-family: "Hiragino Mincho Pro", "HiraMinProN-W3", "ヒラギノ明朝 Pro W3", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
#contents .bt { margin: 20px 0; }
#contents .bt a, #contents .bt span.no-link { display: inline-block; color: #fff; text-decoration: none; line-height: 45px; background: #e70 url(../images/icon_linkAllow.png) right center no-repeat; padding-right: 45px; padding-left: 25px; font-weight: bold; border-radius: 10px; }
@media screen and (max-width: 520px) { #contents .bt a, #contents .bt span.no-link { display: block; padding-right: 15px; padding-left: 0; text-align: center; } }
#contents .bt a:hover { background-color: #e40; }
#contents .emp { color: #d00; border-bottom: 3px double #d00; }
#contents ul.bt li { display: inline-block; margin-right: 10px; }
@media screen and (max-width: 520px) { #contents ul.bt li { display: block; margin-top: 10px; margin-right: 0; } }
#contents i { margin-right: 5px; }

/*
=================================================
	footer
=================================================
*/
footer { background: #43494f; padding: 60px; }
@media screen and (max-width: 1024px) { footer { padding: 60px 30px 30px; } }
@media screen and (max-width: 520px) { footer { padding: 40px 15px 20px; } }
footer #footer { display: flex; }
@media screen and (max-width: 1024px) { footer #footer { display: block; } }
footer #footer #lcol { width: 300px; }
@media screen and (max-width: 1024px) { footer #footer #lcol { display: flex; justify-content: center; align-items: center; width: auto; } }
@media screen and (max-width: 520px) { footer #footer #lcol { display: block; } }
footer #footer #lcol #foot-logo { margin-bottom: 30px; }
@media screen and (max-width: 1024px) { footer #footer #lcol #foot-logo { margin-bottom: 0; } }
footer #footer #lcol #foot-logo a { display: block; width: 200px; line-height: 50px; background: url(../images/logo_jupaken.png) center center no-repeat; background-size: 100%; text-indent: -9999px; margin: 0 auto; }
footer #footer #lcol #foot-logo a:hover { opacity: .85; }
@media screen and (max-width: 1024px) { footer #footer #lcol #twitterArea { width: 320px; margin-left: 60px; } }
@media screen and (max-width: 520px) { footer #footer #lcol #twitterArea { width: auto; margin-left: 0; margin-top: 20px; } }
footer #footer #sitemap { width: 100%; margin-left: 20px; display: flex; flex-wrap: wrap; color: #fff; flex-shrink: 100; }
footer #footer #sitemap a { color: #fff; }
footer #footer #sitemap a:hover { text-decoration: underline; }
footer #footer #sitemap dl { width: 45%; margin: 0 0 30px 5%; }
footer #footer #sitemap dt, footer #footer #sitemap dd { line-height: 1.8em; font-size: 0.875rem; }
footer #footer #sitemap dt { font-weight: bold; margin-bottom: 8px; border-bottom: 1px solid #fff; }
footer #footer #sitemap dd ul { display: flex; flex-wrap: wrap; }
footer #footer #sitemap dd ul li { width: 50%; }
footer #footer #sitemap dd ul li a { display: block; background: url(../images/icon_sitemap.png) left center no-repeat; padding-left: 14px; }
@media screen and (max-width: 1024px) { footer #footer #sitemap { display: none; } }
footer #copyright { text-align: right; width: 100%; }
footer #copyright p { font-size: 0.625rem; line-height: 1.5em; letter-spacing: 0.05em; color: #fff; }
footer #copyright #counter { margin-bottom: 10px; }
@media screen and (max-width: 1024px) { footer #copyright { text-align: center; margin-top: 30px; } }