@charset "UTF-8";
/* CSS Document */
/*
  ------------------------------------
  ####################################
   共通要素
  ####################################
  ------------------------------------
*/
/*
  ------------------------------------
   MediaScreen指定
  ------------------------------------
*/
/*
  ------------------------------------
   ベースプロパティ
  ------------------------------------
*/
/*
  ------------------------------------
   CSSからのIMGロード
  ------------------------------------
*/
/*
  ------------------------------------
   FONT指定
  ------------------------------------
*/
/*
  ------------------------------------
   FORM設定
  ------------------------------------
*/
/*
  ------------------------------------
   Responsive指定
  ------------------------------------
*/
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline; }

/*  HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* clearfix */
.clearfix {
  overflow: hidden; }

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

* html .clearfix {
  zoom: 1; }

*:first-child + html .clearfix {
  zoom: 1; }

.wrap {
  width: 100%;
  overflow: hidden; }
  @media screen and (max-width: 768px) {
    .wrap {
      overflow: hidden;
      min-width: inherit; } }

html, body {
  width: 100%;
  background: #fff;
  color: #333333;
  font-family: 'Noto Sans JP',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-size: 14px;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  line-height: 1.5;
  -webkit-text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: transparent; }
  html a, body a {
    text-decoration: none;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    color: #333; }

.scroll_disable {
  overflow: hidden; }

/*
  ------------------------------------
   HEADER
  ------------------------------------
*/
#header {
  width: 100%;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 40px;
  top: 0;
  left: 0;
  height: 50px;
  background: #333;
  z-index: 10;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  /*--------------------------------*/
  /*--------------------------------*/ }
  #header .logo {
    display: block;
    width: 55px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }
    #header .logo img {
      width: 100%;
      display: block; }
  #header.active {
    overflow: hidden; }
    #header.active .logo {
      position: relative; }
  @media screen and (max-width: 768px) {
    #header {
      padding: 0 20px;
      height: 70px; }
      #header .logo {
        width: 60px; } }

/*
  ------------------------------------
   GROVAL-NAVIGATION
  ------------------------------------
*/
.toggle-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  font-size: 90%;
  font-family: futura-pt, sans-serif;
  letter-spacing: 3px;
  cursor: pointer; }
  .toggle-menu span {
    margin-right: 20px; }
  .toggle-menu .toggle-line {
    position: relative;
    width: 21px;
    height: 18px; }
    .toggle-menu .toggle-line em {
      width: 100%;
      height: 1px;
      background: #fff;
      position: absolute;
      display: block;
      left: 0; }
      .toggle-menu .toggle-line em:nth-child(1) {
        top: 0;
        opacity: 1;
        -webkit-transition: 0.4s ease-in;
        -o-transition: 0.4s ease-in;
        transition: 0.4s ease-in; }
      .toggle-menu .toggle-line em:nth-child(2) {
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
        transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
        left: 3px;
        opacity: 1;
        -webkit-transition: 0.4s 0.1s ease-in;
        -o-transition: 0.4s 0.1s ease-in;
        transition: 0.4s 0.1s ease-in; }
      .toggle-menu .toggle-line em:nth-child(3) {
        bottom: 0;
        opacity: 1;
        -webkit-transition: 0.4s 0.2s ease-in;
        -o-transition: 0.4s 0.2s ease-in;
        transition: 0.4s 0.2s ease-in; }
  .toggle-menu.active .toggle-line em:nth-child(1) {
    top: 0;
    opacity: 0;
    left: 20px; }
  .toggle-menu.active .toggle-line em:nth-child(2) {
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
    transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
    left: 23px;
    opacity: 0; }
  .toggle-menu.active .toggle-line em:nth-child(3) {
    bottom: 0;
    opacity: 0;
    left: 20px; }

#header.active .toggle-menu {
  color: #fff; }
  #header.active .toggle-menu .toggle-line em {
    background: #fff; }

