/* =========================================================
  CC BLOG CSS : 統合版（重複削除・現状維持）
  目的：
  - PCで中央に縮む/スマホ幅固定になる症状を止める
  - PC: 本文+サイドバー横並び / SP: 縦積み
  - 白背景・黒文字（サイト全体）
  - イントロ（cc-intro）は黒背景・白文字（イントロ内だけ）
  - ヘッダー：PC横並び / SPハンバーガー表示
  - 記事内画像レスポ
  - ヘッダー説明文を非表示
  - タイトル差し替え「修羅和泉×クリコン」（明朝）
========================================================= */


/* ========== 1) サイト全体：白背景・黒文字 ========== */
html, body{
  text-align: left !important;
  background: #fff !important;
  color: #111 !important;
}

/* リンク（古臭い青を避けた控えめ） */
a{ color:#3a4fd6; }
a:hover{ color:#111; text-decoration: underline; }


/* ========== 2) レイアウト：PCで縮む問題 / 2カラム安定 ========== */
.container-block{
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* PCは grid で固定（flexとgridの二重定義を排除） */
@media (min-width: 1024px){
  #main-block{
    display: grid !important;
    grid-template-columns: 1fr 320px !important;
    gap: 28px !important;
    align-items: start !important;
  }
  #article-block{ min-width: 0 !important; }
  #aside-block{
    min-width: 280px !important;
    position: sticky;
    top: 18px;
  }
}

/* SP/タブレットは縦積み */
@media (max-width: 1023px){
  #main-block{ display:block !important; }
  #aside-block{ width: 100% !important; position: static; }
}


/* ========== 3) 記事本文の見た目（黒枠を残す） ========== */
.entryText{
  background: rgba(10,14,28,.55) !important;
  border: 1px solid rgba(140,170,255,.22) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  color: #e9eefc !important; /* 黒枠内は白文字 */
}
.entryText a{
  color: #b8d2ff !important;
  text-decoration: underline !important;
}

/* 記事内のはみ出し対策 */
.entryText,
.entryTextMain,
.entry-block{
  overflow-wrap: anywhere;
}


/* ========== 4) 記事内画像のレスポンシブ強制 ========== */
.entryText img,
.entryTextMain img,
.entry-block img{
  max-width: 100% !important;
  height: auto !important;
  display: block;
}


/* ========== 5) サイドバーの「丸見え箇条書き」を止める ========== */
ul, ol{ padding-left: 1.2em; }
#aside-block ul{ padding-left: 0; list-style: none; }
#aside-block li{ margin: 6px 0; }


/* ========== 6) ヘッダー：追従（縮むが残る） ========== */
#header-block{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: padding .25s ease, background .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

/* ヘッダー余白 */
#header-block .header-title-block{
  position: relative;
  padding: 18px 16px;
  transition: padding .25s ease;
}

/* 説明文は消す（あなたの要望） */
#header-block .header-desc{ display:none !important; }

/* 旧タイトルを非表示 */
#header-block h1,
#header-block .header-title,
#header-block .header-title-link{
  display: none !important;
}

/* 代替タイトル（明朝・修羅和泉×クリコン） */
#header-block .header-title-block::before{
  content: "修羅和泉×クリコン";
  display: block;
  font-family: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","MS Mincho",serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* 縮小時（JSで #header-block に is-shrink が付く前提） */
#header-block.is-shrink{
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
#header-block.is-shrink .header-title-block{
  padding: 10px 16px;
}
@media (max-width: 768px){
  #header-block .header-title-block{ padding: 14px 14px; }
  #header-block.is-shrink .header-title-block{ padding: 8px 14px; }
}


/* ========== 7) ヘッダーメニュー：PC横並び / SPハンバーガー ========== */
.header-nav-block{ padding: 10px 16px 14px; }
.header-nav-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-nav-list-item{ margin:0; }

