@charset "UTF-8";

/*
==================================================

   SDGsの取り組み

==================================================
*/



/*
==================================================
  ボディヘッダー
==================================================
*/

#bodyheader {
background: var(--accent1-col) url(../../image/header/sdgs.jpg) no-repeat center / cover;
}

/* 英語表記 */
#bodyheader p.en {
color: rgba(255, 255, 255, 0.4);
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

}
/* ----- /899 ----- */



/*
==================================================
  コンテンツ
==================================================
*/

#contents section {

}

/* ----- SDGsへの取り組み ----- */
#initiative {
padding: 100px 0 80px;
}

#initiative div.img {
max-width: 800px;
margin: 50px auto 0;
}

/* ----- HSグループの具体的な取り組み ----- */
#specific {
padding: 100px 0 80px;
background: var(--light-bgcol);
}

#specific section {
margin: 50px 0;
background: #ffffff;
}
#specific section:last-child {
margin: 50px 0 0;
}

#specific section header {
position: relative;
display: flex;
align-items: center;
height: 200px;
margin: 0 0 50px;
}
#specific section header.specific1 {
background: url(../../company/sdgs/image/specific1.jpg) no-repeat center / cover;
}
#specific section header.specific2 {
background: url(../../company/sdgs/image/specific2.jpg) no-repeat center / cover;
}
#specific section header.specific3 {
background: url(../../company/sdgs/image/specific3.jpg) no-repeat center / cover;
}
#specific section header.specific4 {
background: url(../../company/sdgs/image/specific4.jpg) no-repeat center / cover;
}
#specific section header.specific5 {
background: url(../../company/sdgs/image/specific5.jpg) no-repeat center / cover;
}
#specific section header::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
border-width: 0 0 120px 75px;
border-style: solid;
border-color: transparent transparent var(--accent1-col) transparent;
}

#specific section h3 {
position: relative;
display: inline-block;
margin: 0 0 0 50px;
padding: 2px 10px;
background: #ffffff;
font-size: 1.8rem;
color: var(--accent1-col);
font-weight: 900;
line-height: 1.4;
z-index: 1;
}

#specific section div.wrap {
padding: 0 50px 50px;
}

#specific section ul.mark {
display: flex;
column-gap: 15px;
margin: 0 0 30px;
}

#specific section dl dt {
margin: 0 0 20px;
font-size: 1.6rem;
font-weight: bold;
line-height: 1.4;
}

#specific section dl ul {
margin: 0 0 0 1.5em;
list-style-type: disc;
}
#specific section dl ul li {
margin: 0 0 10px;
font-size: 1.1rem;
font-weight: bold;
line-height: 1.4;
}
#specific section dl ul li:last-child {
margin: 0;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- SDGsへの取り組み ----- */
#initiative {
padding: 50px 0;
}

#initiative div.img {
margin: 40px auto 0;
}

/* ----- HSグループの具体的な取り組み ----- */
#specific {
padding: 50px 0;
}

#specific section {
margin: 40px 0;
}
#specific section:last-child {
margin: 40px 0 0;
}

#specific section header {
position: relative;
display: flex;
align-items: center;
height: 200px;
margin: 0 0 40px;
}
#specific section header::after {
border-width: 0 0 80px 50px;
}

#specific section h3 {
margin: 0 0 0 5px;
padding: 2px 7px;
background: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
line-height: 1.5;
}

#specific section div.wrap {
padding: 0 10px 30px;
}

#specific section ul.mark {
column-gap: 10px;
}
#specific section ul.mark li {
max-width: 140px;
}

#specific section dl dt {
font-size: 1.1rem;
}

#specific section dl ul {
margin: 0 0 0 1.5em;
}
#specific section dl ul li {
font-size: 1rem;
line-height: 1.6;
}

}
/* ----- /899 ----- */