@charset "utf-8";

/**/

header .header_box,header.is-animation .header_box {
    z-index: 11;
}

header .toggle_btn {
    z-index: 11;
}

.choho-lp nav.header_nav ul li a b {
    text-align: left;
    font-size: 16px;
}

.choho-lp nav.header_nav ul li a {
    padding: 20px 3px;
}

.choho-lp nav.header_nav ul {
    align-items: center;
}

.choho-lp nav.header_nav ul li {
    width: 25%;
}

.choho-lp nav.header_nav ul li:last-child {
    border-right: none;
}

.choho-lp .top-main-image nav.header_nav.transform ul li a b {
    text-align: left;
}

.choho-lp .top-main-image nav.header_nav.transform ul li a {
    padding: 18px 0;
}

.choho-lp .top-main-image nav.header_nav ul li a:hover {background: #f5f5f5;}


.choho-lp .top-main-image nav.header_nav.transform ul li a span {
    min-width: 20px;
    margin: 0 0 0 10px;
}

.choho-lp .top-main-image nav.header_nav.transform {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 8px 3px #bfbfbf5c;
}

.choho-lp nav.header_nav ul li a span {
    min-width: 30px;
    width: 30px;
    height: 30px;
}

.choho-lp nav.header_nav ul li a span:before{
    background-size: 8px;
}

.link-box {
    max-width: 1200px;
    margin: auto;
}
.link-box.pc-991 {
    margin: 0 auto 30px;
}
.link-box span{
    display:block;
}

.link-box a {
    color: #69c;
    text-decoration: underline;
    word-wrap: break-word;
}

/**/
.wave-top {
  display: block;
  width: 200%;      /* 横に広げてスクロール感を出す */
  height: 26vh;
  position: absolute;
  bottom: -42px;
  left: 0;
  animation: waveMove 6.5s linear infinite;
}

.wave-wrap {
  top: -58px;
　bottom:inherit;
  z-index:1;
}


@keyframes waveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 半分だけスライドしてループ */
  }
}




#prologue {
    padding: 50px 0 280px;
}

ul.share-list {
    margin: 20px auto 0;
    align-items: center;
}


ul.share-list li {
    margin: 0 20px 0 0;
}

ul.share-list li a img {
    width: 26px;
}

ul.share-list li:nth-child(2) a img {
    width: 22px;
}

ul.share-list li a {
    display: block;
}


.sharebox {
    margin: 0 auto;
    /* position: absolute; */
    top: 0;
}

.date{
    color: #858585;
    margin: 0 10px 0 0;
}

span.tag {
    color: #fff;
    padding: 3px 10px 5px;
    background: #0073bd;
    border-radius: 7px;
    font-size: 1em;
    display: inline;
    margin: 0 8px 0 0;
}

span.tag a {
    color: #fff;
}



figure {
    margin-bottom: 0;
}


h2,h3,h4,.category,.about_wrap b{
    /* font-family: 'fot-rodin-pron'!important; */
}

.color-blue {
    color: #00478b;
}



.top-main-image {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
}

.main_wrap {
    background: #fafcfd;
    width: 100%;
}

.main-logo.pc-991 {
    margin: auto;
    position: absolute;
    top: 5%;
    left: 2%;
    background: hsl(0deg 0% 100% / 78%);
    padding: 13px 15px;
}

.main-logo a img {
    max-width: 278px;
}

span.main-logo-text {
    margin: 10px auto 0;
    color: #000;
    display: block;
    text-align: center;
}

span.main-logo-text p {
    font-size: 0.9em;
    font-weight: 700;
}

span.main-logo-text h6 {
    font-weight: 700;
    font-size: 1.1em;
    text-indent: -8px;
}

.main-logo a {
    align-items: center;
}


.main_des_button.button {
    display: none;
}


span.main_des figcaption * {
    font-family: 'Noto Serif JP', serif !important;
    display: inline-block;
}

span.main_des figcaption {
    display: flex;
    /* width: 100%; */
    position: relative;
    align-items: baseline;
    justify-content: space-between;
    top: 3%;
    position: absolute;
    left: 0;
    right: 0;
}

span.main_des {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    width: 850px;
    top: 0;
    right: 0;
}

span.main_des figcaption b {
    margin: 0;
    text-align: center;
    display: block;
    color: #fff;
    /* width: 113px; */
}

span.main_des figcaption b.to {
  top: 60%;
  position: absolute;
  right: 14%;
}

span.main_des figcaption b.sakana{
    width: 240px;
    margin: 0 0 0 50px;
}


span.main_des figcaption p {
    font-size: 0.8vw;
    line-height:1.8;
    margin: 0 0 0 20px;
}

span.main_des figcaption p:last-child {
    margin: 0;
    height: 75%;
}

.main_wrap .mttl {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    height: 100%;
    max-width: 1920px;
}



.mttl-box span.main_ttl span {
    text-align: center;
    margin: 0 auto 0;
    display: inline-block;
    position: relative;
    width: 400px;
}

.main_img {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 140px;
    margin: auto;
    display: block;
    text-align: center;
    width: 410px;
    background: url(../../img/feature/vol89/main.webp) no-repeat center;
    background-size: 100%;
}


.main_img02 {
    /* position: absolute; */
    /* right: 21%; */
    /* bottom: 11%; */
    margin: 0;
    /* left: 0; */
}

.main_text {
    position: absolute;
    right: 6%;
    width: 460px;
    top: 50%;
    transform: translateY(-50%);
}

.main_text.mt2 {
    left: inherit;
    right: 0;
}

span.main_ttl {
    display: flex;
    text-align: center;
    margin: 0;
    position: absolute;
    bottom: 11%;
    left: 0;
    align-items: baseline;
}

.main_text p {
    /* color: #5185c5; */
    font-weight: 600;
    /* text-orientation: upright; */
    /* writing-mode: vertical-rl; */
    /* margin: 0 auto 0 0; */
    letter-spacing: 4px;
    font-size: 16px;
    /* line-height: 3; */
}

.mttl small {
    color: #666;
    margin: 0;
    display: block;
    position:absolute;
    bottom: 5%;
    right:0;
    width: 260px;
}




span.main_des p{
    color:#5185c5;
    font-weight: 600;
    margin: 40px auto 0;
}

.main_img03 {
    position: absolute;
    bottom: 4%;
    right: 1%;
    font-size: 0.9em;
    text-align: center;
}

.main_img03 * {
    display: block;
    font-family: 'Noto Serif JP', serif;
}

.main_img03 small {
    font-size: 60%;
    margin: 5px auto 0;
}

/**/

