@charset "utf8";


* {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 767px) {
  ._pc{ display: none; }
}

@media screen and (min-width: 768px) {
  ._sp{ display: none; }
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image: url(../img/bg.jpg);
  background-repeat: repeat-y;
  background-size: 750px;
  background-position: center;
}
@media screen and (max-width: 767px) {
  body {
    background-size: 100%;
  }
}

main {
  overflow-x: hidden;
  overflow-y: hidden;
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

section {
  width: 100%;
}

picture {
  display: block;
  height: 100%;
}

/*---------------------------
article
---------------------------*/
.article {
  width: 750px;
  height: auto;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .article {
    width: 100%;
  }
}

/*--fv--*/
.fv {
  position: relative;
}

/* -- btn_01 -- */
.btn_01 {
  position: absolute;
  display: block;
  top: 89%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}

/* -- introduction -- */
.introduction {
  margin: 60px auto;
  width: 700px;
}
@media screen and (max-width: 767px) {
  .introduction {
    margin: 8% auto;
    width: 94%;
  }
}

/* -- alert -- */
.alert {
  margin: 110px auto 0;
  width: 700px;
}
@media screen and (max-width: 767px) {
  .alert {
    margin: 14% auto 0;
    width: 94%;
  }
}

/* -- price -- */
.price {
  margin: 80px auto 0;
  width: 700px;
}
@media screen and (max-width: 767px) {
  .price {
    margin: 10% auto 0;
    width: 94%;
  }
}

/* -- flow -- */
.flow {
  margin: 110px auto 0;
  width: 700px;
}
@media screen and (max-width: 767px) {
  .flow {
    margin: 14% auto 0;
    width: 94%;
  }
}

/*  -- catch --  */
.catch {
  margin: 110px auto 0;
}
@media screen and (max-width: 767px) {
  .catch {
    margin: 14% auto 0;
  }
}

/*--information--*/
.information {
  position: relative;
  margin: 110px auto 0;
  width: 700px;
  margin-bottom: 260px;
}
@media screen and (max-width: 767px) {
  .information {
    margin: 14% auto 0;
    width: 94%;
    margin-bottom: 40%
  }
}

/* -- btn_02 -- */
.btn_02 {
  position: absolute;
  display: block;
  top: 104%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}

/* -- footer -- */
footer {
  text-align: center;
}

/*---------------------------
タブ切り替え
---------------------------*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px 0px;
  filter: drop-shadow(2px 2px 2px #b3b2b2);
}
@media screen and (max-width: 767px) {
  .tab-wrap {
    gap: calc(10vw/3.6) 0px;
  }
}

.tab-label {
  border-radius: 5px;
  cursor: pointer;
  order: -1;
}
@media screen and (max-width: 767px) {
  .tab-label {
    border-radius: calc(5vw/3.6);
  }
}

.tab-content {
  width: 100%;
  display: none;
}

.tab-switch:checked+.tab-label+.tab-content {
  display: block;
}

/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}

.tab-01,
.tab-02,
.tab-03 {
  width: 28%;
}

.tab-04,
.tab-05 {
  width: 44%;
}

/* アクティブなタブ */
.tab-switch:checked+.tab-01 {
  background-image: url("../img/btn_internal_medicine_on.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

.tab-switch:checked+.tab-02 {
  background-image: url("../img/btn_dermatology_on.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

.tab-switch:checked+.tab-03 {
  background-image: url("../img/btn_gynecology_on.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

.tab-switch:checked+.tab-04 {
  background-image: url("../img/btn_sexually_transmitted_on.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

.tab-switch:checked+.tab-05 {
  background-image: url("../img/btn_allergy_on.png");
  background-repeat: no-repeat;
  background-size: 100%;
}