@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    2.0.0
*/

/************************************
** おじクラ リニューアル デザインシステム
** 夜の森 × 松明 × ブロック。
** 「大人が真面目にふざけているマイクラ日記」
************************************/

:root {
  --oj-night: #0d1220;
  --oj-night-2: #121a2e;
  --oj-panel: #182238;
  --oj-panel-2: #1f2c47;
  --oj-border: #2c3c5e;
  --oj-text: #ece8da;
  --oj-muted: #9aa7bd;
  --oj-torch: #ffaf3c;
  --oj-torch-dark: #c97e1f;
  --oj-grass: #7cc14e;
  --oj-grass-dark: #4f8f33;
  --oj-dirt: #7a5230;
  --oj-dirt-dark: #573a20;
  --oj-danger: #e5544b;
  --oj-diamond: #5fd2e4;
  --oj-font-pixel: 'DotGothic16', 'Hiragino Kaku Gothic ProN', sans-serif;
}

/************************************
** 全体ベース（夜の世界）
************************************/

body {
  background-color: var(--oj-night);
  background-image:
    url(assets/images/bg/stars.svg),
    linear-gradient(180deg, #0a1430 0%, #0c1426 26%, #0b0f1c 64%, #090d16 100%);
  background-repeat: repeat, no-repeat;
  background-size: 320px 320px, 100% 100%;
  background-position: 0 0, center top;
  background-attachment: scroll, fixed;
}

/* 選択色も世界観に合わせる */
::selection {
  background: var(--oj-torch);
  color: #1c1407;
}

/************************************
** ヘッダー
************************************/

#header-container {
  background: linear-gradient(180deg, #0a0f1b 0%, var(--oj-night-2) 100%);
  border-bottom: 4px solid var(--oj-grass-dark);
  box-shadow: 0 4px 0 var(--oj-dirt-dark);
}

#header-in {
  padding: 16px 0 12px;
  display: flex;
  justify-content: center;
  text-align: center;
}

/* Cocoonは#logoを幅100%固定にするので、ロゴ自体をflexにして中身を中央寄せ */
#header-in #logo.oj-logo {
  justify-content: center;
}

.oj-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 4px 0;
}

.oj-logo:hover {
  opacity: .85;
}

.oj-logo-face {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
}

.oj-logo-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.oj-logo-name {
  font-family: var(--oj-font-pixel);
  font-size: 28px;
  font-weight: 400;
  color: var(--oj-text);
  margin: 0;
  letter-spacing: .06em;
}

.oj-logo-tagline {
  font-family: var(--oj-font-pixel);
  font-size: 11px;
  color: var(--oj-muted);
  letter-spacing: .08em;
}

/* グローバルナビ */
#navi {
  background: transparent;
}

#navi .navi-in > ul li {
  border: none;
}

#navi .navi-in > ul li a,
#navi .navi-in > ul .menu-item a {
  font-family: var(--oj-font-pixel);
  color: var(--oj-text);
  background: transparent;
  border-bottom: 4px solid transparent;
  transition: none;
}

#navi .navi-in > ul li a:hover {
  background: var(--oj-panel-2);
  border-bottom-color: var(--oj-torch);
  color: var(--oj-torch);
}

#navi .navi-in > ul > li > ul.sub-menu li a {
  background: var(--oj-panel);
  color: var(--oj-text);
}

#navi .navi-in > ul > li > ul.sub-menu li a:hover {
  background: var(--oj-panel-2);
  color: var(--oj-torch);
}

#menu-gnav .item-description {
  display: none;
}

/************************************
** パンくず・本文エリア（記事は読みやすく明るく）
************************************/

.breadcrumb,
.breadcrumb a {
  color: var(--oj-muted);
}

.breadcrumb a:hover {
  color: var(--oj-torch);
}

body:not(.home) .main,
body:not(.home) .sidebar {
  background: #fdfcf8;
  border: 3px solid #000;
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .08),
    inset 4px 4px 0 rgba(255, 255, 255, .9),
    8px 8px 0 rgba(0, 0, 0, .35);
  border-radius: 0;
}

body:not(.home) .sidebar {
  padding: 20px;
}

/* 記事内見出し */
.article h2 {
  font-family: var(--oj-font-pixel);
  background: var(--oj-night-2);
  color: var(--oj-text);
  border-left: 10px solid var(--oj-torch);
  border-radius: 0;
  padding: 14px 18px;
}

.article h3 {
  font-family: var(--oj-font-pixel);
  border: none;
  border-left: 10px solid var(--oj-grass);
  border-bottom: 3px solid var(--oj-night-2);
  padding: 8px 14px;
}

.article h4 {
  border-top: none;
  border-bottom: 3px dashed var(--oj-dirt);
}

/* サイドバー見出し */
.sidebar h3 {
  font-family: var(--oj-font-pixel);
  background: var(--oj-night-2);
  color: var(--oj-text);
  border-radius: 0;
  padding: 8px 12px;
}

/* Season3 記事：全幅・サイドバー無し・読みやすい中央カラム */
body.oj-s3-article .main {
  width: 100%;
}

body.oj-s3-article #content-in,
body.oj-s3-article .content-in {
  max-width: 900px;
}

/* Season3記事はカテゴリチップを冒険ログUIに集約（Cocoon標準カテゴリは隠す） */
body.oj-s3-article .entry-categories,
body.oj-s3-article .entry-categories-tags {
  display: none;
}

/* Season3記事はCocoonの前後記事ナビを隠し、「Season3の記録を追う」を主導線に */
body.oj-s3-article #pager-post-navi {
  display: none;
}

