/* css pc */
main {
  /*overflow: hidden;*/
}
a, a:hover {
  text-decoration: underline;
  color: #000;
}
a[href=""], a[href=""]:hover {
  text-decoration: none;
  pointer-events: none;
  color: #000;
}

img {
  height: auto;
  vertical-align: bottom;
}
h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
}
.contents {
  padding: 0 0 150px 0;
}
.contents .inner {
  width: 900px;
  margin: 0 auto;
}
.contents .flex {
  display: flex;
}
.contents .mv {
  width: 100%;
}
.contents .mv img {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
/*tab*/
.contents .tab {
  width: 900px;
  margin: 100px auto 0;
  position: relative;
}
.contents .tab__label {
  position: sticky;
  top: 0;
  column-gap: 21px;
  z-index: 2;
  background: #FFF;
  padding: 80px 0 20px;
  margin:-60px 0 0;
}
.contents .tab__label__column {
  cursor: pointer;
  width: 286px;
  text-align: center;
  padding: 1em 0;
  border: 1px solid #000;
  box-sizing: border-box;
  font: 400 20px/1 "Roboto", sans-serif;
  background: #FFF;
}
.contents .tab__label__column.active {
  background: #F0ECEB;
}
.contents .tab__contents__column {
  display: none;
}
.contents .tab__contents__column.show {
  display: block;
  box-sizing: border-box;
  padding: 0 0 100px;
  animation: ani__tab__contents .9s ease-in-out forwards;
}
@keyframes ani__tab__contents {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*card*/
.contents .card {
  position: relative;
  width: 100%;
}
.contents .card01 {
  margin: 100px auto 0;
  flex-flow: column;
}
.contents .card01 .card__photo {
  width: 475px;
  margin: 0 auto;
}
.contents .card01 .card__txt {
  width: 475px;
  margin: 30px auto 0;
}
.contents .card02 {
  margin: 100px auto;
  z-index: 1;
}
.contents .tab__contents__column02 .card02 {
  z-index: 1;
}
.contents .card02 .card__photo {
  width: 475px;
}
.contents .card02 .card__txt {
  margin: 127px 0 0 30px;
}
.contents .card03 {
  margin: -524px auto 0;
  flex-flow: row-reverse;
}
.contents .tab__contents__column03 .card03 {
  z-index: 1;
}
.contents .card03 .card__photo {
  width: 475px;
}
.contents .card03 .card__txt {
  margin: 524px 30px 0 0;
}
.contents .card04 {
  margin: 100px auto 0;
  z-index: 1;
}
.contents .card04 .card__photo {
  width: 425px;
}
.contents .card04 .card__txt {
  margin: 194px 0 0 30px;
}
.contents .card05 {
  margin: -150px auto 0;
  flex-flow: column;
}
.contents .card05 .card__photo {
  width: 575px;
  margin: 0 0 0 auto;
}
.contents .card05 .card__txt {
  margin: 30px 0 0 auto;
}
.contents .card06 {
  margin: -150px auto 0;
  flex-flow: column;
  pointer-events: none;
}
.contents .card06 .card__photo {
  width: 275px;
}
.contents .card06 .card__txt {
  margin: 30px 0 0 0;
  pointer-events: all;
}
.contents .card07 {
  margin: 100px auto 0;
  flex-flow: column;
}
.contents .card07 .card__photo {
  width: 475px;
  margin: 0 auto;
}
.contents .card07 .card__txt {
  width: 475px;
  margin: 30px auto 0;
}
.contents .card08 {
  margin: 100px auto 0;
  flex-flow: row-reverse;
}
.contents .card08 .card__photo {
  width: 275px;
}
.contents .card08 .card__txt {
  margin: 120px 30px 0 0;
}
.contents .card09 {
  margin: -100px auto 0;
  flex-flow: row;
}
.contents .tab__contents__column02 .card09,
.contents .tab__contents__column03 .card09{
  margin: 100px auto 0;
  flex-flow:column;
}
.contents .card09 .card__photo {
  z-index: 1;
  width: 575px;
}
.contents .tab__contents__column03 .card09 .card__photo {
  z-index: 2;
  width: 575px;
}
.contents .card09 .card__txt {
  margin: 394px 0 0 30px;
}
.contents .tab__contents__column02 .card09 .card__txt,
.contents .tab__contents__column03 .card09 .card__txt{
  margin: 30px 0 0 0;
}
.contents .card10 {
  margin: -100px auto 0;
  flex-flow: row-reverse;
}
.contents .tab__contents__column02 .card10,
.contents .tab__contents__column03 .card10{
  margin: -180px auto 0;
  flex-flow:column;
  z-index: 1;
  pointer-events: none;
}
.contents .card10 .card__photo {
  width: 475px;
}
.contents .tab__contents__column02 .card10 .card__photo,
.contents .tab__contents__column03 .card10 .card__photo{
  width: 475px;
  margin: 0 0 0 auto;
}
.contents .card10 .card__txt {
  margin: 394px 30px 0 0;
  pointer-events:all;
}
.contents .tab__contents__column02 .card10 .card__txt,
.contents .tab__contents__column03 .card10 .card__txt{
  margin: 30px 0 0 auto;
  width: 475px;
}
.contents .card11 {
  margin: 100px auto 0;
  flex-flow: column;
}
.contents .card11 .card__photo {
  width: 475px;
  margin: 0 auto;
}
.contents .card11 .card__txt {
  width: 475px;
  margin: 30px auto 0;
}
.contents .card__txt {
  font: 400 14px/26px "Noto Sans JP", sans-serif;
}
.contents .card__txt strong {
  font: 700 14px/26px "Roboto", sans-serif;
  color: #A2A2A2;
  position: relative;
  padding: 0 0 0 1.5em;
  display: block;
  margin: 0;
}
.contents .card__txt strong:nth-of-type(2) {
  margin: 30px 0 0;
}
.contents .card__txt strong::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1em;
  height: 1px;
  background-color: #A2A2A2;
}
.contents .card__txt small{
  font: 400 12px/21px "Noto Sans JP", sans-serif;
  margin:0 0 0 0.5em;
}
.contents .card__label {
  position: relative;
}
.contents .card__label a::before {
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
}
.contents .card__tops {
  padding: 0 0 0 3em;
}
.contents .card__tops a::before {
  content: 'TOPS';
}
.contents .card__skirt {
  padding: 0 0 0 3.5em;
}
.contents .card__skirt a::before {
  content: 'SKIRT';
}
.contents .card__bag {
  padding: 0 0 0 2.5em;
}
.contents .card__bag a::before {
  content: 'BAG';
}
.contents .card__bottoms {
  padding: 0 0 0 5em;
}
.contents .card__bottoms a::before {
  content: 'BOTTOMS';
}
.contents .card__cap {
  padding: 0 0 0 2.5em;
}
.contents .card__cap a::before {
  content: 'CAP';
}
/*css sp*/
@media screen and (max-width: 768px) {
  .contents {
    padding: 0 0 calc(100 * (100vw / 375)) 0;
  }
  .contents .inner {
    width: calc(100% - 30px);
    margin: 0 auto;
  }
  .contents .mv {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .contents .mv img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  /*tab*/
  .contents .tab {
    width: 100%;
    margin: calc(30 * (100vw / 375)) auto;
  }
  .contents .tab__label {
    position: sticky;
    width: 100%;
    top: 0;
    column-gap: calc(11 * (100vw / 375));
    z-index: 2;
    background: #FFF;
    padding: calc(75 * (100vw / 375)) calc(15 * (100vw / 375)) calc(15 * (100vw / 375));
    margin: calc(-60 * (100vw / 375)) auto 0;
  }
  .contents .tab__label__column {
    padding: 0.5em 0;
    font: 400 calc(14 * (100vw / 375))/1 "Roboto", sans-serif;
  }
  .contents .tab__contents__column.show {
    padding: calc(30 * (100vw / 375)) 0;
  }
  /*card*/
  .contents .card01 {
    margin: 0 auto;
    flex-flow: column;
  }
  .contents .card01 .card__photo {
    width: 100%;
    margin: 0 auto;
  }
  .contents .card01 .card__txt {
    width: calc(100% - 30px);
    margin: calc(20 * (100vw / 375)) auto 0;
  }
  .contents .card02 {
    margin: calc(50 * (100vw / 375)) auto 0;
    flex-flow: column;
  }
  .contents .card02 .card__photo {
    width: calc(320 * (100vw / 375));
  }
  .contents .card02 .card__txt {
    margin: calc(20 * (100vw / 375)) 0 0 calc(15 * (100vw / 375));
  }
  .contents .card03 {
    margin: calc(50 * (100vw / 375)) auto 0;
    flex-flow: column;
  }
  .contents .card03 .card__photo {
    width: calc(320 * (100vw / 375));
    margin: 0 0 0 auto;
  }
  .contents .card03 .card__txt {
    width: calc((320 - 15) * (100vw / 375));
    margin: calc(20 * (100vw / 375)) calc(15 * (100vw / 375)) 0 auto;
  }
  .contents .tab__contents__column02 .card03 .card__txt {
    width: calc(100% - 30px);
    margin: calc(20 * (100vw / 375)) auto 0;
  }
  .contents .card04 {
    margin: calc(50 * (100vw / 375)) auto 0;
    z-index: 1;
    flex-flow: column;
  }
  .contents .card04 .card__photo {
    width: calc(100% - 30px);
    margin: 0 auto;
  }
  .contents .tab__contents__column02 .card04 .card__photo,
  .contents .tab__contents__column03 .card04 .card__photo{
    width: calc(320 * (100vw / 375));
    margin: 0 0 0 0;
  }
  .contents .card04 .card__txt {
    margin: calc(20 * (100vw / 375)) 0 0 calc(15 * (100vw / 375));
  }
  .contents .card05 {
    margin: calc(50 * (100vw / 375)) auto 0;
    flex-flow: column;
  }
  .contents .card05 .card__photo {
    width: 100%;
    margin: 0 0 0 auto;
  }
  .contents .card05 .card__txt {
    margin: calc(20 * (100vw / 375)) calc(15 * (100vw / 375)) 0 calc(15 * (100vw / 375));
  }
  .contents .card06 {
    margin: calc(50 * (100vw / 375)) auto 0;
    flex-flow: column;
    pointer-events: none;
  }
  .contents .card06 .card__photo {
    width: calc(320 * (100vw / 375));
  }
  .contents .card06 .card__txt {
    margin: calc(20 * (100vw / 375)) 0 0 calc(15 * (100vw / 375));
    pointer-events: all;
  }
  .contents .card07 {
    margin: calc(50 * (100vw / 375)) auto 0;
    flex-flow: column;
  }
  .contents .card07 .card__photo {
    width: calc(100% - 30px);
    margin: 0 auto;
  }
  .contents .card07 .card__txt {
    width: calc(100% - 30px);
    margin: calc(20 * (100vw / 375)) auto calc(15 * (100vw / 375));
  }
  .contents .card08 {
    margin: calc(50 * (100vw / 375)) auto 0;
    flex-flow: column;
  }
  .contents .card08 .card__photo {
    width: calc(320 * (100vw / 375));
    margin: 0 0 0 auto;
  }
  .contents .card08 .card__txt {
    width: calc(320 * (100vw / 375));
    margin: calc(20 * (100vw / 375)) 0 0 auto;
  }
  .contents .card09,
  .contents .tab__contents__column02 .card09,
  .contents .tab__contents__column03 .card09{
    margin: calc(50 * (100vw / 375)) auto 0;
    flex-flow: column;
  }
  .contents .card09 .card__photo,
  .contents .tab__contents__column03 .card09 .card__photo{
    z-index: 1;
    width: 100%;
  }
  .contents .tab__contents__column02 .card09 .card__photo{
    width: calc(320 * (100vw / 375));
    z-index: 1;
  }
  .contents .card09 .card__txt,
  .contents .tab__contents__column02 .card09 .card__txt,
  .contents .tab__contents__column03 .card09 .card__txt{
    margin: calc(20 * (100vw / 375)) 0 0 calc(15 * (100vw / 375));
  }
  .contents .card10,
  .contents .tab__contents__column02 .card10,
  .contents .tab__contents__column03 .card10{
    margin: calc(50 * (100vw / 375)) calc(15 * (100vw / 375)) 0 0;
    flex-flow: column;
  }
  .contents .card10 .card__photo,
  .contents .tab__contents__column02 .card10 .card__photo,
  .contents .tab__contents__column03 .card10 .card__photo{
    width: calc(320 * (100vw / 375));
    margin: 0 0 0 auto;
  }
  .contents .card10 .card__txt,
  .contents .tab__contents__column03 .card10 .card__txt{
    margin: calc(20 * (100vw / 375)) calc(15 * (100vw / 375)) 0 auto;
    width: calc((320 - 15) * (100vw / 375));
  }
  .contents .tab__contents__column01 .card10 .card__txt,
  .contents .tab__contents__column02 .card10 .card__txt {
    width: calc(100% - 30px);
    margin: calc(20 * (100vw / 375)) auto 0;
  }
  .contents .card11 {
    margin: calc(50 * (100vw / 375)) auto 0;
    flex-flow: column;
  }
  .contents .card11 .card__photo {
    width: calc(100% - 30px);
    margin: 0 auto;
  }
  .contents .card11 .card__txt {
    width: calc(100% - 30px);
    margin: calc(20 * (100vw / 375)) auto 0;
  }
  .contents .card__txt {
    font: 400 calc(14 * (100vw / 375))/calc(26 * (100vw / 375)) "Noto Sans JP", sans-serif;
  }
  .contents .card__txt strong {
    font: 700 calc(14 * (100vw / 375))/calc(26 * (100vw / 375)) "Roboto", sans-serif;
    color: #A2A2A2;
    position: relative;
    padding: 0 0 0 1.5em;
    display: block;
    margin: 0;
  }
  .contents .card__txt strong:nth-of-type(2) {
    margin: calc(20 * (100vw / 375)) 0 0;
  }
  .contents .card__txt strong::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1em;
    height: 1px;
    background-color: #A2A2A2;
  }
  .contents .card__txt small {
    font: 400 calc(12 * (100vw / 375))/calc(21 * (100vw / 375)) "Noto Sans JP", sans-serif;
  }
  .contents .card__label {
    position: relative;
  }
  .contents .card__label a::before {
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
  }
  .contents .card__tops {
    padding: 0 0 0 3em;
  }
  .contents .card__tops a::before {
    content: 'TOPS';
  }
  .contents .card__skirt {
    padding: 0 0 0 3.5em;
  }
  .contents .card__skirt a::before {
    content: 'SKIRT';
  }
  .contents .card__bag {
    padding: 0 0 0 2.5em;
  }
  .contents .card__bag a::before {
    content: 'BAG';
  }
  .contents .card__bottoms {
    padding: 0 0 0 5em;
  }
  .contents .card__bottoms a::before {
    content: 'BOTTOMS';
  }
  .contents .card__cap {
    padding: 0 0 0 2.5em;
  }
  .contents .card__cap a::before {
    content: 'CAP';
  }
}
/*アニメーション*/
.fadeIn {
  opacity: 0;
  transform: translate(0, 2.5rem);
  transition: all 1s ease-out;
}
.fadeIn.is-show {
  opacity: 1;
  transform: translate(0, 0);
}
.fadeView {
  opacity: 0;
  transition: 2s;
}
.fadeView.is-show {
  opacity: 1;
}