﻿


.pagetitle-box.-sdgsmark {
 position: absolute;
 width: 90%;
 max-width: 1380px;
 left: 50%;
 transform: translateX(-50%);
 text-align: right;
}

.pagetitle-box.-sdgsmark img { max-width: 51.6%; }

.def-container.-lead { text-align: left; font-weight: 500;}


@media screen and (min-width: 769px){
.pagetitle-container { background-image: url("../img/sustainability/mainimage_bg_pc.jpg"); }
.pagetitle-wrapper {
 width: 94%;
 max-width: none;
}
.def-container.-lead { margin: 50px auto 0; }
.pagetitle-box.-sdgsmark { bottom:35px;} 
.pagetitle-box.-sdgsmark img { max-width: 51.6%; }
}
@media screen and (max-width: 768px){
.pagetitle-container { background-image: url("../img/sustainability/mainimage_bg_sp.jpg"); }
.pagetitle-wrapper {
 width: 94%;
 max-width: none;
 height: calc(100% - 20px);
}
.def-container.-lead { margin: 25px auto 0; }
.pagetitle-box.-sdgsmark { bottom:15px;} 
.pagetitle-box.-sdgsmark img { max-width: 33.3%; }
}




.sdgs-wrapper {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 border-top:solid 2px #000;
 text-align: left;
}

.sdgs-headline {
 font-weight: 700;
 letter-spacing: .1em;
}


.sdgs-icons {
 display: flex;
 justify-content: flex-start;
}

.sdgs-icons > li { width: 13.6%;}
.sdgs-icons > li + li { margin-left: 10px; }



@media screen and (min-width: 1025px){
.sdgs-container { padding-bottom: 160px; }
.sdgs-wrapper { margin: 70px auto 0; padding-top: 70px; }
.sdgs-wrapper:nth-child(odd) .sdgs-photo { order: 1; }
.sdgs-wrapper:nth-child(odd) .sdgs-detail { order: 2; }
.sdgs-wrapper:nth-child(even) .sdgs-photo {order: 2; }
.sdgs-wrapper:nth-child(even) .sdgs-detail { order: 1; }
.sdgs-wrapper > div { width: 48.5%; }
.sdgs-headline { font-size: clamp(20px,28px,3vw); }
.sdgs-icons { margin-top: 36px; }
.sdgs-icons > li + li { margin-left: 10px; }
.sdgs-desc { margin-top: 1.5em; }
}
@media screen and (max-width: 1024px){
.sdgs-container { padding-bottom: 60px; }
.sdgs-wrapper { margin: 20px auto 0; padding-top:20px; }
.sdgs-wrapper .sdgs-photo {order: 2; width: 100%; margin-top: 20px; }
.sdgs-wrapper .sdgs-detail { order: 1; width: 100%; }  
.sdgs-headline { font-size: clamp(14px,18px,5vw); }
.sdgs-icons { margin-top: 10px; }
.sdgs-icons > li + li { margin-left: 5px; }
.sdgs-desc { margin-top: 1em; }

}


/*
下部共通要素
================================ */
.laserlinks-container {
background-color: var(--color-gray);
}
.laserlinks-wrapper {
display: flex;
justify-content: flex-start;           
flex-wrap: wrap;
width: 100%;
max-width: 1360px;
margin: 0 auto;
text-align: left;
}
.laserlinks-wrapper .comp-link {
width: 100%;
}
.laserlinks-wrapper .comp-link:not(.align-is-center) {
text-align: left;
}
@media screen and (min-width: 1025px){
.laserlinks-container {
padding: 40px 5% 120px;
}
.laserlinks-wrapper.-lasertop {
  margin: 50px auto 0;
padding-bottom: 20px;
}   
 .laserlinks-wrapper > li {
  width: 48%;
  margin-top: 20px;
  margin-right: 4%;
}
.laserlinks-wrapper > li:nth-child(2n) {
  margin-right: 0;
}
.laserlinks-wrapper .comp-link:not(.align-is-center){ text-align: left; }
.laserlinks-wrapper .comp-link.align-is-center { padding: 2em 2em; }
}
@media screen and (max-width: 1024px){
.laserlinks-container {
padding: 10px 5% 30px;
}
.laserlinks-wrapper.-lasertop {
  margin: 10px auto 0;
padding-bottom: 10px;
}
 .laserlinks-wrapper > li {
  width: 100%;
  margin-top:10px;
}
}