:root{
  --black: #000000;
  --white: #ffffff;
  --main: #e60027;
  --main-dark: #ac011d;
  --gray: #737373;
  --gray-light: #f9f9f9;
  --gray-dark: #333333;
  --sus-01: #d9e59b;
  --sus-02: #f9d2cb;
  --sus-03: #9fdcd4;
  --sus-04: #bdcde7;
  --sus-05: #d1cfb2;
  --env-main: #51baae;
  --env-sub: #b9df52;
  --scl-main: #f781a1;
  --scl-sub: #fbb061;
  --gvn-main: #be91cb;
  --gvn-sub: #64a8df;
}
/* 
==============================
中央寄せ
============================== 
*/
body>#Contents .date,
body>#Contents .main_img,
body>#Contents .promoters_read,
body>#Contents .prom_box_01,
body>#Contents .prom_r_img,
body>#Contents .prom_l_img,
body>#Contents ul.promoters_pagenation, 
body>.where-not ul.promoters_pagenation,
body>#Contents .col2,
.c_img{
    max-width: 1275px;
    margin-inline: auto;
    left: 0;
    right: 0;
    position: relative;
    width: 100%;
}
/* 
==============================
common
============================== 
*/

.col2{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top:40px;
}
.col2 > div{
    width: 48%;
}
body>.where-not h4.img_title{
    font-size: 18px;
}
body > #Contents .hht-wrap sub{
    vertical-align: baseline;
}
/* 
==============================
ページタイトル
============================== 
*/
body > #Contents .hht-nc1-1-1{
    margin: 40px auto 24px;
}
body > #Contents .hht-nc1-1-1 h1{
    position: relative;
    display: block;
    padding: 0 0 16px 40px;
    font-size: 32px;
    line-height: 1.5;
    font-weight: bold;
    border-bottom: 1px solid #e60027;
}

body > #Contents .hht-nc1-1-1 h1::before{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 12px;
    height: 15px;
    content: "";
    background: #e60027;
    -webkit-transform: skew(-40deg) translate(0, -10px);
    transform: skew(-40deg) translate(0, -10px);
}



/* 
==============================
日付
============================== 
*/
body>#Contents .date{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    flex-wrap: wrap;
}
/* 
==============================
リード
============================== 
*/
.promoters_read{
    margin: 20px auto;
}
/* 
==============================
注力領域
============================== 
*/
.JS body,
body,
#Contents{
    background: unset;
}
.prom_tag{
    display: flex;
    align-items: center;
    font-weight: bold;
    position: relative;
    padding: 8px 20px;
    background: var(--sus-01);
    color: var(--gray-dark);
}
.prom_tag.tag_02{background: var(--sus-02);}
.prom_tag.tag_03{background: var(--sus-03);}
.prom_tag.tag_04{background: var(--sus-04);}
.prom_tag.tag_05{background: var(--sus-05);}

body > #Contents .hht-wrap .prom_tag::before{
    position: absolute;
    bottom: -1px;
    right: 9px;
    z-index: -1;
    transform: rotate(5deg);
    width: 70%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}
