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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* html { scroll-behavior: smooth; } */
#header .site-name-text { font-family: 'Monoton', cursive; font-size: 32px; }
.article h2 { border: none; background-color: #19448e; padding: 180px 0 180px 0; text-align: center; font-size: 32px; color: white; }
.article h2 span { display: block; text-align: center; font-size: 32px; color: white; }
.article h3 { border-left: solid 10px #3261ab; border-bottom: solid 1px #3261ab; }
.article ul li { /* text-indent: -1.4em; margin-left: 1.4em; */ margin-bottom: 1em; }
.article h3:after { display: none; }
.article .iconlist-box li:before { margin-left: -1.4em; }
.sidebar h3 { border-left: solid 10px #3261ab; border-bottom: solid 1px #3261ab; }
main .comment-area { margin-top: 100px; }
main .comment-area .comment-body { border: solid 1px #ddd; border-radius: 10px; padding: 10px; }
#toc { margin-bottom: 100px; }
.toc li { font-weight: bold; }
.toc li li { font-weight: normal; }
.sidebar h3:after { display: none; }
#slide-in-sidebar { padding-bottom: 66px; }
.mobile-menu-buttons .logo-menu-button { font-family: 'Monoton'; font-weight: normal;  font-size: 24px; }
.mobile-menu-buttons .menu-icon { margin-top: 4px; }
.go-to-top-button, .go-to-top-button:hover { border: none; background-color: rgba(0,0,0,0.5); color: rgba(255,255,255,0.7); }
#post-8474 .date-tags { display: none; }

/* サイドバーの目次カスタマイズ */
#toc-2 .toc-title { display: none; }
#toc-2 .toc { padding-left: 0; padding-right: 0; margin-left: 10px; margin-right: 0; min-width: 100%; }
#toc-2 .toc-content { padding-top: 0; }
#toc-2 .toc-content li { color: #3261ab; }
#toc-2 li.current { background-color: #ffbc0099; }
#toc-2 li li { font-size: 0.9em; }
/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
  -webkit-appearance: none; /* スタイルの初期化を禁止 */
  width: 8px; /* スクロールバーの横幅 */
}
/* スクロールできるツマミ部分 */
.sidebar .toc-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .4); /* ツマミの色 */
}

.my-block-center { display: block; margin-left: auto !important; margin-right: auto !important; }
.my-text-center { text-align: center; }
.my-block-margin-bottom-zero { margin-bottom: 0 !important; }
.my-solid-border-lightgray { border: 1px lightgray solid; padding: 3px; }
.my-solid-border-red { border: 1px red solid; }
.my-scrollable-img { overflow: auto; }
.my-scrollable-img img { max-width: max-content !important; }
.my-fontfamily-mono { font-family: "Source Code Pro","Liberation Mono","Courier New",Courier,monospace }
.my-icon-color-blue { color: #0095d9; }
.my-code-wrap-anywhere span.enlighter-text { overflow-wrap: anywhere; }
/* .my-button-circle-right-after { letter-spacing: 1px; } */
.my-button-circle-right-after a:after { font-family: "Font Awesome 5 Free"; content: "\f138"; /* chevron-circle-right */ margin: 0 0 0 5px; }
/* .my-top-page-box { border: 2px solid #ccc !important; } */
.my-top-page-box ul li:before { content: "\f00c"; /* check */ color: #3EB370; }
.my-affiliate-boxes { display: flex; flex-wrap: wrap; justify-content: center; }
.my-affiliate-boxes a { padding-left: 15px; padding-right: 15px; }
.my-block-image-2columns { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.my-block-image-2columns img { margin: 0 0 20px 0; width: 350px; }
.my-2columns-ad .column-left {}
.my-no-stripe-table tr { background-color: white !important; } 
.my-no-stripe-table td { white-space: normal; } 
.my-indent-left-level1 { margin-left: 40px; }
.popular-entry-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.popular-entry-cards .popular-entry-card-content { font-size: 0.6em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.my-block-narrow { padding-left: 0 !important; padding-right: 0 !important; }

/* 光るボタン */
@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}
.my-button-shiny label::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Captions */
.my-figcaption-under-image { margin-top: -20px; text-align: center; font-size: 0.8em; color: gray; }
.my-figcaption-under-table { margin-top: -55px; text-align: center; font-size: 0.8em; color: gray; }
figcaption { text-align: center; }

/* 全てのULタグ */
article ul { list-style-type: none; }
article ul li { list-style: none; }
article ul li::before {
  font-family: "Font Awesome 5 Free";
  content: "\f138"; /* chevron-circle-right */
  color: #1e50a2;
  font-weight: 900;
  margin-left: -0.9em;
  padding-right: 0.5em;
}
article ul li ul li::before { content: "\f105"; /* angle-right */ }
article ul li ul li ul li::before { content: "\f101"; /* angle-double-right */ }
/* .iconlist-box ul li::before { content: ""; } */

/* 矢印ULタグ (→) */
article ul.my-arrow-circle-right { padding-left: 0; }
article ul.my-arrow-circle-right li::before { content: "\f0a9"; /* arrow-circle-right */ color: #0095d9; }

/* Ads */
footer { padding-bottom: 58px !important; }
div.gsc-control-cse { padding: 0; }
div.footer-widgets.cf .ad-area {
  width: 834px !important;
  height: 50px !important;
  margin: 0 auto 0 auto;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
}
div.footer-widgets.cf .ad-area { padding: 0; }
div.footer-widgets-mobile.cf {
  height: 50px !important;
  margin: 0 auto 0 auto;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2147483647;
}
div.footer-widgets-mobile.cf .footer-mobile { padding: 0; }
.ad-area ul {
  list-style-type: none;
  max-width: max-content;
  margin: 0 auto 0 auto;
  padding-left: 0px;
  text-align: left;
  font-size: 0.9em;
}
.ad-area ul li { list-style: none; padding-left: 5px; }
.ad-area ul li::before {
  font-family: "Font Awesome 5 Free";
  content: "\f138"; /* chevron-circle-right */
  color: #1e50a2;
  font-weight: 900;
  margin-left: -0.9em;
  padding-right: 0.5em;
}
/*article div.ad-content-middle.ad-horizontal { margin-top: 50px; margin-bottom: 100px; }*/
.ad-area .ad-label { font-size: 0.8em; }
.my-ad-label { margin-top: 15px; font-size: 0.8em; }
aside.widget-index-top .ad-area, .my-alternative-ads1, .my-alternative-ads2, .my-alternative-ads3 {
  margin-top: 20px;
  margin-bottom: 30px;
  /* padding-bottom: 15px;
  border: 1px solid lightgrey;
  border-left-style: none;
  border-right-style: none; */
}
#post-27 .my-alternative-ads1, #post-27 .my-alternative-ads2, #post-27 .my-alternative-ads3 { display: none;} /* プライバシーポリシー */
div.pr-label { border: 2px solid lightgray; background-color: var(--cocoon-xxx-thin-color); }

/* code {
  display: inline-block;
  width: 100%;
  padding: 6px 15px;
  color: #e3e3e3;
  background: #364549;
  font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
  font-weight: bold;
} */

/* 関連記事 */
.related-entries { margin-bottom: 5px; }
.related-entry-card-wrap { margin-bottom: 0; }

/* 番号付きリスト */
ol.my-numbered-list {
  counter-reset: number;
  list-style-type: none !important;
  padding: 0.5em;
  margin-bottom: 0;
}
ol.my-numbered-list li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 20px 30px;
}
ol.my-numbered-list li:before {
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  background: rgb(44, 169, 225);
  color: white;
  /* font-family: 'Avenir','Arial Black','Arial',sans-serif; */
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  /* line-height: 25px; */
  text-align: center;
  top: 8px;
}

/* 右から左に流れるテキスト */
.my-animated-text {
	margin: 0 auto 40px;
	width: 100%;
	text-align: center;
	background: black;
	overflow:hidden;
}
.my-animated-text a {
  display: inline-block;
  margin: 0;
  padding-left: 100%;
  white-space: nowrap;
  color: white;
  text-decoration: none; animation: flowing 10s linear infinite;
  transform: translateX(100%); /* 開始位置 */
}
@keyframes flowing {
  100% { transform: translateX(-100%); } /* 終了位置 */
}
	
.author-box .author-content { padding: 0 !important; }
.author-box .author-description { font-size: 0.8em; }

.wp-block-table td { border-color: #eee; white-space: normal; }
.wp-block-table thead { border-color: #eee; }
.header-container.fixed-header { opacity: 0.6; }

/************************************
** ポップアップ
************************************/
#my-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}
#my-popup:not(.my-popup-hidden) {
  display: block;
}
.my-popup-content {
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 50px;
  width: 90%;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
#my-popup-close-btn {
  font-size: 2.4rem;
  background-color: #fff;
  /* color: #fff; */
  line-height: 1;
  padding-top: 3px;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 7px;
  /*z-index: 2;*/
}
/************************************
** 「最近のコメント」ウィジェットのスタイル
************************************/
dl.recent-comments {
  width: 100%;
  margin: 20px auto;
}
dl.recent-comments dt{
  text-align: left;
  clear: left;
  float: left;
  width: 46px;
  white-space: nowrap;
  margin-top: 3px;
}
dl.recent-comments dd {
  margin-left: 0;
  margin-bottom: 20px;
}
dl.recent-comments dd .recent-comment-author {
  float: left;
  margin-right: 5px;
}
dl.recent-comments dd .recent-comment-title {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
dl.recent-comments dd .recent-comment-content {
  clear: both;
  margin-top: 8px;
  font-size: 14px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/** 1900px以上＝PC画面のフルスクリーン以上 **/
@media screen and (min-width: 1850px) {
  #toc-2 {
    position: fixed;
	top: 100px;
	left: 10px;
	width: 15.4%; /* 285px */
  }
  #toc-2 {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
  }
  #toc-2.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
  }
  #toc-2.off {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    transform: translateX(-30px);
  }
  .sidebar .toc-content { max-height: max-content !important; }
}

/** 1024px以上＝PC画面 **/
@media screen and (min-width: 1024px) {
  .sidebar .toc-content { overflow-y: scroll; max-height: 250px; }
}

/** 1023px以下＝タブレット縦以下 **/
@media screen and (max-width: 1023px) {
  #navi .item-label { font-size: 0.8em; }
  .sidebar .toc { font-size: 0.7em; line-height: 2.0; }
}

/** 667px以上 **/
@media screen and (min-width: 667px) {
  .my-block-narrow { max-width: 600px; margin-left: auto !important; margin-right: auto !important; }
  .my-block-narrow2 { max-width: 350px; margin-left: auto !important; margin-right: auto !important; }
  .my-fixed-width-btn a { width: 450px; }
  .twitter-tweet { max-width: 500px !important; margin-left: auto; margin-right: auto; }
  /*
   * .enlighter-v-standard { margin-left: 90px !important; }
   */
}
/** 835px以上 **/
@media screen and (min-width: 835px) {
}
	
/** 834px以下 **/
@media screen and (max-width: 834px) {
  .my-scrollable-img img { max-width: 800px !important; }
  .go-to-top, .go-to-top:hover { bottom: 60px !important; }
	div.footer-widgets.cf .ad-area { display: none; }
	.speech-balloon { font-size: 0.9em; }
  /* .go-to-top, .go-to-top:hover { bottom: 5px !important; } */
}

/** 767px以下 **/
@media screen and (max-width: 767px) {
  .author-box .author-description { font-size: 1.0em; }
}

/** 481px以上 **/
@media screen and (min-width: 481px) {
  .hide-for-tablet { display: none !important; }
}

/** 480px以下 **/
@media screen and (max-width: 480px) {
  #main { padding-left: 5px; padding-right: 5px; }
  #header .site-name-text { font-size: 28px; }
  figure.entry-card-thumb.card-thumb.e-card-thumb { width: 38%; float: left; margin-right: 1.8%; }
  div.entry-card-snippet.card-snippet.e-card-snippet { clear: both; padding-top: 2px; }
  aside.widget-index-bottom { margin-left: -5px; margin-right: -5px; }
  .hide-for-mobile { display: none !important; }
  .speech-name { font-size: 12px; }
}