<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";

.sdgs {
	background-image: url("../images/company/csr/sdgs/image.jpg");
}

#outline {
max-width: 1200px;
padding: 40px 20px;
margin: 0 auto 100px auto;
text-align: center;
background-color: #f4fafd;
}

#outline div {
max-width: 250px;
margin: 0 auto 10px auto;
}

#outline h2 {
font-family: 'GenEiKoburiMinT-R', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
font-size: 200%;
color: #004DA0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0 0 10px 0;
}

#outline h2 span {
display: block;
}

#outline p {
font-size: 110%;
letter-spacing: 0.03em;
}

#outline p span {
display: block;
}

#detail {
max-width: 1240px;
padding: 20px 20px 0 20px;
margin: 0 auto 100px auto;
}

#detail section {
display: flex;
justify-content: space-between;
margin: 0 0 100px 0;
}

#detail section:nth-child(2n) {
flex-direction: row-reverse;
}

#detail section:last-child {
margin: 0;
}

#detail section div:first-child {
width: 42%;
}

#detail section div:last-child {
width: 55%;
}

#detail section h3 {
height: 80px;
padding: 0 0 0 100px;
margin: 0 0 20px 0;
display: flex;
align-items: center;
font-family: 'GenEiKoburiMinT-R', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
font-size: 170%;
color: #004DA0;
line-height: 1.2;
background-size: 80px 80px;
background-position: left center;
background-repeat: no-repeat;
}

#icon_9_11 {
padding: 0 0 0 185px !important;
background-image: url("../images/company/csr/sdgs/icon_9_11.jpg");
background-size: 165px 80px !important;
}

#icon_12 {
background-image: url("../images/company/csr/sdgs/icon_12.jpg");
}

#icon_13 {
background-image: url("../images/company/csr/sdgs/icon_13.jpg");
}

#icon_8 {
background-image: url("../images/company/csr/sdgs/icon_8.jpg");
}

#detail section p {
margin: 0 0 35px 0;
}

.product {
display: flex;
flex-wrap: wrap;
margin: 0 0 35px 0;
}

.product li a {
padding: 6px 8px;
margin: 0 5px 5px 0;
display: block;
border: 1px solid #C8C8C8;
font-size: 90%;
color: #444;
text-align: center;
line-height: 1;
text-decoration: none;
transition: 0.3s;
}

.kpi {
width: 100% !important;
padding: 10px 10px 10px 60px;
color: #666;
background-color: #f3fbfa;
background-image: url("../images/company/csr/sdgs/icon_kpi.png");
background-size: 40px 40px;
background-position: 10px 10px;
background-repeat: no-repeat;
}

.kpi dl {
display: flex;
}

.kpi dl dt {
padding: 0 5px 0 0;
}

.kpi dl dt::after {
content: "／";
padding: 0 0 0 5px;
}

#button {
margin: 0 0 100px 0;
}

#button a {
width: 500px;
padding: 16px 0;
margin: 0 auto;
display: block;
border: 2px solid #C8C8C8;
font-size: 170%;
color: #444;
text-align: center;
line-height: 1;
text-decoration: none;
transition: 0.3s;
background-image: url("../images/company/csr/sdgs/icon_pdf.jpg");
background-size: 30px 36px;
background-position: 88% center;
background-repeat: no-repeat;
}

#button a span {
padding: 0 40px 0 0;
}

.hover_2 {
position: relative;
border: 2px solid #C8C8C8;
transition: 0.2s;
}

.hover_2::before,
.hover_2::after,
.hover_2 span::before,
.hover_2 span::after {
width: 0;
height: 0;
position: absolute;
content: '';
border: 2px solid transparent;
transition: 0.2s;
z-index: 2;
visibility: hidden;
}

.hover_2::before {
top: -2px;
left: -2px;
border-left-color: #004DA0;
}

.hover_2::after {
bottom: -2px;
right: -2px;
border-right-color: #004DA0;
}

.hover_2 span::before {
bottom: -2px;
left: -2px;
border-bottom-color: #004DA0;
}

.hover_2 span::after {
top: -2px;
right: -2px;
border-top-color: #004DA0;
}

.hover_2:hover::before,
.hover_2:hover::after {
height: 100%;
visibility: visible;
}

.hover_2:hover span::before,
.hover_2:hover span::after {
width: 100%;
visibility: visible;
}

#commentary {
max-width: 1040px;
padding: 0 20px;
margin: 0 auto;
}

#commentary div h4 {
height: 30px;
padding: 0 0 0 40px;
display: flex;
align-items: center;
border: 1px solid #004da0;
font-size: 120%;
color: #fff;
line-height: 1;
background-color: #004da0;
background-image: url("../images/company/csr/sdgs/logo_sdgs_2.jpg");
background-size: 30px 28px;
background-position: left center;
background-repeat: no-repeat;
}

#commentary div p {
padding: 10px 20px;
border-right: 1px solid #004da0;
border-bottom: 1px solid #004da0;
border-left: 1px solid #004da0;
}


@media screen and (max-width: 700px) {
#outline {
margin: 0 auto 50px auto;
text-align: justify;
}

#outline div {
max-width: 150px;
margin: 0 0 10px 0;
}

#outline h2 {
font-size: 150%;
color: #004DA0;
}

#outline p span {
display: inline;
}

#detail {
margin: 0 auto 50px auto;
}

#detail section {
flex-direction: column;
margin: 0 0 50px 0;
}

#detail section:nth-child(2n) {
flex-direction: column;
}

#detail section div:first-child {
width: 100%;
margin: 0 0 20px 0;
}

#detail section div:last-child {
width: 100%;
}

#detail section h3 {
height: auto;
padding: 45px 0 0 0;
margin: 0 0 15px 0;
display: block;
font-size: 150%;
background-size: 40px 40px;
background-position: left top;
}

#icon_9_11 {
padding: 45px 0 0 0 !important;
background-size: 85px 40px !important;
}

#detail section p {
margin: 0 0 15px 0;
}

.product {
margin: 0 0 20px 0;
}

.kpi {
padding: 10px 10px 0 40px;
background-size: 25px 25px;
}

.kpi dl {
flex-direction: column;
padding: 0 0 10px 0;
}

.kpi dl dt {
padding: 0;
}

.kpi dl dt::before {
content: "・";
}

.kpi dl dt::after {
content: "";
padding: 0;
}

.kpi dl dd {
padding: 0 0 0 15px;
}

#button {
margin: 0 0 50px 0;
padding: 0 20px;
}

#button a {
width: 100%;
padding: 12px 0;
font-size: 120%;
background-size: 20px 24px;
background-position: 92% center;
}

#commentary div p {
padding: 10px;
}
}</pre></body></html>