@charset "UTF-8";

.l-main {
    width: auto;
    padding: 0 0 72px;
    background: #FFFFFF;
    overflow: hidden;
}

.l-main * {
    font-family: "Zen Kaku Gothic New", sans-serif;
}
.l-main {
    margin-bottom: 0;
}
.l-main a:hover {
    opacity: 1;
}
[class^="cmn__section--"] {
    padding: 80px 0;
}
[class^="cmn__title--"] {
    font-size: 36px;
    line-height: 1.5;
    color: #000;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}
[class^="cmn__title--"] span {
    font-size: 20px;
    color: #55CBCF;
    font-family: "Playfair Display", serif;
}
.cmn__section__inner {
    width: 1140px;
    margin: 0 auto;
}

/*---------------------------------------------------
メインビジュアル（複数枚スライダー）
- ビュー（表示枠）: 画面幅 100%
- 各スライド幅: 1180px（狭い画面は max-width で縮小）
- スライド間隔は JS の spaceBetween: 20
-----------------------------------------------------*/

.main__slider {
    box-sizing: border-box;
}

.main__slider #js-mv-swiper-mv.main__img,
.main__slider .main__img.swiper {
    width: 100%;
    max-width: 100%;
    height: 700px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: inherit;
}

.main__slider .swiper-wrapper {
    height: 100%;
}

.main__slider .swiper-slide {
    width: 1180px;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
}

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

.main__slider .swiper-pagination {
    bottom: -24px;
}
.swiper-pagination-bullet {
    width: 22px;
    height: 2px;
    border-radius: 0;
    background: #E3E4E5;
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background: #F56400;
}
/*---------------------------------------------------
共通：VIEW MORE ボタン
-----------------------------------------------------*/
.cmn__btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 197px;
    height: 52px;
    background: #fff;
    border: 1px solid #F56400;
    border-radius: 9999px;
    color: #F56400;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
    padding-left: 7px;
    margin: 0 auto;
}

.cmn__btn-more > span {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.2em;
    color: currentColor;
    white-space: nowrap;
}

.cmn__btn-more::after {
    content: '';
    flex-shrink: 0;
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url('/images/top/cmn-arrow.svg') no-repeat center / contain;
            mask: url('/images/top/cmn-arrow.svg') no-repeat center / contain;
    transition: background-color 0.25s ease;
}

.cmn__btn-more:hover,
.cmn__btn-more:focus-visible {
    background: #F56400;
    color: #fff;
}

/*---------------------------------------------------
更新情報
-----------------------------------------------------*/
.cmn__section--news {
    padding: 90px 0 150px;
}

.cmn__section--news .cmn__section__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1140px;
    margin: 0 auto;
}

/* 共通タイトル(中央寄せ)を当セクションのみ左寄せにオーバーライド */
.cmn__section--news .cmn__title--news {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: #000;
    text-align: left;
    white-space: nowrap;
}

.cmn__section--news .cmn__title--news span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* 左カラム */
.cmn__news__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px;
    flex-shrink: 0;
    margin-top: 0;
}

/* 右カラム */
.cmn__news__right {
    width: 860px;
    max-width: 100%;
    padding: 40px;
    background: #F8F8F8;
    border-radius: 15px;
    box-sizing: border-box;
}

/* リストラッパー(simplebar 対象) */
.cmn__news__list-wrap {
    width: 100%;
    height: 300px;
}

.cmn__news__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0 39px 0 0;
    list-style: none;
}

.cmn__news__item {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 10px;
}

/* 1件目以外は上に点線 */
.cmn__news__item + .cmn__news__item {
    padding-top: 20px;
    border-top: 1px solid #E1E1E1;
}

.cmn__news__item-link {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.cmn__news__item-link:hover {
    opacity: 0.7;
}

.cmn__news__item-date {
    flex-shrink: 0;
    width: 64px;
    margin: 0;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #F56400;
    white-space: nowrap;
}
.cmn__news__item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cmn__news__item-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
}

.cmn__news__item-body {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
}

