@charset "UTF-8";
@import url(https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined);

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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*モバイルメディアクエリPCサイズだと消えるよ*/
@media screen and (min-width: 576px) {
.deletepc{display:none;}
}

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


}

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

}


/*480px以下*/
@media screen and (max-width: 576px){
  /*必要ならばここにコードを書く*/
/*モバイル非表示*/	
.delete {display: none;}
 /*スマホ用記事タイトルの文字サイズ*/
.post .entry-title {font-size: 1.8rem;} /*スマホ用記事タイトル*/

/*記事内タグクラウドのフォントサイズ*/
.kizitagcloud a {	
font-size:0.8em !important;
width:49%;
}}

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* フォント */
body {
	font-family: 'M PLUS 1p', sans-serif;
}
/* カラー設定 */
:root {
	--primary-color: 96, 26, 131;
	--secondary-color: 31, 153, 114;
	--back-color: 245, 237 ,255;
	--black-color: 64, 64, 62;
	--white-color: 255, 250, 255;
	--gray-color: 221, 211, 221;
	--gray-light-color: 247, 237 ,247;
}
/************************
* リンクカラー
・カードの囲み(a-wrap)
・フッターナビゲーション(.navi-footer-in a)
・タグクラウド(.tagcloud a)
・ウィジェット(.widget_*)
************************/
.a-wrap:hover, .navi-footer-in a:hover, .tagcloud a:hover, .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, .widget_block ul li a:hover {
	background: rgba(var(--back-color), 1);
}

.sns-buttons a:hover {
    transform: translateY(-4px);
    transition:all 500ms;
    color:#545454;
}
/************************
* 両端が濃いマーカー
・アピールエリアのタイトル(.appeal-title)
・プロフィールボックスの名前(.author-box .author-name a)
・CTAボックスのタイトル(.cta-heading)
・ナビメニューのホバーエフェクト(.navi-in a)
・インデックスのタブ一覧のボタンのホバーエフェクト(.index-tab-buttons)
************************/
.appeal-title, .author-box .author-name a, .cta-heading, 
.navi-in a, .index-tab-buttons .index-tab-button {
	background-image: linear-gradient(90deg, rgba(var(--secondary-color), .3) 3px, rgba(var(--white-color), 0) 10px), linear-gradient(90deg, rgba(var(--secondary-color), .5), rgba(var(--secondary-color), .5)), linear-gradient(270deg, rgba(var(--secondary-color), .3) 5px, rgba(var(--white-color), 0) 10px);
	
}

/************************
 * *Side****************
 * *****************/


.sidebar{
    padding:0;
    border:none;
    background:transparent;
}

.nwa .toc-list.open{
    padding: 0;
}

.nwa .toc{
    padding: 0;
    width: 100%;
}

#sidebar > .widget {
    margin-bottom: 24px;
}

.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, .widget_recent_comments li, .widget_recent_comments li > a, .widget_recent_comments .comment-author-link > a {
    color: #1F9972;
    font-size: 14px;
}

aside{
    background:#fff;
    padding:2em;
}

@media (max-width:1023px){
    aside{
    padding:.5em;
    }
}
.widget ul li a:before{
	font-family: FontAwesome;
	content: "\f138";
	margin:0 5px 0 0;
	color:#721F99;
	opacity: .3;
}
/************************
* メニュー
************************/

.navi .sub-caption:before {
	color:#721F99;
	opacity: .3;
}
.navi {
box-shadow: 0px 5px 10px;
color:#721F99;
	}

