@charset "UTF-8";

/* リセット */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  /* ドロワーを開いた時にスクロールバーが消えて画面幅が変わるのを防ぐ */
  scrollbar-gutter: stable;
}

@media (min-width: 768px) and (max-width: 1280px) {
  html {
    font-size: 0.78064vw;
  }
}

@media (max-width: 374px) {
  html {
    font-size: 2.6667vw;
  }
}

body,
h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ローディング画面 */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading__logo {
  opacity: 0;
}

.loading__logo img {
  width: 20.4rem;
  height: auto;
}

.loading.is-active .loading__logo {
  animation: loading-logo 2.5s ease forwards;
}

.loading.is-done {
  animation: loading-hide 0.8s ease forwards;
}

@keyframes loading-logo {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes loading-hide {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 767px) {
  .loading__logo img {
    width: 15.3rem;
  }
}

/* 共通変数 */
:root {
  --blue-logo: #004da0;
  --blue-bg: #016dc2;
  --blue-main: #1565a0;
  --blue-alt: #1e72bc;
  --blue-a: #0060b3;
  --blue-b: #1c6cb2;
  --blue-catch: #5bafd7;
  --blue-dot: #56acd5;
  --ink: #231815;

  --mint: #cff9f0;
  --sky-a: #a7e5ff;
  --sky-c: #d9ecfe;
  --sky-f: #FFF5E9;

  --fs-13: 1.3rem;
  --fs-135: 1.35rem;
  --fs-14: 1.4rem;
  --fs-15: 1.5rem;
  --fs-16: 1.6rem;

  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Josefin Sans", sans-serif;
  --font-catch: "Lato", sans-serif;
  --fw-catch: 900;

  --inner: 124rem;
}

/* 基準 */
body {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: var(--fs-16);
  line-height: 1.8;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  position: relative;
  overflow: hidden;
}

/* ボタン */
.btn {
  display: flex;
  align-items: center;
  height: 3.8rem;
  padding-left: 1.3rem;
  border-radius: 0.5rem;
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 2.34rem;
  letter-spacing: 0.065rem;
}

.btn__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: clamp(0px, calc(21.29vw - 17.36rem), 13.3rem);
  min-width: max-content;
  height: 2.5rem;
  white-space: nowrap;
}

.btn__label .icon-ext {
  width: 1.2rem;
  height: 1.2rem;
}

.btn--outline {
  box-shadow: inset 0 0 0 1px var(--blue-main);
  color: var(--blue-main);
  transition: background-color 0.3s, color 0.3s;
}

.btn--outline:hover {
  background-color: var(--blue-main);
  color: #fff;
}

.btn--fill {
  background: var(--blue-main);
  color: #fff;
  transition: background-color 0.3s, color 0.3s;
}

.btn--fill:hover {
  background-color: #fff;
  color: var(--blue-main);
  box-shadow: inset 0 0 0 1px var(--blue-main);
}

.btn__arrow {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 100%;
  flex-shrink: 0;
}

.btn__arrow svg {
  width: 1.1rem;
  height: 1.2rem;
  fill: currentColor;
  transition: transform 0.3s;
}

.btn--outline:hover .btn__arrow svg,
.btn--fill:hover .btn__arrow svg {
  transform: translateX(0.3rem);
}

/* ヘッダー */
.header {
  position: fixed;
  top: 1.5rem;
  left: 0;
  z-index: 10;
  width: 100%;
}

.header__bar {
  width: calc(100% - 3.4rem);
  height: 7rem;
  margin: 0 auto;
  border-radius: 0.7rem;
  background: #fff;
  transition: box-shadow 0.3s, border-radius 0.25s;
}

.header.is-scrolled .header__bar,
.is-subpage .header__bar {
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1.8rem 0 3.1rem;
}

.header__logo img {
  width: 14.62rem;
  height: auto;
  transition: opacity 0.3s;
}
.header__logo a:hover img {
  opacity: 0.5;
}

.header__right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  width: 92.7rem;
  max-width: calc(100% - 14.62rem - 8rem);
}

.nav {
  width: 47.739rem;
  min-width: 41rem;
}

.nav__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 1.6rem;
}

.nav__item a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--blue-main);
  font-size: var(--fs-135);
  font-weight: 700;
  letter-spacing: 0.135rem;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.nav__item a:hover {
  opacity: 0.5;
}

.nav__sep {
  width: 1px;
  height: 1.5rem;
  background: var(--blue-main);
}

.icon-ext {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header__tools {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2.5rem;
  position: relative;
}

.icon-search {
  width: 2.2rem;
  height: 2.2rem;
  fill: #000;
}

.header__btns {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}

.header__search-bar {
  position: absolute;
  top: 50%;
  right: 0;
  left: 4.5rem;
  height: 4rem;
  transform: translateY(-50%) translateX(1rem);
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  z-index: 10;
}

.header__search-bar.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.header__search-bar.is-open ~ .header__btns {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  height: 100%;
  padding: 0 1.2rem;
}

.search-bar__input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  font-size: 1.6rem;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
}

.search-bar__input::placeholder {
  color: #aaa;
}

.search-bar__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: #666;
  transition: color 0.3s;
}

.search-bar__close:hover {
  color: var(--ink);
}

/* FV */
.fv {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 829;
}

.fv__blob-pale,
.fv__blob-sky,
.fv__dot,
.fv__text,
.fv__photo,
.fv__circle,
.fv__products,
.fv__tvcm {
  position: absolute;
}

/* FV 背景ブロブ */
.fv__blob-pale {
  left: 0;
  top: 35.83%;
  z-index: -1;
  width: 57.43%;
}

.fv__blob-sky {
  left: 81.04%;
  top: 71.65%;
  width: 18.96%;
}

.fv__dot--01 {
  left: 49.17%;
  top: 12.55%;
  width: 12.43%;
}

.fv__dot--02 {
  left: 0;
  top: 83.957%;
  width: 8.403%;
}

.fv__dot--03 {
  left: 61.597%;
  top: 84.922%;
  width: 9.514%;
}

/* FV テキスト */
.fv__text {
  left: 7.01%;
  top: 14.60%;
  display: flex;
  flex-direction: column;
  gap: 1.391vw;
  width: 42.29%;
}

.fv__catch {
  font-family: "Urbanist", var(--font-catch), sans-serif;
  font-size: 5.131vw;
  font-weight: 800;
  line-height: 5.9vw;
}

.fv__catch span {
  display: inline;
}

/* .fv__catch span より詳細度を上げないと inline のままになり transform が効かない */
.fv__catch span.fv__catch-line {
  display: block;
}

.fv__catch-a {
  color: var(--blue-main);
}

.fv__catch-b {
  display: block;
  color: var(--blue-catch);
}

.fv__catch-c {
  color: var(--blue-dot);
}

.fv__lead {
  font-size: 1.438vw;
  font-weight: 700;
  line-height: 2.301vw;
  letter-spacing: 0.173vw;
  color: #000;
}

/* FV ビジュアル */
.fv__photo {
  left: 59.703%;
  top: 11.495%;
  width: 39.167%;
}

.fv__circle--01 {
  left: 49.31%;
  top: 50.91%;
  width: 18.54%;
}

.fv__circle--02 {
  left: 83.61%;
  top: 54.77%;
  width: 12.92%;
}

.fv__products {
  left: 0.032%;
  top: 47.711%;
  width: 57.031%;
  aspect-ratio: 805 / 490;
}

/* FV TVCMバナー */
.fv__tvcm {
  left: 76.3521%;
  top: 85.53%;
  width: 23.6479%;
}

.fv__tvcm img {
  transition: opacity 0.3s;
}

.fv__tvcm:hover img {
  opacity: 0.7;
}

/* TVCM 動画ポップアップ */
.movie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.movie-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s;
}

.movie-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.movie-modal__body {
  position: relative;
  width: min(100%, 1000px, calc((100vh - 140px) * 16 / 9));
}

.movie-modal__frame {
  aspect-ratio: 16 / 9;
  background: #000;
}

.movie-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.movie-modal__close {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.movie-modal__close::before,
.movie-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 2px;
  background: var(--blue-main);
}

.movie-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.movie-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ===== FV 出現モーション =====
   1) 背景＋メイン写真 → 2) キャッチ3行を順に → 3) リード文 → 4) 補助ビジュアル
   出現後は定位置で静止し、継続的な動きは持たせない                        */
.fv__blob-pale,
.fv__blob-sky,
.fv__blob-pale--sp,
.fv__blob-sky--sp,
.fv__photo,
.fv__catch-line,
.fv__lead,
.fv__dot,
.fv__circle,
.fv__circle--sp,
.fv__products,
.fv__products--sp,
.fv__tvcm,
.fv__tvcm--sp {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* 1) 背景ブロブ：静かにフェードイン */
.fv__blob-pale,
.fv__blob-sky,
.fv__blob-pale--sp,
.fv__blob-sky--sp {
  transition-delay: 0.2s;
}

/* 1) メイン女性写真：枠の中心から広がる */
.fv__photo {
  transform: scale(0.55);
  transform-origin: 50% 50%;
  transition-duration: 0.73s;
  transition-delay: 0.3s;
}

/* 2) キャッチコピー：1行ずつ下からふわっと。
   文字が見えたあともゆっくり上がり続けるよう、移動は透明度より長くとる */
.fv__catch-line {
  transform: translateY(2.4rem);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.fv__catch-line:nth-child(1) { transition-delay: 1s; }
.fv__catch-line:nth-child(2) { transition-delay: 1.15s; }
.fv__catch-line:nth-child(3) { transition-delay: 1.3s; }

/* 3) リード文：直後に下からふわっと */
.fv__lead {
  transform: translateY(1.6rem);
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 1.5s;
}

/* 4) 補助ビジュアル：ひとまとまりでフェードイン */
.fv__dot,
.fv__products,
.fv__products--sp,
.fv__tvcm,
.fv__tvcm--sp {
  transition-delay: 1.75s;
}

/* ヘッダーはリード文と同じタイミングで、その場でふわっと出す */
.header {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;
}

.header.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .header {
    opacity: 1;
    transition: none;
  }
}

/* 人物写真は主役と同じく中心から広がる。メイン写真が出きった直後に続ける */
.fv__circle,
.fv__circle--sp {
  transform: scale(0.6);
  transform-origin: 50% 50%;
  transition-duration: 0.67s;
  transition-delay: 0.6s;
}

.fv.is-ready .fv__blob-pale,
.fv.is-ready .fv__blob-sky,
.fv.is-ready .fv__blob-pale--sp,
.fv.is-ready .fv__blob-sky--sp,
.fv.is-ready .fv__photo,
.fv.is-ready .fv__catch-line,
.fv.is-ready .fv__lead,
.fv.is-ready .fv__dot,
.fv.is-ready .fv__circle,
.fv.is-ready .fv__circle--sp,
.fv.is-ready .fv__products,
.fv.is-ready .fv__products--sp,
.fv.is-ready .fv__tvcm,
.fv.is-ready .fv__tvcm--sp {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fv__blob-pale,
  .fv__blob-sky,
  .fv__blob-pale--sp,
  .fv__blob-sky--sp,
  .fv__photo,
  .fv__catch-line,
  .fv__lead,
  .fv__dot,
  .fv__circle,
  .fv__circle--sp,
  .fv__products,
  .fv__products--sp,
  .fv__tvcm,
  .fv__tvcm--sp {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== 見出しのスクロール出現 =====
   画面に入ったら1行ずつ下からふわっと。出現後は静止 */
.reveal__line {
  opacity: 0;
  transform: translateY(2.4rem);
  transition:
    opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.55s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* h2 の中で行として並べるためのブロック化 */
h2 > span.reveal__line {
  display: block;
}

.is-shown.reveal__line,
.is-shown .reveal__line {
  opacity: 1;
  transform: none;
}

.fade-up {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.fade-up.is-shown {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal__line,
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* セルフケア */
.selfcare {
  position: relative;
  padding: 17.2rem 0 4.922rem;
}

.selfcare__blue,
.selfcare__beige {
  position: absolute;
}

.selfcare__blue {
  left: 0;
  top: -26.3rem;
  z-index: -4;
  width: 100%;
  height: 121.5rem;
}

.selfcare__beige {
  left: 0;
  top: 9.3rem;
  z-index: -3;
  width: 100%;
  height: 76.7rem;
}

.selfcare__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 本文1行目を「活かし、」まで収めるため 113.1rem から広げている（写真と間隔は不変） */
  width: 116.5rem;
  max-width: calc(100% - 8rem);
  margin: 0 auto;
}

.selfcare__dot {
  position: absolute;
  left: 1.5rem;
  top: 54.9rem;
  width: 12.533rem;
}

.selfcare__photo {
  width: min(52.696rem, 36.594vw);
  flex-shrink: 0;
  margin-right: 2.833%;
}

.selfcare__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.selfcare__title {
  min-height: min(13.883vw, 19.99rem);
  color: var(--blue-main);
  font-size: clamp(2rem, 3.681vw, 5.3rem);
  font-weight: 700;
  line-height: 1.443;
  letter-spacing: 0.166rem;
}

.selfcare__text {
  color: #000;
  font-size: 1.7rem;
  line-height: 4.08rem;
  letter-spacing: 0.034rem;
}

/* 商品情報 */
.products {
  position: relative;
  margin-top: 8.7rem;
  padding: 24.462rem 2rem 15.138rem;
}

.products__blob,
.products__wash,
.products__drop,
.products__label,
.products__title,
.products__nav {
  position: absolute;
  z-index: 2;
}

.products__blob {
  left: 66.45rem;
  top: -45.762rem;
  z-index: -2;
  width: 84.3rem;
}

.products__wash {
  left: 0;
  top: -8.762rem;
  z-index: -1;
  width: 100%;
  height: 123.6rem;
}

.products__drop {
  left: -8.95rem;
  top: -16.386rem;
  z-index: -1;
  width: 26rem;
}

.products__label {
  left: 0;
  top: 11.999rem;
  width: 100%;
  color: var(--blue-main);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 2.32rem;
  text-align: center;
}

.products__title {
  left: 0;
  top: 14.899rem;
  width: 100%;
  color: var(--blue-main);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 5.07rem;
  text-align: center;
}

.products__inner {
  position: relative;
  width: 100%;
  max-width: 124.1rem;
  margin: 0 auto;
}

.products__cards {
  display: flex;
  gap: 2.4rem;
  height: 28.2rem;
}

.products__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
  margin-top: 3rem;
}

.products__carousel {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.products__track {
  display: flex;
  gap: 1.025rem;
  overflow: hidden;
}

.products__nav {
  display: grid;
  place-items: center;
  width: 3.421rem;
  height: 3.421rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
}

.products__nav--prev {
  left: max(-5.576rem, calc(50% - 50vw + 0.5rem));
  top: 12.274rem;
  transform: rotate(180deg);
}

.products__nav--next {
  right: max(-5.576rem, calc(50% - 50vw + 0.5rem));
  top: 12.273rem;
}

.icon-chevron {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--blue-alt);
  stroke-width: 2.16;
  stroke-linecap: round;
}

/* 商品情報 大カード */
.pcard {
  display: flex;
  flex: 1 1 0;
  height: 28.2rem;
  padding: 2.4rem 3.4rem 2.8rem 3.3rem;
  border-radius: 1rem;
  background: #fff;
}

.pcard__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.pcard__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22.4rem;
  height: 20.7rem;
}

.pcard__head-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.pcard__head {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 22.869rem;
}

.pcard__lead {
  color: var(--blue-alt);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 2.2rem;
}

.pcard__name {
  color: var(--blue-alt);
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 3.993rem;
}

.pcard__desc {
  align-self: stretch;
  color: #19324c;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 2.1rem;
  letter-spacing: 0.07rem;
}

.pcard__img--harix {
  width: 30.618rem;
}

.pcard__img--besoften {
  /* 新パッケージの画像に差し替えた際、小さく見えたため拡大（26.45 → 110% → さらに105%）＋10px下げ */
  width: 30.56rem;
  transform: translateY(1rem);
}

.btn-brand {
  display: flex;
  align-items: center;
  width: 18.7rem;
  height: 4.2rem;
  padding: 0 0.894rem 0 2.355rem;
  white-space: nowrap;
  border: 0.085rem solid var(--blue-logo);
  border-radius: 0.425rem;
  color: var(--blue-logo);
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1.95rem;
  letter-spacing: 0.13rem;
}

.btn-brand {
  transition: background-color 0.3s, color 0.3s;
}

.btn-brand .icon-arrow {
  margin-left: auto;
  width: 1.478rem;
  height: 1.154rem;
  transition: transform 0.3s;
}

.btn-brand:hover {
  background-color: var(--blue-logo);
  color: #fff;
}

.btn-brand:hover .icon-arrow {
  transform: translateX(0.3rem);
}

/* 商品情報 小カード */
.ccard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 24rem;
  min-width: 24rem;
  height: 29.9rem;
  padding: 1.98rem 2.64rem;
  border-radius: 1rem;
  background: #fff;
  transition: opacity 0.3s;
}

/* 商品情報ページのカードと同じく、乗せたときに薄くする */
.ccard:hover {
  opacity: 0.7;
}

.ccard__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.32rem;
  /* 「しっかり貼る鎮痛テープ」12文字が1行に収まる幅 */
  width: 21.12rem;
}

.ccard__lead {
  color: var(--blue-alt);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.16rem;
  text-align: center;
}

.ccard__name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 5.766rem;
  color: var(--blue-alt);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 3.01rem;
  letter-spacing: 0.125rem;
  text-align: center;
}

/* カルーセルの写真。商品ごとに縦横比が違うので、共通の枠に収めて下ぞろえにする */
.ccard__img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 14.923rem;
  height: 14.682rem;
}

.ccard__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ccard__img img[src*="products-teipap"] {
  margin-bottom: 1rem;
}

.ccard__img img[src*="products-winpas-cool"],
.ccard__img img[src*="products-horkis"] {
  margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
  .ccard__img img[src*="products-horkis"] {
    margin-bottom: 1.5rem;
  }
}

.btn-more {
  display: flex;
  align-items: center;
  width: 22rem;
  height: 5.2rem;
  padding: 0 1.023rem 0 2.8rem;
  white-space: nowrap;
  border: 1px solid var(--blue-main);
  border-radius: 0.5rem;
  color: var(--blue-main);
  font-size: 1.471rem;
  font-weight: 700;
  line-height: 2.206rem;
  letter-spacing: 0.147rem;
}

.btn-more .icon-arrow {
  margin-left: auto;
  width: 1.738rem;
  height: 1.357rem;
  transition: transform 0.3s;
}

.btn-more {
  transition: background-color 0.3s, color 0.3s;
}

.btn-more:hover {
  background-color: var(--blue-main);
  color: #fff;
}

.btn-more:hover .icon-arrow {
  transform: translateX(0.3rem);
}

.btn-more--white:hover {
  background-color: #fff;
  color: var(--blue-main);
}

.icon-arrow {
  fill: currentColor;
  flex-shrink: 0;
}

/* 湿布薬の強み */
.feature {
  position: relative;
  padding: 8rem 2rem 3rem;
}

.feature__blue {
  position: absolute;
  left: 0;
  top: -13.2rem;
  z-index: -1;
  width: 100%;
  height: 224.3rem;
}

.feature__card {
  position: relative;
  max-width: var(--inner);
  height: 55rem;
  margin: 0 auto;
  padding: 6.8rem 0 0 6.8rem;
  border-radius: 5rem;
  background: var(--mint);
}

.feature__dot,
.feature__fabric,
.feature__person {
  position: absolute;
}

.feature__dot {
  left: 60.3rem;
  top: 1.143rem;
  width: 66.499rem;
}

.feature__fabric {
  left: 63.9rem;
  top: 3.243rem;
  width: 66.499rem;
}

.feature__person {
  left: 51.1rem;
  top: 34.1rem;
  width: 21.5rem;
}

.feature__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 43.9rem;
}

.pill {
  /* 背景と影だけ6px上へ。padding で文字は元の位置に戻す */
  position: relative;
  top: -0.6rem;
  width: 17.306rem;
  height: 4.919rem;
  margin-bottom: 1.661rem;
  padding-top: 1.192rem;
  border-radius: 2.475rem;
  background: var(--blue-bg);
  box-shadow: 0.494rem 0.461rem 0 var(--sky-a);
  color: #fff;
  font-family: "Urbanist", var(--font-en), sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 2.46rem;
  text-align: center;
}

.sec-title {
  margin-bottom: 0.6rem;
  /* TOPの「商品情報」「お知らせ」と同じ青にそろえる */
  color: var(--blue-main);
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 4.495rem;
  letter-spacing: 0.155rem;
}

.feature__text {
  min-height: 10.7rem;
  color: #000;
  font-size: var(--fs-15);
  line-height: 3rem;
  text-align: justify;
}

/* おくすりコラム */
.column {
  padding: 3.2rem 2rem 3rem;
}

.column__card {
  position: relative;
  max-width: var(--inner);
  height: 55rem;
  margin: 0 auto;
  padding: 6.8rem 0 0 74.6rem;
  border-radius: 5rem;
  background: var(--sky-f);
}

.column__photo,
.column__patch,
.column__dot {
  position: absolute;
}

.column__photo {
  left: -4.8rem;
  top: 3.988rem;
  width: 75.9rem;
}

.column__patch {
  left: 1.9rem;
  top: 39rem;
  width: 22.2rem;
  height: auto;
}

.column__dot {
  left: 107.986rem;
  top: 3.702rem;
  width: 12.533rem;
}

.column__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  width: 43.9rem;
}

.column__head,
.company__head {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.column__text {
  min-height: 6rem;
  color: #000;
  font-size: var(--fs-15);
  font-weight: 400;
  line-height: 3rem;
  text-align: justify;
}

.column__links {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.link-card {
  position: relative;
  overflow: hidden;
  display: block;
  width: 35.9rem;
  height: 8.5rem;
  border-radius: 0.85rem;
  background: var(--blue-main);
  color: #fff;
}

.link-card__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.7rem;
  width: 31.7rem;
  margin: 1.7rem 0 0 2rem;
}

.link-card__bg {
  position: absolute;
  top: -7.1rem;
  width: 33.2rem;
  height: 22.8rem;
  border-radius: 50%;
}

.link-card__bg--a {
  left: -4rem;
  background: var(--blue-b);
}

.link-card__bg--b {
  left: -3.3rem;
  background: var(--blue-a);
}

.link-card__bg--c {
  left: -2.3rem;
  background: rgba(3, 82, 151, 0.6);
}

.link-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 28.6rem;
}

.link-card__tag {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.9rem;
}

.link-card__title {
  font-size: 1.83rem;
  font-weight: 600;
  line-height: 2.56rem;
}

.link-card .icon-arrow {
  width: 1.5rem;
  height: 1.15rem;
  transition: transform 0.3s;
}

.link-card {
  transition: opacity 0.3s;
}

.link-card:hover {
  opacity: 0.85;
}

.link-card:hover .icon-arrow {
  transform: translateX(0.3rem);
}

/* 会社案内 */
.company {
  padding: 3rem 2rem;
}

.company__card {
  position: relative;
  max-width: var(--inner);
  height: 55rem;
  margin: 0 auto;
  padding: 6.8rem 0 0 6.8rem;
  border-radius: 5rem;
  background: #D4E0FC;
}

.company__dot,
.company__dot2,
.company__photo,
.company__lab,
.company__person {
  position: absolute;
}

.company__dot {
  left: 39.846rem;
  top: 0.934rem;
  width: 15.7rem;
}

/* カード右下からはみ出す点々 */
.company__dot2 {
  left: 103.1rem;
  top: 54.1rem;
  width: 27.7rem;
  height: 21.4rem;
}

.company__photo {
  left: 55.7rem;
  top: 5.3rem;
  width: 64.3rem;
}

.company__lab {
  left: 108.9rem;
  top: 4.2rem;
  width: 18.8rem;
}

.company__person {
  left: 45.6rem;
  top: 32.536rem;
  width: 22.7rem;
}

.company__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 43.9rem;
}

.company__text {
  min-height: 10.7rem;
  color: #000;
  font-size: var(--fs-15);
  font-weight: 400;
  line-height: 3rem;
  text-align: justify;
}

/* news */
.news {
  padding: 21.7rem 2rem 12rem;
}

.news__inner {
  display: flex;
  justify-content: space-between;
  max-width: var(--inner);
  margin: 0 auto;
}

.news__hdr {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24rem;
  height: 14.2rem;
}

.news__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news__en {
  height: 3rem;
  margin-bottom: 0.4rem;
  color: var(--blue-main);
  font-family: "Urbanist", var(--font-en), sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 2.8rem;
}

.news__title {
  margin-bottom: 1.1rem;
  color: var(--blue-main);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 5.075rem;
}

.news__all {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 2.4rem;
  color: var(--blue-main);
  font-size: var(--fs-135);
  font-weight: 700;
  line-height: 2.025rem;
  letter-spacing: 0.135rem;
}

.news__all-text {
  border-bottom: 1px solid currentColor;
}

.news__all-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--blue-main);
  transition: background-color 0.3s;
}

.news__all-icon svg {
  width: 1.077rem;
  height: 0.935rem;
  transition: transform 0.3s;
}

.news__all:hover .news__all-icon {
  background: var(--blue-logo);
}

.news__all:hover .news__all-icon svg {
  transform: translateX(0.2rem);
}

.news__list {
  width: 99rem;
}

.news__item {
  padding: 2.3rem 1rem;
  border-top: 1px solid #d0d0d0;
}

.news__item:last-child {
  border-bottom: 1px solid #d0d0d0;
}

.news__link {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  height: 3.96rem;
}

.news__date {
  width: 7.6rem;
  flex-shrink: 0;
  color: #000;
  font-size: var(--fs-14);
  font-weight: 400;
}

.news__cat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11rem;
  height: 2.465rem;
  flex-shrink: 0;
  border-radius: 1.233rem;
  color: #666;
  font-size: 1.19rem;
  font-weight: 400;
}

.news__cat--product {
  background: #d7f1fa;
}

.news__cat--company {
  background: #CEDEF2;
}

.news__cat--release {
  background: #E4EFE4;
}

.news__cat--other {
  background: #f4f1fe;
}

.news__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 76rem;
}

.news__text {
  color: #000;
  font-size: var(--fs-15);
  font-weight: 400;
}

.news__text--lg {
  font-size: var(--fs-16);
}

.news__link .icon-arrow {
  width: 1.738rem;
  height: 1.357rem;
  color: var(--blue-main);
}

.news__item {
  transition: background-color 0.3s;
}

.news__item:hover {
  background-color: #eef4f9;
}

.news__pdf {
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
}

/* sustainability */
.sustainability {
  position: relative;
  height: 63.8rem;
  padding: 0 2rem;
  background: #eef7f4;
}

/* 背景の草原写真（Figmaのマスク位置を踏襲して全幅で敷く） */
.sustainability__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sustainability__bg img {
  position: absolute;
  left: -14.67%;
  top: -16.26%;
  width: 122.49%;
  height: 132.52%;
  max-width: none;
  object-fit: fill;
}

.sustainability__bg img.sustainability__bg--sp {
  display: none;
}

/* 有機的な形に切り抜いた装飾画像 */
.sustainability__deco {
  position: absolute;
}

.sustainability__deco--forest {
  left: -2rem;
  top: -3.801rem;
  width: 27.414rem;
  height: 26.983rem;
}

.sustainability__deco--eco {
  left: 8rem;
  top: 41rem;
  width: 19.511rem;
  height: 20.19rem;
}

.sustainability__deco--city {
  right: 5.526rem;
  top: 3rem;
  width: 15.974rem;
  height: 16.529rem;
}

.sustainability__inner {
  position: relative;
  max-width: var(--inner);
  height: 100%;
  margin: 0 auto;
}

.sustainability__col {
  position: absolute;
  left: 72.5rem;
  top: 15.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 43.9rem;
}

.sustainability__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.8rem;
  align-self: stretch;
}

.sustainability__en {
  height: 3.2rem;
  margin-bottom: -1.0rem;
  color: #fff;
  font-family: "Urbanist", var(--font-en), sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 3.64rem;
  letter-spacing: -0.028rem;
}

.sustainability__title {
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4.64rem;
  letter-spacing: 0.32rem;
}

.sustainability__text {
  min-height: 10.7rem;
  align-self: stretch;
  color: #fff;
  font-size: var(--fs-15);
  font-weight: 400;
  line-height: 3rem;
  text-align: justify;
}

/* 採用情報 */
.recruit {
  position: relative;
  display: flex;
  align-items: center;
  height: 61rem;
  padding: 0 7.2rem;
  overflow: hidden;
}

/* 背景（都市写真＋3層グラデーション） */
.recruit__bg {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
}

.recruit__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #056efa 0%, #00c5ec 100%);
}

.recruit__grad--hard {
  mix-blend-mode: hard-light;
}

.recruit__grad--multiply {
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.recruit__grad--normal {
  opacity: 0.6;
}

/* 斜めの写真コラージュ */
.recruit__collage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.recruit__stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1.7824rem;
  width: 27.7385rem;
  transform: rotate(19.8deg);
}

.recruit__stack--1 {
  right: 47.7456rem;
  top: -45.707rem;
}

.recruit__stack--2 {
  right: 25.7396rem;
  top: -18.367rem;
}

.recruit__stack--3 {
  right: -8.3364rem;
  top: -24.515rem;
}

.recruit__card {
  position: relative;
  flex-shrink: 0;
  height: 33.754rem;
  overflow: hidden;
  border-radius: 3.342rem;
}

.recruit__card--blank {
  background: #d9d9d9;
}

.recruit__card img {
  position: absolute;
  max-width: none;
}

.recruit__card--01 img { left: -59.29%; top: 0;       width: 182.44%; height: 100%; }
.recruit__card--02 img { left: -3.45%;  top: -0.95%;  width: 106.91%; height: 101.9%; }
.recruit__card--03 img:first-child { left: -79.67%; top: 0.1%;  width: 264.68%; height: 145.08%; }
.recruit__card--03 img:last-child  { left: -4.79%;  top: -1.8%; width: 109.57%; height: 104.43%; }
.recruit__card--04 img { left: -3.19%;  top: -0.7%;   width: 106.39%; height: 101.4%; }
.recruit__card--05 img { left: -4.8%;   top: -2.23%;  width: 109.6%;  height: 104.46%; }
.recruit__card--06 img { left: -4.12%;  top: -1.58%;  width: 108.24%; height: 103.17%; }
.recruit__card--07 img { left: -6.73%;  top: -1.52%;  width: 107.73%; height: 102.68%; }
.recruit__card--08 img { left: -3.5%;   top: -0.99%;  width: 107%;    height: 101.98%; }
.recruit__card--09 img { left: -6.48%;  top: -0.12%;  width: 106.89%; height: 101.87%; }
.recruit__card--10 img { left: -3%;     top: -0.52%;  width: 106.01%; height: 101.03%; }

.recruit__band {
  display: none;
}

.recruit__inner {
  position: relative;
  width: 100%;
  max-width: 118.5rem;
  margin: 0 auto;
}

.recruit__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 43.9rem;
}

.recruit__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.8rem;
  align-self: stretch;
}

.recruit__en {
  height: 3.2rem;
  margin-bottom: -1.0rem;
  color: #fff;
  font-family: "Urbanist", var(--font-en), sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 3.64rem;
  letter-spacing: -0.028rem;
}

.recruit__title {
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4.64rem;
}

.recruit__text {
  min-height: 10.7rem;
  width: 41.1rem;
  color: #fff;
  font-size: var(--fs-15);
  font-weight: 400;
  line-height: 3rem;
  text-align: justify;
}

.btn-more--blue {
  border-color: var(--blue-bg);
  color: var(--blue-bg);
}

.btn-more--white {
  border-color: #fff;
  color: #fff;
  /* 外部リンクなので矢印を置かない。文字と外部リンクマークをひとかたまりで中央に */
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.btn-more__label {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-more__label .icon-ext {
  width: 1.275rem;
  height: 1.275rem;
}

/* バナー */
.banner {
  height: 24rem;
  padding: 0 2rem;
  background: rgba(31, 119, 198, 0.18);
}

.banner__inner {
  display: flex;
  align-items: center;
  gap: 3.15rem;
  max-width: 114.7rem;
  height: 100%;
  margin: 0 auto;
}

.banner__card {
  display: flex;
  align-items: center;
  gap: 1.575rem;
  flex: 1;
  height: 10rem;
  padding: 0.7rem;
  border-radius: 1.05rem;
  background: #fff;
}

.banner__logo {
  width: 8.718rem;
  flex-shrink: 0;
}

.banner__label {
  width: 19.53rem;
  color: #000;
  font-size: var(--fs-16);
  line-height: 2.24rem;
  letter-spacing: 0.08rem;
}

.banner__card {
  transition: opacity 0.3s;
}

.banner__card:hover {
  opacity: 0.7;
}

.banner__card .icon-ext {
  width: 1.468rem;
  height: 1.46rem;
}

/* フッター */
.footer {
  padding: 6rem 2rem 2.3rem;
}

.footer__inner {
  display: flex;
  gap: 9rem;
  max-width: 113.4rem;
  margin: 0 auto;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  width: 21.8rem;
}

.footer__logo {
  width: 18.4rem;
}

.footer__name {
  display: flex;
  flex-direction: column;
  margin-top: 2.455rem;
  color: var(--blue-logo);
}

.footer__name + .footer__address {
  margin-top: 0.818rem;
}

.footer__address + .footer__address {
  margin-top: 1.648rem;
}

.footer__name-jp {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.475rem;
}

.footer__name-en {
  font-size: 1.2rem;
  line-height: 1.98rem;
}

.footer__address {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 6.6rem;
  color: #0a0a0a;
  font-size: var(--fs-135);
  line-height: 2.16rem;
}


.footer__nav {
  display: flex;
  gap: 3.45rem;
  padding: 1rem 0;
}

.footer__col:nth-child(1) { width: 11.7rem; }
.footer__col:nth-child(2) { width: 20.6rem; }
.footer__col:nth-child(3) { width: 24.5rem; }
.footer__col:nth-child(4) { width: 15rem; }

.footer__head {
  margin-bottom: 1.5rem;
  color: var(--blue-logo);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 2.6rem;
  letter-spacing: 0.08rem;
}

/* 見出しもそれぞれの一覧ページへのリンク。見た目は見出しのまま、乗せたときだけ薄くする */
.footer__head a {
  color: inherit;
  transition: opacity 0.3s;
}

.footer__head a:hover {
  opacity: 0.7;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #000;
  font-size: var(--fs-135);
  line-height: 2.6rem;
  letter-spacing: 0.068rem;
}

.footer__col:nth-child(2) .footer__list {
  font-size: var(--fs-14);
  letter-spacing: 0.07rem;
}

.footer__item--ext {
  line-height: 2.16rem;
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 1.05rem;
  transition: color 0.3s;
}

.footer__list a:hover {
  color: var(--blue-logo);
}

.footer__list .icon-ext {
  width: 1.6rem;
  height: 1.6rem;
}

.footer__col:nth-child(4) .footer__item--ext a {
  justify-content: space-between;
  gap: 0;
  width: 100%;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  max-width: 113.4rem;
  margin-top: 2.7rem;
  margin-inline: auto;
  padding-top: 2.3rem;
  border-top: 0.06rem solid #000;
  color: #000;
  font-size: 1.2rem;
  line-height: 2.6rem;
  letter-spacing: 0.06rem;
}

.footer__links {
  display: flex;
  justify-content: space-between;
  width: 50.1rem;
}

/* ドロワー */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  overflow-y: auto;
  background: #fff;
}

.drawer.is-open {
  display: block;
}

.drawer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 2.5rem);
  height: 5rem;
  margin: 1.2rem auto 0;
  padding: 0 0.65rem 0 0.641rem;
  border-radius: 0.63rem;
}

