@charset "UTF-8";

/*!
 * LEDECO BLOG Skin
 * Cocoon 子テーマ用スキン
 * 場所: skins/ledeco-blog/style.css
 * 読み込み: functions.php > ledeco_enqueue_assets()
 */

/* ============================================================
   Design Tokens（CSS カスタムプロパティ）
   ============================================================ */
:root {
  --ledeco-white:        #FFFFFF;
  --ledeco-text:         #111111;
  --ledeco-body:         #333333;
  --ledeco-bg-gray:      #F7F7F7;
  --ledeco-border:       #E5E5E5;
  --ledeco-green:        #63D126;
  --ledeco-green-dark:   #2F8F2F;
  --ledeco-max-width:    1180px;
  --ledeco-radius:       10px;
  --ledeco-radius-sm:    6px;
  --ledeco-shadow:       0 2px 12px rgba(0,0,0,0.07);
  --ledeco-shadow-hover: 0 6px 24px rgba(0,0,0,0.12);
  --ledeco-font:         "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --ledeco-header-h:     84px;
}

/* ============================================================
   Base Reset & Typography
   ============================================================ */
body {
  font-family: var(--ledeco-font) !important;
  font-size:   18px !important;
  line-height: 1.95 !important;
  color:       var(--ledeco-body) !important;
  background:  var(--ledeco-white) !important;
  -webkit-font-smoothing: antialiased;
}

a               { color: var(--ledeco-green-dark); text-decoration: none; }
a:hover         { color: var(--ledeco-green); }
img             { max-width: 100%; height: auto; display: block; }

/* ============================================================
   Cocoon デフォルト要素の非表示
   ============================================================ */

/* Cocoon 標準ヘッダー・グローバルナビ（子テーマ header.php で置換） */
#header,
.header-container,
.header-container-in,
#navi,
.navi,
.logo-header { display: none !important; }

/* カテゴリーアイコン一覧・タグ一覧・スライダー */
.cat-label-list,
.tag-cloud,
.tagcloud,
.catcloud,
.widget-entry-cards.catcloud-widget,
[class*="catcloud"],
.main-visuals,
.main-visual,
.slider-wrap,
#main-visuals,
.site-catch        { display: none !important; }

/* トップページのパンくず */
body.home .breadcrumbs,
body.front-page .breadcrumbs { display: none !important; }

/* ============================================================
   固定ヘッダーのオフセット
   ============================================================ */
#container,
.cocoon-container,
body > #container {
  padding-top: var(--ledeco-header-h) !important;
}

/* ============================================================
   コンテンツ幅
   ============================================================ */
.wrap,
.main-wrap,
#main-wrap { max-width: var(--ledeco-max-width) !important; }

/* ============================================================
   トップページ：フルワイドレイアウト（サイドバーなし）
   ============================================================ */
body.home #main-wrap,
body.home .main-wrap { max-width: 100% !important; padding: 0 !important; }
body.home #main,
body.home .main      { width: 100% !important; margin: 0 !important; float: none !important; }
body.home .sidebar,
body.home #sidebar   { display: none !important; }
body.home main#main  { padding: 0 !important; }

/* ============================================================
   LEDECO カスタムヘッダー
   ============================================================ */
#ledeco-site-header {
  position:      fixed;
  top: 0; left: 0; right: 0;
  height:        var(--ledeco-header-h);
  background:    var(--ledeco-white);
  border-bottom: 1px solid var(--ledeco-border);
  z-index:       9000;
  display:       flex;
  align-items:   center;
}

.ledeco-header-inner {
  max-width:      var(--ledeco-max-width);
  margin:         0 auto;
  padding:        0 32px;
  width:          100%;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
}

/* ロゴ */
.ledeco-logo a {
  display:        flex;
  flex-direction: column;
  color:          var(--ledeco-text);
  text-decoration: none;
  line-height:    1.2;
}
.ledeco-logo-main {
  font-size:      20px;
  font-weight:    700;
  letter-spacing: 0.04em;
  color:          var(--ledeco-text);
}
.ledeco-logo-sub {
  font-size:      11px;
  font-weight:    400;
  color:          #888;
  letter-spacing: 0.03em;
}

