@charset "utf-8";

.pc {
display: block;
}
.sp {
display: none;
}

#mf1 .cbox {
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 3vw;
position: relative;
}
#mf1 .cbox .tbox {
width: 70%;
margin: 0 5% 0 0;
}
#mf1 h2 {
margin: 0 0 20px;
color: #008000;
font-size: 32px;
font-weight: 600;
}
#mf1 .ibox {
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 auto;
}
#mf1 .cboxb {
display: flex;
justify-content: center;
align-items: center;
border: 4px solid #000;
border-radius: 5px;
margin: 5vw 0;
padding: 3vw;
}
#mf1 h3 {
margin: 0 0 20px;
font-size: 30px;
font-weight: 600;
}
#mf1 .cboxb .tbox {
width: 70%;
margin: 0 5% 0 0;
}
#mf1 .cboxb img {
width: 100%;
margin: 1em 0 0;
}

.abox {
display: flex;
justify-content: center;
align-items: center;
}
#action1 .tbox {
width: 55%;
}
.abox .tbox {
width: 70%;
margin: 0 3% 0 0;
}
.abox h3 {
margin: 0 0 20px 0;
color: #008000;
font-size: 28px;
font-weight: 600;
line-height: 4rem;
}
.abox h3 img {
width: 10rem;
margin: 0 1rem 0 0;
}
.abox ul {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 0 0 auto;
padding: 30px 0 0;
}
.abox ul li {
width: 100px;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0 0;
}
#action1 + .ibox,
#action2 + .ibox{
margin: 3em auto;
text-align: center;
}
.abox + p {
height: 3px;
margin: 3em auto 2em;
text-align: center;
}
#action2 .tbox {
width: 70%;
}
#action3 ul,
#action4 ul,
#action5 ul,
#action6 ul{
max-width: 300px;
}

#mf2 .mf-inner {
padding: 3rem 0 5rem;
margin: 3vw auto;
background: url(../img/top/bk4.jpg) left top repeat;
position: relative;
text-align: center;
font-size: 20px;
line-height: 2;
}
#mf2 .mf-inner span {
font-size: 24px;
font-weight: 600;
}
#mf2 .mf-inner:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 500px solid #fff;
border-left: 500px solid #fff;
position: absolute;
bottom: 0;
left: 0;
}

#mf3 .ibox {
text-align: center;
margin: 0 0 3vw;
}
#mf3 .cbox {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 2vw;
padding: 1em 2em;
background: url(../img/top/bk3.gif) left top repeat;
border: 5px solid #000;
border-radius: 10px;
position: relative;
}
#mf3 .cbox p {
width: 80%;
margin: 0 5% 0 0;
}
#mf3 .cbox .ibox {
width: 15%;
margin: 0;
}
#mf3 .btnbox {
text-align: center;
margin: 3vw auto 0;
}
#mf3 .btnbox:before {
content: url("../img/sdgs/i5.png");
margin: 0 30px 0 0;
}
#mf3 .btnbox img {
vertical-align: revert;
}

#mf4 .mf-inner {
margin: 3vw auto 0;
text-align: center;
}
#mf4 p {
font-size: 20px;
font-weight: 600;
}
#mf4 p:first-child {
width: fit-content;
width: -moz-fit-content;
margin: 0 auto 1em;
background: linear-gradient(transparent 70%, #ffff14 0%);
font-size: 24px;
color: #2c962c;
}

#contents {
padding-bottom: 15px;
}

@media screen and (max-width: 1024px) {

#contents .mf-frame {
width: auto;
}
#contents .mf-inner{
padding: 0 2vw;
}
.abox {
display: block;
padding: 0 2vw;
}
.abox .tbox,
#action1 .tbox,
#action2 .tbox{
width: auto;
}
#action1 + .ibox img {
width: 90vw !important;
}
#action3 ul, #action4 ul, #action5 ul, #action6 ul {
max-width: none;
}
#contents #mf2 .mf-inner {
padding: 5vw 0 7vw;
}
#mf2 .mf-inner::before {
border-right: 48vw solid #fff;
border-left: 48vw solid #fff;
}
}

@media screen and (max-width: 980px) {

.pc {
display: none;
}
.sp {
display: block;
}
#mf1 h2 {
line-height: 1.5;
}
#mf1 .cbox {
margin: 0 0 8vw;
}
#mf1 .cbox .tbox {
width: 100%;
}
#mf1 .cbox .ibox img{
width: 30vw !important;
position: absolute;
top: 3vw;
right: 3vw;
opacity: .2;
z-index: -1;
}
#mf1 .cboxb {
display: block;
padding: 5vw 4vw;
}
#mf1 .cboxb .tbox {
width: 100%;
margin: 0 0 3vw;
}
#action1 + .ibox img {
width: 80vw !important;
}
#mf4 p:first-child {
line-height: 1.5;
}
}

@media screen and (max-width: 640px) {

#mf1 h2 {
font-size: 7vw;
}
#mf1 .cbox {
margin: 0 0 15vw;
}
#mf1 .cbox .ibox img {
width: 80vw !important;
top: 15vw;
}
.abox h3 {
font-size: 5vw;
line-height: 2;
margin: 0 0 .5em;
}
.abox h3 img {
display: block;
}
.abox ul li {
width: 20%;
}
.abox ul li img {
width: 95% !important;
}
#contents #mf2 .mf-inner {
margin: 10vw 0;
padding: 5vw 0 18vw;
}
#mf2 p {
font-size: 3.7vw;
font-weight: 600;
}
#mf2 .mf-inner span {
font-size: 4.4vw;
}
#mf3 .cbox {
display: block;
}
#mf3 .cbox p {
width: auto;
}
#mf3 .cbox .ibox {
width: 37vw;
margin: 2vw auto;
}
#mf4 p:first-child {
font-size: 4.4vw;
}

}