/* 各ページ共通のＣＳＳ */

/* コンテナ幅 */
.row { width: 100%;}
.w100 { width: 100%;}
.w95 { width: 95%;}
.w90 { width: 90%;}
.w85 { width: 85%;}
.w80 { width: 80%;}
.w75 { width: 75%;}
.w70 { width: 70%;}
.w60 { width: 60%;}
.w50 { width: 50%;}
.w45 { width: 45%;}
.w40 { width: 40%;}
.w30 { width: 30%;}
.w25 { width: 25%;}
.w20 { width: 20%;}
.w15 { width: 15%;}
.w10 { width: 10%;}
.w5 { width: 5%;}

/* margin-top */
.margin5 { margin-top: 5px;}
.margin10 { margin-top:10px;}
.margin15 { margin-top: 15px;}
.margin20 { margin-top: 20px;}
.margin30 { margin-top: 30px;}
.margin40 { margin-top: 40px;}
.margin50 { margin-top: 50px;}
.margin60 { margin-top: 60px;}
.margin70 { margin-top: 70px;}
.margin80 { margin-top: 80px;}
.margin90 { margin-top: 90px;}
.margin100 { margin-top: 100px;}
.margin110 { margin-top: 110px;}
.margin120 { margin-top: 120px;}
.margin130 { margin-top: 130px;}
.margin140 { margin-top: 140px;}
.margin150 { margin-top: 150px;}
.margin160 { margin-top: 160px;}
.margin170 { margin-top: 170px;}
.margin180 { margin-top: 180px;}
.margin190 { margin-top: 190px;}
.margin200 { margin-top: 200px;}
.margin800 { margin-top: 800px;}

/* margin-bottom */
.margin5b { margin-bottom: 5px;}
.margin10b { margin-bottom: 10px;}
.margin20b { margin-bottom: 20px;}
.margin30b { margin-bottom: 30px;}
.margin40b { margin-bottom: 40px;}
.margin50b { margin-bottom: 50px;}
.margin60b { margin-bottom: 60px;}
.margin70b { margin-bottom: 70px;}
.margin80b { margin-bottom: 80px;}
.margin90b { margin-bottom: 90px;}
.margin100b { margin-bottom: 100px;}

/* */
.margin10all { margin:10px;}

/* padding */
.padding5r { padding-right: 5px;}
.padding10r { padding-right:10px;}
.padding10 { padding: 10px;}

/* indent */
.indent07 { margin-left: 0.75em;}
.indent10 { margin-left: 1em;}
.indent15 { margin-left: 1.5em;}
.indent20 { margin-left: 2em;}
.indent25 { margin-left: 2.5em;}
.indent30 { margin-left: 3em;}


/* flex */

.dflex { display: flex;}
.flexrw { flex-direction: row;}
.flexdc { flex-direction: column;}
.flex_xr { justify-content: flex-end;}
.flex_yc { align-items: center;}
.flex_xc { justify-content: center;}

