/* GORILLA RIDER 子テーマ：トップ以外の全ページ（ヘッダー・帯・フッター・ブログ一覧・記事の見た目）
   元：Codex 下層ページの部品 03-blog-list / 04-blog-article（CSS部品仕様.json・配置表.json）
   本文（.post_content）の中身・PR表記・目次・ブログカードの仕組みは SWELL のまま。色と見出しの飾りだけ合わせる。 */
:root {
	--gr-orange: #ff5900;
	--gr-black: #101010;
	--gr-text: #222;
	--gr-muted: #777;
	--gr-panel: #f5f5f3;
	--gr-border: #e5e5e5;
	--gr-en: "Barlow", "Noto Sans JP", sans-serif;
}
.gr-site { overflow-x: clip; }

/* ヘッダーは css/gr-ui.css（0.4.6：全ページ共通） */
/* ---------- 帯（BLOG） ---------- */
.gr-band { position: relative; overflow: hidden; background: #111; color: #fff; }
.gr-band picture, .gr-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gr-band img { max-width: none; }
.gr-band--list { aspect-ratio: 1440 / 466; max-height: 560px; }
.gr-band--slim { aspect-ratio: 1440 / 319; max-height: 380px; }
.gr-band__title { position: absolute; margin: 0; padding: 0; border: 0; background: none; font-family: var(--gr-en); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: .01em; transform: skewX(-8deg); text-shadow: 0 4px 18px rgba(0,0,0,.55); }
.gr-band--list .gr-band__title { left: 4.9%; top: 37%; font-size: clamp(56px, 10.3vw, 148px); color: var(--gr-orange); }
.gr-band--slim .gr-band__title { left: 5.3%; top: 32%; font-size: clamp(40px, 5.3vw, 76px); color: #fff; }
.gr-band__cam { position: absolute; right: 2.4%; bottom: 0; width: 43.9%; height: auto; }
.gr-band__l { position: absolute; height: auto; pointer-events: none; }
.gr-band--list .gr-band__l--deeper { left: 5.9%; top: 13%; width: 30.4%; }
.gr-band--list .gr-band__l--discover { right: 1.3%; top: 7%; width: 13.6%; }
.gr-band--list .gr-band__l--world { left: 11.7%; top: 79%; width: 29.7%; }
.gr-band--slim .gr-band__l--deeper { left: 5.3%; top: 64%; width: 20.1%; }
.gr-band--slim .gr-band__l--script { right: 0.9%; top: 46%; width: 11.8%; }
.gr-band--slim .gr-band__l--friends { right: 2.1%; top: 65%; width: 10.3%; }
@media (max-width: 767px) {
	.gr-band--list { aspect-ratio: 375 / 250; }
	.gr-band--slim { aspect-ratio: 375 / 158; }
	.gr-band--list .gr-band__title { left: 16px; top: 38%; font-size: 64px; }
	.gr-band--slim .gr-band__title { left: 20px; top: 24%; font-size: 44px; }
	.gr-band__cam { width: 44%; }
	.gr-band--list .gr-band__l--deeper { left: 16px; top: 14%; width: 51%; }
	.gr-band--list .gr-band__l--discover { width: 28%; }
	.gr-band--list .gr-band__l--world { left: 16px; top: 82%; width: 50%; }
	.gr-band--slim .gr-band__l--deeper { left: 20px; top: 62%; width: 40%; }
	.gr-band--slim .gr-band__l--script { width: 26%; top: 42%; }
	.gr-band--slim .gr-band__l--friends { width: 27%; top: 66%; }
}

/* ---------- ぱんくず ---------- */
.gr-site .p-breadcrumb { background: none; }
.gr-site .p-breadcrumb__text { color: var(--gr-text); font-weight: 700; }

/* ---------- ブログ一覧（/blog/・カテゴリー） ---------- */
.gr-list #content.l-content { max-width: 1440px; display: grid; grid-template-columns: minmax(0, 888px) minmax(0, 450px); justify-content: space-between; column-gap: 37px; padding: 32px 30px 64px; }
.gr-list #main_content { width: auto; max-width: none; margin: 0; }
.gr-list__head { margin: 8px 0 20px; }
.gr-list__title { position: relative; margin: 0; padding: 0 0 0 26px; font-size: 40px; font-weight: 900; line-height: 1.3; color: #161616; background: none; border: 0; }
.gr-list__title::before { content: ""; position: absolute; left: 0; top: .18em; width: 10px; height: 1.05em; background: var(--gr-orange); transform: skewX(-12deg); }
.gr-list__title::after { content: none; }
.gr-list__sub { margin-left: .6em; font-size: .4em; font-weight: 700; color: var(--gr-muted); letter-spacing: .08em; }
.gr-list__intro { margin: 12px 0 0 26px; font-size: 16px; line-height: 1.9; color: #333; }
.gr-search { display: flex; align-items: stretch; height: 48px; margin: 0 0 20px; border: 1px solid #d7d7d7; border-radius: 4px; background: #fff; overflow: hidden; }
.gr-search input { flex: 1; min-width: 0; border: 0; padding: 0 16px; font-size: 16px; background: none; }
.gr-search input:focus { outline: none; }
.gr-search:focus-within { outline: 3px solid #222; outline-offset: 3px; }
.gr-search button { flex: none; min-width: 96px; border: 0; background: var(--gr-orange); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; }
.gr-chips { display: flex; gap: 12px; margin: 0 0 28px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gr-chips::-webkit-scrollbar { display: none; }
.gr-chips a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #f3f3f1; color: #333; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.gr-chips a.is-active { background: var(--gr-orange); color: #fff; }
.gr-chips a:focus-visible, .gr-card__link:focus-visible { outline: 3px solid #222; outline-offset: 3px; }
.gr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 21px; }
.gr-card { min-width: 0; background: #fff; border: 1px solid var(--gr-border); border-radius: 4px; box-shadow: 0 2px 8px rgb(0 0 0 / 4%); overflow: hidden; }
.gr-card--feat { grid-column: 1 / -1; }
.gr-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.gr-card__img { position: relative; margin: 0; aspect-ratio: 158 / 134; overflow: hidden; background: #eee; }
.gr-card--feat .gr-card__img { aspect-ratio: 499 / 264; }
.gr-card__img img, .gr-card__noimg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gr-card__link:hover .gr-card__img img { transform: scale(1.04); }
.gr-card__cat { position: absolute; left: 10px; bottom: 10px; padding: 3px 12px; border-radius: 999px; background: var(--gr-orange); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; }
.gr-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 14px 12px; }
.gr-card__title { margin: 0 0 8px; padding: 0; border: 0; background: none; font-size: 17px; font-weight: 800; line-height: 1.5; color: #161616; }
.gr-card__title::before, .gr-card__title::after { content: none; }
.gr-card--feat .gr-card__title { font-size: 26px; }
.gr-card__ex { margin: 0 0 10px; font-size: 13px; line-height: 1.8; color: var(--gr-muted); }
.gr-card--feat .gr-card__ex { font-size: 15px; color: #444; }
.gr-card__foot { display: flex; justify-content: space-between; align-items: center; margin: auto 0 0; font-size: 12px; color: var(--gr-muted); font-family: var(--gr-en); }
.gr-card__foot i { font-style: normal; color: var(--gr-orange); font-weight: 700; font-size: 18px; }
.gr-list .c-pagination { margin-top: 36px; }
.gr-list .c-pagination .page-numbers.current { background: #161616; color: #fff; }
/* 一覧のサイドバー */
.gr-side { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.gr-panel { background: #fff; border: 1px solid var(--gr-border); border-radius: 3px; overflow: hidden; }
.gr-panel--cats { background: #f3f3f1; border: 0; }
.gr-panel__h { position: relative; margin: 0; padding: 14px 20px 14px 40px; background: var(--gr-black); color: #fff; font-size: 20px; font-weight: 800; line-height: 1.4; border: 0; }
.gr-panel__h::before { content: ""; position: absolute; left: 20px; top: 50%; width: 7px; height: 22px; margin-top: -11px; background: var(--gr-orange); transform: skewX(-12deg); }
.gr-panel__h::after { content: none; }
.gr-rank { list-style: none; margin: 0; padding: 8px 16px; }
.gr-rank li { border-bottom: 1px solid #eee; }
.gr-rank li:last-child { border-bottom: 0; }
.gr-rank a { display: grid; grid-template-columns: 40px 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 0; color: inherit; text-decoration: none; }
.gr-rank__n { font-family: var(--gr-en); font-weight: 700; font-size: 26px; color: #888; font-style: italic; }
.gr-rank__img img { display: block; width: 100%; aspect-ratio: 151 / 114; object-fit: cover; border-radius: 4px; }
.gr-rank__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gr-rank__t em { align-self: flex-start; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--gr-orange); border-radius: 999px; padding: 1px 10px; }
.gr-rank__t b { font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gr-rank__t time { font-size: 11px; color: #999; font-family: var(--gr-en); }
.gr-catcards { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.gr-catcards a { display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: center; gap: 12px; background: #fff; border-radius: 4px; padding: 6px 14px 6px 0; color: inherit; text-decoration: none; min-height: 150px; }
.gr-catcards img { width: 100%; height: auto; display: block; }
.gr-catcards span { display: flex; flex-direction: column; gap: 6px; }
.gr-catcards b { font-size: 20px; font-weight: 800; }
.gr-catcards small { font-size: 13px; line-height: 1.7; color: #555; }
.gr-catcards i { align-self: flex-end; font-style: normal; color: var(--gr-orange); font-weight: 700; font-size: 18px; }
@media (max-width: 1023px) {
	.gr-list #content.l-content { grid-template-columns: minmax(0, 1fr); padding: 24px 24px 48px; row-gap: 40px; }
	.gr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.gr-list #content.l-content { padding: 20px 16px 40px; }
	.gr-list__title { font-size: 24px; padding-left: 20px; }
	.gr-list__title::before { width: 7px; }
	.gr-list__intro { margin-left: 0; font-size: 15px; }
	.gr-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.gr-card__img, .gr-card--feat .gr-card__img { aspect-ratio: 16 / 9; }
	.gr-card--feat .gr-card__title, .gr-card__title { font-size: 19px; }
	.gr-chips { margin-right: -16px; padding-right: 16px; }
	.gr-rank a { grid-template-columns: 30px 106px minmax(0, 1fr); }
	.gr-catcards a { min-height: 0; }
}

/* ---------- 記事・固定ページ（SWELL の中身に色と飾りだけ） ---------- */
.gr-site .c-postTitle__ttl, .gr-site .c-pageTitle__inner { font-weight: 900; color: #161616; }
.gr-site .c-postTitle__ttl { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.45; }
.gr-site .p-articleHead .c-categoryList__link { background: var(--gr-orange); color: #fff; }
.gr-site .post_content h2 { position: relative; background: none; color: #161616; border: 0; padding: .2em 0 .2em 1.1em; font-weight: 900; }
.gr-site .post_content h2::before { content: ""; position: absolute; display: block; left: 0; top: .25em; bottom: .25em; width: 10px; height: auto; background: var(--gr-orange); transform: skewX(-12deg); border: 0; }
.gr-site .post_content h2::after { content: none; }
.gr-site .p-toc { background: var(--gr-panel); border: 0; border-radius: 4px; }
.gr-site .p-toc__ttl { font-weight: 800; }
.gr-site .p-toc__list > li::before, .gr-site .p-toc ol > li::before { color: var(--gr-orange); }
/* サイドバー（SWELL のウィジェット）を 04-blog-article の灰色のパネルに */
.gr-site #sidebar .c-widget { background: var(--gr-panel); padding: 20px 22px; border-radius: 0; }
.gr-site #sidebar .c-widget__title, .gr-site #sidebar .c-secTitle { position: relative; background: none; color: #161616; border: 0; padding: 0 0 0 18px; margin-bottom: 14px; font-size: 20px; font-weight: 800; text-align: left; }
.gr-site #sidebar .c-widget__title::before, .gr-site #sidebar .c-widget__title::after { content: ""; position: absolute; left: 0; top: .2em; width: 7px; height: 1.1em; background: var(--gr-orange); transform: skewX(-12deg); border: 0; opacity: 1; }
.gr-site #sidebar .c-widget__title::after { content: none; }
.gr-site .l-articleBottom .l-articleBottom__title, .gr-site .p-relatedPosts .l-articleBottom__title { border: 0; text-align: left; }

/* ---------- クロージング・フッター ---------- */
.gr-closing { position: relative; overflow: hidden; aspect-ratio: 1440 / 240; min-height: 160px; background: #1a1410; }
.gr-closing img { position: absolute; max-width: none; height: auto; }
.gr-closing__bg { inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.gr-closing__cast { left: 25.4%; bottom: 0; width: 56.2%; }
.gr-closing__l1 { left: 3.2%; top: 34%; width: 16.9%; }
.gr-closing__l2 { right: 1.4%; top: 7%; width: 11.3%; }
.gr-footer.l-footer { position: relative; background: #0b0b0b url(../assets/pages/footer-background.webp?v=0.4.9) center / cover no-repeat; color: #fff; padding: 0; }
.gr-footer__in { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 150px minmax(0, 1fr) 210px; align-items: center; gap: 32px; padding: 14px 40px 18px 56px; }
.gr-footer__logo img { width: 140px; height: auto; display: block; }
.gr-footer__nav { display: flex; flex-wrap: wrap; font-family: var(--gr-en); font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.gr-footer__nav a { color: #fff; text-decoration: none; padding: 6px 18px; border-left: 1px solid rgba(255,255,255,.4); }
.gr-footer__nav a:first-child { border-left: 0; padding-left: 0; }
.gr-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-size: 12px; color: #ccc; }
.gr-footer__legal a { color: #ccc; text-decoration: none; }
.gr-footer__gear { width: 200px; height: auto; }
@media (max-width: 767px) {
	.gr-closing { aspect-ratio: 375 / 190; }
	.gr-closing__cast { left: 4%; width: 92%; }
	.gr-closing__l1 { left: 16px; top: 8%; width: 30%; }
	.gr-closing__l2 { right: 12px; top: 8%; width: 19%; }
	.gr-footer__in { grid-template-columns: 66px minmax(0, 1fr); gap: 12px 16px; padding: 16px 16px 24px; }
	.gr-footer__logo img { width: 66px; }
	.gr-footer__gear { grid-column: 2; grid-row: 1; justify-self: end; width: 120px; }
	.gr-footer__mid { grid-column: 1 / -1; }
	.gr-footer__nav a { padding: 10px 12px; min-height: 44px; }
}

/* アイキャッチは題が焼き込まれた 1200×630 なので、一覧の写真の枠もその比にして文字を切らない */
.gr-card__img, .gr-card--feat .gr-card__img { aspect-ratio: 1200 / 630; }
.gr-rank__img img { aspect-ratio: 1200 / 630; }
.gr-list .c-pagination { display: flex; justify-content: center; gap: 8px; }
.gr-list .c-pagination .page-numbers { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #161616; font-weight: 700; opacity: 1; }
.gr-list .c-pagination .page-numbers.current { background: #161616; border-color: #161616; color: #fff; }
.gr-list .c-pagination .page-numbers.dots { border: 0; background: none; }
@media (max-width: 767px) { .gr-card__img, .gr-card--feat .gr-card__img { aspect-ratio: 1200 / 630; } }
.gr-footer__sns { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-family: var(--gr-en); font-weight: 600; font-size: 13px; }
.gr-footer__sns a { color: #ddd; text-decoration: none; }
.gr-footer__sns a:hover, .gr-footer__nav a:hover, .gr-footer__legal a:hover { color: #ff7a1a; }
@media (max-width: 767px) { .gr-footer__sns a { padding: 8px 0; } }