html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
  body.under-content{
    overflow-y: scroll;
    background-color: #F0F0F0;
  }
html {
  font-size: 16px;
}
/* ページ切り替え */
.container {
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  position: relative;
  z-index: 1;
}

.fade-bottom {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  transform: translateY(30px);
}
.fade-bottom-2 {
  opacity: 0;
  transition: opacity 1s ease, transform 2s ease;
  transform: translateY(30px);
}
.fade-opacity {
  opacity: 0;
  transition: opacity 1s ease, transform 2s ease;
}
  .fade-bottom.fade-in {
    opacity: 1;
    transform: translateY(0);
  }
  .fade-bottom-2.fade-in {
    opacity: 1;
    transform: translateY(0);
  }
  .fade-opacity.fade-in {
    opacity: 1;
    }


/* header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; 
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 24px;
  font-weight: bold;
  padding-inline: 32px;
  padding-top: 16px;
}
  header h1 {
    width: 320px;
    line-height: 0px;
  }
  header h1 a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  header h1 a img{
  }
    @media (width<980px){
      header{
        padding-top: 0px;
        padding-inline:16px;
      }
      header h1{
        width: 38%;
      }
    }
    @media (width<768px){
      header h1{
        width: 62%;
      }
    }

/* navigation */
.nav-container{
  width: 176px;
  position: fixed;
  top: 128px;
  left: 16px;
  z-index: 9999;
  min-height: calc(100vh - 128px);
  }
    .under-content .nav-container{
      min-height: auto;
      
    }
  .nav {
    display: flex;
    flex-direction: column;
    z-index: 100;
    opacity: 1 !important; 
    pointer-events: auto; 
  }
    .nav button {
      color: #707070;
      cursor: pointer;
      font-size: clamp(0.875rem, 0.641rem + 0.38vw, 1rem);
      background: none;
      border: none;
      margin-bottom: 16px;
      text-align: left;
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight:500;
      font-style: normal;
      display: flex;
      align-items: center;
      padding-left: 0px;
    }
    .nav button span{
      font-size: clamp(0.875rem, 0.641rem + 0.38vw, 1rem);
    }
    .nav a{
      color: #707070;
      cursor: pointer;
      font-size: clamp(0.875rem, 0.641rem + 0.38vw, 1rem);
      background: none;
      border: none;
      margin-bottom: 16px;
      text-align: left;
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight:500;
      font-style: normal;
      display: flex;
      align-items: center
    }
    .nav a span{
      font-size: clamp(0.875rem, 0.641rem + 0.38vw, 1rem);
    }
    .nav a:visited{
      color: #707070;
    }
      .nav ul li {
        margin-bottom: 22px;
      }
    a.btn{
      background-color: #BCB184;
      color: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 20px;
      border-radius: 4px;
      font-size: 18px;
      box-sizing: border-box;
      font-weight: bold;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    }
      a.btn-contact{
        position: fixed;
        bottom: 32px;
        box-sizing: border-box;
      }
      a.btn-contact img{
        width: 24px;
        height: auto;
      }
      a.btn-newsback{
        width: 320px;
        margin: 0px auto;
      }
