@charset "utf-8";
/*
Theme Name: Dan home
Description: The theme for the website of Dan home Co.,Ltd.
Author: MBM Inc.
Version: 2018/11/28
*/

/*/////////common/////////*/

body {
    font-family: "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif ;
    font-size: 15px;
    width: 100%;
    min-width: 1366px;
    letter-spacing: 1px;
    color: #333333;
}

.bree {
    font-family: "Bree Serif", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif ;
}
* {
    min-height: 0;
    min-width : 0;
}
body * {
    box-sizing: border-box;
}
main,
section {
    width: 100%;
}

img {
    vertical-align: bottom;
}

div > img,
li > img,
a > img,
span > img,
p > img {
    width: 100%;
}

a {
    background: transparent;
}

a:hover,
button:hover {
    opacity: 0.6;
    filter: opacity(60);
}

a img {
    display: block;
}
select,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif ;
}
select::-ms-expand {
    display: none;
}
button::-ms-expand {
    display: none;
}
.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

.main_title .mw-188.title_box {
    max-width: 188px;
	width:100%;
}

.bold {
    font-weight: bold;
}
.underline_green {
    border-bottom: 2px solid #2b883a;
}
.flex {
    display: flex;
}

.bg_green {
    background-color: #2b883a;
    color: #ffffff;
}
.font_green {
    color: #2b883a;
}
.pointed {
    color: #fcce00;
}
a.no-blink:hover {
    opacity: 1;
    filter: opacity(1);
    cursor: default;
}
.error_example {
    text-align: center;
}
.link-green {
    border-bottom: 1px solid #2b883a;
    color: #2b883a;
    padding-bottom: 2px;
}

.font_12 {
    font-size: 12px;
}
.font_13 {
    font-size: 13px;
}
.font_14 {
    font-size: 14px;
}
.font_15 {
    font-size: 15px;
}
.font_16 {
    font-size: 16px;
}
.font_17 {
    font-size: 17px;
}
.font_18 {
    font-size: 18px;
}
.font_22 {
    font-size: 22px;
}
.font_24 {
    font-size: 24px;
}
.font_26 {
    font-size: 26px;
}
.font_28 {
    font-size: 28px;
}
.font_54 {
    font-size: 54px;
}
.letterspace_2 {
    letter-spacing: 2px;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.brsp {
    display: none;
}
.brpc {
    display: block;
}

@media screen and (max-width: 1040px) {

}

@media screen and (max-width: 767px) {

}

@media screen and (max-width: 767px) {
    body {
        min-width: 320px;
        overflow-x: hidden;
    }
    .brsp {
        display: block;
    }
    .brpc {
        display: none;
    }
    .bg_white{
        background-color: #ffffff;
    }
}

/*/////////body/////////*/

.main_title {
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #2b883a;
    position: relative;
    padding-bottom: 30px;
}
.main_title::after {
    content: "";
    display: block;
    width: 100%;
    height: 151px;
    position: absolute;
    bottom: -2.5px;
    background-image: url(./img/horizontal_main.png);
    background-size: 256px 75px;
    background-position: calc(50% - 412px) bottom;
    background-repeat: no-repeat;
}
.main_title h1 {
    margin: 0 0 4px;
    line-height: 1.2;
    font-weight: normal;
}
.main_title.case_study h1 {
    font-size:30px;
	color:#333;
    font-weight: 700;
}
.main_title .title_box {
    width: 214px;
    padding: 6px;
    letter-spacing: 3px;
    margin: 14px auto;
}
.button_contact {
    font-size: 1rem;
    padding: 5px 0;
    margin-right: 22px;
    color: #2b883a;
}
.button_contact a {
    text-align: center;
    display: block;
    font-size: 20px;
    line-height: 20px;
    padding: 10px 0;
    width: 162px;
    background-color: #fcce00;
    border-radius: 20px;
}
.box-cases ul li.error_example {
    width: 100%;
    margin: 64px auto 64px;
    font-size: 18px;
    font-weight: bold;
}
.box-cases ul li:nth-child(3n+1).error_example {
    margin-right: auto;
}

#breadcrumb {
    font-size: 12px;
    margin: 2px auto 32px;
    width: 1080px;
    padding: 4px 4px 4px 12px;
    white-space: nowrap;
}
#breadcrumb a {
    color: #808080;
}
#breadcrumb ul {
    display: flex;
}
#breadcrumb ul li:nth-child(n+2) {
    margin-left: 6px;
}
#breadcrumb ul li:nth-child(n+2)::before {
    content:">";
    display: inline;
    margin-right: 6px;
    font-size: 12px;
    color: #808080;
}
.read-more {
    position: relative;
}
.read-more a {
    display: block;
    color: #2b883a;
    text-align: center;
    border: 2px solid #2b883a;
    font-size: 14px;
    line-height: 14px;
    font-weight: bold;
    border-radius: 6px;
    padding: 12px 16px 12px 0;
    box-shadow: 6px 6px 0px 0px #e3d4ca;
    cursor: pointer;
    background-image: url(./img/button_right.png);
    background-size: 15px 15px;
    background-position: calc(100% - 14px) 11px;
    background-repeat: no-repeat;
}
.read-more a:hover {
    transform: translate( 3px, 3px);
    box-shadow: 3px 3px 0px 0px #e3d4ca;
    opacity: 1;
    filter: opacity(1);
}
.news-top .read-more {
    width: 130px;
    margin: auto 0 0 40px;
}
.news-top .read-more a {
    width: 130px;
}
.other-example .read-more {
    width: 147px;
    margin: 14px auto 0;
}
.other-example .read-more a {
    width: 147px;
}
.newhomes-list .read-more {
    z-index: 3;
    width: 250px;
    margin: 96px auto 0;
}
.property-list .read-more {
    z-index: 3;
    width: 250px;
    margin: 45px auto 90px;
}
.newhomes-list .read-more a {
    position: relative;
    z-index: 3;
    width: 250px;
    background-position: calc(100% - 22px) 11px;
}
.property-list .read-more a {
    position: relative;
    z-index: 3;
    width: 250px;
    background-position: calc(100% - 22px) 11px;
}
.exam-list .read-more {
    width: 281px;
    margin: 26px auto;
}
.exam-list .read-more a {
    width: 281px;
    background-position: calc(100% - 18px) 11px;
}
.news-detail .read-more {
    width: 1080px;
    padding-left: 40px;
    margin: 0 auto 96px;
}
.news-detail .read-more a {
    width: 196px;
    background-image: url(./img/button_left.png);
    background-size: 15px 15px;
    background-position: 12px 11px;
    background-repeat: no-repeat;
    padding-left: 28px;
    margin-left: 0;
}

.title-ribbon {
    width: 368px;
    height: 53px;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    color: #2b883a;
    line-height: 1;
    text-align: center;
    font-weight: bold;
    padding: 8px 100px;
    margin: 80px auto 38px;
    background-image: url(./img/top_title_pop.png);
    background-size: 368px 53px;
    background-position: left top;
    background-repeat: no-repeat;
}

.box-cases {
    font-weight: bold;
    margin-bottom: 28px;
}
.box-cases .thumbnail {
    width: 322px;
    height: 220px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}
.box-cases .thumbnail img {
    width: 100%;
    height: auto;
}
.box-cases ul {
    width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.box-cases ul li {
    width: 322px;
    margin-bottom: 60px;
    position: relative;
}
.box-cases ul li a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}
.box-cases ul li:hover {
    opacity: 0.6;
    filter: opacity(60);
}
.box-cases ul li:nth-child(3n+1),
.box-cases ul li:nth-child(3n+2) {
    margin-right: 57px;
}
.box-cases .title-cases {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 2px 2px 0 2px;
    margin: 10px 0 0;
}
.box-cases .title-cases h3 {
    margin-right: 15px;
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 7px;
}
.box-cases .title-cases p.place {
    background-color: #2b883a;
    font-size: 16px;
    color: #ffffff;
    padding: 4px 7px 4px 7px;
    line-height: 1;
    letter-spacing: .2em;
    text-align: center;
    margin: 0 10px 8px 0;
}
.box-cases .status-cases {
    padding: 0 2px 2px 2px;
}
@media screen and (max-width: 767px) {
    #breadcrumb {
        width: 100%;
    }
    .exam-list .read-more {
        width: 264px;
        margin: 26px auto;
    }
    .exam-list .read-more a {
        width: 264px;
        background-position: calc(100% - 14px) 11px;
    }
    .title-ribbon {
        width: 300px;
        height: 45px;
        font-size: 25px;
        font-weight: bold;
        line-height: 1;
        color: #2b883a;
        line-height: 1;
        text-align: center;
        padding: 6px 56px;
        margin: 0 auto 38px;
        background-image: url(./img/top_title_pop.png);
        background-size: 300px 45px;
        background-position: left top;
        background-repeat: no-repeat;
    }
    .news-top .read-more {
        margin: 32px auto;
    }
    .box-cases {
        font-weight: bold;
        margin-bottom: 28px;
    }
    .box-cases .thumbnail {
        width: 322px;
        height: 220px;
        overflow-y: hidden;
    }
    .box-cases .thumbnail img {
        width: 100%;
        height: auto;
    }
    .box-cases ul {
        width: 1080px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    .box-cases ul li {
        width: 322px;
        margin-bottom: 40px;
        position: relative;
    }
    .box-cases ul li a {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .box-cases ul li:hover {
        opacity: 0.6;
        filter: opacity(60);
    }
    .box-cases ul li:nth-child(3n+1),
    .box-cases ul li:nth-child(3n+2) {
        margin-right: 57px;
    }
    .box-cases .title-cases {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 2px 2px 0 2px;
        margin: 10px 0 0;
    }
    .box-cases .title-cases h3 {
        margin-right: 15px;
        letter-spacing: 2px;
        font-weight: bold;
        margin-bottom: 7px;
    }
    .box-cases .title-cases p.place {
        background-color: #2b883a;
        font-size: 16px;
        color: #ffffff;
        padding: 4px 7px 4px 7px;
        line-height: 1;
        letter-spacing: .2em;
        text-align: center;
        margin: 0 10px 8px 0;
    }
    .box-cases .status-cases {
        padding: 0 2px 2px 2px;
    }

}

/*/////////header/////////*/
header {
    width: 100%;
    padding-bottom: 64px;
}
.header_inner {
    min-width: 1040px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 20;
    padding-top: 7px;
    background-color: #ffffff;
    margin: 0 auto;
}
.header_wrap {
    display: flex;
}
.header_title{
    padding-bottom: 3px;
}
.header_title a {
    line-height: 1;
    padding: 18px 0 17px 102px;
    background-image: url(./img/logo.png);
    background-position: left center;
    background-size: 86px 50px;
    background-repeat: no-repeat;
    margin-left: 60px;
    font-weight: bold;
}
.header_navi {
    display: flex;
    margin-right: 20px;
    font-weight: bold;
}
.header_navi li > a {
    display: block;
    line-height: 1;
    padding: 18px 22px 24px;
    border-bottom: 3px solid transparent;
    position: relative;
}
.header_navi li > a:hover {
    color: #2b883a;
    border-bottom: 3px solid #2b883a;
    opacity: 1;
    filter: opacity(1);
}

.button-pulldown > a::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #333333 transparent transparent transparent;
}
.button-pulldown > a:hover::after {
    border-color: #2b883a transparent transparent transparent;
}
.nav_example {
    background-color: #2b883a;
    color: #ffffff;
    font-weight: normal;
    padding: 10px;
    margin-bottom: 8px;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.36s ease, opacity 0.36s ease;
	pointer-events: none; /* 非表示時はクリック無効 */
}

.nav_example.show {
    max-height: 100px;
    opacity: 1;
	pointer-events: auto; /* 表示時のみクリック可能 */
}

.nav_example div {
    border-left: 1px solid #ffffff;
}
.nav_example div a {
    padding: 0 14px;
}
.nav_example div:first-child {
    border-left: none;
}

.sp_menu {
    display: none;
}

@media screen and (min-width: 1367px) {
    .header_title a {
        margin-left: 4.4vw;
    }
    .header_navi {
        margin-right: 1.4vw;
    }
}

