/*
Theme Name: PORIPU for SANGO
Template:sango-theme
Theme Name:sango-theme-poripu
Theme URI:https://oldno07.com/poripu/
Author: マサオカ
Author URI:https://oldno07.com/
Description: SANGOの子テーマです。SANGO親テーマをインストールした状態で、本子テーマを適用してください。使い方は<a href="https://oldno07.com/poripu/">デモサイト</a>を御覧ください。
Version:1.4.4
*/
/*--------------------------------------
ここから下にCSSを追加してください
--------------------------------------*/
/* トップページの幅 */
@media only screen and (min-width: 1230px) {
  .wrap {
    width: 1180px;
  }
  .d-5of7 {
    width: 70%;/*メインコンテンツ幅*/
  }
  .d-2of7 {
    width: 30%;/*サイドバー幅*/
  }
}

/************************************
** プロフィール　SNSカスタマイズ
************************************/

.follow_btn .Github:before {
  background: #444444;
  content: "\f09b";
}

.follow_btn .Linkedin:before {
  background: #0a66c2;
  content: "\f08c";
}


/************************************
** 手順CSS
************************************/
.steps-css {
  /* 連番カウンター名の定義 */
  counter-reset: step-counter;
  /* 縦棒との位置関係に必要 */
  position: relative;
  /* 縦棒と連番のためのスペースを左に確保 */
  padding-left: 2rem; /* 連番(1.5rem) + 余白 */
}

/* 縦棒 */
.steps-css:before {
  content: "";
  /* 幅と色 */
  background-color: #00bcc6;
  width: 2px;
  /* 位置 */
  position: absolute;
  top: 0.7rem; /* 円のwidthの半分 */
  left: 0.7rem; /* 円のwidthの半分 */
  height: calc(100% - 0.7rem); /* 100% - top */
  /* 連番より後ろに表示するため */
  z-index: 0;
}

.steps-css > h4 {
  /* 連番カウンターを+1する */
  counter-increment: step-counter;
  /* 連番カウンターを垂直方向に中央揃えで表示する */
  display: flex;
  align-items: center;
}

/* ①②③など連番 */
.steps-css > h4:before {
  /* 連番カウンターの値を表示する */
  content: counter(step-counter);
  /* フォントと色 */
  background: #00bcc6;
  color: white;
  font-size: 0.8rem;
  font-weight: normal;
  /* 文字を中央に表示する */
  line-height: 1.5rem;
  text-align: center;
  /* 円で表示する */
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  /* .stepsでmargin-left +2rem したぶん左に戻す */
  position: absolute;
  left: 0;
  /* 縦棒より手前に表示するため */
  z-index: 1;
}

/*--------------------------------------
  見出しh2
--------------------------------------*/
.entry-content h2{
  position: relative;
  padding: 0.6em;
  background: #009ef3;
  color:#fff;
}

.entry-content h2:after{
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #009ef3;
  width: 0;
  height: 0;
}

.fa5 .entry-content h2:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh3
--------------------------------------*/
.entry-content h3 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #e6ffff;/*背景色*/
  border-left: solid 5px #009ef3;/*左線（実線 太さ 色）*/
}
.fa5 .entry-content h3:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh4
--------------------------------------*/
.entry-content h4 {
	color: #494949;
	background: linear-gradient(transparent 60%, #e6ffff 60%);
}
.fa5 .entry-content h4:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}