@charset "UTF-8";
.out {
  position: relative;
}

.in img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.5s;
  z-index: 0;
}

.out img {
  display: block;
  width: 100%;
  height: auto;
}

input {
  display: none;
}

.in {
  display: flex;
  justify-content: center;
}

label span {
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 20px;
  padding: 7px;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

label span::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #D9D9D9;
  opacity: 0.5;
  border-radius: 100%;
}

input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before {
  background: #000;
  opacity: 1;
}

label span::before {
  animation: slidebutton 14s infinite;
}

@keyframes slidebutton {
  0% {
    opacity: 0.5;
    background: #4287f5;
  }
  3.5% {
    opacity: 1;
    background: #000;
  } /* b÷x×100=y */
  25% {
    opacity: 1;
    background: #000;
  } /* 100÷c=z */
  28.5% {
    opacity: 0.5;
    background: #4287f5;
  } /* y+z */
}
label:nth-of-type(2) span::before, label:nth-of-type(2) img {
  animation-delay: 3.5s;
  /* animation-delay: 1.0s; */
}

label:nth-of-type(3) span::before, label:nth-of-type(3) img {
  animation-delay: 7s;
  /* animation-delay: 2.0s; */
}

label:nth-of-type(4) span::before, label:nth-of-type(4) img {
  animation-delay: 10.5s;
  /* animation-delay: 3.0s; */
}

input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img {
  opacity: 1;
  z-index: 1;
}

.in img {
  animation: slide 14s infinite; /* (a+b)×c=x */
  opacity: 0;
}

@keyframes slide {
  0% {
    opacity: 0;
  }
  3.5% {
    opacity: 1;
    z-index: 1;
  } /* b÷x×100=y */
  25% {
    opacity: 1;
  } /* 100÷c=z */
  28.5% {
    opacity: 0;
    z-index: 0;
  } /* y+z */
}
input:checked ~ .in img, input:checked ~ .in span::before {
  animation: none;
}

body {
  width: 100%;
  counter-reset: title 0;
}
main{
	width:100%;
	max-width:1530px;
	margin:0 auto;
}
@media screen and (min-width:769px) and (max-width: 1440px) {
	body{
		overflow: scroll;
		margin: 0 auto;
		min-width:1340px;
	}
}
.pcOnly {
  display: block;
}

.spOnly {
  display: none;
}

p {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 180%;
  letter-spacing: 1px;
  font-size: 1rem;
}

.p24 {
  font-size: 24px;
}

.yellow {
  background: linear-gradient(transparent 75%, #E0B953 75%);
}

.inner {
  width: 77.77%;
  margin: auto;
}

.title-text {
  width: 100%;
  text-align: center;
}
.title-text .title-tag {
  width: 252px;
  margin: auto;
  font-family: "Noto Serif JP", serif;
  line-height: 160%;
  margin-bottom: 20px;
  border: #003C31 1px solid;
  color: #003C31;
}
.title-text .h2-title {
  font-family: "Noto Serif JP", serif;
  line-height: 160%;
  letter-spacing: 1px;
  font-size: 36px;
  margin-bottom: 30px;
  position: relative;
}
.title-text .h2-title::after {
  position: absolute;
  content: "";
  border-bottom: 1px #000 dashed;
  width: 680px;
  height: 1px;
  bottom: -20px;
  left: 19%;
}
.title-text .title-sub-tag {
  font-family: "Marcellus", serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #003C31;
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none;
  }
  .spOnly {
    display: block;
  }
  .p24 {
    font-size: 18px;
  }
  .inner {
    width: 87.5%;
  }
  .title-text .title-tag {
    width: 52%;
    margin-bottom: 14px;
    padding: 3px 5px;
  }
  .title-text .h2-title {
    font-size: 22px;
  }
  .title-text .h2-title::after {
    width: 100%;
    left: 0%;
  }
  .title-text .title-sub-tag {
    font-size: 14px;
  }
}
#fv {
  width: 100%;
  margin-top: 68px;
  position: relative;
  background: url(../img/fv02_pc.png);
  background-size: cover;
  padding: 5rem 0;
  position: relative;
}

