@charset "utf-8";

/*------------------------------ 共通 ------------------------------*/
html:not(:has(#school)) {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  font-family: "Noto Sans JP", sans-serif;
}

main {
  padding-top: 130px;
}

a {
  transition: .5s;
}

a::before {
  transition: .5s;
}

a::after {
  transition: .5s;
}

.logo:hover {
  opacity: .7;
}

.hover-border {
  position: relative;
}

.hover-border:hover::after {
  width: 100%;
}

.hover-border::after {
  position: absolute;
  content: "";
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: linear-gradient(to right, #D4B392, #B3B4B5);
  z-index: -1;
}

.text {
  line-height: 1.75;
  letter-spacing: 0.075em;
  font-weight: 500;
}

.dark-mask {
  position: relative;
}

.dark-mask::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.container {
  width: 90%;
  margin-inline: auto;
}

.inner {
  width: 90%;
  margin-inline: auto;
}

.flex {
  display: flex;
}

.dib {
  display: inline-block;
}

picture {
  display: block;
}

.heading {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.2em;
}

.heading h2 {
  letter-spacing: 0.2em;
  font-weight: 500;
}

.heading h1 {
  letter-spacing: 0.2em;
}

.heading p {
  letter-spacing: 0.2em;
}

.under-arrow {
  letter-spacing: 0.05em;
  font-weight: 600;
  font-family: "Playfair Display", serif;
  position: relative;
  padding-bottom: 4px;
}

.under-arrow::before {
  position: absolute;
  content: "";
  height: 1px;
  background-color: #000000;
  bottom: 0;
  right: 0;
}

.under-arrow::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  bottom: -2px;
  transform: rotate(45deg);
  right: 0;
}

.under-arrow:hover {
  color: #1e50a2;
}

.under-arrow:hover::before {
  background-color: #1e50a2;
}

.under-arrow:hover::after {
  border-top: 1px solid #1e50a2;
  border-right: 1px solid #1e50a2;
}

.right-arrow {
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  position: relative;
}

.right-arrow::before {
  position: absolute;
  content: "";
  width: 69px;
  height: 1px;
  background-color: #000000;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
}

.right-arrow::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  top: 50%;
  right: -22px;
  transform: translateY(-50%) rotate(45deg);
}

.right-arrow:hover {
  background-color: #1e50a2;
  color: #fff;
}

.right-arrow:hover::before {
  background-color: #1e50a2;
}

.right-arrow:hover::after {
  border-top: 1px solid #1e50a2;
  border-right: 1px solid #1e50a2;
}

.under-fv {
  position: relative;
}

.under-fv .inner {
  height: 480px;
  align-items: center;
}

.under-fv .img {
  position: absolute;
  top: 0;
  left: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: -1;
  filter: opacity(30%);
}

.under-fv .img img {
  height: 480px;
  object-fit: cover;
  object-position: left;
  width: 100%;
}

.breadcrumbs .inner {
  font-weight: 500;
}

.breadcrumbs .inner a {
  position: relative;
}

.breadcrumbs .inner a::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  background-color: #000;
  width: 15px;
}

.breadcrumbs .inner a:hover::before {
  width: 100%;
}

.breadcrumbs .inner a::before {
  position: absolute;
  content: "";
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #D4B392, #B3B4B5);
  z-index: -1;
}

.gray-scale {
  filter: grayscale(100%);
}

.js-in.gray-scale.active {
  animation: grayScale 1.5s ease-in forwards;
}

@keyframes grayScale {
  0% {}

  100% {
    filter: grayscale(0%);
  }
}

/* 見出し アニメ */
.heading .text-delay {
  line-height: 1;
}

.heading.js-in.active .text-delay span {
  display: inline-block;
}

.heading.js-in.active .text-delay>span {
  overflow: hidden;
}

.heading .text-delay>span>span {
  opacity: 0;
}

.heading.js-in.active .text-delay>span>span {
  animation: showTextFromBottom .7s forwards ease-in-out;
  transform: translateY(100%);
}

@keyframes showTextFromBottom {
  0% {}

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}


/*------------------------------ ヘッダー ------------------------------*/
header {
  position: fixed;
  background-color: #fff;
  width: 100%;
  z-index: 5;
  box-shadow: 0 3px 3px 0px #0000000a;
}