.drawer__logo {
  width: 9.1rem;
}

.drawer__close {
  display: flex;
  justify-content: center;
  width: 2.7rem;
}

.drawer__close svg {
  display: block;
  width: 2.174rem;
  height: 2.096rem;
  stroke: #222;
  stroke-width: 1.5;
}

.drawer__nav {
  width: 31.8rem;
  margin: 4rem auto 0;
}

.drawer__list {
  display: flex;
  flex-direction: column;
  gap: 2.3rem;
  width: 31.5rem;
  margin-left: auto;
}

.drawer__item {
  position: relative;
  padding-bottom: 2.3rem;
  line-height: 1.9rem;
}

.drawer__item:first-child {
  line-height: 1.6rem;
}

.drawer__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.1rem;
  background: var(--blue-bg);
}

.drawer__item a {
  display: inline-flex;
  align-items: center;
  gap: 0.494rem;
  color: var(--blue-main);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: inherit;
  letter-spacing: 0.16rem;
}

.drawer__item .icon-ext {
  width: 1.638rem;
  height: 1.638rem;
}

.drawer__btns {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 4rem;
}

.drawer-btn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  height: 5.5rem;
  padding: 0 1.195rem 0 2.3rem;
  border: 0.12rem solid var(--blue-main);
  border-radius: 0.6rem;
  color: var(--blue-main);
  font-size: 1.56rem;
  font-weight: 700;
  line-height: 2.808rem;
  letter-spacing: 0.078rem;
}

.drawer-btn--fill {
  background: var(--blue-main);
  color: #fff;
}

.drawer-btn__arrow {
  margin-left: auto;
  width: 1.311rem;
  height: 1.329rem;
}

/* ハンバーガー */
.header__burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 2.7rem;
  height: 1.35rem;
}

.header__burger span {
  width: 100%;
  height: 0.15rem;
  background: #222;
}

/* SP */
@media (min-width: 768px) {
  [class*="--sp"],
  .br-sp {
    display: none;
  }
}

@media (max-width: 767px) {
  .fv {
    aspect-ratio: 375 / 645;
  }

  .fv__blob-pale,
  .fv__blob-sky,
  .fv__dot,
  .fv__circle,
  .fv__products,
  .fv__tvcm {
    display: none;
  }

  .fv__blob-pale--sp,
  .fv__blob-sky--sp,
  .fv__products--sp,
  .fv__tvcm--sp,
  .fv__circle--sp {
    position: absolute;
  }

  .fv__blob-pale--sp {
    left: 0;
    top: 50.5611%;
    width: 100%;
  }

  .fv__blob-sky--sp {
    left: 64.8%;
    top: 80.396%;
    width: 35.2%;
  }

  .fv__photo {
    left: 32.4667%;
    top: 37.7888%;
    width: 64.5333%;
  }

  .fv__products--sp {
    left: -0.533%;
    top: 57.160%;
    width: 97.749%;
  }

  .fv__tvcm--sp {
    left: 22.8%;
    top: 86.6271%;
    width: 77.2%;
  }

  .fv__circle--sp {
    left: 3.8133%;
    top: 54.5611%;
    width: 20.2667%;
  }

  .fv__text {
    left: 5.3333%;
    top: 10.033%;
    gap: 0;
    width: 84.9253%;
    z-index: 2;
  }

  .fv__catch {
    font-size: 10.32vw;
    line-height: 11.868vw;
  }

  .fv__lead {
    margin-top: 2.963vw;
    font-size: 4.08vw;
    line-height: 6.528vw;
    letter-spacing: 0.49vw;
  }
}

.sp-only { display: none; }
.pc-only { display: inline; }

@media (max-width: 767px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }

  .header {
    top: 1.2rem;
  }

  .header__bar {
    width: calc(100% - 2.5rem);
    height: 5rem;
    border-radius: 0.63rem;
    box-shadow: none;
  }

  .header__inner {
    padding: 0 0.65rem 0 0.641rem;
  }

  .header__logo img {
    width: 9.1rem;
  }

  .header__right {
    display: none;
  }

  .header__burger {
    display: flex;
    margin-right: 1rem;
  }
}

/* セルフケア SP */
@media (max-width: 767px) {
  .selfcare {
    padding: 9.85rem 0 5.715rem;
  }

  .selfcare__blue,
  .selfcare__beige,
  .selfcare__dot {
    display: none;
  }

  .selfcare__blue--sp,
  .selfcare__beige--sp {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
  }

  .selfcare__blue--sp {
    top: -4.7rem;
    height: 122.3rem;
  }

  .selfcare__beige--sp {
    top: 4.55rem;
    height: 87.6rem;
  }

  .selfcare__inner {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
  }

  .selfcare__photo {
    width: 34.425rem;
    margin-right: 0;
  }

  .selfcare__body {
    flex: none;
    width: 31.5rem;
  }

  .selfcare__title {
    min-height: 14rem;
    padding-top: 3rem;
    font-size: 3.2rem;
    line-height: 1.406;
    letter-spacing: 0.03em;
  }

  .selfcare__text {
    font-size: 1.6rem;
    line-height: 2.3;
    letter-spacing: 0.02em;
  }
}

/* 商品情報 SP */
@media (max-width: 767px) {
  .products {
    margin-top: 0;
    padding: 23.4rem 0 3.4rem;
  }

  .products__blob,
  .products__wash,
  .products__drop,
  .pcard__img--harix,
  .pcard__img--besoften {
    display: none;
  }

  .products__base--sp,
  .products__drop--sp,
  .products__blob--sp {
    position: absolute;
    z-index: -1;
  }

  .products__base--sp {
    left: 0;
    top: 0;
    width: 100%;
    height: 194.4rem;
  }

  .products__drop--sp {
    left: 1.5rem;
    top: 3.3rem;
    width: 9.3rem;
  }

  .products__blob--sp {
    left: 13.8rem;
    top: -7rem;
    width: 35.2rem;
  }

  .products__label {
    top: 12rem;
  }

  .products__title {
    top: 14.9rem;
  }

  .products__cards {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    height: auto;
  }

  .pcard {
    flex: none;
    align-items: center;
    width: 31.5rem;
    padding: 0;
  }

  .pcard:nth-child(1) {
    height: 39.6rem;
  }

  .pcard:nth-child(1) .pcard__inner {
    height: 34.5rem;
  }

  .pcard:nth-child(2) {
    height: 41rem;
  }

  .pcard:nth-child(2) .pcard__inner {
    height: 35.8rem;
  }

  .pcard__inner {
    flex-direction: column;
    align-items: center;
  }

  .pcard__col {
    align-items: center;
    width: 27rem;
    height: 18rem;
    text-align: center;
  }

  .pcard__harix--sp {
    width: 28.169rem;
  }

  .pcard__besoften--sp {
    width: 28.3rem;
  }

  /* 矢印を商品カードの左右に置くので、はみ出しても隠れないようにする。
     カードの切り抜きは中の track 側の overflow: hidden が受け持つ */
  .products__carousel {
    position: relative;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
    width: 24rem;
    max-width: none;
    margin: 0 auto;
  }

  /* 矢印は商品カードの左右、高さはカードの天地センター */
  .products__nav--prev {
    left: -4.95rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
  }

  .products__nav--next {
    left: auto;
    right: -4.95rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* 強み・コラム・会社案内 SP */
@media (max-width: 767px) {
  .feature,
  .column,
  .company {
    position: relative;
    padding: 3rem 0 4rem;
  }

  .feature {
    padding-top: 11.1rem;
    padding-bottom: 3.1rem;
  }

  .company {
    padding-bottom: 15.15rem;
  }

  .feature__blue {
    display: none;
  }

  .feature__blue--sp {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 271.5rem;
  }

  .feature__aqua,
  .feature__dot,
  .feature__fabric,
  .feature__person,
  .column__photo,
  .column__patch,
  .column__dot,
  .company__dot,
  .company__dot2,
  .company__photo,
  .company__lab,
  .company__person {
    display: none;
  }

  .company__dot2--sp {
    position: absolute;
    left: 16.3rem;
    top: 78.3rem;
    width: 18.2rem;
    height: 13.7rem;
  }

  .feature__card,
  .column__card,
  .company__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 31.5rem;
    padding: 3rem 2.5rem;
    border-radius: 3rem;
  }

  .feature__card {
    height: 81.1rem;
  }

  .column__card {
    height: 79.1rem;
  }

  .company__card {
    height: 71.95rem;
  }

  .feature__col,
  .column__col,
  .company__col {
    gap: 2rem;
    width: 26.5rem;
  }

  .pill {
    display: grid;
    place-items: center;
    top: 0;
    padding-top: 0;
    line-height: 1;
  }

  .sec-title {
    font-size: 2.8rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }

  .feature__text,
  .column__text,
  .company__text {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .feature__text {
    min-height: 17.9rem;
  }

  .column__text {
    min-height: 12rem;
  }

  .company__text {
    min-height: 16.2rem;
  }

  .feature__art--sp,
  .column__art--sp,
  .company__art--sp {
    flex-shrink: 0;
    max-width: none;
    margin-top: auto;
  }

  .feature__art--sp {
    width: 36rem;
  }

  .column__art--sp {
    width: 37.2rem;
  }

  .company__art--sp {
    width: 36.4rem;
  }


  .column__links {
    width: 27rem;
    height: 21.3rem;
    gap: 0;
    justify-content: space-between;
  }

  .link-card__tag {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .link-card__title {
    font-size: 1.9rem;
    line-height: 1.45;
  }

  .link-card {
    width: 100%;
    height: 10.2rem;
    border-radius: 0.64rem;
  }

  .link-card__inner {
    width: 24rem;
    margin: 1.28rem 0 0 1.511rem;
    gap: 1.28rem;
  }

  .link-card__bg {
    width: 25rem;
    height: 27.4rem;
    top: -8.6rem;
  }

  .link-card__bg--a { left: -3rem; }
  .link-card__bg--b { left: -2.5rem; }
  .link-card__bg--c { left: -1.7rem; }

  /* 矢印をカードの上下中央に置くため、基準を .link-card にする */
  .link-card__inner {
    position: static;
  }

  /* 矢印が流れから外れても、文字の幅は矢印の分だけ空けたまま */
  .link-card__body {
    width: 21.22rem;
  }

  .link-card .icon-arrow {
    position: absolute;
    right: 1.49rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .link-card:hover .icon-arrow {
    transform: translate(0.3rem, -50%);
  }
}

/* お知らせ SP */
@media (max-width: 767px) {
  .company__wave--sp {
    position: absolute;
    left: 0;
    top: 64.5rem;
    z-index: -1;
    width: 28.7rem;
  }

  .news {
    padding: 8rem 3rem 10rem;
  }

  .news__inner {
    flex-direction: column;
    gap: 5rem;
    max-width: 31.5rem;
    margin: 0 auto;
  }

  .news__hdr {
    display: contents;
  }

  .news__head {
    height: 7.725rem;
  }

  .news__all {
    order: 1;
  }

  .news__list {
    width: 100%;
  }

  .news__item {
    padding: 3.3rem 1rem;
  }

  .news__link {
    position: relative;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 1.7rem 2.5rem;
    height: auto;
  }

  .news__pdf {
    display: block;
    position: absolute;
    right: 0;
    top: 0.5rem;
    width: 2.16rem;
    height: 2.16rem;
  }

  .news__body {
    width: 100%;
  }

  .news__link .icon-arrow {
    display: none;
  }

  .news__text {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

/* サステナビリティ SP */
@media (max-width: 767px) {
  .sustainability {
    height: 74.3rem;
    padding: 0;
  }

  /* 背景写真はSP専用の縦位置カットに差し替え */
  .sustainability__bg-pc {
    display: none;
  }

  .sustainability__bg img.sustainability__bg--sp {
    display: block;
    left: -27.003%;
    top: 0;
    width: 153.997%;
    height: 101.75%;
  }

  /* 上半分にかかる青のベール */
  .sustainability__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      #90b0e2 0%,
      #90b0e2 52.88%,
      rgba(144, 176, 226, 0) 72.12%);
  }

  .sustainability__deco--forest {
    display: none;
  }

  .sustainability__deco--eco {
    left: -2.5rem;
    top: 61.92rem;
    width: 13.2rem;
    height: 13.66rem;
  }

  .sustainability__deco--city {
    right: -1.7rem;
    top: -2.7rem;
    width: 14.69rem;
    height: 15.2rem;
  }

  .sustainability__inner {
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .sustainability__col {
    left: 3rem;
    top: 9.7rem;
    gap: 2rem;
    width: 31.5rem;
  }

  .sustainability__text {
    min-height: 13.5rem;
    font-weight: 400;
    line-height: 2.7rem;
  }
}

/* 採用情報 SP */
@media (max-width: 767px) {
  .recruit {
    height: 88.4rem;
    padding: 0;
  }

  /* コラージュは下から浮かび上がるようにマスクをかける */
  .recruit__collage {
    -webkit-mask-image: linear-gradient(180deg, transparent 50.68%, #000 67.09%);
    mask-image: linear-gradient(180deg, transparent 50.68%, #000 67.09%);
  }

  /* 背後の街並みが透けないよう白を敷く */
  .recruit__sheet--sp {
    position: absolute;
    left: 0;
    top: 44.8rem;
    width: 100%;
    height: 43.6rem;
    background: #fff;
  }

  .recruit__stack {
    transform-origin: 0 0;
    gap: 1.0352rem;
    width: 16.1105rem;
  }

  .recruit__stack--1 {
    right: auto;
    left: 7.802rem;
    top: 25.02rem;
  }

  .recruit__stack--2 {
    right: auto;
    left: 20.583rem;
    top: 40.899rem;
  }

  .recruit__stack--3 {
    right: auto;
    left: 40.375rem;
    top: 37.328rem;
  }

  .recruit__card {
    height: 19.6043rem;
    border-radius: 1.941rem;
  }

  .recruit__inner {
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .recruit__col {
    position: absolute;
    left: 2.87rem;
    top: 9.4rem;
    gap: 2rem;
    width: 31.5rem;
  }

  .recruit__title {
    font-size: 3.2rem;
    line-height: 1.45;
  }

  .recruit__text {
    min-height: 13.5rem;
    width: 100%;
    font-size: 1.5rem;
    line-height: 2.7rem;
  }
}

/* バナー SP */
@media (max-width: 767px) {
  .banner {
    height: 48.5rem;
    padding: 7rem 3.2rem;
  }

  .banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    max-width: 31.1rem;
    height: auto;
    margin: 0 auto;
  }

  .banner__card {
    flex: none;
  }

  .banner__card .icon-ext {
    margin-left: -1rem;
    margin-right: 0.957rem;
  }

  .banner__label {
    flex: 1;
    width: auto;
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

/* フッター SP */
@media (max-width: 767px) {
  .footer {
    padding: 6.4rem 3rem 1.3rem;
  }

  .footer__inner {
    flex-direction: column;
    gap: 3rem;
    max-width: 31.5rem;
    margin: 0 auto;
  }

  .footer__logo {
    width: 18.8rem;
  }

  .footer__brand {
    gap: 0.5rem;
    width: 100%;
    height: auto;
  }

  .footer__name {
    height: 4.5rem;
    margin-top: 1.5rem;
  }

  .footer__name + .footer__address {
    margin-top: 0.5rem;
  }

  .footer__address + .footer__address {
    margin-top: 0;
  }

  .footer__address {
    /* 本社／東京営業本部の後で改行するため3行ぶんに（2.16rem × 3） */
    height: 6.48rem;
    line-height: 2.16rem;
  }

  .footer__head {
    margin-bottom: 0.849rem;
    font-size: 1.4rem;
    line-height: 1.731rem;
  }

  .footer__list {
    line-height: 2.517rem;
  }

  .footer__item--ext {
    line-height: 2.517rem;
  }

  .footer__item--wrap {
    line-height: 2.05rem;
  }

  .footer__item--ext-pc .icon-ext {
    display: none;
  }

  .footer__nav {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3.22rem 0;
    padding: 0;
  }

  .footer__col:nth-child(1),
  .footer__col:nth-child(3) {
    width: 14.2rem;
  }

  .footer__col:nth-child(2),
  .footer__col:nth-child(4) {
    width: 15.4rem;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 2rem;
    margin-top: 3.81rem;
    padding-top: 1.5rem;
    border-top: 0.1rem solid #a6a6a6;
    color: #a0a0a0;
    font-size: 1.1rem;
    line-height: 2.6rem;
  }

  .footer__links {
    order: -1;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem 2.4rem;
    width: 100%;
    font-size: 1.3rem;
    line-height: 1.8rem;
  }

  .br-pc {
    display: none;
  }
}

/* トップへ戻るボタン */
.back-to-top {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--blue-logo);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 0.4s, visibility 0.4s, transform 0.4s, background-color 0.3s;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.15);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--blue-main);
}

@media (max-width: 767px) {
  .back-to-top {
    bottom: 2rem;
    right: 2rem;
    width: 4.4rem;
    height: 4.4rem;
  }
}

/* ================================================
   下層ページ共通
   ================================================ */

/* パンくずリスト */
.breadcrumb {
  position: absolute;
  top: 9.4rem;
  left: 2.2rem;
  z-index: 2;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-jp);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--blue-main);
}

.breadcrumb__home {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: middle;
  margin-right: 0.4rem;
  position: relative;
  top: -0.1rem;
}

.breadcrumb__item a {
  color: var(--blue-main);
  transition: opacity 0.3s;
}

.breadcrumb__item a:hover {
  opacity: 0.7;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.8rem;
  background: url("../img/icon-chevron-right.svg") center / contain no-repeat;
  vertical-align: middle;
}

/* ページヒーロー */
.page-hero {
  position: relative;
  overflow: hidden;
  height: 68.1rem;
}

.page-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 144rem;
  margin: 0 auto;
  padding: 21.7rem 0 0 12rem; /* 22.7rem から10px上へ（テキストの塊のみ） */
  height: 100%;
}

.page-hero__text {
  flex: 0 0 auto;
  max-width: 51rem;
}

.page-hero__en {
  font-family: "Urbanist", var(--font-en), sans-serif;
  font-size: 2.16rem;
  font-weight: 700;
  color: var(--blue-main);
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
}

.page-hero__title {
  font-family: var(--font-jp);
  font-size: 5.04rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.46;
  color: var(--blue-main);
  margin-bottom: 3.5rem;
}

.page-hero__lead {
  font-size: 1.6rem;
  line-height: 2.15;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.page-hero__visual {
  position: absolute;
  left: 47.5%;
  top: 14.4rem; /* 12.9rem(129px) から15px下へ */
  width: 55.3%;
  max-width: 79.6rem;
  z-index: 1;
}

.page-hero__blob {
  position: absolute;
  left: 2.5%;
  top: 0.9%;
  width: 78.9%;
  height: auto;
  pointer-events: none;
}

.page-hero__photo {
  position: relative;
  left: 7.2%;
  margin-top: 2.5rem;
  width: 75.1%;
  height: auto;
}

/* page-hero SP */
@media (max-width: 767px) {
  .page-hero {
    height: auto;
    overflow: visible;
    padding-bottom: 2rem;
  }

  .page-hero::before {
    content: '';
    position: absolute;
    top: -6.1rem;
    left: 0;
    width: 100%;
    bottom: -5.5rem;
    background: url(../img/fv-bg-blobs-sp.svg) top center / 100% 100% no-repeat;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero__inner {
    padding: 11.6rem 3rem 0 3rem;
  }

  .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.7rem;
    letter-spacing: 0.07em;
    margin-bottom: 0.5rem;
  }

  .page-hero__title {
    font-size: 3.8rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-top: 0;
    margin-bottom: 1.5rem;
  }

  .page-hero__lead {
    font-size: 1.5rem;
    line-height: 1.8;
    max-width: none;
  }

  .page-hero__bg {
    display: none;
  }

  .page-hero__visual {
    position: relative;
    left: auto;
    top: auto;
    width: 111%;
    max-width: none;
    margin-top: 1.5rem;
  }

  .page-hero__blob {
    left: 1.9%;
    top: 0.5%;
    width: 83%;
  }

  .page-hero__photo {
    left: 2%;
    margin-top: 1.5rem;
    width: 79%;
  }

  .page-hero__photo[src*="fv-products-photo-2610"] {
    left: calc(2% + 0.5rem);
    margin-top: 2.5rem;
    width: 86.9%;
  }

  .breadcrumb {
    top: 7rem;
    left: 1.4rem;
  }

  .breadcrumb__list {
    font-size: 1rem;
    gap: 0.5rem;
  }

  .breadcrumb__home {
    width: 1rem;
    height: 1rem;
  }

  .breadcrumb__item + .breadcrumb__item::before {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.5rem;
  }
}

/* ================================================
   Featured Products — 主な商品
   ================================================ */
.featured {
  position: relative;
  z-index: 1;
  padding: 10rem 4rem 8rem;
  max-width: var(--inner);
  margin: 0 auto;
}

.featured__head {
  text-align: center;
  margin-bottom: 6rem;
}

.featured__en {
  font-family: var(--font-jp);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue-main);
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.featured__title {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--blue-main);
}

.featured__row {
  display: flex;
  gap: 4rem;
  justify-content: center;
}

.featured__item {
  flex: 1;
  max-width: 60rem;
  text-align: center;
  position: relative;
  padding: 3rem 2rem 4rem;
}

.featured__item:first-child .featured__desc {
  margin-top: 30px;
}

/* 右カード（ビーソフテン）も左と同じオフセットを与えてY位置を揃える */
.featured__item:nth-child(2) .featured__desc {
  margin-top: 30px;
}

.featured__bg {
  position: absolute;
  top: 185px;
  left: 0;
  width: 136%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  transform: scale(1.32);
}

/* 左（ハリックス55）の背景のみ85%に縮小: 1.32 × 0.85 = 1.122 */
.featured__item:first-child .featured__bg {
  top: 210px; /* 185px から25px下へ */
  left: -21px; /* 21px 左へ */
  transform: scale(1.122);
}

.featured__bg--besoften {
  top: 100px; /* 80px から20px下へ */
  left: 21px; /* 21px 右へ */
  width: 130%;
  transform: scale(1.056); /* 1.32 の80% */
}

.harix-blob,
.besoften-blob,
.featured__dots {
  display: none;
}

.featured__tag {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue-alt);
  background-color: #d9ecfe;
  padding: 0.4rem 2rem;
  border-radius: 2.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
}

.featured__name {
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--blue-logo);
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.featured__img {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
  height: 25rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.featured__img img {
  width: 100%;
  max-width: 43.3rem;
  margin: 0 auto;
}

.featured__item:nth-child(2) .featured__img img {
  max-width: 38.84rem; /* 30rem → 33rem(110%) → 35.31rem(107%) → 新パッケージ差し替えで38.84rem(さらに110%) */
}

.featured__desc {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  color: #19324c;
  letter-spacing: 0.05em;
  margin-bottom: 2.4rem;
  position: relative;
  z-index: 1;
}

.featured__btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blue-alt);
  padding: 1.5rem 3rem;
  border: 1px solid var(--blue-alt);
  border-radius: 4rem;
  letter-spacing: 0.1em;
  transition: background-color 0.3s, color 0.3s;
  position: relative;
  z-index: 1;
}

.featured__btn:hover {
  background-color: var(--blue-alt);
  color: #fff;
}

.featured__arrow {
  width: 1.74rem;
  height: 1.36rem;
}

.featured__btn:hover .featured__arrow {
  filter: brightness(0) invert(1);
}

/* featured SP */
@media (max-width: 767px) {
  .featured {
    padding-left: 2rem;
    padding-right: 2rem;
    overflow: visible;
  }

  .featured__dots {
    display: block;
    position: absolute;
    top: -10px;
    left: -30px;
    width: 96px;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .featured__head {
    margin-bottom: 3rem;
  }

  .featured__en {
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
    margin-bottom: 0;
  }

  .featured__title {
    font-size: 3rem;
    letter-spacing: 0;
  }

  .featured__row {
    flex-direction: column;
    gap: 4rem;
  }

  .featured__item {
    max-width: none;
    padding: 2rem 1.5rem 3rem;
  }

  .featured__bg {
    top: 140px;
    width: 130%;
    transform: none;
  }

  .featured__item:first-child .featured__bg {
    display: none;
  }

  .featured__item {
    overflow: visible;
  }

  .harix-blob {
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }

  .harix-blob--01 {
    top: 110px;
    left: -70px;
    width: 261px;
    height: 215px;
  }

  .harix-blob--02 {
    top: 160px;
    left: 88px;
    width: 305px;
    height: 213px;
  }

  .harix-blob--03 {
    top: 161px;
    left: -3px;
    width: 279px;
    height: 199px;
  }

  .harix-blob--04 {
    top: 191px;
    left: 116px;
    width: 303px;
    height: 181px;
  }

  .besoften-blob {
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }

  .besoften-blob--01 {
    top: 80px;
    left: -5px;
    width: 387px;
    height: 254px;
    transform: scaleX(-1) scale(1.2);
  }

  .besoften-blob--02 {
    top: 130px;
    left: 60px;
    width: 218px;
    height: 146px;
    transform: scaleX(-1);
  }

  .besoften-blob--03 {
    top: 40px;
    left: 300px;
    width: 17px;
    height: 17px;
  }

  .besoften-blob--04 {
    top: 400px;
    left: 280px;
    width: 88px;
    height: 85px;
  }

  .featured__bg--besoften {
    display: none;
  }

  .featured__tag {
    font-size: 1.4rem;
    letter-spacing: 0.14rem;
    line-height: 1.6;
    padding: 0.364rem 1.82rem;
  }

  .featured__name {
    font-size: 2.5rem;
    letter-spacing: 0.25rem;
    line-height: 1.6;
    color: var(--blue-alt);
    margin-bottom: 2.5rem;
  }

  .featured__img {
    height: auto;
    margin-top: 1rem;
    margin-bottom: 2.5rem;
  }

  .featured__img img {
    width: 107%;
    max-width: none;
  }

  .featured__item:nth-child(2) .featured__img img {
    max-width: 29.76rem;
    width: 98.4%;
  }

  .featured__desc {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.08rem;
    line-height: 1.6;
    margin-top: 0 !important;
    margin-bottom: 2.5rem;
  }

  .featured__btn {
    font-size: 1.4rem;
    letter-spacing: 0.14rem;
    line-height: 1.5;
    padding: 1.4rem 3rem;
    border-radius: 3.78rem;
    white-space: nowrap;
  }
}

/* ================================================
   Other Products — そのほかの商品
   ================================================ */
.other-products {
  position: relative;
  padding: 8rem 0 10rem;
}

.other-products::before {
  content: '';
  position: absolute;
  top: -20rem;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../img/other-products-bg.svg) center top / 100% 100% no-repeat;
  z-index: 0;
  pointer-events: none;
}

.other-products__head {
  text-align: center;
  margin-bottom: 5rem;
  max-width: 124rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.other-products__en {
  font-family: var(--font-jp); /* Figma: Noto Sans JP Bold */
  font-size: 1.6rem; /* Figma: 16px */
  font-weight: 700;
  color: var(--blue-main);
  letter-spacing: 0; /* Figma: 字間なし */
  line-height: 1.3; /* Figmaの行間29pxに合わせる */
  margin-bottom: 0;
}

.other-products__title {
  font-size: 3.5rem; /* Figma: 35px */
  font-weight: 700;
  letter-spacing: 0; /* Figma: 字間なし */
  color: var(--blue-main); /* Figma: #1565a0 */
}

.other-products__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  max-width: 124rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* 商品カード（other-products専用 — TOPページの .pcard に影響させない） */
.other-products__grid .pcard {
  display: flex;
  align-items: center;
  gap: 5rem;
  height: 13rem;
  padding: 0 2.4rem 0 3.3rem;
  background: #fff;
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

.other-products__grid .pcard:hover {
  opacity: 0.7;
}

.other-products__grid .pcard__img {
  flex: 0 0 11.9rem;
  width: 11.9rem;
  height: 11.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.other-products__grid .pcard__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.other-products__grid .pcard__img img[src*="products-teipap-large-2610"] {
  max-width: 95%;
  max-height: 95%;
}

@media (min-width: 768px) {
  .other-products__grid .pcard__img img[src*="products-fixing-sheet-2610"] {
    max-width: 85.5%;
    max-height: 85.5%;
  }
}

@media (max-width: 767px) {
  .other-products__grid .pcard__img img[src*="products-fixing-sheet-2610"] {
    max-width: 90%;
    max-height: 90%;
  }
}

.other-products__grid .pcard__body {
  flex: 1;
  min-width: 0;
}

.other-products__grid .pcard__tag {
  display: inline-block;
  font-size: 1.2rem;
  color: var(--blue-alt);
  font-weight: 700;
  background: #d9ecfe;
  padding: 0.3rem 0.8rem;
  border-radius: 1.8rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

.other-products__grid .pcard__name {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--blue-alt);
  letter-spacing: 0.1em;
  line-height: 1.3;
}

.other-products__grid .pcard__arrow {
  flex: 0 0 3.8rem;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  border: 1px solid var(--blue-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, background-color 0.3s;
}

.other-products__grid .pcard:hover .pcard__arrow {
  background-color: var(--blue-alt);
}

.other-products__grid .pcard__arrow svg {
  width: 1.4rem;
  height: 1rem;
  fill: var(--blue-alt);
  transition: fill 0.3s;
}

.other-products__grid .pcard:hover .pcard__arrow svg {
  fill: #fff;
}

/* other-products SP */
@media (max-width: 767px) {
  .other-products {
    padding: 0.6rem 3rem 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .other-products__head {
    margin-bottom: 3rem;
  }

  .other-products__en {
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
    margin-bottom: 0;
  }

  .other-products__title {
    font-size: 3rem;
    letter-spacing: 0;
  }

  .other-products__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    width: 100%;
  }

  .other-products__grid .pcard {
    height: 8rem;
    padding: 0 1.5rem;
    border-radius: 0.6rem;
    gap: 1.5rem;
  }

  .other-products__grid .pcard__img {
    flex: 0 0 7.3rem;
    width: 7.3rem;
    height: 7.3rem;
  }

  .other-products__grid .pcard__tag {
    font-size: 1rem;
    letter-spacing: 0.1rem;
    padding: 0.25rem 0.66rem;
    margin-bottom: 0.4rem;
  }

  .other-products__grid .pcard__name {
    font-size: 1.54rem;
    letter-spacing: 0.15rem;
  }

  .other-products__grid .pcard__arrow {
    flex: 0 0 2.3rem;
    width: 2.3rem;
    height: 2.3rem;
  }

  .other-products__grid .pcard__arrow svg {
    width: 1rem;
    height: 0.7rem;
  }
}

/* ================================================
   お買い求めは
   ================================================ */
.purchase {
  background: #d7f1fa;
  padding: 5.1rem 0 4.3rem 4.5rem;
  border-radius: 3rem;
  max-width: 124rem;
  margin: 11rem auto 8rem;
  overflow: hidden;
}

.purchase__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4rem;
}

.purchase__text {
  flex: 1;
  max-width: 52.2rem;
}

.purchase__title {
  font-size: 3.1rem;
  font-weight: 700;
  color: var(--blue-main);
  letter-spacing: 0.05em;
  line-height: 1.45;
  margin-bottom: 2rem;
}

.purchase__lead {
  font-size: 1.5rem;
  line-height: 2;
  color: #070707;
  margin-bottom: 2.5rem;
}

.purchase__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 1.47rem;
  font-weight: 700;
  color: #fff;
  background: var(--blue-main);
  /* 文字に対して左右があきすぎていたので、枠を40px詰めた。
     中身は justify-content: center のまま、文字と外部リンクマークがひとかたまりで中央にくる */
  width: 36rem;
  height: 5.2rem;
  padding: 0 1.6rem;
  border: 1px solid var(--blue-main);
  border-radius: 0.5rem;
  letter-spacing: 0.05em;
  transition: background 0.3s, color 0.3s;
}

.purchase__btn:hover {
  background: #fff;
  color: var(--blue-main);
}

.purchase__btn .icon-ext {
  width: 1.2rem;
  height: 1.2rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
}

.purchase__visual {
  flex: 0 0 52.6rem;
  position: relative;
  overflow: hidden;
  margin: -5.1rem 0 -4.3rem 0;
}

.purchase__visual img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 102%;
  max-width: none;
  height: auto;
}

/* purchase SP */
@media (max-width: 767px) {
  .purchase {
    padding: 2.3rem 2.5rem 2.5rem;
    border-radius: 1.5rem;
    margin: 6rem 3rem 6rem;
    overflow: visible;
  }

  .purchase__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .purchase__text {
    display: contents;
    max-width: none;
  }

  .purchase__title {
    font-size: 2.6rem;
    letter-spacing: 0.13rem;
    line-height: 1.45;
    margin-bottom: 1.5rem;
    order: 1;
  }

  .purchase__lead {
    font-size: 1.5rem;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 1.5rem;
    order: 2;
  }

  .purchase__visual {
    flex: none;
    position: relative;
    width: calc(100% + 0.5rem);
    height: 19.7rem;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    order: 3;
  }

  .purchase__visual img {
    position: absolute;
    top: 50%;
    left: calc(50% + 0.5rem);
    transform: translate(-50%, -50%);
    width: 130%;
    max-width: none;
  }

  .purchase__btn {
    width: 100%;
    height: 6.8rem;
    font-size: 1.47rem;
    padding: 0 1.4rem;
    border-radius: 0.5rem;
    order: 4;
  }
}

/* ======================================
   会社案内ページ — page-hero 上書き
   ====================================== */

.page-hero--company .page-hero__visual {
  top: 14.5rem;
  right: -2.5rem;
  width: 52.5%;
  max-width: 75.6rem;
}

.page-hero--company .page-hero__blob {
  left: 0;
  top: 0;
  width: 85%;
}

.page-hero--company .page-hero__photo {
  left: 5%;
  margin-top: 0;
  width: 72%;
}

/* ======================================
   会社案内ページ — company-intro
   ====================================== */

.company-intro {
  padding: 10rem 0 6rem;
  text-align: center;
}

.company-intro__inner {
  max-width: var(--inner);
  margin: 0 auto;
  padding: 0 3rem;
}

.company-intro__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 6.5rem;
}

.company-intro__mark {
  width: 30.8rem;
  height: auto;
}

.company-intro__tagline {
  font-family: var(--font-jp);
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--blue-main);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.company-intro__desc {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.15;
  color: #333;
  max-width: 100.3rem;
  margin: 0 auto;
}

/* ======================================
   会社案内ページ — company-info（会社概要テーブル）
   ====================================== */

.company-info {
  position: relative;
  padding: 4rem 0 8rem;
}

.company-info__wave {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 145.5rem;
  height: auto;
  z-index: -1;
  pointer-events: none;
}

.company-info__inner {
  max-width: 106rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.company-info__head {
  text-align: center;
  margin-bottom: 5rem;
}

.company-info__en {
  display: block;
  font-family: var(--font-jp);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
  line-height: 1.8;
}

.company-info__title {
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.company-info__table {
  width: 100%;
}

.company-info__row {
  display: flex;
  align-items: stretch;
  position: relative;
}

.company-info__row::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, #3d8dc1 20rem, #666 20rem);
}

.company-info__row::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 20rem;
  height: 3px;
  background: #3d8dc1;
  z-index: 1;
}

.company-info__row dt {
  flex: 0 0 20rem;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: #3d8dc1;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  padding: 4rem 0 4rem 2.2rem;
  background: #f4fbfd;
}

.company-info__row dd {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #000;
  padding: 4rem 0 4rem 3rem;
}

.company-info__row dd p {
  margin: 0;
}

.company-info__row dd.company-info__dd--blue {
  color: #3d8dc1;
}

.company-info__related-link {
  color: #3d8dc1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.3s;
}

.company-info__related-link:hover {
  opacity: 0.5;
}

.company-info__ext {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: #3d8dc1;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.company-info__marker {
  color: #3d8dc1;
}

.company-info__address-grid {
  display: flex;
  gap: 4rem;
}

.company-info__address-col p {
  margin: 0;
}

.company-info__access-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 1.4rem;
  color: #3d8dc1;
  text-decoration: none;
}