.fv_mainBlock{
  color: #FFF;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.fv_subTitle{
  font-family: "Noto Serif JP", serif;
  font-size: 2.5rem;
  letter-spacing: 0.4px;
}

.fv_Title{
  font-family: "Noto Serif JP", serif;
  font-size: 3rem;
  letter-spacing: 0.6px;
  line-height: 110%;
}

.fv_Title span{
  font-size: 4rem;
}

.fv_text{
  width: 70%;
  margin-top: 4rem;
}

.fv_ctaBlock{
  position: absolute;
  bottom: 20%;
  right: 0%;
}

.fv_ctaBlock_inner{
  text-align: center;
}

.fv_ctaBlock_inner:first-of-type{
  margin-bottom: 1rem;
}

.fv_ctaBlock_inner p{
  background: #FFF;
  padding: 0.25rem 1rem 1.5rem;
  position: relative;
  font-size: 1.5rem;
  font-family: "Noto Serif JP", serif;
}

.fv_ctaBlock_inner p::after{
  content: "";
  background: url(../img/fv_arrow.svg);
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  bottom: 7%;
  width: 20px;
  height: 20px;
  background-size: cover;
}

.fv_ctaBlock_inner span{
  background: #003C31;
  padding: 0.25rem 1rem;
  color: #fff;
  font-size: 1rem;
}

@media screen and (max-width: 768px) {
  #fv{
    margin-top: 64px;
    background: url(../img/fv02_sp.png);
    background-size: cover;
  }
  .fv_subTitle{
    font-size: 1.7rem;
  }
  .fv_Title{
    font-size: 2.55rem;
  }
  .fv_Title span{
    margin: 0 0.3rem;
  }
  .fv_text{
    width: 100%;
  }
  .fv_ctaBlock{
    position: unset;
    margin: 2rem 0;
    display: flex;
    justify-content: space-between;
  }
  .fv_ctaBlock_inner p{
    font-size: 1rem;
  }
}

#pr{
  margin-top: 0;
  padding: 3rem 0;
  position: relative;
}

#pr::after{
  position: absolute;
  content: none;
  width: 100%;
  height: 100%;
  background: url(../img/pr_bg.svg);
  top: 0%;
  left: 0%;
  z-index: -1;
}

.pr_contents{
  display: flex;
  margin: 5rem 0 7rem;
}

.pr_content{
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  width: calc((100% - 20px * 2) / 3);
  border: 1px solid #003C31;
}

.pr_content:nth-child(3n){
  margin-right: 0;
}

.pr_content_subtitle{
  text-align: center;
  font-family: "Noto Serif JP", serif;
  padding: 1rem 0;
}

.pr_content_title{
  font-family: "Noto Serif JP", serif;
  font-size: 1.5rem;
  background: #003C31;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}

.pr_content_quote{
  font-family: "Noto Serif JP", serif;
  text-align: center;
}

.pr_content_text{
  margin: 1rem 1rem 2rem;
  flex-grow: 1;
}

.pr_content_cta{
  margin: auto 1rem 0;
}

.pr_content_cta_inner{
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
  color: #fff;
  padding: 1rem ;
  margin-bottom: 1.5rem;
}

.pr_content_cta01{
  background: #003C31;
}

.pr_content_cta02{
  background: linear-gradient(270deg, #BB9636 0%, #E0B953 50.79%, #BB9636 100%);
}

@media screen and (max-width: 768px) {
  .pr_contents{
    display: block;
  }
  .pr_content{
    width: 100%;
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

#topic {
  width: 100%;
	margin:0;
  padding-top: 100px;
  padding-bottom: 120px;
  position: relative;
}
#topic::after {
  position: absolute;
  content: "";
  background: url(../img/bk.png) no-repeat center/cover;
  width: 100%;
  height: 55.073%;
  top: 0%;
  left: 0%;
  z-index: -1;
}
#topic .topic-content {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 80px;
}
#topic .topic-content .topic-img {
  width: 50%;
}
#topic .topic-content .topic-img img {
  width: 80.357%;
}
#topic .topic-content .topic-text {
  width: 50%;
  padding-top: 40px;
  padding-left: 60px;
  padding-right: 70px;
}
#topic .topic-content .topic-text .p-top {
  margin-bottom: 20px;
}
#topic .topic-content .topic-text .p-bottom {
  margin-top: 20px;
}
#topic .topic-content .topic-text .p24 {
  margin-top: 10px;
  margin-bottom: 10px;
}
#topic .topic36 {
  width: 100%;
  text-align: center;
  margin-top: 51px;
}
#topic .topic36 .p36 {
  font-family: "Noto Serif JP", serif;
  font-size: 36px;
}
#topic .topic-img02 {
  width: 30%;
  text-align: center;
  margin-top: 105px;
  margin-bottom: 80px;
}
#topic .topic-img02 img {
  width: 100%;
}
#topic .topic-last-text {
  width: 71.4285%;
  margin: auto;
  text-align: left;
}
#topic .topic-last-text .padding-top-p {
  padding-top: 28.8px;
}
#topic .topic-last-text .padding-bottom-p {
  margin-bottom: 28.8px;
}

