@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:    1.1.4
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/*
 * ============================================================
 *  転職・副業ジャンル WordPressサイト カスタムCSS v2
 *  (2026-04-26 改訂: 目次CSSをすべて削除しCocoon標準目次に戻す)
 *  テーマ: Cocoon（子テーマ）
 *  デザインパターン: C（モダン・動きのあるデザイン）
 *  配色: Navy (#1a3a52) × White (#ffffff) × Orange (#ff7a45)
 *  カテゴリ色: 転職=#2e6fb8 / 副業=#ff7a45 / キャリア=#7c3aed
 * ============================================================
 */
/* ============================================================
   Google Fonts 読み込み（Noto Sans JP：ウェイト900追加）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
/* ============================================================
   CSS カスタムプロパティ（変数）
   ============================================================ */
:root {
  /* メインカラー */
  --navy: #1a3a52;
  --navy-deep: #0a1e30;
  --navy-light: #24506e;
  --navy-dark: #122a3c;
  --navy-bg: rgba(26, 58, 82, 0.05);
  /* ベースカラー */
  --white: #ffffff;
  --off-white: #f8f9fb;
  --light-gray: #f0f2f5;
  --mid-gray: #e2e6ea;
  --text-gray: #6c757d;
  /* アクセントカラー */
  --orange: #ff7a45;
  --orange-hover: #e86830;
  --orange-light: rgba(255, 122, 69, 0.1);
  /* テキスト */
  --text-main: #1b2530;
  --text-sub: #5a6b7a;
  /* フォント */
  --font-main: 'Noto Sans JP', "游ゴシック体", "Yu Gothic", YuGothic,
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  /* カテゴリカラー */
  --c-tenshoku: #2e6fb8;
  --c-tenshoku-dark: #1a4a80;
  --c-fukugyo: #ff7a45;
  --c-fukugyo-dark: #d65a2a;
  --c-career: #7c3aed;
  --c-career-dark: #5a42a0;
  /* サイズ */
  --content-width: 1180px;
  --radius: 6px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  /* 影 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(26, 58, 82, 0.06);
  --shadow-lg: 0 8px 30px rgba(26, 58, 82, 0.12);
  --shadow-hover: 0 30px 60px rgba(26, 58, 82, 0.15);
}
/* ============================================================
   1. 全体（リセット・ベース）
   ============================================================ */
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--off-white);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.wrap {
  max-width: var(--content-width);
}
::selection {
  background: var(--orange);
  color: var(--white);
}
::-moz-selection {
  background: var(--orange);
  color: var(--white);
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--light-gray);
}
::-webkit-scrollbar-thumb {
  background: var(--navy-light);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--navy);
}
/* ============================================================
   2. ヘッダー
   ============================================================ */
.header {
  background-color: var(--navy);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.header.scrolled {
  background-color: var(--navy-deep);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.header-in {
  max-width: var(--content-width);
  margin: 0 auto;
}
.logo,
.logo a,
.logo-text,
.logo-header a,
.site-name-text,
.header .logo-text,
.header .site-name-text {
  color: var(--white) !important;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}
.tagline {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
}
.logo-header img {
  max-height: 60px;
}
.navi {
  background-color: var(--navy-dark);
}
.navi-in {
  max-width: var(--content-width);
  margin: 0 auto;
}
.navi-in > ul > li > a {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 14px 20px;
  position: relative;
  transition: color 0.3s ease;
}
.navi-in > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--orange);
  transition: width 0.3s ease;
}
.navi-in > ul > li > a:hover {
  color: var(--orange);
}
.navi-in > ul > li > a:hover::after {
  width: 100%;
}
.navi-in ul ul {
  background-color: var(--white);
  border-top: 3px solid var(--orange);
  box-shadow: var(--shadow-md);
}
.navi-in ul ul li a {
  color: var(--text-main);
  font-size: 0.85rem;
  padding: 10px 18px;
  border-bottom: 1px solid var(--light-gray);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.navi-in ul ul li a:hover {
  background-color: var(--navy-bg);
  color: var(--navy);
}
/* ============================================================
   3. アピールエリア（ヒーローセクション）
   ============================================================ */
.appeal {
  min-height: 85vh;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 122, 69, 0.35), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(46, 111, 184, 0.4), transparent 50%),
    linear-gradient(135deg, var(--navy-deep), var(--navy));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
}
.appeal-in {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 80px 20px 80px;
  position: relative;
  z-index: 1;
}
.appeal,
.appeal p,
.appeal h2,
.appeal h3 {
  color: var(--white);
}
.appeal .appeal-title,
.appeal-content .appeal-title {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: 0.4em;
  background: linear-gradient(135deg, #ffffff 0%, #ffd4c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.appeal .appeal-message,
.appeal-content .appeal-message {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}
.appeal-content .appeal-button {
  background-color: var(--orange);
  color: var(--white);
  border-radius: 50px;
  padding: 16px 40px;
  font-weight: 700;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(255, 122, 69, 0.4);
  display: inline-block;
}
.appeal-content .appeal-button:hover {
  background-color: var(--orange-hover);
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255, 122, 69, 0.55);
}
.appeal::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  top: 10%;
  left: 5%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 122, 69, 0.3), transparent);
  filter: blur(2px);
  animation: cs-float 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.appeal::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  bottom: 5%;
  right: 3%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), transparent);
  filter: blur(2px);
  animation: cs-float 8s ease-in-out infinite;
  animation-delay: -3s;
  pointer-events: none;
  z-index: 0;
}
@keyframes cs-float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(20px, -30px) rotate(15deg);
  }
}
.appeal .hero-label {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 8px 22px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  margin-bottom: 28px;
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  background-clip: unset;
  -webkit-background-clip: unset;
}
.appeal .scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  letter-spacing: 0.3em;
  animation: cs-bounce 2s infinite;
  z-index: 1;
}
.appeal .scroll-indicator::after {
  content: "";
  display: block;
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.5);
  margin: 10px auto 0;
}
@keyframes cs-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
/* ============================================================
   4. セクションフェードイン
   ============================================================ */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* ============================================================
   5. 見出し（h2, h3, h4）
   ============================================================ */
.article h2,
.entry-content h2 {
  background-color: var(--navy);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  padding: 16px 20px 16px 24px;
  margin: 2.5em 0 1.2em;
  border: none;
  border-left: 5px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.5;
  position: relative;
}
.article h3,
.entry-content h3 {
  background-color: var(--light-gray);
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 14px 18px;
  margin: 2em 0 1em;
  border: none;
  border-left: 4px solid var(--navy);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.5;
}
.article h4,
.entry-content h4 {
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 8px 0;
  margin: 1.8em 0 0.8em;
  border: none;
  border-bottom: 2px solid var(--navy);
  background: transparent;
  line-height: 1.5;
}
.article h5,
.entry-content h5 {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  margin: 1.5em 0 0.6em;
}
.article h6,
.entry-content h6 {
  color: var(--text-sub);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1.3em 0 0.5em;
}
/* ============================================================
   6. 記事本文
   ============================================================ */
.article {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px 40px;
}
.entry-content p {
  margin-bottom: 1.6em;
  line-height: 1.9;
}
.entry-content a {
  color: var(--navy-light);
  text-decoration: underline;
  text-decoration-color: rgba(26, 58, 82, 0.3);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.entry-content a:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}
