/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
setting
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
:root {
    --padding20: 20px;
    --maxWidth: calc(1140px + (var(--padding20) * 2));
    --main-color: #0066cc;
    --font-size: 16px;

    /* color */
    --colorWhite: #fff;
    --colorBlack: #333;
    --colorGreen: #097A35;
    --colorRed: #C61501;
    --colorDarkBlue: #063C79;
    --colorBG: #EEF4F7;
    --colorBorder: #DDD;

    /* scroll */
    --sustainability-header-offset: 102px;

    /* gap */
    --gap-x: 20px;
    --gap-y: 20px;

    /* icon */
    --icon-arw: url("/hc/sustainability/common/img/icon-arw.svg");
    --icon-arw-l: url("/hc/sustainability/common/img/icon-arw-l.svg");
    --icon-arw-w: url("/hc/sustainability/common/img/icon-arw-w.svg");
    --icon-blank: url("/hc/sustainability/common/img/icon-blank.svg") no-repeat;
    --icon-pdf: url("/hc/sustainability/common/img/icon-pdf.svg") no-repeat;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
PC & Common
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* wrapper
-------------------------------------------------------------*/
#sustainability-wrapper {
    font-size: 10px;
}

#sustainability-body {
    color: var(--colorBlack, #333);
    /* font-size: clamp(14px, calc(14px + 0.7813vw - 6px), 16px); */
    font-size: 1.6rem;
    font-weight: 400;
    /* line-height: 175%; */
    line-height: 32px
}

#sustainability-body p {
    margin-top: 0;
}

#sustainability-body p::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-bottom: -0.375em
}

#sustainability-body p+p {
    margin-top: 1.2em;
}

/* contentsInner
-------------------------------------------------------------*/
.contentsInner {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 0 var(--padding20);
    box-sizing: border-box;
}

.contentsInner [class^="inner-lv"] {
    max-width: calc(var(--maxWidth) - (100px * var(--inner-level, 0)));
    margin: 0 auto;
    padding: 0;
}

.inner-lv1 {
    --inner-level: 1;
}

.inner-lv2 {
    --inner-level: 2;
}

.inner-lv3 {
    --inner-level: 3;
}

.inner-lv4 {
    --inner-level: 4;
}

.inner-lv5 {
    --inner-level: 5;
}

.inner-lv6 {
    --inner-level: 6;
}

.inner-lv7 {
    --inner-level: 7;
}

.inner-lv8 {
    --inner-level: 8;
}

.inner-lv9 {
    --inner-level: 9;
}

.inner-lv10 {
    --inner-level: 10;
}

.inner-lv5.bdr {
    border: 1px solid var(--colorBorder);
    margin-left: 0;
}

.inner-lv6.w560 {
    max-width: 560px;
}

.inner-lv5.w650 {
    max-width: 650px;
}

[class^="inner-lv"].mL0 {
    margin-left: 0;
}

/* figure
-------------------------------------------------------------*/
figure {
    margin: 25px 0;
}

figure>div {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    margin: clamp(24px, calc(24px + 6.25vw - 48px), 40px) 0 14px;
}

figure img {
    max-width: 100%;
    width: 100%;
}

figcaption {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    margin-top: 10px;
    text-align: center;
}

/* indext-ul
-------------------------------------------------------------*/
.indext-ul {
    margin: 0;
}

.indext-ul li {
    padding-left: 5.5em;
    text-indent: -5.5em;
}

/* img-scale
-------------------------------------------------------------*/
.img-scale figure,
.img-scale figure>span {
    display: block;
    border-radius: 6px;
    overflow: hidden;
}

.img-scale img {
    transition: all .3s ease;
    transform: scale(1.01);
    border-radius: 6px;
}

.img-scale:hover img {
    transform: scale(1.06);
}

/* link--arw
-------------------------------------------------------------*/
[class*="link--arw"] a,
a [class*="link--arw"],
[class*="link--arw"] a:not(:has(figure)),
[class*="link--arw"] a:has(figure) div {
    font-size: clamp(15px, calc(15px + 0.3906vw - 3px), 16px);
    display: inline-block;
    color: var(--colorBlack);
    transition: all .3s ease;
    box-sizing: border-box;
    text-decoration: none;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    position: relative;
    z-index: 1;
}

.textS[class*="link--arw"] a {
    font-size: 1.4rem !important;
}

a [class*="link--arw"]::after,
[class*="link--arw"] a:not(:has(figure))::after,
[class*="link--arw"] a:has(figure) div::after,
.newslist li a:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    margin-left: 12px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    background-image: var(--icon-arw);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all .3s ease;
}

a:hover:not([target="_blank"]) [class*="link--arw"]:not(.link--arw-ac)::after,
[class*="link--arw"]:not(.link--arw-ac) a:hover:not(:has(figure)):not([target="_blank"]):after,
[class*="link--arw"]:not(.link--arw-ac) a:hover:has(figure):not([target="_blank"]) div::after {
    margin-left: 16px;
}

.link--arw-noAnime a:hover::after {
    margin-left: 12px !important;
}

[class*="link--arw"] a:has(figure) div {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 0 0;
}

[class*="link--arw"] a:has(figure) div>span {
    width: calc((100% - 20px));
}

