:root {
  --color-primary: #38b6ff;
  --color-primary-dark: #2a9ae0;
  --color-text-gray: #4d4d4d;
  --font-size-sm: 16px;
  --font-family-barlow: 'Barlow', sans-serif;

  :where(.commitment, .flow) {
    .section-title--sub {
      >span {
        background-color: #d9f1ff;
      }
    }
  }
}



* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {

  overflow: hidden auto;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
  color: #333;

  @media (width <=768px) {
    padding-block-end: 53px;
  }

}

:root:has(.header-hamburger--active) {
  .nav {
    display: block;
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }
}

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

a {
  color: inherit;
  text-decoration: none;
}

ol,
ul {
  list-style: none;
}

.none--pc {
  @media (width >=769px) {
    display: none;
  }
}

.none--sp {
  @media (width <=768px) {
    display: none;
  }
}


/* マウス操作時はアウトラインを消し、キーボード操作(:focus-visible)では残す */
:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================
   Header Styles - BEM記法準拠
   ======================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 0px 1px rgb(0 0 0 / 50%);
  padding-bottom: 5px;

  @media (width <=768px) {
    position: fixed;
    padding-block-end: 10px;
  }

}

.header-inner {
  --header-inner-gap: 14px;
  --header-inner-padding-block-end: 16px;
  --header-inner-padding-block-start: 0;

  display: flex;
  flex-direction: column;
  gap: var(--header-inner-gap);
  width: min(calc(100% - 30px), 1100px);
  padding-block-start: var(--header-inner-padding-block-start) var(--header-inner-padding-block-end);
  margin-inline: auto;

  @media (width <=768px) {
    --header-inner-padding-block-start: 10px;
  }

}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  @media (width <=768px) {
    align-items: flex-end;

  }

}

.header-logo-text img {
  width: 100%;
  max-width: none;
  height: 100%;
}

.header-logo {
  >h1 {
    >a {
      --header-logo-gap: 10px;
      --header-logo-img-max-width: none;
      --header-logo-span-font-size: 23px;

      display: flex;
      gap: var(--header-logo-gap);
      align-items: flex-end;

      @media (width <=768px) {
        --header-logo-gap: 5px;
        --header-logo-img-max-width: 112px;
        --header-logo-span-font-size: 12px;
      }

      >img {
        max-width: var(--header-logo-img-max-width);
      }

      >span {
        font-size: var(--header-logo-span-font-size);
        font-weight: 500;
        color: #333;
        white-space: nowrap;
      }
    }
  }
}



.header-logo-text {
  position: relative;
  grid-area: 1 / 1;
  width: 163px;
  height: 28px;
  margin-top: 38px;
  margin-left: 10px;
}

.header-store-name {
  font-size: 23px;
}

.header-contact {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
}

.header-tel {
  display: flex;
  gap: 9px;
  align-items: center;

  @media (width <=768px) {
    display: none;
  }
}

.header-tel__icon-wrapper {
  display: inline-grid;
  grid-template-rows: max-content;
  grid-template-columns: max-content;
}

.header-tel__icon-bg {
  display: inline-grid;
  grid-area: 1 / 1;
  grid-template-rows: max-content;
  grid-template-columns: max-content;
  place-items: start;
  margin: 0;
}

.header-tel__bg-shape {
  grid-area: 1 / 1;
  width: 31px;
  height: 31px;
  margin: 0;
  background: var(--color-primary);
  border-radius: 3px;
}

.header-tel__icon {
  position: relative;
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
  margin-top: 5px;
  margin-left: 5px;
}

.header-tel__icon img {
  width: 100%;
  max-width: none;
  height: 100%;
}

.header-tel__number {
  font-family: Lato, sans-serif;
  font-size: min(2.08svw, 40px);
  font-weight: 700;
  line-height: 1.75;
  color: var(--color-primary);
  letter-spacing: 2px;
}

.header-button {
  --header-button-width: auto;

  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: var(--header-button-width);
  padding: 5px 12px;
  font-size: min(0.98svw, 19px);
  background: var(--color-primary);
  border-radius: 5px;
  transition: background 0.3s ease;

  @media (width <=768px) {
    --header-button-width: 138px;
  }

}

.header-button:hover {
  background: var(--color-primary-dark);
}

.header-button__text {
  --header-button-text-font-size: 19px;

  font-size: var(--header-button-text-font-size);
  font-weight: 700;
  line-height: 1.94;
  color: #fff;
  text-align: center;

  @media (width <=768px) {
    --header-button-text-font-size: 12px;
  }

}

.header-hamburger {
  position: relative;
  display: none;
  width: 24px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;

  @media (width <=768px) {
    display: block;
  }
}

.header-hamburger__line {
  position: absolute;
  left: 0;
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 3px;
  transition: transform 0.3s ease, opacity 0.3s ease;

  &:nth-child(1) {
    top: 0;
  }

  &:nth-child(2) {
    top: 9px;
  }

  &:nth-child(3) {
    top: 18px;
  }
}

.header-hamburger--active {
  .header-hamburger__line:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
  }

  .header-hamburger__line:nth-child(2) {
    opacity: 0;
  }

  .header-hamburger__line:nth-child(3) {
    top: 9px;
    transform: rotate(-45deg);
  }
}

.header-close {
  display: none;
  gap: 8px;
  align-items: center;
  padding: 10px 20px;
  margin-inline: auto;
  cursor: pointer;
  background: transparent;
  border: none;

  @media (width <=768px) {
    display: flex;
  }
}

.header-close__icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 20px;
}

.header-close__line {
  position: absolute;
  left: 0;
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: #323333;
  border-radius: 3px;

  &:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
  }

  &:nth-child(2) {
    top: 9px;
    transform: rotate(-45deg);
  }
}

.header-close__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-gray);
}

.nav {
  @media (width <=768px) {
    display: none;
    opacity: 0;
    transition: opacity .5s ease-in;
  }

}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  @media (width <=768px) {
    flex-direction: column;
  }

}

.nav-item {
  flex: 1;
}

.nav-link {
  --nav-link-display: block;
  --nav-link-font-size: var(--font-size-sm);
  --nav-link-padding-block: 0;
  --nav-link-text-align: left;

  display: var(--nav-link-display);
  padding-block: var(--nav-link-padding-block);
  font-size: var(--nav-link-font-size);
  line-height: 1.75;
  color: var(--color-text-gray);
  text-align: var(--nav-link-text-align);
  transition: color 0.3s ease;

  @media (width <=768px) {
    --nav-link-display: flex;
    --nav-link-font-size: 15px;
    --nav-link-padding-block: 14px;

    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px #ABE3FF;

    &::after {
      display: inline-block;
      width: 10px;
      height: 17px;
      content: "";
      background-color: #39b7ff;
      mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2217%22%20viewBox%3D%220%200%2010%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.22754%201.00977L8.65936%208.41887L1.22754%2015.828%22%20stroke%3D%22white%22%20stroke-width%3D%221.95274%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    }
  }

  @media (width >=769px) {
    --nav-link-text-align: center;
  }
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-item--multiline .nav-link {
  @media (width >=769px) {
    font-size: 12px;
  }
}


/* ========================================
   ヒーローイメージ
   ======================================== */
.hero-image {
  --hero-image-padding-inline: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 746px;
  padding-inline: var(--hero-image-padding-inline);
  background-image: url("../images/hero_image.webp");
  background-position: center;
  background-size: cover;

  @media (width <=768px) {
    --hero-image-padding-inline: 16px;
  }
}

/* ========================================
   CTA (Contact) Section
   ======================================== */

/* CTA Section Base */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 111px 137px;
  background: url('../images/cta_background.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media (width <=860px) {
    padding-block: 28px;
  }

}

.cta-body {
  --cta-body-padding: 76px 75px;

  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(calc(100% - 30px), 900px);
  padding: var(--cta-body-padding);
  margin-inline: auto;
  background-color: #fff;
  border-radius: 14px;

  @media (width <=768px) {
    --cta-body-padding: 27px;
  }

}

/* CTA Header */
.cta-body__head h2 {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 36.719px;
  font-weight: bold;
  line-height: 37.326px;
  color: #0092ff;
  text-align: center;
  letter-spacing: 1.4687px;
}

/* CTA Phone Section */
.cta-body__tel {
  /* position: relative; */
  display: flex;
  align-items: center;

  /* margin: 20px 0; */
}

