/* =======================================================
yoso_service_guide.css
======================================================= */

/* 共通パーツ */
:root {
    --c-primary: #777777;
    --c-secondary: #22AA98;
    --c-darkBlack: #4E4545;
    --c-white: #FFFFFF;
    --bgc-primary: #0DBCA5;
    --bgc-secondary: #29D0B5;
    --c-yellow: #F4ED19;
    --c-btn-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.16);
    --s-default: 10;
    --m-10: 10px;
    --m-20: 20px;
    --m-30: 30px;
    --m-40: 40px;
}
.YosoGuide .Contents {
    position: relative;
}
img {
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
}
.SpNkInfoImg img:nth-of-type(1){
    width: 200px;
    height: auto;
    margin: inherit;
}
.SpNkInfoImg img:nth-of-type(2){
    width: auto;
    height: auto;
}
.guide_introduction,
.guide_feature,
.guide_vote {
    /* background-color: var(--bgc-primary); */
    /* background-image: url(../../../common/img/yoso/guide/2023/wheel_01.png);
    background-size: 49%;
    background-size: contain;
    background-size: 100% 100%;
    background-repeat: space; */
}
@media screen and (min-width:768px){
    .guide_introduction,
    .guide_feature,
    .guide_vote{
        background-image: none;
    }
}
.guide_predictor {
    background-color: var(--bgc-secondary);
}
.guide_HowToUse {
    background-color: #FFF9F5;
}
.guide_confident {
    background-color: #FAF0F1;
}
.guide_HowToUse,
.guide_confident,
.guide_vote {
    position: relative;
    z-index: 10;
}
.YosoGuide .button {
    display: block;
    text-align: center;
    width: 82.53%;
    padding: 16px 0;
    margin: auto;
    background-color: var(--c-darkBlack);
    color: var(--c-white);
    font-size: calc(var(--s-default) * 1.6px);
    font-weight: bold;
    border-radius: 50px;
    box-shadow: var(--c-btn-box-shadow);
    position: relative;
    transition: all 0.3s;
}
.YosoGuide .Contents {
    width: 100%;
    display: block;
    padding-top:0;
    background-color: var(--bgc-primary);
    background-image: url(../../../common/img/yoso/guide/2023/wheel_01.png);
    /* background-size: 49%; */
    background-size: contain;
    background-repeat: space;
    background-repeat: repeat;
    background-repeat-y: repeat;
}
@media screen and (min-width:768px) {
    .YosoGuide .button {
        width: 300px;
        padding: var(--m-20) 0;
        font-size: calc(var(--s-default) * 1.8px);
    }
    .YosoGuide .button:hover{
        box-shadow: none;
        transform: translateY(3px);
        transition: all 0.3s;
    }
    .YosoGuide .Contents {
        background-color:var(--bgc-secondary);
        /* background-size: 190px; */
        background-repeat: space;
        background-repeat: repeat;
    }
    .YosoGuide section {
        /* width: 960px; */
        max-width: 960px;
        margin: auto;
        background-color: rgba(13, 188, 165, 0.5);
    }
    .YosoGuide .container_HowToUse{
        background-color:#FFF9F5;
    }
    .YosoGuide .container_confident{
        background-color: #FAF0F1;
    }
    .YosoGuide .container_vote{
        background-color: var(--bgc-primary);
    }
}
.YosoGuide .button::after,
.guide_vote a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    translate: 0 -50%;
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--c-white);
    border-right: 2px solid var(--c-white);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 1px;
    transition: all 0.3s;
}
@media screen and (min-width:768px){
    .YosoGuide .button:hover::after,
    .guide_vote a:hover::after{
        transform: translateX(3px) rotate(45deg);
        transition: all 0.3s;
    }
}
.guide_vote li:nth-of-type(1) a::after {
    border-color: var(--c-darkBlack);
}
.FV_Fade,
.Fade{
    position: relative;
    bottom: -50px;
    opacity: 0;
}
.FV_Fade.FV_opened,
.Fade.Fade_opened{
    bottom: 0;
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

/* guide_introduction */
.guide_introduction {
    text-align: center;
    padding-top: 5px;
    padding-bottom: var(--m-30);
}
@media screen and (min-width:768px) {
    .guide_introduction {
        padding-top: var(--m-20);
        padding-bottom: var(--m-40);
    }
}
.guide_introduction h2 {
    margin-bottom: clamp(var(--m-20), 5.3vh ,var(--m-30));
}
.guide_introduction h2.FV_opened {
    animation: FV_container_mainSlideIn 0.7s forwards;
}
@media screen and (min-width:768px) {
    /* .guide_introduction h2 {
        margin-bottom: var(--m-30);
    } */
}
.guide_introduction h2 img {
    width: 94.66%;
}
@media screen and (min-width:768px) {
    .guide_introduction h2 img {
        width: 620px;
    }
}
.g_intro_img01 {
    width: 52.53%;
    margin-bottom: var(--m-20);
}
@media screen and (min-width:768px) {
    .g_intro_img01 {
        width: 344px;
    }
}
.g_intro_text01 {
    text-align: left;
    width: 89.33%;
    margin: auto;
    margin-bottom: var(--m-40);
    color: var(--c-white);
    font-size: calc(var(--s-default)* 1.4px);
    font-weight: bold;
    line-height: 1.428;
    position: relative;
}
@media screen and (min-width:768px) {
    .g_intro_text01 {
        width: 620px;
        font-size: calc(var(--s-default)* 2.3px);
    }
}
.g_intro_text01 .sp_disp_none {
    display: none;
}
@media screen and (min-width:768px) {
    .g_intro_text01 .sp_disp_none {
        display: block;
    }
}
.g_intro_text01 em {
    color: var(--c-yellow);
    font-size: calc(var(--s-default)* 1.5px);
}
@media screen and (min-width:768px) {
    .g_intro_text01 em{
        font-size: calc(var(--s-default)* 2.4px);
    }
}
.g_intro_scroll {
    display: inline-block;
    text-align: center;
    position: absolute;
    top: -80px;
    animation: arrow 1.5s ease-in-out infinite;
}
@keyframes arrow {
    0% {top: -45%;}
    50% {top: -35%;}
    100% {top: -45%;}
}
@media screen and (min-width:768px) {
    @keyframes arrow {
        0% {top: -35%;}
        50% {top: -25%;}
        100% {top: -35%;}
    }
}
.g_intro_scroll span {
    color: var(--c-white);
    font-size: calc(var(--s-default)* 1.5px);
    position: absolute;
    left: -20px;
    top: 0;
    letter-spacing: 0.05em;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
.g_intro_scroll::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #eee;
    transform: skewX(-31deg);
}
.g_intro_scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 50px;
    background: #eee;
}
.g_intro_DL {
    width: 94.66%;
    padding: var(--m-20);
    margin: calc(var(--m-20)*5) auto 0;
    background: var(--c-white);
    border-radius: 40px;
    position: relative;
}
@media screen and (min-width:768px) {
    .g_intro_DL {
        width: 620px;
        margin: calc(var(--m-20)*6) auto 0;
    }
}
.g_intro_DL img {
    margin-bottom: var(--m-20);
}
@media screen and (min-width:768px) {
    .g_intro_DL img {
        width: 494px;
    }
}

