@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=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&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-zen-kaku{
  font-family: "Zen Kaku Gothic New", sans-serif;
}


html, body {
  height: 100%;
}
*, *::after, *::before {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
body {
  color: #cc626c;
  background: url(../images/bg_pc.webp) no-repeat center top;
  background-size:cover;
  font-family: 'Zen Kaku Gothic New', "游ゴシック", 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;

}
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;
}


@media only screen and (max-width:640px) {


  .br-pc {
    display: none;
  }
  .br-sp {
    display: block;
  }
}
.wrap {
  background-color: rgba(255, 255, 255, 1);
  background-blend-mode: lighten;
  z-index: 20;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wrap img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  animation: fadeIn 1s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeIn 1s;
  -webkit-animation-fill-mode: backwards;
  max-width: 203px;
  width: 80%;
  height: auto;
}
.wrap.active {
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
  background-color: rgba(255, 255, 255, 0);
}
.wrap.active img {
  display: none;
}

.wrapper{
  width:100%;
  max-width:800px;
  margin:0 auto;
}

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

.choose_wrapper{
  padding:5vw 0;

}



.choose_box {
  position: relative;
  width: 100%;

  background:url(../images/bg_r_pc.webp)repeat-y center top;
  background-size:95% auto;
  padding:5vw 0;
}

.choose_box::before{
  content:'';
  background:url(../images/bg_t_pc.webp)no-repeat center bottom;
  background-size:95% auto;
  height:2vw;
  width:100%;
  position:absolute;
  top:-2vw;
  left:0;
  right:0;
}

.choose_box::after{
  content:'';
  background:url(../images/bg_b_pc.webp)no-repeat center top;
  background-size:95% auto;
  height:2vw;
  width:100%;
  position:absolute;
  bottom:-2vw;
  left:0;
  right:0;
}




@media only screen and (min-width:760px) {
  .choose_wrapper{
    padding:3em 0;
  }

  .choose_box {
    position: relative;
    width: 100%;
    max-width:750px;
    margin:0 auto;
    background:url(../images/bg_r_pc.webp)repeat-y center top;
    background-size:95% auto;
    padding:2em 0;
  }

}



#start{
  position:realtive;
  
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#start .roulette-pin{
  width:2%;
  margin:0 auto;
  position:absolute;
  top:37vw;
  right:0;
  left:0;
}

#start .mainimg{
  width:300%;
  margin:0 auto;
  position:absolute;
  top:-176vw;
  right:0;
  left:-100%;
  animation: rotation 8s cubic-bezier(0.254, -0.148, 0.25, 1) infinite;
}

@media only screen and (min-width:519px) and (max-width:759px) {
  
  #start .mainimg{
    top:-170vw;
  }
  
}

@media only screen and (min-width:760px) {
  #start .roulette-pin{
    width:2%;
    margin:0 auto;
    position:absolute;
    top:295px;
    right:0;
    left:0;
  }

  #start .mainimg{
    width:300%;
    margin:0 auto;
    position:absolute;
    top:-1300px;
    right:0;
    left:-100%;
  }

  
}

#start .maintl{
  width:50%;
  margin:0 auto;
  padding-bottom:101vw;
}


#start .st-pr{
  text-align:center;
  padding-bottom:10vw;
}


#start .st-pr .lead{
  padding:3vw 5vw;
  font-weight:700;
  font-size:clamp(1rem, 4vw, 2rem);
  line-height:1.5;
  position:relative;
  border: 2px solid #cc626c;
  display:inline-block;
}

@media only screen and (min-width:760px) {
  #start .maintl{
    padding-bottom:780px;
  }

  #start .st-pr{
    text-align:center;
    padding-bottom:3em;
  }

  #start .st-pr .lead{
    padding:1em 2em;
  }
}

#start .st-pr .lead::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fef5f7;
  bottom: -15px;
  left: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 1;
  margin: auto;
}
#start .st-pr .lead::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #cc626c;
  bottom: -19px;
  left: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: auto;
}


#start .bt{
  width:65%;
  margin:0 auto;
  -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;
  position:relative;
  z-index:10;
}


#start .bt:hover{
  opacity: .7;
}



.qab{

}

.qab .htl{
  width:50%;
  margin:0 auto;
  position:relative;
}


.qab h2{
  width:85%;
  border:2px solid #cc626c;
  margin:10vw auto;
  text-align:center;
  padding:1vw 2vw;
  font-size:clamp(1.1rem,4vw,2rem);
}

.choose_box ul.che{
  width:85%;
  margin:0 auto;
  height:calc(100vw / .9);
}

.choose_box ul.che li{
  width:100%;
  margin:3vw auto 0 auto;
}

.choose_box ul.che li.ti{
  margin:2.5vw auto 0 auto;
}

.choose_box ul.che li a{
  width: 100%;
  color: #FFFFFF;
  display:flex;
  align-items: center;
  text-align: center;
  background-color: #d76774;
  font-weight: 800;
  font-size: clamp(.8rem, 2vw, 1.2rem);
  outline: 1px solid #FFFFFF;
  outline-offset: -5px;
  box-shadow: 4px 4px #8b505e;
  text-decoration: none;
  text-align:left;
  line-height:1.2;
  -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;
  position:relative;
}

