@charset "utf-8";
/* CSS Document */

/* #################################################################
	 共通 ページ
##################################################################*/

/*=============================
    共通設定　　　             
=============================*/
html,body ,*{
	box-sizing: border-box;
	-webkit-box-sizing : border-box;
        scroll-behavior: smooth;
}

.mb5{
 margin-bottom:15%!important;	/*下に隙間。importantは最優先、indexに書いたところに反映*/
}

@font-face {
	font-family: YuGothicM;
	src: local("Yu Gothic Medium");
}



body{
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	color:#666;
	background-color:#f7f2e9;
}

img{
	max-width: 100%;
	height: auto;
	width /***/:auto;	/*IE8のみ適用*/
}

a{
	color:#666;	/*リンクの色*/
}


/*
画像をリピートしてほしくない時はこれを追加
background-repeat:no-repeat;

画像を全画面表示（画像を綺麗に見せる、画像メイン）
background-size:cover;

画像の縦幅は均一にしてどの端末でも同じ表示
background-size:contain;

ブログタイトルの下に<p></p>で囲った文章を入れたのでこれの指定
.maintitle p}

*/

/* #################################################################
	 ヘッダー
##################################################################*/

.maintitle{
	background-color:#eae0ce;	
	background-image:url(../img/dora.jpg);	
	background-repeat:no-repeat;
	background-position:center center;	
	background-size:contain;	
	text-align:center;	/*センター揃え*/
	padding:100px 3%;	/*文字の外の余白（上記参照）*/
	font-size:24px;	/*文字のサイズ*/
	margin-bottom:5%	/*文字の下に余白*/
}

.maintitle p{	/*大枠の中にある文字の設定*/
	margin-top:3%;	/*文字の上の空白*/
	font-size:18px;	/*文字のサイズ*/
	display:none; /*非表示*/
}

.maintitle h1{
	display:none; /*非表示*/
}

/* #################################################################
	 フッター
##################################################################*/

.copy{
	background-color:#eae0ce;	/*背景のカラー*/
	text-align:center;	/*文字のセンター揃え*/
	padding:15px 3%;	/*背景の余白*/
	font-size:12px;	/*テキストサイズ*/
}

.footer{
	background-color:#ffffff;	/*フッターの色*/
}

.footer ul{	/*大枠*/
	text-align:center;
	padding-top:5%;	/*外側上の隙間*/
	padding-bottom:5%;	/*外側下の隙間*/
}


.footer li{	/*大枠の中にある文字の設定*/
	display:inline-block;	/*テキストをピタピタの枠にした*/
	margin-right:2%;	/*右に隙間*/
	margin-left:2%;	/*左に隙間*/
}

.footer a{
	color:#666;	/*リンクの色*/
}

/* #################################################################
	 共通 ページ
##################################################################*/

.main{
	max-width:1200px;	/*最大のpx数*/
	width:90%;	/*画面のサイド90%*/
	margin:auto;	/*余白を自動で調整して*/
	margin:0 auto 8%;	/*autoは左右、同じであれば省略OK*/
	display:flex;	/*横並び*/
}

/* #################################################################
	 メイン
##################################################################*/

.content{
	width:72%;	/*コンテンツの幅*/
	margin-right:3%	;/*外の隙間*/
}

.blog{
	display:flex;	/*横並び*/
	flex-wrap:wrap;	/*折り返して*/
}

.blog-1{
	background-color:#fff;
	width:46%;	/*コンテンツの幅*//*44×2+3×4＝100％ 中の隙間は計算に入れない(最初のhtmlタグにより)*/
	margin-right:2%;/*右の隙間*/
	margin-left:2%;/*左の隙間*/
	margin-bottom:4%;/*下の隙間*/
}

.blog-1 a{
	color:#666;	/*リンクの色*/
}

.blog-1 .img{
	width:100%;	/*30％に表示して*/
}

.blog-1 .img img{
	width: 100%;
}

.blog-1 .data{	/*日付け*/
	font-size:14px;
	margin-bottom:8px;
	margin-top:10px;
	padding:0% 3%;
}

