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

/************************************
** 子テーマ用のスタイルを書く
************************************/
a {
    color: #333;
}

/*フォント調整*/

blockquote {
    font-size: 14px;
}
#sidebar .textwidget{
    font-size: 14px;
}
.read-time {
    text-align: right;
    font-size: 1.0em;
}

.widget-entry-card {
    font-size: 14px;
}

.new-entry-card-title{
    font-size: 14px;
line-height: 1.8;
padding-left: 2px;
}

.recent-comment-article {
    font-size: 14px;
}

.recent-comment-content {
    font-size: .8em;

}

#text-12 p{
    font-size: 14px;
}


.widget-related-entry-card figure{
    width:60px !important;
}
.widget-related-entry-card-content{
    margin-left: 66px !important;
}

#navi .navi-in>.menu-mobile li {
    width: 50%;
    height: 50px;
    line-height: 50px;
}

/* 記事本文内のリンク（通常時） */
.entry-content a {
    color: var(--underline-red) !important; /* リンクと分かりやすく赤系に */
    text-decoration: underline; /* リンクであることを明示 */
    transition: opacity 0.3s var(--easing);
}

/* 記事本文内のリンク（ホバー時） */
.entry-content a:hover {
    color: var(--text-main) !important; /* ホバーで白く光る演出 */
    opacity: 0.8;
    text-decoration: none;
}

/* もし「文字色と同じ白がいい」場合はこちら */
/*
.entry-content a {
    color: var(--text-main) !important;
    text-decoration: underline;
    text-decoration-color: var(--underline-red); 
}
*/


/************************************
** 著者情報
************************************/
.feedly-button,.rss-button{
display:none !important;
}
/************************************
** CTA
************************************/
.cta-box {
    margin-bottom: 30px;
}

/************************************
** フッター
************************************/
/* ここから下がボタンのCSS　*/
.btn-footer {
    display: inline-block;
    padding: .3em 2em;
    text-decoration: none;
    border: solid 2px #ccc;
    border-radius: 3px;
    transition: .4s;
    margin: 1em 0 2em;
    font-size: 16px;
    border-radius: 99px;
    background-color: #f3a68c !important;
    color: #000 !important;
    box-shadow: 0 2px 3px rgb(0 0 0 / 7%), 0 2px 3px -2px rgb(0 0 0 / 7%);
    border: 0;
}

#footer, #footer a:not(.sns-button), .footer-title
 {
    color: #faf8f7;}

#footer .textwidget{
font-size:14px;
}

.footer-title{
font-weight:normal;
}

@media screen and (max-width: 768px) {
	.footer-widgets {
		display: block;
	}
}
#footer .textwidget p{
padding:13px;
}


/************************************
**　ボックスメニュー調整
************************************/

#custom_html-16 .box-menu{
  width:calc(100%/3) !important;
  padding: 1em 2px 5px 2px;
  min-height:80px !important;
  box-shadow:none;
}



/************************************
**　吹き出し調整
************************************/
/* Cocoon用設定 */
.speech-person {
    width: 150px;
min-width: 150px;
margin-left:8px;
margin-right:8px;
}
.speech-balloon{
margin-top: 70px;
}

/* 旧設定で必要なもの */
.answer_image img,.question_image img {
    width: 150px;
}

.answer_image img,.question_image img {
    width: 150px;/*左右のキャラの画像の大きさ*/
}
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}
.arrow_question {
    float: right;
}

/* 共通設定 */
.question_Box p, .speech-balloon p{
	line-height: 1.5;
}
.arrow_answer, .arrow_question, .sbp-r .speech-balloon, .sbp-l .speech-balloon {
    position: relative;

    padding: 3.5% 3.5%;

    width: 70%; /*吹き出しの幅*/
 display:flex;}


/* 関連記事見出し */

.tagmidasi {
  position: relative;
  display: inline-block;
  height: 44px;
  margin-left: 20px;
  margin-bottom: 14px;
  padding: 0.5rem 1.5rem 1rem 1.5rem;
  color: #fff;
  background: #777;
}

.tagmidasi:before {
  position: absolute;
  top: 0;
  left: -20px;
  content: '';
  border-width: 22px 20px 22px 0;
  border-style: solid;
  border-color: transparent #777 transparent transparent;
}

.tagmidasi:after {
  position: absolute;
  top: calc(50% - 7px);
  left: -7px;
  width: 12px;
  height: 12px;
  content: '';
  border-radius: 50%;
  background: #fff;
}

/************************************
**　固定ページ
************************************/
/* 利用規約・サイトマップ、色々消去 */
.page-id-728 .sns-share,.page-id-14412 .sns-share{
display: none;
}


