@charset "UTF-8";

/* decoration
--------------------------------------------*/
#content .box li a,
#about #company a {
    color: #E9332A;
    border-bottom: 1px solid #E9332A;
}

/*section title*/
h2.sub {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-weight: bold;
    font-size: clamp(80px, 6vw, 96px);
    line-height: 96px;
    color: #E9332A;
    top: clamp(10%, 34vw, 36%);
    left: calc(41vw + 80px);
}

#about h2.sub.center {
    position: relative;
    top: 0;
    left: 0;
}

@media (max-width:767px) {
    h2.sub {
        position: relative;
        left: 16px;
        top: 0;
        width: 60vw;
        font-size: clamp(48px, 6vw, 80px);
        line-height: clamp(48px, 6vw, 80px);
        gap: 0;
    }

    h2.sub.center {
        left: 50% !important;
        transform: translateX(-50%);
        width: auto;
        text-align: center;
    }
}

@media (max-width:767px) {
    #about #keyvisual h2 {
        left: 0 !important;
        transform: translateX(0);
    }
}

@media (min-width:1401px) {
    #about #keyvisual h2 {
        position: absolute;
        left: 18vw;
    }
}

@media (min-width:768px) and (max-width:1400px) {
    #about #keyvisual h2 {
        position: absolute;
        left: 14vw;
    }
}

@media (min-width:768px) and (max-width:850px) {

    #business #pagetop h2,
    #records #pagetop h2 {
        left: auto;
        right: 15px;
    }
}

@media (min-width:768px) and (max-width:880px) {
    #property #pagetop h2 {
        left: auto;
        right: 15px;
    }
}

@media (min-width:768px) and (max-width:1054px) {
    #renovation #pagetop h2 {
        left: auto;
        right: 15px;
        font-size: clamp(60px, 8vw, 80px);
    }

    #renovation h2.sub span {
        font-size: clamp(24px, 4vw, 32px);
        line-height: clamp(24px, 3vw, 32px);
    }
}

h2.sub span {
    font-size: 32px;
    line-height: 32px;
    color: #2B2118;
}

@media (max-width:767px) {
    h2.sub span {
        font-size: clamp(16px, 3vw, 32px);
    }
}

/* top
--------------------------------------------*/

section#pagetop {
    position: relative;
    /* height: calc(100vh - 13vh); */
    height: 100vh;
    padding-bottom: 17vh;
	background-color: #D8DBE2; 
}

@media (max-width:767px) {
    section#pagetop {
        padding-top: 69px;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 7vw;
        height: auto;
    }
	.pageid-0 section#pagetop {
        padding-top: 0;		
	}
}

#pagetop .typo {
    position: absolute;
    bottom: calc(15vh - 50px);
    /*dominant-baseline: text-bottom;　の代わり*/
    right: 0;
    /* font-size: 296px; */
    font-size: 13vw;
    font-weight: bold;
    color: #CED1D8;
    opacity: 0;
    animation: fadein 4s linear 0s forwards;
}

@media (max-width:767px) {
    #pagetop .typo {
        bottom: 0;
        position: relative;
        font-size: 18vw;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#pagetop .top-background {
/*     position: absolute; */
    width: 41vw;
    aspect-ratio: 1.4;
    background-size: cover;
    background-position: center;
    border-radius: 0 100px 100px 0;
/*     top: 19vh; */
/*     left: 0; */
}

@media (min-width:768px) and (max-width:1400px) {
    #pagetop .top-background {
        border-radius: 0 80px 80px 0;
    }
}

@media (max-width:767px) {
    #pagetop .top-background {
/*         position: relative; */
/*         top: 0; */
        width: calc(100vw - 7vw);
    }
}

/*subpage毎のbg*/
#news #pagetop .top-background {
    background-image: url("../img/subpage/top_bg_news.png");
}

#contact #pagetop .top-background {
    background-image: url("../img/subpage/top_bg_contact.png");
}

#about #pagetop .top-background {
    background-image: url("../img/subpage/top_bg_about.png");
    background-position: 80% 40%;
    background-size: 220%;
}

#business #pagetop .top-background {
    background-image: url("../img/subpage/top_bg_business.png");
    background-position: 40% 0;
}

#property #pagetop .top-background {
    background-image: url("../img/subpage/top_bg_property.png");
    background-position: 0 0;
}

#renovation #pagetop .top-background {
    background-image: url("../img/subpage/top_bg_renovation.png");
    background-position: 58% 0;
}

#records #pagetop .top-background {
    background-image: url("../img/subpage/top_bg_records.png");
    background-position: 58% 0;
}

/*パンくず*/
#pagetop .top-title {
    position: absolute;
    left: 5vw;
    top: calc(19vh + 29vw + 2vw);
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 16px;
    padding-left: 1.5em;
    width: 80%;
}

@media (max-width:767px) {
    #pagetop .top-title {
        left: 16px;
        top: auto;
        bottom: 11.5vw;
    }
}

#pagetop .top-title::before {
    position: absolute;
    content: '';
    top: 0;
    transform: translateY(50%);
    left: 0;
    height: 13px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #E9332A;
}

#pagetop .top-title span:nth-child(2n) {
    content: '';
    width: 16px;
    height: 1px;
    background-color: #2B2118;
}

/* @media (max-width:767px){
    #pagetop .top-title span:nth-child(5){
        width: 100%;
    }
} */

/* content
--------------------------------------------*/
#content {
    background-color: #D8DBE2;
}

.wrapper {
    padding: 0px 18vw;
}

@media (min-width:768px) and (max-width:1400px) {
    .wrapper {
        padding: 0px 14vw;
    }
}

@media (max-width:767px) {
    .wrapper {
        padding: 0px 16px;
    }
}

#content.wrapper {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

@media(max-width:1400px) {
    #content.wrapper {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width:767px) {

    #content.wrapper,
    #contact .abstract {
        padding: 64px 16px;
        width: auto;
    }

    #contact #content.wrapper,
    #contact .abstract {
        padding: 0 16px 64px 16px;
    }
}

.wrapper-single {
    padding: 0px clamp(200px, 17vw, 460px);
}

@media (min-width:768px) and (max-width:1400px) {
    .wrapper-single {
        padding: 0px clamp(100px, 14vw, 200px);
    }
}

@media (max-width:767px) {
    .wrapper-single {
        padding: 0px 16px;
    }
}

