@charset "UTF-8";
/* ------------------------------------------------
.main-area.top
------------------------------------------------ */
#Header{
  position: static;
  width: 100%;
}
body{
  color: #333333;
}
.main-area.top {
    overflow: hidden;
    font-family: pragmatica,  "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    min-width: auto;
    overflow-x: hidden;
}
.main-area.top .sp_only{
  display:none !important;
}
.main-area.top .block-slider {
  text-align: center;
}

.main-area.top img,
.main-area.top video {
  width: 100%;
}

.main-area.top .block-slider .slick-dots {
  margin-top: 30px;
  position: relative;
}
.main-area.top .blocks{
  max-width: 1000px;
    margin: 0 auto 160px;
}
.main-area.top .blocks:last-child{
    margin: 0 auto 140px;
}
.main-area.top .ttl-main {
  margin-bottom: 22px;
  font-family: 'TTCommonsLight';
  font-size: 60px !important;
  letter-spacing: 0.1em !important;
}
.main-area.top .ttl-main img{
  height: 60px;
  width: auto;
}
.main-area.top .ttl-main .sub-text{
  font-size: 20px;
  padding: 20px 0 0 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 60px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  position: relative;
  letter-spacing: 0.16em;
}
.main-area.top .ttl-main .sub-text::before{
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  transition: all 2.5s;
  top: 0;
  left: 0;
  background: #333333;
}
.main-area.top .ttl-main .sub-text.view::before{
  width: 100%;
}
.main-area.top .sub-ttl{
  font-size: 30px;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 60px;
}
.main-area.top .btn_top a{
    margin-top: 40px;
    display: inline-block;
    border-bottom: 1px solid #333333;
    font-size: 24px;
    padding-bottom: 3px;
    letter-spacing: 0.1em;
    font-family: 'TTCommonsLight';
}

.main-area.top .btn_top{
  text-align: center;
}
.discountRateS {
    width: 60px;
    height: 16px;
    background-color: #fe0002;
    color: #fff;
    line-height: 16px;
    display: inline-block;
    font-size: 11px;
    text-align: center;
    margin-left: 3px;
}

/* ------------------------------------------------
  サイト切り替え
------------------------------------------------ */
.main-area.top .block-switch{
    margin: 55px auto 68px;
    font-family: 'TTCommonsLight';
    display: flex;
    justify-content: center;
    font-size: 25px;
    letter-spacing: 0.1em;
    color: rgb(0 0 0 / 0.45);
    align-items: center;
}
.main-area.top .block-switch span:nth-child(2)::after{
  content: "";
    margin: 0 35px;
    background: #333333;
    width: 1px;
    height: 20px;
    display: inline-block;
    top: 0;
}
.main-area.top .block-switch span.current{
    color:#333333;

}

/* ------------------------------------------------
  navi
------------------------------------------------ */
.main-area.top .header-nav .header-inner {
    height: inherit;
    margin: auto;
    font-family: 'TTCommons';
}

/* ------------------------------------------------
  MOVIE
------------------------------------------------ */
.main-area.top .block-movie  {
  width: calc((870 / 1200) * 100%);
  max-width: 870px;
    margin: 0 auto 80px;
}
.main-area.top .block-movie video{
    width: 100%;
}
/* ------------------------------------------------
  TOPICS
------------------------------------------------ */

.main-area.top .block-topics{
  width: calc((870 / 1200) * 100%);
  max-width: 870px;
  margin: 0 auto 160px;
}
.main-area.top .block-topics .ttl-main{
  text-align: left;
}
.main-area.top .block-topics .ttl-main img{
  padding-left: 10px;
}
.main-area.top .block-topics .block-inner {
  max-width: 870px;
  margin: auto;
}
.main-area.top .block-topics .box-wrapper .box-topics:not(:last-child) {
  margin-bottom: 50px;
}


/* ------------------------------------------------
  new in
------------------------------------------------ */
.main-area.top .block-newin{
  width: calc((870 / 1200) * 100%);
  max-width: 870px;
}
.main-area.top .block-newin .ttl-main{
  text-align: left;
}
.main-area.top .block-newin .ttl-main img{
  padding-left: 10px;
}
.main-area.top .block-newin ul.Top_newin{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 615px;
    margin: auto;
}
.main-area.top .block-newin ul.Top_newin li{
    width: calc((300 / 600) * 100%);
  max-width: 300px;
    line-height: 1.3;
    box-sizing: border-box;
    background: #fff;
}
.main-area.top .block-newin ul.Top_newin li:nth-child(-n+2){
    margin-bottom: 15px;
}
.main-area.top .block-newin ul.Top_newin li .txt{
    display: none;
}

