/* =========================
   ZELOS / Hero Title
   - HTMLはそのまま
   - 横並び
   - 見出し自体をページ中央に配置（margin:autoが効く形）
   - SWELL装飾の保険込み
========================= */

/* 見出し本体 */
.zls-heroTtl{
  margin: 0 auto 2rem!important; /* ページ中央へ */
  padding: clamp(18px, 3.5vw, 28px) clamp(22px, 4.5vw, 40px);
  background: none !important;

  /* 文字 */
  color: #fff;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0.02em;

  /* 中央配置を成立させる */
  display: flex;            /* inline-flex だと margin:auto が効きにくい */
  width: fit-content;       /* 中身幅にして中央寄せが綺麗に決まる */
  max-width: 100%;
  box-sizing: border-box;

  /* 横並び */
  flex-direction: row;
  align-items: baseline;    /* ベースライン揃え */
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;          /* 狭いと折り返し */
}

/* 上段（白・細め） */
.zls-heroTtl__top{
  font-weight: 400;
  font-size: clamp(28px, 4.8vw, 52px);
  color: #fff;
  display: inline-block;
}

/* 下段（ゴールド・太字） */
.zls-heroTtl__main{
  font-weight: 800;
  font-size: clamp(38px, 6.6vw, 72px);
  color: #C9A961;
  display: inline-block;
}

/* SWELLの見出し装飾が残る場合の保険（下線など） */
.zls-heroTtl::before,
.zls-heroTtl::after{
  content: none !important;
}

/* fit-content が使えない環境の保険 */
@supports not (width: fit-content){
  .zls-heroTtl{
    width: max-content;
  }
}

/* さらに狭い時は縦に（好みで） */
@media (max-width: 480px){
  .zls-heroTtl{
    flex-direction: column;
    align-items: center;
  }
}

/* SWELL：チェックリストのチェック色をゴールドに上書き */
.is-style-check_list li::before{
  color: #C9A961 !important;
}

/* =========================
   Ingredient Card
========================= */
.zls-ingCard{
  text-align: center;
  max-width: 320px;
  margin: 0 auto 1rem;
  padding: 10px 6px ;
  background-color: rgb(237, 241, 245);
}

/* 丸画像 */
.zls-ingCard__img{
  width: min(120px, 50vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;

  border-radius: 50%;
  overflow: hidden;

  background: #f4f4f4;
  box-shadow:
    0 10px 28px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(0,0,0,.06);
}

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

/* タイトル */
.zls-ingCard__ttl{
  margin: 0 0 10px;
  font-size: clamp(15px, 1.3vw, px);
  font-weight: 800;
  letter-spacing: .04em;
  color: #2b2b2b;
}

/* =========================
   ZELOS Section Title (H2)
   SWELLの強い見出し装飾を上書き
========================= */

/* まず“このh2だけ”を強めのセレクタで指定 */
.entry-content h2.wp-block-heading.zls-secTtl,
.post_content  h2.wp-block-heading.zls-secTtl,
.article-body  h2.wp-block-heading.zls-secTtl,
.l-content     h2.wp-block-heading.zls-secTtl{
  /* SWELLの見出し装飾を無効化 */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;

  /* 余白（好みで微調整OK） */
  margin: clamp(26px, 5vw, 60px) auto !important;
  padding: 0 !important;

  /* 中央配置 */
  text-align: center !important;

  /* 2段組み */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(14px, 2.2vw, 22px) !important;

  /* 念のため */
  line-height: 1.1 !important;
}

/* SWELLの擬似要素（下線/飾り）を完全に消す */
.entry-content h2.wp-block-heading.zls-secTtl::before,
.entry-content h2.wp-block-heading.zls-secTtl::after,
.post_content  h2.wp-block-heading.zls-secTtl::before,
.post_content  h2.wp-block-heading.zls-secTtl::after,
.article-body  h2.wp-block-heading.zls-secTtl::before,
.article-body  h2.wp-block-heading.zls-secTtl::after{
  content: none !important;
  display: none !important;
}

/* 上：FEATURES */
.zls-secTtl__en{
  display: block;
  font-weight: 500;
  letter-spacing: .5em;
  text-transform: uppercase;

  font-size: clamp(12px, 1.5vw, 16px);
  color: #C9A961; /* ゴールド */
}


/* 下：ZELOSの特徴 */
.zls-secTtl__jp{
  display: block;
  font-weight: 800;
  letter-spacing: .06em;

  font-size: clamp(18px, 3vw, 52px);
  color: #111;
}
.font-wh{
  color: #fff!important;
}

/* =========================
   ZELOS / Flow (SWELL non-conflict)
========================= */
.zls-flow{
  --zls-gold:#C9A961;
  --zls-bg:#f5f5f5;
  --zls-text:#111;
  --zls-sub:rgba(0,0,0,.60);

  margin: clamp(18px, 4vw, 48px) 0;
  isolation: isolate;
}

/* このブロック内だけ余計な余白を消して安定させる */
.zls-flow *{ box-sizing: border-box; }
.zls-flow p{ margin: 0; }

/* 外枠（薄グレー＋角丸） */
.zls-flow__inner{
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px) clamp(18px, 3.4vw, 42px);
  border-radius: 12px;
  background: var(--zls-bg);
}

