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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* style.css */
/* 基本的なリセットと全体のスタイル */
*,
*::before,
*::after {
    box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
}

body {
    font-family: 'Noto Sans JP', sans-serif; /* モダンな日本語フォント */
    font-size: 16px;                         /* 基本のフォントサイズ */
    line-height: 1.7;                        /* 行間を少し広めに */
    color: #333333;                          /* 基本の文字色 (濃いグレー) */
    background-color: #F8F9FA;               /* 背景色 (ごく薄いグレー) */
    margin: 0;
    -webkit-font-smoothing: antialiased;     /* フォントを滑らかに (Mac) */
    -moz-osx-font-smoothing: grayscale;      /* フォントを滑らかに (Firefox) */
}

/* サイト全体のコンテナ (必要に応じて幅を調整) */
.container { /* テーマによっては .site-content や .content-area など */
    max-width: 1140px; /* 最大幅 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* 見出しのスタイル */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans JP', sans-serif; /* 見出しも統一 */
    color: #2c3e50;                          /* 見出しの色 (少し濃いめの落ち着いた色) */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    line-height: 1.3;
    font-weight: 700; /* 太字 */
}

h1 { font-size: 2.8em; } /* 例: サイトタイトルやページタイトル */
h2 { font-size: 2.2em; } /* 例: セクションタイトル */
h3 { font-size: 1.8em; }
/* 以下、必要に応じて調整 */
/* リンクのスタイル */
a {
    color: #007bff; /* リンクの色 (例: 明るい青) */
    text-decoration: none; /* 下線を消す */
    transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
    color: #0056b3; /* ホバー時の色 (少し濃い青) */
    text-decoration: underline; /* ホバー時に下線を表示 */
}

/* ボタンのスタイル */
.button, /* テーマのボタンクラスや、自分で作るクラス */
input[type="submit"],
button {
    display: inline-block;
    padding: 12px 25px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #007bff; /* メインのアクセントカラー (青系) */
    border: none;
    border-radius: 5px; /* 角を少し丸くする */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
}

.button:hover,
input[type="submit"]:hover,
button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
    color: #ffffff;
    transform: translateY(-1px); /* 少し浮き上がる効果 */
}

/* サブのボタン (例: 透明背景に枠線) */
.button-secondary {
    background-color: transparent;
    color: #007bff;
    border: 2px solid #007bff;
}

.button-secondary:hover {
    background-color: #007bff;
    color: #ffffff;
}

/* セクションのスタイル */
.content-section { /* 自分で作るクラス名 */
    padding: 40px 0; /* 上下の余白 */
    margin-bottom: 30px;
}

.content-section.bg-light { /* 背景を少し変える場合 */
    background-color: #ffffff; /* 白背景 */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* わずかな影 */
    padding: 30px;
}

.content-section h2 { /* セクション内の見出し */
    text-align: center;
    margin-bottom: 40px;
    font-size: 2em;
}

.entry-content h2, /* 記事本文中のh2タグなど、対象のセレクタに調整してください */
.widget-title,    /* ウィジェットのタイトルなど */
.page-title       /* ページタイトルなど */
{
    font-family: 'M PLUS Rounded 1c', sans-serif; /* 丸ゴシックを指定 */
    font-weight: 700; /* 少し太め */
    color: #5D4037; /* 優しいブラウン系の文字色 */
    background-color: #FFF3E0; /* 淡いオレンジ系の背景色 */
    padding: 10px 20px;
    border-radius: 8px; /* 角を丸くする */
    display: inline-block; /* 背景色を文字幅に合わせる */
    margin-bottom: 25px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* ちょっとした影 */
}

/* もし特定のセクションの見出しだけ変えたい場合 */
.my-cute-section h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #AD1457; /* 少し濃いめのピンク */
    background-color: #FCE4EC; /* 淡いピンク */
    padding: 12px 22px;
    border-radius: 30px 5px 30px 5px; /* ちょっと変わった角丸 */
    display: inline-block;
    margin-bottom: 25px;
}