.blog-1 .data span{	/*日時を基準値にして*/
	position:relative;	/*「更新ボタン」の位置を決めるための親を指示するタグ*/
	padding-left:18px;
}

.blog-1 .data span:before{	/*何か前につけたい時*/
	background-image:url(../img/koushin.png);
	background-size:contain;
	content:"";
	position:absolute;	/**/
	top:50%;	/*文字に対して必ず真ん中にくるようにする(半分から下に更新ボタンがくる)*/
	left:0;	/*左に必ずつく*/
	width:12px;
	height:12px;
	margin-top:-6px;
}

.blog-1 .title{	/*ブログのタイトル*/
	font-size:16px;
	margin-bottom:5px;
	padding:0% 3% 2% 3%;
}

/* #################################################################
	 サブメニュー（プロフィール）
##################################################################*/

.sub{
	background-color:#ffffff;
	width:25%;	/*メニューの幅*/
	height:100%;
	padding:3%;/*中の隙間*/
}

.profile{
 border:1px solid #eae0ce;
 padding:20px 5%;
 margin-bottom:10%;
}

.profile .img{
	max-width:100px;
	width:50%;
	margin:0 auto 5%;
}


.profile .name{
 text-align:center;
 margin-top:8%;
 margin-bottom:8%;
}

.profile .title{
 font-size:18px;
 text-align:center;
 margin-bottom:8%;
}

.profile .txt{
 font-size:14px;
 line-height:1.6;
}

/* #################################################################
	 サブメニュー（カテゴリー）
##################################################################*/

.categorytitle{
	background-color:#eae0ce;
	padding:10px 3%;/*中の隙間*/
	margin-bottom:5%;
}

.categorylist a{
	display:block;	/*ブロック(箱)を作る　これがないとリンクの部分しか押せない*/
	padding:14px 0 14px 0;	/*縦幅、横幅*/
	color:#666;	/*リンクの色*/
}

.categorylist li{
	border-bottom:dashed 2px #eae0ce;	/*線の種類、太さ、色*/
	position:relative;	/*「◼︎」の位置を決めるための親を指示するタグ*/
       padding-left:20px;
}

.categorylist li:before{	/*何か前につけたい時*/
	content:"";
	background-color:#ebc200;
	position:absolute;	/**/
        width:12px;
        height:12px;
        
	top:50%;	/*文字に対して必ず真ん中にくるようにする(半分から下に◼︎がくる)*/
	left:0;	/*左に必ずつく*/
margin-top:-6px;
}

.categorylist li:last-child{
	border-bottom:0;	/*最後の線いらない場合のタグ*/
	margin-bottom:0%;
	padding-bottom:0%;
}


/* #################################################################
	 サブメニュー（タグ）
##################################################################*/

.tagtitle{
	background-color:#eae0ce;
	padding:10px 3%;/*中の隙間*/
	margin-bottom:5%;
}

.taglist a{
	color:#666;	/*リンクの色*/
	padding:10px 0 10px 15px;	/*縦幅、横幅*/
}

.taglist li{
	display:inline-block;	/*文字を基準に箱を作るので隙間を作れる*/
	position:relative;	/*「◼︎」の位置を決めるための親を指示するタグ*/
	margin-bottom:5%;
	margin-right:5%;
	border:solid 1px #eae0ce;	/*線の種類、太さ、色*/
	border-radius:8px;	/*丸角*/
	padding:10px 10px ;	/*縦幅、横幅*/
}

.taglist li:last-child{
	margin-bottom:0%;
}

.taglist li:before{	/*何か前につけたい時*/
	content:"＃";
	font-size:20px;
	color:#ebc200;
	position:absolute;	/*「◼︎」を自由に置けるが、細かい指示をするタグ*/
	top:50%;	/*文字に対して必ず真ん中にくるようにする(半分から下に◼︎がくる)*/
	left:5%;	/*左に必ずつく*/
	margin-top:-10px;	/*20pxなのでその半分あげる*/
}
.taglist{
	padding:10px 0;	/*タグのブルー部分の下に隙間を入れる*/

}

