#page-sdgs-actionportrait-article * {
	    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}


/* Common layout style */

@media screen and (min-width: 768px){
    #hero .bghero { position: absolute; left: calc(50% - 100px); width: calc(50% + 410px); height: 480px; overflow: hidden; transition: 1.8s; transition-timing-function: ease-out; }
    #hero.on .bghero { left: calc(50% - 410px);}
    #hero .bghero img { width: 100%; min-width: 1047px; transform: scale(1.3); transition: 1.8s; transition-timing-function: ease-out; opacity: 0; }
    #hero.on .bghero img { opacity: 1; transform: scale(1); }
    #hero { position: relative; background: #fff; }
    #heroinner { padding-top: 295px; width: 960px; margin: 0 auto;  position: relative; }
    
    #hero #member-catch { display: none; /*font-size: 22px; font-weight: bold; text-align: left; color: #0a226c; top: 90px; left: 76%; position: absolute; opacity: 0; transition-delay: 1.9s; transition-duration: .6s; */}
    /*.no1 #hero #member-catch {left: 50%;}
    .no2 #hero #member-catch {left: 53%;}
    .no3 #hero #member-catch {top: 110px;left: 47%;}
    .no4 #hero #member-catch {left: 45%;}
    .no5 #hero #member-catch {top: 80px;left: 78%;}
    .no6 #hero #member-catch {left: 78%;color: #fff;}*/
    
    
    #hero.on #member-catch { opacity: 1; }
    
    #hero #menber-info { text-align: left; width: 344px; height: 288px; padding: 60px 40px 0;color: #fff;  position: relative; transform: translate(0,100px); transition: 1.4s; transition-timing-function: ease-out; transition-delay: .5s; opacity: 0; }
    #hero.on #menber-info { transform: translate(0,0); opacity: 1; }
    
    .life #menber-info { background: #4cc850; }
    .living #menber-info { background: #26b2ff; }
    .heart #menber-info { background: #feb800; }
    #member-prof { width: 410px; padding-top: 39px;  }
    #menber-info h1 span { display: block; background: #ca8416; width: 50px; height: 50px; text-align: center; line-height: 50px; position: absolute; top: -25px; font-weight: normal; left: 0; }
    .life #menber-info h1 span {background: #0b6434;}
    .living #menber-info h1 span {background: #0b528f;}
    .heart #menber-info h1 span {background: #ca8416;}
    
    
    #menber-info h1 { font-size: 22px; font-weight: bold; line-height: 1.65; margin-bottom: 25px; }
    #menber-info ul { position: absolute; bottom: -60px; left: 20px; }
    #menber-info ul li { display: inline-block; margin-right: 10px; }
    #menber-info ul li img { width: 95px; }
    .member-position { font-size: 12px; }
    .member-name { font-size: 20px;font-weight: bold;}
    #member-prof p { width: 960px; margin: -60px auto 0; line-height: 1.8; font-size: 14px; padding-left: 380px; padding-bottom: 100px; }
    
    .contentBlock h2 { font-size: 24px; font-weight: bold; margin-bottom: 40px; position: relative; }
    
    .section { line-height: 1.8; font-size: 14px; position: relative; }
    .section p { margin-bottom: 20px; }
    .sectiontxtinner { }
    .sectiontxtwrap { }
    .contentBlock { background: #fff; padding-bottom: 10px;}
    
    #sec01,#sec02,#sec03 { position: relative; }
    #sec01::before { content: ''; display: block; position: absolute; top: 0; right: 0; background: #fff8e5; height: 600px; transform: skewY(-3deg); width: calc( 50% + 240px ); z-index: 0;  }
    
    #sec02::before { content: ''; display: block; position: absolute; top: calc( 50% - 300px ); left: 0%; background: #fff8e5; height: 600px; transform: skewY(-3deg); width: calc( 50% + 240px ); z-index: 0;  }
    
    #sec03::before { content: ''; display: block; position: absolute; top: 0; right: 0%; background: #fff8e5; height: 600px; transform: skewY(-3deg); width: calc( 50% + 240px ); z-index: 0;  }
    
    .life #sec01::before ,.life #sec02::before ,.life #sec03::before{background: #edf9ed;}
    .living #sec01::before,.living #sec02::before,.living #sec03::before{background: #e9f7ff;}
    .heart #sec01::before,.heart #sec02::before,.heart #sec03::before{background: #fff8e5;}
    
    #sec01 .section { width: 960px; margin: 0 auto 90px; }
    #sec02 .section { width: 800px; margin: 0 auto 140px; }
    #sec03 .section { width: 960px; margin: 0 auto 160px; }
    #sec04 .section { width: 800px; margin: 0 auto; padding-bottom: 1px; }
    
    #sec01 h2 { width: 960px; margin: 0 auto 30px; }
    #sec01 .section { display: flex;display:-ms-flexbox; justify-content: center;-ms-flex-pack: center; flex-wrap: wrap;-ms-flex-wrap: wrap;  }
    #sec01 .section > div { width: 50%; }
    #sec01 .section > div img { width: 100%; }
    #sec01 .section .sectiontxt { padding-right: 50px; }
    
    #sec02 div.imgbox { padding: 30px 0;}
    
    #sec03 h2 { width: 960px; padding-left: 530px; margin: 0 auto 30px;-webkit-box-ordinal-group:1;
        -ms-flex-order:1;
        -webkit-order:1;
        order:1; }
    #sec03 .section { display: flex;display:-ms-flexbox; justify-content: center;-ms-flex-pack: center; flex-wrap: wrap;-ms-flex-wrap: wrap; }
    #sec03 .section > div { width: 50%; position: relative; }
    #sec03 .section > div.sectiontxt { width: 50%; position: relative; 
        -webkit-box-ordinal-group:3;
        -ms-flex-order:3;
        -webkit-order:3;
        order:3; }
    #sec03 .section > div.imgbox { width: 50%; position: relative;
        text-align: right;
        -webkit-box-ordinal-group:2;
        -ms-flex-order:2;
        -webkit-order:2;
        order:2; }
    #sec03 .section > div img { position: absolute; right: 0; top: 0; }
    #sec03 .section .sectiontxt { padding-left: 50px; }
    
    /*
    #sec01 { background: #f5f5f5; position: relative; padding-top: 80px; }
    #sec01 .bgsec1 { position: absolute; top: 0; left: 0; z-index: 0; width: 40%; overflow: hidden; height: 80%; }
    #sec01 .bgsec1 img { width: 100%; }
    #sec01 .sectiontxt { width: 68%; margin-top: 1px; background: #fff; margin-left: 32%; margin-bottom: 190px; position: relative; }
    #sec01 .imgbox { text-align: right; width: 960px; margin: 0 auto; }
    #sec01 .imgbox img{ margin-bottom: -270px; }
    #sec02 { padding-top: 210px; position: relative; }
    #sec02 .sectiontxt { width: 780px;  background: #f5f5f5;  }
    #sec02 .sec02-2 { background: #f5f5f5; }
    #sec02 .sec02-2 .sectiontxt { margin-left: 330px; background: #fff; top: -110px; position: relative; }
    #sec02 .imgbox { text-align: center; height: 460px; overflow: hidden; }
    #sec02 .imgbox img { width: 100%; }
    #sec03 { position: relative; padding-top: 40px; }
    #sec03 .sectiontxt { width: 61%; margin-left: 39%; margin-top: 1px; background: #f5f5f5;z-index: 1;
    position: relative; }
    #sec03 .imgbox { position: absolute; top: 0; left: 0; width: 100%; }
    #sec03 .imgbox img { width: 50%; }
    #sec04 { position: relative; margin-top: 80px; }
    #sec04 .sectiontxt { width: 87%; margin-right: 13%; background: #f5f5f5; }
    #sec04 .sectiontxtinner { width: 810px; margin: 0 auto; }
    */
    
    #btmlinkbox { background: #fff; padding: 80px 0; text-align: center; }
    #btmlinkbox ul { display: flex; justify-content: center; margin-bottom: 80px; }
    #btmlinkbox ul li { width: 220px; height: 56px; margin: 0 15px; font-weight: bold; position: relative; }
    #btmlinkbox ul li::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #0a226c; transform: skewX(-8deg); }
    #btmlinkbox ul li a { display: block; height: 56px; line-height: 56px; color: #0a226c!important; font-size: 14px; position: relative; }
    #btmlinkbox ul li:first-child a::before { content:'\FF1C\3000';  }
    #btmlinkbox ul li:nth-child(2) a {  }
    #btmlinkbox ul li:last-child a::after { content:'\3000\FF1E';  }
    #btmlinkbox > a {     display: block;
    height: 90px;
    line-height: 90px;
    width: 500px;
    margin: 0 auto;
    background: #ff4a00;
    border-radius: 45px;
    color: #fff!important;
    position: relative;
    font-size: 18px;
    font-weight: bold;}
    #btmlinkbox > a::after { content:'\FF1E'; position: absolute; top: 0; right: 4%; transform: scale(.6,1); }
    #btmlinkbox a:hover { opacity: .7; }
    
    #btmlinkbox ul li.backTop a::before{content:'';}
    #btmlinkbox ul li.backTop a::after{content:'';}
    
    
    
    .view-pc { display: block; }
    .view-sp { display: none; }
    
}



