/* =========================================================
   i-57.jp  Responsive retrofit  (2026-06-28)
   - 既存 style.css は一切改変せず、本ファイルで上書きする。
   - PC（デスクトップ）表示は改修前と完全に同一を維持する。
     → 既存要素への上書きはすべてメディアクエリ内に閉じる。
   - .wrapper(width:1000px) / #slideshow(width:1000px) 等は
     header.php のインライン<style> や jQuery(cycle/masonry) が
     inline style を付与するため、打ち消しには !important が必要。
   ========================================================= */


/* =========================================================
   ハンバーガーボタン本体 (新規要素 #i57-menu-toggle のみ対象)
   - PCでは display:none ＝既存PCレイアウトに一切影響しない。
   - ※ メディアクエリの display:block より前に置くこと
        (同一詳細度では後勝ち。後ろに置くと常に none で勝ってしまう)
   ========================================================= */
#i57-menu-toggle {
	display: none;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1000;
	width: 44px;
	height: 44px;
	padding: 11px 9px;
	margin: 0;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	box-sizing: border-box;
}
#i57-menu-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	margin: 4px 0;
	background: #333;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
#i57-menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#i57-menu-toggle.open span:nth-child(2) { opacity: 0; }
#i57-menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* =========================================================
   タブレット以下: 固定幅の解除・流動化 ( <= 1024px )
   ========================================================= */
@media screen and (max-width: 1024px) {
	html { -webkit-text-size-adjust: 100%; }
	html, body { overflow-x: hidden; }          /* 横スクロール安全網 */
	body { min-width: 0 !important; }            /* style.css: body{min-width:1120px} を解除 */
	#Owaku { margin: 5px !important; }
	.wrapper {
		width: auto !important;                  /* インライン/JS の width:1000px を解除 */
		margin: 0 !important;
		padding: 0 12px;
		box-sizing: border-box;
	}

	/* 画像・埋め込みの流動化 */
	#main img, #content img, .box img, .sidebar img, #header img, #footer img {
		max-width: 100%;
		height: auto;
	}
	iframe, embed, object, video { max-width: 100%; }
	/* 外部埋め込み(Facebook / AdSense)のはみ出し抑止 */
	.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe,
	.fb-page, ins.adsbygoogle { max-width: 100% !important; }

	/* スライドショー(固定1000px)の流動化。cycleのinline幅を!importantで解除。
	   ※スライドはcycleが絶対配置でスタックするため内部構造は触らず、
	     コンテナをビューポート幅に収め overflow:hidden(既存)でクリップする */
	.slideshow, #slideshow { width: auto !important; max-width: 100% !important; }

	/* ヘッダーの固定幅解除 */
	#header { height: auto !important; overflow: hidden; }
	#site-title,
	#header-englishTitle {
		width: auto !important;
		white-space: normal !important;
	}

	/* グリッドコンテナの固定幅解除（この段階ではまだ横並び） */
	#boxes { width: auto !important; }
}


/* =========================================================
   タブレット縦 〜 スマホ: 1カラム化 + ハンバーガー ( <= 768px )
   ========================================================= */