/* リスト (ul) */
.entry-content ul {
  padding-left: 0;
  margin: 1.5em 0;
  list-style: none;
}
.entry-content ul > li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.6em;
  line-height: 1.8;
}
.entry-content ul > li::before {
  content: '';
  position: absolute;
  top: 0.7em;
  left: 0.3em;
  width: 8px;
  height: 8px;
  background-color: var(--orange);
  border-radius: 50%;
}
/* リスト (ol) */
.entry-content ol {
  padding-left: 1.5em;
  margin: 1.5em 0;
  counter-reset: ol-counter;
  list-style: none;
}
.entry-content ol > li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.6em;
  line-height: 1.8;
  counter-increment: ol-counter;
}
.entry-content ol > li::before {
  content: counter(ol-counter);
  position: absolute;
  left: -0.5em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6em;
  height: 1.6em;
  background-color: var(--navy);
  color: var(--white);
  font-size: 0.75em;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* 引用 */
.entry-content blockquote {
  background-color: var(--off-white);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 1.5em 0;
  color: var(--text-sub);
  font-style: normal;
  position: relative;
}
.entry-content blockquote::before {
  content: '\201C';
  font-size: 3rem;
  color: var(--orange);
  opacity: 0.25;
  position: absolute;
  top: -5px;
  left: 10px;
  font-family: Georgia, serif;
}
.entry-content blockquote p {
  margin-bottom: 0.8em;
}
.entry-content blockquote cite {
  display: block;
  text-align: right;
  font-size: 0.85em;
  color: var(--text-gray);
  margin-top: 0.5em;
}
/* テーブル */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.entry-content table thead th {
  background-color: var(--navy);
  color: var(--white);
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.9em;
}
.entry-content table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--mid-gray);
  vertical-align: top;
}
.entry-content table tbody tr:nth-child(even) {
  background-color: var(--light-gray);
}
.entry-content table tbody tr:hover {
  background-color: var(--orange-light);
  transition: background-color 0.2s ease;
}
.entry-content img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
/* ============================================================
   7. ボタン・CTA
   ============================================================ */
.btn,
.btn-wrap a {
  background-color: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(255, 122, 69, 0.4);
  cursor: pointer;
}
.btn:hover,
.btn-wrap a:hover {
  background-color: var(--orange-hover);
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255, 122, 69, 0.55);
  color: var(--white);
}
.btn:active,
.btn-wrap a:active {
  transform: translateY(0);
}
.cs-cta-section {
  background: linear-gradient(135deg, var(--orange) 0%, #ff9468 100%);
  color: var(--white);
  text-align: center;
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
}
.cs-cta-section::before,
.cs-cta-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.cs-cta-section::before {
  width: 400px;
  height: 400px;
  top: -200px;
  left: -100px;
}
.cs-cta-section::after {
  width: 300px;
  height: 300px;
  bottom: -150px;
  right: -80px;
}
.cs-cta-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  margin-bottom: 0.5em;
  letter-spacing: 0.02em;
  color: var(--white);
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  padding: 0;
}
.cs-cta-section p {
  font-size: 1.05rem;
  opacity: 0.92;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.cs-cta-section .btn,
.cs-cta-section .btn-wrap a {
  background: var(--white);
  color: var(--orange);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}
.cs-cta-section .btn:hover,
.cs-cta-section .btn-wrap a:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  color: var(--orange);
}
.cta-box,
.entry-content .cta-box {
  background: linear-gradient(135deg, rgba(26, 58, 82, 0.06) 0%, rgba(26, 58, 82, 0.02) 100%);
  border: 2px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: 30px;
  margin: 2em 0;
  text-align: center;
}
.cta-box .cta-heading {
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.8em;
}
.cta-box .cta-description {
  color: var(--text-sub);
  margin-bottom: 1.2em;
}
.cta-box .btn,
.cta-box .btn-wrap a {
  font-size: 1.1rem;
  padding: 16px 44px;
}
/* ============================================================
   8. カード型記事一覧
   ============================================================ */
.entry-card-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--white);
  border: none;
  position: relative;
}
.entry-card-wrap:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}
.entry-card-thumb {
  overflow: hidden;
}
.entry-card-thumb img {
  transition: transform 0.6s ease;
}
.entry-card-wrap:hover .entry-card-thumb img {
  transform: scale(1.08);
}
.entry-card-title {
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
  transition: color 0.3s ease;
}
.entry-card-wrap:hover .entry-card-title {
  color: var(--orange);
}
.entry-card-snippet {
  color: var(--text-sub);
  font-size: 0.85rem;
}
.entry-card-meta {
  color: var(--text-gray);
  font-size: 0.8rem;
}
.cat-label {
  background-color: var(--orange);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.1em;
}
.cat-label.cat-tenshoku,
.cat-label[class*="転職"] {
  background-color: var(--c-tenshoku);
  color: var(--white);
}
.cat-label.cat-fukugyo,
.cat-label[class*="副業"] {
  background-color: var(--c-fukugyo);
  color: var(--white);
}
.cat-label.cat-career,
.cat-label[class*="キャリア"] {
  background-color: var(--c-career);
  color: var(--white);
}
/* ============================================================
   9. カテゴリタイル
   ============================================================ */
.cs-cat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cs-cat-tile {
  padding: 48px 32px;
  border-radius: var(--radius-xl);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.cs-cat-tile:hover {
  transform: translateY(-8px);
}
.cs-cat-tile::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.cs-cat-tile.cs-tenshoku {
  background: linear-gradient(135deg, var(--c-tenshoku), var(--c-tenshoku-dark));
}
.cs-cat-tile.cs-fukugyo {
  background: linear-gradient(135deg, var(--c-fukugyo), var(--c-fukugyo-dark));
}
.cs-cat-tile.cs-career {
  background: linear-gradient(135deg, var(--c-career), var(--c-career-dark));
}
.cs-cat-tile .cs-cat-num {
  font-size: 12px;
  letter-spacing: 0.3em;
  opacity: 0.7;
  margin-bottom: 10px;
}
.cs-cat-tile .cs-cat-ttl {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 8px;
}
.cs-cat-tile .cs-cat-sub {
  font-size: 0.85rem;
  opacity: 0.85;
  line-height: 1.7;
  margin-bottom: 20px;
}
.cs-cat-tile .cs-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 3px;
  transition: gap 0.3s ease;
  color: var(--white);
}
.cs-cat-tile:hover .cs-cat-link {
  gap: 14px;
}
/* ============================================================
   10. ストリップCTAバー
   ============================================================ */
.cs-strip {
  background: var(--navy);
  color: var(--white);
  padding: 60px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  text-align: center;
}
.cs-strip h3 {
  font-size: 1.4rem;
  font-weight: 700;
}
.cs-strip a {
  background: var(--orange);
  color: var(--white);
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.3s ease;
  display: inline-block;
}
.cs-strip a:hover {
  transform: translateY(-3px);
  color: var(--white);
}
/* ============================================================
   11. セクションヘッダー
   ============================================================ */
.cs-section-head {
  text-align: center;
  margin-bottom: 60px;
}
.cs-section-head .cs-eyebrow {
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 14px;
  display: block;
}
.cs-section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  background: none;
  color: var(--text-main);
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.cs-section-head h2 span {
  color: var(--orange);
}
/* ============================================================
   12. 目次 (TOC) ── すべて削除（Cocoon標準デザインに戻す）
   ============================================================ */
/* 削除済み。Cocoonテーマ標準の目次デザインを使用します。 */
/* ============================================================
   13. ブログカード
   ============================================================ */
