:root{
  --custom-width:width:100vw;
}
html {
  font-family: "Noto Sans JP", sans-serif;
  width: var(--custom-width);
  font-size: clamp(16px, 1.8vw, 64px);
  list-style: none;
}

.background{
    background-image: url(../images/top-background.svg);
    background-position: center;
    background-size: contain;
    width: 100vw;
    height: 100vh;
    position: relative;
    margin: 12vh auto;
}
.wrap{
  max-width: 100%;
  overflow: hidden;
}
.header{
  display: flex;
  justify-content: space-between;
  width: 100vw;
  padding: 3vh;
  position: fixed;
  background-color: #fff;
  height: fit-content;
  z-index: 1000;
  top: 0;
}
.logo{
  padding-left: 4vw;
}
.logo a img{
  width: 16vw;
}
nav{
  margin-right: 3vw;
  justify-content: center; /* 水平方向の中央 */
  align-items: center;     /* 垂直方向の中央 */
  display: inherit;
}
nav ul{
  display: flex;
  list-style: none;
}
nav ul li a{
  margin:12px 12px;
  color: #333333;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  font-size: 1vw;
}
.nav-contact-button{
  background-color: #333333;
  color: #fff;
  border-radius: 8px;
  margin:0 12px;
  padding: 12px 24px;
  font-size: 1vw;
}
.top-copy-para{
  margin: 0 0 auto 37%;
  width: fit-content;
  color: #4879BB;
  font-weight: 700;
  position: absolute;
  padding-top: calc(3vh + 154px);
  top: 0;
  left: 0;
  right: 0;
}
.top-copy{
  position: absolute;
  top: 0;
  left: -20vw;
  right: -20vw;
  margin: calc(19vh + 234px) auto;
  width: 110vw;
  height: 7.8vw;
  transform: rotate(-12deg);;
  background-color: #4879BB;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: calc(6vw - 1.6rem);
}
.top-copy-clip{
  max-width: 100vw;
}
.top-copy-para p{
  font-size: calc(4vw - 1.7rem);
  letter-spacing: 6px;
  line-height: 58px;
}
.top-copy p{
  margin: 2.4vh 0 0 40%;
  width: fit-content;
  letter-spacing: 1rem;
}
.top-copy p:last-child{
  display: none;
}
.background-image{
  background-image: url(../images/background.svg);
  background-size: cover;
  width: 100vw;
  height: max-content;
  background-position: 0vh;
}
.news{
  margin: 0 auto;
  padding-top: 240px;
}
.news-container{
  margin-top: 144px;
}
.news-container ul{
  display: flex;
  justify-content: center;
}

.news-item{
  width: 400px;
  height: 400px;
  background-color: #ffffff;
  list-style: none;
  box-shadow: -4px 4px 16px rgba(0, 0, 0, .3);
  border-radius: 12px;
}

.news-item:first-child{
  margin-right: 32px;
}
.news-item:last-child{
  margin-left: 32px;
}
.news-title{
  font-size: 20px;
  font-weight: 500;
  color: #040404;
  padding: 24px 32px 56px;
}


.news-description{
  display: flex;
  margin-left: 32px;
  align-items: center;
}
.news-description img{
  width: 40px;
  height: 40px;
  margin-right: 16px;
}
.news-description p{
  font-size: 16px;
}
.news-tag{
  color: #040404;
  font-weight: 500;
}
.news-date{
  color: #828282;
  font-weight: 500;
}

.section-head{
  width: 240px;
  position: relative;
  margin: 0 auto;
  color: #4879BB;
}

.section-head h1{
  text-align: center;
  font-size: 20px;
}

.head-line-top{
  position: absolute;
  border-top: solid 2px #4879BB;
  border-right: solid 2px #4879BB;
  height: 40px;
  width: 140px;
  top: -24px;
  right: 0;
}

.head-line-bottom{
  position: absolute;
  border-bottom: solid 2px #4879BB;
  border-left: solid 2px #4879BB;
  height: 40px;
  top: 12px;
  left: 0;
  width: 140px;
}

.section-head img{
  position: absolute;
  top: -24px;
  left: -10px;
}

/* business content  */
.business{
  margin-top: 240px;
}

.business-card-container{
  margin: 160px auto 0;
  display: flex;
  justify-content: center;
  padding-bottom: 240px;
}

