/*
Theme Name:PORIPU tears 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.23
/*--------------------------------------
ここから下にCSSを追加してください
--------------------------------------*/

/*--------------------------------------
  見出しh2
--------------------------------------*/
.entry-content h2{

}
.fa5 .entry-content h2:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh3
--------------------------------------*/
.entry-content h3 {

}
.fa5 .entry-content h3:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh4
--------------------------------------*/
.entry-content h4 {

}
.fa5 .entry-content h4:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  目次　変更
--------------------------------------*/
#toc_container {/*目次全体*/
    margin: 0 0 2em 0;/*外側の余白*/
    padding: 0;/*内側の余白*/
    border-color: #6BB6FF!important;/*枠線の色*/
    border: solid 2px;/*枠線の幅と種類*/
    border-top: none;/*上線は削除*/
    border-radius: 3px;/*角丸*/
    background: #6bb6ff0d;/*背景色*/
    box-shadow: none;/*影を削除*/
}
div#toc_container .toc_list:after {/*亀さん挿入*/
    content: url(https://gachiliate.com/wp-content/uploads/2019/07/ゲロッパ線画ー目次用150×150.png);/*挿入する画像*/
    position: absolute;/*自由に動けるように*/
    bottom: -10px;/*基準点から下に*/
    right: -20px;/*基準点から右に*/
    opacity: 0.7;/*透明度10％*/
}
#toc_container .toc_title {/*目次のタイトル部分*/
    display: block;/*横幅いっぱいに*/
    margin: 0;/*外側の余白削除*/
    padding: 0;/*内側の余白削除*/
    font-size: 18px;/*文字の大きさ*/
    line-height: 42px;/*文字の高さ*/
    font-weight: bold;/*ふと文字*/
    background: #6bb6ff;/*背景色*/
    text-align: center;/*中央揃え*/
    color: white!important;/*文字の色*/
}
#toc_container .toc_title:before {/*タイトルの前のアイコン*/
    display: none;/*削除*/
}
#toc_container .toc_list {/*目次の内容部分*/
    margin: 0;/*外側の余白削除*/
    color: #424242;/*文字の色*/
    padding: 1em 6%;/*内側の余白*/
}
#toc_container .toc_list li a:hover {/*マウスホバーしたとき*/
    text-decoration: none;/*下線表示を削除*/
    opacity: .5;/*半透明に*/
}
#toc_container ul {/*箇条書き*/
    list-style-type: none;/*箇条書きの印を削除*/
    color: #424242!important;/*文字の色*/
}
#toc_container .toc_list li ul {
    padding-left: 20px;/*左側の余白*/
}
#toc_container .toc_list li a {/*文字部分*/
    display: inline-block;/*大きさを調整できるように*/
    line-height: 2;/*文字の高さ*/
    width: 100%;/*幅は100%*/
    padding: 5px 0 2px 32px;/*内側の余白*/
    text-indent: -32px;/*二列目一歩後退*/
}
#entry .toc_number {/*番号振りの部分*/
    display: inline-block;/*大きさを調整できるように*/
    width: 28px;/*幅*/
    height: 28px;/*高さ*/
    border-radius: 50%;/*丸く*/
    background: #6bb6ff;/*背景色*/
    text-align: center;/*中央揃え*/
    line-height: 26px;/*文字の高さ*/
    vertical-align: middle;/*高さの中央揃え*/
    color: #ffffff;/*文字の色*/
    margin: 0 0 4px;/*外側の余白*/
    text-indent: 0;/*インデント*/
}
#entry ul.toc_list ul > li .toc_number {/*h3の番号振り設定*/
    background: none;/*背景色削除*/
    color: #6bb6ff;/*文字の色*/
}
@media only screen and (min-width: 481px){/*PC表示*/
#toc_container {/*目次全体*/
    padding: 0;/*内側の余白*/
}}

