@charset "UTF-8";
/* ==========================================================================
   responsive.css — スマートフォン・タブレット表示用
   精誠テクノロジー株式会社様
   制作: blanc（榮島） 2026-08

   ※ このファイルは新規追加です。既存の style.css / object.css /
     normarize.css / lightbox.css は変更していません。
     PC（1025px以上）の表示は、このファイルの指定を一切受けません。
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. 共通（全幅で有効。PC表示を変えない範囲の安全な指定のみ）
   -------------------------------------------------------------------------- */

/* PC用に置いた要素。スマホでのみ出す（既定は非表示） */
#sp_contact,
.sp-menu-btn {
	display: none;
}


/* --------------------------------------------------------------------------
   1. タブレット（〜1024px）— 960px固定をやめて画面幅に追従させる
   -------------------------------------------------------------------------- */

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

	#container,
	#header {
		width: auto;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}

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

	/* メインビジュアル（957px固定）を画面幅に収める */
	#main_img {
		height: auto;
	}

	#main_img img {
		width: 100%;
		height: auto;
	}

	/* 本文カラムとサブナビの2カラムを、画面幅に応じた比率にする */
	#contents {
		width: auto;
		max-width: 100%;
		float: none;
		margin: 30px 0 40px 0;
		padding: 30px;
		box-sizing: border-box;
	}

	#subnavi {
		width: auto;
		float: none;
		margin: 0 0 30px 0;
	}

	/* グローバルナビ（画像5本＝計約690px）を折り返せるようにする */
	#header #gnavi ul {
		display: flex;
		flex-wrap: wrap;
	}

	#header #gnavi li {
		float: none;
	}

	/* トップページのタイル4枚 */
	ul#tails {
		display: flex;
		flex-wrap: wrap;
	}

	ul#tails li {
		float: none;
	}
}


