@charset "UTF-8";

/* -------------------------
basic
------------------------- */
* {
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-webkit-text-size-adjust:100%;
text-decoration:none;
text-shadow:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

html{
  height:100%;
  font-size:10px;
  scroll-behavior: smooth;
}
  @media screen and (min-width:768px) {
    html{
      font-size:16px;
    }
  }
  @media screen and (min-width:820px) {
    html{
      font-size:16px;
    }
  }
  @media screen and (min-width:1024px) {
    html{
      font-size:16px;
    }
  }

html,
body{min-height:100%;}
body {
font-family:'Noto Sans JP', sans-serif;
word-wrap:break-word;
font-weight:400;
color:#333;
}

img{max-width:100%;}
img.sp{}
img.pc{display:none;}
@media screen and (min-width:769px) {
  img.sp{display:none;}
  img.pc{display:inline-block;}
}


/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
layout
----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
/* header & nav
----- ----- ----- ----- ----- ----- ----- ----- */
@media screen and (max-width:768px) {
  .nav_toggle {
    display: block;
    background: #fff;
    width: 44px;
    height: 44px;
    border-radius: 44px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    cursor: pointer;
  }
    .nav_toggle span{
      display: block;
      position: absolute;
      width: 25px;
      height: 17px;
      top: calc(50% - 8.5px);
      left: calc(50% - 12.5px);
    }
      .nav_toggle span i {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #333;
        position: absolute;
        transition: transform .5s, opacity .5s;
      }
      .nav_toggle span i:nth-child(1) {
        top: 0;
      }
      .nav_toggle span i:nth-child(2) {
        top: 0;
        bottom: 0;
        margin: auto;
      }
      .nav_toggle span i:nth-child(3) {
        bottom: 0;
      }
    .nav_toggle.show{
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.35);
    }
      .nav_toggle.show span{
      }
        .nav_toggle.show span i:nth-child(1) {
          transform: translateY(7px) rotate(-45deg);
        }
        .nav_toggle.show span i:nth-child(2) {
          opacity: 0;
        }
        .nav_toggle.show span i:nth-child(3) {
          transform: translateY(-7px) rotate(45deg);
        }
  #header{
  }
    #header .inner{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity .5s, visibility .5s;
    }
    #header .inner.show {
      opacity: 1;
      visibility: visible;
      background: rgba(255, 255, 255, 0.9);
      z-index: 99;
    }
      #header .inner h1{
        padding: 22px 0;
        text-align: center;
        border-bottom: 1px solid #eaeaea;
      }
        #header .inner h1 img{
          height: 36px;
        }
      #header .inner ul{
      }
        #header .inner ul li{
          padding: 12px 0;
          border-bottom: 1px solid #eaeaea;
        }
          #header .inner ul li a{
            display: block;
            text-align: center;
            font-size: 16px;
            color: #002e55;
          }
}/* @media screen and (max-width:768px) */

@media screen and (min-width:769px){
  .nav_toggle{display: none;}
  #header{
  }
    #header .inner{
      display: flex;
      justify-content: space-between;
      max-width: 1000px;
      padding: 60px 10px 30px;
      margin: 0 auto;
    }
      #header .inner h1{
      }
      #header .inner ul{
        display: flex;
        align-items: center;
        height: 100%;
      }
        #header .inner ul li{
          padding: 0 0 0 2em;
        }
        #header .inner ul li:first-child{
          padding: 0 0 0 0em;
        }
          #header .inner ul li a{
            display: block;
            padding: 2px 0 2px 10px;
            border-left: 3px solid #002e55;
            font-weight: bold;
            color: #333;
            line-height: 1;
            transition: .2s ease-out;
          }
          #header .inner ul li a:hover{
            opacity: 0.6;
          }
}/* @media screen and (min-width:769px) */

/* footer
----- ----- ----- ----- ----- ----- ----- ----- */
#footer{
  background: #002e55;
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 1.5em;
}