body {
   font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
      "Meiryo", sans-serif;
   font-size: clamp(14px, 0.187vw + 13.29px, 16px);
   font-weight: 400;
   line-height: 2.2;
   letter-spacing: .02em;
   color: #333333;
}

/* 文字間隔 */
.is-wide {
   letter-spacing: .08em;
}

.is-tight {
   letter-spacing: -.03em;
}


img {
   max-width: 100%;
   height: auto;
}

.wrapper,
.header__wrapper {
   max-width: 1280px;
   width: 94%;
   margin-left: auto;
   margin-right: auto;
}

.wrapper-s {
   max-width: 1200px;
   width: 83%;
   margin-left: auto;
   margin-right: auto;
}

/* idまでのスクロールをスムーズにする */
html {
   scroll-behavior: smooth;
}

@media screen and (max-width:768px) {
   .sp-wrapper-m {
      width: 89%;
      margin-left: auto;
      margin-right: auto;
   }


   .sp-wrapper-s {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
   }
}


/***************************************
共通
****************************************/
/* 動き（その場で浮かび上がる） */
.fadeIn {
   opacity: 0;
   transform: scale(0.98);
   transition:
      opacity 2.4s ease,
      transform .8s cubic-bezier(.215, .61, .355, 1)
}

.fadeIn.is-show {
   opacity: 1;
   transform: scale(1);
}

/* 動き（下から上） */
.fadeUp {
   opacity: 0;
   transform: translateY(20px);
   transition:
      opacity 0.8s ease,
      transform 0.8s cubic-bezier(.215, .61, .355, 1);
}

.fadeUp.is-show {
   opacity: 1;
   transform: translateY(0);
}

/* セクションタイトル */
.section__title {
   margin-left: 20px;
   display: inline-block;

   position: relative;
}

.section__title::before {
   content: "";
   width: 1.5px;
   height: 74.41%;
   background-color: #6BA5D0;

   position: absolute;
   left: -20px;
   top: 54%;
   transform: translateY(-50%);
}

.section__jp,
.page__jp,
.page__subtitle {
   font-family: "Zen Old Mincho", serif;
   font-weight: 500;
   line-height: 1.6;
   letter-spacing: .03em;
}

.section__jp {
   font-size: clamp(18px, 0.939vw + 14.47px, 28px);
}

.section__en:lang(en) {
   font-family: "Roboto", sans-serif;
}

.section__en,
.page__en {
   font-weight: 400;
   line-height: 1.6;
   letter-spacing: .05em;
   margin-left: 3px;
}

.section__en {
   margin-top: 12px;
   font-size: clamp(11px, 0.469vw + 9.24px, 16px);
}

.section__wh {
   color: #ffffff;
}

/* 下層タイトル */
.page__title {
   margin: 65px 0px 50px 20px;
   display: inline-block;
   position: relative;
}

.page__jp {
   font-size: clamp(22px, 0.939vw + 18.47px, 32px);
}

.page__en {
   margin-top: 6px;
   font-size: clamp(13px, 1.22vw + 9.83px, 22px);
}

/* 下層 フォントサイズ */
.page__subtitle {
   font-size: clamp(17px, 0.845vw + 12.42px, 30px);
   line-height: 2;
}

/* 下層 MV */
.page__mv {
   aspect-ratio: 1200 / 450;
   object-fit: cover;
   margin-bottom: 217px;
   width: 100%;
}

/* 下層 SP */
@media screen and (max-width:768px) {
   .page__title {
      margin: 60px 0px 45px 0px;
   }

   .page__mv {
      aspect-ratio: 335 / 190;
      object-fit: cover;
      margin-bottom: 100px;
   }
}


/* Material Symbols Outlined */
.material-symbols-outlined {
   width: 22px;
   height: 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;

   font-variation-settings:
      'FILL' 0,
      'wght' 430,
      'GRAD' -25,
      'opsz' 20;
}

/* ボタン */
.button {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 15px;
   margin-top: clamp(20px, 3vw, 40px);
   padding: 0 4.5px 5px;
}

.button::after {
   content: "";
   position: absolute;
   left: -4.5px;
   bottom: 0;

   width: calc(100% + 9px);
   height: 1px;
   background-color: #6BA5D0;

   transform: scaleX(1);
   transform-origin: left;
   transition: transform 0.5s ease;
}

.button:hover::after {
   transform: scaleX(0);
   transform-origin: right;
}

.button__text {
   font-size: clamp(13px, 0.187vw + 12.29px, 15px);
   line-height: 1.7;
}

.button__arrow {
   display: inline-block;
   width: 33px;
   height: 5px;
   background: url(/image/arrow.svg) no-repeat center / contain;

   transition: transform 0.5s ease;
}

.button:hover .button__arrow {
   transform: translateX(3px);
}

/* パソコン改行 スマホ版改行*/
.sp-br {
   display: none;
}

@media screen and (max-width: 768px) {
   .sp-br {
      display: block;
   }
}

/* 背景画像：bottom基準 */
.bg-cover {
   background: no-repeat bottom / cover;
}

