/* #header
----------------------------------- */
#header {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  position: fixed;
  width: 100%;
  background: #FFF;
  z-index: 1;
}
#header.is-active {
  display: block;
  transform: translateY(0);
}
@media screen and (max-width: 768px) {
  #header {
    display: block;
    transform: none;
    top: 0;
  }
}

/* #viContainer
----------------------------------- */
#viContainer .vi_logos {
  display: grid;
  position: absolute;
  top: 13.9vw;
  left: 18.8vw;
  right: 18.8vw;
  place-content: center;
  place-items: center;
  color: #FFF;
  gap: clamp(1rem, 2.1vw, 3rem);
}
#viContainer .vi_logos .logo {
  font-size: clamp(1.4rem, 1.7vw, 2.4rem);
}
#viContainer .vi_logos .lead {
  text-align: center;
  margin-top: clamp(1rem, 2.8vw, 4rem);
  font-size: clamp(1.8rem, 1.8vw, 2.6rem);
}
#viContainer nav {
  display: flex;
  align-items: center;
  background: #FFF;
  width: fit-content;
  margin: 0 auto;
  padding: clamp(3rem, 3.5vw, 5rem) clamp(3rem, 4.9vw, 7rem);
  padding-bottom: 0;
  transform: translateY(calc(-50% - clamp(1.5rem, 1.7vw, 2.5rem)));
}
#viContainer nav .nav {
  display: flex;
  align-items: center;
  gap: 0 clamp(1rem, 2.1vw, 3rem);
  margin-right: clamp(1rem, 2.8vw, 4rem);
  height: 100%;
}
#viContainer nav .nav > li {
  font-size: clamp(1rem, 0.8vw, 1.2rem);
  text-align: center;
  position: relative;
  display: grid;
  align-items: center;
  height: 100%;
}
#viContainer nav .nav > li > a,
#viContainer nav .nav > li div {
  display: block;
  cursor: pointer;
}
#viContainer nav .nav > li div {
  position: relative;
}
#viContainer nav .nav > li div span::after {
  display: none;
}
#viContainer nav .nav > li div::after {
  content: "";
  width: 6px;
  aspect-ratio: 1/0.8660254038;
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  position: absolute;
  top: 100%;
  left: calc(50% - 5px);
  background: #000;
}
#viContainer nav .nav > li span {
  display: block;
  font-family: "Abel", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  font-size: clamp(1.8rem, 1.5vw, 2.2rem);
  position: relative;
}
#viContainer nav .nav > li span::after {
  background-color: #333;
  bottom: -4px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
  width: 100%;
}
#viContainer nav .nav > li .subnav {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #FFF;
  padding: 0 2rem 1rem;
  border-radius: 0 0 10px 10px;
  border-top: none;
}
#viContainer nav .nav > li .subnav li {
  white-space: nowrap;
  font-size: clamp(1.2rem, 1vw, 1.4rem);
}
#viContainer nav .nav > li .subnav li a {
  display: block;
  padding: 0.25rem 0;
}
#viContainer nav .nav > li .subnav li a:hover {
  text-decoration: underline;
}
#viContainer nav .nav > li:hover span:after {
  transform: scale(1, 1);
}
#viContainer nav .nav > li:hover .subnav {
  display: block;
}
#viContainer .btn_menu {
  width: clamp(3rem, 3.5vw, 5rem);
  height: clamp(3rem, 3.5vw, 5rem);
  cursor: pointer;
  display: flex;
  align-items: center;
}
#viContainer .btn_menu > div {
  position: relative;
  width: 100%;
  height: clamp(1.2rem, 1.1vw, 1.6rem);
}
#viContainer .btn_menu > div span {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #101010;
  left: 0;
  transition: 0.3s;
}
#viContainer .btn_menu > div span:first-child {
  top: 0;
}
#viContainer .btn_menu > div span:last-child {
  bottom: 0;
}
.js-menuOpen #viContainer .btn_menu > div span:first-child {
  top: 50%;
  transform: rotate(160deg);
}
.js-menuOpen #viContainer .btn_menu > div span:last-child {
  bottom: auto;
  top: 50%;
  transform: rotate(-160deg);
}
@media screen and (max-width: 768px) {
  #viContainer {
    margin-bottom: 3rem;
    position: relative;
  }
  #viContainer .vi_logos {
    top: 11.8vw;
    left: 4.9vw;
    right: 4.9vw;
  }
  #viContainer .vi_logos .logo {
    padding-right: 6.9vw;
    padding-left: 6.9vw;
  }
  #viContainer nav {
    display: none;
  }
}

