@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================================
   スマホのヘッダーロゴ
   SWELLの標準では .l-header__logo が flex:0 1 auto のため、
   横長ロゴ（約4.7:1）が幅123pxまで詰められ、高さ22pxまで縮んで読めなくなる。
   ハンバーガーと検索ボタン（各42px）以外の幅を使えるようにして、
   高さ基準で表示させる。
   ============================================================ */
@media (max-width: 959px) {
	.l-header__logo {
		flex: 1 1 auto;
		min-width: 0;
	}
	/* 高さは % ではなく px で決める。
	   SWELL は .c-headLogo に高さ、リンクと画像に height:100% を与えているが、
	   その連鎖だと画像が親の実高より小さく解決されてしまう。 */
	.c-headLogo { height: auto; }
	.c-headLogo .c-headLogo__link { height: auto; display: inline-flex; align-items: center; }
	.c-headLogo .c-headLogo__img {
		height: 38px; width: auto;
		max-width: 100%; max-height: none;
		object-fit: contain;
	}
}


/* ============================================================
   スマホのドロワーメニュー
   SWELLの .p-spMenu__inner は背景が透明で、項目と項目のすき間から
   後ろのページが透けて読みづらい。地色で塞ぐ。
   ============================================================ */
.p-spMenu__inner {
	background: #FFF9F1;
}


/* ============================================================
   お知らせバー（屋号変更のおしらせ）
   SWELL標準の「お知らせバー」をヘッダー下部に出したときの調整。
   帯そのものの色・文言・リンクはカスタマイザー側で持たせている。
   おしらせが不要になったら、このブロックごと消してよい。
   ============================================================ */

/* SWELLはボタンの文字色を #fff で固定している（modules/parts/info-bar.css）。
   オレンジの帯に白いボタンを置くので、文字は帯の色に戻す。 */
.c-infoBar .c-infoBar__btn { color: #A94F08 !important; }

/* 本文リンク（functions.php の swell_infobar_data で包んでいる）。
   帯の中で色を変えると読みづらいので、ふだんは地の文と同じ見た目にして、
   カーソルを載せたときだけ下線を出す。 */
.c-infoBar .mk-infoBar__msg { color: inherit; text-decoration: none; }
.c-infoBar .mk-infoBar__msg:hover { text-decoration: underline; text-underline-offset: .22em; }

@media (max-width: 600px) {
	/* この幅では本文が2行になり、ボタンが3行目に落ちてKVを押し下げる。
	   スマホではボタンを出さず、文末の「›」だけで続きがあることを示す。
	   矢印は本文リンクの中に置くので、そのままタップ範囲に入る。 */
	.c-infoBar .c-infoBar__btn { display: none; }
	.c-infoBar .mk-infoBar__msg::after { content: "\203A"; margin-left: .35em; }

	/* SWELLの .c-infoBar__text は左右パディングを持たないため、
	   2行に折り返すと1行目が画面端まで届いてしまう。 */
	.c-infoBar .c-infoBar__text { padding-left: 14px; padding-right: 14px; }

	/* SWELLの既定は 3.4vw（375px端末で約12.8px）。少し落とす。
	   なお、この文言を1行に収めるには9.5pxまで下げる必要があり、
	   読ませる相手を考えるとそこまでは下げられない。2行のままにしている。 */
	.c-infoBar .c-infoBar__text { font-size: 12px; }

	/* 2行になるなら、切れ目は「…日野店」は / 『むすこの手』に… で分けたい。
	   放っておくと1行目が目一杯まで伸びて、2行目に数文字だけ残る。
	   balance が効かないブラウザでは従来どおりの折り返しになるだけ。 */
	.c-infoBar .mk-infoBar__msg { text-wrap: balance; }
}