.business-card-head{
  font-size: 32px;
  text-align: center;
  width: 304px;
  border-radius: 60px;
  color: #fff;
  height: 80px;
  margin: -40px auto;
  line-height: 80px;
  font-weight: 500;
}
.business-card-head1{
  background-color: #4879BB;
}
.business-card-head2{
  background-color: #D86B56;
}
.business-card{
  width: 500px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .2);
  height: 300px;
  position: relative;
  background-color: #fff;
  border-radius: 20px;
}

.business-card1{
  margin-right: 20px;
}
.business-card2{
  margin-left: 20px;
}
.business-card-description{
  font-size: 16px;
  padding: 24% 40px;
  font-weight: 500;
}
.business-card-description1{
  color: #4879BB;
}
.business-card-description2{
  color: #D86B56;
}

.business-card-button {
  font-size: 16px;
  position: absolute;
  bottom: 32px;
  right: 0;
  margin-right: 40px;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  padding: 8px 48px;
  display: inline-block; /* ボタンとしての要素を明示 */
}

.business-card-button1 {
  background: linear-gradient(to right, #4879BB, #CBF9FF);
}

.business-card-button2 {
  background: linear-gradient(to right, #ff7e5f, rgba(255,126,95,0.5));
}

.footer-container img{
  display: block;
  margin: 0 auto;
  padding-top: 80px;
}
footer{
  background-color: #333333;
}

footer nav{
  width: fit-content;
  margin: 40px auto 0;
}

footer nav ul li a{
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}
.sns-box ul{
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0 auto;
  width: fit-content;
}

.sns-box ul li:not(:first-child){
  padding-left: 24px;
}

.copy{
  text-align: center;
  color: #fff;
  font-size: 16px;
  padding: 80px 0 40px;
}
.sns-box ul li a img{
  padding-top: 40px;
}

.contact{
  background-color: #4879BB;
}
.contact-paragraph{
  font-size: 24px;
  color: #ffffff;
  text-align: center;
  padding-top: 140px;
}

.contact-button-box{
  padding: 24px 0 120px;
}

.contact-button{
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(to right, #4695FF, #CBF9FF);
  width: fit-content;
  margin: 0 auto;
  display: block;
  font-size: 40px;
  padding: 36px 102px;
  font-weight: 500;
  border-radius: 20px;
}

.section{
  margin: 12vh auto 0;
}

/* company */

.company{
  font-weight: 700;
}

.company-tbody{
  font-size: 24px;
  margin-left: 120px;
  display: block;
}

.company-tbody td{
  vertical-align: top;
}
.company-tbody td:nth-child(1){
  color: #4879BB;
  width: 145px;
}

.company-tbody td:nth-child(2){
  color: #333333;
  padding-left: 24px;
}
.company-tbody tr{
  margin-bottom: 32px;
  display: block;
}

.company-tbody tr:first-child{
  margin-top: 56px;
}

.company-tbody tr:last-child{
  margin-bottom: 56px;
}

.company-box{
  background-color: #ffffff;
  border-radius: 32px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, .2);
  margin: 80px 0 160px;
}

.company-container{
  width: 1080px;
  margin: 0 auto;
}

.company-container:first-child{
  padding-top: 240px;
}

.company-container h1{
  color: #fff;
  font-size: 40px;
  text-align: center;
  background-color: #4879BB;
  width: 1080px;
  padding: 8px 0;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, .2);
  border-radius: 40px;
}


/* event */

.event-top-image{
  width: 1200px;
  margin-bottom: 160px;
}

.event-container{
  width: 1200px;
  margin: 160px auto;
}

.event-container-anker{
  font-size: 24px;
  color: #4879BB;
  margin-bottom: 104px;
}

.event-container-anker li{
  list-style: none;
  width: 250px;
  height: 250px;
  background-color: #ffffff;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, .25);
  border-radius: 50%;
  place-items: center;
  display: block;
  margin: 8px;
}

.event-container-anker li a{
  display: flex;
  text-align: center;
  text-decoration: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #4879BB;
}

.event-block-anker-top{
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-block-anker-bottom{
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-container h1{
  font-size: 40px;
  text-align: center;
  color: #4879BB;
  margin-bottom: 104px;
}

.event-block{
  display: flex;
  margin-bottom: 64px;
}

.event-block p{
  text-align: left;
}
.event-block img{
  vertical-align: middle;
}
.event-block-padding{
  padding-right: 32px;
}

.event-block-padding-reverse{
  padding-left: 24px;
}

.reverse{
  flex-direction: row-reverse;
}
.reverse h2{
  white-space: nowrap;
}

.event-contents h2{
  font-size: 40px;
  color: #869ECF;
  text-align: left;
  margin-bottom: 24px;
}

.event-contents p{
  font-size: 20px;
  color: #333333;
  font-weight: 700;
}

.event-contents{
  margin-top: 240px;
  margin-bottom: 80px;
}

.jisseki-button{
  font-size: 24px;
  color: #ffffff;
  margin: 0 auto;
  text-align: center;
  display: block;
  width: 300px;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(to right, #4695FF, #CBF9FF);
  border-radius: 20px;
  padding: 12px 0px;
}


/* realestate */

.realestate-container{
  width: 1200px;
  margin: 0 auto 160px;
  padding-top: 50px;
}

.realestate-contents p{
  font-size: 20px;
  font-weight: 700;
  color: #333333;
}

.realestate-contents h2{
  color: #D86B56;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 32px;
}

.realestate-block{
  display: flex;
  margin-bottom: 80px;
  align-items: center;
  justify-content: center;
}


.realestate-block-padding-reverse{
  padding-left: 32px;
  text-align: left;
  width: 40%;
}

.realestate-block-padding{
  padding-right: 32px;
  text-align: left;
  width: 40%;
}

/* policies */

.policies{
  width: 936px;
  margin: 240px auto 160px;
  color: #333333;
}
.policies p{
  font-size: 20px;
  color: #333333;
}

.policies-container{
  width: 936px;
}

.policies-container p{
  width: fit-content;
  margin: 0 auto;
  line-height: 32px;
}

.policies h1{
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 96px;
}

.policies h2{
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  margin-top: 80px;
  margin-bottom: 32px;
}

.policies table{
  margin: 32px 0;
  font-size: 20px;
  width: 930px;
  border: 1px solid #3333;
  border-collapse: collapse;
}

.policies td{
  padding: 8px;
  border: 1px solid #3333;
  border-collapse: collapse;
}
.policies td:first-child{
  width: 256px;
}

.policies tr:first-child{
  font-weight: 700;
}

.policies tr{
  border: 1px solid #3333;
  border-collapse: collapse;
}

.policies-sign{
  margin-top: 80px;
  margin-bottom: 160px;
}
.policies-sign p{
  text-align: right;
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  line-height: 40px;
}
.strong{
  font-weight: 700;
  padding-top: 32px;
}
.policies-letter-space{
  letter-spacing: 1px;
}

/* form */
.form{
  margin: 0 auto;
  padding-top: 240px;
  padding-bottom: 160px;
}

.form-info h1{
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #333333;
}

.form-info p{
  font-size: 20px;
  font-weight: 700;
  color: #040404;
  width: fit-content;
  margin: 0 auto 80px;
}

.form label{
  font-size: 16px;
  font-weight: 700;
  color: #040404;
  
}
.form form{
  width: 400px;
  margin: auto;
}

.form fieldset{
  border: 1px solid #1e88e5;
  border-radius: 8px;
  color: #1e88e5;
  font-size: 16px;
  font-weight: 400;
  width: 340px;
  padding: 5px 12px 10px;
}

.wpcf7-list-item-label{
  font-weight: 500;
}
.wpcf7-form p:first-child{
  margin-bottom: 16px;
}
.wpcf7-textarea{
  width: 375px;
}

.wpcf7-submit{
  width: 400px;
  background-color: #4879BB;
  color: #ffffff;
  font-size: 20px;
  border-radius: 24px;
  padding: 16px 0px;
  margin:0 auto 40px;
  font-weight: 700;
}

.form-policy{
  width: 840px;
  background-color: #ffffff;
  border: solid 3px #4879BB;
  border-radius: 20px;
  transform: translateX(-25%);
  margin-top: 40px;
}

.form-policy h2{
  color: #4879BB;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.form-policies{
  font-size: 16px;
  color: #040404;
  padding: 8px 80px 80px;
}

.form-policies h3{
  font-size: 16px;
  font-weight: 500;
  color: #040404;
  margin: 32px 0 16px;
}

.form-policies p{
  padding-left: 40px;
}

.form-policy-title{
  padding-top: 56px;
  display: flex;
  padding-bottom: 40px;
  justify-content: center;
  align-items: center;
  position: relative;
}

.form-policy-close-button{
  width: fit-content;
  height: 48px;
  position: absolute;
  right: 40px;
  top: 40px;
}

.wpcf7-acceptance span:first-child{
  width: fit-content;
  display: block;
  margin: 20px auto 24px;
}