@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

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

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

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

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

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

/* ---------------------------------------------------------
/ 『エントリーカード』
/
/   ・背景色＋borderカラー＋マウスオーバーでふわっと浮かせる
--------------------------------------------------------- */
/* ----- 背景色 ----- */
.a-wrap {
  background-color: #f9f9f9;
  -webkit-transition: all .5s;
  transition: all .5s;
}

/* ----- border ----- */
.a-wrap .blogcard {
  border-color: #8cc9ac;
}

/* ----- ふわっと浮かせる ----- */
.a-wrap:hover {
  background-color: #f2f9f6;
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/* ---------------------------------------------------------
/ 『目次』
/
/   ・中央揃え＋borderカラー＋左上／右下の○
--------------------------------------------------------- */
/* ----- 中央揃え＋borderカラー ----- */
.toc-title {
  color: #444;
  font-size: 24px;
  border-bottom: 1px solid #009250;
}

/* ----- borderカラー ----- */
.article .toc{
  margin: 15px auto;
  max-width:95%;
  position: relative;
  border-top: solid 1px #009250;
  border-left: solid 1px #009250;
  border-bottom: solid 1px #009250;
  border-right: solid 1px #009250;
  border-radius: 3px 0 3px 0;
}


/* ---------------------------------------------------------
/ 『見出し（h2）』
/
/   ・グラデーション＋吹き出し＋先頭文字だけ大きく＋影
--------------------------------------------------------- */
/* ----- グラデーション＋影 ----- */
.article h2{
  position: relative;
  margin-bottom: 30px;
  padding: 0.8em;
  background: linear-gradient(#5da797 0% , #5da797 100%);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.5);
}
 
/* ----- 吹き出し ----- */
.article h2:after{
  position: absolute;
  bottom: -15px;
  left: 10%;
  z-index: 90;
  margin-left: -15px;
  border-top: 15px solid #5da797;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 0;
  content: "";
}

/* ----- 先頭文字だけ大きく ----- */
.article h2:first-letter {
    font-size: 1.7em;
}

/* ---------------------------------------------------------
/ 『見出し（h3）』
/
/   ・borderカラー
--------------------------------------------------------- */
.article h3 {
    border: none; /* 全てのボーダーが不要 */
}
.article h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #5da797;/*左線*/
}


/* ---------------------------------------------------------
/ 『見出し（h4）』
/
/   ・border（2色ライン）
--------------------------------------------------------- */
/* ----- ベースのborder ----- */
.article h4 {
  border-top: none;
  border-bottom: solid 3px #5da797;
  position: relative;
}

/* ----- 2色目のborder ----- */
.article h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #884898;
  bottom: -3px;
  left: -3px;
  width: 15%;
}

/* ---------------------------------------------------------
/ 『見出し（h5）』
/
/   ・border＋ワンポイント（レクタングル2つ）
--------------------------------------------------------- */
/* ----- border ----- */
.article h5 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 2px solid #5da797;
}

/* ----- ワンポイント ----- */
.article h5:before, .article h5:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #5da797;
  margin: auto;
}

.article h5:before {
  top: -20px;
  left: 0px;
}

.article h5:after {
  top: -8px;
  left: 6px;
}

/* ---------------------------------------------------------
/ 『見出し（h6）』
/
/   ・border＋ワンポイント（◆）
--------------------------------------------------------- */
/* ----- border ----- */
.article h6 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 1px solid #5da797;
}

/* ---------------------------------------------------------
/ 『サイドバーの見出し（h3）』
/
/   ・border（2色ライン）
/   ・マウスオーバーで背景色変更
--------------------------------------------------------- */
/* ----- ベースのborder ----- */
.sidebar h3 {
  background: none;
  border-top: none;
  border-bottom: solid 3px #5da797;
  padding: 4px 10px;
  color: #333435;
  position: relative;
}

/* ----- 2色目のborder ----- */
.sidebar h3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #884898;
  bottom: -3px;
  left: 0px;
  width: 15%;
}



