@charset "UTF-8";

/* -----------------------------------------------------------
matching
------------------------------------------------------------*/
#matching{
height: 100%;
}

#matching #search {
background: #fff !important;
}


#matching h2,
#matching .q-box .txt
{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight:600;
  font-style: normal;
  line-height:1;
}


.question .q-box{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.question .q-box .num,
.question .q-box .txt{
width: 100%;
text-align: center !important;
}

.num,.yes,.no,
.start_btn{
font-family: "roc-grotesk-extrawide", sans-serif !important;
font-weight: 900 !important;
font-style: normal;
text-align: center;
line-height: 1;
}

.yes,.no,
.start_btn{
display: block;
border-radius: 50px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition : all 0.5s ease 0s;
}

.start_btn{
color: #000;
border:solid 2px  #000;
background:#fff ;
}


.start_btn span{
display: block;
font-weight: 900 !important;
}

.start_btn span::after{
content: '▶︎';
margin-left: 1em;
}

.start_btn:hover{
border:solid 2px  #fff;
background:#000 ;
color: #fff;
}

.yes{
border:solid 2px  #FF3939;
color: #FF3939;
background:#fff ;
}

.no{
border:solid 2px #0050FF;
color:#0050FF;
background:#fff;
}


.line_1{
background: url(img/line_1.svg) center top no-repeat;
background-size: contain;
}

.line_2{
background: url(img/line_2.svg) center top no-repeat;
background-size: contain;
}

.line_3{
background: url(img/line_3.svg) center top no-repeat;
background-size: contain;
}

.line_4{
background: url(img/line_4.svg) center top no-repeat;
background-size: contain;
}

.line_5{
background: url(img/line_5.svg) center top no-repeat;
background-size: contain;
}

.line_6{
background: url(img/line_6.svg) center top no-repeat;
background-size: contain;
}



#matching div.box{
margin: auto;
}

@media all and (min-width: 768px) {
#matching {
margin-top: 66px;
}
#matching div.box{
width: 90vw;
max-width: 1080px;
background-image: url(img/bg_pc.png);
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
min-height:55vh;
margin:10vw auto 5vw;
}

#matching #quiz{
display: flex;
flex-wrap: wrap;
}

#matching .question{
width: 100%;
background-color: rgba(255, 255, 255,0.8);
min-height:55vh;
}

#matching .title{
width: 100%;
margin-top:27vh;
}

#matching .title h2{
font-size:min(3.2vw,250%) !important;
}

#matching .title p{
margin-top: 1em;
text-align: center !important;
font-size:min(1.3vw,100%);
}

#matching .q-box{
margin-top:10vh; 
}
#matching .q-box p.num{
font-size:min(3.5vw,280%) !important;
}
#matching .q-box p.txt{
font-size:min(2.5vw,180%) !important;
margin:0 auto 1em;
}


#matching .q-box div{
margin:1em;
width:20%;
}

.yes,
.no{
font-size:min(2vw,200%) !important;
padding:.5em 1em .4em;
width:100%;
display: block;
}


.yes:hover{
border:solid 2px  #FF3939;
color: #fff;
background:#FF3939;
}


.no:hover{
border:solid 2px #0050FF;
color:#fff;
background:#0050FF;
}



.start_btn{
font-size:min(3vw,260%) !important;
padding:.5em 1em .4em;
margin:.5em auto 1em;
}

.start_btn span::after{
font-size: 70%;
vertical-align: middle;
}
.question .q-box div:last-of-type{
width: 80% !important;
}

}

@media all and (max-width: 767px) {
#matching div.box{
width: 100%;
background-image: url(img/bg_smp.png);
background-position: center top;
background-size:100vw;
background-repeat: no-repeat;
aspect-ratio: 1125/1875;
}


#matching .title{
width: 100%;
padding-top:90vw;
}

#matching h2{
font-size:5vw !important;
}

#matching .title p{
margin-top: 1em;
text-align: center !important;
font-size:3.2vw;
}

#matching .question{
background: url(img/bg_smp-q.png);
        background-position: center top;
        background-size: 100vw;
        background-repeat: no-repeat;
        aspect-ratio: 1125 / 1875;
}

#matching .q-box p.num{
margin-top:50%;
font-size:8vw;
}

