:root {
  --color-pink: #f372c3;
  --color-white: #fff;
}


html {
  box-sizing: border-box;
  font-size: 62.5%;
}

@media screen and (min-width: 821px) and (max-width: 1536px) {
  html {
    font-size: 0.65vw;
  }
}

@media screen and (max-width: 820px) {
  html {
    font-size: 1.3vw;
  }
}

.lp_style * {
  box-sizing: border-box;
}

.lp_style {
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
  line-height: 1;
  letter-spacing: .005em;
  list-style: none;
  font-feature-settings: "palt";
  overflow: hidden;
  color: #343434;
  font-family: 'Zen Maru Gothic', sans-serif !important;
  font-weight: 400;
  background: #111;
}

.Urbanist {
  font-family: 'Urbanist', sans-serif;
}

.lp_style button {
  background: transparent;
  padding: 0;
  margin: 0;
}

.lp_style ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp_style a {
  text-decoration: none;
}

.sp_only {
  display: none !important;
}

@media screen and (min-width:641px),
print {
  .pc_only {
    display: block !important;
  }
}

@media screen and (max-width:640px),
print {
  .pc_only {
    display: none !important;
  }

  .sp_only {
    display: block !important;
  }
}

.color-p {
  color: var(--color-pink);
}

._inner {
  padding: 0 2rem;
  margin: 0 auto;
}

@media screen and (min-width:821px),
print {
  ._inner {
    max-width: 120rem;
    padding: 0;
    margin: 0 auto;
  }
}


/*---------------------------------------------- 
  Mainvisual
----------------------------------------------*/

.h-inner {
  text-align: center;
}

.Mainvisual img {
  display: block;
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

/*---------------------------------------------- 
  PageNavigation
----------------------------------------------*/

@media screen and (min-width:821px),
print {
  .PageNavigation {
    background: var(--color-pink);
  }
}

.PageNavigation .Navigation {
  margin: 6rem auto;
  padding: 0 4rem;
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width:821px),
print {
  .PageNavigation .Navigation {
    max-width: 130rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
  }
}

.Navigation ._item {
  position: relative;
  width: calc((100% / 3) - 2rem);
  text-align: center;
  font-size: 2.4rem;
  height: 16rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-pink);
  border: 1px solid var(--color-pink);
  background: var(--color-pink);
}

.Navigation ._item:not(:nth-of-type(3n+1)) {
  margin-left: 2rem;
}

.Navigation ._item:nth-of-type(n+4) {
  margin-top: 2rem;
}

.Navigation ._item a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.Navigation ._item a ._txt {
  font-weight: 500;
}

@media screen and (min-width:821px),
print {
  .Navigation ._item {
    position: relative;
    width: calc(100% / 8);
    height: auto;
    font-size: 1.4rem;
    line-height: 1.42;
    transition: background-color ease-in-out .2s;
    border: none;
  }

  .Navigation ._item:not(:nth-of-type(3n+1)) {
    margin-left: 0;
  }

  .Navigation ._item:nth-of-type(n+4) {
    margin-top: 0;
  }

  .Navigation ._item:not(:last-of-type)::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 79px;
    background: url(./../img/nav-border.png);
    background-size: auto;
    background-repeat: no-repeat;
  }

  .Navigation ._item:hover {
    background: #111111;
  }
}

@media screen and (min-width:821px),
print {
  .Navigation ._item a {
    width: 100%;
    height: 78px;
    display: flex;
    justify-items: center;
    align-items: center;
    text-align: center;
    color: var(--color-white);
  }
}

@media screen and (min-width:821px),
print {
  .Navigation ._item a span {
    display: block;
    font-weight: 500;
    width: 100%;
  }
}


.bg-black {
  background: url(./../img/03/bg-black.png);
  background-size: contain;
}

@media screen and (min-width:821px),
print {
  .bg-pink {
    background: url(./../img/03/bg-black.png);
    background-size: auto;
  }
}


/*---------------------------------------------- 
  About
----------------------------------------------*/

#about {
  padding: 14rem 0 0;
}

._catch {
  display: block;
  margin: 0 auto 2rem;
  font-size: 8rem;
  line-height: 1;
  text-align: center;
  color: var(--color-pink);
}

._catch span {
  display: block;
}

@media screen and (min-width:821px),print {
  ._catch span {
    display: inline;
  }
}

@media screen and (min-width:821px),
print {
  ._catch {
    display: block;
    margin: 0 auto 2rem;
    font-size: 6rem;
    line-height: 1;
    text-align: center;
  }
}

._title {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-pink);
  margin: 0 auto 8rem;
}

@media screen and (min-width:821px),
print {
  ._title {
    font-size: 2.4rem;
    text-align: center;
  }
}


.about_head {
  position: relative;
  text-align: center;
  padding: 0 2rem;
}

.about-model-l,
.about-model-r {
  display: block;
  position: absolute;
}

.about-model-l {
  top: 0;
  left: 2rem;
  width: 8.7rem;
}

.about-model-r {
  top: 0;
  right: 2rem;
  width: 10.6rem;
}

@media screen and (min-width:821px),
print {

  .about_head {
    padding: 0;
  }

  .about-model-l {
    top: -6rem;
    left: 19rem;
    width: 10.7rem;
  }

  .about-model-r {
    top: -6rem;
    right: 17rem;
    width: 10.7rem;
  }
}


._label {
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto 6rem;
  padding: 1rem 1.8rem;
  font-size: 3.2rem;
  font-weight: 500;
  text-align: center;
  background: #fff;
  border-radius: 5px;
  color: var(--color-pink);
}

@media screen and (min-width:821px),
print {
  ._label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto 4rem;
    padding: 1rem 1.8rem;
    font-size: 2.8rem;
    border-radius: 5px;
  }
}

._paragraph {
  font-size: 2.8rem;
  line-height: 1.5;
  color: #fff;
  text-align: left;
}

._paragraph:not(:first-of-type) {
  margin-top: 1em;
}

@media screen and (min-width:821px),
print {
  ._paragraph {
    font-size: 1.8rem;
    line-height: 1.6;
    text-align: center;
  }

  ._paragraph:not(:first-of-type) {
    margin-top: 1em;
  }
}

@media screen and (min-width:821px),
print {
  ._paragraph ._txt{
    display: block;
  }
}

#Message {
  margin: 8rem auto 0;
  padding: 0 0 14rem;
}

@media screen and (min-width:821px),
print {
  #Message {
    width: 100%;
    margin: 8rem 0 0;
    padding: 0 0 14rem;
    background: transparent;
    border-radius: 0;
  }
}

.CommentBox {
  position: relative;
  display: block;
  border-radius: 5rem;
  background: #fff5f8;
}


@media screen and (min-width:821px),
print {
  .CommentBox {
    display: flex;
    justify-content: center;
    border-radius: 5rem;
    overflow: hidden;
    background: #fff5f8;
  }
}


