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

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

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

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

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








/************************************
** 基本表示
************************************/
/*初期化*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  word-wrap: break-word;
}

body {
  /* フォントの種類 */
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', sans-serif;
  font-size: 18px;
  /* フォントの色 */
color: #111;
  /* カーニングの設定 */
  /* 行間の設定 */
  line-height: 1.75;
  margin: 0;
  overflow-wrap: break-word;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
}

/*デフォルトリンク*/
a {
  color: #2121d3;
}
a:hover {
  color: #d32121;
}


#navi {
background: #0095d9;
}

.navi-in > ul li {
width: auto;
height: 51px;
line-height: 51px;
margin: 0 0px;
}

.navi-in a {
font-size: 15px;
color: #fff;
padding-right: 20px; 
padding-left: 20px; 
}

.navi-in a:hover {
color: #fff;
background: #0095d9;
background: #00b7fb;
transition: all 1.2s 0.1s ease-in-out;
transform: scale(1,1.1);
} 

#wp-admin-bar-site-name{
font-size: 30px;
font-weight: 800;
}



/************************************
** 目次 - 鮮やかな青
************************************/

.toc {
width: 100%;
font-size: 16px;
line-height: 1.7;
padding: 1em 1em ;
	border-top-left-radius:7px;
	border-top-right-radius:7px;
	border-bottom-left-radius:7px;
	border-bottom-right-radius:7px;
border: 1px solid #efefef;
margin-bottom: 1em;
display: table;
}

.toc-title {
 color: white;
font-size: 16px;
text-align: center;
display: block;
  padding: 5px 0px;
background: #396cd7;
border-top-left-radius:3px;
border-top-right-radius:3px;
}

.toc-title:before{
font-family: "Font Awesome 5 Free";
content: "\f03a";
font-weight: 800;
alignment-baseline;
margin-right: 0.5em;
}

.toc-list.open {
    padding: 0 1em;
}

ol.toc-list{
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
margin-bottom: 1em;
}

.toc ul, .toc ol {
padding-left: 0px;
margin-top: 0.5em;
}

.toc ul {
list-style: none;
padding-left: 0px;
}

.toc a{
color: #222;
text-decoration: none;
transition:all 200ms ease-in-out;
}

.toc a:hover {
    text-decoration: underline;
    color: #09f;
}

ol.toc-list > li > a{
font-weight:normal;
line-height: 1.6em;
margin-top: 1em;
}

ol.toc-list > li:before {
counter-increment: item;
content: counter(item)'';
display: inline-block;
width: 1.4em;
height: 1.4em;
line-height: 1.4em;
text-align: center;
background: #396cd7;
color: white;
border-radius: 50%;
margin-right: .4em;
}

ol.toc-list li {
margin: 0.6em 0;
}

.toc-list > li li{
margin-left: 2.2em;
}
.toc-list>li>ol>ol {
padding-left: 0;/*小見出し一つの時用*/
}

@media (max-width:480px){
.toc{
width:100%;
}
}



p {
font-size: 18px;
color: #222;
line-height: 2em;
margin: 2em 0 2em 0;
}

h1.entry-title{
font-size: 24px;
line-height: 1.5;
font-weight: 800;
margin-bottom: 30px;
}

/*480px以下*/
@media screen and (max-width: 480px){
h1.entry-title{
font-size: 20px;
padding: .5em .5em;
margin: 20px -10px;
}
}

.article h2 {
position: relative;
color:#fff;
font-size: 20px;
font-weight: 800;
line-height: 1.5;
border: none;
padding: .7em .5em .6em .7em;
margin: 30px 0px;
background: #0095d9;
background: #44617b;
background: #396cd7;
border: double 4px #fff;
}

/*480px以下*/
@media screen and (max-width: 480px){
.article h2 {
font-size: 18px;
padding: .7em .5em .7em .7em ;
margin: 30px -10px;
}
}

.entry-card-snippet h2,
h2 a.entry-title-link {
font-size: 18px ;
color: #222;
line-height: 1.6;
margin: 15px 0 ;
}


