@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


/*for PC*/
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
  .inner {
    width: 900px;
    margin: 0 auto;
  }
}
/*for SP*/
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .inner {
    width: 100%;
  }
}

#feature {
  width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {/*for SP*/
  #feature {
    width: 100%;
    }
}

main > main * {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans Japanese';
  color: #444444;
}
#feature li {
  list-style: none;
}


/*--------------------
.sec-mv
----------------------*/
.sec-mv {
  width: 100%;
  z-index: 0;
}

/*--------------------
.sec-intro
----------------------*/
.sec-intro {
  width: 712px;
  margin: -233px auto 100px;
  padding: 32px 0 0;
  background: #FFFFFF;
  border-radius: 6px;
  text-align: center;
  z-index: 1;
  position: relative;
}
.sec-intro .voice {
  width: 635px;
  margin: 0 auto 42px;
}
.sec-intro .txt-intro {
  line-height: 1.6;
  font-size: 25px;
  margin-bottom: 42px;
}
.sec-intro .txt-intro span {
  font-size: 21px;
}
.sec-intro .txt-intro strong {
  font-weight: normal;
  color: #E7A801;
}
.sec-intro .btn-intro a {
  font-size: 24px;
  line-height: 81px;
  color: #359BDD;
  text-decoration: none;
  width: 500px;
  display: inline-block;
  border: #359BDD 1px solid;
  border-radius: 41px;
  box-shadow: 0 0 12px 0 rgba(115, 182, 234, 0.3);
  margin: 0 auto;
  position: relative;
}
.sec-intro .btn-intro a::after {
  content: '';
  width: 12px;
  height: 21px;
  background: url("/img/feature/w-coolpants-250502/arrow_blue.png") 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  right: 30px;
}

@media screen and (max-width: 767px) { /*for SP*/
  .sec-intro {
    width: calc(350 * (100vw / 375));
    margin: calc(-277 * (100vw / 375)) auto calc(70 * (100vw / 375));
    padding: calc(20 * (100vw / 375)) 0 0;
    background: #FFFFFF;
    border-radius: calc(12 * (100vw / 375));
    text-align: center;
    z-index: 1;
    position: relative;
  }
  .sec-intro .voice {
    width: calc(330 * (100vw / 375));
    margin: 0 auto calc(18 * (100vw / 375));
  }
  .sec-intro .txt-intro {
    line-height: 1.5;
    font-size: calc(19 * (100vw / 375));
    margin-bottom: calc(22 * (100vw / 375));
  }
  .sec-intro .txt-intro span {
    font-size: calc(16 * (100vw / 375));
  }
  .sec-intro .txt-intro strong {
    font-weight: normal;
    color: #E7A801;
  }
  .sec-intro .btn-intro a {
    font-size: calc(16 * (100vw / 375));
    line-height: calc(50 * (100vw / 375));
    color: #359BDD;
    text-decoration: none;
    width: calc(300 * (100vw / 375));
    display: inline-block;
    border: #359BDD calc(1 * (100vw / 375)) solid;
    border-radius: calc(25 * (100vw / 375));
    box-shadow: 0 0 calc(12 * (100vw / 375)) 0 rgba(115, 182, 234, 0.3);
    margin: 0 auto;
    position: relative;
  }
  .sec-intro .btn-intro a::after {
    content: '';
    width: calc(8 * (100vw / 375));
    height: calc(16 * (100vw / 375));
    background: url("/img/feature/w-coolpants-250502/arrow_blue.png") 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: calc(18 * (100vw / 375));
  }
}



