@charset "utf-8";
/* ===================================================================
   業務用フードカッター・スライサー ギャラリー
   /gallery/food-cutter/  専用スタイル

   既存会場（bakery-oven 等）の 58KB のスタイルは引き継がず、
   この会場のために書き下ろしたもの。index.cgi が出力する
   id / class（#container #header #contents #side_contents
   #main_contents .menu-section .grid-container .grid-item など）に
   そのまま当たるようにしてある。
   =================================================================== */

:root{
  --ink:#1b2733;          /* 本文 */
  --sub:#5a6b7a;          /* 補助テキスト */
  --line:#e3e9ee;         /* 罫線 */
  --bg:#f6f8fa;           /* 背景 */
  --card:#ffffff;
  --accent:#0e7490;       /* 基調色（鋼のティール） */
  --accent-dark:#0a5568;
  --accent-tint:#ecf6f9;
  --mark:#fff4c2;         /* 検索語ハイライト */
  --radius:10px;
  --shadow:0 1px 2px rgba(20,40,60,.06), 0 8px 24px rgba(20,40,60,.06);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* --- ヘッダ ------------------------------------------------------- */
#header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
#header_container{
  max-width:1180px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
#h_left{flex:0 0 auto}
#h_left img{max-height:46px;width:auto}
#h_middle{flex:1 1 320px;min-width:0}
/* 問合せかご・ログインなどは画像ボタン。元は狭いセル前提で width="50%" が
   付いているため、新レイアウトのままだと1つ150px前後に膨らむ。高さで揃える。 */
#h_info{flex:0 1 auto;min-width:0;font-size:12.5px;color:var(--sub)}
#h_info table{border-collapse:collapse;width:auto}
#h_info td{padding:0 3px;white-space:nowrap;vertical-align:middle}
#h_info a{color:var(--sub)}
#h_info img{
  width:auto;
  max-width:none;
  height:22px;
  vertical-align:middle;
}
#h_info img:hover{opacity:.75}
/* 会場ロゴ（特設会場の帯） */
#contents img[src*="tokusetsu_logo"]{max-width:330px;height:auto;margin-bottom:10px}

/* ヘッダ内の検索フォーム */
.search-form,#h_middle form{
  display:flex;
  align-items:stretch;
  gap:0;
  max-width:560px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  overflow:hidden;
}
.search-form:focus-within,#h_middle form:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
.select-box,#search-type{
  border:0;
  border-right:1px solid var(--line);
  background:#fafcfd;
  padding:0 10px;
  font-size:13px;
  color:var(--sub);
}
.search-input,#query{
  flex:1 1 auto;
  border:0;
  padding:10px 14px;
  font-size:15px;
  min-width:0;
}
.search-input:focus,#query:focus{outline:0}
.search-button{
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:var(--accent);
  color:#fff;
  padding:0 18px;
  cursor:pointer;
  font-size:15px;
}
.search-button:hover{background:var(--accent-dark)}
.search-button .search-icon,.search-button i{font-size:15px;line-height:1}

/* --- 全体レイアウト ------------------------------------------------ */
#container{overflow:hidden}
/* 名前付きエリアは使わない。ジャンル内ナビと関連ページナビが同じエリアに
   入って重なるため、列の指定だけにして行は DOM 順に自動で積む。 */
#contents{
  max-width:1180px;
  margin:0 auto;
  padding:22px 16px 56px;
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  column-gap:34px;
  row-gap:0;
  align-items:start;
}
#contents > table,
#contents > div:not(#side_contents):not(#main_contents),
.social-share{grid-column:1 / -1}
#contents > table{width:100%}
#side_contents{grid-column:1;min-width:0}
#main_contents{grid-column:2;min-width:0}
#url-input{position:absolute;left:-9999px}

/* --- ジャンル内ナビ（テーブルで出力される） ------------------------- */
#contents > table{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  border-collapse:separate;
  margin-bottom:18px;
  font-size:13.5px;
}
#contents > table td{padding:10px 14px;line-height:2.1}
#contents > table a{
  display:inline-block;
  margin:2px 4px 2px 0;
  padding:3px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--sub);
  font-size:13px;
  white-space:nowrap;
}
#contents > table a:hover{
  border-color:var(--accent);
  background:var(--accent-tint);
  color:var(--accent-dark);
  text-decoration:none;
}

/* 関連ページナビ */
nav.nav1{
  margin:0 0 16px;
  font-size:13.5px;
  color:var(--sub);
}
nav.nav1 ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  align-items:center;
}
nav.nav1 li{margin:0}
nav.nav1 a,nav.nav1 b{
  display:inline-block;
  padding:3px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:13px;
  font-weight:400;
}
/* 現在地は b で囲まれている。リンクの中の b をチップにすると
   白いチップの中に緑のチップが入って二重になるので、中身は素にして
   外側のリンクのほうを緑のチップにする。 */
nav.nav1 a b{
  display:inline;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:none;
  color:inherit;
  font-weight:700;
}
nav.nav1 b,
nav.nav1 a:has(b){
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
nav.nav1 a:has(b):hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
  text-decoration:none;
}

/* --- シェアボタン -------------------------------------------------- */
.social-share{
  display:flex;
  gap:8px;
  margin:0 0 18px;
}
.share-button{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line);
  color:var(--sub);
  font-size:14px;
}
.share-button:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none}