.scroll {
        cursor: pointer;
        position: absolute;
        width: 140px;
        height: 120px;
        bottom: 14%;
        margin: auto;
        left: 5%;
        overflow: hidden;
        z-index: 10;
    }
    
    .scroll a:before {
        -moz-animation-name: anime1;
        -moz-animation-duration: 5s;
        -moz-animation-timing-function: ease;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-name: anime1;
        -webkit-animation-duration: 5s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
        -o-animation-name: anime1;
        -o-animation-duration: 5s;
        -o-animation-timing-function: ease;
        -o-animation-iteration-count: infinite;
        -ms-animation-name: anime1;
        -ms-animation-duration: 5s;
        -ms-animation-timing-function: ease;
        -ms-animation-iteration-count: infinite;
        content: "";
        position: absolute;
        top: 40px;
        height: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 0.5px;
        text-align: center;
        z-index: 100;
        display: block;
        overflow: hidden;
    }
    
    .scroll a {
        position: absolute;
        margin: 0 auto;
        display: block;
        text-align: center;
        height: 100%;
        overflow: hidden;
        z-index: 1;
        cursor: pointer;
        width: 76px;
        top: 0;
        right: 0;
        left: 0;
        color: #4d4d4d;
        font-size: 1.3em;
        font-weight: 700;
    }

    .scroll a:after {
        content: "Scroll";
        position: absolute;
        color: hsl(0deg 0% 0% / 0%);
        left: 3px;
        right: 0;
        margin: auto;
        text-align: center;
        top: 3px;
        letter-spacing: 1px;
        z-index: -1;
        font-weight: 700;
    }
    
    .scroll span {
        display: block;
        position: absolute;
        z-index: 10;
        color: #fff;
        top: 0;
        letter-spacing: 1px;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        font-size: 1em;
        width: 100%;
        /* display: block; */
        vertical-align: middle;
        text-align: center;
        writing-mode: vertical-lr;
        font-family: 'Crimson Text', serif;
        font-weight: 700;
    }
    
    @-moz-keyframes anime1 {
        0% {
            width: 1px;
            height: 0;
            background-color: none;
        }
    
        100% {
            width: 1px;
            height: 100%;
            background-color: #4d4d4d;
        }
    }
    
    @-webkit-keyframes anime1 {
        0% {
            width: 1px;
            height: 0;
            background-color: none;
        }
    
        100% {
            width: 1px;
            height: 100%;
            background-color: #4d4d4d;
        }
    }
    
    @-o-keyframes anime1 {
        0% {
            width: 1px;
            height: 0;
            background-color: none;
        }
    
        100% {
            width: 1px;
            height: 100%;
            background-color: #4d4d4d;
        }
    }
    
    @-ms-keyframes anime1 {
        0% {
            width: 1px;
            height: 0;
            background-color: none;
        }
    
        100% {
            width: 1px;
            height: 100%;
            background-color: #4d4d4d;
        }
    }

main{
    display: block;
    padding: 0 0 80px 0;
    position:relative;
    background: #fff;
}


section {
    margin: 0 auto;
    padding: 10px 0 230px 0;
    position: relative;
    overflow: hidden;
}

.box {
    max-width: 1200px;
    margin: auto;
    width: 90%;
    padding: 0;
    position: relative;
    z-index: 1;
    display: block;
}


.bg-gray {
    background: #fbfbfb;
}

.bg-bl {
    background: #c7d9f0;
    position: relative;
}

.bg-blue {
    background: #8aa3d4;
}



.bg-pu {
    background: #9a8ec3;
}

.bg-lipu {
    background: #f2efff;
    position: relative;
}


.bg-or {
    background: #fff6e9;
}

.bg-gre {
    background: #9acc82;
}


.bg-ligre {
    background: #f2fbed;
    position: relative;
}

.bg-liblue {
    background: #d3edfb;
    position: relative;
}

#history:before, #environment:before, #ecology:before,#hygiene:before,#disaster:before,#sips:before,#energy:before {
    /* content: ""; */
    position: absolute;
    width: 100%;
    height: 190px;
    background: url(../../img/feature/vol89/make_nami.png) no-repeat top;
    background-size: cover;
    top: -190px;
}

#history:before {
    background: url(../../img/feature/vol89/use_nami.png) no-repeat top;
    background-size: cover;
}

#hygiene:before,#disaster:before {
    background: url(../../img/feature/vol89/eat_nami.png) no-repeat top;
    background-size: cover;
}

#energy:before {
    background: url(../../img/feature/vol89/energy_nami.webp) no-repeat top;
    background-size: contain;
    height: 662px;
    top: 100px;
    width: 900px;
    left: 0;
    z-index: 0;
    content:"";
}



#sips:before {
    background: url(../../img/feature/vol89/nagasaki_nami.png) no-repeat top;
    background-size: cover;
}

/*title =============== */


span.prologue_text {
    text-align: center;
}

span.prologue_text p {
    font-weight: 600;
    color: #5185c5;
    line-height: 2.5;
    display: none;
}

.bg-be {
    background: #F5F2E9;
}

.bg-be02 {
    background: #fffdf7;
}

.map h1.path-ttl span {
    font-size: 1em;
    line-height: 1;
    margin: 20px auto 0;
    color: #fff !important;
    letter-spacing: -2px;
}

/*about =============== */


.map {
    margin: 0 auto 50px;
    max-width: 1200px;
    width: 90%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: left;
}

.map figure {
    margin: 0 auto;
    text-align: center;
    max-width: 1200px;
}

.map figure video{
    max-width: 100%;
    border: none;
    outline: none;
    filter: drop-shadow(0px 0px rgba(0,0,0,0));
}

section.about {
    position: relative;
    background: #fff;
    padding: 100px 0 110px;
}

.about_wrap {
    margin: 0;
    width: 100%;
    position: relative;
    padding: 0;
    text-align: left;
    z-index: 1;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}


.about_wrap b{
    /* display:block; */
    font-weight: 600;
}

.about_text {
    width: 100%;
    margin: 0 auto 100px;
    text-align: center;
}

.about_wrap .about_text p{
   font-weight: 400;
   font-size: 1.2em;
   position: relative;
   line-height: 2.3;
   max-width: 1200px;
   margin: auto;
   color: #9a8741;
   width: 90%;
}


.about_wrap .about_text p b {
    border: 1px solid #9a8741;
    display: block;
    position: relative;
    padding: 20px;
}

