/*
Theme Name: アルカナラボ
Theme URI: https://lab.arcana-japan.co.jp
Author: 株式会社アルカナ
Description: 暮らし・学び・しごとのWebメディア「アルカナラボ」専用テーマ。カテゴリ・タグ・固定ページの自動作成、目次、AdSense枠、おすすめサービス（クリック数で並び替え）、自社サービスへの案内ボックス、SEO・AEO対策を備えます。
Version: 1.15.7
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arcana-lab
*/

/* ============ 基本 ============ */
:root {
	--ink: #222833;
	--navy: #1F2A44;
	--navy-2: #34426A;
	--bg: #FFFFFF;
	--cream: #FAF7F2;
	--gray: #F4F4F2;
	--paper: #FFFFFF;
	--line: #E3E3E0;
	--line-2: #D6D6D2;
	--muted: #5F6672;
	--sub: #454C59;
	--blue: #1E6FD9;
	--blue-d: #1A5FBD;
	--green: #3D9970;
	--green-d: #2A6E50;
	--terra: #E07A5F;
	--cta: #D9480F;
	--cta-d: #B83C0B;
	--mark: #FFE9A8;
	--radius: 4px;
	--font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--c: var(--navy);
	--ct: var(--navy);
	--tint: var(--gray);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
	font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--blue-d); }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.al-skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--navy); color: #fff; padding: 8px 16px; }