@media screen and (max-width: 768px) {
  #topic {
    padding-top: 40px;
    padding-bottom: 64px;
  }
  #topic::after {
    height: 45%;
  }
  #topic .topic-content {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
  }
  #topic .topic-content .topic-img {
    width: 100%;
	  text-align:center;
  }
  #topic .topic-content .topic-img img {
    width: 70%;
    margin: auto;
  }
  #topic .topic-content .topic-text {
    width: 100%;
    padding-top: 30px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #topic .topic36 {
    margin-top: 40px;
  }
  #topic .topic36 .p36 {
    font-size: 20px;
  }
  #topic .topic-img02 {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 30px;
  }
  #topic .topic-img02 img {
    width: 80%;
  }
  #topic .topic-last-text {
    width: 100%;
    margin-top: 40px;
  }
}
#point {
  width: 100%;
  padding-bottom: 120px;
  counter-reset: number 0;
  position: relative;
}
#point::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 60, 49, 0.05);
  -webkit-clip-path: polygon(100% 2%, 100% 70%, 44% 100%, 0 100%, 0 56%);
          clip-path: polygon(100% 2%, 100% 70%, 44% 100%, 0 100%, 0 56%);
  top: 0%;
  left: 0%;
}
#point .point-contents-right {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 100px;
}
#point .point-contents-right .point-content-right-text {
  width: 45%;
  padding-top: 40px;
}
#point .point-contents-right .point-content-right-text p {
  width: 82.14%;
}
#point .point-contents-right .point-content-right-img {
  width: 45%;
}
#point .point-contents-right .point-content-right-img img {
  width: 100%;
}
#point .point-contents-left {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 100px;
}
#point .point-contents-left .point-content-left-img {
  width: 45%;
}
#point .point-contents-left .point-content-left-img img {
  width: 100%;
}
#point .point-contents-left .point-content-left-text {
  width: 45%;
  padding-top: 40px;
  padding-left: 10px;
}
#point .point-contents-left .point-content-left-text p {
  width: 82.14%;
}

.no-h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  letter-spacing: 0.01em;
  line-height: 160%;
  margin-bottom: 47px;
  position: relative;
}
.no-h3::after {
  position: absolute;
  counter-increment: number 1;
  content: "0" counter(number);
  font-size: 120px;
  font-family: "Noto Serif JP", serif;
  color: rgba(0, 60, 49, 0.1);
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
}