@media screen and (max-width: 767px) {
    header {
        width: 100%;
        padding-bottom: 50px;
    }
    .header_title{
        height: 50px;
        padding-bottom: 0;
    }
    .header_title a {
        font-size: 14px;
        display: block;
        line-height: 1;
        padding: 18px 0 18px 88px;
        background-image: url(./img/logo.png);
        background-position: left center;
        background-size: 82px 47px;
        background-repeat: no-repeat;
        margin-left: 2vw;
        font-weight: bold;
    }
    .header_inner {
        min-width: 312px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: fixed;
        z-index: 20;
        padding-top: 0;
        margin: 0 auto;
    }
    .header_wrap {
        display: none;
    }
    .sp_menu {
        display: block;
        position: relative;
    }
    .sp_menu .sp_button {
        margin-right: 0;
        margin-left: auto;
        width: 50px;
        height: 50px;
        text-indent: 100%;
        white-space: nowrap;
        background-image: url(./img/sp_button.png);
        background-size: 50px 50px;
        background-position: center;
        background-repeat: no-repeat;
    }
    .sp_menu .sp_nav {
        display: none;
        position: absolute;
        right: 0;
    }
    .sp_menu .sp_nav li {
        background-color: #2b883a;
        border: 1px solid  #fcce00;
        width: 160px;
        color: #ffffff;
        font-weight: bold;
    }
    .sp_menu .sp_nav .no-link {
        padding: 10px 4px 10px 12px;
        color: #fcce00;
    }
    .sp_menu .sp_nav li a {
        display: block;
        width: 128px;
        padding: 10px 4px 10px 12px;
    }
    .sp_menu .sp_nav .li-child {
        padding-left: 15px;
    }
}

/*/////////footer/////////*/

.footer_contact {
    width: 100%;
    background-image: url(./img/bg_pink-stripe.png);
    background-repeat: repeat;
    background-size: 56px 56px;
    background-position: left top;
    height: 173px;
    padding-top: 30px;
}
.footer_contact h3 {
    text-align: center;
    margin-bottom: 18px;
}
.footer_contact .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_contact .wrapper .phone {
    width: 302px;
    height: 46px;
    padding-left: 42px;
    margin-right: 4px;
    background-image: url(./img/phone.png);
    background-repeat: no-repeat;
    background-size: 30px 38px;
    background-position: left 6px;
    line-height: 1;
    font-weight: bold;
}
.footer_contact .wrapper .phone .number  {
    margin-bottom: 6px;
}
.footer-lower {
    height: 288px;
    position: relative;
}
.footer-lower::before {
    content: "";
    display: block;
    position: absolute;
    top: 274px;
    left: 0;
    z-index: 1;
    height: 0px;
    width: 100%;
    border-bottom: 2px solid #2b883a;
}
.footer-lower::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 288px;
    width: 100%;
    background-image: url(./img/horizontal_footer.png);
    background-repeat: no-repeat;
    background-size: 1171px 106px;
    background-position: center 170px;
}
.footer-lower .wrapper {
    position: relative;
    z-index: 4;
    max-width: 1152px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}
.footer-lower .footer_logo {
    display: flex;
    align-items: center;
    width: 542px;
    margin-top: 52px;
}
.footer-lower .footer_logo a {
    width: 142px;
    height: 82px;
    display: block;
    margin: 0 32px 0 36px;
}
.footer-lower .footer_logo .adress {
    line-height: 1;
    padding-top: 2px;
}
.footer-lower .footer_logo .adress h2 {
    margin-bottom: 15px;
    color: #2b883a;
    font-size: 18px;
    font-weight: bold;
}
.footer-lower .footer_logo .adress p:nth-child(2) {
    margin-bottom: 10px;
}
.footer-lower .footer_nav {
    width: 432px;
    height: 148px;
    margin-top: 50px;
}
.footer-lower .footer_nav > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 148px;
    width: 432px;
}
.footer-lower .footer_nav ul li {
    font-size: 14px;
/*     font-weight: bold; */
    width: 200px;
/*     line-height: 1;
    margin-bottom: 12px; */
	line-height: 0.6;
    margin-bottom: 8px;
}
.footer-lower .footer_nav span.example {
    position: relative;
    left: -4px;
}
.footer-lower .footer_nav ul.example {
    margin: 12px 0 0 14px;
}
.footer-lower .footer_nav ul li::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 0;
    border-bottom: 2px solid #333333;
    margin-right: 8px;
}
.copyright {
    text-align: center;
    margin-top: 8px;
    padding-bottom: 34px;
}
.kaiteki {
    margin: 48px 0 0 22px ;
}

#scroll-top {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    right: 18px;
    bottom: 28px;
    z-index: 6;
    cursor: pointer;
    background-color: #fcce00;
}
#scroll-top p {
    position: absolute;
    top: 17px;
    left: 12px;
    width: 19px;
    height: 19px;
    transform: rotate(-45deg);
    border-top: 2px solid #2b883a;
    border-right: 2px solid #2b883a;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
@media screen and (max-width: 767px) {

}