/* 背景画像：top基準 */
.bg-cover__top {
   background: no-repeat top / cover;
}

/* mv・sea visual オーバーレイ */
.overlay {
   position: relative;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.overlay::after {
   position: absolute;
   content: "";
   inset: 0;
}

/***************************************
ヘッダー
****************************************/
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.header {
   padding: 13px 0;
}

.header__wrapper {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
}

.gnav {
   font-size: 14px;
   line-height: 1.6;
   padding: 0 10px;
}

.gnav__list {
   display: flex;
   gap: 30px;
   font-weight: 500;
   letter-spacing: .02em;
   grid-column: 1;
   grid-row: 1;
   justify-self: start;

   transition: 0.3s;
}

/* gnav__list ホバー */
.gnav__list li:hover {
   color: #3C6F8F;
}

.logo {
   grid-column: 2;
   justify-self: center;
   width: 96.16px;
}

.header__reserve {
   font-weight: 500;
   letter-spacing: .06em;
   grid-column: 3;
   grid-row: 1;
   justify-self: end;

   position: relative;
   transition: 0.3s;
}

.header__reserve::after {
   content: "";
   width: 100%;
   height: 1px;
   background-color: #6BA5D0;

   position: absolute;
   left: 0;
   bottom: -5px;
}

/* header__reserve ホバー */
.header__reserve:hover {
   color: #3C6F8F;
}

/* SPナビ */
.sp-nav,
.sp-tel,
.sp-instagram,
.sp-nav__outer {
   display: none;
}

.sp-nav__none {
   display: contents;
}

@media screen and (max-width:1080px) {
   .header__wrapper {
      width: 100%;
   }

   .header {
      position: relative;
      inset: 0 auto auto 0;
      width: 100%;
      z-index: 10;
      padding: 0;
   }

   .sp-nav {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 13.5px 13px;
      width: 40px;
      height: 40px;
      background-color: #C8E8FF;
      border-radius: 50%;

      position: fixed;
      top: 20px;
      top: 20px;
      right: 3%;
      transform: translateX(-5.5%);
      z-index: 30;
   }

   .sp-nav__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 20px 1%;
      border-bottom: solid 1px #CFD8DE;

      order: 1;
   }


   .sp-nav__right {
      display: flex;
      align-items: center;
   }

   .header__reserve {
      padding: 13.5px 24px;
      background-color: #C8E8FF;
      border-radius: 22.5px;
      margin-right: 60px;
      font-size: 13px;
      line-height: 1;

      transition: 0.3s;
   }

   .header__reserve::after {
      content: none;
   }

   /* header__reserve ホバー */
   .header__reserve:hover {
      background-color: #D6EEFF;
   }

   .gnav {
      position: fixed;
      inset: 0;
      height: 100vh;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      padding: 0 2%;
      background-color: #ffffff;

      transform: translateX(110%);
      transition: 0.3s;
   }

   .active .gnav {
      transform: translateX(0);
   }

   .sp-header-gnav__list {
      width: 100%;
      padding: 8.43vh 26px;
      gap: 6.32vh;
      border-bottom: solid 1px #CFD8DE;
      order: 2;
      flex-direction: column;
   }

   .logo,
   .header__reserve,
   .sp-nav {
      display: inline-flex;
      align-items: center;
   }

   .sp-tel {
      width: 100%;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.2;
      color: #325B75;
      padding: 16px 0;
      border: 1px solid #CFD8DE;
      margin-top: 8.43vh;

      display: flex;
      justify-content: center;
      gap: 10px;

      order: 3;

      transition: 0.5s;
   }

   /* sp-tel ホバー */
   .sp-tel:hover {
      background-color: #CFD8DE;
   }

   .sp-instagram {
      margin-top: auto;
      /* 下に押し出す */
      width: 100vw;
      /* 画面幅いっぱい */
      margin-left: calc(50% - 50vw);
      /* 親の padding を無視 */
      margin-right: calc(50% - 50vw);

      color: #ffffff;
      background-color: #3C6F8F;
      padding: 20px 3%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      order: 4;

      transition: 0.3s;
   }

   /* sp-instagram ホバー */
   .sp-instagram:hover {
      color: #C7C7C7;
   }

   .sp-instagram:hover .sp-instagram__icon {
      color: #C7C7C7;
   }

   .sp-instagram p {
      display: inline-flex;
      align-items: center;
      font-size: 16px;
   }

   .sp-instagram__icon {
      width: 23px;
      height: 23px;
      margin-left: 15px;

      transition: 0.3s;
   }

   .sp-navLine {
      width: 100%;
      height: 1px;
      background-color: #333333;
      display: block;
      transition: transform .3s ease, opacity .3s ease;
      transform-origin: center;
      backface-visibility: hidden;
   }

   .active .sp-navLine:nth-child(1) {
      transform: translateY(6px) rotate(-45deg);
   }

   .active .sp-navLine:nth-child(2) {
      opacity: 0;
   }

   .active .sp-navLine:nth-child(3) {
      transform: translateY(-6px) rotate(45deg);
   }

   .sp-nav__outer {
      padding: 20px 3%;
      position: absolute;
      border-bottom: 0;
   }

   .active .sp-nav__outer {
      display: none;
   }

   /* 下層 スマホページ ヘッダー展開前 設定 */
   .page__sp-nav-outer {
      position: static;
   }
}