/* Season3 記事：タイトル直下の冒険ログメタ（Season3／第N話／Java版／公開日） */
.oj-s3-log {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 14px 0 6px;
  font-family: var(--oj-font-pixel);
  font-size: 13px;
}

.oj-s3-log__series {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--oj-night);
  background: var(--oj-torch);
  border: 2px solid #000;
  box-shadow: inset -2px -2px 0 var(--oj-torch-dark);
  padding: 3px 12px;
  text-decoration: none;
}

.oj-s3-log__series:hover {
  color: var(--oj-night);
  filter: brightness(1.08);
}

.oj-s3-log__icon {
  width: 12px;
  height: 12px;
  background: var(--oj-grass);
  box-shadow: inset -3px -3px 0 var(--oj-grass-dark);
}

.oj-s3-log__no {
  color: var(--oj-text);
  background: var(--oj-panel-2);
  border: 2px solid #000;
  padding: 3px 10px;
}

.oj-s3-log__edition,
.oj-s3-log__date {
  color: var(--oj-muted);
}

/* Season3 記事下ナビ */
.ojicra-article-follow {
  margin: 2em 0 1em;
  border: 3px solid #000;
  background: var(--oj-night-2);
  padding: 18px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .3);
}

.ojicra-article-follow h2 {
  font-family: var(--oj-font-pixel);
  background: none;
  border: none;
  color: var(--oj-torch);
  font-size: 18px;
  margin: 0 0 12px;
  padding: 0;
}

.ojicra-article-follow__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ojicra-article-follow__links a {
  font-family: var(--oj-font-pixel);
  display: inline-block;
  padding: 8px 14px;
  background: var(--oj-panel-2);
  color: var(--oj-text);
  text-decoration: none;
  border: 2px solid #000;
  box-shadow:
    inset -3px -3px 0 rgba(0, 0, 0, .4),
    inset 3px 3px 0 rgba(255, 255, 255, .12);
}

.ojicra-article-follow__links a:hover {
  background: var(--oj-torch);
  color: #1c1407;
}

/************************************
** フッター（地面：草ブロックの断面）
************************************/

.footer {
  background: var(--oj-dirt-dark);
  background-image:
    linear-gradient(180deg, var(--oj-grass) 0, var(--oj-grass) 8px, var(--oj-grass-dark) 8px, var(--oj-grass-dark) 12px, transparent 12px),
    repeating-linear-gradient(90deg, transparent 0, transparent 28px, rgba(0, 0, 0, .12) 28px, rgba(0, 0, 0, .12) 56px);
  border-top: none;
  padding-top: 36px;
  color: var(--oj-text);
}

.footer a {
  color: var(--oj-text);
}

.footer a:hover {
  color: var(--oj-torch);
}

.footer .copyright {
  font-family: var(--oj-font-pixel);
  color: rgba(236, 232, 218, .75);
}

/* ページトップへ戻るボタン */
.go-to-top-button {
  background: var(--oj-torch);
  color: #1c1407;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow:
    inset -3px -3px 0 rgba(0, 0, 0, .35),
    inset 3px 3px 0 rgba(255, 255, 255, .35);
}

/* モバイルメニュー */
.mobile-menu-buttons {
  background: var(--oj-night-2);
  border-top: 3px solid var(--oj-grass-dark);
}

.mobile-menu-buttons .menu-button > a {
  color: var(--oj-text);
}

.oj-mobile-footer-buttons {
  background: rgba(13, 18, 32, .96);
  border-top: 3px solid var(--oj-grass-dark);
  box-shadow: 0 -4px 0 rgba(0, 0, 0, .35);
}

.oj-mobile-footer-buttons .menu-button-in {
  color: var(--oj-text);
}

.oj-mobile-footer-buttons .menu-icon {
  color: var(--oj-torch);
}

.oj-mobile-footer-buttons .menu-caption {
  font-family: var(--oj-font-pixel);
  font-size: 10px;
}

/************************************
** トップページ（.oj-front）
************************************/

body.home .main {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: 100%;
  color: var(--oj-text);
}

body.home .sidebar {
  display: none;
}

body.home .breadcrumb {
  display: none;
}

.oj-front {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  color: var(--oj-text);
}

.oj-front a {
  color: inherit;
}

/* 共通：セクション */
.oj-section {
  margin: 72px 0;
}

.oj-h2 {
  font-family: var(--oj-font-pixel);
  font-size: 28px;
  font-weight: 400;
  color: var(--oj-text);
  letter-spacing: .06em;
  margin: 0 0 28px;
  padding: 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 14px;
}

.oj-h2::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: var(--oj-grass);
  box-shadow:
    inset -4px -4px 0 var(--oj-grass-dark),
    inset 4px 4px 0 rgba(255, 255, 255, .35);
}

.oj-h2::after {
  content: "";
  flex: 1;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--oj-border) 0, var(--oj-border) 8px, transparent 8px, transparent 16px);
}

/* 共通：マイクラ風ボタン */
.oj-btn {
  font-family: var(--oj-font-pixel);
  display: inline-block;
  padding: 13px 22px;
  font-size: 16px;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--oj-text);
  background: var(--oj-panel-2);
  border: 2px solid #000;
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .45),
    inset 4px 4px 0 rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: none;
}

.oj-btn:hover {
  background: #2a3a5e;
  color: #fff;
  text-decoration: none;
}

.oj-btn:active {
  box-shadow:
    inset 4px 4px 0 rgba(0, 0, 0, .45),
    inset -4px -4px 0 rgba(255, 255, 255, .1);
}

.oj-btn--primary {
  background: var(--oj-torch);
  color: #1c1407;
  box-shadow:
    inset -4px -4px 0 var(--oj-torch-dark),
    inset 4px 4px 0 rgba(255, 255, 255, .5);
}