/* グローバルナビグラデ*/
.navi {
background-image: linear-gradient(to bottom,#FBF2FF 0%, #f3e8ff 51%, #EDD8F7 100%);	
}
/************************************
** 人気記事ランキング表示のカスタマイズ
************************************/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{ /*順位数表示のカスタマイズ*/
	 border-radius: 50%; /*丸にする*/
	 top: -4px;  /*丸の位置上に*/
	 left: -4px;  /*丸の位置左に*/
	 width: 16px;  /*丸のサイズを小さく*/
	 height: 16px;  /*丸のサイズを小さく*/
	 font-family: 'Lato', sans-serif;  /*数字をグーグルフォントに変更*/
	 font-size: 12px;  /*数字のフォントサイズを小さく*/
	 display: flex;
  justify-content: center;
  align-items: center;
}
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {/*1位の数字を上に*/
	line-height: 16px;
}
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {/*2位の数字を上に*/
	line-height: 16px;
}
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*3位の数字を上に*/
	line-height: 16px;
}
.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {/*4位の数字を上にし背景色変更*/
	background: #721F99;
	line-height: 16px;
}
.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {/*5位の数字を上にし背景色変更*/
    background: #721F99;
	line-height: 16px;
}
.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{/*タイトル*/
        padding: 0.2em 0 0 0.8em !important;  /*タイトル周りの余白を調整*/
	letter-spacing: 0.8px;  /*字間を広げる*/
}

.sidebar a.popular-entry-card-link.a-wrap{/*miniブログカード*/
        margin-bottom: 8px;  /*カード間の余白を広げる*/
}

/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2列にする
**********************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 49.5%;
  /* 3列にしたいは33%にすればできる */
}

 /* もっとみるボタン */
.p-button,
a.p-button,
button.p-button {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #721F99;
  border-radius: 0.5rem;
}

.p-button-wrap {
  display: block;
  max-width: 435px;
  margin: 0 auto 20px;
}

a.p-button-c {
  font-size: 1.8rem;

  display: block;
  overflow: hidden;

  padding: 1.5rem 0 1.5rem 3rem;

  border-bottom: 5px solid #1F9972;
  background: #fff100;
}

a.p-button-c:before {
  font-size: 1.2rem;
  font-weight: bold;

  position: absolute;
  top: 1.2rem;
  left: -3.2rem;

  padding: 0 3rem;

  content: "チェック";
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: top;
  transform-origin: top;

  color: #fff;
  background: #eb6100;
  -webkit-box-shadow: 0 3px 3px #e6d900;
  box-shadow: 0 3px 3px #e6d900;

}

a.p-button-c:hover {
  transform: translateY(3px);
border-bottom: 2px solid #e6d900;
  background:#721F99;
}