.about_wrap .about_text p b:before {
    content: "";
    position: absolute;
    left: -2px;
    height: 60%;
    width: 5px;
    background: #fff;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}

.about_wrap .about_text p b:after {
    content: "";
    position: absolute;
    right: -1px;
    height: 60%;
    width: 5px;
    background: #fff;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}

.about_wrap .about_text p:before {
    content: "";
    position: absolute;
    height: 5px;
    width: 88%;
    background: #fff;
    z-index: 1;
    top: -2px;
    left: 0;
    right: 0;
    margin: auto;
}

.about_wrap .about_text p:after {
    content: "";
    position: absolute;
    height: 5px;
    width: 88%;
    background: #fff;
    z-index: 1;
    bottom: -3px;
    left: 0;
    right: 0;
    margin: auto;
}



.color-be {
    color: #b8ae8b !important;
}

.color-gray {
    color: #dcdddd;
}

figure.grad-text {
    width: 250px;
    position: relative;
    /* right: 0; */
    /* top: -210px; */
    margin: 0 50px 0 0;
}
.blur {
   opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }

.is-visible {
   -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .6s;
  }

  @keyframes imageBlur {
    from {
      opacity: 0;
      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -ms-filter: blur(15px);
      -o-filter: blur(15px);
      filter: blur(15px);
    }
  
    to {
        opacity: 1;
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -ms-filter: blur(0px);
      -o-filter: blur(0px);
      filter: blur(0px);
    }
  }

figure.nbe {
    display: block;
    width: 220px;
    margin: 20px auto 0 !important;
}

span.category {
    display: inline;
    margin: 0 auto 10px;
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
    background: #6d6d6d;
    padding: 2px 20px;
    border-radius: 30px;
}


.map h1.path-ttl {
    font-family: "a-otf-ud-reimin-pr6n", sans-serif;
    font-style: normal;
    padding: 0;
    margin: 0 auto 40px;
    font-weight: 400;
    letter-spacing: 0;
    writing-mode: tb;
}

.map h1.path-ttl b{
    line-height: 1.2;
    font-size: 4em;
    display: block;
    color: #fff;
    font-weight: 400;
    letter-spacing: -5px;
}

h1.path-ttl b.large {
    font-size: 8em;
}

h1.path-ttl span {
    font-size: 3.2em;
}

h1.path-ttl {
    font-weight: 600;
    letter-spacing: 0;
    margin: 20px auto 0;
}

h1.path-ttl b {
    font-size: 5em;
}

rt {
    font-size: 13px;
}

/*prologue*/


.name {
    width: auto;
    align-items: center;
    margin: 20px 0 0 auto;
    justify-content: center;
}

#prologue h3.g-head {
    border-bottom: 1px solid;
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 0 20px 0;
}

span.main_des figcaption b.to:before {
   bottom: -57%;
   content:"";
   background: url(../../img/feature/vol89/shizuku.webp) no-repeat top;
   background-size: contain;
   width: 40%;
   height: 70px;
   position: absolute;
   right: 0;
   z-index: -1;
}


#prologue .name figure {
    width: 90px;
    border-radius: 100px;
    overflow: hidden;
    align-items: center;
    display: inline-block;
    margin: 0 !important;
}

.name .name-box {
    width: auto;
    margin: 0 0 0 25px;
}

.name .name-box small{
    font-size: 80%;
    font-weight: 500;
}

/**/

.box .wrap {
    overflow: hidden;
}

.people-box {
    /* width: 20%; */
    display: block;
    width: 100%;
    max-width: 279px;
    position: relative;
    /* margin: 0 0 30px 0; */
}


.people-wrap figure {
    position: relative;
    text-align: center;
    margin: -40px 0 0 0;
}

.people-wrap .name-box h6 {
    text-align: center;
    margin: 15px auto 5px;
    font-size: 1.1em;
    font-weight: 600;
}

.people-wrap .name-box small {
    text-align: center;
    display:block;
    margin: 0 auto 0;
}

.text-inner-img {
    width: 38%;
    float: right;
    margin: 0 0 2% 4%;
}

.text-inner-img.left-f {
    float: left;
    margin: 0 4% 2% 0;
}

.text-inner-img.big-f {
    width: 64%;
}



.text-box h3 {
    line-height: 1.4;
    padding: 0 0 5px 0;
    border-bottom: 1px solid;
    margin: 0 0 30px 0;
}

.tate-pic {
    width: 22%;
    float: left;
    margin: 0 4% 2% 0;
}

.tate-pic.right-f {
    float: right;
    margin: 0 0 2% 4%;
}

.text-inner-img.inner-img {
    float: left;
    margin: 0 4% 2% 0;
    width: 32%;
}

.text-inner-img.inner-fukidashi {
    width: auto;
}

.text-box {
    width: 100%;
}

.t-text figure img {
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 5px 0;
    z-index: -1;
    position: relative;
}

/*歴史*/
#history .result_text.flex {
    /* flex-direction: row-reverse; */
}

#history .result_text.flex .text-wrap {
    /* margin: 0 5% 0 0; */
}

#history h1.path-ttl {
    text-align: center;
}


figure.map-p {
    position: absolute;
    left: -150px;
    width: 370px;
    z-index: -2;
}

#history .about_wrap h1.path-ttl span {
    color: #5185c5;
    text-indent: 0;
    padding: 0 70px 0 0;
}



#history h1.path-ttl span.second-h1 {
    display: block;
    text-indent: 41px;
    padding: 0;
}

#history {
    z-index: 0;
}

figure.wood {
    /* position: absolute; */
    top: 0;
    right: 0;
    z-index: -1;
    width: 480px;
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    /* padding: 0 150px 0 0; */
    flex-direction: row-reverse;
    margin: 0 0 0 200px;
}

figure.wood span p {
    writing-mode: horizontal-tb;
    display: block;
    float: right;
}


figure.wood span {
    color: #5185c5;
    writing-mode: vertical-lr;
    font-size: 2.8em;
    display: block;
    padding: 0 0 0 20px;
}

figure.wood span b {
    font-size: 150%;
}

/*造る*/

#environment figure.grad-text,#hygiene figure.grad-text,#energy figure.grad-text,#disaster figure.grad-text,#ecology figure.grad-text {
    /* top: -150px; */
    width: 180px;
    /* right: 4%; */
}



#environment span.category {
    /* background: #5a5f5b; */
}

#environment h3.g-head, #hygiene h3.g-head, #energy h3.g-head,#disaster h3.g-head,#ecology h3.g-head{
    color: #fff;
    font-size: 4em;
    line-height: 1.6;
}

#environment h3.g-head span, #hygiene h3.g-head span, #energy h3.g-head span, #disaster h3.g-head span, #ecology h3.g-head span{
    padding: 0 5px;
}

#environment h3.g-head:last-child, #hygiene h3.g-head:last-child, #energy h3.g-head:last-child, #disaster h3.g-head:last-child, #ecology h3.g-head:last-child{
    text-indent: 101px;
}