.oj-btn--primary:hover {
  background: #ffc05e;
  color: #1c1407;
}

.oj-soon-badge {
  font-family: var(--oj-font-pixel);
  display: inline-block;
  padding: 13px 22px;
  font-size: 16px;
  color: var(--oj-night);
  background: var(--oj-grass);
  border: 2px solid #000;
  box-shadow:
    inset -4px -4px 0 var(--oj-grass-dark),
    inset 4px 4px 0 rgba(255, 255, 255, .4);
  animation: oj-blink 2.4s step-end infinite;
}

@keyframes oj-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

.oj-more {
  text-align: center;
  margin: 28px 0 0;
}

/************************************
** HERO
************************************/

.oj-hero {
  position: relative;
  margin: 0 0 56px;
  padding: 64px 0 0;
}

.oj-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 8px 48px;
}

.oj-hero-eyebrow {
  font-family: var(--oj-font-pixel);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--oj-torch);
  margin: 0 0 18px;
}

.oj-hero-title {
  font-family: var(--oj-font-pixel);
  font-size: clamp(44px, 7vw, 76px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--oj-text);
  margin: 0 0 22px;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, .55);
}

.oj-hero-lead {
  font-size: 17px;
  line-height: 2;
  color: var(--oj-muted);
  margin: 0 0 30px;
}

.oj-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.oj-hero-latest {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--oj-muted);
}

.oj-hero-latest a {
  color: var(--oj-diamond);
  text-decoration: none;
}

.oj-hero-latest a:hover {
  text-decoration: underline;
}

.oj-hero-chara {
  flex: 0 0 auto;
  align-self: flex-end;
}

.oj-hero-chara img {
  display: block;
  width: clamp(160px, 24vw, 280px);
  height: auto;
  filter: drop-shadow(8px 10px 0 rgba(0, 0, 0, .4));
  animation: oj-bob 2.8s ease-in-out infinite;
}

@keyframes oj-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* 地面（草ブロック断面・クリックで採掘できる） */
.oj-ground {
  position: relative;
  height: 28px;
  background:
    linear-gradient(180deg, var(--oj-grass) 0, var(--oj-grass) 10px, var(--oj-grass-dark) 10px, var(--oj-grass-dark) 14px, var(--oj-dirt) 14px, var(--oj-dirt) 28px),
    repeating-linear-gradient(90deg, transparent 0, transparent 28px, rgba(0, 0, 0, .1) 28px, rgba(0, 0, 0, .1) 56px);
  background-blend-mode: multiply;
  box-shadow: 0 6px 0 var(--oj-dirt-dark);
  cursor: pointer;
}

.oj-ground:active {
  background-position: 0 2px, 0 0;
}

/************************************
** 遊び心・アニメーション
** おじさんは、生きています。
************************************/

/* スクロールで貯まる経験値バー（XPバー） */
.oj-xpbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: #0a0f1b;
  z-index: 9999;
  pointer-events: none;
}

.oj-xpbar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #7cfc3a;
  box-shadow: 0 0 8px rgba(124, 252, 58, .8), inset 0 -2px 0 rgba(0, 0, 0, .35);
}

/* 夜空・雲・流れ星 */
.oj-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* 四角い月 */
.oj-moon {
  position: absolute;
  top: 44px;
  right: 9%;
  width: 78px;
  height: 78px;
  background: #eef1f6;
  box-shadow:
    inset -10px -10px 0 rgba(10, 14, 30, .07),
    inset 12px 8px 0 rgba(10, 14, 30, .05),
    0 0 0 4px rgba(238, 241, 246, .06),
    0 0 46px rgba(200, 220, 255, .22);
  image-rendering: pixelated;
}

.oj-moon::before,
.oj-moon::after {
  content: "";
  position: absolute;
  background: rgba(10, 14, 30, .07);
}

.oj-moon::before {
  top: 16px;
  left: 14px;
  width: 12px;
  height: 12px;
}

.oj-moon::after {
  bottom: 14px;
  right: 18px;
  width: 16px;
  height: 16px;
}

/* 奥のブロック状の木立シルエット */
.oj-treeline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 100px;
  background: url(assets/images/bg/treeline.svg) repeat-x left bottom;
  background-size: auto 100px;
  z-index: 0;
}

.oj-cloud {
  position: absolute;
  width: 56px;
  height: 18px;
  background: rgba(255, 255, 255, .82);
  box-shadow:
    18px -10px 0 rgba(255, 255, 255, .82),
    36px -10px 0 rgba(255, 255, 255, .82),
    18px 0 0 rgba(255, 255, 255, .82),
    54px 0 0 rgba(255, 255, 255, .82);
}

.oj-cloud--1 {
  top: 56px;
  left: -120px;
  animation: oj-drift 32s linear infinite;
}

.oj-cloud--2 {
  top: 128px;
  left: -160px;
  opacity: .45;
  transform: scale(1.5);
  animation: oj-drift2 52s linear infinite 8s;
}

@keyframes oj-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

@keyframes oj-drift2 {
  from { transform: translateX(0) scale(1.5); }
  to   { transform: translateX(calc(100vw + 260px)) scale(1.5); }
}

.oj-shooting-star {
  position: absolute;
  top: 30px;
  left: 8%;
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  opacity: 0;
  transform: rotate(22deg);
  animation: oj-shoot 11s ease-in infinite;
}

@keyframes oj-shoot {
  0%, 78%   { opacity: 0; transform: translate(0, 0) rotate(22deg); }
  80%       { opacity: 1; }
  92%       { opacity: 1; transform: translate(46vw, 24vh) rotate(22deg); }
  100%      { opacity: 0; transform: translate(50vw, 26vh) rotate(22deg); }
}

