*,:before,:after{box-sizing:border-box}
.quadra{width:100%;max-width:100%;margin:0 auto;padding:8px;overflow-x:hidden;color:#1f1f1f;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif}
.quadra img{display:block;max-width:100%}
.quadra .key{--accent:#777;--line:#ddd;width:100%;max-width:100%;min-width:0;display:grid;grid-template-columns:28% minmax(0,1fr) 28%;border:1px solid var(--line);margin:0 0 7px;background:#fff;overflow:hidden}
.quadra .key1{--accent:#ad7600;--line:#e6d2a6;background:linear-gradient(90deg,#fffaf1,#fff 64%)}
.quadra .key2{--accent:#6945a3;--line:#d8cceb;background:linear-gradient(90deg,#faf8ff,#fff 64%)}
.quadra .key3{--accent:#557b2f;--line:#cad7bd;background:linear-gradient(90deg,#f7faf3,#fff 64%)}
.quadra .key4{--accent:#356bb8;--line:#c7d7ef;background:linear-gradient(90deg,#f3f8ff,#fff 64%)}
.quadra .key__visual,.quadra .key__content,.quadra .key__aside{min-width:0;max-width:100%}
.quadra .key__visual{overflow:hidden;min-height:250px}
.quadra .key__visual img{width:100%;height:100%;min-height:250px;object-fit:cover}
.quadra .key__content{padding:20px 24px;overflow:hidden}
.quadra .key__aside{padding:18px 14px;display:flex;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.quadra .key__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;min-width:0}
.quadra .key__label{display:inline-block;flex:0 0 auto;background:var(--accent);color:#fff;padding:5px 12px;font-family:Georgia,"Times New Roman",serif;font-size:15px;letter-spacing:.05em}
.quadra .key h2{margin:0;color:var(--accent);font-family:"Yu Mincho","YuMincho",Georgia,serif;font-weight:500;font-size:clamp(28px,3vw,40px);line-height:1.15}
.quadra .key__sub{flex:1 1 220px;min-width:0;margin:0;color:var(--accent);font-size:14px;line-height:1.55;letter-spacing:.02em;overflow-wrap:anywhere;word-break:normal}
.quadra .key__catch{margin:17px 0 10px;font-family:"Yu Mincho","YuMincho",Georgia,serif;font-size:clamp(18px,2vw,22px);line-height:1.6;overflow-wrap:anywhere}
.quadra .key__text{margin:6px 0;font-size:13px;line-height:1.85;overflow-wrap:anywhere;word-break:normal}
.quadra .key1__aside{gap:10px}
.quadra .stat-circle{flex:0 1 128px;width:min(128px,100%);aspect-ratio:1/1;height:auto;border:1px solid var(--accent);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent);font-family:"Yu Mincho","YuMincho",Georgia,serif;text-align:center}
.quadra .stat-circle span,.quadra .stat-circle small{font-size:12px;line-height:1.35}
.quadra .stat-circle strong{font-size:clamp(30px,3vw,40px);line-height:1.05;font-weight:500}
.quadra .horse{flex:1 1 120px;width:auto;max-width:55%;height:185px;object-fit:cover;object-position:center}
.quadra .center{justify-content:center}
.quadra .circle-img{display:block;width:min(78px,100%);aspect-ratio:1/1;height:auto;border-radius:50%;object-fit:cover;border:2px solid var(--accent);padding:2px;background:#fff}
.quadra .circle-img.xl{width:min(150px,80%)}
.quadra .key__aside--wide{padding:14px 10px}
.quadra .ingredient-grid{width:100%;max-width:100%;min-width:0;display:grid;align-items:start;justify-items:center;gap:8px}
.quadra .ingredient-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.quadra .ingredient-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.quadra .ingredient-grid figure{width:100%;min-width:0;margin:0;text-align:center;color:var(--accent)}
.quadra .ingredient-grid figure .circle-img{width:min(72px,100%);margin:0 auto}
.quadra .ingredient-grid figcaption{margin-top:7px;font-size:10px;line-height:1.35;min-height:30px;overflow-wrap:anywhere}
.quadra .note{margin:6px 8px 0;text-align:right;font-size:10px;line-height:1.6;color:#777}
@media(max-width:1100px){
  .quadra .key{grid-template-columns:31% minmax(0,1fr)}
  .quadra .key__aside{grid-column:1/-1;border-top:1px solid var(--line);width:100%;padding:15px 18px}
  .quadra .key1__aside{justify-content:center}
  .quadra .horse{width:min(240px,45%);max-width:240px;height:150px}
  .quadra .ingredient-grid{max-width:720px;margin:0 auto}
  .quadra .ingredient-grid figure .circle-img{width:min(82px,100%)}
}
@media(max-width:700px){
  .quadra{padding:0}
  .quadra .key{grid-template-columns:minmax(0,1fr);margin-bottom:10px}
  .quadra .key__visual{height:220px;min-height:0}
  .quadra .key__visual img{height:220px;min-height:0}
  .quadra .key__content{padding:18px 16px}
  .quadra .key__aside{grid-column:auto;width:100%;padding:15px 16px 18px}
  .quadra .key__head{gap:7px 10px}
  .quadra .key h2{font-size:30px}
  .quadra .key__sub{flex-basis:100%;width:100%;font-size:13px}
  .quadra .key__catch{margin-top:14px;font-size:18px}
  .quadra .key__text{font-size:13px;line-height:1.8}
  .quadra .key1__aside{flex-direction:column}
  .quadra .horse{width:min(100%,320px);max-width:320px;height:auto;aspect-ratio:3/2}
  .quadra .stat-circle{width:125px;flex-basis:125px}
  .quadra .circle-img.xl{width:140px}
  .quadra .ingredient-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quadra .ingredient-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quadra .ingredient-grid figure .circle-img{width:min(72px,100%)}
  .quadra .note{padding:0 12px 12px;text-align:left}
}

@media (max-width: 700px) {

  .quadra .key1__aside {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 14px;

    width: 100%;
    padding: 16px;
  }

  .quadra .stat-circle {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    aspect-ratio: 1 / 1;
  }

  .quadra .stat-circle strong {
    font-size: 34px;
  }

  .quadra .horse {
    flex: 1 1 0;
    width: auto;
    max-width: calc(100% - 134px);
    height: 120px;
    object-fit: cover;
    object-position: center;
  }
}


/* BS140 メイン画像：BS0502と同じくスマホで横幅いっぱい */
.bs140-main-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 700px) {
  ul.sub-img.js-sub-img {
    margin-top: 70px !important;
    position: relative !important;
    clear: both !important;
  }

  .bs140-main-image {
    display: block;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;

    /*
     * 親コンテナに左右余白があっても、
     * 画面いっぱいまで広げる
     */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

}