.cta-body__tel .phone-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62.65px;
  height: 62.65px;
  margin-right: 15px;
  background: #0092ff;
  border-radius: 6.66px;
}

.cta-body__tel .phone-icon img {
  width: 43.542px;
  height: 43.533px;
}

.cta-body__tel .phone-number {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 81.503px;
  font-weight: 600;
  line-height: 105.002px;
  color: #0092ff;
  letter-spacing: -1.6301px;
}

/* CTA Business Hours */
.cta-body__hours {
  margin: 14px 0;
}

.cta-body__hours p {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 27.493px;
  font-weight: bold;
  line-height: 48.112px;
  color: #0092ff;
  text-align: center;
}

/* CTA Buttons Container */
.cta-body__buttons {
  --cta-buttons-flex-direction: row;
  --cta-buttons-gap: 60px;

  display: flex;
  flex-direction: var(--cta-buttons-flex-direction);
  gap: var(--cta-buttons-gap);
  align-items: center;
  justify-content: center;

  @media (width <=768px) {
    --cta-buttons-flex-direction: column;
    --cta-buttons-gap: 10px;
  }

}

.cta-button {
  transition: opacity 0.1s ease;

  @media (hover: hover) {
    &:hover {
      opacity: 0.7;
    }
  }
}

/* about */
.about-title__group {
  --about-title-group-padding-block-end: 20px;
  --about-title-group-width: auto;

  width: var(--about-title-group-width);
  padding-block-end: var(--about-title-group-padding-block-end);

  @media (width <=768px) {
    --about-title-group-padding-block-end: 10px;
    --about-title-group-width: fit-content;

    padding-inline: 16px;
    margin-inline: auto;
    text-align: center;
    border-bottom: solid 2px #38B6FF;
  }

}

.about-title {
  font-size: min(3.3svw, 64px);
  color: transparent;
  text-transform: uppercase;
  letter-spacing: 10px;
  background-image: linear-gradient(90deg, #38b6ff 0.02%, #0086ec 39.49%, #38b6ff 78.95%, #0086ec 116.09%);
  background-clip: text;

  @media (width <=768px) {
    font-size: 39px;
    letter-spacing: 2px;
  }
}

.about-title--sub {
  @media (width >=769px) {
    position: relative;
    padding-inline-start: 40px;

    &::before {
      position: absolute;
      top: 50%;
      left: calc((100svw - 1100px / 2) * -1);
      display: block;
      width: 100svw;
      height: 1px;
      content: '';
      background: #38B6FF;
      transform: translateY(-50%);
    }

    >span {
      position: relative;
      display: block;
      padding-inline-start: 10px;
      background-color: #f7f7f7;
    }
  }

  @media (width <=768px) {
    font-size: 21px;
  }

}

.about {
  --about-padding-block: 150px 200px;

  padding-block: var(--about-padding-block);

  @media (width <=768px) {
    --about-padding-block: 36px;
  }
}

.about-body {
  position: relative;
}

.about-body__text {
  width: min(calc(100% - 30px), 1100px);
  margin-inline: auto;

  @media (width >=769px) {
    padding-block: 60px 40px;
    background-color: #f7f7f7;
    border-radius: 0 40px 40px 0;
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: calc((100svw - 948px) / 2);
    height: 100%;
    content: "";
    background-color: #f7f7f7;
  }

}

.about-desc {
  >p {
    font-size: 18px;

    @media (width <=768px) {
      padding: 18px;
      background-color: #f7f7f7;
      border-radius: 5px;
    }
  }
}

.about-copy {
  --about-copy-font-size: 39px;
  --about-copy-width: auto;

  width: var(--about-copy-width);
  padding-block-end: 20px;
  font-size: var(--about-copy-font-size);
  line-height: 1.27;
  letter-spacing: 5px;

  @media (width <=768px) {
    --about-copy-width: fit-content;

    margin: 12px auto 0;
    text-align: left;
  }

  @media (width <=480px) {
    --about-copy-font-size: 27px;
  }
}

.about-desc {
  display: flex;
  flex-direction: column;
  gap: 40px;

  @media (width >=769px) {
    max-width: 45ch;
  }
}

.about-image__01 {
  position: absolute;
  top: -60px;
  right: 0;
  width: 50.4svw;

  @media (width <=768px) {
    display: none;
  }
}

.about-image--sp {
  padding-block-end: 15px;

  @media (width >=768px) {
    display: none;
  }
}

.more-button {
  width: min(100%, 250px);
  margin-inline: auto;

  a {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    width: stretch;
    padding: 15px;
    background: #fff;
    border: 3px solid #38b6ff;
    border-radius: 34px;
    transition: background 0.1s ease, color 0.1s ease;

    @media (hover: hover) {
      &:hover {
        color: #fff;
        background: #38b6ff;

        &::after {
          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%229%22%20viewBox%3D%220%200%2023%209%22%20fill%3D%22none%22%3E%20%20%3Cpath%20d%3D%22M1.19141%207.71289H21.0944L15.3208%201.93921%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
        }
      }
    }

    &::after {
      display: inline-block;
      width: 23px;
      height: 9px;
      content: "";
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%229%22%20viewBox%3D%220%200%2023%209%22%20fill%3D%22none%22%3E%20%20%3Cpath%20d%3D%22M1.19141%207.71289H21.0944L15.3208%201.93921%22%20stroke%3D%22%2338B6FF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
      transition: background-image 0.3s ease;
    }
  }
}

/* commitment */
.commitment-wrapper {
  --commitment-wrapper-padding-block: 160px;

  padding-block: var(--commitment-wrapper-padding-block);
  background-color: #d9f1ff;

  @media (width <=768px) {
    --commitment-wrapper-padding-block: 36px 96px;
  }
}

.section-title {
  --section-title-width: min(calc(100% - 30px), 1100px);
  --section-title-padding-block-end: 0;

  width: var(--section-title-width);
  padding-block-end: var(--section-title-padding-block-end);
  margin-inline: auto;

  @media (width <=768px) {
    --section-title-width: fit-content;
    --section-title-padding-block-end: 20px;
  }

}

.section-title__group {
  --section-title-group-align-items: flex-end;
  --section-title-group-padding-block-end: 20px;
  --section-title-group-width: auto;

  display: flex;
  flex-direction: column;
  align-items: var(--section-title-group-align-items);
  width: var(--section-title-group-width);
  padding-block-end: var(--section-title-group-padding-block-end);

  @media (width <=768px) {
    --section-title-group-align-items: center;
    --section-title-group-padding-block-end: 10px;

    border-bottom: solid 2px #38B6FF;
  }

  @media (width >=769px) {
    --section-title-group-width: fit-content;
  }
}

.section-title--main {
  --section-title-main-font-size: 64px;
  --section-title-main-letter-spacing: 10px;

  font-size: var(--section-title-main-font-size);
  color: transparent;
  text-transform: uppercase;
  letter-spacing: var(--section-title-main-letter-spacing);
  background-image: linear-gradient(90deg, #38b6ff 0.02%, #0086ec 39.49%, #38b6ff 78.95%, #0086ec 116.09%);
  background-clip: text;

  @media (width <=768px) {
    --section-title-main-font-size: 39px;
    --section-title-main-letter-spacing: 2px;
  }

}

.section-title--sub {
  --section-title-sub-font-size: inherit;

  font-size: var(--section-title-sub-font-size);
  font-weight: 500;

  @media (width <=768px) {
    --section-title-sub-font-size: 20px;
  }


  @media (width >=769px) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: stretch;

    &::before {
      position: absolute;
      top: 50%;
      left: calc(100% - (100svw / 2));
      display: block;
      width: 100svw;
      height: 1px;
      content: "";
      background-color: #38B6FF;
      transform: translateX(-50%) translateY(-50%);
    }


    >span {
      position: relative;

      &::before {
        margin-inline-end: 16px;
        content: "";
        background-color: #38B6FF;
      }

    }
  }


}

.commitment-point {
  display: grid;
  grid-template: ". center right" / 1fr min(calc(100% - 30px), 1100px) 1fr;
}

.commitment-point__item {
  display: flex;
  grid-area: center;
  gap: 35px;
  background-color: #fff;
  border-radius: 13px 0 0 13px;

  @media (width <=768px) {
    width: calc(100% - 23px);
    margin-inline-start: auto;
  }
}


.commitment-points {
  display: flex;
  flex-direction: column;
  gap: 100px;

  .commitment-point {
    &:nth-child(even) {
      grid-template: "right center ." / 1fr min(calc(100% - 30px), 1100px) 1fr;


      .commitment-point__item {
        flex-direction: row-reverse;
        border-radius: 0 13px 13px 0;

        @media (width <=768px) {
          flex-direction: column;
          margin: 0 auto 0 0;
        }

      }

      .commitment-point__ribon {
        &::before {
          margin: 0 0 0 auto;
          clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
          transform: translateX(10px);
        }

        >span {
          padding-inline: 10px 60px;
          margin: 0 0 0 auto;
          border-radius: 4px 0 4px 4px;
          transform: translateX(10px);

          @media (width <=768px) {
            padding-inline: 10px 20px;

          }


        }
      }

      .commitment-title__bottom {
        flex-direction: row-reverse;
        padding-inline: 0 50px;

        @media (width <=768px) {
          padding-inline: 0 12px;

        }


      }

      .commitment-point__desc {
        padding-inline: 0 50px;

        @media (width <=768px) {
          padding-inline-end: 20px;
        }
      }

    }

    @media (width <=768px) {
      display: block;

      .commitment-point__item {
        flex-direction: column;
        gap: 0;
      }
    }
  }
}

.commitment-point__text {
  padding-block-start: 30px;

  @media (width <=768px) {
    padding-block-start: 10px;
  }

}

.commitment-point__space {
  grid-area: right;
  background-color: #fff;
}


.commitment-point__image {
  transform: translateY(30px);

  @media (width >=769px) {
    flex-shrink: 0;
    width: min(33.9svw, 652px);
    padding-inline-start: 23px;
  }

}

.commitment-point__ribon {
  &::before {
    display: block;
    width: 10px;
    aspect-ratio: 1;
    content: "";
    background-color: #008FD6;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
    transform: translateX(-10px);

  }

  >span {
    display: block;
    width: fit-content;
    padding-inline: 60px 10px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    background-color: #38B6FF;
    border-radius: 0 4px 4px;
    transform: translateX(-10px);

    @media (width <=768px) {
      padding-inline: 35px 10px;
      font-size: 16px;
    }

  }
}



.commitment-title__bottom {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-block-end: 20px;
  padding-inline: 50px 0;

  @media (width <=768px) {
    padding-inline: 20px;

  }

}

.commitment-point__number {
  --commitment-point-number-font-size: 110px;

  font-family: var(--font-family-barlow);
  font-size: var(--commitment-point-number-font-size);
  font-weight: 700;
  line-height: 1;

  @media (width <=768px) {
    --commitment-point-number-font-size: 64px;
  }

}

.commitment-point__title {
  --commitment-point-title-font-size: 34px;
  --commitment-point-title-white-space: normal;

  font-size: var(--commitment-point-title-font-size);
  line-height: 1.25;
  white-space: var(--commitment-point-title-white-space);

  @media (width <=768px) {
    --commitment-point-title-font-size: 24px;
  }

  @media (width >=769px) {
    --commitment-point-title-white-space: nowrap;
  }

}

.commitment-point__desc {
  padding-inline-start: 50px;

  @media (width <=768px) {
    padding-inline-start: 20px;
  }

  @media (width >=769px) {
    padding-block-end: 16px;
  }

}

.service {
  --service-padding-block: 170px;

  padding-block: var(--service-padding-block);

  @media (width <=768px) {
    --service-padding-block: 36px;
  }

}


.service-items {
  --service-items-gap: 36px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--service-items-gap);
  justify-content: center;
  width: min(calc(100% - 30px), 1100px);
  margin-inline: auto;

  @media (width <=768px) {
    --service-items-gap: 20px;
  }

}

