@charset "UTF-8";

/*****************************
  cmn
*****************************/
.pagesec{
  padding: 10rem 0;
}
@media only screen and (max-width: 1180px) {
  .pagesec{
    padding: 6rem 0 ;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
}

/*****************************
  pagesec-about
*****************************/
.pagesec-about .content{
  background: #F8F0E8;
  border: 2px solid #DCBA92;
  border-radius: 40px;
  padding: 3rem;
}
.about {
  gap: 2rem;
  margin: 0 auto;
  max-width: 1000px;
}
.about .iconbox{
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 2rem;
  text-align: center;
  width: 180px;
}
.about .arrows{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 2rem;
  width: 170px;
}
.about .committees{
  background: #fff;
  border-radius: 20px;
  padding: 3rem;
  width: 380px;
}

.about .iconbox div{
  aspect-ratio: 1/1;
  background: #062456;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.about .iconbox div:last-of-type{
  background: #2A5350;
}
.about .iconbox div img{
  display: block;
  margin: 0 auto;
  width: 40%;
}

.about .arrows ul{
  gap: 2rem;
}
.about .arrows ul li{
  aspect-ratio: 3 / 2;
  background: #6c7fa0;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%, 15% 50%);
  color: #fff;
  position: relative;
  text-align: center;
  width: calc(50% - 2rem);
}
.about .arrows ul li span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}
.about .arrows ul li:last-of-type{
  background: #44587b;
}
.about .arrows ul:last-of-type li{
  background: #8aa19f;
}
.about .arrows ul:last-of-type li:last-of-type{
  background: #5a7a77;
}

.about .committees dl {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.about .committees dl > div{
  border: 1px solid #7384A0;
  border-top: none;
  text-align: center;
}
.about .committees dl > div:nth-of-type(2){
  border-color: #495F83;
}
.about .committees dl > div:nth-of-type(3){
  border-color: #9AAEAC;
}
.about .committees dl > div:nth-of-type(4){
  border-color: #63817F;
}

.about .committees dl > div dt,
.about .committees dl > div dd{
  padding: .5rem 1rem;
  text-align: center;
}
.about .committees dl > div dt{
  background: #7384A0;
  color: #fff;
  overflow: hidden;
}
.about .committees dl > div:nth-of-type(2) dt{
  background: #495F83;
}
.about .committees dl > div:nth-of-type(3) dt{
  background: #9AAEAC;
}
.about .committees dl > div:nth-of-type(4) dt{
  background: #63817F;
}
.about .committees dl > div dt::before{
  content: "";
  aspect-ratio: 4 / 3;
  background: #fff;
  clip-path: polygon(65% 0, 75% 0%, 100% 50%, 75% 100%, 65% 100%, 90% 50%);
  position: absolute;
  top: 50%;
  right: 5%;
  height: 130%;
  transform: translateY(-50%);
}

.aboutsp{
  display: none;
}

@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 875px) {
  .about{
    display: none;
  }
  .aboutsp{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
  }
  .aboutsp > div{
    width: calc(50% - 2rem);
  }
  .aboutsp > div > dt {
    background: #062456;
    border-radius: 10px;
    color: #fff;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
  }
  .aboutsp > div:last-of-type > dt {
    background: #2A5350;
  }
  .aboutsp > div > dt img{
    width: 60px;
  }
  .aboutsp > div > dt p{
    width: calc(100% - 80px);
  }
  .aboutsp > div > dd{
    background: #fff;
    border-radius: 10px;
    padding: 2rem;
  }
  .aboutsp > div > dd > dl{
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .aboutsp > div > dd > dl > div{
    border: 1px solid #7384A0;
    border-top: none;
    text-align: center;
  }
  .aboutsp > div > dd > dl > div:last-of-type{
    border-color: #495F83;
  }
  .aboutsp > div:last-of-type > dd > dl > div{
    border-color: #9AAEAC;
  }
  .aboutsp > div:last-of-type > dd > dl > div:last-of-type{
    border-color: #63817F;
  }
  .aboutsp > div > dd > dl > div dt,
  .aboutsp > div > dd > dl > div dd{
    padding: .5rem 1rem;
    text-align: center;
  }
  .aboutsp > div > dd > dl > div dt{
    background: #7384A0;
    color: #fff;
    overflow: hidden;
  }
  .aboutsp > div > dd > dl > div:last-of-type dt{
    background: #495F83;
  }
  .aboutsp > div:last-of-type > dd > dl > div dt{
    background: #9AAEAC;
  }
  .aboutsp > div:last-of-type > dd > dl > div:last-of-type dt{
    background: #63817F;
  }
  .aboutsp > div > dd > dl > div dt::before{
    content: "";
    aspect-ratio: 4 / 3;
    background: #fff;
    clip-path: polygon(65% 0, 75% 0%, 100% 50%, 75% 100%, 65% 100%, 90% 50%);
    position: absolute;
    top: 50%;
    right: 5%;
    height: 130%;
    transform: translateY(-50%);
  }
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .pagesec-about .content {
    border-radius: 10px;
    padding: 2rem 1.5rem;
  }
  .aboutsp > div{
    width: 100%;
  }
  .aboutsp > div > dt {
    margin-bottom: 1rem;
    padding: 1rem;
  }
  .aboutsp > div > dt img {
    width: 40px;
  }
  .aboutsp > div > dt p {
    width: calc(100% - 60px);
  }
  .aboutsp > div > dd > dl > div dt::before{
    right: .5rem;
  }
}


/*****************************
  pagesec-committee
*****************************/
.committee .fimgbox img{
  box-shadow: 20px 20px 20px rgba(0,0,0,.16);
}
.committee .ftxtbox div:not(:last-of-type){
  margin-bottom: 1rem;
}
.committee dt{
  font-weight: 500;
  padding-left: 2rem;
  position: relative;
}
.committee dt::before{
  content: "";
  aspect-ratio: 1/1;
  background: #062456;
  border-radius: 3px;
  position: absolute;
  top: 7px;
  left: 0;
  width: 14px;
}
.committee dd ol li{
  padding-left: 3rem;
  position: relative;
}
.committee dd ol li span{
  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) {
  .committee {
    align-items: flex-end;
  }
  .committee .ftxtbox {
    width: 58%;
  }
  .committee .fimgbox {
    width: 40%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .committee .ftxtbox ,
  .committee .fimgbox {
    width: 100%;
  }
  .committee .fimgbox {
    margin-top: 2rem;
  }
}

/*****************************
  pagesec-nintei
*****************************/
.pagesec-nintei .catch{
  font-size: 1.8rem;
  text-align: center;
}
.pagesec-nintei .badge{
  gap: 2rem;
  margin: 4rem auto;
  max-width: 600px;
}
.pagesec-nintei .badge li{
  width: calc(100% / 3 - 2rem);
}

.pagesec-nintei .certification > div{
  margin-top: 8rem;
}

.pagesec-nintei .morebtn2{
  margin-top: 1rem;
  text-align: left;
}
.pagesec-nintei .morebtn2 a{
  text-align: center;
}
.pagesec-nintei .column{
  margin-top: 2rem;
}
.pagesec-nintei .column .morebtn2 a{
  background: #DCBA92;
  border: 1px solid #DCBA92;
}
.pagesec-nintei .column .morebtn2 a:hover{
  background: #fff;
  color: #DCBA92;
}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-nintei .catch{
    text-align: left;
  }
  .pagesec-nintei .badge{
    gap: 1rem;
  }
  .pagesec-nintei .badge li{
    width: calc(100% / 3 - 1rem);
  }
  .pagesec-nintei .certification > div{
    margin-top: 5rem;
  }
}