html {
    font-size: 10px;
  }
body {
  margin: 0;
  background-color: #fff;
  color: #282828;
  font-family: "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%; 
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span {
  display: inline-block;
}
    
/*-- header --*/
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100px;
  background-color: rgba(252, 252, 252, 0.9);
}
.header-inner {
  width: 100%;
  height: 100%;
  max-width: 1040px;
  padding: 0 20px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  column-gap: 20px;
}
.header-left {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.header h1 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.header-logo {
  max-width: 505px;
  margin-top: 11px;
}
.header-right {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  width: 336px;
}
.header-contact {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-top: 14px;
}
.header-phone {
  width: 100%;
  max-width: 319px;
  margin-top: 7px;
}
.header-contact-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 1.3rem;
  font-weight: 600;
  color: #333333;
  margin-top: 2px;
}
.header-contact-workday {
  color: #5A5A5A;
}
.header-contact-workday span {
  color: #925FA8;
}

/* common */
.title {
  font-size: clamp(1.8rem, 5.58vw, 2.8rem);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: calc(40 / 28);
  padding: clamp(32px, 9.7vw, 50px) 10px;
  background-image: url(../images/bg_title_01.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


.fv {
  width: 100%;
}
.fv-image {
  width: 100%;
  aspect-ratio: 1300 / 600;
  display: flex;
}

.bg-image {
  width: 100%;
  background-image: url(../images/bg_01.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position-y: 129px;
}


.intro {
  width: 100%;
}
.intro .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  max-width: 940px;
  margin: auto;
  padding: 80px 20px 110px;
}
.intro .content {
  font-size: clamp(1.5rem, 4vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: calc(33 / 16);
  color: #5A5A5A;
  width: 100%;
  padding-right: clamp(56px, 7.2vw, 68px);
}
.intro .image-box {
  width: 100%;
}

.facility {
  width: 100%;
}
.facility .wrapper {
  width: 100%;
  max-width: 940px;
  margin: auto;
  padding: 50px 20px 220px;
}
.facility .top-container {
  display: grid;
  grid-template-columns: 1fr 378px;
  column-gap: 40px;
}
.facility .price-box {
  padding-bottom: 16px;
}
.facility .price-content {
  font-size: clamp(1.8rem, 5.58vw, 2.8rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: calc(40 / 28);
  color: #333;
  margin-top: 50px;
}
.facility .facility-name {
  font-size: clamp(2rem, 5.9vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  width: 100%;
  padding: clamp(13px, 4vw, 20px) 0 clamp(13px, 4vw, 20px) clamp(12px, 3.55vw, 18px);
  margin-top: 16px;
  background: linear-gradient(to right, #AD89B9 0%, #AD89B9 60%, rgba(173, 137, 185, 0) 100%);
}
.facility .price-name {
  font-size: clamp(1.4rem, 4.3vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #5A5A5A;
  margin-top: 25px;
}
.facility .price {
  font-size: clamp(3.8rem, 11.8vw, 6rem);
  font-weight: 500;
  color: #5A5A5A;
  margin-top: 11px;
}
.facility .unit {
  font-size: clamp(1.5rem, 4.74vw, 2.4rem);
  display: inline-block;
  margin-left: 4px;
}
.facility .btm-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
}
.facility .facility-image {
  width: clamp(227px, 29.4vw, 294px);
}
.facility .facility-image:nth-of-type(1) {
   grid-area: 1 / 2 / 2 / 4; 
}
.facility .facility-image:nth-of-type(2) {
   grid-area: 1 / 4 / 2 / 6;
}
.facility .facility-image:nth-of-type(3) {
   grid-area: 2 / 1 / 3 / 3;
}
.facility .facility-image:nth-of-type(4) {
   grid-area: 2 / 3 / 3 / 5;
}
.facility .facility-image:nth-of-type(5) {
   grid-area: 2 / 5 / 3 / 7;
}


.access {
  width: 100%;
}
.access .wrapper {
  width: 100%;
  max-width: 940px;
  padding: 50px 20px 150px;
  margin: auto;
}
.access .subTitle {
  font-size: clamp(1.8rem, 5.58vw, 2.8rem);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.02em;
  color: #5A5A5A;
  line-height: calc(40 / 28);
}
.access .container {
  width: 100%;
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Google Map */
.googlemap {
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 0;
  padding-top: 88%;
}
.googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.access .address {
  font-size: clamp(1.3rem, 3.2vw, 1.6rem);
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
}
.access .detail {
  width: 100%;
  max-width: 400px;
  padding-left: 40px;
}
.access .pattern {
  font-size: clamp(1.4rem, 3.55vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #5A5A5A;
  list-style: none;
  margin-top: 18px;
}
.access .pattern:first-of-type {
  margin-top: 0;
}
.access .pattern::before {
  display: inline-block;
  content: '⚫︎';
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: #AD89B9;
}
.access .label {
  width: 100%;
  padding: 13px 10px;
  margin-top: 27px;
  border: 1px solid #404DB2;
  background-color: #fff;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #404DB2;
  text-align: center;
}
.access .alert {
  font-size: clamp(1.4rem, 3.55vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: calc(30 / 16);
  color: #5A5A5A;
  width: 100%;
  padding: 23px 29px;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .16);
}
.access .alert span {
  color: #BC2828;
}
.access .annotation {
  font-size: clamp(1.3rem, 3.2vw, 1.6rem);
  font-weight: 500;
  line-height: calc(30 / 16);
  color: #5A5A5A;
  margin-top: 15px;
}

.present {
  width: 100%;
  max-width: 800px;
  margin: 90px auto 0;
  background-color: #ffffff;
  border: 1px solid #AD89B9;
}
.present-title {
  font-size: clamp(1.6rem, 4.7vw, 2.4rem);
  font-weight: 600;
  line-height: calc(38 / 24);
  color: #ffffff;
  text-align: center;
  padding: clamp(13px, 3.2vw, 16px) 10px;
  background-color: #925FA8;
}
.present-message {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  line-height: calc(36 / 20);
  color: #5A5A5A;
  text-align: center;
  margin-top: 24px;
}
.present-message span.blue {
  color: #404DB2;
}
.present-inner {
  width: 100%;
  max-width: 416px;
  margin: auto;
  padding: 0 10px 34px;
}
.present-contact {
  font-size: clamp(1.4rem, 3.55vw, 1.8rem);
  font-weight: 600;
  color: #5A5A5A;
  margin-top: 24px;
}
.present-phone {
  width: 100%;
  margin-top: 7px;
}
.present-contact-bottom {
  display: flex;
  justify-content: space-between;
  font-size: clamp(1.4rem, 3.55vw, 1.6rem);
  font-weight: 600;
  color: #5A5A5A;
  margin-top: 5px;
}
.present-contact-time span {
  letter-spacing: 0.02em;
}
.present-contact-workday {
  letter-spacing: 0.02em;
  color: #5A5A5A;
}
.present-contact-workday span {
  color: #925FA8;
}
.overview {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: calc(22 / 14);
  color: #5A5A5A;
  text-align: center;
  margin: 40px 0 0;
}
.overview span {
  display: inline-block;
}


/* footer */
.footer {
  width: 100%;
  background-image: url(../images/bg_footer_01.png);
  background-repeat: no-repeat;
  padding: 50px 33px;
}
.footer .top {
  width: 100%;
  max-width: 940px;
  margin: auto;
  padding: 0 20px 50px;
}
.footer .name {
  font-size: clamp(1.4rem, 3.55vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #ffffff;
}
.footer .footer-link {
  display: block;
  width: 364px;
  margin-top: 20px;
}
.footer .address,
.footer .phone a,
.footer .area {
  font-size: clamp(1.3rem, 2.7vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: calc(23 / 14);
  color: #ffffff;
}
.footer .address {
  margin-top: 22px;
}
.footer .area {
  margin-top: 70px;
}
.footer .area span {
  display: inline-block;
}
.footer .bottom {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  padding: 14px 10px 0;
  border-top: 1px solid #CCBBD1;
}
.footer .copyright,
.footer .copyright a {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: #ffffff;
  text-align: center;
}
.footer .copyright span {
  display: inline-block;
}