@charset "UTF-8";

/* ============================================
 *  共通部分
 * ============================================ */
:root {
  /* Font Size */
  --fs-h2: 64px;

  /* Carousel */
  --splide-img-width: 576px;
  --splide-gap: 32px;
  --splide-width: min(var(--max-w), 100vw - var(--page-pad) * 2);

  /* Icons */
  --icon-lock-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M240 160L240 224L400 224L400 160C400 115.8 364.2 80 320 80C275.8 80 240 115.8 240 160zM192 224L192 160C192 89.3 249.3 32 320 32C390.7 32 448 89.3 448 160L448 224C483.3 224 512 252.7 512 288L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 288C128 252.7 156.7 224 192 224zM400 272L240 272L240 272L192 272L192 272C183.2 272 176 279.2 176 288L176 512C176 520.8 183.2 528 192 528L448 528C456.8 528 464 520.8 464 512L464 288C464 279.2 456.8 272 448 272L448 272L400 272L400 272z'/%3E%3C/svg%3E");

  --icon-bullhorn-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M512 117.9L512 522.1L485.9 497.7C435.9 451 371.7 422.7 304 417L304 222.9C371.7 217.2 435.9 188.9 485.9 142.2L512 117.9zM304 449.2C363.6 454.8 420 480 464.1 521.2L497.8 552.7C502.9 557.4 509.6 560.1 516.5 560.1C531.7 560.1 544 547.8 544 532.6L544 107.6C544 92.4 531.7 80.1 516.5 80.1C509.5 80.1 502.8 82.7 497.8 87.5L464.1 118.8C413.9 165.7 347.8 191.8 279.2 192L192 192C121.3 192 64 249.3 64 320C64 379.6 104.8 429.8 160 444L160 528C160 554.5 181.5 576 208 576L256 576C282.5 576 304 554.5 304 528L304 449.2zM264 448L272 448L272 528C272 536.8 264.8 544 256 544L208 544C199.2 544 192 536.8 192 528L192 448L264 448zM264 224L272 224L272 416L192 416C139 416 96 373 96 320C96 267 139 224 192 224L264 224L264 224z'/%3E%3C/svg%3E");

  --icon-circle-exclamation-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 96C196.3 96 96 196.3 96 320C96 443.7 196.3 544 320 544C443.7 544 544 443.7 544 320C544 196.3 443.7 96 320 96zM320 448C306.7 448 296 437.3 296 424C296 410.7 306.7 400 320 400C333.3 400 344 410.7 344 424C344 437.3 333.3 448 320 448zM320 192C333.5 192 344.3 203.4 343.5 216.9L335.9 352.9C335.4 361.4 328.4 368 319.9 368C311.4 368 304.4 361.4 303.9 352.9L296.3 216.9C295.5 203.4 306.3 192 319.8 192z'/%3E%3C/svg%3E");
}

@media (max-width: 1249px) {
  :root {
    --fs-h2: 48px;
  }
}

main {
  display: flex;
  flex-direction: column;
}

section {
  padding-block: 112px;
}

@media (max-width: 1249px) {
  section {
    padding-block: var(--s-10);
  }
}

@media (max-width: 999px) {
  section {
    padding-block: var(--s-8);
  }
}

/* ============================================
 *  ヒーロー
 * ============================================ */
.hero {
  position: relative;
  height: 704px;
  overflow: hidden;
  padding-block: 0;
}