/* #################################################################
	 サブメニュー（おすすめ記事）
##################################################################*/

.osusumetitle{
	background-color:#eae0ce;
	padding:10px 3%;	/*中の隙間*/
	margin-bottom:5%;
}

.osusumelist li{
	border-bottom:1px solid #eae0ce;
	padding:5% 0;
}

.osusumelist li:first-child{
	padding-top:0;
}

.osusumelist li:last-child{
	border-bottom:0;
} 
 
.osusumelist a{
	display:flex;
	align-items:center;
	color:#666;
	position:relative;
}

.osusumelist a:after{
	content:"";
	position:absolute;
	width:10px;
	height:10px;
	top:50%;
	margin-top:-5px;
	right:0;
	border-right: 2px solid #ebc200;
	border-top: 2px solid #ebc200;
	transform: rotate(45deg);
}

.osusumelist .img{
	width:50%;	/*50％に表示して*/
}

.osusumelist .img img{
	width: 100%;
	/*height: 5.5vw;	ブラウザの幅を変えても横幅に合わせて高さを調整してくれる*/
	/*object-fit: cover;	画像を枠いっぱいに表示して欲しい時はつける*/
	/*font-family: ‘object-fit: cover;’;	インターネットエクスプローラー用のタグ、上野とセットでつける*/
}

.osusumelist .contents{	/*全体*/
	width:60%;
	margin-left:5%;
	margin-bottom:3%;
}

.osusumelist .data{	/*日付け*/
	font-size:14px;
	margin-bottom:10px;
}

.osusumelist .title{	/*ブログのタイトル*/
	font-size:14px;
	margin-bottom:10px;
}
.osusumelist{
	padding:10px 0;	/*タグのブルー部分の下に隙間を入れる*/
}

/* #################################################################
	ブログの内容（トップに戻るタイトル）
##################################################################*/

.maintitle-page{
	background:#eae0ce;
	padding:15px;
	font-weight:bold;
	margin-bottom:5%;
	text-align:center;
}

.maintitle-page img{
	max-width:300px;
	width:50%;
}

/* #################################################################
	ブログの内容（プレビュー画像まで）
##################################################################*/

.postcategorylist li, .categoryname{
	display:inline-block;	/*テキストをピタピタの枠にした*/
	font-size:12px;
	margin-right:5px;	/*右に隙間*/
	display:inline-block;	/*文字を基準に箱を作るので隙間を作れる*/
	margin-bottom:3%;
	border:solid 1px #eae0ce;	/*線の種類、太さ、色*/
	background-color:#fff;
	border-radius:8px;	/*丸角*/
	padding:8px 8px ;	/*縦幅、横幅*/
}

.postcategorylist a{
	color:#666;	/*リンクの色*/
}

.post h1{
	padding-bottom:3%;	/*文字の外の余白（上記参照）*/
	font-size:24px;	/*文字のサイズ*/
	margin-bottom:1%	/*文字の下に余白*/
}