@media screen and (max-width: 768px) {
  #point {
    width: 100%;
    padding-bottom: 120px;
    counter-reset: number 0;
    position: relative;
  }
  #point::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 60, 49, 0.05);
    -webkit-clip-path: polygon(100% 2%, 100% 70%, 44% 100%, 0 100%, 0 56%);
            clip-path: polygon(100% 2%, 100% 70%, 44% 100%, 0 100%, 0 56%);
    top: 0%;
    left: 0%;
  }
  #point .title-text .title-tag {
    width: 80.625%;
  }
  #point .point-contents-right {
    flex-direction: column-reverse;
    justify-content: center;
  }
  #point .point-contents-right .point-content-right-text {
    width: 100%;
  }
  #point .point-contents-right .point-content-right-text p {
    width: 100%;
  }
  #point .point-contents-right .point-content-right-img {
    width: 100%;
	  text-align:center;
  }
  #point .point-contents-right .point-content-right-img img {
    width: 100%;
    margin: auto;
  }
  #point .point-contents-left {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
  }
  #point .point-contents-left .point-content-left-img {
    width: 100%;
	  text-align:center;
  }
  #point .point-contents-left .point-content-left-img img {
    width: 90%;
    margin: auto;
  }
  #point .point-contents-left .point-content-left-text {
    width: 100%;
    padding-left: 0px;
  }
  #point .point-contents-left .point-content-left-text p {
    width: 100%;
  }
  .no-h3 {
    font-size: 18px;
    margin-bottom: 30px;
  }
  .no-h3::after {
    font-size: 60px;
  }
}
#recommend {
  width: 100%;
	margin:0;
  padding-top: 60px;
  padding-bottom: 60px;
  background: url(../img/company-bk.png) no-repeat center/cover;
}
#recommend .title-text-white {
  width: 100%;
  color: white;
  text-align: center;
}
#recommend .title-text-white .title-tag-white {
  width: 252px;
  margin: auto;
  font-family: "Noto Serif JP", serif;
  line-height: 160%;
  margin-bottom: 20px;
  border: white 1px solid;
}
#recommend .title-text-white .h2-title-white {
  font-family: "Noto Serif JP", serif;
  line-height: 160%;
  letter-spacing: 1px;
  font-size: 36px;
  margin-bottom: 30px;
  position: relative;
}
#recommend .title-text-white .h2-title-white::after {
  position: absolute;
  content: "";
  border-bottom: 1px #FFF dashed;
  width: 680px;
  height: 1px;
  bottom: -20px;
  left: 19%;
}
#recommend .title-text-white .title-sub-tag {
  color: #FFF;
}
#recommend .p-recommend {
  width: 71.4285%;
  margin: auto;
  margin-bottom: 61px;
  color: white;
  margin-top: 39px;
}
#recommend .p-tyuui {
  width: 71.4285%;
  margin: auto;
  font-size: 10px;
  color: #959595;
}

