予約/問い合わせ
============================================================== */
body.page-clinic-detail .liff-page {
background: #fff !important;
padding-bottom: 84px; /* 固定CTA分の余白 */
}
/* ヒーロー画像 */
.liff-page .clinic-hero {
margin: 0;
aspect-ratio: 16 / 9;
background:
linear-gradient(180deg, #eef1f6 0%, #e0e5ee 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--liff-muted);
font-size: 14px;
font-weight: 500;
letter-spacing: .08em;
}
.liff-page .clinic-hero__ph {
color: var(--liff-ink-2);
opacity: .8;
}
/* クリニックヘッダー */
.liff-page .clinic-head {
padding: 20px 20px 14px;
}
.liff-page .clinic-head__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.liff-page .clinic-head__name {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
color: var(--liff-ink);
letter-spacing: -.005em;
flex: 1;
}
.liff-page .clinic-head__branch {
display: inline-block;
font-size: 15px;
font-weight: 600;
color: var(--liff-ink-2);
}
.liff-page .clinic-fav {
flex: 0 0 auto;
width: 36px; height: 36px;
border: 0;
background: transparent;
color: #d1d5db;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color .18s ease, transform .18s ease;
}
.liff-page .clinic-fav svg { width: 28px; height: 28px; }
.liff-page .clinic-fav.is-active { color: #ef4444; }
.liff-page .clinic-fav:hover { transform: scale(1.08); }
/* タグチップ */
.liff-page .clinic-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.liff-page .clinic-tag {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 4px;
background: var(--liff-primary-50);
border: 1px solid rgba(var(--liff-primary-rgb),.20);
color: var(--liff-primary);
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
line-height: 1;
}
/* タブ */
.liff-page .clinic-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--liff-line);
padding: 0 8px;
margin-top: 8px;
background: #fff;
position: sticky;
top: 0;
z-index: 4;
}
.liff-page .clinic-tab {
flex: 1;
padding: 14px 6px;
border: 0;
background: transparent;
font-size: 14px;
font-weight: 600;
color: var(--liff-muted);
cursor: pointer;
position: relative;
transition: color .18s ease;
font-family: inherit;
}
.liff-page .clinic-tab:hover { color: var(--liff-ink-2); }
.liff-page .clinic-tab.is-active {
color: var(--liff-primary);
}
.liff-page .clinic-tab.is-active::after {
content: "";
position: absolute;
left: 12px; right: 12px; bottom: -1px;
height: 3px;
background: var(--liff-primary);
border-radius: 3px 3px 0 0;
}
/* CRM tabs are radios + labels. Hide the radios; the labels are the tabs. */
.liff-page .clinic-tab-input,
.liff-page #clinic-detail-tab-overview,
.liff-page #clinic-detail-tab-hours,
.liff-page #clinic-detail-tab-access,
.liff-page #clinic-detail-tab-photos {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.liff-page label.clinic-tab {
text-align: center;
}
.liff-page label.clinic-tab.is-disabled {
opacity: .4;
cursor: default;
pointer-events: none;
}
.liff-page label.clinic-tab.is-disabled:hover {
color: var(--liff-muted);
}
.liff-page .cms-system-page-body-clinic > .clinic-panel {
display: none;
}
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-overview:checked) > [data-clinic-panel="overview"],
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-hours:checked) > [data-clinic-panel="hours"],
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-access:checked) > [data-clinic-panel="access"],
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-photos:checked) > [data-clinic-panel="photos"] {
display: block;
}
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-overview:checked) label[for="clinic-detail-tab-overview"],
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-hours:checked) label[for="clinic-detail-tab-hours"],
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-access:checked) label[for="clinic-detail-tab-access"],
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-photos:checked) label[for="clinic-detail-tab-photos"] {
color: var(--liff-primary);
}
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-overview:checked) label[for="clinic-detail-tab-overview"]::after,
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-hours:checked) label[for="clinic-detail-tab-hours"]::after,
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-access:checked) label[for="clinic-detail-tab-access"]::after,
.liff-page .cms-system-page-body-clinic:has(#clinic-detail-tab-photos:checked) label[for="clinic-detail-tab-photos"]::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 3px;
background: var(--liff-primary);
border-radius: 3px 3px 0 0;
}
/* パネル (概要タブ内容) */
.liff-page .clinic-panel {
padding: 24px 20px 40px;
}
.liff-page .clinic-block {
display: grid;
grid-template-columns: 68px 1fr;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid var(--liff-line-2, #f0f2f5);
}
.liff-page .clinic-block:first-child { padding-top: 4px; }
.liff-page .clinic-block__title {
margin: 0;
font-size: 13.5px;
font-weight: 700;
color: var(--liff-ink);
padding-top: 2px;
letter-spacing: .02em;
}
.liff-page .clinic-block__body {
margin: 0;
font-size: 13px;
line-height: 1.9;
color: var(--liff-ink-2);
}
/* 情報 (dl) */
.liff-page .clinic-info {
display: grid;
grid-template-columns: 68px 1fr;
gap: 4px 16px;
margin: 12px 0 0;
padding: 0;
}
.liff-page .clinic-info dt {
font-size: 11.5px;
font-weight: 600;
color: var(--liff-muted);
padding: 12px 0;
align-self: start;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: .02em;
}
.liff-page .clinic-info dd {
margin: 0;
padding: 12px 0;
font-size: 13px;
line-height: 1.7;
color: var(--liff-ink);
word-break: break-all;
align-self: start;
}
.liff-page .clinic-info dd a {
color: var(--liff-ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.liff-page .clinic-info dd a:hover { color: var(--liff-primary); }
/* dt 内 SNSアイコン (16px、モノトーンで統一) */
.liff-page .clinic-info__icon {
width: 16px; height: 16px;
display: inline-block;
background-color: var(--liff-ink-2);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.liff-page .clinic-info__icon[data-icon="hp"] {
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
}
.liff-page .clinic-info__icon[data-icon="x"] {
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
}
.liff-page .clinic-info__icon[data-icon="ig"] {
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
}
/* 外部リンク矢印 (ext) */
.liff-page .clinic-info .ext {
width: 14px; height: 14px;
display: inline-block;
background-color: var(--liff-muted);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
}
/* 固定CTAバー (予約 / 問い合わせ) */
.liff-page .clinic-cta-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: min(100%, 480px);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: #fff;
border-top: 1px solid var(--liff-line);
z-index: 30;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.liff-page .clinic-cta-bar .clinic-cta:only-child {
grid-column: 1 / -1;
}
.liff-page .clinic-cta {
padding: 18px 12px;
text-align: center;
text-decoration: none;
font-size: 15px;
font-weight: 700;
color: #fff !important;
letter-spacing: .04em;
transition: filter .15s ease;
}
.liff-page .clinic-cta:hover { filter: brightness(.95); }
.liff-page .clinic-cta--reserve { background: #22c55e; }
.liff-page .clinic-cta--inquiry { background: #ef4444; }
.liff-page .clinic-hours {
margin-top: 28px;
}
.liff-page .clinic-panel > .clinic-hours:first-child {
margin-top: 0;
}
.liff-page .clinic-hours__label {
margin: 0 0 10px;
font-size: 13px;
font-weight: 500;
color: var(--liff-ink);
}
.liff-page .clinic-hours__label + .clinic-hours__table {
margin-bottom: 0;
}
.liff-page .clinic-hours__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
line-height: 1.5;
color: var(--liff-ink);
}
.liff-page .clinic-hours__table th,
.liff-page .clinic-hours__table td {
border: 1px solid #e6e8ee;
padding: 11px 12px;
vertical-align: middle;
word-break: normal;
background: #fff;
}
.liff-page .clinic-hours__table th {
width: 3rem;
background: var(--liff-primary);
color: #fff;
font-weight: 600;
text-align: center;
}
.liff-page .clinic-hours__time {
width: 46%;
text-align: left;
}
.liff-page .clinic-hours__memo {
text-align: right;
}
.liff-page .clinic-hours__off {
text-align: center;
color: #ef4444;
font-weight: 600;
}
.liff-page .clinic-hours__note {
text-align: left;
}
.liff-page .clinic-hours__value {
margin: -2px 0 18px;
font-size: 13px;
font-weight: 700;
line-height: 1.7;
color: var(--liff-ink);
white-space: pre-wrap;
}
.liff-page .clinic-hours__table + .clinic-hours__label {
margin-top: 22px;
}
.liff-page .clinic-photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.liff-page .clinic-photos figure {
margin: 0;
}
.liff-page .clinic-photos img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: #e8eaee;
border-radius: 4px;
}
.liff-page .clinic-photos figcaption {
margin-top: 6px;
font-size: 12px;
line-height: 1.5;
color: var(--liff-muted);
}
/* ==============================================================
リストカード統一 — キャンペーン一覧と同じカード体裁
・予約一覧 / 来院履歴: 画像なし、テキスト左寄せ + 右シェブロン
・クーポン一覧 / マイクーポン: 左サムネイル + テキスト左寄せ + 右シェブロン
============================================================== */
.liff-page .p-4 a.d-block.text-decoration-none.text-body.border.rounded.p-3.mb-3 {
display: block !important;
position: relative;
text-align: left !important;
padding: 16px 44px 16px 18px !important;
margin: 0 0 14px !important;
border-radius: var(--liff-radius) !important;
border: 1px solid var(--liff-line-2) !important;
background: var(--liff-white);
box-shadow: var(--liff-shadow-1);
color: var(--liff-ink) !important;
min-height: 92px;
transition: box-shadow .18s ease, transform .12s ease;
}
.liff-page .p-4 a.d-block.text-decoration-none.text-body.border.rounded.p-3.mb-3:hover {
box-shadow: var(--liff-shadow-2);
transform: translateY(-1px);
}
.liff-page .p-4 a.d-block.text-decoration-none.text-body.border.rounded.p-3.mb-3 p {
text-align: left !important;
}
.liff-page .p-4 a.d-block.text-decoration-none.text-body.border.rounded.p-3.mb-3 .fw-bold {
font-size: 15px;
margin-bottom: 6px !important;
}
.liff-page .p-4 a.d-block.text-decoration-none.text-body.border.rounded.p-3.mb-3::before {
display: none !important;
}
.liff-page .p-4 a.d-block.text-decoration-none.text-body.border.rounded.p-3.mb-3::after,
.liff-page .mycoupon-card::after {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 9px; height: 9px;
border-right: 2px solid var(--liff-muted-2);
border-bottom: 2px solid var(--liff-muted-2);
transform: translateY(-50%) rotate(-45deg);
}
.liff-page .p-4 a.d-block.text-decoration-none.text-body.border.rounded.p-3.mb-3 .badge {
margin: 4px 0 0;
}
/* クーポン系カード */
.liff-page .mycoupon-card {
position: relative;
padding: 0 40px 0 0 !important;
gap: 16px;
border: 1px solid var(--liff-line-2) !important;
border-radius: var(--liff-radius) !important;
overflow: hidden;
min-height: 92px;
margin: 0 0 14px !important;
}
.liff-page .mycoupon-card:hover { transform: translateY(-1px); }
.liff-page .mycoupon-card__thumb {
flex: 0 0 100px !important;
width: 100px !important;
height: auto !important;
min-height: 92px;
border-radius: 0 !important;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.65), transparent 55%),
linear-gradient(135deg, var(--liff-primary-100) 0%, #ffe0c2 100%) !important;
}
body.variant-navy .liff-page .mycoupon-card__thumb {
background: linear-gradient(135deg, var(--liff-primary-100) 0%, #cfd7e5 100%) !important;
}
.liff-page .mycoupon-card__thumb:has(img) {
position: relative;
align-self: stretch;
height: auto !important;
min-height: 92px;
overflow: hidden;
background: none !important;
}
.liff-page .mycoupon-card__thumb img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.liff-page .mycoupon-card__body {
padding: 14px 0 !important;
text-align: left;
}
.liff-page .mycoupon-card__meta,
.liff-page .mycoupon-card__use { text-align: left !important; }
/* ==============================================================
予約TOP — 2x2 メニュー + 予約中カード
============================================================== */
.liff-page .rsv-top .mypage-grid { margin-bottom: 36px; }
.liff-page .rsv-top .mypage-tile { min-height: 116px; }
.mypage-tile[data-tile="rsv-new"] .mypage-tile__icon::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
}
.mypage-tile[data-tile="rsv-list"] .mypage-tile__icon::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
}
.liff-page .rsv-section-title {
margin: 0 0 14px;
font-size: 15px;
font-weight: 700;
text-align: center;
color: var(--liff-ink);
letter-spacing: .04em;
}
.liff-page .rsv-card {
position: relative;
background: var(--liff-white);
border: 1px solid var(--liff-line-2);
border-radius: var(--liff-radius);
box-shadow: var(--liff-shadow-1);
padding: 44px 18px 16px;
margin: 0 0 14px;
text-align: left;
}
.liff-page .rsv-card__status {
position: absolute;
top: 0; left: 0;
padding: 6px 16px;
background: #22c55e;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
border-radius: var(--liff-radius) 0 var(--liff-radius) 0;
line-height: 1.3;
}
.liff-page .rsv-card__date {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: var(--liff-ink);
}
.liff-page .rsv-card__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.liff-page .rsv-card__clinic {
margin: 0;
font-size: 14px;
color: var(--liff-ink-2);
}
.liff-page .rsv-card__menu {
margin: 6px 0 0;
font-size: 13px;
color: var(--liff-muted);
}
.liff-page .rsv-card__detail {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 7px 16px;
border-radius: 999px;
border: 1px solid var(--liff-line);
background: var(--liff-white);
font-size: 12px;
font-weight: 600;
color: var(--liff-ink-2) !important;
text-decoration: none !important;
}
.liff-page .rsv-card__detail:hover {
border-color: var(--liff-primary);
color: var(--liff-primary) !important;
}
/* ==============================================================
LINE Magazine List — 記事カード縦積み
============================================================== */
body.page-line-magazine-list .liff-page { background: #fff !important; }
.liff-page .magazine-list {
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 16px !important;
}
.liff-page .magazine-card {
display: flex !important;
align-items: stretch;
gap: 0;
background: var(--liff-white);
border: 1px solid var(--liff-line);
border-radius: 12px;
overflow: hidden;
text-decoration: none !important;
color: var(--liff-ink) !important;
box-shadow: 0 1px 2px rgba(16,24,40,.04);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.liff-page .magazine-card:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px -6px rgba(16,24,40,.15);
border-color: color-mix(in oklch, var(--liff-primary) 25%, var(--liff-line));
}
.liff-page .magazine-card__thumb {
flex: 0 0 40%;
margin: 0;
background: #d9e6f7;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
min-height: 120px;
aspect-ratio: 1 / 1;
}
.liff-page .magazine-card__thumb:has(img) {
position: relative;
overflow: hidden;
}
.liff-page .magazine-card__thumb img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.liff-page .magazine-card__thumb svg {
width: 56%;
height: auto;
opacity: .95;
}
.liff-page .magazine-card__body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 18px;
min-width: 0;
}
.liff-page .magazine-card__title {
margin: 0 0 12px;
font-size: 15px;
font-weight: 700;
color: var(--liff-ink);
letter-spacing: -.005em;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.liff-page .magazine-card__meta {
margin: 0;
font-size: 11.5px;
color: var(--liff-muted);
letter-spacing: .02em;
}
/* ==============================================================
LINE Magazine Detail — 1記事ページ
============================================================== */
body.page-line-magazine-detail .liff-page { background: #fff !important; }
.liff-page .magazine-article {
padding: 24px 20px 40px;
}
.liff-page .magazine-article__title {
margin: 4px 0 20px;
font-size: 20px;
font-weight: 700;
line-height: 1.5;
color: var(--liff-ink);
letter-spacing: -.005em;
text-align: center;
}
.liff-page .magazine-article__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 20px;
flex-wrap: wrap;
}
.liff-page .magazine-tag {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
background: #3ecfa8;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1;
}
.liff-page .magazine-article__date {
font-size: 11.5px;
color: var(--liff-muted);
letter-spacing: .02em;
}
.liff-page .magazine-article__lead {
margin: 0 0 20px;
font-size: 22px;
font-weight: 700;
color: var(--liff-ink);
line-height: 1.5;
letter-spacing: -.005em;
padding-bottom: 20px;
border-bottom: 1px solid var(--liff-line);
}
.liff-page .magazine-article__body {
margin: 0;
}
.liff-page .magazine-article__body p {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.9;
color: var(--liff-ink);
}
.liff-page .magazine-article__body p:last-child { margin-bottom: 0; }
@media (max-width: 400px) {
.liff-page, .message-page { max-width: 100%; }
.liff-page > div.p-4,
.liff-page > .p-4,
.liff-page .p-4.membership-page { max-width: 100%; padding: 20px 16px !important; }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
/* 2026-10-02 design delta */
/* 「問い合わせを終了する」— 送信の下段、誤タップ防止で大きく離す */
.cs-inquiry-close {
display: flex;
flex-direction: column;
align-items: center;
margin: 28px 0 4px;
padding-top: 20px;
border-top: 1px dashed var(--liff-line);
}
/* 「問い合わせを終了する」— 他画面のグレーボタン（確認する / 変更する 等のシルバー塗り）と同じ見た目。
テーマに関係なく常にこのグレー */
html body .liff-page .cs-inquiry-close .btn.btn-outline-secondary {
display: flex !important;
align-items: center;
justify-content: center;
max-width: 300px;
width: 100%;
min-height: 46px !important;
padding: 13px 20px !important;
border-radius: var(--liff-radius) !important;
background: linear-gradient(180deg, #d3dae4 0%, #b7c1d0 100%) !important;
border: 1px solid #a3aec0 !important;
color: #1f2328 !important;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
font-weight: 600 !important;
font-size: 14px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(107,122,145,.12) !important;
}
html body .liff-page .cs-inquiry-close .btn.btn-outline-secondary:hover {
background: linear-gradient(180deg, #c2cbd8 0%, #a3aec0 100%) !important;
border-color: #94a2b6 !important;
}
/* 注意書きと「問い合わせTOPへ戻る」の間を広めに */
.cs-inquiry-close { margin-bottom: 64px !important; }
.cs-inquiry-close + button.btn.btn-outline-secondary { margin-top: 0 !important; }
/* 終了ボタン下の注意書き */
.cs-inquiry-close__note {
max-width: 300px;
margin: 12px auto 0;
font-size: 11.5px;
line-height: 1.7;
color: var(--liff-muted);
text-align: left;
}
/* ==============================================================
クリニック一覧カード — クリニック一覧 / 予約作成のクリニック選択で共通
[画像 96px] [院名 + タグ群] [詳細]
============================================================== */
.liff-page .clinic-list { margin: 0; padding: 0; list-style: none; }
.liff-page .clinic-list-item {
display: grid;
grid-template-columns: 96px 1fr auto;
gap: 14px;
align-items: start;
padding: 18px 0;
border-bottom: 1px solid var(--liff-line);
}
.liff-page .clinic-list-item:first-child { padding-top: 4px; }
.liff-page .clinic-list-item__thumb {
width: 96px; height: 96px;
overflow: hidden;
border-radius: 6px;
background:
repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 6px, transparent 6px 12px),
#e9edf2;
display: flex; align-items: center; justify-content: center;
font-size: 10px; color: var(--liff-muted); letter-spacing: .04em;
font-family: ui-monospace, Menlo, monospace;
}
.liff-page .clinic-list-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.liff-page .clinic-list-item__name {
margin: 2px 0 10px;
font-size: 16px;
font-weight: 700;
color: var(--liff-ink);
line-height: 1.35;
}
.liff-page .clinic-list-item__tags {
display: flex; flex-wrap: wrap; gap: 6px;
}
.liff-page .clinic-list-item__tags span {
display: inline-flex; align-items: center;
padding: 5px 9px;
border: 1px solid var(--liff-line-2, #dfe4ea);
border-color: #dfe4ea;
border-radius: 4px;
background: #fff;
font-size: 11.5px;
color: var(--liff-ink-2);
line-height: 1.2;
}
.liff-page .clinic-list-item__action {
display: inline-flex; align-items: center; justify-content: center;
min-width: 64px;
padding: 8px 14px;
border: 1px solid #cfd6df;
border-radius: 6px;
background: #fff;
font-size: 13px;
font-weight: 600;
color: var(--liff-ink) !important;
text-decoration: none !important;
white-space: nowrap;
}
.liff-page .clinic-list-item__action:hover { background: var(--liff-bg); }
.liff-page .clinic-list-item__action--select {
background: #fff; border-color: var(--liff-ink); color: var(--liff-ink) !important;
font-weight: 700;
}
.liff-page .clinic-list-item__action--select:hover {
background: var(--liff-ink); color: #fff !important;
}
/* ==============================================================
予約作成のボトムシート（クリニック選択 / メニュー選択）
============================================================== */
.liff-page .rsv-sheet-overlay {
position: fixed; inset: 0;
background: rgba(15,23,42,.45);
z-index: 1080;
display: flex; align-items: flex-end; justify-content: center;
}
html body .liff-page .liff-search-modal { z-index: 1090 !important; }
.liff-page .rsv-sheet {
width: 100%; max-width: 480px;
max-height: 88vh; overflow-y: auto;
background: #fff;
border-radius: 14px 14px 0 0;
padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -8px 24px rgba(15,23,42,.18);
}
.liff-page .rsv-sheet__grip {
width: 44px; height: 4px; border-radius: 4px;
background: #d8dde4; margin: 4px auto 14px;
}
.liff-page .rsv-sheet__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.liff-page .rsv-sheet__title {
margin: 0 !important; padding: 0 !important;
font-size: 15px !important; font-weight: 700 !important;
color: var(--liff-ink); text-align: left !important;
}
.liff-page .rsv-sheet__title::before { display: none !important; }
.liff-page .rsv-sheet__close {
width: 36px; height: 36px; border-radius: 50%;
border: 0; background: #f1f4f8; color: var(--liff-muted);
font-size: 18px; line-height: 1; cursor: pointer;
}
/* --- 予約メニュー選択シート ---
ゆったりした縦リズム（各ステップ間 40px 前後）。
アクセントは控えめに：番号は線のバッジ、選択中のチップは黒（インク）塗り。 */
.liff-page .rsv-sheet {
padding: 12px 24px calc(48px + env(safe-area-inset-bottom, 0px)) !important;
}
.liff-page .rsv-sheet__grip { margin: 4px auto 18px !important; }
.liff-page .rsv-sheet__head {
margin-bottom: 32px !important;
padding-bottom: 18px;
border-bottom: 1px solid var(--liff-line);
}
.liff-page .rsv-sheet__title {
text-align: center !important; flex: 1;
font-size: 16px !important; letter-spacing: .04em;
}
.liff-page .rsv-sheet__head::before { content: ""; width: 36px; flex: 0 0 36px; }
.liff-page .rsv-step {
margin: 0 0 40px;
text-align: center;
}
.liff-page .rsv-step__label {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin: 0 0 18px;
font-size: 14px; font-weight: 700; letter-spacing: .08em;
color: var(--liff-ink);
}
.liff-page .rsv-step__num,
.liff-page .rsv-group-title > span {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: #fff; color: var(--liff-ink);
border: 1.5px solid var(--liff-ink);
font-size: 11.5px; font-weight: 700; letter-spacing: 0;
margin: 0;
}
/* 「選択肢」— 絞り込み条件のまとまりを示す中央の区切り見出し */
.liff-page .rsv-group-title {
display: flex; align-items: center; gap: 12px;
margin: 8px 0 20px;
font-size: 14px; font-weight: 700; letter-spacing: .08em;
color: var(--liff-ink);
}
.liff-page .rsv-group-title::before,
.liff-page .rsv-group-title::after {
content: ""; flex: 1; height: 1px; background: var(--liff-line);
}
.liff-page .rsv-filter {
background: #f6f7f9;
border-radius: 14px;
padding: 26px 16px 4px;
margin-bottom: 40px;
}
.liff-page .rsv-filter .rsv-step { margin-bottom: 26px; }
.liff-page .rsv-filter .rsv-step__label {
font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
color: var(--liff-muted); margin-bottom: 12px;
}
.liff-page .rsv-chips {
display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.liff-page .rsv-chip {
display: inline-flex; align-items: center;
padding: 12px 20px;
border: 1px solid #d5dbe3;
border-radius: 999px;
background: #fff;
font-size: 14px; font-weight: 600;
color: var(--liff-ink-2);
cursor: pointer;
line-height: 1.2;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.liff-page .rsv-chip:hover { border-color: var(--liff-ink); }
.liff-page .rsv-chip.is-active {
border-color: var(--liff-ink); background: var(--liff-ink); color: #fff;
}
/* メニュー候補 */
.liff-page .rsv-menu-head {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin: 0 0 18px;
font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--liff-ink);
}
.liff-page .rsv-menu-head small {
font-size: 12px; font-weight: 500; color: var(--liff-muted); letter-spacing: 0;
}
.liff-page .rsv-menu-list {
display: flex; flex-direction: column; gap: 10px;
border: 0; border-radius: 0; overflow: visible;
}
.liff-page .rsv-menu-option {
display: flex; align-items: center; gap: 12px;
width: 100%;
padding: 20px 18px;
border: 1px solid var(--liff-line);
border-radius: 12px;
background: #fff;
text-align: left;
cursor: pointer;
position: relative;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
transition: border-color .15s ease, background .15s ease;
}
.liff-page .rsv-menu-option:last-child { border-bottom: 1px solid var(--liff-line); }
.liff-page .rsv-menu-option:hover { border-color: var(--liff-ink); background: #fff; }
.liff-page .rsv-menu-option__name {
flex: 1;
font-size: 15px; font-weight: 600; color: var(--liff-ink); line-height: 1.45;
}
.liff-page .rsv-menu-option__time {
flex: 0 0 auto;
padding: 5px 11px;
border-radius: 999px;
background: #f1f4f8;
font-size: 12px; font-weight: 600; color: var(--liff-ink-2);
}
.liff-page .rsv-menu-option::after {
content: ""; flex: 0 0 auto;
width: 8px; height: 8px;
border-right: 2px solid #b6bfcb; border-bottom: 2px solid #b6bfcb;
transform: rotate(-45deg);
margin-left: 2px;
}
/* ==============================================================
予約メニュー選択 v3 — 質問形式（STEP 1〜3）で迷わず選べる構成
STEP1 科目: 説明付きの大きな2列カード
STEP2 条件: ラベル左 + セグメント右の行
STEP3 メニュー: 条件に合うものだけ、ラジオで1つ選択
下部: 選択中の内容 + 「このメニューで次へ」を固定
============================================================== */
.liff-page .rsvm-q { margin: 0 0 44px; }
.liff-page .rsvm-q__step {
margin: 0 0 6px;
font-size: 11px; font-weight: 700; letter-spacing: .18em;
color: #eb6100; text-align: center;
}
.liff-page .rsvm-q__title {
margin: 0 0 20px !important; padding: 0 !important;
font-size: 17px !important; font-weight: 700 !important;
line-height: 1.5; color: var(--liff-ink); text-align: center !important;
}
.liff-page .rsvm-q__title::before { display: none !important; }
.liff-page .rsvm-q__hint {
margin: -8px 0 16px; text-align: center;
font-size: 12.5px; color: var(--liff-muted);
}
.liff-page .rsvm-q__hint strong { color: var(--liff-ink); }
/* STEP1 科目カード */
.liff-page .rsvm-dept {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.liff-page .rsvm-dept__card {
position: relative;
display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
gap: 6px;
min-height: 96px;
padding: 18px 16px;
border: 1.5px solid var(--liff-line);
border-radius: 14px;
background: #fff;
text-align: left;
cursor: pointer;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.liff-page .rsvm-dept__card:hover { border-color: #c4ccd6; }
.liff-page .rsvm-dept__name {
font-size: 15px; font-weight: 700; color: var(--liff-ink); line-height: 1.35;
}
.liff-page .rsvm-dept__desc {
font-size: 11.5px; color: var(--liff-muted); line-height: 1.5;
}
.liff-page .rsvm-dept__card.is-active {
border-color: var(--liff-ink);
background: #fafbfc;
box-shadow: 0 0 0 1px var(--liff-ink) inset;
}
.liff-page .rsvm-dept__card.is-active::after {
content: "";
position: absolute; top: 12px; right: 12px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--liff-ink)
url("data:image/svg+xml;utf8,
") no-repeat center / 12px;
}
/* STEP2 条件 */
.liff-page .rsvm-cond {
border: 1px solid var(--liff-line);
border-radius: 14px;
overflow: hidden;
background: #fff;
}
/* 選択肢の数・文字数が増えても崩れないよう、
ラベルを上・選択肢を下に置き、選択肢は幅に合わせて自動で折り返す
（1行に入る数は画面幅で決まる。390px幅のスマホで1行3つ） */
.liff-page .rsvm-cond__row {
display: flex; flex-direction: column; align-items: stretch; gap: 10px;
padding: 16px 16px 18px;
border-bottom: 1px solid var(--liff-line);
}
.liff-page .rsvm-cond__row:last-child { border-bottom: 0; }
.liff-page .rsvm-cond__label {
font-size: 13.5px; font-weight: 600; color: var(--liff-ink);
text-align: left;
}
.liff-page .rsvm-seg {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
gap: 4px;
padding: 4px;
background: #f1f3f6;
border-radius: 12px;
}
.liff-page .rsvm-seg__btn {
min-width: 0;
min-height: 40px;
padding: 9px 10px;
border: 0; border-radius: 9px;
background: transparent;
font-size: 13.5px; font-weight: 600; color: var(--liff-muted);
cursor: pointer; line-height: 1.35;
white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
text-align: center;
transition: background .15s ease, color .15s ease;
}
.liff-page .rsvm-seg__btn.is-active {
background: #fff; color: var(--liff-ink);
box-shadow: 0 1px 3px rgba(15,23,42,.14);
}
/* STEP3 メニュー（ラジオ） */
.liff-page .rsvm-menu { display: flex; flex-direction: column; gap: 10px; }
.liff-page .rsvm-menu__item {
display: flex; align-items: center; gap: 14px;
width: 100%;
padding: 18px 16px;
border: 1.5px solid var(--liff-line);
border-radius: 14px;
background: #fff;
text-align: left; cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.liff-page .rsvm-menu__item:hover { border-color: #c4ccd6; }
.liff-page .rsvm-menu__radio {
flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
border: 2px solid #c4ccd6; background: #fff;
position: relative;
}
.liff-page .rsvm-menu__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.liff-page .rsvm-menu__name { font-size: 15px; font-weight: 700; color: var(--liff-ink); line-height: 1.4; }
.liff-page .rsvm-menu__meta { font-size: 12px; color: var(--liff-muted); line-height: 1.5; }
.liff-page .rsvm-menu__time {
flex: 0 0 auto;
padding: 5px 11px; border-radius: 999px;
background: #f1f3f6;
font-size: 12px; font-weight: 600; color: var(--liff-ink-2);
}
.liff-page .rsvm-menu__item.is-active {
border-color: var(--liff-ink);
background: #fafbfc;
}
.liff-page .rsvm-menu__item.is-active .rsvm-menu__radio { border-color: var(--liff-ink); }
.liff-page .rsvm-menu__item.is-active .rsvm-menu__radio::after {
content: ""; position: absolute; inset: 4px; border-radius: 50%;
background: var(--liff-ink);
}
/* 決定バー（シート下部に固定） */
.liff-page .rsvm-footer {
position: sticky; bottom: calc(-48px - env(safe-area-inset-bottom, 0px));
margin: 0 -24px calc(-48px - env(safe-area-inset-bottom, 0px));
padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid var(--liff-line);
box-shadow: 0 -6px 16px -8px rgba(15,23,42,.12);
z-index: 2;
}
.liff-page .rsvm-footer__summary {
margin: 0 0 12px; text-align: center;
font-size: 12.5px; color: var(--liff-muted);
}
.liff-page .rsvm-footer__summary strong { color: var(--liff-ink); }
.liff-page .rsvm-footer__btn {
max-width: none !important; margin: 0 !important;
min-height: 50px !important; font-size: 15px !important; font-weight: 700 !important;
}
/* シートを開いている状態では、背面の「トークルームへ戻る」を出さない
（内容が短い画面では中途半端な位置に浮いて見えるため） */
.liff-page:has(.rsv-sheet-overlay) > .d-block.text-center.my-5 { display: none !important; }
.liff-page:has(.rsv-sheet-overlay) { min-height: 100vh; }
/* 固定色ボタン — テーマ切替に左右されない色指定
.btn-line-green : LINEグリーン（送信・クーポンを見せる）
.btn-cusabi : CUSABIオレンジ（アンケートのスタート・新規でお問い合わせを開始する） */
/* テーマ（body.variant-*）の btn-primary 上書きより必ず強くなるよう、
html body を先頭に付けて詳細度を上げている */
html body .liff-page .btn.btn-line-green.btn-line-green.btn-line-green,
html body .liff-page .cs-inquiry-composer .btn.cs-inquiry-send.cs-inquiry-send.cs-inquiry-send {
background: #06C755 !important;
background-color: #06C755 !important;
background-image: none !important;
border-color: #06C755 !important;
color: #fff !important;
box-shadow: none !important;
}
html body .liff-page .btn.btn-line-green.btn-line-green.btn-line-green:hover,
html body .liff-page .cs-inquiry-composer .btn.cs-inquiry-send.cs-inquiry-send.cs-inquiry-send:hover {
background: #05B04B !important;
background-color: #05B04B !important;
background-image: none !important;
border-color: #05B04B !important;
}
html body .liff-page .btn.btn-cusabi.btn-cusabi.btn-cusabi {
background: #eb6100 !important;
background-color: #eb6100 !important;
background-image: none !important;
border-color: #eb6100 !important;
color: #fff !important;
box-shadow: 0 3px 8px -2px rgba(235,97,0,.24), 0 1px 2px rgba(235,97,0,.14) !important;
}
html body .liff-page .btn.btn-cusabi.btn-cusabi.btn-cusabi:hover {
background: #d55500 !important;
background-color: #d55500 !important;
background-image: none !important;
border-color: #d55500 !important;
}
/* 送信ボタン — 吹き出し・背景のピンク系と切り離し、LINEグリーンの単色に */
.cs-inquiry-composer .btn.cs-inquiry-send {
background: #06C755 !important;
background-color: #06C755 !important;
border-color: #06C755 !important;
color: #fff !important;
border-radius: 6px !important;
box-shadow: none !important;
font-weight: 700 !important;
letter-spacing: .06em;
min-height: 44px;
}
.cs-inquiry-composer .btn.cs-inquiry-send:hover {
background: #05B04B !important;
background-color: #05B04B !important;
border-color: #05B04B !important;
}
.cs-inquiry-clip {
width: 44px !important;
height: 44px !important;
border-radius: 4px !important; /* スクエア */
border: 1px solid var(--liff-line) !important;
background: var(--liff-bg) !important;
color: var(--liff-muted) !important;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
flex: 0 0 auto;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.cs-inquiry-clip::before {
content: "";
width: 20px; height: 20px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,
") no-repeat center/contain;
mask: url("data:image/svg+xml;utf8,
") no-repeat center/contain;
}
/* クーポン CTA は .btn ではない。ページ色が無いときだけ固定色 */
html body .liff-page .dx-cp-cta.coupon-cta-cusabi {
background: #eb6100 !important;
background-color: #eb6100 !important;
background-image: none !important;
border-color: #eb6100 !important;
color: #fff !important;
}
html body .liff-page .dx-cp-cta.coupon-cta-line {
background: #06C755 !important;
background-color: #06C755 !important;
background-image: none !important;
border-color: #06C755 !important;
color: #fff !important;
}
/* 問診の入力部品。回答カード .qr とは別に、1問ずつの画面で使う。 */
.liff-page .qform-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.6; color: #0B1A22; }
.liff-page .qform-no { display: inline-block; margin-right: 8px; padding: 3px 7px; border-radius: 6px; background: #1B3A5C; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1; vertical-align: 1px; white-space: nowrap; }
.liff-page .qform-req { display: inline-block; margin-left: 8px; padding: 3px 6px; border-radius: 5px; background: #FBEAE8; color: #D92D20; font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.liff-page .qform-note { margin: 0 0 12px; font-size: 12px; line-height: 1.65; color: #3D4B54; }
.liff-page .qform-note-strong { font-weight: 700; }
.liff-page .qform-opts { display: flex; flex-direction: column; gap: 8px; }
.liff-page .qform-radio-checks { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px 28px; }
.liff-page .qform-opt { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; border: 1px solid #E2E9ED; border-radius: 9px; background: #fff; color: #3D4B54; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.liff-page .qform-check { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.liff-page .qform-m { flex: 0 0 auto; width: 18px; height: 18px; position: relative; background: #fff; border: 1.6px solid #7C8C95; }
.liff-page .qform-single .qform-m { border-radius: 50%; }
.liff-page .qform-multi .qform-m { border-radius: 5px; }
.liff-page .qform-radio-checks .qform-m { border-radius: 5px; }
.liff-page .qform-m::after { content: ""; position: absolute; left: 4.2px; top: 5.8px; width: 6.4px; height: 3.2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(.5); opacity: 0; }
.liff-page .qform-opt:has(:checked) { background: #D9EBF7; border-color: #B3DAEF; color: #0B1A22; font-weight: 700; }
.liff-page .qform-opt:has(:checked) .qform-m { background: #2E7BAE; border-color: #2E7BAE; }
.liff-page .qform-opt:has(:checked) .qform-m::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.liff-page .qform-sub { margin: -2px 0 4px 30px; }
.liff-page .qform-fields { display: flex; flex-direction: column; gap: 11px; }
.liff-page .qform-field { display: block; margin: 0; }
.liff-page .qform-fl { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 500; color: #3D4B54; }
.liff-page .qform-input { display: block; width: 100%; border: 1px solid #C9D4DA; border-radius: 8px; background: #F7FAFB; padding: 8px 12px; font-size: 13.5px; color: #0B1A22; }
.liff-page .qform-input:focus { outline: none; border-color: #2E7BAE; background: #fff; }
.liff-page .qform-inline { display: flex; align-items: center; gap: 8px; }
.liff-page .qform-inline .qform-input { width: auto; min-width: 8rem; }
.liff-page .qform-unit, .liff-page .qform-hint { font-size: 11.5px; font-weight: 500; color: #3D4B54; }
.liff-page .qform-scale-labels { display: flex; justify-content: space-between; margin: 0; font-size: 11.5px; color: #3D4B54; }
.liff-page .qform + .qform { margin-top: 28px; }
/* 本文 CTA は CRM の色を使う。色が無い古い HTML だけ、テーマ色に戻す。 */
html body .liff-page a.cms-content-cta:not([style*="background-color"]) {
background: var(--liff-primary);
border-color: var(--liff-primary);
color: #fff;
}