/* 多摩市ビズ フロント共通スタイル（フェーズ1） */
.portal-wrap { max-width: 1040px; margin: 2rem auto 4rem; padding: 0 1rem; }
.portal-wrap--narrow { max-width: 720px; }
.portal-wrap h1 { font-size: 1.6rem; margin: 0 0 .4em; }
.portal-lead { color: #4b5563; margin: 0 0 2em; line-height: 1.7; }

/* タブ */
.portal-roletabs { display: flex; gap: .4rem; border-bottom: 2px solid #d1d5db; margin-bottom: 1.2rem; flex-wrap: wrap; }
.portal-roletabs a { padding: .6em 1.1em; text-decoration: none; color: #4b5563; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.portal-roletabs a[aria-current="page"] { background: #fff; border-color: #d1d5db; color: #111827; font-weight: 600; margin-bottom: -2px; padding-bottom: calc(.6em + 2px); }
.portal-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.portal-tabs a { padding: .4em .9em; font-size: .9rem; text-decoration: none; color: #374151; background: #f3f4f6; border-radius: 999px; }
.portal-tabs a[aria-current="page"] { background: #1f7a4d; color: #fff; }

/* フォーム */
.portal-field { margin-bottom: 1.4rem; }
.portal-label { display: block; font-weight: 600; margin-bottom: .3em; }
.portal-required { color: #b42318; font-size: .78rem; font-weight: 600; }
.portal-hint { color: #6b7280; font-size: .85rem; margin: .2em 0 .5em; line-height: 1.6; }
.portal-field input[type="text"], .portal-field input[type="email"], .portal-field input[type="tel"],
.portal-field input[type="url"], .portal-field input[type="number"], .portal-field select, .portal-field textarea {
    width: 100%; max-width: 34rem; padding: .55em .7em; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; box-sizing: border-box;
}
.portal-checkgroup { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.portal-check { display: inline-flex; align-items: center; gap: .35em; font-size: .95rem; }
.portal-repeater-row { border: 1px solid #e5e7eb; border-radius: 6px; padding: .8em 1em; margin-bottom: .6em; }
.portal-repeater-row legend { font-size: .8rem; color: #6b7280; padding: 0 .4em; }
.portal-sublabel { display: block; font-size: .85rem; color: #374151; margin: .5em 0 .2em; }
.portal-button { display: inline-block; padding: .7em 1.6em; border: 0; border-radius: 6px; background: #1f7a4d; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.portal-button--sub { background: #fff; color: #1f7a4d; border: 1px solid #1f7a4d; }
.portal-button[disabled] { background: #d1d5db; color: #6b7280; cursor: not-allowed; }
.portal-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: 2rem; }

/* 状態表示 */
.portal-status { display: inline-block; padding: .2em .8em; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.portal-status--publish { background: #d9f2e0; color: #0a6b2d; }
.portal-status--pending { background: #fff4d5; color: #7a5900; }
.portal-status--draft   { background: #e7eefc; color: #1d3f8a; }
.portal-status--stop    { background: #fce4e4; color: #8a1f11; }
.portal-panel { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.2em 1.4em; margin-bottom: 1.6rem; }
.portal-panel h2 { font-size: 1.05rem; margin: 0 0 .6em; }
.portal-checklist { margin: .4em 0 0; padding-left: 1.3em; }
.portal-checklist li { margin: .2em 0; }

/* 一覧 */
.portal-filter { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1em 1.2em; margin-bottom: 1.6rem; }
.portal-filter label { display: block; font-size: .8rem; color: #4b5563; margin-bottom: .2em; }
.portal-filter select, .portal-filter input { padding: .45em .6em; border: 1px solid #d1d5db; border-radius: 6px; font-size: .95rem; }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.portal-card { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .15s; }
.portal-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.portal-card-link { display: block; text-decoration: none; color: inherit; }
/* 高さは必ず入れ物側で決める。
   テーマのlazyload（lazysizes）が data-aspectratio からインラインの height を書き込むため、
   img 側の指定だけだと元画像の縦横比のまま伸びてしまう。!important でそれを打ち消している */
/* 公開ページの埋め込みプレビュー */
.portal-preview-frame { margin-top: 1rem; border: 1px solid #d8dee4; border-radius: 8px; overflow: hidden; background: #fff; }
.portal-preview-frame iframe { display: block; width: 100%; height: 70vh; min-height: 420px; border: 0; }
.portal-preview p a { margin-left: .8em; font-size: .88rem; }
@media (max-width: 700px) { .portal-preview-frame iframe { height: 60vh; } }

/* 入力欄の直前に置く説明。ラベルと入力欄の間に挟むので上下を詰める */
.portal-hint--field { margin: .1em 0 .45em; font-size: .82rem; color: #5b6570; line-height: 1.65; }
.portal-hint--field strong { color: #1f7a4d; font-weight: 700; }
/* サムネイルは正方形。画像は長辺を枠に合わせて縮小し、余った側は余白にする。
   切り抜かないので、縦長の商品写真や横長の店舗外観でも中身が欠けない。
   object-fit: scale-down は「contain だが元のサイズより大きくはしない」。
   小さい画像を引き伸ばしてぼやけさせないためにこれを使う。
   width/height の !important は、テーマのlazyloadが書き込むインラインの height を打ち消すため */
.portal-card-thumb { aspect-ratio: 1 / 1; max-height: 260px; overflow: hidden; background: #f3f4f6; display: grid; }
.portal-card-thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: scale-down; }
.portal-card-thumb--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em;
  background: linear-gradient(135deg, #eef2f5, #dfe6ea); color: #9ca8b2; }
.portal-card-thumb--empty svg { width: 36px; height: 36px; }
.portal-card-thumb--empty span { font-size: .68rem; font-weight: 700; letter-spacing: .16em; }
.portal-card-body { padding: .9em 1em 1.1em; }
/* ショートコードは固定ページの本文（.post_content）の中に描画される。
   テーマはそこの見出しに帯・余白（margin:4em 0 2em）・擬似要素を付けるため、
   カードとリストの見出しだけ打ち消す。
   .post_content h2 は具体度 0,1,1。クラス2つ（0,2,0）で上書きしている */
.portal-card .portal-card-name,
.portal-list .portal-list-body h2,
.portal-list .portal-list-body h3,
.portal-reason-card figcaption {
  background: none; border: 0; padding: 0; color: inherit;
}
.portal-card .portal-card-name::before, .portal-card .portal-card-name::after,
.portal-list .portal-list-body h2::before, .portal-list .portal-list-body h2::after,
.portal-list .portal-list-body h3::before, .portal-list .portal-list-body h3::after {
  content: none; display: none;
}

.portal-card-cat { font-size: .75rem; color: #1f7a4d; font-weight: 600; }
/* 事業者名は全角20文字までを想定。2行に収まらない分は省略する。
   カードの高さが名前の長さで不揃いになるのを防ぐため */
.portal-card .portal-card-name {
  font-size: .95rem; font-weight: 700; line-height: 1.5; margin: .2em 0 .4em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.portal-list .portal-list-body h2,
.portal-list .portal-list-body h3 { font-size: .95rem; line-height: 1.5; margin: 0 0 .25em; }
.portal-card-catch { font-size: .88rem; color: #374151; margin: 0 0 .5em; line-height: 1.6; }
.portal-card-area { font-size: .8rem; color: #6b7280; margin: 0; }
.portal-badge { display: inline-block; margin-top: .6em; padding: .15em .7em; background: #fff4d5; color: #7a5900; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.portal-pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2.4rem; flex-wrap: wrap; }
.portal-pagination a, .portal-pagination span { padding: .4em .8em; border: 1px solid #d1d5db; border-radius: 6px; text-decoration: none; color: #374151; }
.portal-pagination .current { background: #1f7a4d; color: #fff; border-color: #1f7a4d; }
.portal-empty { padding: 3em 1em; text-align: center; color: #6b7280; }

/* 詳細 */
.portal-detail-head { margin-bottom: 1.6rem; }
.portal-detail-cat { font-size: .85rem; color: #1f7a4d; font-weight: 600; }
.portal-detail-catch { font-size: 1.1rem; color: #374151; margin: .3em 0 0; }
.portal-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; margin-bottom: 2rem; }
.portal-gallery-item { margin: 0; }
/* 元の縦横比のまま縮小する。正方形の枠に収めると、縦長のチラシや横長のロゴが
   letterbox だらけになって小さく見えるため、枠の形は画像に合わせる。
   height の !important はテーマのlazyloadが書き込むインライン高さを打ち消すため */
.portal-gallery img { display: block; width: auto !important; height: auto !important;
  max-width: 100%; max-height: 320px; margin: 0 auto; border-radius: 8px; }
.portal-gallery figcaption { font-size: .78rem; color: #6b7280; margin-top: .3em; text-align: center; }
.portal-section { margin-bottom: 2.2rem; }
.portal-section h2 { font-size: 1.15rem; border-left: 4px solid #1f7a4d; padding-left: .6em; margin-bottom: .7em; }
.portal-section p { line-height: 1.85; }
.portal-reason { background: #f2f9f4; border: 1px solid #cfe8d8; border-radius: 8px; padding: 1.2em 1.4em; }
.portal-meta dl { display: grid; grid-template-columns: minmax(9em, 14em) 1fr; gap: .5em 1.2em; margin: 0; }
.portal-meta dt { font-weight: 600; color: #4b5563; font-size: .92rem; }
.portal-meta dd { margin: 0; line-height: 1.75; }
.portal-meta-list { margin: 0; padding: 0; list-style: none; }
.portal-meta-item { display: flex; gap: .9rem; align-items: flex-start; padding: .7em 0; border-top: 1px solid #f0f2f4; }
.portal-meta-item:first-child { border-top: 0; padding-top: 0; }
.portal-meta-item-thumb { flex: 0 0 120px; }
.portal-meta-item-thumb img { display: block; width: 100% !important; height: auto !important;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #f3f4f6; }
.portal-meta-item-body { flex: 1 1 auto; min-width: 0; }
.portal-meta-item-title { display: block; }
.portal-meta-item-detail { margin: .25em 0 0; line-height: 1.8; }
@media (max-width: 480px) {
  .portal-meta-item { display: block; }
  .portal-meta-item-thumb { width: 100%; margin-bottom: .5em; }
}
.portal-infotable { width: 100%; border-collapse: collapse; }
.portal-infotable th, .portal-infotable td { text-align: left; padding: .7em .9em; border-bottom: 1px solid #e5e7eb; font-size: .95rem; }
.portal-infotable th { width: 9em; color: #4b5563; font-weight: 600; white-space: nowrap; }
/* 事業者情報の入力をSTEPに畳む。
   入力欄25＋公開範囲13で判断が38回あり、縦一列だと最初の一歩が重い。
   保存ボタンとフォームは1つのまま（閉じたdetailsの中身も送信されるため、
   部分保存にしなくても入力済みの値が消えない） */
.portal-step { border: 1px solid #d9e2dc; border-radius: 8px; background: #fff; margin-bottom: 1rem; }
.portal-step > summary {
  display: flex; align-items: center; gap: .8em; flex-wrap: wrap;
  padding: 1em 1.2em; cursor: pointer; list-style: none; font-weight: 700; color: #1f3d2b;
}
.portal-step > summary::-webkit-details-marker { display: none; }
.portal-step > summary::after {
  content: ""; margin-left: auto; width: .55em; height: .55em;
  border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280;
  transform: rotate(45deg); transition: transform .15s;
}
.portal-step[open] > summary::after { transform: rotate(-135deg); }
.portal-step > summary:hover { background: #f7faf8; border-radius: 8px; }
.portal-step > summary:focus-visible { outline: 2px solid #1f7a4d; outline-offset: -2px; border-radius: 8px; }
.portal-step-no {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: #1f7a4d;
  background: #eaf4ee; border-radius: 3px; padding: .35em .6em; white-space: nowrap;
}
.portal-step-title { font-size: 1rem; }
.portal-step-count { font-size: .78rem; font-weight: 500; color: #6b7280; white-space: nowrap; }
.portal-step-body { padding: 0 1.2em 1.4em; border-top: 1px solid #eef2ef; padding-top: 1.2em; }
.portal-step-body > h3 { font-size: .95rem; margin: 2rem 0 .8rem; padding-bottom: .4em; border-bottom: 1px solid #eef2ef; }
.portal-step-body > h3:first-child { margin-top: 0; }
.portal-step--required { border-color: #1f7a4d; }
.portal-step--required > summary { background: #f2f9f4; border-radius: 8px 8px 0 0; }

/* 公開範囲。既定値で正しく動くので、現在の設定だけ見せて折りたたむ */
.portal-vis { margin-top: .4em; }
.portal-vis > summary {
  display: inline-flex; align-items: center; gap: .3em; cursor: pointer; list-style: none;
  font-size: .78rem; color: #6b7280; padding: .2em 0;
}
.portal-vis > summary::-webkit-details-marker { display: none; }
.portal-vis > summary::before { content: "▸"; font-size: .8em; }
.portal-vis[open] > summary::before { content: "▾"; }
.portal-vis > summary b { color: #374151; font-weight: 600; }
.portal-vis > summary:focus-visible { outline: 2px solid #1f7a4d; outline-offset: 2px; border-radius: 3px; }
.portal-vis-body { padding: .5em 0 .2em; font-size: .82rem; color: #4b5563; }
.portal-vis-body select { margin-left: .3em; }

@media (max-width: 600px) {
  .portal-step > summary { padding: .9em 1em; gap: .5em; }
  .portal-step-body { padding: 1.1em 1em 1.2em; }
  .portal-step-count { width: 100%; }
}

.portal-step--ad { border-color: #e8d9c2; }
.portal-step--ad > summary { background: #fdfaf5; border-radius: 8px 8px 0 0; }
.portal-step-no--ad { color: #a8621a; background: #f8efe3; }

/* 事業者名の下に並べるロゴ・サムネイル・キャラクター。
   点数が少ないので、埋めた枠の数だけ均等に並ぶようにする */
.portal-gallery--header { grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); margin-bottom: 2.4rem;
  align-items: end; }
.portal-gallery--header img { max-height: 180px; }
.portal-gallery-item { margin: 0; }
.portal-gallery-item figcaption { font-size: .78rem; color: #6b7280; margin-top: .4em; text-align: center; }

/* 入力アシストのモーダル */
.portal-assist { background: #f7faf8; border: 1px solid #cfe8d8; border-radius: 8px; padding: 1em 1.2em; margin-bottom: 1.6rem; }
.portal-assist p:last-child { margin-bottom: 0; }
.portal-modal { border: 0; border-radius: 12px; padding: 0; max-width: 720px; width: calc(100% - 2rem); }
.portal-modal::backdrop { background: rgba(22,36,28,.5); }
.portal-modal > section { padding: 1.8em 2em 2em; }
.portal-modal h2 { font-size: 1.15rem; margin: 0 0 .8em; }
.portal-modal-close-form { position: sticky; top: 0; text-align: right; z-index: 1; }
.portal-modal-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: #6b7280; padding: .4em .6em; }
.portal-modal-close:focus-visible { outline: 2px solid #1f7a4d; border-radius: 4px; }
.portal-modal-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin: 1.6rem 0 0; }
.portal-modal-actions form { margin: 0; }
.portal-assist-review { display: grid; grid-template-columns: auto 1fr; gap: .4em 1.2em; margin: 0 0 1.2em;
  background: #f7f8f9; border-radius: 6px; padding: 1em 1.2em; }
.portal-assist-review dt { font-weight: 600; color: #374151; white-space: nowrap; }
.portal-assist-review dd { margin: 0; word-break: break-all; }
.portal-assist-error { color: #b42318; font-size: .88rem; margin: .4em 0 0; }
.portal-assist-maptable { display: grid; gap: .8rem; max-height: 48vh; overflow-y: auto; }
.portal-assist-row { border: 1px solid #e5e7eb; border-radius: 8px; padding: .9em 1.1em; }
.portal-assist-rowhead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5em; }
.portal-assist-check { display: inline-flex; align-items: center; gap: .4em; font-size: .85rem;
  white-space: nowrap; cursor: pointer; }
.portal-assist-rowbody p { margin: 0 0 .3em; font-size: .85rem; line-height: 1.7; word-break: break-word; }
.portal-assist-existing { color: #6b7280; }
.portal-assist-incoming { color: #1f3d2b; }
.portal-assist-filled { background: #fff8e6 !important; border-color: #e5c76b !important; }

/* カテゴリー企画。業種ごとに運営チームが置く特集 */
.portal-feature { border: 1px solid #cfe8d8; border-left: 4px solid #1f7a4d; border-radius: 0 8px 8px 0;
  background: #f7faf8; padding: 1.4em 1.6em; margin: 0 0 1.6rem; }
.portal-feature--company { border-color: #d8d9e8; border-left-color: #4b5563; background: #f8f8fb; }
.portal-feature-audience { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #1f7a4d;
  margin: 0 0 .4em; }
.portal-feature--company .portal-feature-audience { color: #4b5563; }
.portal-feature h2 { font-size: 1.2rem; margin: 0 0 .4em; }
.portal-feature-lead { font-size: .95rem; color: #374151; margin: 0 0 1em; }
.portal-feature-body { display: grid; grid-template-columns: 220px 1fr; gap: 1.4rem; align-items: start; }
.portal-feature-body > div:only-child { grid-column: 1 / -1; }
.portal-feature-image img { width: 100% !important; height: auto !important; max-width: 220px;
  border-radius: 6px; display: block; }
.portal-feature-body p { margin: 0 0 .6em; font-size: .92rem; line-height: 1.85; }
.portal-feature h3 { font-size: .95rem; margin: 1.4em 0 .6em; }
.portal-feature-entries { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: .4rem; }
.portal-feature-entries li { font-size: .9rem; }
.portal-feature-entries li a { font-weight: 600; }
.portal-feature-entries li span { color: #4b5563; margin-left: .6em; font-size: .85rem; }
.portal-feature-cta { font-size: .9rem; font-weight: 600; color: #1f3d2b; margin: 1em 0 .5em; }
.portal-feature-join { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .8em; }
.portal-feature-join input[type="text"] { flex: 1 1 18rem; min-width: 0; padding: .55em .7em;
  border: 1px solid #cfe8d8; border-radius: 6px; }
.portal-teamlist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: .5rem; }
.portal-teamlist li { display: flex; align-items: center; gap: .7em; font-size: .95rem; }
.portal-team-role { font-size: .72rem; font-weight: 700; border-radius: 3px; padding: .3em .7em; white-space: nowrap; }
.portal-team-role--manager { color: #1f7a4d; background: #eaf4ee; }
.portal-team-role--sub_manager { color: #4b5563; background: #f3f4f6; }
@media (max-width: 600px) { .portal-feature-body { grid-template-columns: 1fr; } }

/* 求人のこだわり条件 */
.portal-jobtags { list-style: none; padding: 0; margin: 1.2rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.portal-jobtags li { font-size: .82rem; color: #1f3d2b; background: #eaf4ee; border: 1px solid #cfe8d8;
  border-radius: 999px; padding: .35em .9em; }
.portal-tagset { margin-bottom: 1rem; }
.portal-tagset .portal-sublabel { display: block; margin-bottom: .3em; }
.portal-post-section { font-size: 1rem; margin: 2.2rem 0 1rem; padding-bottom: .4em;
  border-bottom: 2px solid #cfe8d8; color: #1f3d2b; }
.portal-post-section:first-of-type { margin-top: 1.4rem; }

/* 代表者。顔写真は丸くせず、元の写真のまま出す（無理な切り抜きを避ける） */
.portal-person { display: grid; grid-template-columns: 180px 1fr; gap: 1.4rem; align-items: start; }
.portal-person-photo img { width: 100% !important; height: auto !important; max-width: 180px;
  border-radius: 8px; display: block; }
.portal-person-name { font-size: 1.1rem; font-weight: 700; color: #1f3d2b; margin: 0 0 .6em; }
.portal-person-title { font-size: .85rem; font-weight: 500; color: #6b7280; margin-left: .7em; }
.portal-person-body p { margin: 0 0 .9em; line-height: 1.9; }
@media (max-width: 600px) {
  .portal-person { grid-template-columns: 1fr; gap: .9rem; }
  .portal-person-photo img { max-width: 150px; }
}

/* 提供サービス・商品。左に写真、右にタイトルと説明 */
.portal-showcase { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.portal-showcase-item { display: grid; grid-template-columns: 220px 1fr; gap: 1.4rem; align-items: start;
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.2em; background: #fff; }
.portal-showcase-image { border-radius: 8px; display: grid; place-items: center; }
.portal-showcase-image img { width: auto !important; height: auto !important; max-width: 100%; max-height: 220px;
  border-radius: 8px; display: block; }
.portal-showcase-image:has(.portal-showcase-noimage) { aspect-ratio: 1 / 1; background: #f3f4f6; }
.portal-showcase-noimage { display: grid; place-items: center; color: #9ca8b2; }
.portal-showcase-noimage svg { width: 28px; height: 28px; }
.portal-showcase-body h3 { font-size: 1.05rem; margin: 0 0 .5em; line-height: 1.5; }
.portal-showcase-body p { margin: 0; font-size: .92rem; line-height: 1.85; color: #374151; }
@media (max-width: 600px) {
  .portal-showcase-item { grid-template-columns: 1fr; gap: .9rem; }
  .portal-showcase-image { max-width: 260px; }
}

/* 地域メディア一覧（プレスリリースの送付先） */
.portal-medialist { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .8rem; }
.portal-medialist > li { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1em 1.1em; background: #fff; }
.portal-media-head { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; margin-bottom: .4em; }
.portal-media-name { font-weight: 700; font-size: 1rem; color: #1f3d2b; }
.portal-media-type { font-size: .75rem; color: #6b7280; }
.portal-media-format { font-size: .72rem; color: #6b7280; background: #f3f4f6;
  border-radius: 3px; padding: .25em .6em; white-space: nowrap; }
.portal-media-cost { font-size: .72rem; font-weight: 700; border-radius: 3px; padding: .25em .6em;
  margin-left: auto; white-space: nowrap; }
.portal-media-cost--free { color: #1f7a4d; background: #eaf4ee; }
.portal-media-cost--first_free { color: #8a6d3b; background: #fff4d5; }
.portal-media-cost--paid { color: #b42318; background: #fdecea; }
.portal-media-cost--unknown { color: #6b7280; background: #f3f4f6; }
.portal-media-feature { font-size: .88rem; line-height: 1.75; color: #374151; margin: 0 0 .5em; }
.portal-media-note { font-size: .8rem; color: #8a6d3b; background: #fff8e6; border-radius: 4px;
  padding: .5em .7em; margin: 0 0 .6em; line-height: 1.7; }
.portal-media-links { display: flex; align-items: center; gap: .9em; flex-wrap: wrap; margin: 0; font-size: .85rem; }
.portal-media-links .portal-button { padding: .45em 1em; font-size: .85rem; }

/* 外部アカウントでのログイン。ボタンは縦に並べ、幅はパネルの半分に収める。
   横いっぱいに伸ばすと押し間違えやすく、メールでのログインとの区別もつきにくい */
.portal-oauth { display: grid; gap: .7rem; max-width: 50%; min-width: 240px; margin: 0 auto 1rem; }
.portal-oauth .portal-button { width: 100%; text-align: center; box-sizing: border-box; }
.portal-button--google { background: #4285f4; }
.portal-button--line { background: #06c755; }
@media (max-width: 600px) {
  .portal-oauth { max-width: 100%; min-width: 0; }
}

.portal-sns { display: flex; gap: .6rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.portal-sns a { font-size: .88rem; }

@media (max-width: 600px) {
    .portal-meta dl { grid-template-columns: 1fr; gap: .1em; }
    .portal-meta dt { margin-top: .6em; }
    .portal-infotable th { width: auto; }
}

/* 応援ボタン */
.portal-favorite { background: #f2f9f4; border: 1px solid #cfe8d8; border-radius: 8px; padding: 1.1em 1.3em; margin-bottom: 1.8rem; }
.portal-favorite .portal-hint { margin-bottom: 0; }
.portal-favorite-note { font-size: .88rem; color: #1a4d2a; margin: .5em 0 0; min-height: 1.2em; }
.portal-button[aria-pressed="true"]::before { content: "\2713 "; }

/* お気に入り一覧・配信履歴 */
.portal-list { list-style: none; padding: 0; margin: 0; }
.portal-list > li { display: flex; gap: 1rem; align-items: flex-start; padding: 1em 0; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.portal-list-thumb { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 6px; overflow: hidden; background: #f3f4f6; display: grid; }
.portal-list-thumb img { width: 100% !important; height: 100% !important; max-width: none; object-fit: scale-down; display: block; }
.portal-list-thumb--empty { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef2f5, #dfe6ea); color: #9ca8b2; }
.portal-list-thumb--empty svg { width: 22px; height: 22px; }
.portal-list-body { flex: 1 1 16rem; min-width: 0; }
.portal-list-body h3 { font-size: 1rem; margin: 0 0 .2em; }
.portal-list-body p { margin: 0; font-size: .88rem; color: #4b5563; }
.portal-list-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.portal-list-actions button { padding: .35em .9em; font-size: .82rem; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; }
.portal-list-actions button.is-danger { color: #8a1f11; border-color: #f0b4ae; }
.portal-quota { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.portal-quota li { padding: .3em .9em; border-radius: 999px; font-size: .84rem; }
.portal-quota .is-open { background: #d9f2e0; color: #0a6b2d; }
.portal-quota .is-used { background: #eef2f5; color: #6b7280; }
.portal-trend { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin: 1em 0 .4em; }
.portal-trend-bar { flex: 1; background: #1f7a4d; border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.portal-trend-labels { display: flex; gap: 4px; font-size: .68rem; color: #6b7280; }
.portal-trend-labels span { flex: 1; text-align: center; }

/* ファイルアップロード */
.portal-uploader { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1em 1.1em; background: #fbfcfd; }
.portal-uploader-grid { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 .8em; padding: 0; }
.portal-uploader-grid:empty { display: none; }
.portal-uploader-item { position: relative; width: 116px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; overflow: hidden; }
.portal-uploader-item img { display: block; width: 100%; height: 84px; object-fit: cover; }
.portal-uploader-file { display: flex; align-items: center; justify-content: center; height: 84px; background: #eef2f5; color: #4b5563; font-weight: 600; font-size: .85rem; }
.portal-uploader-name { display: block; padding: .35em .5em; font-size: .7rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-uploader-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(17,24,39,.72); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.portal-uploader-remove:hover { background: #b42318; }
.portal-uploader-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .4em; }
.portal-uploader-actions label { cursor: pointer; }
.portal-uploader-count { font-size: .82rem; color: #6b7280; }
.portal-uploader-message { font-size: .85rem; color: #7a271a; margin: .3em 0 0; min-height: 1.2em; }
.portal-uploader .portal-hint { margin-bottom: 0; }

/* トップページ用 */
.portal-herosearch { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; max-width: 720px; margin: 0 auto; }
.portal-herosearch input[type="search"] { flex: 2 1 14rem; min-width: 0; }
.portal-herosearch select { flex: 1 1 9rem; }
.portal-herosearch input, .portal-herosearch select { padding: .7em .8em; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; background: #fff; }
.portal-herosearch .portal-button { flex: 0 0 auto; padding-left: 2em; padding-right: 2em; }

.portal-grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.portal-more { text-align: center; margin-top: 1.6rem; }

.portal-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.portal-reason-card { margin: 0; background: #f2f9f4; border: 1px solid #cfe8d8; border-radius: 10px; padding: 1.4em 1.5em;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.portal-reason-thumb { height: 150px; border-radius: 8px; overflow: hidden; background: #fff; display: grid; margin-bottom: 1em; }
.portal-reason-thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: scale-down; }
/* テーマは blockquote に灰色の背景と絶対配置の擬似要素を付ける。
   カードの中では背景が二重になり、鉤括弧も本文とずれた位置に出るため打ち消す。
   鉤括弧はCSSではなくPHP側で本文に入れている（テーマの :before と衝突しないため） */
.portal-reason-card blockquote { margin: 0 0 1em; padding: 0; border: 0; background: none; position: static;
  font-size: 1rem; line-height: 1.9; color: #1f3d2b; }
.portal-reason-card blockquote::before,
.portal-reason-card blockquote::after { content: none; }
.portal-reason-card figcaption { font-size: .9rem; }
.portal-reason-card figcaption a { font-weight: 600; color: #1f7a4d; }
.portal-reason-card figcaption span { display: block; color: #4b5563; font-size: .8rem; margin-top: .2em; }

.portal-list--compact > li { padding: .8em 0; }
.portal-list--compact h3 { font-size: .98rem; }

.portal-facets { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; padding: 0; margin: 0; }
.portal-facets a { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .85em 1.1em; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none; color: #374151; transition: border-color .15s, box-shadow .15s; }
.portal-facets a:hover { border-color: #1f7a4d; box-shadow: 0 2px 10px rgba(31,122,77,.12); }
.portal-facet-name { font-weight: 600; font-size: .95rem; }
.portal-facet-count { font-size: .8rem; color: #6b7280; background: #f3f4f6; border-radius: 999px; padding: .1em .7em; }
.portal-facets--area a { background: #f9fbfa; }

.portal-stats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; padding: 0; margin: 0; text-align: center; }
.portal-stats li { padding: 1.2em .8em; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
.portal-stat-value { display: block; font-size: 1.7rem; font-weight: 700; color: #1f7a4d; line-height: 1.2; }
.portal-stat-label { display: block; font-size: .82rem; color: #6b7280; margin-top: .3em; }

@media (max-width: 600px) {
    .portal-herosearch { flex-direction: column; }
    .portal-herosearch .portal-button { width: 100%; }
}

/* 公開範囲とつながり */
.portal-visibility { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5em 0 0; font-size: .82rem; color: #4b5563; }
.portal-visibility select { padding: .3em .5em; border: 1px solid #d1d5db; border-radius: 5px; font-size: .82rem; }
.portal-visibility-hint { color: #6b7280; }
.portal-connectinfo { display: grid; grid-template-columns: minmax(10em, 15em) 1fr; gap: .6em 1.2rem; margin: 0; }
.portal-connectinfo dt { font-weight: 600; color: #1f7a4d; font-size: .92rem; }
.portal-connectinfo dd { margin: 0; line-height: 1.8; }
.portal-hiddennote { background: #f7f8f9; border-left: 3px solid #cbd5dd; padding: .7em 1em; }
.portal-connect { background: #f9fbfa; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.4em 1.5em; }
.portal-connect h2 { margin-top: 0; }
.portal-connect-state { margin: 0 0 .6em; font-weight: 600; color: #1f7a4d; }
.portal-connect-message { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: .7em .9em; margin-top: .6em !important; font-size: .9rem; line-height: 1.7; }
@media (max-width: 600px) { .portal-connectinfo { grid-template-columns: 1fr; gap: .1em; } .portal-connectinfo dt { margin-top: .6em; } }

/* AIプロンプト */
.portal-prompt { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1em 1.1em; margin-top: 1em; }
.portal-prompt h3 { font-size: .98rem; margin: 0 0 .4em; }
.portal-prompt textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.6; padding: .7em .8em; border: 1px solid #d1d5db; border-radius: 6px; background: #fbfcfd; box-sizing: border-box; }
.portal-prompt-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .6em 0 0; }
.portal-prompt-message { font-size: .85rem; color: #1a4d2a; flex-basis: 100%; }
.portal-prompt-ai { display: inline-flex; align-items: center; gap: .35em; padding: .45em .9em;
  border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #374151;
  font-size: .85rem; font-weight: 600; text-decoration: none; line-height: 1.4; }
.portal-prompt-ai:hover { border-color: #1f7a4d; color: #1f7a4d; background: #f3faf6; }
.portal-prompt-ai:focus-visible { outline: 2px solid #1f7a4d; outline-offset: 2px; }
.portal-prompt-note { margin: .5em 0 0; }

/* 事業者の写真：用途ごとの枠 */
.portal-image-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.portal-image-role { border: 1px solid #e5e7eb; border-radius: 8px; padding: .8em .9em; background: #fff; }
.portal-image-role .portal-sublabel { font-weight: 600; }
.portal-image-role .portal-hint--field { margin: .2em 0 .5em; }
.portal-image-role .portal-uploader { border: 0; padding: 0; background: transparent; }

/* 事業者への問い合わせ */
.portal-contact-cta { background: #f7faf8; border: 1px solid #d9e7de; border-radius: 8px; padding: 1.1em 1.2em; }
.portal-contact-cta h2 { margin-top: 0; }
.portal-contact-target { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.portal-contact-target-label { font-size: .8rem; color: #6b7280; }
.portal-contact-target strong { font-size: 1.05rem; }
.portal-contact-target-cat { font-size: .82rem; color: #1f7a4d; }
.portal-contact-notice { border-left: 4px solid #b45309; background: #fff8ec; color: #7a4b00;
  padding: .9em 1.1em; border-radius: 0 8px 8px 0; margin: 1.2em 0; }
.portal-contact-notice h2 { font-size: 1rem; margin: 0 0 .5em; }
.portal-contact-notice ul { margin: 0; padding-left: 1.2em; }
.portal-contact-notice li { line-height: 1.8; }
.portal-contact-draft { min-height: 1.4em; color: #1a4d2a; }
.portal-breadcrumb { font-size: .85rem; margin-bottom: .6em; }

/* 規約・ガイドラインの案内 */
.portal-note {
    margin: .8em 0; padding: .75em 1em; border-radius: 6px;
    background: #f3f4f6; border-left: 4px solid #9ca3af; font-size: .9rem; line-height: 1.7;
}
.portal-note p { margin: 0; }
.portal-note--warn { background: #fff8e6; border-left-color: #d97706; }
.portal-consent { margin: 1.2em 0; padding: .9em 1em; background: #f6f8f7; border-radius: 6px; }
.portal-consent label { display: flex; gap: .6em; align-items: flex-start; line-height: 1.7; cursor: pointer; }
.portal-consent input[type="checkbox"] { margin-top: .35em; flex: none; width: 1.1em; height: 1.1em; }