@charset "UTF-8";
/*
Template: arkhe
Theme Name: Arkhe Child
Theme URI: https://arkhe-theme.com/ja/
Description: Arkhe用子テーマ
Version: 1.0.0
Text Domain: arkhe
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/

/**
 * サイトの見た目は、ここには書かない。
 *
 * **表・グラフ・カード・診断・口コミ・調査ページの図は、すべて
 * プラグイン「モージャマ コア」が出しているHTML。**
 * その見た目はプラグインの assets/css/mojama-front.css が持っている。
 * テーマ側に書き足すと、テーマを変えた時点で崩れる。
 *
 * ここに書いてよいのは「Arkhe の入れ物と、プラグインの中身がぶつかったとき」の
 * 調整だけ。**実際にぶつかったものだけを、理由を書いて足すこと。**
 * 先回りして当て推量の上書きを置くと、何が効いているのか分からなくなる。
 *
 * 見出し（H1）はテーマが出す。本文側の見出しはプラグインが決めている。
 */


/**
 * ヘッダーの帯は、スマホ・タブレットだけで使う。
 *
 * 口コミ件数の札の置き場所を、画面幅で入れ替えている（functions.php）。
 *
 *   1000px 以上  ロゴと同じ行の右端（.l-header__right）
 *   999px 以下   ロゴの上の帯（.l-header__bar）
 *
 * **Arkhe の既定とちょうど逆。**
 *   .l-headerUnder,.l-header__bar,.l-header__left,.l-header__right{display:none}
 * この1行が 999px 以下に入っているため、帯も .l-header__right も
 * スマホでは消える。つまり既定のままだと札はPCでしか出ない。
 * 実測したところ、375pxでも768pxでも帯の高さは0で、
 * HTMLには入っているのに誰にも見えていなかった。
 *
 * 帯をPCで消しているのは、**PCでは札がロゴの行に移るため。**
 * 消さないと、中身のない24pxの帯がロゴの上に残る。
 *
 * **注意：この指定があると、Arkheの「ヘッダーバーのキャッチフレーズ」が
 * PCで出なくなる。** 将来それを使うなら、下の min-width の指定を外すこと。
 *
 * **id を付けて詳細度を上げている。** 子テーマのCSSが親より先に読まれても
 * 勝つようにするため。クラス同士（0,1,0）では読み込み順に結果が左右される。
 *
 * 代償：スマホのヘッダーが 56px から 76px になる（375px幅で実測）。
 * ヘッダーは position:sticky なので本文に重なることはなく、下に押し出すだけ。
 */
@media (max-width: 999px) {
	#header.l-header .l-header__bar { display: block; }
}

@media (min-width: 1000px) {
	#header.l-header .l-header__bar { display: none; }
}


/**
 * 見出し欄とパンくずを、本文と同じ幅にそろえる。
 *
 * **本文だけ中央に寄っていると、左端が2本になる。**
 * 本文は .mjm-main が --mjm-measure（900px）で中央に置くが、
 * Arkhe の見出し欄とパンくずは本文欄いっぱい（1280px幅で1169px）に広がる。
 * そのままだと見出しが x=48、本文が x=182 から始まり、段がずれて見える。
 *
 * **見出しの置き場所は2種類ある。**
 * 固定ページとアーカイブは .p-topArea__body（本文欄の外）、
 * ブランド・地域・部位のような単一投稿は .l-main__body の中の
 * .p-entry__head。後者は著者欄・関連記事も同じ囲みの中にあるので、
 * .l-main__body ごとそろえると見出しから関連記事まで左端が1本になる。
 *
 * .l-container を持つものは左右の余白ぶんを足す。
 * 余白は .l-container の変数をそのまま使い、計算を二重に持たない。
 *
 * 画面が狭いときは width:100% が勝つので、この指定は効かない。
 * 画面幅での出し分けは要らない。
 *
 * **本文の幅を変えるときは、プラグイン側の --mjm-measure と一緒に直すこと。**
 */
.p-topArea__body,
.p-breadcrumb__list {
	max-width: calc( var( --mjm-measure, 900px ) + var( --ark-padding--container ) * 2 );
}

.l-main__body {
	max-width: var( --mjm-measure, 900px );
	margin-left: auto;
	margin-right: auto;
}


/**
 * ヘッダー右側に札とボタンが並ぶので、間を空ける。
 *
 * Arkhe の .l-header__right は display:flex だが gap を持っていない。
 * 口コミ数の札と投稿ボタンが隙間なくくっつく。
 */
#header.l-header .l-header__right { gap: 14px; }


/**
 * 「上へ戻る」を、画面下の固定帯の上へ逃がす。
 *
 * Arkhe は bottom:6% に置く（812pxの画面で約49px）。
 * 口コミ投稿の帯は58pxあるので、そのままだと帯の裏に入る。
 * 帯を出しているページ（body.mjm-has-cta）でだけ持ち上げる。
 *
 * **帯の高さはプラグインの --mjm-cta-h が正本。**
 * ここで別の数字を書くと、帯の高さを変えたときにずれる。
 */
body.mjm-has-cta .p-fixBtnWrap {
	bottom: calc( 6% + var( --mjm-cta-h, 58px ) );
}

/* ------------------------------------------------------ フッター
 *
 * 内部リンクの固まり（プラグインが出す .mjm-fnav）が濃紺なので、
 * その下のコピーライト帯も同じ色にして、境目が出ないようにする。
 * フッターの枠組みはテーマ側のHTMLなので、色はここで持つ。
 */
#footer.l-footer {
	background: var(--navy, #1B4F8F);
	color: rgba(255, 255, 255, .7);
}

#footer.l-footer .l-footer__foot {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

#footer.l-footer .c-copyright {
	color: rgba(255, 255, 255, .55);
	font-size: 11.5px;
}

#footer.l-footer .l-footer__nav a { color: rgba(255, 255, 255, .85); }

/* .mjm-fnav は自分で左右の余白を持つので、テーマの container は要らない */
#footer.l-footer .mjm-fnav { margin-inline: 0; }