header{
    width: 94%;
    height: 30px;
    align-items: center;
    padding: 60px 3%;
    display: flex;
    position: absolute;
    z-index: 10;
    justify-content: space-between;
    color: #fff;
    /* background: #fff; */
  }
  
  header h1{
    font-family: "Reem Kufi Fun", sans-serif;
    display: flex;
   width: 520px;
   /* font-size: 0.2rem; */
   align-items: end;
   /* background-color: red; */
   /* text-align: center; */
   letter-spacing:0.2rem;
   justify-content: space-between;
   line-height: 13px;
  
  }
  
  header img{
    width: 350px;
  }
  
  header .pc-nav{
    font-size: 13px;
    font-family: 'Arvo', serif;
  }
  
  header .pc-nav li{
font-family: "Ysabeau Infant", sans-serif;
    margin: 0 25px;
  }
  
  header.change-color {
    color:#333;
    box-shadow: 20px;
  }
  
  
  
  @media (max-width: 1024px) {
    header{
      width: 94%;
      height: 30px;
      align-items: center;
      padding: 25px 3%;
      display: flex;
      position: absolute;
      z-index: 10;
      justify-content: space-between;
      color: #fff;
      /* background: #fff; */
    }
    header h1{
     width: 80%;
  font-size: 25px;
  
    }
    
    header img{
      width: 300px;
      max-width: 80%;
    }
    .pc-nav{
      display: none;
    }
   }
  @media (max-width: 768px)  { 

    header{
      width: 94%;
      height: 20px;
      align-items: center;
      padding: 15px 3%;
      display: flex;
      position: absolute;
      z-index: 10;
      justify-content: space-between;
      color: #fff;
      /* background: #fff; */
    }


    header h1{
      width: 80%;
   font-size: 15px;
     }

   }

  
  
  /* ボタンメニュー */
  
  
  /* 丸ボタン本体（既にあるスタイルに追加・上書き） */
  #navToggle{
    background:#322e62;
    color:#fff;
    width:40px; height:40px;
    border:none; border-radius:3%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:2px;                          /* アイコンと文字の間隔 */
    font-size:20px;                   /* アイコンサイズ */
    cursor:pointer;
    padding: 25px;
    transition:transform .25s;
    position: fixed;
    right: 15px;
    top:15px;
    z-index: 1000;
  }
  
  /* ─ ラベル文字 ─ */
  #navToggle::after{
    content:attr(data-label);         /* ← ここが肝：属性値を表示 */
    font-size:10px;
    color:#fff;
    margin: 5px 0 0 0;
    letter-spacing:.05em;
    line-height:1;
    pointer-events:none;
  }
  
  
  
  @media (min-width: 1024px) {
    #navToggle{
        display: none;
    }
  
  }
  
  /* ===== おしゃれスライドメニュー ===== */
  
/* パネル本体（初期位置は画面外） */
#slideMenu{
  position:fixed;
  top:0; right:0;
  width:300px;
  height:100vh;
  background:#322e62;
  backdrop-filter:blur(6px);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.6,.05,.3,1);
  z-index: 950;
  display:flex; align-items:center; justify-content:center;
}

/* === ドロワーメニュー：開いた状態の最優先ルール === */
#slideMenu.open{
  transform: translateX(0) !important;     
}
  
 
  /* メニューリスト */
  #slideMenu ul{
    display: block;
    list-style:none;
    padding:0; margin:0;
    text-align:center;
    width:100%;
  }
  #slideMenu li{ margin:20px 0; }
  #slideMenu a{
    font-family:"Kiwi Maru",serif;
    font-size:20px;
    color:#fff;
    text-decoration:none;
    transition:opacity .25s;
  }
  #slideMenu a:hover{ opacity:.7; }
  
  /* “画面を暗くする” オーバーレイ */
  #menuOverlay{
    position:fixed;
    inset:0;
    background:rgba(0, 0, 0, 0.48);
    opacity:0; pointer-events:none;
    transition:opacity .45s;
    z-index: 900; 
  }
  #menuOverlay.show{
    opacity:1; pointer-events:auto;
  }
  


  #menuOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
  }
  #menuOverlay.show {
    opacity: 1;
    visibility: visible;
  }




  .pp{
    background-color: #797979;
    padding: 2%; 
    color:#fff;
    width: 80%;
    font-size: 13px;

  }


  @media (max-width: 768px)  {

    .pp{
      background-color: #797979;
      padding: 2%; 
      color:#fff;
      width: 80%;
      font-size: 13px;
   max-width: 90%;
   min-width: 80%;
    }
  
  }