/* ヘッダーボタン群 */
.ledeco-header-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.ledeco-search-toggle,
.ledeco-hamburger {
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         10px;
  border-radius:   var(--ledeco-radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.18s;
  color:           var(--ledeco-text);
}
.ledeco-search-toggle:hover,
.ledeco-hamburger:hover { background: var(--ledeco-bg-gray); }

/* ハンバーガーアイコン */
.ledeco-hamburger {
  flex-direction: column;
  gap:            5px;
  width:          44px;
  height:         44px;
}
.ledeco-hamburger span {
  display:          block;
  width:            22px;
  height:           2px;
  background:       var(--ledeco-text);
  border-radius:    2px;
  transition:       all 0.28s cubic-bezier(0.4,0,0.2,1);
  transform-origin: center;
}
.ledeco-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ledeco-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ledeco-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 検索バー（ヘッダー直下） */
.ledeco-search-bar {
  position:      fixed;
  top:           var(--ledeco-header-h);
  left: 0; right: 0;
  background:    var(--ledeco-white);
  border-bottom: 1px solid var(--ledeco-border);
  padding:       16px 32px;
  z-index:       8900;
  display:       none;
  box-shadow:    var(--ledeco-shadow);
}
.ledeco-search-bar.is-open { display: block !important; }
.ledeco-search-bar .search-form {
  max-width: 600px;
  margin:    0 auto;
  display:   flex;
  gap:       8px;
}
.ledeco-search-bar input[type="search"] {
  flex:        1;
  padding:     10px 16px;
  border:      1px solid var(--ledeco-border);
  border-radius: var(--ledeco-radius-sm);
  font-size:   16px;
  font-family: var(--ledeco-font);
  outline:     none;
}
.ledeco-search-bar input[type="search"]:focus {
  border-color: var(--ledeco-green);
}
.ledeco-search-bar input[type="submit"] {
  padding:      10px 20px;
  background:   var(--ledeco-green);
  color:        #fff;
  border:       none;
  border-radius: var(--ledeco-radius-sm);
  cursor:       pointer;
  font-size:    14px;
}

/* ============================================================
   ドロワーナビゲーション
   ============================================================ */
.ledeco-nav-overlay {
  position:   fixed;
  top: 0; right: 0; bottom: 0;
  width:      min(360px, 100vw);
  background: var(--ledeco-white);
  z-index:    9100;
  transform:  translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  overflow-y: auto;
  padding:    0 0 40px;
}
.ledeco-nav-overlay.is-open { transform: translateX(0) !important; }

.ledeco-nav-backdrop {
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,0.4);
  z-index:        9050;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.32s;
}
.ledeco-nav-backdrop.is-open { opacity: 1 !important; pointer-events: auto !important; }

.ledeco-nav-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px;
  border-bottom:   1px solid var(--ledeco-border);
}
.ledeco-nav-header-logo { font-size: 16px; font-weight: 700; color: var(--ledeco-text); }

.ledeco-nav-close {
  background:    none;
  border:        none;
  cursor:        pointer;
  font-size:     22px;
  color:         var(--ledeco-text);
  padding:       6px;
  line-height:   1;
  border-radius: 4px;
  transition:    background 0.18s;
  display:       flex;
  align-items:   center;
}
.ledeco-nav-close:hover { background: var(--ledeco-bg-gray); }

.ledeco-nav-menu { padding: 16px 0; }
.ledeco-nav-menu ul { list-style: none; margin: 0; padding: 0; }
.ledeco-nav-menu ul li { border-bottom: 1px solid var(--ledeco-border); }
.ledeco-nav-menu ul li a {
  display:     block;
  padding:     16px 24px;
  font-size:   15px;
  font-weight: 500;
  color:       var(--ledeco-text);
  transition:  background 0.18s, color 0.18s;
}
.ledeco-nav-menu ul li a:hover { background: var(--ledeco-bg-gray); color: var(--ledeco-green-dark); }
.ledeco-nav-menu ul ul { background: var(--ledeco-bg-gray); }
.ledeco-nav-menu ul ul li a { padding-left: 40px; font-size: 14px; font-weight: 400; }

/* ============================================================
   トップページ：リードコピー
   ============================================================ */
.ledeco-hero {
  padding:    72px 32px 64px;
  text-align: center;
  background: var(--ledeco-white);
}
.ledeco-hero-title {
  font-size:      32px;
  font-weight:    700;
  color:          var(--ledeco-text);
  letter-spacing: 0.02em;
  line-height:    1.45;
  margin:         0 0 20px;
}
.ledeco-hero-desc {
  font-size:   16px;
  color:       #666;
  line-height: 1.9;
  margin:      0;
}