/* guide_feature */
.guide_feature {
    padding-bottom: var(--m-30);
}
.guide_feature h2 img {
    width: 52.53%;
}
@media screen and (min-width:768px) {
    .guide_feature h2 img {
        width: 345px;
    }
}
.guide_feature h2 {
    margin-bottom: var(--m-20)
}
@media screen and (min-width:768px) {
    .guide_feature h2 {
        margin-bottom: var(--m-30)
    }
}
.guide_feature > div {
    width: 94.66%;
    padding: var(--m-20) var(--m-10);
    margin: auto;
    background: var(--c-white);
    border-radius: 40px;
    position: relative;
}
@media screen and (min-width:768px) {
    .guide_feature>div {
        width: 620px;
    }
}
.g_feature_innner > div:not(:last-of-type) {
    padding-bottom: var(--m-20);
    border-bottom: 1px dashed #CACACA;
}
.g_feature_innner div + div {
    padding-top: var(--m-20);
}
.g_feature_innner .HittingReport .ProYosoka_Box div+div{
    padding-top:0;
}
.g_feature_innner .HittingReport .HittingReportList .Yosoka .YosokaImage img{
    height: auto;
}
.g_feature_innner .HittingReport .ProYosoka_Box .YosokaData dd{
    width: auto;
}
.g_feature_innner dt,
.g_feature_innner dd {
    padding: 0 var(--m-10);
}
.g_feature_innner dt {
    margin-bottom: var(--m-20);
    position: relative;
}
@media screen and (min-width:768px) {
    .g_feature_innner dt img {
        width: 500px;
        margin: 0 auto var(--m-30);
    }
    .g_feature_innner dd {
        width: 510px;
        margin: auto;
    }
}
.g_feature_innner dd p {
    text-align: left;
    margin-bottom: 15px;
    color: var(--c-primary);
    font-size: calc(var(--s-default) * 1.5px);
    font-weight: 500;
    line-height: 1.53;
}
@media screen and (min-width:768px) {
    .g_feature_innner dd p {
        font-size: calc(var(--s-default) * 2.2px);
    }
}
.g_feature_innner dd p em {
    color: var(--c-secondary);
}
.g_feature_innner dd small {
    color: var(--c-primary);
    font-size: calc(var(--s-default) * 1.3px);
    line-height: 1.45;
}
@media screen and (min-width:768px) {
    .g_feature_innner dd small {
        font-size: calc(var(--s-default) * 1.9px);
    }
}
.g_feature_innner dd img {
    width: 75.39%;
    margin-top: var(--m-20);
}
@media screen and (min-width:768px) {
    .g_feature_innner dd img {
        margin-top: var(--m-30);
    }
}

