/*
 * odk-responsive.css: finds-theme のスマートフォン向け（14版目。2026-10-29 s29e）
 * mu-plugin odk-responsive-preview が、確認の表示のときだけ style.css の後に読み込む。
 * 中身は、メニューの開け閉めのボタンを隠す1つ（下）を除いて @media (max-width: 767px) の中にあるので、パソコンの幅の表示には効かない。
 * style.css や本文の style 属性に固定の幅・回り込みがあるため、ここでは !important で上書きする。
 * 番号は s13c（トップ・/eventlist・/profile と style.css の調べ）の結果に合わせた。
 * 3版目: s13e で分かった header.php の中の <style>（メニューの 1120・880px と float: right）、
 *        style.css の .top-info-video-section の横並び（flex・nowrap）、トップの部品の固定の高さを外した。
 * 4版目: メニューを「ボタンで開く形」に（テーマの js/navigation.js が付け外しする toggled-on を使う）。
 *        文字を 15px に。スライダーは1枚目だけ、ピックアップの帯は出さない。左の列のバナーとカテゴリーの写真・フッターを整えた。
 * 5版目: メニューの下の階層を、いつも開いた形から、項目ごとに開け閉めする形（アコーディオン）に。
 *        mu-plugin（1.1）が下の階層のある項目に「＋」のボタンを付け、押すと li に odk-open を付ける。
 *        テーマ側の下の階層の指定（position: absolute など）に負けないよう、#site-navigation #menu-mainmenu から書く。
 * 6版目: スライダーを、1枚目だけの形から、全部の写真を切り替える形に（作業者の依頼）。
 *        header.php の中の JavaScript（s15a）が、画面の幅が 1120px より狭いと写真の幅を画面の幅に合わせて
 *        切り替えるので、ここでは位置・幅を押さえつけない。左右の余白の分だけ外に広げて、画面の幅にそろえる。
 * 7版目: s16b・s16c で調べた5ページ（/category/news・/recruit・/profile・/reform・/shop/service）の崩れを直す（11.）。
 *        ページの本文の中の <style> や style 属性の固定の幅・高さ・回り込みにも勝つよう、!important と、必要な所は強いセレクターで書く。
 * 8版目: 採用の下のページ（/recruit/hf-staff など）で、右の「Job Listing」の箱（#beta）が本文に重なっていたのを直す（11-3.）。
 *        s18a で、下のページでは #beta が #alpha の中にないと分かったので、#alpha #beta を #main #beta に変えた。
 *        メニューの開け閉めのボタンは、指で押したときにブラウザのフォーカスの枠を出さない（キーボードで操作したときは出す）。
 * 9版目: トップの3つの箱（FINDS EVENT・NEWS・SELECTION）を、パソコンと同じ「左に見出しの画像、右に中身」の横並びに（12.。作業者の依頼）。
 *        s27a・s27b3 で調べた作り（div.button と div.cont、#slide の JavaScript、mu-plugin の ul.odk-whatsnew）に合わせた。
 * 10版目: SELECTION のピックアップの帯（pickup.html・pickup2.html の iframe）も、パソコンと同じく出す（12-3.。作業者の依頼）。
 *        1本目は見出しの画像の右、2本目はその下に箱の幅いっぱい。帯は中で自動で横に流れる（slider.js）。
 * 11版目: トップの「お気に入りのコーディネートを探す」の箱（td.rightarea）を、左の列のリンク集（td.leftarea）の上に出す（13.。作業者の依頼）。
 *        s28b で、table.toppage は tr が1つで、td.leftarea と td.rightarea が兄弟、rightarea の中は箱だけと分かった。トップ（body.home）だけ。
 * 12版目: トップのリンク集（商品検索・バナー・枠付きの箱）を同じ幅（最大 340px）で中央にそろえ、お問い合わせを中央に（14.。作業者が A を選んだ）。
 *        FINDS YOKOGAWA HONTEN のバナー（table.mt20、s28d2）を中央に。
 * 13版目: トップのコーディネートの箱（td.rightarea）が右に寄っていたのを直す（15.）。s28f で、style.css の
 *        table.toppage td.rightarea の padding-left: 18px!important が、7. の padding-left: 0 !important に勝っていたと分かった。
 * 14版目: Contact Form 7 のフォームの入力欄が、フォームの設定の桁数（size・cols）で画面からはみ出すのを直す（16.）。
 *        s29d で、ブライダルクラブ（フォーム 257）の住所が size="80"、ご要望・ご質問が cols="60" と分かった。
 */

