/* ============================================================
 * CSS-BUILD: 2026-08-12-k
 *   ★このファイルを編集したら、上の番号（日付＋連番）も必ず上げること。★
 *   imgtest.php がこの文字列を探し、サーバ上のCSSが新しいかを判定する。
 *   （URLの ?v= は filemtime なので手動更新は不要。これは「中身の版」の目印）
 * ============================================================ */
@charset "utf-8";
/* CSS Document */
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #e53747;
  opacity: 0.7;
  z-index:1000;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
@media screen and (max-width : 639px ){
#page_top{
  width: 50px;
  height: 50px;
}
#page_top a{
  width: 50px;
  height: 50px;
}
#page_top a::before{
  font-size: 23px;
  top: -20px;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 10px;
  top: 25px;
}
}
#archive {
	max-width:1280px !important;
	margin:auto;
}
.noscript {
	width:960px;
	margin:auto;
	border:1px solid #F00;
	padding:5px 10px;
	font-weight:bold;
}
.goods {
	text-align:center;
    letter-spacing: -.4em;
}
.goods:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.goods_box .sort {
	background:#eee;
	padding:10px 10px;
	margin:0 auto 20px;
	text-align:center;
	max-width:1200px;
}
.goods_box .sort div {
	display:inline-block;
	padding:0 10px;
}
.goods_box .sort h2 {
	font-size:18px;
	margin:0 0 5px;
}
.goods_box .sort div.title {
	font-weight:bold;
}
.goods_box .sort a {
	color:#e53747;
}
.goods li {
    letter-spacing: 0em;
	width:253px;
	float:left;
	vertical-align:top;
	border:1px solid #ddd;
	padding:5px;
	border-collapse: collapse;
	margin: 0 -1px -1px 0;
	z-index:1;
	position:relative;
	padding:5px 0;
}
@media screen and (max-width: 828px) {
.goods li {
    letter-spacing: 0em;
	width:33%;
	float:left;
	vertical-align:top;
	border:1px solid #ddd;
	padding:5px 1%;
	border-collapse: collapse;
	margin: 0 -1px -1px 0;
	z-index:1;
	position:relative;
	padding:5px 0;
}
}
.goods li a {
	display:block;
}
.goods li:hover {
	border:1px solid #e53747;
	z-index:10;
}
.goods li .company_name {
	font-size:15px;
	line-height:16px;
	font-weight:bold;
	text-align:center;
}
.goods li .product_name {
	font-size:12px;
	margin-top:5px;
	text-align:center;
}
@media screen and (max-width : 639px ){
.goods li .company_name {
	font-size:13px;
}
.goods li .product_name {
	font-size:11px;
}
}
/* ★2026-08-12★ 2025年版は min-width:641px だったが、スマホ側が max-width:639px のため
   「640px ちょうど」だけどちらの指定も当たらず、.pic の高さ指定が消えていた
   （実測: .pic が 211x0 に潰れ、中の画像が枠外へ170pxはみ出す）。
   639px の裏返しである 640px にそろえて隙間を塞ぐ。値以外は2025年版のまま。 */