/*pager*/
/*property x350で表示バグってる*/
.pager {
    background-color: #2B2118;
    color: #FFFFFF;
    border-radius: 60px;
    width: 100%;
    padding: 24px 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* test */
.pager ul {
    flex-direction: row !important;
    justify-content: center;
    gap: 10px !important;
    padding: 0 24px;
}

@media (max-width:1024px) {
    .pager {
        width: 100%;
        padding: 24px 0;
    }
}

.pager a {
    color: #FFFFFF;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pager button {
    font-size: 20px;
    font-weight: bold;
    padding: 8px 24px;
    background-color: #2B2118;
    color: #FFFFFF;
    border: none;
}

.pager button:hover {
    color: #E9332A;
}

/* test */
/* @media (max-width:767px){ */
@media (max-width:1024px) {

    .pager button,
    .pager a.pagerbutton {
        display: none;
        width: 0;
        pointer-events: none;
    }
}

.pager button.prev {
    text-align: left;
    padding-left: 0px;
    border-right: 1px solid #FFFFFF;
}

.pager button.next {
    text-align: right;
    padding-right: 0px;
    border-left: 1px solid #FFFFFF;
}
.pager button.prev:disabled,
.pager button.next:disabled {
  color: #a7a9b0;
}

.pager button.current-page {
    color: #A7A9B0;
    cursor: default;
}

.pager .page-numbers {
    width: 32px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pager li {
    width: 32px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.pager li:hover {
    background-color: #A7A9B0;
}

.pager li.current {
    background-color: #FFFFFF;
    border-radius: 50%;
}

.pager li.current a {
    color: #E9332A;
}

.pager .dots {
    width: 8px;
}

.pager .dots::after {
    content: "-";
    width: 8px;
    background-color: #2B2118;
    color: #A7A9B0;
}

.pager .dots:hover {
    background-color: inherit;
}

.pager .page-numbers.current {
    background-color: #FFFFFF;
    color: #E9332A;
}

@media (max-width: 767px) {

    .pager ul.head li:nth-child(4),
    .pager ul.head li:nth-child(5) {
        display: none;
    }
}

@media (max-width: 767px) {

    .pager ul.tale li:nth-child(3),
    .pager ul.tale li:nth-child(4) {
        display: none;
    }
}

/* contact
--------------------------------------------*/
#contact #content.wrapper {
    gap: 0;
}


#content .contact {
    position: sticky;
    top: 40px;
    margin-top: 40px;
    /* width: clamp(213px,23%,292px);
    height: clamp(313px,18vw,427px); */
    width: 292px;
    height: 427px;
    background-image: url("../img/subpage/contact.png");
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #FFFFFF;
}

@media (max-width:767px) {
    #news #content .contact {
        max-width: 300px;
        margin-top: calc(80px - 24px);
    }
}

@media (min-width:768px) and (max-width:1400px) {
    #news #content .contact {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 3.57;
        background-image: url("../img/subpage/contact_x1400.png");
    }
}

@media (max-width:1400px) {
    #content .contact {
        width: calc(100% - 32px);
        /* test */
        /* max-width: 318px; */
        height: auto;
        margin: 0 auto;
        aspect-ratio: 0.68;
    }
}

.single #content .contact {
    position: relative;
    top: 0;
    margin-top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 3.57;
    background-image: url("../img/subpage/contact_x1400.png");
}

@media (max-width:767px) {
    .single #content .contact {
        height: 427px;
        width: 300px;
        aspect-ratio: 0.68;
        background-image: url("../img/subpage/contact.png");
    }
}

#content .contact .title {
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    text-align: center;
}

@media (max-width:767px) {
    #content .contact .title {
        font-size: 40px;
    }
}

#content .contact .title span {
    font-size: clamp(9px, 1.1vw, 16px);
    font-weight: bold;
}

@media (max-width:767px) {
    #content .contact .title span {
        font-size: 16px;
    }
}

#content .contact .information {
    width: 85%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.single #content .contact .information {
    flex-direction: row;
    justify-content: center;
}

@media (max-width:767px) {
    .single #content .contact .information {
        flex-direction: column;
    }
}

@media (min-width:768px) and (max-width:1400px) {
    #content .contact .information {
        flex-direction: row;
        gap: 4.5vw;
        justify-content: center;
        width: 90%;
    }
}

#content .contact .information .phone .number {
    font-size: clamp(23px, 1.9vw, 32px);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:767px) {
    #content .contact .information .phone {
        text-align: center;
    }

    #content .contact .information .phone .number {
        justify-content: center;
        font-size: clamp(16px, 8vw, 32px);
    }
}

#contact #content .contact .information .phone .number {
    font-size: 32px;
}


#content .contact .information .phone .number img {
    width: clamp(19px, 2vw, 26px);
    aspect-ratio: 1;
}

#content .contact .information .phone p {
    font-size: clamp(10px, 0.8vw, 14px);
}

@media (max-width:767px) {
    #content .contact .information .phone p {
        font-size: clamp(8px, 3vw, 15px);
    }
}

@media (max-width:1400px) {
    #contact #content .contact .information .phone p {
        font-size: 14px;
    }
}

#content .contact .information a.mail {
    /* width: calc(296px - 32px); */
    /* max-height: calc(75px - 32px); */
    padding: clamp(5px, 2vw, 16px) clamp(5px, 0.7vw, 16px);
    background-color: #FFFFFF;
    color: #E9332A;
    border: none;
    border-radius: 10px;
    font-size: clamp(7px, 1vw, 20px);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
}

#content .contact .information a.mail img {
    width: clamp(14px, 3vw, 21px);
    aspect-ratio: 1.25;
}

/*contact-left*/
#content .left {
    width: calc(76% - 24px);
    display: flex;
    flex-direction: column;
    gap: 80px;
    /* margin-top: 40px; */
}

#contact #content .left {
    width: calc(100% - 292px - 24px);
}

@media(max-width:1400px) {
    #contact #content .left {
        width: 100%;
        margin-top: 0px;
    }

    #content .left {
        width: 100%;
    }
}

@media (max-width:767px) {
    #content .left {
        width: 100%;
    }

    #contact #content .left {
        gap: 8px;
    }

    #news #content .left {
        width: 100%;
        /*44px*/
        align-items: center;
    }
}

/*form*/
#contact fieldset {
    visibility: hidden;
}

#contact .contact-form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#contact .contact-form dl {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

#contact .contact-form dd {
    margin-bottom: 40px;
}

#contact .contact-form dt {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    margin-bottom: 24px;
}

#contact .contact-form dt.need::after {
    content: "必須";
    display: inline-block;
    background-color: #E9332A;
    color: #FFFFFF;
    padding: 4px 8px;
    margin-left: 16px;
    border-radius: 4px;
}

#contact .contact-form dt.any::after {
    content: "任意";
    display: inline-block;
    background-color: #A7A9B0;
    color: #FFFFFF;
    padding: 4px 8px;
    margin-left: 16px;
    border-radius: 4px;
}

