@charset "UTF-8";

/* ============================================================
   品質へのこだわり (quality.aspx)
   - サイトのベース: html { font-size: 62.5% } で 1rem = 10px
   - 全宣言を #quality.p-quality__article にスコープして共通 CSS に勝つ
   - PC: アートボード 1400px → 中身 1000px (= 100rem)
   - SP: アートボード 375px → @media (max-width: 768px)
   ============================================================ */

#quality.p-quality__article {
  --c-gold: #a27a25;
  --c-gold-bg: #f5efe2;
  --c-blue-deep: #102b76;
  --c-blue-band-from: #0c266e;
  --c-blue-band-to: #1177c3;
  --c-text: #141313;

  --ff-serif: var(--ff-noto-serif-jp, "Noto Serif JP"), "游明朝", "Yu Mincho", "YuMincho", serif;
  --ff-latin: var(--ff-cardo, "Cardo"), "Times New Roman", serif;
  --ff-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif;

  --contentsMaxWidth: 100rem;
  --contentsOuterWidth: calc(100rem + var(--contentsPadding, 3rem) * 2);

  position: relative;
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.03em;
  background: #fff;
}

#quality.p-quality__article .p-quality__inner {
  display: block;
  width: 100%;
  max-width: var(--contentsOuterWidth, calc(130rem + 3rem * 2));
  margin: 0 auto;
  padding: 0 var(--contentsPadding, 3rem);
  box-sizing: border-box;
}

/* 共通 CSS のリセット (margin/padding/list-style 等のレイアウト系のみ) */
#quality.p-quality__article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
#quality.p-quality__article p,
#quality.p-quality__article h1,
#quality.p-quality__article h2,
#quality.p-quality__article h3,
#quality.p-quality__article h4,
#quality.p-quality__article ul,
#quality.p-quality__article ol,
#quality.p-quality__article li,
#quality.p-quality__article dl,
#quality.p-quality__article dt,
#quality.p-quality__article dd,
#quality.p-quality__article figure,
#quality.p-quality__article figcaption,
#quality.p-quality__article section,
#quality.p-quality__article nav,
#quality.p-quality__article article {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
  box-sizing: border-box;
  font-style: normal;
}
#quality.p-quality__article *,
#quality.p-quality__article *::before,
#quality.p-quality__article *::after {
  box-sizing: border-box;
}
#quality.p-quality__article a {
  color: inherit;
  text-decoration: none;
}
#quality.p-quality__article sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 1;
}

/* ---- ユーティリティ: PC/SP の改行切替 ------------------- */
/* デフォルト (PC) では .u-br-sp を非表示にして .u-br-pc を表示。
   @media (max-width: 768px) で逆転させる。 */
#quality.p-quality__article .u-br-sp { display: none; }
#quality.p-quality__article .u-br-pc { display: inline; }

/* ---- KV -------------------------------------------------- */
#quality.p-quality__article .p-quality__kv {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#quality.p-quality__article .p-quality__kv img {
  width: 100%;
  height: auto;
  display: block;
}
#quality.p-quality__article .p-quality__kv-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#quality.p-quality__article .p-quality__kv-title span {
  display: block;
}

/* ---- section_lead --------------------------------------- */
#quality.p-quality__article .p-quality__lead {
  padding-block: 6rem 8rem;
  text-align: center;
}
#quality.p-quality__article .p-quality__lead-sub {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--c-blue-deep);
  font-size: 2rem;
  line-height: 2.64;
  letter-spacing: 0.03em;
  margin: 0;
}
#quality.p-quality__article .p-quality__lead-title {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--c-blue-deep);
  font-size: 2.8rem;
  line-height: 1.886;
  letter-spacing: 0.03em;
  margin: 0;
}
#quality.p-quality__article .p-quality__lead-latin {
  font-family: var(--ff-latin);
  font-weight: 700;
  font-style: normal;
}
#quality.p-quality__article .p-quality__lead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  width: 100rem;
  max-width: 100%;
  margin: 5.4rem auto 0;
  padding-inline: 3.2rem;
}
#quality.p-quality__article .p-quality__lead-body {
  font-family: var(--ff-serif);
  font-weight: 500;
  color: var(--c-text);
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.03em;
  width: 62.6rem;
  max-width: 100%;
  margin: 0;
  text-align: justify;
  flex-shrink: 0;
}
#quality.p-quality__article .p-quality__lead-logo {
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
}
#quality.p-quality__article .p-quality__lead-logo img {
  width: 25rem;
  height: auto;
  display: inline-block;
}
#quality.p-quality__article .p-quality__lead-caption {
  font-family: var(--ff-sans);
  font-weight: 300;
  color: var(--c-text);
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.03em;
  width: 100rem;
  max-width: 100%;
  min-height: 16rem;
  margin: 6rem auto 0;
  padding: 3.2rem 2rem;
  background: #f4f4f4;
  border: 0.1rem solid #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* ---- section_point -------------------------------------- */
