@charset "UTF-8";
/* CSS Document */
@media (min-width: 998px) {
    :root{
        /* pc版 */
        --site-header-top-padding:20px;
        --site-header-bottom-padding:20px;
        --snav-top-padding:80px;
        --contents-side-space:20px;
        --contents-area-top-space:80px;
        --contents-area-bottom-space:120px;
        --footer-top-margin:80px;
        --main-content-top-margin:60px;
        --main-content-bottom-margin:46px;
    }
    html{
        font-size:18px;
    }

    /* UIs
    ----------------------- */
    body{
        padding-top:0;
    }
    body.fixed{
        position:static;
    }

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

        HEADER

    =====================================
    */
    #site-header-container{
        position:relative; 
        padding:0; 
        height:auto; 
        border-bottom:solid 3px #4c4c4c; 
        display: block;
    }

    /* site header
    -----------------------*/
    #site_header{
        position:static; 
        border-bottom:solid 1px #bfbfbf;
    }
        #site_header > .container{
            padding:var(--site-header-top-padding) var(--contents-side-space);
        }
        #site_header h1{
            height:auto; 
            padding:0;
        }
            #site_header h1 img{
                width:auto; 
                height:60px;
            }

    /* header toggle
    -----------------------*/
    /*.toggle_label.header_drawer_menu{display:none;}*/
    #site-header-container .toggle_label.drawer{
        display:none;
    }

    /* header navigation
    -----------------------*/
    #h_nav_container{
        width:100%; 
        max-width:100%; 
        height:auto; 
        background:#fff; 
        padding:0; 
        font-size:0.833rem;
    }
        .hnav_close_wrapper{
            display:none;
        }
        #h_nav_container #header_nav{
            height:auto; 
            overflow-y: visible;
        }
            #header_nav .container{
                padding:0 var(--contents-side-space);
            }
                #header_nav .container > ul{
                    margin-bottom:0;
                }

    /* header nav -> ul.main, ul.sub 共通設定
    ----------------------------------------*/
    #header_nav ul label{
        background: #fff !important;
        color:var(--font-color) !important;
        border-top:none !important;
        border-bottom:none !important;
        padding: 0 !important;
        justify-content: center;
    }
    #header_nav ul input:checked ~ label{
        background: #d6e6e8 !important;
    }
        #header_nav ul label:after{
            width:9px;
            height:9px;
        }
    /* 第二階層 */     
    #header_nav ul ul li{
        background:rgba(49, 50, 51, 0.98);
    }
    #header_nav ul ul a{
        line-height: 1.3;
        background: transparent !important;
        color:#fff;
        position: relative;
        padding:0;
    }
    #header_nav ul ul a:hover{
        background: #364f5b !important;
        color:#fff;
        opacity: 1 !important;
    }
    #header_nav ul ul a:before{
        color:#009ee7;
        margin:0;
        position: absolute;
        top:calc(50% -3px);
    }
    #header_nav ul ul a:hover:before{
        color:#98d5ea;
    }
    /* header nav -> .mainnav
    ----------------------------------------*/
    #header_nav .mainnav > .container{
        position: relative;
        height:2.8rem;
        margin:auto;
    }
    /* .mainnav -> ul.main */
    #header_nav .mainnav > .container ul.main{
        border-top:none;
        border-bottom:none;
        /* position、幅調整 */
        position: absolute;
        left:var(--contents-side-space);
        width:calc(100% - var(--contents-side-space) * 2);
        max-width:1400px;
        /* flex調整（横並び） */
        display:flex;
        justify-content: space-between;
        gap: 0;
        margin:0 auto;
    }   
        /* .ul.main > li */
        #header_nav ul.main > li{
            position:relative;
            padding:0;
            margin:0;
            flex-grow: 1;
            /* メニュー幅を等分する場合
            flex:1; */
        }    
        #header_nav ul.main > li:first-child:before,
        #header_nav ul.main > li:after{
            display: inline-block;
            width:1px;
            height:24px;
            background: var(--font-color);
            content:' ';
            position: absolute;
            top:calc(1.4rem - 12px);
        }
        #header_nav ul.main > li:first-child:before{
            left:0;
        }
        #header_nav ul.main > li:after{
            right:0;
        }
            /* label */
            #header_nav ul.main label{
                display: flex;
                justify-content: center;
                align-items: center;
                padding:5px 8px!important;
                height:2.8rem;
                line-height: 1.2;
                margin: 0;
            }
            #header_nav ul.main label:after{
                margin:-1px 0 0 8px;
            }
            /* 第二階層 ul */
            #header_nav ul.main ul{
                position: absolute;
                min-width:100%;
                margin: 0;
                white-space: nowrap;
            }
            #header_nav ul.main :checked ~ ul{
                box-shadow: 4px 4px 15px -6px  #333;
                border-left:solid 1px #4a4a4a;
                border-right:solid 1px #4a4a4a;
                border-bottom:solid 1px #4a4a4a;
            }
                #header_nav ul.main ul a{
                    padding:12px 40px 15px 10px;
                    border-bottom:solid 1px #999;
                }
                #header_nav ul.main ul li:last-child a{
                    border-bottom: none;
                }
                #header_nav ul.main ul a:before{
                    right:10px;
                    margin-top:3px;
                }

    /* header nav -> .snav
    ----------------------------------------*/
    #header_nav .snav{
        position: absolute;
        top:0;
        width:100%;
        padding:0;
    }
    #header_nav .snav .container{
        display: flex;
        justify-content: flex-end;
        align-items:center;
        gap: 17px;
        height:0;
        overflow: visible;
    }

    /* .snav -> ul.sub */
    #header_nav .snav ul.sub{
        display:inline-flex;
        gap:17px;
        margin:calc(var(--site-header-top-padding) + var(--snav-top-padding) + 12px) 0 0;
        padding-left:calc(var(--contents-side-space) + 240px);
        height:calc(2em + 10px);
        overflow: visible;

    }
        #header_nav ul.sub > li{
            border-radius: 1.5em 1.5em 0 0;
            background: #fff;
            padding-bottom:10px;
            position: relative;
        }
            /* label */
            #header_nav ul.sub label{
                line-height: 1;
                padding:0.5em 1em !important;
                border-radius: 1.5em;
                white-space: nowrap;
            }
            #header_nav ul.sub label:after{
                margin:1px 0 0 6px;
            }
            /* 第二階層 */
            #header_nav ul.sub ul{
                position:absolute;
                white-space: nowrap;
                z-index:1000;
            }
            #header_nav ul.sub :checked ~ ul{
                margin-top:-3px;
            }
                #header_nav ul.sub ul li{
                    padding:0 8px;
                    border-left:solid 1px #4a4a4a;
                    border-right:solid 1px #4a4a4a;    
                }
                #header_nav ul.sub ul li:first-child{
                    padding-top:10px;
                    border-radius: 6px 6px 0 0;
                    margin-top:10px;
                    position: relative;
                }
                #header_nav ul.sub ul li:first-child:before{
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid rgba(49, 50, 51, 0.95);
                    border-left: 10px solid transparent;
                    display:block;
                    width:0;
                    height: 0;
                    content:' ';
                    position: absolute;
                    top:-10px;
                    left:40px;
                }
                #header_nav ul.sub ul li:last-child{
                    padding-bottom:10px;
                    border-radius:0 0 6px 6px;
                    border-bottom:solid 1px #4a4a4a;
                }
                    #header_nav ul.sub ul li a{
                        padding:15px 60px 15px 15px;
                    }
                    #header_nav ul ul a:before{
                        right:15px;
                    }


    /* .snav -> ul.contact */
    #header_nav ul.contact{
        margin:calc(var(--site-header-top-padding) + var(--snav-top-padding) ) 0 0;
    }
    #header_nav ul.contact li{
        display:flex;
        align-items: center;
    }
    #header_nav ul.contact a{
        display: inline;
        width:auto;
        background: none;
        border-radius: 0;
        padding: 0;
        border:none;
        font-size: 11px;
        line-height: 11px;
    }
    #header_nav ul.contact a:before{
        display:block;
        width:100%;
        height:auto;
        border-radius: 0;
        margin-right:0;
        padding-top:0;
        font-size: 1.9rem;
        line-height: 26px;
        font-variation-settings:'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 12;
    }

    /* .snav -> form.search */
    #header_nav form{
        margin:calc(var(--site-header-top-padding) + var(--snav-top-padding) ) 0 0; 
        width:240px;
    }
        #header_nav form.search .search_wrapper{
            font-size:0.83rem;
        }
            #header_nav form.search .search_wrapper:before{
                padding-top:2px;
            }
                #header_nav form.search input[type="search"]{
                    height:32px;
                }
    
    /*
    =====================================

        MAIN

    ===================================== */
    /*-----------------------------------
        TOP page
    ------------------------------------*/
    main.toppage{
        font-size:16px;
    }
    /* TOP ::: contents wrapper 1st
    ------------------------------- */
    #top_first_wrapper{
        padding-top:90px;
        padding-bottom:164px;
        background-size:1400px auto;
    }
    
    /* TOP : introduction */
    #top_lead{
        margin-bottom:85px;
        h2{
            font-size:40px;
            margin-bottom:0.8em;
            letter-spacing:0.05em;
        }
        p{
            font-size:20px;
            letter-spacing:0.025em;
        }
        .btn_wrapper{
            margin-top:40px;
        }
    }
    /* TOP : pickup */
    #top_selected_info{
        .swiper.pickup_swiper{
            margin-bottom:72px;
        }      
        li a:before{
            padding-top:150px;
        }
    }   
    /* TOP : 最新情報 */
    #top_latest_info{
        padding:37px 30px;
        h3{
            font-size:22px;
            padding-bottom:0.75em;
        }
        table{
            margin:0 -10px -10px;
        }
        tr{
            display:table-row;
            border-bottom:none;
        }
        td{
            vertical-align:top;
            padding:0 10px 10px;
        }
        tr > td:first-child, tr > td:nth-child(2){
            display:table-cell;
            white-space:nowrap;
            width:1%;
        }
        tr > td:nth-child(2){
            text-align:center;
        }
        .top_latest_list_link{
            top:40px;
        }
    }
    /* TOP : 新規参加団体 */
    #top_new_commer{
        margin-top:80px;
        li{
            width:208px;
        }
        .year{
            font-size:1.375em;
        }    
        br.sp{
            display:none;
        }    
    }
    /* TOP ::: contents wrapper 2nd
    ------------------------------- */    
    #top_2nd_wrapper{
        padding-bottom:120px;
    }
    /* TOP : メリット */
    #top_merit{
        top:-82px;
        li{
            height:164px;
            line-height:1.7;
        }
        a{
            font-size:18px;
        }
        a .tonic{
            font-size:28px;
        }
        a:after{
            width:55px;
            height:55px;    
        }
    }
    
    /* TOP : 数字で見る */
    #top_data{
        ul{
            gap:50px;
        }
        .num{
            font-size:70px;
            margin-top:15px;
        } 
        .unit{
            font-size:1.3125em;
        }   
    }
    /* TOP : 推奨 */
    #top_endorse{
        padding:60px 50px;
    }

    /*-----------------------------------
        2nd 共通
    ------------------------------------*/
    /* page header
    -----------------------*/
    #page_header{min-height:156px; padding:var(--contents-side-space);}

    /* contentn nav
    -----------------------*/
    /* page path */
    #page_path li > span.text,
    #page_path li > a{margin-left:0.2em; font-size:0.88rem;/* 16px相当 */}

    /* .content search */
    #content_nav .contents_search .target form{display:inline-block; width:auto; padding:0; margin: 0;}
        #content_nav .contents_search .target .search_wrapper{width:240px; font-size:0.83rem;}
        #content_nav .contents_search .target .search_wrapper:before{padding-top:2px;}
            #content_nav .contents_search input[type="search"]{height:32px;}
            .casestudy.archive #content_nav .contents_search input[type="search"]{padding-right:0.5em;}


    /* refine 
    -----------------------*/
    .refine_items{
        position:static;
        max-width:1200px; 
        margin-left:auto; 
        margin-right:auto;
    }
    /* filter */
    .refine_items .component#filter{
        padding:0;
    }
        .refine_items .component#filter .toggle_label_wrapper{
            display:none;
        }
        #filter .target{
            background:none; 
            border-radius:0;
            width:100%; 
            max-width:1200px; 
            height:auto; 
            max-height:1000px; 
            padding:.75em;
            position:static; 
            flex-direction:row;
            gap:5px;
        }
            #filter .target:before{
                content:'絞り込み検索';
                padding-right:10px;
            }
            #filter .target .title{
                display:none;
            }
            #filter .target .select_wrapper{
                width:22.5%; 
                max-width:22.5%; 
                margin:auto 0;
            }
            #filter .target input[type="submit"]{
                margin:auto 0;
            }
            #filter .target label.close{
                display:none;
            }
    /* sort order */
    .sort_order{border-bottom:solid 3px #a1a9ad; margin-bottom:var(--main-content-bottom-margin);}

    /*-----------------------------------
        members
    ------------------------------------*/
    .archive_list.members{
        justify-content:flex-start;
    }
    /* 個別ページ */
    .members.single .post_content > div{
        margin-bottom:35px
    }

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

        FOOTER

    =====================================
    */
    footer{
        position:relative;
        font-size:0.83rem;        
        > .container{
            display:flex;
            justify-content:space-between;
            position:relative;
            z-index:20;
        }
        .our_info{
            display:block;
            padding:55px 45px 55px 0;
            .logo{
                border-top:solid 5px #fff;
                padding-top:30px;
            }    
        }
        .fnav{
            display:block;
            padding:55px 0 55px 45px;
            flex-grow: 2;
            background: #768993;
            .main,
            .sub{
                display:flex;
            }
            .main{
                margin-bottom:3em;
            }
            .main > div,
            .sub > div{
                width:50%;
                flex-grow: 1;
            }
            ul{
                list-style:none;
                margin:0 0 2.25em;
                padding:0;
            }
            li:before{
                font-family:var(--icons-font-family);
                content:'arrow_forward_ios';
                vertical-align:middle;
            }
            h5{
                font-size:1.025em;
                font-weight:500;
                margin-bottom:0.5em;
            }            
        }
    }
    footer:after{
        display:block;
        width:50%;
        height:100%;
        position:absolute;
        right:0;
        top:0;
        content:'　';
        background: #768993;
        z-index:10;
    }
}/* /(min-widht:998px) */

