/* =========================
   基本スタイル
   ========================= */

html { }

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: hsla(155, 59%, 72%, 0.85);
}

header, footer {
  background: #2405ed;
  color: white;
  padding: 1em;
  text-align: center;
}

.icon-title {
  color: white;
  margin: 0;
}

nav a {
  color: white;
  margin: 0 1em;
  text-decoration: none;
}

.container {
  padding: 1em;
}

.catalog-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
  border: 1px solid #ccc;
}

.back-to-top {
  display: inline-block;
  background: #ef0303;
  color:white;
  padding: 0em 0.4em;
  margin: 0.1em auto;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1em；
}

.back-to-top:hover {
  background: #005500;
}

/* =========================
   基本スタイル
   ========================= */

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: hsla(155, 59%, 72%, 0.85);
}

.catalog-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
  border: 1px solid #ccc;
}

th {
  background-color: #e0f0ff;
  color: #004080;
  font-weight: bold;
  padding: 12px;
  border: 1px solid #a3c8e0;
  text-align: left;
  width: 80px;
}  

td {
  background-color: #ffffff;
  padding: 12px;
  border: 1px solid #c0d8ee;
}

/* =========================
   メニュー（PC用：デフォルト）
   ========================= */
.hero-image-wrapper {
    position: relative;
  }

.menu-list.show {
  display: block;
}



.menu-toggle {
  display: block                                                                                                ;
  font-size: 1.5em;
  background: none;
  border: none;
  cursor: pointer;
  top: 100px;  /* スマホ翻訳バーを避ける */
}


.menu-list {
  width: 100%;
  max-width: 550px;
  border: 2px solid #0074d9;
  border-radius: 10px;
    
  display: block; /* ← 追加: PCで常時表示 */
}

.menu-list {
  display: none;
  position: absolute;     /* 画像の上に展開 */
  top: 50px;
  left: 0;
  
  
  padding: 5px 0;
  z-index: 1050;
}

.menu-list ul {
  list-style: none;
  padding: 5;
  margin: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-list li {
  margin-bottom: 0
}

.menu-list a {
display: inline-block;
  padding: 3px 0 3px 5px; /* 左に余白を追加（お好みで調整） */
  
    /* ← すべての項目の横幅を同じにする（お好みで調整） */
  margin: 2px 0;
          /* 薄いブルー */
  color: #0074d9;
  font-weight: 900;
  border: 1px solid #b3d1f7;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(137,195,239,0.12);
  transition: background 0.2s, box-shadow 0.2s;
text-align: leftr;
  box-sizing: border-box;
  white-space: nowrap;
 .menu-list a.small-text {
  font-size: 1em;
          /* ← ここも同じ値に統一 */
}  
}

.menu-list a.small-text {
  font-size: 1em;
  
  display: inline-block;
  
  /* 他のスタイルはそのまま */
}

.menu-list a:hover {
  background-color: #d0d3c9;
  transform: translateY(-2px);
}

.menu-title {
  display: block;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #4704f2;
  letter-spacing: 6px;
  padding: 6px 0;
  margin-bottom: 8px;
  border-bottom: 2px solid #ccc;
  background-color: #e0e3da;
  border-radius: 6px;
}

 .menu-list a,
  .menu-title {
    font-size: 1em;
    padding: 8px 16px;
  
    background: #e0f0ff;
    border: 1px solid #0074d9;
    border-radius: 8px;
    margin: 0;
    box-sizing: border-box;
  }
   /* =========================
   翻訳ウィジェットなど
   ========================= */

.translate-widget {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
  background-color: #f0f8ff;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  font-size: 14px;
}



/* =========================
   PC用: 常時表示 pc-open
   ========================= */
/* =========================
   PC用: 常時表示
   ========================= */
@media screen and (min-width: 820px) {
  .menu-toggle {
    display: none;
  }
  
  .menu-overlay {
  position: absolute;
  top: 1cm;
  left: 1cm;
  z-index: 1000;         /* ← これが上部だけなら下部にも追加する */
  
  background: rgba(137, 195, 239, 0.5);
  padding: 1em;
  box-shadow: none !important;
  border-radius: 10px;
  margin: 0;
  height: auto;           /* 自動調整（項目数に合わせる） */
  max-height: 180px;      /* 最大高さを制限（お好みで調整） */
  
}
.menu-overlay,
  .menu-list {
    max-width: 700px !important; /* MENU枠の横幅を長く（例: 700px） */
    width: 100% !important;
  }

  .menu-list {
    display: block !important;
    width: 100%;
    
    box-shadow: none !important;
  }
}

.menu-list ul {
    display: flex;
    flex-direction: column;
    gap: 4px; /* ← 項目間の間隔を広げる（例: 12px） */
    padding: 0;
    margin: 0;
     width: 100% !important;
  }
  }
  .menu-list li {
    margin-bottom: 0; /* gapで調整するので不要 */
    width: 100% !important;
  }

  .menu-list a,
  .menu-title {
    font-size: 0.95em !important;
    padding: 6px 10px !important;
    
    background: rgba(238,240,232,0.7);
   box-shadow: none !important;
    border: 1px solid #0074d9 !important;
    border-radius: 5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.0 !important;
  }
  .menu-list ul {
    gap: 2px !important;
  }

  .menu-title {
    display: block !important;
    text-align: center !important;
   
    font-size: 1.3em !important;
    font-weight: bold !important;
    letter-spacing: 6px !important;
    margin-bottom: 10px !important;
    background: #e0f0ff !important;
    border-bottom: 2px solid #0074d9 !important;
    border-radius: 8px !important;
    padding: 12px 0 !important;
    color: #4704f2 !important;
  }

  .menu-overlay,
  .menu-list,
  .menu-list ul,
  .menu-list li,
  .menu-title,
  .menu-list a {
    
    width: 350px !important; /* すべて同じ幅に統一（例: 450px） */
    box-sizing: border-box !important;
  }
  .menu-title {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
  }
}
}