#quality.p-quality__article .p-quality__points {
  margin-top: 0;
}
#quality.p-quality__article .p-quality__points-header {
  display: block;
  width: 100%;
  margin: 0;
  background: linear-gradient(-4.355deg, var(--c-blue-band-to) 6.34%, var(--c-blue-band-from) 94.93%);
  color: #fff;
}
#quality.p-quality__article .p-quality__points-header-inner {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
  max-width: var(--contentsOuterWidth);
  min-height: 8.1rem;
  margin: 0 auto;
  padding: 1.6rem var(--contentsPadding, 3rem);
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 3.2rem;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.5;
}
#quality.p-quality__article .p-quality__points-header-inner .p-quality__lead-latin {
  font-size: 3.4rem;
}
#quality.p-quality__article .p-quality__points-inner {
  padding-top: 6rem;
}

/* Point 共通 */
#quality.p-quality__article .p-quality__point {
  width: 100%;
  margin: 8rem auto 0;
}
#quality.p-quality__article .p-quality__point:first-child {
  margin-top: 0;
}
#quality.p-quality__article .p-quality__point-no {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  font-family: var(--ff-latin);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--c-gold);
  margin: 0;
}
#quality.p-quality__article .p-quality__point-no::before,
#quality.p-quality__article .p-quality__point-no::after {
  content: "";
  width: 6rem;
  height: 0.2rem;
  display: inline-block;
  flex-shrink: 0;
}
#quality.p-quality__article .p-quality__point-no::before {
  background: linear-gradient(to left, var(--c-gold) 0%, rgba(162, 122, 37, 0) 100%);
}
#quality.p-quality__article .p-quality__point-no::after {
  background: linear-gradient(to right, var(--c-gold) 0%, rgba(162, 122, 37, 0) 100%);
}
#quality.p-quality__article .p-quality__point-title {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--c-gold);
}
#quality.p-quality__article .p-quality__point-body {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--c-text);
  width: 46rem;
  max-width: 100%;
  margin: 0;
}
#quality.p-quality__article .p-quality__point-body--wide {
  width: 62rem;
}
#quality.p-quality__article .p-quality__point-body sup {
  font-size: 0.65em;
  vertical-align: middle;
  line-height: 1;
  letter-spacing: 0;
}
#quality.p-quality__article .p-quality__point-note {
  margin-top: 1.2rem;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--c-text);
  width: 46rem;
  max-width: 100%;
}
#quality.p-quality__article .p-quality__point-note--center {
  width: 100%;
  text-align: center;
}
#quality.p-quality__article .p-quality__point-note--lg {
  font-size: 1.3rem;
  line-height: 1.75;
}
#quality.p-quality__article .p-quality__point-figure {
  margin: 0;
}
#quality.p-quality__article .p-quality__point-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Point 1, 2, 3: 横並び */
#quality.p-quality__article .p-quality__point--row .p-quality__point-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  margin-top: 3.2rem;
}
#quality.p-quality__article .p-quality__point--row .p-quality__point-body-wrap {
  flex: 0 0 auto;
  width: 46rem;
}
#quality.p-quality__article .p-quality__point--reverse .p-quality__point-content {
  flex-direction: row;
}
#quality.p-quality__article .p-quality__point-figure--map,
#quality.p-quality__article .p-quality__point-figure--lab,
#quality.p-quality__article .p-quality__point-figure--products {
  width: 50rem;
}

/* Point 4, 5: 縦並び */
#quality.p-quality__article .p-quality__point--stack .p-quality__point-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 3.2rem;
}
#quality.p-quality__article .p-quality__point--stack .p-quality__point-body {
  margin: 0 auto;
  text-align: justify;
}
#quality.p-quality__article .p-quality__point--stack .p-quality__point-note {
  margin-top: 0;
}
#quality.p-quality__article .p-quality__point-figure--purity,
#quality.p-quality__article .p-quality__point-figure--qc {
  width: 80rem;
  max-width: 100%;
}

