@charset "UTF-8";

/*********************************
更新内容：
1. SPヘッダーに「サステナビリティ」リンク追加
2.「最新情報」の配置をMVトップに移動
3. MVの高さ調整
*********************************/

/**********
 1. 「サステナビリティ」リンク追加
***********/

/***** 
 SP版
*****/
.sp_sdgs_btn{
    position: absolute;
    top: 45px;
}
.sp_sdgs_btn a{
    display: block;
    font-size: 12px;
    line-height: 1;
}
.sp_sdgs_btn a:hover{
    opacity: 0.7;
}

@media only screen and (max-width: 1180px) {
    .sp_sdgs_btn{
        right: 200px;
    }
}
@media only screen and (max-width: 640px) {
    .sp_sdgs_btn{
        right: 145px;
    }
}
@media only screen and (max-width: 420px) {
    .sp_sdgs_btn{
        top: 50px;
    }
    .sp_sdgs_btn a{
        font-size: 10px;
        letter-spacing: -0.1em;
    }
}

/*****
 PC版 
*****/
@media only screen and (min-width: 1181px) {
    .sp_sdgs_btn{display: none;}
}


/**********
 2. 「最新情報」 の配置移動
***********/

.recent_news{
    margin: 5px auto;
    width: 94%;
}
.recent_news dl:not(:last-of-type){margin-bottom: 8px;}
.recent_news .news_label{
    display: inline-block;
    margin-right: 8px;
}
.recent_news .cate_news{margin-bottom: 5px;}

@media only screen and (max-width: 690px) {
    #mainimage + #dcms_layoutPageBlockPasteArea {
        margin-top: 0;
    }
}

@media only screen and (min-width: 1181px) {
    .recent_news{
        display: flex;
        width: 100%;
        gap: 20px;
    }
    .recent_news h3{width: 10%;}
    .recent_news .recent_news_list{width: 90%;}
}


/**********
 3. MVの高さ調整
***********/

/*****
 PC版
*****/
.flexslider .slides > li {
    height: 520px;
}
#mainimage01 {background-position: center !important;}
#mainimage02 {background-position: center !important;}
#mainimage03 {background-position: center !important;}
#mainimage04 {background-position: top center !important;}

/*****
 SP版
*****/
@media only screen and (max-width: 1079px) {
    .flexslider .slides li {
        height: 44vw !important;
    }
    #mainimage01,
    #mainimage02,
    #mainimage03,
    #mainimage04{
        background-position: top center !important;
    }
}
@media only screen and (max-width: 690px) {
    .flexslider .slides li {
        height: 52vw !important;
    }
}