@charset "UTF-8";
:root{
    --color-one: #014EA2;
    --color-two: #D1AE15;
    --color-three: #E60112;
}
html, body {
  margin: 0;
  padding: 0;
}
/* ▼▼ fun ▼▼ */
#fun{
  height: 100%;
  background:
    repeating-linear-gradient(
      -45deg,
      #0f3e83 0 64px, /* 薄い方 */
      #083880 64px 128px /* 濃い方 */
    );
}

#fun .top{
    background-image: url('../images/fun_bg.jpg');
}

#fun .heading .english{
    letter-spacing: 0.04em;
    font-family: var(--english-fonts);
    font-size: 41px;
    font-weight: 500;
}
#fun .heading .japanese{
    font-size: 13px;
    font-weight: 500;
}

#fun #origin{
    padding-top: 160px;
    padding-bottom: 64px;
}

#fun #origin br{
    display: none;
}

#fun .fun-guide{
    max-width: 1100px;
    position: relative;
}

#fun .fun-guide-inner{
    position: absolute;
    width: 294px;
    height: 214px;
    bottom: -8px;
    right: min(3.51vw , 48px);
    z-index: 10;
}
.fun-guide-bubble{
    position: absolute;
    width: 43.5%;
    top: 0;
    left: 0;
}
#fun .fun-guide-bubble img{
    display: block;
    width: 100%;
    height: auto;
}
#fun .fun-guide-bubble p{
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    place-content: center;
    color: #0b3f8f;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6875;
    text-align: center;
}
#fun .fun-guide-falcon{
    display: block;
    position: absolute;
    width: 168px;
    width: 57.1%;
    height: auto;
    right: 0;
    bottom: 0;
}

#fun .fun-guide-inner-bottom{
    position: absolute;
    width: 426px;
    height: 328px;
    bottom: 0px;
    right: 8.9%;
    z-index: 10;
}
#fun .fun-guide-bubble-bottom{
    position: absolute;
    width: 39%;
    top: 0;
}
#fun .fun-guide-falcon-bottom{
    width: 65.3%;
}

#fun .fun-qa{
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    row-gap: 50px;
    position: relative;
}
#fun .fun-qa-card{
    position: relative;
    width: 100%;
    background: white;
    border-radius: 20px;
    padding: 50px 50px 35px;
}
#fun .img-single .fun-qa-media img.img-abs{
position: absolute;
    right: -79px;
    top: -112px;
    max-width: 158px;
}
#fun .fun-qa-head{
    position: absolute;
    left: 15px;
    top: 10px;
    text-align: center;
}
#fun .fun-qa-no{
    color: var(--color-two);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.22;
    font-family: var(--english-fonts);
}
#fun .fun-qa-title{
    color: var(--color-two);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.32;
}
#fun .fun-qa-text{
    margin-top: 6px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.0002em;
    
}
#fun .fun-qa-body{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 50px;
    margin-top: 25px;
}
#fun .fun-qa-media{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
}
#fun .fun-qa-media img{
    max-width: 100%;
    display: block;
    border-radius: 10px;
    object-fit: contain;
}
#fun .img-single .fun-qa-body{
    align-items: flex-start;
}
#fun .img-single .fun-qa-media img{
    max-width: 330px;
    width: 100%;
}
#fun .img-single .fun-qa-media{
   justify-content: flex-end;
}
#fun .fun-qa-texts{
    max-width: 430px;
    width: 100%;
    margin: 0px;
    color: #083880;
    font-size: 17px;
    font-weight: 400;
    line-height: 2;
}

#fun .fun-links{
    margin: 120px auto 220px;
}
#fun .fun-links-banner2 picture{
    width: fit-content;
    margin: 0 auto;
}

@media (max-width: 1150px){
    #fun .heading .english{
        font-size: min(5.5vw, 41px);
        line-height: 1.2;
    }
    #fun .heading .japanese{
        font-size: min(1.7vw, 13px);
    }

    #fun #origin{
        padding-top: min(13.9vw, 160px);
        padding-bottom: min(5.8vw, 64px);
    }
    
    #fun #origin br{
        display: block;
    }

    #fun .fun-guide{
        width: 90%;      
    }
    #fun .fun-guide-bubble p{
        font-size: min(1.4vw, 16px);
    }

    /* #fun .fun-guide-inner-bottom{
        width: min(37vw, 426px);
        height: min(28vw, 328px);
    }     */
    #fun .fun-guide-bubble-bottom p{
        font-size: min(1.4vw, 16px);
    }

    #fun .fun-qa{
        width: 90%;
    }
    #fun .fun-qa-no{
    }
    #fun .fun-qa-title{
        font-size: clamp(20px, 2.2vw, 25px);
    }
}

@media (max-width: 1023px){
    #fun .fun-qa-media img{
        width: calc(50% - 10px);
    }
}

@media (max-width:767px){  
    #fun .top{
        background-image: url('../images/sp_fun_bg.jpg');
    }

    #origin{
        padding-top: clamp(64px, 17.8vw, 128px);
        padding-bottom: clamp(27px, 7.2vw, 54px);
    }    

    #fun .heading .english{
        font-size: clamp(37px, 9.9vw, 74px);
        line-height: 1.2;
    }

    #fun .heading .japanese{
        font-size: clamp(12.5px, 3.3vw, 25px);
        letter-spacing: -0.14em;
        margin-top: .8em;
        line-height: 1.2;
    }

    #fun .fun-guide{
        width: 100%;      
    }
    #fun .fun-guide-inner{
        width: 58.6667vw;
        height: 42.6667vw;
        position: relative;
        margin: 0;
        left: 0;
        right: 0;
        bottom: -3.4667vw;
        margin-left: auto;
        margin-right: -2.6667vw;
    }
    #fun .fun-guide-bubble p{
        font-size: 3.2vw;
    }
    #fun .fun-guide-bubble-bottom{
        width: 45%;
    }
    #fun .fun-guide-falcon-bottom{
        width: 56.5%;
    }
    #fun .fun-guide-bubble-bottom p{
        font-size: clamp(10.5px, 2.8vw, 21px);
    }

    #fun .fun-qa {
        width: 100%;
        gap: 6.6667vw;
        padding-inline: 9.3333vw;
    }
    #fun .fun-qa-card{
        padding: 12.5333vw 4.5333vw 8vw;
        width: 100%;
        border-radius: 2.6667vw;
    }
    #fun .fun-qa-body{
        margin-top: 0;
        flex-direction: column-reverse;
        gap: 2.6667vw;
    }
    #fun .fun-qa-head{
        top: 7px;
        left: 2.6667vw;
    }
    #fun .fun-qa-no{
        font-size: 3.7333vw;
    }
    #fun .fun-qa-title{
        font-size: 4.2667vw;
    }
    #fun .fun-qa-text{
        font-size: 3.2vw;
        line-height: calc(50 / 24);
    }
    #fun .fun-qa-texts{
        max-width: unset;
    }
    #fun .fun-qa-media{
        gap: 3.4667vw;
    }
    #fun .fun-qa-media img{
        width: calc(50% - 1.8667vw);
    }
    #fun .img-single .fun-qa-media{
        justify-content: center;
    }
    #fun .img-single .fun-qa-media img{

    }
    #fun .img-single .fun-qa-media img.img-abs{
        max-width: 28.0vw;
        right: -8.0vw;
        top: -3.2vw;
    }
    #fun .fun-links{
        margin: 17.3333vw auto 21.3333vw;
    }
}