a:hover [class*="link--arw"],
[class*="link--arw"] a:not(:has(figure)):hover,
[class*="link--arw"] a:has(figure):hover div {
    color: var(--colorRed);
}

.link--arw li+li {
    margin-top: 14px;
}

.link--arw.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 26px;
}

.link--arw.row.backnumber li {
    margin-top: 0;
    flex: 1 1 calc((100% - 26px) / 2);
    border-bottom: var(--colorBorder) solid 1px;
    padding: 12px 0;
}


/* link--arw-l */
.link--arw-l a {
    font-size: 2.4rem !important;
    font-weight: 500 !important;
    line-height: 130% !important;
}

/* inline */
a.inline {
    color: var(--colorBlack);
    text-decoration: underline;
    transition: all .3s ease;
}

a:hover.inline {
    color: var(--colorRed);
}

/* blank */
a[target="_blank"] [class*="link--arw"]::after,
[class*="link--arw"] a:not(:has(figure))[target="_blank"]::after,
[class*="link--arw"] a:has(figure)[target="_blank"] div::after {
    width: 16px;
    height: 14px;
    background: var(--icon-blank);
    background-position: center;
}

/* pdf */
a[target="_blank"][href$=".pdf"] [class*="link--arw"]::after,
[class*="link--arw"] a[target="_blank"][href$=".pdf"]::after,
[class*="link--arw"] a:not(:has(figure))[target="_blank"][href$=".pdf"]::after,
[class*="link--arw"] a:has(figure)[target="_blank"][href$=".pdf"] div::after {
    width: 16px;
    height: 20px;
    background: var(--icon-pdf);
    background-position: center;
}

[class*="link--arw"] a:has(figure)[target="_blank"][href$=".pdf"] div::after,
[class*="link--arw"] a:has(figure)[target="_blank"][href$=".pdf"] div::after {
    margin-left: 2px;
}

/* ac-- */
.link--arw-ac {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 24px;
    /* gap: clamp(16px, calc(16px + 6.25vw - 48px), 32px) 24px; */
    position: relative;
    z-index: 1;
}


.link--arw-ac a::after {
    rotate: 90deg;
}

/* [id^="ac--"] {
    position: relative;
    padding-top: 80px;
    margin-top: -80px;
} */

/* [id^="ac--"] {
    scroll-margin-top: var(--sustainability-header-offset);
    position: relative;
}

[id^="ac--"]::before {
    content: "";
    display: block;
    height: var(--sustainability-header-offset);
    margin-top: calc(-1 * var(--sustainability-header-offset));
    visibility: hidden;
    pointer-events: none;
} */

/* policy */
[class*="link--arw"].policy li {
    border-top: 1px solid var(--colorBorder);
    padding-top: 12px;
    position: relative;
}

[class*="link--arw"].policy li a {
    font-size: clamp(18px, calc(18px + 3.125vw - 24px), 26px);
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
}

[class*="link--arw"].policy li a::after {
    width: 8px;
    height: 16px;
    background-image: var(--icon-arw-l);
    background-size: contain;
}

[class*="link--arw"].policy li+li {
    margin-top: 36px;
}

[class*="link--arw"].policy li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 1px;
    background-color: var(--colorDarkBlue);
}

/* link--arw-btn*/
[class*="link--arw-btn"] {
    margin-top: 20px;
}

[class*="link--arw-btn"] li {
    text-align: center;
}

[class*="link--arw-btn"] li+li {
    margin-top: 12px;
}

[class*="link--arw-btn"] a {
    font-weight: 500;
    padding: 10px 36px 10px 20px;
    box-sizing: border-box;
    line-height: 150% !important;
    border: 1px solid var(--colorBorder);
}

[class*="link--arw-btn"] a::after {
    margin-left: 0 !important;
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-50%) !important;
}

[class*="link--arw-btn"] a:hover {
    border-color: var(--colorRed);
}

/* color */
.link--arw-btn-green a {
    border-color: var(--colorGreen);
}

.link--arw-btn-red a {
    border-color: var(--colorRed);
}

.link--arw-btn-darkblue a {
    border-color: var(--colorDarkBlue);
}

.link--arw-btn-green a:hover {
    color: var(--colorGreen) !important;
}

.link--arw-btn-red a:hover {
    color: var(--colorRed) !important;
}

.link--arw-btn-darkblue a:hover {
    color: var(--colorDarkBlue) !important;
}

.link--arw-btn a.w560 {
    max-width: 560px;
    width: 100%;
    ;
}


/* pageTtl
-------------------------------------------------------------*/
#pageTtl {
    display: flex;
    align-items: center;
    height: clamp(120px, calc(120px + 19.5313vw - 150px), 170px);
    width: 100%;
    background-color: var(--colorBG, #eef4f7);
    margin-bottom: clamp(24px, calc(24px + 12.5vw - 96px), 56px);
}

#pageTtl [id^="pageTtl-block"] {
    width: 100%;
}

#pageTtl [id^="pageTtl-block"] h1 {
    font-size: clamp(28px, calc(28px + 4.6875vw - 36px), 40px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

/*color*/
#pageTtl #pageTtl-block-green h1 {
    color: var(--colorGreen);
}

#pageTtl #pageTtl-block-red h1 {
    color: var(--colorRed);
}

#pageTtl #pageTtl-block-darkblue h1 {
    color: var(--colorDarkBlue);
}