@media (min-width: 998px) and (hover: hover) {
    /* hover対応メディア（PC）: クリックの動作を消してhoverで反応させる */
    #header_nav li input:checked ~ ul{ 
        max-height:0;
        opacity: 0;
    }
    #header_nav ul.main :checked ~ ul{
        box-shadow:none;
        border:none;
    }    
    #header_nav ul input:checked ~ label{
        background: #fff !important;
    }
    /* hover時 */
    #header_nav ul li:hover label{
        background: #d6e6e8 !important;
    }
    #header_nav ul.main > li:hover ul,
    #header_nav ul.sub > li:hover ul,
    #header_nav ul.main > li:hover input:checked ~ ul,
    #header_nav ul.sub > li:hover input:checked ~ ul{
        max-height:1000px !important;
        opacity: 1 !important;
    }
    #header_nav ul.main > li:hover ul{
        box-shadow: 4px 4px 15px -6px  #333;
        border-left:solid 1px #4a4a4a;
        border-right:solid 1px #4a4a4a;
        border-bottom:solid 1px #4a4a4a;
    }
    #header_nav ul.sub >li:hover ul li{
        /*box-shadow: 4px 4px 15px -6px  #333;*/
        border-left:solid 1px #4a4a4a;
        border-right:solid 1px #4a4a4a;    
    }
    #header_nav ul.sub >li:hover ul li:last-child{
        border-bottom:solid 1px #4a4a4a;
    }

    /*-----------------------------------
        latest 最新情報
    ------------------------------------*/
    /* 最新情報アーカイブページ 
    -----------------------------*/
    /* 最新情報メニュー */
    #latest_menu .content_menu_wrapper{
        font-size:14px;
    }
    #latest_menu h3{
        font-size:17px;
    }
    /* 最新情報一覧部分 */
    .latest.archive{
        .archive_list_wrapper.latest{
            gap:60px 30px;
            margin:0 auto;
        }
        .post{
            margin:0;
            max-width:300px;
            width:calc(33.33% - 20px);
            padding-bottom:12px;
            .date{
                font-size:15px;
                margin:1.25rem 14px 0.7rem;
                font-weight:400;
            }
            h3{
                font-size:17px;
                margin:0 14px 0.5rem;
                line-height:1.4;
                font-weight:500;
            }
            .latest_tags{
                margin:14px;
                height:24px;
            }
            .latest_cat,
            .latest_tags{
                font-size:14px;
                height:24px;
                line-height:22px;
            }
            .latest_cat{
                padding:0 30px;
                min-width:125px;
                text-align:center;
            }
        }
    }
    /*-----------------------------------
        casestudy 導入事例
    ------------------------------------*/
    /* 導入事例アーカイブページ 
    -----------------------------*/
    #cs_lead{
        font-size:16px;
    }
    .casestudy.archive .archive_list_wrapper{
        font-size:15px;
    }
    #cs_all_tags_wrapper h4{
        font-size:17px;
    }
    #cs_all_tags_wrapper.component.accordion{
        .toggle_wrapper{
            font-size:17px;
        }
    }
    .casestudy.archive .archive_title .filter_result br{
        display:none;
    }
    .casestudy.archive .post{
        .cs_data{
            width:calc(100% - 270px);            
        }
            .cs_data .cs_date{
                font-size:14px;
            }    
        .cs_thumb{
            width:250px;
        }    
    }
    /* 導入事例個別ページ 
    -----------------------------*/
    .casestudy.single .member_info,
    .casestudy.single .cs_content{
        gap:40px;
    }
    .casestudy.single .member_info .member_logo{
        width:300px;
    }
    .casestudy.single .cs_content .cs_imgs{
        width:300px;
        font-size:16px;
    }
    .casestudy.single .cs_imgs img{
        max-width:300px;
    }
    .casestudy.single .member_info .member_data,
    .casestudy.single .cs_content .cs_text{
        width:calc(100% - 340px);
    }

    /*-----------------------------------
    「サイト内検索」結果表示
    (index.php内のsearch部分)
    ------------------------------------*/
    .archive.serach_result{
        & .result{
            font-size:16px;
        }
        & .result .thumb{
            width:220px;
        }
        & .result .content{
            width:calc(100% - 240px);
        }
        & .result .post_type{
            font-size:13px;
        }
    }

    /*-----------------------------------
    参加団体専用ページ
    ------------------------------------*/
    main.mo{
        /* メールニュース
        -------------------------------------*/
        /* 一覧ページ */
        .mailnews_index_wrapper{
            display:flex;
            justify-content: space-between;

            #mailnews_nav{
                width:280px;
                padding:1.25rem 0 0;
                font-size:0.85rem;

                ul.archive_list{
                    border-bottom:solid 1px #8f9599;
                }

                ul.archive_list > li{
                    display:block;
                    margin-bottom:0;
                    padding:0 0 1.25rem;
                }
            }
            .mo_content_wrapper.index#mailnews{
                width:680px;

                a.link{
                    display:block;
                }
                p.date{
                    margin-bottom: 0.5rem;
                }
            }
        }
    }/* main.mo ends */

}

@media (min-width: 1200px) {
    /* bootstrapの"xl" */

}

@media (min-width: 1400px) {
    /* bootstrapの"xxl" */
    #top_first_wrapper{
        background-size:100% auto;
    }
}