/* Scss Document */
/* Scss Document */
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.vertical-text {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

.list-inline {
  list-style: none;
  margin-left: -6px;
  margin-right: -6px;
}

.list-inline > li {
  padding-left: 6px;
  padding-right: 6px;
  display: inline-block;
}

.justify-content-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justify-content-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.key {
  padding: 0 30px;
}

.txt {
  color: #656565;
}


/*=======================
　通販ボタン 白
=======================*/

.btn_ani {
  width: 595px;
  height: 96px;
  display: block;
  overflow: hidden;
  background: url(../img/netshop/dc_btn.jpg) no-repeat left top/auto 100%;
  position: relative;
  z-index: 1;
}

.btn_ani::before {
  content: '';
  background: #db6151;
  top: 0;
  left: 30px;
  right: 100%;
  bottom: 0;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  z-index: -1;
}

.btn_ani:after {
  content: '';
  background: #db6151;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  right: 3px;
  bottom: -10px;
  position: absolute;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.btn_ani a {
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
}

.btn_ani a:before {
  content: '';
  border-right: 2px solid #fff;
  top: 0;
  bottom: 20px;
  right: 65px;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani a:after {
  content: '';
  border-top: 2px solid #fff;
  top: 0;
  left: 0;
  right: 65px;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani .ttl {
  padding-left: 79px;
  letter-spacing: 0.12em;
  line-height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn_ani .ttl .arrow {
  width: 12px;
  height: 12px;
  display: inline-block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border: 2px solid;
  border-bottom: none;
  border-left: none;
  margin-left: 20px;
  margin-top: 5px;
}

.btn_ani .ttl:before {
  content: '';
  border-left: 2px solid #fff;
  top: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani .ttl:after {
  content: '';
  border-bottom: 2px solid #fff;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani .circle {
  position: absolute;
  width: 23px;
  height: 23px;
  right: 3px;
  bottom: -10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: .3s;
  transition: .3s;
}

.btn_ani .circle:before {
  content: '';
  border: 1px solid #fff;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  position: absolute;
  border-radius: 50%;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani .circle:after {
  content: '';
  border: 1px solid #db6151;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  position: absolute;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani .border1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.btn_ani .border1:before {
  content: '';
  border-right: 2px solid #db6151;
  top: 100%;
  bottom: 20px;
  right: 65px;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.btn_ani .border1:after {
  content: '';
  border-top: 2px solid #db6151;
  top: 0;
  left: 100%;
  right: 65px;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

.btn_ani .border2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.btn_ani .border2:before {
  content: '';
  border-left: 2px solid #db6151;
  top: 0;
  bottom: 100%;
  left: 0;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

.btn_ani .border2:after {
  content: '';
  border-bottom: 2px solid #db6151;
  bottom: 0;
  left: 0;
  right: 100%;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.btn_ani:hover:before {
  right: 65px;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.btn_ani:hover .tll {
  color: #000 !important;
  position: relative;
  z-index: 1;
}

.btn_ani:hover .circle {
  background: transparent;
}

.btn_ani:hover .circle:before {
  opacity: 0;
  -webkit-transition: .1s;
  transition: .1s;
}

.btn_ani:hover .circle:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.btn_ani:hover:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.btn_ani:hover a:before, .btn_ani:hover a:after, .btn_ani:hover .ttl:before, .btn_ani:hover .ttl:after {
  opacity: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

.btn_ani:hover .border1:before {
  top: 0;
  -webkit-transition: .3s;
  transition: .3s;
}

.btn_ani:hover .border1:after {
  left: 0;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

.btn_ani:hover .border2:before {
  bottom: 0;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
}

.btn_ani:hover .border2:after {
  right: 0;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .9s;
          transition-delay: .9s;
}


/*=======================
　ボタン オレンジ
=======================*/

.btn_ani.b_orange:before {
  content: '';
  background: #db6151;
  top: 0;
  left: 30px;
  right: 100%;
  bottom: 0;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
  z-index: -1;
}

.btn_ani.b_orange:after {
  content: '';
  background: #db6151;
  width: 23px;
  height: 13px;
  border-radius: 20px 20px 0 0;
  right: 3px;
  bottom: 3px;
  position: absolute;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.btn_ani.b_orange a {
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
}

.btn_ani.b_orange a:before {
  content: '';
  border-right: 2px solid #db6151;
  top: 0;
  bottom: 20px;
  right: 65px;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani.b_orange a:after {
  content: '';
  border-top: 2px solid #db6151;
  top: 0;
  left: 0;
  right: 65px;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani.b_orange .ttl {
  padding-left: 79px;
  letter-spacing: 0.12em;
  line-height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn_ani.b_orange .ttl .arrow {
  width: 12px;
  height: 12px;
  display: inline-block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border: 2px solid;
  border-bottom: none;
  border-left: none;
  margin-left: 20px;
  margin-top: 5px;
}

.btn_ani.b_orange .ttl:before {
  content: '';
  border-left: 2px solid #db6151;
  top: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani.b_orange .ttl:after {
  content: '';
  border-bottom: 2px solid #db6151;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani.b_orange .circle {
  position: absolute;
  width: 23px;
  height: 10px;
  right: 3px;
  bottom: 3px;
  background: #db6151;
  border-radius: 20px 20px 0 0;
	padding-bottom: 3px;
}

.btn_ani.b_orange .circle:before {
  content: '';
  border: 1px solid #db6151;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  position: absolute;
  border-radius: 20px 20px 0 0;
  -webkit-transition: .3s;
  transition: .3s;

}

.btn_ani.b_orange .circle:after {
  content: '';
  border: 1px solid #db6151;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  position: absolute;
  border-radius: 20px 20px 0 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.btn_ani.b_orange .border1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.btn_ani.b_orange .border1:before {
  content: '';
  border-right: 2px solid #db6151;
  top: 100%;
  bottom: 20px;
  right: 65px;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.btn_ani.b_orange .border1:after {
  content: '';
  border-top: 2px solid #db6151;
  top: 0;
  left: 100%;
  right: 65px;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

.btn_ani.b_orange .border2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.btn_ani.b_orange .border2:before {
  content: '';
  border-left: 2px solid #db6151;
  top: 0;
  bottom: 100%;
  left: 0;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

.btn_ani.b_orange .border2:after {
  content: '';
  border-bottom: 2px solid #db6151;
  bottom: 0;
  left: 0;
  right: 100%;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.btn_ani.b_orange:hover:before {
  right: 65px;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.btn_ani.b_orange:hover .ttl {
  color: #fff;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.btn_ani.b_orange:hover .circle {
  background: transparent;
}

.btn_ani.b_orange:hover .circle:before {
  opacity: 0;
  -webkit-transition: .1s;
  transition: .1s;
}

.btn_ani.b_orange:hover .circle:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.btn_ani.b_orange:hover:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.btn_ani.b_orange:hover a:before, .btn_ani.b_orange:hover a:after, .btn_ani.b_orange:hover .ttl:before, .btn_ani.b_orange:hover .ttl:after {
  opacity: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

.btn_ani.b_orange:hover .border1:before {
  top: 0;
  -webkit-transition: .3s;
  transition: .3s;
}

.btn_ani.tuhan:hover .border1:after {
  left: 0;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

.btn_ani.b_orange:hover .border2:before {
  bottom: 0;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
}

.btn_ani.b_orange:hover .border2:after {
  right: 0;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .9s;
          transition-delay: .9s;
}

/*=======================
　通販ボタン
=======================*/

.btn_wrap {padding-bottom: 80px;}
.btn_ani.tuhan {
  width: 460px;
  height: 90px;
  display: block;
  overflow: hidden;
  background: url(../img/netshop/dc_btn.jpg) no-repeat left top/auto 100%;
  position: relative;
  z-index: 1;
  margin: -50px 0 0 60px;
}
#sec3 .btn_ani.tuhan {
  margin: -50px 0 0 40px;
}
#sec4 .btn_ani.tuhan {
  margin: -10px 0 0 50px;
}
#sec5 .btn_ani.tuhan {
  margin: -50px 0 0 40px;
}


#sec1 {
  position: relative;
}

#sec1 .r1 {
  position: relative;
  z-index: 2;
  padding-bottom: 71px;
}

#sec1 .r1:before {
  content: '';
  background: url(../img/netshop/s1_img1.jpg) no-repeat right bottom/cover;
  height: 602px;
  top: 326px;
  left: 0;
  right: calc(50% - 180px);
  position: absolute;
  z-index: 1;
}

#sec1 .r1:after {
  content: '';
  background: url(../img/netshop/s1_dc_img.png) no-repeat center top;
  width: 193px;
  height: 160px;
  position: absolute;
  top: 326px;
  right: calc(50% - 180px);
  z-index: 1;
}

#sec1 .r1 h2 {
  display: inline-block;
  margin: 230px 0 0 747px;
  height: 730px;
  position: relative;
  z-index: 2;
}

#sec1 .r1 h2 .line_two {
  padding-top: 144px;
}

#sec1 .r1 h2::before {
  content: url(../img/netshop/s1_dc1.jpg);
  position: absolute;
  top: -67px;
  left: -221px;
  z-index: -1;
}

#sec1 .r1 h2:after {
  content: url(../img/netshop/s1_dc2.png);
  position: absolute;
  bottom: 97px;
  right: -263px;
  z-index: -1;
}

#sec1 .r2 {
  position: relative;
  z-index: 1;
  padding-bottom: 199px;
}

#sec1 .r2::before {
  content: '';
  background: url(../img/netshop/s1_img2.jpg) no-repeat center top/cover;
  position: absolute;
  height: 542px;
  right: 0;
  left: calc(50% - 261px);
}

#sec1 .r2:after {
  content: '';
  background: #3a3a3b;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1050px;
  right: calc(50% - 500px);
  z-index: -1;
}

#sec1 .r2 .txt {
  width: 500px;
  color: #fff;
  padding: 43px 0 94px 0;
}

#sec1 .r3 {
  background: url(../img/netshop/s1_ttl_bg.jpg) no-repeat center top/cover;
  border-top: 2px solid #db6151;
  border-bottom: 2px solid #db6151;
}

#sec1 .r3 h2 {
  text-align: center;
}

#sec2 {
  position: relative;
  background: url(../img/netshop/s2_bg.jpg) no-repeat center bottom/cover;
}

#sec2 .content {
  position: relative;
  width: 700px;
  z-index: 1;
}

#sec2 .content:before {
  content: '';
  background: url(../img/concept/s4_bg.jpg) repeat center top;
  left: -200px;
  right: 131px;
  bottom: 0;
  top: 0;
  -webkit-transform: skewX(-14deg);
          transform: skewX(-14deg);
  position: absolute;
  z-index: -1;
}

#sec2 .content:after {
  content: '';
  background: url(../img/netshop/s2_h2_bg.png) no-repeat left top;
  position: absolute;
  width: 814px;
  height: 398px;
  top: 120px;
  left: 0;
}

#sec2 .content h2 {
  position: absolute;
  top: 90px;
  height: 330px;
  left: 66px;
}

#sec2 .content h3 {
  display: inline-block;
  margin: 313px 0 0 220px;
  letter-spacing: 0.12em;
}

#sec2 .content h4 {
  display: inline-block;
  margin: 25px 0 0 223px;
  position: relative;
  z-index: 1;
  letter-spacing: 0.12em;
}

#sec2 .content h4 .number {
  color: #fff;
  padding-right: 19px;
}

#sec2 .content h5 {
  display: inline-block;
  margin: 12px 0 0 222px;
}

#sec2 .content h5 .number {
  padding-right: 15px;
}