.entry-content h3, /* 記事本文中のh3タグなど */
.another-cute-heading /* 自分でクラス名をつけた要素 */
{
    font-family: 'Yomogi', cursive; /* 手書き風フォント */
    color: #4A148C; /* 濃いめの紫 */
    font-size: 1.8em; /* 少し大きめに */
    padding-bottom: 8px; /* 下線とのスペース */
    border-bottom: 3px dashed #FFC107; /* 黄色の点線の下線 */
    display: inline; /* 下線を文字幅に合わせる */
    line-height: 1.5; /* 行間調整 */
}

/* 波線の下線にする場合 */
.wavy-underline-heading {
    font-family: 'Yomogi', cursive;
    color: #00796B; /* ティールグリーン */
    padding-bottom: 5px;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: #FF80AB; /* ピンクの波線 */
    text-underline-offset: 4px; /* 下線と文字の間のスペース */
}

.heading-with-icon::before { /* 見出しの前 */
    content: "\f1b0"; /* Font Awesomeの猫のアイコンの例 (fa-paw) */
    font-family: "Font Awesome 5 Free"; /* Font Awesomeのフォントファミリー */
    font-weight: 900; /* Solidスタイルを使う場合 */
    color: #FF9800; /* オレンジ色 */
    margin-right: 10px;
    font-size: 0.9em; /* アイコンのサイズ調整 */
}

.heading-with-icon {
    font-family: 'Arial', sans-serif; /* 通常のフォント */
    color: #3F51B5; /* インディゴブルー */
    font-size: 1.6em;
}

/* ハートアイコンの例 */
.heart-heading::after { /* 見出しの後ろ */
    content: "\f004"; /* Font Awesomeのハートアイコン (fa-heart) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Solidの場合 */
    /* font-weight: 400; Regularの場合 */
    color: #E91E63; /* ピンク */
    margin-left: 8px;
    font-size: 0.8em;
}

h1.site-title, /* サイトタイトルなど、具体的なセレクタに調整してください */
h1.entry-title,  /* 記事のタイトルなど */
h1.page-header-title /* ページヘッダーのタイトルなど */
{
    font-family: 'Noto Sans JP', sans-serif; /* モダンなフォント例 */
    font-size: 2.8em; /* フォントサイズ */
    color: #2c3e50; /* 落ち着いた濃いめの色 */
    margin-bottom: 20px; /* 下の余白 */
    padding-bottom: 10px; /* 下線とのスペース */
    border-bottom: 3px solid #007bff; /* アクセントカラーの下線 (例: 青) */
    display: inline-block; /* 下線を文字幅に合わせる */
    line-height: 1.3;
}

/* 少し柔らかい印象の下線 */
h1.soft-underline {
    font-family: 'M PLUS Rounded 1c', sans-serif; /* 丸みのあるフォント例 */
    color: #4A5568; /* 少し明るめのグレー */
    padding-bottom: 8px;
    border-bottom: 4px dotted #A0AEC0; /* ドットの下線 (グレー系) */
    display: inline-block;
}

h1.highlighted-title {
    font-family: 'Roboto', sans-serif; /* シンプルで読みやすいフォント例 */
    font-weight: 700;
    color: #ffffff; /* 文字色 (白) */
    background-color: #3498db; /* 背景色 (例: 明るい青) */
    padding: 15px 25px;
    border-radius: 8px; /* 角を丸くする */
    display: inline-block;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); /* わずかな影 */
    margin-bottom: 30px;
    font-size: 2.5em;
}

/* グラデーション背景の例 */
h1.gradient-title {
    font-family: 'Lato', sans-serif;
    color: white;
    background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); /* 紫から青へのグラデーション */
    padding: 18px 30px;
    border-radius: 50px; /* 楕円形っぽく */
    display: inline-block;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    font-size: 2.6em;
}

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

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

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