@charset "utf-8";
/*=============================================
* :root
=============================================*/
:root {
  --ff-sans: "Noto Sans JP", sans-serif;
  --ff-serif: "Noto Serif JP", serif;
  --ff-cormorant: "Cormorant Infant", serif;
  --base-color-black: #000;
  --base-color-black-rgb: 0, 0, 0;
  --base-color-white: #fff;
  --theme-color: #706963;
  --theme-clinic-color: #766c67;
  --theme-academy-color: #1f1a19;
  --theme-pink-color: #ed8ba1;
  --theme-light-color: #ebe5dd;
  --theme-light-color-rgb: 235, 229, 221;
  --theme-black-color: #1e1d1c;
  --theme-red-color: #bb3529;
  --theme-gray-color: #666;
  --theme-gray-color-rgb: 102, 102, 102;
  --theme-gray-light-color: #bbb;
}



/*=============================================
* reset & base
=============================================*/
body {
  background-color: initial;
  color: var(--theme-black-color);
  font-weight: 400;
}

h1, h2, h3, h4, p {
  font-weight: 400;
}

a:hover {
  color: var(--theme-black-color);
}

img, a img {
  height: auto;
  vertical-align: bottom;
  width: 100%;
}

::-webkit-scrollbar {
  background-color: #e6e6e6;
  border-radius: 5px;
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}



/*=============================================
* overwrite common.css
=============================================*/
.ff_sans {
  font-family: var(--ff-sans);
}

.ff_serif {
  font-family: var(--ff-serif);
}

.ff_cormorant {
  font-family: var(--ff-cormorant);
}

header {
  background-color: var(--theme-clinic-color);
  border-top: none;
  height: auto;
}

header.navbar {
  padding: .25rem 0;
}

header.navbar nav.container-fluid {
  padding: 0 .525rem 0 2.0rem;
}

.navbar-brand {
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 9.1rem;
  z-index: 10;
}

.header_button {
  position: relative;
}

.header_menu_outer {
  display: none;
}

.side_menu {
  z-index: auto;
}

.side_menu_bg.side_menu_off,
.side_menu_bg.side_menu_on {
  background-color: var(--theme-clinic-color);
}

.side_menu_contents a {
  color: var(--base-color-white);
  font-size: 1.6rem;
  letter-spacing: .1em;
  line-height: 2.8rem;
  padding: 1rem 0 1rem .1em;
}

footer {
  background-color: var(--theme-color);
  padding: 5.55rem 0 1.97rem;
}

footer img {
  width: 100%;
}

#footer_logo {
  border-bottom: none;
  display: block;
  margin: 0 auto;
  opacity: 1;
  padding: 0;
  transition-duration: .6s;
  transition-property: opacity;
  width: 12rem;
}

@media (any-hover: hover) {
  #footer_logo:hover {
    opacity: 0.6;
  }
}

@media (any-hover: none) {
  #footer_logo:active {
    opacity: 0.6;
  }
}

#footer_logo img {
  height: auto;
}

#copyright {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.5rem;
  margin-top: 5.6rem;
  padding-left: .1em;
  position: static;
  text-align: center;
  transform: none;
  width: 100%;
}

#page_top {
  bottom: .89rem;
  height: 4.7rem;
  right: 2rem;
  width: 4.7rem;
}

#page_top>a {
  opacity: 1;
  transition-duration: .6s;
  transition-property: opacity;
}

@media (any-hover: hover) {
  #page_top>a:hover {
    opacity: 0.6;
  }
}

@media (any-hover: none) {
  #page_top>a:active {
    opacity: 0.6;
  }
}


@media (min-width:768px) {
  header {
    height: 6.4rem;
  }

  header.navbar {
    padding: 0;
  }

  header.navbar nav.container-fluid {
    padding: 0 1.85rem 0 3.0rem;
  }

  .navbar-brand {
    width: 10.1rem;
  }

  .header_menu_outer {
    display: block;
    margin: 0;
    position: static;
    transform: none;
  }

  .header_button[aria-expanded=true]+.header_menu_outer {
    display: none;
  }

  #header_menu {
    column-gap: .18rem;
  }

  .header_menu_outer li a {
    background-image: linear-gradient(to right, rgba(var(--base-color-black-rgb), 0) 50%, rgba(var(--theme-light-color-rgb), .3) 50%);
    padding: .5rem 1.35rem .5rem 1.47rem;
  }

  footer {
    padding: 6.03rem 0 1.97rem;
  }

  #footer_logo {
    width: 15.2rem;
  }

  #copyright {
    margin-top: 4.84rem;
  }

  #page_top {
    bottom: 1.4rem;
    right: .75rem;
  }
}

@media (min-width:1200px) {
  #page_top {
    right: 1.4rem;
  }
}



/*=============================================
* common class
=============================================*/
.hover_translucent {
  opacity: 1;
  transition-duration: .6s;
  transition-property: opacity;
}

.common_btn {
  background-color: var(--base-color-white);
  border-radius: 50rem;
  color: var(--theme-color);
  display: block;
  font-size: 1.4rem;
  letter-spacing: .1em;
  line-height: 1.7rem;
  opacity: 1;
  padding: .8rem 0 .8rem .1em;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition-duration: .6s;
  transition-property: opacity;
  width: 22rem;
}

.common_btn::before {
  border-radius: 50rem;
  box-shadow: .5rem .5rem .5rem rgba(var(--theme-gray-color-rgb), .1);
  content: "";
  height: 100%;
  left: 0;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  width: 100%;
}

.common_btn::after {
  content: "→";
  font-family: var(--ff-sans);
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translate(0, -50%);
}

.common_btn:hover {
  text-decoration: none;
}

@media (any-hover: hover) {
  .hover_translucent:hover {
    opacity: 0.6;
  }

  .common_btn:hover {
    color: var(--theme-color);
    opacity: 0.6;
    text-decoration: none;
  }
}

@media (any-hover: none) {
  .hover_translucent:active {
    opacity: 0.6;
  }

  .common_btn:active {
    color: var(--theme-color);
    opacity: 0.6;
    text-decoration: none;
  }
}



/*=============================================
* section
=============================================*/
.section_inner {
  margin: 0 auto;
  padding-top: 6.2rem;
  width: calc(100% - 4rem);
}

.section_title {
  color: var(--theme-color);
  font-size: 2.2rem;
  letter-spacing: .2em;
  line-height: 3rem;
  padding: 0 0 1.6rem .2em;
  position: relative;
}

.section_title::after {
  background-color: var(--theme-color);
  bottom: 0;
  content: "";
  height: .1rem;
  position: absolute;
  width: 4.5rem;
  left: 50%;
  transform: translate(-50%, 0);
}


@media (min-width:768px) {
  .section_inner {
    padding-top: 8.2rem;
    width: calc(100% - 10.4rem);
  }

  .section_title {
    font-size: 2.6rem;
    line-height: 3.4rem;
  }

  .section_title::after {
    width: 5.5rem;
  }
}

@media (min-width:992px) {
  .section_inner {
    width: 96rem;
  }
}