@charset "utf-8";

/* ------------------------------------------------------------------
   渡辺林産工業株式会社 様 ご提案専用サンプル
   スマートフォン対応（レスポンシブ）用の追加スタイル

   方針：現行サイトの見た目は一切変更しない。
   このファイルの指定は、色の反転よけと提案注釈を除き、
   すべて「画面の幅が 940px 以下のとき」だけ効くようにしている。
   ------------------------------------------------------------------ */

/* ブラウザの自動ダークモードで配色が反転するのを防ぐ（全幅で必要） */
:root {
	color-scheme: only light;
}

/* --- 提案注釈（全幅・現行の中身より外側にだけ置く） --------------- */
.mihon-note {
	background: #f3f1e7;
	border-bottom: 1px solid #d8d2b8;
	color: #4a4535;
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
	padding: 12px 16px;
	text-align: center;
}

.mihon-note--foot {
	border-bottom: none;
	border-top: 1px solid #d8d2b8;
}

.mihon-note strong {
	font-weight: bold;
}

/* --- スマホ用の追加部品は、PCでは存在しないものとして隠す --------
   ここを @media の中だけに書くと、PCで素の <ul> として表示されてしまう。
   基準の display:none は必ず @media の外に置くこと。 */
.mihon-mhead,
.mihon-mnav {
	display: none;
}

/* ==================================================================
   ここから下は 940px 以下のときだけ効く
   ================================================================== */
