@charset "UTF-8";

/* =========================================================
   Awashima Coffee
   KNOWLEDGE / COFFEE TERROIR

   Article-specific stylesheet for:
   /user_data/knowledge/coffee-terroir

   Load AFTER knowledge-common.css.
   Base layout:
   READING : 820px
   WIDE    : 920px
   FRAME   : 960px
========================================================= */

/* =========================================================
   HERO / TERROIR
========================================================= */

.aw-page-coffeeTerroir .aw-ktHero .aw-kaHero__image img {
  object-position: center 47%;
  filter: brightness(1.03) saturate(.98);
}

.aw-page-coffeeTerroir .aw-ktHero .aw-kaHero__image::after {
  display: none;
}


/* =========================================================
   SHARED FIGURE HEAD
========================================================= */

.aw-ktFigureHead {
  width: min(100%, var(--ka-reading));
  margin: 0 auto 38px;
}

.aw-ktFigureHead > span {
  display: block;
  margin: 0 0 8px;
  color: var(--ka-accent);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
}

.aw-ktFigureHead > strong {
  display: block;
  color: var(--ka-title);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .045em;
}


/* =========================================================
   01 / PLACE
   COUNTRY TO TREE / 5 TRANSPARENT PNGs
========================================================= */

.aw-ktScaleFigure {
  width: min(100%, var(--ka-wide));
  margin: 76px auto 8px;
  padding: 42px 38px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: rgba(255, 255, 255, .46);
}

.aw-ktScaleFigure__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: min(100%, 700px);
  margin: 0 auto;
}

.aw-ktScaleFigure__level {
  position: relative;
}

.aw-ktScaleFigure__level > img {
  display: block;
  width: 100%;
  height: auto;
}

.aw-ktScaleFigure__level--country  { width: 100%; }
.aw-ktScaleFigure__level--region   { width: 68%; }
.aw-ktScaleFigure__level--mountain { width: 44%; }
.aw-ktScaleFigure__level--farm     { width: 26%; }
.aw-ktScaleFigure__level--tree     { width: 14%; }

.aw-ktScaleFigure__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  width: 126px;
  transform: translateY(-50%);
}

.aw-ktScaleFigure__label span,
.aw-ktScaleFigure__label strong {
  display: block;
}

.aw-ktScaleFigure__label span {
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
}

.aw-ktScaleFigure__label strong {
  margin-top: 4px;
  color: var(--ka-title);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}

.aw-ktScaleFigure__zoom {
  display: none;
}


/* =========================================================
   02 / ALTITUDE
   TRANSPARENT PNG + HTML LABELS
========================================================= */

.aw-ktAltitudeFigure {
  width: min(100%, var(--ka-wide));
  margin: 76px auto 12px;
  padding: 42px 38px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: #faf7f1;
}

.aw-ktAltitudeFigure__visual {
  position: relative;
  width: 100%;
}

.aw-ktAltitudeFigure__visual > img {
  display: block;
  width: 100%;
  height: auto;
}

.aw-ktAltitudeFigure__label {
  position: absolute;
  max-width: 34%;
}

.aw-ktAltitudeFigure__label span,
.aw-ktAltitudeFigure__label strong {
  display: block;
}

.aw-ktAltitudeFigure__label span {
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .14em;
}

.aw-ktAltitudeFigure__label strong {
  margin-top: 5px;
  color: #6f635a;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.75;
}

.aw-ktAltitudeFigure__label--lower {
  left: 12%;
  bottom: 7%;
  text-align: left;
}

.aw-ktAltitudeFigure__label--lower span {
  color: rgba(255, 249, 239, .78);
}

.aw-ktAltitudeFigure__label--lower strong {
  color: #fffaf1;
}

.aw-ktAltitudeFigure__label--higher {
  top: 4%;
  left: 35%;
  right: auto;
  width: 34%;
  max-width: none;
  text-align: right;
}

.aw-ktAltitudeFigure__label--higher span,
.aw-ktAltitudeFigure__label--higher strong {
  width: 100%;
  text-align: right;
}


/* =========================================================
   03 / SLOPE & SUN
   2 TRANSPARENT PNGs
========================================================= */

.aw-ktSlopeFigure {
  width: min(100%, var(--ka-wide));
  margin: 76px auto 8px;
  padding: 42px 38px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: rgba(255, 255, 255, .44);
}

.aw-ktSlopeFigure__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.aw-ktSlopeFigure__grid article {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid #b9a693;
}

