/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
   複数のページで利用するCSS
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */

/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    side_menu
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
.side_menu_wrap{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 300px;
    height: 100%;
    overflow-y: scroll;
    /*
    background-color: beige;
    */
}
#side_menu{
    padding: 10px 40px 30px;
    width: 300px;
    height: auto;
}
#side_menu .site_logo{
    /*
    width: 200px;
    */
    margin: 0 auto;
    width: 180px;
    height: auto;
}
#side_menu .site_logo h1{
    margin-top: 0px;
    margin-bottom: 10px;
}

#side_menu .side_menu_list_top{
    /*
    margin: 10px auto 10px;
    */
    margin: 0px auto 10px;
}
#side_menu .side_menu_list_top ul{
    list-style: none;
    margin: 0 auto;
    padding: 0;
}
/*
#side_menu .side_menu_list_top ul li{
}
*/
#side_menu .side_menu_list_top ul li {
    /*
    padding-top:  20px;
    padding-bottom: 10px;
    padding-left: 20px;
    */
    border-bottom: solid 2px #b4b4b4;
    font-size: 16px;
    line-height: 1em;
    font-weight: 400;
}
#side_menu .side_menu_list_top ul li a{
    /*
    padding-top:  20px;
    padding-top:   16px;
    */
    padding-top:   10px;
    padding-bottom: 10px;
    padding-left: 20px;

    display: inline-block;
    width: 100%;
    height: auto;
}
#side_menu .side_menu_list_top ul li .jp{
    color: #000;
    font-size: 18px;
    line-height: 1em;
    font-weight: 700;
}
#side_menu .side_menu_list_top ul li .en{
    color: #28a738;
}

#side_menu .side_menu_list_top ul li a:hover{
    background-color: #28a738;
}
#side_menu .side_menu_list_top ul li:hover .en,
#side_menu .side_menu_list_top ul li:hover .jp{
    color: #FFF;
}
#side_menu .side_menu_01_logo h2{
    margin-top: 10px;
    margin-bottom: 10px;
}
#side_menu .side_menu_01_logo a{
    display: inline-block;
}
#side_menu .side_menu_01_logo a img{
    width: 100%;
    height: auto;
}
/*
#side_menu .side_menu_01_logo a:hover{
    color: #FFF;
    background-color: #28a738;
}
*/

#side_menu .side_menu_list_bottom {
    margin: 0;
}
#side_menu .side_menu_list_bottom ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#side_menu .side_menu_list_bottom ul li:hover{
    color: #28a738;
}
/*  ==== レスポンシブ（1200以下） ==== ==== ==== */
@media screen and (max-width:1200px) {
    .side_menu_wrap{
        display: none;
    }
}