/* guide_predictor */
.guide_predictor {
    padding: var(--m-30) 0;
}
@media screen and (min-width:768px) {
    .guide_predictor {
        padding: var(--m-40) 0;
    }
}
.guide_predictor h2 img {
    width: 63.2%;
}
@media screen and (min-width:768px) {
    .guide_predictor h2 img {
        width: 420px;
    }
}
.guide_predictor h2 {
    margin-bottom: var(--m-20)
}
@media screen and (min-width:768px) {
    .guide_predictor h2 {
        margin-bottom: var(--m-30)
    }
}
.g_predictor_text01 {
    width: 86.67%;
    margin: auto;
    margin-bottom: var(--m-20);
    color: var(--c-white);
    font-size: calc(var(--s-default)* 1.4px);
    font-weight: bold;
    line-height: 1.428;
}
@media screen and (min-width:768px) {
    .g_predictor_text01 {
        width: 620px;
        font-size: calc(var(--s-default)* 2.4px);
    }
}
.g_predictor_inner {
    width: 94.66%;
    padding: var(--m-20) 15px;
    margin: auto;
    background-color: var(--c-white);
    border-radius: 40px;
    position: relative;
    z-index: 2;
}
@media screen and (min-width:768px) {
    .g_predictor_inner {
        width: 620px;
        padding: var(--m-30);
    }
}
.g_predictor_inner+.g_predictor_inner {
    margin-top: var(--m-10);
}
@media screen and (min-width:768px) {
    .g_predictor_inner+.g_predictor_inner {
        margin-top: var(--m-20);
    }
}
.g_predictor_inner>div {
    display: flex;
    margin-bottom: var(--m-20);
}
@media screen and (min-width:768px) {
    .g_predictor_inner>div {
        margin-bottom: var(--m-40);
    }
}
.g_predictor_inner>div img {
    width: 88px;
    height: 88px;
    margin: 0;
    margin-right: 10px;
}
@media screen and (min-width:768px) {
    .g_predictor_inner>div img {
        width: 153px;
        height: 153px;
    }
}
.g_predictor_inner>div h3 {
    margin-bottom: var(--m-10);
    color: var(--c-darkBlack);
    font-size: calc(var(--s-default)* 1.8px);
    font-weight: bold;
}
.g_predictor_inner>div h3 a{
    color: var(--c-darkBlack);
}
@media screen and (min-width:768px) {
    .g_predictor_inner > div h3 {
        margin-bottom: var(--m-20);
        font-size: calc(var(--s-default)* 3.0px);
    }
}
.g_predictor_inner > div em {
    display: block;
    margin-bottom: 5px;
    padding-bottom:4px;
    color: var(--c-secondary);
    font-size: calc(var(--s-default)* 1.3px);
    font-weight: bold;
    border-bottom: 1px solid var(--c-secondary);
}
@media screen and (min-width:768px) {
    .g_predictor_inner > div em {
        margin-bottom: var(--m-10);
        font-size: calc(var(--s-default)* 2.1px);
    }
}
.g_predictor_inner > div p {
    color: var(--c-primary);
    font-size: calc(var(--s-default)* 1.3px);
    line-height: 1.53;
}
@media screen and (min-width:768px) {
    .g_predictor_inner > div p {
        font-size: calc(var(--s-default)* 1.8px);
    }
}
.g_predictor_inner > img {
    width: 74.64%;
}
@media screen and (min-width:768px) {
    .g_predictor_inner > img {
        width: 435px;
    }
}
.g_predictor_button {
    width: 69.33%;
    margin: auto;
    margin-top: calc(var(--s-default)*2.5px);
}
.g_predictor_button p {
    text-align: center;
    margin-bottom: var(--m-10);
    color: var(--c-white);
    font-size: calc(var(--s-default)* 1.3px);
    font-weight: bold;
}
@media screen and (min-width:768px) {
    .g_predictor_button p {
        margin-bottom: var(--m-20);
        font-size: calc(var(--s-default)* 1.8px);
        letter-spacing: 0.1em;
    }
}
.g_predictor_button .button {
    width: 100%;
}
@media screen and (min-width:768px) {
    .g_predictor_button .button {
        width: 300px;
    }
}
.g_predictor_inner::after {
    content: '';
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    color: #D9F2EE;
    font-size: calc(var(--s-default) * 3px);
    font-weight: bold;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    z-index: -1;
}
@media screen and (min-width:768px) {
    .g_predictor_inner::after {
        font-size: calc(var(--s-default) * 4px);
    }
}
.g_predictor_inner:nth-of-type(1)::after {
    content: 'KIMURA YASUKI';
}
.g_predictor_inner:nth-of-type(2)::after {
    content: 'SHUAI INDEX';
}
.g_predictor_inner:nth-of-type(3)::after {
    content: 'AKITA ASAKO';
}
.g_predictor_inner:nth-of-type(4)::after {
    content: 'FOX';
}