.company-info__access-link:hover {
  text-decoration: underline;
}

/* ======================================
   会社案内ページ — company-cards-wrap（特徴+研究 背景ラッパー）
   ====================================== */

.company-cards-wrap {
  position: relative;
  overflow: hidden;
  padding-top: 12rem;
  padding-bottom: 14rem;
}

.company-cards-wrap__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ======================================
   会社案内ページ — company-features（特徴カード2枚）
   ====================================== */

.company-features {
  padding: 4rem 0 0;
}

.company-features__inner {
  max-width: 106rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.company-features__grid {
  display: grid;
  /* 内側1000px ＝ 47.7rem×2 ＋ gap 4.6rem。48remだと6pxはみ出して左右にずれる */
  grid-template-columns: 47.7rem 47.7rem;
  gap: 4.6rem;
  justify-content: center;
  align-items: start;
}

.company-fcard {
  display: block;
  border-radius: 2rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.06);
}

.company-fcard__img {
  width: 100%;
}

.company-fcard__img img {
  width: 100%;
  height: auto;
  display: block;
}

.company-fcard__body {
  position: relative;
  z-index: 1;
  margin-top: -5.2rem;
  padding: 0 4.5rem 4rem;
  display: flex;
  flex-direction: column;
}

.company-fcard__title {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #1e72bc;
  margin-bottom: 2.1rem;
}

.company-fcard__desc {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  color: #0b0308;
  text-align: justify;
  margin-bottom: 2.4rem;
}

.company-fcard__btn {
  display: inline-flex;
  align-items: center;
  width: 22rem;
  height: 5.2rem;
  padding: 0 2.8rem;
  border: 1px solid #1565a0;
  border-radius: 0.5rem;
  font-size: 1.47rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1565a0;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.company-fcard__btn-arrow {
  width: 1.7rem;
  height: auto;
  fill: #1565a0;
  margin-left: auto;
  transition: fill 0.3s;
}

.company-fcard__btn:hover {
  background: #1565a0;
  color: #fff;
}

.company-fcard__btn:hover .company-fcard__btn-arrow {
  fill: #fff;
}

/* ======================================
   会社案内ページ — company-research（研究開発カード）
   ====================================== */

.company-research {
  padding: 4.6rem 0 4rem;
}

.company-research__inner {
  max-width: 106rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.company-research__card {
  display: flex;
  align-items: stretch;
  border-radius: 2rem;
  background: #fff;
  box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.06);
  padding: 4rem 4.5rem 4rem 4.5rem;
}

.company-research__img {
  flex: 0 0 32.5rem;
  border-radius: 1.2rem;
  overflow: hidden;
}

.company-research__img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.company-research__body {
  flex: 1;
  padding: 0 0 0 3rem;
  display: flex;
  flex-direction: column;
}

.company-research__label {
  font-size: 2.1rem;
  font-weight: 700;
  color: #016dc2;
  letter-spacing: 0.05em;
  line-height: 1.45;
  margin-bottom: 2.1rem;
}

.company-research__title {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: #000;
  padding-top: 0.5rem;
  margin-bottom: 1rem;
  max-width: 54.6rem;
}

.company-research__desc {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  color: #0b0308;
  text-align: justify;
  margin-bottom: 2.4rem;
  max-width: 56rem;
}

.company-research__btn {
  display: inline-flex;
  align-items: center;
  width: 22rem;
  height: 5.2rem;
  padding: 0 2.8rem;
  border: 1px solid #1565a0;
  border-radius: 0.5rem;
  font-size: 1.47rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1565a0;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.company-research__btn-arrow {
  width: 1.7rem;
  height: auto;
  fill: #1565a0;
  margin-left: auto;
  transition: fill 0.3s;
}

.company-research__btn:hover {
  background: #1565a0;
  color: #fff;
}

.company-research__btn:hover .company-research__btn-arrow {
  fill: #fff;
}

/* ======================================
   会社案内ページ — company-links（サステナビリティ・採用）
   ====================================== */

.company-links {
  padding: 12rem 0 13rem;
}

.company-links__inner {
  max-width: 106rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.company-links__grid {
  display: grid;
  /* 内側1000px に収まる列幅。上の .company-features__grid と同値 */
  grid-template-columns: 47.7rem 47.7rem;
  gap: 4.6rem;
  justify-content: center;
}

.company-lcard {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background: #d8eff9;
  padding: 4.8rem;
  gap: 2.5rem;
  text-decoration: none;
  color: inherit;
}

.company-lcard__img {
  width: 100%;
  aspect-ratio: 390 / 250;
  overflow: hidden;
}

.company-lcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-lcard__img--collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.2rem;
  border-radius: 1.2rem;
}

.company-lcard__img--collage img {
  border-radius: 0;
}

.company-lcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.company-lcard__label {
  font-size: 2.2rem;
  font-weight: 700;
  color: #016dc2;
  letter-spacing: 0.05em;
  line-height: 1.45;
  margin-bottom: 2.1rem;
}

.company-lcard__title {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #0b0308;
  margin-bottom: 0.5rem;
}

.company-lcard__desc {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.8;
  color: #0b0308;
  text-align: justify;
  /* 本文が短くなったぶん、ボタンが近づかないよう1行分（2.7rem）多くあける */
  margin-bottom: 5.4rem;
}

.company-lcard__desc p + p {
  margin-top: 1.2rem;
}

/* 段落を改行せず、1つの文章としてつなげる */
.company-lcard__desc p {
  display: inline;
}

.company-lcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 22rem;
  height: 5.2rem;
  border: 1px solid #1565a0;
  border-radius: 0.5rem;
  font-size: 1.47rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1565a0;
  text-decoration: none;
  margin-top: auto;
  transition: background 0.3s, color 0.3s;
}

.company-lcard__btn:hover {
  background: #1565a0;
  color: #fff;
}

.company-lcard__btn-ext {
  width: 1.2rem;
  height: 1.2rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* ======================================
   会社案内ページ — SP（375px）
   ====================================== */
@media (max-width: 767px) {

  /* --- page-hero（会社案内） --- */
  .page-hero--company::before {
    bottom: -1.5rem;
  }

  .page-hero--company .page-hero__visual {
    position: relative;
    left: 2.5rem;
    right: auto;
    top: auto;
    width: 102.07%;
    max-width: none;
    margin-top: 1.5rem;
  }

  .page-hero--company .page-hero__blob {
    left: 1.9%;
    top: 0.5%;
    width: 83%;
  }

  .page-hero--company .page-hero__photo {
    left: 2%;
    margin-top: 1.5rem;
    width: 79%;
  }

  /* --- company-intro --- */
  .company-intro__mark {
    width: 24.64rem;
  }

  .company-intro__tagline {
    font-size: 2.24rem;
  }

  .company-intro__desc {
    text-align: justify;
  }

  /* --- company-info（会社概要テーブル） --- */
  .company-info__row dt {
    flex: 0 0 calc(33.3% - 1.6rem);
    font-size: 1.4rem;
    padding: 3rem 0 3rem 1.5rem;
  }

  .company-info__row dd {
    flex: 1;
    font-size: 1.4rem;
    padding: 3rem 1.5rem 3rem 2rem;
  }

  .company-info__name-ja {
    line-height: 1.4;
  }

  .company-info__en {
    font-size: 1.1rem;
    display: inline-block;
    margin-top: -0.5rem;
  }

  .company-info__row::before {
    width: calc(33.3% - 1.6rem);
  }

  .company-info__row::after {
    background: linear-gradient(to right, #3d8dc1 calc(33.3% - 1.6rem), #666 calc(33.3% - 1.6rem));
  }

  .company-info__address-grid {
    flex-direction: column;
    gap: 2.5rem;
  }

  .company-info {
    padding-bottom: 3rem;
  }

  /* --- company-cards-wrap --- */
  .company-cards-wrap {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }

  .company-cards-wrap__bg.sp-only {
    transform: none;
    top: 0;
    bottom: auto;
    height: 100%;
  }

  /* --- company-features（特徴カード） --- */
  .company-features__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 0;
  }

  .company-fcard__body {
    padding: 0 2rem 2rem;
  }

  .company-fcard__title {
    font-size: 2.1rem;
  }

  .company-fcard__desc {
    font-size: 1.5rem;
  }

  /* --- company-research（研究開発カード） --- */
  .company-research__card {
    flex-direction: column;
    padding: 2rem;
    width: 31.5rem;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .company-research__img {
    flex: none;
    width: 100%;
  }

  .company-research__body {
    padding: 2rem 0 0 0;
  }

  .company-research__title {
    font-size: 1.8rem;
  }

  /* --- company-links（サステナビリティ・採用） --- */
  .company-links__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .company-lcard {
    padding: 2rem;
  }

  .company-lcard__title {
    font-size: 1.8rem;
  }

}

/* ================================================
   omneed-felbinac.html 固有スタイル（PC Only）
   ================================================ */

/* --- page-hero オムニード修正 --- */
.page-hero--omneed {
  height: 46rem;
}

.page-hero--omneed .page-hero__bg2 {
  position: absolute;
  left: 47.65%;
  top: 0;
  width: 52.35%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--omneed .page-hero__bg3 {
  position: absolute;
  left: 35.7%;
  top: 0;
  width: 50.8%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--omneed .page-hero__bg4 {
  position: absolute;
  left: 0;
  top: 0;
  width: 53.4%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--omneed .page-hero__en {
  font-family: "Urbanist", var(--font-en), sans-serif;
  font-size: 1.9rem;
  letter-spacing: 0.2rem;
}

.page-hero--omneed .page-hero__title {
  font-size: 3.7rem;
  letter-spacing: 0.38rem;
}

.page-hero--omneed .page-hero__photo {
  left: 4%;
  width: 80%;
  margin-top: 1rem;
}

/* --- showcase セクション --- */
.od-showcase {
  max-width: 120rem;
  margin: 0 auto;
  padding: 4.5rem 4rem 0;
}

.od-showcase__inner {
  max-width: 99.4rem;
  margin: 0 auto;
}

.od-showcase__inner img {
  width: 100%;
  height: auto;
  border-radius: 0.7rem;
}

/* --- mechanism セクション --- */
.od-mechanism {
  max-width: 120rem;
  margin: 0 auto;
  padding: 10rem 4rem 14rem;
  text-align: center;
  position: relative;
}

.od-mechanism__deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.od-mechanism__deco--blob {
  width: 15.375rem;
  height: auto;
  right: -4.7rem;
  top: 48.4rem;
  z-index: 1;
}

.od-mechanism__deco--dot01 {
  width: 3.06rem;
  height: 3.06rem;
  right: 4rem;
  bottom: 4rem;
}

.od-mechanism__deco--dots-left {
  width: 5.6rem;
  height: 7.3rem;
  left: -4.3rem;
  top: 87.2rem;
}

.od-mechanism__deco--dots-mid {
  width: 6.12rem;
  height: 5.95rem;
  left: 56.4rem;
  top: 66.5rem;
}

.od-mechanism__title {
  font-family: var(--font-jp);
  font-size: 3.3rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.35rem;
  color: var(--blue-alt);
  margin-bottom: 5rem;
}

.od-mechanism__content {
  display: flex;
  align-items: center;
  gap: 7rem;
  max-width: 84.5rem;
  margin: 0 auto 6rem;
}

.od-mechanism__illust {
  flex: 0 0 42.7rem;
}

.od-mechanism__illust img {
  width: 100%;
  height: auto;
}

.od-mechanism__desc {
  flex: 1;
  text-align: left;
  font-family: var(--font-jp);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

.od-mechanism__desc p + p {
  margin-top: 2.1rem;
}

.od-mechanism__compare {
  display: flex;
  justify-content: center;
  gap: 8.9rem;
  max-width: 108rem;
  margin: 0 auto;
  padding-top: 6rem;
}

.od-mechanism__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  flex: 0 1 50rem;
  padding: 0;
  position: relative;
  transition: opacity 0.3s;
}

.od-mechanism__card:hover {
  opacity: 0.7;
}

.od-mechanism__card-blob {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.od-mechanism__card-blob--left {
  width: 50.06rem;
  height: auto;
  top: -5.5rem;
  left: 0.2rem;
  transform: scale(1.116);
}

.od-mechanism__card-blob--right {
  width: 49.28rem;
  height: auto;
  top: -3.5rem;
  right: 0.2rem;
  left: auto;
  transform: scale(1.06);
}

.od-mechanism__card-img {
  width: 100%;
  height: 24rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.od-mechanism__card-img--left {
  max-width: 27.65rem;
}

.od-mechanism__card-img--right {
  /* 画像の左右にあった白い余白（各18px）を落としたものに差し替えたので、
     パッケージが今までと同じ大きさで出るように枠を余白のぶんだけ詰めた */
  max-width: 21.6rem;
}

.od-mechanism__card-img img {
  width: 100%;
  height: auto;
}

.od-mechanism__card-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-jp);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
  color: var(--blue-alt);
  position: relative;
  z-index: 1;
}

.od-mechanism__arrow {
  flex-shrink: 0;
  color: var(--blue-alt);
}

/* --- detail セクション（70mg ＆ FBプラスターα 共通） --- */
.od-detail {
  max-width: 120rem;
  margin: 0 auto;
  padding: 26rem 4rem 8rem;
  position: relative;
  z-index: 1;
  scroll-margin-top: 12rem;
}

.od-detail-wave-wrap {
  position: relative;
  z-index: 0;
  width: 100%;
  left: auto;
  transform: none;
  pointer-events: none;
  margin-top: -3rem;
  margin-bottom: -143.3rem;
}

.od-detail-wave-wrap__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 137.3rem;
  object-fit: fill;
}

.od-detail-wave-wrap__img--sp {
  display: none;
}

.od-detail-wave-wrap__bg {
  position: absolute;
  top: 18rem;
  left: 0;
  width: 100%;
  max-width: none;
  height: 320rem;
  z-index: -1;
  object-fit: fill;
}

.od-detail__deco {
  position: absolute;
  pointer-events: none;
}

.od-detail__deco--blob-right {
  width: 12.5rem;
  height: auto;
  right: -9.6rem;
  top: 30.8rem;
}

.od-detail__deco--blob-left {
  width: 16.3rem;
  height: auto;
  left: -7.3rem;
  top: 54.5rem;
}

.od-detail__deco-dots-right {
  position: absolute;
  right: -4.5rem;
  bottom: 9rem;
  width: 13.5rem;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.od-detail__card {
  position: relative;
  z-index: 1;
  border-radius: 2rem;
  padding: 5rem 6rem 5.5rem;
  background: #fff;
  box-shadow: 0 0.6rem 1rem rgba(0, 0, 0, 0.15);
  max-width: 100.2rem;
  margin: 0 auto;
}

.od-detail__title {
  font-family: var(--font-jp);
  font-size: 2.7rem;
  font-weight: 700;
  color: var(--blue-alt);
  text-align: center;
  letter-spacing: 0.27rem;
  margin-bottom: 1.3rem;
}

.od-detail__divider {
  width: 4rem;
  height: 0.3rem;
  background: var(--blue-alt);
  margin: 0 auto 3.5rem;
}

.od-detail__intro {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  margin-bottom: 5rem;
}

.od-detail__intro-text {
  flex: 1;
}

.od-detail__intro-img {
  flex: 0 0 28rem;
}

.od-detail__intro-img img {
  width: 100%;
  height: auto;
}

.od-detail__subtitle {
  font-family: var(--font-jp);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.12rem;
  color: var(--blue-alt);
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.od-detail__desc {
  font-family: var(--font-jp);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

.od-detail__desc + .od-detail__desc {
  margin-top: 0;
}

/* 特徴ボックス */
.od-detail__features {
  display: flex;
  align-items: center;
  background: #d8f8f3;
  border-radius: 1rem;
  padding: 3.5rem 4rem;
  margin-bottom: 5rem;
  gap: 4rem;
}

.od-detail__features-label {
  font-family: var(--font-jp);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--blue-alt);
  letter-spacing: 0.5em;
  flex-shrink: 0;
  padding-right: 3rem;
  border-right: 0.05rem solid #000;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.od-detail__features-body {
  font-family: var(--font-jp);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  color: #5c5c5c;
}

.od-detail__features-body p {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.od-detail__check {
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  margin-top: 0.3rem;
}

.od-detail__features-body strong {
  color: #4b8ec9;
  font-weight: 700;
}

#sec-fb-plaster {
  position: relative;
  padding-top: 0;
  margin-top: 1.7rem;
}

#sec-fb-plaster .od-detail__intro {
  margin-bottom: 3.5rem;
}

#sec-fb-plaster .od-detail__features-body strong {
  color: var(--blue-alt);
}

.od-detail__features-body p + p {
  margin-top: 0.8rem;
}

/* 使用方法 */
.od-detail__usage {
  margin-bottom: 5rem;
}

.od-detail__usage-title {
  font-family: var(--font-jp);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--blue-alt);
  text-align: center;
  letter-spacing: 0.08rem;
  line-height: 1.6;
  margin-bottom: 3rem;
}

.od-detail__usage-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.od-detail__usage-step {
  flex: 0 1 24rem;
  text-align: left;
}

.od-detail__usage-step img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
}

.od-detail__usage-step p {
  font-family: var(--font-jp);
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--ink);
}

.od-detail__usage-arrow {
  display: flex;
  align-items: center;
  height: 12.5rem;
  font-size: 2.16rem;
  color: var(--blue-alt);
}

/* 成分テーブル */
.od-detail__table {
  margin-bottom: 2.5rem;
  border-radius: 0.88rem;
  overflow: hidden;
  background: rgba(239, 238, 232, 0.6);
}

.od-detail__table-head {
  display: flex;
  align-items: center;
  gap: 1.76rem;
  padding: 0.88rem 3.5rem;
  font-family: var(--font-jp);
  border-bottom: 0.3rem solid #fff;
}

.od-detail__table-label {
  font-size: 1.76rem;
  font-weight: 700;
  color: var(--blue-logo);
  letter-spacing: 0.035rem;
}

.od-detail__table-sub {
  font-size: 1.4rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
}

.od-detail__table-body {
  display: flex;
  gap: 3rem;
  padding: 1.6rem 3.5rem 2.5rem;
}

.od-detail__table-left {
  flex: 0 0 30.7rem;
}

.od-detail__table-cat {
  font-family: var(--font-jp);
  font-size: 1.4rem;
  font-weight: 400;
  color: #000;
  padding-bottom: 0.8rem;
  border-bottom: 0.18rem solid #d1d1d6;
  margin-bottom: 0;
}

.od-detail__table-row {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 0;
  border-bottom: 0.09rem solid #d1d1d6;
  font-family: var(--font-jp);
  font-size: 1.32rem;
  color: #000;
}

.od-detail__table-row:last-child {
  border-bottom: 0.09rem solid #d1d1d6;
}

.od-detail__table-right {
  flex: 1;
}

.od-detail__table-right p {
  font-family: var(--font-jp);
  font-size: 1.5rem;
  line-height: 1.8;
  color: #000;
  text-align: justify;
}

/* 効能 */
.od-detail__efficacy {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 4rem;
}

.od-detail__efficacy-label {
  flex: 0 0 23.1rem;
  display: flex;
  align-items: center;
  font-family: var(--font-jp);
  font-size: 1.67rem;
  font-weight: 700;
  color: var(--blue-logo);
  letter-spacing: 0.033rem;
  white-space: nowrap;
  background: rgba(239, 238, 232, 0.6);
  border-radius: 0.88rem 0 0 0.88rem;
  padding: 0 3.2rem;
}

.od-detail__efficacy-text {
  flex: 1;
  font-family: var(--font-jp);
  font-size: 1.5rem;
  line-height: 1.8;
  color: #0b0308;
  text-align: justify;
  background: rgba(239, 238, 232, 0.6);
  border-radius: 0 0.88rem 0.88rem 0;
  padding: 1.8rem 3rem;
}

/* 商品リンクカード */
.od-detail__link {
  display: flex;
  align-items: center;
  max-width: 53.2rem;
  margin: 0 auto;
  padding: 1.2rem 2rem 1.2rem 2.9rem;
  background: #fff;
  border: 0.1rem solid var(--blue-alt);
  border-radius: 0.87rem;
  transition: opacity 0.3s;
}

.od-detail__link:hover {
  opacity: 0.7;
}

.od-detail__link-img {
  flex: 0 0 8.9rem;
  width: 8.9rem;
  height: auto;
}

/* 矢印（.od-detail__link-arrow）は span なので、この器が flex でないと
   幅指定が効かず、中の svg が width/height:100% で本文幅まで膨張する。
   SP版は後方の @media 内で別途 flex 指定済み。 */
.od-detail__link-body {
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 3.4rem;
  margin-right: auto;
}

.od-detail__link-texts {
  flex: 1;
  min-width: 0;
}

.od-detail__link-name {
  font-family: var(--font-jp);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue-alt);
  letter-spacing: 0.22rem;
  margin-bottom: 0.44rem;
  white-space: nowrap;
}

.od-detail__link-ext {
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.od-detail__link-meta {
  display: flex;
  align-items: center;
  gap: 0.88rem;
}

.od-detail__link-class {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  background: #fff;
  border: 0.05rem solid #000;
  color: #000;
  font-family: var(--font-jp);
  font-size: 1.23rem;
  font-weight: 400;
  letter-spacing: 0.037rem;
}

.od-detail__link-spec {
  font-family: var(--font-jp);
  font-size: 1.32rem;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.026rem;
}

.od-detail__link-arrow {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
}

.od-detail__link-arrow svg {
  width: 100%;
  height: 100%;
}

.od-detail__link-arrow .od-arrow-bg {
  transition: fill 0.3s, stroke 0.3s;
}

.od-detail__link-arrow .od-arrow-icon {
  transition: stroke 0.3s;
}

.od-detail__link:hover .od-arrow-bg {
  fill: #1E72BC;
  stroke: #1E72BC;
}

.od-detail__link:hover .od-arrow-icon {
  stroke: #fff;
}

.od-detail__deco-ellipse-left {
  position: absolute;
  left: -20rem;
  top: -5rem;
  width: 70.3rem;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.od-detail__deco-ellipse {
  position: absolute;
  right: -26rem;
  bottom: -8rem;
  width: 55.8rem;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* セクション切替 波線（薄い＋濃い） */
.od-detail-wave2 {
  position: relative;
  width: 100%;
  left: auto;
  transform: none;
  pointer-events: none;
  margin-top: 6rem;
}

.od-detail-wave2__light {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: 141.2rem;
  object-fit: fill;
}

.od-detail-wave2__dark {
  position: absolute;
  top: -8.8rem;
  left: 0.1rem;
  width: 100%;
  max-width: none;
  height: 49.9rem;
  object-fit: fill;
  transform: scaleY(-1) scale(1.1);
}

.od-detail-wave2__sp {
  display: none;
}

.od-detail__bg-sp {
  display: none;
}

/* --- other products セクション --- */
.od-other {
  position: relative;
  z-index: 2;
  max-width: 120rem;
  margin: -127rem auto 0;
  padding: 6rem 4rem 8rem;
}

.od-other ~ .purchase {
  position: relative;
  z-index: 2;
  margin-top: 4rem;
}

.od-other__head {
  text-align: center;
  margin-bottom: 4rem;
}

.od-other__en {
  font-family: var(--font-jp);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue-main);
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 0;
}

.od-other__title {
  font-family: var(--font-jp);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--blue-main);
  letter-spacing: 0;
}

.od-other__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.6rem 2.5rem;
  margin-bottom: 5rem;
}

.od-other__card {
  display: flex;
  align-items: center;
  height: 13rem;
  padding: 0 2.4rem 0 3.2rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.06);
  transition: opacity 0.3s;
  text-decoration: none;
}

.od-other__card:hover {
  opacity: 0.7;
}

.od-other__card-img {
  flex: 0 0 10.6rem;
  width: 10.6rem;
  height: 10.6rem;
}

.od-other__card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.od-other__card-body {
  flex: 1;
  min-width: 0;
  padding-left: 2.5rem;
}

.od-other__card-name {
  font-family: var(--font-jp);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--blue-alt);
  line-height: 1.3;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.od-other__card-extlink {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.od-other__card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.od-other__card-class {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.8rem;
  background: #fff;
  border: 0.06rem solid #000;
  color: #000;
  font-family: var(--font-jp);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.od-other__card-spec {
  font-family: var(--font-jp);
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.02em;
}

.od-other__card-arrow {
  flex: 0 0 auto;
  width: 3.8rem;
  height: 3.8rem;
  margin-left: auto;
}

.od-other__card-arrow svg {
  width: 100%;
  height: 100%;
}

.od-other__card-arrow .od-arrow-bg {
  transition: fill 0.3s, stroke 0.3s;
}

.od-other__card-arrow .od-arrow-icon {
  transition: stroke 0.3s;
}

.od-other__card:hover .od-arrow-bg {
  fill: #1E72BC;
  stroke: #1E72BC;
}

.od-other__card:hover .od-arrow-icon {
  stroke: #fff;
}

/* シリーズ一覧ボタン */
.od-other__btn-wrap {
  text-align: center;
}

.od-other__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 30.3rem;
  height: 5.2rem;
  background: transparent;
  border: 0.1rem solid var(--blue-main);
  color: #3371b3;
  font-family: var(--font-jp);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 0.5rem;
  transition: background 0.3s, transform 0.3s;
}

.od-other__btn:hover {
  background: var(--blue-main);
  color: #fff;
  transform: translateY(-0.2rem);
}

.od-other__btn:hover .icon-arrow {
  fill: #fff;
}

.od-other__btn .icon-arrow {
  width: 1.8rem;
  height: 1.4rem;
  fill: var(--blue-main);
  transition: fill 0.3s;
}

/* ============================================
   オムニードフェルビナク SP
   ============================================ */
@media (max-width: 767px) {

  /* --- page-hero（オムニード） SP --- */
  .page-hero--omneed {
    height: 28.56rem;
    padding-bottom: 4.8rem;
  }

  .page-hero--omneed::before {
    display: none;
  }

  .page-hero--omneed .page-hero__bg-sp--wave {
    position: absolute;
    left: 0;
    bottom: -2rem;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--omneed .page-hero__bg-sp--blob {
    position: absolute;
    left: 13.5rem;
    top: -10.6rem;
    width: 51.5rem;
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-11.24deg);
  }

  .page-hero--omneed .page-hero__inner {
    padding: 12.94rem 2.9rem 0;
  }

  .page-hero--omneed .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  .page-hero--omneed .page-hero__title {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  /* --- od-showcase SP --- */
  .od-showcase {
    padding-top: 7rem;
  }

  /* --- od-mechanism SP --- */
  .od-mechanism {
    padding: 6rem 2rem 5rem;
  }

  .od-mechanism__deco--dots-sp {
    width: 9rem;
    height: auto;
    left: -2rem;
    top: 11.5rem;
  }

  .od-mechanism__title {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 3.6rem;
    letter-spacing: 0.05em;
    color: var(--blue-main);
    position: relative;
    z-index: 1;
  }

  .od-mechanism__content {
    flex-direction: column;
    gap: 3rem;
  }

  .od-mechanism__illust {
    flex: none;
    width: 85%;
    margin: 0 auto;
  }

  .od-mechanism__desc {
    position: relative;
    z-index: 2;
    max-width: 31.5rem;
  }

  .od-mechanism__compare {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding-top: 4rem;
  }

  .od-mechanism__card:first-child {
    width: 61.6%;
    flex: none;
    margin-top: -2rem;
  }

  .od-mechanism__card:last-child {
    width: 61.6%;
    flex: none;
    margin-top: 9rem;
  }

  .od-mechanism__card:last-child .od-mechanism__card-img,
  .od-mechanism__card:last-child .od-mechanism__card-label {
    position: relative;
    top: -5.5rem;
  }

  .od-mechanism__card-blob--left {
    width: 100%;
    left: 0.3rem;
    top: -0.5rem;
    transform: scale(1.727);
  }

  .od-mechanism__card-blob--right {
    width: 100%;
    right: -10%;
    left: auto;
    transform: scale(1.719);
  }

  .od-mechanism__card-img {
    height: auto;
  }

  .od-mechanism__card-img--left {
    max-width: 88%;
  }

  .od-mechanism__card-img--right {
    /* PC版と同じ理由。白い余白を落としたぶんだけ詰めて、見た目の大きさを保つ */
    max-width: 71.1%;
  }

  .od-mechanism__card-label {
    font-size: 1.6rem;
    white-space: nowrap;
  }

  .od-mechanism__deco--dot01,
  .od-mechanism__deco--dots-left,
  .od-mechanism__deco--dots-mid {
    display: none;
  }

  /* --- wave SP --- */
  .od-detail-wave-wrap__img:not(.od-detail-wave-wrap__img--sp) {
    display: none;
  }

  .od-detail-wave-wrap__img--sp {
    display: block;
    width: 100%;
    height: auto;
  }

  .od-detail-wave-wrap__bg {
    display: none;
  }

  .od-detail-wave-wrap {
    margin-bottom: -247.3rem;
  }

  .od-detail {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .od-detail__card {
    max-width: 31.5rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1rem;
    text-align: center;
    padding: 3rem 2rem 2.5rem;
  }

  .od-detail__title {
    font-size: 2.2rem;
    line-height: 1.45;
    white-space: nowrap;
  }

  /* intro: 縦積み */
  .od-detail__intro {
    flex-direction: column;
    gap: 2rem;
  }

  .od-detail__intro-img {
    flex: none;
    width: 80%;
    margin: 1rem auto 0;
  }

  .od-detail__subtitle {
    font-size: 1.9rem;
    text-align: left;
  }

  .od-detail__desc {
    font-size: 1.5rem;
    text-align: justify;
  }

  /* 特徴ボックス: 縦積み */
  .od-detail__features {
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1rem;
  }

  .od-detail__features-label {
    font-size: 1.8rem;
    padding-right: 0;
    border-right: none;
    border-bottom: 0.05rem solid #000;
    padding-bottom: 1rem;
    justify-content: center;
  }

  .od-detail__features-body {
    font-size: 1.4rem;
    text-align: justify;
  }

  /* 使用方法: 縦積み */
  .od-detail__usage-title {
    font-size: 1.61rem;
  }

  .od-detail__usage-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .od-detail__usage-step {
    flex: none;
    width: 100%;
  }

  .od-detail__usage-step p {
    line-height: 1.5;
  }

  .od-detail__usage-step img {
    margin-bottom: 1rem;
  }

  .od-detail__usage-arrow {
    height: auto;
    font-size: 2.69rem;
    transform: rotate(90deg);
    margin: -1.5rem 0 0;
  }

  /* 成分テーブル: 縦積み */
  .od-detail__table-head {
    padding: 0.8rem 1.5rem;
  }

  .od-detail__table-body {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.2rem 1.5rem 2rem;
  }

  .od-detail__table-left {
    flex: none;
  }

  .od-detail__table-cat {
    text-align: left;
  }

  .od-detail__table-row {
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
    text-align: left;
  }

  .od-detail__table-right p {
    font-size: 1.4rem;
    text-align: justify;
  }

  /* 効能: 縦積み */
  .od-detail__efficacy {
    flex-direction: column;
    gap: 0;
  }

  .od-detail__efficacy-label {
    flex: none;
    border-radius: 0.88rem 0.88rem 0 0;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    margin-top: 0.3rem;
    border-bottom: 0.2rem solid #fff;
  }

  .od-detail__efficacy-text {
    border-radius: 0 0 0.88rem 0.88rem;
    padding: 1.2rem 1.5rem;
    font-size: 1.4rem;
    text-align: justify;
  }

  /* 商品リンクカード */
  .od-detail__link {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
  }

  .od-detail__link-img {
    flex: none;
    width: 60%;
  }

  .od-detail__link-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .od-detail__link-texts {
    flex: 1;
    min-width: 0;
  }

  .od-detail__link-name {
    font-size: 1.6rem;
    white-space: normal;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .od-detail__link-meta {
    justify-content: flex-start;
  }

  .od-detail__link-arrow {
    position: static;
    margin-top: 0;
    margin-left: auto;
    width: 2.6rem;
    height: 2.6rem;
  }

  /* --- FBプラスター背景 SP --- */
  #sec-fb-plaster {
    position: relative;
  }

  .od-detail {
    padding-top: 22rem;
    background: linear-gradient(to bottom, transparent 0%, #e8f5fb 30%, #e8f5fb 85%, #fff 100%);
  }

  #sec-fb-plaster {
    background: none;
  }

  #sec-fb-plaster {
    position: relative;
  }

  .od-detail__bg-sp {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  /* --- wave2 SP --- */
  .od-detail-wave2__light,
  .od-detail-wave2__dark {
    display: none;
  }

  .od-detail-wave2 {
    margin-top: -6rem;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
  }

  .od-detail-wave2__sp {
    display: block;
    width: 100%;
    height: auto;
  }

  /* --- other products SP --- */
  .od-other {
    margin-top: -30rem;
    padding: 4rem 2rem 6rem;
    background: linear-gradient(to bottom, #d6eef8 0%, #e8f5fb 20%, #e8f5fb 80%, #fff 100%);
  }

  .od-other__head {
    margin-bottom: 3rem;
  }

  .od-other__en {
    font-size: 1.4rem;
  }

  .od-other__title {
    font-size: 2.4rem;
  }

  .od-other__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-bottom: 4rem;
  }

  .od-other__card {
    height: 8rem;
    padding: 0 1.5rem;
    border-radius: 0.6rem;
    gap: 1.5rem;
  }

  .od-other__card-img {
    flex: 0 0 7.3rem;
    width: 7.3rem;
    height: 7.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .od-other__card-img img {
    width: 85%;
    height: 85%;
  }

  .od-other__card:nth-child(1) .od-other__card-img img,
  .od-other__card:nth-child(2) .od-other__card-img img {
    width: 110%;
    height: 110%;
  }

  .od-other__card-body {
    padding-left: 0;
  }

  .od-other__card-name {
    font-size: 1.64rem;
    letter-spacing: 0.15rem;
    margin-bottom: 0.4rem;
  }

  .od-other__card-meta {
    display: none;
  }

  .od-other__card-arrow {
    flex: 0 0 2.3rem;
    width: 2.3rem;
    height: 2.3rem;
  }

  .od-other__btn {
    width: 100%;
    max-width: 28rem;
    font-size: 1.5rem;
    height: 4.8rem;
  }

}

/* ======================================================
   研究開発ページ (research.html)
   ====================================================== */

/* --- page-hero 研究開発 --- */
.page-hero--research {
  height: 46rem;
}

.page-hero--research .page-hero__bg2 {
  position: absolute;
  left: 47.65%;
  top: 0;
  width: 52.35%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--research .page-hero__bg3 {
  position: absolute;
  left: 35.7%;
  top: 0;
  width: 50.8%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--research .page-hero__bg4 {
  position: absolute;
  left: 0;
  top: 0;
  width: 53.4%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--research .page-hero__en {
  font-family: "Urbanist", var(--font-en), sans-serif;
  font-size: 2.16rem;
  font-weight: 700;
  letter-spacing: 0.216rem;
}

.page-hero--research .page-hero__title {
  font-size: 4rem;
  letter-spacing: 0.4rem;
}

.page-research .rd-body__hero {
  margin-top: 0;
}

.rd-body__hero {
  max-width: 99.4rem;
  margin: 9.8rem auto 0;
  position: relative;
  z-index: 1;
  border-radius: 0.5rem;
  overflow: hidden;
}

.rd-body__hero img {
  width: 100%;
  height: auto;
  display: block;
}

.rd-body__lead {
  max-width: 99.4rem;
  margin: 3.9rem auto 0;
  padding: 4rem;
  background: #e1e8f0;
  font-size: 1.6rem;
  line-height: 2.15;
  color: #333;
  text-align: left;
}

.rd-body__wrap {
  max-width: 99.4rem;
  margin: 0 auto;
  padding: 12.9rem 0 8rem;
}

.rd-body__content {
  flex: 1;
  min-width: 0;
}

.rd-body__section {
  margin-bottom: 13rem;
  scroll-margin-top: 12rem;
}

.rd-body__section:last-child {
  margin-bottom: 0;
}

.rd-body__heading {
  font-family: var(--font-jp);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14rem;
  color: var(--blue-main);
  margin-bottom: 2rem;
}

.rd-body__block {
  display: flex;
  gap: 4.5rem;
  align-items: flex-start;
  margin-bottom: 5rem;
}

.rd-body__block:last-child {
  margin-bottom: 0;
}

.rd-body__block--reverse {
  flex-direction: row-reverse;
  align-items: center;
}

.rd-body__text {
  flex: 1;
  min-width: 0;
}

.rd-body__text p {
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: #19324C;
  margin-bottom: 2.4rem;
}

.rd-body__text p:last-child {
  margin-bottom: 0;
}

.rd-body__img {
  flex: 0 0 49.9rem;
  border-radius: 0.8rem;
  overflow: hidden;
}

.rd-body__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#rd-sec1 > .rd-body__block:first-child .rd-body__img {
  height: 42.7rem;
}

#rd-sec1 > .rd-body__block--reverse .rd-body__img {
  height: 35.1rem;
}

#rd-sec2 {
  margin-bottom: 11.5rem;
}

#rd-sec2 > .rd-body__block:first-child {
  margin-bottom: 6.2rem;
}

#rd-sec2 .rd-body__block {
  align-items: center;
}

#rd-sec2 > .rd-body__block:first-child .rd-body__img {
  height: 41.4rem;
}

#rd-sec2 > .rd-body__block--reverse {
  align-items: flex-start;
}