/* HEROのおじさん：話しかけられる主役 */
.oj-hero-chara {
  position: relative;
  outline: none;
  z-index: 2;
}

/* クリック誘導とポインタは、操作できるトップのおじさん（#oj-hero-chara）だけ */
#oj-hero-chara {
  cursor: pointer;
}

#oj-hero-chara::after {
  content: "クリック！";
  position: absolute;
  top: 6px;
  right: -4px;
  font-family: var(--oj-font-pixel);
  font-size: 11px;
  color: var(--oj-night);
  background: var(--oj-torch);
  padding: 3px 8px;
  border: 2px solid #000;
  transform: rotate(6deg);
  animation: oj-blink 2.4s step-end infinite;
}

#oj-hero-chara.is-talking::after {
  display: none;
}

.oj-hero-chara img {
  position: relative;
  z-index: 1;
}

.oj-chara-shadow {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 58%;
  height: 16px;
  background: rgba(0, 0, 0, .38);
  border-radius: 50%;
  filter: blur(3px);
  z-index: 0;
}

/* おじさんの吹き出し */
.oj-bubble {
  position: absolute;
  bottom: calc(100% - 30px);
  left: 50%;
  width: max-content;
  max-width: min(240px, 64vw);
  transform: translate(-58%, 0) scale(.4);
  transform-origin: bottom left;
  font-family: var(--oj-font-pixel);
  font-size: 14px;
  line-height: 1.6;
  color: #1c1407;
  background: #fdfcf8;
  border: 3px solid #000;
  padding: 11px 15px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  z-index: 6;
  transition: opacity .18s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.oj-bubble::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 40%;
  border: 7px solid transparent;
  border-top-color: #000;
}

.oj-hero-chara.is-talking .oj-bubble {
  opacity: 1;
  transform: translate(-58%, 0) scale(1);
}

/* クリックでジャンプ */
.oj-hero-chara.is-jump img {
  animation: oj-jump .5s ease;
}

@keyframes oj-jump {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-38px) rotate(-3deg); }
}

/* ふもとを歩くおじさん */
.oj-walker {
  position: absolute;
  bottom: 22px;
  left: 0;
  width: 52px;
  z-index: 1;
  animation: oj-walk 26s linear infinite;
}

.oj-walker img {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(-1);
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .4));
}

@keyframes oj-walk {
  0%   { transform: translateX(-70px); }
  100% { transform: translateX(calc(100vw + 70px)); }
}

/* ハートは鼓動する */
.oj-heart:not(.is-empty) {
  animation: oj-beat 1.8s ease-in-out infinite;
}

.oj-heart:nth-child(even):not(.is-empty) {
  animation-delay: .25s;
}

@keyframes oj-beat {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.22); }
  26%      { transform: scale(1); }
}

/* 採掘パーティクル（地面クリック時にJSが生成） */
.oj-particle {
  position: fixed;
  width: 9px;
  height: 9px;
  background: var(--oj-dirt);
  border: 1px solid rgba(0, 0, 0, .5);
  pointer-events: none;
  z-index: 9998;
  will-change: transform, opacity;
}

/* カードを押し込む手応え */
.oj-card:active,
.oj-season-card .oj-btn:active {
  transform: translate(2px, 2px);
}

/************************************
** Season3 入口（カテゴリページ先頭バナー）
************************************/

.oj-s3intro {
  max-width: 1080px;
  margin: 0 auto 10px;
  padding: 40px 20px 8px;
}

.oj-s3intro-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.oj-s3intro-title {
  font-family: var(--oj-font-pixel);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 400;
  color: var(--oj-text);
  margin: 6px 0 16px;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
}

.oj-s3intro-lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--oj-muted);
  margin: 0 0 20px;
  max-width: 60ch;
}

.oj-s3intro-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 0 0 10px;
}

.oj-s3intro-stat {
  font-size: 14px;
  color: var(--oj-text);
}

.oj-s3intro-stat b {
  font-family: var(--oj-font-pixel);
  font-weight: 400;
  font-size: 12px;
  color: var(--oj-muted);
  margin-right: 8px;
}

.oj-s3intro-status {
  font-size: 14px;
  color: var(--oj-grass);
  margin: 0 0 20px;
}

.oj-s3intro-chara {
  flex: 0 0 auto;
}

.oj-s3intro-chara img {
  display: block;
  width: 110px;
  height: auto;
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .4));
}

.oj-s3intro-note {
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  color: var(--oj-muted);
  text-align: center;
  margin: 22px 0 0;
}

/* Season3 全話アーカイブの軽い導線バー（カテゴリ上部） */
.oj-s3archive-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 26px;
  padding: 14px 18px;
  background: var(--oj-panel);
  border: 3px solid #000;
  border-left: 8px solid var(--oj-torch);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .3);
}

.oj-s3archive-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--oj-font-pixel);
  font-size: 16px;
  color: var(--oj-text);
  margin-right: auto;
}

.oj-s3archive-tag {
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  color: var(--oj-night);
  background: var(--oj-torch);
  border: 2px solid #000;
  box-shadow: inset -2px -2px 0 var(--oj-torch-dark);
  padding: 1px 9px;
}

.oj-s3archive-note .oj-btn {
  font-size: 14px;
  padding: 9px 16px;
}

@media screen and (max-width: 480px) {
  .oj-s3archive-label {
    margin-right: 0;
    width: 100%;
  }
}

@media screen and (max-width: 834px) {
  .oj-s3intro-chara {
    display: none;
  }
}

