@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Inter:wght@400;700&display=swap');

/*=========================
common
==========================*/
html {
  scroll-behavior: smooth;
}
#doctor {
  margin-bottom: 160px;
}
@media screen and (max-width: 767px) {
  #doctor {
    --viewport: 375;
    margin-bottom: 0;
  }
}
#doctor h1, #doctor h2, #doctor h3, #doctor h4, #doctor h5, #doctor h6, #doctor button, #doctor input, #doctor option, #doctor select, #doctor table, #doctor textarea {
  color: inherit;
}
#doctor em, strong, small {
  font-style: normal;
}
#doctor img {
  display: block;
  max-width: 100%;
  height: auto;
}
#doctor iframe {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
#doctor .container {
  margin: 0 auto;
  width: 1120px;
}
@media screen and (max-width: 767px) {
  #doctor .container {
    width: 92vw;
  }
}
#doctor .content:not(:last-child) {
  margin-bottom: 90px;
}
@media screen and (max-width: 767px) {
  #doctor .content:not(:last-child) {
    margin-bottom: calc(100vw / var(--viewport) * 15);
  }
}
#doctor .ttl_common {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #doctor .ttl_common {
    align-items: flex-start;
    gap: calc(100vw / var(--viewport) * 5);
  }
}
#doctor .ttl_common:not(:last-child) {
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  #doctor .ttl_common:not(:last-child) {
    margin-bottom: calc(100vw / var(--viewport) * 15);
  }
}
#doctor .ttl_common .en {
  line-height: calc(22 / 18);
  font-family: "din-2014", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #BBA170;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  #doctor .ttl_common .en {
    line-height: 1;
    font-size: calc(100vw / var(--viewport) * 14);
    letter-spacing: 0.1em;
  }
}
#doctor .ttl_common .ja {
  line-height: calc(32 / 28);
  font-size: 28px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #doctor .ttl_common .ja {
    line-height: calc(28 / 22);
    font-size: calc(100vw / var(--viewport) * 22);
  }
}
#doctor .txt_common {
  line-height: calc(30 / 18);
  font-size: 18px;
  color: #000;
}
@media screen and (max-width: 767px) {
  #doctor .txt_common {
    line-height: calc(24 / 14);
    font-size: calc(100vw / var(--viewport) * 14);
    color: #333;
  }
}
#doctor .txt_common:not(:last-child) {
  margin-bottom: 45px;
}
@media screen and (max-width: 767px) {
  #doctor .txt_common:not(:last-child) {
    margin-bottom: calc(100vw / var(--viewport) * 15);
  }
}

/*=========================
top
==========================*/
#doctor .top {
  height: 400px;
  background-color: #000;
}
@media screen and (max-width: 767px) {
  #doctor .top {
    height: calc(100vw / var(--viewport) * 214);
  }
}
#doctor .top .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url(../../img/doctor/bg_top.webp);
  background-repeat: no-repeat;
  background-size: auto 100%;
}
@media screen and (max-width: 767px) {
  #doctor .top .container {
    width: 100%;
    background-image: url(../../img/doctor/bg_top_sp.webp);
  }
}
#doctor .top .copy {
  margin-left: auto;
  margin-bottom: 28px;
}
@media screen and (max-width: 767px) {
  #doctor .top .copy {
    margin-bottom: 0;
    margin-right: calc(100vw / var(--viewport) * 11);
  }
}
#doctor .top h1 {
  position: relative;
  line-height: calc(64 / 48);
  font-size: 48px;
  font-weight: 700;
  color: #fff;
}
@media screen and (max-width: 767px) {
  #doctor .top h1 {
    line-height: calc(24 / 16);
    font-size: calc(100vw / var(--viewport) * 16);
  }
}
#doctor .top h1::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 0;
  display: block;
  background: #ffffff80;
  width: 100%;
  height: 1px;
}
@media screen and (max-width: 767px) {
  #doctor .top h1::after {
    bottom: calc(100vw / var(--viewport) * -7);
    width: calc(100vw / var(--viewport) * 219);
    height: calc(100vw / var(--viewport) * 1);
  }
}
#doctor .top h1:not(:last-child) {
  margin-bottom: 28px;
}
@media screen and (max-width: 767px) {
  #doctor .top h1:not(:last-child) {
    margin-bottom: calc(100vw / var(--viewport) * 14);
  }
}
#doctor .top p {
  line-height: calc(36 / 24);
  font-size: 24px;
  color: #fff;
}
@media screen and (max-width: 767px) {
  #doctor .top p {
    line-height: calc(18 / 11);
    font-size: calc(100vw / var(--viewport) * 11);
  }
}

