@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* --- スリム固定ヘッダー (2026-07-31) ---
   SILKスキンは is-header-fixed に対応していないため、子テーマで実装する。
   position: fixed ではなく sticky を使い、本文側のパディング補正を不要にしている。 */

.is-header-fixed #header-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid #d2d2d7;
  /* スクロール追従中だけ影を出したいが、sticky単体では状態を持てないので常時薄く敷く */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.silk-darkmode.is-header-fixed #header-container {
  background: #1d1d1f;
  border-bottom-color: #3a3a3c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ロゴ・メニュー行を詰める */
.is-header-fixed .header-container-in {
  min-height: 0;
}
.is-header-fixed #header,
.is-header-fixed #header-in {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.is-header-fixed .site-name-text {
  font-size: 19px;
}
.is-header-fixed #navi .navi-in > ul > li > a {
  height: 40px;
  line-height: 40px;
}

/* 管理バー表示時は its 32px 分だけ下げる(ログイン時のみ) */
.admin-bar.is-header-fixed #header-container {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar.is-header-fixed #header-container {
    top: 46px;
  }
}

/* 見出しへのアンカー移動がヘッダーに隠れないようにする */
.is-header-fixed :target,
.is-header-fixed .article h2[id],
.is-header-fixed .article h3[id] {
  scroll-margin-top: 60px;
}

/* --- Apple風ミニマル調整 (2026-07-30) --- */

/* システムフォントスタック */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
  color: #1d1d1f;
}

/* サイトタイトルを引き締める */
.site-name-text {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 固定ページ: 日付と見出しの自動ナンバリングを消す(記事側は残す) */
.page .date-tags {
  display: none;
}
.page .article h2::before {
  content: none;
}

/* 見出しの下線をキーカラー+薄グレーの細線に */
.article h2 {
  border-bottom-color: #d2d2d7;
}

/* サイドバー見出しの箱っぽさを抑える */
.sidebar h3 {
  background: none;
  border-bottom: 1px solid #d2d2d7;
  border-radius: 0;
}

/* --- トップページ (2026-07-30) --- */

/* フロントページはページタイトル(Home)まわりを出さない */
.home.page .article .article-header {
  display: none;
}

/* ヒーロー/CTAのボタンをAppleふうのピル型に */
.pc-hero .wp-block-button__link,
.pc-cta .wp-block-button__link {
  background: #0071e3;
  color: #fff;
  border: none;
  border-radius: 980px;
  padding: 0.8em 1.8em;
  font-weight: 500;
}
.pc-hero .wp-block-button__link:hover,
.pc-cta .wp-block-button__link:hover {
  background: #0077ed;
}
.pc-hero .is-style-outline .wp-block-button__link {
  background: transparent;
  color: #0071e3;
  border: 1px solid #0071e3;
}
.pc-hero .is-style-outline .wp-block-button__link:hover {
  background: rgba(0, 113, 227, 0.08);
}

/* ヒーロー */
.pc-hero {
  text-align: center;
  padding: 3em 0 3.5em;
}
.pc-hero h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
  border: none;
  margin-bottom: 0.6em;
}
.pc-hero p {
  color: #6e6e73;
  font-size: 17px;
}

/* カード */
.pc-card {
  border: 1px solid #d2d2d7;
  border-radius: 14px;
  padding: 1.6em 1.4em;
}
.pc-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 0.6em;
  padding: 0;
  border: none;
  background: none;
}
.pc-card p {
  font-size: 14px;
  color: #424245;
  margin-bottom: 0;
}
.pc-card .pc-card-link {
  margin-top: 1em;
  font-weight: 500;
}

/* CTA */
.pc-cta {
  text-align: center;
  background: #f5f5f7;
  border-radius: 18px;
  padding: 2.5em 1.5em;
  margin-top: 3em;
}
.pc-cta h2 {
  border: none;
  background: none;
  padding: 0;
}
.pc-cta h2::before {
  content: none;
}
.pc-cta p {
  color: #6e6e73;
}

/* --- ダークモード時の色補正 (2026-07-31) ---
   子テーマ側で light 前提の色を直書きしている箇所を、silk-darkmode 下で打ち消す。

   注: ダーク時の地の色は SILK が「サイト文字色」設定から導く実装になっているが、
   その設定を変えると light 時の本文色まで固定され、ダーク時に同色沈みを起こす。
   よって設定は既定のままにして、地の色はここで直接指定する。 */
.silk-darkmode,
body.public-page.silk-darkmode {
  background-color: #1d1d1f;
}

/* ヘッダー/グローバルナビの地(既定は白のまま残る) */
.silk-darkmode #navi,
.silk-darkmode #header,
.silk-darkmode .navi-in > ul > li > ul {
  background-color: #1d1d1f;
}
.silk-darkmode .navi-in > ul > li > a,
.silk-darkmode #header .site-name-text {
  color: #f5f5f7;
}

/* フッターも地が白のまま残るので合わせる(ロゴを白くする前に必須) */
.silk-darkmode .footer,
.silk-darkmode .footer-bottom {
  background-color: #1d1d1f;
  color: #f5f5f7;
}
.silk-darkmode .footer .site-name-text,
.silk-darkmode .footer a {
  color: #f5f5f7;
}

/* 罫線を暗い階調に */
.silk-darkmode .article h2 {
  border-bottom-color: #3a3a3c;
}
.silk-darkmode .sidebar h3 {
  border-bottom-color: #3a3a3c;
}

/* 補助テキストは白から落として階層を作る */
.silk-darkmode .pc-hero p,
.silk-darkmode .pc-card p,
.silk-darkmode .pc-cta p {
  color: #a1a1a6;
}

/* カードとCTAの面 */
.silk-darkmode .pc-card {
  border-color: #3a3a3c;
}
.silk-darkmode .pc-cta {
  background: #2c2c2e;
}

/* アウトラインボタンは暗背景で青が沈むので明るい青にする */
.silk-darkmode .pc-hero .is-style-outline .wp-block-button__link {
  color: #2997ff;
  border-color: #2997ff;
}
.silk-darkmode .pc-hero .is-style-outline .wp-block-button__link:hover {
  background: rgba(41, 151, 255, 0.12);
}

/* ダークモード切り替えボタン: 既定は左下でフッターボタンと干渉するため位置を調整 */
.silk-darkmode-button {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.silk-darkmode-button:hover {
  opacity: 1;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  .pc-hero {
    padding: 1em 0 2em;
  }
  .pc-hero h1 {
    font-size: 28px;
  }
  .pc-hero p {
    font-size: 15px;
  }
}