@media screen and (max-width: 768px) {
  #recommend {
    padding-top: 40px;
    padding-bottom: 10px;
  }
  #recommend .title-text-white .title-tag-white {
    width: 220px;
    font-size: 14px;
    margin-bottom: 10px;
  }
  #recommend .title-text-white .h2-title-white {
    font-size: 22px;
    margin-bottom: 30px;
  }
  #recommend .title-text-white .h2-title-white::after {
    width: 100%;
    left: 0%;
  }
  #recommend .p-recommend {
    width: 100%;
    margin-bottom: 34px;
    margin-top: 30px;
  }
  #recommend .p-tyuui {
    width: 100%;
    margin: auto;
    font-size: 10px;
    color: white;
  }
}
#company {
  width: 100%;
  padding-top: 120px;
  padding-bottom: 120px;
  position: relative;
}
#company::after {
  position: absolute;
  content: "";
  background: linear-gradient(291.62deg, #F2F2F2 0%, #F8F8F8 36.18%, #FDFDFD 68.16%, #FFFFFF 100.45%, #FFFFFF 100.46%);
  width: 100%;
  height: 28%;
  top: 0%;
  left: 0%;
  z-index: -2;
}
#company .company-top {
  width: 100%;
}
#company .company-top .inner .company-title {
  position: relative;
  width: 100%;
}
#company .company-top .inner .company-title::after {
  position: absolute;
  counter-increment: title 1;
  content: "Builder's 0" counter(title);
  font-family: "Noto Serif JP", serif;
  font-size: 100px;
  color: rgba(0, 60, 49, 0.05);
  width: 100%;
  height: 10%;
  top: 0;
  left: 0;
}
#company .company-top .inner .company-title p {
  font-size: 24px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.01em;
  line-height: 160%;
}
#company .company-top .inner .company-title h3 {
  font-size: 48px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.01em;
  line-height: 160%;
  margin-top: 11px;
  margin-bottom: 60px;
}
#company .company-top .inner .company-contents {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
#company .company-top .inner .company-contents .company-content-img {
  text-align: center;
  width: 46%;
}
#company .company-top .inner .company-contents .company-content-img img {
  width: 100%;
  margin-bottom: 10px;
}
#company .company-top .inner .company-contents .company-content-img a {
  font-size: 10px;
}
#company .company-top .inner .company-contents .company-content-text {
  width: 46%;
  padding-top: 53px;
}
#company .company-top .inner .company-contents .company-content-select {
  width: 31%;
  margin-top: 60px;
  padding-bottom: 45px;
  text-align: center;
  box-shadow: 4px 4px 8px rgba(0, 60, 49, 0.08);
}
#company .company-top .inner .company-contents .company-content-select .green-p {
  font-size: 24px;
  font-family: "Noto Serif JP", serif;
  line-height: 160%;
  letter-spacing: 1px;
  color: white;
  padding-top: 30px;
  padding-bottom: 62px;
  margin-bottom: 20px;
  position: relative;
}
#company .company-top .inner .company-contents .company-content-select .green-p::after {
  position: absolute;
  content: "";
  background-color: #003C31;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 62%, 50% 100%, 0% 62%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 62%, 50% 100%, 0% 62%);
  z-index: -1;
}
#company .company-top .inner .company-contents .company-content-select .p36 {
  font-size: 36px;
  font-family: "Noto Serif JP", serif;
}
#company .company-top .inner .company-contents .company-content-select .p36-center {
  padding-top: 30px;
}
#company .company-top .inner .company-contents .company-content-select .p-icon {
  text-align: left;
  padding-left: 30%;
  position: relative;
}
#company .company-top .inner .company-contents .company-content-select .p-icon-padding {
  text-align: left;
  padding-left: 30%;
  position: relative;
	padding-top:40px;
}
#company .company-top .inner .company-contents .company-content-select .p-icon::after {
  position: absolute;
  content: "";
  background: url(../img/p-icon.svg) no-repeat center/cover;
  width: 20px;
  height: 20px;
  top: 20%;
  left: 15%;
}
#company .company-top .inner .company-contents .company-content-select .p-icon-padding::after {
  position: absolute;
  content: "";
  background: url(../img/p-icon.svg) no-repeat center/cover;
  width: 20px;
  height: 20px;
  top: 65%;
  left: 15%;
}
#company .company-top .inner .btn {
  margin-top: 80px;
  text-align: center;
  margin-bottom: 25px;
}
#company .company-top .inner .btn a {
  color: #FFF;
  padding: 25px 106px;
  background: linear-gradient(270deg, #BB9636 0%, #E0B953 50.79%, #BB9636 100%);
}
#company .company-top .inner .btn a:hover {
  color: #BB9636;
  border: #BB9636 1px solid;
  background: white;
}
#company .company-contents-bk {
  width: 100%;
  padding-top: 190px;
}
#company .company-contents-bk .company-contents {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
#company .company-contents-bk .company-contents .reason-content {
  width: 31%;
  margin-top: 80px;
  margin-bottom: 100px;
}
#company .company-contents-bk .company-contents .reason-content .reason-no {
  text-align: center;
  width: 100%;
  margin-bottom: 70px;
  position: relative;
}
#company .company-contents-bk .company-contents .reason-content .reason-no::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #000;
  bottom: -40px;
  left: 0%;
}
#company .company-contents-bk .company-contents .reason-content .reason-no .reason-no-green {
  width: 100px;
  height: 100px;
  margin: auto;
  font-size: 42px;
  padding-top: 10px;
  color: #003C31;
  font-family: "Noto Serif JP", serif;
  border: 1px solid #003C31;
  border-radius: 200px;
}
#company .company-contents-bk .company-contents .reason-content .reason-text .p-h4 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 30px;
  text-align: center;
}
#company .company-contents-bk .btn {
  text-align: center;
  margin-top: 105px;
}
#company .company-contents-bk .btn a {
  font-family: "Noto Sans JP", sans-serif;
  padding: 25px 115px;
  background: linear-gradient(270deg, #BB9636 0%, #E0B953 50.79%, #BB9636 100%);
  color: white;
}
#company .company-contents-bk .btn a:hover {
  color: #BB9636;
  border: #BB9636 1px solid;
  background: white;
}