.aw-ktSlopeFigure__image img {
  display: block;
  width: 100%;
  height: auto;
}

.aw-ktSlopeFigure__grid span,
.aw-ktSlopeFigure__grid strong,
.aw-ktSlopeFigure__grid small {
  display: block;
}

.aw-ktSlopeFigure__grid span {
  margin-top: 16px;
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
}

.aw-ktSlopeFigure__grid strong {
  margin-top: 8px;
  color: var(--ka-title);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
}

.aw-ktSlopeFigure__grid small {
  margin-top: 8px;
  color: #70645b;
  font-size: 11px;
  line-height: 1.8;
}


/* =========================================================
   04 / RAIN CALENDAR
========================================================= */

.aw-ktRainFigure {
  width: min(100%, var(--ka-wide));
  margin: 76px auto 8px;
  padding: 42px 38px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: #faf7f1;
}

.aw-ktRainFigure__questions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.aw-ktRainFigure__questions article {
  padding: 24px 22px 26px;
  border-top: 1px solid #b9a693;
  background: rgba(255, 255, 255, .56);
}

.aw-ktRainFigure__questions span,
.aw-ktRainFigure__questions strong,
.aw-ktRainFigure__questions small {
  display: block;
}

.aw-ktRainFigure__questions span {
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
}

.aw-ktRainFigure__questions strong {
  margin-top: 9px;
  color: var(--ka-title);
  font-size: 17px;
  font-weight: 400;
}

.aw-ktRainFigure__questions small {
  margin-top: 10px;
  color: #74675d;
  font-size: 11px;
  line-height: 1.8;
}

.aw-ktRainFigure__flow {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.aw-ktRainFigure__flow span {
  color: #7e6a5a;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
}

.aw-ktRainFigure__flow i {
  height: 1px;
  background: repeating-linear-gradient(90deg, #aa9989 0 6px, transparent 6px 11px);
}

/* =========================================================
   05 / SOIL
   3 TRANSPARENT PNGs
========================================================= */

.aw-ktSoilFigure {
  width: min(100%, var(--ka-wide));
  margin: 76px auto 8px;
  padding: 42px 38px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: rgba(255, 255, 255, .48);
}

.aw-ktSoilFigure__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.aw-ktSoilFigure__grid article {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid #ae9a88;
}

.aw-ktSoilFigure__image img {
  display: block;
  width: 100%;
  height: auto;
}

.aw-ktSoilFigure__grid span,
.aw-ktSoilFigure__grid strong,
.aw-ktSoilFigure__grid small {
  display: block;
}

.aw-ktSoilFigure__grid span {
  margin-top: 14px;
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
}

.aw-ktSoilFigure__grid strong {
  margin-top: 7px;
  color: var(--ka-title);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

.aw-ktSoilFigure__grid small {
  margin-top: 7px;
  color: #74675d;
  font-size: 10.5px;
  line-height: 1.7;
}

.aw-ktSoilFigure__result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 30px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--ka-line);
}

.aw-ktSoilFigure__result span {
  color: #6f5f52;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
}

.aw-ktSoilFigure__result b {
  color: #a08e7d;
  font-size: 16px;
  font-weight: 400;
}


/* =========================================================
   HYDRANGEA NOTE
   2 TRANSPARENT PNGs + HTML LABELS
========================================================= */

.aw-ktHydrangeaNote__visual {
  width: min(100%, var(--ka-reading));
  margin: 42px 0 0;
  padding-top: 32px;
  border-top: 1px solid rgba(111, 87, 67, .18);
}

.aw-ktHydrangeaNote__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
}

.aw-ktHydrangeaNote__pair figure {
  min-width: 0;
  margin: 0;
}

.aw-ktHydrangeaNote__pair img {
  display: block;
  width: 100%;
  height: auto;
}

.aw-ktHydrangeaNote__arrow {
  display: none;
}

.aw-ktHydrangeaNote__pair figcaption {
  margin-top: 14px;
  text-align: center;
}

.aw-ktHydrangeaNote__pair span,
.aw-ktHydrangeaNote__pair strong,
.aw-ktHydrangeaNote__pair small {
  display: block;
}

.aw-ktHydrangeaNote__pair span {
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .14em;
}

.aw-ktHydrangeaNote__pair strong {
  margin-top: 6px;
  color: var(--ka-title);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}

.aw-ktHydrangeaNote__pair small {
  margin-top: 6px;
  color: #6f635a;
  font-size: 10.5px;
  line-height: 1.7;
}