@media (min-width: 1024px){
  .btn-navbar{ display:none !important; }

  /* PCは強制表示（hideが付いても表示） */
  .header-nav-block.nav-collapse,
  .header-nav-block.nav-collapse.hide{
    display:block !important;
  }

  .header-nav-list{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .header-nav-list-item-link,
  .dropdown-toggle{
    display:inline-block;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.85);
    color:#111;
    text-decoration:none;
    font-weight: 600;
  }

  .header-nav-list-item-link:hover,
  .dropdown-toggle:hover{
    border-color: rgba(58,79,214,.35);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }

  /* ドロップダウン */
  .dropdown{ position: relative; }
  .dropdown-menu{
    display:none;
    position:absolute;
    top: 46px;
    left: 0;
    min-width: 240px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    box-shadow: 0 18px 50px rgba(0,0,0,.12);
    z-index: 60;
  }
  .dropdown:hover .dropdown-menu{ display:block; }

  .header-nav-list-item.search{ margin-left: auto; }
  .header-nav-search .form-control{
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
  }
}

@media (max-width: 1023px){
  /* ハンバーガーを必ず見せる（既存CSSに勝つ） */
  .btn-navbar{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 9999;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.92);
    cursor: pointer;
  }
  .btn-navbar .fa{ display:none !important; }
  .btn-navbar::before{
    content: "≡";
    font-size: 22px;
    line-height: 1;
    color: #111;
  }
  .header-title-block{ padding-right: 64px !important; }

  .header-nav-block.nav-collapse.hide{ display:none; }

  .header-nav-list-item-link,
  .dropdown-toggle{
    display:block;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    color:#111;
    text-decoration:none;
    font-weight: 600;
  }
  .dropdown-menu{ padding-left: 10px; }

  .header-nav-list-item.search{ margin-top: 10px; }
}


/* ========== 8) Crystal Gate Intro（イントロだけ黒背景白文字） ========== */
.cc-intro{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  opacity: 0;
  pointer-events: none;
  background: #070a12;
  color: #e9eefc;
  overflow: hidden;
  font-family: "Cinzel","Noto Sans JP",serif;
}
.cc-intro *{ color: inherit; }

.cc-intro.is-on{
  display: block;
  pointer-events: auto;
}
.cc-intro.is-show{
  opacity: 1;
  transition: opacity 600ms ease;
}
.cc-intro.is-hide{
  opacity: 0;
  transition: opacity 500ms ease;
}

/* scenes */
.cc-scene{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition: opacity 600ms ease;
}
.cc-scene.is-active{
  opacity:1;
  pointer-events:auto;
}

/* Scene1 BG（画像はJS側で差し替える前提） */
.cc-intro__bg{
  position:absolute;
  inset:-10%;
  background-color:#000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 20%;
  filter: saturate(1.05) contrast(1.05);
}
.cc-scene--1 .cc-intro__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,.75) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events:none;
}

/* レスポ調整 */
@media (max-width: 1024px){
  .cc-scene--1 .cc-intro__bg{ background-position: center center; }
}
@media (max-width: 640px){
  .cc-scene--1 .cc-intro__bg{ background-position: center 12%; }
}

