@charset "UTF-8";
/* ==========================================================================
  article.css
  読み物（通常の投稿：single.php）専用の本文スタイル

  - 読み込むのは投稿ページだけ（functions.php で is_singular('post') のときのみ）
  - style.css はすべて @layer 内にあるため、プラグインのCSS（レイヤーなし）に負ける。
    このファイルはレイヤーなしで書き、Pochipp の見た目もここで上書きする。
  - 他のページに影響しないよう、すべて .p-article / .c-article 配下に限定する。
========================================================================== */

/* ---------- 枠 ---------- */
.p-article .c-article {
  margin-block-start: clamp(10px, 2vw, 24px);
}
.p-article .c-article__inner {
  max-width: 820px;
  margin-inline: auto;
}

/* ---------- 日付 ---------- */
.p-article .c-article__date {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 20px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #666;
}

/* ---------- アイキャッチ ---------- */
.p-article .c-article__thumb {
  margin: 0 0 32px;
}
.p-article .c-article__thumb img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-s, 20px);
}

/* ---------- PR表記 ---------- */
.p-article .c-article__pr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 40px;
  padding: 14px 18px;
  background: var(--bg-color-yellow, #F9F7E6);
  border-radius: var(--radius-xs, 10px);
  font-size: 0.85rem;
  line-height: 1.7;
}
.p-article .c-article__pr-label {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 2px 10px;
  border-radius: var(--radius-xxs, 4px);
  background: var(--color-orange, #e6981a);
  color: #fff;
  font-family: var(--font-en);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

/* ==========================================================================
  本文
========================================================================== */
.c-article-body {
  font-size: 1rem;
  line-height: 1.9;
}
.c-article-body > * + * {
  margin-block-start: 1.2em;
}

/* 段落 */
.c-article-body p {
  margin-block: 0;
}
.c-article-body > p + p {
  margin-block-start: 1em;
}

/* 見出し：スポット詳細の節見出し（＃＋下線）にそろえる */
.c-article-body h2 {
  margin-block: 64px 24px;
  padding-block-end: 8px;
  border-bottom: 1px solid currentColor;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: var(--fw-bold, 700);
}
.c-article-body h2::before {
  content: "＃";
  display: inline-block;
  margin-inline-end: 10px;
  color: var(--primary-color, #3B9DCA);
}
.c-article-body > h2:first-child {
  margin-block-start: 0;
}
.c-article-body h3 {
  margin-block: 48px 16px;
  padding: 12px 18px;
  border-radius: var(--radius-xs, 10px);
  background: var(--bg-color-blue, #ECF4F8);
  color: var(--primary-color, #3B9DCA);
  font-size: 1.15rem;
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-ui, 0.05em);
  line-height: 1.5;
}
.c-article-body h2 + h3 {
  margin-block-start: 24px;
}
.c-article-body h3 + * {
  margin-block-start: 16px;
}
.c-article-body h4 {
  margin-block: 28px 8px;
  font-size: 1rem;
  font-weight: var(--fw-bold, 700);
}

/* 強調：黄色のマーカー */
.c-article-body strong {
  font-weight: var(--fw-bold, 700);
  background: linear-gradient(transparent 62%, rgba(235, 206, 43, 0.45) 62%);
}

/* リンク */
.c-article-body a {
  color: var(--primary-color, #3B9DCA);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}
.c-article-body a:hover {
  color: var(--text-color, #3B3B3B);
}

/* 箇条書き */
.c-article-body ul,
.c-article-body ol {
  margin-block: 1.2em;
  padding: 20px 24px 20px 2.6em;
  background: var(--bg-color-blue, #ECF4F8);
  border-radius: var(--radius-xs, 10px);
}
.c-article-body ul {
  list-style: disc;
}
.c-article-body ol {
  list-style: decimal;
}
.c-article-body li {
  padding-inline-start: 0.2em;
}
.c-article-body li::marker {
  color: var(--primary-color, #3B9DCA);
  font-weight: var(--fw-bold, 700);
}
.c-article-body li + li {
  margin-block-start: 0.6em;
}
.c-article-body li > ul,
.c-article-body li > ol {
  margin-block: 0.5em 0;
  padding: 0 0 0 1.4em;
  background: none;
}

/* 表（ブロックエディターの「表」= figure.wp-block-table） */
.c-article-body .wp-block-table,
.c-article-body figure:has(> table) {
  margin-inline: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.c-article-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d6e4ea;
  border-radius: var(--radius-xs, 10px);
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.7;
}
.c-article-body th,
.c-article-body td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d6e4ea;
}
.c-article-body tr:last-child > td,
.c-article-body tr:last-child > th {
  border-bottom: 0;
}
.c-article-body thead th,
.c-article-body thead td {
  background: var(--bg-color-blue2, #DEEFF6);
  font-weight: var(--fw-bold, 700);
  white-space: nowrap;
}
.c-article-body tbody tr:nth-child(even) {
  background: #fafcfd;
}
/* 1列目（持ち物の名前など）は太字にして読み分けやすく */
.c-article-body tbody td:first-child {
  width: 34%;
  font-weight: var(--fw-bold, 700);
}
.c-article-body .wp-block-table figcaption,
.c-article-body figcaption {
  margin-block-start: 8px;
  font-size: 0.8rem;
  color: #666;
}

/* 画像 */
.c-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-xs, 10px);
}
.c-article-body figure {
  margin-inline: 0;
}

/* 引用・補足 */
.c-article-body blockquote {
  margin-inline: 0;
  padding: 16px 20px;
  border-left: 4px solid var(--primary-color, #3B9DCA);
  background: var(--bg-color-gray, #F6F6F6);
  border-radius: 0 var(--radius-xs, 10px) var(--radius-xs, 10px) 0;
}

/* 区切り線 */
.c-article-body hr {
  margin-block: 48px;
  border: 0;
  border-top: 1px dashed #bbb;
}

/* ==========================================================================
  Pochipp（商品ボックス）
  - 画像がない「検索リンク型」でも左が空かないように整える
========================================================================== */
.c-article-body .pochipp-box {
  margin-block: 16px 32px;
  padding: 16px 20px;
  border: 1px solid #d6e4ea;
  border-radius: var(--radius-xs, 10px);
  background: #fff;
  box-shadow: none;
}
.c-article-body .pochipp-box__image:empty,
.c-article-body .pochipp-box__image:not(:has(img)) {
  display: none;
}
.c-article-body .pochipp-box__image img {
  border-radius: var(--radius-xxs, 4px);
}
.c-article-body .pochipp-box__title,
.c-article-body .pochipp-box__title a {
  font-size: 0.95rem;
  font-weight: var(--fw-bold, 700);
  color: var(--text-color, #3B3B3B);
  text-decoration: none;
  background: none;
}
.c-article-body .pochipp-box a {
  text-decoration: none;
}
.c-article-body .pochipp-box__btns {
  gap: 8px;
}
.c-article-body .pochipp-box__btn {
  border-radius: var(--radius-xs, 10px);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
/* ボックス内では本文用の箇条書き・強調の装飾を外す */
.c-article-body .pochipp-box ul,
.c-article-body .pochipp-box ol {
  margin: 0;
  padding: 0;
  background: none;
  list-style: none;
}
.c-article-body .pochipp-box strong {
  background: none;
}

/* ---------- 下部ボタン ---------- */
.p-article .c-article__back {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.p-article .c-article__back .btn {
  margin-inline: 0;
}

/* ==========================================================================
  スマホ
========================================================================== */
@media (max-width: 767px) {
  .c-article-body {
    font-size: 0.95rem;
  }
  .c-article-body h2 {
    margin-block-start: 48px;
    font-size: 1.2rem;
  }
  .c-article-body ul,
  .c-article-body ol {
    padding: 16px 16px 16px 2.2em;
  }
  .c-article-body th,
  .c-article-body td {
    padding: 10px 12px;
  }
  .c-article-body table {
    font-size: 0.9rem;
  }
  .c-article-body tbody td:first-child {
    width: 38%;
  }
  .p-article .c-article__pr {
    padding: 12px 14px;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
  Pochipp：画像なし（検索リンク型）のとき、左の画像欄をなくして横幅いっぱいに
========================================================================== */
.c-article-body .pochipp-box:not(:has(.pochipp-box__image img)) {
  display: block;
  grid-template-columns: none;
}
.c-article-body .pochipp-box:not(:has(.pochipp-box__image img)) .pochipp-box__body {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.c-article-body .pochipp-box__btns {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: 12px;
}
.c-article-body .pochipp-box__btnwrap {
  flex: 1 1 160px;
  max-width: none;
  margin: 0;
}
.c-article-body .pochipp-box__logo {
  margin-block-start: 8px;
}

/* ==========================================================================
  読み物一覧（ショートコード [hplus_guides]）
========================================================================== */
.c-guides {
  max-width: 1200px;
  margin: 0 auto;
  padding-block: clamp(40px, 6vw, 60px);
  padding-inline: var(--container-padding, 16px);
}
.c-guides__title {
  margin: 0 0 24px;
  text-align: center;
  font-size: 1.4rem;
}
.c-guides__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-guides__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #d6e4ea;
  border-radius: var(--radius-s, 20px);
  background: #fff;
  color: var(--text-color, #3B3B3B);
  text-decoration: none;
  transition: box-shadow .3s, transform .3s;
}
.c-guides__link:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.c-guides__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.c-guides__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px 20px;
}
.c-guides__name {
  font-weight: var(--fw-bold, 700);
  line-height: 1.6;
  color: var(--primary-color, #3B9DCA);
}
.c-guides__excerpt {
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ==========================================================================
  表示確認（テスト環境 2026-11-02）を受けた修正
========================================================================== */
/* 長いURLで横スクロールが出ないように折り返す */
.c-article-body a,
.c-article-body li,
.c-article-body td {
  overflow-wrap: anywhere;
}
/* 商品ボックス：Pochipp標準の外側余白をなくし、表や箇条書きと幅をそろえる */
.c-article-body .pochipp-box {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

/* Amazonアソシエイトの表示（記事の最後） */
.p-article .c-article__amazon-note {
  margin: 48px 0 0;
  padding-top: 16px;
  border-top: 1px dashed #ccc;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-color, #3B3B3B);
}

/* スポット記事の中に出す「行く前に読みたい記事」 */
.spot-detail--guides .c-guides {
  max-width: none;
  padding: 0;
}

/* 楽天トラベルの宿リンク（写真＋リンク文）：写真と文の間を詰める */
.c-article-body .hplus-rtravel {
  line-height: 1.6;
}
.c-article-body .hplus-rtravel img {
  display: block;
  margin-block-end: 4px;
}
.c-article-body .hplus-rtravel br {
  display: none;
}

/* ===== スポット詳細：予約リンク枠・情報の確認日 ===== */
.spot-entry {
  background: var(--bg-color-blue, #ECF4F8);
  border-radius: 4px;
  padding: 20px clamp(16px, 4vw, 28px);
}
.spot-entry__pr {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: #555;
}
.spot-entry__pr-label {
  display: inline-block;
  margin-inline-end: 8px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.72rem;
  line-height: 1.6;
}
.spot-entry__note { margin: 0 0 12px; }
.spot-entry__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.spot-entry__btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #1b5e8a;
  color: #1b5e8a;
  font-weight: 700;
  text-decoration: none;
}
.spot-entry__btn:hover,
.spot-entry__btn:focus-visible { background: #1b5e8a; color: #fff; }
.spot-entry__checked {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: #555;
}

/* ===== スポット詳細の下部を軽くする（2026-11-04） ===== */
/* 行く前に読みたい記事：左に写真、右にタイトルと短い説明文の横長カード */
.spot-detail--guides .c-guides__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.spot-detail--guides .c-guides__item { display: flex; }
.spot-detail--guides .c-guides__link {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1 1 auto;
  height: auto;
  border-radius: 4px;
}
.spot-detail--guides .c-guides__link:hover {
  transform: none;
}
.spot-detail--guides .c-guides__media {
  flex: 0 0 34%;
  max-width: 150px;
  min-height: 84px;
}
.spot-detail--guides .c-guides__media { position: relative; }
.spot-detail--guides .c-guides__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
}
.spot-detail--guides .c-guides__text {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
}
.spot-detail--guides .c-guides__name { font-size: 0.95rem; line-height: 1.5; }
.spot-detail--guides .c-guides__excerpt {
  font-size: 0.8rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (min-width: 641px) {
  /* PCは横2列 */
  .spot-detail--guides .c-guides__list { grid-template-columns: 1fr 1fr; }
}

/* このあたりで、もう少し：グループごとにフッターと同じ薄い水色の箱で囲み、白いリンクを並べる */
.spot-detail--nearby .nearby-spots__lead { margin: 0 0 20px; }
.spot-detail--nearby .nearby-spots__group {
  background: var(--bg-color-blue2, #DEEFF6);
  border-radius: 4px;
  /* 「立ち寄る前に、ちょっとだけ」の各項目と同じ余白 */
  padding: clamp(20px, 3.027vw, 30px) clamp(20px, 3.027vw, 36px);
}
.spot-detail--nearby .nearby-spots__group + .nearby-spots__group { margin-top: 20px; }
.spot-detail--nearby .spot-detail-chip {
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 8px;
  margin: 0 0 14px;
  border-bottom: 1px dashed var(--primary-color, #6aa7c8);
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-color, #3B3B3B);
}
/* 小さい正方形の写真の右に名前を置く横長カード。1グループ1行。スマホは横スワイプ、PCは4枚が1行 */
.spot-detail--nearby { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.spot-detail--nearby .spot-rows {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.spot-detail--nearby .spot-rows__item {
  flex: 0 0 196px;
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 641px) {
  .spot-detail--nearby .spot-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
}
.spot-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 8px;
  align-content: center;
  height: 100%;
  padding: 6px;
  background: #fff;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}
.spot-row:hover .spot-row__name,
.spot-row:focus-visible .spot-row__name { text-decoration: underline; }
.spot-row__media {
  grid-row: 1 / span 2;
  display: block;
  width: 52px;
  height: 52px;
  background: #e6edf0;
  border-radius: 3px;
  overflow: hidden;
}
.spot-row__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spot-row__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  align-self: end;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}
.spot-row__name:last-child { grid-row: 1 / span 2; align-self: center; }
.spot-row__meta { display: block; align-self: start; font-size: 0.68rem; color: #666; }

/* ===== スポット詳細：基本情報の下に出す予約・記事の入口（2026-11-09） ===== */
/* 見出しはページ内のほかの小見出しと同じチップ、予約ボタンはサイト共通の .btn、記事は下の欄と同じ横長カード */
.spot-quick { margin-top: 8px; }
.spot-quick .spot-detail-chip { margin-block: 24px 12px; }
.spot-entry__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* 予約ボタン：公式SNSの「Facebook」などと同じ白地・水色の枠（文が長いので折り返しと高さだけ変える） */
.spot-entry__linkbtn {
  height: auto;
  min-height: 32px;
  padding: 10px 16px;
  line-height: 1.5;
  white-space: normal;
  text-align: center;
  font-size: 0.85rem;
}
/* 行く前に読みたい記事：「立ち寄る前に、ちょっとだけ」のメモと同じ点つきリスト（色は水色、文字だけのリンク） */
.spot-quick__articles {
  background: var(--bg-color-blue, #ECF4F8);
  margin-block: 0;
  padding: 20px 20px 20px 40px;
  font-size: 0.9rem;
  color: var(--primary-color, #3B9DCA);
}
.spot-quick__articles li { list-style: disc; line-height: 1.4; }
.spot-quick__articles li + li { margin-block-start: 10px; }
.spot-quick__articles a {
  color: var(--primary-color, #3B9DCA);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spot-quick__articles a:hover { color: var(--text-color); }
@media (max-width: 600px) {
  .spot-entry__list li { flex: 1 1 100%; }
  .spot-entry__linkbtn { width: 100%; box-sizing: border-box; }
}
.spot-detail--entry .spot-detail-chip { margin-block-start: 0; }

/* ===== Web制作・事務サポート／特定商取引法の表記（2026-11-09） ===== */
/* 受注ページ v2：観光写真の繰り返しをやめ、実例（サイトのスマホ画面）・料金・流れを部品で見せる。
   色・角丸・チップ・ボタンはサイト共通（--primary-color / --bg-color-blue / .spot-detail-chip / .spot-detail-linkbtn / .btn）を流用 */
.p-web-support .hero-title__ja { text-align: right; }
/* セクションの区切り：「このサイトについて」と同じ点線（1px dashed #999） */
.p-web-support .section.ws-price,
.p-web-support .section.ws-office,
.p-web-support .section.ws-flow { border-top: 1px dashed #999; }
/* 角丸はページ内すべて4pxにそろえる（ボタン・枠・見出しチップ・相談の枠・上の写真） */
.p-web-support .btn,
.p-web-support .spot-detail-linkbtn,
.p-web-support .spot-detail-chip,
.p-web-support .hero__media,
.p-web-support .contact-panel,
.p-web-support .contact-panel::before { border-radius: var(--radius-xxs, 4px); }
@media (max-width: 1024px) { .p-web-support .hero-title__ja { text-align: center; } }

.ws-intro__body { display: grid; grid-template-columns: 1fr minmax(200px, 300px); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1000px; margin: var(--space-m, 28px) auto 0; text-align: left; }
.ws-intro__illust { display: block; width: 100%; height: auto; }
.ws-lead { margin: 0; }
@media (max-width: 840px) { .ws-intro__body { grid-template-columns: 1fr; } .ws-intro__illust { width: 60%; max-width: 240px; margin: 0 auto; } }
.ws-jump { list-style: none; margin: 32px 0 0; padding: 0; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
.ws-jump__link { min-width: 180px; height: 40px; font-size: 0.85rem; }
.ws-jump__btn { margin: 0; height: 40px; padding-block: 0; justify-content: center; letter-spacing: 0.1em; }
@media (max-width: 600px) { .ws-jump li { flex: 1 1 100%; } .ws-jump__link, .ws-jump__btn { width: 100%; box-sizing: border-box; height: 44px; } }


/* 料金 */
.ws-plans { list-style: none; margin: var(--space-m, 24px) auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.ws-plan { background: var(--bg-color-blue); border-radius: var(--radius-xxs); padding: 24px clamp(20px, 2.4vw, 28px); }
.ws-plan__price { font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: 0.02em; padding-bottom: 12px; border-bottom: 1px dashed var(--primary-color); }
.ws-plan__price span { font-size: 0.95rem; margin-inline: 2px; }
.ws-plan__text { margin-top: 12px; font-size: 0.9rem; line-height: 1.7; }
.ws-plan__spec { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.6; }
.ws-plan__row { padding: 10px 0; border-bottom: 1px dashed #b9cfdb; }
.ws-plan__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ws-plan__row dt { font-weight: var(--fw-bold); color: var(--primary-color); font-size: 0.8rem; }
.ws-plan__row dd { margin: 2px 0 0; }
@media (max-width: 840px) { .ws-plan__row.is-none { display: none; } .ws-plan__row:nth-last-child(1 of :not(.is-none)) { border-bottom: 0; padding-bottom: 0; } }
.ws-group { max-width: 1100px; margin: clamp(40px, 5vw, 56px) auto 0; text-align: left; }
.ws-group__title { font-size: var(--head-text-size); color: var(--primary-color); line-height: 1.4; padding-bottom: 10px; border-bottom: 1px solid var(--primary-color); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.ws-group__title span { font-size: 0.875rem; color: var(--text-color); font-weight: var(--fw-regular); }
.ws-group .ws-plans { margin-top: 20px; }
.ws-reason, .ws-request { max-width: 1100px; margin: var(--space-m, 28px) auto 0; text-align: left; background: var(--bg-color-gray); border-radius: var(--radius-xxs); padding: 4px clamp(20px, 3vw, 36px) 24px; font-size: 0.92rem; }
.ws-request { margin-top: clamp(40px, 5vw, 56px); }
.ws-reason__title, .ws-request__title { margin-block: 20px 10px; }
.ws-request p + p { margin-top: 0.5em; }
.ws-notes { max-width: 1100px; margin: 20px auto 0; padding: 0 0 0 1.2em; text-align: left; font-size: 0.875rem; color: #555; }
.ws-notes li { list-style: "※ "; }
.ws-notes li + li { margin-top: 4px; }
@media (max-width: 840px) { .ws-plans { grid-template-columns: 1fr; } }

/* 事務（Webより一段小さく） */
.ws-office__box { max-width: 1100px; margin: var(--space-m, 28px) auto 0; display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; text-align: left; background: var(--bg-color-blue); border-radius: var(--radius-xxs); padding: clamp(24px, 3vw, 36px) clamp(20px, 4vw, 48px); font-size: 0.92rem; }
.ws-office__illust { display: block; width: 100%; height: auto; }
.ws-office__price { border-bottom: 1px dashed var(--primary-color); }
.ws-office__terms { margin: 10px 0 14px; font-size: 0.85rem; color: #555; }
.ws-office__body p + p { margin-top: 0.8em; }
@media (max-width: 600px) { .ws-office__box { grid-template-columns: 1fr; gap: 16px; } .ws-office__illust { width: 120px; margin: 0 auto; } }

/* 流れ */
.ws-steps { list-style: none; margin: var(--space-m, 24px) auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; counter-reset: none; }
.ws-step { position: relative; background: var(--bg-color-gray); border-radius: var(--radius-xxs); padding: 20px; }
.ws-step__no { display: block; font-family: var(--font-en); font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--primary-color); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--primary-color); }
.ws-step p { font-size: 0.92rem; line-height: 1.7; }
.ws-flow__note { margin-top: 24px; font-size: 0.875rem; }
@media (max-width: 640px) { .ws-flow__note { text-align: left; } }
.ws-flow__note a, .ws-cta__text a { color: var(--primary-color); }
.p-web-support .contact-panel__title { margin-block-end: 16px; }
@media (max-width: 480px) { .p-web-support .contact-panel .btn { letter-spacing: 0.06em; gap: 0.6rem; padding-inline: 1.2em; } .p-web-support .contact-panel .btn__label { white-space: nowrap; } }
.ws-cta__illust { display: block; width: clamp(200px, 30vw, 280px); height: auto; margin: 0 auto 8px; }
.ws-cta__text { width: 100%; margin: 0 0 24px; font-size: 0.9rem; }
.p-web-support .contact-panel .container { width: 100%; }
@media (max-width: 840px) { .ws-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ws-steps { grid-template-columns: 1fr; } .ws-step { display: flex; gap: 16px; align-items: center; } .ws-step__no { border-bottom: 0; padding: 0 16px 0 0; margin: 0; border-right: 1px dashed var(--primary-color); min-width: 2.2em; } }

.tokushoho-list { margin: 0; }
.tokushoho-row {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px dashed #b9cfdb;
}
.tokushoho-row dt { font-weight: 700; color: #1b5e8a; }
.tokushoho-row dd { margin: 0; }
@media (max-width: 600px) {
  .tokushoho-row { grid-template-columns: 1fr; }
}

/* スポット下「オーナー・ご担当者さまへ」：受注ページへのボタン（公式SNSボタンと同じ部品） */
.spot-owner__web, .ws-entry { margin-top: 12px; }
.spot-owner__web .spot-detail-linkbtn, .ws-entry .spot-detail-linkbtn { height: 36px; padding: 0 20px; }