/*開いたら動画が再生*/
#opv-wrap {
    animation: fadeIn .5s ease;
    z-index: 100;
    overflow-x: hidden;
    width: 100%;
    position: fixed;      /* ← ページ全体に固定 */
    top: 0;
    left: 0;
    height: 100vh;        /* ← 画面の高さにぴったり */
    z-index: 1000;        /* ← headerより下、でも前面に出したいなら1000くらい */
  }
  
  
  #opv-wrap.playEnd {
    animation: fadeOut 0.6s ease forwards;
    z-index: -100;
    overflow-x: hidden;
    width: 100%;
  
  }
  
  video#opv {
    position:absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    vertical-align: bottom;
    z-index: 100;
    overflow-x: hidden;
    width: 100%;
  }
  
  #page-wrap {
    height: 100vh;
    overflow-y: hidden;
    animation: fadeIn 0s ease;
    overflow-x: hidden;
    position: relative; /* ← headerと重なりの基準を分ける */
    z-index: 1; /* ← 下に置く */
  
  }
  
  #page-wrap.startView {
    overflow-y: auto;
    z-index: 100;
    overflow-x: hidden;
    
  }
  
  @keyframes fadeIn {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    0%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
  /*ここまで開いたら動画が再生*/
  
  
  #sakura_block{
    width: 100%; 
    z-index:0;
  }
  #sakura_block .sakura_parts_box{
    position: relative;
    z-index:0;
  
  }
  #sakura_block .sakura_parts_box img{
    position: fixed;
    z-index:0;
    opacity: 0.7; /* ← 0に近いほど透ける（例: 0.5で半透明） */
  
  }
  
  
  #sakura_block .sakura_parts_box img:nth-child(2n+1){
    width: 500px;/*花びらのサイズ*/
    z-index:0;
  
  }
  #sakura_block .sakura_parts_box img:nth-child(2n){
    width: 500px;/*花びらのサイズ*/
    z-index:0;
  
  }
  
  /*-----------------------------------
  パーツの表示位置
  ----------------------------------*/
  img.parts_01{top: 450px; left: 5%;}
  img.parts_02{top: -100px; left: 0%;}
  img.parts_04{top: 1200px; left: 55%;}
  img.parts_05{top: 250px; left: 55%;}
  img.parts_06{top: 950px; left: 10%;}
  
  
  
  @keyframes sakura {
    0% {
      opacity: 0;
      transform: translate(0, 0);
    }
    10% {
      opacity: 1;
    }
    50% {
      transform: translate(0, -600px);
      opacity: 1;
    }
    100% {
      transform: translate(0, -1200px);
      opacity: 0;
    }
  }
  
  .sakura_parts_box img {
      animation: sakura linear 6s infinite;
      /*アニメーションが始まるまで画像を見えなくしておく*/
  
  }
  
  /*-----------------------------------
  アニメーションが始まるまでの時間
  -----------------------------------*/
  img.parts_01,img.parts_02{
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    animation-duration:10s; /*アニメーションが終了するまでの時間*/
  
  }
  img.parts_03,img.parts_04{
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    animation-duration:10s;
    z-index:10;
  
  }
  img.parts_05,img.parts_06{
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    animation-duration:10s;
    z-index:10;
  
  }
  img.parts_07,img.parts_08{
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    animation-duration:10s;
    z-index:10;
  
  }
  img.parts_04,img.parts_9{
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    animation-duration:10s;
    z-index:10;
  
  }
  
  
  html,body{
  margin:0;
  overflow-x: hidden;
  
  }
  
  
  body{
      background-color: #141d3b;
      height: auto;
      overflow-y: hidden;
      font-family:"yu-mincho-pr6n", sans-serif;
      margin:0;
      padding: 0;
  }
  
  
  
  /*header*/
  header {
    width: 100%;
    height: 80px;
    padding: 0 40px;
    background: #141d3b;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ロゴ＋メニューを左寄せ */
    position: fixed;
    top: 0;
    border-bottom: 2px solid #fff;
    z-index: 999 !important; /* ← 強制的に最前面 */
    opacity: 1.0;
  }
  
  .logo img {
    height: 45px; /* ロゴサイズは調整してOK */
    width: auto;
    margin-top:5%;
  }
  
  nav {
    margin-left: 40px; /* ロゴとメニューの間隔 */
  }
  
  nav ul {
    list-style: none;
    display: flex;
    font-size: 20px;
    margin: 0;
    padding: 0;
  }
  
  nav ul li a {
    font-family:"yu-mincho-pr6n", sans-serif;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    transition: 0.2s;
  }
  
  nav ul li a:hover {
    text-decoration: underline;
  }
  
  
  
  
  .main-title{
  text-align: center;
  color: #fff;
  margin-top: 12%;
  margin-bottom: 20%;
  font-weight: 100;
}

.about{
    font-size: 60px;
    margin-left: 10%;
    margin-top: 100px;
    color: #fff;
    text-shadow: 0 0 10px #f8f5f5,0 0 15px #f8f5f5;
  }

  .big {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .logo1 {
    max-width: 500px;   
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  
  .logo1 img {
    width: 100%;
    height: auto;        
    object-fit: cover;
    border-radius: 10px; 
    display: block;
    margin: 0 auto;
  }
  
  .kotoba {
    text-align: center;
    color: #fff;
    font-weight: 100;
    margin-top: 15px;
    text-shadow: 0 0 25px #f8f5f5, 0 0 15px #f8f5f5;
  }
  
  .kotoba p {
    margin: 0;
    line-height: 1.7;
  }
  
  .kotoba2 {
    text-shadow: 0 0 15px #fff, 0 0 15px #fff;
    font-size: 20px;
    padding: 10px 0;
    text-align: center;
    font-weight: bolder;
    margin-top: 10px;
  }