@charset "UTF-8";
/*
 * top-custom.css（TOPページ固有）
 * .kv-mv / __overlay / __catch / __lead / __lead-en / __illust  - MV（高さ700px・下端を稜線でマスク）
 * .kv-ridge--mv                                                  - MV下端の稜線SVG
 * .kv-about / __text / __photos / __photo--1〜3                  - ABOUT（440px+760px・写真3枚の重ね）
 * .kv-guide / __list / __item / --reverse / __photo / __body / __label / __num / __label-text / __title / __text / __illust - GUIDE
 * .kv-movie / __inner / __frame                                  - MOVIE（空色背景＋雲）
 * .kv-news / __list                                              - NEWS（blog-list ベース）
 * .kv-loader / __inner / __logo / __dots                         - オープニング演出（ロゴ＋3色ドット→フェードアウト）
 */

/* ==========================================================================
   MV
   ========================================================================== */
.kv-mv {
  --kv-mv-ridge: 240px;
  position: relative;
  height: 700px;
  overflow: hidden;
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H1440V254C1300%20252%201180%20256%201040%20266C900%20276%20780%20284%20680%20274C560%20262%20460%20234%20330%20228C220%20224%20100%20230%200%20244Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E') bottom / 100% var(--kv-mv-ridge) no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - var(--kv-mv-ridge) + 1px) no-repeat;
  mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H1440V254C1300%20252%201180%20256%201040%20266C900%20276%20780%20284%20680%20274C560%20262%20460%20234%20330%20228C220%20224%20100%20230%200%20244Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E') bottom / 100% var(--kv-mv-ridge) no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - var(--kv-mv-ridge) + 1px) no-repeat;
}
#slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
}
#slideshow .swiper-slide,
#slideshow .main_slider__inner {
  height: 100%;
}
#slideshow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.kv-mv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
}
.kv-mv__catch {
  position: absolute;
  left: 60px;
  top: 200px;
  color: #fff;
  font-size: 5.6rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.kv-mv__lead {
  position: absolute;
  left: 60px;
  bottom: 140px;
  max-width: 460px;
  background: rgba(250, 248, 244, 0.94);
  border-radius: 20px;
  padding: 24px 30px;
  font-size: 1.5rem;
  line-height: 2;
}
.kv-mv__lead-en {
  display: block;
  margin-bottom: 6px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #c49933;
}
.kv-ridge--mv {
  bottom: -1px;
  height: 240px;
}
.kv-mv__illust {
  right: 140px;
  bottom: -6px;
  width: 220px;
  z-index: 1;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.kv-about {
  padding-top: 100px;
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: 440px 760px;
  gap: 40px;
  align-items: center;
  justify-content: center;
}
.kv-about__text {
  gap: 28px;
  font-size: 1.7rem;
  line-height: 2.4;
}
.kv-about__photos {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 480;
}
.kv-about__photo {
  position: absolute;
  max-width: none;
  border-radius: 12px;
  border: 5px solid #faf8f4;
  object-fit: cover;
}
.kv-about__photo--1 {
  left: calc(100% * 220 / 760);
  top: 0;
  width: calc(100% * 340 / 760);
  height: calc(100% * 400 / 480);
  z-index: 1;
}
.kv-about__photo--2 {
  left: calc(100% * 490 / 760);
  top: calc(100% * 270 / 480);
  width: calc(100% * 270 / 760);
  height: calc(100% * 190 / 480);
  z-index: 2;
}
.kv-about__photo--3 {
  left: 0;
  top: calc(100% * 200 / 480);
  width: calc(100% * 260 / 760);
  height: calc(100% * 270 / 480);
  z-index: 2;
}

/* ==========================================================================
   GUIDE
   ========================================================================== */
.kv-guide {
  position: relative;
  padding: 110px 0 120px;
}
.kv-guide__list {
  margin-top: 72px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.kv-guide__item {
  display: grid;
  grid-template-columns: 600px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.kv-guide__item--reverse {
  grid-template-columns: minmax(0, 1fr) 600px;
}
.kv-guide__photo {
  height: 380px;
}
.kv-guide__body {
  position: relative;
}
.kv-guide__label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 36px;
}
.kv-guide__num {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 7.2rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.kv-guide__label-text {
  position: relative;
  z-index: 1;
  font-weight: 800;
  color: #168352;
}
.kv-guide__title {
  margin: 10px 0 16px;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.kv-guide__text {
  text-wrap: pretty;
}
.kv-guide__illust {
  right: 0;
  top: -60px;
  width: 150px;
}

/* ==========================================================================
   MOVIE
   ========================================================================== */
.kv-movie {
  padding: 110px 0;
}
.kv-movie__inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.kv-movie__frame {
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  background: #453c35;
}

/* ==========================================================================
   NEWS（blog-list ベース）
   ========================================================================== */
.kv-news {
  padding-top: 110px;
  padding-bottom: 110px;
  display: grid;
  grid-template-columns: 240px minmax(0, 900px);
  gap: 40px;
  justify-content: center;
}
.kv-news__list {
  border-top: 1px solid #e3dccb;
}
.kv-news__list .blog-list__item {
  border-bottom: 1px solid #e3dccb;
}
.kv-news__list .blog-list__link {
  align-items: stretch;
  gap: 40px;
  padding: 26px 8px;
  color: inherit;
}
.kv-news__list .blog-list__link:hover {
  background: transparent;
}
.kv-news__list .blog-list__link:hover .blog-list__title {
  color: inherit;
}
  .kv-news__list .blog-list__date {
  min-width: 110px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9;
  color: #69452b;
}
.kv-news__list .blog-list__title {
  flex: 0 1 auto;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.9;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1479px) {
  .kv-mv__illust {
    right: 5%;
  }
  .kv-about {
    grid-template-columns: minmax(0, 440px) minmax(0, 760px);
  }
  .kv-guide__item {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  }
  .kv-guide__item--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  }
}
@media (max-width: 896px) {
  .kv-mv {
    --kv-mv-ridge: 110px;
    height: 560px;
  }
  #slideshow {
    height: 560px;
  }
  .kv-mv__catch {
    left: 5%;
    top: 90px;
    font-size: 3rem;
  }
  .kv-mv__lead {
    left: 5%;
    right: 5%;
    bottom: 100px;
    max-width: none;
    padding: 18px 20px;
    font-size: 1.3rem;
  }
  .kv-ridge--mv {
    height: 110px;
  }
  .kv-mv__illust {
    width: 110px;
  }
  .kv-about {
    padding-top: 60px;
    padding-bottom: 60px;
    grid-template-columns: 1fr;
  }
  .kv-about__text {
    font-size: 1.5rem;
    line-height: 2.1;
  }
  .kv-guide {
    padding: 60px 0;
  }
  .kv-guide__list {
    margin-top: 40px;
    gap: 48px;
  }
  .kv-guide__item,
  .kv-guide__item--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .kv-guide__item--reverse .kv-guide__photo {
    order: -1;
  }
  .kv-guide__photo {
    height: 240px;
  }
  .kv-guide__title {
    font-size: 2rem;
  }
  .kv-guide__illust {
    width: 110px;
  }
  .kv-movie {
    padding: 60px 5%;
  }
  .kv-news {
    padding-top: 60px;
    padding-bottom: 60px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .kv-news__list .blog-list__link {
    flex-direction: column;
    gap: 4px;
    padding: 18px 4px;
  }
}
@media (max-width: 639px) {
  .kv-mv__catch {
    font-size: 2.8rem;
  }
  .kv-about .heading--left,
  .kv-about__text {
    text-align: center;
  }
  .kv-guide__num {
    font-size: 6rem;
  }
  .kv-guide__label {
    padding-top: 30px;
  }
  .kv-guide__title {
    font-size: 1.9rem;
  }
  .kv-news__list .blog-list__date {
    font-size: 1.4rem;
  }
  .kv-news__list .blog-list__title {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   オープニング演出（ローダー）
   0〜0.9s ロゴ浮かび上がり → 0.5〜2.2s ドットが弾む → 2.2〜2.9s 全体フェードアウト
   ========================================================================== */
.kv-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8f4;
  animation: kvLoaderOut 0.7s ease 2.2s forwards;
}
.kv-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.kv-loader__logo {
  display: block;
  width: auto;
  height: 180px;
  opacity: 0;
  animation: kvLoaderLogo 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.kv-loader__dots {
  display: flex;
  gap: 10px;
  opacity: 0;
  animation: kvLoaderFadeIn 0.4s ease 0.5s forwards;
}
.kv-loader__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #52bf4d;
  animation: kvLoaderDot 0.9s ease-in-out 0.5s infinite;
}
.kv-loader__dots span:nth-child(2) {
  background: #79cbd2;
  animation-delay: 0.65s;
}
.kv-loader__dots span:nth-child(3) {
  background: #c49933;
  animation-delay: 0.8s;
}
@keyframes kvLoaderLogo {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kvLoaderFadeIn {
  to { opacity: 1; }
}
@keyframes kvLoaderDot {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-10px); }
}
@keyframes kvLoaderOut {
  to { opacity: 0; visibility: hidden; }
}
@media (max-width: 639px) {
  .kv-loader__logo {
    height: 120px;
  }
  .kv-loader__inner {
    gap: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kv-loader {
    display: none;
  }
}