@charset "utf-8";
/* ===============================
   Base
=============================== */
@media (prefers-reduced-motion: reduce){
  .design .feature:hover{ transform: none; box-shadow: 0 3px 12px rgba(0,79,159,.05); }
}

.clearveil_body {
  font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin: 0;
  color: #333; 
  background: #fff;
  overflow-x: hidden;
  line-height: 1.9;
  letter-spacing: 0.01em;
}
.clearveil_body img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ===============================
   KV
=============================== */
.kv {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.kv img {
  width: 100%;
  display: block;
}
/* ===============================
   「快適を考えた3つのこだわり」(静的グラデ)
=============================== */
.feature3 {
  position: relative;
  text-align: center;
  padding: 80px 20px 80px;
  background: radial-gradient(circle at center, #ffffff 0%, #E1F9FF 100%);
}
.feature3 .container {
  max-width: 760px;
  margin: 0 auto;
}
.feature3 .cv-mainttl {
  font-size: clamp(1.5rem, 3.8vw, 1.7rem);
  font-weight: 700;
  letter-spacing: .05em;
  margin: 0 0 15px;
	color: #004f9f;
}
.feature3 hr {
  width: 80%;
  border: none;
  border-top: 2px solid #60a8e8;
  margin: 0 auto 40px;
}
.feature3 .block {
  margin-bottom: 50px;
}
.feature3 .strong {
  margin-top: 2px;
}
.feature3 .label {
  display: inline-block;
  background: #3792E5;
  color: #fff;
  font-weight: 700;
  border-radius: 24px;
  padding: 6px 20px;
  font-size: clamp(.85rem, 3vw, 1rem);
  margin-bottom: 10px;
  letter-spacing: .05em;
}
.feature3 .desc {
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  color: #258BE9;
  letter-spacing: .03em;
  line-height: 1.7;
  margin: 0 0 6px; /* すこしだけ下余白を増やす */
}
.feature3 .strong {
  font-size: clamp(1.2rem, 4.3vw, 1.55rem);
  font-weight: 700;
  color: #004f9f;
  letter-spacing: .04em;
  line-height: 1.4;
  margin: 0;
}

/* お試しバナー（カテゴリ既存CSSと衝突しにくいようにスコープ済み） */
.cv-banner{
  max-width: 980px;
  margin: 40px auto 40px;
  padding: 0 16px;           /* 画面端ベタ付き防止 */
}
.cv-banner__link{
  display: block;
  border-radius: 16px;
  overflow: hidden;          /* 角丸に画像を合わせる */
  box-shadow: 0 8px 24px rgba(0,79,159,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cv-banner__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,79,159,.12);
}
.cv-banner__link:focus-visible{
  outline: 3px solid #2a86d1;
  outline-offset: 4px;
}
.cv-banner img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px){
  .cv-banner{ margin: 30px auto 20px; }
  .cv-banner__link{ border-radius: 12px; }
}

/* ===============================
   共通セクション構造（素材・成分で共通利用）
=============================== */
.section-block {
  background: #fff;
  color: #333;
  text-align: left;
  padding: 80px 20px 40px;
  font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
}
.section-block .inner {
  max-width: 860px;
  margin: 0 auto;
}
.section-block .graph:last-of-type {
  margin-bottom: 10px;
}
/* タイトル（チェック＋英字＋日本語＋左右ライン） */
.section-title {
  position: relative;
  text-align: center;
  margin: 0 0 60px;
}
.section-title .title-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #b5986a;
  font-size: 1rem;
  letter-spacing: .05em;
}
.section-title .icon {
  width: 18px;
  height: auto;
  vertical-align: middle;
}
.section-title p.ttl {
  color: #b5986a;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 8px 0 0;
}
.section-title .line {
  position: absolute;
  top: 50%;
  height: 1px;
  background: #b5986a;
  width: 30%;
}
.section-title .line.left {
  left: 0;
  transform: translateY(-50%);
}
.section-title .line.right {
  right: 0;
  transform: translateY(-50%);
}
/* 見出し・本文（共通） */
.inner .catch {
  text-align: center;
  font-size: 1.15rem;
  color: #258BE9;
  line-height: 1.8;
  font-weight: 500;
  margin: 0 0 24px;
}
.inner .catch span {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0052AB;
}
.cv-text {
  font-size: 0.9rem;
  line-height: 1.9;
  color: #333;
  margin: 0 auto 40px;
  max-width: 760px;
}
.cv-clearveil .cv-text .cv-blue {
  color: #258BE9;
  font-weight: 600;
}

.cv-lead {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0077CC;
  display: block;
  margin-bottom: 2px;
}

