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

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

/* 「デザインリセット用のコード」 */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

/* 見出しのデザイン設定 */
/* H2 */
.entry-content h2 {
  font-size: 26px !important;/*文字のサイズ*/
  position: relative;
  color: #323232;
  padding: .8em;
  background: linear-gradient(rgba(163,209,255,.9) 0%, rgba(163,209,255,.85)  50%, rgba(163,209,255,1)  50%) ;
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;
}

/* H3 */
.entry-content h3 {
  font-size: 24px !important;/*文字のサイズ*/
  border-left: 6px solid  #A3D1FF;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(123,134,198,.07);/*背景色*/
  color: #323232;
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;
}

/* H4 */
.entry-content h4 {
  font-size: 20px !important;/*文字のサイズ*/
  border-top: 3px solid #A3D1FF;/*上線*/
  border-bottom: 3px solid #A3D1FF;/*下線*/
  color: #323232;
  padding: .5em 0;
  margin-bottom: 15px;
}

/* H5 */
.entry-content h5{
color: #323232; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 10px;
border-bottom: dashed 3px #A3D1FF;/* 下側に点線・色*/
}

/* H6 */
.entry-content h6{
color: #323232; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 5px;
border-left: solid 3px#A3D1FF; /* 左側に実線・色*/
}


/************************************
****　サイドバー
************************************/
#sidebar>.widget{
border-radius:10px;
}
.widget_search{
padding:0;
}
span.fas.fa-search::before{
color:#A3D1FF;/*検索マーク色変更はこちら*/
}
.sidebar h3{
color:#505050;
border-radius: 0%;
border-bottom:3px dotted;
border-color:#A3D1FF;/*タイトル下のライン色変更はこちら*/
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
background-color:#ffffff;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{
background-color:#9eff9e;/*マウスオーバー時の背景色変更はこちら*/
color:#fff!important;
}
.tagcloud a{
background-color:#ffffff;
}
.tagcloud a:hover{
background-color:#9eff9e;/*マウスオーバー時の背景色変更はこちら*/
color:#fff!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {
margin: 0 0 1em;
width: 90%;
}
.widget-entry-cards .widget-entry-card-content{
color: #505050;
}


/************************************
**　　グローバルナビメニュー 装飾
************************************/

/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 10px;/*線の位置*/
bottom: 10px;/*線の位置*/
height: 3px;/*線の高さ*/
width: 84%;/*線の幅*/
background: #ffff7a;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#0000ff; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#ffff7a; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 200;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #header-container #navi a{
    font-size:0.8em;
    padding: 1em 1.2em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}


/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
font-size: 18px;
}


/* インデックスカード タイトル文字色 */
.entry-card-title,
.e-card-info > span{
color: #505050;
}



/************************************
** 拡張スタイル「タブボックス」のデザインをスタイリッシュにする
************************************/

/*枠組み*/
.blank-box.bb-tab {
	position: relative; /*要素の配置*/
	padding: 2.2em 1.2em 1em; /*内側の余白*/
	border-width: 1px; /*線の太さ*/
	border-radius: 0; /*丸み*/
	font-size: .9375em; /*文字の大きさ*/
}

/*ラベル*/
.blank-box.bb-tab .bb-label {
	position: absolute; /*要素の配置*/
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	border-radius: 0; /*丸み*/
	font-style: italic; /*文字のスタイル*/
	font-size: .833333em; /*文字の大きさ*/
}

/*ブロックエディター用*/
.blank-box.bb-tab::before {
	position: absolute; /*要素の配置*/
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	border-radius: 0; /*丸み*/
	font-style: italic; /*文字のスタイル*/
	font-size: .833333em; /*文字の大きさ*/
}

.toc-title {
    font-weight: bold;
}
 
.toc {
	background: #f4f5f7;
	border: 2px solid;
	color: #0693cd;
	font-size: 16px;
}
 
.toc a {
	color: #0693cd;
}

/************************************
** ページネーションの変更
************************************/

.pagination-next-link {
  background-color: #49add1;
  color: #fff;
  border: none;
  border-radius: 30px;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2); /*「次のページ」部分の影*/
}
.pagination-next-link:hover {
  background-color: #68caee;
  transition: all 0.5s ease;
  color: #fff;
}
.page-numbers {
  color: #49add1;
  border: 1px solid #49add1;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); /*数字部分の影*/
}
.pagination .current {
  background-color: #49add1;
  color: #fff;
}
.page-numbers.dots {
  opacity: 1;
  background: none;
}
.pagination a:hover {
  background-color: #49add1;
  color: #fff;
}
a.prev, a.next {
  display: none;
}
@media screen and (max-width: 480px) {
.page-numbers {
  width: 48px;
  height: 48px;
  line-height: 48px;
}
}

/* 内部ブログカードのURLを非表示 */
.internal-blogcard-site {
    display: none;
}



/************************************
** ブログカード　続きを読むを入れる
************************************/

.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #ff9e9e; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #000080; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}


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



/************************************
** ヘッダー背景透明化
************************************/
.header-container {
background-color: transparent;
}

/************************************
** ナビゲーションメニュー背景透明化
************************************/
.navi {
background-color: transparent;
}

/************************/
/* 固定ページの不要情報を非表示 */
/************************/
.page .date-tags, /*投稿日・更新日*/
.page .author-info, /*投稿者情報*/
.page .eye-catch-wrap { /*アイキャッチ*/
display: none;
}

/************************/
/* インデックス、サイドバーを透過0～100％で調整 */
/************************/
.header-container,
.main,
.sidebar,
.footer{
  background-color: rgb(255 255 255 / 100%);
}


/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}


/************************/
/* グローバルメニュー下の余白を消す */
/************************/

.content {
  margin-top: 0;
}


/******************
表のデザインを変更
*******************/
/*--- 表全体(table) ---*/
.entry-content table {
    border-bottom: 1px solid #e6e6e6; /* 表の一番下の線 */
    border-top: none;
    border-left: none;
    border-right: none;
}
/*--- ヘッダーセル(th) ---*/
.entry-content th {
    border-radius: 10px 10px 0 0; /* 丸み（※ヘッダーセルが縦の場合は削除）*/
    padding: 0.8em .6em; /* 余白（上下　左右） */
    background-color: #c2e7eb; /* 背景色 */
    color: #7f7fff; /* 文字の色 */
    letter-spacing: 0.1em; /* 文字の間隔 */
    text-align: center; /* 中央揃え */
    border: none; /* 線削除 */
}
.wp-block-table thead {
    border-bottom: none;
}
/*--- 行（横方向）(tr) ---*/
.entry-content tr {
    text-align:center; /* 中央揃え */
}
.entry-content tr:not(:last-child) { /* 最後の行以外に適用 */
    border-bottom: 1px solid #e6e6e6; /* 下線 */
}
/*--- ヘッダーセル以外のセル(td) ---*/
.entry-content td {
    padding: 0.8em 0.8em; /* 余白（上下　左右） */
    border:none; /* 線を削除 */
}
.entry-content td:last-child { /* 最後のセルのみ適用 */
    border-right: 1px solid #e6e6e6; /* 右線 */
}
.entry-content td:not(last-child) { /* 最後のセル以外に適用 */
    border-left: 1px solid #e6e6e6; /* 左線 */
}





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

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

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