/* =============================================================
   responsive.css — omcthemes 追加レイヤー（元CSSは無改変）
   レスポンシブ化 / スマホ固定フッター / 軽量スライダー / ドロワー
   ============================================================= */

/* ---- 軽量スライダー（MetaSlider 代替・1100px） ---- */
#omc-slider { max-width: 1100px; margin: 0 auto; position: relative; }
#omc-slider .omc-slides { list-style: none; margin: 0; padding: 0; position: relative; }
/* 滑らかクロスフェード（display切替→opacityトランジション） */
#omc-slider .omc-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 1.1s ease; }
#omc-slider .omc-slide:first-child { position: relative; }
#omc-slider .omc-slide.is-active { opacity: 1; z-index: 1; }
#omc-slider .omc-slide img { width: 100%; height: auto; display: block; }

/* ---- PC既定：スマホ専用UIは隠す ---- */
#omc-mobile-bar, #omc-drawer, #omc-sticky-footer { display: none; }

/* ---- コンテンツはみ出し対策（全幅でも固定カラム内に収める） ---- */
#main img, .ttCo img, .entry-body img, .aboutCo img, #main iframe, #main video, #main embed { max-width: 100%; height: auto; }
#main table { max-width: 100%; }
#main, .entry-body, .aboutCo { overflow-wrap: break-word; word-wrap: break-word; }
/* 旧dzs-scroller等の固定幅(width:750px;height:400px)コンテナを流動化（はみ出し対策） */
#main .scroller-con, #main [id^="scroller"], #main .scroller-con > .inner { width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
/* .aboutCo(幅668px固定・入れ子で重複)を親いっぱいに流動化＝入れ子はみ出し解消 */
#main .aboutCo { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; }
/* 入れ子の内側.aboutCoは枠・背景を消して二重ボックスを防ぐ */
#main .aboutCo .aboutCo { border: 0 !important; background: none !important; padding: 0 !important; }
/* omcthemes固定幅コンテンツ(729/710/590px等)を全ページ一括で流動化（はみ出し恒久対策） */
#main .box, #main .box5, #main .flowCo, #main .inqTb, #main .joseiCatch, #main .joseiTb,
#main .koukaCo, #main .mapCo, #main .mapCoBg, #main .outlinePhotoP2Tb, #main .outlinePhotoP3Tb,
#main .outlinePhotoP4Tb, #main .outlinePhotoTb, #main .outlineTb, #main .outlineTb2, #main .outlineTb3,
#main .guideTb, #main .aboutTb, #main .photoTd, #main .ptBoxTb, #main .ptTb, #main .qandaDl,
#main .qandaSlideCo1, #main .qandaSlideCo3, #main .rDl, #main .tSttDl, #main .tSttDl2, #main .tSttDl3,
#main .tSttTb, #main .tbTb, #main .voiceCo {
	max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important;
}
#main .aboutCo img, #main td img, #main th img, #main .outlinePhotoP2Tb img, #main .outlineTb img { max-width: 100% !important; height: auto !important; }

