@charset "UTF-8";

  body.admin-bar #sub-menu {
margin-top: 32px; /* 管理バーの高さ分だけ余白を作る */
}

header {
background-color: #ffffffcd;

}

/* メインメニュー */
#pc-menu {
  list-style-type: none;
  padding: 0;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding-right: 20px;
  padding-left: 20px;
  font-weight: 500;
}

#pc-menu > li {
  position: relative;
  
}

/* サブメニュー (最初は非表示) */
#pc-menu ul {
  display: none;
  position: absolute;
  left: 0;
  background-color: #FFFFFF;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  padding-bottom: 0px;
  padding-left: 0px;
  top: 100%;
}

#pc-menu ul li {
  display: block;
  min-width: 180px;
  padding-left: 16px;
  margin-bottom: 10px;
  margin-top: 10px;
}

/* 2階層目以降 */
#pc-menu ul ul {
  left: 100%;
  top: 0;
}

/* 「▼」アイコン */
.toggle-btn {
  position: absolute;
  cursor: pointer;
  right: -18px;
  top: 6px;
  font-size: 18px;
  color: #AEAEAE;
}

/* 開閉時の表示 */
#pc-menu .open > ul {
  display: block;
}

/* サブメニューのリンク */
#pc-menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

#pc-menu a:hover {
  text-decoration: underline;
}
ul.sub-menu{
  margin-left: 0px;  
  
}


/* 追加subのメニュー */
.sub-nav-list ul li a{
color: white;
  text-decoration: none;
   cursor: pointer;
  transition: background-color 0.3s ease;
  display: block;
   padding: 12px 16px; /* ← この余白が「外側のクリック可能範囲」になります！ */
}


.sub-nav-list ul {
  display: flex;
   list-style-type: none;
  position: absolute;
  top: 0;
  right: 0;
  }
.sub-nav-list ul li{
  background-color: #044D67;

}

.sub-nav-list ul li:nth-of-type(2) {
  background-color:#03777F;
}



.sub-nav-list ul li:hover {
  background-color: #00142A; /* ホバー時の背景色 */
}

/*縦ボタン　スマホは下固定　　　　　　　　　　　　　　　　　　　　　　　　*/

/* 共通の初期設定 */
.button-container {
  position: fixed;
  z-index: 999;    /* そのまま */
  right: 0;
  top: 50%;        /* 縦位置を中央 */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  /* height: 100%; は削除 */
}

.button-container .vertical-button {
  display: flex;
  list-style: none;
  margin: 0;
  padding-top: 22px;
  /* [disabled]padding-right: 22px; */
  padding-bottom: 22px;
  flex-direction: column; /* PCデフォルトは縦 */
}

.button-container .vertical-button li {
  margin-bottom: 31px;
  background-color: #044D67;
  width: 16px;
  height: 200px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  display: flex; /* ← ここでflex化 */
  padding-left: 38px;
  padding-right: 20px;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.button-container .vertical-button li:nth-child(2) {
  background-color: #03777F;
}

.button-container .vertical-button li a {
  display: flex;               /* ← ブロックではなくflex推奨 */
  align-items: center;         /* 縦中央 */
  justify-content: center;     /* 横中央 */
  width: 100%;
  height: 100%;
  color: white;
  text-decoration: none;
  box-sizing: border-box;
  padding: 0 10px;             /* 必要なら余白 */
}

.button-container .vertical-button li:hover{
background-color: #001D56;
}

/* スマホ版: 下に横並びで固定 */
@media (max-width: 767px) {
  .button-container {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    display: block;
     transform: translateY(0);
   align-items: stretch;
   height: auto;
  }


  .button-container .vertical-button {
    flex-direction: row;
    justify-content: center;
     padding-bottom: 0px;
     padding-left: 0px;
  }

  .button-container .vertical-button li {
    margin-right: 0;
    margin-bottom: 0;
    
    height: auto;  /* 高さ自動 */
    text-align: center;
    padding: 0;    /* padding は a に移動するので不要 */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: flex;
     width: 50%;    /* 横並びなので幅を半分に */
  }

  .button-container .vertical-button li a {
    padding: 15px 0; /* スマホ用の縦padding */
  }
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
 
  #pc-menu {
    display: none;
  }
  #sub-menu {
  display: none;
  }
  
header {
background-color: transparent;

}

	.button-container .vertical-button li {

  writing-mode: horizontal-tb;  /* 横書きに戻す標準値 */
  text-orientation: mixed;      /* 横書きのデフォルト値 */
}


}