@charset "utf-8";

/* ---------- #top header-img ---------- */
@media screen and (min-width: 980px) {
    #contents div.h1_basic02Wrap .short {
        height: 146px;
    }
}

@media screen and (min-width: 768px) {

    /* ---------- imgHero_btn ---------- */
    .csr-index-section {
        overflow: hidden;
        position: relative;
        margin-top: 50px;
    }

    .imgHero_btn_top {
        position: absolute;
        left: 6%;
        bottom: 18%;
    }

    .imgHero_btn_l {
        position: absolute;
        left: 3.4%;
        bottom: 10%;
    }

    .imgHero_btn_r {
        position: absolute;
        right: 3.4%;
        bottom: 10%;
        z-index: 99999;
    }

    a div.imgHero_btn {
        width: auto;
        padding: 13px 12px 13px 20px;
        border-radius: 30px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 14px;
        line-height: 1;
        z-index: 1;
        font-weight: 600 !important;
    }

    a div.imgHero_btn span {
        padding: 0;
        color: #333;
        line-height: 1;
        transition: all.3s ease;
    }

    a div.imgHero_btn span:nth-child(2) {
        padding: 0;
        margin-left: 15px;
        color: #999999;
        transition: all.3s ease;
    }

    a:hover div.imgHero_btn span {
        padding: 0;
        color: #f40004;
        text-decoration: none;
        line-height: 1;
    }

    a:hover div.imgHero_btn span:nth-child(2) {
        padding: 0;
        margin-left: 15px;
        color: #f40004;
        line-height: 1;
    }


    a:visited div.imgHero_btn span {
        padding: 0;
        color: #333;
        text-decoration: none;
        line-height: 1;
    }

    a:visited div.imgHero_btn span:nth-child(2) {
        padding: 0;
        margin-left: 15px;
        color: #999999;
    }



    /* ---------- #indexSec00 top_section_enviroment ---------- */
    #index_01 {
        width: 1160px;
        height: auto;
        position: relative;
        padding: 25px;
        box-sizing: border-box;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    #index_01>.top_section_enviroment {
        width: 1160px;
        height: 100%;
        display: block;
        position: absolute;
        overflow: hidden;
        box-sizing: border-box;
        padding: 25px;
        top: 0;
        left: 0;
    }

    #index_01>.top_section_enviroment a::after {
        width: 100%;
        height: 100%;
        display: block;
        top: 0;
        left: 0;
        position: absolute;
        content: "";
        background-image: url(/csr/images/top/top_section_enviroment.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: all 0.6s ease;
    }

    #index_01>.top_section_enviroment a:hover::after {
        transform: scale(1.1);
        opacity: 0.6;
    }

    /* ---------- #indexSec00 top_section_society ---------- */
    #index_02 {
        width: 1160px;
        height: auto;
        position: relative;
        padding: 25px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row-reverse;
        margin-top: 50px;
    }

    #index_02>.top_section_society {
        width: 1160px;
        height: 100%;
        display: block;
        position: absolute;
        overflow: hidden;
        box-sizing: border-box;
        padding: 25px;
        top: 0;
        left: 0;
    }

    #index_02>.top_section_society a::after {
        width: 100%;
        height: 100%;
        display: block;
        top: 0;
        left: 0;
        position: absolute;
        content: "";
        background-image: url(/csr/images/top/top_section_society.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: all 0.6s ease;
    }

    #index_02>.top_section_society a:hover::after {
        transform: scale(1.1);
        opacity: 0.6;
    }

    /* ---------- #indexSec03 top_section_governance ---------- */
    #index_03 {
        width: 1160px;
        height: auto;
        position: relative;
        padding: 25px;
        box-sizing: border-box;
        margin-top: 50px;
    }

    #index_03>.top_section_governance {
        width: 1160px;
        height: 100%;
        display: block;
        position: absolute;
        overflow: hidden;
        box-sizing: border-box;
        padding: 25px;
        top: 0;
        left: 0;
    }

    #index_03>.top_section_governance a::after {
        width: 100%;
        height: 100%;
        display: block;
        top: 0;
        left: 0;
        position: absolute;
        content: "";
        background-image: url(/csr/images/top/top_section_governance.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: all 0.6s ease;
    }

    #index_03>.top_section_governance a:hover::after {
        transform: scale(1.1);
        opacity: 0.6;
    }

    /* section left*/
    .text-block_l {
        width: 530px;
        height: auto;
        padding: 50px;
        background-color: #fff;
        box-sizing: border-box;
        z-index: 1;
        display: block;
        position: relative;
    }

    .text-block_l h3 {
        font-size: 26px;
        margin-bottom: 25px;
        line-height: 1;
        font-weight: 600 !important;
    }

    .text-block_l p {
        font-size: 14px;
        line-height: 30px;
        margin-bottom: 70px;
    }

    .text-block_l ul {
        margin: 0px;
        margin-bottom: -15px;
    }

    .text-block_l ul li {
        margin-right: 20px;
        padding-left: 15px;
        font-weight: 600 !important;
        position: relative;
        letter-spacing: normal;
        display: inline-block;
    }


    .text-block_l ul li a {
        transition: all.3s ease;
    }

    .text-block_l ul li a:hover {
        color: #f40004;
        text-decoration: none;
    }

    .text-block_l ul li a:visited {
        color: none;
        text-decoration: none;
    }

    .text-block_l ul li a:visited {
        color: none;
        text-decoration: none;
    }

    /* section right*/
    .text-block_r {
        width: 530px;
        height: auto;
        padding: 50px;
        background-color: #fff;
        box-sizing: border-box;
        z-index: 1;
        display: block;
        position: relative;
    }

    .text-block_r::after {
        clear: both;
    }

    .text-block_r h3 {
        font-size: 26px;
        margin-bottom: 25px;
        line-height: 1;
        font-weight: 600 !important;
    }

    .text-block_r p {
        font-size: 14px;
        line-height: 30px;
        margin-bottom: 70px;
    }

    .text-block_r ul {
        margin: 0px;
        margin-bottom: -15px;
    }

    .text-block_r ul li {
        margin-right: 20px;
        padding-left: 15px;
        font-weight: 600 !important;
        position: relative;
        letter-spacing: normal;
        display: inline-block;
    }


    .text-block_r ul li a {
        transition: all.3s ease;
    }

    .text-block_r ul li a:hover {
        color: #f40004;
        text-decoration: none;
    }

    .text-block_l ul li a:visited {
        color: none;
        text-decoration: none;
    }

    .text-block_r ul li:last-child::after {
        border-right: none;
    }


}


