/*
Theme Name: Cocoon Child - Plus One Infinity Media
Description: プラワンメディアサイト改修v3.1に基づくCocoon子テーマ。白/グレー基調＋LP由来ビビット5色アクセント。Elementor は投稿ID=154（DJアカデミーLP）のみで動作させる用途限定運用（案C）。
Theme URI: https://plusoneinfinity.com/
Template: cocoon-master
Author: Plus One Infinity
Author URI: https://plusoneinfinity.com/
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cocoon-child-plusone
*/

/* ==========================================================================
   1. CSS カスタムプロパティ（デザイントークン）
   ========================================================================== */

:root {
  /* ベースカラー（無彩色） */
  --poi-bg-primary: #FFFFFF;
  --poi-bg-secondary: #F5F5F7;
  --poi-border: #E5E5EA;
  --poi-text-primary: #1D1D1F;
  --poi-text-secondary: #6E6E73;

  /* ブランドアクセント（LP由来ビビット5色） */
  --poi-yellow: #FFC93C;
  --poi-orange: #FF6B2C;
  --poi-magenta: #E91E63;
  --poi-purple: #7B2CBF;
  --poi-blue: #2D6AE9;

  /* ホバー・派生色 */
  --poi-magenta-hover: #C41858;
  --poi-magenta-light: #FDECF2;
  --poi-orange-hover: #E85820;
  --poi-yellow-hover: #E6B333;
  --poi-purple-hover: #6521A6;
  --poi-blue-hover: #2558C7;

  /* シャドウ */
  --poi-shadow-sm: 0 1px 2px rgba(29, 29, 31, 0.06);
  --poi-shadow-md: 0 4px 12px rgba(29, 29, 31, 0.08);
  --poi-shadow-lg: 0 8px 24px rgba(29, 29, 31, 0.12);

  /* タイポグラフィ */
  --poi-font-sans-jp: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --poi-font-sans-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* レイアウト */
  --poi-radius-sm: 4px;
  --poi-radius-md: 8px;
  --poi-radius-lg: 16px;
  --poi-container-max: 1200px;
  --poi-content-max: 720px;

  /* スペーシング */
  --poi-space-1: 4px;
  --poi-space-2: 8px;
  --poi-space-3: 16px;
  --poi-space-4: 24px;
  --poi-space-5: 32px;
  --poi-space-6: 48px;
  --poi-space-7: 64px;

  /* トランジション */
  --poi-transition: 200ms ease;
}

/* ==========================================================================
   2. リセット・基本タイポグラフィ
   ========================================================================== */

body {
  background: var(--poi-bg-primary);
  color: var(--poi-text-primary);
  font-family: var(--poi-font-sans-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--poi-font-sans-jp);
  font-weight: 700;
  color: var(--poi-text-primary);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* 英字・数字の見た目統一 */
h1, h2, h3, h4, .num-strong {
  font-family: var(--poi-font-sans-jp), var(--poi-font-sans-en);
}

p {
  color: var(--poi-text-primary);
  margin: 0 0 var(--poi-space-3);
}

small, .meta, .cat-label, .post-date {
  color: var(--poi-text-secondary);
  font-size: 0.875em;
}

/* リンク：ブランドMagenta */
a {
  color: var(--poi-magenta);
  text-decoration: none;
  transition: color var(--poi-transition);
}

a:hover, a:focus {
  color: var(--poi-magenta-hover);
  text-decoration: underline;
}

/* 記事内リンクは下線を維持（可読性向上） */
.entry-content a:not(.wp-block-button__link):not(.btn):not(.cocoon-btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--poi-magenta-light);
}

.entry-content a:hover {
  text-decoration-color: var(--poi-magenta);
}

/* ==========================================================================
   3. 見出しスタイル（Cocoon 標準の見出しを上書き）
   ========================================================================== */

.entry-content h2 {
  font-size: 1.625em; /* 26px */
  border: none;
  padding: var(--poi-space-3) 0 var(--poi-space-3) var(--poi-space-3);
  margin: var(--poi-space-6) 0 var(--poi-space-4);
  background: transparent;
  border-left: 4px solid var(--poi-magenta);
  border-bottom: 1px solid var(--poi-border);
}

