@charset "UTF-8";

/* -----------------------------------------------

	 pagename(mainタグのクラス名を合わせる事)

----------------------------------------------- */
.utop_section {
  position: relative;
  height: 380px;
  background-image: url(../images/under_mainimg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 0;
}
.utop_section::after{
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: #121c2e;
  opacity: 0.1;
  z-index: -1;
}
.utop_section .sechead .ja,
.utop_section .sechead .en{
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.utop_section .container{
  height: 100%;
}
.utop_section .cwrap,
.utop_section .bgwrap{
	height: 100%;
}
.utop_section .sechead {
	margin: 0;
}
.utop_section .sechead .ja,
.utop_section .sechead .en{
	text-align: center;
}

@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 768px) {
	.utop_section {
		height: 300px;
	}
}
@media only screen and (max-width: 479px) {
	.utop_section {
		height: 200px;
	}
}

/* -----------------------------------------------
	 service
   ----------------------------------------------- */

#service .sec_service{
	overflow-x: hidden;
}
#service .sec_service h3{
  color: #2f8d0e;
  font-size: 30px;
  line-height: 1.5;
  margin-bottom: 20px;
}
#service .sec_service .servicewrap{
  margin-bottom: 90px;
}
#service .sec_service .servicewrap .txts{
  max-width: 650px;
  position: relative;
  z-index: 1;
}
#service .sec_service .servicewrap .txts .txt:first-child{
  margin-bottom: 30px;
}
#service .sec_service .right.img{
  position: relative;
  width: 90vw;
  min-width: 50vw;
  max-width: none;
  margin-left: 80px;
  margin-right: calc(50% - 60vw);
}
#service .sec_service .right.img img{
  z-index: 1;
  border-radius: 40vh 0 0 40vh;
}
#service .sec_service .left.img{
  position: relative;
  width: 90vw;
  min-width: 50vw;
  max-width: none;
  margin-right: 80px;
  margin-left: calc(50% - 60vw);
}
#service .sec_service .left.img img{
  z-index: 1;
  border-radius: 0 40vh 40vh 0;
}

#service .sec_service .servicewrap .service{
  margin-bottom: 180px;
}
#service .sec_service .servicewrap .service .set{
  margin-bottom: 60px;
}
#service .sec_service .servicewrap .service .set strong{
  color: #2f8d0e;
}
#service .sec_service .servicewrap .service li{
  line-height: 1.5;
  margin-bottom: 10px;
  }
.usec_serviceintro .txts{
  margin-bottom: 90px;
}
.usec_serviceintro .txts strong{
  color: #2f8d0e;
}
#service .sec_service .servicewrap .service h4{
  color: #2f8d0e;
  border-bottom: solid 2px #2f8d0e;
  margin-bottom: 15px;
}
#service .sec_service .lasttxt{
  margin-bottom: 30px;
}

  @media only screen and (max-width: 1024px) {
    #service .sec_service .right.img,
    #service .sec_service .left.img{
      width: 100vw;
    }
    #service .sec_service .right.img{
      margin-left: 60px;
    }
    #service .sec_service .left.img{
      margin-right: 60px;
    }
    #service .sec_service .servicewrap .service{
      margin-bottom: 120px;
    }
  }
  @media only screen and (max-width: 768px) {
    #service .sec_service h3{
      font-size: 25px;
    }
    #service .sec_service .img img{
      height: 350px;
      object-fit: cover;
    }
    #service .sec_service .servicewrap{
      margin-bottom: 60px;
    }
    #service .sec_service .servicewrap .txts{
      max-width: 100%;
      margin-bottom: 30px;
    }
    #service .sec_service .servicewrap .service{
      flex-direction: column;
    }
    #service .sec_service .servicewrap .service02,
    #service .sec_service .servicewrap .service04,
    #service .sec_service .servicewrap .service06{
      flex-direction: column-reverse;
    }
    #service .sec_service .servicewrap .service {
      margin-bottom: 80px;
    }
    #service .sec_service .right.img{
      margin-left: 45px;
    }
    #service .sec_service .left.img{
      margin-right: 45px;
    }
    #service .sec_service .servicewrap .service{
      margin-bottom: 90px;
    }
    #service .sec_service .right.img,
    #service .sec_service .left.img{
      width: calc(100% + 60px);
    }
    #service .sec_service .right.img{
      margin-right: 0;
    }
    #service .sec_service .left.img{
      margin-left: 0;
    }
  }
  @media only screen and (max-width: 479px) {
    #service .sec_service h3{
      font-size: 20px;
      margin-bottom: 10px;
    }
    #service .sec_service .img img{
      height: 250px;
    }
    #service .sec_service .servicewrap .service{
      margin-bottom: 60px;
    }
  }




