/* =========================================================
   ORWA スマイルトゥギャザー（smiletogether）
   読み込み条件: is_singular / is_post_type_archive( 'smiletogether' )
                 ＋ is_tax( smile_area / smile_chapel_area / smile_shop_area )
                 — inc/assets.php
   スコープ    : 下記5クラス（WordPress が body に自動付与）

   入口・一覧と詳細・エリア別で body のクラスが別になるため、
   .single-smiletogether だけでは入口とエリア別に効かない。
   :is() でまとめて1つのスコープとして扱う。
   :is() の詳細度は中の最大値（クラス1つ分）なので、
   .single-products と同じ強さになる。

   ★レイアウトの方針（2026-10-06 変更）
   旧サイトは最大 740px のスマホ専用設計で、全ページが 740px の1本の柱だった。
   当初は新サイトの 1200px に広げる方針だったが、旧サイトの印象を
   再現できないため、入口も含めて 740px の柱に戻した。
   共通ヘッダー・フッターは新テーマのまま（幅も色も変えない）。

   フォントは旧サイトに合わせる（2026-10-06 先方の判断。下の .orwa-main で指定）。
   ========================================================= */

/* --- 色 --------------------------------------------------
   旧サイトにはピンクが7色ある（#b76e90 #7b3456 #df2f81 #ac577f
   #ad6285 #e85c9a #d72991）。全部再現すると散らかるため2色に整理する。
     主色 #ac577f … 導入文の色。見出し・リンク・選択中の絞り込み
     強調 #df2f81 … PAGE TOP の色。見出しの下線
   #d72991（旧見出しの文字と下線）は強調色に寄せた。

   --orwa-primary を .orwa-main の中でだけ差し替える。
   base.css のリンク・下線・絞り込み・ページ送りが自動でピンクになる。
   body ではなく .orwa-main にしているのは、
   共通ヘッダー・フッターをサイト共通の色のまま残すため。 */

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-main {
  --smile-primary: #ac577f;
  --smile-accent: #df2f81;

  --orwa-primary: var(--smile-primary);
  --orwa-primary-dark: color-mix(in srgb, var(--smile-primary) 80%, #000);

  /* 旧サイトの柱の幅（.contents / .main_contents_wrapper の max-width） */
  --smile-w: 740px;

  /* 地色。いずれも旧サイトの値。
     柱の外 #f0f0f0 … 旧ショップ一覧の body
     柱（一覧）#f8f7f1 … 旧トップ・スポット・チャペル・ニュースの柱
     柱（詳細）は白 … 旧詳細とショップ一覧の柱 */
  --smile-outer: #f0f0f0;
  --smile-column: #f8f7f1;

  /* 薄い背景（絞り込みの枠・画像の読み込み前）も柱と同じクリームにする。 */
  --orwa-bg-sub: var(--smile-column);

  /* ピンク以外の装飾色。いずれも旧サイトの一覧・詳細の値。 */
  --smile-heading: #585858;      /* 見出しの文字・ショップ名の下線（.shop_coupon_name_title） */
  --smile-caption: #4d4c4c;      /* スポット名のキャプション（旧 p の色 rgb(77,76,76)） */
  --smile-box: #f4f4f4;          /* 基本情報の地（.white_box） */
  --smile-sale: #ff1c3a;         /* クーポン名（.price） */
  --smile-coupon-bg: #f6ecdc;    /* クーポン枠の地（.coupon。旧サイトはさらに模様画像を敷いていた） */
  --smile-coupon-line: #979186;  /* クーポン枠の点線（.coupon-inner） */
  --smile-note-bg: #feffeb;      /* ショップの付箋（.box-015） */

  /* スポットのエリア帯。旧サイトはタームごとの色（既定 #d0d0d0）だったが、
     新サイトはタームの色を持たない。白文字が読める灰色に揃える（コントラスト 4.5）。 */
  --smile-badge: #767676;

  /* 入口・帯で使う色。いずれも旧サイトの値。 */
  --smile-menu-bg: rgb(123 52 86 / 95%); /* メニューの地（旧 #7b3456 の 83%。文字を読みやすく濃くした） */
  --smile-label-font: "American Typewriter", serif; /* 区画のラベル（NEWS など） */
  --smile-guide-font: "Trebuchet MS", "Lucida Sans", Arial, sans-serif; /* 案内の見出し */
  --smile-line: #06c755;  /* LINE のボタン（旧 #0fc747。LINE の公式色に寄せた） */
  --smile-x: #535252;     /* X のボタン */
  --smile-chapel: #5f7dc7; /* チャペル名の帯 */

  /* 「◯◯一覧へ」などのボタン（旧 .click_sns-btn）。先方の指定（2026-10-06）で旧サイトの色。
     白文字とのコントラストは 3.4 で基準 4.5 に届かない（報告事項）。 */
  --smile-button: #e85c9a;

  /* 一覧のクーポン名（旧 .spot_sale__item）。先方の指定（2026-10-06）で旧サイトの色。
     詳細のクーポン枠の赤（--smile-sale #ff1c3a）とは別の色だった。 */
  --smile-coupon-title: #ff571b;

  background: var(--smile-outer);

  /* フォント・文字の大きさ・行間・文字色。
     先方の判断（2026-10-06）：旧WPのサイトはそれぞれ旧サイトのフォントに合わせる。

     旧トップの本文はフォントの指定がなく、ブラウザの既定（Mac の Chrome では
     ヒラギノ角ゴ ProN）・15px・行間 1.6・#222 で出ていた（公開中の旧サイトで計測）。
     ヒラギノのない Windows では游ゴシック・メイリオに落とす。
     一部の一覧（archive-shop.css など）は Arial を指定していたが、
     トップと見た目がそろわないため、ここではトップに合わせる（0.2.5 の Arial から変更）。

     共通ヘッダー・フッターは新テーマのまま残すため、body ではなく .orwa-main に当てる。 */
  --orwa-text: #222;

  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--orwa-text);
}

/* =========================================================
   柱（740px）
   ========================================================= */

/* 一覧・入口は .orwa-container、詳細は .orwa-article が外枠。
   どちらも 740px に絞り、柱の色を敷く。

   flow-root にしているのは、中の見出しや戻るリンクの margin が
   外へはみ出して、柱の上下に灰色の隙間ができるのを防ぐため。
   詳細は .orwa-article が縦に複数並ぶので、これがないと
   写真・本文・施設情報の間に灰色の帯が入る。 */
:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-main :is(.orwa-container, .orwa-article) {
  display: flow-root;
  max-width: var(--smile-w);
  background: var(--smile-column);
}

/* 詳細は白い柱（旧 spot.css / chapel.css / shop.css の .main_contents_wrapper）。 */
:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-main .orwa-article {
  background: var(--orwa-bg);
}

/* ショップ一覧も白い柱（旧 archive-shop.css の .contents）。
   一覧の種類の見分け方は「カード」の項を参照。 */
.single-smiletogether .orwa-container:has(.orwa-card__link[href*="/smiletogether/shop/"]),
.tax-smile_shop_area .orwa-container {
  background: var(--orwa-bg);
}

/* 旧サイトの柱の左右は 25px 前後。新テーマの 20px のままにする（差が小さいため）。 */

