@charset "UTF-8";
/**************************************/
/* -------------------------
 * 共通
 * ------------------------- */
.ff-barlow {
  font-family: "Barlow", sans-serif;
}

.highlight {
  color: #ebb27b;
}

:root {
  --navy: #3c4255;
  --orange: #ebb27b;
}

/* フォントサイズ */
:root {
  --fz90: clamp(2.5rem, 5.4vw, 9rem);
  --fz60: clamp(2.5rem, 3.6vw, 6rem);
  --fz52: clamp(2.2rem, 3.2vw, 5.2rem);
  --fz50: clamp(2.5rem, 3vw, 5rem);
  --fz42: clamp(2rem, 2.6vw, 4.2rem);
  --fz36: clamp(2rem, 2.2vw, 3.6rem);
  --fz32: clamp(1.8rem, 2vw, 3.2rem);
  --fz30: clamp(1.8rem, 1.9vw, 3rem);
  --fz28: clamp(1.8rem, 1.7vw, 2.8rem);
  --fz24: clamp(1.8rem, 1.9vw, 2.4rem);
  --fz21: clamp(1.6rem, 1.9vw, 2.1rem);
  --fz20: clamp(1.6rem, 1.2vw, 2rem);
  --fz18: clamp(1.6rem, 1.9vw, 1.8rem);
}

/* 改行 */
.br-834 {
  display: none;
}
@media (max-width: 834px) {
  .br-834 {
    display: block;
  }
}

.no-br-834 {
  display: block;
}
@media (max-width: 834px) {
  .no-br-834 {
    display: none;
  }
}

.actionBox ul li.net p {
  color: #323232;
}

.secInrW h2 span small {
  font-weight: 300;
}

.secInrW h2 span:before {
  font-weight: 500;
}

/* -------------------------
 * ヘッダー
 * ------------------------- */
.inIcon {
  width: 24px;
  height: auto;
  aspect-ratio: 1;
}

/* -------------------------
 * SPナビ
 * ------------------------- */
@media (max-width: 1024px) {
  #spNav {
    padding-top: 0;
  }
}

.spNav__inner {
  padding-block: 14rem 14rem;
  background: #f9f9f9;
  height: 100%;
  overflow-y: auto;
}

@media (max-width: 1024px) {
  #spNav::after {
    height: 100vh;
  }
}

@media only screen and (max-width: 1024px) {
  #spNav.active::before,
  #spNav.active::after {
    display: none;
  }
}
/* -------------------------
 * MV
 * ------------------------- */
#mv {
  margin-top: 70px;
  position: relative;
  background: url(../../images/mv.webp) no-repeat center center/cover;
  height: calc(100vh - 70px);
}
@media (max-width: 1024px) {
  #mv {
    margin-top: 0px;
    height: 100vh;
  }
}
@media (max-width: 639px) {
  #mv {
    height: 132vh;
  }
}

/* -------------------------
 * MV コピー
 * ------------------------- */
.mvCopy {
  position: absolute;
  top: 12%;
  left: 18%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(7px); /* ブラー */
  -webkit-backdrop-filter: blur(7px); /* Safari対応 */
  padding: 4rem 2%;
}
@media (max-width: 834px) {
  .mvCopy {
    left: 7%;
    top: 17%;
    padding: 3rem 2%;
  }
}
@media (max-width: 499px) {
  .mvCopy {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 14%;
  }
}

.mvCopy__main {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-weight: 500;
  font-size: var(--fz30);
  line-height: 1.5;
}
@media (max-width: 834px) {
  .mvCopy__main {
    font-size: 1.8rem;
  }
}

.mvCopy__en {
  font-size: var(--fz20);
  font-weight: 300;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 834px) {
  .mvCopy__en {
    font-size: 1.3rem;
  }
}

/* -------------------------
 * MV バナー
 * ------------------------- */