.CommentBox ._left {
  position: relative;
  padding: 8rem 0 0;
  width: 100%;
  margin-bottom: 18rem;
}

@media screen and (min-width:821px),
print {
  .CommentBox ._left {
    position: relative;
    padding: 6rem 0 0;
    width: 36rem;
    margin-bottom: 0;
  }
}

.CommentBox ._left ._title {
  padding-left: 5.5rem;
  font-size: 6rem;
  margin-bottom: 2rem;
  text-align: left;
  color: var(--color-pink);
}

@media screen and (min-width:821px),
print {
  .CommentBox ._left ._title {
    padding-left: 7rem;
    font-size: 4.4rem;
    margin-bottom: 1.8rem;
  }
}

.CommentBox ._left ._catch {
  padding-left: 5.5rem;
  font-size: 2.8rem;
  line-height: 1.5;
  text-align: left;
  color: var(--color-pink);
}

@media screen and (min-width:821px),
print {
  .CommentBox ._left ._catch {
    padding-left: 7rem;
    font-size: 1.6rem;
    text-align: left;
    white-space: nowrap;
  }
}

.CommentBox ._left ._model {
  position: absolute;
  width: 29.3rem;
  top: -2.5rem;
  right: 3.5rem;
}

@media screen and (min-width:821px),
print {
  .CommentBox ._left ._model {
    position: static;
    display: block;
    margin: 6.4rem 0 0 4rem;
  }
}


.CommentBox ._right {
  width: 100%;
  padding: 12rem 5rem;
  background: url(./../img/message-bg-sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5rem;
}

@media screen and (min-width:821px),
print {
  .CommentBox ._right {
    width: 84rem;
    padding: 8.8rem 7rem 8.8rem 14rem;
    background: url(./../img/message-bg.png);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: auto;
    border-radius: 0;
  }
}

.CommentBox ._right ._comment {
  font-size: 2.4rem;
  line-height: 1.5;
  color: #333;
  letter-spacing: -.03em;
}

.CommentBox ._right ._comment:not(:first-of-type) {
  margin-top: 1em;
}

@media screen and (min-width:821px),
print {
  .CommentBox ._right ._comment {
    font-size: 1.8rem;
    line-height: 1.6;
    color: #333;
  }

  .CommentBox ._right ._comment:not(:first-of-type) {
    margin-top: 1em;
  }
}


#Message ._description {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 2rem;
  background: #fff6f9;
  overflow: hidden;
  margin: 4rem auto 0;
}

@media screen and (min-width:821px),
print {
  #Message ._description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: 2rem;
    background: #fff6f9;
    overflow: hidden;
    margin: 4rem auto 0;
  }
}

#Message ._description ._feature {
  padding: 5rem 3.5rem 3rem;
  border-radius: 2rem 2rem 0 0;
  overflow: hidden;
  border: 1px dashed var(--color-pink);
  border-bottom: none;
}

@media screen and (min-width:821px),
print {
  #Message ._description ._feature {
    padding: 4rem 3.5rem 3rem;
    border-radius: 2rem 2rem 0 0;
    overflow: hidden;
    border: 1px dashed var(--color-pink);
    border-bottom: none;
  }
}

#Message ._description ._Name {
  display: block;
  margin: 0 auto 3rem;
  font-size: 2.6rem;
  color: var(--color-pink);
  text-align: left;
}

@media screen and (min-width:821px),
print {
  #Message ._description ._Name {
    display: block;
    font-size: 2rem;
  }
}

#Message ._description ._history {
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: left;
  letter-spacing: .05em;
}

@media screen and (min-width:821px),
print {
  #Message ._description ._history {
    font-size: 1.4rem;
    line-height: 1.6;
    
  }
}

@media screen and (min-width:821px),
print {
  #Message ._description ._history ._txt {
    display: block;
  }
}

#Message ._description ._sns {
  color: #fff;
  background: var(--color-pink);
  padding: 2rem 6.5rem;
  font-size: 2.4rem;
}

#Message ._description ._sns a {
  color: #fff;
  line-height: 1.3;
}

@media screen and (min-width:821px),
print {
  #Message ._description ._sns {
    color: #fff;
    background: var(--color-pink);
    padding: 1.3rem 4.2rem .6rem;
    font-size: 1.4rem;
  }

  #Message ._description ._sns a {
    color: #fff;
    line-height: 1.85;
  }
}



/*-----------------------------------
 #limitedcolor
-----------------------------------*/

.limitedcolor-bg {
  background: url(./../img/limitedcolor-bg.png);
  background-size: cover;
}

@media screen and (min-width:821px),
print {
  .limitedcolor-bg {
    background: url(./../img/limitedcolor-bg.png);
    background-size: auto;
  }
}

/* #limitedcolor {} */

#limitedcolor {
  padding: 14rem 0;
}

#limitedcolor ._catch {
  color: var(--color-pink);
}

#limitedcolor ._title {
  color: var(--color-pink);
  text-align: center;
}

@media screen and (min-width:821px),
print {
  #limitedcolor ._title {
    text-align: center;
  }
}

#limitedcolor ._title+._comment {
  font-size: 2.8rem;
  color: #fff;
  line-height: 1.6;
  text-align: center;
}

@media screen and (min-width:821px),
print {
  #limitedcolor ._title+._comment {
    margin-top: -4rem;
    font-size: 1.8rem;
    line-height: 1.6;
    text-align: center;
  }
}

#limitedcolor ._comment ._txt {
  display: inline-block;
}

@media screen and (min-width:821px),
print {

  #limitedcolor ._comment ._txt {
    display: block;
  }
}

.colorvariation {
  margin: 6rem auto 0;
  padding: 0 2rem;
}

@media screen and (min-width:821px),
print {
  .colorvariation {
    margin: 10rem auto 0;
    padding: 0;
  }
}

.colorvariation ._product::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.colorvariation ._product:nth-of-type(odd)::after {
  transform: rotate(-2deg);
}

.colorvariation ._product:nth-of-type(even)::after {
  transform: rotate(2deg);
}

.colorvariation ._product::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.smokey-berry::before {
  background: #ffb5bd;
}

.smokey-berry::after {
  background: #ff95a1;
}

.dark-wine::before {
  background: #7d1f2c;
}

.dark-wine::after {
  background: #690715;
}

.raspberry::before {
  background: #dd448f;
}

.raspberry::after {
  background: #d6297e;
}

.saffron::before {
  background: #f9683e;
}

.saffron::after {
  background: #e4481b;
}

.deep-rake::before {
  background: #136f8f;
}

.colorvariation .products .deep-rake::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4rem);
  height: calc(100% + 4rem);
  background: #046081;
}

.colorvariation ._product {
  position: relative;
  z-index: 2;
}