.compay-title-text {
  width: 100%;
  text-align: center;
}
.compay-title-text .h2-company-title {
  font-size: 36px;
  font-family: "Noto Serif JP", serif;
  line-height: 180%;
  letter-spacing: 0.01em;
}
.compay-title-text .title-sub-tag {
  color: #003C31;
  font-family: "Marcellus", serif;
}

.works-content-left li {
  width: 50%;
  margin-top: 70px;
}
.works-content-left li .story-content-right-img {
  width: 98%;
}
.works-content-left .works-content-text {
  width: 45%;
}

.works-content-right li {
  width: 50%;
  margin-top: 60px;
}
.works-content-right li .story-content-right-img {
  width: 98%;
  margin-left: 2%;
}
.works-content-right .works-content-text {
  width: 45%;
}

.slider-text {
  text-align: center;
  font-size: 10px;
}

.works-content-text .p-h4 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 180%;
  letter-spacing: 3px;
  font-size: 36px;
  margin-bottom: 40px;
  text-align: left;
}

.voice-title {
  margin-top: 100px;
  margin-bottom: 20px;
}

.voice-contents {
  display: flex;
  width: 100%;
  margin-top: 60px;
  border: 1px solid #EFEFEF;
  box-shadow: drop-shadow(4px 4px 8px rgba(0, 60, 49, 0.2));
  padding: 60px;
}
.voice-contents .voice-content-img {
  width: 31.428%;
  margin: auto;
}
.voice-contents .voice-content-text {
  width: 68.571%;
}
.voice-contents .voice-content-text .voice-title-p {
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  line-height: 180%;
  letter-spacing: 1px;
  margin-bottom: 30px;
  position: relative;
}
.voice-contents .voice-content-text .voice-title-p::after {
  position: absolute;
  content: "";
  width: 364px;
  height: 1px;
  background-color: #003C31;
  bottom: -10px;
  left: 0%;
}
.voice-contents .voice-content-text a {
  float: right;
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  #company {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #company::after {
    height: 26.5%;
  }
  #company .company-top .inner .company-title::after {
    font-size: 48px;
  }
  #company .company-top .inner .company-title p {
    font-size: 16px;
  }
  #company .company-top .inner .company-title h3 {
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 28px;
  }
  #company .company-top .inner .company-contents {
    flex-direction: column;
    justify-content: center;
  }
  #company .company-top .inner .company-contents .company-content-img {
    text-align: center;
    width: 100%;
  }
  #company .company-top .inner .company-contents .company-content-text {
    width: 100%;
    padding-top: 53px;
  }
  #company .company-top .inner .company-contents .company-content-select {
    width: 100%;
    margin-top: 30px;
    padding-bottom: 30px;
  }
  #company .company-top .inner .company-contents .company-content-select .green-p {
    font-size: 20px;
    padding-top: 16px;
    padding-bottom: 32px;
  }
  #company .company-top .inner .company-contents .company-content-select .p36 {
    font-size: 20px;
  }
  #company .company-top .inner .company-contents .company-content-select .p36-center {
    padding-top: 10px;
  }
  #company .company-top .inner .btn {
    margin-top: 80px;
    text-align: center;
    margin-bottom: 25px;
  }
  #company .company-top .inner .btn a {
    font-size: 16px;
    padding: 15px 45px;
    background: linear-gradient(270deg, #BB9636 0%, #E0B953 50.79%, #BB9636 100%);
  }
  #company .company-top .inner .btn a:hover {
    color: #BB9636;
    border: #BB9636 1px solid;
    background: white;
  }
  #company .company-contents-bk {
    padding-top: 40px;
  }
  #company .company-contents-bk .company-contents {
    flex-direction: column;
    justify-content: center;
  }
  #company .company-contents-bk .company-contents .reason-content {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  #company .company-contents-bk .company-contents .reason-content .reason-no {
    margin-bottom: 60px;
  }
  #company .company-contents-bk .company-contents .reason-content .reason-no::after {
    bottom: -30px;
  }
  #company .company-contents-bk .company-contents .reason-content .reason-no .reason-no-green {
    width: 60px;
    height: 60px;
    margin: auto;
    font-size: 34px;
    padding-top: 0px;
    padding-bottom: 5px;
  }
  #company .company-contents-bk .company-contents .reason-content .reason-text .p-h4 {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 30px;
    text-align: center;
  }
  #company .company-contents-bk .btn {
    text-align: center;
    margin-top: 105px;
  }
  #company .company-contents-bk .btn a {
    font-family: "Noto Sans JP", sans-serif;
    padding: 15px 70px;
    background: linear-gradient(270deg, #BB9636 0%, #E0B953 50.79%, #BB9636 100%);
    color: white;
	  font-size:16px;
  }
  #company .company-contents-bk .btn a:hover {
    color: #BB9636;
    border: #BB9636 1px solid;
    background: white;
  }
  .compay-title-text {
    width: 100%;
    text-align: center;
  }
  .compay-title-text .h2-company-title {
    font-size: 20px;
  }
  .works-content-left li {
    width: 100%;
    margin-top: 30px;
  }
  .works-content-left li .story-content-right-img {
    width: 100%;
  }
  .works-content-left .works-content-text {
    width: 100%;
  }
  .works-content-right li {
    width: 100%;
    margin-top: 30px;
  }
  .works-content-right li .story-content-right-img {
    display: none;
  }
  .works-content-right .works-content-text {
    width: 100%;
  }
  .slider-text {
    text-align: center;
    font-size: 10px;
  }
  .works-content-text .p-h4 {
    letter-spacing: 1px;
    font-size: 18px;
    margin-bottom: 30px;
  }
  .company-contents .story-content-right-img {
    margin-top: 40px;
  }
  .voice-title {
    margin-top: 100px;
    margin-bottom: 20px;
  }
  .voice-contents {
    flex-direction: column;
    margin-top: 30px;
    padding: 20px;
  }
  .voice-contents .voice-content-img {
    width: 40%;
    margin: 20px auto;
  }
  .voice-contents .voice-content-img img {
    width: 100%;
  }
  .voice-contents .voice-content-text {
    width: 100%;
  }
  .voice-contents .voice-content-text .voice-title-p {
    font-size: 18px;
    margin-bottom: 40px;
    text-align: center;
  }
  .voice-contents .voice-content-text .voice-title-p::after {
    width: 95%;
  }
  .voice-contents .voice-content-text a {
    float: right;
    margin-top: 30px;
  }
}
#builder {
  width: 100%;
	margin:0;
  padding-top: 85px;
  padding-bottom: 120px;
  background-color: #F2F5F5;
}
#builder .builder-contents {
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#builder .builder-contents .builder-content {
  border: #000 1px solid;
  background-color: white;
  padding: 20px;
  margin-top: 32px;
}
#builder .builder-contents .builder-content .builder-no {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #003C31;
  margin-bottom: 10px;
}
#builder .builder-contents .builder-content .builder-name {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 30px;
}
#builder .builder-contents .builder-content .builder-btn {
  text-align: center;
	margin-bottom:16px;
}
#builder .builder-contents .builder-content .builder-btn a {
  padding: 16px 65px;
  color: white;
  background: linear-gradient(270deg, #BB9636 0%, #E0B953 50.79%, #BB9636 100%);
}
#builder .builder-contents .builder-content .builder-btn a:hover {
  color: #BB9636;
  border: #BB9636 1px solid;
  background: white;
}