/* --- サイドバー ---------------------------------------------------- */
.search-box{
  display:flex;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  margin-bottom:18px;
}
.search-box input[type=text]{flex:1 1 auto;border:0;padding:10px 12px;font-size:14px;min-width:0}
.search-box input[type=text]:focus{outline:0}
.search-box button{
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:var(--accent);
  color:#fff;
  padding:0 14px;
  cursor:pointer;
}
.search-box button:hover{background:var(--accent-dark)}
/* ボタンの中は虫めがねのSVG。寸法指定が無いため、CSSで大きさと色を決める。 */
.search-box button svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
}

.menu-section,.menu-section_chumoku{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:16px;
  font-size:13.5px;
  line-height:1.95;
}
.side_title{
  display:block;
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.03em;
}
.menu-section a{color:var(--sub);display:inline-block;padding:2px 0}
.menu-section a:hover{color:var(--accent-dark)}
.top_cell{padding:0}

/* --- 本文（記事） -------------------------------------------------- */
#main_contents > img:first-child{
  width:100%;
  border-radius:var(--radius);
  border:1px solid var(--line);
  margin-bottom:22px;
}
#main_contents h1{
  margin:0 0 20px;
  font-size:28px;
  line-height:1.5;
  letter-spacing:.01em;
  font-weight:700;
}
#main_contents h2{
  margin:44px 0 16px;
  padding:0 0 10px;
  border-bottom:2px solid var(--accent);
  font-size:21px;
  line-height:1.5;
  font-weight:700;
}
#main_contents h3{
  margin:30px 0 12px;
  font-size:17px;
  font-weight:700;
  color:var(--accent-dark);
}
#main_contents p{margin:0 0 16px}
#main_contents strong{font-weight:700;color:var(--ink)}
#main_contents ul,#main_contents ol{margin:0 0 18px;padding-left:1.4em}
#main_contents li{margin-bottom:6px}

/* 記事中の比較表 */
#main_contents table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  font-size:14.5px;
}
#main_contents table th,#main_contents table td{
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  line-height:1.8;
}
#main_contents table th{background:var(--accent-tint);font-weight:700;white-space:nowrap}
#main_contents table tr:last-child th,
#main_contents table tr:last-child td{border-bottom:0}

.read_more{
  display:inline-block;
  margin:4px 0 26px;
  padding:7px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:13.5px;
  color:var(--sub);
}
.read_more:hover{border-color:var(--accent);color:var(--accent-dark);text-decoration:none}

/* --- 一覧の見出し・ページャ ---------------------------------------- */
.banner{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:36px 0 4px;
  padding:0 0 10px;
  border-bottom:2px solid var(--accent);
}
.banner h3{
  margin:0;
  font-size:20px;
  font-weight:700;
  color:var(--ink);
}
.banner h3 b{color:var(--accent-dark)}
.banner .next-link,.banner a{font-size:13.5px}

#main_contents > table:has(td) + .grid-container{margin-top:0}
#main_contents td a,.pager a{
  display:inline-block;
  min-width:34px;
  margin:3px 3px 3px 0;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  text-align:center;
  font-size:14px;
  color:var(--sub);
}
#main_contents td a:hover{border-color:var(--accent);background:var(--accent-tint);text-decoration:none}

/* --- 製品カード ---------------------------------------------------- */
.grid-container{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
  margin:18px 0 34px;
}
.grid-item{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.grid-item:hover{
  border-color:#cfe0e6;
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.item-content{
  display:flex;
  align-items:center;
  justify-content:center;
  height:170px;
  padding:12px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.item-content a{display:block;line-height:0}
.item-content img{
  max-height:146px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.item-text{
  padding:12px 14px 14px;
  font-size:13.5px;
  line-height:1.7;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.item-name{font-size:14px;font-weight:700;color:var(--ink);display:block}
.item-name:hover{color:var(--accent-dark)}
.item-maker{font-size:12.5px;color:var(--sub)}
.item-cat{
  align-self:flex-start;
  margin-top:2px;
  padding:2px 9px;
  border-radius:999px;
  background:var(--accent-tint);
  color:var(--accent-dark);
  font-size:11.5px;
  line-height:1.8;
}
/* 旧マークアップ（SMALL 直書き）でも読めるように */
.item-text small{font-size:13px}

/* --- フッタ -------------------------------------------------------- */
#footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:26px 16px;
  font-size:13px;
  color:var(--sub);
}
#footer a{color:var(--sub)}

/* --- 表示切り替え -------------------------------------------------- */
.sp_mode_only{display:none}
.pc_tb_mode_only{display:block}

/* --- タブレット ---------------------------------------------------- */
@media screen and (max-width:1000px){
  #contents{grid-template-columns:minmax(0,1fr);column-gap:0}
  #main_contents{grid-column:1}
  #side_contents{grid-column:1;order:1;margin-top:34px}   /* 本文の下へ回す */
  #main_contents h1{font-size:24px}
}

/* --- スマートフォン ------------------------------------------------ */
@media screen and (max-width:600px){
  body{font-size:15.5px;line-height:1.85}
  #header_container{padding:8px 12px;gap:10px}
  #h_middle{order:3;flex-basis:100%}
  #contents{padding:16px 12px 44px}
  #main_contents h1{font-size:21px}
  #main_contents h2{font-size:18px;margin-top:34px}
  .banner h3{font-size:17px}
  .grid-container{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .item-content{height:136px}
  .item-content img{max-height:112px}
  .sp_mode_only{display:block}
  .pc_tb_mode_only{display:none}
  #main_contents table{display:block;overflow-x:auto}
}