/* ---------------------------------------------------------
/ 『入力ボックス』
/
/   ・テキストボックスなどを角丸
/   ・submitボタン（送信ボタン）を角丸＋グラデーション
--------------------------------------------------------- */
/* ----- 角丸 ----- */
.search-edit, 
input[type="text"], 
input[type="password"], 
input[type="date"], 
input[type="datetime"], 
input[type="email"], 
input[type="number"], 
input[type="search"], 
input[type="tel"], 
input[type="time"], 
input[type="url"], 
textarea, select {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

/* ----- submitボタン（送信ボタン）を角丸＋グラデーション ----- */
input[type='submit'] {
  background: linear-gradient(#5da797 0% , #5da797 100%);
  color: #fff;
  font-size: 22px;
  border:none;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

/* ---------------------------------------------------------
/ 『次の記事と前の記事の隙間』
/
/   ・エントリカードを浮かせるので、次の記事と前の記事の間に隙間をつくる
--------------------------------------------------------- */
.pager-post-navi a.prev-post {
  margin-bottom: 8px;
}



/** 固定ページのシェア・フォローボタン非表示 **/
 .page .sns-share,
 .page .sns-follow {
 display: none;
 }

/*投稿日・更新日を消す場合*/
.page .date-tags {
    display: none;
}

/*著者情報を消す場合*/
.page .author-info {
    display: none;
}

/*プロフィールBOX*/
.author-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}
.author-box .author-name a {
    text-decoration: none;
    color: #333;
}
.author-box p {
    margin-top: 0.3em;
    line-height: 1.6;
}
.author-box p a {
    text-decoration: none;
    color: #008cee;
}
.author-box p a:hover {
    text-decoration: underline;
    color: #008cee;
}
.author-box .sns-follow-buttons a.follow-button {
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-bottom: 4px;
    margin-right: 8px;
    background: none;
    color: #fff;
}
.author-box a.follow-button span {
    line-height: 40px;
}
.author-box a.follow-button span::before {
    font-size: 22px;
}
.author-box .icon-twitter-logo::before {
    font-family: FontAwesome;
    content: "\f099"
}
.author-box .icon-facebook-logo::before {
    font-family: FontAwesome;
    content: "\f09a";
}
.author-box .icon-instagram-new::before {
    font-family: FontAwesome;
    content: "\f16d";
}
.author-box .icon-hatebu-logo::before {
    font-family: Verdana;
    content: 'B!';
    font-weight: bold;
}
.author-box .icon-google-plus-logo::before {
    font-family: FontAwesome;
    content: "\f0d5";
}
.author-box .icon-youtube-logo::before {
    font-family: FontAwesome;
    content: "\f167";
}
.author-box .icon-pinterest-logo::before {
    font-family: FontAwesome;
    content: "\f231";
}
.author-box .icon-amazon-logo::before {
    font-family: FontAwesome;
    content: "\f270";
}
.author-box .icon-github-logo::before {
    font-family: FontAwesome;
    content: "\f09b";
}
.author-box .website-button { background-color: #47555c !important; }
.author-box .twitter-button { background-color: #1da1f2 !important; }
.author-box .facebook-button { background-color: #3b5998 !important; }
.author-box .hatebu-button { background-color: #2c6ebd !important; }
.author-box .google-plus-button { background-color: #dd4b39 !important; }
.author-box .instagram-button { background: #e1306c !important; }
.author-box .youtube-button { background-color: #ef1515 !important; }
.author-box .flickr-button { background-color: #0063dc !important; }
.author-box .pinterest-button { background-color: #bd081c !important; }
.author-box .line-button { background-color: #00c300 !important; }
.author-box .amazon-button { background-color: #ff9900 !important; }
.author-box .rakuten-room-button { background-color: #c42e7f !important; }
.author-box .github-button { background-color: #333 !important; }
.author-box .feedly-button { background-color: #2bb24c !important; }
.author-box .rss-button { background-color: #f26522 !important; }
#main .author-box {
    border: none;
    border-radius: 3px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8% 0;
    box-shadow: 0 5px 20px -5px rgba(105,115,131,.35);
}
#main .author-widget-name {
    display: inline-block;
    position: relative;
    margin: 10px 0 0 -170px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #eaedf2;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    z-index: 1;
}
#main .author-widget-name::before {
    position: absolute;
    content: '';
    z-index: -1;
    bottom: -30px;
    left: 60px;
    border: 15px solid transparent;
    border-top: solid 30px #eaedf2;
    transform: rotate(-40deg);
}
#main .author-thumb {
    float: left;
    margin: 0;
    padding-top: 70px;
    width: 200px;
    text-align: center;
}
#main .author-thumb img {
    border: solid 5px #dfe2e8;
    width: 100px;
}
#main .author-content {
    margin: -30px 0 0 200px;
    padding-left: 30px;
    border-left: 2px #eaedf2 dashed;
}
#main .author-box .author-name {
    line-height: 1;
}
#main .author-box p {
    font-size: .95em;
}
@media screen and (max-width: 480px){
#main .author-box {
    margin: 1em 10px;
    padding: 16px;
    text-align: center;
}
#main .author-widget-name {
    margin: 0;
}
#main .author-widget-name::before {
    left: 50px;
}
#main .author-thumb {
    float: none;
    margin: 0;
    padding-top: 20px;
    width: 100%;
}
#main .author-box .author-name {
    font-size: 14px;
}
#main .author-content {
    margin: 10px 0 0 0;
    padding-left: 0;
    border: none;
}
#main .author-box p {
    font-size: 14px;
    text-align: left;
}
#main .author-box .sns-follow-buttons {
    justify-content: center;
}
}

/************************************
** トップへ戻るボタン
************************************/
.go-to-top-button {
  background-color: rgba(174, 201, 204, 0.5);
  color: #43676b;
}
.go-to-top-button:hover {
  background-color: rgba(142, 180, 185, 0.5);
}

/*シェアボタン
===================================*/
.sns-share-message{
    font-weight: bold;
    color: #499eda;
}
/*---------------------------------
親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget_categories ul li a::before{
  font-family: FontAwesome;
  content: "\f07b"; /* FontAwesomeのユニコード */
  color: #5da797; /* アイコンの色 */
  padding-right: 6px;
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}

