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


/************************************
****　全体のバランス
************************************/
.entry-content {/*本文下の空白を削除*/
padding-bottom: 0;
margin-bottom: 0;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {/*本文左右の空白*/
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
a {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.body .article {/*本文SNSフォロー下の空白*/
margin-bottom: 0;
}

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

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

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

@media screen and (max-width: 480px) 
{
}


/************************************
** ボタン
************************************/
.p-button {
    max-width: 300px;
    margin: 0 auto;
}
.p-button a {
    display: block;
    margin:25px 0;
    padding: 0.8em 1em;
    border-radius: 2em;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background: #408cce;
    box-shadow: 0 5px 20px rgba(0, 157, 255, .5);
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.p-button a:hover{
    box-shadow:none;
    transform: translateY(3px);
    opacity:1;
}
.home header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{
    display: none;
}

.comment-form-email,.comment-form-url,.comment-notes{ display:none; }

/************************************
** ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
  display: none;
}
.blogcard-wrap {
  transition: all .3s;
  max-width: 600px;
  margin: 2em auto;
}
.blogcard {
  border:1px solid #eaeaea !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
  margin: 0;
}
.blogcard-thumbnail img {
  display: block;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: 45px;
  overflow: hidden;
}
.blogcard-content {
  min-height: auto;
  margin-left: 185px;
  padding-right: 6px;
}
.blogcard-label {
  top: -11px;
  left: 9px;
  padding: 3px 0.6em;
  background:#aaa;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}
.blogcard-content:after {
  content: "クリックして読む";
  background: #66c2c3; /* 背景色 */
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 180px;
  border-radius: 20px;
  font-size: 13px;
  padding: 1px 0;
  margin-top: 6px;
}
@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: 35px;
    margin:0;
  }
  .blogcard-content:after {
    content: "タップして読む";
  }
  .blogcard-thumbnail{
    width:120px;
  }
}
@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
  .blogcard-title {
    margin:0;
  }
}
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
  .blogcard-content {
    margin-left: 110px;
  }
  .blogcard-title {
    height: 35px;
  }
}

/************************************
**　　サイドバー
************************************/

/*人気記事を浮き上がらせる*/
.sidebar a.popular-entry-card-link.a-wrap:hover { /*マウスオン時*/
background-color: #f2f2f2; /*背景色*/
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 10px 20px -5px #f2f2f2; /*影の色*/
}

/*人気記事の余白*/
.sidebar a.popular-entry-card-link.a-wrap{
        margin-bottom: 16px;
}



/* SNSボタン */
.author-follows{
	padding: 12px 0;
	background-color: #b0c4de;
}
.author-follows::before{
	content: 'Follow Me';
	color: #fff;
	font-family: お好きなフォント(設定する場合);
	letter-spacing: 0.2em; /* 字間を広く */
}
.author-box .sns-follow-buttons a.follow-button{
	width: 40px;
	height: 40px;
	margin: 6px 10px 2px 2px;
	border-radius: 20px;
	color: #fff;
	border-color: #fff;
	font-size: 24px;
	line-height: 1.6;
}
.author-box a.follow-button span::before {
	font-size: 22px;
}

/* SNSボタン マウスオーバーしたとき */
.author-box .sns-follow-buttons a.follow-button:hover{
	background-color: transparent;
	opacity: 0.6; /* 薄く */
	transform: scale(1.1); /* 1.1倍の大きさに */
}

.sidebar h3 {
  border-bottom:2px solid #408cce;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  padding:10px 0 5px 3px;
  color:#000000;
}

/*吹き出しを動かす*/
.custom-speech-move .speech-icon img{
    animation: animScale 4s infinite ease-out;
    transform-origin: center;
    animation-play-state: running;
    backface-visibility: hidden;
}
@keyframes animScale {
    0% { transform: scale(0.8, 0.8); }
    40% { transform: scale(1.2, 1.2); }
    60% { transform: scale(1, 1); }
    80% { transform: scale(1.1, 1.1); }
    100% { transform: scale(1, 1); }
}

/************************************
** SNS ボタンをまとめて小さくする
************************************/

/*トップシェアボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons {
	justify-content: flex-end; /*右に寄せる*/
}

/*ボトムシェア・フォローボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 40px; /*横幅*/
	height: 28px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 3px; /*丸み*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 16px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 20px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: 1px; /*右側からの距離*/
	bottom: 0; /*下側からの距離*/
	font-size: 10px; /*文字の大きさ*/
}

.page .date-tags {
display: none;
}