@media screen and (max-width: 940px) {

	/* --- 土台 ------------------------------------------------- */
	body {
		font-size: 18px;
		-webkit-text-size-adjust: 100%;
	}

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

	/* 幅を決め打ちしている箱を、画面幅に合わせる */
	header,
	.main_txt,
	.main_txt02,
	.main02_txt,
	.pankuzu p,
	.top_bnr,
	.top_news,
	.iso_bnr,
	.policy_menu,
	.policy_circl,
	.smork01,
	.smork01_inn,
	.palett_box,
	.company01,
	.company02,
	.food_inn {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* --- ヘッダー --------------------------------------------- */
	header {
		padding: 0;
	}

	/* 見出し（h1）としての意味は残したまま、見た目だけ隠す。
	   ロゴは .mihon-mhead の中に置き直すので、二重表示になるのを防ぐ */
	.logo {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* 画像の上に置いたクリック範囲（イメージマップ）は
	   画像を縮めると位置がずれて押せなくなるため、
	   スマホでは本物のボタン（.mihon-mhead）に置き換える */
	.head_btn {
		display: none;
	}

	nav {
		display: none;
	}

	.mihon-mhead {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 16px 12px;
	}

	.mihon-mhead .mihon-logo {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mihon-mhead .mihon-logo img {
		width: 100%;
		max-width: 210px;
		height: auto;
		display: block;
	}

	/* メニューボタン・電話ボタンの3点セット
	   （折り返さない・縮まない・48px以上） */
	.mihon-btn {
		white-space: nowrap;
		flex: 0 0 auto;
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		box-sizing: border-box;
		padding: 0 14px;
		border: none;
		border-radius: 4px;
		background: #008040;
		color: #fff;
		font-family: inherit;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.mihon-btn--tel {
		background: #148246;
	}

	.mihon-btn:link,
	.mihon-btn:visited,
	.mihon-btn:hover,
	.mihon-btn:active {
		color: #fff;
	}

	/* 開いたメニュー：ヘッダー直下の全幅ドロップダウン
	   （position:fixed にすると環境によって位置基準が壊れるため使わない） */
	.mihon-mnav {
		background: #ffffff;
		border-top: 2px solid #008040;
		border-bottom: 1px solid #cfcfcf;
		margin: 0;
		padding: 6px 0;
		list-style: none;
		overflow-y: auto;
	}

	.mihon-mnav.is-open {
		display: block;
	}

	.mihon-mnav li {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #e4e4e4;
	}

	.mihon-mnav li:last-child {
		border-bottom: none;
	}

	.mihon-mnav a {
		display: block;
		box-sizing: border-box;
		min-height: 48px;
		padding: 13px 16px;
		font-size: 18px;
		line-height: 1.35;
		text-decoration: none;
		color: #343434;
	}

	.mihon-mnav .is-child a {
		padding-left: 32px;
		font-size: 17px;
		color: #4c4c4c;
	}

	/* --- トップの大きな写真 ----------------------------------- */
	.main {
		height: auto;
		min-height: 230px;
		background-position: center center;
		background-size: cover;
		top: 0;
	}

	.main_txt {
		padding-top: 60px;
		padding-bottom: 30px;
	}

	.main_txt img {
		max-width: 100%;
	}

	.contents,
	.main_txt02 {
		top: 0;
	}

	.contents {
		margin-bottom: 0;
	}

	.main_txt02 {
		padding-top: 24px;
		padding-bottom: 4px;
	}

	.h2_top {
		font-size: 22px;
	}

	/* --- トップの6つのバナー ---------------------------------- */
	.top_bnr {
		justify-content: space-between;
		margin-top: 24px;
		padding-bottom: 10px;
	}

	.top_bnr div {
		width: 48%;
		margin-bottom: 16px;
	}

	.top_bnr div img {
		width: 100%;
	}

	/* --- お知らせ --------------------------------------------- */
	.top_news {
		margin-bottom: 40px;
		padding-top: 28px;
	}

	.top_news h3 {
		font-size: 22px;
		margin-bottom: 22px;
	}

	/* --- 表を縦に積み直す ------------------------------------- */
	.company_tbl,
	.company_tbl tbody,
	.company_tbl tr,
	.company_tbl th,
	.company_tbl td {
		display: block;
		width: auto;
	}

	.company_tbl th {
		padding: 0 0 4px 0;
		font-weight: bold;
		color: #148246;
	}

	.company_tbl td {
		padding: 0 0 18px 0;
	}

	.company_tbl tr:last-child td {
		padding-bottom: 0;
	}

	/* 下層ページの取引先一覧（1行を横に並べている表） */
	.smork_tbl,
	.smork_tbl tbody,
	.smork_tbl tr,
	.smork_tbl td {
		display: block;
		width: auto;
	}

	.smork_tbl td {
		padding-left: 0;
		padding-bottom: 4px;
	}

	/* バーク堆肥の品質基準（2列のまま画面幅に収める） */
	.bark_tbl {
		width: 100%;
		table-layout: fixed;
	}

	.bark_tbl th,
	.bark_tbl td {
		padding: 8px 10px;
		font-size: 16px;
		word-break: break-word;
	}

	/* --- 下層ページ共通 --------------------------------------- */
	.main_company,
	.main_poricy,
	.main_iso,
	.main_link {
		height: auto;
		min-height: 110px;
		top: 0;
		background-size: cover;
		background-position: center center;
	}

	.main02_txt {
		padding-top: 34px;
		padding-bottom: 30px;
		font-size: 21px;
		line-height: 1.5;
	}

	.pankuzu {
		font-size: 14px;
		padding: 12px 0;
	}

	/* 右側に敷いてある飾りの写真は、狭い画面では文字と重なるので外す */
	.smorkbk,
	.barkbk,
	.palettebk,
	.otherbk,
	.otherbk02,
	.otherbk03 {
		background-image: none;
	}

	.otherbk03 {
		height: auto;
	}

	/* 見出しの高さ固定だけを解除する。
	   ⚠️ background-size は指定しないこと。
	   飾りは左端に置く小さな画像（縦線10×70／バッジ70×60）なので、
	   contain を当てると見出しが2行以上になったときに
	   画像が見出しの高さまで拡大され、文字に重なる */
	.h3,
	.h3_02 {
		height: auto;
		min-height: 70px;
		margin-bottom: 24px;
	}

	.h3 h3,
	.h3_02 h3 {
		font-size: 22px;
		line-height: 1.35;
	}

	/* 左余白は現行のまま（.h3=30px／.h3_02=90px）。狭めると飾りに文字が重なる */

	.h3 p,
	.h3_02 p {
		font-size: 16px;
	}

	.smork_h4 {
		font-size: 20px;
		line-height: 1.4;
	}

	.bark_h4 {
		font-size: 18px;
		line-height: 1.5;
		padding-right: 12px;
	}

	.font18 {
		font-size: 18px;
	}

	/* --- 事業内容トップ --------------------------------------- */
	/* ⚠️ 背景は 32×70 の帯を横に繰り返しているタイル。
	   background-size を当てるとタイルが伸びて崩れる */
	.policy_menubox {
		height: auto;
		/* PCは高さ70px＝タイル1枚ぶんなので repeat-x で足りるが、
		   スマホは3段（180px）になるため、縦にも繰り返さないと
		   斜線が上段の裏だけで途切れる */
		background-repeat: repeat;
	}

	.policy_menu {
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 14px;
		padding: 12px 16px;
	}

	.policy01 {
		height: auto;
		padding-bottom: 40px;
		background-size: cover;
		background-position: bottom center;
	}

	/* ⚠️ 背景は 51×70 の繰り返しタイル。cover を当てると1枚が引き伸ばされる */
	.policy_lead {
		padding: 34px 16px 30px;
		margin-bottom: 30px;
	}

	.policy_lead img {
		max-width: 100%;
	}

	.policy_txt {
		margin-top: 24px;
	}

	.policy_circl {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		margin-top: 20px;
	}

	/* --- 企業方針 / パレット ---------------------------------- */
	.iso_bnr {
		justify-content: space-between;
		padding-bottom: 40px;
	}

	.iso_bnr div {
		width: 48%;
		margin: 0 0 16px 0;
	}

	/* パレット9形状は図の細部を見せるものなので、
	   2列に詰めず1列のまま大きく見せる */
	.palett_box {
		margin-top: 26px;
		flex-direction: column;
		align-items: center;
	}

	.palett_box p {
		width: 100%;
		max-width: 320px;
		margin: 0 0 22px 0;
		font-size: 17px;
		text-align: center;
	}

	.bark_pdf {
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 34px;
	}

	.bark_pdf div {
		margin-right: 0;
	}

	.much01 {
		padding: 30px 16px;
	}

	/* --- フッター --------------------------------------------- */
	footer {
		padding: 30px 0 24px;
	}

	.food_inn {
		text-align: left;
	}

	.food01,
	.food02,
	.food03 {
		float: none;
		margin: 0 0 26px 0;
	}

	.food_title {
		width: auto;
		font-size: 16px;
		margin-bottom: 18px;
	}

	.food_ul01,
	.food_ul02 {
		float: none;
		margin: 0;
	}

	.food_ul02 {
		margin-top: 14px;
	}

	.food_li01,
	.food_li02 {
		margin-bottom: 12px;
		line-height: 1.5;
	}

	/* 指で押す場所は44px以上を確保する */
	.food_li01 a,
	.food_li02 a {
		display: inline-block;
		box-sizing: border-box;
		min-height: 44px;
		padding: 10px 0;
		line-height: 1.4;
	}

	.food_li01,
	.food_li02 {
		background-position: left 12px;
	}

	/* 画像を囲んでいるリンクは、画像と同じ大きさで押せるようにする
	   （inline のままだと文字1行分の高さしか当たり判定にならない） */
	.top_bnr a,
	.iso_bnr a,
	.linkimg a,
	.linkimg02 a,
	.foodmail a,
	.main_txt a,
	.bark_pdf a,
	.policy_circl a,
	.much01 a {
		display: block;
	}

	.food_tbl,
	.food_tbl tbody,
	.food_tbl tr,
	.food_tbl th,
	.food_tbl td {
		display: block;
		width: auto;
	}

	.food_tbl th {
		padding: 0 0 2px 0;
	}

	.food_tbl td {
		padding: 0 0 16px 0;
	}

	.food03 {
		width: auto;
		box-sizing: border-box;
		padding: 18px 12px;
	}

	.food03 .pl20 {
		padding-left: 0 !important;
		text-align: center;
	}

	.linkimg02.btn01 {
		text-align: center;
		margin-bottom: 6px;
	}

	.copy {
		font-size: 14px;
		line-height: 1.6;
		padding: 12px 16px;
	}

	/* --- 横長の図（文字が焼き込まれているもの） ---------------
	   縮めると読めなくなるので、原寸のまま横スクロールで見せる */
	.mihon-wide {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 0 4px 0;
	}

	.mihon-wide img {
		max-width: none;
		width: auto;
		height: auto;
		display: block;
	}

	.mihon-wide-hint {
		margin: 2px 0 18px 0;
		color: #6c6c6c;
		font-size: 14px;
		text-align: right;
	}

	/* --- 小さすぎる文字の下限をそろえる ----------------------- */
	.small {
		font-size: 14px;
	}

	/* --- ページ上部へ戻るボタン ------------------------------- */
	#page-top {
		right: 12px;
		bottom: 12px;
	}

	#page-top img {
		width: 48px;
		height: 48px;
	}

	/* --- お問い合わせフォーム（別窓で開くページ） ------------- */
	.contactTable,
	.contactTable tbody,
	.contactTable tr,
	.contactTable th,
	.contactTable td {
		display: block;
		width: auto;
	}

	.contactTable th {
		padding: 14px 0 4px 0;
		text-align: left;
	}

	.contactTable td {
		padding: 0 0 10px 0;
	}

	.contactTable input,
	.contactTable select,
	.contactTable textarea {
		font-size: 18px;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* このページのCSSはID2つで指定されているため、
	   同じ強さ以上（#hyouki から書く）でないと上書きできない */
	#hyouki #wrapper,
	#hyouki #Contaner table,
	#hyouki #Contaner div#BTN,
	#hyouki #Rule,
	#hyouki #Privacy ul {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* この箱は inline-block のため中身の幅で広がる。
	   block にしないと、入力欄の指定幅ぶん横にはみ出す */
	#hyouki #Contaner {
		display: block;
		width: auto;
		padding: 0 14px;
		box-sizing: border-box;
	}

	/* size="40" / cols="38" が入力欄の幅を決めているので画面幅に収める */
	#hyouki input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]),
	#hyouki select,
	#hyouki textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	#hyouki #Contaner table,
	#hyouki #Contaner table tbody,
	#hyouki #Contaner table tr,
	#hyouki #Contaner table th,
	#hyouki #Contaner table td {
		display: block;
		width: auto;
	}

	/* 表を display:block にすると caption が表の外側扱いになり、
	   幅が1文字ぶんまで縮んで見出しが縦に割れる */
	#hyouki #Contaner table caption {
		display: block;
		width: auto;
		text-align: center;
	}

	#hyouki #Contaner table th {
		border-right: none;
		padding: 10px 8px;
		font-weight: bold;
	}

	#hyouki #Contaner table td {
		border-right: none;
		padding: 10px 8px;
	}

	#hyouki #Contaner div#BTN {
		margin: 20px auto;
	}

	#hyouki #Contaner div#BTN a {
		display: inline-block;
		min-height: 48px;
		padding: 13px 28px;
		font-size: 18px;
	}

	/* 送信ボタンの画像は 78×21px しかなく指で押しにくいため、
	   スマホのときだけ押せる大きさ（高さ48px以上）まで拡大する */
	#hyouki .bottanTable input[type="image"] {
		width: 200px;
		height: auto;
	}
}