header .container {
  transition: .3s;
  justify-content: space-between;
  align-items: center;
  height: 130px;
}

header .container nav ul li a {
  letter-spacing: 0.1em;
  font-weight: 600;
}


/*------------------------------ トップ ------------------------------*/
#top .fv {
  text-align: center;
  color: #fff;
  position: relative;
}

#top .fv .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.17em;
  white-space: nowrap;
  animation: fvIn 1.5s 1.5s forwards ease-in-out;
  opacity: 0;
}

@keyframes fvIn {
  0% {}

  100% {
    opacity: 1;
  }
}

#top .fv .content h2 {
  line-height: 1.41;
  font-weight: 400;
}

#top .fv .content p {
  line-height: 1.6;
  font-weight: 600;
}

#top .fv .scroll {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 0.05em;
  font-family: "Playfair Display", serif;
  opacity: 0;
  animation: fvIn 2s 2s forwards ease-in-out;
  font-weight: 600;
}

#top .fv .scroll::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 9px;
  background-color: #fff;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  animation: scrollAnime 1.5s 3.2s infinite ease-in-out alternate;
  opacity: 0.5;
}

@keyframes scrollAnime {
  0% {}

  100% {
    height: 59px;
    opacity: 1;
  }
}

.fv-img {
  overflow: hidden;
  position: relative;
}

.fv-img::before,
.fv-img::after {
  animation: 1.5s .5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.fv-img::before {
  animation-name: fv-img-before;
  inset: 0 50% 0 0;
}

.fv-img::after {
  animation-name: fv-img-after;
  inset: 0 0 0 50%;
}

.fv-img img {
  width: 100%;
}

@keyframes fv-img-before {
  100% {
    transform: translateY(100%);
  }
}

@keyframes fv-img-after {
  100% {
    transform: translateY(-100%);
  }
}

#top .fv .img {
  position: relative;
  z-index: -1;
}

#top .news .inner .news-wrap a {
  border-right: 1px solid #808080;
  position: relative;
}

#top .news .inner .news-wrap a:first-of-type {
  border-left: 1px solid #808080;
}

#top .news .inner .news-wrap a time {
  letter-spacing: 0.1em;
}

#top .news .inner .news-wrap a p:first-of-type {
  font-weight: 600;
}

#top .news .inner .news-wrap a p span:first-of-type {
  background: linear-gradient(#D4B392, #B3B4B5) 0 100%/0 2px no-repeat;
  transition: background .4s;
  text-decoration: none;
}

#top .news .inner .news-wrap a:hover p span:first-of-type {
  background-size: 100% 2px;
}

#top .news .inner .news-wrap a .term {
  position: absolute;
  bottom: 0;
  color: #AAAAAA;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-family: "Playfair Display", serif;
}

#top .news .inner .link-wrap {
  text-align: right;
}

#top .concept {
  color: #fff;
  position: relative;
}

#top .concept .img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
}

#top .concept .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}

#top .concept .inner p {
  letter-spacing: 0.075em;
  line-height: 2.08;
  font-weight: 600;
}

#top .takumidou .inner {
  align-items: center;
}

#top .takumidou .inner .img img {
  width: 100%;
}

#top .salon-school {
  color: #fff;
}

#top .salon-school .content-wrap {
  position: relative;
}

#top .salon-school .salon .content {
  margin-left: auto;
}

#top .salon-school .content-wrap .content .under-arrow::before {
  background-color: #fff;
}

#top .salon-school .content-wrap .content .under-arrow::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

#top .salon-school .content-wrap .content .under-arrow:hover::before {
  background-color: #1e50a2;
}

#top .salon-school .content-wrap .content .under-arrow:hover::after {
  border-top: 1px solid #1e50a2;
  border-right: 1px solid #1e50a2;
}

#top .salon-school .content-wrap {
  position: relative;
}

#top .salon-school .content-wrap .img {
  position: absolute;
  top: 0;
  z-index: -1;
}

#top .salon-school .salon .img {
  left: 0;
}

#top .salon-school .school .img {
  right: 0;
}

#top .salon-school .content-wrap .img img {
  object-fit: cover;
}

#top .salon-school .school .img img {
  object-position: right;
}


