// --------------------------------------------------
// 共通ファイル読み込み
// --------------------------------------------------
@use "common" as *;

// --------------------------------------------------
// accessセクション固有スタイル
// --------------------------------------------------

.access {
  &__container {
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: 70px;
  }

  &__header-title {

    // SP版
    @include mq() {
      width: getVw(184, 375);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

  &__shop-logo {

    // SP版
    @include mq() {
      width: getVw(206, 375);
    }
  }

  &__contents {
    width: 100%;
    min-height: 390px;
    display: flex;
    flex-direction: row;
    margin-top: 50px;
    justify-content: center;

    // SP版
    @include mq() {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: getVw(54);
    }

    &-info {
      background-color: #d9d9d9;
      width: 50%;
      display: flex;
      flex-direction: column;
      padding: getRatio(50, 1366) getRatio(80, 1366);

      // SP版
      @include mq() {
        width: 100%;
        padding-left: getVw(80);
      }
    }

    &-map {
      width: 50%;
      position: relative;
      border: 1px solid #FFFFFF;
      min-height: 390px;

      // SP版
      @include mq() {
        width: 100%;
        min-height: 200px;
      }

      // ラフの通りの住所（白い長方形の上に文字）
      // .address {
      //   position: absolute;
      //   top: calc((34 / 390)*100%);
      //   left: calc((46 / 682)*100%);
      //   width: 300px;
      //   height: 66px;
      //   background-color: #FFFFFF;
      //   box-shadow: 5px 5px 9px 0px rgba(0, 0, 0, 0.44);
      //   display: flex;
      //   flex-direction: row;
      //   justify-content: center;
      //   align-items: center;

      //   .text {
      //     font-size: 1.8rem;
      //     line-height: 1.7777;
      //     color: #000;
      //     font-weight: bold;
      //   }
      // }
    }
  }

  &__shop-info {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
  }

  &-info {
    display: flex;
    flex-direction: row;
    margin-top: -5px;
  }

  &__category {
    width: 8rem;
    text-align: justify;
    text-align-last: justify;
    font-size: 2rem;
    font-weight: bold;
    color: #000000;

    // SP版
    @include mq() {
      width: 56px;
      font-size: 14px;
    }

  }

  &__data {
    margin-left: 30px;
    font-size: 2rem;
    color: #414141;
    flex: 1;

    // SP版
    @include mq() {
      font-size: 14px;
    }
  }

  &__map-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &__shop-access {
    margin-top: 10px;
    font-size: 3rem;
    line-height: 1.6;
    color: #000;
    font-weight: 600;

    // SP版
    @include mq() {
      font-size: getVw(42);
    }
  }

  &__shop-data {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
  }

  &__info {
    display: flex;
    flex-direction: row;
    margin-top: -4px;
  }
}