/* !tab
---------------------------------------------------------- */


/* 7月までメニュー項目3 */

@media screen and (min-width: 768px) {
    .tabmenu01Wrap {
        margin: 30px 0 0 0;
    }

    .tabmenu_csr {
        display: table;
        width: 100%;
        border-right: 1px solid #ccc;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        margin-bottom: 30px;
    }

    .tabmenu_csr>li {
        display: table-cell;
        min-height: 38px;
        border-left: 1px solid #ccc;
        /* --- 8月からメニュー項目4 
        width: 33.333%;　--- */
        width: 20%;

    }

    .tabmenu_csr>li a {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 6px 10px;
        background-color: #fff;
        color: #333;
        font-size: 114.28%;
        text-decoration: none;
        text-align: left;
        transition: all.3s ease;
    }

    .tabmenu_csr>li a:hover,
    .tabmenu_csr>li a:focus {
        color: #f40004;
        text-decoration: none;
    }

    .tabmenu_csr>li.current a {
        background-color: #f0f0f0;
    }

    .tabmenu_csr>li a img {
        padding: 6px 10px;
        text-align: center;
    }
}

@media screen and (min-width: 768px) {

    /* !topics
---------------------------------------------------------- */
    .indexSec03_bg {
        background-color: #f3f3f3;
        padding-bottom: 60px;
        min-width: 1160px;
    }

    .topics_block {
        width: 1160px;
        margin: 0 auto;
        text-align: left;
    }

    .h2_basic_wide_Wrap {
        margin-bottom: 30px;
        padding: 59px 0 9px;
        background: url(/common/images/bg_h2_border_wide.gif) no-repeat left bottom;
    }

    #indexSec03 .indexBox01Wrap>ul.col4 {
        margin-left: -20px;
    }

    #indexSec03 .indexBox01Wrap>ul.col4>li {
        width: calc(25% - 20px);
        margin-left: 20px;
        box-sizing: border-box;
    }

    .hr {
        border: solid 1px #cccccc;
    }

    .indexSec00.indexSec01_in {
        position: relative;
        width: 100%;
        max-width: 1536px;
        margin: 0 auto;
        transition: top .5s;
    }
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    .indexSec00.indexSec01_in {
        width: calc(100% - 10%);
    }
}

