/**************************************************
header
**************************************************/
header input[type="checkbox"] {
  display: none;
}

header {
  --heightLogo: 60px;
  --padding: 10px;
  position: fixed;
  top: 0px;
  width: 100%;
  padding: var(--padding) 0px 20px;
  background-color: #fff;
  filter: drop-shadow(0px 6px 4px rgba(180, 180, 180, 0.6));
  z-index: 1000;
}
header .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  width: min(90%, 1400px);
  margin-inline: auto;
}
header:has(#hamburger:checked) h1,
header:has(#hamburger:checked) address {
  z-index: -1;
}
header h1 .logo {
  display: block;
  height: var(--heightLogo);
}
header address {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
header address .area_tel {
  display: flex;
  align-items: center;
  gap: 10px;
}
header address .link_tel {
  font-size: 2.4rem;
}
header address .btn_reserve {
  margin: 0;
  margin-top: calc(var(--padding) * -1);
  padding-top: calc(var(--padding) + 10px);
  border-top: none;
  border-radius: 0 0 6px 6px;
}
header address .btn_reserve p.L::before {
  --size: 48px;
  --mask: url(../images/icon_tel24.svg) center center / contain no-repeat;
  aspect-ratio: 48 / 46;
}

/* #hamburger */
#hamburger ~ label {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--heightLogo);
  aspect-ratio: 1 / 1;
}
#hamburger ~ label::after {
  content: "MENU";
  position: absolute;
  bottom: 0;
  font-size: 12px;
  color: var(--c_trq);
}
#hamburger ~ label span {
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  width: 80%;
  height: 2px;
  display: inline-block;
  background-color: var(--c_trq);
}
#hamburger ~ label span:nth-of-type(1) {
  top: 10%;
}
#hamburger ~ label span:nth-of-type(2) {
  top: 30%;
}
#hamburger ~ label span:nth-of-type(3) {
  top: 50%;
}
#hamburger:checked ~ label::after {
  display: none;
}
#hamburger:checked ~ label span {
  top: 50%;
  background-color: var(--base_color);
}
#hamburger:checked ~ label span:nth-of-type(1) {
  rotate: -45deg;
}
#hamburger:checked ~ label span:nth-of-type(2) {
  display: none;
}
#hamburger:checked ~ label span:nth-of-type(3) {
  rotate: 45deg;
}
/* .gnav */
header nav .gnav {
  --width: 320px;
  position: fixed;
  top: 0px;
  right: calc(var(--width) * -1);
  /* right: 0px; */
  width: var(--width);
  height: 100dvh;
  padding: calc(var(--heightHeader) + 20px) 0
    calc(var(--heightFooter_sp) + 20px);
  background-color: rgba(255, 255, 255, 0.9);
  z-index: -1;
  overflow-y: scroll;
  transition: var(--transition);
}
#hamburger:checked ~ .gnav {
  right: 0px;
}
header nav .gnav a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 20px;
  color: var(--base_color);
  border-bottom: 1px solid color-mix(in srgb, var(--base_color) 30%, #fff);
}
header nav .gnav a::after {
  content: "";
  content: "expand_circle_down";
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 1;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--c_trq);
}

header nav .sitemap,
header nav .sitemap > * {
  width: 100%;
}

@media (max-width: 1100px) {
  header {
    --heightLogo: 40px;
    padding: 10px 0px;
  }
  header .wrap {
    grid-template-columns: 1fr auto;
  }
  header address {
    display: none;
  }
}

/**************************************************
#empathy
**************************************************/
#empathy .bg_line {
  --height: 160px;
}
#empathy .wrap {
  --gap: 20px;
  --flex: 50%;
}
#empathy .wrap > .figure {
  margin-left: -80px;
}
#empathy .wrap > .figure img {
  width: 600px;
}
#empathy .outer .grid_2c {
  --gap: 30px;
}
#empathy .outer .figure img {
  aspect-ratio: 280 / 200;
  border: 1px solid color-mix(in srgb, var(--c_nvy) 50%, #fff);
}
#empathy i.arrow {
  display: block;
  margin-inline: auto;
  width: 320px;
  height: auto;
  background: linear-gradient(to bottom, transparent, var(--c_trq) 100%);
  aspect-ratio: 320 / 80;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#empathy h3 {
  font-size: 3.6rem;
}
#empathy h3 em {
  font-size: 5.2rem;
}

@media (max-width: 520px) {
  #empathy .bg_line {
    --height: 100px;
  }
  #empathy .wrap {
    position: relative;
  }
  #empathy .wrap > .figure {
    position: absolute;
    left: -50px;
    bottom: var(--height);
    width: 60%;
    margin-left: 0;
    z-index: -1;
  }
  #empathy .wrap .inner {
    padding-left: 40%;
  }
  #empathy .wrap .inner .mt30 {
    margin-top: 10px;
  }
  #empathy i.arrow {
    width: 190px;
  }
}