.four-themes #pageTtl,
.feature #pageTtl {
    text-align: left;
    background-image: url(/hc/sustainability/img/four-themes-pageTtl.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: clamp(161px, calc(161px + 54.2969vw - 417px), 300px);
}

.feature #pageTtl {
    background-image: url(/hc/sustainability/img/feature-pageTtl.jpg);
}

.four-themes #pageTtl [id^="pageTtl-block"] h1,
.feature #pageTtl [id^="pageTtl-block"] h1 {
    color: var(--colorWhite);
}

/* h2 
-------------------------------------------------------------*/
[class^="ttl-h2"] {
    font-size: clamp(24px, calc(24px + 2.3438vw - 18px), 30px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    padding-bottom: 20px;
    margin: clamp(56px, calc(56px + 6.25vw - 48px), 72px) 0 clamp(20px, calc(20px + 1.5625vw - 12px), 24px);
    position: relative;
}

[class^="ttl-h2"]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(80px, calc(80px + 15.625vw - 120px), 120px);
    height: 4px;
}

/*color*/
.ttl-h2-green::after {
    background-color: var(--colorGreen);
}

.ttl-h2-red::after {
    background-color: var(--colorRed);
}

.ttl-h2-darkblue::after {
    background-color: var(--colorDarkBlue);
}

/* h3  
-------------------------------------------------------------*/
[class^="ttl-h3"] {
    font-size: clamp(22px, calc(22px + 0.7813vw - 6px), 24px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin: clamp(40px, calc(40px + 3.9063vw - 30px), 50px) 0 clamp(20px, calc(20px + 1.5625vw - 12px), 24px);
    position: relative;
}

/*color*/
.ttl-h3-green {
    color: var(--colorGreen);
}

.ttl-h3-red {
    color: var(--colorRed);
}

.ttl-h3-darkblue {
    color: var(--colorDarkBlue);
}

/* h4   
-------------------------------------------------------------*/
.ttl-h4 {
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--colorBorder);
    margin: clamp(24px, calc(24px + 9.375vw - 72px), 48px) 0 clamp(20px, calc(20px + 0.3914vw - 0.0078px), 24px);
}

/* h5  
-------------------------------------------------------------*/
.ttl-h5,
[class^="bdr-box"] .ttl,
.color-box .ttl {
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin: clamp(28px, calc(28px + 4.6875vw - 36px), 40px) 0 12px;
}

/* table-default 
-------------------------------------------------------------*/
[class^="table-default"] {
    font-size: 1.6rem;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 175%;
    border-collapse: collapse;
    border: 1px solid var(--colorBorder);
    margin-bottom: 24px;
    width: 100%;
}

[class^="table-default"].textS {
    font-size: 1.4rem;
}

[class^="table-default"] caption,
.table-caption {
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    margin-bottom: 18px;
}

[class^="table-default"]:has(caption) {
    /* margin-top: clamp(24px, calc(24px + 15.625vw - 120px), 64px); */
    margin-top: clamp(24px, calc(24px + 3.125vw - 24px), 32px);
}

[class^="table-default"] thead th {
    vertical-align: middle;
    font-weight: 700;
    color: var(--colorBlack);
    border-bottom: 1px solid var(--colorBorder);
}

[class^="table-default"] th,
[class^="table-default"] td {
    vertical-align: middle;
    font-weight: 400;
    padding: 12px 16px;
    border-bottom: 1px solid var(--colorBorder);
    border-right: 1px solid var(--colorBorder);
    text-align: left;
}

[class^="table-default"] tbody th {
    font-weight: 700;
}

[class^="table-default"] tbody th,
[class^="table-default"] .ttl {
    font-weight: 700;
    background-color: var(--colorBG);
}

[class^="table-default"] .bg {
    background-color: var(--colorBG);
}

[class^="table-default"] .u-alignC th,
[class^="table-default"] .u-alignC td {
    text-align: center;
}

/* color */
.table-default-green thead th {
    color: var(--colorWhite);
    background-color: var(--colorGreen);
}

.table-default-red thead th {
    color: var(--colorWhite);
    background-color: var(--colorRed);
}

.table-default-darkblue thead th,
.table-default-darkblue tbody th.ttl {
    color: var(--colorWhite);
    background-color: var(--colorDarkBlue);
}

/*utility*/
[class^="table-default"] .bdrR {
    border-right: 1px solid var(--colorBorder);
}

[class^="table-default"] .bdrL {
    border-left: 1px solid var(--colorBorder);
}

[class^="table-default"] .bdrT {
    border-top: 1px solid var(--colorBorder);
}

[class^="table-default"] .bdrNoR {
    border-right: none;
}

[class^="table-default"] .bdrTbg {
    border-top: 2px solid var(--colorBG);
    position: relative;
    z-index: 1;
}

[class^="table-default"] .bdrLbg {
    border-left: 2px solid var(--colorBG);
    position: relative;
    z-index: 1;
}

/* numR */
[class^="table-default"] .numR td:not(.bg) {
    text-align: right;
}

/* table-default-normal */
.table-default-normal th,
.table-default-normal td {
    font-weight: 400 !important;
    background-color: transparent !important;
    padding: 6px 5px;
}

