/*
Theme Name: Sanzendo Frame
Theme URI: https://www.3010shop.com/
Author: Sanzendo
Description: 三善堂オンラインショップの3カラムフレーム(ヘッダー・左サイドバー・右サイドバー・フッター)をWordPress用に移植したテーマです。中央カラムには page-3column.php テンプレートまたは archive.php 等から任意のコンテンツを差し込んでください。
Version: 1.0
Text Domain: sanzendo-frame
*/

/* =========================================================
   共通変数(元サイトのCSSから抽出した配色・寸法)
   ========================================================= */
:root{
	--container-width: 1100px;
	--col-left-width: 180px;
	--col-center-width: 720px;
	--col-right-width: 160px;

	--color-text: #333;
	--color-link: #936B37;
	--color-accent-gold: #E2CB84;
	--color-accent-gold-dark: #785B2D;
	--color-accent-brown: #AB7E41;
	--color-header-bg: #F4F0EA;
	--color-header-border: #d0a0a0;
	--color-panel-border: #E9DED8;
	--color-panel-bg-alt: #F1E6DC;
	--color-footer-bg: #F4F0EA;
	--color-price-red: #FF0000;

	--font-base: "Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

body{
	font-family: var(--font-base);
	font-size: 14px;
	color: var(--color-text);
	background:#fff;
}

a{ color: var(--color-link); text-decoration: underline; }
a:hover{ text-decoration: none; }
img{ border:0; max-width:100%; height:auto; }
ul{ list-style:none; }

.clearfix::after{ content:""; display:table; clear:both; }

/* =========================================================
   ヘッダー上段:ロゴ・検索・ツールバー(.g-tool)
   ========================================================= */
.header__section{
	background:#F4F0EA;
	border-bottom:3px solid #d0a0a0;
	padding:4px 0;
	/* スクロールしても常に画面上部に表示され続けるようにする
	   (元サイトはJSで .fixed クラスを付け外ししていましたが、
	   同じ見た目を position:sticky だけでJS無しに再現しています) */
	position:sticky;
	top:0;
	z-index:10001;
}
.g-tool{
	width: var(--container-width);
	margin: 0 auto;
	padding-bottom: 5px;
}
.gtool-logo{ float:left; padding-right:5px; }

.header-search{
	position:relative;
	float:left;
	padding-top:8px;
}
.header-search__box{
	min-width:150px;
	padding:4px 6px 4px 10px;
	border:1px solid #e5e5e5;
	color:#333;
	font-size:0.8rem;
}
.header-search__box2{
	min-width:130px;
	padding:3px;
	border:1px solid #e5e5e5;
	color:#333;
	font-size:0.8rem;
}
.header-search input[type="submit"]{
	padding:4px 10px;
	border:1px solid var(--color-accent-gold-dark);
	background:#fff;
	cursor:pointer;
}

.header-tools{
	float:right;
	padding-top:12px;
	text-align:right;
}
.header-tools__unit,
.header-gnavi__unit{
	display:inline;
	margin-left:20px;
	line-height:1.4;
	font-size:0.85rem;
	position:relative;
}
.header-tools__unit a,
.header-gnavi__link{ text-decoration:none; }
.header-tools__btn{
	padding:4px 14px;
	background:#c0392b;
	color:#fff;
	text-decoration:none;
	border-radius:3px;
}
.header-tools__count{ font-weight:bold; padding:0 3px; }

/* .g-tool内の「カテゴリー」テキストドロップダウン(mega-navi) */
.mega-navi{
	display:none;
	position:absolute;
	top:100%;
	right:0;
	width:220px;
	padding:10px;
	background:#fff;
	border:1px solid var(--color-header-border);
	box-shadow:0 8px 20px rgba(0,0,0,.12);
	z-index:600;
	text-align:left;
}
.header-gnavi__unit:hover .mega-navi{ display:block; }
.mega-navi__unit{ padding:4px 0; }
.mega-navi__link{ display:block; padding:4px 8px; color: var(--color-accent-brown); text-decoration:none; }
.mega-navi__link:hover{ background:#F1E6DC; }

/* =========================================================
   モバイル用ハンバーガーボタン + ドロワーメニュー
   デスクトップでは非表示。画面幅900px以下で .mobile-menu-toggle が
   表示され、タップすると右からドロワーがスライドインします。
   ========================================================= */
.mobile-menu-toggle{
	display:flex; /* header-tools__unit-menu側をdisplay:noneにしているため、ここは常時flexで良い */
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	padding:0;
	border:none;
	background:transparent;
	color: var(--color-accent-gold-dark);
	font-size:1.2rem;
	cursor:pointer;
}
.header-tools__unit-menu{
	display:none; /* 900px以下でのみ表示(@media側で上書き) */
}

.mobile-drawer-overlay{
	display:none;
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.5);
	z-index:20000;
	opacity:0;
	transition:opacity .25s ease;
}
.mobile-drawer-overlay.is-open{
	display:block;
	opacity:1;
}

.mobile-drawer{
	position:fixed;
	top:0;
	right:0;
	width:86%;
	max-width:380px;
	height:100%;
	background:#fff;
	z-index:20001;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	transform:translateX(100%);
	transition:transform .3s ease;
	box-shadow:-6px 0 24px rgba(0,0,0,.2);
}
.mobile-drawer.is-open{
	transform:translateX(0);
}

.mobile-drawer__close{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:12px 12px 0 auto;
	width:40px;
	height:40px;
	border:none;
	background:transparent;
	font-size:1.3rem;
	color:#333;
	cursor:pointer;
}

.mobile-drawer__nav{ padding:0 0 30px; }

.mobile-drawer__home{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:18px 24px;
	margin-top:6px;
	border-top:1px solid var(--color-panel-border);
	border-bottom:1px solid var(--color-panel-border);
	color:#333;
	text-decoration:none;
	font-size:1.05rem;
}
.mobile-drawer__home i.fa-home{ margin-right:10px; color: var(--color-accent-gold-dark); }

.mobile-drawer__accordion-toggle{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	padding:18px 24px;
	border:none;
	border-bottom:1px solid var(--color-panel-border);
	background:#fff;
	font-size:1.05rem;
	color:#333;
	text-align:left;
	cursor:pointer;
}
.mobile-drawer__accordion-toggle i:first-child,
.mobile-drawer__accordion-toggle span i{ margin-right:10px; color: var(--color-accent-gold-dark); }

.mobile-drawer__accordion-panel{
	padding:6px 24px 10px;
}
.mobile-drawer__accordion-panel[hidden]{ display:none; }

.mobile-drawer__list li{
	border-bottom:1px solid var(--color-panel-border);
}
.mobile-drawer__list li:last-child{ border-bottom:none; }
.mobile-drawer__list a{
	display:block;
	padding:14px 6px;
	color: var(--color-accent-brown);
	text-decoration:none;
	font-size:1rem;
}
.mobile-drawer__list a:hover{ color: var(--color-accent-gold-dark); }

.mobile-drawer__search{
	display:flex;
	gap:8px;
	padding:8px 0 16px;
}
.mobile-drawer__search input[type="text"]{
	flex:1;
	padding:10px 12px;
	border:1px solid var(--color-panel-border);
	font-size:0.95rem;
}
.mobile-drawer__search button{
	padding:0 16px;
	border:none;
	background: var(--color-accent-gold-dark);
	color:#fff;
	cursor:pointer;
}

/* =========================================================
   ヘッダー中段:ロゴ・電話番号・キャッチコピー(.header_unit)
   ========================================================= */
.header_unit{
	width:100%;
	background:#fff;
	margin-bottom:20px;
}
.header{
	width: var(--container-width);
	margin:0 auto;
	padding:10px 0;
}
.header-logo{ float:left; }
.header-info{ float:right; text-align:right; }
.header-info .tel-link img,
.header-info .tel-link{ display:inline-block; }
.site-description{
	color:#926B37;
	font-size:0.85rem;
	line-height:1.5;
	margin-top:10px;
	max-width:640px;
}

/* =========================================================
   グローバルナビ(画像メニュー) #headergNavi / #menu
   元サイトの gnavi0X-h.jpg 等をそのままホットリンクして再現しています。
   位置・背景色・余白の数値は元サイトの index.css の実測値に合わせています。
   ========================================================= */
#headergNavi{
	width:100%;
	height:45px;
	margin:0 auto 10px;
	background: var(--color-header-bg) url("https://www.3010.co.jp/colorme/gnavi/g_navi_bg.gif") repeat-x left top;
}
#menu,
#menu ul{ margin:0; padding:0; list-style:none; }
#menu{
	width: var(--container-width);
	height:45px;
	position:relative; /* サブメニューの絶対配置の基準はここ(#menu)であり、各liではない */
	background-color:#ac5a5a;
	margin:0 auto;
	z-index:800;
	/* floatではなくflexで並べ、画面が狭くボタンの合計幅(181px×6)に収まらない
	   場合は、折り返さずボタン自体を縮めて1行に収めます。
	   ※ overflow-x:auto で横スクロールさせる方法も検討しましたが、その場合
	   CSSの仕様上 overflow-y も自動的に auto 扱いになり、下に表示される
	   サブメニュー(45pxの外に飛び出す部分)まで隠れてしまうため採用していません。 */
	display:flex;
	flex-wrap:nowrap;
}
#menu > li{
	list-style:none;
	flex:1 1 0; /* 画面が狭い時は縮んで1行に収まるようにする */
	min-width:0; /* flexアイテムが内容物のサイズより縮めるようにする */
	max-width:181px; /* 広い画面では元サイトと同じ181pxを上限にする */
	width:181px;
	height:45px;
	margin-left:2px;
	/* 固定サイズ(上限)にしておくことで、ホバー時の見た目変化があっても
	   1個あたりの幅が不用意に伸び縮みしすぎないようにしています。
	   (元サイトも .menu01〜.menu07 クラスで width:181px; height:45px; を固定していました) */
}
#menu .menu01_sub li{
	/* サブメニュー内の画像はサイズが項目ごとに異なるため、ここでは固定幅にしない */
	width:auto;
	height:auto;
}
#menu > li > a{
	display:block;
	width:100%;
	height:100%;
	position:relative; /* ホバー時に重ねる赤レイヤー(::after)の基準位置 */
	overflow:hidden; /* a要素だけに範囲を絞った安全策(liに付けるとサブメニューまで隠れてしまうため) */
}
#menu > li > a > img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain; /* liが縮んだ画面幅でも、画像がつぶれず縦横比を保ったまま縮小する */
}
#menu > li > a::after{
	content:"";
	position:absolute;
	inset:0;
	background-color:rgba(218,180,180,0.55); /* #dab4b4(サブメニューの背景色)と揃えています */
	opacity:0;
	transition:opacity .15s ease;
	pointer-events:none; /* レイヤーがクリック・ホバー判定を邪魔しないように */
}
#menu > li > a:hover::after{
	/* 画像を加工するのではなく、下に表示されるサブメニューと同じ色の
	   半透明レイヤーを上から重ねることで、色の一体感を出しています。 */
	opacity:1;
}