/* simplebar スクロールバーのカラー上書き */
.cmn__news__list-wrap .simplebar-track.simplebar-vertical {
    width: 6px;
    background: #DFDBD9;
    border-radius: 10px;
    right: 0;
}

.cmn__news__list-wrap .simplebar-scrollbar::before {
    background: #F56400;
    border-radius: 10px;
    left: 0;
    right: 0;
    opacity: 1;
}

.cmn__news__list-wrap .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
}

/*---------------------------------------------------
事業内容
-----------------------------------------------------*/
.cmn__section--business {
    position: relative;
    padding: 150px 0;
    background: url('/images/top/buisiness__bg.webp') no-repeat center / cover;
    overflow: hidden;
}

.cmn__section--business .cmn__section__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    max-width: 1140px;
    margin: 0 auto;
}

/* 装飾(左上：自転車を引く女性 / 親子のイラスト) */
.cmn__section--business .cmn__section__inner::before {
    content: '';
    position: absolute;
    top: -83px;
    left: -24px;
    width: 163px;
    height: 127px;
    background: url('/images/top/business_illustration01.svg') no-repeat center / contain;
    pointer-events: none;
}

/* 装飾(右下：自転車に乗る親子のイラスト) */
.cmn__section--business .cmn__section__inner::after {
    content: '';
    position: absolute;
    bottom: -141px;
    right: -39px;
    width: 113px;
    height: 113px;
    background: url('/images/top/business_illustration02.svg') no-repeat center / contain;
    pointer-events: none;
}

/* 共通タイトル(中央寄せ・margin-bottom)を当セクションのみ上書き */
.cmn__section--business .cmn__title--business {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #000;
    text-align: center;
    white-space: nowrap;
}

.cmn__section--business .cmn__title--business span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* リード文 */
.cmn__business__lead {
    width: 992px;
    max-width: 100%;
    text-align: center;
}

.cmn__business__lead p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 2.2;
    color: #333;
}

/* 事業内容リスト */
.cmn__business__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    row-gap: 25px;
    width: 1140px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* アイテム */
.cmn__business__item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 356px;
    padding-top: 38px;
    list-style: none;
}

/* 番号バッジ（白い丸） */
.cmn__business__item-num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}

.cmn__business__item-num > span {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #F56400;
}

/* カード本体 */
.cmn__business__item-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 40px 20px 46px;
    background: #fff;
    border-radius: 15px;
}

.cmn__business__item-title {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    color: #F56400;
    text-align: center;
    z-index: 1;
}

.cmn__business__item-text {
    width: 290px;
    max-width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #333;
    text-align: left;
}

/*---------------------------------------------------
選ばれる理由
-----------------------------------------------------*/
.cmn__section--reason {
    padding: 150px 0;
    background: #fff;
}

.cmn__section--reason .cmn__section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    max-width: 1140px;
    margin: 0 auto;
}

/* 共通タイトル(中央寄せ・margin-bottom)を当セクションのみ上書き */
.cmn__section--reason .cmn__title--reason {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #000;
    text-align: center;
    white-space: nowrap;
}

.cmn__section--reason .cmn__title--reason span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* リスト */
.cmn__reason__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 1140px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 円形アイテム */
.cmn__reason__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 261px;
    height: 261px;
    padding: 43px 20px 0;
    background: #F8F8F8;
    border-radius: 9999px;
    list-style: none;
    box-sizing: border-box;
}

.cmn__reason__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}

.cmn__reason__item-icon img {
    display: block;
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.cmn__reason__item-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.cmn__reason__item-title {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
    white-space: nowrap;
}

.cmn__reason__item-body {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    white-space: nowrap;
}

/*---------------------------------------------------
ご利用のお客様へ
-----------------------------------------------------*/
.cmn__section--for-customers {
    position: relative;
    padding: 140px 0 150px;
    background: #F8F8F8;
}

.cmn__section--for-customers .cmn__section__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

/* 装飾(タイトル左の人物イラスト) */
.cmn__section--for-customers .cmn__section__inner::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 23px;
    width: 80px;
    height: 111px;
    background: url('/images/top/forcustomers_illustration.svg') no-repeat center / contain;
    pointer-events: none;
}