/* --- ページ見出し ----------------------------------------
   旧サイトは一覧の見出しと導入文を中央寄せ・ピンクにしていた。 */

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-page-header {
  text-align: center;
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-page-header__title {
  color: var(--smile-primary);
}

/* 旧サイトの導入文は 太字 14px・行間 2.2。 */
:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-page-header__lead p {
  font-size: var(--orwa-fs-sm);
  font-weight: 700;
  line-height: 2.2;
  color: var(--smile-primary);
}

/* --- 見出し ----------------------------------------------
   旧サイトの見出しは灰色の文字にピンクの下線。 */

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-section-title {
  text-align: center;
  border-bottom-color: var(--smile-accent);
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-entry h2 {
  border-bottom-color: var(--smile-accent);
}

/* =========================================================
   カード（一覧・エリア別・入口の新着）
   ========================================================= */

/* 旧サイトは柱の中で1列に縦へ並べていた。
   base.css の 2列・3列（768px / 1024px〜）を打ち消す。
   詳細度はクラス2つ分で、base.css のメディアクエリ内（1つ分）より強い。 */
:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-cards {
  grid-template-columns: 1fr;
  gap: var(--orwa-sp-5);
}

/* 旧サイトの一覧は枠も角丸もなかった。 */
:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-card {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-card__link {
  transition: opacity .4s;
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-card__link:hover {
  opacity: .75;
}

/* スポット・チャペルの旧一覧は 16:9 で切り抜いていた（.spot-pick img）。 */
:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-card__media {
  aspect-ratio: 16 / 9;
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-card__body {
  padding: var(--orwa-sp-3) 0 0;
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-card__title {
  color: var(--smile-primary);
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-card__terms {
  padding: 0;
  margin-top: var(--orwa-sp-2);
}

/* ★カードの種類の見分け方（以下のショップ・クーポン・スポットで共通）

   WordPress は投稿の body に親のスラッグを付けない
   （付くのは single-smiletogether と postid-{ID} だけ）。
   そこで、カード自身のリンク先で見分ける（:has()）。
     ショップ  … /smiletogether/shop/{slug}/
     クーポン  … /smiletogether/coupon/{slug}/
     スポット  … /smiletogether/spot/{slug}/
   一覧・エリア別・入口の新着のどこに出ても同じ見た目になる。

   起点は .single-smiletogether / .tax-* / .orwa-smile-top。
   入口の地（.post-type-archive-smiletogether）を起点にしないのは、以前そこにあった
   ハブのボタン（/smiletogether/shop/ などへのリンク）を巻き込まないためだった。
   ボタンは外したが（2026-10-06）、戻したときに崩れないようこのままにしている。

   :has() 非対応のブラウザでは、新テーマ寄りの既定の見た目に戻るだけで崩れない。
   親投稿のスラッグ（shop / coupon / spot）を変えると効かなくなる。 */

/* --- ショップ・クーポン：3:2 -------------------------------
   商品写真で、旧サイトは 270×180（3:2）だった。16:9 では商品の上下が切れる。 */

:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link:is([href*="/smiletogether/shop/"], [href*="/smiletogether/coupon/"])) .orwa-card__media {
  aspect-ratio: 3 / 2;
}

/* --- ショップ：見出し＋写真と付箋の横並び ------------------
   旧サイト（archive-shop.php）の1件は
     ショップ名（灰色の太字・灰色の下線）
     写真（左） ＋ クリップ付きの付箋（右）
   の形だった。
   card.php の並びは 写真 → 名前 → 住所 のため、
   .orwa-card__body を display: contents にして名前と住所を
   リンクのグリッドへ直接並べ、名前を上へ、住所を付箋へ置き直す。
   付箋には本文のクーポン部分（.orwa-card__coupon。card.php が最初の h2 以降を出す）を入れる。
   h2 を持たない投稿は住所（.orwa-card__meta）が付箋になる。 */

:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--orwa-sp-3);
}

:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__body {
  display: contents;
}

/* SP では DOM の順（写真が先）を入れ替えて名前を先頭にする。 */
:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__title {
  order: -1;
  margin: 0;
  padding-bottom: var(--orwa-sp-2);
  border-bottom: 1px solid var(--smile-heading);
  font-size: var(--orwa-fs-xl);
  color: var(--smile-heading);
}

/* 付箋（旧 .box-015）。 */
:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) :is(.orwa-card__meta, .orwa-card__coupon) {
  position: relative;
  align-self: start;
  padding: var(--orwa-sp-3) var(--orwa-sp-5) var(--orwa-sp-4) var(--orwa-sp-3);
  border-radius: 3px;
  background: var(--smile-note-bg);
  box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
  color: var(--orwa-text);
}

/* クリップ。旧サイトの寸法のまま。 */
:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) :is(.orwa-card__meta, .orwa-card__coupon)::before,
:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) :is(.orwa-card__meta, .orwa-card__coupon)::after {
  position: absolute;
  content: "";
}

:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) :is(.orwa-card__meta, .orwa-card__coupon)::before {
  top: -15px;
  right: 10px;
  width: 15px;
  height: 50px;
  border: 3px solid #999;
  border-radius: 10px;
  box-shadow: 1px 1px 2px rgb(0 0 0 / 30%);
  transform: rotate(10deg);
}

/* 付箋の上端でクリップの線を隠し、紙を挟んでいるように見せる。 */
:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) :is(.orwa-card__meta, .orwa-card__coupon)::after {
  top: 0;
  right: 20px;
  width: 10px;
  border: 5px solid var(--smile-note-bg);
}

/* クーポン名（旧 .spot_sale__item）。オレンジの太字 17px、Arial。
   先方の指定（2026-10-06）で旧サイトの #ff571b に戻した。
   付箋の地 #feffeb とのコントラストは 3.1 で基準 4.5 に届かない（報告事項）。 */
:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card__coupon-title {
  margin: 0 0 var(--orwa-sp-2);
  font-family: Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: var(--orwa-lh-tight);
  color: var(--smile-coupon-title);
}

/* 説明。旧サイトは全文を改行どおりに出していた。
   card.php が段落・箇条書きの区切りを改行にして渡すため、pre-line でそのまま出す。 */
:is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card__coupon-text {
  margin: 0;
  font-size: var(--orwa-fs-sm);
  white-space: pre-line;
}

/* 740px の柱いっぱいの画面では、旧サイトと同じく写真と付箋を横に並べる。
   柱の内側は 700px。旧サイトの写真幅（約45%）に合わせる。 */
@media (min-width: 768px) {
  :is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__link {
    grid-template-columns: 45% 1fr;
    grid-template-areas:
      "title title"
      "media note";
  }

  :is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__title {
    grid-area: title;
  }

  :is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__media {
    grid-area: media;
  }

  :is(.single-smiletogether, .tax-smile_shop_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) :is(.orwa-card__meta, .orwa-card__coupon) {
    grid-area: note;
  }
}

/* --- スポット：写真＋小さなキャプション ---------------------
   旧サイト（archive-spot.php）は、柱いっぱいの写真の左上にエリア名の帯を重ね、
   写真の下に施設名を小さな灰色の文字で添えるだけだった。住所は出していない。 */

:is(.single-smiletogether, .tax-smile_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/spot/"]) {
  position: relative;
}

:is(.single-smiletogether, .tax-smile_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/spot/"]) .orwa-card__body {
  padding-top: var(--orwa-sp-1);
}

:is(.single-smiletogether, .tax-smile_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/spot/"]) .orwa-card__title {
  margin: 0;
  font-size: var(--orwa-fs-xs);
  font-weight: 400;
  color: var(--smile-caption);
}

/* 住所は一覧では出さない（旧サイトに合わせた）。詳細の施設情報には残る。 */
:is(.single-smiletogether, .tax-smile_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/spot/"]) .orwa-card__meta {
  display: none;
}

/* エリア帯。写真がないカードでは名前の上に重なるため、写真があるときだけ。 */
:is(.single-smiletogether, .tax-smile_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/spot/"]):has(.orwa-card__media) .orwa-card__terms {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 2px var(--orwa-sp-2);
  background: var(--smile-badge);
  color: var(--orwa-on-primary);
}

:is(.single-smiletogether, .tax-smile_area, .orwa-smile-top) .orwa-card:has(> .orwa-card__link[href*="/smiletogether/spot/"]):has(.orwa-card__media) .orwa-card__terms a {
  color: inherit;
}

/* =========================================================
   ピンクの帯（全ページ。template-parts/smiletogether/subheader.php）
   ========================================================= */

/* 旧サイトの帯（.sns-list）。ロゴ・X・LINE・メニューを1行に並べる。
   旧サイトの #b76e90 は白文字とのコントラストが 3.7 のため、主色 #ac577f にした。
   柱と同じ 740px。メニューは帯の真下に重ねて開く。 */
.orwa-smile-bar {
  position: relative;
  z-index: 20;
  max-width: var(--smile-w);
  margin-inline: auto;
  background: var(--smile-primary);
}

.orwa-smile-bar__inner {
  display: flex;
  gap: var(--orwa-sp-2);
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--orwa-sp-2);
}

.orwa-smile-bar__logo {
  flex: none;
}

.orwa-smile-bar__logo-image {
  display: block;
  width: 44px;
  height: 44px;
}

.orwa-smile-bar__sns {
  display: flex;
  gap: 4px;
  align-items: center;
  color: #fff;
  font-size: var(--orwa-fs-xs);
  text-decoration: none;
}

/* アイコンの SVG は黒で描かれているため、白に反転する。 */
.orwa-smile-bar__sns-icon {
  filter: brightness(0) invert(1);
}

/* メニューボタン（旧 .menu-btn）。白い3本線、開いたら × にする。 */
.orwa-smile-bar__toggle {
  position: relative;
  flex: none;
  width: 60px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.orwa-smile-bar__toggle-line,
.orwa-smile-bar__toggle-line::before,
.orwa-smile-bar__toggle-line::after {
  position: absolute;
  left: 50%;
  width: 25px;
  height: 2px;
  margin-left: -12.5px;
  border-radius: 3px;
  background: #fff;
  transition: transform .3s, background-color .3s;
}

.orwa-smile-bar__toggle-line {
  top: 50%;
}

.orwa-smile-bar__toggle-line::before,
.orwa-smile-bar__toggle-line::after {
  left: 0;
  margin-left: 0;
  content: "";
}

.orwa-smile-bar__toggle-line::before {
  bottom: 10px;
}

.orwa-smile-bar__toggle-line::after {
  top: 10px;
}

.orwa-smile-bar__toggle[aria-expanded="true"] .orwa-smile-bar__toggle-line {
  background: transparent;
}

.orwa-smile-bar__toggle[aria-expanded="true"] .orwa-smile-bar__toggle-line::before {
  bottom: 0;
  transform: rotate(45deg);
}

.orwa-smile-bar__toggle[aria-expanded="true"] .orwa-smile-bar__toggle-line::after {
  top: 0;
  transform: rotate(-45deg);
}

.orwa-smile-bar__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* メニュー（旧 .menu-content）。濃いピンクの地に白文字、項目の下に白い線。 */
.orwa-smile-bar__menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--smile-menu-bg);
}

