/*
Theme Name: 縁詠み Child
Template: cocoon-master
Version: 1.2
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600;700&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root {
  --en-bg: #FAF9F7;
  --en-primary: #A898C2;
  --en-secondary: #C8BAD8;
  --en-accent: #8070A8;
  --en-text: #2A2520;
  --en-text-light: #9A9090;
  --en-border: #E8E2F2;
  --en-card: #FFFFFF;
}

/* BASE */
body {
  background-color: var(--en-bg) !important;
  color: var(--en-text) !important;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'YuGothic', sans-serif !important;
  font-weight: 300 !important;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Noto Serif JP', 'Yu Mincho', serif; font-weight: 400; }
a { color: var(--en-accent); text-decoration: none; }
a:hover { color: var(--en-primary); }

/* HEADER */
#header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--en-border) !important;
  box-shadow: none !important;
}
#site-name { display: flex !important; align-items: center !important; gap: 10px !important; }
#site-name::before {
  content: '';
  display: inline-block;
  width: 34px; height: 34px;
  background: url('http://waves-switch-lab.com/wp-content/themes/cocoon-child/images/logo-mark.png') center/contain no-repeat;
  flex-shrink: 0;
}
#site-name a {
  color: var(--en-text) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em;
}
#site-description { color: var(--en-text-light) !important; font-size: 0.72rem !important; letter-spacing: 0.08em; }

/* NAV */
#navi { background: #FFFFFF !important; border-bottom: 1px solid var(--en-border) !important; }
.navi-in > ul > li > a {
  color: var(--en-text-light) !important;
  font-size: 0.82rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.navi-in > ul > li > a:hover { color: var(--en-accent) !important; }
.navi-in > ul > li.current-menu-item > a { color: var(--en-accent) !important; border-bottom: 1px solid var(--en-accent) !important; }

/* ═══ HERO - full-width background image ═══ */
#en-yomi-hero {
  background-color: #FAF8F4;
  background-image: var(--en-hero-img);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  min-height: 440px;
}
/* Gradient: solid cream on left → fades to transparent on right */
#en-yomi-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #FAF8F4 0%,
    rgba(250,248,244,0.97) 28%,
    rgba(250,248,244,0.80) 48%,
    rgba(250,248,244,0.25) 70%,
    transparent 100%
  );
  z-index: 0;
}
.en-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 36px;
  position: relative;
  z-index: 1;
  min-height: 440px;
  display: flex;
  align-items: center;
}
.en-hero-text { width: 50%; max-width: 480px; }
.en-hero-eyebrow {
  display: block;
  font-size: 0.72rem;
  color: var(--en-primary);
  letter-spacing: 0.22em;
  font-weight: 400;
  margin-bottom: 18px;
  font-family: 'Noto Serif JP', serif;
}
.en-hero-title {
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--en-text);
  line-height: 1.55;
  margin: 0 0 20px;
  letter-spacing: 0.04em;
  font-family: 'Noto Serif JP', serif;
}
.en-hero-subtitle {
  font-size: 0.85rem;
  color: var(--en-text-light);
  line-height: 2.0;
  margin: 0 0 36px;
  font-weight: 300;
}
.en-hero-cta {
  display: inline-block;
  background: var(--en-accent) !important;
  color: #fff !important;
  padding: 13px 36px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none !important;
  transition: background 0.25s, transform 0.2s;
  letter-spacing: 0.08em;
  font-family: 'Noto Serif JP', serif;
}
.en-hero-cta:hover { background: var(--en-primary) !important; transform: translateY(-2px); }

