@charset "UTF-8";
/* PC用・スマホ用の画像（や文章）を出し分ける
 *
 * 元のGeeklogサイトは、同じ内容の画像を「横長のPC用」と「縦長のスマホ用」の
 * 2枚用意して、画面幅によって片方だけ表示していた。
 * 仕組みはBootstrap 3 というCSS部品の以下のクラス。
 *     hidden-xs  … スマホでは隠す（＝PC用）
 *     visible-xs … スマホだけ表示（＝スマホ用）
 * 切り替わる幅は 767px。現行サイトで実測して確認した（768px→PC用／767px→スマホ用）。
 *
 * 静的HTMLではBootstrapを読み込まないので、同じ動きをここで用意する。
 * 使い方：表示を切り替えたい要素に is-pc-only / is-sp-only を付ける。
 *     <figure class="wp-block-image size-full is-pc-only"> … PCだけ
 *     <figure class="wp-block-image size-full is-sp-only"> … スマホだけ
 *
 * ★SWELLにも似た pc_only / sp_only があるが、そちらの切り替えは960pxで、
 *   元サイトの767pxと違う。タブレット幅（768〜959px）で縦長のスマホ用画像が
 *   出てしまうため、あえて使わず元サイトの幅に合わせている。
 *
 * ※「隠す」側だけを指定している（表示する側に display を指定していない）のは、
 *   表示するときに figure 本来の並び方をそのまま活かすため。 */

/* PC・タブレット（768px以上）ではスマホ用を隠す */
@media (min-width: 768px) {
	.is-sp-only {
		display: none !important;
	}
}

/* スマホ（767px以下）ではPC用を隠す */
@media (max-width: 767px) {
	.is-pc-only {
		display: none !important;
	}
}