@charset "utf-8";
/*****************************************
共通
*****************************************/
.wrapper {
   width: 100%;
   padding: 0;
 }
.container {
   width: 100%;
   padding: 0;
}
#aoki_main * {
   box-sizing: content-box;
}
#aoki_main ul,
#aoki_main ol {
	list-style: none;
}
#aoki_main a:hover,
#aoki_main a:focus {
	text-decoration: none;
}

/* mv */
#aoki_main {
	width: 100%;
	color: #181715;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.5;
}
#aoki_main .mv {
   position: relative;
   width: 100%;
   margin: 0 auto;
   padding: 0 !important;
   box-sizing: border-box;
   text-align: center;
}
#aoki_main .mv p {
   width: 1200px;
}


/* leadArea */
#aoki_main .leadArea {
   width: 100%;
   margin: 50px auto 74px;
   padding: 0;
}
#aoki_main h1 {
   line-height: 1.7;
   color: #3a416d;
   font-size: 26px;
   font-weight: bold;
   text-align: center;
}
#aoki_main .leadArea p {
   line-height: 2;
   color: #3a416d;
   font-size: 16px;
	 text-align: center;
}
#aoki_main .leadArea p.recommend_item {
  width: 488px;
  margin: 70px auto 0;
  position: relative;
  font-size: 25px;
  font-weight: bold;
}
#aoki_main .recommend_item::before {
  content: "";
  position: absolute;
  background: url("../_img/260417/fukidashi.webp") no-repeat top center/ 380px 10px;
  width: 380px;
  height: 10px;
  bottom: 0;
  left: 50px;
}
#aoki_main .leadArea .anchorlink {
  display: flex;
  justify-content: center;
  align-items: end;
  margin: 25px 0 60px;
}
#aoki_main .leadArea .anchorlink a {
  position: relative;
  width: 200px;
}
#aoki_main .leadArea .anchorlink a + a {
  margin-left: 40px;
}
#aoki_main .leadArea .anchorlink a p {
  font-size: 25px;
  font-weight: bold;
  color: #3a416d;
}
#aoki_main .leadArea .anchorlink a p + p {
  margin-top: 10px;
}
#aoki_main .leadArea .anchorlink a::before {
  content: "";
  position: absolute;
  background: url("../_img/260417/anc_btn.webp") no-repeat top center/ 20px 20px;
  width: 20px;
  height: 20px;
  bottom: -16px;
  left: 90px;
}
/*  contents */
#aoki_main #anc01,
#aoki_main #anc03 {
  width: 100%;
  background: #d8ec19;
}
#aoki_main #anc02,
#aoki_main #anc04 {
  width: 100%;
  background: #fff;
}
#aoki_main .contents .contents_inner {
  width: 1010px;
  margin: 0 auto;
  padding: 103px 0 120px;
}
#aoki_main .contents h2 {
  font-size: 26px;
  color: #3a416d;
  text-align: center;
}
#aoki_main .contents h2 span {
  font-size: 30px;
}
#aoki_main .contents h3 {
  margin-top: 25px;
  font-size: 24px;
  color: #3a416d;
  text-align: center;
}
#aoki_main .contents h3 span {
  font-size: 50px;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 4px;
}
#aoki_main #anc02 h3 span,
#aoki_main #anc04 h3 span {
  text-decoration-color: #cfe408;
}
#aoki_main .contents .price {
  margin-top: 10px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #3a416d;
}
#aoki_main .contents .price span {
  font-size: 22px;
}
#aoki_main .contents_flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
}
#aoki_main .contents_flex .left {
  width: 523px;
}
#aoki_main .contents_flex .right {
  width: 426px;
  margin-left: 45px;
}
#aoki_main #anc01 .icon {
  width: 277px;
  margin: 16px auto 0;
}
#aoki_main #anc02 .icon,
#aoki_main #anc03 .icon {
  width: 179px;
  margin: 16px auto 0;
}
#aoki_main #anc04 .icon {
  width: 269px;
  margin: 16px auto 0;
}
#aoki_main .contents_flex .right .text {
  border-top: 2px solid #fff;
  margin-top: 7px;
  padding-top: 16px;
  font-size: 16px;
  color: #3a416d;
  line-height: 1.8;
}
#aoki_main #anc02 .contents_flex .right .text,
#aoki_main #anc04 .contents_flex .right .text {
  border-top: 2px solid #3a416d;
}
#aoki_main .js-modal-open {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 257px;
  height: 48px;
  margin: 10px auto 20px;
  background: #fff;
  color: #3a416d;
  font-size: 16px;
  font-weight: bold;
  border-radius: 45px;
  transition: .4s;
}
#aoki_main .js-modal-open:hover {
  background: #3a416d;
  color: #fff;
}
#aoki_main .btn-area01 {
  text-align: center;
  margin: 0 auto;
}
#aoki_main .btn-area01 .btn a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 80px;
  background: #3a416d;
  border: 2px solid #3a416d;
  border-radius: 45px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  line-height: 1.5;
  transition: .4s;
}
#aoki_main .btn-area01 .btn a:hover {
  background: #fff;
  border: 2px solid #3a416d;
  color: #3a416d;
}
#aoki_main .btn-area01 .btn a::before {
  position: absolute;
  content: "";
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  width: 12px;
  height: 12px;
  top: 34px;
  right: 40px;
  transform: rotate(135deg);
  transition: .4s;
}
#aoki_main .btn-area01 .btn a:hover::before {
  border-top: 2px solid #3a416d;
  border-left: 2px solid #3a416d;
}
#aoki_main .modal__bg  {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
#aoki_main .modal_flex {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#aoki_main .modal_flex picture + picture {
  margin-left: 20px;
}
#aoki_main .modal_flex picture {
  width: 317px;
}
#aoki_main .modal__content {
  left: 50%;
  padding: 32px 28px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 650px;
}
#aoki_main .modal_text {
  text-align: left;
  margin-top: 13px;
  line-height: 1.7;
  font-size: 16px;
  color: #3a416d;
}
#aoki_main h4 {
  font-size: 26px;
  color: #3a416d;
  font-weight: bold;
}
#aoki_main .cmn-btn-square-01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 303px;
  height: 57px;
  margin: 25px auto 0;
  background: #cfe408;
  border-radius: 45px;
  font-size: 20px;
  font-weight: bold;
  color: #3a416d;
  transition: .4s;
}
#aoki_main .cmn-btn-square-01:hover {
  background: #3a416d;
  color: #fff;
}
/*  btn-area */
#aoki_main .btn-area {
   margin-top: 16px;
   text-align: center;
}
#aoki_main .btn-area .cmn-btn + .cmn-btn {
   margin-top: 40px;
}
/* 1カラム（ベタ背景色 ⇒ ボーダー） */
#aoki_main .cmn-btn.bg a {
   display: flex;
   position: relative;
   width: 500px;
   height: 80px;
   margin: 0 auto;
   justify-content: center;
   align-items: center;
   background: #563e30;
   color: #fff;
   border: 2px solid #563e30;
   border-radius: 100vw;
   font-size: 20px;
   font-weight: bold;
   box-sizing: border-box;
   transition: all .3s;
}
#aoki_main .cmn-btn.bg a:hover {
   background-color: #fff;
   color: #563e30;
   text-decoration: none;
   transition: all .3s;
}
#aoki_main .cmn-btn.bg a::after {
   content: "";
   position: absolute;
   top: 52%;
   right: 40px;
   width: 12px;
   height: 12px;
   margin-top: -3px;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   transform: translateY(-40%) rotate(45deg);
   -webkit-transform: translateY(-40%) rotate(45deg);
   transition: all .3s;
}
#aoki_main .cmn-btn.bg a:hover::after {
   border-top: 2px solid #563e30;
   border-right: 2px solid #563e30;
   transition: all .3s;
}
/* 1カラム（ボーダー ⇒ ベタ背景色） */
#aoki_main .cmn-btn.bd a {
   position: relative;
   display: flex;
   width: 500px;
   height: 80px;
   margin: 0 auto;
   padding: 18px;
   justify-content: center;
   align-items: center;
   color: #fff;
   border: 2px solid #c0642c;
   background: #c0642c;
   border-radius: 100vw;
   font-size: 20px;
   font-weight: bold;
   box-sizing: border-box;
   text-align: center;
   transition: .3s
}
#aoki_main .cmn-btn.bd a::after {
   content: "";
   position: absolute;
   top: 53%;
   right: 30px;
   width: 10px;
   height: 10px;
   margin-top: -2px;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   transform: translateY(-40%) rotate(45deg);
   -webkit-transform: translateY(-40%) rotate(45deg);
   transition: .3s
}
#aoki_main .cmn-btn.bd a:hover {
   background-color: #fff;
   color: #c0642c;
   transition: .3s;
   -webkit-transition: .3s;
   text-decoration: none;
   transition: .3s
}
#aoki_main .cmn-btn.bd a:hover::after {
   border-top: 2px solid #c0642c;
   border-right: 2px solid #c0642c;
   transition: .3s
}