/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    page_wrap
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
.page_wrap{
    margin-left: 300px;
    width: calc(100% - 300px);
    height: auto;
}
.page_content_outer{
    margin-left: 0%;
    margin-right: auto;
    width: 100%;
}
.page_content{
    margin: 120 auto 60;
    width: 94%;
    max-width: 1400px;
}
.page_content.page_content_top{
    margin-top: 0px;
}
.page_content_inner{
    width: 100%;
}
/*  ==== レスポンシブ（1200以下） ==== ==== ==== */
@media screen and (max-width:1200px) {
    .page_wrap{
        margin-left: 0px;
        width: 100%;
        height: auto;
    }
    .page_content{
        width: 94%;
        max-width: 1400px;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width: 600px) {
    .page_content{
        margin: 60 auto 30;
    }
}


/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    緑のボタン
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
.active_button_wrap{
    width: 100%;
    height: auto;
    text-align: center;
}
.green_button{
    padding: 0.8em 1em;
    display: inline-block;
    text-align: center;
    width: 300px;
    background-color: #28a738;
    background-image: url('../img/common/deco_btn_fold_green.png');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: bottom 4px right 4px;
    font-size: 16px;
}
.green_button p{
    margin: 0 ;
    padding: 0;
    font-size: 1em;
    font-weight: 900;
    color: #FFF;
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    .green_button{
        width: 200px;
    }
}


/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    各コンテンツのタイトル
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
.content_title_wrap{
    margin: 30px auto;
    padding: 30px;
    border-top: solid 1px #b4b4b4;
    border-bottom: solid 1px #b4b4b4;
    width: 100%;
    height: auto;
    font-size:  44px;
}
.content_title_wrap p.title_en{
    margin: 0;
    font-size: 0.3em;
    line-height: 1.2em;
    font-weight: 500;
    color: #28a738;
}
.content_title_wrap  h2.title_jp{
    margin: 0;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 900;
}
/*  ==== レスポンシブ（1200以下） ==== ==== ==== */
@media screen and (max-width:1200px) {
    .content_title_wrap{
        padding: 20px;
        font-size: 40px;
    }
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    .content_title_wrap{
        padding: 20px;
        font-size: 30px;
    }
    .content_title_wrap p.title_en{
        font-size: 0.5em;
    }
}


/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    固定ページのトップビュー
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
/*  ==== #common_topview ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#common_topview{}

#common_topview .page_content{
    margin-top: 0;
    margin-bottom: 120px;
    width: 100%;
    max-width: 1600px;
    height: 400px;
    position: relative;
}
#common_topview .common_topview_img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#common_topview .common_topview_img.pc{
    display: inline-block;
}
#common_topview .common_topview_img.sp{
    display: none;
}
#common_topview .common_topview_text{
    padding: 20px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    background-color: #f4a100;
    color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
}
#common_topview .common_topview_text p{
    margin: 0;
    font-weight: 400;
    font-size: 0.6em;
}
#common_topview .common_topview_text h2{
    margin: 0;
    font-weight: 700;
    font-size: 1em;
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width: 600px) {
    #common_topview .page_content{
        margin-bottom: 60px;
        width: 100%;
        height: 200px;
    }

    .common_topview_img.pc{
        display: none;
    }
    .common_topview_img.sp{
        display: inline-block;
    }

    #common_topview .common_topview_text{
        padding: 10px;
        font-size:  26px;
    }
}


/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    会社概要テーブル ※トップページと会社概要ページで使用
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
/* common */
.company_tabel_wrap{
    margin: 30px auto;
    width: 100%;
    max-width: 1400px;
}
/* topページ用 */
#top_company .company_tabel_wrap{
    margin: 30px auto;
    width: 90%;
}
/* 会社概要ページ用 */
#company_tabel .company_tabel_wrap{
    margin: 0px auto;
    width: 100%;
}
.company_tabel_wrap table{
    border-collapse: collapse;
    width: 100%;
}
.company_tabel_wrap table tr{
    border-top: solid 1px #000;
}
.company_tabel_wrap table tr:last-child{
    border-bottom: solid 1px #000;
}
.company_tabel_wrap table th{
    width: 200px;
    background-color: #dcdcdc;
}
.company_tabel_wrap table td{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    width: calc(100% - 200px);
}
.company_tabel_wrap table .address{
    list-style: none;
    padding-left: 0;
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #top_company .company_tabel_wrap{
        width: 100%;
    }
    .company_tabel_wrap table tr,
    .company_tabel_wrap table th,
    .company_tabel_wrap table td{
        display: block;
        width: 100%;
    }
    .company_tabel_wrap table th,
    .company_tabel_wrap table td{
        padding: 20px;
        background-color: #FFF;
        text-align: left;
    }
    .company_tabel_wrap table th{
        padding-bottom: 10px;
    }
    .company_tabel_wrap table td{
        padding-top: 0px;
    }
}


