.purpose_nav {
  background: url(purpose_nav_bg.webp) 50% 50% repeat;
  position: relative;
  z-index: 5; }
  .purpose_nav ul {
    max-width: 1200px;
    margin: auto;
    list-style-image: none;
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-between; }
    @media only screen and (max-width: 767px) {
      .purpose_nav ul {
        flex-wrap: wrap;
        justify-content: center; } }
    .purpose_nav ul li {
      flex-grow: 100;
      margin: 0;
      width: 100%; }
      @media only screen and (max-width: 767px) {
        .purpose_nav ul li {
          width: 33.3%; } }
      .purpose_nav ul li:first-child a {
        background: #e7b4487a; }
      .purpose_nav ul li a {
        transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: block;
        text-decoration: none;
        color: #38322c;
        padding: 40px 0 30px;
        box-sizing: border-box;
        position: relative; }
        @media only screen and (max-width: 1199px) {
          .purpose_nav ul li a {
            padding: 3.33vw 0 2.5vw; } }
        @media only screen and (max-width: 767px) {
          .purpose_nav ul li a {
            padding: 2vw 0 1.5vw; } }
        .purpose_nav ul li a::after {
          content: "";
          display: block;
          width: 2px;
          background: #dbcdae;
          height: 80%;
          position: absolute;
          right: -1px;
          top: 10%; }
        .purpose_nav ul li a:hover, .purpose_nav ul li a:active {
          background: #493e36; }
          .purpose_nav ul li a:hover::after, .purpose_nav ul li a:active::after {
            content: none; }
          .purpose_nav ul li a:hover .purpose_nav_img, .purpose_nav ul li a:active .purpose_nav_img {
            transform: rotateY(0deg) scale(1.2); }
            .purpose_nav ul li a:hover .purpose_nav_img img, .purpose_nav ul li a:active .purpose_nav_img img {
              filter: brightness(0) invert(1); }
          .purpose_nav ul li a:hover .purpose_nav_title, .purpose_nav ul li a:active .purpose_nav_title {
            color: #ffffff; }
        .purpose_nav ul li a .purpose_nav_img {
          height: 50px;
          position: relative;
          transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transform: rotateY(360deg) scale(1);
          transform-origin: 50% 50%;
          z-index: 1; }
          @media only screen and (max-width: 1199px) {
            .purpose_nav ul li a .purpose_nav_img {
              height: 4.16vw; } }
          @media only screen and (max-width: 767px) {
            .purpose_nav ul li a .purpose_nav_img {
              height: 6vw; } }
          .purpose_nav ul li a .purpose_nav_img img {
            transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block; }
        .purpose_nav ul li a .purpose_nav_title {
          text-align: center;
          letter-spacing: 0.08ex;
          font-family: "Zen Old Mincho", serif;
          font-weight: 900;
          font-size: 150%;
          line-height: 1.2;
          margin-top: 1ex;
          transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
          @media only screen and (max-width: 1199px) {
            .purpose_nav ul li a .purpose_nav_title {
              font-size: 2vw; } }
          @media only screen and (max-width: 767px) {
            .purpose_nav ul li a .purpose_nav_title {
              font-size: 3vw; } }
      .purpose_nav ul li:last-child a::after {
        content: none; }

/*# sourceMappingURL=purpose_nav.css.map */