@media screen and (min-width:821px),
print {
  .colorvariation ._product {
    position: relative;
    width: 120rem;
    height: 89rem;
    z-index: 2;
  }
}

.colorvariation ._product:not(:last-of-type) {
  margin-bottom: 7rem;
}

@media screen and (min-width:821px),
print {
  .colorvariation ._product:not(:last-of-type) {
    margin-bottom: 7rem;
  }
}

.colorvariation ._box {
  position: relative;
  z-index: 2;
  display: block;
  padding: 8rem 4rem;
}

@media screen and (min-width:821px),
print {
  .colorvariation ._box {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 8rem 4rem;
  }
}

.colorvariation ._modelimage {
  width: 52rem;
}


@media screen and (min-width:821px),
print {
  .colorvariation ._product:nth-of-type(even) ._box {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width:821px),
print {
  .colorvariation ._product:nth-of-type(even) ._description {
    margin-right: 4rem;
  }
}

.colorvariation ._description {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
}

@media screen and (min-width:821px),
print {
  .colorvariation ._description {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: calc(100% - (52rem + 4rem));
    margin-left: 4rem;
  }
}

.colorvariation ._colorname {
  margin: 10rem 0 7rem;
  padding: 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 6rem;
  font-weight: 500;
  color: #fff;
}

@media screen and (min-width:821px),
print {
  .colorvariation ._colorname {
    margin: 0;
    padding: 3.5rem 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-writing-mode: tb-rl;
    font-size: 4.4rem;
    writing-mode: vertical-rl;
  }
}

.colorvariation ._head {
  display: inline-block;
  border-radius: 0 2rem 0 0;
  font-size: 3.2rem;
  color: #fff;
  background: var(--color-pink);
  padding: 1rem 3.5rem;
}

@media screen and (min-width:821px),
print {
  .colorvariation ._head {
    display: inline-block;
    border-radius: 0 2rem 0 0;
    font-size: 2.4rem;
    color: #fff;
    background: var(--color-pink);
    padding: 1.2rem 2.5rem;
  }
}

.colorvariation .commentBox {
  background: #fff;
  padding: 4.5rem;
  border-radius: 0 2rem 0 2rem;
}

@media screen and (min-width:821px),
print {
  .colorvariation .commentBox {
    max-width: 52rem;
    padding: 4rem 4rem 2rem 4rem;
    border-radius: 0 2rem 0 2rem;
  }
}

.colorvariation .commentBox ._comment {
  width: 100%;
  font-size: 2.8rem;
  line-height: 1.625;
  color: #333333;
}


@media screen and (min-width:821px),
print {
  .colorvariation .commentBox ._comment {
    font-size: 1.6rem;
    line-height: 1.625;
    color: #333333;
  }
}

.colorvariation ._cta {
  position: relative;
  width: 100%;
  height: 10rem;
  border: 2px solid var(--color-white);
  border-radius: 5rem;
  margin: 6rem auto 0;
}

@media screen and (min-width:821px),
print {
  .colorvariation ._cta {
    position: relative;
    width: 50rem;
    height: 10rem;
    border-radius: 5rem;
    margin: 6rem auto 0;
  }
}

.colorvariation ._cta::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.3rem;
  background: url(./../img/btn-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.colorvariation ._cta a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-white);
  font-size: 2.6rem;
}

@media screen and (min-width:821px),
print {
  .colorvariation ._cta a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 2.2rem;
  }
}

/*-----------------------------------
 #standardcolor
-----------------------------------*/
.standardcolor-bg {
  background: #ffeaf1;
}

#standardcolor {
  padding: 14rem 0;
}

#standardcolor ._catch {
  color: var(--color-pink);
}

@media screen and (min-width:821px),
print {
  #standardcolor ._catch {
    color: var(--color-pink);
  }
}

#standardcolor ._title {
  text-align: center;
  color: var(--color-pink);
}

@media screen and (min-width:821px),
print {
  #standardcolor ._title {
    color: var(--color-pink);
    text-align: center;
  }
}

#standardcolor ._inner {
  max-width: 140rem;
  padding: 0 2rem;
}

@media screen and (min-width:821px),
print {
  #standardcolor ._inner {
    max-width: 140rem;
    padding: 0;
  }
}

#standardcolor ._title+._comment {
  display: none;
}

@media screen and (min-width:821px),
print {
  #standardcolor ._title+._comment {
    display: block;
    margin-top: -4rem;
    font-size: 1.8rem;
    color: #fff;
    line-height: 1.6;
    text-align: center;
  }
}

@media screen and (min-width:821px),
print {
  #standardcolor ._comment ._txt {
    display: block;
  }
}

@media screen and (min-width:821px),
print {
  .standardcolor {
    margin: 7.5rem auto 0;
  }
}

#standardcolor .products {
  display: block;
}

@media screen and (min-width:821px),
print {
  #standardcolor .products {
    max-width: 120rem;
    margin: 0 auto;
      display: grid;
      gap: 3rem;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
  }
}

.standardcolor .products ._product {
  margin: 0;
  padding: 4rem;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width:821px),
print {
  .standardcolor .products ._product {
    display: block;
    padding: 6rem;
    background: #fff;
  }
}


.standardcolor ._modelimage {
  width: 34rem;
  height: 48rem;
  margin: 0 auto 6rem;
}

@media screen and (min-width:821px),
print {
  .standardcolor ._modelimage {
    margin: 0 auto 6rem;
  }
}

.standardcolor ._description {
  width: calc(100% - 34rem);
  padding: 0 0 0 3.5rem;
}

@media screen and (min-width:821px),
print {
  .standardcolor ._description {
    width: 100%;
    padding: 0;
  }
}

.standardcolor .colorname {
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 3.2rem;
  line-height: 1.2;
  font-weight: 500;
}

@media screen and (min-width:821px),
print {
  .standardcolor .colorname {
    margin: 0 auto 3rem;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 500;
  }
}

.standardcolor ._comment {
  font-size: 2.4rem;
  height: auto;
  line-height: 1.6;
  color: #333333;
}

@media screen and (min-width:821px),
print {
  .standardcolor ._comment {
    font-size: 1.8rem;
    line-height: 1.6;
    color: #333333;
  }
}

.standardcolor .swiper-button-next,
.standardcolor .swiper-button-prev {
  width: 4rem;
  height: 4rem;
}

@media screen and (min-width:821px),
print {

  .standardcolor .swiper-button-next,
  .standardcolor .swiper-button-prev {
    width: 8rem;
    height: 8rem;
  }
}

.standardcolor .swiper-button-next {
  right: -2rem;
}

@media screen and (min-width:821px),
print {
  .standardcolor .swiper-button-next {
    right: -4rem;
  }
}


.standardcolor .swiper-button-prev {
  left: -2rem;
}

@media screen and (min-width:821px),
print {
  .standardcolor .swiper-button-prev {
    left: -4rem;
  }
}