#environment h1.path-ttl b, #hygiene h1.path-ttl b, #sips h1.path-ttl b {
    display: block;
    line-height: 1.2;
    margin: 10px auto 0;
}

figure.same {
    position: absolute;
    right: 0;
    width: 360px;
    top: 230px;
    transform-origin: center bottom;
    animation: yurayura 3s linear infinite;
}


@keyframes yurayura {
  0%,100% {
      transform: rotate(-4deg);
  }
  25%{
      transform: rotate(0deg);
  }

  50%{
      transform: rotate(4deg);
  }

  75%{
      transform: rotate(0deg);
  }
}

.choho-lp .text-box small.during {
    margin:10px 0 0 0;
    display:block;
}

.text-box rt {
    font-size: x-small;
}

/*衛星*/


section#hygiene {
    padding-bottom: 0;
}

#hygiene .text-wrap {
    width: 100%;
    /* margin: 0; */
}

.eat-box{
    width:100%;
}

.eat-box .people-box {
    width: 36%;
}

.fukidashi.f02 {
    position: absolute;
    top: 32px;
    right: 0;
    left: inherit;
}

.people-wrap {
    position: relative;
}

#environment .people-wrap figure {
    margin: -17px 0 0 0;
}


#hygiene .t-text figure span {
    display: block;
    margin: 0 auto -180px;
    z-index: 1;
    position: relative;
}

#hygiene .book01 {
    width: 30%;
}

#hygiene .people-wrap figure span {
    /* width: 57%; */
}


#hygiene .people-wrap figure {
    margin: -30px 0 0 0;
}


#disaster .t-text figure span {
    margin: 0 0 -188px 0;
    position: relative;
    display: block;
    z-index: 1;
}

.result_text .img-box {
    width: 45%;
    margin: 0 0 0 4%;
}

.result_text .text-box {
    width: 100%;
}

/*エネルギー*/
section#energy {
    padding: 300px 0 230px 0;
}

#energy .about_wrap {
    justify-content: flex-start;
    flex-flow: row-reverse;
    align-items: end;
}

#energy .about_wrap figure.grad-text {
    margin: 0 0 0 50px;
}

span.mini-f {
    width: 220px;
    display: block;
    margin: -100px auto 30px;
    z-index: 0;
    position: relative;
}

.text-wrap.mini-have {
    padding-top: 60px;
    margin-top: -60px;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 90%; /* 16:9 の比率 */
  overflow: hidden;
  border-radius: 100%;
  border: 11px solid #fff462;
}

.video-container video {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 埋め込み背景に最適 */
}

.arrow-f {
  display: inline-block;
  width: 43.5px;
  height: 110px;
  background: #fff462;
  clip-path: polygon(0 63.2%, 31% 63.2%, 31% 0, 69% 0, 69% 63.2%, 100% 63.2%, 50% 100%);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -110px;
}

/*シップス*/
section#sips {
    padding-bottom: 180px;
}


#sips figure.grad-text {
    width: 220px;
    position: absolute;
    left: 0;
    top: 0;
}

#sips span.category{
    background:#8f82bc;
}

#sips .people-wrap figure span {
    width: 75%;
}

.img-60 {
    width: 60%;
    float: right;
    margin: 0 0 3% 4%;
}


.bottom-sub {
    margin: 20px auto 0;
    display: block;
}


.fukidashi {
    background: #fff;
    padding: 20px 23px;
    border-radius: 20px;
    box-shadow: inset 0px 0 14px 7px #d2cfcf;
    display: block;
    width: 100%;
    position: relative;
    left: 0;
}

.fukidashi:after {
    content: "";
    width: 32px;
    height: 33px;
    background: url(../../img/feature/vol84/fuki.png) no-repeat center center;
    position: absolute;
    bottom: -30px;
    z-index: 1;
    left: 18%;
    background-size: cover;
}

.fukidashi p {
    font-size: 0.9em;
}

.people-wrap figure span {
    width: 63%;
    display: block;
    text-align: center;
    margin: auto;
}



.more a {
    background: #004e9d;
    color: #fff;
    padding: 20px 10px;
    display: block;
    border-radius: 47px;
    position: relative;
    text-align: center;
    font-size: 1em;
}

.more {
    display: block;
    margin: 30px 0 20px 0;
}



.relationship_text {
    margin: 50px auto 0;
}


.support-last .button {
    margin-right: auto;
    margin-left: auto;
}



.support-last {
    padding: 50px;
    display: block;
    overflow: hidden;
    border: 1px solid #00b9ef;
    border-radius: 40px;
}




.support-last .text-t h5 {
    font-weight: 600;
    font-size: 1.8em;
    text-align: center;
}

.support-last .fukurou .text-t {
    width: 100%;
    margin: 0;
}

.hs_wrap {
    display: flex;
    position: relative;
    margin: 0 0 0 60px;
}

.hs_wrap .about_wrap {
    width: 53%;
    display: block;
}

.hs-img {
    width: 29%;
    margin: 0;
    position: absolute;
    right: 50px;
    bottom: 0;
}

.hs_wrap .people {
    margin: 0;
}

.hs_wrap .people figure {
    padding: 0 0 0;
    width: 100%;
    display: flex;
    align-items: end;
    flex-direction: row-reverse;
    max-width: 298px;
    margin: -70px auto 0 !important;
    z-index: 1;
    position: relative;
}

.hs_wrap .people .fukidashi:after {
    left: 40px;
}

.hs_wrap .people figure small {
    width: 40%;
    margin: 0 0 20px 0;
}

.hs_wrap .people figure img {
    width: 60%;
}

.hs-img small.during {
    width: 92%;
    display: block;
}

.hs_wrap h4 {
    position: relative;
    text-align: center;
    color: #00b9ef;
    margin: 0 0 20px 0;
    width: 77%;
}