.entry-content h3 {
  font-size: 1.375em; /* 22px */
  border: none;
  padding: 0 0 var(--poi-space-2);
  margin: var(--poi-space-5) 0 var(--poi-space-3);
  background: transparent;
  border-bottom: 2px dotted var(--poi-orange);
}

.entry-content h4 {
  font-size: 1.125em; /* 18px */
  padding: 0 0 0 var(--poi-space-3);
  margin: var(--poi-space-4) 0 var(--poi-space-3);
  background: transparent;
  border-left: 3px solid var(--poi-purple);
}

/* ==========================================================================
   4. ヘッダー・ナビゲーション
   ========================================================================== */

.header {
  background: var(--poi-bg-primary);
  border-bottom: 1px solid var(--poi-border);
  box-shadow: none;
}

.navi {
  background: var(--poi-bg-primary);
  border-bottom: 1px solid var(--poi-border);
}

.navi .item {
  color: var(--poi-text-primary);
  font-weight: 700;
  transition: color var(--poi-transition), background var(--poi-transition);
}

.navi .item:hover {
  color: var(--poi-magenta);
  background: var(--poi-magenta-light);
}

/* カテゴリ別ナビ色（メニューアイテムに add-class で設定） */
.navi .item.cat-news    { border-top: 3px solid var(--poi-blue); }
.navi .item.cat-trends  { border-top: 3px solid var(--poi-magenta); }
.navi .item.cat-gear    { border-top: 3px solid var(--poi-orange); }
.navi .item.cat-music   { border-top: 3px solid var(--poi-purple); }
.navi .item.cat-academy { border-top: 3px solid var(--poi-yellow); }
.navi .item.cat-culture { border-top: 3px solid var(--poi-text-secondary); }

/* ==========================================================================
   5. 記事カード・アーカイブレイアウト
   ========================================================================== */

.entry-card {
  background: var(--poi-bg-primary);
  border: 1px solid var(--poi-border);
  border-radius: var(--poi-radius-md);
  box-shadow: var(--poi-shadow-sm);
  transition: box-shadow var(--poi-transition), transform var(--poi-transition);
  overflow: hidden;
}

.entry-card:hover {
  box-shadow: var(--poi-shadow-md);
  transform: translateY(-2px);
}

.entry-card-title {
  color: var(--poi-text-primary);
  font-weight: 700;
  line-height: 1.5;
}

.cat-label {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--poi-radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  background: var(--poi-text-secondary);
}

/* カテゴリ別ラベル色 */
.cat-label[data-cat="news"],    .cat-label.cat-news    { background: var(--poi-blue); }
.cat-label[data-cat="trends"],  .cat-label.cat-trends  { background: var(--poi-magenta); }
.cat-label[data-cat="gear"],    .cat-label.cat-gear    { background: var(--poi-orange); }
.cat-label[data-cat="music"],   .cat-label.cat-music   { background: var(--poi-purple); }
.cat-label[data-cat="academy"], .cat-label.cat-academy { background: var(--poi-yellow); color: var(--poi-text-primary); }
.cat-label[data-cat="culture"], .cat-label.cat-culture { background: var(--poi-text-secondary); }

/* ==========================================================================
   6. ボタン（Cocoon デフォルト＋独自スタイル）
   ========================================================================== */

.btn, .wp-block-button__link, .cocoon-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform var(--poi-transition), box-shadow var(--poi-transition), background var(--poi-transition);
  cursor: pointer;
  border: none;
}

.btn:hover, .wp-block-button__link:hover, .cocoon-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--poi-shadow-md);
  text-decoration: none;
}

/* プライマリボタン：Magenta */
.btn-primary, .wp-block-button.is-style-primary .wp-block-button__link {
  background: var(--poi-magenta);
  color: #FFFFFF;
}
.btn-primary:hover, .wp-block-button.is-style-primary .wp-block-button__link:hover {
  background: var(--poi-magenta-hover);
  color: #FFFFFF;
}