/************************************
** CVボタン
************************************/
.p-cv-btn-wrap *{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box;
}
.p-cv-btn-wrap{
  background:#f7f7f7;
  padding:1.5em !important;
  margin: 0 0 2em !important;
  font-size:16px;
  line-height:1.8;
}
.p-cv-btn-wrap ul,.p-cv-btn-wrap a,.p-cv-note{
  max-width:350px;
  margin: auto !important;
  border:none;
}
.p-cv-btn-wrap ul li{
  font-weight:500;
  list-style:none;
  font-size:0.9em;
  position:relative;
  padding-left:1.5em !important;
}
.p-cv-btn-wrap ul li:before{
  font-family: "Font Awesome 5 Free";
  font-weight:600;
  color:#1d89b5;
  position:absolute;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.p-cv-btn a{
  color:#fff;
  text-decoration:none !important;
  background:#90c231;
  border-bottom: solid 4px #61841f;
  padding: 0.5em 1em !important;
  border-radius: 7px;
  margin: 0.3em auto !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.p-cv-btn:hover{
  opacity:0.9;
}
.p-cv-btn a:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}
.p-cv-btn .p-cv-em{
  font-size:0.9em;
  line-height: 1.3;
  text-align:center;
  font-weight:600;
  display:block;
  color:#90c231;
  background:#fff;
  padding: 5px 10px !important;
  margin: 2px 10px 0px 0 !important;
  border-radius: 30px;
  min-width: 55px;
  max-width: 80px;
}
.p-cv-btn .p-cv-text{
  font-size:0.9em;
  font-weight: 600;
  color:#fff;
  letter-spacing: 1px;
  border-left: 1px solid #fff;
  line-height: 25px;
  margin: 0.6em auto 0.6em 0 !important;
  padding: 0 0.6em 0 1em !important;
}
.p-cv-btn i,.p-cv-btn svg{
  color:#fff;
  min-width:22px;
}
.p-cv-url-wrap{
  font-size: 0.8em !important;
  max-width: 350px;
  margin: 0 auto 0.5em !important;
  display: block;
}
.p-cv-url-wrap a{
  color: #1a0dab !important;
  text-decoration:underline !important;
}
.p-cv-btn-wrap .p-cv-note{
  font-size:0.9em;
  border: 0px solid #90c231;
  margin-top:0.5em !important;
  padding:0.5em 1em !important;
}
.sidebar .p-cv-btn-wrap{
  background:#fff;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
.p-cv-btn-img{
  margin:0 auto !important;
  text-align:center;
  max-width:350px;
  display:block;
}
/*320px以下*/
@media screen and (max-width: 320px){
  .p-cv-btn-wrap{
    padding:1em !important;
  }
}

table.nomad_table {
 /*max-width: 900px !important;*/
  width: 100%;
  margin: 15px auto !important;
  background: #FFF;
  text-align: center !important;
  font-size: 14px !important;
  display: block !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  color: #333 !important;
  border: none !important;
  border-collapse: collapse !important;
}

table.nomad_table a {
  color: #333 !important;
  text-decoration: none !important;
  transition: .2s;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.25em !important;
  font-size: 13px !important;
  display: block !important;
  position: relative !important;
  text-align: center !important;
}

table.nomad_table a:hover {
  opacity: .8;
}

table.nomad_table tr td,
table.nomad_table tr th {
  padding: 1.5em 2.2em !important;
  line-height: 1.25em !important;
  font-size: 14px !important;
  border: none !important;
  position: relative !important;
  text-align: center !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #7B86C6 !important;
}

table.nomad_table tr:first-child td,
table.nomad_table tr:first-child th,
table.nomad_table tr:last-child td,
table.nomad_table tr:last-child th {
  border-bottom: none !important;
}

table.nomad_table tr td {
  font-size: 13px !important;
}

table.nomad_table tr td:first-child {
  /*position: sticky !important; */
  left: 0 !important;
  background: #FFF !important;
  z-index: 2;
}

table.nomad_table tr th:first-child {
  /*position: sticky !important; */
  left: 0 !important;
  z-index: 2;
}

table.nomad_table tr td:nth-child(even) {
  background: #FAFAFA !important;
}

table.nomad_table tr th {
  padding: .8em 2em !important;
  background: #7B86C6 !important;
  color: #fff !important;
  width: 100% !important;
  position: relative !important;
}

table.nomad_table tr th:nth-child(even):after {
  content: "";
  display: block !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .05);
  position: absolute;
}

table.nomad_table tr:nth-child(even) td:nth-child(even):after {
  content: "";
  display: block !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .03);
  position: absolute;
}

table.nomad_table::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

table.nomad_table::-webkit-scrollbar-track {
  background: #FAFAFA !important;
}

table.nomad_table::-webkit-scrollbar-thumb {
  border-radius: 5px !important;
  background: #7B86C6 !important;
}

table.nomad_table .table_img {
  display: block;
  max-width: 60px;
  margin: 0 auto 15px auto;
}

@media(max-width:480px) {

  table.nomad_table tr td,
  table.nomad_table tr th {
    padding: 1em !important;
    font-size: 12px !important;
  }

table.nomad_table tr th {
    padding: .8em 2em !important;
    font-size: 13px !important;
  }

table.nomad_table .table_img {
    max-width: 45px;
    margin: 0 auto 10px auto;
  }

table.nomad_table a {
    font-size: 10px !important;
  }

}

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