.standardcolor .swiper-button-next::after,
.standardcolor .swiper-button-prev::after {
  width: 4rem;
  height: 4rem;
}

@media screen and (min-width:821px),
print {

  .standardcolor .swiper-button-next::after,
  .standardcolor .swiper-button-prev::after {
    width: 4rem;
    height: 4rem;
  }
}

#standardcolor ._cta-outer {
  margin: 6rem auto 0;
}

#standardcolor ._cta {
  width: 60rem;
  height: 10rem;
  border: 2px solid #fff;
  margin: 0 auto;
  position: relative;
  border-radius: 5rem;
}

@media screen and (min-width:821px),
print {
  #standardcolor ._cta {
    width: 50rem;
    height: 10rem;
    position: relative;
  }
}

#standardcolor ._cta::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.3rem;
  background: url(./../img/btn-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;  
  filter: brightness(0) invert(1);
}

#standardcolor ._cta a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.6rem;
  color: #fff;
}

@media screen and (min-width:821px),
print {
  #standardcolor ._cta a {
    font-size: 2.2rem;
  }
}

#standardcolor ._cta + ._attention {
  display: block;
  margin: 3rem auto 0;
  font-size: 2.4rem;
  color: #fff;
  text-align: center;
}

@media screen and (min-width:821px),
print {
  #standardcolor ._cta + ._attention {
    margin: 2rem auto 0;
    font-size: 1.6rem;
  }
}

.color-black {
  color: #333333;
}

.color-beige {
  color: #d49360;
}

.color-brown {
  color: #72381a;
}

.color-navy {
  color: #261a5f;
}

.color-gray {
  color: #8f786e;
}
.color-nude {
  color: #ed7b6c;
}

/*-----------------------------------
 #plussize
-----------------------------------*/
.bg-black02 {
  background: url(./../img/03/bg-black02.png);
  background-size: contain;
}

#plussize {
  padding: 14rem 0;
}

#plussize ._catch {
  color: var(--color-pink);
}

#plussize ._title {
  color: var(--color-pink);
  text-align: center;
}

@media screen and (min-width:821px),
print {
  #plussize ._title {
    color: var(--color-pink);
    text-align: center;
  }
}

.sizetable {
  padding: 0 2rem;
}


@media screen and (min-width:821px),
print {
  .sizetable {
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
  }

  .sizetable::before {
    content: "";
    flex: none;
    display: block;
    background: url(./../img/03/sizetable.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 120rem;
    height: 100.2rem;
  }

}

.sizetable ._block {
  padding: 6rem 0 3rem;
  background: #fff;
}

@media screen and (min-width:821px),
print {
  .sizetable ._block {
    padding: 0;
  }
}

.sizetable ._block:not(:last-of-type) {
  margin-bottom: 3rem;
}


.sizetable ._type {
  display: block;
  text-align: center;
  font-size: 3.2rem;
  font-weight: bold;
  color: #111111;
  margin: 2rem 0 0 0;
}

@media screen and (min-width:821px),
print {
  .sizetable ._container {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .sizetable ._top::before,
  .sizetable ._btm::before {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    display: block;
    font-size: 2.4rem;
    font-weight: bold;
    color: #111111;
  }
}

@media screen and (min-width:821px),
print {
  .sizetable ._block:not(:last-of-type) {
    margin-bottom: 0;
  }
}

.sizetable ._block img {
  display: block;
}

@media screen and (min-width:821px),
print {
  .sizetable ._block img {
    display: none;
  }
}

.sizetable ._btns {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 3rem 0;
}

@media screen and (min-width:821px),
print {
  .sizetable ._btns {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 3rem 0;
  }
}

.sizetable ._btns ._btn {
  position: relative;
  margin: 0 1rem;
  width: 25rem;
  height: 8rem;
  border: 2px solid #111111;
  border-radius: 4rem;
}

@media screen and (min-width:821px),
print {
  .sizetable ._btns ._btn {
    position: relative;
    margin: 0 4rem;
    width: 18rem;
    height: 6rem;
    border-radius: 3rem;
  }
}

.sizetable ._btns ._btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.3rem;
  background: url(./../img/btn-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
}


.sizetable ._btns ._btn a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #111111;
  font-size: 3rem;
}

@media screen and (min-width:821px),
print {
  .sizetable ._btns ._btn a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #111111;
    font-size: 2.2rem;
  }
}

/*-----------------------------------
 #point
-----------------------------------*/
.point-bg {
  background: url(./../img/point-bg.png);
  background-size: cover;
}

#point ._title {
  text-align: center;
}

@media screen and (min-width:821px),
print {
  .point-bg {
    background: url(./../img/point-bg.png);
    background-size: auto;
  }
}

#point {
  padding: 14rem 0;
}

#point ._pointlist {
  list-style-type: none;
}


._pointlist .point {
  background: #fff;
  padding: 6rem 5.5rem 8rem;
  min-height: 44rem;
}

._pointlist .point:not(:first-of-type) {
  margin: 2rem auto 0;
}

@media screen and (min-width:821px),
print {
  ._pointlist .point {
    background: #fff;
    padding: 7rem 13rem 8rem;
    min-height: inherit;
  }

  ._pointlist .point:not(:first-of-type) {
    margin: 2rem auto 0;
  }

}

._pointlist ._head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 2rem;
}

@media screen and (min-width:821px),
print {
  ._pointlist ._head {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 2rem;
  }
}

._pointlist .point ._numbering {
  position: relative;
  font-size: 5rem;
  padding-right: 4.2rem;
  margin-right: 4.2rem;
}

._pointlist .point ._numbering::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background: url(./../img/point-border.png);
  width: 1px;
  height: 10rem;
  background-size: auto;
  background-repeat: no-repeat;
}

@media screen and (min-width:821px),
print {
  ._pointlist .point ._numbering {
    position: relative;
    font-size: 5rem;
    padding-right: 4.2rem;
    margin-right: 4.2rem;
  }

  ._pointlist .point ._numbering::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: url(./../img/point-border.png);
    width: 1px;
    height: 10rem;
    background-size: auto;
    background-repeat: no-repeat;
  }


}

._numbering ._txt,
._numbering ._number {
  display: block;
  line-height: 1;
  text-align: center;
  color: var(--color-pink);
}

@media screen and (min-width:821px),
print {

  ._numbering ._txt,
  ._numbering ._number {
    display: block;
    line-height: 1;
    text-align: center;
  }
}

._numbering ._txt {
  font-size: 40%;
  font-weight: 500;
}

@media screen and (min-width:821px),
print {
  ._numbering ._txt {
    font-size: 40%;
    font-weight: 500;
  }
}

._numbering ._number {
  font-size: 150%;
  font-weight: bold;
}

@media screen and (min-width:821px),
print {
  ._numbering ._number {
    font-size: 150%;
    font-weight: bold;
  }
}

