@charset "UTF-8";
/*****************************
cmn
*****************************/
.pagesecflow{
  padding: 10rem 0;
}
.ttlbox2{
  margin-bottom: 2rem;
}
.flow{
  gap: 2rem;
}
.flow > div{
  background: #fff;
  border: 1px solid #7EB0E3;
  border-radius: 6px;
  padding: 1rem 1.5rem 2rem;
  width: calc(100% / 4 - 1.5rem);
}
.flow dt{
  color: #7EB0E3;
  font-size: 2rem;
  font-weight: bold;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
}
.flow dt::before{
  content: "";
  aspect-ratio: 1/1;
  background: #7EB0E3;
  border-radius: 50px;
  position: absolute;
  top: 12px;
  left: 0;
  width: 1.4rem;
}
.flow .imgbox{
  margin-top: 2rem;
}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .flow > div{
    width: calc(100% / 2 - 1rem);
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesecflow{
    padding: 6rem 0;
  }
  .flow > div{
    width: 100%;
  }
}

/*****************************
pagesec-point
*****************************/
.pagesec-point .fbox{
  background: #fff;
  border: 1px solid #7EB0E3;
  border-radius: 6px;
  padding: 3rem 7rem;
  text-align: center;
}
.pagesec-point .fbox .ttlen{
  background: #7EB0E3;
  border-radius: 50px;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.pagesec-point .fbox .ttl{
  font-size: 2.4rem;
  font-weight: bold;
}
.pagesec-point .fbox .imgbox{
  margin: 2rem 0;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-point .fbox {
    padding: 2rem 1rem;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-point .point {
    gap: 2rem;
  }
  .pagesec-point .fbox {
    width: 100%;
  }
  .pagesec-point .fbox .ttlen{
    font-size: 1.8rem;
  }
  .pagesec-point .fbox .ttl{
    font-size: 2rem;
    font-weight: bold;
  }
}

/*****************************
pagesec-preparation
*****************************/
.pagesec-preparation li{
  border: 1px solid #7EB0E3;
  border-radius: 6px;
  margin-top: 2rem;
  padding: 3rem 4rem ;
}
.pagesec-preparation .fimgbox{
  width: 150px ;
}
.pagesec-preparation .fbox{
  width: calc(100% - 150px - 7rem) ;
}
.pagesec-preparation .fbox .ttl{
  border-bottom: 3px dotted #7EB0E3;
  color: #7EB0E3;
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-preparation .fbox{
    width: calc(100% - 150px - 4rem) ;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-preparation li{
    padding: 2rem;
  }
  .pagesec-preparation .fimgbox{
    margin: 0 auto 1rem;
  }
  .pagesec-preparation .fbox{
    width: 100%;
  }
  .pagesec-preparation .fbox .ttl{
    font-size: 2rem;
  }
}

/*****************************
pagesec-mypage
*****************************/
.pagesec-mypage .mypage > div:not(:last-of-type){
  margin-bottom: 4rem;
}
.pagesec-mypage .mypage > div > dt{
  background: #7EB0E3;
  border-radius: 6px;
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 2rem;
  padding: 1rem 2rem;
}
.pagesec-mypage .mypage > div:last-of-type > dt{
  background: #E5BCCE;
}
.pagesec-mypage .mypage > div:last-of-type .flow > div{
  border-color: #E5BCCE;
}
.pagesec-mypage .mypage > div:last-of-type .flow dt{
  color: #E5BCCE;
}
.pagesec-mypage .mypage > div:last-of-type .flow dt::before{
  background: #E5BCCE;
}
@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-mypage .mypage > div > dt{
    font-size: 2rem;
  }
}

/*****************************
pagesec-personal
*****************************/
.pagesec-personal .flow > div{
  width: calc(100% / 2 - 1rem);
}
.pagesec-personal .imggr{
  margin-top: 2rem;
}
.pagesec-personal .imggr p{
  background: #7EB0E3;
  border-radius: 50px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 2rem;
  padding: .5rem 1rem;
}
.pagesec-personal .imggr .fimgbox:last-of-type p{
  background: #E5BCCE;
}
@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-personal .flow > div{
    width: 100%;
  }
}


/*****************************
pagesec-password
*****************************/
.pagesec-password .flow > div{
  width: calc(100% / 2 - 1rem);
}

@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-password .flow > div{
    width: 100%;
  }
}

/*****************************
pagesec-mailing
*****************************/
.pagesec-mailing .txt{
  margin: 2rem 0;
  text-align: center;
}
.pagesec-mailing .add{
  border: 1px solid #7EB0E3;
  border-radius: 6px;
  padding: 2rem;
}
.pagesec-mailing .add dt{
  background: #7EB0E3;
  color: #fff;
  border-radius: 50px;
  font-weight: bold;
  margin-bottom: 1rem;
  padding: 0 2rem;
}
.pagesec-mailing .add dd{
  font-weight: bold;
}
.pagesec-mailing .download .attention{
  color: #AA000A;
  margin-bottom: 1rem;
  padding-left: 4rem;
  position: relative;
}
.pagesec-mailing .download .attention i{
  font-size: 3rem;
  position: absolute;
  top: 0;
  left: 0;
}
.pagesec-mailing .download .downloadlist {
  border-top: 2px dashed #7EB0E3;
  padding-top: 1rem;
}
.pagesec-mailing .download ul {
  gap: 1rem;
  margin-top: 1rem;
}


@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-mailing .fbox{
    width: 100%;
  }
  .pagesec-mailing .add{
    margin-bottom: 2rem;
  }
  .pagesec-mailing .txt{
    text-align: left;
  }
}

/*****************************
pagesec-printing
*****************************/
.pagesec-printing .txt{
  margin: 2rem 0;
  text-align: center;
}
.pagesec-printing .flow > div{
  width: calc(100% / 3 - 1.5rem);
}

@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-printing .txt{
    text-align: left;
  }
  .pagesec-printing .flow > div{
    width: 100%;
  }
}

/*****************************
pagesec-exam
*****************************/
.pagesec-exam .txt{
  margin: 2rem 0;
  text-align: center;
}
@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-exam .txt{
    text-align: left;
  }
}

/*****************************
pagesec-check
*****************************/
.pagesec-check .txt{
  margin: 2rem 0;
  text-align: center;
}
@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-check .txt{
    text-align: left;
  }
}

/*****************************
pagesec-link
*****************************/
.pagesec-link .btngr{
  gap: 2rem;
}