/* =========================================================
   VOLCANIC NOTE
========================================================= */

.aw-ktVolcanicNote { margin-top: 74px; }

.aw-ktVolcanicNote__strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: min(100%, var(--ka-reading));
  margin-top: 42px;
  padding-top: 32px;
  border-top: 1px solid rgba(111, 87, 67, .18);
}

.aw-ktVolcanicNote__strip span,
.aw-ktVolcanicNote__strip strong { display: block; }

.aw-ktVolcanicNote__strip span {
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
}

.aw-ktVolcanicNote__strip strong {
  margin-top: 7px;
  color: var(--ka-title);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}

.aw-ktVolcanicNote__strip > i {
  color: #a28f7e;
  font-style: normal;
  font-size: 17px;
}

/* =========================================================
   06 / MICROCLIMATE
   SIMPLE CROSS DIAGRAM
========================================================= */

.aw-ktMicroFigure {
  width: min(100%, 760px);
  margin: 76px auto 8px;
  padding: 42px 36px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: #faf7f1;
}

.aw-ktMicroFigure__map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 340px;
  background: transparent;
}

.aw-ktMicroFigure__map::before,
.aw-ktMicroFigure__map::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: rgba(111, 87, 67, .20);
  pointer-events: none;
}

.aw-ktMicroFigure__map::before {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  transform: translateX(-.5px);
}

.aw-ktMicroFigure__map::after {
  top: 50%;
  left: 8%;
  right: 8%;
  height: 1px;
  transform: translateY(-.5px);
}

.aw-ktMicroFigure__cell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  padding: 28px 24px;
  background: transparent;
  text-align: center;
}

.aw-ktMicroFigure__cell span {
  display: block;
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
}

.aw-ktMicroFigure__cell strong {
  display: block;
  margin-top: 9px;
  color: var(--ka-title);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

.aw-ktMicroFigure__cell small {
  display: block;
  margin-top: 7px;
  color: #74675d;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
}

.aw-ktMicroFigure__center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 128px;
  height: 128px;
  border: 1px solid #9f8d7d;
  border-radius: 50%;
  background: #faf7f1;
  text-align: center;
  transform: translate(-50%, -50%);
}

.aw-ktMicroFigure__center small {
  display: block;
  color: #8d7a69;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .11em;
}

.aw-ktMicroFigure__center strong {
  display: block;
  margin-top: 8px;
  color: var(--ka-title);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}


/* =========================================================
   07 / G × E
========================================================= */

.aw-ktGxeFigure {
  width: min(100%, var(--ka-wide));
  margin: 76px auto 8px;
  padding: 42px 38px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: rgba(255, 255, 255, .48);
}

.aw-ktGxeFigure__equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.aw-ktGxeFigure__equation > div {
  min-height: 168px;
  padding: 30px 24px;
  border-top: 1px solid #b5a18e;
  background: #faf7f1;
}

.aw-ktGxeFigure__equation > b {
  color: #9f8a78;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;
}

.aw-ktGxeFigure__equation span,
.aw-ktGxeFigure__equation strong,
.aw-ktGxeFigure__equation small { display: block; }

.aw-ktGxeFigure__equation span {
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
}

.aw-ktGxeFigure__equation strong {
  margin-top: 12px;
  color: var(--ka-title);
  font-size: 21px;
  font-weight: 400;
}

.aw-ktGxeFigure__equation small {
  margin-top: 12px;
  color: #75685e;
  font-size: 11px;
  line-height: 1.7;
}

.aw-ktGxeFigure__result { background: rgba(238, 231, 220, .70) !important; }

/* =========================================================
   08 / YEAR
========================================================= */

.aw-ktYearFigure {
  width: min(100%, var(--ka-wide));
  margin: 76px auto 8px;
  padding: 42px 38px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: #faf7f1;
}

.aw-ktYearFigure__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.aw-ktYearFigure__grid article {
  min-height: 154px;
  padding: 27px 22px;
  border-top: 1px solid #b5a18e;
  background: rgba(255, 255, 255, .58);
}

.aw-ktYearFigure__grid span,
.aw-ktYearFigure__grid strong,
.aw-ktYearFigure__grid small { display: block; }

