@charset "utf-8";
/* CSS Document */

.fsp_body{
  background: url("../img/il_bg.png") center top no-repeat;
}

.fsp_wrap{
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

h1{margin-bottom: 48px;}
h1 img{max-width: 100%;}
.fsp_message{
  margin-bottom: 56px;
  line-height: 2;
  font-size: 1.125rem;
}

.fsp_commentblock{
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 96px;
  padding-bottom: 20px;
  padding-right: 40px;
  background: url("../img/il_smile.svg") 185px 72px no-repeat;
}
.fsp_bartop{
  position: absolute;
  right: calc(50% + 250px);
  top: 0;
}
.fsp_barbottom{
  position: absolute;
  left: calc(50% + 250px);
  bottom: 0;
}
.fsp_commentblock div{
  position: relative;
  width: 1000px;
  padding: 45px 166px 35px 38px;
  border-radius: 18px;
  background-image: url(../img/il_commentbg.svg);
  background-position: 42px -24px;
  background-repeat: no-repeat;
  background-color: #F5F5F5;
}
.fsp_commentblock div h2{
  margin-bottom: 16px;
  text-align: left;
  font-size: 1.75rem;
  font-weight: bold;
  color: #17B1A1;
}
.fsp_commentblock div img{
  position: absolute;
  right: -76px;
  bottom: 0;
  max-width: 234px;
}
.fsp_anattl{
  margin-bottom: 12px;
  text-align: right;
  font-size: 0.75rem;
}
.fsp_anacomment{
  line-height: 2;
  text-align: left;
  font-size: 1rem;
}

/*-- キャラクター --*/
.fsp_wpcha{
  background-image:url("../img/bg_chara.png");
  background-size:100%;
  text-align:left;
  padding:16px 42px 20px;
  max-width:1000px;
  width:100%;
  margin:0 auto 60px;
  border-radius:18px;
}

.fsp_wpcha h2{
  font-weight:bold;
  font-size:1.25em;
  color:#084F72;
  width: 574px;
  line-height:2;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.16);
  margin:-20px auto 16px auto;
  text-align:center;
}

.fsp_wpcha h2 span{
  margin-right:0.5em;
  display:inline-block;
}

.fsp_bxcha{
  display:flex;
  padding-top:24px;
  color:#084F72;
  font-weight:bold;
  font-size:0.75em;
  justify-content:space-around;
}

.fsp_bxcha p{
  line-height:2;
  width:33.33%;
}

.fsp_bxcha p:first-of-type,.fsp_bxcha p:last-of-type{
  width:266px;
}

.fsp_bxcha p span{
  display:block;
}

.fsp_bxcha img{
  max-width:300px;
  width:100%;
}


