@charset "UTF-8";
/************************************************

	バスらぎシリコーンマット LP 修正版(v3) 専用スタイル（自己完結・単独読み込み）

	2026-08-26 山崎産業様ご指示（バスらぎLP修正事項.xlsx）反映版 + 厚手の重量を約1,130gに確定。
	現行版 lp-basuragi.css は読み込まず、このファイル1本で完結する。
	前半＝現行LPのベーススタイル（セレクタは .lp-basuragi-v4 に統一）
	後半＝修正版(v3)の差分スタイル

	--- 以下、ベーススタイル ---
*************************************************/
.lp-basuragi-v4 main {
  padding-top: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", YuGothic, Meiryo, sans-serif;
  color: #3a3f5c;
  line-height: 1.9;
  overflow: hidden;
}

/* 見出し共通 */
.lp-h {
  font-weight: 900;
  font-size: 2em;
  line-height: 1.5;
  color: #3a3f5c;
}
.lp-h span {
  display: block;
  font-size: .5em;
  font-weight: 700;
  color: #7d87c4;
  letter-spacing: .15em;
}
.lp-h em {
  font-style: normal;
  color: #7d87c4;
}
.lp-h-center {
  margin-bottom: 1.8em;
  text-align: center;
}
.lp-h-center::after {
  content: "";
  display: block;
  margin: .5em auto 0;
  width: 3em;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #7d87c4, #a9d4e8);
}
.lp-h-invert {
  color: #fff;
}

.lp-inner {
  margin: 0 auto;
  padding: 5em 2em;
  max-width: 1100px;
}

/* CTAボタン */
.lp-cta-btn {
  display: inline-block;
  padding: .9em 2.2em;
  color: #000;
  font-weight: 700;
  font-size: 1.1em;
  background: #ffbb00;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255, 187, 0, .45);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.lp-cta-btn:link, .lp-cta-btn:visited {
  color: #000;
}
.lp-cta-btn:hover {
  color: #fff;
  background: #34cdd7;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(52, 205, 215, .5);
}
.lp-cta-btn-lg {
  padding: 1.1em 3em;
  font-size: 1.3em;
}

/************************************************
	ヒーロー
*************************************************/
.lp-hero {
  position: relative;
  padding-top: 8.5em; /* 固定ヘッダー分 */
  background: linear-gradient(160deg, #eef3fb 0%, #dfe7f6 45%, #cdd8f0 100%);
}
/* 湯けむり泡モチーフ */
.lp-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.lp-hero-bg::before,
.lp-hero-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15) 70%);
  animation: lp-float 9s ease-in-out infinite;
}
.lp-hero-bg::before {
  top: 12%;
  right: 6%;
  width: 220px;
  height: 220px;
}
.lp-hero-bg::after {
  bottom: 18%;
  left: 4%;
  width: 140px;
  height: 140px;
  animation-delay: -4s;
}
@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

.lp-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3em;
  margin: 0 auto;
  padding: 4em 2em 7em;
  max-width: 1100px;
}
.lp-hero-copy {
  flex: 1 1 52%;
}
.lp-hero-eyebrow {
  margin-bottom: .6em;
  font-size: 1.3em;
  font-weight: 700;
  color: #7d87c4;
  letter-spacing: .12em;
}
.lp-hero-title {
  font-size: 2.7em;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .02em;
}
.lp-hero-title em {
  font-style: normal;
  color: #7d87c4;
  text-decoration: underline;
  text-decoration-color: #ffbb00;
  text-decoration-thickness: 6px;
  text-underline-offset: 6px;
}
.lp-hero-name {
  margin: .8em 0 .5em;
  font-weight: 900;
  color: #3a3f5c;
}
.lp-hero-name span {
  margin-left: .35em;
  font-size: .55em;
}
.lp-hero-lead {
  margin-bottom: 1.4em;
}
.lp-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  margin-bottom: 1.8em;
}
.lp-badge {
  padding: .35em 1em;
  font-weight: 700;
  color: #7d87c4;
  background: #fff;
  border: 2px solid #7d87c4;
  border-radius: 999px;
}
.lp-hero-img {
  flex: 1 1 48%;
}
.lp-hero-img img {
  width: 100%;
}
.lp-hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
}
.lp-hero-wave svg {
  width: 100%;
  height: 90px;
}