#rd-sec2 > .rd-body__block--reverse .rd-body__img {
  height: 32.4rem;
}

#rd-sec2 > .rd-body__block--reverse .rd-body__img img {
  object-position: bottom;
}

#rd-sec3 .rd-body__heading {
  line-height: 1.2;
}

#rd-sec3 > p {
  font-size: 1.5rem;
  line-height: 1.8;
  color: #19324C;
  text-align: justify;
}

#rd-sec3 > p + p {
  margin-top: 0;
}

.rd-body__bottom-photo {
  margin: 4.9rem 0 0;
  height: 29.8rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.rd-body__bottom-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rd-body__cta {
  text-align: center;
  margin-top: 11rem;
  margin-bottom: 6rem;
}

.rd-body__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 22rem;
  height: 5.2rem;
  border: 1px solid var(--blue-main);
  border-radius: 0.5rem;
  color: var(--blue-main);
  font-size: 1.47rem;
  font-weight: 700;
  letter-spacing: 0.147rem;
  transition: background 0.3s, color 0.3s;
}

.rd-body__cta-btn svg {
  width: 1.1rem;
  height: auto;
  fill: currentColor;
}

.rd-body__cta-btn:hover {
  background: var(--blue-main);
  color: #fff;
}

/* --- 研究開発ページ SP --- */
@media (max-width: 767px) {

  /* page-hero（研究開発）SP */
  .page-hero--research {
    height: 28.56rem;
    padding-bottom: 8.7rem;
    overflow: visible;
  }

  .page-hero--research::before {
    display: none;
  }

  .page-hero--research .page-hero__bg-sp--wave {
    display: block;
    position: absolute;
    left: 0;
    bottom: -2rem;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--research .page-hero__bg-sp--blob {
    display: block;
    position: absolute;
    left: 13.5rem;
    top: -10.6rem;
    width: 51.5rem;
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-11.24deg);
  }

  .page-hero--research .page-hero__inner {
    padding: 14.6rem 2.9rem 0;
  }

  .page-hero--research .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  .page-hero--research .page-hero__title {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  .rd-body {
    padding-top: 2.5rem;
  }

  .rd-body__hero {
    margin-top: 4rem;
    margin-left: 2rem;
    margin-right: 2rem;
    border-radius: 0.5rem;
  }

  .rd-body__lead {
    margin: 3rem 2rem 0;
    padding: 2rem 2rem;
    font-size: 1.4rem;
    line-height: 2;
    text-align: justify;
  }

  .rd-body__wrap {
    flex-direction: column;
    padding: 7rem 2rem 6rem;
    gap: 0;
  }

  .rd-body__section {
    margin-bottom: 8rem;
    scroll-margin-top: 8rem;
  }

  .rd-body__heading {
    font-size: 2.2rem;
    margin-bottom: 1.6rem;
  }

  .rd-body__block {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .rd-body__block--reverse {
    flex-direction: column;
  }

  .rd-body__img {
    flex: none;
    width: 72%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.8rem;
  }

  #rd-sec1 > .rd-body__block:first-child .rd-body__img,
  #rd-sec1 > .rd-body__block--reverse .rd-body__img,
  #rd-sec2 > .rd-body__block:first-child .rd-body__img,
  #rd-sec2 > .rd-body__block--reverse .rd-body__img {
    height: auto;
  }

  .rd-body__img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  #rd-sec2 {
    margin-bottom: 8rem;
  }

  #rd-sec2 > .rd-body__block:first-child {
    margin-bottom: 3rem;
  }

  .rd-body__text p {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  #rd-sec3 > p {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .rd-body__bottom-photo {
    height: auto;
    border-radius: 0.8rem;
  }

  .rd-body__bottom-photo img {
    height: auto;
  }

  .rd-body__cta {
    margin-top: 6.5rem;
    margin-bottom: 4rem;
  }

  .rd-body__cta-btn {
    width: 22rem;
    height: 5.2rem;
    font-size: 1.4rem;
  }

}

/* --- 研究開発ページ（新構成） --- */
.page-research .rd-body__lead {
  color: #333;
  margin-bottom: 0;
  border-radius: 0.8rem;
}

.page-research .rd-body__lead p {
  color: #333;
}

.page-research .rd-body__wrap {
  padding-top: 10rem;
}

.page-research .rd-body__section {
  margin-bottom: 4rem;
}

.page-research #rd-sec2 {
  margin-top: 5rem;
}

.page-research #rd-sec5 {
  margin-top: 10rem;
}

.rd-body__lead-heading {
  font-family: var(--font-jp);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16rem;
  color: var(--blue-main);
  max-width: 99.4rem;
  margin: 9.8rem auto 3.6rem;
  text-align: left;
}

.page-research .rd-body__heading {
  font-size: 2.38rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #ccd6df;
}

.rd-body__section > p {
  font-size: 1.5rem;
  line-height: 2.7rem;
  color: #333;
  margin-bottom: 1.6rem;
}

.rd-body__section > p:last-child {
  margin-bottom: 0;
}

.rd-body__photo {
  margin-bottom: 4rem;
  border-radius: 0.8rem;
  overflow: hidden;
  height: 40rem;
}

.rd-body__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rd-body__policy-wrap {
  background: #e1e8f0;
  border-radius: 0.8rem;
  padding: 3rem 4rem;
  margin-top: 4rem;
  margin-bottom: 11.5rem;
}

.rd-body__policy {
  display: flex;
  gap: 4rem;
  align-items: stretch;
}

.rd-body__policy-img {
  flex: 0 0 28.3rem;
  position: relative;
  overflow: hidden;
}

.rd-body__policy-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rd-body__policy-list {
  flex: 1;
  min-width: 0;
  list-style: decimal;
  padding-left: 2.4rem;
  margin: 0;
}

.rd-body__policy-list li {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 1.6rem;
}

.rd-body__policy-list li::marker {
  font-weight: 700;
  /* 番号は見出し（strong）と同じ青・同じ大きさ */
  color: var(--blue-main);
  font-size: 1.6rem;
}

.rd-body__policy-list li:last-child {
  margin-bottom: 0;
}

.rd-body__policy-list li strong {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue-main);
}

.rd-body__policy-card {
  background: #fff;
  border-radius: 0.8rem;
  padding: 3.2rem 4rem;
  margin-top: 2rem;
}

.rd-body__policy-card p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #333;
  margin: 0;
}

.rd-body__policy-card .rd-body__subheading {
  margin-bottom: 1.2rem;
}

.rd-body__policy-card--with-img {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

.rd-body__policy-card-text {
  flex: 1;
  min-width: 0;
}

.rd-body__policy-card-text p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 1.6rem;
}

.rd-body__policy-card-text p:last-child {
  margin-bottom: 0;
}

.rd-body__policy-card-img {
  flex: 0 0 24rem;
  height: 32rem;
  background: #d9d9d9;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 1.4rem;
}

.rd-body__policy-wrap--with-img {
  display: flex;
  gap: 4rem;
  align-items: center;
  padding-top: 2rem;
}

.rd-body__policy-wrap-text {
  flex: 1;
  min-width: 0;
}

.rd-body__policy-wrap-text p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 1.6rem;
}

.rd-body__policy-wrap-text p:last-child {
  margin-bottom: 0;
}

.rd-body__policy-wrap-img {
  flex: 0 0 24rem;
  border-radius: 0.4rem;
  overflow: hidden;
}

.rd-body__policy-wrap-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rd-body__subsection {
  padding: 0 8rem;
  margin-top: 6rem;
  margin-bottom: 1.6rem;
}

.rd-body__subheading {
  font-family: var(--font-jp);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--blue-main);
  margin-bottom: 0.8rem;
}

.rd-body__subsection p {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 1.6rem;
}

.rd-body__subsection p:last-child {
  margin-bottom: 0;
}

.rd-body__subsection--with-img {
  display: flex;
  gap: 6rem;
  align-items: flex-start;
}

.rd-body__subsection--with-img .rd-body__subheading {
  font-size: 2.4rem;
}

.rd-body__subsection-text {
  flex: 1;
  min-width: 0;
}

.rd-body__subsection-img {
  flex: 0 0 28.3rem;
  height: 43.8rem;
  background: #d9d9d9;
  overflow: hidden;
}

.rd-body__subsection-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 研究開発ページ（新構成） SP --- */
@media (max-width: 767px) {
  .page-research .rd-body__lead {
    padding: 2rem 0;
  }

  .rd-body__lead-heading {
    font-size: 2.2rem;
  }

  .rd-body__section > p {
    font-size: 1.5rem;
  }

  .rd-body__photo {
    height: auto;
    margin-bottom: 2.5rem;
  }

  .rd-body__policy {
    flex-direction: column;
    padding: 0;
    gap: 2.5rem;
  }

  .rd-body__policy-img {
    flex: none;
    width: 70%;
    height: auto;
    margin: 0 auto;
    order: 2;
  }

  .rd-body__policy-list,
  .rd-body__policy-body {
    order: 1;
  }

  .rd-body__policy-list {
    padding-left: 2rem;
  }

  .rd-body__policy-list li {
    font-size: 1.5rem;
  }

  /* SPは方針の見出しと番号を 1px 小さく（16px → 15px）して1行に収める */
  .rd-body__policy-list li strong,
  .rd-body__policy-list li::marker {
    font-size: 1.5rem;
  }

  .rd-body__subsection {
    padding: 0;
  }

  .rd-body__subsection--with-img {
    flex-direction: column;
    gap: 2.5rem;
  }

  .rd-body__subsection--with-img .rd-body__subheading {
    font-size: 2rem;
  }

  .rd-body__subsection-img {
    flex: none;
    width: 70%;
    height: auto;
    margin: 0 auto;
  }

  .rd-body__lead-heading {
    font-size: 1.9rem;
    line-height: 1.6;
    margin: 4rem 2rem 2rem;
    max-width: none;
  }

  .page-research .rd-body__lead {
    margin: 2rem 2rem 0;
    padding: 2rem;
  }

  .page-research .rd-body__wrap {
    padding-top: 5rem;
  }

  .page-research .rd-body__heading {
    font-size: 1.8rem;
    line-height: 1.6;
  }

  .rd-body__subheading {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .page-research #rd-sec2 {
    margin-top: 3rem;
  }

  .page-research #rd-sec5 {
    margin-top: 5rem;
  }

  .rd-body__policy-wrap {
    padding: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 6rem;
  }

  .rd-body__policy-img {
    position: static;
  }

  .rd-body__policy-img img {
    position: static;
    height: auto;
  }

  .rd-body__policy-card {
    padding: 2rem;
    margin-top: 2rem;
  }

  .rd-body__policy-wrap--with-img {
    flex-direction: column;
    padding-top: 2rem;
    gap: 2rem;
  }

  .rd-body__policy-wrap-img {
    flex: none;
    width: 70%;
    margin: 0 auto;
  }
}


/* ================================================
   サイトマップページ (sitemap.html)
   ================================================ */

/* --- page-hero サイトマップ --- */
.page-hero--sitemap {
  height: 46rem;
}

.page-hero--sitemap .page-hero__bg2,
.page-hero--sitemap .page-hero__bg3,
.page-hero--sitemap .page-hero__bg4 {
  position: absolute;
  top: 0;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--sitemap .page-hero__bg2 {
  left: 35.703%;
  width: 50.814%;
}

.page-hero--sitemap .page-hero__bg3 {
  left: 0;
  width: 53.375%;
}

.page-hero--sitemap .page-hero__bg4 {
  left: 47.881%;
  width: 52.119%;
}

.page-hero--sitemap .page-hero__inner {
  padding-top: 21.7rem;
  padding-left: 12.447rem;
}

.page-hero--sitemap .page-hero__en {
  line-height: 1;
  margin-bottom: 0.518rem;
}

.page-hero--sitemap .page-hero__title {
  font-size: 4rem;
  letter-spacing: 0.1em;
}

/* --- サイトマップ パンくず --- */
@media (min-width: 768px) {
  .page-hero--sitemap .breadcrumb {
    top: 9.5113rem;
    left: 2.517rem;
  }

  .page-hero--sitemap .breadcrumb__home {
    margin-right: 0.8rem;
    top: -0.192rem;
  }
}

/* --- サイトマップ本体 --- */
.sitemap {
  padding: 6.9rem 0 11.9rem;
}

.sitemap__inner {
  display: flex;
  justify-content: space-between;
  width: 97.1rem;
  margin: 0 auto;
}

.sitemap__col {
  width: 46.96%;
}

.sitemap__col--sub {
  padding-top: 7.8rem;
}

.sitemap__block {
  border-bottom: 0.1rem solid #2064ac;
  padding: 2.348rem 0 2.352rem;
}

.sitemap__block--top-rule {
  border-top: 0.1rem solid #2064ac;
}

.sitemap__block--lead {
  padding-bottom: 2.552rem;
}

.sitemap__list {
  list-style: none;
}

.sitemap__item--parent {
  display: flex;
}

.sitemap__item--parent > .sitemap__link {
  flex: none;
  align-self: flex-start;
  width: 15.5rem;
}

.sitemap__sub {
  list-style: none;
}

.sitemap__sub .sitemap__link {
  padding-left: 1.5rem;
}

.sitemap__link,
.sitemap__current {
  position: relative;
  display: block;
  padding-left: 1.3rem;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 2.9rem;
  color: var(--ink);
  top: -0.095rem;
}

.sitemap__link--head {
  top: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #004da0;
}

.sitemap__current {
  color: #b4b4b4;
}

.sitemap__block--ext .sitemap__link {
  top: -0.035rem;
  padding-left: 1.653rem;
  font-size: 1.4rem;
  letter-spacing: 0;
}

/* 「›」はカンプの折れ線（3.27×6.53・太さ1.21）を枠線で再現 */
.sitemap__link::before,
.sitemap__current::before {
  content: "";
  position: absolute;
  left: 0.086rem;
  top: 1.345rem;
  width: 0.462rem;
  height: 0.462rem;
  border-top: 0.121rem solid currentColor;
  border-right: 0.121rem solid currentColor;
  transform: rotate(45deg);
}

.sitemap__link--head::before {
  top: 1.25rem;
}

.sitemap__block--ext .sitemap__link::before {
  top: 1.209rem;
}

.sitemap__link:hover {
  opacity: 0.7;
}

.sitemap__link .icon-ext {
  display: inline-block;
  margin-left: 0;
  vertical-align: -0.1rem;
}

.sitemap__block--ext .icon-ext {
  margin-left: 0.995rem;
}

/* --- サイトマップ SP --- */
@media (max-width: 767px) {
  .page-hero--sitemap {
    height: auto;
    padding-bottom: 8.7rem;
    overflow: visible;
  }

  .page-hero--sitemap::before {
    display: none;
  }

  .page-hero--sitemap .page-hero__bg,
  .page-hero--sitemap .page-hero__bg2,
  .page-hero--sitemap .page-hero__bg3,
  .page-hero--sitemap .page-hero__bg4 {
    display: none;
  }

  .page-hero--sitemap .page-hero__bg-sp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--sitemap .page-hero__inner {
    padding: 13.6rem 2.9rem 0;
  }

  .page-hero--sitemap .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  .page-hero--sitemap .page-hero__title {
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
  }

  .sitemap {
    padding: 4rem 2rem 6rem;
  }

  .sitemap__inner {
    flex-direction: column;
    width: 100%;
  }

  .sitemap__col {
    width: 100%;
  }

  .sitemap__col--sub {
    padding-top: 0;
  }

  .sitemap__block--top-rule {
    border-top: none;
  }

  .sitemap__item--parent {
    flex-direction: column;
  }

  .sitemap__item--parent > .sitemap__link {
    width: auto;
  }

  .sitemap__sub .sitemap__link {
    padding-left: 2.5rem;
  }

  .sitemap__link,
  .sitemap__current {
    font-size: 1.4rem;
    line-height: 2.6rem;
  }

  .sitemap__link--head {
    font-size: 1.5rem;
  }

  .sitemap__block--ext .sitemap__link {
    font-size: 1.3rem;
  }
}

/* ================================================
   お問い合わせ (contact) 固有スタイル
   ================================================ */

.ct-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
}

.ct-bg__1 {
  display: block;
  width: 100%;
  height: 100.3rem;
}

.page-hero--contact {
  height: 46rem;
}

.page-hero--contact .page-hero__bg2,
.page-hero--contact .page-hero__bg3,
.page-hero--contact .page-hero__bg4 {
  position: absolute;
  top: 0;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--contact .page-hero__bg2 {
  left: 35.7%;
  width: 50.8%;
}

.page-hero--contact .page-hero__bg3 {
  left: 0;
  width: 53.4%;
}

.page-hero--contact .page-hero__bg4 {
  left: 47.65%;
  width: 52.35%;
}

.page-hero--contact .page-hero__inner {
  padding-top: 21.773rem;
  padding-left: 12.447rem;
}

.page-hero--contact .page-hero__en {
  line-height: 1;
  margin-bottom: 0.48rem;
}

.page-hero--contact .page-hero__title {
  font-size: 4rem;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .page-hero--contact .breadcrumb {
    top: 9.6113rem;
    left: 2.517rem;
  }

  .page-hero--contact .breadcrumb__home {
    margin-right: 0.8rem;
    top: -0.192rem;
  }
}

.ct-contact {
  padding: 9.1rem 0 9.4rem;
}

.ct-contact__inner {
  width: 99.5rem;
  margin: 0 auto;
}

.ct-contact__lead {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.625;
  color: #19324c;
  text-align: center;
}

.ct-contact__link {
  color: var(--blue-alt);
  transition: opacity 0.3s;
}

.ct-contact__link:hover {
  opacity: 0.7;
}

.ct-cards {
  display: flex;
  gap: 3.5rem;
  margin-top: 5.7rem;
}

.ct-card {
  width: 48rem;
  height: 27.5rem;
  border-radius: 2rem;
  background: #fff;
}

.ct-card__head {
  height: 5.9rem;
  border-radius: 2rem 2rem 0 0;
  background: var(--blue-alt);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 5.9rem;
  text-align: center;
}

.ct-card__body {
  padding: 0 3.6rem;
}

.ct-card__text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.625;
  color: #19324c;
}

.ct-card--tel .ct-card__body {
  padding-top: 2.05rem;
}

.ct-tel__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25.8rem;
  height: 3.4rem;
  margin: 1.95rem auto 0;
  border: 1px solid var(--blue-alt);
  border-radius: 1.7rem;
  font-size: 1.5rem;
  color: var(--blue-alt);
}

.ct-tel__num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.391rem;
  margin-top: 0.983rem;
  color: var(--blue-alt);
  font-size: 3.234rem;
  font-weight: 700;
  line-height: 1;
}

.ct-tel__icon {
  position: relative;
  top: 0.285rem;
  width: 1.757rem;
  height: 2.612rem;
}

.ct-tel__note {
  margin-top: 0.884rem;
  font-size: 1.4rem;
  line-height: 1.625;
  color: #19324c;
}

.ct-card--form .ct-card__body {
  padding-top: 1.9rem;
}

.ct-form__btn {
  width: 33rem;
  margin: 4.9rem auto 0;
  /* 外部リンクなので矢印を置かない。文字と外部リンクマークをひとかたまりで中央に */
  justify-content: center;
  padding: 0.2rem 0 0;
}

.ct-form__btn .icon-ext {
  margin-left: -1.387rem;
}

/* --- お問い合わせ SP --- */
@media (max-width: 767px) {
  .ct-bg {
    display: none;
  }

  .page-hero--contact {
    height: auto;
    padding-bottom: 8.7rem;
    overflow: visible;
  }

  .page-hero--contact::before {
    display: none;
  }

  .page-hero--contact .page-hero__bg,
  .page-hero--contact .page-hero__bg2,
  .page-hero--contact .page-hero__bg3,
  .page-hero--contact .page-hero__bg4 {
    display: none;
  }

  .page-hero--contact .page-hero__bg-sp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--contact .page-hero__inner {
    padding: 13.6rem 2.9rem 0;
  }

  .page-hero--contact .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  .page-hero--contact .page-hero__title {
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
  }

  .ct-contact {
    padding: 7rem 2rem 6rem;
    background: linear-gradient(to bottom, rgba(214, 238, 248, 0) 0%, rgba(214, 238, 248, 0.56) 50%, rgba(214, 238, 248, 0.82) 100%);
  }

  .ct-contact__inner {
    width: 100%;
  }

  .ct-contact__lead {
    font-size: 1.4rem;
    text-align: left;
  }

  .ct-cards {
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 3rem;
  }

  .ct-card {
    width: 100%;
    height: auto;
  }

  .ct-card__head {
    font-size: 1.6rem;
    height: 4.8rem;
    line-height: 4.8rem;
    border-radius: 1.5rem 1.5rem 0 0;
  }

  .ct-card__body {
    padding: 0 2rem;
  }

  .ct-card__text {
    font-size: 1.4rem;
  }

  .ct-card--tel .ct-card__body {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  .ct-tel__label {
    font-size: 1.3rem;
    width: 100%;
    max-width: 25rem;
  }

  .ct-tel__num {
    font-size: 2.6rem;
  }

  .ct-tel__note {
    font-size: 1.2rem;
    text-align: center;
  }

  .ct-card--form .ct-card__body {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  .ct-card--form .ct-card__text br {
    display: none;
  }

  .ct-form__btn {
    width: 100%;
    max-width: 30rem;
    margin-top: 3rem;
    font-size: 1.328rem;
    letter-spacing: 0.053rem;
  }

  .ct-form__btn .btn__label {
    position: relative;
    top: -0.1rem;
  }
}

.page-hero--news {
  height: 46rem;
}

.page-hero--news .page-hero__bg2,
.page-hero--news .page-hero__bg3,
.page-hero--news .page-hero__bg4 {
  position: absolute;
  top: 0;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--news .page-hero__bg2 {
  left: 35.703%;
  width: 50.814%;
}

.page-hero--news .page-hero__bg3 {
  left: 0;
  width: 53.375%;
}

.page-hero--news .page-hero__bg4 {
  left: 47.653%;
  width: 52.347%;
}

.page-hero--news .page-hero__inner {
  padding-left: 12.447rem;
}

.page-hero--news .page-hero__en {
  line-height: 1;
  margin-bottom: 0.48rem;
}

.page-hero--news .page-hero__title {
  font-size: 4rem;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .page-hero--news .breadcrumb {
    top: 9.5113rem;
    left: 2.517rem;
  }

  .page-hero--news .breadcrumb__home {
    margin-right: 0.8rem;
    top: -0.192rem;
  }
}

/* お知らせ一覧 */

.news-list {
  width: 99.4rem;
  margin: 0 auto;
  padding: 8.752rem 0 12rem;
}

.news-lead {
  padding-left: 0.9rem;
  letter-spacing: 0.03em;
  color: #333;
}

.news-tabs {
  display: flex;
  align-items: center;
  height: 6.8rem;
  margin-top: 12.088rem;
  border-radius: 2rem;
  background: #f0f3ff;
}

.news-tabs__item {
  position: relative;
  z-index: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.4rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #999;
}

.news-tabs__item.is-current {
  color: #3371b3;
}

/* 選択中の白い面。項目の幅より狭いので疑似要素で敷く */
.news-tabs__item.is-current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 22.4rem;
  height: 4.8rem;
  margin: auto;
  border-radius: 1rem;
  background: #fff;
}

.news-tabs__sep {
  flex: 0 0 auto;
  width: 0.112rem;
  height: 3.358rem;
  border-radius: 0.056rem;
  background: #d9d9d9;
}

.news-items {
  margin-top: 5.871rem;
}

/* 一覧の下の罫線は、表示中の最後のお知らせに付ける（一覧の高さを固定しているため） */
.news-item.is-last {
  border-bottom: 0.1rem solid #d9d9d9;
}

.news-item {
  display: flex;
  align-items: center;
  height: 9.9rem;
  padding: 0 2.5rem;
  border-top: 0.1rem solid #d9d9d9;
  transition: background-color 0.3s;
}

.news-item:hover {
  background-color: #eef4f9;
}

.news-item__date {
  flex: 0 0 auto;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  color: #666;
  margin-right: 4rem;
}

.news-item__cat {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11rem;
  height: 2.465rem;
  border-radius: 1.233rem;
  font-size: 1.19rem;
  color: #666;
}

.news-item__cat--product {
  background: #d7f1fa;
}

.news-item__cat--company {
  background: #CEDEF2;
}

.news-item__cat--release {
  background: #E4EFE4;
}

.news-item__cat--other {
  background: #f4f1fe;
}

.news-item__title {
  flex: 1;
  margin-left: 4.8rem;
  font-size: 1.6rem;
}

.news-item__pdf {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  margin-left: 2rem;
}

.news-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-top: 5.729rem;
}

.news-pager__item,
.news-pager__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 3.9rem;
  border: 0.1rem solid #d9d9d9;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  color: #737373;
}

.news-pager__item.is-current {
  border-color: transparent;
  background: var(--blue-alt);
  color: #fff;
}

/* --- お知らせ SP --- */
@media (max-width: 767px) {
  .page-hero--news {
    height: auto;
    padding-bottom: 10.4rem;
    overflow: visible;
  }

  .page-hero--news::before {
    display: none;
  }

  .page-hero--news .page-hero__bg,
  .page-hero--news .page-hero__bg2,
  .page-hero--news .page-hero__bg3,
  .page-hero--news .page-hero__bg4 {
    display: none;
  }

  .page-hero--news .page-hero__bg-sp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--news .page-hero__inner {
    padding: 13.6rem 2.9rem 0;
  }

  .page-hero--news .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  .page-hero--news .page-hero__title {
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
  }

  /* ニュース一覧 SP */
  .news-list {
    width: 100%;
    padding: 5rem 2rem 6rem;
  }

  .news-lead {
    padding-left: 0;
    font-size: 1.3rem;
    line-height: 1.8;
  }

  .news-lead br {
    display: none;
  }

  .news-tabs {
    height: 4.4rem;
    margin-top: 3rem;
    border-radius: 1rem;
  }

  .news-tabs__item {
    height: 3.2rem;
    font-size: 1.2rem;
  }

  .news-tabs__item.is-current::before {
    width: auto;
    left: 0.8rem;
    right: 0.8rem;
    height: 3.2rem;
    border-radius: 0.6rem;
  }

  .news-tabs__sep {
    height: 2rem;
  }

  .news-items {
    margin-top: 3rem;
  }

  .news-item {
    position: relative;
    flex-wrap: wrap;
    align-content: flex-start;
    height: auto;
    padding: 3.3rem 1rem;
  }

  .news-item__date {
    width: auto;
    font-size: 1.4rem;
    margin-right: 2.5rem;
  }

  .news-item__cat {
    width: 11rem;
    height: 2.465rem;
    padding: 0;
    font-size: 1.19rem;
    border-radius: 1.233rem;
  }

  .news-item__title {
    width: 100%;
    flex: none;
    margin-left: 0;
    margin-top: 1.7rem;
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .news-item__pdf {
    position: absolute;
    right: 1rem;
    top: 3.8rem;
    width: 2.16rem;
    height: 2.16rem;
    margin-left: 0;
  }

  .news-pager {
    gap: 0.8rem;
    margin-top: 4rem;
  }

  .news-pager__item,
  .news-pager__ellipsis {
    width: 3.6rem;
    height: 3.5rem;
    font-size: 1.3rem;
  }
}

/* ===== おくすりコラム 背景の装飾 ===== */

.col-bg {
  position: relative;
  height: 0;
}
.col-bg__item {
  position: absolute;
  z-index: -1;
  max-width: none;
  height: auto;
  pointer-events: none;
}
/* 装飾は 1440px 設計。width を % のままにすると height:auto で縦にも伸び、
   top が rem 固定のコンテンツから下へずれていく（1920px で顕著）。
   全画面幅で 1440px 時の実寸を保つため、サイズを rem で固定する。
   ・パネル／白背景は全幅に伸ばしたいので width は % のまま、高さだけ固定
   ・左端／右端に付く装飾は left / right を rem 固定で端に追従
   ・コラム2枚の背後にあるブロブは、中央揃えの本文に合わせて 50% 基準 */
.col-bg__item--panel {
  top: 136.1rem;
  left: 0;
  width: 100.139%;
  height: 141.8002rem;
}
.col-bg__item--white {
  top: 57.8rem;
  left: 0;
  width: 100%;
  height: 100rem;
}
.col-bg__item--circle {
  top: 183.885rem;
  left: 1.2845rem;
  width: 1.5307rem;
  height: 1.5307rem;
}
.col-bg__item--dot-l {
  top: 172.526rem;
  left: 16.8955rem;
  width: 4.2998rem;
  height: 2.8999rem;
}
.col-bg__item--blur-l {
  top: 163.015rem;
  left: -7.0603rem;
  width: 25.4707rem;
  height: 21.3766rem;
}
.col-bg__item--blur-r {
  top: 219.018rem;
  right: -7.6522rem;
  width: 44.545rem;
  height: 35.793rem;
}
.col-bg__item--dot-r {
  top: 219.623rem;
  right: 16.7616rem;
  width: 8.7034rem;
  height: 5.2742rem;
}
.col-bg__item--col-r {
  top: 86.057rem;
  left: calc(50% - 1.5005rem);
  width: 62.3002rem;
  height: 40.0828rem;
}
.col-bg__item--col-l1 {
  top: 90.560rem;
  left: calc(50% - 59.6995rem);
  width: 40.1947rem;
  height: 32.2888rem;
}
.col-bg__item--col-l2 {
  top: 87.422rem;
  left: calc(50% - 44.6774rem);
  width: 42.8774rem;
  height: 29.9881rem;
}
.col-bg__item--col-l3 {
  top: 98.822rem;
  left: calc(50% - 49.6138rem);
  width: 46.633rem;
  height: 27.2692rem;
}

/* ===== おくすりコラム ファーストビュー ===== */

@media (min-width: 768px) {
  .page-hero--column .page-hero__bg2,
  .page-hero--column .page-hero__bg3,
  .page-hero--column .page-hero__bg4 {
    position: absolute;
    top: 0;
    height: auto;
    max-width: none;
    z-index: 0;
    pointer-events: none;
  }
  .page-hero--column .page-hero__bg2 {
    left: 35.217%;
    width: 50.814%;
  }
  .page-hero--column .page-hero__bg3 {
    left: -19.549%;
    width: 72.438%;
  }
  .page-hero--column .page-hero__bg4 {
    left: 47.135%;
    width: 82.271%;
  }
  .page-hero--column .page-hero__inner {
    /* 商品情報ページと同じ位置にそろえる（もとは 22.874rem で11.7px下がっていた） */
    padding-top: 21.7rem;
    padding-left: 11.7rem;
  }
  .page-hero--column .page-hero__text {
    max-width: none;
  }
  /* 英字と日本語のあきを商品情報ページにそろえる。
     ここだけ行送り1・マイナスマージンで詰まっていて、あきが -5px になっていた */
  .page-hero--column .page-hero__en {
    line-height: inherit;
    margin-bottom: 0.8rem;
  }
  .page-hero--column .page-hero__title {
    letter-spacing: 0.12em;
    /* 下のリード文の位置も商品情報ページにそろえる */
    margin-bottom: 3.5rem;
  }
  .page-hero--column .page-hero__lead {
    line-height: 2.125;
    color: #000;
  }
  .page-hero--column .page-hero__visual {
    left: 48.750%;
    top: 13.32rem;
    width: 45.492%;
    max-width: 65.509rem;
    height: 41.78rem;
  }
  .page-hero--column .page-hero__blob,
  .page-hero--column .page-hero__blob2,
  .page-hero--column .page-hero__photo {
    position: absolute;
    max-width: none;
    height: auto;
  }
  .page-hero--column .page-hero__blob {
    top: 0;
    left: 0;
    width: 95.935%;
  }
  .page-hero--column .page-hero__blob2 {
    top: 2.38rem;
    left: 5.648%;
    width: 94.352%;
  }
  .page-hero--column .page-hero__photo {
    top: 3.98rem;
    left: 8.732%;
    width: 87.805%;
    margin-top: 0;
  }
  .page-hero--column .breadcrumb {
    /* パンくずも商品情報ページと同じ高さに（もとは 9.9113rem） */
    top: 9.4rem;
    left: 2.517rem;
  }
  .page-hero--column .breadcrumb__home {
    margin-right: 0.8rem;
    top: -0.192rem;
  }
}

/* おくすりコラム FV SP */
@media (max-width: 767px) {
  .page-hero--column {
    padding-bottom: 2rem;
  }
  .page-hero--column::before {
    background: url(../img/col-fv-sp-wave.svg) top center / 100% 100% no-repeat;
    top: -6.1rem;
    height: 67.6rem;
    bottom: auto;
    transform: scaleY(-1);
  }
  .page-hero--column::after {
    content: '';
    position: absolute;
    top: -19.8rem;
    left: 36.2%;
    width: 125.4%;
    height: 26.068rem;
    background: url(../img/col-fv-sp-blob.svg) center / contain no-repeat;
    transform: rotate(-11.24deg);
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
  }
  .page-hero--column .page-hero__bg2,
  .page-hero--column .page-hero__bg3,
  .page-hero--column .page-hero__bg4 {
    display: none;
  }
  .page-hero--column .page-hero__inner {
    padding: 11.6rem 3rem 0 3rem;
  }
  .page-hero--column .page-hero__title {
    letter-spacing: 0;
  }
  .page-hero--column .page-hero__visual {
    position: relative;
    left: -3rem;
    top: auto;
    width: calc(100% + 6rem);
    max-width: none;
    height: auto;
    margin-top: 1.5rem;
  }
  .page-hero--column .page-hero__blob {
    display: none;
  }
  .page-hero--column .page-hero__photo {
    position: relative;
    left: 0;
    top: auto;
    margin-top: 0;
    width: 74.54%;
    z-index: 1;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .page-hero--column .page-hero__visual::before {
    content: '';
    position: absolute;
    left: 3.2%;
    top: -0.5rem;
    width: 92.8%;
    height: 100%;
    background: url(../img/col-fv-sp-ellipse.svg) center / contain no-repeat;
    z-index: 0;
    pointer-events: none;
  }
}

/* ===== おすすめのコラム ===== */

.col-featured {
  position: relative;
  z-index: 1;
  padding-top: 3.35rem;
}
.col-featured__head {
  text-align: center;
}
.col-featured__en {
  font-family: "Urbanist", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--blue-main);
  margin-bottom: 1.973rem;
}
.col-featured__title {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--blue-main);
}
.col-featured__row {
  display: flex;
  justify-content: center;
  gap: 22.4rem;
  margin-top: 48.277rem;
}
.col-featured__item {
  position: relative;
  width: 40.5rem;
}
.col-featured__img {
  position: absolute;
}
.col-featured__img img {
  display: block;
  width: 100%;
  height: auto;
}
.col-featured__item:first-child .col-featured__img {
  top: -39.38rem;
  left: -12.741%;
  width: 127.037%;
  opacity: 0.8;
}
.col-featured__item:last-child .col-featured__img {
  top: -38.01rem;
  left: -17.778%;
  width: 139.284%;
}
.col-featured__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 9rem;
  padding: 0 2.21rem 0 2.13rem;
  border: 1px solid var(--blue-main);
  border-radius: 1rem;
  background: #fff;
  transition: background 0.3s, color 0.3s;
}
.col-featured__btn:hover {
  background: var(--blue-main);
}
.col-featured__btn:hover .col-featured__btn-label {
  color: #fff;
}
.col-featured__btn:hover .col-featured__btn-arrow {
  background: #fff;
  border-color: #fff;
}
.col-featured__btn:hover .col-featured__btn-arrow svg {
  fill: var(--blue-main);
}
.col-featured__btn-label {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.47368;
  letter-spacing: 0.05em;
  color: var(--blue-main);
}
.col-featured__btn-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.68rem;
  height: 3.583rem;
  border: 1px solid var(--blue-main);
  border-radius: 50%;
  background: #fff;
  transition: background 0.3s, border-color 0.3s;
}
.col-featured__btn-arrow svg {
  width: 1.4rem;
  height: auto;
  fill: var(--blue-main);
}