#menu {
  display: none;
}
@media (width < 980px )  {
  .nav-container{
    z-index: 9990;
    position: relative;
  }
  .menu {
      position: fixed;
      top: 16px;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transition: transform 500ms ease;
      cursor: pointer;
      z-index: 9991;
  }
  .menu span {
      position: relative;
      display: block;
      width: 2px;
      height: 32px;
      border-radius: 2px;
      background-color: #BCB3A9;
      float: left;
      transform-origin: center center;
      transition: transform 500ms ease;
      z-index: 9992;
      transform: rotate(12deg);
  }
      .menu span:nth-of-type(1) {
          transform: translateX(0px);
          transform: rotate(12deg);
      }
      .menu span:nth-of-type(3) {
          transform: translateX(0px);
          transform: rotate(12deg);
      }
  #menu {
      display: none;
  }
      #menu:checked ~ .menu {
          background-color: transparent;
          transform: rotate(180deg);
          transition: transform 500ms ease;
          flex-direction: column;
          gap: 0px;
      }
          #menu:checked ~ .menu span {
              background-color: #BCB3A9;
              transition: transform 500ms ease;
              width: 70%;
              height: 2px;
          }
              #menu:checked ~ .menu span:nth-of-type(1) {
                  transform: translateY(1px) rotate(45deg);
              }
              #menu:checked ~ .menu span:nth-of-type(2) {
                  display: none;
              }
              #menu:checked ~ .menu span:nth-of-type(3) {
                  transform: translateY(-1px) rotate(-45deg);
              }
  #menu:checked ~ .nav {
      right: 0px;
      transition: right 500ms ease;
  }
  .nav {
      position: fixed;
      top: 0;
      right: -62%;
      width: 62%;
      height: 100vh;
      margin: 0;
      padding: 0;
      backdrop-filter: blur(10px);
      background-color: rgba(255, 255, 255, 0.5);
      transition: right 500ms ease;
      z-index: 9990;
      box-sizing: border-box;
      padding-left: 4%;
      left: auto;
      padding-top: 80px;

      }
      .nav ul {
          padding-top: 80px;
      }
  }