/* color-box
-------------------------------------------------------------*/
.color-box {
    border-radius: 8px;
    padding: clamp(24px, calc(24px + 0.7828vw - 0.0157px), 32px);
    box-sizing: border-box;
    background-color: var(--colorBG);
    margin: clamp(12px, calc(12px + 1.1742vw - 0.0235px), 24px) 0 clamp(24px, calc(24px + 0.7828vw - 0.0157px), 32px);
    ;
}

[class^="bdr-box"] .color-box {
    margin-bottom: 0;
}

.color-box .ttl {
    margin-top: 0;
}

.color-box>[class^="ttl-h2"] {
    margin-top: 0;
}


/* bdr-box 
-------------------------------------------------------------*/
[class^="bdr-box"] {
    border: 1px solid var(--colorBorder);
    border-radius: 8px;
    padding: clamp(24px, calc(24px + 0.7828vw - 0.0157px), 32px);
    box-sizing: border-box;
    margin: clamp(12px, calc(12px + 1.1742vw - 0.0235px), 24px) 0 clamp(16px, calc(16px + 3.125vw - 24px), 24px);
}

[class^="bdr-box"] .ttl {
    margin-top: 0;
}

[class^="bdr-box"] .ttl+[class^="list-circle"] {
    margin-top: 24px;
}

/* color */
.bdr-box-green {
    border-color: var(--colorGreen);
}

.bdr-box-red {
    border-color: var(--colorRed);
}

.bdr-box-darkblue {
    border-color: var(--colorDarkBlue);
}

/* list-circle
-------------------------------------------------------------*/
[class^="list-circle"] {
    margin-top: 0;
}

[class^="list-circle"]>li {
    padding-left: 0.7em;
    position: relative;
}

[class^="list-circle"]>li::before {
    content: "";
    background: #000;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    position: absolute;
    top: 0.9em;
    left: 0;
}

[class^="list-circle"]>li+li {
    margin-top: clamp(10px, calc(10px + 0.1957vw - 0.0039px), 12px);
}

/* color */
.list-circle-green>li::before {
    background: var(--colorGreen);
}

.list-circle-red>li::before {
    background: var(--colorRed);
}

.list-circle-darkblue>li::before {
    background: var(--colorDarkBlue);
}

/* list-colon
-------------------------------------------------------------*/
.list-colon>li {
    padding-left: 0.7em;
    position: relative;
}

.list-colon>li::before {
    content: ":";
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.6;
    color: var(--colorBlack);
}

/* list-num
-------------------------------------------------------------*/
.list-num {
    counter-reset: number;
    padding-left: .6em;
    list-style-type: none;
}

.list-num>li {
    padding-left: 1.4em;
    position: relative;
}

.list-num>li+li {
    margin-top: clamp(10px, calc(10px + 0.1957vw - 0.0039px), 12px);
}

.list-num>li::before {
    content: counter(number) ". ";
    counter-increment: number;
    color: var(--primaryColor);
    font-weight: 700;
    position: absolute;
    top: 0;
    left: -.6em;
}

/* list-note
-------------------------------------------------------------*/
.list-note {
    position: relative;
    padding-left: 45px;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
}

.list-note::before {
    content: "（注）";
    position: absolute;
    left: 0;
    top: .4em;
    width: 25px;
    font-size: 1.4rem;
    line-height: 1;
    display: inline-block;
    text-align: left;
    color: var(--colorBlack);
}

