/* RunDojo semantic icons — iOS の SF Symbols と同じ役割を持つ、Web用の線画アイコン。 */
.sfi,
.with-icon::before,
.card .area::before,
.mptabs button::before,
.bk-when::before,
.bk-comm::before,
.bk-amt::before,
.hsgact a::before,
.hslist-hd h3::before,
.mtabs2 button::before,
.createpage :is(#photoSection,#communityInfo,#linksSection,#tokushoBlock) > h3::before,
.createpage #step2Heading::before,
.notesblock .nb-label::before,
.sc-pinbtn::before {
  display:inline-block;
  width:1em;
  height:1em;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--sfi) center / contain no-repeat;
  mask:var(--sfi) center / contain no-repeat;
  vertical-align:-.14em;
}

.sfi-calendar, [data-icon="calendar"], .bk-when {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
}
.sfi-pin, [data-icon="pin"], .card .area, .sc-pinbtn {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
.sfi-person, [data-icon="person"] {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-5 4-7 8-7s7 2 8 7'/%3E%3C/svg%3E");
}
.sfi-people, [data-icon="people"], .bk-comm {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 20c.7-4 2.8-6 6-6s5.3 2 6 6M15 15c3.2 0 5 1.7 5.7 5'/%3E%3C/svg%3E");
}
.sfi-money, [data-icon="money"], .bk-amt {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M7 5c0 2-2 4-4.5 4M17 5c0 2 2 4 4.5 4M7 19c0-2-2-4-4.5-4M17 19c0-2 2-4 4.5-4'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}
.sfi-clock, [data-icon="clock"] {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.sfi-route, [data-icon="route"] {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Cpath d='M8 18h3a3 3 0 0 0 3-3v-6a3 3 0 0 1 3-3'/%3E%3C/svg%3E");
}
.sfi-photo, [data-icon="photo"], #photoSection > h3,
.mtabs2 button[data-p="photos"] {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5L5 20'/%3E%3C/svg%3E");
}
.sfi-link, [data-icon="link"], #linksSection > h3 {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1'/%3E%3C/svg%3E");
}
.sfi-pencil, [data-icon="pencil"], .hsgact a[href*="/create?id="] {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 20 4.5-1 10-10-3.5-3.5-10 10L4 20Z'/%3E%3Cpath d='m13.5 7 3.5 3.5'/%3E%3C/svg%3E");
}
.sfi-plus, [data-icon="plus"], .hsgact a[href*="/create?reuse="] {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.sfi-ticket, [data-icon="ticket"], .mptabs button[data-t="bookings"] {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 0 2-2h14a2 2 0 0 0 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 0-2 2H5a2 2 0 0 0-2-2v-3a2 2 0 0 0 0-4V7Z'/%3E%3Cpath d='M13 5v14' stroke-dasharray='2 2'/%3E%3C/svg%3E");
}
.sfi-flag, [data-icon="flag"], .mptabs button[data-t="host"] {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V4M5 5h11l-1 4 1 4H5'/%3E%3C/svg%3E");
}
.sfi-info, [data-icon="info"], #communityInfo > h3,
.mtabs2 button[data-p="top"], #tokushoBlock > h3 {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E");
}
.sfi-list, [data-icon="list"], #step2Heading,
.hslist-hd h3 {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
}
.sfi-note, [data-icon="note"], .notesblock .nb-label {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18H5zM8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}

.card .area,
.bk-when, .bk-comm, .bk-amt,
.mptabs button,
.hsgact a,
.hslist-hd h3,
.mtabs2 button,
.createpage :is(#photoSection,#communityInfo,#linksSection,#tokushoBlock) > h3,
.createpage #step2Heading,
.gmbtn {
  display:flex;
  align-items:center;
  gap:.38em;
}
.card .area::before,
.bk-when::before, .bk-comm::before, .bk-amt::before,
.mptabs button::before,
.hsgact a::before,
.hslist-hd h3::before,
.mtabs2 button::before,
.createpage :is(#photoSection,#communityInfo,#linksSection,#tokushoBlock) > h3::before,
.createpage #step2Heading::before,
.notesblock .nb-label::before,
/* ★★2026-08-14：`.gmbtn::before` は**絵柄が無いまま四角が出ていた**（実測：PC で緑の 12.5px の四角）。
   `.gmbtn` に `--sfi` を与えるルールが元から無く、`mask:var(--sfi)` が無効になって
   `background:currentColor` のベタ塗りだけが残るため。★この便の前からの不具合。
   → 絵柄を持つ `.sc-pinbtn`（ピンを地図に設置）だけに `::before` を出す。
   ★`.sc-drawbtn`（✏️ なぞって描く）・`.sc-route-clear`（消去）・listing の
     「📍 Google Mapで見る」は、文字側に絵文字があるので `::before` は出さない。 */
.sc-pinbtn::before {
  content:"";
}
.with-icon { white-space:nowrap; }
.with-icon::before { content:""; margin-right:6px; color:var(--olive); }
/* ★2026-08-14 作成フォームの行ラベルアイコンは廃止（アプリに無い＋縦積みで位置が浮くため）。
   行以外（ボタン・タブ・カード）のアイコンは存続。 */
.card .area::before { color:var(--sub); width:.9em; height:.9em; }
.mptabs button::before { width:1.05em; height:1.05em; }
.hsgact a::before { width:.95em; height:.95em; }
.sc-pinbtn::before { color:var(--olive); }
.mtabs2 button[data-p="route"] {
  --sfi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Cpath d='M8 18h3a3 3 0 0 0 3-3v-6a3 3 0 0 1 3-3'/%3E%3C/svg%3E");
}

@media (max-width:719px) {
  .createpage .dtable-edit th { padding-left:2px; }
  /* ★2026-08-14 作成フォームの行ラベルアイコンは廃止（アプリに無い＋縦積みで位置が浮くため）。
     行以外（ボタン・タブ・カード）のアイコンは存続。★ここは .with-icon だけが残る。 */
  .with-icon::before {
    display:block; margin:0 auto 3px;
  }
}