@charset "UTF-8";

/* =================================
   RESET
================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: calc(100vw * 10 / 1400);
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(100vw * 10 / 750);
  }
}

body {
  margin: 0;
  color: #fff;
  font-family:
    "Noto Sans JP",
    sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  min-height: 100%;
  background-image: url("./img/bg.jpg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media screen and (max-width: 767px) {
  body {
    position: relative;
    line-height: 1.5;
  }
body::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
   background-image: url("./img/bg_sp.jpg");
     background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
pointer-events: none;
}

}



img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
}

p{
    margin: 0;
    padding: 0;
}

.page {
  overflow: hidden;
}


/* =================================
  Utility
================================= */
.u_switch_img {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .u_visible_sp {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .u_visible_pc {
    display: none !important;
  }
}


/* =================================
   HERO
================================= */

.hero {
  position: relative;
  min-height: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.hero__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 55px 0 70px;
  text-align: center;
}


/* logo */

.hero__logo {
display: block;
}

.hero__logo img{
  width:55rem;
  margin: auto;
}


/* lead */

.hero__lead {
    margin: 8rem auto 15rem;
    font-size: 3.2rem;
    font-weight: 700;
}


/* title */

.hero__title {
width: 58rem;
margin: 0 auto;
}


/* =================================
   MOVIE
================================= */

.movie {
  position: relative;
  width: 62.5%;
  margin: 0 auto;
  padding:3rem 0 4rem;
}

.movie__inner {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
}

.movie__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =================================
   MOVIE MODAL
================================= */

.movie-modal{
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.movie-modal.is-active{
  visibility: visible;
  opacity: 1;
}

.movie-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1;
}

.movie-modal__content{
  position: relative;
  max-width: 1000px;
  width: 90%;
  z-index: 2;
}

.movie-modal__video{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}

.movie-modal__video iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.movie-modal__close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 2;
}

.movie-modal__close::before,
.movie-modal__close::after{
  content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    margin: auto;
    background: #ffffff;
    transform-origin: center;
}

.movie-modal__close::before{
    transform: rotate(45deg);
}

.movie-modal__close::after{
      transform: rotate(-45deg);
}


/* =================================
   INTRO
================================= */

.intro {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.intro__inner{
  width: 62.5%;
  margin: auto;
}

/* title */

.intro__title {
margin: 0 auto;
width: 87.5%;
padding-bottom: 4rem;
}


/* text */

.intro__text {
  margin: 0 0 12px;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 2;
  text-align: justify;
}

.intro__text:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 1536px) {
.intro__text{
    font-size: 2.1rem;
}
}

/* =================================
   FILM STRIP
================================= */

.film {
    overflow: hidden;
    width: 100%;
}


.film__track {
width: max-content;
flex-direction: column;
gap: 12px;
}

.film__item {
  flex-shrink: 0;
  display: flex;
  width: max-content;
}

.film__item_01 {
    padding-bottom: 1rem;
    animation: film01 25s linear infinite;
}

.film__item_02 {
    animation: film02 25s linear infinite;
}

.film__item img {
  width:auto;
  height: 230px;
  display: block;
  object-fit: contain;
}


@keyframes film01 {
  from {
    transform: translateX(-220px);
  }
  to {
    transform: translateX(calc(-50% - 220px));
  }
}

@keyframes film02 {
  from {
    transform: translateX(calc(-50% - 55px));
  }
  to {
    transform: translateX(-55px);
  }
}


/* =================================
   HISTORY (PCレスポンシブ対応)
================================= */

/* 1920px基準で計算（1px ≒ 0.052083vw） */

.history {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(100px, 13.02vw, 250px) 0 clamp(50px, 5.2vw, 100px);  
}

