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

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

body {
    /* 正しい公開用URLを指定 */
    background-image: url('https://media.cotonoby.com/wp-content/themes/cocoon-child-master/skins/skin-template/images/background_book_2.png');
    background-color: white; /* 画面全体を覆うように表示 */
    background-size: cover; /* 画面全体を覆うように表示 */
    background-position: center center; /* 画像を中央に配置 */
    background-attachment: fixed; /* スクロールしても背景を固定 */
    background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
}

#header-container {
    border-bottom: 1px solid #cccccc; /* 1pxの太さのグレーの実線 */
}

/* 
#main {
/*     border: 1px solid #cccccc; /* 線の太さ、種類、色を指定 */
/*     padding: 20px; /* 枠線と中のコンテンツの間の余白 */
/*     background-color: #ffffff; /* 背景色を白にする（背景画像と区別するため） */
/*     box-sizing: border-box; /* paddingを含めて幅を計算する */
/*}*/

/* スマホ（画面幅480px以下）の時のロゴサイズを調整 */
@media screen and (max-width: 480px) {
  .header-site-logo-image {
    max-width: 50%; /* お好みのサイズに変更してください（例: 70%, 200px など） */
    height: auto;
  }
}

#sidebar h2,
#sidebar h3 {
  background-color: #f9f0e8;
  padding: 12px;
  margin: 16px 0;
  border-radius: var(--cocoon-badge-border-radius);
}


/* 少し大きめのスマホ（画面幅768px以下）の時のロゴサイズを調整したい場合はこちら（必要に応じて） */
/*
@media screen and (max-width: 768px) {
  .header-site-logo-image {
    max-width: 80%; 
    height: auto;
  }
}
*/

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

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

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