/* 共通タイトルを当セクション用に上書き */
.cmn__section--for-customers .cmn__title--for-customers {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: #000;
    text-align: center;
    white-space: nowrap;
}

.cmn__section--for-customers .cmn__title--for-customers span {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* リスト */
.cmn__for-customers__list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.cmn__for-customers__list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* バナー(リンク) */
.cmn__for-customers__item {
    position: relative;
    display: block;
    width: 555px;
    max-width: 100%;
    height: 236px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #363636;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-decoration: none;
}

.cmn__for-customers__item--01 {
    background-image: url('/images/top/forcustomer__bg01.webp');
}

.cmn__for-customers__item--02 {
    background-image: url('/images/top/forcustomer__bg02.webp');
}

.cmn__for-customers__item--03 {
    background-image: url('/images/top/forcustomer__bg03.webp');
}

.cmn__for-customers__item--04 {
    background-image: url('/images/top/forcustomer__bg04.webp');
}

/* 黒マスク(#363636 45% → hover で 25%) */
.cmn__for-customers__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(54, 54, 54, 0.45);
    border-radius: inherit;
    transition: background-color 0.3s ease;
    pointer-events: none;
}

.cmn__for-customers__item:hover::before,
.cmn__for-customers__item:focus-visible::before {
    background-color: rgba(54, 54, 54, 0.25);
}

/* 中身 (テキスト + ポイント) を縦中央で左右に配置 */
.cmn__for-customers__item-inner {
    position: absolute;
    top: 50%;
    left: 30px;
    right: 30px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 1;
}

/* 見出し + リード文 */
.cmn__for-customers__item-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 246px;
    color: #fff;
}

.cmn__for-customers__item-text h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
}

.cmn__for-customers__item-text p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #fff;
}

/* ポイントBOX (フロスト風) */
.cmn__for-customers__item-points {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 219px;
    margin: 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    list-style: none;
}

.cmn__for-customers__item-points > li {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    color: #333;
    white-space: nowrap;
}

.cmn__for-customers__item-points > li::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    background: #F56400;
    border-radius: 50%;
}

/* 矢印アイコン (右下) */
.cmn__for-customers__item-arrow {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 68px;
    height: 27px;
    background: url("/images/top/forcustomers_arrow.svg") no-repeat center / contain;
    z-index: 1;
    pointer-events: none;
}

/*---------------------------------------------------
共通：スライダー用ページャー
-----------------------------------------------------*/
.cmn__pager {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.cmn__pager__btn {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: #BDCBD4;
    cursor: pointer;
    color: #BDCBD4;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.cmn__pager__btn--prev {
    -webkit-mask: url('/images/top/prev-arrow.svg') no-repeat center / contain;
            mask: url('/images/top/prev-arrow.svg') no-repeat center / contain;
}

.cmn__pager__btn--next {
    -webkit-mask: url('/images/top/next-arrow.svg') no-repeat center / contain;
            mask: url('/images/top/next-arrow.svg') no-repeat center / contain;
}

.cmn__pager__btn:hover {
    background-color: #F56400;
}

.cmn__pager__btn.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.cmn__pager__count {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.2em;
    color: #333;
    white-space: nowrap;
}

/*---------------------------------------------------
お客様の声
-----------------------------------------------------*/
.cmn__section--review {
    position: relative;
    padding: 150px 0 80px;
    background: #fff;
    overflow: hidden;
}
.cmn__section--review .cmn__btn-more {
    margin-left: 0;
}

.cmn__section--review .cmn__section__inner {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 60px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 0 0 max(20px, calc((100% - 1140px) / 2));
}

.cmn__review__left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    width: 264px;
    flex-shrink: 0;
}
/* 装飾(オレンジ→シアンの縦ライン) */
.cmn__review__left::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -205px;
    width: 94px;
    height: 285px;
    background: url('/images/top/review_illustration.svg') no-repeat center / contain;
    pointer-events: none;
    z-index: 1;
}

.cmn__review__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 33px;
}

/* 共通タイトルを当セクション用に上書き(左カラム内で中央) */
.cmn__section--review .cmn__title--review {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 15px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #000;
    text-align: center;
    white-space: nowrap;
}