#contact .contact-form dd.req {
    font-size: 16px;
}

#contact .contact-form dd.address {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

#contact .contact-form dd input,
#contact .contact-form dd select,
#contact .contact-form dd textarea {
    padding: 16px;
    border-radius: 10px;
    font-size: 16px;
}

/*address button*/
#contact .contact-form dd .address_search {
    padding: 16px;
    border-radius: 10px;
    background-color: #2B2118;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    border: none;
    margin-left: 24px;
    cursor: pointer;
}

/*各input設定*/
#contact .contact-form dd input,
#contact .contact-form dd select {
    width: calc(100% - 32px);
    border: none;
    background-color: #FFFFFF;
}

#contact #content .contact-form.check dd {
    min-height: calc(1em + 37px);
}

#contact .contact-form dd input.your-name,
#contact .contact-form dd input.name-kana,
#contact #content .contact-form.check dd.your-name,
#contact #content .contact-form.check dd.name-kana {
    width: 320px;
}

@media (max-width:767px) {

    #contact .contact-form dd input.your-name,
    #contact .contact-form dd input.name-kana,
    #contact #content .contact-form.check dd.your-name,
    #contact #content .contact-form.check dd.name-kana {
        max-width: calc(100% - 32px);
    }
}

#contact .contact-form dd input.tel,
#contact .contact-form dd input.fax,
#contact #content .contact-form.check dd.tel,
#contact #content .contact-form.check dd.fax {
    width: 240px;
}

#contact .contact-form dd input.postal-code,
#contact .contact-form dd select.p-region,
#contact #content .contact-form.check dd.postal-code,
#contact #content .contact-form.check dd.p-region {
    width: 160px;
}

.contact-form dd textarea {
    width: 100%;
    height: calc(176px - 32px);
    min-height: calc(1em + 32px);
    resize: none;
    background-color: #FFFFFF;
}

/* .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    display: none !important;
} */

/*radio*/
.wpcf7-list-item {
    margin: 0;
}

.contact-form dd .requirements span.wpcf7-list-item-label {
    display: inline-block;
    padding: 16px;
    padding-right: calc(16px + 18px + 8px);
    /*padding+icon+gap*/
    background-color: #FFFFFF;
    border-radius: 10px;
    /* position: relative; */
    border: 1px solid #FFFFFF;
    background-image: url("../img/icon/radio.png");
    background-position: right 16px center;
    background-repeat: no-repeat;
}

.contact-form dd .requirements {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

@media (max-width:767px) {
    .contact-form dd .requirements {
        flex-direction: column;
    }
}

.contact-form dd .requirements input[type=radio] {
    display: none;
}

.contact-form dd .requirements label input[type="radio"]:checked+.wpcf7-list-item-label {
    border: 1px solid #E9332A;
    background-image: url("../img/icon/radio-checked.png");
}

.contact-form dd textarea,
#contact #content .contact-form.check dd.message {
    width: calc(100% - 32px);
}

/*privacy-policy*/
#contact .privacy-policy {
    background-color: #2B2118;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    border-radius: 10px;
    height: 240px;
    overflow: auto;
    padding: 40px;
    margin-top: 80px;
    line-height: 24px;
}

@media (max-width:767px) {
    #contact .privacy-policy {
        padding: 40px 20px;
        width: 100%;
    }

    #contact .privacy-policy ol {
        padding-left: 1em;
    }
}

#contact .privacy-policy h3 {
    text-align: center;
    line-height: 24px;
    display: flex;
    flex-direction: column;
}

#contact .privacy-policy h3 .eng {
    font-size: 20px;
    line-height: 24px;
    padding-top: 8px;
}

#contact .privacy-policy h3 .jp {
    font-size: 24px;
    font-weight: bold;
}

#contact .submit-check {
    display: flex;
    flex-direction: row;
    gap: 64px;
    align-items: center;
    justify-content: center;
}

@media (max-width:767px) {
    #contact .submit-check {
        gap: 32px;
    }
}

#contact .privacy-policy h4 {
    font-weight: bold;
}

#contact .submit-contact {
    display: flex;
    flex-direction: column;
    gap: 80px;
    align-items: center;
    margin-top: 48px;
}

#contact .submit-check input[type=checkbox] {
    display: none;
}

#contact .submit-check .wpcf7-list-item-label {
    padding-left: calc(16px + 24px);
    background-image: url("../img/icon/consent.png");
    background-position: left 0px center;
    background-repeat: no-repeat;
}

#contact .submit-check input[type=checkbox]:checked+.wpcf7-list-item-label {
    background-image: url("../img/icon/consent-checked.png");
}

/*submit button(funcy)*/
input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

span.wpcf7-spinner {
    display: none;
}

#contact .submit-check .fancy.wpcf7-submit {
    color: #2B2118;
    position: relative;
}

#contact .submit-check .fancy.wpcf7-submit:hover {
    color: #FFFFFF;
}

/*prev button(funcy)*/
#contact .submit-check .fancy.wpcf7-previous {
    position: relative;
    border-color: #A7A9B0;
}

#contact .submit-check .fancy.wpcf7-previous .fancy-text {
    color: #A7A9B0;
}

#contact .submit-check .fancy.wpcf7-previous::before {
    background: #A7A9B0;
}

#contact .submit-check .fancy.wpcf7-previous .top-key,
#contact .submit-check .fancy.wpcf7-previous .bottom-key-1,
#contact .submit-check .fancy.wpcf7-previous .bottom-key-2 {
    background: #D8DBE2;
}

#contact .submit-check .fancy.wpcf7-previous:hover {
    background-color: #A7A9B0;
}

#contact .submit-check .fancy.wpcf7-previous:hover .fancy-text {
    color: #FFFFFF;
}

#contact .submit-check .fancy.wpcf7-previous:hover::before {
    background-color: #FFFFFF;
}

/*contact-check*/
#contact #content .contact-form.check dd {
    padding: 16px;
    border-radius: 10px;
    font-size: 16px;
    background-color: #F3F4F6;
    overflow-wrap: break-word;
}

#contact #content .contact-form.check dd.requirements {
    display: inline-block;
    width: auto;
    margin-right: auto;
}

#contact .contact-form.check dt.any::after,
#contact .contact-form.check dt.need::after {
    visibility: hidden;
}

/*contact-complete*/
#contact #content.mail-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    /*+button margin-top:40px;*/
    margin-bottom: 120px;
}

@media (max-width:767px) {
    #contact #content.mail-complete img {
        width: 120px;
        height: 127px;
    }
}

