@charset "utf-8";
/* 文字コード: UTF-8 */
/*
 * style.css（PC用）の後に読み込む追加スタイル。
 * ・PC表示：ナビの並び、お知らせ枠
 * ・1023px以下：旧スマホ版（sp/）の見た目に合わせた1カラム表示
 */

/* ---------- 共通 ---------- */
#sp-header {
	display: none;
}
#header ul#nav {
	display: flex;
	justify-content: center;
	width: 960px;
}

/* ヘッダー下の帯（inc/site.php の site_header） */
.top-photo,
.catch-strip--bar {
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;
	background-image: url(../img/main-photo-background-or.jpg);
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
	margin: 0;
	padding: 0;
}
.catch-strip {
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;
	margin: 0;
	padding: 6px 0;
}
.catch-strip--bar {
	height: 30px;
	padding: 14px 0 0 0;
}

/* お知らせ枠（js/notices.js が中身を入れる） */
.notice-box {
	margin: 10px 0;
	padding: 10px;
	border: solid 2px #000000;
	font-size: 18px;
	line-height: 1.5em;
}
.notice-box[hidden] {
	display: none;
}
.notice-box .notice + .notice {
	margin-top: 1em;
}
.notice-box--shop {
	font-size: 15px;
	margin: 0 0 12px;
}

/* ---------- タブレット縦・スマートフォン ---------- */
@media screen and (max-width: 1023px) {
	body {
		-webkit-text-size-adjust: 100%;
		overflow-x: hidden;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	iframe {
		max-width: 100%;
	}

	/* ヘッダー：旧スマホ版のロゴ＋ボタン */
	#sp-header {
		display: block;
		background-color: #FFFFFF;
		border-top: 8px solid #800000;
	}
	#sp-header .sp-logo {
		text-align: center;
		padding: 4px 0;
		border-bottom: 7px solid #D1D7C1;
	}
	#sp-header .sp-nav {
		display: flex;
		justify-content: center;
		gap: 0;
		padding: 8px 0 4px;
		background-image: url(../img/sp/nav-background.jpg);
	}
	#sp-header .sp-nav a {
		padding: 0 28px;
	}
	#sp-header .sp-nav a + a {
		border-left: 1px solid #B3CC99;
	}
	#header {
		background-image: none;
	}
	#header #header-in {
		display: none;
	}
	/* ヘッダー下の帯（高さ固定を解除） */
	.catch-strip,
	.catch-strip--bar {
		height: auto;
		padding: 6px 2%;
		line-height: 1.5;
	}

	/* 段組みを1列に */
	#container {
		width: auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}
	#container #main,
	#container #side,
	#container #main-wide {
		width: auto;
		min-width: 0;
		float: none;
		margin: 0;
		padding: 10px;
		box-sizing: border-box;
	}
	#container #main { order: 1; }
	#container #side { order: 2; padding-top: 10px !important; text-align: center; }
	#container > .clearfloat { order: 3; }

	#container table {
		max-width: 100%;
	}
	#container h1 {
		font-size: 140%;
		line-height: 1.3;
	}

	/* 店舗ページ */
	#main-wide {
		display: flex;
		flex-direction: column;
	}
	#main-wide > p:first-child { order: 0; }
	#shop-data { order: 1; }
	#shop-photo { order: 2; }
	#main-wide #main { order: 3; }
	#shop-side { order: 4; }
	#main-wide > .clearfloat { order: 5; }
	#shop-data,
	#shop-photo,
	#shop-side,
	#shop-main {
		width: auto;
		float: none;
		margin: 0 0 16px;
		padding: 0;
	}
	#shop-data table,
	#shop-photo table {
		width: 100%;
	}
	#shop-photo table td {
		width: auto;
	}
	#container #shop-data h1 {
		font-size: 120%;
		color: #000000;
	}
	#container #main-wide #shop-data h2 {
		font-size: 150%;
	}
	#container #main-wide #shop-side #tenchocome,
	#container #main-wide #shop-side #tenchoubox {
		width: auto;
	}
	#container #main-wide #shop-photo p {
		padding-left: 0;
		margin-top: 8px;
	}
	#main-wide #main iframe {
		width: 100%;
		height: 300px;
	}
	.notice-box--shop {
		font-size: 15px;
	}

	/* 店舗一覧 */
	#container #main #shoplist table {
		width: 100%;
	}
	#container #main #shoplist td[nowrap] {
		white-space: normal;
	}

	/* メニュー */
	#container #main-wide > table,
	#container #main-wide div[align="center"] {
		width: 100%;
	}
	#container #main-wide font {
		display: block;
		text-align: left;
	}

	/* フッター：表を縦積みに */
	#footer #footer-in {
		width: auto;
		padding: 10px 4%;
	}
	#footer #footer-in table,
	#footer #footer-in tbody,
	#footer #footer-in tr,
	#footer #footer-in td {
		display: block;
		width: auto !important;
	}
	#footer #footer-in td + td {
		margin-top: 8px;
	}
	#footer #footer-in p.spacer {
		display: none;
	}
	#footer #footer-in table tr td p {
		margin: 6px 0;
	}
	#footer #footer-in table tr td ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 16px;
	}
	#footer #footer-in table tr td ul li {
		margin-bottom: 4px;
	}
	#footer #footer-in table tr td ul li br {
		display: none;
	}
	#copyright {
		text-align: center;
	}

	.notice-box {
		font-size: 16px;
	}
}