@charset "UTF-8";

:root{
    --default-font: 'Noto Sans JP';
    --font-family-EN: "Lato", sans-serif;
    --size-XXXL: 72px;
    --size-XXL: 42px;
    --size-XL: 30px;
    --size-L: 24px;
    --size-M: 20px;
    --size-S: 16px;
    --size-XS: 14px;
    --size-XXS: 12px;
    --color-primary-default-main: #FF5800;
    --color-primary-default-sub: #FF9D00;
    --color-primary-grayscale-black: #1C1C1C;
    --color-primary-grayscale-white: #FFFFFF;
    --color-primary-grayscale-light-gray: #F9F9F9;
    --color-primary-grayscale-gray: #B9B9B9;
    --color-primary-grayscale-deep-gray: #9C9C9C;
    --color-primary-grayscale-background-01: #F4F4F4;
    --color-primary-specific-line: #07B53B;
    --color-primary-specific-Instagram: #EA3383;
    --color-primary-specific-tel: #D82D2D;
    --color-primary-grayscale-border-light: #EBEBEB;
    --color-primary-grayscale-border-2: #D2D2D2;
    --color-primary-grayscale-border-3: #DADADA;
}

.l-contents {
    overflow: hidden;
}
.org-main {
    background: var(--color-primary-grayscale-white);
}
.under-page {
    width: 100%;
    padding-top: 40px;
}

.org-main *,
.breadcrumbs * {
    color: var(--color-primary-grayscale-black);
    font-family: var(--default-font);
}
.org-main * {
    font-size: var(--size-XS);
}

a:hover {
    opacity: 1;
}

/*-----------------------------------------
共通レイアウト
----------------------------------------- */

.bg-gray {
	background: var(--color-primary-grayscale-background-01);
}
.section__inner,
.page__inner {
    width: 1140px;
    margin: 0 auto;
}

/*-----------------------------------------
共通パンくず
----------------------------------------- */

.breadcrumbs {
    width: 1255px;
    padding: 18px 0 17px;
}
    .breadcrumbs__list {
        align-items: center;
    }

/*-----------------------------------------
共通タイトル(パターン別)
----------------------------------------- */

.org__headline {
    font-size: var(--size-L);
    border: none;
    padding: 0;
}

.section__headline--pattern1 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    font-size: var(--size-XXXL);
    font-weight: 700;
    line-height: 1;
    font-family: var(--text-Lato-font);
    margin-bottom: 30px;
}
    .section__headline--pattern1 span {
        font-size: var(--size-S);
        font-weight: 500;
        line-height: 1.8;
    }

.section__headline--pattern2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-size: var(--size-XXL);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 1.68px;
}
    .section__headline--pattern2 span {
        font-size: var(--size-L);
        font-weight: 700;
        line-height: 1;
        font-family: var(--font-family-EN);
        background: linear-gradient(134deg, var(--color-primary-default-main) 13.84%, var(--color-primary-default-sub) 85.38%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 0;
    }

[class*="contents__title--"] {
    font-size: var(--size-XL);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 1.2px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-primary-grayscale-border-3);
    margin-bottom: 30px;
    position: relative;
}
    [class*="contents__title--"] span {
        font-size: inherit;
        color: var(--color-primary-default-main);
    }

/*-----------------------------------------
もっと見る
----------------------------------------- */

[class*="more__button"] a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 50px;
    margin: 0 auto;
    padding-right: 5px;
    background: var(--color-primary-grayscale-black);
    border: 1px solid var(--color-primary-grayscale-black);
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.30); 
    border-radius: 5px;
    font-size: var(--size-S);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary-grayscale-white);
    transition: .4s;
    position: relative;
}
    [class*="more__arrow"] {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 22px;
        height: 22px;
        padding-left: 1px;
        background: var(--color-primary-grayscale-white);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
    }
        [class*="more__arrow"] svg {
            width: 5px;
            height: 8px;
            fill: none;
            stroke: var(--color-primary-grayscale-black);
        }

.more__button--orange a {
    background: var(--color-primary-default-main);
    border: 1px solid var(--color-primary-default-main);
}
.more__button--white a {
    color: var(--color-primary-grayscale-black);
    background: var(--color-primary-grayscale-white);
    border: 1px solid var(--color-primary-grayscale-white);
}
.more__button--line a {
    background: var(--color-primary-specific-line);
    border: 1px solid var(--color-primary-specific-line);
}
    .more__button--white a [class*="more__arrow"] {
        background: var(--color-primary-grayscale-black);
    }
        .more__button--orange a [class*="more__arrow"] svg {
            stroke: var(--color-primary-default-main);
        }
        .more__button--white a [class*="more__arrow"] svg {
            stroke: var(--color-primary-grayscale-white);
        }
        .more__button--line a [class*="more__arrow"] svg {
            stroke: var(--color-primary-specific-line);
        }