.blogcard {
  border: 1px solid var(--mid-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.blogcard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.blogcard-title {
  color: var(--navy);
  font-weight: 700;
}
.blogcard-snippet {
  color: var(--text-sub);
  font-size: 0.85em;
}
/* ============================================================
   14. ランキング
   ============================================================ */
.ranking-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin-bottom: 1.5em;
  border: 1px solid var(--mid-gray);
  transition: box-shadow 0.3s ease;
}
.ranking-item:hover {
  box-shadow: var(--shadow-md);
}
.ranking-item-name {
  color: var(--navy);
  font-weight: 700;
  font-size: 1.15rem;
}
.ranking-item-link-buttons a {
  background-color: var(--orange);
  color: var(--white);
  border-radius: 50px;
  padding: 10px 28px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 3px 8px rgba(255, 122, 69, 0.3);
}
.ranking-item-link-buttons a:hover {
  background-color: var(--orange-hover);
  transform: translateY(-2px);
}
/* ============================================================
   15. タブコンテンツ
   ============================================================ */
.tab-content {
  border-radius: var(--radius);
}
.tab-content .tab-label {
  background-color: var(--light-gray);
  color: var(--text-sub);
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tab-content .tab-label:hover,
.tab-content .tab-label.is-active {
  background-color: var(--navy);
  color: var(--white);
}
.tab-content .tab-body {
  border: 1px solid var(--mid-gray);
  border-top: 3px solid var(--navy);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 20px;
  background-color: var(--white);
}
/* ============================================================
   16. サイドバー
   ============================================================ */
.sidebar {
  background: transparent;
}
.sidebar .widget-title,
.sidebar .widget_title {
  background-color: var(--navy);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--radius) var(--radius) 0 0;
  border: none;
  position: relative;
}
.sidebar .widget-title::after,
.sidebar .widget_title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--orange);
}
.sidebar aside {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5em;
  overflow: hidden;
  border: 1px solid var(--mid-gray);
}
.sidebar .widget_categories ul li a,
.sidebar .widget_archive ul li a {
  display: block;
  padding: 10px 16px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--light-gray);
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.sidebar .widget_categories ul li a:hover,
.sidebar .widget_archive ul li a:hover {
  background-color: var(--navy-bg);
  color: var(--navy);
  padding-left: 22px;
}
.sidebar .popular-entry-card {
  border-bottom: 1px solid var(--light-gray);
  transition: background-color 0.2s ease;
}
.sidebar .popular-entry-card:hover {
  background-color: var(--navy-bg);
}
.sidebar .popular-entry-card-title {
  color: var(--navy);
  font-weight: 500;
  font-size: 0.88rem;
}
/* ============================================================
   17. フッター
   ============================================================ */
.footer {
  background-color: var(--navy-deep);
  color: rgba(255, 255, 255, 0.85);
}
.footer-in {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 20px 30px;
}
.footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer a:hover {
  color: var(--orange);
}
.footer .copyright {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom-menu {
  text-align: center;
  margin-bottom: 10px;
}
.footer-bottom-menu li a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  padding: 0 12px;
}
.footer-bottom-menu li a:hover {
  color: var(--orange);
}
/* ============================================================
   18. ページネーション
   ============================================================ */
