ABC HTML Parts

COPY & PASTE PARTS FOR CLINIC

予約・誘導

予約ボタン・LINE誘導・料金表・FAQなど、行動につなげるパーツ

予約CTAボタンセット

サブテキスト付きの大きな角丸ボタンで、Web予約への導線を目立たせるパーツです。

コード・使い方を見る 
<div class="rc-wrap">
  <a class="rc-button" href="https://example.com/reserve" target="_blank" rel="noopener">
    <span class="rc-main">24時間WEB予約はこちら</span>
    <span class="rc-sub">みなと総合クリニック｜スマホから1分で予約完了</span>
  </a>
</div>
.rc-wrap {
  --rc-bg: #2f8f9d;   /* ボタンの背景色（医院のテーマ色に変更してください） */
  --rc-color: #ffffff; /* ボタンの文字色 */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.rc-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35em;
  width: 100%;
  box-sizing: border-box;
  padding: 1.2em 1.4em;
  background: var(--rc-bg);
  color: var(--rc-color);
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.rc-button:hover,
.rc-button:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
  opacity: .94;
}
.rc-button:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.rc-main {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.rc-sub {
  font-size: .78rem;
  font-weight: 500;
  opacity: .9;
  letter-spacing: .02em;
}
@media (max-width: 480px) {
  .rc-button { padding: 1em 1.1em; border-radius: 20px; }
  .rc-main { font-size: 1.02rem; }
  .rc-sub { font-size: .72rem; }
}

LINE・電話誘導ブロック

LINEと電話、2つの予約・相談導線を横並びで見せる誘導ブロックです。スマホでは縦に積み替わります。

コード・使い方を見る 
<div class="lp-wrap">
  <a class="lp-block lp-line" href="https://line.me/R/ti/p/@example" target="_blank" rel="noopener">
    <span class="lp-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="28" height="28"><path fill="currentColor" d="M12 2C6.48 2 2 5.69 2 10.2c0 3.08 2.09 5.77 5.19 7.24-.23.86-.83 3.08-.95 3.56-.15.6.22.59.46.43.19-.13 3.06-2.08 4.31-2.93.32.04.65.06.99.06 5.52 0 10-3.69 10-8.36S17.52 2 12 2z"/></svg>
    </span>
    <span class="lp-text">
      <span class="lp-label">LINEで予約・相談</span>
      <span class="lp-note">友だち追加してそのままメッセージでOK</span>
    </span>
  </a>
  <a class="lp-block lp-tel" href="tel:0300000000">
    <span class="lp-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="28" height="28"><path fill="currentColor" d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.9 21 3 13.1 3 3c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1.1L6.6 10.8z"/></svg>
    </span>
    <span class="lp-text">
      <span class="lp-label">お電話でのご予約</span>
      <span class="lp-number">03-0000-0000</span>
    </span>
  </a>
</div>
.lp-wrap {
  --lp-line: #06c755;   /* LINE側の背景色（LINEブランドカラー。変更非推奨） */
  --lp-tel: #2f8f9d;    /* 電話側の背景色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.lp-block {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2em 1.3em;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .1);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.lp-block:hover,
.lp-block:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
  opacity: .95;
}
.lp-line { background: var(--lp-line); }
.lp-tel { background: var(--lp-tel); }
.lp-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.lp-text {
  display: flex;
  flex-direction: column;
  gap: .25em;
  min-width: 0;
}
.lp-label {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.lp-note {
  font-size: .74rem;
  opacity: .92;
}
.lp-number {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .03em;
}
@media (max-width: 560px) {
  .lp-wrap { grid-template-columns: 1fr; }
  .lp-block { padding: 1em 1.1em; }
  .lp-number { font-size: 1.05rem; }
}

料金表（自費診療）

項目・内容・税込価格を並べた、自費診療向けのシンプルな料金テーブルです。

コード・使い方を見る 
<div class="pt-wrap">
  <table class="pt-table">
    <caption>自費診療 料金表</caption>
    <thead>
      <tr><th>項目</th><th>内容</th><th>税込価格</th></tr>
    </thead>
    <tbody>
      <tr>
        <td class="pt-item">ホワイトニング（片顎）</td>
        <td>オフィスホワイトニング1回</td>
        <td class="pt-price">¥11,000</td>
      </tr>
      <tr>
        <td class="pt-item">ジルコニアクラウン</td>
        <td>被せ物1本</td>
        <td class="pt-price">¥88,000</td>
      </tr>
      <tr>
        <td class="pt-item">マウスピース矯正相談</td>
        <td>初回カウンセリング</td>
        <td class="pt-price">¥3,300</td>
      </tr>
      <tr>
        <td class="pt-item">親知らず抜歯（自費）</td>
        <td>難抜歯1本</td>
        <td class="pt-price">¥16,500</td>
      </tr>
    </tbody>
  </table>
  <p class="pt-note">※価格は税込表示です</p>
</div>
.pt-wrap {
  --pt-accent: #2f8f9d; /* 見出し・価格文字のアクセントカラー（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 640px;
  margin: 0 auto;
}
.pt-table caption {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--pt-accent);
  text-align: center;
  letter-spacing: .08em;
  padding: .6em;
}
.pt-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.pt-table th,
.pt-table td {
  padding: .75em .9em;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  font-size: .9rem;
}
.pt-table thead th {
  background: var(--pt-accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: .03em;
}
.pt-table tbody tr:last-child td {
  border-bottom: none;
}
.pt-table tbody tr:nth-child(even) {
  background: #fafafa;
}
.pt-item {
  font-weight: 700;
  color: #1f2937;
}
.pt-price {
  font-weight: 700;
  color: var(--pt-accent);
  text-align: right;
  white-space: nowrap;
}
.pt-note {
  margin: .7em 0 0;
  font-size: .78rem;
  color: #6b7280;
  text-align: right;
}
@media (max-width: 480px) {
  .pt-table th,
  .pt-table td { padding: .6em .5em; font-size: .8rem; }
  .pt-table caption { font-size: 1rem; }
}

FAQアコーディオン

クリックで開閉するよくある質問パーツです。JS不要のdetails/summaryで作られているため、確実に動作します。

コード・使い方を見る 
<div class="fa-wrap">
  <h3 class="fa-title">よくあるご質問</h3>

  <details class="fa-item">
    <summary class="fa-question">
      <span class="fa-q-mark">Q</span>
      <span class="fa-q-text">予約なしでも受診できますか？</span>
      <span class="fa-icon" aria-hidden="true"></span>
    </summary>
    <div class="fa-answer">
      <p>当日の空き状況によっては受診いただけますが、お待ちいただく時間が長くなる場合がございます。事前のWeb予約またはお電話でのご予約がスムーズです。</p>
    </div>
  </details>

  <details class="fa-item">
    <summary class="fa-question">
      <span class="fa-q-mark">Q</span>
      <span class="fa-q-text">保険証を忘れた場合はどうすればいいですか？</span>
      <span class="fa-icon" aria-hidden="true"></span>
    </summary>
    <div class="fa-answer">
      <p>その日は自費診療（全額負担）でのお会計となります。後日保険証をご持参いただければ、差額を返金いたします。</p>
    </div>
  </details>

  <details class="fa-item">
    <summary class="fa-question">
      <span class="fa-q-mark">Q</span>
      <span class="fa-q-text">駐車場はありますか？</span>
      <span class="fa-icon" aria-hidden="true"></span>
    </summary>
    <div class="fa-answer">
      <p>提携駐車場を2台分ご用意しております。受付にて駐車券をお渡ししますので、ご利用の際はスタッフにお申し付けください。</p>
    </div>
  </details>

  <details class="fa-item">
    <summary class="fa-question">
      <span class="fa-q-mark">Q</span>
      <span class="fa-q-text">子供と一緒でも通院できますか？</span>
      <span class="fa-icon" aria-hidden="true"></span>
    </summary>
    <div class="fa-answer">
      <p>キッズスペースをご用意していますので、お子様と一緒に安心してご来院いただけます。ご不明な点はお気軽にスタッフへお尋ねください。</p>
    </div>
  </details>
</div>
.fa-wrap {
  --fa-accent: #2f8f9d; /* アクセントカラー（Qマーク・アイコンに使用、医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 680px;
  margin: 0 auto;
}
.fa-title {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fa-accent);
  text-align: center;
  letter-spacing: .08em;
}
.fa-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: .7rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  overflow: hidden;
}
.fa-item:last-child { margin-bottom: 0; }
.fa-question {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1em 1.2em;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #1f2937;
  transition: background-color .15s ease;
}
.fa-question::-webkit-details-marker { display: none; }
.fa-question:hover { background: #f9fafb; }
.fa-q-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fa-accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}
.fa-q-text {
  flex: 1;
  font-size: .94rem;
  line-height: 1.5;
}
.fa-icon {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
}
.fa-icon::before,
.fa-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--fa-accent);
  transform: translate(-50%, -50%);
  transition: opacity .15s ease;
}
.fa-icon::before {
  width: 14px;
  height: 2px;
}
.fa-icon::after {
  width: 2px;
  height: 14px;
}
.fa-item[open] .fa-icon::after {
  opacity: 0;
}
.fa-answer {
  padding: 0 1.2em 1.1em 3.5em;
}
.fa-answer p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.8;
  color: #4b5563;
}
@media (max-width: 480px) {
  .fa-question { padding: .9em 1em; gap: .55rem; }
  .fa-q-text { font-size: .88rem; }
  .fa-answer { padding: 0 1em 1em 2.7em; }
}