/* #news
----------------------------------- */
#news {
  margin: 0 auto clamp(5rem, 6.9vw, 10rem);
}
#news hgroup {
  padding-left: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 4vw, 150px);
  padding-left: clamp(2rem, 4vw, 150px);
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
  padding-left: clamp(2rem, 8.5vw, 8.5vw);
}
@media screen and (max-width: 767px) {
  #news hgroup {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
#news hgroup {
  display: flex;
  gap: 3rem clamp(1rem, 2.1vw, 3rem);
  align-items: center;
  margin-bottom: clamp(3rem, 3.5vw, 5rem);
}
#news hgroup .en {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 3rem);
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(4rem, 6.9vw, 10rem);
}
#news hgroup .en::before {
  content: "";
  width: clamp(4rem, 8.3vw, 12rem);
  height: 1px;
  background: #101010;
}
#news hgroup .title {
  text-align: center;
  font-size: clamp(1.4rem, 1.4vw, 2rem);
}
#news .newsContainer {
  display: grid;
  grid-template-columns: 0.75fr minmax(400px, 1fr);
  gap: clamp(2rem, 5.6vw, 8rem);
}
#news .newsContainer .photo {
  order: 1;
}
#news .newsContainer .newsitem {
  order: 2;
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
}
#news .newsContainer .newsitem ul {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 3rem;
  border-top: 1px solid #DCDBDB;
}
#news .newsContainer .newsitem ul li {
  display: grid;
  gap: 0 clamp(2rem, 2.8vw, 4rem);
  grid-template-columns: subgrid;
  grid-column: span 2;
  padding: clamp(1rem, 2.1vw, 3rem) 0;
  border-bottom: 1px solid #DCDBDB;
}
@media screen and (max-width: 768px) {
  #news .newsContainer {
    grid-template-columns: 1fr;
  }
  #news .newsContainer .photo {
    order: 2;
    padding: 0 2rem;
  }
  #news .newsContainer .newsitem {
    order: 1;
    padding: 0 2rem;
  }
}

/* #time
----------------------------------- */
#time {
  padding-left: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 4vw, 150px);
  padding-left: clamp(2rem, 4vw, 150px);
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
  padding-left: clamp(2rem, 8.5vw, 8.5vw);
}
@media screen and (max-width: 767px) {
  #time {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
#time {
  display: grid;
  grid-template-columns: 45% 1fr;
}
#time hgroup {
  display: grid;
  gap: 2rem;
}
#time hgroup h2 {
  font-size: clamp(2rem, 1.5vw, 2.2rem);
  text-align: center;
}
#time hgroup .en {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2.1vw, 3rem);
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(4rem, 6.9vw, 10rem);
  line-height: 1;
}
#time hgroup .en::before {
  content: "";
  width: 1px;
  height: clamp(4rem, 8.3vw, 12rem);
  background: #101010;
  margin: 0 auto;
}
#time .timeContainer .timetable {
  margin: 0 auto;
}
#time .timeContainer .timetable table {
  border-top: 1px solid #DCDBDB;
  border-left: 1px solid #DCDBDB;
  border-right: 1px solid #DCDBDB;
  border-bottom: 1px solid #DCDBDB;
}
#time .timeContainer .timetable table th,
#time .timeContainer .timetable table td {
  border-bottom: 1px solid #DCDBDB;
  padding: 1.5rem clamp(1rem, 1.4vw, 2rem);
}
#time .timeContainer .timetable table thead {
  background: #2F1616;
  color: #FFF;
}
#time .timeContainer .timetable table thead th:first-of-type {
  border-right: 1px solid #DCDBDB;
}
#time .timeContainer .timetable table tbody th,
#time .timeContainer .timetable table tbody td {
  border-bottom: none;
}
#time .timeContainer .timetable table tbody th {
  border-right: 1px solid #DCDBDB;
}
#time .timeContainer .timetable .notes dt {
  background: #2F1616;
  color: #FFF;
}
#time .timeContainer .timetable .notes dd.tel {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
}
@media screen and (max-width: 768px) {
  #time {
    grid-template-columns: 1fr;
  }
  #time .timeContainer .timetable table {
    width: 100%;
  }
}