/* CATEGORY ICONS */
#en-yomi-cats { background: #FFFFFF; border-bottom: 1px solid var(--en-border); padding: 20px; }
.en-cats-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: center; align-items: flex-start; gap: 4px; flex-wrap: wrap;
}
.en-cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none !important; color: var(--en-text) !important;
  padding: 8px 10px; border-radius: 8px; transition: background 0.2s; min-width: 76px;
}
.en-cat-item:hover { background: var(--en-bg); }
.en-cat-item:hover .en-cat-circle { border-color: var(--en-secondary); }
.en-cat-circle {
  width: 54px; height: 54px; background: #FFFFFF;
  border: 1px solid var(--en-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s; overflow: hidden; padding: 12px; box-sizing: border-box;
}
.en-cat-circle img { width: 100%; height: 100%; object-fit: contain; display: block; }
.en-cat-label { font-size: 0.68rem; color: var(--en-text-light); text-align: center; line-height: 1.4; font-weight: 300; }

/* CONTENT */
#container { background: var(--en-bg) !important; }
#contents, #content, #content-in, .content-in { background: var(--en-bg) !important; }

/* ARTICLE CARDS */
.entry-card, .a-wrap {
  background: var(--en-card) !important; border: 1px solid var(--en-border) !important;
  border-radius: 12px !important; box-shadow: 0 1px 8px rgba(120,100,160,0.06) !important;
  transition: box-shadow 0.25s, transform 0.25s !important; overflow: hidden !important;
}
.entry-card:hover, .a-wrap:hover {
  box-shadow: 0 4px 18px rgba(120,100,160,0.14) !important; transform: translateY(-3px) !important;
}
.entry-card-content { padding: 14px 16px 18px !important; }
.entry-card-title a, .entry-title a {
  color: var(--en-text) !important; font-size: 0.9rem !important; line-height: 1.6;
  font-weight: 400 !important; font-family: 'Noto Serif JP', serif;
}
.entry-card-title a:hover { color: var(--en-accent) !important; }
.entry-card-meta, .date { font-size: 0.75rem !important; color: var(--en-text-light) !important; }
.cat-label, .card-cat-label {
  background: var(--en-secondary) !important; color: #fff !important;
  border-radius: 3px !important; font-size: 0.68rem !important; padding: 2px 7px !important;
}

/* SIDEBAR */
#sidebar { background: transparent !important; }
.sidebar-widget-area > li, #sidebar .widget {
  background: var(--en-card) !important; border: 1px solid var(--en-border) !important;
  border-radius: 12px !important; padding: 20px !important; margin-bottom: 16px !important;
}
.widget-title, .sidebar-widget-area .widget-title {
  color: var(--en-text) !important; font-size: 0.9rem !important; font-weight: 400 !important;
  font-family: 'Noto Serif JP', serif !important; border-left: 2px solid var(--en-primary) !important;
  padding-left: 10px !important; margin-bottom: 14px !important; background: transparent !important;
}



/* MOBILE */
@media (max-width: 768px) {
  #en-yomi-hero {
    background-position: right bottom;
    min-height: 300px;
  }
  #en-yomi-hero::before {
    background: rgba(250,248,244,0.92);
  }
  .en-hero-inner { padding: 44px 24px; min-height: 300px; }
  .en-hero-text { width: 100%; max-width: 100%; }
  .en-hero-title { font-size: 1.55rem; }
  .en-hero-subtitle { font-size: 0.82rem; }
  .en-cat-item { min-width: 60px; padding: 6px 6px; }
  .en-cat-circle { width: 46px; height: 46px; padding: 10px; }
  .en-cat-label { font-size: 0.62rem; }
}

/* FOOTER - botanical background image */
#footer {
  background-color: #F5EFE8 !important;
  background-image: url('http://waves-switch-lab.com/wp-content/themes/cocoon-child/images/footer-bg.png') !important;
  background-size: cover !important;
  background-position: bottom center !important;
  background-repeat: no-repeat !important;
  border-top: 1px solid var(--en-border) !important;
  position: relative;
}
#footer a { color: var(--en-text-light) !important; }
#footer a:hover { color: var(--en-accent) !important; }
.footer-copyright { font-size: 0.75rem !important; color: var(--en-text-light) !important; }

/* CATEGORY ICONS - larger */
#en-yomi-cats { padding: 28px 20px; }
.en-cats-inner { gap: 8px; }
.en-cat-item { min-width: 86px; padding: 8px 12px; gap: 8px; }
.en-cat-circle { width: 68px; height: 68px; padding: 14px; }
.en-cat-label { font-size: 0.78rem; }
@media (max-width: 768px) {
  .en-cat-item { min-width: 66px; padding: 6px 6px; }
  .en-cat-circle { width: 54px; height: 54px; padding: 11px; }
  .en-cat-label { font-size: 0.68rem; }
}

/* HERO SIZE FIX */
#en-yomi-hero { min-height: 380px !important; }
#en-yomi-hero::before { min-height: 380px; }
.en-hero-inner { min-height: 380px !important; padding: 60px 36px !important; }
.en-hero-title {
  font-size: 2.4rem !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
}
@media (max-width: 768px) {
  #en-yomi-hero { min-height: 260px !important; }
  .en-hero-inner { min-height: 260px !important; padding: 40px 24px !important; }
  .en-hero-title { font-size: 1.55rem !important; }
}

/* ═══ HERO REWRITE: img absolute right ═══ */
#en-yomi-hero {
  background-color: #FAF8F4 !important;
  background-image: none !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 380px !important;
}
#en-yomi-hero::before { display: none !important; }

