#sec_pagettl,
#sec_pagettl h1>.inner{
 background: #18B2AE;
}

#sec_about{
 background: url(../img/howto/bgimg1.png) no-repeat top 100px left calc( 50% - 500px ) ,
  url(../img/howto/bgimg2.png) no-repeat  top 100px left calc( 50% + 600px ) ;
}
#sec_about .msg>span{
 background: linear-gradient(0deg,transparent 2px , var(--green) 2px, var(--green) 4px, transparent 4px );
}

#sec_qa .list{
 display: flex;
 flex-wrap:wrap;
 justify-content: center;
}
#sec_qa .list li{
 padding: 0px 25px 50px;
}

#sec_merit .q1{
 display: flex;
}
#sec_merit .q1 .img{
 width: 120px;
 text-align: center;
}
#sec_merit .q1 .text{
 width: calc( 100% - 240px );
 background: var(--green3);
 color: white;
 border-radius: 15px;
 padding: 30px;
 position: relative;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}
#sec_merit .q1 .text:before{
 display: block;
 content: "";
 position: absolute;
 left: -15px;
 top:40px;
 border-right: solid 15px var(--green3);
 border-top: solid 5px transparent;
 border-bottom: solid 5px transparent;
}

#sec_merit .a1{
 display: flex;
 flex-direction: row-reverse;
}
#sec_merit .a1 .img{
 width: 120px;
 text-align: center;
}
#sec_merit .a1 .text{
 width: calc( 100% - 240px );
 background: var(--orange);
 color: white;
 border-radius: 15px;
 padding: 30px;
 position: relative;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}
#sec_merit .a1 .text:before{
 display: block;
 content: "";
 position: absolute;
 right: -15px;
 top:40px;
 border-left: solid 15px var(--orange);
 border-top: solid 5px transparent;
 border-bottom: solid 5px transparent;
}

#sec_merit .work .ttl{
 border-top: solid 1px #000;
 border-bottom: solid 1px #000;
 padding: 5px;
 box-sizing: border-box;
}

#sec_merit .list{
 display: grid;
 grid-template-columns: repeat(4,1fr);
 gap: 20px;
}
#sec_merit .list li{
 background: var(--green3);
 color: #fff;
 text-align: center;
 padding: 22px 15px;
 border-radius: 15px;
 position: relative;
 display: grid;
}
#sec_merit .list li .text{
 display: grid;
 align-items: center;
 min-height: 5em;
}

#sec_merit .ceomsg{
 background: var(--orange);
 color: #fff;
 border-radius: 50%;
 width: 700px;
 height: 550px;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}
#sec_merit .ceomsg:after{
 display: block;
 content: "";
 width: 400px;
 height: 400px;
 border-radius: 50%;
 position: absolute;
 right: -350px;
 top: 70px;
 background: url(../img/howto/photo_staff.png) no-repeat center center;
}
#sec_merit .ceomsg .inner{
 max-width: 480px;
}
#sec_merit .ceomsg .ttl{
 text-align: center;
}
#sec_merit .ceomsg .ttlInner{
 display: inline-block;
 border-top: solid 1px #fff;
 border-bottom: solid 1px #fff;
 padding: 20px 5px;
 position: relative;
}
#sec_merit .ceomsg .icon{
 position: absolute;
 left: -10px;
 top: -40px;
 background: #fff;
 color: var(--orange);
 width: 70px;
 height: 70px;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 50%;
}

#sec_point .list{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
#sec_point .list li{
 margin: 20px;
 border-radius: 50%;
 width: 320px;
 height: 320px;
 border: solid 2px var(--green3);
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 position: relative;
 padding: 5px;
}
#sec_point .list li:before{
 display: block;
 content: "";
 border: solid 2px var(--green3);
 width: calc( 100% + 10px );
 height: calc( 100% + 10px );
 border-radius: 50%;
 position: absolute;
}
#sec_point .pointLast{
 text-align: center;
 border-top: solid 2px var(--green3);
 border-bottom: solid 2px var(--green3);
 padding: 20px 0px;
 position: relative;
}
#sec_point .pointLast:before{
 display: block;
 content:"";
 position: absolute;
 height: calc(100% + 3px);
 width: 100%;
 padding: 0px 5px;
 border-top: solid 2px var(--green3);
 border-bottom: solid 2px var(--green3);
 top: 6px;
 box-sizing: border-box;
}
#sec_point .pointLast .inner h3,
#sec_point .pointLast .inner p{
 position: relative;
}
#sec_point .pointLast .inner:before{
 display: block;
 content: "";
 width: 483px;
 height: 276px;
 background: url(../img/howto/sttlimgL.png) no-repeat center center;
 position: absolute;
 top: -55px;
 left: -200px;
}
#sec_point .pointLast .inner:after{
 display: block;
 content: "";
 width: 483px;
 height: 276px;
 background: url(../img/howto/sttlimgR.png) no-repeat center center;
 position: absolute;
 bottom: -40px;
 right: -150px;
}

