/* Base layout
======================================================================= */
html{ height: 100%; scroll-behavior: smooth; }
body { height: 100%; color: #000000; background-color: #858585; text-align: center; }

a:link    { color: #0040c0; text-decoration: none; }
a:visited { color: #4080e0; text-decoration: none; }
a:hover   { color: #0040c0; text-decoration: underline; }

div.decor { background: #ffffff url(/assets/images/decor.png) repeat-x; }
div.decor div.keyvisual { position: relative; overflow: hidden; background-position: center center; background-repeat: no-repeat; }

/* div#wrapper
----------------------------------------------------------------------- */
div#wrapper { margin: 0 auto -194px auto; width: 900px; height: auto !important; height: 100%; min-height: 100%; background-color: #ffffff; text-align: left; }

/* div#header
----------------------------------------------------------------------- */
div#header { position: relative; height: 166px; }
div#header div.decor { padding-bottom: 10px; background-position: left bottom; }
div#header div.decor div.keyvisual { height: 20px; }
div#header div.decor div.keyvisual span { display: none; }
div#header h1 { position: absolute; top: 81px; left: 50px; }
div#header hr { display: none; }

/* #burger
----------------------------------------------------------------------- */
#burger {
  display: none;
  appearance: none;
  cursor: pointer;
}

/* div#main
----------------------------------------------------------------------- */
div#main { margin-bottom: 30px; }
div#twitter { margin-left: 150px; }

/* div#gnav
----------------------------------------------------------------------- */
div#gnav { margin: 20px 0 0 -120px; position: relative; float: left; width: 420px; overflow: hidden; background: url(/assets/images/gnav_slit.png) right center no-repeat; }
div#gnav div.bfr { height: 30px; background: url(/assets/images/gnav_slit_bfr.png) right top no-repeat; }
div#gnav div.aft { height: 30px; background: url(/assets/images/gnav_slit_aft.png) right bottom no-repeat; }
div#gnav hr { display: none; }

div#gnav ul { margin-right: 29px; width: 391px; line-height: 1; overflow: hidden; list-style: none; font-weight: bold; font-size: 129%; text-align: right; }
div#gnav ul li { clear: right; }
div#gnav ul li a { margin-bottom: 1px; padding: 8px 15px 9px 28px; display: block; float: right; color: #ffffff; background: #9d9d9d url(/assets/images/gnav_bar.gif) 1px top repeat-y; text-decoration: none; }
div#gnav ul li a:focus { outline: none; }
div#gnav ul li a.pink    { background-color: #e40672; }
div#gnav ul li a.orange  { background-color: #ff9900; }
div#gnav ul li a.green   { background-color: #339900; }
div#gnav ul li a.aqua    { background-color: #0088ce; }
div#gnav ul li a.purple  { background-color: #663399; }
div#gnav ul li a.twitter { background-color: #858585; }
div#gnav ul li a.twitter span { margin: -2px 0; display: block; background: url(/assets/images/gnav_twitter.png) no-repeat; width: 107px; height: 22px; text-align: left; text-indent: -9999px; overflow: hidden; cursor: pointer; }

/* div#content
----------------------------------------------------------------------- */
div#content { margin-right: 50px; display: inline; float: right; width: 530px; }

div#content h2.subheading { margin: 45px 0 1.5em 0; padding-bottom: 5px; border-bottom: 1px solid #858585; position: relative; height: 1.25em; line-height: 1.25; color: #505050; font-weight: bold; font-size: 170%; }
div#content h2.subheading span { padding-bottom: 5px; border-bottom: 5px solid #858585; display: block; position: absolute; bottom: -5px; letter-spacing: 2px; }
* html div#content h2.subheading span { bottom: -6px; }

div#content div.plugin { margin-top: -1.5em; margin-bottom: 1.5em; line-height: 1.25; color: #505050; font-size: 86%; }
div#content h3.stdh { margin: 2em 0 1em 0; padding: 8px; border-width: 1px 1px 1px 4px; border-style: solid; border-color: #b6b6b6; line-height: 1.25; color: #505050; background: url(/assets/images/bg_stdh.png) repeat-x; font-size: 114%; letter-spacing: 0; }
*:first-child+html div#content h3.stdh { background-position: left 1px; }
* html div#content h3.stdh { background-position: left 1px; }

/* div#gotop
----------------------------------------------------------------------- */
div#gotop { margin-bottom: -8px; background-color: #ffffff; }
div#gotop a { display: block; position: relative; height: 32px; line-height: 1.25; color: #6a6a6a; font-size: 86%; text-align: center; text-decoration: none; cursor: pointer; }
div#gotop a:focus { outline: none; }
div#gotop a span.str { display: block; position: absolute; right: 30px; bottom: 13px; }
div#gotop a span.arw { border-left: 1px solid #ffffff; display: block; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: #b6b6b6 url(/assets/images/arw_gotop.png) center 6px no-repeat; }

/* div#footer
----------------------------------------------------------------------- */
div#footer, .push { height: 194px; }
div#footer { margin: 0 auto; width: 900px; position: relative; background-color: #858585; }
div#footer hr { display: none; }

div#footer div.decor { padding-top: 10px; border-bottom: 1px solid #646464; background-position: left top; }
div#footer div.decor div.keyvisual { height: 120px; text-align: left; }
div#footer div.decor div.keyvisual span { padding: 3px; display: block; position: absolute; left: 0; bottom: 0; line-height: 1.25; background: url(/assets/images/translucent_white.png); font-family: verdana, arial, sans-serif; font-size: 71%; }
div#footer div.decor div.keyvisual span a { color: #000000; }

div#footer div.sig { padding: 11px 124px 0 0; position: relative; }
div#footer div.sig address { color: #ffffff; font-family: verdana, arial, sans-serif; font-size: 71%; text-align: right; }
div#footer div.sig a { padding-left: 8px; border-left: 1px solid #646464; display: block; position: absolute; right: 0; top: 8px; }
div#footer div.sig a:focus { outline: none; }
div#footer div.sig img { line-height: 1; vertical-align: bottom; }

div#footer p.validation { position: absolute; bottom: 10px; left: 0; }
div#footer p.validation a:focus { outline: none; }
div#footer p.validation img { line-height: 1; vertical-align: bottom; }


/* --------------------------------------
モバイル
-------------------------------------- */
@media (max-width: 940px) {
  html {
    font-size: min(14px, 3.5vw);
  }
  body {
    font-size: 100%;
  }
  div#wrapper {
    margin-bottom: max(-194px, calc(-154px - 12vw));
    width: auto;
  }
  div#header {
    height: min(166px, calc(15.11vw + 30px));
    h1 {
      left: 0;
      top: min(81px, calc(5.67vw + 30px));
      margin: 0 1.5rem;
      width:min(500px, 55.56vw);
      img {
        width: 100%;
        height: auto;
      }
    }
  }
  #burger {
    display: block;
    position: fixed;
    top: calc(30px + 1rem);
    right: 1rem;
    z-index: 10000;
    width: min(48px, 12vw);
    height: min(48px, 12vw);
    &::before,
    &::after {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      background-size: cover;
      transition: 0.3s;
    }
    &::before {
      opacity: 1;
      background-image: url(/assets/images/menu_open.svg);
    }
    &::after {
      opacity: 0;
      background-image: url(/assets/images/menu_close.svg);
    }
    &:checked {
      &::before {
        opacity: 0;
      }
      &::after {
        opacity: 1;
      }
    }
    &:checked {
      ~ div#main {
        div#gnav {
          opacity: 1;
          right: 0;
          ul {
            padding-left: 0;
          }
        }
      }
    }
  }
  div#gnav {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100vw;
    z-index: 9999;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    width: 100%;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(0.5rem);
    transition: opacity 0.3s;
    div.bfr,
    div.aft {
      display: none;
    }
    ul {
      margin: 0;
      padding-left: 20%;
      width: 100%;
      overflow-y: auto;
      line-height: 1.5;
      text-align: left;
      font-size: 1.5rem;
      transition: 0.3s;
      li {
        a {
          float: none;
          margin-bottom: 0;
          padding: 1em 1.5em 1em;
        }
      }
    }
  }
  div#content {
    display: block;
    float: none;
    margin: 0 1.5rem;
    width: auto;
    h2.subheading {
      margin-top: min(45px, 8vw);
    }
  }
  div#footer {
    width: auto;
    height: min(194px, calc(154px + 12vw));
    div.sig {
      margin: 0 0.75rem;
      padding-top: min(11px, 4vw);
      padding-right: min(124px, calc(26.75vw + 17px));
      a {
        width: min(107px, 26.75vw);
        img {
          width: 100%;
          height: auto;
        }
      }
    }
    p.validation {
      bottom: min(10px, 4vw);
      margin: 0 0.75rem;
      a {
        display: block;
        width: min(113px, 28.25vw);
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
}