@import 'common.css';

:root {
 --phi-main-color: #007681;
 --sdg-main-color: #68478d;
 --env-main-color: #035f1d;
 --soc-main-color: #9d4815;
 --gov-main-color: #236192;
 --pro-main-color: #3cc8e2;
 --gold-color:#b3b2a4;
 --red-color:#dd0000;
    
 --gray-bg-color: #f9f9f9;
 --gray-bg-color1 :#403d33;
 --gray-bg-color2 :#716f63;
    
 --brown-bg-color: #a86500;   
 --blue-bg-color: #325a90;
 --red-bg-color: #ce3853;
 --redbean-bg-color: #b94f38;
 --deepyellow-bg-color: #776c2e;
    
 --gray-bg-color: #f9f9f9;
 
 --gray-border-color: #e1e1e1;
 --gray-border-color2: #a1a1a1;   
    
 --localnavi-color:#716f63;
    
 --common-thborder-color: #59574c;
 --phi-font-color: #007681;
 --sdg-font-color: #68478d;
 --env-font-color: #035f1d;
 --soc-font-color: #ba511f;
 --gov-font-color: #236192;
    
    
 --common-width-defult : 1200px;
    
/*　body に設定された文字サイズに依存する指定方法　*/
--fs-is-12px : 0.857rem;   
--fs-is-16px : 1.1428rem; 
--fs-is-18px : 1.2857rem;
--fs-is-20px : 1.4285rem;
--fs-is-22px : 1.5714rem;
--fs-is-24px : 1.7142rem;     
--fs-is-32px : 2.2857rem;
--fs-is-34px : 2.4285rem;  
}

/* SP */
@media only screen and (max-width: 767px) {
.-onlyPC { display: none; } 
}
/* PC */
@media only screen and (min-width: 768px) {
.-onlySP { display: none; } 
}

.-creaternotes {
 position: relative;
 background-color: #F00;
 color: #FFF;
 margin: 10px auto;
 padding: 20px 20px 10px;
 font-size: 12px;
}


.-creaternotes:before {
 position: absolute;
 left: 5px;
 top: 5px;
 content: "確認お願いします ※修正後要削除";
 font-size: 10px;
}


.pagenavi__container {
 position: relative;
 z-index: 50;
 width: 100%;
 background: #403d33;
 left: 0;
 height: 60px;
 display: flex;
 align-items: center;
}
.pagenavi__wrapper {
  display: flex;
  height: 60px;
  width: 1200px;
  margin: 0 auto;
}

.pagenavi__wrapper:has(.pagenavi__item.-link){
 justify-content: space-between;
}


.pagenavi__wrapper a {
  display: flex;
  align-items: center;
  height: 100%;
  color: #fff;
  text-decoration: none;
  padding: 0 1em;
  position: relative;
  z-index: 52;
}

.pagenavi__item.-title{
 line-height: 1;
 font-weight: 700;
}

.pagenavi__wrapper h1 > span {
  display: flex;
  align-items: center;
  height: 100%;
  color: #fff;
  text-decoration: none;
  padding: 0 1em;
  position: relative;
  z-index: 52;
}
.pagenavi__wrapper a.hovering {
  opacity: 0.6;
}
.hover-fade a, a.hover-fade {
  transition: 0.5s ease 0s;
  -webkit-transition: 0.5s ease 0s;
  -moz-transition: 0.5s ease 0s;
  -ms-transition: 0.5s ease 0s;
}


/* SP */
@media only screen and (max-width: 767px) {
.pagenavi__item.-title{ font-size:1.71428571429rem }
.pagenavi__item.-link {
 justify-content: center;
 padding-left: 1em;
 font-size: 1rem;
 font-weight: normal;
 cursor: pointer;
 position: relative;
 width: 100px;
 }
 .pagenavi__item.-link span {
  padding-left: 1em;
 }
    
.pagenavi__item.-link span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
  display: inline-block;
  font-size: 1.42857142857rem;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 0.8em;
  margin-top: -0.5em;
 }
.pagenavi__item.-link::after {
 content: '';
 display: block;
 height: 80%;
 border-left: solid 1px #a0a0a0;
 position: absolute;
 top: 10%;
 left: 0;
 }
}

@media print, screen and (min-width: 768px) {
.pagenavi__item.-title { font-size: 2.14rem; }
.pagenavi__item.-link { display: none; }
}


.mvimage__container { text-align: center;}
.mvimage__container img { width: 100%; max-width: 1200px; }

/* PC */
@media print, screen and (min-width: 768px) {
 .mvimage__container { padding-bottom:25px; }
}
    
    

/* SP */
@media only screen and (max-width: 767px) {
.tabnavi__container { display: none; } 
}

/* PC */
@media print, screen and (min-width: 768px) {
.tabnavi__container {
 position: relative;
 width: 100%;
 background-color: #FFF;
 box-sizing: border-box;
 border-top:solid 1px #e6e6e6;
 padding-top: 4px;
 }
 .mvimage__container + .tabnavi__container , .page-navi-product-menu + .tabnavi__container {
 border-top:none;
 }
 .page-navi-product-menu + .tabnavi__container {
  margin-top: 25px;
 }
    
    
.tabnavi__container:after {
 content: "";
 display: block;
 width: 100%;
 height: 6px;
 position: absolute;
 left: 0;
 bottom: 0;
 z-index: 1;
 background-color: #e9eced;
 }
.tabnavi__wrapper {
 position: relative;
 z-index: 2;
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 grid-template-rows: 1fr;
 grid-column-gap: 3px;
 grid-row-gap: 0px;
}    
.tabnavi__wrapper a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: inherit;
  background: #e9eced;
 font-size: clamp(14px,18px,1.5vw);
  font-weight: 600;
  line-height: 1;
  width: 100%;
  min-height: 72px;
  transition : all 0.25s ease 0s;
 }
.tabnavi__wrapper a.-active {
  color: #FFF;
  background: #403e32;
    
 }
.tabnavi__wrapper a:hover {
  color: #FFF;
  background: #403e32;
 }
}



/* レギュレーション ***************************************************** 
フォントカラー、背景色、ボーダーを強制的に変更したい場合は
common.scss を参照してクラスを指定してください。
例えば、フォントサイズを変更したい場合、
.fc-is-env を指定すれば、color:#035f1d が適用されます。
*/

.align-is-left { text-align: left; }
.align-is-center { text-align: center; }
.align-is-right { text-align: right; }