.cmn__section--review .cmn__title--review span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* 右側：Swiper */
.cmn__review__right {
    flex: 1 1 auto;
    min-width: 0;
}

/* Swiper の .swiper / .swiper-wrapper / .swiper-slide を使わず独自クラスで運用
   → Slick 等の外部 CSS と干渉しない */
.cmn__review-stage {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 1;
    touch-action: pan-y;
}

.cmn__review-wrap {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    transition-property: transform;
    box-sizing: content-box;
    z-index: 1;
}

.cmn__review-cell {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 360px;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    box-sizing: border-box;
    transition-property: transform;
    float: none !important;
}

/* お客様カード(リンク全体) */
.cmn__review__card {
    display: block;
    width: 360px;
    color: #333;
    text-decoration: none;
}

.cmn__review__card-img {
    position: relative;
    width: 360px;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
}

.cmn__review__card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

/* ホバーで画像のみ拡大 */
.cmn__review__card:hover .cmn__review__card-img img,
.cmn__review__card:focus-visible .cmn__review__card-img img {
    transform: scale(1.08);
}

.cmn__review__card-body {
    margin-top: 10px;
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cmn__review__card-name {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
}

.cmn__review__card-text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*---------------------------------------------------
共通：物件カード(BKNカード)
-----------------------------------------------------*/
.cmn__bkn-item {
    position: relative;
    width: 330px;
}

.cmn__bkn-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 330px;
    color: #333;
    text-decoration: none;
}

.cmn__bkn-card__img {
    position: relative;
    width: 330px;
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    background: #f7f7f7;
}

.cmn__bkn-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.3s;
}


/* ホバーで画像のみ拡大 */
.cmn__bkn-card:hover .cmn__bkn-card__img img,
.cmn__bkn-card:focus-visible .cmn__bkn-card__img img {
    transform: scale(1.08);
}

/* NEWバッジ */
.cmn__bkn-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 25px;
    padding: 0 10px;
    background: #F56400;
    border-radius: 9999px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cmn__bkn-card__body {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 0 18px;
}

.cmn__bkn-card__name {
    margin: 0;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmn__bkn-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
}
.cmn__bkn-card__price {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
}
.cmn__bkn-card__price span{
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    color: #F56400;
}

.cmn__bkn-card__spec {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #848484;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmn__bkn-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.cmn__bkn-card__info p {
    margin: 0;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #848484;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* お気に入りアイコン(指定通り) */
.favorite__icon {
    background: url(/images/top/icon_favorite.svg) no-repeat center / cover;
    display: block;
    width: 33px;
    height: 31px;
    position: absolute;
    top: 13px;
    right: 13px;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 3;
}

.favorite__icon.is-checked {
    background: url(/images/top/icon_favorite_on.svg) no-repeat center / cover;
}

/*---------------------------------------------------
共通：物件カードスライダー & タブ
-----------------------------------------------------*/
.cmn__bkn-tabs {
    width: 100%;
    margin-bottom: 26px;
}

.cmn__bkn-tabs__nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    margin: 0 0 30px;
    padding: 0;
}

.cmn__bkn-tabs__tab {
    min-width: 84px;
    padding: 0 10px 8px;
    margin: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid #AEAEAE;
    color: #AEAEAE;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    cursor: pointer;
    text-align: center;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.cmn__bkn-tabs__tab:hover {
    color: #F56400;
}

.cmn__bkn-tabs__tab.is-active {
    color: #F56400;
    border-bottom-color: #F56400;
}

.cmn__bkn-tabs__panel {
    width: 100%;
    display: none;
}

.cmn__bkn-tabs__panel.is-active {
    display: block;
}

.cmn__bkn-tabs__panel[hidden] {
    display: none !important;
}

/* スライダー本体 (ブロック構造で安定させる) */
.cmn__bkn-stage {
    position: relative;
    display: block;
    width: 100%;
}

.cmn__bkn-wrap {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    transition-property: transform;
    box-sizing: content-box;
    z-index: 1;
}

.cmn__bkn-cell {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 330px;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    box-sizing: border-box;
    transition-property: transform;
    float: none !important;
}

/* スライダー下のページャー */
.cmn__bkn-area > .cmn__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    margin: 30px auto 0;
}