/* guide_HowToUse */
.guide_HowToUse {
    padding: var(--m-30) 0 calc(var(--s-default) * 4.5px);
}
@media screen and (min-width:768px) {
    .YosoGuide .guide_HowToUse {
        background-color: #FFF9F5;
        padding: var(--m-40) 0 calc(var(--s-default) * 5.5px);
    }
}
.guide_HowToUse h2 {
    width: 49.33%;
    margin: auto;
    position: relative;
    z-index: 2;
}
@media screen and (min-width:768px) {
    .guide_HowToUse h2 {
        width: 345px;
    }
}
.guide_HowToUse h2::before,
.guide_HowToUse h2::after {
    content: "";
    display: block;
    width: 44px;
    height: 50px;
    position: absolute;
    transform: translate(0, -50%);
    background-image: url(../../../common/img/yoso/guide/2023/sec4_title_ques.png);
    background-size: contain;
    z-index: -1;
}
.guide_HowToUse h2::before {
    top: 70%;
    left: -25%;
}
.guide_HowToUse h2::after {
    width: 59px;
    height: 70px;
    top: 45%;
    right: -30%;
    transform: translate(0, -50%) rotate(55deg);
}
@media screen and (min-width:768px) {
    .guide_HowToUse h2::before {
        top: 50%;
        left: -25%;
        width: 80px;
        height: 90px;
    }
    .guide_HowToUse h2::after {
        top: 40%;
        width: 100px;
        height: 110px;
    }
}
.guide_HowToUse h2 img {
    width: 100%;
}
.guide_HowToUse_inner {
    padding: 0 var(--m-10);
    margin-top: var(--m-20);
}
@media screen and (min-width:768px) {
    .guide_HowToUse_inner {
        padding: 0 var(--m-20);
        margin-top: var(--m-30);
    }
}
.guide_HowToUse_inner div {
    position: relative;
}
.guide_HowToUse_inner div:not(:last-of-type) {
    padding-bottom: var(--m-30);
    /* border-bottom: 1px dashed #E2E0E0; */
}

@media screen and (min-width:768px) {
    .guide_HowToUse_inner div:not(:last-of-type) {
        padding-bottom: var(--m-40);
    }
}
.guide_HowToUse_inner div+div {
    padding-top: var(--m-30);
}
@media screen and (min-width:768px) {
    .guide_HowToUse_inner div+div {
        padding-top: var(--m-40);
    }
}
.guide_HowToUse_title01 {
    margin-bottom: var(--m-20);
}

