@charset "UTF-8";
/* ============================================================
   sp.css  スマホ表示用の追加スタイル (2026/10/06 追加)

   用途  : 画面幅 800px 以下 (スマホ・縦向きタブレット) のときだけ、
           PC 向けの固定幅レイアウトを画面幅に合わせて縦 1 列にする。
           PC で見たときの表示は変えない (すべて @media の中に書く)。
   読込  : 各ページの </head> の直前で <link href="/common/sp.css"> する。
           既存の CSS より後に読み込んで上書きするため。
   対象  : ・表 (table) で組んだ 770px 幅のページ (会社概要・製品・採用など)
           ・div で組んだトップページ (common/css/common.css)
           ・音声合成 LSI のページ (voice_lsi)
   ============================================================ */

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

	/* ---------- 共通 ---------- */
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { background-image: none !important; }

	/* 画像・地図・埋め込みは画面からはみ出さないように縮める */
	img, input[type="image"], embed, object, video { max-width: 100%; height: auto; }
	iframe { max-width: 100%; }

	/* 区切り用の 1px の線画像は、縮めても線が消えないようにする */
	img[height="1"] { height: 1px !important; }

	/* ---------- 表で組んだページ ---------- */
	/* 横並びの表を縦 1 列に並べ直す。
	   「会社名｜株式会社…」のような 2 列の表も、見出しの下に内容が来る形になる */
	table { width: 100% !important; height: auto !important; }
	td, th { display: block; width: auto !important; height: auto !important; box-sizing: border-box; }

	/* 余白用の透明画像と、PC 用フッターの飾り画像は要らない */
	img[src$="spacer.gif"],
	img[src*="fo_im0"],
	img[src$="navi_under.gif"] { display: none !important; }
	td[background] { background-image: none !important; }

	/* 本文の文字を読みやすい大きさにする (元は 11〜12px) */
	body, td, .s3, .s3f, .s3x, .s3n, .s4, .s4x, .s4n {
		font-size: 15px !important;
		line-height: 1.7 !important;
	}
	.s2, .s2x, .s2n, .s1n { font-size: 13px !important; line-height: 1.6 !important; }
	a.special:link, a.special:visited, a.special:active, a.special:hover { font-size: 14px !important; }

	/* 本文の左右に少し余白をつける */
	td.s3, td.s3f, td.s4, td.s2x { padding: 2px 10px; }

	/* PC 用フッターのリンク (トップページ｜会社案内｜…) は横に流して折り返す */
	td[nowrap] { display: inline-block; padding: 4px 8px; white-space: nowrap; }
	img[src$="line1.gif"], img[src$="line2.gif"] { display: none !important; }
	/* 区切り線の画像だけが入ったセルが縦に積まれてリンクが横に並ばないので、セルごと消す */
	td:has(> img[src$="line1.gif"]), td:has(> img[src$="line2.gif"]) { display: none !important; }

	/* 右側のメニュー (画像ボタン) は本文の下に中央そろえで並べる */
	img[name^="navi_"] { display: block; margin: 0 auto; }

	/* 入力欄は画面幅に収める */
	/* (size="50" などの文字数指定のままだと画面からはみ出すので、幅いっぱいにする。
	    16px 未満だと iPhone が入力時に勝手に拡大するので 16px にする) */
	input[type="text"], textarea { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px; }

	/* ---------- 地図 (会社概要) ---------- */
	iframe.map-frame { width: 100% !important; height: 320px !important; display: block; }
	.map-link { display: block; margin: 8px 0; font-size: 15px; }

	/* ---------- トップページ (div で組んだページ) ---------- */
	#wrapper, #header, #bodyarea, #maincontents, #aside, #mainmenu {
		width: auto !important;
		float: none !important;
	}
	#header { height: auto; overflow: hidden; margin: 0 0 10px; background-size: cover; }
	#header #corporatesymbol { float: left; width: auto; margin: 10px; }
	#headnavi { width: auto; margin: 14px 10px 0 0; }
	div#blockskip a { min-width: 0; }
	#bodyarea { padding: 0 8px 120px; box-sizing: border-box; }
	#aside { margin-bottom: 10px; }
	#mainmenu li a { font-size: 15px; padding-top: 10px; padding-bottom: 10px; }
	#main_img_area { padding-bottom: 8px; background: none; }
	#main_img_area img, #slideshow { width: 100% !important; height: auto !important; }
	/* スライドショー (jquery.slides) が写真を包む span に 781x300 を直接書くので上書きする */
	#main_img_area span {
		width: 100% !important;
		height: auto !important;
		background-size: 100% 100% !important;
	}
	#mainmenu { width: 100% !important; }

	/* 4 つのバナー (社長挨拶・製品・受託開発・アクセス/お問い合わせ) は 2 列にする */
	#maincontents ul { display: block !important; height: auto !important; overflow: hidden; }
	#maincontents li {
		width: 50% !important;
		height: auto !important;
		box-sizing: border-box;
		padding: 3px !important;
	}
	#maincontents li img { display: block; width: 100%; height: auto; margin-bottom: 0 !important; }
	#maincontents li a + a img { margin-top: 6px; }

	/* バナーの下 (オンラインショップの上) にある 10 個の改行は、PC で左メニューの下に
	   並べるための空き。スマホでは大きな空白になるだけなので詰める */
	#bodyarea > p > br:nth-child(-n+10) { display: none; }

	#footerwrap { position: static; height: auto; background-size: cover; padding: 8px 0; }
	#footer { height: auto; margin: 0 auto; padding: 0 8px; font-size: 13px; }

	/* ---------- 音声合成 LSI のページ ---------- */
	#main { width: auto !important; max-width: 100%; box-sizing: border-box; }
	#main #navi, #main #cont, #main #header, #main #footer, #main #side {
		width: auto !important;
		float: none !important;
		box-sizing: border-box;
	}
	/* 上のメニュー (はじめに／AquesTalk pico／お問い合わせ) は高さ 10px 固定で
	   見出しに重なるので、高さを中身に合わせ、3 つを横に均等に並べる */
	#main #navi { height: auto !important; overflow: hidden; padding: 4px 0; }
	#main #navi ul { margin: 0 !important; padding: 0 !important; height: auto !important; display: flex; }
	#main #navi li { float: none !important; width: auto !important; flex: 1 1 0; text-align: center; }

	/* 文中に直接書かれた 12px 指定の部分だけ文字が小さくなるので、周りにそろえる */
	#main #cont span[style] { font-size: inherit !important; line-height: inherit !important; }

	/* 画像に直接書かれた左右の余白で、画面からはみ出すのを防ぐ */
	#main img { margin-left: 0 !important; margin-right: 0 !important; }
}