/* ページャー非表示 (hidden 属性 / 静的モード両対応) */
.cmn__pager[hidden],
.cmn__bkn-area--static .cmn__pager,
.cmn__bkn-area--static > .cmn__pager {
    display: none !important;
}

/* 3件以下はSwiper無効・中央寄せ */
.cmn__bkn-area--static .cmn__bkn-stage {
    overflow: visible;
    max-width: 1070px;
    margin-left: auto;
    margin-right: auto;
}

.cmn__bkn-area--static .cmn__bkn-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    transform: none !important;
}

.cmn__bkn-area--static .cmn__bkn-cell {
    margin: 0 !important;
}

/*---------------------------------------------------
自社売主物件
-----------------------------------------------------*/
.cmn__section--owned {
    position: relative;
    padding: 70px 0 60px;
    background: #fff;
    overflow: hidden;
}
.cmn__section--owned .cmn__btn-more {
    margin-top: 25px;
}
.cmn__section--owned .cmn__section__inner {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
}

/* 装飾(右上のキャラクターイラスト) */
.cmn__section--owned .cmn__section__inner::after {
    content: '';
    position: absolute;
    top: 41px;
    right: 34px;
    width: 69px;
    height: 79px;
    background: url('/images/top/owned_illustration.svg') no-repeat center / contain;
    pointer-events: none;
}

/* 共通タイトルを当セクション用に上書き */
.cmn__section--owned .cmn__title--owned {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    margin: 0 0 48px;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #000;
    text-align: center;
    white-space: nowrap;
}

.cmn__section--owned .cmn__title--owned span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/*---------------------------------------------------
自社仲介物件 (AGENCY)
-----------------------------------------------------*/
.cmn__section--agency {
    position: relative;
    padding: 65px 0 120px;
    background: #fff;
}
.cmn__section--agency .cmn__btn-more {
    margin-top: 25px;
}
.cmn__section--agency .cmn__section__inner {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
}

/* 装飾1: 左の家族イラスト (タイトル左横) */
.cmn__section--agency .cmn__section__inner::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 38px;
    width: 203px;
    height: 110px;
    background: url('/images/top/agency_illustration.svg') no-repeat center / contain;
    pointer-events: none;
    z-index: 1;
}

/* 装飾2: 右側の縦長グラデーションピル */
.cmn__section--agency .cmn__section__inner::after {
    content: '';
    position: absolute;
    top: -150px;
    right: -100px;
    width: 96px;
    height: 298px;
    background: url('/images/top/agency_deco.svg') no-repeat center / contain;
    pointer-events: none;
}

.cmn__section--agency .cmn__title--agency {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0 0 48px;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #000;
    text-align: center;
    white-space: nowrap;
}

.cmn__section--agency .cmn__title--agency span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* 外側タブ (売買 / 賃貸) */
.cmn__agency-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.cmn__agency-tabs__nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    background: rgba(69, 69, 69, 0.4);
    border-radius: 100px;
}

.cmn__agency-tabs__tab {
    appearance: none;
    -webkit-appearance: none;
    background: #B4B4B4;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: #fff;
    width: 118px;
    height: 50px;
    padding: 0 10px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.cmn__agency-tabs__tab.is-active {
    background: #F56400;
    border-color: #F56400;
    color: #fff;
    pointer-events: none;
}

.cmn__agency-tabs__tab:not(.is-active):hover {
    opacity:1;
}

.cmn__agency-tabs__panel {
    width: 100%;
    display: none;
}

.cmn__agency-tabs__panel.is-active {
    display: block;
}

.cmn__agency-tabs__panel[hidden] {
    display: none !important;
}

/*---------------------------------------------------
弊社について (ABOUT US)
-----------------------------------------------------*/
.cmn__section--about-us {
    padding: 142px 0;
    background: #fff;
    position: relative;
    z-index: 1;
}
.cmn__section--about-us:after {
    content: '';
    background: #F8F8F8;
    width: 1680px;
    height: 864px;
    z-index: -1;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-radius: 80px;
}

/* 角丸グレーボックス */
.cmn__about-us__box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px;
    box-sizing: border-box;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

/* 装飾: オフィスワーカーイラスト (右上) */
.cmn__about-us__box::after {
    content: '';
    position: absolute;
    top: -6px;
    left: calc(50% + 442px);
    width: 128px;
    height: 124px;
    background: url('/images/top/about us_illustration.svg') no-repeat center / contain;
    pointer-events: none;
}

.cmn__section--about-us .cmn__title--about-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: #000;
    text-align: center;
    white-space: nowrap;
}