/* ===== こちらもあわせて ===== */

.col-more {
  position: relative;
  z-index: 1;
  padding-top: 29.65rem;
  padding-bottom: 16.6rem;
}
.col-more__head {
  text-align: center;
}
.col-more__en {
  font-family: "Urbanist", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--blue-main);
  margin-bottom: 2.003rem;
}
.col-more__title {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--blue-main);
}
.col-more__row {
  display: flex;
  gap: 4.6rem;
  width: 100.6rem;
  margin: 9.747rem auto 0;
}
.col-more__card {
  width: 47.714%;
  height: 56.5rem;
  border-radius: 2rem;
  background: #fff;
  overflow: hidden;
  transition: opacity 0.3s;
}
.col-more__img {
  height: 28.235rem;
  overflow: hidden;
}
.col-more__img img {
  display: block;
  width: 100%;
  height: auto;
}
.col-more__body {
  margin-top: -0.208rem;
  padding: 0 9.375%;
}
.col-more__card--message .col-more__img {
  height: auto;
  padding-top: 10.385rem;
}
.col-more__card--message .col-more__img img {
  width: 54.650%;
  margin: 0 auto;
}
.col-more__card--message .col-more__body {
  margin-top: 9.132rem;
}
.col-more__name {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--blue-alt);
  margin-bottom: 2.445rem;
}
.col-more__desc {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8125;
  letter-spacing: 0;
  color: #0B0308;
}
.col-more__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 22rem;
  height: 5.1rem;
  margin-top: 2.428rem;
  padding: 0 1.042rem 0 2.8rem;
  border: 1px solid var(--blue-main);
  border-radius: 0.5rem;
  background: #fff;
  transition: background 0.3s;
}
.col-more__btn:hover {
  background: var(--blue-main);
}
.col-more__btn:hover .col-more__btn-label {
  color: #fff;
}
.col-more__btn:hover .col-more__btn-arrow {
  fill: #fff;
}
.col-more__btn-label {
  font-size: 1.47071rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue-main);
}
.col-more__btn-arrow {
  flex: 0 0 auto;
  width: 1.709rem;
  height: auto;
  fill: var(--blue-main);
}

/* おすすめのコラム SP */
@media (max-width: 767px) {
  .col-bg {
    display: none;
  }
  /* PC版の楕円配置をそのまま縮小（画像ボックス基準の相対比率） */
  .col-featured__img::before,
  .col-featured__img::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
  }
  .col-featured__item:first-child .col-featured__img::before {
    left: -5.52%;
    top: 10.21%;
    width: 78.13%;
    height: 92.65%;
    background-image: url(../img/col-bg-col-l1.svg);
    background-size: 100% 100%;
  }
  .col-featured__item:first-child .col-featured__img::after {
    left: 14.085%;
    top: 1.211%;
    width: 92.932%;
    height: 110.959%;
    background-image: url(../img/col-bg-col-l2.svg), url(../img/col-bg-col-l3.svg);
    background-size: 89.68% 77.55%, 97.53% 70.52%;
    background-position: 100% 0%, 0% 100%;
  }
  .col-featured__item:last-child .col-featured__img::before {
    left: -9.75%;
    top: calc(-6% + 15px);
    width: 110.44%;
    height: 103.95%;
    background-image: url(../img/col-bg-col-r.svg);
    background-size: 100% 100%;
  }
  .col-featured__img img {
    position: relative;
    z-index: 1;
  }
  .col-featured__btn {
    position: relative;
    z-index: 1;
  }
  .col-featured {
    padding-top: 8.4rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .col-featured__en {
    font-family: var(--font-jp);
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
    line-height: 1.8;
    margin-bottom: 0;
  }
  .col-featured__title {
    font-size: 3rem;
    letter-spacing: 0;
    line-height: 1.8;
  }
  .col-featured__row {
    flex-direction: column;
    gap: 3rem;
    margin-top: 3rem;
  }
  .col-featured__item {
    width: 100%;
  }
  .col-featured__img {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 1rem;
  }
  .col-featured__item:first-child .col-featured__img {
    top: auto;
    left: 7.37%;
    width: 84%;
    opacity: 0.8;
  }
  .col-featured__item:last-child .col-featured__img {
    top: auto;
    left: 11.8%;
    width: 84%;
    opacity: 1;
    margin-bottom: 0;
  }
  .col-featured__btn {
    height: auto;
    padding: 1.5rem 1.5rem;
  }
  .col-featured__btn-label {
    font-size: 1.5rem;
  }
  .col-featured__btn-arrow {
    width: 3rem;
    height: 3rem;
  }
  .col-featured__btn-arrow svg {
    width: 1.2rem;
  }

  /* こちらもあわせて SP */
  .col-more {
    padding-top: 24rem;
    padding-bottom: 6rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  /* PC版の水色パネル＋白い波形をSPに縮小して再現 */
  .col-more::before {
    content: '';
    position: absolute;
    top: 9rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, #C6EBF6 0%, #C6EBF6 45%, rgba(198, 235, 246, 0) 100%);
    z-index: -2;
    pointer-events: none;
  }
  .col-more::after {
    content: '';
    position: absolute;
    top: 9rem;
    left: 0;
    width: 100%;
    height: 15.6vw;
    background: url(../img/col-bg-white.svg) bottom center / 100% auto no-repeat;
    z-index: -1;
    pointer-events: none;
  }
  .col-more__en {
    font-family: var(--font-jp);
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
    line-height: 1.8;
    margin-bottom: 0;
  }
  .col-more__title {
    font-size: 3rem;
    letter-spacing: 0;
    line-height: 1.8;
  }
  .col-more__row {
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    margin-top: 3rem;
  }
  .col-more__card {
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
  }
  .col-more__img {
    height: auto;
  }
  .col-more__card--message .col-more__img {
    padding-top: 4rem;
  }
  .col-more__card--message .col-more__img img {
    width: 50%;
  }
  .col-more__card--message .col-more__body {
    margin-top: 3rem;
  }
  .col-more__body {
    padding: 2rem 5%;
  }
  .col-more__name {
    font-size: 1.8rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }
  .col-more__desc {
    font-size: 1.4rem;
    line-height: 1.75;
  }
  .col-more__btn {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .col-more__btn-label {
    font-size: 1.4rem;
  }
}

/* 会社案内へ */

.msg-back {
  margin-top: 6.4rem;
}

.msg-back__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 22%;
  height: 5.2rem;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 1.022rem;
  border: 1px solid var(--blue-main);
  border-radius: 0.45rem;
  transition: opacity 0.3s;
}

.msg-back__btn:hover {
  opacity: 0.7;
}

.msg-back__arrow {
  width: 1.738rem;
  margin-right: 0;
}

/* 文字は「ボタンの左端から矢印まで」の中でセンターに置く */
.msg-back__label {
  flex: 1 1 auto;
  text-align: center;
  font-size: 1.4707rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--blue-main);
}

/* 会社案内-本社 */

.page-hero--company-access {
  height: 46rem;
}

.page-hero--company-access .page-hero__bg2,
.page-hero--company-access .page-hero__bg3,
.page-hero--company-access .page-hero__bg4 {
  position: absolute;
  top: 0;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--company-access .page-hero__bg2 {
  left: 47.65%;
  width: 52.35%;
}

.page-hero--company-access .page-hero__bg3 {
  left: 35.7%;
  width: 50.8%;
}

.page-hero--company-access .page-hero__bg4 {
  left: 0;
  width: 53.4%;
}

/* 「東京営業本部へのアクセス」は12文字で、共通の51remだと2行に折り返す */
.page-hero--company-access .page-hero__text {
  max-width: 60rem;
}

.page-hero--company-access .page-hero__inner {
  padding-top: 21.85rem;
  padding-left: 12.447rem;
}

.page-hero--company-access .page-hero__en {
  line-height: 1;
  margin-bottom: 0.33rem;
}

.page-hero--company-access .page-hero__title {
  font-size: 4rem;
  letter-spacing: 0.1em;
}

.page-hero--company-access .breadcrumb {
  top: 9.6113rem;
  left: 2.517rem;
}

.page-hero--company-access .breadcrumb__home {
  margin-right: 0.8rem;
  top: -0.192rem;
}

/* 本文の器 */

.ca {
  width: 100rem;
  margin: 0 auto;
  padding: 10.2rem 0 20.7rem;
  color: #000;
  text-spacing-trim: space-all;
}

/* 本社外観・地図 */

.ca-photo img {
  display: block;
  width: 100%;
  object-fit: fill;
}

.ca-photo img {
  height: 50.1rem;
}

.ca-map {
  margin-top: 4.1rem;
}

.ca-map iframe {
  display: block;
  width: 100%;
  height: 50.3018rem;
  border: 0;
}

/* 所在地 */

.ca-address {
  margin-top: 10.4rem;
  font-size: 1.5rem;
  line-height: 1.8;
}

.ca-address__title {
  font-size: 1.5rem;
  font-weight: 700;
}

.ca-address__title::before {
  content: "■";
  font-weight: 400;
  color: #3d8dc1;
}

/* アクセス */

.ca-access {
  display: flex;
  align-items: center;
  width: 99.8%;
  height: 13.2rem;
  margin: 3.8rem auto 0;
  border: 1px solid var(--blue-main);
  border-radius: 1rem;
}

.ca-access__title {
  position: relative;
  flex-shrink: 0;
  width: 14.056%;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.ca-access__title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 7.4rem;
  background: var(--blue-main);
  translate: 0 -50%;
}

.ca-access__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 2.7rem);
  grid-template-columns: 36.6rem auto;
  padding-left: 3.6rem;
  font-size: 1.5rem;
  line-height: 1.8;
}

/* 東京営業本部は経路が4件。2段2列にして、長い1件だけ2行に折り返す */
.page-tokyo .ca-access__list {
  grid-template-rows: repeat(2, auto);
  grid-template-columns: 40.53rem auto; /* 列のあきを本社と同じ46.3pxにそろえた値 */
  align-content: center;
}

@media (min-width: 768px) {
  .page-tokyo .ca-access__item::before {
    width: 1.0rem;
  }
  .page-tokyo .ca-access__item {
    padding-left: 1.0rem;
    text-indent: -1.0rem;
  }
}

.ca-access__item::before {
  content: "●";
  display: inline-block;
  width: 1.835rem;
  color: var(--blue-main);
}

/* 会社案内へ */

.ca .msg-back {
  margin-top: 11.5rem;
}

.ca .msg-back__btn {
  width: 22%;
  justify-content: space-between;
  padding-left: 0;
  padding-right: 1.022rem;
}

.ca .msg-back__arrow {
  margin-right: 0;
}

/* ===== 会社案内-本社 SP ===== */

@media (max-width: 767px) {

  /* FV */

  .page-hero--company-access {
    height: 28.56rem;
    padding-bottom: 4.8rem;
    overflow: visible;
  }

  .page-hero--company-access::before {
    display: none;
  }

  .page-hero--company-access .page-hero__bg,
  .page-hero--company-access .page-hero__bg2,
  .page-hero--company-access .page-hero__bg3,
  .page-hero--company-access .page-hero__bg4 {
    display: none;
  }

  .page-hero--company-access .page-hero__bg-sp--wave {
    position: absolute;
    left: 0;
    bottom: -2rem;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--company-access .page-hero__bg-sp--blob {
    position: absolute;
    left: 13.5rem;
    top: -10.6rem;
    width: 51.5rem;
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-11.24deg);
  }

  .page-hero--company-access .breadcrumb {
    top: 7rem;
    left: 1.4rem;
  }

  .page-hero--company-access .page-hero__inner {
    padding: 14.6rem 2.9rem 0;
  }

  .page-hero--company-access .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  .page-hero--company-access .page-hero__title {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  /* 本文の器 */

  .ca {
    width: 100%;
    padding: 10.3rem 2rem 8rem;
  }

  /* 本社外観・地図 */

  .ca-photo img {
    height: auto;
  }

  .ca-map {
    margin-top: 2.5rem;
  }

  .ca-map iframe {
    height: 25rem;
  }

  /* 所在地 */

  .ca-address {
    margin-top: 4rem;
    font-size: 1.4rem;
  }

  .ca-address__title {
    font-size: 1.4rem;
  }

  /* アクセス */

  .ca-access {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 3rem;
    padding: 2rem;
  }

  .ca-access__title {
    width: 100%;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 1.4rem;
    text-align: left;
    border-bottom: 1px solid var(--blue-main);
  }

  .ca-access__title::after {
    display: none;
  }

  .ca-access__list {
    display: block;
    /* ●は text-indent で左にぶら下がるので、そのぶん一覧を右に寄せて
       枠の内側の余白（20px）を●の位置で保つ */
    padding-left: 1.4rem;
    font-size: 1.4rem;
  }

  .ca-access__item {
    padding-left: 1.4rem;
    text-indent: -1.4rem;
  }

  /* 会社案内へ */

  .ca .msg-back {
    margin-top: 5rem;
  }

  .ca .msg-back__btn {
    width: 100%;
    max-width: 28rem;
    height: 4.8rem;
    padding-left: 3rem;
    padding-right: 1.5rem;
  }

  .ca .msg-back__label {
    font-size: 1.4rem;
  }
}

/* ===== オムニードシリーズ ファーストビュー ===== */
.page-hero--omneed-series {
  height: 46rem;
}

.page-hero--omneed-series .page-hero__bg2 {
  position: absolute;
  left: 47.65%;
  width: 52.35%;
  z-index: 0;
  pointer-events: none;
}

.page-hero--omneed-series .page-hero__bg3 {
  position: absolute;
  left: 35.7%;
  width: 50.8%;
  z-index: 0;
  pointer-events: none;
}

.page-hero--omneed-series .page-hero__bg4 {
  position: absolute;
  width: 53.4%;
  z-index: 0;
  pointer-events: none;
}

.page-hero--omneed-series .page-hero__inner {
  padding-top: 20.9097rem;
  padding-left: 12.4465rem;
}

.page-hero--omneed-series .breadcrumb {
  top: 9.849rem;
  left: 2.517rem;
}

.page-hero--omneed-series .breadcrumb__home {
  margin-right: 0.8rem;
  top: -0.192rem;
}

.page-hero--omneed-series .page-hero__en {
  margin-bottom: 0.6021rem;
}

.page-hero--omneed-series .page-hero__title {
  font-size: 4rem;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 0;
}

/* ===== オムニードシリーズ 商品一覧 ===== */
.os-list {
  position: relative;
  padding: 9.8486rem 0 12.9984rem;
}

.os-list__bg {
  position: absolute;
  top: 9.8rem;
  width: 100%;
  /* 商品点数でセクションの高さが変わるため、帯も追従させる。
     オムニード（7点）では従来の 147.5rem と同値になる */
  height: calc(100% - 9.8rem);
  z-index: 0;
  pointer-events: none;
}

.os-list__dots {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.os-list__dots--1 {
  left: 86.4583%;
  top: 18.5rem;
  width: 8.75%;
}

.os-list__dots--2 {
  left: 1.9444%;
  top: 37.5rem;
  width: 9.5139%;
}

/* 下側の装飾は商品点数でセクションの高さが変わっても位置関係を保つよう、
   上端ではなく下端を基準にする。値はオムニード（7点）の実測値そのまま */
.os-list__dots--3 {
  left: 74.1667%;
  bottom: 26.6531rem;
  width: 7.9861%;
}

/* お買い求めボックスの左上を飾るため、意図的にセクション外へ出している */
.os-list__dots--4 {
  left: 2.9861%;
  bottom: -26.7359rem;
  width: 11.3889%;
  z-index: -1;
}

.os-list__circle {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.os-list__circle--1 {
  left: 47.6215%;
  top: 40.5rem;
  width: 3.6rem;
  height: 3.6rem;
  background: #d6eef8;
  filter: blur(1px);
}

.os-list__circle--2 {
  left: 51.1285%;
  top: 45.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.1rem solid #71a6d4;
}

/* ロキトラッドはカードが1枚でこの丸の上に重なり、ホバーの半透明で透けて見えるため消す */
.page-rocitorad .os-list__circle--2 {
  display: none;
}

.os-list__circle--3 {
  left: 85.6944%;
  bottom: 50.0969rem;
  width: 3rem;
  height: 3rem;
  background: rgba(113, 166, 212, 0.5);
  filter: blur(1px);
}

.os-list__circle--4 {
  left: 83.8194%;
  bottom: 38.6969rem;
  width: 1.2rem;
  height: 1.2rem;
  background: rgba(113, 166, 212, 0.5);
  filter: blur(0.4px);
}

.os-list__circle--5 {
  left: 70.1389%;
  bottom: 16.6969rem;
  width: 5rem;
  height: 5rem;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(1px);
}

.os-list__circle--6 {
  left: 7.4306%;
  bottom: 18.3969rem;
  width: 3.6rem;
  height: 3.6rem;
  background: rgba(113, 166, 212, 0.95);
  filter: blur(1px);
}

.os-list__blob {
  position: absolute;
  left: 74.6579%;
  bottom: 5.9875rem;
  width: 30.3783%;
  height: 34.9929rem;
  background: url("../img/omneed-series-blob.svg") no-repeat center / 100% 100%;
  filter: blur(1px);
  z-index: 0;
  pointer-events: none;
}

.os-list__lead {
  position: relative;
  z-index: 1;
  width: 98.9666rem;
  margin: 0 auto 3.9514rem;
  font-weight: 500;
  line-height: 2.9rem;
  letter-spacing: 0.15px;
  color: #333;
}

.os-list__note {
  display: block;
  margin-top: 1rem;
  font-size: 1.45rem;
  line-height: 2.2rem;
}

/* ヒューマンベースだけ、1行目「傷をやさしく守る」のあとで折らずに続ける。
   改行文字はそのまま残るので、構成案と同じように1字ぶんあいたまま次の文につながる。
   SPは .os-list__lead br をまとめて消してあるので、ここの指定は効いても見た目は変わらない */
.page-human-base .os-list__lead br:first-of-type {
  display: none;
}

.os-list__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 31.3rem);
  gap: 2.5rem 2.5334rem;
  width: 98.9666rem;
  margin: 0 auto;
}

.os-card {
  position: relative;
  height: 35.2rem;
  padding: 3.95rem 2.575rem 0;
  background: #fff;
  border-radius: 1.2rem;
  text-decoration: none;
}

.os-card__img {
  position: relative;
  width: 19rem;
  height: 19rem;
  margin: 0 auto;
  overflow: hidden;
}

.os-card__img img {
  position: absolute;
  max-width: none;
}

/* 各商品の写真は原本のまま置き、枠内の大きさと位置だけを指定する */
.os-card:nth-child(-n+3) .os-card__img img {
  left: -0.1188rem;
  top: 2.0883rem;
  width: 19.1187rem;
  height: 14.8234rem;
}

.os-card:nth-child(4) .os-card__img img {
  left: -0.1188rem;
  top: 2.0883rem;
  width: 19.5148rem;
  height: 15.1305rem;
}

.os-card:nth-child(5) .os-card__img img {
  left: 0.4064rem;
  width: 18.1872rem;
  height: 19rem;
}

.os-card:nth-child(6) .os-card__img {
  margin-top: -1.45rem;
}

.os-card:nth-child(6) .os-card__img img {
  left: 1.7051rem;
  width: 15.5897rem;
  height: 19rem;
}

.os-card:nth-child(7) .os-card__img {
  margin-top: -1.5rem;
}

.os-card:nth-child(7) .os-card__name {
  margin-top: 1.9108rem;
}

.os-card:nth-child(7) .os-card__img img {
  left: 0.7551rem;
  width: 17.4897rem;
  height: 19rem;
}

.os-card__name {
  display: flex;
  align-items: center;
  height: 6rem;
  margin-top: 0.4108rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: 0.1em;
  color: var(--blue-alt);
}

/* 商品名は下揃え。1行の2件だけ1行分ぶん下げる */
.os-card:nth-child(3) .os-card__name,
.os-card:nth-child(5) .os-card__name {
  padding-top: 0;
}

.os-card:nth-child(6) .os-card__name {
  margin-top: 1.8608rem;
}

/* 遷移ボタン（.os-card__arrow）と同じ中心位置に置く */
.os-card__extlink {
  position: absolute;
  left: 26.5928rem;
  top: 25.6178rem;
  width: 1.617rem;
  height: 1.617rem;
}

.os-card__meta {
  display: flex;
  align-items: center;
  gap: 0.959rem;
  margin-top: 0.7409rem;
}

.os-card__class {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10.041rem;
  padding: 0 0.6rem;
  height: 2.541rem;
  background: #fff;
  border: 0.1rem solid #000;
  color: #000;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.os-card__spec {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #000;
}

.os-card__arrow {
  position: absolute;
  left: 25.8543rem;
  top: 24.8793rem;
  width: 3.094rem;
  height: 3.094rem;
}

.os-card:nth-child(2) .os-card__arrow {
  left: 25.1209rem;
}

.os-card__arrow svg {
  width: 100%;
  height: 100%;
}

.os-card__arrow .od-arrow-bg,
.os-card__arrow .od-arrow-icon {
  stroke-width: 1.099;
}

.os-list__btn-wrap {
  position: relative;
  z-index: 1;
  margin-top: 6.0016rem;
  text-align: center;
}

.os-list__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30.3rem;
  height: 5.2rem;
  /* 矢印は絶対配置なので中央ぞろえの計算に入らず、文字が枠の真ん中＝やや右に見えていた。
     矢印の占める幅ぶんを右にあけて、左端から矢印の手前までのあいだで中央に見せる */
  padding-right: 3.4rem;
  border: 0.1rem solid var(--blue-main);
  border-radius: 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #3371b3;
  text-decoration: none;
  background: #fff;
  transition: background 0.3s, color 0.3s;
}

.os-list__btn:hover {
  background: var(--blue-main);
  color: #fff;
}

.os-list__btn .icon-arrow {
  position: absolute;
  right: 1.45rem;
  top: 1.82rem;
  width: 1.845rem;
  height: 1.435rem;
}

/* ===== オムニードシリーズ SP ===== */

@media (max-width: 767px) {

  /* 商品一覧 */

  .os-list {
    padding: 6.5rem 0 8rem;
  }

  .os-list__bg {
    top: 0;
    height: 100%;
  }

  .os-list__dots,
  .os-list__circle,
  .os-list__blob {
    display: none;
  }

  .os-list__lead {
    width: 100%;
    margin: 0 auto 3rem;
    padding: 0 2rem;
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .os-list__lead br {
    display: none;
  }

  .os-list__note {
    margin-top: 0.8rem;
    font-size: 1.45rem;
    line-height: 1.7;
  }

  .os-list__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
    padding: 0 2rem;
  }

  /* 商品カード */

  .os-card {
    height: auto;
    padding: 3rem 2rem 2.5rem;
  }

  .os-card__img {
    width: 15rem;
    height: 15rem;
  }

  .os-card:nth-child(-n+3) .os-card__img img,
  .os-card:nth-child(4) .os-card__img img,
  .os-card:nth-child(5) .os-card__img img,
  .os-card:nth-child(6) .os-card__img img,
  .os-card:nth-child(7) .os-card__img img {
    left: 50%;
    top: 50%;
    width: auto;
    height: 100%;
    transform: translate(-50%, -50%);
  }

  .os-card:nth-child(6) .os-card__img,
  .os-card:nth-child(7) .os-card__img {
    margin-top: 0;
  }

  .os-card__name {
    height: 5.4rem;
    margin-top: 1.1rem;
    padding-right: 3rem;
    font-size: 1.8rem;
    line-height: 2.7rem;
  }

  /* 1行に収まる商品名は改行を解除。収まらない4・6番目は元の改行位置を維持 */
  .os-card__name br {
    display: none;
  }

  .os-card:nth-child(4) .os-card__name br,
  .os-card:nth-child(6) .os-card__name br,
  .os-card:has(img[src*="harix55-fixing-sheet"]) .os-card__name br {
    display: inline;
  }

  .os-card:nth-child(5) .os-card__name,
  .os-card:nth-child(6) .os-card__name,
  .os-card:nth-child(7) .os-card__name {
    margin-top: 1.2rem;
    padding-top: 0;
  }

  /* 遷移ボタン・外部リンクボタン（商品名の右・上下センター） */

  .os-card__arrow,
  .os-card:nth-child(2) .os-card__arrow {
    left: auto;
    right: 2rem;
    top: 20.6rem;
    width: 2.6rem;
    height: 2.6rem;
  }

  .os-card__extlink {
    left: auto;
    right: 2.575rem;
    top: 21.175rem;
    width: 1.45rem;
    height: 1.45rem;
  }

  .os-card__meta {
    gap: 0.8rem;
    margin-top: 1.1rem;
  }

  .os-card__class {
    min-width: 9rem;
    height: 2.3rem;
    font-size: 1.2rem;
  }

  .os-card__spec {
    font-size: 1.3rem;
  }

  /* 商品情報一覧へ */

  .os-list__btn-wrap {
    margin-top: 4rem;
    padding: 0 2rem;
  }

  .os-list__btn {
    width: 100%;
    max-width: 30.3rem;
    font-size: 1.6rem;
    /* 文字を矢印の手前で中央に寄せるのはPC版だけの指示なので、SPは元のまま */
    padding-right: 0;
  }



  /* FV */

  .page-hero--omneed-series {
    height: 28.56rem;
    padding-bottom: 4.8rem;
    overflow: visible;
    z-index: 1;
  }

  .page-hero--omneed-series::before {
    display: none;
  }

  .page-hero--omneed-series .page-hero__bg,
  .page-hero--omneed-series .page-hero__bg2,
  .page-hero--omneed-series .page-hero__bg3,
  .page-hero--omneed-series .page-hero__bg4 {
    display: none;
  }

  .page-hero--omneed-series .page-hero__bg-sp--wave {
    position: absolute;
    left: 0;
    bottom: -2rem;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--omneed-series .page-hero__bg-sp--blob {
    position: absolute;
    left: 13.5rem;
    top: -10.6rem;
    width: 51.5rem;
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-11.24deg);
  }

  .page-hero--omneed-series .breadcrumb {
    top: 7rem;
    left: 1.4rem;
  }

  .page-hero--omneed-series .page-hero__inner {
    padding: 14.6rem 2.9rem 0;
  }

  .page-hero--omneed-series .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  .page-hero--omneed-series .page-hero__title {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }
}

/* みなさまへ */

.page-hero--message {
  height: 46rem;
}

.page-hero--message .page-hero__bg,
.page-hero--message .page-hero__bg2,
.page-hero--message .page-hero__bg3,
.page-hero--message .page-hero__bg4,
.page-hero--message .page-hero__bg5,
.page-hero--message .page-hero__bg6 {
  position: absolute;
  height: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}

/* このページだけ土台の背景を height:auto で上書きしているため、
   画面幅を広げると SVG が縦に伸び、.page-hero の overflow:hidden（高さ46rem）で
   波の下半分が真横に切られる。1440px 時の実寸で高さを固定して切れを防ぐ。 */
.page-hero--message .page-hero__bg {
  top: -0.9rem;
  left: -11.111%;
  width: 111.25%;
  height: 46.9rem;
}

.page-hero--message .page-hero__bg2,
.page-hero--message .page-hero__bg3 {
  top: -0.3rem;
  left: -1.875%;
  width: 102.014%;
  height: 44.8rem;
}

.page-hero--message .page-hero__bg4 {
  top: -27.357rem;
  left: 33.690%;
  width: 50.815%;
}

.page-hero--message .page-hero__bg5 {
  top: -20.458rem;
  left: -21.077%;
  width: 72.438%;
}

.page-hero--message .page-hero__bg6 {
  top: -12.129rem;
  left: 45.639%;
  width: 82.271%;
}

.page-hero--message .page-hero__inner {
  padding: 18.624rem 0 0 9.546rem;
}

.page-hero--message .page-hero__text {
  max-width: none;
}

.page-hero--message .page-hero__en {
  line-height: 1;
  margin-bottom: 0.912rem;
}

.page-hero--message .page-hero__title {
  font-size: 4rem;
  letter-spacing: 0.1em;
  line-height: 1.45;
  color: var(--blue-main);
}

.page-hero--message .breadcrumb {
  top: 9.5113rem;
  left: 2.517rem;
}

.page-hero--message .breadcrumb__home {
  margin-right: 0.8rem;
  top: -0.192rem;
}

/* 本文の器 */

.msg {
  width: 99rem;
  text-spacing-trim: space-all;
  margin: 0 auto;
  padding: 9.2rem 0 17.7rem;
  color: #19324c;
}

.msg-visual img {
  width: 100%;
  border-radius: 0.5rem;
}

/* 導入の囲み */

.msg-lead {
  margin-top: 4rem;
  background: #e1e8f0;
  border-radius: 0.8rem;
  padding: 6.2424rem 7.5rem 6.3576rem 6.7rem;
}

.msg-lead__p {
  font-size: 1.5rem;
  line-height: 1.8;
}

.msg-lead__p + .msg-lead__p {
  margin-top: 2.9rem;
}

/* ものづくり */

.msg-craft {
  margin-top: 15.2rem;
}

.msg-craft__row,
.msg-craft__row2 {
  display: flex;
  align-items: flex-start;
}

.msg-craft__text {
  width: 41.818%;
  margin-top: 0.1992rem;
}

.msg-craft__title {
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--blue-main);
}

.msg-craft__p {
  text-align: justify;
  margin-top: 3.2432rem;
  font-size: 1.5rem;
  line-height: 1.8;
}

.msg-craft__photo {
  width: 52.525%;
  margin-left: 5.657%;
}

.msg-craft__p2 {
  text-align: justify;
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 1.8;
}

.msg-craft__p2 + .msg-craft__p2 {
  margin-top: 2.9rem;
}

.msg-craft__row2 {
  margin-top: 4rem;
}

.msg-craft__photo2 {
  width: 59.495%;
  margin-top: 0.058rem;
  border-radius: 0.8rem;
}

.msg-craft__p3 {
  text-align: justify;
  width: 35.455%;
  margin-left: 5.050%;
  font-size: 1.5rem;
  line-height: 1.8;
}