#point ._pointlist ._head ._title {
  font-size: 4rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--color-pink);
  margin: 0;
  text-align: left;
}

@media screen and (min-width:821px),
print {
  #point ._pointlist ._head ._title {
    font-size: 4rem;
    font-weight: 500;
    margin: 0;
  }
}

._pointlist ._head ._icon {
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  width: 17rem;
  transform: translateY(100%);
}

@media screen and (min-width:821px),
print {
  ._pointlist ._head ._icon {
    position: absolute;
    top: 0;
    bottom: auto;
    right: 0;
    left: auto;
    width: auto;
    transform: translateY(0);
    width: 17rem;
  }
}

.point ._comment {
  font-size: 2.4rem;
  line-height: 1.6;
  width: calc(100% - (17.5rem + 4.6rem));
  margin-left: auto;
}

.point ._comment .-attention {
  color: #828181;
}

#point01 ._comment,
#point03 ._comment {
  width: 100%;
}

.point ._comment ._txt {
  display: block;
}

@media screen and (min-width:821px),
print {
  .point ._comment {
    font-size: 1.8rem;
    line-height: 1.6;
    width: 100%;
  }

  .point ._comment ._txt {
    display: block;
  }
}

.point ._sizefeature {
  margin: 6.4rem auto 0;
}

@media screen and (min-width:821px),
print {
  .point ._sizefeature {
    margin: 6.4rem auto 0;
  }
}

._sizefeature .sizetype:not(:last-of-type) {
  margin-bottom: 6rem;
}

@media screen and (min-width:821px),
print {
  ._sizefeature .sizetype:not(:last-of-type) {
    margin-bottom: 6rem;
  }
}

.sizetype .column02 {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media screen and (min-width:821px),
print {
  .sizetype .column02 {
    display: flex;
    justify-content: center;
  }
}

.sizetype .column02 ._img {
  margin: 0;
}


.sizetype .column02 ._txt:nth-of-type(1) {
  order: 1;
}

.sizetype .column02 ._txt:nth-of-type(2) {
  order: 2;
}

.sizetype .column02 ._img:nth-of-type(1) {
  order: 3;
  margin-top: 3rem;
}

.sizetype .column02 ._img:nth-of-type(2) {
  order: 4;
}

@media screen and (min-width:821px),
print {
  .sizetype .column02 ._txt:nth-of-type(1) {
    width: 33.8rem;
  }

  .sizetype .column02 ._txt:nth-of-type(2) {
    width: 60.2rem;
  }

  .sizetype .column02 ._img:nth-of-type(1) {
    width: 33.8rem;
  }

  .sizetype .column02 ._img:nth-of-type(2) {
    width: 60.2rem;
    margin-top: 3rem;
  }
}

.sizetype ._headline {
  font-size: 3.6rem;
  padding: 1rem 0;
  line-height: 1;
  color: #fff;
  background: var(--color-pink);
  text-align: center;
  border-radius: 1rem;
  overflow: hidden;
  margin: 0 auto 2.8rem;
}

@media screen and (min-width:821px),
print {
  .sizetype ._headline {
    font-size: 2.6rem;
    padding: 1rem 0;
    line-height: 1;
    color: #fff;
    background: var(--color-pink);
    text-align: center;
    border-radius: 1rem;
    overflow: hidden;
    margin: 0 auto 2.8rem;
  }
}

.sizetype ._content {
  text-align: center;
}

.sizetype ._txt {
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: left;
}

.sizetype ._txt br {
  display: none;
}

@media screen and (min-width:821px),
print {
  .sizetype ._txt {
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1.5;
    text-align: center;
  }

  .sizetype ._txt br {
    display: block;
  }
}

.sizetype ._img {
  margin: 3.4rem auto 0;
}

@media screen and (min-width:821px),
print {
  .sizetype ._img {
    margin: 3.4rem auto 0;
  }
}

.point ._pointimg {
  margin: 6rem auto 0;
}

@media screen and (min-width:821px),
print {
  .point ._pointimg {
    margin: 6rem auto 0;
  }
}

/*-----------------------------------
 #coordination
-----------------------------------*/
.coordination-bg {
  background: #ffeaf1;
}

#coordination {
  padding: 14rem 0;
}

@media screen and (min-width:821px),
print {
  #coordination {
    padding: 14rem 0 17.5rem;
  }
}

#coordination ._catch {
  color: var(--color-pink);
}

@media screen and (min-width:821px),
print {
  #coordination ._catch {
    color: var(--color-pink);
  }
}

#coordination ._title {
  color: var(--color-pink);
  text-align: center;
}

@media screen and (min-width:821px),
print {
  #coordination ._title {
    color: var(--color-pink);
    text-align: center;
  }
}


.modeltype {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  background: #fff;
  padding: 6rem;
}

.modeltype:not(:first-of-type) {
  margin-top: 3rem;
}

@media screen and (min-width:821px),
print {
  .modeltype {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    background: #fff;
    padding: 6rem;
  }

  .modeltype:not(:first-of-type) {
    margin-top: 3rem;
  }
}

.modeltype ._modelimage {
  width: 52rem;
  margin-bottom: 10rem;
}

@media screen and (min-width:821px),
print {
  .modeltype ._modelimage {
    width: 40rem;
    margin-bottom: 0;
  }
}


@media screen and (min-width:821px),
print {
  .modeltype ._modelimage ._slide {
    width: 40rem;
    height: 56.4rem;
  }

  .modeltype ._modelimage ._slide img {
    width: auto;
    height: 100%;
  }
}

.modeltype ._information {
  width: 100%;
  margin-left: 0;
  font-size: 0;
}

@media screen and (min-width:821px),
print {
  .modeltype ._information {
    width: calc(100% - (40rem + 6rem));
    margin-left: 6rem;
    font-size: 0;
  }
}

.modeltype .modelname {
  font-size: 4rem;
  color: #333333;
  font-weight: 500;
  padding-bottom: 3rem;
  margin-bottom: 6rem;
  border-bottom: 1px solid var(--color-pink);
  text-align: center;
}

.modeltype .modelname span {
  font-weight: 500;
}

@media screen and (min-width:821px),
print {
  .modeltype .modelname {
    font-size: 3rem;
    color: #333333;
    font-weight: 500;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    text-align: left;
  }
}

.modeltype .coordinatedescription {
  color: var(--color-pink);
  display: block;
  margin-bottom: 3rem;
}

@media screen and (min-width:821px),
print {
  .modeltype .coordinatedescription {
    color: var(--color-pink);
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
  }
}

.modeltype .coordinatedescription dl {
  margin: 0;
}

@media screen and (min-width:821px),
print {
  .modeltype .coordinatedescription dl {
    margin: 0;
  }
}

