@charset "UTF-8";
/* ------------------------------------------------------------------
   mobile.css ｜ 株式会社Playgreen（No.115）
   役割：画面が狭いときだけ、現行の固定レイアウト（本体1000px・
        メニュー1100px・フッター1170px）を組み替える。
        1025px以上（PC）には一切効かない＝現行の見た目をそのまま残す

   現行CSSの特徴（対処の理由）：
   - 固定の高さが多い（#main_garden 850px 等）→ すべて auto に
   - float と position:relative + top のずらし技 → いったん全部静置
   - 写真ブロックに負のマージン（.l00_42_r1 margin-top:-175px）→ リセット
   - 本文が12px（body 75%）→ 18px 基準へ
------------------------------------------------------------------ */

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

	/* ---- 全体 ---- */
	body {
		font-size: 18px;
		line-height: 1.8;
		-webkit-text-size-adjust: 100%;
		padding-bottom: 84px; /* 画面下の電話ボタンのぶん */
		/* 背景（bg_etc2.gif 4500×1160・上92pxが茶色の帯／中央に渓谷の写真）は
		   「高さを固定」して指定する。cover にするとページの高さで拡大率が変わり、
		   茶色の帯の太さがページごとに違って見えてしまうため（CEO指摘 2026-07-29） */
		background-size: auto 2200px !important;
		background-position: center top !important;
		background-repeat: no-repeat !important;
	}

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

	/* ---- 器をすべて画面幅へ。固定の高さ・float・ずらし技を解除 ---- */
	#container,
	#wraper,
	#menubutton,
	#footer,
	#footer_top {
		width: auto;
		min-width: 0;
	}

	#container div {
		width: auto;
		height: auto;
		min-height: 0;
		float: none;
		position: static;
	}

	#container {
		padding: 0 4px;
	}

	/* 本文の文字を読める大きさに（idの指定なので現行の12〜14px指定に勝つ） */
	#container p,
	#container li,
	#container td,
	#container th,
	#container dt,
	#container dd,
	#container address,
	#container span {
		font-size: 17px;
		line-height: 1.8;
	}

	#container h2 {
		font-size: 20px;
		line-height: 1.6;
	}

	#container h3 {
		font-size: 18px;
		line-height: 1.6;
	}

	#container a {
		font-size: inherit;
	}

	/* ---- ヘッダー ---- */
	/* ヘッダーの茶色は背景画像に頼らず、この箱自身に塗る。
	   背景画像は写真の位置がページで変わるため、茶色の範囲が揺れる */
	#header {
		height: auto;
		padding: 10px 8px 6px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		background-color: #391d01;
	}

	#header img {
		position: static;
	}

	/* 小さな飾りアイコンは隠す（電話は下の固定バーと電話番号画像がある） */
	#tel_ic,
	#mail {
		display: none;
	}

	/* 電話番号の画像は先頭で大きく見せる */
	#header a[href^="tel:"] {
		order: -1;
		margin: 0 auto;
	}

	/* h1（説明文）はページごとに1行と2行が混ざる。そのままだとヘッダーの高さが
	   ページごとに変わり、茶色の範囲が揃わない → 常に2行分の高さを確保する */
	#header h1 {
		position: static;
		font-size: 13px;
		line-height: 1.5;
		color: #fff;
		flex: 1 1 100%;
		order: 10;
		min-height: 39px; /* 13px × 1.5 × 2行（全30ページの実測で最大2行） */
	}

	/* 上部の小さな画像ボタン5つ → 文字ボタンに */
	#home,
	#contact,
	#area,
	#prof_u,
	#blog_u {
		display: none;
	}

	.mh-ut {
		display: inline-block;
		padding: 8px 10px;
		background: #fff;
		border-radius: 4px;
		color: #391d01;
		font-size: 15px;
		font-weight: bold;
		text-decoration: none;
		white-space: nowrap;
	}

	#header a {
		text-decoration: none;
	}

	/* ---- メニュー8ボタン → 2列の文字ボタンに ---- */
	#menubutton {
		margin: 0;
		padding: 8px 8px 2px;
	}

	ul.m_button {
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	ul.m_button li {
		float: none;
		height: auto;
		border-right: none;
		background: none !important; /* 現行はli背景にもボタン画像がある */
		flex: 1 1 calc(50% - 4px);
	}

	ul.m_button li img {
		display: none;
	}

	ul.m_button li a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		padding: 6px 8px;
		border: 1px solid #fff;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.92);
		color: #1d7502;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.35;
		text-align: center;
		text-decoration: none;
	}

	.mh-mt {
		display: block;
	}

	/* ---- 本文の白い箱 ---- */
	#main_garden,
	#main_garden_c,
	#garden00_el2,
	#area_main,
	#contact_form,
	#pruning_main,
	#fell_main,
	#care_main,
	#templ_main {
		margin-top: 20px;
		padding: 12px 10px;
		box-sizing: border-box;
		background-color: #fff;
	}

	/* トップの半透明パネル */
	.top_box,
	.top_box2,
	.top_box3 {
		margin-top: 20px;
		padding: 12px;
	}

	.top_box3 {
		height: auto;
	}

	/* ---- 写真ブロック（負のマージン・ずらし技のリセット） ---- */
	.layout_img2,
	.l00_5,
	.l00_5_r1,
	.l00_42_1,
	.l00_42_1_2,
	.l00_42_r1,
	.l00_42_r1_380,
	.garden00_2l,
	.r_left {
		float: none;
		width: auto;
		max-width: 100%;
		height: auto;
		margin: 0 auto 16px;
		position: static;
		top: 0;
	}

	.layout_img2 {
		display: block;
	}

	/* ---- 施工事例のサムネイル一覧 → 2列 ---- */
	ul.garden_exam,
	ul.pruning_exam,
	ul.fell_exam,
	ul.templ_exam {
		display: flex;
		flex-wrap: wrap;
		gap: 14px 10px;
		padding: 0;
		margin: 0; /* 現行の margin-left:10px を解除（2列に入りきらなくなるため） */
	}

	ul.garden_exam li,
	ul.pruning_exam li,
	ul.fell_exam li,
	ul.templ_exam li {
		float: none;
		list-style: none;
		flex: 0 1 calc(50% - 5px);
		max-width: calc(50% - 5px);
		box-sizing: border-box;
		width: auto;
		height: auto;
		margin: 0; /* 現行の margin-left:20px / margin-bottom:30px を解除 */
		padding: 6px 4px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}

	/* 写真の横に題名が回り込まないよう、写真を1枚のブロックにして題名を下へ */
	ul.garden_exam li img,
	ul.pruning_exam li img,
	ul.fell_exam li img,
	ul.templ_exam li img {
		float: none;
		display: block;
		margin: 0 auto;
	}

	ul.garden_exam li a,
	ul.pruning_exam li a,
	ul.fell_exam li a,
	ul.templ_exam li a {
		display: block;
		text-align: center;
		line-height: 1.5;
	}

	/* ---- 表（営業地域の width=900 の表など） ---- */
	#container table {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	#container td,
	#container th {
		width: auto;
	}

	/* 右寄せ見出し（「施工例を見る」リンク行）は、狭い画面では左寄せに。
	   右寄せのままだと行末の全角スペースが箱の外にぶら下がり右へ4pxはみ出す */
	#container h3 {
		margin-right: 0;
		text-align: left;
	}

	/* ---- フッター ---- */
	#footer,
	#footer_top {
		height: auto;
		padding: 14px 10px 18px;
	}

	/* ---- 画面下の電話ボタン ---- */
	.mh-telbar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: 8px 10px;
		background: rgba(255, 255, 255, 0.96);
		border-top: 1px solid #9c8f77;
		box-sizing: border-box;
	}

	.mh-telbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 56px;
		border-radius: 6px;
		background: #1d7502;
		color: #fff;
		text-decoration: none;
	}

	.mh-telbar-label {
		font-size: 15px;
	}

	.mh-telbar-num {
		font-size: 22px;
		font-weight: bold;
		letter-spacing: 0.04em;
	}

	/* ---- 注釈 ---- */
	.mh-note {
		margin: 8px 10px;
		font-size: 13px;
	}
}

/* 画面がとても狭いとき */
@media screen and (max-width: 400px) {

	ul.m_button li a {
		font-size: 15px;
	}

	.mh-telbar-num {
		font-size: 20px;
	}
}