@charset "utf-8";
/* =============================================================================
   リプトン プレスリリース ページ スタイル
   元サイト https://www.lipton.jp/ja/ の実測値をトークン化したもの。
   数値の根拠は design-rules.md を参照。
   clamp() は「375px 時の SP 実測値 → 768px 以上の PC 実測値」を線形補間しており、
   375px と 768px 以上では元サイトとピクセル単位で一致する。
============================================================================= */

/* ---------------------------------------------------------------------------
   1. デザイントークン
--------------------------------------------------------------------------- */
:root {
  /* 色 ------------------------------------------------------------------- */
  --c-brand-yellow:   #fade4b;  /* 見出し左罫・タイトル下線・SPヘッダー地 */
  --c-cream:          #fffdf2;  /* 見出し地・パンくず地・囲み地 */
  --c-cream-line:     #ede9d4;  /* クリーム面の罫線 */
  --c-bg:             #ffffff;  /* ページ地 */
  --c-bg-footer:      #fcfbfc;  /* フッター地 */
  --c-bg-company:     #f9f9f9;  /* 企業情報ボックス地 */
  --c-bg-notice:      #fff8f8;  /* 注意書き地 */
  --c-line-notice:    #f0d0d0;  /* 注意書き枠 */
  --c-bg-ph:          #f5f5f5;  /* 画像プレースホルダー地 */
  --c-line-ph:        #cccccc;  /* 画像プレースホルダー破線 */
  --c-text:           #333333;  /* 本文 */
  --c-text-title:     #222222;  /* h1 */
  --c-text-base:      #454543;  /* 既定文字色 */
  --c-text-sub:       #555555;  /* リード上の小見出し */
  --c-text-caption:   #666666;  /* キャプション */
  --c-text-muted:     #757575;  /* パンくず・注記（元サイト #888888 → 4.5:1 確保のため最小限だけ暗く） */
  --c-text-footnote:  #767676;  /* 脚注（元サイト #999999 → 4.5:1 確保のため最小限だけ暗く） */
  --c-navy:           #0c2240;  /* サイト既定色 */
  --c-link:           #0066cc;  /* 本文リンク */
  --c-rule:           #e5e5e5;  /* 区切り線・外罫 */
  --c-rule-soft:      #f0f0f0;  /* dl 行罫 */
  --c-black:          #000000;

  /* 書体 ----------------------------------------------------------------- */
  --ff-base: "Open Sans", "Zen Kaku Gothic New", sans-serif;

  /* 文字サイズ（SP実測 → PC実測） --------------------------------------- */
  --fs-title:        clamp(17px, 12.23px + 1.272vw, 22px);
  --fs-kicker:       clamp(13px, 11.09px + 0.5089vw, 15px);
  --fs-lead:         clamp(14px, 13.05px + 0.2545vw, 15px);
  --fs-h2:           clamp(13px, 11.09px + 0.5089vw, 15px);
  --fs-body:         clamp(14px, 13.05px + 0.2545vw, 15px);
  --fs-dl:           clamp(13px, 12.05px + 0.2545vw, 14px);
  --fs-profile:      clamp(13px, 12.05px + 0.2545vw, 14px);
  --fs-profile-name: clamp(15px, 14.05px + 0.2545vw, 16px);
  --fs-company:      clamp(13px, 12.05px + 0.2545vw, 14px);
  --fs-notice:       clamp(12px, 11.05px + 0.2545vw, 13px);
  --fs-crumb:        clamp(11px, 10.05px + 0.2545vw, 12px);
  --fs-small:        clamp(11px, 10.05px + 0.2545vw, 12px);
  --fs-caption:      13px;
  --fs-footnote:     12px;

  /* 余白（SP実測 → PC実測） --------------------------------------------- */
  --pad-x:             clamp(20px, 8.55px + 3.053vw, 32px);
  --gap-section:       clamp(36px, 24.55px + 3.053vw, 48px);
  --gap-rule:          clamp(32px, 20.55px + 3.053vw, 44px);
  --gap-h2:            clamp(16px, 12.18px + 1.018vw, 20px);
  --pad-h2-y:          clamp(10px, 8.092px + 0.5089vw, 12px);
  --pad-h2-x:          clamp(12px, 8.183px + 1.018vw, 16px);
  --mv-copy-top:       clamp(28px, 16.55px + 3.053vw, 40px);
  --mv-copy-bot:       clamp(24px, 12.55px + 3.053vw, 36px);
  --gap-lead:          clamp(32px, 20.55px + 3.053vw, 44px);
  --gap-container-bot: clamp(60px, 40.92px + 5.089vw, 80px);
  --gap-p:             clamp(14px, 10.18px + 1.018vw, 18px);
  --pad-profile:       clamp(16px, 8.366px + 2.036vw, 24px);
  --pad-company-y:     clamp(20px, 12.37px + 2.036vw, 28px);
  --pad-company-x:     clamp(16px, 0.7328px + 4.071vw, 32px);
  --pad-notice:        clamp(16px, 8.366px + 2.036vw, 24px);

  /* 寸法 ----------------------------------------------------------------- */
  --w-content: 860px;  /* 本文最大幅 */
  --w-crumb:   900px;  /* パンくず最大幅 */
  --lh-body:   1.9;
  --t-hover:   .3s ease-in-out;
}