.orwa-smile-bar__menu[hidden] {
  display: none;
}

.orwa-smile-bar__menu-list {
  margin: 0;
  padding: var(--orwa-sp-2) 10px var(--orwa-sp-3);
  list-style: none;
}

.orwa-smile-bar__menu-item {
  border-bottom: 1px solid #fff;
}

.orwa-smile-bar__menu-link {
  position: relative;
  display: block;
  padding: 9px 30px 10px 0;
  color: #fff;
  font-size: .9375rem;
  text-decoration: none;
}

/* 右端の矢印（旧 .menu-content ul li a::before）。 */
.orwa-smile-bar__menu-link::after {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  content: "";
}

/* --- PAGE TOP（旧 #page_top） -----------------------------
   右下に固定。二重の山形とその下に PAGE TOP（強調色）。
   200px スクロールしたら出す（smiletogether.js）。 */
.orwa-smile-pagetop {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  color: var(--smile-accent, #df2f81);
  font-size: 13px;
  text-decoration: none;
}

.orwa-smile-pagetop[hidden] {
  display: none;
}

.orwa-smile-pagetop__arrow {
  position: relative;
  width: 14px;
  height: 18px;
  margin-bottom: 4px;
}

.orwa-smile-pagetop__arrow::before,
.orwa-smile-pagetop__arrow::after {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
  transform: rotate(45deg);
  content: "";
}

.orwa-smile-pagetop__arrow::before {
  top: 2px;
}

.orwa-smile-pagetop__arrow::after {
  top: 9px;
}

/* =========================================================
   入口（/smiletogether/）
   ========================================================= */

/* --- 区画の見出し ----------------------------------------
   旧トップの見出しは左寄せ。灰色の文字に、頭に英字のラベル（NEWS / Coupon など）、
   下にピンクの線（旧 .section-topic-warapper / .topic-titil）。
   旧サイトのラベル色 #c781a2 は白文字とのコントラストが 2.9 のため、主色にした。
   アイコン（Font Awesome）は読み込まないため省く。 */

.orwa-smile-top .orwa-section-title {
  /* 旧 .topic-titil_jp。27px の太字、system-ui 系のゴシック（公開中の旧サイトで計測）。 */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 1.6875rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--smile-caption);
  text-align: left;
  border-bottom-color: var(--smile-primary);
}

/* 旧サイトは SP で 18px に下げていた。 */
@media (max-width: 767px) {
  .orwa-smile-top .orwa-section-title {
    font-size: var(--orwa-fs-lg);
  }
}

.orwa-smile-top__label {
  display: inline-flex;
  gap: .15em;
  align-items: center;
  margin-right: 5px;
  padding: 3px 10px;
  background: var(--smile-primary);
  color: var(--orwa-on-primary);
  font-family: var(--smile-label-font);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1px;
  vertical-align: middle;
}

/* ラベルの頭のアイコン（旧サイトは Font Awesome のアイコンフォント）。
   SVG は黒で描かれているため、白に反転する。大きさは文字に合わせる。 */
.orwa-smile-top__label-icon {
  width: 1em;
  height: 1em;
  filter: brightness(0) invert(1);
}

/* 見出しの下の白い箱（旧 .white_box）。柱のクリームの上に乗る。 */
.orwa-smile-top__body {
  padding: var(--orwa-sp-3);
  background: var(--orwa-bg);
}

/* 「◯◯一覧へ」（旧 .click_sns-btn）。幅 40%（240〜360px）の中央寄せのボタン。
   色は旧サイトの #e85c9a（--smile-button）。 */
.orwa-smile-top__more {
  /* 旧 .click_sns-btn-wrap は上下に 40px。 */
  margin-block: var(--orwa-sp-5);
  text-align: center;
}

.orwa-smile-top__more-link {
  display: block;
  width: 40%;
  min-width: 240px;
  max-width: 360px;
  margin-inline: auto;
  padding: var(--orwa-sp-2);
  border-radius: var(--orwa-radius);
  background: var(--smile-button);
  color: var(--orwa-on-primary);
  text-decoration: none;
  transition: background-color .4s;
}

.orwa-smile-top__more-link:hover,
.orwa-smile-top__more-link:focus-visible {
  background: color-mix(in srgb, var(--smile-button) 80%, #000);
}

/* --- KV・導入文・バナー ----------------------------------- */

/* KV は柱の幅いっぱい。柱の左右の余白（--orwa-gutter）を打ち消す。 */
.orwa-smile-top__kv {
  margin-inline: calc(var(--orwa-gutter) * -1);
}

.orwa-smile-top__kv-image {
  display: block;
  width: 100%;
  height: auto;
}

/* 導入文（旧 .section-title / .section-inner）。主色の太字。 */
.orwa-smile-top__intro {
  padding-top: var(--orwa-sp-5);
  color: var(--smile-primary);
  font-weight: 700;
}

.orwa-smile-top__intro-title {
  margin: 0 0 var(--orwa-sp-3);
  font-size: 1.5625rem;
  line-height: 1.6;
  text-align: center;
}

.orwa-smile-top__intro p {
  margin: 0;
  padding: 5px 10px;
  font-size: .9375rem;
  line-height: 2.2;
}

/* 芸能人バナー（旧 .bnrBox）。柱の 90% の幅で中央に置く。 */
.orwa-smile-top__banner {
  width: 90%;
  margin: var(--orwa-sp-4) auto 0;
}

.orwa-smile-top__banner-link {
  display: block;
  color: var(--orwa-text);
  text-align: center;
  text-decoration: none;
  transition: opacity .3s;
}

.orwa-smile-top__banner-link:hover {
  opacity: .7;
}

.orwa-smile-top__banner-image {
  display: block;
  width: 100%;
  height: auto;
}

.orwa-smile-top__banner-text {
  display: block;
  padding: 5px;
  font-size: var(--orwa-fs-sm);
}

/* --- NEWS ------------------------------------------------
   旧トップは日付（ピンクの太字）とタイトル（太字）を1行に並べるだけだった。
   list-item.php の写真と抜粋は入口では出さない（一覧では出す）。 */

.orwa-smile-top .orwa-news-list {
  margin: 0;
  border-top: 0;
}

.orwa-smile-top .orwa-news-item {
  border-bottom: 0;
}

.orwa-smile-top .orwa-news-item__media,
.orwa-smile-top .orwa-news-item__excerpt {
  display: none;
}

.orwa-smile-top .orwa-news-item__link {
  display: block;
  padding: var(--orwa-sp-2) 0;
}

.orwa-smile-top .orwa-news-item__body {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--orwa-sp-2);
  align-items: baseline;
}

.orwa-smile-top .orwa-news-item__date {
  margin: 0;
  white-space: nowrap;
}

.orwa-smile-top .orwa-news-item__title {
  margin: 0;
  font-size: var(--orwa-fs-sm);
  color: rgb(56 56 56);
}

/* --- Coupon（ショップ） ------------------------------------
   旧トップのクーポンは、写真（215×160）の右に名前と説明を並べ、
   点線で区切るだけだった。一覧の「名前の見出し＋付箋」とは作りが違うため、
   入口でだけ上書きする（一覧側の指定は「カード」の項）。 */

.orwa-smile-top .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) {
  padding-top: var(--orwa-sp-4);
  border-top: 1px dotted rgb(199 199 199);
}

.orwa-smile-top .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__link {
  grid-template-columns: 215px 1fr;
  grid-template-areas:
    "media title"
    "media note";
  align-items: start;
  column-gap: var(--orwa-sp-3);
  row-gap: var(--orwa-sp-2);
}

.orwa-smile-top .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__media {
  grid-area: media;
}

.orwa-smile-top .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__title {
  grid-area: title;
  padding: 0;
  border: 0;
  font-size: var(--orwa-fs-sm);
  font-weight: 400;
  color: var(--orwa-text);
}

/* 付箋にはせず、文字だけ。説明は2行で切る（旧 .shop_text）。 */
.orwa-smile-top .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) :is(.orwa-card__meta, .orwa-card__coupon) {
  grid-area: note;
  padding: 0;
  background: none;
  box-shadow: none;
}

.orwa-smile-top .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) :is(.orwa-card__meta, .orwa-card__coupon)::before,
.orwa-smile-top .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) :is(.orwa-card__meta, .orwa-card__coupon)::after {
  content: none;
}

.orwa-smile-top .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__coupon-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

/* SP は写真を上、文字を下に積む（旧サイトも同じ）。 */
@media (max-width: 767px) {
  .orwa-smile-top .orwa-card:has(> .orwa-card__link[href*="/smiletogether/shop/"]) .orwa-card__link {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "title"
      "note";
  }
}

/* --- SNS（LINE と X） --------------------------------------
   旧 .btn / .btn_text。案内文を中央に置き、下に色付きのボタン。
   LINE の緑に白文字はコントラストが 2.2 で基準に届かない（旧サイトのまま。報告事項）。 */

