@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap&family=Oswald&display=swap");
/* ============================================================
   index.scss
============================================================ */
/* ============================================================
  MV / Hero
  - ヘッダー高さを引いた全画面
  - Title/Sub は全言語共通サイズ（SPは現状より少し大きめ）
  - Sub/Title はSPで2行にしない（nowrap）
  - Catch は言語別に最適化（JPそのまま / ZHは1行 / EN+KOは2行）
============================================================ */
.hero--mv {
  margin-top: 0;
  position: relative;
  overflow: hidden;
  /* 高さ制御 */
}
.hero--mv .hero__slider,
.hero--mv .hero__slide,
.hero--mv .hero__media,
.hero--mv .hero__img {
  width: 100%;
  height: calc(100vh - 6.2rem);
}
@media (min-width: 768px) {
  .hero--mv .hero__slider,
  .hero--mv .hero__slide,
  .hero--mv .hero__media,
  .hero--mv .hero__img {
    height: calc(100vh - 7.2rem);
  }
}
.hero--mv {
  /* 背景画像（やや明るめ） */
}
.hero--mv .hero__img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: brightness(1.05) saturate(1.03);
          filter: brightness(1.05) saturate(1.03);
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-transition: -webkit-transform 6s ease, -webkit-filter 0.6s ease;
  transition: -webkit-transform 6s ease, -webkit-filter 0.6s ease;
  transition: transform 6s ease, filter 0.6s ease;
  transition: transform 6s ease, filter 0.6s ease, -webkit-transform 6s ease, -webkit-filter 0.6s ease;
}
.hero--mv .slick-active .hero__img {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.hero--mv {
  /* オーバーレイ（軽め） */
}
.hero--mv .hero__overlay {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.35)), color-stop(45%, rgba(0, 0, 0, 0.18)), to(rgba(0, 0, 0, 0.3)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.3) 100%);
}
.hero--mv .hero__overlay-inner {
  width: min(92vw, 1040px);
  padding: 0 1rem;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.9s ease;
  transition: opacity 0.9s ease;
}
.hero--mv .slick-active .hero__overlay-inner {
  opacity: 1;
}
.hero--mv {
  /* ============================================================
     Catch / Sub / Title（ベース）
     - Title/Sub：全言語共通（SPは少し大きめ）
     - SPで Sub/Title は2行にしない（nowrap）
     - Catch：言語別は下の外側セレクタで制御
  ============================================================ */
  /* キャッチ */
}
.hero--mv .hero__catch {
  margin: 0 0 1.8rem 0; /* ← Catch と Sub+Title の間を少し開ける */
  font-family: var(--mincho);
  font-size: clamp(2.6rem, 7.6vw, 4.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.3);
}
.hero--mv {
  /* サブ（タイトルより少し小さく・SPで1行固定） */
}
.hero--mv .hero__sub {
  margin: 0 0 1.2rem 0;
  font-family: var(--mincho);
  font-size: clamp(1.5rem, 4.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  word-break: keep-all;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.hero--mv {
  /* タイトル（全言語共通・SPで少し大きめ・1行固定） */
}
.hero--mv .hero__title {
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(1.7rem, 5.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.96);
  white-space: nowrap;
  word-break: keep-all;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
}
@media (min-width: 768px) {
  .hero--mv .hero__sub {
    font-size: clamp(1.5rem, 2vw, 2rem);
    letter-spacing: 0.08em;
  }
  .hero--mv .hero__title {
    font-size: clamp(2rem, 2.6vw, 3rem);
    letter-spacing: 0.08em;
  }
}
.hero--mv .hero__overlay-inner::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 2.2rem auto 0;
  background-color: rgba(255, 255, 255, 0.75);
}

html[lang=ja] .hero--mv .hero__catch,
body.locale-ja_JP .hero--mv .hero__catch {
  font-size: clamp(2.9rem, 8.6vw, 5.2rem);
  letter-spacing: 0.14em;
}

html[lang=en] .hero--mv .hero__catch,
html[lang=en-US] .hero--mv .hero__catch,
body.locale-en_US .hero--mv .hero__catch {
  margin-bottom: 1.4rem;
  font-size: clamp(1.9rem, 6vw, 3.6rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  max-width: 22ch;
  margin-right: auto;
  margin-left: auto;
}

html[lang=zh-Hans] .hero--mv .hero__catch,
body.locale-zh_CN .hero--mv .hero__catch {
  margin-bottom: 1.4rem;
  font-size: clamp(2rem, 6.2vw, 3.9rem);
  letter-spacing: 0.01em;
  line-height: 1.12;
  white-space: nowrap;
  word-break: keep-all;
}

html[lang=zh-TW] .hero--mv .hero__catch,
body.locale-zh_TW .hero--mv .hero__catch {
  margin-bottom: 1.4rem;
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  letter-spacing: 0.02em;
  line-height: 1.12;
  white-space: nowrap;
  word-break: keep-all;
}

/* KO（2行狙い） */
html[lang=ko-KR] .hero--mv .hero__catch,
body.locale-ko_KR .hero--mv .hero__catch {
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 6.2vw, 3.9rem);
  letter-spacing: 0.05em;
  line-height: 1.14;
  max-width: 20ch;
  margin-right: auto;
  margin-left: auto;
}

/* 追加：英語は長いので spacing を少し弱めて事故防止（サイズは共通のまま） */
html[lang=en] .hero--mv .hero__title,
html[lang=en-US] .hero--mv .hero__title,
body.locale-en_US .hero--mv .hero__title {
  letter-spacing: 0.03em;
}

html[lang=en] .hero--mv .hero__sub,
html[lang=en-US] .hero--mv .hero__sub,
body.locale-en_US .hero--mv .hero__sub {
  letter-spacing: 0.04em;
}

/* ============================================================
  Slick
============================================================ */
.hero--mv .slick-list,
.hero--mv .slick-track,
.hero--mv .slick-slide {
  background-color: transparent !important;
}

.hero--mv .slick-slide {
  opacity: 0;
}

.hero--mv .slick-active {
  opacity: 1;
}

.hero--mv .slick-prev,
.hero--mv .slick-next {
  display: none !important;
}

.hero--mv .slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero--mv .slick-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  font-size: 0;
}