#contact #content.mail-complete .text-complete {
    color: #E9332A;
    font-size: 36px;
    font-weight: bold;
}

@media (max-width:767px) {
    #contact #content.mail-complete .text-complete {
        font-size: 20px;
    }
}

#contact #content.mail-complete .fancy {
    margin-top: 40px;
    display: inline-block;
    position: relative;
}


/* content_news
--------------------------------------------*/
#news #content.wrapper {
    padding-top: 160px;
    padding-bottom: 120px;
}

#content ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width:767px) {
    #content ul {
        width: 100%;
    }
}

/*box設定*/
#content .box li {
    background-color: #FFFFFF;
    padding: 48px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (max-width:767px) {
    #content .box li {
        padding: 24px 16px;
        gap: 24px;
    }
}

#content .box li .title {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-start;
}

#content .box li .title time {
    font-size: 16px;
    font-weight: bold;
    color: #D8DBE2;
}

#content .box li .title h4 {
    font-size: 32px;
    font-weight: bold;
}

@media (max-width:767px) {
    #content .box li .title h4 {
        font-size: 20px;
    }
}

#content .box li .text p {
    font-size: 16px;
    line-height: 24px;
    word-break: break-all;
}

/* content_contact
--------------------------------------------*/
#contact .wrapper {
    padding-bottom: 80px;
    align-items: flex-start;
}

#contact .abstract {
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: flex-start;
	background-color: #D8DBE2;
}

@media (max-width:767px) {
    #contact .abstract {
        padding-bottom: 40px;
    }
}

#contact .abstract .title {
    display: flex;
    gap: clamp(20px, 6vw, 80px);
}

@media (max-width:767px) {
    #contact .abstract .title {
        flex-direction: column;
        gap: 32px;
    }
}

#contact .abstract h3 {
    font-size: clamp(10px, 3vw, 36px);
    font-weight: bold;
}

@media (max-width:767px) {
    #contact .abstract h3 {
        font-size: 24px;
    }
}

#contact .abstract p {
    font-size: 16px;
}

/*stepbar*/
#contact .abstract ul.stepbar {
    display: flex;
    flex-direction: row;
    gap: 32px;
    height: 55px;
    font-size: 16px;
    font-weight: bold;
    color: #A7A9B0;
    z-index: 5;
}

#contact .abstract ul.stepbar li {
    position: relative;
    padding-bottom: 16px;
}

/*line*/
#contact .abstract ul.stepbar li::after {
    position: absolute;
    content: '';
    height: 1px;
    width: 56px;
    background-color: #A7A9B0;
    bottom: 14px;
    left: 20px;
    z-index: -1;
}

#contact .abstract ul.stepbar li:last-child::after {
    visibility: hidden;
}

/*dot*/
#contact .abstract ul.stepbar li::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #A7A9B0;
    bottom: 11px;
    left: 12px;
}

/*色設定*/
#contact .abstract ul.stepbar .visited {
    color: #2B2118;
}

#contact .abstract ul.stepbar .current {
    color: #E9332A;
}

#contact .abstract ul.stepbar li.visited::after,
#contact .abstract ul.stepbar li.visited::before {
    background-color: #2B2118;
}

#contact .abstract ul.stepbar li.current::before {
    background-color: #E9332A;
}

/*contact*/
#contact #content .contact {
    position: sticky;
    top: 40px;
    margin-top: 40px;
    /* width: clamp(213px,23%,292px);
    height: clamp(313px,18vw,427px); */
    width: 292px;
    height: 206px;
    background-image: none;
    background-color: #CED1D8;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    color: #2B2118;
}

/* @media (min-width:768px) and (max-width:1400px){
    #contact #content .contact{
        width: clamp(160px,21vw,292px);
        height: auto;
        aspect-ratio: 1.4;
        gap: clamp(10px,1.2vw,24px);
    }
}
@media (max-width:1400px){
    #contact #content .contact{
        width: 100%;
    }
} */

#contact #content .contact .title p {
    font-size: 16px;
}


#contact #content .contact .information {
    width: 85%;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-top: 24px;
    border-top: 1px solid #A7A9B0;
}

/* @media (min-width:768px) and (max-width:1400px){
    #contact #content .contact .information{
        padding-top: clamp(10px,1.2vw,24px);
    }
} */

#contact #content .contact .information .phone .number {
    color: #E9332A;
}

/* @media (max-width:767px){
    #contact #content .contact .information .phone .number{
        font-size: 31px;
    }
    #contact #content .contact .information .phone{
        font-size: 14px;
    } */


/*contact-left*/
/* @media (min-width:768px) and (max-width:1400px){
    #contact #content .left{
        width: clamp(363px,42vw,663px);
    }
}
@media (min-width:768px) and (max-width:1400px){
    #contact #content.wrapper .left{
        flex-direction: row;
    }
} */

/* content_about
--------------------------------------------*/
#about .content-about {
    border-radius: 0 0 100px 0;
    padding-bottom: 120px;
}

@media (max-width:767px) {
    #about .content-about {
        border-radius: 0 0 40px 0;
    }
}

#about .content-about.curve::before {
    top: auto;
    bottom: -1px;
    left: -11px;
    z-index: 1;
    background-color: #D8DBE2;
}

#about .content-about.curve::after {
    background-color: #FFFFFF;
}

/*keyvisual*/
#about .content-about {
    display: flex;
    flex-direction: column;
    gap: 64px;
    background-color: #D8DBE2;
}

#about #keyvisual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

@media (max-width:767px) {
    #about #keyvisual {
        gap: 0;
    }
}

/* @media (min-width:768px){
    #about #keyvisual h2{
        top: 0;
        left: 14vw;
    }
}
@media (max-width:767px){
    #about #keyvisual h2{
        left: 0;
    }
} */

#about #keyvisual #bg_greeting {
    width: clamp(1008px, 65vw, 1240px);
    height: 550px;
    position: relative;
    top: 200px;
}

@media (min-width:768px) and (max-width:1400px) {
    #about #keyvisual #bg_greeting {
        width: clamp(553px, 72vw, 1008px);
        height: clamp(303px, 29vw, 550px);
    }
}

@media (max-width:767px) {
    #about #keyvisual #bg_greeting {
        width: 100%;
        height: clamp(209px, 60vw, 458px);
        top: 0;
        margin-top: 64px;
    }
}

#about #keyvisual .bg_greeting_image {
    background-image: url("../img/subpage/cont_bg_about1.png");
    background-repeat: no-repeat;
    background-position: 40% 0%;
    width: 720px;
    height: 444px;
    border-radius: 100px 0 100px 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}

