/************************************************************/
/* 共通スタイル */
/************************************************************/
.main-navigation {
  padding: 0.5em;
  position: relative;
  font-family: sans-serif;
}

/* .main-navigation a:focus {
      outline: none;
} */

/* メインメニュー（ul.menu） */
ul.menu {
  margin: 0;
  padding: 0;
}

ul.menu,
ul.sub-menu {
  list-style: none;
  gap: 20px;
  z-index: 1000;
}

/* 各メニュー項目 */
.menu-item {
  position: relative;
}

.sub-menu .menu-item {
  border: 0.05em solid #666;
}

/* メニューリンク */
.main-navigation a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px 15px;
  font-size: 0.9em;
}

/************************************************************/
/* サブメニューの装飾 s */
/************************************************************/

/* 下層メニューのインデント（各階層毎に +30px） */
ul.menu li ul.sub-menu a {
  /* 最上位のリンクは左右15pxなので：15+30 = 45px */
  padding-left: 45px;
  font-size: 0.8em;
}

ul.menu li ul.sub-menu a:hover {
  color: #555;
}

ul.menu li ul.sub-menu li ul.sub-menu a {
  padding-left: 75px;
}

/*メニュー内でサブサブメニューを持つ項目に ▶ アイコンを追加 */
/* メインメニューのリンクに相対位置を指定 */
.main-navigation li.menu-item-has-children>a {
  position: relative;
  padding-right: 30px;
  /* アイコン用のスペース */
}

.main-navigation li.menu-item-has-children>a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  color: white;
  background-image: url('data:image/svg+xml;utf8,<svg  fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 320C64 461.4 178.6 576 320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320zM305 441C295.6 450.4 280.4 450.4 271.1 441C261.8 431.6 261.7 416.4 271.1 407.1L358.1 320.1L271.1 233.1C261.7 223.7 261.7 208.5 271.1 199.2C280.5 189.9 295.7 189.8 305 199.2L409 303C418.4 312.4 418.4 327.6 409 336.9L305 441z"/></svg>');



  background-size: contain;
  background-repeat: no-repeat;
}

/**************アイコンのホバーした時の色を変えているs***************/
.main-navigation a:hover {
  color: #c2c2c2;
}

.main-navigation li.menu-item-has-children>a:hover {
  color: #c2c2c2;
}

.main-navigation li.menu-item-has-children>a:hover::after {

  background-image: url('data:image/svg+xml;utf8,<svg  fill="%2355555" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 320C64 461.4 178.6 576 320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320zM305 441C295.6 450.4 280.4 450.4 271.1 441C261.8 431.6 261.7 416.4 271.1 407.1L358.1 320.1L271.1 233.1C261.7 223.7 261.7 208.5 271.1 199.2C280.5 189.9 295.7 189.8 305 199.2L409 303C418.4 312.4 418.4 327.6 409 336.9L305 441z"/></svg>');

}

.main-navigation ul.sub-menu li.menu-item-has-children>a:hover::after {
  color: #c2c2c2;
}

/**************アイコンのホバーした時の色を変えているe***************/

/* サブメニューのアイコン（スマホ表示時も右揃え） */
.main-navigation ul.sub-menu li.menu-item-has-children>a::after {
  position: absolute;
  right: 15px;
  /* サブメニューアイコンを右端に配置 */
  top: 50%;
  transform: translateY(-50%);
  /* 垂直中央揃え */
  font-size: 0.9em;
  /* スマホ表示用に調整 */
}

/* サブメニュー（インライン展開） */
ul.menu>li.menu-item-has-children>ul.sub-menu {
  display: none;
  background: #000;
}

/* サブサブメニューも同様 */
ul.menu li ul.sub-menu li.menu-item-has-children>ul.sub-menu {
  display: none;
  background: #000;
  margin-top: 0;
}

/************************************************************/
/* サブメニューの装飾 e */
/************************************************************/

/************************************************************/
/* PC版： min-width: 769px */
/************************************************************/
@media screen and (min-width: 769px) {

  /* 最上位メニューを横並びに */
  ul.menu {
    display: flex;
    flex-wrap: wrap;
    /* メニューを2行にする */
  }

  /* サブメニュー（第一階層）は親 li を基準に絶対配置 */
  ul.menu>li.menu-item-has-children {
    position: relative;
  }

  .menuToggle-containerForMenu>.menu>li>.sub-menu {
    position: absolute;
    width: calc(100vw * 0.15);
  }
}