@media screen and (min-width:768px) {
    .guide_HowToUse_title01 {
        margin-bottom: var(--m-30);
    }
    .guide_HowToUse_title01 img {
        width: 500px;
    }
}
.guide_HowToUse_detail01 {
    text-align: center;
}
.guide_HowToUse_detail01>div {
    width: 100%;
    padding: var(--m-20);
    margin: 0 auto var(--m-20);
    background-color: var(--c-white);
    border-radius: 40px;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail01>div {
        width: 620px;
    }
}
.guide_HowToUse_detail01 img {
    margin-bottom: var(--m-20);
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail01 img {
        width: 494px;
    }
}
.guide_HowToUse_detail01 a {
    text-align: center;
    display: inline-block;
    color: var(--c-darkBlack);
    font-size: calc(var(--s-default) * 1.6px);
    font-weight: bold;
    position: relative;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail01 a {
        cursor: pointer;
        font-size: calc(var(--s-default) * 2.2px);
    }
}
.guide_HowToUse_detail01 a span {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}
.guide_HowToUse_detail01 a span::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: #EB441D;
    position: absolute;
    top: 50%;
    right: -12%;
    transform: translate(0, -55%);
    z-index: -1;
    border-radius: 50%;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail01 a span::after {
        width: 24px;
        height: 24px;
        right: -10%;
        transform: translate(0, -54%);
    }
    .guide_HowToUse_detail01 a span svg {
        width: 20px;
        height: 20px;
    }
}
@media screen and (min-width:768px) {
    .guide_HowToUse_inner div:nth-of-type(2) .guide_HowToUse_title01 img {
        width: 620px;
    }
}
.guide_HowToUse_detail02>div {
    width: 80.28%;
    margin: 0 auto var(--m-20);
    text-align: center;
    padding: 6px 0;
    background-color: #FFECE0;
    position: relative;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail02>div {
        width: 620px;
        margin: 0 auto var(--m-30);
        padding: 10px 0;
    }
}
.guide_HowToUse_detail02>div::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    translate: -50% 0;
    border-top: 10px solid #FFECE0;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail02>div::after {
        bottom: -20px;
        border-top: 20px solid #FFECE0;
        border-right: 25px solid transparent;
        border-left: 25px solid transparent;
    }
}
.guide_HowToUse_detail02>div p {
    color: var(--c-darkBlack);
    font-size: calc(var(--s-default) * 1.5px);
    font-weight: bold;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail02>div p {
        font-size: calc(var(--s-default) * 2.2px);
    }
}
.guide_HowToUse_detail02>div p svg {
    position: relative;
    top: 3px;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail02>div p svg {
        width: 35px;
        height: 25px;
    }
}
.guide_HowToUse_detail02>div p em {
    font-size: calc(var(--s-default) * 1.8px);
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail02>div p em {
        font-size: calc(var(--s-default) * 2.6px);
    }
}
.guide_HowToUse_detail02 img {
    width: 80.28%;
    margin-bottom: var(--m-20);
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail02 img {
        width: 620px;
        margin-bottom: var(--m-30);
    }
}
.guide_HowToUse_detail02>p {
    text-align: center;
    margin-bottom: var(--m-10);
    color: var(--c-darkBlack);
    font-size: calc(var(--s-default) * 1.3px);
    font-weight: bold;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail02>p {
        margin-bottom: var(--m-20);
        font-size: calc(var(--s-default) * 1.8px);
    }
}
.guide_HowToUse_detail02>.button {
    width: 73.23%;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail02>.button {
        width: 300px;
    }
}
.guide_HowToUse_detail02+.guide_HowToUse_detail02 {
    margin-top: var(--m-30);
    padding-bottom: var(--m-30);
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail02+.guide_HowToUse_detail02 {
        margin-top: var(--m-40);
        padding-bottom: var(--m-40);
    }
}
.guide_HowToUse_detail03 {
    width: 100%;
    padding: var(--m-20);
    margin: auto;
    background-color: #FFECE0;
    border-radius: 40px;
    position: relative;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail03 {
        width: 620px;
        padding: var(--m-30);
    }
}
.guide_HowToUse_detail03::after {
    content: "";
    display: block;
    width: 98px;
    height: 62px;
    position: absolute;
    bottom: 0;
    right: 30px;
    background-image: url(../../../common/img/yoso/guide/2023/bicycle.png);
    background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail03::after {
        width: 120px;
        height: 84px;
        right: 50px;
        background-size: contain;
    }
}
.guide_HowToUse_detail03 dt {
    display: flex;
    width: 46.67%;
    margin: 0 auto var(--m-20);
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail03 dt {
        width: 300px;
    }
}
.guide_HowToUse_detail03 dt svg {
    position: relative;
    top: -2px;
    margin-right: 5px;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail03 dt svg {
        width: 35px;
        height: 35px;
    }
}
.guide_HowToUse_detail03 dt img {
    width: 85.13%;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_inner .guide_HowToUse_detail03 dt.guide_HowToUse_title01 img {
        width: 260px;
    }
}
.guide_HowToUse_detail03 dd {
    display: flex;
}
.guide_HowToUse_detail03 dd:not(:last-of-type) {
    margin-bottom: var(--m-20);
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail03 dd:not(:last-of-type) {
        margin-bottom: var(--m-30);
    }
}
.guide_HowToUse_detail03 dd img {
    width: 46.98%;
    margin: 0;
    margin-right: var(--m-10);
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail03 dd img {
        width: 310px;
        margin-right: var(--m-20);
    }
}
.guide_HowToUse_detail03 dd p {
    color: var(--c-darkBlack);
    font-size: calc(var(--s-default) * 1.3px);
    font-weight: bold;
    line-height: 1.38;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail03 dd p {
        font-size: calc(var(--s-default) * 1.8px);
    }
}
.guide_HowToUse_detail03 dd em {
    display: block;
    margin: var(--m-10) 0;
    font-size: calc(var(--s-default) * 1.8px);
    font-weight: 700;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail03 dd em {
        font-size: calc(var(--s-default) * 2.6px);
    }
}
.guide_HowToUse_detail04 p {
    text-align: center;
    margin-bottom: var(--m-20);
    color: var(--c-darkBlack);
    font-size: calc(var(--s-default) * 1.4px);
    font-weight: bold;
    line-height: 1.42;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail04 p {
        font-size: calc(var(--s-default) * 1.8px);
    }
}
.guide_HowToUse_detail04 img {
    width: 81.12%;
}
@media screen and (min-width:768px) {
    .guide_HowToUse_detail04 img {
        width: 620px;
    }
}