/* cmn-recommend */
#aoki_main .cmn-recommend {
   padding: 200px 0 0;
}
#aoki_main .cmn-recommend h2 {
   margin: 0 auto 47px;
   color: #3a416d;
   font-size: 26px;
   font-weight: bold;
   text-align: center;
}
#aoki_main .bnr_img a {
   display: block;
}

/* 商品モジュール調整 */
#aoki_main .topicModuleCredit {
   margin: 0 auto;
}
#bottom_recommend_area h2 {
  color: #3a416d;
}
.topicModuleItem__titleCol {
  display: none!important;
}
.module_area {
  margin-top: 20px;
}
#bottom_recommend_area h2::before,
#bottom_recommend_area h2::after {
    content: "";
    border-bottom: 2px solid #3a416d!important;
}
/*****************************************
PC only
*****************************************/
@media screen and (min-width: 769px) {
  .sp {
      display: none;
   }

   /* ボタン2カラム */
   #aoki_main .btn-area-others {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 30px;
   }
   #aoki_main .btn-area-others .cmn-btn:nth-of-type(2n) {
      margin-left: 20px;
   }

   /* cmn-recommend */
   #aoki_main .cmn-recommend h2 {
      display: flex;
      align-items: center;
      justify-content: center;
   }
   #aoki_main .cmn-recommend h2::before,
   #aoki_main .cmn-recommend h2::after {
      content: "";
      border-bottom: 2px solid #3a416d;
   }
   #aoki_main .cmn-recommend h2::before {
      margin-right: 20px;
      padding-left: 120px;
   }
   #aoki_main .cmn-recommend h2::after {
      margin-left: 20px;
      padding-right: 120px;
   }
   #aoki_main .cmn-recommend .bnr_box {
      display: flex;
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      justify-content: space-between;
      -webkit-box-pack: justify;
   }

   /* bottom_recommend_area */
   #aoki_main #bottom_recommend_area .bottom_newitem,
   #aoki_main #bottom_recommend_area .bottom_service {
      width: 1100px !important;
   }
   #aoki_main #bottom_recommend_area .bottom_bnrBox a {
      width: 24% !important;
   }
   #aoki_main #bottom_recommend_area .bottom_bnrBox a + a {
      margin-left: 12px !important;
   }

   /* 商品モジュール調整 */
   #aoki_main .topicModuleCredit__priceItem {
      width: 133px;
   }
}