.orwa-smile-sns__item {
  margin-block: var(--orwa-sp-6);
  text-align: center;
}

.orwa-smile-sns__text {
  margin: 0 0 var(--orwa-sp-3);
  font-size: var(--orwa-fs-sm);
}

.orwa-smile-sns__button {
  display: flex;
  gap: var(--orwa-sp-2);
  align-items: center;
  justify-content: center;
  width: 40%;
  min-width: 240px;
  max-width: 360px;
  margin-inline: auto;
  padding: var(--orwa-sp-2);
  border-radius: var(--orwa-radius);
  color: #fff;
  text-decoration: none;
  transition: opacity .4s;
}

.orwa-smile-sns__button:hover,
.orwa-smile-sns__button:focus-visible {
  opacity: .85;
}

.orwa-smile-sns__button--line {
  background: var(--smile-line);
}

.orwa-smile-sns__button--x {
  background: var(--smile-x);
}

/* アイコンの SVG は黒で描かれているため、白に反転する。 */
.orwa-smile-sns__icon {
  filter: brightness(0) invert(1);
}

/* --- 地図 ------------------------------------------------
   旧 .map。幅に対して 70% の高さ（SP は 450〜650px）で Google マイマップを敷く。
   マウスで操作する画面では、一度クリックするまで地図を触れないように
   覆いをかける（smiletogether.js。旧 map.js）。 */

.orwa-smile-top__map-notice {
  margin: 0 0 var(--orwa-sp-2);
  font-size: var(--orwa-fs-sm);
  line-height: 1.1;
  text-align: center;
}

.orwa-smile-top__map-pin {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("../img/smiletogether/map_pin.svg") no-repeat center / contain;
  vertical-align: -2px;
}

.orwa-smile-top__map {
  position: relative;
  padding-top: 70%;
}

.orwa-smile-top__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.orwa-smile-top__map-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  border: 0;
  background: rgb(0 0 0 / 50%);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.orwa-smile-top__map-cover[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .orwa-smile-top__map {
    padding-top: clamp(450px, 120%, 650px);
  }
}

/* --- Chapel ----------------------------------------------
   旧 .Chapel-pick。16:9 の写真の左上に、チャペル名を青の帯で重ね、
   写真の下に紹介文を2行だけ出す（top-chapel.php）。 */

.orwa-smile-top__chapels {
  display: grid;
  gap: var(--orwa-sp-3);
  margin-top: var(--orwa-sp-4);
}

.orwa-smile-chapel__link {
  display: block;
  color: var(--orwa-text);
  text-decoration: none;
  transition: opacity .4s;
}

.orwa-smile-chapel__link:hover {
  opacity: .75;
}

.orwa-smile-chapel__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--orwa-bg-sub);
}

.orwa-smile-chapel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 旧 .Chapel_name。Times New Roman の太字・大文字。 */
.orwa-smile-chapel__name {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 5px 10px;
  background: var(--smile-chapel);
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

/* 旧 .Chapel_text。2行で切る。 */
.orwa-smile-chapel__text {
  display: -webkit-box;
  overflow: hidden;
  margin: var(--orwa-sp-1) 0 0;
  font-size: .8125rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* --- アンケート・事業者へ -----------------------------------
   旧 .appilication。中央寄せの見出しにピンクの線、小見出し、白い箱にアイコンと案内文。 */

.orwa-smile-top__guide {
  margin-top: 90px;
  text-align: center;
}

.orwa-smile-top__guide-title {
  margin: 0 0 var(--orwa-sp-2);
  padding-bottom: .1em;
  border-bottom: 2px solid var(--smile-primary);
  font-family: var(--smile-guide-font);
  font-size: var(--orwa-fs-lg);
  color: var(--smile-caption);
}

.orwa-smile-top__guide-sub {
  margin: 0 0 var(--orwa-sp-2);
}

.orwa-smile-top__guide-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  box-sizing: content-box;
}

.orwa-smile-top__guide-text {
  margin: 0;
  text-align: left;
}

/* =========================================================
   詳細
   ========================================================= */

/* --- 写真ギャラリー --------------------------------------
   .orwa-gallery の定義は roman.css にあり、この画面では読み込まれない。
   roman.css を読ませるとロマン時間の改修がこちらに波及するため、
   同じ形をこのファイルで持つ。
   740px の柱では2列にすると写真が小さくなるため、旧サイトと同じく1列に積む。 */

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-gallery {
  display: grid;
  gap: var(--orwa-sp-3);
  grid-template-columns: 1fr;
  margin: 0 0 var(--orwa-sp-5);
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-gallery__item {
  margin: 0;
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-gallery__image {
  display: block;
  width: 100%;
  height: auto;
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-gallery__caption {
  margin-top: var(--orwa-sp-2);
  font-size: var(--orwa-fs-sm);
  color: var(--orwa-text-sub);
}

/* --- 見出し ----------------------------------------------
   旧サイトの詳細は、施設名を灰色で中央に置き、ピンクの細線を引いていた。
   一覧の h1（ピンクの文字・線なし）とは別の処理だったため分ける。 */

.single-smiletogether :is(.orwa-facility, .orwa-news) .orwa-page-header__title {
  padding-bottom: var(--orwa-sp-2);
  border-bottom: 1px solid var(--smile-accent);
  color: var(--smile-heading);
}

/* 「施設情報」「クーポン情報」。旧サイトの「基本情報」と同じ灰色の文字。 */
.single-smiletogether .orwa-facility__info .orwa-section-title {
  color: var(--smile-heading);
}

.single-smiletogether .orwa-entry h2 {
  color: var(--smile-heading);
}

/* --- 基本情報の箱 ----------------------------------------
   旧サイトは住所・連絡先を灰色の箱に入れていた。
   行の区切り線は新テーマのまま残す（項目が増えて読みにくくなるため）。 */

.single-smiletogether .orwa-facility__info .orwa-datalist {
  padding-inline: var(--orwa-sp-4);
  border-top: 0;
  background: var(--smile-box);
}

.single-smiletogether .orwa-facility__info .orwa-datalist__row:last-child {
  border-bottom: 0;
}

/* --- クーポン枠（クーポンの詳細） ------------------------
   旧サイトの .coupon。四隅を丸く切り欠いたチケットの形に、内側の点線。

   詳細ページの body には親のスラッグが付かないため、
   見出し上の「クーポン」への戻りリンクの行き先で判別する（:has()）。
   親のスラッグ（coupon）を変えると効かなくなる。
   :has() に対応しないブラウザでは枠が付かないだけで、内容は読める。

   新サイトではクーポン名と説明が本文（h2 + p）に入っている。
   本文に他の内容が混ざる投稿では、その内容ごと枠に入る。

   四隅の切り欠きは、旧サイトは白い円を4つ重ねていた。
   要素を足さずに済むよう、背景のグラデーション4枚で描く。
   切り欠きの色は詳細の柱（白）に合わせている。
   旧サイトの和紙の模様（bg_339307.jpg）は、ショップの詳細と同じ軽くした画像で敷く（2026-10-07 渋谷さんの判断。それまでは地色だけ）。 */

.single-smiletogether .orwa-facility:has(.orwa-page-header__parent a[href$="/smiletogether/coupon/"]) .orwa-entry {
  padding: var(--orwa-sp-5) var(--orwa-sp-5);
  background:
    radial-gradient(circle at 0 0, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 100% 0, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 0 100%, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 100% 100%, var(--orwa-bg) 15px, transparent 16px),
    url("../img/smiletogether/bg_coupon.jpg") left top,
    var(--smile-coupon-bg);
  background:
    radial-gradient(circle at 0 0, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 100% 0, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 0 100%, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 100% 100%, var(--orwa-bg) 15px, transparent 16px),
    image-set(
      url("../img/smiletogether/bg_coupon.webp") type("image/webp"),
      url("../img/smiletogether/bg_coupon.jpg") type("image/jpeg")
    ) left top,
    var(--smile-coupon-bg);
  box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
  outline: 1px dashed var(--smile-coupon-line);
  outline-offset: calc(var(--orwa-sp-3) * -1);
  text-align: center;
}

/* クーポン名。旧サイトは赤の極太・中央。
   地色との差は 3.3 で、大きな太字の基準（3）は満たす。 */
.single-smiletogether .orwa-facility:has(.orwa-page-header__parent a[href$="/smiletogether/coupon/"]) .orwa-entry h2 {
  margin: 0 0 var(--orwa-sp-3);
  padding: 0;
  border: 0;
  font-size: var(--orwa-fs-xl);
  font-weight: 900;
  color: var(--smile-sale);
}

.single-smiletogether .orwa-facility:has(.orwa-page-header__parent a[href$="/smiletogether/coupon/"]) .orwa-entry > :last-child {
  margin-bottom: 0;
}

/* --- ニュース・メッセージ --------------------------------
   旧サイトの一覧は、日付がピンクの太字、タイトルが黒だった。
   base.css はタイトルを主色にしているため、ここで入れ替える。 */

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-news-item__date,
:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-news__date {
  font-weight: 700;
  color: var(--smile-primary);
}

:is(.single-smiletogether, .post-type-archive-smiletogether, .tax-smile_area, .tax-smile_chapel_area, .tax-smile_shop_area) .orwa-news-item__title {
  color: var(--orwa-text);
}

/* =========================================================
   ハブ（旧サイトの見た目に作り直したもの）
   template-parts/smiletogether/hub-spot.php ほか
   値は公開中の旧サイト（2026-10-06 計測）から。
   ========================================================= */

/* --- 冒頭（旧 .spot_name） --------------------------------
   画像の下に、ピンクの太字 30px の英字見出しと導入文。 */

.orwa-smile-hub__head {
  padding: var(--orwa-sp-4) 0 60px;
  text-align: center;
}

.orwa-smile-hub__head-image {
  display: block;
  width: 100%;
  height: auto;
}

.orwa-smile-hub__title {
  margin: 10px 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--smile-primary);
}

.orwa-smile-hub__lead {
  margin: 0 15px;
  line-height: 1.9;
  color: var(--smile-primary);
  text-align: left;
}

/* --- 区画の見出し（旧 .introduction_title） ----------------
   左寄せ・太字 20px・強調色の文字と 2.5px の下線。 */

.orwa-smile-hub__heading {
  margin: 30px 0 var(--orwa-sp-3);
  border-bottom: 2.5px solid var(--smile-accent);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--smile-accent);
}

/* --- 白い箱（旧 .white_box） ------------------------------
   柱の幅いっぱいの白地。柱の左右の余白を打ち消して広げ、中で同じだけ余白を取る。
   旧サイトは北部・南部・アンケート・事業者へを白い箱にしていた。 */

.orwa-smile-hub__box {
  margin-top: 30px;
  margin-inline: calc(var(--orwa-gutter) * -1);
  padding: 8px var(--orwa-gutter) 30px;
  background: var(--orwa-bg);
}

/* --- 地図（旧 .map） --------------------------------------- */

.orwa-smile-hub__map {
  position: relative;
  padding-top: 76%;
}

.orwa-smile-hub__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- スポット ----------------------------------------------
   写真の下の名前は、旧一覧では 14px の灰色（入口の 12px より大きい）。 */

.orwa-smile-hub .orwa-cards {
  gap: var(--orwa-sp-5);
}

/* カードの項の指定（:has() でスポットを見分ける）と同じ強さにして、後ろで上書きする。 */
.orwa-smile-hub .orwa-card:has(> .orwa-card__link[href*="/smiletogether/spot/"]) .orwa-card__title {
  font-size: .875rem;
  color: #535252;
}

/* --- 「◯◯エリアの一覧を見る」（旧 .sns_speace / .click_sns-btn） ----
   中央寄せのピンクのボタン。上 30px、下 80px あけて次の区画と離す。 */

.orwa-smile-hub__more {
  margin: 30px 0 80px;
  text-align: center;
}

.orwa-smile-hub__more-link {
  display: inline-block;
  padding: 10px 15px;
  border-radius: var(--orwa-radius);
  background: var(--smile-button);
  color: var(--orwa-on-primary);
  text-decoration: none;
  transition: background-color .4s;
}

.orwa-smile-hub__more-link:hover,
.orwa-smile-hub__more-link:focus-visible {
  background: color-mix(in srgb, var(--smile-button) 80%, #000);
}

/* --- アンケート・事業者へ（旧 .introduction / .text_center） ---- */

.orwa-smile-hub__guide {
  text-align: center;
}

.orwa-smile-hub__guide-title {
  margin: 16px 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--smile-accent);
}

.orwa-smile-hub__guide-text {
  margin: 15px 10px;
  font-size: .875rem;
  line-height: 30px;
  color: #535252;
}

.orwa-smile-hub__guide .orwa-smile-hub__more {
  margin-bottom: 40px;
}

/* --- エリア別の一覧（tax-spot.php。旧 taxonomy-area.php） -----
   ピンクの太字 30px の見出しを左寄せに置き、下にカードを並べるだけ。 */

.orwa-smile-hub__area-head {
  padding: var(--orwa-sp-4) 0 60px;
}

.orwa-smile-hub__area-title {
  margin: 10px 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--smile-primary);
}

/* =========================================================
   スポットの詳細（template-parts/smiletogether/item-spot.php）
   旧 single-spot.php / spot.css。値は公開中の旧サイト（2026-10-06 計測）から。
   ========================================================= */

/* 上半分と下半分に、それぞれ水彩の背景画像を敷く（旧 .full-img01 / .full-img02）。
   「柱」の項で .orwa-article に background（一括指定）を当てているため、
   それより強いセレクタにして、白の上に画像を重ねる。 */
.single-smiletogether .orwa-main .orwa-smile-spot__upper {
  background-image: image-set(
    url("../img/smiletogether/bg_body_sp01.webp") type("image/webp"),
    url("../img/smiletogether/bg_body_sp01.jpg") type("image/jpeg")
  );
  background-position: center top;
  background-size: cover;
}

.single-smiletogether .orwa-main .orwa-smile-spot__lower {
  padding-bottom: 120px;
  background-image: image-set(
    url("../img/smiletogether/bg_body_sp02.webp") type("image/webp"),
    url("../img/smiletogether/bg_body_sp02.jpg") type("image/jpeg")
  );
  background-position: center top;
  background-size: cover;
}

/* スポット名（旧 .spot_name h1）。灰色の太字 30px、左寄せ。 */
.orwa-smile-spot__head {
  padding: 40px 5px 25px;
}

.orwa-smile-spot__title {
  margin: 20px 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.6;
  color: #535252;
}

/* 写真（旧 .spot_img / .sub_spot_img）。大1枚（柱の 92%）の下に、小3枚を横に並べる。
   旧サイトは切り抜かず、元の縦横比のまま出していた（縦長の写真は縦長のまま）。
   2026-10-07 修正：以前は 3:2 で切り抜いていたため、縦長の写真が切れていた（例：古宇利島 空と海の教会）。 */
.orwa-smile-spot__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 4px;
  width: 92%;
  margin-inline: auto;
}