.post h1:after {	/*タイトル下の下線*/
	content: "";
	width: 100%;
	height: 5px;
	background: -webkit-repeating-linear-gradient(135deg, #f7f2e9, #f7f2e9 3px, #ebc200 3px, #ebc200 6px);
	background: repeating-linear-gradient(135deg, #f7f2e9, #f7f2e9 3px, #ebc200 3px, #ebc200 6px);
	display:block;
	margin-top:2%;
}

.postdata{	/*日時を右寄せ*/
	margin-bottom:3%;
	text-align:right;
}

.postdata span{	/*日時を基準値にして*/
	position:relative;	/*「更新ボタン」の位置を決めるための親を指示するタグ*/
	padding-left:18px;
}

.postdata span:before{	/*何か前につけたい時*/
	background-image:url(../img/koushin.png);
	background-size:contain;
	content:"";
	position:absolute;	/**/
	top:50%;	/*文字に対して必ず真ん中にくるようにする(半分から下に更新ボタンがくる)*/
	left:0;	/*左に必ずつく*/
	width:12px;
	height:12px;
	margin-top:-6px;
}

.postimg{
	margin-bottom:8%;
}

/* #################################################################
	ブログの内容（目次　ボタンバージョン）
##################################################################*/

.postmokuji2{
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.postmokujititle2{
	text-align:center;	/*センター揃え*/
	font-size:20px;
	margin-bottom:3%;
}

.postmokujilist2 li a{
	display:inline-block;	/*テキストをピタピタの枠にした*/
	font-size:24px;
	color:#666;
	margin-right:5px;	/*右に隙間*/
	display:inline-block;	/*文字を基準に箱を作るので隙間を作れる*/
	background-color:#eae0ce;
	border-radius:50%;	/*丸角*/
	padding:10px 10px ;	/*縦幅、横幅*/
}

.postmokujilist2 li{
	margin:0 0.5%;
}

.postmokujilist2{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;	/*フレックスを設定した時のセンター*/
}

/* #################################################################
	ブログの内容（目次　大河ドラマボタン）
##################################################################*/

.postlink_taiga{	/*ボタンのデザイン指示*/
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	margin:0 auto;
	padding: 15px 15px;
	border-radius: 5px;
	background-color: #fff;
	color:#666;
        border:solid 1px #eae0ce;	/*線の種類、太さ、色*/
	font-size: 16px;
	margin-top:-2%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}


/* #################################################################
	ブログの内容（見出し）
##################################################################*/

.postmidashi{
	background: #eae0ce;
	font-size: 22px;
	padding: 12px 3%;
	margin-bottom: 4%;
	line-height: 1.4;
	color: #666;
}

/* #################################################################
	ブログの内容（リスト）
##################################################################*/

.post2list{
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.post2list > li{
	margin-bottom:3%;
}

.post2list li:last-child{
	border-bottom:0;
} 
 
.post2list a{
	background-color:#fff;
	padding:3%;
	display:flex;
	position:relative;
}

.post2list a:after{
	content:"";
	position:absolute;
	width:10px;
	height:10px;
	top:50%;
	margin-top:-5px;
	right:3%;
	border-right: 2px solid #ebc200;
	border-top: 2px solid #ebc200;
	transform: rotate(45deg);
}

.post2list .img{
	width:30%;	/*30％に表示して*/
}

.post2list .img img{
	width: 100%;
	/*height: 5.5vw;	ブラウザの幅を変えても横幅に合わせて高さを調整してくれる*/
	/*object-fit: cover;	画像を枠いっぱいに表示して欲しい時はつける*/
	/*font-family: ‘object-fit: cover;’;	インターネットエクスプローラー用のタグ、上野とセットでつける*/
}

.post2list .post2{	/*全体*/
	width:60%;
	margin-left:5%;
}

.postdoramatitle{	/*ブログのタイトル*/
	font-size:16px;
	margin-bottom:15px;
}

.bangumi li{
	position:relative;	/*親の位置*/
	padding-left:25px;
	border-bottom:1px solid #eae0ce;
	padding:3% 0 3% 25px;
}

.bangumi li:before{
	background-image:url(../img/tokei.png);
	background-size:contain;
	content:"";
	position:absolute;	/**/
	top:50%;	/*文字に対して必ず真ん中にくるようにする(半分から下に更新ボタンがくる)*/
	left:0;	/*左に必ずつく*/
	width:20px;
	height:20px;
	margin-top:-10px;
}

.bangumi li.icon2:before{
	background-image:url(../img/start.png);
}

.bangumi li.icon3:before{
	background-image:url(../img/hito.png);
}

.post2list dl{	/*箱の指定*/
	position:relative;	/*親の位置*/
}

.post2list dt{	/*項目の指示*/
	position:absolute;	/*親を基準に自由配置*/
}

.post2list dd{	/*内容の指示*/
	padding-left:80px;
	margin-bottom:2%;
	padding-bottom:2%;
	border-bottom:1px solid #eae0ce;
}

.post2list dd:last-child{	/*1番最後のボーダー不要*/
	border-bottom:0;
	margin-bottom:0%;
	padding-bottom:0%;
}

/* #################################################################
	ドラマおばさんより
##################################################################*/

.postpoint{
	position: relative;
	line-height:1.7;	/*行間*/
	padding:3%;	/*内側の隙間*/
	border: solid 3px #ebc200;	/*囲み線の色*/
	border-radius: 8px;	/*囲み線の太さ*/
	margin-top:15%;	/*前のコンテンツと近いので入れただけ*/
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}
.postpoint .box-title{	/*タイトルの指示*/
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;  
	line-height: 1;
	font-size: 19px;
	background: #f7f2e9;	/*背景色 これがないと線に被る*/
	color:#ebc200;	/*文字の色*/
	font-weight: bold;	/*太字*/
}

/* #################################################################
	目次に戻る（ページトップ）
##################################################################*/

.postback{
	width:100px;
	height:100px;
	background-color:#666;
	color:#fff;
	font-size:12px;
	line-height:1.4;
	text-align:center;
	padding:6px;
	border-radius:50% 50% 0% 0%;
	display:block;	/*aタグなので箱の指定*/
	position:fixed;
	right:3%;
	bottom:-50px;
	z-index:100;

}


/* #################################################################
	ブログの内容（目次　通常バージョン）※ACFに反映なし
##################################################################*/

.postmokuji{
	background-color:#fff;	/*背景のカラー*/
	padding:30px 5%;	/*背景の余白*/
	width:100%;
	max-width:600px;/*端末によってかわる。600以下になったら100％になる*/
	margin:0 auto 5%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.postmokujititle{
	text-align:center;	/*センター揃え*/
	letter-spacing:10px;	/*テキストの行間隔（後ろにつく）*/
	text-indent:10px;	/*テキストの前に空白*/
}

.postmokujilist li{
	position:relative;	/*「◼︎」の位置を決めるための親を指示するタグ*/
	margin-top:2%;
}

.postmokujilist{
	counter-reset:listnumber;	/*No.をリセットしてね*/
}

.postmokujilist li:before{	/*何か前につけたい時*/
	content:"0"counter(listnumber)".";	/*目次タイトルの前に何かつけたい*/
	counter-increment:listnumber;	/*目次タイトルの前に数字をつける*/
	font-family:"Roboto", sans-serif;	/*Googleフォントでcopy codeしたものを貼り付け（css classの方）*/
	color:#ebc200;
	font-weight:bold;
	font-size:18px;
	margin-right:1%;
}

/* #################################################################
	ブログの内容（本文）
##################################################################*/

.posthonbun{
	line-height:1.7;	/*行間*/
	margin-bottom:3%;
        padding-left:3%;	/*内側の隙間*/
        padding-right:3%;	/*内側の隙間*/
}

/* #################################################################
	ブログの内容（小見出し）
##################################################################*/

.postkomidashi{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #666;/*文字色*/
	font-size: 20px;
	background: transparent;/*背景透明に*/
	border-left: solid 5px #ebc200;/*左線*/
	margin-bottom:3%;
	margin-top:3%;
}

/* #################################################################
	ブログの内容（大画像＆キャプション）※ACFに反映なし
##################################################################*/

.postgallery p:only-child{
	width:100%;
	display:block;
	margin-top:2%;
}

/* #################################################################
	ブログの内容（小画像＆キャプション）※ACFに反映なし
##################################################################*/

.postgallery{
	display:flex;	/*横並び*/
	flex-wrap:wrap;	/*折り返して*/
}

.postgallery p{
	width:46%;	/*コンテンツの幅*//*44×2+3×4＝100％ 中の隙間は計算に入れない(最初のhtmlタグにより)*/
	margin-right:2%;/*右の隙間*/
	margin-left:2%;/*左の隙間*/
	margin-bottom:4%;/*下の隙間*/
}

.postgallery span{
	display:block;
	margin-top:2%;
}

/* #################################################################
	ブログの内容（リンクボタン）
##################################################################*/

.postlink{	/*ボタンのデザイン指示*/
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	margin:0 auto;
	padding: 15px 15px;
	border-radius: 5px;
	background-color:#eae0ce;
	font-size: 16px;
	margin-top:2%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.postlink:after{	/*矢印の指示*/
	transform: rotate(45deg);
	width: 5px;
	height: 5px;
	margin-left: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: '';
}

/* #################################################################
	ブログの内容（一覧へ戻るボタン）
##################################################################*/

.backlink{	/*ボタンのデザイン指示*/
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	margin:0 auto;
	padding: 15px 15px;
	border-radius: 5px;
	background-color: #eae0ce;
	font-size: 16px;
	margin-top:2%;
	margin-top:15%;	/*前のコンテンツと近いので入れただけ*/
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}


/* #################################################################
	ブログの内容（吹き出し）※ACFに反映なし
##################################################################*/

.posthukidashi{
	width: 100%;
	display:flex;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
	align-items:center;
}

.postaikon{
	width: 20%;
	border-radius:50%;
	overflow:hidden;
}

.hukidashikomento{
	width:70%;
	margin-left:5%;
	height:100%;
	background-color:#eae0ce;
	border-radius:10px;
	position:relative;
	padding:3%;
}

.hukidashikomento:after {
	content:"";
	display:inline-block;
	position:absolute;
	top:10px; 
	left:-24px;
	border:12px solid transparent;
	border-right:20px solid #eae0ce;
}

/* #################################################################
	ブログの内容（テーブル　※隙間太いデザインバージョン）※ACFに反映なし
##################################################################*/

.posttable{
	width:100%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.posttable th{	/*項目の横幅*/
	width:30%;
	background:#eae0ce;
	padding:3%;
	border-bottom:7px solid #f7f2e9;
}

.posttable td{	/*内容の横幅*/
	width:70%;
	background:#fff;
	padding:3%;
	border-bottom:7px solid #f7f2e9;
}

/* #################################################################
	ブログの内容（テーブル　※通常バージョン）※ACFに反映なし
##################################################################*/

.posttable2{
	width:100%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.posttable2 th{	/*項目の横幅*/
	width:30%;
	background:#eae0ce;
	padding:2%;
	border-bottom:1px solid #f7f2e9;
}

.posttable2 td{	/*内容の横幅*/
	width:70%;
	background:#fff;
	padding:2%;
	border-bottom:1px solid #f7f2e9;
}

/* #################################################################
	ブログの内容（テーブル　※項目名・内容名ありバージョン）※ACFに反映なし
##################################################################*/

.posttable3{
	width:100%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.posttable3 tr:nth-child(1) th{	/*項目名と内容名の色*/
	background:#ebc200;
}

.posttable3 th:nth-child(2){	/*項目名と内容名の間の線*/
	border-left:1px solid #f7f2e9;
}

.posttable3 th{	/*項目部分*/
	width:30%;
	background:#eae0ce;
	padding:2%;
	border-bottom:1px solid #f7f2e9;
}

.posttable3 td{	/*内容部分*/
	width:70%;
	background:#fff;
	padding:2%;
	border-bottom:1px solid #f7f2e9;
}


/* #################################################################
	ページナビ
##################################################################*/
.wp-pagenavi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}

.wp-pagenavi a,
.wp-pagenavi span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
border:none!important;
  border-radius: 999px;
  background: #fff;
  color: #666!important;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.wp-pagenavi a:hover {
  background: #ebc200;
  color: #666;
  transform: translateY(-1px);
}

.wp-pagenavi .current {
  background: #ebc200;
  color: #fff!important;
  font-weight: 700;
}

.wp-pagenavi .pages,
.wp-pagenavi .extend {
  min-width: auto;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: #888;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
  padding: 0 18px;
  font-weight: 600;
}

@media screen and (max-width: 767px) {
  .wp-pagenavi {
    gap: 6px;
    margin-top: 32px;
  }

  .wp-pagenavi a,
  .wp-pagenavi span {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }

  .wp-pagenavi .previouspostslink,
  .wp-pagenavi .nextpostslink {
    padding: 0 14px;
  }
}