/*----------------------------
ヘッダー関連CSS：LOGO
-------------------------------*/
.header-logo {
  position: fixed; 
  top: 20px;          
  left: 0;          
  z-index: 9999;    /* 他の要素より前面に表示 */
  padding: 10px;    
  padding: 2vw;    
  /*mix-blend-mode: difference;*/
}

.header-logo img {
  width: auto;  
  height: 40px; 
  height: 4vw; 
}

@media screen and (max-width: 768px){/* 768px以下 */
  .header-logo {
    top: 20px;        
  }

  .header-logo img {
    height: 10vw;  
  }
}



/*----------------------------
ヘッダー関連CSS：ハンバーガーメニュー
-------------------------------*/

/* アクセシビリティ対策 */
.visuallyHidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  /* ハンバーガーボタンのスタイル */
  .hamburger {
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: block;
    height: 32px;
    outline: none;
    position: fixed;
    right: 50px;
    top: 50px;
    transition: transform .6s, width .6s;
    width: 30px;
    z-index: 200; /* メニューが開いてもハンバーガーボタンが上に表示されるように */
	mix-blend-mode: exclusion;
  }
  /* ハンバーガーメニュー三本線:PC */
  .hamburger-line {
    background-color: #fff;
    height: 1px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: inherit;
    width: 100%;
    mix-blend-mode: difference;
  }

  @media screen and (max-width: 768px) {/* スマホ時2本線のみ */
    .hamburger{
      width: 50px;
	  right: 27px;

    }
    .hamburger-line{
      height: 2px;
  
    }

  }

  .hamburger-line::before,
  .hamburger-line::after {
    background-color: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    transition: inherit;
    width: 100%;
    mix-blend-mode: difference;
  }


  @media screen and (max-width: 768px) {/* スマホ時2本線のみ */
    .hamburger-line::after{
      display:none;
    }

  }

/*問合せページの白背景に対応*/
  .page-template-page-contact .hamburger-line,
  .page-template-page-contact .hamburger-line::before,
  .page-template-page-contact .hamburger-line::after {
    background-color: #000;
  }

  .hamburger-line::before {
    top: 10px;
  }
  .hamburger-line::after {
    top: 20px;
  }
  /* ハンバーガーメニュー三本線オープン時 */
  .hamburger[aria-expanded="true"] .hamburger-line {
    transform: translateY(15px) rotate(-45deg);
    background-color: #000;
  }

  .hamburger[aria-expanded="true"] .hamburger-line::before {
    transform: translateY(-12px) translateX(20px) rotate(45deg);
    background-color: #000;
    width: 0;
  }

  .hamburger[aria-expanded="true"] .hamburger-line::after {
    transform: translateY(-20px) rotate(90deg);
    background-color: #000;
    display:block;
  }

  



  /* オーバーレイのスタイル */
  .overlay {
    background-color: #888;
    cursor: pointer;
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: opacity .5s, visibility .6s;
    visibility: hidden;
    width: 100vw;
    z-index: 10;
  }
  .overlay.active {
    opacity: .8;
    visibility: visible;
  }
  /* メニューのスタイル */
  .modal-container {
    background-color: #F5F3ED;
    height: 100%;
    position: fixed;
    right: -100%;
    transition: right .6s ease-in-out;
    width: 100%;
    z-index: 20; /* オーバーレイの上に表示 */
    overflow-y: auto; /* 縦スクロールを有効化 */
    -webkit-overflow-scrolling: touch; /* モバイルでスムーズスクロール */
  }

  .modal-container{
      width: 44%;
      max-width:580px;
  }

  @media screen and (max-width: 1100px){
      .modal-container {   
        width: 70%;
        }
    }

  @media screen and (max-width: 750px){
      .modal-container {
          width: 100%;
          z-index: 20; 
          }
    }  
  




  .modal-container[aria-hidden="false"] {
    /*overflow-y: scroll;*/
    right: 0;
    transition: left .6s ease-in-out;
  }
  .menu-item {
    margin-top: 20px;
    text-align: left;
    padding-left:3rem;
    font-size:18px;
  }

  @media screen and (max-width: 768px){
    .menu-item {  
      padding-left:1rem;
    }

  }

  /*
  .menu-item:hover {
    font-weight:bold;
  }
    */


  

  .menu-link {
    display: inline-block;
  }
  .menu-list{
    margin-top:80px;
    padding:2rem;
    text-align: left;
  }

  .menu-link {
    cursor: pointer;
    /*font-weight: bold;*/
    display: block;
    text-decoration: none;
    color: #333;
  }
  
  .menu-link:hover {
    text-decoration: underline;
  }

  .menu-list > li:last-child{
    margin-top:3rem;
    position:relative;
  }

 
  .menu-list > li:last-child img{
    position:absolute;
    right:20%;
    width:20px;
    height:20px;
    transform: translate(50%, 50%);
  }
 
  

  
  /* -------------------
  アコーディオンメニューのアニメーション 
  ---------------------------------*/
  .submenu {
    overflow: hidden; /* はみ出し部分を隠す */
    max-height: 0; /* 初期状態では高さをゼロに */
    transition: max-height 0.7s ease; /* アニメーションを設定 */
    list-style: none;
    padding: 0;
    margin: 0;
    /*margin-top:0.5rem;*/
  }



/* 矢印のスタイル */
summary {
    position: relative;
    padding-right: 20px; /* 矢印用の余白 */
    font-size: 18px;
}

/* 疑似要素で三角形を作成 */
summary::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    transform: rotate(45deg); /* 三角形に変形 */
    position: absolute;
    top: 5px;
    right: 20%;
    transition: transform 0.3s ease; /* アニメーション */
}

/* <details> が開かれたときに矢印を回転させる */
details[open] summary::after {
    transform: rotate(-135deg); /* 下矢印に回転 */
    top: 7px;
}

/* サブメニューのスタイル（初期状態） */
.submenu {
    display: none;
    padding-left: 20px;
}

/* <details> が開かれたときにサブメニューを表示 */
details[open] .submenu {
    display: block;
}

/* <details> が open のときに対応する <summary> を太字にする */
details[open] > summary {
  font-weight: bold; /* 太字に設定 */
}

.submenu {
  margin-top:1rem;
}
  
  
  
  /* ------------------------------
  details が open の場合にアニメーション
   -----------------------------------*/
  .menu-item details[open] .submenu {
    max-height: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    justify-items: start;
    margin-bottom: 2rem;
  }

  @media screen and (max-width: 768px){
    .menu-item details[open] .submenu {  
      grid-template-columns: 1fr; 
    }

  }
  
  /* サブメニュー内のリンク */
  .submenu li {
    padding-left: 20px; /* インデント */
    margin:0.3rem 0;

  }
  
  .submenu a {
    text-decoration: none;
    color: #555;
    
  }
  
  .submenu a:hover {
    text-decoration: underline;
    font-weight:bold;
  }

  .submenu span {
    font-size: 10px;

  }