/* static/css/article_share_flow.css */
/* メール・SMS・スマホでシェアの手順を、article.css共通の.risk-flow-horizontal等で
   表示するための補助CSS。article.css本体のカードは大きめサイズのため、
   .share-demo-set__flow配下だけ約0.7倍のサイズに上書きしている
   （他ページの表示には影響しない）。 */

.share-demo-set__flow .risk-flow-horizontal{
  gap:.5rem;
  margin:0;
  max-width:36rem;
}

.share-demo-set__flow .risk-card{
  min-height:4.9rem;
  padding:.7rem .63rem;
  border-radius:.56rem;
}

.share-demo-set__flow .risk-card__level{
  font-size:.6rem;
  padding:.18rem .46rem;
  margin-bottom:.46rem;
}

.share-demo-set__flow .risk-card p{
  font-size:.84rem;
  line-height:1.5;
}

.share-demo-set__flow .risk-arrow{
  font-size:1.26rem;
}

@media (max-width:600px){
  .share-demo-set__flow .risk-flow-horizontal{
    max-width:none;
  }

  .share-demo-set__flow .risk-card{
    min-height:0;
    padding:.55rem .5rem;
  }

  .share-demo-set__flow .risk-card p{
    font-size:.76rem;
  }

  .share-demo-set__flow .risk-card__level{
    font-size:.56rem;
  }
}