/*------- 物件リクエストもっと見る ------*/

.request__section .more__button--orange a {
    width: 400px;
    height: 96px;
    font-size: var(--size-M);
    padding-right: 14px;
}
    .request__section .more__button--orange a .more__arrow {
        width: 26px;
        height: 26px;
        right: 24px;
    }

/*-----------------------------------------
ページャー
----------------------------------------- */

.org-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
}
    [class*="org-pager__link--"] {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid #EBEBEB;
        background: #FFF;
        border-radius: 50%;
        padding-bottom: 2px;
        position: relative;
    }
    [class*="org-pager__link--"]:hover {
        background: #111;
    }
    [class*="org-pager__link--"].is-hide {
        opacity: 0;
        pointer-events: none;
    }
    .org-pager__link--prev {
        padding-right: 2px;
    }
        [class*="org-pager__link--"] svg {
            width: 7px;
            height: 11px;
            fill: none;
            stroke: #111;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        [class*="org-pager__link--"]:hover svg {
            stroke: #FFF;
        }
        .org-pager__link--prev svg {
            transform: translate(-50%, -50%) rotate(180deg);
        }
    .org-pager__list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    .org-pager__item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 23px;
        height: 23px;
    }
        .org-pager__item-link {
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
        }
        .org-pager__item-link:hover {
            color: #FF5800;
        }
        .org-pager__item span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #EBEBEB;
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            color: #FF5800;
        }

/*-----------------------------------------
ホバー効果
----------------------------------------- */

.u-hover-lift {
    display: block;
    transition: .4s;
}
.u-hover-lift:hover {
    transform: translateY(-7px);
    box-shadow: unset;
}

.u-hover-zoom {
    overflow: hidden;
}
.u-hover-zoom img {
    transition: .4s;
}
a:hover .u-hover-zoom img {
    transform: scale(1.05);
}

.u-hover-orange {
    transition: .4s;
}
.u-hover-orange:hover {
    color: var(--color-primary-default-main);
}
.search__link a.u-hover-orange:hover {
    border: 1px solid var(--color-primary-default-main);
}

[class*="more__button"] a:hover {
    background: var(--color-primary-grayscale-white);
    color: var(--color-primary-grayscale-black);
    box-shadow: unset;
}
.more__button--orange a:hover {
    color: var(--color-primary-default-main);
}
.more__button--white a:hover {
    background: var(--color-primary-grayscale-black);
    color: var(--color-primary-grayscale-white);
}
.more__button--line a:hover {
    color: var(--color-primary-specific-line);
}
    [class*="more__button"] a:hover [class*="more__arrow"] {
        background: var(--color-primary-grayscale-black);
    }
    .more__button--orange a:hover [class*="more__arrow"] {
        background: var(--color-primary-default-main);
    }
    .more__button--white a:hover [class*="more__arrow"] {
        background: var(--color-primary-grayscale-white);
    }
    .more__button--line a:hover [class*="more__arrow"] {
        background: var(--color-primary-specific-line);
    }
        [class*="more__button"] a:hover [class*="more__arrow"] svg {
            stroke: var(--color-primary-grayscale-white);
        }
        .more__button--white a:hover [class*="more__arrow"] svg {
            stroke: var(--color-primary-grayscale-black);
        }

/*-----------------------------------------
共通 Sショート取扱なし注記
----------------------------------------- */

/* Sショートの取り扱いが無い物件（org20）で、価格の代わりに出す注記の字送り。
   文言は Common_Model_Define_Bratto_PricePlan::SSHORT_UNAVAILABLE_TEXT が SSOT。
   金額ではないため価格クラス（short__price--* ＝ line-height:1・result-list__price ＝ 赤/太字）とは
   差し替えで使い、折り返す前提の字送りにする。
   出し先: 近隣・よく見られ／エリアトップ特集（bkncard）、トップ新着（newbkn）、
   問い合わせフォームの対象物件カード（contact）。いずれのページも本CSSを読む＝ここが唯一の定義。
   ※物件一覧カード（.result__card-price-unavailable）と物件詳細の料金タブ（.price__unavailable）は
     枠のサイズが異なるため各ページのCSSで持つ。 */
.sshort-unavailable {
    width: 100%;
    font-size: var(--size-XXS, 12px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-primary-grayscale-black, #1C1C1C);
}