.orwa-smile-spot__photo {
  display: block;
  width: 100%;
  height: auto;
}

.orwa-smile-spot__photo--main {
  grid-column: 1 / -1;
}

/* 区画の見出し（旧 .introduction / .item_name）。強調色の太字 18px に細い下線。 */
.orwa-smile-spot__heading {
  margin: 60px 5px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--smile-accent);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--smile-accent);
}

/* 本文（旧 .text）。14px・行間 30px の灰色。 */
.orwa-smile-spot__text {
  margin: 25px 5px;
  font-size: .875rem;
  line-height: 30px;
  color: #535252;
}

.orwa-smile-spot__text p {
  margin: 0 0 1em;
}

.orwa-smile-spot__text > :last-child {
  margin-bottom: 0;
}

/* Information（旧 .white_box / .white_box_item）。灰色の箱に「項目：値」を1行ずつ。 */
.orwa-smile-spot__info {
  margin: 10px 5px;
  background: var(--smile-box);
}

.orwa-smile-spot__info-row {
  display: flex;
  padding: 15px;
  line-height: 1.9;
  color: #535252;
}

.orwa-smile-spot__info-term,
.orwa-smile-spot__info-desc {
  margin: 0;
}

.orwa-smile-spot__info-desc {
  overflow-wrap: anywhere;
}

/* 地図（旧 .map）。幅に対して 70% の高さ。SP は 450〜650px。 */
.orwa-smile-spot__map {
  position: relative;
  margin: 25px 5px;
  padding-top: 70%;
}

.orwa-smile-spot__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .orwa-smile-spot__map {
    padding-top: clamp(450px, 120%, 650px);
  }
}

/* 撮影ご希望の方へ・事業者へ（旧 .sub_topic_titile / .text_center）。
   灰色の太字 22.5px を中央に置き、強調色の細い下線。 */
.orwa-smile-spot__guide {
  text-align: center;
}

.orwa-smile-spot__guide-title {
  margin: 60px 5px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--smile-accent);
  font-family: var(--smile-guide-font);
  font-size: 1.40625rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--smile-caption);
}

.orwa-smile-spot__guide-text {
  margin: 15px 5px;
  line-height: 30px;
  color: #535252;
}

/* ボタンは一覧と同じ部品。旧詳細は上 25px・下 100px。 */
.orwa-smile-spot__guide .orwa-smile-hub__more {
  margin: 25px 0 100px;
}

/* 関連スポット（旧 .other_location）。 */
.orwa-smile-spot__related-title {
  margin: 20px 5px;
  font-family: var(--smile-guide-font);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--smile-caption);
}

/* --- スライダー（旧 slick） ----------------------------------
   3件ずつ横に並べ、横スクロールで送る（scroll-snap）。
   自動送りとドットは smiletogether.js。JS が動かなくても横スクロールで全件見られる。 */

.orwa-smile-slider {
  width: 95%;
  margin-inline: auto;
}

.orwa-smile-slider__track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.orwa-smile-slider__track::-webkit-scrollbar {
  display: none;
}