.aw-ktYearFigure__grid span {
  color: var(--ka-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .13em;
}

.aw-ktYearFigure__grid strong {
  margin-top: 14px;
  color: var(--ka-title);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .04em;
}

.aw-ktYearFigure__grid small {
  margin-top: 12px;
  color: #7d6f63;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 8px;
  line-height: 1.7;
  letter-spacing: .06em;
}

.aw-ktYearFigure__neq {
  color: #a08d7c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
}

/* =========================================================
   09 / HUMAN
========================================================= */

.aw-ktHumanFigure {
  width: min(100%, var(--ka-wide));
  margin: 76px auto 8px;
  padding: 42px 38px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: rgba(255, 255, 255, .48);
}

.aw-ktHumanFigure__flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.aw-ktHumanFigure__flow::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 8.333%;
  right: 8.333%;
  height: 1px;
  background: var(--ka-line-dark);
}

.aw-ktHumanFigure__flow li {
  position: relative;
  padding: 40px 10px 0;
  text-align: center;
}

.aw-ktHumanFigure__flow li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid var(--ka-accent);
  border-radius: 50%;
  background: var(--ka-paper);
  transform: translateX(-50%);
}

.aw-ktHumanFigure__flow span,
.aw-ktHumanFigure__flow strong { display: block; }

.aw-ktHumanFigure__flow span {
  color: #8b796b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .10em;
}

.aw-ktHumanFigure__flow strong {
  margin-top: 8px;
  color: var(--ka-title);
  font-size: 14px;
  font-weight: 400;
}

/* =========================================================
   10 / MOVING TERROIR
========================================================= */

.aw-ktMovingFigure {
  width: min(100%, var(--ka-wide));
  margin: 76px auto 8px;
  padding: 42px 38px 46px;
  border-top: 1px solid var(--ka-line-dark);
  border-bottom: 1px solid var(--ka-line);
  background: #faf7f1;
}

.aw-ktMovingFigure__image {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #faf7f1;
}

.aw-ktMovingFigure__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   SP
========================================================= */

