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

#activesuit .bg_color-A {
   position: relative;
   background-color: #f6f7f7;
   color: #494866;
   overflow: hidden;
}
#activesuit .bg_color-A:not(.last)::before {
   content: "";
   position: absolute;
   height: 0;
   bottom: 0;
   border-color: transparent #494866 transparent transparent;
   border-style: solid;
}
#activesuit .bg_color-A.last .contents_inner {
   padding-bottom: 4vw;
}
#activesuit .bg_color-B {
   position: relative;
   background-color: #494866;
   color: #fff;
   overflow: hidden;
}
#activesuit .bg_color-B::before {
   content: "";
   position: absolute;
   height: 0;
   bottom: 0;
   border-width: 14vw 120vw 0 0;
   border-color: transparent #f6f7f7 transparent transparent;
   border-style: solid;
}
#activesuit .bg_color-A .contents_inner {
   padding:  0.625vw 0 15vw;
}
#activesuit .bg_color-B .contents_inner {
   padding: 0.625vw 0 16vw;
}

/*============ MV ============*/
#activesuit {
	width: 100%;
	color: #333;
	background: #fff;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.5;
}
#activesuit #mv {
   position: relative;
   background-color: #f6f7f8;
   color: #494866;
}
#activesuit #mv .mv_inner {
   position: relative;
   padding: 20px 0 0;
   box-sizing: border-box;
}
#activesuit #mv .mv_anchor {
   position: absolute;
   right: -50px;
   bottom: 90px;
}
#activesuit #mv .mv_anchor a {
   display: block;
}
#activesuit #mv .mv_flex {
   display: flex;
   justify-content: center;
}
#activesuit #mv .mv_item {
   width: 36%;
   height: auto;
}
#activesuit #mv .mv_main {
   width: 56%;
   margin-top: 30px;
   text-align: center;
}
#activesuit #mv h1 {
   line-height: 1.8;
   font-size: 30px;
   font-weight: bold;
}
#activesuit #mv .mv_title {
   margin-top: 11px;
}
#activesuit #mv .mv_price {
   margin-top: 30px;
}
#activesuit #mv .mv_model {
   margin-top: 15px;
   height: 357px;
}

/* float anchorLink */
#activesuit .mv_anchor a .hover {
   display: none;
}
#activesuit .mv_anchor a:hover .hover_none {
   display: none;
}
#activesuit .mv_anchor a:hover .hover {
   display: block;
   opacity: 1;
}
#activesuit .float_anchor {
   display: none;
}
#activesuit .float_anchor.fixed {
   position: fixed;
   top: 10%;
   right: 0;
   display: block;
   z-index: 1000;
   animation-name: fadeInAnime;
   animation-duration: 0.4s;
   animation-fill-mode: forwards;
}
#activesuit .float_anchor a {
   display: block;
   width: 52px;
   padding: 24px 14px;
   box-sizing: border-box;
   border-radius: 10px 0 0 10px;
   border-top: 2px solid #a08d6a;
   border-left: 2px solid #a08d6a;
   border-bottom: 2px solid #a08d6a;
   color: #fff;
   background: #a08d6a;
   font-size: 15px;
   font-weight: bold;
   text-decoration: none;
   letter-spacing: 0.1em;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
}
#activesuit .float_anchor a:hover {
   color: #a08d6a;
   background: #fff;
}
@keyframes fadeInAnime {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
}

/*============ Point ============*/
#activesuit #point p.point_title {
   line-height: 1.5;
   margin: 40px 0 16px;
   font-size: 18px;
   text-align: center;
}
#activesuit #point p.point_title span {
   font-size: 24px;
   font-weight: bold;
}
#activesuit #point p.point_title span strong {
   font-size: 34px;
}
#activesuit #point p.point_title strong {
   font-weight: bold;
}
#activesuit #point ul li p {
   line-height: 1.7;
   font-size: 14px;
}