/* ============================================================
   トップページ：セクション共通
   ============================================================ */
.ledeco-section {
  padding:    56px 32px;
  max-width:  var(--ledeco-max-width);
  margin:     0 auto;
}
.ledeco-section-header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   28px;
}
.ledeco-section-title {
  font-size:      22px;
  font-weight:    700;
  color:          var(--ledeco-text);
  margin:         0;
  letter-spacing: 0.02em;
}
.ledeco-section-more {
  font-size:   13px;
  color:       var(--ledeco-green-dark);
  font-weight: 600;
  display:     flex;
  align-items: center;
  gap:         4px;
  white-space: nowrap;
}
.ledeco-section-more:hover { color: var(--ledeco-green); }

/* ============================================================
   記事カード共通
   ============================================================ */
.ledeco-card {
  background:     var(--ledeco-white);
  border:         1px solid var(--ledeco-border);
  border-radius:  var(--ledeco-radius);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     transform 0.22s ease, box-shadow 0.22s ease;
  text-decoration: none;
  color:          inherit;
}
.ledeco-card:hover { transform: translateY(-4px); box-shadow: var(--ledeco-shadow-hover); color: inherit; }

.ledeco-card-thumb {
  width:        100%;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  background:   var(--ledeco-bg-gray);
}
.ledeco-card-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.ledeco-card:hover .ledeco-card-thumb img { transform: scale(1.04); }

.ledeco-card-body {
  padding:        18px 20px 20px;
  flex:           1;
  display:        flex;
  flex-direction: column;
}
.ledeco-card-meta {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 10px;
}
.ledeco-cat-label {
  display:        inline-block;
  font-size:      11px;
  font-weight:    700;
  color:          var(--ledeco-green-dark);
  background:     rgba(99,209,38,0.1);
  padding:        3px 9px;
  border-radius:  20px;
  letter-spacing: 0.03em;
  white-space:    nowrap;
}
.ledeco-card-date { font-size: 12px; color: #aaa; }

.ledeco-card-title {
  font-size:   16px;
  font-weight: 700;
  color:       var(--ledeco-text);
  line-height: 1.55;
  margin:      0 0 8px;
  flex:        1;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}
.ledeco-card-excerpt {
  font-size:   14px;
  color:       #777;
  line-height: 1.7;
  margin:      0 0 12px;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}
.ledeco-card-arrow {
  display:      flex;
  justify-content: flex-end;
  margin-top:   auto;
  padding-top:  8px;
}
.ledeco-card-arrow svg { color: var(--ledeco-green); width: 20px; height: 20px; }

/* ============================================================
   人気記事グリッド（3列）
   ============================================================ */
.ledeco-popular-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
}

/* ============================================================
   横長バナーセクション
   ============================================================ */
.ledeco-banner-section {
  padding: 0 32px 56px;
}
.ledeco-banner-inner {
  max-width: var(--ledeco-max-width);
  margin:    0 auto;
}
.ledeco-banner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  background:            var(--ledeco-bg-gray);
  border-radius:         14px;
  overflow:              hidden;
  min-height:            220px;
  text-decoration:       none;
  color:                 inherit;
  transition:            box-shadow 0.22s;
}
.ledeco-banner:hover { box-shadow: var(--ledeco-shadow-hover); color: inherit; }

.ledeco-banner-text {
  padding: 48px 48px 48px 56px;
}
.ledeco-banner-tag {
  display:        inline-block;
  font-size:      11px;
  font-weight:    700;
  color:          var(--ledeco-green-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom:  12px;
}
.ledeco-banner-title {
  font-size:   26px;
  font-weight: 700;
  color:       var(--ledeco-text);
  line-height: 1.4;
  margin:      0 0 14px;
}
.ledeco-banner-desc {
  font-size:   15px;
  color:       #555;
  line-height: 1.85;
  margin:      0 0 24px;
}
.ledeco-banner-link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       14px;
  font-weight:     700;
  color:           var(--ledeco-green-dark);
  border-bottom:   2px solid var(--ledeco-green);
  padding-bottom:  2px;
  transition:      color 0.18s;
}
.ledeco-banner-link:hover { color: var(--ledeco-green); }