.orwa-smile-slider__track:focus-visible {
  outline: 2px solid var(--smile-primary);
  outline-offset: 4px;
}

.orwa-smile-slider__item {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
}

.orwa-smile-slider__link {
  display: block;
  color: var(--smile-caption);
  text-align: center;
}

.orwa-smile-slider__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.orwa-smile-slider__name {
  display: block;
  line-height: 1.9;
}

/* ドット（旧 .slick-dots）。灰色の小さな丸、表示中は濃い灰色。
   押しやすいよう、ボタン自体は 24px 四方にして中に丸を描く。 */
.orwa-smile-slider__dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.orwa-smile-slider__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.orwa-smile-slider__dot::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transform: translate(-50%, -50%);
  content: "";
}

.orwa-smile-slider__dot[aria-current="true"]::before {
  background: #333;
}

/* =========================================================
   チャペルのハブ（template-parts/smiletogether/hub-chapel.php / chapel-row.php）
   旧 archive-chapel.php / archive-chapel.css。値は公開中の旧サイト（2026-10-06 計測）から。
   ========================================================= */

/* 見出しの件数（旧 .count）。13px の太字。 */
.orwa-smile-hub__count {
  padding-left: 5px;
  font-size: .8125rem;
}

/* エリアごとの白い箱（旧 .white_box）。クリームの柱の中に置く。 */
.orwa-smile-hub__panel {
  margin-top: 10px;
  padding: 8px 0 30px;
  background: var(--orwa-bg);
}

/* 「TOPへ戻る」。旧サイトは上 40px・下 30px。 */
.orwa-smile-hub__more--panel {
  margin: 40px 0 30px;
}

/* --- チャペル1件（旧 .front__storage-chapel） -----------------
   写真（37%）と文字（63%）を横に並べ、下に薄い線で区切る。 */

.orwa-smile-chapel-row {
  margin: 20px 10px;
  padding-bottom: 5px;
  border-bottom: .5px solid rgb(205 204 202);
}

.orwa-smile-chapel-row__link {
  display: flex;
  color: #535252;
  text-decoration: none;
  transition: opacity .4s;
}

.orwa-smile-chapel-row__link:hover {
  opacity: .75;
}

.orwa-smile-chapel-row__media {
  flex: 0 0 37%;
  padding-right: 10px;
}

.orwa-smile-chapel-row__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.orwa-smile-chapel-row__body {
  flex: 1;
  min-width: 0;
}

/* エリアのラベルと市町村（旧 .front__chapel_box-inner / .front__chapel_area）。 */
.orwa-smile-chapel-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin: 0 0 3px;
  font-size: .875rem;
  line-height: 1.9;
  color: var(--smile-caption);
}

/* ラベルの色は旧サイトのまま（エリアごとに色分け）。
   白文字とのコントラストは北部 2.9・中部 3.4・南部 3.9・宮古島 2.4 で基準に届かない（報告事項）。 */
.orwa-smile-chapel-row__tag {
  padding: 2px 4px;
  border-radius: 2px;
  color: #fff;
  line-height: 1.2;
}

.orwa-smile-chapel-row__tag--hokubu   { background: #de7f11; }
.orwa-smile-chapel-row__tag--chubu    { background: #e65a5a; }
.orwa-smile-chapel-row__tag--nanbu    { background: #589315; }
.orwa-smile-chapel-row__tag--miyako   { background: #27acff; }
.orwa-smile-chapel-row__tag--ishigaki { background: #1c4ef3; font-size: .75rem; }

/* チャペル名（旧 .front_chapel_name）。14px の太字。 */
.orwa-smile-chapel-row__name {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
  color: rgb(45 44 45);
}

/* 紹介文（旧 .text-title_overflow）。12px、2行で切る。 */
.orwa-smile-chapel-row__text {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: .75rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* --- チャペルの詳細（item-spot.php の type=chapel） ------------
   旧 single-chapel.php / chapel.css。スポットの詳細との違いだけをここに書く。 */

/* 背景はピンクの水彩（旧 bg_chapel1.jpg / bg_chapel2.jpg）。小さな画像を全面に広げる。 */
.single-smiletogether .orwa-main .orwa-smile-spot--chapel .orwa-smile-spot__upper {
  background-image: image-set(
    url("../img/smiletogether/bg_chapel1.webp") type("image/webp"),
    url("../img/smiletogether/bg_chapel1.jpg") type("image/jpeg")
  );
}

.single-smiletogether .orwa-main .orwa-smile-spot--chapel .orwa-smile-spot__lower {
  background-image: image-set(
    url("../img/smiletogether/bg_chapel2.webp") type("image/webp"),
    url("../img/smiletogether/bg_chapel2.jpg") type("image/jpeg")
  );
}

/* 📍場所（旧 .spot_name p）。15px の灰色。 */
.orwa-smile-spot__location {
  margin: 0;
  line-height: 1.9;
  color: var(--smile-caption);
}

/* ボタンの余白は旧チャペルの詳細では上 30px・下 80px（スポットは 25px・100px）。 */
.orwa-smile-spot--chapel .orwa-smile-spot__guide .orwa-smile-hub__more {
  margin: 30px 0 80px;
}

/* =========================================================
   ショップのハブ（template-parts/smiletogether/hub-shop.php / shop-row.php）
   旧 archive-shop.php / archive-shop.css。値は公開中の旧サイト（2026-10-07 計測）から。
   ========================================================= */

/* 柱は白（旧 .contents）。柱の項と同じ強さにして、後ろで上書きする。
   ショップのエリア別（tax-rows.php）も同じ。 */
:is(.single-smiletogether, .tax-smile_shop_area) .orwa-main .orwa-smile-hub--shop {
  padding-bottom: 60px;
  background: var(--orwa-bg);
}

/* --- 冒頭（旧 .plan__head） ------------------------------- */

.orwa-smile-shop-head {
  text-align: center;
}

/* 旧 .font__Pathway。22.5px の太字、上 50px。色は旧サイトの #ad6285（主色 #ac577f とほぼ同じ）。 */
.orwa-smile-shop-head__title {
  margin: 50px 0 0;
  padding: 5px;
  font-size: 1.40625rem;
  font-weight: 700;
  line-height: 1.6;
  color: #ad6285;
}

/* 旧 .introduce_text。14px の太字・行間 2.2。旧サイトの左右 35px から柱の余白 20px を引いた。 */
.orwa-smile-shop-head__lead {
  margin: 0 0 50px;
  padding-inline: 15px;
  font-size: .875rem;
  font-weight: 700;
  line-height: 2.2;
  color: var(--smile-primary);
  text-align: left;
}

/* 旧 .middle_text。幅 315px（枠線の内側）の枠付きの一文。 */
.orwa-smile-shop-head__note {
  width: min(317px, 100%);
  margin: 0 auto;
  border: 1px solid;
  font-weight: 600;
  line-height: 1.9;
  color: var(--smile-button);
}

/* --- 一覧（旧 .monitor_inner） ----------------------------
   旧サイトは柱の 85%（740px のとき 629px）。柱の余白 20px×2 の内側から同じ幅を取る。 */

.orwa-smile-shop-list {
  width: calc(85% + 34px);
  margin-inline: auto;
}

/* 「ショップ一覧」とショップ名（旧 .shop_coupon_name_title）。
   22.5px の灰色の太字と下線、上 70px・下 20px。 */
.orwa-smile-shop-list__heading,
.orwa-smile-shop-row__name {
  margin: 70px 0 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--smile-heading);
  font-size: 1.40625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--smile-heading);
}

.orwa-smile-shop-row__name-link {
  color: inherit;
  text-decoration: none;
}

.orwa-smile-shop-row__name-link:hover {
  text-decoration: underline;
}

/* --- 1件（旧 .shop_item_wrap_flex） -----------------------
   SP は縦に積み、768px 以上で写真 270px と付箋を横に並べる。 */

.orwa-smile-shop-row__body {
  margin-bottom: 40px;
}

.orwa-smile-shop-row__media {
  display: block;
}

/* SP の写真は幅いっぱい・高さ 230px（旧 SP の .shop-item_img）。 */
.orwa-smile-shop-row__image {
  display: block;
  width: 100%;
  height: 230px;
  margin-bottom: 10px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .orwa-smile-shop-row__body {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 10px;
    align-items: start;
  }

  .orwa-smile-shop-row__image {
    height: auto;
    margin-bottom: 0;
    aspect-ratio: 3 / 2;
  }
}

/* --- 付箋（旧 .box-015） ----------------------------------- */

.orwa-smile-shop-row__note {
  display: block;
  position: relative;
  padding: 7.5px 15px 22.5px;
  border-radius: 3px;
  background: var(--smile-note-bg);
  box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
  color: #333;
  text-decoration: none;
}

/* クリップ。旧サイトの寸法のまま。 */
.orwa-smile-shop-row__note::before,
.orwa-smile-shop-row__note::after {
  position: absolute;
  content: "";
}

.orwa-smile-shop-row__note::before {
  top: -15px;
  right: 10px;
  width: 15px;
  height: 50px;
  border: 3px solid #999;
  border-radius: 10px;
  box-shadow: 1px 1px 2px rgb(0 0 0 / 30%);
  transform: rotate(10deg);
}

/* 付箋の上端でクリップの線を隠し、紙を挟んでいるように見せる。 */
.orwa-smile-shop-row__note::after {
  top: 0;
  right: 20px;
  width: 10px;
  border: 5px solid var(--smile-note-bg);
}

/* クーポン名（旧 .spot_sale__item）。オレンジの太字 17px、Arial。
   付箋の地とのコントラストは 3.1 で基準 4.5 に届かない（報告事項。先方の指定で旧サイトの色）。 */
.orwa-smile-shop-row__coupon {
  display: block;
  margin: 10px 0;
  font-family: Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.9;
  color: var(--smile-coupon-title);
}

/* 説明（旧 .shop_text）。14px。改行どおりに出す（orwa_smile_coupon() が改行にして渡す）。 */
.orwa-smile-shop-row__text {
  display: block;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--smile-caption);
  white-space: pre-line;
}

/* --- ボタン（旧 .button_wrap_flex / .button-line / .button-mail） ----
   幅 160px・角丸 5px。色は旧サイトのまま。
   白文字とのコントラストは LINE #0fc747 が 2.2、申込み #fa5f27 が 3.0 で基準 4.5 に届かない（報告事項）。
   ボタン本体はショップの詳細（.orwa-smile-shop__button）と共通。 */

.orwa-smile-shop-row__buttons {
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orwa-smile-shop-row__button,
.orwa-smile-shop__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  margin: 10px 5px;
  padding: 9px 15px;
  border-radius: 5px;
  font-weight: 500;
  line-height: normal;
  color: #fff;
  text-decoration: none;
  transition: transform .5s ease;
}

.orwa-smile-shop-row__button:hover,
.orwa-smile-shop__button:hover {
  transform: translateY(3px);
}

.orwa-smile-shop-row__button--line,
.orwa-smile-shop__button--line {
  background: #0fc747;
}

.orwa-smile-shop-row__button--apply,
.orwa-smile-shop__button--apply {
  background: #fa5f27;
}

/* =========================================================
   ショップの詳細（template-parts/smiletogether/item-shop.php）
   旧 single-shop.php / shop.css。値は公開中の旧サイト（2026-10-07 計測）から。
   ========================================================= */

.single-smiletogether .orwa-main .orwa-smile-shop {
  padding-bottom: 60px;
}

/* 旧サイトは柱の 85%（740px のとき 629px）。ショップ一覧（.orwa-smile-shop-list）と同じ幅。 */
.orwa-smile-shop__inner {
  width: calc(85% + 34px);
  margin-inline: auto;
}

/* --- 冒頭（旧 .plan__head / .middle_text / .coupon_icon） ----------
   ピンクの太字 18px の2行と、クーポンのアイコン（柱の 19%）を横に並べる。 */

.orwa-smile-shop__catch {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 70px 0 0;
  padding: 10px;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.9;
  color: #b97393;
}

.orwa-smile-shop__catch-icon {
  box-sizing: border-box;
  width: calc(19% + 20px);
  height: auto;
  padding-inline: 10px;
}

/* --- ショップ名・「基本情報」（旧 .shop_coupon_name_title） ------
   22.5px の灰色の太字・中央、ピンクの下線。上 80px・下 20px。
   旧サイトの下線 #d72991 は強調色に寄せた（「色」の項）。 */

.orwa-smile-shop__heading {
  margin: 80px 0 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--smile-accent);
  font-size: 1.40625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--smile-heading);
  text-align: center;
}

.orwa-smile-shop__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* 紹介文（旧 .basic_information）。行間 40px・左寄せ。 */
.orwa-smile-shop__read {
  margin: 0 0 40px;
  line-height: 2.6667;
  color: var(--smile-caption);
}

.orwa-smile-shop__read p {
  margin: 0;
}

/* --- Coupon（旧 .coupon-content / .coupon-jp） ------------------
   明朝の 30px。下に灰色の点線。 */

.orwa-smile-shop__coupon-title {
  margin: 25px 0;
  padding: 20px 10px;
  border-bottom: 1px dashed #ddd;
  font-family: "Times New Roman", YuMincho, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--smile-heading);
  text-align: center;
}

