/*
 * ----------------------------------------------------
 * 1. Base & Utility Styles
 * ----------------------------------------------------
 */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  word-wrap: break-word;
  font-size: 17px;
  background-color: #f4f4f4;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  font-family: Hiragino Sans, Arial, sans-serif !important;
  color: #000000 !important;
}

@media screen and (min-width: 920px) {
  body {
    width: 720px;
    margin: 0 auto;
  }
}

img {
  max-width: 100%;
}

/* Article Body Wrapper */
.article-body {
  position: relative;
  font-size: 17px !important;
  line-height: 1.8 !important;
  background-color: #ffffff;
  padding: 15px 20px !important;
}

/* Text and Links */
.article-body p {
  margin: 0;
  font-size: 15px; /* 基本フォントサイズを15pxに設定 */
}
.article-body a {
  text-decoration: underline;
  color: #4682b4;
}

/* Font Size Utilities (sb-fs-xx classes are preserved for consistency with content) */
.sb-fs-10 {
  font-size: 10px !important;
}
.sb-fs-13 {
  font-size: 13px !important;
}
.sb-fs-17 {
  font-size: 17px !important;
}
.sb-fs-19 {
  font-size: 19px !important;
}
.sb-fs-21 {
  font-size: 21px !important;
}
.sb-fs-23 {
  font-size: 23px !important;
}
.sb-fs-25 {
  font-size: 25px !important;
}

/* Font Color/Weight/Background Utilities (sb-color-xx, sb-font-bold, sb-bg-xx are preserved) */
.sb-font-bold {
  font-weight: bold;
}
.sb-color-black {
  color: #000;
}
.sb-color-red {
  color: #ff0000;
}
.sb-color-blue {
  color: #0000ff;
}
.sb-align-center {
  display: block;
  text-align: center;
}
.sb-align-right {
  display: block;
  text-align: right;
}

