@charset "UTF-8";
/* Scss Document */
/* PC用コード
*******************************************************/
@media screen and (min-width: 769px) {
  .sp {
    display: none; }

  /* HEADER
  *******************************************************/
  .header .header-inner .gnav ul.gnav__menu li:nth-child(3) a::after {
    transform: scaleX(1);
    transform-origin: left;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }

  /*ABOUT
  *******************************************************/
  #about {
    width: 100%;
    margin: 250px auto 150px; }
    #about .jp {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto 0px;
      padding: 0 0 120px; }
      #about .jp .inner {
        max-width: 680px;
        margin: 0 auto; }
        #about .jp .inner .title {
          margin-bottom: 60px;
          font-size: 20px;
          font-style: oblique;
          color: #e83817; }
        #about .jp .inner .lead {
          margin-bottom: 2em;
          font-size: 14px;
          color: #e83817; }
        #about .jp .inner .text {
          margin-bottom: 1em;
          font-size: 14px;
          color: #e83817; }
    #about .en {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto 0px;
      padding: 120px 0;
      background: #e83817; }
      #about .en .inner {
        max-width: 680px;
        margin: 0 auto; }
        #about .en .inner .title {
          margin-bottom: 60px;
          font-size: 20px;
          font-style: oblique;
          color: #fff; }
        #about .en .inner .lead {
          margin-bottom: 2em;
          font-size: 16px;
          color: #fff; }
        #about .en .inner .text {
          margin-bottom: 1em;
          font-size: 14px;
          color: #fff; }
    #about .company {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto 120px;
      padding: 120px 0px; }
      #about .company .inner {
        max-width: 680px;
        margin: 0 auto; }
        #about .company .inner .logo {
          width: 210px;
          margin-bottom: 120px; }
          #about .company .inner .logo img {
            width: 100%;
            height: auto; }
        #about .company .inner ul {
          margin-bottom: 80px; }
          #about .company .inner ul li {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px; }
            #about .company .inner ul li .left {
              width: 50%;
              font-weight: 300;
              letter-spacing: 0.2em; }
            #about .company .inner ul li .right {
              width: 50%;
              font-weight: 300;
              letter-spacing: 0.2em; }
        #about .company .inner .arrow {
          display: flex;
          flex-direction: row;
          position: relative;
          padding: 10px 0;
          color: #000;
          text-decoration: none;
          transition: 0.5s;
          font-size: 14px;
          font-weight: 300;
          /*&:hover{
          	color: #df3828;
          }*/ }
          #about .company .inner .arrow::after {
            content: "";
            background: url("../images/arrow2.png") center center no-repeat;
            background-size: cover;
            display: block;
            margin: auto 0;
            margin-left: 20px;
            width: 102px;
            height: 10px;
            transition: 0.5s; } }
/* SP用コード
*******************************************************/
@media screen and (max-width: 768px) {
  .pc {
    display: none; }

  /*ABOUT
  *******************************************************/
  #about {
    width: 100%;
    margin: 100px auto 0; }
    #about .jp {
      max-width: 700px;
      margin: 0 auto 100px;
      padding: 0 15px; }
      #about .jp .title {
        margin-bottom: 50px;
        font-size: 18px;
        font-style: oblique;
        color: #e83817; }
      #about .jp .lead {
        margin-bottom: 2em;
        font-size: 13px;
        color: #e83817; }
      #about .jp .text {
        margin-bottom: 1em;
        font-size: 13px;
        color: #e83817; }
    #about .en {
      width: 100%;
      margin: 0 auto 120px;
      padding: 70px 15px;
      background: #e83817; }
      #about .en .inner {
        max-width: 700px;
        margin: 0 auto; }
        #about .en .inner .title {
          margin-bottom: 50px;
          font-size: 18px;
          font-style: oblique;
          color: #fff; }
        #about .en .inner .lead {
          margin-bottom: 2em;
          font-size: 13px;
          color: #fff; }
        #about .en .inner .text {
          margin-bottom: 1em;
          font-size: 13px;
          color: #fff; }
    #about .company {
      width: 100%;
      max-width: 700px;
      margin: 0 auto 100px;
      padding: 0 15px; }
      #about .company .logo {
        width: 120px;
        margin-bottom: 80px; }
        #about .company .logo img {
          width: 100%;
          height: auto; }
      #about .company ul {
        margin-bottom: 50px; }
        #about .company ul li {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px; }
          #about .company ul li .left {
            width: 50%;
            font-weight: 300;
            letter-spacing: 0.2em; }
          #about .company ul li .right {
            width: 50%;
            font-weight: 300;
            letter-spacing: 0.2em; }
      #about .company .arrow {
        display: flex;
        flex-direction: row;
        position: relative;
        padding: 10px 0;
        color: #000;
        text-decoration: none;
        transition: 0.5s;
        font-size: 13px;
        font-weight: 300; }
        #about .company .arrow::after {
          content: "";
          background: url("../images/arrow2.png") center center no-repeat;
          background-size: cover;
          display: block;
          margin: auto 0;
          margin-left: 20px;
          width: 102px;
          height: 10px;
          transition: 0.5s; }
        #about .company .arrow:hover {
          color: #df3828; } }