/* ------------------------------------------------
  About Gift
------------------------------------------------ */
.main-area.top .block-gift{text-align: center;}
.main-area.top .block-gift > a{
    width: calc((700 / 1000) * 100%);
    max-width: 700px;
    display: block;
    margin: auto;
}
.main-area.top .block-gift > a p{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 18px;
  padding-bottom: 25px;
  position: relative;
  letter-spacing: 0.06em;
  line-height: 2;
  margin-top: 38px;
}
.main-area.top .block-gift > a p::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 11px;
  height: 11px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(135deg);
}

/* ------------------------------------------------
  STAFF
------------------------------------------------ */
.main-area.top .block-staff{
  width: calc((870 / 1200) * 100%);
  max-width: 870px;
}
.main-area.top .block-staff .ttl-main{
  text-align: left;
}
.main-area.top .block-staff .ttl-main img{
  height: 71px;
  padding-left: 10px;
}
.main-area.top .block-staff .ttl-main .sub-text{
  margin-top: -13px;
}
.main-area.top .block-staff .slick-slider{
    width: calc((590 / 870) * 100%);
  max-width: 590px;
    margin: auto;
}
.main-area.top .block-staff .slick-initialized .slick-slide{
  position: relative;
  padding: 0 15px;
}
.main-area.top .block-staff .slick-slide a img{
  width: 100% !important;
}
.main-area.top .block-staff .slick-arrow {
    top: 50%;
}
.main-area.top .block-staff .slick-arrow.slick-prev{
    left: -7%;
}
.main-area.top .block-staff .slick-arrow.slick-next {
    right: -7%;
}
/* ------------------------------------------------
  slick
------------------------------------------------ */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: 0;
  margin-right: auto;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow {
  font-size: 0;
  position: absolute;
  overflow: visible;
}

.slick-arrow:hover {
  opacity: .5;
}

.slick-arrow::before, .slick-arrow::after {
  content: "";
  display: block;
  position: absolute;
  background: #333333;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-dots {
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.slick-dots li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px;
}

.slick-dots li button {
  font-size: 0;
  width: 80px;
  height: 5px;
  background: #B4B4B4;
  -webkit-appearance: none;
  padding: 0;
  -webkit-transition: background .3s;
  transition: background .3s;
  cursor: pointer;
  border: 0;
}

.slick-dots li.slick-active button {
  background: #333333;
}

.slick-arrow.slick-prev::after {
    content: '';
    right: 100px;
    top: 50%;
    width: 34px;
    height: 34px;
    border: 1px solid #B2B2B2;
    border-width: 1px 1px 0 0;
    transform: translateX(14px) rotate(225deg);
}
.slick-arrow.slick-next::after {
    content: '';
    left: 100px;
    top: 50%;
    width: 34px;
    height: 34px;
    border: 1px solid #B2B2B2;
    border-width: 1px 1px 0 0;
    transform: translateX(-14px) rotate(45deg);
}

.slick-arrow::before,
.slick-arrow::after {
  background: no-repeat;
}

.main-area.top .block-story {
    margin-bottom: 132px;
}
.main-area.top .btn.toggle.open {
  margin-bottom: 56px;
  font-size: 18px;
  padding-top: 10px;
  height: 26px;
}
.main-area.top .btn.next {
  border: 1px solid #333333;
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  height: 38px;
  letter-spacing: 0.1em;
}

.main-area.top .block-feature .block-inner .box-slider-feature li .box-txt .txt {
  font-size: 12px;
  letter-spacing: 0.07em;
  border-bottom: solid;
  width: max-content;
  margin: 0 auto;
  padding-bottom: 3px;
}

.main-area.top .block-newin .slide-dots{
  margin: 70px auto 0;
  width: fit-content;
  width: -moz-fit-content;
  width: 265px;
  text-align: center;
}

.main-area.top .block-newin .slick-dots li button{display: none;}

.main-area.top .block-newin .slide-dots li{
  display: inline-block;
    padding: 0 10px;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    line-height: 30px;
        margin: 0 11.5px;
}

.main-area.top .block-newin .slide-dots li button{
  font-family: futura,futura-pt;
  font-size: 14px;
}


.main-area.top .block-newin .slide-dots .slick-active{
  border:1px solid;
}

.main-area.top .block-newin .slick-dots.slick-initialized.slick-slider.slick-dotted{display: none;}


.slick-arrow img{width: 100%;}