/************************************
** カードグリッド（Season3最新・人気記事）
************************************/

.oj-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.oj-card {
  display: block;
  background: var(--oj-panel);
  border: 3px solid #000;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
  text-decoration: none;
  overflow: hidden;
}

.oj-card:hover {
  background: var(--oj-panel-2);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .35);
}

.oj-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.oj-card-body {
  display: block;
  padding: 14px 16px 16px;
}

.oj-card-date {
  display: block;
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  color: var(--oj-torch);
  margin-bottom: 6px;
}

.oj-card-title {
  display: block;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--oj-text);
}

/************************************
** 現在のワールド状態（HUD）
************************************/

.oj-hud-panel {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  background: var(--oj-panel);
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px var(--oj-border),
    8px 8px 0 rgba(0, 0, 0, .35);
  padding: 28px;
}

.oj-hud-main {
  flex: 1;
  min-width: 0;
}

.oj-hud-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

.oj-hud-label {
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--oj-muted);
  min-width: 64px;
}

.oj-hud-value {
  font-family: var(--oj-font-pixel);
  font-size: 20px;
  color: var(--oj-torch);
}

/* ハート（ピクセル風） */
.oj-hearts {
  display: inline-flex;
  gap: 5px;
}

.oj-heart {
  width: 20px;
  height: 18px;
  background: var(--oj-danger);
  clip-path: polygon(
    25% 0, 50% 20%, 75% 0, 100% 0, 100% 45%,
    50% 100%, 0 45%, 0 0
  );
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .3);
}

.oj-heart.is-empty {
  background: #3a4661;
}

.oj-hud-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  margin: 0 0 18px;
}

.oj-hud-list > div {
  display: flex;
  gap: 12px;
  border-bottom: 2px dotted var(--oj-border);
  padding-bottom: 8px;
}

.oj-hud-list dt {
  font-family: var(--oj-font-pixel);
  color: var(--oj-muted);
  font-size: 13px;
  min-width: 6.5em;
  font-weight: 400;
}

.oj-hud-list dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--oj-text);
}

.oj-hud-status {
  font-size: 14px;
  color: var(--oj-grass);
  margin: 0 0 20px;
}

.oj-hud-status::before {
  content: "▸ ";
}

/* おじさん最終確認（生きてる感） */
.oj-hud-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  color: var(--oj-muted);
  margin: 0 0 18px;
}

.oj-live-dot {
  width: 10px;
  height: 10px;
  background: var(--oj-grass);
  box-shadow: 0 0 0 0 rgba(124, 193, 78, .6);
  animation: oj-pulse 2s ease-out infinite;
}

@keyframes oj-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124, 193, 78, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(124, 193, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 193, 78, 0); }
}

/* インベントリ（ホットバー風9枠） */
.oj-inventory {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}

.oj-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 58px;
  padding: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--oj-text);
  background: #2b3450;
  border: 2px solid #000;
  box-shadow:
    inset -3px -3px 0 rgba(255, 255, 255, .08),
    inset 3px 3px 0 rgba(0, 0, 0, .45);
  word-break: break-all;
}

.oj-slot.is-empty {
  background: #222a42;
}

.oj-hud-chara {
  flex: 0 0 auto;
}

.oj-hud-chara img {
  display: block;
  width: 110px;
  height: auto;
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .4));
}

/************************************
** これまでの出来事（タイムライン）
************************************/

.oj-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
  border-left: 4px solid var(--oj-border);
}

.oj-timeline-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 0 0 30px 26px;
}

.oj-timeline-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: var(--oj-muted);
  border: 2px solid #000;
}

.oj-timeline-item.oj-era--season1::before { background: var(--oj-grass); }
.oj-timeline-item.oj-era--season2::before { background: var(--oj-diamond); }
.oj-timeline-item.oj-era--season3::before {
  background: var(--oj-torch);
  animation: oj-blink 2.4s step-end infinite;
}

.oj-timeline-era {
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  padding: 3px 10px;
  border: 2px solid #000;
  color: var(--oj-night);
  background: var(--oj-muted);
}

.oj-era--season1 .oj-timeline-era { background: var(--oj-grass); }
.oj-era--season2 .oj-timeline-era { background: var(--oj-diamond); }
.oj-era--season3 .oj-timeline-era { background: var(--oj-torch); }

.oj-timeline-date {
  font-family: var(--oj-font-pixel);
  font-size: 14px;
  color: var(--oj-muted);
}

.oj-timeline-body {
  flex: 1 1 100%;
  margin-top: 2px;
}

.oj-timeline-title {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: var(--oj-text);
  text-decoration: none;
  line-height: 1.6;
}

a.oj-timeline-title:hover {
  color: var(--oj-torch);
  text-decoration: underline;
}

.oj-timeline-note {
  display: block;
  font-size: 13.5px;
  color: var(--oj-muted);
  margin-top: 4px;
}

/************************************
** シーズンアーカイブ
************************************/

.oj-season-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.oj-season-card {
  background: var(--oj-panel);
  border: 3px solid #000;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.oj-season-card--s3 {
  background: linear-gradient(180deg, #2a2410 0%, var(--oj-panel) 70%);
  border-color: var(--oj-torch-dark);
}

.oj-season-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}

.oj-season-label {
  font-family: var(--oj-font-pixel);
  font-size: 26px;
  color: var(--oj-torch);
}

.oj-season-card:nth-child(1) .oj-season-label { color: var(--oj-grass); }
.oj-season-card:nth-child(2) .oj-season-label { color: var(--oj-diamond); }

.oj-season-period {
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  color: var(--oj-muted);
}

