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

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

/************************************
** トップへ戻るボタン
************************************/
.go-to-top-button {
  border-radius: 50%; /*丸くする*/
}



/************************************
** contact form7 カスタマイズ　yujiblogからコピペ↓
************************************/
.haveto{
font-size:9px;
padding:2px 5px;
background:#6c9fce;/*必須 色の変更はこちら*/
color:#fff;
border-radius:20px;
margin-right:5px;
position:relative;
bottom:2px;
}
#formbtn{
display: block;
padding:10px;
width:300px;
background:#f7f7f7;
color:#545454;
font-size:17px;
border:none;
border-radius:50px;
margin:25px auto 0;
transition:0.2s;
}
#formbtn:hover{
background:#2E5C6E;/*送信 色の変更はこちら*/
color:#fffff4;
border-radius:50px;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}




/*ブログカードの画像上に表示されるカテゴリラベルを消す*/
.cat-label {
display: none;
}

/*カラム幅を狭める*/
/*PC用*/
.no-sidebar .wrap {
    width: 860px;
}
.breadcrumb.sbp-main-before, 
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
    padding-left: 30px;
    padding-right: 30px;
}
/*480px以下*/
@media screen and (max-width: 480px){
    .no-sidebar .wrap {
        width: auto;
    }
    .breadcrumb.sbp-main-before, 
    .breadcrumb.sbp-footer-before,
    .breadcrumb.pbp-main-before,
    .breadcrumb.pbp-footer-before {
        padding-left: 1em;
        padding-right: 1em;
    }
}

/*次へボタンを非表示*/
.pagination-next {
display: none;
}

/*次へボタンを丸くする*/
.page-numbers {
color: #49add1;
border: 1px solid #49add1;
border-radius: 50%;
}
.pagination .current {
background-color: #49add1;
color: #fff;
}
.page-numbers.dots {
opacity: 1;
background: none;
}
.pagination a:hover {
background-color: #49add1;
color: #fff;
}


/************************************
**ヘッダーロゴ　yujiblogからコピペ↓
************************************/
@media screen and (max-width: 834px){
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}
.logo {/*ロゴ画像を中央に配置したい方は、以下3行を削除*/
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}

#header-in {
animation: none;/*ロゴのfadeInアニメーションをキャンセルする*/
}


/************************************
**ヘッダー　モバイル表示　yujiblogからコピペ↓
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{
display:none;
}
}
@media (max-width:834px){
.header-container {
display:none;
}
img.site-logo-image{
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
}




/************************************
** h2,h3,h4,h5     yujiblogからコピペ↓
************************************/
.article h2:before {
background-image: none;
}
.article h2{
  font-size: 24px;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
}
.article h3{
line-height:2;
font-size:20px;
border:none;
color:#333333;
border-radius:2px;
border-left:10px solid #616138;/*H3の色の変更はこちら*/
padding: 0.4em 0.8em;
margin-top:90px;
}
.article h3:before {
width: 0em;
}
.article h4{
line-height:2;
background-color:#B5CAA0;/*H4背景色の変更はこちら*/
font-size: 17px;
font-weight:normal;
color:#333333;
border-radius:1px;
padding:1.5em;
margin-top:1.5em;
margin-bottom:1.5em;
}
.article h5{
background: #F7F7F7;/*H5背景色の変更はこちら*/
font-size: 17px;
font-weight:normal;
line-height:2;
color:#333333;
border-bottom: none;
border-radius: 4px;
padding: 1.5em;
margin-left:0 auto;
border:1.5px dashed;
border-color:#93b69c;/*H5枠色の変更はこちら*/
margin-top:1.5em;
margin-bottom:1.5em;
}
@media (max-width:480px){
.article h2{
font-size:18px;
padding:1.5em 1em 1.5em 0.5em;
}
.article h3{
font-weight:bold;
font-size:17px!important;
}
.article h4, .article h5{
font-size:15px!important;
}
}

