@charset "UTF-8";
/*----------------------------------------------------
  植物生まれ 全ページ共通パーツ
  各ページのhtmlからlinkで読み込む
----------------------------------------------------*/
/* ブランド共通変数
----------------------------------------------------*/
:root {
  --color-blue: #16b1d9;
  --color-blue-accent: #0093d4;
  --color-navy: #1d2088;
  --color-orange: #f0831e;
  --color-yellow: #fff8b0;
  --color-green: #8dc21f;
  --color-green-accent: #74b332;
  --font-heading: "Zen Maru Gothic", "Hiragino Sans", sans-serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* ブランドナビ背景色
----------------------------------------------------*/
.p-brandNavi {
  --brandNavi-color: #ffffff;
  --brandNavi-textColor: #1eadde;
}

/* 製品一覧CTAボタン
----------------------------------------------------*/
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-inline: auto;
  margin-block-start: 24px;
  width: min(100%, 350px);
  padding-block: 5px;
  border: 3px solid var(--color-orange);
  border-radius: 10px;
  background-color: var(--color-green);
  text-decoration: none;
}
.cta:hover {
  opacity: 0.8;
}

.cta__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set18);
}

.cta__arrow {
  flex: none;
  transform: rotate(90deg);
}

.cta__icons {
  flex: none;
}

.cta__icons--left {
  width: 62px;
  height: 48px;
}

.cta__icons--right {
  width: 44px;
  height: 46px;
}

/* 丸バッジ（無添加・弱酸性など）
----------------------------------------------------*/
.circleBadges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

.circleBadgeCol {
  display: grid;
  gap: 8px;
}

.circleBadge {
  display: grid;
  place-content: center;
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: 1/1;
  padding-inline: 14%;
  border-radius: 50%;
  background-color: #72b22f;
  background-image: url("/orange-n/assets/images/common/circleBadge-bg.png");
  background-size: cover;
  color: #fff000;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-set24);
  line-height: 1.25;
  text-align: center;
}

.circleBadge__label {
  display: block;
}

.circleBadge__small {
  display: block;
  color: #fff;
  font-size: var(--font-size-set18);
}

.circleBadge__note {
  color: var(--color-blue-accent);
  font-family: var(--font-heading);
  font-size: var(--font-size-set14);
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}