/************************************
**　検索ボックス
************************************/
 .search-edit {
    padding: 15px !important;
}

.search-submit {
    font-size: 24px !important;
}

.cta-thumb img{
width:761px;
height:485px;
}

/************************************
**　メインビジュアル
************************************/


.appeal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    
    background-size: cover;
    background-position: center;
    background-attachment: scroll !important;
    
    /* 要素を画面中央から全幅に広げる */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;

    /* ★上下をぼかすマスク設定★ */
    mask-image: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 0%,    /* 上端：完全に透明 */
        rgba(0, 0, 0, 1) 15%,   /* 上から15%の位置：完全に不透明 */
        rgba(0, 0, 0, 1) 85%,   /* 下から15%の位置：完全に不透明 */
        rgba(0, 0, 0, 0) 100%   /* 下端：完全に透明 */
    );
    -webkit-mask-image: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 1) 15%, 
        rgba(0, 0, 0, 1) 85%, 
        rgba(0, 0, 0, 0) 100%
    );
}

/* ナビゲーションが隠れないようにz-indexを明示 */
#navi, .header-container {
    z-index: 100 !important;
}



/************************************
**　メインビジュアル（文字）
************************************/

/* アピールエリアのコンテンツ全体 */
.appeal-content {
    background: none !important;
    /* ★戦術1：中心にだけ薄い「影の溜まり」を作る（円形グラデーション） */
    background: radial-gradient(
        circle, 
        rgba(0, 0, 0, 0.5) 0%,   /* 中心は50%の黒 */
        rgba(0, 0, 0, 0.2) 50%,  /* 徐々に薄く */
        rgba(0, 0, 0, 0) 80%     /* 外側は完全に透明 */
    ) !important;
    padding: 60px 40px !important;
    max-width: 900px;
}

/* タイトルの視認性強化 */
.appeal-title {
    font-size: 3.2rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    /* 黒い縁取りをより濃く、重厚に */
    text-shadow: 
        0 0 15px rgba(255, 140, 126, 0.6), /* キーカラーの発光 */
        0 0 20px rgba(0, 0, 0, 1),         /* 濃い霧 */
        2px 2px 0px rgba(0, 0, 0, 1),       /* クッキリした輪郭 */
        -2px -2px 0px rgba(0, 0, 0, 1);
/* (既存の設定は維持) */
    
    /* PCでは中央配置 */
    background-position: center center; 
}


/* メッセージの視認性強化（ここが本番） */
.appeal-content .appeal-message {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important; /* 太さを「700」以上にアップ */
    line-height: 2.0 !important; /* 行間をさらに広げて文字間に「黒」を挟む */
    
    /* ★戦術2：多重シャドウで背景を塗りつぶす */
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 0, 0, 1),
        0 0 30px rgba(0, 0, 0, 0.8),
        1px 1px 2px rgba(0, 0, 0, 1);
}

/* タイトルとメッセージの間の余白 */
.appeal-title {
    margin-bottom: 25px !important;
}


/* モバイル（スマホ）用の調整 */
@media screen and (max-width: 768px) {
    .appeal {
        /* ★ここがポイント：右から数えて何%の位置に画像を固定するか指定★ */
        /* 右側にキャラクターがいるので「right」基点で微調整します */
        background-position: right 25% center !important; 
        
        /* スマホだと文字が大きすぎる場合があるので微調整 */
        min-height: 80vh; /* 少し高さを抑えると、顔が見えやすくなる場合もあります */
    }
    
    .appeal-title {
        font-size: 2.2rem !important; /* スマホ用にサイズダウン */
    }
    
    .appeal-message {
        font-size: 1rem !important;
        padding: 0 10px; /* 画面端に文字がくっつかないように */
    }
}

/************************************
**　メインビジュアル（矢印）
************************************/

/* Scroll Down 矢印のスタイル */
.scroll-down {
    margin-top: 40px; /* 文章との間隔 */
    text-align: center;
}

.scroll-down i {
    color: #f3a68c !important; /* 魂のサーモンピンク */
    font-size: 1.5rem;
    filter: drop-shadow(0 0 5px rgba(243, 166, 140, 0.6));
    animation: bounce 2s infinite; /* 2秒周期で無限に跳ねる */
}

/* 上下にふわふわ動くアニメーションの定義 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px); /* 上に少し浮く */
    }
    60% {
        transform: translateY(-5px);
    }
}


/************************************
** フッター
************************************/

/* フッターを闇に還す */
#footer {
    background-color: #1a1a1a !important; /* 背景を黒に */
    color: #ccc !important;               /* 文字をグレーに */
}