#sec_thoughts .secTtl,
#sec_thoughts .secTtl2{
 background: url(../img/howto/company1.jpg) no-repeat center center;
 background-size: 100% auto;
 text-align: center;
 border-radius: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 padding: 100px 15px;
}
#sec_thoughts .secTtl2{
 background: url(../img/howto/company2.jpg) no-repeat center center;
 background-size: 100% auto;
}
#sec_thoughts .secTtl .inner,
#sec_thoughts .secTtl2 .inner{
 display: inline-block;
 border-top: solid 1px #fff;
 border-bottom: solid 1px #fff;
 padding: 50px;
 min-width: 300px;
 text-align: center;
}
#sec_thoughts .list{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap:50px;
}
#sec_thoughts .list li{
 border-radius: 5px;
 background: #fff;
 box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
 padding: 50px 50px;
 position: relative;
}
#sec_thoughts .list li .cat,
#sec_thoughts .list li .cat2{
 position: absolute;
 left: 15px;
 top: 10px;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 line-height: 1.2em;
 box-sizing: border-box;
 padding-top: 5px;
 font-size: 90%;
}
#sec_thoughts .list li h3{
 padding-left: 50px;
 font-size: 100%;
}

#sec_flow .list li{
 display: flex;
 border-radius: 10px;
 overflow: hidden;
 margin-bottom: 20px;
 background: #F2F2F2;
}
#sec_flow .list li.bg{
 background: #FFE5B8;
}
#sec_flow .list li h3{
 background: var(--green3);
 color: #fff;
 text-align: center;
 padding: 15px;
 display: flex;
 box-sizing: border-box;
 align-items: center;
}
#sec_flow .list li h4{
 font-size: 150%;
 color: var(--green3);
}
#sec_flow .list li .text{
 padding: 20px 15px 20px 30px;
 display: flex;
 align-items: center;
}


#sec_sdgs{
 background: url(../img/howto/bg_photo.jpg) no-repeat top center;
 /*background-size: auto 100%;*/
 background-size: cover;
}
#sec_sdgs .list{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap:50px;
}
#sec_sdgs .list li{
 background: #fff;
 border-radius: 10px;
 padding: 40px;
 display: flex;
}
#sec_sdgs .list li .img{
 width: 100px;
 margin-right: 30px;
}
#sec_sdgs .list li .text{
 width: calc( 100% - 100px );
}

#sec_system .list{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px 40px;
}
#sec_system .list li a{
 display: block;
 color: #000;
 padding: 15px;
 border: solid 1px #000;
 text-align: center;
}

.pageMaxWidth{
 max-width: 1050px;
 margin-left: auto;
 margin-right: auto;
}

/*
===================================================
	pc small
===================================================
*/
@media screen and (max-width: 1100px) {
 #sec_merit{
  overflow-x: hidden;
 }
 #sec_merit .ceomsg{
  background: none;
  width: 100%;
  height: auto;
  display: block;
  padding-top: 80px;
  position: relative;
 }
 #sec_merit .ceomsg:before{
  display: block;
  content: "";
  position: absolute;
  background: var(--orange);
  width: 800px;
  height: 70%;
  border-radius: 50%;
  left: 50%;
  top: 0px;
  transform: translate( -50% , 0 );
 }
 #sec_merit .ceomsg:after{
  display: block;
  content: "";
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  right: auto;
  top: auto;
 }
 #sec_merit .ceomsg .inner{
  max-width: none;
  position: relative;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
 }
}

