/**
 * フォント設定
 * テキストの言語を自動判別してフォントを適用
 */

/* ===================================
 * 自動言語判別フォント
 * 英語部分→英語フォント、日本語部分→日本語フォント
 * =================================== */

/* タイトル・見出し用フォント */
/* 英語: The Seasons、日本語: ヒラギノ明朝 */
.font-title {
  font-family: 'the-seasons', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Noto Serif JP', serif;
}

/* 日本語ページでfont-titleのフォントサイズを1段階小さくする（既存のTailwindクラス指定に対して） */
/* text-xl → text-lg, text-2xl → text-xl, text-3xl → text-2xl, など */
.lang-ja .font-title.text-xl {
  font-size: 1.125rem !important; /* text-lg */
}
.lang-ja .font-title.text-2xl {
  font-size: 1.25rem !important; /* text-xl */
}
.lang-ja .font-title.text-3xl {
  font-size: 1.5rem !important; /* text-2xl */
}
.lang-ja .font-title.text-4xl {
  font-size: 1.875rem !important; /* text-3xl */
}
.lang-ja .font-title.text-5xl {
  font-size: 2.25rem !important; /* text-4xl */
}
.lang-ja .font-title.text-6xl {
  font-size: 3rem !important; /* text-5xl */
}
.lang-ja .font-title.text-7xl {
  font-size: 3.75rem !important; /* text-6xl */
}
.lang-ja .font-title.text-8xl {
  font-size: 4.5rem !important; /* text-7xl */
}

/* レスポンシブ対応（md:, lg:, xl:などのブレークポイントにも対応） */
@media (min-width: 768px) {
  .lang-ja .font-title.md\:text-xl {
    font-size: 1.125rem !important;
  }
  .lang-ja .font-title.md\:text-2xl {
    font-size: 1.25rem !important;
  }
  .lang-ja .font-title.md\:text-3xl {
    font-size: 1.5rem !important;
  }
  .lang-ja .font-title.md\:text-4xl {
    font-size: 1.875rem !important;
  }
  .lang-ja .font-title.md\:text-5xl {
    font-size: 2.25rem !important;
  }
  .lang-ja .font-title.md\:text-6xl {
    font-size: 3rem !important;
  }
  .lang-ja .font-title.md\:text-7xl {
    font-size: 3.75rem !important;
  }
  .lang-ja .font-title.md\:text-8xl {
    font-size: 4.5rem !important;
  }
}

@media (min-width: 1024px) {
  .lang-ja .font-title.lg\:text-xl {
    font-size: 1.125rem !important;
  }
  .lang-ja .font-title.lg\:text-2xl {
    font-size: 1.25rem !important;
  }
  .lang-ja .font-title.lg\:text-3xl {
    font-size: 1.5rem !important;
  }
  .lang-ja .font-title.lg\:text-4xl {
    font-size: 1.875rem !important;
  }
  .lang-ja .font-title.lg\:text-5xl {
    font-size: 2.25rem !important;
  }
  .lang-ja .font-title.lg\:text-6xl {
    font-size: 3rem !important;
  }
  .lang-ja .font-title.lg\:text-7xl {
    font-size: 3.75rem !important;
  }
  .lang-ja .font-title.lg\:text-8xl {
    font-size: 4.5rem !important;
  }
}

@media (min-width: 1280px) {
  .lang-ja .font-title.xl\:text-xl {
    font-size: 1.125rem !important;
  }
  .lang-ja .font-title.xl\:text-2xl {
    font-size: 1.25rem !important;
  }
  .lang-ja .font-title.xl\:text-3xl {
    font-size: 1.5rem !important;
  }
  .lang-ja .font-title.xl\:text-4xl {
    font-size: 1.875rem !important;
  }
  .lang-ja .font-title.xl\:text-5xl {
    font-size: 2.25rem !important;
  }
  .lang-ja .font-title.xl\:text-6xl {
    font-size: 3rem !important;
  }
  .lang-ja .font-title.xl\:text-7xl {
    font-size: 3.75rem !important;
  }
  .lang-ja .font-title.xl\:text-8xl {
    font-size: 4.5rem !important;
  }
}

/* 本文用フォント */
/* 英語: Lato、日本語: ヒラギノ明朝 */
.font-body {
  font-family: 'Lato', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Noto Serif JP', serif;
}

/* ===================================
 * 英語専用フォントクラス（言語に関係なく常に英語フォント）
 * 日本語ページ内でも英語部分に使用可能
 * =================================== */

/* 英語タイトル専用（常にThe Seasons） */
.font-title-en {
  font-family: 'the-seasons', sans-serif !important;
}

/* 英語本文専用（常にLato） */
.font-body-en {
  font-family: 'Lato', sans-serif !important;
}

/* ファーストビューテキスト（背景ぼかし効果） */
.fv-text {
  -webkit-mask-image: url('../images/fv-text-2.svg');
  mask-image: url('../images/fv-text-2.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-backdrop-filter: blur(5rem);
  backdrop-filter: blur(5rem);
  background-color: rgba(255, 255, 255, 0.20);
  filter: brightness(1.5); /* 150%の明るさ */
  -webkit-filter: brightness(1.5); /* Safari対応 */
  width: auto;
  width: 929px;
}
@media (max-width: 1025px) {
  .fv-text{
    width: 100%;
    -webkit-mask-position: left center;
    mask-position: left center;
  }
}

.text-link:hover{
  padding-right: 1rem;
  opacity: 0.75;
  transition: padding-right 0.3s ease, opacity 0.3s ease;
  
}

.text-link:after{
  content: '';
  background-image: url('../images/link-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 7px;
  margin-left: 4px;
  bottom: -7px;
  right: 0;
  position: absolute;
}