.service-item {
  --service-item-width: 340px;

  width: var(--service-item-width);

  @media (width <=768px) {
    --service-item-width: 100%;
  }

  >a {
    @media (hover: hover) {
      &:hover {
        figcaption {
          transform: translateX(5px);
        }
      }
    }
  }

  figure {
    position: relative;

    >img {
      @media (width <=768px) {
        aspect-ratio: 21/9;
        object-fit: cover;
      }

    }

    >figcaption {
      --service-figcaption-font-size: 22px;

      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 10px 15px;
      font-size: var(--service-figcaption-font-size);
      font-weight: 500;
      color: #fff;
      letter-spacing: 3px;
      transition: transform 0.1s;

      @media (width <=768px) {
        --service-figcaption-font-size: 13px;
      }



      &::after {
        display: inline-block;
        width: 73px;
        height: 10px;
        content: "";
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2273%22%20height%3D%2210%22%20viewBox%3D%220%200%2073%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.44189%208.97168H71.9731L64.2973%201.2959%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
      }
    }
  }
}

.payment {
  --payment-padding-block-end: 160px;

  padding-block-end: var(--payment-padding-block-end);

  @media (width <=768px) {
    --payment-padding-block-end: 36px;
  }

}

.section-title__payment {
  --payment-title-font-size: 50px;

  width: fit-content;
  padding: 0 20px 10px;
  margin-inline: auto;
  font-size: var(--payment-title-font-size);
  font-weight: 700;
  color: transparent;
  background-image: linear-gradient(90deg, #38b6ff 0.02%, #0086ec 39.49%, #38b6ff 78.95%, #0086ec 116.09%);
  background-clip: text;
  border-bottom: solid 2px #38B6FF;

  @media (width <=768px) {
    --payment-title-font-size: 32px;
  }

}

.payment-items {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: min(calc(100% - 30px), 1100px);
  padding-block-start: 30px;
  margin-inline: auto;


}

.payment-item {
  --payment-item-flex-direction: row;

  display: flex;
  flex-direction: var(--payment-item-flex-direction);
  align-items: center;

  @media (width <=768px) {
    --payment-item-flex-direction: column;
  }
}

.payment-item__text {
  --payment-item-text-padding: 24px 40px;
  --payment-item-text-font-size: inherit;

  padding: var(--payment-item-text-padding);
  font-size: var(--payment-item-text-font-size);
  background-color: #F7F7F7;

  @media (width <=768px) {
    --payment-item-text-padding: 27px 18px;
    --payment-item-text-font-size: 14px;
  }


  p {
    padding-block-start: 10px;
    font-weight: 500;
    line-height: 1.75;
  }
}

.payment-item__title {
  --payment-item-title-font-size: 28px;
  --payment-item-title-text-align: left;

  font-size: var(--payment-item-title-font-size);
  font-weight: 700;
  line-height: 1.14;
  text-align: var(--payment-item-title-text-align);

  @media (width <=768px) {
    --payment-item-title-font-size: 20px;
    --payment-item-title-text-align: center;
  }


  >span {
    --payment-item-title-span-font-size: inherit;

    font-size: var(--payment-item-title-span-font-size);
    color: #38B6FF;

    @media (width <=768px) {
      --payment-item-title-span-font-size: 26px;
    }

  }
}

.payment-item__subtitle {
  --payment-subtitle-text-align: left;

  width: fit-content;
  padding-block-start: 10px;
  text-align: var(--payment-subtitle-text-align);

  @media (width <=768px) {
    --payment-subtitle-text-align: center;

    margin-inline: auto;
  }


  >span {
    background: linear-gradient(transparent 65%, #fff799 65%);
  }
}

.flow-wrapper {
  --flow-wrapper-padding-block: 160px;

  padding-block: var(--flow-wrapper-padding-block);
  background-color: #d9f1ff;

  @media (width <=768px) {
    --flow-wrapper-padding-block: 36px;
  }

}

.flow-items {
  --flow-items-padding-block-start: 90px;

  display: flex;
  flex-direction: column;
  width: min(calc(100% - 30px), 1100px);
  margin-inline: auto;

  @media (width >=769px) {
    padding-block-start: var(--flow-items-padding-block-start);
  }

}

.flow-item {
  --flow-item-flex-direction: row;
  --flow-item-gap: 24px;

  position: relative;
  display: flex;
  flex-direction: var(--flow-item-flex-direction);
  gap: var(--flow-item-gap);
  padding: 20px;
  background-color: #fff;
  border-radius: 16px;

  @media (width <=960px) {
    --flow-item-flex-direction: column;
    --flow-item-gap: 12px;
    align-items: center;
  }

}

.flow-item__step {
  --flow-item-step-width: 116px;
  --flow-item-step-transform: translate(-8%, -25%);

  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--flow-item-step-width);
  aspect-ratio: 1;
  font-weight: 700;
  color: #38b6ff;
  background-color: #fff;
  border-radius: 50%;
  transform: var(--flow-item-step-transform);

  @media (width <=960px) {
    --flow-item-step-width: 80px;
  }

  @media (width >=961px) {
    --flow-item-step-transform: translate(-50%, -50%);

  }


  span {
    line-height: 0.8;
  }
}

.flow-item__step-label {
  --flow-item-step-label-font-size: 18px;

  font-size: var(--flow-item-step-label-font-size);
  text-transform: uppercase;
  letter-spacing: 2px;
  transform: translateX(4px);

  @media (width <=960px) {
    --flow-item-step-label-font-size: 14px;
  }

}

.flow-item__step-number {
  --flow-item-step-number-font-size: 68px;

  font-family: var(--font-family-barlow);
  font-size: var(--flow-item-step-number-font-size);

  @media (width <=960px) {
    --flow-item-step-number-font-size: 50px;
  }

}

.flow-item__text {
  @media (width >=769px) {
    width: calc(100% - 310px);

  }
}

.flow-item__title {
  --flow-item-title-font-size: 25px;
  --flow-item-title-width: auto;

  width: var(--flow-item-title-width);
  padding-block-end: 10px;
  margin-block-end: 10px;
  font-size: var(--flow-item-title-font-size);
  font-weight: 700;
  border-bottom: solid 1px #38B6FF;

  @media (width <=768px) {
    --flow-item-title-font-size: 20px;
    --flow-item-title-width: fit-content;

    margin-inline: auto;
  }

}

.flow-item__desc {
  --flow-item-desc-font-size: inherit;

  font-size: var(--flow-item-desc-font-size);
  font-weight: 500;

  @media (width <=768px) {
    --flow-item-desc-font-size: 14px;
  }

}

.flow-item__image {
  max-width: 310px;

  @media (width <=860px) {
    margin-inline: auto;
  }

}

.flow-item__arrow {
  --flow-item-arrow-padding-block: 28px;

  padding-block: var(--flow-item-arrow-padding-block);
  text-align: center;

  @media (width <=768px) {
    --flow-item-arrow-padding-block: 20px;
  }


  &::after {
    display: inline-block;
    width: 40px;
    height: 22px;
    content: "";
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2222%22%20viewBox%3D%220%200%2040%2022%22%20fill%3D%22none%22%3E%20%20%3Cpath%20d%3D%22M37.1588%202.58398L20.0001%2019.7422L2.84131%202.58398%22%20stroke%3D%22%2338B6FF%22%20stroke-width%3D%224.50853%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
  }
}

.works {
  --works-padding-block: 140px;

  padding-block: var(--works-padding-block);

  @media (width <=768px) {
    --works-padding-block: 36px;
  }

}

.work-items {
  --work-items-gap: 40px;
  --work-items-padding-block: 50px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--work-items-gap);
  justify-content: space-between;
  padding-block: var(--work-items-padding-block);

  @media (width <=768px) {
    --work-items-gap: 15px;
    --work-items-padding-block: 24px;

  }

}