/* サブメニュー(カテゴリ小分類の画像一覧):ホバーで表示
   元サイトでは #menu(position:relative)を基準に、常に left:0・幅100%で
   展開される仕様のため、どのボタンをホバーしても同じ位置(#menuの左端)に出ます。 */
#menu .menu01_sub{
	display:none;
	position:absolute;
	top:100%; /* #menuの実高さに関わらず、常にその下端にぴったり接するように */
	left:0;
	width:100%;
	padding:8px 0 0;
	background-color:#dab4b4;
	z-index:900;
}
#menu li:hover .menu01_sub{ display:flex; flex-wrap:wrap; }
#menu .menu01_sub li{
	margin:0 0 15px 11px;
}
#menu .menu01_sub li a{
	display:block;
	border:5px solid #fff;
}
#menu .menu01_sub li a img{ display:block; }
#menu .menu01_sub li a:hover{
	border-color:#aa4747;
}

/* =========================================================
   お知らせバナー・スライダーエリア
   ========================================================= */
.headbannerarea{ width:100%; margin-bottom:10px; }
.headbannerarea img{ width:100%; display:block; }

/* =========================================================
   パンくずリスト
   ========================================================= */
#breadcrumb{
	width:100%;
	background:#faf8f4;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	padding:8px 0;
	margin-bottom:15px;
	font-size:0.85rem;
}
#breadcrumb .inner{ width: var(--container-width); margin:0 auto; }

