@charset "UTF-8";

/* ======================================================
   トップページ全体
====================================================== */

/* ======================================================
   KV
====================================================== */
.top_kv {
  position: relative;
  height: 78rem; /* 780px */
  overflow: hidden;
}
.top_kv__image {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  background-image: url(../images/kv-main.webp);
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center center;
  z-index: 0;
}
.top_kv__image picture {
  height: 100%;
}
.top_kv__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .top_kv__image::before {
  content:'';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: var(--color_kv);
  opacity: 0.5;
} */
.top_kv__catch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: clamp(3.2rem, 2.75vw, 4rem) clamp(2.4rem, 3.30vw, 4.8rem); /* v:40/1453, h:48/1453 */
  width: clamp(30rem, 42.81vw, 62.2rem); /* 622 / 1453 */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  text-align: center;
  color: var(--color_main);
  z-index: 2;
}
.top_kv__brand {
  font-family: var(--font_accent);
  font-weight: 300;
  font-size: clamp(3.6rem, 3.44vw, 5rem); /* 50 / 1453 */
  line-height: 7rem; /* 70px */
  text-align: center;
  color: var(--color_main);
  margin-bottom: 0.8rem;
}
.top_kv__title {
  font-size: clamp(2rem, 3.44vw, 5rem); /* 50 / 1453 */
  font-weight: 700;
  line-height: 1.4;
  color: var(--color_main);
  margin-bottom: 1.6rem;
}
.top_kv__title span {
  font-size: clamp(1.6rem, 2.75vw, 4.0rem);
}
.top_kv__sub {
  font-family: var(--font_eng);
  font-weight: 500;
  font-size: clamp(1.8rem, 2.06vw, 3rem); /* 30 / 1453 */
  color: var(--color_main);
}

/* ======================================================
   ABOUT
====================================================== */
.top_about {
  background-image: url(../images/about-bg.webp);
  background-size: cover;
  text-align: center;
  padding: clamp(10rem, 13.76vw, 20.0rem) 0 !important;
}
.top_about__body {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(1.5rem, 1.24vw, 1.8rem); /* 18 / 1453 */
  line-height: 2.2;
  text-align: center;
  color: var(--color_main);
}
.top_about__body span {
  font-size: clamp(1.8rem, 1.56vw, 2.4rem);
}
/* ABOUT / REASON 間 */
.top_about__band {
  background: #fff;
  padding: 0 0 clamp(6rem, 6.88vw, 10rem) 0;
  text-align: right;
}
.top_about__band img {
  margin-left: auto;
}
.top_about__band--text {
  text-align: center;
}
.top_about__band--p {
  font-size: clamp(2rem, 2.06vw, 3rem);
  font-weight: 700;
  line-height: 1.5;
  margin: 2rem auto;
  color: var(--color_main);
}
.top_about__band--btns {
  display: inline-grid;
  gap: 2rem;
  max-width: 50rem;
}

/* ======================================================
   REASON
====================================================== */
.top_reason {
  background: #fff;
}
.top_reason__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 3.2rem;
  column-gap: 3.2rem;
  justify-content: center;
}
.top_reason__item {
  background: #fff;
  border-radius: 1.6rem;
  padding: clamp(3.2rem, 3.30vw, 4.8rem) clamp(2.4rem, 2.20vw, 3.2rem) clamp(3.2rem, 2.75vw, 4rem); /* t:48, h:32, b:40 /1453 */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.top_reason__circle {
  width: 23.2rem; /* 232px */
  height: 23.2rem;
  border-radius: 50%;
  background: #EFF5FB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
  position: relative;
}
.top_reason__circle img {
  width: 14.8rem; /* 148px 横幅の最大値 */
  height: 9.1rem; /*. 91px 縦幅の最大値 */
  object-fit: contain;
}
.top_reason__num {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(6rem, 5.50vw, 8rem); /* 80 / 1453 */
  font-weight: 700;
  color: var(--color_main);
  line-height: 1;
  margin-bottom: 1.6rem;
  position: absolute;
  top: 0;
  left: 0;
}
.top_reason__name {
  font-size: clamp(2rem, 2.06vw, 3rem); /* 30 / 1453 */
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 1.6rem;
  color: var(--color_main);
}
.top_reason__text {
  font-size: clamp(1.5rem, 1.24vw, 1.8rem); /* 18 / 1453 */
  color: var(--color_main);
  line-height: 1.8;
  text-align: left;
}

/* ======================================================
   GALLERY
====================================================== */

.top_gallery {
  background: #fff;
}
.top_gallery__slider {
  padding: 0 clamp(2rem, 2.75vw, 4rem); /* 40/1453 */
  margin-bottom: clamp(3.2rem, 3.30vw, 4.8rem); /* 48/1453 */
}
.top_gallery__item {
  padding: 0 1.2rem;
}
.top_gallery__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.8rem;
  margin-bottom: 1.2rem;
  background: var(--color_light);
}
.top_gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top_gallery__thumb--empty {
  width: 100%;
  height: 100%;
}
.top_gallery__name {
  font-size: clamp(1.5rem, 1.38vw, 2rem); /* 20 / 1453 */
  line-height: 1.6;
  text-align: left;
  color: var(--color_main);
}
.top_gallery__foot {
  text-align: center;
}