#grovalNav {
  overflow: auto;
  position: fixed;
  width: 80%;
  height: 100vh;
  max-width: 500px;
  background: #000;
  z-index: 20;
  right: -500px;
  -webkit-transition: 0.5s 0.2s ease-in;
  -o-transition: 0.5s 0.2s ease-in;
  transition: 0.5s 0.2s ease-in;
  -webkit-transition-property: opacity,right;
  -o-transition-property: opacity,right;
  transition-property: opacity,right;
  opacity: 0.7;
  padding: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  #grovalNav .contact {
    margin-top: 40px; }
    #grovalNav .contact a {
      background: #fff;
      text-align: center;
      color: #000;
      font-family: futura-pt, sans-serif;
      font-size: 250%;
      display: block;
      padding: 10px 0;
      font-weight: 500;
      letter-spacing: 6px;
      position: relative; }
      #grovalNav .contact a:before, #grovalNav .contact a:after {
        position: absolute;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: 0.3s 0.1s;
        -o-transition: 0.3s 0.1s;
        transition: 0.3s 0.1s; }
      #grovalNav .contact a:before {
        content: "";
        position: absolute;
        width: 0;
        height: 100%;
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
        transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
        left: 0;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff; }
      #grovalNav .contact a:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        left: 50%;
        -webkit-transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1);
        transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1);
        top: 0;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff; }
      #grovalNav .contact a:hover {
        color: #fff;
        background: #000; }
        #grovalNav .contact a:hover:before, #grovalNav .contact a:hover:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%; }
  #grovalNav .close {
    display: block;
    width: 45px;
    height: 45px;
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: 0.6s 0.1s;
    -o-transition: 0.6s 0.1s;
    transition: 0.6s 0.1s;
    cursor: pointer; }
    #grovalNav .close:after, #grovalNav .close:before {
      content: "";
      position: absolute;
      background: #fff;
      width: 100%;
      height: 1px; }
    #grovalNav .close:before {
      top: 50%;
      left: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(1);
      transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(1); }
    #grovalNav .close:after {
      top: 50%;
      left: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg) scale(1);
      transform: translate3d(-50%, -50%, 0) rotate(-45deg) scale(1); }
  #grovalNav .menu a {
    color: #fff;
    font-family: futura-pt, sans-serif;
    font-size: 250%;
    display: block;
    padding: 10px 0;
    font-weight: 500;
    letter-spacing: 3px; }
  #grovalNav .menu li {
    border-bottom: 1px solid #555; }
  #grovalNav .menu span {
    font-size: 35%;
    margin-left: 20px;
    letter-spacing: 0;
    font-family: 'Noto Sans JP',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    color: #999; }
  #grovalNav .pp-menu {
    position: relative;
    padding-left: 28px;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 100%; }
    #grovalNav .pp-menu a {
      color: #fff;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s; }
    #grovalNav .pp-menu svg {
      fill: #fff;
      width: 17px;
      position: absolute;
      top: 50%;
      -webkit-transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
      transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
      left: 0;
      top: 48%;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s; }
    #grovalNav .pp-menu a:hover {
      color: #cc2b23; }
      #grovalNav .pp-menu a:hover svg {
        fill: #cc2b23;
        left: 3px; }
  #grovalNav .sns {
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    #grovalNav .sns svg {
      fill: #fff;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s; }
    #grovalNav .sns a:hover svg {
      fill: #cc2b23; }
    #grovalNav .sns li {
      width: 35px; }
      #grovalNav .sns li:not(:last-child) {
        margin-right: 25px; }
  #grovalNav.active {
    right: 0;
    opacity: 1; }
    #grovalNav.active .close {
      opacity: 1;
      visibility: visible;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
    #grovalNav.active .menu li:nth-child(1) {
      -webkit-animation: menuAnimation 0.7s ease 0.1s 1 forwards;
      animation: menuAnimation 0.7s ease 0.1s 1 forwards; }
    #grovalNav.active .menu li:nth-child(2) {
      -webkit-animation: menuAnimation 0.7s ease 0.2s 1 forwards;
      animation: menuAnimation 0.7s ease 0.2s 1 forwards; }
    #grovalNav.active .menu li:nth-child(3) {
      -webkit-animation: menuAnimation 0.7s ease 0.3s 1 forwards;
      animation: menuAnimation 0.7s ease 0.3s 1 forwards; }
    #grovalNav.active .menu li:nth-child(4) {
      -webkit-animation: menuAnimation 0.7s ease 0.4s 1 forwards;
      animation: menuAnimation 0.7s ease 0.4s 1 forwards; }
    #grovalNav.active .menu li:nth-child(5) {
      -webkit-animation: menuAnimation 0.7s ease 0.5s 1 forwards;
      animation: menuAnimation 0.7s ease 0.5s 1 forwards; }
    #grovalNav.active .menu li:nth-child(6) {
      -webkit-animation: menuAnimation 0.7s ease 0.6s 1 forwards;
      animation: menuAnimation 0.7s ease 0.6s 1 forwards; }
    #grovalNav.active .menu li:nth-child(7) {
      -webkit-animation: menuAnimation 0.7s ease 0.7s 1 forwards;
      animation: menuAnimation 0.7s ease 0.7s 1 forwards; }
    #grovalNav.active .menu li:nth-child(8) {
      -webkit-animation: menuAnimation 0.7s ease 0.8s 1 forwards;
      animation: menuAnimation 0.7s ease 0.8s 1 forwards; }
    #grovalNav.active .menu li a {
      position: relative; }
      #grovalNav.active .menu li a:before {
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        content: "";
        position: absolute;
        background: #cc2b23;
        width: 0;
        height: 3px;
        position: absolute;
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
        transform: translate3d(0, -50%, 0) rotate(0deg) scale(1);
        left: 0; }
      #grovalNav.active .menu li a:hover {
        padding-left: 15px; }
        #grovalNav.active .menu li a:hover:before {
          content: "";
          position: absolute;
          background: #cc2b23;
          width: 10px;
          height: 3px; }
  @media screen and (max-width: 768px) {
    #grovalNav {
      padding: 50px 30px; }
      #grovalNav .menu span {
        display: none; }
      #grovalNav .menu a {
        font-size: 180%; }
      #grovalNav .contact a {
        font-size: 180%; } }

