@charset "UTF-8";
:root {
  --color-bg: #FAF6F5;
  --color-bg2: #FBF6F5;
  --color-bg3: #F9F5F5;
  --color-text-green: #367061;
  --color-text01: #5A5151;
  --color-border: #F3BFBB;
  --color-white-border: #707070;
  --color-black: #3E3E3E;
  --color-gray: #9D9D9D;
  --color-red: #FF0000;
  --color-pink: #E48AA1;
  --color-blue: #AAEBDF;
  --color-orange: #FFCE94;
  --font-en: brando, serif;
  --font-ja: dnp-shuei-mincho-pr6n, sans-serif;;
}
/* reset */
html {
  font-size: 16px;
}
p, ul, ol, table {
  margin: 0;
}
/* default */
.main-section-wrapper {
  width: 1170px;
  margin: 0 auto;
}
.global-wrapper {
  height: auto;
}
.footer-wrapper {
  min-width: 1170px;
}
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
a:link, a:visited {
  color: inherit;
}
picture {
  display: block;
}
img {
  max-height: 100%;
}
.footer-wrapper .bottom .inner .copyrights {
  margin-top: 14px;
}
/* default-end */
/* ここから入力 */
.feature * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.lazyload {
  opacity: 0;
}
.lazyloaded {
  animation-name: lazy;
  animation-fill-mode: forwards;
  animation-duration: 1.2s;
  animation-delay: 1.2s;
  animation-direction: normal;
  opacity: 0;
}
@keyframes lazy {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.feature {
  position: relative;
  margin: 0 auto;
  padding-bottom: 40px;
  overflow: hidden;
  font-family: var(--font-ja);
}
.feature p {
  color: var(--color-text-black);
}
.title-box {
  width: 100%;
  /* padding: 120px 0; */
  margin: 0 auto;
  text-align: center;
  /* background: url(../img/mv_bg.jpg) no-repeat center center; */
  animation-name: top-anime;
  animation-fill-mode: forwards;
  animation-duration: 1.8s;;
  animation-direction: normal;
  opacity: 0;
  position: relative;
  background: #fff;
}
@keyframes top-anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.title-box .page-title {
  width: 100%;
  max-width: 2000px;
  aspect-ratio: 20/9;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.title-box .page-title img {
  width: 100%;
}


.about-area {
  background: var(--color-bg);
}
.about-area .inner-box {
  max-width: 1370px;
  margin: 0 auto;
  padding: 170px 0 40px;
}
.about-area .area-title {
  max-width: 529px;
}
.about-area .area-content {
  display: flex;
  gap: 50px;
  margin-bottom: 80px;
}
.about-area .area-content + .area-content {
  flex-direction: row-reverse;
}
.about-area .area-content picture {
  width: 50%;
}
.about-area .area-content .area-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 483px;
  color: var(--color-text01);
  font-size: 0.875rem; /* 14px */
}
.about-area .area-content .area-text .pb1 {
  padding-bottom: 1lh;
}
@media screen and (max-width: 767px) {
  .feature {
    padding-bottom: 0;
  }

  .about-area {
    padding-block: 60px 20px;
  }
  .about-area .inner-box {
    padding: 0;
  }
  .about-area .area-title {
    height: 50px;
  }
  .about-area .area-content {
    flex-direction: column !important;
    gap: 20px;
    width: 90%;
    margin: 0 auto 20px;
  }
  .about-area .area-content .area-text {
    text-align: center;
  }
  .about-area .area-content .area-text span {
    display: block;
  }
  .about-area .area-content picture {
    width: 100%;
  }
  .about-area .area-content .area-text {
    width: auto;
  }
}

.nav-list {
  display: flex;
  justify-content: center;
  gap: 200px;
  padding-block: 120px;
}
@media screen and (max-width: 767px) {
  .nav-list {
    gap: 40px;
  }
}
.nav-list a {
  position: relative;
  font-family: var(--font-en);
  font-size: 1.875rem; /* 30px */
  letter-spacing: 2px;
  text-decoration: none;
}
.nav-list a::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  height: 1px;
  background: var(--color-border);
}
#sale,
#collection {
  margin-top: -100px;
  padding-top: 100px;
}
@media screen and (max-width: 767px) {
  .nav-list {
    padding-block: 40px 60px;
  }
    .nav-list a {
    font-size: 1.25rem; /* 20px */
  }
  #sale {
    margin-top: -82px;
    padding-top: 82px;
  }
  #collection {
    margin-top: -142px;
    padding-top: 82px;
  }
}