@media screen and (min-width: 640px) {
.goods li .pic {
	max-width:150px;
	margin:0 auto 10px;
	text-align:center;
	min-height:180px;
}
}
.goods li .pic {
	position:relative;
}
@media screen and (max-width : 639px ){
.goods li .pic {
	min-height:130px;
	margin:0 10px 10px;
}
}
.goods li .pic img {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
	max-width:100%;
	width:auto;
	max-height:170px;
	height:auto;
}
@media screen and (max-width : 639px ){
.goods li .pic img {
	max-height:130px;
}
}
.movie {
	display:none;
}
.serach {
	max-width:1200px;
	margin:20px auto 40px;
	background:#eee;
	padding:10px;
}
.serach h2 {
	font-size:20px;
	color:#333;
	margin:0;
}
.serach dl {
	margin:10px auto 20px;
	max-width:950px;
}
.serach dl dt {
	font-weight:bold;
	display:inline-block;
	padding:10px;
	vertical-align:middle;
}
.serach dl dd {
	display:inline-block;
	vertical-align:middle;
}
.serach dl select {
	line-height:40px;
	width:150px;
}
.serach label {
	display:inline-block;
	margin-right:20px;
}
.serach .keyword {
	display:inline-block;
	line-height:35px;
	height:35px;
	border:1px solid #B3B3B3;
	padding-left:10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	width:400px;
}
@media screen and (max-width : 639px ){
.serach .keyword {
	width:90%;
}
}
.serach p {
	font-size:12px;
	line-height:20px;
}
#send {
	border:none;
	cursor:pointer;
	text-align:center;
	display:block;
	width:250px;
	margin:20px auto 10px;
	background:#e53747;
	padding:10px 0;
	color:#fff;
	font-size:16px;
	font-weight:bold;
}
#send:hover {
	text-decoration:underline;
}
/*detail*/
#detail {
	max-width:1000px;
	margin:auto;
}
.company_pr {
	text-align:center;
	padding:0 10px;
	max-width:1000px;
	margin:auto;
}
.item_pic li {
	background:#F2F2F2;
	padding: 15px;
	box-sizing: border-box;
	margin: 20px 0;
}
.item_pic li .pic {
	float: left;
	position: relative;
	width: 26%;
	height: 165px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.item_pic li .pic img {
	max-width: 100%;
	max-height: 100%;
}
.item_pic li a {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: rgba(255,255,255,0.6);
}
.item_pic li a i {
	font-size: 40px;	
}
.item_pic li:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.item_pic li .infomation {
	float: left;
	margin-left: 10px;
	width: 72%;
}
.item_pic li .infomation .item_name {
	font-weight: bold;
	font-size: 20px;
	margin: 0 0 10px;
	padding: 0;
	line-height: 20px;
}
.company_info table {
	max-width:1000px;
	width:98%;
	margin:auto;
}
.company_info table th {
	width:25%;
	padding:20px 0;
	font-weight:bold;
	border:1px solid #ccc;
	text-align:center;
}
.company_info table td {
	padding:20px 2%;
	font-weight:bold;
	border:1px solid #ccc;
	font-weight:normal;
}
@media screen and (max-width: 480px) {
.item_pic li .pic {
	float: none;
	margin: 0 auto 10px;
	width: 95%;
	height: 180px;
}
.item_pic li .infomation h3 {
	font-size: 16px;	
}
.item_pic li p {
	font-size: 14px;
}
}
.company_info table {
	max-width:1000px;
	width:98%;
	margin:auto;
}
.company_info table th {
	width:30%;
	padding:20px 0;
	font-weight:bold;
	border:1px solid #ccc;
	text-align:center;
}
.company_info table td {
	width:64%;
	padding:20px 2%;
	font-weight:bold;
	border:1px solid #ccc;
	font-weight:normal;
}
.button {
	text-align:center;
}
.button li {
	margin:0 20px;
	display:inline-block;
	width:250px;
}
#send_head {
	border:none;
	cursor:pointer;
	text-align:center;
	display:block;
	width:160px;
	margin:20px 0 10px auto;
	background:#e53747;
	padding:10px 0;
	color:#fff;
	font-size:12px;
	font-weight:bold;
}
#send_head:hover {
	text-decoration:underline;
}
#back {
	border:none;
	cursor:pointer;
	text-align:center;
	display:block;
	width:250px;
	margin:20px auto 10px;
	background:#f7931e;
	padding:10px 0;
	color:#fff;
	font-size:16px;
	font-weight:bold;
}
#back:hover {
	text-decoration:underline;
}

/*==================================================================
  2026 追加分：絞り込みUI / 小間番号 / 件数表示
  ・ブレークポイントは既存に合わせて 639px を使用（新設しない）
  ・配色は既存の基調（#e53747 / #eee / #333）を踏襲
==================================================================*/

