@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/


.entry-content h2 {
   position: relative;
   padding: 0.3em;
   background: #fcff00;
   color: black;
}

.entry-content h2::before{
   position: absolute;
   content: '';
   top: 100%;
   left: 0;
   border: none;
   border-bottom: solid 15px transparent;
   border-right: solid 20px rgb(149, 158, 155);
}

/*--------------------------------------
  デフォルトの見出しデザインをリセットh3
--------------------------------------*/
.entry-content h3 {
border-left: none;
padding-left: 0;
}

h3{
padding: .5em;
position: relative;
}
h3:after {
content: "";
display: block;
height: 10px;
background-image: linear-gradient(to right, #ffff00, #e58336);
}

h4{
padding: .5em;
position: relative;
}
h4:after {
content: "";
display: block;
height: 10px;
background-image: linear-gradient(to right, #e58336, #ffff00);
}

/*--------------------------------------
  モバイル用フッターを半透明
--------------------------------------*/
ul#menu-mb_footer {
    background: #ffffffe0;
}

.nothumb .entry-meta:after, .nothumb .page-title:after {
 content: none;
}

/*アフィリエイトボタン用CSS*/
#inner-content .btn2{padding:0;margin:.5em .5em .5em 0}#inner-content .btn2 a{display:block;padding:.4em .8em}#inner-content .btn2 a:hover{display:block;text-decoration:none}.btn2.btntext a {color: inherit;}.btn2.raised a{color:#fff}.btn2.flat1 a{color:#00bcd4}.btn2.flat1 a:hover{color:#fff}.btn2.flat2 a{color:#67c5ff}.btn2.flat2 a:hover{color:#fff}.btn2.flat3 a,.btn2.flat4 a,.btn2.flat5 a{color:#67c5ff}.btn2.flat4 a:hover{color:#679efd}.btn2.flat5 a:hover{color:#fff}.btn2.flat6 a{color:#668ad8}.btn2.flat6 a:hover{color:#fff}.btn2.flat7 a{color:#67c5ff}.btn2.flat8 a{color:#00bcd4}.btn2.flat9 a{color:#fff}.btn2.flat10 a{color:#ffa000}.btn2.flat10 a:hover{color:#fff}.btn2.flat11 a{color:#668ad8}.btn2.cubic1 a,.btn2.grad1 a,.btn2.grad2 a,.btn2.grad3 a,.btn2.grad4 a{color:#fff}#inner-content .btn2.emboss a{color:rgba(0,0,0,.4)}.btn2.text3d.blue-bc a{color:#4f9df4}.btn2.text3d.red-bc a{color:#f88080}.btn2.text3d.green-bc a{color:#90d581}.btn2.cubic2 a,.btn2.cubic3 a{color:#fff}.btn2 img{visibility:hidden;display:block;width:0;height:0;}/*END アフィリエイトボタン用CSS*/

/*ロゴ画像を横全体に表示*/
#inner-header, #drawer + #inner-header,#logo{
    width: 100%;
    max-width: 100%!important;
    margin: 0;
    padding: 0;
}
.header--center #logo img {
    padding: 0;
    height: auto;
    width: 100%;
}
.header--center #logo {
    padding: 0;
}
/*END ロゴ画像を横全体に表示*/

/*トップに人気記事を設置*/
/*タイトル*/
.top-title {
    margin-top: 0;
    font-size: 1.45em;
    font-weight: bold;
    color: #389bff;
}
/*余白調整など*/
.popular-posts .cardtype__article-info {
    padding-top: 0.5em;
}
.popular-posts .cardtype__link {
    padding-bottom: 10px;
}
@media only screen and (max-width: 480px) {
  /*スマホでも2列横並びに*/
  .cardtype {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: -moz-box;
      display: flex;
      flex-direction: row;
      -webkit-flex-direction: row;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
  }
  .popular-posts .cardtype__article {
    width: 48%;
  }
  .popular-posts .cardtype__article:nth-child(odd){
    margin-right: 4%;
  }
  .popular-posts.cardtype h2 {
      margin: 0 5px;
      font-size: 15px;
  }
}
/*END トップに人気記事を設置*/


/*--------------------------------------
  ふきだしの色を変える（←左）
--------------------------------------*/
.sc {
 border: solid 2px #d5d5d5;/*外枠の線の色*/
 background: #fc07ff  ;/*ふきだしの中の色*/
  color: #ffffff;/*文字の色*/
}
.sc:before {
 border: 12px solid transparent;
 border-right: 12px solid #d5d5d5;/*ふきだしの線の色*/
 content: "";
}
.sc:after {
 display: inline-block;
 position: absolute;
 border: 12px solid transparent;
border-right: 12px solid #fc07ff;/*ふきだしの中の色*/
content: "";
}

/*--------------------------------------
  ふきだしの色を変える（右→）
--------------------------------------*/
.right .sc {
 background: #00ceed ;/*ふきだしの中の色*/
  color: #ffffff;/*文字の色*/
}
.right .sc:before,
.right .sc:after {
 right: -23px;
 left: auto;
 border: 12px solid transparent;
 border-left: 12px solid #d5d5d5;/*ふきだしの線の色*/
}
.right .sc:after {
 right: -20px;
 border-left-color: #00ceed ;/*ふきだしの中の色*/
}


/*横スクロールレスポンシブテーブル用の要素の追加*/
.scrollable-table table{
  border-collapse: collapse;
  margin: 1em 0;
  max-width: 100%;
}
 
.scrollable-table th{
  background-color: #eee;
}
 
.scrollable-table th,
.scrollable-table td{
  border: solid 1px #ccc;
  padding: 3px 5px;
  white-space: nowrap;
}
 
.scrollable-table {
  overflow-x: auto;
  margin-bottom: 1em;
}

/*--------------------------------------
wppでランキング順位を表示する
--------------------------------------*/
/* カウンタをリセット */
.my-widget.show_num {
    counter-reset: wpp-ranking;
}
/* 一覧の表示 */
.my-widget.show_num li {
    position: relative;
}
/* 順位を表示 */
.my-widget.show_num li:before {
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
 	display: inline-block;
 	position: absolute;
 	z-index: 1;
 	top: 0;
 	left: 0;
 	width: 25px;
 	height: 25px;
	border-radius: 50%;
	text-align: center;
	line-height: 25px;
}
/* 1位 */
.my-widget.show_num li:nth-child(1):before {
	background: #ffd300;
	color: #fff;
}
/* 2位 */
.my-widget.show_num li:nth-child(2):before {
	background: #ffd300;
	color: #fff;
}
/* 3位 */
.my-widget.show_num li:nth-child(3):before {
	background: #ffd300;
	color: #fff;
}
/* 4位以降の色 */
.my-widget.show_num li:nth-child(n + 4):before{
	background: #f3f3f3;
	color: #9a9a9a;
}