/* ========== ベース ========== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:sans-serif;background:#f9f9f9;color:#333}

/* ヘッダー */
header{
  background:#222;color:#fff;padding:10px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
header h1{font-size:18px;margin-right:auto}
header input{padding:5px;font-size:14px}
header button{padding:5px 10px;background:#4caf50;color:#fff;border:0;cursor:pointer}

/* ========== レイアウト（グリッド＋エリア名） ========== */
.container{
  display:grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas: "left main right";
  gap:20px;
  padding:20px;
}
.sidebar-left{ grid-area:left; }
main{ grid-area:main; }
.sidebar-right{ grid-area:right; }

/* サイド共通 */
.sidebar-left,.sidebar-right{
  background:#fff;border:1px solid #ccc;border-radius:4px;padding:10px;
  box-shadow:0 0 5px rgba(0,0,0,.1);
}
.sidebar-left h2,.sidebar-right h2{font-size:1.1rem;margin-bottom:.5rem}
.sidebar-left ul,.sidebar-right ul{list-style:none}
.sidebar-left li,.sidebar-right li{
  padding:8px;cursor:pointer;border-bottom:1px solid #eee
}
.sidebar-left li:hover,.sidebar-right li:hover{background:#f0f0f0}

/* 中央 */
main{
  background:#fff;border:1px solid #ccc;border-radius:4px;padding:1rem;
  box-shadow:0 0 5px rgba(0,0,0,.1);
}
.video-links{display:flex;flex-direction:column;gap:.5rem}
.video-links a{
  display:inline-block;width:100%;
  padding:.6rem;background:#007bff;color:#fff;text-decoration:none;
  border-radius:6px;text-align:center
}
.video-links a:hover{background:#0056b3}

/* ========== ブレークポイント ========== */
/* iPad（横含む）: そのまま3カラム or 少し狭める */
@media (max-width: 1024px){
  .container{
    grid-template-columns: 180px 1fr 180px;
  }
  header h1{font-size: clamp(16px, 2vw, 18px);}
}

/* iPhone想定（～768px）：1カラムに積む */
@media (max-width: 768px){
  .container{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "main";   /* 並び順を変えたいなら "left" "main" "right" に */
    gap:14px;
    padding:12px;
  }
  header{padding:8px}
  header input{flex:1;min-width:150px}

  /* 見出しのタップ領域を広めに */
  .sidebar-left h2,.sidebar-right h2{
    font-size:1rem;
    padding:.3rem 0;
  }

  /* スクロールしやすいようにタップ領域を少し広げる */
  .sidebar-left li,.sidebar-right li{padding:10px}
}

/* iPhone（～768px）専用調整 */
@media (max-width: 768px){

  /* ページ全体の横スクロールは禁止 */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* レイアウトは1カラム（iPadは従来どおり） */
  .container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "main";   /* 並び順を left→right→main にしてる。変えたければ "left" "main" "right" に */
    gap: 14px;
    padding: 12px;
  }

  /* ── 横スクロールするのはこの2つのULだけ ── */
  #genre-list,
  #actress-list{
    list-style: none;
    display: flex;            /* 横並び */
    flex-wrap: nowrap;        /* 折り返さない */
    gap: 8px;
    overflow-x: auto;         /* ← この中だけ横に動く */
    overflow-y: hidden;
    white-space: nowrap;
    padding: 8px 4px 12px;
    margin: 0;
    max-width: 100%;
    -webkit-overflow-scrolling: touch; /* iOSの慣性スクロール */
    touch-action: pan-x;               /* 横スクロールを優先 */
    overscroll-behavior-x: contain;    /* 親への伝播を抑制 */
  }

  /* スクロールバー非表示（iOS/Firefox） */
  #genre-list::-webkit-scrollbar,
  #actress-list::-webkit-scrollbar{ display:none; }
  #genre-list, #actress-list{ scrollbar-width: none; }

  /* 項目をチップ化。既存の下線などは打ち消し */
  #genre-list li,
  #actress-list li{
    flex: 0 0 auto;
    border: 0 !important;
    background: #eee;
    color: #333;
    border-radius: 999px;
    padding: 10px 12px;
    line-height: 1;
  }
  #genre-list li:hover, #actress-list li:hover{ background:#e0e0e0; }

  /* ── 動画一覧：幅にフィットさせて切れないように ── */
  .video-links{
    display: grid;
    grid-template-columns: 1fr; /* モバイルは1列で確実に収める */
    gap: 10px;
  }
  .video-links a{
    display: block;
    width: 100%;
    max-width: 100%;
    word-break: break-word;     /* 長いテキストでも折り返す */
    overflow-wrap: anywhere;
    text-align: center;         /* 好みで left にしてもOK */
  }

  /* 余計な横はみ出し対策（親のボックス） */
  aside, main { overflow-x: clip; }  /* clipはhidden相当＋パフォ良し */
}