@charset "UTF-8";

/* =============================================================================

concept CSS

・最低価格保証用CSS「.concept-×××」

上記はここに記述する

============================================================================= */


/* .SelectorName
----------------------------------------------------------------------------- */
.concept-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}


/* 共通
----------------------------------------------------------------------------- */
.concept-txt {
  @media (width > 640px) {
    font-size: 1.5rem;
    line-height:2.4;
    letter-spacing:.10em;
  }
  @media (width <= 640px) {
    font-size: var(--tg-text-A-fs);
    font-weight:var(--tg-text-A-fw);
    line-height:var(--tg-text-A-lh);
    letter-spacing:var(--tg-text-A-ls);
  }
}

.concept-txtbox .concept-txt:not(:last-child) {
  @media (width > 640px) {
    margin-bottom: 3.2rem;
  }
  @media (width <= 640px) {
    margin-bottom: 2.4rem;
  }
}

/* .ホテルの魅力について（about）
----------------------------------------------------------------------------- */
.concept-about {
  .concept-read {
    @media (width > 640px) {
      display: flex;
      justify-content: center;
      gap: 29.8rem;
    }
    @media (width <= 640px) {
      margin-bottom: 6rem;
      display: block;
    }
  }
  .concept-read_copy {
    @media (width > 640px) {
      color: var(--cc-gold-A);
      font-size: 3rem;
      line-height: 1.5;
      letter-spacing: 0.07em;
    }
    @media (width <= 640px) {
      display: none;
    }
  }
  .concept-read .concept-img {
    @media (width > 640px) {
      width: 40rem;
      height: 26rem;
    }
    @media (width <= 640px) {
      margin-left: auto;
      width: 26rem;
      height: 16rem;
    }
  }
  .concept-wrap {
    position: relative;
    overflow: hidden;
    @media (width > 640px) {
      margin-top: -3.2rem;
      padding-bottom: 28.5rem;
    }
    @media (width <= 640px) {
    }
  }
  .concept-contents {
    @media (width > 640px) {
      display: flex;
      gap: 14rem;
    }
    @media (width <= 640px) {
      display: block;
    }
  }
  .concept-contents .concept-img {
    @media (width > 640px) {
      width: 75rem;
      height: 50rem;
    }
    @media (width <= 640px) {
      margin-bottom: 7rem;
      width: 36rem;
      height: 24rem; 
    }
  }
  .concept-txtbox {
    @media (width > 640px) {
      margin-top: 17.5rem;
    }
    @media (width <= 640px) {
      margin-top: 0;
      margin-bottom: 7.2rem;
    }
  }
  .concept-txtbox h2 {
    @media (width > 640px) {
      margin-bottom: 7.2rem;
      font-size: 2.8rem;
      line-height: 2;
      letter-spacing: 0.2em;
    }
    @media (width <= 640px) {
      margin-bottom: 3.2rem;
      font-size: 2.2rem;
      line-height: 1.8;
      letter-spacing: 0.16em;
    }
  }
  .js-infiniteloop {
    line-height: 1;
    letter-spacing: 0.07em;
    color: var(--cc-white-B);
    @media (width > 640px) {
      position: absolute;
      top: 67rem;
      z-index: -1;
      font-size: 12rem;
    }
    @media (width <= 640px) {
      position: static;
      margin-bottom: 5rem;
      font-size: 5rem;
    }
  }
  .concept-box {
    display: flex;
    align-items: flex-end;
    @media (width > 640px) {
      position: absolute;
      left: 11rem;
      bottom: 0;
      z-index: -2;
      gap: 6rem;
    }
    @media (width <= 640px) {
      position: static;
      gap: 0;
      margin-left: 3rem;
    }
  }
  .concept-box .concept-img:nth-child(1) {
    @media (width > 640px) {
      margin-bottom: 10rem;
      width: 32rem;
      height: 48rem;
    }
    @media (width <= 640px) {
      margin-bottom: 6rem;
      width: 18rem;
      height: 24rem;
    }
  }
  .concept-box .concept-img:nth-child(2) {
    @media (width > 640px) {
      width: 26rem;
      height: 20rem;
    }
    @media (width <= 640px) {
      margin-left: -2rem;
      width: 18rem;
      height: 14rem;
    }
  }
}