/* ---- アクセスカウンター（原本=CGI daycount。静的・白地で小さく地味に） ---- */
#ct { text-align: center; padding: 8px 0 4px; }
.omc-counter { display: inline-block; font-family: 'Courier New', monospace; letter-spacing: 1px; background: #fff; color: #aaa; padding: 1px 4px; font-size: 10px; }

/* ============================================================
   タブレット以下（〜1040px）：固定幅を流動化
   ============================================================ */
@media screen and (max-width: 1060px) {
	#wrapper { width: auto !important; max-width: 1040px; margin: 0 auto; padding: 0 12px; box-sizing: border-box; }
	#header, #hdr, #header2 { width: auto !important; }
	.hdrBtn { width: auto !important; }
	.hdrBtn li img { max-width: 100%; height: auto; }
	#container { width: auto !important; }
	#main { width: 62% !important; box-sizing: border-box; }
	#sidebar { width: 34% !important; box-sizing: border-box; }
	#main img, #sidebar img, .ttCo img, .entry-body img, .aboutCo img { max-width: 100%; height: auto; }
}

/* ============================================================
   スマホ・タブレット（〜1060px）：1カラム・画像ナビ→ドロワー・固定フッター
   ※PCデスクトップ版は約1100px必要なため、1060px以下は崩れた擬似デスクトップでなく
     モバイルUI（ハンバーガー＋ドロワー＋固定フッター）に切替（768px等のタブレット対策）
   ============================================================ */
@media screen and (max-width: 1060px) {
	html { -webkit-text-size-adjust: 100%; }
	body { overflow-x: hidden; }

	/* 元のPCヘッダー(#hdr)はSPで丸ごと隠す＝モバイルバー1本に統一（二段ヘッダー解消） */
	#hdr { display: none !important; }
	#wrapper { padding: 0; }

	/* スマホ用ヘッダーバー */
	#omc-mobile-bar {
		display: flex; align-items: center; justify-content: space-between;
		height: 70px; padding: 0 12px; background-color: #fff;
		border-bottom: 1px solid #e4e2d2; position: sticky; top: 0; z-index: 9100;
	}
	#omc-mobile-bar .omc-m-logo img { height: 54px; width: auto; display: block; }
	#omc-hamburger { width: 40px; height: 40px; background: none; border: 0; padding: 8px; cursor: pointer; }
	#omc-hamburger span { display: block; height: 3px; background-color: #b8860b; margin: 5px 0; border-radius: 2px; transition: .3s; }
	#omc-hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	#omc-hamburger.is-open span:nth-child(2) { opacity: 0; }
	#omc-hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	/* ドロワー（リッチメニュー：和文+英字サブ+ゴールド装飾+›） */
	#omc-drawer {
		display: block; position: fixed; top: 70px; left: 0; right: 0;
		background-color: #fffdf5; border-bottom: 3px solid #b8860b;
		box-shadow: 0 8px 16px rgba(0,0,0,.12);
		transform: translateY(-120%); transition: transform .3s; z-index: 9050;
		max-height: calc(100vh - 70px); overflow-y: auto;
	}
	/* メニュー展開中は固定フッターを隠す（ドロワー下部ボタンの被り防止） */
	body.omc-menu-open #omc-sticky-footer { display: none !important; }
	#omc-drawer.is-open { transform: translateY(0); }
	#omc-drawer ul { list-style: none; margin: 0; padding: 0; }
	#omc-drawer li { border-bottom: 1px solid #ece6d2; }
	#omc-drawer li a {
		display: block; position: relative; padding: 13px 44px 13px 18px;
		color: #3a2f12; text-decoration: none; border-left: 4px solid transparent; transition: .2s;
	}
	#omc-drawer li a:hover, #omc-drawer li a:active { background-color: #f4efdc; border-left-color: #b8860b; }
	#omc-drawer li a .ja { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
	#omc-drawer li a .en { display: block; font-size: 11px; color: #b08d1c; letter-spacing: .06em; font-style: italic; margin-top: 1px; font-family: Georgia, 'Times New Roman', serif; }
	#omc-drawer li a::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #c9a227; font-size: 22px; line-height: 1; }
	/* サブ（カテゴリ）チップ */
	.omc-drawer-sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 18px; background-color: #f7f3e6; }
	.omc-drawer-sub a {
		flex: 1 1 calc(50% - 8px); text-align: center; padding: 9px 6px; font-size: 13px;
		color: #5b4a1a; text-decoration: none; background-color: #fff;
		border: 1px solid #e0d8bd; border-radius: 4px; box-sizing: border-box;
	}
	.omc-drawer-sub a:active { background-color: #efe7cf; }

	/* 本文1カラム化 */
	#container, #main, #sidebar { width: 100% !important; float: none !important; padding: 0 12px; box-sizing: border-box; }
	#sidebar { margin-top: 24px; }
	#omc-slider { max-width: 100%; }
	.hpBnr img { max-width: 100%; height: auto; }

	/* SP横はみ出し対策（過去失敗 _common-fixes item2 準拠） */
	html, body { overflow-x: hidden; max-width: 100%; }
	#wrapper, #container, #main, #sidebar, #header, #footer { max-width: 100% !important; box-sizing: border-box !important; }
	#main img, #main object, #main iframe, #main embed, #main video { max-width: 100% !important; height: auto !important; }
	#main table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; box-sizing: border-box !important; }
	#main form, #main input, #main textarea, #main select { max-width: 100% !important; box-sizing: border-box !important; }
	#main p, #main dl, #main dt, #main dd, #main ul, #main ol, #main li, .ttCo, .aboutCo { word-break: break-word !important; max-width: 100% !important; box-sizing: border-box !important; }

	/* iOS ズーム防止 */
	input, select, textarea { font-size: 16px !important; }

	/* 本文下に固定フッター分の余白 */
	#footer { margin-bottom: 60px; }

	/* スマホ固定フッター */
	#omc-sticky-footer {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
		background-color: #fff; border-top: 1px solid #e4e2d2;
		box-shadow: 0 -2px 6px rgba(0,0,0,.08);
	}
	#omc-sticky-footer a {
		flex: 1; text-align: center; padding: 7px 0 6px; font-size: 10px;
		color: #5b4a1a; text-decoration: none; border-left: 1px solid #f0eee0; line-height: 1.3;
	}
	#omc-sticky-footer a:first-child { border-left: 0; }
	#omc-sticky-footer .ic { display: block; font-size: 19px; margin-bottom: 2px; }
}
