body{
    scroll-behavior: smooth;
    margin: 0;
}
p{
    margin: 0;
}
h1,h2,h3,span,p{
    user-select: none;
}
#wrapper{
    position:relative;
    height: 100vh;
    width: 100vw;
    min-width: 100%;
    max-width: 100%;
    vertical-align: middle;
    overflow: hidden;
    /*display: table-cell;*/
    /*background-image: url("./sdgsBack2.png");*/
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
#sdgstitle{
    background-image: url("../images/sdgs/sdgsTitle.png");
    width: 300px;
    height: 150px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-origin: content-box;
    margin: auto;
    position: absolute;
    left: 5vw;
    top: calc(20vh - 50px);
    z-index: 900;
    animation:titleRotate 3s;
}
@keyframes titleRotate {
    0% {transform:rotateX(0deg);}
    100% {transform:rotateX(360deg);}
}
#divMainTitle{
    z-index: 900;
    position: absolute;
    right: 50px;
    top: 90px;
    width: 280px;
    text-align: center;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
}
.sdgs{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    background: url("../images/sdgs/cloud.png");
    background-size: 100% 70%;
    background-repeat: no-repeat;
    background-position:top;
    overflow-x: hidden;
}
#topmenu{
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    position: absolute;
    bottom: 30vh;
    z-index: 900;
    left: 5vw;
    height: 35vh;
    width: 35vw;
    min-width: 700px;
}
/*#topmenu div{
    border-radius: 1rem;
}*/

/*------------------------------------*/
/* カルーセル全体 */
.carousel {
    /* 水平方向中央寄せ */
    display: flex;
    justify-content: center;
    width: 100%;
}
/* カルーセル内容 */
.contains {
    /* サイズは自由に変更してください。*/
    /* 下の.slideも同じサイズにしてください。 */
    width: 100%;
    /* height: 100%; */
    overflow: hidden;
    position: relative;
    padding: 0;
    list-style: none;
    border: 1px solid #c1c1c14a;
}
/* スライド切り換え用ラジオボタンは常に非表示 */
.slide_select {
    display: none;
}
/* 各スライド */
.slide {
    /* サイズは自由に変更してください。*/
    /* 上の.containsも同じサイズにしてください。 */
    width: 100%;
    height: 100%;
    position: absolute;
    /* スライドの初期値は選択されていないので透明にしておく */
    opacity: 0;
}
.slide img{
    width: 100%;
    height: 100%;
}
/* 前へ次へボタン */
.scroll_button {
    position: absolute;
    display: block;
    height: 30px;
    width: 30px;
    /* 縦中央から20px上の位置 */
    top: 50%;
    margin-top: -20px;
    /* 上辺と右辺のみ幅5pxの枠線 */
    border-width: 9px 9px 0 0;
    border-style: solid;
    border-color: #020202b3;
    cursor: pointer;
    /* 普段はボタンはやや薄くする */
    opacity: 0.65;
    /* スライドよりも前面にする */
    z-index: 900;
    padding: 5px;
}
/* ホバー時にボタンを強調 */
.scroll_button:hover {
opacity: 1;
}
/* 前へボタン */
.scroll_prev {
left: 35px;
/* 上辺と右辺の枠線を回転して"＜"にする */
transform: rotate(-135deg);
}
/* 次へボタン */
.scroll_next {
right: 35px;
/* 上辺と右辺の枠線を回転して"＞"にする */
transform: rotate(45deg);
}
/* スライド移動ボタンエリア */
.move_controler {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
/* スライド移動の各ボタン */
.button_move {
display: inline-block;
height: 15px;
width: 15px;
margin: 0 2px;
border-radius: 100%;
cursor: pointer;
/* 普段はやや薄くする */
opacity: 0.5;
/* スライドより前面にする */
z-index: 2;
}
/* ホバー時はやや明るくする */
.button_move:hover {
opacity: 0.75;
}
/* スライド移動ボタンの色 */
.button_move {
background-color: #4a4a4a;
}
/* 1番目のスライド選択時 */
/* 1番目のスライドの透明度を0にして表示する */
.slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
opacity: 1;
}
/* 1番目のスライドの前へ次へボタンの領域を */
.slide_select:nth-of-type(1):checked
~ .move_controler
.button_move:nth-of-type(1) {
opacity: 1;
}
.slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
opacity: 1;
}
.slide_select:nth-of-type(2):checked
~ .move_controler
.button_move:nth-of-type(2) {
opacity: 1;
}
.slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
opacity: 1;
}
.slide_select:nth-of-type(3):checked
~ .move_controler
.button_move:nth-of-type(3) {
opacity: 1;
}
.slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
opacity: 1;
}
.slide_select:nth-of-type(4):checked
~ .move_controler
.button_move:nth-of-type(4) {
opacity: 1;
}

/*------------------------------------*/

