/*font*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&display=swap");

/* ==================================================
共通
================================================== */
/*font
fs-sppc*/
:root {
  --fs1614: 2.5vw;
  --fs1816: 2.813vw;
  --fs2220: 3.438vw;
  --fs4025: 6.25vw;
  --fs3026: 4.688vw;
  --fs3032: 4.688vw;
  --fs4540: 7.031vw;
  --fs5142: 7.969vw;
  --fs4549: 7.031vw;
}
@media screen and (min-width: 641px) {
  :root {
    --fs1614: 2.5vw;
    --fs1816: 2.813vw;
    --fs2220: 3.438vw;
    --fs4025: 6.25vw;
    --fs3026: 4.688vw;
    --fs3032: 4.688vw;
    --fs4540: 7.031vw;
    --fs5142: 7.969vw;
    --fs4549: 7.031vw;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --fs1614: 1.296vw;
    --fs1816: 1.481vw;
    --fs2220: 1.852vw;
    --fs4025: 2.315vw;
    --fs3026: 2.407vw;
    --fs3032: 2.963vw;
    --fs4540: 3.704vw;
    --fs5142: 3.889vw;
    --fs4549: 4.537vw;
  }
}
:root {
  --font-1614: clamp(8px, var(--fs1614), 16px);
  --font-1816: clamp(9px, var(--fs1816), 18px);
  --font-2220: clamp(11px, var(--fs2220), 22px);
  --font-4025: clamp(20px, var(--fs4025), 40px);
  --font-3026: clamp(15px, var(--fs3026), 30px);
  --font-3032: clamp(15px, var(--fs3032), 30px);
  --font-4540: clamp(22.5px, var(--fs4540), 45px);
  --font-5142: clamp(25.5px, var(--fs5142), 51px);
  --font-4549: clamp(22.5px, var(--fs4549), 45px);
}
@media screen and (min-width: 641px) {
  :root {
    --font-1614: clamp(8px, var(--fs1614), 14px);
    --font-1816: clamp(9px, var(--fs1816), 16px);
    --font-2220: clamp(11px, var(--fs2220), 20px);
    --font-4025: clamp(20px, var(--fs4025), 25px);
    --font-3026: clamp(15px, var(--fs3026), 26px);
    --font-3032: clamp(15px, var(--fs3032), 32px);
    --font-4540: clamp(22.5px, var(--fs4540), 40px);
    --font-5142: clamp(25.5px, var(--fs5142), 42px);
    --font-4549: clamp(22.5px, var(--fs4549), 49px);
  }
}
.enGothic {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: italic;
}

.backColor {
  color: #ffffff;
}

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

@media screen and (min-width: 641px) and (max-width: 960px) {
  .tabno {
    display: none !important;
  }
}

@media screen and (min-width: 961px) {
  .pcno {
    display: none !important;
  }
  .indexno {
    display: none;
    opacity: 0;
  }
}

/* ==================================================
awardaArea
================================================== */

.awardArea .campaignTtlBlk {
  margin: 0 auto 12%;
  display: flex;
  justify-content: center;
  flex-flow: column;
}

.awardArea .campaignTtlBlk .campaignTtl {
  position: relative;
  display: inline-block;
  padding: 0 1.6em;
  margin: 0 auto 0.75em;
  font-size: var(--fs3026);
  text-align: center;
}

.awardArea .campaignTtlBlk .campaignTtl::before,
.awardArea .campaignTtlBlk .campaignTtl::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 0.95em;
  height: 1.8em;
}

.awardArea .campaignTtlBlk .campaignTtl::before {
  background: url("/product/dejavu/common/img/left.png") no-repeat;
  background-size: cover;
  left: 0;
}

.awardArea .campaignTtlBlk .campaignTtl::after {
  background: url("/product/dejavu/common/img/right.png") no-repeat;
  background-size: cover;
  right: 0;
}
.awardArea .campaignTtlBlk p {
  text-align: center;
  font-size: var(--font-1816);
}
@media screen and (min-width: 641px) {
  .awardArea {
    display: flex;
    margin: 0 auto 8%;
    flex-flow: column-reverse;
  }
  .awardArea .campaignTtlBlk {
    margin: 6% auto 0;
    width: 100%;
  }
  .awardArea .campaignTtlBlk .campaignTtl {
  }
  .awardArea .campaignTtlBlk p {
  }
}

/* ==================================================
productDetalArea
================================================== */
.productDetalArea {
}