/*--------------------
.sec-itempoint
----------------------*/
.sec-itempoint {
  background: #F5F5F5;
  border-radius: 6px;
  margin: 0 0 114px 0;
  padding: 46px 70px 76px;
}
.sec-itempoint h2 {
  text-align: center;
  width: 213px;
  margin: 0 auto 44px;
}
.sec-itempoint .flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 50px 60px;
}
.sec-itempoint .cnt-point {
  width: 350px;
  padding: 44px 0 36px;
  background: #FFFFFF;
  position: relative;
  display: flex;
  flex-direction: column;
}
.sec-itempoint .cnt-point h3 {
  position: absolute;
  top: -32px;
  left: -5px;
}
.sec-itempoint .cnt-point h3 img {
  width: 50%;
}
.sec-itempoint .cnt-point p {
  width: 250px;
  margin: 0 auto 1em;
  font-size: 15px;
  line-height: 25px;
  flex-grow:1;
}
.sec-itempoint .cnt-point figure {
  width: 258px;
  margin: 0 auto;
}
.sec-itempoint .cnt-point figure img {
  width: 100%;
}

@media screen and (max-width: 767px) { /*for SP*/
  .sec-itempoint {
    background: #F5F5F5;
    border-radius: 0;
    margin: 0 0 calc(70 * (100vw / 375)) 0;
    padding: calc(20 * (100vw / 375)) calc(16 * (100vw / 375)) calc(20 * (100vw / 375));
  }
  .sec-itempoint h2 {
    text-align: center;
    width: calc(137 * (100vw / 375));
    margin: 0 auto calc(30 * (100vw / 375));
  }
  .sec-itempoint .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: calc(15 * (100vw / 375));
  }
  .sec-itempoint .cnt-point {
    width: calc(164 * (100vw / 375));
    padding: calc(24 * (100vw / 375)) 0 calc(10 * (100vw / 375));
    background: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .sec-itempoint .cnt-point h3 {
    position: absolute;
    top: calc(-16 * (100vw / 375));
    left: calc(-4 * (100vw / 375));
  }
  .sec-itempoint .cnt-point h3 img {
    width: calc(62 * (100vw / 375));
  }
  .sec-itempoint .cnt-point p {
    width: calc(134 * (100vw / 375));
    margin: 0 auto 1.4em;
    font-size: calc(11 * (100vw / 375));
    line-height: calc(17 * (100vw / 375));
    flex-grow:1;
  }
  .sec-itempoint .cnt-point figure {
    width: calc(140 * (100vw / 375));
    margin: 0 auto;
  }
  .sec-itempoint .cnt-point figure img {
    width: 100%;
  }
}

    
/*--------------------
.sec-colorlineup
----------------------*/
.sec-colorlineup {
  text-align: center;  
  border: #EBEBEB 2px solid;
  height: 346px;
  margin: 0 0 140px 0;
}
.sec-colorlineup h2 {
  width: 281px;
  margin: -17px auto 31px;
}
.sec-colorlineup p {
  font-size: 16px;
  margin: 0 0 44px 0;
}
.sec-colorlineup ul {
  display: flex;
  width: 670px;
  margin: 0 auto;
  justify-content: space-between;
}
.sec-colorlineup ul figure {
  width: 130px;
}
.sec-colorlineup ul figcaption {
  padding: 21px 0 0 0;
  font-size: 14px;
}


@media screen and (max-width: 767px) { /*for SP*/
  .sec-colorlineup {
    text-align: center;
    border: #EBEBEB calc(1 * (100vw / 375)) solid;
    height: calc(190 * (100vw / 375));
    margin: 0 0 calc(84 * (100vw / 375)) 0;
  }
  .sec-colorlineup h2 {
    width: calc(180 * (100vw / 375));
    margin: calc(-10 * (100vw / 375)) auto calc(15 * (100vw / 375));
  }
  .sec-colorlineup p {
    font-size: calc(11 * (100vw / 375));
    margin: 0 0 calc(24 * (100vw / 375)) 0;
  }
  .sec-colorlineup ul {
    display: flex;
    width: calc(349 * (100vw / 375));
    margin: 0 auto;
    justify-content: space-between;
  }
  .sec-colorlineup ul figure {
    width: calc(80 * (100vw / 375));
  }
  .sec-colorlineup ul figcaption {
    padding: calc(14 * (100vw / 375)) 0 0 0;
    font-size: calc(9 * (100vw / 375));
  }

}

