@charset "utf-8";

/* タブ全体（写真とテキストを囲んでいるボックス）の設定 ----------------------------------------*/
.tab-switch {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 0 80px 0;
}

@media screen and (max-width: 767px) {
  .tab-switch {
    padding: 20px 0 15vw 0;
  }
}

/* タイトル部分の設定 -----------------------------------*/
.tab-title {
  text-align: center;
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 24px;
}

@media screen and (max-width: 767px) {
  .tab-title {
    font-size: 4vw;
    margin-bottom: 4.8vw;
  }
}

/* タブの写真部分の設定 -----------------------------------*/
.tab-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;

  .tab-picture {
    max-width: 280px;
    margin: 0 auto;
    border-bottom: #ededed 3px solid;
  }

  .tab-image {
    cursor: pointer;
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .tab-image {
    max-width: 23.33vw;
  }
}

/* タブのテキスト部分の設定 -----------------------------------*/
.tab-content {
  width: 60%;
  margin: 0 auto;
  padding-top: 56px;

  .tab-text {
    display: none;

    dt {
      font-size: 24px;
      font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3",
        "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "MS Ｐ明朝",
        "MS 明朝", serif;
      font-weight: normal;
      margin-bottom: 24px;
      padding: 16px 0;
      border: 1px solid #ededed;
      border-right: 0;
      border-left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    dd {
      font-size: 16px;
      margin-left: 0;
    }
  }
}

@media screen and (max-width: 767px) {
  .tab-content {
    width: 100%;
    padding: 24px 7.46vw 0 7.46vw;

    .tab-text {
      dt {
        font-size: 3.73vw;
        margin-bottom: 4.26vw;
        padding: 3.2vw 0;
        border: 1px solid #ededed;
        border-right: 0;
        border-left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      dd {
        font-size: 3.46vw;
        margin-left: 0;
      }
    }
  }
}

/* アクティブ時の挙動 -----------------------------------*/

.tab-picture.active {
  border-color: #15243f;
  transition: 0.5s ease-out;
}

.tab-text.active {
  display: block;
}