@charset "UTF-8";

body {
    font-family: "Federo","Hiragino Mincho ProN" sans-serif;
    font-size: 25px;
  }

  .subpage div {
    display: flex;
    list-style: none;
  }

  .subpage header {
    flex-basis: 26%;
    padding: 40px 15px;
    background-color: rgba(137, 43, 226, 0.089);
  }

  .subpage main {
    flex-basis: 56%;
    margin-top: 70px;
  }

  div {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    }

    .Federo {
      font-family: "Federo", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 25px;
    }

    .collection-list {
      display: flex;
      flex-wrap: wrap;
      max-width: 840px;
      margin: 20px auto 100px;
      justify-content: space-evenly;
    }

    .collection-list li {
      flex-basis: 42%;
      margin-bottom: 14px;
    }

    .carousel {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }

    /* カルーセル内容 */
    .contains {
      /* サイズは自由に変更してください。*/
      /* 下の.slideも同じサイズにしてください。 */
      width: 311px;
      height: 233px;
      overflow: hidden;
      position: relative;
      padding: 0;
      list-style: none;
    }
    /* スライド切り換え用ラジオボタンは常に非表示 */
    .slide_select {
      display: none;
    }
    /* 各スライド */
    .slide {
      /* サイズは自由に変更してください。*/
      /* 上の.containsも同じサイズにしてください。 */
      width: 311px;
      height: 233px;
      position: absolute;
      /* スライドの初期値は選択されていないので透明にしておく */
      opacity: 0;
    }
    /* 前へ次へボタン */
    .scroll_button {
      position: absolute;
      display: block;
      height: 30px;
      width: 30px;
      /* 縦中央から20px上の位置 */
      top: 50%;
      margin-top: -20px;
      /* 上辺と右辺のみ幅5pxの枠線 */
      border-width: 5px 5px 0 0;
      border-style: solid;
      border-color: #fdfdfd;
      cursor: pointer;
      /* 普段はボタンはやや薄くする */
      opacity: 0.5;
      /* スライドよりも前面にする */
      z-index: 3;
    }
    /* ホバー時にボタンを強調 */
    .scroll_button:hover {
      opacity: 1;
    }
    /* 前へボタン */
    .scroll_prev {
      left: 15px;
      /* 上辺と右辺の枠線を回転して"＜"にする */
      transform: rotate(-135deg);
    }
    /* 次へボタン */
    .scroll_next {
      right: 15px;
      /* 上辺と右辺の枠線を回転して"＞"にする */
      transform: rotate(45deg);
    }
    /* スライド移動ボタンエリア */
    .move_controler {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
    }
    /* スライド移動の各ボタン */
    .button_move {
      display: inline-block;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      border-radius: 100%;
      cursor: pointer;
      /* 普段はやや薄くする */
      opacity: 0.5;
      /* スライドより前面にする */
      z-index: 2;
    }
    /* ホバー時はやや明るくする */
    .button_move:hover {
      opacity: 0.75;
    }
    /* スライド移動ボタンの色 */
    .button_move {
      background-color: #fdfdfd;
    }
    /* 1番目のスライド選択時 */
    /* 1番目のスライドの透明度を0にして表示する */
    .slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
      opacity: 1;
    }
    /* スライド移動ボタンの1個目を明るくする */
    /* （今選択されていることが分かるように） */
    .slide_select:nth-of-type(1):checked ~ .move_controler .button_move:nth-of-type(1) {
      opacity: 1;
    }
    .slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
      opacity: 1;
    }
    /* 2番目のスライド選択時（1番目のスライドと同じことをする） */
    .slide_select:nth-of-type(2):checked ~ .move_controler .button_move:nth-of-type(2) {
      opacity: 1;
    }
    /* 3番目のスライド選択時 */
    .slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
      opacity: 1;
    }
    .slide_select:nth-of-type(3):checked ~ .move_controler
      .button_move:nth-of-type(3) {
      opacity: 1;
    }
    /* 4番目のスライド選択時 */
    .slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
      opacity: 1;
    }
    .slide_select:nth-of-type(4):checked
      ~ .move_controler
      .button_move:nth-of-type(4) {
      opacity: 1;
    }

    footer {
      font-family: "Federo", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      max-width: 1280px;
      margin: 0px auto;
      padding: 40px;
      text-align: center;
    }