/*--------------------
.sec-lineup
----------------------*/
.sec-lineup {
    margin: 0 0 55px 0;
}
.sec-lineup h2 {
  text-align: center;
  width: 235px;
  margin: 0 auto;
}
.sec-lineup .cnt-lineup {
  height: 828px;
  margin: -48px 0 0 0;
  padding: 124px 0 0 0;
  display: flex;
  justify-content: space-between;
}
.sec-lineup .cnt-lineup.lineup1 {
  margin: -37px 0 0 0;
  background:url("/img/feature/w-coolpants-250502/bg_beige.jpg") 0 0 no-repeat;
}
.sec-lineup .cnt-lineup.lineup2 {
  background:url("/img/feature/w-coolpants-250502/bg_black.jpg") 0 0 no-repeat;
  flex-direction: row-reverse;  
}
.sec-lineup .cnt-lineup.lineup3 {
  background:url("/img/feature/w-coolpants-250502/bg_orange.jpg") 0 0 no-repeat;
}
.sec-lineup .cnt-lineup.lineup4 {
  background:url("/img/feature/w-coolpants-250502/bg_kahki.jpg") 0 0 no-repeat;
  flex-direction: row-reverse;  
}
.sec-lineup .l-ph {
  width: 365px;
}
.sec-lineup .s-ph {
  width: 512px;
  padding: 22px;
}
.sec-lineup .s-ph h3 {
  font-size: 21px;
  font-weight: normal;
  margin-bottom: 0.5em;
}
.sec-lineup .s-ph .txt-color {
  font-size: 15px;
  margin-bottom: 1em;
}
.sec-lineup .s-ph .txt-detail {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 3.0em;
}
.sec-lineup .s-ph ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sec-lineup .s-ph ul li {
  width: 230px;
}
.sec-lineup .s-ph .btn-lineup {
  width: 300px;
  margin: 0 auto;
}
.sec-lineup .s-ph .btn-lineup a {
  display: block;
}


@media screen and (max-width: 767px) { /*for SP*/
  .sec-lineup {
      margin: 0 0 calc(70 * (100vw / 375)) 0;
  }
  .sec-lineup h2 {
    text-align: center;
    width: calc(165 * (100vw / 375));
    margin: 0 auto calc(40 * (100vw / 375));
  }
  .sec-lineup .cnt-lineup {
    width: 100%;
    height: auto;
    margin: 0 auto calc(42*(100vw / 375)) !important;
    padding: 0 calc(20 * (100vw / 375));
    display: block;
    background: url("/img/feature/w-coolpants-250502/bg_lineup_sp.jpg") right calc(320 * (100vw / 375)) no-repeat !important;
    background-size: auto calc(465 * (100vw / 375)) !important;
  }  
  .sec-lineup .l-ph {
    width: calc(300 * (100vw / 375));
    margin: 0 auto calc(30 * (100vw / 375));
  }
  .sec-lineup .s-ph {
    width: calc(335 * (100vw / 375));
    padding: 0;
    margin: 0 auto;
  }
  .sec-lineup .s-ph h3 {
    font-size: calc(18 * (100vw / 375));
    font-weight: normal;
    margin-bottom: 0.4em;
  }
  .sec-lineup .s-ph .txt-color {
    font-size: calc(12 * (100vw / 375));
    margin-bottom: 0.6em;
  }
  .sec-lineup .s-ph .txt-detail {
    font-size: calc(12 * (100vw / 375));
    line-height: 1.7;
    margin-bottom: 2.2em;
  }
  .sec-lineup .s-ph ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(6 * (100vw / 375));
  }
  .sec-lineup .s-ph ul li {
    width: calc(160 * (100vw / 375));
  }
  .sec-lineup .s-ph .btn-lineup {
    width: calc(230 * (100vw / 375));
    margin: 0 auto !important;
    padding: 0;
  }
  .sec-lineup .s-ph .btn-lineup a {
    display: block;
  }

}