/*============ Color ============*/
#activesuit h2 {
   line-height: 1.2;
   margin-bottom: 40px;
   font-size: 18px;
   font-weight: bold;
   text-align: center;
}
#activesuit h2 strong {
   font-size: 80px;
}
#activesuit #color h3 {
   line-height: 1.1;
   margin: 22px 0 10px;
   font-size: 18px;
   font-weight: bold;
}
#activesuit #color h3 strong {
   font-size: 50px;
}
#activesuit #color .online_text {
   line-height: 2.8;
   margin: -20px 0 20px;
   background: url(../_img/250207/title_line.webp) no-repeat bottom center / 298px 28px;
   font-size: 22px;
   font-weight: bold;
   text-align: center;
}
#activesuit #color .cmn-img__wrap  {
   display: block;
   text-align: center;
}
#activesuit #color .slick-img a:hover {
   opacity: 0.7;
   transition: .3s;
}
#activesuit #color .slick-img a:hover img {
   opacity: 1;
}
#activesuit #color .slick-img img {
   width: auto;
   height: 477px;
   margin: 0 auto;
}
#activesuit #color .color_price {
   font-size: 20px;
   font-weight: bold;
}
#activesuit #color .color_price .strikethrough {
   position: relative;
}
#activesuit #color .color_price .strikethrough::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   transform: rotate(-9deg);
   border-top: 2px solid #d31010;
}
#activesuit #color .color_price .previousprice {
   position: relative;
   font-size: 17px;
}
#activesuit #color .color_price .previousprice::before {
    position: absolute;
    content: "";
    top: -3px;
    left: -4px;
    width: 25px;
    height: 25px;
    line-height: 200px;
    border: 2px solid #494d71;
    border-radius: 50%;
}
#activesuit #color .color_price.black .previousprice::before {
    border: 2px solid #302f2f;
}
#activesuit #color .color_price.darkbrown .previousprice::before {
    border: 2px solid #634c3d;
}
#activesuit #color .slick-img .discount {
   display: flex;
   justify-content: center;
   align-items: center;
   color: #ec1d1d;
   font-size: 30px;
}
#activesuit #color .slick-img .discount .login {
    display: inline-block;
    margin-right: 7px;
    padding: 0px 6px 0px;
    background: #ec1d1d;
    color: #fff;
    font-size: 20px;
}
#activesuit #color .slick-img .discount .sale {
    display: inline-block;
    margin-right: 7px;
    padding: 0px 6px 0px;
    background: #ec1d1d;
    color: #fff;
    font-size: 20px;
}
#activesuit #color .slick-img .strikethrough small {
  font-size: 16px;
  font-weight: bold;
}
#activesuit #color .slick-img .discount small {
   font-size: 18px;
   font-weight: bold;
}
#activesuit .discount_note {
   width: 710px;
   line-height: 1.7;
   margin: 60px auto 0;
   color: #727a82;
}
#activesuit .discount_note dt {
   margin-bottom: 4px;
   font-size: 15px;
   font-weight: bold;
}
#activesuit .discount_note dd {
   font-size: 14px;
}
#activesuit #color .color_text {
   line-height: 1.7;
   margin-top: 16px;
   padding: 0 18px;
   color: #494866;
   font-size: 14px;
   text-align: left;
}
#activesuit .btn .sale {
   display: inline-block;
    margin-right: 7px;
    padding: 0px 6px 0px;
    background: #ec1d1d;
    color: #fff;
    font-size: 20px;
}
#activesuit #color .btn a {
   position: relative;
   display: inline-block;
   padding-left: 16px;
   color: #494866;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
}
#activesuit #color .btn a::before {
   content: "";
   position: absolute;
   top: -15px;
   left: -50px;
   width: 50px;
   height: 50px;
   background: url(../_img/250207/arrow.webp) center top / 50px 50px no-repeat;
}
#activesuit #color .btn a:hover {
   opacity: 0.7;
   transition: .3s;
}
#activesuit .online_only {
   font-size: 14px;
   text-align: center;
   margin-top: 10px;
}
#activesuit #color .navy { color: #494d71; }
#activesuit #color .black { color: #302f2f; }
#activesuit #color .darkbrown { color: #634c3d; }

/* モーダル */
#activesuit .js-modal-area {
   margin-bottom: 40px;
}
#activesuit .js-modal-open {
   position: relative;
   display: block;
   width: 370px;
   margin: 0 auto;
   padding: 16px;
   border: 2px solid #737368;
   border-radius: 100vw;
   color: #737368;
   font-size: 17px;
   font-weight: bold;
   text-align: center;
   box-sizing: border-box;
}
#activesuit .js-modal-open::before,
#activesuit .js-modal-open::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 30px;
   width: 10px;
   height: 2px;
   margin-top: -2px;
   background: #737368;
}
#activesuit .js-modal-open::before {
   transform: rotate(90deg);
}
#activesuit .js-modal-open:hover {
   background-color: #737368;
   color: #fff;
   transition: .3s;
}
#activesuit .js-modal-open:hover::before,
#activesuit .js-modal-open:hover::after {
   background: #fff;
}
#activesuit .modal__bg {
   position: absolute;
   width: 100%;
   height: 100vh;
   background: rgba(0,0,0,0.8);
}
#activesuit .modal {
   display: none;
   height: 100vh;
   position: fixed;
   top: 0;
   width: 100%;
}
#activesuit .modal__content {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 1000px;
   max-height: 95%;
   padding: 54px 56px 60px;
   background: #fff;
   border-radius: 20px;
   text-align: center;
   transform: translate(-50%, -50%);
   overflow: auto;
   scrollbar-width: 10px;
   scrollbar-color: #edf1f4;
   box-sizing: border-box;
}
#activesuit .modal__content::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}
#activesuit .modal__content::-webkit-scrollbar-thumb {
   background-color: #e1e2e2;
   border-radius: 8px;
}
#activesuit .modal_ttl {
   position: relative;
   width: 278px;
   margin: 0 auto 30px;
   padding: 6px 0 2px;
   background-color: #ecdf9e;
   font-size: 32px;
   font-weight: bold;
   transform:skewX(-15deg);
   box-sizing: border-box;
}
#activesuit .modal_ttl span {
   display: inline-block;
   transform:skewX(15deg);
}
#activesuit .modal_ttl::before {
   content: "";
   position: absolute;
   top: -24px;
   left: -30px;
   width: 63px;
   height: 41px;
   background: url(../_img/240419/modal_new.png) top left / 63px 41px no-repeat;
   transform:skewX(15deg);
}
#activesuit .modal_diff ul,
#activesuit .modal_point {
   display: flex;
   justify-content: space-between;
}
#activesuit .modal_point dl {
   width: 390px;
}
#activesuit .modal_point dt {
   padding: 14px 0 8px;
   background: url(../_img/240419/modal_01.png) top left / 56px 43px no-repeat;
   font-size: 22px;
   font-weight: bold;
}
#activesuit .modal_point dl:nth-of-type(2) dt {
   background: url(../_img/240419/modal_02.png) top left / 69px 44px no-repeat;
}
#activesuit .modal_point dd {
   line-height: 1.75;
   font-size: 16px;
   text-align: left;
}
#activesuit .modal_diff-ttl {
   display: flex;
   align-items: center;
   margin: 30px 0 8px;
   font-size: 20px;
   font-weight: bold;
}
#activesuit .modal_diff-ttl::before,
#activesuit .modal_diff-ttl::after {
   content: "";
   height: 1px;
   flex-grow: 1;
   background-color: #737368;
}
#activesuit .modal_diff-ttl::before {
   margin-right: 1rem;
}
#activesuit .modal_diff-ttl::after {
   margin-left: 1rem;
}
#activesuit .cmn-btn-square-01 {
   content: "";
   position: absolute;
   top: 30px;
   right: 32px;
   display: block;
   width: 30px;
   height: 2px;
   margin-top: -2px;
}