body > #Contents .hht-wrap .prom_tag img{
    width: 40px;
    background: var(--white);
    padding: 2px;
    border-radius: 50px;
    margin-right: 10px;
}
/* 
==============================
メイン画像
============================== 
*/
body > #Contents .main_img{
    max-width: 1145px;
    width: 90%;
}
.main_img figure,
.main_img-visual{
    position: relative;
}
.main_img figure p{
    position: absolute;
    bottom:30px;
    left: 30px;
    font-size: 32px;
    display: inline-block;
    background: #fff;
    padding: 10px 20px;
}
body>.where-not .main_img figure p,
body > #Contents .hht-wrap .main_img p{
    line-height: clamp(21px, 2.8vw, 41px);
}
.main_img figure p span{
    font-weight: bold;
    font-size: clamp(14px, 2.3vw, 28px);
}
.main_img figure p.lt{
    top:30px;
    left: 30px;
    bottom: auto;
}
.main_img figure p.rt{
    top:30px;
    right: 30px;
    left: auto;
    bottom: auto;
}
.main_img figure p.rb{
    bottom:30px;
    right: 30px;
    top: auto;
    left: auto;
}
.main_img figcaption,
figcaption{
    font-size: 14px;
    margin-top: 8px;
    font-weight: normal;
    color: #737373;
    line-height: 1.5em;
}
/* 
==============================
画像＋テキスト
============================== 
*/
body > #Contents .hht-wrap .prom_r_img h2,
body > #Contents .hht-wrap .prom_l_img h2,
body>.where-not .prom_r_img h2,
body>.where-not .prom_l_img h2{
    font-size: 24px;
    line-height: 1.583;
    margin: 24px auto 16px;
    margin-top: 48px;
    margin-bottom:20px;
}
.prom_r_img_img,
.prom_l_img_img{
    width: 40%;
}
.prom_r_img_img{
    float: right;
    margin: 0 0 40px 40px;
}
.prom_l_img_img{
    float: left;
    margin: 0 40px 40px 0;
}
.prom_r_img_img img+img,
.prom_l_img_img img+img{
    margin-top:20px;
}
.prom_r_img_txt p+p,
.prom_l_img_txt p+p{
    margin-top:20px;
}
body>.where-not .prom_r_img::after,
body>.where-not .prom_l_img::after{
    content: "";
    clear: both;
    display: block;
}
/* 
==============================
囲み
============================== 
*/
.prom_box_01{
    padding: 40px 4%;
    margin: 60px auto;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.1);
}
.prom_box_01::before{
    content: "";
    width: 91%;
    height: 5px;
    background: #e60027;
    position: absolute;
    top:0;
    left:0;
    right: 0;
    margin-inline: auto;
}
body>.where-not [class^=hht-] .prom_box_01 h3{
    color: #e60027;
}
.prom_box_01_inn{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.prom_box_01_txt{
    width: 55%;
}
.prom_box_01_img{
    width: 40%;
}
.c_img{
    margin-top:40px;
}
/* 
==============================
注釈
============================== 
*/
body > #Contents .hht-wrap sup {
    margin: 0 0.25em 0 0;
    font-weight: inherit;
    vertical-align: baseline;
    font-size: 10px;
    letter-spacing: 0;
    position: relative;
    line-height: 0;
}
body>#Contents .hht-nc3-1-1 p sup,
body>.where-not .hht-nc3-1-1 p sup,
body > #Contents .hht-wrap sup{
    /* color:#e60027; */
    font-style:unset;
}


