@charset "UTF-8";
/* CSS Document */
@media (min-width: 768px) {
    :root{
        /* tb版 */
        --contents-area-top-space:60px;
        --contents-area-bottom-space:90px;
        --footer-top-margin:60px;  
    }
    html{
        font-size:16px;
    }
    body{
        padding-top:65px;
    }
    
    /* site header
    -----------------------*/
    #site_header h1{
        height:65px;
    }

    /*
    =====================================

        MAIN

    =====================================
    */
    /*-----------------------------------
    TOP page
    ------------------------------------*/
    main.toppage{
        font-size:15px;
    }
    /* TOP : pickup */
    #top_selected_info{
        .pickup_swiper{
            background:rgba(233, 239, 244, 0.85);
            border-radius:10px;
            overflow:hidden;
        }
    }
    /* TOP : 新規参加団体 */
    #top_new_commer{
        li{
            width:174px;
        }
        br.sp{
            display:none;
        }    
    }
    /* TOP : メリット */
    #top_merit{
        top:-60px;
        li{
            width:50%;
            height:120px;
            padding:0;
        }
        a{
            font-size:17px;
        }
        a .tonic{
            font-size:24px;
        }
        a:after{
            width:45px;
            height:45px;    
        }
    }
    /* TOP : 数字で見る */
    #top_data{
        ul{
            display:flex;
            justify-content:center;
            gap:10px;
        }
        li{
            max-width:calc(100% / 3 - 5px);
            padding:1.875em 10px;
            margin:0;
        }
        .num{
            font-size:4em;
        } 
        .unit{
            font-size:1.2em;
        }   
    }
    /* TOP : 導入事例 */
    #top_cs{
        h3{
            display:inline-block;
            padding:1em 1.5em 1.5em;
        }    
        li{
            max-width:calc(33.33% - 7.34px);
        }    
    }


    /* content nav
    -----------------------*/
    #content_nav .contents_search{width:auto; overflow: visible;}
        #content_nav .contents_search .toggle_label_wrapper{display:none;}
        #content_nav .contents_search .target{position:static; opacity:1;}
            #content_nav .contents_search .target form{position:static; width:300px; background:none; border-radius:0; padding:0; margin:0; box-shadow:none; border:none;}
            #content_nav .contents_search .target form:before{display:none;}
            #content_nav .contents_search .target .search_wrapper{width:100%; margin: 0;}
    /* refine-items
    -----------------------*/
    /* filter */
    .refine_items .component#filter{
        width:100%;
    }
    /* alphabetic */
    .refine_items .component.alphabetic{
        border-top:solid 1px #ccc;
    }
        .refine_items .component.alphabetic .toggle_label_wrapper{
            display:none;
        }
        .refine_items .component.alphabetic .target{
            padding:0.75em;
            background:none;
        }
        .refine_items .alphabetic .target ul:before{
            content:'団体名50音順検索 ：'; 
            padding-right:10px;
        }
        .refine_items .alphabetic .label_wrapper{
            display:none;
        } 
    /* sort order */
    .sort_order ul:before{
        content:'並べ替え：';
    }

    /*-----------------------------------
        members
    ------------------------------------*/
    /* 個別ページ header */
    .members.single .member_header{
        display:flex;
        flex-direction:row-reverse;
        justify-content:space-between;
        align-items:flex-start;
        gap:40px;
    }
        .members.single .member_info{
            width:calc(100% - 320px);
        }
            .members.single .member_info h2{
                margin:5px 0 .75em;
                padding-bottom:.75em; 
            }
            .members.single .member_info dl{
                margin-bottom:0;
            }
        .members.single .member_logo_wrapper{
            width:280px;
            padding:35px 40px;
        }
            .members.single .member_logo{
                max-width:100vw;
                margin:0 auto 0.75em;
            }
    /* 個別ページ 目標・進捗 */
    .members.single .progress{
        gap:14px;
    }
        .members.single .progress > div{
            min-height:8em;
            padding:10px 20px;    
        }
        .members.single .progress .goal,
        .members.single .progress .milestone,
        .members.single .progress .recent_rate{
            width:calc(33.33% - 9.33px);
            margin:0;
        }
        .members.single .progress .goal h5,
        .members.single .progress .milestone h5,
        .members.single .progress .recent_rate h5{
            margin-bottom:0.5em;
        }
        .members.single .goal p,
        .members.single .recent_rate p{
            font-size:1.75em;
        }
        .members.single .progress .achievement{
            width:100%;
            margin:0;
            flex-direction:row;
            justify-content:center;
            align-items:center;
            gap:15px;
        }
        .members.single .achievement h5,
        .members.single .achievement table{
            width:auto;
            margin:0;
        }    
    /* 個別ページ メッセージ */
    .members.single .message{
        padding:1.75em 2em;
    }
    /* 個別ページ 導入事例、関連情報 */
    .members.single .member_casestudy,
    .members.single .related_info{
        display:flex;
        justify-content:space-between;
        gap:17px;
    }
        .members.single .member_casestudy h3,
        .members.single .related_info h3{
            width:calc(33.33% - 9.33px);
            padding:10px 0 0 5px;
            border-top:solid 3px;
            border-bottom:none;
        }
        .members.single .member_casestudy ul,
        .members.single .related_info ul{
            width:calc(66.66% - 9.33px);
            padding:10px 0 0 5px;
            border-top:solid 3px #9f9fa0;
            margin-bottom:-1em;
        }
            .members.single .member_casestudy li,
            .members.single .related_info li{
                margin:0 0 1em;
            }
    /* 個別ページ 動画 */
    .members.single .member_mov{
        padding:25px;
    }
    /*-----------------------------------
        latest 最新情報
    ------------------------------------*/
    /* 最新情報アーカイブページ 
    -----------------------------*/
    /* 最新情報メニュー */
    #latest_menu .content_menu_wrapper{
        display:flex;
        justify-content:space-between;
        gap:0 40px;
    }
    #latest_menu .latest_cats{
        width:260px;
    }    
    #latest_menu .latest_tags_list{
        width:calc(100% - 310px);
    }   
        #latest_menu .latest_cats h3,
        #latest_menu .latest_cats li{
            white-space:nowrap;
        }
        #latest_menu h3{
            font-size:16px;
        }
    /* 最新情報一覧部分 */
    .latest.archive{
        .archive_list_wrapper.latest{
            gap:40px 15px;

        }
        .post{
            max-width:calc(33.33% - 10px);
            .date{
                font-size:13px;
            }
            h3{
                font-size:14px;
            }
            .latest_cat,
            .latest_tags{
                font-size:12px;
            }
        }   
    }

    /*-----------------------------------
        casestudy 導入事例
    ------------------------------------*/
    /* 導入事例アーカイブページ 
    -----------------------------*/
    #cs_lead,
    .casestudy.archive .archive_list_wrapper{
        font-size:14px;
    }  
    #cs_all_tags_wrapper h4{
        font-size:15px;
    }
    #cs_all_tags_wrapper.component.accordion{
        .toggle_wrapper{
            font-size:15px;
        }
    }
    .casestudy.archive .post{
        display:flex;
        flex-direction:row-reverse;
        gap:0 20px;
        padding:50px 14px 30px;
        .cs_data{
            width:calc(100% - 240px);            
        }
            .cs_data .cs_date{
                height:45px;
                font-size:13px;
            }    
                .cs_members_info{
                    margin-bottom:0;
                }
        .cs_thumb{
            display:block;
            width:220px;
            text-align:center;
        }
            .cs_thumb .thumb{
                width:100%;
                margin-bottom:10px;
            }

    }
    /* 導入事例個別ページ 
    -----------------------------*/
    .casestudy.single .member_info{
        display:flex;
        justify-content:space-between;
        gap:30px;
    }
        .casestudy.single .member_info .member_logo{
            width:240px;
            margin:0;
            padding:calc(30px - 1rem) 0;
        }
        .casestudy.single .member_info .member_data{
            width:calc(100% - 270px);
            padding:5px 1rem 0 0;
            margin:0;
        }
    .casestudy.single .cs_content{
        display:flex;
        flex-direction:row-reverse;
        justify-content:space-between;
        gap:30px;
    }
        .casestudy.single .cs_content .cs_text{
            width:calc(100% - 270px);    
        }
        .casestudy.single .cs_content .cs_imgs{
            width:240px;
            background:none;
            padding:0;    
        }

    /*-----------------------------------
    「サイト内検索」結果表示
    (index.php内のsearch部分)
    ------------------------------------*/
    .archive.serach_result{
        & .result{
            font-size:15px;
            padding:0 1.5rem 1rem;
            gap:20px;
        }
        & .result .thumb{
            width:180px;
        }
        & .result .content{
            width:calc(100% - 200px);
        }
        & .result .post_type{
            padding:3px 10px 6px;
            font-size:13px;
        }
        & .result h4{
            margin:0.5em 0;
            font-size:1.05em;
        }
    }

    /*-----------------------------------
    参加団体専用ページ
    ------------------------------------*/
    main.mo{
        /* 参加団体専用トップページ
        　　イベント・ウェビナー一覧
        　　ニュースレター一覧
        -------------------------------------*/
        .mo_content_wrapper.top#event_and_webinar,
        .mo_content_wrapper.top#mailnews,
        .mo_content_wrapper.index#event_and_webinar,
        .mo_content_wrapper.index#mailnews{
            a.link{
                display:flex;
                align-items: center;
                gap:15px;
            }
        }
        .mo_content_wrapper.top#mailnews,
        .mo_content_wrapper.index#mailnews{
            p.date{
                margin-bottom: 0;
            }
        }
        /* メールニュース
        -------------------------------------*/
        /* 一覧ページ */
    }/* main.mo ends */




    /*
    =====================================

        FOOTER

    =====================================
    */
    footer{
        .our_info{
            display:flex;
            justify-content: space-around;
            align-items: flex-start;
        }
    }
    #page_top{
        width:75px;
        height:75px;
        border-radius:75px;
    }
    #page_top .icon{
        font-size:100px;
    }
    #page_top .txt{
        display:block;
    }
        
}