/* マチ不動産 物件管理 * 色はSWELLのカスタマイザー「メインカラー」(--color_main) に自動で合わせます。 * 細かく変えたいときは、SWELLの「追加CSS」で下の変数を上書きしてください。 */ :root { --mb-main: var(--color_main, #24427a); --mb-accent: #4d7347; --mb-new: #9a5b12; --mb-heart: #b4405a; --mb-line: #06c755; --mb-border: rgba(0, 0, 0, .12); --mb-soft: rgba(0, 0, 0, .04); --mb-muted: rgba(0, 0, 0, .58); --mb-surface: #fff; --mb-radius: 10px; --mb-num: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif; } .mb-search, .mb-list, .mb-single { font-variant-numeric: tabular-nums; } .mb-search *, .mb-list *, .mb-single * { box-sizing: border-box; } .mb-search button, .mb-single button { font: inherit; color: inherit; } .mb-search :focus-visible, .mb-list :focus-visible, .mb-single :focus-visible { outline: 2px solid var(--mb-main); outline-offset: 2px; } /* 検索の上部 */ .mb-search { display: grid; gap: 18px; margin-block: 1em 2em; } .mb-search__top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .mb-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--mb-soft); } .mb-seg button { border: 0; background: none; padding: 6px 20px; border-radius: 999px; cursor: pointer; font-weight: 700; } .mb-seg button[aria-pressed="true"] { background: var(--mb-main); color: #fff; } .mb-q { display: flex; gap: 8px; flex: 1 1 280px; min-width: 0; margin: 0; } .mb-q input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--mb-border); border-radius: 8px; background: var(--mb-surface); } .mb-q button { border: 0; border-radius: 8px; padding: 0 20px; background: var(--mb-main); color: #fff; font-weight: 700; cursor: pointer; } .mb-favtoggle { border: 1px solid var(--mb-border); background: var(--mb-surface); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: .9em; } .mb-favtoggle b { color: var(--mb-heart); font-family: var(--mb-num); } .mb-favtoggle[aria-pressed="true"] { border-color: var(--mb-heart); color: var(--mb-heart); } .mb-tags { display: flex; flex-wrap: wrap; gap: 8px; } .mb-tag { border: 1px solid var(--mb-border); background: var(--mb-surface); border-radius: 999px; padding: 5px 14px; cursor: pointer; font-size: .9em; } .mb-tag:hover { border-color: var(--mb-main); } .mb-tag[aria-pressed="true"] { background: var(--mb-main); border-color: var(--mb-main); color: #fff; } /* 絞り込みと結果 */ .mb-search__main { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; } @media (max-width: 860px) { .mb-search__main { grid-template-columns: 1fr; } } .mb-filters { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--mb-border); border-radius: var(--mb-radius); background: var(--mb-surface); position: sticky; top: 90px; } @media (max-width: 860px) { .mb-filters { position: static; } } .mb-fg { display: grid; gap: 6px; } .mb-fg__h { margin: 0; font-size: .75em; font-weight: 700; letter-spacing: .12em; color: var(--mb-muted); } .mb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .mb-chip { border: 1px solid var(--mb-border); background: var(--mb-soft); border-radius: 999px; padding: 3px 11px; font-size: .85em; cursor: pointer; } .mb-chip[aria-pressed="true"] { border-color: var(--mb-accent); color: var(--mb-accent); background: rgba(77, 115, 71, .1); font-weight: 700; } .mb-filters select, .mb-bar select { width: 100%; padding: 7px 10px; border: 1px solid var(--mb-border); border-radius: 6px; background: var(--mb-surface); } .mb-bar select { width: auto; } .mb-reset { justify-self: start; border: 0; background: none; padding: 0; color: var(--mb-main); text-decoration: underline; cursor: pointer; font-size: .9em; } .mb-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; } .mb-count { margin: 0; } .mb-count b { font-family: var(--mb-num); font-size: 1.5em; color: var(--mb-main); margin-right: 2px; } .mb-cond { margin-left: 8px; font-size: .85em; color: var(--mb-muted); } /* カード */ .mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .mb-card { position: relative; border: 1px solid var(--mb-border); border-radius: var(--mb-radius); overflow: hidden; background: var(--mb-surface); transition: transform .15s, box-shadow .15s; } .mb-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); } .mb-card.is-closed { opacity: .7; } .mb-card__link { display: flex; flex-direction: column; color: inherit !important; text-decoration: none !important; } .mb-card__ph { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; color: var(--mb-main); background: var(--mb-soft); } .mb-card__ph img, .mb-ph-svg { width: 100%; height: 100%; object-fit: cover; display: block; } .mb-card__body { display: grid; gap: 2px; padding: 12px 14px 14px; min-width: 0; } .mb-card__title { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 1em !important; line-height: 1.5; font-weight: 700; } .mb-card__title::before, .mb-card__title::after { display: none !important; } .mb-card__meta { margin: 0 !important; font-size: .82em; color: var(--mb-muted); } .mb-badge { position: absolute; top: 10px; left: 10px; padding: 1px 9px; border-radius: 4px; background: var(--mb-surface); color: #222; font-size: 12px; font-weight: 700; line-height: 1.7; } .mb-badge--new { top: auto; bottom: 10px; background: var(--mb-new); color: #fff; } .mb-badge--status { top: auto; bottom: 10px; background: #333; color: #fff; } .mb-fav { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--mb-surface); color: rgba(0, 0, 0, .35); cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); } .mb-fav svg { width: 18px; height: 18px; } .mb-fav[aria-pressed="true"] { color: var(--mb-heart); } .mb-price { font-family: var(--mb-num); font-size: 1.4em; font-weight: 500; line-height: 1.3; } .mb-price small { font-family: inherit; font-size: .58em; margin-left: 2px; } .mb-empty, .mb-empty-fav { padding: 32px; text-align: center; border: 1px dashed var(--mb-border); border-radius: var(--mb-radius); color: var(--mb-muted); } .mb-search [hidden], .mb-list [hidden] { display: none !important; } .mb-recent { display: grid; gap: 8px; } .mb-recent__list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; } .mb-recent__list a { flex: 0 0 190px; padding: 10px 12px; border: 1px solid var(--mb-border); border-radius: 8px; background: var(--mb-surface); color: inherit; text-decoration: none; font-size: .85em; } .mb-recent__list a b { display: block; font-family: var(--mb-num); font-size: 1.15em; } /* 詳細ページ */ .mb-single__head { display: grid; gap: 10px; margin-bottom: 1.5em; } .mb-single__badges { display: flex; flex-wrap: wrap; gap: 6px; } .mb-single .mb-badge { position: static; border: 1px solid var(--mb-border); } .mb-single .mb-badge--kind { background: var(--mb-main); color: #fff; border-color: var(--mb-main); } .mb-price--lg { font-size: 2em; color: var(--mb-main); } .mb-fee { margin-left: 12px; font-family: inherit; font-size: .45em; color: var(--mb-muted); } .mb-feat { display: flex; flex-wrap: wrap; gap: 6px; } .mb-feat span { padding: 2px 10px; border-radius: 4px; background: rgba(77, 115, 71, .12); color: var(--mb-accent); font-size: .82em; } .mb-spec-wrap { overflow-x: auto; } .mb-spec { width: 100%; border-collapse: collapse; margin: 0 0 1em; } .mb-spec th, .mb-spec td { padding: 9px 12px; border: 1px solid var(--mb-border); text-align: left; vertical-align: top; } .mb-spec th { width: 9em; background: var(--mb-soft); font-weight: 500; white-space: nowrap; } .mb-remarks { padding: 12px 14px; background: var(--mb-soft); border-radius: 8px; } .mb-fine { font-size: .8em; color: var(--mb-muted); } .mb-cta { display: grid; gap: 12px; margin-top: 2em; padding: 20px; border: 2px solid var(--mb-main); border-radius: var(--mb-radius); } .mb-cta__title { margin: 0 !important; font-weight: 700; font-size: 1.1em; } .mb-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; } .mb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border: 0; border-radius: 8px; background: var(--mb-main); color: #fff !important; font-weight: 700; text-decoration: none !important; cursor: pointer; } .mb-btn--line { background: var(--mb-line); } .mb-btn--ghost { background: var(--mb-soft) !important; color: var(--mb-heart) !important; border: 1px solid var(--mb-border) !important; } .mb-btn--ghost svg { width: 18px; height: 18px; opacity: .45; } .mb-btn--ghost[aria-pressed="true"] svg { opacity: 1; } .mb-cta__tel { margin: 0 !important; font-size: .9em; } .mb-num { font-family: var(--mb-num); font-size: 1.1em; } @media (prefers-reduced-motion: reduce) { .mb-card { transition: none; } .mb-card:hover { transform: none; } } /* ===== 1.1 追加：印 ===== */ .mb-badge--price { top: auto; bottom: 10px; background: var(--mb-main); color: #fff; } .mb-badge--draft { top: auto; bottom: 10px; background: #666; color: #fff; } .mb-badge--members { top: auto; bottom: 10px; left: auto; right: 10px; background: var(--mb-accent); color: #fff; } .mb-single .mb-badge--members, .mb-single .mb-badge--price, .mb-single .mb-badge--new, .mb-single .mb-badge--draft { color: #fff; } .mb-single .mb-badge--new { background: var(--mb-new); border-color: var(--mb-new); } .mb-single .mb-badge--price { background: var(--mb-main); border-color: var(--mb-main); } .mb-single .mb-badge--members { background: var(--mb-accent); border-color: var(--mb-accent); } .mb-pricedown { margin: 0 !important; font-size: .9em; color: var(--mb-new); font-weight: 700; } /* ===== 公開件数 ===== */ .mb-count-num { font-family: var(--mb-num); font-weight: 700; font-size: 1.6em; color: var(--mb-new); margin-inline: 2px; } /* ===== 件数付きメニュー ===== */ .mb-menu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .mb-menu li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--mb-border); } .mb-menu li::before { display: none !important; } .mb-menu a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 4px; color: inherit; text-decoration: none; } .mb-menu a:hover { color: var(--mb-main); background: var(--mb-soft); } .mb-menu__n { color: var(--mb-muted); font-family: var(--mb-num); font-size: .9em; } .mb-menu__n::before { content: "("; } .mb-menu__n::after { content: ")"; } .mb-menu__group { margin: 10px 0 2px !important; font-size: .78em; font-weight: 700; color: var(--mb-muted); letter-spacing: .08em; } .mb-menu--bar { background: var(--mb-main); border-radius: var(--mb-radius); overflow: hidden; } .mb-menu--bar ul { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; min-width: 0; background: rgba(255, 255, 255, .2); } .mb-menu--bar li { border: 0 !important; background: var(--mb-main); } .mb-menu--bar a { height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 10px 8px; color: #fff !important; font-weight: 700; font-size: 14px; line-height: 1.4; text-align: center; } .mb-menu--bar a:hover { background: rgba(255, 255, 255, .12); color: #fff; } .mb-menu--bar .mb-menu__n { color: rgba(255, 255, 255, .8); font-weight: 400; font-size: .75em; } .mb-menu--bar .mb-menu__n::before { content: ""; } .mb-menu--bar .mb-menu__n::after { content: "件"; } /* ===== 新着・更新リスト ===== */ .mb-updates { list-style: none !important; margin-top: 0 !important; margin-bottom: 1.5em !important; padding: 0 !important; border: 1px solid var(--mb-border); border-radius: var(--mb-radius); overflow: hidden; background: var(--mb-surface); } .mb-updates li { margin: 0 !important; padding: 0 !important; } .mb-updates li::before { display: none !important; } .mb-updates li + li { border-top: 1px solid var(--mb-border); } .mb-updates a { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; color: inherit; text-decoration: none; font-size: .9em; } .mb-updates a:hover { background: var(--mb-soft); } .mb-updates__d { font-family: var(--mb-num); color: var(--mb-muted); font-size: .9em; } .mb-updates__k { font-size: .78em; font-weight: 700; padding: 0 7px; border-radius: 3px; white-space: nowrap; } .mb-updates__k--new { background: rgba(154, 91, 18, .12); color: var(--mb-new); } .mb-updates__k--price { background: rgba(36, 66, 122, .1); color: var(--mb-main); } .mb-updates__k--upd { background: var(--mb-soft); color: var(--mb-muted); } .mb-updates__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mb-updates__p { font-family: var(--mb-num); font-weight: 700; white-space: nowrap; } @media (max-width: 520px) { .mb-updates a { grid-template-columns: auto minmax(0, 1fr) auto; } .mb-updates__k { display: none; } } /* ===== おすすめ ===== */ .mb-pickup { display: grid; gap: 14px; margin-bottom: 1.5em; } .mb-pick { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--mb-border); border-radius: var(--mb-radius); overflow: hidden; background: var(--mb-surface); color: inherit !important; text-decoration: none !important; } .mb-pick:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); } .mb-pick .mb-card__ph { aspect-ratio: auto; min-height: 160px; } .mb-pick__body { padding: 14px 16px; display: grid; gap: 2px; align-content: start; min-width: 0; } .mb-pick__say { margin: 8px 0 0 !important; padding: 10px 12px; border-radius: 8px; background: rgba(77, 115, 71, .1); font-size: .88em; line-height: 1.7; } .mb-pick__say b { display: block; color: var(--mb-accent); font-size: .85em; } @media (max-width: 600px) { .mb-pick { grid-template-columns: 1fr; } .mb-pick .mb-card__ph { aspect-ratio: 16 / 9; } } /* ===== ポータル型検索 ===== */ .mb-portal { display: grid; gap: 20px; margin-block: 1em 2em; } .mb-portal *, .mb-member * { box-sizing: border-box; } .mb-portal button, .mb-member button { font: inherit; } .mb-portal__box { border: 1px solid var(--mb-border); border-radius: 12px; overflow: hidden; background: var(--mb-surface); } .mb-portal__tabs { display: flex; overflow-x: auto; background: var(--mb-soft); } .mb-portal__tabs button { flex: 1 0 auto; padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--mb-muted); font-weight: 700; cursor: pointer; } .mb-portal__tabs button[aria-selected="true"] { background: var(--mb-surface); color: var(--mb-main); border-bottom-color: var(--mb-main); } .mb-portal__body { display: grid; gap: 14px; padding: 18px; } .mb-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px 14px; align-items: start; } .mb-row[hidden] { display: none !important; } @media (max-width: 600px) { .mb-row { grid-template-columns: 1fr; } } .mb-row__h { margin: 0 !important; padding-top: 4px; font-size: .85em; font-weight: 700; } .mb-row__h small { display: block; font-weight: 400; color: var(--mb-muted); font-size: .85em; } .mb-line + .mb-line { margin-top: 8px; } .mb-line__h { margin: 0 0 4px !important; font-size: .78em; color: var(--mb-muted); font-weight: 700; } .mb-checks { display: flex; flex-wrap: wrap; gap: 6px; } .mb-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--mb-border); border-radius: 6px; background: var(--mb-soft); font-size: .85em; cursor: pointer; } .mb-check input { margin: 0; accent-color: var(--mb-main); } .mb-check.is-on { border-color: var(--mb-main); color: var(--mb-main); font-weight: 700; background: rgba(36, 66, 122, .06); } .mb-check__n { font-family: var(--mb-num); font-size: .85em; color: var(--mb-muted); } .mb-ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mb-ranges select { padding: 7px 10px; border: 1px solid var(--mb-border); border-radius: 6px; background: var(--mb-surface); min-width: 0; } .mb-note { margin: 0 !important; font-size: .82em; color: var(--mb-muted); } .mb-portal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: var(--mb-soft); } .mb-hit { margin: 0 !important; } .mb-hit b { font-family: var(--mb-num); font-size: 1.6em; color: var(--mb-new); margin-inline: 2px; } .mb-portal__actions { display: flex; align-items: center; gap: 14px; } .mb-go { border: 0; border-radius: 8px; padding: 12px 30px; background: var(--mb-new); color: #fff; font-weight: 700; cursor: pointer; } .mb-portal .mb-reset { justify-self: auto; } .mb-portal__results[hidden] { display: none !important; } .mb-portal .mb-count:focus { outline: none; } /* ===== 会員登録・ログイン ===== */ .mb-member { display: grid; gap: 12px; padding: 20px; border: 2px solid var(--mb-main); border-radius: 12px; background: var(--mb-surface); margin-block: 1em 2em; } .mb-member__cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; } @media (max-width: 700px) { .mb-member__cols { grid-template-columns: 1fr; } } .mb-member__h { margin: 0 !important; font-weight: 700; font-size: 1.1em; } .mb-member__lead { margin: 0 !important; color: var(--mb-new); font-weight: 700; } .mb-member__form, .mb-member__login { display: grid; gap: 10px; align-content: start; } .mb-member label { display: grid; gap: 4px; font-size: .88em; } .mb-member input[type="text"], .mb-member input[type="email"], .mb-member input[type="password"] { width: 100%; padding: 8px 10px; border: 1px solid var(--mb-border); border-radius: 6px; background: var(--mb-surface); } .mb-member__login form p { margin: 0 0 10px !important; } .mb-member__login .login-remember label { display: inline-flex; align-items: center; gap: 6px; } .mb-member__login input[type="submit"] { padding: 10px 22px; border: 0; border-radius: 8px; background: var(--mb-main); color: #fff; font-weight: 700; cursor: pointer; } .mb-member__msg { margin: 0 !important; padding: 10px 14px; border-radius: 8px; font-size: .9em; } .mb-member__msg--ok { background: rgba(77, 115, 71, .12); color: var(--mb-accent); } .mb-member__msg--err { background: rgba(180, 64, 90, .1); color: var(--mb-heart); } .mb-member__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 !important; } .mb-btn--accent { background: var(--mb-new); justify-self: start; } .mb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .mb-locked { padding: 18px; border-radius: var(--mb-radius); background: var(--mb-soft); } .mb-locked__h { margin: 0 0 6px !important; font-weight: 700; font-size: 1.15em; } /* ===== 一覧ページ ===== */ .mb-archive__count { margin: .5em 0 1.2em; } .mb-archive__count b { font-family: var(--mb-num); font-size: 1.4em; color: var(--mb-new); } .mb-archive__back { margin-top: 2em; text-align: center; } .mb-list .nav-links, .mb-list + .pagination, .mb-list + nav { margin-top: 2em; } /* ===== 1.2 物件サイドバー ===== */ .mb-sb { display: grid; gap: 18px; } .mb-sb * { box-sizing: border-box; } .mb-sb-consult { display: grid; gap: 10px; } .mb-sb-btn { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid #d8ded9; border-radius: 10px; background: #fff; color: #1c2629 !important; text-decoration: none !important; line-height: 1.5; transition: box-shadow .15s; } .mb-sb-btn:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); } .mb-sb-btn b { font-size: 17px; font-weight: 700; } .mb-sb-btn span { font-size: 12px; opacity: .8; } .mb-sb-btn--sell { background: #9a5b12; border-color: #9a5b12; color: #fff !important; } .mb-sb-btn--line { background: #2f8a4e; border-color: #2f8a4e; color: #fff !important; } .mb-sb-box { border: 1px solid #d8ded9; border-radius: 10px; overflow: hidden; background: #fff; } .mb-sb-box__h { margin: 0 !important; padding: 10px 14px !important; border: 0 !important; border-bottom: 1px solid #d8ded9 !important; background: #ebefea !important; color: #1c2629 !important; font-size: 14px !important; font-weight: 700; line-height: 1.5; } .mb-sb-box__h::before, .mb-sb-box__h::after { display: none !important; } .mb-sb-box .mb-menu { margin: 0 !important; } .mb-sb-box .mb-menu__group { display: none !important; } .mb-sb-box .mb-menu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .mb-sb-box .mb-menu li { margin: 0 !important; padding: 0 !important; border: 0 !important; } .mb-sb-box .mb-menu li::before { display: none !important; } .mb-sb-box .mb-menu li + li, .mb-sb-box .mb-menu ul + ul li:first-child { border-top: 1px solid #edf0ec !important; } .mb-sb-box .mb-menu a { display: flex !important; justify-content: space-between; gap: 8px; padding: 9px 14px !important; color: #1c2629 !important; font-size: 14px; text-decoration: none !important; } .mb-sb-box .mb-menu a:hover { background: #f4f6f3; color: #24427a !important; } .mb-sb-box .mb-menu__n { color: #5e6b6a; font-size: 13px; } /* ===== 1.3 物件ヘッダー情報 ===== */ .mb-hd { display: flex; align-items: center; gap: 18px; line-height: 1.35; white-space: nowrap; } .mb-hd__count { padding: 6px 14px; border: 1px solid #d8ded9; border-radius: 8px; background: #fff; color: #1c2629; font-size: 13px; } .mb-hd__num { margin: 0 2px; color: #9a5b12; font-size: 22px; font-weight: 700; } .mb-hd__tel { display: grid; text-align: right; } .mb-hd__label, .mb-hd__time { color: #5e6b6a; font-size: 11px; } .mb-hd__no { color: var(--color_main, #24427a) !important; font-size: 22px; font-weight: 700; text-decoration: none !important; letter-spacing: .02em; } /* ===== 1.4 種別メニュー：買う・借りるの2段 ===== */ .mb-menu2 { display: grid; gap: 8px; } .mb-menu2__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); border-radius: var(--mb-radius); overflow: hidden; background: var(--mb-main); } .mb-menu2__label { display: grid; place-items: center; background: #9a5b12; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .1em; } .mb-menu2__row--rent .mb-menu2__label { background: #2f8a4e; } .mb-menu2 .mb-menu--bar { border-radius: 0 !important; } @media (max-width: 600px) { .mb-menu2__row { grid-template-columns: 1fr; } .mb-menu2__label { padding: 6px; } } .mb-menu2 .mb-menu--bar ul { gap: 0 !important; background: transparent !important; } .mb-menu2 .mb-menu--bar li { box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .2); } /* ===== 1.5 種別メニュー：買う・借りるボタンを押すと開く ===== */ .mb-acc { display: grid; } .mb-acc__tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; } .mb-acc__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 12px 18px; border: 0; border-radius: 12px; color: #fff; font: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .mb-acc__btn--sale { background: #9a5b12; } .mb-acc__btn--rent { background: #2f8a4e; } .mb-acc__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .16); } .mb-acc__btn:focus-visible { outline: 3px solid var(--mb-main); outline-offset: 2px; } .mb-acc__btn[aria-expanded="true"] { transform: none; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); } .mb-acc__label { font-size: 20px; font-weight: 700; letter-spacing: .12em; } .mb-acc__n { padding: 1px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 13px; font-weight: 700; } .mb-acc__chev { width: 20px; height: 20px; transition: transform .35s ease; } .mb-acc__btn[aria-expanded="true"] .mb-acc__chev { transform: rotate(180deg); } /* 開いているボタンの下に小さな三角を出して、どのメニューが開いているか分かるようにする */ .mb-acc__btn::after { content: ""; position: absolute; left: 50%; bottom: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: inherit; opacity: 0; transform: translate(-50%, -6px); transition: opacity .25s ease, transform .25s ease; } .mb-acc__btn--sale::after { border-top-color: #9a5b12; } .mb-acc__btn--rent::after { border-top-color: #2f8a4e; } .mb-acc__btn[aria-expanded="true"]::after { opacity: 1; transform: translate(-50%, 0); } .mb-acc__panel { display: grid; margin-top: 10px; } .mb-acc__inner { min-height: 0; overflow: hidden; } .mb-acc__panel--sale .mb-menu--bar { border-top: 3px solid #9a5b12; } .mb-acc__panel--rent .mb-menu--bar { border-top: 3px solid #2f8a4e; } .mb-acc .mb-menu--bar ul { gap: 0 !important; background: transparent !important; } .mb-acc .mb-menu--bar li { box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .2); } /* 動きはJSが動いたときだけ。JSが動かない環境ではメニューは開いたまま表示する */ .mb-acc.is-js .mb-acc__panel { grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1), margin-top .4s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; } .mb-acc.is-js .mb-acc__panel.is-open { grid-template-rows: 1fr; margin-top: 14px; opacity: 1; } .mb-acc.is-js .mb-acc__panel li { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; transition-delay: 0s; } .mb-acc.is-js .mb-acc__panel.is-open li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 120ms); } @media (prefers-reduced-motion: reduce) { .mb-acc__btn, .mb-acc__chev, .mb-acc__btn::after, .mb-acc.is-js .mb-acc__panel, .mb-acc.is-js .mb-acc__panel li { transition: none !important; } .mb-acc__btn:hover { transform: none; } } @media (max-width: 600px) { .mb-acc__btn { min-height: 56px; gap: 8px; padding: 10px; } .mb-acc__label { font-size: 17px; } } /* テーマのボタンの色・枠・押したときの見た目に負けないようにする */ .mb-acc button.mb-acc__btn, .mb-acc button.mb-acc__btn:hover, .mb-acc button.mb-acc__btn:focus, .mb-acc button.mb-acc__btn:active { color: #fff !important; border: 0 !important; text-decoration: none !important; text-transform: none !important; } .mb-acc button.mb-acc__btn--sale, .mb-acc button.mb-acc__btn--sale:hover, .mb-acc button.mb-acc__btn--sale:focus, .mb-acc button.mb-acc__btn--sale:active { background: #9a5b12 !important; } .mb-acc button.mb-acc__btn--rent, .mb-acc button.mb-acc__btn--rent:hover, .mb-acc button.mb-acc__btn--rent:focus, .mb-acc button.mb-acc__btn--rent:active { background: #2a7e47 !important; } .mb-acc button.mb-acc__btn:focus:not(:focus-visible) { outline: none !important; } .mb-acc button.mb-acc__btn:focus-visible { outline: 3px solid var(--mb-main) !important; outline-offset: 2px !important; } .mb-acc button.mb-acc__btn .mb-acc__n { color: #fff !important; background: rgba(255, 255, 255, .22) !important; } .mb-menu--bar a:focus { background: rgba(255, 255, 255, .15) !important; color: #fff !important; text-decoration: none !important; } .mb-menu--bar a:focus-visible { outline: 2px solid #fff !important; outline-offset: -4px !important; } /* ===== 1.6 マンションギャラリー ===== */ .mm-intro { margin: .5em 0 1.4em; color: var(--mb-muted); } .mm-gallery { display: grid; gap: 16px; margin-block: 1em 2em; } .mm-gallery *, .mm-single * { box-sizing: border-box; } .mm-filter { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--mb-border); border-radius: 12px; background: var(--mb-surface); } .mm-filter__row { display: grid; gap: 10px; } .mm-filter__sel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .mm-filter__sel select { padding: 7px 10px; border: 1px solid var(--mb-border); border-radius: 6px; background: var(--mb-surface); } .mm-has-only { display: inline-flex; align-items: center; gap: 6px; font-size: .9em; cursor: pointer; } .mm-chip-n { font-size: .85em; color: var(--mb-muted); } .mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .mm-card { border: 1px solid var(--mb-border); border-radius: 12px; overflow: hidden; background: var(--mb-surface); transition: transform .2s ease, box-shadow .2s ease; } .mm-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .1); } .mm-card[hidden] { display: none !important; } .mm-card__link { display: flex; flex-direction: column; height: 100%; color: inherit !important; text-decoration: none !important; } .mm-card__ph { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; color: var(--mb-main); background: var(--mb-soft); } .mm-card__ph img, .mm-card__ph .mb-ph-svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .mm-card:hover .mm-card__ph img { transform: scale(1.05); } .mm-age { position: absolute; left: 10px; bottom: 10px; padding: 2px 10px; border-radius: 4px; background: rgba(28, 38, 41, .78); color: #fff; font-size: 12px; font-weight: 700; } .mm-draft { position: absolute; right: 10px; top: 10px; padding: 1px 8px; border-radius: 4px; background: #666; color: #fff; font-size: 11px; } .mm-card__body { display: grid; gap: 4px; padding: 12px 14px 14px; min-width: 0; } .mm-card__title { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 1.05em !important; font-weight: 700; line-height: 1.45; } .mm-card__title::before, .mm-card__title::after { display: none !important; } .mm-card__meta { margin: 0 !important; font-size: .82em; color: var(--mb-muted); } .mm-card__has { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 !important; } .mm-has { padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; } .mm-has--sale { background: #9a5b12; } .mm-has--rent { background: #2f8a4e; } @media (prefers-reduced-motion: reduce) { .mm-card, .mm-card__ph img { transition: none; } .mm-card:hover { transform: none; } .mm-card:hover .mm-card__ph img { transform: none; } } .mm-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1em; } .mm-pill { padding: 4px 14px; border: 1px solid var(--mb-border); border-radius: 999px; background: var(--mb-surface); font-size: .9em; font-weight: 700; color: inherit; text-decoration: none !important; } .mm-pill--sale { background: #9a5b12; border-color: #9a5b12; color: #fff !important; } .mm-pill--rent { background: #2f8a4e; border-color: #2f8a4e; color: #fff !important; } .mm-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin: 0 0 1.5em !important; padding: 14px 16px !important; border-radius: 10px; background: var(--mb-soft); list-style: none !important; } .mm-features li { position: relative; margin: 0 !important; padding: 0 0 0 1.3em !important; } .mm-features li::before { content: "✓" !important; position: absolute; left: 0; top: 0; color: var(--mb-accent); font-weight: 700; display: inline !important; background: none !important; width: auto !important; height: auto !important; border: 0 !important; } .mm-map { margin: 0 0 2em !important; } .mm-none { padding: 16px; border: 1px dashed var(--mb-border); border-radius: 10px; color: var(--mb-muted); } .mm-cta__lead { margin: 0 !important; font-size: .92em; } .mm-btn--sell { background: #9a5b12 !important; } .mm-back { margin-top: 2em; } .mm-link-box { margin-top: 1.5em; padding: 14px 16px; border-left: 4px solid var(--mb-main); background: var(--mb-soft); border-radius: 0 8px 8px 0; } /* 絞り込みのボタンがテーマのボタンの色に負けないようにする */ .mb-search button.mb-chip, .mm-gallery button.mb-chip, .mb-search button.mb-tag { background: var(--mb-soft) !important; color: #1c2629 !important; border: 1px solid var(--mb-border) !important; font-weight: 400; text-transform: none !important; } .mb-search button.mb-chip[aria-pressed="true"], .mm-gallery button.mb-chip[aria-pressed="true"] { background: rgba(77, 115, 71, .12) !important; border-color: var(--mb-accent) !important; color: var(--mb-accent) !important; font-weight: 700; } .mb-search button.mb-tag[aria-pressed="true"] { background: var(--mb-main) !important; border-color: var(--mb-main) !important; color: #fff !important; } .mm-gallery .mm-q button, .mb-search .mb-q button { background: var(--mb-main) !important; color: #fff !important; border: 0 !important; } /* ===== 1.7 サイドバー：マンションギャラリーのバナー ===== */ .mm-bn { position: relative; display: grid; overflow: hidden; border-radius: 12px; background: #c9d6e6; color: #1c2629 !important; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; } .mm-bn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .14); } .mm-bn__art { display: block; width: 100%; height: 92px; transition: transform .5s ease; } .mm-bn:hover .mm-bn__art { transform: scale(1.04); } .mm-bn__body { display: grid; gap: 4px; padding: 12px 16px 14px; background: #24427a; color: #fff; } .mm-bn__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; opacity: .8; } .mm-bn__title { font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 18px; font-weight: 800; line-height: 1.4; } .mm-bn__lead { font-size: 12px; line-height: 1.6; opacity: .88; } .mm-bn__foot { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; font-size: 12px; } .mm-bn__n { font-size: 20px; font-weight: 700; color: #f2c48a; } .mm-bn__go { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 15px; transition: transform .2s ease; } .mm-bn:hover .mm-bn__go { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .mm-bn, .mm-bn__art, .mm-bn__go { transition: none; } .mm-bn:hover, .mm-bn:hover .mm-bn__art, .mm-bn:hover .mm-bn__go { transform: none; } } /* ===== 1.8 相場ガイド（ギャラリーの下） ===== */ .mm-guide { margin-top: 3em; padding-top: 2em; border-top: 2px solid #1c2629; } .mm-guide__edit { margin: 0 0 1em !important; font-size: .85em; } .mm-guide .wp-block-table { margin: 0 0 1.6em; overflow-x: auto; } .mm-guide table { width: 100%; border-collapse: collapse; font-size: .92em; font-variant-numeric: tabular-nums; } .mm-guide th, .mm-guide td { padding: 8px 12px; border: 1px solid var(--mb-border); text-align: left; } .mm-guide thead th { background: #24427a; color: #fff; font-weight: 700; white-space: nowrap; } .mm-guide tbody tr:nth-child(even) td { background: var(--mb-soft); } .mm-guide tbody td:first-child { font-weight: 700; white-space: nowrap; } /* ===== 2.0 土地相場ギャラリー ===== */ .tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 1.4em; } .tc-stats > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #24427a; color: #fff; } .tc-stats span { font-size: 12px; opacity: .8; } .tc-stats b { font-size: 24px; line-height: 1.25; } .tc-stats small { font-size: 12px; opacity: .8; } .tc-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .tc-card { border: 1px solid var(--mb-border); border-radius: 12px; overflow: hidden; background: var(--mb-surface); transition: transform .2s ease, box-shadow .2s ease; } .tc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .1); } .tc-card[hidden] { display: none !important; } .tc-card__link { display: flex; flex-direction: column; height: 100%; color: inherit !important; text-decoration: none !important; } /* 価格が高い町ほど、上の帯の茶色が濃くなる */ .tc-card__top { position: relative; display: grid; gap: 4px; min-height: 86px; padding: 12px 14px; background: color-mix(in srgb, #9a5b12 calc(var(--lv, .3) * 85% + 10%), #f3ead9); color: #fff; } .tc-card__top .mm-draft { top: 8px; right: 8px; } .tc-card__town { margin: auto 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: inherit !important; font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 22px !important; font-weight: 800; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .tc-card__town::before, .tc-card__town::after { display: none !important; } .tc-use { justify-self: start; padding: 1px 8px; border-radius: 4px; background: rgba(255, 255, 255, .9); color: #1c2629; font-size: 11px; font-weight: 700; } .tc-card__body { display: grid; gap: 3px; padding: 12px 14px 14px; } .tc-card__tsubo { display: flex; align-items: baseline; gap: 8px; margin: 0 !important; } .tc-card__lab { font-size: 12px; color: var(--mb-muted); } .tc-card__tsubo b { font-size: 22px; color: #9a5b12; font-variant-numeric: tabular-nums; } .tc-card__m2 { margin: 0 !important; font-size: .85em; font-variant-numeric: tabular-nums; } .tc-chg { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .tc-chg--up { background: rgba(47, 138, 78, .12); color: #2f7a46; } .tc-chg--down { background: rgba(180, 64, 90, .1); color: #b4405a; } .tc-chg--flat { background: var(--mb-soft); color: var(--mb-muted); } .tc-fine { margin: 6px 0 0 !important; font-size: .8em; color: var(--mb-muted); } .tc-hero { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin-bottom: 1em; } .tc-hero > div { display: grid; gap: 2px; align-content: center; padding: 14px 16px; border-radius: 12px; background: var(--mb-soft); } .tc-hero span { font-size: 12px; color: var(--mb-muted); } .tc-hero__main { background: #9a5b12 !important; color: #fff; } .tc-hero__main span, .tc-hero__main small { color: #fff; opacity: .85; } .tc-hero__main b { font-size: 32px; line-height: 1.2; } .tc-hero__sub b { font-size: 18px; } .tc-hero__sub .tc-chg { justify-self: start; margin: 0; font-size: 16px; } @media (max-width: 600px) { .tc-hero { grid-template-columns: 1fr 1fr; } .tc-hero__main { grid-column: 1 / -1; } } .tc-lead { margin-top: 0 !important; margin-bottom: 1.5em !important; } .tc-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9em; } .tc-table th, .tc-table td { padding: 8px 10px; border: 1px solid var(--mb-border); text-align: left; vertical-align: top; } .tc-table th { background: #24427a; color: #fff; white-space: nowrap; } .tc-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; } .tc-bn { background: #f3ead9; } .tc-bn .mm-bn__body { background: #7a4a12; } @media (prefers-reduced-motion: reduce) { .tc-card { transition: none; } .tc-card:hover { transform: none; } } /* ===== 2.1 地図から探す ===== */ .mb-map-panel { display: grid; gap: 8px; } .mb-map-panel[hidden] { display: none !important; } .mb-map { height: 380px; border: 1px solid var(--mb-border); border-radius: 10px; overflow: hidden; background: #e8ecef; z-index: 0; } @media (max-width: 600px) { .mb-map { height: 320px; } } .mb-map__bounds { display: inline-flex; align-items: center; gap: 6px; font-size: .85em; color: var(--mb-muted); cursor: pointer; } .mb-map .leaflet-control-attribution { font-size: 10px; } .mb-pin { background: none; border: 0; } .mb-pin { width: auto !important; height: auto !important; pointer-events: none !important; } .mb-pin span { pointer-events: auto; cursor: pointer; } .mb-pin:focus-visible { outline: none; } .mb-pin:focus-visible span { outline: 3px solid #24427a; outline-offset: 2px; } .mb-pin span { position: relative; display: block; transform: translate(-50%, calc(-100% - 8px)); padding: 3px 8px; border-radius: 6px; background: #9a5b12; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .15s ease; font-family: "Helvetica Neue", Arial, "Hiragino Sans", sans-serif; } .mb-pin span::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: inherit; } .mb-pin--sale span { background: #9a5b12; border-top-color: #9a5b12; } .mb-pin--rent span { background: #2f8a4e; border-top-color: #2f8a4e; } .mb-pin span::after { border-top-color: currentColor; color: inherit; } .mb-pin--sale span::after { border-top-color: #9a5b12; } .mb-pin--rent span::after { border-top-color: #2f8a4e; } .mb-pin:hover, .mb-pin:focus { z-index: 1000 !important; } .mb-pin:hover span, .mb-pin:focus span { transform: translate(-50%, calc(-100% - 8px)) scale(1.08); } .mb-popwrap .leaflet-popup-content { margin: 0; width: 220px !important; } .mb-popwrap .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; } .mb-pop { display: grid; gap: 2px; color: #1c2629 !important; text-decoration: none !important; font-size: 12px; line-height: 1.5; } .mb-pop img { width: 100%; height: 110px; object-fit: cover; display: block; } .mb-pop__p { padding: 8px 10px 0; color: #9a5b12; font-size: 16px; font-weight: 700; } .mb-pop__t { padding: 0 10px; font-weight: 700; font-size: 13px; } .mb-pop__m { padding: 0 10px; color: #5e6b6a; } .mb-pop__go { padding: 4px 10px 10px; color: var(--mb-main); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .mb-pin span { transition: none; } } /* 探し方タブがテーマのボタンの色に負けないようにする */ .mb-portal .mb-portal__tabs button { background: transparent !important; color: var(--mb-muted) !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; text-decoration: none !important; } .mb-portal .mb-portal__tabs button[aria-selected="true"] { background: var(--mb-surface) !important; color: var(--mb-main) !important; border-bottom-color: var(--mb-main) !important; } .mb-portal .mb-portal__tabs button:focus-visible { outline: 2px solid var(--mb-main) !important; outline-offset: -2px; } .mb-portal button.mb-go { background: var(--mb-new) !important; color: #fff !important; border: 0 !important; } .mb-portal button.mb-reset { background: none !important; color: var(--mb-main) !important; border: 0 !important; } /* ===== 2.2 住宅ローンギャラリー ===== */ .ln-bn { background: #e3efed; } .ln-bn .mm-bn__body { background: #1f5c56; } .ln-h2 { margin-top: 2em !important; } .ln-news { margin: 0 0 1.2em; padding: 14px 18px; border-left: 4px solid #2f7a72; border-radius: 0 10px 10px 0; background: #eef5f4; } .ln-news__h { margin: 0 0 6px !important; font-weight: 700; color: #1f5c56; } .ln-news ul { margin: 0 !important; padding-left: 1.2em !important; } .ln-news li { margin: 2px 0; font-size: .92em; } .ln-sim { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--mb-border); border-radius: 12px; overflow: hidden; background: var(--mb-surface); scroll-margin-top: 90px; } .ln-sim.is-flash { animation: ln-flash 1s ease; } @keyframes ln-flash { 0% { box-shadow: 0 0 0 0 rgba(47, 122, 114, .6); } 100% { box-shadow: 0 0 0 14px rgba(47, 122, 114, 0); } } .ln-sim__in, .ln-sim__out { display: grid; gap: 10px; align-content: start; padding: 18px; } .ln-sim__in { background: #f4f8f7; } .ln-sim__h { margin: 0 !important; font-weight: 700; color: #1f5c56; } .ln-sim label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; } .ln-unit { display: flex; align-items: center; gap: 6px; font-weight: 400; } .ln-sim input, .ln-sim select { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--mb-border); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; font-family: var(--mb-num); } .ln-unit input { flex: 1; text-align: right; } .ln-note { margin: 0 !important; font-size: 12px; color: var(--mb-muted); line-height: 1.6; } .ln-big { display: grid; gap: 2px; padding: 14px 16px; border-radius: 10px; background: #2f7a72; color: #fff; } .ln-big span { font-size: 13px; opacity: .9; } .ln-big b { font-size: 30px; line-height: 1.2; font-family: var(--mb-num); font-variant-numeric: tabular-nums; } .ln-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 2px; border-bottom: 1px dashed var(--mb-border); font-size: 14px; } .ln-row b { font-family: var(--mb-num); font-variant-numeric: tabular-nums; } .ln-row--em b { color: #1f5c56; font-size: 16px; } .ln-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--mb-soft); } .ln-bar i { display: block; height: 100%; transition: width .3s ease; } .ln-bar i:first-child { background: #2f7a72; } .ln-bar i:last-child { background: #f2c48a; } .ln-legend { display: flex; gap: 14px; margin: 0 !important; font-size: 12px; color: var(--mb-muted); } .ln-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; } .ln-legend .p::before { background: #2f7a72; } .ln-legend .i::before { background: #f2c48a; } .ln-cap { display: grid; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--mb-border); } @media (max-width: 700px) { .ln-sim { grid-template-columns: 1fr; } } .ln-rates__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; } .ln-rates__month { margin: 0 !important; font-size: 13px; color: var(--mb-muted); } .ln-rates__bar label { display: flex; align-items: center; gap: 6px; font-size: 13px; } .ln-rates__bar select { padding: 6px 8px; border: 1px solid var(--mb-border); border-radius: 8px; background: #fff; } .ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .ln-card { display: grid; gap: 6px; align-content: start; padding: 14px; border: 1px solid var(--mb-border); border-radius: 12px; background: var(--mb-surface); } .ln-card__name { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 15px !important; line-height: 1.4; } .ln-card__name::before, .ln-card__name::after { display: none !important; } .ln-card__feat { margin: 0 !important; font-size: 12px; color: var(--mb-muted); } .ln-card__rates { display: grid; gap: 4px; margin: 4px 0 0 !important; } .ln-card__rates > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: var(--mb-soft); } .ln-card__rates dt { margin: 0; font-size: 12px; font-weight: 400; white-space: nowrap; } .ln-card__rates dd { margin: 0; font-size: 17px; font-weight: 700; font-family: var(--mb-num); font-variant-numeric: tabular-nums; } .ln-card__rates .is-min { background: #e3efed; } .ln-card__rates .is-min dd { color: #1f5c56; } .ln-card__rates .is-min dt::after { content: "最低"; margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: #2f7a72; color: #fff; font-size: 10px; font-weight: 700; } .ln-card button.ln-use { padding: 3px 10px !important; border: 1px solid #2f7a72 !important; border-radius: 999px !important; background: #fff !important; color: #1f5c56 !important; font-size: 12px !important; line-height: 1.6 !important; white-space: nowrap !important; cursor: pointer; box-shadow: none !important; } .ln-card button.ln-use:hover, .ln-card button.ln-use:focus-visible { background: #2f7a72 !important; color: #fff !important; } .ln-card__sub, .ln-card__note { margin: 0 !important; font-size: 12px; line-height: 1.5; } .ln-card__note { color: var(--mb-muted); } .ln-card__link { justify-self: start; font-size: 13px; color: #1f5c56; } .ln-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .ln-kind { padding: 14px 16px; border-radius: 12px; background: var(--mb-soft); font-size: .92em; } .ln-kind p { margin: 0 !important; } .ln-kind__h { margin-bottom: 6px !important; font-weight: 700; color: #1f5c56; } .ln-mini { display: grid; gap: 4px; margin: 1.5em 0; padding: 14px 18px; border: 1px solid #b9d6d2; border-radius: 12px; background: #f4f8f7; } .ln-mini p { margin: 0 !important; } .ln-mini__h { font-weight: 700; color: #1f5c56; font-size: 13px; } .ln-mini__v b { font-size: 24px; color: #1f5c56; font-family: var(--mb-num); } .ln-mini__c { font-size: 12px; color: var(--mb-muted); } .ln-mini a { font-weight: 700; color: #1f5c56; } @media (prefers-reduced-motion: reduce) { .ln-bar i { transition: none; } .ln-sim.is-flash { animation: none; } } /* ===== 2.3 物件詳細：返済例と諸費用 ===== */ .ln-plan { display: grid; gap: 12px; margin: 2em 0; padding: 20px; border: 1px solid #b9d6d2; border-radius: 14px; background: #f7fbfa; } .ln-plan p { margin: 0 !important; } .ln-plan h2.ln-plan__h, .ln-plan h3.ln-plan__h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: #1f5c56 !important; line-height: 1.4; } .ln-plan h2.ln-plan__h::before, .ln-plan h2.ln-plan__h::after, .ln-plan h3.ln-plan__h3::before, .ln-plan h3.ln-plan__h3::after { display: none !important; } .ln-plan h2.ln-plan__h { font-size: 20px !important; } .ln-plan h3.ln-plan__h3 { margin-top: 8px !important; font-size: 16px !important; } .ln-plan__cond { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px; border-radius: 10px; background: #fff; } .ln-plan label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; } .ln-plan input[type="number"], .ln-plan select { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--mb-border); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; font-family: var(--mb-num); } .ln-plan select { font-size: 14px; } .ln-plan__loan { grid-column: 1 / -1; font-size: 14px; } .ln-plan__loan b { font-family: var(--mb-num); } .ln-plan__pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .ln-pay { display: grid; gap: 2px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--mb-border); } .ln-pay--hendo { border-top: 4px solid #2f7a72; } .ln-pay--kotei10 { border-top: 4px solid #4f7fb8; } .ln-pay--zenki { border-top: 4px solid #9a5b12; } .ln-pay__k { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 700; } .ln-pay__k span { font-family: var(--mb-num); } .ln-pay__v { font-size: 13px; } .ln-pay__v b { font-size: 24px; font-family: var(--mb-num); font-variant-numeric: tabular-nums; color: #1c2629; } .ln-pay__s { font-size: 12px; color: var(--mb-muted); } .ln-pay__b { font-size: 11px; color: var(--mb-muted); } .ln-plan__fine { font-size: 12px; line-height: 1.6; color: var(--mb-muted); } .ln-plan__opts { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 18px; } .ln-plan__opts label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px; } .ln-plan__opts label:has(select) { flex: 1 1 260px; } .ln-cost { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; border-radius: 10px; overflow: hidden; } .ln-cost th, .ln-cost td { padding: 9px 12px !important; border: 0 !important; border-bottom: 1px solid var(--mb-border) !important; background: #fff !important; color: inherit !important; text-align: left; vertical-align: middle; } .ln-cost th { font-weight: 700; } .ln-cost th small { display: block; font-weight: 400; font-size: 11px; color: var(--mb-muted); } .ln-cost td { text-align: right !important; white-space: nowrap; font-family: var(--mb-num); font-variant-numeric: tabular-nums; } .ln-cost tfoot th, .ln-cost tfoot td { background: #e3efed !important; color: #1f5c56 !important; font-size: 15px; font-weight: 700; } .ln-cost .ln-cost__cash th, .ln-cost .ln-cost__cash td { background: #1f5c56 !important; color: #fff !important; } .ln-plan__more { justify-self: start; font-size: 14px; font-weight: 700; color: #1f5c56; } @media (max-width: 520px) { .ln-plan { padding: 14px; } .ln-plan__cond { grid-template-columns: 1fr; } } /* ===== 2.4 ギャラリーの「地図から／路線・駅から／町名から」 ===== */ .gx { margin: 0 0 14px; border: 1px solid var(--mb-border); border-radius: 12px; overflow: hidden; background: var(--mb-surface); } .gx .gx__tabs button { background: transparent !important; color: var(--mb-muted) !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; text-decoration: none !important; box-shadow: none !important; } .gx .gx__tabs button[aria-selected="true"] { background: var(--mb-surface) !important; color: var(--mb-main) !important; border-bottom-color: var(--mb-main) !important; } .gx .gx__tabs button:focus-visible { outline: 2px solid var(--mb-main) !important; outline-offset: -2px; } .gx__panel { display: grid; gap: 10px; padding: 14px; } .gx__panel[hidden] { display: none !important; } .gx__map { height: 380px; } .gx__mapbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 14px; } .gx__mapbar label { display: flex; align-items: center; gap: 6px; font-weight: 700; } .gx__hint { font-size: 12px; color: var(--mb-muted); } .gx__admin { margin: 0 !important; padding: 8px 10px; border-radius: 8px; background: #fff6e0; font-size: 12px; } .gx__line { display: grid; gap: 6px; } .gx__line + .gx__line { padding-top: 10px; border-top: 1px dashed var(--mb-border); } .gx__line-h { margin: 0 !important; } .gx button.gx__line-all { font-weight: 700 !important; } .gx__clear { margin: 0 !important; padding: 0 14px 12px; text-align: right; } .gx__clear[hidden] { display: none; } .gx button.mb-reset { background: none !important; color: var(--mb-main) !important; border: 0 !important; padding: 0 !important; text-decoration: underline !important; font-size: 13px; cursor: pointer; box-shadow: none !important; } .mb-pin--mm span { background: #24427a; } .mb-pin--mm span::after { border-top-color: #24427a; } .mb-pin--mm.is-has span { background: #9a5b12; } .mb-pin--mm.is-has span::after { border-top-color: #9a5b12; } .mb-pin--tc span { background: #7a4a12; } .mb-pin--tc span::after { border-top-color: #7a4a12; } .mb-pin--tc.tc-pin--商業地 span { background: #b4405a; } .mb-pin--tc.tc-pin--商業地 span::after { border-top-color: #b4405a; } @media (max-width: 600px) { .gx__map { height: 320px; } } /* ===== 2.5 トップの地図の重ね表示・周辺環境・最新記事 ===== */ .mb-dotpin { background: none; border: 0; } .mb-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; } .mb-dot--mm { background: #24427a; } .mb-dot--tc { background: #7a4a12; } .mb-map__layers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 !important; font-size: 13px; } .mb-map__layers label { display: inline-flex; align-items: center; gap: 5px; } .mb-map__layers .mb-dot { width: 18px; height: 18px; font-size: 10px; box-shadow: none; } .nb { display: grid; gap: 12px; margin: 2em 0; } .nb h2.nb__h { margin: 0 !important; } .nb__map { height: 340px; } .nb-home span { background: #d23b3b; } .nb-home span::after { border-top-color: #d23b3b !important; } .nb__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 14px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .nb__list li { display: grid; grid-template-columns: auto 6.5em 1fr auto; align-items: center; gap: 8px; margin: 0 !important; padding: 8px 4px; border-bottom: 1px solid var(--mb-border); font-size: 14px; } .nb__list li::before { display: none !important; } .nb__dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; } .nb__k { font-size: 12px; color: var(--mb-muted); } .nb__n { min-width: 0; font-weight: 700; overflow-wrap: anywhere; } .nb__n small { display: block; font-weight: 400; font-size: 11px; color: var(--mb-muted); } .nb__d { white-space: nowrap; font-family: var(--mb-num); font-size: 13px; } .nb__fine { margin: 0 !important; font-size: 12px; line-height: 1.6; color: var(--mb-muted); } @media (max-width: 520px) { .nb__list li { grid-template-columns: auto 1fr auto; } .nb__k { grid-column: 2; grid-row: 1; } .nb__n { grid-column: 2 / -1; } .nb__d { grid-column: 3; grid-row: 1; } .nb__map { height: 280px; } } .mb-news { margin: 0 0 8px; } .mb-news__sh { align-items: center !important; } .mb-news__all { font-size: 14px; font-weight: 700; } .mb-news__wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; } .mb-news__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .mb-news__card a { display: grid; height: 100%; border: 1px solid var(--mb-border); border-radius: 10px; overflow: hidden; background: var(--mb-surface); color: inherit !important; text-decoration: none !important; transition: box-shadow .2s ease, transform .2s ease; } .mb-news__card a:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-2px); } .mb-news__ph { position: relative; aspect-ratio: 16 / 10; background: var(--mb-soft); overflow: hidden; } .mb-news__ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .mb-news__noimg { display: grid; place-items: center; height: 100%; color: var(--mb-muted); font-size: 13px; font-weight: 700; } .mb-news__cat { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: var(--mb-main); color: #fff; font-size: 11px; font-weight: 700; } .mb-news__body { display: grid; gap: 4px; padding: 10px 12px 12px; } .mb-news__body time { font-size: 12px; color: var(--mb-muted); font-family: var(--mb-num); } .mb-news h3.mb-news__t { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 15px !important; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mb-news h3.mb-news__t::before, .mb-news h3.mb-news__t::after { display: none !important; } .mb-news__cats { border: 1px solid var(--mb-border); border-radius: 10px; background: var(--mb-surface); overflow: hidden; } .mb-news__cats-h { margin: 0 !important; padding: 10px 14px; background: var(--mb-main); color: #fff; font-weight: 700; font-size: 14px; } .mb-news__cats ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .mb-news__cats li { margin: 0 !important; border-top: 1px solid var(--mb-border); } .mb-news__cats li::before { display: none !important; } .mb-news__cats li:first-child { border-top: 0; } .mb-news__cats a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 14px; color: inherit !important; text-decoration: none !important; font-size: 14px; } .mb-news__cats a:hover { background: var(--mb-soft); } .mb-news__cats b { min-width: 2em; padding: 0 6px; border-radius: 999px; background: var(--mb-soft); text-align: center; font-size: 12px; font-weight: 700; } @media (max-width: 800px) { .mb-news__wrap { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .mb-news__card a { transition: none; } .mb-news__card a:hover { transform: none; } } /* ===== 2.7 新着の売買・賃貸タブ／サイドバーの駅（売買・賃貸）／ハザードマップ ===== */ .mb-utabs__bar { display: flex; gap: 6px; margin-bottom: 8px; } .mb-utabs button.mb-utabs__t { flex: 1; display: inline-flex; justify-content: center; align-items: baseline; gap: 6px; padding: 8px 12px !important; border: 1px solid var(--mb-border) !important; border-radius: 8px !important; background: var(--mb-soft) !important; color: var(--mb-muted) !important; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: none !important; text-decoration: none !important; } .mb-utabs button.mb-utabs__t span { font-size: 11px; font-weight: 400; } .mb-utabs button.mb-utabs__t--sale[aria-selected="true"] { background: #9a5b12 !important; border-color: #9a5b12 !important; color: #fff !important; } .mb-utabs button.mb-utabs__t--rent[aria-selected="true"] { background: #2a7e47 !important; border-color: #2a7e47 !important; color: #fff !important; } .mb-utabs button.mb-utabs__t:focus-visible { outline: 2px solid var(--mb-main) !important; outline-offset: 2px; } .mb-utabs [data-mbu-panel][hidden] { display: none !important; } .mb-sb-box--sale .mb-sb-box__h { border-left: 4px solid #9a5b12; padding-left: 8px; } .mb-sb-box--rent .mb-sb-box__h { border-left: 4px solid #2f8a4e; padding-left: 8px; } .hz { display: grid; gap: 10px; margin: 2em 0; } .hz h2.hz__h { margin: 0 !important; } .hz p { margin: 0 !important; } .hz__lead { font-size: 14px; } .hz__opts { display: flex; flex-wrap: wrap; gap: 6px 10px; } .hz__opt { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--mb-border); border-radius: 999px; background: var(--mb-surface); font-size: 13px; cursor: pointer; } .hz__opt:has(input:checked) { border-color: #c0392b; background: #fdf1ef; font-weight: 700; } .hz__map { height: 380px; } .hz__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; } .hz__legend-h { font-weight: 700; } .hz__legend i { display: inline-block; width: 14px; height: 10px; margin-right: 4px; border: 1px solid rgba(0, 0, 0, .15); vertical-align: -1px; } .hz__fine { font-size: 12px; line-height: 1.6; color: var(--mb-muted); } .hz__more { justify-self: start; font-size: 14px; font-weight: 700; } @media (max-width: 600px) { .hz__map { height: 300px; } } /* 丁目別の坪単価（2.8.0） */ .tc-card__rosen { margin: 0 !important; font-size: .85em; font-variant-numeric: tabular-nums; } .tc-card__rosen .tc-card__lab { margin-right: 6px; } .tc-rosen { margin-top: 2.5em; } .tc-rosen .mm-q { margin-bottom: 12px; } .tc-rosen__gyo { margin: 0 0 8px; border: 1px solid var(--mb-border); border-radius: var(--mb-radius); background: var(--mb-surface); } .tc-rosen__gyo > summary { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; font-weight: 700; cursor: pointer; } .tc-rosen__gyo > summary small { font-weight: 400; color: var(--mb-muted); } .tc-rosen__gyo[open] > summary { border-bottom: 1px solid var(--mb-border); } .tc-rosen__gyo .mb-spec-wrap { padding: 10px; } .tc-rosen__gyo[hidden] { display: none; } .tc-rosen__table { min-width: 0; } .tc-rosen__table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; } .tc-rosen__sum { margin: 0 0 .6em !important; } .tc-rosen__sum b { color: #9a5b12; font-size: 1.15em; } .tc-lead p { margin: 0 0 .6em !important; } .tc-lead p:last-child { margin-bottom: 0 !important; } .tc-card__near { margin: 0 !important; font-size: .82em; color: var(--mb-muted); font-variant-numeric: tabular-nums; } .tc-card__near .tc-card__lab { margin-right: 6px; } .tc-hero:has(> div:nth-child(4)) { grid-template-columns: 2fr 1fr 1fr 1.3fr; } @media (max-width: 600px) { .tc-hero:has(> div:nth-child(4)) { grid-template-columns: 1fr 1fr; } } /* 買う・借りるの切り替え（2.15.0） */ .mb-kindsw { display: inline-flex; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 999px; background: var(--mb-soft); } .mb-kindsw__b { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 22px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-weight: 700; cursor: pointer; } .mb-kindsw__b span { font-size: .8em; font-weight: 400; opacity: .75; } .mb-kindsw__b[aria-pressed="true"] { background: var(--mb-main); color: #fff; } .mb-kindsw__b--rent[aria-pressed="true"] { background: var(--mb-accent); } .mb-acc__none { margin: 0 !important; padding: 10px 4px; font-size: .9em; color: var(--mb-muted); } /* 最新記事：画像なしの一覧（2.17.0） */ .mb-news__list { margin: 0 !important; padding: 0 !important; list-style: none !important; border-top: 1px solid var(--mb-border); } .mb-news__item { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--mb-border); } .mb-news__item::before { display: none !important; } .mb-news__item a { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 13px 6px; color: inherit !important; text-decoration: none !important; transition: background .15s ease; } .mb-news__item a:hover { background: var(--mb-soft); } .mb-news__item a:hover .mb-news__t { color: var(--mb-main); text-decoration: underline; } .mb-news__item time { font-size: 13px; color: var(--mb-muted); font-family: var(--mb-num); font-variant-numeric: tabular-nums; } .mb-news__item .mb-news__cat { position: static; justify-self: start; padding: 1px 9px; border-radius: 999px; background: var(--mb-main); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; } .mb-news__item .mb-news__t { font-size: 15px; line-height: 1.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 600px) { .mb-news__item a { grid-template-columns: auto minmax(0, 1fr); } .mb-news__item .mb-news__t { grid-column: 1 / -1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* 地図の価格の色分け（2.18.0）：買う＝1,000万円ごと、借りる＝1万円ごと */ .mb-pin.mb-pin--b0 span, .mb-legend__c--b0 { background: #2f6db5 !important; } .mb-pin.mb-pin--b0 span::after { border-top-color: #2f6db5 !important; } .mb-pin.mb-pin--b1 span, .mb-legend__c--b1 { background: #1d7a8e !important; } .mb-pin.mb-pin--b1 span::after { border-top-color: #1d7a8e !important; } .mb-pin.mb-pin--b2 span, .mb-legend__c--b2 { background: #2a7e47 !important; } .mb-pin.mb-pin--b2 span::after { border-top-color: #2a7e47 !important; } .mb-pin.mb-pin--b3 span, .mb-legend__c--b3 { background: #5f7f17 !important; } .mb-pin.mb-pin--b3 span::after { border-top-color: #5f7f17 !important; } .mb-pin.mb-pin--b4 span, .mb-legend__c--b4 { background: #94700c !important; } .mb-pin.mb-pin--b4 span::after { border-top-color: #94700c !important; } .mb-pin.mb-pin--b5 span, .mb-legend__c--b5 { background: #ad5518 !important; } .mb-pin.mb-pin--b5 span::after { border-top-color: #ad5518 !important; } .mb-pin.mb-pin--b6 span, .mb-legend__c--b6 { background: #c2412d !important; } .mb-pin.mb-pin--b6 span::after { border-top-color: #c2412d !important; } .mb-pin.mb-pin--b7 span, .mb-legend__c--b7 { background: #b4305a !important; } .mb-pin.mb-pin--b7 span::after { border-top-color: #b4305a !important; } .mb-pin.mb-pin--b8 span, .mb-legend__c--b8 { background: #7a2e8c !important; } .mb-pin.mb-pin--b8 span::after { border-top-color: #7a2e8c !important; } .mb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0 !important; font-size: 12px; color: var(--mb-muted); } .mb-legend__h { font-weight: 700; color: inherit; } .mb-legend__i { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .mb-legend__c { display: inline-block; width: 14px; height: 14px; border-radius: 3px; } /* 物件詳細：写真のスライドショー（2.19.0） */ .mb-ss { margin: 0 0 1.4em; } .mb-ss__stage { position: relative; aspect-ratio: 4 / 3; max-height: 70vh; width: 100%; overflow: hidden; border-radius: var(--mb-radius); background: #111; cursor: pointer; } .mb-ss__slide { position: absolute; inset: 0; margin: 0 !important; opacity: 0; transition: opacity .6s ease; } .mb-ss__slide.is-on { opacity: 1; z-index: 1; } .mb-ss__slide img { display: block; width: 100%; height: 100%; object-fit: contain; } .mb-ss__nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #222; font-size: 30px; line-height: 40px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: background .15s; } .mb-ss__nav:hover { background: #fff; } .mb-ss__nav--prev { left: 10px; } .mb-ss__nav--next { right: 10px; } .mb-ss__count { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; font-family: var(--mb-num); } .mb-ss__play { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); cursor: pointer; } .mb-ss__pause { display: block; width: 10px; height: 12px; margin: 0 auto; border-left: 3px solid #fff; border-right: 3px solid #fff; } .mb-ss__play.is-paused .mb-ss__pause { width: 0; height: 0; border: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 12px; } .mb-ss__cap { min-height: 1.6em; margin: 6px 0 0 !important; text-align: center; font-size: 14px; color: var(--mb-muted); } .mb-ss__thumbs { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; } .mb-ss__thumb { flex: 0 0 auto; width: 84px; height: 63px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--mb-soft); cursor: pointer; opacity: .65; transition: opacity .15s, border-color .15s; } .mb-ss__thumb:hover { opacity: 1; } .mb-ss__thumb.is-on { border-color: var(--mb-main); opacity: 1; } .mb-ss__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 600px) { .mb-ss__nav { width: 36px; height: 36px; margin-top: -18px; font-size: 24px; line-height: 32px; } .mb-ss__thumb { width: 64px; height: 48px; } } @media (prefers-reduced-motion: reduce) { .mb-ss__slide { transition: none; } } /* 物件詳細：用途地域・建ぺい率・容積率（2.20.0） */ .zn { margin-top: 2em; } .zn__card { --zc: #7a8a8a; margin-bottom: 12px; padding: 16px 18px; border: 1px solid var(--mb-border); border-left: 6px solid var(--zc); border-radius: var(--mb-radius); background: var(--mb-surface); } .zn__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .zn__badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--zc) 22%, #fff); color: #1c2629; font-size: 18px; font-weight: 800; } .zn__badge::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--zc); box-shadow: 0 0 0 2px #fff inset; } .zn__src { font-size: 12px; color: var(--mb-muted); } .zn__desc { margin: 8px 0 0 !important; font-size: 14px; } .zn__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px 24px; align-items: center; margin-top: 14px; } .zn__meters { display: grid; gap: 14px; } .zn__mh { display: flex; justify-content: space-between; align-items: baseline; } .zn__mh span { font-size: 13px; font-weight: 700; color: var(--mb-muted); } .zn__mh b { font-size: 30px; line-height: 1.1; font-family: var(--mb-num); font-variant-numeric: tabular-nums; } .zn__mh small { font-size: 15px; margin-left: 1px; } .zn__bar { position: relative; height: 12px; margin: 4px 0 6px; border-radius: 999px; background: var(--mb-soft); overflow: visible; } .zn__bar i { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; } .zn__bar--yp em { position: absolute; top: 14px; transform: translateX(-50%); font-style: normal; font-size: 10px; color: var(--mb-muted); } .zn__bar--yp em::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 12px; background: rgba(0, 0, 0, .2); } .zn__bar--yp { margin-bottom: 22px; } .zn__m p { margin: 0 !important; font-size: 13px; line-height: 1.6; } .zn__fig { width: 100%; height: auto; } .zn__typed { margin: 0 0 10px !important; font-size: 13px; color: var(--mb-muted); } .zn__modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; } .zn__modes span { margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--mb-muted); } .zn__modes button { padding: 6px 14px; border: 1px solid var(--mb-border); border-radius: 999px; background: var(--mb-surface); font-size: 13px; font-weight: 700; cursor: pointer; } .zn__modes button[aria-pressed="true"] { background: var(--mb-main); border-color: var(--mb-main); color: #fff; } .zn__map { height: 380px; border-radius: var(--mb-radius); } .zn__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font-size: 12px; color: var(--mb-muted); } .zn__legend b { color: #1c2629; margin-right: 4px; } .zn__legend span { display: inline-flex; align-items: center; gap: 4px; } .zn__legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; } .zn__pop-badge { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 4px; color: #1c2629; font-weight: 700; } @media (max-width: 700px) { .zn__grid { grid-template-columns: 1fr; } .zn__fig { max-width: 320px; } } @media (prefers-reduced-motion: reduce) { .zn__bar i { transition: none; } } .zn__city { margin: 10px 0 0 !important; } .zn__city .mb-btn { color: var(--mb-main) !important; font-size: 14px; } /* 営業担当がご紹介する周辺環境（2.22.0） */ .sp { margin-top: 2em; } .sp__staff { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--mb-radius); background: color-mix(in srgb, var(--mb-main) 7%, #fff); } .sp__face { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); background: var(--mb-main); } .sp__face-img { display: block; width: 100%; height: 100%; object-fit: cover; } .sp__face-none, .sp__mini-none { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-weight: 800; font-size: 28px; } .sp__who p { margin: 0 !important; } .sp__role { font-size: 12px; color: var(--mb-muted); } .sp__name { font-size: 20px; font-weight: 800; line-height: 1.4; } .sp__name small { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--mb-muted); } .sp__lead { margin-top: 4px !important; font-size: 14px; } .sp__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .sp__card { display: flex; flex-direction: column; border: 1px solid var(--mb-border); border-radius: var(--mb-radius); overflow: hidden; background: var(--mb-surface); } .sp__ph { position: relative; aspect-ratio: 4 / 3; background: var(--mb-soft); overflow: hidden; } .sp__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .sp__card:hover .sp__ph img { transform: scale(1.04); } .sp__noimg { display: grid; place-items: center; height: 100%; color: var(--mb-muted); font-weight: 700; } .sp__cat { position: absolute; left: 8px; top: 8px; padding: 2px 10px; border-radius: 999px; background: var(--mb-main); color: #fff; font-size: 12px; font-weight: 700; } .sp__body { display: grid; gap: 4px; padding: 12px 14px 14px; } .sp h3.sp__t { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 16px !important; line-height: 1.4; } .sp h3.sp__t::before, .sp h3.sp__t::after { display: none !important; } .sp__dist { margin: 0 !important; font-size: 13px; color: var(--mb-accent); font-weight: 700; } .sp__say { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; } .sp__mini { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--mb-main); } .sp__mini-img { display: block; width: 100%; height: 100%; object-fit: cover; } .sp__mini-none { font-size: 15px; } .sp__say p { position: relative; flex: 1; margin: 0 !important; padding: 8px 11px; border-radius: 10px; background: var(--mb-soft); font-size: 13.5px; line-height: 1.65; } .sp__say p::before { content: ""; position: absolute; left: -7px; top: 12px; border: 7px solid transparent; border-left: 0; border-right-color: var(--mb-soft); } @media (max-width: 600px) { .sp__face { width: 64px; height: 64px; } .sp__name { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .sp__ph img { transition: none; } } .sp .tc-fine { margin-top: 10px !important; } /* 物件詳細：ページ内の目次と小さな問い合わせ欄（2.23.0） */ .mb-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; } .mb-toc a { padding: 5px 12px; border: 1px solid var(--mb-border); border-radius: 999px; background: var(--mb-surface); color: inherit !important; font-size: 13px; text-decoration: none !important; } .mb-toc a:hover { border-color: var(--mb-main); color: var(--mb-main) !important; } .mb-toc .mb-toc__cta { background: var(--mb-main); border-color: var(--mb-main); color: #fff !important; font-weight: 700; } .mb-sec, #gaiyo, #toiawase { scroll-margin-top: 90px; } .mb-cta-mini { display: grid; gap: 8px; margin: 1.6em 0; padding: 14px 16px; border-radius: var(--mb-radius); background: color-mix(in srgb, var(--mb-main) 7%, #fff); } .mb-cta-mini p { margin: 0 !important; font-weight: 700; font-size: 14px; } .mb-cta-mini .mb-btn { padding: 10px 18px; } .mb-cta-mini__tel { color: var(--mb-main) !important; } /* かんたん匿名査定（2.24.0） */ .st { display: grid; gap: 14px; padding: 20px; border: 2px solid var(--mb-main); border-radius: 14px; background: var(--mb-surface); } .st__steps { display: flex; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: none; } .st__steps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 !important; padding: 8px 4px; border-radius: 8px; background: var(--mb-soft); color: var(--mb-muted); font-size: 13px; font-weight: 700; } .st__steps li::before { display: none !important; } .st__steps li b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 12px; } .st__steps li.is-on { background: var(--mb-main); color: #fff; } .st__steps li.is-on b { color: var(--mb-main); } .st__anon { margin: 0 !important; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--mb-accent) 12%, #fff); font-size: 13px; } .st__q { margin: 0; padding: 0; border: 0; min-width: 0; } .st__q legend { margin-bottom: 10px; padding: 0; font-size: 17px; font-weight: 800; } .st__types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .st__type input { position: absolute; opacity: 0; pointer-events: none; } .st__type span { display: grid; place-items: center; gap: 4px; padding: 18px 8px; border: 2px solid var(--mb-border); border-radius: 12px; font-weight: 800; cursor: pointer; transition: border-color .15s, background .15s; } .st__type i { font-style: normal; font-size: 30px; } .st__type input:checked + span { border-color: var(--mb-main); background: color-mix(in srgb, var(--mb-main) 8%, #fff); color: var(--mb-main); } .st__type input:focus-visible + span { outline: 3px solid var(--mb-main); outline-offset: 2px; } .st__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; } .st__f { display: grid; gap: 4px; font-size: 14px; font-weight: 700; } .st__f[hidden] { display: none; } .st__f--wide { grid-column: 1 / -1; } .st__f em { margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #b4405a; color: #fff; font-size: 11px; font-style: normal; } .st__f select, .st__f input { width: 100%; padding: 10px 12px; border: 1px solid var(--mb-border); border-radius: 8px; background: #fff; font-size: 16px; } .st__unit { display: flex; align-items: center; gap: 6px; } .st__unit b { font-weight: 400; } .st__unit select { width: auto; } .st__err { margin: 8px 0 0 !important; color: #b4405a; font-weight: 700; } .st__nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; } .st__nav .st__next { margin-left: auto; padding: 14px 28px; font-size: 16px; } .st__back { border: 0; background: none; color: var(--mb-main); text-decoration: underline; cursor: pointer; font-size: 14px; } .st__result { display: grid; gap: 10px; } .st__rh { margin: 0 !important; font-weight: 700; color: var(--mb-muted); } .st__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 !important; color: var(--mb-main); } .st__price b { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; font-family: var(--mb-num); } .st__mid { margin: 0 !important; font-weight: 700; } .st__town { margin: 8px 0 0 !important; font-size: 14px; } .st__note { margin: 0 !important; font-size: 13px; color: var(--mb-muted); } .st__cta { display: grid; gap: 8px; padding: 16px; border-radius: 12px; background: color-mix(in srgb, var(--mb-main) 7%, #fff); } .st__cta-h { margin: 0 !important; font-size: 17px; font-weight: 800; } .st__cta-lead, .st__tel { margin: 0 !important; font-size: 14px; } .st__again { margin: 0 !important; text-align: center; } .st__how { font-size: 13px; } .st__how summary { cursor: pointer; font-weight: 700; } .st__how ul { margin: 8px 0 0 !important; } @media (max-width: 520px) { .st { padding: 14px; } .st__type span { padding: 14px 4px; } .st__type i { font-size: 24px; } .st__steps li { font-size: 11px; } } /* サイドバー：匿名で1分 簡易査定（2.25.0） */ .sb-st { position: relative; overflow: hidden; gap: 8px; padding: 16px; border: 0; background: linear-gradient(135deg, #b4690f 0%, #9a5b12 55%, #7a4510 100%); color: #fff !important; box-shadow: 0 6px 18px rgba(154, 91, 18, .35); animation: sbst-breathe 3.2s ease-in-out infinite; } .sb-st::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: sbst-shine 3.6s ease-in-out infinite; pointer-events: none; } .sb-st:hover { box-shadow: 0 10px 26px rgba(154, 91, 18, .45); transform: translateY(-2px); } .sb-st__badge { justify-self: start; padding: 2px 10px; border-radius: 999px; background: #fff; color: #9a5b12; font-size: 11px !important; font-weight: 800; opacity: 1 !important; } .sb-st__row { display: flex; align-items: center; gap: 10px; opacity: 1 !important; font-size: inherit !important; } .sb-st__watch { flex: 0 0 auto; width: 46px; height: 46px; color: #fff; } .sb-st__hand { transform-origin: 24px 27px; animation: sbst-hand 4s linear infinite; } .sb-st__arc { animation: sbst-arc 4s linear infinite; } .sb-st__txt { display: grid; gap: 2px; opacity: 1 !important; font-size: inherit !important; } .sb-st__txt b { font-size: 18px; line-height: 1.35; } .sb-st__txt em { display: inline-block; margin: 0 2px; padding: 0 6px; border-radius: 6px; background: #ffd36b; color: #6b3d0a; font-style: normal; animation: sbst-pop 4s ease-in-out infinite; } .sb-st__txt small { font-size: 12px; opacity: .9; } .sb-st__demo { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 13px !important; opacity: 1 !important; } .sb-st__lab { font-size: 11px; opacity: .85; margin-right: auto; } .sb-st__num { display: inline-flex; font-size: 22px; font-weight: 800; font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1; } .sb-st__num i { display: inline-block; font-style: normal; animation: sbst-roll 4s cubic-bezier(.2, .8, .2, 1) infinite; } .sb-st__num i:nth-child(1) { animation-delay: .05s; } .sb-st__num i:nth-child(3) { animation-delay: .15s; } .sb-st__num i:nth-child(4) { animation-delay: .25s; } .sb-st__num i:nth-child(5) { animation-delay: .35s; } .sb-st__num i:nth-child(2) { animation: none; } .sb-st__go { justify-self: end; font-size: 13px !important; font-weight: 800; opacity: 1 !important; } .sb-st__go span { display: inline-block; animation: sbst-arrow 1.4s ease-in-out infinite; } @keyframes sbst-breathe { 0%, 100% { box-shadow: 0 6px 18px rgba(154, 91, 18, .35); } 50% { box-shadow: 0 6px 26px rgba(214, 140, 40, .6); } } @keyframes sbst-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } } @keyframes sbst-hand { to { transform: rotate(360deg); } } @keyframes sbst-arc { 0% { stroke-dashoffset: 75.4; } 90%, 100% { stroke-dashoffset: 0; } } @keyframes sbst-pop { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.18); } } @keyframes sbst-roll { 0% { transform: translateY(60%); opacity: 0; filter: blur(2px); } 18%, 100% { transform: translateY(0); opacity: 1; filter: none; } } @keyframes sbst-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .sb-st, .sb-st::after, .sb-st__hand, .sb-st__arc, .sb-st__txt em, .sb-st__num i, .sb-st__go span { animation: none !important; } .sb-st__arc { stroke-dashoffset: 0; } } .sb-st .sb-st__num { font-size: 24px; opacity: 1; } .sb-st .sb-st__lab { font-size: 11px; opacity: .85; } .sb-st .sb-st__num i { font-size: inherit; } .sb-st .sb-st__go span { font-size: inherit; opacity: 1; } /* 匿名査定：同じ駅のマンション・売却費用（2.26.0） */ .st__opts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--mb-soft); font-size: 14px; } .st__opts p { flex-basis: 100%; margin: 0 !important; font-size: 12px; font-weight: 700; color: var(--mb-muted); } .st__opts label[hidden] { display: none; } .st__comps { padding: 12px 14px; border-radius: 10px; background: var(--mb-soft); font-size: 13px; } .st__comps-h, .st__costs-h { margin: 0 0 6px !important; font-weight: 800; font-size: 14px; } .st__comps ul { margin: 0 !important; padding-left: 1.2em !important; } .st__comps li span { display: block; color: var(--mb-muted); } .st__costs { display: grid; gap: 6px; } .st__costs-t th small { display: block; font-size: 11px; font-weight: 400; color: var(--mb-muted); } .st__costs-t td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .st__costs-sum th, .st__costs-sum td { font-weight: 800; background: color-mix(in srgb, var(--mb-main) 6%, #fff) !important; } .st__net { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin: 4px 0 0 !important; padding: 12px 14px; border-radius: 10px; background: var(--mb-main); color: #fff; } .st__net span { font-size: 13px; font-weight: 700; opacity: .9; } .st__net b { font-size: 24px; font-family: var(--mb-num); } .st__costs-note { margin: 0 !important; font-size: 12px; color: var(--mb-muted); } /* 失敗しない不動産売却のポイント（2.27.0） */ .sg { margin-top: 2.4em; } .sg__flow { display: grid; gap: 0; margin: 0 0 1.4em !important; padding: 0 !important; list-style: none !important; } .sg__flow li { position: relative; display: flex; gap: 14px; margin: 0 !important; padding: 0 0 16px !important; } .sg__flow li::before { display: none !important; } .sg__flow li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: color-mix(in srgb, var(--mb-main) 30%, #fff); } .sg__n { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mb-main); color: #fff; font-weight: 800; font-family: var(--mb-num); } .sg__flow b { display: block; font-size: 16px; line-height: 36px; } .sg__flow p { margin: 0 !important; font-size: 14px; color: #333; } .sg__tips, .sg__faq { display: grid; gap: 8px; margin-bottom: 1.4em; } .sg__tip, .sg__q { border: 1px solid var(--mb-border); border-radius: 10px; background: var(--mb-surface); } .sg__tip summary, .sg__q summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 800; cursor: pointer; list-style: none; } .sg__tip summary::-webkit-details-marker, .sg__q summary::-webkit-details-marker { display: none; } .sg__tip summary::after, .sg__q summary::after { content: "＋"; margin-left: auto; color: var(--mb-muted); font-weight: 400; } .sg__tip[open] summary::after, .sg__q[open] summary::after { content: "－"; } .sg__check { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--mb-accent); color: #fff; font-size: 13px; } .sg__tip p, .sg__q p { margin: 0 !important; padding: 0 14px 14px 48px; font-size: 14px; line-height: 1.8; } .sg__q summary span, .sg__q p span { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--mb-main); color: #fff; font-size: 13px; font-family: var(--mb-num); } .sg__q p { display: flex; gap: 10px; padding-left: 14px; } .sg__q p span { background: #b4405a; } /* 現地の様子（2.28.0） */ .gc { margin-top: 2em; } .gc__box { margin-bottom: 1.2em; } .gc__h { margin: 0 0 6px !important; font-weight: 800; } .gc__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--mb-radius); overflow: hidden; background: #e8ecef; } .gc__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .gc__start, .gc__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; border: 0; cursor: pointer; } .gc__start { background: linear-gradient(135deg, #dfe9ee, #c9d6dc); color: #1c2629; } .gc__start-ic { font-size: 44px; } .gc__start b { font-size: 18px; } .gc__start small { font-size: 13px; color: var(--mb-muted); } .gc__start:hover b { text-decoration: underline; } .gc__play { background: #111 center/cover no-repeat; } .gc__play span { display: grid; place-items: center; width: 72px; height: 50px; border-radius: 12px; background: rgba(220, 0, 0, .9); color: #fff; font-size: 24px; transition: transform .15s; } .gc__play:hover span { transform: scale(1.08); } .gc__open { margin: 8px 0 0 !important; } .gc__open .mb-btn { color: var(--mb-main) !important; font-size: 14px; } /* 用途地域：市の都市計画図の案内（2.28.2） */ .zn__city { margin: 12px 0 !important; padding: 14px 16px; border: 1px solid var(--mb-border); border-radius: var(--mb-radius); background: color-mix(in srgb, var(--mb-main) 5%, #fff); } .zn__city-h { margin: 0 0 8px !important; font-weight: 800; } .zn__city-steps { display: grid; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: zn; } .zn__city-steps li { display: grid; gap: 4px; margin: 0 !important; padding-left: 34px !important; position: relative; counter-increment: zn; } .zn__city-steps li::before { content: counter(zn) !important; position: absolute; left: 0; top: 0; display: grid !important; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mb-main); color: #fff; font-size: 13px; font-weight: 800; } .zn__city-steps span { font-size: 13px; font-weight: 700; color: var(--mb-muted); } .zn__city-steps small { font-size: 12px; color: var(--mb-muted); } .zn__city-steps .mb-btn { justify-self: start; padding: 10px 18px; } .zn__copy { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--mb-border); border-radius: 8px; background: #fff; font-size: 15px; cursor: pointer; } .zn__copy b { padding: 3px 10px; border-radius: 6px; background: var(--mb-main); color: #fff; font-size: 12px; } /* 周辺環境：Googleマップ（2.29.0） */ .nb-g { margin-bottom: 12px; } .nb-g__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .nb-g__tabs button { padding: 6px 12px; border: 1px solid var(--mb-border); border-radius: 999px; background: var(--mb-surface); font-size: 13px; font-weight: 700; cursor: pointer; } .nb-g__tabs button[aria-pressed="true"] { background: var(--mb-main); border-color: var(--mb-main); color: #fff; } .nb-g__frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--mb-radius); overflow: hidden; background: #e8ecef; } .nb-g__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .nb-g__open { margin: 6px 0 0 !important; font-size: 13px; text-align: right; } @media (max-width: 600px) { .nb-g__frame { aspect-ratio: 4 / 3; } } /* トップのメインビジュアル：切り替わるスライド（2.30.0） */ .hs { position: relative; display: grid; gap: 10px; } .hs__stage { position: relative; min-height: 340px; border-radius: 14px; overflow: hidden; background: #24427a; } .hs__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; } .hs__slide.is-on { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; z-index: 1; } .hs__link { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; height: 100%; color: #fff !important; text-decoration: none !important; } .hs__visual { position: relative; height: 100%; min-height: 340px; display: grid; place-items: center; overflow: hidden; } .hs__text { position: relative; display: grid; gap: 10px; padding: 28px 36px 28px 8px; } .hs__eye { justify-self: start; margin: 0 !important; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 13px; font-weight: 700; } .hs .hs__title { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: #fff !important; font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(22px, 2.8vw, 32px) !important; font-weight: 800; line-height: 1.4; } .hs .hs__title::before, .hs .hs__title::after { display: none !important; } .hs__title em { font-style: normal; color: #ffd36b; } .hs__lead { margin: 0 !important; font-size: 14px; line-height: 1.8; opacity: .95; } .hs__btn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 12px 22px; border-radius: 999px; background: #fff; color: #1c2629; font-weight: 800; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); transition: transform .15s; } .hs__btn span { transition: transform .15s; } .hs__link:hover .hs__btn { transform: translateY(-2px); } .hs__link:hover .hs__btn span { transform: translateX(4px); } .hs__slide.is-on .hs__text > * { animation: hs-in .7s cubic-bezier(.2, .8, .2, 1) both; } .hs__slide.is-on .hs__text > :nth-child(2) { animation-delay: .1s; } .hs__slide.is-on .hs__text > :nth-child(3) { animation-delay: .2s; } .hs__slide.is-on .hs__text > :nth-child(4) { animation-delay: .3s; } @keyframes hs-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* スライドごとの色 */ .hs__slide--top { background: #24427a; } .hs__slide--satei { background: linear-gradient(135deg, #b4690f, #7a4510); } .hs__slide--kaitori { background: linear-gradient(135deg, #2f5e86, #1d3c5a); } .hs__slide--line { background: linear-gradient(135deg, #0aa64b, #06803a); } .hs__slide--mansion { background: linear-gradient(160deg, #283c7a, #121d40); } .hs__slide--tochi { background: linear-gradient(135deg, #5f7f17, #3b5410); } .hs__slide--line .hs__btn { color: #06803a; } /* 1枚目：写真をゆっくり動かす */ .hs-art--photo { position: absolute; inset: 0; background: #dfe9ee left center/cover no-repeat; } .hs-art--nophoto { background: linear-gradient(135deg, #7fa6c9, #24427a); } .hs__slide--top.is-on .hs-art--photo { animation: hs-kb 13s ease-out both; } .hs__slide--top .hs__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #24427a); } @keyframes hs-kb { from { transform: scale(1.12) translateX(2%); } to { transform: scale(1); } } svg.hs-art { width: 92%; max-width: 440px; height: auto; } /* 動くイラスト（表示中のスライドだけ動かす） */ .hs__slide:not(.is-on) .hs-art * { animation-play-state: paused !important; } .hs-a-hand { transform-origin: 0 0; animation: hs-rot 3s linear infinite; } .hs-a-arc { animation: hs-arc 3s ease-out infinite; } .hs-a-tag { animation: hs-pop 3s ease-out infinite; transform-box: fill-box; transform-origin: center; } .hs-a-lock { animation: hs-float 3s ease-in-out infinite; } .hs-a-house { animation: hs-up .9s ease-out both; } .hs-a-sold { animation: hs-stamp 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; } .hs-a-coin { animation: hs-drop 2.4s cubic-bezier(.3, 1.4, .5, 1) infinite; } .hs-a-coin--2 { animation-delay: .4s; } .hs-a-cal { animation: hs-float 3s ease-in-out infinite .5s; } .hs-a-b1, .hs-a-b2, .hs-a-b3, .hs-a-b4 { animation: hs-chat 5s ease-out infinite; } .hs-a-b2 { animation-delay: .7s; } .hs-a-b3 { animation-delay: 1.4s; } .hs-a-b4 { animation-delay: 2.1s; } .hs-a-badge { animation: hs-pulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .hs-a-bld { animation: hs-rise 1s cubic-bezier(.2, .8, .2, 1) both var(--d); transform-box: fill-box; transform-origin: bottom; } .hs-a-win { fill: #c9d6f2; animation: hs-light 4s steps(1) infinite var(--w); } .hs-a-moon { animation: hs-float 4s ease-in-out infinite; } .hs-a-plot { fill: #fff; opacity: .9; stroke: #3b5410; stroke-width: 2; animation: hs-plot 4s ease-in-out infinite var(--d); } .hs-a-pin { animation: hs-pin 3s cubic-bezier(.3, 1.5, .5, 1) infinite; } @keyframes hs-rot { to { transform: rotate(360deg); } } @keyframes hs-arc { 0% { stroke-dashoffset: 440; } 80%, 100% { stroke-dashoffset: 0; } } @keyframes hs-pop { 0%, 55% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.1); } 80%, 100% { opacity: 1; transform: scale(1); } } @keyframes hs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes hs-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes hs-stamp { 0%, 30% { opacity: 0; transform: scale(2.2); } 42% { opacity: 1; transform: scale(.95); } 50%, 100% { opacity: 1; transform: scale(1); } } @keyframes hs-drop { 0% { transform: translateY(-80px); opacity: 0; } 30% { opacity: 1; } 60%, 100% { transform: none; opacity: 1; } } @keyframes hs-chat { 0%, 5% { opacity: 0; transform: translateY(10px); } 15%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } } @keyframes hs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @keyframes hs-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes hs-light { 0%, 49% { fill: #c9d6f2; } 50%, 100% { fill: #ffd36b; } } @keyframes hs-plot { 0%, 100% { fill: #fff; } 40%, 60% { fill: #ffe7a3; } } @keyframes hs-pin { 0% { transform: translateY(-60px); opacity: 0; } 30% { opacity: 1; } 50%, 100% { transform: none; opacity: 1; } } /* 操作 */ .hs__nav { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #1c2629; font-size: 26px; line-height: 36px; cursor: pointer; opacity: 0; transition: opacity .2s; } .hs__stage:hover .hs__nav, .hs__nav:focus-visible { opacity: 1; } .hs__nav--prev { left: 10px; } .hs__nav--next { right: 10px; } .hs__bar { display: flex; align-items: center; gap: 8px; } .hs__dots { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; } .hs__dot { position: relative; display: grid; gap: 4px; padding: 0 0 2px; border: 0; background: none; text-align: left; cursor: pointer; } .hs__dot-l { font-size: 11px; font-weight: 700; color: var(--mb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hs__dot.is-on .hs__dot-l { color: var(--mb-main); } .hs__dot i { display: block; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .12); overflow: hidden; } .hs__dot i::after { content: ""; display: block; height: 100%; width: 0; background: var(--mb-main); } .hs__dot.is-done i::after { width: 100%; } .hs__dot.is-on i::after { animation: hs-prog var(--hs-t, 6.5s) linear forwards; } .hs.is-paused .hs__dot.is-on i::after { animation-play-state: paused; } @keyframes hs-prog { to { width: 100%; } } .hs__play { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid var(--mb-border); border-radius: 50%; background: var(--mb-surface); cursor: pointer; } .hs__play span { display: block; width: 9px; height: 11px; margin: 0 auto; border-left: 3px solid #1c2629; border-right: 3px solid #1c2629; } .hs.is-paused .hs__play span { width: 0; height: 0; border: 0; border-left: 10px solid #1c2629; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 10px; } .hs__badges { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 780px) { .hs__stage { min-height: 560px; } .hs__link { grid-template-columns: 1fr; grid-template-rows: 240px auto; align-items: start; } .hs__visual { min-height: 240px; } .hs__text { padding: 16px 20px 22px; } .hs__slide--top .hs__visual::after { background: linear-gradient(180deg, transparent 60%, #24427a); } .hs__dot-l { display: none; } .hs__nav { opacity: 1; top: 120px; } } @media (prefers-reduced-motion: reduce) { .hs__slide, .hs__slide.is-on { transition: none; } .hs-art *, .hs-art--photo, .hs__text > * { animation: none !important; } .hs__dot.is-on i::after { animation: none; width: 100%; } } /* ===== 賃貸管理ページ（2.31.0） ===== */ .rm { --rm-main: #24427a; --rm-deep: #172c55; --rm-accent: #c46a12; --rm-soft: #f3f6fa; --rm-line: #dde3ea; --rm-ink: #1c2629; --rm-muted: #5e6b6a; color: var(--rm-ink); display: grid; gap: 64px; } .rm * { box-sizing: border-box; } .rm > *, .rm-hero > * { min-width: 0; } .rm a { text-decoration: none !important; } .rm h2, .rm h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: inherit !important; } .rm h2::before, .rm h2::after, .rm h3::before, .rm h3::after { display: none !important; } .rm p { margin: 0 !important; } .rm-sec__head { display: grid; justify-items: center; gap: 8px; margin-bottom: 26px; text-align: center; } .rm-sec__en { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--rm-accent); } .rm h2.rm-sec__h { font-size: clamp(22px, 3vw, 30px) !important; font-weight: 800; line-height: 1.4; } .rm-sec__lead { max-width: 640px; color: var(--rm-muted); font-size: 15px; line-height: 1.8; } .rm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 800; font-size: 16px; transition: transform .15s, box-shadow .15s; } .rm-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); } .rm-btn--line { background: #06c755; color: #fff !important; } .rm-btn--tel { background: #fff; color: var(--rm-main) !important; border: 2px solid currentColor; } .rm-btn--main { background: var(--rm-accent); color: #fff !important; } /* ヒーロー */ .rm-hero { position: relative; overflow: hidden; isolation: isolate; display: block; padding: 40px 44px; border-radius: 18px; background: #eaf3fb; color: #17346e; } .rm-hero__photo { position: absolute; inset: 0 0 0 38%; z-index: -2; background: #dfe9ee 60% center/cover no-repeat; animation: rm-zoom 14s ease-out both; } .rm-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #f1f7fc 0%, rgba(241, 247, 252, .96) 42%, rgba(241, 247, 252, .55) 60%, rgba(241, 247, 252, 0) 76%); } .rm-hero__in { display: grid; gap: 12px; max-width: 620px; } .rm-hero__area { justify-self: start; padding: 4px 14px; border-radius: 999px; background: rgba(36, 66, 122, .55); color: #fff; font-size: 13px; font-weight: 700; } .rm-hero h2 { font-size: clamp(30px, 4.4vw, 48px) !important; font-weight: 900; line-height: 1.25; color: #17346e !important; letter-spacing: .02em; } .rm-hero h2 em { font-style: normal; color: #e8890c; } .rm-hero__lead { font-size: 15px; font-weight: 700; line-height: 1.7; } .rm-hero__price { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 17px; font-weight: 700; } .rm-hero__price b { margin: 0 3px; font-size: clamp(30px, 3.8vw, 40px); line-height: 1.1; color: #e8890c; font-family: "Helvetica Neue", Arial, sans-serif; } .rm-hero__pts { display: flex; flex-wrap: wrap; gap: 8px; } .rm-hero__pts span { padding: 7px 16px; border-radius: 8px; background: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 2px 6px rgba(23, 52, 110, .08); } .rm-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .rm-hero .rm-btn--main { background: #e8890c; box-shadow: 0 4px 12px rgba(232, 137, 12, .35); } .rm-hero__tel { font-size: 12px; font-weight: 700; } @keyframes rm-zoom { from { transform: scale(1.08); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .rm-hero__photo { animation: none; } } /* 3つの強み */ .rm-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: rmp; } .rm-point { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 22px 24px; border: 1px solid var(--rm-line); border-radius: 16px; background: #fff; counter-increment: rmp; } .rm-point::before { content: "0" counter(rmp); position: absolute; top: -16px; left: 22px; padding: 2px 12px; border-radius: 999px; background: var(--rm-main); color: #fff; font-weight: 900; font-size: 15px; } .rm-point__ic { width: 56px; height: 56px; } .rm-point h3 { font-size: 20px !important; font-weight: 800; } .rm-point p { font-size: 14px; line-height: 1.8; color: #333; } .rm-point strong { color: var(--rm-accent); } /* 料金 */ .rm-price { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px; margin: 0 auto; } .rm-price__card { display: grid; justify-items: center; gap: 6px; padding: 30px 20px; border-radius: 16px; background: var(--rm-soft); text-align: center; } .rm-price__card span { font-weight: 800; color: var(--rm-muted); } .rm-price__card b { font-size: 48px; line-height: 1.1; color: var(--rm-main); font-family: "Helvetica Neue", Arial, sans-serif; } .rm-price__card b small { font-size: 18px; margin-left: 4px; } .rm-price__card em { font-style: normal; font-size: 13px; color: var(--rm-muted); } .rm-price__note { margin-top: 14px !important; text-align: center; font-size: 13px; color: var(--rm-muted); } /* 比較表 */ .rm-cmp-wrap { overflow-x: auto; } .rm-cmp { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 15px; } .rm-cmp th, .rm-cmp td { padding: 14px 12px; border-bottom: 1px solid var(--rm-line); text-align: center; } .rm-cmp thead th { font-weight: 800; color: var(--rm-muted); } .rm-cmp tbody th { text-align: left; font-weight: 700; background: var(--rm-soft); } .rm-cmp .is-us { background: #fff8ef; font-weight: 800; color: var(--rm-accent); border-left: 3px solid var(--rm-accent); border-right: 3px solid var(--rm-accent); } .rm-cmp thead .is-us { border-top: 3px solid var(--rm-accent); border-radius: 12px 12px 0 0; background: var(--rm-accent); color: #fff; } .rm-cmp tbody tr:last-child .is-us { border-bottom: 3px solid var(--rm-accent); } .rm-cmp .no { color: #a0a8a8; font-weight: 400; } /* 管理サービス・低価格の理由・無料サービス */ .rm-icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } .rm-icon { display: grid; justify-items: center; gap: 10px; padding: 22px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--rm-line); text-align: center; font-weight: 800; font-size: 15px; } .rm-icon svg { width: 44px; height: 44px; } .rm-icon small { font-weight: 400; font-size: 13px; line-height: 1.7; color: var(--rm-muted); } .rm-icons--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { .rm-icons--3 { grid-template-columns: repeat(2, 1fr); } } .rm-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 18px; } .rm-why__card { padding: 24px; border-radius: 16px; background: var(--rm-soft); } .rm-why__card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px !important; font-size: 19px !important; font-weight: 800; } .rm-why__card h3 span { padding: 2px 12px; border-radius: 999px; background: var(--rm-main); color: #fff; font-size: 13px; } .rm-why__card p { font-size: 14px; line-height: 1.8; } /* お客様の声 */ .rm-voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .rm-voice { display: grid; gap: 10px; align-content: start; padding: 24px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--rm-line); box-shadow: 0 4px 14px rgba(0, 0, 0, .04); } .rm-voice__stars { color: #f2b01e; letter-spacing: 2px; font-size: 16px; } .rm-voice h3 { font-size: 17px !important; font-weight: 800; line-height: 1.5; } .rm-voice p { font-size: 14px; line-height: 1.8; color: #333; } .rm-voice__who { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; color: var(--rm-muted); } .rm-voice__who i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rm-soft); font-style: normal; font-size: 16px; } /* リスク */ .rm-risk { padding: 30px; border-radius: 18px; background: var(--rm-deep); color: #fff; } .rm-risk .rm-sec__h { color: #fff !important; } .rm-risk .rm-sec__lead { color: rgba(255, 255, 255, .85); } .rm-risk ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .rm-risk li { margin: 0 !important; padding: 14px 10px !important; border-radius: 10px; background: rgba(255, 255, 255, .1); text-align: center; font-weight: 700; font-size: 14px; } .rm-risk li::before { display: none !important; } .rm-risk__msg { margin-top: 18px !important; text-align: center; font-size: 16px; font-weight: 800; } .rm-risk__msg em { font-style: normal; color: #ffd36b; } /* 流れ */ .rm-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .rm-flow li { position: relative; display: grid; justify-items: center; gap: 8px; margin: 0 !important; padding: 22px 10px 18px !important; border-radius: 14px; background: var(--rm-soft); text-align: center; } .rm-flow li::before { display: none !important; } .rm-flow li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; z-index: 1; border: 8px solid transparent; border-left-color: var(--rm-main); border-right: 0; transform: translateY(-50%); } .rm-flow__n { font-size: 12px; font-weight: 900; letter-spacing: .1em; color: var(--rm-accent); } .rm-flow b { font-size: 16px; } .rm-flow small { font-size: 12px; color: var(--rm-muted); line-height: 1.6; } /* お問い合わせ */ .rm-cta { display: grid; justify-items: center; gap: 14px; padding: 36px 24px; border-radius: 18px; background: linear-gradient(135deg, #fff6ea, #ffeacf); text-align: center; } .rm-cta h2 { font-size: clamp(20px, 2.6vw, 26px) !important; font-weight: 900; } .rm-cta p { color: var(--rm-muted); font-size: 14px; } .rm-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } @media (max-width: 860px) { .rm { gap: 48px; } .rm-hero { padding: 200px 20px 24px; } .rm-hero h2 { font-size: 28px !important; } .rm-hero__area { border-radius: 12px; } .rm-hero__photo { inset: 0 0 auto 0; height: 260px; background-position: 55% center; } .rm-hero::before { background: linear-gradient(180deg, rgba(241, 247, 252, 0) 120px, #eaf3fb 260px); } .rm-points, .rm-voices { grid-template-columns: 1fr; gap: 26px; } .rm-why { grid-template-columns: 1fr; } .rm-risk ul { grid-template-columns: repeat(2, 1fr); } .rm-flow { grid-template-columns: 1fr; } .rm-flow li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -11px; border: 8px solid transparent; border-top-color: var(--rm-main); border-bottom: 0; transform: translateX(-50%); } } @media (max-width: 520px) { .rm-price { grid-template-columns: 1fr; } .rm-price__card b { font-size: 40px; } } @media (prefers-reduced-motion: reduce) { .rm-btn { transition: none; } } /* ===== 賃貸管理バナー（2.32.0：写真入り） ===== */ .kb { position: relative; overflow: hidden; isolation: isolate; display: block; margin: 0 0 14px; border-radius: 14px; background: #eaf3fb; color: #17346e !important; text-decoration: none !important; box-shadow: 0 6px 18px rgba(23, 52, 110, .16); transition: transform .15s, box-shadow .15s; } .kb:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23, 52, 110, .26); } .kb__photo { position: absolute; inset: 0 0 0 30%; z-index: -2; background: #dfe9ee 62% center/cover no-repeat; transition: transform 6s ease-out; } .kb:hover .kb__photo { transform: scale(1.06); } .kb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #f1f7fc 0%, rgba(241, 247, 252, .95) 42%, rgba(241, 247, 252, .55) 70%, rgba(241, 247, 252, 0) 100%); } .kb__body { display: grid; gap: 7px; padding: 14px 16px 12px; } .kb__eye { justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(36, 66, 122, .55); color: #fff; font-size: 10.5px; font-weight: 700; } .kb__title { font-size: 23px; font-weight: 900; line-height: 1.3; color: #17346e; letter-spacing: .02em; } .kb__title em { font-style: normal; color: #e8890c; } .kb__price { display: grid; gap: 1px; font-size: 13px; font-weight: 700; } .kb__price b { margin: 0 2px; font-size: 22px; color: #e8890c; font-family: "Helvetica Neue", Arial, sans-serif; } .kb__pts { display: flex; flex-wrap: wrap; gap: 8px; } .kb__pts span { padding: 5px 14px; border-radius: 8px; background: #fff; color: #17346e; font-size: 14px; font-weight: 800; box-shadow: 0 2px 6px rgba(23, 52, 110, .08); } .kb__go { justify-self: start; min-width: 70%; margin-top: 4px; padding: 9px 18px; border-radius: 999px; background: #e8890c; color: #fff; text-align: center; font-weight: 800; font-size: 15px; box-shadow: 0 4px 10px rgba(232, 137, 12, .3); } .kb__go span { display: inline-block; animation: sbst-arrow 1.4s ease-in-out infinite; } .kb__note { font-size: 11px; font-weight: 700; color: #17346e; } .kb-top { margin: 24px 0 32px; } .kb--wide .kb__photo { inset: 0 0 0 42%; background-position: center; } .kb--wide::before { background: linear-gradient(90deg, #f1f7fc 0%, rgba(241, 247, 252, .96) 40%, rgba(241, 247, 252, 0) 62%); } .kb--wide .kb__body { gap: 10px; padding: 26px 34px 22px; max-width: 640px; } .kb--wide .kb__br { display: none; } .kb--wide .kb__eye { font-size: 13px; padding: 4px 14px; } .kb--wide .kb__title { font-size: 34px; } .kb--wide .kb__price { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 16px; } .kb--wide .kb__price b { font-size: 32px; } .kb--wide .kb__go { min-width: 0; padding: 12px 32px; } @media (max-width: 700px) { .kb--wide .kb__photo { inset: 0; } .kb--wide::before { background: linear-gradient(90deg, rgba(241, 247, 252, .97) 0%, rgba(241, 247, 252, .85) 65%, rgba(241, 247, 252, .4) 100%); } .kb--wide .kb__body { padding: 20px 18px; } .kb--wide .kb__title { font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .kb, .kb__photo, .kb__go span { animation: none !important; transition: none; } } /* トップのスライド：賃貸管理（2.32.0） */ .hs__slide--kanri { background: #eaf3fb; } .hs__slide--kanri .hs__link { color: #17346e !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .hs__slide--kanri .hs__visual { position: absolute; inset: 0; min-height: 0; } .hs-art--kanri { left: 30%; background-position: 60% center; } .hs__slide--kanri.is-on .hs-art--kanri { animation: hs-kb 13s ease-out both; } .hs__slide--kanri .hs__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f1f7fc 0%, rgba(241, 247, 252, .96) 34%, rgba(241, 247, 252, .6) 52%, rgba(241, 247, 252, 0) 68%); } .hs__slide--kanri .hs__text { grid-column: 1; grid-row: 1; padding: 26px 20px 26px 40px; gap: 9px; } .hs__slide--kanri .hs__eye { background: rgba(36, 66, 122, .55); color: #fff; } .hs .hs__slide--kanri .hs__title { color: #17346e !important; font-family: inherit; font-weight: 900; font-size: clamp(26px, 3.4vw, 40px) !important; line-height: 1.25; } .hs__slide--kanri .hs__title em { color: #e8890c; } .hs__kprice { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0 !important; font-size: 15px; font-weight: 700; } .hs__kprice b { margin: 0 3px; font-size: clamp(24px, 3vw, 34px); color: #e8890c; font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.1; } .hs__kpts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; } .hs__kpts span { padding: 6px 14px; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 2px 6px rgba(23, 52, 110, .08); } .hs__slide--kanri .hs__btn { background: #e8890c; color: #fff; box-shadow: 0 4px 12px rgba(232, 137, 12, .35); } .hs__knote { margin: 0 !important; font-size: 12px; font-weight: 700; } .hs__slide--kanri.is-on .hs__text > :nth-child(5) { animation-delay: .4s; } .hs__slide--kanri.is-on .hs__text > :nth-child(6) { animation-delay: .5s; } @media (max-width: 780px) { .hs__slide--kanri .hs__link { grid-template-columns: 1fr; } .hs__slide--kanri .hs__visual { position: relative; inset: auto; grid-row: 1; min-height: 220px; } .hs__slide--kanri .hs-art--kanri { left: 0; background-position: 55% center; } .hs__slide--kanri .hs__visual::after { background: linear-gradient(180deg, rgba(241, 247, 252, 0) 55%, #eaf3fb); } .hs__slide--kanri .hs__text { grid-row: 2; padding: 12px 18px 20px; } } /* ===== サイドバー：ふだんは縮小表示、触ると大きく開いてアニメーション（2.35.0） ===== */ .mb-sb .sb-st .sb-st__demo, .mb-sb .sb-st .sb-st__go, .mb-sb .sb-st .sb-st__txt small, .mb-sb .mb-sb-btn:not(.sb-st):not(.sb-rv) > span, .mb-sb .kb .kb__price, .mb-sb .kb .kb__go, .mb-sb .kb .kb__note, .mb-sb .mm-bn .mm-bn__lead, .mb-sb .mm-bn .mm-bn__foot { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-4px); transition: max-height .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, transform .35s ease, margin .35s ease, padding .35s ease; } .mb-sb .sb-st .sb-st__demo { margin-top: -8px; padding-top: 0; padding-bottom: 0; } .mb-sb .sb-st .sb-st__go { margin-top: -8px; } .mb-sb .sb-st .sb-st__txt small { margin-top: -2px; } .mb-sb .mb-sb-btn:not(.sb-st):not(.sb-rv) > span { margin-top: -2px; } .mb-sb .kb .kb__price { margin-top: -7px; } .mb-sb .kb .kb__go { margin-top: -7px; padding-top: 0; padding-bottom: 0; } .mb-sb .kb .kb__note { margin-top: -7px; } .mb-sb .mm-bn .mm-bn__lead { margin-top: -4px; } .mb-sb .mm-bn .mm-bn__foot { margin-top: -4px; } .mb-sb .sb-st.is-open .sb-st__demo, .mb-sb .sb-st:focus-visible .sb-st__demo{ max-height: 60px; opacity: 1; transform: none; margin-top: 0; padding-top: 8px; padding-bottom: 8px; } .mb-sb .sb-st.is-open .sb-st__go, .mb-sb .sb-st:focus-visible .sb-st__go{ max-height: 30px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .sb-st.is-open .sb-st__txt small, .mb-sb .sb-st:focus-visible .sb-st__txt small{ max-height: 40px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .mb-sb-btn:not(.sb-st):not(.sb-rv).is-open > span, .mb-sb .mb-sb-btn:not(.sb-st):not(.sb-rv):focus-visible > span{ max-height: 40px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .kb.is-open .kb__price, .mb-sb .kb:focus-visible .kb__price{ max-height: 70px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .kb.is-open .kb__go, .mb-sb .kb:focus-visible .kb__go{ max-height: 60px; opacity: 1; transform: none; margin-top: 4px; padding-top: 9px; padding-bottom: 9px; } .mb-sb .kb.is-open .kb__note, .mb-sb .kb:focus-visible .kb__note{ max-height: 24px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .mm-bn.is-open .mm-bn__lead, .mb-sb .mm-bn:focus-visible .mm-bn__lead{ max-height: 60px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .mm-bn.is-open .mm-bn__foot, .mb-sb .mm-bn:focus-visible .mm-bn__foot{ max-height: 40px; opacity: 1; transform: none; margin-top: 4px; } @media (hover: hover) { .mb-sb .sb-st:hover .sb-st__demo { max-height: 60px; opacity: 1; transform: none; margin-top: 0; padding-top: 8px; padding-bottom: 8px; } .mb-sb .sb-st:hover .sb-st__go { max-height: 30px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .sb-st:hover .sb-st__txt small { max-height: 40px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .mb-sb-btn:not(.sb-st):not(.sb-rv):hover > span { max-height: 40px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .kb:hover .kb__price { max-height: 70px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .kb:hover .kb__go { max-height: 60px; opacity: 1; transform: none; margin-top: 4px; padding-top: 9px; padding-bottom: 9px; } .mb-sb .kb:hover .kb__note { max-height: 24px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .mm-bn:hover .mm-bn__lead { max-height: 60px; opacity: 1; transform: none; margin-top: 0; } .mb-sb .mm-bn:hover .mm-bn__foot { max-height: 40px; opacity: 1; transform: none; margin-top: 4px; } } .mb-sb .mm-bn__art { height: 44px; transition: height .45s cubic-bezier(.2, .8, .2, 1), transform .5s ease; } .mb-sb .mm-bn__body { padding: 10px 14px; } .mb-sb .mm-bn.is-open .mm-bn__art, .mb-sb .mm-bn:focus-visible .mm-bn__art { height: 92px; } @media (hover: hover) { .mb-sb .mm-bn:hover .mm-bn__art { height: 92px; } } .mb-sb .kb { margin-bottom: 0; } .mb-sb .kb__body { padding: 12px 14px; } .mb-sb .kb__title { font-size: 19px; } .mb-sb .sb-st { padding: 12px 14px; } .mb-sb .sb-st, .mb-sb .kb, .mb-sb .mm-bn, .mb-sb .mb-sb-btn { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; } .mb-sb .is-open { transform: scale(1.03); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); z-index: 2; position: relative; } @media (hover: hover) { .mb-sb .sb-st:hover, .mb-sb .kb:hover, .mb-sb .mm-bn:hover, .mb-sb .mb-sb-btn:hover { transform: scale(1.03); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); } } /* 縮小中は動きを止め、開いたときだけ動かす */ .mb-sb .sb-st, .mb-sb .sb-st::after, .mb-sb .sb-st *, .mb-sb .kb::after, .mb-sb .kb * { animation-play-state: paused !important; } .mb-sb .sb-st.is-open, .mb-sb .sb-st.is-open::after, .mb-sb .sb-st.is-open *, .mb-sb .kb.is-open::after, .mb-sb .kb.is-open * { animation-play-state: running !important; } @media (hover: hover) { .mb-sb .sb-st:hover, .mb-sb .sb-st:hover::after, .mb-sb .sb-st:hover *, .mb-sb .kb:hover::after, .mb-sb .kb:hover * { animation-play-state: running !important; } } .mb-sb .sb-st:not(.is-open)::before { content: "＋"; position: absolute; top: 10px; right: 12px; font-size: 14px; font-weight: 800; opacity: .8; } @media (hover: hover) { .mb-sb .sb-st:hover::before { content: none; } } @media (prefers-reduced-motion: reduce) { .mb-sb * { transition: none !important; } } /* 賃貸管理ページ：管理オーナー様への特典サービス（2.36.0） */ .rm-perk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .rm-perk__item { border: 1px solid var(--rm-line); border-radius: 16px; background: #fff; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; } .rm-perk__item:hover { box-shadow: 0 8px 22px rgba(23, 52, 110, .12); } .rm-perk__item--main { grid-column: 1 / -1; border: 2px solid #e8890c; background: linear-gradient(135deg, #fff8ef, #fff); } .rm-perk summary { position: relative; display: grid; gap: 6px; padding: 20px 120px 20px 22px; cursor: pointer; list-style: none; } .rm-perk summary::-webkit-details-marker { display: none; } .rm-perk summary::marker { content: ""; } .rm-perk__no { justify-self: start; padding: 2px 12px; border-radius: 999px; background: var(--rm-main); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; } .rm-perk__item--main .rm-perk__no { background: #e8890c; } .rm-perk__ttl { font-size: 19px; font-weight: 900; line-height: 1.4; color: #17346e; } .rm-perk__item--main .rm-perk__ttl { font-size: clamp(22px, 3vw, 30px); } .rm-perk__ttl em { font-style: normal; color: #e8890c; } .rm-perk__sum { font-size: 14px; color: var(--rm-muted); } .rm-perk__more { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--rm-soft); color: var(--rm-main); font-size: 13px; font-weight: 800; white-space: nowrap; } .rm-perk__item--main .rm-perk__more { background: #e8890c; color: #fff; animation: rm-perk-pulse 2.2s ease-in-out infinite; } .rm-perk__more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s ease; } .rm-perk__close { display: none; } .rm-perk__item[open] .rm-perk__open { display: none; } .rm-perk__item[open] .rm-perk__close { display: inline; } .rm-perk__item[open] .rm-perk__more { animation: none; } .rm-perk__item[open] .rm-perk__more::after { transform: rotate(-135deg) translate(-2px, -2px); } .rm-perk__body { display: grid; gap: 14px; padding: 0 22px 22px; font-size: 14px; line-height: 1.85; } .rm-perk__item[open] .rm-perk__body { animation: rm-perk-in .45s cubic-bezier(.2, .8, .2, 1) both; } .rm-perk__body strong { color: #e8890c; } .rm-perk__tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 12px; overflow: hidden; } .rm-perk__tbl caption { padding-bottom: 6px; text-align: left; font-weight: 800; color: #17346e; } .rm-perk__tbl th, .rm-perk__tbl td { padding: 10px 12px; border-bottom: 1px solid var(--rm-line); text-align: center; } .rm-perk__tbl thead th { background: var(--rm-soft); text-align: center; font-size: 13px; } .rm-perk__tbl tbody th { text-align: left; } .rm-perk__tbl td:nth-child(2) { color: var(--rm-muted); text-decoration: line-through; text-decoration-color: rgba(232, 137, 12, .7); } .rm-perk__tbl td b { font-size: 17px; color: #e8890c; } .rm-perk__tbl td:nth-child(4) { font-weight: 800; color: #17346e; } .rm-perk__tbl td:nth-child(4)::before { content: "−"; margin-right: 1px; } .rm-perk__fine { font-size: 12px !important; color: var(--rm-muted); } .rm-perk__list { display: grid; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .rm-perk__list li { position: relative; margin: 0 !important; padding-left: 26px !important; } .rm-perk__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #e8890c; font-weight: 900; } .rm-perk__btns { display: flex; flex-wrap: wrap; gap: 10px; } .rm-perk .rm-btn--main { background: #e8890c; } .rm-sp { display: none; } @keyframes rm-perk-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes rm-perk-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 137, 12, .45); } 50% { box-shadow: 0 0 0 8px rgba(232, 137, 12, 0); } } @media (max-width: 640px) { .rm-perk { grid-template-columns: 1fr; } .rm-perk summary { padding: 18px 18px 60px; } .rm-perk__more { top: auto; bottom: 16px; right: auto; left: 18px; transform: none; } .rm-perk__body { padding: 0 18px 18px; } .rm-sp { display: inline; } .rm-perk__tbl th, .rm-perk__tbl td { padding: 8px 6px; font-size: 12px; } .rm-perk__tbl td b { font-size: 15px; } .rm-perk__tbl tr > :nth-child(4) { display: none; } } @media (prefers-reduced-motion: reduce) { .rm-perk__more, .rm-perk__body { animation: none !important; } } /* 特典1：楽待に掲載（2.38.0） */ .rm-perk__tags { display: flex; flex-wrap: wrap; gap: 6px; } .rm-perk__tags span { padding: 3px 12px; border-radius: 6px; background: #fff; border: 1.5px solid #e8890c; color: #c46a12; font-size: 13px; font-weight: 800; } .rm-perk__tags span + span { border-color: #17346e; color: #17346e; } .rm-perk__rk { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #eef4fb; } .rm-perk__rk-ic { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: 20px; } .rm-perk__rk p { display: grid; gap: 2px; } .rm-perk__rk b { font-size: 16px; color: #17346e; } /* 賃貸管理ページ：基本サービスを押すと詳しい説明が上がってくる（2.39.0） */ .rm-svc__btn { position: relative; width: 100%; font: inherit; font-weight: 800; color: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; } .rm-svc__btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(23, 52, 110, .12); } .rm-svc__btn[aria-expanded="true"] { border-color: #e8890c; background: #fff8ef; box-shadow: 0 8px 20px rgba(232, 137, 12, .18); } .rm-svc__btn[aria-expanded="true"]::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 18px; height: 18px; background: #fff8ef; border-right: 1px solid #e8890c; border-bottom: 1px solid #e8890c; transform: translateX(-50%) rotate(45deg); } .rm-svc__hint { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--rm-soft); color: var(--rm-main) !important; font-size: 12px !important; font-weight: 700 !important; } .rm-svc__hint::after { content: "▲"; font-size: 9px; transition: transform .3s ease; } .rm-svc__btn[aria-expanded="true"] .rm-svc__hint { background: #e8890c; color: #fff !important; } .rm-svc__btn[aria-expanded="true"] .rm-svc__hint::after { transform: rotate(180deg); } .rm-svc__panel { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; margin-top: 16px; padding: 22px 52px 22px 22px; border: 1px solid #e8890c; border-radius: 16px; background: #fff8ef; } .rm-svc__panel.is-up { animation: rm-svc-up .5s cubic-bezier(.2, .8, .2, 1) both; } .rm-svc__ic svg { width: 64px; height: 64px; } .rm-svc__txt { display: grid; gap: 8px; font-size: 14px; line-height: 1.8; } .rm-svc__h { font-size: 19px !important; font-weight: 900; color: #17346e; } .rm-svc__txt ul { display: grid; gap: 4px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .rm-svc__txt li { position: relative; margin: 0 !important; padding-left: 24px !important; } .rm-svc__txt li::before { content: "✓"; position: absolute; left: 0; color: #e8890c; font-weight: 900; } .rm-svc__x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #5e6b6a; font-size: 20px; line-height: 32px; cursor: pointer; } @keyframes rm-svc-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .rm-svc__grid { grid-template-columns: repeat(2, 1fr); } .rm-svc__panel { grid-template-columns: 1fr; padding: 18px; } .rm-svc__ic { display: none; } .rm-svc__btn[aria-expanded="true"]::after { display: none; } } @media (prefers-reduced-motion: reduce) { .rm-svc__panel.is-up { animation: none; } } .rm-svc__panel[hidden] { display: none !important; } /* 賃貸管理ページ：低価格・高品質の理由（2.40.0） */ .rm-rs { display: grid; gap: 14px; margin-bottom: 26px; padding: 26px; border-radius: 18px; background: var(--rm-soft); } .rm-rs__head { display: flex; align-items: center; gap: 10px; } .rm-rs__tag { padding: 3px 14px; border-radius: 999px; background: var(--rm-main); color: #fff; font-size: 13px; font-weight: 800; } .rm-rs + .rm-rs .rm-rs__tag { background: #e8890c; } .rm-rs h3 { font-size: 22px !important; font-weight: 900; color: #17346e !important; } .rm-rs__lead { font-size: 15px; line-height: 1.85; } .rm-rs__lead b { color: #17346e; background: linear-gradient(transparent 62%, #ffe2b8 62%); } .rm-area { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: center; } .rm-area__map { margin: 0; } .rm-area__map svg { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 6px 18px rgba(23, 52, 110, .1); } .rm-area__map figcaption { margin-top: 6px; font-size: 11px; color: var(--rm-muted); text-align: right; } .rm-area__geo { font-size: 13px; font-weight: 700; fill: #4f7a43; text-anchor: middle; } .rm-area__geo--sea { fill: #3b7cab; } .rm-area__ward { font-size: 19px; font-weight: 900; fill: #17346e; text-anchor: middle; } .rm-area__ward--me { fill: #c46a12; } .rm-area__all { fill: none; stroke: #17346e; stroke-width: 3; stroke-dasharray: 1300; stroke-dashoffset: 1300; animation: rm-draw 2.2s ease-out .3s forwards; } .rm-area__all-l { font-size: 14px; font-weight: 800; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #17346e; stroke-width: 7px; stroke-linejoin: round; } .rm-area__r2 { fill: rgba(232, 137, 12, .12); stroke: #e8890c; stroke-width: 2.5; stroke-dasharray: 8 6; } .rm-area__r2-l { font-size: 13px; font-weight: 800; fill: #c46a12; text-anchor: middle; } .rm-area__pulse { fill: none; stroke: #e8890c; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: rm-pulse 3s ease-out infinite; } .rm-area__pulse--2 { animation-delay: 1.5s; } .rm-area__pin { animation: rm-pin 2.4s cubic-bezier(.3, 1.4, .5, 1) infinite; } .rm-area__me { font-size: 13px; font-weight: 800; fill: #fff; text-anchor: middle; } .rm-area__pts { display: grid; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: rmap; } .rm-area__pts li { position: relative; display: grid; gap: 2px; margin: 0 !important; padding: 12px 14px 12px 50px !important; border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.7; counter-increment: rmap; } .rm-area__pts li::before { content: counter(rmap); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e8890c; color: #fff; font-weight: 900; font-size: 14px; } .rm-area__pts b { font-size: 15px; color: #17346e; } .rm-work { display: grid; gap: 14px; padding: 20px; border-radius: 14px; background: #fff; } .rm-work__h { font-size: 17px !important; font-weight: 900; color: #17346e; } .rm-work__list { display: grid; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .rm-work__list li { display: grid; grid-template-columns: minmax(0, 1.3fr) auto 34px minmax(0, 1.3fr); align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; font-size: 14px; } .rm-work__list li::before { display: none !important; } .rm-work__job { font-weight: 800; } .rm-work__was { padding: 4px 10px; border-radius: 6px; background: #eef0f2; color: #8a9396; font-size: 12px; text-decoration: line-through; text-align: center; } .rm-work__arrow { position: relative; height: 2px; background: #e8890c; } .rm-work__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid #e8890c; border-right: 0; } .rm-work__now { padding: 6px 10px; border-radius: 8px; background: #e9f1fb; color: #17346e; font-weight: 800; font-size: 13px; text-align: center; } .rm-work__bars { display: grid; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--rm-line); } .rm-work__bar { display: grid; grid-template-columns: 9em minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; font-weight: 700; } .rm-work__bt { height: 16px; border-radius: 8px; background: #eef0f2; overflow: hidden; } .rm-work__bt i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: #9aa7b4; transform-origin: left; animation: rm-grow 1.4s cubic-bezier(.2, .8, .2, 1) both; } .rm-work__bar--now .rm-work__bt i { background: #e8890c; animation-delay: .4s; } .rm-work__note { font-size: 12px !important; color: var(--rm-muted); } .rm-sim { display: grid; gap: 10px; padding: 20px; border-radius: 14px; background: #fff; border: 2px solid #e8890c; } .rm-sim__h { font-size: 16px !important; font-weight: 900; color: #17346e; } .rm-sim__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rm-sim__col { display: grid; gap: 2px; padding: 14px; border-radius: 12px; background: #f3f5f7; text-align: center; } .rm-sim__col span { font-size: 13px; color: var(--rm-muted); font-weight: 700; } .rm-sim__col b { font-size: 26px; color: #5e6b6a; font-family: "Helvetica Neue", Arial, sans-serif; } .rm-sim__col b small { font-size: 13px; } .rm-sim__col em { font-style: normal; font-size: 13px; color: var(--rm-muted); } .rm-sim__col--us { background: #fff8ef; } .rm-sim__col--us b { color: #e8890c; } .rm-sim__diff { text-align: center; font-size: 18px; font-weight: 900; color: #17346e; } .rm-sim__diff b { font-size: 30px; color: #e8890c; font-family: "Helvetica Neue", Arial, sans-serif; } .rm-sim__fine { font-size: 12px !important; color: var(--rm-muted); text-align: center; } @keyframes rm-draw { to { stroke-dashoffset: 0; } } @keyframes rm-pulse { 0% { transform: scale(.15); opacity: .9; } 100% { transform: scale(1.05); opacity: 0; } } @keyframes rm-pin { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-10px); } 30% { transform: translateY(0); } } @keyframes rm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 860px) { .rm-area { grid-template-columns: 1fr; } } @media (max-width: 640px) { .rm-rs { padding: 18px 14px; } .rm-work { padding: 16px 12px; } .rm-work__list li { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); row-gap: 4px; padding-bottom: 8px !important; border-bottom: 1px solid var(--rm-line); } .rm-work__job { grid-column: 1 / -1; } .rm-work__was { justify-self: stretch; } .rm-work__bar { grid-template-columns: 1fr; gap: 4px; } .rm-sim__row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .rm-area__all { animation: none; stroke-dashoffset: 0; } .rm-area__pulse, .rm-area__pin, .rm-work__bt i { animation: none; } } /* 試算例：10年間の比較グラフ（横の棒グラフ）（2.43.0） */ .rm-chart { display: grid; gap: 14px; padding: 20px; border-radius: 12px; background: #f7f9fc; } .rm-chart__h { font-size: 17px !important; font-weight: 900; color: #17346e; text-align: center; } .rm-chart__grp { display: grid; gap: 12px; } .rm-chart__row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 7.5em; align-items: center; gap: 12px; font-size: 14px; font-weight: 800; line-height: 1.35; } .rm-chart__row--us .rm-chart__l { color: #c46a12; } .rm-chart__bt { height: 40px; border-radius: 8px; background: #e9edf2; overflow: hidden; } .rm-chart__bt i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #a9b5c1, #7d8b98); transition: width 1.6s cubic-bezier(.2, .8, .2, 1); } .rm-chart__row--us .rm-chart__bt i { background: linear-gradient(90deg, #f5b155, #e8890c); transition-delay: .45s; } .rm-chart.is-in .rm-chart__bt i { width: var(--w); } .rm-chart__v { text-align: right; color: #5e6b6a; white-space: nowrap; font-size: 13px; } .rm-chart__v b { font-size: 26px; font-family: "Helvetica Neue", Arial, sans-serif; } .rm-chart__row--us .rm-chart__v { color: #e8890c; } .rm-chart__diff { justify-self: end; padding: 6px 18px; border-radius: 999px; background: #17346e; color: #fff; font-size: 15px !important; font-weight: 800; opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .5s ease, transform .5s cubic-bezier(.3, 1.5, .5, 1); } .rm-chart__diff b { font-size: 26px; color: #ffd36b; font-family: "Helvetica Neue", Arial, sans-serif; } .rm-chart.is-in .rm-chart__diff { opacity: 1; transform: none; transition-delay: 1.5s; animation: rm-chart-pop 1.2s ease-in-out 2.2s 2; } .rm-chart__fine { font-size: 11px !important; color: var(--rm-muted); text-align: right; } @keyframes rm-chart-pop { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } } @media (max-width: 640px) { .rm-chart { padding: 16px 10px; } .rm-chart__row { grid-template-columns: 5.8em minmax(0, 1fr) 6em; gap: 6px; font-size: 12px; } .rm-chart__bt { height: 30px; } .rm-chart__v b { font-size: 18px; } .rm-chart__diff { justify-self: center; font-size: 13px !important; } .rm-chart__diff b { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .rm-chart__bt i, .rm-chart__diff { transition: none !important; animation: none !important; } } /* 広告料はすべて客付け不動産会社へ還元（2.44.0） */ .rm-ad { display: grid; gap: 14px; padding: 22px; border-radius: 14px; background: #fff; border: 2px solid #17346e; } .rm-ad__h { font-size: clamp(18px, 2.4vw, 22px) !important; font-weight: 900; color: #17346e; text-align: center; line-height: 1.45; } .rm-ad__h em { font-style: normal; color: #e8890c; background: linear-gradient(transparent 60%, #ffe2b8 60%); } .rm-ad__lead { font-size: 14px; line-height: 1.85; } .rm-ad__lead b { color: #17346e; } .rm-ad__flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, .9fr) minmax(0, 1fr) minmax(40px, .9fr) minmax(0, 1fr); align-items: center; gap: 6px; padding: 18px 10px; border-radius: 12px; background: #f3f6fa; } .rm-ad__node { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 12px; background: #fff; text-align: center; box-shadow: 0 3px 10px rgba(23, 52, 110, .08); } .rm-ad__node b { font-size: 14px; color: #17346e; line-height: 1.35; } .rm-ad__node small { font-size: 12px; color: var(--rm-muted); } .rm-ad__ic svg { width: 40px; height: 40px; } .rm-ad__node--us { border: 2px solid #e8890c; } .rm-ad__zero { padding: 2px 10px; border-radius: 999px; background: #e8890c; color: #fff; font-size: 12px; font-weight: 800; } .rm-ad__zero em { font-style: normal; font-size: 17px; } .rm-ad__full { padding: 2px 10px; border-radius: 999px; background: #17346e; color: #fff; font-size: 12px; font-weight: 800; } .rm-ad__full em { font-style: normal; font-size: 17px; color: #ffd36b; } .rm-ad.is-in .rm-ad__zero { animation: rm-ad-pulse 2.4s ease-in-out infinite; } .rm-ad.is-in .rm-ad__full { animation: rm-ad-pulse 2.4s ease-in-out infinite 1.2s; } .rm-ad__track { position: relative; height: 34px; } .rm-ad__track::before { content: ""; position: absolute; left: 0; right: 8px; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, #e8890c 0 8px, transparent 8px 14px); } .rm-ad__track::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 10px solid #e8890c; border-right: 0; } .rm-ad__coin { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #ffd36b; border: 2px solid #c99418; color: #8a5f05; font-style: normal; font-size: 12px; font-weight: 900; opacity: 0; } .rm-ad.is-in .rm-ad__coin { animation: rm-ad-coin 2.4s linear infinite var(--d); } .rm-ad.is-in .rm-ad__track--2 .rm-ad__coin { animation-delay: calc(var(--d) + 1.2s); } .rm-ad__cmp { display: grid; gap: 8px; } .rm-ad__bar { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; font-weight: 700; } .rm-ad__bt { display: flex; height: 30px; border-radius: 8px; background: #eef0f2; overflow: hidden; } .rm-ad__bt i { display: grid; place-items: center; height: 100%; font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; width: 0; transition: width 1.4s cubic-bezier(.2, .8, .2, 1); } .rm-ad__cut { background: #b9c2cb; color: #4a5357; } .rm-ad__rest { background: #dfe4ea; color: #5e6b6a; } .rm-ad__all { background: linear-gradient(90deg, #f5b155, #e8890c); color: #fff; } .rm-ad.is-in .rm-ad__cut { width: 30%; } .rm-ad.is-in .rm-ad__rest { width: 70%; transition-delay: .3s; } .rm-ad.is-in .rm-ad__all { width: 100%; transition-delay: .7s; } .rm-ad__note { font-size: 12px !important; color: var(--rm-muted); line-height: 1.7; } @keyframes rm-ad-coin { 0% { left: 0; opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { left: calc(100% - 30px); opacity: 0; transform: scale(.8); } } @keyframes rm-ad-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.1); } } @media (max-width: 640px) { .rm-ad { padding: 16px 12px; } .rm-ad__flow { grid-template-columns: 1fr; justify-items: center; padding: 14px; } .rm-ad__node { width: 100%; max-width: 260px; grid-template-columns: 40px minmax(0, 1fr) auto; justify-items: start; align-items: center; text-align: left; gap: 8px; padding: 10px 12px; } .rm-ad__track { width: 34px; height: 64px; } .rm-ad__track::before { left: 50%; right: auto; top: 0; bottom: 8px; width: 3px; height: auto; margin: 0 0 0 -1.5px; background: repeating-linear-gradient(180deg, #e8890c 0 8px, transparent 8px 14px); } .rm-ad__track::after { left: 50%; right: auto; top: auto; bottom: 0; margin: 0 0 0 -7px; border: 7px solid transparent; border-top: 10px solid #e8890c; border-bottom: 0; } .rm-ad__coin { left: 50%; top: 0; margin: 0 0 0 -12px; } .rm-ad.is-in .rm-ad__coin { animation-name: rm-ad-coin-v; } .rm-ad__bar { grid-template-columns: 1fr; gap: 4px; } } @keyframes rm-ad-coin-v { 0% { top: 0; opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { top: calc(100% - 28px); opacity: 0; transform: scale(.8); } } @media (prefers-reduced-motion: reduce) { .rm-ad__coin { display: none; } .rm-ad__zero, .rm-ad__full { animation: none !important; } .rm-ad__bt i { transition: none; } } /* 広告料の還元を別の段落に（2.45.0） */ .rm-rs .rm-rs__tag--up { background: #e8890c; } .rm-rs--ad h3 em { font-style: normal; color: #e8890c; background: linear-gradient(transparent 60%, #ffe2b8 60%); } .rm-rs--ad .rm-ad { border: 0; } @media (max-width: 640px) { .rm-rs__head { flex-wrap: wrap; } .rm-rs h3 { font-size: 19px !important; line-height: 1.45; } } /* ===== 来店予約（2.46.0） ===== */ /* サイドバーの一番上のボタン */ .sb-rv { position: relative; overflow: hidden; gap: 8px; padding: 14px 16px; border: 0; background: linear-gradient(135deg, #2b4f8f 0%, #17346e 100%); color: #fff !important; box-shadow: 0 6px 18px rgba(23, 52, 110, .3); } .sb-rv::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent); transform: skewX(-20deg); animation: sbst-shine 4.2s ease-in-out infinite; pointer-events: none; } .sb-rv__row { display: flex; align-items: center; gap: 12px; opacity: 1 !important; font-size: inherit !important; } .sb-rv__cal { flex: 0 0 auto; width: 46px; height: 46px; } .sb-rv__day { transform-box: fill-box; transform-origin: center; animation: sbrv-day 3s ease-in-out infinite; } .sb-rv__ok, .sb-rv__okm { transform-box: fill-box; transform-origin: center; animation: sbrv-ok 3s cubic-bezier(.3, 1.5, .5, 1) infinite; } .sb-rv__txt { display: grid; gap: 2px; opacity: 1 !important; font-size: inherit !important; } .sb-rv__txt b { font-size: 19px; line-height: 1.3; letter-spacing: .06em; } .sb-rv__txt small { font-size: 12px; opacity: .9; } .sb-rv__go { justify-self: stretch; padding: 8px 12px; border-radius: 999px; background: #e8890c; text-align: center; font-size: 13px !important; font-weight: 800; opacity: 1 !important; } .sb-rv__go span { display: inline-block; animation: sbst-arrow 1.4s ease-in-out infinite; } @keyframes sbrv-day { 0%, 30% { transform: scale(1); } 40% { transform: scale(1.6); } 50%, 100% { transform: scale(1); } } @keyframes sbrv-ok { 0%, 45% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 70%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .mb-sb > .sb-rv { margin-bottom: -8px; } /* 縮小表示（サイドバー） */ .mb-sb .sb-rv { padding: 12px 14px; } .mb-sb .sb-rv .sb-rv__txt small, .mb-sb .sb-rv .sb-rv__go { max-height: 0; opacity: 0 !important; overflow: hidden; margin-top: -8px; padding-top: 0; padding-bottom: 0; transition: max-height .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, margin .35s ease, padding .35s ease; } .mb-sb .sb-rv .sb-rv__txt small { margin-top: -2px; } .mb-sb .sb-rv.is-open .sb-rv__txt small, .mb-sb .sb-rv:focus-visible .sb-rv__txt small { max-height: 30px; opacity: .9 !important; margin-top: 0; } .mb-sb .sb-rv.is-open .sb-rv__go, .mb-sb .sb-rv:focus-visible .sb-rv__go { max-height: 50px; opacity: 1 !important; margin-top: 0; padding-top: 8px; padding-bottom: 8px; } @media (hover: hover) { .mb-sb .sb-rv:hover .sb-rv__txt small { max-height: 30px; opacity: .9 !important; margin-top: 0; } .mb-sb .sb-rv:hover .sb-rv__go { max-height: 50px; opacity: 1 !important; margin-top: 0; padding-top: 8px; padding-bottom: 8px; } .mb-sb .sb-rv:hover { transform: scale(1.03); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); } .mb-sb .sb-rv:hover::after, .mb-sb .sb-rv:hover * { animation-play-state: running !important; } } .mb-sb .sb-rv::after, .mb-sb .sb-rv * { animation-play-state: paused !important; } .mb-sb .sb-rv.is-open::after, .mb-sb .sb-rv.is-open * { animation-play-state: running !important; } .mb-sb .sb-rv:not(.is-open)::before { content: "＋"; position: absolute; top: 10px; right: 12px; font-size: 14px; font-weight: 800; opacity: .8; } @media (hover: hover) { .mb-sb .sb-rv:hover::before { content: none; } } @media (prefers-reduced-motion: reduce) { .sb-rv::after, .sb-rv * { animation: none !important; } } /* 来店予約ページ */ .rvp { --rv-navy: #17346e; --rv-or: #e8890c; display: grid; gap: 48px; color: #1c2629; } .rvp h2, .rvp p { margin: 0 !important; padding: 0; border: 0; background: none; } .rvp h2::before, .rvp h2::after { display: none !important; } .rvp__hero { position: relative; overflow: hidden; isolation: isolate; padding: 44px 40px; border-radius: 18px; background: #eaf3fb; color: var(--rv-navy); } .rvp__photo { position: absolute; inset: 0 0 0 40%; z-index: -2; background: #dfe9ee 60% center/cover no-repeat; animation: rm-zoom 14s ease-out both; } .rvp__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #f1f7fc 0%, rgba(241, 247, 252, .96) 45%, rgba(241, 247, 252, .5) 62%, rgba(241, 247, 252, 0) 78%); } .rvp__in { display: grid; gap: 12px; max-width: 560px; } .rvp__eye { justify-self: start; padding: 4px 14px !important; border-radius: 999px; background: rgba(36, 66, 122, .55) !important; color: #fff; font-size: 13px; font-weight: 700; } .rvp__hero h2 { font-size: clamp(32px, 4.6vw, 48px) !important; font-weight: 900; line-height: 1.2; color: var(--rv-navy) !important; } .rvp__hero h2 em { font-style: normal; color: var(--rv-or); } .rvp__lead { font-size: 15px; font-weight: 700; line-height: 1.8; } .rvp__go { justify-self: start; display: inline-flex; gap: 8px; padding: 12px 28px; border-radius: 999px; background: var(--rv-or); color: #fff !important; font-weight: 800; text-decoration: none !important; box-shadow: 0 4px 12px rgba(232, 137, 12, .35); } .rvp__go span { display: inline-block; animation: rvp-bob 1.4s ease-in-out infinite; } .rvp__h { margin-bottom: 18px !important; font-size: clamp(21px, 2.8vw, 26px) !important; font-weight: 900; color: var(--rv-navy) !important; text-align: center; } .rvp__merits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .rvp__merits li { display: grid; gap: 6px; align-content: start; margin: 0 !important; padding: 22px 18px !important; border: 1px solid #dde3ea; border-radius: 16px; background: #fff; font-size: 14px; line-height: 1.75; } .rvp__merits li::before { display: none !important; } .rvp__merits b { font-size: 17px; color: var(--rv-navy); } .rvp__mic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff3e3; font-size: 24px; } .rvp__info dl { display: grid; gap: 0; max-width: 560px; margin: 0 auto 12px; border-top: 1px solid #dde3ea; } .rvp__info dl div { display: grid; grid-template-columns: 8em 1fr; padding: 12px 6px; border-bottom: 1px solid #dde3ea; } .rvp__info dt { font-weight: 800; color: var(--rv-navy); } .rvp__info dd { margin: 0; } .rvp__info p { text-align: center; } .rvp__link { font-weight: 800; color: var(--rv-navy) !important; } @keyframes rvp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* 予約フォーム */ .rv { display: grid; gap: 18px; max-width: 760px; margin: 0 auto; scroll-margin-top: 90px; } .rv p { margin: 0 !important; } .rv__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: rvs; } .rv__steps li { position: relative; margin: 0 !important; padding: 10px 8px 10px 40px !important; border-radius: 10px; background: #f3f6fa; font-size: 13px; font-weight: 700; line-height: 1.4; counter-increment: rvs; } .rv__steps li::before { content: counter(rvs); position: absolute; left: 10px; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #9aa7b4; color: #fff; font-size: 12px; font-weight: 900; } .rv__steps li.is-on { background: #fff3e3; color: #a85a0b; } .rv__steps li.is-on::before { background: #e8890c; } .rv__form { display: grid; gap: 16px; } .rv__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .rv__set { display: grid; gap: 12px; margin: 0; padding: 18px; border: 1px solid #dde3ea; border-radius: 14px; background: #fff; } .rv__set legend { padding: 0 8px; font-size: 16px; font-weight: 900; color: #17346e; } .rv__set legend i, .rv__lab i { font-style: normal; font-size: 11px; font-weight: 700; color: #7a8588; } .rv__lab { font-size: 14px; font-weight: 800; } .rv__lab em { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 4px; background: #e8890c; color: #fff; font-style: normal; font-size: 11px; vertical-align: 1px; } .rv__lab i { margin-left: 4px; } .rv__when { display: grid; grid-template-columns: 8.5em minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 10px; } .rv__row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: 10px; } .rv__row--top { align-items: start; } .rv input[type="text"], .rv input[type="tel"], .rv input[type="email"], .rv input[type="date"], .rv select, .rv textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid #c9d2dc; border-radius: 10px; background: #fbfcfe; font: inherit; font-size: 16px; color: inherit; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; } .rv input:focus, .rv select:focus, .rv textarea:focus { outline: none; border-color: #17346e; box-shadow: 0 0 0 3px rgba(23, 52, 110, .15); background: #fff; } .rv input.is-ng { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, .15); } .rv__msg { padding: 8px 12px; border-radius: 8px; background: #fdecec; color: #b42f2f; font-size: 13px; font-weight: 700; } .rv__fine { font-size: 12px; color: #6b7679; } .rv__fine--c { text-align: center; } .rv__chips { display: flex; flex-wrap: wrap; gap: 8px; } .rv__chip input { position: absolute; opacity: 0; pointer-events: none; } .rv__chip span { display: inline-block; padding: 8px 14px; border: 1.5px solid #c9d2dc; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s; } .rv__chip input:checked + span { border-color: #e8890c; background: #fff3e3; color: #a85a0b; } .rv__chip input:checked + span::before { content: "✓ "; } .rv__chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(23, 52, 110, .25); } .rv__agree { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; } .rv__agree input { width: 20px; height: 20px; accent-color: #e8890c; } .rv__submit { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 16px 40px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #f0a43c, #e8890c); color: #fff; font: inherit; font-size: 17px; font-weight: 900; cursor: pointer; box-shadow: 0 6px 16px rgba(232, 137, 12, .35); transition: transform .15s, box-shadow .15s; } .rv__submit:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(232, 137, 12, .45); } .rv__submit span { display: inline-block; transition: transform .2s; } .rv__submit:hover span { transform: translateX(4px); } .rv__err { padding: 12px 16px; border-radius: 10px; background: #fdecec; color: #b42f2f; font-weight: 700; } .rv__other { display: grid; justify-items: center; gap: 10px; padding: 18px; border-radius: 14px; background: #f3f6fa; text-align: center; font-weight: 800; color: #17346e; } .rv__other div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .rv__obtn { display: inline-flex; padding: 10px 22px; border-radius: 999px; background: #fff; border: 2px solid #17346e; color: #17346e !important; font-weight: 800; text-decoration: none !important; } .rv__obtn--line { background: #06c755; border-color: #06c755; color: #fff !important; } .rv__done { display: grid; justify-items: center; gap: 12px; padding: 32px 22px; border-radius: 16px; background: #fff8ef; border: 2px solid #e8890c; text-align: center; line-height: 1.85; } .rv__done-ic svg { width: 72px; height: 72px; animation: rv-pop .6s cubic-bezier(.3, 1.5, .5, 1) both; } .rv__check { stroke-dasharray: 50; stroke-dashoffset: 50; animation: rv-check .5s ease-out .4s forwards; } .rv__done-h { font-size: 22px; font-weight: 900; color: #17346e; } @keyframes rv-pop { from { transform: scale(0); } to { transform: scale(1); } } @keyframes rv-check { to { stroke-dashoffset: 0; } } @media (max-width: 760px) { .rvp__hero { padding: 190px 20px 24px; } .rvp__photo { inset: 0 0 auto 0; height: 250px; } .rvp__hero::before { background: linear-gradient(180deg, rgba(241, 247, 252, 0) 110px, #eaf3fb 250px); } .rvp__merits { grid-template-columns: 1fr; } .rv__steps { grid-template-columns: 1fr; } .rv__when { grid-template-columns: 1fr 1fr; } .rv__when .rv__lab { grid-column: 1 / -1; } .rv__row { grid-template-columns: 1fr; gap: 4px; } .rv__set { padding: 14px 12px; } .rv__submit { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .rvp__photo, .rvp__go span, .rv__done-ic svg, .rv__check { animation: none !important; stroke-dashoffset: 0; } } /* ===== 所在地・アクセス・お客様専用駐車場（2.47.0） ===== */ .ac { display: grid; gap: 16px; } .ac__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; } .ac__map { margin: 0; } .ac__map svg { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 6px 18px rgba(23, 52, 110, .12); } .ac__map figcaption { margin-top: 6px; font-size: 11px; color: #6b7679; text-align: right; } .ac__small { font-size: 12px; font-weight: 700; fill: #8d8577; } .ac__label { font-size: 15px; font-weight: 900; fill: #fff; text-anchor: middle; font-family: sans-serif; } .ac__park { fill: #5c6f8f; } .ac__route { stroke-dashoffset: 0; animation: ac-dash 1.2s linear infinite; opacity: 0; transition: opacity .4s ease .6s; } .ac__map.is-in .ac__route { opacity: 1; } .ac__walker { offset-path: path("M162 242 L330 183.5 L330 112 L362 112"); offset-rotate: 0deg; offset-distance: 0%; opacity: 0; } .ac__map.is-in .ac__walker { animation: ac-walk 5s ease-in-out 1.6s infinite; } .ac__car { transform: translateY(-70px); opacity: 0; } .ac__map.is-in .ac__car { animation: ac-park 1.4s cubic-bezier(.2, .8, .2, 1) .2s forwards; } .ac__ptag { transform-box: fill-box; transform-origin: center; } .ac__map.is-in .ac__ptag { animation: rm-ad-pulse 2.4s ease-in-out infinite 1.6s; } .ac__pin { animation: rm-pin 2.4s cubic-bezier(.3, 1.4, .5, 1) infinite; } @keyframes ac-dash { to { stroke-dashoffset: -13; } } @keyframes ac-park { 0% { transform: translateY(-70px); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes ac-walk { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 85% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } .ac__info { display: grid; gap: 14px; } .ac__info dl { display: grid; margin: 0; border-top: 1px solid #dde3ea; } .ac__info dl div { display: grid; grid-template-columns: 6em minmax(0, 1fr); padding: 11px 4px; border-bottom: 1px solid #dde3ea; font-size: 14px; } .ac__info dt { font-weight: 800; color: #17346e; } .ac__info dd { margin: 0; } .ac__p { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 5px; background: #17346e; color: #fff; font-size: 13px; } .ac__park-box { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: #fff3e3; border: 1.5px solid #f2c48a; font-size: 13px; line-height: 1.75; } .ac__park-box p { margin: 0 !important; } .ac__park-h { font-size: 15px !important; font-weight: 900; color: #a85a0b; } .ac__info > p { margin: 0 !important; } .ac__btn { display: inline-flex; padding: 10px 20px; border-radius: 999px; border: 2px solid #17346e; color: #17346e !important; font-weight: 800; text-decoration: none !important; } .ac__gmap { position: relative; aspect-ratio: 16 / 7; border-radius: 16px; overflow: hidden; background: #e8ecef; } .ac__gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 760px) { .ac__grid { grid-template-columns: 1fr; } .ac__gmap { aspect-ratio: 4 / 3; } } @media (prefers-reduced-motion: reduce) { .ac__route, .ac__walker, .ac__car, .ac__ptag, .ac__pin { animation: none !important; } .ac__car, .ac__route { opacity: 1; transform: none; } } /* ===== 不動産買取ページ（2.49.0） ===== */ .kt { --kt-navy: #17346e; --kt-or: #e8890c; display: grid; gap: 56px; color: #1c2629; } .kt h2, .kt h3, .kt p { margin: 0 !important; padding: 0; border: 0; background: none; } .kt h2::before, .kt h2::after, .kt h3::before, .kt h3::after { display: none !important; } .kt ul, .kt ol { margin: 0 !important; padding: 0 !important; list-style: none !important; } .kt li { margin: 0 !important; } .kt li::before { display: none; } .kt-en { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--kt-or); } .kt-h { margin: 6px 0 22px !important; text-align: center; font-size: clamp(22px, 3vw, 30px) !important; font-weight: 900; color: var(--kt-navy) !important; line-height: 1.4; } .kt-note { margin-top: 12px !important; font-size: 13px; color: #5e6b6a; line-height: 1.8; } .kt-note--c { text-align: center; } .kt-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 900; font-size: 16px; text-decoration: none !important; transition: transform .15s, box-shadow .15s; } .kt-btn:hover { transform: translateY(-2px); } .kt-btn--main { background: var(--kt-or); color: #fff !important; box-shadow: 0 6px 16px rgba(232, 137, 12, .4); animation: rm-perk-pulse 2.4s ease-in-out infinite; } .kt-btn--tel { background: #fff; color: var(--kt-navy) !important; } .kt-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 16px; padding: 40px 40px 36px; border-radius: 18px; background: linear-gradient(135deg, #2f5e86, #17346e); color: #fff; } .kt-hero__in { display: grid; gap: 14px; } .kt-hero__eye { justify-self: start; padding: 4px 14px !important; border-radius: 999px; background: rgba(255, 255, 255, .16) !important; font-size: 13px; font-weight: 700; } .kt-hero h2 { font-size: clamp(30px, 4.4vw, 46px) !important; font-weight: 900; line-height: 1.3; color: #fff !important; } .kt-hero h2 em { font-style: normal; color: #ffd36b; } .kt-hero__lead { font-size: 15px; line-height: 1.8; opacity: .95; } .kt-hero__pts { display: flex; flex-wrap: wrap; gap: 8px; } .kt-hero__pts li { padding: 6px 14px !important; border-radius: 8px; background: #fff; color: var(--kt-navy); font-size: 14px; font-weight: 800; } .kt-hero__pts b { color: var(--kt-or); font-size: 16px; } .kt-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .kt-hero__art { display: grid; place-items: center; } .kt-hero__art .hs-art { width: 100%; max-width: 420px; height: auto; } .kt-worry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .kt-worry li { display: flex; align-items: center; gap: 12px; padding: 16px 18px !important; border-radius: 14px; background: #f3f6fa; font-size: 15px; font-weight: 800; color: var(--kt-navy); opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .12s); } .kt-worry.is-in li { opacity: 1; transform: none; } .kt-worry li span { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 22px; } .kt-worry__ans { display: grid; justify-items: center; gap: 6px; margin-top: 18px !important; text-align: center; font-size: clamp(17px, 2.4vw, 22px); font-weight: 900; color: var(--kt-navy); } .kt-worry__ans span { color: var(--kt-or); animation: rvp-bob 1.4s ease-in-out infinite; } .kt-worry__ans b { color: var(--kt-or); background: linear-gradient(transparent 62%, #ffe2b8 62%); } .kt-cmp-wrap { overflow-x: auto; } .kt-cmp { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; font-size: 14px; } .kt-cmp th, .kt-cmp td { padding: 14px 12px; border-bottom: 1px solid #dde3ea; text-align: center; line-height: 1.5; } .kt-cmp td small { display: block; font-size: 11px; color: #6b7679; } .kt-cmp thead th { font-weight: 800; color: #5e6b6a; } .kt-cmp tbody th { width: 9em; text-align: left; background: #f3f6fa; font-weight: 800; } .kt-cmp .is-us { background: #fff8ef; color: #1c2629; border-left: 3px solid var(--kt-or); border-right: 3px solid var(--kt-or); } .kt-cmp .is-us b { color: var(--kt-or); font-size: 16px; } .kt-cmp thead .is-us { border-top: 3px solid var(--kt-or); border-radius: 12px 12px 0 0; background: var(--kt-or); color: #fff; } .kt-cmp tbody tr:last-child .is-us { border-bottom: 3px solid var(--kt-or); } .kt-merit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .kt-merit article { position: relative; display: grid; gap: 8px; align-content: start; padding: 28px 20px 22px; border: 1px solid #dde3ea; border-radius: 16px; background: #fff; } .kt-merit__n { position: absolute; top: -14px; left: 20px; padding: 2px 12px; border-radius: 999px; background: var(--kt-navy); color: #fff; font-weight: 900; } .kt-merit h3 { font-size: 19px !important; font-weight: 900; color: var(--kt-navy) !important; } .kt-merit p { font-size: 14px; line-height: 1.8; } .kt-target { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .kt-target li { padding: 10px 18px !important; border-radius: 999px; background: #fff; border: 2px solid var(--kt-navy); color: var(--kt-navy); font-weight: 800; font-size: 14px; } .kt-target li:nth-child(odd) { border-color: var(--kt-or); color: #a85a0b; } .kt-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: ktf; } .kt-flow li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 44px 8px 16px !important; border-radius: 14px; background: #f3f6fa; text-align: center; counter-increment: ktf; } .kt-flow li::before { content: "STEP " counter(ktf); display: block !important; position: absolute; top: 14px; left: 0; right: 0; font-size: 12px; font-weight: 900; letter-spacing: .1em; color: var(--kt-or); } .kt-flow li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; z-index: 1; border: 8px solid transparent; border-left-color: var(--kt-navy); border-right: 0; transform: translateY(-50%); } .kt-flow b { font-size: 15px; color: var(--kt-navy); } .kt-flow small { font-size: 12px; color: #6b7679; } .kt-faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; } .kt-faq details { border: 1px solid #dde3ea; border-radius: 12px; background: #fff; } .kt-faq summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 800; color: var(--kt-navy); } .kt-faq summary::-webkit-details-marker { display: none; } .kt-faq summary::after { content: "＋"; margin-left: auto; color: var(--kt-or); font-weight: 900; } .kt-faq details[open] summary::after { content: "－"; } .kt-faq details p { display: flex; gap: 12px; padding: 0 18px 16px; font-size: 14px; line-height: 1.8; animation: rm-perk-in .35s ease both; } .kt-faq__q, .kt-faq__a { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kt-navy); color: #fff; font-weight: 900; font-size: 14px; } .kt-faq__a { background: var(--kt-or); } .kt-formsec { display: grid; gap: 14px; padding: 28px; border-radius: 18px; background: #f3f6fa; } .kt-formsec .kt-h { margin-bottom: 6px !important; } .kt-formsec__lead { text-align: center; font-size: 14px; } .kt-formsec__lead a { color: var(--kt-navy); font-weight: 800; } .kt-form__no { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--kt-or); color: #fff; font-size: 13px; } .kt-formsec .rv__other small { font-weight: 400; color: #6b7679; } @media (max-width: 860px) { .kt-hero { grid-template-columns: 1fr; padding: 28px 20px; } .kt-hero__art { order: -1; max-width: 300px; justify-self: center; } .kt-worry, .kt-merit { grid-template-columns: 1fr; } .kt-merit { gap: 24px; } .kt-flow { grid-template-columns: 1fr; } .kt-flow li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -11px; border: 8px solid transparent; border-top-color: var(--kt-navy); border-bottom: 0; transform: translateX(-50%); } .kt-formsec { padding: 18px 12px; } } @media (prefers-reduced-motion: reduce) { .kt-worry li { opacity: 1; transform: none; transition: none; } .kt-btn--main, .kt-worry__ans span { animation: none; } } .kt > *, .kt-hero > * { min-width: 0; } .kt-merit { margin-top: 28px; } .kt-target { margin-top: 4px; } /* ===== 各ページの一番下の来店予約バナー（2.50.0） ===== */ .rvb { position: relative; overflow: hidden; isolation: isolate; margin: 48px 0 8px; padding: 30px 36px; border-radius: 18px; background: #eaf3fb; color: #17346e; box-shadow: 0 8px 24px rgba(23, 52, 110, .14); clear: both; } .rvb p { margin: 0 !important; } .rvb__photo { position: absolute; inset: 0 0 0 42%; z-index: -2; background: #dfe9ee 60% center/cover no-repeat; transition: transform 8s ease-out; } .rvb:hover .rvb__photo { transform: scale(1.06); } .rvb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #f1f7fc 0%, rgba(241, 247, 252, .97) 46%, rgba(241, 247, 252, .55) 64%, rgba(241, 247, 252, 0) 80%); } .rvb__in { display: grid; gap: 12px; max-width: 600px; } .rvb__head { display: flex; align-items: center; gap: 14px; } .rvb__cal { flex: 0 0 auto; width: 60px; height: 60px; filter: drop-shadow(0 3px 6px rgba(23, 52, 110, .18)); } .rvb__eye { font-size: 13px; font-weight: 800; color: #e8890c; letter-spacing: .08em; } .rvb__h { font-size: clamp(26px, 3.6vw, 36px); font-weight: 900; line-height: 1.2; color: #17346e; } .rvb__h em { font-style: normal; color: #e8890c; } .rvb__lead { font-size: 15px; font-weight: 700; line-height: 1.8; } .rvb__tags { display: flex; flex-wrap: wrap; gap: 6px; } .rvb__tags span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 2px 6px rgba(23, 52, 110, .08); } .rvb__tags b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #17346e; color: #fff; font-size: 11px; } .rvb__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .rvb__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: #e8890c; color: #fff !important; font-weight: 900; font-size: 16px; text-decoration: none !important; box-shadow: 0 6px 16px rgba(232, 137, 12, .4); animation: rm-perk-pulse 2.4s ease-in-out infinite; transition: transform .15s; } .rvb__btn:hover { transform: translateY(-2px); } .rvb__btn span { display: inline-block; animation: sbst-arrow 1.4s ease-in-out infinite; } .rvb__tel { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 999px; background: #fff; border: 2px solid #17346e; color: #17346e !important; font-weight: 800; text-decoration: none !important; } @media (max-width: 760px) { .rvb { padding: 170px 18px 22px; } .rvb__photo { inset: 0 0 auto 0; height: 220px; } .rvb::before { background: linear-gradient(180deg, rgba(241, 247, 252, 0) 90px, #eaf3fb 220px); } .rvb__cta a { flex: 1 1 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .rvb__btn, .rvb__btn span, .rvb .sb-rv__day, .rvb .sb-rv__ok, .rvb .sb-rv__okm { animation: none !important; } } /* ===== Googleマップの口コミ（流れる表示）（2.51.0） ===== */ .gr { display: grid; gap: 14px; margin: 8px 0 24px; } .gr p { margin: 0 !important; } .gr__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; } .gr__logo { font-family: Arial, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .gr__logo b { font-weight: 700; } .gr__label { font-size: 15px; font-weight: 800; color: #1c2629; } .gr__rate { display: inline-flex; align-items: center; gap: 6px; } .gr__rate > b { font-size: 26px; font-weight: 900; color: #1c2629; font-family: "Helvetica Neue", Arial, sans-serif; } .gr__rate small { font-size: 13px; color: #5e6b6a; } .gr-stars { position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: 2px; color: #dadce0; } .gr-stars::before { content: "★★★★★"; } .gr-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--r); overflow: hidden; color: #fbbc04; white-space: nowrap; } .gr__view { position: relative; overflow: hidden; padding: 6px 0 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .gr__track { display: flex; gap: 16px; width: max-content; animation: gr-flow calc(var(--n) * 9s) linear infinite; } .gr__view:hover .gr__track, .gr__view:focus-within .gr__track { animation-play-state: paused; } .gr-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; width: 300px; padding: 18px; border: 1px solid #e3e6ea; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .06); transition: transform .2s, box-shadow .2s; } .gr-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); } .gr-card__head { display: flex; align-items: center; gap: 10px; } .gr-card__av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .gr-card__av--txt { display: grid; place-items: center; background: #24427a; color: #fff; font-weight: 800; } .gr-card__who { display: grid; min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.35; } .gr-card__who a { color: #1c2629 !important; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-card__who small { font-size: 12px; font-weight: 400; color: #70757a; } .gr-card__g { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #e3e6ea; color: #4285F4; font: 700 13px/1 Arial, sans-serif; } .gr-card__text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.75; color: #3c4043; white-space: pre-line; } .gr-card__more { justify-self: start; font-size: 12px; color: #1a73e8 !important; text-decoration: none !important; } .gr__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .gr__btn { display: inline-flex; padding: 10px 20px; border-radius: 999px; border: 1.5px solid #dadce0; background: #fff; color: #1a73e8 !important; font-size: 14px; font-weight: 700; text-decoration: none !important; } .gr__btn--w { background: #1a73e8; border-color: #1a73e8; color: #fff !important; } .gr__fine { text-align: center; font-size: 11px; color: #70757a; } .gr-hide { display: none !important; } @keyframes gr-flow { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } } @media (max-width: 600px) { .gr-card { width: 260px; } } @media (prefers-reduced-motion: reduce) { .gr__view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .gr__track { animation: none; } .gr-card[aria-hidden="true"] { display: none; } } /* ===== 物件概要：押すと詳しくわかる説明（耐震基準・取引態様）（2.53.0） ===== */ .sp-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.6; vertical-align: 1px; white-space: nowrap; } .sp-badge.is-new { background: #e3f4e8; color: #1f7a3d; border: 1px solid #9fd3ae; } .sp-badge.is-old { background: #fff1e0; color: #a85a0b; border: 1px solid #f2c48a; } .sp-badge.is-check { background: #eef1f5; color: #4a5a6a; border: 1px solid #cdd5de; } .sp-info { margin-top: 8px; font-size: 13px; } .sp-info summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #eef3fa; color: #24427a; font-weight: 800; cursor: pointer; list-style: none; transition: background .2s; } .sp-info summary::-webkit-details-marker { display: none; } .sp-info summary::before { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #24427a; color: #fff; font-size: 11px; } .sp-info summary::after { content: "▼"; font-size: 9px; transition: transform .3s; } .sp-info[open] summary::after { transform: rotate(180deg); } .sp-info summary:hover { background: #dfe8f5; } .sp-info__body { display: grid; gap: 10px; margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: #f7f9fc; border: 1px solid #e1e7ef; line-height: 1.8; animation: rm-perk-in .4s cubic-bezier(.2, .8, .2, 1) both; } .sp-info__body p { margin: 0 !important; } .sp-info__lead { font-weight: 700; color: #1c2629; } .sp-info__tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: 12px; } .sp-info__tbl th, .sp-info__tbl td { padding: 8px; border: 1px solid #e1e7ef; text-align: center; vertical-align: middle; line-height: 1.5; } .sp-info__tbl thead th { background: #eef1f5; font-weight: 800; } .sp-info__tbl tbody th { background: #f7f9fc; font-weight: 800; white-space: nowrap; } .sp-info__tbl small { font-weight: 400; color: #6b7679; } .sp-info__tbl .is-new { background: #f0f9f3; color: #1f7a3d; font-weight: 700; } .sp-info__tbl thead .is-new { background: #1f7a3d; color: #fff; } .sp-info__list, .sp-info__dl { display: grid; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .sp-info__list li { position: relative; margin: 0 !important; padding-left: 16px !important; } .sp-info__list li::before { content: "・"; position: absolute; left: 0; } .sp-info__sub { font-weight: 800; color: #24427a; } .sp-info__dl div { padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid #e1e7ef; } .sp-info__dl dt { font-weight: 800; color: #24427a; } .sp-info__dl dd { margin: 0; } .sp-info__note { font-size: 12px; color: #5e6b6a; } @media (prefers-reduced-motion: reduce) { .sp-info__body { animation: none; } } @media (max-width: 600px) { .sp-info__tbl th, .sp-info__tbl td { padding: 6px 4px; font-size: 11px; } .sp-info__tbl tbody th { white-space: normal; } .sp-info__body { padding: 12px 10px; } .sp-info summary { white-space: normal; } } /* ===== 用途地域・建ぺい率・容積率の説明（2.54.0） ===== */ .zi { gap: 16px; } .zi-sec { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid #e1e7ef; } .zi-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; color: #17346e; } .zi-h span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8890c; color: #fff; font-size: 13px; } .zi-cur { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #fff8ef; } .zi-cur b { color: #17346e; } .zi-cur b + * , .zi-cur { font-size: 13px; } .zi-dot { grid-row: span 2; width: 18px; height: 18px; border-radius: 4px; background: var(--c); } .zi-grp { display: grid; gap: 4px; } .zi-grp__h { font-size: 12px; font-weight: 800; color: #5e6b6a; } .zi-chips { display: flex; flex-wrap: wrap; gap: 6px; } .zi-chip { position: relative; padding: 4px 10px 4px 22px; border-radius: 999px; background: #f3f5f7; font-size: 12px; font-weight: 700; color: #3c4043; opacity: 0; animation: zi-pop .45s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(var(--i) * .06s + .1s); } .zi-chip::before { content: ""; position: absolute; left: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 3px; background: var(--c); } .zi-chip.is-cur { background: #17346e; color: #fff; box-shadow: 0 0 0 3px rgba(232, 137, 12, .5); animation: zi-pop .45s cubic-bezier(.3, 1.5, .5, 1) forwards, zi-ring 1.8s ease-in-out .8s infinite; } .zi-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: center; } .zi-fig { border-radius: 10px; background: #f7f9fc; } .zi-svg { display: block; width: 100%; height: auto; } .zi-cap { font-size: 11px; font-weight: 700; fill: #6b7679; text-anchor: middle; } .zi-lab { font-size: 12px; font-weight: 800; fill: #17346e; text-anchor: middle; } .zi-lab--o { fill: #a85a0b; font-size: 11px; } .zi-big { font-size: 18px; font-weight: 900; fill: #e8890c; text-anchor: middle; font-family: "Helvetica Neue", Arial, sans-serif; } .zi-in { font-size: 14px; font-weight: 800; fill: #fff; text-anchor: middle; } .zi-in--s { font-size: 11px; } .zi-grow-x { transform-box: fill-box; transform-origin: left center; animation: zi-grow-x 1.2s cubic-bezier(.2, .8, .2, 1) .2s both; } .zi-floor { opacity: 0; transform-box: fill-box; animation: zi-drop .5s cubic-bezier(.3, 1.3, .5, 1) both; } .zi-sum { opacity: 0; animation: zi-fade .5s ease 2s forwards; } .zi-txt { display: grid; gap: 6px; font-size: 13px; } .zi-calc { padding: 8px 12px; border-radius: 8px; background: #eef3fa; font-weight: 700; } .zi-calc b { font-size: 17px; color: #e8890c; } .zi-fine { font-size: 12px; color: #6b7679; } @keyframes zi-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes zi-drop { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } } @keyframes zi-fade { to { opacity: 1; } } @keyframes zi-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } @keyframes zi-ring { 0%, 100% { box-shadow: 0 0 0 3px rgba(232, 137, 12, .5); } 50% { box-shadow: 0 0 0 7px rgba(232, 137, 12, .15); } } @media (max-width: 640px) { .zi-row { grid-template-columns: 1fr; } .zi-sec { padding: 12px 10px; } } @media (prefers-reduced-motion: reduce) { .zi-chip, .zi-grow-x, .zi-floor, .zi-sum { animation: none !important; opacity: 1; } } /* 賃貸管理ページのメインビジュアル：オーナー夫婦の写真（2.55.0） */ .rm-hero__photo { inset: 0 0 0 40%; background-position: center 22%; } .rm-hero::before { background: linear-gradient(90deg, #f1f7fc 0%, rgba(241, 247, 252, .97) 42%, rgba(241, 247, 252, .5) 52%, rgba(241, 247, 252, 0) 62%); } @media (max-width: 860px) { .rm-hero__photo { inset: 0 0 auto 0; height: 300px; background-position: center 18%; } .rm-hero { padding-top: 230px; } .rm-hero::before { background: linear-gradient(180deg, rgba(241, 247, 252, 0) 170px, #eaf3fb 300px); } } @media (min-width: 861px) { .rm-hero__photo { inset: 0 0 0 50%; background-position: center 30%; } .rm-hero::before { background: linear-gradient(90deg, #f1f7fc 0%, rgba(241, 247, 252, .97) 48%, rgba(241, 247, 252, .55) 54%, rgba(241, 247, 252, 0) 62%); } } /* 写真は img で表示（背景画像が表示されない環境への対策）（2.57.0） */ img.rm-hero__photo { position: absolute; display: block; max-width: none; height: 100% !important; width: auto; object-fit: cover; object-position: center 30%; margin: 0 !important; border-radius: 0 !important; } @media (min-width: 861px) { img.rm-hero__photo { left: 50%; right: 0; top: 0; bottom: 0; width: 50% !important; } } @media (max-width: 860px) { img.rm-hero__photo { left: 0; right: 0; top: 0; width: 100% !important; height: 300px !important; object-position: center 18%; } } /* ===== お気に入り：ヘッダーのリンクと一覧ページ（2.58.0） ===== */ .mb-favlink { display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; font-weight: 700; white-space: nowrap; } .mb-favlink__ic { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #e5486b; } .mb-favlink__ic svg { width: 20px; height: 20px; fill: currentColor; } .mb-favlink__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e5486b; color: #fff; font-size: 12px; line-height: 1; } .mb-favlink__n:empty, .mb-favlink__n[data-zero] { background: #b9c2cb; } .mb-favlink-item .mb-favlink { padding: 0 6px; } .mb-favlink:hover .mb-favlink__ic { animation: mb-heart-beat .8s ease-in-out; } .mb-favfloat { position: fixed; top: 84px; right: 12px; z-index: 90; } .mb-favfloat .mb-favlink { padding: 8px 14px; border-radius: 999px; background: #fff; color: #1c2629 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); } @keyframes mb-heart-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.3); } 60% { transform: scale(.95); } } .mb-favpage { display: grid; gap: 18px; } .mb-favpage p { margin: 0 !important; } .mb-favpage__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: #fff3f6; } .mb-favpage__ic { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #e5486b; } .mb-favpage__ic svg { width: 28px; height: 28px; fill: currentColor; animation: mb-heart-beat 1.6s ease-in-out infinite; } .mb-favpage__h { font-size: 20px; font-weight: 900; color: #1c2629; } .mb-favpage__h b { font-size: 26px; color: #e5486b; } .mb-favpage__lead { font-size: 13px; color: #5e6b6a; line-height: 1.7; } .mb-favpage__loading { text-align: center; color: #5e6b6a; } .mb-favpage__empty { display: grid; justify-items: center; gap: 12px; padding: 30px 20px; border: 2px dashed #e1e7ef; border-radius: 16px; text-align: center; line-height: 1.8; } .mb-favpage__gone { font-size: 13px; color: #a85a0b; } .mb-favpage__tools { text-align: right; } .mb-favpage .mb-card { transition: opacity .35s ease, transform .35s ease; } .mb-favpage .mb-card.is-leaving { opacity: 0; transform: scale(.94); } @media (prefers-reduced-motion: reduce) { .mb-favpage__ic svg, .mb-favlink:hover .mb-favlink__ic { animation: none; } } .mb-favpage [hidden] { display: none !important; } /* ===== 諸費用の各項目：押すと説明が上がってくる（2.59.0） ===== */ .ln-cost__q { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: inherit; text-align: left; cursor: pointer; } .ln-cost__q i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #24427a; color: #fff; font-style: normal; font-size: 11px; transition: transform .25s, background .25s; } .ln-cost__q:hover { color: #24427a; text-decoration: underline; } .ln-cost__row.is-open .ln-cost__q i { background: #e8890c; transform: rotate(360deg); } .ln-cost__row.is-open th, .ln-cost__row.is-open td { border-bottom-color: transparent; } .ln-cost__info[hidden] { display: none !important; } .ln-cost__info td { padding: 0 12px 12px !important; text-align: left !important; white-space: normal !important; font-family: inherit !important; } .ln-cost__infobody { padding: 12px 14px; border-radius: 10px; background: #fff8ef; border: 1px solid #f2c48a; font-size: 13px; line-height: 1.8; font-weight: 400; } .ln-cost__info.is-up .ln-cost__infobody { animation: ln-info-up .45s cubic-bezier(.2, .8, .2, 1) both; } .ln-cost__infobody p { margin: 0 0 6px !important; } .ln-cost__infoh { font-weight: 900; color: #a85a0b; } .ln-cost__infobody ul { margin: 0 !important; padding-left: 1.2em !important; } .ln-cost__infobody li { margin: 2px 0 !important; } @keyframes ln-info-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ln-cost__info.is-up .ln-cost__infobody { animation: none; } } /* 匿名査定の費用：抵当権抹消登記・測量費をいつも表示（2.60.0） */ .st__costs-t tr.is-zero th, .st__costs-t tr.is-zero td { color: #8a9396 !important; } .st__tgl { display: inline-flex; margin-top: 6px; padding: 4px 12px; border: 1.5px solid #e8890c; border-radius: 999px; background: #fff; color: #a85a0b; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .2s; } .st__tgl:hover { background: #fff3e3; } .st__tgl.is-on { border-color: #b9c2cb; color: #5e6b6a; } .st__costs-t th .st__tgl { display: table; } /* ===== 無料査定のご依頼ページ（2.62.0） ===== */ .si-hero { background: linear-gradient(135deg, #b4690f, #7a4510); } .si-hero .kt-btn--main { background: #fff; color: #9a5b12 !important; } .si-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .si-methods article { position: relative; display: grid; gap: 8px; align-content: start; padding: 26px 22px 22px; border: 1px solid #dde3ea; border-radius: 16px; background: #fff; } .si-methods article.is-rec { border: 2px solid #e8890c; background: #fff8ef; } .si-methods__badge { position: absolute; top: -13px; left: 20px; padding: 2px 12px; border-radius: 999px; background: #e8890c; color: #fff; font-size: 12px; font-weight: 800; } .si-methods__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #f3f6fa; font-size: 26px; } .si-methods h3 { font-size: 21px !important; font-weight: 900; color: #17346e !important; } .si-methods__tag { font-size: 13px; font-weight: 800; color: #a85a0b; } .si-methods p { font-size: 14px; line-height: 1.8; } .si-kani { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: #eef3fa; border-left: 4px solid #24427a; } .si-kani__l { font-size: 12px; font-weight: 800; color: #24427a; } .si-kani p { margin: 0 !important; font-weight: 800; color: #17346e; } @media (max-width: 760px) { .si-methods { grid-template-columns: 1fr; gap: 24px; } } .si-methods { margin-top: 26px; } /* ===== 物件の見学・資料請求ページ（2.63.0） ===== */ .kg-head .kt-h { margin-bottom: 14px !important; } .kg-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .kg-pts li { display: grid; justify-items: center; gap: 4px; padding: 16px 12px !important; border-radius: 14px; background: #f3f6fa; text-align: center; font-size: 13px; line-height: 1.6; } .kg-pts li span { font-size: 26px; } .kg-pts li b { font-size: 16px; color: #17346e; } .kg-bkwrap { display: grid; gap: 6px; } .kg-bkwrap__l { margin: 0 !important; font-size: 13px; font-weight: 800; color: #5e6b6a; } .kg-bk { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 2px solid #24427a; border-radius: 14px; background: #fff; color: inherit !important; text-decoration: none !important; } .kg-bk__img { width: 140px; height: 100px; border-radius: 10px; object-fit: cover; } .kg-bk__img--none { display: grid; place-items: center; background: #eef1f5; font-size: 34px; } .kg-bk__body { display: grid; gap: 2px; min-width: 0; } .kg-bk__no { font-size: 12px; color: #6b7679; } .kg-bk__t { font-size: 16px; color: #17346e; line-height: 1.4; } .kg-bk__p { font-size: 18px; font-weight: 900; color: #c0392b; } .kg-bk__m { font-size: 13px; color: #5e6b6a; } @media (max-width: 640px) { .kg-pts { grid-template-columns: 1fr; } .kg-bk { grid-template-columns: 96px minmax(0, 1fr); } .kg-bk__img { width: 96px; height: 76px; } } /* ===== 住宅ローン：ポイント・注意点ランキング（2.64.0） ===== */ .lp-rank { display: grid; gap: 34px; margin-top: 44px; } .lp-rank__sec { display: grid; gap: 12px; } .lp-rank__h { display: flex; align-items: center; gap: 10px; } .lp-rank__ic { font-size: 1.1em; } .lp-rank__lead { margin: 0 !important; font-size: 14px; color: #5e6b6a; } .lp-rank__list { display: grid; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .lp-item { margin: 0 !important; padding: 0 !important; border: 1px solid #dde3ea; border-radius: 14px; background: #fff; overflow: hidden; animation: lp-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .08s); transition: box-shadow .2s; } .lp-item::before { display: none !important; } .lp-item:hover { box-shadow: 0 6px 18px rgba(23, 52, 110, .1); } .lp-item summary { display: grid; grid-template-columns: 62px minmax(0, 1fr) 28px; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; } .lp-item summary::-webkit-details-marker { display: none; } .lp-item__no { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #eef1f5; color: #5e6b6a; font-size: 12px; font-weight: 800; line-height: 1; } .lp-item__no b { font-size: 22px; font-family: "Helvetica Neue", Arial, sans-serif; } .lp-rank__sec--point .lp-item.is-1 .lp-item__no { background: linear-gradient(135deg, #f7d774, #d4a017); color: #fff; box-shadow: 0 3px 8px rgba(212, 160, 23, .4); } .lp-rank__sec--point .lp-item.is-2 .lp-item__no { background: linear-gradient(135deg, #e3e6ea, #9aa4ad); color: #fff; } .lp-rank__sec--point .lp-item.is-3 .lp-item__no { background: linear-gradient(135deg, #e9b48a, #b06a35); color: #fff; } .lp-rank__sec--warn .lp-item.is-1 .lp-item__no { background: #d64545; color: #fff; box-shadow: 0 3px 8px rgba(214, 69, 69, .35); } .lp-rank__sec--warn .lp-item.is-2 .lp-item__no { background: #e8890c; color: #fff; } .lp-rank__sec--warn .lp-item.is-3 .lp-item__no { background: #f2b01e; color: #fff; } .lp-item__t { display: grid; gap: 2px; } .lp-item__t b { font-size: 16px; color: #17346e; line-height: 1.45; } .lp-item__t small { font-size: 13px; color: #5e6b6a; } .lp-item__more { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #eef3fa; transition: transform .3s, background .3s; } .lp-item__more::before, .lp-item__more::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: #24427a; transition: transform .3s; } .lp-item__more::after { transform: rotate(90deg); } .lp-item details[open] .lp-item__more { background: #e8890c; transform: rotate(180deg); } .lp-item details[open] .lp-item__more::before, .lp-item details[open] .lp-item__more::after { background: #fff; } .lp-item details[open] .lp-item__more::after { transform: rotate(0deg); } .lp-item__body { margin: 0 16px 16px 90px; padding: 12px 14px; border-radius: 10px; background: #f7f9fc; font-size: 14px; line-height: 1.85; animation: ln-info-up .45s cubic-bezier(.2, .8, .2, 1) both; } .lp-rank__sec--warn .lp-item__body { background: #fff8f2; } .lp-item__body p { margin: 0 0 6px !important; } .lp-item__body ul { margin: 0 0 6px !important; padding-left: 1.2em !important; } .lp-item__body li { margin: 2px 0 !important; } .lp-rank__fine { margin: 0 !important; font-size: 12px; color: #6b7679; } @keyframes lp-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .lp-item summary { grid-template-columns: 48px minmax(0, 1fr) 24px; gap: 10px; padding: 12px; } .lp-item__no { width: 44px; height: 44px; } .lp-item__no b { font-size: 18px; } .lp-item__body { margin: 0 12px 12px; } } @media (prefers-reduced-motion: reduce) { .lp-item, .lp-item__body { animation: none; } } /* ===== 住宅ローンギャラリー：目次・基礎知識・よくある質問（2.65.0） ===== */ .lk-toc { margin: 18px 0 8px; padding: 14px 18px; border-radius: 14px; background: #f3f6fa; } .lk-toc__h { margin: 0 0 6px !important; font-weight: 900; color: #17346e; } .lk-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; margin: 0 !important; padding-left: 1.4em !important; font-size: 14px; } .lk-toc li { margin: 0 !important; } .lk-toc a { color: #24427a !important; text-decoration: none !important; } .lk-toc a:hover { text-decoration: underline !important; } .lk { display: grid; gap: 10px; margin-top: 10px; } .lk-sec { display: grid; gap: 8px; scroll-margin-top: 90px; } .lk-lead { margin: 0 !important; font-size: 15px; line-height: 1.8; } .lk-more summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; background: #24427a; color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; } .lk-more summary::-webkit-details-marker { display: none; } .lk-more summary::after { content: "▼"; font-size: 10px; transition: transform .3s; } .lk-more[open] summary { background: #e8890c; } .lk-more[open] summary::after { transform: rotate(180deg); } .lk-body { margin-top: 10px; padding: 16px 18px; border: 1px solid #e1e7ef; border-radius: 14px; background: #fff; font-size: 14px; line-height: 1.85; animation: ln-info-up .45s cubic-bezier(.2, .8, .2, 1) both; } .lk-body h3 { margin: 14px 0 6px !important; padding: 0 0 0 10px !important; border: 0 !important; border-left: 4px solid #e8890c !important; background: none !important; font-size: 16px !important; color: #17346e !important; } .lk-body h3:first-child { margin-top: 0 !important; } .lk-body h3::before, .lk-body h3::after { display: none !important; } .lk-body ul, .lk-body ol { margin: 0 0 6px !important; padding-left: 1.3em !important; } .lk-body li { margin: 2px 0 !important; } .lk-body p { margin: 0 0 6px !important; } .lk-tbl { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 13px; } .lk-tbl th, .lk-tbl td { padding: 8px; border: 1px solid #e1e7ef; text-align: center; vertical-align: middle; line-height: 1.5; } .lk-tbl thead th { background: #eef3fa; color: #17346e; } .lk-tbl tbody th { background: #f7f9fc; white-space: nowrap; } .lk-fine { font-size: 12px; color: #6b7679; } .lk-faq { max-width: none; } @media (max-width: 640px) { .lk-toc ol { grid-template-columns: 1fr; } .lk-body { padding: 12px; } .lk-tbl tbody th { white-space: normal; } } .lk { --kt-navy: #17346e; --kt-or: #e8890c; } .lk-faq { margin: 0 !important; } .lk-faq details p { margin: 0 !important; } /* ===== 金利20年の推移グラフ・3,000万円の総支払額（2.66.0） ===== */ .lh { display: grid; gap: 18px; margin: 18px 0 8px; } .lh p { margin: 0 !important; } .lh-box { display: grid; gap: 10px; padding: 18px; border: 1px solid #e1e7ef; border-radius: 16px; background: #fff; } .lh-h { font-size: 18px; font-weight: 900; color: #17346e; } .lh-sub { font-size: 13px; color: #5e6b6a; } .lh-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; font-weight: 700; } .lh-legend span::before { content: ""; display: inline-block; width: 18px; height: 4px; margin-right: 6px; border-radius: 2px; vertical-align: 3px; } .lh-legend .is-flat::before { background: #24427a; } .lh-legend .is-kijun::before { background: #9aa7b4; } .lh-legend .is-yugu::before { background: #e8890c; } .lh-chartwrap { overflow-x: auto; } .lh-chart { display: block; width: 100%; height: auto; } .lh-grid { stroke: #eef1f5; stroke-width: 1; } .lh-ax { font-size: 11px; fill: #6b7679; } .lh-ax--now { font-weight: 800; fill: #c0392b; } .lh-ev { stroke: #d6dbe1; stroke-width: 1; stroke-dasharray: 4 4; } .lh-evt { font-size: 10px; fill: #8a9396; } .lh-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; } .lh-line--flat { stroke: #24427a; } .lh-line--kijun { stroke: #9aa7b4; stroke-width: 2.5; } .lh-line--yugu { stroke: #e8890c; } .lh.is-in .lh-line { animation: lh-draw 2.4s cubic-bezier(.4, 0, .2, 1) forwards; } .lh.is-in .lh-line--kijun { animation-delay: .3s; } .lh.is-in .lh-line--yugu { animation-delay: .6s; } .lh-dot, .lh-val { opacity: 0; } .lh.is-in .lh-dot, .lh.is-in .lh-val { animation: zi-fade .4s ease 2.6s forwards; } .lh-dot--flat { fill: #24427a; } .lh-dot--kijun { fill: #9aa7b4; } .lh-dot--yugu { fill: #e8890c; } .lh-val { font-size: 12px; font-weight: 900; font-family: "Helvetica Neue", Arial, sans-serif; } .lh-val--flat { fill: #24427a; } .lh-val--kijun { fill: #6b7679; } .lh-val--yugu { fill: #c46a12; } .lh-cases { display: grid; gap: 14px; } .lh-case { display: grid; gap: 4px; } .lh-case__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-size: 14px; font-weight: 800; color: #1c2629; } .lh-case__h span { font-size: 13px; color: #24427a; font-family: "Helvetica Neue", Arial, sans-serif; } .lh-case__bar { display: flex; height: 34px; border-radius: 8px; background: #f3f5f7; overflow: hidden; } .lh-case__bar i { display: flex; align-items: center; height: 100%; width: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; transition: width 1.3s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .25s); } .lh-p { background: #24427a; } .lh-i { background: linear-gradient(90deg, #f0a43c, #e8890c); } .lh-case--up .lh-i { background: linear-gradient(90deg, #ef7d6a, #d64545); } .lh.is-in .lh-case__bar i { width: var(--w); } .lh.is-in .lh-case__bar .lh-i { transition-delay: calc(var(--i) * .25s + .6s); } .lh-case__total { text-align: right; font-size: 13px; font-weight: 700; } .lh-case__total b { font-size: 20px; color: #17346e; font-family: "Helvetica Neue", Arial, sans-serif; } .lh-case__total small { margin-left: 6px; font-weight: 400; color: #6b7679; } .lh-fine { font-size: 11px; color: #6b7679; line-height: 1.7; } @keyframes lh-draw { to { stroke-dashoffset: 0; } } @media (max-width: 640px) { .lh-box { padding: 14px 12px; } .lh-case__bar { height: 30px; } .lh-case__bar i { font-size: 11px; padding: 0 5px; } } @media (prefers-reduced-motion: reduce) { .lh-line { stroke-dashoffset: 0; animation: none !important; } .lh-dot, .lh-val { opacity: 1; } .lh-case__bar i { transition: none; } } @media (max-width: 640px) { .lh-ax, .lh-evt { font-size: 14px; } .lh-val { font-size: 16px; } } /* 変動金利が上がったときの総支払額（グラフと一体）（2.67.0） */ .lh-future { fill: #fff6ea; } .lh-futt { font-size: 11px; font-weight: 800; fill: #c46a12; } .lh-legend .is-proj::before { background: repeating-linear-gradient(90deg, #d64545 0 5px, transparent 5px 8px); } .lh-proj { fill: none; stroke: #d64545; stroke-width: 3; stroke-dasharray: 7 5; stroke-linejoin: round; } .lh-proj.is-draw { animation: lh-projdraw 1s ease-out both; } .lh-dot--proj { fill: #d64545; transition: cy .9s cubic-bezier(.2, .8, .2, 1); } .lh-val--proj { fill: #d64545; font-size: 13px; transition: y .9s cubic-bezier(.2, .8, .2, 1); } .lh.is-in .lh-dot--proj, .lh.is-in .lh-val--proj { animation: zi-fade .4s ease 1.8s forwards; } @keyframes lh-projdraw { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } .lh-sim { display: grid; gap: 12px; margin-top: 6px; padding: 16px; border-radius: 14px; background: #f7f9fc; } .lh-sim__h { font-size: 16px !important; font-weight: 900; color: #17346e; } .lh-sim__h b { color: #d64545; } .lh-sim__h span { margin-left: 4px; font-size: 13px; font-weight: 700; color: #5e6b6a; } .lh-chips { display: flex; flex-wrap: wrap; gap: 8px; } .lh-chip { padding: 8px 14px; border: 1.5px solid #c9d2dc; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 800; color: #3c4043; cursor: pointer; transition: all .2s; } .lh-chip:hover { border-color: #24427a; } .lh-chip.is-on { border-color: #d64545; background: #d64545; color: #fff; box-shadow: 0 4px 10px rgba(214, 69, 69, .3); } .lh-chip[data-lh-scen="keep"].is-on { border-color: #24427a; background: #24427a; box-shadow: 0 4px 10px rgba(36, 66, 122, .3); } .lh-res { display: grid; gap: 10px; } .lh-res__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .lh-res__total span { font-size: 13px; font-weight: 800; color: #5e6b6a; } .lh-res__total b { font-size: 34px; font-weight: 900; color: #17346e; font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.1; } .lh-res__total em { font-style: normal; font-size: 15px; font-weight: 900; color: #d64545; } .lh-res__total em.is-up { animation: rm-perk-pulse 1.6s ease-in-out 2; padding: 2px 10px; border-radius: 999px; background: #fdecec; } .lh-res__bar { display: flex; height: 38px; border-radius: 8px; background: #e9edf2; overflow: hidden; } .lh-res__bar i { display: flex; align-items: center; height: 100%; width: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; transition: width .9s cubic-bezier(.2, .8, .2, 1); } .lh-res__bar .lh-i { background: linear-gradient(90deg, #f0a43c, #e8890c); } .lh-res__bar .lh-i.is-up { background: linear-gradient(90deg, #ef7d6a, #d64545); } .lh-res__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lh-res__nums p { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #fff; } .lh-res__nums span { font-size: 12px; color: #5e6b6a; font-weight: 700; } .lh-res__nums b { font-size: 16px; color: #17346e; font-family: "Helvetica Neue", Arial, sans-serif; } @media (max-width: 640px) { .lh-res__nums { grid-template-columns: 1fr; } .lh-res__total b { font-size: 28px; } .lh-sim { padding: 12px 10px; } } @media (prefers-reduced-motion: reduce) { .lh-proj.is-draw, .lh-res__total em.is-up { animation: none; } .lh-res__bar i, .lh-dot--proj, .lh-val--proj { transition: none; } } .lh-startl { font-size: 10px; font-weight: 800; fill: #c46a12; } /* 全期間固定：総支払額の縦棒と金利の折れ線（2.68.0） */ .lf-chart { display: block; width: 100%; height: auto; overflow: visible; } .lf-ax-r { fill: #24427a; } .lf-pline { stroke: #24427a; stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; } .lf-plab { font-size: 10px; font-weight: 700; fill: #24427a; opacity: .7; } .lf-bar rect { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); } .lf-p { fill: #c9d4e6; } .lf-i { fill: #f2b866; } .lf-bar.is-min .lf-i { fill: #8fc27a; } .lf-bar.is-now .lf-p { fill: #9fb2d3; } .lf-bar.is-now .lf-i { fill: #e8890c; } .lf-bar:hover rect { filter: brightness(.92); } .lh.is-in .lf-p { animation: lf-grow .6s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * .05s); } .lh.is-in .lf-i { animation: lf-grow .6s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * .05s + .3s); } .lf-line { fill: none; stroke: #24427a; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; } .lh.is-in .lf-line { animation: lh-draw 2s cubic-bezier(.4, 0, .2, 1) 1.2s forwards; } .lf-dot { fill: #fff; stroke: #24427a; stroke-width: 2; opacity: 0; } .lf-dot.is-now { fill: #e8890c; stroke: #fff; } .lh.is-in .lf-dot { animation: zi-fade .3s ease forwards; animation-delay: calc(1.2s + var(--i) * .09s); } .lf-call { opacity: 0; font-size: 12px; font-weight: 800; fill: #3b7a2a; } .lf-call.is-now { fill: #c46a12; } .lf-call__v { font-size: 15px; font-weight: 900; font-family: "Helvetica Neue", Arial, sans-serif; } .lh.is-in .lf-call { animation: zi-fade .5s ease 3.2s forwards; } .lf-legend, .lh-legend .lf-lg-p::before { background: #c9d4e6; height: 10px !important; width: 14px !important; vertical-align: -1px !important; } .lh-legend .lf-lg-i::before { background: #f2b866; height: 10px !important; width: 14px !important; vertical-align: -1px !important; } .lf-msg { margin: 0 !important; padding: 12px 14px; border-radius: 10px; background: #fff8ef; font-size: 14px; line-height: 1.8; } .lf-msg b { color: #17346e; } .lf-msg em { font-style: normal; font-size: 18px; font-weight: 900; color: #d64545; } @keyframes lf-grow { to { transform: scaleY(1); } } @media (max-width: 640px) { .lf-call { font-size: 14px; } .lf-call__v { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .lf-bar rect { transform: none; animation: none !important; } .lf-line { stroke-dashoffset: 0; animation: none !important; } .lf-dot, .lf-call { opacity: 1; animation: none !important; } } /* 固定金利の折れ線を赤に（2.69.0） */ .lf-line { stroke: #d6342c; } .lf-dot { stroke: #d6342c; } .lf-dot.is-now { fill: #d6342c; stroke: #fff; } .lf-ax-r { fill: #d6342c; } .lh-legend .lf-lg-r { color: #d6342c; } .lh-legend .lf-lg-r::before { background: #d6342c; } /* 金利の線は黒、棒の利息は赤（2.70.0） */ .lf-line { stroke: #1c2629; } .lf-dot { stroke: #1c2629; } .lf-dot.is-now { fill: #1c2629; stroke: #fff; } .lf-ax-r { fill: #1c2629; } .lh-legend .lf-lg-r { color: inherit; } .lh-legend .lf-lg-r::before { background: #1c2629; } .lf-i { fill: #e0574f; } .lf-bar.is-min .lf-i { fill: #f2a19b; } .lf-bar.is-now .lf-i { fill: #b8231b; } .lh-legend .lf-lg-i::before { background: #e0574f; } .lf-call { fill: #b8231b; } .lf-call:not(.is-now) { fill: #c4504a; } .lf-call.is-now { fill: #b8231b; } /* 固定金利グラフ：各年の数字の表（2.71.0） */ .lf-xl { font-size: 10px; } .lf-tblwrap { overflow-x: auto; border: 1px solid #e1e7ef; border-radius: 12px; } .lf-tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; background: #fff; } .lf-tbl caption { padding: 10px 12px 6px; text-align: left; font-weight: 800; color: #17346e; } .lf-tbl th, .lf-tbl td { padding: 7px 10px; border-bottom: 1px solid #eef1f5; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .lf-tbl thead th { position: sticky; top: 0; background: #f3f6fa; color: #5e6b6a; font-size: 12px; text-align: center; } .lf-tbl tbody th { text-align: left; font-weight: 700; color: #1c2629; } .lf-tbl tbody tr:nth-child(even) { background: #fafbfd; } .lf-tbl .lf-r { color: #1c2629; font-weight: 700; } .lf-tbl .lf-int { color: #d6342c; } .lf-tbl .lf-tot b { color: #17346e; } .lf-tbl tr.is-min { background: #fdeceb !important; } .lf-tbl tr.is-now { background: #fbe0de !important; } .lf-tbl tr.is-now th, .lf-tbl tr.is-now .lf-tot b, .lf-tbl tr.is-now .lf-int { color: #b8231b; font-weight: 900; } .lf-tbl tr.is-min th::after { content: " 最低"; font-size: 11px; color: #c4504a; } @media (max-width: 640px) { .lf-xl { font-size: 13px; } } /* 固定金利グラフ：年ごとの数字を棒の下に縦書きで（2.72.0） */ .lf-trow { fill: #fff; } .lf-trow.is-alt { fill: #f6f8fb; } .lf-tsep { stroke: #c9d2dc; stroke-width: 1; } .lf-tlab { font-size: 11px; font-weight: 800; fill: #1c2629; } .lf-tunit { font-size: 9px; fill: #6b7679; } .lf-tv { font-size: 10.5px; fill: #3c4043; font-family: "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; dominant-baseline: middle; opacity: 0; } .lf-tv--0 { font-weight: 800; fill: #1c2629; } .lf-tv--1 { fill: #6b7a95; } .lf-tv--2 { fill: #d6342c; font-weight: 700; } .lf-tv--3 { fill: #17346e; font-weight: 800; } .lf-tv.is-min { fill: #c4504a; } .lf-tv.is-now { fill: #b8231b; font-weight: 900; } .lh.is-in .lf-tv { animation: zi-fade .4s ease forwards; animation-delay: calc(.6s + var(--d, 0s)); } @media (prefers-reduced-motion: reduce) { .lf-tv { opacity: 1; } } /* 15年・太い棒・横書きの数字（2.73.0） */ .lf-tv { font-size: 11.5px; dominant-baseline: middle; } .lf-tlab { font-size: 10.5px; } .lf-tlab .lf-tunit { font-size: 8.5px; font-weight: 400; fill: #6b7679; } .lf-xl { font-size: 12px; } /* ===== 2.74.0 金利が高いときの防衛策（繰り上げ返済） ===== */ .ld { display: grid; gap: 16px; margin: 40px 0; } .ld > * { min-width: 0; } .ld-lead { font-size: 15px; line-height: 1.9; } .ld-lead b { color: #b8231b; } .ld-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ld; } .ld-tips li { position: relative; display: grid; gap: 4px; padding: 14px 14px 14px 52px; border: 1px solid #e1e7ef; border-radius: 14px; background: #f7f9fc; counter-increment: ld; } .ld-tips li::before { content: counter(ld); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #17346e; color: #fff; font-weight: 900; font-size: 14px; } .ld-tips li:first-child, .ld-tips li:nth-child(2) { border-color: #f2c4c0; background: #fff6f5; } .ld-tips li:first-child::before, .ld-tips li:nth-child(2)::before { background: #d6342c; } .ld-tips b { font-size: 15px; color: #17346e; } .ld-tips span { font-size: 13px; line-height: 1.7; color: #3c4043; } .ld-ctrl { display: grid; gap: 8px; } .ld-ctrl__g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .ld-ctrl__g > span { min-width: 9em; font-size: 13px; font-weight: 800; color: #17346e; } .ld-chart { width: 100%; height: auto; display: block; } .ld-line { fill: none; stroke-width: 3; stroke-linejoin: round; } .ld-line--base { stroke: #9aa7b4; stroke-dasharray: 6 5; } .ld-line--me { stroke: #d6342c; stroke-width: 3.5; } .ld-area { fill: rgba(214, 52, 44, .12); opacity: 0; } .ld-end { opacity: 0; } .ld-end circle { fill: #d6342c; stroke: #fff; stroke-width: 2; } .ld-end text { font-size: 13px; font-weight: 900; fill: #b8231b; paint-order: stroke; stroke: #fff; stroke-width: 4px; } .lh-legend .ld-lg-base::before { background: repeating-linear-gradient(90deg, #9aa7b4 0 6px, transparent 6px 10px); } .lh-legend .ld-lg-me::before { background: #d6342c; } .ld-res { display: grid; gap: 12px; } .ld-res__save { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #fff1ef, #ffe3df); text-align: center; } .ld-res__save span, .ld-res__save em { font-size: 14px; font-weight: 800; font-style: normal; color: #5a2a26; } .ld-res__save b { font-size: 32px; font-weight: 900; color: #c0261d; letter-spacing: .02em; } .ld-res__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ld-res__col { display: grid; gap: 2px; padding: 12px; border: 1px solid #e1e7ef; border-radius: 12px; font-size: 13px; } .ld-res__col p { margin: 0; } .ld-res__col b { font-size: 15px; } .ld-res__col.is-me { border-color: #f2c4c0; background: #fffafa; } .ld-res__col.is-me b { color: #c0261d; } .ld-res__h { font-weight: 900; color: #17346e; margin-bottom: 4px !important; } .ld-res__m { margin-top: 4px !important; padding-top: 4px; border-top: 1px dashed #e8d2cf; } .ld-bars { display: grid; gap: 8px; } .ld-bar { display: grid; grid-template-columns: 7.5em 1fr 6em; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; } .ld-bar i { display: block; height: 18px; width: 0; border-radius: 4px; background: #c3ccd6; transition: width 1s ease-out; } .ld-bar.is-me i { background: #e0574f; } .ld-bar em { font-style: normal; text-align: right; } @media (max-width: 560px) { .ld-res__cmp { grid-template-columns: 1fr; } .ld-res__save b { font-size: 26px; } .ld-ctrl__g > span { min-width: 100%; } .ld-bar { grid-template-columns: 6.5em 1fr 5em; } } .ld-res__early { flex-basis: 100%; font-size: 13px; font-weight: 700; color: #5a2a26; } .ld-res__early b { font-size: 17px; color: #c0261d; } @media (max-width: 560px) { .ld-chart .lh-ax { font-size: 19px; } .ld-end text { font-size: 22px; stroke-width: 6px; } .ld-end circle { r: 9px; } .ld-line { stroke-width: 5; } .ld-line--me { stroke-width: 6; } } /* ===== 2.75.0 変動金利のリスク（35年で終わらない） ===== */ .lr { display: grid; gap: 16px; margin: 40px 0; } .lr > * { min-width: 0; } .lr-lead { font-size: 15px; line-height: 1.9; } .lr-lead b { color: #b8231b; } .lr-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; } .lr-rule { padding: 14px; border: 1px solid #e1e7ef; border-radius: 14px; background: #f7f9fc; font-size: 13px; line-height: 1.75; } .lr-rule p { margin: 0; } .lr-rule__h { margin-bottom: 6px !important; font-size: 15px; font-weight: 900; color: #17346e; } .lr-rule__h span { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: #17346e; color: #fff; font-size: 12px; vertical-align: 1px; } .lr-rule.is-warn { border-color: #f2c4c0; background: #fff6f5; } .lr-rule.is-warn .lr-rule__h span { background: #d6342c; } .lr-chart { width: 100%; height: auto; display: block; } .lr-over { fill: #fff1ef; } .lr-over__t { font-size: 12px; font-weight: 800; fill: #c0261d; } .lr-35 { stroke: #c0261d; stroke-width: 1.5; stroke-dasharray: 4 4; } .lr-ax35 { font-weight: 900; fill: #c0261d; } .lr-line { fill: none; stroke: #d6342c; stroke-width: 3.5; stroke-linejoin: round; } .lr-lg-me::before { background: #d6342c; } .lr-mk { opacity: 0; } .lr-mk circle { fill: #fff; stroke: #c0261d; stroke-width: 3; } .lr-mk__bg { fill: #c0261d; } .lr-mk text { font-size: 13px; font-weight: 900; fill: #fff; } .lr-res { display: grid; gap: 12px; } .lr-res__big { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, #fff1ef, #ffe0db); text-align: center; } .lr-res__big span { font-size: 14px; font-weight: 800; color: #5a2a26; } .lr-res__big b { font-size: 34px; font-weight: 900; color: #c0261d; } .lr-res__big em { flex-basis: 100%; font-style: normal; font-size: 14px; font-weight: 800; color: #5a2a26; } .lr-res__big.is-ok { background: #eef6f0; } .lr-res__big.is-ok b { color: #1f7a45; } .lr-pay { display: grid; gap: 8px; padding: 14px; border: 1px solid #e1e7ef; border-radius: 12px; } .lr-pay p { margin: 0; } .lr-pay__h { font-size: 14px; font-weight: 900; color: #17346e; } .lr-pay__row { display: grid; grid-template-columns: 12em 1fr; align-items: center; gap: 4px 10px; font-size: 12px; font-weight: 700; } .lr-pay__row em { grid-column: 2; font-style: normal; color: #c0261d; font-weight: 800; } .lr-pay__bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #eef1f5; } .lr-pay__bar i { display: block; width: 0; transition: width 1s ease-out .3s; } .lr-pay__bar .is-p, .lr-pay__lg .is-p::before { background: #6f9bd8; } .lr-pay__bar .is-i, .lr-pay__lg .is-i::before { background: #e0574f; } .lr-pay__lg { display: flex; gap: 14px; font-size: 12px; font-weight: 700; } .lr-pay__lg span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; } .lr-need { margin: 0; padding: 10px 14px; border-left: 4px solid #d6342c; background: #fffafa; font-size: 14px; font-weight: 700; } .lr-need b { color: #c0261d; } .lr-to { margin: 0; text-align: right; font-size: 14px; font-weight: 800; } @media (max-width: 560px) { .lr-chart .lh-ax { font-size: 19px; } .lr-over__t { font-size: 20px; } .lr-mk text, .lr-chart .ld-end text { font-size: 21px; } .lr-chart .ld-end text { stroke-width: 6px; } .lr-line { stroke-width: 6; } .lr-chart .ld-line { stroke-width: 5; } .lr-res__big b { font-size: 28px; } .lr-pay__row { grid-template-columns: 1fr; } .lr-pay__row em { grid-column: 1; } } /* ===== 2.76.0 住宅ローンのグラフ 自動切り替え ===== */ .la-auto { display: flex; align-items: center; gap: 10px; } .la-auto__btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border: 1px solid #c9d2dc; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 800; color: #3c4043; cursor: pointer; white-space: nowrap; } .la-auto__ic { position: relative; width: 18px; height: 18px; border-radius: 50%; background: #24427a; } .la-auto__ic::before { content: ""; position: absolute; left: 7px; top: 5px; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .la-auto.is-on .la-auto__ic { background: #d64545; } .la-auto.is-on .la-auto__ic::before { left: 6px; top: 5px; width: 2px; height: 8px; border: 0; border-left: 2px solid #fff; border-right: 2px solid #fff; } .la-auto__bar { flex: 1; max-width: 220px; height: 4px; border-radius: 2px; background: #eef1f5; overflow: hidden; } .la-auto__bar i { display: block; height: 100%; width: 0; background: #d64545; } .la-auto:not(.is-on) .la-auto__bar { visibility: hidden; } /* ===== 2.77.0 金利が安いランキング ===== */ .lrk { display: grid; gap: 14px; margin: 32px 0; } .lrk > * { min-width: 0; } .lrk-lead { font-size: 15px; line-height: 1.85; } .lrk-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 16px; background: #eef2f7; } .lrk-tab { display: grid; gap: 2px; padding: 10px 6px; border: 0; border-radius: 12px; background: transparent; font: inherit; color: #3c4043; cursor: pointer; text-align: center; transition: background .2s, box-shadow .2s, color .2s; } .lrk-tab b { font-size: 16px; font-weight: 900; } .lrk-tab small { font-size: 11px; line-height: 1.4; color: #6b7679; } .lrk-tab.is-on { background: #fff; color: #17346e; box-shadow: 0 4px 14px rgba(23, 52, 110, .14); } .lrk-tab.is-on b { color: #c0261d; } .lrk-tab:focus-visible { outline: 3px solid #24427a; outline-offset: 2px; } .lrk-panel[hidden] { display: none !important; } .lrk-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .lrk-item { border: 1px solid #e1e7ef; border-radius: 14px; background: #fff; overflow: hidden; } .lrk-item.is-r1 { border-color: #e6c35c; background: linear-gradient(180deg, #fffaeb, #fff 60%); box-shadow: 0 6px 18px rgba(201, 152, 22, .16); } .lrk-item.is-r2 { border-color: #c9d2dc; } .lrk-item.is-r3 { border-color: #e2b99a; } .lrk-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; } .lrk-rank { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #eef1f5; font-size: 18px; font-weight: 900; color: #3c4043; line-height: 1; } .lrk-rank small { font-size: 10px; margin-top: -8px; } .is-r1 .lrk-rank { background: radial-gradient(circle at 30% 30%, #ffe680, #d9a514); color: #5a3d00; box-shadow: 0 3px 8px rgba(217, 165, 20, .45); } .is-r2 .lrk-rank { background: radial-gradient(circle at 30% 30%, #f4f6f8, #a9b4bf); color: #2f3a44; } .is-r3 .lrk-rank { background: radial-gradient(circle at 30% 30%, #f6d2b5, #c27a45); color: #4a2408; } .lrk-main { display: grid; gap: 6px; min-width: 0; } .lrk-name { margin: 0; font-size: 15px; font-weight: 800; color: #17346e; line-height: 1.4; } .lrk-bar { height: 8px; border-radius: 4px; background: #f1f3f6; overflow: hidden; } .lrk-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #6f9bd8, #24427a); transition: width 1s cubic-bezier(.2, .8, .2, 1); } .is-r1 .lrk-bar i { background: linear-gradient(90deg, #f0b93a, #d6342c); } .lrk-panel.is-in .lrk-bar i { width: var(--w); } .lrk-panel.is-in .lrk-item:nth-child(2) .lrk-bar i { transition-delay: .08s; } .lrk-panel.is-in .lrk-item:nth-child(3) .lrk-bar i { transition-delay: .16s; } .lrk-panel.is-in .lrk-item:nth-child(n+4) .lrk-bar i { transition-delay: .24s; } .lrk-rate { margin: 0; font-size: 13px; font-weight: 800; color: #3c4043; white-space: nowrap; } .lrk-rate b { font-size: 24px; font-weight: 900; color: #17346e; letter-spacing: .01em; } .is-r1 .lrk-rate b { color: #c0261d; font-size: 28px; } .lrk-more { border-top: 1px dashed #e1e7ef; } .lrk-more > summary { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: 13px; font-weight: 800; color: #24427a; cursor: pointer; list-style: none; } .lrk-more > summary::-webkit-details-marker, .lu-more > summary::-webkit-details-marker { display: none; } .lrk-more__ic { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; } details[open] > summary .lrk-more__ic { transform: rotate(-135deg) translateY(-2px); } .lrk-body { display: grid; gap: 12px; padding: 4px 16px 16px; animation: lrkIn .3s ease; } @keyframes lrkIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .lrk-body dl { display: grid; gap: 0; margin: 0; border-radius: 10px; background: #f7f9fc; overflow: hidden; } .lrk-body dl > div { display: grid; grid-template-columns: 9em 1fr; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #eaeef3; font-size: 13px; line-height: 1.7; } .lrk-body dl > div:last-child { border-bottom: 0; } .lrk-body dt { font-weight: 800; color: #17346e; } .lrk-body dd { margin: 0; } .lrk-acts { display: flex; flex-wrap: wrap; gap: 8px; } .lrk-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border: 1.5px solid #24427a; border-radius: 999px; background: #24427a; color: #fff !important; font: inherit; font-size: 13px; font-weight: 800; text-decoration: none !important; cursor: pointer; } .lrk-btn--ghost { background: #fff; color: #24427a !important; } @media (max-width: 560px) { .lrk-tab small { display: none; } .lrk-row { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 10px 12px; } .lrk-rank { width: 38px; height: 38px; font-size: 16px; } .lrk-name { font-size: 13px; } .lrk-rate b { font-size: 20px; } .is-r1 .lrk-rate b { font-size: 23px; } .lrk-body dl > div { grid-template-columns: 1fr; gap: 2px; } } /* ===== 2.77.0 ユニークな住宅ローン特集 ===== */ .lu { display: grid; gap: 16px; margin: 40px 0; } .lu > * { min-width: 0; } .lu-hero { position: relative; padding: 26px 22px; border-radius: 20px; background: linear-gradient(135deg, #17346e 0%, #2f5fb0 55%, #f0b93a 140%); color: #fff; overflow: hidden; } .lu-hero::before, .lu-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); } .lu-hero::before { width: 220px; height: 220px; right: -60px; top: -80px; } .lu-hero::after { width: 120px; height: 120px; right: 90px; bottom: -60px; background: rgba(240, 185, 58, .25); } .lu-hero > * { position: relative; margin: 0; } .lu-hero__eye { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #f0b93a; color: #3a2700; font-size: 12px; font-weight: 900; letter-spacing: .2em; } .lu-hero__h { margin: 10px 0 8px !important; font-size: 26px; font-weight: 900; line-height: 1.35; color: #fff; border: 0 !important; padding: 0 !important; background: none !important; } .lu-hero__h::before, .lu-hero__h::after { display: none !important; } .lu-hero__lead { font-size: 14px; line-height: 1.85; opacity: .95; max-width: 40em; } .lu-chips { display: flex; flex-wrap: wrap; gap: 8px; } .lu-chips .lh-chip.is-on { border-color: #17346e; background: #17346e; box-shadow: 0 4px 10px rgba(23, 52, 110, .25); } .lu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; align-items: start; } .lu-card { --c: #24427a; --bg: #eef3fb; display: grid; gap: 8px; padding: 16px; border: 1px solid #e1e7ef; border-top: 5px solid var(--c); border-radius: 16px; background: #fff; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease, box-shadow .2s; } .lu-card[hidden] { display: none !important; } .lu.is-in .lu-card { opacity: 1; transform: none; } .lu.is-in .lu-card:nth-child(2) { transition-delay: .06s; } .lu.is-in .lu-card:nth-child(3) { transition-delay: .12s; } .lu.is-in .lu-card:nth-child(4) { transition-delay: .18s; } .lu.is-in .lu-card:nth-child(5) { transition-delay: .24s; } .lu.is-in .lu-card:nth-child(n+6) { transition-delay: .3s; } .lu-card.is-pop { animation: luPop .35s ease; } @keyframes luPop { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } } .lu-card:hover { box-shadow: 0 8px 22px rgba(23, 52, 110, .12); } .lu-c1 { --c: #d6342c; --bg: #fdeeed; } .lu-c2 { --c: #1f8a5b; --bg: #e9f6ef; } .lu-c3 { --c: #e08a00; --bg: #fff3df; } .lu-c4 { --c: #7a4fc9; --bg: #f2ecfb; } .lu-card__top { display: flex; align-items: center; gap: 10px; } .lu-card__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--bg); color: var(--c); } .lu-card__ic svg { width: 28px; height: 28px; stroke-width: 1.5; } .lu-card__bank { margin: 0; font-size: 12px; font-weight: 800; color: #6b7679; line-height: 1.4; } .lu-card__h { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 17px !important; font-weight: 900; line-height: 1.5; color: #1c2629; } .lu-card__h::before, .lu-card__h::after { display: none !important; } .lu-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; } .lu-card__tags span { padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--c); font-size: 11px; font-weight: 800; } .lu-more > summary { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; padding: 8px; border-radius: 10px; background: #f5f7fa; font-size: 13px; font-weight: 800; color: var(--c); cursor: pointer; list-style: none; } .lu-more[open] > summary { background: var(--bg); } .lu-more ul { margin: 10px 0 6px; padding-left: 1.2em; font-size: 13px; line-height: 1.75; animation: lrkIn .3s ease; } .lu-more ul li::marker { color: var(--c); } .lu-more__note { margin: 0 0 10px; font-size: 11px; line-height: 1.7; color: #6b7679; } .lu-more .lrk-btn--ghost { border-color: var(--c); color: var(--c) !important; } @media (max-width: 560px) { .lu-hero__h { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .lu-card { opacity: 1; transform: none; transition: none; } .lrk-bar i { transition: none; } } /* ===== 2.78.0 ランキング上部 TOP3 ===== */ .lrk-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .lrk-top > * { min-width: 0; } .lrk-top__col { --c: #24427a; display: grid; align-content: start; gap: 8px; padding: 14px 12px 12px; border-radius: 16px; background: #fff; border: 1px solid #e1e7ef; border-top: 5px solid var(--c); box-shadow: 0 4px 14px rgba(23, 52, 110, .07); } .lrk-top--hendo { --c: #d6342c; } .lrk-top--kotei10 { --c: #1f8a5b; } .lrk-top--zenki { --c: #24427a; } .lrk-top__h { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 0; font-size: 17px; font-weight: 900; color: var(--c); } .lrk-top__h small { padding: 1px 7px; border-radius: 999px; background: var(--c); color: #fff; font-size: 10px; letter-spacing: .08em; } .lrk-top__none { margin: 0; font-size: 12px; color: #6b7679; text-align: center; } .lrk-top__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .lrk-top__item { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid #edf0f4; border-radius: 10px; background: #f9fafc; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; } .lrk-top__item:hover { transform: translateY(-1px); border-color: var(--c); box-shadow: 0 4px 10px rgba(23, 52, 110, .1); } .lrk-top__item:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; } .lrk-top__rk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e3e8ee; font-size: 13px; font-weight: 900; color: #3c4043; } .is-r1 .lrk-top__rk { background: radial-gradient(circle at 30% 30%, #ffe680, #d9a514); color: #5a3d00; } .is-r2 .lrk-top__rk { background: radial-gradient(circle at 30% 30%, #f4f6f8, #a9b4bf); color: #2f3a44; } .is-r3 .lrk-top__rk { background: radial-gradient(circle at 30% 30%, #f6d2b5, #c27a45); color: #4a2408; } .lrk-top__nm { min-width: 0; font-size: 13px; font-weight: 800; line-height: 1.35; color: #1c2629; overflow-wrap: anywhere; } .lrk-top__rt { font-size: 11px; font-weight: 800; white-space: nowrap; } .lrk-top__rt b { font-size: 17px; font-weight: 900; color: #17346e; } .is-r1 .lrk-top__item { border-color: #f0d68a; background: #fffaeb; } .is-r1 .lrk-top__rt b { color: var(--c); font-size: 19px; } .lrk-item.is-flash { animation: lrkFlash 1.4s ease; } @keyframes lrkFlash { 0%, 40% { box-shadow: 0 0 0 4px rgba(240, 185, 58, .6); } 100% { box-shadow: none; } } @media (max-width: 760px) { .lrk-top { grid-template-columns: 1fr; } .lrk-top__item { padding: 9px 12px; } } /* ===== 2.79.0 TOP3を開くと条件を表示（1〜10位の一覧は削除） ===== */ .lrk { margin-top: 8px; } .lrk-top { align-items: start; } .lrk-top__d > summary { list-style: none; } .lrk-top__d > summary::-webkit-details-marker { display: none; } .lrk-top__item { grid-template-columns: 26px 1fr auto 10px; } .lrk-top__item .lrk-more__ic { width: 7px; height: 7px; color: #6b7679; } .lrk-top__d[open] > .lrk-top__item { border-color: var(--c); background: #fff; box-shadow: 0 4px 12px rgba(23, 52, 110, .1); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .lrk-top__d .lrk-body { padding: 10px; border: 1px solid var(--c); border-top: 0; border-radius: 0 0 10px 10px; background: #fff; gap: 10px; } .lrk-body__nm { margin: 0; font-size: 13px; font-weight: 900; color: var(--c); } .lrk-top__d .lrk-body dl > div { grid-template-columns: 1fr; gap: 2px; padding: 8px 10px; font-size: 12px; } .lrk-top__d .lrk-btn { padding: 7px 12px; font-size: 12px; } .lrk-top *, .lrk-top *::before, .lrk-top *::after { box-sizing: border-box; } .lrk-top__item { width: 100%; } /* ===== 2.80.0 土地相場ギャラリーのトップ画像 ===== */ .tc-topbn { margin: 0 0 20px; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(23, 52, 110, .12); line-height: 0; } .tc-topbn img { display: block; width: 100%; height: auto; } @media (max-width: 600px) { .tc-topbn { margin: 0 0 16px; border-radius: 12px; } } /* ===== 2.83.0 賃貸専用の建物（UR賃貸など） ===== */ .mm-rooms-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0; padding: 14px 16px; border: 2px solid #1f8a5b; border-radius: 14px; background: #eef8f2; } .mm-rooms-cta__t { margin: 0; font-size: 16px; font-weight: 800; color: #145c3c; } .mm-rooms-cta__t b { font-size: 20px; color: #c0261d; } .mm-rooms-cta__btns { display: flex; flex-wrap: wrap; gap: 8px; } .mm-rooms-cta .mb-btn--ghost, .mm-official a { background: #fff !important; color: #145c3c !important; border: 1.5px solid #1f8a5b !important; } .mm-official { margin: 10px 0 0; } .mm-official a { display: inline-block; padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; text-decoration: none !important; } /* ===== 2.90.0 町ごとの土地価格の推移 ===== */ .tg { display: grid; gap: 12px; margin: 0 0 32px; } .tg > * { min-width: 0; } .tg-note { margin: 0; padding: 10px 14px; border-left: 4px solid #e08a00; background: #fff8ec; font-size: 14px; line-height: 1.8; } .tg-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .tg-sum > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #e1e7ef; border-radius: 12px; background: #fff; } .tg-sum span { font-size: 12px; font-weight: 800; color: #6b7679; } .tg-sum b { font-size: 28px; font-weight: 900; color: #17346e; line-height: 1.1; } .tg-sum b.is-up { color: #c0261d; } .tg-sum b.is-down { color: #1f5fb0; } .tg-sum small { font-size: 12px; font-weight: 700; } .tg-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; font-weight: 700; } .tg-legend span::before { content: ""; display: inline-block; width: 18px; height: 4px; margin-right: 6px; border-radius: 2px; background: var(--c); vertical-align: 3px; } .tg-legend span.is-ref::before { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px); } .tg-chart { width: 100%; height: auto; display: block; } .tg-line { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; } .tg-line.is-ref { stroke-width: 2.5; stroke-dasharray: 6 5; } .tg-end text { font-size: 13px; font-weight: 900; paint-order: stroke; stroke: #fff; stroke-width: 4px; } .tg-replay { justify-self: start; } .tg-more > summary { cursor: pointer; font-size: 13px; font-weight: 800; color: #24427a; } .tg-table th { font-size: 11px; } @media (max-width: 560px) { .tg-chart .lh-ax { font-size: 19px; } .tg-end text { font-size: 21px; stroke-width: 6px; } .tg-line { stroke-width: 5; } .tg-sum b { font-size: 24px; } } .tg-sum > div { display: block; } .tg-sum span { display: block; margin-bottom: 2px; } .tg-sum b, .tg-sum small { display: inline; } .tg-sum small { margin-left: 3px; } /* ===== 2.91.0 マンションの設備アイコン ===== */ .mq { margin: 14px 0 18px; } .mq-h { margin: 0 0 8px !important; font-size: 15px; font-weight: 900; color: #17346e; } .mq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .mq-item { display: grid; justify-items: center; align-content: start; gap: 6px; margin: 0 !important; padding: 12px 6px 10px !important; border: 1px solid #dfe6ef; border-radius: 14px; background: #fff; text-align: center; transition: transform .2s, box-shadow .2s; } .mq-item::before { display: none !important; } .mq-item:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(23, 52, 110, .1); } .mq-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #eaf1fb; color: #24427a; } .mq-ic svg { width: 28px; height: 28px; stroke-width: 1.4; } .mq-t { font-size: 12px; font-weight: 800; line-height: 1.35; color: #1c2629; } .mq-pet .mq-ic, .mq-kids .mq-ic, .mq-garden .mq-ic { background: #e9f6ef; color: #1f8a5b; } .mq-station .mq-ic, .mq-tower .mq-ic, .mq-shop .mq-ic { background: #fff3df; color: #c46a00; } .mq-autolock .mq-ic, .mq-camera .mq-ic, .mq-seismic .mq-ic { background: #fdeeed; color: #c0261d; } @media (max-width: 560px) { .mq-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; } .mq-ic { width: 40px; height: 40px; } .mq-ic svg { width: 24px; height: 24px; } .mq-t { font-size: 11px; } } /* ===== 2.94.0 マンション売却（4つのプラン） ===== */ .mbk-hero { position: relative; padding: 28px 22px; border-radius: 20px; background: linear-gradient(135deg, #17346e, #2f5fb0); color: #fff; overflow: hidden; } .mbk-hero::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); } .mbk-hero > * { position: relative; } .mbk-hero__eye { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; opacity: .9; } .mbk-hero__h { margin: 8px 0 10px !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 26px; font-weight: 900; line-height: 1.4; color: #fff; } .mbk-hero__h::before, .mbk-hero__h::after { display: none !important; } .mbk-hero__h span { display: block; font-size: 17px; color: #ffd774; } .mbk-hero__lead { margin: 0 0 16px; font-size: 14px; line-height: 1.85; max-width: 40em; } .mbk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; } .mbk-plan { --c: #24427a; display: grid; align-content: start; gap: 10px; padding: 18px 16px; border: 1px solid #e1e7ef; border-top: 6px solid var(--c); border-radius: 16px; background: #fff; } .mbk-plan__name { margin: 0; font-size: 20px; font-weight: 900; color: var(--c); } .mbk-plan__catch { margin: 0; font-size: 14px; font-weight: 800; } .mbk-plan__rate { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #f7f9fc; } .mbk-plan__rate > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; } .mbk-plan__rate dd { margin: 0; } .mbk-stars { display: inline-flex; gap: 3px; } .mbk-stars i { width: 12px; height: 12px; border-radius: 50%; background: #dfe5ec; } .mbk-stars i.on { background: var(--c); } .mbk-plan__for { margin: 0; font-size: 13px; line-height: 1.7; } .mbk-plan__for b { display: block; font-size: 12px; color: var(--c); } .mbk-plan__pts { margin: 0 !important; padding-left: 1.2em !important; font-size: 13px; line-height: 1.75; } .mbk-plan__pts li::marker { color: var(--c); } .mbk-plan__note { margin: 0; font-size: 11px; line-height: 1.7; color: #6b7679; } .mbk-plan__btn { display: block; padding: 10px; border-radius: 999px; background: var(--c); color: #fff !important; font-size: 14px; font-weight: 800; text-align: center; text-decoration: none !important; } .mbk-link { display: grid; gap: 10px; margin: 28px 0 8px; padding: 20px 18px; border: 2px solid #17346e; border-radius: 16px; background: #f7f9fc; } .mbk-link__h { margin: 0; font-size: 18px; font-weight: 900; color: #17346e; } .mbk-link__lead { margin: 0; font-size: 14px; line-height: 1.8; } .mbk-link__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 8px; } .mbk-link__plans a { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #e1e7ef; border-left: 5px solid var(--c); border-radius: 10px; background: #fff; color: inherit !important; text-decoration: none !important; transition: transform .15s, box-shadow .15s; } .mbk-link__plans a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(23, 52, 110, .1); } .mbk-link__plans b { font-size: 14px; color: var(--c); } .mbk-link__plans small { font-size: 12px; color: #3c4043; } .mbk-link__btn { display: block; padding: 14px; border-radius: 999px; background: #c0261d; color: #fff !important; font-size: 16px; font-weight: 900; text-align: center; text-decoration: none !important; box-shadow: 0 6px 16px rgba(192, 38, 29, .25); } @media (max-width: 560px) { .mbk-hero__h { font-size: 22px; } } .mbk-plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); } .mbk-plan__pts { list-style: disc !important; } .mbk-plan__pts li { margin: 0 0 2px !important; } /* ===== 2.95.0 フォームへのリンク ===== */ #mbk-form, #satei-irai-form, #raiten-form, #kengaku-form, #kaitori-form { scroll-margin-top: 90px; } .mm-pill--sell { background: #c0261d !important; color: #fff !important; border-color: #c0261d !important; font-weight: 800; text-decoration: none !important; }