.oj-season-subtitle {
  font-family: var(--oj-font-pixel);
  font-size: 13px;
  color: var(--oj-muted);
  margin: 0 0 14px;
}

.oj-season-summary {
  font-size: 14px;
  line-height: 1.9;
  color: var(--oj-text);
  margin: 0 0 20px;
  flex: 1;
}

.oj-season-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.oj-season-links .oj-btn,
.oj-season-links .oj-soon-badge {
  font-size: 14px;
  padding: 10px 16px;
}

/************************************
** おじクラとは
************************************/

.oj-about-panel {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: var(--oj-panel);
  border: 3px solid #000;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .35);
  padding: 32px;
}

.oj-about-face {
  flex: 0 0 auto;
}

.oj-about-face img {
  display: block;
  width: 96px;
  height: 96px;
  border: 3px solid #000;
  background: var(--oj-night-2);
  padding: 8px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .3);
}

.oj-about-text {
  flex: 1;
}

.oj-about-text p {
  font-size: 15px;
  line-height: 2.1;
  color: var(--oj-text);
  margin: 0 0 1.2em;
}

.oj-about-text p:last-child {
  margin-bottom: 0;
}

.oj-about-chara {
  flex: 0 0 auto;
  align-self: flex-end;
}

.oj-about-chara img {
  display: block;
  width: 140px;
  height: auto;
  transform: rotate(8deg);
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .4));
}

/************************************
** 全幅ダーク専用ページ（おじクラとは / マイクラメモ）
************************************/

body.oj-page .main {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: 100%;
  color: var(--oj-text);
}

body.oj-page .breadcrumb {
  display: none;
}

body.oj-page .content-in,
body.oj-page #content-in {
  max-width: 1080px;
}

.oj-about-page .oj-about-panel,
.oj-memo-page .oj-section,
.oj-season3-page .oj-section,
.oj-s3-empty {
  margin-left: auto;
  margin-right: auto;
}

.oj-about-hero {
  margin-bottom: 40px;
}

.oj-season3-page .oj-hero-title {
  line-height: 1.15;
}

.oj-empty-panel {
  background: var(--oj-panel);
  border: 3px solid #000;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .35);
  padding: 28px;
}

.oj-empty-panel p {
  color: var(--oj-text);
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 18px;
}

.oj-empty-panel p:last-child {
  margin-bottom: 0;
}

.oj-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.oj-operator-panel {
  padding-top: 22px;
  padding-bottom: 22px;
}

.oj-operator-panel .oj-about-text p {
  font-size: 14px;
  line-height: 1.8;
}

.oj-operator-panel a {
  color: var(--oj-torch);
}

.oj-contact-panel {
  display: block;
}

.oj-contact-form {
  margin-top: 18px;
}

.oj-contact-form p {
  margin: 0 0 16px;
}

.oj-contact-form label {
  font-family: var(--oj-font-pixel);
  color: var(--oj-text);
}

.oj-contact-form input[type="text"],
.oj-contact-form input[type="email"],
.oj-contact-form textarea {
  width: 100%;
  margin-top: 6px;
  background: #fdfcf8;
  border: 3px solid #000;
  border-radius: 0;
  color: #2b2b2b;
}

.oj-contact-form textarea {
  min-height: 180px;
}

.oj-memo-lead {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--oj-muted);
  margin: -14px 0 22px;
}

/************************************
** スクロール演出（JSが有効な時だけ）
************************************/

.oj-js .oj-section {
  opacity: 1;
  transform: translateY(24px);
  transition: transform .6s ease;
}

.oj-js .oj-section.is-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .oj-js .oj-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .oj-hero-chara img,
  .oj-soon-badge,
  .oj-timeline-item.oj-era--season3::before,
  .oj-cloud,
  .oj-cloud--2,
  .oj-shooting-star,
  .oj-walker,
  .oj-heart,
  .oj-hero-chara::after,
  .oj-live-dot {
    animation: none;
  }
  .oj-walker {
    display: none;
  }
}

/************************************
** 記事・一覧ページのゲーム化
** Cocoonの白枠・古いアイコンを脱ぎ、トップ/aboutの世界観へ寄せる
************************************/

/* PR表記（小・大）は世界観に合わないため全面非表示
   ※本文側はcontent.phpでも除去済み。これはbody-topのページ用PRバッジ向け */
.pr-label {
  display: none !important;
}

/* 古いCocoonアイコン（見出し横・日付の時計など）を消す */
.archive-title .fa,
.a-title .fa,
.date-tags .fa,
.post-date .fa,
.post-update .fa,
.read-time .fa,
.entry-card-meta .fa,
.e-card-meta .fa,
.card-meta .fa,
.related-entry-heading .fa,
.cat-label .fa,
.entry-categories .fa,
.entry-categories-tags .fa,
.cat-link .fa,
.tag-link .fa,
.footer-meta .fa,
.author-name .fa,
.comment-area .fa-comments,
.comment-area .fa-comment {
  display: none !important;
}

/* 白枠（.main）と古いサイドバー枠を撤去して夜の世界に乗せる */
body.single .main,
body.archive .main,
body.search .main,
body.error404 .main,
body.page:not(.oj-page) .main {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  color: var(--oj-text);
}