.block-is-left { margin-left: 0; margin-right: auto; }
.block-is-center { margin-left: auto; margin-right: auto; }
.block-is-right { margin-left: auto; margin-right: 0; }

.display-is-block { display: block; }
.display-is-table { display: table; }
.display-is-inlineblock { display: inline-block; }
.display-is-inline { display: inline; }

/* SP */
@media print, screen and (max-width: 767px) {
.align-is-left-sp { text-align: left; }
.align-is-center-sp { text-align: center; }
.align-is-right-sp { text-align: right; }
}
/* PC */
@media print, screen and (min-width: 768px) {
.align-is-left-pc { text-align: left; }
.align-is-center-pc { text-align: center; }
.align-is-right-pc { text-align: right; }
}

.-button {
 background-color: transparent;
 border: none;
 cursor: pointer;
 outline: none;
 padding: 0;
 appearance: none; 
}


/* ecobody__container -----------------------------  */
.ecobody__container:not(.-fullwidth) {
 width: 90%;
 max-width: var(--common-width-defult);
}

.ecobody__container > div , .ecobody__container > section {
 box-sizing: border-box;
}

.ecobody__container a {
  text-decoration: underline;
}

.ecobody__container.-index a {
  text-decoration: none;
}

@media only screen and (max-width: 767px) {
.ecobody__container:not(.-fullwidth){ margin: 20px auto 80px; }
}
@media print, screen and (min-width: 768px) {
.ecobody__container:not(.-fullwidth) { margin: 40px auto 160px; }
.anc__menu + .ecobody__container:not(.-fullwidth) , .anc__wrapper + .ecobody__container:not(.-fullwidth) { margin: 10px auto 160px; }   
}

/* headline -----------------------------  */

.headline-is-v1 {
 position: relative;
 padding: 1em 0 1em 1em;
 border-left-style: solid;
 box-sizing: border-box;
}
* + .headline-is-v1 { margin-top: 10px; }
.headline-is-v1:before {
 content: "";
 position: absolute;
 top: 0;
 display: block;
 background-color: var(--gray-bg-color2);
}
.headline-is-v1:after {
 content: "";
 position: absolute;
 bottom: 0;
 display: block;
 height: 1px;
 background-color: #e2e4cf;
}

.headline-is-v1.-phi { border-left-color: var(--phi-main-color); }
.headline-is-v1.-sdg { border-left-color: var(--sdg-main-color); }
.headline-is-v1.-env { border-left-color: var(--env-main-color); }
.headline-is-v1.-soc { border-left-color: var(--soc-main-color); }
.headline-is-v1.-gov { border-left-color: var(--gov-main-color); }
.headline-is-v1.-pro { border-left-color: var(--pro-main-color); }
.headline-is-v1.-gray { border-left-color: var(--gray-border-color2); }

/* headline-is-v1 for SP */
@media only screen and (max-width: 767px) {
.headline-is-v1 { border-left-width: 4px; font-size: clamp(16px,22px,5.7vw); line-height: 1.5; }
.headline-is-v1:before { left: 3px; width:calc(100% - 3px); height: 2px; }
.headline-is-v1:after { left: 3px; width: calc(100% - 10px); }
}
/* headline-is-v1 for PC */
@media print, screen and (min-width: 768px) {
.headline-is-v1 { border-left-width: 7px; font-size: clamp(26px,32px,2.6vw); line-height: 1.5; }
.headline-is-v1:before { left: 3px; width:calc(100% - 3px); height: 4px; }
.headline-is-v1:after { left: 3px; width: calc(100% - 10px); }
}

.headline-is-v2 {
 position: relative;
 padding: 1em 0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 box-sizing: border-box;
}

* + .headline-is-v2 { margin-top: 1em; }

.headline-is-v2.-phi { border-bottom-color: var(--phi-main-color); }
.headline-is-v2.-sdg { border-bottom-color: var(--sdg-main-color); }
.headline-is-v2.-env { border-bottom-color: var(--env-main-color); }
.headline-is-v2.-soc { border-bottom-color: var(--soc-main-color); }
.headline-is-v2.-gov { border-bottom-color: var(--gov-main-color); }
.headline-is-v2.-gov { border-bottom-color: var(--gov-main-color); }
.headline-is-v2.-pro { border-left-color: var(--pro-main-color); }
.headline-is-v2.-gray { border-bottom-color: var(--gray-border-color2); }


/* headline-is-v1 for SP */
@media only screen and (max-width: 767px) {
.headline-is-v2 { font-size: clamp(14px,18px,4.6vw); line-height: 1.5; }
}
/* headline-is-v1 for PC */
@media print, screen and (min-width: 768px) {
.headline-is-v2 { font-size: clamp(18px,24px,2vw); line-height: 1.5; }
}

.headline-is-v3 {
 position: relative;
 box-sizing: border-box;
}

.headline-is-v3.-phi { color: var(--phi-main-color); }
.headline-is-v3.-sdg { color: var(--sdg-main-color); }
.headline-is-v3.-env { color: var(--env-main-color); }
.headline-is-v3.-soc { color: var(--soc-main-color); }
.headline-is-v3.-gov { color: var(--gov-main-color); }
.headline-is-v3.-pro { color: var(--pro-main-color); }

* + .headline-is-v3 { margin-top: 1.5em; }

/* headline-is-v1 for SP */
@media only screen and (max-width: 767px) {
.headline-is-v3 { font-size: clamp(12px,16px,4.2vw); line-height: 1.5; }
}
/* headline-is-v1 for PC */
@media print, screen and (min-width: 768px) {
.headline-is-v3 { font-size: clamp(16px,20px,1.6vw); line-height: 1.5; }
}

.headline-is-v4 {
 position: relative;
 box-sizing: border-box;
 padding-left: 1.15em;
}
.headline-is-v4:before {
 position: absolute;
 left: 0;
 top: .3em;
 content: "";
 display: block;
 width: .8em;
 height: .8em;
 background-color: var( --gold-color);
 
}
* + .headline-is-v4 { margin-top: 1em; }

/* headline-is-v1 for SP */
@media only screen and (max-width: 767px) {
.headline-is-v4 { font-size: clamp(10px,14px,3.5vw); line-height: 1.5; }
}
/* headline-is-v1 for PC */
@media print, screen and (min-width: 768px) {
.headline-is-v4 { font-size: clamp(14px,18px,1.5vw); line-height: 1.5; }
}

.headline-is-v5 {
 position: relative;
 box-sizing: border-box;
 font-weight: 700;
}
* + .headline-is-v5 { margin-top: 1em; }

