@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&display=swap');
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
.font-roboto {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}
.font-lato {
  font-family: 'Lato', sans-serif;
}
.font-noto {
  font-family: 'Noto Sans JP', sans-serif;
}
.font-noto-serif {
  font-family: "Noto Serif JP", serif;
}


.font-zen-maru{
  font-family: "Zen Maru Gothic", sans-serif;
}

.font-manrope{
  font-family: "Manrope", sans-serif;
}


html, body {
  height: 100%;
}
*, *::after, *::before {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
body {
  color: #000000;
  background:url(../images/bg.png) no-repeat center top;
  background-size:cover;
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
  overflow-x: hidden;
  font-size: 1.4em;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;

}

p {
  line-height: 1.8;
  text-align: center;
}

picture img{
  vertical-align:top;
}

img{
  max-width:100%;
  height:auto;
  display:block;

}
li {
  list-style-type: none;
}
a {
  text-decoration: none;
  color: #fff;
}
.br-pc {
  display: block;
}
.br-sp {
  display: none;
}
sup, sub {
  font-size: 1.2rem;
}


/*-------------------
animation
-------------------*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: scale(.8,.8);
  }
  to {
    opacity: 1;
    transform: scale(1,1);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: scale(.8,.8);
  }
  to {
    opacity: 1;
    transform: scale(1,1);
  }
}

@-webkit-keyframes fadeInHk {
  from {
    opacity: 0;
    transform: scale(1.5,1.5);
  }
  to {
    opacity: 1;
    transform: scale(1,1);
  }
}
@keyframes fadeInHk {
  from {
    opacity: 0;
    transform: scale(1.5,1.5);
  }
  to {
    opacity: 1;
    transform: scale(1,1);
  }
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes fadeInTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInBottom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}



main {
  width:100%;
  max-width:640px;
  margin:0 auto;
  overflow:hidden;
  
}



.base{
  text-align:center;
  poisition:relative;
  padding:3vw 0 2vw 0;
}

.fade{
  opacity:0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade.show{
  opacity:1;
  transform: translateY(0);
}

.hidden{
  display:none !important;
}

h1{
  width:55%;
  margin:0 auto;
  padding:3vw 0 2vw 0;
  animation: fadeInTop 1s;
  animation-delay: .5s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInTop 1s;
  -webkit-animation-delay: .5s;
  -webkit-animation-fill-mode: backwards;
}

#cover {
  padding-bottom:2vw;
}

#cover .coverimg{
  width:70%;
  margin:0 auto;
  animation: fadeIn 1s;
  animation-delay: .5s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeIn 1s;
  -webkit-animation-delay: .5s;
  -webkit-animation-fill-mode: backwards;
}

#cover .coverld{
  width:70%;
  margin:0 auto;
  animation: fadeInBottom 1s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInBottom 1s;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
}

#cover .atten{
  padding:5vw 5% 0 5%;
  font-size:clamp(.6rem, 2vw, .8rem);
  line-height:1.4;
  text-align:left;
}

.cvbt{
  animation: fadeInBottom 1s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInBottom 1s;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
  color:#000000;
  background:#fffa00;
  font-size:clamp(1rem, 4vw, 2.5rem);
  line-height:1;
  font-weight:700;
  border-radius:20rem;
  padding:3vw 10vw 2vw 10vw;
  border:3px solid #000000;
  box-shadow:5px 5px 0px 0px rgba(0, 0, 0, 1);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor:pointer;
}

.cvbt:hover{
  background:#000000;
  color:#FFFFFF;
  border:3px solid #fffa00;
  box-shadow:5px 5px 0px 0px rgba(255, 250, 0, 1);
}

.qtl{
  font-size:clamp(1.25rem, 5vw, 2.1rem);
  line-height:1.4;
  padding:0 1vw 2vw 1vw;
  width:90%;
  margin:0 auto 10px auto;
  position:relative;
  display:block;
  text-align:left;
}

.qtl.q3-title{
  border-radius:1.5rem;
}


.qtl::after {
  content: '';
  background:url("../images/q_bd.png") no-repeat center bottom;
  background-size:100% auto;
  display:block;
  position:absolute;
  width:100%;
  margin:0 auto;
  height:5vw;
  bottom:-3vw;
  left:0;
  right:0;
}


.qtl .q{
  position:absolute;
  top:.3vw;
  left:.3vw;
  width:8vw;
  height:8vw;
  background:#FFFFFF;
  border:2px solid #000000;
  border-radius:20rem;
  padding:1vw;
  line-height:1;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size:clamp(1.1rem, 3.6vw, 2.1rem);
  font-family: "Manrope", sans-serif;
}


.yln{
  background:linear-gradient(transparent 60%, #ffff00 60%);
}

.qsimg{
  width:95%;
  margin:0 auto;
}


#choices{
  padding:3vw 0;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

.choice-btn{
  background:#ffff00;
  color:#000000;
  border:2px solid #000000;
  box-shadow:5px 5px 0px 0px rgba(0, 0, 0, 1);
  border-radius:1.5rem;
  font-size:clamp(.7rem, 2.3vw, 1.1rem);
  font-weight:700;
  line-height:1.4;
  min-height:5em;
  min-width:45%;
  position:relative;
  margin:2vw 1vw;
  cursor:pointer;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.choice-btn .alf{
  font-family: "Manrope", sans-serif;
  font-size:clamp(1.2rem, 4vw, 1.8rem);
  display:flex;
  justify-content: center;
  align-items: center;
  background:#FFFFFF;
  border:2px solid #000000;
  border-radius:100rem;
  position:absolute;
  top:-2vw;
  left:-2vw;
  width:7vw;
  height:7vw;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.choice-btn .smltx{
  font-size:60%;
}
@media(hover: hover){
  .choice-btn:hover{
    background:#000000;
    color:#FFFFFF;
    border:2px solid #fffa00;
    box-shadow:5px 5px 0px 0px rgba(255, 250, 0, 1);
  }

  .choice-btn:hover .alf{
    background:#000000;
    color:#FFFFFF;
    border:2px solid #fffa00;
  }
}



.resultbx{
  position:relative;
  background:#FFFFFF;
  border:2px solid #000000;
  border-radius:2rem;
  padding:3vw;
  width:95%;
  margin:0 auto;
}

.resultbx h2{
  border-bottom:2px solid #000000;
  padding:2vw;
  animation: fadeInHk .5s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInHk .5s;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
}

.resultbx #result-comment{
  font-size:clamp(.7rem, 3vw, 1.2rem);
  font-weight:600;
  padding:2vw 0;
  animation: fadeInTop .5s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInTop .5s;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
}

.resultbx #result-comment sup,.resultbx #result-comment .atten{
  font-size:70%;
}

.resultbx #result-products{
  display:flex;
  padding:2vw 0 0 0;
}

.resultbx #result-products a{
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  opacity:1;
}

.resultbx #result-products a:hover{
  opacity:.7;
}

.resultbx #result-products img{
  animation: fadeInBottom .5s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInBottom .5s;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
}

.resultbx #result-products.layout-c .item-tr:nth-child(2){
  padding:10vw 0 2vw 0;
}

.resultbx #result-products.layout-d{
  flex-wrap: wrap;
  justify-content: center;
  position:relative;
}

.resultbx #result-products.layout-d .item-six{
  width:33%;
}


.resultbx #result-products.layout-d .item-six:nth-child(2){
  position:relative;
  top:23vw;
}


.resultbx #result-products.layout-d .item-six:nth-child(4){
  position:relative;
  top:23vw;
}

.resultbx #result-products .product-map{
  position:relative;
  width:95%;
  margin:0 auto 3vw auto;
}


.resultbx #result-products .product-map img.mapimg{
  width:100%;
  display:block;
}

.resultbx #result-products .product-map a{
  position:absolute;
  top:7%;
  display:block;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  opacity:1;
}

.resultbx #result-products .product-map a:hover{
  opacity:.7;
}

.resultbx #result-products .product-map a:active{
  transform:scale(.97);
}


.resultbx #result-products .product-map a.area1{
  left:5%;
  width:33%;
}

.resultbx #result-products .product-map a.area2{
  left:60%;
  width:33%;
}

.resultbx .result-pr-link{
  background:#ff6fb1;
  color:#FFFFFF;
  font-weight:800;
  line-height:1;
  font-size:clamp(.8rem, 2.8vw, 1.1rem);
  padding:.2rem 3rem;
  display:inline-block;
}

.resultbx .result-pr-link .txs{
  font-size:70%
}


.resultbx #result-detail-wrap{
  padding-bottom:2vw;
  animation: fadeInTop .5s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInTop .5s;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
}

.resultbx #result-detail-wrap .result-detail-tl{
  width:65%;
  margin:0 auto;
  padding-top:2vw;
}

.resultbx #result-detail-wrap #result-recommend{
  font-size:clamp(.8rem, 3.2vw, 1.2rem);
  font-weight:600;
}

.resultbx #result-detail-wrap #result-tips{
  font-size:clamp(.8rem, 3.2vw, 1.2rem);
  font-weight:600;
}

.resultbx #result-detail-wrap .txl{
  font-weight:800;
}

.result-link{
  display:flex;
  flex-direction: column;
  width:70%;
  margin:0 auto;
}
.rsbt{
  background:#fffa00;
  font-size:clamp(1rem, 3.8vw, 1.5rem);
  line-height:1;
  font-weight:600;
  border-radius:20rem;
  padding:2vw 7vw 2vw 5vw;
  border:3px solid #000000;
  box-shadow:5px 5px 0px 0px rgba(0, 0, 0, 1);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor:pointer;
  color:#000000;
  margin:2vw auto;
  position:relative;
}

.rsbt::after{
  content:'';
  background:url(../images/out_link.svg) no-repeat center top;
  background-size:100% auto;
  width:4vw;
  height:4vw;
  display:inline-block;
  position:absolute;
  top:50%;
  right:2vw;
  transform: translateY(-50%);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.rsbt:hover::after{
  right:1.5vw;
}

.rsbt .txsml{
  font-size:80%;
}

.rsbt.pst{
  letter-spacing:.1rem;
}



.restart{
  background:#f0f0f0;
  font-size:clamp(1rem, 3.8vw, 1.5rem);
  line-height:1;
  font-weight:600;
  border-radius:20rem;
  padding:2vw 5vw;
  border:3px solid #000000;
  box-shadow:5px 5px 0px 0px rgba(0, 0, 0, 1);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor:pointer;
  color:#000000;
  margin-top:1vw;
}

.restart:hover{
  background:#fffa00;
  color:#000000;
  border:3px solid #000000;
  box-shadow:5px 5px 0px 0px rgba(0, 0, 0, 1);
}


@media only screen and (min-width:641px) {
  .base{
    padding:2em 0;
  }

  h1{
    padding:0 0 1em 0;
  }

  #cover .atten{
    padding:1.5em 0 0 0;
  }

  .cvbt{
    padding:.5em 2em;
  }

  .qtl{
    padding:0 .5em 1em .5em;
  }

  .qtl.q3-title{
    border-radius:3rem;
  }

  .qtl::after {
    height:3em;
    bottom:0;
  }

  .qtl .q{
    position:absolute;
    top:.2em;
    left:.2em;
    width:2.5em;
    height:2.5em;
    padding:0;
  }

  #choices{
    padding:0 0 1em 0;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .choice-btn{
    min-height:5em;
    min-width:42%;
    margin:.7em 1.5%;
  }

  .choice-btn .alf{
    top:-.5em;
    left:-.5em;
    width:1.5em;
    height:1.5em;
  }

  .resultbx{
    padding:1.5em;
  }

  .resultbx h2{
    padding:1em 0;
  }

  .resultbx #result-comment{
    padding:1em 0;
  }

  .resultbx #result-products{
    padding:.5em 0 0 0;
  }

  .resultbx #result-products.layout-c .item-tr:nth-child(2){
    padding:3em 0 .5em 0;
  }

  .resultbx #result-products.layout-d .item-six:nth-child(2){
    top:6em;
  }


  .resultbx #result-products.layout-d .item-six:nth-child(4){
    position:relative;
    top:6em;
  }


  .resultbx #result-products .product-map{
    margin:0 auto 1em auto;
  }

  .rsbt{
    padding:.5em 2.5em .5em 1em;
    margin:.5em auto;
  }

  .rsbt::after{
    width:1.2em;
    height:1.2em;
    right:1em;
  }


  .rsbt:hover::after{
    right:.7em;
  }

  .restart{
    margin-top:.5em;
    padding:.5em 1em;
  }

}

@media only screen and (max-width:480px) {
  .qtl .q{
    top:.5vw;
    left:.5vw;
    width:9vw;
    height:9vw;
  }

  .choice-btn{
    border-radius:1.1rem;
    min-height:5.5em;
    margin:1.5vw 1vw;
  }

  .resultbx{
    border-radius:1.5rem;
  }

  .qtl.q3-title{
    border-radius:1.3rem;
  }


}