/**************************************************
.contact
**************************************************/
.contact {
  --base_width: 755px;
}

.contact,
#benefit {
  --section: 40px;
}
.contact ~ #benefit {
  margin-top: calc(var(--section) * -1);
}

.contact::after {
  content: "";
  position: absolute;
  left: calc(((100vw - var(--base_width)) / 2) + var(--base_width) + 20px);
  bottom: 0;
  display: block;
  width: 170px;
  height: auto;
  aspect-ratio: 170 / 300;
  background: url("../images/contact.png") center center / contain no-repeat;
}
.contact .wrap::after {
  display: none;
}

.contact .link_tel {
  font-size: 4.6rem;
}
.contact .link_tel + p {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.contact .btn_reserve {
  width: 100%;
}
@media (max-width: 1100px) {
  .contact::after {
    display: none;
  }
}
@media (max-width: 520px) {
  .contact .fs28 {
    font-size: 2.2rem;
  }
  .contact .wrap {
    position: relative;
  }
  .contact .wrap::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: -40px;
    display: block;
    width: 110px;
    height: auto;
    aspect-ratio: 170 / 300;
    background: url("../images/contact.png") center center / contain no-repeat;
  }
  .contact .wrap + * {
    position: relative;
    z-index: 1;
  }
}

/**************************************************
#benefit
**************************************************/
/* .list_point */
#benefit .list_point {
  counter-reset: num 0;
  --gap: 20px;
  gap: 20px 40px;
}
#benefit .list_point li dt {
  --gap: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--gap);
  font-size: 2.4rem;
  font-family: var(--ff_jp02);
  color: var(--c_trq);
}
#benefit .list_point li dt::before {
  counter-increment: num 1;
  content: counter(num, decimal-leading-zero);
  padding-right: var(--gap);
  font-size: 6.8rem;
  font-family: var(--ff_num);
  line-height: 0.9;
  color: color-mix(in srgb, var(--c_trq_l) 40%, #fff);
  border-right: 1px solid var(--c_trq);
}
@media (max-width: 520px) {
  #benefit .list_point li dt {
    --gap: 10px;
    font-size: 2rem;
  }
  #benefit .list_point li dt::before {
    font-size: 5rem;
  }
}

/* .type_wire */
#benefit .type_wire {
  --gap: 30px;
  --flex: 51%;
  border: 1px solid color-mix(in srgb, var(--base_color) 30%, #fff);
}
#benefit .type_wire .figure img {
  aspect-ratio: 468 / 300;
}

/* .cost */
.cost_free {
  --flex: auto;
}
.cost_free .deco_circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 230px;
  margin: 0 auto;
  text-align: center;
  background-color: color-mix(in srgb, var(--c_trq_l) 60%, #fff);
  outline-offset: -15px;
  outline: 1px solid #fff;
  border-radius: 1000px;
  aspect-ratio: 1 / 1;
}
.cost_free .figure {
  width: min(90%, 400px);
}
.method.grid_2c {
  --gap: 30px;
}
.method .grid_2c {
  --gap: 10px;
}
@media (max-width: 520px) {
  .cost_free .deco_circle {
    width: 60%;
  }
}

/**************************************************
#doctor
**************************************************/
#doctor h2.titA {
  width: min(100%, 630px);
  margin: 0 auto;
}
#doctor h2.titA::after {
  content: "";
  display: block;
  width: 100%;
  height: auto;
  margin-top: 10px;
  aspect-ratio: 621 / 22;
  background: url("../images/doctor_after.svg") center center / contain
    no-repeat;
}
#doctor h2.titA span.en {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 5px;
}
#doctor h2.titA span.en::before,
#doctor h2.titA span.en::after {
  content: "";
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 237 / 2;
  background: url("../images/doctor_before.svg") center center / contain
    no-repeat;
}

