@charset "utf-8";

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
/*HumbergerNav
 * --------------------------------------------------------*/
.main-container {
  max-width: 1000px;
  width: 100%;
  margin: 80px auto 100px;
}
.humbergerTtl {
  top: 5px!important;
  width: 100%;
}
.linenupWrap {
  margin: 30px auto 0!important;
}

/*eyeCatcher
 * --------------------------------------------------------*/
.blouse-headerImg {
  background: url(../img/blouse/eyecatching.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 60vh;
  display: table;
}
.onepiece-headerImg {
  background: url(../img/onepiece/eyecatching.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 60vh;
  display: table;
}
.pants-headerImg {
  background: url(../img/pants/eyecatching.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 60vh;
  display: table;
}
.sandal-headerImg {
  background: url(../img/sandal/eyecatching.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 60vh;
  display: table;
}
.bagxs-headerImg {
  background: url(../img/bag/xs/eyecatching.jpg);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
  display: table;
}
.bags-headerImg {
  background: url(../img/bag/s/eyecatching.jpg);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
  display: table;
}
.bagm-headerImg {
  background: url(../img/bag/m/eyecatching.jpg);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
  display: table;
}
.bagl-headerImg {
  background: url(../img/bag/l/eyecatching.jpg);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
  display: table;
}
.bagxl-headerImg {
  background: url(../img/bag/xl/eyecatching.jpg);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
  display: table;
}
.project__txt-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.project__txt-inner p {
  color: #FFF;
}
.categoryType {
  display: inline-block;
  border-bottom: 1px solid;
  letter-spacing: .5px;
  margin: 0;
  padding-bottom: 15px;
  font-size: 1.1875rem;
  font-family: 'Hiragino Mincho W3 JIS2004', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.categoryDetails {
  font-size: 1.5rem;
  line-height : 1.4;
  margin: 18px 0 25px;
  color: #FFF;
  font-weight: normal;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.categoryDetails span {
  display: block;
}


/*購入・商品について
 * --------------------------------------------------------*/
.tabs.tabInner {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 0!important;
  border-top: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
}
.tab.tabbox {
  text-transform: uppercase;
  padding: 10px 80px;
  cursor: pointer;
  transition: box-shadow 0.6s;
}
.tab.tabbox:hover {
  transition: box-shadow 0.6s;
}
.tab.tabbox.active {
  border-bottom: 2px solid;
}
.container.tabcontainer {
  height: 800px;
  width: 100%;
  overflow: auto;
}
.contents.tabarea {
  height: 100%;
  width: 1000px;
  margin: auto;
  position: relative;
}
.contents.tabarea .content.tabareaInner {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 0;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
}
.contents.tabarea .content.tabareaInner.active {
  opacity: 1;
  pointer-events: auto;
}
.myslider.tabImgWrap {
  height: 655px;
  width: 545px;
}
.image.tabImg{
  height: 655px;
  width: 545px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.tabFlex {
  display: flex;
  justify-content: space-between;
}
/* グラデーションアコーディオン;*/
.wrapper{
  width: 640px;
  margin: 30px auto;
  font-size: 1.6rem;
  line-height: 1.5;
}
.text_wrapper{
  position: relative;
  margin-bottom: 45px;
  max-width: 100%;
  width: 100%;
}
.show_more,.show_more2{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  padding-top: 60px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(180deg, rgb(255, 255, 255,0) 0%, rgb(255, 255, 255,1) 70%);
  cursor: pointer;
  transition: bottom 0.2s;
}
.active{
  background: none;
  bottom: -30px;
}
h1{
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}



/*item-anchorLink
 * --------------------------------------------------------*/
 ul.anchorLink-wrapper {
  width: 80%;
  display: flex;
  justify-content: space-around;
 }

/*SubNavigation
 * --------------------------------------------------------*/
nav.col-xs-3 ul {
  border-radius: 5px;
  list-style-type: none;
  left: 2%;
  top: 40px;
  padding: 0;
  width: 80%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 auto 40px;
}
nav.col-xs-3 ul a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: #666;
}
nav.col-xs-3 ul a:hover {}
nav.col-xs-3 ul .active {
  border: 1px solid #808080;
  border-radius: 5px;
}
nav.col-xs-3 ul .active:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 16px;
  background-image: url(../img/common/show.png);
  background-repeat: no-repeat;
  background-size: 20px;
}
nav.col-xs-3 ul li {
  width: 250px;
  text-align: center;
}
/* Body Content */
.anchor {
  padding-top: 110px;
  display: block;
}
.anchor.colum {
  padding-top: 80px;
}

/*購入・商品について
 * --------------------------------------------------------*/
.col-xs-9 {
  width: 1000px;
  margin: auto;
}
.sns {
  display: flex;
  margin: 100px 0 0;
}
.sns li {
  padding: 10px;
}
.sns li span {
  vertical-align: middle;
  vertical-align: -webkit-baseline-middle;
}
.sns img {
  max-width: 37px;
}


/*smallAccodion
 * -----------------------------*/
.accbox {
  padding: 0;
  max-width: 100%;
  margin-top: 20px;
}
.accbox label {
  display: block;
  margin: 1.5px 0;
  padding : 11px 12px;
  cursor :pointer;
  transition: all 0.5s;
  position: relative;
  border-bottom: 1px solid;
}
.accbox label:hover {
  background :#F2F2F2;
}
.accbox input {
  display: none;
}
.accbox .accshow {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .2s ease-out;;
}
.cssacc:checked + label + .accshow {
  height: auto;
  padding: 5px;
  opacity: 1;
}
.accbox .accshow a {
  text-decoration: underline;
}
.accbox .accshow p {
  margin: 15px 10px;
}
.accbox .accshow li:first-child {
  margin-top: 10px;
}
.accbox .accshow dl dt {
  margin-bottom: 10px;
}
.accbox .accshow dl dd {
  font-size: 14px;
}
.accbox label:after {
  font-family: FontAwesome;
  content: "\f067";
  display: inline-block;
  padding-right: 8px;
  position: absolute;
  right: 10px;
}
.cssacc:checked + label:after {
  font-family: FontAwesome;
  content: "\f068";
}
.accbox label.ttl {
  border-bottom: 2px solid #ccc;
  text-align: center;
  font-size: 1.3125rem;
  font-weight: normal;
  line-height: 3;
  display: block;
  margin: 1.5px 0;
  padding: 11px 12px 0;
  cursor: pointer;
  transition: all 0.5s;
  position: relative;
}
.accbox label.ttl:hover {
  background: none;
}

/*right
 * -----------------------------*/
.tabSecArea.sec1-rightWrap {
  max-width: 420px;
  width: 100%;
}
.sec1-rightWrap .bag {
  margin-bottom: 35px;
  font-size: 1.1875rem;
}
.sec1-rightWrap .type{
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.sec1-rightWrap .type span{
  font-size: 1.125rem;
  display: inline-block;
  margin: 10px 0;
}
.sec1-rightWrap .price {
  font-size: 1.5rem;
}
.sec1-rightWrap .price span {
  font-size: 20px;
}
.sec1-rightWrap .sale-wrap {
  background-color: #F2F2F2;
  padding: 30px 15px;
  margin: 30px 0 50px;
}
.sec1-rightWrap .sale-wrap li ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sec1-rightWrap .sale-wrap li.note {
  background-color: #FFF;
  color: #C1272D;
  border-radius: 5px;
  padding: 10px;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bag h2 {
  display: inline-block;
  border-bottom: 1px solid;
  font-size: 1.375rem;
  font-weight: normal;
  margin: 0;
}
.popup-wrap {
  height: auto;
  margin-top: 35px;
}
.popup-wrap:hover {
  opacity: 0.8;
  transition: all 0.4s;
}
p.text.hidden {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 60px;
}
.size {
  display: block;
  text-align: left;
  font-size: 20px;
  padding-left: 10px;
}
/*Pop-up
 * -----------------*/
.popup-button img {
  width: 100%;
 }
/*コラム
 * --------------------------------------------------------*/
.sec-wrap {
 width: 480px;
 margin: auto;
}
.sec-wrap h2 {
  border-bottom: 2px solid #ccc;
  text-align: center;
  font-size: 1.3125rem;
  font-weight: normal;
  line-height: 3;
}
.sec-wrap li
.sec-wrap p {
  padding: 0 10px;
  margin-bottom: 50px;
}
.sec2-wrap p {
  line-height: 1.6;
}
.sec3-wrap div {
  text-align: center;
}
.sec3-list {
  padding: 0 10px;
  margin-bottom: 50px;
}
.sec3-list li:nth-child(odd) {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}
.sec3-list li:nth-child(even) {
  margin-top: 0;
  padding-top: 5px;
}
.sec3-list li {
  margin: 20px 0 0;
}
.sec4-wrap li {
  line-height: 1.6;
}

/*知っておいてほしいこと
 * --------------------------------------------------------*/
.sec4-wrap ul {
  margin-top: 15px;
}
.sec4-wrap ul li {
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 40px;
}
.sec4-wrap ul li.mb0 {
  margin-bottom: 1em;
}
.sec4-wrap ul li:before {
  content: "・";
}
.sec4-wrap ul li:last-child {
  margin-top: 50px;
}
.sec4-wrap div {
  margin-top: 1em;
}

/*footer-carousel
* --------------------------------------------------------*/
.pleasenoteWrap {
  max-width: 1000px;
  width: 100%;
  background-color: #F2F2F2;
  margin-top: 90px;
}
.pleasenoteWrap ul {
  padding: 40px 20px;
  line-height: 1.8;
}

/*footerImg
 * --------------------------------------------------------*/
.footerImg {
  width: 100%;
  background-color: #E6E6E6;
  padding: 50px 0;
}
.footercarousel-inner {
  max-width: 1000px;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.footercarousel-inner p {
  text-align: center;
}
.footercarousel-inner img {
  max-width: 150px;
}

/*詳細ページタブなしバージョン
 * --------------------------------------------------------*/
 .container.notTab {
  max-width: 1000px;
  width: 100%;
  margin: 10% auto 0;
 }
 .main-container.notTab {
  margin: 0 auto 100px!important;
 }

@media screen and (max-width: 768px) {
  .tab.tabbox {
    padding: 10px 40px;
  }
  .contents.tabarea {
    width: 90%;
  }
  .container.notTab {
    width: 90%;
  }
  /*スライダーの画像幅*/
  .myslider.tabImgWrap {
    width: 360px;
  }
  .tabFlex-other {
    width: 400px;
  }
  .image.tabImg {
    height: 450px;
    background-position: left center;
  }
  .tabSecArea.sec1-rightWrap {
    width: 300px;
  }
  .accbox {
    width: 90%;
  }
  .sns {
    margin: -8em 0 0;
  }
  .main-container,
  .pleasenoteWrap,
  .footercarousel-inner,
  .footer-wrap {
    width: 100%;
  }
  .footercarousel-inner.caseSp li:nth-child(3),
  .footercarousel-inner.caseSp li:nth-child(4) {
    margin-top: 35px;
  }
  .pleasenoteWrap {
    width: 90%;
    margin: 90px auto 0;
  }
  .footercarousel-inner {
    justify-content: space-around;
  }
/*  .footercarousel-inner img {
    max-width: 100px;
  }*/
  .text_wrapper {
    width: 100%;
  }
}


@media screen and (max-width: 600px) {
  .main-container {
    width: 90%;
    margin: 0 auto 100px;
  }
  /*HumbergerNav
 * --------------------------------------------------------*/
  header .burger {
    left: 30px!important;
  }
  /*eyeCatcher
 * --------------------------------------------------------*/
  .bag-headerImg {
    background: url(../img/bag/eyecatchingSp.jpg);
    background-position: center left;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .blouse-headerImg {
    background: url(../img/blouse/eyecatchingSp.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .onepiece-headerImg {
    background: url(../img/onepiece/eyecatchingSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .pants-headerImg {
    background: url(../img/pants/eyecatchingSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .sandal-headerImg {
    background: url(../img/sandal/eyecatchingSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .bagxs-headerImg {
    background: url(../img/bag/xs/eyecatchingSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .bags-headerImg {
    background: url(../img/bag/s/eyecatchingSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .bagm-headerImg {
    background: url(../img/bag/m/eyecatchingSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .bagl-headerImg {
    background: url(../img/bag/l/eyecatchingSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .bagxl-headerImg {
    background: url(../img/bag/xl/eyecatchingSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    display: table;
  }
  .categoryType {
    font-size: 18px;
  }
  .categoryDetails {
    font-size: 21px;
  }
  .blouse-headerImg {
    position: relative;
  }
  .project__txt-inner {
    display: block;
    position: absolute;
    top: 20%;
    left: 29%;
  }
  .project__txt-inner.style {
    display: block;
    position: absolute;
    top: 35%;
    left: 29%;
  }
/*item-anchorLink
 * --------------------------------------------------------*/

/*toppageBtn
 * --------------------------------------------------------*/

/*SubNavigation
 * --------------------------------------------------------*/
  .col-xs-3 {
    width: 90%;
    margin: auto;
  }
  nav.col-xs-3 ul {
    border-radius: 5px;
    list-style-type: none;
    left: 0;
    top: 30px;
    padding: 0;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
    margin: 0 0 50px;
  }
  nav.col-xs-3 ul a {
    font-size: 10px;
    color: #666;
  }
  nav.col-xs-3 ul li {
    width: 150px;
  }
  nav.col-xs-3 ul .active:before {
    background-size: 15px;
    vertical-align: bottom;
  }
  /* Body Content */
 .anchor {
    padding-top: 60px;
    display: block;
  }
/*  .anchor.colum {
    padding-top: 10px;
  }*/

/*購入・商品について
 * --------------------------------------------------------*/
  .contents.tabarea {
    width: 90%;
  }
  .col-xs-9 {
    width: 100%;
    margin: auto;
  }
  .tabFlex {
    display: block;
  }
  .tab.tabbox {
    padding: 1.3em;
    font-size: 12px;
    text-align: center;
  }
  .myslider.tabImgWrap {
    height: 455px;
    width: 100%;
  }
  .image.tabImg {
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
  }
  .tabFlex-other {
    width: 100%;
  }
  .tabFlex-other .sns {
    margin: 2em 0 0;
  }
  .spOnly {
    width: 90%;
    margin: auto;
  }
  /*タブのスタイル*/
  .tab_item {
    width: calc(100%/5);
    font-size: 14px;
  }
  .tab-inner {
    display: block;
  }

  /*left-smallAccodion
   * -----------------------------*/
  .accbox {
    width: 100%;
    padding: 0;
    max-width: 400px;
    font-size: 14px;
  }
  .accbox label:after {
    padding-left: 10px;
  }
  .accbox label:hover {}
  .accbox input {
    display: none;
  }
  .accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.2s;
  }
  .cssacc:checked + label + .accshow {
    width: 90%;
    margin: auto;
  }
  .accbox .accshow p {
    margin: 15px 10px
  }
  .cssacc:checked + label:after {
    content: '-';
  }
  #sec1 {
  }
  .sec1-sns {
    margin-top: 130px;
    display: flex;
  }
  /*right
   * -----------------------------*/
  .tabSecArea.sec1-rightWrap {
    width: 100%;
    margin-top: 80px;
  }
  .sec1-rightWrap .bag {
    margin-bottom: 25px;
    font-size: 16px;
  }
  .sec1-rightWrap .type{
    margin-bottom: 10px;
    font-size: 24px;
  }
  .sec1-rightWrap .price,
  .sec1-rightWrap .cart {
    margin-bottom: 25px;
    font-size: 24px;
  }
  .sec1-rightWrap .sale-wrap {
    width: 100%;
    margin-bottom: 30px;
    font-size: 12px;
  }
  .sec1-rightWrap .type span{
    font-size: 16px;
  }
  .sns {
    justify-content: center;
    margin: 0;
  }
  .sns li span {
    vertical-align: top;
  }
  .show_more,.show_more2 {
    font-size: 16px;
  }
  p.text.hidden {
    margin-top: 0;
  }
  /*コラム
   * --------------------------------------------------------*/
  .sec-wrap {
    width: 100%;
    margin: auto;
  }
  .sec-wrap p,
  .sec3-list {
    width: 90%;
    padding: 0;
    margin: 0 auto;
  }

  /*知っておいてほしいこと
   * --------------------------------------------------------*/
  .text_wrapper {
    width: 100%;
  }
  .text{
    height: 180px;
    width: 90%;
    margin: auto;
    padding: 20px 0;
    overflow: hidden;
  }
  .active {
    bottom: 0;
  }
  .bag h2 {
    font-size: 22px;
  }
  .sec4-wrap ul {
    width: 90%;
    margin: 15px auto 0;
  }
  .sec4-wrap div {
    text-indent: -0.1em;
}

/*詳細ページタブなしバージョン
* --------------------------------------------------------*/
 .container.notTab {
    width: 90%;
  }
 .main-container.notTab {
    margin: 0 auto 100px!important;
  }

  /*footer-link
* --------------------------------------------------------*/
  .pleasenoteWrap {
    width: 100%;
  }
  .pleasenoteWrap ul li {
    font-size: 14px;
  }
  .footercarousel-inner img {
    width: 100%;
    height: auto;
  }

  /*footer-carousel
   * --------------------------------------------------------*/
  .footercarousel-inner {
    width: 100%;
    overflow: hidden;
    margin: auto;
    justify-content: space-around;
  }
}
@media screen and (max-width: 375px) {
  .tabSecArea.sec1-rightWrap {
    margin-top: 0;
  }
  .project__txt-inner {
    left: 26%;
  }
  .project__txt-inner p {
  }
@media screen and (max-width: 320px) {
  .project__txt-inner {
    left: 23%;
  }
}