/*WIDE MONITOR*/
@media (min-width: 1200px){

}
    
@media screen and (min-width: 0px) and (max-width: 767.98px) {
    #page-sdgs-actionportrait-article { font-size: 3.4vw; line-height: 1.8; }
    
    #hero { position: relative; background: #fff; }
    #hero .bghero { width: 100%; overflow: hidden; }
    #hero .bghero img { width: 100%; transform: scale(1.2); transition: 1.8s; transition-timing-function: ease-out; }
    #hero.on .bghero img { transform: scale(1)}
    
    #heroinner { position: relative; }
    #member-catch { font-size: 3.2vw; font-weight: bold; text-align: left; color: #0a226c; top: 0; margin-top: 12%; left: 30%; position: absolute; }
    
    .no3 #hero #member-catch {left: 23%;}
    .no4 #hero #member-catch {left: 27%;}
    .no5 #hero #member-catch {margin-top:7%;left: 37%;}
    .no6 #hero #member-catch {color: #fff; margin-top: 18%; left: auto;   right: -0.8%;}
    
    #hero #menber-info { text-align: left; padding: 8% 8% 12%; width: 80%; margin: -30% auto 20%; position: relative; color: #fff; transform: translate(0,20vw); transition: 1.4s; transition-timing-function: ease-out; transition-delay: .5s; opacity: 0;  }
    
    #hero.on #menber-info { transform: translate(0,0); opacity: 1; }
    
    #member-prof { text-align: left; padding: 5%; margin-top: 20%; position: relative; }
    #member-prof::before { position: absolute; bottom: -10%; left: 0; height: 110%; width: 100%; background: #fff8e5; transform: skewY(-3deg); content: '';display: block; }
    .life #member-prof::before {background: #edf9ed;}
    .living #member-prof::before{background: #e9f7ff;}
    .heart #member-prof::before{background: #fff8e5;}
    
    
    #menber-info h1 { font-size: 6vw; line-height: 1.6; margin-bottom: 5%; font-weight: bold;}
    #menber-info h1 span { display: block; background: #ca8416; width: 10vw; height: 10vw; text-align: center; line-height: 10vw; position: absolute; top: -5vw; left: -5vw; font-weight: normal; font-size: 4vw }
    .life #menber-info h1 span {background: #0b6434;}
    .living #menber-info h1 span {background: #0b528f;}
    .heart #menber-info h1 span {background: #ca8416;}
    #menber-info ul { position: absolute; bottom: 0; margin-bottom: -17%; left: 5%; }
    #menber-info ul li { display: inline-block; margin-right: 1vw; }
    #menber-info ul li img { width: 22.5vw; }
    .member-position { font-size: 3vw; line-height: 1.6 }
    .member-name { font-size: 4vw;font-weight: bold; }
    #member-prof p { line-height: 2; position: relative;}
    
    .life #menber-info { background: #4cc850; }
    .living #menber-info { background: #26b2ff; }
    .heart #menber-info { background: #feb800; }
    
    
    
    .life .contentBlock { background: #fff url(../img/bg-life-sp.png); background-size: 100%; }
    .living .contentBlock { background: #fff url(../img/bg-living-sp.png); background-size: 100%; }
    .heart .contentBlock { background: #fff url(../img/bg-heart-sp.png); background-size: 100%; }
    
    .sectiontxt {padding: 5%; }
    
    .section { line-height: 1.8; }
    .section h2 { font-size: 4vw; padding: 0 5%; font-weight: bold; }
    .section p { margin-bottom: 30px; }
    .sectiontxtinner {  }
    .sectiontxtwrap { margin: 0 auto; }
    
    #sec01 .section { display: flex;display:-ms-flexbox; flex-wrap: wrap;-ms-flex-wrap: wrap; }
    #sec01 .section h2 { 
        -webkit-box-ordinal-group:2;
        -ms-flex-order:2;
        -webkit-order:2;
        order:2;
        width: 100%; }
    #sec01 .section .sectiontxt {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:3;
        -webkit-order:3;
        order:3;
        width: 100%; 
    }
    
    #sec01 .section .imgbox {
        -webkit-box-ordinal-group:1;
        -ms-flex-order:1;
        -webkit-order:1;
        order:1;
        width: 100%;
        margin-bottom: 10%;
    }
    
    #sec01 { position: relative; }
    #sec01 .bgsec1 { height: 105vw; overflow: hidden; }
    #sec01 .bgsec1 img { width: 90%; }
    #sec01 .sectiontxt { width: 100%; position: relative; }
    #sec01 .imgbox img{ width: 100%; }
    
    #sec02 .section { display: flex;display:-ms-flexbox; flex-wrap: wrap;-ms-flex-wrap: wrap; }
    #sec02 { position: relative; }
    #sec02  .section h2 { padding: 0; margin-bottom: 5%; }
    #sec02 .sectiontxt { padding: 0 5%; }
    #sec02 .sec02-2 {  }
    #sec02 .sec02-2 .sectiontxt { position: relative; }
    
    #sec02 .section .imgbox {
        -webkit-box-ordinal-group:1;
        -ms-flex-order:1;
        -webkit-order:1;
        order:1;
        width: 100%;
        margin-bottom: 10%;
    }
    
    #sec02 .sec02-1 { 
        -webkit-box-ordinal-group:2;
        -ms-flex-order:2;
        -webkit-order:2;
        order:2;
        width: 100%; 
    }
    
    #sec02 .sec02-2 {
        -webkit-box-ordinal-group:3;
        -ms-flex-order:3;
        -webkit-order:3;
        order:3;
        width: 100%; 
    }
    
    #sec02 .imgbox { text-align: center; }
    #sec02 .imgbox img { width: 100%; }
    #sec03 { position: relative; padding-top: 10%; }
    #sec03 .sectiontxt { z-index: 1; position: relative; padding: 5%; }
    #sec03 .imgbox { width: 100%; }
    #sec03 .imgbox img { width: 100%; }
    #sec04 { position: relative; padding-top: 10%; }
    #sec04 .sectiontxt { padding: 5%; }
    #sec04 .sectiontxtinner {  }
    
    #btmlinkbox { background: #fff; padding: 15% 0; text-align: center; }
    #btmlinkbox ul { display: flex;display:-ms-flexbox; justify-content: center;-ms-flex-pack: center; width: 100%;
        flex-wrap: wrap;-ms-flex-wrap: wrap; }
    #btmlinkbox ul li { font-weight: bold; margin-bottom: 5%; height: 10vw; line-height: 10vw; position: relative; }
    #btmlinkbox ul li::before { content: ''; display: block; height: 10vw; line-height: 10vw; border: 1px solid #0a226c; transform: skewX(-3deg); position: absolute; top: 0; left: 0; width: 100%; }
    #btmlinkbox ul li a { display: block; height: 10vw; line-height: 10vw; color: #0a226c!important; font-size: 3vw; position: relative; }
    #btmlinkbox ul li:first-child a::before { content:'\FF1C\3000';  }
    #btmlinkbox ul li:nth-child(2) a { }
    #btmlinkbox ul li:last-child a::after { content:'\3000\FF1E';  }
    #btmlinkbox ul li.backTop a::before{content:'';}
    #btmlinkbox ul li.backTop a::after{content:'';}
    
    #btmlinkbox > a { display: block; height: 14vw; line-height: 14vw; width: 80%; margin: 0 auto; background: #ff4a00; border-radius: 7vw; color: #fff!important; position: relative; font-size: 4vw; }
    #btmlinkbox > a::after { content:'\FF1E'; position: absolute; top: 0; right: 4%; transform: scale(.6,1); }
    
    #btmlinkbox ul li:first-child {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:2;
        -webkit-order:2;
        order:2;
        width: 40%;
        margin: 0 1% 5%;
    }
    
    #btmlinkbox ul li:nth-child(2) {
        -webkit-box-ordinal-group:1;
        -ms-flex-order:1;
        -webkit-order:1;
        order:1;
        width: 40%; 
        margin: 0 30% 5%;
    }
    
    #btmlinkbox ul li:last-child  {
        -webkit-box-ordinal-group:3;
        -ms-flex-order:3;
        -webkit-order:3;
        order:3;
        width: 40%; 
        margin: 0 1% 5%;
    }
    
    .view-sp { display: block; }
    .view-pc { display: none; }
    
    .RIGHT-SIDE { display: none; }
}