.history__inner {
  width: 100%;  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.history__header {
  padding-bottom: 3rem;
}

.history__header h2 {
  width: clamp(250px, 26.04vw, 500px);
  margin: 0 auto;
}

.history__header h2 img {
  width: 100%;
  height: auto;
}

.history__header p {
  display: block;
  padding-top:4rem;
  background: var(--red);
  font-size: clamp(11px, 0.67vw, 13px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  font-size: clamp(14px, 1.04vw, 20px);
}

.history__scroll {
    display: flex;
   width: 100%;
   height: 570px;
   box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 50px;
  position: relative;
  padding-left: 25%;
}

.history__scroll::-webkit-scrollbar {
  display: none;
}

.history__scroll:focus {
    outline: none; /* キーボードフォーカス時の青枠を消す */
}

.history_line{
  position: absolute;
  top: 51.7%;
  transform: translateY(-50%);
  width:max-content;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.history_line img{
  display: block;
  width: 100%;
  height: 100%;
}

/* item */
.history__item {
  position: relative;
  width: auto;
  height: 100%; /* 親要素(history__scroll)の高さに依存させる */
  flex-shrink: 0;
}

.history__item--1965 {
  margin-left: clamp(-50px, -2.6vw, -50px);
}

.history__item--1990 {
  width: clamp(130px, 11.45vw, 220px);
}

/* image */
.history__image {
  position: relative;
  width: auto;
  height: 100%;
  margin-left: clamp(10px, 1.04vw, 20px);
  overflow: hidden;
}

.history__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* description (フォントサイズ・位置を画面幅に連動) */
.history__description {
  position: absolute;
  margin: 0;
  white-space: nowrap; /* テキストの意図しない改行を防止 */
}

.history__description p {
  /* 1920pxで20px(2rem) → 最小12px〜最大20pxまで自動縮小 */
  font-size: clamp(14px, 1.04vw, 20px); 
  line-height: 1.7;
  letter-spacing: .1rem;
}

/* 各位置指定 (1920px指定値をvw換算 + clampで制御) */
.text_a {
  top: clamp(30px, 3.12vw, 60px);
  right: clamp(10px, 1.04vw, 20px);
  text-align: right;
}
.text_a p:nth-child(2) { padding-right: 1.7rem; }
.text_a p:nth-child(3) { padding-right: 2.7rem; }

.text_b {
  bottom: clamp(30px, 3.12vw, 60px);
  left: 5.5rem;
}
.text_b p:nth-child(1) { padding-left: 1.7rem; }
.text_b p:nth-child(2) { padding-left: 1rem; }

.text_c {
  bottom: clamp(30px, 3.12vw, 60px);
  right: clamp(40px, 4.2vw, 90px);
  text-align: right;
}
.text_c p:nth-child(2) { padding-right: 2rem; }
.text_c p:nth-child(3) { padding-right: 2.7rem; }

.text_d {
  top: clamp(30px, 3.12vw, 60px);
  left: 11.5rem;
}
.text_d p:nth-child(1) { padding-left: clamp(10px, 1.04vw, 20px); }
.text_d p:nth-child(2) { padding-left: clamp(5px, 0.52vw, 10px); }
.text_d p:nth-child(3) { padding-left: clamp(2px, 0.32vw, 8px); }

.text_e {
  bottom: clamp(30px, 3.12vw, 60px);
  left: 5.5rem;
}
.text_e p:nth-child(1) { padding-left: clamp(10px, 1.04vw, 20px); }
.text_e p:nth-child(2) { padding-left: clamp(5px, 0.52vw, 10px); }

.text_f {
  top: clamp(30px, 3.12vw, 60px);
  left: 11.5rem;
}
.text_f p:nth-child(1) { padding-left: clamp(10px, 1.04vw, 20px); }
.text_f p:nth-child(2) { padding-left: clamp(5px, 0.52vw, 10px); }

.text_g {
  bottom: clamp(30px, 3.12vw, 60px);
  right: clamp(40px, 4.16vw, 80px);
  text-align: right;
}
.text_g p:nth-child(2) { padding-right: clamp(10px, 1.04vw, 20px); }
.text_g p:nth-child(3) { padding-right: clamp(15px, 1.56vw, 30px); }

.text_h {
  top: clamp(20px, 2.08vw, 40px);
  left: clamp(40px, 4.12vw, 80px);
}
.text_h p:nth-child(1) { padding-left: clamp(10px, 1.04vw, 20px); }
.text_h p:nth-child(2) { padding-left: clamp(5px, 0.52vw, 10px); }
.text_h p:nth-child(3) { padding-left: clamp(2px, 0.26vw, 5px); }

.text_i {
  bottom: clamp(15px, 1.56vw, 30px);
  right: 7.5rem;
  text-align: right;
}
.text_i p:nth-child(2) { padding-right: clamp(10px, 1.04vw, 20px); }
.text_i p:nth-child(3) { padding-right: clamp(15px, 1.56vw, 30px); }
.text_i p:nth-child(4) { padding-right: clamp(20px, 2.08vw, 40px); }

.text_j {
  top: clamp(50px, 5.2vw, 100px);
  left:12rem;
}
.text_j p:nth-child(1) { padding-left: clamp(5px, 0.52vw, 10px); }

.text_k {
  top: clamp(30px, 3.12vw, 60px);
  left: 7rem;
}
.text_k p:nth-child(1) { padding-left: clamp(10px, 1.04vw, 20px); }
.text_k p:nth-child(2) { padding-left: clamp(5px, 0.52vw, 10px); }

.text_l {
  bottom: clamp(60px, 6.25vw, 120px);
  right: clamp(45px, 4.68vw, 90px);
}

.text_m {
  top: clamp(20px, 2.08vw, 40px);
  right: clamp(5px, 0.52vw, 10px);
  text-align: right;
}
.text_m p:nth-child(2) { padding-right: clamp(10px, 1.04vw, 20px); }
.text_m p:nth-child(3) { padding-right: clamp(15px, 1.56vw, 30px); }
.text_m p:nth-child(4) { padding-right: clamp(20px, 2.08vw, 40px); }

.text_n {
  bottom: clamp(20px, 2.08vw, 40px);
  left: clamp(25px, 2.6vw, 50px);
}
.text_n p:nth-child(1) { padding-left: clamp(10px, 1.04vw, 20px); }
.text_n p:nth-child(2) { padding-left: clamp(5px, 0.52vw, 10px); }

.text_o {
  top: clamp(30px, 3.12vw, 60px);
  left: 12rem;
}
.text_o p:nth-child(1) { padding-left: 1.5rem; }
.text_o p:nth-child(2) { padding-left: .7rem; }


@media only screen and (max-width: 1536px) {
.history__item--1990{
  width: auto;
}

  .text_a {
    top: 10rem;
    right: 3rem;
  }
 .text_b {
    bottom: 9rem;
    left: 6rem;
}
.text_c {
    bottom: 9rem;
    right: 8rem;
}
.text_c p:nth-child(2) {
    padding-right: 1.5rem;
}
.text_c p:nth-child(3) {
    padding-right: 2.2rem;
}

.text_d {
    top: 10rem;
    left: 11rem;
}
 .text_e {
    bottom: 9rem;
    left: 6rem;
}
.text_f {
    top: 10rem;
    left: 11rem;
}
.text_g {
    bottom: 9rem;
    right: 8rem;
}
.text_h {
    top: 9rem;
}
.text_i {
    bottom: 7rem;
    right: 8rem;
}
.text_j {
    top: 13rem;
    left: 11rem;
}
.text_k {
    top: 11rem;
    left: 6rem;
}
.text_l {
    bottom: 13rem;
    right: 9rem;
}
.text_m {
    top: 9rem;
    right: 2.5rem;
}
.text_o {
    top: 11rem;
    left: 11rem;
}
}


/* bottom logo */

.bottom-logo {
  margin: 8rem auto;
  width: 200px;
}

.bottom-logo img {
  width: 100%;
}


/* =================================
   FOOTER
================================= */

.footer {
  padding: 35px 20px;
  background: #fff;
  color: #222;
  text-align: center;
}

.footer p {
  margin: 0;
  font-size: 1.6rem;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
}


/* =================================
   PC
================================= */

@media screen and (min-width: 768px) {

  .hero__inner {
    padding-top: 13rem;
  }

  .intro {
    padding-bottom: 15rem;
  }

}

@media only screen and (max-width: 1366px) {
.text_c{
  right: 11rem;
}

 .text_d{
  left: 13rem;
 }
.text_e{
  left: 6rem;
 }
 .text_f{
  left: 13rem;
 }
.text_g {
right: 11rem;
}
.text_h {
  left: 7.5rem;
}
.text_i {
right: 10.5rem;
}
.text_j {
left: 13.5rem;
}
.text_l{
  right: 11.5rem;
}
.text_k{
  left: 8rem;
}
.text_m{
  right: 3rem
}
.text_o{
left: 13.5rem;
}
}

@media screen and (max-width: 1030px) {
  .text_c{
    right: 12.5rem;
  }
    .text_d {
        left: 15rem;
    }
    .text_e{
      left: 6rem;
    }
    .text_f {
      left: 15rem;
    }
    .text_g{
      right: 12rem;
    }
    .text_h {
      left: 9rem;
    }
    .text_i {
      right: 12rem;
    }
     .text_j {
       left: 16rem;
    }
    .text_k {
        left: 9rem;
    }
    .text_l {
      right: 13rem;
    }
    .text_m {
      right: 2.5rem;
    }
    .text_o {
      left: 15rem;
    }
}


/* =================================
   SP
================================= */

@media screen and (max-width: 767px) {

  .hero {
    min-height: auto;
    padding: 0;
  }


  .hero__lead {
    font-size:3.6rem;
  }

  .hero__inner {
    width: calc(100% - 30px);
    padding: 30rem 0 0;
  }

  .hero__logo img{
    width: 350px;
  }

  .hero__lead {
    margin: 25px 0 90px;
  }

  .hero__title {
    width: 50rem;
  }

.movie{
  width: 100%;
}

  .movie__note {
    display: none;
  }

  .intro {
    padding: 55px 20px 80px;
  }


.intro__inner{
  width: 100%;
}

  .intro__title {
    width: 270px;
  }

  .intro__text {
    font-size: 3rem;
    line-height: 1.7;
    text-align: justify;
  }


  .film__item img {
    height: 150px;
  }


  .history {
    padding-top: 10rem;
    padding-bottom: 8rem;
  }

  .history__inner{
    padding: 0 4rem;
  }

  .history__header {
    padding-bottom: 4rem;
  }

  .history__header h2 {
    width: 57rem;
  }

  .history__header p {
    display: none;
  }

.history__scroll{
  display: block;
  height: auto;
  overflow-x: hidden;
  position: relative;
  padding-left: 0;
}

.history_line{
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  width: 50px;
  bottom: 45rem;
}


  .history__item {
    width: 100%;
    height: auto;
    margin-bottom: 4rem;
  }

  .history__image {
    width: 100%;
    height: auto;
    margin-left:0;
  }

  .history__description p{
    font-size: 2.6rem;
  }

.history__item--1956{
  width: 95%;
}

.text_a{
  top: 8rem;
}

.text_a p:nth-child(2) {
    padding-right: 2rem;
}

.text_a p:nth-child(3) {
    padding-right: 3rem;
}


.history__item--1963{
    width: 95%;
    margin-left: auto;
}

.text_b{
  bottom: 6rem;
}

.history__item--1965{
  margin-top: -7rem;
  margin-left: auto;
}

.history__item--1965 .history__image{
  width: 68%;
  margin-left: auto;
}

.text_c {
  right: 10rem;
  bottom: 6rem;
}

.text_c p:nth-child(2) {
    padding-right: 2rem;
}

.text_c p:nth-child(3) {
    padding-right: 3rem;
}

.history__item--1970{
  width: 80%;
  margin-top: -10rem;
}

.text_d {
    top: 7rem;
    left: 11rem;
}

.history__item--1976{
  width: 83%;
  margin-left: auto;
}
.text_e{
  bottom: auto;
  top: 3rem;
  left: 12rem;
}
.history__item--1977{
  width: 83%;
}
.text_f{
  left: 12rem;
  top: 7.5rem;
}
.text_f p:nth-child(2){
  padding-left: 0;
}
.history__item--1980{
width:90%;
margin-left: auto;
}
.text_g{
  right: 10rem;
  bottom: 6.5rem;
}
.text_g p:nth-child(2) {
    padding-right: 3rem;
}
.text_g p:nth-child(3) {
    padding-right: 5rem;
}
.history__item--1990{
  width: 100%;
  height: 200px;
  margin-top: -17.5rem;
  margin-bottom: 6rem;
}

.history__item--1990 .history__image{
width: 35%;
}

.text_h {
    top: 5rem;
    left: 6rem;
}

.history__item--2001{
  width: 85%;
  margin-left: auto;
}

.text_i {
    bottom: 1rem;
    right: 10rem;
}

.history__item--2007{
  width: 83%;
  margin-top: -12rem;
}

.text_j {
    top: 11rem;
    left: 12rem;
}

.history__item--2012{
  width: 50%;
    margin-left: auto;
    padding-right: 10rem;
    height: 240px;
}

.text_k {
    top: 8rem;
    left: 7rem;
}

.history__item--2012a{
    width: 88%;
    margin-top: -10rem;
}
.text_l{
  bottom: auto;
  top: 11rem;
  left: 12rem;
}

.history__item--2013{
    width: 95%;
    margin-left: auto;
}
.text_m {
    top: 3.5rem;
    right: 2rem;
}

.history__item--2025{
  width: 88%;
}
.text_o {
    top: 8rem;
    left: 12rem;
}

.history__item--2026{
  margin-top: 15rem;
}

.bottom-logo{
      width: 160px;
      margin: 0 auto 12rem;
}
.footer p{
  font-size: 2.2rem;
}
}



/* =================================
   共通アニメーション (Scroll Fade In)
================================= */

/* 初期状態：透明＆下に30px落ちている */
.js-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* 画面に入った時に付与されるクラス */
.js-fade.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* （オプション）ディレイ（順次表示）用の補助クラス */
.js-fade-delay-1 { transition-delay: 0.15s; }
.js-fade-delay-2 { transition-delay: 0.3s; }
.js-fade-delay-3 { transition-delay: 0.45s; }
.js-fade-delay-4 { transition-delay: 0.65s; }


@media screen and (max-width: 767px) {
/* =================================
   左右からのスライドイン (Scroll Fade)
================================= */

/* --- 左からふわっと --- */
.js-fade-left {
  opacity: 0;
  transform: translateX(-40px); /* 左側にずらしておく */
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* --- 右からふわっと --- */
.js-fade-right {
  opacity: 0;
  transform: translateX(40px); /* 右側にずらしておく */
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* 表示時の共通状態（元の位置へ戻る） */
.js-fade-left.is-inview,
.js-fade-right.is-inview {
  opacity: 1;
  transform: translateX(0);
}
}