/*------------------------------ フッター ------------------------------*/
footer {
  text-align: center;
  letter-spacing: 0.075em;
}

footer address {
  line-height: 2;
  font-weight: 500;
}

footer .reservation p {
  font-weight: 500;
}

footer .reservation .links {
  justify-content: center;
}

footer .reservation .links a:hover {
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .5));
}

footer .wax {
  border-top: 1px solid #000000;
}

footer .wax a {
  font-weight: 500;
}

footer .copy {
  background-color: #AC806D;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer .copy small {
  color: #fff;
  letter-spacing: 0.05em;
  font-family: "Noto Serif JP", serif;
}


/*------------------------------ サロン ------------------------------*/
#salon .removal {
  background: linear-gradient(to right, rgba(223, 145, 141, 0.62) 0%, rgba(208, 165, 177, 0.62) 23.47%, rgba(194, 187, 216, 0.62) 50.12%, rgba(186, 185, 216, 0.62) 58.8%, rgba(167, 182, 217, 0.62) 71.46%, rgba(135, 177, 218, 0.62) 86.49%, rgba(101, 172, 220, 0.62) 100%);
}

#salon .removal .inner .img img {
  width: 100%;
}

#salon .removal .inner .content h2 {
  font-weight: 600;
}

#salon .menu .inner .each-menu .img img {
  width: 100%;
}

#salon .menu .inner .each-menu .img .heading {
  position: absolute;
}

#salon .menu .inner .each-menu table {
  width: 100%;
}

#salon .menu .inner .each-menu table thead tr th {
  display: flex;
  align-items: center;
  font-weight: 700;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

#salon .menu .inner .each-menu table tbody {
  display: block;
}

#salon .menu .inner .each-menu table tbody tr {
  display: block;
}

#salon .menu .inner .each-menu table tbody tr td {
  display: block;
  background-image: repeating-linear-gradient(90deg, #808080, #808080 4px, transparent 4px, transparent 8px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px;
  padding: 10px 0 5px;
}

#salon .menu .inner .each-course h4 {
  background-color: #D7D7D7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-weight: 600;
  padding: 5px 20px;
}


/*------------------------------ 予約とアクセス ------------------------------*/
.reservation-access {
  color: #fff;
}

.reservation-access .reservation {
  background-color: #BC9B80;
  align-items: center;
  justify-content: center;
}

.reservation-access .reservation .content {
  text-align: center;
}

.reservation-access .reservation .content .links {
  justify-content: center;
}

.reservation-access .reservation .content .links a:hover {
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .5));
}

.reservation-access .access {
  /* background-color: #B7B7B7; */
  background-color: rgba(0, 0, 0, .6);
  justify-content: center;
  align-items: center;
  position: relative;
}

.reservation-access .access .img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.reservation-access .access .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

/* .reservation-access .access iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
} */


.reservation-access .access a {
  font-family: "Playfair Display", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  position: relative;
  font-weight: 600;
}

.reservation-access .access a::before {
  position: absolute;
  content: "";
  height: 1px;
  background-color: #fff;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 1100px) {
  .reservation-access .access a::before {
    width: 80px;
  }
}

.reservation-access .access a::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.reservation-access .access a:hover {
  background-color: #1e50a2;
  border: 1px solid #1e50a2;
  color: #fff;
}

.reservation-access .access a:hover::before {
  background-color: #1e50a2;
}

.reservation-access .access a:hover::after {
  border-top: 1px solid #1e50a2;
  border-right: 1px solid #1e50a2;
}


/*------------------------------ スクール ------------------------------*/
#school .takumidou .inner {
  align-items: center;
}

#school .takumidou .inner .img img {
  width: 100%;
}

#school .quality-about {
  background: linear-gradient(rgba(223, 145, 141, 0.62) 0%, rgba(208, 165, 177, 0.62) 23.47%, rgba(194, 187, 216, 0.62) 50.12%, rgba(186, 185, 216, 0.62) 58.8%, rgba(167, 182, 217, 0.62) 71.46%, rgba(135, 177, 218, 0.62) 86.49%, rgba(101, 172, 220, 0.62) 100%);
}

#school .quality-about .inner .content h3 {
  line-height: 1.59;
  font-weight: 600;
}