.work-item {
  --work-item-width: calc(50% - 20px);

  display: flex;
  flex-direction: column;
  gap: 30px;
  width: var(--work-item-width);

  @media (width <=768px) {
    --work-item-width: calc(50% - 8px);

  }

}

.works-wrapper {
  width: min(calc(100% - 30px), 1100px);
  margin-inline: auto;
}

.work-item__title {
  --work-item-title-font-size: inherit;

  font-size: var(--work-item-title-font-size);
  text-align: center;

  @media (width <=768px) {
    --work-item-title-font-size: 14px;
  }

}

.footer {
  padding-block: 36px 30px;
  background: url("../images/footer_bg.png");
  background-size: cover;

  :where(p, li, a) {
    color: #fff;
  }
}

.footer-logo {
  text-align: center;

  p {
    padding-block-start: 10px;
    font-size: 28px;
    font-weight: 500;
  }
}

.footer-postal {
  padding-block: 24px;
  font-size: 18px;
}

.footer-container {
  --footer-container-flex-direction: row;

  display: flex;
  flex-direction: var(--footer-container-flex-direction);
  gap: 30px;
  width: min(calc(100% - 30px), 1100px);
  margin-inline: auto;

  @media (width <=768px) {
    --footer-container-flex-direction: column;
  }

}


.footer-container--main {
  flex: 1;
  text-align: center;
}


.footer-contact {
  padding-block: 20px;
  font-style: normal;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

.footer-contact__head {
  font-size: 26px;
  font-weight: 700;
}

.footer-contact__tel {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2px;

  &::before {
    display: inline-block;
    flex-shrink: 0;
    width: 34px;
    height: 33px;
    content: "";
    background-image: url("../images/icon-tel--white.svg");
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.footer-contact__hours {
  font-size: 18px;
  font-weight: 500;
}

.footer-sns__list {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding-block-start: 16px;
}

.footer-container--sub {
  flex: 2;

  @media (width >=769px) {
    padding-block-start: 60px;
  }
}


.footer-nav__list {
  --footer-nav-gap: 16px 40px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--footer-nav-gap);

  @media (width <=768px) {
    --footer-nav-gap: 10px;

    justify-content: center;

  }


  li {
    >a {
      --footer-nav-link-font-size: 20px;

      display: flex;
      gap: 6px;
      align-items: center;
      font-size: var(--footer-nav-link-font-size);

      @media (width <=768px) {
        --footer-nav-link-font-size: 11px;
      }


      &::before {
        --footer-nav-link-icon-width: 10px;

        display: inline-block;
        width: var(--footer-nav-link-icon-width);
        aspect-ratio: 1/1.7;
        content: "";
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2217%22%20viewBox%3D%220%200%2010%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.22754%201.00977L8.65936%208.41887L1.22754%2015.828%22%20stroke%3D%22white%22%20stroke-width%3D%221.95274%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
        background-size: contain;

        @media (width <=768px) {
          --footer-nav-link-icon-width: 6px;
        }

      }
    }
  }
}

.googlemap {
  padding-block-start: 40px;

  iframe {
    width: 100%;
    border-radius: 14px;

    @media (width <=768px) {
      height: 190px;

    }

  }
}

.floating-buttons {
  display: flex;
  align-items: center;
  border-radius: 40px;
  gap: 10px;
  background-color: #0092FF;
  padding: 8px 16px;
  position: fixed;
  right: 2svw;
  bottom: 2svw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

  @media (width <=480px) {
    right: 0;
    left: 0;
    border-radius: 0;
    bottom: 0;
  }

  @media (width >=481px) {
    max-width: 386px;
  }

}

.floating-buttons--visible {
  opacity: 1;
  visibility: visible;
}

.floating-buttons__label {
  flex: 2;
  color: #fff;
  text-align: center;
}

.floating-buttons__button {
  flex: 1;
}

.floating-buttons__list {
  display: flex;
  gap: 5px;

  >li {
    a {
      transition: opacity .2s ease-in;

      @media (hover: hover) {
        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
}

.copyright {
  --copyright-padding-block-start: 100px;

  padding-block-start: var(--copyright-padding-block-start);
  text-align: center;
  letter-spacing: 2px;

  @media (width <=768px) {
    --copyright-padding-block-start: 20px;

  }

}


/* ===========================================================================
   会社概要
=========================================================================== */
#page-company {
  --c-key: #43b6e8;
  --c-key-dark: #0aa0df;
  --c-gray: #6b7c86;
  --max: 1400px;
  overflow: hidden;
}

#page-company * {
  box-sizing: border-box;
}

#page-company img {
  max-width: 100%;
  height: auto;
  display: block;
}

#page-company .container {
  width: min(92vw, var(--max));
  margin-inline: auto;
}

/* =========================
   セクション共通
========================= */
#page-company section {
  padding: 48px 0;
}

#page-company .sec-head {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, sans-serif;
  text-align: center;
  line-height: 1.25;
}


/* =========================
   3つのこだわり (COMMITMENT)
========================= */
#page-company .commitment {
  position: relative;
  background: #fff;
}

/* hgroup */
#page-company hgroup {
  position: relative;
  margin-bottom: 100px;
}

@media (max-width: 767px) {
  #page-company hgroup {
    margin-top: 40px;
  }
}

#page-company hgroup h2.sec-head {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: #38B6FF;
  letter-spacing: 0;
  z-index: 1;
}

@media (max-width: 767px) {
  #page-company hgroup h2.sec-head {
    line-height: 1;
    font-size: 6.9vw;
  }
}


