/* このページ専用の上書き（layout.css は変更しない） */
body.page-top {
  .container {
    grid-template-columns: 300px 900px;
    grid-template-rows: auto;
    /* 以降は暗黙行で自動生成 */
  }

  .pane-main {
    display: contents;
    /* ボックスを消して子を .container へ引き上げ */
  }

  #block_of_top_body {
    grid-column: 1 / 3;
    /* 1200px フル幅 */
    grid-row: 1;
    width: auto;
    /* 元の 900px 固定を解除 */
  }

  .pane-left-menu {
    grid-column: 1;
    grid-row: 2 / span 20;
    /* 2行目以降を左カラムが占有 */
  }

  /* 残りの pane-main の子は右カラム(2列目)へ */
  #block_of_event,
  #block_of_top_free2,
  #block_of_topic,
  #block_of_category {
    grid-column: 2;
  }

  .wrapper {
    overflow-x: hidden;
    /* 100vw のスクロールバー分のはみ出しをクリップ */
    padding-top: 110px;
  }

  #block_of_top_body {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  #block_of_top_free2 {
    width: 100%;
    margin: 0 auto 100px;
  }

  #block_of_top_free2 a {
    text-decoration: none;
  }

  #block_of_top_free2 a:hover {
    text-decoration: underline;
  }

  .bnr_h3 {
    text-align: center;
    font-size: 14px;
    font-family: 'Kipling', '', Verdana, Arial, Helvetica, sans-serif;
  }

  .bnr_h3 span {
    display: block;
  }

  span.bnr_en {
    font-weight: bold;
  }

  .bnr_more {
    text-decoration: underline;
    color: #ff73be;
  }

  .brand_list {
    background: #fff;

    .brand_list_wrap {
      width: 1200px;
      margin: 0 auto;
    }

    .block-top-event--header {
      width: 900px;
      margin-left: 300px;
    }

    ul {
      width: 900px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-left: 300px;
      padding: 30px 0 120px;

      li {
        width: 30%;
      }
    }
  }

  #block_of_topic {
    margin: 0 auto 60px;
  }

}

@media screen and (max-width: 768px) {
  body.page-top {

    .wrapper {
      padding-top: 0px;
    }

    #block_of_top_body {
      padding-top: 40px;
    }

    #block_of_topic {
      padding: 0 15px;
    }

    .block-top-event--goods {
      margin-bottom: 60px;

      .block-thumbnail-t {
        overflow-x: scroll;
      }

      .block-thumbnail-t--items {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: 40vw;
        margin-top: 0;
        gap: 0 15px;
      }

      .block-thumbnail-t--items li {
        width: 40vw;
        padding: 0 !important;
      }
    }

    #block_of_top_free2 {
      width: 100%;
      margin: 0 auto 100px;
    }

    li.splide__slide a {
      text-decoration: none;
    }

    #reco01 {
      overflow-x: scroll !important;

      >p {
        width: 100vw;
        font-size: 17px;
      }

      >p:after {
        top: 45px;
      }

      ul {
        display: grid !important;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: 40vw;
        gap: 0 15px;
        padding-left: 15px !important;
        overflow-x: scroll !important;

        li {
          width: 40vw;
        }
      }
    }

    .brand_list {
      background: #fff;
      padding: 0 10px;

      .brand_list_wrap {
        width: 100%;
        margin: 0 auto;
      }

      .block-top-event--header {
        width: 100%;
        margin-left: 0px;
        color: #000;
        margin-top: 60px;
      }

      ul {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: 0px;
        padding: 30px 0 120px;

        li {
          width: 32%;
        }
      }
    }
  }
}