@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

/* ============================================================
   0. 共通変数（--iosu- プレフィックスで統一。元テーマ側の変数と衝突しない）
   ============================================================ */
:root {
  /* 基本カラー */
  --iosu-fg: #1d1d1f;
  --iosu-sub: #6e6e73;
  --iosu-faint: #86868b;
  --iosu-bg-page: #f5f5f7;
  --iosu-accent: #0071e3;
  --iosu-border: #e5e5e7;
  --iosu-white: #ffffff;

  /* グラスモーフィズム（すりガラス） */
  --iosu-glass-bg: rgba(255, 255, 255, 0.62);
  --iosu-glass-bg-strong: rgba(255, 255, 255, 0.8);
  --iosu-glass-border: rgba(255, 255, 255, 0.45);
  --iosu-glass-blur: 20px;
  --iosu-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.10), 0 1px 3px rgba(0, 0, 0, 0.04);

  /* 角丸スケール */
  --iosu-radius-s: 10px;
  --iosu-radius-m: 16px;
  --iosu-radius-l: 20px;


  /* h2 / h3 / h4 用グラデーション（紫→青→ティールへ続くクールな寒色スペクトラム） */
  --iosu-h2-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --iosu-h3-gradient: linear-gradient(120deg, #0071e3 0%, #00c6ff 100%);
  --iosu-h4-gradient: linear-gradient(120deg, #00c2a8 0%, #0071e3 100%);
}


/* ============================================================
   1. サイト全体（ロゴ・サイト名）※記事ページ以外にも影響するため元の値のまま維持
   ============================================================ */
.logo-text {
  padding: 0px;
}

.site-name-text {
  margin: 0 0 1.5rem;
  color: var(--iosu-fg);
  font-family: var(--iosu-font);
  font-size: 50px !important; /* 元のサイズを維持 */
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-align: left;
}




/* ============================================================
   2. ベースタイポグラフィ（記事ページ／サイズは変更なし）
   ============================================================ */
body {

  font-family: var(--iosu-font);
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--iosu-fg);
  background: var(--iosu-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.article,
.entry-content,
.entry-content p,
.body.article {
  font-family: var(--iosu-font);
  color: var(--iosu-fg);
}

.article a {
  color: var(--iosu-accent);
}

.article {
  margin: 40px auto 80px;
  padding: 0 32px;
  background: transparent;
}

.article-header {
  padding: 48px 0 32px;
  text-align: left;
}


/* ============================================================
   3. 記事タイトル（h1）※グラデーションなし・サイズは変更なし
   ============================================================ */
.article h1,
.article .entry-title {
  margin: 0 0 0.6em;
  color: var(--iosu-fg);
  font-family: var(--iosu-font);
  font-size: clamp(32px, 5vw, 56px); /* 元のサイズを維持 */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.article .date-tags {
  margin-top: 20px;
  color: var(--iosu-sub);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.article .post-date,
.article .post-update {
  margin-right: 14px;
}


/* ============================================================
   4. 見出し h2・h3・h4（クールなグラデーションカラーで統一／サイズは変更なし）
   ============================================================ */
.article h2 {
  margin: 1.5em 0 0.8em;
  padding: 1.2em 0;
  font-size: 55px; /* 元のサイズを維持 */
  font-weight: 600;
  background: var(--iosu-h2-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article h3 {
  margin: 1.3em 0 0.6em;
  padding: 0.8em 0;
  font-size: 45px; /* 元のサイズを維持 */
  font-weight: 600;
  background: var(--iosu-h3-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
	border:none;
}

.article h4,
.article h5,
.article h6 {
  margin: 1em 0 0.5em;
  padding: 0.6em 0;
  font-size: 40px; /* 元のサイズを維持 */
  font-weight: 600;
  background: var(--iosu-h4-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
	border:none;
}


/* ============================================================
   5. 本文・リスト
   ============================================================ */
.entry-content {
  margin-top: 1.5em;
  margin-bottom: 3em;
  line-height: 1.8;
 font-size:30px;
}

.article .entry-content ul,
.article .entry-content ol {
  margin: 1.5em 0 2em;
  padding-left: 1.5em;
}

.article .entry-content li {
  margin: 0.65em 0;
  line-height: 1.9;
}

.article strong {
  color: var(--iosu-fg);
}


/* ============================================================
   6. 目次（TOC）※グラスモーフィズム
   ============================================================ */
.article .toc {
  margin: 0 auto 60px;
  padding: 0;
  background: var(--iosu-glass-bg);
  border: 1px solid var(--iosu-glass-border);
  border-radius: var(--iosu-radius-l);
  box-shadow: var(--iosu-glass-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(var(--iosu-glass-blur));
  backdrop-filter: saturate(180%) blur(var(--iosu-glass-blur));
  font-size: 0.9rem; /* 元のサイズを維持 */
  line-height: 1.7;
  color: var(--iosu-fg);
  overflow: hidden;
}

.article .toc-title {
  display: block;
  padding: 18px 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--iosu-fg);
  cursor: pointer;
}

.article .toc-title::after {
  color: var(--iosu-sub);
  font-size: 12px;
}

.article .toc-content {
  padding: 0 22px 20px;
}

.article .toc-list {
  margin: 0;
  padding-left: 22px;
}

.article .toc-list li {
  margin: 7px 0;
  line-height: 1.7;
}

.article .toc-list a {
  color: var(--iosu-fg);
  border: none;
}

.article .toc-list a:hover {
  color: var(--iosu-accent);
}


/* ============================================================
   7. 画像
   ============================================================ */
.article .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--iosu-radius-m);
}

.article .wp-block-image {
  margin: 2.5em 0;
}


/* ============================================================
   8. 引用（blockquote）※グラスモーフィズム
   ============================================================ */
.article blockquote {
  margin: 2.5em 0;
  padding: 24px 28px;
  background: var(--iosu-glass-bg);
  border: none;
  border-left: 3px solid var(--iosu-accent);
  border-radius: 0 var(--iosu-radius-m) var(--iosu-radius-m) 0;
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
  color: var(--iosu-sub);
}


/* ============================================================
   9. テーブル ※グラスモーフィズム
   ============================================================ */
.article table {
  width: 100%;
  margin: 2.5em 0;
  border-collapse: collapse;
  background: var(--iosu-glass-bg);
  border: 1px solid var(--iosu-glass-border);
  border-radius: var(--iosu-radius-m);
  overflow: hidden;
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
}

.article th,
.article td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--iosu-border);
  border-right: 1px solid var(--iosu-border);
}

.article th {
  background: rgba(255, 255, 255, 0.35);
  color: var(--iosu-fg);
  font-weight: 600;
  text-align: left;
}

.article tr:last-child td {
  border-bottom: none;
}


/* ============================================================
   10. Cocoonのボックス系・カード類 ※すべてグラスモーフィズムに統一
   ============================================================ */
.article .blank-box,
.article .information-box,
.article .question-box,
.article .alert-box,
.article .memo-box,
.article .caption-box,
.article .label-box,
.article .common-icon-box,
.article .entry-card,
.article .related-entry-card {
  background: var(--iosu-glass-bg);
  border: 1px solid var(--iosu-glass-border);
  border-radius: var(--iosu-radius-m);
  box-shadow: var(--iosu-glass-shadow);
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
  padding: 1.2em;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.article .entry-card:hover,
.article .related-entry-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.article .entry-card-title,
.article .related-entry-card-title {
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 0.8em;
  -webkit-line-clamp: 2;
}

.article .entry-card-snippet,
.article .related-entry-card-snippet {
  color: var(--iosu-sub);
  line-height: 1.6;
  -webkit-line-clamp: 3;
  margin: 0 0 1em;
}

.article .carousel-entry-card-thumb,
.article .entry-card-thumb,
.article .related-entry-card-thumb {
  margin-bottom: 1em;
  border-radius: var(--iosu-radius-s);
  overflow: hidden;
}


/* ============================================================
   11. カテゴリー・タグ ※グラスモーフィズム
   ============================================================ */
.article .cat-link,
.article .cat-label {
  display: inline-block;
  padding: 7px 14px;
  background: rgba(0, 113, 227, 0.85);
  color: #fff;
  border-radius: 999px;
  font-size: 12px; /* 元のサイズを維持 */
  margin-right: 6px;
  margin-bottom: 6px;
  text-decoration: none;
  border: none;
  transition: opacity 0.2s ease;
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
}

.article .cat-link:hover {
  opacity: 0.75;
  color: #fff;
}

.article .tag-link {
  display: inline-block;
  padding: 7px 14px;
  background: var(--iosu-glass-bg);
  color: var(--iosu-fg);
  border: 1px solid var(--iosu-glass-border);
  border-radius: 999px;
  font-size: 12px; /* 元のサイズを維持 */
  margin-right: 6px;
  margin-bottom: 6px;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
}

.article .tag-link:hover {
  background: var(--iosu-glass-bg-strong);
  border-color: var(--iosu-border);
}

.article .entry-categories {
  margin-top: 30px;
}


/* ============================================================
   12. ボタン ※グラスモーフィズム
   ============================================================ */
.article .btn-wrap a,
.article .btn-key-color,
.article .btn-wrap.btn-wrap-key-color > a {
  display: inline-block;
  background: rgba(0, 113, 227, 0.85);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 600;
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.article .btn-wrap a:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.sns-follow-buttons a,
.sns-share-buttons a {
  border-radius: 999px;
}


/* ============================================================
   13. 著者ボックス ※グラスモーフィズム
   ============================================================ */
.article .author-box {
  margin-top: 70px;
  padding: 30px;
  background: var(--iosu-glass-bg);
  border: 1px solid var(--iosu-glass-border);
  border-radius: var(--iosu-radius-l);
  box-shadow: var(--iosu-glass-shadow);
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
  font-family: var(--iosu-font);
  color: var(--iosu-fg);
}

.article .author-thumb img {
  border-radius: 50%;
}

.article .author-name a {
  color: var(--iosu-fg);
  font-weight: 650;
  text-decoration: none;
}

.article .author-description {
  color: var(--iosu-sub);
  font-size: 14px; /* 元のサイズを維持 */
  line-height: 1.8;
}


/* ============================================================
   14. SNSボタン
   ============================================================ */
.article .sns-follow-buttons {
  display: flex;
  gap: 8px;
}

.article .sns-button {
  border-radius: 50%;
  transition: opacity 0.2s ease;
}

.article .sns-button:hover {
  opacity: 0.65;
}


/* ============================================================
   15. コメント返信リンク ※グラスモーフィズム
   ============================================================ */
.article .comment-reply-link {
  color: var(--iosu-fg);
  background: var(--iosu-glass-bg);
  border: 1px solid var(--iosu-glass-border);
  padding: 4px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
}

.article .comment-reply-link:hover {
  background: var(--iosu-glass-bg-strong);
}


/* ============================================================
   16. コードブロック ※グラスモーフィズム
   ============================================================ */
.article pre {
  background: var(--iosu-glass-bg);
  padding: 1.5em;
  border-radius: var(--iosu-radius-m);
  border: 1px solid var(--iosu-glass-border);
  overflow-x: auto;
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
}


/* ============================================================
   17. フッターの投稿者表示
   ============================================================ */
.footer-meta,
.footer-meta a {
  color: var(--iosu-sub);
  font-family: var(--iosu-font);
}


/* ============================================================
   18. YouTube動画 ※派手な動くグラデーション枠 → 落ち着いたグラス枠に統一
   ============================================================ */
.article .video-container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 40px auto;
  padding: 20px;
  box-sizing: border-box;
  background: var(--iosu-glass-bg);
  border: 1px solid var(--iosu-glass-border);
  border-radius: var(--iosu-radius-m);
  box-shadow: var(--iosu-glass-shadow);
  -webkit-backdrop-filter: blur(var(--iosu-glass-blur));
  backdrop-filter: blur(var(--iosu-glass-blur));
}

.article .video {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.article .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .article .video-container {
    padding: 12px;
    margin: 20px auto;
    border-radius: var(--iosu-radius-s);
  }

  .article .video {
    margin: 16px auto;
    border-radius: 8px;
  }
}


/* ============================================================
   19. レスポンシブ（サイズは元の指定値を維持）
   ============================================================ */
@media screen and (max-width: 834px) {
  .article {
    margin: 0 auto 60px;
    padding: 0 20px;
  }

  .article-header {
    padding: 34px 0 25px;
  }

  .article .entry-title {
    font-size: 32px;
    line-height: 1.2;
  }

  .article .entry-content {
    font-size: 16px;
    line-height: 1.9;
  }

  .article .entry-content p {
    line-height: 1.9;
  }

  .article .entry-content h2 {
    margin-top: 3.5em;
    font-size: 25px;
  }

  .article .entry-content h3 {
    margin-top: 3em;
    font-size: 21px;
  }

  .article .entry-content h4 {
    font-size: 18px;
  }

  .article .toc {
    border-radius: 14px;
  }

  .article .author-box {
    padding: 22px;
    border-radius: 16px;
  }
}

@media screen and (max-width: 480px) {
  .article {
    padding: 0 16px;
  }

  .article .entry-title {
    font-size: 29px;
  }

  .article .entry-content {
    font-size: 16px;
  }

  .article .entry-content h2 {
    font-size: 23px;
  }

  .article .entry-content h3 {
    font-size: 20px;
  }

  .article .toc-title {
    padding: 16px 18px;
  }

  .article .toc-content {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* ============================================================
   20. 選択色
   ============================================================ */
.article ::selection {
  background: rgba(0, 113, 227, 0.18);
  color: var(--iosu-fg);
}



.cat-label{

  border: none !important;
	border-radius: 14px;
}