/* =====================================================================
   responsive.css
   -----------------------------------------------------------------
   旧デザイン(840px固定・画像スプライトナビ)をスマートフォン/タブレット
   でも見られるようにするための上書き用スタイルシート。
   必ず他のCSSより後に読み込むこと(header.php / 各静的htmlの</head>直前)。
   ===================================================================== */

*, *::before, *::after{
	box-sizing: border-box;
}

html{
	-webkit-text-size-adjust: 100%;
}

body{
	overflow-x: hidden;
}

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

/* ---------------------------------------------------------------------
   スマホ用ハンバーガーメニュー・ボタン
   (PCでは非表示。header.php側で出力し、JSで開閉する)
--------------------------------------------------------------------- */
#spnav-toggle{
	display: none;
}

/* =====================================================================
   ブレークポイント: タブレット以下 (840pxのデザイン幅を下回ったら発動)
   ===================================================================== */
@media screen and (max-width: 860px){

	/* ---- 全体の外枠を画面幅に追従させる ---- */
	#wrap2,
	#wrap3,
	#headtext,
	#headlogo,
	#headbtn,
	#mainimage,
	#mainmenu,
	#mainnavi,
	#contents_wrap,
	#contents,
	#textlink02,
	#textlink02 ul,
	#name,
	#copyright{
		width: 100% !important;
		max-width: 100%;
	}

	#wrap2, #wrap3{
		padding-left: 4%;
		padding-right: 4%;
	}
	#headlogo, #mainimage, #mainmenu, #contents_wrap, #textlink02{
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ---- 2カラム構成(本文+左右サイドバー)を縦積みに ---- */
	#main_area,
	#main_area_in,
	#navi_left,
	#navi_right,
	#main_content,
	.list,
	.blog,
	.news,
	.gallery,
	.aboutus,
	.map,
	.link,
	#shop_container,
	.goods,
	#pictarea_container,
	.board,
	.voice,
	.qa,
	#schoolmenu,
	.toiawase,
	#pp{
		float: none !important;
		width: 100% !important;
		max-width: 100%;
	}

	/* サムネイル・小要素グリッドも画面幅基準に */
	.list_lib,
	.pic,
	.lead{
		width: 47% !important;
	}

	/* ---------------------------------------------------------------
	   ヘッダー：画像スプライトのロゴ/ボタンをやめて、
	   読めるテキストリンクに置き換える
	--------------------------------------------------------------- */
	#headlogo{
		background-image: none;
		height: auto;
		padding: 10px 0;
	}
	#headbtn{
		float: none;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	#headbtn li{
		float: none;
		width: auto !important;
	}
	#headbtn li a{
		background-image: none !important;
		display: inline-block;
		height: auto;
		padding: 8px 10px;
		overflow: visible;
		font-size: 12px;
		color: #FFFFFF;
		background-color: #7a6b57;
		border-radius: 4px;
	}

	/* ---------------------------------------------------------------
	   メインナビ：スプライト画像メニュー → 縦積みテキストメニュー
	   通常は折りたたみ、ボタン押下時(.is-open)のみ表示
	--------------------------------------------------------------- */
	#spnav-toggle{
		display: block;
		position: relative;
		margin: 10px 0 0 4%;
		width: 44px;
		height: 40px;
		background: #5A66A6;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		padding: 0;
	}
	#spnav-toggle span{
		display: block;
		width: 22px;
		height: 2px;
		margin: 5px auto;
		background: #fff;
	}
	#spnav-toggle .spnav-label{
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	#mainmenu{
		height: auto;
		margin: 10px 0 0;
	}
	#mainnavi{
		height: auto;
		width: 100%;
		display: none;
		flex-direction: column;
	}
	#mainnavi.is-open{
		display: flex;
	}
	#mainnavi li{
		float: none;
		width: 100% !important;
	}
	#mainnavi li a{
		background-image: none !important;
		display: block;
		width: 100%;
		height: auto;
		padding: 12px 10px;
		overflow: visible;
		color: #FFFFFF;
		border-bottom: 1px solid #7a6b57;
		font-size: 14px;
	}

	/* ---- フッターの横並びリンクも折り返し可に ---- */
	#textlink{
		white-space: normal;
		padding: 10px 4%;
	}
	#textlink02{
		margin-left: 0;
		padding-left: 4%;
	}
	#textlink02 li{
		float: none;
		margin: 4px 0;
	}
}

/* =====================================================================
   ブレークポイント: スマートフォン (幅480px以下)
   ===================================================================== */
@media screen and (max-width: 480px){
	body{
		font-size: 13px;
		line-height: 1.6;
	}
	.list_lib,
	.pic,
	.lead{
		width: 100% !important;
	}
}