/* 共通画像ブロック */
/* まず共通（既存） */
.graph {
  margin: 0 auto 60px;
  max-width: 760px;
}
.graph img {
  width: 100%;
  height: auto;
  display: block;
}
/* 素材セクション内で「最初の .graph」だけ拡大 */
/*.material .graph:not(.graph ~ .graph) {
  overflow: hidden; 
}
.material .graph:not(.graph ~ .graph) img {
  width: 115%;
  max-width: none;
  margin-left: -7.5%;
}*/
/* 汎用ボックス（素材：定義など） */
/* 新（スコープ付推奨） */
.cv-clearveil .cv-definition {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  max-width: 600px;
	box-shadow: 0 6px 20px rgba(0,79,159,.06);
  margin: 26px auto 26px;
  padding: 30px 20px;
	font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
}
.cv-clearveil .cv-definition h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px;
  text-align: center;
	letter-spacing: .02em; 
}
.cv-clearveil .cv-definition p {
  font-size: .9rem;
  line-height: 1.9;
  color: #333;
  margin: 0;
	font-weight: 400;
}
/* ===== 成分セクション専用（2カラム・比較写真） ===== */
.ingredient .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 760px;
  margin: 10px auto 50px;
}
.ingredient .pair-item {
  background: #f8fcff;
  border: 1px solid #e6f0f7;
  border-radius: 10px;
  padding: 18px;
}
.ingredient .mini-cap {
  color: #2a86d1;
  font-size: .9rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.ingredient .pair-ttl {
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: #004f9f;
}
.ingredient .pair-txt {
  font-size: .95rem;
  line-height: 1.9;
  margin: 0;
  color: #333;
}
.section-subttl {
  font-size: 1.05rem;
  color: #004f9f;
  margin: 12px auto 10px;
  font-weight: 700;
}
.section-subttl.center {
  text-align: center;
}
.ingredient .compare-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 760px;
  margin: 18px auto 0;
}
.ingredient .photo {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.ingredient .photo img {
  border-radius: 6px;
}
.ingredient .photo figcaption {
  font-size: .9rem;
  line-height: 1.6;
  color: #333;
  margin-top: 8px;
}
.ingredient .photo figcaption span {
  color: #2a86d1;
}
/* ===== 設計セクション：3特徴（フラット版） ===== */
.design .features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 860px;
  margin: 14px auto 64px;
  text-align: center;
}
.design .feature {
  padding: 20px 16px 26px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 79, 159, .05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.design .feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 79, 159, .08);
}
.design .feature img {
  width: 70px;
  height: auto;
  margin: 0 auto 14px;
}
.design .feature h6 {
  font-size: 1.05rem;
  color: #004f9f;
  font-weight: 700;
  margin: 4px 0 8px;
  line-height: 1.4;
}
.design .feature .note {
  font-size: .93rem;
  line-height: 1.7;
  color: #333;
  margin: 0;
}
.design .feature .note b {
  font-weight: 700;
  color: #0077cc;
}
/* 写真ギャラリー */
.design .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 860px;
  margin: 12px auto 0;
}
.design .gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ===== スペック表 ===== */
/* ---- Spec Section ---- */
.cv-spec-min{
  max-width: 760px;
  margin: 36px auto 64px;
  padding: 0 16px;
  font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  color: #222;
}

/* タイトル */
.cv-spec-title{
	font-size: 1.6rem;
	font-weight: 50;
	color: #464C53;
	margin: 0 0 24px;
	padding-bottom: 20px;
	border-bottom: 2px solid #E6EDF5; 
	letter-spacing: .03em;
	text-align: center;
}

/* テーブル基本 */
.cv-spec-min__table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.7rem;
  line-height: 1.9;
}

.cv-spec-min__table th,
.cv-spec-min__table td{
  padding: 14px 0;
  vertical-align: top;
}

.cv-spec-min__table tr + tr th,
.cv-spec-min__table tr + tr td{
  border-top: 1px solid #E6EDF5;
}

.cv-spec-min__table th{
  width: 32%;
  font-weight: 500;
  color: #111;
  letter-spacing: .02em;
  white-space: nowrap;
  padding-right: 16px;
}

.cv-spec-min__table td{
  color: #333;
}

.cv-spec-min__table td small{
  font-size: .86rem;
  color: #666;
}

/* SP */
@media (max-width: 767px){
  .cv-spec-min{ margin: 50px auto 52px; }
  .cv-spec-title{
    font-size: 1.4rem;
    margin-bottom: 20px;
	  padding-bottom: 20px;
	  
  }
  .cv-spec-min__table th{
    width: 38%;
    padding-right: 12px;
  }
}



/* === 設計セクション SP最適化 === */
@media (max-width:767px) {
  .design .features {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .design .feature {
    padding: 18px 14px 22px;
  }
  .design .feature img {
    width: 150px;
    margin-bottom: 10px;
  }
  .design .gallery {
    grid-template-columns: 1fr 1fr;
  }
}
/* ===============================
   Responsive
=============================== */
@media (max-width:1024px) {
  .section-title .line {
    width: 28%;
  }
}
@media (max-width:767px) {
  .feature3 h2 {
    font-size: clamp(1.2rem, 4.6vw, 1.55rem);
  }
  .feature3 {
    padding: 60px 20px 10px;
  }
  .feature3 .strong {
    font-size: clamp(1.4rem, 4vw, 1.4rem);
  }
  .feature3 .desc {
    margin-bottom: 10px;
  }
  .section-block {
    padding: 60px 20px 0px;
  }
  .section-title h3 {
    font-size: 1.5rem;
  }
  .section-title .line {
    width: 23%;
  }
  .catch {
    font-size: 1rem;
  }
  .catch span {
    font-size: 2rem;
  }
  .ingredient .pair {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ingredient .compare-photo {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 767px) {
  .cv-lead {
    font-size: 1rem;
    margin-bottom: 2px;
  }
}
/*
@media (max-width: 767px) {
  .material .graph:not(.graph ~ .graph) img {
    width: 120%;
    margin-left: -10%;
  }
}*/