/* 右半分に絶対配置された写真 */
.en-hero-photo {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 52% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: block !important;
}
.en-hero-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  display: block !important;
}
/* 左端グラデーション（テキストとのブレンド） */
.en-hero-photo::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 35% !important; height: 100% !important;
  background: linear-gradient(to right, #FAF8F4 0%, transparent 100%) !important;
  z-index: 1 !important;
}

.en-hero-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 60px 36px !important;
  position: relative !important;
  z-index: 1 !important;
  min-height: 380px !important;
  display: flex !important;
  align-items: center !important;
}
/* テキストエリア: 48%幅、文字折り返し対策 */
.en-hero-text {
  width: 48% !important;
  max-width: 100% !important;
}
.en-hero-title {
  font-size: 2.4rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.6 !important;
  margin: 0 0 18px !important;
}

@media (max-width: 768px) {
  #en-yomi-hero { min-height: auto !important; }
  .en-hero-photo {
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
  }
  .en-hero-inner {
    min-height: auto !important;
    padding: 40px 24px !important;
    flex-direction: column !important;
  }
  .en-hero-text { width: 100% !important; }
  .en-hero-title { font-size: 1.55rem !important; }
}

/* テキスト幅を広げて折り返し解消 */
.en-hero-text { width: 52% !important; }

/* カテゴリアイコン拡大 */
.en-cat-circle { width: 76px !important; height: 76px !important; padding: 15px !important; }
.en-cat-item { min-width: 90px !important; }
.en-cat-label { font-size: 0.82rem !important; }
@media (max-width: 768px) {
  .en-cat-circle { width: 54px !important; height: 54px !important; padding: 11px !important; }
  .en-cat-item { min-width: 64px !important; }
  .en-cat-label { font-size: 0.68rem !important; }
}

/* タイトル折り返し最終修正 */
.en-hero-text {
  width: 50% !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}
.en-hero-title {
  font-size: 2.2rem !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}
@media (max-width: 768px) {
  .en-hero-text { width: 100% !important; padding-right: 0 !important; }
  .en-hero-title { font-size: 1.55rem !important; }
}

/* NAV 一行表示 */
.navi-in > ul { flex-wrap: nowrap !important; white-space: nowrap !important; }
.navi-in > ul > li { flex-shrink: 1 !important; }
.navi-in > ul > li > a {
  font-size: 0.78rem !important;
  padding: 14px 10px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}


/* ============================================
   SNSシェアボタン・フォローボタン 非表示
   ============================================ */
.sns-share,
.sns-share-buttons,
.follow-button-wrap,
.follow-us,
.author-box,
.post-navi { display: none !important; }

/* ============================================
   記事デザイン改善
   ============================================ */

/* 本文全体 */
.entry-content {
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: #2A2520 !important;
}

/* H2 ---- ラベル型（左丸帯） */
.entry-content h2 {
  position: relative;
  background: linear-gradient(135deg, #A898C2 0%, #8B7AB5 100%) !important;
  color: #fff !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  padding: 0.75em 1.2em 0.75em 1.5em !important;
  border-radius: 4px 4px 4px 4px !important;
  margin: 2.5em 0 0.8em !important;
  border: none !important;
  letter-spacing: 0.03em !important;
}
.entry-content h2::before {
  content: '' !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  background: rgba(255,255,255,0.7) !important;
  border-radius: 50% !important;
  margin-right: 0.6em !important;
  vertical-align: middle !important;
  margin-top: -2px !important;
}

/* H3 ---- 左ボーダー型 */
.entry-content h3 {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #2A2520 !important;
  padding: 0.5em 0.8em !important;
  margin: 2em 0 0.7em !important;
  border-left: 4px solid #A898C2 !important;
  border-bottom: 1px solid #e8e4ef !important;
  background: transparent !important;
}

/* テーブル */
.entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5em 0 !important;
  font-size: 0.92rem !important;
  box-shadow: 0 1px 4px rgba(168,152,194,0.15) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.entry-content table th {
  background: #A898C2 !important;
  color: #fff !important;
  padding: 0.65em 1em !important;
  font-weight: 600 !important;
  text-align: left !important;
  border: 1px solid #9888B2 !important;
}
.entry-content table td {
  padding: 0.6em 1em !important;
  border: 1px solid #e4dff0 !important;
  vertical-align: top !important;
}
.entry-content table tr:nth-child(even) td {
  background: #f5f2fa !important;
}
.entry-content table tr:hover td {
  background: #ede8f5 !important;
}

/* 箇条書き（ul） */
.entry-content ul {
  padding-left: 0 !important;
  list-style: none !important;
  margin: 1em 0 1.2em !important;
}
.entry-content ul li {
  padding: 0.35em 0 0.35em 1.6em !important;
  position: relative !important;
  line-height: 1.8 !important;
}
.entry-content ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0.3em !important;
  top: 0.72em !important;
  width: 7px !important;
  height: 7px !important;
  background: #A898C2 !important;
  border-radius: 50% !important;
}

