html{
  scroll-behavior: smooth;
}
body {
    /* 画面全体に引き伸ばす */
    background-size: 100% 100%;
    min-height: 100lvh;
    /* 幅に上限を設定 */
    max-width: 100%;
    width: 100%;
    margin: 0;
    background-color: rgb(0, 0, 0);
    background: linear-gradient(to bottom, #000000, #00162c);
    z-index: -1;
    position: relative;
}
html, body {
  max-width: 100%;
  /* 強制的に横のはみ出しを切る */
  /* overflow-x: hidden; */
}
nav, ul{
    margin: 0;  
    padding: 0;  
}
/* ヘッダー設定 */
/*  */
/*  */
/*  */
.header{   
    position: fixed;
    height: 60px;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    /* 手前に表示 */
    z-index: 1000;
    background: linear-gradient(to bottom, #000000, #00000083);
    /* background-color: rgb(0, 0, 0); */
}
.header-row1{
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.header-row2{
    position: static;
    width: 100%;
}
.header-logo{
    flex: 2;
    color:aliceblue;
    /* font-size: 30px; */
    font-size: clamp(1.563rem, 1.449rem + 0.57vw, 1.875rem);
    margin-left: auto;
    width: 80%;
}
.header-logo img{
  position: absolute;
  top: -5px;
  width: 180px;
  height: 70px;
  opacity: 0.6;
}
.header-logo p{
    margin: 0;  
    padding: 0;
    text-align: left;
    margin-inline: 30px;
}
.header-menu{
    flex: 1;
    /* font-size: 24px; */
    font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    /* margin-right: auto; */
    margin: 10px;
    width: 20%;
}
/* メニュー設定 */
/*  */
/*  */
/*  */
#menu-toggle {
  display: none;
}
#menu-toggle:checked ~ .menu {
  max-height: 300px;
  opacity: 0.6;
}
.menu{
    position: fixed;
    right: 0px;
    top: 5%;
    height: 300px;
    width: 300px;
    max-height: 0px;          /* 高さゼロで隠す */
    opacity: 0;             /* 透明にする */
    overflow: hidden;
    background:linear-gradient(to bottom, #0000007c, #030128d8);
    /* background: #2c0756; */
    transition: max-height 0.5s ease, opacity 0.5s ease; /* 徐々に変化 */
}
.menu ul {
  list-style: none;
  padding: 0;
}
.menu a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}
/* 背景設定 */
/*  */
/*  */
/*  */
/* 円→（角丸四角形を経由）→正方形 にマスクの形状を変化させるキーフレーム */
@keyframes wallpaper-brighter {
  from {
    background-color: rgba(0, 0, 0, 0.9);
  }
  to {
    background-color: rgba(0, 0, 0, 0);
  }
}
@keyframes parallax {
  from {
    background-position: center 0;
  }

  to {
    background-position: center -1000px;
  }
}
.parallax-box{
  /* display: flex; */
  flex-direction: column;
  position: absolute;
  width: 100%;
}
.parallax-content{
    display: flex;
    /* align-items: center;  */
    /* overflow-x: hidden; */
    /* max-width: 100%; */
    /* width: 100%; */
    height: 900px;
    flex: 1;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    animation: wallpaper-brighter linear both, parallax linear both;
    animation-timeline: view(); 
    animation-range: contain 0% contain 100%; 
}
.parallax-img01{
  height: 1300px;
  background-blend-mode:color-burn,hue;
  background-position: 0% 0%, 0% 0%;
  background-size: 120%;
  background-image: url(../img/wall01-1.jpg);
}
.parallax-img02{
    height: 4000px;
    background-blend-mode:normal;
    background-image: url(../img/wall02.jpg);
    background-size: 110%;
}
.parallax-img03{
    height: 1000px;
    background-blend-mode:lighten;
    background-image: url(../img/wall02.jpg),url(../img/wall01-2.jpg);
}
@keyframes contents-text {
  to {
    opacity: 1;
    transform: translateX(30px);
  }
}
@keyframes contents-text-fadeout {
  to {
    opacity: 0;
    transform: translateX(-50%);
  }
}
.logo{
  margin: auto;
}
.logo img{
  width: 20%;
  opacity: 0.1;
}
.contents-text1{ 
  display: flex;
  align-items: center; 
  color: #fff;
  /* font-size: 10px; */
  font-size: clamp(0.5rem, 0.432rem + 0.34vw, 0.688rem);
  opacity: 0;
  margin: 5px;
  transform: translateX(30%);
  animation: contents-text 1.6s ease-out both,contents-text-fadeout 5s ease-out both;
  animation-timeline: auto, view();
  animation-range: entry 0% exit 100%, entry 80% exit 100%;
}
.contents-text1 p{
  margin:10px;
  width: 50vw;
}
.contents-text2{
  /* position:absolute; */
  /* width: 50%; */
}
.contents-text3{
  width: 50%;
  /* position:absolute; */
  /* overflow-x: hidden; */
}
.contents-text2 p{
  margin: 0;
  color: #fff;
  font-size: clamp(0.313rem, -0.313rem + 1.25vw, 0.625rem);
  opacity: 0;
  transform: translateX(50%);
  animation: contents-text 3.1s ease-in both, fadeout 3s ease-in both;
  animation-timeline: view(), view();
  animation-range: entry 10% entry 80%, entry 80% exit 100%;
  /* overflow: hidden; */
}
.contents-text3 p{
  /* width: 80%;
  max-width: 80%; */
  font-size: clamp(0.219rem, 0.167rem + 0.28vw, 0.375rem);
  position:absolute;
  white-space: nowrap;
  word-break: break-all;
  transform: translateX(20%);
  animation: contents-text 3.1s ease-in both, fadeout 3s ease-in both;
  animation-timeline: view(), view();
  animation-range: entry 10% entry 80%, entry 80% exit 100%;

}
/*以下フェードイン表示の指定*/
@keyframes fadein {
    100% {
      transform: translateX(30px);
      opacity: 1; 
    }
}
@keyframes fadeout {
    100% {
      opacity: 0; 
    }
}
.fadein-text {
  display: flex;
  color: #fff;
  opacity: 0;
  transform: translateX(20%);
  animation: fadein 6s ease forwards;
  animation-timeline: view();
  white-space: nowrap;
  /* overflow-x: hidden; */
  text-overflow: ellipsis;
}
.parallax-content-text{
    margin: 10px;
    color: #fff;
    font-size: 10px;
}
/*以下遅延の指定*/
.txt01 {animation-delay: 1s; font-size: clamp(0.313rem, 0.125rem + 1.5vw, 1.25rem); font-weight: bold;}
.txt02 {animation-delay: 4s; font-size: clamp(0.25rem, 0.075rem + 1.4vw, 1.125rem); font-weight: bold;}
.txt03 {animation-delay: 7s; font-size: clamp(0.188rem, 0.025rem + 1.3vw, 1rem); font-weight: bold;}
.txt04 {animation-delay: 10s; font-size: 14px;}
.txt05 {animation-delay: 13s;}
.txt06 {animation-delay: 16s;}

.contents{
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  align-items: stretch;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  height: 2000px;
}
.contents-text{
    background-color: aliceblue;
    height: 20lvh;
}
.contents-swiper{
    /* コンテンツ内で固定位置に表示（スクロールしたら隠す） */
    position: fixed;
}

.swiper {
  width: 100%;
  height: 90%;
  overflow: hidden;/* はみ出しの完全遮断 */
}

.swiper-slide img {
  display: block;/* 下の余白（ベースライン）を消す最重要 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kiwi-maru-regular {
  font-family: "Kiwi Maru", serif;
  font-weight: 100;
  font-style: normal;
}
.zen-kurenaido-regular {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 100;
  font-style: normal;
}
/* <weight>: Use a value from 100 to 900
<uniquifier>: Use a unique and descriptive class name */
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-style: normal;
}