/* =========================================================
   3カラム本体 .main_cntns > .wrapper > ( .col-left / .col-center / .col-right )
   flexboxで並べているため、モバイル時は order プロパティで
   表示順を「メイン→左サイド→右サイド」に並び替えられます。
   ========================================================= */
.main_cntns{
	width: var(--container-width);
	margin:0 auto;
}

.wrapper{
	display:flex;
	align-items:flex-start;
}

/* 左カラム(カテゴリツリー) 180px */
.col-left{
	width: var(--col-left-width);
	padding-right:20px;
	order:1;
}

/* 中央カラム 720px */
.col-center{
	width: var(--col-center-width);
	order:2;
	min-width:0; /* flexアイテムが内容物(画像など)で幅がはみ出さないように */
}

/* 右カラム 160px */
.col-right{
	width: var(--col-right-width);
	padding-left:20px;
	order:3;
}

/* =========================================================
   左カラム:カテゴリツリー ウィジェット共通見出し
   ========================================================= */
.ttl-side{
	display:block;
	padding:8px;
	margin-bottom:8px;
	border:2px solid var(--color-accent-gold);
	border-radius:3px;
	background: linear-gradient(#efe0a6, #efe0a6 50%, #e2cb84 50%, #e3cd87);
	font-weight:bold;
	color: var(--color-accent-gold-dark);
}

.col-left h3{ margin:20px 0 8px; }
.col-left h3 img{ display:block; }

.cat_child01,
.cat_child05{
	margin-bottom:20px;
}
.cat_child01 li{
	border-bottom:dotted 1px #c0c0c0;
}
.cat_child01 li a{
	display:flex;
	align-items:center;
	gap:8px;
	padding:5px;
	color: var(--color-accent-brown);
	text-decoration:none;
}
.cat_child01 li a:hover{ background:#F1E6DC; }
.cat_child01 li img{ width:30%; }

.cat_child02{ margin-bottom:20px; }
.cat_child02 li{
	display:flex;
	align-items:center;
	gap:8px;
	width:180px;
	min-height:35px;
	padding:4px 0;
}
.cat_child02 li img{ width:16px; flex-shrink:0; }
.cat_child02 li a{ color: var(--color-accent-brown); text-decoration:none; }
.cat_child02 li a:hover{ text-decoration:underline; }

.cat_child03{ margin-bottom:20px; }
.cat_child03 li{ border-bottom:dotted 1px #c0c0c0; }
.cat_child03 li a{
	display:flex;
	align-items:center;
	gap:8px;
	padding:5px;
	color: var(--color-accent-brown);
	text-decoration:none;
}
.cat_child03 li a:hover{ background:#F1E6DC; }
.cat_child03 li img{ width:30%; flex-shrink:0; }
.cat_child03 li span{ width:65%; font-size:0.85rem; line-height:1.4; }

.cat_child06{ margin-bottom:20px; }
.cat_child06 li{ width:180px; margin-bottom:8px; }
.cat_child06 a{
	display:block;
	padding:2px 0 2px 22px;
	color: var(--color-accent-brown);
	text-decoration:none;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4" fill="%23AB7E41"/></svg>') no-repeat left center;
}
.cat_child06 a:hover{ text-decoration:underline; }

.cat_child05 li{ margin-bottom:10px; }
.cat_child05 li a{
	display:block;
	padding:2px 0 2px 20px;
	color: var(--color-accent-brown);
	text-decoration:none;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10"><polygon points="0,0 6,5 0,10" fill="%23AB7E41"/></svg>') no-repeat left center;
}

.side_banner{
	border-bottom:2px dashed var(--color-panel-border);
	padding-bottom:5px;
	margin-bottom:15px;
}
.side_banner a{ display:block; margin-bottom:10px; }

.sidebar-cart{
	background:#fff;
	border:1px solid var(--color-panel-border);
	padding:8px 10px;
	font-size:0.9rem;
	margin-bottom:20px;
}

/* =========================================================
   中央カラム:ページタイトル・サブカテゴリ・商品一覧
   ========================================================= */
.cg_mainimg{
	background:#E5D18A;
	padding:10px;
	margin-bottom:20px;
}
.cg_mainimg .inner{
	background:linear-gradient(to bottom right,#DEC376,#ECDDAA);
	padding:10px;
	display:flex;
	gap:20px;
	align-items:center;
}
.cg_mainimg img{ width:200px; flex-shrink:0; }
.cg_mainimg p{ font-size:0.95rem; line-height:1.6; }

.ttl-common{
	display:block;
	padding:10px 16px;
	margin-bottom:15px;
	border:2px solid var(--color-accent-gold);
	border-radius:3px;
	background: linear-gradient(#efe0a6, #efe0a6 50%, #e2cb84 50%, #e3cd87);
	font-size:1.2rem;
	font-weight:bold;
	color: var(--color-accent-gold-dark);
}

.mainbox{
	background:#fff;
	border:1px solid var(--color-panel-border);
	padding:20px;
	margin-bottom:20px;
}

.subcg_list{ display:flex; flex-wrap:wrap; gap:8px; }
.subcg_list div{ width:90px; text-align:center; }
.subcg_list img{ width:90px; margin-bottom:5px; }
.subcg_list p{
	background: var(--color-panel-bg-alt);
	padding:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:50px;
}
.subcg_list p a{ color: var(--color-price-red); }

.sort_area{ text-align:right; padding:10px 0 5px; font-size:0.85rem; }

.product_list{
	display:flex;
	flex-wrap:wrap;
	gap:0 25px;
	margin-bottom:10px;
}
.product_list li{
	width:210px;
	text-align:center;
	margin-bottom:20px;
}
.pd_imgbox{
	width:210px;
	height:280px;
	overflow:hidden;
	display:flex;
	align-items:center;
	margin-bottom:10px;
}
.pd_imgbox img{ width:210px; transition:transform .6s; }
.pd_imgbox img:hover{ transform:scale(1.15); }

.p_title{
	background: var(--color-panel-bg-alt);
	padding:8px;
	min-height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:6px;
}
.p_title a{ color: var(--color-accent-brown); text-decoration:none; }

.regular span,
.price{
	font-size:1.15rem;
	font-weight:bold;
	color: var(--color-price-red);
	display:block;
	padding:6px 0;
}
.soldout{
	font-size:1.1rem;
	font-weight:bold;
	color: var(--color-accent-gold-dark);
	padding:6px 0;
}
.exp{ text-align:left; font-size:0.85rem; line-height:1.7; }

.dotline{
	border-top:1px dotted #ECDDAA;
	height:0;
	margin:10px 0 20px;
}

.page_navi{ text-align:center; margin:20px 0; }
.page_navi a,
.page_navi span{
	display:inline-block;
	padding:5px 10px;
	margin:2px;
	background:#fff;
	border:1px solid var(--color-panel-border);
	text-decoration:none;
}
.page_navi a{ background: var(--color-panel-bg-alt); color: var(--color-price-red); }
.page_navi a:hover{ background: var(--color-accent-gold); color:#fff; }

/* =========================================================
   フッター
   ========================================================= */
#footer{
	padding-top:30px;
	background: var(--color-footer-bg);
}

#infomation{
	width: var(--container-width);
	margin:0 auto;
}

#middlewrap{
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	justify-content:space-between;
	margin-bottom:20px;
}

#middlewrapLeft{ flex:1 1 620px; }
#middlewrapRight{ flex:1 1 420px; }

#haisou,
#shiharai,
#kaisha{
	background:#fff;
	border:1px solid #ccc;
	padding:18px;
	margin-bottom:20px;
}

.f-title01{
	color:#673e3e;
	font-size:1.1rem;
	font-weight:600;
	border-bottom:2px solid var(--color-accent-gold);
	padding-bottom:8px;
	margin-bottom:12px;
}

#haisouleft,
#shiharaileft{ float:left; width:calc(100% - 200px); }
#haisouright,
#shiharairight{ float:right; width:180px; text-align:center; }
#haisou::after,
#shiharai::after,
#kaisha::after{ content:""; display:table; clear:both; }

.haisouDes,
.shiharaiDes{ margin-bottom:10px; line-height:1.7; font-size:0.85rem; }
.fontRed{ color:#e00; font-weight:bold; }

.haisougazou01,
.haisougazou02,
.shiharaigazou01{ margin-bottom:10px; }
.kochiraButton,
.kochiraButton01{ margin-top:10px; }

.kaishaDes{ margin-bottom:12px; line-height:1.7; font-size:0.85rem; }
#kaishaleft{ float:left; width:calc(100% - 150px); }
#kaisharight{ float:right; width:135px; text-align:center; }
#kaishaContact{ clear:both; padding-top:15px; text-align:center; }
#kaishaContact .shopmap{ margin-bottom:10px; }
#kaishaContact .shopmap img{ max-width:100%; height:auto; }

.colophon{
	max-width:1060px;
	margin:20px auto;
	padding:25px 20px;
	border:1px solid #DFD7BD;
	background:#fff;
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	justify-content:space-between;
}
.colophon .site-info img{ max-width:100%; height:auto; }
.colophon .shop-info ul{ display:flex; flex-wrap:wrap; gap:20px; }
.colophon .shop-info ul li{ width:180px; }
.colophon .shop-info ul li img{ width:100%; }
.colophon .shop-info dt{ color:#BB8C4D; font-weight:bold; }
.colophon .shop-info dd{ font-size:0.85rem; color:#655245; line-height:1.4; }

.fotter_text{ text-align:center; padding:20px 0; font-size:0.85rem; }
.fotter_text a{ margin:0 6px; }


/* =========================================================
   フローティングボタン(カート・トップへ戻る)
   ========================================================= */
.side_goto_cart,
.side_goto_top{
	position:fixed;
	right:10px;
	z-index:999;
}
.side_goto_cart{ bottom:70px; }
.side_goto_top{ bottom:15px; }
.side_goto_cart img,
.side_goto_top img{ width:60px; }

/* =========================================================
   レスポンシブ(簡易)
   ========================================================= */
@media (max-width: 1140px){
	:root{ --container-width: 100%; }
	.main_cntns, .g-tool, .header, #headergNavi .menu, #infomation, #breadcrumb .inner{
		width:100%;
		padding-left:10px;
		padding-right:10px;
	}
}

@media (max-width: 900px){

	/* ---- 3カラムの並び替え:左サイドバーはモバイルでは非表示にし、メイン→右サイドの順に ---- */
	.wrapper{
		flex-direction:column;
	}
	.col-left{
		display:none;
	}
	.col-center,
	.col-right{
		width:100%;
		padding:0;
	}
	.col-center{ order:1; }
	.col-right{ order:2; margin-top:20px; }

	/* ---- ヘッダー:ロゴ・電話番号を横一杯に ---- */
	.header-logo,
	.header-info{
		float:none;
		width:100%;
		text-align:center;
	}
	.header-info{ margin-top:10px; }
	.site-description{
		width:100%;
		text-align:center;
	}
	.g-tool{ text-align:center; }
	.gtool-logo{ float:none; display:inline-block; margin-bottom:8px; }
	.header-search{
		float:none;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		width:100%;
	}
	.header-tools{ float:none; text-align:center; padding-top:6px; }

	/* ---- グローバルメニュー:画像ボタンのナビは非表示にし、ハンバーガー+ドロワーメニューに置き換える ---- */
	#headergNavi{ display:none; }
	.header-gnavi__unit{ display:none; } /* g-tool内の「カテゴリー」テキストドロップダウンもドロワーに統合するため非表示 */
	.header-tools__unit-menu{ display:inline-block; }

	.cg_mainimg .inner{ flex-direction:column; }
	#haisouleft, #haisouright, #shiharaileft, #shiharairight, #kaishaleft, #kaisharight{ float:none; width:100%; text-align:left; }

	/* ---- バナー類を横並びにする ---- */
	.side_banner{
		display:flex;
		flex-wrap:wrap;
		gap:10px;
	}
	.side_banner a{
		flex:1 1 calc(50% - 5px);
		margin-bottom:0;
	}
}