@media (min-width:768px) and (max-width:1400px) {
    #about #keyvisual .bg_greeting_image {
        width: clamp(395px, 51.4vw, 720px);
        height: auto;
        aspect-ratio: 1.62;
        background-size: 248%;
    }
}

@media (max-width:767px) {
    #about #keyvisual .bg_greeting_image {
        width: 100%;
        height: auto;
        aspect-ratio: 1.62;
        background-size: 248%;
        border-radius: 40px 0 40px 0;
    }
}

#about #keyvisual .bg_greeting_overlay_left {
    background-image: url("../img/subpage/bg_greeting_overlay_left.png");
    width: 157px;
    height: 177px;
    position: absolute;
    top: 0;
    left: 21px;
}

@media (min-width:768px) and (max-width:1400px) {
    #about #keyvisual .bg_greeting_overlay_left {
        width: clamp(86px, 11vw, 157px);
        height: auto;
        aspect-ratio: 0.89;
        background-size: 100%;
    }
}

@media (max-width:767px) {
    #about #keyvisual .bg_greeting_overlay_left {
        background-image: url("../img/subpage/bg_greeting_overlay_left_x350.png");
        width: 48px;
        height: 89px;
        aspect-ratio: auto;
        left: -8px;
    }
}

#about #keyvisual .bg_greeting_overlay_right {
    background-image: url("../img/subpage/bg_greeting_overlay_right.png");
    width: 167px;
    height: 262px;
    right: 0;
    bottom: 0;
    position: absolute;
}

@media (min-width:768px) and (max-width:1400px) {
    #about #keyvisual .bg_greeting_overlay_right {
        width: clamp(92px, 12vw, 167px);
        height: auto;
        aspect-ratio: 0.64;
        background-size: 100%;
    }
}

@media (max-width:767px) {
    #about #keyvisual .bg_greeting_overlay_right {
        background-image: url("../img/subpage/bg_greeting_overlay_right_x350.png");
        width: 48px;
        height: 102px;
        aspect-ratio: auto;
        right: -8px;
    }
}

#about #keyvisual .catch {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
    z-index: 2;
}

@media (max-width:767px) {
    #about #keyvisual .catch {
        position: absolute;
        width: calc(100% - 32px);
        bottom: -40px;
    }
}

#about #keyvisual .catch span {
    color: #FFFFFF;
    font-size: 36px;
    font-weight: bold;
    padding: 16px;
    background-color: #E9332A;
    margin-right: auto;
}

@media (min-width:768px) and (max-width:1400px) {
    #about #keyvisual .catch span {
        font-size: clamp(20px, 2.5vw, 36px);
        padding: clamp(9px, 1.1vw, 16px);
    }
}

@media (max-width:767px) {
    #about #keyvisual .catch span {
        font-size: clamp(18px, 2.5vw, 20px);
        padding: clamp(8px, 1.1vw, 9px);
        letter-spacing: -1px;
    }
}

/*greeting*/
#about #greeting {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 64px;
}

#about #greeting .message {
    width: 100%;
}

#about #greeting p {
    font-size: 16px;
}

/* @media (min-width:768px) and (max-width:1400px){
    #about #greeting p{
        font-size: clamp(9px,1.1vw,16px);
    }
} */

#about #greeting .signature {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 16px;
}

@media (min-width:768px) and (max-width:1400px) {
    #about #greeting .signature {
        font-size: clamp(14px, 1.1vw, 16px);
        gap: clamp(9px, 1.1vw, 16px);
    }

    #about #greeting .signature img {
        width: clamp(140px, 11vw, 157px);
        height: auto;
        aspect-ratio: 5.06;
    }
}

/*bg-parallax*/
#about .about-parallax {
    height: 300px;
    width: 100%;
    position: relative;
}

#about .about-parallax.curve::after {
    background-color: #FFFFFF;
    clip-path: shape(from 100px 100px,
            line to 100px 0,
            arc to 0 100px of 100px 100px cw,
            close);
}

@media (max-width:767px) {
    #about .about-parallax.curve::after {
        clip-path: shape(from 40px 40px,
                line to 40px 0,
                arc to 0 40px of 40px 40px cw,
                close);
    }
}

#about .about-parallax.curve::before {
    background-color: #D8DBE2;
    clip-path: shape(from 0 0,
            line to 0 100px,
            arc to 100px 0 of 100px 100px cw,
            close);
    z-index: 1;
    border-top: 1px solid #D8DBE2;
}

@media (max-width:767px) {
    #about .about-parallax.curve::before {
        clip-path: shape(from 0 0,
                line to 0 40px,
                arc to 40px 0 of 40px 40px cw,
                close);
        z-index: 1;
        border-top: 1px solid #D8DBE2;
    }
}

#about .about-parallax .image-container {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: absolute;
    top: -150px;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#about .about-parallax img {
    height: 600px;
    width: 100%;
    position: relative;
    z-index: -1;
    object-fit: cover;

}

@media (max-width:1400px) {
    #about .about-parallax img {
        object-position: -350px;
    }
}

/*company*/
#about #company {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #FFFFFF;
}

@media (max-width:767px) {
    #about #company {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

#about #company.curve::after {
    background-color: #D8DBE2;
}

#about #company dl {
    margin-top: 64px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media (max-width:767px) {
    #about #company dl {
        margin-top: 32px;
        flex-direction: column;
    }
}

#about #company dt {
    width: 19%;
    color: #E9332A;
    border-top: 2px solid #E9332A;
    padding: 32px 0;
    font-size: 20px;
    font-weight: bold;
}

@media (min-width:768px) and (max-width:1400px) {
    #about #company dt {
        /* font-size: clamp(11px,1.4vw,20px); */
        width: 10em;
    }
}

@media (max-width:767px) {
    #about #company dt {
        width: 100%;
        padding: 24px 0 12px 0;
        border-top: 1px solid #A7A9B0;
        position: relative;
    }

    #about #company dt::before {
        position: absolute;
        content: '';
        width: 50%;
        height: 2px;
        background-color: #E9332A;
        top: -1px;
        left: 0;
    }
}

#about #company dd {
    width: 81%;
    color: #2B2118;
    border-top: 1px solid #A7A9B0;
    padding: 32px 0;
    font-size: 16px;
}

@media (min-width:768px) and (max-width:1400px) {
    #about #company dd {
        /* font-size: clamp(9px,1.1vw,16px); */
        width: calc(100% - 13em);
    }
}

@media (max-width:767px) {
    #about #company dd {
        width: 100%;
        padding: 12px 0 24px 0;
        border-top: none;
    }
}

#about #company .finance {
    width: 60%;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
}

