.franchise {
  overflow-x: hidden;
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 110);
  }
}
:where(.franchise) {
  .franchise__mv {
    position: relative;
    margin-bottom: calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 88);
    }
  }
  .franchise__mv-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: calc(var(--vw) * 30);
    @media screen and (max-width: 768px) {
      bottom: calc(var(--vw) * 58);
      right: 0;
      left: 0;
      margin: 0 auto;
      padding: 0 calc(var(--vw) * 30);
    }
    @media screen and (min-width: 769px) {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      gap: calc(var(--vw) * 37);
    }
  }
  .franchise__mv-text-lead {
    font-weight: 400;
    font-size: calc(var(--rem) * 20);
    letter-spacing: 1px;
    text-align: center;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 30);
      letter-spacing: 1.5px;
    }
  }
  .franchise__mv-text-sub {
    text-align: center;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    line-height: 21px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 17);
      letter-spacing: 0.85px;
      line-height: 35px;
    }
  }
  .franchise__strong-list {
    @media screen and (max-width: 768px) {
      display: flex;
      flex-wrap: nowrap;
      width: 300vw;
      margin-bottom: calc(var(--vw) * 50);
    }
    @media screen and (min-width: 769px) {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: calc(var(--vw) * 50);
      max-width: calc(var(--vw) * 1300);
      width: 100%;
      margin: 0 auto calc(var(--vw) * 233) auto;
    }
  }
  .franchise__strong-item {
    @media screen and (max-width: 768px) {
      width: 100vw;
      flex-shrink: 0;
    }
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 29);
    }
  }
  .franchise__strong-image {
    width: calc(var(--vw) * 250);
    margin-bottom: calc(var(--vw) * 19);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 400);
      margin-bottom: calc(var(--vw) * 71);
    }
  }
  .franchise__strong-title {
    color: #D5CCA6;
    margin-bottom: calc(var(--vw) * 12);
    font-size: calc(var(--rem) * 22);
    letter-spacing: 1.1px;
    line-height: 35px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 25);
      letter-spacing: 1.25px;
      line-height: 45px;
      margin-bottom: calc(var(--vw) * 17);
    }
  }
  .franchise__strong-text {
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    line-height: 22px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 0.8px;
      line-height: 31px;
    }
  }
  .franchise-message {
    position: relative;
    @media screen and (max-width: 768px) {
      display: flex;
      flex-direction: column-reverse;
      margin-bottom: calc(var(--vw) * 93);
    }
    @media screen and (min-width: 769px) {
      display: grid;
      grid-template-columns: 1fr 0.87fr;
      margin-bottom: calc(var(--vw) * 262);
    }
  }
  .franchise-message__image {
    @media screen and (max-width: 768px) {
      width: calc(var(--vw) * 329);
      margin-bottom: calc(var(--vw) * 55);
    }
  }
  .franchise-message__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--vw) * 0) calc(var(--vw) * 36);
    @media screen and (min-width: 769px) {
      padding: 0 calc(var(--vw) * 143) 0 calc(var(--vw) * 106);
    }
  }
  .franchise-message__title {
    font-family: "Rasa", serif;
    font-weight: 400;
    color: #B9B9B9;
    font-size: calc(var(--rem) * 15);
    margin-bottom: calc(var(--vw) * 22);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 30);
      margin-bottom: calc(var(--vw) * 32);
    }
  }
  .franchise-message__text-title {
    color: #B9B9B9;
    font-family: "Rasa", serif;
    font-size: calc(var(--rem) * 22);
    line-height: 35px;
    margin-bottom: calc(var(--vw) * 18);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 43);
      line-height: 55px;
      margin-bottom: calc(var(--vw) * 50);
    }
  }
  .franchise-message__text-content {
    font-size: calc(var(--rem) * 16);
    line-height: 25px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 19);
      line-height: 34px;
    }
  }
  .franchise__logo {
    position: absolute;
    @media screen and (max-width: 768px) {
      z-index: -1;
      width: calc(var(--vw) * 300);
      bottom: calc(var(--vw) * -90);
      right: calc(var(--vw) * -60);
    }
    @media screen and (min-width: 769px) {
      top: 54%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      width: calc(var(--vw) * 400);
    }
  }
  .franchise-recruit {
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 40);
      margin-bottom: calc(var(--vw) * 40);
    }
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 117);
      text-align: center;
    }
  }
  .franchise-recruit__title {
    color: #D5CCA6;
    font-weight: 400;
    font-size: calc(var(--rem) * 15);
    letter-spacing: 1px;
    margin-bottom: calc(var(--vw) * 31);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 22);
      letter-spacing: 1.1px;
      margin-bottom: calc(var(--vw) * 61);
    }
  }
  .franchise-recruit__lead {
    color: #D5CCA6;
    font-size: calc(var(--rem) * 22);
    letter-spacing: 1.1px;
    line-height: 40px;
    margin-bottom: calc(var(--vw) * 31);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 45);
      letter-spacing: 2.25px;
      line-height: 50px;
      margin-bottom: calc(var(--vw) * 56);
    }
  }
  .franchise-recruit__text {
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    line-height: 28px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 17);
      letter-spacing: 0.85px;
      line-height: 44px;
    }
    .strong {
      color: #D5CCA6;
    }
  }

  .franchise-contact {
    display: flex;
    justify-content: center;
    @media screen and (max-width: 768px) {
      width: 100%;
      margin-bottom: calc(var(--vw) * 30);
      > div {
        width: 100%;
        padding: 0 30px;
      }
    }
    p + p {
      margin-top: calc(var(--vw) * 6);
      @media screen and (min-width: 769px) {
        margin-top: calc(var(--vw) * 30);
      }
    }
    p {
      label {
        display: flex;
        justify-content: space-between;
        @media screen and (max-width: 768px) {
          flex-direction: column;
          gap: calc(var(--vw) * 8);
          font-size: calc(var(--rem) * 14);
          letter-spacing: 0.7px;
        }
        @media screen and (min-width: 769px) {
          font-size: calc(var(--rem) * 18);
          letter-spacing: 1px;
        }
      }
    }
    input, textarea {
      background: transparent;
      border: 1px solid #FFF;
      width: 100%;
      padding: calc(var(--vw) * 6) calc(var(--vw) * 15);
      @media screen and (min-width: 769px) {
        width: min(calc(var(--vw) * 760), 760px);
        margin-left: calc(var(--vw) * 80);
        padding: calc(var(--vw) * 4) calc(var(--vw) * 16);
      }
    }
    input[type=submit] {
      margin-left: auto;
      display: flex;
      background: #FFF;
      color: #373750;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s linear;
      position: relative;
      font-weight: 400;
      @media screen and (max-width: 768px) {
        font-size: calc(var(--rem) * 16);
        letter-spacing: 0.8px;
        margin-top: calc(var(--vw) * 14);
        padding: calc(var(--vw) * 12) 0;
      }
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 20);
        letter-spacing: 1px;
        padding: calc(var(--vw) * 10) 0;
        width: min(calc(var(--vw) * 760), 760px);
      }
      &:hover {
        opacity: 0.6;
      }
      &::after {
        transition: right 0.1s linear;
        width: calc(var(--vw)* 12);
        height: calc(var(--vw)* 12);
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        position: absolute;
        content: "";
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("../../images/icon_arrow-white.svg");
  
        @media screen and (min-width: 769px) {
          width: calc(var(--vw)* 17);
          height: calc(var(--vw)* 5);
        }
      }
    }
  }
}