#sec2 .content .txt {
  width: 325px;
  padding: 97px 0 88px 84px;
  text-align: justify;
}

#sec3 {
  position: relative;
  z-index: 1;
  background: url(../img/netshop/s3_bg.jpg) no-repeat center bottom/cover;
}

#sec3:before {
  content: '';
  background: url(../img/netshop/s3_bg_h2.png) no-repeat right top;
  position: absolute;
  width: 839px;
  height: 622px;
  top: 0;
  right: 0;
  z-index: 1;
}

#sec3 .content {
  position: relative;
  top: 0;
  right: 0;
  margin-left: auto;
  width: 530px;
  background: #895174 url(../img/store/pattern.png) repeat center top;
}

#sec3 .content:before {
  content: '';
  background: url(../img/store/s10_border.png) repeat-y center top;
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 8px;
}

#sec3 .content:after {
  content: '';
  background: url(../img/store/s10_border.png) repeat-y center top;
  position: absolute;
  right: 4px;
  top: 0;
  bottom: 0;
  width: 8px;
}

#sec3 .content h2 {
  position: absolute;
  height: 300px;
  color: #fff;
  top: 131px;
  right: 68px;
}

#sec3 .content h3 {
  margin: 311px 0 0 162px;
  display: inline-block;
  letter-spacing: 0.12em;
  color: #fff;
}

