@charset "utf-8";

/* ヘッダーの背景色が transparent で、トップページでは白文字が写真の上に
   直接乗っていた。実測でナビ背景 rgb(168,190,154)、白文字とのコントラスト
   2.00（本文の4.5:1どころか大きい文字の3:1にも届かない）。帯を敷いて解消する。
   商品ページは元から同じ色の帯を !important で敷いているので、全ページで揃う。
   なお main01.css の
   #hdr.hdr--integrate.active:not(.integrate--fixed) .hdrMiddle { background: transparent }
   に詳細度で負けるため、:not() 込みで同じ形を書いて上書きしている。 */
#hdr.hdr--integrate.active:not(.integrate--fixed) .hdrMiddle,
#hdr.hdr--integrate .hdrMiddle {
  background-color: #48504b;
}

/* ページの地色が #48504b（灰緑）で、白いブロックが暗い面に浮いていた。
   商品ページは body を #ffffff にしているのに、トップ・脱酸素製法・ABOUT
   だけが暗いままだったので、商品ページに揃える。
   フッターは #48504b のまま（下に土台がある形は保つ）。 */
body,
#container.topPage {
  background-color: #ffffff;
}

/* 地色を白にしたぶん、地色に頼って白かった文字を戻す */
body {
  color: #1b1b1b;
}

.newsList li h3,
.newsList li h3 a,
.newsList li time,
#main .h2A,
#main .h2A small {
  color: #1b1b1b;
}

/* 告知バーだけは濃色の帯の上なので、白文字のまま残す。
   告知バーは NEWS と同じ .newsList マークアップを使っているため、
   上の .newsList li h3（詳細度 0,1,2）に負ける。.highlight を足して上回る。 */
.highlight,
.highlight .newsList li h3,
.highlight .newsList li h3 a,
.highlight .newsList li time {
  color: #ffffff;
}

/* 関連商品の価格が #868686 で 3.64。小さい文字なので少し締める */
.c-product_item__inner__price.u-color__text--sub,
.c-product_item__inner__price.u-color__text--sub span {
  color: #5f5f5f;
}

/* ヘッダーはスクロールで文字色とロゴが白→黒に切り替わる設計になっている。
   main01.css の白指定が .active:not(.integrate--fixed) で守られているため、
   スクロールで integrate--fixed が付いた瞬間に白の指定が全部外れ、
   濃色の帯の上に黒文字と黒ロゴが乗ってしまう。
   帯は常に #48504b なので、切り替えをやめて白で固定する。 */
#hdr.hdr--integrate .iconNav > ul > li > * > i,
#hdr.hdr--integrate .iconNav > ul > li > a,
#hdr.hdr--integrate .gNav > ul > li > a {
  color: #fff !important;
}

#hdr.hdr--integrate .iconNav > ul > li > * > i:after,
#hdr.hdr--integrate .iconNav > ul > li > a:after,
#hdr.hdr--integrate .gNav > ul > li > a:after {
  border-color: #fff !important;
}

#hdr.hdr--integrate .no-active { display: block !important; }
#hdr.hdr--integrate .on-active { display: none !important; }

/* 日本語のサブラベルが12pxで、ヘッダー内で最も読みにくい */
#hdr .gNav > ul > li > a > span {
  font-size: 13px;
}

/* 画像に焼き込めなかった本文テキスト用。既存テーマに干渉しないよう .mufuCopy 配下に閉じる */

/* トップページの地色が濃いため、背景は必ず自前で塗る（文字色だけ変えると読めなくなる）。
   本文幅はpaddingで作る。子要素にauto marginを持たせると、
   下の .mufuCopy p などのmarginショートハンドに上書きされて効かないため。 */
.mufuCopy {
  background: #ffffff;
  padding: 48px 20px;
  padding: 48px max(20px, calc((100% - 880px) / 2));
  color: #1b1b1b;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  text-align: left;
}

.mufuCopy--tight { padding-top: 32px; padding-bottom: 32px; }

.mufuCopy--gray { background: #f5f5f3; }

/* サイト既存の見出し（.h2A = 24px / line-height 48px）に合わせる。
   独自サイズにすると1ページに見出しの体系が2つできてしまう。 */
.mufuCopy h1,
.mufuCopy h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .04em;
  margin: 0 0 20px;
  color: #1b1b1b;
}

.mufuCopy h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  margin: 28px 0 8px;
  color: #1b1b1b;
}