/* base layout */
/* 共通 */
.section{
    background-color: #F0F0F0;
  }
  .section-content{
    padding-left: 32px;
    padding-right: 32px;
  }
  .section .contentinner {
      max-width: 1280px;
      width: 100%;
      margin-left: clamp(8.75rem, 6.405rem + 3.82vw, 10rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
    .checkin .contentinner .text{
        width: 44%;
    }
    .text-header{
      margin-bottom: 8px;
    }
      h2.element {
        font-family: "Libre Bodoni", serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 900;
        font-size: clamp(48px, 5vw, 72px);
        line-height: 1.0;
        line-height: 100%;
    }
      .contentinner .text h2 span {
          display: block;
          font-size: clamp(28px, 3.5vw, 56px);
      }
      .contentinner .text p {
          font-size: clamp(18px, 2vw, 32px);
          font-weight: 700;
      }
      .description{
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          margin-bottom: 16px;
      }
        .description .icon-func{
          background-color: #6E8694;
          display: block;
          color: #FFF;
          font-size: 18px;
          padding: 4px 8px 6px;
          border-radius: 4px;
          margin-right: 8px;
          line-height: 100%;
        }
          .description h3 {
              font-weight: 500;
              font-size: 20px;
              margin-top: -2px;
          }
          .contentinner .body-text{
            border-top: 1px solid #111;
            padding-top: 8px;
            width: clamp(20rem, 10.619rem + 20.62vw, 30rem)
          }
          .contentinner .body-text p{
            font-size: 16px;
            font-weight: 400;
          }
          .contentinner .body-text p span.fs-small{
            font-size: 14px;
          }
  @media (width < 980px){
    .section .contentinner{
      margin-left: 0px;
    }
      .contentinner .text {
        width: 68%;
      }
        .section .contentinner .text h2{
          font-size: 42px;
        }
            .section .contentinner .text h2 span{
                font-size: 32px;
            }
            .section .contentinner .text .icon-func{
              font-size: 12px;
              padding: 4px 6px;
            }
            .section .contentinner .text h3{
              font-size: 18px;
            }
            .section .contentinner .text .description{
              font-size: 16px;
              margin-bottom: 8px;
            }
            .section .contentinner .body-text{
              font-size: 14px
          }
        }

  @media (width < 768px){
    .section-content{
      padding-left: 16px;
      padding-right: 16px;
    }
    .section {
      display: flex;
      flex-direction: column;
      min-height: 98vh;
      overflow: hidden;
    }
      .section .contentinner {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
        .section .contentinner .text {
          flex-shrink: 0;
          position: inherit;
          padding-top: 96px;
          width: 100%;
        }
          .contentinner .body-text{
            width: 100%;
          }
        .section .contentinner .image {
          height: 48vh;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          margin-bottom: 32px;
        }
  }

/* home */
#home {
  opacity: 0;
  transition: opacity 2s ease;
}
#home.fade-in {
  opacity: 1;
}
.section.home {
  flex-wrap: wrap;
  align-items: center;
  flex-direction:column;
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
.home {
  background-image: url(/lib/images/home-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.home .heading{
  text-align: center;
  width: 100%;
}
  .home .heading p{
    font-family: "Libre Bodoni", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 900;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.0;
    line-height: 100%;
    color: #FFF;
    margin-bottom: 24px;
  }
  .home .heading h1{
      text-align: center;
      color: #FFF;
      font-size: 20px;
  }
  .home h3{
    color:#FFF;
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 8px;
  }
    .home p {
      text-align: center;
      color: #FFF;
      font-size: 20px;
    }
        @media (width > 981px){
          .home p span{
            display: inline;
          }
        }
        @media (width < 980px){
          .home p span{
            display: none;
          }
        }
    .home-nav{
      margin-top: 48px;
      width: 62%;
    }
      .home-nav ul {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px 32px;
      }
      .home-nav ul li{
        line-height: 1.0;
        font-size: 18px;
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight:500;
        font-style: normal;
      }
      .home-nav ul li a{
        color: #FFF;
        display: flex;
        align-items: center;
        position: relative;
      }
      .home-nav ul li a span{
        font-size: 28px;
      }
      .home-nav ul li a::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: #FFF;
        bottom: -1px;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: transform 0.3s;
        }
        .home-nav ul li a:hover::after {
        transform: scale(1, 1);
        }
        @media (width < 980px){
          .home h3{
            font-size: 24px;
          }
        }
        @media (width < 768px){
          .section.home {
            padding-left: 16px;
            padding-right: 16px;
            box-sizing: border-box;
          }
          .home h2{
            font-size: 38px;
            line-height: 1.0;
            line-height: 100%;
            color: #FFF;
            margin-bottom: 16px;
          }
            .home p {
              font-size: 14px;
            }
            .home-nav{
              margin-top: 32px;
              width: 100%;
              display: flex;
              justify-content: center;
            }
              .home-nav ul {
                gap: 0px 8px;
                align-items: flex-start;
                margin: 0px auto;
                text-align: left;
                padding-left: 12px;
              }
              .home-nav ul li{
                line-height: 1.0;
                font-size: 18px;
                font-family: "Montserrat", sans-serif;
                font-optical-sizing: auto;
                font-weight:500;
                font-style: normal;
                margin: 10px 0;
              }
              .home-nav ul li a{
                display: flex;
                align-items: center;
              }
              .home-nav ul li a span{
                font-size: 20px;
              }

        }
@media (width < 428px){
  .home-nav ul {
    flex-direction: column;
  }
      
  }
/* checkin */
.checkin .contentinner .image{
    width: 52%;
}
.contentinner .scene{    
    padding-left: 64px;
}
  .contentinner .haishin p{
    font-size: 14px;
  }
@media (max-width: 1504px){
}
@media (width < 980px){
    .checkin .contentinner .text h2{
      font-size: 60px;
    }
    .checkin .contentinner .text h2 span{
      font-size: 42px;
    }
    .checkin .contentinner .scene{
      padding-left: 0px;
    }
    .checkin .contentinner .image{
      width: 64%;
    }
      .checkin .contentinner .image img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        display: block;
      }
      .checkin .contentinner .image img {
        margin-left: 0px;
      }
  }
@media (width < 768px){
  .checkin .contentinner .text h2{
    font-size: 42px;
  }
  .checkin .contentinner .text h2 span{
    font-size: 32px;
  }
    .checkin .contentinner .scene{
      padding-left: 0px;
    }
      .checkin .contentinner .image img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        display: block;
      }
      .checkin .contentinner .image img {
        margin-left: 0px;
      }
  }


/* haishin */
.contentinner .haishin{
  text-align: right;
  padding-left: 32px;
}    
@media (width < 980px){
  .contentinner .haishin{
    flex-direction: column;
  }
}

/* telop */
.telop .contentinner .text{
  width: 62%;
}    
.telop  .contentinner .image{
  width: 38%;
}    
@media (width < 980px){
  .telop .contentinner .text{
    width: 100%;
  }    
  .telop  .contentinner .image{
    width: 68%;
    margin:0px auto;
  }    
}

/* reservation */
.reservation .contentinner .text{
}    
.reservation  .contentinner .image{    
  width: 42%;
  padding-left: 16px;
  padding-right: 32px;
}    
@media (width < 1280px){
  .reservation  .contentinner .image{    
    width: 42%;
    padding-left: 0px;
    padding-right: 0px;
  }    
}
@media (width < 980px){
  .reservation  .contentinner .image{
    width: 60%;
    margin:0px auto;
    padding-right: 16px;
  }    
}


/* feature */
.section.feature{

}
.section.feature .keyvisual{
  width: 68%;
}
.section.feature .keyvisual h3{
  color: #BFB486;
  margin-bottom: 32px;
  font-size: clamp(1.25rem, 0.952rem + 1.12vw, 2rem);
}
.section.feature .system{
  width: 32%;
  box-sizing: border-box;
  padding-left: 32px;
}
.section.feature .system p{
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 8px;;
}

@media (width < 980px){
  .section.feature .keyvisual h3{
    margin-bottom: 8px;
  }
  .section.feature .system{

}
  .section.feature .system.image{
    text-align: center;
  }
  .section.feature .system p{
    font-size: 16px;
  }
    .section.feature .system img{
      width: 100%;
      margin: 16px auto;
    }
    .section.feature .contentinner .image{
      align-items: flex-start;
      justify-content: flex-start;
    }
}

@media (width < 768px){
  .section.feature .contentinner{
    justify-content: flex-start;
  }
  .section.feature .keyvisual{
    width: 100%;
    margin-bottom: 32px;
    flex-shrink: 0;
    position: inherit;
    padding-top: 12vh;
  }
  .section.feature .system{
    width: 100%; 
    padding-left: 0px;
    height: 48vh;
    overflow: hidden;
    margin-bottom: 32px;
}
.section.feature .system img{
  width: 76%;
  margin: 16px auto;
}
}
  .feature .copyright {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 12px;
    
  }

.background-square{
  background-color: #ECE9DD;
  position: absolute;
  z-index: -1;
  aspect-ratio:10 / 15;
}
  .checkin .background-square{
    border-radius: 64px;
    width: 30%;
    top: 40%;
    left: 38%;
  }
  .admovie .background-square{
    border-radius: 48px;
    width: 32%;
    top: 10%;
    right: 14%;
  }
  .telop .background-square{
    border-radius: 28px;
    width: 32%;
    top: 10%;
    left: 28%;
  }
  .reservation .background-square{
    border-radius: 48px;
    width: 32%;
    top: 10%;
    right: 18%;
  }

  @media (width < 768px){
    .checkin .background-square{
      border-radius: 64px;
      width: 62%;
      top: 30%;
      left: 42%;
    }
    .admovie .background-square{
      border-radius: 64px;
      width: 62%;
      top: 20%;
      left: -10%;
    }
    .telop .background-square{
      border-radius: 64px;
      width: 62%;
      top: 30%;
      left: 42%;
    }
    .reservation .background-square{
      border-radius: 48px;
      width: 62%;
      top: 28%;
      left: 7%;
    }
  }

@media (width > 981px){
  .hidden-sp{
    display: block;
  }
  .hidden-pc{
    display: none!important;
  }
}
@media (width < 980px){
  .hidden-sp{
    display: none!important;
  }
  .hidden-pc{
    display: block;
  }
}




/* under */
.under-content .content-inner .heading p{
  font-family: "Montserrat", sans-serif;
  font-size: 52px;
  line-height: 100%;
  margin-bottom: 8px;
  font-weight: 700;
}
.under-content .content-inner .heading h1{
  font-size: 20px;
  line-height: 100%;
}
.under-content .content-inner {
  margin-left: 192px;
  margin-top: 120px;
  min-height: 600px;
}
  @media (width < 980px){
    .under-content .content-inner {
        margin-top: 96px;
        margin-left: 32px;
      }
          .under-content .content-inner .heading p{
            font-size: 48px;
          }
          .under-content .content-inner .heading h1{
            font-size: 18px;
          }
          .under-content .content-inner .title h2{
            font-size: 42px;
          }
    }
  @media (width < 768px){
    .under-content .content-inner {
      margin-left: 0px;
    }
          .under-content .content-inner .heading p{
            font-size: 42px;
          }
          .under-content .content-inner .heading h1{
            font-size: 16px;
          }
          .under-content .content-inner .title h2{
              font-size: 32px;
            }
  }
.under-content .content-inner .heading{
  margin-bottom: 32px;
}
  .under-content .maincontent{
      max-width: 680px;
      width: 88%;
      margin: 0px auto 64px;
  }
      .under-content .maincontent .block{
          margin-bottom: 64px;
      }
          .under-content .maincontent .block h3{
              font-size: 24px;
              color: #333;
              margin-bottom: 16px;
          }
          .under-content .maincontent .block p{
              font-size: 16px;
              line-height: 180%;
              color: #111;
          }
      .under-content .maincontent .image{
          max-width: 526px;
          width: 88%;
          margin: 0px auto 64px;
      }
      .under-content .maincontent .image img{
          border-radius: 8px;
      }
      .under-content .maincontent .image-block{
          max-width: 680px;
          width: 100%;
          margin: 0px auto;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-wrap: wrap;
          gap: 2%;
      }
      .under-content .maincontent .image-block img{
          width: 48%;
          margin-bottom: 16px;
          border-radius: 4px;
      }
      @media (width < 768px){
        .under-content .maincontent .image{
          max-width: 100%;
          width: 100%;
        }
      }

/* interview content */
.interview {
}
  .interview a{
    text-decoration: underline;
  }
  .interview-fv{
    background-color: #BFB486;
    padding: 24px 64px 32px;
    box-sizing: border-box;
    border-radius: 8px 0px 0px 8px;
    margin-bottom: 64px;
  }
    .interview-fv .introduction{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
      .interview-fv .heading p{
        color: #FFF;
      }
        .interview-fv .heading h1{
            color: #EEE7CB;
        }
    .interview-fv .introduction .text{
        width: 50%;
    }
    .interview-fv .introduction .image{
        width: 50%;
        padding-left: 64px;
        box-sizing: border-box;
    }
        .interview-fv .introduction .title h2{
            font-size: clamp(2rem, 0.828rem + 1.91vw, 2.625rem);
            line-height: 140%;
            margin-bottom: 16px;
        }
        .interview-fv .introduction .info p.company{
            font-size: 18px;
            line-height: 100%;
            margin-bottom: 16px;
        }
        .interview-fv .introduction .info p.post{
            font-size: 14px;
            line-height: 100%;
            margin-bottom: 8px;
        }
        .interview-fv .introduction .info p.name{
            font-size: 28px;
            line-height: 100%;
            letter-spacing: 10px;
        }
    .interview-fv .introduction .image img{
        border-radius: 8px;
    }
    
  @media (width < 980px){
    .interview-fv{
      padding: 24px 32px 32px;
    }
    .interview-fv .heading{
        margin-bottom: 16px;
    }
        .interview-fv .introduction .text{
        }
        .interview-fv .introduction .image{
            padding-left: 32px;
        }
            .interview-fv .introduction .title h3{
                font-size: 32px;
            }
            .interview-fv .introduction .info p.company{
                font-size: 16px;
            }
            .interview-fv .introduction .info p.post{
                font-size: 14px;
            }
            .interview-fv .introduction .info p.name{
                font-size: 24px;
            }
        .interview-fv .introduction .image img{
            border-radius: 8px;
        }
  }
  @media (width < 768px){
    .interview-fv{
      padding: 24px 32px 64px;
      border-radius: 0px;
    }
    .interview-fv .heading{
        margin-bottom: 16px;
    }
    .interview-fv .introduction{
      display: block;
    }
    .interview-fv .introduction .text{
      width: 100%;
    }
    .interview-fv .introduction .image{
        padding-left: 0px;
        width: 100%;
    }
    .interview-fv .introduction .title h3{
        font-size: 36px;
    }
    .interview-fv .introduction .info {
      margin-bottom: 32px;
    }
    .interview-fv .introduction .info p.company{
        font-size: 14px;
        margin-bottom: 8px;
    }
    .interview-fv .introduction .info p.post{
        font-size: 14px;
    }
    .interview-fv .introduction .info p.name{
        font-size: 24px;
    }
  }
  @media (width < 428px){
      .interview-fv .introduction .title h3{
          font-size: 30px;
      }
    }
/* news */
.news .date{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
}
  .news .cate {
      background-color: #BFB486;
      color: #FFF;
      display: inline;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 20px; 
      font-size: 14px;
      letter-spacing: 0.05em;
  }
    .news .cate.new-func {
      background-color: #5186ec;
    }
    .news .cate.oshirase {
      background-color: #847ac6;
    }
  .news.content-inner .heading {
      color: #BFB486;
      padding: 24px 64px 0px;
      box-sizing: border-box;
      margin-bottom: 32px;
    } 
      @media (width < 980px){
      .news.content-inner .heading {
          padding: 24px 32px 0px;
        }
      }
        @media (width < 768px){
         .news.content-inner .heading {
          padding: 0px;
          width: 88%;
          margin: 0px auto;
          }
        }
    .news.content-inner .title {
        padding: 24px 64px 32px;
        box-sizing: border-box;
        margin-bottom: 64px;
      } 
        @media (width < 768px){
        .news.content-inner .title {
          padding: 32px 0px;
          width: 88%;
          margin: 0px auto;
        }
        }
        .news.content-inner .title .date {
          font-weight:500;
          font-size: 24px;
          margin-top: 8px;
        }
        @media (width < 768px){
          .news.content-inner .title .date {
            font-size: 20px;
          }
        }
    .under-content .news .maincontent .textBox p.textBox_text{
        font-size: 16px;
        line-height: 180%;
        color: #111;
        margin-bottom: 32px;
    }
      .under-content .news .maincontent .textBox h2{
          font-size: 20px;
          margin-bottom: 16px;
      }
    .under-content .news .maincontent img{
      width: 100%;
      height: auto;
      margin-bottom: 32px;
    }
    .news .maincontent .news-table h4{
      font-size: 20px;
    }
    .news .maincontent dl{
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      flex-wrap: wrap;
      font-size: 14px;
      padding-bottom: 8px;
    }
      .news .maincontent dl dt{
        width: 30%;
        padding-bottom: 12px;
        padding-top: 24px;
        border-bottom: 1px solid #BFB486;
      }
      .news .maincontent dl dd{
        width: 70%;
        padding-bottom: 12px;
        padding-top: 24px;
        border-bottom: 1px solid #BFB486;
      }
        @media (width < 768px){
          .news .maincontent .news-table dl{
            flex-wrap: wrap;
          }
            .news .maincontent .news-table dl dt{
              width: 100%;
              margin-bottom: 8px;
            }
            .news .news-table dl dd{
              width: 100%;
            }
        }
    .news .maincontent table{
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 32px;
      margin-top: 32px;
    }
      .news .maincontent table thead th{
        font-size: 16px;
        text-align: left;
        border: none;
        padding-bottom: 8px;
      }
        .news .maincontent table tbody th,
        .news .maincontent table tbody td{
          border: 1px solid #BFB486;
          padding: 12px 12px;
          text-align: left;
          font-size: 14px;
        }
        .news .maincontent table tbody th{
          width: 30%;
          background-color: #eeebe0;
        }
        .news .maincontent table tbody td{
          width: 70%;
        }
        .news .maincontent a.to-pdf{
          font-size: 16px;
          text-decoration: underline;
        }
          .news .maincontent a.to-pdf:before{
            content: "";
            background-image: url(/lib/images/icon-pdf.png);
            background-repeat: no-repeat;
            padding-left: 24px;
            background-size: 20px;
          }
    .news .maincontent .block a{
      text-decoration: underline;
    }
      .news .news-list > a{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        font-size: 16px;
        border-bottom: 1px solid #BFB486;
        padding-bottom: 12px;
        padding-top: 32px;
        line-height: 1.4;
      }
        .news .news-list a .date{
          width: 12%;
        }
        .news .news-list a .cate{
          margin-right: 2%;
          font-size: 12px;
        }
        .news .news-list a .listtitle{
          width: 72%;
        }
        @media (width < 768px){
          .news .news-list > a{
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            font-size: 16px;
            border-bottom: 1px solid #BFB486;
            padding-bottom: 12px;
            padding-top: 32px;
            line-height: 1.4;

            flex-wrap: wrap;
          }
            .news .news-list a .date{
              width: 24%;
            }
            .news .news-list a .cate{
              font-size: 12px;
            }
            .news .news-list a .listtitle{
              width: 100%;
              margin-top: 16px;
            }
        }



/* ページ送り */
ul.page-numbers {
	text-align: center;
	margin: 40px 0px 0px 0px;
	padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

	}
	.page-numbers li {
		padding: 0px;
		display: flex; 
    align-items: center;
    justify-content: center;
		background:#e5e5e5;
		width: 42px;
		height: 42px;
		text-align: center;
		position: relative;
		font-size: 14px;
		font-weight: bold;
		line-height: 42px;
		border-radius: 21px;
		vertical-align: middle;
		letter-spacing: 0.0rem;
		margin-right: 8px;
    box-sizing: border-box;
		}
		.page-numbers li:last-child {
			margin-right: 0px;
			}
	.page-numbers li a{
    display: flex;
    align-items: center;
    justify-content: center;
		background:#FFFFFF;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		color: #707070;
    box-shadow: 0px 3px 8px rgba(0,0,0,0.08);
		text-decoration: none;
		line-height: 42px;
		padding: 0px;
		border-radius: 21px;
		}
	.page-numbers li a span{
		  display:table-cell;
		  vertical-align:middle;
	}
	.page-numbers li a.active{
	  color: #111;
	  background: #ccf;
	}
  .previous > .current {
    padding-right: 8px;
  }
  .material-icons{
    font-size: 2.2rem!important;
    vertical-align: middle;
    }
  .material-icons-w{
    letter-spacing: -10px!important;
    display: inline!important;
  }
        @media (width < 768px){
            ul.page-numbers {
              gap: 4px;
              flex-wrap: wrap;
            }
        }



  footer{
      background-color: #333;
      width: 100%;
      padding: 64px 0px;
      text-align: center;
    }
      footer .footer-logo{
          width: 320px;
          margin: 0px auto;
      }
        footer p.copyright{
            color: #FFF;
            font-size: 12px;
        }
        @media (width < 768px){
          footer .footer-logo{
            width: 62%;
          }
        }