@charset "utf-8";
/*************************************************

  Layout CSS 2025.08
  #overlay:z-index:1100
  modal:z-index:1000

**************************************************/

/*************************************************
  layout size
**************************************************/

.w100 {
  width: 100%;
  max-width: none;
}

.w840 {
  width: 100%;
  margin: 0 auto;
  max-width: 840px;
  box-sizing: content-box;
}

@media screen and (max-width: 900px) {
  .w840 > .inner {
    padding-left: 3%;
    padding-right: 3%;
  }
}

/*************************************************
  header
**************************************************/
.header {
  /* position: fixed;top: 0;left: 0;z-index: 1; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 2.6%;
  width: 100%;
  border-bottom: 1px solid var(--color-blue);
  position: relative;
  overflow: hidden;
}
.header .l-block {
  max-width: 465px;
  width: 100%;
  z-index: 1;
}
.header .r-block {
  max-width: calc(100% - 465px);
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 1;
}
.header .logo-santen {
  max-width: 123px;
  width: 100%;
  margin-left: 10%;
}
.header .r-block > .btn-logout-box {
  margin-left: 1em;
}

@media screen and (max-width: 768px) {
  .header {
    padding: 2.8645vw 12% 2.8645vw 3%;
  }
  .page-front .header {
    padding-right: 5%;
  }
  .header .logo {
    width: 53.6458vw;
  }
  .header .r-block {
    max-width: none;
  }
  .header .r-block > .btn-logout-box {
    display: none;
  }
  .header .logo-santen {
    min-width: 66px;
    width: 40%;
    margin-left: 0;
  }
}

.grid-pattern {
  position: relative;
  /* prettier-ignore */
  background-image:
    radial-gradient(white 1px, transparent 1px), /* ドット */
    linear-gradient(
      to right,
      /* #99B4D4 0%,
      #F7DBCE 10%,
      #F7DBCE 90%,
      #99B4D4 100% */
      #F7DBCE 0%,
      #F7DBCE 10%,
      #fff 70%,
      #fff 100%
  );
  background-size: 4px 4px, 100% 100%; /* ドットは小さく繰り返し、グラデは全体に */
  background-repeat: repeat, no-repeat;
  background-color: #fff;
}
/* 白い透過円の共通スタイル */
.bg-white-circle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3); /* 透過白 */
  border-radius: 50%;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  filter: blur(24px);
}
.bg-white-circle.c1 {
  width: 340px;
  height: 200px;
  left: 5%;
}
.bg-white-circle.c2 {
  width: 209px;
  height: 220px;
  left: 50%;
}
.bg-white-circle.c3 {
  right: 2%;
  width: 155px;
  height: 220px;
}

/*************************************************
  grobal nav / SPメニュー
**************************************************/

.header .r-block {
  overflow: hidden;
}
.gnav-block {
  width: 100%;
  display: none;
  top: 0;
  left: 100vw;
  position: fixed;
  background-color: #fff;
  transition: all 0.4s;
}
.gnav-block .gnav-item {
  display: inline-block;
}
.gnav-block .gnav-item:last-child {
  padding-right: 0;
}

.gnav-block .btn-logout-box {
  position: absolute;
  left: calc(-99vw * 0.026 - 7em - 123px);
  top: calc(50% - 1em);
}

.hamburger-menu-btn {
  display: none;
}

@media screen and (max-width: 768px) {
  .gnav-block {
    display: flex;
    margin-top: 13.7083vw;
    height: 100vh;
    width: 100%;
    z-index: 900;
    /* justify-content: center;
    display: inline-block;
    width: 8.2031vw;
    height: 8.2031vw; */
  }
  .gnav-block.active {
    left: 0;
  }
  .grav-scroll {
    width: 100%;
  }

  .hamburger-menu-btn {
    cursor: pointer;
    width: 7.2916vw;
    height: 7.2916vw;
    min-width: 28px;
    min-height: 28px;
    border-radius: 5px;
    padding: 0;
    display: block;
    position: absolute;
    top: 2.8645vw;
    right: 3%;
    z-index: 910;
    background-color: var(--color-blue);
  }
  .hamburger-menu-btn span {
    transition: all 0.4s;
    display: inline-block;
    position: absolute;
    left: 14px;
    height: 2px;
    background: #fff;
    width: 50.79%;
  }
  .hamburger-menu-btn span {
    left: 50%;
    transform: translateX(-50%); /* X軸について自身の幅の半分左に移動 */
    width: 50.79%;
  }
  .hamburger-menu-btn span:nth-of-type(1) {
    top: 30%;
    transform: translate(-50%, -50%);
  }
  .hamburger-menu-btn span:nth-of-type(2) {
    top: 50%;
    transform: translate(-50%, -50%); /* 中心に配置 */
  }
  .hamburger-menu-btn span:nth-of-type(3) {
    top: 70%;
    transform: translate(-50%, -50%);
  }

  .hamburger-menu-btn.active span:nth-of-type(1) {
    top: 50%;
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
  }
  .hamburger-menu-btn.active span:nth-of-type(2) {
    opacity: 0; /*真ん中の線は透過*/
  }
  .hamburger-menu-btn.active span:nth-of-type(3) {
    top: 50%;
    transform: translateY(-50%) translateX(-50%) rotate(45deg);
  }

  .gnav-block .gnav-lists {
    margin-right: 0;
    border-top: 1px solid var(--color-blue);
  }
  .gnav-block .gnav-item {
    border-bottom: 1px solid var(--color-blue);
  }
  .gnav-block .gnav-item:last-child {
    padding: 0;
  }
  .gnav-block .gnav-item:not(.btn-item) {
    width: 100%;
  }
  .gnav-block .gnav-item > a {
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 1.5em 1em;
    color: var(--color-black);
    text-decoration: none;
    font-size: calc(16 / var(--root-font-size) * 1rem);
  }
  .gnav-block .btn {
    max-width: none;
  }
  .gnav-block .gnav-item:nth-last-child(n) {
    padding: 0.5em 1em;
  }
  .gnav-block .gnav-item:nth-last-child(n) > a {
    color: var(--color-blue);
  }
  .gnav-block .gnav-item > a::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url(../images/next-arrow.png) center no-repeat;
    background-size: contain;
    margin-left: 0.5em;
  }
  .gnav-block .gnav-item:nth-last-child(n) > a::after {
    display: none;
  }
  .gnav-block .btn-logout-box {
    position: static;
    padding: 0.5em 1em;
    text-align: right;
  }
}

/*************************************************
  footer
**************************************************/

footer {
  background-color: var(--color-blue);
  color: #fff;
  padding: 20px 5%;
}
.footer .copyright {
  text-align: center;
  font-size: calc(16 / var(--root-font-size) * 1rem);
}

@media screen and (max-width: 768px) {
  .footer .copyright {
    text-align: center;
    font-size: calc(12 / var(--root-font-size) * 1rem);
  }
}

/*************************************************
  body
**************************************************/
#main {
  min-height: 81.6dvh;
  padding-top: 3em;
}
section:last-child {
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  #main {
    min-height: 77dvh;
  }
}