.menu{
    box-shadow: 8px 16px 7px 0px rgba(0, 0, 0, 0.3);
    /*border-radius: 0.5rem;*/
}
#topmenu .carousel:hover{
    top:-3px;
    box-shadow: 20px 18px 14px 12px rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
}
.menu h1{
    position: absolute;
    top: 5px;
    margin: 0 !important;
    left: 15px;
    z-index: 100;
    /*font-family: "M PLUS 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;*/
    font-family: "Shippori Mincho B1", serif;
    font-weight: 400;
    font-style: normal;
}
.menu .arrow_top_left {
    position: absolute;
    bottom: 4px;
    right: 30px;
    font-size: 3vmin !important;
    font-weight: 500;
    /*border-radius: 2rem;*/
    font-family: "Noto Sans JP", sans-serif;
    border-image: unset !important;
    /* width: 80px; */
}
#topmenu .articleTitle{
    padding-left: 0 !important;
    /* margin-bottom: 5px !important; */
    position: absolute;
    bottom: 130px;
    justify-content: unset;
    height: 30px;
    z-index: 100;
    padding-left: 80px !important;
}
#topmenu .articleTitle:nth-child(2){
    bottom: 80px;
}
#topmenu .theme{
    width: 7vmin !important;
    height: 50px !important;
    max-height: 4vmin;
    margin: 2px !important;
}
#topmenu_env{
    background: #00ff871f;
    /* border: 1px solid #009f54ad; */
    color: #232323;
    /* border-radius: 1rem; */
}
#topmenu_env p {
    display: inline;
    border-bottom: 5px solid #139759;
    font-size: 5vmin;
    border-image: linear-gradient(to right, #139759 0%, transparent 100%);
    border-image-slice: 2;
}
#topmenu_env span:nth-child(1) {
    border-bottom: 5px solid #139759;
    font-size: 7vmin !important;
    padding-bottom: 5px;
    color: #139759;
    font-weight: 600;
    border-image: linear-gradient(to right, #139759 0%, transparent 100%);
    border-image-slice: 2;
}
.menu .menuImg {
    clip-path: polygon(55% 0, 100% 0, 100% 100%, 15% 100%);
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    opacity: .6;
}
#topmenu_ss{
    background: #ffff002b;
    /*border: 1px solid #fabd0082;*/
    color: #232323;
    /*border-radius: 1rem;*/
}
#topmenu_ss p {
    display: inline;
    border-bottom: 5px solid #FABD00;
    font-size: 5vmin;
    border-image: linear-gradient(to right, #FABD00 0%, transparent 100%);
    border-image-slice: 2;
}
#topmenu_ss span:nth-child(1) {
    border-bottom: 5px solid #FABD00;
    font-size: 7vmin !important;
    padding-bottom: 5px;
    color: #FABD00;
    font-weight: 600;
    border-image: linear-gradient(to right, #FABD00 0%, transparent 100%);
    border-image-slice: 2;
}
#topmenu_ss span:nth-child(2) {
    border-bottom: 5px solid #FABD00;
    font-size: 7vmin !important;
    padding-bottom: 5px;
    color: #FABD00;
    font-weight: 600;
    border-image: linear-gradient(to right, #FABD00 0%, transparent 100%);
    border-image-slice: 2;
}
#topmenu_ss span {
    border-bottom: 5px solid #FABD00;
}
#topmenu_management{
    background: #0070ff30;
    /*border: 1px solid #012ef769;*/
    color: #232323;
    /*border-radius: 1rem;*/
}
#topmenu_management p {
    display: inline;
    border-bottom: 5px solid #2948d3;
    font-size: 5vmin;
    border-image: linear-gradient(to right, #2948d3 0%, transparent 100%);
    border-image-slice: 2;
}
#topmenu_management span:nth-child(1) {
    border-bottom: 5px solid #2948d3;
    font-size: 7vmin !important;
    padding-bottom: 5px;
    color: #2948d3;
    font-weight: 600;
    border-image: linear-gradient(to right, #2948d3 0%, transparent 100%);
    border-image-slice: 2;
}
#topmenu_management span {
    border-bottom: 5px solid #2948d3;
}

#divImgTbl{
    background-image: url("../images/sdgs/sdgs-theme/main-min_reverse.png");
    width: 58vw;
    height: 70vh;
    background-size: 100% 100%;
    display: block;
    margin: 0;
    overflow-x: hidden;
    position: absolute;
    right: 10px;
    top: 15vh;
    background-repeat: no-repeat;
    opacity: .95;
    background-position: center;
    z-index: 15;
}

@media screen and (max-width: 1400px) {
    #sdgstitle{
        top: calc(20vh - 75px);
        left: calc(50vw - 150px);
    }
    #divMainTitle{
        right: 50px;
        top: 90px;  
    }
    #topmenu{
        bottom: 55vh;
        left: 0;
        width: 100%;
        left: 0%;
        height: 20vh;
    }
    #topmenu .articleTitle{
        bottom: 80px;
    }
    #topmenu .articleTitle:nth-child(2){
        bottom: 30px;
    }
    #topmenu .menu h1{
        left: 100px;
    }
    #divImgTbl{
        width: 90%;
        height: 35vh;
        top: 50vh;
        right: 5%;
        background-size: contain;
    }
    .tree_01{
        bottom: 34px !important;
    }
    .tree_02{
        bottom: 30px !important;
    }
    #divChild{
        bottom: 19px !important;
    }
}
@media screen and (max-width: 768px) {
    /*#snp {
        height: 1rem !important;
        right: 0 !important;
    }
    #snp p{
        font-size: 2rem !important;
        line-height: 2rem !important;
        min-width: 100px !important;
        width: 100px !important;
    }
    #snp .crossmark{
        width: 2rem !important;
        height: 2rem !important;
        padding-left: 20px;
    }
    #snp img{
        height: 25px !important;
        width: 75px !important;
        margin-top: -2px;
    }*/
    #imgSdgsLogo{
        top :25px !important;
        right: calc(50% - 150px) !important;
    }
    .scroll_button{
        height: 15px;
        width: 15px;
    }
    #sdgstitle{
        top: calc(30vh - 90px);
        left: calc(50vw - 150px);
        height: 80px;
    }
    #divMainTitle{
        right: 0;
        top: 80px;
        left: 0;
        width: 100%;
    }
    #topmenu{
        bottom: 50vh;
        left: 0;
        width: 100%;
        left: 0%;
        height: 20vh;
        min-width: 100%;
    }
    #topmenu .articleTitle{
        bottom: 50px;
    }
    #topmenu .articleTitle:nth-child(2){
        bottom: 15px !important;
    }
    #topmenu .menu h1{
        left: 100px;
    }
    #divImgTbl{
        width: 90%;
        height: 35vh;
        top: 50vh;
        right: 5%;
        background-size: contain;
    }
    .tree_01{
        bottom: 34px !important;
    }
    .tree_02{
        bottom: 30px !important;
    }
    #divChild{
        bottom: 19px !important;
    }
    #treeIcon_03 {
        width: 140% !important;
        right: -40% !important;
    }
}