.modeltype .coordinatedescription dt,
.modeltype .coordinatedescription dd {
  display: inline;
  font-size: 3.2rem;
  line-height: 1.58;
  font-weight: 500;
  margin: 0;
}

@media screen and (min-width:821px),
print {

  .modeltype .coordinatedescription dt,
  .modeltype .coordinatedescription dd {
    display: inline;
    font-size: 2.4rem;
  }
}

.modeltype .modeldescription {
  display: block;
  margin-left: 0;
  margin-bottom: 6rem;
}

@media screen and (min-width:821px),
print {
  .modeltype .modeldescription {
    display: inline-block;
    vertical-align: top;
    margin-left: 3rem;
    margin-bottom: 0;
  }
}

.modeltype .modeldescription dl {
  margin: 0;
}

@media screen and (min-width:821px),
print {
  .modeltype .modeldescription dl {
    margin: 0;
  }
}

.modeltype .modeldescription dt,
.modeltype .modeldescription dd {
  display: inline;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}

@media screen and (min-width:821px),
print {

  .modeltype .modeldescription dt,
  .modeltype .modeldescription dd {
    display: inline;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
  }
}

.review {
  margin-top: 4rem;
}

@media screen and (min-width:821px),
print {
  .review {
    margin-top: 4rem;
  }
}

.review ._head {
  display: inline-block;
  border-radius: 0 2rem 0 0;
  font-size: 3.2rem;
  color: #fff;
  background: var(--color-pink);
  padding: 1.2rem 5rem;
}

@media screen and (min-width:821px),
print {
  .review ._head {
    display: inline-block;
    border-radius: 0 2rem 0 0;
    font-size: 2.4rem;
    color: #fff;
    background: var(--color-pink);
    padding: 1.2rem 2.5rem;
  }
}

.review .commentBox {
  background: #ffeaf1;
  padding: 4.2rem 4.5rem;
  border-radius: 0 2rem 0 2rem;
}

@media screen and (min-width:821px),
print {
  .review .commentBox {
    background: #ffeaf1;
    padding: 4.2rem 4rem;
    border-radius: 0 2rem 0 2rem;
    min-height: 19rem;
  }
}

.review .commentBox ._comment {
  font-size: 2.8rem;
  line-height: 1.5;
  color: #333333;
}

.review .commentBox ._comment ._txt {
  display: block;
}

@media screen and (min-width:821px),
print {
  .review .commentBox ._comment {
    font-size: 1.6rem;
    line-height: 1.625;
    color: #333333;
  }

  .review .commentBox ._comment ._txt {
    display: block;
  }

}

/*-----------------------------------
 movie
-----------------------------------*/
#new_innerwear {
  padding: 14rem 0;
}

@media screen and (min-width:821px),
print {
  #new_innerwear {
    padding: 14rem 0 10rem;
  }
}
#new_innerwear ._catch,
#new_innerwear ._title {
  color: var(--color-pink);
  text-align: center;
}

#new_innerwear .product {
  background: #fff;
  padding: 8rem 3.5rem ;
}

@media screen and (min-width:821px),
print {
  #new_innerwear .product {
    padding: 6rem ;
  }
}

#new_innerwear ._prodcut_name {
  position: relative;
  font-size: 4rem;
  text-align: center;
  margin: 0 0 3.2rem;
  padding: 0 0 3rem;
  line-height: 1;
  font-weight: 500;
  
}

#new_innerwear ._prodcut_name span {
  font-weight: 500;
}
@media screen and (min-width:821px),
print {
  #new_innerwear ._prodcut_name {
    
    display: block;
    text-align: center;
    font-size: 3rem;
    padding: 0 0 2rem;
    margin: 0 auto 3.2rem;
    letter-spacing: -.025em;
  }
}

#new_innerwear ._prodcut_name::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-pink);
  position: absolute;
  bottom: 0;
  left: 0;
}

#new_innerwear ._productimage  {
  width: 52rem;
  margin: 0 auto 10rem;
}

@media screen and (min-width:821px),print {
#new_innerwear ._productimage {
  width: 40rem;
  margin: 0;
}
}

#new_innerwear ._productimage img {
  width: 100%;
  height: auto;
}

@media screen and (min-width:821px),print {
  #new_innerwear .product:nth-of-type(n+2) {
    margin: 3rem auto 0;
  }
}

@media screen and (min-width:821px),
print {
#new_innerwear .product ._container{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
}
}



@media screen and (min-width:821px),
print {
#new_innerwear ._product_information {
  width: calc(100% - (40rem + 6rem));
}
}

#new_innerwear ._cta {
  position: relative;
  width: 47rem;  
  height: 9rem;
  border-radius: 4.5rem;
  border: 2px solid #111111;
  margin: 3rem auto 0;
}

@media screen and (min-width:821px),
print {
  #new_innerwear ._cta {
    border-radius: 3rem;
    max-width: 32rem;
    width: 100%;
    height: 6rem;
    margin: 3rem auto 0;
  }
}

#new_innerwear ._cta a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  height: 100%;
  font-weight: 500;
}

@media screen and (min-width:821px),print {
  #new_innerwear ._cta a {
    font-size: 2rem;
  }
}

#new_innerwear ._cta a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.3rem;
  background: url(./../img/btn-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/*-----------------------------------
 movie
-----------------------------------*/
#movie {
  padding: 14rem 0;
}

@media screen and (min-width:821px),
print {
  #movie {
    padding: 14rem 0 10rem;
  }
}

#movie ._catch {
  color: var(--color-pink);
}

@media screen and (min-width:821px),
print {
  #movie ._catch {
    color: var(--color-pink);
  }
}

#movie ._title {
  color: var(--color-pink);
  text-align: center;
}

@media screen and (min-width:821px),
print {
  #movie ._title {
    color: var(--color-pink);
    text-align: center;
  }
}

#movie ._comment {
  font-size: 2.8rem;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}

@media screen and (min-width:821px),
print {
  #movie ._comment {
    font-size: 1.8rem;
    text-align: center;
  }
}

#movie ._comment ._txt {
  display: block;
  line-height: 1.6;
}

@media screen and (min-width:821px),
print {
  #movie ._comment ._txt {
    display: block;
    line-height: 1.6;
  }
}

.movieWrap {
  margin: 8rem auto 0;
  max-width: 120rem;
}

@media screen and (min-width:821px),
print {
  .movieWrap {
    margin: 8rem auto 0;
    max-width: 120rem;
  }
}

._movies {
  display: block;
}

@media screen and (min-width:821px),
print {
  ._movies {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

#movie ._movie ._title {
  display: block;
  text-align: center;
  margin-bottom: 2rem;
}

._movies ._movie {
  width: 100%;
}

._movies ._movie img {
  width: 100%;
  height: auto;
}

._movies ._movie.comingsoon {
  pointer-events: none;
}

._movies ._movie:not(:first-of-type) {
  margin-top: 3rem;
}

@media screen and (min-width:821px),
print {
  ._movies ._movie {
    max-width: 38rem;
    width: calc((100% / 3) - 1.5rem);
  }

  ._movies ._movie:not(:first-of-type) {
    margin-top: 0;
    margin-left: 3rem;
  }
}

#movie ._cta-outer {
  margin: 7rem auto 0;
}