.productDetalArea > h2 {
  font-size: var(--font-4025);
  font-size: var(--font-4549);
  text-align: center;
  margin: 0 auto;
  color: #575555 !important;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: italic;
}

@media screen and (min-width: 641px) {
  .productDetalArea {
  }

  .productDetalArea > h2 {
  }
}

@media screen and (min-width: 961px) {
  .productDetalArea {
    width: min(90vw, 980px);
    margin: 0 auto;
  }

  .productDetalArea > h2 {
  }
}

/* ==================================================
Point
================================================== */

.psBlk {
  padding: 10% 0 2rem;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.psBlk .pointBlk {
  margin: 9.5% auto 0;
  width: 100%;
}
.pointSet {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.pointSet + .pointSet {
}
.psBgSet {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.psTile {
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 0rem 0 0;
  text-align: left;
  z-index: 10;
}
.psTile .ttlGlp {
  width: 100%;
  display: block;
}
.psTile .txtGlp {
}
.psTile .accObj {
  display: flex;
  justify-content: flex-end;
  display: none;
}
.psTile .accObj .icon {
  position: relative;
  width: 1em;
  display: block;
  margin: 0 0.51em 0 0;
}
.psTile .accObj .icon::before,
.psTile .accObj .icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 1em;
  height: 0.09em;
  background: #000;
}
.psTile .accObj .icon::after {
  transform: rotate(90deg) translate(0, -50%);
  top: calc(50% - 0.045em);
}

.pointSet + .pointSet {
  margin-top: 5rem;
}

.pointSet .psPoint {
  position: relative;
  font-size: var(--font-5142);
}

.pointSet p.boardTxt {
  padding: 0 5px;
  margin: 4rem 4rem 0;
}

.pointSet h3 {
  margin: 0.5em auto 0.7em;
  line-height: 1.4;
  font-size: var(--font-3026);
  letter-spacing: 0.05em;
}
.pointSet h3 span {
  vertical-align: super;
}

.pointSet h4 {
  margin: 4rem 0 1rem;
}

.pointSet span.super {
  vertical-align: super;
}

.pointSet p.psTxt {
  margin: 0 auto 1.4em;
  line-height: 1.65;
  font-size: var(--font-2220);
}

.pointSet .psImg {
  margin: 3% auto;
}
.pointSet .psImg + h3 {
  margin: 8% auto 0.7em;
}
.pointSet .psImg + h3 + p {
}

.pointSet .psImg.wFit {
  margin: 0;
}

.pointSet figure figcaption {
  text-align: right;
  margin: 1em 0 0;
}

.pointSet p.psImg + .psImg {
  margin-top: 4rem;
}

.psHosokuR {
  width: 100%;
  text-align: left;
  margin: 4rem auto 0;
}

.psHosokuL {
  width: 90%;
  text-align: left;
  margin: 4rem auto 0 6rem;
}

.psHosokuR p.boardTxt,
.psHosokuL p.boardTxt {
  margin: 0 auto 2rem;
  display: inline-block;
  padding: 0.3em 0.5em 0.4em;
  line-height: 1;
}

.psBlk .pkgBlk {
}
.psBlk .pkgBlk .imgObj {
  width: 100%;
  line-height: 1;
  position: relative;
  filter: drop-shadow(20px 30px 3px rgba(0, 0, 0, 0.3));
}
.psBlk .pkgBlk .imgObj.blush {
  width: 100%;
  margin: 0 0 0 8%;
  transform-origin: top;
}
.psBlk .pkgBlk .imgObj.bottle {
  margin: 4.5% 0 0 32%;
  width: 105%;
}

.psBlk > .ttlGlp {
  margin: 0 auto 0;
  width: 100%;
}
.psBlk .ttlGlp .ttlObj {
}
.psBlk .ttlGlp .sTtlObj {
  text-align: left;
  margin: 0;
  letter-spacing: 0;
  line-height: 1.2;
  font-size: var(--font-4549);
}

.psBlk .baObj {
  margin: 11% auto 0;
  width: 90%;
}
@media screen and (min-width: 641px) {
  .psBlk {
    padding: 0rem 0 4rem;
  }
  .pointSet {
    width: 100%;
  }
  .pointSet + .pointSet {
    margin-top: 16%;
  }
  .leftPs,
  .rightPs {
    width: 50%;
    margin: 0 2.5%;
  }
  .psBlk .pointBlk {
    display: flex;
    margin: 0 auto;
    flex-flow: wrap;
    align-items: flex-start;
  }
  .leftPs {
    margin-top: 4em;
    margin: 0 0 0 auto;
    /* width: 40%; */
    padding: 0 4% 0 0;
  }
  .rightPs {
    margin-top: -10em;
    margin: 0 auto 0 0;
    padding: 0 0 0 4%;
  }
  .psTile {
    width: 100%;
    padding: 0 0 6rem;
  }

  .psTile {
  }
  .psTile .ttlGlp {
  }
  .psTile .txtGlp {
    display: block !important;
  }
  .psTile .accObj {
    display: none;
  }
  .psTile .accObj .icon {
  }
  .psTile .accObj .icon::before,
  .psTile .accObj .icon::after {
  }
  .psTile .accObj .icon::after {
  }

  .psBlk .pkgBlk {
  }
  .psBlk .pkgBlk .imgObj {
    filter: drop-shadow(-40px 30px 6px rgba(0, 0, 0, 0.3));
  }
  .psBlk .pkgBlk .imgObj.blush {
    width: 49%;
    margin: 0 0 0 40.2%;
  }
  .psBlk .pkgBlk .imgObj.bottle {
    width: 52%;
    margin: 2% 0 0 51.8%;
  }

  .psBlk > .ttlGlp {
    margin: 4% auto 3%;
    width: 100%;
  }
  .psBlk .ttlGlp .ttlObj {
  }
  .psBlk .ttlGlp .sTtlObj {
  }
  .psHosokuR {
    width: 100%;
  }
  .psBlk .baObj {
    margin: 8% auto 0;
    width: min(80%, 750px);
  }
}

@media screen and (min-width: 961px) {
  .psBlk {
  }
  .psBlk {
  }
  .leftPs,
  .rightPs {
    /* width: 45%; */
    /* max-width: 500px; */
    /* margin: 0 2.5%; */
  }
  .leftPs {
    /* margin-top: 4em; */
  }
  .rightPs {
    /* margin-top: -8em; */
  }
  .pointSet .psBg {
    display: none;
  }
  .pointSet .psPoint {
    /* top: -3rem; */
  }
  .pointSet p.boardTxt {
    padding: 0 15px;
  }
  .psBlk h2 {
    text-align: left;
    margin: 0 auto 14rem;
  }
  .psTile {
    width: 100%;
    padding: 0;
  }

  .psTile .ttlGlp {
  }
  .psTile .txtGlp {
  }
  .psTile .accObj {
  }
  .psTile .accObj .icon {
  }
  .psTile .accObj .icon::before,
  .psTile .accObj .icon::after {
  }
  .psTile .accObj .icon::after {
  }
  .psHosokuR p.boardTxt,
  .psHosokuL p.boardTxt {
    padding: 0.3em 0.5em 0.4em;
  }
  .psBlk .pkgBlk {
  }
  .psBlk .pkgBlk .imgObj {
  }
  .psBlk .pkgBlk .imgObj.blush {
  }
  .psBlk .pkgBlk .imgObj.bottle {
  }

  .psBlk > .ttlGlp {
  }
  .psBlk .ttlGlp .ttlObj {
  }
  .psBlk .ttlGlp .sTtlObj {
  }
  .psBlk .baObj {
    margin: 6% auto 0;
  }
}
@media screen and (min-width: 961px) {
  .psBlk .baObj {
    margin: 6% auto 0;
    width: 100%;
  }
  .psBlk .baObj img {
    width: 750px;
  }
}
/* ==================================================
movieArea
================================================== */
#movie {
  margin: 10% auto;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
}
#movie iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
#movie .txtBlk {
  margin: 1em auto 0;
}
@media screen and (min-width: 961px) {
  #movie {
    margin: 6% auto;
    width: min(100%, 720px);
  }
  #movie iframe {
  }
  #movie .txtBlk {
  }
}
/* ==================================================
conceptArea
================================================== */
.conceptArea {
  width: 86%;
  background: #e8e8e8;
  margin: 0 auto;
  padding: 9% 0;
  text-align: center;
}
.conceptArea .ttlObj {
  font-size: var(--fs4540);
}
.conceptArea .txtObj {
  margin: 1em 0 0;
  line-height: 1.8;
}