/* guide_confident */
#sec_pro_yosoka{
    margin-bottom:0;
}
.guide_confident {
    padding: var(--m-30) var(--m-10);
}
@media screen and (min-width:768px) {
    .YosoGuide .guide_confident {
        padding: var(--m-40) var(--m-20);
        background-color: #FAF0F1;
    }
}
.guide_confident h2 {
    margin-bottom: calc(var(--s-default) * 1.5px);
}
@media screen and (min-width:768px) {
    .guide_confident h2 {
        margin-bottom: var(--m-20);
    }
}
.guide_confident h2 img {
    width: 52.11%;
}
@media screen and (min-width:768px) {
    .guide_confident h2 img {
        width: 300px;
    }
}
.guide_confident>p {
    text-align: center;
    margin-bottom: var(--m-20);
    color: var(--c-darkBlack);
    font-size: calc(var(--s-default) * 1.4px);
    font-weight: bold;
    line-height: 1.42;
}
@media screen and (min-width:768px) {
    .guide_confident>p {
        margin-bottom: var(--m-30);
        font-size: calc(var(--s-default) * 1.8px);
    }
}
.guide_confident>p em {
    color: #CD0205;
}
.guide_confident .TopTodayYoso {
    margin-bottom: 0;
}
@media screen and (min-width:768px) {
    .guide_confident .TopTodayYoso {
        width: 620px;
        margin: auto;
    }
}
.guide_confident .LinkBtn_03 a{
    display: block;
    text-align: center;
    width: 82.53%;
    padding: 16px 0;
    margin: auto;
    background-color: var(--c-darkBlack);
    color: var(--c-white);
    font-size: calc(var(--s-default) * 1.6px);
    font-weight: bold;
    border-radius: 50px;
    box-shadow: var(--c-btn-box-shadow);
    position: relative;
    transition: all 0.3s;
    line-height: 0;
    border: none;
}
.guide_confident .LinkBtn_03 a::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    translate: 0 -50%;
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--c-white);
    border-right: 2px solid var(--c-white);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 1px;
    transition: all 0.3s;
}
.guide_confident .LinkBtn_03 a span svg{
    display: none;
}
@media screen and (min-width:768px){
    .guide_confident .LinkBtn_03 a{
        width: 300px;
    }
    .guide_confident .LinkBtn_03 a:hover{
        box-shadow: none;
        transform: translateY(3px);
        transition: all 0.3s;
    }
    .guide_confident .LinkBtn_03 a:hover::after{
        transform: translateX(3px) rotate(45deg);
        transition: all 0.3s;
    }
}