.hero::before {
  width: 100%;
  height: 70%;
  display: block;
  content: "";
  background: linear-gradient(#2a8ce866 0%, #2a8ce800 100%);
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(../img/index-top-bg.webp);
  background-position: 100% 68%;
  background-size: cover;
  z-index: -1;
}

.hero > p {
  position: absolute;
  top: 23.5%;
  left: 0;
  right: 0;
  color: var(--c-text-white);
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 42px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: var(--fw-sb);
  text-shadow: 0px 0px 70px #16548d;
}

.hero > p > br {
  display: none;
}

@media (max-width: 1249px) {
  .hero {
    height: 480px;
  }

  .hero > p {
    line-height: 1.4;
    font-size: 30px;
  }
}

@media (max-width: 799px) {
  .hero {
    height: 360px;
  }

  .hero > p {
    font-size: 24px;
  }
}

@media (max-width: 599px) {
  .hero::after {
    transform: scale(1.15);
    background-position: 109% 68%;
  }

  .hero > p {
    top: 15%;
    text-shadow: 0px 0px 70px #16548d80;
  }

  .hero > p > br {
    display: unset;
  }
}

/* ============================================
 *  カルーセル
 * ============================================ */
.splide {
  max-width: calc(var(--splide-img-width) * 3 + var(--splide-gap) * 2);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-block: var(--s-9) var(--s-6);
}

.splide__slide {
  max-width: var(--splide-img-width);
}

.splide__slide > * {
  display: block;
  width: var(--splide-width);
}

.splide__slide > * > img {
  max-width: var(--splide-img-width);
  width: 100%;
  border: 4px solid var(--c-bg-fb);
  border-radius: var(--r-l);
}

.splide__arrows {
  display: flex;
  justify-content: center;
  margin-top: var(--s-4-5);
}

button.splide__arrow {
  background-color: color-mix(in srgb, var(--c-accent) 15%, transparent);
  opacity: 1;
  position: static;
  transform: none;
  width: var(--s-4);
  height: unset;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  outline: unset;
}

.splide__arrow svg {
  fill: var(--c-accent);
  width: var(--s-3);
  height: unset;
  aspect-ratio: 1;
}

.splide__arrow--prev {
  order: -1;
}

.splide__pagination {
  position: static;
  padding: 0 var(--s-3-5);
  gap: 12px;
}

.splide:not(.is-overflow) .splide__pagination {
  display: flex;
}

.splide__pagination li {
  display: flex;
}

button.splide__pagination__page {
  background: color-mix(in srgb, var(--c-text) 12%, transparent);
  margin: 0;
  height: 8px;
  width: 8px;
  outline: unset;
  box-shadow: unset;
}

.splide__pagination__page.is-active {
  background-color: var(--c-accent);
  transform: scale(1);
}

@media (max-width: 1249px) {
  :root {
    --splide-img-width: 420px;
  }

  .splide {
    padding-block: var(--s-6) var(--s-4-5);
  }

  .splide__arrows {
    margin-top: var(--s-4);
  }

  button.splide__arrow {
    width: var(--s-4);
  }

  .splide__arrow svg {
    width: 20px;
  }

  .splide__pagination {
    padding: 0 var(--s-3);
    gap: 10px;
  }
}

@media (max-width: 999px) {
  .splide {
    padding-block: var(--s-5) var(--s-3-5);
  }

  .splide__arrows {
    margin-top: var(--s-3);
  }
}

/* ============================================
 *  見出し
 * ============================================ */
h1 {
  position: fixed !important;
  /* keep it on viewport */
  top: 0px !important;
  left: 0px !important;
  /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
    before allowing buttons to be activated. */
  width: 4px !important;
  height: 4px !important;
  /* visually hide it with overflow and opacity */
  opacity: 0 !important;
  overflow: hidden !important;
  /* remove any margin or padding */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* ensure no other style sets display to none */
  display: block !important;
  visibility: visible !important;
}

section > div .heading {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s-1) + 2px);
}

section > div .heading > h2 {
  line-height: 1;
  letter-spacing: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-sb);
}

section > div .heading > h2::first-letter {
  color: color-mix(in srgb, var(--c-accent) 90%, transparent);
}

section > div .heading > p {
  font-weight: var(--fw-m);
}

@media (max-width: 1249px) {
  section > div .heading {
    gap: calc(var(--s-1) - 2px);
  }
}

@media (max-width: 999px) {
  section > div .heading {
    align-items: center;
  }
}

/* ============================================
 *  コンテンツ部
 * ============================================ */
section:not(.splide) > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

@media (max-width: 1249px) {
  section:not(.splide) > div {
    gap: var(--s-5);
  }
}

/* ============================================
 *  お知らせ
 * ============================================ */
.news {
  background-color: color-mix(in srgb, var(--c-text) 3%, transparent);
}

.news > div > div:first-of-type {
  padding: 0 var(--s-0-5) var(--s-0-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-5);
}

.news [role="tab"]::before {
  width: var(--s-3-5);
}

.news [role="tab"]:nth-of-type(1)::before {
  -webkit-mask-image: var(--icon-bullhorn-l);
  mask-image: var(--icon-bullhorn-l);
}

.news [role="tab"]:nth-of-type(2)::before {
  -webkit-mask-image: var(--icon-circle-exclamation-l);
  mask-image: var(--icon-circle-exclamation-l);
}

.news > div > a {
  margin-inline: auto;
  padding: calc(var(--s-2) + 1px) calc(var(--s-9) - 2px) calc(var(--s-2) + 1px) var(--s-4);
}

.news > div > a::after {
  right: var(--s-3);
}

@media (max-width: 1249px) {
  .news [role="tab"]::before {
    width: calc(var(--s-2-5) + 2px);
  }
}

@media (max-width: 999px) {
  .news > div > div:first-of-type {
    padding: 0 var(--s-0-5) var(--s-0-5);
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
}

/* ============================================
 *  サービスのご案内
 * ============================================ */
.service {
  background-color: color-mix(in srgb, var(--c-accent) 10%, transparent);
}

.service .btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(136px, 100%), 1fr));
  gap: var(--s-2);
  list-style: none;
}

.service .btns a {
  padding: var(--s-2) var(--s-1) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-0-5);
  letter-spacing: 0.03em;
}

.service .btns a::after {
  right: var(--s-1-5);
  width: var(--s-3);
  -webkit-mask-image: var(--icon-circle-chevron-right);
  mask-image: var(--icon-circle-chevron-right);
}

.service .btns > li > a > img {
  width: var(--s-10);
}

.service > div > div:not(.heading),
.service > div > div > .menu {
  display: flex;
  flex-direction: column;
  gap: var(--s-6-5);
}

.service > div > div > .menu {
  gap: var(--s-6);
}

