/* /jp/cmslite/assets/screen.css
   目的：
   - PC/通常表示のレイアウトを担当（A4風）
   - 印刷は print.css（media=print）に任せる
*/

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  color: #111;
  font-family: "Yu Mincho","游明朝","Hiragino Mincho ProN","MS Mincho",serif;
  font-size: 11px;
  line-height: 1.5;
}

.sheet { background: #f2f2f2; }

.a4 {
  background: #fff;
  width: 190mm;
  min-height: 277mm;
  margin: 16px auto;
  padding: 5mm;
  box-sizing: border-box;
}

.doc-title{
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .12em;
  margin: 4px 0 10px 0;
}

.hr { border-top: 1px solid #222; margin: 8px 0; }
.center { text-align: center; }

/* =========================
   Header（画面はgrid）
========================= */
.head {
  display: grid;
  grid-template-columns: 55mm 1fr;
  gap: 7mm;
  align-items: start;
}

/* 左：写真枠 */
.head-photo {
  width: 55mm;
  height: 45mm;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.head-photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.photo-empty {
  width: 100%;
  height: 100%;
  background: #fafafa;
  border: 1px solid #eee;
  box-sizing: border-box;
}

/* 右：商品名ブロック */
.head-info{ position: relative; }

.head-top{
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  margin: 0 0 2mm 0;
}
.input-date{
  font-size: 9.6px;
  color: #444;
  white-space: nowrap;
}

/* 商品名：下線＋大きめ */
.head-name{
  display: grid;
  grid-template-columns: 16mm 1fr;
  column-gap: 3mm;
  align-items: baseline;
  padding-bottom: 2mm;
  margin-bottom: 2mm;
  border-bottom: 1px solid #222;
}
.head-name__label{
  font-size: 10.2px;
  font-weight: 900;
  white-space: nowrap;
}
.head-name__value{
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

/* メタ：各行に薄い下線 */
.head-meta{
  display: grid;
  row-gap: 1.4mm;
}
.meta-row2{
  display: grid;
  grid-template-columns: 16mm 1fr;
  column-gap: 3mm;
  align-items: baseline;
  padding-bottom: 1.1mm;
  border-bottom: 0.6px solid #999;
}
.meta-k2{
  font-size: 10.2px;
  font-weight: 900;
  white-space: nowrap;
}
.meta-v2{
  font-size: 11.4px;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

/* =========================
   Boxes / 2 columns
========================= */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.box {
  padding: 7px 9px;
  background: #fff;
  box-sizing: border-box;
}

.box h2 {
  margin: 0 0 5px 0;
  font-size: 11.5px;
  font-weight: 900;
  border-bottom: 1px solid #111;
  padding-bottom: 2px;
}

.mt { margin-top: 8px; }

.bullets { margin: 5px 0 0 16px; padding: 0; }
.bullets li { margin: 2px 0; }
.bullets.no-bullet { list-style: none; margin-left: 0; padding-left: 0; }

/* テキスト折り返し保険 */
.section-txt,
.section-txt .txt,
.box .txt{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: strict;
}

/* =========================
   Optional sections（画面はgrid）
========================= */
.section-body {
  display: grid;
  grid-template-columns: var(--imgw, 38mm) 1fr;
  gap: 8px;
  align-items: start;
}
.section-body.pos-right { grid-template-columns: 1fr var(--imgw, 38mm); }
.section-body.pos-right .section-img { order: 2; }
.section-body.pos-none { grid-template-columns: 1fr; }
.section-body.pos-none .section-img { display: none; }

.section-img img {
  width: 100%;
  height: auto;
  border: 1px solid #eee;
  display: block;
  margin-bottom: 4px;
}
.section-img img:last-child { margin-bottom: 0; }

/* =========================
   Nutrition + Pack（画面はgrid）
========================= */
.np-grid{
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2.6mm;
  align-items: start;
}

.box.nutri{
  width: fit-content;
  max-width: 50mm;
  padding: 5px 6px;
  box-sizing: border-box;
}

.nutri-head{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

/* 栄養見出しの下線を短く（文字幅だけ） */
.box.nutri h2{
  display: inline-block;
  border-bottom: 1px solid #111;
  padding-bottom: 2px;
  margin-bottom: 0;
}

.nutri-note{
  font-size: 9px;
  color: #555;
  margin: 0;
}

.nutri-tbl{
  width: auto;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 9.6px;
  line-height: 1.15;
  white-space: nowrap;
}
.nutri-tbl th,
.nutri-tbl td{
  border: 0.6px solid #999;
  padding: 2px 3px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.nutri-tbl th{
  background: #f8f8f6;
  font-weight: 800;
}
.nutri-tbl td{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nutri-tbl td.num{
  text-align: right;
  padding-right: 4px;
}

/* =========================
   Pack
========================= */
.pack-wrap {
  margin: 0;
  border: none;
  background: #fff;
  padding: 6px 3px;
  box-sizing: border-box;
}

.pack-title {
  text-align: center;
  font-weight: 900;
  font-size: 10.5px;
  line-height: 1.25;
  border-bottom: 1px solid #222;
  margin: 0 0 6px 0;
  padding-bottom: 2px;

  white-space: normal;
  word-break: keep-all;
}

.pack-foot{
  margin-top: 6px;
  font-size: 10px;
  color: #555;
}

.pack3-tbl{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9px;
}
.pack3-tbl col.c-type { width: 10mm; }

.pack3-tbl th,
.pack3-tbl td{
  border: 0.8px solid #2b2b2b;
  padding: 2px 2px;
  line-height: 1.15;
  vertical-align: middle;
  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  box-sizing: border-box;

  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.pack3-tbl .pack3-head th{
  background: #f4f6f8;
  font-weight: 700;
  font-size: 8.5px;
  padding: 2px 1px;
}

.pack3-tbl .pack3-sub{
  background: #f7f7f7;
  font-weight: 700;
  font-size: 8.5px;
  padding: 2px 1px;
}

.pack3-tbl .pack3-type{
  background: #eef2f6;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 1px;

  writing-mode: vertical-rl;
  text-orientation: upright;
}

.pack3-tbl .num{
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pack3-tbl td.pack3-form{
  padding-left: 3px;
  padding-right: 3px;
}

.pack3-tbl td.pack3-count{
  font-size: 9px;
  padding: 2px 2px;
  letter-spacing: 0;
}

.pack3-tbl .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  font-size: 8.8px;
  letter-spacing: 0.1px;
}

/* =========================
   強制：本文テキストの暴走を止める
   - 公式サイト側CSSやresponsive側のfont指定に勝つ
========================= */
.a4{
  font-size: 11px; /* a4内の基準を固定 */
}

/* 通常本文（txt）とセクション本文を固定 */
.a4 .txt,
.a4 .section-txt,
.a4 .section-txt .txt,
.a4 .bullets,
.a4 .bullets li{
  font-size: 11px !important;
  line-height: 1.5 !important;
}

/* 見出しは別（見出しまで小さくしたくない保険） */
.a4 h2{
  font-size: 11.5px !important;
}