.cmn__section--about-us .cmn__title--about-us span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* 2カラム本体 */
.cmn__about-us__contents {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 50px;
    width: 100%;
    max-width: 1140px;
}

.cmn__about-us__left {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex-shrink: 0;
}

.cmn__about-us__info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cmn__about-us__company {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
}

/* 会社情報リスト (TEL / FAX / 営業時間 / 定休日) */
.cmn__about-us__list {
    width: 437px;
    margin: 0;
    padding: 0;
    border-top: 1px solid #d8d8d8;
}

.cmn__about-us__list-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #d8d8d8;
}

.cmn__about-us__list-label {
    flex-shrink: 0;
    width: 64px;
    margin: 0;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    color: #333;
}

.cmn__about-us__list-value {
    margin: 0;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #333;
}

/* VIEW MORE + SNS 行 */
.cmn__about-us__btn-row {
    display: flex;
    align-items: end;
    gap: 20px;
}
.cmn__about-us__btn-row .cmn__btn-more {
    margin-left: 0;
    margin-right: 0;
}
.cmn__about-us__sns {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmn__about-us__sns > li {
    display: block;
    margin: 0;
}

.cmn__about-us__sns a {
    display: block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.cmn__about-us__sns a:hover,
.cmn__about-us__sns a:focus-visible {
    transform: translateY(-4px);
}

.cmn__about-us__sns img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 右カラム: 地図 */
.cmn__about-us__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 618px;
    flex-shrink: 0;
}

.cmn__about-us__map {
    position: relative;
    width: 618px;
    height: 405px;
    border-radius: 16px;
    overflow: hidden;
    background: #555;
}

.cmn__about-us__map iframe,
.cmn__about-us__map > img {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    display: block;
}

.cmn__about-us__map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    pointer-events: none;
}

.cmn__about-us__map-link {
    display: inline-block;
    padding: 0 0 2px;
    color: #F56400;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    transition: opacity 0.25s ease, color 0.25s ease;
    position: relative;
}
.cmn__about-us__map-link:after {
    background: #F56400;
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0px;
    transform-origin: left top;
    transform: scale(0, 1);
    transition: transform .3s;
}
.cmn__about-us__map-link:hover:after {
    transform-origin: left top;
    transform: scale(1, 1);
}

/*---------------------------------------------------
スタッフ紹介 (STAFF)
-----------------------------------------------------*/
.cmn__section--staff {
    position: relative;
    padding: 159px 0 150px;
    background: #fff;
    overflow: hidden;
}
.cmn__section--staff .cmn__btn-more,
.cmn__section--blog .cmn__btn-more{
    margin-right: 0;
}

/* 装飾（右の縦グラデーション装飾） */
.cmn__section--staff .cmn__section__inner::after {
    content: '';
    position: absolute;
    top: -121px;
    right: -268px;
    width: 94px;
    height: 361px;
    background: url('/images/top/staff_illustration.svg') no-repeat center / contain;
    pointer-events: none;
}

.cmn__section--staff .cmn__section__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.cmn__staff__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.cmn__section--staff .cmn__title--staff {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #000;
    text-align: left;
    white-space: nowrap;
}

.cmn__section--staff .cmn__title--staff span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* 最大3件・件数が少ないときも中央寄せ */
.cmn__staff__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    max-width: 1140px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmn__staff__list > li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.cmn__staff__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 360px;
    max-width: 100%;
    box-sizing: border-box;
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cmn__staff__card-img {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    background: #f7f7f7;
}