@media screen and (max-width:768px) {
   .gnav {
      padding: 0 4%;
   }

   .sp-nav__top {
      padding: 20px 1.5%;
   }

   .sp-nav {
      right: 5.5%;
   }

   .gnav__list {
      flex-direction: column;
   }

   .sp-nav__outer {
      padding: 20px 5.5%;
   }

   .sp-instagram {
      padding: 20px 5.5%;
   }
}

/***************************************
cta
****************************************/
.cta {
   background-image: url(/image/cta-bg.jpg);
   padding: 62px 0;
   line-height: 1.6;

   position: relative;
}

.cta::after {
   position: absolute;
   content: "";
   inset: 0;
   background-color: rgba(0, 24, 49, 0.4);
   pointer-events: none;
}

.cta__title {
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin-left: 0;
   z-index: 1;
}

.cta__title::before {
   display: none;
}

.section__cta {
   margin-top: 2px;
}

.cta__inner {
   display: flex;
   align-items: center;
   width: 47.22%;
   margin: auto;
   margin-top: 30px;
   position: relative;
   z-index: 1;
}

.cta__link {
   width: 50%;
   margin: auto;
   display: flex;
   justify-content: center;
   color: #325B75;
   background-color: rgba(225, 225, 225, 0.85);
   height: 139px;
   align-items: center;

   transition: 0.6s;
}

.cta-tel {
   display: flex;
   gap: 7px;
}

.cta-tel p {
   font-size: clamp(18px, 0.469vw + 16.23px, 23px);
}

.call__icon {
   margin-left: -6px;
   margin-top: 1px;
   font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' -25, 'opsz' 21;
}

.cta-instagram {
   flex-direction: column;
   align-items: center;
   gap: 4px;
}

.cta-instagram__text {
   display: flex;
   align-items: center;
   gap: 9px;
}

.cta-instagram__inner {
   width: 100%;
   padding: 29px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 11.5px 0;
   border-left: 1px solid #3C6F8F;

}

.cta-instagram__main-text {
   font-size: clamp(16px, 0.375vw + 14.59px, 20px);
}

.cta-instagram__sub-text {
   font-size: clamp(13px, 0.093vw + 12.64px, 14px);
   margin-left: 4px;
   margin-top: 2px;
}

.cta-instagram__icon {
   width: 20px;
   height: 20px;
   color: #325B75;
   margin-bottom: 1px;

   transition: 0.6s;
}

/* ホバー時 */
.cta-tel:hover+.cta-instagram .cta-instagram__inner {
   border-left-color: transparent;
}

.cta__link:hover {
   color: #ffffff;
   background-color: rgba(60, 111, 143, 0.85);
}

.cta__link:hover .cta-instagram__inner {
   border-left-color: transparent;
}

.cta__link:hover .cta-instagram__icon {
   color: #ffffff;
}

@media screen and (max-width:1080px) {
   .cta__inner {
      width: 80.8%;
   }
}

@media screen and (max-width:768px) {
   .cta__inner {
      flex-direction: column;
      gap: 20px;
      background-color: transparent;
   }

   .cta__link {
      width: 100%;
      background-color: rgba(225, 225, 225, 0.85);
   }

   .cta-tel {
      padding: 35.5px 0;
   }

   .cta-instagram {
      border-left: 0;
      padding: 25.5px 0;
      margin: 0;
      gap: 2px;
   }

   .cta-instagram__inner {
      border-left: 0;
   }
}

/***************************************
フッター
****************************************/
.footer {
   background-color: #3C6F8F;
   padding: 45.5px 0;
   color: #ffffff;
}

.footer__inner {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}

.footer__access {
   font-size: clamp(13px, 0.093vw + 12.64px, 14px);
   margin-top: 30px;
}

.footer__address {
   line-height: 1.7;
}

.footer__tel {
   line-height: 1.6;
   margin-top: 10px;
}

.footer-instagram__icon {
   width: 17px;
   height: 17px;
   margin-top: 20px;

   transition: 0.3s;
}

/* footer-instagram__icon ホバー */
.footer-instagram__icon:hover {
   color: #C7C7C7;
}

.footer-gnav {
   font-size: 13px;

   transition: 0.3s;
}

/* footer-gnav ホバー */
.footer-gnav li:hover {
   color: #C7C7C7;
}

@media screen and (max-width:768px) {
   .footer {
      padding: 0;
   }

   .footer__inner {
      align-items: flex-start;
      flex-direction: column;
      padding: 70px 0;
   }

   .footer-gnav {
      gap: 15px;
      border-bottom: none;
      padding: 0;
      margin-top: 55px;
   }
}