スマホ追従フッターCTA

スマホ幅で画面下部に固定表示される、電話・WEB予約・LINEの3ボタンバーです。少しスクロールすると自然にフェイン表示され、PC幅では表示されません。

コード・使い方を見る 
<div class="fc-wrap">
  <div class="fc-bar">
    <a class="fc-btn fc-tel" href="tel:0300000000">
      <span class="fc-icon" aria-hidden="true">📞</span>
      <span class="fc-label">電話で予約</span>
    </a>
    <a class="fc-btn fc-web" href="https://example.com/reserve" target="_blank" rel="noopener">
      <span class="fc-icon" aria-hidden="true">🖥️</span>
      <span class="fc-label">WEB予約</span>
    </a>
    <a class="fc-btn fc-line" href="https://line.me/R/ti/p/@example" target="_blank" rel="noopener">
      <span class="fc-icon" aria-hidden="true">💬</span>
      <span class="fc-label">LINE相談</span>
    </a>
  </div>
</div>
.fc-wrap {
  --fc-bg: #ffffff;   /* バー全体の背景色 */
  --fc-color: #2f8f9d; /* アイコン・文字の色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
.fc-wrap * { box-sizing: border-box; }

.fc-bar {
  display: none; /* PC幅では非表示。スマホ幅のみメディアクエリで表示 */
}

@media (max-width: 768px) {
  .fc-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: var(--fc-bg);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .12);
    padding: .4em .3em;
    padding-bottom: calc(.4em + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }
  .fc-bar.fc-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .fc-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15em;
    margin: 0 .25em;
    padding: .5em .2em;
    border-radius: 10px;
    text-decoration: none;
    color: var(--fc-color);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    background: #f3f4f6;
    transition: background-color .15s ease, opacity .15s ease;
  }
  .fc-btn:active { opacity: .8; }
  .fc-btn.fc-web {
    background: var(--fc-color);
    color: #fff;
  }
  .fc-icon {
    font-size: 1.15rem;
    line-height: 1;
  }
  .fc-label { white-space: nowrap; }
}