.ledeco-banner-image {
  height:     100%;
  min-height: 220px;
  overflow:   hidden;
}
.ledeco-banner-image img {
  width: 100%; height: 100%; object-fit: cover;
}
.ledeco-banner-image-placeholder {
  width:       100%;
  height:      100%;
  min-height:  220px;
  background:  linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
  display:     flex;
  align-items: center;
  justify-content: center;
}
.ledeco-banner-image-placeholder svg { opacity: 0.35; width: 80px; height: 80px; }

/* ============================================================
   新着記事グリッド（4列）
   ============================================================ */
.ledeco-section-bg { background: var(--ledeco-bg-gray); padding: 56px 32px; }
.ledeco-recent-wrap { max-width: var(--ledeco-max-width); margin: 0 auto; }

.ledeco-recent-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
}
.ledeco-recent-grid .ledeco-card-title { font-size: 14px; }
.ledeco-recent-grid .ledeco-card-body  { padding: 14px 16px 16px; }

/* ============================================================
   もっと見るボタン
   ============================================================ */
.ledeco-more-wrap { text-align: center; padding: 40px 0 56px; background: var(--ledeco-bg-gray); }
.ledeco-more-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         14px 40px;
  font-size:       15px;
  font-weight:     700;
  color:           var(--ledeco-green-dark);
  background:      var(--ledeco-white);
  border:          2px solid var(--ledeco-green);
  border-radius:   50px;
  cursor:          pointer;
  text-decoration: none;
  transition:      background 0.22s, color 0.22s;
  letter-spacing:  0.04em;
}
.ledeco-more-btn:hover { background: var(--ledeco-green); color: var(--ledeco-white); }

/* ============================================================
   記事詳細ページ（single.php カスタムレイアウト）
   ============================================================ */

/* カスタムテンプレートページ：Cocoon の幅制限を全て解除 */
body.single #main-wrap,
body.single .main-wrap,
body.single #main,
body.single .main,
body.single #main > main,
body.home   #main-wrap,
body.home   .main-wrap,
body.home   #main,
body.home   .main,
body.home   #main > main,
body.blog   #main-wrap,
body.blog   .main-wrap,
body.blog   #main,
body.blog   .main,
body.blog   #main > main,
body.archive #main-wrap,
body.archive .main-wrap,
body.archive #main,
body.archive .main,
body.archive #main > main,
body.search  #main-wrap,
body.search  .main-wrap,
body.search  #main,
body.search  .main,
body.search  #main > main {
  float:     none !important;
  width:     100% !important;
  max-width: 100% !important;
  margin:    0 !important;
  padding:   0 !important;
  display:   block !important;
  box-sizing: border-box !important;
}

/* Cocoon の footer.php が追加するサイドバーを非表示（自前サイドバー以外を全て非表示） */
body.single  .sidebar:not(.ledeco-single-sidebar),
body.single  #sidebar,
body.home    .sidebar:not(.ledeco-index-sidebar),
body.home    #sidebar,
body.blog    .sidebar:not(.ledeco-index-sidebar),
body.blog    #sidebar,
body.archive .sidebar:not(.ledeco-archive-sidebar),
body.archive #sidebar,
body.search  .sidebar:not(.ledeco-archive-sidebar),
body.search  #sidebar {
  display: none !important;
}

/* 外枠：最大幅＋余白 */
.ledeco-single-wrap {
  max-width:  var(--ledeco-max-width);
  margin:     0 auto;
  padding:    48px 32px;
  box-sizing: border-box;
}

/* 2カラム：記事本文＋サイドバー */
.ledeco-single-inner {
  display:     flex;
  align-items: flex-start;
  gap:         48px;
}

/* 左：記事本文 */
.ledeco-single-main {
  flex:      1;
  min-width: 0;
}

/* 右：サイドバー */
.ledeco-single-sidebar {
  width:      300px;
  flex-shrink: 0;
  min-width:  0;
  box-sizing: border-box;
  word-break: break-word;
}

/* サイドバー各ウィジェット */
.ledeco-single-sidebar .widget {
  margin-bottom: 32px;
  padding:       0;
  background:    none;
  border:        none;
}