/* 言語別スタイル */
html[lang="ja"],
html[lang="zh-CN"] {
  :where(.franchise) {
    .franchise__mv-text-lead {
      font-family: "noto-serif", serif;
      @media screen and (max-width: 768px) {
        line-height: 33px;
      }
    }
    .franchise__strong-title {
      font-family: "noto-serif", serif;
      font-size: calc(var(--rem) * 18);
      letter-spacing: 0.8px;
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 20);
        letter-spacing: 1px;
        line-height: 40px;
      }
    }
    .franchise__mv-text {
      @media screen and (max-width: 768px) {
        gap: calc(var(--vw) * 20);
      }
    }
    .franchise__mv-text-sub {
      @media screen and (max-width: 768px) {
        letter-spacing: 0.28px;
        line-height: 24px;
      }
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 16);
        letter-spacing: 0.32px;
      }
    }
    .franchise-message__text-content {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 0.28px;
      line-height: 25px;
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 16);
        letter-spacing: 0.32px;
        line-height: 30px;
      }
    }
    .franchise-recruit__text {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 0.28px;
      line-height: 20px;
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 16);
        letter-spacing: 0.32px;
        line-height: 34px;
      }
    }
    .franchise__strong-text {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 0.7px;
      line-height: 22px;
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 15);
        letter-spacing: 0.7px;
        line-height: 28px;
      }
    }
    .franchise-recruit__lead {
      font-family: "noto-serif", serif;
      font-size: calc(var(--rem) * 20);
      letter-spacing: 0.8px;
      line-height: 31px;
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 35);
        letter-spacing: 1.8px;
        line-height: 28px;
      }
    }
    .franchise-message__text-title {
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 33);
        line-height: 55px;
        margin-bottom: calc(var(--vw) * 40);
      }
    }
  }
}