@charset "UTF-8";

/*
スマートフォン・タブレット向けの上書きスタイル（新規追加）

- style.css → layouts.css の「あと」に読み込まれる（functions.php で登録）。
- 元の 900px 固定レイアウトを、画面幅が 920px 以下のときだけ可変幅に切り替える。
- 背景・ロゴ・ナビなどの画像素材を見ずに作成したため、実機での見た目確認と微調整が必要。
- 元に戻したいとき: このファイルを削除し、header.php の viewport の meta 行も削除する。
  （viewport だけ残して responsive.css を削除すると、スマホで横スクロールになる）
*/

@media (max-width: 920px) {

	body {
		margin: 0;
		background-attachment: scroll; /* スマホでは fixed が不安定 */
	}

	header,
	div#content,
	footer {
		width: auto;
		max-width: 900px;
	}

	/* ---- ヘッダー ---- */

	/* PC用の飾り背景（900px幅）は、スマホでは切れて合わないので外す */
	header {
		background-image: none;
	}

	/* ロゴ: 中央に配置 */
	header p.siteName,
	header h1.siteName {
		margin: 16px 15px 6px;
	}

	header p.siteName a,
	header h1.siteName a {
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
	}

	/* 説明文: PCでは左上に固定配置だが、スマホではロゴの下に通常配置して重なりを防ぐ */
	header p.description {
		position: static;
		margin: 0 15px 14px;
		font-size: 85%;
		line-height: 1.5;
		text-align: center;
	}

	/* グローバルナビ: ボタン画像をやめて、文字のボタン（3列×2行）にする
	   列幅は % 指定（33.3333%）で、box-sizing により枠線・余白を含めて計算するので、
	   画面幅を超えてはみ出さない。 */
	ul#globalNavi,
	body.mainIndex ul#globalNavi {
		display: block;
		width: auto;
		max-width: 100%;
		margin: 0;
		padding: 0;
		background-color: #4a3a32;
		background-image: none;
	}

	ul#globalNavi li {
		display: block;
		float: left;
		box-sizing: border-box;
		width: 33.3333%;
		min-width: 0;
		height: 56px;             /* ボタンの高さ（下の枠線1pxを含む） */
		margin: 0;
		padding: 0;
		overflow: hidden;
		border-right: 1px solid #4a3a32;
		border-bottom: 1px solid #4a3a32;
	}

	ul#globalNavi li a {
		display: block !important;
		box-sizing: border-box;
		width: 100%;
		height: 55px !important;      /* li の高さ 56px から下の枠線 1px を引いた値 */
		padding: 0 2px !important;
		color: #e8dfc8;
		background-color: #2a1d18;
		font-size: 16px;
		font-weight: bold;
		line-height: 55px !important; /* 高さと同じ値にすると縦中央。文字を下げたいときは大きく（例 59px）、上げたいときは小さく */
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
	}

	ul#globalNavi li a:hover,
	ul#globalNavi li a:focus,
	ul#globalNavi li a:active {
		color: #fff;
		background-color: #5a4034;
	}

	/* 表示中のページ */
	ul#globalNavi li a[aria-current="page"] {
		color: #fff;
		background-color: #6b4c3a;
	}

	ul#globalNavi .gnavi-img {
		display: none;
	}

	ul#globalNavi .gnavi-text {
		display: inline;
	}

	/* トップのスライドショー（画像は 840x280） */
	#slideshow {
		height: auto;
		aspect-ratio: 840 / 280;
		margin-bottom: 8px;
		background-image: none;
	}

	#slideshow img {
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	/* ---- 本文エリア ---- */

	div#content {
		background-image: none;
		background-color: #231815;
	}

	body.double div#main {
		width: auto;
		float: none;
	}

	body.double div#utilities {
		width: auto;
		float: none;
		clear: both;
		min-height: 0;
	}

	h1 {
		margin-right: 15px;
		margin-left: 15px;
		padding-right: 10px;
	}

	div.entry {
		margin-right: 15px;
		margin-left: 15px;
	}

	div.textBody {
		overflow-wrap: break-word;
	}

	pre {
		width: auto;
	}

	p.topicPath {
		margin-right: 15px;
		margin-left: 15px;
	}

	ul.topicPath {
		margin-right: 15px;
		margin-left: 15px;
	}

	.wp-pagenavi,
	.navigation.pagination {
		margin: 15px;
	}

	div#likebox_conteiner {
		margin-right: 15px;
		margin-left: 15px;
	}

	div#main div.youtube {
		margin-left: 15px;
	}

	/* ---- サイドバー ---- */

	div#utilities p.qr {
		display: none; /* スマホで見ている人に QR コードは不要 */
	}

	div#utilities ul.side-menu {
		margin: 15px;
	}

	/* ---- フッター ---- */

	p.return a {
		margin-right: 15px;
		margin-left: auto;
	}

	footer p.siteName a {
		margin-right: 15px;
		margin-left: auto;
	}
}

/* とても狭い画面（〜380px）: 「お問い合わせ」が1行に収まるよう、文字を少し小さくする */
@media (max-width: 380px) {
	ul#globalNavi li a {
		padding-right: 0;
		padding-left: 0;
		font-size: 14px;
	}
}