/************************************************
	お悩み
*************************************************/
.lp-worry {
  background: #fff;
}
.lp-worry-list {
  display: flex;
  gap: 2em;
}
.lp-worry-list li {
  flex: 1;
  padding: 2.2em 1.6em;
  text-align: center;
  background: #f2f5fb;
  border-radius: 20px;
}
.lp-worry-list li i {
  display: block;
  margin-bottom: .6em;
  font-size: 2.2em;
  color: #7d87c4;
}
.lp-worry-answer {
  margin-top: 2.5em;
  text-align: center;
  font-size: 1.5em;
  font-weight: 900;
}
.lp-worry-answer strong {
  color: #7d87c4;
  text-decoration: underline;
  text-decoration-color: #ffbb00;
  text-decoration-thickness: 5px;
  text-underline-offset: 5px;
}

/************************************************
	特長
*************************************************/
.lp-feature {
  background: linear-gradient(180deg, #eef3fb 0%, #e4ebf7 100%);
}
.lp-feature-list {
  display: flex;
  flex-direction: column;
  gap: 3em;
}
.lp-feature-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.5em;
  margin-top: 1em; /* はみ出す丸番号の分 */
  padding: 2.5em;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(58, 63, 92, .08);
}
.lp-feature-list li:nth-child(even) {
  flex-direction: row-reverse;
}
.lp-feature-num {
  position: absolute;
  top: -1.1em;
  left: 1em;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.2em;
  height: 2.2em;
  font-size: 1.9em;
  font-weight: 900;
  color: #000;
  background: #ffbb00;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(58, 63, 92, .25);
}
.lp-feature-list figure {
  flex: 0 0 42%;
}
.lp-feature-list figure img {
  width: 100%;
  border-radius: 16px;
}
.lp-feature-list h4 {
  margin-bottom: .5em;
  font-size: 1.45em;
  font-weight: 900;
  line-height: 1.5;
}
.lp-feature-list h4 em {
  font-style: normal;
  color: #7d87c4;
}

/************************************************
	テクスチャ
*************************************************/
.lp-texture {
  display: flex;
  align-items: stretch;
  background: #3a3f5c;
}
.lp-texture-img {
  flex: 1 1 50%;
  min-height: 420px;
  background-size: cover;
  background-position: center;
}
.lp-texture-copy {
  flex: 1 1 50%;
  padding: 5em 4em;
  color: #fff;
}
.lp-texture-copy .lp-h {
  margin-bottom: 1em;
  color: #fff;
}
.lp-texture-copy .lp-h span {
  color: #a9d4e8;
}

/************************************************
	使えるシーン
*************************************************/
.lp-scene {
  background: #fff;
}
.lp-scene-list {
  display: flex;
  gap: 2.5em;
}
.lp-scene-list li {
  flex: 1;
  overflow: hidden;
  background: #f2f5fb;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(58, 63, 92, .15);
}
.lp-scene-list figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.lp-scene-list h4 {
  padding: 1em 1.4em 0;
  font-size: 1.3em;
  font-weight: 900;
  color: #7d87c4;
}
.lp-scene-list p {
  padding: .5em 1.6em 1.6em;
}
.lp-scene-note {
  margin-top: 2em;
  text-align: center;
  font-weight: 700;
}

/************************************************
	仕様
*************************************************/
.lp-spec {
  background: linear-gradient(180deg, #eef3fb 0%, #e4ebf7 100%);
}
.lp-spec-grid {
  display: flex;
  align-items: center;
  gap: 3em;
}
.lp-spec-img {
  flex: 1 1 45%;
}
.lp-spec-img img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(58, 63, 92, .12);
}
.lp-spec-table {
  flex: 1 1 55%;
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(58, 63, 92, .08);
}
.lp-spec-table th,
.lp-spec-table td {
  padding: 1em 1.4em;
  text-align: left;
  border-bottom: 1px solid #e4ebf7;
}
.lp-spec-table tr:last-child th,
.lp-spec-table tr:last-child td {
  border-bottom: none;
}
.lp-spec-table th {
  width: 9em;
  color: #7d87c4;
  font-weight: 700;
  background: #f2f5fb;
}