/* ---------------------------------------------------------------------------
   2. リセット（destyle.css の必要分のみ）
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; border-style: none; }
a { background-color: transparent; text-decoration: none; color: inherit; cursor: pointer; transition: var(--t-hover); }
a:hover { opacity: .7; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }

/* ---------------------------------------------------------------------------
   3. ベース
--------------------------------------------------------------------------- */
html {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: normal;
  line-height: 1.7;
  color: var(--c-navy);
}
body { width: 100%; background: var(--c-bg); }
h1, h2, h3 { line-height: 1.3; font-size: 1em; font-weight: inherit; }
.wrapper { width: 100%; position: relative; overflow-x: clip; }

/* キーボード操作時のフォーカス表示 */
:focus-visible {
  outline: 3px solid #0c2240;
  outline-offset: 2px;
}

/* PC / SP 出し分け（元サイト common.css と同じ 768px 境界） */
@media screen and (max-width: 768px) { .pc { display: none !important; } }
@media screen and (min-width: 769px) { .sp { display: none !important; } }

/* スクリーンリーダー専用 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 本文へスキップ */
.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -110%);
  z-index: 100; background: var(--c-brand-yellow); color: var(--c-black);
  font-size: 14px; font-weight: 700; padding: 12px 20px;
}
.skip-link:focus-visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------------------------------------------------------------------------
   4. ヘッダー（元サイト style.css の構造・数値を再現）
--------------------------------------------------------------------------- */
#header {
  position: absolute; top: 0; left: 0; width: 100%; z-index: 10;
  background: linear-gradient(0deg, transparent, rgba(0,0,0,.7));
  color: #fff;
}
.header01 { width: 100%; display: flex; align-items: center; justify-content: space-around; }
.header01 > .item01 { order: 2; }
.header01 > .item02 { order: 1; }
.header01 > .item03 { order: 3; }
.flex1 { flex: 1; }
.header01 .logo { margin: 0; line-height: 0; }
.header01 .logo img { width: 90px; height: 90px; object-fit: contain; }
.gnav {
  width: 100%; display: flex; align-items: center; justify-content: space-evenly;
  gap: .5em; padding: 0 10px; font-size: 14px;
}
.gnav > li { text-align: center; }
.gnav > li > a { display: inline-block; padding: 12px 0; }  /* 横paddingは元サイトに合わせて0 */

@media screen and (max-width: 768px) {
  #header { position: sticky; background: none; color: var(--c-navy); }
  .header01 { justify-content: space-between; background-color: var(--c-brand-yellow); }
  .header01 .logo img { width: 60px; height: 60px; position: relative; z-index: 10; }
}