/* Responsive */
/*@media (max-width: 600px){
    #divImgTbl .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    #divImgTbl .box-big1,
    #divImgTbl .box-big2,
    #divImgTbl .box-big3,
    #divImgTbl .box-big4 {
        grid-column: 1;
        grid-row: auto;
    }
}*/

#divMainBack{
    background-image: url("../images/sdgs/grass1.png");
    opacity: 0.9;
    width: 100%;
    height: 125px;
    background-size: contain;
    position: absolute;
    bottom: 5px;
    display: block;
    margin: 0;
    overflow-x: hidden;
    background-position: bottom;
    background-repeat: repeat-x;
    z-index: 950;
}
#slogan{
    background-image: url("../images/sdgs/leavenoonebehind.png");
    width: 100%;
    height: 2vmin;
    background-size: contain;
    position: absolute;
    bottom: 30vh;
    display: block;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .6;
}
#divtree{
    width: 100%;
    height: 160px;
    position: absolute;
    display: block;
    bottom: 40px;
    left: calc(50% - 50px);
    margin: 0;
    /* z-index: 100; */
}
#divRainbow{
    position: absolute;
    bottom: 0;
    right: 0;
    height: 90%;
    width: 50%;
    background-image: url("../images/sdgs/rainbow.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}
#divRainbow_BK{
    position: absolute;
    bottom: 0;
    right: 0;
    height: 90%;
    width: 50%;
    background-image: url("../images/sdgs/rainbow.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.tree_01{
    background-image: url("../images/sdgs/tree_01.png");
    background-size: contain;
    background-repeat: no-repeat;
    height: 25px !important;
    bottom: 37px !important;
    left: 50% !important;
}
.tree_02{
    background-image: url("../images/sdgs/tree_022.png");
    background-size: contain;
    background-repeat: no-repeat;
    height: 230px !important;
    bottom: 35px !important;
    left: calc(50% - 77px) !important;
}
.tree_03{
    background-image: url("../images/sdgs/tree_03.png");
    background-size: 100vh;
    background-repeat: no-repeat;
    height: 100vh !important;
    bottom: 24px !important;
    left: calc(50% - 50%) !important;
    background-position: bottom;
    width: 100% !important;
}
#divChild{
    width: 100%;
    height: 130px;
    position: absolute;
    display: block;
    bottom: 37px;
    /* left: calc(50%); */
    margin: 0;
}
.child_01{
    background-image: url("../images/sdgs/b2.png");
    background-size: contain;
    background-repeat: no-repeat;
    left: calc(50% + 40px) !important;
}
.child_02{
    background-image: url("../images/sdgs/a2.png");
    background-size: contain;
    background-repeat: no-repeat;
    left: calc(50% - 185px) !important;
}
.child_03{
    background-image: url("../images/sdgs/a1.png");
    background-size: contain;
    background-repeat: no-repeat;
    left: calc(50% + 50px) !important;
    bottom: 19px !important;
    height: 100px !important;
    z-index: 950;
}
/*#snp{
    padding: 0 10px;
    position: absolute;
    top: 40px;
    right: 50px;
    animation:snp 3s;
    display: flex;
    z-index: 950;
}*/
@keyframes snp {
    0% {opacity: 0;}
    90% {opacity: 0;}
    100% {opacity: 1;}
}
/*#snp p{
    font-size: 2rem;
    line-height: 3.5rem;
    width: 120px;
    display: inline-block;
    min-width: 120px;
}
#snp img{
    background: #000;
    width: 150px;
    height: 50px;
    object-fit: cover;
    object-position: left;
}*/
#imgSdgsLogo{
    width: 300px;
    z-index: 990;
    position: absolute;
    right: 39px;
    top: 40px;
    animation:snp 3s;
}

/*-------------------------------*/
.crossmark {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
}
.crossmark::before, .crossmark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px; /* 棒の幅（太さ） */
    height: 27px; /* 棒の高さ */
    background: #333; /* バツ印の色 */
}
.crossmark::before {
    transform: translate(-50%,-50%) rotate(45deg);
}
.crossmark::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}
/*-------------------------------*/