.mvBanner {
  position: absolute;
  right: 5%;
  top: 50%;
  color: #fff;
}
@media (max-width: 834px) {
  .mvBanner {
    top: 57%;
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}

.mvBanner__main {
  background-color: var(--navy);
  width: 34rem;
  height: 34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  padding-top: 3.5rem;
}
@media (max-width: 834px) {
  .mvBanner__main {
    width: 26rem;
    height: 26rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 0;
  }
}

.mvBanner__mainInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.mvBanner__mainTop {
  font-size: 2.1rem;
  font-weight: bold;
}
@media (max-width: 834px) {
  .mvBanner__mainTop {
    font-size: 1.5rem;
  }
}

.mvBanner__mainImg {
  width: 17rem;
  margin-block: 1.3rem 1.5rem;
}
@media (max-width: 834px) {
  .mvBanner__mainImg {
    width: 13rem;
  }
}

.mvBanner__mainInfo {
  font-size: 1.2rem;
  line-height: 1.5;
  -webkit-transform: translateX(-26px);
          transform: translateX(-26px);
}
@media (max-width: 834px) {
  .mvBanner__mainInfo {
    -webkit-transform: unset;
            transform: unset;
    font-size: 1rem;
  }
}

.mvBanner__sub {
  position: absolute;
  right: -9%;
  bottom: 0;
  border-radius: 50%;
  background-color: #ebb27b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 12.4rem;
  height: 12.4rem;
  aspect-ratio: 1;
}
@media (max-width: 834px) {
  .mvBanner__sub {
    width: 9rem;
    height: 9rem;
    bottom: 78%;
    right: 0;
  }
}
.mvBanner__sub .row1 {
  font-weight: bold;
  font-size: 2rem;
}
@media (max-width: 834px) {
  .mvBanner__sub .row1 {
    font-size: 1.5rem;
  }
}
.mvBanner__sub .row2 {
  font-size: 1.8rem;
}
@media (max-width: 834px) {
  .mvBanner__sub .row2 {
    font-size: 1.6rem;
  }
}
.mvBanner__sub .num {
  font-size: 5rem;
  font-weight: 600;
}
@media (max-width: 834px) {
  .mvBanner__sub .num {
    font-size: 3rem;
  }
}

/* -------------------------
 * MEDICAL HOURS
 * ------------------------- */
#area02 {
  padding-block: 8rem;
}
@media (max-width: 834px) {
  #area02 {
    padding-block: 0rem;
  }
}

.medicalHour__inner {
  display: grid;
  grid-template-columns: 339fr 1387fr;
  gap: 3rem 16%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 834px) {
  .medicalHour__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.bscTbl01 tr {
  border: 1px solid #f6d9b0;
}
.bscTbl01 .holiday {
  border-right: 1px solid #f6d9b0;
}

/* -------------------------
 * CTA
 * ------------------------- */
.actionBox ul li a small {
  font-weight: 500;
}

/* -------------------------
 * LIFE SMILES DENTAL CARE / 診療方針
 * ------------------------- */
#area05 {
  background: url(../../images/area05_bg.webp) center center no-repeat;
  background-size: cover;
}
#area05 .whBox li:first-child {
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

/* -------------------------
 * EQUIPMENT / 設備紹介
 * ------------------------- */
#area07 .carouselBox .swiper-container .arrowBox .btmArrow .swiper-button-next,
#area07 .carouselBox .swiper-container .arrowBox .btmArrow .swiper-button-prev {
  width: 50px;
  height: 50px;
  background: #3a3e49;
  color: #f2eee8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#area07 .carouselBox .swiper-container .arrowBox .btmArrow .swiper-button-next::after,
#area07 .carouselBox .swiper-container .arrowBox .btmArrow .swiper-button-prev::after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#area07 .carouselBox .swiper-container .arrowBox .btmArrow .swiper-button-next .swiper-navigation-icon,
#area07 .carouselBox .swiper-container .arrowBox .btmArrow .swiper-button-prev .swiper-navigation-icon {
  display: none;
}