/* guide_vote */
.guide_vote {
    padding: var(--m-30) 0;
}
@media screen and (min-width:768px) {
    .YosoGuide .guide_vote {
        padding: var(--m-40) 0;
        background-color: var(--bgc-primary);
    }
}
.guide_vote h2 {
    margin-bottom: calc(var(--s-default) * 1.5px);
}
@media screen and (min-width:768px) {
    .guide_vote h2 {
        margin-bottom: var(--m-20);
    }

    .guide_vote h2 img {
        width: 620px;
    }
}
.guide_vote p {
    text-align: center;
    margin-bottom: var(--m-20);
    color: var(--c-white);
    font-size: calc(var(--s-default) * 1.4px);
    font-weight: bold;
    line-height: 1.42;
}
@media screen and (min-width:768px) {
    .guide_vote p {
        margin-bottom: var(--m-30);
        font-size: calc(var(--s-default) * 1.8px);
    }
}
.guide_vote ul {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--m-10);
}
@media screen and (min-width:768px) {
    .guide_vote ul {
        width: 620px;
        margin: auto;
        padding: 0;
    }
}
.guide_vote ul li {
    width: 49.29%;
}
@media screen and (min-width:768px) {
    .guide_vote ul li {
        width: 300px;
        margin: auto;
    }
}
.guide_vote a {
    display: block;
    text-align: center;
    width: 100%;
    padding: var(--m-10) 0;
    margin: auto;
    background-color: var(--c-darkBlack);
    color: var(--c-white);
    font-size: calc(var(--s-default) * 1.3px);
    font-weight: bold;
    border-radius: 50px;
    box-shadow: var(--c-btn-box-shadow);
    position: relative;
    transition: all 0.3s;
}
@media screen and (min-width:768px) {
    .guide_vote a {
        padding: 14px 0;
        font-size: calc(var(--s-default) * 1.8px);
    }
    .guide_vote a:hover{
        box-shadow: none;
        transform: translateY(3px);
        transition: all 0.3s;
    }
}
.guide_vote li:nth-of-type(1) a {
    color: var(--c-darkBlack);
    background-color: var(--c-yellow);
}
.guide_vote li a::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0, -50%);
    background-repeat: no-repeat;
    background-size: contain;
}
@media screen and (min-width:768px) {
    .guide_vote li a::before {
        left: 50px;
    }
}
.guide_vote li:nth-of-type(1) a::before {
    width: 47px;
    height: 24px;
    background-image: url(../../../common/img/yoso/guide/2023/race_logo.png);
}
.guide_vote li:nth-of-type(2) a::before {
    width: 30px;
    height: 30px;
    background-image: url(../../../common/img/yoso/guide/2023/confident_logo.png);
}
@media screen and (min-width:768px) {
    .guide_vote li:nth-of-type(2) a::before {
        left: 65px;
    }
}
.guide_vote a em {
    display: block;
    margin-top: 3px;
    font-size: calc(var(--s-default) * 1.6px);
}
@media screen and (min-width:768px) {
    .guide_vote a em {
        font-size: calc(var(--s-default) * 2.2px);
    }
}

/* umai_HowToUse */
.umai_HowToUse.fixed-guide{
    position: fixed;
    bottom: 100px;
    right:0;
    z-index: 5;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}
.umai_HowToUse {
    position: fixed;
    bottom: 100px;
    right: -200px;
    transition: all 0.3s ease-in-out;
}
@media screen and (min-width:768px) {
    .umai_HowToUse.fixed-guide{
        right: calc(50% - 480px);
    }
    .umai_HowToUse {
        opacity: 0;
    }
}
.umai_HowToUse a {
    display: block;
    width: 122px;
    padding: 12px 6px 12px 18px;
    background-color: var(--c-darkBlack);
    border-radius: 80px 0 0 80px;
    transition: all 0.3s;
}
@media screen and (min-width:768px) {
    .umai_HowToUse a:hover{
        opacity: 0.75;
    }
}