/*============ Design/Features ============*/
#activesuit #design dl dt,
#activesuit #features dl dt {
   line-height: 1.4;
   font-size: 30px;
   font-weight: bold;
   text-align: center;
}
#activesuit #design dl dd,
#activesuit #features dl dd {
   line-height: 1.7;
   margin-top: 15px;
   font-size: 14px;
   font-weight: normal;
}
#activesuit #design dl dd span,
#activesuit #features dl dd span {
   display: block;
   width: 344px;
   font-size: 10px;
   text-align: right;
   margin-top: -10px;
}
#activesuit #design .eco {
   position: relative;
   width: 780px;
   line-height: 1.6;
   margin: 20px auto 0;
   padding-left: 25px;
   font-size: 14px;
}
#activesuit #design .eco::before {
   content: "";
   position: absolute;
   top: -6px;
   left: -30px;
   width: 30px;
   height: 30px;
   background: url(../_img/241018/feature_eco.webp) center top / 30px 30px no-repeat;
}

/*============ bnrArea ============*/
#activesuit #bnrArea p {
   line-height: 1.5;
   margin-bottom: 30px;
   font-size: 30px;
   font-weight: bold;
   text-align: center;
}
.swiper-wrapper {
   transition-timing-function: linear;
}
.swiper-container {
   z-index: 0;
  flex-direction: column;
  row-gap: 20px;
}
#activesuit #styling .swiper-container a {
  width: 304px;
}
 #activesuit #styling .swiper-container + .swiper-container {
    margin-top: 20px;
 }
/* cmn-recommend */
#activesuit .cmn-recommend {
  background: #f6f7f7;
}
#activesuit .cmn-recommend h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 50px;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  color: #333;
}
#activesuit .cmn-recommend h2::before,
#activesuit .cmn-recommend h2::after {
  content: "";
  border-bottom: 2px solid #333;
}
#activesuit .cmn-recommend h2::before {
  margin-right: 20px;
  padding-left: 120px;
}
#activesuit .cmn-recommend h2::after {
  margin-left: 20px;
  padding-right: 120px;
}
#activesuit .cmn-recommend .bnr_box {
  display: flex;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
}
#activesuit .cmn-recommend .bnr_box .bnr_img + .bnr_img {
  margin-left: 20px;
}
#bottom_recommend_are {
  padding-top: 100px!important;
}