.hs_wrap h4:before {content: "";position: absolute;width: 2px;height: 60%;background: #00b9ef;transform: rotate(-25deg);left: 0;bottom: 0;}


.hs_wrap h4:after {content: "";position: absolute;width: 2px;height: 60%;background: #00b9ef;transform: rotate(25deg);right: 0;bottom: 0;}



.support-last .text-box:first-child figure {
    overflow: hidden;
    border-radius: 10px;
}

.support-last .text-box small {
    font-weight: 500;
    color: #666;
}

.support-last .instawrap {
    width: 64%;
    float: right;
}

.about_wrap .hs-img {
    width: 90%;
    position: relative;
    right: 0;
}

.hs_wrap h2 {
    width: 510px;
    margin: 0 0 0 60px;
}




.more a.arrow:before {
    content: "";
    position: absolute;
    background: url(../img/arrow_w.svg) no-repeat center;
    width: 10px;
    height: 17px;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    right: 6%;
    background-size: 10px;
}

.more a:hover {
    background: #2f3439;
}



.button {
    max-width: 320px;
    width: 100%;
}


.button a {
    background: #6d6d6d;
    padding: 20px 0;
    display: block;
    text-align: center;
    border-radius: 10px;
    width: 100%;
    position: relative;
    color: #fff;
}

.button a:hover {
    background: #3e3e3e;
}


.text-wrap {
    overflow: hidden;
    width: 100%;
    display: block;
}

.instawrap {
    /* max-width: 100%; */
    /* margin-right: auto !important; */
    /* margin-left: auto !important; */
    width: 58%;
    margin: 30px 0 0 0 !important;
}

.instawrap > .link {
    margin: 0;
    max-width: 480px;
    display: block;
    width: 100%;
}

.instawrap > .link a{
    background: #fff;
    padding: 20px 10px;
    text-align: center;
    display: block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
}

.instawrap > .link a:hover {
    background:#e5e5e5;
}

.instawrap > .link b {
    text-align: center;
    display: block;
    margin: 0 0 8px 0;
    font-size: 0.95em;
}

.instawrap > .link a.link:before{
    content: "";
    background: url(../../img/feature/vol86/link_black.svg) no-repeat center;
    background-size: 100%;
}

.instawrap > .link span {
    font-size: 0.8em;
    color: #333;
    position: relative;
    padding: 10px 0;
    transition:.3s;
}

.instawrap.flex > .link {
    max-width: 100%;
    width: 48%;
    margin: 0;
}

.instawrap.flex {
    justify-content: space-between;
}

.instawrap > .instagram span {
    padding: 10px 0 10px 50px;
}

.instagram span:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background: url(../../img/feature/vol85/insta.png) no-repeat;
    left: 0;
    top: 0;
    background-size: cover;
}

.border-b{
    border-bottom: 1px dashed hsl(0deg 0% 47.06% / 17%);
    padding: 0 0 100px 0;
}

.category-wrap {
    display: block;
    margin: auto;
    text-align: center;
}

@media (max-width: 1920px) {


}

@media (max-width: 1699px) {

.main_text {
    right: 5%;
    width: 327px;
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
.main_text {
    position: absolute;
    right: 4%;
    /* width: 400px; */
    top: 50%;
    transform: translateY(-50%);
};
}

.main_img03 {
    bottom: 1%;
}

}


@media (max-width: 1499px) {

.main_text {
    right: 4%;
    width: 300px;
}

span.main_des figcaption b.to {
    width: 110px;
    right: 13%;
}

span.main_des figcaption b.sakana {
    width: 210px;
}

.mttl-box span.main_ttl span {
    width: 370px;
}

span.main_des {
    width: 750px;
}

.main_img {
    width: 380px;
}


/*歴史*/
figure.map-p {
    left: -5%;
    width: 30%;
}

/*エネルギー*/
#energy:before {
    width: 1000px;
}


}
    




@media (max-width: 1399px) {

.choho-lp nav.header_nav ul li a b {
    font-size: 13.6px;
}

.choho-lp nav.header_nav ul li a b br{
    display:none;
}

.choho-lp nav.header_nav ul li a {
    padding: 15px 0px;
}

.choho-lp nav.header_nav ul li a span {
    margin: 0 0 0 4px;
    width: 20px;
    height: 20px;
    min-width: auto;
}

.choho-lp .top-main-image nav.header_nav.transform {
    width: 98%;
}
    

.main_text {
    width: 36%;
    right: inherit;
    left: 5%;
    top: 42%;
}

.main_wrap .mttl {
    /* height: 88%; */
}

span.main_des {
    left: inherit;
    max-width: 660px;
    right: 2.5%;
    width: 50%;
}

.main_img {
    left: inherit;
    right: 12%;
    bottom: 90px;
    width: 340px;
}

.main_wrap .mttl:before {
    content: "";
    position: absolute;
    width: 46%;
    height: 100%;
    background: #ffff;
    left: 0;
}

span.main_des figcaption b.sakana {
    margin: 0 0 0 20px;
}



span.main_ttl {
    bottom: 17%;
}

span.main_des figcaption b.to {
    right: 7%;
}

.scroll {
    bottom: 12%;
}

#environment h3.g-head, #hygiene h3.g-head, #energy h3.g-head,#disaster h3.g-head,#ecology h3.g-head{
    font-size: 3.7em;
}
    
/*歴史*/
figure.map-p {
    left: 0;
    width: 26%;
}

/*エネルギー*/
#energy:before {
    width: 850px;
}

}

@media (max-width: 1200px) {


/**/
.choho-lp nav.header_nav ul li a b {
    font-size: 12px;
}
    
.choho-lp .top-main-image nav.header_nav.transform ul li a span {
    margin: 0 0 0 4px;
    min-width: 20px;
}

.choho-lp nav.header_nav ul li a span {
    width: 16px !important;
    height: 16px !important;
}

.choho-lp nav.header_nav ul li a span:before {
    background-size: 6px;
}
    
/**/
.main_wrap .mttl {
    /* height: 84%; */
    /* max-width: 95%; */
}

.main_text p {
    font-size: 15px;
    line-height: 2.5;
}

.mttl small {
    width: 20%;
}


span.main_des figcaption b {
    width: 83px;
}
    
span.main_des figcaption b.sakana {
    width: 169px;
}

span.main_des figcaption b.to {
    width: 90px;
}

span.main_des figcaption b.to:before {
    bottom: -74%;
    width: 34%;
}
    
.main_img {
    width: 350px;
    right: 10%;
}


span.main_des {
    width: 50%;
}


span.main_des p {
    font-size: 15px;
}

.mttl-box span.main_ttl span {
    width: 350px;
}

/**/
    
section{
    padding: 0 0 220px;
}

#environment figure.grad-text, #hygiene figure.grad-text, #energy figure.grad-text, #disaster figure.grad-text, #ecology figure.grad-text {
    width: 200px;
}

#environment figure.grad-text, #hygiene figure.grad-text, #energy figure.grad-text, #disaster figure.grad-text, #ecology figure.grad-text{
    width: 150px;
}

.map h1.path-ttl b {
    font-size: 3em;
}


h1.path-ttl b.large {
    font-size: 6.5em;
}

h1.path-ttl b {
    font-size: 3.8em;
}

#history .about_wrap h1.path-ttl span{
    /* font-size:2.5em; */
    padding: 0;
}

