@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
*/
/* === Brand Color Palette ================== */
:root{
  --bg1:#001B33;
  --bg2:#00385F;
  --c-blue:#00E4FF;
  --c-pink:#FF008C;
  --c-yellow:#FFD64A;

  /* 便利な派生トークン */
  --gradient-main: radial-gradient(circle at 50% 0%, var(--bg2) 0%, var(--bg1) 70%);
  --shadow-blue:0 0 4px var(--c-blue),0 0 8px var(--c-blue),0 0 12px var(--c-blue);
  --shadow-pink:0 0 4px var(--c-pink),0 0 8px var(--c-pink),0 0 12px var(--c-pink);
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
  h3.widget-sidebar-title {
    color: #333333;                     
    background: #ffffff;                
    padding: 0.25em 0.6em;          
    border-top: none;                   
    border-right: none;               
    border-bottom: none;              
    border-left: solid 6px #FF0000;     
  }
/* 矢印 */
.article .arrow-down {
  text-align: center;
}
.article .arrow-down:after {
  content: "\f103";
  font-family: Fontawesome;
  font-size: 2rem;
  color: #000000;
}
/*YouTube動画の中央配置*/
.video-container {
	margin: 0px auto;
}

.widget_archive ul li a { /*親カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 6px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
    border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
    font-size: 16px;
}
.widget_archive ul li a::before { /*親カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "\f0da";
    padding-right: 10px;
}
.widget_archive > ul > li > a:first-child { 
    border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_archive > ul > li > a:last-child {
    border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_archive ul li a .post-count { /*記事数用のコード*/
    display: block;
    float: right;
    background: #ededed;
    padding: 0 1em;
    font-size: 14px;
    margin-top: .2em;
    border-radius: 4px;
}
.widget_archive ul li a:hover { /*親子共通マウスホバー時*/
    background: none;
    transition: 0.5s;
    color: #72c7e6;
}
.widget_archive ul li a:hover .post-count { /*記事数のマウスホバー時*/
    background: #72c7e6;
    color: #fff;
    transition: 0.5s;
}
.widget_archive ul li ul { /*子カテゴリのボックス*/
    border-bottom: 1px dotted #ccc;
}
.widget_archive ul li ul li a { /*子カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 0 4px 4px 4px;
    display: block;
    border: none;
}
.widget_archive ul li ul li a::before { /*子カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "・";
    padding: 0;
}
/*--------------------
  キラッと光るボタン
--------------------*/
.shine-btn {
    margin:2em 1em;
}

.shine-btn a {
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* ホバー時ボタンを凹ませる */
.shine-btn a:hover{
    transform: translateY(4px); /*下に動く*/
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); /*影を小さく*/
    border-bottom: none;
}
/* ボタンをキラッとさせる */
.shine-btn a:before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 100) 81%, rgba(255, 255, 255, 0) 100%);
    animation: shine 3s infinite; /* inifiniteによりずっと続ける */
}
@keyframes shine {
  33% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
/* ==== Cocoon モダンブラックを蹴散らすネオングラス ==== */

/* ▼ナビ本体を捕まえる ── nav#navi の直下 ul が本体！ */
nav#navi ul.navi{
  background:rgba(0,15,40,.35) !important;           /* 透け群青ガラス */
  backdrop-filter:blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%) !important;

  border:1px solid rgba(0,255,255,.25) !important;
  box-shadow:0 6px 24px rgba(0,255,255,.07) !important;

  /* モダンブラックが付けてる余白をゼロに戻す */
  padding:0 !important;
}

/* ▼リストアイテム（li）を横並び */
nav#navi ul.navi > li{
  display:inline-block !important;
}

/* ▼リンク文字をネオンブルー、hoverで光ダマリ */
nav#navi ul.navi > li > a{
  position:relative;
  display:inline-block;
  padding:12px 20px;
  color:#00d4ff !important;              /* デフォ色 */
  font-weight:600;
  text-decoration:none;
  transition:color .25s;
}
nav#navi ul.navi > li > a:hover,
nav#navi ul.navi > li.current > a{
  color:#4ef6ff !important;              /* hover&現在ページ */
}
nav#navi ul.navi > li > a::after{
  content:'';
  position:absolute; inset:0;
  border-radius:6px;
  background:currentColor;
  opacity:0; filter:blur(6px);
  transition:opacity .25s;
}
nav#navi ul.navi > li > a:hover::after,
nav#navi ul.navi > li.current > a::after{
  opacity:.55;
}

/* ▼発光下線 */
nav#navi ul.navi > li > a::before{
  content:'';
  position:absolute; left:15%; right:15%; bottom:4px; height:2px;
  background:currentColor; border-radius:1px;
  opacity:0; filter:blur(2px);
  transition:opacity .25s;
}
nav#navi ul.navi > li > a:hover::before,
nav#navi ul.navi > li.current > a::before{
  opacity:.95;
}

/* ▼スマホは横スクロール１行 */
@media(max-width:834px){
  nav#navi ul.navi{
    overflow-x:auto !important;
    white-space:nowrap !important;
  }
}
/* ── カテゴリー／アーカイブ 見出しをデフォルトへリセット ── */
h3.widget-sidebar-title{
  all: unset;
  font-size: 1.1rem;              /* Cocoon標準っぽい数字に調整 */
  font-weight: 700;
  color: var(--c-heading-color, #fff);
  border-bottom: 1px solid rgba(255, 0, 140, .4); /* ピンク下線にしたいなら残す */
}