/* -----------------------------------------------
	 usec_reason
----------------------------------------------- */
#service .usec_reason .reasonwrap{
  gap: 40px;
}
#service .usec_reason .reason{
  background: rgba(167, 89, 149, 0.1);
  padding: 20px;
  height: 250px;
  border-radius: 20px;
  line-height: 1.5;
  text-align: center;
  width: calc(100% / 3 - 25px);
  font-weight: 700;
  color: #2f8d0e;
}
#service .usec_reason .reason p{
  color: #a75995;
  font-size: 30px;
}
@media only screen and (max-width: 768px) {
  #service .usec_reason .reasonwrap{
    gap: 30px;
  }
  #service .usec_reason .reason{
    width: calc(100% / 3 - 20px);
    height: 200px;
  }
  #service .usec_reason .reason p{
    font-size: 20px;
  }
}
@media only screen and (max-width: 768px) {
  #service .usec_reason .reasonwrap{
    flex-wrap: wrap;
    gap: 15px;
  }
  #service .usec_reason .reason{
    width: 100%;
    height: auto;
    padding: 30px 20px;
  }
}

/* -----------------------------------------------
usec_flow
----------------------------------------------- */
#service .usec_flow .flowwrap{
  margin-bottom: 90px;
}
#service .usec_flow .faq{
  margin-bottom: 30px;
  padding: 0;
  text-indent: 0;
}
#service .usec_flow h3{
  color: #2f8d0e;
  border-bottom: solid 2px #2f8d0e;
}

@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 479px) {
  #service .usec_flow .flowwrap{
    margin-bottom: 60px;
  }
}



/* -----------------------------------------------
usec_flow
----------------------------------------------- */
#service .usec_faq .faq{
  margin-bottom: 30px;
}
#service .usec_faq h3{
  background: rgba(47, 141, 14, 0.1);
  padding: 15px;
  color: #2f8d0e;
  line-height: 1.3;
  padding-bottom: 10px;
}
@media only screen and (max-width: 479px) {
  #service .usec_faq h3{
    padding: 10px;
  }
}



/* -----------------------------------------------
	 sec_company
----------------------------------------------- */
.sec_company table{
  width: 100%;
}
.sec_company table tr{
  display: flex;
  border-bottom: solid 1px #cdcdcd;
}
.sec_company table th{
  text-align: left;
  width: 300px;
}
.sec_company table td{
  width: 100%;
}
.sec_company table th,
.sec_company table td{
  background: transparent;
  padding: 45px 30px;
  border: none;
}

  @media only screen and (max-width: 1024px) {
    .sec_company table th,
    .sec_company table td{
      padding: 35px 30px;
    }
    .sec_company table th {
      width: 250px;
    }
  }
  @media only screen and (max-width: 768px) {
    .sec_company table th {
      width: 200px;
    }
  }
  @media only screen and (max-width: 479px) {
    .sec_company table tr{
      flex-direction: column;
    }
    .sec_company table th {
      padding: 15px 15px 0;
    }
    .sec_company table td {
      padding: 10px 15px 15px;
    }
  }


/* -----------------------------------------------

	 contact

----------------------------------------------- */
#contact .contactarea {
    margin-bottom: 150px;
}
#contact .contactarea .headtxt{
    margin-bottom: 60px;
    text-align: center;
}
#contact .contactarea a{
    display: block;
    margin: auto;
    margin-bottom: 60px;
    max-width: 420px;
}
#contact .formwrap{
    padding: 60px 90px;
    margin: auto;
    border: solid 1px #AAABAC;
    border-radius: 20px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}
#contact .form-cont{
    margin-bottom: 30px;
}
#contact input,
#contact textarea{
    width: 100%;
    border: solid 1px #AAABAC;
    border-radius: 5px;
    padding: 10px;
    font-size: 20px;
}
#contact dl{
    display: flex;
}
#contact label{
    display: flex;
    align-items: center;
}
#contact label input[type="radio"]{
    width: 20px;
    margin-right: 5px;
}
#contact .wpcf7-list-item:first-child{
    margin: 0;
}
#contact dl:not(:last-child){
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: solid 1px #AAABAC;
}
#contact dt{
    min-width: 300px;
}
#contact dt span{
    padding: 5px 15px;
    color: #fff;
    border-radius: 5px;
    margin-right: 20px;
}
#contact dt span.required{
    background: #a75995;
}
#contact dt span.any{
    background: #AAABAC;
}
#contact dd{
    width: calc(100% - 300px);
}
#contact .submit-btn{
    color: #fff;
    background:#2f8d0e;
    border-radius: 50vh;
    display: inline-block;
    padding: 15px;
    max-width: 300px;
    font-size: 20px;
    transition: 0.5s;
}
#contact .submit-btn:hover{
    cursor: pointer;
    background: #a75995;
    transition: 0.5s;
}

