@charset "utf-8";
/**
 * style.css
 * 
 * @version  1.0
 * @author   ADVANCED INFORMATION DESIGN Co.,Ltd.
 */

/* Reset default browser CSS */
*{ margin: 0; padding: 0; }
body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
table { border-collapse: collapse; border-spacing: 2px; background: transparent; }
table, input, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
ul, ol { list-style-position: inside }
img { border: none; vertical-align: bottom; }
hr { border: none; }

/* Font configuration */
body { color: #333f48; font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Arial, 'ＭＳ Ｐゴシック', 'MS PGothic', Osaka, sans-serif; font-size: 100%; }

a { color: #2e71b3; text-decoration: underline; }
a:link { color: #2e71b3; text-decoration: underline; }
a:hover { color: #2e71b3; text-decoration: none; }

/* Common settings */
img { user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -khtml-user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -webkit-touch-callout: none; }
a img { background: none!important; }
a:hover img { opacity: 0.85; filter:alpha(opacity=85); -ms-filter: 'alpha( opacity=85)'; background: none!important; }

/* Common classes */
.mb1 { margin-bottom: 1em !important; }
.mb2 { margin-bottom: 20px; !important; }
.mb4 { margin-bottom: 40px; !important; }
.fl { float: left; }
.fr { float: right; }
.txtl { text-align: left; }
.txtc { text-align: center; }
.txtr, .justifyright { text-align: right; }
.clear { clear: both; }
.clearfix:after { display: block; clear: both; content: ''; }
.clearfix { width:100%; }	/* clearfix IE 6, 7 */
small.caution { padding-left: 1.3em; line-height: 1.5em; text-indent: -1.3em; }
small.caution:before { margin-right: 0.2em; content: '※'; }

/* Structure */
body * { line-height: 1.5em; }

#main { display: table-cell; position: relative; width: 100vw; height: 100vh; vertical-align: middle; }
#main h1 { position: relative; top: 60px; width: 400px; height: 60px; margin: 40px auto 0 auto; text-align: center; z-index: 1; }
#main h1 img { margin-left: -70px; }

#gnavi_index { position: relative; top: -40px; z-index: 1; }
#gnavi_index ul { width: 600px; margin: 0 auto; }
#gnavi_index ul li { width: 270px; list-style: none; }
#gnavi_index ul li#gn01 { float: left; }
#gnavi_index ul li#gn02 { float: right; }
#gnavi_index ul li a { display: block; padding: 0.3em 0.5em; border-radius: 3px; background: #fff url('images/bg_article.png') no-repeat 97% 50%; color: #333f48; text-decoration: none; font-size: 130%; opacity: 0.7; }
#gnavi_index ul li a:hover { color: #009646; opacity: 1; }

div#search_box { width: 588px; margin: 60px auto 0 auto; border: 6px solid rgba(255,255,255, 0.3); border-radius: 3px; background-color: rgba(255,255,255, 0.7); z-index: 1; }
div#search_box * { margin: 0; padding: 0; }
div#search_box form { position: relative; }
div#search_box input[name="q"] { width: calc(100% - 10px) !important; height: 34px; padding: 0 5px !important; border: none !important; border-radius: 3px; line-height: 34px; }
div#search_box input[name="sa"] { position: absolute; top: -6px; right: -6px; width: 37px; height: 37px; border: none !important; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: #17a23d url('images/bg_search.png') no-repeat center center; background-size: 60%; }
div#search_box input[name="sa"]:hover { background-color: #3ab072; cursor: pointer; }

#emg { width: 600px; height: 30vh; margin: 60px auto 0 auto; border: #ad002d solid 2px; border-radius: 4px; overflow-x: hidden; overflow-y: scroll; background: #fff0ed; }
#emg h2 { margin-bottom: 0 !important; padding: 5px 10px; background: #ad002d; color: #fff; font-size: 130%; }
#emg dl { padding: 20px; background: #fff0ed; }
#emg dl dt { margin-bottom: 10px; border-bottom: #ad002d dotted 1px; font-size: 120%; font-weight: bold; }
#emg dl dt span { display: block; color: #999; font-size: 75%; font-weight: normal !important; }

div#topimage { position: fixed; top: 0; width: 100vw; height: 100vh; z-index: 0; }
div#topimage ul { position: relative; }
div#topimage ul li { list-style: none; }
div#topimage li { position:absolute; height: 100vh; background-attachment: fixed; background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; }

p#logo_dl { position: absolute; bottom: 3em; left: 40px; font-size: 90%; line-height: 1em; z-index: 1; }
p#copyright { position: absolute; bottom: 1em; left: 40px; color: #fff; font-size: 90%; line-height: 1em; z-index: 1; }

@media only screen and (max-width: 640px) {
  * { position: static !important; }
  body { height: auto !important; }
  
  #main { display: block; }
  #main h1 { top: 0; width: 100%; height: auto; margin: 0 auto; padding: 50px 0; }
  #main h1 img { margin-left: 0; }
  
  #gnavi_index { width: calc(100% - 20px); padding: 0 10px; }
  #gnavi_index ul { width: 100%; }
  #gnavi_index ul li { width: calc(50% - 5px); text-align: center; }
  #gnavi_index ul li a { padding: 1em 0.5em; }
  
  div#search_box { width: calc(100% - 12px); margin: 30px auto 0 auto; }
  div#search_box form { position: relative !important; }
  div#search_box input[name="q"] { height: 48px; line-height: 48px; }
  div#search_box input[name="sa"] { position: absolute !important; top: -6px; right: -6px; width: 37px; height: 37px; }
  
  #emg { width: calc(100% - 4px); height: auto; margin: 30px auto 0 auto; overflow: auto; }
  #emg dl { padding: 10px; }
  
  div#topimage { display: none; }
  
  p#logo_dl { margin-top: 50px; text-align: center; }
  p#copyright { margin-top: 10px; text-align: center; }
}

@media only screen and (max-width: 400px) {
  #main h1 img { width: 80%; height: auto; }
}