/* 全体レイアウト */
div.shiryo-list { position:relative; z-index:1; }
div.shiryo-list div.flex { display:flex; flex-direction:column; position:relative; min-height:100vh; z-index:1; }
/* 画像ブロック（左側） */
div.shiryo-image { background-color:rgba( 255,255,255,0.7 ); backdrop-filter:blur(10px); display:flex; flex:1; align-items:center; justify-content:center; padding:20px; position:sticky; top:0; min-height:50vh; z-index:1; }
div.shiryo-image img { box-sizing:border-box; border:1px solid var(--sub);  object-fit:contain; height:auto; max-width:200px; }

/* テキストブロック（右側） */
div.shiryo-text { flex:1; overflow-y:auto; scroll-snap-type:y mandatory;  -webkit-overflow-scrolling:touch; }
div.shiryo-text ul { padding:0 15px; }

/* 見出し */
div.shiryo-text h3 { color:var(--main); font-weight:600; margin-bottom:10px; }

/* テキストの各セクション */
div.shiryo-text section { background:var(--sub); border-bottom:1px solid var(--main); display:flex; flex-direction:column;  justify-content:center; scroll-snap-align:start; padding:40px; scroll-margin-top:50vh; min-height:50vh; }
div.shiryo-text section:nth-child(even) { background:var(--bg); }

/* ナビボタン */
div.nav-buttons { position:sticky; top:0; width:100vw; z-index:10; }
div.nav-buttons button { background-color:var(--main); color:var(--wh); padding:10px 10px 7.5px 10px; position:absolute; z-index:1; }
div.nav-buttons button#prev { margin-left:10px; top:25vh; left:0; }
div.nav-buttons button#next { margin-right:10px; top:25vh; right:0; }

/* ナビゲーション */
ul.list-item { display:none; }
.list-item a.active { background-color:var(--sub); border:1px solid var(--main); color:var(--main); } 

  /* Google風検索コンポーネント */
.google-like-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px auto;
  max-width: 480px;
  font-family: "Noto Sans JP", Arial, sans-serif;
}

.google-like-search .search-box {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  padding: 8px 14px;
  transition: box-shadow 0.2s ease;
  background: #fff;
}

.google-like-search .search-box:hover {
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}

.google-like-search .search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  padding: 6px;
}

.google-like-search .search-box .icon {
  width: 18px;
  height: 18px;
  fill: #5f6368;
  margin-right: 8px;
}

.google-like-search .buttons {
  margin-top: 16px;
  text-align: center;
}

.google-like-search .buttons button {
  background:var(--main);
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color:var(--wh);
  padding: 6px 14px;
  margin: 0 4px;
  font-size: 13px;
  cursor: pointer;
}

.google-like-search .buttons button:hover {
  border: 1px solid #dadce0;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}


@media (max-height:962px), (min-width:769px) and (max-width:960px) {/* 高さ処理 */

/* テキストの各セクション */
div.shiryo-text section li, div.shiryo-text section p { font-size:14px; }

}

@container(min-width: 768px) { /* 右端のボーダーを消す処理 */

/* ナビゲーション */
ul.list-item { display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; padding:10px 15px; margin:auto; }
ul.list-item li { text-align:center; list-style:none; margin:1px; width:calc( 16.66% - 2px ); }
ul.list-item li a { background-color:var(--main); border-radius:5px; color:var(--wh); display:block; padding:10px; }

/* 全体レイアウト */
div.shiryo-list { position:sticky; top:0; height:60vh; }
div.shiryo-list div.flex { border-top:1px solid var(--main); border-bottom:1px solid var(--main); flex-direction:row; min-height:60vh; }

/* 画像ブロック（左側） */
div.shiryo-image { flex:1; height:60vh; }

/* テキストブロック（右側） */
div.shiryo-text { flex:2; height:60vh; }

/* テキストの各セクション */
div.shiryo-text section { border-bottom:none; scroll-margin-top:0; scroll-snap-type:y mandatory; min-height:100%; }
.shiryo-image img { object-fit:contain; opacity:0; transition:opacity 0.6s ease, transform 0.6s ease; transform:translateY(20px); }
.shiryo-image img.active { opacity:1; transform: translateY(0); }
.shiryo-image img:hover { cursor:pointer; opacity:0.7; }

/* ナビボタン */
div.nav-buttons { width:auto;}
div.nav-buttons button#prev { margin-left:0; top:0; left:auto; right:0; transform:translateY(-1px) rotate(90deg); }
div.nav-buttons button#next { margin-right:0; top:60vh; transform:translateY(-42px) rotate(90deg); }

}



/* PC/タブレット用 */
/* @media (min-width: 768px) {
  .shiryo-list {
    display: flex;
    flex-direction: row;
    height: calc(100vh - (var(--header-height, 120px) + var(--footer-height, 60px)));
    margin: auto;
  }

  .shiryo-image {
    position: sticky;
    top: var(--header-height, 120px);
    height: calc(100vh - (var(--header-height, 120px) + var(--footer-height, 60px)));
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shiryo-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: translateY(20px);
  }
  .shiryo-image img.active {
    opacity: 1;
    transform: translateY(0);
  }

  .shiryo-text {
    flex: 2;
    overflow-y: auto;
    height: 100%;
    scroll-snap-type: y mandatory;
  }

  .shiryo-text section {
    min-height: 100%;
    scroll-snap-align: start;
    padding: 40px;
    background: #f8f8f8;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}


@media (max-width: 767px) {
  .shiryo-list {
    display: block;
  }

  .shiryo-image {
    position: relative;
    top: auto;
    height: auto;
  }

  .shiryo-image img {
    width: 100%;
    max-height: 40vh;
    object-fit: contain;
    opacity: 1 !important;
    transform: none;
  }

  .shiryo-text section {
    padding: 20px;
  }

  .scroll-arrows {
    position: fixed;
    bottom: 10%;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .scroll-arrows button {
    background: var(--main);
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: none;
    font-size: 18px;
    cursor: pointer;
  }

  .jump-buttons {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px;
    z-index: 999;
  }

  .jump-buttons button {
    background: var(--main);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
  }
} */