@media(max-width:768px){
    .sp{
        display:block;
    }
    .pc{
        display:none;
    }
    header{
        padding:20px;
    }
    header img{
        margin:0;
    }
    .footer_body{
        padding:40px 20px 10px;
    }
    .first_line{
        grid-template-columns:1fr;
        gap:20px;
        margin-bottom:29px;
    }

    .first_line dl dt{
        position: relative;
    }
    .first_line dl dd{
        display:none;
    }
    .first_line dl dt .toggle_btn{
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #FFF;
        user-select: none;
    }

    .first_line dl dd a{
        margin-top:10px;
    }
    
    footer ul li ul{
        display:none;
    }
    
    footer ul li p{
        border-bottom:1px solid #ccc;
        font-size:16px;
    }

    .footer_colum{
        flex-flow:column nowrap;
        justify-content:center;
        align-items:flex-start;
    }
    .footer_area_left{
        grid-column:1/3;
        grid-row:1/2;
        /* height:100%; */
    }
    .footer_area_left a{
        width:45.8974358974vw;
    }

    .footer_right_row1{
        width:100%;
        justify-content:center;
    }

    .footer_right_row1 img{
        width: 47.9487179487vw;
    }
    .footer_right_row1 img + img {
        width: 26.6666666667vw;
    }

    .footer_area_right{
        width:100%;
        margin-bottom:10px;
    }
    .footer_right_row2{
        grid-row:3/4;
        flex-direction:column;
        gap:10px;

    }
    .footer_right_row2 ul{
        gap:15px;
    }

    small{
        background-color:#13485A;
        width:100%;
        display:block;
        text-align:center;
        color:#fff;
        padding:10px;
        font-size:11px;
    }

    .footer_nav{
        display: grid;
        justify-content: start;
        gap: 5px;
    }
    .footer_nav ul{
        gap:10px;
    }

    .footer_bottom_menu{
        display: grid;
        justify-content: start;
    }
    .footer_bottom_menu ul{
        gap:0;
    }

    main{
        margin:20px auto;
        padding:18px;
    }

    .main_page{
        border:3px solid #2D7E98;
    }
    h1{
        font-size:18px;
        margin-bottom:39px;
    }

    h1 span{
        font-size:41px;
        width:54px;
        height:54px;
    }

    .title h1{
        font-size:28px;
    }

    .common_btn{
        font-size:14px;
    }

    .arrow{
        width:28px;
        height:28px;
    }
    .arrow::after{
        left:9px;
        width:6px;
        height:6px;
    }

    /*q_page*/
    .main_adjust{
        padding:55px 20px;
    }

    .title_area h2{
        font-size:22px;
        margin-top:0;
    }
    .title_area h2::before,.title_area h2::after{
        height:22px;
    }
    .title_area strong{
        font-size: 22px;
    }
    .title_area p{
        margin-top:20px;
    }
    .question_box{
        margin:89px auto 48px;
    }
    .question_box[data-id="S0"]{
        margin:0 auto;
    }
    .question_box h1 {
        font-size: 16px;
        margin-bottom:42px;
    }

    .title_wrapper{
        margin-bottom:20px;
        grid-template-columns:50px 1fr;

    }
    .title_wrapper h1{
        margin:0;
    }
    .q_form label{
        font-size:14px;
    }
    .q_form label input[type="radio"] {
        height:16px;
        width:16px;
    }

    #s0_answer{
        font-size:12px;
        padding:12px 10px 14px;
    }

    .q_no{
        font-size:15px;
        width:33px;
        height:33px;
    }
    .back_btn{
        font-size:12px;
    }

    .next_btn{
        margin:0 auto;
    }

    .question_box .arrow::after{
        left:9px;
    }

    .result_contents{
        padding:10px;
        border-top:40px solid #2D7E98;
        border-bottom:40px solid #2D7E98;
        border-left:15px solid #2D7E98;
        border-right:15px solid #2D7E98;
    }

    .about{
        max-width: 720px;
        margin: 0 auto;
        padding:50px 10px 0;
    }
    .about h2{
        padding-bottom:14px;
        font-size:18px;
    }

    .download_contents > label{
        max-width:420px;
        margin:0 auto 12px;
    }

    .download_contents label{
        margin-bottom: 16px;
    }

    .download_contents label input{
        margin-top:3px;
    }

    .download_lists{
        flex-direction:column;
        align-items:center;
    }

    .download_card label::after{
        bottom:-13px;
    }
    .recommend{
        margin: 50px auto 0;
        padding:24px 10px;
    }

    .recommend h2{
        font-size:18px;
    }

    .download_card{
        padding:24px 16px 16px;
    }

    .download_card label{
        font-size:14px;
        align-items:flex-start;
    }

    .download_result h3, .result_text, .description_text{
        font-size:9px;
    }

    .form{
        margin:36px auto 30px;
        padding:0 10px;
    }

    .form h2{
        font-size:18px;
        padding-bottom:14px;
    }
    .form_area{
        margin-top:16px;
    }
    .form_area dl{
        grid-template-columns:1fr;
        gap:9px;
        margin-bottom:16px;
    }
    .form_area dl dt{
        font-size:14px;
    }
    .msg_box{
        padding:12px;
        font-size:12px;
        margin-bottom:12px;
    }
    .form_area > label{
        font-size: 12px;
    }
    .form_area > label input{
        width:14px;
        height:14px;
    }
    .form_area button{
        margin-top:28px;
    }
    .download{
        max-width:260px;
    }


    .success_page{
        padding: 30px 15px;
    }

    .success_page h1{
        margin-bottom:14px;
    }

    .success_page p{
        margin:16px 0 24px;
        font-size:14px;
        font-weight:600;
    }

    .success_page .button_area{
        margin-bottom:50px;
    }

    .balloon p{
        font-size:12px;
        margin:2px;
    }

    .success_page .button_area .common_btn{
        font-size:16px;
    }

    .speech_bubble_area{
        position:relative;
        flex-direction: column;
    }

    .social_contents{
        padding:24px 12px;
    }

    .speech_bubble{
        width:100%;
        font-size:14px;
    }

    .speech_bubble::after {
        content:unset;
    }

    .speech_bubble_area img{
        position: absolute;
        right:-10px;
        width: 34px;
        height:45px;
        bottom: 0;
    }

    .social_links{
        flex-wrap: wrap;
        gap:10px;
    }

    .social_links li{
        text-align: center;
    }

    .social_links li:nth-child(-n+2){
        flex:0 0 calc(50% - 40px);
    }

    .social_links li:nth-child(n+3){
        flex:0 0 calc(33.333% - 10px);
    }

    .social_links li span{
        font-size:14px;
    }
}