@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@font-face {
  font-family: 'misaki gothic';
  src: url("../webfont/misaki_gothic.eot");
  src: url("../webfont/misaki_gothic.eot?#iefix") format("embedded-opentype"), url("../webfont/misaki_gothic.woff") format("woff"), url("../webfont/misaki_gothic.ttf") format("truetype");
  font-display: swap;
}

/* -------------------------------------
   parts
------------------------------------- */
/* -------------------------------------
   b_back

//@include mixin_b_back;
@mixin mixin_b_back(){
    
    .b_back{

        border-top: 1px solid $monocolor5;
        border-bottom: 1px solid $monocolor5;
        margin: 1.5em 0 2em 0;

        a,
        a:link{

            display: block;
            font-size: 1.2rem;
            text-decoration: none;
            padding: 1.5em 0 1.5em 3em;
            margin: 0;
            box-sizing: border-box;

            &:before{
                content: "\3008";
                font-size: 1.8rem;
                vertical-align: middle;
                margin: 0 1em 0 0;
            }
        }
    }
}
*/
/* -------------------------------------
   USER AREA
*/
/* =================================================
   Global layout
================================================= */
/* -----------------------------------------------
    common
----------------------------------------------- */
html {
  min-width: 100%;
}

body {
  background: url(../images/common/bg_paturn.png) center top repeat;
  background-size: 10% auto;
}

#container {
  font-size: 1.4rem;
  text-align: left;
  width: 100%;
}

#container #article {
  min-height: 100vh;
}

#container .sp img {
  display: block;
  width: 100%;
  height: auto;
}

#container .pc {
  display: none !important;
}

@keyframes charaOpacity {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes logoOpacity {
  0% {
    opacity: 0.0;
  }
  40% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

/* =================================================
   unique layout
================================================= */
/* -------------------------------------
   article
------------------------------------- */
#article {
  display: flex;
  align-items: center;
  /* -------------------------------------
       aside
    ------------------------------------- */
}

#article .aside#main {
  width: 100%;
  margin: 0 0 4rem;
  position: relative;
}

#article .aside#main .inner img {
  display: block;
  width: 100%;
  height: auto;
}

#article .aside#main .inner .h1.h1_1 a,
#article .aside#main .inner .h1.h1_1 a:link {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  position: relative;
  width: 100%;
}

#article .aside#main .inner .h1.h1_1 a span,
#article .aside#main .inner .h1.h1_1 a:link span {
  display: block;
}

#article .aside#main .inner .h1.h1_1 a span.img,
#article .aside#main .inner .h1.h1_1 a:link span.img {
  width: 67.1875%;
  animation: charaOpacity 2s 0s 1 linear;
}

#article .aside#main .inner .h1.h1_1 a span.logo,
#article .aside#main .inner .h1.h1_1 a:link span.logo {
  width: 78.125%;
  margin: 2rem 0 0;
  animation: logoOpacity 3s 0s 1 linear;
}

/* -------------------------------------
   footer
------------------------------------- */
#footer {
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0;
  /* -------------------------------------
       aside
    ------------------------------------- */
}

#footer .aside {
  /* -------------------------------------
           aside_1
        */
}

#footer .aside.aside_1 {
  width: 100%;
  height: 4rem;
  background: #E6002D;
  overflow: hidden;
}

#footer .aside.aside_1 .inner small {
  display: block;
  font-family: "misaki gothic", "Hiragino Mincho ProN", "游明朝","游明朝体",YuMincho,"Yu Mincho","Times New Roman","メイリオ",Meiryo,serif;
  letter-spacing: 0.025em;
  text-align: center;
  color: white;
  font-size: 1.0rem;
  line-height: 4.4;
  width: 93.75%;
  margin: 0 auto;
}

@font-face {
  font-family: 'misaki gothic';
  src: url("../webfont/misaki_gothic.eot");
  src: url("../webfont/misaki_gothic.eot?#iefix") format("embedded-opentype"), url("../webfont/misaki_gothic.woff") format("woff"), url("../webfont/misaki_gothic.ttf") format("truetype");
  font-display: swap;
}

/* -------------------------------------
   parts
------------------------------------- */
/* -------------------------------------
   b_back

//@include mixin_b_back;
@mixin mixin_b_back(){
    
    .b_back{

        a,
        a:link{
            font-size: 1.4rem;
            width: $inwidth;
            padding: 2em 0 2em 10px;
            margin: 0 auto;
        }
        a:hover{
            
        }
    }
}
*/
/* -------------------------------------
   b_back
*/
@media screen and (min-device-width: 767px) {
  /* =================================================
   Global layout
================================================= */
  /* -----------------------------------------------
    common
----------------------------------------------- */
  body {
    background-size: 64px auto;
  }
  #container .sp {
    display: none !important;
  }
  #container .pc {
    display: block !important;
  }
  #container .ahover {
    transition: 0.3s;
  }
  #container .ahover:hover {
    opacity: 0.6;
  }
  #container a.transhover img,
  #container a.transhover:link img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    transition: 0.5s;
  }
  #container a.transhover:hover img {
    transform: scale(1.1, 1.1) translate(-45%, -45%) !important;
    opacity: 0.6;
  }
  /* =================================================
   unique layout
================================================= */
  /* -------------------------------------
   article
------------------------------------- */
  #article {
    /* -------------------------------------
       aside
    ------------------------------------- */
  }
  #article .aside#main {
    width: 100%;
    margin: 0 0 40px;
  }
  #article .aside#main .inner {
    width: 960px;
    margin: 0 auto;
  }
  #article .aside#main .inner .h1.h1_1 a,
  #article .aside#main .inner .h1.h1_1 a:link {
    width: 500px;
    margin: 0 auto;
  }
  #article .aside#main .inner .h1.h1_1 a span.img,
  #article .aside#main .inner .h1.h1_1 a:link span.img {
    width: 430px;
  }
  #article .aside#main .inner .h1.h1_1 a span.logo,
  #article .aside#main .inner .h1.h1_1 a:link span.logo {
    width: 500px;
    margin: 20px 0 0;
  }
  /* -------------------------------------
footer
------------------------------------- */
  #footer {
    width: 100%;
    /* -------------------------------------
       aside
    ------------------------------------- */
  }
  #footer .aside {
    /* -------------------------------------
           aside_1
        */
  }
  #footer .aside.aside_1 {
    width: 100%;
    height: 40px;
  }
  #footer .aside.aside_1 .inner small {
    font-size: 1.0rem;
    line-height: 4.4em;
    width: 960px;
  }
}