.row{
    height: calc(100vh / 6);
    width: 100vw;
    display: flex;
    justify-content: center;
    padding: 1px 0;
}
.group-title{
    text-align: center;
    font-size: 2vw;
    line-height: 2vw;
    opacity: .65;
    font-weight: 200;
}
.group-env .first-letter-env {
    font-size: 3vw;
    color: #139759;
}
.group-ss .first-letter-ss {
    font-size: 3vw;
    color: #b1bb23;
}
.group-management .first-letter-management {
    font-size: 3vw;
    color: #2948d3;
}
.group-env{
    display: block;
    position: absolute;
    width: 25vw;
    height: 70vh;
    top: 2vh;
    left: 0;
}
.group-ss{
    display: block;
    position: absolute;
    width: 25vw;
    height: 70vh;
    top: 2vh;
    right: 0;
}
.group-management{
    display: block;
    position: absolute;
    width: 100vw;
    height: 30vh;
    bottom: 0;
    left: 0;
}

.group-management .up, .dwn{
    display: flex;
}
.group-management .up .theme{
    width: calc(100vw / 4);
    height: 12.5vh;
}
.group-management .dwn .theme{
    width: calc(100vw / 3);
    height: 12.5vh;
}
.group-ss .theme{
    height: 15vh !important;
}
.group .theme{
    width: 25vw;
    height: 20vh;
    margin: 0 3px;
    cursor: pointer;
}
.group .theme:hover{
    background-position: top !important;
    background-size: cover !important;
    background-position-x: left !important;
    background-position-y:top !important;
}
.group-management .theme:hover{
    background-position: top !important;
    background-size: 35vh !important;
    background-position-x: left !important;
    background-position-y:top !important;
}

