:root {
  --color-text: #222222;
  --color-bg: #ffffff;
  --color-brand: #0071AB;
  --color-on-brand: #ffffff;
  --header-height: 100px;
  --header-padding-x: 16px;
  --nav-gap: 30px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
}

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

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--header-padding-x);
}

.header__logo {
  margin: 0;
  font-size: 50px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.header__logo a {
  display: block;
}

.gnavi {
  display: flex;
  align-items: center;
}

.gnavi__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnavi__link {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.gnavi__link:hover,
.gnavi__link.is-active {
  border-bottom-color: var(--color-on-brand);
}

.header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.header__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--color-on-brand);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header.is-open .header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header.is-open .header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.header.is-open .header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.section {
  padding: 80px var(--header-padding-x);
  scroll-margin-top: var(--header-height);
  display:grid;
  row-gap:24px;
}

.section:nth-of-type(even) {
  background: #f7f7f7;
}

.section__title {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 400;
}

.section__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 1024px) {
  :root {
    --header-height: 80px;
    --header-padding-x: 24px;
  }

  .header__logo {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --header-padding-x: 16px;
  }

  .header__logo {
    font-size: 22px;
  }

  .header__toggle {
    display: block;
    position: relative;
    z-index: 102;
  }

  .gnavi {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    z-index: 101;
    display: none;
    background: var(--color-brand);
    color: var(--color-on-brand);
  }

  .header.is-open .gnavi {
    display: block;
  }

  .gnavi__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
  }

  .gnavi__link {
    padding: 14px var(--header-padding-x);
  }
}

.footer {
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: 24px var(--header-padding-x);
  text-align: center;
}

.footer__copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}


h3{
  color:#0071AB;
  font-weight:bold;
  font-size:clamp(1.5rem, 0.929rem + 1.19vw, 2rem);
}
.fv{
  inline-size:100%;
  margin-inline:auto;
  display:grid;
  >*{
    grid-area:1/1;
    position:relative;
  }
}
.fv__content{
  z-index:2;
  display:grid;
  row-gap:32px;
  align-self:center;
  padding-inline-start:clamp(1rem, -5rem + 6.67vw, 3rem);
  padding-inline-end:16px;
  padding-block:32px;
  @media(width>768px){
    inline-size:780px;
    padding-block:0;
  }
  h1{
    font-size:clamp(1.75rem, -0.821rem + 5.36vw, 4rem);
    font-weight:bold;
    line-height:1.6;
  }
  >p{
    font-weight:500;
    line-height:1.8;
  }
}
.fv__content-contact{
  display:grid;
  row-gap:16px;
  border-radius:8px;
  border:1px solid #222;
  padding:16px;
  background-color:#fff5;
  h2{
    text-align:center;
    font-weight:bold;
    font-size:clamp(1.25rem, -0.119rem + 2.86vw, 2.5rem);
  }
  .tel{
    a{
      font-size:clamp(1.75rem, 0.321rem + 2.98vw, 3rem);
      font-weight:bold;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }
  }
  .tel-caution{
    display:grid;
    row-gap:16px;
    border-radius:8px;
    padding:16px;
    background-color:#ebf5f4aa;
    h3{
      color:#0071AB;
      font-weight:bold;
    }
  }
}
.fv__image{
  position:relative;
  justify-self:end;
  max-inline-size:640px;
  img{
    height:100%;
    object-fit:cover;
  }
}
.fv__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  pointer-events:none;
  opacity:clamp(0, (1100px - 100vw) / 500px, .5);
}

section[id]{
  h2{
    font-size:clamp(1.75rem, 1.179rem + 1.19vw, 2.25rem);
    font-weight:bold;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    &::after{
      content:'';
      inline-size:2em;
      block-size:4px;
      background-color:#0071AB;
    }
  }
}
.news-area{
  inline-size:100%;
  max-inline-size:1200px;
  margin-inline:auto;
  border-radius:16px;
  max-block-size:480px;
  overflow-y:scroll;
  background-color:#ebf5f4;
  padding:32px 24px;
  dl{
    display:grid;
    @media(width>768px){
      grid-template-columns:10em 1fr;
    }
    dt{
      margin-block-end:16px;
    }
    dd{
      padding-block-end:24px;
      margin-block-end:24px;
      border-block-end:1px solid #0071ab;
    }
    dt,dd{
      @media(width>768px){
        border-block-end:1px solid #0071ab;
        margin-block-end:24px;
      }
    }
    dt:last-of-type{
      @media(width>768px){
        margin-block-end:0;
      }
    }
    dd:last-child{
      margin-block-end:0;
    }
    ul{
      margin-block-start:16px;
    }
  }
}

