@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho:wght@400;500;600;700&display=swap");
a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: inherit;
}
@media (hover: hover) {
  a:hover {
    cursor: pointer;
  }
}

picture,
img,
a,
span {
  display: inline-block;
}

video,
svg {
  width: 100%;
  height: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  vertical-align: top;
}

@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
/* =============================================
共通バーツ
============================================= */
@media (min-width: 768px) {
  .pcOnly {
    display: block !important;
  }
  .spOnly {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pcOnly {
    display: none !important;
  }
  .spOnly {
    display: block !important;
  }
}
.footer {
  margin-top: 0px !important;
}

.Wrapper {
  overflow: hidden;
  background: #ffffff;
}

main {
  position: relative;
  display: block;
  width: 100%;
}

.commonWatchList {
  width: 712px;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchList {
    width: 42.892vw;
    grid-column-gap: 0.964vw;
    grid-row-gap: 0.964vw;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchList {
    width: 92.829vw;
    grid-column-gap: 2.086vw;
    grid-row-gap: 2.086vw;
  }
}

.commonWatchItem {
  border-radius: 30px;
  border: solid 1px #9a867d;
  background-color: #fffdf8;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchItem {
    border-radius: 1.807vw;
    border: solid 0.06vw #9a867d;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchItem {
    border-radius: 3.911vw;
    border: solid 0.13vw #9a867d;
  }
}
@media (any-hover: hover) {
  .commonWatchItem:hover {
    background-color: #dfd6d2;
  }
  .commonWatchItem:hover .commonWatchBtn {
    background-color: #ffffff;
    color: #554739;
  }
}

@media (any-hover: hover) {
  .commonWatchItem:nth-child(2):hover {
    background-color: #ffecd9;
  }
}

@media (any-hover: hover) {
  .commonWatchItem:nth-child(3):hover {
    background-color: #f0d7c8;
  }
}

@media (any-hover: hover) {
  .commonWatchItem:nth-child(4):hover {
    background-color: #ebe7e4;
  }
}

.commonWatchItemLink {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.commonWatchImg {
  position: relative;
  top: 0;
  left: 0;
  width: 170px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchImg {
    width: 10.241vw;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchImg {
    width: 22.164vw;
  }
}
.commonWatchImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.commonWatchTxtWrap {
  margin: 44px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchTxtWrap {
    margin: 2.651vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchTxtWrap {
    margin: 5.737vw 0 0;
  }
}

.commonWatchItem:nth-child(2) .commonWatchTxtWrap {
  margin: 44px 0 0 -20px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchItem:nth-child(2) .commonWatchTxtWrap {
    margin: 2.651vw 0 0 -1.205vw;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchItem:nth-child(2) .commonWatchTxtWrap {
    margin: 5.737vw 0 0 -2.608vw;
  }
}

.commonWatchItem:nth-child(3) .commonWatchTxtWrap {
  margin: 44px 0 0 -9px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchItem:nth-child(3) .commonWatchTxtWrap {
    margin: 2.651vw 0 0 -0.542vw;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchItem:nth-child(3) .commonWatchTxtWrap {
    margin: 5.737vw 0 0 -1.173vw;
  }
}

.commonWatchItem:nth-child(4) .commonWatchTxtWrap {
  margin: 44px 0 0 -6px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchItem:nth-child(4) .commonWatchTxtWrap {
    margin: 2.651vw 0 0 -0.361vw;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchItem:nth-child(4) .commonWatchTxtWrap {
    margin: 5.737vw 0 0 -0.782vw;
  }
}

.commonWatchName {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.73;
  letter-spacing: 1.32px;
  text-align: center;
  color: #2c2014;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchName {
    font-size: 1.325vw;
    letter-spacing: 0.08vw;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchName {
    font-size: 2.868vw;
    letter-spacing: 0.172vw;
  }
}

.commonWatchDeco {
  margin: 27px auto 0;
  width: 70px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchDeco {
    margin: 1.627vw auto 0;
    width: 4.217vw;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchDeco {
    margin: 3.52vw auto 0;
    width: 9.126vw;
  }
}
.commonWatchDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.commonWatchBtn {
  margin: 40px auto 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 36px 14px 37px;
  border-radius: 30px;
  background-color: #9a867d;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1.44px;
  text-align: center;
  color: #fff;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .commonWatchBtn {
    margin: 2.41vw auto 0;
    padding: 0.602vw 2.169vw 0.843vw 2.229vw;
    border-radius: 1.807vw;
    font-size: 1.446vw;
    letter-spacing: 0.087vw;
  }
}
@media screen and (max-width: 767px) {
  .commonWatchBtn {
    margin: 5.215vw auto 0;
    padding: 1.304vw 4.694vw 1.825vw 4.824vw;
    border-radius: 3.911vw;
    font-size: 3.129vw;
    letter-spacing: 0.188vw;
  }
}

.fv {
  overflow: hidden;
  position: relative;
  background-color: #d9cfc3;
  border-bottom: 1px solid #645346;
  width: 100%;
  height: 52.083vw;
}
@media screen and (max-width: 767px) {
  .fv {
    display: none;
  }
}

.fvMain {
  position: absolute;
  z-index: 1;
  top: 7.865vw;
  left: 28.958vw;
  width: 41.875vw;
}
.fvMain img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvTxt {
  position: absolute;
  top: 2.865vw;
  left: 30.104vw;
  z-index: 1;
  margin: 0;
  font-size: 2.917vw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.146vw;
  text-align: center;
  color: #554739;
  font-family: "Cormorant Garamond", serif;
}

.fvRightTxt {
  position: absolute;
  z-index: 1;
  top: 1.354vw;
  left: 57.188vw;
  width: 20.833vw;
}
.fvRightTxt img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvLeftTxt {
  position: absolute;
  z-index: 1;
  top: 17.188vw;
  left: 22.5vw;
  width: 4.688vw;
}
.fvLeftTxt img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvDecoLeftStar {
  position: absolute;
  z-index: 1;
  top: 7.031vw;
  left: 14.688vw;
  width: 8.906vw;
}
.fvDecoLeftStar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvDecoRightStar {
  position: absolute;
  z-index: 1;
  top: 19.323vw;
  left: 80.625vw;
  width: 6.302vw;
}
.fvDecoRightStar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvDecoLine {
  position: absolute;
  z-index: 1;
  top: 2.656vw;
  left: 7.76vw;
  width: 84.375vw;
}
.fvDecoLine img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvShadow {
  position: absolute;
  z-index: 0;
  top: -3.31vw;
  left: 0;
  width: 100%;
}
.fvShadow img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvWatch1 {
  position: absolute;
  z-index: 1;
  top: 16.198vw;
  left: 11.667vw;
  width: 11.458vw;
}
.fvWatch1 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvWatch2 {
  position: absolute;
  z-index: 1;
  top: 28.75vw;
  left: 71.927vw;
  width: 6.25vw;
}
.fvWatch2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvWatch3 {
  position: absolute;
  z-index: 1;
  top: 28.75vw;
  left: 78.698vw;
  width: 6.25vw;
}
.fvWatch3 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvWatch4 {
  position: absolute;
  z-index: 1;
  top: 28.75vw;
  left: 85.469vw;
  width: 6.25vw;
}
.fvWatch4 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvSp {
  display: none;
  position: relative;
  background-color: #d9cfc3;
}
@media screen and (max-width: 767px) {
  .fvSp {
    display: block;
  }
}
.fvSp::before {
  content: "";
  position: absolute;
  top: 133.507vw;
  left: 0;
  width: 100%;
  height: 19.557vw;
  background: url(/twinkleheart/images/fv/fv-bottom-shadow@1x.png) no-repeat top center/cover;
}

.fvWrapSp {
  position: relative;
  width: 100%;
  height: 153.064vw;
}

.fvMainSp {
  position: absolute;
  z-index: 1;
  top: 22.686vw;
  left: 12.256vw;
  width: 72.099vw;
}
.fvMainSp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvTxtSp {
  position: absolute;
  top: 13.559vw;
  left: 12.647vw;
  z-index: 1;
  margin: 0;
  font-size: 5.215vw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
  color: #554739;
  font-family: "Cormorant Garamond", serif;
}

.fvRightTxtSp {
  position: absolute;
  z-index: 1;
  top: 8.866vw;
  left: 44.198vw;
  width: 50.847vw;
}
.fvRightTxtSp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvLeftTxtSp {
  position: absolute;
  z-index: 1;
  top: 50.717vw;
  left: 3.651vw;
  width: 6.649vw;
}
.fvLeftTxtSp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvDecoLineSp {
  position: absolute;
  z-index: 1;
  top: 9.648vw;
  left: 0;
  width: 100%;
}
.fvDecoLineSp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvShadowSp {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 119.948vw;
}
.fvShadowSp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvWatch1Sp {
  position: absolute;
  z-index: 1;
  top: 66.493vw;
  right: 3.52vw;
  width: 27.771vw;
}
.fvWatch1Sp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvWatch2Sp {
  position: absolute;
  z-index: 1;
  top: 98.566vw;
  right: 32.334vw;
  width: 15.645vw;
}
.fvWatch2Sp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvWatch3Sp {
  position: absolute;
  z-index: 1;
  top: 98.566vw;
  right: 49.804vw;
  width: 15.645vw;
}
.fvWatch3Sp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fvWatch4Sp {
  position: absolute;
  z-index: 1;
  top: 98.566vw;
  right: 67.275vw;
  width: 15.645vw;
}
.fvWatch4Sp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.intro {
  position: relative;
  padding-block: 83px 150px;
  background-color: #f3eeea;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .intro {
    padding-block: 5vw 9.036vw;
  }
}
@media screen and (max-width: 767px) {
  .intro {
    padding-block: 8.214vw 19.557vw;
  }
}

.introTopTxtWrap {
  margin: 0 0 0 174px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introTopTxtWrap {
    margin: 0 0 0 10.482vw;
  }
}
@media screen and (max-width: 767px) {
  .introTopTxtWrap {
    margin: 0 0 0 22.656vw;
  }
}

.introTopTxt {
  font-size: 55px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 7.7px;
  text-align: left;
  color: #2c2014;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introTopTxt {
    font-size: 3.313vw;
    letter-spacing: 0.464vw;
  }
}
@media screen and (max-width: 767px) {
  .introTopTxt {
    font-size: 7.161vw;
    letter-spacing: 1.003vw;
  }
}

.introTopTxt:nth-child(n+2) {
  margin: 0 0 0 49px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introTopTxt:nth-child(n+2) {
    margin: 0 0 0 2.952vw;
  }
}
@media screen and (max-width: 767px) {
  .introTopTxt:nth-child(n+2) {
    margin: 0 0 0 6.38vw;
  }
}

.introTopTxtEn {
  margin: 14px 0 0;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2.1px;
  text-align: center;
  color: #2c2014;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introTopTxtEn {
    margin: 0.843vw 0 0;
    font-size: 2.108vw;
    letter-spacing: 0.127vw;
  }
}
@media screen and (max-width: 767px) {
  .introTopTxtEn {
    margin: 1.823vw 0 0;
    font-size: 4.557vw;
    letter-spacing: 0.273vw;
  }
}

.introTopDeco {
  margin: 66px auto 0;
  width: 130px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introTopDeco {
    margin: 3.976vw auto 0;
    width: 7.831vw;
  }
}
@media screen and (max-width: 767px) {
  .introTopDeco {
    margin: 8.594vw auto 0;
    width: 16.927vw;
  }
}
.introTopDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.introTxt {
  margin: 59px 0 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 2.14;
  letter-spacing: 1.12px;
  text-align: center;
  color: #2c2014;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introTxt {
    margin: 3.554vw 0 0;
    font-size: 1.687vw;
    letter-spacing: 0.067vw;
  }
}
@media screen and (max-width: 767px) {
  .introTxt {
    margin: 7.682vw 0 0;
    font-size: 3.646vw;
    letter-spacing: 0.146vw;
  }
}

.introVideo {
  position: relative;
  z-index: 1;
  margin: 12% auto 0;
  width: 688px;
  height: 387px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introVideo {
    width: 41.446vw;
    height: 23.313vw;
  }
}
@media screen and (max-width: 767px) {
  .introVideo {
    width: 89.7vw;
    height: 50.456vw;
  }
}
.introVideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.introVideo::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -29px;
  left: 50%;
  width: 900px;
  height: 480px;
  translate: -50%;
  border-radius: 50%;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  background-color: rgba(233, 178, 182, 0.3);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introVideo::before {
    top: -1.747vw;
    width: 54.217vw;
    height: 28.916vw;
    -webkit-filter: blur(3.012vw);
    filter: blur(3.012vw);
  }
}
@media screen and (max-width: 767px) {
  .introVideo::before {
    top: -3.781vw;
    width: 117.34vw;
    height: 62.581vw;
    -webkit-filter: blur(6.519vw);
    filter: blur(6.519vw);
  }
}

.introWatch {
  margin: 148px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introWatch {
    margin: 8.916vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .introWatch {
    margin: 19.271vw 0 0;
  }
}

/* =============================================
details
============================================= */
.details {
  position: relative;
  margin: -231px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .details {
    margin: -13.916vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .details {
    margin: -30.117vw 0 0;
  }
}
.details::before {
  content: "";
  position: absolute;
  top: -141px;
  left: 0;
  width: 100%;
  height: 425px;
  background: url(/twinkleheart/images/details/details-bg-deco@1x.png) no-repeat top center/cover;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .details::before {
    top: -8.494vw;
    height: 25.602vw;
  }
}
@media screen and (max-width: 767px) {
  .details::before {
    top: -18.383vw;
    height: 55.411vw;
  }
}

.detailsWrap {
  position: relative;
}

.detailsTtl {
  margin: 0 auto 0;
  width: 545px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsTtl {
    width: 32.831vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsTtl {
    width: 71.056vw;
  }
}
.detailsTtl img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.detailsTtlDeco {
  margin: 4px auto 0;
  width: 428px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsTtlDeco {
    margin: 0.241vw auto 0;
    width: 25.783vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsTtlDeco {
    margin: 0.522vw auto 0;
    width: 55.802vw;
  }
}
.detailsTtlDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.detailsTtlSmall {
  margin: 15px 0 0;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2.1px;
  text-align: center;
  color: #554739;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsTtlSmall {
    margin: 0.904vw 0 0;
    font-size: 2.108vw;
    letter-spacing: 0.127vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsTtlSmall {
    margin: 1.956vw 0 0;
    font-size: 4.563vw;
    letter-spacing: 0.274vw;
  }
}

.detailsList {
  background: #f3eeea;
}

.detailsItem {
  margin: 74px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItem {
    margin: 4.458vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .detailsItem {
    margin: 9.648vw 0 0;
  }
}

.detailsItem:nth-child(2) {
  margin: 146px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItem:nth-child(2) {
    margin: 8.795vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .detailsItem:nth-child(2) {
    margin: 19.035vw 0 0;
  }
}

.detailsItem:nth-child(3) {
  margin: 148px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItem:nth-child(3) {
    margin: 8.916vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .detailsItem:nth-child(3) {
    margin: 19.296vw 0 0;
  }
}

.detailsItemPoint {
  margin: 0 auto 0;
  width: 300px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItemPoint {
    width: 18.072vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsItemPoint {
    width: 39.113vw;
  }
}
.detailsItemPoint img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.detailsItemTtl {
  margin: 0 0 0;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
  color: #2c2014;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItemTtl {
    font-size: 2.169vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsItemTtl {
    font-size: 4.694vw;
  }
}

.detailsItemImg {
  margin: 78px auto 0;
  width: 670px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItemImg {
    margin: 4.699vw auto 0;
    width: 40.361vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsItemImg {
    margin: 10.169vw auto 0;
    width: 87.353vw;
  }
}
.detailsItemImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.detailsItemTxt {
  margin: 72px 0 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.96px;
  text-align: center;
  color: #2c2014;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItemTxt {
    margin: 4.337vw 0 0;
    font-size: 1.446vw;
    letter-spacing: 0.058vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsItemTxt {
    margin: 9.387vw 0 0;
    font-size: 3.129vw;
    letter-spacing: 0.125vw;
  }
}

.detailsItemFlex {
  margin: 62px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
  width: 688px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItemFlex {
    margin: 3.735vw auto 0;
    -webkit-column-gap: 2.41vw;
       -moz-column-gap: 2.41vw;
            column-gap: 2.41vw;
    width: 41.446vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsItemFlex {
    margin: 8.083vw auto 0;
    -webkit-column-gap: 5.215vw;
       -moz-column-gap: 5.215vw;
            column-gap: 5.215vw;
    width: 89.7vw;
  }
}

.detailsItem:nth-child(3) .detailsItemFlex {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.detailsItemFlexImg {
  margin: 0 auto 0;
  width: 344px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItemFlexImg {
    width: 20.723vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsItemFlexImg {
    width: 44.85vw;
  }
}
.detailsItemFlexImg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.detailsItemFlexTxt {
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.96px;
  text-align: left;
  color: #2c2014;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItemFlexTxt {
    font-size: 1.446vw;
    letter-spacing: 0.058vw;
  }
}
@media screen and (max-width: 767px) {
  .detailsItemFlexTxt {
    font-size: 3.129vw;
    letter-spacing: 0.125vw;
  }
}

.detailsItem:nth-child(2) .detailsItemFlexTxt {
  margin: 49px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItem:nth-child(2) .detailsItemFlexTxt {
    margin: 2.952vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .detailsItem:nth-child(2) .detailsItemFlexTxt {
    margin: 6.389vw 0 0;
  }
}

.detailsItem:nth-child(3) .detailsItemFlexTxt {
  margin: 3px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .detailsItem:nth-child(3) .detailsItemFlexTxt {
    margin: 0.181vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .detailsItem:nth-child(3) .detailsItemFlexTxt {
    margin: 0.391vw 0 0;
  }
}

/* =============================================
LINE UP
============================================= */
.lineUp {
  margin: 139px 0 0;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUp {
    margin: 8.373vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .lineUp {
    margin: 18.123vw 0 0;
  }
}
.lineUp::before {
  content: "";
  position: absolute;
  top: -141px;
  left: 0;
  width: 100%;
  height: 423px;
  background: url(/twinkleheart/images/lineUp/lineUp-bg-deco@1x.png) no-repeat top center/cover;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUp::before {
    top: -8.494vw;
    height: 25.482vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUp::before {
    top: -18.383vw;
    height: 55.28vw;
  }
}

.lineUpWrap {
  position: relative;
}

.lineUpTtl {
  margin: 0 auto 0;
  width: 545px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpTtl {
    width: 32.831vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpTtl {
    width: 71.187vw;
  }
}
.lineUpTtl img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.lineUpTtlDeco {
  margin: 4px auto 0;
  width: 428px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpTtlDeco {
    margin: 0.241vw auto 0;
    width: 25.783vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpTtlDeco {
    margin: 0.522vw auto 0;
    width: 55.802vw;
  }
}
.lineUpTtlDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.lineUpTtlSmall {
  margin: 15px 0 0;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2.1px;
  text-align: center;
  color: #554739;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpTtlSmall {
    margin: 0.904vw 0 0;
    font-size: 2.108vw;
    letter-spacing: 0.127vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpTtlSmall {
    margin: 1.956vw 0 0;
    font-size: 4.563vw;
    letter-spacing: 0.273vw;
  }
}

.lineUpCont {
  background: #fcf8f0;
  padding: 85px 0 613px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpCont {
    padding: 5.12vw 0 36.928vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpCont {
    padding: 11.082vw 0 79.922vw;
  }
}

.lineUpTopTxt {
  margin: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 2.14;
  letter-spacing: 1.12px;
  text-align: center;
  color: #2c2014;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpTopTxt {
    font-size: 1.687vw;
    letter-spacing: 0.067vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpTopTxt {
    font-size: 3.651vw;
    letter-spacing: 0.146vw;
  }
}

.lineUpNewColor {
  margin: 98px 0 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
  color: #554739;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpNewColor {
    margin: 5.904vw 0 0;
    font-size: 1.928vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpNewColor {
    margin: 12.777vw 0 0;
    font-size: 4.172vw;
  }
}

.lineUpList {
  margin: -5px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpList {
    margin: -0.301vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .lineUpList {
    margin: -0.652vw 0 0;
  }
}

.lineUpItem:nth-child(2) {
  margin: 242px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(2) {
    margin: 14.578vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(2) {
    margin: 31.551vw 0 0;
  }
}

.lineUpItem:nth-child(3) {
  margin: 245px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(3) {
    margin: 14.759vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(3) {
    margin: 31.943vw 0 0;
  }
}

.lineUpItem:nth-child(4) {
  margin: 242px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(4) {
    margin: 14.578vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(4) {
    margin: 31.551vw 0 0;
  }
}

.lineUpItemTtl {
  margin: 0 auto 0;
  width: 476px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemTtl {
    width: 28.675vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemTtl {
    width: 62.086vw;
  }
}
.lineUpItemTtl img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.lineUpItem:nth-child(2) .lineUpItemTtl {
  margin: 0 auto 0;
  width: 630px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(2) .lineUpItemTtl {
    width: 37.952vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(2) .lineUpItemTtl {
    width: 82.138vw;
  }
}

.lineUpItem:nth-child(3) .lineUpItemTtl {
  margin: 0 auto 0;
  width: 690px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(3) .lineUpItemTtl {
    width: 41.566vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(3) .lineUpItemTtl {
    width: 89.962vw;
  }
}

.lineUpItem:nth-child(4) .lineUpItemTtl {
  margin: 0 auto 0;
  width: 468px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(4) .lineUpItemTtl {
    width: 28.193vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(4) .lineUpItemTtl {
    width: 61.018vw;
  }
}

.lineUpItemMain {
  margin: 91px auto 0 0;
  width: 730px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemMain {
    margin: 5.482vw auto 0 0;
    width: 43.976vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemMain {
    margin: 11.865vw auto 0 0;
    width: 95.176vw;
  }
}
.lineUpItemMain img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.lineUpItem:nth-child(2) .lineUpItemMain {
  margin: 91px 0 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(2) .lineUpItemMain {
    margin: 5.482vw 0 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(2) .lineUpItemMain {
    margin: 11.865vw 0 0 auto;
  }
}

.lineUpItem:nth-child(3) .lineUpItemMain {
  margin: 91px auto 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(3) .lineUpItemMain {
    margin: 5.482vw auto 0 0;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(3) .lineUpItemMain {
    margin: 11.865vw auto 0 0;
  }
}

.lineUpItem:nth-child(4) .lineUpItemMain {
  margin: 91px 0 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(4) .lineUpItemMain {
    margin: 5.482vw 0 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(4) .lineUpItemMain {
    margin: 11.865vw 0 0 auto;
  }
}

.lineUpItemInfo {
  position: relative;
  margin: 37px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemInfo {
    margin: 2.229vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemInfo {
    margin: 4.824vw 0 0;
  }
}
.lineUpItemInfo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 700px;
  height: 700px;
  border-radius: 100vmax;
  -webkit-filter: blur(50px);
  filter: blur(50px);
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemInfo::before {
    width: 42.169vw;
    height: 42.169vw;
    -webkit-filter: blur(3.012vw);
    filter: blur(3.012vw);
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemInfo::before {
    width: 91.265vw;
    height: 91.265vw;
    -webkit-filter: blur(6.519vw);
    filter: blur(6.519vw);
  }
}

.lineUpItem:nth-child(1) .lineUpItemInfo::before {
  opacity: 0.2;
  background-color: #9a867d;
}

.lineUpItem:nth-child(2) .lineUpItemInfo::before {
  opacity: 0.4;
  background-color: #ffdee1;
}

.lineUpItem:nth-child(3) .lineUpItemInfo::before {
  opacity: 0.4;
  background-color: #fcd7bd;
}

.lineUpItem:nth-child(4) .lineUpItemInfo::before {
  opacity: 0.4;
  background-color: #dbf5ff;
}

.lineUpItemInfoImg {
  position: relative;
  z-index: 1;
  margin: 0 auto 0;
  width: 290px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemInfoImg {
    width: 17.47vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemInfoImg {
    width: 37.809vw;
  }
}
.lineUpItemInfoImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.lineUpItemInfoDeco {
  position: absolute;
  top: 21px;
  left: 80px;
  width: 200px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemInfoDeco {
    top: 1.265vw;
    left: 4.819vw;
    width: 12.048vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemInfoDeco {
    top: 2.738vw;
    left: 10.431vw;
    width: 26.076vw;
  }
}
.lineUpItemInfoDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.lineUpItemInfoName {
  position: absolute;
  top: 1px;
  left: 383px;
  width: 374px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemInfoName {
    top: 0.06vw;
    left: 23.072vw;
    width: 22.53vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemInfoName {
    top: 0.13vw;
    left: 49.935vw;
    width: 48.762vw;
  }
}
.lineUpItemInfoName img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.lineUpItem:nth-child(2) .lineUpItemInfoName {
  top: 15px;
  left: 41px;
  width: 690px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(2) .lineUpItemInfoName {
    top: 0.904vw;
    left: 2.47vw;
    width: 41.566vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(2) .lineUpItemInfoName {
    top: 1.956vw;
    left: 5.346vw;
    width: 89.962vw;
  }
}

.lineUpItem:nth-child(3) .lineUpItemInfoName {
  top: 13px;
  left: -6px;
  width: 793px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(3) .lineUpItemInfoName {
    top: 0.783vw;
    left: -0.361vw;
    width: 47.771vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(3) .lineUpItemInfoName {
    top: 1.695vw;
    left: -0.782vw;
    width: 103.39vw;
  }
}

.lineUpItem:nth-child(4) .lineUpItemInfoName {
  top: 16px;
  left: 39px;
  width: 322px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(4) .lineUpItemInfoName {
    top: 0.964vw;
    left: 2.349vw;
    width: 19.398vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(4) .lineUpItemInfoName {
    top: 2.086vw;
    left: 5.085vw;
    width: 41.982vw;
  }
}

.lineUpItemInfoTxtWrap {
  position: absolute;
  top: 553px;
  right: 0;
  width: 264px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemInfoTxtWrap {
    top: 33.313vw;
    width: 15.904vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemInfoTxtWrap {
    top: 72.099vw;
    width: 34.42vw;
  }
}
.lineUpItemInfoTxtWrap::before {
  content: "";
  position: absolute;
  top: 97px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #554739;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemInfoTxtWrap::before {
    top: 5.843vw;
    height: 0.06vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemInfoTxtWrap::before {
    top: 12.646vw;
    height: 0.13vw;
  }
}

.lineUpItem:nth-child(4) .lineUpItemInfoTxtWrap {
  top: 574px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(4) .lineUpItemInfoTxtWrap {
    top: 34.578vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(4) .lineUpItemInfoTxtWrap {
    top: 74.837vw;
  }
}

.lineUpItemInfoTxt {
  margin: 0 0 0 11px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.67;
  letter-spacing: 1.44px;
  text-align: left;
  color: #2c2014;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemInfoTxt {
    margin: 0 0 0 0.663vw;
    font-size: 1.446vw;
    letter-spacing: 0.087vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemInfoTxt {
    margin: 0 0 0 1.434vw;
    font-size: 3.129vw;
    letter-spacing: 0.188vw;
  }
}

.lineUpItemTxt {
  margin: 53px 0 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.48px;
  text-align: center;
  color: #2c2014;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemTxt {
    margin: 3.193vw 0 0;
    font-size: 1.446vw;
    letter-spacing: 0.029vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemTxt {
    margin: 6.91vw 0 0;
    font-size: 3.129vw;
    letter-spacing: 0.063vw;
  }
}

.lineUpItem:nth-child(4) .lineUpItemTxt {
  margin: 75px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItem:nth-child(4) .lineUpItemTxt {
    margin: 4.518vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItem:nth-child(4) .lineUpItemTxt {
    margin: 9.779vw 0 0;
  }
}

.lineUpItemBtm {
  position: relative;
  display: block;
  margin: 117px auto 0;
  width: 560px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemBtm {
    margin: 7.905vw auto 0;
    width: 37.838vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemBtm {
    margin: 15.254vw auto 0;
    width: 73.012vw;
  }
}
.lineUpItemBtm::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 560px;
  height: 130px;
  background: url(/twinkleheart/images/lineUp/lineUp-btn@1x.png) no-repeat center center/contain;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemBtm::before {
    width: 33.735vw;
    height: 7.831vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemBtm::before {
    width: 73.012vw;
    height: 16.949vw;
  }
}
@media (any-hover: hover) {
  .lineUpItemBtm:hover::before {
    background: url(/twinkleheart/images/lineUp/lineUp-btn-active@1x.png) no-repeat center center/contain;
  }
  .lineUpItemBtm:hover .lineUpItemBtmTxt {
    color: #554739;
  }
}

.lineUpItemBtmTxt {
  position: relative;
  z-index: 2;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1.5px;
  text-align: center;
  color: #fff;
  font-family: "Shippori Mincho", serif;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .lineUpItemBtmTxt {
    font-size: 1.807vw;
    letter-spacing: 0.09vw;
  }
}
@media screen and (max-width: 767px) {
  .lineUpItemBtmTxt {
    font-size: 3.911vw;
    letter-spacing: 0.195vw;
  }
}

/* =============================================
special
============================================= */
.special {
  position: relative;
  margin: -209px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .special {
    margin: -12.59vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .special {
    margin: -27.249vw 0 0;
  }
}
.special::before {
  content: "";
  position: absolute;
  top: -141px;
  left: 0;
  width: 100%;
  height: 425px;
  background: url(/twinkleheart/images/special/special-bg-deco@1x.png) no-repeat top center/cover;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .special::before {
    top: -8.494vw;
    height: 25.602vw;
  }
}
@media screen and (max-width: 767px) {
  .special::before {
    top: -18.383vw;
    height: 55.411vw;
  }
}

.specialWrap {
  position: relative;
}

.specialsTtl {
  margin: 0 auto 0;
  width: 545px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .specialsTtl {
    width: 32.831vw;
  }
}
@media screen and (max-width: 767px) {
  .specialsTtl {
    width: 71.056vw;
  }
}
.specialsTtl img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.specialTtlDeco {
  margin: 4px auto 0;
  width: 428px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .specialTtlDeco {
    margin: 0.241vw auto 0;
    width: 25.783vw;
  }
}
@media screen and (max-width: 767px) {
  .specialTtlDeco {
    margin: 0.522vw auto 0;
    width: 55.802vw;
  }
}
.specialTtlDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.specialTtlSmall {
  margin: 16px 0 0;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.49;
  letter-spacing: 2.1px;
  text-align: center;
  color: #554739;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .specialTtlSmall {
    margin: 0.964vw 0 0;
    font-size: 2.108vw;
    font-weight: 400;
    line-height: 1.49;
    letter-spacing: 0.127vw;
  }
}
@media screen and (max-width: 767px) {
  .specialTtlSmall {
    margin: 2.086vw 0 0;
    font-size: 4.563vw;
    letter-spacing: 0.274vw;
  }
}

.specialCont {
  background: #f3eeea;
  padding: 93px 0 553px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .specialCont {
    padding: 5.602vw 0 33.313vw;
  }
}
@media screen and (max-width: 767px) {
  .specialCont {
    padding: 12.125vw 0 72.099vw;
  }
}

.specialVideo {
  position: relative;
  z-index: 1;
  margin: -0.3% auto 0;
  width: 688px;
  height: 387px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .specialVideo {
    width: 41.446vw;
    height: 23.313vw;
  }
}
@media screen and (max-width: 767px) {
  .specialVideo {
    width: 89.7vw;
    height: 50.456vw;
  }
}
.specialVideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.specialWatch {
  margin: 148px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .specialWatch {
    margin: 8.916vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .specialWatch {
    margin: 19.296vw 0 0;
  }
}

.choose {
  position: relative;
  margin: -253px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .choose {
    margin: -15.241vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .choose {
    margin: -32.986vw 0 0;
  }
}
.choose::before {
  content: "";
  position: absolute;
  top: -154px;
  left: 0;
  width: 100%;
  height: 425px;
  background: url(/twinkleheart/images/choose/choose-bg-deco@1x.png) no-repeat top center/cover;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .choose::before {
    top: -9.277vw;
    height: 25.602vw;
  }
}
@media screen and (max-width: 767px) {
  .choose::before {
    top: -20.078vw;
    height: 55.411vw;
  }
}

.chooseWrap {
  position: relative;
}

.chooseTtl {
  margin: 0 0 0;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.52;
  letter-spacing: normal;
  text-align: center;
  color: #554739;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseTtl {
    font-size: 3.133vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseTtl {
    font-size: 6.78vw;
  }
}

.chooseDeco {
  margin: 35px auto 0;
  width: 428px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseDeco {
    margin: 2.108vw auto 0;
    width: 25.783vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseDeco {
    margin: 4.563vw auto 0;
    width: 55.802vw;
  }
}
.chooseDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.chooseTtlSmall {
  margin: 15px 0 0;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2.1px;
  text-align: center;
  color: #554739;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseTtlSmall {
    margin: 0.904vw 0 0;
    font-size: 2.108vw;
    letter-spacing: 0.127vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseTtlSmall {
    margin: 1.956vw 0 0;
    font-size: 4.563vw;
    letter-spacing: 0.274vw;
  }
}

.chooseCont {
  background: #f3eeea;
  margin: 106px 0 0;
  padding: 0 0 250px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseCont {
    margin: 6.386vw 0 0;
    padding: 0 0 15.06vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseCont {
    margin: 13.82vw 0 0;
    padding: 0 0 32.595vw;
  }
}

.chooseSwiperCont,
.chooseSwiper,
.chooseSwiperWrap,
.chooseSwiperSlide {
  position: relative;
}

.chooseSwiperSlide {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  background: #ffffff;
}

.chooseSwiperSlideWrap {
  padding-block: 34px 50px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseSwiperSlideWrap {
    padding-block: 2.048vw 3.012vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseSwiperSlideWrap {
    padding-block: 4.433vw 6.519vw;
  }
}

.chooseSwiperSlidePoint {
  margin: 0 0 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2.24px;
  text-align: center;
  color: #2c2014;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseSwiperSlidePoint {
    font-size: 1.687vw;
    letter-spacing: 0.135vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseSwiperSlidePoint {
    font-size: 3.651vw;
    letter-spacing: 0.292vw;
  }
}

.chooseSwiperSlideNumber {
  margin: -17px 0 0;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
  color: #2c2014;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseSwiperSlideNumber {
    margin: -1.024vw 0 0;
    font-size: 4.217vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseSwiperSlideNumber {
    margin: -2.216vw 0 0;
    font-size: 9.126vw;
  }
}

.chooseSwiperSlideTxtWrap {
  margin: 17px 0 0;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseSwiperSlideTxtWrap {
    margin: 1.024vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .chooseSwiperSlideTxtWrap {
    margin: 2.216vw 0 0;
  }
}

.chooseSwiperSlideTxt {
  margin: 0 0 0;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1.26px;
  text-align: center;
  color: #2c2014;
  font-family: "Shippori Mincho", serif;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, rgba(233, 178, 182, 0.4)));
  background: linear-gradient(transparent 60%, rgba(233, 178, 182, 0.4) 60%);
  background-size: 100% 23px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 9px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseSwiperSlideTxt {
    font-size: 2.53vw;
    letter-spacing: 0.076vw;
    background-size: 100% 1.386vw;
    padding-bottom: 0.542vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseSwiperSlideTxt {
    font-size: 5.476vw;
    letter-spacing: 0.164vw;
    background-size: 100% 2.999vw;
    padding-bottom: 1.173vw;
  }
}

.chooseSwiperSlideTxt:nth-child(2) {
  margin: 7px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseSwiperSlideTxt:nth-child(2) {
    margin: 0.422vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .chooseSwiperSlideTxt:nth-child(2) {
    margin: 0.913vw 0 0;
  }
}

.chooseSwiperSlideSmallTxt {
  margin: 45px 0 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
  color: #2c2014;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseSwiperSlideSmallTxt {
    margin: 2.711vw 0 0;
    font-size: 1.807vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseSwiperSlideSmallTxt {
    margin: 5.867vw 0 0;
    font-size: 3.911vw;
  }
}

.chooseSwiperSlideImg {
  margin: 59px auto 0;
  width: 510px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseSwiperSlideImg {
    margin: 3.554vw auto 0;
    width: 30.723vw;
  }
}
@media screen and (max-width: 767px) {
  .chooseSwiperSlideImg {
    margin: 7.692vw auto 0;
    width: 66.493vw;
  }
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  margin: 0;
  padding: 0;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

.swiper-button-prev,
.swiper-button-next {
  z-index: 10;
  top: 402px;
  width: 30px;
  height: 80px;
  cursor: pointer;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .swiper-button-prev,
  .swiper-button-next {
    top: 24.217vw;
    width: 1.807vw;
    height: 4.819vw;
  }
}
@media screen and (max-width: 767px) {
  .swiper-button-prev,
  .swiper-button-next {
    top: 52.412vw;
    width: 3.911vw;
    height: 10.43vw;
  }
}

.swiper-button-prev {
  position: absolute;
  left: 44px;
  background: url(/twinkleheart/images/choose/choose-slide-prev@1x.png) no-repeat center center/cover;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .swiper-button-prev {
    left: 2.651vw;
  }
}
@media screen and (max-width: 767px) {
  .swiper-button-prev {
    left: 5.737vw;
  }
}

.swiper-button-next {
  position: absolute;
  right: 44px;
  background: url(/twinkleheart/images/choose/choose-slide-next@1x.png) no-repeat center center/cover;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .swiper-button-next {
    right: 2.651vw;
  }
}
@media screen and (max-width: 767px) {
  .swiper-button-next {
    right: 5.737vw;
  }
}

.chooseSwiperCont .swiper-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;
  margin: 27px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .chooseSwiperCont .swiper-pagination {
    gap: 1.807vw;
    margin: 1.627vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .chooseSwiperCont .swiper-pagination {
    gap: 3.911vw;
    margin: 3.52vw 0 0;
  }
}

.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 50%;
  background: #d1bab0;
  opacity: 1;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
    width: 1.446vw;
    height: 1.446vw;
  }
}
@media screen and (max-width: 767px) {
  .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
    width: 3.129vw;
    height: 3.129vw;
  }
}

.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
  background: #e392a8;
}

.original {
  position: relative;
  margin: 289px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .original {
    margin: 17.41vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .original {
    margin: 37.679vw 0 0;
  }
}
.original::before {
  content: "";
  position: absolute;
  top: -141px;
  left: 0;
  width: 100%;
  height: 423px;
  background: url(/twinkleheart/images/original/original-bg-deco@1x.png) no-repeat top center/cover;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .original::before {
    top: -8.494vw;
    height: 25.482vw;
  }
}
@media screen and (max-width: 767px) {
  .original::before {
    top: -18.383vw;
    height: 55.15vw;
  }
}

.originalWrap {
  position: relative;
}

.specialsTtl {
  margin: 0 auto 0;
  width: 545px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .specialsTtl {
    width: 32.831vw;
  }
}
@media screen and (max-width: 767px) {
  .specialsTtl {
    width: 71.056vw;
  }
}
.specialsTtl img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.originalDeco {
  margin: 4px auto 0;
  width: 428px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .originalDeco {
    margin: 0.241vw auto 0;
    width: 25.783vw;
  }
}
@media screen and (max-width: 767px) {
  .originalDeco {
    margin: 0.522vw auto 0;
    width: 55.802vw;
  }
}
.originalDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.originalTtlSmall {
  margin: 15px 0 0;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2.1px;
  text-align: center;
  color: #554739;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .originalTtlSmall {
    margin: 0.904vw 0 0;
    font-size: 2.108vw;
    letter-spacing: 0.127vw;
  }
}
@media screen and (max-width: 767px) {
  .originalTtlSmall {
    margin: 1.956vw 0 0;
    font-size: 4.563vw;
    letter-spacing: 0.274vw;
  }
}

.originalCont {
  background: #fcf8f0;
  padding: 96px 0 490px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .originalCont {
    padding: 5.783vw 0 29.518vw;
  }
}
@media screen and (max-width: 767px) {
  .originalCont {
    padding: 12.516vw 0 63.885vw;
  }
}

.specialImg {
  margin: 0 auto 0;
  width: 648px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .specialImg {
    width: 39.036vw;
  }
}
@media screen and (max-width: 767px) {
  .specialImg {
    width: 84.485vw;
  }
}
.specialImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.originalTxt {
  margin: 69px 0 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 2.14;
  letter-spacing: 1.12px;
  text-align: center;
  color: #2c2014;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .originalTxt {
    margin: 4.157vw 0 0;
    font-size: 1.687vw;
    font-weight: 400;
    line-height: 2.14;
    letter-spacing: 0.067vw;
  }
}
@media screen and (max-width: 767px) {
  .originalTxt {
    margin: 8.996vw 0 0;
    font-size: 3.651vw;
    letter-spacing: 0.146vw;
  }
}

.about {
  position: relative;
  margin: -253px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .about {
    margin: -15.241vw 0 0;
  }
}
@media screen and (max-width: 767px) {
  .about {
    margin: -32.986vw 0 0;
  }
}
.about::before {
  content: "";
  position: absolute;
  top: -154px;
  left: 0;
  width: 100%;
  height: 423px;
  background: url(/twinkleheart/images/about/about-bg-deco@1x.png) no-repeat top center/cover;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .about::before {
    top: -9.277vw;
    height: 25.482vw;
  }
}
@media screen and (max-width: 767px) {
  .about::before {
    top: -20.078vw;
    height: 55.15vw;
  }
}

.aboutWrap {
  position: relative;
}

.aboutTtl {
  margin: 0 0 0;
  font-size: 60px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: normal;
  text-align: center;
  color: #554739;
  font-family: "Shippori Mincho", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .aboutTtl {
    font-size: 3.614vw;
  }
}
@media screen and (max-width: 767px) {
  .aboutTtl {
    font-size: 7.823vw;
  }
}
.aboutTtl .small {
  font-size: 48px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .aboutTtl .small {
    font-size: 2.892vw;
  }
}
@media screen and (max-width: 767px) {
  .aboutTtl .small {
    font-size: 6.258vw;
  }
}

.aboutDeco {
  margin: 35px auto 0;
  width: 428px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .aboutDeco {
    margin: 2.108vw auto 0;
    width: 25.783vw;
  }
}
@media screen and (max-width: 767px) {
  .aboutDeco {
    margin: 4.563vw auto 0;
    width: 55.802vw;
  }
}
.aboutDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.aboutTtlSmall {
  margin: 15px 0 0;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2.1px;
  text-align: center;
  color: #554739;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .aboutTtlSmall {
    margin: 0.904vw 0 0;
    font-size: 2.108vw;
    letter-spacing: 0.127vw;
  }
}
@media screen and (max-width: 767px) {
  .aboutTtlSmall {
    margin: 1.956vw 0 0;
    font-size: 4.563vw;
    letter-spacing: 0.274vw;
  }
}

.aboutCont {
  background: #fcf8f0;
  padding: 98px 0 551px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .aboutCont {
    padding: 5.904vw 0 33.193vw;
  }
}
@media screen and (max-width: 767px) {
  .aboutCont {
    padding: 12.777vw 0 71.838vw;
  }
}

.aboutImg {
  margin: 0 auto 0;
  width: 648px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .aboutImg {
    width: 39.036vw;
  }
}
@media screen and (max-width: 767px) {
  .aboutImg {
    width: 84.485vw;
  }
}
.aboutImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.aboutTxt {
  margin: 68px 0 0;
  padding-inline: 40px;
  font-size: 28px;
  font-weight: 400;
  line-height: 2.14;
  letter-spacing: 1.12px;
  text-align: center;
  color: #2c2014;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .aboutTxt {
    margin: 4.096vw 0 0;
    padding-inline: 2.41vw;
    font-size: 1.687vw;
    letter-spacing: 0.067vw;
  }
}
@media screen and (max-width: 767px) {
  .aboutTxt {
    margin: 8.866vw 0 0;
    padding-inline: 5.215vw;
    font-size: 3.651vw;
    letter-spacing: 0.146vw;
  }
}

/* =============================================
SAKURA TIMEこだわりポイント＆カラーバリエーション
============================================= */
.intro {
  position: relative;
}

.introDeco {
  position: absolute;
  z-index: 1;
  height: auto;
}
.introDeco img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.introDeco.first {
  top: -231px;
  left: calc(50% - 1451px);
  width: 1025px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.first {
    top: -15.608vw;
    left: calc(50% - 98.041vw);
    width: 69.257vw;
  }
}
@media screen and (max-width: 767px) {
  .introDeco.first {
    top: -21.608vw;
    left: 0vw;
    width: 100%;
  }
}
.introDeco.second {
  z-index: 2;
  width: 719px;
  top: -120px;
  right: calc(50% - 1034px);
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.second {
    width: 48.581vw;
    top: -8.108vw;
    right: calc(50% - 69.865vw);
  }
}
@media screen and (max-width: 767px) {
  .introDeco.second {
    top: 13.86%;
    left: 0vw;
    width: 100%;
  }
}
.introDeco.third {
  top: 983px;
  left: calc(50% - 1161px);
  width: 714px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.third {
    top: 66.419vw;
    left: calc(50% - 78.446vw);
    width: 48.243vw;
  }
}
@media screen and (max-width: 767px) {
  .introDeco.third {
    top: 27.9%;
    left: 0vw;
    width: 100%;
  }
}
.introDeco.four {
  z-index: 2;
  width: 573px;
  top: 1042px;
  right: calc(50% - 1050px);
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.four {
    width: 38.716vw;
    top: 70.405vw;
    right: calc(50% - 70.94vw);
  }
}
@media screen and (max-width: 767px) {
  .introDeco.four {
    top: 40.9%;
    right: 0;
    width: 97.067vw;
  }
}
.introDeco.five {
  top: 1840px;
  left: calc(50% - 1066px);
  width: 824px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.five {
    top: 124.324vw;
    left: calc(50% - 72.027vw);
    width: 55.676vw;
  }
}
@media screen and (max-width: 767px) {
  .introDeco.five {
    z-index: 2;
    top: 48.2%;
    left: 0vw;
    width: 37.4vw;
  }
}
.introDeco.six {
  z-index: 2;
  width: 472px;
  top: 2034px;
  right: calc(50% - 1015px);
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.six {
    width: 31.892vw;
    top: 137.432vw;
    right: calc(50% - 68.581vw);
  }
}
@media screen and (max-width: 767px) {
  .introDeco.six {
    top: 55.6%;
    left: 0vw;
    width: 100%;
  }
}
.introDeco.seven {
  z-index: 2;
  top: 3096px;
  right: calc(50% - 1238px);
  width: 835px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.seven {
    top: 209.189vw;
    right: calc(50% - 83.649vw);
    width: 56.419vw;
  }
}
@media screen and (max-width: 767px) {
  .introDeco.seven {
    top: 72.5%;
    right: 0;
    width: 63.4vw;
  }
}
.introDeco.eight {
  z-index: 2;
  width: 678px;
  top: 4277px;
  left: calc(50% - 1101px);
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.eight {
    width: 45.811vw;
    top: 288.986vw;
    left: calc(50% - 74.392vw);
  }
}
@media screen and (max-width: 767px) {
  .introDeco.eight {
    z-index: 2;
    top: 84.55%;
    left: 0;
    width: 22.2vw;
  }
}
.introDeco.night {
  top: 4346px;
  right: calc(50% - 1203px);
  width: 749px;
  z-index: 2;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.night {
    top: 293.649vw;
    right: calc(50% - 81.284vw);
    width: 50.608vw;
  }
}
@media screen and (max-width: 767px) {
  .introDeco.night {
    z-index: 2;
    top: 91.28%;
    right: 0;
    width: 50vw;
  }
}
.introDeco.ten {
  z-index: 2;
  width: 593px;
  top: 5199px;
  right: calc(50% - 1137px);
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.ten {
    width: 40.068vw;
    top: 351.284vw;
    right: calc(50% - 76.824vw);
  }
}
@media screen and (max-width: 767px) {
  .introDeco.ten {
    z-index: 2;
    top: 98.3%;
    right: initial;
    left: 0;
    width: 100%;
  }
}
.introDeco.eleven {
  top: 5586px;
  left: calc(50% - 1115px);
  width: 573px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.eleven {
    top: 377.432vw;
    left: calc(50% - 75.338vw);
    width: 38.716vw;
  }
}
@media screen and (max-width: 767px) {
  .introDeco.eleven {
    display: none;
  }
}
.introDeco.twelve {
  z-index: 2;
  width: 387px;
  top: 6536px;
  right: calc(50% - 1069px);
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.twelve {
    width: 26.149vw;
    top: 441.622vw;
    right: calc(50% - 72.23vw);
  }
}
@media screen and (max-width: 767px) {
  .introDeco.twelve {
    display: none;
  }
}
.introDeco.thirteen {
  z-index: 2;
  top: 7382px;
  left: calc(50% - 1129px);
  width: 668px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .introDeco.thirteen {
    top: 498.784vw;
    left: calc(50% - 76.284vw);
    width: 45.135vw;
  }
}
@media screen and (max-width: 767px) {
  .introDeco.thirteen {
    display: none;
  }
}

.variation {
  position: relative;
}

.variationHead {
  text-align: center;
}

.variationHeadTit {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 3px;
  color: #333333;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationHeadTit {
    font-size: 3.378vw;
    letter-spacing: 0.203vw;
  }
}
@media screen and (max-width: 767px) {
  .variationHeadTit {
    font-size: 6.133vw;
    line-height: 1.43;
    letter-spacing: 0.368vw;
  }
}

.variationHeadSub {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1.76px;
  color: #eba7a6;
  margin: 11px 0 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationHeadSub {
    margin: 0.743vw 0 0 0;
    font-size: 1.49vw;
    letter-spacing: 0.12vw;
  }
}
@media screen and (max-width: 767px) {
  .variationHeadSub {
    margin: 1.33vw 0 0 0;
    font-size: 4.267vw;
    letter-spacing: 0.341vw;
  }
}

.variationCont {
  position: relative;
  max-width: 1366px;
  width: 100%;
  margin: 85px auto 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationCont {
    max-width: 92.3vw;
    margin: 5.74vw auto 0;
  }
}
@media screen and (max-width: 767px) {
  .variationCont {
    max-width: 100%;
    margin: 11.4vw auto 0;
    padding-inline: 5.333vw;
  }
}

.variationLeft {
  position: absolute;
  top: 44px;
  left: 0;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationLeft {
    top: 2.973vw;
  }
}
@media screen and (max-width: 767px) {
  .variationLeft {
    position: static;
  }
}

.variationLeftHead {
  position: relative;
}
@media screen and (max-width: 767px) {
  .variationLeftHead::after {
    content: "";
    position: absolute;
    bottom: -2.667vw;
    left: -5.6vw;
    width: 107%;
    height: 0.533vw;
    background-image: -webkit-gradient(linear, left top, right top, from(#fde8d7), color-stop(99%, #f9c2d2));
    background-image: linear-gradient(to right, #fde8d7, #f9c2d2 99%);
  }
}

.variationLeftHeadSub {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1.76px;
  color: #eba7a6;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationLeftHeadSub {
    font-size: 1.486vw;
    letter-spacing: 0.119vw;
  }
}
@media screen and (max-width: 767px) {
  .variationLeftHeadSub {
    font-size: 4vw;
    letter-spacing: 0.32vw;
  }
}

.variationLeftHeadTit {
  margin: 4px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  color: #333333;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationLeftHeadTit {
    margin: 0.27vw 0 0;
    font-size: 2.297vw;
  }
}
@media screen and (max-width: 767px) {
  .variationLeftHeadTit {
    margin: 1.2vw 0 0;
    font-size: 5.6vw;
    letter-spacing: normal;
  }
}
.variationLeftHeadTit .small {
  font-size: 22px;
  letter-spacing: 0.52px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationLeftHeadTit .small {
    font-size: 1.486vw;
    letter-spacing: 0.035vw;
  }
}
@media screen and (max-width: 767px) {
  .variationLeftHeadTit .small {
    font-size: 5.067vw;
    letter-spacing: 0.101vw;
  }
}

.variationLeftTxt {
  margin: 43px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 2.11;
  letter-spacing: 0.36px;
  color: #333333;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationLeftTxt {
    margin: 2.905vw 0 0;
    font-size: 1.216vw;
    letter-spacing: 0.024vw;
  }
}
@media screen and (max-width: 767px) {
  .variationLeftTxt {
    margin: 9.9vw 0 0;
    font-size: 4vw;
    line-height: 2;
    letter-spacing: 0.16vw;
  }
}

.variationLeftImg {
  margin: 38px 0 0;
  width: 465px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationLeftImg {
    margin: 2.568vw 0 0;
    width: 31.419vw;
  }
}
@media screen and (max-width: 767px) {
  .variationLeftImg {
    margin: 13.333vw 0 0;
    width: 100%;
  }
}
.variationLeftImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.variationMainImg {
  margin: 0 0 0 534px;
  width: 488px;
  height: auto;
}
.variationMainImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationMainImg {
    margin: 0 0 0 36.081vw;
    width: 32.973vw;
  }
}

.variationRight {
  position: absolute;
  top: 163px;
  right: -1px;
  width: 390px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationRight {
    top: 11.014vw;
    right: -0.068vw;
    width: 26.351vw;
  }
}
@media screen and (max-width: 767px) {
  .variationRight {
    margin: 13.333vw 0 0;
    position: static;
    width: 100%;
  }
}

.variationRightHeadSub {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1.1px;
  color: #eba7a6;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationRightHeadSub {
    font-size: 1.486vw;
    letter-spacing: 0.074vw;
  }
}
@media screen and (max-width: 767px) {
  .variationRightHeadSub {
    font-size: 4vw;
    letter-spacing: 0.32vw;
  }
}

.variationRightHeadTit {
  position: relative;
  margin: -4px 0 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationRightHeadTit {
    margin: -0.27vw 0 0;
    font-size: 2.297vw;
  }
}
@media screen and (max-width: 767px) {
  .variationRightHeadTit {
    margin: 1.2vw 0 0;
    font-size: 5.067vw;
    letter-spacing: 0.101vw;
  }
}
.variationRightHeadTit .en {
  font-size: 26px;
  letter-spacing: 0.52px;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationRightHeadTit .en {
    font-size: 1.757vw;
    letter-spacing: 0.035vw;
  }
}
@media screen and (max-width: 767px) {
  .variationRightHeadTit .en {
    padding: 0 0.667vw 0 0;
    font-size: 5.6vw;
    letter-spacing: normal;
  }
}
.variationRightHeadTit::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 171%;
  height: 2px;
  background-image: -webkit-gradient(linear, right top, left top, from(#fde8d7), color-stop(99%, #f9c2d2));
  background-image: linear-gradient(to left, #fde8d7, #f9c2d2 99%);
}
@media screen and (max-width: 767px) {
  .variationRightHeadTit::after {
    bottom: -2.667vw;
    left: 0;
    width: 171%;
    height: 0.533vw;
  }
}

.variationRightTxt {
  margin: 34px 0 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 2.11;
  letter-spacing: 0.36px;
  color: #333333;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationRightTxt {
    margin: 2.297vw 0 0 0;
    font-size: 1.216vw;
    letter-spacing: 0.024vw;
  }
}
@media screen and (max-width: 767px) {
  .variationRightTxt {
    display: none;
  }
}

.variationRightTxtSp {
  display: none;
}
@media screen and (max-width: 767px) {
  .variationRightTxtSp {
    display: block;
    margin: 9.9vw 0 0;
    font-size: 4vw;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.16vw;
    font-family: "Noto Sans JP", sans-serif;
    color: #333333;
  }
}

.variationRightImg {
  position: relative;
  z-index: 1;
  margin: 54px 0 0;
  width: 278px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationRightImg {
    margin: 3.649vw 0 0;
    width: 18.784vw;
  }
}
@media screen and (max-width: 767px) {
  .variationRightImg {
    margin: 8vw auto 0;
    width: 64.133vw;
  }
}
.variationRightImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.variationRightImg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 104px;
  left: -250px;
  width: 280px;
  height: 1px;
  rotate: 34deg;
  background: #707070;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .variationRightImg::before {
    top: 7.027vw;
    left: -16.892vw;
    width: 18.919vw;
    height: 0.068vw;
  }
}
@media screen and (max-width: 767px) {
  .variationRightImg::before {
    display: none;
  }
}

/* =============================================
belt
============================================= */
.drawerIcon {
  position: relative;
  padding: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 120px;
  background: #554739;
  cursor: pointer;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}
@media screen and (max-width: 767px) {
  .drawerIcon {
    width: 15.645vw;
  }
}
.drawerIcon.js-show .drawerIconBar:nth-of-type(1) {
  width: 40px;
  -webkit-transform: translate(-50%, 14px) rotate(35deg);
          transform: translate(-50%, 14px) rotate(35deg);
}
@media screen and (max-width: 767px) {
  .drawerIcon.js-show .drawerIconBar:nth-of-type(1) {
    width: 5.215vw;
    -webkit-transform: translate(-50%, 1.825vw) rotate(35deg);
            transform: translate(-50%, 1.825vw) rotate(35deg);
  }
}
.drawerIcon.js-show .drawerIconBar:nth-of-type(2) {
  opacity: 0;
}
.drawerIcon.js-show .drawerIconBar:nth-of-type(3) {
  width: 40px;
  -webkit-transform: translate(-50%, -14px) rotate(-35deg);
          transform: translate(-50%, -14px) rotate(-35deg);
}
@media screen and (max-width: 767px) {
  .drawerIcon.js-show .drawerIconBar:nth-of-type(3) {
    width: 5.215vw;
    -webkit-transform: translate(-50%, -1.825vw) rotate(-35deg);
            transform: translate(-50%, -1.825vw) rotate(-35deg);
  }
}

.drawerIconWrap {
  position: relative;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .drawerIcon.js-show .drawerIconWrap::before, .drawerIcon.js-show .drawerIconWrap::after {
    opacity: 0;
    visibility: hidden;
  }
}
.drawerIconBar {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 2px;
  background: #ffffff;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media screen and (max-width: 767px) {
  .drawerIconBar {
    width: 5.215vw;
    height: 0.261vw;
  }
}
.drawerIconBar:nth-of-type(1) {
  top: -23px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .drawerIconBar:nth-of-type(1) {
    top: -3.01vw;
  }
}
.drawerIconBar:nth-of-type(2) {
  top: -11px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .drawerIconBar:nth-of-type(2) {
    top: -1.385vw;
  }
}
.drawerIconBar:nth-of-type(3) {
  top: 4.9px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .drawerIconBar:nth-of-type(3) {
    top: 0.64vw;
  }
}

.drawerIconBarTxt {
  position: absolute;
  margin: 0;
  top: 17px;
  left: 50%;
  translate: -50%;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.9px;
  text-align: center;
  color: #fff;
  font-family: "Noto Serif JP", serif;
}
@media screen and (max-width: 767px) {
  .drawerIconBarTxt {
    top: 2.226vw;
    font-size: 2.347vw;
    letter-spacing: 0.117vw;
  }
}
.drawerIconBarTxt::before {
  content: "Menu";
}

.drawerIcon.js-show .drawerIconBarTxt::before {
  content: "Close";
}

.drawer {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f3eeea;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer.js-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 0.5s linear, visibility 0s linear 0s;
  transition: opacity 0.5s linear, visibility 0s linear 0s;
}
.drawer.js-show .drawerMenuList {
  opacity: 1;
}

body.is-lock {
  overflow: hidden;
}
body.is-lock .drawer,
body.is-lock #fixedBtnWrap {
  z-index: 9999;
}

.drawer.is-closing {
  opacity: 0;
  visibility: visible;
  -webkit-transition: opacity 0.5s linear, visibility 0.5s linear;
  transition: opacity 0.5s linear, visibility 0.5s linear;
}
.drawer.is-closing .drawerMenuList {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.drawerWrap {
  position: relative;
  min-height: 93.5vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.drawerNav {
  max-width: 584px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .drawerNav {
    max-width: 77.54vw;
  }
}

.drawerMenuList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.5s linear 0.25s;
  transition: opacity 0.5s linear 0.25s;
}

.drawerMenuItem {
  position: relative;
  width: 100%;
  border-top: 1px solid #554739;
  padding-block: 32px 32px;
}
@media screen and (max-width: 767px) {
  .drawerMenuItem {
    padding-block: 4.172vw 4.172vw;
  }
}

.drawerMenuItem:last-child {
  border-bottom: 1px solid #554739;
}

.drawerMenuItemWrap ul {
  margin: 21px 0 0;
  padding-left: 52px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 70px;
  grid-row-gap: 10px;
}
@media screen and (max-width: 767px) {
  .drawerMenuItemWrap ul {
    margin: 2.738vw 0 0;
    padding-left: 6.78vw;
    grid-column-gap: 9.126vw;
    grid-row-gap: 1.304vw;
  }
}
.drawerMenuItemWrap li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}
@media screen and (max-width: 767px) {
  .drawerMenuItemWrap li a {
    -webkit-column-gap: 1.304vw;
       -moz-column-gap: 1.304vw;
            column-gap: 1.304vw;
  }
}
@media (any-hover: hover) {
  .drawerMenuItemWrap li a:hover .drawerMenuItemDeco line {
    stroke: #e392a8;
  }
  .drawerMenuItemWrap li a:hover .drawerMenuItemTxt {
    color: #e392a8;
  }
}

.drawerMenuItemLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 14px;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}
@media screen and (max-width: 767px) {
  .drawerMenuItemLink {
    padding-left: 1.825vw;
    -webkit-column-gap: 1.304vw;
       -moz-column-gap: 1.304vw;
            column-gap: 1.304vw;
  }
}
@media (any-hover: hover) {
  .drawerMenuItemLink:hover .drawerMenuItemLinkDeco path {
    fill: #e392a8;
  }
  .drawerMenuItemLink:hover .drawerMenuItemLinkTxt {
    color: #e392a8;
  }
}

.drawerMenuItemLinkDeco {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
  .drawerMenuItemLinkDeco {
    width: 3.911vw;
    height: 3.911vw;
  }
}
.drawerMenuItemLinkDeco path {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.drawerMenuItemLinkTxt {
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #554739;
  font-family: "Shippori Mincho", serif;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
  .drawerMenuItemLinkTxt {
    font-size: 4.172vw;
  }
}

.drawerMenuItemDeco {
  width: 20px;
  height: 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 767px) {
  .drawerMenuItemDeco {
    width: 2.608vw;
    height: 1.695vw;
  }
}
.drawerMenuItemDeco line {
  -webkit-transition: stroke 0.3s ease;
  transition: stroke 0.3s ease;
}

.drawerMenuItemTxt {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #554739;
  font-family: "Shippori Mincho", serif;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
  .drawerMenuItemTxt {
    font-size: 3.911vw;
  }
}

.fixedLeft {
  width: calc((100% - 768px) / 2);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 768px) / 2);
          flex: 0 0 calc((100% - 768px) / 2);
  background: #f3eeea;
  border-right: 1px solid #707070;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedLeft {
    width: calc((100% - 46.265vw) / 2);
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 46.265vw) / 2);
            flex: 0 0 calc((100% - 46.265vw) / 2);
  }
}
@media screen and (max-width: 767px) {
  .fixedLeft {
    display: none;
  }
}

.fixedLeftLogo {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  max-width: 234px;
  width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedLeftLogo {
    max-width: 14.096vw;
  }
}
.fixedLeftLogo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fixedRight {
  width: calc((100% - 768px) / 2);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 768px) / 2);
          flex: 0 0 calc((100% - 768px) / 2);
  position: sticky;
  background: #f3eeea;
  border-left: 1px solid #707070;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRight {
    width: calc((100% - 46.865vw) / 2);
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 46.865vw) / 2);
            flex: 0 0 calc((100% - 46.865vw) / 2);
  }
}
@media screen and (max-width: 767px) {
  .fixedRight {
    display: none;
  }
}

.fixedRightNav {
  position: absolute;
  z-index: 1;
  top: 23.5%;
  left: 50%;
  translate: -50% 0;
  width: 382px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightNav {
    width: 23.82vw;
  }
}

.fixedRightMenuList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}

.fixedRightMenuItem {
  position: relative;
  width: 100%;
  border-top: 1px solid #554739;
  padding-block: 14px 18px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItem {
    border-top: 0.06vw solid #554739;
    padding-block: 0.843vw 1.084vw;
  }
}

.fixedRightMenuItem:first-child {
  padding-block: 15px 15px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItem:first-child {
    padding-block: 0.904vw 0.904vw;
  }
}

.fixedRightMenuItem:last-child {
  padding-block: 18px 0px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItem:last-child {
    padding-block: 1.084vw 0;
  }
}

.fixedRightMenuItem:nth-child(4),
.fixedRightMenuItem:nth-child(5) {
  padding-block: 18px 19px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItem:nth-child(4),
  .fixedRightMenuItem:nth-child(5) {
    padding-block: 1.084vw 1.145vw;
  }
}

.fixedRightMenuItemWrap ul {
  margin: 7px 0 0;
  padding-left: 37px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 40px;
  grid-row-gap: 10px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItemWrap ul {
    margin-top: 0.422vw;
    padding-left: 2.229vw;
    grid-column-gap: 2.41vw;
    grid-row-gap: 0.602vw;
  }
}
.fixedRightMenuItemWrap li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItemWrap li a {
    -webkit-column-gap: 0.602vw;
       -moz-column-gap: 0.602vw;
            column-gap: 0.602vw;
  }
}
@media (any-hover: hover) {
  .fixedRightMenuItemWrap li a:hover .fixedRightMenuItemDeco line {
    stroke: #e392a8;
  }
  .fixedRightMenuItemWrap li a:hover .fixedRightMenuItemTxt {
    color: #e392a8;
  }
}

.fixedRightMenuItemDeco {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 4px 0 0;
  width: 10px;
  height: 10px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItemDeco {
    margin: 0.241vw 0 0;
    width: 0.602vw;
    height: 0.602vw;
  }
}
.fixedRightMenuItemDeco line {
  -webkit-transition: stroke 0.3s ease;
  transition: stroke 0.3s ease;
}

.fixedRightMenuItemTxt {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #554739;
  font-family: "Shippori Mincho", serif;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItemTxt {
    font-size: 1.205vw;
  }
}

.fixedRightMenuItemHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  padding-left: 13px;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItemHead {
    -webkit-column-gap: 0.602vw;
       -moz-column-gap: 0.602vw;
            column-gap: 0.602vw;
    padding-left: 0.783vw;
  }
}
@media (any-hover: hover) {
  .fixedRightMenuItemHead:hover .fixedRightMenuItemHeadDeco path {
    fill: #e392a8;
  }
  .fixedRightMenuItemHead:hover .fixedRightMenuItemHeadTxt {
    color: #e392a8;
  }
}

.fixedRightMenuItemHeadDeco {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 16px;
  height: 16px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItemHeadDeco {
    width: 0.964vw;
    height: 0.964vw;
  }
}
.fixedRightMenuItemHeadDeco path {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.fixedRightMenuItemHeadTxt {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #554739;
  font-family: "Shippori Mincho", serif;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightMenuItemHeadTxt {
    font-size: 1.205vw;
  }
}

.fixedRightBtnLink {
  position: relative;
  display: block;
  margin: 71px auto 0;
  width: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightBtnLink {
    margin: 4.797vw auto 0;
    width: 21.622vw;
  }
}
.fixedRightBtnLink::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 320px;
  height: 70px;
  background: url(/twinkleheart/images/fixed/fixed-btn@1x.png) no-repeat center center/contain;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightBtnLink::before {
    width: 21.622vw;
    height: 4.73vw;
  }
}
@media (any-hover: hover) {
  .fixedRightBtnLink:hover::before {
    background: url(/twinkleheart/images/fixed/fixed-btn-active@1x.png) no-repeat center center/contain;
  }
}

.fixedRightBtnLinkTxt {
  position: relative;
  z-index: 2;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: left;
  color: #fff;
  font-family: "Shippori Mincho", serif;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedRightBtnLinkTxt {
    font-size: 1.205vw;
    letter-spacing: 0.06vw;
  }
}

#fixedBtnWrap {
  display: none;
}
@media screen and (max-width: 767px) {
  #fixedBtnWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    opacity: 1;
    -webkit-transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
    z-index: 200;
  }
}

#fixedBtnWrap.is-show {
  opacity: 1;
  visibility: visible;
}

.fixedBtnLink {
  position: relative;
  display: block;
  text-align: center;
  padding: 33px 161px 33px 284px;
  background-color: #9a867d;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
  .fixedBtnLink {
    line-height: 1;
    padding: 4.302vw 20.991vw 4.302vw 37.027vw;
  }
}
@media screen and (any-hover: hover) and (max-width: 767px) {
  .fixedBtnLink:hover .fixedBtnArrow {
    width: 7.813vw;
  }
}

.fixedBtnTxt {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1.2px;
  font-family: "Shippori Mincho", serif;
  color: #fff;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .fixedBtnTxt {
    font-size: 3.129vw;
    letter-spacing: 0.156vw;
  }
}

.fixedBtnArrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0 -50%;
  left: 504px;
  width: 40px;
  height: 1px;
  background: #fff;
  -webkit-transition: width 0.5s ease;
  transition: width 0.5s ease;
}
@media screen and (max-width: 767px) {
  .fixedBtnArrow {
    left: 65.711vw;
    width: 5.215vw;
    height: 0.13vw;
  }
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  15%, 85% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  15%, 85% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes scrollHover {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  15% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes scrollHover {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  15% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
body.is-lock {
  height: 100dvh;
  width: 100%;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}

.spBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.fixedCenter {
  max-width: 768px;
  width: 50%;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .fixedCenter {
    max-width: 46.545vw;
  }
}

.spWrap {
  position: relative;
}

.spCont {
  position: relative;
  overflow: hidden;
  width: 768px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 768px;
          flex: 0 0 768px;
  background-color: #f3eeea;
}
@media screen and (min-width: 768px) and (max-width: 1660px) {
  .spCont {
    width: 46.545vw;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 46.545vw;
            flex: 0 0 46.545vw;
  }
}
@media screen and (max-width: 767px) {
  .spCont {
    width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}