/* #about
----------------------------------- */
.about_overflowContainer {
  overflow: hidden;
}

#about {
  width: 100dvw;
}
#about .carousel {
  overflow: hidden;
  position: relative;
}
#about .carousel.top {
  transform: translateY(50%);
}
#about .carousel.btm {
  transform: translateY(-50%);
}
#about .carousel .carousel-track {
  display: flex;
  width: max-content;
  animation: scroll_top 40s linear infinite;
  gap: clamp(0.5rem, 0.6vw, 0.8rem);
}
#about .carousel .carousel-track.rev {
  animation: scroll_btm 40s linear infinite;
}
#about .carousel .carousel-track li {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 213/320;
  width: clamp(63px, 14.8vw, 213px);
}
#about .carousel .carousel-track li.top {
  align-items: flex-start;
  width: clamp(96px, 22.4vw, 322px);
  aspect-ratio: 322/215;
}
#about .carousel .carousel-track li.end {
  align-items: flex-end;
  width: clamp(96px, 22.4vw, 322px);
  aspect-ratio: 322/215;
}
#about .carousel .carousel-track li img {
  object-fit: contain;
}
@keyframes scroll_top {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes scroll_btm {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
#about .mainvisual {
  background: url(/lib/img/top/bg_about.webp) no-repeat center/cover;
  color: #FFF;
  padding: clamp(96px, 22.2vw, 320px) 2rem;
}
#about .aboutContainer {
  width: fit-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: calc(clamp(2rem, 6.9vw, 10rem) * 1.5) 1fr;
  gap: clamp(2rem, 4.2vw, 6rem);
}
@media screen and (max-width: 768px) {
  #about .aboutContainer {
    grid-template-columns: 30px 1fr;
  }
}
#about .aboutContainer .vertical_en {
  position: sticky;
  top: 0;
  z-index: 0;
}
#about .aboutContainer .vertical_en p {
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 6.9vw, 10rem);
  writing-mode: vertical-rl;
  line-height: 1;
}
#about .aboutContainer .vertical_en.is-stuck {
  top: var(--header-h);
}
#about .aboutContainer h2 {
  text-align: center;
  font-size: clamp(1.8rem, 1.5vw, 2.2rem);
  font-weight: bold;
  margin-bottom: 2rem;
}
#about .aboutContainer .subnav {
  margin: 2rem auto;
  display: grid;
  width: max-content;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1rem;
}
#about .aboutContainer .subnav a {
  display: block;
  background: rgba(255, 255, 255, 0.2);
  color: #FFF;
  padding: 0.5rem 2rem;
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
  text-align: center;
  border-radius: 5px;
}
@media screen and (max-width: 768px) {
  #about .aboutContainer .vertical_en br {
    display: none;
  }
  #about .aboutContainer .subnav {
    display: grid;
  }
  #about .aboutContainer .subnav a {
    padding: 0.5rem 1rem;
    font-size: clamp(1.2rem, 1.1vw, 1.6rem);
  }
}