/************************************
** 目次
************************************/
/* 目次 */
.toc{
 background: #fff; /* 背景色 */
 border: 2px solid #6c9fce /* 枠線 */
 border-radius: 3px;
}
.toc-title{ /* タイトル */
  color: #696969; /* 文字色 */
	font-size: 1.5rem;
}
.toc-title:before{
 font-family: "Font Awesome 5 Free";
 content: "\f15b"; /* タイトル前のアイコン */
 margin-right: 5px;
 margin-left: 5px;
}
.toc a{
	color: #696969; /* 文字色 */
	font-weight: bold;
}
.toc a:hover{
	color: #696969; /* ホバー時の文字色 */
	text-decoration: none;
}
.article .toc :last-child {
	font-weight: 400;
}
.toc_list ul {
list-style: none;
padding-left: 5px;
}
.toc_list li, .toc_list li li, .toc_list li li li {
padding: 5px 0;
}

ol.toc-list {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
}
ol.toc-list > li:before {
    counter-increment: item;
    content: counter(item)'';
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    background: #6c9fce; /* 数字を囲む丸の色 */
    color: #fff; /* 数字の色 */
    border-radius: 50%;
    margin-right: .3em;
}
.toc .toc-list ul, .toc .toc-list ol {
    padding-left: 2em;
    margin: 0;
	 list-style: none;
}
.toc ol li ol a::before{
font-family: "Font Awesome 5 Free";
content: "\f054";
font-weight: 900;
margin-right: 5px;
margin-left: 5px;
color: #8491c3;
}

/************************************
** リスト
************************************/

.list-2{
list-style: none;
padding:0;
margin:0;
}
.list-2 li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 25px;
}
.list-2 li:before {
font-family: "Font Awesome 5 Free";
content: "\f00c"; /*アイコン*/
font-weight: 900;
color:#6c9fce; /* 色 */
position:absolute;
left:0;
}


.list-3{
list-style: none;
padding:0;
margin:0;
}
.list-3 li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 25px;
padding-bottom: 0;
}
.list-3 li:before {
font-family: "Font Awesome 5 Free";
content: "\f00c"; /*アイコン*/
font-weight: 900;
color:#ffa952; /* 色 */
position:absolute;
left:0;
}


.list-5{
counter-reset:number; 
list-style-type: none; 
padding:0;
margin:0;
}
.list-5 li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 1.8em;
}


.list-5 li:before {
counter-increment: number;
content: counter(number);
background-color: #ffa952; /* 文字背景色 */
color: #fff; /* 文字色 */
position: absolute;
font-weight:bold;
font-size: 14px;
border-radius: 50%;
left: 0;
top:0.5em;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
}


.list-6{
counter-reset:number; 
list-style-type: none; 
padding:0;
margin:0;
}
.list-6 li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 1.8em;
}


.list-6 li:before {
counter-increment: number;
content: counter(number);
background-color: #52cbff; /* 文字背景色 */
color: #fff; /* 文字色 */
position: absolute;
font-weight:bold;
font-size: 14px;
border-radius: 50%;
left: 0;
top:0.5em;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
}


.list-7{
counter-reset:number; 
list-style-type: none; 
padding:0;
margin:0;
}
.list-7 li { 
position: relative;
margin:0.5em 0 !important;
padding-left: 1.8em;
}


.list-7 li:before {
counter-increment: number;
content: counter(number);
background-color: #ff52a3; /* 文字背景色 */
color: #fff; /* 文字色 */
position: absolute;
font-weight:bold;
font-size: 14px;
border-radius: 50%;
left: 0;
top:0.5em;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
}



.list-box-3{
background: #f6fbf9;/* 背景色 */
max-width: 600px;
padding: 1em;

margin:0 auto;
border:2px dotted;
border-color:#58be89; /* 線の色 */
}

.list-box-4{
background: #e9f7f8;/* 背景色 */
max-width: 600px;
padding: 1em;

margin:0 auto;
border:2px dotted;
border-color:#52cbff; /* 線の色 */
}

.list-box-5{
background: #f9f6fb;/* 背景色 */
max-width: 600px;
padding: 1em;

margin:0 auto;
border:2px dotted;
border-color:#ff52a3; /* 線の色 */
}


@media screen and (max-width: 768px){
.article ul, .article ol {
padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}


/************************************
** チェックマーク
************************************/
.fa-check {
color: #6c9fce;
/* color:#1da1f2; */
}

.icon_green {
color: #72f099;
/*緑 */
}

.icon_red {
color: #8d0f66;
/*赤色*/
}

primary-box {
border: 1px dashed #4865b2;
background-color: #f8f9ff;
color: #333;
}


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

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

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