.header{
  background: none!important;
}
.footer{
  display: none;
}
.main-area{
  height: 101.4vh;
  padding-top: 0;
}
.main-area .main-inner{
  position: relative;
  max-width: 100vw;
  width: 100vw;
  height: 101.4vh;
  padding: 16.5vh 0 0;
  overflow: hidden;
}
/*================================
  variables
=================================*/
#fragrancechart{
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-top: 2;
  --zindex-over: 10;
  --zindex-cursor: 100;
  --zindex-top: 200;
  --pointer-none: none;
  --color-txt: #fff;
  --color-bg: #fff;
}
#fragrancechart img,
#fragrancechart picture,
#fragrancechart video,
#fragrancechart a{
  display: inline-block;
  width: 100%;
  height: auto;
}
#fragrancechart video{
  object-fit: cover;
}
#fragrancechart a:hover{
  transition: .5s;
  opacity: .7;
}
#fragrancechart span{
  display: inline-block;
}
#fragrancechart li{
  list-style: none;
}
/*--------------------------------
  variables for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  #fragrancechart .pcOnly {
    display: none!important;
  }
  #fragrancechart{
    --lpSetSize: (100vw / 375);
  }
}
/*--------------------------------
  variables for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #fragrancechart .spOnly {
    display: none!important;
  }
  #fragrancechart .pcOnly {
    display: block;
  }
}
/*--------------------------------
  variables for tablet
--------------------------------*/
@media screen and (min-width:768px) and (max-width:1020px){
  #fragrancechart{
    --lpSetSize: calc(var(--variable) * var(--ratio));
    --ratio: calc(1400 / 750);
    --variable: calc(100vw / 1400);
  }
}
@media screen and (min-width:1021px) and (max-width:1300px){
  #fragrancechart{
    --lpSetSize: calc(var(--variable) * var(--ratio));
    --ratio: calc(750 / 750);
    --variable: calc(100vw / 1200);
  }
}
@media only screen and (min-width: 1301px){
  #fragrancechart{
    --lpSetSize: calc(1400px / 1400);
  }
}
/* end variables */


/*================================
  font
=================================*/
#fragrancechart .font-ja,
#fragrancechart .font-en{
  color: var(--color-txt);
  text-align: center;
}
#fragrancechart .font-ja,
#fragrancechart .font-ja span{
  font-family: var(--font-primary);
  font-feature-settings: "palt";
  display: block;
}
#fragrancechart .font-en,
#fragrancechart .font-en span{
  font-family: "trajan-pro-3", serif!important;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  display: block;
}
/* end font */


/*================================
  font-size
=================================*/
#fragrancechart [data-ttl]{
  line-height: 1;
  letter-spacing: -0.075em;
}
#fragrancechart [data-ttl="01"]{
  font-size: calc(16* var(--lpSetSize));
  letter-spacing: 0.04em;
  margin-bottom: calc(25 * var(--lpSetSize));
}
#fragrancechart [data-ttl="02"]{
  font-size: calc(39.16* var(--lpSetSize));
  letter-spacing: -0.06em;
  padding-right: calc(2 * var(--lpSetSize));
}
#fragrancechart [data-ttl="03"]{
  font-size: calc(65.19* var(--lpSetSize));
  letter-spacing: -0.11em;
  padding-right: calc(18 * var(--lpSetSize));
}
#fragrancechart h3{
  font-size: calc(16* var(--lpSetSize));
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: calc(22 * var(--lpSetSize));
}
#fragrancechart [data-quiz-q]{
  font-size: calc(16* var(--lpSetSize));
  line-height: 1.6875;
  letter-spacing: 0.04em;
  margin-bottom: calc(30* var(--lpSetSize));
}
#fragrancechart [data-quiz-q="01"]{
  line-height: 2.3125;
  letter-spacing: 0;
  margin-bottom: calc(36 * var(--lpSetSize));
}
#fragrancechart [data-score]{
  font-size: calc(15* var(--lpSetSize));
  line-height: 1.7333333333;
  letter-spacing: 0.04em;
}
#fragrancechart [data-quiz="01"] [data-score]{
  font-size: calc(21 * var(--lpSetSize));
  letter-spacing: -0.025em;
}
#fragrancechart #backBtn{
  font-size: calc(16* var(--lpSetSize));
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-txt);
}
/*--------------------------------
  font-size for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #fragrancechart [data-ttl="01"]{
    font-size: calc(16 * var(--lpSetSize));
    margin-bottom: calc(44 * var(--lpSetSize));
  }
  #fragrancechart [data-ttl="02"]{
    font-size: calc(44.98 * var(--lpSetSize));
    letter-spacing: -0.075em;
    padding-right: calc(1 * var(--lpSetSize));
  }
  #fragrancechart [data-ttl="03"]{
    font-size: calc(74.89 * var(--lpSetSize));
    letter-spacing: -0.12em;
    padding-right: calc(17 * var(--lpSetSize));
  }
  #fragrancechart h3{
    font-size: calc(16 * var(--lpSetSize));
    margin-bottom: calc(54 * var(--lpSetSize));
  }
  #fragrancechart [data-quiz-q]{
    font-size: calc(16 * var(--lpSetSize));
    line-height: 1.6875;
    letter-spacing: 0.04em;
    margin-bottom: calc(56 * var(--lpSetSize));
  }
  #fragrancechart [data-quiz-q="01"]{
    line-height: 2.4375;
    margin-bottom: calc(74 * var(--lpSetSize));
  }
  #fragrancechart [data-score]{
    font-size: calc(15 * var(--lpSetSize));
  }
  #fragrancechart [data-quiz="01"] [data-score]{
    font-size: calc(18 * var(--lpSetSize));
  }
  #fragrancechart #backBtn{
    font-size: calc(16 * var(--lpSetSize));
  }
}
/* end font-size */