/* 貼るをもっとやさしく */

.msg-brand {
  margin-top: 8.0992rem;
}

.msg-brand__title {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--blue-main);
}

.msg-brand__p {
  margin-top: 2.9rem;
  font-size: 1.5rem;
  line-height: 1.8;
}

.msg-brand__title + .msg-brand__p {
  margin-top: 3.2432rem;
}

.msg-brand__row {
  display: flex;
  align-items: flex-start;
  margin-top: 3.9rem;
}

.msg-brand__text {
  width: 47.475%;
  flex: 0 0 auto;
}

.msg-brand__p2 {
  text-align: justify;
  font-size: 1.5rem;
  line-height: 1.8;
}

.msg-brand__p2 + .msg-brand__p2 {
  margin-top: 4.3rem;
}

.msg-brand__photo {
  width: 55.859%;
  flex: 0 0 auto;
  margin: 2.9576rem 0 0 5.758%;
}

.msg-brand__sign {
  margin-top: 0.5424rem;
  text-align: right;
}

.msg-brand__signer {
  line-height: 1.8125;
}

.msg-brand__signature {
  width: 15.354%;
  margin-left: auto;
  margin-top: 1.6576rem;
}

/* ===== みなさまへ SP ===== */
@media (max-width: 767px) {

  /* FV */

  .page-hero--message {
    height: 28.5562rem;
    padding-bottom: 2.6762rem;
    overflow: visible;
    z-index: 1;
  }

  .page-hero--message::before {
    display: none;
  }

  .page-hero--message .page-hero__bg,
  .page-hero--message .page-hero__bg2,
  .page-hero--message .page-hero__bg3,
  .page-hero--message .page-hero__bg4,
  .page-hero--message .page-hero__bg5,
  .page-hero--message .page-hero__bg6 {
    display: none;
  }

  .page-hero--message .page-hero__bg-sp--wave {
    display: block;
    position: absolute;
    left: -0.2rem;
    bottom: -2rem;
    width: calc(100% + 0.4rem);
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--message .page-hero__bg-sp--blob {
    display: block;
    position: absolute;
    left: 13.5rem;
    top: -10.6rem;
    width: 51.5rem;
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-11.24deg);
  }

  .page-hero--message .breadcrumb {
    top: 7rem;
    left: 1.4rem;
  }

  .page-hero--message .breadcrumb__home {
    margin-right: 0.5rem;
    top: -0.1rem;
  }

  .page-hero--message .page-hero__inner {
    padding: 11.27rem 2.9rem 0;
  }

  .page-hero--message .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  /* おくすりコラムの記事ページ（.page-hero--col-article）と同じ */
  .page-hero--message .page-hero__title {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  /* 本文の器 */

  .msg {
    width: auto;
    padding: 7.2rem 2rem 8rem;
  }

  .msg-visual img {
    border-radius: 0.5rem;
  }

  /* 導入の囲み */

  .msg-lead {
    margin-top: 3rem;
    padding: 2.5rem 2rem;
  }

  .msg-lead__p {
    font-size: 1.5rem;
    line-height: 1.8;
    text-align: justify;
  }

  .msg-lead__p + .msg-lead__p {
    margin-top: 2rem;
  }

  /* ものづくり */

  .msg-craft {
    margin-top: 6rem;
  }

  .msg-craft__row,
  .msg-craft__row2 {
    flex-direction: column;
  }

  .msg-craft__text {
    width: auto;
    margin-top: 0;
  }

  .msg-craft__title {
    font-size: 2.3rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }

  .msg-craft__p {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-top: 2rem;
  }

  .msg-craft__photo {
    width: 100%;
    margin-left: 0;
    margin-top: 2.5rem;
    border-radius: 0.5rem;
  }

  .msg-craft__p2 {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-top: 2rem;
  }

  .msg-craft__p2 + .msg-craft__p2 {
    margin-top: 2rem;
  }

  .msg-craft__row2 {
    margin-top: 2.5rem;
  }

  .msg-craft__photo2 {
    width: 100%;
    margin-top: 0;
    border-radius: 0.5rem;
  }

  .msg-craft__p3 {
    width: auto;
    margin-left: 0;
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 1.8;
  }

  /* 貼るをもっとやさしく */

  .msg-brand {
    margin-top: 6rem;
  }

  .msg-brand__title {
    font-size: 2.3rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }

  .msg-brand__p {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-top: 2rem;
    text-align: justify;
  }

  .msg-brand__title + .msg-brand__p {
    margin-top: 2rem;
  }

  .msg-brand__row {
    flex-direction: column;
    margin-top: 2.5rem;
  }

  .msg-brand__text {
    width: auto;
  }

  .msg-brand__p2 {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .msg-brand__p2 + .msg-brand__p2 {
    margin-top: 2.5rem;
  }

  .msg-brand__photo {
    width: 97.2%;
    max-width: none;
    margin: 1.5rem 0 0 0.4rem;
  }

  .msg-brand__sign {
    margin-top: 2rem;
  }

  .msg-brand__signer {
    font-size: 1.6rem;
    line-height: 1.8125;
  }

  .msg-brand__signature {
    width: 30%;
    margin-top: 1rem;
  }

  /* 会社案内へ */

  .msg-back {
    margin-top: 4rem;
  }

  .msg-back__btn {
    width: 100%;
    max-width: 28rem;
    height: 4.8rem;
    padding-left: 3rem;
    padding-right: 1.5rem;
  }

  .msg-back__label {
    font-size: 1.4rem;
  }
}

/* 商品詳細-傷パッド */

.page-hero--human-base {
  height: 46rem;
}
.page-hero--human-base .page-hero__bg2 {
  position: absolute;
  left: 47.65%;
  width: 52.35%;
  z-index: 0;
  pointer-events: none;
}

.page-hero--human-base .page-hero__bg3 {
  position: absolute;
  left: 35.7%;
  width: 50.8%;
  z-index: 0;
  pointer-events: none;
}

.page-hero--human-base .page-hero__bg4 {
  position: absolute;
  width: 53.4%;
  z-index: 0;
  pointer-events: none;
}
.page-hero--human-base .page-hero__inner {
  padding-left: 12.447rem;
}
.page-hero--human-base .page-hero__text {
  max-width: none;
}
.page-hero--human-base .page-hero__en {
  line-height: 1;
  margin-bottom: 0.818rem;
}
.page-hero--human-base .page-hero__title {
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.page-hero--human-base .breadcrumb {
  top: 9.5613rem;
  left: 2.517rem;
}
.page-hero--human-base .breadcrumb__home {
  margin-right: 0.8rem;
  top: -0.192rem;
}

/* 背景の装飾 */

.hb-bg {
  position: relative;
  height: 0;
}
.hb-bg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 231.84rem;
  left: 0;
  width: 100%;
  height: 261.3rem;
  opacity: 0.85;
  background: linear-gradient(180deg, #fff 0%, #E1FEFF 100%);
}
.hb-bg__item {
  position: absolute;
  z-index: -1;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.hb-bg__item--blob-white {
  top: 245.7rem;
  left: 76.33%;
  width: 46.07%;
}
.hb-bg__item--wave-lower {
  top: 410.6rem;
  left: -2.292%;
  width: 114%;
}
.hb-bg__item--lower {
  top: 419.9rem;
  left: -0.069%;
  width: 100.1%;
}
.hb-bg__item--mid {
  top: 101.4rem;
  left: -0.625%;
  width: 100%;
}
.hb-bg__item--wave-left {
  top: 195.8rem;
  left: -4.59%;
  width: 50.96%;
}
.hb-bg__item--ellipse {
  top: 306.6rem;
  left: 70.67%;
  width: 35.86%;
}
.hb-bg__item--dots-r2 {
  top: 199.1rem;
  left: 87.01%;
  width: 22.22%;
}
.hb-bg__item--dots-r1 {
  top: 86.8rem;
  left: 88.82%;
  width: 20.83%;
}
.hb-bg__item--dots-l1 {
  top: 201.4rem;
  left: 2.986%;
  width: 22.22%;
}
.hb-bg__item--circles {
  top: 91.5rem;
  left: 1.667%;
  width: 8.819%;
}
.hb-bg__item--blob-r {
  top: 124.59rem;
  left: 88.08%;
  width: 10.43%;
}

/* 商品ビジュアル */

.hb-visual {
  position: relative;
  z-index: 1;
  padding-top: 8.4rem;
}
.hb-visual__inner {
  width: 99.5rem;
  margin: 0 auto;
}
.hb-visual__inner img {
  display: block;
  width: 100%;
  aspect-ratio: 995 / 359;
  border-radius: 1rem;
}

/* 商品の特徴 */

.hb-feature {
  position: relative;
}
.hb-feature__card {
  position: relative;
  z-index: 1;
  width: 99rem;
  margin: 33.3rem auto 0;
  padding-bottom: 6.6rem;
  border-radius: 2rem;
  background: #fff;
  box-shadow: 0 0.6rem 1rem rgba(0, 0, 0, 0.15);
}
.hb-feature__head {
  padding-top: 4.93rem;
  text-align: center;
}
.hb-feature__title {
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: #1E72BC;
}
.hb-feature__head::after {
  content: "";
  display: block;
  width: 3.952rem;
  height: 0.3rem;
  margin: 2.6rem auto 0;
  background: #4B8EC9;
}

.hb-feature__row {
  display: flex;
  align-items: flex-start;
}
.hb-feature__fig img {
  display: block;
  width: 100%;
}
.hb-feature__subtitle {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5834;
  letter-spacing: 0.102rem;
  color: #1E72BC;
}
.hb-feature__desc {
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
}
.hb-feature__note {
  font-size: 1.4rem;
  color: #000;
}

/* 特徴1 独立セル構造 */

.hb-feature__row--cell {
  padding: 5.73rem 0 0 7rem;
  gap: 3.9rem;
}
.hb-feature__row--cell .hb-feature__fig {
  width: 37.8rem;
  aspect-ratio: 378 / 276;
  flex: 0 0 auto;
}
.hb-feature__row--cell .hb-feature__subtitle {
  width: 34.5rem;
}
.hb-feature__row--cell .hb-feature__body {
  width: 42rem;
  padding-top: 2.07rem;
}
.hb-feature__row--cell .hb-feature__desc {
  margin-top: 2.63rem;
}
.hb-feature__row--cell .hb-feature__note {
  margin-top: 2.23rem;
}

/* 特徴2 くっつきにくい */

.hb-feature__row--peel {
  justify-content: space-between;
  padding: 6.75rem 7.08rem 0 5.53rem;
}
.hb-feature__row--peel .hb-feature__fig {
  width: 47.1rem;
  aspect-ratio: 471 / 270;
  flex: 0 0 auto;
}
.hb-feature__row--peel .hb-feature__subtitle {
  width: 34rem;
}
.hb-feature__row--peel .hb-feature__body {
  width: 31.5rem;
  padding-top: 0.05rem;
}
.hb-feature__row--peel .hb-feature__desc {
  width: 34rem;
  letter-spacing: 0.03em;
  margin-top: 2.34rem;
  line-height: 1.92;
}

/* 特徴3 優れた吸収力 */

.hb-feature__row--absorb {
  padding: 6.81rem 0 0 5.53rem;
  gap: 2.99rem;
}
.hb-feature__row--absorb .hb-feature__fig {
  width: 49.7rem;
  aspect-ratio: 497 / 254;
  flex: 0 0 auto;
}
.hb-feature__row--absorb .hb-feature__body {
  width: 40rem;
  padding-top: 0.05rem;
}
.hb-feature__row--absorb .hb-feature__desc {
  width: 33rem;
  margin-top: 2.25rem;
}

/* 特徴4 さまざまなキズ口にフィット */

.hb-feature__fit {
  width: 87.54rem;
  margin: 6.61rem auto 0;
  padding: 3rem 0 2.98rem;
  border-radius: 2rem;
  background: #D8F8F3;
}
.hb-feature__fit-title {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.102rem;
  color: #1E72BC;
  text-align: center;
}
.hb-feature__fit-body {
  display: flex;
  margin-top: 2.39rem;
  padding-left: 3rem;
  gap: 2.97rem;
}
.hb-feature__fit-photos {
  position: relative;
  display: flex;
  gap: 0.125rem;
  flex: 0 0 auto;
}
.hb-feature__fit-photos img {
  display: block;
  width: 17.79rem;
}
.hb-feature__fit-photos img:nth-child(3) {
  width: 17.67rem;
  height: 20.12rem;
  object-fit: cover;
}
.hb-feature__fit-badge {
  position: absolute;
  top: -4rem;
  left: -1.7rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: #1565A0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
}
.hb-feature__fit-text .hb-feature__desc {
  width: 25rem;
  letter-spacing: 0.037em;
  font-weight: 400;
  line-height: 1.5334;
  color: #000;
}

/* 医療用傷パッドの使い方 */

.hb-usage {
  position: relative;
  z-index: 1;
}
.hb-usage__panel {
  width: 99rem;
  margin: 9.4rem auto 0;
  padding-bottom: 5.9rem;
  border-radius: 2rem;
  background: linear-gradient(180deg, #5BC2EC 0%, #2FA9E0 100%);
}
.hb-usage__title {
  padding-right: 2.55rem;
  padding-top: 7.64rem;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.25rem;
  color: #fff;
  text-align: center;
}
.hb-usage__title-em {
  color: #FFF130;
}

.hb-usage__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-left: 5.8rem;
}
.hb-usage__step + .hb-usage__step::before {
  content: "";
  position: absolute;
  top: -1.06rem;
  left: 5.8rem;
  width: 88.5rem;
  height: 0.1rem;
  background: #fff;
}
.hb-usage__step-text {
  width: 33rem;
  flex: 0 0 auto;
}
.hb-usage__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14.04rem;
  height: 4.14rem;
  border-radius: 2.07rem;
  background: #1E72BC;
  font-size: 2.43rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.0918rem;
  color: #fff;
}
.hb-usage__desc {
  margin-top: 1.55rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2;
  color: #fff;
}
.hb-usage__step-figs {
  display: flex;
  align-items: flex-start;
}
.hb-usage__step-figs img {
  display: block;
}

.hb-usage__step--1 {
  padding-top: 4.02rem;
  padding-bottom: 5.31rem;
}
.hb-usage__step--1 .hb-usage__step-figs {
  padding-left: 3.35rem;
  margin-top: 0.6rem;
}
.hb-usage__step--1 .hb-usage__step-figs img:nth-child(1) { width: 18.08rem; aspect-ratio: 180.8 / 170.9; }
.hb-usage__step--1 .hb-usage__step-figs img:nth-child(2) { width: 16.61rem; aspect-ratio: 166.1 / 168.1; margin-left: 0.09rem; margin-top: 0.37rem; }
.hb-usage__step--1 .hb-usage__step-figs img:nth-child(3) { width: 18.32rem; aspect-ratio: 183.2 / 170.5; margin-left: -0.65rem; margin-top: -0.11rem; }

.hb-usage__step--2 .hb-usage__desc {
  letter-spacing: -0.14rem;
}
.hb-usage__step--2 {
  padding-top: 3.24rem;
  padding-bottom: 4.43rem;
}
.hb-usage__step--2 .hb-usage__step-figs {
  padding-left: 2.41rem;
  margin-top: 0.22rem;
}
.hb-usage__step--2 .hb-usage__step-figs img:nth-child(1) { width: 18.79rem; aspect-ratio: 187.9 / 179.0; }
.hb-usage__step--2 .hb-usage__step-figs img:nth-child(2) { width: 17.54rem; aspect-ratio: 175.4 / 181.1; margin-top: -0.1rem; }
.hb-usage__step--2 .hb-usage__step-figs img:nth-child(3) { width: 17.89rem; aspect-ratio: 178.9 / 175.6; margin-top: 0.17rem; }

.hb-usage__step--3 {
  padding-top: 3.24rem;
}
.hb-usage__step--3 .hb-usage__step-figs {
  padding-left: 2.57rem;
  margin-top: 0.4rem;
}
.hb-usage__step--3 .hb-usage__step-figs img:nth-child(1) { width: 18.61rem; aspect-ratio: 186.1 / 177.2; }
.hb-usage__step--3 .hb-usage__step-figs img:nth-child(2) { width: 17.15rem; aspect-ratio: 171.5 / 173.6; margin-left: 0.12rem; margin-top: 0.18rem; }
.hb-usage__step--3 .hb-usage__step-figs img:nth-child(3) { width: 18.34rem; aspect-ratio: 183.4 / 170.7; margin-left: 0.13rem; margin-top: 0.33rem; }

.hb-usage__note {
  width: 52.9rem;
  letter-spacing: 0.0625rem;
  margin: -1.33rem 0 0 41.4rem;
  font-size: 1.4rem;
  line-height: 1.5715;
  color: #fff;
}

.hb-usage__cut {
  display: flex;
  align-items: flex-start;
  height: 21.3rem;
  width: 88.5rem;
  margin: 4.04rem auto 0;
  padding-left: 5.4rem;
  border-radius: 2rem;
  background: #D7F1FA;
}
.hb-usage__cut-fig {
  width: 22.1rem;
  margin-top: 1.7rem;
  aspect-ratio: 221 / 199.1;
  flex: 0 0 auto;
}
.hb-usage__cut-fig img {
  display: block;
  width: 100%;
}
.hb-usage__cut-body {
  padding: 3.98rem 0 2.5rem 7.6rem;
}
.hb-usage__cut-title {
  width: 39rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5789;
  letter-spacing: 0.102rem;
  color: #1E72BC;
}
.hb-usage__cut-desc {
  width: 47rem;
  margin-top: 1.32rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5334;
  color: #000;
}

/* そのほかの商品 */

.hb-other {
  position: relative;
  z-index: 1;
  padding-bottom: 1.2rem;
  padding-top: 28.95rem;
}
.hb-other__head {
  text-align: center;
}
.hb-other__en {
  font-weight: 700;
  line-height: 1;
  color: #1565A0;
}
.hb-other__title {
  line-height: 1.2429;
  margin-top: 1.33rem;
  font-size: 3.5rem;
  font-weight: 700;
  color: #1565A0;
}
.hb-other__card {
  display: flex;
  align-items: stretch;
  width: 88.8rem;
  height: 18rem;
  margin: 4.73rem auto 0;
  border-radius: 2rem;
  background: #fff;
}
.hb-other__product {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-top: 3.76rem;
  width: 48.2rem;
  flex: 0 0 auto;
  padding-left: 3.2rem;
  text-decoration: none;
}
.hb-other__product-img {
  margin-top: 0.5rem;
  width: 8.97rem;
  aspect-ratio: 89.7 / 97.5;
  flex: 0 0 auto;
}
.hb-other__product-body {
  padding-left: 2.43rem;
}
.hb-other__product-name {
  position: relative;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.36;
  color: #1E72BC;
}
.hb-other__ext {
  position: absolute;
  left: 26.8rem;
  top: 50%;
  width: 1.617rem;
  height: 1.617rem;
  transform: translateY(-50%);
}
.hb-other__product-meta {
  display: flex;
  align-items: center;
  margin-top: 0.88rem;
  gap: 1.03rem;
}
.hb-other__product-class {
  padding: 0.35rem 0.8rem;
  border: 0.1rem solid #000;
  font-size: 1.4rem;
  line-height: 1.25;
  color: #000;
}
.hb-other__product-count {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #000;
}

.hb-other__detail {
  padding: 2.1rem 0 0 3.39rem;
  border-left: 0.1rem solid #BFD9EA;
}
.hb-other__tags {
  display: flex;
  justify-content: space-between;
  width: 19.62rem;
}
.hb-other__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.98rem;
  padding: 0 1rem;
  border-radius: 0.99rem;
  font-size: 1.32rem;
  font-weight: 700;
  color: #000;
}
.hb-other__tag--alert {
  width: 9.53rem;
  padding: 0;
  background: #E63679;
  color: #fff;
}
.hb-other__size {
  display: flex;
  margin-top: 0.7rem;
  gap: 0.3rem;
}
.hb-other__size-item {
  width: 25.25rem;
  padding: 0.7rem 0 0 1rem;
  letter-spacing: -0.02em;
  background: #E2E9EE;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}
.hb-other__size-count {
  height: 5.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.4rem;
  background: #EDF1F4;
  font-weight: 700;
  color: #000;
}
.hb-other__number {
  margin-top: 1.08rem;
  font-size: 1.19rem;
  line-height: 1;
  color: #000;
}
.hb-other__detail .hb-other__tags:last-child {
  width: 34.25rem;
  margin-top: 0.9rem;
}
.hb-other__detail .hb-other__tags:last-child .hb-other__tag:first-child {
  width: 17rem;
}
.hb-other__detail .hb-other__tags:last-child .hb-other__tag {
  height: 2.52rem;
  border: 0.1rem solid #000;
  border-radius: 1.26rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.hb-other + .purchase {
  margin-bottom: 14.31rem;
}

/* ===== ヒューマンベース SP ===== */
@media (max-width: 767px) {

  /* FV */

  .page-hero--human-base {
    height: 28.56rem;
    padding-bottom: 4.8rem;
    overflow: visible;
    z-index: 1;
  }

  .page-hero--human-base::before {
    display: none;
  }

  .page-hero--human-base .page-hero__bg,
  .page-hero--human-base .page-hero__bg2,
  .page-hero--human-base .page-hero__bg3,
  .page-hero--human-base .page-hero__bg4 {
    display: none;
  }

  .page-hero--human-base .page-hero__bg-sp--wave {
    display: block;
    position: absolute;
    left: 0;
    bottom: -2rem;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--human-base .page-hero__bg-sp--blob {
    display: block;
    position: absolute;
    left: 13.5rem;
    top: -10.6rem;
    width: 51.5rem;
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-11.24deg);
  }

  .page-hero--human-base .breadcrumb {
    top: 7rem;
    left: 1.4rem;
  }

  .page-hero--human-base .breadcrumb__home {
    margin-right: 0.5rem;
    top: -0.1rem;
  }

  .page-hero--human-base .page-hero__inner {
    padding: 12.94rem 2.9rem 0;
  }

  .page-hero--human-base .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  .page-hero--human-base .page-hero__title {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  /* 背景の装飾はSPでは隠す */

  .hb-bg__item {
    display: none;
  }

  /* PC版と同じ下部グラデーション。SPのレイアウトに合わせて位置を振り直す。
     下端は波と「そのほかの商品」の不透明な背景に隠れるので境目が線にならない */

  .hb-bg::before {
    top: 302.8rem;
    height: 145rem;
  }

  /* 商品の特徴セクションが乗る波（columnページの col-more と同じ作り） */

  .hb-feature {
    padding-top: 11.5rem;
  }

  .hb-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90rem;
    background: linear-gradient(to bottom, #C6EBF6 0%, #C6EBF6 45%, rgba(198, 235, 246, 0) 100%);
    z-index: -2;
    pointer-events: none;
  }

  .hb-feature::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15.6vw;
    background: url(../img/col-bg-white.svg) bottom center / 100% auto no-repeat;
    z-index: -1;
    pointer-events: none;
  }

  /* 商品ビジュアル */

  .hb-visual {
    padding: 7.5rem 2rem 3rem;
  }

  .hb-visual__inner {
    width: 100%;
    margin: 0;
  }

  .hb-visual__inner img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
  }

  /* 商品の特徴 */

  .hb-feature__card {
    width: auto;
    margin: 0 2rem;
    padding: 3rem 2rem;
    border-radius: 1.5rem;
  }

  .hb-feature__head {
    width: auto;
  }

  .hb-feature__title {
    font-size: 2.2rem;
  }

  .hb-feature__row,
  .hb-feature__row--cell,
  .hb-feature__row--peel,
  .hb-feature__row--absorb {
    display: block;
    width: auto;
    margin-bottom: 5.25rem;
    padding: 0;
  }

  .hb-feature__row--cell {
    padding-top: 2.23rem;
  }

  .hb-feature__row--cell .hb-feature__fig,
  .hb-feature__row--peel .hb-feature__fig,
  .hb-feature__row--absorb .hb-feature__fig {
    width: 100%;
    margin: 2rem 0 0;
  }

  .hb-feature__fig img {
    width: 100%;
    height: auto;
  }

  .hb-feature__row--cell .hb-feature__fig img {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
  }

  .hb-feature__row--cell .hb-feature__body,
  .hb-feature__row--peel .hb-feature__body,
  .hb-feature__row--absorb .hb-feature__body {
    width: auto;
    margin: 0;
  }

  .hb-feature__row--cell .hb-feature__body {
    padding-top: 1.07rem;
  }

  /* SPは本文を上、グラフを下に入れ替える */

  .hb-feature__row--absorb {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .hb-feature__row--absorb .hb-feature__body {
    order: 1;
    margin-top: 0;
  }

  .hb-feature__row--absorb .hb-feature__fig {
    order: 2;
  }

  .hb-feature__row--peel .hb-feature__fig {
    margin-top: 2rem;
  }

  .hb-feature__subtitle,
  .hb-feature__row--cell .hb-feature__subtitle,
  .hb-feature__row--peel .hb-feature__subtitle {
    width: auto;
    font-size: 1.7rem;
    line-height: 1.6;
  }

  .hb-feature__desc,
  .hb-feature__row--cell .hb-feature__desc,
  .hb-feature__row--peel .hb-feature__desc,
  .hb-feature__row--absorb .hb-feature__desc {
    width: auto;
    margin-top: 1.35rem;
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: justify;
  }

  .hb-feature__note,
  .hb-feature__row--cell .hb-feature__note {
    width: auto;
    margin-top: 1rem;
    font-size: 1.2rem;
  }

  .hb-feature__fit {
    width: auto;
    margin: 0;
    padding: 2rem 1.95rem;
  }

  .hb-feature__fit-title {
    font-size: 1.7rem;
    line-height: 1.6;
  }

  .hb-feature__fit-body {
    display: block;
    padding-left: 0;
  }

  .hb-feature__fit-photos {
    width: 100%;
    margin: 2rem 0 0;
  }

  .hb-feature__fit-photos img,
  .hb-feature__fit-photos img:nth-child(3) {
    width: calc((100% - 0.25rem) / 3);
    height: auto;
  }

  .hb-feature__fit-text {
    width: auto;
    margin: 2rem 0 0;
  }

  .hb-feature__fit-text .hb-feature__desc {
    width: auto;
  }

  /* 使い方 */

  .hb-usage__panel {
    width: auto;
    margin: 8rem 2rem 0;
    padding: 3rem 2rem;
    border-radius: 1.5rem;
  }

  .hb-usage__title {
    padding: 3rem 0 0;
    font-size: 2.2rem;
    line-height: 1.5;
  }

  .hb-usage__step,
  .hb-usage__step--1,
  .hb-usage__step--2,
  .hb-usage__step--3 {
    display: block;
    width: auto;
    margin-bottom: 6rem;
    padding: 0;
  }

  .hb-usage__step--1 {
    padding-top: 4rem;
  }

  .hb-usage__step--3 {
    margin-bottom: 3.5rem;
  }

  .hb-usage__step-text {
    width: auto;
    margin: 0;
  }

  /* PC版の形（140.4×41.4 / font24.3 / 角丸20.7）を比率のまま82.5%に */

  .hb-usage__label {
    width: 11.583rem;
    height: 3.4155rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1.70775rem;
    font-size: 2rem;
  }

  .hb-usage__desc,
  .hb-usage__step--2 .hb-usage__desc {
    width: auto;
    margin-top: 1.7rem;
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: justify;
  }

  .hb-usage__step-figs,
  .hb-usage__step--1 .hb-usage__step-figs,
  .hb-usage__step--2 .hb-usage__step-figs,
  .hb-usage__step--3 .hb-usage__step-figs {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin: 1.5rem 0 0;
    padding: 0;
  }

  .hb-usage__step-figs img,
  .hb-usage__step--1 .hb-usage__step-figs img:nth-child(1),
  .hb-usage__step--1 .hb-usage__step-figs img:nth-child(2),
  .hb-usage__step--1 .hb-usage__step-figs img:nth-child(3),
  .hb-usage__step--2 .hb-usage__step-figs img:nth-child(1),
  .hb-usage__step--2 .hb-usage__step-figs img:nth-child(2),
  .hb-usage__step--2 .hb-usage__step-figs img:nth-child(3),
  .hb-usage__step--3 .hb-usage__step-figs img:nth-child(1),
  .hb-usage__step--3 .hb-usage__step-figs img:nth-child(2),
  .hb-usage__step--3 .hb-usage__step-figs img:nth-child(3) {
    position: static;
    width: calc((100% - 2rem) / 3);
    height: auto;
    margin: 0;
  }

  .hb-usage__step + .hb-usage__step::before {
    display: none;
  }

  .hb-usage__note {
    width: auto;
    margin: 1.5rem 0 0;
    font-size: 1.35rem;
    line-height: 1.8;
  }

  .hb-usage__cut {
    display: block;
    width: auto;
    height: auto;
    margin: 3.75rem 0 0;
    padding: 0.5rem 1.95rem 2rem;
  }

  .hb-usage__cut-fig {
    width: 100%;
    margin: 0;
  }

  .hb-usage__cut-fig img {
    width: 110%;
    max-width: none;
    height: auto;
    margin-left: -5%;
  }

  .hb-usage__cut-body {
    width: auto;
    margin: -2rem 0 0;
    padding: 0;
  }

  .hb-usage__cut-title {
    width: auto;
    font-size: 1.7rem;
    line-height: 1.6;
  }

  .hb-usage__cut-desc {
    width: auto;
    margin-top: 1.35rem;
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: justify;
  }

  /* そのほかの商品（波＋背景は felbinac の od-other と同じ作り） */

  .hb-other-wave {
    display: block;
    position: relative;
    z-index: 2;
    margin-top: 6rem;
    pointer-events: none;
  }

  .hb-other-wave img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hb-other {
    position: relative;
    z-index: 2;
    margin-top: -30rem;
    padding-top: 4rem;
    padding-bottom: 12.5rem;
    background: linear-gradient(to bottom, #d6eef8 0, #e8f5fb 52rem, #e8f5fb calc(100% - 4.2rem), #fff 100%);
  }

  /* セクションを下に伸ばした分、購入枠は元の位置に戻す */

  .hb-other + .purchase {
    margin-top: 0;
  }

  .hb-other__head {
    margin-bottom: 3rem;
    padding: 0 2rem;
  }

  .hb-other__en {
    margin-bottom: 0;
    font-size: 1.4rem;
    line-height: 1.3;
  }

  .hb-other__title {
    margin-top: 0;
    font-size: 2.4rem;
    line-height: 1.8;
  }

  .hb-other__card {
    display: block;
    width: auto;
    height: auto;
    margin: 0 2rem;
    padding: 2rem;
    border-radius: 1.5rem;
  }

  /* --- 上段：商品画像＋商品名（PC版の横並びをそのまま縮小） --- */

  .hb-other__product {
    width: auto;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .hb-other__product-img {
    width: 9rem;
    margin-top: 0;
    height: auto;
    flex: 0 0 auto;
  }

  .hb-other__product-body {
    width: auto;
    flex: 1;
    min-width: 0;
    margin-left: 0;
    padding-left: 1.2rem;
  }

  .hb-other__product-name {
    font-size: 1.76rem;
    line-height: 1.45;
  }

  .hb-other__ext {
    position: static;
    display: inline-block;
    width: 1.43rem;
    height: 1.43rem;
    margin-left: 0.6rem;
    transform: none;
    vertical-align: 0.1rem;
  }

  .hb-other__product-meta {
    margin-top: 0.88rem;
    gap: 0.88rem;
  }

  .hb-other__product-class {
    padding: 0.33rem 0.77rem;
    font-size: 1.32rem;
    white-space: nowrap;
  }

  .hb-other__product-count {
    font-size: 1.43rem;
    white-space: nowrap;
  }

  /* --- 下段：詳細（PC版の縦の並びを維持し、幅だけSPに合わせる） --- */

  .hb-other__detail {
    width: auto;
    margin-top: 2rem;
    padding: 2rem 0 0;
    border-left: 0;
    border-top: 0.1rem solid #BFD9EA;
  }

  .hb-other__tags {
    width: auto;
    justify-content: flex-start;
    gap: 0.8rem;
  }

  .hb-other__tag {
    height: 2.2rem;
    font-size: 1.2rem;
    white-space: nowrap;
  }

  .hb-other__tag--alert {
    width: auto;
    height: 2.6rem;
    padding: 0 1.6rem;
    border-radius: 1.3rem;
    font-size: 1.4rem;
  }

  .hb-other__size {
    display: flex;
    gap: 0.3rem;
  }

  .hb-other__size-item {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 0.9rem 0.6rem 0.9rem 0.8rem;
    font-size: 1.4rem;
  }

  .hb-other__size-count {
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 0 0.9rem;
    flex: 0 0 auto;
    font-size: 1.4rem;
    white-space: nowrap;
  }

  .hb-other__number {
    font-size: 1.1rem;
    line-height: 1.5;
  }

  /* 販売名／一般的名称は幅が足りないので縦に積む */

  .hb-other__detail .hb-other__tags:last-child {
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .hb-other__detail .hb-other__tags:last-child .hb-other__tag,
  .hb-other__detail .hb-other__tags:last-child .hb-other__tag:first-child {
    width: auto;
    height: 2.8rem;
    padding: 0 1.4rem;
    border-radius: 1.4rem;
    font-size: 1.4rem;
  }

  .hb-feature__fit-photos img:nth-child(3),
  .hb-other__size-count {
    height: auto;
  }

  /* バッジはPC版の正円のまま75%に縮小 */

  .hb-feature__fit-badge {
    top: -2.5rem;
    left: -2rem;
    width: 6.9rem;
    height: 6.9rem;
    font-size: 0.97rem;
  }
}
/* 利用規約 */

.page-hero--terms {
  height: 46rem;
}

.page-hero--terms .page-hero__bg2,
.page-hero--terms .page-hero__bg3,
.page-hero--terms .page-hero__bg4 {
  position: absolute;
  top: 0;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.page-hero--terms .page-hero__bg2 {
  left: 35.7%;
  width: 50.8%;
}

.page-hero--terms .page-hero__bg3 {
  left: 0;
  width: 53.4%;
}

.page-hero--terms .page-hero__bg4 {
  left: 47.65%;
  width: 52.35%;
}

.page-hero--terms .page-hero__inner {
  padding-top: 21.773rem;
  padding-left: 12.447rem;
}

.page-hero--terms .page-hero__en {
  line-height: 1;
  margin-bottom: 0.48rem;
}

.page-hero--terms .page-hero__title {
  font-size: 4rem;
  letter-spacing: 0.1em;
}

.page-hero--terms .breadcrumb {
  top: 9.6113rem;
  left: 2.517rem;
}

.page-hero--terms .breadcrumb__home {
  margin-right: 0.8rem;
  top: -0.192rem;
}

/* 規約の本文 */

.tm-terms {
  padding: 8.7rem 0 12rem;
}

.tm-terms__inner {
  width: 90rem;
  margin: 0 auto;
}

.tm-terms__text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.9rem;
  color: #19324c;
}

.tm-terms__lead {
  margin-bottom: 5.7rem;
}

.tm-block + .tm-block {
  margin-top: 6.2rem;
}

/* 見出しを持たないブロックは前の続きなので、行送りぶんだけあければよい。
   大きくあけるのは、見出しから始まる次のまとまりの前だけ */
.tm-block + .tm-block:not(:has(.tm-block__title)) {
  margin-top: 2.9rem;
}

/* 番号つきの項目（１〜４）は大きな区切りなので、上をもう1行あける */
.tm-block + .tm-block:has(.tm-terms__num) {
  margin-top: 5.8rem;
}

/* 別のまとまりが始まるところは、さらに2行ぶんあける */
.tm-block + .tm-block:has(.tm-terms__sectop) {
  margin-top: 8.7rem;
}

/* 本文の中の小見出し（太字） */
.tm-terms__strong {
  font-weight: 700;
}

/* 本文の中のぶら下がり（（1）（2）… の並び） */
.tm-terms__sub {
  display: block;
  padding-left: 1.6rem;
}

/* 添付書類の並び。1行ずつ空けて読みやすくする */
.tm-terms__line {
  display: block;
  margin-top: 2.9rem;
}

/* １〜４の番号つきの項目。本文より少し大きく、太く */
.tm-terms__num {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
}

/* 番号つきの項目の折り返し。
   2行目からは「１　」の幅ぶん下げて、1行目の本文の頭にそろえる。
   「１　」は全角2文字なので 2em でちょうど合う */
.tm-terms__hang {
  display: block;
  padding-left: 2em;
  text-indent: -2em;
}

/* 小見出しの下の罫線。ひとつの塊として見せる */
.tm-terms__rule {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

/* 罫線のすぐ下の本文は、あけすぎないように詰める */
.tm-terms__rule + .tm-terms__line {
  margin-top: 1.65rem;
}

/* 塊の中で、少しだけ間をあけたいところ */
.tm-terms__line.tm-terms__gap {
  margin-top: 1.45rem;
}

/* ・ではじまる行の中身。・のぶんだけ下げて文頭をそろえる */
.tm-terms__under {
  display: block;
  padding-left: 1em;
}

/* ●ではじまる小見出し。ほかの見出しと同じ青にする */
.tm-terms__mark {
  color: var(--blue-alt);
}

/* 番号つきの項目と、その下にすぐ続く本文のあいだは1行あける */
.tm-terms__text:has(.tm-terms__num) + .tm-terms__text {
  margin-top: 2.9rem;
}

/* 番号つきの項目にぶら下がる段落。番号の右の本文と頭をそろえる。
   番号が全角2文字ぶんなので 2em でちょうど合う */
.tm-terms__indent {
  display: block;
  padding-left: 2em;
}

/* 番号だけ本文より少し大きいページ（個人情報）は、その字の全角2文字ぶんで合わせる */
.tm-terms__indent--lg {
  padding-left: 3.4rem;
}

/* （1）（2）… の1項目。折り返した行は（1）の右の文字にそろえる。
   「（1）」は全角2文字＋数字ぶんで、実測 2.57em */
.tm-terms__item {
  display: block;
  padding-left: 2.57em;
  text-indent: -2.57em;
}

/* 本文の中のリンク */
.tm-link {
  color: #1e72bc;
  text-decoration: underline;
  transition: opacity 0.3s;
}

.tm-link:hover {
  opacity: 0.7;
}

/* ページ末尾の制定日。本文から2行ぶんあけて、右にそろえる */
.tm-terms__date {
  display: block;
  margin-top: 8.7rem;
  text-align: right;
}

/* PDFのリンク */
.tm-pdf {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 0 2.6rem;
  color: #1e72bc;
  text-decoration: none;
  transition: opacity 0.3s;
}

.tm-pdf:hover {
  opacity: 0.7;
}

.tm-pdf__icon {
  width: 2rem;
  height: 2rem;
  display: block;
}

.tm-pdf__note {
  display: block;
}

/* ページ下の丸いボタン */
.tm-btn {
  margin-top: 5.7rem;
}

.tm-btn__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  height: 4.8rem;
  padding: 1rem 2rem;
  background: #fff;
  border: 0.1rem solid #3371b3;
  border-radius: 9999px;
  color: #3371b3;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tm-btn__arrow {
  width: 1.8rem;
  height: 1.4rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.tm-btn__link:hover {
  background: #3371b3;
  color: #fff;
}

.tm-block__title {
  padding-bottom: 1.45rem;
  margin-bottom: 1.65rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  color: var(--blue-alt);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* ===== 利用規約 SP ===== */
@media (max-width: 767px) {

  /* FV（第2階層の標準：高さ294.2 / パンくず top7・left1.4 / en14 / title28） */

  .page-hero--terms {
    height: 29.42rem;
  }

  .page-hero--terms .page-hero__bg-sp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--terms .breadcrumb {
    top: 7rem;
    left: 1.4rem;
  }

  .page-hero--terms .page-hero__inner {
    padding-top: 13.6rem;
    padding-left: 2.9rem;
    padding-right: 2.9rem;
  }

  .page-hero--terms .page-hero__en {
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 0.3rem;
  }

  .page-hero--terms .page-hero__title {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
  }

  /* 本文 */

  .tm-terms {
    padding: 5rem 0 7rem;
  }

  .tm-terms__inner {
    width: auto;
    margin: 0;
    padding: 0 2rem;
  }

  .tm-terms__text {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: justify;
  }

  .tm-terms__lead {
    margin-bottom: 4rem;
  }

  .tm-block + .tm-block {
    margin-top: 4rem;
  }

  .tm-block + .tm-block:not(:has(.tm-block__title)) {
    margin-top: 2rem;
  }

  .tm-block + .tm-block:has(.tm-terms__num) {
    margin-top: 4.5rem;
  }

  .tm-block + .tm-block:has(.tm-terms__sectop) {
    margin-top: 7rem;
  }

  /* PDFのリンクは、名前・アイコン・容量を1行にまとめて折り返す */
  .tm-pdf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0 0 0 1.6rem;
  }

  .tm-terms__sub {
    padding-left: 1.2rem;
  }

  .tm-terms__line {
    margin-top: 2.52rem;
  }

  .tm-terms__num {
    font-size: 1.5rem;
  }

  .tm-terms__indent--lg {
    padding-left: 3rem;
  }

  .tm-terms__text:has(.tm-terms__num) + .tm-terms__text {
    margin-top: 2rem;
  }

  .tm-terms__rule + .tm-terms__line {
    margin-top: 1.4rem;
  }


  .tm-btn {
    margin-top: 4rem;
  }

  .tm-btn__link {
    width: 100%;
    font-size: 1.5rem;
    gap: 1.2rem;
  }

  .tm-block__title {
    padding-bottom: 1.2rem;
    margin-bottom: 1.4rem;
    font-size: 1.7rem;
    line-height: 1.4;
  }
}

/* ===== 会社案内系ページのSPベース背景（青いトーン） ===== */
@media (max-width: 767px) {

  .page-hero--company::before,
  .page-hero--company-access::before {
    background-image: url(../img/ca-fv-blobs-sp.svg);
  }
}

/* ===== ヘッダーボタン：2つを同じ幅に、右にも余白を持たせる ===== */
.header .btn--outline,
.header .btn--fill {
  width: 17rem;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  justify-content: space-between;
}

/* お問い合わせは、文字を少し右へ。左の空きを矢印の右の空き（2.1rem）と同じにする */
.header .btn--outline {
  padding-left: 2.1rem;
}

/* オンラインショップは矢印が無いので、文字と外部リンクマークをひとかたまりで中央に */
.header .btn--fill {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.header .btn--fill .btn__label {
  gap: 0.6rem;
}

/* ===== お知らせ：ホバー時はカテゴリを白抜きにして視認性を保つ ===== */
.news__cat {
  transition: background-color 0.3s, box-shadow 0.3s;
}

.news__item:hover .news__cat {
  background: #fff;
  /* 白くなると行の背景に溶けて見づらいので、ごく薄い線を内側に引く（お知らせ一覧と同じ） */
  box-shadow: inset 0 0 0 1px rgba(51, 113, 179, 0.2);
}

.news-item__cat {
  transition: background-color 0.3s, box-shadow 0.3s;
}

.news-item:hover .news-item__cat {
  background: #fff;
  /* 白くなると行の背景に溶けて見づらいので、ごく薄い線を内側に引く。
     border ではなく inset の影なので、ラベルの大きさも文字の位置も動かない */
  box-shadow: inset 0 0 0 1px rgba(51, 113, 179, 0.2);
}

/* FBプラスターαのリンクは外部リンクマークを矢印位置に（120%） */
.od-detail__link-arrow svg.od-detail__link-extbig {
  display: block;
  width: 1.67rem;
  height: 1.67rem;
  margin: auto;
  color: #1E72BC;
}

.od-detail__link-arrow:has(.od-detail__link-extbig) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* そのほかの商品カード：外部リンクマークを右端（旧・矢印の位置）に 115% */
.od-other__card-extwrap {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.od-other__card-ext2 {
  display: block;
  width: 1.67rem;
  height: 1.67rem;
}

/* ===== 商品シリーズカード（テンプレートA）写真の共通化 =====
   従来は :nth-child(1)〜(7) でオムニード7商品それぞれの写真サイズと位置を
   直書きしていたため、商品数や写真の縦横比が違う量産ページで崩れる。
   商品情報ページの pcard と同じ「固定枠＋object-fit:contain」に揃えて、
   何点でも・どの写真でも枠に収まるようにする。
   SP版（max-width:767px）には一切影響させないため min-width:768px に閉じる。 */
@media (min-width: 768px) {
  .os-list__grid .os-card .os-card__img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }

  .os-list__grid .os-card .os-card__img img {
    position: static;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* 写真が揃うので、背の高い写真用に足していた位置補正は不要になる */
  .os-list__grid .os-card:nth-child(7) .os-card__name {
    margin-top: 0.4108rem;
  }

}

/* ===== 商品が1点・2点のときはカードを画面センターに =====
   グリッドは3列分の幅 98.9666rem で固定されているため、1点・2点だと
   左に寄って見える。列数ぶんの幅に縮めるだけで、既存の margin:0 auto が
   そのままセンタリングとして働く。
   3点以上（オムニード7点など）はクラスが付かないので従来どおり左揃え、
   最終行も左揃えのまま。SP版は1カラムなので min-width:768px に閉じる。 */
@media (min-width: 768px) {
  .os-list__grid--1 {
    grid-template-columns: 31.3rem;
    width: 31.3rem;
  }

  .os-list__grid--2 {
    grid-template-columns: repeat(2, 31.3rem);
    width: 65.1334rem;
  }
}

/* ===== 会社案内下層のファーストビュー 見出しの折り返し防止 =====
   .page-hero__text は max-width:51rem。リード文のある他のページ用の幅で、
   「テイコクファルマケアの湿布薬」のような長い見出しが途中で折り返す。
   このFVには見出ししか入らないため、Figmaの見出し幅 1202px まで広げる。
   短い見出し（研究開発など）は1行のままなので表示は変わらない。 */
@media (min-width: 768px) {
  .page-hero--research .page-hero__text {
    max-width: 120.2rem;
  }
}

/* ===== 商品シリーズのファーストビュー 見出しの折り返し防止 =====
   .page-hero__text は max-width:51rem。リード文のある他のページ用の幅で、
   「さわやかリフレッシュシート」のような長いシリーズ名が途中で折り返す。
   このFVには見出ししか入らないため、Figmaの見出し幅 1202px まで広げる。
   短い見出しは1行のままなので、オムニード等の表示は変わらない。 */
@media (min-width: 768px) {
  .page-hero--omneed-series .page-hero__text {
    max-width: 120.2rem;
  }
}

/* ===== テイコクファルマケアの湿布薬（/company/about/） =====
   構成案（Figma 169:4849）の実寸をそのままremにしている。
   コンテンツ幅99.6rem、ブロック間7.2rem。
   このページ専用のクラス（ab-）なので、他のページには影響しない。 */
.ab {
  position: relative;
  width: 99.6rem;
  margin: 0 auto;
  padding: 7.2rem 0 12rem;
}

/* 白いカードが白い地に沈むので、セクションの一番下から薄く色を立ち上げる。
   色は会社案内ページの背景（company-features-bg.svg）と同じ #D8E2F9 */
.ab::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90rem;
  background: linear-gradient(180deg, rgba(216, 226, 249, 0) 0%, #d8e2f9 100%);
  opacity: 0.6;
  pointer-events: none;
}

.ab-lead__p {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.12em;
  text-align: center;
  color: #0b0308;
  margin: 0 0 1.8rem;
}

.ab-lead__p:last-child {
  margin-bottom: 0;
}

.ab-logo {
  display: flex;
  justify-content: center;
  margin-top: 8rem; /* 6.5rem +15px */
}

.ab-logo img {
  width: 36.3rem;
  height: auto;
  display: block;
}

.ab-intro {
  /* 「みなさまへ」の見出し（.msg-craft__title）に色・サイズをそろえる。
     上のあき（ロゴとの間）は .ab-main の margin-top が持つ */
  padding: 2.4rem 0;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--blue-main);
}

/* 見出し→写真→本文の順に少しずつずらして出す（PC・SP共通） */
.ab-main__photo.fade-up {
  transition-delay: 0.12s;
}

.ab-main__text.fade-up {
  transition-delay: 0.24s;
}

/* ---- 写真と本文 ---- */
.ab-main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 2.2rem;
}

.ab-main__photo {
  flex: 1 0 0;
  min-width: 0;
  padding-right: 8rem;
  display: flex;
  align-items: center;
}

.ab-main__photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.8rem;
}

.ab-main__text {
  flex: 0 0 48.4rem;
  display: flex;
  flex-direction: column;
}

.ab-main__title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  color: #0b0308;
  margin: 0 0 1.6rem;
}

.ab-main__p {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #0b0308;
  margin: 0 0 2.9rem;
}

.ab-main__p:last-child {
  margin-bottom: 0;
}

.ab-main__foot {
  margin-top: auto;
  padding-top: 3rem;
}

.ab-main__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14.4rem;
}

.ab-main__logo img {
  width: 40rem; /* 構成案は50rem。その80% */
  max-width: none;
  height: auto;
  display: block;
}

.ab-main__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  height: 4.8rem;
  margin-top: 2rem;
  padding: 1rem 2rem;
  background: #fff;
  border: 0.1rem solid #3371b3;
  border-radius: 9999px;
  color: #3371b3;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.ab-main__btn-ext {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-main__btn:hover {
  background: #3371b3;
  color: #fff;
}

/* ---- 横長カード（みなさまへ） ---- */
.ab-card {
  display: flex;
  align-items: center;
  gap: 5rem;
  margin-top: 13.2rem;
  padding: 3.2rem 4rem;
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.06);
}

.ab-card__img {
  flex: 0 0 38rem;
}

.ab-card__img img {
  width: 100%;
  height: auto;
  display: block;
}

.ab-card__body {
  flex: 1 0 0;
  min-width: 0;
}

.ab-card__title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #1e72bc;
  margin: 0 0 1.6rem;
}

.ab-card__desc {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #0b0308;
  margin: 0 0 2.4rem;
}

.ab-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  min-width: 22rem;
  padding: 1.2rem 2.4rem;
  /* 枠線だけ黒っぽい紺だったので、隣の「帝國製薬Webサイト」ボタンと同じ青にそろえた */
  border: 0.1rem solid #3371b3;
  border-radius: 0.4rem;
  color: #1e72bc;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.ab-card__btn-arrow {
  width: 1.1rem;
  height: 1.2rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.ab-card__btn:hover {
  background: #1e72bc;
  border-color: #1e72bc;
  color: #fff;
}

@media (max-width: 767px) {
  .ab {
    width: 100%;
    padding: 6.8rem 2rem 8rem; /* FVとのあき 4.8rem +20px */
  }

  /* スマホは両端ぞろえ。最後の行だけは左ぞろえになる（text-align-last の既定） */
  .ab-lead__p {
    font-size: 1.7rem; /* PCは1.8rem */
    text-align: justify;
    letter-spacing: 0.08em; /* PCは0.12em。スマホは幅が狭いので少し詰める */
  }

  /* 改行位置はPCの組み用なので、スマホでは無視して自然に折り返す */
  .ab-lead__p br,
  .ab-intro br {
    display: none;
  }

  /* タイトルが2行になったぶん、位置を /products/omneed/felbinac/（.page-hero--omneed）に合わせる。
     このページだけの指定にして、研究開発ページ（同じ .page-hero--research）には影響させない */
  .page-template-page-about .page-hero--research .page-hero__inner {
    padding-top: 12.94rem;
  }

  .ab-logo {
    margin-top: 4.7rem; /* リード文とのあき 3.2rem +15px */
  }

  .ab-logo img {
    width: 24rem;
  }

  .ab-intro {
    padding: 1.6rem 0;
    font-size: 2rem;
  }

  /* 見出しが .ab-main の中に入ったので、あきの持ち主だけ付け替える。
     ロゴ→見出し 4.8rem、見出し→写真 3.2rem。数値は移動前と同じ */
  .ab-main {
    display: block;
    margin-top: 4.8rem;
  }

  .ab-main__photo {
    padding-right: 0;
    margin-top: 1.5rem; /* 見出しとのあき 3.2rem -17px */
  }

  /* スマホは本文が短いぶん、グラデを少し上まで伸ばす（PCは90rem） */
  .ab::after {
    height: 105rem;
  }

  .ab-main__text {
    margin-top: 2.4rem;
  }

  .ab-main__title {
    font-size: 1.8rem;
  }

  .ab-main__p {
    margin-bottom: 2.4rem;
  }

  .ab-main__foot {
    padding-top: 5.4rem; /* 本文とのあき 2.4rem +30px */
  }

  .ab-main__logo {
    height: auto;
  }

  .ab-main__logo img {
    width: 100%;
  }

  .ab-main__btn {
    font-size: 1.5rem;
  }

  .ab-card {
    display: block;
    overflow: hidden; /* ロゴ画像（白地つき）がカードの角から外にはみ出さないように */
    margin-top: 11.4rem; /* 帝國製薬Webサイトのボタンとのあき 6.4rem +50px */
    padding: 2.4rem 2rem;
    border-radius: 1.2rem;
  }

  /* ロゴ素材の上側の余白ぶんを詰める */
  .ab-card__img {
    margin-top: -3rem; /* ロゴの上のあき。-4.5rem +15px */
  }

  .ab-card__img img {
    width: 31.46rem; /* 28.6rem（130%）の110% */
    max-width: none; /* カードの内側295pxで頭打ちにさせない */
    margin: 0 auto;
  }

  .ab-card__body {
    /* ロゴの下のあき。2rem -50px -15px */
    margin-top: -4.5rem;
  }

  .ab-card__title {
    font-size: 1.8rem;
  }
}

@media (min-width: 768px) {
  /* 見出し・小見出し・本文を右の列に縦に積み、左の写真はその全体に天地をそろえる。
     /company/dear_all/ の「みなさまに寄り添い続けてきたものづくり」と同じ組み方 */
  .ab-main {
    display: grid;
    /* 本文の列の幅は /company/dear_all/ の .msg-craft__text（414px）にそろえる。
       狭くなったぶんは左の写真に回す（構成案の48.4rem→41.4rem、写真は432→502px） */
    grid-template-columns: 1fr 41.4rem;
    grid-template-rows: auto 1fr;
    margin-top: 8.3rem; /* ロゴとの間。6.8rem +15px */
  }

  .ab-intro {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0 2.4rem;
  }

  /* 写真の天地を右の列（見出しから本文まで）にそろえる。
     素材と枠は縦横比が違うので object-fit: cover で切り取る */
  .ab-main__photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-items: stretch;
  }

  .ab-main__photo img {
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }

  /* 帝國製薬ロゴ（幅50rem）が本文列を押し広げないようにする。
     構成案どおり本文列は48.4rem、ロゴは左右にはみ出す */
  .ab-main__text {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  .ab-main__title {
    font-size: 1.8rem;
    font-weight: 600;
  }

  /* 本文は15px・行間180%で、列の幅に対して両端ぞろえ。
     /company/dear_all/ の .msg-craft__p と同じ */
  .ab-main__p {
    font-size: 1.5rem;
    line-height: 1.8;
    text-align: justify;
  }

  /* ロゴの下だけ詰める。上（本文との間）は変えない */
  .ab-main__logo {
    height: auto;
    padding: 3.9rem 0 1.5rem;
  }

  /* PCは本文が99.6remなので、背景だけ画面幅いっぱい（100vw）に広げる。
     scrollbar-gutter でスクロールバー分がはみ出すので、
     このページの main だけ左右を clip して横スクロールを止める */
  .page-template-page-about main {
    overflow-x: clip;
  }

  .ab::after {
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
  }
}

/* ===== おくすりコラムの記事ページ（/column/relief/ /column/history/） =====
   見た目は /company/dear_all/ のフォーマットに合わせる（構成案は内容のみ）。
   ファーストビューは .page-hero--message と同じ形で、色だけ /column/ のもの（col3-fv-*.svg）。
   dear_all 側のCSSには触らないよう、値を持った別クラスにしている。 */

.page-hero--col-article {
  height: 46rem;
}

.page-hero--col-article .page-hero__bg,
.page-hero--col-article .page-hero__bg2,
.page-hero--col-article .page-hero__bg3,
.page-hero--col-article .page-hero__bg4,
.page-hero--col-article .page-hero__bg5,
.page-hero--col-article .page-hero__bg6 {
  position: absolute;
  height: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}

/* 画面幅を広げるとSVGが縦に伸びて波の下半分が切られるので、1440px時の実寸で高さを固定する */
.page-hero--col-article .page-hero__bg {
  top: -0.9rem;
  left: -11.111%;
  width: 111.25%;
  height: 46.9rem;
}

.page-hero--col-article .page-hero__bg2,
.page-hero--col-article .page-hero__bg3 {
  top: -0.3rem;
  left: -1.875%;
  width: 102.014%;
  height: 44.8rem;
}

.page-hero--col-article .page-hero__bg4 {
  top: -27.357rem;
  left: 33.690%;
  width: 50.815%;
}

.page-hero--col-article .page-hero__bg5 {
  top: -20.458rem;
  left: -21.077%;
  width: 72.438%;
}

.page-hero--col-article .page-hero__bg6 {
  top: -12.129rem;
  left: 45.639%;
  width: 82.271%;
}

.page-hero--col-article .page-hero__inner {
  padding: 18.624rem 0 0 9.546rem;
}

.page-hero--col-article .page-hero__text {
  max-width: none;
}

.page-hero--col-article .page-hero__en {
  line-height: 1;
  margin-bottom: 0.912rem;
}

.page-hero--col-article .page-hero__title {
  font-size: 4rem;
  letter-spacing: 0.1em;
  line-height: 1.45;
  color: var(--blue-main);
}

/* スマホだけ見出しの改行位置を変えるとき（PC用とスマホ用の2つを持たせて切り替える） */
.page-hero__title-pc { display: block; }
.page-hero__title-sp { display: none; }

.page-hero--col-article .breadcrumb {
  top: 9.5113rem;
  left: 2.517rem;
}

.page-hero--col-article .breadcrumb__home {
  margin-right: 0.8rem;
  top: -0.192rem;
}

/* ---- 本文の器（dear_all の .msg と同じ） ---- */
.art {
  width: 99rem;
  text-spacing-trim: space-all;
  margin: 0 auto;
  padding: 9.2rem 0 17.7rem;
  color: #19324c;
}

.art-visual img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* ---- 導入の囲み（dear_all の .msg-lead と同じ） ---- */
.art-lead {
  margin-top: 4rem;
  background: #e1e8f0;
  border-radius: 0.8rem;
  padding: 6.2424rem 7.5rem 6.3576rem 6.7rem;
}

.art-lead__p {
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 0;
}

.art-lead__p + .art-lead__p {
  margin-top: 2.9rem;
}

/* ---- 見出し（dear_all の .msg-craft__title と同じ） ---- */
.art-h {
  margin-top: 8.0992rem;
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--blue-main);
}

/* 導入の囲みのあとの1本目だけ、dear_all の .msg-craft と同じ 15.2rem あける */
.art-lead + .art-h {
  margin-top: 15.2rem;
}

/* ---- 本文 ---- */
.art-text {
  margin-top: 2.9rem;
}

.art-h + .art-text,
.art-h + .art-row {
  margin-top: 3.2432rem;
}

.art-p {
  text-align: justify;
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 0;
}

.art-p + .art-p,
.art-p + .art-list,
.art-list + .art-p {
  margin-top: 2.9rem;
}

.art-link {
  color: #004fa3;
  text-decoration: underline;
  transition: opacity 0.3s;
}

.art-link:hover {
  opacity: 0.7;
}

.art-list {
  list-style: disc;
  padding-left: 2.4rem;
  margin: 0;
}

.art-list li {
  list-style: disc;
  text-align: justify;
  font-size: 1.5rem;
  line-height: 1.8;
}

/* ---- 見出し＋本文＋右に写真（ひとつの組） ----
   文字ボックスは42rem。写真は残りの幅（列のあきは dear_all と同じ5.657%）。
   写真の天は見出しの天、地は本文の地にそろう */
.art-group {
  display: grid;
  grid-template-columns: 42rem 1fr;
  grid-template-rows: auto 1fr;
  margin-top: 8.0992rem;
}

.art-lead + .art-group {
  margin-top: 15.2rem;
}

.art-group__h {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
}

.art-group__text {
  grid-column: 1;
  grid-row: 2;
  margin-top: 3.2432rem;
  min-width: 0;
}

.art-group__img {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start; /* 写真は元の縦横比のまま。左の本文が下に出てもよい */
  margin: 0 0 0 5.6rem; /* dear_all の .msg-craft__photo と同じ56px。
                           gridの中では%が列の幅基準になってしまうのでremで持つ */
}

.art-group__img img {
  width: 100%;
  height: auto;
  border-radius: 0.8rem;
  display: block;
}

/* 写真を本文の下まで伸ばす。足りない分は左右を切る */
.art-group--fill .art-group__img {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.art-group--fill .art-group__img img {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  object-fit: cover;
}

/* 写真を左、文章を右にする */
.art-group--rev {
  grid-template-columns: 1fr 42rem;
}

.art-group--rev .art-group__h,
.art-group--rev .art-group__text {
  grid-column: 2;
}

.art-group--rev .art-group__img {
  grid-column: 1;
  margin: 0 5.6rem 0 0;
}

/* ---- 本文＋右に写真（見出しと組にならないとき） ---- */
.art-row {
  display: flex;
  align-items: flex-start;
  margin-top: 2.9rem;
}

.art-row__text {
  flex: 0 0 42rem;
  min-width: 0;
}

.art-row__img {
  flex: 1 1 0;
  margin-left: 5.6rem;
}

.art-row__img img {
  width: 100%;
  height: auto;
  border-radius: 0.8rem;
  display: block;
}

.art-row--rev {
  flex-direction: row-reverse;
}

.art-row--rev .art-row__img {
  margin: 0 5.6rem 0 0;
}

/* ---- 横長の写真＋キャプション ---- */
.art-fig {
  margin: 4rem 0 0;
}

.art-fig img {
  width: 100%;
  aspect-ratio: 768 / 400;
  object-fit: cover;
  border-radius: 0.8rem;
  display: block;
}

.art-fig__cap {
  margin-top: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.6;
}

/* ---- 囲み（色は導入の囲みと同じ #E1E8F0） ---- */
.art-box {
  margin-top: 4rem;
  background: #e1e8f0;
  border-radius: 0.8rem;
  padding: 4rem 4.5rem;
}

.art-box__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--blue-main);
  margin-bottom: 2rem;
}