/* .私たちのこだわり
----------------------------------------------------------------------------- */
.concept-commitment {
  position: relative;
  .concept-ttlbox {
    @media (width > 640px) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rem;
    }
    @media (width <= 640px) {
      display: block;
      margin-left: 3rem;
      margin-bottom: 6rem;
    }
  }
  .concept-img {
    @media (width > 640px) {
      width: 75rem;
      height: 50rem;
    }
    @media (width <= 640px) {
      width: 36rem;
      height: 22.5rem;
    }
  }
  .concept-wrap:nth-child(2) {
    @media (width > 640px) {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      margin: 0 auto 18rem;
      width: 136.9rem;
    }
    @media (width <= 640px) {
      display: block;
      margin-bottom: 8rem;
    }
  }
  .concept-wrap:nth-child(2) .concept-txtbox {
    @media (width > 640px) {
      width: 59.4rem;
    }
    @media (width <= 640px) {
      width: 100%;
      margin-bottom: 6rem;
    }
  }
  .concept-wrap:nth-child(2) h3 {
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.12em;
    @media (width > 640px) {
      margin-bottom: 4.8rem;
    }
    @media (width <= 640px) {
      margin-bottom: 2.8rem;
    }
  }
  .concept-wrap:nth-child(2) .concept-read {
    @media (width > 640px) {
      margin-bottom: 4.8rem;
    }
    @media (width <= 640px) {
      margin-bottom: 2.8rem;
    }
  }
  .concept-wrap:nth-child(2) .concept-txt:nth-child(3) {
    @media (width > 640px) {
      margin-bottom: 3.2rem;
    }
    @media (width <= 640px) {
      margin-bottom: 2.4rem;
    }
  }
  .concept-wrap:nth-child(2) .concept-box .concept-img:nth-child(1) {
    @media (width > 640px) {
      margin-left: 17.2rem;
      margin-bottom: 6rem;
      width: 46rem;
      height: 30rem;
    }
    @media (width <= 640px) {
      margin-left: 11.5rem;
      margin-bottom: 4rem;
      width: 24.5rem;
      height: 16rem;
    }
  }
  .concept-wrap:nth-child(2) .concept-box .concept-img:nth-child(2) {
    @media (width > 640px) {
      width: 52rem;
      height: 30rem;
    }
    @media (width <= 640px) {
      width: 28rem;
      height: 16rem;
    }
  }
  .concept-item {
    @media (width > 640px) {
      display: flex;
      justify-content: space-between;
    }
    @media (width <= 640px) {
      display: block;
      margin-left: 3rem;
    }
  }
  .concept-item:not(:last-child) {
    @media (width > 640px) {
      margin-bottom: 16rem;
    }
    @media (width <= 640px) {
      margin-bottom: 8rem;
    }
  }
  .concept-item .concept-txtbox {
    @media (width > 640px) {
      margin-top: 9rem;
      width: 46rem;
    }
    @media (width <= 640px) {
      margin-bottom: 4.8rem;
      margin-right: 3rem;
    }
  }
  .concept-number {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.07em;
    @media (width > 640px) {
      margin-bottom: 4rem;
    }
    @media (width <= 640px) {
      margin-bottom: 2.8rem;
    }
  }
  .concept-number::before {
    content: "";
    position: absolute;
    display: block;
    width: 70px;
    height: 2px;
    background-color: var(--cc-gray_back-A);
    @media (width > 640px) {
      left: -120px;
    }
    @media (width <= 640px) {
      display: none;
    }
  }
  .concept-number::after {
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--cc-gold-A);
    @media (width > 640px) {
      left: -50px;
    }
    @media (width <= 640px) {
      left: -3rem;
    }
  }
  .concept-item .p-tg-ja_heading-A {
    @media (width > 640px) {
      margin-bottom: 5.2rem;
    }
    @media (width <= 640px) {
      margin-bottom: 3.2rem;
    }
  }
  .concept-item .concept-img {
    @media (width > 640px) {
      width: 80rem;
      height: 50rem;
    }
    @media (width <= 640px) {
      width: 36rem;
      height: 22.5rem;
    }
  }
}
.concept-commitment::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  display: block;
  height: 100%;
  background-color: var(--cc-white-B);
  @media (width > 640px) {
    width: 75%;
  }
  @media (width <= 640px) {
    width: 28rem;
  }
}