@media only screen and (max-width: 1024px) {
    #contact .formwrap {
        padding: 50px 60px
    }
    #contact input, #contact textarea{
        font-size: 18px;
    }
}
@media only screen and (max-width: 768px) {
    #contact .contactarea {
        margin-bottom: 120px;
    }
    #contact .formwrap {
        padding: 40px 30px
    }
    #contact input, #contact textarea{
        font-size: 16px;
    }
    #contact dt {
        min-width: 200px;
    }
    #contact dd {
        width: calc(100% - 200px);
    }
    #contact dt span {
        padding: 3px 10px;
        font-size: 14px;
        margin-right: 10px;
    }
    #contact .submit-btn{
        font-size: 18px;
    }
}
@media only screen and (max-width: 650px) {
    #contact .contactarea {
        margin-bottom: 90px;
    }
    #contact .contactarea .headtxt,
        #contact .contactarea a {
        margin-bottom: 30px;
    }
    #contact dl{
        flex-direction: column;
    }
    #contact dt,
    #contact dd{
        width: 100%;
    }
    #contact dt{
        margin-bottom: 10px;
    }
    #contact dl:not(:last-child) {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    #contact dt span{
        margin-right: 5px;
    }
    #contact label input[type="radio"] {
        width: 10px;
    }
    #contact .wpcf7-list-item{
        margin: 0 30px 0 0 !important;
    }
    #contact .formwrap {
        padding: 30px 20px;
        border: solid 1px #AAABAC;
    }
    #contact .submit-btn{
        font-size: 16px;
    }
}


/* ===================================================================

	form

=================================================================== */
.formwrap .policywrap *{
  line-height: 1.5;
  font-weight: normal;
}
.formwrap .policywrap {
  font-size: 15px;
  width: 100%;
  height: 200px;
  overflow-y: auto;
  margin: 30px auto !important;
  padding: 20px !important;
  background: #f1f1f1;
}
.formwrap .policyset {
  margin-bottom: 20px;
  border-top: solid 1px #adadad;
  padding-top: 20px;
}
.formwrap .policyset .ttl {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 18px;
}
.formwrap .policyset a{
  text-decoration: underline;
}
.formwrap .policywrap p {
  margin-bottom: 10px;
}
.formwrap .policyset.plicysettop{
  border-bottom: solid 1px #adadad;
  margin-bottom: 30px;
  padding-bottom: 30px;
}
.formwrap .policyset.policysetuls p:last-child{
  margin-bottom: 20px !important;
} 
.formwrap .policyset p:last-child{
  margin-bottom: 0;
}


  @media only screen and (max-width: 1024px) {
  }
  @media only screen and (max-width: 768px) {
  }
  @media only screen and (max-width: 479px) {
    .formwrap .txt .sp{
      display: block;
    }
    .formwrap .policywrap{
      height: 200px;
      padding: 15px 20px;
      margin: 20px auto 35px;
    }
    .formwrap .policywrap p{
      font-size: 13px;
      letter-spacing: 0.01rem;
      line-height: 1.8;
    }
    .formwrap .policyset .ttl {
      margin-bottom: 5px;
      font-size: 16px;
    }
  }






#news,
#newsin{
  margin-top: 90px;
}

#news .utop_section,
#newsin .utop_section{
  margin-bottom: 90px;
}


/* -----------------------------------------------

news

----------------------------------------------- */

/* -----------------------------------------------

newsin

----------------------------------------------- */

#newsin .container{
  max-width: 1000px;
  margin: 0 auto 60px;
}
#newsin .contwrap p {
  margin-bottom: 1.3em;
}
#newsin .sechead {
  padding-bottom: 15px;
  border-bottom: solid 1px #333;
}
#newsin .sechead .ja{
  line-height: 1;
}
#newsin .contwrap p:empty {
  margin-bottom: 1.3em;
  display: inline-block;
}

@media only screen and (max-width: 479px) {
  #news, #newsin {
    margin-top: 60px;
  }
  #news .utop_section, #newsin .utop_section {
    margin-bottom: 60px;
  }
}


/* ========== WP-PageNavi ========== */
.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

/* 「1 / 2」のテキストは非表示 */
.wp-pagenavi .pages {
  display: none;
}

/* 共通ボタンスタイル（数字・前へ・次へ） */
.wp-pagenavi a,
.wp-pagenavi span.current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  border: none;
  transition: background-color 0.2s, color 0.2s;
}

/* 非アクティブ（通常のページ番号・前へ・次へ） */
.wp-pagenavi a {
  background-color: #e8e8e8;
  color: #333;
}

.wp-pagenavi a:hover {
  background-color: #d0d0d0;
  color: #111;
}

/* アクティブ（現在のページ） */
.wp-pagenavi span.current {
  background-color: #2f8d0e;
  color: #fff;
  font-weight: bold;
}