/* 番号リスト（ol） */
.entry-content ol {
  padding-left: 1.5em !important;
  margin: 1em 0 1.2em !important;
}
.entry-content ol li {
  padding: 0.3em 0 !important;
  line-height: 1.8 !important;
}

/* 強調テキスト */
.entry-content strong {
  color: #6A5898 !important;
  font-weight: 700 !important;
}



/* hr（区切り線） */
.entry-content hr {
  border: none !important;
  border-top: 1px solid #e4dff0 !important;
  margin: 2em 0 !important;
}

/* フォローボタン非表示 */
.sns-follow,
.sns-follow-buttons,
.mobile-follow-button { display: none !important; }

/* endy-decoration-v1 */

/* =========================================
   縁詠み - 記事装飾スタイル（上位サイト準拠）
   ========================================= */

/* --- ポイントボックス --- */
.point-box {
  background-color: #fdf6ff;
  border-left: 5px solid #9b59b6;
  padding: 14px 16px 14px 72px;
  margin: 24px 0;
  border-radius: 4px;
  position: relative;
  line-height: 1.8;
}
.point-box::before {
  content: "POINT";
  position: absolute;
  left: 10px;
  top: 14px;
  background-color: #9b59b6;
  color: #fff;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

/* --- 注意ボックス --- */
.caution-box {
  background-color: #fff8f8;
  border-left: 5px solid #e74c3c;
  padding: 14px 16px 14px 60px;
  margin: 24px 0;
  border-radius: 4px;
  position: relative;
  line-height: 1.8;
}
.caution-box::before {
  content: "注意";
  position: absolute;
  left: 10px;
  top: 14px;
  background-color: #e74c3c;
  color: #fff;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
}

/* --- まとめボックス --- */
.summary-box {
  background-color: #f9f4ff;
  border: 2px solid #9b59b6;
  padding: 20px 22px;
  margin: 28px 0;
  border-radius: 6px;
}
.summary-box-title {
  display: block;
  font-weight: 700;
  color: #9b59b6;
  font-size: 15px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d9b3ff;
}

/* --- チェックリスト --- */
.check-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 16px 0;
}
.check-list li {
  padding: 7px 4px 7px 32px !important;
  position: relative;
  border-bottom: 1px dotted #e8dff2;
  line-height: 1.7;
}
.check-list li:last-child { border-bottom: none; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 7px;
  background-color: #9b59b6;
  color: #fff;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

/* --- マーカー強調 --- */
.marker {
  background: linear-gradient(transparent 55%, #ffe066 55%);
  padding: 0 2px;
}
.marker-pink {
  background: linear-gradient(transparent 55%, #ffb3c6 55%);
  padding: 0 2px;
}

/* --- テーブル自動スタイル --- */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.6;
}
.entry-content table th {
  background-color: #7d3c98;
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  border: 1px solid #9b59b6;
  font-weight: 700;
}
.entry-content table td {
  padding: 10px 14px;
  border: 1px solid #e0d0f0;
}
.entry-content table tbody tr:nth-child(even) {
  background-color: #fdf6ff;
}
.entry-content table tbody tr:hover {
  background-color: #f5eaff;
}

/* --- 関連記事ボックス --- */
.related-posts {
  background-color: #f9f4ff !important;
  border: 1px solid #d9b3ff !important;
  border-radius: 6px !important;
  padding: 16px 20px !important;
  margin: 28px 0 !important;
}
.related-posts p {
  margin: 0 0 10px 0 !important;
  font-size: 13px !important;
  color: #7d3c98 !important;
  font-weight: 700 !important;
}
.related-posts ul {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}
.related-posts ul li {
  margin-bottom: 8px !important;
  padding-left: 18px !important;
  position: relative;
  font-size: 14px !important;
  border-bottom: none !important;
}
.related-posts ul li::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 2px;
  color: #9b59b6;
  font-size: 10px;
}
.related-posts ul li a {
  color: #7d3c98 !important;
  text-decoration: none !important;
  border-bottom: 1px dotted #9b59b6 !important;
}
.related-posts ul li a:hover {
  color: #5b2c6f !important;
  border-bottom-color: #5b2c6f !important;
}