.service > div > div > .menu > div {
  position: relative;
  border: 1px solid var(--c-ib);
  border-radius: var(--r-l);
  background-color: var(--c-bg-fb);
  display: flex;
  align-items: flex-start;
}

.service > div > div > .menu > div.biz {
  border-color: var(--c-ib-biz);
}

.service > div > div > .menu > div > div {
  max-width: 496px;
  width: 100%;
  flex-shrink: 0;
  padding: var(--s-5) var(--s-8) 0 var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-1-5);
}

.service > div > div > .menu > div > div > h3 {
  font-size: 28px;
  font-weight: var(--fw-m);
}

.service > div > div > .menu > div > div > img {
  width: 42px;
}

.service > div > div > .menu > div > .btn {
  position: absolute;
  bottom: var(--s-4-5);
  left: var(--s-6);
  max-width: 384px;
  width: 100%;
  --c-btn-border: var(--c-ib-border);
  padding: calc(var(--s-1-5) - 1px) var(--s-2-5);
  background-color: color-mix(in srgb, var(--c-ib) 90%, transparent);
  gap: 6px;
}

.service > div > div > .menu > div.biz > .btn {
  --c-btn-border: var(--c-ib-biz-border);
  background-color: color-mix(in srgb, var(--c-ib-biz) 90%, transparent);
}

.service > div > div > .menu > div > .btn::before {
  width: calc(var(--s-3) - 2px);
  -webkit-mask-image: var(--icon-lock-l);
  mask-image: var(--icon-lock-l);
}

.service > div > div > .menu > div > .btn::after {
  right: var(--s-2);
}

.service > div > div > .menu > div > .btns {
  width: 100%;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
}

.service > div > div > .menu > div > .btns > li > a {
  padding: var(--s-3) var(--s-2);
  background-color: color-mix(in srgb, var(--c-text) 1%, transparent);
  gap: var(--s-1);
}

.service > div > div > .btns {
  gap: var(--s-6);
}

.service > div > div > .btns > li > a {
  border-radius: var(--r-l);
}

@media (max-width: 1249px) {
  .service .btns a {
    padding-block: var(--s-1-5) calc(var(--s-2) + 2px);
    font-size: 16px;
  }

  .service > div > div:not(.heading),
  .service > div > div > .menu {
    gap: var(--s-5);
  }

  .service > div > div > .menu > div > div > h3 {
    font-size: 22px;
  }

  .service > div > div > .menu > div > div > img {
    width: 34px;
  }

  .service .btns > li > a > img {
    width: var(--s-8);
  }

  .service > div > div > .btns {
    gap: calc(var(--s-2) + 2px);
  }

  .service > div > div > .menu > div > div {
    max-width: 416px;
    padding: var(--s-4-5) var(--s-7) 0 var(--s-5);
  }

  .service > div > div > .menu > div > .btns > li > a {
    padding: var(--s-2-5) var(--s-1-5);
  }

  .service > div > div > .menu > div > .btn {
    bottom: var(--s-4-5);
    left: var(--s-5);
    max-width: 320px;
    padding: calc(var(--s-1-5) - 2px) var(--s-5) calc(var(--s-1-5) - 2px) var(--s-2);
  }

  .service > div > div > .menu > div > .btn::before {
    width: var(--s-2-5);
  }

  .service > div > div > .menu > div > .btn::after {
    right: var(--s-1-5);
  }
}

@media (max-width: 999px) {
  .service > div > div > .menu > div {
    padding: var(--s-4-5) var(--s-3);
    align-items: center;
    flex-direction: column;
    gap: var(--s-4);
  }

  .service > div > div > .menu > div > div {
    max-width: unset;
    width: unset;
    padding: 0 14px 0 0;
  }

  .service > div > div > .menu > div > .btns {
    padding: unset;
  }

  .service > div > div > .menu > div > .btn {
    position: relative;
    bottom: unset;
    left: unset;
  }
}

@media (max-width: 699px) {
  .service .btns > li > a > img {
    width: var(--s-6-5);
  }

  .service > div > div > .menu > div > .btns {
    grid-template-columns: 1fr;
  }

  .service > div > div > .menu > div > .btns > li > a {
    padding: var(--s-1-5) calc(var(--s-2) + 2px);
    flex-direction: row;
  }

  .service > div > div > .menu > div > .btns > li > a::after {
    right: calc(var(--s-2) + 2px);
  }

  .service > div > div > .btns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
 *  バナー
 * ============================================ */
.banner {
  padding-block: 160px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.banner > ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(186px, 100%), 1fr));
  gap: var(--s-5);
}

.banner > ul > li.border > a {
  border: 1px solid var(--c-spacer);
}

.banner > ul > li > a,
.banner > ul > li > a > img {
  width: 100%;
  display: block;
}

@media (max-width: 1249px) {
  .banner {
    padding-block: 96px;
  }

  .banner,
  .banner > ul {
    gap: var(--s-3);
  }
}

@media (max-width: 999px) {
  .banner {
    padding-block: var(--s-10);
  }
}

@media (max-width: 599px) {
  .banner > ul {
    grid-template-columns: repeat(2, 1fr);
  }
}