/* ---- 絞り込みアコーディオン ---- */
/* 既定は「開」。JSがモバイル幅かつ条件未適用のときだけ .is-collapsed を付けて閉じる。
   → JS無効なら開いたままになり、絞り込みは常に使える。 */
.serach_toggle {
	display: none;              /* PCではトグル自体を出さない（常時開） */
	width: 100%;
	box-sizing: border-box;
	background: #e53747;
	color: #fff;
	border: none;
	text-align: left;
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	padding: 14px 12px;
	cursor: pointer;
	position: relative;
	border-radius: 4px;
}
.serach_badge {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	background: #fff;
	color: #e53747;
	border-radius: 10px;
	padding: 1px 8px;
	vertical-align: middle;
}
/* 開閉インジケータ（▼／▲） */
.serach_toggle_icon {
	position: absolute;
	right: 14px;
	top: 50%;
	margin-top: -3px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid #fff;
}
.serach.is-collapsed .serach_toggle_icon {
	border-top: none;
	border-bottom: 7px solid #fff;
	margin-top: -4px;
}
.serach.is-collapsed .serach_body { display: none; }

/* ---- 選択肢のグリッド化（タップ領域確保） ---- */
.opt_grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.opt_grid li { margin: 0; }
.opt_grid label {
	display: flex;
	align-items: center;
	min-height: 44px;          /* 指で押せる高さを確保 */
	box-sizing: border-box;
	padding: 6px 10px;
	margin: 0 6px 6px 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}