@media screen and (max-width: 768px) {
  #builder {
    padding-top: 40px;
    padding-bottom: 25px;
  }
  #builder .title-text .title-tag {
    width: 250px;
  }
	#builder .builder-contents {
		width: 100%;
		margin:auto;
		margin-top: 30px;
		flex-direction:column;
  }
  #builder .builder-contents .builder-content {
    padding: 23px;
	  margin:auto;
    margin-top: 20px;
    width: 100%;
  }
  #builder .builder-contents .builder-content .builder-no {
    font-size: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
  }
  #builder .builder-contents .builder-content .builder-name {
    font-size: 18px;
    margin-bottom: 28px;
  }
  #builder .builder-contents .builder-content .builder-btn {
    text-align: center;
    padding-bottom: 0px;
  }
  #builder .builder-contents .builder-content .builder-btn a {
    padding: 14px 90px;
    font-size: 14px;
  }
}
#area {
  padding-top: 80px;
	margin:0;
  padding-bottom: 55px;
  background: url(../img/area.png) no-repeat center/cover;
}
#area .area-contents {
  padding-top: 48px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
}
#area .area-contents .area-content {
  display: flex;
  flex-direction: column;
  width: 320px;
  padding: 20px;
  margin-top: 32px;
  background-color: white;
}
#area .area-contents .area-content .area-title {
  flex: 1;
  height: 100%;
  min-height: 40px;
  text-align: center;
  font-size: 24px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 1px;
  margin-bottom: 30px;
}
#area .area-contents .area-content .area-img {
  flex: 2;
  height: 100%;
  min-height: 180px;
  width: 100%;
  margin-bottom: 20px;
}
#area .area-contents .area-content .area-img img {
  width: 100%;
}
#area .area-contents .area-content .area-text {
  flex: 3;
  height: 100%;
  min-height: 0%;
  margin-bottom: 59px;
}
#area .area-contents .area-content .area-btm {
  max-height: 60px;
}
#area .area-contents .area-content .area-btm a {
  padding: 15px 10px;
  color: white;
  background: linear-gradient(270deg, #BB9636 0%, #E0B953 50.79%, #BB9636 100%);
}
#area .area-contents .area-content .area-btm a:hover {
  color: #BB9636;
  border: #BB9636 1px solid;
  background: white;
}

