@charset "UTF-8";

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

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

/************************************
** イノセンスの目次幅を広げる
************************************/

.entry-content .toc {
width: 90%;
/* 最大幅を解除 */
max-width: unset;
}

/*固定ページからSNSシェアボタンを消す*/
.page .sns-share,
.page .sns-follow {
    display: none;
}

/*トップページの固定ページから全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

/* サイドバー*/
.sidebar h3 {
  color: #474747;  
	background: none;
    font-size: 16px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
/* グローバルメニュー*/
#navi ul li {
background-color:#fffff;
}
nav#navi, .menu-header .sub-menu{
  font-weight: bold;
  box-shadow:0 5px 3px -5px rgba(0,0,0,.8);
}
.menu-header .menu-item:hover {
  border-bottom:7px solid #8c1b3f; !important;/*線の太さ色*/
  transition: all .3s;/*線が出てくる時間*/
}
.sub-menu .menu-item:hover {
  border-bottom:none !important;
}

/*ボックス（サルワカより）*/
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #85b87a;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #85b87a;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}
/************************************
** トップページタブ切替の色
************************************/
/* トップページのタブ色（選択前） */
.index-tab-button {
   color: #3f3f3f;/*文字色*/
  font-size: 16px!important;/*文字の大きさ*/
  background: #FFF!important;/*背景色*/
  border: solid 1px #d685b0!important;/*枠線の種類・太さ・色*/
}

/* トップページのタブ色（選択後） */
#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1],
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2],
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3],
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4]{
  color: #FFF;/*選択後の文字色*/
  background: #d685b0!important;/*選択後の背景色*/
  font-weight: 700;/*文字の太さ*/
}

/*アプリーチカスタマイズ（ひつじさん）*/
.appreach {
  border:3px solid #c0c0c0;/*ボーダー色*/
}
.appreach{
  text-align: left;
  padding: 25px;
  margin:20px;
  border-radius:2px;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach img,
.appreach p {
  margin: 0;
  padding: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;
}
p.appreach__name {
  font-size: 16px;
  color:#555;
  padding-bottom:10px;
  font-weight:bold;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
  color:#888;
}
.appreach__info a{
  color:#aaa;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 15px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
@media only screen and (max-width: 786px){
.appreach{
  margin:20px 0;}
.appreach__info {
  font-size: 11px !important;}
p.appreach__name {
  font-size: 15px;}}

/*インフォメーションボックスのアイコン変更*/
.information-box::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0a1"; /*アイコンフォント*/
  color: #0066cc;

}

/*テーブルデザイン*/
/* 見出しセルの文字色・背景色・枠線設定 */
.entry-content th {
  color: #ffffff;
  background-color: #b3d3ac;
  border: solid 1px #cacaca;
}
/* 見出し以外のセルの枠線設定 */
.entry-content td {
  border: solid 1px #cacaca;
}

/*数字リスト*/
.list-1 {
   counter-reset:number;
   list-style-type: none;
   padding:0;
   margin:0;
}
.list-1 li { 
   border-bottom:2px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em;
}
.list-1 li:last-child { 
   border:none;
}
.list-1 li:before{
   counter-increment: number;
   content: counter(number);
   background-color: #b3d3ac; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 14px;
   border-radius: 50%;
   left: 0;
   top:0.5em;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
}

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

/*モバイルフッター色変更*/
.mobile-menu-buttons {
background: #d685b0;
}

.mobile-menu-buttons .menu-button > a,
.navi-menu-content,
.navi-menu-content a,
.go-to-top-button,
#submit {
  background-color: #d685b0;
  color: #fff;
}
@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: auto;
    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;

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

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

	
}

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


}