/* ハンバーガー */
.hamburger_area { position: relative; z-index: 12; --hamburger-size: 60px; }
.toggle_btn {
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 11;
  width: var(--hamburger-size); height: var(--hamburger-size);
  transition: all .5s; margin: 0 0 0 auto; background: var(--c-brand-yellow);
}
.toggle_btn span {
  position: absolute; left: 50%; width: 30px; height: 0;
  border-top: 2px solid var(--c-black); transition: all .5s;
}
.toggle_btn span:nth-child(1) { transform: translate(-50%, -12px); }
.toggle_btn span:nth-child(2) { transform: translate(-50%, 0); }
.toggle_btn span:nth-child(3) { transform: translate(-50%, 12px); }
body.open .toggle_btn { background: rgba(12,48,97,0); }
body.open .toggle_btn span:nth-child(1) { transform: translate(-50%,0) rotate(225deg); }
body.open .toggle_btn span:nth-child(2) { transform: translate(-50%,0) rotate(-225deg); }
body.open .toggle_btn span:nth-child(3) { opacity: 0; }

.gloval-nav {
  background-color: var(--c-brand-yellow); position: fixed; z-index: 11;
  top: 0; bottom: 0; right: 0; padding: 60px 0 80px;
  transform: translateX(100%); transition: .2s all; width: 95vw; max-height: 100vh;
  visibility: hidden;
}
.gloval_box { overflow-y: auto; width: 100%; height: 100%; }
.gloval_ul { font-size: 16px; font-weight: 700; line-height: 1; color: var(--c-navy); }
.gloval_ul > li > a { display: block; padding: 20px; }
.hamburger_bg {
  background-color: rgba(0,0,0,.3); position: fixed; z-index: 9;
  top: 0; bottom: 0; right: 0; width: 100vw; max-height: 100vh;
  transform: translateX(100%); visibility: hidden;
}
body.open { overflow: hidden; }
body.open .hamburger_bg, body.open .gloval-nav { visibility: visible; transform: translateX(0); transition: transform .2s; }
body.open .gloval-nav { right: 2.5vw; }

/* ---------------------------------------------------------------------------
   5. キービジュアル
--------------------------------------------------------------------------- */
.mv { width: 100%; line-height: 0; background: var(--c-cream); }
.mv img { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 1000px; }

/* ---------------------------------------------------------------------------
   6. パンくず
--------------------------------------------------------------------------- */
.pr-breadcrumb { background: var(--c-cream); border-bottom: 1px solid var(--c-cream-line); }
.pr-breadcrumb__inner {
  max-width: var(--w-crumb); margin: 0 auto; padding: 10px var(--pad-x);
  font-size: var(--fs-crumb); color: var(--c-text-muted);
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
}
.pr-breadcrumb__inner a { color: var(--c-text-muted); }
.pr-breadcrumb__inner a:hover { text-decoration: underline; opacity: 1; }
.pr-breadcrumb__sep { color: #bbb; }

/* ---------------------------------------------------------------------------
   7. 発信元・メインコピー
--------------------------------------------------------------------------- */
.pr-main-copy { padding: var(--mv-copy-top) var(--pad-x) var(--mv-copy-bot); max-width: var(--w-content); margin: 0 auto; }
.pr-main-copy__lead { font-size: var(--fs-kicker); color: var(--c-text-sub); line-height: 1.85; margin-bottom: 14px; }
.pr-main-copy__title {
  font-size: var(--fs-title); font-weight: 700; line-height: 1.6; color: var(--c-text-title);
  padding-bottom: clamp(18px, 13.3px + 1.272vw, 24px);
  border-bottom: 3px solid var(--c-brand-yellow);
  margin-bottom: clamp(28px, 16.55px + 3.053vw, 40px);
}

/* ---------------------------------------------------------------------------
   8. 本文コンテナ
--------------------------------------------------------------------------- */
#main_contents { font-family: var(--ff-base); color: var(--c-text-base); font-size: 16px; line-height: 1.75; }
.pr-container { max-width: var(--w-content); margin: 0 auto var(--gap-container-bot); padding: 0 var(--pad-x); }

/* リード文 */
.pr-lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-text); margin-bottom: var(--gap-lead); }
.pr-lead p { margin-bottom: var(--gap-p); }
.pr-lead p:last-child { margin-bottom: 0; }