/* #doctor
----------------------------------- */
#doctor {
  padding-left: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 4vw, 150px);
  padding-left: clamp(2rem, 4vw, 150px);
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
  padding-left: clamp(2rem, 8.5vw, 8.5vw);
}
@media screen and (max-width: 767px) {
  #doctor {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
#doctor {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  margin-bottom: clamp(5rem, 6.9vw, 10rem);
  gap: clamp(5rem, 10.4vw, 15rem) clamp(2rem, 5.6vw, 8rem);
}
#doctor .text {
  order: 2;
  position: relative;
  padding-bottom: 3rem;
}
#doctor .text .sig {
  text-align: right;
  font-weight: 500;
  margin-top: 2rem;
}
#doctor .text .textlink {
  position: absolute;
  right: 0;
  bottom: 0;
}
#doctor .text .textlink a {
  display: flex;
}
#doctor .text .textlink a .linkicon {
  --line-color: #000;
}
#doctor .photo {
  order: 1;
}
#doctor hgroup {
  display: flex;
  gap: 3rem clamp(1rem, 2.1vw, 3rem);
  align-items: center;
  margin-bottom: clamp(1rem, 2.8vw, 4rem);
}
#doctor hgroup .en {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 3rem);
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(4rem, 6.9vw, 10rem);
}
#doctor hgroup .en::before {
  content: "";
  width: clamp(4rem, 8.3vw, 12rem);
  height: 1px;
  background: #101010;
}
#doctor hgroup .title {
  text-align: center;
  font-size: clamp(1.4rem, 1.4vw, 2rem);
}
@media screen and (max-width: 768px) {
  #doctor hgroup {
    gap: 0 clamp(1rem, 2.1vw, 3rem);
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    place-items: center;
  }
  #doctor hgroup .en {
    font-size: clamp(4rem, 6.9vw, 10rem);
  }
  #doctor hgroup .title {
    font-size: clamp(2rem, 1.4vw, 2rem);
  }
}
@media screen and (max-width: 768px) {
  #doctor {
    grid-template-columns: 1fr;
  }
  #doctor .text {
    order: 1;
  }
  #doctor .photo {
    order: 2;
  }
}