#school .quality-about .inner .quality .img {
  position: relative;
}

#school .quality-about .inner .quality .content p {
  line-height: 1.75;
}

#school .point {
  position: relative;
  height: auto;
}

#school .point::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #00000085;
  top: 0;
  left: 0;
  z-index: -1;
}

#school .point .bg {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: 100vh;
  background-color: #686868;

}

#school .point .bg .gray {
  background-color: #686868;
}

#school .point .bg .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#school .point .container {
  margin-top: -100vh;
}

#school .point .container .each-point {
  justify-content: center;
  align-items: center;
}

#school .point .container .each-point .img img {
  width: 100%;
}

#school .point .container .each-point .content {
  width: 40%;
}

@media screen and (max-width: 1000px) {
  #school .point .container .each-point .content {
    width: 45%;
  }
}

#school .point .container .each-point .content h2 {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.2em;
  font-weight: 600;
}

#school .point .container .each-point .content h2 span {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
}

#school .point .container .each-point:first-of-type .content h2 {
  color: #DF918D;
}

#school .point .container .each-point:nth-of-type(2) .content h2 {
  color: #DCC28E;
}

#school .point .container .each-point:nth-of-type(3) .content h2 {
  color: #C4DC8E;
}

#school .point .container .each-point:nth-of-type(4) .content h2 {
  color: #8EDCC2;
}

#school .point .container .each-point:last-of-type .content h2 {
  color: #8EC4DC;
}

#school .point .container .each-point .content h3 {
  color: #fff;
  line-height: 1.62;
  font-weight: 700;
}

#school .point .container .each-point .content p {
  color: #fff;
}

#school .chance {
  background: linear-gradient(#131217 7.49%, #0c0c0f 62.76%, #060608 100%);
  position: relative;
  display: flex;
  align-items: center;
}

#school .chance .inner .content {
  color: #fff;
  position: relative;
  z-index: 1;
}

#school .chance .inner .content h2 {
  letter-spacing: 0.1em;
  line-height: 1.59;
  font-weight: 700;
}

#school .chance .inner .content p {
  letter-spacing: 0.075em;
  line-height: 2;
  font-weight: 500;
}

#school .chance .img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  height: 100%;
}

#school .chance .img img {
  height: 100%;
  object-fit: cover;
}

#school .reason {
  background: linear-gradient(#060608 0%, #25252d 46.66%);
}

#school .reason h2 {
  color: #fff;
  letter-spacing: 0.075em;
  text-align: center;
  font-weight: 700;
}

#school .reason .inner {
  flex-wrap: wrap;
}

#school .reason .inner .each-reason {
  color: #fff;
}

#school .reason .inner .each-reason p:first-of-type {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.2em;
  font-style: italic;
}

#school .reason .inner .each-reason:last-of-type {
  position: relative;
}

#school .reason .inner .each-reason:first-of-type p:first-of-type {
  color: #DF918D;
}

#school .reason .inner .each-reason:nth-of-type(2) p:first-of-type {
  color: #DCC28E;
}

#school .reason .inner .each-reason:nth-of-type(3) p:first-of-type {
  color: #C4DC8E;
}

#school .reason .inner .each-reason:nth-of-type(4) p:first-of-type {
  color: #8EDCC2;
}

#school .reason .inner .each-reason:last-of-type p:first-of-type {
  color: #8EC4DC;
}

#school .reason .inner .each-reason h3 {
  line-height: 1.59;
  font-weight: 700;
}

#school .lecturer-idea .inner .lecturer {
  justify-content: space-between;
  margin-bottom: 94px;
}

#school .lecturer-idea .inner .lecturer .img img {
  width: 100%;
}

#school .lecturer-idea .inner .lecturer .content h2 {
  font-weight: 700;
}

#school .lecturer-idea .inner .lecturer .content p {
  line-height: 1.75;
  font-weight: 500;
}

#school .lecturer-idea .inner .lecturer .content p:last-of-type {
  text-align: right;
}

#school .lecturer-idea .inner .idea h3 {
  font-weight: 700;
}

#school .lecturer-idea .inner .idea p {
  line-height: 1.75;
  font-weight: 500;
}

#school .treatment {
  background: linear-gradient(#060608 0%, #25252d 46.66%);
}