/*--------------------
.sec-detail
----------------------*/
.sec-detail {
    overflow: auto;
    margin: 0 0 60px 0;
}
.sec-detail h2 {
  text-align: center;
  width: 235px;
  margin: 0 auto 20px;
}
.sec-detail .inner-detail1 {
  display: flex;
  flex-direction: column-reverse;
}
.sec-detail .inner-detail1 h3 {
  text-align: center;
  width: 125px;
  margin: 20px auto;
  order: 1;
}
.sec-detail .inner-detail1 ul {
  width: 800px;
  margin: 0 auto;
  display: flex;
  order: 2;
}
.sec-detail .inner-detail1 ul li {
  width: 25%;
  overflow: hidden;
  text-align: center;
  padding: 5px 0 0 0;
}
.sec-detail .inner-detail1 ul figure {margin: 0 auto;}
.sec-detail .inner-detail1 ul figure img {
  width: 235px;
  max-width: 235px;
  margin: 0 0 0 -20px;
}
.sec-detail .inner-detail1 ul figcaption {
  font-size: 14px;
  padding: 10px;
}
.sec-detail .inner-detail2 {
  margin-bottom: 120px;
}
.sec-detail .inner-detail2 ul {
  position: relative;
  height: 475px;
}
.sec-detail .inner-detail2 li {
  position: absolute;
}
.sec-detail .inner-detail2 .detail_back {
  top: 80px;
  left: 12px;
}
.sec-detail .inner-detail2 .detail_back figure {
  width: 397px;
}
.sec-detail .inner-detail2 .detail_back figcaption {
  width: 134px;
  margin: -3px auto;
}
.sec-detail .inner-detail2 .detail_waist {
  top: 60px;
  left: 385px;
  width: 408px;
  display: flex;
}
.sec-detail .inner-detail2 .detail_waist figure {
  width: 408px;
  display: flex;
}
.sec-detail .inner-detail2 .detail_waist figure img {
  width: 230px;
}
.sec-detail .inner-detail2 .detail_waist figcaption {
  width: 160px;
  margin: 30px 0 0 20px;
}
.sec-detail .inner-detail2 .detail_hem {
  top: 206px;
  left: 675px;
  width: 211px;
  background:url(/img/feature/w-coolpants-250502/bg_hem.jpg) right 20px no-repeat;
  background-size: 188px;
}
.sec-detail .inner-detail2 .detail_hem figure {
  width: 188px;
}
.sec-detail .inner-detail2 .detail_hem figcaption {
  width: 118px;
  margin: 10px auto 0;
}
.sec-detail .inner-detail2 .detail_material {
  top: 350px;
  left: 470px;
}
.sec-detail .inner-detail2 .detail_material figure {
  width: 147px;
}
.sec-detail .inner-detail2 .detail_material figcaption {
  width: 131px;
  margin: 10px auto 0;
}

