@charset "UTF-8";

/*===========================
common
===========================*/

img{ width:100%; height:auto; }

.inner{ max-width:1180px; margin:0 auto; padding:0 20px; }

#siteHeader a,
.articleArea a{ text-decoration:none; color:#3dace0; }


/*---------- PC版 -----------------------------------------------*/
@media screen and (min-width: 769px){
    
    body{ min-width:1180px; line-height:1.4; }

    a:hover,
    a{
        -webkit-transition:0.2s ease-in-out;
        -moz-transition:0.2s ease-in-out;
        -o-transition:0.2s ease-in-out;
        transition:0.2s ease-in-out;
    }
    a:hover,
    a:hover img{ opacity:0.8; }

    /*  siteHeader
    ===========================*/
    #siteHeader{ margin:0 0 50px; background:url("../img/bg_01.jpg") no-repeat center 0 / auto auto; }
    #siteHeader .inner{ padding-top:32px; position:relative; }
    #siteHeader .diaLogo{ width:110px; margin:0 0 0 -10px; }
    #siteHeader .laboLogo{ width:395px; margin:-40px auto 12px; }
    #siteHeader .diaLogo a:hover,
    #siteHeader .diaLogo a:hover img,
    #siteHeader .laboLogo a:hover,
    #siteHeader .laboLogo a:hover img{ opacity:1; }
    #siteHeader .henshuchoLogo{ width:498px; margin:0 auto 20px; }
    #siteHeader .lead{ max-width:766px; margin:0 auto 35px; font-weight:bold; color:#ffffff; line-height:2; }
    #siteHeader .box{ width:100%; overflow:hidden; }
    #siteHeader .box .img{ width:51%; float:left; background:#ffffff; }
    #siteHeader .box .txtArea{ width:49%; min-height:250px; float:right; margin:60px 0 0; padding:48px 60px 0; background:#ffffff; box-sizing:border-box; }
    #siteHeader .box .txtArea .company{ margin:0 0 15px; font-size:24px; color:#3dace0; }
    #siteHeader .box .txtArea .tit{ margin:0 0 25px; font-size:32px; font-weight:bold; }
    #siteHeader .box .txtArea .day{ margin:0 0 25px; font-size:14px; color:#888888; }
    #siteHeader .box .txtArea .readBtn{ width:337px; margin:10px auto 0; }
    #siteHeader .box .txtArea .readBtn a{ display:block; padding:20px 0; text-align:center; background:#c8ff00; border-radius:50px; font-weight:bold; color:#000000; position:relative; }
    #siteHeader .box .txtArea .readBtn a::after{ width:55px; height:8px; content:""; display:block; background:url("../img/arrow.svg") no-repeat 0 0 / 100% auto; font-size:18px; position:absolute; top:25px; right:-30px; }
    #siteHeader .box .txtArea .readBtn a:hover::after{ right:-39px; }

    /*  articleArea
    ===========================*/
    .articleArea{ padding:0 0 100px; }
    .articleArea ul.articleList{ display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; }
    .articleArea ul.articleList li{ width:29.5%; margin:0 5.75% 90px 0; }
    .articleArea ul.articleList li:nth-child(3n){ margin-right:0; }
    .articleArea ul.articleList li figure{ margin:0 0 10px; }
    .articleArea ul.articleList li .company{ margin:0 0 10px; font-size:16px; color:#3dace0; }
    .articleArea ul.articleList li .tit{ margin:0 0 13px; font-size:22px; font-weight:bold; color:#000000; }
    .articleArea ul.articleList li .day{ font-size:14px; color:#888888; }
}
    .articleArea ul.articleList li .company.gray{ color: #d8d8d8;}



/*---------- SP版 -----------------------------------------------*/
@media screen and (max-width: 769px){
    
    body{ font-size:14px; line-height:1.3; }
    
    /*----- 共通フッター -----*/
    /*.list-style-vertical-var li.spBreak{ display:block; }
    .list-style-vertical-var li.spBreak::after{ display:none; }
    .list-style-vertical-var li.break::after { content: "|"; margin:0 10px; font-weight:normal; }*/
    .list-style-vertical-var{ max-width:400px; margin:0 auto; }
    .list-style-vertical-var li{ display:inline-block; }
    /*.list-style-vertical-var li.break{ display:; }*/
    .list-style-vertical-var li.break::after { content: "|"; margin:0 10px; font-weight:normal; }
    .list-style-vertical-var li:nth-child(3),
    .list-style-vertical-var li:last-child{ display:block; }
    .list-style-vertical-var li:nth-child(3)::after,
    .list-style-vertical-var li:nth-child(5)::after{ display:none; }
    
    /*  siteHeader
    ===========================*/
    #siteHeader{ margin:0 0 40px; padding:0 0 40px; background:url("../img/bg_01.jpg") no-repeat center 0 / auto 412px #f1f3f5; }
    #siteHeader .inner{ padding-top:16px; position:relative; }
    #siteHeader .diaLogo{ width:60px; margin:0 0 0 -10px; }
    #siteHeader .laboLogo{ width:200px; margin:-10px auto 0; }
    #siteHeader .henshuchoLogo{ width:285px; margin:0 auto 18px; }
    #siteHeader .lead{ max-width:766px; margin:0 auto 28px; font-weight:bold; color:#ffffff; line-height:2; }
    #siteHeader .box{ width:100%; }
    #siteHeader .box .img{ margin:0 0 13px; }
    #siteHeader .box .txtArea{ box-sizing:border-box; }
    #siteHeader .box .txtArea .company{ margin:0 0 8px; font-size:16px; font-weight:bold; color:#3dace0; }
    #siteHeader .box .txtArea .tit{ margin:0 0 10px; font-size:20px; font-weight:bold; }
    #siteHeader .box .txtArea .day{ margin:0 0 15px; font-size:10px; color:#888888; }
    #siteHeader .box .txtArea .readBtn{ width:275px; margin:10px auto 0; }
    #siteHeader .box .txtArea .readBtn a{ display:block; padding:17px 0; text-align:center; background:#c8ff00; border-radius:50px; font-weight:bold; color:#000000; position:relative; }
    #siteHeader .box .txtArea .readBtn a::after{ width:50px; height:7px; content:""; display:block; background:url("../img/arrow.svg") no-repeat 0 0 / 100% auto; font-size:18px; position:absolute; top:20px; right:-15px; }

    /*  articleArea
    ===========================*/
    .articleArea{ padding:0 0 50px; }
    .articleArea ul.articleList li{ margin:0 0 37px; }
    .articleArea ul.articleList li figure{ margin:0 0 10px; }
    .articleArea ul.articleList li .company{ margin:0 0 10px; font-size:16px; font-weight:bold; color:#3dace0; }
    .articleArea ul.articleList li .tit{ margin:0 0 13px; font-size:20px; font-weight:bold; color:#000000; }
    .articleArea ul.articleList li .day{ font-size:10px; color:#888888; }
    /*  site-footer
    ===========================*/
    #site-footer{ margin-bottom:0; }
}