/* ウィジェットタイトル */
.ledeco-single-sidebar .widget .widget-title,
.ledeco-single-sidebar .widget h3 {
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          #888;
  text-transform: uppercase;
  margin:         0 0 14px;
  padding-bottom: 10px;
  border-bottom:  1px solid var(--ledeco-border);
}

/* ウィジェット内リンク */
.ledeco-single-sidebar .widget a {
  color:       var(--ledeco-text);
  font-size:   14px;
  line-height: 1.7;
}
.ledeco-single-sidebar .widget a:hover {
  color: var(--ledeco-green-dark);
}

/* ウィジェット内画像 */
.ledeco-single-sidebar .widget img {
  border-radius: var(--ledeco-radius-sm);
}

/* 検索ウィジェット：タイトル非表示 */
.ledeco-single-sidebar .widget_search .widget-title,
.ledeco-single-sidebar .widget_search h3 {
  display: none !important;
}

/* 検索ウィジェット：フォント統一 */
.ledeco-single-sidebar .widget_search input,
.ledeco-single-sidebar .widget_search button {
  font-family: var(--ledeco-font) !important;
  font-size:   14px !important;
}

/* 管理バーを非ログイン時に非表示（WordPressはログイン時にbodyへ.logged-inを付与） */
body:not(.logged-in) #wpadminbar { display: none !important; }

/* プロフィールウィジェット：縦一列レイアウト */
.widget_author_box .author-box {
  display:        block !important;
  border:         none !important;
  padding:        0 !important;
  background:     none !important;
  float:          none !important;
  width:          100% !important;
  box-sizing:     border-box !important;
  text-align:     center !important;
}
.widget_author_box .author-thumb {
  float:         none !important;
  display:       block !important;
  margin:        0 auto 14px !important;
  width:         80px !important;
}
.widget_author_box .author-thumb img {
  width:         80px !important;
  height:        80px !important;
  border-radius: 50% !important;
  object-fit:    cover !important;
  display:       block !important;
}
.widget_author_box .author-content {
  display:    block !important;
  width:      100% !important;
  padding:    0 !important;
  box-sizing: border-box !important;
}
.widget_author_box .author-name {
  font-size:   15px !important;
  font-weight: 700 !important;
  margin:      0 0 10px !important;
  text-align:  center !important;
  white-space: normal !important;
  word-break:  break-word !important;
}
.widget_author_box .author-name a {
  color:      var(--ledeco-text) !important;
  white-space: normal !important;
}
.widget_author_box .author-description {
  text-align: left !important;
}
.widget_author_box .author-description p {
  font-size:   13px !important;
  line-height: 1.75 !important;
  color:       #555 !important;
  margin:      0 0 16px !important;
  text-align:  left !important;
}
/* SNSボタン：中央寄せ横並び */
.widget_author_box .profile-follows {
  text-align: center !important;
}
.widget_author_box .sns-follow-buttons {
  display:         inline-flex !important;
  flex-wrap:       wrap !important;
  gap:             8px !important;
  justify-content: center !important;
}
.widget_author_box .sns-button {
  width:           36px !important;
  height:          36px !important;
  border-radius:   var(--ledeco-radius-sm) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
}

