@charset "UTF-8";
/* CSS Document */

	.banner{
		margin-bottom: 18px;
	}
	.banner_area{
		width: 100%;
		margin: auto auto 18px;
	}
	.banner_wrapper{
		width: 100%;
	}
	.banner_full{
		width: 1000px;
		margin: 0 auto 18px;
	}
	.banner_full:last-child{
		margin: 0 auto;
	}
	.banner a{
		display: block;
	}
	.banner img{
		width: 100%;
		vertical-align: bottom;
	}
	.sp{
		display: none;
	}
	.pc{
		display: block;
	}
	.hide{
		display: none;
	}
  .mo-event__list{
    max-width: 1180px;
    width: 100%;
    margin: auto auto 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .mo-event__item{
    width: calc((100% - 10px) / 2);
  }
  .mo-event__item img{
    width: 100%;
  }
	@media screen and (max-width: 640px){
		.banner_full{
			width: 100%;
			margin: 0 auto 10px;
		}
		.banner_full:last-child{
			margin: 0 auto;
		}
		.pc{
			display: none;
		}
		.sp{
			display: block;
		}
    .mo-event__list {
      flex-wrap: no-wrap;
      width: calc(100% - 8px);
    }
    .mo-event__item {
      width: 100%;
    }
	}

    .mio__header__main__campaign__banner {
      line-height: 0
      
    }
  
    .attention {
      width: 100%;
      max-width: 1200px;
      padding: 10px;
      /* border: 2px solid #ec9385; */
      margin: 20px auto;
      text-align: center;
      box-sizing: border-box;
      font-size: .9em;
      line-height: 1.6
    }
  
    .attention span,
    .attention a {
      color: #ec9385
    }
  
    .attention a {
      text-decoration: underline
    }
  
    .attention a:hover {
      text-decoration: none
    }
  
    @media screen and (max-width: 769px) {
      .attention {
        width: 95%;
        padding: 10px;
        margin: 0 auto 10px;
        text-align: center;
      }
    }
  
    /*  バナー一覧　*/
    .mio__top-banner-list {
      list-style: none;
      margin: 16px 0;
      display: flex;
      gap: 16px;
      padding: 0;
      flex-wrap: wrap
    }
  
    .mio__top-banner-list li {
      padding: 0
    }
  
    .mio__top-banner-full {
      width: 100%
    }
  
    .mio__top-banner-2 {
      width: calc((100% - 16px) / 2)
    }
  
    .mio__top-banner-list img {
      width: 100%;
      vertical-align: bottom
    }
  
    .hide {
      display: none
    }
  
    .coupon2 {
      padding-bottom: 20px
    }
  
    .ttl_cp2 {
      background-color: #ef6550;
      text-align: center;
      margin-bottom: 20px;
      width: 100%;
      max-width:1180px ;
      margin: auto;
    }
  
    .ttl_cp2 img {
      vertical-align: bottom;
      max-width: 750px;
      width: 100%
    }
  
    .coupon2 ul {
      max-width: 750px;
      width: 100%;
      margin: 10px auto;
      display: flex;
      gap: 10px;
      justify-content: center;
      padding: 0 20px
    }
  
    .item-3 {
      width: 250px
    }
  
    .item-4 {
      width: calc((1000px - 80px) / 2)
    }
  
    li img {
      width: 100%;
      vertical-align: bottom
    }
  
    @media screen and (max-width:768px) {
      .sp {
        display: block
      }
  
      .coupon2 ul {
        gap: 5px;
        padding: 0 5px
      }
  
      .item-3,
      .item-5,
      .item-6 {
        width: calc((100% - 20px) / 3)
      }
  
      .item-2,
      .item-4 {
        width: calc((100% - 10px) / 2)
      }
    }
  
    .coupon2 ul li {
      padding: 0;
      list-style-type: none
    }
  
    .kikan {
      text-align: center;
      font-size: 14px;
      margin: 0;
    }
    ul.mutli_cp__list {
      display: flex;
      max-width: 750px;
      margin-inline: auto;
      gap: 8px
    }