/* セカンダリボタン：Orange */
.btn-secondary, .wp-block-button.is-style-secondary .wp-block-button__link {
  background: var(--poi-orange);
  color: #FFFFFF;
}
.btn-secondary:hover, .wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background: var(--poi-orange-hover);
  color: #FFFFFF;
}

/* CTA用（無料・期間限定）：Yellow */
.btn-cta, .wp-block-button.is-style-cta .wp-block-button__link {
  background: var(--poi-yellow);
  color: var(--poi-text-primary);
}
.btn-cta:hover, .wp-block-button.is-style-cta .wp-block-button__link:hover {
  background: var(--poi-yellow-hover);
  color: var(--poi-text-primary);
}

/* 信頼系（メール講座・数値強調）：Blue */
.btn-trust, .wp-block-button.is-style-trust .wp-block-button__link {
  background: var(--poi-blue);
  color: #FFFFFF;
}
.btn-trust:hover, .wp-block-button.is-style-trust .wp-block-button__link:hover {
  background: var(--poi-blue-hover);
  color: #FFFFFF;
}

/* プレミアム系：Purple */
.btn-premium, .wp-block-button.is-style-premium .wp-block-button__link {
  background: var(--poi-purple);
  color: #FFFFFF;
}
.btn-premium:hover, .wp-block-button.is-style-premium .wp-block-button__link:hover {
  background: var(--poi-purple-hover);
  color: #FFFFFF;
}

/* アウトラインボタン */
.btn-outline {
  background: transparent;
  color: var(--poi-magenta);
  border: 2px solid var(--poi-magenta);
}
.btn-outline:hover {
  background: var(--poi-magenta);
  color: #FFFFFF;
}

/* ==========================================================================
   7. カスタムブロック：Amazon商品カード
   ========================================================================== */

.poi-amazon-card {
  background: var(--poi-bg-primary);
  border: 1px solid var(--poi-border);
  border-radius: var(--poi-radius-md);
  padding: var(--poi-space-4);
  margin: var(--poi-space-4) 0;
  box-shadow: var(--poi-shadow-sm);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--poi-space-4);
  align-items: start;
}

@media (max-width: 640px) {
  .poi-amazon-card {
    grid-template-columns: 1fr;
  }
}

.poi-amazon-card__image img {
  width: 100%;
  height: auto;
  border-radius: var(--poi-radius-sm);
}

.poi-amazon-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--poi-space-2);
}

.poi-amazon-card__title {
  font-size: 1.125em;
  font-weight: 700;
  margin: 0;
  color: var(--poi-text-primary);
}

.poi-amazon-card__specs {
  font-size: 0.875em;
  color: var(--poi-text-secondary);
  margin: 0;
}

.poi-amazon-card__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--poi-space-2);
  margin-top: var(--poi-space-2);
}

.poi-amazon-card__buttons .btn {
  padding: 10px 20px;
  font-size: 14px;
}

/* ==========================================================================
   8. カスタムブロック：比較表
   ========================================================================== */

.poi-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--poi-border);
  border-radius: var(--poi-radius-md);
  overflow: hidden;
  margin: var(--poi-space-4) 0;
  font-size: 0.9375em;
}

.poi-compare-table thead th {
  background: var(--poi-bg-secondary);
  color: var(--poi-text-primary);
  font-weight: 700;
  padding: var(--poi-space-3);
  text-align: left;
  border-bottom: 2px solid var(--poi-border);
}

.poi-compare-table thead th.is-recommended {
  background: var(--poi-magenta);
  color: #FFFFFF;
  position: relative;
}

.poi-compare-table thead th.is-recommended::before {
  content: "★ イチオシ";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--poi-yellow);
  color: var(--poi-text-primary);
  padding: 2px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.poi-compare-table tbody td {
  padding: var(--poi-space-3);
  border-bottom: 1px solid var(--poi-border);
  vertical-align: middle;
}

.poi-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.poi-compare-table tbody tr:nth-child(even) td {
  background: var(--poi-bg-secondary);
}

/* ==========================================================================
   9. カスタムブロック：注意ボックス
   ========================================================================== */