/* atn
--------------------------------------------------------------*/
/* setting　*/
.text-atn,
.text-atnNum {
    font-size: clamp(12px, calc(12px + 0.7813vw - 6px), 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    margin-top: 20px;
    ;
}

/* text-atn */
.text-atn:not(ul):not(ol),
.text-atn li {
    text-indent: -1.6em;
    margin-left: 1.6em;
}

.text-atn:not(ul):not(ol)::before,
.text-atn li::before {
    content: '※';
    margin-right: .6em;
    color: var(--colorBlack);
    font-weight: 500;
}

.text-atn+.text-atn {
    margin-top: 5px;
}

/* text-atnNum */
.text-atnNum {
    counter-reset: atn-counter;
}

.text-atnNum:not(ul):not(ol),
.text-atnNum li {
    position: relative;
    padding-left: 2.4em;
}

.text-atnNum:not(ul):not(ol)::before,
.text-atnNum li::before {
    display: inline-block;
    width: 2.4em;
    counter-increment: atn-counter;
    content: '※' counter(atn-counter);
    color: var(--primaryColor);
    position: absolute;
    top: 0;
    left: 0;
}

/* text-note */
[class*="text-note--"] {
    position: relative;
    padding-left: 2em;
}

[class*="text-note--"]::before {
    content: "注）";
    position: absolute;
    left: 0;
    color: var(--primaryColor);
}

/* text-unit */
.text-unit {
    text-align: right;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 14px;
    margin-bottom: 6px;
}

/* col-
--------------------------------------------------------------*/
/* [class^="col-"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-y) var(--gap-x);
    width: 100%;
    margin-top: 32px;
}

[class^="col-"] figure {
    margin: 0;
}

[class^="col-"]>* {
    display: block;
}

:is(.col-2, .col-3, .col-4)>* {
    width: calc((100% - var(--gap-x) * (var(--col-count) - 1)) / var(--col-count));
}

.col-2>* {
    --col-count: 2;
}

.col-3>* {
    --col-count: 3;
}

.col-4>* {
    --col-count: 4;
}*/

/* clm */
/* :is(.col-clm2-1 > *:nth-child(odd), .col-clm1-2 > *:nth-child(even)) {
    width: calc((100% - var(--gap-x) * 2) / 3 * 2 + var(--gap-x));
}

:is(.col--lm2-1 > *:nth-child(even), .col-clm1-2 > *:nth-child(odd)) {
    width: calc((100% - var(--gap-x) * 2) / 3);
}

:is(.col-clm3-1 > *:nth-child(odd), .col-clm1-3 > *:nth-child(even)) {
    width: calc((100% - var(--gap-x) * 3) / 4 * 3 + var(--gap-x) * 2);
}

:is(.col-clm3-1 > *:nth-child(even), .col-clm1-3 > *:nth-child(odd)) {
    width: calc((100% - var(--gap-x) * 3) / 4);
}

:is(.col-clm3-2 > *:nth-child(odd), .col-clm2-3 > *:nth-child(even)) {
    width: calc((100% - var(--gap-x) * 4) / 5 * 3 + var(--gap-x) * 2);
} */



/* grid
--------------------------------------------------------------*/
[class*="grid--"] {
    display: grid;
    width: 100%;
    gap: var(--gap-y, 20px) var(--gap-x, 20px);
    margin-top: 32px;
}

[class*="grid--"] figure,
[class*="grid--"] [class^="bdr-box"] {
    margin: 0;
}

.grid--col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--col-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--col-5 {
    grid-template-columns: repeat(5, 1fr);
}

:is(.grid--col-2-1, .grid--col-1-2) {
    grid-template-columns: repeat(3, 1fr);
}

.grid--col-2-1>*:nth-child(odd) {
    grid-column: span 2;
}

.grid--col-2-1>*:nth-child(even) {
    grid-column: span 1;
}

.grid--col-1-2>*:nth-child(odd) {
    grid-column: span 1;
}

.grid--col-1-2>*:nth-child(even) {
    grid-column: span 2;
}

:is(.grid--col-3-1, .grid--col-1-3) {
    grid-template-columns: repeat(4, 1fr);
}

.grid--col-3-1>*:nth-child(odd) {
    grid-column: span 3;
}

.grid--col-3-1>*:nth-child(even) {
    grid-column: span 1;
}

.grid--col-1-3>*:nth-child(odd) {
    grid-column: span 1;
}

.grid--col-1-3>*:nth-child(even) {
    grid-column: span 3;
}

:is(.grid--col-4-1, .grid--col-1-4) {
    grid-template-columns: repeat(5, 1fr);
}

.grid--col-4-1>*:nth-child(odd) {
    grid-column: span 4;
}

.grid--col-4-1>*:nth-child(even) {
    grid-column: span 1;
}

.grid--col-1-4>*:nth-child(odd) {
    grid-column: span 1;
}

.grid--col-1-4>*:nth-child(even) {
    grid-column: span 4;
}

:is(.grid--col-3-2, .grid--col-2-3) {
    grid-template-columns: repeat(5, 1fr);
}

.grid--col-3-2>*:nth-child(odd) {
    grid-column: span 3;
}

.grid--col-3-2>*:nth-child(even) {
    grid-column: span 2;
}

.grid--col-2-3>*:nth-child(odd) {
    grid-column: span 2;
}

.grid--col-2-3>*:nth-child(even) {
    grid-column: span 3;
}

.grid--col-2>figure>div {
    margin-top: 0;
}

.grid--col-1-3.end-line {
    align-items: end;
    gap: 26px;
}

.grid--col-1-3.end-line {
    grid-template-columns: 320px 1fr;
}

.grid--col-1-3.end-line>*:nth-child(odd),
.grid--col-1-3.end-line>*:nth-child(even) {
    grid-column: span 1;
}

.grid--col-1-3.end-line .textS {
    font-size: 1.6rem;
    line-height: 200%;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colorDarkBlue);
}

.grid--col-1-3.end-line .textS .textL {
    font-size: 2.4rem;
}

.grid--col-2.end {
    align-items: end;
    gap: 28px
}

.grid--col-2.line {
    gap: 28px;
}

.grid--col-2.line .link--arw {
    border-top: 1px solid var(--colorBorder);
}

.grid--col-2.line .link--arw li a {
    margin-top: 10px;
}

.grid--col-2.line .link--arw+.list-circle-darkblue {
    margin-top: 8px;
}

.grid--col-2.line .list-circle-darkblue+.link--arw {
    margin-top: 50px;
}