/* ---- section_message ------------------------------------ */
#quality.p-quality__article .p-quality__message {
  margin-top: 8rem;
}
#quality.p-quality__article .p-quality__message-title {
  display: block;
  width: 100%;
  margin: 0;
  background: linear-gradient(-4.355deg, var(--c-blue-band-to) 6.34%, var(--c-blue-band-from) 94.93%);
  color: #fff;
}
#quality.p-quality__article .p-quality__message-title-inner {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--contentsOuterWidth);
  min-height: 8.1rem;
  margin: 0 auto;
  padding: 1.6rem var(--contentsPadding, 3rem);
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 3.2rem;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.5;
}
#quality.p-quality__article .p-quality__message-title-inner .p-quality__lead-latin {
  font-size: 3.4rem;
}
#quality.p-quality__article .p-quality__message-inner {
  margin-top: 6.8rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5rem;
  padding-bottom: 6rem;
}
#quality.p-quality__article .p-quality__message-photo {
  margin: 0;
  width: 45rem;
  flex-shrink: 0;
}
#quality.p-quality__article .p-quality__message-photo img {
  width: 100%;
  height: auto;
  display: block;
}
#quality.p-quality__article .p-quality__message-text {
  width: 50rem;
  flex-shrink: 0;
}
#quality.p-quality__article .p-quality__message-lead {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--c-text);
  margin: 0;
}
#quality.p-quality__article .p-quality__message-body {
  margin-top: 2.4rem;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--c-text);
  text-align: justify;
}
#quality.p-quality__article .p-quality__message-author {
  margin-top: 3.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  text-align: right;
}
#quality.p-quality__article .p-quality__message-affiliation {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--c-text);
  text-align: right;
}
#quality.p-quality__article .p-quality__message-name {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--c-text);
}

/* ---- bnr_area (完成版1枚絵2つ) --------------------------- */
#quality.p-quality__article .p-quality__bnr-section {
  margin-top: 0;
}
#quality.p-quality__article .p-quality__bnr {
  display: grid;
  grid-template-columns: 49rem 49rem;
  gap: 2rem;
  justify-content: center;
  padding-bottom: 2rem;
  list-style: none;
}
#quality.p-quality__article .p-quality__bnr-card {
  display: block;
  width: 49rem;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}
#quality.p-quality__article .p-quality__bnr-card:hover { opacity: 0.85; }
#quality.p-quality__article .p-quality__bnr-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- note ----------------------------------------------- */
#quality.p-quality__article .p-quality__note-wrap {
  margin: 0 auto;
  padding-bottom: 1.8rem;
}
#quality.p-quality__article .p-quality__note {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--c-text);
  text-align: center;
}

/* ---- back / TOPへ戻る ----------------------------------- */
#quality.p-quality__article .p-quality__top-link {
  margin: 6rem auto 0;
  text-align: center;
}
#quality.p-quality__article .p-quality__top-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30rem;
  height: 5rem;
  background: #a7a5a5;
  color: #fff;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.03em;
  border-radius: 99.9rem;
  text-align: center;
}
#quality.p-quality__article .p-quality__top-link a:hover { opacity: 0.85; }

/* ============================================================
   SP (max-width: 768px) — Figma SP アートボード対応は後続
   ============================================================ */