/* #feature
----------------------------------- */
#feature {
  padding-left: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 4vw, 150px);
  padding-left: clamp(2rem, 4vw, 150px);
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
  padding-left: clamp(2rem, 8.5vw, 8.5vw);
}
@media screen and (max-width: 767px) {
  #feature {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
#feature hgroup {
  display: flex;
  gap: 3rem clamp(1rem, 2.1vw, 3rem);
  align-items: center;
  margin-bottom: clamp(3rem, 3.5vw, 5rem);
}
#feature hgroup .en {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 3rem);
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(4rem, 6.9vw, 10rem);
}
#feature hgroup .en::before {
  content: "";
  width: clamp(4rem, 8.3vw, 12rem);
  height: 1px;
  background: #101010;
}
#feature hgroup .title {
  text-align: center;
  font-size: clamp(1.4rem, 1.4vw, 2rem);
}
@media screen and (max-width: 768px) {
  #feature hgroup {
    gap: 0 clamp(1rem, 2.1vw, 3rem);
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    place-items: center;
  }
  #feature hgroup .en {
    font-size: clamp(4rem, 6.9vw, 10rem);
  }
  #feature hgroup .title {
    font-size: clamp(2rem, 1.4vw, 2rem);
  }
}
#feature .featureItemContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(5rem, 10.4vw, 15rem) clamp(3rem, 5.6vw, 8rem);
  margin-bottom: clamp(5rem, 6.9vw, 10rem);
}
#feature .featureItemContainer .item {
  background: #CCC;
  margin-bottom: 4rem;
}
#feature .featureItemContainer section {
  position: relative;
}
#feature .featureItemContainer section::after {
  content: "";
  width: calc(100% + clamp(3rem, 5.6vw, 8rem));
  height: 1px;
  border-bottom: 1px solid #101010;
  position: absolute;
}
#feature .featureItemContainer section.item-01::after, #feature .featureItemContainer section.item-03::after, #feature .featureItemContainer section.item-05::after {
  bottom: 0;
  left: 0;
}
#feature .featureItemContainer section.item-01.item-05, #feature .featureItemContainer section.item-03.item-05, #feature .featureItemContainer section.item-05.item-05 {
  align-self: flex-start;
}
#feature .featureItemContainer section.item-02, #feature .featureItemContainer section.item-04 {
  padding-top: 4rem;
}
#feature .featureItemContainer section.item-02::after, #feature .featureItemContainer section.item-04::after {
  top: 0;
  right: 0;
}
#feature .featureItemContainer section a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "number text";
  gap: clamp(1rem, 2.8vw, 4rem);
  padding-bottom: 4rem;
}
#feature .featureItemContainer section a .text {
  grid-area: text;
}
#feature .featureItemContainer section a .number {
  grid-area: number;
}
#feature .featureItemContainer section .number {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-self: flex-start;
}
#feature .featureItemContainer section .number .en {
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: clamp(1.6rem, 3.1vw, 4.4rem);
}
#feature .featureItemContainer section .number .num {
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: clamp(5rem, 12.8vw, 20rem);
  margin-block: calc((1cap - 1lh) / 2);
}
#feature .featureItemContainer section .text h3 {
  font-size: clamp(1.8rem, 1.5vw, 2.2rem);
  font-weight: 500;
  margin-bottom: 1rem;
}
#feature .featureItemContainer section .text .link {
  width: fit-content;
  position: absolute;
  bottom: 1rem;
  right: 0;
  color: #101010;
  font-size: clamp(1.6rem, 1.3vw, 1.8rem);
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
#feature .featureItemContainer section .text .link .linkicon {
  display: block;
  width: 2rem;
  height: 5px;
  align-self: center;
  position: relative;
}
#feature .featureItemContainer section .text .link .linkicon::before, #feature .featureItemContainer section .text .link .linkicon:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #101010;
}
#feature .featureItemContainer section .text .link .linkicon::before {
  width: 100%;
}
#feature .featureItemContainer section .text .link .linkicon::after {
  width: 10px;
  transform-origin: right bottom;
  transform: rotate(30deg);
}
#feature .featureItemContainer .photo {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
#feature .featureItemContainer .photo.is-show {
  opacity: 1;
  transform: translateY(0);
}
#feature .featureItemContainer .photo-01 {
  grid-row: 1/span 2;
  grid-column: 2/3;
}
#feature .featureItemContainer .photo-02 {
  grid-row: 2/span 2;
  grid-column: 1/2;
  align-self: end;
}
#feature .featureItemContainer .photo-03 {
  grid-row: 4/span 2;
  grid-column: 2/3;
}
#feature .featureItemContainer .photo-04 {
  grid-row: 5/span 2;
  grid-column: 1/2;
  align-self: end;
}
#feature .featureItemContainer .photo-05 {
  grid-row: span 1;
  grid-column: 2/3;
}
@media screen and (max-width: 768px) {
  #feature .featureItemContainer {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  #feature .featureItemContainer section {
    padding-bottom: 0;
  }
  #feature .featureItemContainer section:after {
    display: none;
  }
  #feature .featureItemContainer section a {
    grid-template-columns: 1fr;
    grid-template-areas: "number" "text";
  }
  #feature .featureItemContainer .photo-01, #feature .featureItemContainer .photo-02, #feature .featureItemContainer .photo-03, #feature .featureItemContainer .photo-04, #feature .featureItemContainer .photo-05 {
    grid-row: auto;
    grid-column: auto;
  }
}