/*/////////index/////////*/
#index main {
    background-image: url(./img/top_cloud.png);
    background-size: 151px 77px;
    background-position: calc(50% - 646px) 24px;
    background-repeat: no-repeat;
}
.slider {
    width: 100%;
    margin: 0 auto;
}
.slider_wrap {
    display: flex;
    position: relative;
    width: 100%;
}
.slider_menu {
    width: 36%;
    height: 444px;
    position: relative;
    background-image: url(./img/top_cloud.png);
    background-size: 151px 77px;
    background-position: calc(100% + 56px) 246px;
    background-repeat: no-repeat;
}
.slider_title {
    position: absolute;
    left: calc(100% - 400px);
    top: 75px;
}
.slider_title h1 {
    font-size: 74px;
    line-height: 1;
    padding: 0 0 4px;
    text-align: center;
    width: 501px;
    height: 78px;
    color: #2b883a;
    background-color: #fcce00;
    margin-bottom: 12px;
}
.slider_title > p {
    letter-spacing: 2px;
    line-height: 1;
    width: 121px;
    text-align: center;
    padding: 5px 0 7px;
    margin-bottom: 36px;
}
.slider_nav {
    width: 100%;
    padding-top: 73px;
    position: absolute;
    top: 335px;
    bottom: 47px;
    background-image: url(./img/horizontal_main.png);
    background-size: 256px 75px;
    background-position: calc(100% - 143px) top ;
    background-repeat: no-repeat;
}
.slider_nav .wrapper {
    width: 100%;
    background-color: #2b883a;
    color: #ffffff;
    height: 36px;
/*     padding-right: 74px; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ← この部分を追加 */
.slider_nav .wrapper > div {
    flex: 0 0 auto;  /* コンテンツ幅に自動調整 */
}

.slider_nav .wrapper p {
    line-height: 1;
    padding: 2px;
    width: 108px;
    cursor: pointer;
    text-align: center;
}
.slider_nav .wrapper .first > p {
    padding-right: 16px;
 }
.slider_nav .wrapper .end {
    padding-left: 6px;
 }
.slider_nav .wrapper .bdright {
    border-right: 1px solid #ffffff;
}
.slider .read-more {
    width: 250px;
    margin: 26px 0;
}
.slider .read-more a {
    width: 250px;
    background-position: calc(100% - 14px) 11px;
}
.slider_image {
    width: 64%;
    height: 444px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.slider-newhomes .slider_image {
    background-image: url(./img/top_img_01.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slider-reform .slider_image {
    background-image: url(./img/top_img_02.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slider-income .slider_image {
    background-image: url(./img/top_img_03.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slider-property .slider_image {
    background-image: url(./img/top_img_04.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {

    #index main {
        background-image: none;
    }
    .slider {
        width: 100%;
    }
    .slider_wrap {
        display: block;
        position: relative;
        width: 100%;
    }
    .slider_menu {
        width: auto;
        height: auto;
        position: relative;
        z-index: 4;
        background-image: url(./img/top_cloud.png);
        background-size: 164px 83px;
        background-position: 296px 18px;
        background-repeat: no-repeat;
    }
    .slider_title {
        position: absolute;
        z-index: 6;
        left: 0;
        top: 0;
        margin-left: 3vw;
    }
    .slider_title h1 {
        display: block;
        font-size: 74px;
        line-height: 1;
        padding: 0px 2px 2px 6px;
        text-align: left;
        width: 296px;
        height: auto;
        color: #2b883a;
        background-color: #fcce00;
        margin-bottom: 12px;
    }
    .slider .read-more {
        width: 250px;
        margin: 26px auto;
        position: absolute;
        z-index: 7;
        top: 322px;
        left: calc(48vw - 134px);
        background-color: #ffffff;
    }
    .slider .read-more a {
        width: 250px;
        background-position: calc(100% - 14px) 11px;
    }
    .slider_title > p {
        letter-spacing: 2px;
        line-height: 1;
        width: 121px;
        text-align: center;
        padding: 5px 0 7px;
        margin-bottom: 64px;
    }
    .slider_title br {
        margin-bottom: 6px;
    }
    .slider_nav {
        width: 100%;
        padding-top: 422px;
        position: relative;
        z-index: 3;
        top: 0;
        bottom: 0;
        background-image: none;
    }
    .slider_nav .wrapper {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        justify-content: center;
    }
	
	.slider_nav .wrapper > div {
		flex: 1;  /* ← 追加: 各divが均等に幅を取る */
		min-width: 0;  /* ← 追加: 縮小を許可 */
		}

	.slider_nav .wrapper p {
		line-height: 1;
		padding: 2px;
		width: auto;  /* ← 108pxから25%に変更(4つ均等配置) */
		cursor: pointer;
		text-align: center;
		font-size: 13px;  /* ← フォントサイズを少し小さく */
	}
    .slider_nav .wrapper .first > p {
        padding-right: 2px;
     }
    .slider_nav .wrapper .end {
        padding-left: 2px;
     }

    .slider_image {
        position: absolute;
        z-index: 2;
        top: 103px;
        width: 100%;
        height: 218px;
    }
}

.news-top {
    width: 1080px;
    margin: 56px auto 68px;
    display: flex;
}
.news-top h2 {
    font-size: 18px;
    font-weight: bold;
    color: #2b883a;
    width: 198px;
    padding: 0 0 0 88px;
}
.news-top ul {
    width: 662px;
    border-top: 1px solid #e3d4ca;
}
.news-top ul > li {
    font-size: 14px;
    line-height: 1;
    display: flex;
    border-bottom: 1px solid #e3d4ca;
}
.news-top .news-top-date {
    padding: 0 24px 0 0;
    color: #333333;
}
.news-top .news-top-detail {
    display: flex;
}
.news-top .news-top-detail dt {
    width: 212px;
    padding: 15px 10px;
    color: #2b883a;
}
.news-top .news-top-detail dd {
    padding: 15px 12px 15px 14px;
}
.intro-top {
    position: relative;
    width: 1366px;
    margin: 0 auto 152px;
    background-image: url(./img/top_cloud.png);
    background-size: 205px 104px;
    background-position: 1108px top ;
    background-repeat: no-repeat;
    padding-top: 30px;
}
.intro-top .image-bg {
    position: relative;
    z-index: 2;
    width: 787px;
    height: 382px;
}
.intro-top .intro-top_box {
    position: absolute;
    left: 726px;
    top: 82px;
    z-index: 4;
    width: 496px;
    padding: 24px 56px;
    background-color: #2b883a;
    border-radius: 7px;
}
.intro-top_box h2 {
    color: #fcce00;
    text-align: center;
    margin: 20px 0 24px;
    font-weight: bold;
}
.intro-top_box p {
    color: #ffffff;
    line-height: 1.8;
    margin: 0 auto 34px;
    font-weight: bold;
}
.voice-top {
    width: 100%;
    background-image: url(./img/bg_pink-stripe.png);
    background-size: 56px 56px;
    background-position: left top;
    background-repeat: repeat;
    padding-bottom: 40px;
    margin-bottom: 90px;
}
.voice-top h2 {
    font-size: 54px;
    line-height: 1;
    color: #2b883a;
    text-align: center;
    position: relative;
    top: -32px;
}
.voice-top h2::after {
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 0;
    border-top: 2px solid #2b883a;
    left: calc(50% - 240px);
    top: 30px;
}
.voice-top h2::before {
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 0;
    border-top: 2px solid #2b883a;
    left: calc(50% + 175px);
    top: 30px;
}

.voice-top > p {
    background-color: #2b883a;
    color: #ffffff;
    font-size: 18px;
    width: 152px;
    padding: 4px 0;
    line-height: 1;
    text-align: center;
    margin: -20px auto 54px;
}
.voice_list {
    position: relative;
    width: 1080px;
    display: flex;
    margin: 20px auto;
}
.voice_list li {
    background-image: url(./img/top_bubble.png);
    width: 330px;
    height: 374px;
    background-size: 330px 365px;
    background-position: left 9px;
    background-repeat: no-repeat;
    position: relative;
}
.voice_list li:nth-child(-n+2) {
    margin-right: 42px;
}
.voice_list li > div {
    background-color: #2b883a;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    color: #fcce00;
    font-size: 24px;
    width: 140px;
    line-height: 1;
    padding: 6px 0 5px;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
}
.voice_list li > p {
    font-size: 14px;
    line-height: 1.6;
    width: 231px;
    height: 222px;
    margin: 64px 0 14px 64px;
    overflow: hidden;
}
.voice_list li > p img {
    height: 200px;
}
.voice_list li > a {
    display: block;
    width: 128px;
    color: #2b883a;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    padding: 8px 0 8px 1px;
    margin: 10px 0 10px 116px;
    border-bottom: 1px solid #2b883a;
    background-image: url(./img/button_right.png);
    background-size: 15px 15px;
    background-position: right 8px;
    background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
	.slider_title h1 {
		width: auto;
	}
	
    .news-top {
        width: 88%;
        margin: 56px auto 48px;
        display: block;
    }
    .news-top h2 {
        font-size: 18px;
        text-align:center;
        width: 100%;
        padding: 0;
        margin-bottom: 14px;
    }
    .news-top ul {
        width: 88%;
        line-height: 1.8;
        border-top: 1px solid #e3d4ca;
        margin: 0 auto;
    }
    .news-top ul > li {
        font-size: 14px;
        line-height: 1;
        display: flex;
        border-bottom: 1px solid #e3d4ca;
    }
    .news-top .news-top-date {
        padding: 0 12px 0 0;
    }
    .news-top .news-top-detail {
        display: block;
    }
    .news-top .news-top-detail dt {
        padding: 15px 10px;
    }
    .news-top .news-top-detail dd {
        padding: 0 10px 15px;
    }
    .intro-top {
        position: relative;
        width: 100%;
        margin: 0 auto 52px;
        background-image: none;
        padding-top: 30px;
    }
    .intro-top .image-bg {
        width: 100%;
        height: 60vw;
    }
    .intro-top .image-bg img {
        height: 100%;
    }
    .intro-top .intro-top_box {
        position: relative;
        left: 6%;
        top: -7.6vw;
        z-index: 4;
        padding: 20px 5vw 4px;
        width: 88%;
    }
    .intro-top_box h2 {
        color: #fcce00;
        text-align: center;
        margin: 16px 0 22px;
        line-height: 1.6;
        padding: 0 8vw;
    }
    .intro-top_box p {
        color: #ffffff;
        line-height: 2;
        margin: 0 auto 28px;
        font-weight: normal;
    }
    .voice-top {
        width: 100%;
        background-image: url(./img/bg_pink-stripe.png);
        background-size: 56px 56px;
        background-position: left top;
        background-repeat: repeat;
        padding-bottom: 40px;
        margin-bottom: 16px;
        padding-top: 60px;
    }
    .voice-top h2 {
        font-size: 54px;
        line-height: 1;
        color: #2b883a;
        text-align: center;
        position: relative;
        top: 0;
    }
    .voice-top h2::after {
        display: none;
    }
    .voice-top h2::before {
        display: none;
    }

    .voice-top > p {
        margin: 8px auto 54px;
    }
    .voice_list {
        position: relative;
        width: 88%;
        display: block;
        margin: 20px auto;
    }
    .voice_list li {
        background-image: url(./img/top_bubble.png);
        width: 85vw;
        height: calc(93.8vw + 9px);
        background-size: 85vw 93.8vw;
        background-position: left 9px;
        background-repeat: no-repeat;
        position: relative;
        margin: 0 auto;
    }
    .voice_list li:nth-child(-n+2) {
        margin-right: 0;
    }
    .voice_list li > div {
        background-color: #2b883a;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 6;
        color: #fcce00;
        font-size: 24px;
        width: 135px;
        line-height: 1;
        padding: 6px 0 5px;
        text-align: center;
        font-weight: bold;
        overflow: hidden;
    }
    .voice_list li > p {
        font-size: 14px;
        line-height: 1.6;
        width: 76%;
        height: 72%;
        margin: 54px 8% 20px 16%;
        overflow: hidden;
        padding-top: 14vw;
    }
    .voice_list li > a {
        display: block;
        width: 128px;
        color: #2b883a;
        font-size: 14px;
        font-weight: bold;
        line-height: 1;
        padding: 8px 0 8px 1px;
        margin: 16px auto 16px calc(54% - 64px);
        border-bottom: 1px solid #2b883a;
        background-image: url(./img/button_right.png);
        background-size: 15px 15px;
        background-position: right 8px;
        background-repeat: no-repeat;
    }
}

#index .newhomes {
    width: 100%;
    background-image: url(./img/top_cloud.png);
    background-size: 290px 147px, 290px 147px;
    background-position: calc(50vw + 432px) 214px, calc(50vw - 678px) 950px;
    background-repeat: no-repeat, no-repeat;
}

#index .property {
	width: 100%;
    background-image: url(./img/top_cloud.png);
    background-size: 290px 147px;
    background-position: calc(50vw - 733px) 267px;
    background-repeat: no-repeat, no-repeat;
}

section.modelhouse-info {
    width: 100%;
    background-image: url(./img/top_cloud.png), url(./img/top_cloud.png);
    background-size: 290px 147px, 290px 147px;
    background-position: calc(50vw + 383px) 40px;;
    background-repeat: no-repeat, no-repeat;
}

#index .exam-intro {
    position: relative;
    z-index: 2;
    background-image: url(./img/top_cloud-x3.png);
    background-size: 1008px 113px;
    background-position: calc(50% - 52px) 60px;
    background-repeat: no-repeat;
}
#index .exam-intro > p {
    text-align: center;
    line-height: 2;
}
.headsub {
    color: #2b883a;
    font-size: 26px;
    text-align: center;
    margin: 30px auto 28px;
    font-weight: bold;
    line-height: 1.4;
}
.newhomes-list {
    position: relative;
    z-index: 3;
    margin-top: 58px;
    margin-bottom: 7px;
}
.property-list {
    position: relative;
    z-index: 3;
    margin-top: 58px;
    margin-bottom: 7px;
}
.newhomes-list ul {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.newhomes-list li {
    width: 540px;
    height: 540px;
    position: relative;
}
.newhomes-list_img {
    width: 492px;
    height: 280px;
    margin: 0 auto;
}
.newhomes-list_box {
    background-color: #2B883A;
    color: #ffffff;
    width: 412px;
    padding: 40px;
    position: absolute;
    top: 240px;
    left: 50%;
    transform: translateX(-50%);
}
.newhomes-list_box > p {
    line-height: 2;
    margin-top: 22px;
    font-weight: bold;
}
.newhomes-list_box .wrap {
    display: flex;
}
.circle-yellow {
    background-color: #FCCE00;
    color: #2B883A;
    font-size: 22px;
    width: 88px;
    height: 88px;
    border-radius: 44px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.newhomes-list_box h3 {
    font-size: 24px;
    margin-left: 15px;
    font-weight: bold;
    line-height: 1.8;
}
.exam-list {
    position: relative;
    margin-top: -40px;
    background-image: url(./img/bg_green-stripe.png);
    background-size: 27px 27px;
    background-position: left top;
    background-repeat: repeat;
}
.newhomes .exam-list::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 156px;
    background-color: #ffffff;
}
.property-list .exam-list::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 156px;
    background-color: #ffffff;
}
.reform .exam-list::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 155px;
    background-color: #ffffff;
}
.income .exam-list::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 174px;
    background-color: #ffffff;
}
.exam-list::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    height: 105px;
    background-color: #ffffff;
}
.exam-list .wrap {
    position: relative;
    z-index: 2;
    width: 1082px;
    margin: 0 auto;
    padding-bottom: 22px;
}
.newhomes .exam-list .wrap,
.income .exam-list .wrap,
.property-list .exam-list .wrap{
    padding-top: 52px;
    background-image: url(./img/top_bubble_0203_center@pc.png);
    background-size: 1082px 1px;
    background-position: left top;
    background-repeat: repeat-y;
}
.reform .exam-list .wrap {
    padding-top: 46px;
    background-image: url(./img/top_bubble_0203_center@pc.png);
    background-size: 1082px 1px;
    background-position: left top;
    background-repeat: repeat-y;
}
.exam-02_bg-up {
    position: relative;
    z-index: 2;
    width: 1082px;
    height: 84px;
    margin: 0 auto;
}
.exam-03_bg-up {
    position: relative;
    z-index: 2;
    width: 1082px;
    height: 100px;
    margin: 0 auto;
}
.exam-02_bg-low,
.exam-03_bg-low {
    position: relative;
    z-index: 2;
    width: 1082px;
    height: 10px;
    margin: 0 auto;
}
.exam-02_bg-low img,
.exam-03_bg-low img {
    vertical-align: top;
}
.exam-list h2 {
    font-size: 22px;
    line-height: 1;
    font-weight: bold;
    color: #2b883a;
    text-align: center;
    letter-spacing: 2px;
    position: relative;
    margin: 0 0 40px;
}
.exam-list h2::after {
    content: '';
    display: block;
    border-bottom: #2b883a 2px solid;
    width: 47px;
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
}

#index .box-cases {
    margin-bottom: 26px;
}
#index .box-cases .thumbnail {
    width: 280px;
    height: 190px;
}
#index .box-cases ul {
    width: 940px;
    margin: 0 auto;
    display: flex;
}
#index .box-cases ul li {
    width: 280px;
    margin-bottom: 16px;
}
#index .box-cases ul li:nth-child(3n+1),
#index .box-cases ul li:nth-child(3n+2) {
    margin-right: 50px;
}
#index .box-cases .title-cases {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 2px 2px 0 2px;
    margin: 4px 0 0;
}
#index .box-cases .title-cases h3 {
    margin-right: 15px;
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 6px;
}
#index .box-cases .title-cases p.place {
    background-color: #2b883a;
    font-size: 16px;
    color: #ffffff;
    padding: 4px 7px 4px 7px;
    letter-spacing: .2em;
    text-align: center;
    margin: 0 10px 6px 0;
}
#index .box-cases .status-cases {
    padding: 0 2px 0 2px;
    line-height: 1.6;
}

