@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** カスタムデザイン変数
** キーカラー：スカイブルー＋ブラック
************************************/
:root {
  --pd-blue:        #29a8e0;   /* スカイブルー */
  --pd-blue-dark:   #1a87b8;   /* スカイブルー（ホバー） */
  --pd-blue-light:  #e8f6fd;   /* スカイブルー（背景薄） */
  --pd-black:       #111111;   /* ブラック */
  --pd-text:        #222222;
  --pd-text-light:  #666666;
  --pd-bg:          #f7f6f0;   /* オフホワイト */
  --pd-border:      #e4e3dc;
  --pd-card-bg:     #ffffff;
  --pd-font: "Yu Gothic", "游ゴシック", YuGothic, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pd-radius:      10px;
  --pd-shadow:      0 4px 20px rgba(0,0,0,0.08);
  --pd-shadow-hover:0 10px 32px rgba(0,0,0,0.14);
}

/************************************
** 背景・ベース
************************************/
body,
#container,
#content,
.content-in,
.site-body {
  background-color: var(--pd-bg) !important;
  color: var(--pd-text);
}

/************************************
** フォント統一
************************************/
body, h1, h2, h3, h4, h5, h6,
p, a, li, span, div,
.site-name-text, .tagline,
.entry-title, .widget-title {
  font-family: var(--pd-font) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 700; letter-spacing: 0.02em; }
h4, h5, h6 { font-weight: 600; }
p, li       { line-height: 1.9; }

/************************************
** ヘッダー
************************************/
#header {
  background-color: var(--pd-black) !important;
}

#header-in {
  padding: 22px 0 !important;
}

.site-name-text {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  color: #ffffff !important;
}

.tagline {
  font-size: 12px !important;
  color: rgba(255,255,255,0.6) !important;
  margin-top: 3px;
}

/* ヘッダーリンク */
.logo a,
.site-name-text-link,
.site-name-text-link:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/************************************
** グローバルナビ
************************************/
#navi {
  background-color: #ffffff !important;
  border-bottom: 3px solid var(--pd-blue) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

#navi-in .menu-top > li > a {
  color: var(--pd-text) !important;
  padding: 16px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em;
  transition: color 0.15s, background 0.15s;
}

#navi-in .menu-top > li > a:hover,
#navi-in .menu-top > li.current-menu-item > a {
  color: var(--pd-blue) !important;
  background-color: var(--pd-blue-light) !important;
}

/************************************
** リンク
************************************/
a {
  color: var(--pd-text) !important;   /* デフォルト：黒 */
  text-decoration: none !important;
  transition: color 0.15s;
}

a:hover {
  color: var(--pd-blue) !important;   /* ホバー：スカイブルー */
  text-decoration: none !important;   /* アンダーラインなし */
}

/************************************
** 記事カード：角丸＋シャドウ
************************************/
.entry-card-wrap,
.a-wrap {
  background-color: var(--pd-card-bg) !important;
  border-radius: var(--pd-radius) !important;
  box-shadow: var(--pd-shadow) !important;
  border: none !important;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.entry-card-wrap:hover,
.a-wrap:hover {
  box-shadow: var(--pd-shadow-hover) !important;
  transform: translateY(-4px);
}

.entry-card {
  border: none !important;
  border-radius: 0 !important;
}

.entry-card-thumb img {
  border-radius: 0 !important;
}

/************************************
** タグ・カテゴリー：楕円ボタン
************************************/
.cat-label,
.entry-category,
.entry-category a,
.cat-links a,
.cat-label::before,
[class*="cat-label"] {
  background-color: var(--pd-blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;     /* 楕円 */
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 12px !important;
  letter-spacing: 0.04em;
  border: none !important;
  display: inline-block;
  line-height: 1.8;
}

.cat-links a:hover {
  background-color: var(--pd-blue-dark) !important;
  text-decoration: none !important;
}

/* タグ（#タグ） */
.tag-links a,
.post-tags a {
  background-color: transparent !important;
  color: var(--pd-blue) !important;
  border: 1.5px solid var(--pd-blue) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  padding: 2px 10px !important;
  transition: all 0.15s;
}

.tag-links a:hover,
.post-tags a:hover {
  background-color: var(--pd-blue) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/************************************
** 記事見出し（本文内）
************************************/
.entry-content h2 {
  border-left: 4px solid var(--pd-blue) !important;
  padding-left: 14px !important;
  margin-top: 2.6em !important;
  margin-bottom: 0.8em !important;
  font-size: 1.3em !important;
  color: var(--pd-black) !important;
}

.entry-content h3 {
  border-bottom: 2px solid var(--pd-border) !important;
  padding-bottom: 6px !important;
  margin-top: 2em !important;
  font-size: 1.1em !important;
}

.entry-content p {
  margin-bottom: 1.6em !important;
  line-height: 2.0 !important;
}

/************************************
** 余白の拡張
************************************/
.wrap {
  max-width: 1160px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#main, .main {
  padding-top: 48px !important;
}

.sidebar {
  padding-top: 48px !important;
}

/************************************
** サイドバーウィジェット
************************************/
.widget {
  background-color: var(--pd-card-bg) !important;
  border-radius: var(--pd-radius) !important;
  box-shadow: var(--pd-shadow) !important;
  border: none !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
}

.widget-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-black) !important;
  border-bottom: 2px solid var(--pd-blue) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}

/************************************
** ボタン・検索
************************************/
.btn, .button,
input[type="submit"],
.search-submit {
  background-color: var(--pd-blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;      /* 楕円ボタン */
  padding: 10px 24px !important;
  font-family: var(--pd-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: background-color 0.15s !important;
  cursor: pointer;
}

.btn:hover, .button:hover,
input[type="submit"]:hover,
.search-submit:hover {
  background-color: var(--pd-blue-dark) !important;
  color: #ffffff !important;
}

/************************************
** フッター
************************************/
#footer {
  background-color: var(--pd-black) !important;
  color: rgba(255,255,255,0.65) !important;
  padding: 36px 0 !important;
  font-size: 13px !important;
  margin-top: 72px !important;
}

#footer a {
  color: rgba(255,255,255,0.55) !important;
}

#footer a:hover {
  color: var(--pd-blue) !important;
  text-decoration: none !important;
}

#navi-footer,
#navi-footer-in {
  background-color: var(--pd-black) !important;
}

#navi-footer .navi-footer-in a,
#navi-footer a {
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important;
}

#navi-footer a:hover {
  color: var(--pd-blue) !important;
}

/************************************
** レスポンシブ
************************************/
@media screen and (max-width: 1023px) {
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media screen and (max-width: 834px) {
  #header-in {
    padding: 18px 16px !important;
  }
  .site-name-text {
    font-size: 17px !important;
  }
  #main {
    padding-top: 32px !important;
  }
  .entry-card-wrap:hover,
  .a-wrap:hover {
    transform: none;
  }
}

@media screen and (max-width: 480px) {
  .entry-content h2 {
    font-size: 1.15em !important;
  }
}