.fsp_linkbtn{
  display: flex;
  justify-content: space-around;
  margin-bottom: 100px;
}
.fsp_linkbtn li{width: 22%;}
.fsp_linkbtn li a{
  display: flex;
  justify-content: center;
  align-items: center;  
  width: 100%;
  height: 54px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
  background-image: url("../img/il_btnbg.svg");
  background-position: 8px -34px;
  background-repeat: no-repeat;
}
.fsp_linkbtn li:first-of-type a{background-color: #EF3F2A;}
.fsp_linkbtn li:nth-of-type(2) a{background-color: #269B48;}
.fsp_linkbtn li:nth-of-type(3) a{background-color: #017DBC; padding-top: 5px;}
.fsp_linkbtn li:last-of-type a{background-color: #EF941D;}

.fsp_morelinkbtn{
  display: inline-block;
  padding-bottom: 14px;
}
.fsp_morelinkbtn>a{
  display: block;
  background: #F5F5F5;
  padding: 3px 23px 5px 14px;
  font-size: 0.875rem;
  color: #00A6D9;
  text-decoration: none;
}
.fsp_morelinkbtn>a>span:first-of-type{
  vertical-align: super;
  padding-right: 8px;
}


.fsp_h2{
  margin-bottom: 60px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
  background: url("../img/il_ttlbg.svg") left center repeat-x;
}
.fsp_h2 span{
  display: inline-block;
  padding: 4px 12px;
  background-color: #FFFFFF;
}


.fsp_outside{
  max-width: 946px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 104px;
  padding: 0px 68px;
}
.fsp_outside li{
  width: 30%;
  min-width: 270px;
  margin-bottom: 24px;
  padding: 0 22px;
}
.fsp_outside img{
  border: 1px solid #707070;
  width:100%;
}


.fsp_goals{margin-bottom: 140px;}
.fsp_goals img{max-width: 100%;}


.fsp_border{
  height: 20px;
  background: url("../img/il_border.png") center top repeat-x;
}


.fsp_brn{margin-bottom: 4em;}

/*-- 1.5℃の約束 --*/

.fsp_promise{
  width:100%;
  max-width:800px;
  margin:auto;
  padding-bottom:64px;
}
.fsp_promiseimg{
  max-width: 586px;
  margin:42px auto 0;
}
.fsp_promise img{
  width:100%;
}

.fsp_promise p{
  font-size:1.125rem;
  line-height:2;
  margin-bottom:1em;
}

.fsp_promise > p{
  margin-bottom:1em;
}

.fsp_promise p span{
  display:block;
}

p.fsp_prmsbld{
  font-weight:bold;
  font-size:1.25rem;
}

.fsp_prmscap p span{
  display:inline;
}

/*下層*/
.fsp_lowerbody{
  text-align: center;
  background: url("../img/il_lowerbg.png") center top repeat-y;
}
.fsp_lowerbody .fsp_wrap{max-width: 1000px;}

.fsp_sitettl{margin-bottom: 24px;}
.fsp_sitettl img{max-width: 100%;}

.fsp_lowerbody h1{
  display: inline-block;
  width: 600px;
  height: 60px;
  padding-top: 19px;
  font-weight: bold;
  font-size: 1.25rem;
  color: #FFFFFF;
  background-image: url("../img/il_lowerh1bg.svg");
  background-position: center center;
}



/*宣言*/
.fsp_lowerbody h1.fsp_declaration{background-color: #EF3F2A;}
.fsp_catch{
  margin-bottom: 48px;
  line-height: 1.5;
  font-size: 1.875rem;
  font-weight: bold;
}
.fsp_goalsimg{
  margin-bottom: 36px;
  padding: 0 100px;
}
.fsp_goalsimg img{max-width: 100%;}

.fsp_sdgstxt{font-size: 6.25rem;}
.fsp_txt_s{color: #E4011E;}
.fsp_txt_d{color: #0599D9;}
.fsp_txt_g{color: #DC097B;}
.fsp_txt_ss{color: #28A838;}
.fsp_sdgsmeaning{
  margin-bottom: 56px;
  font-size: 1.25rem;
  font-weight: bold;
  color: #EC6A06;
}
.fsp_col{color: #970A31;}
.fsp_txt01{
  margin-bottom: 40px;
  font-size: 1.125rem;
  line-height: 2;
}
.fsp_wightbox{
  width: 600px;
  margin: 0 auto 104px;
  padding: 60px 55px;
  border-radius: 26px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.16);
}
.fsp_wightbox h3{
  margin-bottom: 30px;
  line-height: 2;
  font-size: 1.25rem;
  font-weight: bold;
}
.fsp_wightbox img{
  width: 144px;
  margin-bottom: 32px;
}
.fsp_wightbox p{line-height: 2;}



/*取り組み*/
.fsp_lowerbody h1.fsp_initiatives{background-color: #269B48;}
h2.fsp_gr{
  height: 70px;
  text-align: center;
  padding-top: 22px;
  font-size: 1.875rem;
  font-weight: bold;
  color: #269B48;
  background: url("../img/il_initi_h2ttlbg.svg") center center no-repeat;
}
h2.fsp_og{
  height: 70px;
  text-align: center;
  padding-top: 22px;
  font-size: 1.875rem;
  font-weight: bold;
  color: #D39206;
  background: url("../img/il_initi_h2ttlbg.svg") center center no-repeat;
}
.fsp_list{margin-bottom: 72px;}
.fsp_list figure{
  display: flex;
  justify-content: space-between;
  padding: 60px 0;
  background: url("../img/il_initi_boder.png") center bottom repeat-x;
  background-color:#FFF;
}
.fsp_list figure:last-of-type{background-image: none;}
.fsp_list figure>p{width: 450px;}
.fsp_list figure>p img{max-width: 100%;}
.fsp_list figure figcaption{
  width: 510px;
  text-align: left;
}
.fsp_list figure figcaption.fsp_boxwide{width:100%;}
.fsp_list figure:nth-of-type(even)>p{order: 1}
.fsp_list figure:nth-of-type(even) figcaption{order: 2;}
.fsp_list figure figcaption h3{
  margin-bottom: 20px;
  line-height: 1.5;
  font-size: 1.625rem;
  font-weight: bold;
}
.fsp_list figure figcaption h3 .fsp_fs{font-size: 1.25rem;}
.fsp_list figure:nth-of-type(4n+1) figcaption h3{color: #00A6D9;}
.fsp_list figure:nth-of-type(4n+2) figcaption h3{color: #EC6A06;}
.fsp_list figure:nth-of-type(4n+3) figcaption h3{color: #E4011E;}
.fsp_list figure:nth-of-type(4n) figcaption h3{color: #269B48;}
.fsp_list figure figcaption p{
  margin-bottom: 14px;
  line-height: 2;
  font-size: 1.125rem;
}
.fsp_list figure figcaption ul{
  display: flex;
  flex-wrap: wrap;
}
.fsp_list figure figcaption ul li{
  width: 64px;
  margin: 0 10px 20px 0;
}
.fsp_list figure figcaption ul li:nth-of-type(7n){margin-right: 0;}
.fsp_list figure figcaption ul li img{width: 100%;}
.fsp_hr{
  height: 16px;
  margin-bottom: 48px;
  background: url("../img/il_ttlbg.svg") center center repeat-x;
  background-repeat:space;
}

/*私の*/
.fsp_lowerbody h1.fsp_mysdgs{background-color: #EF941D;}
.fsp_my ul{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 70px;
}
.fsp_my ul img{width: 100%;}
.fsp_my ul li{
  width: 30%;
  margin-bottom: 60px;
}
.fsp_my ul li:not(:nth-of-type(3n)){margin-right: 5%;}

.fsp_my ul li dt{
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 14px;
  color: #333;
}
.fsp_my ul li dd{
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
}

.fsp_my ul li dt::before,
.fsp_my ul li dt::after{
  content: "●";
  padding: 0 1%;
}

.fsp_my ul li:first-of-type dt::before,
.fsp_my ul li:nth-of-type(3n+1) dt::before{color: #269B48;}
.fsp_my ul li:first-of-type dt::after,
.fsp_my ul li:nth-of-type(3n+1) dt::after{color: #EB6A06;}

.fsp_my ul li:nth-of-type(2) dt::before,
.fsp_my ul li:nth-of-type(3n+2) dt::before{color: #E03090;}
.fsp_my ul li:nth-of-type(2) dt::after,
.fsp_my ul li:nth-of-type(3n+2) dt::after{color: #17AEDC;}

.fsp_my ul li:nth-of-type(3n) dt::before{color: #E73418;}
.fsp_my ul li:nth-of-type(3n) dt::after{color: #8F1636;}


.tss_footer{background-color: #E4E4E4 !important;}
.tss_footer a{color: #000000 !important;}
#tss_gototop{right: calc(50% - 696px)}



/*-- 202209追加 --*/

div.fsp_actwzp{ margin: clamp(40px, 8vw, 120px) auto;}

div.fsp_actwzp h2.fsp_gr{
  width: fit-content;
  text-align: center;
  padding: 0.25em 7em 0;
  margin: 0 auto;
  font-size: calc(1.5rem + 0.5vw);
  font-weight: bold;
  color: #269B48;
  background-image: url("../img/il_h2_l.svg"),url("../img/il_h2_r.svg");
  background-repeat: no-repeat;
  background-position: center left, center right;
  background-size: auto 100%, auto 100%;
}

div.fsp_actwzp > img{
  display: block;
    width:60%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}


div.fsp_actwzp > p{
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.6;
}

div.fsp_actwzp > p span{
  display: inline-block;
  white-space: nowrap;
  font-size: 1.125em;
}

div.fsp_vdbox{
  background-image: url(../img/bg_chara.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
  width:60%;
  max-width: 640px;
  margin: 40px auto;
  padding: 40px;
  background-color: aquamarine;
  border-radius: 20px;
}

div.fsp_vdbox > div{
width:100%;
  position: relative;
  aspect-ratio:16 / 9;
}

div.fsp_vdbox > div iframe{
  width: 100%;
  height: 100%;
}

.fsp_bnapp{
  width:72%;
  margin:40px auto 0;
}

.fsp_bnapp img{
  width:100%;
}

.fsp_pglink{
  font-size: 1.175rem;
  font-weight: bold;
  margin-top:24px;
}

.fsp_pglink a{
  color:#026c99;
}

/*-- アマモ追加 --*/
.fsp_amamobanner{
  padding-bottom:80px;
}


@media screen and (min-width:769px){
  h1 img:last-of-type{display: none;}
  .fsp_sitettl a:hover{opacity: 0.7;}
  .fsp_br{display: block;}
  .fsp_linkbtn li a:hover{opacity: 0.7;}
  .fsp_morelinkbtn a:hover{opacity: 0.7; text-decoration: underline;}
  .fsp_outside li a:hover{opacity: 0.7;}
  .fsp_brn a:hover{opacity: 0.7;}
  
  .fsp_list figure figcaption h3 a:hover{text-decoration: none;}
  .fsp_promise a:hover{opacity: 0.7}
  .fsp_amamobanner img:hover{opacity: 0.7;}
}









@media screen and (max-width:768px){
  .fsp_amamobanner
  .fsp_spbr{display: block;}
  .fsp_body{
    background-image: url("../img/il_bg_sp202507.png");
    background-size:100% auto;
  }
  .fsp_amamobanner{
    width:88%;
    margin:auto;
    padding-bottom:60px;
  }
  .fsp_amamobanner img{
    width:100%;
  }
  
  h1{
    margin-bottom: 64px;
    padding: 35vw 18vw 4vw;
  }
  h1 img:first-of-type{display: none;}
  .fsp_message{
    padding: 0 16px;
    text-align: left;
    font-size: 1rem;
    margin-top:150px;
  }

  .fsp_commentblock{
    display: block;
    padding: 0;
    background: #F5F5F5;
    margin: 0 3% 60px;
  }
  .fsp_bartop,
  .fsp_barbottom{
    position: static;
    height: 4px;
  }
  .fsp_bartop img,
  .fsp_barbottom img{
    width: 100%;
    height: 4px;
    vertical-align: top;
  }
  .fsp_commentblock div{
    width: 100%;
    padding: 40px;
    background-image: url("../img/il_commentbg.svg") ;
    background-position: 21px -26px;
    background-repeat: no-repeat;
    background-size: auto auto;
  }
  .fsp_commentblock div h2{
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .fsp_anattl{
    margin-bottom: 20px;
    line-height: 2;
    font-size: 0.625rem;
  }
  .fsp_spblock{
    display: block;
    margin-bottom: 16px;
  }
  .fsp_spblock2{
    display: block;
    padding-right: 128px;
  }
  .fsp_commentblock div img{
    width: 164px;
    right: calc(50% - 48vw);
    top: auto;
    bottom: 0;
  }
  
  .fsp_wpcha{
    padding:16px;
    width:96%;
  }
  
  .fsp_wpcha h2{
    width:100%;
    font-size:1.25em;
    line-height:1.5;
    margin-top:-40px;
  }
  
  .fsp_wpcha h2 span{
    margin-right:0;
    display:block;
  }
  
  .fsp_bxcha{
    flex-wrap:wrap;
  }

  .fsp_bxcha p:nth-of-type(2){
    order:1;
    width:72%;
    margin:auto;
  }

  .fsp_bxcha p:first-of-type{
    order:2;
    width:100%;
    margin-bottom:2em;
  }
  
  .fsp_bxcha p:last-of-type{
    order:3;
    width:100%;
  }
  
  .fsp_brn img{
    display:block;
    width:100%;
    padding:10px;
  }



  .fsp_linkbtn{
    flex-wrap: wrap;
    padding: 0 5%;
  }
  .fsp_linkbtn li{width: 46%;}
  .fsp_linkbtn li a{height: 70px;}
  .fsp_linkbtn li:nth-last-of-type(n+2){margin-bottom: 22px;}

  .fsp_h2{
    margin-bottom: 32px;
    background: none;
  }
  .fsp_outside{
    flex-wrap: wrap;
    padding: 0 12px;
  }
  .fsp_outside li{
    min-width: auto;
    width: 50%;
    margin-bottom: 20px;
  }
  .fsp_outside li{padding: 0 8px;}
  .fsp_outside li img{width: 100%;}

  .fsp_goals{padding: 0 16px;}

  .fsp_lowerbody h1{width: 100%;}
  
  /*-- 1.5℃の約束 --*/
  .fsp_promise{
    width:96%;
  }
  .fsp_promise p{
    font-size:1rem;
    text-align:left;
  }
  
  .fsp_promise p span{
    display:inline;
  }
  .fsp_prmscap p span{
    display:block;
  }
  .fsp_prmscap p br{
    display:none;
  }
  .fsp_prmscap p{
    text-align:center;
    font-size:0.875em;
  }

  
  .fsp_bnapp{width:88%;}

/*宣言*/
  .fsp_catch{font-size: 1.125rem;}
  .fsp_goalsimg{padding: 0 16px;}
  .fsp_sdgstxt{font-size: 3.125rem;}
  .fsp_sdgsmeaning{font-size: 0.75rem;}
  .fsp_wightbox{
    width: 100%;
    padding: 24px 8px;
  }
  .fsp_wightbox h3{font-size: 1rem;}
  .fsp_wightbox p{font-size: 0.875rem;}

/*取り組み*/
  .fsp_list{padding: 0 16px;}
  .fsp_list figure{flex-wrap: wrap;padding:48px 0;}
  .fsp_list figure figcaption,
  .fsp_list figure>p{width: 100%;}
  .fsp_list figure:nth-of-type(even)>p{order: 2}
  .fsp_list figure:nth-of-type(even) figcaption{order: 1;}
  .fsp_list figure figcaption{margin-bottom: 12px;}
  .fsp_list figure figcaption h3{font-size: 1.25rem;}
  .fsp_list figure figcaption h3 .fsp_fs{font-size: 0.875rem;}
  .fsp_list figure figcaption p{font-size: 0.875rem;}
  .fsp_list figure figcaption ul li:nth-of-type(7n){margin-right: 10px;}
  .fsp_list figure figcaption ul li:nth-of-type(10n){margin-right: 0;}
  .fsp_iclist{margin:auto;}

/*私の*/
  .fsp_my ul {padding: 0 12px;}
  .fsp_my ul li{
    width: 50%;
    padding: 0 12px;
  } 
  .fsp_my ul li:not(:nth-of-type(3n)){margin-right: 0;}
  .fsp_my ul li dt{font-size: 1.125rem;}
  .fsp_my ul li dd{font-size: 0.875rem;}



  #tss_gototop{right: 8px;}
  
  
  div.fsp_actwzp{
    width: 100%;
    overflow: hidden;
  }
  div.fsp_actwzp h2.fsp_gr{
    width:100% !important;
    height: auto;
  padding: 0.5em 0 0.25em;
  margin: 0;
    font-size: calc(1rem + 0.35vw);
  font-weight: bold;
  color: #269B48;
}
  
  
div.fsp_actwzp > img{
  width:80%;
}

div.fsp_actwzp > p{
  width: 92%;
  font-size: 0.875em;
  text-align: left;
}

div.fsp_actwzp > p span{
  display: inline;
  white-space: normal;
}

div.fsp_vdbox{
  width:80%;
  margin: 24px auto;
  padding: 24px;
}

  
}


@media screen and (max-width:420px){
  .fsp_list figure figcaption ul{width: 288px;}
  .fsp_list figure figcaption ul li:nth-of-type(10n){margin-right: 10px;}
  .fsp_list figure figcaption ul li:nth-of-type(4n){margin-right: 0;}
  .fsp_wpcha h2{font-size:1em;}
  .fsp_anacomment{font-size: 0.75rem;}
  .fsp_commentblock div{padding: 30px 20px;}
  .fsp_commentblock div{background-position: 21px -26px, 34px 100px;}
  .fsp_commentblock div img {width: 134px;}
  .fsp_spblock2 {padding-right: 113px;}
  
    

}