.hero--mv .slick-dots .slick-active button {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.hero--mv .slick-dotted.slick-slider {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .hero--mv .slick-dots {
    bottom: 2.4rem;
  }
  .hero--mv .slick-dots button {
    width: 10px;
    height: 10px;
  }
}
/* ============================================================
  Top Banner
============================================================ */
.top-banner {
  margin-top: 0;
  width: 100%;
}
.top-banner__slider {
  width: 100%;
}
.top-banner__slide {
  padding: 0;
}
.top-banner__link {
  display: block;
  width: 100%;
}
.top-banner__link picture {
  display: block;
  width: 100%;
  aspect-ratio: 1370/666;
  overflow: hidden;
}
.top-banner__link img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.top-banner .slick-prev,
.top-banner .slick-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(3, 18, 30, 0.92);
  backdrop-filter: blur(4px);
  cursor: pointer;
  z-index: 20;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.2s ease, transform 0.2s ease;
  transition: background-color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
.top-banner .slick-prev:hover,
.top-banner .slick-next:hover {
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-transform: translateY(-50%) scale(1.05);
          transform: translateY(-50%) scale(1.05);
}
.top-banner .slick-prev {
  left: 20px;
}
.top-banner .slick-next {
  right: 20px;
}
.top-banner .slick-prev::before,
.top-banner .slick-next::before {
  content: "";
  width: 14px;
  height: 14px;
  border-top: 3px solid #FFFFFF;
  border-right: 3px solid #FFFFFF;
  display: block;
}
.top-banner .slick-prev::before {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.top-banner .slick-next::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/* ============================================================
  Top Information
============================================================ */
.top-information {
  margin-top: 3.6rem;
  padding: 3.6rem 0;
  background-color: #F7FBFF;
}
.top-information__title {
  margin: 0 0 2rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #0066A6;
  font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
  font-weight: 700;
  color: #1B2730;
}
.top-information__item {
  padding: 1.2rem 0;
  border-bottom: 1px solid #D3DEE7;
}
.top-information__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.6rem;
  text-decoration: none;
  color: #24313A;
}
.top-information__date {
  min-width: 90px;
  font-weight: 700;
}

/* ============================================================
  Top Blog
============================================================ */
.top-blog {
  margin-top: 3.6rem;
  padding: 3.6rem 0;
  background-color: #F7FBFF;
}
.top-blog__header {
  margin: 0 0 2.4rem;
}
.top-blog__title {
  margin: 0;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #0066A6;
  font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
  color: #1B2730;
}
.top-blog__list {
  display: -ms-grid;
  display: grid;
  gap: 2.4rem;
}
.top-blog__card {
  border: 1px solid #D3DEE7;
  background-color: #FFFFFF;
}
.top-blog__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.top-blog {
  /* 画像 */
}
.top-blog__thumb {
  aspect-ratio: 3/2;
  overflow: hidden;
  border-bottom: 1px solid #D3DEE7;
}
.top-blog__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.top-blog {
  /* 本文 */
}
.top-blog__content {
  padding: 1.6rem;
}
.top-blog__date {
  display: block;
  margin-bottom: 0.6rem;
  font-size: clamp(1.2rem, 1.126rem + 0.23vw, 1.4rem);
  color: rgba(36, 49, 58, 0.6);
}
.top-blog__name {
  margin: 0;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  font-weight: 700;
  line-height: 1.7;
  color: #24313A;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.top-blog {
  /* ホバー */
}
.top-blog__card:hover .top-blog__name {
  color: #0066A6;
}
.top-blog__thumb {
  position: relative;
}
.top-blog__badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 2.4rem;
  padding: 0 0.9rem;
  background-color: #0066A6;
  color: #FFFFFF;
  font-size: clamp(1rem, 0.926rem + 0.23vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.top-blog__more {
  margin-top: 2.4rem;
  text-align: center;
}
.top-blog__more-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 4.4rem;
  padding: 0 2.4rem;
  border: 1px solid #0066A6;
  background-color: #FFFFFF;
  color: #0066A6;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.2s ease;
}
.top-blog__more-btn:hover {
  background-color: #0066A6;
  color: #FFFFFF;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  opacity: 1;
}
.top-blog__more-btn:focus-visible {
  outline: 0;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 102, 166, 0.22);
          box-shadow: 0 0 0 3px rgba(0, 102, 166, 0.22);
}
@media (min-width: 768px) {
  .top-blog__list {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
  .top-blog__name {
    font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
  }
}