@charset "utf-8";



/* CSS Document */
/******************************************************************************
 * RESET
*******************************************************************************/
a, abbr, acronym, address, applet, article, aside, audio, b, big, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video {font-size: 100%;vertical-align: baseline;white-space: normal;margin: 0;padding: 0; border: 0; outline: 0;background: transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;} ol, ul {list-style: none;} blockquote, q {quotes: none;} table {border-collapse: collapse;border-spacing: 0;} * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: 100%; } img {vertical-align: top;}



/**********************************************************************************************************************************
 * html body
**********************************************************************************************************************************/
html {height: 100%;font-size: 70%;}
body {color: #333; height:100%;font-size: 1.0rem;font-family: 'Montserrat', sans-serif, "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";line-height: 1.8;font-kerning: normal;background: url(bg.jpg) top center / cover no-repeat fixed;}
.inner{position:relative;margin:0 auto; height:100%;width:100%; }
.inner h1{ position:absolute; top:60px; left:0; right:0; margin:auto;width:87%; max-width:1100px;}
.inner h1 img{ width:100%;}
.inner .coming{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto; font-size:45px; font-weight:bold; height:210px; color:#000; text-align:center; line-height:120%;}
.inner .coming span{ font-size:18px;}
.inner .coming span a{ color:#000;}
.inner .coming span a:hover{ color:#fff;}
.inner .menu{ position:absolute; bottom:5%; margin:auto;width:100%;}
nav { display: inline-block;text-align:center; width:100%; margin:0 auto;}
nav a {
  position: relative;
  display: inline-block;
  margin: 5px 2%;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 13px;
}

nav a:hover,
nav a:focus {
  outline: none;
}
.demo-2{
  color: #fff;
  padding: 10px 0;
}


.demo-2::before {
  color: #fff;
  max-width: 0;
  padding: 9px 0;
  border-top: 1px dashed #fff;
  border-bottom: 1px dashed #fff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  content: attr(data-text);
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
}


.demo-2:hover::before,
.demo-2:focus::before {
  max-width: 100%;
  outline: none;
  text-shadow: none;
}


@media screen and (max-width:798px){
.inner h1{ top:30px;}
.inner .coming{font-size:23px;}
.inner .coming span{ font-size:18px;}
}