@media screen and (max-width: 767px) { /*for SP*/
  .sec-detail {
      overflow: auto;
      margin: 0;
  }
  .sec-detail h2 {
    text-align: center;
    width: calc(170 * (100vw / 375));
    margin: 0 auto calc(20 * (100vw / 375));
  }
  .sec-detail .inner-detail1 {
    display: flex;
    flex-direction: column-reverse;
  }
  .sec-detail .inner-detail1 h3 {
    text-align: center;
    width: calc(118 * (100vw / 375));
    margin: calc(20 * (100vw / 375)) auto calc(28 * (100vw / 375));
    order: 1;
  }
  .sec-detail .inner-detail1 ul {
    width: calc(335 * (100vw / 375));
    margin: 0 auto;
    display: flex;
    order: 2;
    flex-wrap: wrap;
    gap: calc(10 * (100vw / 375)) 0;
  }
  .sec-detail .inner-detail1 ul li {
    width: 50%;
    overflow: hidden;
    text-align: center;
    padding: 0;
  }
  .sec-detail .inner-detail1 ul figure {margin: 0 auto;}
  .sec-detail .inner-detail1 ul figure img {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .sec-detail .inner-detail1 ul figcaption {
    font-size: calc(9 * (100vw / 375));
    padding: calc(5 * (100vw / 375));
  }
  .sec-detail .inner-detail2 {
    margin-bottom: 0;
  }
  .sec-detail .inner-detail2 ul {
    position: static;
    height: auto;
    display:flex;
    flex-wrap: wrap;
  }
  .sec-detail .inner-detail2 li {
    position:static;
    width:50% !important;
  }
  .sec-detail .inner-detail2 .detail_back {
    top: 0;
    left: 0;
  }
  .sec-detail .inner-detail2 .detail_back figure {
    width:100%;
  }
  .sec-detail .inner-detail2 .detail_back figcaption {
    display: none;
  }
  .sec-detail .inner-detail2 .detail_waist {
    top: 0;
    left: 0;
    width:50%;
    display: flex;
  }
  .sec-detail .inner-detail2 .detail_waist figure {
    width:100%;
  }
  .sec-detail .inner-detail2 .detail_waist figure img {
    width:100%;
  }
  .sec-detail .inner-detail2 .detail_waist figcaption {
    display: none;
  }
  .sec-detail .inner-detail2 .detail_hem {
    top: 0;
    left: 0;
    background: none;
  }
  .sec-detail .inner-detail2 .detail_hem figure {
    width:100%;
  }
  .sec-detail .inner-detail2 .detail_hem figcaption {
    display: none;
  }
  .sec-detail .inner-detail2 .detail_material {
    top: 0;
    left: 0;
  }
  .sec-detail .inner-detail2 .detail_material figure {
    width:100%;
  }
  .sec-detail .inner-detail2 .detail_material figcaption {
    display: none;
  }
  
}

/*--------------------
.sec-btn
----------------------*/
.sec-btn {
  border-top:#CCCCCC 1px solid;
  padding: 100px 0;
  margin-bottom: 70px;
}
.sec-btn ul {
  display: flex;
  justify-content: space-between;
}    
.sec-btn li {
  width: 290px;
}
.sec-btn li a {
  text-align: center;
  font-size: 18px;
  line-height: 90px;
  color: #707070;
  text-decoration: none;
  display: block;
  border: #707070 1px solid;
  position: relative;
}
.sec-btn li a::after {
  content: '';
  width: 12px;
  height: 24px;
  background: url("/img/feature/w-coolpants-250502/arrow_gray.png") 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  right: 16px;
}

@media screen and (max-width: 767px) { /*for SP*/
  .sec-btn {
    border-top:#CCCCCC calc(1 * (100vw / 375)) solid;
    padding: calc(44 * (100vw / 375));
    margin-bottom: calc(60 * (100vw / 375));
  }
  .sec-btn ul {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
  }    
  .sec-btn li {
    width: calc(290 * (100vw / 375));
    margin-bottom: calc(20 * (100vw / 375));
  }
  .sec-btn li a {
    text-align: center;
    font-size: calc(18 * (100vw / 375));
    line-height: calc(58 * (100vw / 375));
    color: #707070;
    text-decoration: none;
    display: block;
    border: #707070 calc(1 * (100vw / 375)) solid;
    position: relative;
  }
  .sec-btn li a::after {
    content: '';
    width: calc(8 * (100vw / 375));
    height: calc(16 * (100vw / 375));
    background: url("/img/feature/w-coolpants-250502/arrow_gray.png") 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: calc(16 * (100vw / 375));
  }
  
}