/* トップページより移動 */
.btn.plus a {
  position: relative;
  font-size: 19px;
  letter-spacing: 0.05em;
  line-height: 1;
  width: 100%;
  top: 10px;
  padding:0;
}
.box-wrapper .btn a {
  position: relative;
  display: block;
  padding: 0;
  letter-spacing: 0.05em;
  line-height: 1;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.main-area.top .btn.next {
  border: 1px solid #333333;
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  height: 38px;
  letter-spacing: 0.1em;
}

.main-area.top .block-feature .block-inner .box-slider-feature li .box-txt .txt {
  font-size: 12px;
  letter-spacing: 0.07em;
  border-bottom: solid;
  width: max-content;
  margin: 0 auto;
  padding-bottom: 3px;
}
.sale_banner {
  margin: 20px auto;
}

.sale_banner img {
  width: 100%;
}

.mail_banner {
  z-index: 100;
  position: fixed;
  left: 0;
  bottom: 100px;
  width: 60px;
  height: 300px;
}



/* ------------------------------------------------
  RECOMMEND
------------------------------------------------ */
.main-area.top .block-recommend{
  width: calc((870 / 1200) * 100%);
  max-width: 870px;
}
.main-area.top .block-recommend .ttl-main{
  text-align: left;
}
.main-area.top .block-recommend .ttl-main img{
  padding-left: 10px;
}
.main-area.top .block-recommend .ttl-main .sub-text{
  margin-top: -12px;
}
.main-area.top .blocks.block-recommend .block-inner{
   padding: 0 10px;
}
.main-area.top .blocks.block-recommend .block-inner .txt{
  display: none;
}
.main-area.top .blocks.block-recommend .block-inner li:nth-child(-n + 3){
      margin-bottom: 10px;
}
.main-area.top .blocks.block-recommend .block-inner ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 835px;
  margin: auto;
}
.main-area.top .blocks.block-recommend .block-inner li{
  width: calc((270 / 835) * 100%);
  max-width: 270px;
}

/* ------------------------------------------------
  BEST SELLERS
------------------------------------------------ */
.main-area.top .block-ranking{
  width: calc((870 / 1200) * 100%);
  max-width: 870px;
}
.main-area.top .block-ranking .ttl-main{
  text-align: left;
}
.main-area.top .block-ranking .ttl-main img{
  height: 64px;
  margin-left: 10px;
}
.main-area.top .block-ranking .ttl-main .sub-text{
  margin-top: -6px;
}
.main-area.top .block-ranking ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 615px;
    margin: auto;
}
.main-area.top .block-ranking ul li{
  width: calc((300 / 615) * 100%);
  max-width: 300px;
    box-sizing: border-box;
    background: #fff;
}
.main-area.top .block-ranking ul li:nth-child(-n+2){
    margin-bottom: 15px;
}
.main-area.top .block-ranking ul li .txt,
.main-area.top .block-ranking ul li:nth-child(n+5){
    display: none;
}
.main-area.top .block-ranking .rankText{display: none;}

/* ------------------------------------------------
  About
------------------------------------------------ */
.main-area.top .block-about{
    text-align: center;
    font-size: 16px;
    line-height: 2.8;
    margin: 80px auto 160px;
    max-width: initial;
}
.main-area.top .block-about .ttl-main {
    margin-bottom: 30px;
    text-align: left;
}
.main-area.top .block-about .flex{
  display: flex;
  justify-content: center;
}
.main-area.top .block-about .flex .img{
  width: calc((600 / 1000) * 100%);
  max-width: 600px;
  margin-right: 50px;
}
.main-area.top .block-about .flex .img img{width: 100%}
.main-area.top .block-about .flex .txt .block-inner{
  padding-left: 30px;
  position: relative;
}
.main-area.top .block-about .flex .txt .block-inner::before{
  content: '';
  position: absolute;
  width: 1px;
  height: 0;
  transition: all 2.5s;
  top: 7px;
  left: 0;
  background: #333333;
}
.main-area.top .block-about .flex .txt .block-inner.view::before{
  max-height: 580px;
  height: 98%;
}
.main-area.top .block-about .flex .txt .block-inner p{
  text-align: left;
  font-size: 16px;
  line-height: 2;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  letter-spacing: 0.12em;
}
.main-area.top .block-about .flex .txt .block-inner p span{
  display: block;
  margin-bottom:20px;
}

