@charset "utf-8";

/* index_e.html（英語ページ）のレスポンシブ対応
   ブログ（WordPress テーマ）のスマートフォン表示に合わせる
-------------------------------------------- */

@media screen and (max-width: 768px) {

	html, body {
		overflow-x: hidden;
		-webkit-text-size-adjust: 100%;
	}

	img, iframe, video, embed, object {
		max-width: 100%;
	}

	img {
		height: auto;
	}

	/* 全体の幅を画面に合わせる */
	div#head,
	div#wrap {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	div#wrap {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* ヘッダー：絶対配置をやめて、上から順に並べる */
	div#head {
		height: auto !important;
		padding: 10px 10px 0;
	}

	div#head h1,
	div#head p,
	p.head-logo,
	p.head-contact {
		position: static !important;
		margin: 0 0 10px !important;
		text-align: left;
	}

	div#head h1 {
		font-size: 11px;
		line-height: 1.4;
	}

	p.head-contact img {
		width: auto;
		max-width: 100%;
		height: auto !important;
	}

	/* グローバルナビ：ボタン画像を同じ縮尺（高さ）にそろえて、折り返して並べる
	   （1行に3個ずつ並ぶ大きさ。3個の幅の合計は約578px） */
	ul#g_nav {
		position: static !important;
		display: flex;
		flex-wrap: wrap;
		width: auto !important;
		left: auto !important;
		margin: 0 !important;
		padding: 0;
		box-sizing: border-box;
	}

	ul#g_nav li {
		float: none !important;
		height: auto !important;
		flex: 0 0 auto;
		margin: 0 !important;
		padding: 2px;
		list-style: none;
	}

	ul#g_nav li:empty {
		display: none;
	}

	ul#g_nav li a {
		display: block;
	}

	ul#g_nav li img {
		display: block;
		width: auto !important;
		max-width: none !important;
		height: 44px !important;
		height: min(44px, calc((100vw - 36px) / 578 * 44)) !important;
		margin: 0;
	}

	/* 見出し */
	.section h2 {
		font-size: 22px;
	}

	.section h3 {
		font-size: 16px;
	}

	/* スタッフ紹介：写真を先に、プロフィールを下に縦に並べる */
	div.section div.staff {
		display: flex;
		flex-direction: column;
		margin-left: 0;
	}

	div.section div.staff .fr {
		order: -1;
		float: none !important;
		margin: 0 0 15px;
		text-align: center;
	}

	div.section div.staff .fl {
		width: auto !important;
		float: none !important;
	}

	div.section div.staff .fr img {
		display: block;
		margin: 0 auto;
	}

	div.section div.staff dl.prf dt,
	div.section div.staff dl.prf dd {
		float: none !important;
		width: auto !important;
		clear: none !important;
	}

	div.section div.staff dl.prf dt {
		margin-bottom: 0;
		font-weight: bold;
	}

	/* CONTACT US：住所と地図を縦に並べ、地図を横幅に合わせる */
	div.section .fl,
	div.section .fr {
		float: none !important;
	}

	div.section p.fr img {
		display: block;
		width: 100%;
		max-width: 480px;
		height: auto;
	}

	/* フッター */
	div#foot p#copyright {
		padding: 0 10px;
	}
}