#matching .q-box p.txt{
font-size:5vw;
width: 80%;
min-height:20vw;
line-height: 1.2;
margin:.5em auto;
display: flex;
justify-content: center;
align-items: center;
}

#matching .q-box div{
margin: 1em;
width:30%;
}

.yes,
.no{
font-size:4vw;
padding:.5em 0 .4em;
width:100%;
display: block;
}

.start_btn{
font-size: 7vw;
padding: .5em 1em .3em;
max-width: 400px;
margin:1em auto;
}

.start_btn span::after{
font-size: 70%;
vertical-align: middle;
}

.question .q-box div:last-of-type{
width: 40% !important;
}

}


/*/ btn back /*/
.btn_back{
display: block;
border:solid 1.5px  #000;
background:#fff ;
border-radius: 50px;
text-decoration: none;
padding:.8em 0;
text-align: center;
transition : all 0.5s ease 0s;
width: 60%;
font-size:120%;
}

.btn_back span{
display: block;
font-weight: 700;
font-size: 80%;
}

.btn_back span::after{
content: '▶︎';
margin-left: 1em;
}

.btn_back:hover{
border:solid 1.5px  #fff;
background:#000 ;
color: #fff;
}



@media all and (min-width: 768px) {
.btnArea{
display: flex;
justify-content: center;
}
.btn_back{
margin:2em 1.5em 0;
max-width:240px;
}
}


@media all and (max-width: 767px) {
.btnArea{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 3em;
}
.btn_back:nth-child(1){
margin:.5em 0 2em;
}
}




/* -----------------------------------------------------------
result
------------------------------------------------------------*/


#result_Box{
background: #fff;
}
#result_Box .result_A,
#result_Box .result_B,
#result_Box .result_C,
#result_Box .result_D{
width: 100%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}

#result_Box .choice{
font-weight: 700;
text-align: center !important;
}

#result_Box #search {
padding:1em 0 !important;
}

@media all and (min-width: 768px) {
#matching .col{
margin:10px 1% !important;
}


#result_Box{
max-width: 1080px;
margin-top: -66px;
}

#result_Box .choice{
  font-size: min(2.5vw,180%) !important;
}

#result_Box .result_A,
#result_Box .result_B,
#result_Box .result_C,
#result_Box .result_D{
aspect-ratio: 2382/1270;
}

#result_Box .result_A{background-image: url(img/resultA.png);}
#result_Box .result_B{background-image: url(img/resultB.png);}
#result_Box .result_C{background-image: url(img/resultC.png);}
#result_Box .result_D{background-image: url(img/resultD.png);}


#result_Box .itemList {
        justify-content: center;
    }
}



@media all and (max-width: 767px) {
#matching .col{
margin:10px !important;
}



#result_Box{
width: 100%;
background: #fff;
aspect-ratio: 1125/1875;
}

#result_Box .choice{
  font-size: 4vw;
}



#result_Box .result_A,
#result_Box .result_B,
#result_Box .result_C,
#result_Box .result_D{
aspect-ratio: 1125/1569;
margin-top: 2em;
}

#result_Box .result_A{background-image: url(img/resultA_smp.png);}
#result_Box .result_B{background-image: url(img/resultB_smp.png);}
#result_Box .result_C{background-image: url(img/resultC_smp.png);}
#result_Box .result_D{background-image: url(img/resultD_smp.png);}


/*ドットナビゲーションの設定*/
#matching .slider{
position: relative;
padding-bottom:2.5em;
}
#matching .slick-dots {
width: 100%;
position: absolute;
bottom: 0;
text-align:center;
margin:20px 0 0 0;
}

#matching .slick-dots li {
display:inline-block;
margin:0 5px;
}

#matching .slick-dots button {
color: transparent;
outline: none;
width:22px;/*ドットボタンのサイズ*/
height:8px;/*ドットボタンのサイズ*/
padding: 0;
display:block;
cursor: pointer;
border: solid 1px #000 !important;
background:#fff !important;
border-radius: 0% !important;
}

#matching .slick-dots button {
border-style: none;
overflow: visible;
font: inherit;
}

#matching .slick-dots .slick-active button{
background:#000 !important;/*ドットボタンの現在地表示の色*/
}


}