/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    活動報告・投稿一覧
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
/*  ==== .activity_list_wrap ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
.activity_list_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.activity_content{
    margin-bottom: 30px;
    margin-bottom: 60px;
    width: calc((100% / 3) - 20px);
    height: auto;
}
/*  ==== レスポンシブ（800以上） ==== ==== ==== */
@media screen and (min-width:800px) {
    .activity_content{
        margin-right: 30px;
    }
    .activity_content:nth-child(3n){
        margin-right: 0px;
    }
}
.activity_thumbnail{
    padding-top: 20px;
    width: 100%;
    height: 300px;
    position: relative;
}
.activity_thumbnail_img{
    width: 100%;
    height: calc( 300px - 20px);
    object-fit: cover;
    object-position: center;
}
/*  ==== レスポンシブ（1601以上） ==== ==== ==== */
@media screen and (min-width:1601px) {
    .activity_thumbnail{
        padding-top: 20px;
        width: 100%;
        height: 420px;
        position: relative;
    }
    .activity_thumbnail_img{
        width: 100%;
        height: calc( 420px - 20px);
        object-fit: cover;
        object-position: center;
    }
}
.activity_sdgs_icon{
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 5%;
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.activity_sdgs_icon li{
    margin-right: 2%;
    /*
    width: 20%;
    */
    width: 30%;
    max-width: 100px;
    height: auto;
}
.activity_info{
    margin-top: 20px;
    /*
    font-size: 30px;
    */
    font-size: 26px;
}
.activity_date{
    margin: 0;
    color: #f4a100;
    font-size: 0.7em;
}
.activity_title{
    margin: 0;
    font-weight: 600;
    font-size: 1em;
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    .activity_content{
        margin-bottom: 30px;
        margin-right: 40px;
        width: calc((100% / 2) - 20px);
        height: auto;
    }
    .activity_content:nth-child(even){
        margin-right: 0%;
    }
    .activity_info{
        margin-top: 20px;
        font-size: 20px;
    }
    .activity_date{
        font-size: 0.75em;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    #top_activity{
        /*
        margin-top: 60px;
        margin-bottom: 30px;
        */
    }
    .activity_content{
        margin: 0%;
        margin-bottom: 60px;
        width: 100%;
        height: auto;
    }
    .activity_thumbnail{
        width: 100%;
        height: 400px;
    }
    .activity_thumbnail_img{
        width: 100%;
        height: 400px;
    }
}
/*  ==== レスポンシブ（400以下） ==== ==== ==== */
@media screen and (max-width:400px) {
    .activity_content{
        margin-bottom: 60px;
    }
    .activity_thumbnail{
        width: 100%;
        height: 360px;
    }
    .activity_thumbnail_img{
        width: 100%;
        height: 360px;
    }
}
/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    活動報告・投稿一覧、ページネーション
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
/*  ==== .pagination_wrap ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
.pagination_wrap{
    margin: 30px auto;
    max-width: 600px;
    text-align: center;
}
.pagination_wrap .page-numbers{
    display: inline-block;
    line-height: 40px;
    width: 40px;
}
.pagination_wrap .page-numbers.current{
    background-color: #ef9c00;
    color: #FFF;
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    .pagination_wrap .page-numbers{
        line-height: 30px;
        width: 30px;
    }
}


/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    #sub_sdgs_list 固定ページ下に表示する、SDGsの小リスト
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#sub_sdgs_list{
    margin: 0px auto;
    width: 100%;
    height: auto;
/*
    background-color: red;
*/
}