/*<!--ここより上部はすべTPC用CSS*/










/* =========================
   スマホ用     sumaho open
   ========================= */
@media screen and (max-width: 768px) {
  body {
    font-size: 50%; /* 全体の文字サイズを80%に縮小 */
  }
  .container {
    font-size: 0.5em; /* 必要ならさらに縮小 */
  }
  /* メニュー部分は既に小さくなっているので、他の要素も小さくなります */
}
  .menu-toggle {
　　  display: block;
    position: fixed;
    top: 80px;
    left: 10px;
    z-index: 1100;
    background: #ff69b4;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 1.1em;
    cursor: pointer;

     

    
  }
  .menu-overlay {
　　.menu-overlay {
    display: none;
    position: fixed;
    top: 130px;
    left: 10px;
    z-index: 1099;
    width: 90vw;
    max-width: 320px;
    background: rgba(238,240,232,0.95);
    border-radius: 10px;
    padding: 10px;
　　display: none;
    
  }
  .menu-overlay.show {
    display: block;
  }
  .menu-list ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
  }
  .menu-list a,
  .menu-title {
    display: block;
    width: 100%;
    font-size: 0.2em;
    padding: 1px 4px;
    text-align: left;
    background: #e0f0ff;
    border: 1px solid #0074d9;
    border-radius: 6px;
    margin: 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 0.85;  /* 行間も詰める */
  }
  .menu-list a.small-text {
    font-size: 0.5em;
    width: 100%;
  }
  .menu-list a:hover {
    text-decoration: underline;
  }
  .menu-list li {
    margin-bottom: 0; /* 項目下の余白をゼロに */
  }
}


@media screen and (max-width: 768px) {
  .hamburger {
    position: fixed;
    top: 60px; /* Google翻訳バナーを避ける */
    right: 20px;
    z-index: 1000;
  }

  .menu {
    position: absolute;
    top: calc(60px + 40px); /* ハンバーガーの高さ分だけ下に配置 */
    right: 20px;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: none;
    width: 200px;
    
  }

  .menu.active {
    display: block;
  }
}

/* =========================
   スマホ用     sumaho close
   ========================= */