@charset "UTF-8";
.TopCategory,
.TopTag,
.Special,
.ArticleArchive,
.TopGoals {
background-color: #ecf4fe;
border-left: none;
border-right: none;
}
.TopTag .ShowAll:before,
.TopGoals .ShowAllGoal:before {
background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #ecf4fe), to(rgba(236, 244, 254, 0.2)));
background: linear-gradient(0deg, #ecf4fe 25%, rgba(236, 244, 254, 0.2) 100%);
}
.TopGoals .TopGoals__inner {
padding-bottom: 0;
}
.TopCategory {
background-image: none;
}
.TopCategory .Title1.-category {
display: none;
}
.TopCategory .TopCategory__inner {
padding: 45px 20px 85px;
}
.Special .Special__image {
margin: 0 -20px 25px;
}
.About {
background-color: #ecf4fe;
background-image: linear-gradient(to right, #333, #333 1px, transparent 1px, transparent 4px);
background-position: left top;
background-repeat: repeat-x;
background-size: 4px 1px;
padding-bottom: 1px;
position: relative;
z-index: 1;
}
.About .About__inner3 {
padding: 25px 25px 0;
}
.About .About__title3 {
margin-top: 25px;
margin-bottom: 45px;
max-width: 500px;
}
@media print, screen and (min-width: 980px) {
.TopCategory .TopCategory__inner {
padding: 60px 25px 110px;
}
.About {
padding-bottom: 1px;
}
.About .About__inner3 {
margin: 0 auto;
max-width: 1310px;
overflow: hidden;
padding: 60px 25px 0;
position: relative;
}
.About .About__title3 {
margin-bottom: 60px;
width: 710px;
max-width: none;
}
}
:root {
--sdgs-gradient:
#e5001e 0% 5.882352941%,
#d7a600 5.882352941% 11.76470588%,
#00973b 11.76470588% 17.64705882%,
#c60f28 17.64705882% 23.52941176%,
#e83819 23.52941176% 29.41176471%,
#00a6d9 29.41176471% 35.29411765%,
#fabd00 35.29411765% 41.17647059%,
#970b31 41.17647059% 47.05882353%,
#ed6a02 47.05882353% 52.94117647%,
#dc007a 52.94117647% 58.82352941%,
#f5a200 58.82352941% 64.70588235%,
#d39200 64.70588235% 70.58823529%,
#427935 70.58823529% 76.47058824%,
#0075ba 76.47058824% 82.35294118%,
#28a838 82.35294118% 88.23529412%,
#004c88 88.23529412% 94.11764706%,
#003067 94.11764706% 100%;
}
#mainContent {
font-family: 'Koburina Gothic W3 JIS2004', sans-serif;
letter-spacing: normal;
background: #ecf4fe;
}
#mainContent .bold,
.sdgs_source dt,
#sdgsTop span {
font-family: 'Koburina Gothic W6 JIS2004', sans-serif;
letter-spacing: normal;
font-weight: bold;
}
#articleBody {
position: relative;
width: 100%;
background: #fff;
}
#articleBody::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 5px;
height: 100%;
background-image: linear-gradient(to bottom, var(--sdgs-gradient));
background-position: 0 0;
background-repeat: repeat-y;
background-size: 5px 1020px;
}
.articleBodyInner {
padding: 0 0 1px 1px;
}
.articleBodyInner img {
display: block;
max-width: 100%;
width: auto;
height: auto;
}
/* ページTOPへ
--------------------------------------------------*/
#sdgsTop {
position: fixed;
z-index: 100;
right: -100px;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 80px;
height: 80px;
background-color: #fff;
border-radius: 50%;
opacity: 0;
transition: opacity 0.5s ease-in-out 0s;
}
#sdgsTop.show {
right: 20px;
opacity: 1;
}
#sdgsTop.show:hover {
opacity: 0.8;
}
#sdgsTop svg {
display: block;
transform: rotate(-90deg);
}
#sdgsTop span {
display: block;
font-size: 11px;
line-height: 1.1;
color: #2ca6e0;
white-space: nowrap;
}
@media print, screen and (min-width: 769px) {
#mainContent {
padding: 40px 0 100px;
font-size: 16px;
}
#articleBody {
max-width: 960px;
margin: 0 auto;
padding: 0 min(5.2vw, 50px);
}
}
@media only screen and (max-width: 768px) {
#mainContent {
padding: 0 0 100px 0;
font-size: 14px;
}
#articleBody {
padding: 0 0 0 5px;
}
.articleBodyInner {
width: 88%;
margin: 0 auto;
}
#sdgsTop {
width: 60px;
height: 60px;
}
#sdgsTop svg {
width: 20px;
height: 20px;
}
#sdgsTop span {
font-size: 10px;
}
}
/* # =================================================================
# SDGsへの取り組み
# ================================================================= */
/* タイトル
--------------------------------------------------*/
#articleHeader h2 {
padding: 105px 0 40px;
}
#articleHeader h2 img {
width: 303px;
margin: 0 auto;
}
#articleHeader > img {
width: 760px;
margin: 0 auto 50px;
}
@media only screen and (max-width: 768px) {
#articleHeader h2 {
padding: 30px 0 4vw;
}
#articleHeader h2 img {
max-width: 80%;
}
}
/* リード
--------------------------------------------------*/
#articleHeader p {
max-width: 600px;
margin: 0 auto 1em auto;
line-height: 1.9;
}
/* SDGsとは？
--------------------------------------------------*/
#articleHeader dl {
padding:50px 0 min(9vw, 60px);
line-height: 1.8;
}
#articleHeader dt img {
width: 155px;
padding: 0 0 20px 0;
}
/* SDGsへの取り組みリンクバナー
--------------------------------------------------*/
#articleHeader div {
padding: 0 30px 20px;
}
#sdgs_activities_link {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 600px;
margin: 0 auto 48px;
padding: 12px 20px 12px 16px;
background: #2ca6e0;
border-radius: 6px;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1);
transition: opacity 0.3s ease-in-out 0s;
}
#sdgs_activities_link::before {
position: absolute;
z-index: 1;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(45deg, var(--sdgs-gradient));
background-repeat: repeat;
background-size: 100% 200px;
border-radius: 6px;
opacity: 0;
transition: opacity 0.3s ease-in-out 0s;
}
#sdgs_activities_link::after {
position: absolute;
z-index: 1;
content: '';
top: 1px;
left: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
background: #fff;
border-radius: 5px;
}
#sdgs_activities_link:hover {
opacity: 0.7;
}
#sdgs_activities_link:hover::before {
opacity: 1;
}
#sdgs_activities_link span,
#sdgs_activities_link b,
#sdgs_activities_link svg {
position: relative;
z-index: 2;
}
#sdgs_activities_link span {
width: 167px;
flex: 0 1 167px;
}
#sdgs_activities_link span img {
width: 100px;
margin: 0 auto;
}
#sdgs_activities_link b {
padding: 0 10px;
flex: 1 0;
}
#sdgs_activities_link b img {
width: 225px;
margin: 0 auto 0 0;
}
#sdgs_activities_link svg {
display: block;
height: auto;
flex: 0 0 25px;
}
@media only screen and (max-width: 768px) {
#articleHeader div {
padding: 10px calc(10vw - 46.8px) 0;
}
}
@media only screen and (max-width: 480px) {
#articleHeader div {
padding: 10px 0 0 0;
}
#sdgs_activities_link {
align-items: flex-start;
flex-wrap: wrap;
}
#sdgs_activities_link span {
flex: 1 0 100%;
}
#sdgs_activities_link span img {
margin: 0 auto 0 0;
}
#sdgs_activities_link b {
padding: 10px 10px 0 0;
}
#sdgs_activities_link svg {
transform: translate(0,-5px);
}
}
/* 目次
--------------------------------------------------*/
#sdgs_about_ancwrap {
border: solid 2px #2ca6e0;
}
#sdgs_about_ancwrap > p {
padding: 0 0 20px;
font-size: 24px;
text-align: center;
color: #2ca6e0;
}
#sdgs_about_anchor {
border-top: solid 1px #dde1dd;
border-bottom: solid 1px #dde1dd;
}
#sdgs_about_anchor > li > ul {
border-top: solid 1px #dde1dd;
border-bottom: solid 1px #dde1dd;
}
#sdgs_about_anchor > li > ul ul {
border-top: solid 1px #dde1dd;
}
#sdgs_about_anchor > li:nth-child(1),
#sdgs_about_anchor > li > ul li:not(:last-child) {
border-bottom: solid 1px #dde1dd;
}
#sdgs_about_anchor a {
display: flex;
align-items: center;
padding: 8px 0;
line-height: 1.2;
transition: opacity 0.3s ease-in-out 0s;
}
#sdgs_about_anchor a > img {
flex: 0 0 32px;
width: 32px;
height: 32px;
margin: 0 16px 0 0;
}
#sdgs_about_anchor a:hover {
opacity: 0.7;
}
#sdgs_about_anchor > li > ul > li > a::before {
content: '';
display: block;
width: 8px;
min-width: 8px;
height: 8px;
margin: 12px 20px 12px 12px;
background: #2ca6e0;
border-radius: 4px;
}
#sdgs_about_anchor > li > ul > li > ul a::before {
content: '';
display: block;
width: 8px;
min-width: 8px;
height: 8px;
margin: 12px 20px 12px 12px;
border: solid 2px #2ca6e0;
border-radius: 4px;
}
@media only screen and (max-width: 768px) {
#sdgs_about_ancwrap {
padding: min(6vw, 40px) calc(21vw - 60px) min(9vw, 60px);
border-radius: 3vw;
}
#sdgs_about_anchor > li > ul {
padding: 0 0 0 20px;
}
#sdgs_about_anchor > li > ul ul {
padding: 0 0 0 20px;
}
#sdgs_about_anchor a {
padding: 6px 0;
line-height: 1.4;
}
#sdgs_about_anchor > li > ul > li > a::before,
#sdgs_about_anchor > li > ul > li > ul a::before {
margin-right: 12px;
}
}
@media print, screen and (min-width: 769px) {
#sdgs_about_ancwrap {
padding: 40px 100px 60px;
padding: 40px min(11.7vw, 100px) 60px;
border-radius: 24px;
}
#sdgs_about_anchor > li > ul {
padding: 0 0 0 30px;
}
#sdgs_about_anchor > li > ul ul {
padding: 0 0 0 25px;
}
#sdgs_about_anchor a {
padding: 8px 0;
line-height: 1.2;
}
}
/* セクションヘッダー
--------------------------------------------------*/
.section_header {
margin: 70px 0 30px 0;
padding: min(12vw, 70px) 0 0 0;
border-top: solid 1px #ddd;
}
.section_header p {
margin: 2.5em 0 0 0;
line-height: 1.9;
}
@media only screen and (max-width: 768px) {
.section_header h2 img {
max-width: 95%;
}
.section_header_img img {
max-width: 260px;
margin: 10px auto 0;
}
}
@media print, screen and (min-width: 769px) {
.section_header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 70px 0 30px 0;
padding: min(12vw, 70px) 0 0 0;
border-top: solid 1px #ddd;
}
.section_header > div {
flex: 0 1 490px;
padding: 0 40px 0 0;
}
.section_header_img {
flex: 0 2 360px;
}
}
/* セクションタイトル／テキスト
--------------------------------------------------*/
.titlelv2 {
margin: 0 0 min(7vw, 50px);
padding: 20px 0 min(4vw, 20px) 0;
font-size: min(6vw, 25px);
border-bottom: solid 2px #2ca6e0;
}
.titlelv3 {
position: relative;
margin: 30px 0;
padding: 0 0 0 1.4em;
font-size: 18px;
}
.titlelv3::after {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 8px;
height: 100%;
padding: 4px 0;
background: #2ca6e0;
box-sizing: content-box;
transform: translate(0,-50%);
}
.sdgs_about .text {
margin: 0 0 1em 0;
}
/* 出典
--------------------------------------------------*/
.sdgs_source {
margin: 20px 0 25px;
font-size: 12px;
color: #777;
}
.sdgs_source_single {
display: flex;
}
.sdgs_source_single dt {
flex: 0 0 3em;
}
.sdgs_source li {
display: flex;
padding: 4px 0 0 0;
}
.sdgs_source a {
color: #777;
text-decoration: underline;
transition: opacity 0.3s ease-in-out 0s;
}
.sdgs_source a:hover {
opacity: 0.7;
}
/* 01
--------------------------------------------------*/
#sdgs011 {
padding: min(6vw, 40px) 0 0 0;
}
#sdgs011 > div {
width: 100%;
}
.sdgs_about011 a {
display: flex;
justify-content: space-between;
flex-direction: column;
height:100%;
padding: 20px 20px 15px 20px;
transition: opacity 0.3s ease-in-out 0s;
}
.sdgs_about011 a:hover {
opacity: 0.7;
}
.sdgs_about011 a > span {
display: block;
}
.sdgs_about011 a > span span {
display: flex;
align-items: center;
}
.sdgs_about011 i {
display: block;
padding: 1em 0 5px 0;
font-size: 14px;
line-height: 1.8;
}
.sdgs_about011 img {
flex: 0 0 64px;
width: 64px;
height: auto;
margin: 0 15px 0 0;
}
.sdgs_about011 a strong {
font-size: 16px;
line-height: 1.5;
font-family: 'Koburina Gothic W6 JIS2004', sans-serif;
}
.sdgs_about011 a span {
width: 100%;
}
.sdgs_about011 a::after {
content: url('data:image/svg+xml;utf-8,');
display: block;
width: 25px;
height: 25px;
margin: 0 0 0 auto;
}
@media only screen and (max-width: 600px) {
#sdgs011 h3 {
height: 73px;
}
#sdgs011 > div:not(:last-of-type) .sdgs_about011 {
padding: 0 0 45px 0;
}
.sdgs_about011 li {
border: solid 1px #e5e5e5;
}
.sdgs_about011 li:not(:last-child) {
border-bottom: none;
}
.sdgs_about011 i {
min-height: 4em;
}
}
@media print, screen and (min-width: 601px) {
#sdgs011 {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
#sdgs011 > div:nth-child(n+4) {
width: calc(50% - 20px);
}
#sdgs011 h3 {
height: 83px;
}
#sdgs011 > div:nth-of-type(-n+3) .sdgs_about011 {
display: grid;
padding: 0 0 55px 0;
}
#sdgs011 > div:nth-of-type(n+4) .sdgs_about011 {
height: calc(100% - 83px);
}
.sdgs_about011 li {
height: 100%;
border-left: solid 1px #e5e5e5;
border-bottom: solid 1px #e5e5e5;
}
.sdgs_about011 i {
min-height: 6em;
}
}
@media print, screen and (min-width: 601px) and (max-width: 768px) {
#sdgs011 > div:nth-of-type(-n+3) .sdgs_about011 {
grid-template-columns: 1fr 1fr;
}
.sdgs_about011 li:nth-child(-n+2) {
border-top: solid 1px #e5e5e5;
}
.sdgs_about011 li:nth-child(2n),
.sdgs_about011 li:last-child {
border-right: solid 1px #e5e5e5;
}
}
@media print, screen and (min-width: 769px) {
#sdgs011 > div:nth-of-type(-n+3) .sdgs_about011 {
grid-template-columns: 1fr 1fr 1fr;
}
.sdgs_about011 li:nth-child(-n+3) {
border-top: solid 1px #e5e5e5;
}
.sdgs_about011 li:nth-child(3n),
.sdgs_about011 li:last-child {
border-right: solid 1px #e5e5e5;
}
}
/* 02
--------------------------------------------------*/
#sdgs0211 {
padding: 30px min(calc(5vw - 8px), 30px);
background: #f5fafd;
}
#sdgs0211 img {
margin: 0 auto;
}
#sdgs021 .sdgs_source span {
flex: 0 0 2em;
}
#sdgs022 {
padding: min(7vw, 50px) 0 0 0;
}
/* MDGsからSDGsへ 残された課題とさらなる目標 */
#sdgs0221 {
position: relative;
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: min(6vw, 40px) 0;
}
#sdgs0221::before {
position: absolute;
content: url('data:image/svg+xml;utf-8,');
display: block;
width: 42px;
height: 42px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#sdgs0221 dt {
display: flex;
justify-content: center;
align-items: center;
height: 46px;
border-radius: min(4vw, 24px) min(4vw, 24px) 0 0;
}
#sdgs0221 li:nth-child(1) dt {
background: #9fd8f5;
}
#sdgs0221 li:nth-child(2) dt {
background: #a7d46f;
}
#sdgs0221 dd {
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 0 min(4vw, 24px) min(4vw, 24px);
}
#sdgs0221 li:nth-child(1) dd {
background: #ecf7fd;
}
#sdgs0221 li:nth-child(2) dd {
background: #edf6e2;
}
@media only screen and (max-width: 768px) {
#sdgs0221::before {
transform: translate(-50%,-50%) rotate(90deg);
}
#sdgs0221 li:nth-child(1) {
padding: 0 0 30px 0;
}
#sdgs0221 li:nth-child(2) {
padding: 30px 0 0 0;
}
#sdgs0221 dd {
height: 140px;
}
#sdgs0221 li:nth-child(1) dd {
padding: 10px 0 0 0;
}
}
@media print, screen and (min-width: 769px) {
#sdgs0221 {
position: relative;
display: flex;
justify-content: space-between;
width: 770px;
max-width: 100%;
}
#sdgs0221::before {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#sdgs0221 li {
width: calc(50% - 38px);
}
#sdgs0221 dd {
height: 160px;
}
}
#sdgs022 .sdgs_source li {
display: flex;
}
#sdgs022 .sdgs_source span {
flex: 0 0 1em;
}
/* 国際社会の状況 */
#sdgs023 {
padding: min(6vw, 35px) 0 1px 0;
}
@media only screen and (max-width: 768px) {
#sdgs0231 > span {
display: block;
padding: min(5vw, 40px) 0 20px;
}
#sdgs0231 > span img {
margin: 0 auto;
}
#sdgs023 .sdgs_source {
justify-content: center;
}
}
@media print, screen and (min-width: 769px) {
#sdgs0231 {
display: flex;
justify-content: space-between;
}
#sdgs0231 > div {
flex: 0 2 500px;
padding: 0 min(calc(18vw - 105px), 70px) 0 0;
}
#sdgs0231 > span {
flex: 0 1 353px;
}
}
/* 03
--------------------------------------------------*/
/* 日本のSDGsの進捗状況は？ */
#sdgs031 .sdgs_source span:first-child {
flex: 0 0 1.2em;
}
/* 2023年度のアクションプランとは？ */
#sdgs032 {
padding: 0 0 20px 0;
}
#sdgs0321 figcaption {
margin: 1.25em 0;
font-size: min(5.8vw, 24px);
text-align: center;
}
#sdgs0321 dl {
padding: 1px;
background: #ddd;
}
#sdgs0321 dl > div {
display: grid;
grid-template-columns: min(calc(20vw + 50px), 220px) auto;
grid-template-rows: repeat(5, auto);
gap: 1px;}
#sdgs0321 dt {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-size: min(3.6vw, 14px);
line-height: 1.8;
text-align: center;
background: #f7f7f7;
}
#sdgs0321 dt span::first-line {
font-size: 18px;
font-size: min(4.4vw, 18px);
}
#sdgs0321 dt::after {
position: absolute;
content: '';
top: 0;
left: -1px;
display: block;
width: min(1.6vw, 8px);
height: 100%
}
#sdgs0321 dl dt:nth-of-type(1)::after { background: #ec2326;}
#sdgs0321 dl dt:nth-of-type(2)::after { background: #ebba02;}
#sdgs0321 dl dt:nth-of-type(3)::after { background: #2bb348;}
#sdgs0321 dl dt:nth-of-type(4)::after { background: #0089c6;}
#sdgs0321 dl dt:nth-of-type(5)::after { background: #d39200;}
#sdgs0321 dd {
padding: 12px min(2.7vw, 20px);;
background: #fff;
}
#sdgs0321 strong {
display: block;
padding: 0 0 3px 0;
}
#sdgs0321 li {
padding: 0 0 0 1em;
text-indent: -1em;
}
/* 04
--------------------------------------------------*/
/* 地域の取り組み状況は？ */
#sdgs0411 figcaption {
padding: min(5.5vw, 40px) 0 30px;
}
@media only screen and (max-width: 768px) {
#sdgs041g1 figcaption img {
margin: 10px auto;
}
}
@media print, screen and (min-width: 769px) {
#sdgs041g1 figcaption {
display: flex;
justify-content: center;
padding: 60px 0 30px;
}
}
#sdgs041g2 figcaption img {
margin: 0 auto;
}
#sdgs0411 figure > img {
margin: 0 auto 40px;
}
#sdgs041g2 .sdgs_source {
justify-content: center;
padding: 0 0 30px 0;
}
/* 先進的な取り組みとは？ */
#sdgs0412 > p a {
color: #2ca6e0;
text-decoration: underline;
transition: opacity 0.3s ease-in-out 0s;
}
#sdgs0412 > p a:hover {
opacity: 0.7;
}
#sdgs0412 figcaption {
margin: min(12vw, 80px) 0 30px
}
#sdgs0412a {
display: grid;
gap: 24px 20px;
}
@media only screen and (max-width: 767px) {
#sdgs0412a {
grid-template-columns: 1fr;
}
}
@media print, screen and (min-width: 768px) {
#sdgs0412a {
grid-template-columns: 1fr 1fr;
}
}
#sdgs0412a > li:nth-child(1) { border: solid 1px #ec2326;} #sdgs0412a > li:nth-child(1) h4 { background: #ec2326;}
#sdgs0412a > li:nth-child(2) { border: solid 1px #ebba02;} #sdgs0412a > li:nth-child(2) h4 { background: #ebba02;}
#sdgs0412a > li:nth-child(3) { border: solid 1px #53abbe;} #sdgs0412a > li:nth-child(3) h4 { background: #53abbe;}
#sdgs0412a > li:nth-child(4) { border: solid 1px #0089c6;} #sdgs0412a > li:nth-child(4) h4 { background: #0089c6;}
#sdgs0412a > li:nth-child(5) { border: solid 1px #99c464;} #sdgs0412a > li:nth-child(5) h4 { background: #99c464;}
#sdgs0412a > li:nth-child(6) { border: solid 1px #2c9825;} #sdgs0412a > li:nth-child(6) h4 { background: #2c9825;}
#sdgs0412a h4 {
display: flex;
justify-content: center;
align-items: center;
height: 55px;
font-size: 16px;
color: #fff;
}
#sdgs0412a dl {
display: flex;
justify-content: space-between;
flex-direction: column;
height: calc(100% - 55px);
padding: 20px 20px 0 20px;
}
#sdgs0412a dt {
height: 40px;
font-size: 16px;
}
#sdgs0412a dd {
display: flex;
justify-content: space-between;
flex-direction: column;
height: calc(100% - 40px);
}
#sdgs0412a p {
line-height: 1.8;
}
@media only screen and (max-width: 767px) {
#sdgs0412a p {
padding: 0 0 1em 0;
}
}
@media print, screen and (min-width: 768px) {
#sdgs0412a p {
padding: 0 0 2em 0;
}
}
#sdgs0412a b {
position: relative;
display: flex;
align-items: center;
height: 85px;
font-size: 15px;
line-height: 1.5;
font-weight: 400;
}
#sdgs0412a b::before {
position: absolute;
content: '';
top: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ddd, #ddd 1px, transparent 1.5px, transparent 1.5px);
background-position: left top;
background-repeat: repeat-x;
background-size: 3px 1px;
}
#sdgs0412a img {
flex: 0 0 50px;
width: 50px;
height: 50px;
margin: 0 15px 0 0;
}
/* 企業の取り組み状況は？ */
#sdgs042 {
margin: min(9vw, 60px) 0 0 0;
}
#sdgs042g1 figcaption {
padding: 30px 0 30px;
}
#sdgs042g1 figcaption img {
margin: 0 auto;
}
#sdgs042g2 figcaption {
padding: 40px 0 20px;
}
@media only screen and (max-width: 579px) {
#sdgs042g2 figcaption img {
margin: 10px auto;
}
}
@media print, screen and (min-width: 580px) {
#sdgs042g2 figcaption {
display: flex;
justify-content: center;
padding: 50px 0 30px;
}
}
#sdgs0421 figure > img {
margin: 0 auto 20px;
}
#sdgs042g1 .sdgs_source {
justify-content: center;
padding: 0 0 30px 0;
}
#sdgs0421 .sdgs_note small {
display: block;
font-size: 11px;
color: #777;
}
#sdgs042g1 .sdgs_note {
max-width: 500px;
margin: 0 auto;
}
#sdgs042g1 .sdgs_note small {
padding: 0 0 0 2.6em;
text-indent: -2.6em;
}
#sdgs042g2 .sdgs_note {
max-width: 380px;
margin: 0 auto;
}
#sdgs042g2 .sdgs_source {
justify-content: center;
margin: 40px 0 0 0;
}
/* ベネッセグループの取り組み */
#sdgs0422 {
margin: min(15vw, 90px) 0 0 0;
}
#sdgs0422 > p:nth-of-type(2) {
margin: 3em 0 2em 0;
}
#sdgs0422a li {
padding: 0 0 25px 0;
}
.sdgs0422panel {
position: relative;
display: flex;
transition: opacity 0.3s ease-in-out 0s;
}
.sdgs0422panel:hover {
opacity: 0.7;
}
.sdgs0422panel::after {
position: absolute;
content: url('data:image/svg+xml;utf-8,');
display: block;
width: 25px;
height: 25px;
right: 15px;
bottom: 15px;
}
.sdgs0422panel > b {
position: relative;
display: block;
overflow: hidden;
}
#sdgs0422a .sdg_ico {
position: absolute;
right: 0;
bottom: 0;
}
.sdgs0422panel > span strong {
font-size: 16px;
}
.sdgs0422panel > span span {
display: block;
padding: 0.8em 0 0 0;
line-height: 1.8;
}
#sdgs0422a small {
display: block;
padding: 10px 0 0 1.5em;
font-size: 12px;
line-height: 1.4;
color: #666;
text-indent: -1.5em;
}
@media only screen and (max-width: 768px) {
#sdgs0422a {
max-width: 560px;
margin: 0 auto;
}
.sdgs0422panel {
flex-wrap: wrap;
}
.sdgs0422panel > b {
width: 100%;
}
#sdgs0422a .sdg_pic {
position: relative;
}
#sdgs0422a .sdg_ico {
width: min(calc(9.22vw + 30.8px), 90px);
height: min(calc(9.22vw + 30.8px), 90px);
}
.sdgs0422panel > span {
width: 100%;
padding: 20px 10px 40px 15px;
border: solid 1px #ddd;
border-top: none;
}
.sdgs0422panel > span span {
font-size: 14px;
}
}
@media print, screen and (min-width: 769px) {
.sdgs0422panel {
align-items: stretch;
background: #ddd;
}
.sdgs0422panel > b {
flex: 0 0 280px;
}
#sdgs0422a .sdg_pic {
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-50%);
width: auto;
max-width: none;
min-width: 280px;
height: 100%;
}
#sdgs0422a .sdg_ico {
width: 64px;
height: 64px;
}
.sdgs0422panel > span {
display: block;
flex: 0 1 578px;
margin: 1px 1px 1px 0;
min-height: 198px;
padding: 20px 80px 20px 30px;
background: #fff;
}
.sdgs0422panel > span span {
font-size: 15px;
}
}
#sdgs0422 > a {
display: flex;
justify-content: center;
align-items: center;
width: 240px;
height: 50px;
margin: 30px auto 70px;
font-size: 15px;
color: #2ca6e0;
background: #fff;
border: solid 2px #2ca6e0;
border-radius: 25px;
transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s, border 0.3s ease-in-out 0s;
}
#sdgs0422 > a:hover {
color: #fff;
background: #2ca6e0;
border: solid 2px #2ca6e0;
}
/* ｢ESG投資｣ や ｢PRI｣ とは？ */
#sdgs0423 p.text:last-of-type {
margin: 0 0 2.5em 0;
}
/* 05
--------------------------------------------------*/
#sdgs051 {
margin: 75px 0;
}
/* 毎日の生活の中でできるSDGs */
#sdgs0511 {
margin: 50px 0 0 0;
}
#sdgs0511 > li {
border: solid 1px #ddd;
}
#sdgs0511 > li:not(:last-child) {
border-bottom: none;
}
#sdgs0511 .sdgs_img img {
width: 226px;
margin: 0 auto;
}
#sdgs0511 p {
line-height: 1.8;
}
#sdgs0511 .sdgs_source {
margin: 20px 0 10px 0;
}
@media only screen and (max-width: 768px) {
#sdgs0511 > li {
padding: 20px;
}
#sdgs0511 h4 {
margin: 10px 0 0.6em 0;
font-size: 16px;
}
#sdgs0511 p {
font-size: 14px;
}
}
@media print, screen and (min-width: 769px) {
#sdgs0511 > li {
display: flex;
align-items: center;
}
#sdgs0511 .sdgs_img {
flex: 0 0 280px;
}
#sdgs0511 .sdgs_txt {
flex: 0 1 580px;
padding: 30px 30px 30px 0;
}
#sdgs0511 h4 {
margin: 0 0 0.6em 0;
font-size: 18px;
}
#sdgs0511 p {
font-size: 15px;
}
}
/* アイディアシート
--------------------------------------------------*/
#sdgs06 {
background: #f7f7f7;
border-radius: 12px;
margin: 0 0 70px 0;
}
#sdgs061 h2 img {
margin: 0 auto 10px auto;
}
#sdgs061 p {
line-height: 1.8;
}
#sdgs061 > a {
display: block;
width: 247px;
max-width: 100%;
margin: 0 auto;
}
#sdgs061 > a img {
border: solid 1px #2ca6e0;
border-radius: 4px;
box-sizing: content-box;
overflow: hidden;
}
#sdgs062 {
display: flex;
justify-content: center;
align-items: center;
width: 240px;
max-width: 100%;
height: 50px;
font-size: 15px;
color: #2ca6e0;
background: #fff;
border: solid 2px #2ca6e0;
border-radius: 25px;
transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s, border 0.3s ease-in-out 0s;
}
#sdgs062 path {
transition: fill 0.3s ease-in-out 0s;
}
#sdgs062:hover {
color: #fff;
background: #2ca6e0;
border: solid 2px #2ca6e0;
}
#sdgs062:hover path {
fill: #fff;
}
#sdgs062 span {
margin: 0 10px 0 0;
}
@media print, screen and (min-width: 500px) {
#sdgs061 h2 {
display: flex;
}
#sdgs061 h2 img {
margin: 0;
}
}
@media only screen and (max-width: 768px) {
#sdgs06 {
padding: 40px 8.3vw 20px;
}
#sdgs061 p {
margin: 20px 0;
font-size: 14px;
}
#sdgs062 {
margin: 20px auto;
}
}
@media print, screen and (min-width: 769px) {
#sdgs06 {
padding: 50px;
}
#sdgs061 {
display: flex;
align-items: flex-start;
}
#sdgs061 > div {
padding: 0 40px 0 0;
}
#sdgs061 p {
margin: 20px 0 35px;
font-size: 15px;
}
#sdgs061 > a {
flex: 0 0 247px;
margin: max(calc(188px - 20vw), 15px) 0 0 0;
}
}