#sub_sdgs_list .sub_sdgs_title{
    margin: 30px auto 60px;
    width: 100%;
    height: auto;
    position: relative;
}
#sub_sdgs_list .sub_sdgs_title h3{
    background-color: #FFF;
    font-size: 32px;
}
#sub_sdgs_list .sub_sdgs_title hr{
    margin: 0;
    width: 100%;
    height: 1px;
    color: #000;
}
/*  ==== レスポンシブ（601以上） ==== ==== ==== */
@media screen and (min-width:601px) {
    #sub_sdgs_list .sub_sdgs_title h3{
        display: inline-block;
        margin: 0px;
        padding-right: 1em;
        background-color: #FFF;
        position: relative;
        z-index: 1;
        line-height: 1em;
    }
    #sub_sdgs_list .sub_sdgs_title hr{
        position: absolute;
        top: 50%;
        top: calc(50% - 1px);
        left: 0%;
        z-index: 0;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    #sub_sdgs_list .sub_sdgs_title{
        text-align: center;
    }
    #sub_sdgs_list .sub_sdgs_title h3{
        font-size: 22px;
    }
    #sub_sdgs_list .sub_sdgs_title hr{
        margin: 0 auto;
        width: 80%;
        max-width: 100px;
    }
}
/*  ==== レスポンシブ（350以下） ==== ==== ==== */
@media screen and (max-width: 350px) {
    #sub_sdgs_list .sub_sdgs_title h3{
        font-size: 6vw;
    }
}

/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    #single_page 投稿ページで使用するCSS
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#single_page{}


/*  ==== .single_title ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#single_wrap .single_title{
    margin: 0 auto;
    padding: 20px;
    border: solid 1px #000;
    width: 0 auto 30px;
    height: auto;

    font-size: 40px;
}
#single_wrap .single_title p{
    margin: 0;
    font-size:  0.4em;
}
#single_wrap .single_title h2{
    margin: 0;
    font-size: 1em;
}
#single_wrap h1{
    padding-bottom: 10px;
    border-bottom: solid 1.5px #c4c4c4;
    position: relative;
    color: #ef9c00;
}
#single_wrap h1::after{
    content: "";
    display: inline-block;
    width: 50%;
    max-width: 200px;
    height: 0;
    border-bottom: solid 1px red;
    padding-bottom: 10px;
    border-bottom: solid 1.5px #646464;
    position: absolute;
    bottom: -1.5px;
    left: 0;
}


/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #single_wrap .single_title{
        padding: 10px;
        font-size: 30px;
    }
    #single_wrap .single_title p{
        font-size:  0.6em;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    #single_wrap .single_title{
        font-size: 20px;
    }
}
/*  ==== レスポンシブ（400以下） ==== ==== ==== */
@media screen and (max-width:400px) {
    #single_wrap .single_title{
        font-size:  18px;
    }
}

/*  ==== single_sdgs_icon_wrap ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
.single_sdgs_icon_wrap{
    margin: 60px auto 30px;
    width: 100%;
    height: auto;
}
.single_sdgs_icon_text{
    margin: 0 auto;
    width: 100%;
    height: auto;
    text-align: center;
}
.single_sdgs_icon_text p{
    display: inline-block;

    padding-right: 1em;
    padding-left: 1em;
    border-left: solid 1px #000;
    border-right: solid 1px #000;

    line-height: 2em;
    font-size: 24px;
    font-weight: 600;
}
.single_sdgs_icon_wrap ul.single_sdgs_icon{
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.single_sdgs_icon_wrap .single_sdgs_icon li{
    margin-right: 10px;
    width: 100px;
    height: 100px;
    height: auto;
}
.single_sdgs_icon_wrap .single_sdgs_icon li:last-child{
    margin-right: 0px;
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    .single_sdgs_icon_text p{
        font-size: 18px;
    }
}
/*  ==== レスポンシブ（350以下） ==== ==== ==== */
@media screen and (max-width:350px) {
    .single_sdgs_icon_text p{
        font-size:  4vw;
    }
}
/*  ==== single_sdgs_icon_wrap ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
.single_activity_link{
    margin: 60px auto 0px;
    text-align: center;
}
.single_activity_link p{
    display: inline-block;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    width: 94%;
    max-width: 500px;
    height: auto;
    border: solid 1px #28a238;
    border-radius: 2em;
    font-size: 26px;
    color: #28a238;
}
#single_page #sub_sdgs_list .page_content{
    margin-top: 30px;
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    .single_activity_link p{
        font-size: 20px;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    .single_activity_link p{
        font-size: 16px;
    }
}



/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
   以下、各ページ固有のCSS
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */

/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    トップページ用
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
/*  ==== #top_view ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#top_view{

}
#top_view .page_content{
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 1600px;
    position: relative;
}
.top_view_pc.slick-slider{
    display: block;
}
.top_view_sp.slick-slider{
    display: none;
}
#top_view .page_content .topview_text{
    position: absolute;
    top: 0px;
    right: 50%;
    transform: translateX(50%);
    z-index: 1;
    width: 94%;
    max-width: 1400px;
    height: 100%;
    /*
    background-color: rgba(244, 161, 0, 68%);
    */
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
#top_view .page_content .topview_text h3{
    margin: 0;
    padding: 20px 10px;
    font-weight: 700;
    font-size: 30px;
    background-color: #FFF;
    display: inline-block;
}
#top_view .page_content .topview_text h3.text_01{
    position: absolute;
    top: 60px;
    right: 20px;
}
#top_view .page_content .topview_text h3.text_02{
    position: absolute;
    top: 160px;
    right: 90px;
}
#top_view .page_content .topview_text h3 .deco_green{
    color: #00973b;
}
#top_view .page_content .topview_text h3 .deco_yellow{
    color: #d7a600;
}
/*  ==== レスポンシブ（1800以下） ==== ==== ==== */
@media screen and (min-width:1800px) {
    #top_view .page_content .topview_text h3{
        font-size: 40px;
    }
    #top_view .page_content .topview_text h3.text_01{
        top: 60px;
        right: 20px;
    }
    #top_view .page_content .topview_text h3.text_02{
        top: 160px;
        right: 120px;
    }
}
/*  ==== レスポンシブ（1000以下） ==== ==== ==== */
@media screen and (max-width:1000px) {
    #top_view .page_content .topview_text h3{
        font-size: 20px;
    }
    #top_view .page_content .topview_text h3.text_01{
        top: 60px;
        right: 20px;
    }
    #top_view .page_content .topview_text h3.text_02{
        top: 140px;
        right: 80px;
    }
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #top_view .page_content .topview_text h3{
        font-size: 20px;
    }
    #top_view .page_content .topview_text h3.text_01{
        top: 20px;
        right: 20px;
    }
    #top_view .page_content .topview_text h3.text_02{
        top: 80px;
        right: 80px;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    .top_view_pc.slick-slider{
        display: none;
    }
    .top_view_sp.slick-slider{
        display: block;
    }
    #top_view .page_content .topview_text h3{
        font-size: 40px;
    }
    #top_view .page_content .topview_text h3.text_01{
        top: 60px;
        right: 20px;
    }
    #top_view .page_content .topview_text h3.text_02{
        top: 180px;
        right: 120px;
    }
}
/*  ==== レスポンシブ（400以下） ==== ==== ==== */
@media screen and (max-width:400px) {
    #top_view .page_content .topview_text h3{
        font-size: 26px;
    }
    #top_view .page_content .topview_text h3.text_01{
        top: 60px;
        right: 20px;
    }
    #top_view .page_content .topview_text h3.text_02{
        top: 160px;
        right: 90px;
    }
}


/*  ==== #top-declaration ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#top_declaration{
}
#top_declaration .page_content{
    margin-top: 60px;
    text-align: center;
}
#top_declaration .top_declaration_title{
    font-size: 48px;
    font-weight: 900;
}
#top_declaration .top_declaration_title .deco_orange{
    color: #f4a100;
}
#top_declaration .page_content p{
    font-size: 22px;
    font-weight: 500;
}

/*  ==== レスポンシブ（1300以下） ==== ==== ==== */
@media screen and (max-width:1300px) {
    #top_declaration .page_content p{
        font-size: 20px;
    }
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #top_declaration .page_content p{
        font-size: 18px;
    }
}