@media (max-width: 375px) {
  .fc-btn { font-size: .66rem; padding: .45em .15em; }
  .fc-icon { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-bar {
    transition: none;
  }
}
(function () {
  var SHOW_AFTER_PX = 120;
  var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function FloatingCta(root) {
    this.bar = root.querySelector('.fc-bar');
    if (!this.bar) return;

    if (reduceMotion) {
      this.bar.classList.add('fc-visible');
      return;
    }

    this.onScroll = this.onScroll.bind(this);
    window.addEventListener('scroll', this.onScroll, { passive: true });
    this.onScroll();
  }

  FloatingCta.prototype.onScroll = function () {
    if (window.scrollY > SHOW_AFTER_PX) {
      this.bar.classList.add('fc-visible');
    } else {
      this.bar.classList.remove('fc-visible');
    }
  };

  document.querySelectorAll('.fc-wrap').forEach(function (root) {
    new FloatingCta(root);
  });
})();

お問い合わせフォーム

お名前・メール・電話・お問い合わせ内容を入力できる、見た目のみの静的お問い合わせフォームです。

コード・使い方を見る 
<div class="cf-wrap">
  <h3 class="cf-title">お問い合わせ</h3>
  <p class="cf-lead">ご不明な点やご相談は、下記フォームよりお気軽にお問い合わせください。</p>
  <form class="cf-form" action="">
    <label class="cf-field">
      <span class="cf-label">お名前<span class="cf-required">必須</span></span>
      <input class="cf-input" type="text" name="name" placeholder="山田 太郎" required>
    </label>
    <label class="cf-field">
      <span class="cf-label">メールアドレス<span class="cf-required">必須</span></span>
      <input class="cf-input" type="email" name="email" placeholder="[email protected]" required>
    </label>
    <label class="cf-field">
      <span class="cf-label">電話番号<span class="cf-optional">任意</span></span>
      <input class="cf-input" type="tel" name="tel" placeholder="03-0000-0000">
    </label>
    <label class="cf-field">
      <span class="cf-label">お問い合わせ内容<span class="cf-required">必須</span></span>
      <textarea class="cf-textarea" name="message" rows="5" placeholder="お問い合わせ内容をご記入ください" required></textarea>
    </label>
    <p class="cf-note">みなと総合クリニック（東京都港区0-0-0／電話 03-0000-0000）</p>
    <button class="cf-submit" type="submit">送信する</button>
  </form>
</div>
.cf-wrap {
  --cf-accent: #2f8f9d; /* ボタン・フォーカス枠の色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
}
.cf-wrap * { box-sizing: border-box; }
.cf-title {
  margin: 0 0 .5em;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2d3339;
  letter-spacing: .06em;
}
.cf-lead {
  margin: 0 0 1.6em;
  text-align: center;
  font-size: .88rem;
  line-height: 1.8;
  color: #6b7280;
}
.cf-form {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 1.8em 1.6em;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.cf-field {
  display: block;
  margin-bottom: 1.2em;
}
.cf-field:last-of-type {
  margin-bottom: 1.4em;
}
.cf-label {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-bottom: .5em;
  font-size: .88rem;
  font-weight: 700;
  color: #2d3339;
}
.cf-required,
.cf-optional {
  font-size: .68rem;
  font-weight: 700;
  padding: .15em .5em;
  border-radius: 4px;
  line-height: 1.5;
}
.cf-required {
  color: #fff;
  background: #e0685f;
}
.cf-optional {
  color: #6b7280;
  background: #f3f4f6;
}
.cf-input,
.cf-textarea {
  display: block;
  width: 100%;
  padding: .75em .9em;
  font-size: .92rem;
  font-family: inherit;
  color: #2d3339;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cf-input::placeholder,
.cf-textarea::placeholder {
  color: #b0b6bd;
}
.cf-textarea {
  min-height: 7.5em;
  line-height: 1.7;
  resize: vertical;
}
.cf-input:focus,
.cf-textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 20%, transparent);
}
.cf-note {
  margin: 0 0 1.4em;
  font-size: .76rem;
  line-height: 1.7;
  color: #9aa1a9;
  text-align: center;
}
.cf-submit {
  display: block;
  width: 100%;
  padding: .9em 1em;
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: var(--cf-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: .05em;
  transition: opacity .15s ease, transform .15s ease;
}
.cf-submit:hover {
  opacity: .9;
}
.cf-submit:active {
  transform: translateY(1px);
}
.cf-submit:focus-visible {
  outline: 2px solid var(--cf-accent);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .cf-form { padding: 1.4em 1.1em; }
  .cf-title { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-input,
  .cf-textarea,
  .cf-submit {
    transition: none;
  }
}

キャンペーン締切カウントダウン

指定した日時までの残り日・時間・分・秒を表示し、締切後は自動で「受付終了」に切り替わるカウントダウンパーツです。

コード・使い方を見る 
<div class="cd-wrap" data-deadline="2026-08-31T18:00:00">
  <p class="cd-eyebrow">期間限定キャンペーン</p>
  <p class="cd-title">初診料無料キャンペーン 受付終了まで</p>
  <div class="cd-clock" role="timer" aria-live="off">
    <div class="cd-unit">
      <span class="cd-num" data-cd-days>00</span>
      <span class="cd-label">日</span>
    </div>
    <div class="cd-unit">
      <span class="cd-num" data-cd-hours>00</span>
      <span class="cd-label">時間</span>
    </div>
    <div class="cd-unit">
      <span class="cd-num" data-cd-minutes>00</span>
      <span class="cd-label">分</span>
    </div>
    <div class="cd-unit">
      <span class="cd-num" data-cd-seconds>00</span>
      <span class="cd-label">秒</span>
    </div>
  </div>
  <p class="cd-ended" hidden>受付終了</p>
  <a class="cd-button" href="https://example.com/reserve" target="_blank" rel="noopener">今すぐWEB予約する</a>
</div>
.cd-wrap {
  --cd-bg: #2f8f9d;    /* 背景色（医院のテーマ色に変更してください） */
  --cd-accent: #e0685f; /* ボタンの背景色 */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1.8em 1.6em;
  background: var(--cd-bg);
  border-radius: 16px;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.cd-wrap * { box-sizing: border-box; }

.cd-eyebrow {
  margin: 0 0 .4em;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .85;
}
.cd-title {
  margin: 0 0 1.1em;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
}
.cd-clock {
  display: flex;
  justify-content: center;
  gap: .5em;
  margin-bottom: 1.3em;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  min-width: 3.6em;
  padding: .55em .3em;
  background: rgba(255, 255, 255, .16);
  border-radius: 10px;
}
.cd-num {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.cd-label {
  font-size: .68rem;
  opacity: .88;
}
.cd-ended {
  margin: 0 0 1.3em;
  padding: .7em;
  font-size: 1rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .16);
  border-radius: 10px;
}
.cd-button {
  display: inline-block;
  width: 100%;
  padding: .9em 1.2em;
  background: var(--cd-accent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .03em;
  transition: transform .18s ease, opacity .18s ease;
}
.cd-button:hover,
.cd-button:focus-visible {
  transform: translateY(-3px);
  opacity: .92;
}
.cd-button:active {
  transform: translateY(-1px);
}

@media (max-width: 420px) {
  .cd-wrap { padding: 1.4em 1.1em; }
  .cd-title { font-size: .96rem; }
  .cd-unit { min-width: 3.1em; padding: .5em .2em; }
  .cd-num { font-size: 1.25rem; }
}
(function () {
  var SELECTOR = '.cd-wrap';
  var TICK_MS = 1000;

  function pad(n) {
    return String(n).padStart(2, '0');
  }

  function CountdownCampaign(root) {
    this.root = root;
    var deadlineAttr = root.getAttribute('data-deadline');
    this.deadline = deadlineAttr ? new Date(deadlineAttr).getTime() : NaN;

    this.clock = root.querySelector('.cd-clock');
    this.ended = root.querySelector('.cd-ended');
    this.daysEl = root.querySelector('[data-cd-days]');
    this.hoursEl = root.querySelector('[data-cd-hours]');
    this.minutesEl = root.querySelector('[data-cd-minutes]');
    this.secondsEl = root.querySelector('[data-cd-seconds]');

    this.timerId = null;

    if (isNaN(this.deadline)) { this.showEnded(); return; }

    this.tick = this.tick.bind(this);
    this.tick();
    this.timerId = window.setInterval(this.tick, TICK_MS);
  }

  CountdownCampaign.prototype.showEnded = function () {
    if (this.clock) this.clock.hidden = true;
    if (this.ended) this.ended.hidden = false;
    if (this.timerId !== null) {
      window.clearInterval(this.timerId);
      this.timerId = null;
    }
  };

  CountdownCampaign.prototype.tick = function () {
    var remaining = this.deadline - Date.now();

    if (remaining <= 0) {
      this.showEnded();
      return;
    }

    var totalSeconds = Math.floor(remaining / 1000);
    var days = Math.floor(totalSeconds / 86400);
    var hours = Math.floor((totalSeconds % 86400) / 3600);
    var minutes = Math.floor((totalSeconds % 3600) / 60);
    var seconds = totalSeconds % 60;

    if (this.daysEl) this.daysEl.textContent = pad(days);
    if (this.hoursEl) this.hoursEl.textContent = pad(hours);
    if (this.minutesEl) this.minutesEl.textContent = pad(minutes);
    if (this.secondsEl) this.secondsEl.textContent = pad(seconds);
  };

  document.querySelectorAll(SELECTOR).forEach(function (root) {
    new CountdownCampaign(root);
  });
})();

初診・紹介クーポンカード

点線の切り取り線でチケット風に見せる、初診料割引やご紹介特典のクーポンカードです。

コード・使い方を見る 
<div class="cp-wrap">
  <div class="cp-ticket">
    <div class="cp-main">
      <p class="cp-eyebrow">初診・ご紹介クーポン</p>
      <p class="cp-title">初診料 <span class="cp-highlight">0円</span></p>
      <p class="cp-desc">ご家族・お友達のご紹介、または当院ホームページをご覧の方限定です。</p>
      <ul class="cp-conditions">
        <li>ご紹介の方・Web予約の方が対象です</li>
        <li>他の割引との併用はできません</li>
        <li>お会計時にスタッフへ画面をご提示ください</li>
      </ul>
    </div>
    <div class="cp-stub">
      <p class="cp-stub-label">有効期限</p>
      <p class="cp-stub-date">2026年8月31日<br>まで</p>
    </div>
  </div>
  <a class="cp-button" href="https://example.com/reserve" target="_blank" rel="noopener">このクーポンで予約する</a>
</div>
.cp-wrap {
  --cp-accent: #2f8f9d; /* 見出し・ボタンの色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
}
.cp-wrap * { box-sizing: border-box; }

.cp-ticket {
  display: flex;
  background: #fff;
  border: 2px dashed var(--cp-accent);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .07);
}
.cp-main {
  flex: 1;
  padding: 1.4em 1.5em;
  min-width: 0;
}
.cp-eyebrow {
  margin: 0 0 .4em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cp-accent);
}
.cp-title {
  margin: 0 0 .5em;
  font-size: 1.3rem;
  font-weight: 700;
  color: #2d3339;
}
.cp-highlight {
  color: var(--cp-accent);
  font-size: 1.5rem;
}
.cp-desc {
  margin: 0 0 .9em;
  font-size: .82rem;
  line-height: 1.7;
  color: #6b7280;
}
.cp-conditions {
  margin: 0;
  padding: 0 0 0 1.1em;
  font-size: .76rem;
  line-height: 1.9;
  color: #6b7280;
}
.cp-stub {
  flex: none;
  width: 8em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: 1em .6em;
  background: #f3f7f8;
  border-left: 2px dashed var(--cp-accent);
  text-align: center;
}
.cp-stub-label {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  color: var(--cp-accent);
  letter-spacing: .05em;
}
.cp-stub-date {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.5;
  color: #2d3339;
}
.cp-button {
  display: block;
  width: 100%;
  margin-top: 1em;
  padding: .9em 1.2em;
  background: var(--cp-accent);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .03em;
  transition: transform .18s ease, opacity .18s ease;
}
.cp-button:hover,
.cp-button:focus-visible {
  transform: translateY(-3px);
  opacity: .92;
}
.cp-button:active {
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .cp-ticket { flex-direction: column; }
  .cp-stub {
    width: auto;
    flex-direction: row;
    justify-content: center;
    gap: .6em;
    border-left: none;
    border-top: 2px dashed var(--cp-accent);
  }
  .cp-stub-date { text-align: left; }
  .cp-main { padding: 1.2em 1.2em .9em; }
}

3ステップ予約導線

予約から診察までの流れを3つの番号付きステップで示し、最後にCTAボタンへつなげる誘導パーツです。

コード・使い方を見る 
<div class="st-wrap">
  <p class="st-title">3ステップで予約完了</p>
  <div class="st-flow">
    <div class="st-step">
      <span class="st-num">1</span>
      <p class="st-label">WEBまたはお電話で予約</p>
      <p class="st-desc">24時間いつでもWEBから、お急ぎの方はお電話でも承ります。</p>
    </div>
    <span class="st-arrow" aria-hidden="true">›</span>
    <div class="st-step">
      <span class="st-num">2</span>
      <p class="st-label">ご来院・受付</p>
      <p class="st-desc">予約時間の5分前を目安にお越しください。保険証をご持参ください。</p>
    </div>
    <span class="st-arrow" aria-hidden="true">›</span>
    <div class="st-step">
      <span class="st-num">3</span>
      <p class="st-label">診察・ご案内</p>
      <p class="st-desc">医師が丁寧に診察いたします。お薬や次回予約もその場でご案内します。</p>
    </div>
  </div>
  <a class="st-button" href="https://example.com/reserve" target="_blank" rel="noopener">今すぐWEB予約する</a>
</div>
.st-wrap {
  --st-accent: #2f8f9d; /* 番号・ボタンの色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 780px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
}
.st-wrap * { box-sizing: border-box; }

.st-title {
  margin: 0 0 1.4em;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2d3339;
  letter-spacing: .06em;
}
.st-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .6em;
  margin-bottom: 1.6em;
}
.st-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  min-width: 0;
  padding: 1.3em 1em;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.st-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  background: var(--st-accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 50%;
}
.st-label {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: #2d3339;
}
.st-desc {
  margin: 0;
  font-size: .76rem;
  line-height: 1.7;
  color: #6b7280;
}
.st-arrow {
  flex: none;
  align-self: center;
  margin-top: 1.5em;
  font-size: 1.6rem;
  font-weight: 700;
  color: #d1d5db;
}
.st-button {
  display: inline-block;
  padding: .9em 2.4em;
  background: var(--st-accent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .03em;
  transition: transform .18s ease, opacity .18s ease;
}
.st-button:hover,
.st-button:focus-visible {
  transform: translateY(-3px);
  opacity: .92;
}
.st-button:active {
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .st-flow {
    flex-direction: column;
    align-items: stretch;
  }
  .st-arrow {
    margin-top: 0;
    transform: rotate(90deg);
  }
}
@media (max-width: 375px) {
  .st-title { font-size: 1.05rem; }
  .st-step { padding: 1.1em .8em; }
}

LINE友だち追加QRブロック

QRコードとボタンを並べて見せる、LINE公式アカウントの友だち追加を促すブロックです。

コード・使い方を見る 
<div class="lq-wrap">
  <div class="lq-qr">
    <img src="https://placehold.co/160x160/ffffff/06c755?text=QR" alt="みなと総合クリニック公式LINE QRコード" width="160" height="160">
  </div>
  <div class="lq-body">
    <p class="lq-eyebrow">友だち追加</p>
    <p class="lq-title">公式LINEで予約・ご相談ができます</p>
    <p class="lq-desc">QRコードを読み取るか、下のボタンから友だち追加してください。そのままメッセージで予約や質問が可能です。</p>
    <a class="lq-button" href="https://line.me/R/ti/p/@example" target="_blank" rel="noopener">
      <span class="lq-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 2C6.48 2 2 5.69 2 10.2c0 3.08 2.09 5.77 5.19 7.24-.23.86-.83 3.08-.95 3.56-.15.6.22.59.46.43.19-.13 3.06-2.08 4.31-2.93.32.04.65.06.99.06 5.52 0 10-3.69 10-8.36S17.52 2 12 2z"/></svg>
      </span>
      LINE友だち追加
    </a>
  </div>
</div>
.lq-wrap {
  --lq-line: #06c755; /* LINEブランドカラー（変更非推奨） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1.6em;
  padding: 1.6em;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .06);
}
.lq-wrap * { box-sizing: border-box; }

.lq-qr {
  flex: none;
  width: 160px;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.lq-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lq-body {
  flex: 1;
  min-width: 0;
}
.lq-eyebrow {
  margin: 0 0 .3em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--lq-line);
}
.lq-title {
  margin: 0 0 .5em;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2d3339;
  line-height: 1.5;
}
.lq-desc {
  margin: 0 0 1em;
  font-size: .8rem;
  line-height: 1.8;
  color: #6b7280;
}
.lq-button {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .75em 1.5em;
  background: var(--lq-line);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .02em;
  transition: transform .18s ease, opacity .18s ease;
}
.lq-button:hover,
.lq-button:focus-visible {
  transform: translateY(-3px);
  opacity: .92;
}
.lq-button:active {
  transform: translateY(-1px);
}
.lq-icon {
  display: flex;
  align-items: center;
}

@media (max-width: 480px) {
  .lq-wrap {
    flex-direction: column;
    text-align: center;
    padding: 1.4em 1.2em;
  }
  .lq-qr { width: 140px; height: 140px; }
  .lq-title { font-size: .98rem; }
}

自費メニュー プランカード

自費診療のプランを3枚のカードで比較でき、おすすめプランにはバッジが付くカード型の料金パーツです。

コード・使い方を見る 
<div class="pp-wrap">
  <div class="pp-card">
    <p class="pp-name">ライトプラン</p>
    <p class="pp-price"><span class="pp-yen">¥</span>3,300<span class="pp-unit">／回</span></p>
    <ul class="pp-list">
      <li>カウンセリング（20分）</li>
      <li>基本検査一式</li>
      <li>次回予約サポート</li>
    </ul>
    <a class="pp-button" href="https://example.com/reserve" target="_blank" rel="noopener">このプランで予約</a>
  </div>

  <div class="pp-card pp-recommended">
    <p class="pp-badge">おすすめ</p>
    <p class="pp-name">スタンダードプラン</p>
    <p class="pp-price"><span class="pp-yen">¥</span>8,800<span class="pp-unit">／回</span></p>
    <ul class="pp-list">
      <li>カウンセリング（40分）</li>
      <li>精密検査一式</li>
      <li>お薬・処置込み</li>
      <li>次回予約サポート</li>
    </ul>
    <a class="pp-button" href="https://example.com/reserve" target="_blank" rel="noopener">このプランで予約</a>
  </div>

  <div class="pp-card">
    <p class="pp-name">プレミアムプラン</p>
    <p class="pp-price"><span class="pp-yen">¥</span>16,500<span class="pp-unit">／回</span></p>
    <ul class="pp-list">
      <li>カウンセリング（60分）</li>
      <li>精密検査一式＋画像診断</li>
      <li>お薬・処置込み</li>
      <li>アフターフォロー面談</li>
    </ul>
    <a class="pp-button" href="https://example.com/reserve" target="_blank" rel="noopener">このプランで予約</a>
  </div>
</div>
.pp-wrap {
  --pp-accent: #2f8f9d; /* 価格・ボタンの色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2em;
  align-items: stretch;
}
.pp-wrap * { box-sizing: border-box; }

.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6em 1.4em;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.pp-recommended {
  border: 2px solid var(--pp-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}
.pp-badge {
  position: absolute;
  top: -.9em;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .3em 1em;
  background: var(--pp-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: .05em;
  white-space: nowrap;
}
.pp-name {
  margin: .3em 0 .6em;
  font-size: 1rem;
  font-weight: 700;
  color: #2d3339;
}
.pp-price {
  margin: 0 0 1.1em;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--pp-accent);
}
.pp-yen {
  font-size: 1.05rem;
  font-weight: 700;
  margin-right: .05em;
}
.pp-unit {
  font-size: .74rem;
  font-weight: 500;
  color: #6b7280;
  margin-left: .1em;
}
.pp-list {
  flex: 1;
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
  text-align: left;
}
.pp-list li {
  position: relative;
  padding: .4em 0 .4em 1.3em;
  font-size: .82rem;
  line-height: 1.6;
  color: #4b5563;
  border-bottom: 1px solid #f3f4f6;
}
.pp-list li:last-child { border-bottom: none; }
.pp-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--pp-accent);
  font-weight: 700;
}
.pp-button {
  display: block;
  padding: .8em 1em;
  background: var(--pp-accent);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .02em;
  transition: transform .18s ease, opacity .18s ease;
}
.pp-button:hover,
.pp-button:focus-visible {
  transform: translateY(-3px);
  opacity: .92;
}
.pp-button:active {
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .pp-wrap { grid-template-columns: 1fr; }
  .pp-recommended { order: -1; }
}
@media (max-width: 375px) {
  .pp-card { padding: 1.4em 1.1em; }
  .pp-price { font-size: 1.6rem; }
}

折り返し予約リクエストフォーム

お名前・電話番号・希望の折り返し時間帯を入力できる、見た目のみの静的な折り返しリクエストフォームです。

コード・使い方を見る 
<div class="cr-wrap">
  <h3 class="cr-title">折り返しのご予約リクエスト</h3>
  <p class="cr-lead">お名前とご連絡先をご入力いただければ、スタッフより折り返しお電話にてご予約を承ります。</p>
  <form class="cr-form" action="">
    <label class="cr-field">
      <span class="cr-label">お名前<span class="cr-required">必須</span></span>
      <input class="cr-input" type="text" name="name" placeholder="山田 太郎" required>
    </label>
    <label class="cr-field">
      <span class="cr-label">お電話番号<span class="cr-required">必須</span></span>
      <input class="cr-input" type="tel" name="tel" placeholder="03-0000-0000" required>
    </label>
    <label class="cr-field">
      <span class="cr-label">ご希望の折り返し時間帯<span class="cr-optional">任意</span></span>
      <select class="cr-select" name="preferred_time">
        <option value="">指定なし</option>
        <option value="morning">午前（9:00〜12:00）</option>
        <option value="afternoon">午後（13:00〜17:00）</option>
        <option value="evening">夕方（17:00〜19:00）</option>
      </select>
    </label>
    <p class="cr-note">みなと総合クリニック（東京都港区0-0-0／電話 03-0000-0000）</p>
    <button class="cr-submit" type="submit">折り返しをリクエストする</button>
  </form>
</div>
.cr-wrap {
  --cr-accent: #2f8f9d; /* ボタン・フォーカス枠の色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
}
.cr-wrap * { box-sizing: border-box; }

.cr-title {
  margin: 0 0 .5em;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2d3339;
  letter-spacing: .05em;
}
.cr-lead {
  margin: 0 0 1.5em;
  text-align: center;
  font-size: .84rem;
  line-height: 1.8;
  color: #6b7280;
}
.cr-form {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 1.7em 1.6em;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.cr-field {
  display: block;
  margin-bottom: 1.1em;
}
.cr-field:last-of-type {
  margin-bottom: 1.3em;
}
.cr-label {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-bottom: .5em;
  font-size: .86rem;
  font-weight: 700;
  color: #2d3339;
}
.cr-required,
.cr-optional {
  font-size: .66rem;
  font-weight: 700;
  padding: .15em .5em;
  border-radius: 4px;
  line-height: 1.5;
}
.cr-required {
  color: #fff;
  background: #e0685f;
}
.cr-optional {
  color: #6b7280;
  background: #f3f4f6;
}
.cr-input,
.cr-select {
  display: block;
  width: 100%;
  padding: .75em .9em;
  font-size: .9rem;
  font-family: inherit;
  color: #2d3339;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cr-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8em center;
  background-size: 1.1em;
  padding-right: 2.2em;
}
.cr-input::placeholder {
  color: #b0b6bd;
}
.cr-input:focus,
.cr-select:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--cr-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-accent) 20%, transparent);
}
.cr-note {
  margin: 0 0 1.3em;
  font-size: .74rem;
  line-height: 1.7;
  color: #9aa1a9;
  text-align: center;
}
.cr-submit {
  display: block;
  width: 100%;
  padding: .9em 1em;
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: var(--cr-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: .04em;
  transition: opacity .15s ease, transform .15s ease;
}
.cr-submit:hover {
  opacity: .9;
}
.cr-submit:active {
  transform: translateY(1px);
}
.cr-submit:focus-visible {
  outline: 2px solid var(--cr-accent);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .cr-form { padding: 1.4em 1.1em; }
  .cr-title { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-input,
  .cr-select,
  .cr-submit {
    transition: none;
  }
}

フローティングLINEボタン

画面右下に固定表示され、少しスクロールすると現れるLINE公式アカウントへの丸型ボタンです。スマホ・PCの両方で表示されます。

コード・使い方を見る 
<div class="fl2-wrap">
  <a class="fl2-button" href="https://line.me/R/ti/p/@example" target="_blank" rel="noopener" aria-label="LINEで予約・相談する">
    <svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true"><path fill="currentColor" d="M12 2C6.48 2 2 5.69 2 10.2c0 3.08 2.09 5.77 5.19 7.24-.23.86-.83 3.08-.95 3.56-.15.6.22.59.46.43.19-.13 3.06-2.08 4.31-2.93.32.04.65.06.99.06 5.52 0 10-3.69 10-8.36S17.52 2 12 2z"/></svg>
  </a>
</div>
.fl2-wrap {
  --fl2-line: #06c755; /* LINEブランドカラー（変更非推奨） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

.fl2-button {
  position: fixed;
  right: 1.2em;
  bottom: 1.2em;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--fl2-line);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, box-shadow .18s ease;
}
.fl2-button.fl2-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fl2-button:hover,
.fl2-button:focus-visible {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  opacity: .92;
}
.fl2-button:active {
  transform: translateY(0) scale(.96);
}

@media (max-width: 480px) {
  .fl2-button {
    right: .9em;
    bottom: calc(.9em + env(safe-area-inset-bottom, 0px));
    width: 50px;
    height: 50px;
  }
  .fl2-button svg {
    width: 25px;
    height: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl2-button {
    transition: opacity .2s ease;
    transform: none;
  }
  .fl2-button.fl2-visible {
    transform: none;
  }
}
(function () {
  var SHOW_AFTER_PX = 120;
  var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function FloatingLine(root) {
    this.button = root.querySelector('.fl2-button');
    if (!this.button) return;

    if (reduceMotion) {
      this.button.classList.add('fl2-visible');
      return;
    }

    this.onScroll = this.onScroll.bind(this);
    window.addEventListener('scroll', this.onScroll, { passive: true });
    this.onScroll();
  }

  FloatingLine.prototype.onScroll = function () {
    if (window.scrollY > SHOW_AFTER_PX) {
      this.button.classList.add('fl2-visible');
    } else {
      this.button.classList.remove('fl2-visible');
    }
  };

  document.querySelectorAll('.fl2-wrap').forEach(function (root) {
    new FloatingLine(root);
  });
})();

スクロール追従の予約バー（画面上部固定）

少しスクロールすると画面上部に現れ、電話とWEB予約への導線を常に見せておける固定バーです。

コード・使い方を見る 
<div class="shc-wrap">
  <p class="shc-hint">↓ 少しスクロールすると、画面上部に予約バーが固定表示されます</p>

  <div class="shc-bar">
    <div class="shc-inner">
      <span class="shc-name">みなと総合クリニック</span>
      <div class="shc-actions">
        <a class="shc-btn shc-tel" href="tel:0300000000">
          <span class="shc-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none"><path d="M6.5 3h3l1.5 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 1.5v3c0 1-1 2-2 2C10.5 18 6 13.5 6 6.5c0-1 1-2 2-2z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
          </span>
          電話で予約
        </a>
        <a class="shc-btn shc-web" href="https://example.com/reserve" target="_blank" rel="noopener">
          WEB予約
        </a>
      </div>
    </div>
  </div>

  <div class="shc-dummy">
    <p>このエリアはダミーの本文です。実際に貼り付ける際は削除してください。ページを下にスクロールすると、上の予約バーが画面上部に固定されて表示される様子を確認できます。</p>
    <p>みなと総合クリニックのサイト本文がここに入ります。</p>
  </div>
</div>
.shc-wrap {
  --shc-bg: #1f6f7a; /* 固定バーの背景色（医院のテーマ色に変更してください） */
  --shc-color: #ffffff; /* 固定バーの文字色 */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  position: relative;
}
.shc-wrap * { box-sizing: border-box; }

.shc-hint {
  margin: 0 0 .8em;
  font-size: .78rem;
  color: #9ca3af;
  text-align: center;
}

.shc-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--shc-bg);
  color: var(--shc-color);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .3s ease, transform .3s ease;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}
.shc-bar.shc-visible {
  opacity: 1;
  transform: translateY(0);
}

.shc-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: .7em 1.2em;
}