/* stage/gate/copy（あなたの現状をそのまま踏襲） */
.cc-intro__stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.cc-gate{
  position: relative;
  width: min(520px, 82vw);
  aspect-ratio: 1 / 1;
  transform: scale(.96);
  opacity: 0;
}
.cc-gate__ring{
  position:absolute; inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(140,170,255,.20);
  box-shadow:
    0 0 0 1px rgba(217,197,138,.10) inset,
    0 0 40px rgba(122,166,255,.10),
    0 0 90px rgba(167,139,250,.08);
}
.cc-gate__inner{
  position:absolute; inset: 18%;
  border-radius: 18px;
  border: 1px solid rgba(217,197,138,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter: blur(4px);
  overflow:hidden;
}
.cc-gate__inner::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(420px 260px at 40% 30%, rgba(122,166,255,.28), transparent 65%),
    radial-gradient(420px 260px at 60% 60%, rgba(167,139,250,.22), transparent 70%),
    radial-gradient(520px 320px at 50% 70%, rgba(217,197,138,.12), transparent 70%);
  opacity:0;
  transform: translateY(12px) scale(.98);
}
.cc-gate__flare{
  position:absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 55%);
  opacity: 0;
}
.cc-intro__copy{
  position:absolute;
  width:min(780px, 88vw);
  padding: 0 10px;
  opacity: 0;
  transform: translateY(10px);
}
.cc-intro__eyebrow{ letter-spacing:.18em; font-size:12px; opacity:.88; }
.cc-intro__title{
  margin-top:10px;
  font-size: clamp(28px, 5.2vw, 56px);
  letter-spacing:.06em;
  line-height:1.05;
  text-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.cc-intro__sub{ margin-top:10px; font-size:14px; letter-spacing:.12em; color: rgba(233,238,252,.78); }

/* アニメ（scene1） */
.cc-intro.is-animate .cc-scene--1 .cc-gate{ animation: cc_gate_in 1100ms ease forwards; }
.cc-intro.is-animate .cc-scene--1 .cc-gate__inner::before{ animation: cc_light 1500ms ease forwards; animation-delay: 320ms; }
.cc-intro.is-animate .cc-scene--1 .cc-gate__flare{ animation: cc_flare 1300ms ease forwards; animation-delay: 520ms; }
.cc-intro.is-animate .cc-scene--1 .cc-intro__copy{ animation: cc_copy 1100ms ease forwards; animation-delay: 620ms; }

@keyframes cc_gate_in{
  0%{ opacity:0; transform: scale(.92); filter: blur(1px); }
  45%{ opacity:1; transform: scale(1.0); filter: blur(0px); }
  100%{ opacity:1; transform: scale(1.02); }
}
@keyframes cc_light{
  0%{ opacity:0; transform: translateY(12px) scale(.98); }
  55%{ opacity:1; }
  100%{ opacity:.85; transform: translateY(0) scale(1.0); }
}
@keyframes cc_flare{
  0%{ opacity:0; transform: scale(.98); }
  55%{ opacity:.75; }
  100%{ opacity:0; transform: scale(1.03); }
}
@keyframes cc_copy{
  0%{ opacity:0; transform: translateY(10px); }
  100%{ opacity:1; transform: translateY(0); }
}

/* Scene2 Poster */
:root{
  --poster-bg: url("https://blog.cnobi.jp/v1/blog/user/be7ccd505d1f6c989827198b5842b1c8/1767683020");
}
.cc-poster{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: #070a12;
}
.cc-poster__bg{
  position:absolute; inset:-5%;
  background-image: var(--poster-bg);
  background-size: cover;
  background-position: center;
  filter: contrast(1.06) saturate(1.05);
  transform: scale(1.02);
}
.cc-poster__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 540px at 50% 35%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(7,10,18,.45), rgba(7,10,18,.85));
}
.cc-poster__content{
  position:relative;
  width:min(880px, 90vw);
  padding: 0 14px;
  text-align:left;
  opacity:0;
  transform: translateY(10px);
}
.cc-poster__kicker{ letter-spacing:.22em; font-size:12px; opacity:.88; }
.cc-poster__title{
  margin-top:12px;
  font-size: clamp(30px, 5.6vw, 64px);
  letter-spacing:.06em;
  line-height:1.02;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}
.cc-poster__tagline{ margin-top:10px; letter-spacing:.12em; font-size:14px; color: rgba(233,238,252,.80); }

.cc-intro.is-animate2 .cc-scene--2 .cc-poster__content{
  animation: cc_copy 900ms ease forwards;
}

/* SKIP */
.cc-intro__skip{
  position: absolute;
  right: 18px;
  bottom: 18px;
  border: 1px solid rgba(140,170,255,.30);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.92);
  padding: 10px 14px;
  border-radius: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  cursor: pointer;
}
.cc-intro__skip:hover{
  background: rgba(122,166,255,.12);
  border-color: rgba(122,166,255,.45);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .cc-intro, .cc-scene{ transition:none !important; }
  .cc-intro.is-animate .cc-gate,
  .cc-intro.is-animate .cc-gate__inner::before,
  .cc-intro.is-animate .cc-gate__flare,
  .cc-intro.is-animate .cc-intro__copy,
  .cc-intro.is-animate2 .cc-poster__content{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}
/* ランダム背景レイヤー */
.cc-bg-random{
  position: fixed;
  inset: 0;
  z-index: -1;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter:
    saturate(0.9)
    contrast(0.9)
    brightness(0.65)
    blur(2px);

  transform: scale(1.05);
}

/* 白地にうっすら霧を足す */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.92),
      rgba(255,255,255,0.85)
    );
  z-index: -1;
}