@charset "utf-8";
/*##########################################################*/
/*  Page For UnderPage Use Style														*/
/*    Ver:1.00/001           																*/
/*    Date:2024/12/14        																*/
/*##########################################################*/
/*###################### Main PC sec #######################*/
/*################### Com div ###################*/
/* コンテンツ内共通 */
#main-content .content-wrap {
  width: 100%;
  max-width:705px;
  margin-left: auto;
}
#main-content .sec02 {
  margin-top: var(--UP-SEC02-MT);
}
#main-content .sec02 .sec02-title h2,
#main-content .sec03 h3.font-alphabet {
  font-size:25px;
  font-weight: bold;
}
#main-content .sec02 .sec02-title h2 {
  margin-bottom:var(--UP-SEC02-H2-MB);
}
#main-content .sec02 .h2-lead {
  font-size:14px;
  line-height: 2.86;
}
#main-content .sec03 {
  margin-top: var(--UP-SEC03-MT);
}
#main-content .sec03 h3 {
  margin-bottom:var(--UP-SEC03-H3-MB);
  font-size:19px;
}

/* メインイメージ */
#main-image img {
  width: 100%;
}

/*################### Each Section div ###################*/
/* aboutページ */
#page-abouttop #about01 .about-logo {
  display: flex;
  align-items: flex-end;
}
#page-abouttop #about01 .about-logo .logo-lead {
  margin-left:10px;
  margin-bottom: -2px;
  font-weight:bold;
}
#page-abouttop #about01 .about-text {
  margin-top: 20px;
}
#page-abouttop #about01 .about-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-bottom: 30px;
  border-top:solid 1px #000;
  border-bottom:solid 1px #000;
}
#page-abouttop #about01 .about-list dt,
#page-abouttop #about01 .about-list dd {
  margin-top: 20px;
}
#page-abouttop #about01 .about-list dt {
  width: 5em;
}
#page-abouttop #about01 .about-list dd {
  width: calc(100% - 6em);
  margin-left:1em;  
}
#page-abouttop #about01 .about-list .business-list {
  margin-left:0.3em;
  list-style-position:inside;
}
#page-abouttop #about01 .about-list .business-list li {
	text-indent: -1.3em;
	margin-left: 1em;
}
#page-abouttop #about03 .map {
  margin-top: 20px;
}
#page-abouttop #about02 .villa-text,
#page-abouttop #about02 .villa-img {
  margin-top:60px;
}
#page-abouttop #about02 .villa-name {
  font-weight: bold;
  font-size:14px;
}
#page-abouttop #about02 .villa-link {
  margin-top: 1.5em;
  font-size:14px;
}

/* serviceページ */
#page-servicetop #main-image .service-list {
  display:flex;
  flex-wrap: wrap;
  gap:20px;
}
#page-servicetop #main-image .service-list li {
  width:calc((100% - 60px) / 4);
  text-align: center;
}
#page-servicetop #main-image .service-list li img {
  max-width: 250px;
}
#page-servicetop #service01 .flow-list {
  margin-top: 20px;
  padding-bottom: 30px;
  border-top:solid 1px #000;
  border-bottom:solid 1px #000;
}
#page-servicetop #service01 .flow-list dt {
  margin-top: 25px;
  font-size:14px;
  font-weight: bold;
}
#page-servicetop #service01 .flow-list dd {
  margin-top: 10px;
}
#page-servicetop #service02 .notice {
  margin-top: 20px;
}
#page-servicetop #service02 .notice .notice-title,
#page-servicetop #service02 .notice .notice-text {
  font-size:11px;
}

/* recruitページ */
#page-recruittop #main-content,
#page-recruittop #main-content .sec02:first-child {
  margin-top: 0;
}
#page-recruittop .sec02 .recruit-img {
  margin-top:100px;
}
#page-recruittop #recruit01 .recruit-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-bottom: 30px;
  border-top:solid 1px #000;
  border-bottom:solid 1px #000;
}
#page-recruittop #recruit01 .recruit-list dt,
#page-recruittop #recruit01 .recruit-list dd {
  margin-top: 20px;
}
#page-recruittop #recruit01 .recruit-list dt {
  width: 8em;
}
#page-recruittop #recruit01 .recruit-list dd {
  width: calc(100% - 9em);
  margin-left:1em;  
}
#page-recruittop #recruit01 .explanation {
  margin-top:10px;
}
#page-recruittop #recruit01 .explanation p {
  font-size: 11px;
}
#page-recruittop #recruit02 .method .tel {
  margin-top:40px;
  font-size:35px;
  font-weight: bold;
}
#page-recruittop #recruit02 .method .tel:before {
  content: '';
  display: inline-block;
  width: 45px;
  height:32px;
  margin-right:10px;
  background-image: url("../img/com00-ic003.png");
  background-size: contain;
}
#page-recruittop #recruit02 .method .mail {
  position: relative;
  margin-left:55px;
  margin-top:40px;
  padding: 5px;
  border: solid 1px #000;
  background-color: #f1f1f1;
  text-align: center;
  font-size:15px;
}
#page-recruittop #recruit02 .method .mail:before {
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  left:-55px;
  content: '';
  display: inline-block;
  width: 45px;
  height:32px;
  margin-right:10px;
  background-image: url("../img/com00-ic004.png");
  background-size: contain;
  background-repeat:no-repeat;
}