/* 
==============================
線・マージン調整
============================== 
*/
body > #Contents .hht-nc2-5-1-1 p{
    border-top: none;
    padding-top: 0;
}
body > #Contents .hht-nc2-5-1-1 {
    margin: 0px auto 16px;
}
/* 
==============================
ページネーション
============================== 
*/
body>#Contents ul.promoters_pagenation, 
body>.where-not ul.promoters_pagenation{
    background: #f9f9f9;
    display: flex;
    justify-content: space-between;
    padding: 60px 60px;
    border-radius: 10px;
    margin-top: 100px;
    align-items: center;
}
.promoters_pagenation li a{
    position: relative;
    display: inline-block;
}
.promoters_pagenation li:first-child a{
padding-left:20px;
}
.promoters_pagenation li:first-child a::before{
    content: "";
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 2px #e60027;
    border-right: solid 2px #e60027;
    transform: rotate(227deg);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
.promoters_pagenation li:nth-child(2) a{
    font-weight: bold;
    border-radius: 10px;
    padding: 14px 50px 12px 22px;
    background-color: #CC0000;
    color: #fff !important;
    transtion:.5s;
}
.promoters_pagenation li:nth-child(2) a::after{
    content: "";
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
}
.promoters_pagenation li:last-child a::after{
    content: "";
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 2px #e60027;
    border-right: solid 2px #e60027;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
body > #Contents .hht-wrap .promoters_pagenation li:nth-child(2) a:hover{
    text-decoration:none;
    background-color: #ac011d;
}
.promoters_pagenation li:last-child a{
    padding-right:20px;
}
body>.where-not a.no_link,
body>.where-not a.no_link{
    pointer-events: none;
    color: var(--gray) !important;
}
.promoters_pagenation li:first-child a.no_link::before,
.promoters_pagenation li:last-child a.no_link::after{
    border-top: solid 2px var(--gray);
    border-right: solid 2px var(--gray);
}
/* 
==============================
関連するサステナビリティ注力領域の記事
============================== 
*/
.page-article-list > div{
    width: 100%;
}
.page-article-list > div >p{
    width: 100%;
    text-align: center;
}
body > #Contents .promoters_pagenation + .hht-nc2-3-1-1 h4{
    text-align: center;
    font-size: 180%;
}
.new{
    position: relative;
}
.new::before{
    content: attr(data-new);
    position: absolute;
    top: 40px;
    left: 0px;
    padding: 5px 20px;
    font-weight: bold;
    background: var(--main);
    color: var(--white);
    z-index: 10;
}
.no_articl{
    width: 100%;
    text-align: center;
}
/* 
==============================
お問い合わせ　小さく
============================== 
*/
body > #Contents .hht-nc27-2-1__block1{
    padding: 38px 12.5px;
}
body>#Contents .hht-nc27-2-1__block2 img{
    height: 70px !important;
}
body > #Contents .hht-nc27-2-1__block3{
    margin-top: 8px;
}
body > #Contents .hht-nc27-2-1__block4{
    margin-top: 4px;
}
body > #Contents .hht-nc27-2-1__block3 > h2{
    font-size: 20px;
}
/* 
==============================
SNSアイコン調整
============================== 
*/
.snsX a::before,
.snsFacebook a::before,
.snsLinkedIn a::before {
    background-size: 50px !important;
}
.snsInstagram,
.snsYouTube,
.snsnote,
.socialmediaAccount{
    display:none !important;
}
.snsBtn a::before {
    margin-bottom:0px !important;
}
#snsBottom .snsBtn{
    margin:0 10px !important;
}
#snsBottom .snsBtn.snsLinkedIn {
    margin-right: 0;
}
#snsBottom{
    padding: 20px;
    border-radius: 10px;
    margin: 40px 0 !important;
}
/* 
=======================================================
PC版（↑♾️〜1308px↓まで）
======================================================= 
*/
@media screen and (min-width: 1308px) {
}
/* 
=======================================================
PC・TAB版（〜768px）
======================================================= 
*/
@media screen and (min-width: 768px) {
    body > #Contents .hht-nc1-1-1 h1::before{
    width: 20px;
    height: 27px;
    -webkit-transform: skew(-40deg) translate(1px, -15px);
    transform: skew(-40deg) translate(1px, -15px);
}
}
/* 
=======================================================
TAB版（1307〜768px）
======================================================= 
*/
@media screen and (min-width: 768px) and (max-width: 1307px) {

}
/* 
=======================================================
TAB・SP版（1307px↓以下）
======================================================= 
*/
@media screen and (max-width: 1307px) {
    body > #Contents .main_img{
        width: 100%;
    }
    .prom_box_01_inn{
        flex-direction: column-reverse;
    }
    .prom_box_01_img,
    .prom_box_01_txt{
        width: 100%;
    }
    .prom_box_01_txt{
        margin-top:20px;
    }
}
/* 
=======================================================
SP版（767px↓以下）
======================================================= 
*/
@media screen and (max-width: 767px) {
    body>#Contents ul.promoters_pagenation,
    body>.where-not ul.promoters_pagenation{
        padding:40px 20px;
    }
    .promoters_pagenation li:nth-child(2) {
        width:54%;
    }
    .prom_r_img_img,
    .prom_l_img_img{
        float: unset;
        margin: 0;
    }
    .prom_r_img_inn,
    .prom_l_img_inn{
        display: flex;
        flex-direction: column-reverse;
    }
    .prom_r_img_img,
    .prom_l_img_img {
        width: 100%;
        margin-top:20px;
    }
    .prom_r_img,
    .prom_l_img {
        margin-block:20px;
    }
    body > #Contents .hht-wrap .prom_r_img h2, 
    body > #Contents .hht-wrap .prom_l_img h2, 
    body>.where-not .prom_r_img h2, 
    body>.where-not .prom_l_img h2{
        font-size: 18px;
    }
    .prom_r_img_txt h2 + p,
    .prom_l_img_txt h2 + p{
        margin-top: 20px;
    }
    body > #Contents .hht-wrap .main_img figure p,
    body > #Contents .hht-wrap .main_img figure p.lt,
    body > #Contents .hht-wrap .main_img figure p.rt,
    body > #Contents .hht-wrap .main_img figure p.rb{
        position: relative;
        font-size: 18px;
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
        top:unset;
        right: unset;
        bottom:unset;
        left: unset;
    }
    .ymd,
    .prom_tag{
        width: 100%;
    }
    .ymd{
        margin-bottom:10px;
    }
    body>#Contents ul.promoters_pagenation li span,
    body>.where-not ul.promoters_pagenation li span{
        display: none;
    }
    .promoters_pagenation li:nth-child(2) {
        width: 80%;
    }
}
/* 
=======================================================
最小幅（290px↓以下）（以下固定）
======================================================= 
*/
@media screen and (max-width: 290px) {
}
/* 
=======================================================
プリント用
======================================================= 
*/
@media print {
}