@charset "UTF-8";

    #side h2{
      font-size: 14px;
    }
    .page_title{font-weight:bold; margin:5px 0;}
    .car_image img{height: 250px;}
    .container {
    width: 48% !important;
    }
    h3{text-align:left;}
    .container p{text-align:left;}
    .wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px; /* 画像ブロック同士の間隔 */
    }
    .container-text{margin-top: 10px;}
  .container-text p{margin-bottom: 0px; !important}
    .image-block {
      width: 45%; /* 2列になるように（隙間分ちょっと小さめ） */
      margin: 10px auto;
    }

    .large-image {
      width: 100%;
      height: auto;
    }

    .thumbnail-container {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .thumbnail img {
      width: 60px;
      height: 40px;
      object-fit: cover;
      cursor: pointer;
    }
    .controls {
      margin: 10px 0 20px 0;
      font-size: 16px;
    }
    .controls h2{
      text-align:center;
    }

    .filter-group {
      display: flex;
      align-items: flex-start;
      margin: 5px 0;
    }

    .group-title {
      font-weight: bold;
      margin-right: 10px;
      min-width: 100px;
      text-align: right;
      width: auto; /* 固定幅 */
      flex-shrink: 0;
    }
    .filter-options {
      display: flex;
      flex-wrap: wrap;
    }
    .filter-options label {
      display: flex;
      align-items: center; /* ←これが核心 */
      gap: 5px;
    }

    .filter-options input[type="radio"] {
      margin: 0; /* ←余計なズレ消す */
    }
    .filter-group label {
      margin-right: 10px;
      margin-bottom: 5px;
      white-space: nowrap;
    }
    @media (max-width: 600px) {
      .pay-top{display: flex; margin-top:10px;}
      .pay-cate{display: flex; justify-content: space-around; margin: 0 auto;}   
      .pay-cate img{width: 100%;} 
      figcaption{font-size:10px;} 
      section{margin-bottom: 20px !important;}
        .container {
        width: 95% !important;
        }
      .controls {padding-left:5px;}
        .filter-group {
        flex-direction: row; /* 横並びのまま！ */
        flex-wrap: wrap; /* ラジオボタンが多くても折り返せる */
        align-items: flex-start;
      }
    .work-text{margin-top: 0 !important;}
      .group-title {
        width: 100%; /* タイトルだけ横幅をとる */
        text-align: left;
        margin-bottom: 5px;
      }
    }
    .wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .container {
      text-align: center;
      opacity: 0;
  transform: translateY(10px);
  transition: 0.3s;
  pointer-events: none;
  position: absolute;
    }

    .container.active {
      opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: static;
    }

    .image-block {
      width: 100%; /* 大きい画像と同じ幅にする */
      margin: 0 auto; /* 中央寄せ */
    }

    .large-image {
      width: 100%;
      height: auto;
      margin-bottom: 10px;
    }

    .large-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .thumbnail-container {
      display: flex;
      justify-content: center; /* 小さいサムネを中央寄せ */
      gap: 10px; /* サムネ同士の間隔 */
    }

    .thumbnail img {
      width: 60px;
      height: 40px;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border 0.3s;
    }

    .thumbnail img:hover {
      border: 2px solid #555;
    }

}