/* headline-is-v1 for SP */
@media only screen and (max-width: 767px) {
.headline-is-v5 { font-size: clamp(10px,14px,3.5vw); line-height: 1.5; }
}
/* headline-is-v1 for PC */
@media print, screen and (min-width: 768px) {
.headline-is-v5 { font-size: clamp(14px,18px,1.5vw); line-height: 1.5; }
}

.headline-is-bg { color: #FFF; font-weight: 700; padding: 1em; }

.headline-is-bg.-brown { background-color: var(--brown-bg-color); }
.headline-is-bg.-blue { background-color: var(--blue-bg-color); }
.headline-is-bg.-red { background-color: var(--red-bg-color); }
.headline-is-bg.-redbean { background-color: var(--redbean-bg-color); }
.headline-is-bg.-deepyellow { background-color: var(--deepyellow-bg-color); }

/* headline-is-bg for SP */
@media only screen and (max-width: 767px) {
.headline-is-bg { font-size: clamp(12px,16px,4.2vw); line-height: 1.5; }
}
/* headline-is-bg for PC */
@media print, screen and (min-width: 768px) {
.headline-is-bg { font-size: clamp(16px,20px,1.6vw); line-height: 1.5; }
}


.headline-is-color { color: #FFF; font-weight: 700; }

.headline-is-color.-brown { color: var(--brown-bg-color); }
.headline-is-color.-blue { color: var(--blue-bg-color); }
.headline-is-color.-red { color: var(--red-bg-color); }
.headline-is-color.-redbean { color: var(--redbean-bg-color); }
.headline-is-color.-deepyellow { color: var(--deepyellow-bg-color); }


/* headline-is-bg for SP */
@media only screen and (max-width: 767px) {
.headline-is-color { font-size: clamp(12px,16px,4.2vw); line-height: 1.5; }
}
/* headline-is-bg for PC */
@media print, screen and (min-width: 768px) {
.headline-is-color { font-size: clamp(16px,20px,1.6vw); line-height: 1.5; }
}


.-covered {
 display: table;
 margin-left: auto;
 margin-right: auto;
 position: relative;
 z-index: 20;
 padding: 0 1.5em;
 background-color: #FFFFFF;
}


/* headline-is-bg for SP */
@media only screen and (max-width: 767px) {
.-covered.-ty-is-10 { transform: translateY(5px); }
.-covered.-ty-is-20 { transform: translateY(15px); }
.-covered.-ty-is-30 { transform: translateY(25px); }
}
/* headline-is-bg for PC */
@media print, screen and (min-width: 768px) {
.-covered.-ty-is-10 { transform: translateY(15px); }
.-covered.-ty-is-20 { transform: translateY(25px); }
.-covered.-ty-is-30 { transform: translateY(35px); }
}

.-covered-2 { display: inline-block; position: relative; transform: translateY(50%);}
.-covered-2::before { content: ''; display: block; position: absolute; top: 50%; left:0; width: 100%; height: 1px; background-color: #fff; z-index: -1;}
/* headline-is-bg for SP */
@media only screen and (max-width: 767px) {
.-covered-2 { padding: 0 10px;}
}
/* headline-is-bg for PC */
@media print, screen and (min-width: 768px) {
.-covered-2 { padding: 0 20px;}
}


/* pagetitle -----------------------------  */
/* pagetitle for SP */
@media only screen and (max-width: 767px) {
.pagetitle__image { margin: 30px 0; }
}
/* pagetitle for PC */
@media print, screen and (min-width: 768px) {
.pagetitle__image { margin: 60px 0; }
}

/* block -----------------------------  */
.comp__block.-rightphoto {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

/* Paragraph for SP */
@media only screen and (max-width: 767px) {
.comp__block.-rightphoto > .-text { width: 100%; }
.comp__block.-rightphoto > .-photo { margin-top: 20px; width: 100%; }
}
/* Paragraph for PC */
@media print, screen and (min-width: 768px) {
.comp__block.-rightphoto > .-text { width: 60%; }
.comp__block.-rightphoto > .-photo { width: 33.3%; }
}

.-mw80 { max-width: 80%; }
.-mw50 { max-width: 50%; }
.-mw80:not(.-left):not(.-right) {
 margin-left: auto;
 margin-right: auto;
}

.-centers {
 display: flex;
 justify-content:center;
 align-items: center;
 }

/* Paragraph -----------------------------  */
.ecobody__container h2 + p { margin-top: 1.75em; }
.ecobody__container h3 + p , .ecobody__container h4 + p { margin-top: 1em; }
.ecobody__container p + p {  margin-top: 2em; }

/*.ecobody__container p:not(.-title):not(.-noindent) { text-indent: 1em; }*/
.ecobody__container p span.-noindent { text-indent: 0; }

/* Paragraph for SP */
@media only screen and (max-width: 767px) {
.ecobody__container p { font-size: 14px; line-height: 2; }
}
/* Paragraph for PC */
@media print, screen and (min-width: 768px) {
.ecobody__container p { font-size: 16px; line-height: 2; }
}




/* Image -----------------------------  */
.ecobody__container img:not(.-reset) { 
 max-width: 100%; 
 height: auto;
 vertical-align: middle;
 font-style: italic; 
 background-repeat: no-repeat;
 background-size: cover; 
 shape-margin: 0.75rem;
}

.ecobody__container * + img:not([class]),
.ecobody__container * + figure:not([class]),
.ecobody__container * + picture:not([class]) {
 display: table;
 margin: 2.75em auto 0;
}

.ecobody__container img:not(.-reset).-left { margin-left: 0; margin-right: auto; }
.ecobody__container img:not(.-reset).-right { margin-left: auto; margin-right: 0; }

.ecobody__container figure {
 display: table;
 text-align: center;
 margin-left: auto; 
 margin-right: auto;
}
.ecobody__container figcaption {
 text-align: center;
 padding:1.5em 0 1em;
 font-size: 14px;
 margin-left: 0; 
 margin-right: auto;
}

.-bold { font-weight: bold !important; }
.-italic { font-style: italic !important; }

/* ul -----------------------------  */
ul.comp__list > li { position: relative; }


/* Paragraph for SP */
@media only screen and (max-width: 767px) {
 ul.comp__list > li { font-size: 14px; }
 td ul.comp__list > li { font-size: inherit; }
}
/* Paragraph for PC */
@media print, screen and (min-width: 768px) {
ul.comp__list > li { font-size: 16px; }
 td ul.comp__list > li { font-size: inherit; }
}

ul.comp__list.-dot > li , ul.comp__list.-circle > li { padding-left: 1.15em; }
ul.comp__list.-dot > li:not(:first-child) , ul.comp__list.-circle > li:not(:first-child) { margin-top: .25em; }
ul.comp__list.-dot > li:before {
 position: absolute;
 top:0;
 left: 0;
 content: "・";
}
ul.comp__list.-circle > li:before {
 position: absolute;
 top:0;
 left: 0;
 content: "●";
}
ul.comp__list.-circle.-com > li:before { color: var(--com-main-color); }
ul.comp__list.-circle.-phi > li:before { color: var(--phi-main-color); }
ul.comp__list.-circle.-sdg > li:before { color: var(--sdg-main-color); }
ul.comp__list.-circle.-env > li:before { color: var(--env-main-color); }
ul.comp__list.-circle.-soc > li:before { color: var(--soc-main-color); }
ul.comp__list.-circle.-gov > li:before { color: var(--gov-main-color); }
ul.comp__list.-circle.-pro > li:before { color: var(--pro-main-color); }


ul.comp__list.-note:not(.-number) > li { padding-left: 1em; margin-bottom: 5px; font-size: 1rem; line-height: 1.2; }
ul.comp__list.-note:not(.-number) > li:before {
 position: absolute;
 top:0;
 left: 0;
 counter-increment: number;
 content: '*';
 color: var(--red-color);
}
ul.comp__list.-note.-number { counter-reset: number; }
ul.comp__list.-note.-number.-start2 { counter-reset: number +1; }
ul.comp__list.-note.-number.-start3 { counter-reset: number +2; }
ul.comp__list.-note.-number.-start4 { counter-reset: number +3; }
ul.comp__list.-note.-number.-start5 { counter-reset: number +4; }
ul.comp__list.-note.-number.-start6 { counter-reset: number +5; }
ul.comp__list.-note.-number.-start7 { counter-reset: number +6; }
ul.comp__list.-note.-number.-start8 { counter-reset: number +7; }
ul.comp__list.-note.-number.-start9 { counter-reset: number +8; }
ul.comp__list.-note.-number.-start10 { counter-reset: number +9; }
ul.comp__list.-note.-number > li { padding-left: 1.75em; margin-bottom: 5px; font-size: 0.9rem; line-height: 1.2; }
ul.comp__list.-note.-number > li:before {
 position: absolute;
 top:0;
 left: 0;
 counter-increment: number;
 content: '*'counter(number);
 color: var(--red-color);
}

ul.comp__list.-note.-number.-start10 > li::before { left: -7px;}

.-mkNote {
 position: relative;
 top: -0.4em;
 margin-left: 2px;
 font-size: 0.85rem;
 color: #dd0000;
 font-weight: normal;
}

ul.comp__list.-line > li { padding-left: 1.4em; }
ul.comp__list.-line > li:not(:first-child) { margin-top: .5em; }
ul.comp__list.-line > li:before {
 position: absolute;
 top:0;
 left: 0;
 content: "━";
 font-weight: bold;
}
ul.comp__list.-line.-com > li:before { color: var(--com-main-color); }
ul.comp__list.-line.-phi > li:before { color: var(--phi-main-color); }
ul.comp__list.-line.-sdg > li:before { color: var(--sdg-main-color); }
ul.comp__list.-line.-env > li:before { color: var(--env-main-color); }
ul.comp__list.-line.-soc > li:before { color: var(--soc-main-color); }
ul.comp__list.-line.-gov > li:before { color: var(--gov-main-color); }
ul.comp__list.-line.-pro > li:before { color: var(--pro-main-color); }

ul.comp__list.-inlines > li {
display: inline-block;
margin-top: .5em;
}
ul.comp__list.-inlines > li:not(:last-child) {
margin-right: 1.5em;
}

ol.comp__list.-numbering {counter-reset: number; }
ol.comp__list.-numbering > li { position: relative; padding-left: 1.25em; }
ol.comp__list.-numbering > li:not(:first-child) { margin-top: .5em; }
ol.comp__list.-numbering > li:before {
 position: absolute;
 top:0;
 left: 0;
 counter-increment: number;
}

ol.comp__list.-numbering:not(.-parentheses) > li:before {
 content: counter(number)'.';
}
ol.comp__list.-numbering.-parentheses > li:before {
 content: counter(number)')';
}



/* table -----------------------------  */
.table__layout .table__layout--inner table.-common thead th{
 border-bottom: 2px solid var(--gray-border-color2) !important;
 border-top: 2px solid var(--gray-border-color2) !important;;
}
.table__layout .table__layout--inner table.-phi thead th{
 border-bottom: 2px solid var(--phi-font-color) !important;
 border-top: 2px solid var(--phi-font-color) !important;
}
.table__layout .table__layout--inner table.-sdg thead th{
 border-bottom: 2px solid var(--sdg-font-color) !important;
 border-top: 2px solid var(--sdg-font-color) !important;
}
.table__layout .table__layout--inner table.-env thead th{
 border-bottom: 2px solid var(--env-font-color) !important;
 border-top: 2px solid var(--env-font-color) !important;
}
.table__layout .table__layout--inner table.-soc thead th{
 border-bottom: 2px solid var(--soc-font-color) !important;
 border-top: 2px solid var(--soc-font-color) !important;
}
.table__layout .table__layout--inner table.-gov thead th{
 border-bottom: 2px solid var(--gov-font-color) !important;
 border-top: 2px solid var(--gov-font-color) !important;
}

.table__layout .table__layout--inner table.-sdgs thead th {
 border-bottom: 2px solid #68478d;
 border-top: 2px solid #68478d;
}
.table__layout .table__layout--inner table.-sdgs .-purple { border-left: 5px solid #bc007f; }
.table__layout .table__layout--inner table.-sdgs .-brownyellow { border-left: 5px solid #c69411; }
.table__layout .table__layout--inner table.-sdgs .-greenyellow { border-left: 5px solid #619b33; }
.table__layout .table__layout--inner table.-sdgs .-turquoise { border-left: 5px solid #0088aa; }
.table__layout .table__layout--inner table.-sdgs .-greenyellow { border-left: 5px solid #619b33; }

.table__layout .table__layout--inner table .border-l-0 { position: relative;}
.table__layout .table__layout--inner table .border-l-0::before { content: ''; display: block; position: absolute; top: 0; left: -1px; width: 1px; height: 100%; background-color: #fff; }


/*
table__scroll　を PCでも機能させたい場合のクラス
*/
@media print, screen and (max-width: 767px) {
.-scrollonpc .table__scroll--inner > table  {
  width: 1500px;
}
}

@media print, screen and (min-width: 768px) {
.-scrollonpc .table__scroll--inner {
 overflow-x: scroll !important;
 overflow: hidden;
}

.-scrollonpc .table__scroll--inner > table  {
  width: 150vw;
}
}


/* 画像のセット -----------------------------  */
.comp__photobox {
 display: flex;
 flex-wrap: wrap;
}

/* bottomlinks for SP */
@media only screen and (max-width: 821px) {
 .comp__photobox { justify-content: flex-start; }    
 .comp__photobox > li { width:48.5%; margin-top: 15px; margin-left:3%; }
 .comp__photobox > li:nth-child(2n+1) { margin-left:0; }
}
/* bottomlinks for PC */
@media print, screen and (min-width: 820px) {
 .comp__photobox { justify-content: center; }
 .comp__photobox.-clm3 > li { width:31.3%; margin-top: 30px; margin-left:2.6%; }
 .comp__photobox.-clm3 > li:nth-child(3n+1) { margin-left:0; }
 .comp__photobox.-clm4 > li { width:23.5%; margin-top: 30px; margin-left:2%; }
 .comp__photobox.-clm4 > li:nth-child(4n+1) { margin-left:0; }
}



/* Link -----------------------------  */
.link__item {
 position: relative;
 display: table;
 font-weight: bold;
 transition : opacity 0.4s ease 0s;
 line-height: 1;
}

.link__item:hover { opacity: .5; }

.link__item.-left { padding-left: 1em; }
.link__item.-right { padding-right: 1em; }

.link__item.-triangle:before {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 content: "";
 height:.6em;
 width: calc(.6em / 2);
 clip-path: polygon(0 0, 100% 50%, 0 100%);
 background-color: #000;
}

.link__item.-triangle.-left:before { left: 0; }
.link__item.-triangle.-right:before { right: .5em; }


.reportUlLink.-box a {
 padding: 1.25em .5em;
 text-decoration: underline;
 border-bottom-style: solid;
 border-bottom-width: 4px; 
}

.reportUlLink.-box.-com a,
.guidelineTab .current.-com a { color: var(--gray-border-color2); border-bottom-color: var(--gray-border-color2); }
.reportUlLink.-box.-phi a,
.guidelineTab .current.-phi a { color: var(--phi-font-color); border-bottom-color: var(--phi-font-color); }
.reportUlLink.-box.-sdg a,
.guidelineTab .current.-sdg a { color: var(--sdg-font-color); border-bottom-color: var(--sdg-font-color); }
.reportUlLink.-box.-soc a,
.guidelineTab .current.-soc a { color: var(--soc-font-color); border-bottom-color: var(--soc-font-color); }
.reportUlLink.-box.-gov a,
.guidelineTab .current.-gov a { color: var(--gov-font-color); border-bottom-color: var(--gov-font-color); }


.-boxborder { border-style: solid; border-width: 1px; }

#indexList.-indexlist.-com li , .-boxborder.-com { border-color: var(--gray-border-color2) !important; }
#indexList.-indexlist.-phi li , .-boxborder.-phi { border-color: var(--phi-font-color) !important; }
#indexList.-indexlist.-sdg li , .-boxborder.-sdg { border-color: var(--sdg-font-color) !important; }
#indexList.-indexlist.-soc li , .-boxborder.-soc { border-color: var(--soc-font-color) !important; }
#indexList.-indexlist.-gov li , .-boxborder.-gov { border-color: var(--gov-font-color) !important; }
#indexList.-indexlist.-gov li , .-boxborder.-pro { border-color: var(--pro-font-color) !important; }

/* 共通要素 ***************************************************** */
.localnavi__container {
 position: relative;
 z-index: 100;
}

.localnavi__item.-button {
 position: relative;
 background-color:var(--localnavi-color);
 color: #FFF;
}

.localnavi__item.-button .-mark {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 display: block;
 width: 1em;
 height: 1em;
}

.localnavi__item.-button .-mark span {
 position: absolute;
 display: block;
 width: 100%;
 height: 1px;
 background-color: #c6c5c1;
 transition : all 0.4s ease 0s;
}

.localnavi__item.-button .-mark span:nth-child(1) { top:0; right: 0; transform-origin: top right; }
.localnavi__item.-button .-mark span:nth-child(2) { top:50%; right: 0;}
.localnavi__item.-button .-mark span:nth-child(3) { bottom:0; right: 0; transform-origin: bottom right; }

.localnavi__item.-button.-active .-mark span:nth-child(1) { width: 136%; transform: rotate(-45deg); }
.localnavi__item.-button.-active .-mark span:nth-child(2) { opacity: 0; }
.localnavi__item.-button.-active .-mark span:nth-child(3) { width: 136%; transform: rotate(45deg); }

.localnavi__wrapper {
 position: absolute;
 float: right;
 top: 3.35em;
 right: 0;
 display: none;
 padding: 1.5em;
 background-color:var(--localnavi-color);
 color: #FFF;
}

.localnavi__item.-button.-active + .localnavi__wrapper { display: inline-block; }
.localnavi__wrapper > ul > li { padding: .6em 0; border-bottom: solid 1px #c6c5c1;}
.localnavi__wrapper > ul > li a {  color: #FFF;}
.localnavi__wrapper > ul > li a:hover { opacity: .75;}


/* localnavi for SP */
@media only screen and (max-width: 767px) {
.localnavi__item.-button {
 display: block;
 width: 100%;
 text-align: left;
 padding: 1em 60px 1em 5%;
}
 .localnavi__item.-button .-mark { right: 5%; }
 .localnavi__wrapper{  min-width: 80%; }    
        
}
/* localnavi for PC */
@media print, screen and (min-width: 768px) {
 .localnavi__container {
  margin: 30px auto 10px;
  width: 90%;
  max-width: var(--common-width-defult);
 }
.localnavi__item.-button {
 display: block;
 min-width: 210px;
 margin: 0 0 0 auto;
 text-align: left;
 padding: 1em 60px 1em 1em;
}
.localnavi__item.-button .-mark { right: 1em; }
 .localnavi__wrapper{ min-width: 310px; }    
    
}


.anc__menu a:hover {
 opacity: .75; 
}

/* anc__wrapper for SP */
@media only screen and (max-width: 767px) {
.anc__wrapper { display:contents; }
}
/* anc__wrapper for PC */
@media print, screen and (min-width: 768px) {
 .anc__wrapper {
  width: 100%;
  max-width: var(--common-width-defult);
  margin: 20px auto 0;
 }
}

.bottomlinks__wrapper {
 width: 90%;
 max-width: var(--common-width-defult);
 margin-left: auto;
 margin-right: auto;
}

.bottomlinks__box.-headline {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 border-bottom-color: #e1e1e1;
 border-bottom-style: solid;
}

.bottomlinks__wrapper:not(.-info) .bottomlinks__box.-list { display: flex; justify-content: flex-start; flex-wrap: wrap; }


/* bottomlinks for SP */
@media only screen and (max-width: 767px) {
 .bottomlinks__container { padding: 50px 0; }
 .bottomlinks__wrapper:not(:first-child) { margin-top: 45px; }
 .bottomlinks__box .link__item { font-size: 12px; }
 .bottomlinks__box.-list { margin-top: 20px; }
 .bottomlinks__box.-headline { padding-bottom: 10px; padding-bottom-width: 2px; }
 .bottomlinks__item.-title { font-size: clamp(16px,20px,5.2vw); line-height: 1.5; }
}
/* bottomlinks for PC */
@media print, screen and (min-width: 768px) {
 .bottomlinks__container:not(.bg-is-white) { padding: 100px 0; background-color: var(--gray-bg-color); }
 .bottomlinks__wrapper:not(:first-child) { margin-top: 100px; }
 .bottomlinks__box .link__item { font-size: var(--fs-is-18px); }
 .bottomlinks__box.-list { margin-top: 40px; }
 .bottomlinks__box.-headline { padding-bottom: 20px; padding-bottom-width: 4px; }
 .bottomlinks__item.-title { font-size: clamp(26px,34px,2.8vw); line-height: 1.5; }
}

/* お知らせ ============================= */

.-info .bottomlinks__item.-link { border-bottom: solid 1px #e1e1e1; font-weight: 700; }
.-info .bottomlinks__item.-link a { text-decoration: none; }
.-info .bottomlinks__item.-link a:hover { text-decoration: underline; }
.-info .bottomlinks__item.-link .-cat {color: #ffffff;}
.-info .bottomlinks__item.-link .ic01{background-color: #b02730;}
.-info .bottomlinks__item.-link .ic02{background-color: #0f977f;}
.-info .bottomlinks__item.-link .ic03{background-color: #227acc;}
.-info .bottomlinks__item.-link .ic04{background-color: #4a3096;}
.-info .bottomlinks__item.-link .ic05{background-color: #4a3096;}
.-info .bottomlinks__item.-link .ic06{background-color: #4a3096;}

/* お知らせ for SP */
@media only screen and (max-width: 767px) {
 .-info .bottomlinks__item.-link a, .-info .bottomlinks__item.-link .-nolink { display: block; }
 .-info .bottomlinks__item.-link:first-child a , .-info .bottomlinks__item.-link:first-child .-nolink { padding: 0 0 1em; }
 .-info .bottomlinks__item.-link:not(:first-child) a, .-info .bottomlinks__item.-link:not(:first-child) .-nolink { padding: 1em 0; }
 .-info .bottomlinks__item.-link .-date { display: block; }
 .-info .bottomlinks__item.-link .-cat { padding: 2px; text-align: center;}
 .-info .bottomlinks__item.-link .-title { display: block; }
 }
/* お知らせ for PC */
@media print, screen and (min-width: 768px) {
 .-info .bottomlinks__item.-link a , .-info .bottomlinks__item.-link .-nolink  { display: flex; justify-content: space-between; }
 .-info .bottomlinks__item.-link:first-child a, .-info .bottomlinks__item.-link:first-child .-nolink { padding: 0 0 1.5em; }
 .-info .bottomlinks__item.-link:not(:first-child) a, .-info .bottomlinks__item.-link:not(:first-child) .-nolink { padding: 1.5em 0; }
 .-info .bottomlinks__item.-link .-date { width: 5.5em; }
 .-info .bottomlinks__item.-link .-cat { width: 10em; padding: 2px; text-align: center;}
 .-info .bottomlinks__item.-link .-title { width: calc(100% - 19em); }
 }


/* 各地のCSR活動 ============================= */
.-csr .bottomlinks__item.-link .-photo {
 width: 100%;
 aspect-ratio: 3.78 / 2.22;
}
.-csr .bottomlinks__item.-link .-photo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}



/* 各地のCSR活動 for SP */
@media only screen and (max-width: 767px) {
 .-csr .bottomlinks__item.-link { display: block; }
 .-csr .bottomlinks__item.-link .-date { margin-top: 1em; font-weight: 700; }
 .-csr .bottomlinks__item.-link .-title { font-size: var(--fs-is-16px); font-weight: 700; line-height: 1.5; }
 .-csr .bottomlinks__item.-link:not(:first-child) { margin-top: 30px; }

 }
/* 各地のCSR活動 for PC */
@media print, screen and (min-width: 768px) {
 .-csr .bottomlinks__box.-list { display: flex; justify-content: flex-start; }
 .-csr .bottomlinks__item.-link { width: 31.5%; }
 .-csr .bottomlinks__item.-link:not(:nth-child(3n)) { margin-right: 2.6%; }
 .-csr .bottomlinks__item.-link { display: block; }
 .-csr .bottomlinks__item.-link .-date { margin-top: 1em; font-size: var(--fs-is-16px); font-weight: 700; }
 .-csr .bottomlinks__item.-link .-title { font-size: var(--fs-is-18px); font-weight: 700; line-height: 1.5; }
 }


.-support .bottomlinks__item.-link a span { position: relative; display: table; transition : opacity 0.4s ease 0s; }
.-support .bottomlinks__item.-link a:hover span { opacity: .5; }
.-support .bottomlinks__item.-link a .-icon img { position: absolute; }
.-support .bottomlinks__item.-link a .-text {
 font-size: clamp(.6em,1.125em,1.4vw);
 font-weight: 700;
 line-height: 1.5;
 height: 2em;
 text-align: center;
}


/* サポート情報 for SP */
@media only screen and (max-width: 767px) {
 .-support .bottomlinks__item.-link a {
  position: relative;
  width: 100%;
  padding: 1.5em 5.6%;
  background-color: #fbfaf1;
  box-sizing: border-box;
  display : flex;
  justify-content: space-between;
  align-items: center;
 }
 .-support .bottomlinks__item.-link:not(:first-child) a { border: solid 1px #dbdacb; border-top:none; }  
 .-support .bottomlinks__item.-link { width: 100%; }
 .-support .bottomlinks__item.-link:first-child a { border: solid 1px #dbdacb; }    
 .-support .bottomlinks__item.-link a .-icon { width: 18%;  aspect-ratio: 1 / 1; }
 .-support .bottomlinks__item.-link a .-icon img { left: 50%; top: 50%; transform: translate(-50%,-50%); }
 .-support .bottomlinks__item.-link a .-text {
  width: 68%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
 }
}
/* サポート情報 for PC */
@media print, screen and (min-width: 768px) {
 .-support .bottomlinks__container { padding: 100px 0; background-color: var(--gray-bg-color); }
 .-support .bottomlinks__wrapper:not(:first-child) { margin-top: 100px; }
 .-support .bottomlinks__item.-link { width: 17.58%; }
 .-support .bottomlinks__box.-list li + li { margin-left: 3%; }
 .-support .bottomlinks__item.-link a {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: .5em;
  border: solid 1px #dbdacb;
  background-color: #fbfaf1;
  box-sizing: border-box;
  display : flex;
  flex-direction : column;
  align-items: center;
  justify-content: center;
 }
 .-support .bottomlinks__item.-link a .-icon { padding-bottom: 43%; }
 .-support .bottomlinks__item.-link a .-icon:not(.-handshake) { width: 28%;}
 .-support .bottomlinks__item.-link a .-icon.-handshake { width: 34.5%;}
 .-support .bottomlinks__item.-link a .-icon img { left: 50%; top: 1em; transform: translateX(-50%);}
 .-support .bottomlinks__item.-link a .-text {
  font-size: clamp(.6em,1.125em,1.4vw);
  font-weight: 700;
  line-height: 1.5;
  height: 2em;
  text-align: center;
 }
}

.-banner .bottomlinks__item.-link img { transition : opacity 0.4s ease 0s; }
.-banner .bottomlinks__item.-link a:hover img { opacity: .5; }

/* 関連リンク for SP */
@media only screen and (max-width: 767px) {
 .-banner .bottomlinks__item.-link { width: 48%; line-height: 1; }
 .-banner .bottomlinks__item.-link:nth-child(even) { margin-left: 4%; }
 .-banner .bottomlinks__box.-list li:nth-child(n+3) { margin-top: 18px; }
 
 }
/* 関連リンク for PC */
@media print, screen and (min-width: 768px) {
 .-banner .bottomlinks__item.-link { width: 18.25%; }
 .-banner .bottomlinks__box.-list li:not(:nth-child(5n)) { margin-right: 2.16%; }
 .-banner .bottomlinks__box.-list li:nth-child(n+6) { margin-top: 28px; }
 }


/* スペシャルコンテンツ =========================== */
.special__wrapper {
 position: relative;
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
 margin-left: auto;
 margin-right: auto;
}

.special__container { background-color: var(--gray-bg-color2); }    


.special__container .-headline {
 margin-left: auto;
 margin-right: auto;
 color: #FFF;
}

.special__wrapper .-copy {
 color: #FFF;
 background-color: var(--gray-bg-color1);
 font-weight: 700;
 line-height: 1;
 text-align: center;
}

.special__wrapper .-copy + img { margin: 0 auto; }

.special__wrapper a {
  text-decoration: none;
}

.special__wrapper a .-title {
 color: #FFF;
 font-weight: 700;
 margin-top: .75em;
 line-height: 1.75;
}
.special__wrapper a .-desc {
 color: #FFF;
 font-weight: 700;
 margin-top: .25em;
 line-height: 1.75;
}



/* スペシャルコンテンツ for SP */
@media only screen and (max-width: 767px) {
 .special__container { padding: 45px 0 40px; }
 .special__container .-headline { width: calc(100% - 40px); font-size: var(--fs-is-24px); }
 .special__wrapper { width: calc(100% - 40px); }
 .special__wrapper > li { margin-top: 30px; }
 .special__wrapper .-title { font-size: var(--fs-is-16px); }
 .special__wrapper .-copy { font-size: clamp(var(--fs-is-12px),var(--fs-is-16px),4vw); padding: .75em 1em; }
 .special__wrapper a .-desc {  font-size: var(--fs-is-12px); }
}
/* スペシャルコンテンツ for PC */
@media print, screen and (min-width: 768px) {
 .special__container { padding: 70px 0 90px; }
 .special__container .-headline { max-width: var(--common-width-defult); font-size: var(--fs-is-34px);}
 .special__wrapper { max-width: var(--common-width-defult); }
 .special__wrapper > li { margin-top: 30px; width: 31.5%; }
 .special__wrapper > li:not(:nth-child(3n)) { margin-right: 2.5%; }
 .special__wrapper .-title { font-size: var(--fs-is-18px); padding-right: 1.5em; }
 .special__wrapper .-copy { font-size: clamp(var(--fs-is-12px),var(--fs-is-18px),1.5vw); padding: .55em 1em;  }
}


/* 取組み事例 =========================== */
.examples__item.-mark {
 display: inline-block;
 color: #FFF;
 padding: .75em 2.5em;
 line-height: 1;
 border-radius : 2em;
 font-weight: 700;
 white-space: nowrap;
    
}
.examples__item.-title {
 display: inline-block;
 font-weight: 700;
}


/* 取組み事例 for SP */
@media only screen and (max-width: 767px) {
 .examples__container { margin-top: 40px; padding: 30px 5%; }
 .examples__item.-mark { font-size: 1em; }
 .examples__item.-title { margin-top: .5em; font-size: 1.5em; line-height: 1.5; }
 .examples__container > p { margin-top: 1.5em; }
}

/* 取組み事例 for PC */
@media print, screen and (min-width: 768px) {
 .examples__container { margin-top: 80px; padding: 40px 5%; }
 .examples__wrapper.-header { display: flex; justify-content: flex-start; align-items: center; }
 .examples__item.-mark { font-size: 1.15em; }
 .examples__item.-title { margin-left: 1.5em; font-size: 1.5em; }
 .examples__container > p { margin-top: 2em; }
}


/* カテゴリートップ =========================== */
.index__container.-top {
 position: relative;
 background-color: var(--gray-bg-color);
}

.index__container.-top .index__wrapper {
 position: relative;
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
 margin-left: auto;
 margin-right: auto;
}
.index__container.-top a { display: block; transition : opacity 0.4s ease 0s; text-decoration: none;}
.index__container.-top a:hover { opacity: .5;}
.index__container.-top .index__box .-photo { box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); }


.index__container.-top .-title {
 position: relative;
 margin-top: 1rem;
 line-height: 1.5;
 font-weight: 700;
}

.index__container.-top .-title:after {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 content: "";
 background-color: #000;
 clip-path: polygon(0 0, 100% 50%, 0 100%);
 border-right: 0;
}


/* envindex__container for SP */
@media only screen and (max-width: 767px) {
 .index__container.-top { padding-bottom: 30px; }
 .index__container.-top .index__wrapper > li { margin-top: 25px; width: 48.5%; }
 .index__container.-top .index__wrapper > li:not(:nth-child(2n)) { margin-right: 3%; }
 .index__container.-top .-title { font-size:var(--fs-is-12px); padding-left: 1em; padding-right: 1.5em; }
 .index__container.-top .-title:after { right:.5em; height:7px; width: calc(7px / 2); }
}
/* envindex__container for PC */
@media print, screen and (min-width: 768px) {
 .index__container.-top { padding-bottom: 90px; }    
 .index__container .index__wrapper { max-width: var(--common-width-defult); }
 .index__container.-top .index__wrapper > li { margin-top: 60px; width: 31.3%; }
 .index__container.-top .index__wrapper > li:not(:nth-child(3n)) { margin-right: 3%; }
 .index__container.-top .-title { font-size: var(--fs-is-18px); padding-right: 1.5em; }
 .index__container.-top .-title:after { right:1em; height:14px; width: calc(14px / 2); }
}

/*
自己評価
============================*/
.-evaluation {
 margin-top: 1em;
 font-size: 0.9rem;
}
 .-evaluation { display: flex; justify-content: flex-end; }
 .-evaluation > dd + dd { margin-left: 2em; }
/* envindex__container for SP */
@media only screen and (max-width: 767px) {
 .-evaluation { width: 960px; }
}

/*
見出しが背景あり　本文が枠線あり
============================*/
dl.-defines {
 border-style: solid;
 border-width: 1px;
 text-align: center;
}
dl.-defines.-com { border-color: var(--com-main-color); }
dl.-defines.-phi { border-color: var(--phi-main-color); }
dl.-defines.-sdg { border-color: var(--sdg-main-color); }
dl.-defines.-env { border-color: var(--env-main-color); }
dl.-defines.-soc { border-color: var(--soc-main-color); }
dl.-defines.-gov { border-color: var(--gov-main-color); }
dl.-defines.-pro { border-color: var(--pro-main-color); }

dl.-defines > dt { padding: .5em; color: #FFF; font-weight: 700; }
dl.-defines.-com > dt { background-color: var(--com-main-color); }
dl.-defines.-phi > dt { background-color: var(--phi-main-color); }
dl.-defines.-sdg > dt { background-color: var(--sdg-main-color); }
dl.-defines.-env > dt { background-color: var(--env-main-color); }
dl.-defines.-soc > dt { background-color: var(--soc-main-color); }
dl.-defines.-gov > dt { background-color: var(--gov-main-color); }
dl.-defines.-pro > dt { background-color: var(--pro-main-color); }
dl.-defines > dd { padding: 1em; background-color: #FFF; }


/* headline-is-v1 for SP */
@media only screen and (max-width: 767px) {
dl.-defines { font-size: clamp(10px,16px,4.26vw); line-height: 1.5; }
dl.-defines span:not(.-inline) { display: inline-block; }    
}
/* headline-is-v1 for PC */
@media print, screen and (min-width: 768px) {
dl.-defines { font-size: clamp(14px,18px,1.5vw); line-height: 1.5; }
}




/*
イレギュラーなクラス
============================*/

/* diversity__box for SP */
@media only screen and (max-width: 820px) {
.diversity__box.-photo { display:table; margin:20px auto 0; }
.diversity__box .-inner { display:table; margin: 20px auto 0; text-align: center; }
   
}
/* diversity__box for PC */
@media print, screen and (min-width: 821px) {
.diversity__box.-photo { display:table; margin:40px auto 0; }
.diversity__box .-inner { display:inline-block; }
.diversity__box .-inner + .-inner { margin-left: 20px; }
}

.-inlinebrocks span { display: inline-block; }

.-max-w-600 { max-width: 600px; margin: auto;}



.linklist__container { display: grid; grid-gap: 10px 20px; font-size: 18px; }
.linklist__container > li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 1;
  gap: 1em 0;
}

.linklist__container > li > a {
 position: relative;
 display: inherit;
 grid-template-rows: inherit;
 grid-row: inherit;
 place-items: center;
}

.linklist__container.-clm2 { grid-template-columns: repeat(2,1fr); }
.linklist__container.-clm3 { grid-template-columns: repeat(3,1fr); }
.linklist__container.-clm4 { grid-template-columns: repeat(4,1fr); }

.linklist__container a { text-align: center; text-decoration: underline; border-bottom-style: solid; }

.linklist__container li:not(.-current) a { color: var(--gray-border-color2); border-bottom-color: var(--gray-border-color2); }

.linklist__container.-com li:not(.-current) a:hover,
.linklist__container.-com li.-current a { color: #000; border-bottom-color: #000; }
.linklist__container.-phi li:not(.-current) a:hover,
.linklist__container.-phi li.-current a { color: var(--phi-font-color); border-bottom-color: var(--phi-font-color); }
.linklist__container.-sdg li:not(.-current) a:hover,
.linklist__container.-sdg li.-current a { color: var(--soc-font-color); border-bottom-color: var(--soc-font-color); }
.linklist__container.-soc li:not(.-current) a:hover,
.linklist__container.-soc li.-current a { color: var(--gov-font-color); border-bottom-color: var(--gov-font-color); }
.linklist__container.-gov li:not(.-current) a:hover,
.linklist__container.-gov li.-current a { color: var(--gov-font-color); border-bottom-color: var(--gov-font-color); }


/* diversity__box for SP */
@media only screen and (max-width: 820px) {
.linklist__container > li { font-size: 14px; line-height: 1.5;}
.linklist__container a {padding: .5em; border-bottom-width: 3px; }
}
/* diversity__box for PC */
@media print, screen and (min-width: 821px) {
.linklist__container > li { font-size: 18px; line-height: 1.5; }
.linklist__container a { padding: 1.25em .5em; border-bottom-width: 4px;  text-align: center; }
}