/*================================
  layout
=================================*/
#fragrancechart .questionWrap{
  position: relative;
  width: 100vw;
  height: fit-content;
  height: fit-content;
  min-height: calc(700 * var(--lpSetSize));
  overflow: hidden;
  z-index: 1;
}
#fragrancechart .questionWrap__inner{
  position: relative;
  display: flex;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  height: fit-content;
  z-index: 1;
}
#fragrancechart [data-quiz]{
  flex: 0 0 100%;
  opacity: 1;
  padding-top: calc(35 * var(--lpSetSize));
  box-sizing: border-box;
  transform: translateX(0);
}
#fragrancechart [data-quiz-a]{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10* var(--lpSetSize));
}
#fragrancechart [data-score]{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-txt);
  border-radius: 100%;
  width: calc(137* var(--lpSetSize));
  height: calc(137* var(--lpSetSize));
  padding-top: calc(4 * var(--lpSetSize));
  cursor: pointer;
  transition: 0.5s;
}
#fragrancechart #backBtn{
  position: relative;
  left: 54.2%;
  transform: translateX(-50%);
  padding: 0;
  margin-top: calc(26 * var(--lpSetSize));
  pointer-events: auto;
  transition: 2s;
  z-index: 2;
}
#fragrancechart #backBtn::before{
  content: "";
  display: block;
  background-image: url(../img/arrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 24%;
  left: -74%;
  width: calc(27* var(--lpSetSize));
  height: calc(7.5* var(--lpSetSize));
}
/*========== first ==========*/
#fragrancechart h2{
  display: flex;
  flex-direction: column;
  margin-bottom: calc(20 * var(--lpSetSize));
}
#fragrancechart [data-quiz="01"]{
  padding-top: calc(36 * var(--lpSetSize));
}
#fragrancechart [data-quiz="01"] [data-score]{
  width: calc(96 * var(--lpSetSize));
  height: calc(96 * var(--lpSetSize));
  margin: 0 auto;
}
/*========== dot-slider ==========*/
#fragrancechart .pagination{
  position: relative;
  width: calc(270 * var(--lpSetSize));
  height: calc(6 * var(--lpSetSize));
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(-36 * var(--lpSetSize)) auto 0;
  transition: 2s;
}
#fragrancechart .pagination__active{
  position: absolute;
  top: -80%;
  left: 0%;
  width: calc(13 * var(--lpSetSize));
  transition: all .6s ease;
}
#fragrancechart .pagination::before,
#fragrancechart [data-pagination-dot]{
  content: "";
  background-color: #fff;
  position: absolute;
  left: 0;
}
#fragrancechart .pagination::before{
  top: calc(2 * var(--lpSetSize));
  width: 100%;
  height: calc(1 * var(--lpSetSize));
}
#fragrancechart [data-pagination-dot]{
  border-radius: 100%;
  top: calc(-1 * var(--lpSetSize));
  width: calc(6 * var(--lpSetSize));
  height: calc(6 * var(--lpSetSize));
}
#fragrancechart [data-pagination-dot="01"]{
  left: 0;
}
#fragrancechart [data-pagination-dot="02"]{
  left: calc(68 * var(--lpSetSize));
}
#fragrancechart [data-pagination-dot="03"]{
  left: calc(135 * var(--lpSetSize));
}
#fragrancechart [data-pagination-dot="04"]{
  left: calc(201 * var(--lpSetSize));
}
#fragrancechart [data-pagination-dot="05"]{
  left: auto;
  right: 0;
}