#school .treatment .inner {
  flex-wrap: wrap;
  justify-content: space-between;
}

#school .treatment .inner .img img {
  width: 100%;
}

#school .price .inner h3 {
  border-top: 1.5px solid #333333;
  border-bottom: 1.5px solid #333333;
  font-weight: 600;
}

#school .price .inner .course .course-price {
  margin-inline: auto;
}

#school .price .inner .course .course-price .ttl {
  display: flex;
  align-items: center;
  font-weight: 600;
}

#school .price .inner .course .course-price .dashed {
  background-image: repeating-linear-gradient(90deg, #808080, #808080 4px, transparent 4px, transparent 8px);
  background-position: left 50%;
  background-repeat: repeat-x;
  background-size: 100% 1px;
}

#school .price .inner .course .course-price .each-price {
  position: relative;
  font-weight: 600;
}

#school .price .inner .option .each-course h4 {
  background-color: #D7D7D7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-weight: 600;
  padding: 5px 20px;
}

#school .takmidou-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#school .takmidou-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 2px solid #fff;
  letter-spacing: 0.075em;
  text-indent: 0.075em;
  position: relative;
}

#school .takmidou-link a::before {
  position: absolute;
  content: "";
  height: 1px;
  background-color: #fff;
  top: 50%;
  transform: translateY(-50%);
}

#school .takmidou-link a::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

#school .takmidou-link a:hover {
  background-color: #1e50a2;
  border: 1px solid #1e50a2;
  color: #fff;
}

#school .takmidou-link a:hover::before {
  background-color: #1e50a2;
}

#school .takmidou-link a:hover::after {
  border-top: 1px solid #1e50a2;
  border-right: 1px solid #1e50a2;
}

#school .takmidou-link .img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
}

#school .takmidou-link .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*------------------------------ お知らせ ------------------------------*/
#news .inner .news-wrap {
  flex-wrap: wrap;
}

#news .inner .news-wrap a {
  border-right: 1px solid #808080;
  position: relative;
}

#news .inner .news-wrap a:first-of-type {
  border-left: 1px solid #808080;
}

#news .inner .news-wrap a time {
  letter-spacing: 0.1em;
}

#news .inner .news-wrap a p span:first-of-type {
  background: linear-gradient(#D4B392, #B3B4B5) 0 100%/0 2px no-repeat;
  transition: background .4s;
  text-decoration: none;
}

#news .inner .news-wrap a:hover p span:first-of-type {
  background-size: 100% 2px;
}

#news .inner .news-wrap a .term {
  position: absolute;
  bottom: 0;
  color: #AAAAAA;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-family: "Playfair Display", serif;
}

#news .inner .news-wrap a p:first-of-type {
  font-weight: 600;
}


/*------------------------------ お知らせ詳細 ------------------------------*/
#single-news .news time {
  letter-spacing: 0.1em;
  color: #333333;
}

#single-news .news h2 {
  border-bottom: 1px solid #000;
  font-weight: 600;
}

#single-news .news .term {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.1em;
  color: #AAAAAA;
  text-align: right;
  font-weight: 600;
}


/*------------------------------ アクセス ------------------------------*/
#access .salon-school .container .heading {
  text-align: center;
}

#access .salon-school .container address .google-map iframe {
  width: 100%;
}

#access .salon-school .container address .content {
  flex-wrap: wrap;
}

@media screen and (max-width: 1200px) {
  #access .salon-school .container address .content {
    gap: 40px 0;
  }
}

#access .salon-school .container address .content .each-address .list {
  font-weight: 700;
}

#access .salon-school .container .clinic-gym .card {
  color: #fff;
  text-align: center;
  position: relative;
}

#access .salon-school .container .clinic-gym .card .img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
}

#access .salon-school .container .clinic-gym .card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#access .salon-school .container .clinic-gym .card .img::before {
  background-color: rgba(0, 0, 0, 0.5);
}

#access .salon-school .container .clinic-gym .card .content h3 {
  letter-spacing: 0.075em;
  font-weight: 700;
}

#access .salon-school .container .clinic-gym .card .content h4 {
  letter-spacing: 0.075em;
  font-weight: 700;
}

#access .salon-school .container .clinic-gym .card a {
  position: absolute;
  padding-right: 30px;
}