.sale-area .inner-box {
  max-width: 1370px;
  margin: 0 auto;
  color: var(--color-text01);
}
.sale-area .sale-title {
  max-width: 410px;
}
.sale-area .sale-list {
  max-width: 1110px;
  margin: 0 auto;
  padding-bottom: 100px;
}
.sale-area .sale-list li {
  display: flex;
  flex-direction: column;
}
.sale-area .sale-list li picture {
  position: relative;
  z-index: 1;
  width: 750px;
}
.sale-area .sale-list li .sale-detail {
  position: relative;
  z-index: 2;
  width: 750px;
  padding: 50px;
  margin: -150px 0 150px auto;
  background: url("../img/text_bg.png") var(--color-bg2) no-repeat left bottom / contain;
}
.sale-area .sale-list li:nth-child(even) picture {
  margin-left: auto;
}
.sale-area .sale-list li:nth-child(even) .sale-detail {
  position: relative;
  margin: -150px auto 150px 0;
  background: none;
}
.sale-area .sale-list li:nth-child(even) .sale-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url("../img/text_bg.png") var(--color-bg2) no-repeat left bottom / contain;
  transform: scaleX(-1);
}
.sale-area .sale-list li:nth-child(n + 3) .sale-detail {
  width: 786px;
}
.sale-area .sale-list li:nth-child(3) .sale-detail {
  background-position: right bottom;
}
.sale-detail h3,
.collection-item .collection-text h3,
.collection-area .collection-list h3 {
  margin-bottom: 2px;
}

.sale-detail h3 span,
.collection-item .collection-text h3 span,
.collection-area .collection-list h3 span {
  line-height: 32px;
}
.sale-detail h3 .en,
.collection-item .collection-text h3 .en,
.collection-area .collection-list h3 .en {
  display: block;
  font-family: var(--font-en);
  font-size: 1.375rem; /* 22px */
  font-weight: 400;
  letter-spacing: 1px;
}
.sale-detail h3 .jp,
.collection-item .collection-text h3 .jp,
.collection-area .collection-list h3 .jp {
  display: block;
  font-size: 1.25rem; /* 20px */
  font-weight: 400;
}
.sale-detail .sale-info,
.collection-item .collection-text .sale-info,
.collection-area .collection-list .sale-info {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 1.125rem; /* 18px */
}
.sale-detail .sale-info span,
.collection-item .collection-text .sale-info span,
.collection-area .collection-list .sale-info span {
  display: block;
}
.sale-detail .sale-info .en,
.collection-item .collection-text .sale-info .en,
.collection-area .collection-list .sale-info .en {
  font-family: var(--font-en);
}
.sale-info .color {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
}
.sale-info .color span:nth-child(1) {
  margin-left: 10px;
}
.sale-info .color span {
  width: 17px;
  aspect-ratio: 1/1;
  color: transparent;
  font-size: 0;
  border-radius: 50%;
}
.sale-info .color .white {
  border: 1px solid #000;
  background: #fff;
}
.sale-info .color .black {
  background: var(--color-black);
}
.sale-info .color .gray {
  background: var(--color-gray);
}
.sale-info .color .pinkblue {
  background: linear-gradient(135deg, var(--color-pink) 0 50%, var(--color-blue) 50% 100%);
}
.sale-info .color .red {
  background: var(--color-red);
}
.sale-info .color .orange {
  background: var(--color-orange);
}
.sale-detail .sale-text {
  font-size: 0.875rem; /* 14px */
  line-height: 2.5;
}
@media screen and (max-width: 767px) {
  .sale-area .sale-title {
    height: 50px;
  }
  .sale-area .sale-list {
    padding-bottom: 50px;
  }
  .sale-area .sale-list li picture {
    width: 90%;
  }
  .sale-area .sale-list li .sale-detail {
    width: 95%;
    margin: 0 0 50px auto;
    padding: 10vw 5vw;
  }
  .sale-area .sale-list li:nth-child(even) .sale-detail {
    margin: 0 0 50px;
  }
  .sale-area .sale-list li:nth-child(n + 3) .sale-detail {
    width: 95%;
  }
  .sale-detail h3 span,
  .collection-item .collection-text h3 span,
  .collection-area .collection-list h3 span {
    line-height: 24px;
  }
  .sale-detail h3 .en,
  .collection-item .collection-text h3 .en,
  .collection-area .collection-list h3 .en {
    font-size: 1.125rem; /* 18px */
  }
  .sale-detail h3 .jp,
  .collection-item .collection-text h3 .jp,
  .collection-area .collection-list h3 .jp {
    font-size: 1rem; /* 16px */
  }
  .sale-detail .sale-info,
  .collection-item .collection-text .sale-info,
  .collection-area .collection-list .sale-info {
    font-size: 0.875rem; /* 14px */
  }
  .sale-detail .sale-info span,
  .collection-item .collection-text .sale-info span,
  .collection-area .collection-list .sale-info span {
    font-size: 0.875rem; /* 14px */
  }
  .sale-info .color span {
    width: 14px;
    height: 14px;
  }
  .sale-info .color span:nth-child(1) {
    margin-left: 0;
  }
  .sale-detail .sale-text {
    font-size: 0.75rem; /* 12px */
    line-height: 1.8;
  }
}

