sdgs.scss
$tb: "(max-width: 1024px)";
$sp: "(max-width: 767px)";
$viewport: 750;
@function pxtovw($num, $width: $viewport) {
@return (1vw * $num / $width * 100);
}
@mixin contContainer {
width: 100%;
padding: 0 4rem;
margin: 0 auto;
@media #{$tb}{
padding: 0 6%;
}
@media #{$sp}{
padding: 0 pxtovw(40);
}
}
@mixin contHeader {
}
@mixin contTxt {
font-size: 1.8rem;
line-height: 3.6rem;
color: #111111;
letter-spacing: 0.04em;
font-weight: 500;
//font-feature-settings: "palt";
em,strong {
color: #004fa5;
}
@media #{$tb}{
}
@media #{$sp}{
font-size: pxtovw(28);
line-height: pxtovw(50);
}
}
@mixin fitImg {
display: block;
margin-left: auto;
margin-right: auto;
-o-object-fit: cover;
object-fit: cover;
@media #{$sp}{
width: 100%;
}
}
@mixin flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@mixin flex-jcC {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@mixin flex-jcSB {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@mixin flex-aiC {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@mixin flex-diCL {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@mixin boxShadow {
-moz-box-shadow: 0 0 10px 1px rgba($color: #535353, $alpha: .2);
-webkit-box-shadow: 0 0 10px 1px rgba($color: #535353, $alpha: .2);
-ms-box-shadow: 0 0 10px 1px rgba($color: #535353, $alpha: .2);
box-shadow: 0 0 10px 1px rgba($color: #535353, $alpha: .2);
}
@mixin filter-boxShadow {
-webkit-filter: drop-shadow(1px 1px 10px rgba($color: #535353, $alpha: .2));
filter: drop-shadow(1px 1px 10px rgba($color: #535353, $alpha: .2));
}
/*
---------------------------------*/
.sdgs {
&-wrap {
max-width: 770px;
margin: auto;
* {box-sizing: border-box;}
.d-block {
display: none;
@media #{$sp}{
display: block;
}
}
.d-md-block {
display: block;
@media #{$sp}{
display: none;
}
}
}
&-head {
padding-bottom: 7rem;
@media #{$sp}{
padding-bottom: 7vw;
}
&__ttl {
margin-bottom: 3rem;
aspect-ratio: 770/480;
@media (max-width:767px) {
position: relative;
&::after{
content: "";
background-image: url(../images/sdgs-page/add-k.png);
background-repeat: no-repeat;
background-size: contain;
width: 64vw;
height: 38vw;
position: absolute;
top: 50%;
left: 45%;
transform: translate(-45%,-50%);
z-index: 3;
}
}
img {
@media (max-width:480px) {
width: 100%;
}
}
@media #{$sp}{
margin-bottom: 3vw;
}
}
&__container {
@include contContainer();
}
&__txt {
@include contTxt();
margin-bottom: 2rem;
@media #{$sp}{
margin-bottom: 5vw;
}
}
&__img {
margin-bottom: 2rem;
@media #{$sp}{
margin-bottom: 5vw;
}
}
}
&-cont {
padding-bottom: 5rem;
&__container {
@include contContainer();
}
&__ttl {
margin-bottom: 2.5rem;
@media #{$sp}{
margin-bottom: 5vw;
}
}
&__subttl {
margin-bottom: 3.5rem;
@media #{$sp}{
margin-bottom: 5vw;
}
}
&__txt {
@include contTxt();
margin-bottom: 2rem;
@media #{$sp}{
margin-bottom: 5vw;
}
}
&__img {
margin-bottom: 3.5rem;
@media #{$sp}{
margin-bottom: 5vw;
}
}
&__list {
margin-top: 3.5rem;
@media #{$sp}{
margin-top: 5vw;
}
}
&__item {
@include flex();
margin-bottom: 4rem;
&.row-reverse {
flex-direction:row-reverse;
.sdgs-cont__item__thum {
margin-left: 0;
margin-right: 2rem;
}
}
&__txt {
width: calc(100% - 325px - 2rem);
}
&__thum {
margin-left: 2rem;
}
@media #{$sp}{
margin-bottom: 0;
&.row-reverse {
flex-direction:column-reverse;
}
&.collum-reverse {
flex-direction:column-reverse;
}
&__txt {
width: 100%;
}
&__thum {
width: 100%;
margin: 0 0 5vw!important;
img {
width: 100%;
}
}
}
}
&__box {
margin-bottom: 3rem;
border-radius: 1rem;
border: 3px solid #3bcacf;
border-top: none;
overflow: hidden;
&__ttl {
padding-top: 1rem;
background-color: #3bcacf;
}
&__txt {
padding: 1.5rem 2rem 0;
@include contTxt();
}
&__img {
margin-top: 3.5rem;
margin-bottom: 4.5rem;
}
@media #{$sp}{
margin-bottom: 5vw;
&__txt {
padding: 3vw pxtovw(20) 0;
}
&__img {
margin-top: 3vw;
margin-bottom: 3vw;
}
}
}
}
}