body:not(.home):not(.oj-page) .sidebar {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* --- 記事ヘッダ：タイトル・日付は枠の外＝夜空の上に --- */
.single .article-header,
.page:not(.oj-page) .article-header {
  margin-bottom: 22px;
}

.single .entry-title,
.page:not(.oj-page) .entry-title {
  font-family: var(--oj-font-pixel);
  font-weight: 400;
  font-size: clamp(23px, 3.2vw, 34px);
  line-height: 1.5;
  color: var(--oj-text);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
  border: none;
  padding: 0;
  margin: 0 0 16px;
}

.single .date-tags,
.page:not(.oj-page) .date-tags {
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  color: var(--oj-muted);
}

.single .date-tags a,
.page:not(.oj-page) .date-tags a {
  color: var(--oj-muted);
}

.read-time {
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  color: var(--oj-muted);
}

/* プロモーション表記（おじクラ専用デザイン・松明アクセント） */
.oj-pr {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--oj-font-pixel);
  font-size: 12px;
  line-height: 1.5;
  color: var(--oj-muted);
  background: var(--oj-night-2);
  border-left: 6px solid var(--oj-torch);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
  padding: 9px 14px;
  margin: 16px 0 0;
}

.oj-pr__tag {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--oj-night);
  background: var(--oj-torch);
  border: 2px solid #000;
  box-shadow: inset -2px -2px 0 var(--oj-torch-dark);
  padding: 1px 9px;
}

/* アイキャッチをブロックの額装に */
.single .eye-catch-wrap .eye-catch,
.single .eye-catch-wrap img {
  border: 3px solid #000;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .3);
  border-radius: 0;
}

/* --- 本文は明るい“読書ブロック” --- */
.single .entry-content,
.page:not(.oj-page) .entry-content {
  background: #fdfcf8;
  color: #2b2b2b;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .3);
  padding: 30px 32px;
  border-radius: 0;
}

/* カテゴリ・タグのチップ */
.cat-label {
  font-family: var(--oj-font-pixel);
  background: var(--oj-torch);
  color: var(--oj-night);
  border: 2px solid #000;
  border-radius: 0;
  font-size: 11px;
  padding: 3px 10px;
}

.entry-categories-tags a,
.entry-tags a {
  font-family: var(--oj-font-pixel);
  background: var(--oj-panel-2);
  color: var(--oj-text);
  border: 2px solid #000;
  border-radius: 0;
  font-size: 12px;
}

/* --- アーカイブ見出し：oj-h2と同じ調子 --- */
.archive-title,
.a-title,
.page-title {
  font-family: var(--oj-font-pixel);
  font-weight: 400;
  font-size: 26px;
  color: var(--oj-text);
  border: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.archive-title::before,
.a-title::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: var(--oj-grass);
  box-shadow:
    inset -4px -4px 0 var(--oj-grass-dark),
    inset 4px 4px 0 rgba(255, 255, 255, .35);
}

/* --- 一覧カード：oj-card風のダークパネル --- */
.archive .entry-card-wrap,
.search .entry-card-wrap,
.archive .related-entry-card-wrap {
  background: var(--oj-panel);
  border: 3px solid #000;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
  border-radius: 0;
  margin-bottom: 22px;
  overflow: hidden;
}

.archive .entry-card-wrap:hover,
.search .entry-card-wrap:hover {
  background: var(--oj-panel-2);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .35);
}

.archive .entry-card,
.search .entry-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.archive .entry-card-title,
.search .entry-card-title,
.archive .e-card-title,
.archive .entry-card-snippet ~ * .e-card-title {
  color: var(--oj-text);
}

.archive .entry-card-snippet,
.search .entry-card-snippet {
  color: var(--oj-muted);
}

.archive .entry-card-meta,
.search .entry-card-meta {
  font-family: var(--oj-font-pixel);
  color: var(--oj-torch);
  font-size: 12px;
}

.archive .entry-card-thumb img,
.search .entry-card-thumb img {
  border-radius: 0;
}

/* ページネーション */
.pagination .page-numbers {
  font-family: var(--oj-font-pixel);
  background: var(--oj-panel);
  color: var(--oj-text);
  border: 2px solid #000;
  border-radius: 0;
}

.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
  background: var(--oj-torch);
  color: var(--oj-night);
}

/* --- 関連記事・コメント見出し --- */
.related-entry-heading,
.comment-title,
.comment-reply-title,
.sns-share-message,
.sns-follow-message {
  font-family: var(--oj-font-pixel);
  font-weight: 400;
  color: var(--oj-text);
  border-color: var(--oj-torch);
}

.related-entries {
  border-top: 3px dashed var(--oj-border);
  padding-top: 22px;
}

.related-entry-card-wrap {
  background: var(--oj-panel);
  border: 3px solid #000;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .3);
  border-radius: 0;
  overflow: hidden;
}

.related-entry-card-wrap:hover {
  background: var(--oj-panel-2);
}

.related-entry-card-title {
  color: var(--oj-text);
}

.related-entry-card-snippet {
  color: var(--oj-muted);
}

.related-entry-card-thumb img {
  border-radius: 0;
}

/* --- SNSシェア／フォロー：ブロックボタン化 --- */
.sns-share-buttons .sns-button,
.sns-follow-buttons .sns-button {
  border: 2px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .3);
}

.sns-share-buttons .sns-button:hover,
.sns-follow-buttons .sns-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .3);
}

/* --- 前後記事ページャー --- */
.pager-post-navi .prev-post,
.pager-post-navi .next-post {
  background: var(--oj-panel);
  border: 3px solid #000;
  border-radius: 0;
}

.pager-post-navi .post-navi-title,
.pager-post-navi a {
  color: var(--oj-text);
}

.pager-post-navi .iconfont::before {
  color: var(--oj-torch);
}

/* --- コメント --- */
.comment-area {
  color: var(--oj-text);
}

.comment-body,
.comment-box {
  background: var(--oj-panel);
  border: 2px solid #000;
  border-radius: 0;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  background: #fdfcf8;
  border: 2px solid #000;
  border-radius: 0;
  color: #2b2b2b;
}