.strong {
    text-align: center;
    margin-top: 62px;
    margin-bottom: 45px;
    position: relative;
}
.strong p {
    color: #2B883A;
    font-size: 22px;
    font-weight: bold;
    padding-bottom: 5px;
    display: inline-block;
    letter-spacing: 2px;
}
.strong::after {
    content: url(./img/top_bubble_04.png);
    width: 190px;
    height: 21px;
    display: block;
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translate(-50%, 100%);
}
.strong_point {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-bottom: 56px;
}
.point {
    margin: 0 43px;
    width: 213px;
    height: 213px;
    background-color: #2B883A;
    border-radius: 120px;
}
.point_title_box {
    font-family: 'Bree Serif', sans-serif;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.point_title {
    color: #FCCE00;
    letter-spacing: 2px;
    font-size: 24px;
}
.point_number {
    font-size: 66px;
    color: #FCCE00;
    line-height: 55px;
    margin-left: 5px;
}
.point_text {
    font-size: 22px;
    font-weight: bold;
    color: white;
    letter-spacing: 2px;
    margin-top: 10px;
    margin-bottom: 28px;
    line-height: 1.4;
}
.mt15 {
    margin-top: 24px;
    margin-bottom: 38px;
}

#index .reform {
    width: 100%;
    background-image: url(./img/top_cloud.png);
    background-size: 290px 147px;
    background-position: calc(50vw + 524px) 108px;
    background-repeat: no-repeat;
}
#index .reform .exam-list {
    background-image: url(./img/bg_green-stripe.png);
    background-size: 27px 27px;
    background-position: left top;
    background-repeat: repeat;
}
#index .income {
    margin-top: 26px;
    width: 100%;
    background-image: url(./img/top_cloud.png);
    background-size: 290px 147px;
    background-position: calc(50vw + 450px) top;
    background-repeat: no-repeat;
}
#index .income .exam-list {
    margin-top: -20px;
    margin-bottom: 106px;
}
@media screen and (max-width: 767px) {

    #index .newhomes {
        width: 100%;
        background-image: url(./img/top_cloud.png);
        background-size: 290px 147px;
        background-position: calc(50% + 145px) 1020px;
        background-repeat: no-repeat;
    }
    #index .exam-intro {
        position: relative;
        z-index: 2;
        background-image: url(./img/top_cloud-x3_sp.png);
        background-size: 446px 267px;
        background-position: center 30px;
        background-repeat: no-repeat;
        padding-top: 80px;
    }
    #index .reform .exam-intro,
    #index .income .exam-intro {
        background-image: url(./img/top_cloud-x2_sp.png);
        background-size: 445px 216px;
        background-position: center 30px;
        background-repeat: no-repeat;
    }
    #index .exam-intro > p {
        text-align: center;
        line-height: 1.5;
        width: 88%;
        letter-spacing: 1px;
        margin: 0 auto 16px;
    }
    .newhomes-list {
        position: relative;
        z-index: 3;
        margin: 48px auto 7px;
    }
    .newhomes-list ul {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: auto;
        position: relative;
    }
    .newhomes-list li {
        width: auto;
        height: auto;
        margin-bottom: 32px;

    }
    .newhomes-list_img {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .newhomes-list_box {
        background-color: #2B883A;
        color: #ffffff;
        width: 88%;
        padding: 32px 5vw 28px;
        position: relative;
        top: 240px;
        left: auto;
        top: -6vw;
        margin: 0 auto;
        transform: none;
    }
    .newhomes-list_box > p {
        line-height: 2;
        margin-top: 22px;
    }
    .newhomes-list_box .wrap {
        display: flex;
    }
    .newhomes-list .read-more {
        z-index: 3;
        width: 250px;
        margin: 12px auto 0;
    }
	
    .circle-yellow {
        background-color: #FCCE00;
        color: #2B883A;
        font-size: 22px;
        width: 88px;
        height: 88px;
        border-radius: 44px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .newhomes-list_box h3 {
        font-size: 24px;
        margin-left: 18px;
        font-weight: bold;
        line-height: 1.8;
    }
    .exam-list {
        position: relative;
        margin-top: 40px;
        background-image: url(./img/bg_green-stripe.png);
        background-size: 27px 27px;
        background-position: left top;
        background-repeat: repeat;
    }
    .newhomes .exam-list::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 156px;
        background-color: #ffffff;
    }
    .reform .exam-list::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 155px;
        background-color: #ffffff;
    }
    .income .exam-list::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 174px;
        background-color: #ffffff;
    }
    .exam-list::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        bottom: 0;
        width: 100%;
        height: 105px;
        background-color: #ffffff;
    }
    .exam-list .wrap {
        position: relative;
        z-index: 2;
        width: 335px;
        margin: 0 auto;
        padding-bottom: 22px;
    }
    .newhomes .exam-list .wrap,
    .income .exam-list .wrap {
        padding-top: 52px;
        background-image: url(./img/top_bubble_0203_center@sp.png);
        background-size: 335px 1px;
        background-position: left top;
        background-repeat: repeat-y;
    }
    .reform .exam-list .wrap {
        padding-top: 46px;
        background-image: url(./img/top_bubble_0203_center@sp.png);
        background-size: 335px 1px;
        background-position: left top;
        background-repeat: repeat-y;
    }
    .exam-02_bg-up {
        position: relative;
        z-index: 2;
        width: 335px;
        height: 84px;
        margin: 0 auto;
    }
    .exam-03_bg-up {
        position: relative;
        z-index: 2;
        width: 335px;
        height: 97px;
        margin: 0 auto;
    }
    .exam-02_bg-low,
    .exam-03_bg-low {
        position: relative;
        z-index: 2;
        width: 335px;
        height: 10px;
        margin: 0 auto;
    }
    .exam-02_bg-low img,
    .exam-03_bg-low img {
        vertical-align: top;
    }
    .exam-list h2 {
        font-size: 22px;
        line-height: 1;
        font-weight: bold;
        color: #2b883a;
        text-align: center;
        letter-spacing: 2px;
        position: relative;
        margin: 0 0 40px;
    }
    .exam-list h2::after {
        content: '';
        display: block;
        border-bottom: #2b883a 2px solid;
        width: 47px;
        position: absolute;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
    }
    #index .reform .headsub,
    #index .income .headsub {
        text-align: center;
    }
    #index .box-cases {
        margin-bottom: 26px;
    }
    #index .box-cases .thumbnail {
        width: 280px;
        height: 210px;
    }
    #index .box-cases ul {
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    #index .box-cases ul li {
        width: 280px;
        margin: 0 auto 36px;
    }
    #index .box-cases ul li:nth-child(3n+1),
    #index .box-cases ul li:nth-child(3n+2) {
        margin-right: auto;
    }
    #index .box-cases .title-cases {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 2px 2px 0 2px;
        margin: 4px 0 0;
    }
    #index .box-cases .title-cases h3 {
        margin-right: 15px;
        letter-spacing: 2px;
        font-weight: bold;
        margin-bottom: 6px;
    }
    #index .box-cases .title-cases p.place {
        background-color: #2b883a;
        font-size: 16px;
        color: #ffffff;
        padding: 4px 7px 4px 7px;
        line-height: 1;
        letter-spacing: .2em;
        text-align: center;
        margin: 0 10px 6px 0;
    }
    #index .box-cases .status-cases {
        padding: 0 2px 0 2px;
        line-height: 1.6;
    }

    .strong {
        text-align: center;
        margin-top: 36px;
        margin-bottom: 44px;
        position: relative;
    }
    .strong p {
        color: #2B883A;
        font-size: 22px;
        font-weight: bold;
        padding-bottom: 5px;
        display: inline-block;
        letter-spacing: 2px;
    }
    .strong::after {
        content: url(./img/top_bubble_04.png);
        width: 190px;
        height: 21px;
        display: block;
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translate(-50%, 100%);
    }
    .strong_point {
        display: block;
        margin-bottom: 56px;
    }
    .point {
        margin: 44px auto;
        width: 213px;
        height: 213px;
        background-color: #2B883A;
        border-radius: 50%;
    }
    .point_title_box {
        font-family: 'Bree Serif', sans-serif;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .point_title {
        color: #FCCE00;
        letter-spacing: 2px;
        font-size: 24px;
    }
    .point_number {
        font-size: 66px;
        color: #FCCE00;
        line-height: 55px;
        margin-left: 5px;
    }
    .point_text {
        font-size: 22px;
        font-weight: bold;
        color: white;
        letter-spacing: 2px;
        margin-top: 10px;
        margin-bottom: 28px;
        line-height: 1.4;
    }

    #index .reform {
        width: 100%;
        background: none;
    }
    #index .reform .exam-list {
        background-image: url(./img/bg_green-stripe.png);
        background-size: 27px 27px;
        background-position: left top;
        background-repeat: repeat;
    }
    #index .income {
        margin-top: 26px;
        width: 100%;
        background: none;
    }
    #index .income .exam-list {
        margin-top: 32px;
        margin-bottom: 80px;
    }
    .reform #index .exam-intro > p,
    .income #index .exam-intro > p {

       text-align: center;
    }

}
@media screen and (max-width: 375px) {

.newhomes-list_box h3 {
    margin-left: 10px;
}
}
/*/////////example/////////*/

.radius_12 {
    height: 24px;
    border-radius: 12px;
    text-align: center;
}
.example-text {
    margin: 12px 0;
}
.example-find {
    width: 75px;
}

.search_title {
    text-align: center;
    margin: 64px 0 18px;
}

form.search {
    margin: 0 auto;
    width: 1080px;
}

form.search .search_box {
    display: flex;
    justify-content: space-between;
    width: 854px;
    margin: 0 auto 56px;
}
form.search.income .search_box {
    justify-content: center;
}
form.search select {
    position: relative;
    width: 165px;
    height: 44px;
    line-height: 1;
    padding: 0 22px 0 0;
    font-size: 15px;
    line-height: 1;
    border: none;
    font-weight: bold;
    color: #333333;
}

form.search .select_wrap {
    position: relative;
    width: 230px;
    height: 46px;
    border-bottom: 2px solid #2b883a;
    display: flex;
}
form.search .select_wrap > p {
    width: 65px;
    height: 44px;
    line-height: 1;
    padding: 14px 0 15px;
    font-weight: bold;
}
form.search .select_wrap::after {
    content: "";
    display: block;
    background-color: #ffffff;
    width: 20px;
    height: 44px;
    position: absolute;
    z-index: 2;
    background-image: url(./img/button_down.png);
    background-size: 15px 15px;
    background-position: 0px 14px;
    background-repeat: no-repeat;
    right: 0;
    top: 0;
}
form.income .select_place {
    margin-right: 50px;
}

