@charset "UTF-8";
/* CSS Document */


/* Font Include */
@font-face { font-family: 'Noto Serif Japanese'; font-style: normal; font-weight: 400; src: url('../fonts/notoserif-r.woff') format('woff'); font-display: swap; }


/* Reset */
* { zoom: 1; }
html, body, h1, h2, h3, h4, h5, h6, p, pre, address, ul, ol, li, dl, dt, em, dd, caption, img, form
{ margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; list-style-type: none; }
img { vertical-align: bottom; }
hr { display: none; }
a { color: #06C; text-decoration: none; }
a:hover { color: #C00; }


/* Common */
html, body, #wrap { height: 100%; }
body { font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "Helvetica", "Verdana", sans-serif; font-size: 14px; line-height: 1.6; color: #333; -webkit-text-size-adjust: none; }
@media only screen and (max-width: 680px) {
  body { font-size: 13px; line-height: 1.4; }
}
#wrap { height: 100%; min-height: 100%; margin: 0 auto; position: relative; }
body > #wrap { height: auto; min-height: 100%; }
#container { zoom: 1; overflow: hidden; }
#container:after { content: ""; display: block; clear: both; }
noscript p { line-height: 1.2em; text-align: center; font-weight: bold; color: #FFF; padding: .8em 0; background: #C00; }
.mincho { font-family: "Noto Serif Japanese", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
.clearfix { zoom: 1; overflow: hidden; }
.clearfix:after { content: ""; display: block; clear: both; }


/* Header */
header { width: 100%; padding: 1.5em 0; background: rgba(255,255,255,0.9); box-shadow: 0 0 .8em 0 rgba(0,0,0,0.5); position: fixed; transition: .3s; z-index: 100; }
.slimhead { padding: .5em 0; }
#headbox { width: 94%; max-width: 920px; margin: 0 auto; }
header h1 { width: 40%; height: auto; }
header h1 img { width: 100%; height: auto; }
header h1 a:hover { opacity: .8; }
@media only screen and (max-width: 768px) {
  header { padding: .5em 0; }
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
  header h1 { width: 50%; }
}
@media only screen and (max-width: 680px) and (orientation: portrait) {
  header h1 { width: 260px; }
}


/* Navigation */
.menu { width: 30px; height: 24px; position: fixed; top: 2em; right: 2%; z-index: 200; transition: .3s; cursor: pointer; } 
.slimmenu { top: 1em; }
.menu__line { width: 100%; height: 4px; background: #05A; display: block; position: absolute; transition: transform .3s; }
.menu__line--center { top: 10px; }
.menu__line--bottom { bottom: 0; }
.menu__line--top.active { top: 10px; transform: rotate(45deg); }
.menu__line--center.active { transform: scaleX(0); }
.menu__line--bottom.active { bottom: 10px; transform: rotate(135deg); }

.gnav { width: 100%; height: 100%; background: rgba(255,255,255,0.9); display: none; position: fixed; z-index: 101; }
.gnav__wrap { width: 100%; height: 100%; align-items: center; justify-content: center; display: flex; position: absolute; }
.gnav__menu__item { margin: 2.5em 0; }
.gnav__menu__item a { font-size: 1.8em; text-decoration: none; color: #05A; padding: 1em; transition: .5s; }
.gnav__menu__item a:hover { color: #900; }
@media only screen and (max-width: 768px) {
  .menu { top: .6em; }
}


/* Contents */
article { padding-top: 6em; }
@media only screen and (max-width: 768px) and (orientation: portrait) {
  article { padding-top: 4em; }
}
@media only screen and (max-width: 680px) {
  article { padding-top: 3em; }
}


/* Footer */
footer { width: 100%; position: absolute; bottom: 0; }

#colophon { padding: 1em 0; background: #DDD; }
#colophon dl { width: 94%; max-width: 900px; margin: 0 auto; position: relative; }
#colophon dl dt { font-size: 135%; line-height: 1.2; font-weight: bold; position: absolute;}
#colophon dl dd { padding: .2em 0 .2em 7em; }
#colophon dl dd span { padding-left: 1em; }
#colophon dl dd strong { font-weight: normal; }
address { font-size: 93%; line-height: 1.2; color: #666; width: 94%; max-width: 900px; margin: 0 auto; padding: .6em 0; }
address a { color: #666; }
address a:hover { color: #666; text-decoration: underline; }
@media only screen and (max-width: 680px) {
  #colophon dl dt { position: relative; }
  #colophon dl dd { padding: .3em 0 0 0; }
}
@media only screen and (max-width: 680px) and (orientation: portrait) {
  #colophon dl dd span { padding-left: 0; }
  #colophon dl dd span:before { content: "\A"; white-space: pre; }
}


/* Return Button */
#returnbtn { width: 80px; height: 80px; position: fixed; bottom: 0; right: 10px; z-index: 50; }
#returnbtn img { width: 100%; height: auto; }
#returnbtn a:hover img { margin-top: .5em; transition: .2s; }
@media only screen and (max-width: 768px) {
	#returnbtn { width: 60px; height: 60px; }
}