@charset "UTF-8";

/*-------------------------------------------------------------------------------
 MODULE
 -------------------------------------------------------------------------------*/

/*slider*/
.normal-slider .slick-dots {
  bottom: -29px;
}
.normal-slider .slick-dots li {
  width: 10px;
  height: 10px;
}
.normal-slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  background: rgba(66,90,108,.3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.normal-slider .slick-dots li button:before {
  content: "";
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.normal-slider .slick-dots li.slick-active button:before {
  width: 10px;
  height: 10px;
  background: #425a6c;
}

.slick-prev,
.slick-next {
  width: 16px;
  height: 28px;
}
.normal-slider .slick-prev {
  left: 20px;
  z-index: 99;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.normal-slider .slick-next {
  right: 20px;
}
.normal-slider .slick-prev:before,
.normal-slider .slick-next:before {
  display: block;
  content: "";
  width: 16px;
  height: 28px;
  background: url('/ellesse/images/icn_arrow_01.png') no-repeat center top;
}

@media (max-width: 768px) {
  .slick-slide{
    height: auto;
  }
  .normal-slider .slick-dotted.slick-slider {
    margin-bottom: 21px;
  }
  .normal-slider .slick-dots {
    bottom: -21px;
  }
  .normal-slider .slick-dots li {
    width: 6px;
    height: 6px;
    margin: 0 3px;
  }
  .normal-slider .slick-dots li button {
    width: 6px;
    height: 6px;
  }
  .normal-slider .slick-dots li button:before {
    width: 6px;
    height: 6px;
  }
  .normal-slider .slick-dots li.slick-active button:before {
    width: 6px;
    height: 6px;
  }
  .slick-prev,
  .slick-next {
    width: 11px;
    height: 19px;
  }
  .normal-slider .slick-prev {
    left: 10px;
  }
  .normal-slider .slick-next {
    right: 10px;
  }
  .normal-slider .slick-prev:before,
  .normal-slider .slick-next:before {
    display: block;
    content: "";
    width: 11px;
    height: 19px;
    background-size: 11px auto;
  }
}

/*product-module*/
.product-module ul {
  max-width: 930px;
  margin: 0 auto;
}
.product-module li {
  margin: 0 15px;
}
.product-module .slick-prev {
  margin-top: -47px;
  z-index: 99;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.product-module .slick-next {
  margin-top: -33px;
}
.product-module .slick-prev:before,
.product-module .slick-next:before {
  display: block;
  content: "";
  width: 16px;
  height: 28px;
  background: url('/ellesse/images/icn_arrow_02.png') no-repeat center top;
}
@media (max-width: 980px) {
  .product-module .slick-prev {
    left: 0;
  }
  .product-module .slick-next {
    right: 0;
  }
}
@media (max-width: 768px) {
  .product-module .inner{
    padding: 30px 25px 35px;
  }
  .product-module ul {
    max-width: inherit;
    margin: 0 auto;
  }
  .product-module li {
    margin: 0 10.25px;
  }
  
  .product-module .slick-prev {
    margin-top: -38px;
    left: -18px;
  }

  .product-module .slick-next {
    margin-top: -29px;
    right: -18px;
  }
  .product-module .slick-prev:before,
  .product-module .slick-next:before {
    width: 11px;
    height: 19px;
    background-size: 11px auto;
  }

  .sample2 li {
    margin: 0 17px;
  }
  .sample2.s2 li {
    margin: 0 12.25px;
  }
  .sample2 .slick-prev {
    left: 8px;
  }
  .sample2 .slick-next {
    right: 10px;
  }

  .sample3 li:nth-child(odd) {
    margin: 0 10.25px 0 30.25px;
  }
  .sample3 li:nth-child(even) {
    margin: 0 30.25px 0 10.25px;
  }
  .sample3 .slick-prev {
    left: 8px;
  }
  .sample3 .slick-next {
    right: 10px;
  }
}
.carousel-lists p {
  font-size: 11px;
}
.carousel-lists .img {
  margin: 0 0 15px;
}
@media (max-width: 768px) {
  .carousel-lists .img {
    margin: 0 0 12px;
  }
}

/*grid-col*/
.grid-col {
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
}
.grid-col li {
  display: inline-block;
  font-size: 12px;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
}

/*news-module共通*/
.thumbnail {
  float: left;
}
.news-txt {
  float: right;
  margin: -3px 0 0;
}
.news-module .date {
  margin: 0 0 12px;
}
@media (max-width: 768px) {
  .news-module .date {
    margin: 0 0 8px;
  }
}
/*ニュース2カラム*/
.news-col-2 {
  margin: 0 -2.040816326% 24px;
}
.news-col-2 li {
  display: inline-block;
  width: 46.078431372%;
  margin: 0 1.960784313% 20px;
}
.news-col-2 li:nth-last-child(-n+2){
  margin-bottom: 0;
}
.news-col-2 .thumbnail {
  width: 21.276595744%;
}
.news-col-2 .news-txt {
  width: 75.531914893%;
}
@media (max-width: 768px) {
  .news-col-2 {
    margin: 0 0 29px;
  }
  .news-col-2 li {
    display: block;
    width: 100%;
    margin: 0 0 20px;
  }
  .news-col-2 .thumbnail {
    width: 17.910447761%;
  }
  .news-col-2 .news-txt {
    width: 78.656716417%;
  }
  .news-col-2 li:nth-last-child(-n+2) {
    margin-bottom: 20px;
  }
  .news-col-2 li:last-child {
    margin-bottom: 0;
  }
}
/*ニュース3カラム*/
.news-col-3 {
  margin: 0 -1.530612244% 24px;
}
.news-col-3 li {
  display: inline-block;
  width: 30.297029702%;
  margin: 0 1.485148514%;
}
.news-col-3 .thumbnail {
  width: 26.143790849%;
}
.news-col-3 .news-txt {
  width: 69.281045751%;
}
@media (max-width: 768px) {
  .news-col-3 {
    margin: 0 0 29px;
  }
  .news-col-3 li {
    display: block;
    width: 100%;
    margin: 0 0 20px;
  }
  .news-col-3 .thumbnail {
    width: 17.910447761%;
  }
  .news-col-3 .news-txt {
    width: 78.656716417%;
  }
}

/*商品一覧4カラム*/
.grid-col-4 {
  margin: 0 -15px;
}
.grid-col-4 li {
  display: inline-block;
  width: 152px;
  margin: 0 15px 42px;
}
@media (max-width: 768px) {
  .grid-col-4 {
    margin: 0 -10px;
  }
  .grid-col-4 li {
    display: inline-block;
    width: 157.5px;
    margin: 0 10px 42px;
  }
}

/*スペシャルコンテンツ3カラム*/
.sp-col {
  margin: 0 -0.510204081%;
}
.sp-col li {
  width: 32.323232323%;
  margin: 0 0.505050505% 10px;
}
@media (max-width: 768px) {
  .sp-col {
    margin: 0 -1.492537313%;
  }
  .sp-col li {
    width: 47.101449275%;
    margin: 0 1.449275362% 10px;
  }
}

/*snsウィジェット見出し*/
.h-style-sns {
  margin: 0 0 26px;
  font-size: 20px;
  line-height: 1.7;
  text-align: left;
}
.h-style-sns span {
  display: inline-block;
  position: relative;
  padding: 0 0 0 34px;
}
.h-style-sns span::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background-size: 24px !important;
  margin: auto;
}

.h-style-sns.fb-ttl span::before {background: url(/ellesse/images/svg/icn_fb_03.svg) no-repeat center center;}
.h-style-sns.tw-ttl span::before {background: url(/ellesse/images/svg/icn_tw_03.svg) no-repeat center center;}
.h-style-sns.insta-ttl span::before {background: url(/ellesse/images/svg/icn_insta_02.svg) no-repeat center center;}
@media (max-width: 768px) {
  .h-style-sns {
    line-height: 2.0;
    text-align: center;
  }
  .h-style-sns span {
    padding: 0 0 0 38px;
  }
  .h-style-sns span::before {
    width: 30px !important;
    height: 30px !important;
    background-size: 30px !important;
  }
}

/*1・2カラム用*/
.sns-col-1 .h-style-sns,
.sns-col-2 .h-style-sns {
  margin: 0 0 30px;
}
.sns-col-1 .h-style-sns span,
.sns-col-2 .h-style-sns span {
  padding: 0 0 0 45px;
}
.sns-col-1 .h-style-sns span::before,
.sns-col-2 .h-style-sns span::before {
  top: 2px;
  width: 30px;
  height: 30px;
  background-size: 30px !important;
}

/*Facebookウィジェット*/
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {
  width: 100% !important;
  max-width: 500px;
  margin: 0 auto;
}
@media (min-width: 558px) and (max-width: 768px) {
  .fb_iframe_widget,
  .fb_iframe_widget span,
  .fb_iframe_widget iframe[style] {
      max-width: 340px;
  }
}
/*twitterウィジェット*/
.tw-wid::after {
  display: block;
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e1e8ed;
}
.tw-wid {
  border-top: solid 1px #e1e8ed;
}
@media (max-width: 768px) {
  .tw-wid::after {
    bottom: 0;
  }
}
@media (min-width: 558px) and (max-width: 768px) {
  .tw-wid {
      max-width: 340px;
      margin: 0 auto;
  }
}
/*Instagramウィジェット*/
.insta{
  position: relative;
}
.insta .more-txt{
  position: absolute;
  top: 7px;
  right: 0;
}
@media (max-width: 768px) {
  .insta .more-txt{
    top: 12px;
  }
}

/*sns3カラム*/
.sns-col-3 {
  margin: 0 -1.224489795%;
}
.sns-col-3 > li {
  position: relative;
  width: 30.876494023%;
  margin: 0 1.195219123%;
}

.sns-col-3 .fb-page {
  overflow: hidden;
}
.sns-col-3 .insta-wid {
  height: 450px;
  padding: 16px;
  border: solid 1px #e1e8ed;
  overflow-y: scroll;
}
.sns-col-3 .insta ul {
  margin: 0 -2.173913043%;
}
.sns-col-3 .insta li {
  width: 28.125%;
  margin: 0 2.083333333% 11px;
}
@media (max-width: 768px) {
  .sns-col-3 {
    margin: 0;
  }
  .sns-col-3 > li {
    display: block;
    width: 100%;
    margin: 0 0 44px;
  }
  .sns-col-3 > li:last-child {
    margin: 0;
  }
  .sns-col-3 .fb-page,
  .sns-col-3 .tw-wid {
    display: block;
    height: 302px;
    overflow: hidden;
  }
  .sns-col-3 .insta-wid {
    height: 230px;
    padding: 10px;
  }
  .sns-col-3 .insta ul {
    margin: 0 -1.597444089%;
  }
  .sns-col-3 .insta li {
    width: 28.482972136%;
    margin: 0 1.547987616% 10px;
  }
}

/*sns2カラム*/
.sns-col-2 {
  margin: 0 -20px;
}
.sns-col-2 > li {
  position: relative;
  width: 46.078431372%;
  margin: 0 1.960784313% 45px;
}
.sns-col-2 > li:nth-last-child(-n+2) {
  margin-bottom: 0;
}

.sns-col-2 .fb-page {
  height: 403px;
  overflow: hidden;
}
.sns-col-2 .insta-wid {
  height: 404px;
  padding: 18px 15px;
  border: solid 1px #e1e8ed;
  overflow-y: scroll;
}
.sns-col-2 .insta ul {
  margin: 0 -1.369863013%;
}
.sns-col-2 .insta li {
  width: 22.222222222%;
  margin: 0 1.3333333333% 13px;
}
.sns-col-2 .free-box {
}
.sns-col-2 .free-box div {
  height: 404px;
  margin: 64px 0 0;
  background: #f0f0f0;
}
@media (max-width: 768px) {
  .sns-col-2 {
    margin: 0;
  }
  .sns-col-2 > li {
    display: block;
    width: 100%;
    margin: 0 0 44px;
  }
  .sns-col-2 > li:last-child {
    margin: 0;
  }
  .sns-col-2 .fb-page,
  .sns-col-2 .tw-wid {
    display: block;
    height: 302px;
    overflow: hidden;
  }
  .sns-col-2 .insta-wid {
    height: 230px;
    padding: 10px;
  }
  .sns-col-2 .insta ul {
    margin: 0 -1.557632398%;
  }
  .sns-col-2 .insta li {
    width: 27.778616504%;
    margin: 0 1.509707418% 10px;
  }
  .sns-col-2 .free-box div {
    height: 302px;
    margin: 44px 0;
    background: #f0f0f0;
  }
}
/*sns1カラム*/
.sns-col-1 {
  margin: 0;
  text-align: center;
}
.sns-col-1 > li {
  position: relative;
  width: 500px;
  margin: 0 0 46px;
}
.sns-col-1 .fb-page {
  height: 315px;
  overflow: hidden;
}
.sns-col-1 .insta {
  width: 100%;
  margin: 0;
}
.sns-col-1 .insta ul {
  margin: 0 -0.81632653%;
}
.sns-col-1 .insta li {
  width: 15.060240963%;
  margin: 0 0.796812749%;
}
@media (max-width: 768px) {
  .sns-col-1 .fb-page,
  .sns-col-1 .tw-wid {
    display: block;
    height: 302px;
    overflow: hidden;
  }
  .sns-col-1 > li {
    position: relative;
    width: 100%;
    margin: 0 0 50px;
  }
  .sns-col-1 .insta ul {
    margin: 0 -1.492537313%;
  }
  .sns-col-1 .insta li {
    width: 30.434782608%;
    margin: 0 1.449275362% 10px;
  }
}

/*ボタン*/
.btn-list li a {
  display: block;
  height: 50px;
  background: #425a6c;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 15px;
  line-height: 50px;
  text-align: center;
}
.btn-list .arrow::after {
  right: 20px;
}
/*ボタン4カラム*/
.btn-col-4 {
  margin: 0 -1.020408163% 60px;
}
.btn-col-4 li {
  width: 23%;
  margin: 0 1%;
  line-height: 1.7;
  text-align: center;
}
/*ボタン3カラム*/
.btn-col-3 {
  margin: 0 -1.275510204% 30px;
}
.btn-col-3 li {
  width: 30.84571144%;
  margin: 0 1.243781094%;
  line-height: 1.7;
  text-align: center;
}
/*ボタン2カラム*/
.btn-col-2 {
  margin: 0 -2.04081626%;
  text-align: center;
}
.btn-col-2 li {
  width: 46.078431372%;
  margin: 0 1.960784313%;
  line-height: 1.7;
  text-align: center;
}
@media (max-width: 768px) {
  .btn-list li a {
    display: block;
    height: 60px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    line-height: 60px;
    text-align: center;
  }
  .btn-list .arrow::after {
    right: 10px;
  }

  .btn-col-4,
  .btn-col-3,
  .btn-col-2 {
    margin: 0 0;
  }
  .btn-col-4 li,
  .btn-col-3 li,
  .btn-col-2 li {
    display: block;
    width: 100%;
    margin: 0 0 20px;
  }
}
@media (max-width: 320px) {
  .btn-list li a {
    font-size: 13px;
  }
}
/*sns-icn*/
.sns-icn-list {
  text-align: center;
}
.all-icn {
  margin: 0 -4px 0 -33px;
}
.sns-icn-list li {
  width: 13.87755102%;
  margin: 0 0.408163265%;
  text-align: center;
}
.all-icn li {
  width: 13.438735177%;
  margin: 0 0.395256916%;
}
.sns-icn-list li span {
  display: block;
  margin: 0 auto 16px;
}

.sns-icn .icn-fb {width: 27px;}
.sns-icn .icn-tw {width: 45px;padding: 8px 0;}
.sns-icn .icn-insta {width: 54px;}
.sns-icn .icn-youtube {width: 52px;padding: 9px 0 8px;}
.sns-icn .icn-blog {width: 54px;}
.sns-icn .icn-mail  {width: 54px;}
.sns-icn .icn-app {width: 54px;}

.sns-icn-list a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .sns-icn-list li {
    font-size: 12px;
    text-align: center;
  }
  .sns-icn-list li span {
    margin: 0 auto 17px;
  }
  .sns-icn ul {
    width: 100%;
    margin: 0;
    text-align: left;
  }
  .sns-icn li {
    width: 31.940298507% !important;
    margin: 0 0.597014925% 28px !important;
  }
}
@media (max-width: 360px) {
  .sns-icn-list li {
    font-size: 10px;
    text-align: center;
  }
}