/* Selected concept 03: three softer hops, then four hand-drawn speech bubbles. */
.concept-03{--yuzu-yellow:#f4e8aa}
.headline-toolbar .preview-links{flex-wrap:wrap}
.concept-03 .contact-greeting .komaru-yellow{color:var(--yellow)}
.concept-03 .headline-variant .greeting-line{min-height:2.2em}
.concept-03 .contact-greeting .greeting-line{display:block;white-space:nowrap}
.concept-03 .contact-greeting em{display:block;white-space:nowrap}
.concept-03 .contact-greeting .yuzu-letter{
  display:inline-block;width:1.7em;height:1.7em;object-fit:contain;
  vertical-align:-.36em;margin:0 -.04em 0 -.08em;
}
.concept-03 .contact-greeting .attached-letter{
  width:2.1em;height:2.1em;vertical-align:-.75em;margin-top:-.2em;
}
.concept-03 .wizard-aside-art{
  position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:84px 184px 84px;gap:16px 12px;
  flex:0 0 auto;min-height:0;height:auto;width:100%;
  margin:28px 0 20px;padding:0;isolation:isolate;
}
.concept-03 .wizard-aside-art::before{
  position:relative;grid-column:1 / -1;grid-row:2;place-self:center;
  width:182px;height:182px;left:auto;top:auto;
  transform:none;background:#416644;z-index:-1;
}
.concept-03 .wizard-aside-art img{
  position:relative;grid-column:1 / -1;grid-row:2;place-self:center;
  left:auto;top:auto;width:160px;height:160px;
  margin:0;transform:rotate(-8deg);transform-origin:50% 90%;
}
.concept-03 .wizard-aside-art .speech{
  position:relative;display:grid;place-items:center;color:var(--green);z-index:2;
  width:100%;max-width:180px;height:100%;padding:10px 18px;font-size:12px;
  line-height:1.8;text-align:center;border:0;border-radius:0;
  background:transparent;box-shadow:none;
  transform:rotate(var(--bubble-tilt));opacity:1;
}
.concept-03 .wizard-aside-art .speech::after{content:none}
.concept-03 .speech .bubble-shape{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  stroke:none;pointer-events:none;
}
.concept-03 .speech .bubble-text{position:relative;z-index:1}
.concept-03 .speech .bubble-paper{fill:#fff}
.concept-03 .speech .bubble-outline{
  fill:none;stroke:#173f2c;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.concept-03 .wizard-aside-art .s1{
  --bubble-tilt:-3deg;--bubble-delay:4.2s;
  grid-column:1;grid-row:1;justify-self:start;
  left:auto;top:auto;right:auto;bottom:auto;
}
.concept-03 .wizard-aside-art .s2{
  --bubble-tilt:3deg;--bubble-delay:4.7s;
  grid-column:2;grid-row:1;justify-self:end;
  right:auto;top:auto;left:auto;bottom:auto;
}
.concept-03 .wizard-aside-art .s3{
  --bubble-tilt:-2deg;--bubble-delay:5.2s;
  grid-column:1;grid-row:3;justify-self:start;
  left:auto;bottom:auto;right:auto;top:auto;
}
.concept-03 .wizard-aside-art .s4{
  --bubble-tilt:2deg;--bubble-delay:5.7s;
  grid-column:2;grid-row:3;justify-self:end;
  left:auto;bottom:auto;right:auto;top:auto;
}
.concept-03 .wizard-aside-foot{margin-top:0}
.concept-03 .wizard-aside-art.is-waiting .speech{opacity:0}
.concept-03 .wizard-aside-art.is-playing img{
  animation:yuzu-gentle-bounce 4.2s ease-in-out 1 both;
}
.concept-03 .wizard-aside-art.is-playing .speech{
  animation:yuzu-speech-arrive .4s cubic-bezier(.2,.7,.3,1) var(--bubble-delay) 1 both;
}
@keyframes yuzu-gentle-bounce{
  0%{transform:translateY(0) rotate(-8deg) scale(1)}
  21%{transform:translateY(-52px) rotate(-4deg) scale(1)}
  42%{transform:translateY(0) rotate(-8deg) scale(1.035,.97)}
  58%{transform:translateY(-27px) rotate(-5.5deg) scale(1)}
  74%{transform:translateY(0) rotate(-8deg) scale(1.02,.985)}
  85%{transform:translateY(-11px) rotate(-7deg) scale(1)}
  96%{transform:translateY(0) rotate(-8deg) scale(1.01,.99)}
  100%{transform:translateY(0) rotate(-8deg) scale(1)}
}
@keyframes yuzu-speech-arrive{
  from{opacity:0;transform:translateY(9px) scale(.96) rotate(var(--bubble-tilt))}
  to{opacity:1;transform:translateY(0) scale(1) rotate(var(--bubble-tilt))}
}
.concept-03 .topic-button{
  display:block;min-height:95px;padding:18px 20px;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.concept-03 .topic-button[aria-pressed="true"]{
  background:var(--yuzu-yellow);border-color:var(--green);
  box-shadow:inset 0 0 0 1px var(--green);
}
.concept-03 .topic-button:hover,
.concept-03 .topic-button:focus-visible{
  border-color:var(--green);box-shadow:inset 0 0 0 2px var(--green);
}
.concept-03 .topic-button strong{font-size:17px;line-height:1.65}
.concept-03 .topic-button small{font-size:12px;line-height:1.8;margin-top:5px}
@media(max-width:1050px) and (min-width:761px){
  .concept-03 .wizard-aside-art .speech{font-size:11px;padding:8px 11px}
}
@media(max-width:760px){
  .headline-toolbar .preview-label{flex-wrap:wrap}
  .headline-toolbar .preview-label b{white-space:normal}
  .headline-toolbar .preview-label small{display:none}
  .headline-toolbar .preview-links .compare{margin-right:0}
  .headline-toolbar .preview-links .compare:first-child{margin-right:auto}
  .concept-03 .wizard-aside-art{
    right:auto;bottom:auto;grid-template-rows:88px 166px 88px;
    gap:14px 8px;margin:24px 0 18px;opacity:1;
  }
  .concept-03 .wizard-aside-art::before{width:164px;height:164px}
  .concept-03 .wizard-aside-art img{width:144px;height:144px}
  .concept-03 .wizard-aside-art .speech{font-size:11px;padding:8px 10px}
  .concept-03 .topic-button{padding:17px 16px;min-height:91px}
  .concept-03 .topic-button strong{font-size:16px;line-height:1.7}
  .concept-03 .topic-button small{font-size:11px;line-height:1.85}
}
@media(max-width:360px){
  .concept-03 .wizard-aside h1{font-size:24px}
  .concept-03 .wizard-aside-art .speech{font-size:10.5px;padding:8px}
}
@media(prefers-reduced-motion:reduce){
  .concept-03 .wizard-aside-art.is-waiting .speech,
  .concept-03 .wizard-aside-art.is-playing .speech{opacity:1;animation:none!important}
  .concept-03 .wizard-aside-art.is-playing img{animation:none!important}
}