@charset "utf-8";

/* 記事ページ・固定ページ・アーカイブページ・ブログトップ専用のレイアウト調整
   functions.php の lion_do_enqueue_single_layout() で、記事（is_single）、
   アーカイブ（is_archive。カテゴリー・タグ・日付別など）、
   固定ページ（is_page）、ブログトップ（is_front_page / is_home）のときだけ読み込む。

   幅1300px以下では、スマホ・タブレット用（959px以下）と同じく
   ・右カラム（#sidebar）を表示しない
   ・ハンバーガーメニューのヘッダー（.sp-p）に切り替える
   ・本文を1カラムで表示する
   style.css より後に読み込まれるため、同じ詳細度の指定で上書きできる。
---------------------------------------------------------- */
@media only screen and (max-width: 1300px) {

	/* PC用ヘッダー・メニューを隠し、ハンバーガーメニューのヘッダーを出す */
	.pc-p {
		display: none;
	}
	.sp-p {
		display: block;
	}

	/* ハンバーガーメニューのヘッダーは position:fixed のため、その分ページを下げる。
	   style.css は1025px以上で 0 に戻しているので、1300px以下では 70px を指定し直す
	   （下げないとパンくずがヘッダーに隠れる）。 */
	.b-m {
		margin-top: 70px;
	}

	/* 1カラム表示（style.css の 959px以下の指定と同じ） */
	#header {
		width: 100%;
	}
	.inner,
	#footer .boxWrap,
	#wrapper {
		width: 96%;
	}
	#content {
		clear: both;
		width: 95%;
		float: none;
		margin: 0 auto;
		padding: 10px 0;
	}

	/* 右カラムは表示しない */
	#sidebar {
		display: none;
	}
}

/* ブログトップの記事一覧（#toppage ul.post）
   画像タグの height 属性がそのまま効き、幅だけ縮んで縦に極端に伸びる画像があるため、
   幅に合わせて高さも縮める（全幅共通）。
---------------------------------------------------------- */
#toppage ul.post .post-img img {
	height: auto;
}

/* 1300px以下は、記事一覧をグリッドで並べ直す。
   style.css の959px以下の汎用指定（ul.post li の左右1%の余白）が加わると
   4列が収まらず3列と2列が混在するため、余白・幅・float を打ち消して
   4列（1300px以下）→ 2列（959px以下）→ 1列（640px以下）に切り替える。
   ul の ::after（clearfix）もグリッドの1マスを占有するため消す。
---------------------------------------------------------- */
@media only screen and (max-width: 1300px) {
	#toppage ul.post {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 30px 16px;
		/* 1301px以上ではカード上部の余白（20px）が見出しとの間隔になっている。
		   下でカードの余白を打ち消すため、同じ間隔を一覧の上に空け直す */
		padding-top: 20px;
	}
	#toppage ul.post::after {
		content: none;
	}
	#toppage ul.post li,
	#toppage ul.post li:nth-child(4n) {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
	}
}

@media only screen and (max-width: 959px) {
	#toppage ul.post {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 640px) {
	#toppage ul.post {
		grid-template-columns: minmax(0, 1fr);
	}
}