@media (max-width:767px) {
    #about #company .finance {
        width: 100%;
    }
}

@media (min-width:768px) and (max-width:1400px) {
    #about #company .finance {
        width: 90%;
    }
}

#about #company .finance li {
    margin-right: 1em;
}

/*access*/
#access {
	background-color: #D8DBE2; 
}

#about #access {
    padding-top: 120px;
    padding-bottom: 120px;
    border-radius: 100px 0 0 0;
}

@media (max-width:767px) {
    #about #access {
        border-radius: 40px 0 0 0;
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/*googlemap*/
#about #access iframe {
    padding-top: 64px;
    max-width: 1240px;
    width: 100%;
    height: auto;
    aspect-ratio: 2.54;
}

@media (max-width:767px) {
    #about #access iframe {
        padding-top: 32px;
        aspect-ratio: 1;
    }
}

#about #access dl {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#about #access dt {
    font-size: 24px;
    font-weight: bold;
}

@media (max-width:767px) {
    #about #access dt {
        font-size: 20px;
    }
}

#about #access ul {
    list-style: disc;
    margin-left: 1.5em;
}

/* business
--------------------------------------------*/
#business .content-business {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding-bottom: calc(120px + 80px);
}

@media (max-width:767px) {
    #business .content-business {
        gap: 72px;
        padding-bottom: 0;
    }
}

#business #content .fade-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

/*image*/
#business #content .fade-container .bus-image {
    height: auto;
    /*360~400*/
    width: 40%;
    aspect-ratio: 1.415;
    background-position: center;
    background-size: cover;
    border-radius: 0 100px 0 100px;
    position: absolute;
    top: 0;
    z-index: 2;
    transition-delay: 0.5s;
}

@media (min-width:1400px) {
    #business #content .fade-container .bus-image.right {
        left: 60%;
    }

    #business #content .fade-container .bus-image.left {
        left: 0%;
    }
}

@media (min-width:768px) and (max-width:1399px) {
    #business #content .fade-container .bus-image {
        width: 35vw;
        border-radius: 0 100px 0 100px;
    }

    #business #content .fade-container .bus-image.right {
        right: 0px;
    }

    #business #content .fade-container .bus-image.left {
        left: 0px;
    }
}

@media (max-width:767px) {
    #business #content .fade-container .bus-image {
        width: 69vw;
        border-radius: 40px 0 40px 0;
    }

    #business #content .fade-container .bus-image.right {
        right: -16px;
    }

    #business #content .fade-container .bus-image.left {
        left: -16px;
    }
}


#business #content .fade-container .bus-image.num01 {
    background-image: url("../img/subpage/cont_business_01.png");
}

#business #content .fade-container .bus-image.num02 {
    background-image: url("../img/subpage/cont_business_02.png");
}

#business #content .fade-container .bus-image.num03 {
    background-image: url("../img/subpage/cont_business_03.png");
}

#business #content .fade-container .bus-image.num04 {
    background-image: url("../img/subpage/cont_business_04.png");
}

/*text*/
#business #content .fade-container .text {
    /* test */
    width: calc(60% + 96px);
    /* width: 60%;padding*2 */

    padding: 50px;
    margin: 30px;
    margin-top: calc(80px + 30px);
    border-radius: 100px 0 100px 0;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    transition: 1s;
    transition-delay: 0.5s;
    position: relative;
}

@media (min-width:1400px) {
    #business #content .fade-container .text.right {
        left: 40%;
        padding-left: calc(136px - 50px);
    }

    #business #content .fade-container .text.left {
        left: 0%;
        padding-right: calc(136px - 50px);
    }
}

@media (min-width:768px) and (max-width:1399px) {
    #business #content .fade-container .text {
        margin-top: 22vw;

        /* width: calc(100% - 80px - 136px - 16px);- padding -広い方padding - imageズレてる分 */
        width: calc(100% - 80px);
    }

    #business #content .fade-container .text.right {
        /* test */
        /* left: 32px; */
        padding-left: calc(136px - 50px);
    }

    #business #content .fade-container .text.left {
        left: 0%;
        padding-right: calc(136px - 50px);
    }
}

@media (max-width:767px) {
    #business #content .fade-container .text {
        border-radius: 40px 0 40px 0;
        padding: 8px;
        margin: 8px;
        padding-top: calc(20vw - 8px);
        padding-bottom: calc(80px - 8px);
        margin-top: calc(30vw + 8px);
        /* test */
        /* width: calc(100% - 32px); */
        width: 100%;

    }
}


/*active*/
@media (min-width:1400px) {
    #business #content .fade-container.active .text {
        padding: 80px;
        margin: 0;
        margin-top: 80px;
    }

    #business #content .fade-container.active .text.right {
        /* test */
        margin-left: -96px;
        /* left: calc(40% - 56px); */
        padding-left: 136px;
    }

    #business #content .fade-container.active .text.left {
        /* test */
        /* left: 0%; */
        padding-right: 136px;
    }
}

@media (min-width:768px) and (max-width:1399px) {
    #business #content .fade-container.active .text {
        padding: 80px;
        margin: 0;
        margin-top: calc(22vw - 30px);
    }

    #business #content .fade-container.active .text.right {
        /* test */
        margin-left: auto;
        /* left: 16px; */
        padding-left: 136px;
    }

    #business #content .fade-container.active .text.left {
        padding-right: 136px;
    }
}

@media (max-width:767px) {
    #business #content .fade-container.active .text {
        margin: 0;
        padding: 16px;
        padding-top: 20vw;
        padding-bottom: 80px;
        margin-top: 30vw;
    }
}

/*text*/
#business #content .fade-container .title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

#business #content .fade-container .number {
    font-size: 32px;
    font-weight: bold;
}

@media (max-width:767px) {
    #business #content .fade-container .number {
        font-size: 24px;
    }
}

#business #content .fade-container .title-eng {
    font-size: 20px;
    font-weight: bold;
}

@media (max-width:767px) {
    #business #content .fade-container .title-eng {
        font-size: 16px;
    }
}

#business #content .fade-container .title-jp {
    font-size: 32px;
    font-weight: bold;
    color: #E9332A;
}

#business #content .fade-container p {
    font-size: 16px;
    line-height: 24px;
}

@media (max-width:767px) {
    #business #content .fade-container .title-jp {
        font-size: 24px;
    }
}

/*fancy*/
#business #content .fade-container .fancy {
    position: relative;
    width: 14em;
    text-align: right;
    height: auto;
}

#business .fancy {
    color: #2B2118;
    width: 16em;
}

#business .fancy .top-key,
#business .fancy .bottom-key-1,
#business .fancy .bottom-key-2 {
    background-color: #FFFFFF;
}