.cmn__staff__card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.3s;
}
.cmn__staff__card:hover .cmn__staff__card-img img,
.cmn__staff__card:focus-visible .cmn__staff__card-img img{
    transform: scale(1.08);
}

.cmn__staff__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    padding: 0 18px;
}

.cmn__staff__card-name {
    margin: 0;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
}

.cmn__staff__card-text {
    margin: 0;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*---------------------------------------------------
スタッフブログ (BLOG)
-----------------------------------------------------*/
.cmn__section--blog {
    position: relative;
    padding: 0 0 150px;
    background: #fff;
    overflow: hidden;
}

/* 装飾（左の縦グラデーション装飾） */
.cmn__section--blog .cmn__section__inner::before {
    content: '';
    position: absolute;
    top: 101px;
    left: -203px;
    width: 96px;
    height: 185px;
    background: url('/images/top/blog_illustration.svg') no-repeat center / contain;
    pointer-events: none;
}

.cmn__section--blog .cmn__section__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.cmn__blog__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.cmn__section--blog .cmn__title--blog {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #000;
    text-align: left;
    white-space: nowrap;
}

.cmn__section--blog .cmn__title--blog span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* 最大3件・件数が少ないときも中央寄せ */
.cmn__blog__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    max-width: 1140px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmn__blog__list > li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.cmn__blog__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 360px;
    max-width: 100%;
    box-sizing: border-box;
    color: #333;
    text-decoration: none;
}

.cmn__blog__card-img {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
}
.cmn__blog__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
}
.cmn__blog__card-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 20px 0 0 0;
}

.cmn__blog__card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* 日付の白い形は画像（blog.webp）で表現 */
.cmn__blog__card-date {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    align-items: center;
    margin: 0;
    padding: 9px 12px;
    box-sizing: border-box;
    background: url('/images/top/blog.webp') no-repeat center top / contain;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #F56400;
    pointer-events: none;
    width: 100px;
    height: 56px;
}

.cmn__blog__card-date time {
    display: block;
    white-space: nowrap;
    color: currentColor;
}

.cmn__blog__card:hover .cmn__blog__card-img img {
    transform: scale(1.08);
}

.cmn__blog__card-title {
    margin: 0;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
    padding: 0 18px;
}

/*---------------------------------------------------
リフォーム施工事例 (WORKS)
-----------------------------------------------------*/
.cmn__section--works {
    position: relative;
    padding: 0 0 95px;
    background: #fff;
    overflow: hidden;
}
.cmn__section--works .cmn__btn-more {
    margin-right: 0;
}
/* 装飾（右の縦グラデーション装飾） */
.cmn__section--works .cmn__section__inner::after {
    content: '';
    position: absolute;
    top: 108px;
    right: -150px;
    width: 96px;
    height: 304px;
    background: url('/images/top/works_illustration.svg') no-repeat center / contain;
    pointer-events: none;
}

.cmn__section--works .cmn__section__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.cmn__works__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.cmn__section--works .cmn__title--works {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #000;
    text-align: left;
    white-space: nowrap;
}

.cmn__section--works .cmn__title--works span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #55CBCF;
    font-family: 'Playfair Display', serif;
}

/* 最大3件・件数が少ないときも中央寄せ */
.cmn__works__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    max-width: 1140px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmn__works__list > li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.cmn__works__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 360px;
    max-width: 100%;
    box-sizing: border-box;
    color: #333;
    text-decoration: none;
}

.cmn__works__card-img {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
}
.cmn__works__card-img img {
    transition: .3s;
}
.cmn__works__card-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 20px 0 0 0;
}

.cmn__works__card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* 日付の白い形は画像（blog.webp）で表現（ブログと共通アセット） */
.cmn__works__card-date {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0px 9px 20px 0;
    box-sizing: border-box;
    background: url('/images/top/blog.webp') no-repeat center top / contain;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #F56400;
    pointer-events: none;
    width: 100px;
    height: 56px;
}

.cmn__works__card-date time {
    display: block;
    white-space: nowrap;
    color: currentColor;
}

.cmn__works__card:hover .cmn__works__card-img img{
    transform: scale(1.08);
}

