@charset "utf-8";
.font-yumin {
  font-family: "游明朝", YuMincho,'Yu Mincho', "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Noto Serif JP","serif" !important;
}

.font-garamond {
  font-family: 'EB Garamond', serif !important;
}

.font-arno {
  font-family: arno-pro, serif !important;
}

.font-petrona  {
  font-family: Petrona, serif !important;
}

* { box-sizing: border-box; }

.inview {
  opacity: 0;
}

.scrolled main {
  padding-top: calc(130px + var(--fsBannerHeight));
}

html {
  scroll-padding-top: 0px
}

main a:hover {
  text-decoration: none;
}

#fpq {
  margin: 0px;
  padding: 0px;
  color: #2d1d14;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

_::-webkit-full-page-media,
_:future,
:root img {
  /*safari*/
  image-rendering: auto;
}

footer {
  margin-top: 0px;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  -webkit-font-smoothing: subpixel-antialiased;
}

.font-uppercase {
  text-transform: uppercase;
}

.font-capitalize {
  text-transform: capitalize;
}

.obj {
  position: absolute;
}

.top-obj-tb {
  left: 50%;
  transform: translateX(-50%);
}

.top-obj-lr {
  top: 50%;
  transform: translateY(-50%);
}

.top-obj1 {
  width: 171px;
  top: 0;
}

.top-obj2 {
  width: 153px;
  bottom: 0;
}

.top-obj3 {
  width: 53px;
  left: 0;
}

.top-obj4 {
  width: 53px;
  right: 0;
}

.cbg {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.fpq-bg {
  background-image: url(../../images/special_contents/FaceCareQuiz/20250529/bg_quiz.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 89px 0px 125px;
}


.fpq-inner {
  width: 1100px;
  height: 683px;
  margin: 0px auto;
  padding: 0px;
  position: relative;
}

#fpq-top {
  margin: 0px;
  padding: 0px;
  position: relative;
  z-index: 20;
}

.top-frame {
  width: 100%;
  background-image: url(../../images/special_contents/FaceCareQuiz/20250925/frame_top.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  margin-top: 44px;
  padding: 125px 0 165px;
  position: relative;
}

.top-title {
  color: #9c8743;
  font-size: 6rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.t-lead {
  color: #9c8743;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}

.t-lead2 {
  margin: 44px auto 0px;
  position: relative;
  width: 610px;
}

.t-lead2-text {
  text-align: center;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  font-weight: 400;
}

.qtop-btn {
  width: 305px;
  background-image: linear-gradient(90deg, #e2b955, #bca774);
  border-radius: 50px;
  font-size: 1.7rem;
  letter-spacing: -0.025em;
  line-height: 1;
  text-align: center;
  margin: 53px auto 0;
  position: relative;
}

.qtop-btn a {
  width: 100%;
  display: inline-block;
  height: 100%;
  color: #fff;
  padding: 23px 0;
}

.qtop-btn a svg {
  position: absolute;
  right: 20px;
}

.inview2 {
  opacity: 0;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
}

#fpq-top.loaded .inview2 {
  opacity: 1;
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);

  -webkit-transition: opacity .5s linear, -webkit-transform 1.25s cubic-bezier(.19, 1, .22, 1);
  -o-transition: opacity .5s linear, transform 1.25s cubic-bezier(.19, 1, .22, 1);
  transition: opacity .5s linear, transform 1.25s cubic-bezier(.19, 1, .22, 1);
  transition: opacity .5s linear, transform 1.25s cubic-bezier(.19, 1, .22, 1), -webkit-transform 1.25s cubic-bezier(.19, 1, .22, 1);
}

.inview3 {
  opacity: 0;
}

#fpq-top.loaded .inview3 {
  opacity: 1;

  -webkit-transition: opacity .5s linear, -webkit-transform 1.25s cubic-bezier(.19, 1, .22, 1);
  -o-transition: opacity .5s linear, transform 1.25s cubic-bezier(.19, 1, .22, 1);
  transition: opacity .5s linear, transform 1.25s cubic-bezier(.19, 1, .22, 1);
  transition: opacity .5s linear, transform 1.25s cubic-bezier(.19, 1, .22, 1), -webkit-transform 1.25s cubic-bezier(.19, 1, .22, 1);
}

#fpq-top.loaded .inview3.d1 {
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}

#fpq-top.loaded .inview2.d2 {
  -webkit-transition-delay: .8s;
  -o-transition-delay: .8s;
  transition-delay: .8s;
}

#fpq-top.loaded .inview2.d3 {
  -webkit-transition-delay: 1.2s;
  -o-transition-delay: 1.2s;
  transition-delay: 1.2s;
}

#fpq-top.loaded .inview2.d4 {
  -webkit-transition-delay: 1.6s;
  -o-transition-delay: 1.6s;
  transition-delay: 1.6s;
}

#fpq-top.loaded .inview2.d5 {
  -webkit-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s;
}

#gf-q {
  display: none;
  margin: 0px;
  padding: 0px;
}

