/* プロミリア旅手帖の見た目（クリームの紙・紺・葉の緑・藤色）。
   HTML の作りは endfield（Layouts/dark.ctp・css/gx.css・css/dark.css）と同じクラス名で、色と形だけを変えている。
   部品の土台は base.css（endfield.css のコピー）と共通の bootstrap / li / at.css */
body.apm {
    --paper: #f7f3ea; --paper-2: #fffdf8; --paper-3: #f1ebdd;
    --ink: #27304a; --ink-2: #5b6177; --muted: #8a8778;
    --mist: #cfc9e6; --mist-2: #ebe7f5; --leaf: #6f9a4e; --leaf-d: #4f7a35; --leaf-2: #e6efd9;
    --sand: #eadfc8; --sand-ink: #6b5a3a; --line: #ddd4c2; --line-2: #e9e2d3;
    --link: #3d5f99; --em: #a8572a;
    --serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, sans-serif;
    --latin: "Cormorant Garamond", serif;
    margin: 0; padding-top: 0 !important;
    background: var(--paper) !important; color: var(--ink) !important;
    background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(160,140,110,.07) 31px 32px) !important;
    font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.8;
    -webkit-text-size-adjust: 100%;
}
.apm a { color: var(--ink); text-decoration: none; }
.apm a:hover, .apm a:focus { color: var(--leaf-d); }
.apm .en { font-family: var(--latin); font-weight: 600; letter-spacing: .16em; }
.apm *, .apm *::before, .apm *::after { box-sizing: border-box; }