/* toggle
-------------------------------------------------------------*/
.toggle-set,
.ftr-subttl {
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.toggle-btn,
.ftr-subttl {
    font-size: 1.6rem;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
    border: 0;
    cursor: pointer;
    background-color: transparent;
}

.ftr-subttl {
    cursor: default;
}

.toggle-box {
    display: none;
    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.2s ease;
    padding: 0;
    box-sizing: border-box;
    opacity: 0;
}

.toggle-set.open .toggle-box {
    display: block;
    max-height: 600px;
    opacity: 1;
    padding: 0;
}

/* color */
.ftr-subttl {
    color: var(--colorBlack);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.48px;
    padding-top: 10px;
}

.toggle-btn.green-text {
    color: var(--colorGreen);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.48px;
}

.toggle-btn.red-text {
    color: var(--colorRed);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.48px;
}

.toggle-btn.darkblue-text {
    color: var(--colorDarkBlue);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.48px;
}

/* ftr-lin */
.grid--col-3:has(.toggle-wrapper) {
    margin-top: 16px;
}

.grid--col-3:has(.toggle-wrapper) .toggle-btn {
    pointer-events: none;
}

.grid--col-3:has(.toggle-wrapper) .toggle-box {
    display: block;
    max-height: 600px;
    opacity: 1;
    padding: 0;
}

/* sustainability-ftr-link 
-------------------------------------------------------------*/
#sustainability-ftr-link {
    background-color: var(--colorBG, #eef4f7);
    padding: clamp(32px, calc(32px + 5.4688vw - 42px), 46px) 0;
    box-sizing: border-box;
    margin: clamp(36px, calc(36px + 21.0938vw - 162px), 90px) 0 0;
}

#sustainability-ftr-link .hr {
    border-top: 1px solid var(--colorBorder);
    margin-top: clamp(32px, calc(32px + 10.9375vw - 84px), 60px);
}

#sustainability-ftr-link .link--arw li+li {
    margin-top: 0;
}

#sustainability-ftr-link .link--arw li+li {
    margin-top: 14px;
}

#sustainability-ftr-link ul.link--arw {
    row-gap: 14px;
}

/* news-list
-------------------------------------------------------------*/
.news-list li {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--colorBorder);
}

.news-list .date {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 214px;
}

.news-list .date time {
    font-size: 15px;
}

.news-list .date span {
    display: inline-block;
    font-size: 13px;
    padding: 1px 18px;
    border-radius: 100px;
}

.news-list [data-category="environment"] {
    color: var(--colorGreen);
    border: 1px solid var(--colorGreen);
}

.news-list [data-category="social"] {
    color: var(--colorRed);
    border: 1px solid var(--colorRed);
}

.news-list [data-category="news"] {
    color: var(--colorDarkBlue);
    border: 1px solid var(--colorDarkBlue);
}

.news-list a {
    font-weight: 400;
    line-height: 160%;
    transition: all .3s ease;
    text-decoration: none;
    color: var(--colorBlack);
    width: calc((100% - 214px - 24px));
}

.news-list a:hover {
    color: var(--colorRed);
}

.newslist {
    border-top: 1px solid #E2E2E2;
}

.newslist li {
    width: 100%;
    border-bottom: 1px solid #E2E2E2;
}

.newslist li a {
    padding: 17px 30px 17px 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    text-decoration: none;
}

.newslist li a:before {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.newslist a>span {
    line-height: 1.6;
    vertical-align: middle;
}

.newslist .date {
    white-space: nowrap;
    width: 140px;
    font-size: 1.6rem;
    font-family: 'Roboto Condensed', sans-serif;
    color: #333;
}

.newslist .label {
    width: 100px;
    margin: 0 30px 0 0;
    text-align: center;
}

.newslist .label span {
    width: 100px;
    padding: 2px 0 1px;
    display: inline-block;
    color: #FFF;
    font-size: 1.3rem;
    border-radius: 20px;
}

.newslist .label .labelEnv {
    background: #009852;
}

.newslist .label .labelSocial {
    background: #00418F;
}

.newslist .label .labelNews {
    background: #E63721;
}

.newslist .ttl {
    width: 840px;
}

main .newsArea .btnArea {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
}

main .newsArea .basicBtn {
    width: 224px;
    height: 45px;
    line-height: 43px;
}

/*IE*/
@media all and (-ms-high-contrast:none) {
    .newslist .label span {
        padding: 1px 0;
    }
}

@media only screen and (max-width: 768px) {
    main .newsArea {
        padding: 50px 0 60px;
    }

    main .newsArea .inner {
        width: 90%;
    }

    .pgCsr .typeSide {
        margin: 0 0 30px;
        font-size: 2.8rem;
    }

    .newslist li a {
        padding: 17px 30px 17px 0;
        display: block;
    }

    .newslist .date {
        width: 120px;
        display: inline-block;
    }

    .newslist .label {
        margin: 0;
        font-size: 1.3rem;
        display: inline-block;
    }

    .newslist .ttl {
        width: 100%;
        margin: 10px 0 0 0;
        font-size: 1.5rem;
        display: block;
        line-height: 1.4;
        color: #666262;
    }

    main .newsArea .btnArea {
        margin: 40px auto 0;
        position: static;
        display: block;
        text-align: center;
    }

    main .newsArea .btnArea a {
        width: 90%;
        height: 60px;
        margin: 0 auto;
        line-height: 60px;
    }
}

/* message-profile-box
-------------------------------------------------------------*/
.message-profile-box {
    display: flex;
    flex-direction: row-reverse;
    max-height: 374px;
}

.message-profile-box picture {
    display: block;
    width: 100%;
    height: 100%;
}

.message-profile-box img {
    width: 100%;
}

.message-profile-box .message-text-box {
    background-color: var(--colorDarkBlue);
    color: var(--colorWhite);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    width: 60.85%;
}

.message-profile-box .message-img-box {
    width: 39.15%;
}

.message-profile-box .message-text-box h2 {
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    margin-bottom: 44px;
}

.message-profile-box .message-text-box .message-profile {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    max-width: 310px;
    margin-left: auto;
}

.message-profile-box .message-text-box .message-profile .message-name {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 175%;
    margin-top: 16px !important;
}

/* four-themes */
.four-themes .ttl-h3-darkblue {
    display: flex;
    align-items: center;
}

.four-themes span {
    display: block;
}

.four-themes span:first-child {
    margin-right: 10px;
}

.four-themes .tag {
    border: 1px solid var(--colorBlack);
    padding: 6px 10px;
    width: 130px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 100%;
    margin: 0 5px;
}

.four-themes .tag.green {
    border-color: var(--colorGreen);
    color: var(--colorGreen);
}

.four-themes .tag.red {
    border-color: var(--colorRed);
    color: var(--colorRed);
}

.four-themes .tag.darkblue {
    border-color: var(--colorDarkBlue);
    color: var(--colorDarkBlue);
}

.four-themes .sdgs-ttl {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 175%;
    margin-bottom: 16px;
    padding-bottom: 2px;
    border-bottom: 1px solid #B3C6DE;
}

.four-themes .sdgs-box img {
    width: revert-layer;
    max-width: inherit;
}

.four-themes .vision-box {
    padding: 28px;
    text-align: center;
}

.four-themes .vision-box h3 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    color: var(--colorDarkBlue);
    margin-bottom: 12px;
}