@media (max-width:767px) {
    #business #content .fade-container .text {
        align-items: center;
    }

    .fancy::before {
        left: 1.5em;
    }
}

/* property
--------------------------------------------*/
#property #content.wrapper {
    flex-direction: column;
    gap: 0px;
    padding-bottom: 120px;
}

/*category-selector*/
.category-selector {
    background-color: #A7A9B0;
    color: #2B2118;
    border-radius: 50px;
    width: calc(100% - 20px);
    padding: 24px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 63px;
}

@media (max-width:767px) {
    .category-selector {
        padding: 24px 16px;
        width: calc(100% - 32px);
        border-radius: 24px;
    }
}

.category-selector a {
    color: #2B2118;
}

.category-selector .outer {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0 16px;
}

@media (min-width:768px) {
    .category-selector .outer {
        padding: 0 32px;
    }
}

.category-selector ul {
    display: flex;
    flex-direction: row !important;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px !important;
    width: auto !important;
}

@media (min-width:768px) and (max-width:1400px) {
    .category-selector ul {
        gap: 1vw !important;
    }
}

/* @media (max-width:767px) {
    .category-selector ul {
        
        
    }
} */

.category-selector li {
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #CED1D8;
    font-size: 16px;
    font-weight: bold;
}

@media (max-width:767px) {
    .category-selector li {
        font-size: 14px;
    }
}

.category-selector li.current {
    background-color: #FFFFFF;
    color: #E9332A;
}



/*pager 個別設定*/
@media (min-width:768px) {
    #property .pager {
        margin-top: 80px;
    }
}

/*property-list*/
.property-list {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* gap: 40px;
    row-gap: 64px; */
    column-gap: 40px;
}

.property-list .spacer {
    content: "";
    display: block;
    width: 30%;
    min-width: 248px;
    max-width: 400px;
    flex: 30%;
}

@media (max-width:767px) {
    .property-list {
        flex-direction: column;
        row-gap: 40px;
    }
}

.property-list .property-slider-content {
    width: 30%;
    min-width: 248px;
    max-width: 400px;
    margin: 32px 0;
    flex: 30%;
    position: relative;
    border-radius: 16px;
    background-color: #FFFFFF;
}

.property-list .property-slider-content:nth-last-of-type(3) {
    margin: 32px 0;
    /* margin-top: 32px; */
}

@media (max-width:767px) {
    .property-list .property-slider-content {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .property-list .property-slider-content:nth-last-of-type(3) {
        margin-top: 0;
    }
}

/*上半分*/
.property-slider-content p.category {
    /* test */
    /* width: calc(144px - 32px); */
    /* padding: 16px; */
    width: 144px;
    padding: 16px 0;

    background-color: #D8DBE2;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 0 16px;
    font-size: clamp(12px, 0.9vw, 16px);
    text-align: center;
    font-weight: bold;
    color: #E9332A;
}

@media (min-width:768px) and (max-width:1400px) {
    .property-slider-content p.category {
        font-size: 12px;
        /* width: calc(117px - 32px); */
    }
}

@media (max-width:767px) {
    .property-slider-content p.category {
        font-size: 11px;
        /* test */
        /* width: calc(119px - 32px); */
        min-width: 116px;
        width: 30%;
    }
}

.property-slider-content p.category::before,
.property-slider-content p.category::after {
    position: absolute;
    content: '';
    width: 16px;
    height: 16px;
    background: transparent;
    border-radius: 50%;
}

.property-slider-content p.category::before {
    top: 0;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 8px -8px 0 0 #D8DBE2;
}

.property-slider-content p.category::after {
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    box-shadow: 8px -8px 0 0 #D8DBE2;
}

.property-slider-content .img-container img {
    border-radius: 16px;
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%;
}

.property-slider-content .img-container {
    height: clamp(192px, 14vw, 240px);
    overflow: hidden;
}

@media (min-width:768px) and (max-width:1400px) {
    .property-slider-content .img-container {
        height: clamp(186px, 14vw, 192px);
    }
}

@media (max-width:767px) {
    .property-slider-content .img-container {
        height: 186px;
    }
}

/*下半分*/
.property-list .content-text {
    /* width: calc(100% - 64px); */
    background-color: #FFFFFF;
    padding: 32px;
    border-radius: 0 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (max-width:767px) {
    .property-list .content-text {
        width: calc(100% - 32px);
        padding: 32px 16px;
    }
}

.property-list .content-text .info1 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.property-list .content-text .name {
    font-size: 20px;
    font-weight: bold;
}

@media (max-width:767px) {
    .property-list .content-text .name {
        font-size: 16px;
    }
}

.property-list .content-text .address {
    line-height: 24px;
    font-size: clamp(14px, 1vw, 16px);
}

@media (min-width:768px) and (max-width:1400px) {
    .property-list .content-text .address {
        font-size: 14px;
    }
}

@media (max-width:767px) {
    .property-list .content-text .address {
        font-size: 13px;
    }
}

.property-list .content-text .info2 {
    display: flex;
    flex-direction: row;
    font-size: clamp(16px, 1vw, 20px);
}

@media (min-width:768px) and (max-width:1400px) {
    .property-list .content-text .info2 {
        font-size: 16px;
    }
}

.property-list .content-text .info2 .builtin {
    /* test */
    /* width: calc(50% - 16px); */
    width: 50%;
    padding-right: 16px;
    padding-top: 1em;
    text-align: end;
    border-right: 1px solid #CED1D8;
    position: relative;
}

.property-list .content-text .info2 .builtin::before {
    content: "築年数";
    color: #A7A9B0;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
}

@media (min-width:768px) and (max-width:1400px) {
    .property-list .content-text .info2 .builtin::before {
        font-size: 14px;
    }
}

.property-list .content-text .info2 .layout {
    width: calc(50% - 16px);
    padding-left: 16px;
    padding-top: 1em;
    text-align: end;
    position: relative;
}

.property-list .content-text .info2 .layout::before {
    content: "間取り";
    color: #A7A9B0;
    font-size: clamp(14px, 2vw, 16px);
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 16px;
}

@media (min-width:768px) and (max-width:1400px) {
    .property-list .content-text .info2 .layout::before {
        font-size: 14px;
    }
}

.property-list .content-text .price {
    color: #E9332A;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: bold;
    text-align: right;
}

@media (max-width:767px) {
    .property-list .content-text .price {
        font-size: 24px;
    }
}

.property-list .content-text .price .tax {
    font-size: 16px;
}

/* renovation
--------------------------------------------*/
#renovation #content.wrapper {
    flex-direction: column;
    gap: 0px;
    padding-bottom: 120px;
}

/*pager 個別設定*/
@media (min-width:768px) {
    #renovation .pager {
        margin-top: 80px;
    }
}