.poi-notice {
  padding: var(--poi-space-3) var(--poi-space-4);
  border-radius: var(--poi-radius-md);
  margin: var(--poi-space-4) 0;
  border-left: 4px solid var(--poi-yellow);
  background: #FFF9E5;
  color: var(--poi-text-primary);
  font-size: 0.9375em;
}

.poi-notice--info {
  border-left-color: var(--poi-blue);
  background: #EDF3FE;
}

.poi-notice--warning {
  border-left-color: var(--poi-orange);
  background: #FFF0E6;
}

.poi-notice--danger {
  border-left-color: var(--poi-magenta);
  background: var(--poi-magenta-light);
}

.poi-notice__title {
  font-weight: 700;
  margin: 0 0 var(--poi-space-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   10. カスタムブロック：CTA（体験レッスン／メール講座）
   ========================================================================== */

.poi-cta {
  padding: var(--poi-space-6) var(--poi-space-4);
  border-radius: var(--poi-radius-lg);
  margin: var(--poi-space-6) 0;
  text-align: center;
  color: #FFFFFF;
}

.poi-cta--academy {
  background: linear-gradient(135deg, var(--poi-yellow) 0%, var(--poi-orange) 100%);
  color: var(--poi-text-primary);
}

.poi-cta--email {
  background: linear-gradient(135deg, var(--poi-blue) 0%, var(--poi-purple) 100%);
  color: #FFFFFF;
}

.poi-cta__title {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0 0 var(--poi-space-3);
  line-height: 1.4;
}

.poi-cta__lead {
  margin: 0 0 var(--poi-space-4);
  font-size: 1em;
  opacity: 0.95;
}

.poi-cta__button {
  display: inline-block;
  padding: 14px 40px;
  background: #FFFFFF;
  color: var(--poi-text-primary);
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--poi-transition), box-shadow var(--poi-transition);
}

.poi-cta__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--poi-shadow-lg);
  color: var(--poi-text-primary);
  text-decoration: none;
}

/* ==========================================================================
   11. カスタムブロック：著者プロフィール
   ========================================================================== */

.poi-author-box {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--poi-space-4);
  padding: var(--poi-space-4);
  background: var(--poi-bg-secondary);
  border-radius: var(--poi-radius-md);
  margin: var(--poi-space-5) 0;
  align-items: center;
}

@media (max-width: 480px) {
  .poi-author-box {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.poi-author-box__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--poi-magenta);
}

.poi-author-box__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poi-author-box__name {
  font-size: 1.125em;
  font-weight: 700;
  margin: 0 0 var(--poi-space-2);
}

.poi-author-box__bio {
  font-size: 0.9375em;
  color: var(--poi-text-secondary);
  margin: 0 0 var(--poi-space-2);
  line-height: 1.6;
}

.poi-author-box__sns {
  display: flex;
  gap: var(--poi-space-2);
}

.poi-author-box__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--poi-magenta);
  color: #FFFFFF;
  transition: background var(--poi-transition);
}

.poi-author-box__sns a:hover {
  background: var(--poi-magenta-hover);
  color: #FFFFFF;
  text-decoration: none;
}

/* ==========================================================================
   12. アフィリエイト表記（自動挿入）
   ========================================================================== */

.poi-affiliate-disclosure {
  padding: var(--poi-space-3);
  background: var(--poi-bg-secondary);
  border: 1px dashed var(--poi-border);
  border-radius: var(--poi-radius-sm);
  color: var(--poi-text-secondary);
  font-size: 0.8125em;
  margin: var(--poi-space-4) 0;
  line-height: 1.6;
}

.poi-affiliate-disclosure::before {
  content: "ℹ ";
  color: var(--poi-blue);
  font-weight: 700;
}

/* ==========================================================================
   13. SNSシェアボタン
   ========================================================================== */

.poi-share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--poi-space-2);
  padding: var(--poi-space-3) 0;
  margin: var(--poi-space-4) 0;
  border-top: 1px solid var(--poi-border);
  border-bottom: 1px solid var(--poi-border);
}

.poi-share a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--poi-radius-sm);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--poi-transition);
}

.poi-share a:hover {
  opacity: 0.85;
  color: #FFFFFF;
  text-decoration: none;
}