.choose_box ul.che li a::after{
  content:'';
  background:rgba(255,255,255,.3);
  clip-path:polygon(50% 0%,100% 0%,50% 75%,0% 75%);
  padding:0% 0% 18% 30%;
  position:absolute;
  top:0;
  right:0;
}

.choose_box ul.che li.nm a{
  padding: 0 5vw;
  height:4em;
}

.choose_box ul.che li.ti a{
  padding: 2vw 5vw;
}

.choose_box ul.che li a .al{
  width:6%;
}

.choose_box ul.che li a .set{
  width:94%;
}

.choose_box ul li a:hover {
  background-color: #8b505e;
  box-shadow: 4px 4px #d76774;
  color: #FFFFFF;
    
}

@media only screen and (min-width:760px) {
  .qab h2{
    padding:.5em 0;
    margin:2em auto;
  }

  .choose_box ul.che{
    width:80%;
    margin:0 auto;
    height:600px;
  }

  .choose_box ul.che li{
    margin:.7em auto 0 auto;
  }

  .choose_box ul.che li.ti{
    margin:0.5em auto 0 auto;
  }

  .choose_box ul.che li.nm a{
    padding: 0 1em;
  }

  .choose_box ul.che li.ti a{
    padding: .6em 1em;
  }
}





.result .htl{
  width:50%;
  margin:0 auto;
}

.result .resultbx{
  width:85%;
  margin:10vw auto 5vw auto;
  position:relative;
  background:#FFFFFF;
  border-radius:1rem;
  box-shadow: 0px 0px 10px 0px rgba(147, 0, 76, 0.35);
  padding:3vw 0;
  text-align:center;
}

.result .resultbx .resultcm{
  text-align:center;
  color:#93004c;
  font-size:clamp(1.5rem, 5vw, 2.4rem);
  font-weight:700;
  line-height:1.2;
}

.result .resultbx .resultcm .txss{
  font-size:80%;
}

.result .resultbx .resultcm .txb{
  font-size:120%;
}

#answer_00.result .resultbx .resultcm .txcolor{
  color:#d2b400;
}

#answer_01.result .resultbx .resultcm .txcolor{
  color:#552424;
}

#answer_02.result .resultbx .resultcm .txcolor{
  color:#dc0000;
}

#answer_03.result .resultbx .resultcm .txcolor{
  color:#f78e97;
}

#answer_04.result .resultbx .resultcm .txcolor{
  color:#f15a24;
}

#answer_05.result .resultbx .resultcm .txcolor{
  color:#3960ad;
}

.result .resultbx .resultcm2{
  text-align:center;
  font-size:clamp(1rem, 3vw, 1.6rem);
  font-weight:700;
  line-height:1.4;
  padding:3vw 0 2vw 0;
}

.result .resultbx .resultimg{
  width:90%;
  margin:0 auto;
  padding-left:15%;
}

.result .resultbx .prtl{
  font-size:clamp(1rem, 3vw, 1.6rem);
  font-weight:700;
  line-height:1.2;
  text-align:center;
  padding-top:2vw;
}

#answer_00.result .resultbx .prtl{
  color:#d2b400;
}

#answer_01.result .resultbx .prtl{
  color:#552424;
}

#answer_02.result .resultbx .prtl{
  color:#c80000;
}

#answer_03.result .resultbx .prtl{
  color:#c87580;
}

#answer_04.result .resultbx .prtl{
  color:#d34b11;
}

#answer_05.result .resultbx .prtl{
  color:#3960ad;
}

.result .resultbx .haigou{
  text-align:center;
  display:inline-block;
  font-size:clamp(.8rem, 3vw, 1.2rem);
  font-weight:700;
  border:2px solid #cc626c;
  border-radius:50rem;
  padding:.5vw 3vw;
  margin:0 auto;
  line-height:1;
}

.result .resultbx .haigouatten{
  font-size:clamp(.6rem, 1.5vw, 0.9rem);
  text-align:center;
  line-height:1.2;
  padding-bottom:2vw;
  letter-spacing:-.05em;
}

.result .resultbx .resultbt{
  display:block;
  width:50%;
  margin:0 auto;
  -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;
}

.result .resultbx .resultbt:hover{
  opacity: .7;
}

.result .rslshare{
  width:35%;
  margin:0 auto;
}

.result .rslshare 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;
}

.result .rslshare a:hover{
  opacity:.7;
}

@media only screen and (min-width:760px) {

  .result .resultbx{
    margin:3em auto 2em auto;
    padding:1.5em 0;
  }

  .result .resultbx .resultcm2{
    padding:1em 0;
  }

  .result .resultbx .prtl{
    padding:1em 0 0.5em 0;
  }

  .result .resultbx .haigou{
    margin:0 auto 0.5em auto;
  }

  .result .resultbx .haigouatten{
    padding-bottom:1em;
  }

}


.return-btn {
  margin-top: 5%;
    margin-left: 35%;
    margin-right: 35%;
    width: 30%;
    margin-bottom: 100px;
}
.return {
  display: inline-block;
  text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #2791d4;
    width: 100%;
    padding: 10px 10px;
    border: 1px solid #2791d4 ;
}

.return:hover {
    border: 1px solid #2791d4 ;
    background-color: #fff;
    color: #2791d4;
    transition: 0.5s;
}