/* ------------------------------------------------
  NEWS
------------------------------------------------ */
.main-area.top .block-news .ttl-main img{
    height: 35px;
    margin: 0 auto 48px;
}
.main-area.top .block-news.blocks {
    text-align: center;
}
.main-area.top .block-news ul li:not(:last-child){
    margin-bottom: 30px;
}
.main-area.top .block-news li a p{
    font-size: 15px;
    line-height: 2;
}
.main-area.top .block-news li a p span{
    display: block;
    font-family: 'TTCommons';
}
.main-area.top .block-news .btn_top a{
    font-size: 19px;
}

/* ------------------------------------------------
  Instagram
------------------------------------------------ */
.main-area.top .block-insta .ttl-main img {
  height: 62px;
  margin-bottom: 48px;
}
.main-area.top .block-insta ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 835px;
    margin: auto;
}
.main-area.top .block-insta ul li{
  width: calc((270 / 835) * 100%);
  max-width:270px;
}
.main-area.top .block-insta ul li img{
  max-width:270px;
  max-height:270px;
  object-fit: cover;
}
.main-area.top .block-insta ul li:nth-child(-n + 6){
  margin-bottom: 10px;
}

/* ------------------------------------------------
  Concept
------------------------------------------------ */
.main-area.top .block-concept{
  text-align: center;
  margin: 0 auto 80px;
}
.main-area.top .block-concept h2{
  line-height: 1;
  font-family: 'Noto Serif JP', serif;
  font-size: 40px;
  letter-spacing: 0.1em;
}
.main-area.top .block-concept h2 span{
  font-size: 26px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  display: block;
  margin-top: 34px;
  letter-spacing: 0.21em;
}
.main-area.top .block-concept p{
  font-size: 30px;
  letter-spacing: 0.1em;
  padding: 0 2px 10px 4px;
  border-bottom: 1px solid;
  display: inline-block;
  margin: 60px auto 0;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
}

/* ------------------------------------------------
  category
------------------------------------------------ */
.main-area.top .block-category{
  text-align: center;
}
.main-area.top .block-category ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc((794 / 1000) * 100%);
  max-width:794px;
  margin: auto;
}
.main-area.top .block-category ul li{
  width: calc((238 / 794) * 100%);
  max-width:238px;
  position: relative;
}
.main-area.top .block-category ul li:nth-child(-n+3){margin-bottom: 40px}

.main-area.top .block-category ul li p{
  position: absolute;
  top: calc(50% - 8px);
  right: 40px;
  font-size: 16px;
  letter-spacing: 0.16em;
  font-family: 'Noto Sans JP', sans-serif;
}


/* ------------------------------------------------
fabric
------------------------------------------------ */
.main-area.top .block-fabric{
  text-align: center;
  margin: 0 auto 160px;
}
.main-area.top .block-fabric .img{
  width: calc((700 / 1200) * 100%);
  max-width:700px;
  margin: 0 auto 80px;
}
.main-area.top .block-fabric ul{
  display: flex;
  flex-wrap: wrap;
  width: calc((1112 / 1200) * 100%);
  max-width:1112px;
  margin: 0 auto 50px;
}
.main-area.top .block-fabric ul li{
  width: calc((238 / 1112) * 100%);
  max-width:238px;
  margin: 0 calc((20 / 1112) * 100%);
}
.main-area.top .block-fabric ul li:nth-child(-n+12){margin-bottom: 40px}

.main-area.top .block-fabric .viewall a{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 18px;
  padding-bottom: 25px;
  position: relative;
  letter-spacing: 0.06em;
  cursor: pointer;
    cursor: hand;
}
.main-area.top .block-fabric .viewall a::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 11px;
  height: 11px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(135deg);
}
.main-area.top .block-fabric .toggle-box-pc{
  display: none;
}


/* ------------------------------------------------
ipad
------------------------------------------------ */
@media screen and (max-width:1024px) {
  /*about*/
  .main-area.top .block-about .flex .img{
    width: calc(600 *(100vw / 1200));
    margin-right: calc(50 *(100vw / 1200));
  }
  .main-area.top .block-about .flex .txt .block-inner p{
    font-size: calc(16 *(100vw / 1200));
  }
  .main-area.top .block-about .flex .txt .block-inner p span{
    margin-bottom: calc(20 *(100vw / 1200));
  }

  /*CATEGORY*/
  .main-area.top .block-category ul li p{
    right: calc(40 *(100vw / 1200));
    font-size: calc(24 *(100vw / 1200));
  }

  /*gift*/
  .main-area.top .block-gift > a p{
    font-size: calc(24 *(100vw / 1200));
  }
}
@media screen and (max-width: 768px) {
  .main-area.top .blocks {
    max-width: 96%;
  }
}