.four-themes .vision-box .catch {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 16px;
}

.four-themes .vision-box .lead {
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
    padding-bottom: 30px;
    margin-bottom: 28px;
    border-bottom: 1px solid #626262;
}

.four-themes .vision-box figure>div {
    color: var(--colorDarkBlue);
}

/* feature
-------------------------------------------------------------*/
.feature .textXL {
    font-size: clamp(20px, 3.125vw - 4px, 28px);
    font-weight: 700;
    margin-top: 5px !important;
}

.feature-task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.feature-task-list li {
    text-align: center;
    padding: 12px 8px;
    font-weight: 600;
    line-height: 1.4;
    background: #EAF1FA;
}

.feature-task-list li.sizeL {
    grid-column: span 2;
}

.feature-task-ttl {
    color: #00418F;
    text-align: center;
    line-height: 1.6;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 60px auto 1em;
}

.feature-groupPower {
    margin: 60px 0;
    background: url(/hc/csr/img/feature/grouppower_bg.png) no-repeat center top;
    background-size: 100% 300px;
}

.feature-groupPower .catch {
    margin: 0 0 30px;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

.feature-groupPower .catch span {
    font-size: 2.9rem;
    color: #E6783B;
}

.feature-groupPower .inner {
    padding: 30px 0 0 0;
    text-align: center;
    position: relative;
}

.feature-groupPower .inner dl {
    width: 240px;
    margin: 0 40px;
    display: inline-block;
    vertical-align: top;
}

.feature-groupPower .inner dt {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    font-size: 2rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border-radius: 50%;
}

.feature-groupPower .inner .cooperation {
    margin: -80px auto 0;
}

.feature-groupPower .inner .cooperation dt {
    color: #00418F;
    border: 6px solid #00418F;
}

.feature-groupPower .inner .eyes dt {
    color: #E63721;
    border: 6px solid #E63721;
}

.feature-groupPower .inner .knowhow {
    margin: -80px auto 0;
}

.feature-groupPower .inner .knowhow dt {
    color: #009852;
    border: 6px solid #009852;
}

.feature-groupPower .inner dd {
    text-align: left;
    font-size: 1.4rem;
}

/* assessment-wrapper
-------------------------------------------------------------*/
.assessment-wrapper .color-box {
    border-radius: inherit;
    line-height: 175%;
    margin: 0;
}

.assessment-wrapper .color-box .textS {
    line-height: 140%;
}

.assessment-wrapper .color-box figure {
    text-align: center;
    margin-top: 20px;
}

.assessment-wrapper .color-box img {
    max-width: 100%;
    height: auto;
    width: inherit;
}

.assessment-wrapper [class*="grid--"] {
    gap: 25px 16px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Tablet
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media (min-width: 768px) and (max-width: 1023px) {}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media (max-width: 767px) {

    /* link--arw
    -------------------------------------------------------------*/
    .link--arw.row {
        display: block;
    }

    .link--arw.row li {
        margin-bottom: 10px;
        flex: none;
    }

    /* table-default 
    -------------------------------------------------------------*/
    .sp-table-scroll {
        overflow: auto;
        table-layout: auto;
        position: relative;
        /* z-index: 2; */
        margin-bottom: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        outline: none;
        /* background-image: url("/hc/sustainability/common/img/icon-table-arw.png");
        background-repeat: no-repeat; */
    }

    .sp-table-scroll::after {
        content: '';
        width: 125px;
        height: 82px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: url("/hc/sustainability/common/img/icon-table-arw.png");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 1;
        animation: fade-out linear both;
        animation-timeline: scroll(x);
        transition: opacity 0.3s, visibility 0.3s;
        animation-range: 0px 60px;
        pointer-events: none;
    }

    .sp-table-scroll:active::after,
    .sp-table-scroll:focus-within::after,
    .sp-table-scroll:hover::after {
        opacity: 0;
        visibility: hidden;
    }

    .sp-table-scroll>table {
        min-width: 600px;
        margin-bottom: 5px;
    }

    .sp-table-scroll>[class^="table-default"] {
        width: 800px;
    }

    .sp-table-scroll.w1200>[class^="table-default"] {
        width: 1200px;
    }

    .sp-table-scroll [class^="table-default"] {
        border-collapse: separate;
        border-spacing: 0;
    }

    /* col-
    --------------------------------------------------------------*/
    /* [class^="col-"] {
        display: block;
    }

    [class^="col-"]>* {
        width: 100%;
    } */

    /* grid
    --------------------------------------------------------------*/
    .grid--col-2 {
        grid-template-columns: 1fr;
    }

    :is(.grid--col-3, .grid--col-4) {
        grid-template-columns: repeat(2, 1fr);
    }

    :is(.grid--col-2-1, .grid--col-1-2,
        .grid--col-3-1, .grid--col-1-3,
        .grid--col-4-1, .grid--col-1-4,
        .grid--col-3-2, .grid--col-2-3) {
        grid-template-columns: 1fr;
    }

    :is(.grid--col-2-1, .grid--col-1-2,
        .grid--col-3-1, .grid--col-1-3,
        .grid--col-4-1, .grid--col-1-4,
        .grid--col-3-2, .grid--col-2-3)>* {
        grid-column: span 1 !important;
    }

    :is(.grid--col-2-1, .grid--col-1-2,
        .grid--col-3-1, .grid--col-1-3,
        .grid--col-4-1, .grid--col-1-4,
        .grid--col-3-2, .grid--col-2-3)>* {
        grid-column: span 1 !important;
    }

    :is(.grid--col-3-1, .grid--col-1-3,
        .grid--col-4-1, .grid--col-1-4) figure {
        width: 50%;
        margin: 0 auto;
    }

    .grid--col-1-3.end-line figure {
        width: 100%;
    }

    .grid--col-1-3.end-line {
        grid-template-columns: 1fr;
    }

    .grid--sp-col-1 {
        grid-template-columns: 1fr !important;
    }

    .grid--sp-reverse>*:nth-child(odd) {
        order: 2;
    }

    .grid--sp-reverse>*:nth-child(even) {
        order: 1;
    }

    /* toggle
    -------------------------------------------------------------*/
    .toggle-set.open .toggle-box {
        display: block;
        max-height: 600px;
        opacity: 1;
        padding: 0;
    }

    .grid--col-3:has(.toggle-wrapper) {
        row-gap: 10px;
    }

    .grid--col-3:has(.toggle-wrapper) .toggle-btn {
        pointer-events: auto;
        position: relative;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--colorBorder);
    }

    .grid--col-3:has(.toggle-wrapper) .toggle-btn::before {
        content: '';
        background-color: var(--colorRed);
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .grid--col-3:has(.toggle-wrapper) .toggle-btn::after {
        content: '';
        width: 8px;
        height: 8px;
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        background:
            linear-gradient(to bottom, #fff, #fff) no-repeat center / 2px 8px,
            linear-gradient(to right, #fff, #fff) no-repeat center / 8px 2px;
        /* transition: background 0.3s ease; */
    }

    .grid--col-3:has(.toggle-wrapper) .toggle-set.open .toggle-btn::after {
        background: linear-gradient(to right, #fff, #fff) no-repeat center / 8px 2px;
    }



    .grid--col-3:has(.toggle-wrapper) .toggle-box {
        display: none;
        opacity: 0;
    }

    /* toggle
-------------------------------------------------------------*/
    .toggle-btn {
        font-size: 1.5rem;
    }

    .toggle-set.open .toggle-box {
        font-size: 1.5rem;
    }

    .toggle-set.open .toggle-box {
        display: block;
        opacity: 1;
    }

    #sustainability-ftr-link ul.link--arw {
        row-gap: 10px;
    }

    #sustainability-ftr-link ul li+li {
        margin-top: 0;
    }

    /* message-profile-box
-------------------------------------------------------------*/
    .message-profile-box {
        display: block;
        max-height: inherit;
    }

    .message-profile-box picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .message-profile-box img {
        width: 100%;
    }

    .message-profile-box .message-text-box {
        padding: 20px;
        width: 100%;
    }

    .message-profile-box .message-img-box {
        width: 100%;
    }

    .message-profile-box .message-text-box h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .message-profile-box .message-text-box .message-profile {
        font-size: 14px;
        max-width: inherit;
        margin-left: 0;
    }

    .message-profile-box .message-text-box .message-profile .message-name {
        font-size: 18px;
        margin-top: 10px !important;
    }

    /* feature
    -------------------------------------------------------------*/
    .feature-task-list {
        grid-template-columns: 1fr;
    }

    .feature-task-list li.sizeL {
        grid-column: span 1;
    }

    .feature-groupPower {
        background-image: none;
    }

    .feature-groupPower .catch {
        font-size: 1.8rem;
    }

    .feature-groupPower .catch span {
        font-size: 2.6rem;
    }

    .feature-groupPower .inner dl {
        margin: 0 auto 30px !important;
    }

    .four-themes .sdgs-box img {
        width: 50% !important;
    }

    .four-themes .sdgs-box img.sp-70 {
        width: 70% !important;
    }

    .four-themes .sdgs-box img.sp-100 {
        width: 100% !important;
    }
}
}