@media screen and (min-width:821px),print {
  #movie ._cta-outer {
    margin: 8rem auto 14rem;
  } 
}


#movie ._cta {
  position: relative;
  width: 54rem;
  height: 8rem;
  border: 2px solid #fff ;
  margin: 0 auto;
  border-radius: 4.5rem;
}

@media screen and (min-width:821px),print {
  #movie ._cta {
    border: 2px solid #fff ;
    width: 71rem;
    height: 6rem;
    margin: 0 auto;
    border-radius: 3rem;
  }
}

#movie ._cta:nth-of-type(n+2) {
  margin-top: 4rem;
}

#movie ._cta a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 100%;
  font-size: 2.4rem;
}

@media screen and (min-width:821px),print {
  #movie ._cta a {
      font-size: 2.2rem;
  }
}

@media screen and (min-width:821px),print {
#movie ._cta:nth-of-type(n+2) {
  margin: 2rem auto 0;
}
}

#movie ._cta a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.3rem;
  background: url(./../img/btn-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;  
  filter: brightness(0) invert(1);
}


/*-----------------------------------
 movie
-----------------------------------*/
#milan-fashion {
  padding: 14rem 0;
}

@media screen and (min-width:821px),
print {
  #milan-fashion {
    padding: 14rem 0 10rem;
  }
}

#milan-fashion ._catch ,
#milan-fashion ._title {
  text-align: center;
  color: var(--color-pink);
}

#milan-fashion ._catch span {
  display: block;
  line-height: 1;
}

@media screen and (min-width:821px),print {
  #milan-fashion ._catch span {
    display: inline;
  }
}

#milan-fashion ._catch .space {
  display: none;
}

@media screen and (min-width:821px),print {
  #milan-fashion ._catch .space {
    display: inline-block;
  }
}


#milan-fashion ._collection {
  padding: 0 3.5rem;
}

@media screen and (min-width:821px),print {
  #milan-fashion ._collection {
    padding: 0 ;
  }
}

#milan-fashion .products {
  display: grid;

}

#milan-fashion .products {
  display: block;
  }
@media screen and (min-width:821px),print {
  #milan-fashion .products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
}

  @media screen and (min-width:821px),print {
    #milan-fashion .products {
      gap: 4rem;
      }
  }

#milan-fashion .products .product:nth-of-type(1) { grid-area: 1 / 1 / 2 / 2; }
#milan-fashion .products .product:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3; }
#milan-fashion .products .product:nth-of-type(3) { grid-area: 1 / 3 / 2 / 4; }
#milan-fashion .products .product:nth-of-type(4) { grid-area: 2 / 1 / 3 / 2; }
#milan-fashion .products .product:nth-of-type(5) { grid-area: 2 / 2 / 3 / 3; }
#milan-fashion .products .product:nth-of-type(6) { grid-area: 2 / 3 / 3 / 4; }

#milan-fashion .products .product:nth-of-type(n+2) {
  margin-top: 6rem;
}


@media screen and (min-width:821px),print {
#milan-fashion .products .product {
  margin: 0 auto 6rem;
}
}

@media screen and (min-width:821px),print {
  #milan-fashion .products .product:nth-of-type(n+2) {
    margin: 0;
  }
}

#milan-fashion ._product_image{
  margin: 0 auto 3rem;
  text-align: center;
  width: 52rem;
}

@media screen and (min-width:821px),print {
  #milan-fashion ._product_image{
    width: auto;
    margin: 0 ;
  }
}

#milan-fashion ._product_image img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

#milan-fashion ._product_name {
  margin: 0 auto 3rem;
  font-size: 3rem;
  line-height: 1.3333;
  text-align: left;
}

@media screen and (min-width:821px),print {
#milan-fashion ._product_name{
  margin: 2rem auto 2.8rem;
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: -.05em;
  color: var(--color-white);
}
}

#milan-fashion ._product_name span {
  display: inline-block;
  white-space: nowrap;
}


#milan-fashion ._product_name a {
  color: var(--color-white);
}

#milan-fashion ._cta {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4.5rem;
  border: 2px solid #fff;
  width: 47rem;
  height: 9rem;
  margin: 0 auto;
}

@media screen and (min-width:821px),
print {
  #milan-fashion ._cta {
    width: 32rem;
    height: 6rem;
    margin: 0 auto;
    border-radius: 3rem;
  }
}

#milan-fashion ._cta a {
  font-size: 3rem;
  color: #fff;
}
@media screen and (min-width:821px),
print {
  #milan-fashion ._cta a {
    font-size: 2rem;
    font-weight: 500;
  }
}

#milan-fashion ._cta a::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 3rem;
transform: translateY(-50%);
width: 1.5rem;
height: 1.8rem;
background: url(./../img/btn-arrow.png);
background-size: contain;
background-repeat: no-repeat;  
filter: brightness(0) invert(1);
}

@media screen and (min-width:821px),print {
  #milan-fashion ._cta a::after {
    right: 2rem;
    width: 1.6rem;
    height: 1.3rem;
  }
}
/*  */


@media screen and (min-width:821px),
print {
  #sticker {
    margin: 0 auto 6rem;
  }

  #sticker ._inner {
    max-width: inherit;
  }
}

.present {
  background-repeat: no-repeat;
  border-radius: 5rem;
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  width: calc(100% - 4rem);
  margin: 0 auto;
  padding-bottom: 53rem;
  background: url(./../img/present-bg-sp.png);
  background-size: cover;
  background-position: bottom;
}

@media screen and (min-width:821px),
print {
  .present {
    padding-bottom: 0;
  }
}



.present-end {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5.5rem;
}

@media screen and (min-width:821px),
print {
  .present-end {
    background: rgba(0, 0, 0, .4);
    padding: 0 ;
  }
}

.present::before {
  pointer-events: none;
  content: "";
  display: block;
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
  border: 1px solid var(--color-pink);
  border-radius: 5rem;
}

@media screen and (min-width:821px),
print {
  .present::before {
    display: none;
  }
}

@media screen and (min-width:821px),
print {
  .present {
    width: 140rem;
    margin: 0 auto;
    background: url(./../img/present-bg.jpg);
    background-size: auto;
    background-position: 0 0;
    padding: 7.6rem 10rem 8rem;
  }
}

#sticker .present>._title {
  margin: 7.6rem auto 6rem;
  text-align: center;
}

@media screen and (min-width:821px),
print {
  #sticker .present>._title {
    text-align: center;
    margin: 0;
  }
}


