@charset "utf-8";

/* エラーを修正したシステム共通設定 */
.wcimgsize0 { border: 0px solid currentColor !important; border-image: none !important; }
.wcimgsize1 { border: 2px solid currentColor !important; border-image: none !important; }
.wcimgsize2 { border: 4px solid currentColor !important; border-image: none !important; }
.wcimgsize3 { border: 6px solid currentColor !important; border-image: none !important; }
.wcimgsize4 { border: 8px solid currentColor !important; border-image: none !important; }
.wcimgsize5 { border: 10px solid currentColor !important; border-image: none !important; }
.wcimgsize6 { border: 12px solid currentColor !important; border-image: none !important; }
.wcimgsize7 { border: 14px solid currentColor !important; border-image: none !important; }
.wcimgsize8 { border: 16px solid currentColor !important; border-image: none !important; }
.wcimgsize9 { border: 18px solid currentColor !important; border-image: none !important; }
.wcimgsize10 { border: 20px solid currentColor !important; border-image: none !important; }

.wcfontsize1 { font-size: 10px !important; }
.wcfontsize2 { font-size: 12px !important; }
.wcfontsize3 { font-size: 14px !important; }
.wcfontsize4 { font-size: 18px !important; }
.wcfontsize5 { font-size: 23px !important; }
.wcfontsize6 { font-size: 33px !important; }
.wcfontsize7 { font-size: 45px !important; }

.wc_anctxt { vertical-align: top; }
.wc_anctxt img { vertical-align: top; }

.c249af12201 { color: rgb(255, 0, 0) !important; }
.c249af51481 { color: rgb(255, 0, 0) !important; }


/* ========================================================
   ▼ スマホ（画面幅680px以下）のキノコ表示・赤ライン・アニメーション設定
======================================================== */
@media screen and (max-width: 680px) {
  /* バナーの隙間と配置を調整 */
  html body .wrap-banners .bn.bn-03, 
  html body .wrap-banners .bn.bn-04 { 
    margin-top: 60px !important; 
  } 
  html body .wrap-banners .bn { 
    width: 100% !important; 
    max-width: 320px !important; 
    position: relative !important; 
  } 
  
  /* スマホにキノコを強制表示 */
  html body .wrap-banners .bn.bn-04 .bn-title:before { 
    display: block !important; 
    content: "" !important; 
    background: url("common/img/shokai-bn-ico04.png") no-repeat !important; 
    background-size: contain !important; 
    width: 60px !important; 
    height: 60px !important; 
    position: absolute !important; 
    z-index: 9999 !important; 
    top: -50px !important; 
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    /* 専用のアニメーションを割り当て */
    animation: wc-kinoko-jump 1.5s 0s infinite linear !important; 
  } 
  
  /* 文字の下線を強制的に薄い赤色にする */
  html body .wrap-banners .bn.bn-04 .bn-title a:after { 
    background: #FF8D8D !important; 
  } 
}

/* スマホ用のキノコがぴょこぴょこ動くレシピ */
@keyframes wc-kinoko-jump {
  0%   { transform: translateY(0) scale(1, 1); }
  10%  { transform: translateY(2px) scale(1.1, 0.9); }
  30%  { transform: translateY(-15px) scale(0.9, 1.1); }
  50%  { transform: translateY(0) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}