@media screen and (max-width: 767px) {

  .aw-page-coffeeTerroir .aw-ktHero .aw-kaHero__image img {
    object-position: 58% 44%;
  }

  .aw-page-coffeeTerroir .aw-ktHero .aw-pageHero__label,
  .aw-page-coffeeTerroir .aw-ktHero .aw-pageHero__title,
  .aw-page-coffeeTerroir .aw-ktHero .aw-pageHero__lead {
    text-shadow:
      0 1px 2px rgba(18, 12, 8, .88),
      0 3px 12px rgba(18, 12, 8, .54);
  }

  .aw-page-coffeeTerroir .aw-ktHero .aw-pageHero__label {
    font-weight: 600;
  }

  .aw-ktFigureHead {
    margin-bottom: 28px;
  }

  .aw-ktFigureHead > span {
    font-size: 9px;
  }

  .aw-ktFigureHead > strong {
    font-size: 21px;
  }

  .aw-ktScaleFigure,
  .aw-ktAltitudeFigure,
  .aw-ktSlopeFigure,
  .aw-ktRainFigure,
  .aw-ktSoilFigure,
  .aw-ktMicroFigure,
  .aw-ktGxeFigure,
  .aw-ktYearFigure,
  .aw-ktHumanFigure,
  .aw-ktMovingFigure {
    margin: 54px auto 8px;
    padding: 34px 20px 36px;
  }


  /* =======================================================
     COUNTRY TO TREE
  ======================================================= */

  .aw-ktScaleFigure__stack {
    width: 75%;
    margin-left: 0;
    margin-right: auto;
    gap: 3px;
  }

  .aw-ktScaleFigure__label {
    left: calc(100% + 6px);
    width: 82px;
  }

  .aw-ktScaleFigure__label span,
  .aw-ktScaleFigure__label strong {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .aw-ktScaleFigure__label span {
    font-size: 6.5px;
    line-height: 1.35;
    letter-spacing: .09em;
  }

  .aw-ktScaleFigure__label strong {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.4;
  }

  /* zoom button */
  .aw-ktScaleFigure__zoom {
    display: block;
    width: max-content;
    margin: 22px auto 0;
  }

  .aw-ktScaleFigure__zoom > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 138px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(103, 80, 64, .32);
    border-radius: 999px;
    background: #fbf8f2;
    color: #5f4a3d;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .08em;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  .aw-ktScaleFigure__zoom > summary::-webkit-details-marker {
    display: none;
  }

  .aw-ktScaleFigure__zoom > summary::marker {
    content: "";
  }

  .aw-ktScaleFigure__zoom > summary::before {
    content: "＋";
    font-size: 13px;
    line-height: 1;
  }

  .aw-ktScaleFigure__zoomClose {
    display: none;
  }

  /* full-screen enlarged view */
  .aw-ktScaleFigure__zoomOverlay {
    display: none;
  }

  .aw-ktScaleFigure__zoom[open] > summary {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10002;
    min-width: 88px;
    background: #fffdf9;
    box-shadow: 0 4px 18px rgba(40, 28, 20, .12);
  }

  .aw-ktScaleFigure__zoom[open] > summary::before {
    content: "×";
  }

  .aw-ktScaleFigure__zoom[open] .aw-ktScaleFigure__zoomOpen {
    display: none;
  }

  .aw-ktScaleFigure__zoom[open] .aw-ktScaleFigure__zoomClose {
    display: inline;
  }

  .aw-ktScaleFigure__zoom[open] .aw-ktScaleFigure__zoomOverlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 74px 16px 42px;
    background: rgba(250, 247, 241, .985);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .aw-ktScaleFigure__zoomCanvas {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .aw-ktScaleFigure__zoomCanvas .aw-ktScaleFigure__stack {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    gap: 8px;
  }

  .aw-ktScaleFigure__zoomCanvas .aw-ktScaleFigure__label {
    position: static;
    width: auto;
    margin-top: 4px;
    text-align: center;
    transform: none;
  }

  .aw-ktScaleFigure__zoomCanvas .aw-ktScaleFigure__label span,
  .aw-ktScaleFigure__zoomCanvas .aw-ktScaleFigure__label strong {
    white-space: nowrap;
  }

  .aw-ktScaleFigure__zoomCanvas .aw-ktScaleFigure__label span {
    font-size: 8px;
    letter-spacing: .10em;
  }

  .aw-ktScaleFigure__zoomCanvas .aw-ktScaleFigure__label strong {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
  }


  /* =======================================================
     ALTITUDE
  ======================================================= */

  .aw-ktAltitudeFigure__label {
    max-width: 46%;
  }

  .aw-ktAltitudeFigure__label span {
    font-size: 6.5px;
    line-height: 1.3;
  }

  .aw-ktAltitudeFigure__label strong {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.45;
  }

  .aw-ktAltitudeFigure__label--lower {
    left: 12%;
    bottom: 7%;
  }

  .aw-ktAltitudeFigure__label--higher {
    top: 2%;
    left: 30%;
    right: auto;
    width: 40%;
    max-width: none;
    text-align: right;
  }

  .aw-ktAltitudeFigure__label--higher span,
  .aw-ktAltitudeFigure__label--higher strong {
    text-align: right;
  }


  /* =======================================================
     SLOPE & SUN
  ======================================================= */

  .aw-ktSlopeFigure__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .aw-ktSlopeFigure__grid span {
    font-size: 8px;
  }

  .aw-ktSlopeFigure__grid strong {
    font-size: 14px;
  }

  .aw-ktSlopeFigure__grid small {
    font-size: 10px;
  }


  /* =======================================================
     RAIN
  ======================================================= */

  .aw-ktRainFigure__questions {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .aw-ktRainFigure__questions article {
    padding: 20px 18px 22px;
  }

  .aw-ktRainFigure__flow {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 7px;
    padding-left: 15px;
    border-left: 1px solid #aa9989;
  }

  .aw-ktRainFigure__flow i {
    display: none;
  }


  /* =======================================================
     SOIL
  ======================================================= */

  .aw-ktSoilFigure__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .aw-ktSoilFigure__grid span {
    font-size: 8px;
  }

  .aw-ktSoilFigure__grid strong {
    font-size: 14px;
  }

  .aw-ktSoilFigure__grid small {
    font-size: 10px;
  }

  .aw-ktSoilFigure__result {
    flex-wrap: wrap;
    gap: 9px 11px;
    margin-top: 22px;
    padding-top: 20px;
  }

  .aw-ktSoilFigure__result span {
    font-size: 7.5px;
  }


  /* =======================================================
     HYDRANGEA
  ======================================================= */

  .aw-ktHydrangeaNote__visual {
    margin-top: 34px;
    padding-top: 26px;
  }

  .aw-ktHydrangeaNote__pair {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .aw-ktHydrangeaNote__pair figcaption {
    margin-top: 10px;
  }

  .aw-ktHydrangeaNote__pair strong {
    font-size: 12.5px;
  }

  .aw-ktHydrangeaNote__pair small {
    font-size: 9.5px;
  }


  /* =======================================================
     VOLCANIC NOTE
  ======================================================= */

  .aw-ktVolcanicNote {
    margin-top: 58px;
  }

  .aw-ktVolcanicNote__strip {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 34px;
  }

  .aw-ktVolcanicNote__strip > i {
    justify-self: start;
    transform: rotate(90deg);
  }


  /* =======================================================
     MICROCLIMATE
  ======================================================= */

  .aw-ktMicroFigure__map {
    min-height: 270px;
  }

  .aw-ktMicroFigure__map::before {
    top: 7%;
    bottom: 7%;
  }

  .aw-ktMicroFigure__map::after {
    left: 6%;
    right: 6%;
  }

  .aw-ktMicroFigure__cell {
    min-height: 135px;
    padding: 18px 12px;
  }

  .aw-ktMicroFigure__cell span {
    font-size: 7px;
  }

  .aw-ktMicroFigure__cell strong {
    margin-top: 6px;
    font-size: 13px;
  }

  .aw-ktMicroFigure__cell small {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.55;
  }

  .aw-ktMicroFigure__center {
    width: 96px;
    height: 96px;
  }

  .aw-ktMicroFigure__center small {
    font-size: 6.5px;
  }

  .aw-ktMicroFigure__center strong {
    margin-top: 5px;
    font-size: 13px;
  }


  /* =======================================================
     G × E
  ======================================================= */

  .aw-ktGxeFigure__equation {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .aw-ktGxeFigure__equation > div {
    min-height: 0;
    padding: 22px 18px;
    border-top: 0;
  }

  .aw-ktGxeFigure__equation > b {
    justify-self: center;
    margin: 10px 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
  }

  .aw-ktGxeFigure__equation > b:last-of-type {
    transform: rotate(90deg);
  }


  /* =======================================================
     YEAR
  ======================================================= */

  .aw-ktYearFigure__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .aw-ktYearFigure__grid article {
    min-height: 0;
    padding: 22px 18px;
    border-top: 0;
  }

  .aw-ktYearFigure__neq {
    justify-self: center;
    margin: 10px 0;
    padding: 0;
    font-size: 17px;
    line-height: 1;
  }


  /* =======================================================
     HUMAN
  ======================================================= */

  .aw-ktHumanFigure__flow {
    display: block;
    padding-left: 30px;
  }

  .aw-ktHumanFigure__flow::before {
    top: 5px;
    bottom: 5px;
    left: 7px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .aw-ktHumanFigure__flow li {
    min-height: 62px;
    padding: 0 0 22px 18px;
    text-align: left;
  }

  .aw-ktHumanFigure__flow li:last-child {
    min-height: 0;
    padding-bottom: 0;
  }

  .aw-ktHumanFigure__flow li::before {
    top: 5px;
    left: -23px;
    transform: translate(-50%, -50%);
  }

  .aw-ktHumanFigure__flow strong {
    margin-top: 4px;
  }

}


/* =========================================================
   VERY SMALL SP
========================================================= */

@media screen and (max-width: 380px) {

  .aw-ktScaleFigure,
  .aw-ktAltitudeFigure,
  .aw-ktSlopeFigure,
  .aw-ktRainFigure,
  .aw-ktSoilFigure,
  .aw-ktMicroFigure,
  .aw-ktGxeFigure,
  .aw-ktYearFigure,
  .aw-ktHumanFigure,
  .aw-ktMovingFigure {
    padding-left: 16px;
    padding-right: 16px;
  }

  .aw-ktScaleFigure__stack {
    width: 74%;
  }

  .aw-ktScaleFigure__label {
    left: calc(100% + 5px);
    width: 78px;
  }

  .aw-ktScaleFigure__label span {
    font-size: 6.2px;
  }

  .aw-ktScaleFigure__label strong {
    font-size: 10px;
  }

  .aw-ktAltitudeFigure__label--lower {
    left: 11%;
    bottom: 6%;
  }

  .aw-ktAltitudeFigure__label--higher {
    top: 1%;
    left: 27%;
    width: 43%;
  }

  .aw-ktAltitudeFigure__label strong {
    font-size: 8.5px;
  }

  .aw-ktMicroFigure__map {
    min-height: 250px;
  }

  .aw-ktMicroFigure__cell {
    min-height: 125px;
    padding: 16px 10px;
  }

  .aw-ktMicroFigure__cell small {
    font-size: 8.5px;
  }

  .aw-ktMicroFigure__center {
    width: 90px;
    height: 90px;
  }

  .aw-ktMicroFigure__center strong {
    font-size: 12.5px;
  }

}