/* 蛍光ペン*/
.luxe-hilight-yellow {
 background: linear-gradient(transparent 60%, #ffff98 60%)
}
.luxe-hilight-red {
 background: linear-gradient(transparent 60%, #FFB3CB 60%)
}
.luxe-hilight-blue {
 background: linear-gradient(transparent 60%, #B3CBFF 60%)
}
.luxe-hilight-green {
 background: linear-gradient(transparent 60%, #B3FFC1 60%)
}
.luxe-hilight-orange {
 background: linear-gradient(transparent 60%, #FFE7B3 60%)
}
.luxe-hilight-pink {
 background: linear-gradient(transparent 60%, #FFB3F1 60%)
}
.luxe-hilight-purple {
 background: linear-gradient(transparent 60%, #C1B3FF 60%)
}
.luxe-hilight-cyan {
 background: linear-gradient(transparent 60%, #B3F1FF 60%)
}
.luxe-hilight-gray {
 background: linear-gradient(transparent 60%, #c3c3c3 60%)
}
.luxe-hilight-lime {
 background: linear-gradient(transparent 60%, #CBFFB3 60%)
}
.luxe-hilight-white {
 background: linear-gradient(transparent 60%, #fff 60%)
}


/* スクロールバー */
::-webkit-scrollbar {
width: 16px;
height: 20px;
}
::-webkit-scrollbar-track {
background-color: #EDD8F7;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: #A744D8;
border-radius: 5px;
width: 130px;
}
/*ボタンの設定*/
::-webkit-scrollbar-button:single-button {
background-color: #d89eff;
display: block;
border-style: solid;
height: 12px;
width: 12px;
}
/*縦のスクロール*/
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid purple;
border-left: 10px solid transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-top: 10px solid purple;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
/*横のスクロール*/
/* Up */
::-webkit-scrollbar-button:single-button:horizontal:increment {
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid purple;
}
/* Down */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
border-top: 10px solid transparent;
border-right: 10px solid purple;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent ;
}


/* 一括で画像を角丸にする */
[class*="wp-image-"],img[class*="attachment-"] {
border-radius: 5px;
}

/* margin上下狭く*/
.marginwide {
 margin: 0 auto !important;
}
/* margin左右狭く*/
.marginwidesayuu {
 margin: 0 2px 0 0!important;
}
/* margin広く*/
.marginwide-broad {
 margin: 30px auto !important;
}
/* padding狭く*/
.paddingwide {
 padding: 1px !important;
}
/* MAX ワイド*/
.picture-width {
 width: 65%;
 height: 65%;
}
/* 幅固定*/
.haba a{
  width:200px !important;
}

/*ボタングラデーション＆ホバー透過*/
.wp-block-button{
font-size: 12px;
margin: 100px;
}
.wp-block-button__link{
  color: #fff;
  display: inline-block;
position: relative;
background-size: 200% auto;
animation: GradietionAnimation 7s ease infinite;
}
.wp-block-button__link:hover{
 transition: .5s;
opacity: 0.7;
color: #fff;
}
@keyframes GradietionAnimation { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}


/*テキストホバー下線*/
.sample_link16 a{
  display: inline-block;
  text-decoration:none;
  position: relative;
  transition: .3s;
}

.sample_link16 a:hover::after{
  width: 100%;
}
.sample_link16 {
  padding-bottom: 5px;
  position: relative;
}
.sample_link16::before {
  background: #C1B3FF;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.sample_link16:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}


/* ついでにこちらもボタン*/
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #22092E;
  border-radius: 0.5rem;
}

.btn-wrap {
  margin: 30px 0;
}

a.btn-c, a.btn-g, a.btn-s{
  font-size: 1.5rem;
  padding: 0.25rem 2rem 1.5rem 3.5rem;
  position: relative;
  
  color: #fff;
  background-size: 200% auto;
  animation: GradietionAnimation 7s ease infinite;
}

a.btn-c{
  width: 80%;
  -webkit-box-shadow: 0 5px 0 #721F99;
  box-shadow: 0 5px 0 #721F99;
}
a.btn-g{
  width: 300px;
  -webkit-box-shadow: 0 5px 0 #003323;
  box-shadow: 0 5px 0 #003323;
}

a.btn-s {
width: 90%;
-webkit-box-shadow: 0 5px 0 #003323;
  box-shadow: 0 5px 0 #003323;	
}

a.btn-c span, a.btn-g span, a.btn-s span {
  font-size: 1.1rem;
  position: absolute;
  top: -10px;
  left: calc(50% - 125px);
  display: block;
  width: 250px;
  padding: 0.2rem 0;
  border-radius: 0.5rem;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
 }

a.btn-c span{
  color: #721F99;
  border: 2px solid #721F99;
}
a.btn-g span, a.btn-s span {
  color: #006646;
  border: 2px solid #006646;
}

a.btn-c:hover, a.btn-g:hover, a.btn-s:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);

  color: #fff;
  -webkit-box-shadow: 0 2px 0 #721F99;
  box-shadow: 0 2px 0 #721F99;
}

a.btn-c:hover:before, a.btn-g:hover:before, a.btn-s :hover:before {
  left: 2rem;
}
a.scenario{
 background-image: linear-gradient(to right, #D261FF 0%,#4158D0 51%,  #D261FF 100%);
}
.yuudou{
background-image: linear-gradient(to right, #8f00b3 0%,#303561 51%,  #8f00b3 100%);
}
.link{
 background-image: linear-gradient(to right, #00cb8a 0%,#006746 51%,  #00cb8a 100%);
}

/* タグ名の色変更 下線消去 */
.meta-box .fa-tags,
.meta-box .tags,
.meta-box .tags a {
    font-size:20px;
    text-align: center;
    color:#1F9972;
    text-decoration:none;
}

/* 動画中央揃え */
.video-container {
margin: 0px auto;
}
.wp-block-image figcaption {
  text-align: center;
}
.wp-block-embed figcaption {
  text-align: center;
}

/* グローバルメニューのマテリアルアイコンと動画サイトのアイコンとか中央揃えする */
.menuicon{
	color:#721F99;
	opacity: .3;
	vertical-align: middle;
}
.wp-image-1578, .wp-image-555, .wp-image-13279, .wp-image-543, .wp-image-886, .wp-image-3272,
.wp-image-3273, .wp-image-1892, .wp-image-567, .wp-image-1579, .wp-image-1738,
.material-icons-outlined, .material-icons{
	vertical-align: middle;
}
/* カラムの中のボタンの位置合わせ */
#column .wp-block-column {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	margin-bottom: 1.5rem;
	border-radius: 8px;
}
#column .wp-block-buttons {
	margin-top: auto;
}

/* ブログカード */
/* 内部ブログカード */
#container .blogcard-label {
display: block;
font-size: 12px;
background-color: #721F99;/* あわせて読みたいなどの背景色 */
}
.blogcard::before {
display: none;
}
.blogcard-snippet {
font-size: 15px;/* 文字の大きさ */
color: #280a3c;/* 抜粋の文字色 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.blogcard-title {
font-size: 18px;/* タイトルの大きさ */
}
.blogcard-content {
margin-left: 180px;
}
.blogcard::after {
content: "こちらから見る \bb";
font-weight: 900;
position: absolute;
bottom: 1em;
right: 2em;
background-color: #1F9972;/* 記事はこちら背景色 */
color: #fff;
padding: 0.2em 1em;
border-radius: 5px;
font-size: 13px;
}
.blogcard-wrap,.blogcard-title,.blogcard-snippet,.blogcard::after {
transition: 0.3s ease-in-out;
}
.a-wrap:hover .blogcard::after {
background-color: #37909e;/* マウスホバー時の「記事はこちら」背景色 */
}
.a-wrap.blogcard-wrap:hover {
background-color:#f3e8ff;/* マウスホバー時の全体背景色 */
}
.a-wrap:hover .blogcard-title, .a-wrap:hover .blogcard-snippet {
opacity: 0.7;
}
@media screen and (max-width:834px) {
#container .blogcard-label,.blogcard-snippet {
font-size: 13px;
}
.blogcard-content {
margin-left: 150px;
}
.blogcard-title {
font-size: 13px;
}
.blogcard::after {
font-size: 14px;
}
}
@media screen and (max-width:480px) {
#container .blogcard-label,.blogcard-title,.blogcard::after {
font-size: 12px;/* スマホ時の文字の大きさ */
}
.blogcard-content {
margin-left: 130px;
}
.blogcard-snippet {
display: none;
}
}
/* 内部ブログカードのアイコンとURLを非表示 */
.blogcard-footer{
	display: none; 
}
/* 内部ブログカードのラベルつけたし */
.bct-opprevious .blogcard-label::after {
	content: "あわせて見たい";
}
.bct-opprevious .blogcard-label a:before{
	font-family: FontAwesome;
	content: "\f138";
	margin:0 5px 0 0;
	color:#721F99;
	opacity: .3;
}

/**********************************************
** カルーセル
**********************************************/

#carousel .a-wrap {
  padding-top: -10px;
  margin: initial;
  margin-top: -6px !important;
}

#carousel .carousel-entry-card-title {
  display: none; /* タイトル消す */
}

#carousel .carousel-in {
  background-color: transparent;
}

#carousel .slick-dots {
  display: none !important;
}

.slick-slide img {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

.carousel-entry-card-thumb {
  width: 95%;
}

.carousel .cat-label {
  display: none; /* カテゴリーを消す */
}


/*記事内タグクラウドのデザイン*/
.kizitagcloud a {
    background: none; /*背景を消す*/
    border: 1px solid #ccc; 
    border-radius: 20px;
    color: #721F99; /*文字色*/
    display: inline-block;
    padding: 3px 10px;
    text-decoration: none;
    font-size: 11px;
    margin: 2px;
    flex: 1 1 auto;
    justify-content: space-between;
}
.kizitagcloud a:before {
    text-shadow:none;
 font-family:"Material Icons";
 content:"\e54e";
 color:#1F9972;
 padding-right:5px;
}
.kizitagcloud a:hover { /*マウスホバー時*/
    background: #F2E1FA;
    border: 1px solid #F2E1FA;
    color: #280a3c;
    transition: 0.5s; /*アニメーションの時間*/