/*
Theme Name: Blogza
Theme URI: https://themeansar.com/free-themes/blogza-free-wordpress-theme/
Author: Themeansar
Author URI: https://themeansar.com
Description: Blogza is a fast, clean, modern-looking Best Responsive News Magazine WordPress theme. The theme is fully widgetized, so users can manage the content by using easy to use widgets. Blogza is suitable for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, newspaper, publishing or review siteand any creative website. Blogza is SEO friendly, WPML,Gutenberg, translation and RTL ready. Live preview : https://demos.themeansar.com/blogus/blogza/ and documentation at https://docs.themeansar.com/docs/blogus/
Version: 0.8
Requires PHP: 7.4
Requires at least: 6.7
Tested up to: 7.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: blogus
Text Domain: blogza
Tags: blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks

Blogza WordPress Theme is child theme of Blogus, Copyright 2023 Themeansar
Blogza is distributed under the terms of the GNU General Public License v3

Blogza is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
/* [fix] マウス操作で点線の枠が出ないようにする。
   キーボード操作時のフォーカス表示は :focus-visible で残す。 */
*:focus {
    outline: none;
}
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.navbar-toggler.x:focus,
.navbar-toggler:hover,
.navbar-toggler:focus,
button:focus {
    border: 0;
    outline: none;
    box-shadow: none;
}
.navbar-toggler.x:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
}
p a {
    text-decoration: underline;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Roboto', sans-serif;
}
.site-title { 
    font-family: 'Roboto', sans-serif;
}
.navbar-wp .navbar-nav > li> a { 
    font-family: 'Roboto', sans-serif;
}
body { 
    font-family: 'Roboto', sans-serif;
}
footer .site-branding-text .site-title-footer a{
    font-family: 'Roboto', sans-serif;
}

.article_content a, .bs-blog-post single a, .entry-content a, 
.comment-body a, .textwidget a, .content-area a {
    text-decoration: underline;
}
 
/* -------bs-head three---- */
.bs-headthree .bs-header-main{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: scroll;
}
/* [fix] 992px未満では .bs-header-main の中身(.container.d-none.d-lg-block)が全て非表示になり、
   .inner の min-height / padding だけが空の箱として残るため、ブロックごと非表示にする。
   ヘッダー画像を帯として残したい場合は display:none を削除し、下の1行を有効化する。 */
@media (max-width: 991.98px){
	.bs-headthree .bs-header-main{
		display: none;
	}
	/* .bs-headthree .bs-header-main .inner{ min-height: 0; padding: 0; } */
}
.bs-headthree .bs-header-main .inner{
	display: flex;
	padding: 15px 0;
	margin: 0;
	height: auto;
    min-height: 150px;
	align-items: center;
	text-align: center;
}
.bs-headthree .navbar-brand {
	margin-right: unset;
}
.bs-menu-full {
	position: relative;
}
.bs-headthree .navbar-brand .custom-logo{
    object-fit: cover;
    max-width: 100%;
    height: auto;
}
/* [fix] デスクトップ(992px以上)のロゴ幅。
   この指定が無いと画像の原寸法で表示され、大きなロゴだと巨大化する。
   カスタマイザーの Logo Width は .bs-default ヘッダー向けのCSSを出力するため
   blogza(.bs-headthree)では効かない。サイズ変更はこの width の数値で行う。
   タブレット(〜991px)=200px / スマホ(〜767px)=120px は後方のメディアクエリで指定済み。 */
