/* ========================================
   CSS Variables & Design Tokens
   ======================================== */

:root {
  /* Colors */
  --color-main: #071D49;
  --color-white: #FFFFFF;
  --color-sub: #D9D9D9;
  --color-bg: #033524;
  --color-bg-main: #B2442F;
  --color-link: #1979B9;

  --max-width: 1000px;
    
  /* Header Height (for scroll-padding-top) */
  --header-height-pc: 68px;
  --header-height-sp: 58px;
  
  /* Transitions */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
}

/* ========================================
   Base Styles & Reset
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* WCAG 2.4.12: フォーカスが固定ヘッダーに隠れないように */
  scroll-padding-top: var(--header-height-pc);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* WCAG 2.4.1: スキップナビゲーションリンク */
.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: var(--color-main);
  color: var(--color-white);
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

body {
  font-family: 'A1 Gothic M', sans-serif;
  background-color: var(--color-bg);
  font-size: 15px;
  letter-spacing: 0.45px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky Footer: コンテンツが少なくてもフッターを下部に配置 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.35s ease;
}

body.is-page-loading {
  opacity: 0;
  pointer-events: none;
}

body.is-page-ready {
  opacity: 1;
}

/* レスポンシブ画像 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リンクのデフォルトスタイル */
a {
  color: var(--color-link);
  text-decoration: none;
  /* WCAG 2.5.8: 最小タッチターゲットサイズ 24x24px */
  min-width: 24px;
  min-height: 24px;
  display: inline-block;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.5;
}

/* WCAG 2.4.11: フォーカスインジケーター（キーボード操作時のみ） */
a:focus-visible {
  outline: 3px solid var(--color-main);
  outline-offset: 2px;
  /* コントラスト比3:1以上を確保 */
}

/* ========================================
   Layout Components
   ======================================== */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* ========================================
   Header
   ======================================== */
.header {
  background-color: var(--color-white);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translateY(-100%);
  transition: transform var(--transition-normal) ease;
  line-height: 0;
}

.header.is-visible {
  transform: translateY(0);
}

.header.is-hidden {
  transform: translateY(-100%);
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height-pc);
  padding: 28px 40px;
}

.header-logo {
  width: 45px;
}

.header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header-nav {
  display: flex;
  align-items: center;
}

.header-nav::before {
  content: "";
  width: 1px;
  height: 25px;
  background-color: var(--color-sub);
  margin-right: 16px;
}

.header-nav-link img {
  transition: opacity 0.2s;
  /* WCAG 2.5.8: タッチターゲット拡張 */
  padding: 8px 12px;
}

.header-nav-link:hover img {
  opacity: 0.6;
  text-decoration: none;
}

/* ========================================
   Main Content
   ======================================== */
.main {
  width: 100%;
  /* Sticky Footer: mainコンテンツが利用可能なスペースを埋める */
  flex: 1;
}
.bg-red {
  background-color: var(--color-bg-main);
}
/* Content Sections */
#hero {
  position: relative;
  overflow: hidden;
  background: url(../images/hero-bg-pc.webp) no-repeat center center/cover;
  --hero-liam-p-bottom: min(165px, 11.45vw);
  --hero-shadow-drop: max(-100px, -7.5vw);
  --hero-shadow-width: min(240px, 18vw);
  --hero-shadow-height: min(50px, 3.6vw);
  --hero-clip-nudge: 18px;
  --hero-clip-pad: calc((var(--hero-shadow-drop) * -1) - (var(--hero-shadow-height) / 2) + var(--hero-clip-nudge));
}
#hero picture {
  display: block;
  position: relative;
}
#hero .hero-bg {
  width: 100%;
}
#hero .building {
  position: absolute;
  width: min(101px, 7.01vw);
  bottom: min(140px, 9.722vw);
  right: min(254px, 17.638vw);
}

#hero h1 {
  position: absolute;
  width: min(337px, 24vw);
  top: min(110px, 7.5vw);
  left: min(142px, 10vw);
  opacity: 0;
}
#hero .sticker {
  position: absolute;
  width: min(220px, 15.27vw);
  top: min(39px, 2.7vw);
  right: min(65px, 4.6vw);
  opacity: 0;
}
#hero .sticker img {
  filter: drop-shadow(0 5.454px 5.454px rgba(0, 0, 0, 0.25));
}
#hero .hero-liam {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#hero .hero-liam img {
  opacity: 0;
}
#hero .hero-liam p {
  position: absolute;
  width: min(173px, 12vw);
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--hero-liam-p-bottom) - var(--hero-clip-pad));
  overflow: hidden;
  padding-bottom: var(--hero-clip-pad);
}
#hero .hero-liam p:has(.is-floating) {
  overflow: visible;
}
#hero .hero-liam .shadow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
#hero .hero-liam .shadow-back {
  bottom: calc(var(--hero-liam-p-bottom) + var(--hero-shadow-drop));
  width: calc(var(--hero-shadow-width) * 1.06);
  height: calc(var(--hero-shadow-height) * 1.18);
  background-color: #00211B;
  filter: blur(2.8px);
  opacity: 0.95;
}
#hero .hero-liam .shadow-front {
  bottom: calc(var(--hero-liam-p-bottom) + var(--hero-shadow-drop) + (var(--hero-shadow-height) * 0.04));
  width: calc(var(--hero-shadow-width) * .9);
  height: calc(var(--hero-shadow-height) * 0.6);
  background-color: #00211B;
  filter: blur(0.6px);
  /* opacity: 0.92; */
}

