@charset "UTF-8";
@import url(reset.css);
@import url("https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700");
/*--------------------------------------
共通設定
--------------------------------------*/
body {
  position: relative;
  height: 100%;
  font-family: 'YuGothic', 'Yu Gothic', 'Yu Gothic Medium',  -apple-system, 'BlinkMacSystemFont', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'HelveticaNeue',  'Verdana', 'Meiryo', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: #000; }
  @media screen and (min-width: 781px) {
    body {
      font-size: 14px; } }

h1, h2, h3, h4 {
  font-weight: 500; }

h2 {
  font-size: 1.6em; }

h3 {
  font-size: 1.5em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.3em; }

h6 {
  font-size: 1.2em; }

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box; }

img {
  display: block;
  width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0; }

a {
  text-decoration: none;
  color: #000; }

ul {
  list-style: none; }

/*----------------------------------------------------------
common
----------------------------------------------------------*/
.inner {
  padding: 0 20px;
  margin: 0 auto; }
  @media screen and (min-width: 781px) {
    .inner {
      width: 89.604685212%; } }

.inner_s {
  max-width: 974px;
  padding: 0 30px;
  margin: 0 auto; }

.for_pc {
  display: none; }
  @media screen and (min-width: 781px) {
    .for_pc {
      display: block; } }

.for_sp {
  display: block; }
  @media screen and (min-width: 781px) {
    .for_sp {
      display: none; } }

/*----------------------------------------------------------
hover action
----------------------------------------------------------*/
@media screen and (min-width: 781px) {
  .h_opacity {
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s; }
    .h_opacity:hover {
      opacity: .8; } }

/*----------------------------------------------------------
loading
----------------------------------------------------------*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #13305E;
  opacity: 1;
  -webkit-animation: hidden .5s linear .75s forwards;
  animation: hidden .5s linear .75s forwards;
  will-change: opacity;
  z-index: 99999; }

@keyframes hidden {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    z-index: 99999; }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    z-index: -1; } }

@-webkit-keyframes hidden {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    z-index: 99999; }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    z-index: -1; } }
  .loading_loader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%; }
  .loading_img {
    position: absolute;
    top: 43%;
    left: 47%;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 40%;
    -ms-transform-origin: 50% 40%;
    transform-origin: 50% 40%;
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    -webkit-animation: loading 2s linear;
    animation: loading 2s linear; }
    @media screen and (max-width: 780px) {
      .loading_img {
        top: 38%;
        left: 35%; } }
  .loading_logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    will-change: transform;
    -webkit-animation: log_move 1s forwards;
    animation: log_move 1s forwards; }
    @media screen and (min-width: 781px) {
      .loading_logo {
        width: 10%; } }

@keyframes log_move {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes log_move {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

/*----------------------------------------------------------
animation
----------------------------------------------------------*/
.fadeinUp {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
  -webkit-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s; }

.fadeinUp.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

.fadeinDown {
  opacity: 0;
  -webkit-transform: translate(0, -50px);
  -ms-transform: translate(0, -50px);
  transform: translate(0, -50px);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }
  @media screen and (max-width: 780px) {
    .fadeinDown {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0); } }

.fadeinDown.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

.fadeinLeft {
  opacity: 0;
  -webkit-transform: translate(-40px, 0);
  -ms-transform: translate(-40px, 0);
  transform: translate(-40px, 0);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }

.fadeinLeft.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

.fadeinRight {
  opacity: 0;
  -webkit-transform: translate(40px, 0);
  -ms-transform: translate(40px, 0);
  transform: translate(40px, 0);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }

.fadeinRight.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

/*----------------------------------------------------------
footer
----------------------------------------------------------*/
.footer {
  background-color: #000000;
  padding: 30px 35px 15px 35px; }
  @media screen and (min-width: 781px) {
    .footer {
      padding: 30px 45px; } }

/*----------------------------------------------------------
f_nav
----------------------------------------------------------*/
.f_nav {
  margin: 0 0 35px 0; }
  @media screen and (min-width: 781px) {
    .f_nav {
      margin: 0 0 30px 0; } }
  .f_nav_link {
    display: inline-block;
    font-size: 12px;
    color: #fff; }
    @media screen and (min-width: 781px) {
      .f_nav_link {
        font-size: 22px;
        -webkit-transition: .2s;
        -o-transition: .2s;
        transition: .2s; }
        .f_nav_link:hover {
          opacity: .8; } }

/*----------------------------------------------------------
copyright
----------------------------------------------------------*/
.copyright {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: normal;
  display: block;
  text-align: center;
  font-size: 12px;
  color: #fff; }
  @media screen and (min-width: 781px) {
    .copyright {
      font-size: 20px; } }