.shc-name {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shc-actions {
  flex: none;
  display: flex;
  gap: .6em;
}

.shc-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .55em 1.1em;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease;
}
.shc-btn:hover,
.shc-btn:focus-visible {
  transform: translateY(-2px);
  opacity: .92;
}
.shc-btn:active {
  transform: translateY(0);
}

.shc-tel {
  background: rgba(255, 255, 255, .16);
  color: var(--shc-color);
  border: 1.5px solid rgba(255, 255, 255, .55);
}
.shc-icon {
  display: inline-flex;
  align-items: center;
}

.shc-web {
  background: #ffffff;
  color: var(--shc-bg);
}

.shc-dummy {
  margin-top: 1.4em;
  padding: 1.4em;
  background: #f9fafb;
  border-radius: 12px;
  color: #6b7280;
  font-size: .84rem;
  line-height: 1.9;
}
.shc-dummy p { margin: 0 0 .6em; }
.shc-dummy p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .shc-bar {
    transition: opacity .01ms;
    transform: none;
  }
}

@media (max-width: 480px) {
  .shc-inner { padding: .6em .9em; gap: .6em; }
  .shc-name { font-size: .78rem; }
  .shc-btn { padding: .5em .8em; font-size: .74rem; }
}
(function () {
  var SHOW_AFTER_PX = 80;
  var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function StickyHeaderCta(root) {
    this.bar = root.querySelector('.shc-bar');
    if (!this.bar) return;

    if (reduceMotion) {
      this.bar.classList.add('shc-visible');
      return;
    }

    this.onScroll = this.onScroll.bind(this);
    window.addEventListener('scroll', this.onScroll, { passive: true });
    this.onScroll();
  }

  StickyHeaderCta.prototype.onScroll = function () {
    if (window.scrollY > SHOW_AFTER_PX) {
      this.bar.classList.add('shc-visible');
    } else {
      this.bar.classList.remove('shc-visible');
    }
  };

  document.querySelectorAll('.shc-wrap').forEach(function (root) {
    new StickyHeaderCta(root);
  });
})();