@media (max-width: 768px) {
  #quality.p-quality__article .u-br-pc { display: none; }
  #quality.p-quality__article .u-br-sp { display: inline; }

  #quality.p-quality__article {
    font-size: 1.4rem;
    line-height: 1.9;
  }
  #quality.p-quality__article .p-quality__inner {
    padding-inline: 0;
  }
  #quality.p-quality__article .p-quality__kv {
    padding-inline: 0;
  }
  #quality.p-quality__article .p-quality__lead {
    padding: 4rem 1rem 0;
  }
  #quality.p-quality__article .p-quality__lead-sub {
    font-size: 1.7rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }
  #quality.p-quality__article .p-quality__lead-title {
    font-size: 2.3rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-top: 1rem;
  }
  #quality.p-quality__article .p-quality__lead-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
    margin-top: 4rem;
    padding-inline: 0;
  }
  #quality.p-quality__article .p-quality__lead-logo {
    order: 0;
    width: 18rem;
  }
  #quality.p-quality__article .p-quality__lead-logo img {
    width: 100%;
  }
  #quality.p-quality__article .p-quality__lead-body {
    order: 1;
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: 0.03em;
    width: 100%;
    margin-top: 0.8rem;
  }
  #quality.p-quality__article .p-quality__lead-caption {
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: 0.03em;
    width: 100%;
    min-height: auto;
    padding: 2rem 3rem;
    margin-top: 3.2rem;
    text-align: left;
    align-items: stretch;
  }

  #quality.p-quality__article .p-quality__points {
    margin-top: 5.4rem;
  }
  #quality.p-quality__article .p-quality__points-header-inner {
    display: block;
    min-height: 9.4rem;
    padding: 1rem 1.5rem;
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-align: center;
  }
  #quality.p-quality__article .p-quality__points-header-inner .p-quality__lead-latin {
    font-size: 2.4rem;
  }
  #quality.p-quality__article .p-quality__points-inner {
    padding-top: 3rem;
    padding-inline: 1.5rem;
  }

  #quality.p-quality__article .p-quality__point {
    margin: 4rem auto 0;
    padding: 0;
  }
  #quality.p-quality__article .p-quality__point-no {
    font-size: 2.2rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    gap: 1.2rem;
  }
  #quality.p-quality__article .p-quality__point-no::before,
  #quality.p-quality__article .p-quality__point-no::after {
    width: 6rem;
    height: 0.2rem;
  }
  #quality.p-quality__article .p-quality__point-title {
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-top: 0.6rem;
  }
  /* SP: --row / --stack いずれも縦並び */
  #quality.p-quality__article .p-quality__point--row .p-quality__point-content,
  #quality.p-quality__article .p-quality__point--stack .p-quality__point-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 3rem;
  }
  #quality.p-quality__article .p-quality__point--row .p-quality__point-body-wrap {
    width: 100%;
  }
  #quality.p-quality__article .p-quality__point-body,
  #quality.p-quality__article .p-quality__point-body--wide {
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: 0.03em;
    width: 100%;
    text-align: justify;
  }
  #quality.p-quality__article .p-quality__point-note,
  #quality.p-quality__article .p-quality__point--stack .p-quality__point-note {
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    width: 100%;
    margin-top: 1.6rem;
    text-align: left;
  }
  #quality.p-quality__article .p-quality__point-note--lg {
    font-size: 1.2rem;
    line-height: 1.5;
  }
  #quality.p-quality__article .p-quality__point-figure,
  #quality.p-quality__article .p-quality__point-figure--map,
  #quality.p-quality__article .p-quality__point-figure--lab,
  #quality.p-quality__article .p-quality__point-figure--products,
  #quality.p-quality__article .p-quality__point-figure--purity,
  #quality.p-quality__article .p-quality__point-figure--qc {
    width: 100%;
    margin: 0;
  }

  /* SP: Point 1,2,3 は figure → body の順 (Figma SP デザイン) */
  #quality.p-quality__article .p-quality__point--row .p-quality__point-figure {
    order: 0;
  }
  #quality.p-quality__article .p-quality__point--row .p-quality__point-body-wrap {
    order: 1;
    margin-top: 2.2rem;
  }

  /* SP: Point 4,5 は body → note → figure の順 (HTML 順そのまま) */
  #quality.p-quality__article .p-quality__point--stack .p-quality__point-figure {
    margin-top: 4.5rem;
  }

  #quality.p-quality__article .p-quality__message {
    margin-top: 8rem;
  }
  #quality.p-quality__article .p-quality__message-title-inner {
    display: block;
    min-height: 9.4rem;
    padding: 2.4rem 1.2rem;
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-align: center;
  }
  #quality.p-quality__article .p-quality__message-title-inner .p-quality__lead-latin {
    font-size: 2.4rem;
  }
  #quality.p-quality__article .p-quality__message-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 3rem;
    padding: 0 1.5rem;
    padding-bottom: 0;
  }
  #quality.p-quality__article .p-quality__message-photo {
    width: 100%;
    margin: 0;
  }
  #quality.p-quality__article .p-quality__message-text {
    width: 100%;
    margin-top: 2.8rem;
  }
  #quality.p-quality__article .p-quality__message-lead {
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }
  #quality.p-quality__article .p-quality__message-body {
    margin-top: 2.4rem;
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: 0.03em;
  }
  #quality.p-quality__article .p-quality__message-author {
    margin-top: 2.4rem;
    gap: 0.6rem;
  }
  #quality.p-quality__article .p-quality__message-affiliation {
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }
  #quality.p-quality__article .p-quality__message-name {
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.03em;
  }

  #quality.p-quality__article .p-quality__bnr-section {
    margin-top: 6rem;
  }
  #quality.p-quality__article .p-quality__bnr {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
    padding-bottom: 0;
  }
  #quality.p-quality__article .p-quality__bnr-card {
    width: 100%;
  }

  #quality.p-quality__article .p-quality__note-wrap {
    margin-top: 1.7rem;
    padding-bottom: 0;
    padding-inline: 1.5rem;
  }
  #quality.p-quality__article .p-quality__note {
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-align: left;
  }

  #quality.p-quality__article .p-quality__top-link {
    margin-top: 5.7rem;
  }
  #quality.p-quality__article .p-quality__top-link a {
    width: 24rem;
    height: 5rem;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.03em;
  }
}