.orwa-smile-shop__coupon-sub {
  display: block;
  font-size: .9375rem;
}

/* --- チケット（旧 .coupon / .coupon-inner） ---------------------
   和紙の模様（旧 bg_339307.jpg を枠の大きさに切り抜いて軽くしたもの）に、内側の点線。
   四隅の切り欠きは、旧サイトは白い円を4つ重ねていた。
   要素を足さずに済むよう、背景のグラデーション4枚で描く（クーポン枠の項と同じ）。 */

.orwa-smile-ticket {
  margin: 20px 0;
  padding: 25px 20px;
  background:
    radial-gradient(circle at 0 0, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 100% 0, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 0 100%, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 100% 100%, var(--orwa-bg) 15px, transparent 16px),
    url("../img/smiletogether/bg_coupon.jpg") left top,
    var(--smile-coupon-bg);
  background:
    radial-gradient(circle at 0 0, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 100% 0, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 0 100%, var(--orwa-bg) 15px, transparent 16px),
    radial-gradient(circle at 100% 100%, var(--orwa-bg) 15px, transparent 16px),
    image-set(
      url("../img/smiletogether/bg_coupon.webp") type("image/webp"),
      url("../img/smiletogether/bg_coupon.jpg") type("image/jpeg")
    ) left top,
    var(--smile-coupon-bg);
  box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
  text-align: center;
}

.orwa-smile-ticket__inner {
  padding: 20px;
  border: 1px dashed var(--smile-coupon-line);
}

/* クーポン名（旧 .price）。赤の極太 20px。 */
.orwa-smile-ticket__name {
  margin: 10px 0;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.6;
  color: var(--smile-sale);
}

/* 説明（旧 .coupon-text）。改行どおりに出す（orwa_smile_coupon() が改行にして渡す）。 */
.orwa-smile-ticket__text {
  margin: 0;
  line-height: 1.9;
  color: var(--smile-caption);
  white-space: pre-line;
}

/* 有効期限（旧 .date）。14px の太字。 */
.orwa-smile-ticket__date {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--smile-heading);
}

/* --- ボタン（旧 .button_wrap_flex）。中央に寄せて並べる。 ------- */

.orwa-smile-shop__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

/* --- クーポンの使用方法（旧 .box-016） --------------------------- */

.orwa-smile-shop__usage {
  margin: 30px 0;
  padding: 7.5px 15px 22.5px;
  border-radius: 3px;
  background: #fdf9f6;
  color: #333;
}

.orwa-smile-shop__usage-title {
  margin: 10px 0;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.9;
  color: var(--smile-heading);
  text-align: center;
}

.orwa-smile-shop__usage-text {
  margin: 0;
  line-height: 1.9;
  color: var(--smile-caption);
}

/* --- 基本情報（旧 .box-015 / .basic_information_box / .basic_box_item） ----
   灰色の箱に「項目：値」を1行ずつ。行の間は 20px。 */

.orwa-smile-shop__info-box {
  margin-top: 20px;
  padding: 3px 25px;
  background: var(--smile-box);
}

.orwa-smile-shop__info {
  margin: 10px 0;
}

.orwa-smile-shop__info-row {
  margin-block: 20px;
  line-height: 1.9;
  color: #333;
}

.orwa-smile-shop__info-term,
.orwa-smile-shop__info-desc {
  display: inline;
  margin: 0;
}

.orwa-smile-shop__info-desc a {
  color: inherit;
}

/* =========================================================
   ニュースのハブ・詳細（template-parts/smiletogether/hub-news.php / item-news.php）
   旧 archive-news.php / single-news.php。値は公開中の旧サイト（2026-10-07 計測）から。
   柱はクリーム（旧サイトも一覧・詳細ともクリーム）。
   ========================================================= */

/* --- 一覧（旧 .news_lists / .news_item / .news_date） -----------
   日付（ピンクの太字）とタイトルを横に並べ、タイトルが長いときは日付の右で折り返す。 */

.orwa-smile-news {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0 2.5px;
  list-style: none;
}

.orwa-smile-news__link {
  display: flex;
  column-gap: 20px;
  color: #000;
  text-decoration: none;
}

.orwa-smile-news__link:hover .orwa-smile-news__title {
  text-decoration: underline;
}

.orwa-smile-news__date {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--smile-primary);
}

/* 「TOPページへ戻る」（旧 .btn）。上 50px・下 70px。 */
.orwa-smile-hub__more--news {
  margin: 50px 0 70px;
}

/* --- 詳細（旧 #single / .post_title / .post_content） ------------ */

.orwa-smile-post {
  padding-bottom: 60px;
}

/* タイトル。ピンクの太字 30px・左寄せ。 */
.orwa-smile-post__title {
  margin: 20px 0 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--smile-primary);
}

.orwa-smile-post__content {
  margin-top: 50px;
  line-height: 1.9;
  color: var(--smile-caption);
}