/* パソコンの幅では、開け閉めのボタンは出さない（パソコンは今までどおり、マウスを乗せると開く） */
.odk-sub-toggle {
	display: none;
}

@media (max-width: 767px) {

	/* 1. 全体: 文字の大きさ、左右の余白、横にはみ出さない守り */
	html,
	body {
		min-width: 0 !important;
	}
	body {
		font-size: 15px;
		line-height: 1.6;
		-webkit-text-size-adjust: 100%;
		overflow-wrap: break-word;
		word-break: break-word;
	}
	#page {
		width: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		box-sizing: border-box;
		overflow-x: hidden;
	}
	#main div,
	#main section,
	#main article,
	#main header,
	#main table,
	#main ul,
	#main dl,
	#main form,
	#main iframe,
	#main hr {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* 2. 固定の幅を外す（style.css の 1120・900・880・857・830px と、s13c の D-1 の主なもの） */
	.site-header,
	.site-content,
	.wrapper,
	#content,
	.footer-area,
	.entry-content,
	.entry-header,
	.blog-header,
	div.blog-content,
	div.breadcrumb,
	.menulink,
	.area1,
	.area1 div.pickuparea,
	.area1 div.eventarea,
	.area1 div.newsarea,
	.area1 div.cont,
	.newsarea .cont,
	.rightarea .catemidashi,
	.rightarea .topcatewaku,
	.catewaku-grid,
	.linkarea,
	.pickupfooter,
	div.menu-company,
	div.content-company,
	#searchbox,
	#searchbox .b-area,
	.sel-cate-ls,
	.sel-cate-p,
	.sel-cate-ls1,
	.sel-cate-p1,
	.itemlist .midashi,
	.front-widgets,
	.template-front-page .widget-area .widget,
	.template-front-page.two-sidebars .widget-area .front-widgets,
	.toparea,
	.middlearea,
	.bottomarea,
	.series,
	.recent,
	.guide,
	.midashi_sc,
	hr.detailLine,
	hr.detailLine2,
	#howtochoose .linkbutton,
	#howtochoose .linkbutton .btn,
	.top-info-video-section,
	.entry-content .top-info-video-section,
	.top-info-area,
	.entry-content .top-info-area,
	.top-video-area,
	.entry-content .top-video-area {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* 3. 回り込みをやめて、上から順に並べる（見出しと本文が横に並ぶのを直す） */
	.entry-header,
	.entry-content,
	.blog-content .entry-content,
	div.blog-content,
	.site-content,
	.sidebar-left,
	.menuarea,
	.logoarea,
	.linkarea,
	.alignLeft,
	.alignRight,
	.area1 div.eventarea,
	.area1 div.newsarea,
	.area1 .button,
	.area1 .cont,
	.top-info-area,
	.top-video-area,
	.col2 > div,
	.rightside {
		float: none !important;
	}
	.area1 div.eventarea,
	.area1 div.newsarea {
		margin-bottom: 20px;
	}

	/* 4. ヘッダー: ロゴの下に「メニュー」のボタン。押すと縦に開く（テーマの js/navigation.js が
	 *    h3.menu-toggle と #menu-mainmenu に toggled-on を付け外しする） */
	.logoarea,
	.menuarea {
		width: auto !important;
		max-width: 100% !important;
	}
	/* header.php の中の <style> が、メニューを 1120px・880px の幅で右に寄せている（float: right） */
	.main-navigation,
	.main-navigation div.menuarea,
	.menu-mainmenu-container {
		width: auto !important;
		float: none !important;
		padding-top: 0 !important;
		text-align: left !important;
	}
	/* 「家具インテリアの小田億ファインズ」（h1）は、見た目だけ隠す（読み上げや検索には残す） */
	.main-navigation div.menuarea h1 {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0);
		margin: 0 !important;
		padding: 0 !important;
	}
	.main-navigation h3.menu-toggle {
		display: block !important;
		margin: 8px 10px 10px !important;
		padding: 10px !important;
		font-size: 15px !important;
		line-height: 1.4 !important;
		text-align: center;
		color: #333 !important;
		background: #fff !important;
		border: 1px solid #ccc !important;
		border-radius: 4px;
	}
	.main-navigation h3.menu-toggle::before {
		content: "\2630\00a0";
	}
	.main-navigation h3.menu-toggle.toggled-on::before {
		content: "\2715\00a0";
	}
	/* 閉じているときはメニューを出さない。開いたら縦に1列 */
	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul,
	.main-navigation div ul#menu-mainmenu {
		display: none !important;
		width: auto !important;
		float: none !important;
		margin: 0 !important;
		border: 0 !important;
	}
	.main-navigation div ul#menu-mainmenu.toggled-on {
		display: block !important;
		background: #fff;
		border-top: 1px solid #ddd !important;
	}
	/* 項目は縦に1列。テーマ側の幅・回り込み・高さの指定は外す */
	#site-navigation #menu-mainmenu li {
		display: block !important;
		position: relative !important;
		width: auto !important;
		height: auto !important;
		float: none !important;
		margin: 0 !important;
		text-align: left;
	}
	#site-navigation #menu-mainmenu li > a {
		display: block !important;
		width: auto !important;
		margin: 0 !important;
		padding: 11px 56px 11px 14px !important;
		line-height: 1.5 !important;
		font-size: 15px !important;
		white-space: normal !important;
		text-align: left;
		color: #333 !important;
		background: #fff !important;
		border-bottom: 1px solid #eee !important;
	}
	/* リンクのない見出し（NEWS・PRODUCT など）は、押すと開く */
	#site-navigation #menu-mainmenu li > a:not([href]) {
		cursor: pointer;
	}
	#site-navigation #menu-mainmenu > li > a {
		font-weight: bold;
	}
	/* 下の階層: ふだんは閉じる。odk-open の付いた項目の、すぐ下の階層だけを開く */
	#site-navigation #menu-mainmenu li > ul,
	#site-navigation #menu-mainmenu li:hover > ul {
		display: none !important;
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		background: #fff !important;
	}
	#site-navigation #menu-mainmenu li.odk-open > ul {
		display: block !important;
	}
	/* 開いた中の項目は、階層ごとに字下げして、背景を少し変える */
	#site-navigation #menu-mainmenu li li > a {
		padding-left: 30px !important;
		font-size: 14px !important;
		font-weight: normal;
		background: #fafafa !important;
	}
	#site-navigation #menu-mainmenu li li li > a {
		padding-left: 46px !important;
		background: #f4f4f4 !important;
	}
	/* 開け閉めのボタン（「＋」「−」）: 項目の行の右端 */
	#site-navigation .odk-sub-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 46px;
		margin: 0;
		padding: 0;
		border: 0;
		border-left: 1px solid #eee;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: #555;
		font-size: 22px;
		line-height: 46px;
		text-align: center;
		cursor: pointer;
	}
	#site-navigation li.odk-open > .odk-sub-toggle {
		color: #000;
	}
	/* 指で押したときは、ブラウザのフォーカスの枠を出さない。キーボードで操作したときは出す（:focus-visible） */
	#site-navigation .odk-sub-toggle:focus:not(:focus-visible) {
		outline: none;
	}
	#site-navigation .odk-sub-toggle:focus-visible {
		outline: 2px solid #555;
		outline-offset: -2px;
	}

	/* 4-2. スライダー（.wideslider）: 全部の写真を、画面の幅で順に切り替える
	 *    header.php の中の JavaScript が、読み込みの後と画面の幅が変わったときに、写真の幅を $(window).width() に、
	 *    高さを写真の高さに合わせ、.wideslider_wrap の left を動かして切り替える。位置・幅はここで押さえつけない。
	 *    .wideslider を #page の左右の余白（10px）の分だけ外に広げて、JavaScript の幅（画面の幅）とそろえる。
	 *    写真は 10. の max-width: 100% で写真の枠の幅に縮む。
	 *    高さは、JavaScript が動くまでの間だけ写真の比（1120:400）で決めておく（動いた後は JavaScript が書く値が勝つ）。 */
	.wideslider {
		width: auto !important;
		margin-left: -10px !important;
		margin-right: -10px !important;
		height: 35.715vw;
	}
	/* 左右の「前へ」「次へ」は、スマートフォンでは幅が 0 になる。丸い点（.pagination）は画像が外のサイトの http で読めない見込みで、見えないまま押せてしまうので隠す
	 * （隠しても、自動の切り替えは JavaScript の中で「次へ」を押す形なので動く） */
	.slider_prev,
	.slider_next,
	.wideslider .pagination {
		display: none !important;
	}

	/* 5. 左の列（#secondary.sidebar-left）を本文の下に回す */
	#main.wrapper {
		display: flex;
		flex-direction: column;
	}
	#main.wrapper > #primary {
		order: 1;
	}
	#main.wrapper > #secondary {
		order: 2;
	}
	#primary.site-content,
	#secondary.sidebar-left {
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* 6. トップ: お知らせの囲みと YouTube、イベント・新着、ピックアップ */
	/* style.css の終わりの方で、お知らせと YouTube の枠が横並び（flex・nowrap・1120px）になっている */
	.entry-content .top-info-video-section,
	.top-info-video-section {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
	}
	.entry-content .top-info-area,
	.top-info-area,
	.entry-content .top-video-area,
	.top-video-area {
		width: auto !important;
		max-width: 100% !important;
	}
	.entry-content .top-video-area,
	.top-video-area {
		height: auto !important;
		aspect-ratio: 16 / 9;
		margin-top: 16px;
	}
	/* イベント・新着・ピックアップの囲みの、パソコン向けの固定の高さ（170〜182px）を外す（重なりを直す） */
	.area1 div.eventarea,
	.area1 div.newsarea,
	.area1 div.button,
	.area1 div.cont,
	.area1 div.pickuparea {
		height: auto !important;
	}
	.area1 div.button {
		width: auto !important;
		margin: 8px 0 !important;
	}
	.area1 div.newsarea {
		margin-left: 0 !important;
	}
	/* イベントのバナー（画像を重ねて切り替える）は 330px のまま、真ん中に置く */
	#slide {
		top: 0 !important;
		margin: 0 auto;
	}
	.top-video-area iframe,
	.entry-content iframe[src*="youtube.com"] {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
	}
	.area1 .cont[style],
	.pickuparea[style] {
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
	}
	/* ピックアップの帯（pickup.html・pickup2.html）は中が固定の幅なので、スマートフォンでは出さない
	 * （見出しの「FINDS SELECTION」のリンクは残す） */
	.area1 div.pickuparea .cont {
		display: none !important;
	}
	/* FINDS EVENT・NEWS・SELECTION の見出しの画像は真ん中に */
	.area1 div.button {
		text-align: center;
	}
	.area1 div.button img {
		margin: 0 auto;
	}

	/* 7. トップの表（table.toppage）と、その中の固定の幅 */
	table.toppage,
	table.toppage > tbody,
	table.toppage > tbody > tr,
	table.toppage > tbody > tr > td,
	table.topage,
	table.topage > tbody,
	table.topage > tbody > tr,
	table.topage > tbody > tr > td {
		display: block;
		width: auto !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* 「さらに詳しく商品をさがす」の囲みの固定の高さ（680px）を外す（大きな空きを直す） */
	.rightarea .topcatewaku {
		height: auto !important;
		margin-top: 0 !important;
	}
	table.toppage td.rightarea div[style],
	table.toppage td.rightarea table[style],
	table.toppage[style],
	table.mt20[style] {
		width: auto !important;
	}

	/* 7-2. トップの左の列だったバナー: 同じ幅にそろえて、真ん中に縦に並べる */
	table.toppage td.leftarea table,
	table.toppage td.leftarea tbody,
	table.toppage td.leftarea tr,
	table.toppage td.leftarea td {
		display: block;
		width: auto !important;
	}
	table.toppage td.leftarea img {
		display: block;
		width: 100% !important;
		max-width: 340px !important;
		height: auto !important;
		margin: 0 auto 8px;
	}
	table.toppage td.leftarea a.button {
		display: block;
		height: auto !important;
	}
	table.toppage td.leftarea .kensaku {
		width: 100% !important;
		max-width: 340px;
		margin: 10px auto 14px !important;
	}
	/* カテゴリーの写真: 4列を2列に */
	.catewaku-item {
		width: calc(50% - 5px) !important;
	}
	.rightarea .topcatewaku {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* 7-3. フッターのリンク: 2列に詰めて、大きな空きをなくす */
	.footer-area .footer-menu,
	.footer-area .footer-menu-l {
		float: none !important;
		display: inline-block;
		vertical-align: top;
		width: 48% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 0 12px !important;
		box-sizing: border-box;
	}

	/* 8. イベントの一覧（/eventlist）: 画像・文を上から順に */
	table.eventlist,
	table.eventlist > tbody,
	table.eventlist > tbody > tr,
	table.eventlist td.image,
	table.eventlist td.text {
		display: block;
		width: auto !important;
	}
	table.eventlist td.space {
		display: none;
	}
	table.eventlist td.image img {
		width: auto !important;
	}

	/* 9. 企業情報（/profile など）: 表は項目の下に内容。右の画像の列は下へ */
	.content-company table,
	.content-company tbody,
	.content-company tr,
	.content-company td {
		display: block;
		width: auto !important;
	}
	.content-company td.width200 {
		font-weight: bold;
		padding-top: 10px !important;
	}
	.rightside {
		width: auto !important;
		margin: 20px 0 0 !important;
		text-align: center;
	}

	/* 10. 画像・動画・埋め込み・表が画面からはみ出さないように */
	img,
	video {
		max-width: 100% !important;
		height: auto;
	}
	iframe,
	embed,
	object,
	table {
		max-width: 100% !important;
	}

	/* 11. ページごとの直し（7版目。s16b・s16c）
	 * 11-1. どのページにも: 本文の中の <style> の #main の最小の幅（/recruit の 1120px）と、
	 *       記事の題名の固定の高さ（style.css の .entry-header .entry-title の 30px。長い題名が下と重なる）を外す。
	 *       /profile の本文の中の <style> の .entry-content { width: 1120px !important } は、後から読まれるので、強いセレクターで上書きする */
	#main,
	#main.wrapper {
		min-width: 0 !important;
	}
	.entry-header .entry-title {
		height: auto !important;
	}
	#main .entry-content {
		width: auto !important;
	}

	/* 11-2. お知らせの一覧など（/category/news）: 横の列（#secondary.widget-blog）は #primary の中の先頭にあり、
	 *       style.css で 230px・右寄せ。幅を戻して、記事の一覧（#content.blog-content）の下に回す */
	#primary.site-content:has(> .widget-blog) {
		display: flex;
		flex-direction: column;
	}
	#primary.site-content > #content {
		order: 1;
	}
	#primary.site-content > .widget-blog {
		order: 2;
		width: auto !important;
		height: auto !important;
		float: none !important;
		margin: 20px 0 0 !important;
		border-top: 1px solid #ddd;
	}
	div.blog-content {
		padding-left: 0 !important;
	}
	.widget-blog .widget {
		padding: 16px 0 !important;
	}

	/* 11-3. 採用（/recruit とその下のページ）: 本文の中の <style> の固定の幅・右寄せ・絶対位置を外す
	 *       （本文の中にある body.rwd-on 向けの指定と同じ考え方。採用のトップでは右の「Job Listing」の箱は本文と同じ中身なので出さない）
	 *       #beta は、トップでは #alpha の中、下のページでは .inner_dummy の直下にある（s18a）。どちらにも当たるよう #main から書く */
	.inner_dummy,
	#alpha,
	#recruitlist,
	#recruit {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	#breadcrumb {
		float: none !important;
		width: auto !important;
		margin-right: 0 !important;
		text-align: left !important;
	}
	#main #beta,
	#main #recruitbeta {
		position: static !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	#main #beta {
		margin-top: 24px;
		padding: 16px !important;
	}
	body.page-id-475 #main #beta {
		display: none !important;
	}
	#syubetu {
		float: none !important;
		margin: 8px 0 !important;
	}
	#recruit h3 {
		width: auto !important;
		height: auto !important;
		line-height: 1.5 !important;
		padding: 6px 0;
	}
	#recruit table {
		width: 100% !important;
		margin: 0 0 10px !important;
	}
	#recruit th {
		width: 6em !important;
		padding: 10px 6px !important;
	}
	#recruit td {
		padding: 10px 6px !important;
	}

	/* 11-4. 企業情報（/profile）: 本文の中の <style> の横並び（.col2 の flex）をやめる。
	 *       表の行の固定の高さ（style.css の div.content-company .naiyo の 50px）で中身があふれ、下の行やフッターと重なっていたのを直す。
	 *       見出しの字下げ（style 属性の text-indent: 50px）と、入れ子の表の行の高さ（line-height: 3EM）も詰める */
	.entry-content .col2 {
		display: block !important;
	}
	div.content-company {
		padding: 10px !important;
	}
	div.content-company .naiyo {
		height: auto !important;
		line-height: 1.6 !important;
		padding: 8px 0 !important;
		text-indent: 0 !important;
	}
	div.content-company td td {
		line-height: 1.6 !important;
		padding: 2px 0 !important;
	}

	/* 11-5. 本文の中の、style 属性で高さ・回り込みを決めた箱（/reform の紺の箱の height: 150px と、中の float: right）。
	 *       中身が箱からはみ出して、次の文を細い隙間に押し込んでいたのを直す */
	.entry-content div[style*="height"] {
		height: auto !important;
	}
	.entry-content div[style*="float"] {
		float: none !important;
	}
	/* 修理・リフォームの「■ 椅子・ソファの張替え」などの枠（style.css で高さ 40px） */
	div.reform {
		height: auto !important;
		line-height: 1.5 !important;
		padding: 8px !important;
		box-sizing: border-box;
	}

	/* 11-6. お客様サービス（/shop/service）: 枠の右上の背景のイラスト（.service div.after など）が文に重なるので、
	 *       枠の下に、高さ 140px にそろえて置く。左右の余白（30px）も詰める */
	.service {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.service div.after,
	.service div.change,
	.service div.delivery,
	.service div.kousoku,
	.service div.hikitori {
		background-position: center bottom !important;
		background-size: auto 140px !important;
		padding-bottom: 150px !important;
	}
	ul.service li {
		width: auto !important;
		float: none !important;
	}

	/* 12. トップの3つの箱（FINDS EVENT・NEWS・SELECTION）を、パソコンと同じ「左に見出しの画像、右に中身」の横並びにする（9版目）。
	 *     3.・6. の縦並び（float: none・幅 auto）はそのままにして、箱の中を flex で横に並べる。
	 *     見出しの画像は箱の幅の 36%（元の 190px まで）、中身は残りの幅。上の端をそろえる */
	.area1 div.eventarea,
	.area1 div.newsarea,
	.area1 div.pickuparea {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 8px;
		padding: 8px !important;
		box-sizing: border-box;
	}
	.area1 div.eventarea > div.button,
	.area1 div.newsarea > div.button,
	.area1 div.pickuparea > div.button {
		flex: 0 0 36%;
		width: 36% !important;
		margin: 0 !important;
		text-align: left;
	}
	/* 見出しの画像を元の大きさ（190px）より大きくしない。1. の #main div の max-width: 100% !important より強く書く */
	#main .area1 div.eventarea > div.button,
	#main .area1 div.newsarea > div.button,
	#main .area1 div.pickuparea > div.button {
		max-width: 190px !important;
	}
	.area1 div.eventarea > div.button img,
	.area1 div.newsarea > div.button img,
	.area1 div.pickuparea > div.button img {
		display: block;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
	}
	.area1 div.eventarea > div.cont,
	.area1 div.newsarea > div.cont {
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		margin: 0 !important;
	}

	/* 12-1. EVENT のバナー（#slide）: 右の列の幅いっぱいに（元の 330px まで）、330:160 の比率のまま縮める。
	 *       トップの JavaScript が li に幅・高さ・位置を書き込んで1枚ずつ切り替えるので、幅・高さだけ !important で上書きする
	 *       （位置と表示の切り替えは JavaScript のまま） */
	.area1 div.eventarea #slide {
		width: 100% !important;
		max-width: 330px !important;
		height: auto !important;
		aspect-ratio: 330 / 160;
		margin: 0 !important;
		overflow: hidden;
	}
	.area1 div.eventarea #slide ul {
		position: relative;
		height: 100%;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.area1 div.eventarea #slide ul li {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
	}
	.area1 div.eventarea #slide img {
		width: 100% !important;
		height: auto !important;
	}

	/* 12-2. NEWS の一覧（mu-plugin の ul.odk-whatsnew）: 5件とも出す。行頭の点と左の余白をなくし、
	 *       日付を題名の上の行に小さく出して、1件ごとに点線で区切る。長い題名は列の中で折り返す */
	.area1 div.newsarea ul.odk-whatsnew {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.area1 div.newsarea ul.odk-whatsnew li {
		margin: 0 0 6px !important;
		padding: 0 0 6px;
		border-bottom: 1px dotted #ccc;
		font-size: 13px;
		line-height: 1.5;
		overflow-wrap: anywhere;
	}
	.area1 div.newsarea ul.odk-whatsnew li:last-child {
		margin-bottom: 0 !important;
		padding-bottom: 0;
		border-bottom: 0;
	}
	.area1 div.newsarea .odk-whatsnew-date {
		display: block;
		font-size: 11px;
		color: #666;
	}

	/* 12-3. SELECTION（10版目）: パソコンと同じく、ピックアップの帯を出す。
	 *       1本目（pickup.html）は見出しの画像の右に、2本目（pickup2.html）はその下に箱の幅いっぱいに置く。
	 *       6. の「.area1 div.pickuparea .cont を出さない」を、強いセレクターで上書きする。
	 *       iframe の幅は 10. の max-width: 100% で列の幅に縮む。帯の中（固定の幅 900・1095px）は iframe の中で切れて見え、
	 *       slider.js が自動で横に流す。高さは元の 160px のまま */
	.area1 div.pickuparea {
		flex-wrap: wrap;
	}
	.area1 div.pickuparea > div.cont {
		display: block !important;
		overflow: hidden !important;
		width: auto !important;
		height: 160px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.area1 div.pickuparea > div.cont:nth-of-type(2) {
		flex: 1 1 0;
		min-width: 0;
	}
	.area1 div.pickuparea > div.cont:nth-of-type(3) {
		flex: 0 0 100%;
	}
	.area1 div.pickuparea > div.cont iframe {
		display: block;
		width: 100% !important;
		height: 160px !important;
		margin: 0 !important;
		border: 0;
	}

	/* 13. トップ（11版目）: 「お気に入りのコーディネートを探す」の箱（td.rightarea）を、リンク集（td.leftarea）の上に出す。
	 *     table.toppage は tr が1つで、2つの td は兄弟（s28b）。7. で tr を display: block にしているので、
	 *     それより強いセレクターで tr を縦の flex にして、rightarea を前に出す。トップ（body.home）だけ */
	body.home table.toppage > tbody > tr {
		display: flex;
		flex-direction: column;
	}
	body.home table.toppage > tbody > tr > td.rightarea {
		order: -1;
		margin-bottom: 16px;
	}

	/* 14. トップ（12版目）: リンク集の幅をそろえる。商品検索の form と、バナー・枠付きの箱の表（s28d2 の td.leftarea の中身）を、
	 *     同じ幅（画面の幅、最大 340px）で中央に置く。1. の #main table・#main form の max-width: 100% !important に勝つよう #main から書く。
	 *     中の画像は 7-2. の幅 100%（最大 340px）のまま */
	body.home #main table.toppage td.leftarea form,
	body.home #main table.toppage td.leftarea table.width200,
	body.home #main table.toppage td.leftarea table.conceptslink,
	body.home #main table.toppage td.leftarea table.bloglink {
		width: 100% !important;
		max-width: 340px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	/* 左の列の右の余白（style.css の table.toppage td.leftarea の margin-right: 20px !important）を外して、画面の真ん中にそろえる */
	body.home #main table.toppage td.leftarea {
		margin-right: 0 !important;
	}
	/* お問い合わせ: 親の td の style（右寄せ・右の余白 30px !important）に勝てないので、リンクをブロックにして余白の分だけ右に広げ、中央に */
	body.home #main table.toppage td.leftarea table.bloglink a[href*="/contact"] {
		display: block;
		margin-right: -30px;
		padding: 8px 0;
		text-align: center;
	}
	/* FINDS YOKOGAWA HONTEN のバナー（table.mt20。s28d2）: 7. で幅が auto になり、左に寄っていた。
	 *     表を列の幅いっぱい（table-layout: fixed で画像の元の幅に押し広げられない）にして、中の画像を中央に（画像は列の幅まで縮む） */
	body.home #main table.mt20:has(a[href*="finds-yokogawa-honten"]) {
		width: 100% !important;
		table-layout: fixed;
	}
	body.home #main table.mt20:has(a[href*="finds-yokogawa-honten"]) td {
		text-align: center !important;
	}
	body.home #main table.mt20 a[href*="finds-yokogawa-honten"] img {
		display: block;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
	}

	/* 15. トップ（13版目）: コーディネートの箱（td.rightarea）の左の余白を外す。style.css の table.toppage td.rightarea の
	 *     padding-left: 18px!important（PC で左の列との間の空き）が、7. の table.toppage > tbody > tr > td（弱いセレクター）に勝っていた（s28f） */
	body.home #main table.toppage td.rightarea {
		padding-left: 0 !important;
	}

	/* 16. Contact Form 7 のフォーム（14版目）: 入力欄の幅は、フォームの設定の桁数（size・cols）で決まるので、列の幅を超えないようにする（s29d）。
	 *     1. の #main の max-width は div などにだけ当たり、input・textarea には当たっていなかった */
	#main .wpcf7-form input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
	#main .wpcf7-form textarea,
	#main .wpcf7-form select {
		max-width: 100% !important;
		box-sizing: border-box;
	}
}