/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    #top_declaration .top_declaration_title{
        font-size: 40px;
    }
    #top_declaration .page_content p{
        font-size:  20px;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    #top_declaration .top_declaration_title{
        font-size:  8vw;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:400px) {
    #top_declaration .page_content p{
        font-size:  18px;
    }
}

/*  ==== #top-declaration ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#top_creating_a_society{

}
#top_creating_a_society .page_content{
    padding: 120px 3%;
    background-image: url('../img/top/creating_a_society_bgi_pc.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top 0% left 50%;
}
#top_creating_a_society .tcas_title{
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#top_creating_a_society .tcas_title h3{
    margin: 0 auto 20px;
    padding: 10px 1em;
    border-radius: 1em;

    display: inline-block;
    /*
    background-color: #FFF;
    color: #f4a100;
    */
    background-color: #f4a100;
    font-size: 38px;
    font-weight: 600;
    color: #FFF;
}
#top_creating_a_society .tcas_title h2.sp{
    display: none;
}
#top_creating_a_society .tcas_title h2{
    margin: 0 auto 10px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    display: inline-block;
/*
    background:linear-gradient(transparent 60%, rgba(244, 161, 0, 68%) 60%);
*/
    background-color: rgba( 40, 166, 56, 70%);
    font-size: 50px;
    font-weight: 600;
    color: #FFF;
}
#top_creating_a_society .tcas_title p{
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}
#top_creating_a_society .tcas_text{
    margin-bottom: 30px;
    width: 100%;
    height: auto;

    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 2em;
}
#top_creating_a_society .tcas_button{
    width: 100%;
    height: auto;
    text-align: center;
}

/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #top_creating_a_society .tcas_title h3{
        font-size: 20px;
    }
    #top_creating_a_society .tcas_title h2{
        font-size: 30px;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    #top_creating_a_society{
        background-image: url('../img/top/creating_a_society_bgi_pc.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top 0% left 50%;
    }
    #top_creating_a_society .page_content{
        padding: 60px 3%;
        background-image: none;
    }
    #top_creating_a_society .tcas_title{
        margin-bottom: 30px;
    }
    #top_creating_a_society .tcas_title h3{
        width: 100%;
        text-align: center;
        font-size: 20px;
    }
    #top_creating_a_society .tcas_title h2.pc{
        display: none;
    }
    #top_creating_a_society .tcas_title h2.sp{
        display: inline-block;
    }
    #top_creating_a_society .tcas_title h2{
        padding: 0;
        width: 100%;
        text-align: center;
        font-size: 34px;
    }
}
/*  ==== #top_active ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#top_active{
    /* 他のページとの共通化 */
}
/*  ==== #top_company ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#top_company .top_content_img{
    margin:  30px auto;
    width: 90%;
    max-width: 1400px;

    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#top_company .top_content_img img{
    width: calc((100% / 2) - 20px);
    height: auto;
}

#top_company .active_button_wrap{
    margin-top: 60px;
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    #top_company .top_content_img{
        margin: 30px auto;
        width: 100%;
        max-width: 1400px;
        flex-wrap: wrap;
    }
    #top_company .top_content_img img{
        margin-bottom: 30px;
        width: calc((100% / 1) - 0px);
        height: auto;
    }
}



/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    活動報告ページ
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#activity_page{}

/*  ==== #activity_message ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#activity_message{

}
#activity_message p{
    font-size: 22px;
    font-weight: 500;
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #activity_message p{
        font-size: 20px;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width: 600px) {
    #activity_message p{
        font-size: 16px;
    }
}
/*  ==== レスポンシブ（400以下） ==== ==== ==== */
@media screen and (max-width: 400px) {
    #activity_message p{
        font-size: 14px;
    }
}
/*  ==== #activity_list ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#activity_list{
    /* 他のページとの共通化 */
}