.al-skip:focus { top: 12px; color: #fff; }
.al-wrap { max-width: 1200px; margin: 0 auto; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); }
.al-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.al-empty { color: var(--muted); padding: 24px 0; }
.al-admin-warn { background: #FFF7E6; border: 1px dashed #D08A00; color: #6B4700; padding: 10px 14px; font-size: 14px; margin: 0; }

/* ============ 見出し・ボタン ============ */
.al-eyebrow { margin: 0 0 10px; display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: .32em; line-height: 1; }
.al-eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.al-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--navy); }
.al-sec-title { margin: 0; font-size: clamp(19px, 2vw, 22px); line-height: 1.4; font-weight: 700; color: var(--navy); }
.al-more { flex: none; font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; }
.al-more:hover { text-decoration: underline; }
.al-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
	border: 0; border-radius: 6px; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.3; transition: background-color .15s;
}
.al-btn--navy { background: var(--navy); color: #fff; min-height: 52px; }
.al-btn--navy:hover { background: var(--navy-2); color: #fff; }
.al-btn--self { background: var(--blue); color: #fff; }
.al-btn--self:hover { background: var(--blue-d); color: #fff; }
.al-btn--server { background: #2A7552; color: #fff; }
.al-btn--server:hover { background: #215F42; color: #fff; }
.al-btn--product { background: var(--cta); color: #fff; width: 100%; max-width: 320px; }
.al-btn--product:hover { background: var(--cta-d); color: #fff; }
.al-btn--outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); min-height: 52px; border-radius: 999px; }
.al-btn--outline:hover { background: var(--navy); color: #fff; }
.al-postlist ul { list-style: none; margin: 0; padding: 0; }
.al-postlist li { border-top: 1px solid var(--line); margin: 0; }
.al-postlist li:first-child { border-top: 0; }
.al-postlist a { display: flex; gap: 8px; padding: 8px 0; font-weight: 500; text-decoration: none; }
.al-postlist a::before { content: "›"; color: var(--ct); font-weight: 700; }
.al-postlist a:hover { text-decoration: underline; }
.al-content .al-needs { margin: 0 0 28px; }
.al-btn--lg { min-height: 56px; padding: 0 32px; font-size: 17px; }

/* ============ ヘッダー ============ */
.al-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.al-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.al-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.al-logo:hover { color: var(--navy); }
.al-logo-text { display: flex; flex-direction: column; gap: 2px; }
.al-logo-name { font-size: 19px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.al-logo-en { font-size: 9px; letter-spacing: .28em; font-weight: 500; color: var(--muted); line-height: 1; }
.al-nav { margin-left: auto; align-self: stretch; }
.al-nav-list { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; align-items: stretch; gap: 4px; font-size: 15px; font-weight: 700; }
.al-nav-list li { display: flex; }
.al-nav-list a { display: flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--navy); text-decoration: none; border-bottom: 3px solid transparent; }
.al-nav-list a:hover { border-bottom-color: var(--navy); }
.al-header-actions { display: flex; align-items: center; gap: 2px; }
.al-icon-btn { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); }
.al-icon-btn:hover { background: var(--gray); }
.al-menu-btn { display: none; }
.al-pills { display: none; }
.al-search-panel { border-top: 1px solid var(--line); background: var(--gray); }
.al-search-inner { max-width: 760px; margin: 0 auto; padding: 16px clamp(16px, 3vw, 32px); }
.al-search-form { display: flex; gap: 0; }
.al-search-form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; font: inherit; font-size: 16px; border: 1px solid var(--line-2); border-right: 0; border-radius: 4px 0 0 4px; background: #fff; color: var(--ink); }
.al-search-form input:focus { outline: none; border-color: var(--navy); }
.al-search-form button { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 0 4px 4px 0; background: var(--navy); color: #fff; font-weight: 700; cursor: pointer; }
.al-drawer { border-top: 1px solid var(--line); background: #fff; }
.al-drawer-inner { padding: 8px 16px 24px; }
.al-drawer-cat { margin: 16px 0 4px; font-weight: 700; border-bottom: 1px solid var(--line); }
.al-drawer-cat a { display: flex; align-items: center; gap: 8px; color: var(--navy); text-decoration: none; min-height: 44px; }
.al-drawer-sub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.al-drawer-sub a { display: flex; align-items: center; min-height: 40px; color: var(--sub); text-decoration: none; font-size: 14px; }
@media (max-width: 767px) {
	.al-nav { display: none; }
	.al-menu-btn { display: flex; }
	.al-pills { display: flex; gap: 0; padding: 0 8px; overflow-x: auto; font-size: 14px; font-weight: 700; border-top: 1px solid var(--line); }
	.al-pills a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; color: var(--navy); text-decoration: none; }
	.al-search-form button span { display: none; }
}

/* ============ ヒーロー（Claude Design のアニメーション。変更しない） ============ */
.al-hero { background: var(--cream); color: var(--navy); padding: clamp(24px, 3.2vw, 44px) 0 clamp(28px, 3.6vw, 52px); overflow: hidden; }
.al-hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; }
.al-hero-text { flex: 1 1 440px; min-width: 0; }
.al-hero-text .al-eyebrow { margin-bottom: 18px; }
.al-hero-lead { margin: 18px 0 0; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.9; color: var(--navy); opacity: .78; }
.al-hero-title { margin: 0; font-size: clamp(24px, 3.1vw, 44px); line-height: 1.6; font-weight: 700; letter-spacing: .05em; }
.al-hero-title span { display: inline-block; }
.al-hero-art { flex: 0 1 400px; min-width: 0; max-width: 400px; margin: 0 auto; }
.al-hero-svg { display: block; width: 100%; max-width: 380px; margin: 0 auto; overflow: visible; }
.al-hero-pt { opacity: 0; transform-box: fill-box; transform-origin: center; }
.al-hero-ic { transform-origin: 0 0; }
.al-hero-glow, .al-hero-orbit, .al-hero-blob { transform-box: fill-box; transform-origin: center; }
.al-hero-glow { opacity: .9; }
@media (max-width: 767px) {
	.al-hero-svg { max-width: 220px; }
}
@media (prefers-reduced-motion: no-preference) {
	.al-hero-pt, .al-hero-ic, .al-hero-f, .al-hero-s path, .al-hero-glow { animation: 8s ease-in-out infinite both; }
	.al-hero-s path { stroke-dasharray: 1; }
	.al-hero-p1 { animation-name: al-hero-p1; } .al-hero-p2 { animation-name: al-hero-p2; } .al-hero-p3 { animation-name: al-hero-p3; } .al-hero-po { animation-name: al-hero-po; }
	.al-hero-s1 path { animation-name: al-hero-d1; } .al-hero-s2 path { animation-name: al-hero-d2; } .al-hero-s3 path { animation-name: al-hero-d3; }
	.al-hero-f1 { animation-name: al-hero-f1; } .al-hero-f2 { animation-name: al-hero-f2; } .al-hero-f3 { animation-name: al-hero-f3; }
	.al-hero-m1 { animation-name: al-hero-m1; } .al-hero-m2 { animation-name: al-hero-m2; } .al-hero-m3 { animation-name: al-hero-m3; }
	.al-hero-sb path { animation-name: al-hero-b; } .al-hero-sr path { animation-name: al-hero-r; } .al-hero-bf { animation-name: al-hero-bf; } .al-hero-glow { animation-name: al-hero-g; }
	.al-hero-orbit { animation: al-hero-rot 48s linear infinite; }
	.al-hero-blob { animation: al-hero-drift 16s ease-in-out infinite alternate; }
	.al-hero-blob:nth-of-type(2) { animation-duration: 20s; animation-direction: alternate-reverse; }
}
@keyframes al-hero-rot { to { transform: rotate(360deg); } }
@keyframes al-hero-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(14px, -10px) scale(1.06); } }
@keyframes al-hero-p1 { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); } 8% { opacity: .9; transform: translate(var(--x), var(--y)) scale(1); } 16% { opacity: .9; transform: translate(calc(var(--x) * .88), calc(var(--y) * .88 - 6px)) scale(1); } 26% { opacity: .9; transform: translate(0, 0) scale(.9); } 32%, 100% { opacity: 0; transform: translate(0, 0) scale(.3); } }
@keyframes al-hero-p2 { 0%, 3% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); } 11% { opacity: .9; transform: translate(var(--x), var(--y)) scale(1); } 22% { opacity: .9; transform: translate(calc(var(--x) * .88), calc(var(--y) * .88 - 6px)) scale(1); } 32% { opacity: .9; transform: translate(0, 0) scale(.9); } 40%, 100% { opacity: 0; transform: translate(0, 0) scale(.3); } }
@keyframes al-hero-p3 { 0%, 6% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); } 14% { opacity: .9; transform: translate(var(--x), var(--y)) scale(1); } 30% { opacity: .9; transform: translate(calc(var(--x) * .88), calc(var(--y) * .88 - 6px)) scale(1); } 40% { opacity: .9; transform: translate(0, 0) scale(.9); } 48%, 100% { opacity: 0; transform: translate(0, 0) scale(.3); } }
@keyframes al-hero-po { 0%, 85% { opacity: 0; transform: translate(0, 0) scale(.3); } 89% { opacity: .9; transform: translate(calc(var(--x) * .35), calc(var(--y) * .35)) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.5); } }
@keyframes al-hero-d1 { 0%, 21% { opacity: 0; stroke-dashoffset: 1; } 22% { opacity: 1; stroke-dashoffset: 1; } 36%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes al-hero-d2 { 0%, 29% { opacity: 0; stroke-dashoffset: 1; } 30% { opacity: 1; stroke-dashoffset: 1; } 44%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes al-hero-d3 { 0%, 37% { opacity: 0; stroke-dashoffset: 1; } 38% { opacity: 1; stroke-dashoffset: 1; } 52%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes al-hero-f1 { 0%, 28% { opacity: 0; transform: scale(.6); } 40%, 100% { opacity: 1; transform: scale(1); } }
@keyframes al-hero-f2 { 0%, 36% { opacity: 0; transform: scale(.6); } 48%, 100% { opacity: 1; transform: scale(1); } }
@keyframes al-hero-f3 { 0%, 44% { opacity: 0; transform: scale(.6); } 56%, 100% { opacity: 1; transform: scale(1); } }
@keyframes al-hero-m1 { 0%, 56% { opacity: 1; transform: translate(0, 0) scale(1); } 70%, 100% { opacity: 0; transform: translate(124px, 72px) scale(.3); } }
@keyframes al-hero-m2 { 0%, 57% { opacity: 1; transform: translate(0, 0) scale(1); } 71%, 100% { opacity: 0; transform: translate(-124px, 72px) scale(.3); } }
@keyframes al-hero-m3 { 0%, 58% { opacity: 1; transform: translate(0, 0) scale(1); } 72%, 100% { opacity: 0; transform: translate(0, -108px) scale(.3); } }
@keyframes al-hero-b { 0%, 63% { opacity: 0; stroke-dashoffset: 1; } 64% { opacity: 1; stroke-dashoffset: 1; } 78%, 87% { opacity: 1; stroke-dashoffset: 0; } 97%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes al-hero-r { 0%, 77% { opacity: 0; stroke-dashoffset: 1; } 83%, 88% { opacity: 1; stroke-dashoffset: 0; } 95%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes al-hero-bf { 0%, 70% { opacity: 0; } 80%, 87% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes al-hero-g { 0%, 66% { opacity: 0; transform: scale(.5); } 81% { opacity: 1; transform: scale(1); } 88% { opacity: .85; transform: scale(1.05); } 98%, 100% { opacity: 0; transform: scale(1.2); } }

/* ============ トップのセクション ============ */
.al-sec { padding: clamp(36px, 5vw, 56px) 0 0; }
.al-sec--gray { background: var(--gray); padding-bottom: clamp(36px, 5vw, 56px); margin-top: clamp(36px, 5vw, 56px); }
.al-sec--offers { padding-top: clamp(28px, 4vw, 44px); }
.al-grid { display: grid; grid-template-columns: 1fr; gap: 28px 20px; }
@media (min-width: 560px) { .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .al-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 560px) and (max-width: 899px) { .al-grid--small > :nth-child(3) { display: none; } }
.al-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 1000px) { .al-split { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }

/* お悩みから探す（トップ） */
.al-sec-lead { margin: -6px 0 18px; color: var(--sub); font-size: 15px; }
.al-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.al-needs-group { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--c); padding: 14px 16px 10px; }
.al-needs-head { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--navy); }
.al-needs-head .al-genre-icon { width: 28px; height: 28px; color: var(--ct); }
.al-needs ul { list-style: none; margin: 0; padding: 0; }
.al-needs li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 6px 0; border-top: 1px dashed var(--line-2); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.5; }
.al-needs li:first-child a { border-top: 0; }
.al-needs li a::after { content: "›"; flex: none; color: var(--ct); font-weight: 700; }
.al-needs li a:hover { color: var(--ct); }

/* お悩みから探す（専用ページ） */
.al-nayami-hero { background: var(--cream); padding: 0 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.al-nayami-hero .al-crumb { margin-bottom: clamp(16px, 3vw, 28px); }
.al-nayami-title { margin: 0 0 8px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.35; color: var(--navy); }
.al-nayami-lead { margin: 0 0 24px; color: var(--sub); font-size: 15px; }
.al-nayami-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.al-nayami-nav a {
	display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border-radius: 12px; background: #fff;
	color: var(--navy); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.35;
	box-shadow: 0 0 0 1px var(--line), 0 4px 12px -8px rgba(31, 42, 68, .35); transition: transform .15s, box-shadow .15s;
}
.al-nayami-nav a:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--c), 0 8px 16px -10px rgba(31, 42, 68, .45); }
.al-nayami-nav .al-genre-icon { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--tint); color: var(--ct); }
.al-nayami-body { padding-top: clamp(32px, 5vw, 52px); padding-bottom: clamp(48px, 7vw, 88px); }
.al-need-group { margin: 0 0 clamp(40px, 5vw, 56px); scroll-margin-top: 16px; }
.al-need-group-head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.al-need-group-icon { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; }
.al-need-group-icon .al-genre-icon { width: 28px; height: 28px; }
.al-need-group-title { margin: 0; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.3; color: var(--navy); }
.al-need-group-count { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ct); background: var(--tint); padding: 3px 12px; border-radius: 999px; }
.al-need-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.al-need {
	position: relative; background: #fff; border-radius: 14px; padding: 18px 18px 14px; scroll-margin-top: 16px;
	box-shadow: 0 0 0 1px var(--line), 0 6px 18px -14px rgba(31, 42, 68, .5);
}
.al-need::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.al-need:target { box-shadow: 0 0 0 2px var(--c), 0 6px 18px -14px rgba(31, 42, 68, .5); }
.al-need-label { margin: 4px 0 4px; font-size: 17px; line-height: 1.5; color: var(--navy); }
.al-need-desc { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.al-need-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.al-need-posts a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.al-need-posts .al-thumb { border-radius: 8px; box-shadow: 0 0 0 1px rgba(31, 42, 68, .08); }
.al-need-posts span { font-size: 14px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-need-posts a:hover span { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
.al-need-foot { margin-top: 16px; padding: 22px; background: var(--gray); border-radius: 14px; max-width: 760px; }
.al-need-foot p { margin: 0 0 10px; font-weight: 700; }
@media (max-width: 520px) {
	.al-nayami-nav { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.al-nayami-nav a { min-height: 50px; font-size: 13px; padding: 6px 10px; }
}

/* ジャンル */
.al-genres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.al-genres a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 112px; padding: 14px 8px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; text-align: center; line-height: 1.4;
}
.al-genres a:hover { border-color: var(--ct); box-shadow: inset 0 -3px 0 var(--ct); }
.al-genres .al-genre-icon { color: var(--ct); }
@media (max-width: 520px) {
	.al-genres { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.al-genres a { min-height: 92px; font-size: 12px; padding: 10px 4px; }
	.al-genres .al-genre-icon { width: 34px; height: 34px; }
}

/* カード */
.al-card { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.al-card:hover { color: var(--ink); }
.al-thumb {
	position: relative; aspect-ratio: 1200 / 630; background: var(--tint); display: flex; align-items: center; justify-content: center;
	overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(31, 42, 68, .08), 0 6px 18px -10px rgba(31, 42, 68, .45);
	isolation: isolate;
}
.al-thumb--img { background: var(--gray); }
.al-thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.al-card:hover .al-thumb--img img, .al-item:hover .al-thumb--img img { transform: scale(1.04); }
.al-card:hover .al-thumb { box-shadow: 0 0 0 1px rgba(31, 42, 68, .12), 0 12px 24px -12px rgba(31, 42, 68, .55); }
@media (prefers-reduced-motion: reduce) { .al-card:hover .al-thumb--img img, .al-item:hover .al-thumb--img img { transform: none; } }
.al-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 2px 0; }
.al-badge { align-self: flex-start; display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--tint); color: var(--ct); line-height: 1.6; text-decoration: none; letter-spacing: .04em; }
a.al-badge:hover { color: var(--ct); text-decoration: underline; }
.al-card-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.al-card:hover .al-card-title { color: var(--blue-d); }
.al-card-date { margin: auto 0 0; font-size: 12px; color: var(--muted); }

/* 横長リスト（ランキング・カテゴリ別） */
.al-list { display: flex; flex-direction: column; }
.al-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.al-item:first-child { padding-top: 0; }
.al-item:last-child { border-bottom: 0; }
.al-item .al-thumb { border-radius: 8px; }
.al-item:hover .al-item-title { color: var(--blue-d); }
.al-item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.al-item-title { font-size: 15px; font-weight: 700; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.al-item-date { font-size: 12px; color: var(--muted); }
.al-item .al-badge { font-size: 11px; padding: 1px 8px; }
/* 順位は画像に重ねず、左の列に置く */
.al-item--ranked { grid-template-columns: 34px 120px minmax(0, 1fr); gap: 12px; }
.al-item-rank { justify-self: center; font-size: 22px; font-weight: 700; line-height: 1; color: #9AA0AA; font-variant-numeric: tabular-nums; font-family: "Helvetica Neue", Arial, var(--font); }
.al-item-rank.is-top { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; background: var(--navy); }
.al-item-rank.is-top-1 { background: #C9A227; }
.al-item-rank.is-top-2 { background: #8E9AAF; }
.al-item-rank.is-top-3 { background: #B07A4F; }
.al-list--compact .al-item { grid-template-columns: 104px minmax(0, 1fr); }
.al-list--compact .al-badge { display: none; }

/* カテゴリ（3本柱） */
.al-pillars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.al-pillar { background: #fff; border-top: 4px solid var(--c); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.al-pillar-head { display: flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; }
.al-pillar-head:hover .al-pillar-name { text-decoration: underline; }
.al-pillar-name { font-size: 22px; font-weight: 700; line-height: 1.3; }
.al-pillar-more { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ct); }
.al-pillar-desc { margin: 0; font-size: 14px; color: var(--sub); line-height: 1.7; }
.al-pillar-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.al-pillar-subs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; font-size: 13px; color: var(--ink); text-decoration: none; background: var(--gray); border-radius: 2px; }
.al-pillar-subs a:hover { background: var(--tint); color: var(--ct); }

/* 事業者向け */
.al-biz { background: #EEF3FA; padding: clamp(40px, 6vw, 64px) 0; }
.al-biz .al-sec-head { border-bottom-color: var(--blue-d); }
.al-biz .al-sec-title { color: var(--blue-d); }
.al-biz-lead { margin: 0 0 24px; max-width: 680px; color: var(--sub); }
.al-biz-cta { margin-top: 28px; background: #fff; border: 2px solid var(--blue); padding: clamp(20px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.al-biz-cta > div { flex: 1 1 420px; min-width: 0; }
.al-biz-cta p { margin: 0; color: var(--sub); }
.al-biz-cta .al-biz-cta-title { margin: 0 0 6px; font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.6; color: var(--navy); }

/* ============ おすすめサービス（アフィリエイト） ============ */
.al-offers { margin: 0 0 32px; }
.al-offers-title { margin: 0 0 14px !important; padding: 8px 12px !important; border: 0 !important; background: var(--navy); color: #fff; font-size: 17px !important; line-height: 1.5 !important; }
.al-sec .al-offers { margin-bottom: 0; }
.al-offers-list { display: grid; gap: 12px; }
.al-offers--card .al-offers-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.al-offers-foot { margin: 8px 0 0 !important; font-size: 12px; color: var(--muted); line-height: 1.6; }
.al-offer { position: relative; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 16px; display: flex; gap: 14px; }
.al-offer-pr { position: absolute; top: 8px; right: 8px; font-size: 10px; color: var(--muted); border: 1px solid var(--line-2); padding: 0 5px; line-height: 1.6; }
.al-offer-rank { position: absolute; top: -1px; left: -1px; min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; }
.al-offer-img { flex: none; width: 96px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--gray); color: var(--navy); overflow: hidden; }
.al-offer-img img { width: 100%; height: 100%; object-fit: contain; }
.al-offer-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.al-offer-badge { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--cta-d); background: #FFF0E6; border: 1px solid #F5C3A6; padding: 0 8px; line-height: 1.7; }
.al-offer-name { margin: 0 !important; font-size: 17px; font-weight: 700; line-height: 1.45; padding-right: 28px; }
.al-offer-catch { margin: 0 !important; font-size: 14px; color: var(--sub); line-height: 1.6; }
.al-offer-points { list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: 14px; line-height: 1.6; }
.al-offer-points li { display: flex; gap: 6px; margin: 0 0 2px !important; }
.al-offer-points li::before { content: "✓"; color: var(--cta); font-weight: 700; }
.al-offer-price { margin: 0 !important; font-size: 14px; font-weight: 700; }
.al-offer-btn {
	display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 4px; padding: 0 16px; border-radius: 6px;
	background: var(--cta); color: #fff !important; font-weight: 700; text-decoration: none !important; box-shadow: 0 3px 0 var(--cta-d); transition: transform .1s, box-shadow .1s;
}
.al-offer-btn::after { content: "›"; margin-left: 8px; font-size: 18px; line-height: 1; }
.al-offer-btn:hover { background: var(--cta-d); }
.al-offer-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cta-d); }
.al-offer-note { margin: 0 !important; font-size: 11px; color: var(--muted); line-height: 1.5; }
.al-offers--card .al-offer { flex-direction: column; }
.al-offers--card .al-offer-img { width: 100%; aspect-ratio: 16 / 9; }
.al-offers--card .al-offer-btn { margin-top: auto; }
.al-offers--card .al-offer-img--icon { aspect-ratio: auto; height: 64px; }
.al-offer-img--icon { color: var(--navy); }
.al-offers--row .al-offer-img { width: 120px; }
.al-offers--mini .al-offer { padding: 12px; gap: 10px; }
.al-offers--mini .al-offer-img { width: 64px; }
.al-offers--mini .al-offer-name { font-size: 15px; }
.al-offers--mini .al-offer-btn { min-height: 40px; font-size: 14px; }
@media (max-width: 520px) {
	.al-offers--row .al-offer { flex-direction: column; }
	.al-offers--row .al-offer-img { width: 100%; aspect-ratio: 16 / 9; }
}

/* スマホ下部バー */
.al-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 10px 40px 10px 12px; background: #fff; border-top: 2px solid var(--cta); box-shadow: 0 -4px 12px rgba(0, 0, 0, .12); }
.al-stickybar[hidden] { display: none; }
.al-stickybar .al-offer-pr { top: 4px; right: auto; left: 4px; }
.al-stickybar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.al-stickybar-name { font-size: 14px; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-stickybar .al-offer-btn { flex: none; margin: 0; min-height: 44px; font-size: 14px; }
.al-stickybar-close { position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }
@media (min-width: 768px) { .al-stickybar { display: none !important; } }

/* ============ パンくず ============ */
.al-crumb { font-size: 12px; color: var(--muted); margin: 14px 0 20px; }
.al-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.al-crumb li { display: flex; gap: 8px; }
.al-crumb li + li::before { content: "›"; }
.al-crumb a { color: var(--muted); }

/* ============ 記事ページ ============ */
.al-single { padding-bottom: clamp(48px, 7vw, 88px); }
.al-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; }
.al-article { flex: 1 1 640px; min-width: 0; max-width: 780px; }
.al-article-meta-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.al-pr-notice { font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); padding: 0 8px; line-height: 1.8; }
.al-article-title { margin: 12px 0 10px; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.5; color: var(--navy); }
.al-article-dates { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.al-eyecatch { margin: 20px 0 28px; }
.al-eyecatch .al-thumb { aspect-ratio: 1200 / 630; border-radius: 12px; }

.al-box { background: #fff; border: 1px solid var(--line-2); padding: 18px clamp(16px, 2.6vw, 24px); margin: 0 0 24px; }
.al-box-title { margin: 0 0 10px !important; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.al-dots { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.al-dots li { display: flex; gap: 10px; margin: 0 !important; }
.al-dots li::before { content: ""; flex: none; margin-top: 10px; width: 6px; height: 6px; background: var(--c); }

.al-toc { background: var(--gray); border: 1px solid var(--line); padding: 18px clamp(16px, 2.6vw, 24px); margin: 0 0 28px; }
.al-toc-title { margin: 0 0 8px !important; font-weight: 700; font-size: 16px; }
.al-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.al-toc ol ol { margin: 2px 0 4px 26px; font-size: 14px; }
.al-toc a { color: var(--ink); text-decoration: none; display: flex; gap: 8px; }
.al-toc ol ol a { color: var(--sub); }
.al-toc ol ol a::before { content: "-"; color: var(--muted); }
.al-toc a:hover { color: var(--blue-d); text-decoration: underline; }
.al-toc-num { flex: none; min-width: 1.4em; color: var(--ct); font-weight: 700; }

/* 本文 */
.al-content > *:first-child { margin-top: 0; }
.al-content p { margin: 0 0 1.4em; }
.al-content h2 { margin: 48px 0 18px; padding: 10px 14px; background: var(--gray); border-left: 5px solid var(--c); font-size: clamp(20px, 2.1vw, 23px); line-height: 1.5; color: var(--navy); }
.al-content h3 { margin: 32px 0 12px; padding: 0 0 6px; border-bottom: 2px solid var(--line-2); font-size: 19px; line-height: 1.55; color: var(--navy); }
.al-content h4 { margin: 24px 0 8px; font-size: 17px; }
.al-content ul:not([class]), .al-content ol:not([class]) { margin: 0 0 1.4em; padding-left: 1.5em; }
.al-content li { margin-bottom: 4px; }
.al-content ul:not([class]) li::marker { color: var(--c); }
.al-content ol:not([class]) li::marker { color: var(--ct); font-weight: 700; }
.al-content a { text-underline-offset: 3px; }
.al-content strong { background: linear-gradient(transparent 60%, var(--mark) 60%); }
.al-content blockquote { margin: 0 0 1.4em; padding: 12px 16px; border-left: 4px solid var(--line-2); background: var(--gray); color: var(--sub); }
.al-content blockquote p:last-child { margin-bottom: 0; }
.al-content img { border-radius: 2px; }
.al-content figure { margin: 0 0 24px; }
.al-content figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.al-content hr { border: 0; border-top: 1px solid var(--line-2); margin: 36px 0; }
.al-content code { background: var(--gray); padding: 1px 5px; font-size: .92em; }
.al-content pre { background: var(--navy); color: #fff; padding: 14px 18px; overflow-x: auto; }
.al-content pre code { background: none; padding: 0; }

.al-table-wrap { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line-2); background: #fff; }
.al-table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.al-table-wrap thead tr { background: var(--navy); color: #fff; }
.al-table-wrap th, .al-table-wrap td { text-align: left; padding: 10px 14px; vertical-align: top; border-bottom: 1px solid var(--line); }
.al-table-wrap tbody tr:nth-child(even) { background: #FAFAF8; }
.al-table-wrap tbody th { font-weight: 700; background: var(--gray); }

/* 部品 */
.al-answer { background: #fff; border: 2px solid var(--c); padding: 16px clamp(16px, 2.6vw, 22px); margin: 0 0 28px; }
.al-answer-title { display: inline-block; margin: 0 0 8px !important; padding: 0 10px; font-size: 13px; font-weight: 700; color: #fff; background: var(--c); line-height: 1.9; }
.al-answer-body { font-size: 16px; font-weight: 500; line-height: 1.85; }
.al-answer-body p:last-child { margin-bottom: 0; }
.al-check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.al-check li { display: flex; gap: 10px; margin: 0; }
.al-check-ic { flex: none; margin-top: 3px; }
.al-content .al-box { margin: 0 0 28px; }
.al-note { background: #FFF8E8; border-left: 4px solid #E0A100; padding: 14px clamp(16px, 2.4vw, 20px); margin: 0 0 28px; display: flex; gap: 12px; }
.al-note-ic { flex: none; margin-top: 3px; }
.al-note-title { margin: 0 0 2px !important; font-weight: 700; color: #6E4508; }
.al-note-body { color: #4A3A1E; }
.al-note-body p:last-child { margin-bottom: 0; }
.al-faq { border: 1px solid var(--line-2); margin: 0 0 12px; }
.al-faq-q { margin: 0 !important; display: flex; gap: 12px; padding: 12px 16px; font-weight: 700; background: var(--gray); }
.al-faq-a { display: flex; gap: 12px; padding: 12px 16px; }
.al-faq-a p:last-child { margin-bottom: 0; }
.al-faq-mark { flex: none; width: 26px; height: 26px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; margin-top: 1px; }
.al-faq-a .al-faq-mark { background: var(--cta); }
.al-summary { border: 2px solid var(--navy); padding: 18px clamp(16px, 2.6vw, 24px); margin: 40px 0; }
.al-summary .al-eyebrow { display: none; }
.al-summary-title { margin: 0 0 8px !important; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.al-summary p:last-child { margin-bottom: 0; }
.al-pr-tag { position: absolute; top: 10px; right: 12px; font-size: 10px; color: var(--muted); border: 1px solid var(--line-2); padding: 0 5px; line-height: 1.7; }
.al-product { position: relative; background: #fff; border: 1px solid var(--line-2); padding: clamp(16px, 2.6vw, 24px); margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.al-product-img { flex: 0 0 150px; aspect-ratio: 1; background: var(--gray); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); overflow: hidden; }
.al-product-img img { width: 100%; height: 100%; object-fit: contain; }
.al-product-body { flex: 1 1 260px; min-width: 0; }
.al-product-label { margin: 0 0 2px !important; font-size: 13px; color: var(--muted); }
.al-product-name { margin: 0 0 10px !important; font-size: 19px; font-weight: 700; line-height: 1.5; }
.al-product-points { list-style: none !important; margin: 0 0 16px !important; padding: 0 !important; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.al-product-points li { display: flex; gap: 8px; margin: 0; }
.al-product-points li::before { content: "✓"; color: var(--cta); font-weight: 700; }
.al-content .al-product a.al-btn, .al-content .al-cta a.al-btn { text-decoration: none; }
.al-cta { position: relative; padding: clamp(20px, 3vw, 28px); margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.al-cta > svg { flex: none; }
.al-cta-body { flex: 1 1 300px; min-width: 0; }
.al-cta-body p { margin: 0 0 14px; }
.al-cta .al-cta-eyebrow { margin: 0 0 2px; font-size: 12px; font-weight: 700; }
.al-cta .al-cta-title { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.al-cta .al-btn { width: 100%; max-width: 320px; }
.al-cta--self { background: #EEF3FA; border: 2px solid var(--blue); color: var(--sub); }
.al-cta--self .al-cta-eyebrow { color: var(--blue-d); }
.al-cta--server { background: #EEF6F1; border: 2px solid var(--green); color: #2F4A3C; }
.al-cta--server .al-cta-eyebrow { color: var(--green-d); }

/* タグ・著者・関連 */
.al-tags { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.al-tags a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; background: var(--gray); color: var(--sub); text-decoration: none; font-size: 13px; border-radius: 2px; }
.al-tags a:hover { background: var(--line); color: var(--ink); }
.al-author { border: 1px solid var(--line-2); padding: 20px; display: flex; flex-wrap: wrap; gap: 16px; margin: 32px 0 48px; }
.al-author-icon { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--gray); display: flex; align-items: center; justify-content: center; }
.al-author > div:last-child { flex: 1 1 280px; min-width: 0; }
.al-author p { margin: 0; }
.al-author-label { font-size: 12px; color: var(--muted); }
.al-author-name { font-size: 17px; font-weight: 700; margin-bottom: 6px !important; }
.al-author-desc { font-size: 14px; color: var(--sub); margin-bottom: 8px !important; }
.al-author-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.al-related-title { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--navy); font-size: 19px; line-height: 1.5; color: var(--navy); }

/* 広告枠 */
.al-ad { margin: 0 0 36px; }
.al-ad-label { margin: 0 0 4px !important; text-align: center; font-size: 11px; color: var(--muted); }
.al-ad-dummy { border: 1px dashed #B5AEA2; background: #F3F2EF; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; text-align: center; padding: 16px; }
.al-ad--side .al-ad-dummy { min-height: 250px; }
.al-content .al-ad { margin: 36px 0; }

/* サイドバー */
.al-sidebar { flex: 1 1 300px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; }
.al-sidebar .al-ad, .al-sidebar .al-offers { margin: 0; }
.al-side-box { background: #fff; border: 1px solid var(--line-2); padding: 16px 18px; }
.al-side-title { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--navy); font-size: 16px; font-weight: 700; color: var(--navy); }
.al-side-pop { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.6; }
.al-side-pop:last-child { border-bottom: 0; }
.al-side-pop:hover { color: var(--blue-d); text-decoration: underline; }
.al-side-num { flex: none; width: 24px; height: 24px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.al-side-cat { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.al-side-cat:last-child { border-bottom: 0; }
.al-side-arrow { margin-left: auto; color: var(--muted); }
@media (min-width: 1040px) { .al-sidebar { flex: 0 0 320px; position: sticky; top: 16px; } }

/* ============ 一覧ページ ============ */
.al-archive-hero { background: var(--tint); border-bottom: 3px solid var(--c); padding: 0 0 clamp(24px, 4vw, 40px); }
.al-archive-hero--plain { background: var(--gray); border-bottom-color: var(--navy); }
.al-archive-hero .al-crumb { color: var(--sub); margin-bottom: clamp(16px, 3vw, 28px); }
.al-archive-hero .al-crumb a { color: var(--sub); }
.al-archive-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.al-archive-icon { flex: none; width: clamp(64px, 8vw, 88px); aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; }
.al-archive-text { flex: 1 1 360px; min-width: 0; }
.al-archive-en { margin: 0; font-size: 12px; font-weight: 700; color: var(--ct); }
.al-archive-title { margin: 0 0 6px; font-size: clamp(26px, 3vw, 34px); line-height: 1.4; color: var(--navy); }
.al-archive-desc { max-width: 680px; color: var(--sub); font-size: 15px; }
.al-archive-desc p { margin: 0; }
.al-archive-search { max-width: 640px; margin-top: 16px; }
.al-archive-body { padding-top: clamp(24px, 4vw, 40px); padding-bottom: clamp(48px, 7vw, 88px); }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(24px, 4vw, 36px); }
.al-chips a { display: flex; align-items: center; min-height: 38px; padding: 0 14px; font-size: 14px; font-weight: 500; text-decoration: none; background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: 2px; }
.al-chips a:hover { border-color: var(--ct); color: var(--ct); }
.al-chips a.is-current { background: var(--ct); color: #fff; border-color: var(--ct); }
.al-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 2px solid var(--navy); }
.al-list-title { margin: 0; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--navy); }
.al-list-order { font-size: 13px; color: var(--muted); }
.al-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 48px; font-weight: 700; }
.al-pager .page-numbers { min-width: 42px; height: 42px; padding: 0 6px; display: flex; align-items: center; justify-content: center; color: var(--navy); text-decoration: none; border: 1px solid var(--line-2); background: #fff; }
.al-pager .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.al-pager .page-numbers.dots { border: 0; background: none; color: var(--muted); }

/* ============ 固定ページ・404 ============ */
.al-page { padding-bottom: clamp(48px, 7vw, 88px); }
.al-article--page { max-width: 820px; margin: 0 auto; }
.al-article--page .al-article-title { margin-top: 0; margin-bottom: 28px; }
.al-content .wp-block-table table, .al-article--page table { width: 100%; border-collapse: collapse; background: #fff; }
.al-article--page th, .al-article--page td { border: 1px solid var(--line-2); padding: 10px 14px; text-align: left; }
.al-404-body { max-width: 640px; margin: 0 auto; text-align: center; }
.al-404-search { margin: 24px 0 32px; }

/* ============ フッター ============ */
.al-footer { background: var(--navy); color: #fff; padding: clamp(40px, 5vw, 56px) clamp(16px, 3vw, 32px) 28px; }
.al-footer a { color: #fff; text-decoration: none; }
.al-footer a:hover { text-decoration: underline; }
.al-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 32px 56px; }
.al-footer-brand { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; }
.al-footer-logo { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: .04em; }
.al-footer-tagline { margin: 0; font-size: 14px; line-height: 1.8; color: #D3D8E2; }
.al-footer-col { flex: 1 1 140px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.al-footer-company { flex-basis: 260px; line-height: 1.8; }
.al-footer-head { margin: 0 0 4px; font-size: 13px; color: #fff; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid #3A4766; }
.al-footer-company-name { margin: 0; font-weight: 700; }
.al-footer-company-desc { margin: 0; color: #D3D8E2; }
.al-footer-underline { text-decoration: underline !important; text-underline-offset: 4px; }
.al-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.al-footer-copy { max-width: 1200px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid #3A4766; font-size: 12px; color: #B9C1D0; }
.single .al-footer { padding-bottom: 96px; }
@media (min-width: 768px) { .single .al-footer { padding-bottom: 28px; } }

/* ============ WordPress 標準クラス ============ */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: 13px; color: var(--muted); }

/* =========================================================
 * アルカナラボとは（page-about.php）
 * ======================================================= */
.al-about-hero { background: var(--cream); border-bottom: 1px solid var(--line); padding-bottom: clamp(36px, 6vw, 72px); }
.al-about-hero .al-crumb { margin-bottom: clamp(20px, 4vw, 44px); }
.al-about-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.al-about-hero-text { max-width: 640px; }
.al-about-title { margin: 0; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.3; letter-spacing: .06em; color: var(--navy); }
.al-about-lead { margin: 22px 0 0; font-size: clamp(15px, 1.4vw, 17px); line-height: 2; color: var(--sub); }
.al-about-mark { flex: none; display: grid; place-items: center; width: clamp(150px, 18vw, 220px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(31, 42, 68, .5); }
.al-about-mark svg { width: 62%; height: auto; }
@media (max-width: 767px) { .al-about-mark { display: none; } }

.al-about-body { padding-top: clamp(44px, 7vw, 88px); padding-bottom: clamp(44px, 7vw, 80px); }
.al-about-content { max-width: 720px; margin: 0 auto; counter-reset: al-about; font-size: 16.5px; line-height: 2.1; }
.al-about-content > p:first-child { font-size: clamp(19px, 2vw, 23px); line-height: 1.8; font-weight: 700; color: var(--navy); letter-spacing: .04em; }
.al-about-content h2 { counter-increment: al-about; position: relative; margin: clamp(52px, 7vw, 76px) 0 20px; padding: 26px 0 0; border: 0; border-top: 1px solid var(--line-2); background: none; font-size: clamp(21px, 2.3vw, 26px); color: var(--navy); }
.al-about-content h2::before { content: counter(al-about, decimal-leading-zero); display: block; margin-bottom: 8px; font: 700 13px/1 "Helvetica Neue", Arial, var(--font); letter-spacing: .24em; color: var(--terra); }
.al-about-content.al-content ul { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.al-about-content.al-content li { margin: 0; padding: 22px 22px 20px; border-radius: 14px; background: var(--cream); font-size: 15px; line-height: 1.95; color: var(--sub); }
.al-about-content.al-content li::marker { content: ""; }
.al-about-content li strong { display: block; margin-bottom: 6px; font-size: 17px; color: var(--navy); background: none; }

.al-about-themes { background: var(--gray); padding: clamp(48px, 7vw, 88px) 0; }
.al-about-h { margin: 0 0 clamp(24px, 4vw, 36px); font-size: clamp(22px, 2.6vw, 30px); color: var(--navy); letter-spacing: .05em; }
.al-about-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .al-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .al-about-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.al-about-card { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 24px; border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); border-top: 4px solid var(--c); transition: transform .2s, box-shadow .2s; }
a.al-about-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 18px 32px -22px rgba(31, 42, 68, .45); }
.al-about-card-icon { display: block; margin-bottom: 8px; }
.al-about-card-icon svg { width: 64px; height: auto; }
.al-about-card-en { font: 700 11px/1 "Helvetica Neue", Arial, var(--font); letter-spacing: .28em; color: var(--ct); }
.al-about-card-name { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: .08em; }
.al-about-card-desc { font-size: 14px; line-height: 1.85; color: var(--sub); }
.al-about-card-subs { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 12.5px; line-height: 1.8; color: var(--muted); }

.al-about-company { background: var(--cream); color: var(--navy); padding: clamp(44px, 6vw, 72px) 0; border-top: 1px solid var(--line); }
.al-about-company .al-eyebrow { color: var(--terra); }
.al-about-company-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.al-about-company-name { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: .06em; }
.al-about-company-desc { margin: 0; max-width: 520px; color: var(--sub); line-height: 1.9; }
.al-about-links { display: flex; flex-direction: column; gap: 10px; min-width: min(100%, 280px); }
.al-about-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--navy); background: #fff; color: var(--navy); text-decoration: none; font-weight: 700; transition: background .2s, color .2s; }
.al-about-link:hover { background: var(--navy); color: #fff; }
.al-about-link--main { background: var(--navy); color: #fff; }
.al-about-link--main:hover { background: var(--navy-2); }

/* ASPのバナー（そのまま表示） */
.al-offer-img--banner { display: grid; place-items: center; background: #fff; overflow: hidden; }
.al-offer-img--banner img, .al-banner img { display: block; max-width: 100%; height: auto; }
.al-banner { position: relative; display: flex; justify-content: center; margin: 28px auto; }
.al-banner .al-offer-pr { position: absolute; top: 4px; left: 4px; }
.al-textlink { position: relative; margin: 28px 0; padding: 22px 22px 20px; border-radius: 14px; background: var(--cream); box-shadow: 0 0 0 1px var(--line); text-align: center; }
.al-textlink .al-offer-pr { top: 10px; right: auto; left: 12px; width: auto; background: #fff; }
.al-textlink-lead { margin: 14px 0 10px; font-size: 14px; color: var(--sub); }
.al-textlink-a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; box-sizing: border-box; padding: 14px 24px; line-height: 1.5; text-align: center; border-radius: 999px; background: var(--cta); color: #fff !important; font-weight: 700; text-decoration: none; box-shadow: 0 8px 18px -10px rgba(217, 72, 15, .8); transition: background .2s, transform .2s; }
.al-textlink-a:hover { background: var(--cta-d); transform: translateY(-1px); }
.al-textlink img[width="1"] { position: absolute; width: 1px; height: 1px; }
.al-pr-note { margin: 0 0 20px; padding: 8px 12px; font-size: 12px; color: var(--sub); background: var(--cream); border-radius: 8px; }