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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* =========================================
   Casa Style Magazine Customization
   (既存テーマのCasa風アレンジ)
   ========================================= */

/* 0. Webフォントの読み込み (Noto Serif JP) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&display=swap');

/* 1. 全体ベース：真っ白なキャンバスと美しい明朝体 */
body {
    background-color: #ffffff !important;
    color: #1a1a1a !important; /* 真っ黒(#000)より少し目に優しい濃いグレー */
    font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
    line-height: 2.2 !important; /* 行間を広めに取ることで雑誌のような可読性を確保 */
    letter-spacing: 0.05em; /* 文字間隔を少し広げて上品に */
    -webkit-font-smoothing: antialiased; /* 文字の輪郭を滑らかに */
    margin: 0 !important; /* bodyの余白も削除 */
    padding: 0 !important;
}

/* 2. ヘッダー周り：極限までシンプルに */
.header-container,
#header,
.site-header {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: none !important;
    border-bottom: 1px solid #f4f4f4 !important; /* 完全に消すより、極薄の線があったほうが空間が締まります */
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. コンテンツエリア：ブログ感を消す */
.content,
.site-content,
#content {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main,
#main {
    border: none !important;
    background-color: #ffffff !important;
    padding: 60px 0 !important; /* 左右の余白を削除 (上下は60px残す) */
    max-width: 100% !important; /* 幅制限を解除して全幅表示に */
    width: 100% !important;
    margin: 0 !important;
}

/* 記事本文のテキストが画面端にくっつきすぎないように調整 */
/* 必要に応じてこのブロックを調整してください */
.entry-content,
.article-header {
    max-width: 100%; /* ここを100%にすれば完全に全幅、数値指定なら中央寄せ */
    padding-left: 4% !important; /* 最低限の余白を確保 */
    padding-right: 4% !important;
    margin: 0 auto !important;
}

/* 4. 見出しデザイン：タイポグラフィ重視 */
h1, h2, h3, h4, h5, h6 {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    font-family: "Noto Serif JP", serif !important;
    color: #000 !important;
}

/* 記事タイトル (H1) */
.entry-title {
    font-size: 28px !important; /* 少し大きく */
    font-weight: 700 !important;
    text-align: center;
    line-height: 1.5 !important;
    margin-bottom: 60px !important; /* 本文との距離を大きく取る */
    letter-spacing: 0.1em;
}

/* 小見出し (H2) */
/* Casa風にするため、線ではなく「余白」で区切るスタイルに変更 */
.article h2,
.entry-content h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    text-align: left;
    margin-top: 80px !important; /* 上の余白をたっぷりとる */
    margin-bottom: 30px !important;
    padding-bottom: 0 !important;
    border: none !important; 
    /* もし線を入れたい場合は以下を有効化してください */
    /* border-bottom: 1px solid #1a1a1a !important; padding-bottom: 15px !important; */
}

/* 小見出し (H3) */
.article h3,
.entry-content h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-top: 50px !important;
    margin-bottom: 20px !important;
}

/* 5. 不要なメタ情報・ノイズを消す */
.post-date,
.post-cat,
.category-link,
.entry-card-snippet,
.author-box,
.sns-share, /* SNSボタンも記事下だけにするなど、極力隠す */
.entry-snippet,
.pagination-next-link, /* ページャー周りの装飾もシンプルに */
.breadcrumb { /* パンくずリストも場合によっては非表示、あるいはシンプル化 */
    display: none !important;
}

/* 6. リンクと画像の調整 */
a {
    color: #1a1a1a;
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.6;
    text-decoration: none !important;
    color: #1a1a1a !important;
}

/* 記事内の画像 */
.entry-content img {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important; /* 角丸をなくしてシャープに */
    margin: 50px 0 !important; /* 画像の上下に余白 */
    width: 100% !important; /* 画像を強制的に全幅に */
    max-width: 100% !important;
}

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

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

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