電話受付時間カード

タップでそのまま発信できる電話番号と、曜日別の受付時間表をまとめたカードパーツです。

コード・使い方を見る 
<div class="th-wrap">
  <div class="th-head">
    <p class="th-eyebrow">お電話でのご予約</p>
    <a class="th-tel" href="tel:0300000000">
      <span class="th-tel-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M6.5 3h3l1.5 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 1.5v3c0 1-1 2-2 2C10.5 18 6 13.5 6 6.5c0-1 1-2 2-2z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
      </span>
      03-0000-0000
    </a>
  </div>

  <table class="th-table">
    <thead>
      <tr>
        <th scope="col">曜日</th>
        <th scope="col">受付時間</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">月・火・木・金</th>
        <td>9:00〜12:30 / 15:00〜18:30</td>
      </tr>
      <tr>
        <th scope="row">水・土</th>
        <td>9:00〜13:00</td>
      </tr>
      <tr class="th-off">
        <th scope="row">日・祝</th>
        <td>休診</td>
      </tr>
    </tbody>
  </table>

  <p class="th-note">※ 受付時間終了の15分前までにお電話ください。</p>
</div>
.th-wrap {
  --th-accent: #1f6f7a; /* アクセントカラー（電話番号・見出しに使用、医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 460px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1.6em 1.6em 1.4em;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .06);
}
.th-wrap * { box-sizing: border-box; }