.about-area{
  inline-size:100%;
  max-inline-size:1200px;
  margin-inline:auto;
  justify-content:center;
  display:grid;
  row-gap:24px;
  @media(width>1024px){
    grid-template-columns:1fr 1fr;
    column-gap:calc(48/1920*100vw);
  }
  .about-detail{
    display:grid;
    row-gap:16px;
    p{
      line-height:1.8;
    }
    .schedule-scroll{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    .schedule{
      width:max-content;
      min-width:100%;
      thead{
        tr{
          th{
            background-color:#0071AB;
            color:#fff;
            text-align:center;
            line-height:2;
            padding-inline:16px;
          }
          th:not(:first-child){
            border-left:1px solid #aaa;
          }
        }
      }
      tbody{
        tr{
          *{
            line-height:2;
            padding-inline:16px;
          }
          td{
            text-align:center;
          }
        }
      }
    }
    ul{
      line-height:1.8;
      li::before{
        content:'※ ';
      }
    }
  }
  .about-map{
    min-height:360px;
  }
}
.image-area{
  max-inline-size:1200px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(16/1920*100vw);
}
.greeting-area{
  max-inline-size:1200px;
  margin-inline:auto;
  display:grid;
  row-gap:24px;
  @media(width>=768px){
    grid-template-columns:1fr 2fr;
    column-gap:calc(48/1920*100vw);
  }
  .greeting-image{
    figure{
      figcaption{
        .name{
          display:block;
          font-size:1.5em;
          margin-block-start:8px;
          ruby{
            ruby-position:under;
          }
        }
      }
    }
  }
  .greeting-text{
    display:grid;
    row-gap:16px;
  }
  p{
    line-height:1.8;
  }
}
.resume-area{
  inline-size:100%;
  max-inline-size:1200px;
  margin-inline:auto;
  display:grid;
  line-height:1.8;
  row-gap:16px;
  @media(width>768px){
    grid-template-columns:1fr 1fr;
    column-gap:calc(48/1920*100vw);
  }
  .resume-left,.resume-right{
    display:grid;
    row-gap:16px;
  }
}
.medical-inner{
  inline-size:100%;
  max-inline-size:1200px;
  margin-inline:auto;
  display:grid;
  row-gap:24px;
  line-height:1.8;
  h3:not(:first-child){
    padding-block-start:32px;
  }
  .medical-list{
    display:grid;
    row-gap:24px;
    @media(width>768px){
      grid-template-columns:1fr 1fr;
      column-gap:calc(48/1920*100vw);
    }
    li{
      padding:24px 16px;
      background-color:#ebf5f4;
      display:grid;
      row-gap:16px;
      @media(width>768px){
        grid-template-rows:subgrid;
        grid-row:span 2;
      }
      h4{
        font-size:24px;
        font-weight:500;
        text-align:center;
      }
    }
  }
  >ul{
    list-style:disc;
    padding-inline-start:1.5em;
    li{
      span{
        display:flex;
        align-items:start;
        span{
          font-size:0.7em;
        }
      }
    }
  }
}
.price-table{
  line-height:1.8;
  display:grid;
  align-items:start;
  row-gap:16px;
  @media(width>768px){
    grid-template-columns:1fr 1fr;
    column-gap:calc(48/1920*100vw);
  }
  >div{
    display:grid;
    row-gap:16px;
  }
  .price{
    inline-size:100%;
    border:1px solid #333;
    tr:not(:last-child){
      th,td{
        border-bottom:1px solid #333;
      }
    }
    th,td{
      padding:8px;
    }
    th{
      background-color:#ebf5f4;
      vertical-align:middle;
      inline-size:7em;
      @media(width>768px){
        inline-size:15em;
        border-right:1px solid #333;
      }
    }
    td:last-child{
      text-align:right;
    }
    @media(width<=768px){
      width:100%;
      tbody{
        display:block;
      }
      tr{
        display:grid;
        grid-template-columns:1fr;
      }
      th,td{
        display:block;
        inline-size:auto;
        width:100%;
      }
      th{
        order:-1;
      }
    }
    &.price-wide{
      @media(width<=768px){
        tr{
          grid-template-columns:1fr auto;
        }
        th{
          grid-column:1 / -1;
        }
      }
    }
  }
  .price-wide{
    @media(width>768px){
      grid-column:span 2;
    }
  }
}