.pagination a,
.pagination span {
  border-radius: var(--radius);
  font-weight: 500;
}
.pagination .current {
  background-color: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.pagination a:hover {
  background-color: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
/* ============================================================
   19. パンくずリスト
   ============================================================ */
.breadcrumb {
  font-size: 0.8rem;
  color: var(--text-gray);
  padding: 12px 0;
}
.breadcrumb a {
  color: var(--navy-light);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--orange);
}
/* ============================================================
   20. SNSシェアボタン
   ============================================================ */
.sns-share-buttons a,
.sns-follow-buttons a {
  border-radius: var(--radius);
  font-weight: 500;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sns-share-buttons a:hover,
.sns-follow-buttons a:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
/* ============================================================
   21. アニメーション
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}
/* ============================================================
   22. レスポンシブ対応（タブレット: 〜1024px）
   ============================================================ */
@media screen and (max-width: 1024px) {
  .article {
    padding: 24px 28px;
  }
  .cs-cat-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ============================================================
   23. レスポンシブ対応（スマホ: 〜768px）
   ============================================================ */
@media screen and (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.8;
  }
  .appeal {
    min-height: 70vh;
  }
  .appeal .appeal-title,
  .appeal-content .appeal-title {
    font-size: 1.8rem;
  }
  .cs-cat-tiles {
    grid-template-columns: 1fr;
  }
  .cs-strip {
    flex-direction: column;
    gap: 20px;
  }
  .logo-text,
  .site-name-text {
    font-size: 1.2rem;
  }
  .article {
    padding: 20px 16px;
    border-radius: var(--radius);
  }
  .article h2,
  .entry-content h2 {
    font-size: 1.2rem;
    padding: 14px 16px 14px 20px;
    margin: 2em 0 1em;
  }
  .article h3,
  .entry-content h3 {
    font-size: 1.05rem;
    padding: 12px 14px;
  }
  .article h4,
  .entry-content h4 {
    font-size: 1rem;
  }
  .entry-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .btn,
  .btn-wrap a {
    padding: 12px 28px;
    font-size: 0.95rem;
    width: 100%;
    box-sizing: border-box;
  }
  .cta-box,
  .entry-content .cta-box {
    padding: 20px 16px;
  }
  .cs-cta-section {
    padding: 60px 20px;
  }
  .appeal-in {
    padding: 60px 16px;
  }
  .footer-in {
    padding: 30px 16px 24px;
  }
  .mobile-menu-buttons {
    background-color: var(--navy);
  }
  .mobile-menu-buttons .menu-button {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .mobile-menu-buttons .menu-button:hover {
    color: var(--orange);
  }
  .menu-drawer {
    background-color: var(--navy-dark);
  }
  .menu-drawer a {
    color: var(--white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
  }
  .menu-drawer a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--orange);
  }
}
/* ============================================================
   24. レスポンシブ対応（小型スマホ: 〜480px）
   ============================================================ */
@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .article h2,
  .entry-content h2 {
    font-size: 1.1rem;
    padding: 12px 14px 12px 18px;
  }
  .article h3,
  .entry-content h3 {
    font-size: 1rem;
  }
  .ranking-item {
    padding: 16px;
  }
  .cs-cat-tile {
    padding: 32px 24px;
  }
}
/* ============================================================
   25. 印刷用スタイル
   ============================================================ */
@media print {
  .header,
  .navi,
  .sidebar,
  .footer,
  .sns-share-buttons,
  .sns-follow-buttons,
  .appeal,
  .toc,
  .btn-wrap,
  .cs-cta-section,
  .cs-strip {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  .article {
    box-shadow: none;
    padding: 0;
  }
  .article h2,
  .entry-content h2 {
    background: none;
    color: #000;
    border-left: 4px solid #000;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
}
/* ============================================================
   End of Custom CSS v2
   ============================================================ */
/* ============================================================
   Cocoonヘッダー固定機能 修正パッチ
   ============================================================ */
body.is-header-fixed .header-container {
  background-color: var(--navy);
  box-shadow: var(--shadow-md);
  transition: background-color 0.3s ease;
}
body.is-header-fixed .header-container.fixed-header .header {
  width: 100%;
  max-width: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
body.is-header-fixed .header-container.fixed-header .header-in {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
}
body.is-header-fixed .header-container.fixed-header:has(.header.scrolled) {
  background-color: var(--navy-deep);
}
/* ============================================================
   強調表現 太字+赤
   ============================================================ */
.strong-red { font-weight: 700; color: #d23030; }
.entry-content a .strong-red, .entry-content .strong-red a { color: inherit; }
/* ============================================================
   装飾CSSパッチ（タイムライン緑ドット + 装飾box内オレンジ点非表示）
   ※ 目次関連の上書きは削除済み。Cocoon標準の目次デザインに戻る。
   ============================================================ */
/* (A) タイムライン: メインCSSのオレンジ点だけ消す（Cocoon標準を尊重） */
.entry-content ul.timeline > li::before,
.entry-content ul.timeline > li.timeline-item::before,
.entry-content ul.timeline > li.wp-block-cocoon-blocks-timeline-item::before,
.entry-content .timeline-box ul > li::before {
  display: none !important;
  content: none !important;
}
.entry-content ul.timeline,
.entry-content ul.timeline > li,
.entry-content ul.timeline > li.timeline-item,
.entry-content ul.timeline > li.wp-block-cocoon-blocks-timeline-item {
  padding-left: revert !important;
  list-style: revert !important;
}
/* (B) 他のCocoon装飾box内: カスタムオレンジ点を非表示 */
.entry-content .iconlist-box li::before,
.entry-content .iconlist-box ul li::before,
.entry-content .wp-block-cocoon-blocks-iconlist-box li::before,
.entry-content .speech-balloon li::before,
.entry-content .speech-wrap li::before,
.entry-content .blank-box li::before,
.entry-content .faq-wrap li::before,
.entry-content .faq li::before,
.entry-content .wp-block-cocoon-blocks-faq li::before,
.entry-content .caption-box li::before,
.entry-content .tab-caption-box li::before,
.entry-content .wp-block-cocoon-blocks-caption-box-1 li::before,
.entry-content .wp-block-cocoon-blocks-tab-caption-box-1 li::before,
.entry-content .label-box li::before,
.entry-content .comment-box li::before,
.entry-content .notice-box li::before,
.entry-content .sticky-box li::before,
.entry-content [class*="is-style-"] li::before {
  display: none !important;
  content: none !important;
}
/* (C) 装飾box内のolカスタムマーカーは非表示 */
.entry-content .timeline-box ol > li::before,
.entry-content .iconlist-box ol > li::before,
.entry-content .speech-balloon ol > li::before,
.entry-content .blank-box ol > li::before,
.entry-content .faq ol > li::before,
.entry-content .wp-block-cocoon-blocks-faq ol > li::before,
.entry-content .caption-box ol > li::before,
.entry-content .tab-caption-box ol > li::before,
.entry-content .wp-block-cocoon-blocks-caption-box-1 ol > li::before,
.entry-content .wp-block-cocoon-blocks-tab-caption-box-1 ol > li::before,
.entry-content .label-box ol > li::before,
.entry-content [class*="is-style-"] ol > li::before {
  display: none !important;
  content: none !important;
}

/* ============================================================
   トップページ修正CSSパッチ v2.0
   作成日: 2026-04-26

   症状:
   - body class に column1 column1-wide no-sidebar no-page-title まで付いてるのに：
     1) ページタイトル「キャリアシフトNavi｜...」がまだ表示される
     2) アピールエリアがコンテンツ幅に縛られて縦長に潰れる

   原因:
   - Cocoonテーマの「ページタイトル非表示」はbodyクラス付与だけで、
     CSSで `.entry-title{display:none}` の指示は別途必要
   - .appeal は通常のheroだが、コンテンツ幅(article内)にあるので幅が出ない

   修正:
   1. .no-page-title クラスで entry-title 等を非表示
   2. .column1-wide の article 内の .appeal をフルブリード化

   反映方法:
   外観 → カスタマイズ → 追加CSS、または
   既存の追加CSSの末尾に追記してください。
   ============================================================ */

/* (1) ページタイトル非表示（no-page-title クラス時） */
body.no-page-title .article-header,
body.no-page-title .entry-header,
body.no-page-title .article-title,
body.no-page-title .entry-title {
  display: none !important;
}

/* (2) フロントページのアピールエリアをフルブリード */
body.front-top-page .article,
body.column1-wide .article {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

body.front-top-page .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

body.front-top-page .appeal,
body.column1-wide .appeal {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 80px 24px !important;
  min-height: 60vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* CTAセクション・ストリップもフルブリード */
body.front-top-page .cs-cta-section,
body.column1-wide .cs-cta-section,
body.front-top-page .cs-strip,
body.column1-wide .cs-strip {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* カテゴリタイル・セクションヘッドはコンテンツ幅 */
body.front-top-page .cs-cat-tiles,
body.front-top-page .cs-section-head,
body.column1-wide .cs-cat-tiles,
body.column1-wide .cs-section-head {
  max-width: 1180px !important;
  margin: 50px auto !important;
  padding: 0 24px !important;
}

/* アピールタイトルのテキスト幅 */
body.front-top-page .appeal-title,
body.column1-wide .appeal-title {
  font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
  line-height: 1.3 !important;
  margin: 0 0 16px !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
}

body.front-top-page .appeal-message {
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  margin: 0 0 28px !important;
}

/* スクロールインジケーター位置 */
body.front-top-page .scroll-indicator {
  bottom: 20px !important;
}

/* hr（謎の赤バー）非表示 */
body.front-top-page .article hr,
body.front-top-page .entry-content hr,
body.column1-wide .entry-content hr {
  display: none !important;
}

/* 記事一覧のmax-width確保 */
body.front-top-page #list,
body.front-top-page .list,
body.column1-wide #list,
body.column1-wide .list {
  max-width: 1180px !important;
  margin: 50px auto !important;
  padding: 0 24px !important;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  body.front-top-page .appeal,
  body.column1-wide .appeal {
    min-height: 50vh !important;
    padding: 60px 20px !important;
  }
  body.front-top-page .cs-cat-tiles,
  body.column1-wide .cs-cat-tiles {
    grid-template-columns: 1fr !important;
  }
}



/* ======================================================
   転職ナビ TOPページ 専用CSS（Cocoon追加スタイル用）
   すべてのセレクタを .tn- プレフィックスでスコープ化
   ====================================================== */

/* ========== Reset for top page ========== */
.tn-top *,
.tn-top *::before,
.tn-top *::after { box-sizing:border-box; }

.tn-top {
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px; line-height:1.8; color:#333;
  margin:-30px -20px 0; /* Cocoonのメインエリア余白を打ち消す */
}

.tn-top a { color:inherit; text-decoration:none; transition:opacity .2s; }
.tn-top a:hover { opacity:.75; }
.tn-top ul { list-style:none; padding:0; margin:0; }
.tn-top img { max-width:100%; height:auto; display:block; }

.tn-container { max-width:1100px; margin:0 auto; padding:0 16px; }

/* ========== Hero ========== */
.tn-hero {
  background:linear-gradient(135deg,#0e2a47 0%,#1e5fad 60%,#2196f3 100%);
  color:#fff; padding:64px 0 80px; position:relative; overflow:hidden;
}
.tn-hero::after {
  content:""; position:absolute; right:-100px; bottom:-100px;
  width:400px; height:400px; border-radius:50%;
  background:rgba(255,255,255,.05);
}
.tn-hero-grid {
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px;
  align-items:center; position:relative; z-index:2;
}
.tn-hero-badge {
  display:inline-block; background:#ff6b35; color:#fff;
  padding:5px 14px; border-radius:4px; font-size:13px;
  font-weight:700; margin-bottom:16px;
}
.tn-hero h1 {
  font-size:38px; font-weight:800; line-height:1.4;
  margin:0 0 18px; color:#fff; letter-spacing:-.5px;
}
.tn-hero h1 em { font-style:normal; color:#ffd95a; border-bottom:3px solid #ffd95a; }
.tn-hero-lead { font-size:16px; line-height:1.9; opacity:.95; margin-bottom:28px; }
.tn-hero-stats { display:flex; gap:24px; margin-bottom:28px; flex-wrap:wrap; }
.tn-hero-stat {
  background:rgba(255,255,255,.12); padding:12px 18px;
  border-radius:8px; backdrop-filter:blur(6px);
}
.tn-hero-stat-num { font-size:24px; font-weight:800; color:#ffd95a; }
.tn-hero-stat-label { font-size:12px; opacity:.85; }
.tn-hero-cta { display:flex; gap:12px; flex-wrap:wrap; }

.tn-btn-primary {
  background:#ff6b35; color:#fff !important; padding:16px 32px;
  border-radius:8px; font-size:16px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 4px 0 #d8521e;
}
.tn-btn-primary:hover {
  transform:translateY(2px); box-shadow:0 2px 0 #d8521e; opacity:1;
}
.tn-btn-secondary {
  background:rgba(255,255,255,.15); color:#fff !important; padding:16px 28px;
  border-radius:8px; font-size:15px; font-weight:600;
  border:1px solid rgba(255,255,255,.3);
}

.tn-hero-card {
  background:#fff; color:#333; border-radius:12px; padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.tn-hero-card-title { font-size:13px; color:#7a869a; font-weight:600; margin-bottom:14px; }
.tn-hero-card-rank {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid #eef2f6;
}
.tn-hero-card-rank:last-child { border-bottom:0; }
.tn-rank-no {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:#fff; flex-shrink:0;
}
.tn-rank-no.no1 { background:linear-gradient(135deg,#ffc83d,#e6a200); }
.tn-rank-no.no2 { background:linear-gradient(135deg,#b8c2cc,#8a96a3); }
.tn-rank-no.no3 { background:linear-gradient(135deg,#cd7f32,#a0521c); }
.tn-rank-name { font-weight:700; font-size:14px; flex:1; color:#0e2a47; }
.tn-rank-score { font-size:13px; color:#ff6b35; font-weight:700; }

/* ========== Section common ========== */
.tn-section { padding:64px 0; }
.tn-section-head { text-align:center; margin-bottom:40px; }
.tn-eyebrow {
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px;
  color:#1e5fad; background:#e8f0fa; padding:5px 14px;
  border-radius:20px; margin-bottom:12px;
}
.tn-section-head h2 {
  font-size:30px; font-weight:800; color:#0e2a47;
  letter-spacing:-.5px; line-height:1.4; margin:0;
  border:0; padding:0; background:none;
}
.tn-section-head p { font-size:14px; color:#7a869a; margin-top:10px; }

/* ========== Ranking ========== */
.tn-ranking { background:#fff; }
.tn-rank-list { display:flex; flex-direction:column; gap:18px; }
.tn-rank-card {
  background:#fff; border:2px solid #eef2f6; border-radius:12px;
  display:grid; grid-template-columns:80px 1fr auto; gap:24px;
  padding:24px; align-items:center; transition:all .2s; position:relative; overflow:hidden;
}
.tn-rank-card:hover {
  border-color:#1e5fad; transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(30,95,173,.1);
}
.tn-rank-card.gold { border-color:#ffc83d; background:linear-gradient(180deg,#fffbe8 0%,#fff 100%); }
.tn-rank-card.silver { border-color:#b8c2cc; }
.tn-rank-card.bronze { border-color:#cd7f32; }

.tn-rank-medal {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-size:24px; font-weight:800; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.tn-rank-medal.gold { background:linear-gradient(135deg,#ffd95a,#e6a200); }
.tn-rank-medal.silver { background:linear-gradient(135deg,#cdd5dd,#8a96a3); }
.tn-rank-medal.bronze { background:linear-gradient(135deg,#e09a5e,#a0521c); }
.tn-rank-medal small { font-size:9px; font-weight:600; letter-spacing:1px; margin-top:-4px; }

.tn-rank-info h3 {
  font-size:22px; font-weight:800; color:#0e2a47;
  margin:0 0 6px; border:0; padding:0; background:none;
}
.tn-rank-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.tn-rank-tag {
  background:#e8f0fa; color:#1e5fad; font-size:11px;
  font-weight:600; padding:3px 10px; border-radius:3px;
}
.tn-rank-tag.hot { background:#ffe8e0; color:#ff6b35; }
.tn-rank-desc { font-size:13px; color:#5a6877; line-height:1.7; margin:0; }
.tn-rank-meta {
  display:flex; align-items:center; gap:6px;
  margin-top:10px; font-size:12px; color:#7a869a;
}
.tn-stars { color:#ffc83d; letter-spacing:1px; }
.tn-rank-cta { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.tn-btn-detail {
  background:#ff6b35; color:#fff !important; padding:12px 24px;
  border-radius:6px; font-weight:700; font-size:14px;
  white-space:nowrap; box-shadow:0 3px 0 #d8521e;
}
.tn-btn-detail:hover { transform:translateY(1px); box-shadow:0 2px 0 #d8521e; opacity:1; }
.tn-btn-text { font-size:12px; color:#1e5fad; font-weight:600; }

/* ========== Categories ========== */
.tn-categories { background:#f7f8fa; }
.tn-cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tn-cat-card {
  background:#fff; border-radius:12px; padding:24px 20px;
  text-align:center; border:1px solid #eef2f6;
  transition:all .2s; display:block;
}
.tn-cat-card:hover {
  transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.06);
  border-color:#1e5fad; opacity:1;
}
.tn-cat-icon {
  width:56px; height:56px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.tn-cat-icon.c1 { background:#e8f0fa; color:#1e5fad; }
.tn-cat-icon.c2 { background:#fff4e8; color:#ff6b35; }
.tn-cat-icon.c3 { background:#e8f7ee; color:#28a745; }
.tn-cat-icon.c4 { background:#fce8f3; color:#d63384; }
.tn-cat-icon.c5 { background:#f0e8fc; color:#6f42c1; }
.tn-cat-icon.c6 { background:#e8f7f7; color:#17a2b8; }
.tn-cat-icon.c7 { background:#fffbe8; color:#e6a200; }
.tn-cat-icon.c8 { background:#fce8e8; color:#dc3545; }
.tn-cat-card h3 {
  font-size:15px; font-weight:700; color:#0e2a47;
  margin:0 0 6px; border:0; padding:0; background:none;
}
.tn-cat-card p { font-size:12px; color:#7a869a; margin:0; }
.tn-cat-count {
  display:inline-block; margin-top:10px;
  font-size:11px; color:#1e5fad; font-weight:700;
}

/* ========== Articles ========== */
.tn-articles { background:#fff; }
.tn-tab-bar { display:flex; justify-content:center; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
.tn-tab {
  padding:10px 22px; font-size:14px; font-weight:600; color:#7a869a;
  background:#f7f8fa; border-radius:30px; cursor:pointer; transition:all .15s;
}
.tn-tab.active { background:#0e2a47; color:#fff; }
.tn-tab:hover { opacity:1; color:#1e5fad; }
.tn-tab.active:hover { color:#fff; }

.tn-art-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tn-art-card {
  background:#fff; border-radius:10px; overflow:hidden;
  border:1px solid #eef2f6; transition:all .2s; display:block;
}
.tn-art-card:hover {
  transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.08); opacity:1;
}
.tn-art-thumb {
  height:170px; background:linear-gradient(135deg,#1e5fad,#2196f3);
  position:relative; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:600; letter-spacing:1px;
}
.tn-art-thumb.t2 { background:linear-gradient(135deg,#ff6b35,#ffa05a); }
.tn-art-thumb.t3 { background:linear-gradient(135deg,#28a745,#5acb6f); }
.tn-art-thumb.t4 { background:linear-gradient(135deg,#6f42c1,#a586d6); }
.tn-art-thumb.t5 { background:linear-gradient(135deg,#17a2b8,#5dd0e0); }
.tn-art-thumb.t6 { background:linear-gradient(135deg,#d63384,#f06ba9); }
.tn-art-cat-badge {
  position:absolute; top:12px; left:12px;
  background:rgba(255,255,255,.95); color:#0e2a47;
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:3px;
}
.tn-art-body { padding:18px; }
.tn-art-body h3 {
  font-size:15px; font-weight:700; color:#0e2a47;
  line-height:1.55; margin:0 0 10px; border:0; padding:0; background:none;
}
.tn-art-meta {
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:#7a869a;
}
.tn-art-date { display:flex; align-items:center; gap:5px; }

/* ========== Compare table ========== */
.tn-compare { background:#f7f8fa; }
.tn-table-wrap {
  overflow-x:auto; background:#fff; border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
}
.tn-top table { width:100%; border-collapse:collapse; min-width:720px; margin:0; }
.tn-top th,
.tn-top td {
  padding:14px 12px; text-align:center;
  border-bottom:1px solid #eef2f6; font-size:13px;
}
.tn-top th {
  background:#0e2a47; color:#fff; font-weight:700;
  font-size:13px; letter-spacing:.3px;
}
.tn-top th:first-child,
.tn-top td:first-child { text-align:left; font-weight:700; }
.tn-compare-rank {
  width:22px; height:22px; border-radius:50%;
  background:#ffc83d; color:#fff; font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; margin-right:8px;
}
.tn-compare-rank.no2 { background:#b8c2cc; }
.tn-compare-rank.no3 { background:#cd7f32; }
.tn-top tr:hover td { background:#f7f8fa; }
.tn-score-bar {
  display:inline-block; width:60px; height:6px; background:#eef2f6;
  border-radius:3px; position:relative; vertical-align:middle; margin-right:6px;
}
.tn-score-bar::after {
  content:""; position:absolute; left:0; top:0; height:100%;
  background:linear-gradient(90deg,#ff6b35,#ffa05a); border-radius:3px;
}
.tn-s95::after { width:95%; }
.tn-s90::after { width:90%; }
.tn-s85::after { width:85%; }
.tn-s80::after { width:80%; }
.tn-s75::after { width:75%; }
.tn-s70::after { width:70%; }

/* ========== CTA banner ========== */
.tn-cta-banner {
  background:linear-gradient(135deg,#ff6b35 0%,#ff8b5a 100%);
  color:#fff; text-align:center; padding:56px 0;
}
.tn-cta-banner h2 {
  font-size:28px; font-weight:800; margin:0 0 12px;
  color:#fff; border:0; padding:0; background:none;
}
.tn-cta-banner p { font-size:15px; margin:0 0 24px; opacity:.95; }
.tn-cta-banner .tn-btn-primary {
  background:#fff; color:#ff6b35 !important;
  box-shadow:0 4px 0 rgba(0,0,0,.15);
}
.tn-cta-banner .tn-btn-primary:hover {
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}

/* ========== Responsive ========== */
@media (max-width:900px) {
  .tn-hero-grid { grid-template-columns:1fr; gap:32px; }
  .tn-hero h1 { font-size:26px; }
  .tn-cat-grid { grid-template-columns:repeat(2,1fr); }
  .tn-art-grid { grid-template-columns:1fr; }
  .tn-rank-card { grid-template-columns:60px 1fr; gap:14px; padding:18px; }
  .tn-rank-cta {
    grid-column:1/-1; flex-direction:row;
    justify-content:space-between; align-items:center;
    width:100%; margin-top:8px;
  }
  .tn-section-head h2 { font-size:22px; }
  .tn-section { padding:48px 0; }
  .tn-hero { padding:48px 0 56px; }
}

/* ========== Cocoonの既存スタイル打ち消し ========== */
.tn-top h1,
.tn-top h2,
.tn-top h3 {
  border-bottom:0; border-left:0; padding-left:0;
}
.tn-top a {
  color:inherit;
}

/* ============================================================
   アーカイブページ用CSSパッチ v1.0
   作成日: 2026-04-27

   対象: /category/* および /tag/* のアーカイブページ
   目的: シンプルなh1だけだったアーカイブヘッダーをリッチなhero型に
   配置: Cocoon Child の style.css 末尾に追記

   仕様:
   - 全アーカイブ：グラデーション背景のhero + アイコン + 記事数バッジ
   - カテゴリ別：descriptionをhero下に表示（hardcoded）
   - タグ別：色違いのhero + descriptionをJSで動的注入（オプション）
   ============================================================ */

/* ========== アーカイブhero共通 ========== */
body.archive .archive-title {
  background: linear-gradient(135deg, #0e2a47, #1a3a52) !important;
  color: #fff !important;
  padding: 70px 24px 60px !important;
  margin: 0 calc(50% - 50vw) 40px !important;
  width: 100vw !important;
  max-width: 100vw !important;
  text-align: center !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 800 !important;
  border: 0 !important;
  position: relative !important;
  letter-spacing: .04em !important;
  line-height: 1.4 !important;
}
body.archive .archive-title .fa,
body.archive .archive-title .fas,
body.archive .archive-title .far {
  color: #ff6b35 !important;
  margin-right: 14px !important;
  font-size: .85em !important;
}

/* hero下のラベル（カテゴリ or タグ） */
body.archive .archive-title::before {
  content: "CATEGORY" !important;
  display: block !important;
  font-size: 12px !important;
  letter-spacing: .25em !important;
  color: rgba(255,255,255,.6) !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  background: rgba(255,255,255,.08) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.tag-archive .archive-title::before,
body[class*="tag-"].archive .archive-title::before {
  content: "TAG" !important;
  background: rgba(255,107,53,.18) !important;
  color: #ffb592 !important;
}

/* ========== カテゴリ別 description（::after で表示） ========== */
body.category-tenshoku .archive-title::after {
  content: "20代から50代までの年代別、業界別、職種別に20本の実践記事。エージェント活用、面接対策、ハイクラス転職、未経験からのキャリアチェンジまで、市場の最新動向と現場の実例を踏まえた具体的なガイドをお届けします。";
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 22px auto 0;
  line-height: 1.85;
  max-width: 720px;
  color: rgba(255,255,255,.88);
  letter-spacing: .02em;
}
body.category-fukugyo .archive-title::after {
  content: "在宅・スマホ・プログラミング・動画編集・イラスト・データ入力など、種別別に15本のガイド記事。月数千円から月10万円超えまで、現実的な収益レンジと始め方のステップ、税金・確定申告、安全な案件の見極め方を初心者にやさしく解説。";
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 22px auto 0;
  line-height: 1.85;
  max-width: 720px;
  color: rgba(255,255,255,.88);
  letter-spacing: .02em;
}
body.category-career .archive-title::after {
  content: "自己分析・スキルアップ・ワークライフバランス・FIRE・セルフブランディング・メンタルヘルスなど、人生100年時代に向けた15本のガイド。あなたの「軸」を作り、長期的に成長し続けるためのキャリア設計を実践的にサポートします。";
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 22px auto 0;
  line-height: 1.85;
  max-width: 720px;
  color: rgba(255,255,255,.88);
  letter-spacing: .02em;
}

/* ========== カテゴリごとにアクセントカラーを変える ========== */
body.category-fukugyo .archive-title {
  background: linear-gradient(135deg, #1a3a52, #0e6638) !important;
}
body.category-fukugyo .archive-title .fa { color: #5dd39e !important; }

body.category-career .archive-title {
  background: linear-gradient(135deg, #1a3a52, #6b3a8a) !important;
}
body.category-career .archive-title .fa { color: #c39bff !important; }

/* ========== タグページ：オレンジアクセントhero ========== */
body[class*="tag-"].archive .archive-title {
  background: linear-gradient(135deg, #1a1a1a, #3d2818) !important;
  padding: 50px 24px 40px !important;
}
body[class*="tag-"].archive .archive-title .fa { color: #ff6b35 !important; }

/* ========== タグ別 description ========== */
body.tag-career-change .archive-title::after,
body.tag-side-gig-skill .archive-title::after,
body.tag-skill-up .archive-title::after,
body.tag-remote-work .archive-title::after,
body.tag-work-life-balance .archive-title::after,
body.tag-mikeiken .archive-title::after,
body.tag-comparison-ranking .archive-title::after,
body.tag-freedom .archive-title::after,
body.tag-40plus .archive-title::after,
body.tag-guide-howto .archive-title::after {
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 18px auto 0;
  line-height: 1.85;
  max-width: 720px;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
}
body.tag-career-change .archive-title::after { content: "異業種・異職種への転換を考える人向けの記事。やりたいことの探し方、未経験OKの職種、必要な準備期間、年収変動の現実までを実例ベースで解説。"; }
body.tag-side-gig-skill .archive-title::after { content: "在宅・スマホ・PC1台で始められる副業スキル系の記事。プログラミング・ライティング・動画編集・データ入力など、案件単価と必要時間の目安付きで紹介。"; }
body.tag-skill-up .archive-title::after { content: "年収アップ・キャリア形成に直結するスキル習得の記事。資格・独学・社会人スクール・実務経験の積み方を、効果順とコスト感で比較。"; }
body.tag-remote-work .archive-title::after { content: "在宅勤務・リモートワークに関わる記事。求人の見つけ方、自宅環境の整え方、コミュニケーションの工夫、家族との調整まで実践的に。"; }
body.tag-work-life-balance .archive-title::after { content: "仕事と生活のバランスを保つ働き方の記事。残業文化からの抜け出し方、時短・フレックス活用、メンタル維持のコツなど。"; }
body.tag-mikeiken .archive-title::after { content: "未経験から新しい仕事に挑戦する人向けの記事。ポートフォリオの作り方、書類選考の通し方、入社後の追いつき戦略までを実例付きで。"; }
body.tag-comparison-ranking .archive-title::after { content: "転職サイト・副業案件・スクールなどの比較・ランキング系記事。料金・特徴・対象者を横並びで整理して、自分に合うサービスを選びやすく。"; }
body.tag-freedom .archive-title::after { content: "会社に縛られない働き方・自分らしい生き方を目指す記事。FIRE、フリーランス、複業、独立など多様な選択肢を現実的なコスト面から解説。"; }
body.tag-40plus .archive-title::after { content: "40代以降のキャリアに関する記事。中堅層の転職市場、セカンドキャリア、管理職への道、年収交渉のコツなど世代特有のテーマ。"; }
body.tag-guide-howto .archive-title::after { content: "基礎から学べる完全ガイド・ハウツー系記事。転職・副業・キャリアの最初の一歩から実行レベルまで、ステップバイステップで解説。"; }

/* ========== サイドバーを非表示にして1カラム全幅化 ========== */
body.archive #main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body.archive .main {
  margin-right: 0 !important;
  width: 100% !important;
}
body.archive .sidebar,
body.archive #sidebar {
  display: none !important;
}
body.archive .content-in {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
body.archive #main {
  background: transparent !important;
}

/* ========== 記事一覧コンテナ：3列グリッド ========== */
body.archive .list,
body.archive #list {
  max-width: 1180px !important;
  margin: 0 auto 60px !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px 24px !important;
  background: transparent !important;
  border: 0 !important;
}

/* ========== entry-card：縦型カード ========== */
body.archive .entry-card-wrap {
  background: #fff !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
  transition: transform .2s, box-shadow .2s !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}
body.archive .entry-card-wrap:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08) !important;
  opacity: 1 !important;
}
body.archive .entry-card {
  display: block !important;
  padding: 0 !important;
}
body.archive .entry-card-thumb,
body.archive .card-thumb {
  margin: 0 !important;
  position: relative !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
body.archive .entry-card-thumb img,
body.archive .card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
}
body.archive .entry-card-thumb .cat-label {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(14, 42, 71, .92) !important;
  color: #fff !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 0 !important;
  z-index: 2 !important;
}
body.archive .entry-card-content,
body.archive .card-content {
  padding: 16px 18px 18px !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
}
body.archive .entry-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0e2a47 !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.archive .entry-card-snippet {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 0 10px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.archive .entry-card-meta {
  font-size: 11px !important;
  color: #94a3b8 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
body.archive .entry-card-meta .post-date,
body.archive .entry-card-meta .entry-date {
  color: #94a3b8 !important;
}
body.archive .entry-card-categorys .entry-category {
  background: #fff7f3 !important;
  color: #ff6b35 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* ========== ページネーション ========== */
body.archive .pagination {
  margin: 40px auto 80px !important;
  text-align: center !important;
}

/* ========== レスポンシブ ========== */
@media screen and (max-width: 1024px) {
  body.archive .list,
  body.archive #list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px 18px !important;
  }
}
@media screen and (max-width: 768px) {
  body.archive .archive-title {
    padding: 50px 18px 40px !important;
    font-size: 24px !important;
  }
  body.archive .archive-title::after {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-top: 16px !important;
  }
  body.archive .list,
  body.archive #list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  body.archive .entry-card-content,
  body.archive .card-content {
    padding: 14px 16px 16px !important;
  }
}

/* ============================================================
   アーカイブページ用CSSパッチ v1.0
   作成日: 2026-04-27

   対象: /category/* および /tag/* のアーカイブページ
   目的: シンプルなh1だけだったアーカイブヘッダーをリッチなhero型に
   配置: Cocoon Child の style.css 末尾に追記

   仕様:
   - 全アーカイブ：グラデーション背景のhero + アイコン + 記事数バッジ
   - カテゴリ別：descriptionをhero下に表示（hardcoded）
   - タグ別：色違いのhero + descriptionをJSで動的注入（オプション）
   ============================================================ */

/* ========== アーカイブhero共通 ========== */
body.archive .archive-title {
  background: linear-gradient(135deg, #0e2a47, #1a3a52) !important;
  color: #fff !important;
  padding: 70px 24px 60px !important;
  margin: 0 calc(50% - 50vw) 40px !important;
  width: 100vw !important;
  max-width: 100vw !important;
  text-align: center !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 800 !important;
  border: 0 !important;
  position: relative !important;
  letter-spacing: .04em !important;
  line-height: 1.4 !important;
}
body.archive .archive-title .fa,
body.archive .archive-title .fas,
body.archive .archive-title .far {
  color: #ff6b35 !important;
  margin-right: 14px !important;
  font-size: .85em !important;
}

/* hero下のラベル（カテゴリ or タグ） */
body.archive .archive-title::before {
  content: "CATEGORY" !important;
  display: block !important;
  font-size: 12px !important;
  letter-spacing: .25em !important;
  color: rgba(255,255,255,.6) !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  background: rgba(255,255,255,.08) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.tag-archive .archive-title::before,
body[class*="tag-"].archive .archive-title::before {
  content: "TAG" !important;
  background: rgba(255,107,53,.18) !important;
  color: #ffb592 !important;
}

/* ========== カテゴリ別 description（::after で表示） ========== */
body.category-tenshoku .archive-title::after {
  content: "20代から50代までの年代別、業界別、職種別に20本の実践記事。エージェント活用、面接対策、ハイクラス転職、未経験からのキャリアチェンジまで、市場の最新動向と現場の実例を踏まえた具体的なガイドをお届けします。";
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 22px auto 0;
  line-height: 1.85;
  max-width: 720px;
  color: rgba(255,255,255,.88);
  letter-spacing: .02em;
}
body.category-fukugyo .archive-title::after {
  content: "在宅・スマホ・プログラミング・動画編集・イラスト・データ入力など、種別別に15本のガイド記事。月数千円から月10万円超えまで、現実的な収益レンジと始め方のステップ、税金・確定申告、安全な案件の見極め方を初心者にやさしく解説。";
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 22px auto 0;
  line-height: 1.85;
  max-width: 720px;
  color: rgba(255,255,255,.88);
  letter-spacing: .02em;
}
body.category-career .archive-title::after {
  content: "自己分析・スキルアップ・ワークライフバランス・FIRE・セルフブランディング・メンタルヘルスなど、人生100年時代に向けた15本のガイド。あなたの「軸」を作り、長期的に成長し続けるためのキャリア設計を実践的にサポートします。";
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 22px auto 0;
  line-height: 1.85;
  max-width: 720px;
  color: rgba(255,255,255,.88);
  letter-spacing: .02em;
}

/* ========== カテゴリごとにアクセントカラーを変える ========== */
body.category-fukugyo .archive-title {
  background: linear-gradient(135deg, #1a3a52, #0e6638) !important;
}
body.category-fukugyo .archive-title .fa { color: #5dd39e !important; }

body.category-career .archive-title {
  background: linear-gradient(135deg, #1a3a52, #6b3a8a) !important;
}
body.category-career .archive-title .fa { color: #c39bff !important; }

/* ========== タグページ：オレンジアクセントhero ========== */
body[class*="tag-"].archive .archive-title {
  background: linear-gradient(135deg, #1a1a1a, #3d2818) !important;
  padding: 50px 24px 40px !important;
}
body[class*="tag-"].archive .archive-title .fa { color: #ff6b35 !important; }

/* ========== タグ別 description ========== */
body.tag-career-change .archive-title::after,
body.tag-side-gig-skill .archive-title::after,
body.tag-skill-up .archive-title::after,
body.tag-remote-work .archive-title::after,
body.tag-work-life-balance .archive-title::after,
body.tag-mikeiken .archive-title::after,
body.tag-comparison-ranking .archive-title::after,
body.tag-freedom .archive-title::after,
body.tag-40plus .archive-title::after,
body.tag-guide-howto .archive-title::after {
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin: 18px auto 0;
  line-height: 1.85;
  max-width: 720px;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
}
body.tag-career-change .archive-title::after { content: "異業種・異職種への転換を考える人向けの記事。やりたいことの探し方、未経験OKの職種、必要な準備期間、年収変動の現実までを実例ベースで解説。"; }
body.tag-side-gig-skill .archive-title::after { content: "在宅・スマホ・PC1台で始められる副業スキル系の記事。プログラミング・ライティング・動画編集・データ入力など、案件単価と必要時間の目安付きで紹介。"; }
body.tag-skill-up .archive-title::after { content: "年収アップ・キャリア形成に直結するスキル習得の記事。資格・独学・社会人スクール・実務経験の積み方を、効果順とコスト感で比較。"; }
body.tag-remote-work .archive-title::after { content: "在宅勤務・リモートワークに関わる記事。求人の見つけ方、自宅環境の整え方、コミュニケーションの工夫、家族との調整まで実践的に。"; }
body.tag-work-life-balance .archive-title::after { content: "仕事と生活のバランスを保つ働き方の記事。残業文化からの抜け出し方、時短・フレックス活用、メンタル維持のコツなど。"; }
body.tag-mikeiken .archive-title::after { content: "未経験から新しい仕事に挑戦する人向けの記事。ポートフォリオの作り方、書類選考の通し方、入社後の追いつき戦略までを実例付きで。"; }
body.tag-comparison-ranking .archive-title::after { content: "転職サイト・副業案件・スクールなどの比較・ランキング系記事。料金・特徴・対象者を横並びで整理して、自分に合うサービスを選びやすく。"; }
body.tag-freedom .archive-title::after { content: "会社に縛られない働き方・自分らしい生き方を目指す記事。FIRE、フリーランス、複業、独立など多様な選択肢を現実的なコスト面から解説。"; }
body.tag-40plus .archive-title::after { content: "40代以降のキャリアに関する記事。中堅層の転職市場、セカンドキャリア、管理職への道、年収交渉のコツなど世代特有のテーマ。"; }
body.tag-guide-howto .archive-title::after { content: "基礎から学べる完全ガイド・ハウツー系記事。転職・副業・キャリアの最初の一歩から実行レベルまで、ステップバイステップで解説。"; }

/* ========== サイドバーを非表示にして1カラム全幅化 ========== */
body.archive #main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body.archive .main {
  margin-right: 0 !important;
  width: 100% !important;
}
body.archive .sidebar,
body.archive #sidebar {
  display: none !important;
}
body.archive .content-in {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
body.archive #main {
  background: transparent !important;
}

/* ========== 記事一覧コンテナ：3列グリッド ========== */
body.archive .list,
body.archive #list {
  max-width: 1180px !important;
  margin: 0 auto 60px !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px 24px !important;
  background: transparent !important;
  border: 0 !important;
}

/* ========== entry-card：縦型カード ========== */
body.archive .entry-card-wrap {
  background: #fff !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
  transition: transform .2s, box-shadow .2s !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}
body.archive .entry-card-wrap:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08) !important;
  opacity: 1 !important;
}
body.archive .entry-card {
  display: block !important;
  padding: 0 !important;
}
body.archive .entry-card-thumb,
body.archive .card-thumb {
  margin: 0 !important;
  position: relative !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
body.archive .entry-card-thumb img,
body.archive .card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
}
body.archive .entry-card-thumb .cat-label {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(14, 42, 71, .92) !important;
  color: #fff !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 0 !important;
  z-index: 2 !important;
}
body.archive .entry-card-content,
body.archive .card-content {
  padding: 16px 18px 18px !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
}
body.archive .entry-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0e2a47 !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.archive .entry-card-snippet {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 0 10px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.archive .entry-card-meta {
  font-size: 11px !important;
  color: #94a3b8 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
body.archive .entry-card-meta .post-date,
body.archive .entry-card-meta .entry-date {
  color: #94a3b8 !important;
}
body.archive .entry-card-categorys .entry-category {
  background: #fff7f3 !important;
  color: #ff6b35 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* ========== ページネーション ========== */
body.archive .pagination {
  margin: 40px auto 80px !important;
  text-align: center !important;
}
/* 「次のページ」テキスト型ナビは数字ページネーションと重複するので非表示 */
body.archive .pagination-next { display: none !important; }

/* ========== レスポンシブ ========== */
@media screen and (max-width: 1024px) {
  body.archive .list,
  body.archive #list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px 18px !important;
  }
}
@media screen and (max-width: 768px) {
  body.archive .archive-title {
    padding: 50px 18px 40px !important;
    font-size: 24px !important;
  }
  body.archive .archive-title::after {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-top: 16px !important;
  }
  body.archive .list,
  body.archive #list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  body.archive .entry-card-content,
  body.archive .card-content {
    padding: 14px 16px 16px !important;
  }
}