#area07 .carouselBox .swiper-container .arrowBox .btmArrow {
  width: 110px;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-bottom: 5rem;
}

/* -------------------------
 * font-family: NotoSansCJKjp;
 * ------------------------- */
#area09 .borderBox dl dt {
  font-weight: 600;
}

/* -------------------------
 * 医院情報
 * ------------------------- */
.addressBox {
  padding: 2rem 5%;
  border: solid 1px #ddd;
  margin-bottom: 3rem;
}

.addressBox__item + .addressBox__item {
  margin-top: 3rem;
}

.addressBox__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 1rem;
}

.addressBox__heading {
  font-size: 1.8rem;
  padding: 0.2rem 1.5rem 0.3rem;
  color: #fff;
}
@media (max-width: 834px) {
  .addressBox__heading {
    font-size: 1.6rem;
  }
}

.addressBox__item--before .addressBox__heading {
  background-color: #84899a;
}

.addressBox__item--after .addressBox__heading {
  background-color: #3c4255;
}

.addressBox__google-map-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.8rem;
  padding: 0.8rem 2rem;
  border-radius: 25px;
  border: solid 1px #ddd;
}
.addressBox__google-map-link .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
  color: var(--orange);
  font-size: 2.5rem;
}
.addressBox__google-map-link:hover {
  text-decoration: none;
}

.infoWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.inInfo img {
  width: 2.5rem;
  height: auto;
  aspect-ratio: 1;
}

#area10 .inInfo a {
  padding: 1rem 0.8rem;
  width: auto;
  gap: 0.8rem;
}

/* -------------------------
 * footer
 * ------------------------- */
#copyright {
  font-style: normal;
}

/* -------------------------
 * news
 * ------------------------- */
#area11 .secInr {
  padding-top: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (max-width: 834px) {
  #area11 .secInr {
    padding-top: 30px;
  }
}

#area11 .secInr h2 {
  font-size: 40px;
  font-size: 4rem;
  /* padding-top: 20px; */
}

#area11 .secInr ul {
  width: 80%;
}

#area11 ul li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #dddddd;
}

#area11 ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.4;
}

#area11 ul li a:hover {
  text-decoration: none;
  color: #ebb27b;
}

#area11 ul li .date {
  font-family: "Barlow", sans-serif;
  margin-right: 20px;
}

#area11 ul li .category {
  font-family: "Barlow", sans-serif;
  background: #ebb27b;
  padding: 10px 30px;
  color: #fff;
  font-size: 12px;
  font-size: 1.2rem;
  margin-right: 20px;
}

#area11 ul li .rightArrow::before {
  position: absolute;
  right: 0px;
  width: 12px;
  height: 1px;
  /*background: #333;*/
  content: "";
  top: 39px;
}

#area11 ul li .rightArrow::after {
  position: absolute;
  content: "";
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#area11 .secInr .btn {
  position: absolute;
  top: 150px;
  left: 0;
}

#area11 .secInr .btn a {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #3d4253;
  border-radius: 5px;
  display: block;
}

/* for SP */
@media only screen and (max-width: 900px) {
  #area11 .secInr {
    padding: 30px 0;
  }
  #area11 .secInr h2 {
    font-size: 30px;
    font-size: 3rem;
    padding-top: 20px;
  }
  #area11 .secInr ul {
    width: 100%;
  }
  #area11 ul li {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #area11 ul li a {
    display: block;
  }
  #area11 ul li .title {
    width: 100%;
    margin-top: 10px;
  }
  #area11 ul li .category {
    padding: 6px 18px;
    margin-right: 0;
  }
  #area11 ul li .date {
    margin-right: 10px;
  }
  #area11 ul li .rightArrow::before {
    top: 59px;
  }
  #area11 .secInr .btn {
    width: 100px;
    position: absolute;
    top: 50px;
    left: 72%;
    text-align: center;
  }
}/*# sourceMappingURL=top.css.map */