/* .list_doctor */
.list_doctor li .flex_2c {
  --gap: 70px;
  --flex: 49%;
}
.list_doctor li:not(:first-child) {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px dashed;
}
.list_doctor .figure {
  --padding: 50px;
  position: relative;
  padding: 0px var(--padding) var(--padding) 0px;
}
.list_doctor .figure::before {
  content: "";
  position: absolute;
  inset: var(--padding) 0px 0px var(--padding);
  background-color: color-mix(in srgb, var(--c_trq_l) 30%, #fff);
  z-index: -1;
}
@media (max-width: 520px) {
  .list_doctor li .flex_2c {
    --gap: 30px;
  }
  .list_doctor .figure {
    --padding: 20px;
  }
}

/* .director */
.director.flex_2c {
  margin-top: 90px;
  --gap: 70px;
  --flex: 45%;
}
@media (max-width: 520px) {
  .director.flex_2c {
    --gap: 30px;
    flex-flow: column-reverse;
  }
}

/**************************************************
#case
**************************************************/
/* .list_case */
#case .list_case li {
  padding: 10px 50px 30px;
  background-color: #fff;
}
#case .list_case .inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 15px;
}
#case .list_case .inner i {
  width: 24px;
  height: auto;
  aspect-ratio: 24 / 68;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-color: color-mix(in srgb, var(--c_orn) 60%, #fff);
}
#case .list_case .inner .figure p.figcaption {
  width: 100%;
  padding: 3px 0;
  font-size: 1.8rem;
  font-family: var(--ff_jp02);
  text-align: center;
  color: #fff;
  background-color: var(--c_orn);
}
#case .list_case .inner .figure img {
  aspect-ratio: 460 / 280;
}
@media (max-width: 520px) {
  #case .list_case li {
    padding: 20px;
  }
  #case .list_case .inner {
    gap: 5px;
  }
  #case .list_case .inner i {
    width: 15px;
  }
}

/* .deco_invisalign */
#case .deco_invisalign {
  position: absolute;
  top: 0;
  right: 50px;
  translate: 0px -50%;
  width: min(30%, 324px);
}
@media (max-width: 520px) {
  #case .deco_invisalign {
    right: 20px;
  }
}

/**************************************************
.list_reason
**************************************************/
.list_reason {
  counter-reset: num 0;
}
.list_reason li .wrap {
  --gap: 60px;
  --flex: 42%;
  position: relative;
  padding-bottom: 50px;
}
.list_reason li .wrap::before {
  content: "";
  position: absolute;
  background-color: #fff;
  filter: drop-shadow(7px 7px 5px rgba(0, 0, 0, 0.2));
  z-index: -1;
}

.list_reason li:nth-child(odd) {
  padding-left: max(5%, calc((100vw - var(--base_width)) / 2));
}
.list_reason li:nth-child(odd) .inner {
  padding-right: 190px;
}
.list_reason li:nth-child(odd) .wrap::before {
  inset: 50px 0 0 200px;
}

.list_reason li:nth-child(even) {
  padding-right: max(5%, calc((100vw - var(--base_width)) / 2));
}
.list_reason li:nth-child(even) .inner {
  padding-left: 190px;
}
.list_reason li:nth-child(even) .wrap::before {
  inset: 50px 200px 0 0;
}

.list_reason li h3 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 20px;
  font-size: 2.4rem;
  font-family: var(--ff_jp02);
  letter-spacing: -1px;
  color: var(--c_trq);
  border-bottom: 1px solid color-mix(in srgb, var(--base_color) 30%, #fff);
}
.list_reason li h3 i {
  font-size: 2.4rem;
  font-family: var(--ff_en);
  text-align: center;
  line-height: 1;
  color: color-mix(in srgb, var(--c_red) 50%, #fff);
}
.list_reason li h3 i::after {
  counter-increment: num 1;
  content: counter(num, decimal-leading-zero);
  display: block;
  font-size: 6.8rem;
  font-family: var(--ff_num);
  color: var(--c_red);
}
.list_reason li .figure img {
  aspect-ratio: 518 / 380;
}

@media (max-width: 520px) {
  .list_reason li {
    padding: 0 5%;
  }
  .list_reason li .wrap {
    --gap: 20px;
    padding-bottom: 20px;
  }
  .list_reason li:nth-child(odd) .wrap::before,
  .list_reason li:nth-child(even) .wrap::before {
    inset: 20px 20px 0 -5%;
  }
  .list_reason li:nth-child(odd) .inner,
  .list_reason li:nth-child(even) .inner {
    padding-left: 0;
    padding-right: 40px;
  }

  .list_reason li h3 {
    align-items: center;
  }
  .list_reason li h3,
  .list_reason li h3 i {
    font-size: 2rem;
  }
  .list_reason li h3 i::after {
    font-size: 5rem;
  }
}

/**************************************************
.list_flow
**************************************************/
.list_flow {
  --gap: 40px;
  --grid: 4;
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(calc(100% / var(--grid) - var(--gap)), 1fr)
  );
  grid-auto-rows: min-content;
  gap: var(--gap);
  counter-reset: num 0;
}
.list_flow li:not(:first-child) {
  position: relative;
}
.list_flow li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  translate: 0 -50%;
  display: block;
  width: 18px;
  height: auto;
  aspect-ratio: 18 / 46;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-color: color-mix(in srgb, var(--c_red) 60%, #fff);
}
.list_flow li .inner {
  height: 100%;
}
.list_flow li .figure {
  position: relative;
}
.list_flow li .figure i::before {
  counter-increment: num 1;
  content: counter(num, decimal-leading-zero);
  position: absolute;
  left: 0;
  bottom: 0;
  translate: 10px 50%;
  font-size: 3.8rem;
  font-family: var(--ff_num);
  line-height: 1;
  color: var(--c_red);
}
.list_flow li .figure img {
  aspect-ratio: 245 / 176;
}
.list_flow li .richtext {
  font-size: 1.5rem;
}