/*****************************************
PC only
*****************************************/
@media screen and (min-width: 769px) {
  .sp {
      display: none;
   }

   #activesuit .bg_color-A:not(.last):before {
      border-width: 14vw 120vw 0 0;
   }
   #activesuit .contents_inner {
      width: 1200px;
      margin: 0 auto;
   }

   /*============ Point ============*/
   #activesuit #point h2 {
	  margin-top: 45px;
	}
   #activesuit #point ul {
      display: flex;
      padding-top: 20px;
      justify-content: space-between;
   }
   #activesuit #point ul li {
      width: 360px;
   }

   /*============ Color ============*/
   #activesuit #color .btn {
      width: 1200px;
      margin: 50px auto 0;
   }

   /* デフォルト商品 */
   #activesuit #color .slider_item {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      justify-content: space-between;
      flex-wrap: wrap;
   }
   #activesuit #color .slick-img {
      width: 390px;
      text-align: center;
   }

   /* New商品がある場合（上段2カラム、下段3カラム） */
   /* #activesuit #color .slider_item {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      justify-content: center;
      flex-wrap: wrap;
   }
   #activesuit #color .slick-img {
      width: 410px;
      text-align: center;
   }
   #activesuit #color .slick-img:nth-child(n+3) {
      width: 400px;
      margin-top: 60px;
   } */

   /*============ Design/Features ============*/
   #activesuit #design .design_inner,
   #activesuit #features .features_inner {
      position: relative;
      width: 1100px;
      min-height: 480px;
      margin: 0 auto;
   }
   #activesuit #design .design_img,
   #activesuit #features .features_img {
      position: absolute;
      top: 0;
      left: 50%;
      /* display: flex;
      justify-content: center;
      align-items: center; */
      width: 210px;
      height: auto;
      margin-left: -105px;
      z-index: 0;
   }
   #activesuit #design .design_img span,
   #activesuit #features .features_img span {
      display: inline-block;
      width: 210px;
      font-size: 10px;
      text-align: center;
	  margin-left: -31px;
   }
   #activesuit #design .design_pcflex,
   #activesuit #features .feature_pcflex {
      display: flex;
      justify-content: space-between;
   }
   #activesuit #design .design_textl,
   #activesuit #design .design_textr,
   #activesuit #features .features_textl,
   #activesuit #features .features_textr {
      width: 344px;
      line-height: 1.75;
      margin: 40px 0 -20px;
      font-size: 16px;
      font-weight: bold;
   }
   #activesuit #design .design_inner li,
   #activesuit #features .features_inner li {
      position: relative;
      margin-bottom: 90px;
   }
   #activesuit #design .design_inner li::after,
   #activesuit #features .features_inner li::after {
      content: "";
      position: absolute;
      top: 50%;
   }
   #activesuit #design .design_inner li.a::after {
      top: 102px;
      right: -173px;
      width: 173px;
      height: 90px;
      background: url(../_img/250207/design_pointed_01.webp) no-repeat center / 173px 90px;
   }
	#activesuit #features .feature_pcflex li.b dl dt {
	 letter-spacing: -0.03em;
	}
   #activesuit #design .design_inner li.b::after {
      top: -81px;
      right: -167px;
      width: 186px;
      height: 82px;
      background: url(../_img/250207/design_pointed_02.webp) no-repeat center / 186px 82px;
   }
   #activesuit #design .design_inner li.c::after {
	  top: 188px;
      left: -152px;
      width: 152px;
      height: 117px;
      background: url(../_img/250207/design_pointed_03.webp) no-repeat center / 152px 117px;
   }
   #activesuit #design .design_inner li.d::after {
      top: 52px;
      left: -199px;
      width: 234px;
      height: 10px;
      background: url(../_img/250207/design_pointed_04.webp) no-repeat center / 234px 10px;
   }
   #activesuit #features .features_inner li.a::after {
      top: 165px;
      right: -127px;
      width: 127px;
      height: 18px;
      background: url(../_img/250207/feature_pointed_01.webp) no-repeat center / 127px 18px;
   }
   #activesuit #features .features_inner li.b::after {
      top: -110px;
      right: -153px;
      width: 135px;
      height: 128px;
      background: url(../_img/250207/feature_pointed_02.webp) no-repeat center / 135px 128px;
   }
   #activesuit #features .features_inner li.c::after {
      top: 150px;
      left: -145px;
      width: 145px;
      height: 25px;
      background: url(../_img/250207/feature_pointed_03.webp) no-repeat center / 145px 25px;
   }
   #activesuit #features .features_inner li.d::after {
      top: 30px;
      left: -200px;
      width: 190px;
      height: 67px;
      background: url(../_img/250207/feature_pointed_04.webp) no-repeat center / 190px 67px;
   }
   /* #activesuit #features div.e {
      display: flex;
      width: 900px;
      margin: 44px auto 0;
      justify-content: space-between;
      align-items: center;
   }
   #activesuit #features div.e > p {
      width: 344px;
   }
   #activesuit #features div.e dl {
      width: 530px;
   }
   #activesuit #features div.e dl dt {
      text-align: left;
   } */

   /*============ Styling ============*/
   #activesuit #styling .slide {
      width: 303px;
      height: auto;
      margin: 0 15px 0 0;
   }
	#activesuit #styling .slide:nth-of-type(3n) {
	  margin-right: 0;
	}
	#activesuit #styling .slide:nth-of-type(n+4) {
	  margin-top: 20px;
	}
   #activesuit #styling .styling_slider {
      display: flex;
      width: 950px;
      margin: 0 auto;
      justify-content: center;
      flex-wrap: wrap;
   }
   #activesuit #styling .styling_slider + .styling_slider {
      margin-top: 20px;
   }
	#activesuit #styling .styling_caption {
	  margin-top: 40px;
	  text-align: center;
	  color: #fff;
	  font-size: 14px;
	}

   /*============ bnrArea ============*/
   #activesuit #bnrArea ul {
      display: flex;
      width: 950px;
      margin: 0 auto;
      justify-content: center;
   }

   /*============ bottom_recommend_area ============*/
   #bottom_recommend_area {
      padding-top: 100px !important;
      padding-bottom: 150px;
      background-color: #f6f7f7;
   }
   #bottom_recommend_area h2 {
      color: #333 !important;
   }
   #activesuit #bottom_recommend_area .bottom_newitem,
   #activesuit #bottom_recommend_area .bottom_service {
      width: 1100px !important;
   }
   #activesuit #bottom_recommend_area .bottom_bnrBox a {
      width: 24% !important;
   }
   #activesuit #bottom_recommend_area .bottom_bnrBox a + a {
      margin-left: 12px !important;
   }

   /*============ 商品モジュール調整 ============*/
   #activesuit .topicModuleCredit {
      margin: 40px auto 0 !important;
   }
   #activesuit .topicModuleCredit__priceItem {
      padding: 0;
   }
  #activesuit #styling .swiper-wrapper {
    width: 950px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
 }
  #activesuit #styling .swiper-wrapper a:nth-of-type(n+4) {
    margin-top: 20px;
  }
}


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

   #activesuit .cmn-inner {
      width: 100%;
      padding: 0;
      box-sizing: border-box;
   }
   #activesuit .bg_color-A .contents_inner,
   #activesuit .bg_color-B .contents_inner {
      padding: 8vw 0 26vw;
   }
   #activesuit .bg_color-A::before,
   #activesuit .bg_color-B::before {
      border-width: 16vw 100vw 0 0;
   }

   /*============ MV ============*/
   #activesuit {
      width: 100%;
      line-height: 1.5;
      margin: 0 auto;
      background: #fff;
      color: #333;
      font-size: 4.2666666vw;
   }
   #activesuit #mv {
      width: 100%;
   }
   #activesuit #mv.bg_color-A::before {
      height: 12%;
   }
   #activesuit #mv .mv_flex {
      justify-content: right;
   }
   #activesuit #mv .mv_inner {
      padding-top: 4vw;
   }
   #activesuit #mv .mv_subtext {
      width: 34.6vw;
      line-height: 0.8;
      margin: 0 auto;
      text-align: center;
   }
   #activesuit #mv h1 {
      line-height: 1.33;
      margin-top: 0;
      font-size: 4vw;
   }
   #activesuit #mv .mv_item {
      width: 60%;
      margin-left: -14%;
	   margin-top: 2%;
   }
   #activesuit #mv .mv_main {
      width: 50%;
      margin-top: 0.8vw;
      margin-right: 10px;
      box-sizing: border-box;
   }
   #activesuit #mv .mv_title {
      margin-top: 1.6vw;
   }
   #activesuit #mv .mv_price {
      width: 48vw;
      margin: 3.2vw 1.8vw 0 auto;
   }
   #activesuit #mv .mv_model {
      margin-top: 2.1vw;
	  height: 49vw;
   }

   /* float anchorLink */
   #activesuit #mv .mv_anchor {
      right: 2px;
      bottom: 0.5vw;
      width: 21vw;
      height: auto;
   }
   #activesuit .float_anchor a {
      width: 7.6vw;
      padding: 2vw 2vw 2vw 1vw;
      border-radius: 6px 0 0 6px;
      font-size: 2.66vw;
   }

   /*============ Point ============*/
    #activesuit #point h2 {
     margin-top: 2vw;
	  } 
   #activesuit h2 {
      margin: 0 0 6.66vw;
      font-size: 3.46vw;
   }
   #activesuit h2 strong {
      font-size: 14.66vw;
   }
   #activesuit #point .contents_inner {
      padding: 4vw 15px 26.6vw 15px;
      box-sizing: border-box;
   }
   #activesuit #point li + li {
      margin-top: 8vw;
   }
   #activesuit #point .point_flex {
      display: flex;
      justify-content: space-between;
   }
   #activesuit #point li:nth-child(even) .point_flex {
      flex-direction: row-reverse;
   }
   #activesuit #point li .point_flex .point_img {
      width: 50%;
      margin-top: 4vw;
   }
   #activesuit #point li:nth-child(even) .point_img {
      margin-top: 0;
   }
   #activesuit #point li:nth-child(even) .point_text {
      margin-top: 12vw;
   }
   #activesuit #point .point_text {
      width: 45%;
   }
   #activesuit #point .point_num {
      width: 10.66vw;
      margin: 0 auto;
   }
   #activesuit #point p.point_title {
      line-height: 1.7;
      margin: 0.4vw 0 4.5vw;
      font-size: 3.73vw;
   }
   #activesuit #point p.point_title span {
      line-height: 1.3;
      font-size: 4.8vw;
   }
   #activesuit #point p.point_title span strong {
      line-height: 1.2;
      font-size: 6.93vw;
   }
   #activesuit #point ul li p {
      line-height: 1.6;
      font-size: 3.2vw;
   }

   /*============ Color ============*/
   #activesuit #color .online_text {
      margin: -4.66vw 0 -1.34vw;
      background-size: 57.4vw 5.2vw;
      font-size: 4vw;
   }
   #activesuit #color h3 {
      line-height: 1.2;
      margin: 4vw 0 3vw;
      font-size: 3.46vw;
   }
   #activesuit #color h3 strong {
      font-size: 9.33vw;
   }
   #activesuit #color .color_price {
      font-size: 3.73vw;
   }
   #activesuit #color .color_price .strikethrough::after {
      border-top: 1px solid #d31010;
   }
    #activesuit #color .color_price .previousprice {
       font-size: 3.2vw;
  }
  #activesuit #color .slick-img .strikethrough small {
      font-size: 2.93vw;
  }
  #activesuit #color .color_price .previousprice::before {
      top: -17%;
      left: -24%;
      width: 5vw;
      height: 5vw;
    }
   #activesuit #color .color_text {
      line-height: 1.6;
      margin-top: 4vw;
      padding: 0 2vw;
      font-size: 3.46vw;
   }
   #activesuit #color .slick-img img {
      height: 88vw;
   }
   #activesuit #color .slick-img .discount {
      margin-top: 3px;
      font-size: 6vw;
   }
   #activesuit #color .slick-img .discount .login {
      font-size: 4vw;
      padding: 0 1vw;
      margin-right: 1vw;
   }
   #activesuit #color .slick-img .discount .sale {
      padding: 0.2vw 1.8vw 0;
      font-size: 3.2vw;
   }
   #activesuit #color .slick-img .discount small {
      font-size: 3.73vw;
   }
   #activesuit .discount_note {
      width: 100%;
      line-height: 2;
      margin: 8vw auto 0;
      padding-right: 15px;
      padding-left: 15px;
      box-sizing: border-box;
   }
   #activesuit .discount_note dt {
      margin-bottom: 0;
      font-size: 3.33vw;
   }
   #activesuit .discount_note dd {
      padding-left: 2.93vw;
      font-size: 2.93vw;
      text-indent: -2.93vw;
   } 
   #activesuit #color .slick-slide {
      margin-right: 2vw;
      margin-left: 2vw;
      text-align: center;
   }
   #activesuit #color .slick-prev,
   #activesuit #color .slick-next {
      position: absolute;
      top: 30%;
      width: 25px;
      height: 46px;
      line-height: 0;
      padding: 0;
      font-size: 0;
      border: none;
   }
   #activesuit #color .slick-prev {
      left: 2%;
      background: url(../_img/241018/arrow_left.webp) top center / 25px 46px no-repeat;
   }
   #activesuit #color .slick-next {
      right: 2%;
      background: url(../_img/241018/arrow_right.webp) top center / 25px 46px no-repeat;
   }
   #activesuit #color button.slick-arrow:focus,
   #activesuit #color button.slick-next:focus {
      outline: none;
   }
   #activesuit #color .slider_thumbnail {
      /* width: 80%; */
      width: 300px;
      margin: 1.5vw auto 6vw;
   }
   #activesuit #color .slick-track {
      margin: 0 auto;
   }
   #activesuit #color .slider_thumbnail .slick-current img {
      opacity: 1;
      padding: 3px;
      border-radius: 100px;
      box-sizing: border-box;
   }
   #activesuit #color .slider_thumbnail .slick-current .navy_summer img {
      border: 1px solid #424c72;
   }
   #activesuit #color .slider_thumbnail .slick-current .black_summer img {
      border: 1px solid #3f4145;
   }
   #activesuit #color .slider_thumbnail .slick-current .navy img {
      border: 1px solid #494d71;
   }
   #activesuit #color .slider_thumbnail .slick-current .black img {
      border: 1px solid #302f2f;
   }
   #activesuit #color .slider_thumbnail .slick-current .beige img {
      border: 1px solid #907f6f;
   }
   #activesuit #color .slider_thumbnail .slick-current .brown img {
      border: 1px solid #74524d;
   }
	#activesuit #color .slider_thumbnail .slick-current .Khaki img {
      border: 1px solid #6a4f3c;
   }
   #activesuit #color .slider_thumbnail .thumbnail-img {
      width: 5.3vw !important;
      height: 9.3vw;
      margin: 0 auto;
   }
   #activesuit #color .slider_thumbnail .thumbnail-img span {
      display: block;
      line-height: 1.2;
      color: #6a4f3c;
      font-size: 2.6vw;
   }
   #activesuit .btn .sale {
      font-size: 2.93vw;
      padding: 0.2vw 1.7vw 0.1vw;
      margin-right: 1vw;
    }
   #activesuit #color .btn {
      width: 90%;
      margin-top: 12vw;
   }
   #activesuit #color .btn a {
      font-size: 3.73vw;
      line-height: 1.6;
   }
   #activesuit #color .btn a::before {
      top: 1.2vw;
      left: -7vw;
      width: 9.33vw;
      height: 9.33vw;
      background-size: 9.33vw 9.33vw;
   }
  #activesuit .online_only {
      font-size: 2.97vw;
      text-align: center;
      margin-top: 1vw;
      line-height: 1.7;
  }

   /* モーダル */
   #activesuit .js-modal-area {
      margin-bottom: 6.66vw;
   }
   #activesuit .js-modal-open {
      width: 74.6vw;
      padding: 3.5vw 4vw;
      border: 1px solid;
      font-size: 3.46vw;
   }
   #activesuit .js-modal-open::before,
   #activesuit .js-modal-open::after {
      right: 5vw;
      height: 1px;
   }
   #activesuit .modal__content {
      width: 90%;
      padding: 9.33vw 5.33vw 10.66vw;
   }
   #activesuit .modal_ttl {
      width: 60%;
      margin-bottom: 4vw;
      font-size: 6.13vw;
   }
   #activesuit .modal_ttl::before {
      top: -3.5vw;
      left: -5vw;
      width: 11.2vw;
      height: 7.2vw;
      background-size: 11.2vw 7.2vw;
   }
   #activesuit .modal_point dl {
      width: 36vw;
   }
   #activesuit .modal_point dl:nth-of-type(2) dt {
      background-size: 13.46vw 8.66vw;
   }
   #activesuit .modal_point dt {
      line-height: 1.3;
      background-size: 11vw 8.66vw;
      font-size: 4.8vw;
   }
   #activesuit .modal_point dd {
      line-height: 1.6;
      font-size: 3.2vw;
   }
   #activesuit .modal_diff-ttl {
      margin: 5.66vw 0 2.8vw;
      font-size: 4vw;
   }
   #activesuit .modal_diff ul li {
      width: 49%;
   }
   #activesuit .cmn-btn-square-01 {
      top: 4vw;
      right: 4vw;
      width: 4.8vw;
      height: auto;
   }

   /*============ Design/Features ============*/
   #activesuit #design .design_inner,
   #activesuit #features .features_inner {
      display: flex;
      padding-right: 15px;
      padding-left: 15px;
      justify-content: right;
      box-sizing: border-box;
   }
   #activesuit #design .design_inner {
      flex-direction: row-reverse;
   }
   #activesuit #design .design_img {
      width: 74.66vw;
      height: auto;
      margin-right: -20vw;
   }
   #activesuit #features .features_img {
      width: 71.5vw;
      height: auto;
      margin-left: -40vw;
   }
   #activesuit #design .design_img span,
   #activesuit #features .features_img span {
      display: inline-block;
      width: 59.5vw;
      font-size: 2.66vw;
      text-align: right;
   }
   #activesuit #design .design_img span {
      width: 54vw;
      text-align: right;
	   margin-left: 0;
   }
   #activesuit #design .design_pcflex {
      width: 45vw;
      margin-right: -8vw;
      box-sizing: border-box;
   }
   #activesuit #features .feature_pcflex {
      width: 45vw;
      margin-left: 0;
      box-sizing: border-box;
   }
   #activesuit #design .design_textl li,
   #activesuit #design .design_textr li,
   #activesuit #features .features_textl li,
   #activesuit #features .features_textr li,
   #activesuit #features .e li {
      position: relative;
      margin-top: 10.5vw;
      padding-top: 3.5vw;
   }
   #activesuit #design .design_textl li.a,
   #activesuit #features .features_textl li.a {
      margin-top: 0;
   }
   #activesuit #design .design_textl li::before,
   #activesuit #design .design_textr li::before,
   #activesuit #features .features_textl li::before,
   #activesuit #features .features_textr li::before,
   #activesuit #features .e li::before {
      content: '';
      position: absolute;
      top: -15px;
      left: 50%;
      display: inline-block;
      width: 17.33vw;
      height: 0.26vw;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      background-color: #b7b7c2;
      border-radius: 2px;
   }
   #activesuit #design .design_textl li.a::before,
   #activesuit #features .features_textl li.a::before {
      background: none;
   }
   #activesuit #design dl dt,
   #activesuit #features dl dt {
      line-height: 1.3;
      font-size: 4.34vw;
   }
   #activesuit #design dl dd,
   #activesuit #features dl dd {
      line-height: 1.4;
      margin-top: 1.2vw;
      font-size: 3.2vw;
   }
   #activesuit #design dl dd + dd,
   #activesuit #features dl dd + dd {
      margin-top: 1.66vw;
   }
   #activesuit #design dl dd span,
   #activesuit #features dl dd span {
      width: 100%;
      font-size: 2.26vw;
      margin: -1vw 0 -3vw;
   }
   #activesuit #design .eco {
      width: 100%;
      padding-right: 15px;
      padding-left: 14.6vw;
      box-sizing: border-box;
      font-size: 2.93vw;
   }
   #activesuit #design .eco::before {
      top: 0;
      left: 15px;
      width: 8vw;
      height: 8vw;
      background-size: 8vw 8vw;
   }
   
   /*============ Styling ============*/
   #activesuit #styling .styling_slider + .styling_slider {
      margin-top: 13.3vw;
   }
   #activesuit #styling .slick-slide {
      width: 80vw;
      margin: 0 1.5vw;
   }
	#activesuit #styling .styling_caption {
	  margin-top: 5.73vw;
	  line-height: 1.7;
	  text-align: center;
	  font-size: 2.93vw;
	}
   
   /*============ bnrArea ============*/
   #activesuit #bnrArea p {
      margin-bottom: 4vw;
      font-size: 5.06vw;
   }
   #activesuit #bnrArea ul {
      padding-right: 15px;
      padding-left: 15px;
      box-sizing: border-box;
      text-align: center;
   }
   #activesuit #bnrArea ul li + li {
      margin-top: 5.3vw;
   }

   /*============ bottom_recommend_area ============*/
   #bottom_recommend_area {
      padding-top: 10vw !important;
      padding-right: 15px;
      padding-bottom: 16vw;
      padding-left: 15px;
      box-sizing: border-box;
      background-color: #f7f7f7;
   }

   /*============ 商品モジュール調整 ============*/
   #activesuit .topicModuleCredit,
   #activesuit .topicModuleCredit.mb_0 {
      margin: 30px auto 0!important;
      padding-right: 15px;
      padding-left: 15px;
      box-sizing: border-box;
      text-align: center;
  }
}

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