/* 区切り線 */
.pr-divider { border: none; border-top: 1px solid var(--c-rule); margin: var(--gap-rule) 0; }

/* セクション */
.pr-section { margin-bottom: var(--gap-section); }
.pr-section__heading {
  font-size: var(--fs-h2); font-weight: 700; color: var(--c-text); line-height: 1.6;
  padding: var(--pad-h2-y) var(--pad-h2-x);
  background: var(--c-cream); border-left: 4px solid var(--c-brand-yellow);
  margin-bottom: var(--gap-h2);
}
.pr-section__subheading {
  font-size: var(--fs-lead); font-weight: 700; color: var(--c-text);
  line-height: 1.6; margin: 24px 0 10px;
}
.pr-section__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); }
.pr-section__body p { margin-bottom: var(--gap-p); }
.pr-section__body p:last-child { margin-bottom: 0; }
.pr-section__body a, .pr-lead a, .pr-dl a, .pr-table a { color: var(--c-link); text-decoration: underline; }

/* 定義リスト（概要） */
/* 元サイトは dt を float させ dd に padding-left:140px を敷いているが、
   ラベルが 130px を超えると dd と重なる。見た目（ラベル列130px・罫線・余白）は
   そのままに、重ならない grid で実装する。 */
.pr-dl {
  font-size: var(--fs-dl); line-height: var(--lh-body); color: var(--c-text);
  border-top: 1px solid var(--c-rule); margin-top: 20px;
  display: grid; grid-template-columns: minmax(130px, max-content) 1fr;
}
.pr-dl dt { font-weight: 700; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--c-rule-soft); }
.pr-dl dd { padding: 10px 0; border-bottom: 1px solid var(--c-rule-soft); }
.pr-dl small, .pr-section__body small { color: var(--c-text-muted); font-size: var(--fs-small); }

@media screen and (max-width: 768px) {
  .pr-dl { grid-template-columns: 1fr; }
  .pr-dl dt { padding: 10px 0 2px; border-bottom: none; }
  .pr-dl dd { padding: 0 0 12px; border-bottom: 1px solid var(--c-rule-soft); }
}

/* 質疑（インタビュー） */
.pr-qa { margin-top: 20px; }
.pr-qa__q {
  font-size: var(--fs-lead); font-weight: 700; color: var(--c-text); line-height: 1.6;
  padding: var(--pad-h2-y) var(--pad-h2-x);
  background: var(--c-cream); border-left: 4px solid var(--c-brand-yellow);
  margin-bottom: 12px;
}
.pr-qa__a { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); margin-bottom: 24px; }
.pr-qa__a:last-child { margin-bottom: 0; }

/* 画像 */
.pr-image-center { text-align: center; margin: 24px 0; }
.pr-image-center img { max-width: 600px; width: 100%; margin: 0 auto; }
.pr-image-center--sm img { max-width: 420px; }
.pr-image-center figcaption { font-size: var(--fs-caption); color: var(--c-text-caption); margin-top: 10px; line-height: 1.7; }
@media screen and (max-width: 768px) {
  .pr-image-center img { max-width: 100%; }
  .pr-image-center--sm img { max-width: 260px; }
}

/* 画像プレースホルダー */
.pr-cutsheet {
  background: var(--c-bg-ph); border: 2px dashed var(--c-line-ph);
  padding: 40px 32px; text-align: center; margin: 28px 0;
  color: var(--c-text-footnote); font-size: var(--fs-caption); line-height: 1.8;
}

/* プロフィール */
.pr-profile {
  background: var(--c-cream); border: 1px solid var(--c-cream-line);
  padding: var(--pad-profile) calc(var(--pad-profile) + 4px);
  font-size: var(--fs-profile); line-height: var(--lh-body); color: var(--c-text);
}
.pr-profile__name { font-size: var(--fs-profile-name); font-weight: 700; margin-bottom: 8px; }
.pr-profile p { margin-bottom: 10px; }
.pr-profile p:last-child { margin-bottom: 0; }