.h2-big {
  font-size: 48px;
}

@media screen and (max-width: 768px) {
  .h2-big {
    font-size: 22px;
  }
  #area {
    padding-top: 35px;
    padding-bottom: 35px;
  }
  #area .title-text .title-tag {
    width: 250px;
  }
  #area .area-contents {
    padding-top: 30px;
  }
  #area .area-contents .area-content {
    display: flex;
    flex-direction: column;
    width: 300px;
    margin: auto;
    margin-top: 30px;
  }
  #area .area-contents .area-content .area-btm {
    max-height: 60px;
	  text-align:center;
	  text-align:center;
  }
  #area .area-contents .area-content .area-btm a {
    padding: 15px 5px;
	  text-align:center;
    font-size: 14px;
    color: white;
    background: linear-gradient(270deg, #BB9636 0%, #E0B953 50.79%, #BB9636 100%);
  }
  #area .area-contents .area-content .area-btm a:hover {
    color: #BB9636;
    border: #BB9636 1px solid;
    background: white;
  }
}/*# sourceMappingURL=style.css.map */

.area-items{
  justify-content: space-between;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* justify-content: center; */
  overflow: hidden;
  margin: 2rem 0;
}

.area-item-child-title{
  font-size: 1.5rem;
  border-bottom: 1px solid #000;
  margin-bottom: 1rem;
}

.area-item-child-inners{
  margin-left: 1rem;
}

.area-item-child-inner{
  width: 30%;
  margin: 0.5rem;
  box-sizing: border-box;
}

.area-item-child-inner a{
  font-size: 1rem;
  position: relative;
  padding-left: 1.5rem;
  font-weight: 500;
  display: block;
}

.area-item-child-inner a::before{
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 9px;
  height: 9px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
}

@media screen and (max-width: 768px) {
  .area-item-child-inner{
    width: 100%;
  }
  .area-item-child-title{
    margin-bottom: 2rem;
  }
  .area-items {
    display: block;
  }
}