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

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

/* ▼▼▼ ブログカード（記事リンク）の表示調整 ▼▼▼ */

/* 内部ブログカードの左下にあるアイコンとURLを非表示 */
.internal-blogcard-footer{
	display: none; 
}

/* ブログカードの抜粋文（記事の冒頭文）を消して、タイトルのみにする */
.blogcard-snippet{
    display:none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
** （画面サイズごとの設定用エリア）
************************************/

/* 画面幅1023px以下（タブレット横向き・PC小さめ） */
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/* 画面幅834px以下（iPad縦向きなど） */
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/* 画面幅480px以下（スマホ縦向き） */
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ▼▼▼ 検索フォームと画像ラベルの調整 ▼▼▼ */

/* Cocoon標準の検索フォームの入力欄の下に少し隙間を作る */
.my_searchform input, .my_searchform select {
	margin-bottom: 0.5em;
}

/* 記事一覧のサムネイル画像に乗っている「カテゴリー名」ラベルを非表示 */
.entry-card .cat-label{
    display: none;
}

/************************************
** 人気ランキングウィジェット表示
************************************/

/* ランキング1位〜3位の数字のデザイン（フォント変更・背景透明化） */
.widget-entry-cards.ranking-visible .card-thumb::before {
    background-color: transparent !important;
    color:#333;
    font-size: 15px;
    font-style: italic; /* 斜体 */
}

/* ランキング数字の背景に「リボン風」の装飾をつける */
.popular-entry-card::before{
    content: "";
    border-bottom: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 24px solid #EFECE9; /* リボンの色 */
    border-left: 24px solid #EFECE9;
    opacity: 0.9;
    top: 0;
    position: absolute;
}

/* ▼▼▼ 新着記事の「NEW!」マーク ▼▼▼ */

/* NEWマークの基本的な見た目（赤背景・白文字） */
.new-txt{
	background-color: #ff0000;/*背景色*/
	color:#fff;/*文字色（白）*/
	font-size:.8em;
	padding:.1em .5em;/*内側余白*/
	border-radius:1px;/*丸み*/
	margin-right:5px;/*NEW！右側の余白*/
}

/* NEWマークを点滅させるアニメーション設定 */
.new-txt {
	animation: blinking 1s ease-in-out infinite alternate;
}
 
/* 点滅の動き（透明度を0から1へ繰り返す） */
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* ▼▼▼ カスタム検索フォーム（地域・条件絞り込み）のデザイン ▼▼▼ */

/* フォーム全体の外枠デザイン（背景グレー・角丸・影付き） */
.custom-search-form {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 「地域」「検索条件」などの見出しデザイン */
.custom-search-form h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

/* 各入力グループ（地域、条件など）の間隔 */
.custom-search-form .form-group {
    margin-bottom: 25px;
}

/* キーワード入力欄のデザイン */
.custom-search-form input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

/* キーワード入力欄をクリックした時の青枠 */
.custom-search-form input[type="text"]:focus {
    border-color: #0066cc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
}

/* チェックボックスを横並びにするレイアウト */
.custom-search-form .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* チェックボックスのラベル文字 */
.custom-search-form label {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    color: #444;
    font-size: 14px;
    cursor: pointer;
}

/* チェックボックス自体の余白 */
.custom-search-form input[type="checkbox"] {
    margin-right: 6px;
    cursor: pointer;
}

/* ボタンエリア（リセット・検索）のレイアウト */
.custom-search-form .form-group.buttons-group {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

/* ボタン共通デザイン（青背景・白文字・角丸） */
.custom-search-form input[type="submit"],
.custom-search-form input[type="button"] {
    flex: 1;
    background-color: #0066cc;
    color: white;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* 検索ボタン（右側）は緑色にする */
.custom-search-form input[type="submit"] {
    background-color: #28a745;
}

/* 検索ボタンのマウスホバー時（濃い緑） */
.custom-search-form input[type="submit"]:hover {
    background-color: #218838;
}

/* リセットボタンのマウスホバー時（濃い青） */
.custom-search-form input[type="button"]:hover {
    background-color: #0056b3;
}

/* ボタンをクリックした時の枠線 */
.custom-search-form input[type="submit"]:focus,
.custom-search-form input[type="button"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.25);
}

/* スマホ表示時（768px以下）の検索フォーム調整 */
@media (max-width: 768px) {
    /* チェックボックスを縦並びに変更して押しやすくする */
    .custom-search-form .checkbox-group {
        flex-direction: column;
        gap: 10px;
    }
     
    .custom-search-form label {
        margin-right: 0;
    }
}

/* 検索結果ページの条件表示エリアのデザイン */
.search-parameters {
    background-color: #f8f9fa;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

/* ▼▼▼ 追加：流れる文字（Marquee）の表示エリア ▼▼▼ */

/* 文字がエリア外に出たら見えなくする（はみ出し防止） */
.notice-area {
  overflow: hidden;
}

/* 流れる文字本体の設定 */
.notice-area span {
    display: inline-block;
    padding-left: 100%; /* 文字が出るまでの助走距離（画面幅いっぱい） */
    white-space: nowrap; /* 文字を折り返さない */
    animation: marquee 15s linear infinite; /* 15秒かけて一定速度で繰り返し動く */
}

/* 動きのルール：スタート時の「溜め」をなくして即座に画面内へ */
@keyframes marquee {
    0% { transform: translateX(0); } /* スタート位置：助走距離を含めた自然な位置から */
    100% { transform: translateX(-100%); } /* ゴール位置：左端へ完全に消えるまで */
}