.theme-none{
    width: 50vw;
    height: 100%;
}
.articleTitle .theme{
    width: 120px !important;
    height: 80px !important;
    cursor: default !important;
    margin-right: 5px;
}
.theme-01{
    background: #e5243b;
    background-image: url("../images/sdgs/sdgs-theme/01.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-02{
    background: #dda83a;
    background-image: url("../images/sdgs/sdgs-theme/02.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-03{
    background: #4c9f38;
    background-image: url("../images/sdgs/sdgs-theme/03.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-04{
    background: #C50E28;
    background-image: url("../images/sdgs/sdgs-theme/04.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-05{
    background: #ff3a21;
    background-image: url("../images/sdgs/sdgs-theme/05.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-06{
    background: #26bde2;
    background-image: url("../images/sdgs/sdgs-theme/06.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-07{
    background: #fcc30b;
    background-image: url("../images/sdgs/sdgs-theme/07.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-08{
    background: #a21942;
    background-image: url("../images/sdgs/sdgs-theme/08.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-09{
    background: #EC6A06;
    background-image: url("../images/sdgs/sdgs-theme/09.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 20vw;
}
.theme-10{
    background: #DC097B;
    background-image: url("../images/sdgs/sdgs-theme/10.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 20vw;
}
.theme-11{
    background: #fd9d24;
    background-image: url("../images/sdgs/sdgs-theme/11.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 20vw;
}
.theme-12{
    background: #bf8b2e;
    background-image: url("../images/sdgs/sdgs-theme/12.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-13{
    background: #3f7e44;
    background-image: url("../images/sdgs/sdgs-theme/13.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-14{
    background: #0a97d9;
    background-image: url("../images/sdgs/sdgs-theme/14.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-15{
    background: #56c02b;
    background-image: url("../images/sdgs/sdgs-theme/15.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-16{
    background: #004C88;
    background-image: url("../images/sdgs/sdgs-theme/16.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.theme-17{
    background: #19486a;
    background-image: url("../images/sdgs/sdgs-theme/17.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
/*env*/
.sdgs .group-env{
    animation: group-env 3s;
}
@keyframes group-env{
    0% {opacity: 0; top :30%; left: 30%;}
    70% {opacity: 1;}
    100% {top :2vh; left: 0;}
}
.sdgs .group-env .theme{
    animation: group-env-theme 3s;
}
@keyframes group-env-theme{
    0% {opacity: 0;}
    60% {opacity: 0;}
    100% {opacity: 1;}
}
/*ss*/
.sdgs .group-ss{
    animation: group-ss 3s;
}
@keyframes group-ss{
    0% {opacity: 0; top :30%; right: 40%;}
    70% {opacity: 1;}
    100% {top :2vh; right: 0;}
}
.sdgs .group-ss .theme{
    animation: group-ss-theme 3s;
}
@keyframes group-ss-theme{
    0% {opacity: 0;}
    60% {opacity: 0;}
    100% {opacity: 1;}
}
/*management*/
.sdgs .group-management{
    animation: group-management 3s;
}
@keyframes group-management{
    0% {opacity: 0; bottom: 30%;}
    70% {opacity: 1;}
    100% {bottom: 0;}
}
.sdgs .group-management .theme{
    animation: group-management-theme 3s;
}
@keyframes group-management-theme{
    0% {opacity: 0;}
    60% {opacity: 0;}
    100% {opacity: 1;}
}
/*#pExp{
    text-align: center;
    animation: blink 5s infinite;
    font-size: 1.3rem;
    margin: 0;
}*/
@keyframes blink {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}
.dspNone{
    display: none !important;
}

.sdgs .hd-scroll{
    display: block;
    position: absolute;
    bottom: 60px;
    right: 30px;
    margin: 0 auto;
    /* width: 100vh; */
    text-align: center;
    animation: blink 2s infinite;
}
#expSDGs{
    text-align: left;
    font-size: 2rem;
    padding: 50px 0;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
    max-width: 1120px;
    margin: 30px auto !important;
    position: relative;
    margin: 40px 10px;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
#expSDGs #imgSdgsCircle{
    background: url("../images/sdgs/sdgsCircle.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    width: 40vw;
    height: 40vh;
    position: absolute;
    right: 0;
    opacity: .2;
    top: 0;
}
#expSDGs .Sentence{
    margin: 30px 0 20px 20px !important;
}
#expSDGs h1{
    font-size: min(6vmin, 3rem);
    margin: 10px 0;
}
#expSDGs h2{
    font-size: min(4vmin, 3rem);
    margin: 10px 0;
}
#expSDGs h2 span{
    background: url("../images/sdgs/tree_01.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: min(4vmin, 3rem);
    width: min(4vmin, 3rem);
    vertical-align: middle;
    outline: none;
    border: none;
    display: inline-block;
}
#expSDGs h3{
    font-size: min(3vmin, 2rem);
    margin: 10px 0;
    padding-left: 20px;
}
#expSDGs p{
    font-size: min(4vmin, 2rem);
    padding-left: 20px;
    word-break: keep-all;
}
#expSDGs .divLastSentence{
    margin-top: 50px;
    padding-left: 0 !important;
}
#expSDGs .divLastSentence p{
    padding-left: 0 !important;
    font-size: min(3vmin, 2rem);
}
#activity{
    /*width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;*/
    z-index: 960;
    max-width: 1120px;
    margin: 0 auto !important;
    position: relative;
    margin: 40px 10px;
    /*background: #fff;
    border-radius: 2px;*/
}
.activity-article{
    /*width: 100vw;
    height: 96vh;
    position: relative;
    background: url("./activity/back_17.jpeg") no-repeat;
    background-size: cover;
    background-position: center;
    padding-bottom: 5px;
    top: 2vh;*/
    margin-top: 90px !important;
}
/*--------------------------------------*/
.activity-article h1 {
    position: relative;
    padding: 1em 2em;
    text-align: center;
    font-size: min(6vmin, 2rem);
    font-family: "Shippori Mincho B1", serif !important;
}
/*.activity-article h1:before,
.activity-article h1:after {
    position: absolute;
    content: '';
}
.activity-article h1:after {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-top: 3px solid #000;
    border-left: 10px solid #000;
}
.activity-article h1:before {
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    border-right: 10px solid #000;
    border-bottom: 3px solid #000;
}*/
.activity-article h1 img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
    opacity: .6;
    width: 55%;
}
/*env*/
.article_env{
    background: #00ff871f;
}
.article_env span:nth-child(1) {
    border-bottom: 5px solid #139759;
    position: relative;
    z-index: 100;
}
.article_env div{
    height: 150px;
    width: 125px;
    position: absolute;
    left: 10px;
    top: 25px;
    background-image: url(../images/sdgs/b2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    transform: scale(-1, 1);
    opacity: 0.3;
    animation-name: article_env_show;
    animation-duration: 3s;
    animation-fill-mode: both;
}
@keyframes article_env_show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.3;
    }
}
.activity-article .first-letter-env {
    font-size: min(9vmin, 4rem);
    color: #139759;
}
/*ss*/
.article_ss{
    background: #ffff002b;
}
.activity-article .first-letter-ss {
    font-size: min(9vmin, 4rem);
    color: #b1bb23;
}
.article_ss span:nth-child(1) {
    border-bottom: 5px solid #b1bb23;
    position: relative;
    z-index: 100;
}
.article_ss span:nth-child(2) {
    border-bottom: 5px solid #b1bb23;
    position: relative;
    z-index: 100;
}
.article_ss div{
    height: 180px;
    width: 160px;
    position: absolute;
    left: 10px;
    top: 30px;
    background-image: url(../images/sdgs/a2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    transform: scale(-1, 1);
    opacity: 0.3;
    animation-name: article_ss_show;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
@keyframes article_ss_show {
    0% {
        opacity: 0;
        left: -40px;
    }
    100% {
        opacity: 0.3;
        left: 10px;
    }
}
/*management*/
.article_management{
    background: #0070ff30;
}
.activity-article .first-letter-management {
    font-size: min(11vmin, 4rem);
    color: #2948d3;
}
.article_management span{
    word-break: keep-all;
}
.article_management span:nth-child(1) {
    border-bottom: 5px solid #2948d3;
    position: relative;
    z-index: 100;
}
.article_management div{
    height: 180px;
    width: 190px;
    position: absolute;
    left: 10px;
    top: 30px;
    background-image: url(../images/sdgs/a1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    transform: scale(-1, 1);
    opacity: 0.3;
    animation-name: article_management_show;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
@keyframes article_management_show {
    0% {
        opacity: 0;
        top: 90px;
    }
    100% {
        opacity: 0.3;
        top: 30px;
    }
}
/*--------------------------------------*/
.activity-detail{
    /*width: 100vw;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #d3d3d3b5;
    overflow: auto;*/
    /* min-height: 500px; */
    margin: 30px 0 20px 20px;
}
.articleTitle{
    padding-left: 20px;
    justify-content: center;
    display: flex;
}
.activity-detail h2{
    margin-top: 50px;
    margin-left: 3px;
    margin-right: 3px;
    font-family: "Shippori Mincho B1", serif;
    background: #ffffffa1;
    border-radius: 0.5rem 0.5rem 0 0;
    word-break: keep-all;
}
/*env*/
.activity-detail .sub-title-env{
    position:relative;
    margin-top: 45px;
    margin-right: 5px;
    padding: 3px 10px;
    background:#139759;
    box-shadow:
        0 -10px 0 0 #6ce0c1,
        6px 0 0 0 #139759,
        -14px 0 0 0 #139759,
        0 3px 3px 0 rgba(0,0,0,0.1);
    font-size: min(4vmin, 1.5rem);
    margin-left: 40px;
    color: #ffffff;
    width: 30px;
}
.activity-detail .sub-title-env:before{
    content:" ";
    position:absolute;
    top:-10px;
    left:-14px;
    width:0;
    height:0;
    border-width:0 0 10px 14px;
    border-style:solid;
    border-color:transparent;
    border-bottom-color: #47a78d;
}
.activity-detail .sub-title-env:after{
    content:" ";
    position:absolute;
    top:-10px;
    left: 100%;
    width:0;
    height:0;
    border-width:0 6px 10px 0;
    border-style:solid;
    border-color:transparent;
    border-bottom-color: #199473;
}
.activity-detail .sub-title-env img{
    width: 25px;
    vertical-align: middle;
    margin-right: 5px;
}
/*ss*/
.activity-detail .sub-title-ss{
    position:relative;
    margin-top:10px;
    margin-right: 5px;
    padding: 3px 10px;
    background: #c4c92c;
    box-shadow: 
        0 -10px 0 0 #dce57e, 
        6px 0 0 0 #c4c92c, 
        -14px 0 0 0 #c4c92c, 
        0 3px 3px 0 rgba(0, 0, 0, 0.1);
    font-size: min(4vmin, 1.5rem);
    margin-left: 40px;
    color: #ffffff;
}
.activity-detail .sub-title-ss:before{
    content:" ";
    position:absolute;
    top:-10px;
    left:-14px;
    width:0;
    height:0;
    border-width:0 0 10px 14px;
    border-style:solid;
    border-color:transparent;
    border-bottom-color: #9fba40;
}
.activity-detail .sub-title-ss:after{
    content:" ";
    position:absolute;
    top:-10px;
    left: 100%;
    width:0;
    height:0;
    border-width:0 6px 10px 0;
    border-style:solid;
    border-color:transparent;
    border-bottom-color: #9fba40;
}
.activity-detail .sub-title-ss img{
    width: 25px;
    vertical-align: middle;
    margin-right: 5px;
}
/*management*/
.activity-detail .sub-title-management{
    position:relative;
    margin-top:10px;
    margin-right: 5px;
    padding: 3px 10px;
    background: #2948d3;
    box-shadow: 0 -10px 0 0 #5b81b2, 6px 0 0 0 #2948d3, -14px 0 0 0 #2948d3, 0 3px 3px 0 rgba(0, 0, 0, 0.1);
    font-size: min(4vmin, 1.5rem);
    margin-left: 40px;
    color: #ffffff;
}
.activity-detail .sub-title-management:before{
    content:" ";
    position:absolute;
    top:-10px;
    left:-14px;
    width:0;
    height:0;
    border-width:0 0 10px 14px;
    border-style:solid;
    border-color:transparent;
    border-bottom-color: #4247a1;
}
.activity-detail .sub-title-management:after{
    content:" ";
    position:absolute;
    top:-10px;
    left: 100%;
    width:0;
    height:0;
    border-width:0 6px 10px 0;
    border-style:solid;
    border-color:transparent;
    border-bottom-color: #4047ba;
}
.activity-detail .sub-title-management img{
    width: 25px;
    vertical-align: middle;
    margin-right: 5px;
}
.note .note-txtrimg{
    width: calc(100% - 230px);
}
.note .rImg{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
}
.note .bboxImg{
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
}
.note .bboxImg .bImg{
    width: 200px;
    height: 200px;
}
.note .bboxImg .bImgL{
    width: 400px;
    height: 200px;
}

/*▼ Close Button ▼*/
/*.square_btn {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    background: #000;
    display: block;
    position: fixed;
    top: 30px;
    right: 30px;
    cursor: pointer;
    z-index: 99999;
    color: gray;
}
.square_btn::before, .square_btn::after {
    content: "";
    position: absolute;
    top: 77%;
    left: 52%;
    width: 5px;
    height: 80px;
    background: #fff;
}
.square_btn::before {
    transform: translate(-80%,-80%) rotate(45deg);
}
.square_btn::after {
    transform: translate(-80%,-80%) rotate(-45deg);
}
.square_btn:hover{
    background: #313131;
}*/
/*▲ Close Button ▲*/

/*---detail title---*/
/*env*/
.detail-title-env {
    position: relative;
    overflow: hidden;
    padding: 1rem 2rem 1rem 120px;
    border: solid 2px #139759;
    font-size: min(5vmin, 2rem);
}
.detail-title-env:before {
    position: absolute;
    content: '';
    top: -150%;
    left: -100px;
    width: 200px;
    height: 300%;
    transform: rotate(25deg);
    background: #139759;
}
.detail-title-env span {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 30px;
    font-size: 3rem;
    padding-left: 16px;
    color: #fff;
}
/*ss*/
.detail-title-ss {
    position: relative;
    overflow: hidden;
    padding: 1rem 2rem 1rem 120px;
    border: solid 2px #b1bb23;
    font-size: min(5vmin, 2rem);
}
.detail-title-ss:before {
    position: absolute;
    content: '';
    top: -150%;
    left: -100px;
    width: 200px;
    height: 300%;
    transform: rotate(25deg);
    background: #b1bb23;
}
.detail-title-ss span {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 30px;
    font-size: 3rem;
    padding-left: 16px;
    color: #fff;
}
/*management*/
.detail-title-management {
    position: relative;
    overflow: hidden;
    padding: 1rem 2rem 1rem 120px;
    border: solid 2px #2948d3;
    font-size: min(5vmin, 2rem);
}
.detail-title-management:before {
    position: absolute;
    content: '';
    top: -150%;
    left: -100px;
    width: 200px;
    height: 300%;
    transform: rotate(25deg);
    background: #2948d3;
}
.detail-title-management span {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 30px;
    font-size: 3rem;
    padding-left: 16px;
    color: #fff;
}
/*---detail title---*/

/*---note---*/
.note{
    position: relative;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 0 0 0.5rem 0.5rem;
}
.note p{
    font-size: 16px;
    /* padding-left: 20px; */
    font-family: "Shippori Mincho B1", serif, sans-serif;
    /*background: #ffffffa1;*/
    word-break: keep-all;
}
.note-txt{
    line-height: 2;
    /*background-image: linear-gradient( #ccc .1px, transparent .1em );*/
    background-size: auto 2rem;
    /*border-bottom: 1px solid #ccc;*/
    margin:0;
}
.note-txt::before{
    content: "";
    position: absolute;
    /*border-top: 2px solid #fff;*/
    width: 100%;
}
/*---note---*/

.scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar::-webkit-scrollbar {
    display: none;
}

/*#pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 10px 10px 6px 3px rgb(0 0 0 / 30%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
}
#pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
    position: absolute;
    top: -22px;
    animation: pagetop__arrow_move 1.5s infinite;
}
@keyframes pagetop__arrow_move {
    0% {top: -14px; opacity: .1;}
    20% {opacity: .1;}
    100% {top: -22px; opacity: 1;}
}
#pagetop__arrow2 {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
    position: absolute;
    top: -14px;
}
@media (hover: hover) and (pointer: fine) {
    #pagetop:hover, #pagetop:hover #pagetop__arrow {
        border-color: #3293e7;
    }
}*/

#treeIcon_01 {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 5px;
    bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: bottom;
    z-index: 0;
    opacity: 0.3;
    background-position-x: right;
    background-image: url(../images/sdgs/tree_01.png) !important;
    animation-name: fadeinTree_01;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
#treeIcon_02 {
    height: 250px;
    width: 130px;
    position: fixed;
    right: -20px;
    bottom: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: bottom;
    z-index: 0;
    opacity: 0.3;
    background-position-x: right;
    background-image: url(../images/sdgs/tree_02.png?202501112242) !important;
    animation-name: fadeinTree_02;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    background-size: 100% 100%;
}
#treeIcon_03 {
    height: 70%;
    width: 100%;
    position: fixed;
    right: -40%;
    bottom: -15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-y: bottom;
    z-index: 0;
    opacity: 0.3;
    background-position-x: right !important;
    background-image: url(../images/sdgs/tree_03.png) !important;
    max-height: 800px;
    animation-name: fadeinTree_03;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes fadeinTree_01 {
    0% {
        opacity: 0;
        transform: translate(0px, 20px) rotateZ(0deg);
    }
    25% {
        transform: translate(5px, 2px) rotateZ(1deg);
    }
    50%{
        transform: translate(0px, 2px) rotateZ(0deg);
    }
    75%{
        transform: translate(5px, 0px) rotateZ(-1deg);
    }
    100% {
        opacity: 0.3;
        transform: translate(0px, 0px) rotateZ(0deg);
    }
}
@keyframes fadeinTree_02 {
    0% {
        opacity: 0;
        transform: translate(10px, 200px) rotateZ(1deg);
    }
    25% {
        transform: translate(0x, 150px) rotateZ(-1deg);
    }
    50%{
        transform: translate(-10px, 100px) rotateZ(0deg);
    }
    75%{
        transform: translate(0px, 50px) rotateZ(0deg);
    }
    100% {
        opacity: 0.5;
        transform: translate(0px, 0px) rotateZ(0deg);
    }
}
@keyframes fadeinTree_03 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 0.75;
        transform: translateY(0);
    }
}
/*.pagetop_page_01{
    background-image: url(../images/sdgs/tree_01.png) !important;
    background-size: 70% 40% !important;
}
.pagetop_page_02{
    background-image: url(../images/sdgs/tree_02.png) !important;
    background-size: 80% 80% !important;
}
.pagetop_page_03{
    background-image: url(../images/sdgs/tree_03.png) !important;
    background-size: 150% 150% !important;
    background-position: bottom !important;
}*/

/*スクロールダウン*/
.scrolldown4{
    position:absolute;
    bottom:1%;
    right:50%;
    animation: arrowmove 1s ease-in-out infinite;
    user-select: none;
}
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
}
/*Scrollテキストの描写*/
.scrolldown4 span{
  position: absolute;
  left:-42px;
  bottom:5px;
  color: #303030;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 1.5rem;
  height: 75px;
}
/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #303030;
    transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
  position: absolute;
  bottom:0;
  right:0;
  width:1px;
  height: 50px;
  background:#303030;
}

.fadeinEX {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.fadeinEX-left{
    transform: translate(-50px,0);
}
.fadeinEX-right{
    transform: translate(50px,0);
}
.fadeinEX-up{
    transform: translate(0,-50px);
}
.fadeinEX-bottom{
    transform: translate(0,50px);
}
.scrollinEX{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}
#footer{
    z-index: 990;
}

.act-imgs{
    width: 100%;
    height: 310px;
    max-height:310px;
    margin-top:30px;
}
.act-img1{
    width:100%;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: bottom !important;
    position: relative !important;
}
.act-img2{
    width:50%;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: bottom !important;
    position: relative !important;
}
.act-img3{
    width: 33%;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: bottom !important;
    position: relative !important;
}
.act-exps{
    width: 100%; 
    height: 100%; 
    margin-top:5px;
}
.act-exp1{
    width:100%;    
    text-align: center;
    font-weight:bolder;
    font-family:'Shippori Mincho B1', serif;
}
.act-exp2{
    width:50%;    
    text-align: center;
    font-weight:bolder;
    font-family:'Shippori Mincho B1', serif;
}
.act-exp3{
    width:33.3%;    
    text-align: center;
    font-weight:bolder;
    font-family:'Shippori Mincho B1', serif;
    word-break: keep-all;
}

@media screen and (max-width: 768px) {
    .act-imgs{
        max-height: 160px;
    }
}

@media screen and (max-width: 1200px) {
    #mainTitle .title-area .bg img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
}

.bgTranslucent{
    background: #ffffffa1 !important;
}

#imgRow_Env01{
    width: 100%; 
    height: 310px; 
    max-height:310px; 
    margin-top:20px;
}
#imgRow_Env01 div:nth-child(1){
    width: 50%;
    background-image:url("../images/sdgs/sdgs-action/env01-01.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /*border: 1px solid #3e3e3e;*/
    border: 1px solid #ffffff;
}
#imgRow_Env01 div:nth-child(2){
    width: 50%;
    background-image:url("../images/sdgs/sdgs-action/env01-02.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    border: 1px solid #ffffff;
}

#imgDescRow_Env01{
    width: 100%; 
    height: 100%;
}
#imgDescRow_Env01 div:nth-child(1){
    width: 50%; 
    text-align: center; 
    font-weight:bolder; 
    font-family:'Shippori Mincho B1', serif; 
    padding-right:10px;
    word-break: keep-all;
}
#imgDescRow_Env01 div:nth-child(2){
    width: 50%; 
    text-align: center; 
    font-weight:bolder; 
    font-family:'Shippori Mincho B1', serif; 
    padding-left:10px;
    word-break: keep-all;
}

#imgRoHS{
    width:300px; 
    height:100%;
}

#imgRow_Env03 div:nth-child(1){
    background:url("../images/sdgs/sdgs-action/env03-01.png");
}
#imgRow_Env03 div:nth-child(2){
    background:url("../images/sdgs/sdgs-action/env03-02.png");
}
#imgRow_Env03 div:nth-child(3){
    background:url("../images/sdgs/sdgs-action/env03-03.png");
}
#imgDescRow_Env03{
    width: 100%; 
    height: 100%; 
    margin-top:20px; 
    text-align: center; 
    font-weight:bolder; 
    font-family:'Shippori Mincho B1', serif;
    word-break: keep-all;
}