.cmn__works__card-title {
    margin: 0;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
    padding: 0 18px;
}

/*---------------------------------------------------
お問い合わせ (CONTACT)
-----------------------------------------------------*/

.cmn__contact__box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 506px;
    padding: 70px 0 80px;
    border-radius: 80px;
    overflow: visible;
}

/* 装飾1：左下イラスト */
.cmn__contact__box::before {
    content: '';
    position: absolute;
    right: 30px;
    top: -33px;
    width: 113px;
    height: 130px;
    background: url('/images/top/contact_illustration01.svg') no-repeat left bottom / contain;
    z-index: 1;
}

/* 装飾2：右上イラスト */
.cmn__contact__box::after {
    content: '';
    position: absolute;
    left: -28px;
    bottom: -19px;
    width: 100px;
    height: 112px;
    background: url('/images/top/contact_illustration02.svg') no-repeat right top / contain;
}

.cmn__contact__bg {
    position: absolute;
    inset: 0;
    border-radius: 80px;
    overflow: hidden;
    width: 1680px;
    z-index: 0;
    background-color: #333;
    background-image:url('/images/top/contact__bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.cmn__contact__main {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px;
    width: 100%;
    max-width: 1140px;
}

.cmn__section--contact .contact__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: #fff;
    text-align: center;
}

.cmn__section--contact .contact__title span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #fff;
    font-family: 'Playfair Display', serif;
}

.cmn__contact__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* 共通ボタン：左アイコン(::before)・右矢印(::after) */
.cmn__contact__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 316px;
    max-width: 100%;
    height: 80px;
    padding: 0 22px 0 58px;
    box-sizing: border-box;
    border-radius: 9999px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.cmn__contact__btn::before {
    content: '';
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    background-color: currentColor;
    -webkit-mask: var(--contact-icon) no-repeat center / contain;
    mask: var(--contact-icon) no-repeat center / contain;
}

.cmn__contact__btn::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    position: absolute;
    top: 30px;
    right: 17px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 矢印SVGは白い全面rect入りのため mask ではなく background-image */
.cmn__contact__btn--estimate::after {
    background-image: url(/images/top/contact-arrow01.svg);
}

.cmn__contact__btn--reserve::after {
    background-image: url(/images/top/contact-arrow02.svg);
}

.cmn__contact__btn--line::after {
    background-image: url(/images/top/contact-arrow03.svg);
}

.cmn__contact__btn--estimate:hover::after,
.cmn__contact__btn--estimate:focus-visible::after {
    background-image: url(/images/top/contact-arrow01-hover.svg);
}

.cmn__contact__btn--reserve:hover::after,
.cmn__contact__btn--reserve:focus-visible::after {
    background-image: url(/images/top/contact-arrow02-hover.svg);
}

.cmn__contact__btn--line:hover::after,
.cmn__contact__btn--line:focus-visible::after {
    background-image: url(/images/top/contact-arrow03-hover.svg);
}

.cmn__contact__btn--estimate {
    --contact-icon: url('/images/top/contact-icon01.svg');
    background-color: #F56400;
    box-shadow: 0 0 10px rgba(177, 65, 17, 0.15);
}

.cmn__contact__btn--estimate:hover,
.cmn__contact__btn--estimate:focus-visible {
    background-color: #fff;
    color: #F56400;
    box-shadow: 0 0 0 1px #F56400 inset;
}

.cmn__contact__btn--reserve {
    --contact-icon: url('/images/top/contact-icon02.svg');
    background-color: #55CBCF;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding-left: 90px;
}

.cmn__contact__btn--reserve:hover,
.cmn__contact__btn--reserve:focus-visible {
    background-color: #fff;
    color: #55CBCF;
    box-shadow: 0 0 0 1px #55CBCF inset;
}

.cmn__contact__btn--line {
    --contact-icon: url('/images/top/contact-icon03.svg');
    padding-left: 65px;
    background-color: #06C755;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.cmn__contact__btn--line:hover,
.cmn__contact__btn--line:focus-visible {
    background-color: #fff;
    color: #06c755;
    box-shadow: 0 0 0 1px #06c755 inset;
}