/* --------------------------------------------------------------------------
   2. スマートフォン・小型タブレット（〜768px）
   -------------------------------------------------------------------------- */

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

	/* ---- 基本 ---------------------------------------------------------- */

	body {
		font-size: 15px;
		line-height: 1.7;
		-webkit-text-size-adjust: 100%;
	}

	#container,
	#header {
		padding-left: 12px;
		padding-right: 12px;
	}

	#wrapper {
		overflow-x: hidden;
	}

	/* ヘッダーの背景画像（縦10px×316px／トップは528px）は、PCの
	   ヘッダーの高さに合わせて作られている。スマホではヘッダーが
	   低くなるぶん、画像下端の緑の線がパンくずや見出しの上に
	   かぶさってしまうため、スマホでは画像を外す。
	   （背景は body の地の模様がそのまま出る） */
	#header_wrapp,
	#home #header_wrapp {
		background-image: none;
	}


	/* ---- ヘッダー ------------------------------------------------------- */

	#home #header h1,
	#header_logo {
		float: none;
		margin: 12px 0 0 0;
		text-align: center;
	}

	#home #header h1 img,
	#header_logo img {
		width: 220px;
		height: auto;
	}

	/* PC用のメール画像バナーと住所ブロックはスマホでは畳む
	   （代わりに下の #sp_contact をテキストで出す） */
	#header #tel,
	#header #ad {
		display: none;
	}

	/* 電話は 1タップで発信、メールは 1タップで起動 */
	#sp_contact {
		display: flex;
		gap: 8px;
		margin: 12px 0 10px 0;
	}

	#sp_contact a {
		flex: 1 1 0;
		display: block;
		text-align: center;
		padding: 12px 6px;
		border-radius: 4px;
		font-weight: bold;
		font-size: 15px;
		line-height: 1.3;
		text-decoration: none;
	}

	#sp_contact a.sp-tel {
		background: #074032;
		color: #fff;
	}

	#sp_contact a.sp-mail {
		background: #fff;
		color: #074032;
		border: solid 1px #074032;
		box-sizing: border-box;
	}

	#sp_contact a small {
		display: block;
		font-size: 11px;
		font-weight: normal;
		opacity: 0.85;
	}


	/* ---- 開閉式メニュー（ハンバーガー） --------------------------------- */

	.sp-menu-btn {
		display: block;
		width: 100%;
		margin: 0 0 10px 0;
		padding: 13px 12px;
		background: #24395a;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 15px;
		font-weight: bold;
		font-family: inherit;
		text-align: left;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	/* 3本線のアイコン。1つの擬似要素に box-shadow で上下の線を足している */
	.sp-menu-btn::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 18px;
		height: 2px;
		margin: 0 10px 2px 0;
		background: #fff;
		box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
	}

	.sp-menu-btn[aria-expanded="true"] {
		background: #074032;
	}

	/* JS が動いた場合だけ畳む。JS が無効／読み込み失敗のときは
	   ナビがそのまま並んで表示される（メニューが消えない） */
	body.js-spnav #header #gnavi {
		display: none;
	}

	body.js-spnav #header #gnavi.is-open {
		display: block;
	}

	#header #gnavi {
		margin-bottom: 10px;
	}

	#header #gnavi ul {
		display: block;
		border-top: solid 1px #d3d3d3;
	}

	#header #gnavi li {
		float: none;
		display: block;
		line-height: normal;
		border-bottom: solid 1px #d3d3d3;
	}

	#header #gnavi li a {
		display: block;
		padding: 14px 12px;
		background: #fff;
	}

	/* 画像のナビボタンは横並び前提の幅なので、スマホでは
	   同じ内容のテキスト（alt と同じ文言）に置き換える */
	#header #gnavi li a img {
		display: none;
	}

	#header #gnavi li a::after {
		content: attr(data-sp-label);
		display: block;
		color: #333;
		font-weight: bold;
		font-size: 15px;
	}


	/* ---- 見出し --------------------------------------------------------- */

	/* 見出しの背景写真は横960px前提で作られており、スマホ幅では
	   タイトルの文字と重なって読めなくなる。スマホでは写真を外し、
	   読みやすい帯の見出しにする（PCの見出しはそのまま） */
	h2 {
		font-size: 140%;
		line-height: 1.4;
		padding: 12px 12px 12px 14px;
		margin: 12px 0 0 0;
		background-image: none !important;
		background-color: #f2f2fb !important;
		border-left: solid 5px #074032;
		box-sizing: border-box;
	}

	h3 {
		font-size: 118%;
		height: auto;
		padding: 10px 12px;
		background-size: cover;
		letter-spacing: 0;
		margin: 26px 0 14px 0;
	}

	h4 {
		height: auto;
		font-size: 108%;
		padding: 10px 12px;
		margin: 24px 0 16px 0;
	}

	.heading,
	.subheading2 {
		background-size: cover;
	}


	/* ---- 本文まわり ----------------------------------------------------- */

	#contents {
		padding: 18px 15px;
		margin: 18px 0 30px 0;
	}

	#breadcrumbs {
		font-size: 85%;
		margin: 8px 0 4px 0;
		line-height: 1.5;
	}

	#subnavi li a {
		padding: 14px 15px 14px 30px;
	}

	/* 定義リスト（dt を左に回り込ませる指定）を縦積みにする */
	.defo dt,
	.defo2 dt,
	.defo3 dt {
		float: none;
		width: auto;
		padding-top: 8px;
		text-indent: 0;
	}

	.defo dd,
	.defo2 dd,
	.defo3 dd {
		padding: 0 0 10px 0;
		text-indent: 0;
	}

	.indent3 {
		text-indent: 0;
	}


	/* ---- 表組み --------------------------------------------------------- */

	/* 項目名＋内容の2列テーブルは、縦積みにして画面幅に収める */
	table.defo,
	table.l_box {
		display: block;
		width: 100%;
	}

	table.defo tbody,
	table.l_box tbody {
		display: block;
		width: 100%;
	}

	table.defo tr,
	table.l_box tr {
		display: block;
		width: 100%;
	}

	table.defo td,
	table.l_box td {
		display: block;
		width: auto !important;
		white-space: normal !important;
		border-top: none;
		padding: 10px 12px;
		box-sizing: border-box;
	}

	table.defo tr td:first-child,
	table.l_box tr td:first-child {
		border-top: #d9d9d9 1px solid;
	}

	table.defo td.item,
	table.l_box td.item {
		padding: 8px 12px;
	}

	table.defo td.item img {
		float: none;
	}

	/* nowrap 指定を無効化（スマホでは横にはみ出す原因になる） */
	table.defo td[nowrap],
	table.l_box td[nowrap] {
		white-space: normal !important;
	}

	/* 作図サンプルの画像グリッド（土木分野サービス）は
	   縦積みではなく 2 列のまま残したほうが見比べやすい */
	table.defo tr:has(td.text_center) {
		display: flex;
		flex-wrap: wrap;
	}

	table.defo td.text_center {
		display: block;
		width: 50% !important;
		border-top: #d9d9d9 1px solid;
		text-align: center;
	}

	table.defo td.text_center img {
		width: 100%;
		height: auto;
	}

	table.defo td.text_center p {
		font-size: 90%;
	}

	/* 価格表（3列）は 1行ずつのカードとして読ませる */
	table.defo.tbl-3col tr.tbl-head {
		display: none;
	}

	table.defo.tbl-3col td::before {
		content: attr(data-label);
		display: block;
		font-weight: bold;
		font-size: 85%;
		color: #074032;
		margin-bottom: 4px;
	}

	table.defo.tbl-3col tr {
		margin-bottom: 18px;
	}


	/* ---- フォーム ------------------------------------------------------- */

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	select,
	textarea {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		/* 16px 未満だと iOS が入力時にページを勝手に拡大するため */
		font-size: 16px;
		padding: 10px;
	}

	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	button {
		max-width: 100%;
	}

	input[type="radio"],
	input[type="checkbox"] {
		width: auto !important;
		transform: scale(1.3);
		margin-right: 6px;
	}

	/* MailformPro（採用ページのフォーム）が横幅を持つ場合の保険 */
	#mailformpro {
		width: 100% !important;
		max-width: 100%;
	}


	/* ---- トップページ --------------------------------------------------- */

	ul#tails {
		display: block;
		padding-top: 20px;
	}

	ul#tails li {
		width: auto;
		height: auto;
		float: none;
		margin: 0 0 14px 0;
		padding-bottom: 14px;
		background: none;
		border: solid 1px #d9d9d9;
		border-radius: 4px;
		overflow: hidden;
	}

	ul#tails li a {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 12px;
	}

	ul#tails li a img {
		width: 120px;
		height: auto;
		flex: 0 0 120px;
	}

	ul#tails li div {
		padding: 0;
		font-size: 90%;
		text-align: left;
	}

	ul#tails li div p {
		text-align: left;
		margin-bottom: 4px;
	}

	.ml40 {
		margin-left: 0 !important;
	}


	/* ---- フッター ------------------------------------------------------- */

	#footer {
		height: auto;
		padding-bottom: 20px;
	}

	#footer #pagetop a {
		margin-bottom: 20px;
	}

	#footer #footer_about,
	#footer #footer_navi {
		width: auto;
		float: none;
		margin: 0 0 15px 0;
	}

	#copyright {
		font-size: 80%;
		padding: 0 10px;
	}


	/* ---- 汎用の回り込み解除 --------------------------------------------- */

	.left,
	.right,
	.floatr {
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.left img,
	.right img {
		max-width: 100%;
		height: auto;
	}

	/* 会社概要ページの Google マップ */
	#contents iframe {
		width: 100%;
		height: 320px;
	}
}


/* --------------------------------------------------------------------------
   3. 小型スマートフォン（〜420px）
   -------------------------------------------------------------------------- */

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

	body {
		font-size: 14px;
	}

	h2 {
		font-size: 130%;
	}

	ul#tails li a img {
		width: 96px;
		flex: 0 0 96px;
	}

	#sp_contact a {
		font-size: 14px;
	}
}