.th-head {
  text-align: center;
  margin-bottom: 1.2em;
  padding-bottom: 1.1em;
  border-bottom: 1px dashed #e5e7eb;
}
.th-eyebrow {
  margin: 0 0 .5em;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #6b7280;
}
.th-tel {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--th-accent);
  text-decoration: none;
  letter-spacing: .02em;
}
.th-tel:hover,
.th-tel:focus-visible {
  opacity: .85;
}
.th-tel-icon {
  display: inline-flex;
  transform: translateY(1px);
}

.th-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
.th-table th,
.th-table td {
  padding: .65em .5em;
  text-align: left;
  border-bottom: 1px solid #f1f2f4;
}
.th-table thead th {
  font-size: .72rem;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: .05em;
  border-bottom: 2px solid #eef0f2;
}
.th-table tbody th {
  font-weight: 700;
  color: #2d3339;
  white-space: nowrap;
}
.th-table tbody td {
  color: #374151;
}
.th-table tbody tr:last-child th,
.th-table tbody tr:last-child td {
  border-bottom: none;
}
.th-off th,
.th-off td {
  color: #b91c1c;
}

.th-note {
  margin: 1em 0 0;
  font-size: .74rem;
  line-height: 1.7;
  color: #9ca3af;
}

@media (max-width: 480px) {
  .th-wrap { padding: 1.3em 1.2em 1.1em; }
  .th-tel { font-size: 1.3rem; }
  .th-table { font-size: .78rem; }
  .th-table th, .th-table td { padding: .55em .35em; }
}

