@charset "UTF-8";
/* --------------------
   Service
-------------------- */
/* -- #about -- */
#about{
   padding: 80px 0 80px;
   position: relative; }

#about .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 40px; }
#about .photo{
    width: 100%; }
#about .photo figure{
   border-radius: 10px;
   overflow: hidden; }
#about .photo img{  width: 100%; }
#about h1{ margin-bottom: 10px; }
#about h2{ margin-bottom: 25px; }
#about p.txs-24{ margin-bottom: 25px; }
#about h3{
   margin-bottom: 1em;
   position: relative;
   color: #00A4E0; }
#about h3:before{
   content: "";
   display: block;
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 100%;
   height: 1px;
   background-color: #00A4E0; }
#about h3 span{
   display: inline-block;
   padding-right: 1em;
   background-color: #EFF9FB; }
#about .kumamon{
   margin-top: 30px;
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 10px; }
#about .kumamon figure{ width: 80px; }
#about .kumamon .text{ width: calc(100% - 90px); }

@media screen and (max-width: 768px){
   #about .photo{
      position: absolute;
      opacity: 0.5;
      right: -20%;
      top: -45vw;
      z-index: -1; }
  #about .touroku { display: block;margin: 40px auto 0;}
}
@media screen and (min-width: 769px){
   #about{padding: 180px 0 160px; }
   #about .tag{ margin-bottom: 20px; }
   #about h2{ margin-bottom: 40px; }
   #about p.txs-24{ margin-bottom: 40px; }
   #about .flex{ gap: 40px; }
   #about .photo{ width: calc(50% - 40px); }
   #about .text{ width: 50%; }
   #pglink .sp{ display: none; }
   #about .kumamon{
      margin-top: 40px;
      gap: 20px; }
   #about .kumamon .text{ width: calc(100% - 100px); }
   #about .touroku {
      position: absolute;
      bottom: 0;
      left: 60vw;
      width: 30vw;
      max-width: 240px;}
}
@media screen and (min-width: 1080px){
   #about .flex{ gap: 80px; }
   #about .photo{ width: calc(50% - 80px); }
   #about .touroku { left: 760px;}
}



/* -- #local -- */
#local h1{ margin-bottom: 20px; }
#local .list{
   display: flex;
   flex-wrap: wrap;
   gap: 30px; }
#local .item{
   text-align: center;
   width: 100%; }
#local .item h2{ margin-top: 1em; }
#local .photo{
   overflow: hidden;
   border-radius: 10px; }
#local .photo img{ width: 100%; }
@media screen and (min-width: 769px){
   #local h1{ margin-bottom: 40px; }
   #local .list{ gap: 20px; }
   #local .item{ width: calc(50% - 10px); }
}
@media screen and (min-width: 1080px){
   #local .list{ gap: 40px; }
   #local .item{ width: calc(50% - 20px); }
}


/* -- #sdgs -- */
#sdgs{ margin-top: 80px; }
#sdgs .area{
   margin: auto;
   background-color: #fff;
   width: 90%;
   border-radius: 10px; }
#sdgs .wrap{ padding: 40px 0; }
#sdgs .tag{
   margin-bottom: 20px;
   background-color: #EFF9FB; }
#sdgs .main ul{
   display: flex;
   flex-wrap: wrap;
   gap: 6px; }
#sdgs .figure{
   padding-top: 30px;
   margin-top: 40px;
   border-top: solid 1px #EEEEEE; }
#sdgs .figure .txs-24{ margin-bottom: 30px; }
#sdgs .figure .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 50px; }
#sdgs .figure .flex .item{ width: 100%;  }
#sdgs .figure h3{
   padding: 0.2em;
   margin-bottom: 20px;
   background-color: #EFF9FB;
   border-radius: 10px;
   text-align: center;
   color: #00A4E0;}
#sdgs .figure h4{
   margin-bottom: 0.75em;
   position: relative; z-index: 1; }
#sdgs .figure h4::first-letter{
   position: relative;
   color: #fff; }
#sdgs .figure h4::before{
   content: "";
   display: block;
   width: 1.8181818em;
   height: 1.8181818em;
   left: -0.425em;
   top: -0.1125em;
   z-index: -1;
   background: #00A4E0;
   border-radius: 50%;
   position: absolute; }
#sdgs .figure ul{
   margin-top: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 4px; }
#sdgs .figure ul li{ width: 40px; }
@media screen and (max-width: 480px){
   #sdgs .main ul{ gap: 5px; }
   #sdgs .main ul li{ width: 60px; }
}
@media screen and (min-width: 481px){
   #sdgs .wrap{ padding: 60px 0; }} 
@media screen and (max-width: 768px){
   #sdgs .sp-none{ display: none; }
}
@media screen and (min-width: 769px){
   #sdgs{ margin-top: 160px; }
   #sdgs .area{
      border-radius: 20px;
      width: calc(100% - 80px); }
   #sdgs .wrap{ padding: 120px 0 140px; }
   #sdgs .tag{ margin-bottom: 40px; }
   #sdgs .figure{
      padding-top: 60px;
      margin-top: 80px; }
   #sdgs .figure .txs-24{ margin-bottom: 40px; }
   #sdgs .figure h3{ margin-bottom: 30px; }
   #sdgs .figure h4::before{
      width: 40px;
      height: 40px; }
   #sdgs .figure .flex{ gap: 40px; }
   #sdgs .figure .flex .item{ width: calc(50% - 20px);  }
   #sdgs .figure ul{ gap: 5px; }
   #sdgs .figure ul li{ width: 60px; }
}
@media screen and (min-width: 1080px){
   #sdgs .item { gap: 80px; }
}



/* -- #ecoactioin -- */
#ecoactioin { padding-top: 80px; }
#ecoactioin h1{ margin-bottom: 30px; }
#ecoactioin .list{
   margin-top: 50px;
   display: flex;
   flex-wrap: wrap;
   gap: 40px; }
#ecoactioin .report{
   width: 100%;
   padding: 10px 10px 10px 20px;
   color: #00A4E0;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #fff; }
#ecoactioin .report p span{ display: block; line-height: 1.25;  }
#ecoactioin .icon-wrap{
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 0; }
#ecoactioin .icon-wrap .icon{ position: relative; }
#ecoactioin .icon-wrap .icon .off{
   position: relative;
   z-index: 1; }
#ecoactioin .icon-wrap .icon .on{
   z-index: 0;
   top: 0;
   opacity: 0;
   position: absolute; }
@media screen and (min-width: 769px){
   #ecoactioin { padding-top: 140px; }
   #ecoactioin h1{ margin-bottom: 40px; }
   #ecoactioin .report{
      width: calc(50% - 20px);
   }
   #ecoactioin .report{ padding: 20px 30px 20px 40px; }
}
@media screen and (min-width: 1080px){
   #ecoactioin .list{
      margin-top: 60px;
      gap: 80px; }
   #ecoactioin .report{
      width: calc(50% - 40px);
   }
   #ecoactioin .report:hover{ color: #fff; background-color: #00A4E0; }
   #ecoactioin .report:hover .icon .off{ opacity: 0; }
   #ecoactioin .report:hover .icon .on{ opacity: 1; }
}