/* Bottom Link Style */
@media screen and (min-width: 768px){    
    .bottomLink { }
    .bottomLink > li { display: inline-block; width: 18%; padding-right: 1%; vertical-align: top; }
    .bottomLink > li:last-child { padding-right: 0; }
    .bottomLink > li:nth-child(3) { width: 20%;}
    .bottomLink > li:nth-child(4) { width: 20%;}
    .bottomLink > li:nth-child(5) { width: 21%;}
    .bottomLink > li a:hover { text-decoration: underline; }
    .bottomLink > li li a { font-size: 12px; }
    .bottomLink > li li a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-color: transparent transparent transparent #ffffff;
    }
    .bottomLink li a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-color: transparent transparent transparent #0066aa;
    }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .bottomLink { }
    .bottomLink > li:first-child { display: inline-block; width: 60%; padding-right: 1%; vertical-align: top; margin-bottom: 5%; }
    .bottomLink > li:nth-child(2) { display: inline-block; width: 40%; padding-right: 1%; vertical-align: top; margin-bottom: 5%; }
    .bottomLink > li:nth-child(even) { padding-right: 0; }
    .bottomLink > li li:nth-child(odd) { display: inline-block; width: 60%; }  
    .bottomLink > li li:nth-child(even) { display: inline-block; width: 40%; }   
    .bottomLink > li li a { font-size: 2.8vw; }
    .bottomLink > li:nth-child(3),
    .bottomLink > li:nth-child(4),
    .bottomLink > li:nth-child(5) { width: 100%; margin-bottom: 5%; }
    .bottomLink > li li a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 1vw 0 1vw 1vw;
        border-color: transparent transparent transparent #ffffff;
    }
    .bottomLink li a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 1vw 0 1vw 1vw;
        border-color: transparent transparent transparent #0066aa;
    }
}
        