h2.entry-card-title, h2.card-title {
font-size: 18px;
line-height: 1.6;
}

/*480px以下*/
@media screen and (max-width: 480px){
h2.entry-card-title, h2.card-title {
font-size: 16px;
line-height: 1.4;
}
}

.entry-card-snippet, .card-snippet {
font-size: 18px;
color: #222;
line-height: 1.6;
}

/*480px以下*/
@media screen and (max-width: 480px){
.entry-card-snippet, .card-snippet {
font-size: 16px;
line-height: 1.6;
}
}


.article h3,
#comment-area h3,
#related-entries h2 {
font-size: 20px;
font-weight: 800;
color: #222;
line-height: 1.5;
padding: 0.5em 0.3em 0.4em 0.6em;
margin: 30px 0px;
border: none;
border-left: 6px solid #396cd7;
}

/*480px以下*/
@media screen and (max-width: 480px){

.article h3 {
font-size: 19px;
margin: 28px -6px 30px -8px;
}
}

.article h4, .article h5{
font-size: 18px;
font-weight: 800;
margin: 20px 0px;
}

/*480px以下*/
@media screen and (max-width: 480px){

.article h4, .article h5 {
font-size: 18px;
margin: 30px -9px 0 -11px;
}
}
.related-entry-card-content h3.related-entry-card-title, related-entry-card-content h3.card-title {
font-size: 17px;
line-height: 1.5;
font-weight: 600;
}