#sec3 .content h4 {
  display: inline-block;
  margin: 49px 0 0 86px;
  color: #fff;
  letter-spacing: 0.12em;
  z-index: 3;
}

#sec3 .content h4 .number {
  padding-right: 19px;
  position: relative;
  z-index: 3;
}

#sec3 .content h5 {
  display: inline-block;
  margin: 11px 0 0 85px;
  color: #fff;
}

#sec3 .content h5 .number {
  padding-right: 16px;
}

#sec3 .content .txt {
  color: #fff;
  width: 359px;
  padding: 116px 0 86px 86px;
  text-align: justify;
}

#sec4 {
  position: relative;
  background: url(../img/netshop/s4_bg.jpg) no-repeat center bottom/cover;
}

#sec4 .content {
  position: relative;
  width: 700px;
  z-index: 1;
  margin-left: 53px;
}

#sec4 .content:before {
  content: '';
  background: #343434 url(../img/store/pattern.png) repeat center top;
  left: -200px;
  right: 131px;
  bottom: 0;
  top: 0;
  -webkit-transform: skewX(-14deg);
          transform: skewX(-14deg);
  position: absolute;
  z-index: -1;
}

#sec4 .content:after {
  content: '';
  background: url(../img/netshop/s4_bg_h2.png) no-repeat left top;
  position: absolute;
  width: 815px;
  height: 521px;
  top: 0;
  left: 0;
}

