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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/* --- ノートの本体（記事全体＋関連記事＋パンくずリスト） --- */
#main {
    background: 
        linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px);
    background-size: 20px 20px; /* 方眼のサイズ */
    background-color: #fff; /* ノートの背景 */
    border-radius: 10px;
    padding: 30px;
    margin: 40px auto;
    max-width: 900px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    border-left: 3px solid #ccc;
    border-right: 3px solid #ccc;
    border-bottom: 3px solid #ddd;
    border-top: 50px solid transparent; /* 上部のリングスペースを確保 */
}

/* --- 上部にリング画像を配置（紙の端に合わせる） --- */
#main::before {
    content: "";
    position: absolute;
    top: -20px; /* 紙の端にぴったり合わせる */
    left: 50%;
    width: 90%; /* 紙の端より少し広めにしてピッタリ表示 */
    height: 36px; /* リング画像の高さ */
    transform: translateX(-50%);
    background: url('https://hikari-diary.com/wp-content/uploads/2025/03/ring.gif') no-repeat center top;
    background-size: contain; /* 画像のサイズ調整 */
}

/* --- 記事タイトル（ノートの見出し風） --- */
.entry-title {
    font-family: "Courier New", monospace;
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #888;
    margin-bottom: 20px;
}

/* --- 本文の罫線（ノートの罫線） --- */
.entry-content p {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
    margin-bottom: 10px;
    line-height: 1.8;
}

/* --- パンくずリストや関連記事もノート内に --- */
.breadcrumb, .related-entries, .footer-before {
    background: transparent;
    padding: 15px;
    border-radius: 5px;
    border-bottom: 1px dashed #ccc;
}

/* --- フッター直前までノートを拡張 --- */
.footer-before {
    padding-bottom: 30px;
}

/* --- 背景を紙のように --- */
body {
    background: #f8f8f6;
}







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

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

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