/* リプトンについて（ロゴ＋文） */
.pr-about { display: flex; gap: 28px; align-items: flex-start; }
.pr-about__logo { flex-shrink: 0; width: 110px; }
.pr-about__logo img { width: 100%; }
.pr-about__text { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-text); }
.pr-about__text p { margin-bottom: 16px; }
.pr-about__text p:last-child { margin-bottom: 0; }
@media screen and (max-width: 768px) {
  .pr-about { flex-direction: column; gap: 16px; }
  .pr-about__logo { width: 80px; }
  .pr-about__text p { margin-bottom: 12px; }
}

/* 脚注 */
.pr-footnote { font-size: var(--fs-footnote); color: var(--c-text-footnote); margin-top: 10px; }
sup { font-size: .7em; vertical-align: super; }

/* 企業情報 */
.pr-company { background: var(--c-bg-company); border: 1px solid var(--c-rule); padding: var(--pad-company-y) var(--pad-company-x); }
.pr-company__logo { margin-bottom: 20px; }
.pr-company__logo img { max-width: 280px; }
.pr-company__info { font-size: var(--fs-company); line-height: 2; color: #444; }
@media screen and (max-width: 768px) { .pr-company__logo img { max-width: 200px; } }

/* 注意書き */
.pr-notice {
  background: var(--c-bg-notice); border: 1px solid var(--c-line-notice);
  padding: var(--pad-notice) calc(var(--pad-notice) + 4px);
  font-size: var(--fs-notice); line-height: 2; color: var(--c-text-sub);
}
.pr-notice__title { font-weight: 700; margin-bottom: 6px; }
.pr-notice a { color: var(--c-link); text-decoration: underline; }
.pr-notice dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 .6em; }
.pr-notice dt { font-weight: 700; }

/* ---------------------------------------------------------------------------
   9. 商品概要テーブル
   元サイトに <table> の前例が無いため、上記トークン（罫線色・クリーム地・
   角丸なし）だけで組み立てた拡張。スマホでは枠内横スクロール。
--------------------------------------------------------------------------- */
.pr-tablewrap { margin-top: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pr-tablehint { font-size: var(--fs-small); color: var(--c-text-muted); margin-top: 8px; }
.pr-table {
  width: 100%; min-width: 620px;
  font-size: var(--fs-dl); line-height: 1.7; color: var(--c-text);
  border: 1px solid var(--c-rule);
}
.pr-table th, .pr-table td {
  border: 1px solid var(--c-rule); padding: 10px 12px; text-align: center; vertical-align: middle;
}
.pr-table thead th { background: var(--c-cream); font-weight: 700; word-break: keep-all; }
.pr-table tbody th {
  background: var(--c-cream); font-weight: 700; text-align: left;
  width: 9em; white-space: nowrap;
  position: sticky; left: 0; z-index: 1;
}
.pr-table .is-placeholder { color: var(--c-text-footnote); }
.pr-table__thumb { width: 100%; max-width: 132px; height: auto; margin: 0 auto; }

/* ---------------------------------------------------------------------------
   10. フッター（元サイト style.css の数値を再現）
--------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--c-bg-footer); padding: 50px 85px; color: var(--c-black);
  font-size: 14px; font-weight: 700; line-height: 1;
  display: flex; justify-content: space-between; align-items: flex-start; column-gap: 25px;
}
.footer-items { display: flex; align-items: flex-start; column-gap: 25px; justify-content: space-between; width: 80%; }
.footer-list { display: flex; flex-direction: column; row-gap: 25px; }
@media screen and (max-width: 768px) {
  .site-footer { padding: 25px 15px; }
  .footer-items { flex-wrap: wrap; row-gap: 25px; width: 100%; }
}

/* ---------------------------------------------------------------------------
   11. 画像の取り扱い（元サイト踏襲）
--------------------------------------------------------------------------- */
img { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; }
@media print { img, video { display: none !important; } }

/* ---------------------------------------------------------------------------
   12. 動きを減らす設定
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}