#sec4 .content h2 {
  position: absolute;
  top: 221px;
  color: #fff;
  left: 469px;
}

#sec4 .content h3 {
  display: inline-block;
  margin: 184px 0 0 81px;
  letter-spacing: 0.12em;
  color: #fff;
}

#sec4 .content h4 {
  position: absolute;
  z-index: 1;
  letter-spacing: 0.12em;
  top: 320px;
  color: #fff;
  left: 245px;
}

#sec4 .content h4 .number {
  color: #fff;
  padding-right: 19px;
}

#sec4 .content h5 {
  margin: -62px 0 0 247px;
  display: block;
  color: #fff;
  width: 260px;
}

#sec4 .content h5 .number {
  padding-right: 15px;
}

#sec4 .content .txt {
  width: 343px;
  padding: 159px 0 57px 61px;
  text-align: justify;
  color: #fff;
}

#sec5 {
  position: relative;
  z-index: 1;
  background: url(../img/netshop/s5_bg.jpg) no-repeat center bottom/cover;
}

#sec5 .content {
  position: relative;
  top: 0;
  right: 0;
  margin-left: auto;
  width: 530px;
  background: url(../img/concept/s4_bg.jpg) repeat center top;
}

#sec5 .content:before {
  content: '';
  background: url(../img/netshop/s5_bg_h2.png) no-repeat right top;
  position: absolute;
  width: 828px;
  height: 577px;
  top: 0;
  right: 0;
  z-index: 1;
}