/*480px以下*/
@media screen and (max-width: 480px){
h3.related-entry-card-title, h3.card-title {
font-size: 16px;
line-height: 1.4;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
.related-entry-card-snippet, .card-snippet {
font-size: 16px;
line-height: 1.4;
}
}


.article .red{
color: #d32121;
color: #F00;
}

.article .orange{
color: #ff7d13;
}

.article .red{
color: #d32121;
color: #F00;
}

.article .orange{
color: #ff7d13;
}


.article dl{
padding: 0 0;
margin: 1em 0;
}

.article dt{ 
color: #222;
font-size: 18px;
font-weight:800;
line-height: 2;
padding: 0px 0px 0px 0px;
margin: 1em 0px 0 0px;
display:block;
}

.article dd{ 
color:#222;
font-size: 18px;
line-height: 2;
padding: 0px 0px 0px 0px;
margin: 1em 0px 0 0px;
border-bottom: 1px dotted #ccc;
}

/*480px以下*/
@media screen and (max-width: 480px){
.article dt, .article dd, .article li{
font-size: 16px;
line-height: 1.4;
}
}

dl.outline{
clear:both;
width: 100%;
background:#eee;
padding:0px;
border: 1px solid #ddd;
margin:0px 7px 15px 0;
}

dl.outline dt{
float:left;
clear:both;
width:120px;
height: auto;
font-size: 17px;
color: #222;
text-align:center;
line-height: 1.8;
background:#eee;
padding: .5em .1em;
border-top: 1px solid #fdfdfd;
border-bottom: none;
margin:0px 0px 0px 0px;
}

dl.outline dd{
color: #222;
width:auto;
height: auto;
text-align:left;
font-size: 18px;
line-height: 1.8;
background-color:#eee;
padding: .5em ;
border-top: 1px solid #fdfdfd;
border-left: 1px solid #009FEB;
margin:0px 0px 0px 121px;
}

/*480px以下*/
@media screen and (max-width: 480px){
dl.outline dt{
font-size: 15px;
padding: 12px 15px;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
dl.outline dd{
font-size: 16px;
padding: 10px 15px;
}
}

.admain{
text-align: center;
margin: 1.5em auto;
}

/************************************
** サイド　とりおき

.sidebar h3 {
font-size: 16px;
color: #fff;
font-weight: 400;
padding: 5px 0 5px 1em;
margin: 1em 0;
background: #009fd6;
border-radius: 0 10px 0 10px;
}

************************************/

.sidebar h3 {
font-size: 17px;
color: #fff;
text-align: center;
font-weight: 600;
padding: 7px 10px 6px 10px;
margin: 1em 0 0.5em;
border: double 3px #fff;
background: #0095d9;
}

/************************************
** カテゴリーのラベル
************************************/

.cat-label {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  border: 1px solid #fff;
  font-size: 11px;
  color: #fff;
  background-color: rgba(51, 51, 51, 0.7);
background-color:#4ec4d3;
padding: 3px 6px 2px 6px;
border: 1px solid #fff;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

/*本文下カテゴリ*/
.cat-link {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-right: 5px;
  padding: 3px 7px 2px;
  font-size: 12px;
  background-color: #dd4e42;
  border-radius: 2px;
  word-break: break-all;
}

.cat-link:hover {
  color: #fff;
  background-color: #65b145;
  transition: all 0.5s ease;
}

ul li.cat-item {
font-size: 16px;
border-bottom: 1px dotted #ccc;
line-height: 1.5;
margin: 0 0;
padding: 0px 0px 0px 0px;
}


/************************************
** 新着記事ウィジェット（デフォルト）
************************************/
.widget-entry-cards .a-wrap {
  padding: 5px 3px;
line-height: 1.5;
  margin-bottom: 4px;
}
.widget-entry-cards .widget-entry-card {
  font-size: 0.8em;
  position: relative;
}
.widget-entry-cards figure {
  width: 120px;
}
.widget-entry-cards .widget-entry-card-content {
  margin-left: 124px;
}
.widget-entry-cards .widget-entry-card-pv {
  margin-left: 5px;
  font-style: italic;
  font-size: 0.8em;
}


.new-entry-card-title, .widget-entry-card-title card-title {
font-size: 16px;
font-weight: 400;
color: #222;
}

/************************************
** 新着記事ウィジェット（大きなサムネイル）
************************************/
.widget-entry-cards.not-default .a-wrap {
  max-width: 400px;
}
.widget-entry-cards.not-default .e-card {
  font-size: 16px;
}
.widget-entry-cards.not-default figure {
  float: none;
  width: 100%;
}
.widget-entry-cards.not-default figure img {
  width: 100%;
}
.widget-entry-cards.not-default .card-content {
  margin: 0 0 0.5em;
}
.widget-entry-cards.not-default .widget-entry-card-pv {
  opacity: 0.7;
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 6px;
  background-color: #333;
background-color: #009fd6;
  color: #fff;
}

/************************************
** 新着記事ウィジェット（タイトルを重ねた大きなサムネイル）
************************************/
.widget-entry-cards.large-thumb-on .a-wrap:hover {
  opacity: 0.7;
}
.widget-entry-cards.large-thumb-on .e-card {
  position: relative;
}
.widget-entry-cards.large-thumb-on .card-content {
  margin: 0;
}
.widget-entry-cards.large-thumb-on .card-title {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 10px 5px;
  background-color: rgba(51, 51, 51, 0.7);
background-color: #009fd6;
  color: #fff;
  max-height: 30%;
  overflow: hidden;
}

/************************************
** 人気記事ウィジェットランキング表示
************************************/
.widget-entry-cards.ranking-visible {
  counter-reset: p-rank;
}
.widget-entry-cards.ranking-visible .widget-entry-card-thumb {
  counter-increment: p-rank;
}
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before {
  content: counter(p-rank);
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px;
  width: 16px;
  height: 16px;
line-height: 16px;
background-color: #0095d9;
  color: #fff;
  opacity: 0.8;
  text-align: center;
  font-size: 14px;
  font-family: Arial,sans-serif;
  z-index: 1;
}


.popular-entry-card-title, .widget-entry-card-title card-title {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #222;
}

/*タグクラウド*/
.tagcloud a {
font-size: 15px;
margin: 3px;
}


/*引用*/
blockquote{
	position:relative;
	color:#3F3F3F;
	margin-top:20px;
	padding:20px 20px 20px 70px;
	background-color: #F2F2F2;
}
blockquote::before{
	position:absolute;
	top:10px;
	left:20px;
	font-family: "icomoon";
	content: "\e909";
	font-size:3rem;
	color:#D9D9D9;
}


.video-container {
	max-width: none;
}