/* Highlight Marker (sb-bg-gum-marker is the base) */
.sb-bg-gum-marker {
  background: linear-gradient(to right, #ffee57 50%, transparent 50%) 100% 0%/200%
    70% no-repeat;
  background: -webkit-linear-gradient(left, #ffee57 50%, transparent 50%) 100%
    0%/200% 70% no-repeat;
  transition: background-position 1s ease-out;
  -webkit-transition: background-position 1s ease-out;
}
.sb-bg-gum-marker.animated {
  background-position: bottom 0 right 100% !important;
}

/* Image/Media Overrides */
.article-body img,
.article-body video {
  display: unset !important;
  height: auto !important;
  max-width: 100%;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.article-body .sb-custom img {
  display: block !important;
}

/* Citation/Note Text Style */
.note-citation-small {
  font-size: 0.6em;
  line-height: 1.5;
  margin-bottom: 1em;
  margin-top: 1em;
}
.note-citation-small.align-right {
  text-align: right;
}
.note-citation-small.align-left {
  text-align: left;
}

/*
 * ----------------------------------------------------
 * 2. Unified Heading Styles
 * ----------------------------------------------------
 */

/* タイトル */
.heading-main-copy {
  text-align: center;
  font-weight: 700;
  line-height: 1.8;
  margin: 0 0 32px;
}

.heading-main-copy strong {
  font-weight: 700;
  background: linear-gradient(to right, yellow 50%, transparent 50%) 100% 0%/200%;
  background-position: bottom 0 right 100% !important;
}

/* 見出し1: 赤いリボン風デザイン (PFASの脅威) */
.heading-ribbon-red h2 {
  font-size: 120%;
  color: #fff;
  background: #e60000;
  display: inline-block;
  position: relative;
  padding: 0.6em;
  margin: 0 20px 25px 0;
  letter-spacing: 0.05em;
}
.heading-ribbon-red h2::before {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #640202;
}
.heading-ribbon-red h2::after {
  background: linear-gradient(to top right, #e60000 48%, transparent 50.5%)
      no-repeat bottom left/100% 50%,
    linear-gradient(to bottom right, #e60000 48%, transparent 50.5%) no-repeat
      top right/100% 50%;
  position: absolute;
  content: "";
  width: 25px;
  height: 100%;
  z-index: 1;
  top: 0;
  right: -25px;
}

/* 見出し2: 吹き出し風デザイン (テレビでも話題！〜) */
.heading-bubble-gray h2 {
  font-size: 24px;
  color: #000;
  background: #f9f9f9;
  font-weight: bold;
  padding: 0.5rem;
  border-radius: 8px;
  letter-spacing: 0.05em;
  border: 3px solid #d8d8d8;
  position: relative;
  text-align: center;
}
.heading-bubble-gray h2:before {
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: "";
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #d8d8d8 transparent transparent transparent;
}
.heading-bubble-gray h2:after {
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: "";
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #f9f9f9 transparent transparent transparent;
}

/* 見出し3: 左側青いバーデザイン (PFASの脅威/水道水に含まれるPFASへの対応策/〜) */
/* IDセレクタを削除し、クラスセレクタに統一 */
.heading-bar-blue h2 {
  font-size: 24px;
  color: #ffffff;
  background: #50adbb;
  text-align: left;
  padding: 10px !important;
  margin: 20px 0 30px !important;
  font-weight: 700;
  line-height: 30px;
  position: relative;
}

/* 見出し4: 左側青い縦線デザイン (業界最安級！〜/ペットボトルのストレスが0に) */
/* IDセレクタを削除し、クラスセレクタに統一 */
.heading-line-blue h2 {
  font-size: 23px;
  border-bottom: 1px solid #000;
  border-left: 6px solid #50adbb;
  line-height: 1.4;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 0 0 10px 15px;
  margin: 30px 0 30px;
}
.heading-line-blue h2 span {
  /* for small text in h2 */
  font-size: 10px;
}

/* 見出し5: 赤いバブルデザイン（ウォーターサーバーのおすすめ） */
/* IDセレクタを削除し、クラスセレクタに統一 */
.heading-bubble-red h2 {
  font-size: 25px;
  color: #ffffff;
  background: #e60000;
  text-align: center;
  padding: 20px !important;
  margin: 20px auto 30px !important;
  font-weight: 700;
  line-height: 30px;
  position: relative;
  width: fit-content;
}
.heading-bubble-red h2:before {
  border-top: 10px solid #e60000;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  content: "";
  position: absolute;
  bottom: -10px;
  left: calc(50% - 10px);
}
/* Animation is included here as it is integral to this specific heading design */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.heading-bubble-red .bounce {
  animation: bounce 1.5s infinite ease-in-out;
}

/*
 * ----------------------------------------------------
 * 3. Unified List Styles
 * ----------------------------------------------------
 */

.list-wrapper .listItem__area {
  width: 100%;
  height: auto;
  font-size: 16px;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 30px;
}

@media screen and (max-width: 600px) {
  .list-wrapper .listItem__area {
    font-size: 13px;
  }
}

.list-wrapper .listItem__area .items {
  padding: 0 1em;
  list-style: none;
}
.list-wrapper .listItem__area .items li {
  font-size: 1.1em;
  padding-left: 1.5em;
  margin-top: 0.5em;
  position: relative;
  line-height: 1.5; /* Ensure good readability */
}

/* List Style 1: 赤枠（PFASの脅威）- Item marker is a black dot (・) */
/* IDセレクタを削除し、クラスセレクタに統一 */
.list-bordered-red .listItem__area {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: #ee0000;
}
.list-bordered-red .listItem__area .items li:before {
  content: "・";
  width: 0.8em;
  height: 0.8em !important;
  display: block;
  position: absolute;
  left: 0;
  color: #000; /* Default marker color */
}
.list-bordered-red .listItem__area .items li span {
  font-weight: bold;
  color: #ee0000;
}

/* List Style 2: 黒枠（対応策、ウォーターサーバーの種類）- Item marker is a black dot (・) */
/* IDセレクタを削除し、クラスセレクタに統一 */
.list-bordered-black .listItem__area {
  border-width: 1px;
  border-style: solid;
  border-color: #000;
}
.list-bordered-black .listItem__area .items li {
  font-size: 1.1em;
}
.list-bordered-black .listItem__area .items li:before {
  content: "・";
  width: 0.8em;
  height: 0.8em !important;
  display: block;
  position: absolute;
  left: 0;
  color: #000;
}

/* List Style 3: 青枠チェックリスト（Loccaの特徴）- Item marker is a blue checkmark */
/* IDセレクタを削除し、クラスセレクタに統一 */
.list-checked-blue .listItem__area {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: #50adbb;
}
.list-checked-blue .listItem__headBox {
  width: 100%;
  height: auto;
  background-color: #50adbb;
  padding: 0.3em 0;
  border-radius: 8px 8px 0 0;
}
.list-checked-blue .listItem__headBox .head {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin: 0;
}
.list-checked-blue .listItem__area .items li:before {
  content: "";
  width: 0.8em;
  height: 0.8em !important;
  display: block;
  border: 2px solid #000;
  position: absolute;
  top: 0.6em;
  left: 0;
}
.list-checked-blue .listItem__area .items li:after {
  content: "";
  width: 0.8em;
  height: 0.3em !important;
  display: block;
  border-width: 0 0 2px 2px;
  border-style: solid;
  border-color: #50adbb;
  transform: translateY(-50%) rotate(-50deg);
  position: absolute;
  top: 0.8em;
  left: 0.2em;
}
.list-checked-blue .listItem__area .items li strong {
  font-weight: bold;
  color: #50adbb;
  font-size: 1.1em;
}

/*
 * ----------------------------------------------------
 * 4. Data Table Styles (Locca Model Comparison)
 * ----------------------------------------------------
 */

.product-comparison-table {
  margin-bottom: 40px;
}
.product-comparison-table .diffTable__area {
  margin: 0 auto;
}
.product-comparison-table .diffTable__box {
  width: 100%;
  height: auto;
  border: 2px solid #50adbb;
  box-sizing: border-box;
  margin-top: 20px;
}
.product-comparison-table table {
  width: 100%;
  height: auto;
  border-collapse: collapse;
}
.product-comparison-table table tr th,
.product-comparison-table table tr td {
  width: 33.33333%; /* Assuming 3 products */
  border-right: 2px dotted #50adbb;
  padding: 5px;
  min-width: auto;
  text-align: center;
}
.product-comparison-table table tr th {
  vertical-align: bottom;
}
.product-comparison-table table tr td:last-of-type,
.product-comparison-table table tr th:last-of-type {
  border-right: none;
}
.product-comparison-table table tr .itemImg__box img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.product-comparison-table table tr .itemName {
  padding: 8px;
  text-align: center;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}
.product-comparison-table table tr .itemName img {
  max-width: 100%;
  height: 20px !important;
  width: auto;
}

.product-comparison-table .tableHead {
  background: #50adbb;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  padding: 5px;
}
.product-comparison-table .reccomend p {
  padding: 6px;
  background: #faffa4;
  font-size: 13px;
  border-radius: 32px;
  color: #50adbb;
  font-weight: bold;
  margin-bottom: 4px;
}
.product-comparison-table .price span {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.product-comparison-table .color-red {
  color: #e60000;
}
.product-comparison-table .size-large {
  font-size: 24px;
}
.product-comparison-table .size-small {
  font-size: 16px;
  vertical-align: sub;
}
.product-comparison-table .text {
  font-size: 13px;
}

/* Responsive adjustments for table (Mobile scroll/stacking) */
@media screen and (max-width: 600px) {
  .product-comparison-table .diffTable__box {
    overflow-x: scroll;
  }
  .product-comparison-table table tr th:first-child:nth-last-child(3),
  .product-comparison-table table tr th:first-child:nth-last-child(3) ~ th,
  .product-comparison-table table tr td:first-child:nth-last-child(3),
  .product-comparison-table table tr td:first-child:nth-last-child(3) ~ td {
    min-width: 155px;
  }
  /* Sticky header for mobile view */
  .product-comparison-table table tr th.tableHead span {
    position: sticky;
    left: 0;
    right: 0;
    top: 0;
    display: block;
    width: calc(100vw - 70px);
  }
}

/*
 * ----------------------------------------------------
 * 5. Fixed/Call-to-Action Buttons
 * ----------------------------------------------------
 */

/* Fixed Button at the bottom right */
/* IDセレクタを削除し、クラスセレクタに統一 */
.cta-fixed-button {
  display: block;
  position: fixed;
  bottom: 10px;
  right: 20px;
  z-index: 1000;
  width: 50%;
  max-width: 360px;
}
/* Center-aligned CTA button */
/* IDセレクタを削除し、クラスセレクタに統一 */
.cta-center-button {
  width: 60%;
  margin: auto;
}
.cta-center-button picture,
.cta-fixed-button picture {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*
 * ----------------------------------------------------
 * 7. Footer
 * ----------------------------------------------------
 */

.footer {
  padding: 20px 0 60px;
}
.footer .footer__address {
  text-align: center;
}
.footer .footer__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/*
 * ----------------------------------------------------
 * 6. Margin Bottom Utility Classes (10px to 100px)
 * ----------------------------------------------------
 */

/* Margin Bottom (mB-10 to mB-100) */
.mB-10 {
  margin-bottom: 10px !important;
}
.mB-20 {
  margin-bottom: 20px !important;
}
.mB-30 {
  margin-bottom: 30px !important;
}
.mB-40 {
  margin-bottom: 40px !important;
}
.mB-50 {
  margin-bottom: 50px !important;
}
.mB-60 {
  margin-bottom: 60px !important;
}
.mB-70 {
  margin-bottom: 70px !important;
}
.mB-80 {
  margin-bottom: 80px !important;
}
.mB-90 {
  margin-bottom: 90px !important;
}
.mB-100 {
  margin-bottom: 100px !important;
}