@media screen and (max-width: 768px) {

	/* --- メイン + サイドバー を縦積み。記事を先・サイドバー(広告)を後に --- */
	/* .pickup(float:left;width:290px)を消さないと、BFCになるflex #content が
	   フロートを避けて幅161pxに潰れる。装飾バッジのためモバイルでは非表示 */
	.pickup { display: none !important; }
	#content { display: flex; flex-direction: column; }
	#boxes  { order: 1; }
	.fetch  { order: 2; }
	.sidebar { order: 3; }
	.sidebar {
		width: auto !important;
		float: none !important;
		margin: 30px 0 0 !important;
		position: static !important;
		right: auto !important;
	}

	/* --- フッターのサイドバーウィジェット(GOOGLE AD/RAKUTEN AD/FACEBOOK/SPONSORS等) ---
	   PCでは float 左寄せだが、SPでは記事ブロック幅(#main)に合わせて中央寄せにする。
	   見出し h3 / バナー画像 / 商品画像 / iframe / Facebookウィジェットを
	   inline-block + auto マージンでセンタリングし、max-width:100% ではみ出しを防ぐ。 */
	.sidebar .widget { text-align: center; }
	.sidebar .widget h3 { text-align: center; }
	.sidebar .widget img,
	.sidebar .widget .linkimg,
	.sidebar .widget iframe,
	.sidebar .widget .fb_iframe_widget,
	.sidebar .widget .fb_iframe_widget span {
		display: inline-block !important;
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 100% !important;
		height: auto;
	}
	.sidebar .widget ul,
	.sidebar .widget li {
		text-align: center;
		list-style-position: inside;
	}

	/* --- Masonry(JS) のインライン配置を無効化 → 1カラム --- */
	/* JS側(header.php)でSPはmasonry初期化をスキップ済み。万一の保険として
	   inline の position/left/top/height をCSSでも無効化する。 */
	#boxes, #related {
		width: auto !important;
		height: auto !important;
		position: static !important;
	}
	#boxes .box, #related .box {
		position: static !important;
		left: auto !important;
		top: auto !important;
		height: auto !important;          /* 中身に追従(518px等の固定高を打ち消し) */
		float: none !important;
		width: auto !important;
		max-width: 360px;
		margin: 0 auto 40px !important;   /* カード間隔 20px → 40px */
		padding-bottom: 14px;             /* 投稿者ブロック下の背景内余白 */
		box-sizing: border-box;
	}
	/* ★はみ出し修正の本体: .posted(float:left) を親 .rel に内包させる(clearfix)。
	   これが無いと .rel/.box の高さが .posted を含まず約39pxはみ出す。 */
	#boxes .box .rel { height: auto !important; }
	#boxes .box .rel::after { content: ""; display: table; clear: both; }
	.box .rel img, .box img { width: 100%; height: auto; }
	/* スマホのみ: 一覧サムネイル(homepage-thumb)を高さ180pxに統一しクロップ表示。
	   縦横比維持・引き伸ばさない(object-fit:cover)。#boxes限定=個別記事/他ページ非対象。
	   アバター(.avatar)はクラスが違うため対象外。object-fitが画像ボックス内で
	   クロップするためoverflow:hiddenは不要。!important不使用(詳細度で上書き)。 */
	#boxes .box .rel img.attachment-homepage-thumb {
		width: 100%;
		height: 180px;
		object-fit: cover;
		object-position: center;
		display: block;
	}
	/* hoverオーバーレイ(タッチ非対応)は非表示。.rel に静的表示があるため情報欠落なし */
	.box .texts { display: none !important; }

	/* "さらに記事を読み込む" ボタン */
	.fetch { width: auto !important; max-width: 360px; margin-left: auto !important; margin-right: auto !important; }

	/* --- スライドショー: 高さを少し抑える --- */
	.slideshow, #slideshow { height: 220px !important; }

	/* --- ヘッダー再構成 --- */
	#header { position: relative; padding-top: 10px; }
	#head-logo {
		float: none !important;
		margin: 0 auto !important;
		width: 140px !important;
	}
	#head-logo img { width: 140px; height: auto; }
	#site-title {
		float: none !important;
		text-align: center;
		padding: 15px 0 0 !important;
		font-size: 24px !important;
		line-height: 1.3 !important;
	}
	#header-englishTitle {
		float: none !important;
		text-align: center;
		padding: 6px 0 0 !important;
		font-size: 14px !important;
	}
	.head_date { float: none !important; text-align: center; }
	#search {
		float: none !important;
		clear: none !important;
		width: auto !important;
		padding: 10px 0 !important;
		text-align: center;
	}
	#search input[type=text] {
		width: 80% !important;
		max-width: 300px;
		box-sizing: border-box;
	}
	#head-social { float: none !important; text-align: center; }
	#head-social li { float: none !important; display: inline-block !important; }

	/* --- ハンバーガートグル表示 (本体ルールより後＝こちらが勝つ) --- */
	#i57-menu-toggle { display: block; }

	/* --- グロナビ #menu : モバイル開閉 --- */
	#header-left {
		float: none !important;
		width: 100%;
		padding-left: 0 !important;
	}
	#menu {
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.3s ease;
	}
	#menu.open { max-height: 600px; }
	#menu ul { height: auto !important; }
	#menu ul li {
		display: block !important;
		float: none !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 12px 16px !important;
		border-right: none !important;
		border-bottom: 1px solid #ddd !important;
		text-align: center;
		line-height: 1.4 !important;
		overflow: visible !important;
	}
	/* slideMenu.js が生成する pink スライドパネル(.hoverMenu)を隠し、
	   通常リンク(.normalMenu)だけをフラット表示する */
	#menu .hoverMenu, #menu .selectedMenu { display: none !important; }
	#menu .normalMenu, #menu .normalMenu:visited {
		display: block;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		color: #333 !important;
	}
	#menu .menuTex10 { font-size: 12px; }
	#menu ul li a { display: block; }

	/* --- フッター縦積み --- */
	#footer { height: auto !important; padding: 25px 0 !important; text-align: center; }
	#site-info {
		float: none !important;
		width: auto !important;
		height: auto !important;
		padding: 70px 0 0 !important;
		margin: 0 auto !important;
		background-position: center top !important;
		/* footlogo.jpg(実寸685x122)が auto では左右にクリップされるため、
		   contain で記事ブロック幅に全体を収める(見切れ解消)。 */
		background-size: contain !important;
		background-repeat: no-repeat !important;
	}
	#footer-left, #footer-right {
		float: none !important;
		width: auto !important;
		padding: 0 !important;
		margin: 20px 0 0 !important;
		white-space: normal !important;
	}
	#footer-left li, #footer-right li {
		float: none !important;
		display: inline-block;
		padding: 0 8px !important;
	}

	/* タップターゲット最低44px目安 */
	#menu ul li a, #head-social li a { min-height: 44px; }

	/* =====================================================
	   追補4(2026-06-28) 記事ページSPレイアウト修正 2/3/5
	   ※ 修正1(サイドバーウィジェット中央寄せ/フッターロゴ)は
	      上の追補3で対応済みのためここでは再掲しない。
	   ===================================================== */

	/* --- 修正2: 記事ページ(single)で広告(.sidebar)を記事の後ろへ ---
	   #main は header.php で全ページ共通に開かれる(トップは #content>#boxes 構造で
	   別途 #content flex 済)。flex化はarticleページに限定するため .single にスコープ。
	   #main 直下の子は .breadcrumb / .sidebar / #page-left / .clear の4つ(footer.php の
	   .clear が #main 内最後)。#footer は #main の外なので影響しない。 */
	.single #main {
		display: flex !important;
		flex-direction: column !important;
	}
	.single #main > .breadcrumb { order: 1; }
	.single #main > #page-left  { order: 2; }
	.single #main > .sidebar    { order: 3; }   /* 広告は最後 */
	.single #main > .clear      { order: 4; }
	.single #page-left {
		width: auto !important;          /* 固定 width:730px;float:left を解除 */
		max-width: 100% !important;
		float: none !important;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* --- 修正3: 記事内の画像・テーブルのはみ出し --- */
	#page-left img,
	#page-left iframe,
	#page-left video,
	#page-left embed,
	#page-left object {
		max-width: 100% !important;
		height: auto !important;
		width: auto;                     /* width="540"等の固定属性を無効化 */
	}
	#page-left table {
		width: 100% !important;
		max-width: 100% !important;
		table-layout: fixed;
	}
	#page-left table,
	#page-left tbody,
	#page-left tr,
	#page-left td,
	#page-left th {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	#page-left .readmore,
	#page-left .readm-more {
		max-width: 100% !important;
		width: auto !important;
		box-sizing: border-box;
	}

	/* --- 修正5: コメントフォームのはみ出し --- */
	#comments .comment-form-author,
	#comments .comment-form-email,
	#comments .comment-form-url,
	#comments .comment-form-comment,
	#comments p {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		box-sizing: border-box;
	}
	#comments input[type="text"],
	#comments input[type="email"],
	#comments input[type="url"],
	#comments textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	#comments input[type="submit"] {
		max-width: 100% !important;
		box-sizing: border-box;
	}
	#comments .comment-author,
	#comments .comment-meta {
		width: 100% !important;
		float: none !important;
		box-sizing: border-box;
	}
}


/* =========================================================
   スマホ小 ( <= 480px )
   ========================================================= */
@media screen and (max-width: 480px) {
	body, input, textarea { font-size: 14px; line-height: 24px; }
	.wrapper { padding: 0 10px; }
	.slideshow, #slideshow { height: 180px !important; }
	#site-title { font-size: 20px !important; }
	#header-englishTitle { font-size: 12px !important; }
	.box h1 { font-size: 15px !important; }
	#boxes .box, #related .box, .fetch { max-width: 100% !important; }
}