/* 背景見出し（薄字） */
#page-company .commitment .bgword {
  text-align: center;
  font-size: clamp(50px, 15.3vw, 155px);
  line-height: 1;
  user-select: none;
  font-family: var(--font-family-barlow);
  font-weight: 700;
  color: #f4f4f4;
  letter-spacing: 0;
  z-index: 0;
}

/* リスト */
#page-company .c-list {
  display: grid;
  gap: 150px;
}

@media (max-width: 767px) {
  #page-company .c-list {
    gap: 110px;
  }
}

/* アイテム */
#page-company .c-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
  align-items: center;
  z-index: 0;
}

@media (max-width: 767px) {
  #page-company .c-item: nth-child(odd) {
    padding-left: 20px;
  }

  #page-company .c-item:nth-child(even) {
    padding-right: 20px;
  }
}


/* メディア */
#page-company .c-media {
  max-width: 471px;
  height: auto;
  aspect-ratio: 471 / 497;
}

@media (max-width: 1024px) {
  #page-company .c-media {
    max-width: 330px;
    aspect-ratio: 330 / 497;
  }
}

@media (max-width: 767px) {
  #page-company .c-media {
    max-width: 100%;
    aspect-ratio: 100 / 60;
    order: 2;
  }
}

#page-company .c-media img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 本文 */
#page-company .c-body {
  color: #2c3438;
  width: calc(100% - 498px);
}

@media (max-width: 1024px) {
  #page-company .c-body {
    width: calc(100% - 358px);
  }
}

@media (max-width: 767px) {
  #page-company .c-body {
    width: 100%;
  }
}

/* ラベル・タイトル・テキスト */
#page-company .c-point {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--c-key-dark);
  margin-bottom: 44px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  #page-company .c-point {
    margin-bottom: 10px;
  }
}

#page-company .c-point .num {
  font-variant-numeric: tabular-nums;
}

#page-company .c-title {
  color: #38B6FF;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

#page-company .c-text {
  font-size: 18px;
  color: #4a5963;
  line-height: 1.9;
  font-weight: 500;
}

#page-company .c-item:nth-child(odd) .c-body {
  padding-right: 174px;
}

#page-company .c-item:nth-child(even) .c-body {
  padding-left: 174px;
}

@media (max-width: 1511px) {
  #page-company .c-item:nth-child(odd) .c-body {
    padding-right: 0;
  }

  #page-company .c-item:nth-child(even) .c-body {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  #page-company .c-item:nth-child(odd) .c-body .c-text {
    padding-left: 20px;
  }

  #page-company .c-item:nth-child(even) .c-body .c-text {
    padding-right: 20px;
  }

  #page-company .c-item:nth-child(odd) .c-media {
    padding-left: 20px;
    margin-right: -20px;
    max-width: 110%;
  }

  #page-company .c-item:nth-child(odd) .c-media img {
    border-radius: 10px 0 0 10px;
  }

  #page-company .c-item:nth-child(even) .c-media {
    padding-right: 20px;
    margin-left: -20px;
    max-width: 110%;
  }

  #page-company .c-item:nth-child(even) .c-media img {
    border-radius: 0 10px 10px 0;
  }
}

#page-company .c-item:nth-child(odd)::before,
#page-company .c-item:nth-child(even)::before {
  content: "";
  position: absolute;
  display: block;
  background: #f7f7f7;
  height: 116%;
  width: 100%;
  z-index: -1;
  border-radius: 8px;
}



#page-company .c-item:nth-child(even) .c-media {
  order: 2;
}

#page-company .c-item:nth-child(even) .c-body {
  order: 1;
}

#page-company .c-item:nth-child(odd)::before {
  left: 400px;
  padding-right: 50%;
}

#page-company .c-item:nth-child(even)::before {
  right: 400px;
  padding-left: 50%;
}

@media (max-width: 1024px) {
  #page-company .c-item:nth-child(odd)::before {
    left: 270px;
  }

  #page-company .c-item:nth-child(even)::before {
    right: 270px;
  }
}

@media (max-width: 767px) {
  #page-company .c-item:nth-child(odd)::before {
    left: 0;
    bottom: 044px;
    height: 100%;
  }

  #page-company .c-item:nth-child(even)::before {
    right: 0;
    bottom: 044px;
    height: 100%;
  }
}




/* =========================
   会社概要 (PROFILE)
========================= */
#page-company .profile {
  background: #D9F1FF;
  margin-top: 100px;
  padding-top: 122px;
  padding-bottom: 61px;
}

@media (max-width: 767px) {
  #page-company .profile {
    margin-top: 62px;
    padding-top: 100px;
  }
}

#page-company .profile .container {
  width: min(92vw, var(--max));
  max-width: 1100px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(24, 85, 120, 0.08);
  margin: 0 auto 61px auto;
  padding: 108px 150px 129px 150px;
  border-radius: 16px;
}

@media (max-width: 991px) {
  #page-company .profile .container {
    padding: 70px 100px 80px;
  }
}


@media (max-width: 767px) {
  #page-company .profile .container {
    margin: 0 auto 10px auto;
    padding: 60px 20px;
    border-radius: 10px;
  }
}


/* 見出し Company profile */
#page-company .profile .sec-head .en {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 69px;
  font-weight: 700;
  margin: 0 0 24px;
  background: linear-gradient(90deg,
      /* 左→右方向 */
      #38B6FF 0%, #0086EC 35%, #38B6FF 68%, #0086EC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0;
}

@media (max-width: 991px) {
  #page-company .profile .sec-head .en {
    margin: 0 0 10px;
    font-size: 7vw;
  }
}

#page-company .profile .sec-head .jp {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0 0 24px;
}



/* 表組 */
.company-profile-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #000;
}

.company-profile-table th,
.company-profile-table td {
  vertical-align: top;
  padding-top: 18px;
  padding-bottom: 18px;
}

@media (max-width: 767px) {

  .company-profile-table th,
  .company-profile-table td {
    padding-top: 22px;
    padding-bottom: 22px;
  }
}

.company-profile-table th {
  border-bottom: 3px solid #38B6FF;
  width: 25%;
  min-width: 91px;
  max-width: 200px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.company-profile-table td {
  border-bottom: 1px solid #CCCCCC;
  width: 75%;
  padding-left: 40px;
  line-height: 1.6;
  font-size: 15px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .company-profile-table td {
    padding-left: 10px;
  }
}



/* 細かな調整 */
#page-company .mt-24 {
  margin-top: 24px;
}

#page-company .mb-0 {
  margin-bottom: 0;
}

#page-company .icon-house {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

@media (min-width: 768px) {
  #page-company .icon-house {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}





/* ===========================================================================
 ABOUT（このページ専用）
 ============================================================================ */
#page-about {
  --c-key: #38B6FF;
  --max: 1100px;
}

#page-about * {
  box-sizing: border-box;
}

#page-about img {
  max-width: 100%;
  height: auto;
  display: block;
}

#page-about .container {
  width: min(92vw, var(--max));
  margin-inline: auto;
}

/* ====== 見出しエリア ====== */
#page-about hgroup {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
}

#page-about hgroup .sec-head {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: var(--c-key);
  letter-spacing: 0;
  z-index: 1;
  line-height: 1;
}

#page-about .bgword {
  text-align: center;
  font-size: clamp(50px, 15.3vw, 155px);
  line-height: 1;
  user-select: none;
  font-weight: 700;
  color: #f4f4f4;
  letter-spacing: 0;
  z-index: 0;
  font-family: var(--font-family-barlow);
}

@media (max-width: 767px) {
  #page-about hgroup {
    margin-top: 40px;
    margin-bottom: 50px;
  }

  #page-about hgroup .sec-head {
    font-size: 6.9vw;
  }
}

/* ====== ABOUT本文 ====== */
#page-about .about {
  position: relative;
  background: #fff;
  padding: 48px 0 120px;
}

#page-about .about__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

#page-about .about__lead {
  flex: 1;
  color: #4a5963;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;
  min-width: 0;
}

#page-about .about__lead .c-title {
  color: #38B6FF;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}

#page-about .about__media {
  flex-shrink: 0;
  width: 471px;
  height: auto;
  aspect-ratio: 471 / 483;
}

#page-about .about__media img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ====== 1024px以下 ====== */
@media (max-width: 1024px) {
  #page-about .about__media {
    width: 330px;
    max-width: 40%;
    aspect-ratio: 330 / 483;
  }
}