.menuToggle-label {

  display: none;


  background: none !important;

  /* 背景色をなくす */
  border: none;
}

/************************************************************/
/* スマホ版： max-width: 768px */
/************************************************************/
@media screen and (max-width: 768px) {
  /* .main-navigation
    > .menuToggle-containerForMenu
    > .menu
    > li.current_page_item
    > a::after,
  .main-navigation
    > .menuToggle-containerForMenu
    > .menu
    > li.current-menu-ancestor
    > a::after {
    width: 30%;
  } */

  .main-navigation {
    top: 10px;
    left: 10px;
    /* ハンバーガーメニュー位置調整 */
  }

  /*****************************************/
  /* ハンバーガーメニュー チェック時：☰→✕ の変化s */
  /*****************************************/
  .menuToggle-label {
    /* buttonにこのクラスが残るので、そのまま利用 */
    display: block;
    position: relative;
    width: 40px;
    height: 28.5px;
    /* ×の位置調整 */
    cursor: pointer;
    z-index: 1100;
    bottom: 10px;

    /* 枠線をなくす */
    padding: 0;
    /* 内側の余白をなくす */
    margin: 0;
    /* 外側の余白をなくす */
    appearance: none;
    /* OSによるデフォルトスタイルを無効化（Safari, Firefoxなど） */
    -webkit-appearance: none;
    /* Webkitブラウザ用（Chromeなど） */
    /* --- ここまで追加・修正 --- */
  }

  /* ハンバーガーの3本線（擬似要素で作成） */
  .menuToggle-label::before,
  .menuToggle-label::after,
  .menuToggle-label span {
    content: "";
    position: absolute;
    width: 40px;
    height: 2px;
    right: 1px;
    /* 細くする */
    background: white;
    transition:
      transform 0.3s,
      opacity 0.3s;
  }

  .menuToggle-label::before {
    top: 0;
  }

  .menuToggle-label span {
    top: 50%;
    transform: translateY(-50%);
  }

  .menuToggle-label::after {
    bottom: 0;
  }

  /* スクリーンリーダー用テキストの非表示 */
  .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    word-wrap: normal;
    /* IE 6/7 */
    border: 0;
  }

  /*****************************************/
  /* ハンバーガーメニュー チェック時：☰→✕ の変化e */
  /*****************************************/

  /* メニューオーバーレイ */
  .menuToggle-containerForMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    overflow-y: auto;
    z-index: 1000;
    padding-top: 60px;
  }

  /* メニューは縦並び */
  ul.menu {
    display: block;
  }

  ul.menu li {
    border-bottom: 1px solid #444;
  }

  /****************************************/
  /****************************************/
  /*******フォントオーサムを少し大きく*********/

  .main-navigation li.menu-item-has-children>a::after {
    font-size: 1.2em;
    /* アイコンを少し大きく */
  }

  .main-navigation ul.sub-menu li.menu-item-has-children>a::after {
    font-size: 1.2em;
    /* スマホ表示用に調整 */
    right: 15px;
  }
}

/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/* 以下は動的な動作を伴うもの */
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/

/************************************************************/
/* ハンバーガーメニュー のクローズオープン s  jsとは連携しないcssで完結*/
/************************************************************/
/* ハンバーガーメニュー表示用 */
.menuToggle-checkbox {
  display: none;
}

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

  /* メニューオーバーレイ */
  .menuToggle-containerForMenu {
    display: none;
  }

  .menuToggle-checkbox:checked~.menuToggle-containerForMenu {
    display: block;
  }

  .menuToggle-checkbox:checked+.menuToggle-label::before {
    transform: translateY(13px) rotate(45deg);
  }

  .menuToggle-checkbox:checked+.menuToggle-label span {
    opacity: 0;
  }

  .menuToggle-checkbox:checked+.menuToggle-label::after {
    transform: translateY(-13px) rotate(-45deg);
  }
}

/************************************************************/
/* ハンバーガーメニュー のクローズオープン e */
/************************************************************/

/************************************************************/
/* サブメニューの展開（javascrptと連携）s */
/************************************************************/

ul.menu>li.menu-item-has-children.active>ul.sub-menu {
  display: block;
}

ul.menu li ul.sub-menu li.menu-item-has-children.active>ul.sub-menu {
  display: block;
}

/************************************************************/
/* サブメニューの展開（javascrptと連携）e */
/************************************************************/