/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    会社概要ページ
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
/*  ==== #company_access ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#company_access{}

#company_access .company_access_map{
    width: 100%;
    height: auto;
}
#company_access .company_access_map iframe{
    width: 100%;
    height: 500px;
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    #company_access .company_access_map iframe{
        width: 100%;
        height: 400px;
    }
}


/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== 
    SDGsについて（about）
==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */

/*  ==== #about_mesage ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#about_mesage{}

#about_mesage .message_top h3{
    text-align: center;
    color: #f4a100;
    font-weight: 700;
    font-size: 32px;
}
#about_mesage .message_top p{
    text-align: center;
}
#about_mesage .message_middle{
    margin: 60px auto;
    text-align: center;
}
#about_mesage .message_sdgs{
    width: 94%;
    max-width: 1000px;
    height: auto;
}
#about_mesage .message_bottom{
    text-align: center;
}
/*  ==== レスポンシブ（1650以下） ==== ==== ==== */
@media screen and (max-width:1650px) {
    #about_mesage .message_top p{
        text-align: left;
    }
    #about_mesage .message_bottom{
        text-align: left;
    }
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #about_mesage .message_top h3{
        font-size: 24px;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    #about_mesage .message_middle{
        margin: 30px auto;
    }
    #about_mesage .message_sdgs{
        width:  100%;
        height: auto;
    }
}

/*  ==== #about_sdgs ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */
#about_sdgs{}


/*  ==== #about_sdgs .page_content ==== ==== ==== ==== ==== ==== ==== ==== */
#about_sdgs .page_content{
    /*
    background-color: blueviolet;
    */
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #about_sdgs .page_content{
        width: 100%;
    }
}

/*  ==== #about_sdgs ==== ==== ==== ==== ==== ==== ==== ==== */
#about_sdgs .about_sdgs_top_warp{
    background-image: url('../img/about/about_sdgs_top_bg_pc.png');
    background-size: cover;
    background-position: top 0, left 0;
    background-repeat: no-repeat;
}
#about_sdgs .about_sdgs_top_warp,
#about_sdgs .about_sdgs_list_wrap{
    margin: 0 auto;
    padding: 40px;
    width: 100%;
    height: auto;
}
#about_sdgs .about_sdgs_top_inner{
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;

    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#about_sdgs .about_sdgs_top_img{
    width: calc(50% - 30px);
}
#about_sdgs .about_sdgs_top_img p{
    margin: 0;
}
#about_sdgs .about_sdgs_top_mesage{
    width: calc(50% - 30px);
}
#about_sdgs .about_sdgs_top_img .about_sdgs_top_title,
#about_sdgs .about_sdgs_top_mesage .about_sdgs_top_title{
    margin: 0 auto 20px;
    padding: 0.6em 1em;
    text-align: center;
    background-color: #FFF;
}
#about_sdgs .about_sdgs_top_img .about_sdgs_top_title{
    display: none;
}
#about_sdgs .about_sdgs_top_mesage .about_sdgs_top_title{
    display:  block;
}
#about_sdgs .about_sdgs_top_mesage .about_sdgs_top_name{
    text-align: right;
}
#about_sdgs .about_sdgs_list_wrap{
    background-color: #ebebeb;
}
.about_sdgs_list_content{
    margin: 0 auto;
    padding: 40px;
    width: 100%;
    height: auto;
    background-color: #FFF;
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #about_sdgs .about_sdgs_top_warp{
        background-image: url('../img/about/about_sdgs_top_bg_sp.png');
    }
    #about_sdgs .about_sdgs_top_warp{
        padding: 20px 0;
    }
    #about_sdgs .about_sdgs_top_inner{
        margin: 0 auto;
        width:  94%;
    }
    #about_sdgs .about_sdgs_top_img{
        width: 100%;
    }
    #about_sdgs .about_sdgs_top_mesage{
        width: 100%;
    }
    #about_sdgs .about_sdgs_top_img .about_sdgs_top_title{
        display:  block;
    }
    #about_sdgs .about_sdgs_top_mesage .about_sdgs_top_title{
        display: none;
    }
    #about_sdgs .about_sdgs_top_mesage .about_sdgs_top_name{
        margin-top: 20px;
    }
}