/************************************************
	価格・CTA
*************************************************/
.lp-price {
  background: linear-gradient(160deg, #5c669e 0%, #7d87c4 60%, #8fa4d6 100%);
}
.lp-price .lp-h-center::after {
  background: #ffbb00;
}
.lp-price-card {
  margin: 0 auto;
  padding: 3em 2.5em;
  max-width: 620px;
  text-align: center;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(30, 34, 60, .35);
}
.lp-price-name {
  font-size: 1.25em;
  font-weight: 900;
}
.lp-price-value {
  margin: .3em 0 1.2em;
  font-weight: 900;
  color: #3a3f5c;
}
.lp-price-value small {
  display: block;
  font-size: .95em;
  color: #7d87c4;
}
.lp-price-value em {
  font-style: normal;
  font-size: 3.4em;
  line-height: 1.2;
  color: #7d87c4;
}
.lp-price-value span {
  font-size: 1.2em;
}
.lp-price-tel {
  margin-top: 1.6em;
}
.lp-price-tel a {
  font-size: 1.3em;
  font-weight: 900;
  color: #3a3f5c;
}
.lp-price-tel small {
  color: #888;
}

/************************************************
	スクロール表示アニメーション
*************************************************/
.lp-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.lp-reveal.active {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .lp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .lp-hero-bg::before,
  .lp-hero-bg::after {
    animation: none;
  }
}

/************************************************
	SP
*************************************************/
@media screen and (max-width: 780px) {
  .lp-hero-inner {
    flex-direction: column;
    padding: 3em 1.5em 6em;
  }
  .lp-hero-title {
    font-size: 2em;
  }
  .lp-worry-list,
  .lp-scene-list,
  .lp-spec-grid {
    flex-direction: column;
  }
  .lp-feature-list li,
  .lp-feature-list li:nth-child(even) {
    flex-direction: column;
    padding: 2.5em 1.5em 2em;
  }
  .lp-feature-list figure {
    flex: none;
    width: 100%;
  }
  .lp-texture {
    flex-direction: column;
  }
  .lp-texture-img {
    min-height: 260px;
  }
  .lp-texture-copy {
    padding: 3em 1.8em;
  }
  .lp-inner {
    padding: 4em 1.5em;
  }
  .lp-h {
    font-size: 1.6em;
  }
}

/************************************************
	style.css の汎用装飾をLP内で打ち消す
	（ヘッダー/フッターには影響させない）
*************************************************/
.lp-basuragi-v4 main section {
  padding: 0;
}
.lp-basuragi-v4 main section:first-child {
  background: linear-gradient(160deg, #eef3fb 0%, #dfe7f6 45%, #cdd8f0 100%);
}
.lp-basuragi-v4 main h2,
.lp-basuragi-v4 main h3 {
  display: block;
  margin: 0;
  padding: 0;
  border-top: none;
  border-bottom: none;
  font-size: inherit;
  color: inherit;
  text-align: inherit;
}
.lp-basuragi-v4 main h3.lp-h {
  font-size: 2em;
}
.lp-basuragi-v4 main h3.lp-h-center {
  margin-bottom: 1.8em;
  text-align: center;
}
.lp-basuragi-v4 main h4 {
  font-size: inherit;
  margin-bottom: 0;
}
.lp-basuragi-v4 main .lp-feature-list h4 {
  margin-bottom: .5em;
  font-size: 1.45em;
}
.lp-basuragi-v4 main .lp-scene-list h4 {
  font-size: 1.3em;
}
.lp-basuragi-v4 main a {
  transition: none;
}

/* リセット後の再指定 */
.lp-basuragi-v4 main h2.lp-hero-title {
  font-size: 2.7em;
  font-weight: 900;
  line-height: 1.45;
}
.lp-feature-text {
  flex: 1;
}
@media screen and (max-width: 780px) {
  .lp-basuragi-v4 main h2.lp-hero-title {
    font-size: 2em;
  }
}

/* 打ち消し(main section{padding:0})より強い指定でヒーロー上部余白を確保 */
.lp-basuragi-v4 main section.lp-hero {
  padding-top: 8.5em;
}

/************************************************
	ヒーロースライダー
*************************************************/
.lp-hero-slider li.slick-slide {
  background: #fff;
  box-shadow: 0 20px 50px rgba(58, 63, 92, .25);
  overflow: hidden;
}
.lp-hero-slider li.slick-slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.lp-hero-slider .slick-dots {
  bottom: -2.4em;
}
.lp-hero-slider .slick-dots li button:before {
  font-size: 10px;
  color: #7d87c4;
  opacity: .35;
  text-shadow: none;
}
.lp-hero-slider .slick-dots li.slick-active button:before {
  color: #7d87c4;
  opacity: 1;
}

/* flex内でslickの幅計算が暴走するのを防ぐ */
.lp-hero-copy {
  min-width: 0;
}
.lp-hero-img {
  min-width: 0;
  max-width: 48%;
}
@media screen and (max-width: 780px) {
  .lp-hero-img {
    max-width: 100%;
    width: 100%;
  }
}

/* 商品名h1化に伴う調整 */
/* style.css の h1 汎用スタイル(flex・2.571em)を打ち消して従来の見た目を維持 */
.lp-basuragi-v4 main h1.lp-hero-name {
  display: block;
  margin: .8em 0 .5em;
  font-size: 2.8em;
  font-weight: 900;
  line-height: 1.5;
  color: #3a3f5c;
}
/* ヘッダーロゴを p にしたため style.css の `header > div h1` の幅指定を引き継ぐ */
.lp-basuragi-v4 header > div .site-logo {
  display: flex;
  align-items: center;
  margin: 0;
  width: auto;
  max-width: 420px;
}
.lp-basuragi-v4 header > div .site-logo a {
  display: flex;
  align-items: center;
  gap: .9em;
  text-decoration: none;
}
.lp-basuragi-v4 header > div .site-logo img {
  display: block;
  width: 190px;
  height: auto;
}

/* 価格セクション見出しを白に（h3リセットより強い指定） */
.lp-basuragi-v4 main h3.lp-h-invert {
  color: #fff;
}

/************************************************
	ヒーロー ダウンロードボタン
*************************************************/
.lp-hero-dl {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: 1em 1.4em;
  background: rgba(255, 255, 255, .5);
  border: 1px solid #b9c3dd;
  border-radius: 8px;
}
.lp-hero-dl-heading {
  margin: 0;
  font-weight: 700;
}
.lp-hero-dl-heading i {
  color: #7d87c4;
}
.lp-basuragi-v4 main .lp-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2em;
  padding: .55em 1.2em;
  color: #fff;
  font-weight: 700;
  background: #3a3f5c;
  border-radius: 4px;
  transition: background .2s ease;
}
.lp-basuragi-v4 main .lp-dl-btn:link,
.lp-basuragi-v4 main .lp-dl-btn:visited {
  color: #fff;
}
.lp-basuragi-v4 main .lp-dl-btn:hover {
  background: #7d87c4;
}
@media screen and (max-width: 780px) {
  .lp-hero-dl {
    flex-wrap: wrap;
  }
  .lp-hero-dl-heading {
    width: 100%;
  }
}

/* CTAをダウンロード枠の下に */
.lp-hero-cta {
  margin: 1.4em 0 0;
}

/* 特長04: アイコンブロック（写真の代わり） */
.lp-feature-icon {
  flex: 0 0 42%;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 10;
  font-size: 6em;
  color: #7d87c4;
  background: #f2f5fb;
  border-radius: 16px;
}
@media screen and (max-width: 780px) {
  .lp-feature-icon {
    flex: none;
    width: 100%;
    font-size: 4em;
  }
}


/************************************************

	ここから 修正版(v3) の差分スタイル

*************************************************/
.lp-basuragi-v4 {
  --lp-purple: #7d87c4;
  --lp-green: #6aa84f;
  --lp-green-soft: #f0f7ec;
  --lp-ink: #3a3f5c;
}

/************************************************
	タイプタグ（2タイプ共通 / 薄手 / 厚手）
*************************************************/
.lp-basuragi-v4 .lp-type-tag {
  display: inline-block;
  margin-bottom: .8em;
  padding: .25em 1em;
  font-size: .85em;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  background: #9aa3b8;
  border-radius: 999px;
  white-space: nowrap;
}
.lp-basuragi-v4 .lp-type-tag.is-both {
  color: var(--lp-ink);
  background: #e4ebf7;
}
.lp-basuragi-v4 .lp-type-tag.is-atsude {
  background: var(--lp-purple);
}
.lp-basuragi-v4 .lp-type-tag.is-usude {
  background: var(--lp-green);
}

/* ヒーローのバッジもタイプ別に色分け */
.lp-basuragi-v4 .lp-badge-atsude {
  color: #fff;
  background: var(--lp-purple);
  border-color: var(--lp-purple);
}
.lp-basuragi-v4 .lp-badge-usude {
  color: #fff;
  background: var(--lp-green);
  border-color: var(--lp-green);
}

/************************************************
	ヒーロー：商品名・ダウンロード枠
*************************************************/
/* 「厚手 / 薄手」を付けると1行に収まらないので少し小さく */
.lp-basuragi-v4 main h1.lp-hero-name {
  font-size: 2.5em;
}
.lp-basuragi-v4 main h1.lp-hero-name span {
  margin-left: .5em;
  font-size: .5em;
  white-space: nowrap;
}
.lp-basuragi-v4 .lp-hero-lead strong {
  font-weight: 900;
  color: var(--lp-ink);
}

/* ダウンロード枠を「見出し＋2行」に */
.lp-basuragi-v4 .lp-hero-dl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6em;
}
.lp-basuragi-v4 .lp-dl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em;
}
.lp-basuragi-v4 .lp-dl-label {
  display: inline-block;
  min-width: 3.4em;
  padding: .2em .8em;
  font-size: .9em;
  font-weight: 700;
  text-align: center;
  color: #fff;
  border-radius: 4px;
}
.lp-basuragi-v4 .lp-dl-label-atsude {
  background: var(--lp-purple);
}
.lp-basuragi-v4 .lp-dl-label-usude {
  background: var(--lp-green);
}