/* フッター内のリンクも救済 */
#footer a {
    color: #333 !important;
    opacity: 0.7; /* さっきの透過テクニックで馴染ませる */
}

/* ついでにコピーライト周りも */
.footer-bottom {
    background-color: #111 !important;
    border-top: 1px solid #333;
}

/* 特定のテキストウィジェット（#text-95）をダークテーマ用カードにする */
/* ウィジェット全体をサーモンピンクで統一 */
#custom_html-16,
#custom_html-16 * {
    color: #f3a68c !important;
}

/* アイコンも白からサーモンピンクへ */
#custom_html-16 i,
#custom_html-16 .fa,
#custom_html-16 .fas,
#custom_html-16 .fab,
#custom_html-16 .far {
    color: #f3a68c !important;
}

/* リンク：ホバーした時に少し明るく（白っぽく）なる演出 */
#custom_html-16 a:hover,
#custom_html-16 a:hover i {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

/* ついでに、ウィジェットのタイトルがあるならその線も合わせる */
.widget-sidebar-title {
    border-bottom-color: rgba(243, 166, 140, 0.3) !important;
}

/************************************
** 検索ボタン
************************************/
/* 検索ボタン本体の装飾 */
.search-submit {
    background-color: #f3a68c !important; /* 背景をサーモンピンクに */
    border: none !important;
    color: #ffffff !important; /* アイコン（フォント）を白に固定 */
    transition: all 0.3s var(--easing);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 4px 4px 0; /* 入力欄との一体感を出す（右側だけ丸める） */
}

/* 検索アイコン（fontawesome）の色を白で上書き */
.search-submit span.fa-search,
.search-submit .fas {
    color: #ffffff !important;
}

/* ホバー時の演出：SNSアイコンと統一感を出す */
.search-submit:hover {
    background-color: #ffffff !important; /* 背景を白に反転 */
    color: #f3a68c !important; /* アイコンをピンクに反転 */
    opacity: 1 !important;
}

/* ホバー時にアイコンの色も確実に変える */
.search-submit:hover span.fa-search {
    color: #f3a68c !important;
}

/************************************
** 記事カード
************************************/


/* カード本体：静止時は目立たない程度の境界線 */
.entry-card-wrap {
    background-color: var(--bg3) !important;
    border: 1px solid rgba(243, 166, 140, 0) !important; /* 透明な線を用意しておく */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    top: 0;
    transition: all 0.4s var(--easing);
}

/* ホバー時：サーモンピンクの境界線を「発光」させて復活 */
.entry-card-wrap:hover {
    top: -5px;
    background-color: var(--bg2) !important;
    /* ここでピンクの線を復活！ 0.6程度の不透明度で光らせる */
    border: 1px solid rgba(243, 166, 140, 0.6) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
                0 0 10px rgba(243, 166, 140, 0.2); /* 外側にも微かなピンクの光 */
}

/* アイキャッチ画像の拡大（先ほどのズレ対策を維持） */
.entry-card-thumb {
    overflow: hidden !important;
}

.entry-card-thumb img {
    transition: transform 0.8s var(--easing) !important;
    will-change: transform;
}

.entry-card-wrap:hover .entry-card-thumb img {
    transform: scale(1.08) !important;
}






/* 1. カテゴリーラベルと投稿日の初期状態：透明にする */
.entry-card-wrap .cat-label,
.entry-card-wrap .post-date,
.entry-card-wrap .post-update {
    opacity: 0;
    transform: translateY(5px); /* 少し下に沈めておく */
    transition: opacity 0.4s var(--easing), transform 0.4s var(--easing);
}

/* 2. ホバー時：スッと浮かび上がらせる */
.entry-card-wrap:hover .cat-label,
.entry-card-wrap:hover .post-date,
.entry-card-wrap:hover .post-update {
    opacity: 1;
    transform: translateY(0);
}

/* 3. （お好みで）カテゴリーラベルの装飾をミニマルに */
.cat-label {
    background-color: var(--bg2) !important; /* 背景に馴染ませる */
    color: var(--text-main) !important;
    border: 1px solid var(--underline-red); /* サーモンピンクのアクセント */
    border-radius: 2px;
}

/************************************
** 著者情報
************************************/


/* 著者情報の名前（リンク）の色を上書き */
.author-info .author-name,
.author-info .author-name a,
.author-content .author-name,
.author-content .author-name a {
    color: var(--text-main) !important;
}

/* ついでに「この記事を書いた人」などのラベルも調整 */
.author-info .author-label {
    color: var(--text-main);
    opacity: 0.8;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/


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

}