/* ========================================
   #hero Animations
   ======================================== */

/* Liam が影から浮かび上がる */
@keyframes liam-emerge {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0.02);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Liam がふわふわ上下に浮かぶ */
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* 影が Liam の浮遊に合わせて伸縮する (translateX(-50%) を保持) */
@keyframes shadow-rock {
  0%, 100% {
    transform: translateX(-50%) scaleX(1) scaleY(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-50%) scaleX(0.92) scaleY(0.8);
    opacity: 0.6;
  }
}

/* h1 がじんわりフェードイン */
@keyframes h1-fadein {
  from {
    opacity: 0;
    filter: blur(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ステッカーがペタっと貼られる + マスク展開効果 */
@keyframes sticker-snap {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  55% {
    opacity: 1;
    clip-path: inset(0 8% 0 0);
  }
  78% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* Liam 浮上アニメーション */
#hero .hero-liam img.is-emerging {
  animation: liam-emerge 6s ease-in-out forwards;
}

/* Liam ふわふわ浮遊 */
#hero .hero-liam img.is-floating {
  opacity: 1;
  animation: float-bob 2.5s ease-in-out infinite;
}

/* 影の伸縮 */
#hero .hero-liam.is-shadow-floating .shadow-back {
  animation: shadow-rock 2.5s ease-in-out infinite;
}
#hero .hero-liam.is-shadow-floating .shadow-front {
  opacity: 0;
}

/* h1 フェードイン */
#hero h1.is-visible {
  animation: h1-fadein .8s ease-out forwards;
}