/* ── ナビ（tl-nav）・フッター ── */
.apm .tl-container { max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.apm .tl-nav { position: sticky; top: 0; z-index: 1030; background: rgba(255,253,248,.96); border-bottom: 1px solid var(--line); }
.apm .tl-nav .tl-container { display: flex; align-items: center; gap: 10px; height: 56px; }
.apm .tl-brand { display: inline-flex; align-items: center; text-decoration: none; }
.apm .tl-brand .gi-logo { display: block; width: auto; height: 20px; }  /* GamesInk のロゴ（全サイト共通の SVG） */
.apm .tl-sub { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .06em; color: var(--ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.apm .apm-slash { font-family: 'Rajdhani', sans-serif; color: var(--ink-2); font-size: 16px; font-weight: 600; margin: 0 8px 0 2px; }
.apm .tl-search { margin: 0 0 0 auto; display: flex; border: 1px solid var(--line); background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.apm .tl-search input { background: none; border: 0; color: var(--ink); padding: 6px 14px; width: 210px; font-size: 12px; outline: none; }
.apm .tl-search input::placeholder { color: var(--muted); }
.apm .tl-search button { background: var(--ink); border: 0; color: #fff; padding: 0 14px; cursor: pointer; font-size: 14px; }
.apm .tl-search:focus-within { border-color: var(--ink); }
.apm .tl-main { padding: 18px 0 8px; }
.apm .efd-main { padding-top: 18px; }
.apm .tl-footer { border-top: 1px solid var(--line); margin-top: 36px; padding: 22px 0 32px; font-size: 12px; color: var(--ink-2); background: var(--paper-2); }
.apm .tl-footer a { color: var(--ink-2); text-decoration: none; }
.apm .tl-footer a:hover { color: var(--leaf-d); }
.apm .tl-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.apm .tl-footer-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; margin-bottom: 10px; }
.apm .tl-copy { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 0; }

/* ── 共通の部品（gx） ── */
.apm .gx { font-size: 14px; line-height: 1.8; }
.apm .cut { clip-path: none !important; }
.apm .gx-panel { background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
.apm .gx-main > * + * { margin-top: 18px; }
.apm .gx-main { min-width: 0; }
/* パネルの見出し: 明朝＋英語の小見出し＋二重線 */
.apm .gx-title { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 10px; margin: 0 0 14px; padding: 0 0 8px; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.4; border: 0; border-bottom: 3px double var(--line); background: none; }
.apm .gx-title::before { content: none; }
.apm .gx-title::after { content: none; }
.apm .gx-title .en { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.apm .gx-title > :not(.en) { order: 0; }

/* トップの大見出し（画像は使わず、紙＋藤色のにじみ＋✦） */
.apm .gx-hero { position: relative; min-height: 0; background: linear-gradient(115deg, var(--paper-2) 0%, var(--paper-2) 45%, var(--mist-2) 100%); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.apm .gx-hero::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line-2); border-radius: 3px; pointer-events: none; background: none; }
.apm .gx-hero::after { content: "✦"; position: absolute; right: 7%; top: 50%; transform: translateY(-50%); font-size: 120px; line-height: 1; color: var(--mist); opacity: .9; }
.apm .gx-hero-in { position: relative; z-index: 1; padding: 38px 36px; max-width: 640px; }
.apm .gx-kicker { color: var(--leaf); font-family: var(--latin); font-size: 13px; font-weight: 600; letter-spacing: .2em; }
.apm .gx-hero h1 { margin: 6px 0 12px; font-family: var(--serif); font-size: 32px; line-height: 1.45; letter-spacing: .04em; color: var(--ink); font-weight: 700; border: 0; padding: 0; background: none; }
.apm .gx-hero h1 a { color: inherit; }
.apm .gx-hero p { margin: 0; color: var(--ink-2); font-size: 14px; }
.apm .gx-nb { display: inline-block; }
/* 記事・キャラページの細い帯 */
.apm .gx-hero.is-slim::after { content: "✦"; width: auto; height: auto; left: auto; right: 4%; top: 50%; font-size: 56px; background: none; }
.apm .gx-hero.is-slim .gx-hero-in { padding: 16px 24px; max-width: none; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.apm .gx-hero.is-slim .gx-site { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.apm .gx-hero.is-slim .gx-site a { color: inherit; }
.apm .apm-site-sub { margin-left: .6em; font-size: .8em; color: var(--ink-2); }

/* カテゴリ（丸い札） */
.apm .gx-cats, .apm .efd-cats { display: flex; gap: 8px; margin: 14px 0 20px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.apm .gx-cats::-webkit-scrollbar { display: none; }
.apm .gx-cats a, .apm .efd-cats a { flex: none; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 15px; font-size: 13px; color: var(--ink); }
.apm .gx-cats a:hover { border-color: var(--ink-2); color: var(--ink); }
.apm .gx-cats a.is-on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 500; }

/* 3カラム（トップ）・2カラム（記事など） */
.apm .gx-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.apm .gx-cols.gx-cols2 { grid-template-columns: minmax(0, 1fr) 300px; }
.apm .gx-right > * + * { margin-top: 18px; }

/* 左メニュー */
.apm .gx-menu { position: sticky; top: 72px; padding: 14px 0; max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: thin; }
.apm .gx-menu .gx-title { padding: 0 16px 8px; margin: 0 0 6px; }
.apm .gx-menu.is-in-right { position: static; max-height: none; overflow: visible; }
.apm .gx-menu-h { font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--leaf-d); padding: 10px 16px 2px; letter-spacing: .04em; }
.apm .gx-menu-h::before { content: "✦ "; font-size: 10px; color: var(--leaf); }
.apm .gx-menu ul { list-style: none; margin: 0; padding: 0; }
.apm .gx-menu li a { display: block; padding: 4px 16px 4px 26px; font-size: 13px; color: var(--ink-2); border-left: 0; position: relative; }
.apm .gx-menu li a::before { content: ""; position: absolute; left: 16px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.apm .gx-menu li a:hover { background: var(--mist-2); color: var(--ink); }
.apm .gx-menu li a:hover::before { background: var(--leaf); }

/* 記事カード */
.apm .gx-posts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.apm .gx-post { display: block; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.apm .gx-post:hover { border-color: var(--ink-2); box-shadow: 0 2px 10px rgba(39,48,74,.08); }
.apm .gx-post-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--leaf-2); }
.apm .gx-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.apm .gx-post:hover .gx-post-img img { transform: scale(1.03); }
.apm .gx-post-body { padding: 8px 12px 12px; }
.apm .gx-post-date { font-family: var(--latin); font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .08em; }
.apm .gx-post-title { margin: 2px 0 0; font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink); font-weight: 700; }
.apm .gx-post-desc { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); }
.apm .gx-post.is-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; }
.apm .gx-post.is-lead .gx-post-body { padding: 16px 18px; }
.apm .gx-post.is-lead .gx-post-title { font-size: 18px; }
.apm .gx-more { display: block; width: max-content; margin: 14px auto 0; border: 1px solid var(--ink); border-radius: 999px; padding: 5px 22px; font-family: var(--serif); font-size: 13px; color: var(--ink); }
.apm .gx-more:hover { background: var(--ink); color: #fff; }

/* キャラアイコン（トップ）: 丸い顔＋レアリティは外側の輪の色 */
.apm .gx-rar + .gx-rar { margin-top: 14px; }
.apm .gx-rar-label { display: inline-block; font: 600 14px var(--latin); letter-spacing: .14em; color: var(--ink-2); border: 0; padding: 0; margin-bottom: 8px; }
.apm .gx-rar-label::before { content: "✦ "; color: var(--c); font-size: 11px; }
.apm .gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 8px; }
.apm .gx-char { text-align: center; color: var(--ink); }
.apm .gx-char-img { position: relative; width: 62px; margin: 0 auto; aspect-ratio: 1; background: var(--mist-2); border-radius: 50%; overflow: visible; border: 0; box-shadow: 0 0 0 1px var(--paper-2), 0 0 0 3px var(--c, var(--mist)); }
.apm .gx-char-img > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; transition: transform .15s; }
.apm .gx-char:hover .gx-char-img > img { transform: scale(1.05); }
.apm .gx-tags { position: absolute; top: auto; bottom: -4px; right: -6px; left: auto; display: flex; flex-direction: row; gap: 1px; }
.apm .gx-tags img { width: 18px; height: 18px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 50%; padding: 1px; }
.apm .gx-char > span { display: block; font-size: 11px; margin-top: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 攻略の入口（gx-guides） */
.apm .gx-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.apm .gx-guide { background: var(--paper); border: 1px solid var(--line-2); border-radius: 6px; padding: 12px 14px; }
.apm .gx-guide-h { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.apm .gx-guide-h .en { color: var(--leaf); font-size: 12px; margin-right: 8px; }
.apm .gx-guide ul { list-style: none; margin: 0; padding: 0; }
.apm .gx-guide li a { display: block; padding: 3px 0 3px 14px; font-size: 13px; color: var(--ink-2); position: relative; }
.apm .gx-guide li a::before { content: "›"; position: absolute; left: 2px; color: var(--leaf); }
.apm .gx-guide li a:hover { color: var(--ink); }

/* トップ下の本文（gx-body） */
.apm .gx-body h2 { margin: 24px 0 12px; }
.apm .gx-body h2:first-child { margin-top: 0; }
.apm .gx-body p { margin: 0 0 10px; color: var(--ink); }
.apm .gx-body img { max-width: 100%; height: auto; }
.apm .gx-body table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 13px; }

/* 右列: 広告・プロフィール・ランキング・リンク */
.apm .gx-ad { background: none; border: 0; padding: 0; text-align: center; }
.apm .gx-ad-label { display: block; text-align: left; font: 600 11px var(--latin); letter-spacing: .2em; color: var(--muted); margin-bottom: 4px; }
.apm .gx-ad-sp { display: none; }
.apm .gx-right .gx-ad { padding: 0; }
.apm .gx-prof { display: flex; gap: 12px; align-items: center; }
.apm .gx-prof img { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; }
.apm .gx-prof b { color: var(--ink); font-family: var(--serif); }
.apm .gx-prof small { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.apm .gx-rank ol { margin: 0; padding: 0; list-style: none; counter-reset: rk; }
.apm .gx-rank li { counter-increment: rk; border-top: 1px dashed var(--line); }
.apm .gx-rank li:first-child { border-top: 0; }
.apm .gx-rank li a { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--ink); line-height: 1.55; }
.apm .gx-rank li a::before { content: counter(rk); flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--latin); background: var(--mist-2); color: var(--ink); }
.apm .gx-rank li:nth-child(-n+3) a::before { background: var(--ink); color: #fff; }
.apm .gx-rank li a:hover { color: var(--leaf-d); }
.apm .gx-links { list-style: none; margin: 0; padding: 0; }
.apm .gx-links li + li { border-top: 1px dashed var(--line); }
.apm .gx-links a { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--ink); }
.apm .gx-links a:hover { color: var(--leaf-d); }
.apm .gx-links img { width: 36px; height: 36px; object-fit: cover; border: 1px solid var(--line); border-radius: 50%; flex: none; }

/* ツールの案内（トップの gx-tool、記事の efd-tool・efd-toollink） */
.apm .gx-tool { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 16px 20px; background: var(--paper-2); border: 1px solid var(--ink); border-radius: 6px; position: relative; overflow: hidden; color: var(--ink); }
.apm .gx-tool::after { content: "Team Builder"; position: absolute; right: 10px; bottom: -18px; font: italic 600 58px var(--latin); color: rgba(39,48,74,.05); pointer-events: none; }
.apm .gx-tool:hover { background: var(--mist-2); color: var(--ink); }
.apm .gx-tool-faces { display: flex; flex: none; }
.apm .gx-tool-faces img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; border: 2px solid var(--paper-2); margin-left: -12px; background: var(--mist-2); }
.apm .gx-tool-faces img:first-child { margin-left: 0; }
.apm .gx-tool-body b { display: block; color: var(--ink); font-family: var(--serif); font-size: 17px; }
.apm .gx-tool-body small { color: var(--ink-2); font-size: 12px; }
.apm .gx-btn, .apm .efd-tool-btn, .apm .efd-toollink b { display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff !important; border-radius: 999px; padding: 6px 18px 6px 14px; font-family: var(--serif); font-size: 13px; font-weight: 500; }
.apm .gx-btn::before, .apm .efd-tool-btn::before, .apm .efd-toollink b::before { content: "✦"; font-size: 10px; color: var(--mist); }
.apm .gx-tool .gx-btn { margin-left: auto; flex: none; position: relative; z-index: 1; }
.apm .efd-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 16px 0; }
.apm .efd-tool { display: flex; flex-direction: column; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; color: var(--ink) !important; text-decoration: none !important; }
.apm .efd-tool:hover { border-color: var(--ink-2); box-shadow: 0 2px 10px rgba(39,48,74,.08); }
.apm .efd-tool img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.apm .efd-tool-body { display: flex; flex-direction: column; flex: 1; padding: 10px 14px 14px; }
.apm .efd-tool-body .en { color: var(--leaf); font-size: 12px; }
.apm .efd-tool-body b { color: var(--ink); font-family: var(--serif); font-size: 16px; line-height: 1.45; }
.apm .efd-tool-body small { color: var(--ink-2); font-size: 12px; line-height: 1.6; margin-top: 2px; }
.apm .efd-tool-btn { align-self: flex-start; margin-top: 10px; }
.apm .efd-toollink { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 14px 10px 16px; background: var(--leaf-2); border: 1px solid #c9dab3; border-radius: 6px; color: var(--ink) !important; text-decoration: none !important; font-family: var(--serif); font-size: 14px; font-weight: 700; line-height: 1.5; }
.apm .efd-toollink .en { flex: none; color: var(--leaf-d); font-size: 12px; }
.apm .efd-toollink b { margin-left: auto; flex: none; }
.apm .efd-toollink:hover { background: #dce8cb; }

/* ページ上部へ戻るボタン */
.apm .ef-pagetop { position: fixed; right: 16px; bottom: 120px; z-index: 1040; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--ink); color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(39,48,74,.2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.apm .ef-pagetop::before { content: none; }
.apm .ef-pagetop.is-show { opacity: 1; visibility: visible; transform: none; }
.apm .ef-pagetop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.apm .ef-pagetop span { font: 600 10px/1 var(--latin); letter-spacing: .14em; color: var(--mist); }

/* ── 記事・キャラページ（dark.css にあたる部分） ── */
.apm [style*="margin-top: -20px"] { margin-top: 0 !important; }
.apm .breadcrumb { background: none !important; padding: 0 0 10px; margin: 0; font-size: 12px; }
.apm .breadcrumb > li, .apm .breadcrumb > li a { color: var(--ink-2); }
.apm .breadcrumb > li a:hover { color: var(--leaf-d); }
.apm .breadcrumb > li + li::before { color: var(--line); content: "›\00a0"; }

.apm .panel, .apm .panel-default { background: var(--paper-2) !important; border: 1px solid var(--line) !important; box-shadow: none; border-radius: 6px; color: var(--ink); }
.apm .panel-body { background: none !important; color: var(--ink); }
.apm .panel-default > .panel-heading { background: none !important; border: 0 !important; border-bottom: 3px double var(--line) !important; color: var(--ink) !important; font-family: var(--serif); font-weight: 700; font-size: 15px; }
.apm .panel-default > .panel-heading.sub { background: none !important; border: 0 !important; color: var(--leaf-d) !important; font-size: 12px; padding: 10px 15px 2px; }
.apm .panel-default.panel-orig > .panel-heading.sub-sub { background: var(--paper-3) !important; border-color: var(--line) !important; color: var(--ink-2) !important; }
.apm .gx-main > .panel { margin-bottom: 0; }
.apm .gx-main > .panel + .panel, .apm .gx-main > * + .panel { margin-top: 18px; }
.apm .gx-main.center_col_w { width: auto !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.apm .gx-main > .panel > .panel-body { padding: 22px 26px; }

/* 見出し: h1 明朝、h2 ✦＋二重線、h3 葉の点＋破線 */
.apm h1 { font-family: var(--serif); color: var(--ink); font-weight: 700; letter-spacing: .03em; line-height: 1.5; }
.apm h2, .apm .panel-body h2 { box-shadow: none !important; background: none !important; color: var(--ink) !important; border: 0 !important; border-bottom: 3px double var(--line) !important; border-radius: 0; padding: 0 0 8px !important; font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: .03em; }
.apm h2::before, .apm .panel-body h2::before { content: "✦ "; color: var(--leaf); font-size: .72em; vertical-align: .12em; }
.apm h3 { color: var(--ink) !important; background: none !important; border: 0 !important; padding: 0 !important; font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.5; display: flex; align-items: center; gap: 10px; }
.apm h3::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-2); }
.apm h3::after { content: ""; flex: 1; min-width: 24px; border-top: 1px dashed var(--line); }
.apm h3[style*="visibility: hidden"] { height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; }
.apm h3[style*="visibility: hidden"]::before, .apm h3[style*="visibility: hidden"]::after { display: none; }
.apm h4 { font-family: var(--serif); color: var(--ink) !important; border-bottom: 1px solid var(--line) !important; }
.apm .gx-title, .apm .gx-hero h1 { display: flex; }
.apm .gx-hero h1 { display: block; }
.apm .gx-title::before, .apm .gx-hero h1::before { content: none !important; }
.apm .panel-body p, .apm p { color: var(--ink); }
.apm strong, .apm b { color: var(--ink); font-weight: 700; }
.apm hr { border-color: var(--line) !important; }
.apm p.img_exp, .apm .img_exp { color: var(--ink-2) !important; font-size: 12px; }
/* 画像の注釈: すぐ上の画像の説明だとわかるよう、画像の方を指すしっぽの付いた砂色の札にする（手帖の写真の下に貼るラベルのイメージ）。
   記事の HTML（<p class="img_exp"><span class="glyphicon glyphicon-triangle-top"></span> …）はそのままで、見た目だけ差し替える */
.apm .img_exp .glyphicon-triangle-top { display: none; }
.apm p.img_exp { display: table; position: relative; margin: 6px auto 22px !important; padding: 2px 16px 3px; border-radius: 999px;
    background: var(--sand); color: var(--sand-ink) !important; font-family: var(--serif); font-size: 12px !important; line-height: 1.7 !important; text-align: center; }
.apm p.img_exp::before { content: ""; position: absolute; left: 50%; top: -6px; margin-left: -6px;
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--sand); }
.apm .show_cr, .apm .sponsor, .apm .searchResDes, .apm .com_date { color: var(--muted) !important; }
.apm blockquote { border-left-color: var(--mist); color: var(--ink-2); background: var(--mist-2); }
.apm [style*="color: #7c7c7c"], .apm [style*="color:#7c7c7c"] { color: var(--ink-2) !important; }
.apm .fon-9, .apm .fon-10, .apm .fon-10-lg, .apm .fon-12, .apm .fon-20-lg { color: var(--ink-2) !important; text-shadow: none !important; }
.apm td .fon-10 { font-size: 11px; line-height: 1.6; }

/* 本文中のリンクは紺の下線（強調文と見分ける） */
.apm .gx-main .panel-body p a, .apm .gx-main .panel-body td a, .apm .gx-main .panel-body li a, .apm .gx-main .panel-body dd a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(61,95,153,.35); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.apm .gx-main .panel-body p a:hover, .apm .gx-main .panel-body td a:hover, .apm .gx-main .panel-body li a:hover { color: var(--leaf-d); text-decoration-color: currentColor; }
.apm .gx-main .panel-body #index a, .apm .gx-main .panel-body .index li a, .apm .gx-main .panel-body .searchRes td a, .apm .gx-main .panel-body .ref_table td a,
.apm .gx-main .panel-body .nav-tabs li a, .apm .gx-main .panel-body td a.btn, .apm .gx-main .panel-body p a.btn { color: var(--ink); text-decoration: none; }
.apm .gx-main .panel-body .item_container a, .apm .gx-main .panel-body td .item_container a { color: var(--ink); text-decoration: none; }

/* 文字色のクラス（紙の上で読める濃さ） */
.apm .ann_col { color: #2f74a8; }
.apm .lost_col { color: #b35f1f; }
.apm .fs { color: var(--em); font-weight: 700; }
.apm .fso { color: #c0571e; }
.apm .fso.is-tag { display: inline-block; font-size: 11px; font-weight: 700; line-height: 18px; padding: 0 8px; margin: 0 4px 2px 0; color: var(--sand-ink); background: var(--sand); border: 0; border-radius: 999px; vertical-align: 1px; }
.apm .el_fire_col { color: #c4492c; }
.apm .el_physics_col { color: #7a6a45; }
.apm .el_ice_col { color: #1e8a96; }
.apm .el_thunder_col { color: #a87b00; }
.apm .el_wind_col { color: #4f8a2a; }

/* 表: 見出しは藤色、線は砂色 */
.apm .table, .apm table { background: none; color: var(--ink); }
.apm .table > thead > tr > th, .apm .table > tbody > tr > th, .apm .table > tbody > tr > td,
.apm .table-bordered, .apm .table-bordered > tbody > tr > td, .apm .table-bordered > tbody > tr > th, .apm .table-bordered > thead > tr > th { border-color: var(--line) !important; }
.apm table th, .apm th, .apm .table th { background-color: var(--mist-2) !important; color: var(--ink); font-weight: 700; }
.apm table td { background-color: var(--paper-2); }
.apm .table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--paper); }
.apm .table-hover > tbody > tr:hover > td { background: var(--leaf-2); }
.apm .endf { background-color: var(--paper-3) !important; color: var(--ink); }
.apm .endf th { background-color: var(--mist-2) !important; }
.apm .table_pick, .apm .table_pick > td { background-color: var(--leaf-2) !important; }
.apm .rate_5 { background-color: #f6ecd0; }
.apm .rate_4_5 { background-color: #efe7f6; }
.apm .sticky-table th:first-child, .apm .sticky-table td:first-child, .apm [class*="sticky"] { background-color: var(--paper-2); color: var(--ink); }

/* 囲み・吹き出し */
.apm .c_bq, .apm .says_sen, .apm .says, .apm .connect_b, .apm .exp_item, .apm .exp_bq, .apm .well,
.apm .index-container, .apm .active_back_color { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line) !important; border-radius: 6px; }
.apm .says_sen:after, .apm .says:after { border-right-color: var(--paper) !important; }
.apm .sheet_tag { background: var(--sand); color: var(--sand-ink); border-radius: 999px; }
/* スキル・素質のラベル: 丸い札 */
.apm .sen_pos, .apm .sen_pos_b { --bc: var(--ink-2); background: var(--paper-2) !important; border: 1px solid var(--bc); border-radius: 999px; padding: 0 9px; line-height: 18px; color: var(--bc); }
.apm .sen_pos span, .apm .sen_pos_b span { color: var(--bc) !important; font-size: 11px !important; font-weight: 700; text-shadow: none !important; }
.apm .sen_pos.is-sengi, .apm .sen_pos_b.is-sengi { --bc: #3d5f99; }
.apm .sen_pos.is-renkei, .apm .sen_pos_b.is-renkei { --bc: var(--leaf-d); }
.apm .sen_pos.is-ult, .apm .sen_pos_b.is-ult { --bc: #b35f1f; }
.apm .sen_pos.is-promo, .apm .sen_pos_b.is-promo { --bc: #7a5ca8; }
.apm .border_sen { border-bottom-color: var(--line); }
.apm .alert-info { background: var(--mist-2) !important; border-color: var(--mist) !important; color: var(--ink) !important; border-radius: 6px; }
.apm .alert-danger { background: #f7e9df !important; border-color: #e3c2ab !important; color: #7a3c18 !important; border-radius: 6px; }
.apm .alert-success { background: var(--leaf-2) !important; border-color: #c9dab3 !important; color: #3f5a2a !important; border-radius: 6px; }
.apm .index li { border-bottom-color: var(--line); }
.apm .new-topic { border-color: var(--leaf); color: var(--leaf-d); }
.apm .ref_table { border-color: var(--line); }
.apm .ref_t_ref { background-color: var(--mist-2); color: var(--ink); }

/* キャラアイコンの並び（記事・キャラ一覧）: 丸い顔＋外側の輪がレアリティ */
.apm .item_container { width: 66px; height: auto; margin: 10px 10px 0 0; }
.apm .item_container .item_size_pos { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--mist-2); border-radius: 50%; border: 0; box-shadow: 0 0 0 1px var(--paper-2), 0 0 0 3px var(--rc, var(--mist)); transition: transform .15s; }
.apm .item_container:hover .item_size_pos { transform: scale(1.05); }
.apm .item_container.r6 { --rc: #e0893a; }
.apm .item_container.r5 { --rc: #d4b04a; }
.apm .item_container.r4 { --rc: #a993d6; }
.apm .item_container .item_name_pos_under { position: static; width: auto; height: auto; margin-top: 6px; text-align: center; line-height: 1.3; }
.apm .item_container .item_name_pos_under a { text-decoration: none; }
.apm .item_container .item_name_pos_under span { display: block; text-shadow: none !important; font-size: 11px; color: var(--ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apm .item_container .item_name_pos_under.visible-xs { display: none !important; }
.apm .item_container .item_name_pos_under.hidden-xs { display: block !important; }
.apm .item_container .item_num_pos { position: static; width: auto; height: auto; margin-top: 1px; text-align: center; line-height: 1.2; }
.apm .item_container .item_num_pos span { font-size: 10px !important; font-weight: 700; color: var(--leaf-d) !important; text-shadow: none !important; }

/* 線画のアイコンは紺に寄せる */
.apm img.list, .apm img.icon-caret-down, .apm img.icon-tags, .apm img.icon-lightbulb, .apm img.icon-arrow-circle-right, .apm img.icon-ex-link { opacity: .7; }

/* タブ・ボタン・ページ送り */
.apm .nav-tabs { border-bottom-color: var(--line); }
.apm .nav-tabs > li > a { color: var(--ink-2); background: none; border-color: transparent; border-radius: 6px 6px 0 0; font-family: var(--serif); }
.apm .nav-tabs > li > a:hover { background: var(--mist-2); border-color: var(--line) var(--line) transparent; color: var(--ink); }
.apm .nav-tabs > li.active > a, .apm .nav-tabs > li.active > a:hover, .apm .nav-tabs > li.active > a:focus { background: var(--paper-2) !important; color: var(--ink); border: 1px solid var(--line); border-bottom-color: var(--paper-2); font-weight: 700; }
.apm .btn { border-radius: 999px; }
.apm .btn-default { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
.apm .btn-default:hover, .apm .btn-default.active { background: var(--mist-2); color: var(--ink); border-color: var(--ink-2); }
.apm .btn-primary { background-color: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.apm .btn-danger, .apm .btn-info { background: var(--paper-2) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.apm .btn-danger:hover, .apm .btn-info:hover { background: var(--ink) !important; color: #fff !important; }
.apm .pagination > li > a, .apm .pagination > li > span { background: var(--paper-2) !important; border-color: var(--line) !important; color: var(--ink) !important; }
.apm .pagination > li > a:hover { background: var(--mist-2) !important; }
.apm .pagination > .active > a, .apm .pagination > .active > span, .apm .pagination > .current > a, .apm .pagination > .current > span { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.apm .view-down, .apm .view-up { background: none !important; position: relative; display: inline-block; width: 24px; height: 24px; vertical-align: middle; border: 1px solid var(--line); border-radius: 50%; background-color: var(--paper-2) !important; }
.apm .view-down::before, .apm .view-up::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.apm .view-down::before { transform: translate(-50%, -70%) rotate(45deg); }
.apm .view-up::before { transform: translate(-50%, -25%) rotate(-135deg); }
.apm .input-group-addon { background: var(--mist-2); border-color: var(--line); color: var(--ink); }

/* 記事一覧（タグ・関連記事） */
.apm .searchRes tr { border-bottom: 1px dashed var(--line); }
.apm .searchRes td { color: var(--ink); background: none; }
.apm .searchRes h4 { color: var(--ink) !important; border: 0 !important; font-size: 15px; }
.apm .searchRes .searchResDes { color: var(--ink-2) !important; font-size: 13px !important; line-height: 1.65 !important; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.apm .searchRes td:first-child img { border-radius: 4px; }
.apm .thumbnail, .apm .caption > h5, .apm .caption > h5 > a { background: none; border: 0; color: var(--ink); }

/* フォーム */
.apm .form-control, .apm textarea, .apm input[type="text"], .apm input[type="email"], .apm select { background: var(--paper-2) !important; border-color: var(--line) !important; color: var(--ink) !important; box-shadow: none; border-radius: 6px; }
.apm .form-control:focus { border-color: var(--ink) !important; }
.apm legend, .apm label { color: var(--ink); border-color: var(--line); }
.apm .modal-content { background: var(--paper-2) !important; color: var(--ink); border-color: var(--line); }
.apm [style*="background-color: #e7e7e7"], .apm [style*="background-color:#e7e7e7"] { background-color: var(--paper-3) !important; color: var(--ink-2) !important; }

/* シェアバー */
.apm .efd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 6px; }
.apm .efd-share-title { font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--ink); margin-right: auto; }
.apm .efd-share-title .en { color: var(--leaf); font-size: 12px; margin-right: 8px; }
.apm .efd-share-btns { display: flex; gap: 8px; }
.apm .efd-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 14px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 12px; cursor: pointer; }
.apm .efd-share-btn svg { width: 15px; height: 15px; fill: currentColor; }
.apm .efd-share-btn:hover, .apm .efd-share-btn:focus { border-color: var(--ink); color: var(--ink); background: var(--mist-2); }
.apm .efd-share-btn.is-done { background: var(--ink); color: #fff; border-color: var(--ink); }
.apm .footer_ov_ad { background: var(--paper-2); }

/* 2カラムのページは本文を少し大きく */
.apm .gx-cols2 .gx-main, .apm .gx-cols2 .gx-main p, .apm .gx-cols2 .gx-main li { font-size: 16px; line-height: 1.9; }
.apm .gx-cols2 .gx-main td, .apm .gx-cols2 .gx-main th { font-size: 15px; }
.apm .gx-cols2 .gx-main h2 { font-size: 21px; }
@media (min-width: 768px) { .apm .searchRes td:first-child { width: 206px !important; } }

@media (max-width: 991px) {
    .apm .gx-cols { grid-template-columns: 200px minmax(0, 1fr); }
    .apm .gx-cols.gx-cols2 { grid-template-columns: minmax(0, 1fr); }
    .apm .gx-right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .apm .gx-right > * + * { margin-top: 0; }
}
@media (max-width: 767px) {
    body.apm { font-size: 14px; }
    .apm .tl-nav .tl-container { height: 50px; gap: 6px; }
    .apm .tl-brand .gi-logo { height: 18px; }
    .apm .tl-sub { font-size: 14px; }
    .apm .apm-slash { margin: 0 4px 0 0; }
    .apm .tl-search input { width: 64px; padding: 5px 8px; }
    .apm .tl-search button { padding: 0 10px; }
    .apm .gx-hero::after { font-size: 84px; right: 4%; top: 22%; }
    .apm .gx-hero-in { padding: 26px 18px; }
    .apm .gx-hero h1 { font-size: 24px; }
    .apm .gx-hero.is-slim::after { font-size: 40px; }
    .apm .gx-hero.is-slim .gx-hero-in { padding: 12px 16px; gap: 2px 10px; }
    .apm .gx-hero.is-slim .gx-site { font-size: 16px; }
    .apm .gx-cols { grid-template-columns: 1fr; }
    .apm .gx-main { order: 1; }
    .apm .gx-right { order: 2; grid-template-columns: 1fr; }
    .apm .gx-menu { order: 3; position: static; max-height: none; }
    .apm .gx-menu ul { display: grid; grid-template-columns: 1fr 1fr; }
    .apm .gx-panel { padding: 14px; }
    .apm .gx-posts { gap: 10px; }
    .apm .gx-post.is-lead { display: block; }
    .apm .gx-post.is-lead .gx-post-title { font-size: 15px; }
    .apm .gx-post-title { font-size: 13px; }
    .apm .gx-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
    .apm .gx-char-img { width: 54px; }
    .apm .gx-guides { grid-template-columns: 1fr; }
    .apm .gx-ad-pc { display: none; }
    .apm .gx-ad-sp { display: block; }
    .apm .gx-tool { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
    .apm .gx-tool .gx-btn { margin-left: 0; width: 100%; justify-content: center; }
    .apm .efd-tools { grid-template-columns: 1fr; }
    .apm .gx-main > .panel > .panel-body { padding: 16px 14px; }
    .apm .item_container { width: 56px; margin: 8px 8px 0 0; }
    .apm .gx-cols2 .gx-main, .apm .gx-cols2 .gx-main p, .apm .gx-cols2 .gx-main li { font-size: 15px; }
    .apm .gx-cols2 .gx-main td, .apm .gx-cols2 .gx-main th { font-size: 14px; }
    .apm .gx-cols2 .gx-main h2, .apm h2 { font-size: 18px; }
    .apm .efd-share-btn .efd-share-label { display: none; }
    .apm .efd-share-title { flex-basis: 100%; }
    .apm .efd-share-btns { flex: 1; }
    .apm .efd-share-btn { flex: 1; }
    .apm .searchRes .searchResDes { font-size: 12px !important; -webkit-line-clamp: 2; }
    .apm .ef-pagetop { right: 10px; width: 44px; height: 44px; }
}

/* ── プロミリア旅手帖だけの部品 ── */
/* まだ中身がないときの一文 */
.apm .apm-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 6px; background: var(--paper); color: var(--ink-2); font-size: 14px; }
/* トップの大見出しのリリース日（紺の線の丸い札） */
.apm .gx-hero p.apm-release { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 16px; padding: 6px 18px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--serif); color: var(--ink); }
.apm .apm-release b { font-size: 19px; letter-spacing: .04em; }
/* 地域の札（砂色）と絞り込みの札 */
.apm .apm-tag { display: inline-block; font-size: 11px; line-height: 18px; padding: 0 10px; border-radius: 999px; background: var(--sand); color: var(--sand-ink); white-space: nowrap; }
.apm .gx-char .apm-tag { margin-top: 3px; font-size: 10px; padding: 0 8px; }
.apm .apm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.apm .apm-chip { padding: 2px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; background: var(--paper-2); color: var(--ink); cursor: pointer; font-family: inherit; }
.apm .apm-chip:hover { border-color: var(--ink-2); }
.apm .apm-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
/* 顔アイコンの画像がまだないキャラは、丸の中に名前の1文字目 */
.apm .apm-face-initial { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-family: var(--serif); font-size: 20px; color: var(--ink-2); }
.apm .gx-char[hidden], .apm .apm-chara-table tr[hidden] { display: none; }
/* キャラ一覧の表 */
.apm .apm-chara-table td { vertical-align: middle !important; }
.apm .apm-chara-cell { display: flex; align-items: center; gap: 12px; color: var(--ink) !important; text-decoration: none !important; font-family: var(--serif); font-weight: 700; }
.apm .apm-chara-cell .gx-char-img { width: 44px; flex: none; margin: 0; display: block; position: relative; }
/* 右列の追従広告（PCだけ）。右列を本文と同じ高さに伸ばして、その中で追従させる */
@media (min-width: 992px) {
    .apm .gx-cols2 > .gx-right { align-self: stretch; }
    .apm .gx-ad-sticky { position: sticky; top: 72px; }
}

/* ── 記事の部品（ap-*。一覧と HTML は webroot/js/parts.json、見本は /azurpromilia/parts） ── */
/* 強調: 葉の緑のマーカー */
.apm .ap-mark { background: linear-gradient(transparent 58%, #d6e6c0 58%); font-weight: 700; padding: 0 1px; }
/* ポイント・注意の囲み */
.apm .ap-point, .apm .ap-note { margin: 18px 0; padding: 12px 16px 14px; border-radius: 6px; font-size: 15px; line-height: 1.85; }
.apm .ap-point { background: var(--leaf-2); border: 1px solid #c9dab3; color: #33452a; }
.apm .ap-note { background: #f6ebdd; border: 1px solid #e3cbb0; color: #5b3a1e; }
.apm .ap-point > b:first-child, .apm .ap-note > b:first-child { display: flex; align-items: center; gap: 6px; font-family: var(--serif); font-size: 15px; margin-bottom: 2px; }
.apm .ap-point > b:first-child { color: var(--leaf-d); }
.apm .ap-point > b:first-child::before { content: "✦"; font-size: 11px; }
.apm .ap-note > b:first-child { color: #8a4b1f; }
.apm .ap-note > b:first-child::before { content: "!"; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #a8572a; color: #fff; font: 700 11px var(--sans); }
/* 表: 見出しは藤色（全体の table の色と同じ）、左の見出しは少し狭く */
.apm .ap-table { margin: 14px 0 18px; }
.apm .ap-table tr > th:first-child:not(:only-child) { width: 30%; }
.apm .ap-table th, .apm .ap-table td { vertical-align: middle !important; }
/* 箇条書き: 葉の点 */
.apm .ap-list { list-style: none; margin: 12px 0 16px; padding: 0; }
.apm .ap-list li { position: relative; padding: 4px 0 4px 20px; border-bottom: 1px dashed var(--line-2); }
.apm .ap-list li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--leaf); }
/* 手順: 紺の丸い番号 */
.apm .ap-steps { list-style: none; counter-reset: ap-step; margin: 14px 0 18px; padding: 0; }
.apm .ap-steps li { counter-increment: ap-step; position: relative; padding: 6px 0 10px 40px; min-height: 30px; }
.apm .ap-steps li::before { content: counter(ap-step); position: absolute; left: 0; top: 4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 14px var(--sans); }
.apm .ap-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 34px; bottom: -4px; border-left: 2px dotted var(--mist); }
/* キャラの並び: 丸い顔＋名前＋役割 */
.apm .ap-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; margin: 14px 0 18px; }
.apm a.ap-char { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink) !important; text-decoration: none !important; }
.apm .ap-char img, .apm .ap-char .ap-face { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; background: var(--mist-2); box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3px var(--mist); }
.apm .ap-char .ap-face { display: grid; place-items: center; font-family: var(--serif); font-size: 22px; color: var(--ink-2); }
.apm .ap-char b { margin-top: 7px; font-family: var(--serif); font-size: 14px; line-height: 1.4; }
.apm .ap-char small { font-size: 12px; color: var(--ink-2); }
.apm a.ap-char:hover img, .apm a.ap-char:hover .ap-face { box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3px var(--leaf); }
/* 地域の札 */
.apm .ap-tag { display: inline-block; font-size: 12px; line-height: 20px; padding: 0 10px; border-radius: 999px; background: var(--sand); color: var(--sand-ink); white-space: nowrap; vertical-align: 1px; }
/* ボタンのリンク: 紺の丸いボタン（本文のリンクの下線を打ち消す） */
.apm .ap-btn-wrap { text-align: center; margin: 18px 0; }
.apm .gx-main .panel-body a.ap-btn, .apm a.ap-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 240px; justify-content: center; padding: 10px 26px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-family: var(--serif); font-size: 15px; }
.apm a.ap-btn::before { content: "✦"; font-size: 11px; color: var(--mist); }
.apm .gx-main .panel-body a.ap-btn:hover, .apm a.ap-btn:hover { background: #343f60; color: #fff; }
/* 関連記事のカード */
.apm .gx-main .panel-body a.ap-ref, .apm a.ap-ref { display: flex; flex-direction: column; gap: 2px; margin: 16px 0; padding: 12px 40px 12px 16px; position: relative; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--leaf); border-radius: 6px; color: var(--ink); text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.55; }
.apm a.ap-ref > span { font: 600 11px var(--sans); color: var(--leaf-d); letter-spacing: .06em; }
.apm a.ap-ref::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink-2); font-weight: 400; }
.apm .gx-main .panel-body a.ap-ref:hover, .apm a.ap-ref:hover { border-color: var(--ink-2); border-left-color: var(--leaf); color: var(--ink); }

/* パーツ集のページ */
.apm .ap-parts-index { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 20px; }
.apm .ap-parts-index a { padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; background: var(--paper-2); color: var(--ink) !important; text-decoration: none !important; }
.apm .ap-part { margin: 0 0 28px; padding: 0 0 24px; border-bottom: 3px double var(--line); scroll-margin-top: 70px; }
.apm .ap-part-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.apm .ap-part-label { padding: 0 10px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 12px; line-height: 22px; }
.apm .ap-part-head b { font-family: var(--serif); font-size: 17px; }
.apm .ap-part-desc { margin: 0 0 10px; font-size: 13px !important; color: var(--ink-2) !important; }
.apm .ap-part-sample { padding: 4px 18px; border: 1px dashed var(--line); border-radius: 6px; background: var(--paper-2); }
.apm .ap-part-code { position: relative; margin-top: 8px; }
.apm .ap-part-code pre { margin: 0; padding: 12px 14px; padding-right: 120px; background: #2b3247; color: #eef0f6; border: 0; border-radius: 6px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.apm .ap-copy { position: absolute; top: 8px; right: 8px; padding: 3px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: transparent; color: #fff; font-size: 12px; cursor: pointer; }
.apm .ap-copy:hover, .apm .ap-copy.is-done { background: var(--leaf); border-color: var(--leaf); }
@media (max-width: 767px) {
    .apm .ap-chars { grid-template-columns: repeat(3, 1fr); }
    .apm .ap-char img, .apm .ap-char .ap-face { width: 60px; height: 60px; }
    .apm .gx-main .panel-body a.ap-btn, .apm a.ap-btn { min-width: 0; width: 100%; }
    .apm .ap-part-code pre { padding-right: 14px; padding-top: 40px; }
}

/* エラーのページ（404・500。Elements/errorPage.ctp） */
.apm .apm-error { text-align: center; padding: 36px 24px 40px !important; }
.apm .apm-error-code { margin: 0; font: 600 14px var(--sans) !important; color: var(--leaf) !important; letter-spacing: .24em; }
.apm .apm-error h1 { margin: 6px 0 12px; font-size: 24px; }
.apm .apm-error > p { color: var(--ink-2) !important; }
.apm .apm-error-links { grid-template-columns: repeat(2, 120px); justify-content: center; margin: 26px 0; }
.apm .apm-error-links .ap-face { color: var(--leaf-d); }
.apm .apm-error-search { display: flex; max-width: 360px; margin: 0 auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper-2); }
.apm .apm-error-search input { flex: 1; min-width: 0; border: 0 !important; background: none !important; padding: 8px 16px; font-size: 14px; outline: none; border-radius: 0 !important; }
.apm .apm-error-search button { border: 0; background: var(--ink); color: #fff; padding: 0 20px; font-size: 13px; cursor: pointer; }
@media (max-width: 767px) { .apm .apm-error h1 { font-size: 20px; } }