@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

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




/*******************
 * hedear
 *******************/

.article h1 {
    counter-reset: sub-chapter;
    margin: 0.5em 0 0.5em 0;

}

.article h2 {
    margin: 20px auto;
    padding: 20px;
    border-left: solid 7px #01bd5a;
    font-size: 30px;
    line-height: 1.4;
}

.article h3 {
    margin: 80px auto 10px auto;
    padding: 20px;
    font-size: 25px;
    background-color: #00a6ff;
    box-shadow: 7px -7px #00293e;
}

.article h4 {
    margin: 40px auto 10px auto;
    color: #000000;/*文字色*/
    border: solid 6px #ff7700;/*線色*/
    background-color: #f2fa86;/*線色*/
    padding: 0.5em;/*文字周りの余白*/
    font-size: 18px;
}

.article h5 {
    margin: 10px 0 0;
    position: relative;
    line-height: 1.4;
    font-size: 18px;
    padding: 0.2em 1.0em;//2.5
    background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
    background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
    color: white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

.article h6 {
    margin: 0px 0px 0px 0px;
    position: relative;
    padding: 0.2em 2.0em;
    font-size: 20px;
    // font-weight:bold
    color: rgb(48, 1, 1);
}

.article h6:before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";/*アイコンのユニコード*/
    font-weight: 900;
    position: absolute;/*絶対位置*/
    font-size: 1em;/*サイズ*/
    left: 12px;/*アイコンの位置*/
    top: 6px;/*アイコンの位置*/
    color: rgb(253, 0, 0); /*アイコン色*/
    font-weight: 900;
}









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

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

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



/************************************
** 投稿ページに固定Good,Badボタンを描画
************************************/
#ld-vote{
	position:fixed; left:20px; bottom:20px; z-index:9999;
	display:flex; flex-direction:column; gap:12px;
}
#ld-vote .ld-btn{
	display:flex; align-items:center; gap:10px;
	min-width:96px; min-height:56px;         /* タップ領域を確保 */
	padding:14px 22px;
	font-size:20px; font-weight:700; line-height:1;
	cursor:pointer;
	border:2px solid #d0d0d0; border-radius:16px;
	background:#fff; color:#333;
	box-shadow:0 4px 14px rgba(0,0,0,.18);
	transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
}
#ld-vote .ld-btn:hover{ background:#f5f5f5; }
#ld-vote .ld-btn:active{ transform:scale(.94); }      /* 押した感 */
#ld-vote .ld-btn[data-type="good"]:hover{ border-color:#4caf50; }
#ld-vote .ld-btn[data-type="bad"]:hover{ border-color:#e57373; }
#ld-vote .ld-btn:disabled{ opacity:.55; cursor:default; box-shadow:none; }
#ld-vote .ld-btn span{ font-size:16px; opacity:.75; }  /* 数字は少し小さめ */

/* スマホではさらに大きく／被り防止で少し内側に */
@media (max-width:600px){
	#ld-vote{ left:12px; bottom:12px; gap:10px; }
	#ld-vote .ld-btn{ min-height:60px; font-size:22px; padding:16px 24px; }
}