.opt_grid label:hover { border-color: #e53747; }
.opt_grid input { margin-right: 6px; }
/* チェック済みを見た目でも分かるようにする */
.opt_grid input:checked + span { font-weight: bold; color: #e53747; }
.opt_note {
	font-size: 12px;
	line-height: 18px;
	color: #666;
	margin: 4px 0 0;
}

/* ---- 適用中の条件（チップ） ---- */
.active_filters {
	max-width: 1200px;
	margin: 20px auto 0;
	padding: 10px;
	background: #fff6f7;
	border: 1px solid #f0c2c6;
	border-radius: 4px;
}
.active_filters_title {
	font-weight: bold;
	font-size: 14px;
	color: #e53747;
	margin-right: 6px;
}
.active_filters ul {
	display: inline-flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
.active_filters li {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #e53747;
	border-radius: 14px;
	margin: 3px 6px 3px 0;
	overflow: hidden;
}
.chip_label { font-size: 13px; padding: 4px 4px 4px 10px; }
.chip_x {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	min-height: 30px;
	color: #e53747;
	font-weight: bold;
	text-decoration: none;
}
.chip_x:hover { background: #e53747; color: #fff; }
.filter_clear {
	display: inline-block;
	font-size: 13px;
	color: #333;
	text-decoration: underline;
	margin-left: 4px;
	padding: 6px 0;
}

/* ---- 件数表示 ---- */
.result_count {
	max-width: 1200px;
	margin: 14px auto 0;
	font-size: 15px;
	font-weight: bold;
}
.result_count strong { font-size: 20px; color: #e53747; }
.result_sub { font-weight: normal; font-size: 13px; color: #666; margin-left: 6px; }

/* ---- 0件時 ---- */
.goods li.no_result {
	width: 100%;
	float: none;
	border: none;
	text-align: center;
	padding: 30px 10px;
	letter-spacing: 0 !important;
}
.no_result_title { font-size: 16px; font-weight: bold; margin-bottom: 8px; }
.no_result_note { font-size: 13px; color: #666; }

/* ---- カードの小間番号 ---- */
.goods li .koma_numb {
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background: #7d8288;
	border-radius: 3px;
	padding: 2px 8px;
	margin: 6px 0 2px;
	line-height: 1.5;
	white-space: nowrap;   /* 4-38/39 等を途中で折り返さない */
}

/* ==================== モバイル（既存の 639px に合わせる） ==================== */
@media screen and (max-width: 639px) {
	.serach_toggle { display: block; }   /* モバイルのみトグルを表示 */
	.serach { padding: 8px; margin: 12px auto 20px; }
	.serach_body { padding-top: 8px; }
	/* dt/dd を縦積みにして横詰まりを解消 */
	.serach dl { margin: 0 0 14px; }
	.serach dl dt { display: block; padding: 6px 0; font-size: 14px; }
	.serach dl dd { display: block; }
	.serach dl select { width: 100%; line-height: 44px; height: 44px; }
	/* カテゴリは2列 */
	.opt_grid_cate li { width: 50%; }
	/* 五十音は5列 */
	.opt_grid_kana li { width: 20%; }
	.opt_grid label { margin: 0 4px 4px 0; padding: 6px; font-size: 14px; }
	.serach .keyword { width: 100%; box-sizing: border-box; height: 44px; line-height: 44px; }
	/* ボタンを押しやすく（sticky は sidr と干渉するため使わない） */
	#send { width: 100%; padding: 14px 0; font-size: 17px; margin: 14px auto 8px; }
	.serach .button #back {
		display: block;
		text-align: center;
		padding: 12px 0;
		font-size: 14px;
	}
	.active_filters { margin: 12px 8px 0; }
	.result_count { margin: 12px 8px 0; padding: 0; }
	.goods li .koma_numb { font-size: 11px; padding: 1px 6px; }
}

/*==================================================================
  2026-08 追加分：スマホ2列カード / 小間番号の左上配置 / 件数バー / コンテンツ幅96%
  ・ブレークポイントは既存の 639px / 828px のみ。新設しない。
  ・PC（829px以上）と 640〜828px（3列）には影響させない。
==================================================================*/

/* ---- 件数と適用中の条件を1行に（PC） ---- */
.result_bar {
	max-width: 1200px;
	/* ★2026-08 修正★ 直下の「現在の設定：小間番号順」（.goods_box .sort）が
	   margin-top:0 のため、以前は隙間が全く無かった。
	   上マージン(14px)と同じ値を下にも置いて、条件が0件のとき（件数のみ）でも自然に見せる。 */
	margin: 14px auto 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
/* 件数を先に置く。チップが折り返しても押し出されないよう縮まない設定にする */
.result_bar .result_count {
	flex: 0 0 auto;
	margin: 0 14px 0 0;
}
/* 条件チップ側は余った幅を使い、多いときだけ折り返す */
.result_bar .active_filters {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* ---- 小間番号：カード左上に絶対配置 ---- */
/* 親は .goods li（position:relative を既に持つ）。z-index は li の内側で完結させる。 */
.goods li .koma_numb {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;                 /* 画像より前面。.goods li 自体の z-index:1 の内側 */
	font-weight: normal;        /* 2026: bold をやめる */
	/* 画像に重なるため半透明にして、写真の上でも読めるようにする。
	   既存のグレー #7d8288 の色味は維持する。 */
	background: rgba(125,130,136,0.92);
	color: #fff;
	border-radius: 0 0 3px 0;   /* 角に貼り付くので右下だけ丸める */
	margin: 0;
	padding: 2px 8px;
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;        /* 5-15/16/17/18 を折り返さない */
	pointer-events: none;       /* カード全体のリンクを邪魔しない */
}

/* ==================== スマホ（既存の 639px） ==================== */
@media screen and (max-width: 639px) {

	/* ---- カードを2列に（828px指定の 33% を上書き。640〜828pxは3列のまま） ---- */
	/* ★box-sizing はここだけに入れる★
	   content-box のままだと width:50% に border(1px×2) が外側に付き、
	   2つで 100%+4px になって2列目が折り返してしまう（実測で確認）。
	   PC・タブレットは2025年版どおり content-box のままにしておく。 */
	.goods li { width: 50%; box-sizing: border-box; }
	/* 2列で画像が大きく使えるので、画像枠も少し広げる（2025年版は min-height:130px） */
	.goods li .pic { min-height: 140px; margin: 0 6px 10px; }
	.goods li .pic img { max-height: 140px; }
	.goods li .koma_numb { font-size: 11px; padding: 2px 6px; }

	/* ---- 件数バーは縦積み（チップが最大18個になり横並びだと窮屈なため） ---- */
	/* ★2026-08 修正★ スマホも上下で同じ値（12px）にそろえる。
	   チップが縦積みになるぶん、PCより1段小さい既存値を踏襲する。 */
	.result_bar { display: block; margin: 12px auto 12px; }
	.result_bar .result_count { margin: 0 0 8px; }
	.result_bar .active_filters { margin: 0; }

	/* ---- コンテンツ幅を96%に統一 ---- */
	/* ページの外枠だけを96%にし、内側のブロックは100%にする。
	   （内側も96%にすると 96%×96%=92% と二重に効いて逆に狭くなるため） */
	#archive, #detail { max-width: 96%; margin-left: auto; margin-right: auto; }
	.serach, .goods_box .sort { max-width: 100%; margin-left: 0; margin-right: 0; }
	.company_pr { padding-left: 0; padding-right: 0; max-width: 100%; }
	/* .goods は #archive の内側なので幅指定は不要 */
}

/* ==================== 極端に狭い端末（320px相当）での保険 ==================== */
/* 新しいブレークポイントは足さず、639px の中で長い語の折返しだけ担保する */
@media screen and (max-width: 639px) {
	.goods li .company_name, .goods li .product_name {
		word-break: break-word;
		overflow-wrap: anywhere;
	}
}

/* ==================== 拡大表示（fancybox）の保険 ==================== */
/* fancybox は本来ビューポートに合わせて縮小するが、
   画面が低い端末や横向きスマホで画像が画面高さを超えることがある。
   fancybox のCSSは archive.css より後に読み込まれるので、
   詳細度を1段上げて（.fancybox-container を前に付ける）確実に効かせる。 */
.fancybox-container .fancybox-slide > .fancybox-content {
	max-width: 94vw;
	max-height: 90vh;
}
.fancybox-container .fancybox-image {
	object-fit: contain;
}

/* ==================== 広告バナー（ドリンク協賛企業） 2026-08-12 追加 ====================
   ★このブロックは archive.css の末尾に追記している。既存の規則の間には入れないこと。★
   ★クラス名はすべて ad_banner で始まる独立した名前。
     .goods / .pic / .item_pic など既存のセレクタには一切触れていない。★

   【キリンのロゴが赤ベタで浮く件への対応】
     受け取った画像は3社とも無加工で使う決まりのため、画像側は触れない。
     代わりに、
       ・帯全体にごく薄いグレー(#f7f7f7)を敷く
       ・各ロゴを「白いカード」（白背景＋薄い枠＋角丸）に乗せる
     ことで、透過ロゴ2社にも白い下地が付き、キリンの赤い長方形も
     同じカードの中に収まるため、3社が同じ体裁で並んで見える。

   【高さをそろえる】
     img { height:40px; width:auto } で高さを固定。縦横比が3社で違うため
     幅は 121 / 98 / 116px とバラつくが、これは仕様どおり（高さ優先）。

   【等間隔】
     .ad_banner_item に左右同じ幅を与え、flex で中央寄せする。
     社数が増減しても等間隔のまま並ぶ。

   【ロゴ下の社名テキスト】
     社名の長さが 7 / 19 / 7 文字とバラバラで、とくにポッカサッポロが長い。
     そのままだと 1社だけ横に伸びて、並びが不揃いになる。対策は次の3点。
       (1) カードの幅を3社そろえる（PC 152px / スマホ 31%）。
           長い社名はカードの幅で自動的に2行へ折り返る。日本語は
           どの文字でも改行できるので、単語の途中で切れる心配はない。
       (2) .ad_banner_list を align-items:stretch にし、<a> を
           flex 縦並び＋height:100% にする。行内のカードが同じ高さになるので、
           社名が1行の会社と2行の会社が混ざっても、ロゴの位置と枠の下端がそろう。
       (3) 文字は小さめ（PC 11px / スマホ 10px）。主役はロゴで、社名は補助。
     色は #333（このファイルで既に使っている色）。新しい色は増やしていない。
   ==================================================================================== */
.ad_banner {
	background: #f7f7f7;
	border-bottom: 1px solid #e5e5e5;
	padding: 10px;
}
.ad_banner_inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.ad_banner_label {
	font-size: 13px;
	font-weight: bold;
	color: #333;
	margin: 0 14px 0 0;
	white-space: nowrap;
}
.ad_banner_list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;   /* ★同じ行のカードを同じ高さにする（社名の行数が違っても下端がそろう） */
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ad_banner_item {
	margin: 4px 10px;   /* 左右を同じ値にして等間隔にする */
	width: 152px;       /* ★3社とも同じ幅。長い社名はこの幅で折り返る */
}
.ad_banner_item a {
	display: flex;
	flex-direction: column;     /* 上=ロゴ / 下=社名 */
	align-items: center;
	height: 100%;
	box-sizing: border-box;     /* padding と border を width:152px に含める */
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	padding: 6px 8px;
	text-decoration: none;
	color: #333;
}
.ad_banner_item a:hover {
	border-color: #e53747;
}
.ad_banner_logo {
	display: block;
	line-height: 0;     /* 画像の下にできる余白を消す */
}
.ad_banner_item img {
	display: block;
	height: 40px;       /* ★高さをそろえる（幅は比率なりにバラつく） */
	width: auto;
	max-width: 100%;    /* カード幅より広いロゴが来ても、はみ出さずに縮む */
}
.ad_banner_name {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.35;
	text-align: center;
	color: #333;
	/* ★折り返す位置の調整★
	   カードの幅いっぱいに流すと
	     「ポッカサッポロフード＆ビ／バレッジ(株)」
	   のように "ビバレッジ" が2行に割れて読みにくい。
	   1行を約11文字で折り返すと
	     「ポッカサッポロフード＆／ビバレッジ(株)」
	   となり、意味の切れ目で改行される。
	   px ではなく em にしてあるのは、日本語1文字の幅がほぼ 1em なので、
	   端末のフォントが変わっても「約11文字」という意図が保たれるため。
	   短い2社（8文字前後）はこの幅に収まるので1行のまま。 */
	max-width: 11.5em;
}

/* ---- スマホ（既存の 639px を使う。新しいブレークポイントは足さない） ---- */
@media screen and (max-width: 639px) {
	.ad_banner {
		padding: 8px 6px;
	}
	.ad_banner_label {
		width: 100%;
		margin: 0 0 6px;
		text-align: center;
		font-size: 12px;
	}
	.ad_banner_list {
		/* ★これが無いと下の 31% が効かない★
		   .ad_banner_list は .ad_banner_inner（flex）の中の1個で、
		   幅を指定しないと「中身の分だけ」の幅になる。その状態で子に % を書くと
		   基準の幅が中身から決まってしまい、画面幅に追従しない。
		   ラベルはスマホでは width:100% で1行使うので、ここも100%にしてよい。 */
		width: 100%;
	}
	.ad_banner_item {
		/* ★画面幅に対する割合にして、どの機種でも3社が1行に収まるようにする。
		   31% + 左右1% = 33% ちょうど。3社で 99% なので折り返らない。
		   1社減っても幅は変わらず、中央寄せのまま等間隔になる。
		   max-width は、画面の大きいスマホでカードだけが間延びしないための上限。
		   130px あればロゴ（最大79px）と社名2行が収まる。 */
		width: 31%;
		max-width: 130px;
		margin: 3px 1%;
	}
	.ad_banner_item a {
		padding: 4px 4px;
	}
	.ad_banner_item img {
		height: 26px;   /* 一覧を圧迫しないよう小さめに。3社が1行に収まる */
	}
	.ad_banner_name {
		margin-top: 4px;
		font-size: 10px;
		line-height: 1.3;
	}
}