#sec5 .content h2 {
  position: absolute;
  height: 300px;
  color: #343434;
  top: 154px;
  right: 99px;
  letter-spacing: 0.12em;
}

#sec5 .content h3 {
  margin: 356px 0 0 79px;
  display: inline-block;
  letter-spacing: 0.12em;
  color: #343434;
}

#sec5 .content h4 {
  display: inline-block;
  margin: 54px 0 0 83px;
  color: #343434;
  letter-spacing: 0.12em;
  z-index: 3;
}

#sec5 .content h4 .number {
  padding-right: 16px;
  position: relative;
  z-index: 3;
  font-size: 25px;
  color: #fff;
}

#sec5 .content h5 {
  display: inline-block;
  margin: 10px 0 0 82px;
  color: #343434;
}

#sec5 .content h5 .number {
  padding-right: 17px;
}

#sec5 .content .txt {
  color: #343434;
  width: 359px;
  padding: 70px 0 110px 80px;
  text-align: justify;
}

#sec6 .r1 {
  position: relative;
  background: url(../img/netshop/s6_bg.jpg) no-repeat center bottom/cover;
}

#sec6 .r1 .content {
  position: relative;
  width: 700px;
  z-index: 1;
  margin-left: 53px;
}

#sec6 .r1 .content:before {
  content: '';
  background: url(../img/concept/s4_bg.jpg) repeat center top;
  left: -200px;
  right: 131px;
  bottom: 0;
  top: 0;
  -webkit-transform: skewX(-14deg);
          transform: skewX(-14deg);
  position: absolute;
  z-index: -1;
}

#sec6 .r1 .content:after {
  content: '';
  background: url(../img/netshop/s6_bg_h2.png) no-repeat left top;
  position: absolute;
  width: 793px;
  height: 524px;
  top: 0;
  left: 0;
}

#sec6 .r1 .content h2 {
  position: absolute;
  top: 88px;
  height: 330px;
  left: 85px;
  letter-spacing: 0.12em;
}

#sec6 .r1 .content h3 {
  display: inline-block;
  margin: 300px 0 0 339px;
  letter-spacing: 0.12em;
}

#sec6 .r1 .content h4 {
  display: inline-block;
  margin: 35px 0 0 216px;
  position: relative;
  z-index: 1;
  letter-spacing: 0.12em;
}

#sec6 .r1 .content h4 .number {
  color: #fff;
  padding-right: 9px;
}

#sec6 .r1 .content h5 {
  display: inline-block;
  margin: 12px 0 0 215px;
}

#sec6 .r1 .content h5 .number {
  padding-right: 4px;
}

#sec6 .r1 .content .txt {
  width: 321px;
  padding: 100px 0 88px 82px;
  text-align: justify;
}

#sec6 .r2 {
  padding: 155px 0 153px;
  background: url(../img/netshop/s7_bg.jpg) no-repeat center top;
  position: relative;
}

#sec6 .r2:before {
  content: '';
  background: url(../img/concept/s4_bg.jpg) repeat right top;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#sec6 .r2 .btn1 {
  margin-left: 157px;
}

#sec6 .r2 .btn1 .ttl {
  padding-left: 130px !important;
}

#sec6 .r2 .btn1 .ttl .arrow {
  margin-left: 110px !important;
}

#sec6 .r2 .btn2 {
  margin: 65px 0 0 330px;
}

#sec6 .r2 .btn2 .ttl .arrow {
  margin-left: 45px !important;
}

#sec6 .r2 .btn_ani:hover .ttl {
  color: #fff;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

#sec6 .r2 .btn_ani {
  width: 518px;
  height: 96px;
  display: block;
  overflow: hidden;
  background: url(../img/netshop/dc_btn.jpg) no-repeat left top/auto 100%;
  position: relative;
  z-index: 1;
}