/*--------------------------------
  layout for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #fragrancechart .questionWrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: center;
  }
  #fragrancechart [data-quiz]{
    padding-top: calc(7 * var(--lpSetSize));
  }
  #fragrancechart [data-quiz-a]{
    gap: calc(15 * var(--lpSetSize));
    width: calc(304 * var(--lpSetSize));
    margin: 0 auto;
  }
  #fragrancechart [data-score]{
    width: calc(137 * var(--lpSetSize));
    height: calc(137 * var(--lpSetSize));
    padding-top: 0;
  }
  #fragrancechart #backBtn {
    left: 0;
    transform: translateX(34%);
    height: auto;
    margin-top: 3.6%;
    cursor: pointer;
  }
  #fragrancechart #backBtn::before{
    top: 28%;
    width: calc(27 * var(--lpSetSize));
    height: calc(7.5 * var(--lpSetSize));
  }
  /*========== first ==========*/
  #fragrancechart h2{
    margin-bottom: calc(58 * var(--lpSetSize));
  }
  #fragrancechart [data-quiz="01"]{
    padding-top: calc(7 * var(--lpSetSize));
  }
  #fragrancechart [data-quiz="01"] [data-score]{
    width: calc(90.5 * var(--lpSetSize));
    height: calc(90.5 * var(--lpSetSize));
  }
  /*========== dot-slider ==========*/
  #fragrancechart .pagination{
    width: calc(269 * var(--lpSetSize));
    margin-top: -3.5%;
  }
}
/* end layout */


/*================================
  full screen
=================================*/
@media only screen and (min-width: 768px){
  .main-area{
    height: 100vh;
  }
  .main-area .main-inner{
    height: 100vh;
    height: calc(var(--vh) * 100);
    padding: 0;
  }
  #fragrancechart{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-top: 5vh;
  }
}
@media screen and (min-width: 768px) and (orientation: landscape) {
  .main-area{
    height: 100vh;
    height: calc(var(--vh) * 100);
  }
  .main-area .main-inner{
    height: 100vh;
    height: calc(var(--vh) * 100);
  }
}
@media screen and (min-width: 768px) and (orientation: portrait) {
  .main-area{
    height: 100vh;
    height: calc(var(--vh) * 100);
  }
  .main-area .main-inner{
    height: 100vh;
    height: calc(var(--vh) * 100);
  }
}
/* end full screen */



/*================================
  fadeIn
=================================*/
#fragrancechart [data-quiz] [data-delay] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
#fragrancechart [data-quiz].active [data-delay] {
  opacity: 1;
  transform: translateY(0);
}
#fragrancechart [data-quiz]:not(.active) [data-delay] {
  transition-delay: 0s, .4s; 
}
#fragrancechart [data-quiz].active [data-delay="01"]{
  transition-delay: .3s;
}
#fragrancechart [data-quiz].active [data-delay="02"]{
  transition-delay: .6s;
}
#fragrancechart [data-quiz].active [data-delay="03"]{
  transition-delay: .9s;
}
#fragrancechart [data-quiz].active [data-delay="04"]{
  transition-delay: 1.2s;
}
#fragrancechart [data-quiz].active [data-delay="05"]{
  transition-delay: 1.5s;
}
/* end fadeIn */





