/* あそぶ・ゲーム一覧・診断一覧のバナー（2026-09-28 inc/asobu-list.php）。al- で始まる名前だけを使う */
.al{--al-ink:#4a2a5c;--al-sub:#6d5f78;--al-dim:#9a8aac;--al-pink:#e0679f;--al-deep:#c0418a;--al-line:#f3dcea;--al-top:0px;max-width:1040px;margin:0 auto;padding:0 14px 30px;box-sizing:border-box;color:var(--al-ink)}
.al *,.al *::before,.al *::after{box-sizing:border-box}
body.cmsh .cmsh__body:has(.al){max-width:1040px}

/* 上の3択（あそぶ／ゲーム／診断） */
.al-sw{display:flex;gap:6px;background:#fff;border:2px solid var(--al-line);border-radius:999px;padding:4px;margin:14px auto 12px;max-width:420px}
.al-sw__a{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;border-radius:999px;font-size:14px;font-weight:900;color:var(--al-sub);text-decoration:none;white-space:nowrap}
.al-sw__a i{font-style:normal;font-size:16px}
.al-sw__a.is-on{background:linear-gradient(135deg,#f07aae,#a07ad6);color:#fff;box-shadow:0 4px 12px rgba(214,92,154,.3)}

.al-hero{text-align:center;margin:6px 0 14px}
.al-hero__h{font-size:24px;font-weight:900;color:var(--al-deep);margin:0 0 4px;letter-spacing:.02em;line-height:1.35}
.al-hero__l{font-size:13px;line-height:1.8;color:var(--al-sub);margin:0}
.al-hero__l b{color:var(--al-deep)}

/* ジャンルのタブ（上に固定・横スクロール） */
.al-tabs{position:sticky;top:var(--al-top);z-index:30;margin:0 -14px 6px;padding:8px 0 8px;background:rgba(255,248,252,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--al-line)}
.al-tabs__in{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 14px}
.al-tabs__in::-webkit-scrollbar{display:none}
.al-tabs__a{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;min-height:38px;padding:0 13px;border-radius:999px;background:#fff;border:1.5px solid var(--al-line);font-size:13px;font-weight:900;color:var(--al-sub);text-decoration:none;white-space:nowrap}
.al-tabs__a i{font-style:normal;font-size:15px}
.al-tabs__a small{font-size:10.5px;font-weight:800;color:var(--al-dim);margin-left:1px}
.al-tabs__a.is-on{background:#fff0f7;border-color:#f0a9cb;color:var(--al-deep)}
.al-tabs__a.is-on small{color:var(--al-pink)}

/* さがす */
.al-find{position:relative;margin:4px 0 10px}
.al-find input{width:100%;min-height:46px;border:2px solid var(--al-line);border-radius:14px;padding:10px 14px 10px 40px;font-size:16px;color:var(--al-ink);background:#fff;outline:none;-webkit-appearance:none;appearance:none}
.al-find input:focus{border-color:#f0a9cb;box-shadow:0 0 0 3px rgba(240,122,174,.15)}
.al-find::before{content:"🔍";position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none}
.al-find__none{text-align:center;font-size:13px;color:var(--al-sub);margin:14px 0}

/* 帯（おすすめ・新作・期間限定） */
.al-strip{margin:4px 0 16px}
.al-strip__h{font-size:15px;font-weight:900;color:var(--al-deep);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.al-strip__row{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;margin:0 -14px;padding:2px 14px 10px;scrollbar-width:thin}
.al-strip__row>.al-card{flex:0 0 78%;max-width:320px;scroll-snap-align:start}

/* 段 */
.al-sec{margin:18px 0 8px;scroll-margin-top:calc(var(--al-top) + 64px)}
.al-sec__hd{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px}
.al-sec__ico{flex:none;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;background:#fff;border:2px solid var(--al-line)}
.al-sec__h{font-size:18px;font-weight:900;color:var(--al-ink);margin:2px 0 2px;line-height:1.35}
.al-sec__h small{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:900;color:#fff;background:var(--al-pink);border-radius:999px;padding:1px 8px;vertical-align:2px}
.al-sec__l{font-size:12.5px;line-height:1.7;color:var(--al-sub);margin:0}
.al-sec__more{margin:12px 0 0}
.al-more{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:14px;background:#fff;border:2px dashed #eab0cf;color:var(--al-deep);font-size:14px;font-weight:900;text-decoration:none;text-align:center;padding:8px 12px}
.al-more b{font-size:11px;color:#fff;background:#2fb57c;border-radius:999px;padding:2px 8px}

/* バナー */
.al-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:760px){.al-grid{grid-template-columns:repeat(3,1fr);gap:14px}.al-strip__row>.al-card{flex-basis:300px}}
.al-card{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--al-line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--al-ink);box-shadow:0 4px 0 rgba(233,190,214,.55);transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.al-card:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(233,190,214,.55)}
.al-card:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(233,190,214,.55)}
.al-card__art{position:relative;display:block;flex:none;aspect-ratio:16/9;min-height:0;background:linear-gradient(135deg,#ffe3ef,#fff4f9)}
.al-card__art>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.al-card__art>img.is-contain{object-fit:contain;padding:6px}
.al-card__spr{position:absolute;inset:6% 26%;background-repeat:no-repeat;background-position:0 0}
.al-card__big{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:44px;line-height:1;filter:drop-shadow(0 3px 0 rgba(255,255,255,.9))}
.al-card__big::before,.al-card__big::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.55)}
.al-card__big::before{width:38%;aspect-ratio:1;left:-6%;bottom:-18%}
.al-card__big::after{width:22%;aspect-ratio:1;right:6%;top:8%}
.al-card__ico{position:absolute;left:8px;bottom:-15px;z-index:2;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--al-line);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;box-shadow:0 2px 6px rgba(90,45,95,.12)}
.al-card__rib{position:absolute;top:7px;left:7px;z-index:2;font-size:10.5px;font-weight:900;line-height:1.3;color:#fff;border-radius:999px;padding:3px 9px;box-shadow:0 2px 6px rgba(0,0,0,.18);letter-spacing:.02em}
.al-card__rib.is-new{background:#ff6f9f}
.al-card__rib.is-hot{background:#ff9a3c}
.al-card__rib.is-limited{background:#7a4bd1}
.al-card__rib.is-pick{background:#2fb57c}
.al-card__live{position:absolute;top:7px;right:7px;z-index:2;font-size:10.5px;font-weight:900;line-height:1.3;color:#fff;background:rgba(40,160,110,.95);border-radius:999px;padding:3px 8px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.al-card__live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:4px;vertical-align:1px;animation:al-blink 1.4s infinite}
@keyframes al-blink{50%{opacity:.25}}
.al-card__b{display:flex;flex-direction:column;gap:4px;padding:19px 11px 12px;flex:1}
.al-card__badge{align-self:flex-start;font-size:10px;font-weight:900;color:var(--al-deep);background:#fff0f7;border-radius:999px;padding:2px 8px;line-height:1.4}
.al-card__n{font-size:14.5px;font-weight:900;line-height:1.4;color:#5a2d5f;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.al-card__n small{display:inline-block;margin-left:5px;font-size:10.5px;font-weight:800;color:var(--al-dim)}
.al-card__d{font-size:11.5px;line-height:1.6;color:var(--al-sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.al-card__chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:4px}
.al-card__chips span{font-size:10px;font-weight:800;line-height:1.3;color:#7a5a8c;background:#f6f1fb;border-radius:999px;padding:3px 7px}
.al-card--wide .al-card__n{font-size:15.5px}
.al-card--wide .al-card__d{-webkit-line-clamp:2}
@media (max-width:374px){.al-card__n{font-size:13.5px}.al-card__d{font-size:11px}.al-card__b{padding:18px 9px 11px}.al-grid{gap:8px}}
@media (min-width:760px){.al-card__n{font-size:15.5px}.al-card__d{font-size:12.5px;-webkit-line-clamp:3}}

/* 地の色（絵が無いとき・シートの1コマのとき） */
.al-card.tone-pink .al-card__art{background:linear-gradient(135deg,#ffd9ea,#fff1f7)}
.al-card.tone-lav .al-card__art{background:linear-gradient(135deg,#e6dcff,#f7f2ff)}
.al-card.tone-yellow .al-card__art{background:linear-gradient(135deg,#ffeeb0,#fff9e6)}
.al-card.tone-sky .al-card__art{background:linear-gradient(135deg,#d3ebff,#f1f8ff)}
.al-card.tone-mint .al-card__art{background:linear-gradient(135deg,#cdf2df,#f0fbf5)}
.al-card.tone-peach .al-card__art{background:linear-gradient(135deg,#ffdcc8,#fff3ea)}
.al-card.tone-purple .al-card__art{background:linear-gradient(135deg,#ddc9ff,#f3ebff)}
.al-card.tone-navy .al-card__art{background:linear-gradient(135deg,#17224a,#2f4686)}
.al-card.tone-gray .al-card__art{background:linear-gradient(135deg,#e4e1ec,#f6f5fa)}
.al-sec.tone-yellow .al-sec__ico{background:#fff6d6;border-color:#f3dd96}
.al-sec.tone-purple .al-sec__ico,.al-sec.tone-lav .al-sec__ico{background:#f1eaff;border-color:#d9c8f6}
.al-sec.tone-sky .al-sec__ico{background:#e8f4ff;border-color:#bcdcf6}
.al-sec.tone-mint .al-sec__ico{background:#e6f8ef;border-color:#b8e6cd}
.al-sec.tone-peach .al-sec__ico{background:#fff0e6;border-color:#f5c9a8}
.al-sec.tone-pink .al-sec__ico{background:#fff0f7;border-color:#f3c3da}

/* 玄関の大きな2択 */
.al-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.al-two__c{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;min-height:236px;box-shadow:0 6px 0 rgba(160,110,180,.35);transition:transform .15s}
.al-two__c:active{transform:translateY(3px)}
.al-two__c.is-game{background:linear-gradient(160deg,#ff8fbd,#b07be0)}
.al-two__c.is-shindan{background:linear-gradient(160deg,#7cc8ff,#9c86ea)}
.al-two__tiles{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:8px 8px 0}
.al-two__tiles img,.al-two__tiles span{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:rgba(255,255,255,.35)}
.al-two__b{padding:10px 12px 14px;display:flex;flex-direction:column;gap:2px;margin-top:auto}
.al-two__k{font-size:24px;font-weight:900;line-height:1.2;letter-spacing:.04em;text-shadow:0 2px 0 rgba(90,40,110,.25)}
.al-two__k small{font-size:13px;margin-left:4px;letter-spacing:0}
.al-two__p{font-size:11.5px;font-weight:800;line-height:1.55;color:rgba(255,255,255,.95)}
.al-two__go{align-self:flex-start;margin-top:6px;font-size:12.5px;font-weight:900;color:#c0418a;background:#fff;border-radius:999px;padding:6px 12px}
.al-two__c.is-shindan .al-two__go{color:#4a6cc8}
@media (min-width:760px){.al-two{gap:16px}.al-two__c{min-height:300px}.al-two__k{font-size:30px}.al-two__p{font-size:13px}}

/* 玄関のジャンルへの近道 */
.al-jump{margin:4px 0 18px}
.al-jump__h{font-size:15px;font-weight:900;color:var(--al-ink);margin:0 0 8px}
.al-jump__row{display:flex;flex-wrap:wrap;gap:6px}
.al-jump__row a{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 13px;border-radius:999px;background:#fff;border:1.5px solid var(--al-line);font-size:13px;font-weight:900;color:#6b4a7e;text-decoration:none}
.al-jump__row a i{font-style:normal}
.al-note{font-size:12px;line-height:1.85;color:var(--al-sub);background:#fff;border:1.5px solid var(--al-line);border-radius:16px;padding:12px 14px;margin:20px 0 0}
.al-note b{color:var(--al-deep)}
.al-live{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 16px;min-height:48px;border-radius:14px;background:#effaf4;border:1.5px solid #bfe6d2;color:#237a55;font-size:13.5px;font-weight:900;text-decoration:none;padding:8px 12px;text-align:center}

/* 診断一覧（/shindan/）: サイト共通のヘッダーの下。外側の .ms-container が左右 16px（PC 24px）を持つ */
.tp-hub .al{padding:2px 0 10px}
.tp-hub .al-tabs{margin:0 -16px 6px}.tp-hub .al-tabs__in{padding:0 16px}.tp-hub .al-strip__row{margin:0 -16px;padding:2px 16px 10px}
@media (min-width:768px){.tp-hub .al-tabs{margin:0 -24px 6px}.tp-hub .al-tabs__in{padding:0 24px}.tp-hub .al-strip__row{margin:0 -24px;padding:2px 24px 10px}}
.tp-hub .al-sw{margin-top:4px}

/* UPDBADGE1002 更新の小さな札「10/2更新」: 本文の右上（絵・題名に重ねない・点滅しない） */
.al-card__b{position:relative}
.al-card__upd{position:absolute;top:1px;right:8px;z-index:1;font-size:10.5px;font-weight:800;line-height:1.2;letter-spacing:.02em;color:#8a6a1e;background:rgba(255,246,204,.9);border:1px solid rgba(238,200,95,.55);border-radius:999px;padding:1px 7px;white-space:nowrap;pointer-events:none}
@media (max-width:374px){.al-card__upd{top:1px;right:6px;font-size:10px;padding:1px 6px}}