#sec6 .r2 .btn_ani::before {
  content: '';
  background: #db6151;
  top: 0;
  left: 30px;
  right: 100%;
  bottom: 0;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
  z-index: -1;
}

#sec6 .r2 .btn_ani:after {
  content: '';
  background: #db6151;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  right: 3px;
  bottom: -10px;
  position: absolute;
  -webkit-transform: scale(0);
          transform: scale(0);
}

#sec6 .r2 .btn_ani a {
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
}

#sec6 .r2 .btn_ani a:before {
  content: '';
  border-right: 2px solid #db6151;
  top: 0;
  bottom: 20px;
  right: 65px;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

#sec6 .r2 .btn_ani a:after {
  content: '';
  border-top: 2px solid #db6151;
  top: 0;
  left: 0;
  right: 65px;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

#sec6 .r2 .btn_ani .ttl {
  padding-left: 79px;
  letter-spacing: 0.12em;
  line-height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#sec6 .r2 .btn_ani .ttl .arrow {
  width: 12px;
  height: 12px;
  display: inline-block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border: 2px solid;
  border-bottom: none;
  border-left: none;
  margin-left: 20px;
  margin-top: 5px;
}

#sec6 .r2 .btn_ani .ttl:before {
  content: '';
  border-left: 2px solid #db6151;
  top: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

#sec6 .r2 .btn_ani .ttl:after {
  content: '';
  border-bottom: 2px solid #db6151;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

#sec6 .r2 .btn_ani .circle {
  position: absolute;
  width: 23px;
  height: 23px;
  right: 3px;
  bottom: -10px;
  background: #db6151;
  border-radius: 50%;
}

#sec6 .r2 .btn_ani .circle:before {
  content: '';
  border: 1px solid #db6151;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  position: absolute;
  border-radius: 50%;
  -webkit-transition: .3s;
  transition: .3s;
}

#sec6 .r2 .btn_ani .circle:after {
  content: '';
  border: 1px solid #db6151;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  position: absolute;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
}

#sec6 .r2 .btn_ani .border1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#sec6 .r2 .btn_ani .border1:before {
  content: '';
  border-right: 2px solid #db6151;
  top: 100%;
  bottom: 20px;
  right: 65px;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

#sec6 .r2 .btn_ani .border1:after {
  content: '';
  border-top: 2px solid #db6151;
  top: 0;
  left: 100%;
  right: 65px;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

#sec6 .r2 .btn_ani .border2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#sec6 .r2 .btn_ani .border2:before {
  content: '';
  border-left: 2px solid #db6151;
  top: 0;
  bottom: 100%;
  left: 0;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

#sec6 .r2 .btn_ani .border2:after {
  content: '';
  border-bottom: 2px solid #db6151;
  bottom: 0;
  left: 0;
  right: 100%;
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

#sec6 .r2 .btn_ani:hover:before {
  right: 65px;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

#sec6 .r2 .btn_ani:hover .circle {
  background: transparent;
}

#sec6 .r2 .btn_ani:hover .circle:before {
  opacity: 0;
  -webkit-transition: .1s;
  transition: .1s;
}

#sec6 .r2 .btn_ani:hover .circle:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

#sec6 .r2 .btn_ani:hover:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

#sec6 .r2 .btn_ani:hover a:before, #sec6 .r2 .btn_ani:hover a:after, #sec6 .r2 .btn_ani:hover .ttl:before, #sec6 .r2 .btn_ani:hover .ttl:after {
  opacity: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

#sec6 .r2 .btn_ani:hover .border1:before {
  top: 0;
  -webkit-transition: .3s;
  transition: .3s;
}

#sec6 .r2 .btn_ani:hover .border1:after {
  left: 0;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

#sec6 .r2 .btn_ani:hover .border2:before {
  bottom: 0;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
}

#sec6 .r2 .btn_ani:hover .border2:after {
  right: 0;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-delay: .9s;
          transition-delay: .9s;
}
/*# sourceMappingURL=netshop.css.map */