/*
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.1.1
/*--------------------------------------
ここから下に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;
}
/*アフィリエイト用ボタンリンク*/
.btn_link{
text-align:center;/*中央寄せ*/
}
.btn_link>a{
    margin: .5em .5em .5em 0;
    text-decoration: none;
    display: inline-block;
    padding: .4em 1.3em;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    background-color: #4fc3f7;/*背景色*/
    color: #fff;/*文字色*/
    font-weight: bold;/*文字の太さ*/
}
.btn_link>a:hover{
    text-decoration: none;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}
#logo, #logo img, .desktop-nav li a, #drawer__open {
    height: 100px;/*スマホ用サイズ*/
    line-height: 50px;/*スマホ用サイズ*/
}

@media only screen and (min-width: 768px) {
    #logo, #logo img, .desktop-nav li a {
       height: 160px;/*768px〜で見たとき用サイズ*/
       line-height: 70px;/*768px〜で見たとき用サイズ*/
    }
}
.booklink-image > img {
    display: none!important;
}
/*--------------------------------------
記事カードに余白を追加
--------------------------------------*/
.cardtype__img img {/*カード記事の画像*/
    padding: .45em .45em 0 .45em;/*上　右　下　左の余白*/
}
/*-----こちらはお好みで-----*/
.osusume-card .cardtype__link {/*カード記事全体に対して*/
    padding-bottom: 15px;/*下の余白(内側)*/
    text-align: center;/*文字中央揃え*/
}
/*--------------------------------------
NEW部分の位置調整（記事カード余白追加用）
--------------------------------------*/
.newmark {/*NEWの部分*/
    right: 1.05em;/*右からの距離*/
    top: 1.05em;/*上からの距離*/
}

/*関連記事カスタマイズ*/
.linkto {
	box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
	transition: .3s;
	border: solid 1px #eaedf2;
	font-size: .9em;
	position: relative;
}