.art-box__p {
  text-align: justify;
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 0;
}

.art-box__p + .art-box__p,
.art-box__p + .art-box__list,
.art-box__list + .art-box__p {
  margin-top: 2.9rem;
}

/* 囲みの中の箇条書きは、白いカードを横に並べる形にする */
.art-box__list {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.art-box__list li {
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
  background: #fff;
  border-radius: 0.8rem;
  padding: 2.4rem;
  text-align: justify;
  font-size: 1.5rem;
  line-height: 1.8;
}

@media (max-width: 767px) {
  .page-hero--col-article {
    height: 28.5562rem;
    padding-bottom: 2.6762rem;
    overflow: visible;
    z-index: 1;
  }

  .page-hero--col-article::before {
    display: none;
  }

  .page-hero--col-article .page-hero__bg,
  .page-hero--col-article .page-hero__bg2,
  .page-hero--col-article .page-hero__bg3,
  .page-hero--col-article .page-hero__bg4,
  .page-hero--col-article .page-hero__bg5,
  .page-hero--col-article .page-hero__bg6 {
    display: none;
  }

  .page-hero--col-article .page-hero__bg-sp--wave {
    display: block;
    position: absolute;
    left: -0.2rem;
    bottom: -2rem;
    width: calc(100% + 0.4rem);
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--col-article .page-hero__bg-sp--blob {
    display: block;
    position: absolute;
    left: 13.5rem;
    top: -10.6rem;
    width: 51.5rem;
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-11.24deg);
  }

  .page-hero--col-article .breadcrumb {
    top: 7rem;
    left: 1.4rem;
  }

  .page-hero--col-article .breadcrumb__home {
    margin-right: 0.5rem;
    top: -0.1rem;
  }

  /* タイトルが2行になるので、位置を /products/omneed/felbinac/ にそろえる */
  .page-hero--col-article .page-hero__inner {
    padding: 12.94rem 2.9rem 0;
  }

  .page-hero--col-article .page-hero__en {
    font-family: "Urbanist", var(--font-en), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
  }

  .page-hero__title-pc { display: none; }
  .page-hero__title-sp { display: block; }

  /* コラムの記事2ページは、タイトルが長いので他のページ（23.8px）より少し小さくする */
  .page-hero--col-article .page-hero__title {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  /* カタカナの社名だけ字間を別に持たせている。0emは見出し全体と同じ0.1em */
  .page-hero__title .tight {
    letter-spacing: 0em;
  }

  /* 本文の器（dear_all の .msg と同じ） */
  .art {
    width: auto;
    padding: 7.2rem 2rem 8rem;
  }

  .art-lead {
    margin-top: 3rem;
    padding: 2.5rem 2rem;
  }

  .art-lead__p {
    font-size: 1.5rem;
    line-height: 1.8;
    text-align: justify;
  }

  .art-lead__p + .art-lead__p {
    margin-top: 2rem;
  }

  .art-h {
    margin-top: 6rem;
    font-size: 2.3rem;
  }

  .art-text {
    margin-top: 2rem;
  }

  .art-h + .art-text,
  .art-h + .art-row {
    margin-top: 2rem;
  }

  .art-list li,
  .art-box__list li {
    font-size: 1.4rem;
    line-height: 2;
  }

  .art-p,
  .art-box__p {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .art-p + .art-p,
  .art-p + .art-list,
  .art-list + .art-p,
  .art-box__p + .art-box__p,
  .art-box__p + .art-box__list,
  .art-box__list + .art-box__p {
    margin-top: 2rem;
  }

  .art-group {
    display: block;
    margin-top: 6rem;
  }

  .art-lead + .art-group {
    margin-top: 6rem;
  }

  .art-group__h {
    font-size: 2.3rem;
  }

  .art-group__text {
    margin-top: 2rem;
  }

  /* 左右入れ替えの指定（写真の右56px）はPCだけのものなので、スマホでは打ち消す */
  .art-group__img,
  .art-group--rev .art-group__img {
    margin: 2.5rem 0 0;
  }

  .art-group__img img {
    height: auto;
    border-radius: 0.5rem;
  }

  .art-row {
    display: block;
    margin-top: 2rem;
  }

  .art-row__img,
  .art-row--rev .art-row__img {
    margin: 2.5rem 0 0;
  }

  .art-row__img img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
  }

  .art-fig {
    margin-top: 2.5rem;
  }

  .art-fig img {
    border-radius: 0.5rem;
  }

  .art-box {
    margin-top: 2.5rem;
    padding: 2.5rem 2rem;
  }

  .art-box__title {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
  }

  /* SPはカッコの行が2行に折り返すので、その行間だけほんの少し開ける（1.4 → 1.55） */
  .art-box__title-note {
    line-height: 1.55;
  }

  .art-box__list {
    display: block;
  }

  .art-box__list li {
    padding: 1.6rem;
  }

  .art-box__list li + li {
    margin-top: 1.6rem;
  }
}

/* ======================================
   第3・第4階層のFV見出し（PC版のみ）
   日本語タイトルを90%にして、上の英字とのあきを7px広げる。
   あきは padding で足している。margin だとページごとに元の値が違うので
   ちょうど7pxだけ広げるのが難しく、collapse の影響も受けるため。
   SP版は今のままにしたいので、min-width で囲って外に出ないようにしてある。
   ====================================== */
@media (min-width: 768px) {

  .page-hero--omneed-series .page-hero__en,
  .page-hero--research .page-hero__en,
  .page-hero--company-access .page-hero__en,
  .page-hero--message .page-hero__en,
  .page-hero--col-article .page-hero__en,
  .page-hero--human-base .page-hero__en,
  .page-hero--omneed .page-hero__en {
    font-size: 1.944rem;
  }

  /* オムニードフェルビナク（--omneed）だけ元が英字19px・日本語37pxだったが、
     他の第3・第4階層にそろえた */
  .page-hero--omneed-series .page-hero__title,
  .page-hero--research .page-hero__title,
  .page-hero--company-access .page-hero__title,
  .page-hero--message .page-hero__title,
  .page-hero--col-article .page-hero__title,
  .page-hero--human-base .page-hero__title,
  .page-hero--omneed .page-hero__title {
    font-size: 3.7rem;
  }

  /* 英字と日本語のあきを、全ページ15pxにそろえる。
     元のマージンも行送りもページごとに違うので、その差を padding で埋めている。
     数値はすべて実測で合わせたもの。文字サイズを変えると合わなくなるので、
     いじったら測り直すこと */
  .page-hero--omneed-series .page-hero__title {
    padding-top: 1.1rem;
  }

  .page-hero--research .page-hero__title,
  .page-hero--omneed .page-hero__title {
    padding-top: 0;
  }

  .page-hero--company-access .page-hero__title {
    padding-top: 1.33rem;
  }

  .page-hero--message .page-hero__title,
  .page-hero--col-article .page-hero__title {
    padding-top: 0.845rem;
  }

  .page-hero--human-base .page-hero__title {
    padding-top: 0.84rem;
  }
}


/* ======================================
   TOPのFV — 1440より広い画面の調整（PC版のみ）
   FVは画面幅に比例して組んであるので、広い画面ほど全体が大きくなり下が切れる。
   1920でちょうどよくなる値を出したうえで、1800から1920にかけて
   少しずつ効かせている。ある幅でいきなり切り替わると段差が出るため。
   1800までは今までどおりの拡大（1080の画面でも下は切れない）。
   --w は 1800で0、1830で1になる係数。1830より広いときは1のまま（1830以上は1920と同じ形）
   （＝1920と同じ比率が保たれる）。
   背景は画面の端まで出したいので、FVの幅そのものは触らない。
   ====================================== */
@media (min-width: 768px) {

  .fv {
    --w: 0;
    /* FVから下のページ全体を引き上げる。1920でちょうど120px */
    margin-bottom: calc(-6.25vw * var(--w));
  }

  /* キャッチとリード文を90%に。上へ40px、右へ35px */
  .fv__text {
    top: calc(14.60% - 3.647% * var(--w));
    left: calc(7.01% + 1.8373% * var(--w));
    gap: calc(1.391vw - 0.139vw * var(--w));
  }

  .fv__catch {
    font-size: calc(5.131vw - 0.5131vw * var(--w));
    line-height: calc(5.9vw - 0.59vw * var(--w));
  }

  .fv__lead {
    font-size: calc(1.438vw - 0.1438vw * var(--w));
    line-height: calc(2.301vw - 0.2301vw * var(--w));
    letter-spacing: calc(0.173vw - 0.0173vw * var(--w));
  }

  /* 商品画像は90%のあとさらに92%（合計82.8%）。上へ40px、右へ80px */
  .fv__products {
    width: calc(57.031% - 9.809% * var(--w));
    top: calc(47.711% - 5.457% * var(--w));
    left: calc(0.032% + 2.637% * var(--w));
  }

  /* 右の写真と丸い写真2点は90%。いずれも左へ50px */
  .fv__photo {
    width: calc(39.167% - 3.917% * var(--w));
    left: calc(59.703% - 2.6247% * var(--w));
  }

  .fv__circle--01 {
    width: calc(18.54% - 1.854% * var(--w));
    left: calc(49.31% - 2.6247% * var(--w));
  }

  .fv__circle--02 {
    width: calc(12.92% - 1.292% * var(--w));
    left: calc(83.61% - 2.6247% * var(--w));
  }

  /* 左上のドットも左へ50px */
  .fv__dot--01 {
    left: calc(49.17% - 2.6247% * var(--w));
  }

  /* 背景の部材。ブロブとドットを上へ120px（大きいブロブだけ135px） */
  .fv__blob-pale {
    top: calc(35.83% - 12.3094% * var(--w));
  }

  .fv__blob-sky {
    top: calc(71.65% - 10.942% * var(--w));
  }

  .fv__dot--02 {
    top: calc(83.957% - 10.942% * var(--w));
  }

  .fv__dot--03 {
    top: calc(84.922% - 10.942% * var(--w));
  }

  /* TVCMバナーを上へ120px */
  .fv__tvcm {
    top: calc(85.53% - 10.941% * var(--w));
  }
}

/* ============================================================
   検索結果ページ（search.php）／404ページ（404.php）
   ============================================================ */

.search-result,
.page-404 {
  padding: 6.9rem 0 11.9rem;
}

.search-result__inner,
.page-404__inner {
  width: 97.1rem;
  margin: 0 auto;
}

/* --- Googleプログラム可能検索の枠 --- */
/* Google側が読み込むCSSを、サイトの文字設定に寄せる最小限の上書き */
.search-result .gsc-control-cse {
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
}

.search-result .gsc-result-info,
.search-result .gs-title,
.search-result .gs-snippet,
.search-result .gs-visibleUrl {
  font-family: inherit;
}

/* --- 検索エンジンID未設定のあいだの案内 --- */
.search-result__standby {
  text-align: center;
}

.search-result__standby-title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  color: #1565A0;
  margin-bottom: 2.4rem;
}

.search-result__standby-text {
  font-size: 1.6rem;
  line-height: 2.8rem;
  margin-bottom: 2.4rem;
}

.search-result__standby-kw {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #666;
  margin-bottom: 3.2rem;
}

.search-result__standby-link {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1565A0;
  text-decoration: underline;
}

/* --- 404本文 --- */
.page-404 {
  text-align: center;
}

.page-404__text {
  font-size: 1.6rem;
  line-height: 2.8rem;
  margin-bottom: 4.8rem;
}

.page-404__btns {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.page-404__btns .btn {
  height: 5rem;
  padding: 0 2rem;
  font-size: 1.5rem;
}

@media (max-width: 767px) {
  .search-result,
  .page-404 {
    padding: 4rem 2rem 6rem;
  }

  .search-result__inner,
  .page-404__inner {
    width: 100%;
  }

  .search-result__standby-title {
    font-size: 2rem;
  }

  .search-result__standby-text,
  .page-404__text {
    font-size: 1.5rem;
    line-height: 2.6rem;
  }

  .page-404__btns {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }

  .page-404__btns .btn {
    width: 26rem;
    justify-content: space-between;
  }
}

/* Googleが結果を700px幅に閉じ込めるため、サイトのコンテンツ幅まで広げる */
.search-result .gsc-wrapper,
.search-result .gsc-above-wrapper-area {
  max-width: none;
}

/* 404の日本語タイトルは他ページの80%（4rem → 3.2rem）。PC版のみ */
@media (min-width: 768px) {
  .page-hero--404 .page-hero__title {
    font-size: 3.2rem;
  }
}

/* SP版も同じく80%（2.8rem → 2.24rem） */
@media (max-width: 767px) {
  .page-hero--404 .page-hero__title {
    font-size: 2.24rem;
  }
}

/* ============================================================
   ヘッダーのドロップダウン（商品情報）
   ============================================================ */

/* SPはドロワーがあるので出さない */
@media (max-width: 767px) {
  .megamenu {
    display: none;
  }
}

@media (min-width: 768px) {
  /* パネルをヘッダー全幅で出すため、liではなく .header（fixed）を基準にする */
  .nav__item--drop {
    position: static;
  }

  .megamenu {
    position: absolute;
    top: 7rem;
    left: 1.7rem;
    right: 1.7rem;
    padding: 2.4rem 3.6rem 3rem;
    border-radius: 0 0 0.7rem 0.7rem;
    background: #E7F4FB;
    box-shadow: 0 0.6rem 2rem rgba(21, 101, 160, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.6rem);
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
  }

  .nav__item--drop:hover .megamenu,
  .nav__item--drop:focus-within .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .megamenu__inner {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
  }

  .megamenu__col--main {
    flex: 0 0 auto;
    padding-right: 3rem;
    border-right: 1px solid #DCE8F5;
  }

  .megamenu__col--other {
    flex: 1 1 auto;
    min-width: 0;
  }

  .megamenu__head {
    margin-bottom: 1.4rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #1565A0;
    text-align: center;
  }

  .megamenu__grid {
    display: grid;
    gap: 1.2rem;
  }

  /* 主な商品は縦2段。幅は2枚分（14rem×2＋gap）のまま持たせて横長に見せる */
  .megamenu__col--main .megamenu__grid {
    grid-template-columns: 24rem;
  }

  .megamenu__col--other .megamenu__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* .nav__item a が display:flex / white-space:nowrap を持つため、
     クラス2つで詳細度を上げて打ち消す */
  .megamenu .mcard {
    display: block;
    gap: 0;
    padding: 1.2rem 0.8rem 1.4rem;
    border-radius: 0.6rem;
    background: #fff;
    white-space: normal;
    text-align: center;
    transition: opacity 0.3s;
  }

  .megamenu .mcard:hover {
    opacity: 0.7;
  }

  .megamenu .mcard__img {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }

  .megamenu .mcard__img img {
    display: block;
    width: 100%;
    height: 9rem;
    object-fit: contain;
  }

  /* 商品名が2行になるものがあるため、2行分の高さで固定してカードの高さを揃える */
  .megamenu .mcard[href*="/sawayaka-refresh-sheet/"] .mcard__name br,
  .megamenu .mcard[href*="/harix55-fixing-sheet/"] .mcard__name br {
    display: none;
  }

  .megamenu .mcard__name {
    display: block;
    min-height: 3.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #333;
    white-space: normal;
  }
}

@media (min-width: 768px) {
  /* テキストだけのドロップダウン（おくすりコラム／会社案内） */
  .megamenu--text {
    padding: 2.6rem 3.6rem 2.8rem;
  }

  .mlist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 24rem));
    gap: 1.4rem 4rem;
    list-style: none;
  }

  /* 2行になる項目があるため、2行分の高さで固定して並びを揃える */
  .megamenu--text .mlist a {
    display: flex;
    align-items: center;
    min-height: 5.05rem;
    padding: 1rem 2.4rem 1rem 1.4rem;
    border-radius: 0.5rem;
    background: #fff;
    color: #333;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: normal;
    transition: box-shadow 0.2s, color 0.2s;
  }

  .megamenu--text .mlist a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.2rem;
    width: 0.6rem;
    height: 0.6rem;
    margin-top: -0.35rem;
    border-top: 1px solid #1565A0;
    border-right: 1px solid #1565A0;
    transform: rotate(45deg);
  }

  .mlist li {
    position: relative;
  }

  .megamenu--text .mlist a:hover {
    opacity: 1;
    color: #1565A0;
    box-shadow: 0 0.3rem 0.9rem rgba(21, 101, 160, 0.14);
  }
}