/* .動画ギャラリー
----------------------------------------------------------------------------- */
.concept-gallery {
  .l-heading-B {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      margin-bottom: 4rem;
    }
  }
  .concept-contents {
    position: relative;
    display: flex;
    justify-content: center;
    @media (width > 640px) {
      align-items: center;
      width: 100%;
      height: 40rem;
    }
    @media (width <= 640px) {
      width: 39rem;
      height: 26rem;
    }
  }
  .concept-contents:not(:last-child) {
    @media (width > 640px) {
      margin-bottom: 4rem;
    }
    @media (width <= 640px) {
      margin-bottom: 2rem;
    }
  }
  .concept-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
    }
  }
  .concept-txtbox {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--cc-white-A);
  }
  .concept-en {
    line-height: 1.4;
    letter-spacing: 0.07em;
    text-align: center;
    @media (width > 640px) {
      margin-bottom: 1.6rem;
      font-size: 4rem;
    }
    @media (width <= 640px) {
      margin-bottom: 0.4rem;
      font-size: 3.2rem;
    }
  }
  .concept-en::before {
    content: "PREMIER HOTEL-TSUBAKI-";
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
    font-family: var(--ff-beaufort);
    line-height: 1.4;
    letter-spacing: 0.07em;
  }
  .concept-ja {
    line-height: 2;
    letter-spacing: 0.2em;
    @media (width > 640px) {
      margin-bottom: 4rem;
      font-size: 2rem;
    }
    @media (width <= 640px) {
      margin-bottom: 2.4rem;
      font-size: 1.6rem;
    }
  }
  .concept-play {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid var(--cc-white-A);
    cursor: pointer;
  }
  .concept-play::before {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: var(--cc-white-A);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .concept-btn img {
    transition: transform .7s;
  }
  .concept-btn:hover img {
    @media (width > 640px) {
      transform: scale(1.04);
    }
    @media (width <= 640px) {
    }
  }

  /* モーダル */
  .modal_contents {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(28, 20, 20, 0.6);
    min-height: 100%;
    box-sizing: border-box; 
    @media (width > 640px) {
      padding: 2rem 0;
    }
    @media (width <= 640px) {
      padding: 4rem 0 0;
    }
    button {
      position: absolute;
      top: 0;
      right: 0;
      color: var(--cc-white-A);
    }
    i::before,
    i::after {
      background-color: var(--cc-white-A);
    }
  }
  .concept-movie_area {
    @media (width > 640px) {
      margin: 0 auto;
      width: 90rem;
    }
    @media (width <= 640px) {
      width: 100%;
    }
  }
  .concept-video {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.2rem;
    @media (width > 640px) {
      width: 100%;
      height: 56rem;
    }
    @media (width <= 640px) {
      width: 100%;
      aspect-ratio: 900 / 560;
    }
  }
  .focus-video {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .concept-capture span:not(:last-child) {
    @media (width > 640px) {
      padding-right: 1.6rem;
    }
    @media (width <= 640px) {
      padding-right: 0.8rem;
    }
  }
  .concept-capture .p-ff-beaufort:nth-child(1) {
    color: var(--cc-white-A);
    line-height: 1.4;
    letter-spacing: 0.07em;
    @media (width > 640px) {
      font-size: 1.4rem;
    }
    @media (width <= 640px) {
      font-size: 1.2rem;
    }
  }
  .concept-capture .p-ff-beaufort:nth-child(3) {
    color: var(--cc-white-A);
    line-height: 1.4;
    letter-spacing: 0.07em;
    @media (width > 640px) {
      font-size: 2.4rem;
    }
    @media (width <= 640px) {
      font-size: 1.6rem;
    }
  }
  .concept-capture .p-ff-serif {
    color: var(--cc-white-A);
    line-height: 2;
    letter-spacing: 0.2em;
    @media (width > 640px) {
      font-size: 1.6rem;
    }
    @media (width <= 640px) {
      font-size: 1.4rem;
    }
  }
}