.flexc {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lh16 { line-height: 16px;}
.lh20 { line-height: 20px;}
.lh22 { line-height: 22px;}
.lh24 { line-height: 24px;}
.lh40 { line-height: 40px;}
.lh48 { line-height: 48px;}

.textc { text-align:center;}
.textl { text-align: left;}
.textr { text-align: right;}

.text_s {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.img_disp {
    margin-left: auto;
    margin-right: auto;
}

    .img_disp img {
        width: 100%;
        height: auto;
    }


/* 売買・賃貸　基準カラー */

.wline_index {
    border-bottom: 1px #ffffff dotted;
}

.wline_bai {
    border-bottom: 1px #e9528e dotted;
}

.wline_chi {
    border-bottom: 1px #32ADFF dotted;
}

.wline_gray {
    border-bottom: 1px #969998 dotted;
}

.border_bai {
    border-radius: 6px;
    border: 4px solid #e9528e;
}

.border_chi {
    border-radius: 6px;
    border: 4px solid #32adff;
}

.bcolor_index {
    border-radius: 6px;
    border: 3px solid rgba(255, 255, 255, 0.12);
}

.bcolor_bai {
    background: #e9528e;
    color: #ffffff;
}

.bcolor_chi {
    background: #32adff;
    color: #ffffff;
}

.fcolor_bai {
    color: #e9528e;
}

.fcolor_chi {
    color: #32adff;
}

.bcolor_ffffff {
    background-color: #ffffff;
}

.bcolor_fcf2f2 {
    background-color: #fcf2f2;
}

.bcolor_fcffff {
    background-color: #f2ffff;
}

.wline {
    border-bottom: 1px #00CBFF dotted;
}

.uline {
    border-top: 1px #00CBFF dotted;
}


/* brightness */

.brightness {
    filter: brightness(70%);
}

/* loading-spinner */

.loading-spinner {
    width: 40px;
    height: 40px;
    margin: 150px auto;
    border: 4px solid #ddd;
    border-top: 4px solid #32ADFF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* google font */

html.fonts-loaded .Marcellus_SC {
    font-family: 'Marcellus SC', serif;
}

html.fonts-loaded .Sawarabi_Mincho {
    font-family: 'Sawarabi Mincho', sans-serif;
}

html.fonts-loaded .Kosugi_Maru {
    font-family: 'Kosugi Maru', sans-serif;
}

html.fonts-loaded .M_PLUS_1 {
    font-family: 'M PLUS 1', sans-serif;
}

html.fonts-loaded .Fredoka {
    font-family: 'Fredoka', sans-serif;
}

/* font-size */
.text10 { font-size: 77%;}
.text11 { font-size: 85%;}
.text12 { font-size: 93%;}
.text13 { font-size: 100%;}
.text14 { font-size: 108%;}
.text15 { font-size: 116%;}
.text16 { font-size: 123.1%;}
.text17 { font-size: 131%;}
.text18 { font-size: 138.5%;}
.text19 { font-size: 146.5%;}
.text20 { font-size: 153.9%;}
.text21 { font-size: 161.6%;}
.text22 { font-size: 167%;}
.text23 { font-size: 174%;}
.text24 { font-size: 182%;}
.text25 { font-size: 189%;}
.text26 { font-size: 197%;}
.text32 { font-size: 230%;}


/* font-color */
.red { color: #ff0000;}
.black { color: #000000;}
.white { color: #ffffff;}
.orange { color: #ffcc99;}
.orange2 { color: #FD5A2A;}
.green { color: #17775A;}
.blue { color: #0033ff;}
.title_blue { color: #0066ff;}
.title_red { color: #ff0000;}


/* font-weight */
.font_normal { font-weight: normal;}
.font_bold { font-weight: bold;}


/* 下から侵入表示 */
.slide-up {
    opacity: 0;
    transform: translateY(60px);
    /* transition: all 0.6s ease; */
    transition: all 0.6s cubic-bezier(.25,.8,.25,1);
}

    /* 表示後 */
    .slide-up.show {
        opacity: 1;
        transform: translateY(0);
    }

/* 左から侵入表示 */
.slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.6s ease;
}

    .slide-left.show {
        opacity: 1;
        transform: translateX(0);
    }

.youtube_contents {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

    .youtube_contents iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 8px;
    }

/* google map のマーカー吹き出し用 */

.info-window {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.info-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.info-address {
    margin-bottom: 6px;
}

.info-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.info-image {
    width: 80px;
    height: 60px;
    margin: 5px;
    border: none;
    display: block;
}

.info-details {
    font-size: smaller;
    display: block;
    margin-top: 2px;
}

/* 下に小さい字でコメントがある見出し */
.midashi01 {
    color: #333333;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .04em;
    text-align: center;
}

    .midashi01::before {
        display: block;
        font-weight: 700;
        font-size: 1.65rem;
        line-height: 1.5;
        letter-spacing: .02em;
        content: attr(data-label);
    }


/* 左に水色の縦ラインがある見出し */
.midashi2 {
    margin-left: 10px;
    padding: .2em .7em;
    border-left: 5px solid #2589d0;
    color: #333333;
}


/*--- 各ページの基本ヒーロー ---*/

.pc_hero {
    position: relative;
    max-width: 1080px;
    height: 520px;
    margin: 30px auto 50px;
    overflow: hidden;
    border-radius: 24px;
    background: #ddd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.08);
}

    .pc_hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
    }

    .pc_hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, rgba(0,0,0,0.45), rgba(0,0,0,0.15), rgba(0,0,0,0) );
    }

.pc_hero_text {
    position: absolute;
    left: 50px;
    bottom: 40px;
    z-index: 2;
    color: #fff;
}

    .pc_hero_text h1 {
        margin: 0;
        font-size: 38px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-shadow: 0 4px 14px rgba(0,0,0,0.3);
    }

    .pc_hero_text h2 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-shadow: 0 4px 14px rgba(0,0,0,0.3);
    }

    .pc_hero_text p {
        margin-top: 10px;
        font-size: 15px;
        letter-spacing: 0.08em;
        opacity: .92;
    }


/* pc_hero small版　トップメニュー用 */
.pc_hero_small {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: 18px;
    background: #ddd;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

    .pc_hero_small img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .pc_hero_small::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, rgba(0,0,0,.45), rgba(0,0,0,.15), rgba(0,0,0,0) );
    }

    .pc_hero_small .pc_hero_text {
        left: 25px;
        bottom: 25px;
    }

        .pc_hero_small .pc_hero_text h1 {
            font-size: 28px;
        }

        .pc_hero_small .pc_hero_text h2 {
            font-size: 20px;
        }

        .pc_hero_small .pc_hero_text p {
            font-size: 14px;
        }