/* 見出し：SWELLのh2装飾を完全リセットしてから組む */
.zls-flow__heading{
  all: unset;               /* ← SWELLのh2を無効化 */
  display: block;
  text-align: center;
  border:none!important;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: clamp(18px, 2.2vw, 26px);
  margin: 0 0 clamp(18px, 3vw, 34px);
}

/* 3ステップ＋矢印の並び（PCは横） */
.zls-flow__row{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  column-gap: clamp(16px, 3vw, 46px);
  row-gap: 14px;
}

/* ステップ */
.zls-flow__step{
  text-align: center;
  padding: 6px 8px;
}

/* 丸番号 */
.zls-flow__num{
  width: clamp(54px, 6vw, 68px);
  height: clamp(54px, 6vw, 68px);
  margin: 0 auto clamp(14px, 2vw, 18px);
  border-radius: 999px;
  background: var(--zls-gold);
  color: #fff;

  display: grid;
  place-items: center;

  font-weight: 800;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: .06em;
}

/* タイトル／説明：pなのでSWELLの見出しに巻き込まれない */
.zls-flow__title{
  font-weight: 800;
  color: var(--zls-text);
  letter-spacing: .03em;
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: 10px;
}

.zls-flow__desc{
  color: var(--zls-sub);
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.7;
}

/* 矢印 */
.zls-flow__arrow{
  align-self: center;
  justify-self: center;
  color: var(--zls-gold);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1;
  padding: 0 2px;
}

/* 注釈 */
.zls-flow__note{
  text-align: center;
  color: rgba(0,0,0,.55);
  font-size: clamp(12px, 1.4vw, 14px);
  margin-top: clamp(20px, 3vw, 30px);
}

/* =========================
   Responsive: SPは縦並び＋矢印を下向きに
========================= */
@media (max-width: 768px){
  .zls-flow__row{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .zls-flow__arrow{
    transform: rotate(90deg);
    margin: 2px auto;
  }
  .zls-flow__step{
    padding: 10px 6px;
  }
}


/* =========================
   ZELOS / Effect Grid (refined)
   - 6 items: PC 3 columns
   - image bigger
   - cleaner card look
========================= */
.zls-grid{
  --zls-card-bg:#F7F7F7;
  --zls-text:#111;
  --zls-line:rgba(0,0,0,.06);

  margin: clamp(18px, 4vw, 56px) 0;
  isolation: isolate;
}
.zls-grid *{ box-sizing: border-box; }
.zls-grid p{ margin: 0; }

.zls-grid__inner{
  max-width: min(1100px, 92vw);
  margin: 0 auto;
}

/* グリッド本体：PC 3列 */
.zls-grid__cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

/* カード：余白と影を上品に */
.zls-card{
  background: var(--zls-card-bg);
  border-radius: 12px;
  padding: clamp(22px, 2.8vw, 34px);
  text-align: center;

  display: grid;
  justify-items: center;
  gap: clamp(14px, 2vw, 18px);

  border: 1px solid var(--zls-line);
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* ちょい高級感（hover不要なら削除OK） */
@media (hover:hover){
  .zls-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(0,0,0,.08);
  }
}

/* 丸画像：大きく＆きれいに */
.zls-card__img{
  width: min(200px, 64%);  /* ←大きめに */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;

  background: #EDEDED;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}

.zls-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02); /* 端の白フチ回避 */
}

/* タイトル：少し締める */
.zls-card__ttl{
  color: var(--zls-text);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.55;
  font-size: clamp(15px, 1.35vw, 18px);
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px){
  .zls-grid__cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zls-card__img{ width: min(190px, 72%); }
}
@media (max-width: 560px){
  .zls-grid__cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* スマホ2列 */
  .zls-card{ padding: 18px 12px; border-radius: 10px; }
  .zls-card__img{ width: min(170px, 78%); }
  .zls-card__ttl{ font-size: 14px; letter-spacing: .06em; }
}