/*--------------------------------------
  箇条書きボックス用のふきだし
--------------------------------------*/
.myfuki-main {/*ふきだしの長丸部分*/
    display: inline-block;/*幅調整ができるように*/
    position: relative;/*基準にする*/
    background: rgb(66,66,66);/*背景色*/
    color: white;/*文字色*/
    font-weight: 500;/*文字の太さ*/
    margin: .5em 0;/*外側の上下の余白*/
    border-radius: 25px;/*角丸にする*/
    padding: .3em 1em;/*内側の余白（上下0.3em 左右1em）*/
}
.myfuki-main:before {/*ふきだしの三角部分*/
    position: absolute;/*基準にあわせて動くように*/
    content: "";/*文字を入れないときのおきまり*/
    bottom: -.5em;/*下からの位置*/
    margin-left: 1.5em;/*左余白*/
    border-top: 10px solid rgb(66,66,66);/*上線追加*/
    border-left: 8px solid transparent;/*左の線は透明に*/
    border-right: 8px solid transparent;/*右の線は透明に*/
    border-bottom: 0;
    border-top-color: rgb(66,66,66);
}
/*--------------------------------------
関連記事タイトルデザイン
--------------------------------------*/
#main .h-undeline { /* 関連記事タイトル */
    color: #595959; /* タイトルの文字色 */
    border-bottom: dotted 4px #e6e6e6; /* 下線 */
    letter-spacing: 0.2em; /* 字の幅 */
    margin: 0 0 .5em 0; /* 下の余白（外） */
    background-color: #fff; /* 背景色 */
    font-size: 1.7em; /* 文字の大きさ */
    padding: .2em 0; /* 上下の余白（中） */
}
#main .h-undeline:before { /* タイトル前の画像 */
    content: url(https://gachiliate.com/wp-content/uploads/2019/08/fagg-12-min-1.png);
    margin-right: .2em; /* タイトルとの距離調整 */
	padding-bottom: 10px; /* タイトルとの距離調整 */
    /* display: inline-block; *//* SVG用　ディスプレイの設定 */
    /* width: 120px; *//* SVG用　画像の幅 */
}

.hukibox {/*オリジナルボックスの設定*/
    padding: 1em;/*内部の余白　上下左右*/
    position: relative;/*このボックスを基準点にする*/
    border: solid 3px #eee;/*枠線*/
    border-radius: 9px;/*角丸*/
}
.hukibox:before , .hukibox:after {/*疑似要素の共通部分*/
    content: '';/*おきまりの表現*/
    position: absolute;/*自由に動けるように*/
    top: 32%;/*上からの位置*/
    border: 18px solid transparent;/*枠線の設定*/
}
.hukibox:before {/*疑似要素（前）*/
    left: -39px;/*左からの位置*/
    border-right: 20px solid #eee;/*枠線（右）*/
}
.hukibox:after {/*疑似要素（後）*/
    left: -34px;/*左からの位置*/
    border-right: 20px solid #fff;/*枠線（右）*/
}
@media screen and (max-width: 480px){/*最大480pxまで（スマホ表示）*/
.hukibox:before , .hukibox:after {/*疑似要素共通部分*/
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    left: 40%;
}
.hukibox:before {
    border-bottom: 20px solid #eee;
    top: -40px;
}
.hukibox:after {
    border-bottom: 20px solid white;
    top: -36px;
}}
@media only screen and (min-width: 481px){/*最小481pxまで（PC表示）*/
.shtb2.tbrsp .cell:last-of-type {/*2列用の最後のセル*/
    vertical-align: middle;/*縦方向の位置を中心にする*/
}}

/*--------------------------------------
マイクロコピーボタン
--------------------------------------*/

.abtn-mc1 a {
    display: inline-block;
    width: 100%;
    margin: 0;
    border-radius: 3px;
    background: #4F9DF4;
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 44px;
    text-decoration: none;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
}
.abtn-mc1 a:after {
    content: "\f138";
    font-family: "font awesome 5 free";
    font-weight: 900;
    margin-left: 15px;
}
.abtn-mc1 a:hover{
    text-decoration: none;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}