電話・メール・LINE 問い合わせタブ

電話・メール・LINEをタブで切り替えられる、問い合わせ方法の案内パーツです。

コード・使い方を見る 
<div class="iq-wrap">
  <div class="iq-tablist" role="tablist" aria-label="お問い合わせ方法の切り替え">
    <button type="button" class="iq-tab iq-is-active" role="tab" aria-selected="true" data-iq-target="tel">
      電話
    </button>
    <button type="button" class="iq-tab" role="tab" aria-selected="false" data-iq-target="mail">
      メール
    </button>
    <button type="button" class="iq-tab" role="tab" aria-selected="false" data-iq-target="line">
      LINE
    </button>
  </div>

  <div class="iq-panel iq-is-active" role="tabpanel" data-iq-panel="tel">
    <p class="iq-desc">お急ぎの方はお電話でのお問い合わせが確実です。診療時間内にご連絡ください。</p>
    <a class="iq-button" href="tel:0300000000">03-0000-0000</a>
  </div>

  <div class="iq-panel" role="tabpanel" data-iq-panel="mail" hidden>
    <p class="iq-desc">24時間受け付けています。折り返しは診療時間内に順次ご連絡いたします。</p>
    <a class="iq-button" href="mailto:[email protected]">[email protected]</a>
  </div>

  <div class="iq-panel" role="tabpanel" data-iq-panel="line" hidden>
    <p class="iq-desc">公式LINEを友だち追加すると、チャット形式で気軽にご相談いただけます。</p>
    <a class="iq-button" href="https://line.me/R/ti/p/@example" target="_blank" rel="noopener">LINEで問い合わせる</a>
  </div>
</div>
.iq-wrap {
  --iq-accent: #1f6f7a; /* タブ選択時・ボタンの色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
}
.iq-wrap * { box-sizing: border-box; }

.iq-tablist {
  display: flex;
  gap: .4em;
  margin-bottom: 1em;
}
.iq-tab {
  flex: 1;
  padding: .8em .5em;
  background: #f3f4f6;
  color: #6b7280;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.iq-tab:hover {
  background: #e9eaec;
}
.iq-tab:focus-visible {
  outline: 2px solid var(--iq-accent);
  outline-offset: 2px;
}
.iq-tab.iq-is-active {
  background: var(--iq-accent);
  color: #fff;
}

.iq-panel {
  padding: 1.4em 1.4em 1.5em;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  text-align: center;
}
.iq-desc {
  margin: 0 0 1.1em;
  font-size: .84rem;
  line-height: 1.8;
  color: #4b5563;
}
.iq-button {
  display: inline-block;
  padding: .8em 1.8em;
  background: var(--iq-accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .02em;
  transition: transform .15s ease, opacity .15s ease;
}
.iq-button:hover,
.iq-button:focus-visible {
  transform: translateY(-2px);
  opacity: .92;
}
.iq-button:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .iq-tab { padding: .7em .3em; font-size: .8rem; }
  .iq-panel { padding: 1.2em 1.1em 1.3em; }
  .iq-button { width: 100%; }
}
(function () {
  function InquiryTabs(root) {
    this.root = root;
    this.tabs = Array.prototype.slice.call(root.querySelectorAll('.iq-tab'));
    this.panels = Array.prototype.slice.call(root.querySelectorAll('.iq-panel'));

    if (this.tabs.length === 0 || this.panels.length === 0) return;

    this.bindEvents();
  }

  InquiryTabs.prototype.activate = function (tab) {
    var target = tab.getAttribute('data-iq-target');

    this.tabs.forEach(function (t) {
      var isActive = t === tab;
      t.classList.toggle('iq-is-active', isActive);
      t.setAttribute('aria-selected', String(isActive));
      t.setAttribute('tabindex', isActive ? '0' : '-1');
    });

    this.panels.forEach(function (panel) {
      var isActive = panel.getAttribute('data-iq-panel') === target;
      panel.classList.toggle('iq-is-active', isActive);
      if (isActive) {
        panel.removeAttribute('hidden');
      } else {
        panel.setAttribute('hidden', '');
      }
    });

    tab.focus();
  };

  InquiryTabs.prototype.bindEvents = function () {
    var self = this;

    this.tabs.forEach(function (tab, i) {
      tab.setAttribute('tabindex', tab.classList.contains('iq-is-active') ? '0' : '-1');

      tab.addEventListener('click', function () {
        self.activate(tab);
      });

      tab.addEventListener('keydown', function (e) {
        var nextIndex = null;
        if (e.key === 'ArrowRight') {
          nextIndex = (i + 1) % self.tabs.length;
        } else if (e.key === 'ArrowLeft') {
          nextIndex = (i - 1 + self.tabs.length) % self.tabs.length;
        } else if (e.key === 'Home') {
          nextIndex = 0;
        } else if (e.key === 'End') {
          nextIndex = self.tabs.length - 1;
        }
        if (nextIndex !== null) {
          e.preventDefault();
          self.activate(self.tabs[nextIndex]);
        }
      });
    });
  };

  document.querySelectorAll('.iq-wrap').forEach(function (root) {
    new InquiryTabs(root);
  });
})();