/* ====== 767px以下（SP） ====== */
@media (max-width: 767px) {
  #page-about .about__inner {
    flex-direction: column;
    gap: 24px;
  }

  #page-about .about__lead .c-title {
    text-align: center;
    font-size: 6vw;
  }

  #page-about .about__media {
    width: 100%;
    max-width: 100%;
    order: 1;
    aspect-ratio: 330 / 200;
  }

  #page-about .about__lead {
    order: 2;
    font-size: 16px;
  }
}







/* ===========================================================================
 よくあるご質問（このページ専用）
 ============================================================================ */
/* ====== ページ共通 ====== */
#page-faq {
  --c-key: #38B6FF;
  --max: 1100px;
  --color-primary: #38B6FF
}

#page-faq * {
  box-sizing: border-box
}

#page-faq .container {
  width: min(92vw, var(--max));
  margin-inline: auto
}

/* 見出し */
#page-faq hgroup {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
}

@media (max-width: 767px) {
  #page-faq hgroup {
    margin-top: 40px;
    margin-bottom: 50px;
  }
}


#page-faq .sec-head {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-key);
  z-index: 1
}

#page-faq .bgword {
  text-align: center;
  font-size: clamp(50px, 15.3vw, 155px);
  line-height: 1;
  color: #f4f4f4;
  font-weight: 700;
  user-select: none;
  z-index: 0;
  font-family: var(--font-family-barlow);
}

@media (max-width:767px) {
  #page-faq .sec-head {
    font-size: 6.9vw
  }
}

/* リスト全体 */
#page-faq .faq {
  padding: 48px 0 120px;
}

#page-faq .faq-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  width: 100%;
  max-width: 820px
}

#page-faq .faq-item {
  background: #F1F9FF;
  border-radius: 10px;
  overflow: hidden;
}

/* 質問行 */
#page-faq .faq-question {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  cursor: pointer;
  padding: 16px 48px 16px 16px;
  color: #23313a;
  user-select: none
}

#page-faq .faq-question::after,
#page-faq .faq-question::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-primary);
  transition: opacity .2s, transform .25s;
}

#page-faq .faq-question::after {
  width: 16px;
  height: 2px
}

/* − */
#page-faq .faq-question::before {
  width: 2px;
  height: 16px;
  right: 25px;
}

/* ＋の縦棒 */

/* 開いたら縦棒を消して「−」に */
#page-faq .faq-item.is-active .faq-question::before {
  opacity: 0;
  transform: translateY(-50%) scaleY(0)
}

/* Q/Aバッジ */
#page-faq .faq-item__q,
#page-faq .faq-item__a {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  line-height: 1
}

:where(.faq-item__q, .faq-item__a) {
  color: var(--color-primary);
  font-size: clamp(1.9rem, -1.5067rem + 10.6952vw, 2.25rem);
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  flex-shrink: 0;
}

#page-faq .faq-item__q {
  background: #0092FF;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  flex-shrink: 0;
}

#page-faq .faq-item__a {
  background: #ffa21a
}

#page-faq .faq-item__question {
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 700;
  color: #0092FF;
}

.faq-answer {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 16px 16px;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 700;
  color: #32424c;
  position: relative;
}





/* ===========================================================================
 事業案内（このページ専用）
 ============================================================================ */

#page-business {
  --c-key: #38B6FF;
  --max: 1100px;
}

#page-business * {
  box-sizing: border-box
}

#page-business img {
  max-width: 100%;
  height: auto;
  display: block
}

#page-business .container {
  width: min(92vw, var(--max));
  margin-inline: auto
}

/* 見出し */
#page-business hgroup {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
}

@media (max-width:767px) {
  #page-business hgroup {
    margin-top: 40px;
    margin-bottom: 50px;
  }
}

#page-business .sec-head {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-key);
  z-index: 1
}

#page-business .bgword {
  text-align: center;
  font-size: clamp(50px, 15.3vw, 155px);
  line-height: 1;
  color: #f4f4f4;
  font-weight: 700;
  user-select: none;
  z-index: 0;
  font-family: var(--font-family-barlow);
}

@media (max-width:767px) {
  #page-business .sec-head {
    font-size: 6.9vw
  }
}

/* リスト */
#page-business .business {
  background: #fff;
  padding: 48px 0 120px
}

#page-business .business-list {
  display: flex;
  flex-direction: column;
  gap: 100px
}

@media (max-width:767px) {
  #page-business .business-list {
    gap: 10vw;
  }
}

/* 各アイテム */
#page-business .business-item {
  display: flex;
  align-items: stretch;
  border-radius: 12px;
  z-index: 1;
  position: relative;
}

#page-business .business-item::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 81%;
  background: #F7F7F7;
  bottom: -43px;
  z-index: -1;
  border-radius: 5px;
}

#page-business .business-item.is-reverse {
  flex-direction: row-reverse
}


@media (max-width:767px) {
  #page-business .business-item::before {
    height: 100%;
    bottom: 0;
  }

  #page-business .business-item {
    flex-direction: column;
  }

  #page-business .business-item.is-reverse {
    flex-direction: column
  }
}

/* 画像 */
#page-business .business-media {
  flex: 0 0 555px;
  max-width: 555px;
  align-self: baseline;
  height: auto;
  aspect-ratio: 555 / 360;
}

#page-business .business-media .frame {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: #fff
}

#page-business .business-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

@media (max-width:1024px) {
  #page-business .business-media {
    flex-basis: 330px;
    max-width: 330px;
    aspect-ratio: 330 / 360;
  }
}

@media (max-width:767px) {
  #page-business .business-media {
    flex-basis: auto;
    max-width: 100%;
    aspect-ratio: 330 / 200;
  }

  #page-business .business-media .frame {
    border-radius: 10px 10px 0 0;
  }
}

/* テキスト */
#page-business .business-body {
  flex: 1;
  min-width: 0;
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: auto;
}

@media (max-width:767px) {
  #page-business .business-body {
    order: 2;
    gap: 0;
    padding-top: 4vw;
  }
}

#page-business .business-title {
  color: #38B6FF;
  padding-bottom: 8px;
  border-bottom: solid 1px #38B6FF;
  margin-bottom: 8px;
  font-size: 34px;
  font-weight: 700;
}

#page-business .is-reverse .business-title {
  padding-left: 27px;
}

@media (max-width:1024px) {
  #page-business .business-title {
    font-size: 4vw;
  }
}

#page-business .business-text {
  font-size: 18px;
  line-height: 1.8;
  font-weight: 500;
  margin: 0;
  padding: 30px 40px 0 40px;
}

@media (max-width:1024px) {
  #page-business .business-text {
    padding: 30px 20px 0 30px;
  }
}

@media (max-width:767px) {
  #page-business .business-title {
    font-size: clamp(20px, 5vw, 40px);
    margin: 0 20px;
    text-align: center;
    padding-bottom: 15px;
  }

  #page-business .business-text {
    font-size: clamp(16px, 2.2vw, 18px);
    padding: 20px 20px 30px;
  }
}








/* ===========================================================================
 お問い合わせページ本体
 ============================================================================ */
#page-contact {
  --c-key: #43b6e8;
  --c-text: #2b3943;
  --max-contact: 682px;
}

#page-contact * {
  box-sizing: border-box;
}

#page-contact .faq {
  padding: 48px 0 120px;
}

#page-contact .container {
  width: min(92vw, var(--max-contact));
  margin-inline: auto;
}


/* 見出し */
#page-contact hgroup {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
}

@media (max-width:767px) {
  #page-contact hgroup {
    margin-top: 40px;
    margin-bottom: 50px;
  }
}

#page-contact .sec-head {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-key);
  z-index: 1
}

#page-contact .bgword {
  text-align: center;
  font-size: clamp(50px, 18.3vw, 155px);
  line-height: 1;
  color: #f4f4f4;
  font-weight: 700;
  user-select: none;
  z-index: 0;
  font-family: var(--font-family-barlow);
}

@media (max-width:767px) {
  #page-contact .sec-head {
    font-size: 6.9vw
  }
}

#page-contact .contact {
  padding: 48px 0 120px;
}

#page-contact h1 {
  margin: 0 0 16px;
  font-size: clamp(22px, 4.5vw, 28px);
}

#page-contact .lead {
  font-size: 15px;
  line-height: 1.9;
  color: #3e4a53;
  text-align: center;
  margin: 0 0 40px;
}

