@charset "utf-8";

/*
shopping
出会う
*/

/* #Sec01
-----------------------------------------------------------------*/
.shopping #Sec01{
  margin-top: -50px;
}
.shopping #Sec01 .inner{

}

/* #Sec02
-----------------------------------------------------------------*/
.shopping #Sec02{
  margin-top: 80px;
}
.shopping #Sec02 .art_box{
  margin-top: 60px;
  position: relative;
}
.shopping #Sec02 .art_box .icon_bg{
  position: absolute;
  top: -70px;
  right: 80%;
}
.shopping #Sec02 .art_box .box{
  margin-top: 40px;
}
.shopping #Sec02 .art_box .box .ttl{
  max-width: 960px;
  margin: 0 auto;
  font-size: 2.6rem;
  font-weight: 700;
  padding: 0 80px;
}
.shopping #Sec02 .art_box .box .bg_blue{
  background: #D5E3E3;
}
.shopping #Sec02 .art_box .box .bg_pink{
  background: #E0D0D0;
}
.shopping #Sec02 .art_box .box .box_inner{
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  padding: 40px 80px;
  margin: 20px auto 0;
}
.shopping #Sec02 .art_box .box .box_inner .txt_box{
  width: 48%;
  position: relative;
}
.shopping #Sec02 .art_box .box .box_inner .txt_box .add{
  font-weight: 500;
  margin-top: 20px;
}
.shopping #Sec02 .art_box .box .box_inner .txt_box .more_btn_bl{
  position: absolute;
  bottom: -80px;
}
.shopping #Sec02 .art_box .box .box_inner .img_box{
  width: 49%;
  margin-top: -100px;
}
.shopping #Sec02 .art_box .box .box_inner .img_box img{
  width: 100%;
  height: auto;
}
.shopping #Sec02 .art_box .box .box_inner .img_box .link_btn{
  margin-top: 20px;
}
.shopping #Sec02 .link_box{
  position: relative;
  margin-top: 60px;
}
.shopping #Sec02 .link_box .icon_bg{
  position: absolute;
  top: -150px;
  left: 76%;
}
.shopping #Sec02 .link_box .bg_purple{
  background: rgba(0,0,51,0.2);
  padding: 45px 30px;
  margin-top: 40px;
}
.shopping #Sec02 .link_box .bg_purple .more_btn_bl a{
  margin: 0 auto;
}

.shopping #Sec02 .link_box .bg_brown{
  background: rgba(204,204,153,0.5);
  padding: 45px 80px;
  margin-top: 40px;
}
.shopping #Sec02 .link_box .bg_brown ul{
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.shopping #Sec02 .link_box .bg_brown ul li{
  width: 31%;
}
.shopping #Sec02 .link_box .bg_brown ul li img{
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1020px) {
/* 1020pxまでの幅の場合に適応される */


/* 1020pxまでの幅の場合に適応される */
}

@media screen and (max-width: 767px) {
/* 767pxまでの幅の場合に適応される */

/* #Sec01
-----------------------------------------------------------------*/
.shopping #Sec01{
  margin-top: 50px;
}
.shopping #Sec01 .inner{
}
.shopping #Sec01 .main_txt{
  text-align: left;
  padding: 0 50px;
}

/* #Sec02
-----------------------------------------------------------------*/
.shopping #Sec02{
  margin-top: 80px;
}
.shopping #Sec02 .art_box{
}
.shopping #Sec02 .art_box .main_txt{
  padding: 0 50px;
}
.shopping #Sec02 .art_box .icon_bg{
  position: absolute;
  top: 140px;
  right: 20px;
}
.shopping #Sec02 .art_box .icon_bg img{
  width: 110px;
  height: auto;
}
.shopping #Sec02 .art_box .box{
  margin-top: 40px;
}
.shopping #Sec02 .art_box .box .ttl{
  padding: 0 50px;
}
.shopping #Sec02 .art_box .box .box_inner{
  display: block;
  padding: 30px 50px;
}
.shopping #Sec02 .art_box .box .box_inner .txt_box{
  width: 100%;
}
.shopping #Sec02 .art_box .box .box_inner .txt_box .add{
  font-weight: 500;
  margin-top: 20px;
}
.shopping #Sec02 .art_box .box .box_inner .txt_box .more_btn_bl{
  position: initial;
  margin-top: 10px;
}
.shopping #Sec02 .art_box .box .box_inner .txt_box .more_btn_bl a{
  margin: 0 auto;
}
.shopping #Sec02 .art_box .box .box_inner .img_box{
  width: 100%;
  margin-top: 20px;
}
.shopping #Sec02 .art_box .box .box_inner .img_box img{
  width: 100%;
  height: auto;
}
.shopping #Sec02 .art_box .box .box_inner .img_box .link_btn{
  margin-top: 20px;
}
.shopping #Sec02 .art_box .box .box_inner .img_box .link_btn a{
  margin: 0 auto;
}

.shopping #Sec02 .link_box{
}
.shopping #Sec02 .link_box .main_txt{
  padding: 0 50px;
}
.shopping #Sec02 .link_box .icon_bg{
  position: absolute;
  top: -90px;
  left: 60%;
}
.shopping #Sec02 .link_box .icon_bg img{
  width: 170px;
  height: auto;
}

.shopping #Sec02 .link_box .bg_brown{
  padding: 20px 50px;
}
.shopping #Sec02 .link_box .bg_brown ul{
  display: block;
}
.shopping #Sec02 .link_box .bg_brown ul li{
  max-width: 320px;
  width: 100%;
  margin: 15px auto;
}
.shopping #Sec02 .link_box .bg_brown ul li img{
  width: 100%;
  height: auto;
}

/* 767pxまでの幅の場合に適応される */
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */


/* 640pxまでの幅の場合に適応される */
}