.collection-area .inner-box {
  max-width: 1370px;
  margin: 0 auto;
  color: var(--color-text01);
}
.collection-area .collection-title {
  max-width: 686px;
}
.collection-area .collection-item {
  display: flex;
  gap: 100px;
  width: 1070px;
  margin: 0 auto 190px;
}
.collection-area .collection-item .collection-pickup {
  position: relative;
  max-width: 485px;
}
.collection-area .collection-item .collection-pickup::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 120px;
  height: 120px;
  background: url("../img/icon_pu.png") no-repeat right top / contain;
}
.collection-area .collection-item .collection-pickup picture {
  margin-bottom: 80px;
}
.collection-area .collection-item .collection-text {
  max-width: 485px;
  padding-top: 70px;
}
.collection-area .collection-item .collection-text.sp-only {
  padding-top: 20px;
}
.collection-area .collection-item .staff-comment {
  height: 51px;
  margin-bottom: 20px;
  padding-left: 13px;
}
.collection-area .collection-item .staff-comment-text {
  position: relative;
  padding-top: 20px;
  font-size: 0.875rem; /* 14px */
  line-height: 2;
  border-top: 2px solid var(--color-border);
}
.collection-area .collection-item .staff-comment-text::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 115px;
  width: 17px;
  height: 24px;
  background: url("../img/arrow.png") no-repeat center center;
  background-size: contain;
}
.collection-area .collection-item .staff-comment-text span {
  display: block;
}
.collection-item .collection-text .sale-text {
  padding-bottom: 80px;
  font-size: 0.875rem; /* 14px */
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .collection-item .collection-text .sale-text {
    padding-bottom: 20px;
  }
}
.collection-area .collection-list {
  display: flex;
  justify-content: space-between;
  max-width: 1070px;
  margin: 0 auto;
  padding: 0 50px 120px;
}
.collection-area .collection-list li {
  max-width: 400px;
}
.collection-area .collection-list li picture {
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .collection-area .collection-title {
    height: 120px;
  }
  .collection-area .collection-item {
    flex-direction: column;
    gap: 20px;
    width: 82%;
    margin-bottom: 50px;
  }
  .collection-item .collection-text .sale-text {
    font-size: 0.75rem; /* 12px */
  }
  .collection-area .collection-item .collection-pickup {
    max-width: inherit;
  }
  .collection-area .collection-item .collection-pickup::before {
    top: -7vw;
    right: -7vw;
    width: clamp(70px, 14vw, 90px);
    height: clamp(70px, 14vw, 90px);
  }
  .collection-area .collection-item .collection-pickup picture {
    margin-bottom: 3vw;
  }
  .collection-area .collection-item .staff-comment {
    height: 30px;
    margin-bottom: 14px;
    padding: 0;
  }
  .collection-area .collection-item .staff-comment-text {
    font-size: 0.75rem; /* 12px */
    border-image: linear-gradient(to right, var(--color-border) 77%, transparent 23%);
    border-image-slice: 1;
  }
  .collection-area .collection-item .staff-comment-text::before {
    transform: scaleX(-1);
    left: 80px;
    width: 10px;
    height: 24px;
    background-position: bottom center;
  }
  .collection-area .collection-list {
    display: block;
    width: 82%;
    margin: 0 auto;
    padding: 0 0 50px;
  }
  .collection-area .collection-list li {
    max-width: inherit;
    margin: 0 auto 50px;
  }
  .collection-area .collection-list li picture {
    margin-bottom: 20px;
  }
}

.store-area {
  background: var(--color-bg);
}
.store-area .inner-box {
  max-width: 1370px;
  margin: 0 auto;
  padding: 130px 0 120px;
}
.store-area .store-title {
  max-width: 1013px;
}
.store-area .store-list {
  max-width: 1170px;
  margin: 0 auto;
}
.store-area .store-list li {
  display: flex;
  justify-content: space-between;
}
.store-area .store-list li picture {
  width: 650px;
}
.store-area .store-list li p {
  width: 460px;
  padding-top: 100px;
  font-size: 0.875rem; /* 14px */
  line-height: 2;
}
.store-area .store-list li p .pc_br {
  display: block;
}
.store-area .store-list li + li {
  flex-direction: row-reverse;
  margin-top: -80px;
  padding-left: 50px;
}
.store-area .store-list li + li picture {
  width: 600px;
}
.store-area .store-list li + li p {
  padding-top: 180px;
}
@media screen and (max-width: 767px) {
  .store-area .inner-box {
    padding: 50px 0 20px;
  }
  .store-area .store-title,
  .store-area .store-title picture {
    height: 120px;
  }
  .store-area .store-list {
    width: 90%;
  }
  .store-area .store-list li,
  .store-area .store-list li + li {
    flex-direction: column;
    gap: 20px;
    margin: 0 0 20px;
    padding: 0;
  }
  .store-area .store-list li picture,
  .store-area .store-list li + li picture {
    width: 100%;
  }
  .store-area .store-list li p,
  .store-area .store-list li + li p {
    width: 100%;
    padding-top: 0;
    font-size: 0.8125rem; /* 13px */
    text-align: center;
  }
  .store-area .store-list li p span {
    display: block;
  }
}