@media (max-width:640px) {
  #page-contact .lead {
    text-align: left;
  }
}

/* CF7 基本 */
#page-contact .wpcf7 form {

  background: #fff;
}

/* 影は不要 */
#page-contact .wpcf7 form {
  box-shadow: none;
}

#page-contact .field {
  margin: 0 0 30px;
}

#page-contact .field label {
  display: block;
  font-weight: 700;
  margin: 0 0 8px;
  color: #22313a;
}

#page-contact input[type="text"],
#page-contact input[type="email"],
#page-contact input[type="tel"],
#page-contact textarea {
  width: 100%;
  font: inherit;
  color: var(--c-text);
  border: 1px solid #dfe8ee;
  border-radius: 5px;
  padding: 12px 14px;
  background: #fff;
}

#page-contact textarea {
  min-height: 180px;
  resize: vertical;
}

#page-contact input:focus,
#page-contact textarea:focus {
  outline: none;
  border-color: #249fde;
  box-shadow: 0 0 0 3px rgba(36, 159, 222, .16);
}


/* ========= プライバシーポリシー同意チェック ========= */
#page-contact .agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: #24323b;
  line-height: 1.6;
}

/* プライバシ */
#page-contact .agree .wpcf7-list-item {
  margin: 0;
}

#page-contact .agree .wpcf7-list-item label {
  display: flex;
  align-items: anchor-center;
}

#page-contact .agree .wpcf7-list-item label input {
  margin-right: 10px
}

#page-contact .agree .wpcf7-list-item label label {
  margin: 0;
}

/* チェックボックスを大きく＆統一デザイン化 */
#page-contact .agree input[type="checkbox"] {
  appearance: none;
  /* 各ブラウザの標準チェックスタイルを無効 */
  width: 30px;
  height: 30px;
  border: 2px solid #dfe8ee;
  border-radius: 1px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background: #fff;
  transition: all .2s ease;
}

/* ホバー時に少し明るく */
#page-contact .agree input[type="checkbox"]:hover {
  border-color: var(--c-key);
  box-shadow: 0 0 0 3px rgba(67, 182, 232, 0.15);
}

/* チェックされた状態 */
#page-contact .agree input[type="checkbox"]:checked {
  background-color: var(--c-key);
  border-color: var(--c-key);
}

/* チェックマーク（擬似要素で描画） */
#page-contact .agree input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 8px;
  width: 8px;
  height: 15px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* テキストリンク */
#page-contact .agree a {
  color: #0092FF;
  font-weight: 500;
}

#page-contact .agree a:hover {
  opacity: .8;
}



/* ボタン */
#page-contact .actions {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

#page-contact .btn {
  display: inline-block;
  width: 210px;
  font-size: 17px;
  text-align: center;
  border: 0;
  cursor: pointer;
  background: #0092FF;
  color: #fff;
  font-weight: 800;
  padding: 14px 18px;
  border-radius: 999px;
  letter-spacing: .05em;
}

#page-contact .btn:hover {
  filter: brightness(.98);
}

/* メッセージ */
#page-contact .wpcf7-not-valid-tip {
  color: #e03b3b;
  font-size: 12px;
  margin-top: 6px;
}

#page-contact .wpcf7-response-output {
  margin: 14px 0 0;
  border-radius: 10px;
  padding: 10px 12px;
}

#page-contact .wpcf7 form.invalid .wpcf7-response-output {
  border-color: #ffd4d4;
  background: #fff3f3;
  color: #b40000;
}

#page-contact .wpcf7 form.sent .wpcf7-response-output {
  border-color: #cdeedd;
  background: #effbf5;
  color: #135f3a;
}

span.wpcf7-spinner {
  position: absolute;
}




/* ===========================================================================
お知らせ 一覧
 ============================================================================ */
#page-news {
  --c-key: #38B6FF;
  --max: 1100px;
}

#page-news * {
  box-sizing: border-box
}

#page-news img {
  max-width: 100%;
  height: auto;
  display: block
}

#page-news .l-pagehead {
  padding: 48px 0 0;

}

#page-news .news-list {
  padding: 0 0 120px;
}

#page-news .container {
  width: min(92vw, var(--max));
  margin-inline: auto
}

/* 見出し */
#page-news hgroup {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
}

@media (max-width:767px) {
  #page-news hgroup {
    margin-top: 40px;
    margin-bottom: 50px;
  }
}

#page-news .sec-head {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-key);
  z-index: 1
}

#page-news .bgword {
  text-align: center;
  font-size: clamp(50px, 15.3vw, 155px);
  line-height: 1;
  color: #f4f4f4;
  font-weight: 700;
  user-select: none;
  z-index: 0;
  font-family: var(--font-family-barlow);
}

@media (max-width:767px) {
  #page-news .sec-head {
    font-size: 6.9vw
  }
}









/* ====== NEWS common ====== */
.page-news,
.page-newsSingle {
  --c-key: #38B6FF;
}

/* layout */
.l-inner {
  width: min(92vw, 1100px);
  margin-inline: auto;
}

.l-pagehead {
  padding: 32px 0 8px;
}

.c-pageTitle {
  position: relative;
  margin: 0;
}

.c-pageTitle .en {
  font: 700 84px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  color: #e9f5ff;
  display: block;
}

.c-pageTitle .ja {
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 28px);
  color: #1a1a1a;
  position: absolute;
  inset: auto 0 8px 0;
}

.breadcrumbs {
  font-size: 12px;
  color: #8aa;
  margin-bottom: 6px;
}

.breadcrumbs a {
  color: #7aa;
  text-decoration: none;
}

/* ====== NEWS list ====== */
.news-list {
  padding: 16px 0 48px;
}

.c-newsList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-newsItem {
  border-bottom: 1px solid #e6eef5;
}

.c-newsItem:first-child {
  border-top: 1px solid #e6eef5;
}

.c-newsItem__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 14px 6px;
  text-decoration: none;
  color: #222;
  transition: background 0.2s ease;
}

.c-newsItem__link:hover {
  background: #f8fcff;
}

.c-newsItem__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  /* width: 180px; */
  /* 左カラム固定幅（調整OK） */
}

.c-metaDate {
  font-weight: 700;
  font-size: 15px;
  color: #333;
}

.c-metaBadge {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--c-key);
  border-radius: 9999px;
  padding: 4px 20px;
  display: inline-block;
  white-space: nowrap;
}

.c-newsItem__title {
  flex: 1;
  line-height: 1.7;
  font-size: 15px;
}

/* ページネーション */
.c-pagination {
  text-align: center;
  margin: 40px 0 0;
}

.c-pagination .page-numbers {
  display: inline-block;
  min-width: 36px;
  padding: 8px 10px;
  margin: 0 4px;
  border: 1px solid #e2edf8;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: 0.2s;
}

.c-pagination .page-numbers:hover {
  background: var(--c-key);
  color: #fff;
  border-color: var(--c-key);
}

.c-pagination .current {
  background: var(--c-key);
  color: #fff;
  border-color: var(--c-key);
  font-weight: 700;
}

/* ====== SP（768px以下） ====== */
@media (max-width: 768px) {
  .c-newsItem__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px 8px;
    padding: 16px 0;
  }

  .c-newsItem__meta {
    width: auto;
  }

  .c-newsItem__title {
    font-size: 14px;
  }
}



/* ===========================================================================
お知らせ　詳細ページ
 ============================================================================*/
#page-newsSingle {
  --c-key: #43b6e8;
  --c-text: #2b3943;
  --max-contact: 920px;
}

#page-newsSingle {
  width: min(92vw, var(--max-contact));
  margin-inline: auto;
}

#page-newsSingle article {
  padding: 48px 0 120px;
}

.c-article__head {
  padding: 20px 0 8px;
}

@media (max-width: 768px) {
  .c-article__head {
    padding: 30px 0 0;
  }
}

.c-article__meta {
  margin-bottom: 25px;
}

.c-metaBadge {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--c-key);
  border-radius: 9999px;
  padding: 4px 10px;
  display: inline-block;
}

.c-metaDate {
  font-weight: 700;
  font-size: 13px;
  color: #333;
}

.c-article__title {
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 5px 0;
}

.c-hr {
  height: 1px;
  background: #e6eef5;
  border: 0;
}

.c-article__body {
  padding: 18px 0 40px;
}

.c-article__body p,
.c-article__body li {
  line-height: 1.9;
}

.c-articleNav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
}

