@charset "UTF-8";
/*===============================================
●main.css 画面の横幅が770px以上
===============================================*/
@media screen and (min-width: 770px) {
  .list_bg {
    background-image: url(../img/list/bg_01.jpg);
    background-size: cover;
  }
  #detail_conts {
    text-align: center;
  }
  #detail_conts ul {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #detail_conts ul li {
    width: 544px;
    margin: 0 20px;
    display: inline-block;
    vertical-align: top;
  }
  #detail_conts ul li.bg_2 {
    width: 574px;
    padding-top: 84px;
  }
  #detail_conts ul li .img {
    margin-bottom: 30px;
    background-image: url("../img/list/img_01_bg.png?20220622");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
  }
  #detail_conts ul .bg_2 .img {
    background-image: url("../img/list/img_02_bg.png?20210702");
  }
  #detail_conts ul .bg_3 .img {
    background-image: url("../img/list/img_03_bg.png?20220622_01");
  }
  #detail_conts ul li.bg_4 {
    padding-top: 84px;
  }
  #detail_conts ul .bg_4 .img {
    background-image: url("../img/list/img_04_bg.png?2025");
  }
  #detail_conts ul li .btn {
    width: 376px;
    margin: 0 auto 21px;
  }
  #detail_conts ul li .insta_img {
    width: 356px;
    margin: 0 auto;
  }
  #detail_conts ul li .insta_img img {
    display: block;
    width: 100%;
    height: auto;
  }
}
/*===============================================
●sp.css  画面の横幅が769pxまで（iPhone6 横向きまで）
===============================================*/
@media screen and (max-width: 769px) {
  .list_bg {
    background-image: url(../img/list/bg_01.jpg);
    background-size: cover;
  }
  #detail_conts {
    text-align: center;
  }
  #detail_conts ul {}
  #detail_conts ul li {
    width: 100%;
    margin-bottom: 40px;
  }
  #detail_conts ul li:last-of-type {
    margin-bottom: 0;
  }
  #detail_conts ul li .img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px;
    background-image: url("../img/list/img_01_bg.png?20220622");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
  }
  #detail_conts ul .bg_2 .img {
    max-width: 322px;
    background-image: url("../img/list/img_02_bg.png?20210702");
  }
  #detail_conts ul li .btn {
    width: 100%;
    max-width: 258px;
    margin: 0 auto 20px;
  }
  #detail_conts ul li .insta_img {
    width: 84%;
    max-width: 294px;
    margin: 0 auto;
  }
   #detail_conts ul li .insta_img img {
    display: block;
    width: 100%;
     height: auto;
  }
  #detail_conts ul .bg_3 .img {
    max-width: 322px;
    background-image: url("../img/list/img_03_bg.png?20220622_01");
  }
  #detail_conts ul .bg_4 .img {
    max-width: 322px;
    background-image: url("../img/list/img_04_bg.png?2025");
  }
}