/* ======================================================
   NEWS
====================================================== */
.top_news {
  background: var(--color_kv);
}
.top_news__list {
  margin-bottom: clamp(5rem, 6.88vw, 10.0rem); /* 100/1453 */
}
.top_news__item a {
  display: grid;
  grid-template-columns: 9.6rem 1fr 2rem;
  align-items: center;
  gap: 2.4rem;
  padding: clamp(1.6rem, 1.38vw, 2rem) 0; /* 20/1453 */
  border-bottom: 1px solid var(--color_gray);
  transition: var(--transition);
}
.top_news__item:first-child a {
  border-top: 1px solid var(--color_gray);
}
.top_news__item a:hover {
  opacity: 0.6;
}
.top_news__item time {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.6rem;
  color: var(--color_muted);
  white-space: nowrap;
}
.top_news__title {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color_main);
}
.top_news__item .bi-chevron-right {
  color: var(--color_main);
  font-size: 1.6rem;
}
.top_news__foot {
  text-align: center;
}

@media (min-width: 769px) {
  .top_about__band--btns {
    grid-template-columns: 1fr 1fr;
  }
}

/* ======================================================
   中間ブレークポイント（769px - 992px）
====================================================== */
@media (min-width: 769px) and (max-width: 992px) {
  /* REASON：3カラム → 2カラム */
  .top_reason__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ======================================================
   SP
====================================================== */
@media (max-width: 768px) {
  /* KV */
  .top_kv {
    max-height: calc(100vh - var(--header_height));
  }
  .top_kv__catch {
    width: calc(100% - 4rem);
    width: 70%;
    max-width: 40rem;
    /* padding はclampで管理 */
  }
  .top_kv__image {
    background-image: url(../images/kv-main_sp.webp);
  }
  .top_kv__brand {
    line-height: 5rem; /* font-sizeはclamp minで制御 */
  }
  /* ABOUT */
  .top_about__band {
    padding: 4rem 0 6rem;
  }
  .top_about__band-img {
    width: 160vw;
    margin-left: -30vw;
  }
  /* REASON：3カラム → 1カラム */
  .top_reason__list {
    grid-template-columns: 1fr;
    row-gap: 2.4rem;
    column-gap: 2.4rem;
  }
  /* .top_reason__item padding / .top_gallery__slider padding・margin-bottom はclampで管理 */
  /* NEWS：2行レイアウト（日付 / タイトル・矢印は右端で縦中央） */
  .top_news__item a {
    grid-template-columns: 1fr 1.6rem;
    grid-template-rows: auto auto;
    grid-template-areas:
      "date  arrow"
      "title arrow";
    gap: 0.4rem 1.2rem;
    /* padding はclampで管理 */
  }
  .top_news__item time {
    grid-area: date;
    /* font-sizeはclamp minで制御 */
  }
  .top_news__title {
    grid-area: title;
    /* font-sizeはclamp minで制御 */
  }
  .top_news__item .bi-chevron-right {
    grid-area: arrow;
    align-self: center;
  }
  /* .top_news__list margin-bottom はclampで管理 */
}