/* 前・次ナビゲーション（single-news.php） */
.c-articleNav a {
  text-decoration: none;
  color: #333;
  transition: 0.2s;
}

.c-articleNav a:not(.to-archive):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-articleNav .to-archive {
  text-decoration: none;
  border: 1px solid #e2edf8;
  border-radius: 999px;
  padding: 8px 16px;
  color: #333;
  transition: 0.2s;
}

.c-articleNav .to-archive:hover {
  background: var(--c-key);
  color: #fff;
  border-color: var(--c-key);
}





/* ===========================================================================
施工事例一覧ページ
 ============================================================================ */
/* hgroup */

.page-case-archive .l-pagehead {
  padding: 48px 0 0;
}


.page-case-archive hgroup {
  position: relative;
  margin-bottom: 60px;
}

@media (max-width: 767px) {
  .page-case-archive hgroup {
margin-top: 40px;
  margin-bottom: 50px;
  }
}

.page-case-archive hgroup h2.sec-head {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: #38B6FF;
  letter-spacing: 0;
  z-index: 1;
}

@media (max-width: 767px) {
  .page-case-archive hgroup h2.sec-head {
    line-height: 1;
    font-size: 6.9vw;
  }
}

.page-case-archive .bgword {
  text-align: center;
  font-size: clamp(50px, 18.3vw, 155px);
  line-height: 1;
  color: #f4f4f4;
  font-weight: 700;
  user-select: none;
  z-index: 0;
  font-family: var(--font-family-barlow);
}

@media (max-width:767px) {
  .page-case-archive .sec-head {
    font-size: 6.9vw
  }
}



/* ========== 共通レイアウト ========== */
.page-case-archive .l-inner {
  width: min(92vw, 1100px);
  margin-inline: auto;
}

.l-pagehead {
  padding: 32px 0 8px;
}

.c-pageTitle {
  position: relative;
  margin: 0;
}

.c-pageTitle .en {
  font: 700 84px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  color: #e9f5ff;
  display: block;
}

.c-pageTitle .ja {
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 28px);
  color: #1a1a1a;
  position: absolute;
  inset: auto 0 8px 0;
}

.breadcrumbs {
  font-size: 12px;
  color: #8aa;
  margin-bottom: 6px;
}

/* ========== 一覧カード ========== */
.case-archive {
  padding: 0 0 120px;
}

.caseCards {
  --gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* PC 4カラム */
  gap: var(--gap);
}

.caseCard__link {
  display: block;
  text-decoration: none;
  color: #222;
}

.caseCard__fig {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #eaf5ff;
  border: 1px solid #e6eef5;
}

.caseCard__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.caseCard__link:hover .caseCard__fig img {
  transform: scale(1.02);
}

.caseCard__title {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
}

/* SP：2カラム */
@media (max-width: 768px) {
  .c-pageTitle .en {
    font-size: 52px;
  }

  .c-pageTitle .ja {
    position: static;
    margin-top: -4px;
  }

  .caseCards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ========== ページネーション（丸ピル） ========== */
.c-pagination {
  text-align: center;
  margin: 28px 0 0;
}

.c-pagination .page-numbers {
  display: inline-block;
  min-width: 34px;
  height: 34px;
  line-height: 34px;
  margin: 0 4px;
  padding: 0 8px;
  border: 1px solid #e2edf8;
  border-radius: 999px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: .2s;
}

.c-pagination .page-numbers:hover {
  background: var(--c-key, #38B6FF);
  color: #fff;
  border-color: var(--c-key, #38B6FF);
}

.c-pagination .current {
  background: var(--c-key, #38B6FF);
  color: #fff;
  border-color: var(--c-key, #38B6FF);
  font-weight: 700;
}


/* ===========================================================================
施工事例詳細ページ
 ============================================================================ */
.case-single .l-inner {
  width: min(92vw, 1100px);
  margin-inline: auto;
  padding: 48px 0 120px;
}
@media (max-width: 768px) {
  .case-single .l-inner {
    margin-top: 20px;
    }
}

.case-title {
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 12px 0 8px;
}

.case-hr {
  border: 0;
  height: 1px;
  background: var(--c-key);
  margin: 6px 0 48px;
}
@media (max-width: 768px) {
  .case-hr {
      margin: 6px 0 8px;
    }
}

/* メインスライダー */
.case-main {
  position: relative;
}


.case-figure {
  margin: 0;
}

.case-figure img {
  width: 100%;
  height: auto;
  display: block;
}


.case-main.is-single .nav {
  display: none;
}

/* 1枚の時は矢印を消す */

/* サムネ（非スライドで並べる） */
.case-thumbs {
  --gap: 8px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* PC：6列 → 最大12枚で2行 */
  gap: var(--gap);
  margin: 14px auto 24px;
  max-width: 800px;
}

.case-thumbs .thumb {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  outline: 1px solid #e2edf8;
  transition: outline-color .15s ease;
  opacity: 0.7;
}

.case-thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-thumbs .thumb.is-active,
.case-thumbs .thumb:hover {
  outline: 3px solid var(--c-key, #38B6FF);
  opacity: 1;
}


/* SP：3行にしたいので4列 */
@media (max-width:767px) {
  .case-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 12枚で3行 */
}

.case-content {
  margin: 24px 0;
  line-height: 1.9;
}

.case-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
      max-width: 800px;
        margin: 50px auto 0;
}

.case-nav a {
  color: #333;
  text-decoration: none;
}

.case-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* キーカラー（必要なら既存の --c-key を使い回し） */
.case-single {
  --c-key: #38B6FF;
}

/* スライダーの箱：幅800pxまで＆中央寄せ */
.case-main {
  display: flex;
  justify-content: center;
}

.case-swiper {
  width: 100%;
  max-width: 800px;
  /* 最大幅 */
  padding: 16px;
  margin-inline: auto;
  border: 1px solid #e6eef5;
  overflow: hidden;
  position: relative;
}

/* 高さを530pxに固定（小さい画面では自動縮小） */
.case-swiper .swiper-wrapper,
.case-swiper .swiper-slide {
  height: clamp(240px, 66vw, 530px);
  /* 画面が狭い時は縮む */
}

/* 画像は箱に収める（黒帯回避） */
.case-figure {
  margin: 0;
  height: 100%;
}

.case-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 指定どおり */
  background: #fff;
  /* 任意：下地白 */
  display: block;
}

/* 矢印（青） */
/* 矢印（外側に表示） */
.case-main .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 10;
  /* ★ スライダーより前面に */
}


.case-main .prev {
  left: calc(50% - 400px - 60px);
}

/* 800pxの外へ60px分 */
.case-main .next {
  right: calc(50% - 400px - 60px);
}

.case-main .nav::after {
  content: "";
  width: 40px;
  height: 40px;
  border-top: 2px solid var(--c-key);
  border-right: 2px solid var(--c-key);
  transform: rotate(45deg);
}

@media (max-width: 920px) {
  .case-main .nav {
    width: 50px;
    height: 50px;
    padding: 10px;
            opacity: 1;
  }
    .case-main .prev {
    left: 5px;
      padding-left: 18px;
    }
  
    .case-main .next {
    right: 5px;
      padding-right: 18px;
    }
  
    .case-main .nav::after {
    width: 20px;
      height: 20px;
    }
}

.case-main .prev::after {
  transform: rotate(225deg);
}

/* ← */
.case-main .nav:hover {
  opacity: 0.8;
}



/* 1枚しか無い時は矢印を消す（既存のis-single対応も維持） */
.case-main.is-single .nav {
  display: none;
}

/* SP 微調整（余白） */
@media (max-width: 768px) {
  .case-main {
    padding: 12px;
  }
}

/* ===========================================================================
ページネーション
 ============================================================================ */
/* ====== ページ共通 ====== */
.c-pagination {
  --c-key: #38B6FF;
}
.c-pagination {
  text-align: center;
  margin: 40px 0 0;
}

.c-pagination .nav-links {
  display: flex;
  justify-content: center;
}

.c-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 100%;
  padding: 4px;
  margin: 0 4px;
  border: 1px solid #e2edf8;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: 0.2s;
}

.c-pagination .page-numbers:hover {
  background: var(--c-key);
  color: #fff;
  border-color: var(--c-key);
}

.c-pagination .current {
  background: var(--c-key);
  color: #fff;
  border-color: var(--c-key);
  font-weight: 700;
}

.c-pagination .prev,
.c-pagination .next {
  font-size: 16px;
  font-weight: 700;
}