/*  ==== .about_sdgs_list_wrap ==== ==== ==== ==== ==== ==== ==== ==== */
#about_sdgs .about_sdgs_list_wrap{
    margin: 0 auto;
    padding: 40px;
    width: 100%;
    height: auto;
}
#about_sdgs .about_sdgs_list_inner{
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}
.about_sdgs_list_content{
    margin: 0 auto;
    width: 100%;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.about_sdgs_list_content:not(:last-child){
    margin-bottom: 40px;
}
#about_sdgs .about_sdgs_list_content_img{
    width: calc( 35% - 20px);
}
#about_sdgs .about_sdgs_list_content_message{
    margin-right: 40px;
    width: calc( 65% - 20px);
}
#about_sdgs .about_sdgs_list_content_message h4{
    margin: 0;
    margin-bottom: 30px;
    color: #28a738;
    font-size: 24px;
    font-weight: 600;
}
.about_sdgs_list_content_message_img{
    display: none;
}
.about_sdgs_icon_list{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: auto;

    list-style: none;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.about_sdgs_icon_list li:not(img:last-child){
    margin-right: 10px;
}
.about_sdgs_icon_list img{
    /*
    width: 40px;
    */
    width: 90px;
    height: auto;
}
#about_sdgs .about_sdgs_top_mesage .about_sdgs_top_title{
    margin: 0 auto 20px;
    padding: 0.6em 0.8em;
    text-align: center;
    background-color: #FFF;
    font-size: 28px;
}

#about_sdgs .about_sdgs_list_content_link{
    padding: 10px;
    width: 100%;
    height: auto;
    background-color: #28a738;
    color: #FFF;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
    -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.about_sdgs_list_content_link_title{
    margin: 0;
}
#about_sdgs .about_sdgs_list_content_name{
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
    -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
#about_sdgs .about_sdgs_list_content_name p{
    margin: 0;
}
#about_sdgs .about_sdgs_list_content_name img{
    margin-left: 1em;
    width: 1em;
    height: 1em;
}
/*  ==== レスポンシブ（800以下） ==== ==== ==== */
@media screen and (max-width:800px) {
    #about_sdgs .about_sdgs_list_wrap{
        padding:  20px 0px;
        width: 100%;
        height: auto;
    }
    #about_sdgs .about_sdgs_list_inner{
        margin: 0 auto;
        width:  94%;
        max-width: 1000px;
    }
    .about_sdgs_list_content{
        padding: 20px;
    }
    .about_sdgs_list_content:not(:last-child){
        margin-bottom: 20px;
    }
    #about_sdgs .about_sdgs_list_content_img{
        margin: 0 auto;
        width: 100%;
        display: none;
    }
    #about_sdgs .about_sdgs_list_content_message h4{
        text-align: center;
    }
    .about_sdgs_list_content_message_img{
        margin: 30px auto;
        display: block;
        width: 100%;
        height: auto;
    }
    .about_sdgs_icon_list{
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .about_sdgs_icon_list img{
        width: 120px;
        height: auto;
    }
    #about_sdgs .about_sdgs_list_content_message{
        margin: 0 auto;
        width: 100%;
    }
}
/*  ==== レスポンシブ（600以下） ==== ==== ==== */
@media screen and (max-width:600px) {
    .about_sdgs_icon_list img{
        width: 60px;
        height: auto;
    }
}
/*  ==== レスポンシブ（ 350以下） ==== ==== ==== */
@media screen and (max-width: 350px) {
    .about_sdgs_icon_list img{
        width: 20vw;
        height: auto;
    }
}