@charset "UTF-8";
/* ------------------------------------------------------------------
   mobile.css ｜ ケイ緑化有限会社（No.107）
   役割：画面が狭いときだけ、現行の 960px 固定レイアウトを組み替える。
        1001px 以上（PC）には一切効かない＝現行の見た目をそのまま残す
------------------------------------------------------------------ */

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

	/* ---- 全体 ---- */
	body {
		font-size: 18px;
		line-height: 1.75;
		-webkit-text-size-adjust: 100%;
		padding-bottom: 84px; /* 画面下の電話ボタンのぶん */
	}

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

	/* 960px 固定の箱をすべて画面幅に合わせる */
	#wrapper,
	#header,
	#bottom_box,
	#copy_box,
	h1,
	.main,
	.navi,
	.text_box,
	.text_box02,
	.info_bg,
	.b_contact,
	#service_bg {
		width: auto;
		max-width: 960px;
		box-sizing: border-box;
	}

	#wrapper,
	h1,
	.main,
	#bottom_box,
	#copy_box {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* ---- 上の緑帯 ---- */
	h1 {
		font-size: 13px;
		line-height: 1.5;
	}

	/* ---- ヘッダー（ロゴ・電話） ---- */
	#header {
		height: auto;
		padding: 10px 14px;
	}

	.head_hidden {
		height: auto;
		overflow: visible;
	}

	.logo_table {
		width: 100%;
		height: auto;
		float: none;
		overflow: visible;
	}

	.logo_table th,
	.logo_table td {
		display: block;
		width: auto;
		padding: 0;
		text-align: center;
	}

	.logo_table td {
		margin-top: 8px;
		font-size: 15px;
		line-height: 1.6;
		text-align: left;
	}

	#header .right {
		float: none;
		margin-top: 10px;
		text-align: center;
	}

	/* ---- メニュー（画像 → 文字） ---- */
	#navi_bg {
		height: auto;
		background-repeat: repeat;
		padding: 8px 10px;
		box-sizing: border-box;
	}

	.navi {
		height: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.navi li {
		float: none;
		flex: 1 1 calc(50% - 4px);
	}

	.navi li:last-child {
		flex-basis: 100%;
	}

	.navi li img {
		display: none;
	}

	.navi li a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		padding: 6px 8px;
		border: 1px solid #006633;
		border-radius: 4px;
		background: #fff;
		color: #006633;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.35;
		text-align: center;
		text-decoration: none;
	}

	.mh-nav-t {
		display: block;
	}

	/* ---- 文字だけでできた見出し画像を、本物の文字に差し替える ---- */
	img[src$="top02.jpg"],
	img[src$="top08.jpg"],
	img[src$="b_contact01.jpg"],
	img[src$="info01.jpg"],
	img[src$="service03.jpg"] {
		display: none;
	}

	.mh-it {
		display: block;
		font-weight: bold;
		line-height: 1.5;
	}

	.mh-it-green,
	.mh-it-brown {
		padding: 10px 12px;
		color: #fff;
		font-size: 18px;
	}

	.mh-it-green {
		background: #21713f;
	}

	.mh-it-brown {
		background: #6d5a34;
	}

	.mh-it-plain {
		padding: 6px 0;
		color: #21713f;
		font-size: 18px;
		border-bottom: 1px dotted #9c8f77;
	}

	/* ---- メイン写真 ---- */
	#main_bg,
	#main_bg02 {
		height: auto;
		padding-top: 12px;
		margin-bottom: 16px;
		background-size: auto 100%;
	}

	/* ---- トップページ ---- */
	/* 「ふじ通り」の写真は右側の余白ではなく、文章の下に置いて全部見せる */
	.top_box01 {
		width: auto;
		padding-right: 0;
		padding-bottom: 41%; /* 391×159 の写真の比率 */
		background-position: bottom center;
		background-size: 100% auto;
	}

	/* 5枚のサービス写真を2列に */
	#wrapper > .left,
	#wrapper > .right {
		float: none;
		display: inline-block;
		width: 48.5%;
		margin-right: 0;
		vertical-align: top;
	}

	.top_table th,
	.top_table td {
		display: block;
		width: auto;
		padding: 6px 0;
		font-size: 100%;
	}

	/* お知らせ本文に直接書かれている 13px を読める大きさへ */
	.top_table th span[style] {
		font-size: 17px !important;
	}


	/* ---- 職人紹介 ---- */
	.info_text {
		width: auto;
		float: none;
	}

	/* 背景の松の写真は、履歴の表に重ならないよう上へ出して全部見せる */
	.info_bg {
		background-position: top center;
		background-size: 100% auto;
		padding-top: 103%; /* 530×545 の写真の比率 */
	}

	.info_table th,
	.info_table td {
		display: block;
		width: auto;
		padding: 4px 0;
	}

	.info_table th {
		margin-top: 10px;
	}

	/* ---- 料金・サービス案内 ---- */
	#service_bg {
		padding: 18px 14px;
	}

	.service_box,
	.service_text {
		width: auto;
		float: none;
	}

	/* ---- ケイ緑化について ---- */
	.keiryokka_table th,
	.keiryokka_table td {
		display: block;
		width: auto;
		padding: 6px 8px;
	}

	.keiryokka_table th {
		margin-top: 8px;
	}

	.map_box iframe {
		width: 100%;
		height: 300px;
	}

	/* ---- お問い合わせ ---- */
	.contact_table th,
	.contact_table td {
		display: block;
		width: auto;
		padding: 8px 10px;
		border-left: none;
		border-right: none;
	}

	.contact_table {
		border-left: none;
	}

	.form30, .form50, .form75, .form100, .form200, .form250,
	.form300, .form400, .form450, .form500, .form600, .form650, .form700 {
		width: 100%;
		box-sizing: border-box;
	}

	input[type="text"],
	select,
	textarea {
		font-size: 16px; /* iPhone で入力時に画面が拡大しない大きさ */
		padding: 8px;
		box-sizing: border-box;
	}

	input[type="submit"],
	input[type="button"] {
		font-size: 17px;
		padding: 12px 24px;
	}

	.b_contact {
		padding: 12px;
	}

	.b_contact_r {
		width: auto;
		float: none;
		margin-top: 12px;
		box-sizing: border-box;
	}

	/* ---- フッター ---- */
	#foot_l {
		width: auto;
		float: none;
	}

	.footer {
		font-size: 15px;
		text-align: left;
	}

	.footer li {
		display: inline-block;
		padding: 4px 8px;
		line-height: 1.8;
	}

	#copy_box {
		font-size: 13px;
		padding-top: 8px;
		padding-bottom: 8px;
	}


	/* ---- 画面下の電話ボタン ---- */
	.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: #006633;
		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 {
		width: auto;
		margin-left: 10px;
		margin-right: 10px;
		font-size: 15px;
	}

	.mh-note-top {
		margin-top: 8px;
		margin-bottom: 8px;
		padding: 9px 11px;
		font-size: 13px;
		line-height: 1.6;
	}
}

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

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

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