/* Hero Section */
.hero-pin {
    height: 200vh;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    color: var(--color-white);
    z-index: 1;
    will-change: transform;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-image: url("../assets/images/jpg/bg-hero-black8.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    /* opacity: 0.3; */
}

.hero > *:not(.hero__bg) {
    position: relative;
    z-index: 1;
}

.hero__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.hero__title { font-size: 4rem; margin-bottom: var(--spacing-sm); line-height: 1; font-weight: bold; }
.hero__title-line { display: block; opacity: 0; transform: translateY(50px); white-space: nowrap; }
.hero__subtitle { font-family: var(--font-english); font-size: 1.5rem; color: var(--color-accent); margin-bottom: var(--spacing-md); letter-spacing: 0.1em; opacity: 0; }
.hero__description { margin-bottom: var(--spacing-lg); opacity: 0; }
.hero__description p { font-size: 1.1rem; color: var(--color-gray); line-height: 1.8; }
.hero__cta { display: flex; gap: var(--spacing-md); opacity: 0; }

.hero__visual { position: relative; height: 500px; display: flex; align-items: center; justify-content: center; }

.hero__visual picture {
	display: block;
	width: 100%;
	height: 100%;
}

.hero__kanji-logo { width: auto; height: 400px; max-width: 100%; object-fit: contain; opacity: 0.8; filter: drop-shadow(0 0 20px rgba(0,0,0,0.3)); transition: transform 0.1s ease-out, opacity 0.1s ease-out; transform: scale(1); transform-origin: center center; will-change: transform, opacity; }
.hero__kanji-logo--scrolling { animation: none; transition: transform 0.1s ease-out, opacity 0.1s ease-out, filter 0.1s ease-out; filter: drop-shadow(0 0 30px rgba(246,191,0,0.4)) drop-shadow(0 0 60px rgba(0,0,0,0.5)); }

.hero__scroll-indicator { position: absolute; bottom: var(--spacing-lg); left: 50%; transform: translateX(-50%); }
.scroll-indicator { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); color: var(--color-gray); font-family: var(--font-english) !important; font-size: 0.8rem; letter-spacing: 0.2em; }
.scroll-indicator__line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--color-gray), transparent); }

@keyframes float { 0%,100%{ transform: translateY(0px) scale(1);} 50%{ transform: translateY(-10px) scale(1.02);} }

/* Hero Liquid CTA size (moved from inline style) */
.hero__content .hero__liquid-cta {
  /* コンポーネント側のCSS変数を上書きしてサイズ指定 */
  --lg-min-width: 200px;
  --lg-min-height: 48px;
  margin-right: 16px;
}

@media (max-width: 1024px) {
  .hero__container { grid-template-columns: 1fr; gap: var(--spacing-lg); text-align: center; }
}
@media (max-width: 768px) {
  .hero-pin { height: 200vh; }
  .hero__title { font-size: 2.5rem; }
  .hero__cta { flex-direction: column; align-items: center; }
  .hero__kanji-logo { height: 300px; }
}
@media (max-width: 480px) {
  .hero__title { font-size: 2rem; }
  .hero__kanji-logo { height: 250px; }
}