/* test */
/*content 個別設定*/
/* #renovation .property-slider-content p.category{
    width: calc(144px - 16px);
    padding: 16px 8px;
} */

/* property-single,renovation-single
--------------------------------------------*/
#property.single .wrapper-single,
#renovation.single .wrapper-single {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-bottom: 120px;
}

@media (max-width:767px) {

    #property.single .wrapper-single,
    #renovation.single .wrapper-single {
        padding-bottom: 64px;
    }
}

/*image-container*/
#property #content .image-container,
#renovation #content .image-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /*slide-navigationにmargin-top:10pxしといて*/
}

.slide {
    position: relative;
    width: 100%;
    aspect-ratio: 1.33;
}

.slide .item {
    position: relative;
    height: 100%;
}

.slide .item::before {
    display: block;
    padding-top: 39%;
    content: "";
    position: relative;
    overflow: hidden;
}

.slide .item img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 100%;
    height: 100%;
    border-radius: 24px;
}


/*property-name*/
.single .property-name,
#renovation #content .property-name {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

@media (max-width:767px) {

    .single .property-name,
    #renovation #content .property-name {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}

.single .property-name .name {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.single .property-name .category {
    background-color: #FFFFFF;
    color: #E9332A;
    font-size: 14px;
    font-weight: bold;
    padding: 8px;
    margin-right: auto;
}

.single .property-name h3 {
    font-size: 32px;
    font-weight: bold;
}

.single .property-name .price {
    color: #E9332A;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: bold;
    text-align: right;
}

@media (max-width:767px) {
    .single .property-namee .price {
        font-size: 24px;
        text-align: left;
    }
}

.single .property-name .price .tax {
    font-size: 16px;
}

.single .property-image {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/*description*/
.single #content .description {
    width: 100%;
}

.single #content .description dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 40px;
}

@media (max-width:767px) {
    .single #content .description dl {
        row-gap: 24px;
    }
}

.single #content .description dt {
    width: 7em;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #A7A9B0;
    padding-bottom: 16px;
}

.single #content .description dd {
    width: calc(50% - 7em - 20px);
    border-bottom: 1px solid #A7A9B0;
    padding-bottom: 16px;
    font-size: 16px;
}

@media (max-width:767px) {
    .single #content .description dd {
        width: calc(100% - 7em);
    }
}

@media (min-width:768px) {
    .single #content .description dd:nth-child(2n) {
        margin-right: 40px;
    }

    .single #content .description dd:nth-child(4n) {
        margin-right: 0px;
    }
}


/* slide */
.slide>.slick-list,
.slide>.slick-list>.slick-track,
.slide>.slick-list>.slick-track>.slick-slide>div {
    position: relative;
    height: 100%;
}

/* slide-navigation */

.slide-navigation {
    position: relative;
    padding: 0;
    margin-top: 10px;
}

@media (max-width:767px) {
    .slide-navigation {
        width: auto !important;
        overflow: hidden;
        flex-wrap: nowrap;
    }

    .slide-navigation .slick-list {
        padding-right: 11vw;
    }
}

@media (min-width:768px) {
    .slide-navigation .slick-track {
        transform: unset !important;
        width: 100% !important;
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
    }

    .slide-navigation .slick-slide:first-child,
    .slide-navigation .slick-slide:nth-child(5n+1) {
        margin-left: 0;
    }

    .slide-navigation .slick-slide:nth-child(5n) {
        margin-right: 0;
    }

    .slide-navigation .slick-track:before {
        display: none;
    }

    .slide-navigation .slick-track:after {
        display: none;
    }

    .slide-navigation img {
        max-width: 100%;
        display: block;
        height: auto;
    }
}

@media (min-width:1401px) {
    .slide-navigation .slick-slide {
        width: calc(20% - 33px);
        overflow: hidden;
    }
}

@media (min-width:768px) and (max-width:1400px) {
    .slide-navigation .slick-slide {
        width: calc(20% - 16px);
        overflow: hidden;
    }
}

.slide-navigation .item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: calc(20% - 33px);
    height: 100%;
    padding: 0;
    margin: 20px;
    border-radius: 8px;
}

@media (min-width:768px) and (max-width:1400px) {
    .slide-navigation .item {
        width: calc(20% - 16px);
        margin: 10px;
    }
}

@media (max-width:767px) {
    .slide-navigation .item {
        width: 23vw;
        margin: 0 8px;
    }
}

.slide-navigation .item::before {
    display: block;
    padding-top: 70%;
    content: "";
}

.slide-navigation .item img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
}

@media (min-width:768px) {
    .slide-navigation .item.slick-current::after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: calc(100%);
        height: calc(100%);
        content: "";
        border-radius: 8px;
        border: 4px solid #E9332A;
    }
}

@media (max-width:767px) {
    .slide-navigation .item.slick-current::after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: calc(100%);
        height: calc(100%);
        content: "";
        border-radius: 8px;
        border: 4px solid #E9332A;
    }
}

/* records
--------------------------------------------*/
#records #content.wrapper {
    flex-direction: column;
    gap: 80px;
    padding-bottom: 120px;
}

@media (min-width:1251px) {
    #records #content.wrapper {
        padding: 0 clamp(100px, 11vw, 340px);
        padding-bottom: 120px;
    }
}

@media (min-width:768px) and (max-width:1250px) {
    #records #content.wrapper {
        padding: 0 clamp(70px, 10vw, 340px);
        padding-bottom: 120px;
    }
}

#records .content-records {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

#records .content-records h3 {
    font-size: 36px;
    font-weight: bold;
    position: relative;
    padding-bottom: 24px;
}

#records .content-records h3::after {
    content: '';
    position: relative;
    display: block;
    left: 0;
    bottom: -24px;
    background-color: #E9332A;
    width: 104px;
    height: 1px;
}

#records .content-records ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: disc;
    column-gap: clamp(20px, 2vw, 80px) !important;
    justify-content: space-between;
    padding-left: 2em;
}

@media (max-width:767px) {
    #records .content-records ul {
        column-gap: 0 !important;
        width: calc(100% - 2em);
        /*padding-left*/
    }
}

#records .content-records li {
    width: calc(30% - 2vw);
    font-size: 16px;
}

@media (min-width:768px) and (max-width:1250px) {
    #records .content-records li {
        width: calc(50% - 2vw);
    }
}

@media (max-width:767px) {
    #records .content-records li {
        width: 100%;
    }
}