@media screen and (max-width: 767px) {
    .indexSec00.indexSec01_in {
        width: auto;
    }
}



/* !topics news thumbnail
---------------------------------------------------------- */

.topics_news_wrap {
    overflow: hidden;
    position: relative;
    max-width: 1160px;
    margin: 0;
}

.topics_news_thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    box-sizing: border-box;
}

@media screen and (min-width: 980px) {
    .news_thumbnail {
        width: calc(100% / 4 - 20px);
        margin-left: 20px;
        position: relative;
    }
}

.news_thumbnail div {
    height: 100%;
}

.news_thumbnail div a {
    position: relative;
    display: block;
    height: 100%;
    text-decoration: none;
    color: #000;
}

.news_thumbnail .txtBox {
    padding: 25px 0 50px 0;
    height: auto;
}

.news_thumbnail .txtBox p.txt {
    font-size: 14px;
    line-height: 1.65em;
    height: auto;
}

.news_thumbnail p.date {
    position: absolute;
    bottom: 4px;
    font-size: 12px;
    color: #999999;
}

.news_thumbnail p.category {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
    color: #ffffff;
    width: auto;
    height: auto;
    padding: 7px 10px;
    line-height: 1.3;
}

.bg_c_release {
    background-color: #0094f7;
}

.bg_c_blog {
    background-color: #574bc9;
}

.bg_c_update {
    background-color: #006f6f;
}

.bg_c_event {
    background-color: #dd34df;
}

.topics_news_thumbnails figure {
    position: relative;
    overflow: hidden;
}

.topics_news_thumbnails .news_thumbnail figure img {
    width: 100%;
    margin: 0;
    transition: all 0.6s ease;
}

.topics_news_thumbnails .news_thumbnail a:hover figure img {
    transform: scale(1.1);
    opacity: 0.6;
    text-decoration: underline;
}

.topics_news_thumbnails .news_thumbnail a:hover .txtBox {
    text-decoration: underline;
}

@media screen and (min-width: 980px) {
    .topicsTile01 .topicsCard01 a:hover .img::before {
        opacity: .2;
    }

    .topicsTile01 .topicsCard01 a:hover .txt {
        text-decoration: underline;
    }
}

@media screen and (max-width: 767px) {
    .topicsTile01 .topicsCard01 a .txtBox .tag {
        display: block;
        font-size: 12px;
    }

    .topicsTile01 .topicsCard01 a .txtBox .tag .category {
        width: 100%;
    }

    .topicsTile01 .topicsCard01 a .txtBox .tag .date {
        width: 100%;
        text-align: left;
    }

    .topicsTile01 .topicsCard01 a .txtBox .txt {
        font-size: 14px;
        line-height: 1.55;
    }
}

.topicsTile01 .topicsCard01>div {
    height: 100%;
}

.topicsTile01 .topicsCard01 a {
    position: relative;
    display: block;
    height: 100%;
    color: #000;
    text-decoration: none;
}

.topicsTile01 .topicsCard01 a .img {
    position: relative;
    background-image: url(/indexImage/ico_loader01.gif);
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    border-bottom: 1px solid #e6e6e6;
}

.topicsTile01 .topicsCard01 a .img::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    transition: .2s;
}

.topicsTile01 .topicsCard01 a .img img {
    width: 100%;
    transition: .2s;
}

#indexSec03 .indexBox01Wrap .col4 .indexBox01 {
    padding-top: 10px;
    padding-bottom: 10px;
}

#indexSec03 .indexBox01Wrap .col4 .indexBox01 .h3_arrow01 {
    display: table;
    background-position: left center;
    min-height: 30px;
}

#indexSec03 .indexBox01Wrap .col4 .indexBox01 .h3_arrow01 a {
    display: table-cell;
    vertical-align: middle;
}

#indexSec03 .indexBox01Wrap .col4 .indexBox01 .h3_arrow01 {
    min-height: 40px;
}

#main.col1 #indexSec03 .indexBox01Wrap>ul.col2>li {
    width: 100%;
    font-weight: 600 !important;
}

#indexSec03 .indexBox01Wrap>ul.col2>li .indexBox01 {
    border: none;
}

@media screen and (min-width: 768px) {
    .topicsTile01 .topicsCard01 a:hover .img img {
        transform: scale(1.05);
    }
}

.border01 {
    margin: 50px 0;
}

@media screen and (min-width: 768px) {
    .spOnly {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .spOnly {
        display: block;
    }

    .pcOnly {
        display: block;
    }
}