/* ステッカー スナップ */
#hero .sticker.is-visible {
  will-change: clip-path, transform, opacity;
  backface-visibility: hidden;
  animation: sticker-snap 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.yodogawa {
  max-width: var(--max-width);
  width: calc(100% - 48px);
  margin: 0 auto;
  color: var(--color-white);
  padding: 80px 0;
  position: relative;
  border-bottom: 1px dashed;
}
.yodogawa p {
  max-width: 440px;
  margin: 0 auto;
}
.yodogawa p + p {
  margin-top: 48px;
}
.yodogawa  p.jp {
  letter-spacing: 0;
}
.yodogawa .yodogawa-liam {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 240px;
  opacity: 0;
  transform: translateX(120px) rotate(280deg);
  transform-origin: 50% 85%;
}
.prof {
  max-width: 760px;
  width: calc(100% - 32px);
  margin: 80px auto;
  background-color: #FAFFC7;
  border-radius: 20px;
}
.prof > div {
  padding: 40px;
  display: flex;
  gap: 40px;
}
.prof .img {
  display: grid;
  place-items: center;
  align-content: start;
  gap: 30px;
}
.prof .img h3 {
  line-height: 0;
}
.prof .text p {
  width: 430px;
  padding: 0 12px;
}
.prof .text p + p {
  border-top: 1px dashed #B2442F;
  margin-top: 24px;
  padding-top: 24px;
}
.toLiam {
  display: grid;
  place-items: center;
}
.video {
  max-width: var(--max-width);
  background-color: var(--color-white);
  margin: 120px auto;
  padding: 80px 0 64px;
  position: relative;
}
.video .video-liam-top {
  width: 168px;
  height: 423px;
  position: absolute;
  top: -320px;
  left: 30px;
  opacity: 0;
  transform: translateY(90px) scale(0.4);
  transform-origin: 50% 100%;
}
.video h2 {
  display: grid;
  place-items: center;
  padding-bottom: 32px;
}
.video .video-liam-bottom {
  max-width: 268px;
  margin: 56px auto;
}
.video .main-video {
  max-width: 400px;
  width: 85.333vw;
  margin: 0 auto;
}
.youtube_embed_container {
  text-align: center;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.youtube_embed_container .youtube_embed_iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.video h3 {
  display: grid;
  place-items: center;
  padding-bottom: 32px;
}
.rest-videos {
  padding: 0 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  line-height: 1;
}

.rest-videos.is-few {
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  justify-content: center;
}
.rest-videos img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* ========================================
   Footer
   ======================================== */
.footer {
  background-color: #666666;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
  color: var(--color-white);
  font-size: 12px;
  letter-spacing: -0.12px;
  line-height: 1.44;
}

.footer-nav {
  display: flex;
  gap: 38px;
}

.footer-link {
  color: var(--color-white);
  /* WCAG 2.5.8: タッチターゲット */
  padding: 8px 12px;
}

/* ========================================
   Responsive - Tablet & Mobile
   ======================================== */
@media (max-width: 1024px) {
  #hero .hero-liam .shadow-front {
    width: calc(var(--hero-shadow-width) * 1);
    height: calc(var(--hero-shadow-height) * 0.9);
    bottom: calc(var(--hero-liam-p-bottom) + var(--hero-shadow-drop) + (var(--hero-shadow-height) * -0.15));
  }
}
@media (max-width: 768px) {
  #hero {
    background: url(../images/hero-bg-sp.webp) no-repeat center center/cover;
    --hero-liam-p-bottom: 44vw;
    --hero-shadow-drop: -16vw;
    --hero-shadow-width: 38.4vw;
    --hero-shadow-height: 6.5vw;
    --hero-clip-nudge: 2.6vw;
  }

  html {
    scroll-padding-top: var(--header-height-sp);
  }
  
  .header-inner {
    height: var(--header-height-sp);
    padding: 16px 12px;
  }
  
  .header-logo {
    width: 24px;
  }

  .header-title {
    width: 128px;
  }
  .header-nav-link img {
    padding: 4px 8px;
  }
  .header-nav::before {
    margin-right: 8px;
  }
  /* Sections */
  #hero .building {
    width: 12.8vw;
    bottom: 41vw;
    right: 11.466vw;
  }
  #hero h1 {
    width: 47.733vw;
    top: 14.13vw;
    left: 6.4vw;
  }
  #hero .sticker {
    width: 34vw;
    top: 6vw;
    right: 2.8vw;
  }
  #hero .hero-liam p {
    width: 27.2vw;
    bottom: calc(var(--hero-liam-p-bottom) - var(--hero-clip-pad));
  }
  #hero .hero-liam .shadow-back {
    width: calc(var(--hero-shadow-width) * 1.06);
    height: calc(var(--hero-shadow-height) * 1.18);
    bottom: calc(var(--hero-liam-p-bottom) + var(--hero-shadow-drop));
  }
  #hero .hero-liam .shadow-front {
    width: calc(var(--hero-shadow-width) * 1);
    height: calc(var(--hero-shadow-height) * .8);
    bottom: calc(var(--hero-liam-p-bottom) + var(--hero-shadow-drop));
  }
  .yodogawa {
    padding: 40px 0 24px;
  }
  .yodogawa .yodogawa-liam {
    position: relative;
    width: min(42.66vw, 160px);
    margin-top: 40px;
    right: initial;
    bottom: initial;
  }
  .prof {
    margin: 48px auto 32px;
  }
  .prof > div {
    flex-direction: column;
    gap: 24px;
    padding: 32px 12px;
  }
  .prof .img p {
    width: 148px;
  }
  .prof .text p {
    width: 100%;
    padding: 0 20px;
  }
  .toLiam a {
    width: 320px;
  }
  .video {
    margin: 168px auto 80px;
    padding: 40px 0;
  }
  .video .video-liam-top {
    width: 72px;
    top: -152px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .video .video-liam-bottom {
    max-width: 200px;
    margin: 32px auto;
  }
  .rest-videos {
    padding: 0 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
    
  /* Footer - Mobile */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 16px;
    gap: 24px;
  }

  .footer-link {
    padding: 6px 0;
  }

  .footer-nav {
    flex-direction: column;
    gap: 0;
  }

  .footer-nav a:first-of-type {
    margin-bottom: 8px;
  }
}
br.spOnly {
  display: none;
}
@media (max-width: 640px) {
  br:not(.sp) {
    display: none;
  }
  br.spOnly {
    display: block;
  }
}

/* ========================================
   Scroll-in Animations
   ======================================== */

/* yodogawa の Liam が右から転がって登場 */
@keyframes yodogawa-roll-in {
  0% {
    opacity: 0;
    transform: translateX(120px) rotate(280deg);
  }
  70% {
    opacity: 1;
    transform: translateX(-8px) rotate(-8deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

/* video の Liam が下からにゅっと出現 */
@keyframes video-liam-grow-up {
  0% {
    opacity: 0;
    transform: translateY(90px) scale(0.2);
  }
  65% {
    opacity: 1;
    transform: translateY(-8px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* yodogawa の Liam 登場 */
.yodogawa .yodogawa-liam.is-visible {
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: yodogawa-roll-in 1s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

/* video 上部 Liam 登場 */
.video .video-liam-top.is-visible {
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: video-liam-grow-up 0.65s cubic-bezier(0.18, 0.88, 0.3, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .yodogawa .yodogawa-liam,
  .video .video-liam-top {
    opacity: 1;
    transform: none;
  }

  .yodogawa .yodogawa-liam.is-visible,
  .video .video-liam-top.is-visible {
    animation: none;
  }
}

/* ========================================
   Fade-in on scroll
   ======================================== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}