.abtn-mc1 img{
	display: block;
}
p.abtn-mc1-top-text {
    font-weight: bold;
    margin-bottom: 3px;
}
p.abtn-mc1-under-text {
    font-size: .8em;
    margin-top: 3px;
}

/*--------------------------------------
黒板風ボックス
--------------------------------------*/
.kokuban-t2 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #369377; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 6px solid #E3B66A; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
.kokuban-t2::before,
.kokuban-t2::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.kokuban-t2::before {
 right: 10px;
 border: solid 3px #fff; /*チョーク（白）*/
 width: 20px; 
 border-radius: 3px 2px 0 2px;
}
.kokuban-t2::after {
 right: 40px;
 border: solid 3px #ffff6b; /*チョーク（黄色）*/
 width: 15px; 
 border-radius: 8px 5px 2px 5px;
}
.title-t2 {
position: absolute;
 top: .5em;
 right: 0;
 left: 0;
 text-align: center;
 font-weight: bold;
 font-size: 1.3em;
 color: #ffff6b; /* タイトル色 */
}

/*--------------------------------------
クリップ付きボックス
--------------------------------------*/
.clip-box-b {
 position: relative;
 margin: 2em auto;
 padding: 15px 35px 15px 25px;
 width: 90%; /* ボックス幅 */
 background-color: #FFE4E1; /* ボックス背景色 */
 color: #666666; /* 文章色 */
 box-shadow: 4px 4px 1px #FFB6C1; /* 影の色 */
}
.clip-box-b::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #C0C0C0; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #ccc; /*クリップ影*/
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box-b::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #FFE4E1; /*背景色と同じ色に！*/
 z-index: 2;
}
/*--------------------------------------
  メリット・デメリット　BOX
--------------------------------------*/
.meritto, .demeritto {/*ブロックの枠*/
    position: relative;/*基準に設定*/
    padding: 0.8em 1em;/*内側の余白　上下0.8　左右1*/
    margin: 3em 0 2em;/*外側の余白　上3　左右0　下2*/
}
.meritto {/*メリットの枠線*/
    border: 3px solid #46bc63;
}
.demeritto {/*デメリットの枠線*/
    border: 3px solid #ff6e6e;
}
.meritto .box-title, .demeritto .box-title {/*タイトル部分*/
    position: absolute;/*基準をもとに自由に動かせるように*/
    top: -42px;/*上からの位置*/
    left: -3px;/*左からの位置*/
    color: white;/*文字色*/
    line-height: 32px;/*文字の高さ*/
    padding: 5px 13px 3px;/*内側の余白*/
    border-radius: 10px 10px 0 0;/*角丸　上2つだけ丸*/
}
.meritto .box-title {/*メリットのタイトル背景色*/
    background: #46bc63;
}
.demeritto .box-title {/*デメリットのタイトル背景色*/
    background: #ff6e6e;
}
.meritto .box-title:before, .demeritto .box-title:before {/*タイトルのアイコン*/
    margin-right: 10px;/*右側の余白*/
    font-size: 1.2em;/*アイコンの大きさ*/
}
.meritto .box-title:before {/*メリットのアイコン*/
    content: "\f599";
}
.demeritto .box-title:before {/*デメリットのアイコン*/
    content: "\f119";
}
.meritto ul, .demeritto ul {/*中の箇条書き*/
    list-style: none;/*●を消去*/
}
.meritto li, .demeritto li {/*中の箇条書きの中*/
    padding: .5em 0;/*上下の余白*/
}
.meritto li:before, .demeritto li:before {/*箇条書きの前にアイコン追加*/
    margin-left: -20px;/*左の余白*/
    margin-right: 10px;/*右の余白*/
}
.meritto li:before {/*メリットのアイコンと色*/
    content: "\f164";
    color: #46bc63;
}
.demeritto li:before {/*デメリットのアイコンと色*/
    content: "\f165";
    color: #ff6e6e;
}
.meritto li:before, .meritto .box-title:before, .demeritto li:before, .demeritto .box-title:before {/*アイコンの共通設定*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/*--------------------------------------
  関連記事(横長)
--------------------------------------*/
.linkto {/*全体*/
    position: relative;/*疑似要素の基準に*/
    max-width: 600px;/*最大の横幅*/
}
.linkto:before {/*疑似要素（前）*/
    position: absolute;/*基準を元に*/
    content: "関連";/*挿入する文字*/
    top: 10px;/*上からの位置*/
    left: 125px;/*左からの位置*/
    display: inline-block;/*縦横設定できるように*/
    width: 47px;/*横幅*/
    height: 27px;/*縦幅*/
    text-align: center;/*中央揃え*/
    vertical-align: middle;/*縦の中央揃え*/
    background: #ff525290;/*背景色*/
    font-size: 14px;/*文字の大きさ*/
    line-height: 28px;/*行の高さ*/
    color: white;/*文字色*/
    letter-spacing: 3px;/*文字間隔*/
    padding-left: 3px;/*内側の余白*/
    border-radius: 2px;/*角丸*/
}
.linkto:after {/*疑似要素（後）*/
    position: absolute;/*基準を元に*/
    display: flex;/*中の要素を動かせるように*/
    height: 100%;/*背景の高さ*/
    padding: 0px 15px;/*内側の余白（左右15px）*/
    content: "\f138";/*アイコン*/
    font-family: "Font Awesome 5 Free";/*アイコンを表示できるように*/
    top: 0px;/*上からの位置*/
    right: 0px;/*右からの位置*/
    font-size: 2.8em;/*フォントサイズ*/
    color: #fff;/*文字色*/
    background: #eaedf2;/*背景色*/
    align-items: center;/*中央揃え*/
}
.linkto .tbtext {/*テキスト部分*/
    padding: 30px 62px 0px 10px;/*内側の余白（上右下左）*/
    vertical-align: top;/*上揃えに*/
    font-size: .95em;/*文字の大きさ*/
}
/*--------------------------------------
関連記事カード２を変更
--------------------------------------*/
.longc_linkto{/*カード全体の設定*/
    position: relative;/*疑似要素の基準に設定*/
    padding: 5px 5px 36px 5px;/*内側の余白（上左右5px 下36px）*/
}
.longc_linkto img {/*アイキャッチ画像が入っている部分の大きさ*/
    max-width: 40%;/*画像部分の横幅最大*/
    vertical-align: top;/*上揃え*/
}
.longc_img img {/*アイキャッチ画像*/
    padding: 0px;/*内側の余白10pxから0pxに*/
}
.longc_linkto .c_linkto_text {/*テキスト部分*/
    padding: 0 2%;/*内側の余白（上下0 左右2%）*/
    display: inline-block;/*横並びになるように*/
    max-width: 55%;/*テキスト部分の横幅最大*/
    font-size: .8em;/*フォントサイズを小さく*/
}
.longc_time {/*投稿日*/
    display: none;/*削除*/
}
.longc_linkto .c_linkto_text:before {/*疑似要素（前）*/
    position: absolute;/*基準に対して動けるように*/
    content: "関連";/*表示する文字*/
    top: 5px;/*上からの位置*/
    left: 5px;/*左からの位置*/
    display: inline-block;/*自由に横幅や高さを設定できるように*/
    width: 47px;/*横幅*/
    height: 27px;/*高さ*/
    text-align: center;/*中央揃え*/
    background: #F28282;/*背景色*/
    font-size: 14px;/*フォントサイズ*/
    line-height: 28px;/*行の高さ（縦方向中央揃え用）*/
    color: white;/*文字の色*/
    letter-spacing: 3px;/*文字の間隔*/
    padding-left: 3px;/*内側の余白（左）*/
    border-radius: 2px;/*角丸*/
}
.longc_linkto .c_linkto_text:after {/*疑似要素（後）*/
    position: absolute;
    content: "つづきを読む";
    bottom: 5px;
    right: 0px;
    display: inline-block;
    width: 100%;
    height: 27px;
    text-align: center;
    background: #EBEDF0;
    font-size: 14px;
    line-height: 28px;
    color: #599EFF;
    letter-spacing: 3px;
}
/*****   PCでの画像表示   *****/
@media only screen and (min-width: 481px){/*横幅481px以上での表示*/
.longc_img {/*アイキャッチ画像が入っている部分の大きさ*/
    width: 30%;/*横幅*/
}
.longc_linkto img {/*アイキャッチ画像の大きさ*/
    max-width: 100%;/*横幅*/
}
.c_linkto.longc_linkto .longc_content {/*テキスト部分*/
    vertical-align: top;/*上揃え*/
}
.longc_linkto .c_linkto_text {/*テキスト部分*/
    padding: 0 2%;/*内側の余白（上下0　左右2%）*/
    font-size: 1em;/*フォントサイズ*/
}}

/*--------------------------------------
タイムライン　ラベル変更
--------------------------------------*/
.tl_label { /*ラベルの装飾*/
  padding: 3px 12px;
  color: #fff;
  font-size: .8em;
  font-weight: bold;
  background:#F28282; /*ラベルの色*/
  display: inline-block;
  border-radius:15px;
  margin-bottom:1em;
}
/*--------------------------------------
キーボード表示
--------------------------------------*/
.keybord {
    padding: 0.5em .8em;
    background: whitesmoke;
    border: solid 2px silver;
    color: #424242;
    line-height: 1.5em;
    font-size: .8em;
    margin: 0px .3em;
    font-weight: normal;
    border-radius: 5px;
    box-shadow: 0 1px 0 #c3c3c3;
    vertical-align: text-top;
}
/*--------------------------------------
カスタマイズのビフォーアフター
--------------------------------------*/
.custom1 {
    text-align: center;
    border: solid 3px #ff7f7f;
    border-radius: 7px;
    margin: 2.8em 0 1.5em 0;
    padding: 0 0.5em 0.5em 0.5em;
}
.custom1-top {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-align: center;
    padding: 3px 8px;
    font-size: 1.1em;
    background: #ff7f7f;
    color: #FFF;
    box-shadow: 0 0 0 6px #ff7f7f;
    margin: -2em 0 0 0;
    font-weight: bold;
    border: 2px dashed #ff7f7f;
    border-radius: 5px;   
}
.custom1-before {
    position: relative;
    text-align: center;
    padding: 0.1em 0.2em;
    margin: 1em auto;
    width: 50%;
    border-radius: 10px;
    letter-spacing: 0.1em;
    font-weight: bold;
    background: #ffcccc;
    color: #FFF;
}
.custom1-before:before{
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #ffcccc;
}
.custom1-after {
    position: relative;
    text-align: center;
    padding: 0.1em 0.2em;
    margin: 1em auto;
    width: 50%;
    border-radius: 10px;
    letter-spacing: 0.1em;
    font-weight: bold;
    background: #ffcccc;
    color: #FFF;
}
.custom1-after:before{
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #ffcccc;
}
/*カスタマイズビフォーアフターここまで*/
/*--------------------------------------
ファイルダウンロードボタン
--------------------------------------*/
.btn-top-radius {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 8px 10px 5px 10px;
  text-decoration: none;
  color: #FFA000;
  background: #fff1da;
  border-bottom: solid 4px #FFA000;
  border-radius: 15px 15px 0 0;
  transition: .4s;
}

.btn-top-radius:hover {
  background: #ffc25c;
  color: #FFF;
}
/*--------------------------------------
吹き出しの周りの線を消す
--------------------------------------*/
.entry-content .faceicon img {
    border: none;
}
/*--------------------------------------
余白を作る
--------------------------------------*/
.m30-t{
    margin-top: 100px!important;
}