/* ボックスメニュー：横並び2列（全サイドバー共通） */
.ledeco-single-sidebar .box-menus,
.ledeco-index-sidebar .box-menus {
  display: flex !important;
  gap:     12px !important;
}
.ledeco-single-sidebar a.box-menu,
.ledeco-index-sidebar a.box-menu {
  flex:           1 !important;
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  gap:            8px !important;
  padding:        16px 8px !important;
  border:         1px solid var(--ledeco-border) !important;
  border-radius:  var(--ledeco-radius-sm) !important;
  text-decoration: none !important;
  color:          var(--ledeco-text) !important;
  transition:     box-shadow 0.2s !important;
}
.ledeco-single-sidebar a.box-menu:hover,
.ledeco-index-sidebar a.box-menu:hover {
  box-shadow: var(--ledeco-shadow) !important;
}
.ledeco-single-sidebar .box-menu-icon,
.ledeco-index-sidebar .box-menu-icon {
  font-size: 24px !important;
  line-height: 1 !important;
}
.ledeco-single-sidebar .box-menu-label,
.ledeco-index-sidebar .box-menu-label {
  font-size:   13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.ledeco-single-sidebar .box-menu-description,
.ledeco-index-sidebar .box-menu-description {
  font-size: 11px !important;
  color:     #999 !important;
  white-space: nowrap !important;
}

/* パンくずリスト */
.ledeco-breadcrumb {
  font-size:   13px;
  color:       #888;
  margin-bottom: 24px;
}
.ledeco-breadcrumb a { color: #888; }
.ledeco-breadcrumb a:hover { color: var(--ledeco-green-dark); }

/* 記事ヘッダー */
.ledeco-article-header {
  margin-bottom: 32px;
}
.ledeco-article-title {
  font-size:   28px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color:       var(--ledeco-text) !important;
  margin:      12px 0 16px !important;
}
.ledeco-article-meta {
  font-size:  13px;
  color:      #888;
  display:    flex;
  gap:        16px;
  flex-wrap:  wrap;
}
.ledeco-article-updated { color: #aaa; }

/* アイキャッチ画像 */
.ledeco-article-thumb {
  margin-bottom: 40px;
  border-radius: var(--ledeco-radius);
  overflow:      hidden;
}
.ledeco-article-thumb img {
  width:  100%;
  height: auto;
}

/* 記事本文 */
.ledeco-article-content {
  font-size:   17px;
  line-height: 2;
  color:       var(--ledeco-body);
}

/* 関連記事 */
.ledeco-related {
  margin-top:    56px;
  padding-top:   40px;
  border-top:    1px solid var(--ledeco-border);
}
.ledeco-related-title {
  font-size:      13px !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  color:          #888 !important;
  text-transform: uppercase !important;
  margin:         0 0 20px !important;
}
.ledeco-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 16px;
  grid-template-rows: auto auto;
}
.ledeco-related-item {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  color:          var(--ledeco-text) !important;
  text-decoration: none !important;
}
.ledeco-related-item:hover .ledeco-related-item-title {
  color: var(--ledeco-green-dark);
}
.ledeco-related-thumb {
  border-radius: var(--ledeco-radius-sm);
  overflow:      hidden;
  aspect-ratio:  16 / 9;
  background:    var(--ledeco-bg-gray);
}
.ledeco-related-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.ledeco-related-noimg {
  width: 100%; height: 100%;
  background: var(--ledeco-bg-gray);
}
.ledeco-related-item-title {
  font-size:   14px;
  font-weight: 600;
  line-height: 1.6;
  margin:      0;
}
.ledeco-related-date {
  font-size: 12px;
  color:     #999;
}

/* タグ一覧 */
.ledeco-article-tags {
  margin-top: 40px;
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
}
.ledeco-tag-link {
  font-size:     13px;
  color:         #666 !important;
  background:    var(--ledeco-bg-gray);
  border-radius: 4px;
  padding:       4px 12px;
}
.ledeco-tag-link:hover {
  background: var(--ledeco-border);
  color:      var(--ledeco-text) !important;
}

/* 前後記事ナビ */
.ledeco-post-nav {
  margin-top:  56px;
  padding-top: 40px;
  border-top:  1px solid var(--ledeco-border);
}
.ledeco-post-nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     16px;
}
.ledeco-post-nav-item {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        20px 24px;
  background:     var(--ledeco-bg-gray);
  border-radius:  var(--ledeco-radius);
  color:          var(--ledeco-text) !important;
  text-decoration: none !important;
  transition:     background 0.2s;
}
.ledeco-post-nav-item:hover {
  background: #efefef;
}
.ledeco-post-nav-next { text-align: right; }
.ledeco-post-nav-label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          #999;
  text-transform: uppercase;
}
.ledeco-post-nav-title {
  font-size:   14px;
  font-weight: 600;
  line-height: 1.7;
  color:       var(--ledeco-text);
}

.article h2,
.ledeco-article-content h2,
.entry-content h2 {
  font-size:   22px !important;
  font-weight: 700 !important;
  border-left: 3px solid #ccc !important;
  border-bottom: none !important;
  background:  none !important;
  padding:     4px 0 4px 14px !important;
  margin:      60px 0 24px !important;
  color:       var(--ledeco-text) !important;
}
.article h3 {
  font-size:     18px !important;
  font-weight:   700 !important;
  border-bottom: 2px solid var(--ledeco-border) !important;
  background:    none !important;
  padding:       0 0 8px !important;
  margin:        40px 0 16px !important;
  color:         var(--ledeco-text) !important;
}
.article h4 {
  font-size:   16px !important;
  font-weight: 700 !important;
  margin:      28px 0 12px !important;
  color:       var(--ledeco-text) !important;
}

