@charset "UTF-8";
/*****************************
  pagesec-whats
*****************************/
.pagesec-whats .fimgbox{
  width: 300px;
  width: 33%;
}
.pagesec-whats .ftxtbox{
  width: calc(100% - 340px);
  width: 65%;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-whats .fimgbox{
    margin: 0 auto 2rem;
    width: 60%;
  }
  .pagesec-whats .ftxtbox{
    margin: 0 auto;
    width: 90%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-whats .fimgbox{
    width: 90%;
  }
  .pagesec-whats .ftxtbox{
    width: 100%;
  }
}

/*****************************
  pagesec-background
*****************************/

/*****************************
  pagesec-target
*****************************/
.pagesec-target .targetbox{
  position: relative;
}
.pagesec-target .targetbox::after{
  content: "";
  clear: both;
}
.pagesec-target .areabox{
  float: right;
  margin-left: 2rem ;
  margin-bottom: 2rem;
  max-width: 300px;
  width: 100%;
}
.pagesec-target .areatbl .at1,
.pagesec-target .areatbl .at2,
.pagesec-target .areatbl .at3{
  border: 1px solid #56bae5;
}
.pagesec-target .areatbl .at2{
  margin: .5rem 0;
}
.pagesec-target .areatbl .at1 > dt,
.pagesec-target .areatbl .at2 dt,
.pagesec-target .areatbl .at3 dt{
  background: #56bae5;
  color: #fff;
  padding: .5rem 1rem;
}
.pagesec-target .areatbl .at1 dl dt,
.pagesec-target .areatbl .at2 dt,
.pagesec-target .areatbl .at3 dt{
  padding: .5rem 1rem;
  width: 180px;
}
.pagesec-target .areatbl .at1 dl dt{
  background: #edf8fd;
}
.pagesec-target .areatbl .at1 dl dd,
.pagesec-target .areatbl .at2 dd,
.pagesec-target .areatbl .at3 dd{
  padding: .5rem 1rem;
  text-align: center;
  width: calc(100% - 180px);
}
.pagesec-target .staff{
  border: 1px solid #0ae;
  margin-top: 1rem;
  padding: 1rem;
}
.pagesec-target .staff dt{
  margin-right: 1rem;
}

.pagesec-target .targetlist {
  gap: 2rem;
  margin-top: 4rem;
}
.pagesec-target .targetlist li{
  width: calc(100% / 2 - 1.5rem);
}
.pagesec-target .targetlist li a {
  border-radius: 6px 6px 0 0 ;
  display: block;
  opacity: 1;
  overflow: hidden;
  position: relative;
}
.pagesec-target .targetlist li a p{
  background: #fff;
  display: block;
  border-bottom: 1px solid #707070;
  opacity: 1 !important;
  padding: 1rem 3rem 1rem 1rem;
  position: relative;
  text-decoration: none;
  transition: .5s;

  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.pagesec-target .targetlist li a span{
  background: #fff;
  border: 1px solid #0B97D2;
  border-radius: 50%;
  padding: .7rem;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  transition: .5s;
}
.pagesec-target .targetlist li a span::before{
  content: "";
  background: #0B97D2;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 4px;
  width: 4px;
}
.pagesec-target .targetlist li a:hover p{
  background: #0B97D2;
  border-color: #fff;
  color: #fff;
}
.pagesec-target .targetlist li a:hover span{
  background: #fff;
  padding: 1rem;
  right: 7px;
}
.pagesec-target .targetlist li a:hover span::before{
  background: transparent;
  border-radius: 0;
  border-style: solid;
  border-color: transparent transparent transparent #0B97D2;
  border-width: 5px 0px 5px 8.66px;
  height: 0;
  width: 0;
}
.pagesec-target .popbox .fimgbox{
  width: 300px;
}
.pagesec-target .popbox .ftxtbox{
  width: calc(100% - 340px);
}
.pagesec-target .popbox .ftxtbox dt{
  border-bottom: 2px solid #ccc;
  font-size: 2.4rem;
  margin-bottom: 1rem;
  position: relative;
}
.pagesec-target .popbox .ftxtbox dt::before{
  content: "";
  background: #0B97D2;
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px ;
  width: 100px;
}

/* .pagesec-target .targetlist{
  margin-top: 3rem;
}
.pagesec-target .targetlist > div{
  margin-bottom: 2rem;
}
.pagesec-target .targetlist dt{
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
  padding-left: 2rem;
  position: relative;
}
.pagesec-target .targetlist dt::before {
  content: "●";
  color: #0B97D2;
  position: absolute;
  top: 0;
  left: 0;
} */


@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-target .popbox .fimgbox{
    margin: 0 auto 2rem;
    width: 250px;
  }
  .pagesec-target .popbox .ftxtbox{
    width: 100%;
  }

  .pagesec-target .targetlist li{
    width: 100%;
  }
  .pagesec-target .targetlist li a{
    border-radius: 6px 0 0 6px;
    display: flex;
    height: 100%;
  }
  .pagesec-target .targetlist li a .imgbox{
    width: 160px;
  }
  .pagesec-target .targetlist li a .imgbox img{
    object-fit: cover;
    height: auto;
    width: 100%;
  }
  .pagesec-target .targetlist li a p{
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    padding: 0 3rem 0 1.5rem;
    width: calc(100% - 80px);
    position: static;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-target .areabox{
    float: none;
    margin: 2rem 0;
    max-width: 100%;
  }

  .pagesec-target .targetlist {
    margin: 4rem auto 0;
  }
  .pagesec-target .targetlist li a .imgbox{
    width: 80px;
  }
  .pagesec-target .targetlist li a .imgbox img{
    aspect-ratio: 1/1;
  }
  .pagesec-target .targetlist li a p{
    font-size: 4.5vw;
  }
  .pagesec-target .popbox .ftxtbox dt{
    font-size: 2rem;
  }
}

/*****************************
  pagesec-theme
*****************************/
.pagesec-theme .themelist {
  gap: 2rem;
  margin-top: 4rem;
}
.pagesec-theme .themelist li{
  width: calc(100% / 3 - 1.5rem);
}
.pagesec-theme .themelist li a {
  border-radius: 6px 6px 0 0 ;
  display: block;
  opacity: 1;
  overflow: hidden;
  position: relative;
}
.pagesec-theme .themelist li a p{
  background: #fff;
  display: block;
  border-bottom: 1px solid #707070;
  max-width: 350px;
  opacity: 1 !important;
  padding: 1rem 3rem 1rem 1rem;
  position: relative;
  text-decoration: none;
  transition: .5s;

  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.pagesec-theme .themelist li a span{
  background: #fff;
  border: 1px solid #0B97D2;
  border-radius: 50%;
  padding: .7rem;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  transition: .5s;
}
.pagesec-theme .themelist li a span::before{
  content: "";
  background: #0B97D2;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 4px;
  width: 4px;
}
.pagesec-theme .themelist li a:hover p{
  background: #0B97D2;
  border-color: #fff;
  color: #fff;
}
.pagesec-theme .themelist li a:hover span{
  background: #fff;
  padding: 1rem;
  right: 7px;
}
.pagesec-theme .themelist li a:hover span::before{
  background: transparent;
  border-radius: 0;
  border-style: solid;
  border-color: transparent transparent transparent #0B97D2;
  border-width: 5px 0px 5px 8.66px;
  height: 0;
  width: 0;
}
.pagesec-theme .popbox .fimgbox{
  width: 300px;
}
.pagesec-theme .popbox .ftxtbox{
  width: calc(100% - 340px);
}
.pagesec-theme .popbox .ftxtbox dt{
  border-bottom: 2px solid #ccc;
  font-size: 2.4rem;
  margin-bottom: 1rem;
  position: relative;
}
.pagesec-theme .popbox .ftxtbox dt::before{
  content: "";
  background: #0B97D2;
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px ;
  width: 100px;
}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-theme .popbox .fimgbox{
    margin: 0 auto 2rem;
    width: 250px;
  }
  .pagesec-theme .popbox .ftxtbox{
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-theme .themelist {
    margin: 4rem auto 0;
  }
  .pagesec-theme .themelist li{
    width: 100%;
  }
  .pagesec-theme .themelist li a{
    border-radius: 6px 0 0 6px;
    display: flex;
    height: 100%;
  }
  .pagesec-theme .themelist li a .imgbox{
    width: 80px;
  }
  .pagesec-theme .themelist li a .imgbox img{
    aspect-ratio: 1/1;
    object-fit: cover;
    height: auto;
    width: 100%;
  }
  .pagesec-theme .themelist li a p{
    display: flex;
    align-items: center;
    font-size: 4.7vw;
    padding: 0 3rem 0 1.5rem;
    width: calc(100% - 80px);
    position: static;
  }
  .pagesec-theme .popbox .ftxtbox dt{
    font-size: 2rem;
  }
}

/* .pagesec-theme .themeslider li{
  max-width: 400px;
  padding: 1rem;
}
.pagesec-theme .themeslider li a{
  color: #0B97D2;
  text-decoration: underline;
}
.pagesec-theme .themeslider li a:hover{
  text-decoration: none;
}
.pagesec-theme .popbox .fimgbox{
  width: 300px;
}
.pagesec-theme .popbox .ftxtbox{
  width: calc(100% - 340px);
}
.pagesec-theme .popbox .ftxtbox dt{
  border-bottom: 2px solid #ccc;
  font-size: 2.4rem;
  margin-bottom: 1rem;
  position: relative;
}
.pagesec-theme .popbox .ftxtbox dt::before{
  content: "";
  background: #0B97D2;
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px ;
  width: 100px;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-theme .popbox .fimgbox{
    margin: 0 auto 2rem;
    width: 250px;
  }
  .pagesec-theme .popbox .ftxtbox{
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-theme .popbox .ftxtbox dt{
    font-size: 2rem;
  }
} */

/*****************************
  pagesec-program
*****************************/
.pagesec-program .program{
  margin-top: 3rem;
  padding-top: 3rem;
}
.pagesec-program .ftxtbox{
  width: 50%;
}
.pagesec-program .fimgbox{
  width: 45%;
}
.pagesec-program .fimgbox p{
  text-align: right;
}

.pagesec-program .ftxtbox .ttlbox{
  border-bottom: 2px solid #707070;
  margin-bottom: 2rem;
}
.pagesec-program .ftxtbox .ttlbox .ttl{
  font-size: 2.4rem;
  font-weight: bold;
}
.pagesec-program .ftxtbox .ttlbox .subttl{
  color: #002899;
  margin-bottom: 1rem;
  padding-left: 2rem;
}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-program .ftxtbox{
    margin: 0 auto;
    width: 90%;
  }
  .pagesec-program .fimgbox{
    margin: 2rem auto 0;
    width: 60%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-program .ftxtbox{
    width: 100%;
  }
  .pagesec-program .fimgbox{
    width: 90%;
  }
  .pagesec-program .ftxtbox .ttlbox .ttl{
    font-size: 2rem;
  }
  .pagesec-program .ftxtbox .ttlbox .subttl{
    padding-left: 0;
  }
}

/*****************************
  pagesec-message
*****************************/
.pagesec-message .message li{
  aspect-ratio: 2/3;
  width: calc(100% / 6);
}
.pagesec-message .message li a{
  display: block;
  opacity: 1;
  position: relative;
  height: 100%;
  width: 100%;
}
.pagesec-message .message li:nth-of-type(1) a{
  background: url(../../images/page/initiative/message1.webp) no-repeat center / cover;
}
.pagesec-message .message li:nth-of-type(2) a{
  background: url(../../images/page/initiative/message2.webp) no-repeat center / cover;
}
.pagesec-message .message li:nth-of-type(3) a{
  background: url(../../images/page/initiative/message3.webp) no-repeat center / cover;
}
.pagesec-message .message li:nth-of-type(4) a{
  background: url(../../images/page/initiative/message4.webp) no-repeat center / cover;
}
.pagesec-message .message li:nth-of-type(5) a{
  background: url(../../images/page/initiative/message5.webp) no-repeat center / cover;
}
.pagesec-message .message li:nth-of-type(6) a{
  background: url(../../images/page/initiative/message6.webp) no-repeat center / cover;
}
.pagesec-message .message li a::before,
.pagesec-message .message li a::after{
  content: "";
  position: absolute;
}
.pagesec-message .message li a::before{
  background: #000;
  opacity: .5;
  top: 0;
  left: 0;
  transition: .5s;
  height: 100%;
  width: 100%;
}
.pagesec-message .message li a::after{
  border: 2px solid #fff;
  top: 1rem;
  left: 1rem;
  height: calc(100% - 2rem);
  width: calc(100% - 2rem);
}
.pagesec-message .message li a span{
  color: #fff;
  font-weight: bold;
  position: absolute;
  bottom: 3rem;
  left: 0;
  text-align: center;
  width: 100%;
}
.pagesec-message .message li a:hover::before{
  opacity: 0;
}

.pagesec-message .popbox .fimgbox{
  width: 340px;
}
.pagesec-message .popbox .ftxtbox{
  width: calc(100% - 380px);
}
.pagesec-message .popbox .ftxtbox dt{
  font-size: 2.4rem;
  font-weight: bold;
}
.pagesec-message .popbox .ftxtbox dd .links li{
  margin-top: 1rem;
}
.pagesec-message .popbox .ftxtbox dd .links li a{
  display: block;
  padding-left: 2.5rem;
  position: relative;
}
.pagesec-message .popbox .ftxtbox dd .links li a i{
  position: absolute;
  top: 8px;
  left: 0;
}


.pagesec-message .bgmorebtn{
  margin-top: 5rem;
}
.pagesec-message .bgmorebtn a{
  background: url(../../images/page/initiative/bgmorebtn.webp) no-repeat center / cover;
}

@media only screen and (max-width: 1380px) {
  .pagesec-message .message li{
    aspect-ratio: 3 / 2;
    width: calc(100% / 3);
  }
  .pagesec-message .message li:nth-of-type(5) a{
    background-position: top;
  }
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-message .popbox .fimgbox {
    margin: 0 auto;
  }
  .pagesec-message .popbox .ftxtbox {
    margin: 2rem auto 0;
    width: 90%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-message .message li{
    aspect-ratio: 2 / 1;
    width: 100%;
  }
  .pagesec-message .message li:nth-of-type(5) a {
    background-position-y: 20%;
  }

  .pagesec-message .popbox .fimgbox {
    width: 250px;
  }
  .pagesec-message .popbox .ftxtbox {
    margin: 2rem auto 0;
    width: 100%;
  }
  .pagesec-message .popbox .ftxtbox dt{
    font-size: 2rem;
  }
}