span.category{
    font-size:1.3em;
}

h2.s-head:before,h2.s-head:after {
    width: 75px;
}

    
#prologue {
    /* padding: 80px 0 80px 0; */
}

.people-wrap figure span {
    /* width: 80%; */
}

figure.same {
    width: 270px;
    top: 200px;
}

figure small {
    font-weight: 500;
    color: #666;
}

span.pin-detail {
    width: 50%;
}

span.pin {
    margin: -125px 0 13px auto;
}


.support-last .text-t h5 {
    font-size: 1.5em;
}

#environment h3.g-head, #hygiene h3.g-head, #energy h3.g-head, #disaster h3.g-head, #ecology h3.g-head{
    font-size: 3.2em;
    line-height: 1.2;
}

#environment h3.g-head:last-child, #hygiene h3.g-head:last-child, #energy h3.g-head:last-child, #disaster h3.g-head:last-child, #ecology h3.g-head:last-child{
    text-indent: 40px;
}

#environment h3.g-head span, #hygiene h3.g-head span, #energy h3.g-head span,  #disaster h3.g-head span, #ecology h3.g-head span {
    font-size: 1em;
}

span.mini-f {
    width: 160px;
    margin: -70px auto 0;
}

.video-container {
    border-width: 7px;
}

.arrow-f {
    width: 47px;
    height: 70px;
    bottom: -68px;
}

.text-wrap.mini-have {
    padding-top: 30px;
    margin-top: -30px;
}

#disaster .t-text figure span {
    margin: 0 0 -150px 0;
}

section#sips {
    padding-bottom: 100px;
}
    
#sips figure.grad-text {
    width: 170px;
}

.hs_wrap h4 {
    width: 87%;
}

.hs_wrap h2 {
    width: 440px;
    margin: 0;
}

.hs-img {
    width: 32%;
}


.border-b{
    padding: 0 0 60px 0;
}

/*歴史*/
figure.wood {
    width: 380px;
}

figure.wood span {
    font-size: 2.5em;
}

figure.map-p {
    left: -5%;
}





}
@media (max-width: 1023px) {

    
    span.main_des p br {
        display: none;
    }


    .background1 {
        width: 65%;
        top: -140px;
    }
    
        
    h1.path-ttl b{
        font-size: 3.2em;
    }

    
    h1.path-ttl span {
        font-size: 2.8em;
    }

    /*歴史*/
    
    .map h1.path-ttl b {
        font-size: 2.5em;
    }
    
    h1.path-ttl b.large {
        font-size: 4em;
    }
    
    
    figure.wood span {
        font-size: 1.8em;
    }
    
    figure.wood {
        width: 36%;
        margin: 0 0 0 90px;
    }
    
    .map {
        justify-content: center;
    }
    
    #history h1.path-ttl {
        margin: 0 50px 0 0;

        animation: 0;
    }
    
    #history .about_wrap {
        justify-content: center;
    }


    .text-inner-img.inner-fukidashi {
        width: 25%;
    }
    
    .people-wrap figure {
        margin: -17px 0 0 0;
    }


    span.category{
    font-size:1.2em;
    }

   
    
    #environment h3.g-head, #hygiene h3.g-head, #energy h3.g-head, #disaster h3.g-head, #ecology h3.g-head {
        font-size: 2.8em;
    }

  
    span.mini-f {
        width: 150px;
        margin: -40px auto 0;
    }

     .bottom-sub {
        width: 100%;
    }
    
    .bottom-sub .fukidashi {
        left: 0;
    }

    .support-last .text-box > div {
        /* padding: 30px; */
    }
    
    .support-last .text-box > div:after {
        border-radius: 17%;
    }

    .support-last .text-t h5 {
        font-size: 1.3em;
    }


}




@media (max-width: 991px) {

.main_wrap {
    background: none;
    margin: 5px auto 0;
}

.main_wrap img{
    text-align:center;
    margin: auto;
    display: block;
    width: 68%;
    padding: 70px 0;
    /* box-sizing: border-box; */
}

.main_wrap .mttl {
    position: relative;
    right: 0;
    left: 0;
    margin: auto;
    padding: 30px 0 30px;
    width: 60%;
}
    
.main_wrap img.sp-991 {
    background: #fafcfd;
}

.main_sp_img {
    position: relative;
    width: 100%;
    padding: 0 5% 30px;
    background: #fafcfd;
}

.main_sp_img small.during {
    position: absolute;
    bottom: 40px;
    width: 90%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.top-main-image .link-box {
    margin: 20px auto 0;
}

.main_text02 {
    padding: 20px;
    background: #e5eef7;
}

.main_text02 p {
    /* color: #5185c5; */
    font-weight: 500;
}


/**/

section {
    padding: 0 0 200px;
}


.mt-100 {
    margin: 60px 0 0 0;
}

.mt-80 {
    margin: 40px 0 0 0;
}

.mt-40 {
    margin: 30px 0 0 0 !important;
}

    
#prologue {
    padding: 10px 0 250px 0;
}


h1.path-ttl b {
    display: block;
}

.about_wrap,#energy .about_wrap {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin: 40px auto 0;
}

.g-head-wrap {
    display: block;
    width: 100%;
    margin: 30px auto 0;
}

#energy .about_wrap figure.grad-text{
    margin:0 auto 0;
}


.fukidashi:after {
    width: 20px;
    height: 24px;
    bottom: -20px;
    left: 9%;
}

.fukidashi {
    padding: 16px;
}

#environment figure.grad-text, #hygiene figure.grad-text, #energy figure.grad-text, #disaster figure.grad-text, #ecology figure.grad-text {
    width: 140px;
    left: 0;
    margin: 0 auto 10px;
    display: block;
}

#environment h3.g-head:last-child, #hygiene h3.g-head:last-child, #energy h3.g-head:last-child, #disaster h3.g-head:last-child, #ecology h3.g-head:last-child{
    text-indent:0;
}

figure.same {
    width: 250px;
    top: 160px;
}

figure.grad-text {
    width: 178px;
}


#hygiene .people-wrap figure span {
    width: 77%;
}

.fukidashi.f02:after {
    right: -15%;
}

.hs_wrap .about_wrap{
    margin: 0;
}

#sips figure.grad-text {
    width: 160px;
}

#sips .people-wrap figure span {
    width: 91%;
    margin: 10px auto 0;
}

.hs_wrap h2 {
    width: 330px;
}

.hs_wrap h4 {
    width: 78%;
}

.hs-img {
    width: 39%;
}

.hs_wrap {
    margin: 0 0 0 40px;
}

.hs_wrap .people figure img {
    width: 50%;
    margin: 20px 0 0 0;
}
    