/* 目次 */
#toc_container,
.toc_widget_list {
  background:    var(--ledeco-white) !important;
  border:        1px solid var(--ledeco-border) !important;
  border-radius: var(--ledeco-radius) !important;
  padding:       24px 28px !important;
}

/* 関連記事 */
.related-entries .related-entry-cards {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   16px !important;
}
.related-entry-card { border-radius: var(--ledeco-radius-sm) !important; }

/* ============================================================
   検索・アーカイブページ共通レイアウト
   ============================================================ */

/* 検索・アーカイブページのみ：main と sidebar を flexbox で横並びに */
body.search #main,
body.category #main,
body.tag #main,
body.date #main,
body.archive #main {
  display:     flex !important;
  align-items: flex-start !important;
  gap:         40px !important;
  width:       100% !important;
  float:       none !important;
  margin:      0 !important;
}
body.search #main > main,
body.category #main > main,
body.tag #main > main,
body.date #main > main,
body.archive #main > main {
  flex:      1 !important;
  min-width: 0 !important;
}
body.search #main > .sidebar,
body.search #main > #sidebar,
body.category #main > .sidebar,
body.category #main > #sidebar,
body.tag #main > .sidebar,
body.tag #main > #sidebar,
body.date #main > .sidebar,
body.date #main > #sidebar,
body.archive #main > .sidebar,
body.archive #main > #sidebar {
  width:       300px !important;
  flex-shrink: 0 !important;
  float:       none !important;
}

/* 検索・アーカイブの記事グリッドはサイドバーと共存するため3列 */
.ledeco-archive-section .ledeco-recent-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* アーカイブラッパー（サイドバーと共存するため幅制限なし） */
.ledeco-archive-wrap {
  padding: 0;
}

/* index.php：記事一覧＋サイドバー横並び */
.ledeco-index-layout {
  display:     flex;
  align-items: flex-start;
  gap:         48px;
  max-width:   var(--ledeco-max-width);
  margin:      0 auto;
  padding:     0 32px 64px;
  box-sizing:  border-box;
}
.ledeco-index-main {
  flex:      1;
  min-width: 0;
}
/* サイドバーありでも3列を維持 */
.ledeco-index-main .ledeco-recent-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
.ledeco-index-sidebar {
  width:      300px;
  flex-shrink: 0;
  min-width:  0;
  box-sizing: border-box;
  word-break: break-word;
}
.ledeco-index-sidebar .widget {
  margin-bottom: 32px;
}
.ledeco-index-sidebar .widget .widget-title,
.ledeco-index-sidebar .widget h3 {
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          #888;
  text-transform: uppercase;
  margin:         0 0 14px;
  padding-bottom: 10px;
  border-bottom:  1px solid var(--ledeco-border);
}
.ledeco-index-sidebar .widget a {
  color:       var(--ledeco-text);
  font-size:   14px;
  line-height: 1.7;
}
.ledeco-index-sidebar .widget a:hover {
  color: var(--ledeco-green-dark);
}

/* アーカイブページヘッダー */
.ledeco-archive-header {
  padding:       48px 32px 40px;
  border-bottom: 1px solid var(--ledeco-border);
  margin-bottom: 40px;
  max-width:     var(--ledeco-max-width);
  margin-left:   auto;
  margin-right:  auto;
  box-sizing:    border-box;
}
.ledeco-archive-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ledeco-green-dark);
  margin: 0 0 8px;
}
.ledeco-archive-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--ledeco-text);
  margin: 0 0 8px;
  line-height: 1.35;
}
.ledeco-archive-count {
  font-size: 13px;
  color: #999;
  margin: 0;
}
.ledeco-archive-desc {
  font-size: 15px;
  color: #666;
  margin: 12px 0 0;
  line-height: 1.8;
}

/* アーカイブセクション */
.ledeco-archive-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* サムネイルなしのフォールバック */
.ledeco-card-noimg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f9ee, #d4edcc);
}