/************************************************
	特長：タイプタグ分の余白調整
*************************************************/
.lp-basuragi-v4 .lp-feature-text .lp-type-tag {
  margin-bottom: .6em;
}

/************************************************
	仕様：2列比較表
*************************************************/
.lp-basuragi-v4 .lp-spec-grid {
  align-items: flex-start;
  gap: 2.5em;
}
.lp-basuragi-v4 .lp-spec-imgs {
  display: flex;
  flex-direction: column;
  flex: 0 0 30%;
  gap: 1.5em;
}
.lp-basuragi-v4 .lp-spec-img {
  flex: none;
  text-align: center;
}
.lp-basuragi-v4 .lp-spec-img figcaption {
  margin-top: .8em;
}
.lp-basuragi-v4 .lp-spec-img figcaption .lp-type-tag {
  margin-bottom: 0;
}
.lp-basuragi-v4 .lp-spec-tablewrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(58, 63, 92, .08);
}
.lp-basuragi-v4 .lp-spec-table-2col {
  flex: none;
  min-width: 520px;
  box-shadow: none;
}
.lp-basuragi-v4 .lp-spec-table-2col thead td {
  background: #fff;
  border-bottom: 1px solid #e4ebf7;
}
.lp-basuragi-v4 .lp-spec-table-2col thead th {
  width: auto;
  color: #fff;
  font-weight: 900;
  text-align: center;
  line-height: 1.4;
}
.lp-basuragi-v4 .lp-spec-table-2col thead th small {
  display: block;
  font-size: .75em;
  font-weight: 500;
  opacity: .9;
}
.lp-basuragi-v4 .lp-spec-table-2col thead th.is-atsude-col {
  background: var(--lp-purple);
}
.lp-basuragi-v4 .lp-spec-table-2col thead th.is-usude-col {
  background: var(--lp-green);
}
.lp-basuragi-v4 .lp-spec-table-2col tbody th {
  width: 8em;
}
.lp-basuragi-v4 .lp-spec-table-2col tbody td {
  width: 34%;
}
.lp-basuragi-v4 .lp-spec-table-2col tbody td + td {
  background: var(--lp-green-soft);
}