@media (min-width: 992px){
    .bs-headthree .site-logo .navbar-brand,
    .bs-headthree .site-logo img,
    .bs-headthree .navbar-brand .custom-logo{
        width: 200px !important;
        max-width: 200px !important;
        height: auto !important;
    }
}
/* header Six */
.bs-headthree.six{
    margin-bottom: 50px;
}
.bs-headthree.six .bs-social {
	padding: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.bs-headthree.six .navbar-wp {
    margin: 0;
    z-index: 999;
    transition: all 1s ease-out;
	padding: 0;
	height: auto;
	min-height: 58px;
	border-radius: 0;
	margin-bottom: 30px;
    border: 1px solid;
}
.bs-headthree.six .navbar-wp .navbar-nav > li> a {
    padding: 0px;
}
.right-nav a{
    box-shadow: none;
}
.bs-blog-post .bs-blog-thumb .bs-blog-category{
    margin-left: 0px;
    margin-right: 0px;
    position: absolute;
    top: 20px;
    right: 20px;
    left: 20px;
}
.bs-blog-post .small{
    padding: 0;
}
.bs-blog-post{
    box-shadow: none;
}
.bs-blog-post:hover{
    box-shadow: none;
}
.bs-blog-meta .bs-author .auth img{
    box-shadow: none;
}
.desk-header{
    padding: 0;
}
.site-branding-text .site-title{
    font-size: inherit;
}
.site-branding-text .site-title a{
    font-size: 60px;
}
.bs-masonry-columns.c2 {
    column-gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bs-blog-post .bs-blog-meta a{
    font-weight: 500;
}
.bs-masonry-columns.c3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column-gap: 2rem;
    padding: 0;
}
.bs-blog-thumb.lg{
    height: auto;
}
.bs-blog-post .bs-blog-thumb img{
    min-height: 300px;
    transition: all 0.5s;
}
.bs-blog-post .bs-blog-thumb.back-img{
    margin-bottom: 10px;
}
.bs-blog-post .bs-blog-thumb:hover img{
    transform: scale(1.05);
}
.bs-blog-post.single .bs-blog-thumb:hover img{
    transform: scale(1);    
}
.bs-blog-post .small .title{
    line-clamp: 2;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bs-social li a i{
    width: 35px;
    height: 35px;
    font-size: 20px;
}
.right-nav a{
    width: 35px;
    height: 35px;
    font-size: 20px;
}
.menu-link-description {
    font-size: 11px;
    padding: 2px 4px;
    margin: 0 3px;
    line-height: 10px;
    position: absolute;
    border-radius: 1px;
    line-height: normal;
    top: 0;
    margin: 0 3px;
    font-weight: 700;
    display: inline-table;
    word-break: keep-all;
    overflow-wrap: unset;
    width: max-content;
    z-index: 9;
}
.menu-link-description:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    left: 3px;
    bottom: -4px;
}
.bs-info-author-block .bs-author-pic img{
    margin: 0 auto;
}
.switch .slider::before{
    font-size: 20px;
}
.navbar-nav{
    justify-content: flex-start;
    row-gap: 1rem;
    column-gap: 1.5rem;
    padding: 1rem 0;
}
.list-blog.bs-blog-post{
    padding: 0;
    margin-bottom: 0;
}
.blog-post-list{
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.bs-blog-post .bs-header{
    padding: 20px 0;
}
.page-class .bs-card-box.padding-20{
    padding: 0;
    box-shadow: none;
}
img {
    max-width: 100%;
    display: block;
}
figure {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    break-inside: avoid;
}
figure>img {
    grid-row: 1 / -1;
    grid-column: 1;
}
figure a {
    color: black;
    text-decoration: none;
}
/* blogza bg image wrapper */
.blogza-background-wrapper .squares, .blogza-background-wrapper .circles, .blogza-background-wrapper .triangles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.squares .square, .circles .circle, .triangles .triangle{
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0.1;
    animation: animate 8s linear infinite;
    bottom: -100px;
}
.circles .circle{
    border-radius: 100px !important;
}
.triangles .triangle{
    width: 0;
    height: 0; 
    border-bottom-width: 42px;
    border-bottom-style: solid;
    border-left-width: 25px;
    border-left-style: solid;
    border-right-width: 25px;
    border-right-style: solid;
    border-radius: 0 !important;
}
.squares .square:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles .circle:nth-child(1){
    left: 10%;
    width: 22px;
    height: 20px;
    animation-delay: 0s;
}
.triangles .triangle:nth-child(1){
    left: 45%;
    border-right-width: 10px;
    border-left-width: 10px;
    border-bottom-width: 22px;
    animation-delay: 0s;
}
.squares .square:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles .circle:nth-child(2){
    left: 45%;
    width: 84px;
    height: 80px;
    animation-delay: 12s;
}
.triangles .triangle:nth-child(2){
    left: 25%;
    border-right-width: 15px;
    border-left-width: 15px;
    border-bottom-width: 28px;
    animation-delay: 12s;
}
.squares .square:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles .circle:nth-child(3){
    left: 90%;
    width: 53px;
    height: 50px;
    animation-delay: 4s;
}
.triangles .triangle:nth-child(3){
    left: 80%;
    border-right-width: 15px;
    border-left-width: 15px;
    border-bottom-width: 28px;
    animation-delay: 4s;
}
.squares .square:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles .circle:nth-child(4){
    left: 60%;
    width: 53px;
    height: 50px;
    animation-delay: 18s;
}
.triangles .triangle:nth-child(4){
    left: 30%;
    border-right-width: 20px;
    border-left-width: 20px;
    border-bottom-width: 38px;
    animation-delay: 18s;
}
.squares .square:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles .circle:nth-child(5){
    left: 90%;
    width: 43px;
    height: 40px;
    animation-delay: 1s;
}
.triangles .triangle:nth-child(5){
    left: 70%;
    border-right-width: 25px;
    border-left-width: 25px;
    border-bottom-width: 42px;
    animation-delay: 1s;
}
.squares .square:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.squares .square:nth-child(7){
    left: 35%;
    width: 100px;
    height: 100px;
    animation-delay: 7s;
}
.squares .square:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.squares .square:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.squares .square:nth-child(10){
    left: 85%;
    width: 100px;
    height: 100px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}
@media (max-width: 991.98px) {
    .bs-masonry-columns.c3 { 
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 991px){
    .bs-headthree .navbar-brand .custom-logo {
        width: 200px;
        height: auto;
    }
    .bs-headthree.six .navbar-wp .navbar-nav > li> a{
        padding: 13px 8px;
    }
    .navbar-nav{
        gap: 0;
        padding: 0;
    }
}
@media screen and (max-width: 767px){
    .bs-latest-heading span{
        display:none;
    }
    .bs-headthree .navbar-brand .custom-logo {
        width: 120px;
        height: auto;
    }
    .bs-masonry-columns.c3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .bs-masonry-columns.c2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .bs-blog-post .bs-blog-meta {
        justify-content: start;
    }
}

/* [fix] ハンバーガー3本線の太さが揃わない問題
   親テーマ(blogus)の jquery.smartmenus.bootstrap.css では
   .icon-bar が height:2px / margin-top:4px → 間隔 6px。
   Windowsの拡大率125%(DPR1.25)では 0 / 7.5 / 15 デバイスpx に乗り、
   各本のサブピクセル位置がずれて太さが違って見える。
   間隔を 8px(4の倍数)にし、DPR1.25/1.5/1.75 でも全本同じ描画になるようにする。
   また 2本目にだけ transform が無くレイヤ化条件が違ったため、3本とも揃える。 */
.navbar-toggler.x .icon-bar{
	width: 22px;
	height: 2px;
	border-radius: 0;
	transform: rotate(0);
	backface-visibility: hidden;
}
.navbar-toggler.x .icon-bar + .icon-bar{
	margin-top: 6px;
}

/* [fix] メニューバー上の線を消す
   .bs-headthree.six .navbar-wp に border:1px solid、
   css/colors/default.css で border-color:#ddd transparent が当たり、
   上下に #ddd の線が出ている。上側だけ消す。
   下側の線も消す場合は border-bottom: 0; を追加。 */
.bs-headthree.six .navbar-wp{
	border-top: 0;
}

/* [fix] タブレット/スマホの右上トグル(#switch-m)の位置調整。
   検索アイコンの代わりに .switch を置いたため、中央揃えだけ当てる。 */
@media (max-width: 991.98px){
	.m-header .right-nav{
		align-items: center;
	}
	.m-header .right-nav .switch{
		margin: 0;
	}
}

/* [fix] 992px未満でスクロール時にハンバーガーボタンだけ追従させる。
   ロゴ・切替アイコン・バー本体は通常通りスクロールする。
   開いたメニュー(.navbar-collapse.show)は本来ページ上部の位置に出るため、
   ボタンだけ固定すると画面外に出る。そのためメニューもボタン直下に固定する。 */
@media (max-width: 991.98px){
	/* ハンバーガーを fixed にしたことで flow から抜けているため、
	   左にダミーの伸縮項(::before)を置き、右の .right-nav と同じ flex 比率にする。
	   これで右のアイコンが何個でもロゴが常に中央に来る。
	   (固定値の padding-left だと右の個数が変わった時点でずれる) */
	.m-header{
		padding-left: 0;
	}
	.m-header::before{
		content: "";
		flex: 1 1 0;
	}
	.m-header .navbar-header{
		flex: 0 0 auto;
		margin: 0;
	}
	.m-header .right-nav{
		flex: 1 1 0;
		justify-content: flex-end;
	}
	.navbar-toggler.x{
		position: fixed !important;
		top: 8px !important;
		left: 8px !important;
		z-index: 1031 !important;
		width: 44px;
		height: 44px;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		box-shadow: none;
		border: 0;
	}
	.navbar-collapse.collapse.show{
		position: fixed !important;
		top: 60px;
		left: 8px;
		right: 8px;
		z-index: 1030;
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		padding: 0 15px;
		border: 1px solid var(--border-color);
		border-radius: 4px;
		background-color: var(--bg-color);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}
	/* ログイン中は管理バー（46px）の分だけ下げる */
	body.admin-bar .navbar-toggler.x{
		top: 54px !important;
	}
	body.admin-bar .navbar-collapse.collapse.show{
		top: 106px;
		max-height: calc(100vh - 116px);
	}
}
@media (min-width: 783px) and (max-width: 991.98px){
	/* 783px以上は管理バーが32px */
	body.admin-bar .navbar-toggler.x{
		top: 40px !important;
	}
	body.admin-bar .navbar-collapse.collapse.show{
		top: 92px;
		max-height: calc(100vh - 102px);
	}
}

/* [fix] ライトモードのアイコンを差し替える。
   親テーマは Font Awesome の \f185 グリフを使っているが、
   指定のデザイン（塗りつぶしの丸＋8本の直線光線）にSVGマスクで置き換え。
   色は background-color: currentColor なので var(--head-color) のまま追従する。 */
.switch .dark + .slider::before,
.switch .dark+.slider::before{
	content: "";
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='5.2'%20fill='black'/%3E%3Cg%20stroke='black'%20stroke-width='2.4'%3E%3Cline%20x1='12'%20y1='1.2'%20x2='12'%20y2='4.6'/%3E%3Cline%20x1='12'%20y1='19.4'%20x2='12'%20y2='22.8'/%3E%3Cline%20x1='1.2'%20y1='12'%20x2='4.6'%20y2='12'/%3E%3Cline%20x1='19.4'%20y1='12'%20x2='22.8'%20y2='12'/%3E%3Cline%20x1='4.4'%20y1='4.4'%20x2='6.8'%20y2='6.8'/%3E%3Cline%20x1='17.2'%20y1='17.2'%20x2='19.6'%20y2='19.6'/%3E%3Cline%20x1='4.4'%20y1='19.6'%20x2='6.8'%20y2='17.2'/%3E%3Cline%20x1='17.2'%20y1='6.8'%20x2='19.6'%20y2='4.4'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='5.2'%20fill='black'/%3E%3Cg%20stroke='black'%20stroke-width='2.4'%3E%3Cline%20x1='12'%20y1='1.2'%20x2='12'%20y2='4.6'/%3E%3Cline%20x1='12'%20y1='19.4'%20x2='12'%20y2='22.8'/%3E%3Cline%20x1='1.2'%20y1='12'%20x2='4.6'%20y2='12'/%3E%3Cline%20x1='19.4'%20y1='12'%20x2='22.8'%20y2='12'/%3E%3Cline%20x1='4.4'%20y1='4.4'%20x2='6.8'%20y2='6.8'/%3E%3Cline%20x1='17.2'%20y1='17.2'%20x2='19.6'%20y2='19.6'/%3E%3Cline%20x1='4.4'%20y1='19.6'%20x2='6.8'%20y2='17.2'/%3E%3Cline%20x1='17.2'%20y1='6.8'%20x2='19.6'%20y2='4.4'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 22px 22px;
	mask-size: 22px 22px;
}

/* [fix] メニュー項目の国旗（functions.php がインラインSVGを出力）。
   白地の旗（日本）が背景に埋もれないように薄い枠を付ける。 */
/* 旗は 21:14 の比率。高さを明示し、vertical-align:middle で
   テキストの中央に合わせる（line-height の影響を受けない）。 */
.menu-flag{
	display: inline-block;
	width: 1.15em;
	height: 0.767em;
	margin-right: 0.45em;
	vertical-align: middle;
	position: relative;
	top: -0.15em;	/* 上下位置の微調整。マイナスを大きくするほど上に上がる。 */
	line-height: 0;
}
.menu-flag svg{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.35);
}

/* [fix] 文字サイズ切替（ベルアイコンの代替）。
   本文は body の 16px を継承しているので、記事本体(article.single)に対して
   S=18px / M=20px / L=22px を2px刻みで切り替える。初期値は M。
   見出しなど px 指定のある要素は変わらない。 */
body.fs-s article.single,
body.fs-s .bs-blog-post .bs-content{
	font-size: 18px;
}
body.fs-m article.single,
body.fs-m .bs-blog-post .bs-content{
	font-size: 20px;
}
body.fs-l article.single,
body.fs-l .bs-blog-post .bs-content{
	font-size: 22px;
}

/* 文字サイズ切替ボタン。他の右上アイコン(.right-nav a: 45x45)と揃え、
   背景・枠は出さない。アイコン自体も S/M/L で2pxずつ変化する。 */
/* 文字サイズ切替ボタン。
   css/colors/default.css の汎用指定 button{background-color:var(--accent);color:var(--accent-text)}
   が当たって黄色の地になるため、ここで完全に打ち消す。
   通常時は背景なし・文字色は他のアイコンと同じ var(--head-color)。 */
button.blogza-fontsize,
.blogza-fontsize{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 0 !important;
	margin: 0;
	color: var(--head-color) !important;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	cursor: pointer;
	line-height: 1;
	vertical-align: middle;
}
button.blogza-fontsize:hover,
button.blogza-fontsize:focus,
button.blogza-fontsize:active{
	color: var(--hover-accent) !important;	/* 他のホバー色と揃える */
	background: none !important;
	background-color: transparent !important;
	border-color: transparent !important;
}
button.blogza-fontsize:focus-visible{
	outline: 2px solid var(--head-color);
	outline-offset: 2px;
}
.blogza-fontsize__icon{
	color: inherit !important;
	display: inline-flex;
	align-items: baseline;
	font-family: 'Times New Roman', serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
}
.blogza-fontsize__icon-small{
	font-size: 0.65em;
}
body.fs-s .blogza-fontsize__icon{
	font-size: 18px;
}
body.fs-m .blogza-fontsize__icon{
	font-size: 20px;
}
body.fs-l .blogza-fontsize__icon{
	font-size: 22px;
}

/* [fix] PCのみカテゴリメニューの文字サイズを 18px にする。 */
@media (min-width: 992px){
	.bs-headthree.six .navbar-wp .navbar-nav > li > a{
		font-size: 18px;
	}
}

/* [fix] スマホの開いたメニュー。
   外枠・角丸・余分な余白を消し、区切りは項目間の横線のみにする。
   親テーマの border-bottom (jquery.smartmenus.bootstrap.css:138) を活かし、
   最後の1本と子テーマの row-gap を消す。 */
@media (max-width: 991.98px){
	.navbar-collapse.collapse.show{
		padding: 0;
		border: 0;
		border-radius: 0;
	}
	.navbar-wp .navbar-nav{
		row-gap: 0;
		column-gap: 0;
		padding: 0;
	}
	.bs-headthree.six .navbar-wp .navbar-nav > li > a,
	.navbar-wp .navbar-nav > li > a.nav-link{
		padding: 13px 12px;
		border-bottom: 1px solid var(--border-color);
	}
	.navbar-wp .navbar-nav > li:last-child > a{
		border-bottom: 0;
	}
}

/* [fix] ハンバーガーを開いたときの×。
   親テーマの変形は transform-origin:10% 10% 前提で、線間隔を 8px に変えたことで
   2本が交差しなくなるため、中心基準の平行移動＋回転で描き直す。 */
@media (max-width: 991.98px){
	.navbar-toggler.x[aria-expanded="true"] .icon-bar:nth-of-type(1){
		transform: translateY(8px) rotate(45deg);
		transform-origin: center center;
	}
	.navbar-toggler.x[aria-expanded="true"] .icon-bar:nth-of-type(3){
		transform: translateY(-8px) rotate(-45deg);
		transform-origin: center center;
	}
}

/* [fix] ロゴ周りの影を消す。
   親テーマの .navbar-brand に text-shadow: 2px 2px 1px rgba(150,150,183,.18) が入っており、
   サイトタイトル文字や一部ブラウザで影として見える。他の影系もまとめて打ち消す。 */
.navbar-brand,
.navbar-header,
.site-logo,
.site-logo a,
.site-logo img,
.navbar-brand img,
.site-title,
.site-title a{
	text-shadow: none;
	box-shadow: none;
	filter: none;
}

/* [fix] アプリ誘導バナー（画面下部固定）。
   表示制御は functions.php のJS側（iOS/Android のみ、閉じると7日非表示）。 */
.blogza-appbar{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: var(--bg-color);
	border-top: 1px solid var(--border-color);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}
.blogza-appbar[hidden]{
	display: none;
}
.blogza-appbar__icon{
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
}
.blogza-appbar__text{
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.blogza-appbar__title{
	color: var(--head-color);
	font-size: 14px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.blogza-appbar__sub{
	color: var(--text-color);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.blogza-appbar__btn{
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: 100px;
	background: var(--accent);
	color: var(--accent-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
button.blogza-appbar__close{
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0 !important;
	color: var(--head-color) !important;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
@media (min-width: 992px){
	.blogza-appbar{
		display: none;
	}
}

/* [fix] アプリバナー表示中はトップへ戻るボタンをバナーの上に逃がす。 */
body.has-appbar .bs_upscr{
	bottom: calc(76px + env(safe-area-inset-bottom));
}

/* [fix] GET ボタンとトップへ戻るボタンは背景がロゴの明るい黄色、文字は黒。 */
/* 参照画像の「入手」ボタンの実測値に合わせる。
   色 #3771e0、実寸 97x49を375pt換算して約 66x33px。 */
a.blogza-appbar__btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 66px;
	height: 33px;
	padding: 0 14px;
	line-height: 1;
	background: #3771e0;
	color: #fff;
}
/* ホバー・フォーカスでも一切変化させない。
   親テーマ側で :hover/:focus に border-width と transition が入っており、
   それが輪郭の変化として見えるため、枠ごと消す。 */
body a.bs_upscr,
body a.bs_upscr:hover,
body a.bs_upscr:focus,
body a.bs_upscr:active,
body a.bs_upscr:focus-visible,
body a.bs_upscr i,
body a.bs_upscr:hover i,
body a.bs_upscr:focus i{
	/* 色はテーマ本来のアクセントに戻す。
	   ライト: #79784e の地に白文字 / ダーク: #ffff66 の地に黒文字。
	   固定しているのは「ホバーで変化させない」ことだけ。 */
	background: var(--accent) !important;
	color: var(--accent-text) !important;
	border: 0 !important;
	outline: none !important;
	opacity: 1 !important;
	transition: filter .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
/* ホバー時は少し縮めて内側に影を入れ、押し込んだように見せる。
   色相は変えない（明るさをわずかに落とすだけ）。 */
body a.bs_upscr:hover,
body a.bs_upscr:focus{
	filter: brightness(0.92);
	transform: scale(0.94);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
}
body a.bs_upscr:active{
	filter: brightness(0.88);
	transform: scale(0.9);
	box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45);
}
/* × は主役ではないので薄い灰色。 */
button.blogza-appbar__close{
	color: #b3b3b3 !important;
}

/* [fix] バナー表示中の下余白は body ではなくフッターに持たせる。
   body に padding を付けると別色の帯が出るが、フッターを伸ばせれば
   フッターの背景色のままバナーの下に潜り込む。 */
body.has-appbar footer{
	padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* [fix] ライトモードではヘッダー下の線を出さない。
   ダーク時は body.dark なので :not(.dark) でライトのみに限定する。 */
body:not(.dark) .bs-headthree.six .navbar-wp{
	border-bottom: 0;
}

/* [fix] スマホではヘッダー下の余白をなくす。
   内訳は .bs-headthree.six の margin-bottom:50px と
   .bs-headthree.six .navbar-wp の margin-bottom:30px。 */
@media (max-width: 991.98px){
	.bs-headthree.six{
		margin-bottom: 0;
	}
	.bs-headthree.six .navbar-wp{
		margin-bottom: 0;
	}
}