.mufuCopy p { margin: 0 0 16px; }
.mufuCopy p:last-child { margin-bottom: 0; }

.mufuCopy__lead {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
}

/* .mini はサイト側に定義が無いので、注記記号として見えるようにここで与える */
.mufuCopy .mini {
  font-size: .7em;
  vertical-align: super;
  line-height: 0;
}

.mufuCopy__note {
  font-size: 12px;
  line-height: 1.8;
  color: #6b6b6b;
}

.mufuCopy__points {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.mufuCopy__points li {
  position: relative;
  padding: 0 0 0 22px;
  margin: 0 0 10px;
}

.mufuCopy__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .8em;
  width: 10px;
  height: 2px;
  background: #1b1b1b;
}

/* 濃度バッジ */
.mufuSpec {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 14px;
  border: 1px solid #1b1b1b;
  color: #1b1b1b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}

/* 比較表 */
.mufuTable__wrap { overflow-x: auto; margin: 0 0 12px; }

.mufuTable {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
}

/* 2列の仕様表は横スクロールさせず、狭い画面では折り返す */
.mufuTable--spec { min-width: 0; }
.mufuTable--spec tbody th { white-space: normal; width: 38%; }

.mufuTable th,
.mufuTable td {
  border: 1px solid #dcdcd8;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

/* 濃色のヘッダー帯はこのサイトの語彙に無いので使わない。罫線だけで組む。 */
.mufuTable tbody th {
  font-weight: 500;
  color: #6b6b6b;
  white-space: nowrap;
}

/* 商品ブロック：左に文章、右に写真。色は各ボトルの実測値から起こす。
   C10ボトル #acc494（H90 S29 L67）→ 文字用に L30 まで落として #4d6336（白地 6.66）
   C5+ボトル #bc7c74（H7  S35 L60）→ 同じく L40 で #8a4a42（白地 6.69）
   地はそれぞれ同じ色相の L94。 */
.mufuProduct {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 48px 20px;
  padding: 48px max(20px, calc((100% - 1040px) / 2));
}

.mufuProduct__body {
  flex: 1 1 440px;
  min-width: 0;
}

.mufuProduct__photo {
  flex: 0 1 340px;
  min-width: 0;
}

.mufuProduct__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.mufuProduct--c10 { background: #f0f4eb; }
.mufuProduct--c10 .mufuSpec,
.mufuProduct--c10 .mufuCopy__cta { border-color: #4d6336; color: #4d6336 !important; }
.mufuProduct--c10 .mufuCopy__cta:hover { background: #4d6336; color: #fff !important; }
.mufuProduct--c10 .mufuCopy__points li::before { background: #4d6336; }

.mufuProduct--ac { background: #f5ecea; }
.mufuProduct--ac .mufuSpec,
.mufuProduct--ac .mufuCopy__cta { border-color: #8a4a42; color: #8a4a42 !important; }
.mufuProduct--ac .mufuCopy__cta:hover { background: #8a4a42; color: #fff !important; }
.mufuProduct--ac .mufuCopy__points li::before { background: #8a4a42; }

@media (max-width: 750px) {
  .mufuProduct {
    display: block;
    padding: 32px 18px;
  }
  .mufuProduct__photo {
    margin: 24px auto 0;
    max-width: 300px;
  }
}

/* SKUの選び分け */
.mufuPick {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 16px;
}

.mufuPick__item {
  flex: 1 1 300px;
  border: 1px solid #dcdcd8;
  padding: 20px;
}

.mufuPick__item h3 { margin-top: 0; }
.mufuPick__item .mufuSpec { margin-bottom: 10px; }

.mufuCopy a { color: #1b1b1b; text-decoration: underline; }
.mufuCopy a:hover { opacity: .7; }

/* サイトのアートワーク内のCTA（View More）に合わせた細線のピル。
   ベタ塗りのボタンはこのサイトのどこにも無い。 */
.mufuCopy__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 13px 34px;
  border: 1px solid #1b1b1b;
  border-radius: 999px;
  background: transparent;
  color: #1b1b1b !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  text-decoration: none !important;
  line-height: 1.4;
  transition: background-color .2s, color .2s;
}

.mufuCopy__cta:hover {
  background: #1b1b1b;
  color: #fff !important;
  opacity: 1;
}

@media (max-width: 750px) {
  .mufuCopy { padding: 32px 18px; font-size: 14px; }
  .mufuCopy h1,
  .mufuCopy h2 { font-size: 19px; }
  .mufuCopy__lead { font-size: 15px; }
}