/*=========================
strengths
==========================*/
#doctor .strengths {
  margin-top: 0;
  padding-top: 90px;
}
@media screen and (max-width: 767px) {
  #doctor .strengths {
    padding-top: calc(100vw / var(--viewport) * 30);
  }
}
#doctor .strengths:not(:last-child) {
  margin-bottom: 150px;
}
@media screen and (max-width: 767px) {
  #doctor .strengths:not(:last-child) {
    margin-bottom: calc(100vw / var(--viewport) * 20);
  }
}
#doctor .strengths_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 20px;
  counter-reset: strengths-number 0;
}
@media screen and (max-width: 767px) {
  #doctor .strengths_list {
    grid-template-columns: 1fr;
    gap: calc(100vw / var(--viewport) * 15);
    margin-left: -4vw;
    margin-right: -4vw;
    background: #EDEDED;
    padding: calc(100vw / var(--viewport) * 15);
  }
}
#doctor .strengths_item {
  display: flex;
  flex-direction: column;

}
@media screen and (max-width: 767px) {
  #doctor .strengths_item {
    box-shadow: 1px 1px 1px 0 #00000026;
    background: #fff;
    border-bottom: calc(100vw / var(--viewport) * 1.5) solid #BBA171;
  }
}
@media screen and (max-width: 767px) {
  #doctor .strengths_img {
    order: 2;
  }
}
#doctor .strengths_label {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #F2F2F0;
  padding-left: 24px;
  height: 100px;
  line-height: calc(30 / 22);
  font-size: 22px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.64px;
}
@media screen and (max-width: 767px) {
  #doctor .strengths_label {
    order: 1;
    gap: calc(100vw / var(--viewport) * 13);
    border-bottom: 0;
    padding-left: calc(100vw / var(--viewport) * 15);
    height: calc(100vw / var(--viewport) * 60);
    line-height: calc(24 / 16);
    font-size: calc(100vw / var(--viewport) * 16);
    letter-spacing: 0;
  }
}
#doctor .strengths_label::before {
  counter-increment: strengths-number 1;
  content: counter(strengths-number, decimal-leading-zero);
  position: relative;
  top: 1px;
  line-height: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #BBA171;
  letter-spacing: 1.2px;
}
@media screen and (max-width: 767px) {
  #doctor .strengths_label::before {
    top: calc(100vw / var(--viewport) * 1);
    font-size: calc(100vw / var(--viewport) * 24);
    letter-spacing: 0;
  }
}
#doctor .strengths_label:not(:last-child) {
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  #doctor .strengths_label:not(:last-child) {
    margin-bottom: 0;
  }
}
#doctor .strengths_txt {
  padding-left: 24px;
  padding-right: 24px;
  line-height: calc(30 / 18);
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  #doctor .strengths_txt {
    order: 3;
    padding: calc(100vw / var(--viewport) * 14.5) calc(100vw / var(--viewport) * 3);
    line-height: calc(20.4 / 14);
    font-size: calc(100vw / var(--viewport) * 14);
  }
}

/*=========================
flow
==========================*/
#doctor .flow_list {
  display: flex;
  flex-direction: column;
  counter-reset: flow-number 0;
}
@media screen and (max-width: 767px) {
  #doctor .flow_list {
    gap: calc(100vw / var(--viewport) * 30);
  }
}
#doctor .flow_item {
  display: grid;
  grid-template-areas:
    "img label"
    "img txt";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
}
@media screen and (max-width: 767px) {
  #doctor .flow_item {
    grid-template-areas:
      "label"
      "img"
      "txt";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}