#access .salon-school .container .clinic-gym .card a::before {
  background-color: #fff;
}

#access .salon-school .container .clinic-gym .card a::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

#access .salon-school .container .clinic-gym .card a:hover::before {
  background-color: #1e50a2;
}

#access .salon-school .container .clinic-gym .card a:hover::after {
  border-top: 1px solid #1e50a2;
  border-right: 1px solid #1e50a2;
}


/*------------------------------ お問い合わせ 完了 ------------------------------*/
#contact-thanks .content h2 {
  border-bottom: 1px solid #000;
  font-weight: 600;
}


/*------------------------------ お問い合わせ ------------------------------*/
#contact .contact-form .inner dl dt {
  font-weight: 600;
}

#contact .contact-form .inner dl dd input,
#contact .contact-form .inner dl dd textarea {
  width: 100%;
  border: 1px solid #838383;
  border-radius: 4px;
}

.btn-wrap {
  transition: .5s;
}

.btn-wrap::after {
  transition: .5s;
}

.btn-wrap::before {
  transition: .5s;
}

#contact .contact-form .inner .confirm .btn-wrap p {
  width: 100%;
  height: 100%;
}

#contact .contact-form .inner .confirm .btn-wrap p input {
  text-align: center;
  width: inherit;
  height: inherit;
  border-radius: 24px;
  border: none;
}

#contact .contact-form .inner .confirm .btn-wrap p .wpcf7-spinner {
  visibility: hidden;
}


/*------------------------------ お問い合わせ確認 ------------------------------*/
#contact-confirm .contact-form .inner dl {
  border-bottom: 1px solid #444444;
  line-height: 1.75;
  letter-spacing: 0.075em;
}

#contact-confirm .contact-form .inner dl dt {
  font-weight: 600;
}

#contact-confirm .contact-form .inner dl dd {
  font-weight: 500;
}

#contact-confirm .contact-form .inner .prev-submit .btn-wrap p {
  width: 100%;
  height: 100%;
}

#contact-confirm .contact-form .inner .prev-submit .btn-wrap p input {
  text-align: center;
  width: inherit;
  height: inherit;
  border-radius: 24px;
  border: none;
}


/*------------------------------ 404 ------------------------------*/
#not-found .inner {
  padding: 60px 0 100px;
  text-align: center;
}

#not-found .inner p:first-of-type {
  font-size: 15rem;
}

#not-found .inner p:last-of-type {
  font-size: 2rem;
  margin-bottom: 30px;
}


/*------------------------------ お問い合わせ 確認 ------------------------------*/
#contact-confirm .contact-form .inner .prev-submit {
  justify-content: center;
  align-items: center;
}

#contact-confirm .contact-form .inner .prev-submit .prev p {
  width: 100%;
  height: 100%;
}

#contact-confirm .contact-form .inner .prev-submit .prev p input {
  text-align: center;
  width: inherit;
  height: inherit;
  border-radius: 24px;
  border: none;
}

/*------------------------------ ページネーション ------------------------------*/
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 90%;
  margin-inline: auto;
}

.pagination .current {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px;
  border: 1px solid #808080;
  background: #808080;
  color: #fff;
  font-weight: 500;
}

.pagination a:hover {
  opacity: .5;
}

.pagination a.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px;
  border: 1px solid #808080;
  background: #FFF;
  color: #808080;
  font-weight: 500;
}

.pagination a.page-numbers.prev {
  width: 70px;
}

.pagination a.page-numbers.next {
  width: 70px;
}


/*------------------------------ トップに戻る ------------------------------*/
#page-top {
  position: fixed;
  z-index: 9;
  bottom: 20px;
  right: 20px;
}

#page-top a {
  display: block;
  position: relative;
  width: 60px;
  height: 60px;
  transition: .3s;
}

#page-top a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
  box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
  background-color: #fff;
  width: 60px;
  height: 60px;
  transition: .3s;
}

#page-top a:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 55%;
  left: 50%;
  border-style: solid;
  border-color: #000;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: border-color ease 0.1s;
  width: 15px;
  height: 15px;
  border-width: 4px 0 0 4px;
  transition: .5s;
}

#page-top a:hover:before {
  border-color: #D8B38F;
}