@charset "UTF-8";
/*
*   レスポンシブ化済みのページ用の共通スタイル（ヘッダー・フッター・パンくず等）
*   head.php が common/responsive.php の対象ページだけ読み込み、body に class="responsive" を付ける
*   後から非同期で読み込まれる他のCSSに負けないよう、すべて .responsive を付けて書く
*   ページごとのスマホ表示は、各ページのCSSに @media (max-width: 767px) { .responsive ... } で書く
*/

/* 幅が1000pxより狭い画面でもはみ出さないようにする */
.responsive .main {width: auto;max-width: 1000px;}
.responsive img {max-width: 100%;height: auto;}
.responsive #topttl {display: none;}

@media (max-width: 1032px) {
	.responsive .main {margin: 0 16px;}
	.responsive header .main {margin: 0 auto;}
}

/* スマホ */
@media (max-width: 767px) {
	/* 横はみ出し防止。#wrapper に hidden を使うとスクロール領域になり右にスクロールバー分の余白ができるので clip にする */
	.responsive {overflow-x: hidden;}
	.responsive #wrapper {overflow-x: clip;}
	.responsive .main {margin: 0;}

	/* ヘッダー：キャッチコピーとロゴを縦に並べて中央寄せ（旧スマホ版と同じ並び）。ロゴは75%に縮めて高さを抑える */
	.responsive header .main {display: flex;flex-direction: column;align-items: center;}
	.responsive header h1 {order: 2;}
	.responsive header h1 a {float: none;margin: 0 auto;width: 173px;padding: 49px 0 0 0;background-size: contain;}
	.responsive header p {order: 1;float: none;padding: 6px 0 0;line-height: 1.4;text-align: center;}
	.responsive #day_count {display: none;}
	.responsive header .main {padding-bottom: 6px;}
	/* 本日の台数はヘッダーの下の黒背景に文字で出す（旧スマホ版と同じ） */
	.responsive #topttl {display: block;margin: 0;padding: 12px 8px;color: #fff;font-size: 14px;text-align: center;}
	.responsive #topttl span {padding: 0 2px;font-size: 18px;}

	/* ページ名の上の「俺の」ロゴ（黒背景）は、ヘッダーのロゴと重なるのでスマホでは出さない。ページ名の文字は残す */
	.responsive #oreno {display: none;}
	.responsive #txt,
	.responsive #bus_txt {padding-top: 16px;}
	/* パンくずがあるページでは、パンくずの下の大きなページ見出しは内容が重なるのでスマホでは出さない（パンくずの無いページでは見出しを残す） */
	.responsive #pankuzu ~ #search_ttl {display: none;}

	/* パンくず */
	.responsive #pankuzu {margin: 12px 0 0;padding: 0 8px;font-size: 11px;}
	.responsive #pankuzu li {padding-right: 8px;line-height: 1.8;}

	/* フッター：縦に並べて中央寄せ */
	.responsive footer {padding: 16px 8px;}
	.responsive footer h2 {float: none;margin: 0 auto;}
	.responsive footer p {float: none;padding: 8px 0;text-align: center;}
	.responsive footer > div {float: none;width: auto;}
	.responsive footer ul {float: none;width: auto;margin: 16px 0 0;}
	.responsive footer ul li {float: none;width: auto;padding: 4px 0;}
	.responsive footer ul li span {float: none;display: inline;width: auto;}
	.responsive address.footmenu {padding: 24px 0 10px;line-height: 2.2;}
	.responsive address.footmenu a {display: inline-block;padding: 0 4px;}

	/* 言語切り替え：右上の隅にアイコンだけ出す（ロゴに重ならないよう文字は隠す） */
	.responsive #usermenu {position: absolute;top: 6px;right: 6px;bottom: auto;left: auto;}
	.responsive #usermenu details summary {padding: 4px;font-size: 0;background: #be4d4d;border-radius: 5px;}
	.responsive #usermenu details summary i {font-size: 22px;color: #fff;}
	.responsive #usermenu details li {font-size: 13px;}
}