#gf-q.open {
  display: block;
}

#gf-q #q1,
#gf-q #q2,
#gf-q #q3 {
  width: 100%;
  box-sizing: border-box;
}

.gf-q-in {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  border: 1px solid #bca774;
  border-radius: 20px;
  text-align: center;
  position: relative;
  z-index: 20;
  /* padding: 65px 0px 51px; */
  padding: 32px 0px 100px;
}

.h1-t {
  color: #9c8743;
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1;
}

.h1-num {
  color: #9c8743;
  font-weight: 400;
  font-size: 5rem;
  line-height: 1;
  margin-top: 9px;
}

.q-title  {
  color: #463a32;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  margin-top: 42px;
}

.q-list {
  width: 610px;
  margin: 40px auto 0;
}

.q-item {
  line-height: 1;
  text-align: left;
  position: relative;
}

.q-item:not(:first-child) {
  margin-top: 31px;
}

.q-item a {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url(../../images/special_contents/FaceCareQuiz/20250529/bg_btn.png);
  background-repeat: no-repeat;
  background-size: contain;
  color: #463a32;
  font-size: 1.7rem;
  letter-spacing: -0.025em;
  padding: 22px 0 24px 45px;
}

.q-item a:hover {
  background-image: url(../../images/special_contents/FaceCareQuiz/20250529/bg_active_btn.png);
}

.q-item a:hover {
  color: #fff;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

#gf-q .inview2 {
  opacity: 0;
}

#gf-q .inview4 {
  opacity: 0;
}

#gf-q.open .inview4 {
  /*opacity: 1;*/

  animation-name: fadeIn;
  animation-fill-mode: forwards;
  animation-duration: 1.2s;
}

#gf-q #q1.show .inview2 {
  /*opacity: 1;*/

  animation-name: fadeIn;
  animation-fill-mode: forwards;
  animation-duration: 1.2s;
}

#gf-q.open .inview4.d1 {
  animation-delay: .6s;
}

#gf-q #q1.show .inview2.d2,
#gf-q #q2.show .inview2.d2,
#gf-q #q3.show .inview2.d2 {
  animation-delay: 1.6s;
}

#gf-q #q1.show .inview2.d3,
#gf-q #q2.show .inview2.d3,
#gf-q #q3.show .inview2.d3 {
  animation-delay: 2s;
}

#gf-q #q1.show .inview2.d4,
#gf-q #q2.show .inview2.d4,
#gf-q #q3.show .inview2.d4 {
  animation-delay: 2.4s;
}

#gf-q #q1.show .inview2.d5,
#gf-q #q2.show .inview2.d5,
#gf-q #q3.show .inview2.d5 {
  animation-delay: 2.8s;
}

#gf-q #q1.show .inview2.d6,
#gf-q #q2.show .inview2.d6,
#gf-q #q3.show .inview2.d6 {
  animation-delay: 3s;
}

#gf-q #q1.show .inview2.d7,
#gf-q #q2.show .inview2.d7,
#gf-q #q3.show .inview2.d7 {
  animation-delay: 3.2s;
}

#gf-q #q1.show .inview2.d8,
#gf-q #q2.show .inview2.d8 {
  animation-delay: 3.4s;
}

#gf-q #q2.show .inview2 {
  /*opacity: 1;*/

  animation-name: fadeIn;
  animation-fill-mode: forwards;
  animation-duration: 1.2s;
}

#gf-q #q3.show .inview2 {
  /*opacity: 1;*/

  animation-name: fadeIn;
  animation-fill-mode: forwards;
  animation-duration: 1.2s;
}

#gf-q #q3.show .inview2.d2 {
  animation-delay: .6s;
}

#gf-q #q3.show .inview2.d3 {
  animation-delay: 1.2s;
}

#gf-q #q3.show .inview2.d4 {
  animation-delay: 1.6s;
}

#gf-q #q3.show .inview2.d5 {
  animation-delay: 2s;
}

#gf-q #q3.show .inview2.d6 {
  animation-delay: 2.2s;
}

#gf-q #q3.show .inview2.d7 {
  animation-delay: 2.4s;
}

#gf-q #q3.show .inview2.d8 {
  animation-delay: 2.6s;
}

#gf-q #q3.show .inview2.d9 {
  animation-delay: 2.8s;
}

#gf-q #q3.show .inview2.d10 {
  animation-delay: 3s;
}

#gf-q ul li a.hide,
#gf-q ul li a.hide .img {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
}

#gf-q .complete ul li a.selected {
  opacity: 1;
  color: #fff;
  background-image: url(../../images/special_contents/FaceCareQuiz/20250529/bg_active_btn.png);
}

#gf-q .complete ul li a.selected {
  animation: zoomIn .3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

#gf-q #q1.remove {
  display: none;
}

#gf-q #q2 {
  display: none;
}

#gf-q #q2.start {
  display: block;
}

#gf-q #q2.remove {
  display: none;
}

#gf-q #q3 {
  display: none;
}

#gf-q #q3.start {
  display: block;
}