.support-last{
    padding: 30px;
}

.support-last .instawrap{
    margin: 20px 0 0 auto !important;
}


.result_text {
    flex-wrap: wrap;
}

.result_text .text-box {
    width: 100%;
    margin: 0 auto;
}



.bottom-sub {
    max-width: 480px;
    margin: 30px auto 10px;
}

.relationship_text {
    margin: 30px auto 0;
}

.support-last .text-box {
    flex-wrap: wrap;
}



.support-last .fukurou figure {
    width: 25%;
}


.support-last .text-box > div:after {
    border-radius: 30px;
}

small.key-p {
    font-size: 0.85em;
    padding: 2px 12px;
    border-radius: 8px;
}


.book {
    position: relative;
    width: 100%;
    margin: 20px auto 0 !important;
    background: #fffdf7;
    padding: 20px;
}

/*エネルギー*/
#energy:before {
    width: 660px;
}


    
}

@media (max-width: 767px) {

 main{
    padding: 0 0 60px;
    overflow-x: hidden;
}

.main_wrap img {
    width: 71%;
    padding: 20px 0 0;
}

.main_sp_img small.during {
    bottom: 10px;
}
    
.date{
  font-size:0.9em;
}
  
span.tag {
    padding: 0px 7px 3px;
    font-size: 0.85em;
    margin: 0 0 5px 0;
    display: inline-block;
}
    
.link-box span b {
    display: block;
}

#prologue h3.g-head{
    font-size:1.5em;
}

#prologue .name figure {
    width: 64px;
}

#prologue .name .name-box {
    margin: 0 0 0 5%;
}

#prologue .name .name-box small {
    font-size: 0.7em;
}

    
.map h1.path-ttl b {
    font-size: 1em;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 0 10px 0;
}

h1.path-ttl b.large {
    font-size: 2em;
}
    
    
.map {margin: 0 auto 40px;flex-wrap: wrap;}

.map figcaption {
    width: 100%;
}

figure.wood {
    margin: 0 auto 0;
    width: 100%;
    max-width: 220px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
    
#history h1.path-ttl {
    writing-mode: horizontal-tb;
    width: 100%;
    margin: 0 auto 0;
    line-height: 1.8;
}

.map-wrap {
    width: 100%;
}

figure.wood span {
    width: 100%;
    padding: 0;
    writing-mode: initial;
    font-size: 1.1em;
    text-align: center;
}

figure.wood span b{
    font-size: 130%;
}

figure.wood span p{
    font-size: 14.4px;
    text-align: center;
    float: none;
}

figure.map-p {
    width: 100%;
    /* position: relative; */
    top: 0;
    left: -14%;
    margin: 0;
}

.instawrap,.support-last .instawrap {
    width: 100%;
    margin: 40px auto 0 !important;
}

.instawrap > .link {
    margin: 0 auto;
}
    
section{
    padding: 30px 0 150px;
}

section#energy {
    padding: 240px 0 150px;
}
    
    
#history:before, #environment:before, #ecology:before, #hygiene:before, #disaster:before, #sips:before, #energy:before {
    top: -60px;
    height: 60px;
}    

.wave-top {
    height: 16vh;
}


.box.path-box .wrap.mt-100 {
    margin: 30px auto 0;
}

h1.path-ttl b {
    font-size: 1.8em;

}

.people-box {
    width: 100%;
    margin: auto;
    max-width: 100%;
}


.people-wrap figure {
    width: 70%;
    margin: auto;
}

.people-wrap .name-box {
    width: 100%;
    margin: 10px auto 0;
}

.text-wrap,#history .result_text.flex .text-wrap {
    width: 100%;
    margin: 0 auto 0;
}


.result_text,#history .result_text.flex {
    flex-wrap: wrap;
    flex-direction: column-reverse;
}


    
.result_text .img-box {
    width: 100%;
    margin: 0 0 20px 0;
}

.result_text .text-box {
    width: 100%;
}


.sharebox {
    position: relative;
}

#prologue {
    padding: 0px 0 150px 0;
    /* background: #eaf6fd; */
    margin: 50px auto 0;
}
    
#prologue:before{
     /* content: ""; */
     position: absolute;
     width: 100%;
     height: 60px;
     background: url(../../img/feature/vol86/use_nami.png) no-repeat top;
     background-size: cover;
     top: -60px;
}


.category-wrap{
    margin: 0 auto 30px;
}
    
span.category {
    font-size: 1em;
}

h1.path-ttl span {
    font-size: 0.9em;
}

.map h1.path-ttl {
    /* font-weight: 600; */
    text-shadow: 0 0 4px #18375f;
}

#history h1.path-ttl span,#history .about_wrap h1.path-ttl span {
    font-size: 1.8em;
    letter-spacing: 0;
    padding: 0 0 0 0;
}

#history h1.path-ttl span.second-h1{text-indent: 0;}

.text-inner-img.inner-fukidashi {
    width: 100%;
    margin: 20px auto 0;
}

.tate-pic, .text-inner-img, .text-inner-img.left-f, .text-inner-img.big-f, .text-inner-img.inner-img,.tate-pic.right-f {
    width: 100%;
    float: none;
    margin: 30px auto 10px;
    max-width: 400px;
    clear: both;
}

.tate-pic img{
    width: 70%;
    display: block;
    margin: 0 auto 5px !important;
    text-align: center;
}

.text-wrap.wheel .text-inner-img.big-f {
    order: 2;
    margin: 0 auto 30px;
}

.text-inner-img.sp,.tate-pic.sp {
    margin: 30px auto 30px;
}   

#history .text-wrap:first-child .tate-pic {
    padding: 220px 0 0 0;
    margin: 30px auto 0;
}

.t-text {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
    
.support-last {
    width: 100%;
    padding: 0;
    margin: 30px auto 0;
    border: none;
    padding: 0;
    overflow: inherit;
    border-radius: 0;
}

.support-last .text-box {
    flex-direction: column-reverse;
    display: flex;
}

section#sips {
    padding-bottom: 80px;
    padding-top: 40px;
}

#sips .prologue_text {
    /* border-radius: 340px; */
    /* padding: 110px 40px 160px; */
    box-sizing: border-box;
    /* max-width: 450px; */
    width: 100%;
    /* margin: 80px auto 100px; */
}

.prologue_text figure {
    max-width: 310px;
}

.fish02.fish {
    right: 0;
    left: 0;
    top: inherit;
    bottom: -40px;
}
.people-wrap figure {
    width: 33%;
}

.support-last .text-box > div {
    padding: 0;
}

.support-last .text-t h5 {
    font-size: 1em;
}