/*****************************************
SP only
*****************************************/
@media screen and (max-width: 768px) {
   .pc {
      display: none;
   }
   .wrapper {
      padding: 0;
      margin: 0 0 50px;
   }
   .container {
      padding-left: 0;
      padding-right: 0;
   }

   /* mv */
   #aoki_main {
      max-width: 768px;
      width: 100%;
      line-height: 1.5;
      margin: 0 auto;
      color: #181715;
      font-size: 4.2666666vw;
   }
   #aoki_main .mv {
      width: 100%;
   }
   #aoki_main .mv p {
      width: 100%;
   }
   #aoki_main .mv img {
      width: 100%;
   }

   /* leadArea */
   #aoki_main .leadArea {
      width: 100%;
      margin: 0 auto 8vw;
      padding: 0 15px;
      box-sizing: border-box;
   }
   #aoki_main h1 {
      line-height: 1.7;
      margin: 6.6vw 0 0;
      font-size: 4vw;
   }
    #aoki_main .leadArea p.recommend_item {
      width: 92vw;
      text-align: center;
      margin: 8vw auto 0;
      font-size: 4vw;
      font-weight: bold;
   }
    #aoki_main .recommend_item::before {
    content: "";
      position: absolute;
      background: url("../_img/260417/fukidashi.webp") no-repeat top center/ 63.7vw 1.6vw;
      width: 63.7vw;
      height: 1.6vw;
      bottom: 0;
      left: 15%;
   }
     #aoki_main .leadArea p {
      line-height: 1.92;
      font-size: 3.46vw;
      text-align: left;
   }
  #aoki_main .leadArea .anchorlink {
      flex-wrap: wrap;
      margin: 4vw 0 10vw;
   }
  #aoki_main .leadArea .anchorlink a {
      width: 30vw;
   }
  #aoki_main .leadArea .anchorlink a:nth-of-type(3) {
    margin-left: 0;
  }
  #aoki_main .leadArea .anchorlink a:nth-of-type(n+3) {
      margin-top: 8vw;
   }
  #aoki_main .leadArea .anchorlink a p {
      font-size: 3.73vw;
      text-align: center;
   }
  #aoki_main .leadArea .anchorlink a::before {
      content: "";
      position: absolute;
      background: url(../_img/260417/anc_btn.webp) no-repeat top center / 3.06vw 3.06vw;
      width: 3.06vw;
      height: 3.06vw;
      bottom: -8%;
      left: 44%;
  }
      /*  contents */
    #aoki_main .contents .contents_inner {
      width: 92vw;
      margin: 0 auto;
      padding: 12vw 0 15vw;
    }
    #aoki_main .contents h2 {
      font-size: 3.2vw;
      line-height: 1.6;
    }
    #aoki_main .contents h2 span {
      font-size: 4vw;
    }
    #aoki_main .contents h3 {
      margin-top: 2vw;
      font-size: 3.73vw;
    }
    #aoki_main .contents h3 span {
      font-size: 7.46vw;
      text-decoration-thickness: 3px;
    }
    #aoki_main .contents .price {
      margin-top: 2vw;
      font-size: 4vw;
    }
    #aoki_main .contents .price span {
      font-size: 3.2vw;
    }
    #aoki_main .contents_flex {
      display: block;
      margin-top: 3vw;
    }
    #aoki_main .contents_flex .left {
      width: 86.6vw;
      margin: 0 auto;
    }
    #aoki_main .contents_flex .right {
      width: 86.6vw;
      margin: 0 auto;
    }
    #aoki_main #anc01 .icon {
      width: 57.3vw;
      margin: 12vw auto 0;
    }
    #aoki_main #anc02 .icon,
    #aoki_main #anc03 .icon{
        width: 36.9vw;
        margin: 12vw auto 0;
    }
   #aoki_main #anc04 .icon {
      width: 55.2vw;
      margin: 12vw auto 0;
    }
    .slick-arrow {
      font-size: 0;
      border: none;
      width: 11.7vw;
      height: 11.7vw;
    }
    .slick-dots {
      position: absolute;
      bottom: -21px;
      left: 0;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: 0;
      text-align: center;
    }
    .slick-dots li {
      display: inline-block;
      width: 2.4vw;
      height: 2.4vw;
      margin: 0 8px;
      background: #cfe408;
      border: 2px solid #3a416d;
      border-radius: 100vw;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      cursor: pointer;
    }
    #anc02 .slick-dots li,
    #anc04 .slick-dots li{
      background: #fff;
    }
    .slick-dots li.slick-active, .slick-dots li:hover {
      background: #fff;
    }
    #anc02 .slick-dots li.slick-active,
    #anc02 .slick-dots li:hover,
    #anc04 .slick-dots li.slick-active,
    #anc04 .slick-dots li:hover {
      background: #cfe408;
    }
    .left .slick-next {
      right: -6%;
      background:url("../_img/260417/arrow_r.webp") no-repeat top center/ 11.7vw 11.7vw;
      background-size: 11.7vw auto;
    }
    .left .slick-prev {
      left: -6%;
      background:url("../_img/260417/arrow_l.webp") no-repeat top center/ 11.7vw 11.7vw;
      background-size: 11.7vw auto;
    }
    .left .slick-arrow {
      top: 50%;
    }
   #anc02 .left .slick-next,
   #anc04 .left .slick-next {
      background:url("../_img/260417/arrow_r02.webp") no-repeat top center/ 11.7vw 11.7vw;
      background-size: 11.7vw auto;
    }
    #anc02 .left .slick-prev,
    #anc04 .left .slick-prev {
      background:url("../_img/260417/arrow_l02.webp") no-repeat top center/ 11.7vw 11.7vw;
      background-size: 11.7vw auto;
    }
    #aoki_main button {
      display: none;
    }
    #aoki_main button:focus {
    outline: none;
  }
    #aoki_main .contents_flex .right .text {
      padding-top: 5vw;
      font-size: 3.2vw;
      line-height: 1.8;
    }
    #aoki_main .js-modal-open {
      width: 57.5vw;
      height: 11.4vw;
      margin: 6vw auto 5vw;
      font-size: 3.73vw;
      border-radius: 100vw;
    }
    #aoki_main .btn-area01 {
      text-align: center;
      margin: 8 auto;
    }
    #aoki_main .btn-area01 .btn {
      padding: 0;
    }
    #aoki_main .btn-area01 .btn a {
      width: 92vw;
      height: 16vw;
      border-radius: 100vw;
      font-size: 3.73vw;
      line-height: 1.5;
    }
    #aoki_main .btn-area01 .btn a:hover {
      background: #fff;
      color: #3a416d;
    }
    #aoki_main .btn-area01 .btn a::before {
      width: 2.6vw;
      height: 2.6vw;
      top: 40%;
      right: 12%;
    }
    #aoki_main .btn-area01 .btn a:hover::before {
      border-top: 2px solid #3a416d;
      border-left: 2px solid #3a416d;
    }
    #aoki_main .modal__bg  {
      background: rgba(0, 0, 0, 0.8);
      height: 100vh;
      position: absolute;
      width: 100%;
    }
    #aoki_main .modal_flex {
      margin-top: 20px;
      display: block;
    }
    #aoki_main .modal_flex picture + picture {
      margin: 3vw auto 0;
    }
    #aoki_main .modal_flex picture {
      display: block;
      width: 63vw;
      margin: 0 auto;
    }
    #aoki_main .modal__content {
      padding: 8vw 0 10vw;
      width: 86.6vw;
    }
    #aoki_main .modal_text {
      width: 63vw;
      margin: 3vw auto 0;
      line-height: 1.8;
      font-size: 2.93vw;
    }
    #aoki_main h4 {
      font-size: 4vw;
    }
    #aoki_main .cmn-btn-square-01 {
      width: 47.7vw;
      height: 10.4vw;
      margin: 4vw auto 0;
      border-radius: 100vw;
      font-size: 3.73vw;
    }
    #aoki_main .cmn-btn-square-01:hover {
      background: #3a416d;
      color: #fff;
    }

   /* cmn-recommend */
   #aoki_main .cmn-recommend {
      padding: 18.33vw 15px 0;
      box-sizing: border-box;
   }
   #aoki_main .cmn-recommend h2 {
      margin: 0 auto 5vw;
      font-size: 6.4vw;
   }
   #aoki_main .cmn-recommend .bnr_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      max-width: 768px;
   }
   #aoki_main .cmn-recommend .bnr_box .bnr_img {
      display: inline-block;
      width: 48%;
   }
   #aoki_main .cmn-recommend .bnr_box .bnr_img:nth-of-type(n+3) {
      margin-top: 3vw;
   }
   #bottom_recommend_area {
      padding-right: 15px;
      padding-left: 15px;
      box-sizing: border-box;
   }
   #bottom_recommend_area h2 {
      line-height: 1.2;
   }

   /* ------ btn-area ------ */
   #aoki_main .btn-area {
      width: 100%;
      margin: 8vw auto 0;
   }
   /* 1カラム（ベタ背景色 ⇒ ボーダー） */
   #aoki_main .cmn-btn.bg a {
      width: 100%;
      height: 16vw;
      border-radius: 100vw;
      font-size: 3.73vw;
      text-align: center;
   }
   /* 1カラム（ボーダー ⇒ ベタ背景色） */
   #aoki_main .cmn-btn.bd a {
      width: 100%;
      padding: 4.5vw;
      font-size: 3.73vw;
   }
   #aoki_main .cmn-btn.bg a::after {
      right: 8vw;
      width: 2vw;
      height: 2vw;
      margin-top: -0.5vw;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
   }
   #aoki_main .cmn-btn.bg a:hover::after {
      border-top: 1px solid #5b8fc4;
      border-right: 1px solid #5b8fc4;
   }
   /* 2カラム */
   #aoki_main .btn-area-others {
      width: 100%;
      margin-top: 4vw;
      padding-right: 15px;
      padding-left: 15px;
      box-sizing: border-box;
      justify-content: space-between;
   }
   #aoki_main .btn-area-others .cmn-btn a {
      display: flex;
      height: 16vw;
      justify-content: center;
      align-items: center;
      border: 1px solid #c0642c;
   }
   #aoki_main .btn-area-others .cmn-btn:nth-of-type(n+2) {
      margin-top: 4vw;
   }
   #aoki_main .cmn-btn.bd a::after {
      top: 51%;
      right: 5vw;
      width: 2vw;
      height: 2vw;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
   }
   #aoki_main .cmn-btn.bd a:hover::after {
      border-top: 1px solid #c0642c;
      border-right: 1px solid #c0642c;
   }

   /* 商品モジュール調整 */
   #aoki_main .topicModuleCredit,
   #aoki_main .topicModuleCredit.mb_0 {
      margin: 0 auto!important;
   }
  .module_area {
    margin-top: 2vw;
  }
  .topicModuleCredit {
    margin: 0 auto;
  }
  .topicModuleCredit .slick-arrow {
    top: 20.33vw;
  }
  .topicModuleCredit .slick-next {
    background: url("../_img/260417/module_arrow_r.webp") no-repeat top center/ 9.33vw 9.33vw;
    width: 9.33vw;
    height: 9.33vw;
  }
  .topicModuleCredit .slick-prev {
    background: url("../_img/260417/module_arrow_l.webp") no-repeat top center/ 9.33vw 9.33vw;
    width: 9.33vw;
    height: 9.33vw;
  }
  .topicModuleCredit .slick-next {
    right: -2.67vw;
  }
  .topicModuleCredit .slick-prev {
    left: -2.67vw;
  }
  .topicModuleCredit .slick-prev::before {
    left: 40%;
    transform: translateY(-50%) rotate(-45deg);
  }
  .topicModuleCredit .slick-next::before {
    right: 40%;
    transform: translateY(-50%) rotate(135deg);
  }
  .topicModuleCredit button {
    font-size: 0px;
  }
  .topicModuleCredit .slick-next:focus, 
  .topicModuleCredit .slick-prev:focus {
    outline: none;
  }
  .topicModuleCredit .slick-track li {
    width: calc(100% - 6vw / 3)!important;
    margin: 0 1vw;
  }
}

/*****************************************
Tablet only (min-width:576px)
*****************************************/
@media screen and (min-width: 576px) {
   .container {
      width: 100%;
   }
}