/*================================
  gradation
=================================*/
#fragrancechart #bgBox,
#fragrancechart #gradationBox{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 1.4s
}
#fragrancechart #gradationBox{
  width: 100%;
  height: 100%;
}
#fragrancechart [data-bg="01"]{
  background-color: rgba(185, 145, 192, 1);
}
#fragrancechart [data-bg="02"]{
  background-color: rgba(116, 140, 64, 1);
}
#fragrancechart [data-bg="03"]{
  background-color: rgba(139, 29, 68, 1);
}
#fragrancechart [data-bg="04"]{
  background-color: rgba(199, 207, 221, 1);
}
#fragrancechart [data-bg="05"]{
  background-color: rgba(176, 100, 164, 1);
}
#fragrancechart [data-bg="06"]{
  background-color: rgba(218, 107, 100, 1);
}
#fragrancechart [data-gradation]{
  filter: blur(60px) brightness(1.08) saturate(1.15);
  background-size: 80% 80%!important;
  background-position: center;
  animation-timing-function: linear;
  pointer-events: none;
  animation: wobbleFlowCentered 10s linear infinite;
  animation-delay: 0.5s;
  transition: opacity 1.4s ease;
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity;
}
#fragrancechart [data-gradation="05"]{
  filter: blur(40px) brightness(1.08) saturate(1.15);
}
@media screen and (max-width: 767px) {
  #fragrancechart [data-gradation]{
    filter: blur(30px) brightness(1.08) saturate(1.15);
    background-size: 80% 60%!important;
  }
  #fragrancechart [data-gradation="05"]{
    filter: blur(20px) brightness(1.08) saturate(1.15);
  }
}
@media (max-aspect-ratio: 3/4) {
  #fragrancechart [data-gradation]{
    animation: wobbleFlowPortrait 15s ease-in-out infinite;
  }
}
#fragrancechart #gradationBox.fade {
  opacity: 0;
}
#fragrancechart #bgBox {
  transition: opacity 1.4s ease;
}
#fragrancechart #bgBox.fade {
  opacity: 0;
}
#fragrancechart [data-gradation="01"]{
  background:
    radial-gradient(circle at 25% 35%, rgba(185, 145, 192, 1), transparent 25%),
    radial-gradient(circle at 42% 75%, rgba(185, 145, 192, 1), transparent 15%),
    radial-gradient(circle at 72% 68%, rgba(239, 223, 158, 1), transparent 25%),
    radial-gradient(circle at 75% 20%, rgba(199, 207, 221, 1), transparent 10%),
    radial-gradient(circle at 15% 28%, rgba(239, 223, 158, 1), transparent 20%),
    radial-gradient(circle at 14% 72%, rgba(199, 207, 221, 1), transparent 10%),
    radial-gradient(circle at 82% 10%, rgba(239, 223, 158, 1), transparent 20%),
    radial-gradient(circle at 52% 65%, rgba(199, 207, 221, 1), transparent 16%);
}
#fragrancechart [data-gradation="02"]{
  background:
    radial-gradient(circle at 25% 35%, rgba(218, 107, 100, 1), transparent 25%),
    radial-gradient(circle at 72% 68%, rgba(199, 207, 221, 1), transparent 25%),
    radial-gradient(circle at 75% 20%, rgba(229, 168, 124, 1), transparent 30%),
    radial-gradient(circle at 42% 75%, rgba(218, 107, 100, 1), transparent 15%),
    radial-gradient(circle at 15% 28%, rgba(199, 207, 221, 1), transparent 15%),
    radial-gradient(circle at 14% 72%, rgba(229, 168, 124, 1), transparent 15%),
    radial-gradient(circle at 82% 10%, rgba(199, 207, 221, 1), transparent 15%),
    radial-gradient(circle at 52% 65%, rgba(229, 168, 124, 1), transparent 16%);
}
#fragrancechart [data-gradation="03"]{
  background:
    radial-gradient(circle at 25% 35%, rgba(154, 184, 204, 1), transparent 25%),
    radial-gradient(circle at 72% 68%, rgba(247, 196, 188, 1), transparent 25%),
    radial-gradient(circle at 75% 20%, rgba(139, 29, 68, 1), transparent 30%),
    radial-gradient(circle at 42% 75%, rgba(154, 184, 204, 1), transparent 15%),
    radial-gradient(circle at 15% 28%, rgba(247, 196, 188, 1), transparent 20%),
    radial-gradient(circle at 14% 72%, rgba(139, 29, 68, 1), transparent 15%),
    radial-gradient(circle at 82% 10%, rgba(247, 196, 188, 1), transparent 20%),
    radial-gradient(circle at 82% 10%, rgba(154, 184, 204, 1), transparent 20%),
    radial-gradient(circle at 52% 65%, rgba(247, 196, 188, 1), transparent 16%);
}
#fragrancechart [data-gradation="04"]{
  background:
    radial-gradient(circle at 25% 35%, rgba(120, 175, 162, 1), transparent 25%),
    radial-gradient(circle at 72% 68%, rgba(120, 175, 162, 1), transparent 25%),
    radial-gradient(circle at 75% 20%, rgba(229, 220, 203, 1), transparent 30%),
    radial-gradient(circle at 42% 75%, rgba(120, 175, 162, 1), transparent 15%),
    radial-gradient(circle at 15% 28%, rgba(120, 175, 162, 1), transparent 20%),
    radial-gradient(circle at 14% 72%, rgba(229, 220, 203, 1), transparent 15%),
    radial-gradient(circle at 18% 12%, rgba(190, 200, 218, 1), transparent 20%);
}
#fragrancechart [data-gradation="05"]{
  background:
    radial-gradient(circle at 25% 35%, rgba(206, 120, 163, 1), transparent 25%),
    radial-gradient(circle at 72% 68%, rgba(176, 100, 164, 1), transparent 25%),
    radial-gradient(circle at 75% 20%, rgba(247, 196, 168, 1), transparent 30%),
    radial-gradient(circle at 42% 75%, rgba(206, 120, 163, 1), transparent 15%),
    radial-gradient(circle at 15% 28%, rgba(176, 100, 164, 1), transparent 10%),
    radial-gradient(circle at 14% 72%, rgba(247, 196, 168, 1), transparent 15%),
    radial-gradient(circle at 82% 10%, rgba(206, 120, 163, 1), transparent 10%),
    radial-gradient(circle at 52% 72%, rgba(247, 196, 168, 1), transparent 20%);
}
#fragrancechart [data-gradation="06"]{
  background:
    radial-gradient(circle at 25% 35%, rgba(218, 107, 100, 1), transparent 25%),
    radial-gradient(circle at 72% 68%, rgba(239, 223, 158, 1), transparent 25%),
    radial-gradient(circle at 75% 20%, rgba(132, 29, 39, 1), transparent 30%),
    radial-gradient(circle at 42% 75%, rgba(218, 107, 100, 1), transparent 15%),
    radial-gradient(circle at 15% 28%, rgba(239, 223, 158, 1), transparent 20%),
    radial-gradient(circle at 14% 72%, rgba(132, 29, 39, 1), transparent 15%),
    radial-gradient(circle at 82% 10%, rgba(239, 223, 158, 1), transparent 20%),
    radial-gradient(circle at 52% 65%, rgba(132, 29, 39, 1), transparent 16%);
}
@keyframes wobbleFlowCentered {
  0%, 100% {
    background-position:
      50% 28%,
      72% 50%,
      50% 72%,
      28% 50%,
      60% 32%;
    background-size:
      64% 64%,
      64% 64%,
      64% 64%,
      64% 64%,
      56% 56%;
    transform: scale(1.45);
  }
  25% {
    background-position:
      68% 32%,
      68% 68%,
      32% 68%,
      32% 32%,
      58% 74%;
    background-size:
      104% 48%,
      52% 108%,
      108% 52%,
      52% 108%,
      74% 44%;
    transform: scale(1.55);
  }
  50% {
    background-position:
      74% 50%,
      50% 74%,
      26% 50%,
      50% 26%,
      38% 68%;
    background-size:
      118% 46%,
      58% 92%,
      92% 58%,
      58% 92%,
      82% 50%;
    transform: scale(1.65);
  }
  75% {
    background-position:
      68% 68%,
      32% 68%,
      32% 32%,
      68% 32%,
      44% 28%;
    background-size:
      98% 54%,
      66% 66%,
      66% 66%,
      66% 66%,
      72% 72%;
    transform: scale(1.55);
  }
}



@keyframes wobbleFlowPortrait {
  0% {
    background-position:
      48% 30%,
      68% 48%,
      52% 70%,
      32% 52%,
      56% 36%;
    transform: scale(1.7) rotate(0deg);
  }
  25% {
    background-position:
      60% 36%,
      64% 62%,
      40% 66%,
      36% 40%,
      64% 52%;
    transform: scale(2.3) rotate(3deg);
  }
  50% {
    background-position:
      66% 52%,
      52% 70%,
      34% 52%,
      48% 34%,
      46% 64%;
    transform: scale(3.0) rotate(0deg);
  }
  75% {
    background-position:
      58% 64%,
      40% 60%,
      36% 38%,
      60% 40%,
      42% 30%;
    transform: scale(2.4) rotate(-3deg);
  }
  100% {
    background-position:
      48% 30%,
      68% 48%,
      52% 70%,
      32% 52%,
      56% 36%;
    transform: scale(1.7) rotate(0deg);
  }
}

/* end gradation */