.linkto:after{
	position: absolute;
	font-family: 'Quicksand','Avenir','Arial',sans-serif,FontAwesome;
	content:'続きを読む \f101';
	right:10px;
	bottom: 10px;
	padding:0 3px;
	background:#191970;/*「続きを読む」の背景色*/
	color:#fff;/*「続きを読む」の文字色*/
	font-size: .8em;
	border-radius:2px;
}
.linkto:hover {
	background:#fff;
	box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
.linkto img,
.linkto:hover img {
	box-shadow: none;
}
.tbtext {
	padding: 1em .5em;
}
.linkto .tbimg {
	width: 120px;
}

@media (min-width:768px) and (max-width:1023px) {
	.linkto {
		padding:5px;
	}
	.linkto:after{
		right:5px;
		bottom: 5px;
	}
	.linkto .tbimg {
		width: 100px;
		vertical-align:top;
		padding-top:3px;
	}
	.tbtext {
		padding: 0 .5em 1.2em .5em;
	}	
}

@media (max-width:767px){
	.linkto {
		padding:3px;
	}
	.linkto:after{
		right:3px;
		bottom: 3px;
	}
	.linkto .tbimg {
		width: 100px;
		vertical-align:top;
		padding-top:3px;
	}
	.tbtext {
		padding: 0 .5em 1.2em .5em;
	}	
}
/*関連記事カスタマイズここまで*/
/*--------------------------------------
  ヘッダーお知らせ欄
--------------------------------------*/
.header-info a {/*お知らせ欄全体*/
    padding: 5px;/*内側の余白　上下左右*/
    font-size: 15px;/*文字の大きさ*/
}
.header-info a:after {/*後ろにぶち込む*/
    content: "クリックして見に行く";/*PCでのセリフ*/
    font-weight: 500;/*文字の太さ*/
    border: 1px solid #fff;/*枠線*/
    border-radius: 5px;/*角丸*/
    padding: 2px 10px;/*内側の余白*/
    margin-left: 5px;/*外側の余白（文字との距離）*/
}
@media screen and (max-width: 500px){/*スマホ表示*/
.header-info a:after {
    display: block;/*改行されるように*/
    width: 60%;/*ボタンっぽいやつの横幅*/
    content: "タップして見に行く";/*スマホでのセリフ*/
    margin: 0 auto;/*中央寄せ*/
    font-size: .8em;/*文字のサイズ*/
}}
 .abtn-mc1 a{
    display: inline-block;
    width: 95%;
    margin: 0;
    border-radius: 3px;
    background: #ffa851;
    color: #fff;
    padding: .2em .3em;
    font-size: 1.3em;
    font-weight: bold;
    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:"FontAwesome";
    margin-left: 20px;
}
.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-top-text{
    font-weight: bold;
    margin-bottom:.4em!important;
}
.abtn-mc1-under-text{
    font-size: .8em;
}
/*--------------------------------------
  更新マークに丸い背景色を追加
--------------------------------------*/
.entry-header .updated:before {/*更新マークのクラス名*/
display: inline-block;/*位置調整ができるブロックに*/
padding: 3px;/*内側の上下左右の余白*/
margin-right: 6px;/*外側-右側の余白*/
color: #fff;/*アイコンの色*/
background: #ff5252;/*丸い背景の色（お好みで）*/
width: 25px;/*横幅*/
height: 25px;/*縦幅*/
border-radius: 50%;/*角を丸く*/
line-height: 24px;/*文字の高さ*/
text-align: center;/*中央寄せ*/
}
/*--------------------------------------
  投稿マークに丸い背景色を追加
--------------------------------------*/
.entry-header .pubdate:before {/*更新マークのクラス名*/
display: inline-block;/*位置調整ができるブロックに*/
padding: 3px;/*内側の上下左右の余白*/
margin-right: 6px;/*外側-右側の余白*/
color: #fff;/*アイコンの色*/
background: #426579;/*丸い背景の色（お好みで）*/
width: 25px;/*横幅*/
height: 25px;/*縦幅*/
border-radius: 50%;/*角を丸く*/
line-height: 24px;/*文字の高さ*/
text-align: center;/*中央寄せ*/
}
/*--------------------------------------
  砂時計マークに丸い背景色を追加
--------------------------------------*/
.entry-header .fa-hourglass-half:before {/*更新マークのクラス名*/
display: inline-block;/*位置調整ができるブロックに*/
padding: 3px;/*内側の上下左右の余白*/
margin-right: 6px;/*外側-右側の余白*/
color: #fff;/*アイコンの色*/
background: #333333;/*丸い背景の色（お好みで）*/
width: 25px;/*横幅*/
height: 25px;/*縦幅*/
border-radius: 50%;/*角を丸く*/
line-height: 24px;/*文字の高さ*/
text-align: center;/*中央寄せ*/
}
/*--------------------------------------
記事URLコピーボタン（小ボタン&背景有り）
--------------------------------------*/
.copy_main {
	margin: 0 0 2.4em;
	padding: 20px 0;
	background: #eee;
}
.copy_btn {/*ボタンデザイン*/
	width: 300px;/*ボタンの横幅*/
	margin: auto;
	padding: 8px 0;
	color: #fff;/*ボタンの文字色*/
	text-align: center;
	font-size: 15px;
	cursor: pointer;
	background: #b5b5b5;/*ボタン背景色*/
	transition: .3s;
}
.copy_btn:hover {/*ホバーエフェクト*/
	background: #888;/*ボタン背景色*/
	color: #fff;/*文字色*/
}
.copy_btn.copied {/*コピー成功時*/
	background: #74d899;/*ボタン背景色*/
	color: #fff;/*文字色*/
	pointer-events: none;
}
.copy_btn.not-copied {/*コピー失敗時*/
	background: #d87f74;/*ボタン背景色*/
	color: #fff;/*文字色*/
	pointer-events: none;
}