#imgRow_SS01 div:nth-child(1){
    background:url("../images/sdgs/sdgs-action/safety01-01.png");
}
#imgRow_SS01 div:nth-child(2){
    background:url("../images/sdgs/sdgs-action/safety01-02.png");
}
#imgRow_SS01 div:nth-child(3){
    background:url("../images/sdgs/sdgs-action/safety01-03.png");
}

#imgRow_SS02_01 div:nth-child(1){
    background:url("../images/sdgs/sdgs-action/safety02-01.png");
}
#imgDescRow_SS02_01{
    width: 100%; 
    height: 100%; 
    margin-top:5px;
}
#imgRow_SS02_02 div:nth-child(1){
    background:url("../images/sdgs/sdgs-action/safety02-03.png");
}
#imgRow_SS02_02 div:nth-child(2){
    background:url("../images/sdgs/sdgs-action/safety02-04.png");
}

#imgRow_BF01_01 div:nth-child(1){
    background:url("../images/sdgs/sdgs-action/esg01-01.png");
}
#imgRow_BF01_01 div:nth-child(2){
    background:url("../images/sdgs/sdgs-action/esg01-02.png");
}
#imgRow_BF01_02 div:nth-child(1){
    background:url("../images/sdgs/sdgs-action/esg01-03.png");
}

#imgRow_BF02_01 {
    width: 100%; 
    height: 200px; 
    max-height:200px; 
    margin-top:30px;
}
#imgRow_BF02_01 div:nth-child(1){
    background:url("../images/sdgs/sdgs-action/esg02-01.png");
}
#imgRow_BF02_01 div:nth-child(2){
    background:url("../images/sdgs/sdgs-action/esg02-02.png");
}
#imgRow_BF02_01 div:nth-child(3){
    background:url("../images/sdgs/sdgs-action/esg02-03.png");
}