/* #treatment
----------------------------------- */
#treatment {
  padding-left: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 4vw, 150px);
  padding-left: clamp(2rem, 4vw, 150px);
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
  padding-left: clamp(2rem, 8.5vw, 8.5vw);
}
@media screen and (max-width: 767px) {
  #treatment {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
#treatment {
  margin: 0 auto clamp(5rem, 6.9vw, 10rem);
}
#treatment .menuContainer {
  margin: 0 auto;
  display: grid;
  position: relative;
  grid-template-columns: calc(clamp(2rem, 6.9vw, 10rem) * 1.5) minmax(350px, 1fr) 1fr;
  grid-template-areas: "en menu image";
  gap: clamp(2rem, 2.8vw, 4rem);
  align-items: start;
  margin-bottom: clamp(5rem, 6.9vw, 10rem);
}
@media screen and (max-width: 768px) {
  #treatment .menuContainer {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas: "en menu" "en image";
    gap: 3rem clamp(2rem, 2.8vw, 4rem);
  }
}
#treatment .menuContainer .vertical_en {
  position: sticky;
  top: 0;
  grid-area: en;
  z-index: 0;
}
#treatment .menuContainer .vertical_en p {
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 6.9vw, 10rem);
  writing-mode: vertical-rl;
}
#treatment .menuContainer .vertical_en.is-stuck {
  top: var(--header-h);
}
#treatment .menuContainer .menu {
  grid-area: menu;
}
#treatment .menuContainer .menu .nav li + li {
  margin-top: 2rem;
}
#treatment .menuContainer .menu .nav li a {
  display: grid;
  grid-template-columns: 4rem 1fr;
  font-size: clamp(1.8rem, 1.5vw, 2.2rem);
  align-items: center;
  gap: 1rem;
}
#treatment .menuContainer .menu .nav li a::before {
  content: "";
  width: 4rem;
  aspect-ratio: 1;
  display: block;
  background: repeat center/contain;
}
#treatment .menuContainer .menu .nav li a:hover {
  text-decoration: underline;
}
#treatment .menuContainer .menu .nav li a.general::before {
  background-image: url(/lib/img/top/icon_general.webp);
}
#treatment .menuContainer .menu .nav li a.periodontitis::before {
  background-image: url(/lib/img/top/icon_periodontitis.webp);
}
#treatment .menuContainer .menu .nav li a.cosmetic::before {
  background-image: url(/lib/img/top/icon_cosmetic.webp);
}
#treatment .menuContainer .menu .nav li a.whitening::before {
  background-image: url(/lib/img/top/icon_whitening.webp);
}
#treatment .menuContainer .menu .nav li a.implant::before {
  background-image: url(/lib/img/top/icon_implant.webp);
}
#treatment .menuContainer .menu .nav li a.denture::before {
  background-image: url(/lib/img/top/icon_denture.webp);
}
#treatment .menuContainer .menu .nav li a.occlusion::before {
  background-image: url(/lib/img/top/icon_occlusion.webp);
}
#treatment .menuContainer .menu .nav li a.pedodontics::before {
  background-image: url(/lib/img/top/icon_pedodontics.webp);
}
#treatment .menuContainer .menu .nav li a.prevention::before {
  background-image: url(/lib/img/top/icon_prevention.webp);
}
#treatment .menuContainer .menu .nav li a.opinion::before {
  background-image: url(/lib/img/top/icon_opinion.webp);
}
#treatment .menuContainer .menu .nav li a.case::before {
  background-image: url(/lib/img/top/icon_case.webp);
}
#treatment .menuContainer .menu h2 {
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: clamp(4rem, 5.6vw, 8rem) max-content;
  align-items: center;
  gap: 1rem;
}
#treatment .menuContainer .menu h2::before {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: #101010;
}
#treatment .featuretreatment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.4vw, 2rem);
  margin: 0 auto;
  transition: 0.3s;
}
#treatment .featuretreatment section + section {
  margin-top: 0;
}
#treatment .featuretreatment .item {
  aspect-ratio: 380/650;
  border: 1px solid #DCDBDB;
  padding: 1px;
  position: relative;
}
#treatment .featuretreatment .item .image {
  position: absolute;
  left: 2px;
  top: 2px;
  right: 2px;
  bottom: 2px;
  z-index: 0;
}
#treatment .featuretreatment .item .image::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
#treatment .featuretreatment .item .image::after {
  transition: 0.3s;
  opacity: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: url(/lib/img/top/treatment_cover.webp) no-repeat top/contain;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#treatment .featuretreatment .item.implant .image::before {
  background: url(/lib/img/top/treatment_implant_c.webp) no-repeat top/contain;
}
#treatment .featuretreatment .item.ceramic .image::before {
  background: url(/lib/img/top/treatment_ceramic_c.webp) no-repeat top/contain;
}
#treatment .featuretreatment .item:hover .image::after {
  opacity: 1;
}
#treatment .featuretreatment .item a {
  display: block;
  grid-template-columns: 1fr;
  aspect-ratio: 380/650;
  position: relative;
  color: #FFF;
  padding: 2.1vw 2.1vw;
}
#treatment .featuretreatment .item a hgroup {
  margin-bottom: 2.1vw;
}
#treatment .featuretreatment .item a hgroup .en {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  font-size: 4.9vw;
  letter-spacing: -0.001em;
  text-indent: -0.001em;
  line-height: 1;
  text-align: center;
  padding-bottom: 1.4vw;
  border-bottom: 1px solid #FFF;
  margin-bottom: 2.1vw;
}
#treatment .featuretreatment .item a hgroup h3 {
  text-align: center;
  font-weight: bold;
}
#treatment .featuretreatment .item a p {
  text-align: center;
  font-size: 1.1vw;
  line-height: 2;
}
#treatment .featuretreatment .item a .link {
  width: calc(100% - 4.2vw);
  position: absolute;
  bottom: 2.1vw;
  color: #101010;
  font-size: 1.4vw;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