#doctor .flow_item:nth-child(even) {
  display: grid;
  grid-template-areas:
    "label img"
    "txt img";
}
@media screen and (max-width: 767px) {
  #doctor .flow_item:nth-child(even) {
    grid-template-areas:
      "label"
      "img"
      "txt";
  }
}
#doctor .flow_img {
  grid-area: img;
}
@media screen and (max-width: 767px) {
  #doctor .flow_img:not(:last-child) {
    margin-bottom: calc(100vw / var(--viewport) * 10);
  }
}
#doctor .flow_label {
  position: relative;
  grid-area: label;
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 71px;
  margin-left: 70px;
  margin-right: 70px;
  line-height: calc(30 / 22);
  font-size: 22px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.66px;
}
@media screen and (max-width: 767px) {
  #doctor .flow_label {
    flex-direction: row;
    align-items: center;
    gap: calc(100vw / var(--viewport) * 10);
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    line-height: calc(22 / 16);
    font-size: calc(100vw / var(--viewport) * 16);
    letter-spacing: 0;
  }
}
#doctor .flow_label::before {
  counter-increment: flow-number 1;
  content: counter(flow-number);
  position: relative;
  top: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  width: 34px;
  height: 34px;
  line-height: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.64px;
}
@media screen and (max-width: 767px) {
  #doctor .flow_label::before {
    top: calc(100vw / var(--viewport) * 1);
    width: calc(100vw / var(--viewport) * 36);
    height: calc(100vw / var(--viewport) * 36);
    font-family: inherit;
    font-size: calc(100vw / var(--viewport) * 16);
    letter-spacing: 0;
  }
}
#doctor .flow_label::after {
  content: "";
  position: absolute;
  top: 50px;
  background: #BBA171;
  width: 34px;
  height: 2px;
}
@media screen and (max-width: 767px) {
  #doctor .flow_label::after {
    display: none;
  }
}
#doctor .flow_label:not(:last-child) {
  margin-bottom: 34px;
}
@media screen and (max-width: 767px) {
  #doctor .flow_label:not(:last-child) {
    margin-bottom: calc(100vw / var(--viewport) * 10);
  }
}
#doctor .flow_txt {
  grid-area: txt;
  margin-left: 70px;
  margin-right: 70px;
  line-height: calc(30 / 18);
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  #doctor .flow_txt {
    margin-left: 0;
    margin-right: 0;
    line-height: calc(20.4 / 14);
    font-size: calc(100vw / var(--viewport) * 14);
  }
}

/*=========================
for_beginner
==========================*/
@media screen and (max-width: 767px) {
  #doctor .for_beginner {
    background: #EDEDED;
    padding-top: calc(100vw / var(--viewport) * 14);
    padding-bottom: calc(100vw / var(--viewport) * 14);
  }
}
@media screen and (max-width: 767px) {
  #doctor .for_beginner .container {
    background: #fff;
    padding: calc(100vw / var(--viewport) * 15) calc(100vw / var(--viewport) * 5);
  }
}
#doctor .for_beginner_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 24px;
}
@media screen and (max-width: 767px) {
  #doctor .for_beginner_list {
    grid-template-columns: 1fr;
    gap: calc(100vw / var(--viewport) * 15);
  }
}
#doctor .for_beginner_label {
  display: flex;
  align-items: center;
  background: #F3F3F3;
  border-left: 2px solid #BBA171;
  padding-left: 24px;
  height: 99px;
  line-height: calc(27 / 18);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.72px;
}
@media screen and (max-width: 767px) {
  #doctor .for_beginner_label {
    margin-left: calc(100vw / var(--viewport) * -5);
    margin-right: calc(100vw / var(--viewport) * -5);
    border-left: calc(100vw / var(--viewport) * 2) solid #BBA171;
    padding-left: calc(100vw / var(--viewport) * 11);
    height: calc(100vw / var(--viewport) * 32);
    line-height: calc(24 / 16);
    font-family: inherit;
    font-size: calc(100vw / var(--viewport) * 16);
    color: #000;
    letter-spacing: 0;
  }
}
#doctor .for_beginner_label:not(:last-child) {
  margin-bottom: 34px;
}
@media screen and (max-width: 767px) {
  #doctor .for_beginner_label:not(:last-child) {
    margin-bottom: calc(100vw / var(--viewport) * 10);
  }
}
#doctor .for_beginner_img:not(:last-child) {
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  #doctor .for_beginner_img:not(:last-child) {
    margin-bottom: calc(100vw / var(--viewport) * 10);
  }
}
#doctor .for_beginner_txt {
  padding-left: 24px;
  padding-right: 24px;
  line-height: calc(28 / 15);
  font-family: "Inter", sans-serif;
  font-size: 15px;
}
@media screen and (max-width: 767px) {
  #doctor .for_beginner_txt {
    padding-left: 0;
    padding-right: 0;
    line-height: calc(20.4 / 14);
    font-family: inherit;
    font-size: calc(100vw / var(--viewport) * 14);
  }
}

.supervision_common {
  display: none;
}
#ft_tel {
  display: none;
}
@media screen and (max-width: 767px) {
  #footer {
    margin-top: 14px;
  }
}

/* 20260602 */
#doctor .for_beginner_label:not(:last-child) {
  margin-bottom: 15px;
}
#doctor .img + .for_beginner_txt {
  margin-top: 25px;
}
@media screen and (max-width: 767px) {
  #doctor .for_beginner_label:not(:last-child) {
    margin-bottom: 10px;
  }
  #doctor .img + .for_beginner_txt {
    margin-top: 10px;
  }
}