地図＋予約ボタン複合ブロック

Googleマップの埋め込みと住所、予約ボタンを1枚のカードにまとめたアクセス案内パーツです。

コード・使い方を見る 
<div class="mp-wrap">
  <div class="mp-map">
    <iframe
      src="https://www.google.com/maps?q=%E6%9D%B1%E4%BA%AC%E9%A7%85&output=embed"
      title="みなと総合クリニックの地図"
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
      allowfullscreen>
    </iframe>
  </div>
  <div class="mp-body">
    <p class="mp-name">みなと総合クリニック</p>
    <p class="mp-address">
      <span class="mp-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none"><path d="M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><circle cx="12" cy="9.5" r="2.4" stroke="currentColor" stroke-width="1.6"/></svg>
      </span>
      東京都港区0-0-0
    </p>
    <a class="mp-button" href="https://example.com/reserve" target="_blank" rel="noopener">
      ここから予約する
    </a>
  </div>
</div>
.mp-wrap {
  --mp-accent: #1f6f7a; /* ボタンの背景色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .06);
}
.mp-wrap * { box-sizing: border-box; }

.mp-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eef0f2;
}
.mp-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mp-body {
  padding: 1.3em 1.5em 1.5em;
  text-align: center;
}
.mp-name {
  margin: 0 0 .4em;
  font-size: 1.02rem;
  font-weight: 700;
  color: #2d3339;
}
.mp-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  margin: 0 0 1.1em;
  font-size: .84rem;
  color: #6b7280;
}
.mp-icon {
  display: inline-flex;
  color: var(--mp-accent);
}

.mp-button {
  display: inline-block;
  width: 100%;
  padding: .85em 1em;
  background: var(--mp-accent);
  color: #fff;
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .02em;
  transition: transform .15s ease, opacity .15s ease;
}
.mp-button:hover,
.mp-button:focus-visible {
  transform: translateY(-2px);
  opacity: .92;
}
.mp-button:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .mp-body { padding: 1.1em 1.2em 1.3em; }
  .mp-name { font-size: .96rem; }
}

予約前のご案内カード

持ち物・来院時間・キャンセルの注意点を箇条書きでまとめた、予約前確認用の案内パーツです。

コード・使い方を見る 
<div class="an-wrap">
  <p class="an-title">ご予約の前にご確認ください</p>

  <ul class="an-list">
    <li class="an-item">
      <span class="an-icon" aria-hidden="true">1</span>
      <div class="an-body">
        <p class="an-heading">持ち物</p>
        <p class="an-text">保険証・お薬手帳・紹介状（お持ちの方）をご持参ください。</p>
      </div>
    </li>
    <li class="an-item">
      <span class="an-icon" aria-hidden="true">2</span>
      <div class="an-body">
        <p class="an-heading">来院のお時間</p>
        <p class="an-text">予約時間の10分前を目安にお越しください。受付は問診票のご記入から始まります。</p>
      </div>
    </li>
    <li class="an-item">
      <span class="an-icon" aria-hidden="true">3</span>
      <div class="an-body">
        <p class="an-heading">キャンセル・変更</p>
        <p class="an-text">やむを得ずキャンセル・変更される場合は、前日までにお電話にてご連絡ください。</p>
      </div>
    </li>
  </ul>

  <p class="an-note">※ ご不明な点はお気軽にお電話（03-0000-0000）でお問い合わせください。</p>
</div>
.an-wrap {
  --an-accent: #1f6f7a; /* 番号アイコンの色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1.6em 1.6em 1.5em;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .06);
}
.an-wrap * { box-sizing: border-box; }

.an-title {
  margin: 0 0 1.1em;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2d3339;
  text-align: center;
}

.an-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.an-item {
  display: flex;
  align-items: flex-start;
  gap: .9em;
  padding: .8em 0;
  border-bottom: 1px solid #f1f2f4;
}
.an-item:first-child { padding-top: 0; }
.an-item:last-child { padding-bottom: 0; border-bottom: none; }

.an-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--an-accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  margin-top: .1em;
}

.an-body { flex: 1; min-width: 0; }
.an-heading {
  margin: 0 0 .3em;
  font-size: .9rem;
  font-weight: 700;
  color: #2d3339;
}
.an-text {
  margin: 0;
  font-size: .82rem;
  line-height: 1.8;
  color: #6b7280;
}

.an-note {
  margin: 1.1em 0 0;
  font-size: .74rem;
  line-height: 1.7;
  color: #9ca3af;
  text-align: center;
}

@media (max-width: 480px) {
  .an-wrap { padding: 1.3em 1.2em 1.2em; }
  .an-title { font-size: .96rem; }
  .an-item { gap: .7em; }
}

院内掲示用QRポスターブロック

大きなQRコードで「スマホで予約」を訴求する、院内掲示やポスターに使いやすいブロックパーツです。

コード・使い方を見る 
<div class="qp-wrap">
  <p class="qp-eyebrow">SCAN &amp; BOOK</p>
  <p class="qp-title">スマホで予約</p>

  <div class="qp-qr">
    <img src="https://placehold.co/280x280/ffffff/1f6f7a?text=QR" alt="みなと総合クリニック WEB予約用QRコード" width="280" height="280">
  </div>

  <p class="qp-desc">このQRコードをスマホのカメラで読み取ると、24時間WEB予約ページに移動します。</p>
  <p class="qp-name">みなと総合クリニック</p>
</div>
.qp-wrap {
  --qp-accent: #1f6f7a; /* 見出し・枠線の色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 380px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 2em 1.8em 1.8em;
  background: #fff;
  border: 3px solid var(--qp-accent);
  border-radius: 20px;
  text-align: center;
}
.qp-wrap * { box-sizing: border-box; }

.qp-eyebrow {
  margin: 0 0 .3em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--qp-accent);
}
.qp-title {
  margin: 0 0 1.2em;
  font-size: 1.6rem;
  font-weight: 800;
  color: #2d3339;
  letter-spacing: .04em;
}

.qp-qr {
  display: inline-block;
  padding: .8em;
  margin-bottom: 1.2em;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}
.qp-qr img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
}

.qp-desc {
  margin: 0 0 1em;
  font-size: .82rem;
  line-height: 1.8;
  color: #6b7280;
}

.qp-name {
  margin: 0;
  padding-top: 1em;
  border-top: 1px dashed #e5e7eb;
  font-size: .86rem;
  font-weight: 700;
  color: #2d3339;
}

@media (max-width: 480px) {
  .qp-wrap { padding: 1.6em 1.3em 1.5em; }
  .qp-title { font-size: 1.35rem; }
  .qp-qr img { max-width: 200px; }
}