/* /jp/cmslite/assets/responsive.css
   目的：
   - 画面閲覧をスマホで破綻させない
   - 公式サイトの header/footer を表示
   - ツールバー（戻る/印刷/PDF/一覧）を表示
   - 印刷時は header/footer/ツールバーを消して、A4本文だけにする
*/

html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ===== 公式ヘッダー/フッター：画面では表示、印刷では消す ===== */
.site-header,
.site-footer{
  width: 100%;
}

/* ===== 画面用ツールバー ===== */
.sheet-toolbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e5e5e5;
}

.sheet-toolbar__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sheet-toolbar__left,
.sheet-toolbar__right{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sheet-toolbar__note{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px 10px 12px;
  font-size: 12px;
  color: #666;
}

.st-btn{
  appearance: none;
  border: 1px solid #cfcfcf;
  background: #fff;
  color: #111;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.st-btn:hover{ background: #f5f5f5; }

.st-btn--primary{
  border-color: #111;
  background: #111;
  color: #fff;
}
.st-btn--primary:hover{ background: #000; }

.st-btn--ghost{ background: transparent; }

/* ===== 表のはみ出し対策：スクロール枠（PC用の表に対して） ===== */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== pack：PC用/スマホ用の出し分け ===== */
.pack-pc{ display: block; }
.pack-sp{ display: none; }

/* PC画面では普通に表示 */
@media screen and (min-width: 769px){
  .table-scroll > table{
    width: 100%;
  }
}

/* ===== スマホ対応 ===== */
@media screen and (max-width: 768px){

  /* A4(mm)固定をスマホ幅にフィット */
  .a4{
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    background: #fff !important;
  }

  .doc-title{
    font-size: 18px !important;
    margin: 6px 0 10px 0 !important;
    letter-spacing: .08em !important;
  }

  /* ヘッダ：画像 + 右側 → 縦積み */
  .head{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .head-photo{
    height: auto !important;
    padding: 8px !important;
  }

  .head-photo img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 商品名：ラベルを上に */
  .head-name{
    grid-template-columns: 1fr !important;
    row-gap: 4px !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }

  .head-name__label{ font-size: 12px !important; }
  .head-name__value{
    font-size: 18px !important;
    line-height: 1.25 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* メタ行：縦積み */
  .meta-row2{
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
    padding-bottom: 8px !important;
  }

  .meta-k2{ font-size: 12px !important; }
  .meta-v2{
    font-size: 14px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 2カラム → 1カラム */
  .grid2{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .box{ padding: 10px 12px !important; }
  .box h2{
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* セクション画像＋本文：縦積み */
  .section-body,
  .section-body.pos-right{
    grid-template-columns: 1fr !important;
  }

  /* 栄養＋包装：縦積み */
  .np-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 栄養テーブル：横スクロール許可 */
  .nutri-tbl{
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .box.nutri{
    width: 100% !important;
    max-width: none !important;
  }

  /* ===== pack：スマホは縦カードを表示、PC用表は隠す ===== */
  .pack-pc{ display: none !important; }
  .pack-sp{ display: block !important; }

  .pack-card{
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    margin: 0 0 10px 0;
  }

  .pack-card__title{
    font-weight: 900;
    font-size: 14px;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    letter-spacing: .06em;
  }

  .pack-dl{
    margin: 0;
    padding: 0;
  }

  .pack-dl > div{
    display: grid;
    grid-template-columns: 8.5em 1fr;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
    align-items: baseline;
  }

  .pack-dl > div:last-child{
    border-bottom: none;
  }

  .pack-dl dt{
    margin: 0;
    font-weight: 900;
    color: #111;
    white-space: nowrap;
  }

  .pack-dl dd{
    margin: 0;
    text-align: right;
    font-weight: 700;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .pack-dl dd.mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    letter-spacing: .2px;
  }
}

/* ===== 印刷時：ヘッダー/フッター/ツールバーは消して本文だけ ===== */
@media print {
  .site-header,
  .site-footer,
  .sheet-toolbar{
    display: none !important;
  }

  /* 印刷はA4用の表を出す */
  .pack-pc{ display: block !important; }
  .pack-sp{ display: none !important; }
}