/*---------------------------------
子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "\f114"; /* FontAwesomeのユニコード */
  color: #5da797; /* アイコンの色 */
  padding-right: 6px;
}
/*---------------------------------
カテゴリの行間を狭くする
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.3;
}
/*---------------------------------
カテゴリの行間とフォントを小さくする
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.3;
	font-size: 15px;
}
/* エントリーカードラベル非表示 */
.entry-card .cat-label{
  display: none;
}



.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;
}

/*▽Rinkerのデザイン変更▽*/
@media screen and (min-width: 501px){/*パソコン画面だけボタン文字小さく
    div.yyi-rinker-contents ul.yyi-rinker-links li {
        font-size: .8em;/*文字の大きさ*/
    }
 
@media screen and (max-width: 500px){/*スマホ表示用*/
    /*全体*/
    div.yyi-rinker-contents div.yyi-rinker-box {
        display: block!important;
    }
     
    /*画像*/
    div.yyi-rinker-contents div.yyi-rinker-image {
        width: auto;/*画像を中央表示*/
    }
    /*商品名ボタン*/
    div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom:0px;
        padding-left: 0px;
        margin: auto!important;
        width: 87%;
        text-align: center!important;
    }
    div.yyi-rinker-contents ul.yyi-rinker-links li {
        display: block!important;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
         
    body div.yyi-rinker-contents ul.yyi-rinker-links li a {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom:0px;
        padding-left: 0px!important;
    }
}
/*△Rinkerのデザイン変更△*/

/*公開日・更新日のデザイン変更△*/
.post-date .fa-clock-o:before{
content:"公開日:";
}
.post-update .fa-history:before{
content:"更新日:";
}


/************************************
** ブログカード
************************************/
.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;
  }
}

/*タブ付きボックスのリデザイン*/
.blank-box {
border: 1px solid #949495;
padding: 1.3em 1em;
margin: 1em 5%;
border-radius: 5px;
border-top-left-radius: 5px!important;
}

.blank-box.bb-tab .bb-label {
background-color: #949494;
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
font-size:14px;
top: -1.8em;
line-height: 1.8;
color: #fff;
left: 14px;
top: -15px;border: solid 2px #fff;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
border-bottom-right-radius:12px;
border-bottom-left-radius: 12px;
padding: 0px 1em 0px .8em;
}

/* 全固定ページで非表示 */
.page .entry-title {
    display: none;