.insta-area .inner-box {
  max-width: 1370px;
  margin: 0 auto;
  padding: 160px 0 10px;
}
.insta-area .inner-box iframe {
  margin-inline: auto !important;
}
.insta-area .insta-title {
  max-width: 908px;
}
.insta-area .insta-box {
  text-align: center;
}
.insta-area .insta-box p {
  padding-block: 25px;
}
.insta-area .insta-box div {
  width: 336px;
  max-width: 100%;
  height: 58px;
  margin: 0 auto 120px;
}
.insta-area .insta-box div a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  text-decoration: none;
  background: var(--color-bg3);
}
.pretty-box {
  width: 365px;
  margin: 0 auto;
  text-align: center;
}
.pretty-box p {
  margin-bottom: 25px;
}
.pretty-box div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .insta-area .inner-box {
    padding: 50px 0 10px;
  }
  .insta-area .insta-title img {
    max-height: 50px;
  }
  .insta-area .insta-box {
    width: 90%;
    margin: 0 auto;
  }
  .insta-area .insta-box p {
    padding-block: 15px;
  }
  .insta-area .insta-box p img {
    width: 100px;
  }
  .insta-area .insta-box div {
    width: 100%;
    max-width: 460px;
    margin-bottom: 40px;
  }
  .insta-area .insta-box div a {
    gap: 10px;
    font-size: 0.9375rem; /* 15px */
  }
  .insta-area .insta-box div a img {
    width: 15px;
  }
  .insta-area .pretty-box p {
    margin-bottom: 15px;
  }
  .insta-area .pretty-box p img {
    width: 125px;
  }
  .insta-area .pretty-box div {
    justify-content: center;
    gap: 25px;
  }
  .insta-area .pretty-box div a[href*="instagram.com"] {
    width: 63px;
  }
  .insta-area .pretty-box div a[href*="prettyballerinas.fen.co.jp"] {
    width: 82.6px;
  }
}

#js-page-top-button {
  width: 48px;
  height: 48px;
  position: fixed;
  right: 20px;
  bottom: -20px;
  opacity: 0;
  transition: all 0.5s ease;
}
#js-page-top-button.show {
  opacity: 1;
  transform: none;
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 10;
}
.sp-only {
  display: none
}


.page-nav-list li picture {
  width: 120px;
  padding-bottom: 20px;
}

.section-title {
  position: relative;
  width: 100%;
  padding: 90px 0 50px;
  text-align: center;
}
.section-title .bg {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: 0 auto;
}
.section-title .en {
  position: relative;
  font-family: var(--font-en);
  font-size: 3rem; /* 48px */
  font-weight: 500;
  line-height: 1.2;
}
.section-title .en + span {
  position: relative;
  color: var(--color-text-green);
  font-size: 1.375rem; /* 22px */
}


/* ここまで */
/* ----------------------------------------------------------------------
 * PC イレギュラー対応
 * ---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
 * tablet
 * ---------------------------------------------------------------------- */
@media screen and (min-width:767px) and (max-width: 1180px) {
  /* ここから入力 */
  /* ここまで */
}
/* ----------------------------------------------------------------------
 * sp
 * ---------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* default */
  .main-section-wrapper {
    width: auto;
    padding: 0 15px;
  }
  .footer-wrapper {
    min-width: inherit;
  }
  /* default-end */
  /* ここから入力 */
  #page-top {
    margin-top: -72px;
    padding-top: 72px;
  }
  .pc-only {
    display: none;
  }
  .sp-only {
    display: inline-block;
  }
  .feature p {
    font-size: 0.75rem;
    /* line-height: 1.5em; */
  }
  .title-box {
    width: 100%;
    padding: 0 0 0;
    background: 0;
  }
  .title-box:before {
    display: none;
  }
  .title-box:after {
    display: none;
  }

  #js-page-top-button.show {
    opacity: 1;
    right: 5px;
    bottom: 60px;
  }
  /* ここまで */
} /* max-width: 767px */