/* ページネーション */
.ledeco-pagination {
  margin-top: 48px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ledeco-pagination a,
.ledeco-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ledeco-border);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ledeco-text);
  text-decoration: none;
  background: var(--ledeco-white);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.ledeco-pagination a:hover {
  background: var(--ledeco-green);
  color: #fff;
  border-color: var(--ledeco-green);
}
.ledeco-pagination span.current {
  background: var(--ledeco-green);
  color: #fff;
  border-color: var(--ledeco-green);
  font-weight: 700;
}
.ledeco-pagination span.dots {
  border-color: transparent;
  background: none;
  color: #aaa;
  padding: 0 4px;
}

/* 検索結果なし */
.ledeco-no-result {
  font-size: 16px;
  color: #777;
  text-align: center;
  padding: 48px 0;
  line-height: 2;
}

/* ============================================================
   フッター
   ============================================================ */
#footer { background: var(--ledeco-text) !important; color: #ccc !important; }
#footer a        { color: #ccc; }
#footer a:hover  { color: var(--ledeco-green); }
.footer-copyright { font-size: 12px !important; color: #666 !important; }

/* ============================================================
   レスポンシブ：タブレット（1023px以下）
   ============================================================ */
@media screen and (max-width: 1023px) {
  .ledeco-popular-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .ledeco-recent-grid  { grid-template-columns: repeat(2, 1fr); }
  .ledeco-banner       { grid-template-columns: 1fr 1fr; }
  .ledeco-section,
  .ledeco-banner-section,
  .ledeco-section-bg   { padding-left: 24px; padding-right: 24px; }
  .ledeco-hero         { padding: 56px 24px 48px; }
  .ledeco-hero-title   { font-size: 26px; }
}

/* ============================================================
   レスポンシブ：スマホ（767px以下）
   ============================================================ */
@media screen and (max-width: 767px) {
  body { font-size: 16px !important; line-height: 1.9 !important; }
  :root { --ledeco-header-h: 64px; }

  .ledeco-header-inner { padding: 0 16px; }
  .ledeco-logo-main    { font-size: 17px; }
  .ledeco-logo-sub     { font-size: 10px; }

  .ledeco-hero       { padding: 40px 20px 36px; }
  .ledeco-hero-title { font-size: 22px; }
  .ledeco-hero-desc  { font-size: 14px; }

  .ledeco-section,
  .ledeco-section-bg,
  .ledeco-banner-section,
  .ledeco-more-wrap  { padding-left: 20px; padding-right: 20px; }

  .ledeco-popular-grid { grid-template-columns: 1fr; gap: 16px; }
  .ledeco-recent-grid  { grid-template-columns: 1fr; gap: 14px; }

  /* バナー縦積み */
  .ledeco-banner             { grid-template-columns: 1fr; }
  .ledeco-banner-text        { padding: 32px 24px; order: 2; }
  .ledeco-banner-image,
  .ledeco-banner-image-placeholder { order: 1; min-height: 180px; }
  .ledeco-banner-title       { font-size: 20px; }

  .ledeco-search-bar { padding: 12px 16px; }

  /* スマホ：記事詳細を縦積みに */
  .ledeco-single-wrap {
    padding: 24px 16px;
  }
  .ledeco-single-inner {
    flex-direction: column;
  }
  .ledeco-single-sidebar {
    width: 100%;
  }
  .ledeco-article-title {
    font-size: 22px !important;
  }
  .ledeco-post-nav-inner {
    grid-template-columns: 1fr;
  }
  .ledeco-post-nav-next {
    grid-column: 1;
    text-align: left;
  }

  .related-entries .related-entry-cards { grid-template-columns: 1fr !important; }

  .ledeco-archive-wrap { padding: 0 20px; }
  .ledeco-archive-title { font-size: 22px; }
  .ledeco-archive-header { padding: 32px 0 28px; }

  /* タブレット：サイドバーを下に移動、グリッドを2列に */
  body.search #main,
  body.category #main,
  body.tag #main,
  body.date #main,
  body.archive #main {
    flex-direction: column !important;
    gap: 24px !important;
  }
  body.search #main > .sidebar,
  body.search #main > #sidebar,
  body.category #main > .sidebar,
  body.category #main > #sidebar,
  body.tag #main > .sidebar,
  body.tag #main > #sidebar,
  body.archive #main > .sidebar,
  body.archive #main > #sidebar {
    width: 100% !important;
  }
  .ledeco-archive-section .ledeco-recent-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 767px) {
  .ledeco-archive-section .ledeco-recent-grid {
    grid-template-columns: 1fr !important;
  }
}