.poi-share a.share-x        { background: #000000; }
.poi-share a.share-facebook { background: #1877F2; }
.poi-share a.share-line     { background: #06C755; }
.poi-share a.share-copy     { background: var(--poi-text-secondary); }

/* ==========================================================================
   14. トップページヒーロー
   ========================================================================== */

.poi-hero {
  position: relative;
  padding: var(--poi-space-7) var(--poi-space-4);
  background: linear-gradient(180deg, var(--poi-bg-secondary) 0%, var(--poi-bg-primary) 100%);
  text-align: center;
  margin-bottom: var(--poi-space-6);
}

.poi-hero__title {
  font-size: 2em;
  font-weight: 900;
  margin: 0 0 var(--poi-space-3);
  color: var(--poi-text-primary);
}

.poi-hero__title mark {
  background: linear-gradient(180deg, transparent 60%, var(--poi-yellow) 60%);
  color: var(--poi-text-primary);
  padding: 0 4px;
}

.poi-hero__lead {
  font-size: 1.125em;
  color: var(--poi-text-secondary);
  max-width: 640px;
  margin: 0 auto var(--poi-space-5);
}

/* ==========================================================================
   15. フォーム（Contact Form 7 / WPForms）
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  padding: 12px 16px;
  border: 1px solid var(--poi-border);
  border-radius: var(--poi-radius-sm);
  font-family: var(--poi-font-sans-jp);
  font-size: 16px;
  color: var(--poi-text-primary);
  background: var(--poi-bg-primary);
  width: 100%;
  transition: border-color var(--poi-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--poi-magenta);
}

.wpcf7-submit,
.wpforms-submit,
input[type="submit"] {
  padding: 14px 32px;
  border-radius: 50px;
  background: var(--poi-magenta);
  color: #FFFFFF;
  border: none;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--poi-transition), transform var(--poi-transition);
}

.wpcf7-submit:hover,
.wpforms-submit:hover,
input[type="submit"]:hover {
  background: var(--poi-magenta-hover);
  transform: translateY(-2px);
}

/* ==========================================================================
   16. Elementor スコープ制御（v1.0.2で修正）
   ========================================================================== */

/* Elementor CSS/JS の読込制御は functions.php の wp_dequeue_style で実施済み。
   ホワイトリスト外のページには Elementor CSS 自体が読み込まれないため、
   ここでCSS変数を transparent にリセットする必要はない。
   （v1.0.1では body:not(.page-id-154) で全リセットしていたが、
   Elementor動作ページのボタン文字色まで透明化する副作用があったため削除） */

/* Elementor フルワイド動作ページ用の container 制約解除 */
body.page-id-154,
body.page-id-366,
body.page-id-72,
body.page-id-67,
body.page-id-64,
body.page-id-57 {
  overflow-x: hidden;
}

body.page-id-154 .main,
body.page-id-366 .main {
  max-width: 100%;
  padding: 0;
}

/* ==========================================================================
   17. モバイル最適化
   ========================================================================== */

@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.75;
  }

  .entry-content h2 {
    font-size: 1.375em;
    padding: var(--poi-space-2) 0 var(--poi-space-2) var(--poi-space-3);
    margin: var(--poi-space-5) 0 var(--poi-space-3);
  }

  .entry-content h3 {
    font-size: 1.1875em;
    margin: var(--poi-space-4) 0 var(--poi-space-3);
  }

  .poi-hero__title {
    font-size: 1.5em;
  }

  .poi-hero {
    padding: var(--poi-space-5) var(--poi-space-3);
  }

  .btn, .wp-block-button__link, .cocoon-btn {
    padding: 12px 24px;
    font-size: 15px;
  }
}

/* ==========================================================================
   18. アクセシビリティ・prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* フォーカスリング（キーボード操作対応） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--poi-magenta);
  outline-offset: 2px;
}

/* ==========================================================================
   19. 印刷スタイル
   ========================================================================== */

@media print {
  .header, .navi, .footer, .poi-share, .poi-cta {
    display: none !important;
  }
  body {
    color: #000;
    background: #FFF;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
}