/* MONOSASHI 広告の枠（ms-units.php）。2026-11-05
   広告は催しの情報と分ける：上に「PR」と広告主、枠は白地に細い線、行き先のボタンは広告主の色（MONOSASHI の青は使わない）。
   形：正方形（横の欄）・横長（本文の終わり）・一覧型（一覧の中の1枚）・告知の画像（16:9 のまま）。影・左の色線・淡い色の面は使わない */

.msu { margin: 0; color: var(--ink, #17181F); font-family: var(--gothic, "Noto Sans JP", sans-serif); }
.msu__hd { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--meta, #6A6F80); }
.msu__pr { display: inline-block; padding: 0 5px; border: 1px solid var(--line-2, #D6DAE8); border-radius: 3px; font: 700 10.5px/1.6 var(--num, "Inter", sans-serif); letter-spacing: .06em; color: var(--meta, #6A6F80); }
.msu__a { display: block; overflow: hidden; background: #fff; border: 1px solid var(--line, #E7E9F1); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .15s; }
.msu__a:hover { border-color: var(--line-2, #D6DAE8); }
.msu__a:focus-visible { outline: 2px solid #2742D6; outline-offset: 2px; }
.msu__nw { white-space: nowrap; }
.msu__ext { flex: none; margin-left: 5px; }

/* 置き場：パソコンだけ／スマホ・タブレットだけ（同じ広告を2か所に書き、幅で片方だけ見せる。数えるのは見えている方だけ） */
.msu--sp { display: none; }
@media (max-width: 1023px) {
  .msu--pc { display: none; }
  .msu--sp { display: block; }
}
.dmain > .msu, .dmain .msu--sp { margin: 22px 0; }

/* ---- 告知の画像（セミナー） ---- */
.msu-sem { display: block; }
.msu-sem img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line, #E7E9F1); }
.msu-sem__b { display: block; padding: 12px 16px 14px; }
.msu-sem__when { display: block; font-size: 14.5px; font-weight: 800; }
.msu-sem__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2, #3B3F4D); }
.msu-sem__go { display: inline-flex; align-items: center; margin-top: 8px; font-size: 14px; font-weight: 800; color: #C2474A; }
.msu__a:hover .msu-sem__go { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) and (min-width: 600px) {
  .msu--image .msu-sem { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; }
  .msu--image .msu-sem img { border-bottom: 0; border-right: 1px solid var(--line, #E7E9F1); }
  .msu--image .msu-sem__b { padding: 14px 20px; }
}

/* ---- SHIRITAI（3つの形で同じ部品） ---- */
.msu-st { display: flex; flex-direction: column; padding: 18px 18px 18px; }
.msu-st__logo { display: block; align-self: flex-start; width: auto; height: 20px; }
/* 日本語は句読点の所で折り返す（「ん。」だけが次の行に落ちないように）。収まらない時だけ文字の途中で折る */
.msu-st__h, .msu-st__s, .msu-st__q, .msu-st__ans span, .msu-sem__when, .msu-sem__meta { word-break: keep-all; overflow-wrap: anywhere; }
.msu-st__h { display: block; margin-top: 12px; font-size: 19px; font-weight: 800; line-height: 1.45; letter-spacing: .02em; }
.msu-st__s { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2, #3B3F4D); }
.msu-st__chat { display: grid; gap: 7px; margin-top: 12px; }
.msu-st__q { justify-self: end; max-width: 86%; padding: 6px 11px; background: #F3F4F9; border-radius: 12px 12px 4px 12px; font-size: 12.5px; line-height: 1.55; }
.msu-st__ans { display: flex; align-items: flex-start; gap: 7px; }
.msu-st__ans img { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.msu-st__ans span { padding: 6px 11px; border: 1px solid var(--line, #E7E9F1); border-radius: 12px 12px 12px 4px; font-size: 12.5px; line-height: 1.55; }
.msu-st__btn { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 14px; border-radius: 8px; background: #E2641C; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.msu__a:hover .msu-st__btn { background: #C9530F; }
.msu-st__go { display: inline-flex; align-items: center; margin-top: 12px; font-size: 14px; font-weight: 800; color: #C9530F; }
.msu__a:hover .msu-st__go { text-decoration: underline; text-underline-offset: 3px; }

/* 正方形：横の欄の幅（300〜340px）で正方形に近くなる中身（見出し2行・説明・会話・ボタン）。高さは中身で決め、下端まで引き伸ばさない */
.msu-st--square .msu-st__h { font-size: 22px; line-height: 1.4; }

/* 横長：パソコンは左に文、右に会話。狭い画面は文とボタンだけ。高さは中身で決める */
.msu-st--wide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 0 28px; padding: 22px 26px; }
.msu-st--wide .msu-st__l { display: flex; flex-direction: column; align-items: flex-start; }
.msu-st--wide .msu-st__h { font-size: 21px; }
.msu-st--wide .msu-st__btn { display: inline-flex; height: 38px; padding: 0 18px; }
.msu-st--wide .msu-st__chat { margin-top: 0; }
@media (max-width: 760px) {
  .msu-st--wide { grid-template-columns: 1fr; padding: 16px 18px; }
  .msu-st--wide .msu-st__r { display: none; }
  .msu-st--wide .msu-st__h { margin-top: 10px; font-size: 18px; }
  .msu-st--wide .msu-st__btn { margin-top: 12px; }
}

/* 一覧型：イベントのカード（.gc）と同じ大きさの1枚。日付の段は持たない */
.gcs > .msu--feed { display: flex; flex-direction: column; min-width: 0; }
.msu--feed .msu__hd { margin: 0; padding: 14px 22px 0; background: #fff; border: 1px solid #E1E4EE; border-bottom: 0; border-radius: 16px 16px 0 0; }
.msu--feed .msu__a { flex: 1; border: 1px solid #E1E4EE; border-top: 0; border-radius: 0 0 16px 16px; }
.msu--feed .msu-st { padding: 10px 22px 18px; }
.msu--feed .msu-st__h { font-size: 18px; }
.msu--feed:hover .msu__hd, .msu--feed:hover .msu__a { border-color: var(--line-2, #D6DAE8); }
.msu-st__ans img { border: 1px solid var(--line, #E7E9F1); border-radius: 6px; }

/* 本文の中の正方形（スマホ・タブレット）：幅 360px で中央に置く。本文の幅いっぱいに伸ばして横長にしない */
@media (min-width: 600px) {
  .dmain .msu--sp.msu--square { max-width: 360px; margin-left: auto; margin-right: auto; }
}