.comment-btn,
.comment-area .btn,
.comment-form .form-submit input,
.entry-content input[type="submit"],
.entry-content button[type="submit"],
.wpcf7 input[type="submit"] {
  font-family: var(--oj-font-pixel);
  background: var(--oj-torch);
  color: var(--oj-night);
  border: 2px solid #000;
  border-radius: 0;
  box-shadow:
    inset -3px -3px 0 var(--oj-torch-dark),
    inset 3px 3px 0 rgba(255, 255, 255, .4);
  cursor: pointer;
}

/* --- サイドバーのウィジェットをダークパネルに --- */
.sidebar .widget {
  background: var(--oj-panel);
  border: 3px solid #000;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .3);
  border-radius: 0;
  padding: 18px;
  margin-bottom: 26px;
}

.sidebar .widget h3,
.sidebar h3 {
  font-family: var(--oj-font-pixel);
  font-weight: 400;
  background: var(--oj-night-2);
  color: var(--oj-text);
  border-radius: 0;
  border: none;
}

.sidebar .card-title,
.sidebar .widget-entry-card-title,
.sidebar a {
  color: var(--oj-text);
}

.sidebar .card-thumb img {
  border-radius: 0;
}

.sidebar input[type="text"],
.sidebar input[type="search"],
.sidebar .search-edit {
  background: #fdfcf8;
  border: 2px solid #000;
  border-radius: 0;
  color: #2b2b2b;
}

/* schema用のpublisherブロックは隠す（古いロゴが出ることがある） */
.article-footer .publisher {
  display: none;
}

/************************************
** 既存記事用（ショーケースボックス）
************************************/

.video-container {
  margin: 0 auto;
}

.showcase-box {
  padding: 25px;
  margin-bottom: 20px;
  border: double #ccc;
  overflow: hidden;
  font-size: small;
  position: relative
}

.showcase-box .showcase-triangle {
  width: 0;
  height: 0;
  border-width: 80px 80px 0 0;
  border-style: solid;
  border-color: #000 transparent transparent;
  left: 0;
  top: 0;
  position: absolute;
  opacity: .6;
  z-index: 99
}

.showcase-box .showcase-triangle-text {
  -webkit-text-size-adjust: 100%;
  font-size: 10px;
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  -ms-transform: scale(.5);
  -o-transform: scale(.5);
  transform: scale(.5);
  left: 7px;
  top: 12px;
  line-height: 1.4;
  position: absolute;
  z-index: 999;
  color: #fff;
  transform: rotate(-45deg)
}

.showcase-image {
  margin: 0 15px 0 0;
  float: left;
  max-width: 160px;
  text-align: center
}

.showcase-image img {
  width: 90%;
  margin: 0 auto;
  text-align: center
}

.showcase-info {
  margin: 0;
  overflow: hidden
}

.showcase-name {
  font-size: 130%;
  margin-bottom: 24px;
  line-height: 1.5em
}

.showcase-link div {
  width: calc((100% - 4%)/3);
  float: left;
  margin: 0 2% 0 0
}

.showcase-link div:last-child {
  margin: 0
}

.showcase-link a {
  width: calc(100% - 10px);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
  padding: 15px 1px;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  color: #fff !important;
  border: dashed 1px #fff;
  box-sizing: border-box
}

.showcase-link a:hover {
  opacity: .6
}

.showcase-link a:active {
  position: relative;
  top: 1px
}

.showcase-amazon a {
  background-color: #ff9901 !important;
  box-shadow: 0px 0px 0px 5px #ff9901
}

.showcase-amazon+p {
  display: none
}

.showcase-rakuten a {
  background-color: #c20004 !important;
  box-shadow: 0px 0px 0px 5px #c20004
}

.showcase-rakuten+p {
  display: none
}

.showcase-yahoo a {
  background-color: #ff0027 !important;
  box-shadow: 0px 0px 0px 5px #ff0027
}

@media screen and (max-width: 680px) {
  .showcase-box {
      padding:12px
  }

  .showcase-image {
      margin: 0 auto 10px;
      float: none;
      min-width: auto;
      text-align: center;
      max-width: 100%
  }

  .showcase-image img {
      width: auto
  }

  .showcase-name {
      font-size: 120%;
      margin-top: 10px
  }
}

/************************************
** レスポンシブ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .oj-card-grid,
  .oj-season-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .oj-hud-chara {
    display: none;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .oj-hero {
    padding-top: 40px;
  }

  .oj-hero-inner {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    padding-bottom: 32px;
  }

  .oj-hero-cta {
    justify-content: center;
  }

  .oj-hero-chara img {
    width: 170px;
  }

  .oj-hud-list {
    grid-template-columns: 1fr;
  }

  .oj-about-panel {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .oj-about-chara {
    align-self: center;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .oj-section {
    margin: 52px 0;
  }

  .oj-h2 {
    font-size: 22px;
  }

  .oj-hero-title {
    font-size: 42px;
  }

  .oj-hero-lead {
    font-size: 15px;
  }

  .oj-pc {
    display: none;
  }

  .oj-btn,
  .oj-soon-badge {
    font-size: 14px;
    padding: 11px 16px;
  }

  .oj-card-grid,
  .oj-season-grid {
    grid-template-columns: 1fr;
  }

  .oj-hud-panel {
    padding: 18px;
  }

  .oj-inventory {
    grid-template-columns: repeat(3, 1fr);
  }

  .oj-slot.is-empty {
    display: none;
  }

  .oj-logo-name {
    font-size: 22px;
  }

  .oj-logo-face {
    width: 36px;
    height: 36px;
  }
}