#treatment .featuretreatment .item a .link .linkicon {
  display: block;
  width: 2rem;
  height: 5px;
  align-self: center;
  position: relative;
}
#treatment .featuretreatment .item a .link .linkicon::before, #treatment .featuretreatment .item a .link .linkicon:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #101010;
}
#treatment .featuretreatment .item a .link .linkicon::before {
  width: 100%;
}
#treatment .featuretreatment .item a .link .linkicon::after {
  width: 10px;
  transform-origin: right bottom;
  transform: rotate(30deg);
}
@media screen and (max-width: 768px) {
  #treatment .featuretreatment {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  #treatment .featuretreatment .item {
    aspect-ratio: 376/453;
  }
  #treatment .featuretreatment .item .image::before {
    display: none;
  }
  #treatment .featuretreatment .item .image::after {
    display: none;
  }
  #treatment .featuretreatment .item a {
    aspect-ratio: 376/453;
    padding: 3rem 2rem;
  }
  #treatment .featuretreatment .item a hgroup {
    margin-bottom: 1rem;
  }
  #treatment .featuretreatment .item a hgroup .en {
    font-size: clamp(3rem, 18.7vw, 7rem);
  }
  #treatment .featuretreatment .item a p {
    text-align: center;
    font-size: clamp(1.4rem, 4.3vw, 1.6rem);
    line-height: 1.6;
  }
  #treatment .featuretreatment .item a .link {
    font-size: clamp(1.4rem, 5.3vw, 2rem);
    bottom: 0.5rem;
  }
}

/* #instagram
----------------------------------- */
#instagram {
  padding-left: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 4vw, 150px);
  padding-left: clamp(2rem, 4vw, 150px);
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
  padding-left: clamp(2rem, 8.5vw, 8.5vw);
}
@media screen and (max-width: 767px) {
  #instagram {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
#instagram hgroup {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem clamp(1rem, 2.1vw, 3rem);
  flex-wrap: wrap;
  margin-bottom: clamp(3rem, 3.5vw, 5rem);
}
#instagram hgroup .category {
  font-size: clamp(1.6rem, 1.4vw, 2rem);
}
#instagram hgroup .en {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 3rem);
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(4rem, 6.9vw, 10rem);
}
#instagram hgroup .en::before {
  content: "";
  width: clamp(4rem, 8.3vw, 12rem);
  height: 1px;
  background: #101010;
}
#instagram hgroup .title {
  width: 100%;
  text-align: center;
  font-size: clamp(2.4rem, 1.4vw, 2rem);
}
@media screen and (max-width: 768px) {
  #instagram hgroup {
    gap: 0 clamp(1rem, 2.1vw, 3rem);
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    place-items: center;
  }
  #instagram hgroup .en {
    font-size: clamp(4rem, 6.9vw, 10rem);
  }
  #instagram hgroup .title {
    font-size: clamp(2rem, 1.4vw, 2rem);
  }
}
#instagram ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 0 auto;
}

/*# sourceMappingURL=top.css.map */