.orwa-smile-post__content p {
  margin: 0 0 10px;
}

/* 本文の見出し。旧サイトは 22.5px の太字・黒。 */
.orwa-smile-post__content :is(h2, h3) {
  margin: 50px 0 10px;
  font-size: 1.40625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--orwa-text);
}

.orwa-smile-post__content img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================================================
   応援メッセージのハブ・詳細（template-parts/smiletogether/hub-message.php / item-message.php / message-line.php）
   旧 archive-message.php / single-message.php。値は公開中の旧サイト（2026-10-07 計測）と旧 CSS から。
   見出しは明朝、柱の外は薄いピンク（旧 body #faeff5）、柱はクリーム。
   ========================================================= */

.single-smiletogether .orwa-main:has(.orwa-smile-message) {
  background: #faeff5;
}

.orwa-smile-message {
  position: relative;
  padding-bottom: 60px;
}

/* 見出し・名前などの明朝（旧 "Times New Roman" / Noto Serif JP。Mac ではヒラギノ明朝で出ていた）。 */
.orwa-smile-message :is(.orwa-smile-message__title, .orwa-smile-message__lead, .orwa-smile-message__heading, .orwa-smile-message__line-title, .orwa-smile-message__name-title) {
  font-family: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-weight: 700;
  color: #ad6285;
  text-align: center;
}

/* 導入文だけは灰色（旧 .title_center #494747）。上の指定より強くする。 */
.orwa-smile-message .orwa-smile-message__lead {
  font-weight: 600;
  color: #494747;
}

/* --- 冒頭（旧 .title_position / .text / .title_center） -------------
   旧サイトは文字が順に光って現れ、最後は不透明度 0.7 で止まっていた。止まった後の見た目にする。 */

.orwa-smile-message__head {
  padding-top: 70px;
}

.orwa-smile-message__title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.9;
  letter-spacing: 2px;
  opacity: .7;
}

.orwa-smile-message__title-en,
.orwa-smile-message__title-main {
  display: block;
}

.orwa-smile-message__title-strong {
  font-size: 2.8125rem;
  font-weight: 900;
}

.orwa-smile-message__lead {
  margin: 20px 0 90px;
  font-size: 1rem;
  line-height: 27px;
  opacity: .7;
}

@media (min-width: 768px) {
  .orwa-smile-message__lead {
    font-size: 1.25rem;
    line-height: 50px;
  }
}

/* --- 芸能人の白い箱（旧 .artist_item_bg） --------------------------- */

.orwa-smile-message__box {
  position: relative;
  padding: 25px 15px;
  background: var(--orwa-bg);
}

@media (min-width: 768px) {
  .orwa-smile-message__box {
    padding-inline: 30px;
  }
}

/* ハート（旧 .fuwafuwa01 / .fuwafuwa02）。ゆらゆら揺らす。 */
.orwa-smile-message__heart {
  position: absolute;
  z-index: 1;
  width: 90px;
  height: auto;
}

.orwa-smile-message__heart--top {
  top: -25px;
  right: 0;
}

.orwa-smile-message__heart--bottom {
  top: -40px;
  left: 0;
}

@media (min-width: 768px) {
  .orwa-smile-message__heart {
    width: 110px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .orwa-smile-message__heart {
    animation: orwa-smile-fuwafuwa 4s ease-in-out infinite alternate;
  }
}

@keyframes orwa-smile-fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }

  50% {
    transform: translate(0, -7px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}

/* 区画の見出し（旧 h2）。明朝 22.5px。 */
.orwa-smile-message__heading {
  margin: 18px 0 8px;
  font-size: 1.40625rem;
  line-height: 1.6;
}

.orwa-smile-message__text {
  margin: 0 0 30px;
  line-height: 1.9;
  color: var(--smile-caption);
}

/* 写真と名前を3列（狭い画面では2列・1列）。写真は 210×160 の比率で切り抜く。 */
.orwa-smile-message__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 0 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.orwa-smile-message__link {
  display: block;
  text-align: center;
  text-decoration: none;
}

.orwa-smile-message__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 160;
  object-fit: cover;
}

.orwa-smile-message__name {
  display: block;
  margin-bottom: 15px;
  font-size: 1.0625rem;
  color: #d32a79;
}

.orwa-smile-message__link:hover .orwa-smile-message__name {
  text-decoration: underline;
}

/* --- LINE の案内（旧 .btn / 詳細の Video Message） ---------------- */

.orwa-smile-message__line {
  position: relative;
  margin-top: 90px;
  padding: 50px 10px 20px;
  text-align: center;
}

.orwa-smile-message__line--box {
  margin-top: 0;
  padding: 20px 10px 40px;
  background: var(--orwa-bg);
}

.orwa-smile-message__line-title {
  margin: 0;
  font-size: 1.096875rem;
  line-height: 1.6;
}

.orwa-smile-message__line-text {
  margin: 10px 0;
  padding-inline: 10px;
}

/* ボタン（旧 .click_sns-btn。LINE の緑）。 */
.orwa-smile-message__line-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: min(360px, 100%);
  margin-top: 20px;
  padding: 8px;
  border-radius: 6px;
  background: #0fc747;
  color: #fff;
  text-decoration: none;
  transition: background-color .5s;
}

.orwa-smile-message__line-button:hover {
  background: color-mix(in srgb, #0fc747 80%, #000);
}

.orwa-smile-message__line-icon {
  width: 28px;
  height: auto;
  filter: brightness(0) invert(1);
}

/* --- 詳細（旧 single-message.php） ---------------------------------- */

/* 名前（旧 h1.title_position）。柱の幅いっぱいにピンクの下線。 */
.orwa-smile-message__name-title {
  margin: 0 calc(var(--orwa-gutter) * -1) 30px;
  padding: 70px var(--orwa-gutter) 0;
  border-bottom: 1px solid var(--smile-accent);
  font-size: 1.875rem;
  line-height: 1.6;
}

/* 写真（旧 .ms_photo）。710×500 で切り抜き、下に金色のボタンを重ねる。 */
.orwa-smile-message__visual {
  position: relative;
  margin-top: 50px;
}

.orwa-smile-message__visual-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 710 / 500;
  object-fit: cover;
}

/* 「Video Play 動画を見る」（旧 .button.downloadBtn.shiny）。金色のグラデーションに、白い光の帯が3秒ごとに斜めに流れる。
   英字は旧サイトと同じ Cinzel（大文字だけの書体。小文字は小さな大文字で出る）。
   旧サイトは Google Fonts から読み込んでいた。テーマに置いて自前で配信する（下の @font-face。美ら海の Pathway Gothic One と同じ扱い）。
   2026-10-07 修正：以前は明朝のスモールキャップで代用し、光の帯も入れていなかった。 */
@font-face {
  font-family: Cinzel;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cinzel-latin.woff2") format("woff2");
}

.orwa-smile-message__video {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: min(220px, 70%);
  padding: 4px 0 0;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #f2d300, #e3ae0d);
  color: #3e3e3e;
  font-family: Cinzel, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
  transform: translateX(-50%);
}

/* 光の帯（旧 .shiny:after）。動きを減らす設定の閲覧者には出さない。 */
.orwa-smile-message__video::after {
  position: absolute;
  top: -200%;
  left: -150%;
  width: 70px;
  height: 500%;
  background: linear-gradient(90deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 60%) 40%, rgb(255 255 255 / 0%), rgb(255 255 255 / 60%), rgb(255 255 255 / 0%));
  content: "";
  transform: rotate(60deg);
}

@media (prefers-reduced-motion: no-preference) {
  .orwa-smile-message__video::after {
    animation: orwa-smile-shine 3s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orwa-smile-message__video::after {
    display: none;
  }
}

@keyframes orwa-smile-shine {
  0% {
    left: -100%;
  }

  80% {
    left: 150%;
  }

  100% {
    left: 150%;
  }
}

.orwa-smile-message__video-en {
  font-size: 1.5625rem;
  line-height: 40px;
}

/* 旧 .video_play。Cinzel に日本語の字形はないため、本文のゴシックの太字で出る（旧サイトも同じ）。 */
.orwa-smile-message__video-ja {
  font-size: .9375rem;
  line-height: 24px;
}

/* プロフィール（旧 .content_area / .profile_text）。花の線で挟む。 */
.orwa-smile-message__profile {
  margin: 30px 0 70px;
}

.orwa-smile-message__ornament {
  display: block;
  width: 100%;
  height: auto;
}

.orwa-smile-message__profile-text {
  padding: 0 0 20px;
  font-size: 1rem;
  line-height: 2.5;
  color: var(--smile-caption);
}

.orwa-smile-message__profile-text p {
  margin: 0;
}

/* TASK_16：ニュース本文の長い罫線・URLを画面幅で折り返す。 */
.orwa-smile-post__content { overflow-wrap: anywhere; }
.orwa-smile-post__content iframe { max-width: 100%; }
@media (max-width: 767px) {
  .orwa-smile-post__content table { width: 100%; max-width: 100%; table-layout: fixed; }
  .orwa-smile-post__content :is(th, td) { overflow-wrap: anywhere; }
}