/*============ campaign ============*/
.campaign_area {
  padding-top: 70px;
  width: 800px;
  margin: 0 auto;
}
.js-copytextArea {
  cursor: pointer;
}
.box-01-wrap-couponCode {
  width: 100%;
  min-height: 100px;
  display: flex;
  background-color: #c9934c;
  align-items: center;
}
.wrap-couponCode {
  margin: 0 auto;
}
.couponCode-01 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
}
.couponCode-tx-01 {
  margin-right: 16px;
  color: #fff;
  font-size: 18px;
  min-height: 60px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}
.couponCode-tx-02 {
  width: 250px;
  padding: 4px;
  font-size: 36px;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  font-weight: 700;
  color: #c9934c;
  background-color: #fff;
}
.couponCode-tx-03 {
  width: 120px;
  margin-left: 16px;
  font-size: 16px;
  display: flex;
  min-height: 60px;
  line-height: 1.2;
  padding: 5px;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  text-align: center;
  color: #c9934c;
  background-color: #fff;
}
.js-copyalert {
  display: none;
  width: 100vw;
  text-align: center;
  color: #fff;
  background: #666;
  position: fixed;
  top: 50%;
  padding: 10px 0 !important;
  z-index: 9999;
  opacity: 0.8;
}
.campaign_notes {
  display: block!important;
  padding: 0!important;
  font-size: 14px;
  margin-top: 20px;
}
.campaign_notes li + li {
  margin-top: 0!important;
}
@media screen and (min-width: 769px) {
  .campaign_notes li {
    width: 100%!important;
  }
}
@media screen and (max-width: 768px) {
  .campaign_area {
    padding: 6vw 15px 3vw;
    width: calc(100% - 30px);
  }
  .box-01-wrap-couponCode {
    margin-left: 0;
    align-items: start;
    min-height: 0;
    padding: 5px 0 10px;
  }
  .couponCode-01 {
    padding: 0;
    flex-wrap: wrap;
  }
  .couponCode-tx-01 {
    width: 100%;
    height: auto;
    min-height: 30px;
    margin: 0 6px;
    font-size: 4.8vw;
  }
  .couponCode-tx-02 {
    width: 45%;
    min-height: 24px;;
    text-align: center;
    padding: 4px 2%;
    font-size: 5.3vw;
    font-weight: 700;
  }
  .couponCode-tx-03 {
    width: 36%;
    min-height: 24px;
    margin-left: 6px;
    font-size: 3.7vw;
  }
  .campaign_notes {
    font-size: 2.66vw;
    margin-top: 3vw;
  }
  .campaign_notes li {
    padding-left: 2.9vw;
    text-indent: -2.9vw;
  }
  #activesuit #styling .swiper-container + .swiper-container {
      margin-top: 13.3vw;
   }
  .swiper-container {
    flex-direction: row;
    row-gap: normal;
  }
  #activesuit #styling .swiper-container {
    width: 100%;
    display: block;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
 }
     /* cmn-recommend */
   #activesuit .cmn-recommend {
      padding: 10vw 0 0;
      padding-right: 15px;
      padding-left: 15px;
      box-sizing: border-box;
   }
   #activesuit .cmn-recommend h2 {
        display: flex;
        margin: 0 auto 4vw;
        justify-content: center;
        align-items: center;
        font-size: 6vw;
        font-weight: bold;
        text-align: center;
    }
  #activesuit .cmn-recommend h2::before,
  #activesuit .cmn-recommend h2::after {
    display: none;
  }
   #activesuit .cmn-recommend .bnr_box {
      display: flex;
      max-width: 92vw;
      flex-wrap: wrap;
      justify-content: space-between;
   }
   #activesuit .cmn-recommend .bnr_box .bnr_img {
      display: inline-block;
      width: 48%;
   }
   #activesuit .cmn-recommend .bnr_box .bnr_img:nth-of-type(n+3) {
      margin-top: 3vw;
   }
  #activesuit .cmn-recommend .bnr_box .bnr_img + .bnr_img {
    margin-left: 0vw;
  }
  #bottom_recommend_area {
    padding-top: 16vw!important;
     background-color: #f6f7f7;
  }

}