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

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

/* Cocoon背景色を設定 */
/* https://shiritai.net/cocoon_backgroundcolor/#:~:text=%E3%81%AE%E8%89%B2%E3%81%A7%E3%81%99%E3%80%82-,%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%81%8B%E3%82%89%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B,%E3%81%9F%E3%82%89%E3%80%81%E9%BB%92%E3%82%92%E9%81%B8%E3%81%B3%E3%81%BE%E3%81%99%E3%80%82 */
body {
    background-color: #FFFFFF;
}
.main{
    background-color: #FFFFFF;
}
.sidebar {
    background-color: #FFFFFF;
}

/* アプリーチここから */
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}
/* アプリーチここまで */

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

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

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

/* iframe レスポンシブ対応 CSS */
/* YouTubeの埋め込み動画のサイズをレスポンシブ対応に */
/* .iframe-css {
  position: relative;
  width: 100%;
  padding-top:56.25%;
}

.iframe-css iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} */

/* GitHub Gist */
/*GitHub Gistで埋め込むソースコードの最大高さを指定 */
.gist-data { max-height: 600px; }



/* ラベルボックスのラベルの背景を編集
https://wp-cocoon.com/community/demands/%E3%83%A9%E3%83%99%E3%83%AB%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E8%83%8C%E6%99%AF%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/ */
.label-box-label {
	margin-left:2em;
	padding:0em 0.5em;
	font-size:.9em;
 	background-color:#fff; /*　背景を白で塗りつぶして枠線を絶対見せない */
	display:inline-block;
}
.label-box-label {
  margin-left: 1em;
  padding: 0 0.8em;
  font-size: 0.9em;
  font-weight: bold;
	text-shadow: #fff 0px 0px 0px !important; /* 白い影を強制的に消去 */
}

/* figcaptionのフォント設定を指定 */
/* 埋め込んだYouTubeの下に出るキャプションとかに適用 */
figcaption {
	font-weight: bold;
	font-size: 13px;
   text-align: center;
}

/* 埋め込んだYouTube（のみ?）を中央に配置 */
/* 動画全体に適用されているかも */
/* https://wp-cocoon.com/community/customs/youtube%E3%81%AE%E5%8B%95%E7%94%BB%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%93%E3%81%A0%E9%9A%9B%E3%81%AB%E4%B8%AD%E5%A4%AE%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%97%E3%81%9F%E3%81%84/ */
.video-container {
	margin: 0px auto;
}

/* サイドバーの目次関連 */
/* https://www.beginner-blogger.com/cocoon-scrollable-sidebar-toc/#toc1 */
/* はみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 550px; /* 目次の高さ上限 */
}

/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
	-webkit-appearance: none; /* スタイルの初期化を禁止 */
	width: 8px; /* スクロールバーの横幅 */
}

/* スクロールできるツマミ部分 */
.sidebar .toc-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .4); /* ツマミの色 */
}

/* https://www.beginner-blogger.com/cocoon-sidebar-toc-highlight/ */
#toc-2 li.current {
	background-color: #ffbc0099; /* ハイライト色 */
}

<script>
(function($){

  $("pre > code").each(function(i, code){
    var $code  = $(code);
    var height = $code.height();

    if (height < 200) {
      return;
    }

    $code
      .css({
        "overflow": "hidden",
        "height"  : "200px"
      })
      .attr("data-orginal-height", height);


    var $elm = $("<span></span>");
    $elm
      .text("続きを見る")
      .css({
        "position": "absolute",
        "bottom" : "12px",
        "left"   : "4%",
        "border" : "1px solid #333",
        "margin" : "0 auto",
        "width"  : "92%",
        "padding": "8px 0",
        "cursor" : "pointer",
        "text-align": "center",
        "background-color": "#F6F6F6"
      })
      .addClass("trigger-expand-code");

    $code.parent()
      .css("position", "relative")
      .append($elm);
  });

  $(".trigger-expand-code").click(function(event){
    var $target = $(event.target);
    var $pre    = $target.parent();
    var $code   = $pre.find("code");
    var height  = parseInt($code.attr("data-orginal-height"), 10);

    $code
      .css("overflow-x", "scroll")
      .animate({
        "height": height + 20
      }, 450, "swing");

    $target.animate({
      "opacity": 0
    }, 450, "swing", function(){
      $(this).remove();
    });
  });

})(jQuery);
</script>