@media screen and (min-width:821px),
print {
  .present::after {
    pointer-events: none;
    content: "";
    position: absolute;
    display: block;
    top: 2rem;
    left: 2rem;
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
    border: 1px solid var(--color-pink);
    border-radius: 5rem;
    overflow: hidden;
  }
}

.present ._title {
  color: var(--color-pink);
  margin: 0 0 2.8rem;
}

.present ._title span {
  display: block;
}

@media screen and (min-width:821px),
print {
  .present ._title {
    color: var(--color-pink);
    margin: 0 0 2.8rem;
  }

  .present ._title span {
    display: block;
  }
}

.present ._title .-small {
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.7;
}

@media screen and (min-width:821px),
print {
  .present ._title .-small {
    font-size: 3.6rem;
    font-weight: 500;
  }
}

.present ._title .-big {
  font-size: 6rem;
  font-weight: 500;
  line-height: 1.2;
}

@media screen and (min-width:821px),
print {
  .present ._title .-big {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1.2;
  }
}

.present-sticker {
  display: block;
  margin: 0 auto 3rem;
}

@media screen and (min-width:821px),
print {
  .present-sticker {
    display: block;
    margin: 3rem auto;
  }
}


#sticker .present ._comment {
  font-size: 2.8rem;
  line-height: 1.6;
  text-align: left;
  padding: 0 5.5rem;
}

#sticker .present ._comment ._txt {
  display: inline;
}

@media screen and (min-width:821px),
print {
  #sticker .present ._comment {
    font-size: 1.8rem;
    line-height: 1.6;
    text-align: center;
    padding: 0;
  }

  #sticker .present ._comment ._txt {
    display: block;
  }
}

.present ._comment-attention {
  text-align: center;
  display: block;
  margin: 1.5rem 0 0;
  padding: 0 5.5rem;
  font-size: 2.8rem;
  line-height: 1.6;
  text-align: left;
  color: #ababab;
}

@media screen and (min-width:821px),
print {
  .present ._comment-attention {
    text-align: center;
    display: block;
    margin: 1.5rem 0 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #ababab;
    padding: 0;
  }
}

._targetproduct {
  width: calc(100% - (5.5rem * 2));
  margin: 6rem auto 0;
  background: rgba(255, 255, 255, .7);
  text-align: center;
  padding: 3rem 0 3.8rem;
}

@media screen and (min-width:821px),
print {
  ._targetproduct {
    width: 70rem;
    padding: 0;
    margin: 6rem auto 0;
    background: rgba(255, 255, 255, .7);
    text-align: center;
    padding: 3rem 0 3.8rem;
  }
}

._targetproduct ._head {
  display: block;
  font-size: 2.8rem;
  text-align: center;
  margin: 0 auto 2rem;
  font-weight: 500;
}

@media screen and (min-width:821px),
print {
  ._targetproduct ._head {
    display: block;
    font-size: 2.2rem;
    text-align: center;
    margin: 0 auto 2rem;
  }
}

._targetproduct ._targetlist {
  display: inline-block;
}

@media screen and (min-width:821px),
print {
  ._targetproduct ._targetlist {
    display: inline-block;
  }
}

._targetproduct ._targetlist ._product {
  text-align: left;
  font-size: 2.4rem;
  line-height: 1.75;
}

@media screen and (min-width:821px),
print {
  ._targetproduct ._targetlist ._product {
    text-align: left;
    font-size: 1.6rem;
    line-height: 1.75;
  }
}

._targetproduct ._targetlist ._product a{
  color: #333333;
}

.present ._model {
  z-index: 2;
  position: absolute;
  bottom: 0;
  width: 50.1rem;
  right: -3.5rem;
}

@media screen and (min-width:821px),
print {
  .present ._model {
    z-index: 2;
    position: absolute;
    width: auto;
    bottom: 0;
    width: 46.4rem;
    right: -3.5rem;
  }
}

._targetproduct ._cta {
  width: 90%;
  height: 8rem;
  border: 2px solid #111111;
  margin: 6rem auto 0;
  position: relative;
  border-radius: 5rem;
}

@media screen and (min-width:821px),
print {
    ._targetproduct ._cta {
    width: 40rem;
    height: 6rem;
    position: relative;
    margin: 4rem auto 0;
  }
}

._targetproduct ._cta::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.3rem;
  background: url(./../img/btn-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;  
}

._targetproduct ._cta a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.6rem;
  color: #111111;
}

@media screen and (min-width:821px),
print {
    ._targetproduct ._cta a {
    font-size: 2.2rem;
  }
}

.present + ._cta {
  width: 100%;
  height: 10rem;
  border: 2px solid #111111;
  margin: 6rem auto;
  position: relative;
  border-radius: 5rem;
}

@media screen and (min-width:821px),
print {
  .present + ._cta {
    width: 80rem;
    height: 6rem;
    position: relative;
    margin: 4rem auto 0;
  }
}

.present + ._cta::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.3rem;
  background: url(./../img/btn-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;  
}

.present + ._cta a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.6rem;
  color: #111111;
}

@media screen and (min-width:821px),
print {
  .present + ._cta a {
    font-size: 2.2rem;
  }
}

/*  */

.end img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  height: auto;
}

._modelimage {
  position: relative;
}

.swiper {
  overflow: inherit;
}

.swiper-wrapper {
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}


.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 .5rem;
}


.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: -2rem;
  transform: translateY(100%);
}


.swiper-button-prev {

  left: -4rem;
}

@media screen and (min-width:821px),
print {
  .swiper-button-prev {
    left: -2rem;
  }
}

.swiper-button-next {
  right: -4rem;
}

@media screen and (min-width:821px),
print {
  .swiper-button-next {
    right: -2rem;
  }
}

.swiper-button-next,
.swiper-button-prev {
  width: 8rem;
  height: 8rem;
}

@media screen and (min-width:821px),
print {

  .swiper-button-next,
  .swiper-button-prev {
    width: 4rem;
    height: 4rem;
  }
}

.swiper-button-next::after,
.swiper-button-prev::after {
  width: 8rem;
  height: 8rem;
  font-size: 0;
}

@media screen and (min-width:821px),
print {

  .swiper-button-next::after,
  .swiper-button-prev::after {
    width: 4rem;
    height: 4rem;
    font-size: 0;
  }
}

.swiper-button-next::after {
  background: url(./../img/next-icon.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.swiper-button-prev::after {
  background: url(./../img/prev-icon.png);
  background-size: cover;
  background-repeat: no-repeat;
}

/* ページネーションのサイズと色 */
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #000000;
}

.swiper-pagination-bullet {
  border: 1px solid #000000;
  background: transparent;
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
}

@media screen and (min-width:821px),
print {
  .swiper-pagination-bullet {
    border: 1px solid #000000;
    background: transparent;
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
  }
}

span.newicon{
	color: #f2416b;
}