@charset "UTF-8";
.product-banner {
  width: 900px; /* 固定幅 */
  height: 160px; /* 固定高さ */
  display: flex; /* 横並びにするためのflex */
  align-items: center; /* 高さ方向の中央寄せ */
  background-color: #fff; /* 背景色（必要に応じて変更） */
  font-family: 'Noto Sans JP', sans-serif; /* フォント指定 */
  box-sizing: border-box; /* paddingがwidthに含まれる */
  padding: 20px; /* 内側余白 */
  margin: 0 auto 10px;
}
.product-thumb {
  width: 99px;
  height: 122px;
  object-fit: cover;
  flex-shrink: 0; /* 縮まないよう固定 */
  margin-right: 20px; /* 画像とテキストの間隔 */
}
.product-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.1;
  margin: 0 5px 0 0;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 黒フチを四方向に */
  text-align: center;
}
a.product-title {
  text-decoration: none;
}
/* 各商品のタイトル色＋黒フチ */
.product-title.reaso {
  color: #990099;
}
.product-title.stand {
  color: #c8c8cb;
}
.product-title.senkou {
  color: #d8f255;
}
.product-title.rank_d {
  color: #bfe4ff;
}
.product-title.rank_s {
  color: #c9ace6;
}
.product-title.haku {
  color: #ffcabf;
}
.product-title.colorp {
  color: #bfe4ff;
}
.product-title.twocol {
  color: #bfe4ff;
}
.product-title.ccover {
  color: #bfe4ff;
}
.product-title.allcol {
  color: #bfe4ff;
}
.product-title.hyoonde {
  color: #ffff80;
}
.product-title.onde {
  color: #ff1493;
}
.product-title.novel {
  color: #ffffff;
}
/* タイトルの下段 */
.product-subinfo {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 左の旧セット名 */
.product-sub {
  font-size: 0.95rem;
  color: #000;
}
/* 印刷方式のラベル（右） */
.product-label {
  font-size: 0.9rem;
  padding: 4px 10px;
margin: 0 10px 0 0;
  border-radius: 4px;
  font-weight: bold;
  color: #fff;
}
/* 印刷方式ごとの背景色 */
.product-label.offset {
  background-color: #009ee0; /* C100% オフセット印刷 */
}
.product-label.onde {
  background-color: #d6007f; /* M100% オンデマンド印刷 */
}
.product-features {
  display: flex;
  height: 160px;
  gap: 6px;
}
.feature-block {
  height: 100%; /*  親の .product-features の高さを継承 */
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1px dashed #aaa;
  padding-left: 16px;
  min-width: 80px;
  box-sizing: border-box;
}
.feature-block p {
  font-size: 0.75rem;
  text-align: center;
  margin: 0;
}
.color-icon {
  width: 20px;
  height: 20px;
  margin: 6px auto;
  border-radius: 3px;
}
.color-icon.cmyk_icon {
  background: linear-gradient(90deg, cyan, magenta, yellow, black);
}
.color-icon.black_icon {
  background-color: #000;
}
.color-icon.magenta_icon {
  background-color: #c30080; /* マゼンタ（M100％）に相当する目安色 */
}
.color-icon.cyan_icon {
  background-color: #00a4e8; /* シアン（C100％）に相当する目安色 */
}
.color-icon.pink_icon {
  background-color: #ff5fc0;
}
.color-icon.white_icon {
  background-color: #fff;
  border: 1px solid #000;
}
.product-warning {
  margin: 20px auto;
  max-width: 900px;
  font-size: 1.2rem; /* 少し大きめにアップ */
  font-weight: bold;
  color: #d60000; /* 濃い赤で警告感 */
  line-height: 1.8;
  text-align: center; /* ← センター揃え追加！ */
  background-color: #fff0f0; /* 薄ピンク背景でさらに目立つ */
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid #d60000;
}
.color-square {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border-radius: 2px;
  margin-left: 0.4em;
  vertical-align: text-bottom; /* 微妙な上下ずれを防ぐ */
  box-shadow: 0 0 0 1px #ccc; /* 色によっては見えにくさ対策にフチ */
}
/* 色ごとの背景色 */
.color-square.black {
  background-color: #000;
}
.color-square.yellow {
  background-color: #ffec00;
}
.color-square.orange {
  background-color: #d37400;
}
.color-square.red {
  background-color: #c4000c;
}
.color-square.magenta {
  background-color: #c30080;
}
.color-square.enji {
  background-color: #9d153b;
}
.color-square.sepia {
  background-color: #7c422f;
}
.color-square.darkbrown {
  background-color: #58231f;
}
.color-square.green {
  background-color: #2c4936;
}
.color-square.icegreen {
  background-color: #6bb4ba;
}
.color-square.blueviolet {
  background-color: #6e5ea2;
}
.color-square.cyan {
  background-color: #00a4e8;
}
.color-square.konai {
  background-color: #2a3b8e;
}
.color-square.gunjo {
  background-color: #1f5ba5;
}
.color-square.navy {
  background-color: #2d3555;
}
.color-square.akamurasaki {
  background-color: #881282;
}
.color-square.cmyk {
  background: linear-gradient(to right, cyan, magenta, yellow, black);
}