@media screen and (min-width: 641px) {
  .conceptArea {
    /* width: 60%; */
    max-width: 1000px;
    margin: 3% auto 0;
    padding: 5% 0;
  }
  .conceptArea .ttlObj {
  }
  .conceptArea .txtObj {
  }
}
@media screen and (min-width: 961px) {
  .conceptArea {
  }
  .conceptArea .ttlObj {
  }
  .conceptArea .txtObj {
  }
}

/* ==================================================
awardSet
================================================== */

.awardSet {
  margin: 10% auto;
}
.awardSet .imgObj {
  width: min(35%, 300px);
  margin: 0 auto;
}
.awardSet .txtObj {
  font-size: var(--font-1816);
  text-align: center;
  margin: 1.5em auto 0;
  line-height: 1.75;
}
.awardSet .txtObj a {
  display: block;
  text-decoration: underline;
  color: #bb1039;
  transition: 0.25s ease;
}
.awardSet .txtObj a:hover {
  text-decoration: none;
  opacity: 0.5;
  transition: 0.25s ease;
}
@media screen and (min-width: 961px) {
  .awardSet {
    margin: 0 auto;
  }
  .awardSet .imgObj {
    width: min(30%, 200px);
    margin: 0 auto;
  }
  .awardSet .txtObj {
  }
  .awardSet .txtObj a {
  }
}