@media (min-width: 768px) {
  /* おくすりコラム … 横長のメイン画像2枚を中央に並べる */
  .megamenu--center .megamenu__inner {
    justify-content: center;
  }

  /* カードの寸法は会社案内（.megamenu__grid--five）と同じに揃える */
  .megamenu__grid--pair {
    grid-template-columns: repeat(2, 25.4rem);
    gap: 1.2rem;
  }

  .megamenu__grid--pair .mcard__img img {
    height: 14rem;
    object-fit: cover;
    border-radius: 0.4rem;
  }

  /* コラムのタイトルは2件とも1行。2行分の枠を確保すると下に余白が出るので詰める */
  .megamenu__grid--pair .mcard__name {
    min-height: 0;
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  /* 会社案内 … 5ページを横一列 */
  .megamenu__grid--five {
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
  }

  .megamenu__grid--five .mcard__img img {
    height: 14rem;
    object-fit: cover;
    border-radius: 0.4rem;
  }

  /* 5件とも1行に収まるので、2行分の枠は確保しない（下に余白が出るため） */
  .megamenu__grid--five .mcard__name {
    min-height: 0;
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  /* ドロップダウンが開いているあいだは、ヘッダーバーの下の角を伸ばしてパネルと繋げる */
  .header__bar:has(.nav__item--drop:hover),
  .header__bar:has(.nav__item--drop:focus-within) {
    border-radius: 0.7rem 0.7rem 0 0;
  }
}

@media (min-width: 768px) {
  /* 主な商品（ハリックス55・ビーソフテン）の画像を110%に */
  .megamenu__col--main .mcard__img img {
    height: 9.9rem;
  }

  /* ハリックス55は上が詰まって見えるので、元の約92%（95%×97%）に */
  .megamenu__col--main .mcard:first-child .mcard__img img {
    height: 9.123rem;
  }
}

@media (min-width: 768px) {
  /* 商品名1行で上下の余白が揃う高さに固定し、中身を天地中央に置く。2行の商品は余白が少し減る */
  .megamenu__col--main .mcard,
  .megamenu__col--other .mcard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 15.375rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .megamenu__col--main .mcard__name,
  .megamenu__col--other .mcard__name {
    min-height: 0;
  }
}

@media (min-width: 768px) {
  /* サステナビリティの本文が1行増えたぶん、ボタンを1行分（3rem）下げる */
  .sustainability__body .btn-more {
    margin-top: 3rem;
  }
}

/* ============================================================
   ドロワーの下層メニュー（アコーディオン）
   ============================================================ */

.drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ＋／− のボタン。線2本を重ねて、開いたら縦線だけ消す */
.drawer__toggle {
  position: relative;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.drawer__toggle::before,
.drawer__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 0.15rem;
  background: var(--blue-main);
  transform: translate(-50%, -50%);
  transition: transform 0.3s, opacity 0.3s;
}

.drawer__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.drawer__item.is-open .drawer__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* 開閉する中身。height を動かすので overflow は隠す */
.drawer__sub {
  overflow: hidden;
  height: auto;
  transition: height 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.drawer__sub[hidden] {
  display: none;
}

.drawer__sublist {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0 0 0 1.2rem;
}

.drawer__sublist li + li {
  margin-top: 1.3rem;
}

.drawer__item .drawer__sublist a {
  display: block;
  color: var(--blue-main);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08rem;
}

@media (prefers-reduced-motion: reduce) {
  .drawer__sub {
    transition: none;
  }
}

/* ドロワーのサイト内検索（SP）
   ふだんから出しておき、右端の虫眼鏡で検索する。枠の見た目はPC版に合わせる */
.drawer__search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 4.6rem;
  margin: 2.4rem 0 0;
  border: 1px solid #ddd;
  border-radius: 2.3rem;
  background: #fff;
}

.drawer__search-bar .search-bar {
  padding: 0 0.8rem 0 1.8rem;
}

.search-bar__submit {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.search-bar__submit svg {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  fill: var(--blue-main);
}

@media (min-width: 768px) {
  .os-card {
    transition: opacity 0.3s;
  }

  .os-card.fade-up:hover,
  .os-card:hover {
    opacity: 0.7;
  }
}

@media (max-width: 767px) {
  /* SP版の商品カード画像。
     .os-card:nth-child(n) の絶対配置は19rem枠を前提にした数値で、
     SPの15rem枠でははみ出す。PC版（.os-list__grid 側）と同じく枠内に収める。
     nth-child 指定と同じ詳細度にするため .os-list__grid から書いている */
  .os-list__grid .os-card .os-card__img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }

  .os-list__grid .os-card .os-card__img img {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: none;
  }
}

@media (max-width: 767px) {
  /* かぜペッタンだけ画像が縦長で枠いっぱいになり、他より上に寄るため29px下げる（SP版のみ） */
  .os-list__grid .os-card:nth-child(7) .os-card__img {
    margin-top: 2.9rem;
  }
}

@media (min-width: 768px) {
  /* 新テイパップA：SP版で「大判」を折り返させるため商品名を3行で持っている。
     PC版は幅が足りるので、2つ目の改行を消して従来どおり2行で見せる */
  .page-new-teipap .os-card__name br:nth-of-type(2) {
    display: none;
  }
}

@media (max-width: 767px) {
  /* SP版は .os-card__name br を一律 display:none にしている。
     新テイパップAは1つ目の改行だけ戻し、PC版と同じ「新テイパップA」「＜クール＞ 大判」にする */
  .page-new-teipap .os-card:nth-child(1) .os-card__name br:nth-of-type(1) {
    display: inline;
  }
}

@media (max-width: 767px) {
  /* ヒューマンベース：SP版は .os-card__name br を一律 display:none にしているため、
     3商品とも改行が消えて折り返していた。PC版と同じ「ヒューマンベース」で改行させる */
  .page-human-base .os-card__name br {
    display: inline;
  }
}

@media (max-width: 767px) {
  /* ロキトラッドL2：SP版で商品が小さく見えるため画像を120%にする（枠からはみ出す分は見せる） */
  .page-rocitorad .os-list__grid .os-card .os-card__img {
    overflow: visible;
  }

  .page-rocitorad .os-list__grid .os-card .os-card__img img {
    max-width: 120%;
    max-height: 120%;
  }
}

/* 傷パッド大判のホバー。枠全体を浮かせて影をつける。
   display は元のレイアウトを壊すので指定しない */
.hb-other__card {
  transition: box-shadow 0.3s, transform 0.3s;
}

.hb-other__card:hover {
  box-shadow: 0 0.6rem 1.8rem rgba(21, 101, 160, 0.16);
  transform: translateY(-0.4rem);
}

@media (prefers-reduced-motion: reduce) {
  .hb-other__card {
    transition: none;
  }
}

@media (max-width: 767px) {
  .ca-access__item::before {
    width: 1.0rem;
  }

  .ca-access__item {
    padding-left: 1.0rem;
    text-indent: -1.0rem;
  }
}


/* ======================================
   コラム記事・研究開発 背景と囲みのルール（2026-09-24）
   導入文 … #E1E8F0 のベタ（従来どおり）
   囲み   … ベージュ（#F9F0E5）のベタ。見出しの頭に青い線
   箇条書き … 囲まない。「見出し：本文」は見出しを太字で1行目に
   ====================================== */

/* ---- コラム：囲み（導入文の青と分けるためベージュ。FVより少しくすませた色） ---- */
.art-box {
  background: #f9f0e5;
}

.art-box__title {
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid rgba(21, 101, 160, 0.35);
}

/* ---- コラム：上の辺が波の形で、下に向かって白に消えるベージュの背景（見出しで指定） ----
   背景は画面幅いっぱい。横スクロールを出さないよう main で切る */
main:has(.art-band) {
  overflow-x: clip;
}

.art-band {
  position: relative;
  isolation: isolate;
  margin-top: 12rem;
  padding: 16rem 0 16rem;
}

.art-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    url("../img/col-band-wave-top.svg") top / 100% 12rem no-repeat,
    /* 半分ほどはベージュのまま、そこから下に向かって白へ */
    linear-gradient(#f9f0e5 0%, #f9f0e5 50%, #fff 100%) bottom / 100% calc(100% - 11.8rem) no-repeat;
}

.art-band__inner > :first-child {
  margin-top: 0;
}

/* カードを並べる囲みは、どこでも「白い囲み＋紺の線のカード」にそろえる（同じ部品）。
   背景の上の囲みも白にする。囲みの余白は残すので、カードの幅はどこでも同じ */
.art-box:has(.art-box__list),
.art-band .art-box {
  background: #fff;
}

.art-box__list li {
  background: #fff;
  border: 1px solid var(--blue-main);
}

/* 白いページの上では白い囲みが見えないので、左右と上下の余白をなくしてカードの端を本文にそろえる
   （背景の上の囲みは、白い囲みが見えるのでそのまま） */
.art > .art-box:has(.art-box__list) {
  padding: 0;
}

/* コラム記事の「おくすりコラムへ」ボタンの上を 5rem 広げる（通常 6.4rem → 11.4rem、背景のあとは -2rem → 3rem） */
.art > .msg-back {
  margin-top: 11.4rem;
}

.art > .art-band + .msg-back {
  margin-top: 3rem;
}

/* 背景のあとのセクションは、グラデーションの終わりにかけて少し上に寄せる */
.art-band + * {
  position: relative;
  z-index: 1;
  margin-top: -2rem;
}

/* 囲みの見出しの、カッコで始まる補足の行 */
.art-box__title-note {
  /* 1行目との行間を少し詰める（元の間隔と、詰めすぎた間隔の中間） */
  display: block;
  margin-top: 0.2em;
  font-size: 0.85em;
  line-height: 1.4;
}

/* ---- コラム：囲みの中のカード（「・見出し：本文」の行） ---- */
.art-box__list li {
  padding: 2.8rem 3rem 3rem;
}

.art-card__title {
  padding-bottom: 1.4rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid #d9e3ee;
  /* 文節で改行するので、両端ぞろえだと字間が開く。見出しだけ左ぞろえ */
  text-align: left;
  word-break: auto-phrase;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--blue-main);
}

/* PCでは見出し欄を2行分の高さにそろえ、1行のときは上下中央に置く。
   横並びのカードで、区切り線が同じ位置に来るようにするため */
@media (min-width: 768px) {
  .art-card__title {
    display: flex;
    align-items: center;
    /* 2行（24px×2）＋下の余白14px。2行の組みで1px増えることがあるので少し余裕を持たせる */
    min-height: 6.4rem;
  }
}

.art-card__text {
  text-align: justify;
  font-size: 1.5rem;
  line-height: 1.8;
}

/* ---- コラム：本文（囲みなし）を左、まとめの表を囲みに入れて右 ---- */
.art-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.6rem;
  align-items: center;
  margin-top: 3.2rem;
}

.art-split__box {
  margin-top: 0;
}

/* 見出し＋文章を左、箇条書きを右。箇条書きの天を見出しの文字の天にそろえる
   （見出しは 2.8rem・行の高さ1.5 なので、文字の天は行の天から 0.7rem 下） */
.art-lgroup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 5.6rem;
  margin-top: 8.0992rem;
}

.art-lgroup__h {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
}

.art-lgroup__text {
  grid-column: 1;
  grid-row: 2;
  margin-top: 3.2432rem;
}

.art-lgroup__list {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 0.7rem;
}

.art-lgroup__list .art-list {
  margin-top: 0;
}

.art-lgroup__list .art-list li {
  text-align: left;
  word-break: auto-phrase;
}

/* 箇条書きを右に置く組は、文章を上ぞろえにして見出しとの間を本文と同じに */
.art-split:has(.art-split__list) {
  align-items: start;
}

.art-h + .art-split {
  margin-top: 3.2432rem;
}

.art-split__list .art-list {
  margin-top: 0;
}

/* 幅が狭いので、カタカナ語の途中で折り返さないように文節で改行 */
.art-split__list .art-list li {
  text-align: left;
  word-break: auto-phrase;
}

.art-num {
  counter-reset: art-num;
  list-style: none;
  margin: 0;
  padding: 0;
  /* 枠の高さは一番高いものにそろえる */
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1.2rem;
}

/* 番号、短い縦線、タイトルの順に並べる */
.art-num li {
  counter-increment: art-num;
  position: relative;
  list-style: none;
  padding: 2rem 2.4rem 2rem 8.2rem;
  border-radius: 0.8rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.art-num li::before {
  content: counter(art-num, decimal-leading-zero);
  position: absolute;
  left: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.8rem;
  color: var(--blue-main);
  font-size: 1.92rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.art-num li::after {
  content: "";
  position: absolute;
  left: 6.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.8rem;
  background: var(--blue-main);
}

.art-num__title {
  word-break: auto-phrase;
  font-size: 1.44rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--blue-main);
}

.art-num__text {
  margin-top: 0.6rem;
  word-break: auto-phrase;
  font-size: 1.4rem;
  line-height: 1.7;
}

/* ---- コラム：写真の下の図（小さなカードを横に並べる） ---- */
.art-sub {
  margin-top: 2.4rem;
  padding: 2rem;
}

.art-sub__title {
  margin-bottom: 1.4rem;
  text-align: center;
  font-size: 1.76rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--blue-main);
}

.art-sub .art-box__list {
  justify-content: center;
  gap: 2.4rem;
}

/* 項目は白い正円の中に名前だけ */
.art-sub .art-box__list li {
  flex: 0 0 12rem;
  width: 12rem;
  height: 12rem;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--blue-main);
}

/* ---- コラム：本文中の箇条書き ---- */
.art-list {
  padding-left: 0;
}

.art-list li {
  list-style: none;
  position: relative;
  padding-left: 1.8rem;
}

.art-list li::before {
  /* ▶の文字は端末によって絵文字に化けるので、三角形はCSSで描く */
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.9rem;
  width: 0.8rem;
  height: 0.9rem;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--blue-main);
}

.art-list li + li {
  margin-top: 1.2rem;
}

/* 箇条書きはカタカナ語の途中で折り返さないよう文節で改行（両端ぞろえだと字間が開くので左ぞろえ） */
.art-list li {
  text-align: left;
  word-break: auto-phrase;
}

/* 見出しと組まない本文＋写真：写真は横長（4:3）に切り抜き、天を本文1行目の文字の天にそろえる
   （本文 1.5rem・行の高さ1.8 なので、文字の天は行の天から 0.6rem 下） */
.art-row--wide .art-row__img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
}

/* PCでは、写真を本文1行目の文字の天から左の列の下端まで伸ばす */
@media (min-width: 768px) {
  .art-row--wide {
    align-items: stretch;
  }

  .art-row--wide .art-row__img {
    display: flex;
    flex-direction: column;
    margin-top: 0.6rem;
  }

  .art-row--wide .art-row__img img {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    contain: size;
  }
}

/* 写真を本文の高さに合わせる組では、縦長の写真でも写真の高さで組を伸ばさない */
@media (min-width: 768px) {
  .art-group--fill .art-group__img img {
    contain: size;
  }
}

.art-list__term {
  font-weight: 700;
  color: var(--blue-main);
}

/* 本文中の箇条書きは、青の罫線で囲んで項目の間に罫線 */
.art-list {
  margin-top: 2.4rem;
  padding: 1.6rem 2.4rem;
  border: 1px solid var(--blue-main);
  border-radius: 0.8rem;
}

.art-list li {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  font-size: 1.4rem;
}

/* 外側を囲んでいるので、罫線は項目の間だけ */
.art-list li + li {
  margin-top: 0;
  border-top: 1px solid #d9e3ee;
}

.art-list li::before {
  top: 2.4rem;
}

/* 成分名のあとで改行する */
.art-list__term::after {
  content: "";
  display: block;
}

/* ---- 研究開発：キャッチのあとの本文なので、背景ベタを敷かない ---- */
.page-research .rd-body__lead {
  background: none;
  border-radius: 0;
  padding: 0;
}

/* 写真の上端を見出しの文字の上端にそろえる（行の高さ30pxと文字20pxの差の半分だけ下げる） */
.rd-body__policy-body {
  flex: 1;
  min-width: 0;
}

/* 研究開発の h2 は、コラムの h2（.art-h）と同じ形にそろえる。下線なし */
.page-research .rd-body__lead-heading,
.page-research .rd-body__heading {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 767px) {
  .page-research .rd-body__lead-heading,
  .page-research .rd-body__heading {
    font-size: 2.2rem;
    line-height: 1.5;
  }
}

/* 囲みの中の青い見出しに、少しだけ字間（コラムの見出しと同じ 0.05em） */
.page-research .rd-body__subheading,
.page-research .rd-body__policy-list li strong {
  letter-spacing: 0.05em;
}


/* h3 はすべて「研究開発の4つの方針」の形（縦線なし、下に薄い横線）。コラムの囲みの見出しも同じ */
.page-research .rd-body__subheading {
  border-left: 0;
  padding-left: 0;
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  /* メインの青（#1565a0）を薄くした線 */
  border-bottom: 1px solid rgba(21, 101, 160, 0.35);
}

@media (min-width: 768px) {
  .page-research .rd-body__policy-wrap--with-img {
    align-items: flex-start;
    /* 上の余白を左右（4rem）と同じにする */
    padding-top: 4rem;
  }

  /* 「研究開発の4つの方針」の囲みは、上下左右の余白を 4rem でそろえる */
  .page-research #rd-sec2 .rd-body__policy-wrap {
    padding: 4rem;
  }

  /* 4つの方針（写真＋本文）と、下の白い囲みの間 */
  .page-research .rd-body__policy-card {
    margin-top: 4rem;
  }

  /* 「必要な情報を、分かりやすく」：上下の余白を 4rem でそろえ、
     写真は文字の塊の高さ（見出しの文字の天〜本文の地）に合わせて縮める。縦横比はそのまま */
  .page-research .rd-body__policy-wrap--with-img {
    padding-bottom: 4rem;
  }

  /* 写真の高さ＝見出しの文字の天〜本文の地（写真の幅で本文の折り返しが変わるので、計測で決めた値）。
     remで組まれているので 768px 以上ならどの幅でも同じ。本文を変えたらここも測り直す */
  .page-research .rd-body__policy-wrap--with-img .rd-body__policy-wrap-img {
    flex: 0 0 auto;
    height: 29.47rem;
    aspect-ratio: 680 / 898;
    margin-top: 0.5rem;
  }
}

/* 家族写真は空が広いので、切り取る位置を下に寄せて人物を枠に収める */
#rd-sec4 .rd-body__photo img {
  object-position: center 80%;
}

/* ---- 研究開発：セクションの余白をそろえる ---- */
.page-research .rd-body__wrap {
  padding: 0;
}

.page-research .rd-body__section,
.page-research #rd-sec2,
.page-research #rd-sec5 {
  margin: 0;
  padding: 12rem 0 0;
}

.page-research #rd-sec5 {
  padding-top: 8rem;
  padding-bottom: 4rem;
}

.page-research .rd-body__policy-wrap {
  margin-bottom: 0;
  background: #f9f0e5;
}

.page-research .rd-body__subheading {
  line-height: 1.5;
}

@media (max-width: 767px) {
  .art-box__list li {
    padding: 2rem;
  }

  .art-split {
    display: block;
  }

  .art-split,
  .art-h + .art-split {
    margin-top: 2rem;
  }

  .art-lgroup {
    display: block;
    margin-top: 6rem;
  }

  .art-lgroup__text {
    margin-top: 2rem;
  }

  .art-lgroup__list {
    margin-top: 2rem;
  }

  .art-split__box {
    margin-top: 2.5rem;
  }

  .art-num li {
    padding: 1.6rem 1.6rem 1.6rem 6.4rem;
  }

  .art-num li::before {
    left: 1.6rem;
    width: 2.4rem;
    font-size: 1.68rem;
  }

  .art-num li::after {
    left: 4.8rem;
    height: 2.4rem;
  }

  .art-num__title {
    font-size: 1.35rem;
  }

  .art-num__text {
    font-size: 1.3rem;
  }

  .art-sub {
    margin-top: 2rem;
    padding: 1.6rem;
  }

  .art-band {
    margin-top: 7rem;
    padding: 8rem 0 8rem;
  }

  .art-band::before {
    background:
      url("../img/col-band-wave-top.svg") top / 100% 5rem no-repeat,
      linear-gradient(#f9f0e5 0%, #f9f0e5 50%, #fff 100%) bottom / 100% calc(100% - 4.8rem) no-repeat;
  }

  /* SPは背景のあとのセクションを 7rem 上に寄せる。
     見出しの上の余白（6rem）が外に抜けて重なるので、見出し側を 0 にして組の余白だけで決める */
  .art-band + * {
    position: relative;
    z-index: 1;
    margin-top: -1rem;
  }

  .art-band + .art-group .art-group__h {
    margin-top: 0;
  }

  .art-sub__title {
    margin-bottom: 1.2rem;
    font-size: 1.65rem;
  }

  .art-sub .art-box__list {
    display: flex;
    gap: 1.6rem;
  }

  .art-sub .art-box__list li {
    flex-basis: 9rem;
    width: 9rem;
    height: 9rem;
    padding: 0;
    font-size: 1.5rem;
  }

  .art-sub .art-box__list li + li {
    margin-top: 0;
  }

  .art-card__title {
    padding-bottom: 1rem;
    margin-bottom: 1.2rem;
    font-size: 1.6rem;
  }

  .art-card__text {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .art-list li::before {
    top: 0.95rem;
  }

  .art-list li + li {
    margin-top: 1rem;
  }

  .art-list {
    margin-top: 2rem;
    padding: 1rem 1.6rem;
  }

  .art-list li {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    font-size: 1.4rem;
    line-height: 1.8;
  }

  .art-list li + li {
    margin-top: 0;
  }

  .art-list li::before {
    top: 2.25rem;
  }

  .page-research .rd-body__wrap {
    padding: 0 2rem;
  }

  .page-research .rd-body__section,
  .page-research #rd-sec2,
  .page-research #rd-sec5 {
    padding: 6rem 0 0;
  }

  .page-research #rd-sec5 {
    padding-bottom: 2rem;
  }

  .page-research .rd-body__policy-wrap {
    margin-bottom: 0;
  }

  .page-research .rd-body__lead {
    padding: 0;
  }
}

/* オムニード一覧：LXテープ（5番目）を削除して後ろの2件が繰り上がったため、
   番号指定でかかっていた見た目を IDプラスター（5番目）・かぜペッタン（6番目）に付け替える */
@media (min-width: 768px) {
  .page-omneed .os-card:nth-child(5) .os-card__name {
    margin-top: 0.4108rem;
  }

  .page-omneed .os-card:nth-child(5) .os-card__img img {
    transform: translateY(-1rem) scale(0.9);
  }

  .page-omneed .os-card:nth-child(6) .os-card__name {
    margin-top: 0.4108rem;
  }

  /* FBパップの「（ハーフサイズ）12枚入」を1行に収めるため、枚数欄をカード右の余白へ1rem広げる */
  .page-omneed .os-card__meta {
    margin-right: -1rem;
  }

  .page-omneed .os-card__spec {
    white-space: nowrap;
  }

  /* 「（ハーフサイズ）」の「（」の左にある字の空きを詰めて、右の余白を作る */
  .page-omneed .os-card:nth-child(3) .os-card__spec {
    margin-left: -0.5em;
  }
}

@media (max-width: 767px) {
  .page-omneed .os-card:nth-child(5) .os-card__name br {
    display: inline;
  }

  .page-omneed .os-card:nth-child(6) .os-card__name br {
    display: none;
  }

  .page-omneed .os-list__grid .os-card:nth-child(6) .os-card__img {
    margin-top: 2.9rem;
  }

  .page-omneed .os-list__grid .os-card:nth-child(6) .os-card__extlink {
    top: calc(21.175rem + 2.9rem);
  }
}

/* フィスター個別ページ：PC版だけ写真を10px上げる */
@media (min-width: 768px) {
  .os-list__grid .os-card .os-card__img img[src*="fister-lx-2610"] {
    position: relative;
    top: -1rem;
  }

  .os-list__grid .os-card .os-card__img:has(img[src*="fister-lx-2610"]) {
    overflow: visible;
  }
}

/* 利用規約・プライバシーポリシー・クッキーポリシー：SP版はサイトマップと同じFV背景だけにする。
   共通の水色の飾り（.page-hero::before）がFVの下にはみ出して見えるため消す */
@media (max-width: 767px) {
  .page-hero--terms::before {
    display: none;
  }
}

/* --w の計算（画面幅 ÷ px）を読めないブラウザ（Firefox）向け。
   読めないと --w を使う指定が全部無効になり、FVが崩れる。
   読めないブラウザは js/main.js が画面幅から --w を計算して入れる */
@media (min-width: 1830px) {
  .fv {
    --w: 1;
  }
}

@supports (z-index: calc(1px / 1px)) {
  @media (min-width: 768px) {
    .fv {
      --w: clamp(0, (100vw - 1800px) / 30px, 1);
    }
  }
}

/* 研究開発 SP：本文15px・h2 23px（コラム・みなさまへと合わせる） */
@media (max-width: 767px) {
  .page-research .rd-body__lead-heading,
  .page-research .rd-body__heading,
  .page-research #rd-sec3 .rd-body__heading {
    font-size: 2.3rem;
    line-height: 1.5;
  }

  .page-research .rd-body__lead > p,
  .page-research .rd-body__policy-card > p,
  .page-research .rd-body__policy-wrap-text > p {
    font-size: 1.5rem;
    line-height: 1.8;
  }
}

/* フェルビナク詳細 SP：特徴の文中の改行をなくす */
@media (max-width: 767px) {
  .od-detail__features-body p br {
    display: none;
  }
}

/* 傷パッド SP：本文15px、その見出しを1px大きく */
@media (max-width: 767px) {
  .hb-feature__subtitle,
  .hb-feature__row--cell .hb-feature__subtitle,
  .hb-feature__row--peel .hb-feature__subtitle,
  .hb-feature__fit-title,
  .hb-usage__cut-title {
    font-size: 1.8rem;
  }

  .hb-feature__desc,
  .hb-feature__row--cell .hb-feature__desc,
  .hb-feature__row--peel .hb-feature__desc,
  .hb-feature__row--absorb .hb-feature__desc,
  .hb-feature__fit-text .hb-feature__desc,
  .hb-usage__desc,
  .hb-usage__step--2 .hb-usage__desc,
  .hb-usage__cut-desc {
    font-size: 1.5rem;
    line-height: 1.8;
  }
}