@charset "utf-8";
img { max-width: 100%; height: auto; }
.mt3em { margin-top: 3em; }
.mt2em { margin-top: 2em; }
.mt1em { margin-top: 1em; }

.bg-gray { background: #FBFBFC; }
.bg-blue { background: #F8FAFC; }

.t-blue { color: #6DA9DA; }

.pc-only { display: none ;}
@media screen and (min-width: 768px) {
  .sp-only { display: none; }
  .pc-only { display: initial;}
}


.title-icon { font-size: 1.8rem; font-weight: 600; color: #6DA9DA; display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: .5em ;align-items: center; margin-bottom: 1em; }

.title-std { margin-bottom: 1.5em; }
.title-std .en { display: block; font-family: 'Figtree', sans-serif; font-size: 2rem; font-weight: 600; text-transform: uppercase; color: #776A66; line-height: 1.3; }
.title-std .en:first-letter { color: #6DA9DA; }
.title-std .ja { display: block; color: #C4C1BF; line-height: 1.3; font-weight: bold; }

.title-std.-s .en { text-transform: none; }

.title-lead { text-align: center; font-size: 1.5rem; font-weight: bold; margin-bottom: 2em; }
.title-s { font-size: 1.125rem; font-weight: bold; color: #6DA9DA; margin-bottom: .5em;  }


@media screen and (max-width: 900px) {
  .title-lead { font-size: 1.25rem; }
}

.page-title { background: url(../img/common/bg.png); padding: 150px 0 90px; }
.page-title .inner { width: calc(50% + 500px); max-width: 95%; margin: 0 0 0 auto; display: grid; align-items: center; grid-template-columns: 15rem minmax(0, 1fr); }
.page-title .title .ja { color:#6DA9DA; font-size: 2.5rem; font-weight: 600; width: fit-content; background: #FFF; position: relative; z-index: 2; padding: .2em .5em; border-radius: 7px; white-space: nowrap; }
.page-title .title .en { display: block; font-size: .8135rem; font-family: 'Figtree', sans-serif; width: fit-content; background: #FFF; position: relative; z-index: 2; padding: .2em 1em; border-radius: 7px; margin-top: 8px; letter-spacing: .07em; }
.page-title .img { position: relative; border-radius: 60px 0 0 60px; height: 220px; overflow: hidden; font-size: 1.8rem; padding: 1em; display: flex; align-items: flex-end; justify-content: flex-end; color: #FFF; }
.page-title .img img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

@media screen and (max-width: 1200px) {
  .page-title { padding: 120px 0 60px; }
}
@media screen and (max-width: 900px) {
  .page-title { display: block; width: 95%; position: relative; margin: 0 0 0 auto; padding: 100px 0 50px; }
  .page-title .inner { display: block; position: relative; }
  .page-title .img { width: 85%; margin: 0 0 0 auto; font-size: 4vw; }
  .page-title .title { position: absolute; left: 0; top: 0; bottom: 0; margin: auto; height: fit-content; }
  .page-title .title .ja  { font-size:2rem; }
}



.list-num { counter-reset: listnum; }
.list-num > li { padding-left: 2em; counter-increment: listnum; }
.list-num > li + li { margin-top: .5em; }
.list-num > li::before { content: counter(listnum, decimal-leading-zero)'.'; color: #6DA9DA; width: 2em; margin-left: -2em; display: inline-block; font-family: 'Figtree', sans-serif; }


.mv { display: flex; background: url("../img/common/bg.png"); position: relative; margin-bottom: 10vw;  }
.mv .main-slider { width: 70%; padding-right: 50px; margin: 0 0 0 auto; position: relative; }

.mv .mySwiper { width: 25%; position: absolute; bottom: 80px; right: 0; margin: auto; }
.mv .mySwiper img { border-radius: 10px; aspect-ratio: 1 / 1; object-fit: cover; }

.mySwiper2 img { width: 100%; height: 100vh; object-fit: cover; border-radius: 0 0 60px 60px; }

.main-copy { position: absolute; right: 75px; top: 115px; margin: auto; writing-mode: vertical-rl; white-space: nowrap; z-index: 10; }
.main-copy .line { display: block; background: #FFF; color: #6DA9DA; font-size: 2.5rem; font-weight: bold; border-radius: 7px; height: fit-content; padding: .2em 0; margin-left: 6px; }
.main-copy .en { background: #FFF; font-family: 'Figtree', sans-serif; color: #ADA39E; font-size: .85rem; font-weight: 600; padding: .7em .5em; border-radius: 7px; display: block; height: fit-content; }

.main-navi { width: 30%; }
.main-navi .inner { max-width: 85%; width: 290px; margin: 120px auto 90px; }
.main-navi .navi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;  }
.main-navi .navi > li { }
.main-navi .navi a { display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 136 /121; box-shadow: 0 0 6px rgba(173, 162, 158, .28); background: #FFF; border-radius: 7px; font-weight: 500; font-size: .8735rem; }
.main-navi .navi img { width: 60px; height: 50px; display: block; margin: 0 auto .5em; object-fit: contain; }


.main-navi .service { font-size: .67rem; margin-bottom: 1em; }
.main-navi .calendar { margin-top: 1.5em; }

.scroll-area.mv-text { position: absolute; left: 0; top: 100%; margin: auto; height: 1em; line-height: 1em;  margin-top: -.3em; z-index: 2;font-size: 10vw; line-height: 1;  }
@media screen and (max-width: 1100px) {
  .main-copy { top: 90px; right: auto; left: -15%; width: 17%; }
  
  .mv { flex-direction: column-reverse; }
  .mv .main-slider { width: 80%; padding-right: 1rem; }
  .mySwiper2 img { width: 100%; height: auto; aspect-ratio: 3/ 2; }
  .mv .mySwiper { bottom: 40px; }
  
  .main-navi { width: 100%; margin: 0 auto;  }
  .main-navi .inner { width: 90%; max-width: none; margin: calc(50px + 10vw) auto 0; }
  .main-navi .navi { grid-template-columns: repeat(6, minmax(0, 1fr));}
  .main-navi .navi img { widows: 40px; height: 30px; }
  .main-navi .navi a { font-size: .8rem; }
 
  
  .scroll-area.mv-text { margin-top: -.2em; top: 50vw; }
}
@media screen and (max-width: 800px) {
  .main-navi .service { font-size: .8rem; }
  .mySwiper2 img { aspect-ratio: 1/ 1.3; }
  .mv .mySwiper { width: 50%; }
  
  .scroll-area.mv-text { top: 98vw; }
}
@media screen and (max-width: 600px) {
  .mySwiper2 img { aspect-ratio: 1/ 1.5; }
  .main-navi .navi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  
  .main-copy { left: -20%; width: 30%;  }
  .main-copy .line { font-size: 1.5rem; }
  .scroll-area.mv-text { top: 113vw; font-size: 15vw; }
}

.btn-scroll { position: fixed; display: flex; left: 1rem; bottom:1rem; margin: auto; flex-direction: column; justify-content: center; align-items: center; transition: opacity .3s; }
.btn-scroll span { writing-mode: vertical-rl; white-space: nowrap; margin-bottom: .5em; font-family: 'Figtree', sans-serif; color: #ADA39E; font-weight: 600; font-size: .75rem;  }
.scrolled .btn-scroll { opacity: 0; }

@media screen and (max-width: 1200px) {
  .btn-scroll { display: none; }
}
.home-about { display: grid; grid-template-columns: 38% 60%; gap: 2%;  position: relative; margin-bottom: 80px; }
.home-about .text { padding-top: 2em; font-size: 1.125rem; line-height: calc( 40 / 18); }
.home-about::before { content: ''; width: 30%; aspect-ratio: 274 / 300; position: absolute; top: 100%; left: 5%; background: url("../img/general/deco.svg") no-repeat center center / 100% 100%; z-index: -1; }

.title-about .en { display: block; color: #6DA9DA; font-size: 4.5rem;font-family: 'Figtree', sans-serif; font-weight: 600; line-height: 1.5;  }
.title-about .ja { font-size: 1.25rem; font-weight: bold; }


.scroll-area { width: 100%; height: 20vw; overflow: hidden; position: relative;  margin-top: 60px; }
.scroll-track { display: flex; animation: scroll-left 60s linear infinite; width: fit-content; }
.scroll-track img { height: 20vw; width: auto; flex-shrink: 0; max-width: none; }


.scroll-area .text { white-space: nowrap; font-family: 'Figtree', sans-serif; font-weight: 500; line-height: 1; }
.scroll-area .text span { color: #6DA9DA; }

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); 
  }
}

@media screen and (max-width: 900px) {
  .home-about { grid-template-columns: 1fr; }
  .title-about .en { font-size: 3rem; }
  .title-about .ja { font-size: 1rem; }
  .home-about .text { font-size: 1rem; }
  .scroll-area { height: 30vw;}
  .scroll-track img  { height: 30vw; }
}



.news-list .item { display: grid; grid-template-columns: 5rem 100px minmax(0, 1fr); gap: 1rem; align-items: center; }
.news-list .item + .item { margin-top: 3rem; }
.news-list .item .date { color: #6DA9DA; font-family: 'Figtree', sans-serif; }
.news-list .item .cat { background: #6DA9DA; padding: .1em .5em; text-align: center; color: #FFF; font-size: .875rem; border-radius: 5px; }

.home-news { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1rem; }
.title-home-news .ja { font-size: 2rem; color: #776A66; font-weight: 500;  }
.title-home-news .en { display: block; font-family: 'Figtree', sans-serif; color: #6DA9DA; font-weight: 600; text-transform: uppercase; }


@media screen and (max-width: 900px) {
  .home-news  { grid-template-columns: 1fr; }
  
  .news-list .item { display: flex; flex-wrap: wrap; }
  .news-list .item dd { width: 100%; }
}

.home-wrapper { overflow: hidden; }
.home-promiss .inner { position: relative; }
.home-promiss .deco { position: absolute; width: 432px; height: 432px; left: calc(100% - 150px); top: -150px; margin: auto; z-index: -1; display: flex; align-items: center; justify-content: center; }
.home-promiss .deco img { width: 25%; }
.home-promiss .deco::after { content: ''; width: 100%; height: 100%; background: url("../img/home/promiss-circle.svg") no-repeat center center/ 100% 100%; position: absolute; inset: 0; margin: auto; animation: roll linear infinite 20s; }

@media screen and (max-width: 1400px) {
  .home-promiss .deco { width: 30vw; height: 30vw; top: -10vw; left: auto; right: -10vw;}
}
@media screen and (max-width: 900px) {
  .home-promiss .deco { top: -20vw; }
}
@keyframes roll {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.title-promiss { text-align: center; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 500; }
.title-promiss .large { font-size: 2em; font-weight: 500; display: block; line-height: 1.2; }
.title-promiss .en { display: block; font-size: 1rem; color: #6DA9DA; font-family: 'Figtree', sans-serif; font-weight: 600; text-transform: uppercase; margin-top: .5em; }


.list-promiss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; counter-reset: listnum;}
.list-promiss > li { position: relative; margin-top: 50px; counter-increment: listnum ;}
.list-promiss > li::before { content: counter(listnum, decimal-leading-zero); width: 60px; height: 64px; display: block; background: url("../img/home/circle.svg") no-repeat center center/ 100% 100%; position: absolute; top: -50px; left: 0; right: 0; margin: auto; font-family: 'Figtree', snas-serif; display: flex; align-items: center; justify-content: center; color: #6DA9DA; font-size: 1.25rem; font-weight: 500; }
.list-promiss .img { border-radius: 20px; margin-bottom: 1.5em; }
.list-promiss .title { font-size: 1.8rem; color: #6DA9DA; font-weight: 500; text-align: center; margin-bottom: .6em; }

@media screen and (max-width: 900px) {
  .title-promiss { font-size: 1.25rem; }
  
  .list-promiss { grid-template-columns: 1fr; gap: 20px; }
  .list-promiss > li { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 1rem; }
  .list-promiss .title { font-size: 1.3rem; text-align: left; }
  .list-promiss > li::before { left: 15%; transform: translateX(-50%); right: auto; width: 40px; height: 40px; font-size: 1rem; top: -30px; }
}

.title-menu { text-align: center; margin-bottom: 1.5rem; }
.title-menu .ja { font-size: 2rem; color: #776A66; font-weight: 500; }
.title-menu .en { font-family: 'Figtree', sans-serif; font-weight: 600; display: block; color: #6DA9DA; }

.home-menu { background: #FFF; border-radius: 80px; padding: 80px 100px; max-width: 1200px; width: 90%; margin: 0 auto; }

.home-menu .menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.home-menu .menu a { background: #F8FAFC; border-radius: 15px; padding: 40px 20px 20px; display: block; height: 100%; }
.home-menu .menu  .img { width: 150px; max-width: 80%; margin: 0 auto; background: #FFF; aspect-ratio: 1/ 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.home-menu .menu  .img img { width: 50%; height: 40%; display: block; object-fit: contain; }
.home-menu .menu .title { text-align: center; color: #6DA9DA; font-size: 1.3em; margin: .5em 0; padding-bottom: .5em; font-weight: 500; border-bottom: 1px solid #D5DFEA; padding-right: .5em; position: relative;}
.home-menu .menu .title::after { content: ''; width: .5rem; height: .5rem; display: block; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; border-top: 3px solid #6DA9DA; border-right: 3px solid #6DA9DA; transform: rotate(45deg); }

@media screen and (max-width: 1000px) {
  .home-menu { padding: 60px 5%; }
  .home-menu .menu  a { padding: 20px 15px 15px; }
}
@media screen and (max-width: 900px) {
  .title-menu .ja { font-size: 1.5rem; }
  .title-menu .en { font-size: .9rem; }
  .home-menu { border-radius: 50px; }
  .home-menu .menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-menu .menu  .img { width: 100px; height: 100px; }
  .home-menu .menu .title { font-size: 1.2rem; }
}

@media screen and (max-width: 600px) {
  .home-menu { padding: 40px 5%; }
  .home-menu .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-menu .menu  .img { width: 80px; height: 80px; }
}

.bnr-invisalign { width: 800px; max-width: 100%;  margin: 50px auto 0; background:#FCFCFC url("../img/orthodontics/invisalign.jpg") no-repeat right center / 70% auto; padding: 1.2rem 1.2rem 1.2rem 3rem; ; display: flex; justify-content: space-between; border: 1px solid #F2F2F2; align-items: flex-end; }

.bnr-invisalign .list { display: flex; }

.bnr-invisalign .title .ttl { font-size: .8735rem;  font-weight: 500; color: #0051A3;  }
.bnr-invisalign .title img { width: 258px; }

.bnr-invisalign .product { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: center; color: #6B7177; margin-left: -1.5rem; line-height: 1.5;  }
.bnr-invisalign .list { display: flex; font-size: .75rem; }
.bnr-invisalign .list > li { color: #3894CE; text-align: center; width: 6em; height: 6em; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #FFF; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,.15); line-height: 1.2; font-weight: 500; }
.bnr-invisalign .list > li + li { margin-left: 8px; }


@media screen and (max-width: 900px) {
  .bnr-invisalign  { flex-direction: column; align-items: flex-start;  background-position: top right; }
}

@media screen and (max-width: 600px) {
  .bnr-invisalign  {  background-color:#FCFCFC; background-image: linear-gradient(to bottom, transparent, #FCFCFC), url("../img/orthodontics/invisalign.jpg") ; background-repeat: no-repeat; background-position: center center, right top; background-size: 100% 13vw,  70% auto; padding: 60px 2rem 1rem; }
  
  .bnr-invisalign .product { margin-left: 0; grid-template-columns: 80px minmax(0, 1fr); margin-bottom: 1em; }
  .bnr-invisalign .list { font-size: .65rem; }
}


.clinic-gallery { display: grid; grid-template-columns: 15% minmax(0, 1fr) 15%; align-items: flex-start; }
.clinic-gallery .title { writing-mode: vertical-rl; height: fit-content; white-space: nowrap; margin: 0 auto 0 0; }
.clinic-gallery .title .ja { display: block; color: #C4C1BF; font-weight: bold; }
.clinic-gallery .title .en { display: block; font-size: 2rem; font-weight: 600; font-family: 'Figtree', sans-serif; text-transform: uppercase; }
.clinic-gallery .title .en span { color: #6DA9DA; }

.gallerySwiper2 { width: 100%; border-radius: 20px; overflow: hidden; }


.gallerySwiper { margin-top: 40px; }
.gallerySwiper img { aspect-ratio : 1/ 1; object-fit: cover; border-radius: 20px; }


.gallery-swiper-scrollbar.swiper-horizontal>.swiper-scrollbar, 
.gallery-swiper-scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal  { position: relative; top: auto; bottom: auto; width: 300px; margin: 40px auto 0; }
.gallery-swiper-scrollbar .swiper-scrollbar-drag { background: #6DA9DA; }


@media screen and (max-width: 900px) {
  .clinic-gallery  { grid-template-columns: 5rem minmax(0, 1fr); }
  .clinic-gallery .title .en { font-size: 1.5rem; }
  .gallerySwiper { padding: 0 1rem; }
  .gallerySwiper img { aspect-ratio : 1/ 1; object-fit: cover; border-radius: 10px; }
}


.clinic-doctor { display: flex; justify-content: space-between; align-items: flex-start; }
.clinic-doctor .text { width: 45%; }
.clinic-doctor .img { width: 50%; position: relative; }
.clinic-doctor .img::before { content: ''; width: 100%; height: 100%; position: absolute; left: -20px; top: 20px; border: 1px solid #6DA9DA; border-radius: 20px; }
.clinic-doctor .img img { border-radius: 20px; position: relative; z-index: 2; }


.doctor-history { margin-top: 2em; }
.doctor-history .title  { font-size: 1.125rem; font-weight: 500; }
.doctor-history .history { display: grid; grid-template-columns: 8em minmax(0, 1fr); margin-top: .5em; }
.doctor-history .history dd { margin-bottom: .5em; }

.doctor-name .role { font-size: .8375rem; display: block; font-weight: 500;  }
.doctor-name .name { font-size: 2.2rem; font-weight: 500; letter-spacing: .2em; display: block; }
.doctor-name .name-en { font-size: .75rem; color: #6DA9DA; width: 15em; text-align: center; display: block; font-family: 'Figtree', sans-serif; letter-spacing: .2em; }


@media screen and (max-width: 900px) {
  .clinic-doctor { display: block; }
  .clinic-doctor .text { width: 100%; }
  .clinic-doctor .img { width: 60%; margin: 2rem auto;  }
}

.clinic-information { width: calc(50% + 500px); margin: 0 0 0 auto; background: #FBFBFB; border-radius: 50px 0 0 50px; position: relative; }

.clinic-information .text { padding: 65px 60px; padding-right: 53%; }
.clinic-information .img { width: 500px; position: absolute; right: 0; top: 0; bottom: 0; height: 100%; object-fit: cover; max-width: 50%; }

.clinic-information .title { margin-bottom: 1em;  }
.clinic-information .title .ja { display: block; font-weight: bold; font-size: 1.8rem; line-height: 1.3;}
.clinic-information .title .ja span { font-weight: 600; font-size: 1.125rem; display: inline-block; margin-bottom: .5em; }
.clinic-information .title .en { display: block; font-family: 'Figtree', sans-serif; color: #6DA9DA; font-weight: 600; text-transform: uppercase; }

.clinic-information .list { counter-reset: listnum; }
.clinic-information .list > li { counter-increment: listnum; }
.clinic-information .list > li + li { margin-top: 1em; }
.clinic-information .list .ttl { font-size: 1.25rem; font-weight: bold; padding-left: 2em; }
.clinic-information .list .ttl::before { content: counter(listnum, decimal-leading-zero); font-family: 'Figtree', sans-serif; width: 2em; font-weight: 600; margin-left: -2em; width: 2em; display: inline-block; }

@media screen and (max-width: 1100px) {
  .clinic-information { width: 95%; }
}

@media screen and (max-width: 900px) {
  .clinic-information .text { padding: 40px 30px; }
  .clinic-information .img { position: relative; inset: auto; width: 100%; object-fit: cover; aspect-ratio: 3/ 2; max-width: none; }
  
  .clinic-information .title .ja { font-size: 1.5rem; }
  .clinic-information .title .ja span{ font-size: 1rem; }
  .clinic-information .list .ttl { font-size: 1.125rem; }
}

.general-main-wrap { overflow: hidden; }

.general-main { font-size: 1.125rem; line-height: calc(40 / 18); }
.general-img { width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; margin-top: 70px; position: relative; }
.general-img img { border-radius: 20px; }
.general-img::before { content: ''; width: 205px; height: 225px; background: url("../img/general/deco.svg") no-repeat center center / 100% 100%; position: absolute; top: -150px; right: -80px; margin: auto; z-index: -1; }


@media screen and (max-width: 900px) {
  .general-main { font-size: 1rem; }
  .general-img  { gap: 20px; width: 100%; }
}
.general-kids { display: flex; justify-content: space-between; }
.general-kids .text { width: 55%; }
.general-kids .img { width: 40%; box-shadow: -20px 20px 0 #DDEAF6; border-radius: 20px; overflow: hidden; }


@media screen and (max-width: 900px) {
  .general-kids { flex-direction: column; }
  .general-kids .text { width: 100%; }
  .general-kids .img { width: 60%; margin: 2rem auto; box-shadow: -10px 10px 0 #DDEAF6;   }
}

.general-img2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; width: calc(100% - 20px); margin: 2em 0 0 auto; }
.general-img2 > div { box-shadow: -20px 20px 0 #DDEAF6; border-radius: 20px; overflow: hidden; }

@media screen and (max-width: 900px) {
  
  .general-img2 { width: 100%; column-gap: 20px; }
  .general-img2 > div { box-shadow: -10px 10px 0 #DDEAF6; }
}




.cosmetic-merit { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.cosmetic-merit-wrap { background:#F8FAFC url("../img/cosmetic/merit.png") no-repeat right 90% bottom / 30% auto; }


@media screen and (max-width: 1100px) {
  .cosmetic-merit { grid-template-columns: 1fr; }
}


.list-maru { font-size: 1.125rem; }
.list-maru > li { padding-left: 2rem; }
.list-maru > li + li { margin-top: .3em; }
.list-maru > li::before { content: '◯'; color: #6DA9DA; margin-left: -2rem; width: 2rem; display: inline-block; font-weight: bold; font-size: 1.5rem; vertical-align: middle; }

.list-batu { font-size: 1.125rem; }
.list-batu > li { padding-left: 2rem; }
.list-batu > li + li { margin-top: .3em; }
.list-batu > li::before { content: '×'; color: #C6C1C0; margin-left: -2rem; width: 2rem; display: inline-block; font-weight: bold; font-size: 1.5rem; vertical-align: middle; }

.list-block { background: #FFF; border: 1px solid #C4C0BF; padding: 1.5rem 2rem; border-radius: 20px; }
.list-block + .list-block { margin-top: 20px; }
.list-block.-blue { border-color: #6DA9DA;  }

@media screen and (max-width: 1100px) {
.list-maru,
.list-batu { font-size: 1rem; }
.list-maru > li::before,
  .list-batu > li::before { font-size: 1.3rem; }
  .list-block { padding: 1rem 1.5rem; }
}

.cosmetic-price-list >li:not(:last-child) { border-bottom: 1px dashed #CCCCCC; padding-bottom: 2em; margin-bottom: 2em; }
.cosmetic-price-list .item { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 40px; }


.cosmetic-price-list .title { display: flex; justify-content: space-between; border-bottom: 1px solid #CCCCCC; padding-bottom: .5em; margin-bottom: .5em; }
.cosmetic-price-list .title .name { font-size: 1.5rem; font-weight: 600; }
.cosmetic-price-list .title .price { font-weight: 500; }
.cosmetic-price-list .title .price span { font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 1.8rem; margin-right: .2em; } 

.cosmetic-price-list .img img { border-radius: 20px; }


.cosmetic-price-list .note { background: #FBFBFC; border-radius: 20px; padding: 1.25rem 1.5rem; margin-top: 2rem; }
.cosmetic-price-list .note .ttl { font-size: 1.25rem; font-weight: 600; margin-bottom: .5em; }

@media screen and (max-width: 600px) {
  .cosmetic-price-list .item{ grid-template-columns: 1fr; gap: 20px; }
  .cosmetic-price-list .img { width: 60%; margin: 0 auto; }
  .cosmetic-price-list .title { flex-wrap: wrap; }
  .cosmetic-price-list .title .name {  font-size: 1.3rem; }
  .cosmetic-price-list .title .price { margin: 0 0 0 auto; }
  .cosmetic-price-list .title .price span { font-size: 1.5rem; }
}

.orthodontics-head { position: relative; width: calc(50% + 500px); max-width: 95%; margin: 0 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 50px;  }
.orthodontics-head .title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1em; }
.orthodontics-head img { border-radius: 20px 0 0 20px; }


@media screen and (max-width: 900px) {
  .orthodontics-head { grid-template-columns: 1fr; gap: 2rem; }
  .orthodontics-head .text { width: 95%; }
  .orthodontics-head img { width: 50%; margin: 0 0 0 auto; }
}
.orthodontics-price { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1em; }

@media screen and (max-width: 1000px) {
  .orthodontics-price  { grid-template-columns: 200px minmax(0, 1fr); }
}
@media screen and (max-width: 900px) {
  .orthodontics-price { grid-template-columns: 1fr; }
  
}

.pre-ortho-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pre-ortho-head .text { width: 70%; }
.pre-ortho-head .img { width: 25%; }
.pre-ortho-head .title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1em; }

.pre-ortho-head .note { background: #FBFBFC; border-radius: 20px; padding: 1.25rem 1.5rem; margin-top: 2rem; }
.pre-ortho-head .note .ttl { font-size: 1.25rem; font-weight: 600; margin-bottom: .5em; }

.list-dot > li { padding-left: 1em; }
.list-dot > li::before { content: '・';width: 1em; margin-left: -1em; display: inline-block; }

@media screen and (max-width: 900px) {
  .pre-ortho-head  { display: block; }
  .pre-ortho-head .text { width: 100%;}
  .pre-ortho-head .img { width: 50%; margin: 2rem auto 0; display: block; }
}

.invisalign { position: relative; background-image: linear-gradient(to bottom, transparent 40%, #FFF), url("../img/orthodontics/invisalign.jpg"), linear-gradient(to bottom, #FCFCFC, transparent); background-repeat: no-repeat; background-position:   center top, right top, center top; background-size: 100% 22vw, 40% auto, 100% 30vw; }

.invisalign .head { display: flex; align-items: center; }


.invisalign .title { margin-right: 30px; }
.invisalign .title .ttl { font-size: 1.3rem; font-weight: 500; color: #0051A3 }
.invisalign .title img { width: 400px; }


.invisalign .feature .product { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: center; color: #6B7177; margin-bottom: .5rem; }
.invisalign .feature .list { display: flex; }
.invisalign .feature .list > li { color: #3894CE; text-align: center; width: 6em; height: 6em; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #FFF; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,.15); line-height: 1.2; font-weight: 500; }
.invisalign .feature .list > li + li { margin-left: 12px; }

.invisalign .description { font-size: 1.125rem; line-height: 2; margin-top: 3em;}


@media screen and (max-width: 900px) {
  
  .invisalign {background-size: 100% 37vw, 70% auto, 100% 50vw; }

  .invisalign .head { flex-direction: column; align-items: center; justify-content: center; }
  .invisalign .title { text-align: center; margin: 0; }
  .invisalign .title img { width: 300px; }
  .invisalign .title .ttl { font-size: 1rem; }
  .invisalign .feature .list { font-size: .85rem; }
  
  .invisalign .feature .product { grid-template-columns: 100px auto; width: fit-content; margin: 1rem auto;  }
  .invisalign .description { font-size: 1rem; }
}
.mousepiece-merit { position: relative; }
.mousepiece-merit .img { width: 40%; position: absolute; right: 0; top: 0; margin: auto; height: 100%; object-fit: cover; object-position: 90% center; }
.mousepiece-merit .inner { padding-right: 40%; }
.mousepiece-merit-list { counter-reset: listnum; }
.mousepiece-merit-list > li { counter-increment: listnum; position: relative; padding-left: 5rem; }
.mousepiece-merit-list > li + li { border-top: 1px dashed #CCC; padding-top: 1em; margin-top: 1em; }
.mousepiece-merit-list > li::before { content: counter(listnum, decimal-leading-zero); color: #D3E5F4; font-size: 3.3rem; font-family: 'Figtree', sans-serif; font-weight: 600; position: absolute; left: 0; top: 1rem; line-height: 1; }
.mousepiece-merit-list > li:first-child::before { top: 0; } 
.mousepiece-merit-list .title { font-size: 1.3rem; font-weight: bold; }


@media screen and (max-width: 900px) {
  .mousepiece-merit .inner{ padding: 0; }
  .mousepiece-merit .img { position: relative; width: 100%; aspect-ratio: 3 / 2; margin: 2rem auto 0;  }
  
  .mousepiece-merit-list .title { font-size: 1.2rem; }
  .mousepiece-merit-list > li::before { font-size: 2.5rem; }
}
.itero { display: flex; justify-content: space-between; }
.itero .text { width: 50%; }
.itero .img { width: 45%; }
.itero .img img { border-radius: 20px; box-shadow: -20px 20px 0 #E2EEF8; }

@media screen and (max-width: 900px) {
  .itero { flex-direction: column; }
  .itero .text { width: 100%; }
  .itero .img { width: 60%; margin: 2rem auto 0; }
  .itero .img img { box-shadow: -10px 10px 0 #E2EEF8; }
}


.price-list { margin-bottom: 1em; }
.price-list .item { display: flex; justify-content: space-between; border-bottom: 1px solid #CCCCCC; position: relative; font-size: 1.5rem; padding: .3em 0; align-items: flex-end; flex-wrap: wrap; }
.price-list .item::before { content: ''; width: 60px; height: 1px; display: block; background: #6DA9DA; position: absolute; left: 0; bottom: -1px; margin: auto; }
.price-list dt { font-weight: 600; }
.price-list dt span { display: block; font-size: 1rem; font-weight: 500; line-height: 1.2; }
.price-list dd { font-weight: 500; font-size: 1.125rem; }
.price-list dd span { font-size: 1.8rem; font-weight: 600; font-family: 'Figtree', sans-serif; }

.price-list .note { width: 100%; font-size: .8rem; }

.list-note > li { padding-left: 1em; }
.list-note > li::before { content: '※'; margin-left: -1em; }

@media screen and (max-width: 900px) {
  .price-list .item { font-size: 1.2rem; flex-wrap: wrap; }
  .price-list dd {  font-size: 1rem; margin: 0 0 0 auto; }
  .price-list dd span  { font-size: 1.35rem; }
}


.cosmetic-main { text-align: center; font-size: 1.125rem; line-height: calc(40 / 18); display: grid; grid-template-columns: 28% minmax(0, 1fr) 28%; gap: 1rem; align-items: center; }
.cosmetic-main .title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1em; letter-spacing: .1em; }

.cosmetic-main .img1 { overflow: hidden; padding-top: 2em; }
.cosmetic-main .img1 img { width: 105%; margin-left: -5%;  max-width: none; }

.cosmetic-main .img2 { overflow: hidden; padding-top: 2em; }
.cosmetic-main .img2 img {  width: 105%; margin-right: -5%;  max-width: none; }

@media screen and (max-width: 1366px) {
  .cosmetic-main { grid-template-columns: 23% minmax(0, 1fr) 23%; font-size: 1rem; }
  .cosmetic-main .title { font-size: 1.3rem; }
}

@media screen and (max-width: 900px) {
  .cosmetic-main { display: flex; flex-direction: column-reverse; }
  .cosmetic-main .title { line-height: 1.7; }
  .cosmetic-main .text { margin: 0 auto; width: 90%; text-align: left; }
  .cosmetic-main .img1 { width: 200px; margin: -2rem auto 0 0; }
  .cosmetic-main .img2 { width: 200px; margin: -40px 0 -2rem auto; }
}



.implant-main { text-align: center; font-size: 1.125rem; line-height: calc(40 / 18); display: grid; grid-template-columns: 25% minmax(0, 1fr) 25%; gap: 1rem; align-items: center; }
.implant-main .title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1em; letter-spacing: .1em; }

.implant-main .img1 { overflow: hidden; }
.implant-main .img1 img { width: 105%; margin-left: -5%;  max-width: none; }

.implant-main .img2 { overflow: hidden; }
.implant-main .img2 img {  width: 105%; margin-right: -5%;  max-width: none; }

@media screen and (max-width: 1200px) {
  .implant-main {  grid-template-columns: 20% minmax(0, 1fr) 20%; font-size: 1rem; }
  .implant-main .title { font-size: 1.3rem; line-height: 1.5; }
}
@media screen and (max-width: 900px) {
  .implant-main { display: flex; flex-direction: column-reverse; }
  .implant-main .text { width: 90%; margin: 0 auto; text-align: left; }
  
  .implant-main .title { width: 65%; margin-top: -4rem; }
  .implant-main .img1  { width: 40%; margin: 0 auto 0 0; }
  .implant-main .img2  { width: 40%; margin: -40px 0 0 auto; }
}
.implant-merit { display: flex; justify-content: space-between; }
.implant-merit .title { width: 28%; }
.implant-merit .title img { width: 90%; }
.implant-merit .text { width: 70%; }

@media screen and (max-width: 900px) {
  .implant-merit { flex-wrap:wrap; }
  .implant-merit .title { width: 100%; }
  .implant-merit .text { width: 100%; margin-top: 2rem;}
}

.implant-price { display: flex; }
.implant-price .title { width: 28%; }
.implant-price .text { width: 70%;  }

@media screen and (max-width: 900px) {
  .implant-price { flex-wrap:wrap; }
  .implant-price .title { width: 100%; }
  .implant-merit .title img { width: 60%; margin: 0 auto; display: block; max-width: 200px; }
  .implant-price .text { width: 100%; margin-top: 2rem;}
}

.access-list .item { display: grid; grid-template-columns: 6em 7em minmax(0, 1fr); }
.access-list .item dt::before { content: '・'; }

.train-img { display: grid; grid-template-areas: "map img1" "map img2"; gap: 20px; grid-template-columns: 60% minmax(0, 1fr); }

.train-img .img1 { grid-area: map; }
.train-img .img2 { grid-area: img1; }
.train-img .img3 { grid-area: img2; }

.car-img { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

@media screen and (max-width: 900px) {
  .train-img  { grid-template-areas: "map map" "img1 img2"; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;  }
  .car-img { grid-template-columns: 1fr; gap: 10px; }
}

.access-map { width: 100%; height: 500px; position: relative; }
.access-map iframe { width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; }


@media screen and (min-width: 900px) {
  .access-map { height: 400px;}
}