/*  */
.select_wrap {
    color: #333333;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}
.select_wrap select {
    width: 100%;
    padding-right: 1em;
    cursor: pointer;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.select_wrap select::-ms-expand {
    display: none;
}
.c-form .select_wrap::before {
    position: absolute;
    top: 2.6em;
    right: 2.8em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #666666;
    pointer-events: none;
}
.c-form .select_wrap select {
    font-size: 15px;
    line-height: 1;
    color: #333333;
    padding: 9px 15px;
    border: 1px solid #f2f2f2;
    background-color: #f2f2f2;
    cursor: text;
    display: block;
    height: 51px;
    width: 100%;
    box-sizing: border-box;
}

/*  */

.tags {
    width: 1080px;
    border: 1px solid #2b883a;
    padding: 18px 0;
    text-align: center;
    margin-bottom: 90px;
}
.tags h2 {
    margin-bottom: 10px;
}
.tags ul {
    width: 960px;
    overflow-y: hidden;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tags ul.row2 {
    height: 38px;
}
.tags ul li button {
    display: block;
    text-align: center;
    line-height: 1;
    background: #d5e7d8;
    padding: 7px 16px 6px;
    border-radius: 14px;
    margin: 0 0 10px 10px;
}
.tags ul li button.active {
    background-color: #2b883a;
    color: #ffffff;
}
.tags ul li:first-child {
    margin-right: 0;
    margin-left: 8px;
}

.tags_open {
    text-align: center;
    line-height: 15px;
    width: 96px;
    padding: 2px 18px 2px 0;
    background-image: url(./img/tags_open.png);
    background-size: 15px 15px;
    background-position: right 2px;
    background-repeat: no-repeat;
    margin: 16px auto 2px;
}
.tags_open:hover {
    cursor: pointer;
}
.tags_open.close {
    letter-spacing: 4px;
    padding-left: 16px;
    background-image: url(./img/tags_close.png);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0 80px;
    position: relative;
    font-size: 13px;
}
.pagination span, .pagination a {
    display: block;
    font-size: 16px;
    width: 45px;
    height: 45px;
    margin: 4px;
    padding: 14px 0;
    color: #2b883a;
    border: 2px solid #2b883a;
    background-color: #ffffff;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
    font-weight: bold;
}
/* ページ番号 */
.pagination .pager{
    width: 45px;
}
/* ホバー時 & 現在のページ */
.pagination a:hover,
.pagination .current  {
    color: #ffffff;
    background-color:  #2b883a;
}
/* 前へ */
.pagination a.before {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}
/* Page x / y */
.pagination span.page_num {
    display: none;
}

@media screen and (max-width: 767px) {

    .main_title {
        border-bottom: none;
        padding-bottom: calc(20vw + 22px);
    }
    .main_title h1 {
        margin: 0;
        font-size: 52px;
    }
    .main_title::after {
        content: "";
        display: block;
        width: 100vw;
        height: 20vw;
        position: absolute;
        bottom: -2px;
        background-image: url(./img/concept/concept_img_bg01_sp.png);
        background-size: 100vw 20vw;
        background-position: left bottom;
        background-repeat: no-repeat;
    }
    form.search {
        margin: 0 auto;
        width: 100%;
    }
    form.search .search_box {
        display: block;
        width: 88%;
        margin: 0 auto 56px;
    }
    form.search .select_wrap {
        margin: 0 auto 6px;
    }

    .tags {
        width: 88%;
        border: 1px solid #2b883a;
        padding: 18px 0;
        text-align: center;
        margin: 0 auto 90px;
    }
    .tags ul.row2 {
        height: 38px;
    }
    .tags ul {
        width: 90%;
        overflow-y: hidden;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .tags ul li:first-child button {
        margin-left: 0;
    }
    .box-cases ul {
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    .box-cases ul li:nth-child(3n+1), .box-cases ul li:nth-child(3n+2) {
        margin-right: auto;
    }
    .box-cases ul li {
        width: 82%;
        margin: 0 auto 34px;
    }
    .box-cases .thumbnail {
        width: 80vw;
        height: 54.6vw;
        margin: 0 auto;
        overflow-y: hidden;
    }
    .box-cases .title-cases {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 2px 2px 0 2px;
        margin: 10px 0 0;
    }
    .box-cases .status-cases {
        padding: 0 2px 2px 2px;
    }
    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 40px 0 80px;
        position: relative;
        font-size: 11px;
    }
    .pagination .pager {
        width: 40px;
    }
    .pagination a,
    .pagination span {
        display: block;
        font-size: 16px;
        width: 40px;
        height: 40px;
        margin: 4px;
        padding: 12px 0;
        color: #2b883a;
        border: 2px solid #2b883a;
        background-color: #ffffff;
        text-decoration: none;
        text-align: center;
        line-height: 16px;
        font-weight: bold;
    }

}


/*/////////example-single/////////*/

.single-example {
    display: flex;
    width: 1080px;
    margin:0 auto 38px;
}
.photo {
    margin-right: 78px;
}
.photo img {
    display: block;
}
.photo .photo-main {
    margin-bottom: 28px;
    width: 597px;
    height: 404px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}
.photo .photo-main img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.photo .photo-thumb {
    width: 597px;
}
.photo .photo-thumb ul {
    display: flex;
    flex-wrap: wrap;
}
.photo .photo-thumb ul li {
    width: 91px;
    height: 65px;
    margin: 0 10px 10px 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.photo .photo-thumb ul li img {
    cursor: pointer;
}
.photo .photo-thumb ul li img:hover {
    opacity: 0.6;
    filter: opacity(60);
}

.photo .photo-thumb ul li:nth-child(6n+6) {
    margin-right: 0;
}
.status {
    width: 405px;
    font-weight: bold;
    border-bottom: 2px solid #2b883a;
    margin-bottom: 24px;
}
.status h1 {
    font-size: 26px;
    color: #2b883a;
    margin-bottom: 16px;
    font-weight: bold;
    line-height: 1.6;
}
.status .status_wrap {
    display: flex;
    justify-content: space-between;
}
.status .status-main {
    margin-bottom: 14px;
    font-size: 17px;
    line-height: 1.2;
    margin-right: 16px;
}
.status .status-main p {
    margin-bottom: 8px;
    white-space: nowrap;
}
.status .place_wrap {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}
.status .place_wrap .place {
    background-color: #2b883a;
    font-size: 16px;
    color: #ffffff;
    padding: 4px 7px 4px 7px;
    line-height: 1;
    letter-spacing: .2em;
    text-align: center;
    margin: 0 10px 8px 0;
}
.description {
    width: 405px;
    margin-bottom: 24px;
    line-height: 1.7;
    font-weight: bold;
}
.single-example .tags {
    width: 405px;
    border: none;
    padding: 0;
    text-align: left;
    margin-bottom: 24px;
}
.single-example .tags ul {
    width: auto;
    height: auto;
    overflow-y: hidden;
    margin: 0 0 56px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.single-example .tags ul li {
    text-align: center;
    line-height: 1;
    background-color: #d5e7d8;
    padding: 7px 16px;
    border-radius: 14px;
    margin: 0 0 10px 10px;
}
.single-example .tags ul li:hover {
    background-color: #2b883a;
    color: #ffffff;
}
.voice {
    width: 405px;
}
.voice > p {
    line-height: 1.8;
    font-size: 14px;
}
.voice .bubble {
    position: relative;
    width: 115px;
    height: 26px;
    font-size: 18px;
    background-color: #2b883a;
    color: #ffffff;
    line-height: 1;
    padding: 4px 0;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 24px;
}
.voice .bubble::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -13px;
    left: calc(50% - 6.5px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 6.5px 0 6.5px;
    border-color: #2b883a transparent transparent transparent;
}

.other-example {
    width: 100%;
    background-color: #fafafa;
    padding: 50px 0;
}
.other-example h2 {
    font-size: 22px;
    text-align: center;
    color: #2b883a;
    letter-spacing: 2px;
    line-height: 1.6;
    margin-bottom: 42px;
    font-weight: bold;
}
.other-example h2::after {
    content: "";
    display: block;
    width: 47px;
    height: 0;
    margin: 0 auto;
    margin-top: 6px;
}
.other-example .box-cases {
    margin-bottom: 0;
}
.other-example .box-cases ul li:nth-child(3n+1),
.other-example .box-cases ul li:nth-child(3n+2) {
    margin-right: 0;
}
.other-example .box-cases ul li:nth-child(4n+1),
.other-example .box-cases ul li:nth-child(4n+2),
.other-example .box-cases ul li:nth-child(4n+3) {
    margin-right: 30px;
}
.other-example .box-cases ul li {
    width: 247px;
/*     padding-bottom: 32px; */
    position: relative;
}
.other-example .box-cases ul li a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}
.other-example .box-cases ul li:hover {
    opacity: 0.6;
    filter: opacity(60);
}
.other-example .box-cases ul li.error_example {
    margin: 64px auto 32px;
    width: 100%;
    font-weight: bold;
}
.other-example .box-cases ul li.error_example:hover {
    opacity: 1;
    filter: opacity(1);
}
.other-example .box-cases .thumbnail {
    width: 247px;
    height: 168px;
    overflow-y: hidden;
}
.other-example .box-cases .title-cases {
    padding: 2px 2px 0 2px;
    margin: 8px 0 0;
}
.other-example .box-cases .title-cases h3 {
    margin-right: 12px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.other-example .box-cases .title-cases p.place {
    font-size: 15px;
    padding: 4px 0px 4px 7px;
    width: 58px;
    letter-spacing: .2em;
    text-align: center;
    margin: 0 10px 8px 0;
}
.other-example .box-cases .status-cases p {
    line-height: 1.6;
    font-size: 13px;
}

/*/////////example-newhome/////////*/


/*/////////example-reform/////////*/

.reform-before-after {
    width: 597px;
    margin-top: 38px;
    margin-bottom: 74px;
}

.reform-before > p,
.reform-after > p {
    font-size: 23px;
    margin-bottom: 8px;
}
.reform-before img,
.reform-after img {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
}
.reform-before ul,
.reform-after ul {
    position: relative;
    width: 274px;
    height: 202px;
}
.reform-before li,
.reform-after li {
    display: block;
    overflow: hidden;
    width: 274px;
    height: 202px;
    position: absolute;
    transition: opacity 0.78s, visibility 0s ease 0.78s;
    transition-delay: 0.02s;
    opacity: 1;
    visibility: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}
.reform-before-after .fade {
    opacity: 0;
    visibility: hidden;
}
.reform-before {
    margin-right: 50px;
}
.reform-before-after .wrap {
    display: flex;
    position: relative;
}
.reform-before-after .wrap::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 14px;
    border-color: transparent transparent transparent #2b883a;
    position: absolute;
    top: 128px;
    left: 294px;
}
.select-before-after ul  {
    display: flex;
    flex-wrap: wrap;
}
.select-before-after ul li {
    font-size: 16px;
    min-width: 115px;
    padding-left: 16px;
    padding-right: 16px;
    height: 26px;
    line-height: 1;
    border: 2px solid #2b883a;
    color: #2b883a;
    margin-top: 20px;
    margin-right: 10px;
}
.select-before-after ul li:hover {
    color: #ffffff;
    background-color: #2b883a;
}

/*/////////example-income/////////*/

.example-box_title {
    justify-content: space-between;
}


/*---------- 20181126 kobayashi add
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	.modelhouse-example .tags ul li {
    margin: 0 0 10px 4px;
	}
	
  .single-example {
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto 38px;
    padding: 0 6%;
  }
  .photo {
    width: 100%;
    margin: 0 auto;
  }
  .photo .photo-main {
    width: 100%;
    height: 65vw;
	  margin-bottom:0;
  }
  .photo .photo-thumb {
    width: 100%;
    margin-bottom: 38px;
  }
  .photo .photo-thumb ul li {
    overflow: hidden;
    width: 25vw;
    height: 17vw;
    margin: 0;
  }
  .photo .photo-thumb ul li:nth-child(3n) {
    margin-right: 0;
  }
  .status, .description, .single-example .tags, .voice{
    width: 100%;
  }

  .reform-before-after .wrap {
      display: block;
  }
  .reform-before-after {
    width: 100%;
    margin-top: 38px;
    margin-bottom: 40px;
  }
  .reform-before {
    width: 100%;
    height: calc(40vw + 31px);
    margin-right: 0;
    margin-bottom: 54px;
  }
  .reform-after {
    width: 100%;
    height: calc(40vw + 31px);
  }
  .reform-before ul,
  .reform-after ul {
    width: 100%;
    height: auto;
  }
  .reform-before li,
  .reform-after li {
    width: 100%;
    height: 40vw;
  }
  .reform-before > p, .reform-after > p {
      font-size: 23px;
      line-height: 1;
      margin-bottom: 8px;
  }
  .reform-before-after .wrap::before {
    border-width: 3.9vw 4.2vw 0 4.2vw;
    border-color: #2b883a transparent transparent transparent;
    top: calc(40vw + 64px);
    left: 50%;
    transform: translateX(-50%);
  }
  .select-before-after {
    margin-top: 28px;
  }
  .other-example {
    padding-right: 6%;
    padding-left: 6%;
  }
  .other-example .box-cases ul li {
    width: 100%;
  }
  .other-example .box-cases ul li:nth-child(3n+1),
  .other-example .box-cases ul li:nth-child(3n+2) {
    margin: 0 auto;
  }
  .other-example .box-cases ul li:nth-child(4n+1),
  .other-example .box-cases ul li:nth-child(4n+2),
  .other-example .box-cases ul li:nth-child(4n+3) {
    margin: 0 auto;
  }
  .other-example .read-more {
    width: 65%;
  }
  .other-example .read-more a {
    width: 100%;
  }
  /* fotoer */
  .footer_contact{
    height: auto;
    padding: 60px 0 55px;
  }
  .footer_contact h3{
    margin-bottom: 23px
  }
  .footer_contact .wrapper{
    text-align: center;
    flex-direction: column;
  }
  .footer_contact .wrapper .phone{
    width: auto;
    margin-bottom: 20px;
  }
  .button_contact{
    width: 100%;
    margin-right: 0;
  }
  .button_contact a{
    margin: 0 auto;
  }
  .footer-lower {
    height: auto;
    padding-top: 68px;
    position: relative;
  }
  .footer-lower .wrapper{

  }
  .footer-lower .footer_logo{
    width: 100%;
    display: block;
    margin-top: 52px;
  }
  .footer-lower .footer_nav{
    width: 100%;
  }

  .footer-lower::before {
      display: none;
  }
  .footer-lower::after {
      content: "";
      display: block;
      position: relative;
      top: 0;
      left: 0;
      z-index: 2;
      height: 24vw;
      width: 100%;
      margin-bottom: 30px;
      background-image: url(./img/footer_bg_sp.png);
      background-repeat: no-repeat;
      background-size: 140vw 24vw;
      background-position: calc(50% + 40px) bottom;
  }
  .footer-lower .wrapper {
      max-width: 100%;
      display: block;
  }
  .footer-lower .footer_logo {
      display: block;
      width: 88%;
      margin: 52px auto 16px;
  }
  .footer-lower .footer_logo a {
      width: 142px;
      height: 83px;
      display: block;
      margin: 0 auto;
  }
  .footer-lower .footer_logo .adress {
      line-height: 1.8;
      padding-top: 0;
      text-align: center;
      margin-top: 16px;
  }
  .footer-lower .footer_logo .adress h2 {
      margin-top: 20px;
      margin-bottom: 0;
      color: #2b883a;
      font-size: 18px;
      font-weight: bold;
  }
  .footer-lower .footer_logo .adress p:nth-child(2) {
      margin-bottom: 0;
  }
  .footer-lower .footer_nav {
      width: 100%;
      height: 148px;
      margin-top: 38px;
      margin-bottom: 12px;
  }
  .footer-lower .footer_nav > ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: 148px;
      width: 316px;
      margin: 0 auto;
  }
  .footer-lower .footer_nav ul li {
      font-size: 12px;
      font-weight: bold;
      width: 158px;
      line-height: 1;
      margin-bottom: 6px;
  }
  .footer-lower .footer_nav span.example {
      position: relative;
      left: -4px;
  }
  .footer-lower .footer_nav ul.example {
      margin: 6px 0 0 14px;
  }
  .footer-lower .footer_nav ul li::before {
      margin-right: 8px;
  }
  .kaiteki {
    width: 196px;
    height: 148px;
    margin: 0 auto 38px;
  }
  .kaiteki img {
    width: 100%;
  }

  #scroll-top {
      position: absolute;
      left: calc(50% - 22px);
      bottom: 0;
      top: 40px;
  }
  #scroll-top p {
      top: 18px;
      left: 13px;
  }
}

/* ===================================
   土地・物件一覧ページ専用CSS
   =================================== */

/* カード全体 */
.property-cases li {
  position: relative;
  display: flex;
  flex-direction: column;
}

.property-cases li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* サムネイル */
.property-cases .thumbnail {
  width: 100%;
  margin-bottom: 16px;
}

.property-cases .thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* カードコンテンツラッパー（横並び3カラム） */
.card-content-wrapper {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* 左カラム：種別バッジ */
.card-left {
  flex-shrink: 0;
}

.property-type-badge {
  padding: 13.5px 9px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

/* 物件バッジ（緑） */
.property-type-badge.type-building {
  background-color: #2B883A;
  color: #ffffff;
}

/* 土地バッジ（黄色） */
.property-type-badge.type-land {
  background-color: #FCCE00;
  color: #000000;
}

/* 中央カラム：タイトル・坪数・間取り */
.card-center {
  flex: 1;
  min-width: 0;
}

.card-center h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 物件タイトル（緑） */
.card-center h3.title-building {
  color: #2B883A;
}

/* 土地タイトル（黒） */
.card-center h3.title-land {
  color: #000000;
}

.card-center .status-cases {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-center .status-cases p {
  font-size: 14px;
  color: #333333;
  margin: 0;
}

/* 右カラム：場所バッジ */
.card-right {
  flex-shrink: 0;
}

.place-badge {
	padding: 2px 10px 2px 13px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 5px;
  text-align: center;
  white-space: nowrap;
}

/* 物件の場所バッジ（緑） */
.place-badge.type-building {
  background-color: #2B883A;
  color: #ffffff;
}

/* 土地の場所バッジ（黄色） */
.place-badge.type-land {
  background-color: #FCCE00;
  color: #000000;
}

/* ===================================
   レスポンシブ対応（タブレット）
   =================================== */
@media screen and (max-width: 1024px) {
  .card-content-wrapper {
    gap: 10px;
  }

  .property-type-badge,
  .place-badge {
    padding: 6px 12px;
    font-size: 13px;
  }

  .card-center h3 {
    font-size: 16px;
  }

  .card-center .status-cases p {
    font-size: 13px;
  }
}

/* ===================================
   レスポンシブ対応（スマホ）
   =================================== */
@media screen and (max-width: 767px) {
  .card-content-wrapper {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* スマホでは種別と場所を上部に横並び */
  .card-left,
  .card-right {
    order: 1;
  }

  .card-center {
    order: 2;
    width: 100%;
  }

  .property-type-badge,
  .place-badge {
    padding: 6px 12px;
    font-size: 12px;
  }

  .card-center h3 {
    font-size: 15px;
  }

  .card-center .status-cases p {
    font-size: 12px;
  }
}
/* ===================================
   土地・物件 個別ページ専用CSS
   =================================== */

/* ===================================
   ヘッダー部分（種別・タイトル・金額）
   =================================== */
.landhouse-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
  border-bottom: 1px solid #DBC9BD;
  margin-bottom: 40px;
}

.landhouse-type-badge {
  flex-shrink: 0;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
}

.landhouse-type-badge.type-building {
  background-color: #2B883A;
  color: #ffffff;
}

.landhouse-type-badge.type-land {
  background-color: #FCCE00;
  color: #000000;
}

.landhouse-title {
  flex: 1;
  font-size: 28px;
  color: #2B883A;
  margin: 0;
}

.landhouse-price {
  flex-shrink: 0;
  text-align: right;
}

.landhouse-price .price-amount {
  font-size: 32px;
/*   font-weight: bold; */
  color: #2B883A;
}

.landhouse-price .price-unit {
  font-size: 18px;
  color: #333333;
  margin-left: 5px;
}

/* ===================================
   メインコンテンツ（画像と情報）
   =================================== */
#main .single-landhouse{
	max-width:1080px;
	margin:0 auto;
	flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        margin: 0 auto 38px;
/*         padding: 0 6%; */
}
.landhouse-content-wrapper {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

/* 左側：画像セクション */
.landhouse-images {
  flex: 1;
  max-width: 48%;
}

.photo-main {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.photo-main img {
  width: 100%;
  height: auto;
  display: block;
}

/* 状況バッジ */
.status-badge {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  z-index: 2;
	text-align:center;
}

.status-badge.status-available {
  background-color: #ffffff;
  color: #000000;
}

.status-badge.status-negotiation {
  background-color: #6AA21F;
  color: #ffffff;
}

.status-badge.status-sold {
  background-color: #707070;
  color: #ffffff;
}

/* 契約済みオーバーレイ */
.sold-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.sold-text {
 font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 50px;
    padding: 13px 24px;
}

/* サムネイルスライダー */
.photo-thumb {
  width: 100%;
}

.photo-thumb ul {
  display: flex;
/*   gap: 10px; */
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.photo-thumb li {
  flex-shrink: 0;
  width: 100px;
  height: 75px;
  cursor: pointer;
}

.photo-thumb li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}

.photo-thumb li:hover img {
  border-color: #2B883A;
}

/* 右側：物件情報 */
.landhouse-info {
  flex: 0 0 48%;
  display: flex;
  flex-direction: column;
  gap: 0;  /* 15px → 0 に変更 */
}

.info-row {
  display: flex;
  padding: 0;  /* 15px 20px → 0 に変更 */
  background: transparent;  /* #F7F7F7 → transparent に変更 */
  border-bottom: 1px solid #DBC9BD;  /* 追加 */
}

.info-row:first-child {
  border-top: 1px solid #DBC9BD;  /* 追加 */
}

.info-label {
  font-weight: normal;  /* bold → normal に変更 */
  font-size: 15px;  /* 17px → 15px に変更 */
  color: #ffffff;  /* #262727 → #ffffff に変更 */
  background-color: #2B883A;  /* 追加 */
  min-width: 163px;  /* 120px → 163px に変更 */
  flex-shrink: 0;
  padding: 15px 20px;  /* 追加 */
  display: flex;  /* 追加 */
  align-items: center;  /* 追加 */
}

.info-value {
  color: #262727;
  font-size: 15px;  /* 17px → 15px に変更 */
  flex: 1;
  padding: 15px 20px;  /* 追加 */
  background-color: #ffffff;  /* 追加 */
  display: flex;  /* 追加 */
  align-items: center;  /* 追加 */
}

/* ===================================
   お問い合わせボタン
   =================================== */
.contact-button-wrapper {
  text-align: center;
  margin: 50px 20px;
	max-width:1075px;
}

.contact-button {
  display: inline-block;
  background-color: #FCCE00;
  color: #2B883A;
  font-size: 20px;
  font-weight: bold;
  padding: 20px 60px;
  text-decoration: none;
	width:100%;
  border-radius: 50px;
  transition: opacity 0.3s;
}

.contact-button:hover {
  opacity: 0.8;
}

/* ===================================
   詳細情報（2カラムレイアウト）
   =================================== */
.landhouse-details {
  margin: 50px 0;
}

.details-row {
  display: flex;
  gap: 0;  /* 40px → 0 に変更 */
  margin-bottom: 0;
  border-bottom: 1px solid #DBC9BD;  /* 追加 */
}

.details-row:first-child {
  border-top: 1px solid #DBC9BD;  /* 追加 */
}

.details-row.full-width {
  display: flex;  /* block → flex に変更 */
  border-bottom: 1px solid #DBC9BD;  /* 追加 */
}

.detail-item {
  flex: 1;
  padding: 0;  /* 20px 0 → 0 に変更 */
  display: flex;
  gap: 0;  /* 20px → 0 に変更 */
  border-bottom: none;  /* 1px solid #e0e0e0 → none に変更 */
  border-right: 1px solid #DBC9BD;  /* 追加 */
}

.detail-item:last-child {
  border-right: none;  /* 追加 */
}

.detail-item.top {
  /* 削除してOK */
}

.details-row.full-width .detail-item {
  flex: 1;  /* 追加 */
  border-right: none;  /* 追加 */
}

.details-row {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid #DBC9BD;
}

.details-row:first-child {
  border-top: 1px solid #DBC9BD;
}

.detail-item {
  flex: 1;
  padding: 0;
  display: flex;
  gap: 0;
  border-bottom: none;
  border-right: 1px solid #DBC9BD;
}

.detail-item:last-child {
  border-right: none;
}

.detail-label {
  font-weight: normal;
  color: #ffffff;
  background-color: #2B883A;
  min-width: 163px;
  flex-shrink: 0;
  padding: 15px 20px;
  display: flex;
  align-items: flex-start;  /* flex-start に変更（複数行対応） */
  font-size: 15px;
}

.detail-value {
  color: #262727;
  flex: 1;
  line-height: 1.6;
  padding: 15px 20px;
  background-color: #ffffff;
  font-size: 15px;
  word-wrap: break-word;  /* 追加（長文対応） */
  white-space: pre-wrap;  /* 追加（改行対応） */
}

/* 設備等の行（全幅）とその上に隙間 */
.details-row.full-width {
  display: flex;
  border-bottom: 1px solid #DBC9BD;
}

.details-row.full-width .detail-item {
  flex: 1;
  border-right: none;
}

/* 設備等 */
.equipments-item {
  display: flex !important;
}

.equipments-item .detail-label {
  align-items: flex-start;
}

.equipments-tags {
  display: flex;
  flex-wrap: wrap;
	align-content:center;
	padding: 15px 20px;
  gap: 8px;
  margin: 0;
}

.equipment-tag {
  display: inline-block;
  background-color: #E8F5E9;
  color: #2B883A;
	width: 77px;
    height: 27px;
  padding: 2px 19px;
  border-radius: 15px;
  font-size: 13px;
  white-space: nowrap;
}

/* ===================================
   地図画像
   =================================== */
.landhouse-map {
  margin: 50px 0;
}

.landhouse-map img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===================================
   同じエリアの他の施工事例
   =================================== */
.other-example {
  margin: 80px auto 0;
}

.other-example h2 {
  font-size: 22px;
	text-align: center;
	color: #2b883a;
	letter-spacing: 2px;
	line-height: 1.6;
	margin-bottom: 42px;
	font-weight: bold;
}

.other-example h2::after {
  content: "";
    display: block;
    width: 47px;
    height: 0;
    border-top: 2px solid #2b883a;
    margin: 0 auto;
    margin-top: 6px;
}

.other-example .box-cases {
  margin-bottom: 40px;
}

.other-example .box-cases ul {
  width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

/* .other-example .read-more {
  text-align: center;
  margin-top: 40px;
} */

/* .other-example .read-more a {
  display: inline-block;
  background-color: transparent;
  color: #2B883A;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 50px;
  text-decoration: none;
  border: 2px solid #2B883A;
  border-radius: 50px;
  transition: all 0.3s;
} */

.other-example .read-more a:hover {
  background-color: #2B883A;
  color: #ffffff;
}

/* ===================================
   レスポンシブ対応（タブレット）
   =================================== */
@media screen and (max-width: 1024px) {
  .landhouse-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .landhouse-title {
    font-size: 24px;
	flex:none;
  }

  .landhouse-price .price-amount {
    font-size: 28px;
  }

  .landhouse-content-wrapper {
    flex-direction: column;
    gap: 30px;
	margin-bottom:0;
  }

  .landhouse-images {
    max-width: 100%;
  }

  .landhouse-info {
    flex: 1;
  }

  .other-example .box-cases ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ===================================
   レスポンシブ対応（スマホ）
   =================================== */
@media screen and (max-width: 767px) {
.landhouse-info {
    flex: 1;
  }
	
	#main .single-landhouse{
        padding: 0 5%;
}

  .info-row {
    flex-direction: column;  /* 追加 */
    gap: 0;  /* 追加 */
    padding: 0;  /* 追加 */
  }

  .info-label {
    min-width: auto;  /* 追加 */
    width: 100%;  /* 追加 */
    padding: 10px 15px;  /* 追加 */
    font-size: 14px;  /* 追加 */
  }

  .info-value {
    width: 100%;  /* 追加 */
    padding: 10px 15px;  /* 追加 */
    font-size: 14px;  /* 追加 */
  }

  .details-row {
    flex-direction: column;  /* 追加 */
    gap: 0;  /* 追加 */
  }

  .detail-item {
    flex-direction: column;  /* 変更 */
    gap: 0;  /* 変更 */
    padding: 0;  /* 変更 */
    border-right: none;  /* 追加 */
    border-bottom: 1px solid #DBC9BD;  /* 追加 */
  }

  .detail-item:last-child {
    border-bottom: none;  /* 追加 */
  }

  .details-row:last-child .detail-item:last-child {
    border-bottom: none;  /* 追加 */
  }

  .detail-label {
    min-width: auto;  /* 変更 */
    width: 100%;  /* 追加 */
    padding: 10px 15px;  /* 変更 */
    font-size: 14px;  /* 変更 */
  }

  .detail-value {
    width: 100%;  /* 追加 */
    padding: 10px 15px;  /* 変更 */
    font-size: 14px;  /* 変更 */
  }

  .details-row.full-width .detail-label {
    min-width: auto;  /* 追加 */
  }

  .equipment-tag {
    font-size: 12px;  /* 追加 */
    padding: 5px 12px;  /* 追加 */
  }
	
  .landhouse-header {
    padding: 10px 0;
	  margin-bottom:10px;
  }

  .landhouse-type-badge {
    padding: 3px 15px;
	  font-size: 18px;
	  letter-spacing: 5px;
	  text-indent: 5px;
  }

  .landhouse-title {
    font-size: 26px;
	  width: 100%;
	  font-weight: bold;
  }

  .landhouse-price {
    width: 100%;
    text-align: right;
  }

  .landhouse-price .price-amount {
    font-size: 26px;
	letter-spacing: 3px;
  }

  .landhouse-price .price-unit {
    font-size: 17px;
    font-weight: bold;
  }

  .landhouse-content-wrapper {
    gap: 0;
  }

  .info-row {
    flex-direction: column;
    gap: 5px;
  }

  .info-label {
    min-width: auto;
  }

  .contact-button {
    font-size: 18px;
    padding: 15px 40px;
    width: 100%;
    max-width: 350px;
  }

  .details-row {
    flex-direction: column;
    gap: 0;
  }

  .detail-item {
    gap: 8px;
  }

  .sold-text {
    font-size: 32px;
    padding: 15px 30px;
  }

  .other-example h2 {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .other-example .box-cases ul {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Google Maps埋め込み用のレスポンシブ対応 */
.landhouse-googlemap {
    margin: 60px 0;
}

.landhouse-googlemap h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
    overflow: hidden;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* サムネイルスライダー */
.landhouse-slider {
    position: relative;
    margin: 20px 0;
    padding: 0; /* パディングを削除 */
}

.landhouse-slider ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.landhouse-slider ul li {
    cursor: pointer;
    padding: 0 3px; /* 左右3pxずつ = 合計6pxの隙間 */
}

.landhouse-slider ul li img {
    width: 100%;
    height: auto;
    border: 2px solid transparent;
    transition: border-color 0.3s;
    display: block;
}

.landhouse-slider ul li img:hover {
    border-color: #28a745; /* 緑色に変更 */
}

/* Slick矢印ボタン - 白背景に緑の枠線と緑の矢印 */
.slick-prev,
.slick-next,
.slick-prev-custom,
.slick-next-custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #ffffff; /* 白の背景 */
    color: #28a745; /* 緑の矢印 */
    border: 2px solid #28a745; /* 緑の枠線 */
    width: 30px;
    height: 30px;
    border-radius: 50%; /* 丸く */
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slick-prev,
.slick-prev-custom {
    left: -20px; /* サブスライドの外枠に重なるように */
}

.slick-next,
.slick-next-custom {
    right: -20px; /* サブスライドの外枠に重なるように */
}

.slick-prev:hover,
.slick-next:hover,
.slick-prev-custom:hover,
.slick-next-custom:hover {
    background: #f0f0f0; /* ホバー時は少しグレーがかった白 */
    transform: translateY(-50%) scale(1.05); /* 少し大きく */
}

/* 矢印の見た目を改善 */
/* .slick-prev::before,
.slick-prev-custom::before {
    content: '‹';
    font-size: 28px;
    line-height: 1;
    color: #28a745;
}

.slick-next::before,
.slick-next-custom::before {
    content: '›';
    font-size: 28px;
    line-height: 1;
    color: #28a745;
} */

/* スマホ表示時の調整 */
@media (max-width: 767px) {
    .landhouse-slider ul li {
        padding: 0 2px; /* スマホでは少し狭く */
    }
    
    .slick-prev,
    .slick-next,
    .slick-prev-custom,
    .slick-next-custom {
        width: 14px;
        height: 14px;
        font-size: 14px;
        border: 1px solid #28a745;
        left: -10px;
        right: -10px;
    }
    
    .slick-prev,
    .slick-prev-custom {
        left: -10px;
    }
    
    .slick-next,
    .slick-next-custom {
        right: -10px;
		left:initial;
    }
}

/* タブレット表示時の調整 */
@media (min-width: 768px) and (max-width: 1023px) {
    .landhouse-slider ul li {
        padding: 0 2.5px; /* タブレットでは中間 */
    }
}

/* 同じエリアの施工事例 - カードレイアウト（single-landhouse専用） */
.other-example .property-cases .card-content-wrapper-landhouse {
	padding: 15px 10px;
}

.other-example .property-cases .card-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 5px;
}

.other-example .property-cases .card-header-row h3 {
	flex: 1;
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	line-height: 1.4;
}

.other-example .property-cases .card-header-row h3.title-building {
	color: #2B883A;
}

.other-example .property-cases .card-header-row h3.title-land {
	color: #2B883A;
}

.other-example .property-cases .place-badge-landhouse {
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: bold;
	white-space: nowrap;
}

.other-example .property-cases .place-badge-landhouse.type-building {
	background-color: #2B883A;
	color: #ffffff;
}

.other-example .property-cases .place-badge-landhouse.type-land {
	background-color: #2B883A;
	color: #ffffff;
}

.other-example .property-cases .card-type-row {
	display: flex;
	align-items: center;
	font-size: 14px;
}

.other-example .property-cases .card-type-row .type-label {
	font-weight: bold;
	color: #333333;
	margin-right: 5px;
}

.other-example .property-cases .card-type-row .type-value {
	font-weight: bold;
}

.other-example .property-cases .card-type-row .type-value.type-building {
	color: #2B883A;
}

.other-example .property-cases .card-type-row .type-value.type-land {
	color: #000000;
}

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
	.other-example .property-cases .card-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	
	.other-example .property-cases .place-badge-landhouse {
		align-self: flex-end;
	}
}

/* ===================================
   モデルハウス情報ページ専用CSS
   =================================== */

.modelhouse-page {
	background-color: #ffffff;
}

/* ===================================
   3つの特徴セクション
   =================================== */
.modelhouse-features {
	padding: 80px 0 60px;
	margin-top:65px;
	background-image: url(./img/bg_pink-line.png);
	background-size: 27px 27px;
	background-position: left top;
	background-repeat: repeat;
	position: relative;
}

.modelhouse-features svg {
	display: block;
	position: absolute;
	top: 0; /* 一番上に配置 */
	left: 0;
	width: 100%;
	height: auto;
	z-index: 1;
}

/* ヘッダーとカードをSVGより前面に */
.features-header,
.features-cards {
	position: relative;
	z-index: 2;
}

.modelhouse-features::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	background-color: #ffffff;
}

.features-header {
	text-align: center;
	margin-bottom: 50px;
}

.features-header h2 {
	display: inline-block;
	background-color: #2B883A;
	color: #ffffff;
	font-size: 20px;
	font-weight: bold;
	padding: 8px 24px;
	margin: 0;
	line-height: 1.4;
}

.features-cards {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.feature-card {
	flex: 1;
	background-color: #ffffff;
	padding: 40px 30px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feature-icon {
	width: 120px;
	height: 120px;
	margin: 0 auto 20px;
	background-color: #2B883A;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-icon img {
	width: 100px;
	height: 100px;
	object-fit: contain;
}

.feature-title {
	font-size: 18px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 16px;
	line-height: 1.4;
}

.feature-description {
	font-size: 14px;
	line-height: 1.8;
	color: #333333;
	text-align:left;
}

/* ===================================
   省エネ・ゼロエネルギー住宅セクション
   =================================== */
.modelhouse-bels {
	padding: 80px 0;
	background-color: #ffffff;
}

.bels-container {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 100px;
	padding: 60px;
	position: relative;
	justify-content: center;
}

/* 四隅の角の装飾 */
.corner {
	position: absolute;
	width: 20px;
	height: 20px;
	border-style: solid;
	border-color: #2B883A;
	border-width: 0;
}

/* 左上の角 */
.corner-top-left {
	top: 0;
	left: 0;
	border-top-width: 3px;
	border-left-width: 3px;
}

/* 右上の角 */
.corner-top-right {
	top: 0;
	right: 0;
	border-top-width: 3px;
	border-right-width: 3px;
}

/* 左下の角 */
.corner-bottom-left {
	bottom: 0;
	left: 0;
	border-bottom-width: 3px;
	border-left-width: 3px;
}

/* 右下の角 */
.corner-bottom-right {
	bottom: 0;
	right: 0;
	border-bottom-width: 3px;
	border-right-width: 3px;
}

.bels-image {
	flex-shrink: 0;
	width: 280px;
}

.bels-image img {
	width: 100%;
	height: auto;
	display: block;
}

.bels-content {
	flex: 1;
	max-width:455px;
}

.bels-title {
	font-size: 26px;
	font-weight: bold;
	color: #2B883A;
	margin-bottom: 24px;
	line-height: 1.4;
}

.bels-description {
	font-size: 15px;
	line-height: 1.8;
	color: #2B883A;
	font-weight: 600;
}

/* ===================================
   モデルハウスバナー
   =================================== */
.modelhouse-banner {
	max-width: 1200px;
	margin: 0 auto 80px;
}

.modelhouse-banner a {
	display: block;
}

.modelhouse-banner img {
	width: 100%;
	height: auto;
	display: block;
}

/* ===================================
   モデルハウス事例セクション（修正版）
   =================================== */
.modelhouse-example {
	padding: 60px 0 80px;
	background-color: #F9F9F9;
}

.example-header {
	text-align: center;
	margin-bottom: 50px;
}

.example-header h2 {
	font-size: 24px;
	font-weight: bold;
	color: #2B883A;
	padding-bottom: 16px;
	position: relative;
	display: inline-block;
}

.example-header h2::after {
	content: '';
	display: block;
	border-bottom: #2B883A 2px solid;
	width: 60px;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}

/* モデルハウスページの single-example を中央配置 */
.modelhouse-example .single-example {
	width: 1080px;
	margin: 0 auto;
	display: flex;
/* 	background-color: #ffffff; */
	padding: 40px;
}

/* 既存のスタイルを継承しつつ微調整 */
.modelhouse-example .photo {
	margin-right: 78px;
}

.modelhouse-example .status_wrap {
	width: 405px;
}

/* タグのスタイル調整 */
.modelhouse-example .tags {
	width: 100%;
	border: none;
	padding: 0;
	text-align: left;
	margin-bottom: 24px;
}

.modelhouse-example .tags ul {
	width: auto;
	height: auto;
	overflow-y: hidden;
	margin: 0 0 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.modelhouse-example .tags ul li {
	text-align: center;
	line-height: 1;
	background-color: #d5e7d8;
	padding: 7px 16px;
	border-radius: 14px;
	margin: 0 1px 10px 1px;
}

.modelhouse-example .tags ul li:first-child {
	margin-left: 0;
}

.modelhouse-example .tags ul li a {
	color: #2B883A;
	text-decoration: none;
}

.modelhouse-example .tags ul li:hover {
	background-color: #2b883a;
}

.modelhouse-example .tags ul li:hover a {
	color: #ffffff;
}

/* ===================================
   レスポンシブ対応（スマホ）
   =================================== */
@media screen and (max-width: 767px) {
	.modelhouse-example {
		padding: 40px 6% 60px;
	}
	
	.modelhouse-example .tags ul {
	margin: 0 0 40px;
}

	.example-header {
		margin-bottom: 30px;
	}

	.example-header h2 {
		font-size: 20px;
	}

	.modelhouse-example .single-example {
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		padding: 20px;
	}

	.modelhouse-example .photo {
		width: 100%;
		margin: 0 auto 38px;
	}

	.modelhouse-example .status_wrap {
		width: 100%;
	}
}

/* ===================================
   気になる物件や土地情報セクション
   =================================== */
.modelhouse-contact {
	padding: 100px 0 120px;
	background-color: #ffffff;
}

.contact-cloud-bg {
	position: relative;
	background-image: url(./img/under_cloud-x3.png);
	background-size: 1008px 113px;
	background-position: calc(50% - 52px) 60px;
	background-repeat: no-repeat;
	max-width: 1200px;
	margin: 0 auto;
}

.contact-content {
	text-align: center;
	padding-top: 60px;
	position: relative;
}

.contact-cloud-icon {
	position: absolute;
	width: 100px;
	height: 80px;
}

.contact-cloud-icon.left {
	left: 80px;
	top: 20px;
}

.contact-cloud-icon.right {
	right: 100px;
	top: 40px;
}

.contact-cloud-icon img {
	width: 100%;
	height: auto;
}

.contact-text.ta-center {
	padding-left:0;
	max-width: 800px;
	margin: 0 auto;
}

.contact-title {
	font-size: 26px;
	font-weight: bold;
	color: #2B883A;
	margin-bottom: 20px;
	line-height: 1.6;
}

.contact-description {
	font-size: 15px;
	line-height: 1.8;
	color: #333333;
}

.contact-button-wrapper {
	text-align: center;
}

.contact-button-large {
	display: inline-block;
	background-color: #FCCE00;
	color: #333333;
	font-weight: bold;
	padding: 20px 400px 20px 370px; /* 右側のpaddingを増やしてアイコンのスペースを確保 */
	text-decoration: none;
	border-radius: 50px;
	transition: opacity 0.3s;
	text-align: center;
	position: relative; /* 擬似要素の基準位置 */
}

.contact-button-large::after {
    content: '';
    display: block;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 27px;
    background-image: url(./img/btn-icon-square.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.contact-button-large:hover {
	opacity: 0.8;
}

/* アイコンもホバー時に一緒に動かしたい場合 */
.contact-button-large:hover::after {
	/* 例: 右に少し移動 */
	right: 22px;
	transition: right 0.3s;
}

.button-text-top {
	display: block;
	font-size: 20px;
	margin-bottom: 4px;
	color:#31722A;
}

.button-text-main {
	display: block;
	font-size: 32px;
	color:#31722A;
}

/* ===================================
   レスポンシブ対応（タブレット）
   =================================== */
@media screen and (max-width: 1024px) {
	.features-cards {
		max-width: 90%;
		gap: 20px;
	}

	.feature-card {
		padding: 30px 20px;
	}

	.bels-container {
		max-width: 90%;
		padding: 40px;
		gap: 40px;
	}

	.bels-image {
		width: 220px;
	}

	.example-container {
		max-width: 90%;
		padding: 30px;
		gap: 40px;
	}

	.example-images {
		width: 400px;
	}

	.contact-cloud-bg {
		max-width: 90%;
	}
		.map-container {
    padding-bottom: 132.25%;
}
	.landhouse-googlemap {
    margin: 30px 0 15px;
}
	.property-cases .thumbnail {
    margin-bottom: 14px;
}
	.other-example .property-cases .card-header-row h3 {
    flex: none;
}
	.other-example .property-cases .card-content-wrapper-landhouse {
    padding: 0 10px;
}
}

/* ===================================
   レスポンシブ対応（スマホ）
   =================================== */
@media screen and (max-width: 767px) {
	.contact-button-large::after {
    right: 45%;
    top: 70%;
		width: 28px;
		height: 16px;
	}
	
	.contact-button-wrapper {
    margin: 15px 0;
}
	.landhouse-details{
		margin:0;
	}
	/* 3つの特徴 */
	.modelhouse-features {
		padding: 60px 6% 40px;
	}

	.features-header {
		margin-bottom: 40px;
	}

	.features-header h2 {
		font-size: 18px;
		padding: 8px 20px;
		line-height: 1.6;
	}

	.features-cards {
		flex-direction: column;
		gap: 30px;
		max-width: 100%;
	}

	.feature-card {
		padding: 30px 20px;
	}

	.feature-icon {
		width: 100px;
		height: 100px;
	}

	.feature-icon img {
		width: 85px;
		height: 85px;
	}

	.feature-title {
		font-size: 16px;
	}

	.feature-description {
		font-size: 13px;
	}

	/* BELS */
	.modelhouse-bels {
		padding: 60px 6%;
	}

	.bels-container {
		flex-direction: column;
		padding: 30px 20px;
		gap: 30px;
		max-width: 100%;
	}

	/* スマホでは角を小さく */
/* 	.corner {
		width: 40px;
		height: 40px;
	} */

	.corner-top-left {
		border-top-width: 2px;
		border-left-width: 2px;
	}

	.corner-top-right {
		border-top-width: 2px;
		border-right-width: 2px;
	}

	.corner-bottom-left {
		border-bottom-width: 2px;
		border-left-width: 2px;
	}

	.corner-bottom-right {
		border-bottom-width: 2px;
		border-right-width: 2px;
	}

	.bels-image {
		width: 200px;
		margin: 0 auto;
	}

	.bels-title {
		font-size: 25px;
		text-align: left;
		margin-bottom: 16px;
	}

	.bels-description {
		font-size: 14px;
	}

	/* バナー */
	.modelhouse-banner {
		max-width: 94%;
		margin: 0 auto 60px;
	}

	/* モデルハウス事例 */
	.modelhouse-example {
		padding: 40px 6% 60px;
	}

	.example-header {
		margin-bottom: 0px;
	}

	.example-header h2 {
		font-size: 20px;
	}

	.example-container {
		flex-direction: column;
		padding: 20px;
		gap: 30px;
		max-width: 100%;
	}

	.example-images {
		width: 100%;
	}

	.example-thumbnails {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	.example-title {
		font-size: 20px;
	}

	.example-detail-item {
		font-size: 14px;
	}

	.example-tags {
		gap: 6px;
	}

	.example-tag {
		font-size: 12px;
		padding: 5px 12px;
	}

	.example-voice {
		padding: 20px;
	}

	.voice-title {
		font-size: 15px;
	}

	.voice-text {
		font-size: 13px;
	}

	/* 気になる物件 */
	.modelhouse-contact {
		padding: 60px 6% 30px;
        background-image: url(./img/under_cloud-x3sp.png);
        background-size: 125vw 110px;
        background-position: center 40px;
        max-width: 100%;
        background-repeat: no-repeat;
	}

/* 	.contact-cloud-bg {
		background-image: url(./img/under_cloud-x3sp.png);
		background-size: 140vw 100px;
		background-position: center 40px;
		max-width: 100%;
	} */

	.contact-content {
		padding-top: 0;
	}

	.contact-cloud-icon {
		width: 80px;
		height: 60px;
	}

	.contact-cloud-icon.left {
		left: 10px;
		top: 10px;
	}

	.contact-cloud-icon.right {
		right: 10px;
		top: 20px;
	}

	.contact-title {
		font-size: 24px;
		padding: 0 10px;
	}

	.contact-description {
		font-size: 15px;
		padding: 0 10px;
		text-align: left;
	}

	.contact-button-large {
		width: 90%;
		max-width: 350px;
		padding: 18px 40px 60px;
		border-radius: 75px;
	}

	.button-text-top {
		font-size: 13px;
	}

	.button-text-main {
		font-size: 18px;
	}
}

/* ===================================
   不動産ページ専用スタイル
   =================================== */

/* 不動産ページのカードレイアウト */
.property-cards ul {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
}

.property-card-item {
    width: 280px !important;
    background: #fff;
    margin-bottom: 60px !important;
    margin-right: 0 !important; /* 既存のルールを上書き */
}

.property-card-item .thumbnail {
    width: 280px;
    height: 190px;
}

.property-card-item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* カードコンテンツ */
.property-card-content {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 15px 0;
}

.property-card-left {
    flex-shrink: 0;
}

.property-card-center {
    flex: 1;
    min-width: 0;
}

.property-card-right {
    flex-shrink: 0;
}

/* タイトル */
.property-card-item .property-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
/*     overflow: hidden;
    text-overflow: ellipsis; */
    white-space: nowrap;
    color: #2B883A; /* 物件の場合は緑 */
}

/* 土地の場合はタイトルを黒に */
.property-card-item.type-land .property-title {
    color: #000;
}

/* 種別バッジ */
.property-card-item .property-type-badge {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.property-card-item .property-type-badge.type-building {
    background-color: #2B883A;
    color: #fff;
}

.property-card-item .property-type-badge.type-land {
    background-color: #FCCE00;
    color: #333;
}

/* 場所バッジ */
.property-card-item .place-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}

.property-card-item .place-badge.type-building {
    background-color: #2B883A;
    color: #fff;
}

.property-card-item .place-badge.type-land {
    background-color: #FCCE00;
    color: #333;
}

/* カード下部情報 */
.property-card-item .status-cases {
    padding: 0;
    font-size: 14px;
    color: #666;
}

.property-card-item .status-cases p {
    margin: 0;
    line-height: 1.4;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
    .property-card-item {
        width: calc(50% - 15px) !important;
    }
    
    .property-card-item .thumbnail {
        width: 100%;
    }
	
		.landhouse-slider {
    margin: 10px 0;
}
}

@media screen and (max-width: 767px) {
    .property-cards ul {
        gap: 20px;
        justify-content: center; /* 中央寄せ */
        margin: 0 auto; /* 追加 */
    }
    
    .property-card-item {
        width: 300px !important; /* 100% から 300px に変更 */
        margin: 0 auto 40px !important;
    }
    
    .property-card-item .thumbnail {
        width: 300px; /* 100% から 300px に変更 */
        height: 204px; /* 300pxに対して適切な高さに調整 */
    }
    
    .property-card-content {
        flex-wrap: wrap;
        padding: 12px 0;
    }
}

/* ===================================
   SP幅修正 - 土地・物件個別ページ
   =================================== */
@media screen and (max-width: 767px) {
    
   /* サムネイルスライダー - 6枚表示（51px x 36px） */
.landhouse-slider .slick-track {
    display: flex !important;
}

.landhouse-slider .slick-slide {
    width: 51px !important;
    height: auto;
    margin: 0 2px;
}

.landhouse-slider ul li {
    width: 51px !important;
    height: 36px !important;
    padding: 0 !important;
}

.landhouse-slider ul li img {
    width: 51px !important;
    height: 36px !important;
    object-fit: cover;
    border-width: 1px;
}

    /* 情報を横並び（表形式）に維持 */
    .landhouse-info .info-row {
        flex-direction: row !important;
    }

    .landhouse-info .info-label {
        min-width: 90px !important;
        width: 90px !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
    }

    .landhouse-info .info-value {
        flex: 1 !important;
        padding: 10px 8px !important;
        font-size: 13px !important;
		font-weight: bold;
    }

    /* 詳細情報も横並びに維持 */
    .landhouse-details .detail-item {
        flex-direction: row !important;
    }

    .landhouse-details .detail-label {
        min-width: 90px !important;
        width: 90px !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
    }

    .landhouse-details .detail-value {
        flex: 1 !important;
        padding: 10px 8px !important;
        font-size: 13px !important;
		font-weight: bold;
    }

    /* 設備等も横並び */
    .landhouse-details .equipments-item {
        flex-direction: row !important;
    }

    .landhouse-details .equipments-tags {
        padding: 8px;
        gap: 5px;
    }

    .landhouse-details .equipment-tag {
        width: auto;
        height: auto;
        padding: 3px 8px;
        font-size: 10px;
    }

    /* 同じエリアの他の施工事例 - SP表示修正 */
    .other-example {
        padding: 30px 4% 15px;
    }

    .other-example h2 {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .other-example .box-cases.property-cases ul {
        width: 100% !important;
        display: block !important;
    }

    .other-example .box-cases.property-cases ul li {
        width: 90% !important;
        max-width: 300px;
        margin: 0 auto 25px !important;
    }

    .other-example .box-cases.property-cases .thumbnail {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .other-example .property-cases .card-header-row {
        flex-direction: row !important;
        align-items: center !important;
    }

    .other-example .property-cases .place-badge-landhouse {
        align-self: center !important;
    }

    .other-example .read-more {
        width: 180px;
        margin: 15px auto 0;
    }

    .other-example .read-more a {
        font-size: 13px;
        padding: 10px 12px 10px 0;
    }
}