/************************************************
	価格：2カード＋介護ショップ案内（カード内CTAは削除）
*************************************************/
.lp-basuragi-v4 .lp-price-cards {
  display: flex;
  justify-content: center;
  gap: 2em;
}
.lp-basuragi-v4 .lp-price-cards .lp-price-card {
  flex: 1 1 0;
  margin: 0;
  padding: 2.5em 2em;
  max-width: 420px;
}
.lp-basuragi-v4 .lp-price-value {
  margin: .3em 0 0;
}
.lp-basuragi-v4 .lp-price-note {
  margin: 2.5em auto 0;
  padding: 2em;
  max-width: 880px;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 16px;
}
.lp-basuragi-v4 .lp-price-note > p {
  font-weight: 700;
}
.lp-basuragi-v4 .lp-price-note .lp-price-tel {
  margin-top: 1.4em;
  font-weight: 400;
}
.lp-basuragi-v4 .lp-price-note .lp-price-tel a,
.lp-basuragi-v4 main .lp-price-note .lp-price-tel a:link,
.lp-basuragi-v4 main .lp-price-note .lp-price-tel a:visited {
  color: #fff;
}
.lp-basuragi-v4 .lp-price-note .lp-price-tel small {
  color: rgba(255, 255, 255, .8);
}

/************************************************
	SP（既存と同じブレークポイント）
*************************************************/
@media screen and (max-width: 780px) {
  .lp-basuragi-v4 main h1.lp-hero-name span {
    display: inline-block;
    margin-left: 0;
  }
  .lp-basuragi-v4 .lp-spec-imgs {
    flex-direction: row;
    flex: none;
    width: 100%;
  }
  .lp-basuragi-v4 .lp-spec-imgs .lp-spec-img {
    flex: 1 1 50%;
  }
  .lp-basuragi-v4 .lp-price-cards {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-basuragi-v4 .lp-price-cards .lp-price-card {
    max-width: none;
  }
  .lp-basuragi-v4 .lp-price-note {
    padding: 1.6em 1.2em;
  }
}

/************************************************
	SP（〜780px）余白バランス調整
	2026-08-26。クリサポ修正版(v2)と同じ方針で、実機幅390pxでの
	間延び・折り返し崩れ・写真のレターボックスを解消する。
	`main h3.lp-h` など詳細度の高いベース指定を上書きするため、
	同等以上の詳細度で書く。
*************************************************/
@media screen and (max-width: 780px) {

	/* --- セクション共通 --- */
	.lp-basuragi-v4 .lp-inner {
		padding: 3.4em 1.25em;
	}
	.lp-basuragi-v4 main h3.lp-h {
		font-size: 1.5em;
		line-height: 1.55;
	}
	.lp-basuragi-v4 main h3.lp-h-center {
		margin-bottom: 1.4em;
	}
	.lp-basuragi-v4 .lp-h span {
		margin-bottom: .2em;
		font-size: .62em;
	}

	/* --- ヒーロー：写真をコピーより先（上）に見せる --- */
	.lp-basuragi-v4 .lp-hero-inner {
		flex-direction: column-reverse;
		/* 下端の波（svg 90px）にCTAボタンが重ならないよう余白を確保 */
		padding: 2.2em 1.25em 7em;
	}
	.lp-basuragi-v4 .lp-hero-img {
		margin: 0 0 2.2em;
	}
	/* ヘッダー下の余白（SPはPCより詰める） */
	.lp-basuragi-v4 main section.lp-hero {
		padding-top: 4.5em;
	}
	.lp-basuragi-v4 main h2.lp-hero-title {
		font-size: 1.75em;
		line-height: 1.5;
	}
	.lp-basuragi-v4 .lp-hero-eyebrow {
		font-size: .95em;
	}
	.lp-basuragi-v4 main h1.lp-hero-name {
		margin: .4em 0 .3em;
		font-size: 2em;
		line-height: 1.4;
	}
	.lp-basuragi-v4 .lp-hero-lead {
		margin-bottom: 1.2em;
		font-size: .95em;
		line-height: 1.8;
	}
	/* バッジは2列（抗菌剤配合／厚手・薄手／浴槽にも洗い場にも）で整列させる */
	.lp-basuragi-v4 .lp-hero-badges {
		display: grid;
		grid-template-columns: max-content max-content;
		justify-content: start;
		justify-items: start;
		gap: .5em;
		margin-bottom: 1.4em;
	}
	.lp-basuragi-v4 .lp-badge {
		padding: .3em .9em;
		font-size: .82em;
	}
	.lp-basuragi-v4 .lp-hero-dl {
		padding: 1.1em 1.1em 1em;
	}
	.lp-basuragi-v4 .lp-hero-cta {
		margin-top: 1.4em;
	}

	/* --- お悩み --- */
	.lp-basuragi-v4 .lp-worry-list {
		gap: 1em;
	}
	.lp-basuragi-v4 .lp-worry-list li {
		padding: 1.6em 1.2em;
	}
	.lp-basuragi-v4 .lp-worry-answer {
		margin-top: 1.8em;
		font-size: 1.05em;
		line-height: 1.8;
	}

	/* --- 特長 --- */
	.lp-basuragi-v4 .lp-feature-list {
		gap: 2.2em;
	}
	.lp-basuragi-v4 .lp-feature-list li,
	.lp-basuragi-v4 .lp-feature-list li:nth-child(even) {
		padding: 2.2em 1.25em 1.8em;
	}
	.lp-basuragi-v4 main .lp-feature-list h4 {
		margin-bottom: .4em;
		font-size: 1.2em;
		line-height: 1.6;
	}
	.lp-basuragi-v4 .lp-feature-text p {
		font-size: .95em;
	}
	.lp-basuragi-v4 .lp-feature-list figure {
		margin-bottom: 1.4em;
	}
	.lp-basuragi-v4 .lp-type-tag {
		margin-bottom: .6em;
		font-size: .8em;
	}

	/* --- 使えるシーン --- */
	.lp-basuragi-v4 .lp-scene-list {
		gap: 1.6em;
	}
	.lp-basuragi-v4 .lp-scene-note {
		margin-top: 1.8em;
		font-size: .88em;
		line-height: 1.8;
	}

	/* --- 仕様 --- */
	.lp-basuragi-v4 .lp-spec-grid {
		gap: 1.6em;
	}
	.lp-basuragi-v4 .lp-spec-table th,
	.lp-basuragi-v4 .lp-spec-table td {
		padding: .8em .8em;
		font-size: .88em;
	}

	/* --- 価格 --- */
	.lp-basuragi-v4 .lp-price-cards {
		gap: 1.2em;
	}
	.lp-basuragi-v4 .lp-price-cards .lp-price-card {
		padding: 2em 1.4em;
	}
	.lp-basuragi-v4 .lp-price-note {
		margin-top: 1.8em;
		padding: 1.5em 1.2em;
		font-size: .95em;
	}
	.lp-basuragi-v4 .lp-price-note > p {
		line-height: 1.8;
	}

	/* --- 日本語の折り返しを文節単位に（対応ブラウザのみ・非対応は従来動作） --- */
	.lp-basuragi-v4 main h2.lp-hero-title,
	.lp-basuragi-v4 main h3.lp-h,
	.lp-basuragi-v4 main h4,
	.lp-basuragi-v4 .lp-worry-list p,
	.lp-basuragi-v4 .lp-worry-answer,
	.lp-basuragi-v4 .lp-scene-note,
	.lp-basuragi-v4 .lp-price-note > p {
		word-break: auto-phrase;
	}
	.lp-basuragi-v4 main h3.lp-h {
		font-size: 1.45em;
	}
}

/************************************************
	ヒーロースライダー：枠にフィット（レターボックス解消）
*************************************************/
.lp-basuragi-v4 .lp-hero-slider li.slick-slide img {
	object-fit: cover;
	object-position: center;
}

/************************************************
	SP（〜480px）style.css の h1 中央寄せを打ち消す
	style.css は 480px以下で h1/h2/h3 を text-align:center にする。
	h2/h3 は既に打ち消し済みだが h1（商品名）だけ中央に寄っていたため揃える。
*************************************************/
@media screen and (max-width: 480px) {
	.lp-basuragi-v4 main h1.lp-hero-name {
		text-align: inherit;
	}
	.lp-basuragi-v4 .lp-badge {
		font-size: .78em;
	}
}

/************************************************
	各種ダウンロード（画像／チラシ／取扱説明書）
*************************************************/
.lp-basuragi-v4 .lp-dl-label-common {
  background: #6b7280;
}
.lp-basuragi-v4 .lp-dl-btn small {
  display: inline-block;
  margin-left: .5em;
  font-size: .78em;
  font-weight: 400;
  white-space: nowrap;
  opacity: .75;
}
.lp-basuragi-v4 .lp-dl-btn {
  white-space: nowrap;
}

/************************************************
	ヘッダーロゴ（社名 + 事業名画像）のレスポンシブ
*************************************************/
/* 事業名（MEDICAL CARE）画像 */
.lp-basuragi-v4 header > div .site-logo .site-logo-division {
  display: block;
  width: auto;
  height: 22px;
  margin-left: 0;
  padding-left: .9em;
  border-left: 1px solid #c9d3d0;
}

/* タブレット以下: ロゴと事業名を縦積みにしてナビとの重なりを防ぐ */
@media screen and (max-width: 959px) {
  .lp-basuragi-v4 header > div .site-logo a {
    flex-direction: column;
    align-items: flex-start;
    gap: .25em;
  }
  .lp-basuragi-v4 header > div .site-logo img {
    width: 118px;
  }
  .lp-basuragi-v4 header > div .site-logo .site-logo-division {
    height: 15px;
    padding-left: 0;
    border-left: none;
  }
}
@media screen and (max-width: 480px) {
  .lp-basuragi-v4 header > div .site-logo img {
    width: 100px;
  }
  .lp-basuragi-v4 header > div .site-logo .site-logo-division {
    height: 13px;
  }
}

/************************************************
	仕様表：スマホでの横スクロール
	.lp-spec-grid が 780px 以下で flex-direction:column かつ
	align-items:flex-start になるため、子が内容幅（520px）まで
	広がってしまい overflow-x:auto が働かなかった。
	幅を親に合わせることでラッパー内をスクロールさせる
*************************************************/
.lp-basuragi-v4 .lp-spec-scrollnote {
  display: none;
  margin: 0 0 .6em;
  font-size: .82em;
  color: #7d87c4;
}
.lp-basuragi-v4 .lp-spec-scrollnote i {
  margin-right: .4em;
}
@media screen and (max-width: 780px) {
  .lp-basuragi-v4 .lp-spec-imgs,
  .lp-basuragi-v4 .lp-spec-tablewrap {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }
  .lp-basuragi-v4 .lp-spec-tablewrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* 案内は実際にはみ出しているときだけ出す（判定は main.js） */
.lp-basuragi-v4 .lp-spec-grid.is-table-scrollable .lp-spec-scrollnote {
  display: block;
}