body {
  margin: 0;
  font-family: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background: #f6f4ef;
  color: #1f2433;
}

a {
  color: #1b3a6b;
}

a:hover {
  color: #0f2547;
}

.zp {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* タブ切替：#products の data-active 属性で表示制御（JSは属性を書き換えるだけ） */
.zp-bren {
  display: none;
}

#products[data-active="bren"] .zp-sarasa {
  display: none;
}

#products[data-active="bren"] .zp-bren {
  display: flex;
}

/* タブ（button） */
.ztab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px;
  border: 0;
  border-radius: 10px 10px 0 0;
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  background: #ebe8e1;
  color: #063a7f;
}

.ztab[aria-selected="true"] {
  background: #063a7f;
  color: #fff;
}

/* 下部ボタン：表示中のシリーズは薄く、もう一方を目立たせる */
.zbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 240px;
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: #063a7f;
  color: #fff;
  border: 1px solid #063a7f;
}

.zbtn[aria-selected="true"] {
  background: #fff;
  color: #6b6760;
  border-color: #d9d6ce;
}

.ztab:hover,.zbtn:hover {
  opacity: .88;
}

/* 元のインラインCSSをクラス化 */
.dc-inline-1 {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  background: #f6f4ef;
  padding: 32px 0 96px;
}

.dc-inline-2 {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.dc-inline-3 {
  font-size: 13px;
  color: #5b6070;
}

.dc-inline-4 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dc-inline-5 {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #6b21a8;
  padding: 2px 7px;
  border-radius: 4px;
}

.dc-inline-6 {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .02em;
}

.dc-inline-7 {
    /* width: 100%; */
    /* aspect-ratio: 5 / 2; */
    /* background: #e3e0d8; */
    /* border: 2px dashed #9a968c; */
    /* border-radius: 8px; */
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    /* gap: 8px; */
    /* color: #5b5850; */
}

.dc-inline-8 {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .1em;
}

.dc-inline-9 {
  font-size: 14px;
}

.dc-inline-10 {
  font-size: 16px;
  line-height: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dc-inline-11 {
  margin: 0;
}

.dc-inline-12 {
  color: #c62d22;
  font-weight: 900;
}

.dc-inline-13 {
  font-weight: 900;
}

.dc-inline-14 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: #fff;
  border-radius: 12px;
  padding: 48px 48px 56px;
}

.dc-inline-15 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dc-inline-16 {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #c62d22;
}

.dc-inline-17 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dc-inline-18 {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #1d4ed8;
  padding: 2px 7px;
  border-radius: 4px;
}

.dc-inline-19 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
}

.dc-inline-20 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 8px;
}

.dc-inline-21 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  border-bottom: 3px solid #063a7f;
}

.dc-inline-22 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dc-inline-23 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dc-inline-24 {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid #1f2433;
  padding-bottom: 8px;
}

.dc-inline-25 {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #0f766e;
  padding: 2px 7px;
  border-radius: 4px;
}

.dc-inline-26 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.dc-inline-27 {
  margin: 0;
  font-size: 14px;
  color: #000;
  line-height: 1.8;
}

.dc-inline-28 {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 18px;
}

.dc-inline-29 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #d9d6ce;
  border-radius: 10px;
  overflow: hidden;
}

.dc-inline-30 {
  aspect-ratio: 1/1;
  background: #eeece6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8a867c;
}

.dc-inline-31 {
  font-size: 12px;
}

.dc-inline-32 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 14px;
  flex-grow: 1;
}

.dc-inline-33 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.dc-inline-34 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dc-inline-35 {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f8;
  color: #1b3a6b;
  border: 1px solid #c3cfe3;
}

.dc-inline-36 {
  font-size: 12px;
  color: #000;
}

.dc-inline-37 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.dc-inline-38 {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #5b5b5b;
  padding: 3px 8px;
  border-radius: 3px;
}

.dc-inline-39 {
  font-size: 14px;
  color: #1f2433;
}

.dc-inline-40 {
  font-weight: 700;
  text-decoration: line-through;
}

.dc-inline-41 {
  color: #e0000f;
  font-size: 14px;
  line-height: 1;
}

.dc-inline-42 {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #e0000f;
  padding: 3px 8px;
  border-radius: 3px;
}

.dc-inline-43 {
  color: #e0000f;
  line-height: 1.2;
}

.dc-inline-44 {
  font-size: 24px;
  font-weight: 900;
}

.dc-inline-45 {
  font-size: 12px;
  font-weight: 700;
  color: #1f2433;
}

.dc-inline-46 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.dc-inline-47 {
  font-size: 12px;
  font-weight: 700;
  color: #000;
}

.dc-inline-48 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}

.dc-inline-49 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 4px;
  background: #c62d22;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  line-height: 1.3;
}

.dc-inline-50 {
  display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: 6px;
}

.dc-inline-51 {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff1e6;
  color: #9a3412;
  border: 1px solid #f5c49c;
}

.dc-inline-52 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed #b9b5ab;
  border-radius: 6px;
  font-size: 13px;
  color: #6b6760;
}

.dc-inline-53 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: #f6f4ef;
  border-radius: 10px;
}

.dc-inline-54 {
  font-size: 14px;
  font-weight: 700;
}

.dc-inline-55 {
  display: flex;
  gap: 12px;
}

.dc-inline-56 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dc-inline-57 {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr);
  border: 1px solid #d9d6ce;
  border-radius: 8px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.8;
}

.dc-inline-58 {
  background: #f1efe9;
  padding: 14px 18px;
  font-weight: 700;
  border-bottom: 1px solid #d9d6ce;
}

.dc-inline-59 {
  padding: 14px 18px;
  border-bottom: 1px solid #d9d6ce;
}

.dc-inline-60 {
  color: #c62d22;
}

.dc-inline-61 {
  font-size: 12px;
  color: #8a4b00;
  background: #fff4e0;
  padding: 2px 6px;
  border-radius: 4px;
}

.dc-inline-62 {
  background: #f1efe9;
  padding: 14px 18px;
  font-weight: 700;
}

.dc-inline-63 {
  margin: 0;
  padding: 14px 18px 14px 36px;
  font-size: 14px;
  line-height: 1.9;
  color: #33384a;
}

.dc-inline-64 {
  border: 2px dashed #b9b5ab;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: #6b6760;
}