/*
===================================================
	sp
===================================================
*/
@media screen and (max-width: 960px) {

 #sec_qa .list{
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  grid-template-columns: repeat(2,1fr);
 }
 #sec_qa .list li{
  width: 40%;
  padding: 0px 15px 10px;
  text-align: center;
 }

 #sec_merit .list{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
 }
 #sec_merit .list li{
  background: var(--green3);
  color: #fff;
  text-align: center;
  width: calc( 50% - 5px );
  /*padding: 25px 10px 20px;*/
  border-radius: 15px;
  position: relative;
  box-sizing: border-box;
 }
 #sec_merit .list li .text{
  min-height: 5em;
 }

 #sec_merit .q1 .img ,
 #sec_merit .a1 .img {
  width: 100px;
  text-align: center;
 }
 #sec_merit .q1 .text,
 #sec_merit .a1 .text{
  width: calc( 100% - 100px );
  color: white;
  border-radius: 15px;
  padding: 10px 15px;
  text-align: left;
 }
 #sec_merit .q1 .text:before{
  display: block;
  content: "";
  position: absolute;
  left: -9px;
  top:40px;
  border-right: solid 10px var(--green3);
  border-top: solid 5px transparent;
  border-bottom: solid 5px transparent;
 }
 #sec_merit .a1 .text:before{
  display: block;
  content: "";
  position: absolute;
  right: -9px;
  top:40px;
  border-left: solid 10px var(--orange);
  border-top: solid 5px transparent;
  border-bottom: solid 5px transparent;
 }
 #sec_merit .ceomsg:after{
  width: 300px;
  height: 300px;
  background-size: 100% auto;
 }

 #sec_point .list{
  display: block;
 }
 #sec_point .list li{
  border-radius: 5px;
  width: auto;
  height: auto;
  border: solid 1px var(--green3);
  display: block;
  padding: 20px 10px;
  margin: 10px;
 }
 #sec_point .list li:before {
  display: block;
  content: "";
  border: solid 1px var(--green3);
  width: calc( 100% - 10px);
  height: calc( 100% - 10px);
  border-radius: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
 }
 #sec_point .pointLast .inner:before{
  display: none;
 }
 #sec_point .pointLast .inner:after{
  display: none;
 }

 #sec_thoughts .secTtl,
 #sec_thoughts .secTtl2{
  padding:  15px;
  border-radius: 10px;
 }
 #sec_thoughts .secTtl .inner,
 #sec_thoughts .secTtl2 .inner{
  padding: 20px;
  min-width: 250px;
  box-sizing: border-box;
 }
 #sec_thoughts .list{
  display: grid;
  grid-template-columns: 1fr;
  gap:25px;
 }
 #sec_thoughts .list li .cat, #sec_thoughts .list li .cat2 {
  width: 70px;
  height: 70px;
  font-size: 12px;
 }
 #sec_thoughts .list li{
  padding: 20px;
 }
 #sec_thoughts .list li h3{
  padding-left: 75px;
  min-height: 3.5em;
  display: flex;
  align-items: center;
 }

 #sec_flow .list li h3{
  padding: 10px;
  font-size: 90%;
 }
 #sec_flow .list li h4{
  font-size: 110%;
 }
 #sec_flow .list li .text{
  padding: 15px;
 }


 #sec_sdgs .list{
  display: grid;
  grid-template-columns: 1fr;
  gap:20px;
 }
 #sec_sdgs .list li{
  background: #fff;
  border-radius: 10px;
  padding: 25px;
  display: flex;
 }
 #sec_sdgs .list li .img{
  width: 70px;
  margin-right: 15px;
 }
 #sec_sdgs .list li .text{
  width: calc( 100% - 70px );
 }

 #sec_system .list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
 }
 #sec_system .list li a{
  display: block;
  color: #000;
  padding: 15px;
  border: solid 1px #000;
  text-align: center;
 }

}
@media screen and (max-width: 664px) {
 #sec_merit .list{
  width: auto;
 }
 #sec_merit .list li{
  display: grid;
  aspect-ratio: 1 / 1;
  padding: 0.6em 0.4rem 0.5em;
  align-content: space-evenly;
 }
 #sec_merit .list li .text{
  display: grid;
  min-height: 3em;
  line-height: 1.2em;
  /*align-self: end;*/
  align-items: center;

 }
 #sec_merit .list li .img{
  width: 68%;
  margin: 0 auto;
 }
}