#footer {
  display: block;
  width: 100%;
  background: #333;
  padding: 20px 0; }
  #footer .copy {
    font-size: 90%;
    text-align: center;
    color: #eee;
    font-family: 'Roboto Condensed', sans-serif; }

#overlay {
  position: fixed;
  height: 110vh;
  width: 110vw;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0;
  visibility: hidden;
  z-index: 15;
  -webkit-transition: 0.5s 0.2s ease-in;
  -o-transition: 0.5s 0.2s ease-in;
  transition: 0.5s 0.2s ease-in;
  -webkit-transition-property: opacity,visibility,width,-webkit-filter;
  transition-property: opacity,visibility,width,-webkit-filter;
  -o-transition-property: opacity,visibility,width,filter;
  transition-property: opacity,visibility,width,filter;
  transition-property: opacity,visibility,width,filter,-webkit-filter;
  cursor: pointer; }
  #overlay.active {
    visibility: visible;
    opacity: 0.7; }

.pc {
  display: block; }

.pc-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.pc-ib {
  display: inline-block; }

.sp,
.sp-flex,
.sp-ib {
  display: none; }

/*
  ------------------------------------
   BODY
  ------------------------------------
*/
.inner {
  max-width: 1300px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 80px;
  /*--------------------------------*/
  /*--------------------------------*/
  /*--------------------------------*/ }
  @media screen and (max-width: 1300px) {
    .inner {
      padding: 0 40px; } }
  @media screen and (max-width: 768px) {
    .inner {
      max-width: inherit;
      width: 100%; } }
  @media screen and (max-width: 480px) {
    .inner {
      padding: 0 20px; } }

/*
  ------------------------------------
   GROVAL-NAVIGATION
  ------------------------------------
*/
/*
  ------------------------------------
   FOOTER
  ------------------------------------
*/
/*
  ------------------------------------
   Tublet
  ------------------------------------
*/
@media screen and (max-width: 768px) {
  .sp-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .sp {
    display: block; }
  .sp-ib {
    display: inline-block; }
  .pc,
  .pc-flex,
  .pc-ib {
    display: none !important; } }

/*
  ------------------------------------
   Tublet Sphone
  ------------------------------------
*/