/* ==================================================
Howto
================================================== */

.howtoSet {
  position: relative;
  padding: 0 0;
  margin: 80px auto 0;
}

.howtoSet .titSet {
  text-align: center;
}
.howtoSet .titSet p {
  margin: 0 0 2em;
}
.howtoSet h2 {
  margin: 0 auto 5rem;
  font-size: var(--font-4549);
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: italic;
}

.howtoSet .htBlk {
  width: 100%;
  margin: 0 auto;
}

.howtoSet .htSet {
  text-align: left;
  border: none;
}
.howtoSet .htSet + .htSet {
  margin: 10% auto 0;
}
.howtoSet .htSet .howTit {
  /* border-bottom: 1px solid #c6c6c6; */
  /* padding: 0.85em 0.8em; */
  line-height: 1;
  position: relative;
  font-size: var(--font-3032);
}

.howtoSet .htSet .howTxt {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-out;
}
.howtoSet .htSet .howTxt.openAcc {
  grid-template-rows: 1fr;
  border-bottom: 1px solid #c6c6c6;
  padding: 1em;
}

.howtoSet .htSet .howTxt span {
  overflow: hidden;
}
.howtoSet .htSet .accObj {
  /* display: none; */
  /* padding: 2em; */
}
.howtoSet .htSet .accObj p {
  font-size: var(--font-2220);
}
.howtoSet .htSet .accObj .imgObj {
  width: min(100%, 500px);
  margin: 2.5% 0;
}
.howtoSet .htSet .howTit.clicked + .accObj {
}

.howtoSet .movieBlk {
  margin: 5em auto 0;
  width: 100%;
  position: relative;
  max-width: 720px;
}

.howtoSet .movieBlk p {
  text-align: left;
  margin: 0.5em 0 0;
  line-height: 1.5;
}
.howtoSet .movieBlk p.prdLink {
  margin: 1em 0 0;
  position: relative;
  display: inline-block;
}
.howtoSet .movieBlk p.prdLink a {
  position: relative;
  padding: 0px 1em 0 0;
  text-decoration: none;
}
.howtoSet .movieBlk p.prdLink a:hover {
  text-decoration: underline;
}
.howtoSet .movieBlk p.prdLink a::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.5em;
  height: 0.51em;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: translate(0, -50%) rotate(-45deg);
}

.howtoSet .movieBlk iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media screen and (min-width: 641px) {
  .howtoSet {
    position: relative;
    padding: 100px 0 0;
    margin: 0 auto;
    max-width: 1080px;
  }
  .howtoSet .slideBlk .howTxtSlide .howTxt {
    text-align: center;
  }
  .howtoSet .movieBlk p {
    margin: 0.2em 0 0;
  }
}

@media screen and (min-width: 1024px) {
  .howtoSet {
    padding: 100px 0 80px;
  }
}

.page-goods .block-goods-comment-box__accordion .block-goods-comment-box-c__c dl {
}
.page-goods .block-goods-comment-box__accordion .block-goods-comment-box-c__c dl dt {
  margin-bottom: 0.25em;
  font-weight: bold;
}
.page-goods .block-goods-comment-box__accordion .block-goods-comment-box-c__c dl dt::before {
  content: "";
}
.page-goods .block-goods-comment-box__accordion .block-goods-comment-box-c__c dl dd {
}
.page-goods .block-goods-comment-box__accordion .block-goods-comment-box-c__c dl dd + dt {
  margin-top: 1.5em;
}