@charset "utf-8";

/* ~~ レスポンシブ対応（画面幅 1200px 以下のみ適用。それより広い表示は変更しない） ~~ */
@media (max-width: 1200px) {

	img,
	video,
	iframe,
	table {
		max-width: 100%;
	}
	img {
		height: auto;
	}

	/* 固定幅・大きな左マージンのブロックを、画面幅に合わせて積み重ねる */
	#head_wrap,
	#menu_wrap,
	#main,
	#footbar_in,
	#foottext,
	#footinfo,
	#footer,
	#header,
	#p_wrap,
	#toprogo,
	#p_txt,
	#linkbox,
	#s_linkbox,
	#liquid_wrap,
	.s_contents,
	p.txt01,
	#txt02,
	#img01,
	#img02,
	#flow,
	#hosyu,
	#pack_txt,
	#pack_txt02,
	.center_box,
	#txt03,
	.nanika_contents,
	.concept_ttl,
	#shisei,
	#logoni_wrap,
	.rinen_ttl,
	.rinen_wrap,
	#gaiyou,
	#map,
	#contact_wrap,
	#contact_txt,
	.contact_txt02,
	#form,
	#f_bottom,
	#go_top,
	#foottext,
	#foot_wrap,
	#sy_left,
	#sy_txt02,
	#sy_right,
	#rikai_txt,
	#ennoshita_txt,
	#zunou_txt,
	#logoni_left,
	#logoni_right {
		float: none;
		width: auto;
		min-width: 0;
		max-width: 100%;
		height: auto;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}

	/* 表は画面幅に収める */
	table {
		width: 100%;
	}
	#head_wrap,
	#menu_wrap,
	#main,
	#footbar_in,
	#foottext,
	#footinfo,
	#footer,
	#header {
		margin-left: auto;
		margin-right: auto;
	}

	/* グローバルメニュー: 幅に応じて折り返す */
	#gbm {
		float: none;
		width: 100%;
		max-width: 498px;
		height: auto;
		margin: 0 auto;
		overflow: visible;
	}
	#gbm ul {
		float: none;
		left: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#gbm ul li {
		float: none;
		left: 0;
		width: 83px;
		height: 80px;
		overflow: hidden; /* スプライト画像（上: 通常 / 下: ホバー）の片側だけを表示 */
	}

	/* 見出し・タイトル類は回り込ませず、縦に積む */
	#contact,
	.s_ttl {
		float: none;
		width: auto;
		max-width: 100%;
		clear: both;
	}
	#contact h2 img,
	.s_ttl img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* 制作実績の見出し画像: 画面幅に合わせて縮小 */
	#works,
	#works h2 {
		float: none;
		width: auto;
		max-width: 100%;
		margin-left: 0;
		overflow: hidden;
	}
	#works img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	/* 制作実績のカード: 画面幅に合わせて縮み、縦横比を保つ */
	#container {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	}
	.mosaic-block {
		width: calc(100% - 10px); /* 左右マージン 5px 分を差し引く */
		max-width: 320px;
		height: auto;
		aspect-ratio: 320 / 236;
		margin: 5px auto;
	}

	/* 座標指定（position:absolute）で並べた説明ブロックは、通常の流れに戻して縦に積む */
	#main div[style*="position:absolute"],
	#logoni_wrap {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		max-width: 100%;
		margin: 0 0 20px 0;
	}
	#logoni_wrap {
		float: none;
		margin: 0 auto;
	}

	/* フォーム部品は画面幅に収める（インラインの幅指定を上書き） */
	input,
	textarea,
	select {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}