.bottomLink > li a { color:#0066aa!important; }

.bottomLink > li:nth-child(3) p { font-weight: bold; color: #0d6434; }
.bottomLink > li:nth-child(4) p { font-weight: bold; color: #09528f; }
.bottomLink > li:nth-child(5) p { font-weight: bold; color: #c98417; }
.bottomLink > li:nth-child(3) li a::before { border-color: transparent transparent transparent #0d6434; }
.bottomLink > li:nth-child(4) li a::before { border-color: transparent transparent transparent #09528f; }
.bottomLink > li:nth-child(5) li a::before { border-color: transparent transparent transparent #c98417; }


.slide-up { opacity: 0; transform: translate(0, 20px); transition: 1s; }
.slide-up.in { opacity: 1; transform: translate(0, 0); }


@media screen and (min-width: 0\0) and (min-resolution: .001dpcm) and (min-width: 768px) {
/*@media all and (-ms-high-contrast: none) and (min-width: 768px) {*/
        #sec01 .section { display: block;  }
        #sec01 .section::after { clear: both; content:''; display: block; height: 0; overflow: hidden; }
        #sec01 .section > div.sectiontxt { width: 50%; float: left; }
        #sec01 .section > div.imgbox { width: 50%; float: right; }
        
        #sec03 .section { display: block; }
        #sec03 .section::after { clear: both; content:''; display: block; height: 0; overflow: hidden; }
        #sec03 .section > div.sectiontxt { width: 50%; float: right; }
        #sec03 .section > div.imgbox { width: 50%; float: left; }
    
        /*#sec01 .section > div.imgbox { display: none; }
        #sec02 .section > div.imgbox { display: none; }
        #sec03 .section > div.imgbox { display: none; }*/
    
    
.slide-up { opacity: 0; margin-top: 20px; }
.slide-up.in { opacity: 0;  }
    
    #btmlinkbox ul { display: block; margin-bottom: 80px; text-align: center; }
    #btmlinkbox ul li { display: inline-block;  }
}
@media screen and (min-width: 0\0) and (min-resolution: .001dpcm) and (min-width: 0px) and (max-width: 767.98px) {
    #sec01 .section,
    #sec02 .section { display: block; position: relative; }
    #sec01 .section h2,
    #sec02 .section h2 { padding-top: 80%; }
    #sec01 .section .sectiontxt,
    #sec02 .section .sectiontxt { margin-bottom: 5%; }
    #sec01 .section .imgbox,
    #sec02 .section .imgbox {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    
    #btmlinkbox { background: #fff; padding: 30% 0 15%; text-align: center; position: relative;}
    #btmlinkbox.edge { padding: 15% 0; }
    #btmlinkbox ul { display: block; width: 100%; }
    #btmlinkbox ul li { display: inline-block; width: 45%; margin: 0 1%; font-weight: bold; margin-bottom: 5%; height: 10vw; line-height: 10vw; position: relative; }
    #btmlinkbox ul li.off { display: none; }
    #btmlinkbox ul li:nth-child(2) { position: absolute; top: 0; left: 0; margin-top: 17%; }
    #btmlinkbox.edge ul li:nth-child(2) { position: relative; top:auto; left: auto; margin: 0 1% 5%; }
.slide-up { opacity: 0; margin-top: 20px; }
.slide-up.in { opacity: 0;  }
}

#adMovBox { display:none; position: absolute; top: 0; width: 80%; margin: 5% 10% 0;}
#adMovBox.showMov { display:block; z-index: 1000;}
#adMovBox.showMov iframe { width: 100%; height: 100%; }

#floatbg { display: none; text-align: center; background: rgba(0,0,0,.7); z-index: 999; width: 100%; height: 100%; height: 100vh; position: fixed; top: 0; }
.fcRed{color: #ff0000;}