/* worksページ（★WP環境★） */
/* Worksページ特殊対応（has疑似クラス利用） */
body:has(#page-workstop) {  
  background-color: #000;
}
body:has(#page-workstop) p,
body:has(#page-workstop) a,
body:has(#page-workstop) li {
  color:#fff;
}
body:has(#page-workstop) header #sp-header-menu {
  background-color:#000;
}
body:has(#page-workstop)  header #sp-header-menu #menu-content .sp-menu-list li.contact {
  border-color: #fefefe;
  background-color: #2f2f2f;
}
#page-workstop #main-content,
#page-workstop #main-content .sec02:first-child {
  margin-top: 0;
}
#page-workstop #works .works-data #all-data {
  display:grid;
}
#page-workstop #works .works-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
#page-workstop #works .works-list li {
  overflow: hidden;
}
#page-workstop #works .works-list li:nth-child(4n+1) {
  grid-column: 1 / span 2;
}
#page-workstop #works .works-list li:nth-child(2) {
  grid-row: 2 / span 2;
}
#page-workstop #works .works-list li:nth-child(6) {
  grid-row: 5 / span 2;
}
#page-workstop #works .works-list li:nth-child(10) {
  grid-row: 8 / span 2;
}
#page-workstop #works .works-list li:nth-child(14) {
  grid-row: 11 / span 2;
}
#page-workstop #works .works-list li:nth-child(18) {
  grid-row: 14 / span 2;
}
#page-workstop #works .works-list li:nth-child(4n+1) img,    /* 1,5,9～ */
#page-workstop #works .works-list li:nth-child(4n+2) img {   /* 2,6,10～ */
  height: 740px;
  width:100%;
}
#page-workstop #works .works-list li:nth-child(4n+3) img,    /* 3,7,11～ */
#page-workstop #works .works-list li:nth-child(4n+4) img {   /* 4,8,12～ */
  height: 350px;
  width:100%;
}
#page-workstop #works .works-list li img {
  object-fit: cover;
  transition:0.7s ease-in-out;
}
#page-workstop #works .works-list li a:hover img {
  transform: scale(1.2);
  transition:0.7s ease-in-out;
  opacity: 1.0;
}
#page-workstop #works .works-list li a:hover {
  opacity: 1.0;
}

/* 一覧系ページネーション（WP対応版） */
#page-workstop #works .paging {
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-end;
  margin-top:10px;
  letter-spacing:0.25em;
}
#page-workstop #works .paging p,
#page-workstop #works .paging a,
#page-workstop #works .paging li,
#page-workstop #works .paging span.page-numbers.dots {
  color:#767575;
}

#page-workstop #works .paging a,
#page-workstop #works .paging span.page-numbers.current,
#page-workstop #works .paging span.page-numbers.dots {
  font-size:16px;
}
#page-workstop #works .paging a.prev.page-numbers {
  margin-right:5px;
  letter-spacing:0.06em;
  font-weight:bold;
  color: #fff;
}
#page-workstop #works .paging a.prev.page-numbers:before {
  content: "<<";
  margin-right:8px;
}
#page-workstop #works .paging a.next.page-numbers {
  margin-left:5px;
  letter-spacing:0.08em;
  font-weight:bold;
  color: #fff;
}
#page-workstop #works .paging a.next.page-numbers:after {
  content: ">>";
  margin-left:8px;
}
#page-workstop #works .paging span.page-numbers.current {
  font-weight:bold;
  color: #fff;
}