/**************************************************
.list_faq
**************************************************/
.list_faq dl:hover {
  cursor: pointer;
}
.list_faq li:not(:first-child) dl {
  border-top: 1px solid color-mix(in srgb, var(--base_color) 30%, #fff);
}
.list_faq li:last-child dl {
  border-bottom: 1px solid color-mix(in srgb, var(--base_color) 30%, #fff);
}
.list_faq dl dt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  padding: 15px 20px;
  align-items: center;
  font-size: 1.8rem;
  line-height: 2;
  color: var(--c_trq);
}
.list_faq dl dt::before {
  content: "Q";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: auto;
  aspect-ratio: 1 / 1;
  font-size: 2.2rem;
  font-family: var(--ff_num);
  line-height: 1;
  color: #fff;
  background-color: var(--c_trq);
  border-radius: 1000px;
}

.list_faq dl dt::after {
  content: "add";
  font-family: "Material Symbols Outlined";
  display: inline-block;
  color: var(--base_color);
  transition: var(--transition);
}
.list_faq dl.show dt::after {
  content: "remove";
  rotate: 180deg;
}
.list_faq dl.show dd {
  border-top: 1px solid color-mix(in srgb, var(--base_color) 30%, #fff);
}
.list_faq dl dd {
  height: 0px;
  overflow: hidden;
  transition: var(--transition);
}
.list_faq dl dd .inner {
  padding: 30px;
  padding-left: 75px;
}
@media (max-width: 520px) {
  .list_faq dl dt,
  .list_faq dl dd .inner {
    padding: 20px 10px;
  }
  .list_faq dl dt {
    gap: 10px;
    line-height: 1.6;
  }
}

/**************************************************
#price
**************************************************/
#price .type_pay dt::before {
  content: "■";
  color: var(--c_orn);
}
#price .type_pay .figure {
  width: auto;
  height: 70px;
}
#price .type_pay .figure img {
  object-fit: contain;
  object-position: left;
}
@media (max-width: 520px) {
  #price .type_pay .figure {
    width: 100%;
    height: auto;
  }
}

/**************************************************
footer
**************************************************/
footer .wrap.flex_2c {
  --flex: 55%;
}
footer .wrap.flex_2c .figure {
  aspect-ratio: 670 / 350;
}
footer .inner.flex_2c {
  --flex: auto;
  --gap: 20px;
}
footer .inner .note,
footer .inner .btn_reserve {
  padding: 3px 20px;
  font-size: 1.7rem;
  border: 1px solid var(--c_nvy);
}
footer .inner .note {
  display: inline-block;
}
footer .inner .btn_reserve {
  min-width: auto;
  min-height: auto;
  border-radius: 0;
}
footer hr {
  border-top: 1px solid color-mix(in srgb, var(--base_color) 30%, #fff);
}

/**************************************************
.cost
**************************************************/
.cost_free {
  display: flex;
  align-items: center;
  gap: 50px;
}
.cost_free .deco_circle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 42px;
  text-align: center;
  background-color: color-mix(in srgb, var(--c_trq_l) 60%, #fff);
  outline-offset: -15px;
  outline: 1px solid #fff;
  border-radius: 1000px;
  aspect-ratio: 1 / 1;
}
.cost_free .figure {
  width: min(90%, 400px);
}
.method.grid_2c {
  --gap: 30px;
}
.method .grid_2c {
  --gap: 10px;
}

/**************************************************

**************************************************/
.fix_footer {
  display: none;
}
@media (max-width: 520px) {
  .fix_footer {
    position: fixed;
    bottom: 0;
    display: grid;
    grid-auto-flow: column;
    font-size: 1.8rem;
    width: 100%;
    z-index: 1000;
  }
  .fix_footer a {
    -webkit-appearance: none;
    display: grid;
    place-items: center;
    padding: 10px;
    text-align: center;
    color: var(--btn_color);
    background-color: var(--btn_bg);
  }
  .fix_footer [class*="link_"] span::before {
    --size: 1.5em;
  }
  .fix_footer .link_tel {
    --btn_color: #fff;
    --btn_bg: var(--c_nvy);
  }
  .fix_footer .link_reserve {
    --btn_color: #fff;
    --btn_bg: var(--c_trq);
  }
}