.people-wrap {
    align-items: flex-start;
}

figure.grad-text {
    width: 140px;
    top: -80px;
}

.people-wrap figure span {
    max-width: 160px;
}

#sips .people-wrap figure span{
    width: 100%;
    max-width: 160px;
}

.people-wrap figure {
    width: 100%;
}

.instawrap.flex {
    flex-wrap: wrap;
    gap: 25px;
}

.instawrap.flex > .link {
    width: 100%;
}

.instawrap > .link a {
    padding: 13px 13px;
    /* text-align: left; */
}

.fukidashi:after {
    left: -160px;
    right: 0;
    margin: auto;
}

figure.nbe {
    width: 180px;
    margin: 0 auto !important;
}

figure.same {
    top: 60px;
    width: 200px;
}

#environment figure.grad-text, #hygiene figure.grad-text, #energy figure.grad-text, #disaster figure.grad-text, #ecology figure.grad-text {
    width: 100px;
    top: 0;
    margin: 0 auto;
}

.pin-wrap {
    background: #eaebd7;
    padding: 20px 0 20px 20px;
}

span.pin-detail {
    width: 45%;
    right: -6%;
}

span.pin {
    margin: -240px 0 10px auto;
}


.eat-box {
    flex-wrap: wrap;
    flex-direction: column-reverse;
}

.eat-box .people-box {
    width: 100%;
}



.button a {
    padding: 17px 0;
    margin: auto;
}

.button {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    width: 100%;
}





.bottom-sub .fukidashi {
    border-radius: 20px;
    padding: 20px;
}




.book01,#hygiene .book01 {
    width: 100%;
    margin: 0 auto;
    float: none;
}


.text-inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}



.book {
    padding: 15px;
}

#sips figure.grad-text {
    width: 130px;
}

.img-60 {
    width: 100%;
    float: none;
    margin: 30px auto 0;
}

.book01.plate {
    width: 100%;
    margin: 0 auto 0;
}

.book01.plate img {
    width: 150px;
}

.border-b{
    padding: 0 0 40px 0;
}

#environment h3.g-head:last-child, #hygiene h3.g-head:last-child, #energy h3.g-head:last-child, #disaster h3.g-head:last-child, #ecology h3.g-head:last-child {
    text-indent: 0;
}


#environment h3.g-head, #hygiene h3.g-head, #energy h3.g-head, #disaster h3.g-head, #ecology h3.g-head {
    padding: 0 0 0 0;
    font-size: 1.5em;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.6;
}

.g-head-wrap {
    display: block;
    width: 100%;
    margin: 20px auto 0;
    /* display: flex; */
    /* justify-content: center; */
}

#energy:before {
    top: 0;
    height: 330px;
    width: 530px;
}

#energy .about_wrap figure.grad-text {
    top: 0;
    margin: 50px auto 50px;
}

#energy .about_wrap {
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
    display: block;
}

#disaster .t-text figure span {
    margin: 0 0 -148px 0;
}

span.mini-f {
    width: 170px;
    margin: 0 auto -30px;
}

.video-container{border-width: 7px;}

.arrow-f{
    width: 30px;
    height: 60px;
    bottom: -58px;
}

/*sips*/
.hs_wrap {
    margin: 0 auto 0;
    flex-wrap: wrap;
}

.hs_wrap .about_wrap {
    width: 100%;
    margin: 0 auto 30px;
    text-align: center;
    justify-content: center;
    display: flex;
    padding: 0 0;
    flex-direction: row;
}

.hs_wrap h4 {
    padding: 0 20px;
    order: 1;
}

.hs_wrap h2 {
    width: 250px;
    margin: auto;
    order: 2;
}

.about_wrap .hs-img {
    width: 100%;
    left: 0;
    right: 0;
    order: 3;
    margin: 0 auto 0;
}

.prologue_text {
    margin: 20px auto 0;
}
    
.prologue_text figure {
    max-width: 100%;
}

.hs-img {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
    margin: 30px auto 0;
}

.hs-img .people figure img {
    width: 160px;
    margin: 0px auto 0;
}

.hs-img .people figure {
    text-align: center;
    flex-wrap: wrap;
    margin: -30px auto 0;
    z-index: 1;
    position: relative;
}

.hs-img .people figure small {
    width: 100%;
    margin: 10px auto 0;
    text-align: center;
    display: block;
}

.hs-img .people .fukidashi:after {
    left: -160px;
    right: 0;
    margin: auto;
}
    
}

@media (max-width: 500px) {
   .main_sp_img small.during {
       text-align:left;
       font-size: 10px;
       text-align: center;
       bottom: 20px;
    }
  
    .people-wrap figure{
        width:100%;
        /* max-width: 190px; */
        margin: -15px auto 0;
        z-index: 1;
    }
  
     .map h1.path-ttl {
        margin: 0 auto 10px;
    }
    
    #environment figure.grad-text, #hygiene figure.grad-text, #energy figure.grad-text, #disaster figure.grad-text, #ecology figure.grad-text {
        width: 90px;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto 40px;
        display: block;
    }
    

    figure.same {
        width: 114px;
        top: 8px;
        /* left: 0; */
    }
    
    span.pin {
        margin: -140px 0 0 auto;
        width: 61%;
    }
    
    span.pin-detail {
        right: 0;
    }

    
    .eat-box .fukidashi:after {
        left: -30px;
    }
    
    #sips figure.grad-text {
        width: 87px;
        left: inherit;
        right: 0;
        top: -40px;
    }
    
    .img-60 {
        margin: 0 auto 20px;
    }
    
    .fish01 {
        width: 150px;
        top: -60px;
    }
    
    .fish02.fish {
        width: 155px;
        bottom: -60px;
    }
    
    #sips .prologue_text {
        padding: 0 0;
        margin: 0 auto 0;
    }
   
    h2.s-head {
        font-size: 1.5em;
    }
    
    .hs_wrap h4 {
        font-size: 1em;
    }
    
    .support-last {
    margin: 0;
    }
    
    .name-box h6 {
        font-size: 1em;
        margin: 0 auto 0;
    }

    .book01.plate img {
        width: 90px;
        margin: -20px auto -10px;
    }

    .book01 figure {
        margin: 0 auto 30px !important;
    }
    
    .bottom-sub {
        margin: 0 auto 0;
    }


section#hygiene {padding-bottom: 20px;}

    /*エネルギー*/
    #energy:before {
        top: 0;
        height: 280px;
        width: 437px;
    }

}

@media (max-width: 350px) {
    .instawrap > .link a.link:before {
        width: 10px;
        height: 10px;
        right: 3%;
    }

}