/* contactページ（★WP環境★） */
#page-contacttop #main-content,
#page-contacttop #main-content .sec02:first-child {
  margin-top: 0;
}
#page-contacttop #contact .h2-lead .required {
  font-size: 11px;
  font-weight: bold;
  color:#fb3b03;
}
#page-contacttop #contact .h2-notice {
  font-size: 11px;
}
#page-contacttop #contact #contact-form {
  margin-top:60px;
}
#page-contacttop #contact #contact-form .form-list {
  display: flex;
  flex-wrap:wrap;
}
#page-contacttop #contact #contact-form .form-list dt,
#page-contacttop #contact #contact-form .form-list dd {
  margin-top:30px;
}
#page-contacttop #contact #contact-form .form-list dt:first-child,
#page-contacttop #contact #contact-form .form-list dt:first-child + dd {
  margin-top:0;
}
#page-contacttop #contact #contact-form .form-list dt {
  width:140px;
  margin-right:65px;
}
#page-contacttop #contact #contact-form .form-list dt p {
  font-size:14px;
  font-weight: bold;
}
#page-contacttop #contact #contact-form .form-list dt p .required {
  font-size: 11px;
  font-weight: bold;
  color:#fb3b03;
}
#page-contacttop #contact #contact-form .form-list dt p.item-english {
  font-size: 12px;
}
#page-contacttop #contact #contact-form .form-list dd {
  width:calc(100% - 140px - 65px);
}
#page-contacttop #contact #contact-form .form-list dd select,
#page-contacttop #contact #contact-form .form-list dd input,
#page-contacttop #contact #contact-form .form-list dd textarea {
  width:100%;
  box-sizing:border-box;
  border:solid 1px #cdcdcd;
  background-color:#f5f5f4;
  font-size:14px;
}
#page-contacttop #contact #contact-form .form-list dd select,
#page-contacttop #contact #contact-form .form-list dd input {
  height: 34px;;
}
#page-contacttop #contact #contact-form .form-list dd textarea {
  height: 280px;
}
#page-contacttop #contact #contact-form .confirm {
  margin-top:20px;
  margin-left:205px;
}
#page-contacttop #contact #contact-form .sbt-button {
  margin-top:20px;
}
#page-contacttop #contact #contact-form .wpcf7-list-item {
  margin-left:0;
}
#page-contacttop #contact #contact-form .send input.wpcf7-submit {
  width:100%;
  padding:15px 0;
  border-radius:30px;
  background-color: #000;
  font-size:17px;
  font-weight: bold;
  color: #fff;
  cursor:pointer;
}
#page-contacttop #contact #contact-form .send input.wpcf7-submit:hover {
	opacity:0.55;
  transition:0.3s ease-in-out;
}
#page-contacttop #contact #contact-form .send input.wpcf7-submit:disabled {
	opacity:1;
  cursor:not-allowed;
}

/* errorページ */
#page-errortop #main-content, #page-errortop #main-content .sec02:first-child {
  margin-top:0;  
}  

/*###################### S-Phone sec #######################*/
@media (max-width : 768px) {
  /*################### Each Section div ###################*/
 /* servoceページ */
  #page-servicetop #main-image .service-list li {
    width:calc((100% - 20px) / 2);
  }
  #page-servicetop #main-image .service-list li img {
    max-width: none;
  }

  /* contactページ（★WP環境★） */
  #page-contacttop #contact #contact-form .form-list dt {
    margin-right:40px;
  }
  #page-contacttop #contact #contact-form .form-list dd {
    width:calc(100% - 140px - 40px);
  }
  #page-contacttop #contact #contact-form .confirm {
    margin-left:180px;
  }
}

/*###################### S-Phone sec #######################*/
@media (max-width : 480px) {
	/*################### Common Layout div ###################*/
  /* コンテンツ内共通 */
  #main-content {
    margin-top:var( --UP-MAIN-MT-SP);
  }
  #main-content .sec02,
  #main-content .sec03 {
    margin-top: var(--UP-SEC02-MT-SP);
  }

  /*################### Each Section div ###################*/
   /* aboutページ */
  #page-abouttop #about02 .villa-text,
  #page-abouttop #about02 .villa-img {
    margin-top:30px;
  }

  /* recruitページ */
  #page-recruittop #recruit02 .method .tel {
    font-size:28px;
  }
  #page-recruittop #recruit02 .method .tel:before {
    position: relative;
    top:4px;
  }
  
  /* worksページ */
  #page-workstop #works .works-data #all-data {
    display:block;
  }
  #page-workstop #works .works-list li {
    margin-top: 20px;
  }
  #page-workstop #works .works-list li:first-child {
    margin-top: 0;
  }
  #page-workstop #works .works-list li img {
    height: 350px !important;
  }
  #page-workstop #works .paging {
    justify-content:center;
  }

  /* contactページ（★WP環境★） */
  #page-contacttop #contact #contact-form .form-list {
    display: block;
  }
  #page-contacttop #contact #contact-form .form-list dt {
    width:100%;
    margin-right:0;
  }
  #page-contacttop #contact #contact-form .form-list dt:first-child + dd,
  #page-contacttop #contact #contact-form .form-list dd {
    width:100%;
    margin-top:10px;
  }
  #page-contacttop #contact #contact-form .form-list dd select,
  #page-contacttop #contact #contact-form .form-list dd input,
  #page-contacttop #contact #contact-form .form-list dd textarea {
    font-size:16px;
  }
  #page-contacttop #contact #contact-form .confirm {
    margin-left:0;
  }
}

/*###################### S-Phone sec #######################*/
@media (max-width : 370px){
/* 一覧系ページネーション（WP対応版） */
	#page-workstop #works .paging {
    width:100%;
	}
	#page-workstop #works .nav-links {
		text-align:center;
	}
	#page-workstop #works .paging a.prev.page-numbers {
		display:block;
		margin-bottom:15px;
	}
	#page-workstop #works .paging a.next.page-numbers {
		display:block;
		margin-top:15px;
	}
}