/* ===== head style ===== */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;word-wrap:break-word}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],/* 1 */

/* ===== head style ===== */
body{font-size:17px;background-color:#F4F4F4;user-select:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none}@media screen and (min-width: 920px){body{width:620px;margin:0 auto}}body .article-header-wrapper img{max-width:100%}body .article-body{position:relative;font-size:17px;line-height:1.8;padding:15px 20px;background-color:#ffffff}body .article-body span,body .article-body p,body .article-body div,body .article-body h1,body .article-body h2,body .article-body h3,body .article-body h4,body .article-body h5,body .article-body h6{max-width:100%}body .article-body .sb-font-bold{font-weight:bold}body .article-body .sb-color-black{color:#000}body .article-body .sb-color-red{color:#ff0000}body .article-body .sb-color-blue{color:#0000ff}body .article-body .sb-align-left{display:block;text-align:left}body .article-body .sb-align-center{display:block;text-align:center}body .article-body .sb-align-right{display:block;text-align:right}body .article-body .sb-bg-gray{background:linear-gradient(to right, #eee 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, #eee 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out;background-position:bottom 0 right 100%}body .article-body .sb-bg-white{background:linear-gradient(to right, #fff 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, #fff 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out;background-position:bottom 0 right 100%}body .article-body .sb-bg-black{background:linear-gradient(to right, #000 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, #000 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out;background-position:bottom 0 right 100%}body .article-body .sb-bg-red{background:linear-gradient(to right, red 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, red 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out;background-position:bottom 0 right 100%}body .article-body .sb-bg-green{background:linear-gradient(to right, lime 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, lime 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out;background-position:bottom 0 right 100%}body .article-body .sb-bg-yellow{background:linear-gradient(to right, #ffee57 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, #ffee57 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out;background-position:bottom 0 right 100%}body .article-body .sb-bg-blue{background:linear-gradient(to right, blue 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, blue 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out;background-position:bottom 0 right 100%}body .article-body .sb-fs-10{font-size:10px}body .article-body .sb-fs-13{font-size:13px}body .article-body .sb-fs-15{font-size:15px}body .article-body .sb-fs-17{font-size:17px}body .article-body .sb-fs-19{font-size:19px}body .article-body .sb-fs-21{font-size:21px}body .article-body .sb-fs-23{font-size:23px}body .article-body .sb-fs-25{font-size:25px}body .article-body .sb-fs-27{font-size:27px}body .article-body .sb-fs-29{font-size:29px}body .article-body h2{font-size:27px;margin:0}body .article-body p{margin:0}body .article-body a{text-decoration:underline;color:#4682b4}body .article-body iframe{display:block;max-width:100%;margin-top:20px !important;margin-bottom:20px !important}body .article-body video{display:block;max-width:100%;margin-top:20px !important;margin-bottom:20px !important}body .article-body video:not(.lazyload){height:auto !important}body .article-body img:not(.lazyload){height:auto !important}body .article-body img{display:block;max-width:100%;margin-top:20px !important;margin-bottom:20px !important}body .article-body img.sb-fl{float:left;margin-right:10px}body .article-body img.sb-fc{display:block;float:none;margin:0 auto}body .article-body img.sb-fr{float:right;margin-left:10px}body .article-body img.sb-img-move-side{animation:sb_img_move_side 1s ease-in-out infinite alternate !important}@keyframes sb_img_move_side{0%{transform:translateX(-5px)}100%{transform:translateX(5px)}}body .article-body .sb-bg-gum-marker,body .article-body .sb-bg-gum-marker-animated{background:linear-gradient(to right, #ffee57 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, #ffee57 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out}body .article-body .sb-bg-gum-marker.animated,body .article-body .sb-bg-gum-marker-animated.animated{background-position:bottom 0 right 100% !important}body .article-body .sb-bg-gum-marker.sb-bg-gray,body .article-body .sb-bg-gum-marker-animated.sb-bg-gray{background:linear-gradient(to right, #eee 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, #eee 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out}body .article-body .sb-bg-gum-marker.sb-bg-gray.animated,body .article-body .sb-bg-gum-marker-animated.sb-bg-gray.animated{background-position:bottom 0 right 100%}body .article-body .sb-bg-gum-marker.sb-bg-white,body .article-body .sb-bg-gum-marker-animated.sb-bg-white{background:linear-gradient(to right, #fff 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, #fff 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out}body .article-body .sb-bg-gum-marker.sb-bg-white.animated,body .article-body .sb-bg-gum-marker-animated.sb-bg-white.animated{background-position:bottom 0 right 100%}body .article-body .sb-bg-gum-marker.sb-bg-black,body .article-body .sb-bg-gum-marker-animated.sb-bg-black{background:linear-gradient(to right, #000 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, #000 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out}body .article-body .sb-bg-gum-marker.sb-bg-black.animated,body .article-body .sb-bg-gum-marker-animated.sb-bg-black.animated{background-position:bottom 0 right 100%}body .article-body .sb-bg-gum-marker.sb-bg-red,body .article-body .sb-bg-gum-marker-animated.sb-bg-red{background:linear-gradient(to right, red 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, red 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out}body .article-body .sb-bg-gum-marker.sb-bg-red.animated,body .article-body .sb-bg-gum-marker-animated.sb-bg-red.animated{background-position:bottom 0 right 100%}body .article-body .sb-bg-gum-marker.sb-bg-green,body .article-body .sb-bg-gum-marker-animated.sb-bg-green{background:linear-gradient(to right, lime 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, lime 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out}body .article-body .sb-bg-gum-marker.sb-bg-green.animated,body .article-body .sb-bg-gum-marker-animated.sb-bg-green.animated{background-position:bottom 0 right 100%}body .article-body .sb-bg-gum-marker.sb-bg-yellow,body .article-body .sb-bg-gum-marker-animated.sb-bg-yellow{background:linear-gradient(to right, #ffee57 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, #ffee57 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out}body .article-body .sb-bg-gum-marker.sb-bg-yellow.animated,body .article-body .sb-bg-gum-marker-animated.sb-bg-yellow.animated{background-position:bottom 0 right 100%}body .article-body .sb-bg-gum-marker.sb-bg-blue,body .article-body .sb-bg-gum-marker-animated.sb-bg-blue{background:linear-gradient(to right, blue 50%, transparent 50%) 100% 0%/200% 70% no-repeat;background:-webkit-linear-gradient(left, blue 50%, transparent 50%) 100% 0%/200% 70% no-repeat;transition:background-position 1s ease-out;-webkit-transition:background-position 1s ease-out}body .article-body .sb-bg-gum-marker.sb-bg-blue.animated,body .article-body .sb-bg-gum-marker-animated.sb-bg-blue.animated{background-position:bottom 0 right 100%}body .article-body .article-body-comment{display:table;margin-bottom:1.5em;padding-bottom:1em;width:100% !important;max-width:100% !important}body .article-body .article-body-comment .comment-image,body .article-body .article-body-comment .comment-content{display:table-cell;vertical-align:top}body .article-body .article-body-comment .comment-image{padding-right:1em}body .article-body .article-body-comment .comment-image>img{display:block;height:auto;max-width:none;margin-top:0 !important;margin-bottom:0 !important}body .article-body .article-body-comment .comment-content{width:100%}body .article-body .article-body-comment .comment-content .comment-title{font-size:1em;margin:0 0 0.5em 0;font-weight:bold}body .article-body .article-body-comment .comment-content p{line-height:1.5em;margin-bottom:0.5em}body .article-body .article-body-comment .comment-content p.comment-detail{color:rgba(51,51,51,0.5);font-size:0.9em;font-style:italic}body .article-body .sb-custom img{display:block !important}body .article-body .sb-form iframe{height:0;margin:0 auto !important}

/* ===== inline part style ===== */


/* ===== inline part style ===== */

  body {
  
  
}




  .article-body {
  
    font-size: 17px !important;
  
  
    font-family: Hiragino Sans, Arial, sans-serif !important;
  
  
    color: #000000 !important;
  
  
    line-height: 1.8 !important;
  
  
  
    padding-top: 15px !important;
  
  
    padding-bottom: 15px !important;
  
  
    padding-left: 20px !important;
  
  
    padding-right: 20px !important;
  
  
  
  
}

  body .article-body iframe {
  
}

        body .article-body img {
        display: unset !important;
        
          margin-top: 0px !important;
        
        
          margin-bottom: 0px !important;
        
      }

        body .article-body video {
        display: unset !important;
      }

        body .article-body .sb-custom  {
        
          font-size: 17px !important;
        
        
          font-family: Hiragino Sans, Arial, sans-serif !important;
        
        
          color: #000000 !important;
        
        
          line-height: 1.8 !important;
        
      }

        body .article-body .sb-custom img {
        
          margin-top: 0px !important;
        
        
          margin-bottom: 0px !important;
        
      }



/* ===== inline part style ===== */
#sb-part-15841.sb-custom-part-mob0gcnzmn346lgztg

/* 動画を横幅いっぱいにする際は下の「.w100」を削除してください */
.w100.main {
  margin: 0 -20px -20px !important;
  /*-20pxはversion設定の左右余白を変更していない場合のみです、左右余白と同じサイズを-(マイナス)で打ち消してください*/
  max-width: unset;
}

#sb-part-15841.sb-custom-part-mob0gcnzmn346lgztg img,
#sb-part-15841.sb-custom-part-mob0gcnzmn346lgztg video {
  width: 100%;
  height: auto;
}

#sb-part-15841.sb-custom-part-mob0gcnzmn346lgztg .w100.main video {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== inline part style ===== */
#sb-part-1550.sb-custom-part-lmyadycchzr90in3p8s .balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

#sb-part-1550.sb-custom-part-lmyadycchzr90in3p8s .balloon5 .faceicon {
  float: right;
  width: 80px;
  margin-right: 5px;
}

#sb-part-1550.sb-custom-part-lmyadycchzr90in3p8s .balloon5 .faceicon img {
  width: 100%;
  height: auto;
  border: solid 3px #FFEDCC;
  border-radius: 50%;
}

#sb-part-1550.sb-custom-part-lmyadycchzr90in3p8s .name {
  font-size: 12px;
  color: gray;
  text-align: center;
}

#sb-part-1550.sb-custom-part-lmyadycchzr90in3p8s .balloon5 .chatting {
  width: 100%;
}

#sb-part-1550.sb-custom-part-lmyadycchzr90in3p8s .says {
  position: relative;
  margin: 5px 105px 0 0;
  padding: 20px;
  border-radius: 12px;
  background: #FFEDCC;
  /* カラーコードで背景の色指定*/
}

#sb-part-1550.sb-custom-part-lmyadycchzr90in3p8s .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  right: -24px;
  border: 12px solid transparent;
  border-left: 12px solid #FFEDCC;
  /* カラーコードで背景の色指定*/
}

#sb-part-1550.sb-custom-part-lmyadycchzr90in3p8s .says p {
  margin: 0;
  padding: 0;
}

/* ===== inline part style ===== */
#sb-part-1249.sb-custom-part-lnb55m2vyouodmzmpv .balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

#sb-part-1249.sb-custom-part-lnb55m2vyouodmzmpv .balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

#sb-part-1249.sb-custom-part-lnb55m2vyouodmzmpv .balloon5 .faceicon img {
  width: 100%;
  height: auto;
  border: solid 3px #fde8ef;
  border-radius: 50%;
}

#sb-part-1249.sb-custom-part-lnb55m2vyouodmzmpv .name {
  font-size: 12px;
  color: gray;
  text-align: center;
}

#sb-part-1249.sb-custom-part-lnb55m2vyouodmzmpv .balloon5 .chatting {
  width: 100%;
}

#sb-part-1249.sb-custom-part-lnb55m2vyouodmzmpv .says {
  position: relative;
  margin: 5px 0 0 105px;
  padding: 20px;
  border-radius: 12px;
  background: #fde8ef;
  /* カラーコードで背景の色指定*/
}

#sb-part-1249.sb-custom-part-lnb55m2vyouodmzmpv .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #fde8ef;
  /* カラーコードで背景の色指定*/
}

#sb-part-1249.sb-custom-part-lnb55m2vyouodmzmpv .says p {
  margin: 0;
  padding: 0;
}

/* ===== inline part style ===== */
#sb-part-51.sb-custom-part-lnb4zdpscwo6sxjglt6 h2 {
  /*背景色*/
  background: #dfefff;
  /*ステッチ部分。線の種類｜線の太さ｜線の色*/
  border: dashed 1px #96c2fe;
  /*文字色*/
  color: #454545;
  box-shadow: 0px 0px 0px 5px #dfefff;
  /*内側余白。上下｜左右*/
  padding: 5px 10px;
  /*水平方向の字間のスペース*/
  letter-spacing: 0.05em
}

/* ===== inline part style ===== */
#sb-part-1249.sb-custom-part-lpglm7lb2gnhapoc5rc .balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

#sb-part-1249.sb-custom-part-lpglm7lb2gnhapoc5rc .balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

#sb-part-1249.sb-custom-part-lpglm7lb2gnhapoc5rc .balloon5 .faceicon img {
  width: 100%;
  height: auto;
  border: solid 3px #fde8ef;
  border-radius: 50%;
}

#sb-part-1249.sb-custom-part-lpglm7lb2gnhapoc5rc .name {
  font-size: 12px;
  color: gray;
  text-align: center;
}

#sb-part-1249.sb-custom-part-lpglm7lb2gnhapoc5rc .balloon5 .chatting {
  width: 100%;
}

#sb-part-1249.sb-custom-part-lpglm7lb2gnhapoc5rc .says {
  position: relative;
  margin: 5px 0 0 105px;
  padding: 20px;
  border-radius: 12px;
  background: #fde8ef;
  /* カラーコードで背景の色指定*/
}

#sb-part-1249.sb-custom-part-lpglm7lb2gnhapoc5rc .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #fde8ef;
  /* カラーコードで背景の色指定*/
}

#sb-part-1249.sb-custom-part-lpglm7lb2gnhapoc5rc .says p {
  margin: 0;
  padding: 0;
}

/* ===== inline part style ===== */
#sb-part-1550.sb-custom-part-lpgkdxbu2lata1jfcmp .balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

#sb-part-1550.sb-custom-part-lpgkdxbu2lata1jfcmp .balloon5 .faceicon {
  float: right;
  width: 80px;
  margin-right: 5px;
}

#sb-part-1550.sb-custom-part-lpgkdxbu2lata1jfcmp .balloon5 .faceicon img {
  width: 100%;
  height: auto;
  border: solid 3px #FFEDCC;
  border-radius: 50%;
}

#sb-part-1550.sb-custom-part-lpgkdxbu2lata1jfcmp .name {
  font-size: 12px;
  color: gray;
  text-align: center;
}

#sb-part-1550.sb-custom-part-lpgkdxbu2lata1jfcmp .balloon5 .chatting {
  width: 100%;
}

#sb-part-1550.sb-custom-part-lpgkdxbu2lata1jfcmp .says {
  position: relative;
  margin: 5px 105px 0 0;
  padding: 20px;
  border-radius: 12px;
  background: #FFEDCC;
  /* カラーコードで背景の色指定*/
}

#sb-part-1550.sb-custom-part-lpgkdxbu2lata1jfcmp .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  right: -24px;
  border: 12px solid transparent;
  border-left: 12px solid #FFEDCC;
  /* カラーコードで背景の色指定*/
}

#sb-part-1550.sb-custom-part-lpgkdxbu2lata1jfcmp .says p {
  margin: 0;
  padding: 0;
}

/* ===== inline part style ===== */
#sb-part-1249.sb-custom-part-YF2sU561PDJApNuD .balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

#sb-part-1249.sb-custom-part-YF2sU561PDJApNuD .balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

#sb-part-1249.sb-custom-part-YF2sU561PDJApNuD .balloon5 .faceicon img {
  width: 100%;
  height: auto;
  border: solid 3px #fde8ef;
  border-radius: 50%;
}

#sb-part-1249.sb-custom-part-YF2sU561PDJApNuD .name {
  font-size: 12px;
  color: gray;
  text-align: center;
}

#sb-part-1249.sb-custom-part-YF2sU561PDJApNuD .balloon5 .chatting {
  width: 100%;
}

#sb-part-1249.sb-custom-part-YF2sU561PDJApNuD .says {
  position: relative;
  margin: 5px 0 0 105px;
  padding: 20px;
  border-radius: 12px;
  background: #fde8ef;
  /* カラーコードで背景の色指定*/
}

#sb-part-1249.sb-custom-part-YF2sU561PDJApNuD .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #fde8ef;
  /* カラーコードで背景の色指定*/
}

#sb-part-1249.sb-custom-part-YF2sU561PDJApNuD .says p {
  margin: 0;
  padding: 0;
}

/* ===== inline part style ===== */
#sb-part-1550.sb-custom-part-LHYp7w8dcSBpotJp .balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

#sb-part-1550.sb-custom-part-LHYp7w8dcSBpotJp .balloon5 .faceicon {
  float: right;
  width: 80px;
  margin-right: 5px;
}

#sb-part-1550.sb-custom-part-LHYp7w8dcSBpotJp .balloon5 .faceicon img {
  width: 100%;
  height: auto;
  border: solid 3px #FFEDCC;
  border-radius: 50%;
}

#sb-part-1550.sb-custom-part-LHYp7w8dcSBpotJp .name {
  font-size: 12px;
  color: gray;
  text-align: center;
}

#sb-part-1550.sb-custom-part-LHYp7w8dcSBpotJp .balloon5 .chatting {
  width: 100%;
}

#sb-part-1550.sb-custom-part-LHYp7w8dcSBpotJp .says {
  position: relative;
  margin: 5px 105px 0 0;
  padding: 20px;
  border-radius: 12px;
  background: #FFEDCC;
  /* カラーコードで背景の色指定*/
}

#sb-part-1550.sb-custom-part-LHYp7w8dcSBpotJp .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  right: -24px;
  border: 12px solid transparent;
  border-left: 12px solid #FFEDCC;
  /* カラーコードで背景の色指定*/
}

#sb-part-1550.sb-custom-part-LHYp7w8dcSBpotJp .says p {
  margin: 0;
  padding: 0;
}

/* ===== inline part style ===== */
#sb-part-1550.sb-custom-part-O0IKi6DZaxPRN8Vn .balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

#sb-part-1550.sb-custom-part-O0IKi6DZaxPRN8Vn .balloon5 .faceicon {
  float: right;
  width: 80px;
  margin-right: 5px;
}

#sb-part-1550.sb-custom-part-O0IKi6DZaxPRN8Vn .balloon5 .faceicon img {
  width: 100%;
  height: auto;
  border: solid 3px #FFEDCC;
  border-radius: 50%;
}

#sb-part-1550.sb-custom-part-O0IKi6DZaxPRN8Vn .name {
  font-size: 12px;
  color: gray;
  text-align: center;
}

#sb-part-1550.sb-custom-part-O0IKi6DZaxPRN8Vn .balloon5 .chatting {
  width: 100%;
}

#sb-part-1550.sb-custom-part-O0IKi6DZaxPRN8Vn .says {
  position: relative;
  margin: 5px 105px 0 0;
  padding: 20px;
  border-radius: 12px;
  background: #FFEDCC;
  /* カラーコードで背景の色指定*/
}

#sb-part-1550.sb-custom-part-O0IKi6DZaxPRN8Vn .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  right: -24px;
  border: 12px solid transparent;
  border-left: 12px solid #FFEDCC;
  /* カラーコードで背景の色指定*/
}

#sb-part-1550.sb-custom-part-O0IKi6DZaxPRN8Vn .says p {
  margin: 0;
  padding: 0;
}

/* ===== inline part style ===== */
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .calBox {
  background: url(images/641782_0f8daaa5.jpg) 0 0 repeat;
  padding: 30px 10px;
  background-size: 20%;
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .calBox img {
  display: block;
  width: 100%;
  height: auto;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .calBox form p {
  text-align: center;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .userInput {
  font-size: 0.9em;
  line-height: 1.3em;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn input#inputButton {
  font-size: 1.2em;
  line-height: 1em;
  width: 3em;
  padding: 5px;
  border: solid 1px #ccc;
  margin: 0 5px 20px;
  box-shadow: none;
  font-weight: bold;
  text-align: center;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn input.savingsButton,
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn input#reset {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .dlBox {
  display: flex;
  flex-wrap: wrap;
  border: solid 2px #666;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .dlBox dt,
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .dlBox dd {
  font-weight: bold;
  padding: 5px;
  box-sizing: border-box;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .dlBox dt {
  width: 30%;
  background: #666;
  color: #fff;
  letter-spacing: 0.1em;
  text-align: center;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .dlBox dd {
  width: 70%;
  margin: 0;
  text-align: right;
  background: #fff;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn #year10Result {
  display: inline-block;
  padding-right: 0.5em;
  font-size: 1.3em;
  line-height: 1em;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .openResultBox {
  -webkit-animation: 2s float ease-in-out infinite;
  animation: 2s float ease-in-out infinite;
}

@-webkit-keyframes float {
  50% {
    -webkit-transform: translateY(-10px);
  }
}

@keyframes float {
  50% {
    transform: translateY(-10px);
  }
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn #openResult {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(180deg, #ff5c85 0%, #e73562 60%, #c22449 100%);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  border: none;
  border-radius: 14px;
  padding: 16px 8px;
  box-shadow: 0 4px 0 #8f1a35, 0 6px 14px rgba(231,53,98,.3);
  cursor: pointer;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .txt_further {
  font-size: 0.9em;
  line-height: 1.3em;
  padding: 0.5em 0;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .txt_great {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  line-height: 1em;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .txtIn {
  position: relative;
  display: inline-block;
  background: linear-gradient(transparent 50%, #fff799 50%);
  font-weight: bold;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .img_result {
  margin-top: 1em;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .savingsButton {
  font-size: 1.5em;
  line-height: 1em;
  color: red;
  font-weight: bold;
  text-align: right;
  display: inline-block;
  max-width: 3em;
  padding: 0 0.5em;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .txtIn::before {
  content: "約";
  font-size: 0.7em;
  font-weight: 500;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1em;
  height: 1em;
  display: block;
  line-height: 0em;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .result,
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .result0,
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .result0199,
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .result200399,
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .resultother {
  display: none;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .result0 .txt_great {
  font-size: 1.1em;
  font-weight: nomal;
  line-height: 1.3em;
  margin-top: 1em;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .block {
  display: block;
}

#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .none {
  display: none !important;
}

/* ===== inline part style ===== */
#sb-part-15203.sb-custom-part-m7337zsaf9v923rqvzd .header_text {
  font-size: 18px;
  color: #f06666;
  text-align: center;
  font-weight: bold;
}

#sb-part-15203.sb-custom-part-m7337zsaf9v923rqvzd .sb-bg-under-marker {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fffca1 0%) repeat scroll 0 0;
}

/* ===== inline part style ===== */
#sb-part-55.sb-custom-part-mfp4jv0zkrdfv2lh3ng .purupuru {
  animation: cta-pulse 6s ease-in-out 1s infinite;
}

@keyframes purupuru {
  0% {
    transform: skew(9deg);
  }

  10% {
    transform: skew(-8deg);
  }

  20% {
    transform: skew(7deg);
  }

  30% {
    transform: skew(-6deg);
  }

  40% {
    transform: skew(5deg);
  }

  50% {
    transform: skew(-4deg);
  }

  60% {
    transform: skew(3deg);
  }

  70% {
    transform: skew(-2deg);
  }

  80% {
    transform: skew(1deg);
  }

  90% {
    transform: skew(0deg);
  }

  100% {
    transform: skew(0deg);
  }
}

/* ===== inline part style ===== */
#sb-part-2442.sb-custom-part-lmtw72tc995t0fl6bma .box-contents {
  border: 1px solid #f48d91;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#sb-part-2442.sb-custom-part-lmtw72tc995t0fl6bma .box-contents .title {
  background-color: #f48d91;
  padding: 0.5em;
}

#sb-part-2442.sb-custom-part-lmtw72tc995t0fl6bma .box-contents .content {
  padding: 10px;
}

#sb-part-2442.sb-custom-part-lmtw72tc995t0fl6bma .box-contents .content>img+p {
  margin-top: 1em;
}

#sb-part-2442.sb-custom-part-lmtw72tc995t0fl6bma .title {
  line-height: 1.2em;
}

/* ===== inline part style ===== */
#sb-part-2442.sb-custom-part-lmtw7dzyfa2zhb94mxk .box-contents {
  border: 1px solid #f48d91;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#sb-part-2442.sb-custom-part-lmtw7dzyfa2zhb94mxk .box-contents .title {
  background-color: #f48d91;
  padding: 0.5em;
}

#sb-part-2442.sb-custom-part-lmtw7dzyfa2zhb94mxk .box-contents .content {
  padding: 10px;
}

#sb-part-2442.sb-custom-part-lmtw7dzyfa2zhb94mxk .box-contents .content>img+p {
  margin-top: 1em;
}

#sb-part-2442.sb-custom-part-lmtw7dzyfa2zhb94mxk .title {
  line-height: 1.2em;
}

/* ===== inline part style ===== */
#sb-part-4076.sb-custom-part-kx88shpiue2bum2c7z p {
  font-size: 10px;
  line-height: 1.3em;
  margin: 1em 0;
  text-align: right;
}

/* ===== inline part style ===== */
#sb-part-15203.sb-custom-part-m9c6mt1z8d529ms8tt3 .header_text {
  font-size: 18px;
  color: #f06666;
  text-align: center;
  font-weight: bold;
}

#sb-part-15203.sb-custom-part-m9c6mt1z8d529ms8tt3 .sb-bg-under-marker {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fffca1 0%) repeat scroll 0 0;
}

/* ===== inline part style ===== */
#sb-part-55.sb-custom-part-mfp4k3mxc6udcyq7v3b .purupuru {
  animation: cta-pulse 6s ease-in-out 1s infinite;
}

@keyframes purupuru {
  0% {
    transform: skew(9deg);
  }

  10% {
    transform: skew(-8deg);
  }

  20% {
    transform: skew(7deg);
  }

  30% {
    transform: skew(-6deg);
  }

  40% {
    transform: skew(5deg);
  }

  50% {
    transform: skew(-4deg);
  }

  60% {
    transform: skew(3deg);
  }

  70% {
    transform: skew(-2deg);
  }

  80% {
    transform: skew(1deg);
  }

  90% {
    transform: skew(0deg);
  }

  100% {
    transform: skew(0deg);
  }
}

/* ===== inline part style ===== */
#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 全体の設定 */
.map__area {
  /* 横幅 */
  width: 100%;
  /* 最大幅 */
  max-width: 600px;
  /* 外側の余白｜上下｜左右（センタリング）｜ */
  margin: 0 auto;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 日本地図DOM */
.japan_map {
  position: relative;
  box-sizing: border-box;
  /* 外側の余白 */
  margin: 0 auto;
  display: table;
  /* 背景色 */
  background-color: transparent;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 日本地図画像（スマホ対応用） */
.japan_map img {
  /*　最大幅 */
  max-width: 100%;
  /* 高さ */
  height: auto;
  /* 線｜太さ｜ */
  border: 0;
  /* chromeの画像ボケ対策 */
  -webkit-backface-visibility: hidden;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 日本地図ボタン */
.japan_map .area_btn {
  position: absolute;
  /* 表示順番 */
  z-index: 1;
  box-sizing: border-box;
  /* カーソルが対象物に触れた時に指マークになる */
  cursor: pointer;
  /* 線｜太さ｜線種｜色｜ */
  border: 3px solid #333333;
  /* 角丸 */
  border-radius: 5px;
  /* 背景色 */
  background-color: #FFF;
  /* 内側の余白 */
  padding: 0.2em auto;
  /* 文字の太さ */
  font-weight: bold;
  /* 文字の位置 */
  text-align: center;
  /* 折り返しの設定 */
  white-space: nowrap;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* ボタン配置（使用する日本地図画像により微調整）*/
/* 北海道 */
.japan_map .area_btn.area1 {
  /* 表示位置（上基準） */
  top: 7%;
  /* 表示位置（右基準） */
  right: 6%;
  /* 横幅 */
  width: 30%;
  height: 14%;
  color: #0a37c5;
  background: linear-gradient(to bottom, #eaf9ff, #a3b8f8);
  border-color: #4b73ef;

}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 東北 */
.japan_map .area_btn.area2 {
  /* 表示位置（上基準） */
  top: 25%;
  /* 表示位置（右基準） */
  right: 5%;
  /* 横幅 */
  width: 20%;
  height: 14%;
  color: #0a83c5;
  background: linear-gradient(to bottom, #e9f5ff, #b6dcff);
  border-color: #6bb6ff;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 関東 */
.japan_map .area_btn.area3 {
  /* 表示位置（上基準） */
  top: 58%;
  /* 表示位置（右基準） */
  right: 3.5%;
  /* 横幅 */
  width: 20%;
  height: 14%;
  color: #a89a19;
  background: linear-gradient(to bottom, #fff7e5, #ffdca1);
  border-color: #f3c467;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 北陸・信越 */
.japan_map .area_btn.area4 {
  /* 表示位置（上基準） */
  top: 42%;
  /* 表示位置（右基準） */
  right: 20%;
  /* 横幅 */
  width: 31%;
  height: 14%;
  color: #007810;
  background: linear-gradient(to bottom, #eaffea, #a1f8ad);
  border-color: #79d879;

}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 中部 */
.japan_map .area_btn.area5 {
  /* 表示位置（上基準） */
  top: 72%;
  /* 表示位置（右基準） */
  right: 26%;
  /* 横幅 */
  width: 20%;
  height: 14%;
  color: #d65520;
  background: linear-gradient(to bottom, #ffeedd, #f8d771);
  border-color: #ffb273;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 近畿 */
.japan_map .area_btn.area6 {
  /* 表示位置（上基準） */
  top: 56%;
  /* 表示位置（左基準） */
  left: 40%;
  /* 横幅 */
  width: 20%;
  height: 14%;
  color: #d65520;
  background: linear-gradient(to bottom, #ffeedd, #ffcf9b);
  border-color: #ffb273;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 中国 */
.japan_map .area_btn.area7 {
  /* 表示位置（上基準） */
  top: 48%;
  /* 表示位置（左基準） */
  left: 19%;
  /* 横幅 */
  width: 20%;
  height: 14%;
  color: #aa1515;
  background: linear-gradient(to bottom, #fff0f9, #fcbeb0);
  border-color: #f56868;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 四国 */
.japan_map .area_btn.area8 {
  /* 表示位置（上基準） */
  top: 72%;
  /* 表示位置（左基準） */
  left: 28.5%;
  /* 横幅 */
  width: 20%;
  height: 14%;
  color: #d620c9;
  background: linear-gradient(to bottom, #fff0f9, #ffb6e7);
  border-color: #d81bca;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 九州・沖縄 */
.japan_map .area_btn.area9 {
  /* 表示位置（上基準） */
  top: 63%;
  /* 表示位置（左基準） */
  left: -20;
  /* 横幅 */
  width: 32%;
  height: 14%;
  /* 色 */
  color: #8f00a1;
  background: linear-gradient(to bottom, #f5ecff, #decaff);
  border-color: #b28af9;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* オーバーレイ */
.japan_map .area_overlay {
  /* 初期非表示 */
  display: none;
  position: absolute;
  /* 表示順番 */
  z-index: 2;
  /* 表示位置（上基準） */
  top: 0;
  /* 表示位置（左基準） */
  left: 0;
  /* 最小幅 */
  min-width: 100%;
  /* 最小高さ */
  min-height: 100%;
  /* 横幅 */
  width: auto;
  /* 高さ */
  height: auto;
  /* 背景色 */
  background-color: #111;
  /* 透明度 */
  opacity: 0.5;
  /* カーソルが対象物に触れた時に指マークになる */
  cursor: pointer;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 選択前は表示を隠す */
.japan_map .pref_area {
  display: none;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 地域毎の都道府県リスト */
.japan_map .pref_list {
  position: absolute;
  /* 表示位置（上基準） */
  top: 50%;
  /* 表示位置（左基準） */
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /* 表示順番 */
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  /* 横幅 */
  width: 90%;
  /* 背景色 */
  background-color: #FFF;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw .japan_map .pref_list>a {
  box-sizing: border-box;
  /* 横幅 */
  width: 50%;
  /* 線｜太さ｜線種｜色｜ */
  border: 1px solid #CCC;
  /* 文字の太さ */
  font-weight: bold;
  /* 文字の位置 */
  text-align: center;
  /* 内側の余白 */
  padding: 0.5em;
  /* カーソルが対象物に触れた時に指マークになる */
  cursor: pointer;
  /* 文字色 */
  color: #066dc4;
  /* 下線 */
  text-decoration: none;
  /* 背景色 */
  background: #fff;
  /* アニメーションの対象と速さ */
  transition: background 0.2s;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw .japan_map .pref_list>a:hover {
  /* 背景色 */
  background: #d7edee;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* 北海道など1つしか表示されない地域の設定 */
.japan_map .pref_list.contentOne {
  /* 横幅 */
  width: 45%;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw .japan_map .pref_list.contentOne a {
  /* 横幅 */
  width: 100%;
}

@media screen and (max-width: 600px) {
  #sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

  /* スマホユーザー向けにボタン文字サイズを調整 */
  .japan_map .area_btn {
    font-size: 4vw;
  }
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* ===== 共通：立体ボタン用スタイル ===== */
.japan_map .area_btn {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  padding: 0.5em 0.7em;

  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.15);

  /* --- 立体感を作るレイヤー --- */

  /* 下が濃くなるグラデーション（後で各エリアで個別指定） */
  background: linear-gradient(to bottom, #fff, #ccc);

  /* 外側の影（浮いて見える） */
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.25),
    /* 外側ふんわり影 */
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    /* 上部の光（ハイライト） */
    inset 0 -3px 4px rgba(0, 0, 0, 0.15);
  /* 下部の濃い影（凹凸） */

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.25s ease;
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* --- ホバー時：少し浮かせる --- */
.japan_map .area_btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.32),
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -3px 4px rgba(0, 0, 0, 0.15);
}

#sb-part-4095.sb-custom-part-mifo7jalpo1cf1pjyw

/* --- 押す時：沈む --- */
.japan_map .area_btn:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}
/* ================================================================
   StudyIn WH本気プラン 追加スタイル（st- プレフィックス）
   クローン元CSSは上に温存。ここから下が我々の追記。
   ================================================================ */

:root {
  --st-pink: #e73562;
  --st-pink-dark: #c22449;
  --st-yellow: #ffe14d;
  --st-ink: #333;
}

/* 見出し */
body .article-body h2.st-h2 {
  font-size: 22px;
  line-height: 1.4;
  color: var(--st-ink);
  border-left: 6px solid var(--st-pink);
  padding: 4px 0 4px 12px;
  margin: 10px 0;
}

/* 数式バナー（仕事の獲得＝英語力×事前準備） */
.st-formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff3f6;
  border: 2px solid var(--st-pink);
  border-radius: 12px;
  padding: 14px 8px;
  font-size: 16px;
}
.st-formula span {
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  font-weight: bold;
  color: var(--st-pink-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  white-space: nowrap;
  font-size: 14px;
}
.st-formula b { color: var(--st-ink); font-size: 20px; }

/* 比較表・実績表 */
table.st-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
}
table.st-table th {
  background: var(--st-pink);
  color: #fff;
  padding: 8px 6px;
  border: 1px solid #e3a7b6;
  font-size: 13px;
}
table.st-table td {
  border: 1px solid #e3c9d1;
  padding: 8px 6px;
  text-align: center;
}
table.st-table tr.st-hl td {
  background: #fff3d6;
  color: var(--st-pink-dark);
}
table.st-table tr.st-hl td b { font-size: 16px; }
.st-small { font-size: 10px; color: #888; }

/* ===== 比較表（.st-table--cmp）だけの磨き ==========================================
   2026-09-03 憲伸さんFB「3つの表をもっと磨きたい」。数値・文言は1文字も変えていない。
   直したのは (a)日本語の折り返し (b)比べる2つの金額の見え方 (c)推す行の見つけやすさ。

   (a) 375pxで「フィリピン2カ／国留学」「本気プラ／ン 9ヶ月」と単語の途中で割れていた。
       word-break:auto-phrase は Chrome が文節で折る指定で、非対応ブラウザは現状維持
       （＝退化しない）。text-wrap:pretty は最終行の孤立文字を減らす。
   (b) 比べられる金額は「100万円〜」と「計72万円」なのに、後者だけ 10px の灰色で
       事実上読めなかった（＝読者が比較できない）。同じ土俵に乗るまで上げる。
       ★数字そのものは変えていない。見えていなかった数字を見えるようにしただけ。
   (c) 推す行に左のピンク帯。バッジ等の新しい文言は足していない（未裏取りの語を増やさない）。

   ★ .st-table は時給表（3列・nowrap前提で335pxにギリギリ収まる）でも使っている。
     横パディングを増やすとあちらが溢れるので、この節は必ず --cmp スコープで書く。 */
table.st-table--cmp {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  table-layout: fixed;               /* 列幅を内容で暴れさせない */
  word-break: auto-phrase;
  text-wrap: pretty;
}
table.st-table--cmp th:first-child,
table.st-table--cmp td:first-child { width: 47%; }
table.st-table--cmp td { padding: 12px 8px; vertical-align: middle; }
/* 比べる金額。2行とも同じ大きさ・同じ位置に置いて、目が往復できるようにする */
.st-table--cmp .st-cost { font-size: 18px; font-weight: bold; line-height: 1.3; display: inline-block; }
.st-table--cmp tr:not(.st-hl) .st-cost { color: #555; }
.st-table--cmp tr.st-hl .st-cost { color: var(--st-pink-dark); }
table.st-table--cmp tr.st-hl td b { font-size: inherit; }   /* .st-cost の18pxを勝たせる */
/* 補足行。10px灰色では「計72万円」が読めず比較にならなかった */
.st-table--cmp .st-small {
  display: block; margin-top: 4px;
  font-size: 11.5px; line-height: 1.55; color: #6b6b6b;
}
.st-table--cmp tr.st-hl .st-small { color: #a4526a; }
/* 推す行の左に帯。td の border は border-collapse で潰れるので inset shadow で描く */
.st-table--cmp tr.st-hl td:first-child { box-shadow: inset 4px 0 0 var(--st-pink); }
/* ★nth-child(2) の white-space:nowrap（時給表の $31〜35 を割らせないための指定）は
   比較表では解除する。補足行を10px→11.5pxに上げた時点で、fixedな列幅から
   「現地3ヶ月分／フィリピン3ヶ月＋欧米」がはみ出した（375pxで実測）。
   金額そのものは割れてはいけないので .st-cost だけ nowrap を残す。 */
table.st-table--cmp tr > *:nth-child(2),
table.st-table--cmp tr > *:nth-child(1) { white-space: normal; }
.st-table--cmp .st-cost { white-space: nowrap; }

/* サポート4カード */
.st-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.st-card {
  border: 2px solid var(--st-pink);
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  font-size: 14px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  /* 2026-08-28 Kosei「ここは超単純に。ただ、写真は残したい」で説明文を外したため、
     テキストは SUPPORT NN ＋ 見出しの2要素だけ。写真(96px)より低くなるので上寄せだと
     写真の下側が空く。縦中央に置いて写真と釣り合わせる。 */
  align-items: center;
}
/* サポートカードの実写真。出典は deck.pdf p.7「ワーホリ専門コーチングで4つの不安を解消！」で、
   SUPPORT 01〜04 の文言と同じスライドに載っている写真を pdfimages で抽出して使っている。
   （当初は honki LP の面談・体験談用写真を転用していたが、deck p.7 に本来の写真が
     揃っていたため 2026-08-20 に差し替え。文言と写真の出典がこれで一致した）
   マゼンタの縁はスライドの装飾なので、色で判定してトリミング済み。 */
.st-card-photo {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
@media (min-width: 560px) {
  .st-card { grid-template-columns: 132px 1fr; }
  .st-card-photo { width: 132px; height: 132px; }
}
.st-card-no {
  display: inline-block;
  background: var(--st-pink);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 10px;
  padding: 2px 10px;
  margin-bottom: 6px;
}
/* 写真が入って本文カラムが狭くなったぶん、見出しがバッジの右で折り返して
   2行目だけ左端に落ちるので、見出しは必ずバッジの下の行から始める。2026-08-20 */
.st-card b {
  font-size: 15px; color: var(--st-pink-dark); display: block;
  /* 説明文を外して見出しだけになった結果、SUPPORT 01/02 の見出しが2行目に「＆添削」「グ」
     しか残らず不格好だった。text-wrap:balance で2行を均等に割る（文言は変えない。
     見出しは deck p.7 の文言そのままなので勝手に短縮しない）。未対応ブラウザは従来の折返し。 */
  /* 2026-08-30: balance は幅だけで割るので「英文履歴／書」のように語の途中で切れることがある。
     切れ目が問題になる見出しは HTML 側で <br> を入れて明示する（SUPPORT 01がそれ）。
     残りは balance に任せる（SUPPORT 02 は 7字/7字 できれいに割れている）。 */
  text-wrap: balance;
}
.st-card p { margin: 6px 0 0 !important; line-height: 1.6; font-size: 13px; }

/* 全額返金保証 */
.st-guarantee {
  border: 3px solid var(--st-pink);
  border-radius: 14px;
  background: #fff;
  text-align: center;
  padding: 16px 14px;
}
.st-guarantee-head { color: var(--st-pink); font-weight: bold; font-size: 15px; }
.st-guarantee-main {
  font-size: 20px;
  font-weight: bold;
  margin: 6px 0 10px;
  line-height: 1.5;
}
.st-guarantee-main span {
  font-size: 28px;
  color: var(--st-pink);
  background: linear-gradient(transparent 65%, var(--st-yellow) 0%);
}
/* 表の数値列は折り返さない。375pxで「$31〜」/「35」と割れて読みにくかった
   （2026-08-20 Kosei「時給もイメージつきやすく」の検証中に発見）。
   店名の列だけ折り返させれば表幅335pxに収まり、横スクロールも出ない。
   比較表は <br> による明示改行なので、この指定の影響を受けない（実測で確認済み） */
.st-table tr > *:nth-child(2),
.st-table tr > *:nth-child(3) { white-space: nowrap; }

.st-guarantee-main span sup {
  font-size: 11px;
  vertical-align: super;   /* normalize.css が sup を top:-.5em だけで持ち上げていて、
                              大きい文字（28px）の中では※が「ど真ん中」に来る。
                              .st-huge sup と同じ補正。※の上端が本文の上端に揃う */
}
.st-guarantee p { font-size: 13px; margin: 0 0 6px !important; text-align: left; line-height: 1.7; }
.st-guarantee p.st-small { font-size: 10px; color: #888; }

/* 図1: 440万円の出どころ（2026-08-24 Kosei「440万円ってどこから？」→「もっとスリムに・週5日×7時間で」）
   A$26.44/時（2026-07-01〜 Fair Work Commission）× 週35時間 × (52/12×11)週 = A$44,111
   → 1豪ドル100円で 4,411,073円。deck p.19 の 440万円 との差は 11,073円 なので「約440万円」と表記する。
   ★週5日×7時間=35時間は、法定フルタイム38時間より少ない＝控えめな前提（LP上の※に明記）。
   ★旧版は 38時間で計算して「約479万円、LPはそれより低い440万円」と2つの数字を出していたが、
     読者がまだ見ていない440万円を先に指す構造になっていた（Kosei「時系列おかしい」）。数字を1つに畳んだ。 */
.st-calc { border: 1px solid #f0c9d3; border-radius: 10px; padding: 10px 12px; margin: 2px 0 12px; }
.st-calc-q { font-size: 12.5px; font-weight: bold; margin-bottom: 8px; }
/* 2026-09-03 憲伸さんFB「磨きたい」で直した点（数値・文言は不変）:
   375pxで式が2行に折れたとき、1行目が「…×週5日 ×」と×で終わっていた（次の項が無いのに
   演算子が行末に取り残される）。×を各項の内側へ入れ、2列グリッドで折り返し位置を固定した。
   ★flexのままだと幅次第で折り返し位置が動き、また×が行末に来る目が残る。
     grid なら「どこで折れるか」がCSSで決まるので、幅が変わっても崩れ方が予測できる。 */
.st-calc-line {
  display: grid; grid-template-columns: auto auto;
  justify-content: center; align-items: center; gap: 6px 8px;
}
@media (min-width: 480px) { .st-calc-line { grid-template-columns: repeat(4, auto); } }
.st-calc-line span {
  background: #fdf1f4; border-radius: 6px; padding: 4px 9px;
  font-size: 10.5px; color: #777; white-space: nowrap;
}
.st-calc-line span b { font-size: 15px; color: var(--st-ink); }
.st-calc-line span i { font-style: normal; font-size: 10px; }
/* ×は項の内側に入ったので、チップの中で左に少し離して置く */
.st-calc-line em { font-style: normal; color: #cf9fae; font-size: 11px; margin-right: 5px; }
/* 答えは「式の結論」だと分かるように帯に載せる（440万円という数字は触っていない） */
.st-calc-eq {
  margin-top: 11px; font-size: 13px;
  background: #fff4f7; border-radius: 8px; padding: 7px 8px;
}
.st-calc-eq b { font-size: 24px; color: var(--st-pink); }
.st-calc-end { margin-top: 5px; font-size: 10px; color: #9a9a9a; line-height: 1.6; text-wrap: pretty; }

/* 実質0円のジャーニー図（2026-08-24 Kosei「文章が長い／なぜ実質0円かを視覚で一発で」）
   現地収入440万円を 支出220 / 費用120 / 残る100 の3本に割った積み上げバー。
   比率は 220÷440=50.0% / 120÷440=27.3% / 100÷440=22.7%（スクリプト計算・暗算していない）。
   440-220-120=100 が deck p.19 の「貯金100万円〜」と一致するので、図と数字は自己整合している。
   ★数値はHTML側のテキストに置く（SVGにすると verify_numbers.py が読めず未照合になる）。 */
.st-flow { margin: 2px 0 10px; }
.st-flow-cap { font-size: 12px; color: #666; margin-bottom: 5px; }
.st-flow-cap b { font-size: 15px; color: var(--st-ink); }
.st-flow-bar { display: flex; height: 30px; border-radius: 6px; overflow: hidden; }
.st-flow-bar span {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold; color: #fff; white-space: nowrap;
  letter-spacing: .02em;
}
.st-flow-bar .f1 { background: #aab4bb; }
.st-flow-bar .f2 { background: var(--st-pink); }
.st-flow-bar .f3 { background: #e39400; }   /* --st-yellow は白文字が読めないので濃い側に振る */
.st-flow-legend { list-style: none; margin: 8px 0 0; padding: 0; text-align: left; }
.st-flow-legend li {
  font-size: 12.5px; line-height: 1.55; position: relative;
  padding-left: 16px; margin-bottom: 4px;
}
.st-flow-legend li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 10px; height: 10px; border-radius: 2px;
}
.st-flow-legend li.f1::before { background: #aab4bb; }
.st-flow-legend li.f2::before { background: var(--st-pink); }
.st-flow-legend li.f3::before { background: #e39400; }
.st-flow-legend li.f2 { font-weight: bold; }
/* 「それでも貯金100万円以上が残る」はこの図の結論なので、費用の行と同じ強さで置く
   （2026-09-03。それまで結論だけ地の文の細さで、バーのオレンジと結びついていなかった） */
.st-flow-legend li.f3 { font-weight: bold; color: #8a5a00; }
.st-flow-legend li { text-wrap: pretty; word-break: auto-phrase; }
.st-flow-sub { display: block; font-size: 10.5px; color: #8d8d8d; font-weight: normal; line-height: 1.6; text-wrap: pretty; }

/* バーの「費用」区画を指す目印（2026-09-03 憲伸さんFB）。
   ★目印は独自の座標を持たない。バーと同じ 50.0 / 27.3 / 22.7 の3セルを並べ、
     真ん中のセルの中央に置くだけ。バーの比率を直せば目印も必ず一緒に動く
     （left:63.65% のような二重管理の数字を作らない＝ズレようがない作り）。
   ラベルは区画(約91px)より広いので、セルからはみ出して中央寄せする。 */
.st-flow-mark { display: flex; margin-top: 3px; }
.st-flow-mark > span { position: relative; }
.st-flow-mark i {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 0; height: 0; display: block;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 6px solid var(--st-pink);
}
.st-flow-mark b {
  position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; line-height: 1.4;
  color: #fff; background: var(--st-pink);
  border-radius: 5px; padding: 2px 8px;
}
/* 目印はバーの下に浮くので、凡例が重ならないよう場所を空ける */
.st-flow-legend { margin-top: 32px !important; }
.st-flow-end {
  margin-top: 9px; padding: 7px 8px; border-radius: 6px;
  background: #fff4f6; color: var(--st-pink);
  font-size: 12.5px; font-weight: bold; line-height: 1.5;
}

/* 現地オフィスチップ */
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.st-chips span {
  background: #eef6f3;
  border: 1px solid #5fb3a3;
  color: #23705f;
  border-radius: 14px;
  font-size: 12px;
  padding: 4px 10px;
  font-weight: bold;
}

/* シミュレーター微調整（元のcalBox CSSを継承） */
.st-sim-head { text-align: center; font-size: 16px; }
.st-sim-head b { color: var(--st-pink); font-size: 20px; }

/* ===== シミュレーターの磨き（2026-09-03 憲伸さんFB） =================================
   直したのは3つ。数値・文言は変えていない。
   (1) 「約 64 万円」の穴。差額は <input readonly> で幅3em・右寄せだったため、
       擬似要素の「約」と数字の間に約2em分の空白が空き、黄色いマーカーも数字に乗らず
       折り返した2行目（「も!?」）だけに帯が付いていた。表示専用なので <span> に変えた。
   (2) 「…多く貯まるか／も!?」の孤立。line-height:1em で2行が詰まっていたのも合わせて直す。
   (3) 差が数字だけで、大小が一目で入ってこない。既に画面に出ている2つの数字
       （入力×12ヶ月 / WH_GOAL）を棒の長さにして並べた（新しい主張は足していない）。 */

/* (1)(2) 差額の行 */
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .txt_great {
  line-height: 1.4;
  text-wrap: pretty;
  word-break: auto-phrase;
}
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn span.savingsButton {
  font-size: 1.5em; line-height: 1; color: red; font-weight: bold;
  display: inline; max-width: none; padding: 0 .1em 0 .15em;
}
/* 「約」は絶対配置をやめて、数字の直前に普通に並べる（穴の原因だった） */
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .txtIn::before {
  position: static; display: inline; width: auto; height: auto;
  line-height: inherit; bottom: auto; left: auto;
}
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .result0 .txt_great {
  font-weight: normal;   /* 元は "nomal" の綴り違いで効いていなかった */
}

/* 未入力のときの案内（alert の置き換え） */
.st-sim-error {
  margin: 8px 0 0 !important; text-align: center;
  font-size: 13px; font-weight: bold; color: #c22449;
}

/* (3) 日本 vs ワーホリの比較バー */
/* 2本の棒は同じ物差しで読めないと意味がないので、行ごとのgridではなく
   全体を1つのgridにして3列を揃える（display:contents で行を透過させる）。
   行ごとにすると「36万円」と「100万円〜」で値の列幅が変わり、棒の右端がズレた。 */
.st-simbar[hidden] { display: none; }
.st-simbar {
  margin: 12px 0 4px;
  display: grid; grid-template-columns: 96px 1fr auto;
  align-items: center; gap: 9px 8px;
}
.st-simbar-row { display: contents; }
.st-simbar-cap { font-size: 11px; color: #555; line-height: 1.3; text-align: left; }
.st-simbar-track { background: #e6e6e6; border-radius: 5px; height: 16px; overflow: hidden; }
.st-simbar-fill { display: block; height: 100%; width: 0; border-radius: 5px; }
.st-simbar-fill.jp { background: #aab4bb; }             /* 内訳バーの「生活費」と同じ灰 */
/* 内訳バーの「貯金」と同じ橙。ただし WH_GOAL は「100万円〜（＝以上）」で
   上限ではなく下限なので、右端を薄くして「ここで止まるわけではない」ことを示す。
   ベタ塗りだと点推定に見え、貯金額の多い人には『ワーホリの方が短い棒』＝
   実際には言っていない主張が絵として出てしまう。 */
.st-simbar-fill.wh {
  background: linear-gradient(90deg, #e39400 0 82%, rgba(227,148,0,.35) 100%);
}
.st-simbar-val { font-size: 13px; font-weight: bold; white-space: nowrap; }
.st-simbar-row:nth-child(1) .st-simbar-val { color: #666; }
.st-simbar-row:nth-child(2) .st-simbar-val { color: #8a5a00; }
.st-reset-row { text-align: right; }
.st-reset-row input { background: none; color: #666; font-size: 14px; text-decoration: underline; cursor: pointer; }
.calBox .savingsButton {
  border: none;
  background: none;
  color: var(--st-pink);
  font-weight: bold;
  font-size: 28px;
  width: 90px;
  text-align: right;
}

/* カウンセリングの中身 */
.st-counsel {
  border: 2px dashed var(--st-pink);
  border-radius: 12px;
  background: #fff8fa;
  padding: 14px;
}
.st-counsel-head {
  text-align: center;
  font-weight: bold;
  color: var(--st-pink-dark);
  font-size: 17px;
  margin-bottom: 8px;
}
.st-counsel ol { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.9; }
.st-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.st-badges span {
  background: #fff;
  border: 1px solid var(--st-pink);
  color: var(--st-pink-dark);
  border-radius: 14px;
  font-size: 12px;
  padding: 4px 10px;
  font-weight: bold;
}

/* CTAボタン。
   元CSSの purupuru は 0.8s の skew(±9deg) 無限ループで、字形そのものが傾き続けて読めない
   （Kosei 2026-08-28「ちょっと酔うかも。もう少しちゃんと読ませる。目立っていいけど」）。
   字形を変えない scale の短いパルスに置き換え、1周期6秒のうち動くのは最初の約0.9秒だけ
   ＝残りは静止していて読める。keyframes purupuru は元CSSに2回定義されたまま残してある（未使用）。 */
@keyframes cta-pulse {
  0%, 15%, 100% { transform: scale(1); }
  3%  { transform: scale(1.035); }
  7%  { transform: scale(0.995); }
  11% { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  #sb-part-55 .purupuru { animation: none; }
}

/* CTAボタン（purupuru アニメは元CSSを継承） */
a.st-cta {
  display: block;
  text-decoration: none !important;
  /* 明るいピンクの上端(#ff5c85)では白文字が3.90:1しか出ず読みにくかった。一段濃い赤にして
     白5.57:1／サブ5.09:1 に上げた（コントラストは計算して決めた。目で決めていない）。
     赤の面積と文字サイズは変えていないので目立ち方は落ちない。CTAと送信ボタンで揃える。 */
  background: linear-gradient(180deg, #d92b55 0%, #c22449 55%, #a81b3d 100%);
  border-radius: 16px;
  box-shadow: 0 5px 0 #7d1630, 0 8px 18px rgba(168,27,61,.35);
  text-align: center;
  padding: 16px 12px 14px;
  color: #fff !important;
}
/* 黄色の文字は濃い赤の上でも3.83:1で、13pxには足りない（4.5必要）。文字は白（5.4:1）にして
   ＼／の記号だけ黄で残す＝ブランドのアクセントは保ったまま実績の文言が読める。 */
a.st-cta .st-cta-top { display: block; font-size: 13px; font-weight: bold; color: #fff; }
a.st-cta .st-cta-top i { color: var(--st-yellow); font-style: normal; }
/* フック内の強調に黄色マーカーを敷く（2026-09-03 Kosei）。
   ★濃赤地の上なので、マーカーの上だけ文字色を濃くする。白のままだと
   #ffffff on #fff799 = 1.30:1 で読めない。#333 なら 11.44:1（実測計算）。 */
a.st-cta .st-cta-top em {
  font-style: normal;
  /* ★濃赤地の「白文字」に黄色の線を引く。gradient の帯（body 側の 62-65% や 78%）だと
     白いグリフの下端に黄がかぶって字が読めなくなる（白×黄 = 1.10:1・2026-09-03 に実際に指摘）。
     text-underline-offset で線をグリフから離せば、文字は濃赤の上（5.77:1）のまま線だけ引ける。
     skip-ink: none で「り」などの下に出る部分でも線が途切れないようにする。 */
  background: none;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--st-yellow);
  text-decoration-thickness: 3px;
  /* offset は 3px。実測: 2px だと文字に近く、4px だと線の底が行を1.6px越えて
     下の主文言に寄る（主文言の上端まで4.4px）。3px なら行を0.6px、主文言まで5.4px。 */
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
a.st-cta .st-cta-main { display: block; font-size: 21px; font-weight: bold; line-height: 1.4; margin: 6px 0; }
a.st-cta .st-cta-sub { display: block; font-size: 12px; color: #ffd6e0; }

/* 国セレクタ（元 .js-map のフックだけ流用し、見た目は独自） */
/* 人気の国ランキング（2026-08-28: エリア2段選択 .st-map/.st-area/.st-preflist を置換） */
.st-rank { display: flex; flex-direction: column; gap: 8px; }
.st-rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid #e6e1d8;
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none !important;
  color: #333 !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.08);
}
.st-rank-no {
  flex: 0 0 auto;
  min-width: 46px;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  line-height: 1;
  color: #b3a68c;
}
.st-rank-no small { font-size: 12px; margin-left: 1px; }
.st-rank-name { flex: 1 1 auto; font-weight: bold; font-size: 17px; }
.st-rank-arrow { flex: 0 0 auto; color: #bbb; font-size: 20px; line-height: 1; }

/* 上位3つは色と大きさで差をつける（金・銀・銅） */
.st-rank-1, .st-rank-2, .st-rank-3 { padding: 17px 16px; }
.st-rank-1 { border-color: #e0b64a; background: #fffaef; }
.st-rank-2 { border-color: #b9c0c7; background: #fafbfc; }
.st-rank-3 { border-color: #cfa77f; background: #fdf8f3; }
.st-rank-1 .st-rank-no { color: #d19a17; font-size: 24px; }
.st-rank-2 .st-rank-no { color: #8e979f; font-size: 22px; }
.st-rank-3 .st-rank-no { color: #b07f52; font-size: 22px; }
.st-rank-1 .st-rank-name { font-size: 19px; }

/* 国ごとの色（2026-08-28 Kosei「このランキングの国ごとに色変えれない？？一位はもっと華やかに」）。
   色は原則その国の旗・象徴から取る。data-country はフォームの国チェックを自動ONにする
   契約キー（function.js）なので、セレクタに使うだけで値は触らない。
     australia  金＋緑（豪州のスポーツカラー。1位なので金を主役に）
     canada     赤 #e8112d（国旗のメープル）
     newzealand 紺黒＋銀（シルバーファーン）
     uk         紺 #012169（ユニオンジャック）
     malta      赤（国旗）。カナダと同系色なので彩度を落として区別している
     ireland    緑 #169b62（国旗）
   上の金銀銅の指定より後に書いて上書きする（.st-rank-1/2/3 の大きさ指定は残す）。 */
.st-rank-item[data-country="australia"] {
  border-color: #d4a017;
  background: linear-gradient(135deg, #fffdf2 0%, #fff4cc 52%, #ffe7a0 100%);
  box-shadow: 0 4px 0 #dfa829, 0 7px 16px rgba(212,160,23,.30), inset 0 1px 0 #fffdf5;
  padding: 20px 16px;
}
.st-rank-item[data-country="australia"] .st-rank-no { color: #b07d05; font-size: 26px; }
/* 1位だけ王冠を足す。文字（主張）は増やさず絵で華やかさを出す。順位は既に数字で言っている。 */
.st-rank-item[data-country="australia"] .st-rank-no::before {
  content: "👑";
  display: block;
  font-size: 15px;
  line-height: 1;
  margin-bottom: 2px;
}
.st-rank-item[data-country="australia"] .st-rank-name { color: #5d4300; font-size: 20px; }
.st-rank-item[data-country="australia"] .st-rank-arrow { color: #c9971f; }

.st-rank-item[data-country="canada"] { border-color: #e8112d; background: #fff6f6; }
.st-rank-item[data-country="canada"] .st-rank-no { color: #cf1026; }
.st-rank-item[data-country="canada"] .st-rank-arrow { color: #e8112d; }

.st-rank-item[data-country="newzealand"] { border-color: #2b3450; background: #f5f6fa; }
.st-rank-item[data-country="newzealand"] .st-rank-no { color: #2b3450; }
.st-rank-item[data-country="newzealand"] .st-rank-arrow { color: #6b748f; }

/* 4〜6位は枠を薄めにして「1位＞2,3位＞4-6位」の序列を保つ。国の色は数字と矢印で出す。 */
.st-rank-item[data-country="uk"] { border-color: #9fb0d8; background: #f4f6fc; }
.st-rank-item[data-country="uk"] .st-rank-no { color: #012169; }
.st-rank-item[data-country="uk"] .st-rank-arrow { color: #3c5390; }

.st-rank-item[data-country="malta"] { border-color: #e3b4b9; background: #fffafa; }
.st-rank-item[data-country="malta"] .st-rank-no { color: #b03442; }
.st-rank-item[data-country="malta"] .st-rank-arrow { color: #cf7f88; }

.st-rank-item[data-country="ireland"] { border-color: #93cfb3; background: #f3fbf7; }
.st-rank-item[data-country="ireland"] .st-rank-no { color: #0f7d4e; }
.st-rank-item[data-country="ireland"] .st-rank-arrow { color: #34a877; }

/* 国旗（2026-08-28 Kosei「国旗とかつけたら？？？？」）。国名の前に絵文字で入れる。
   HTMLは触らず data-country から出しているので、順位や国が入れ替わってもCSSだけで追従する。
   ⚠️ 地域表示子（Regional Indicator）の国旗は Windows に字形が無く、Chrome/Edge では
      「AU」「CA」のような英字2文字にフォールバックする（iOS/Android/macOS は国旗で出る）。
      崩れではないが、PCでも確実に旗を出したいなら SVG に置き換える必要がある。 */
.st-rank-item[data-country="australia"] .st-rank-name::before { content: "🇦🇺"; margin-right: 8px; font-size: 22px; line-height: 1; vertical-align: -3px; }
.st-rank-item[data-country="canada"] .st-rank-name::before { content: "🇨🇦"; margin-right: 8px; font-size: 22px; line-height: 1; vertical-align: -3px; }
.st-rank-item[data-country="newzealand"] .st-rank-name::before { content: "🇳🇿"; margin-right: 8px; font-size: 22px; line-height: 1; vertical-align: -3px; }
.st-rank-item[data-country="uk"] .st-rank-name::before { content: "🇬🇧"; margin-right: 8px; font-size: 22px; line-height: 1; vertical-align: -3px; }
.st-rank-item[data-country="malta"] .st-rank-name::before { content: "🇲🇹"; margin-right: 8px; font-size: 22px; line-height: 1; vertical-align: -3px; }
.st-rank-item[data-country="ireland"] .st-rank-name::before { content: "🇮🇪"; margin-right: 8px; font-size: 22px; line-height: 1; vertical-align: -3px; }
.st-rank-item[data-country="australia"] .st-rank-name::before { font-size: 26px; }

/* 「まだ決めてない」は順位の外。控えめに */
.st-rank-undecided {
  margin-top: 4px;
  border-style: dashed;
  border-color: #d8d2c6;
  background: #faf9f6;
}
.st-rank-undecided .st-rank-name { font-size: 15px; font-weight: bold; color: #6b6357; }

.st-rank-note { margin: 8px 2px 0; font-size: 11px; color: #999; text-align: right; }

/* シミュレーター表示微調整（クローン元CSSの上書き） */
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .dlBox dt {
  font-size: 13px;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .txtIn::before {
  position: static;
  display: inline;
  width: auto;
  height: auto;
}
#sb-part-1885.sb-custom-part-m9wfm39podhts6khxpn .txt_great {
  font-size: 20px;
}

/* ページ内フォーム */
html { scroll-behavior: smooth; }
.st-form {
  border: 3px solid var(--st-pink);
  border-radius: 16px;
  background: #fff;
  padding: 18px 16px;
}
.st-form-head { text-align: center; color: var(--st-pink); font-weight: bold; font-size: 15px; }
.st-form-title { text-align: center; font-size: 18px; font-weight: bold; line-height: 1.6; margin: 6px 0 14px; }
.st-form-title span { color: var(--st-pink); background: linear-gradient(transparent 65%, var(--st-yellow) 0%); }
.st-form-label { font-size: 14px; font-weight: bold; margin: 12px 0 6px !important; }
.st-req {
  background: var(--st-pink);
  color: #fff;
  font-size: 10px;
  border-radius: 4px;
  padding: 2px 6px;
  vertical-align: 2px;
}
.st-form-countries { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-form-countries label { display: block; cursor: pointer; }
.st-form-countries input { display: none; }
.st-form-countries span {
  display: block;
  text-align: center;
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: bold;
  color: #555;
  background: #fafafa;
}
.st-form-countries input:checked + span {
  border-color: var(--st-pink);
  background: #fff3f6;
  color: var(--st-pink-dark);
}
.st-input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
}
.st-input.st-error { border-color: #e60000; background: #fff5f5; }
.st-form-agree { text-align: center; font-size: 11px; color: #888; margin: 14px 0 8px !important; }
.st-submit {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  /* 明るいピンクの上端(#ff5c85)では白文字が3.90:1しか出ず読みにくかった。一段濃い赤にして
     白5.57:1／サブ5.09:1 に上げた（コントラストは計算して決めた。目で決めていない）。
     赤の面積と文字サイズは変えていないので目立ち方は落ちない。CTAと送信ボタンで揃える。 */
  background: linear-gradient(180deg, #d92b55 0%, #c22449 55%, #a81b3d 100%);
  box-shadow: 0 4px 0 #7d1630;
  color: #fff;
  font-size: 19px;
  font-weight: bold;
  border-radius: 14px;
  padding: 16px 8px;
}
.st-form-note { text-align: center; font-size: 12px; color: #888; margin-top: 8px !important; }

/* マンガパネル＋HTML吹き出し（セリフは画像に焼かず、ここで編集する） */
.st-panel { position: relative; margin: 20px 0; border: 3px solid #2a2a2a; border-radius: 4px; overflow: hidden; }
.st-panel img { display: block; margin: 0 !important; width: 100%; height: auto; }
.st-bub {
  position: absolute;
  background: rgba(255,255,255,.96);
  border: 2px solid #2a2a2a;
  border-radius: 14px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.55;
  box-shadow: 2px 2px 0 rgba(0,0,0,.18);
}
.st-bub b { color: #d63757; }

/* 上向き（右寄り）のしっぽ。p19の面接官のセリフ用。話者が吹き出しの真上にいる構図。 */
.st-bub-tail-tr::before,
.st-bub-tail-tr::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 18%;
  width: 0;
  height: 0;
  border-style: solid;
}
.st-bub-tail-tr::before {
  border-width: 0 9px 13px 9px;
  border-color: transparent transparent #2a2a2a transparent;
}
.st-bub-tail-tr::after {
  margin-bottom: -3px;
  margin-right: 3px;
  border-width: 0 6px 9px 6px;
  border-color: transparent transparent rgba(255,255,255,.96) transparent;
}

/* 下向き（左寄り）のしっぽ。p14のコーチのセリフ用。PCの真上に置いて画面を指す。
   左向きが入らない構図（PC画面とミキの間が20%しかなく、右に置くとミキの顔に掛かる）のための変種。 */
.st-bub-tail-bl::before,
.st-bub-tail-bl::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 18%;
  width: 0;
  height: 0;
  border-style: solid;
}
.st-bub-tail-bl::before {
  border-width: 13px 9px 0 9px;
  border-color: #2a2a2a transparent transparent transparent;
}
.st-bub-tail-bl::after {
  margin-top: -3px;
  margin-left: 3px;
  border-width: 9px 6px 0 6px;
  border-color: rgba(255,255,255,.96) transparent transparent transparent;
}

/* p14 コーチのセリフを下げる（2026-09-03 Kosei「もっと下げて」）。
   ★根拠（page_14.jpg を解析）
     PC画面の上端 = ページy 47.3% ／ コーチの顔の上端 = 49.2%。
     しっぽは箱の下から13px。375px（箱の高さが相対的に最大）で
     top:34% → しっぽ下端 48.1% ＝ PC画面の上端にちょうど接する。
     36%以上にすると375pxでコーチの顔に掛かる（実測）。
   ★なぜ CSS か
     PIN[(14,1)]=(31.0,6.0) があるため、inline に書くと place_bubbles.py の実行で必ず戻る。
     実際 19:41 に inline で 34% にしたが、19:44:37 の実行で 30.8% に戻された。
     ★(14,1) は PIN 固定なのでソルバーは毎回同じ値を書くだけ。p11 のような
       「解が発散する」問題は起きない（p11 は PIN が無く最適化で決まるため発散した）。
   ★本筋は PIN の更新: (14, 1): (34.0, 6.0) */
/* 箱の高さは全幅58px固定・しっぽ13px。下端から逆算すれば幅に関係なく限界まで下げられる。
   calc(47.3% - 71px) で箱の下端が全幅ちょうど 47.4〜47.5%＝PC画面の上端に載る（実測）。
   固定%（34%）だと375pxを基準にせざるを得ず、PC幅では6ポイント分ムダに上へ残っていた。 */
.st-bub-p14coach { top: calc(47.3% - 71px) !important; }

/* p11 の話者が左右逆だったので入れ替える（2026-09-03 Kosei指摘）。
     絵は 左＝ユイ（スマホを見せて話す）／右＝ミキ（頬に手をあてて驚く）。
     なのに「ええーっ!?」が左、「かかった費用は、ぜんぶ回収したよ」が右に出ていた。
   ★横だけ振り替えれば足りる（縦は動かさない）
     顔0(ユイ) y3〜25% / 顔1(ミキ) y4〜27% に対し、
     セリフは y44〜65%、効果音は y30〜55% と、どちらも顔より下にある。実測で確認済み。
   ★効果音は right: で留める
     .st-sfx は幅が可変（375pxで48.5%、PCで35%）なので left:% だと右端が幅ごとにズレる。
     右に置きたいものは right: で固定する。
   ★本筋は place_bubbles.py 側の ASSIGN（話者の割り当てそのものが逆）。
     同ファイルは別セッション担当なので、ここでは CSS で上書きしている。 */
.st-p11-say { left: 1.1% !important; }
.st-p11-sfx { left: auto !important; right: 1.1% !important; }

/* p10 下コマのコーチ枠を、空きスペースの中央に置く（2026-09-03 Kosei「もっと中央に」）。

   ★空きスペースの実測（page_10.jpg を解析）
     下コマは y 58.7%〜99.0%。右側の写真の左枠が x 60.6%。
     つまり枠を置ける範囲は x 0〜60.6% / y 58.7〜99.0%、その中心は x 30.3% / y 78.85%。

   ★なぜ left:% ではなく transform で中心を取るか
     この枠は幅が固定でない（375px で 211x86、PC で 238x91）。max-width:56% のクランプと
     文字の折り返しでサイズが変わるため、「左端を何%」では中央に揃わない。
     中心を 30.3% に置いて translate(-50%,-50%) で引き戻せば、サイズが変わっても中央のまま。

   ★top の -7.6px は何か
     .st-panel の padding box は絵より 9.6px 高い（どの幅でも一定・実測）。
     top:% はその padding box に対して解決されるので、絵の 78.85% に合わせるには
     78.85% - 9.6px*0.7885 = 78.85% - 7.6px と補正する必要がある。

   ★SP幅を除外している理由
     375px では枠の幅が 63.0%（211px）あり、空きスペース 60.6%（203px）より大きい。
     中央に寄せると左端がコマの外へ出る（実測 -4px）ので、狭い幅は現状のまま左詰めにする。
     ※SPでは枠が写真に 4.6% 重なっているが、これは今回の変更前からの状態。

   ★place_bubbles.py は style 属性しか書き換えないので、class 指定のここは実行しても残る。 */
@media (min-width: 480px) {
  .st-bub-p10coach {
    left: 30.3% !important;
    top: calc(78.85% - 7.6px) !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* p10「え、どういうこと？」の横位置（2026-09-03 Kosei「もっと右」）。
   ★なぜ inline の left ではなく CSS か
     place_bubbles.py が style の top/left/right/bottom/transform を剥がして書き直すため、
     inline に書くと実行のたびに PIN(10,1)=(5.5,34.0) の値へ戻る。class は書き換えないので
     ここに !important で置けば残る。本筋は PIN の更新だが place_bubbles.py は別セッション担当。

   ★なぜ幅で条件が変わるか（固定%にできない理由）
     吹き出しは font 13px・padding 固定なので幅は 88px のまま。コマは幅に比例して広がる。
     つまり同じ left:32% でも、ユイの顔までの余白は 375px で 1px、PC(コマ580px)で 68px。
     実測: 375→1px / 390→5px / 600→62px / 800→116px / 1000以上→68px(コマ幅が580pxで頭打ち)

   ★置きたい場所（2026-09-03 Kosei「背景の？の上に配置したい」）
     背景に描かれた「？」は x 38.2〜40.3% / y 5.4〜9.9%（cv2の連結成分で実測）。
     これを箱で覆いたい＝箱の左端が 38.2% より左に来る必要がある。
     一方、ミキの顔の実際の右端は 36.8%（※登録FACESの32%は小さすぎる。切り出しで確認済み）。
     よって左端の狙いは 36.8%〜38.2% の隙間 → 37.5% を取る。
     ただし狭い幅では箱(88px)がコマに対して相対的に大きく、37.5%に置くとユイの顔(59%)に
     掛かるので、min() で「右端が58%を超えない」方を上限にする。
     狭い幅では左に寄る分、箱は「？」を内側に含むので、どちらの幅でも？は隠れる。
     88px = 実測した箱の幅（文言・padding・font-size を変えたら測り直すこと）。 */
.st-bub-p10q {
  /* 2026-09-03 Kosei「もう少し右にして」。
     ★旧: left: min(37.5%, calc(58% - 88px)) —— 88px は「当時の実測の箱幅」で、
       コメントに「padding や font-size を変えたら測り直すこと」と書いてあったのに、
       同日に padding を 7px3px → 4px2px にして箱が 88px → 74px になったまま放置し、
       差の14pxぶん左にずれていた（＝古い定数が黙って効いていた）。
     ★直し方: px の定数をやめて right: で指定する。箱幅が変わっても右端は動かないので
       同じ事故が起きない。右端59%はユイの顔(x59〜70)の直前＝顔かぶり0%を保てる最も右
       （left を1%刻みで動かして実測: left37→右端59で0%、left39→11%でNG）。 */
  left: auto !important;
  right: 41% !important;
}

/* 左向きのしっぽ付き吹き出し。2026-08-30 Kosei「PCから音声が出ているのがわかるように、
   吹き出しの左側に矢印みたいなのを」。p19のコーチのセリフ（ノートPCの画面から聞こえている）用。
   外側の三角＝枠線の色／内側の三角＝背景色 の2枚重ねで、枠線のある吹き出しのしっぽを作る。
   ⚠️ 疑似要素は getBoundingClientRect に入らないので、総合QAの顔被り検査から見えない。
      しっぽの分（左に12px）は人に掛からないか目視で確かめること。 */
.st-bub-tail-l::before,
.st-bub-tail-l::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
}
.st-bub-tail-l::before {
  margin-top: -9px;
  border-width: 9px 13px 9px 0;
  border-color: transparent #2a2a2a transparent transparent;
}
.st-bub-tail-l::after {
  margin-top: -6px;
  margin-right: -3px;
  border-width: 6px 9px 6px 0;
  border-color: transparent rgba(255,255,255,.96) transparent transparent;
}
.st-nar { border-radius: 3px; background: #fffef4; font-size: 12px; }
/* 機械（PC・スピーカー・電話）から出ている声。2026-08-30 Kosei
   「PCの音声から出ているように表現したい」→ 最初にギザギザ枠で作ったが
   「雑音とかうるさい音を表現する時の吹き出しになっている」と却下（2026-08-30）。
   ギザギザは怒鳴り声・爆発音の記号で、落ち着いた説明の声には合わない。
   **枠の形は .st-bub のまま（角丸）で、機器を指す尻尾だけを足す**のが正解。
   作り: 三角形2枚。外側＝枠の色、内側＝中身の色を枠の太さ(2px)ぶん内に重ねる。
     ・.st-bub は position:absolute なので、擬似要素の基準はそのまま取れる。
       ここで position:relative を書くと絶対配置が外れて吹き出しが飛ぶ（同日に踏んだ）。
     ・尻尾は border-box の外に14px出る。getBoundingClientRect には入らないので
       check_gutters は見ない。隣のコマに刺さらないか位置は実測で確かめること。
   向きを変えたいときは st-speaker-left を足す（尻尾が左を向く）。 */
.st-bub.st-speaker::before,
.st-bub.st-speaker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.st-bub.st-speaker::before {          /* 外側＝枠の色 */
  right: -14px;
  margin-top: -9px;
  border-width: 9px 0 9px 14px;
  border-left-color: #2a2a2a;
}
.st-bub.st-speaker::after {           /* 内側＝中身の色。枠の太さ2pxぶん内に重ねる */
  right: -10px;
  margin-top: -7px;
  border-width: 7px 0 7px 11px;
  border-left-color: rgba(255,255,255,.96);
}
.st-bub.st-speaker.st-speaker-left::before { right: auto; left: -14px; border-width: 9px 14px 9px 0; border-left-color: transparent; border-right-color: #2a2a2a; }
.st-bub.st-speaker.st-speaker-left::after  { right: auto; left: -10px; border-width: 7px 11px 7px 0; border-left-color: transparent; border-right-color: rgba(255,255,255,.96); }

.st-mono { border-style: dashed; background: rgba(255,255,255,.9); }
.st-em { color: #d63757; font-size: 16px; }
.st-note { border: none; box-shadow: none; background: rgba(255,255,255,.85); font-size: 9px; color: #666; padding: 2px 6px; }
.st-big { font-size: 15px; }
.st-huge { font-size: 24px; color: #d63757; white-space: nowrap; }
.st-huge sup {
  font-size: 11px;
  vertical-align: super;   /* リセットCSSが sup を baseline に戻していて、
                              ※が数字の「ど真ん中」（中心との差1px）に来ていた。
                              super にすると ※の上端が数字の上端とぴったり揃う（差0px）。
                              top だと17px行き過ぎて文字の上に浮く。2026-08-20 Kosei指摘 */
}

/* ヒーロー（見出しはHTML・作画は下） */
.st-hero { background: var(--st-pink); border-radius: 0 0 14px 14px; overflow: hidden; }
.st-hero-copy { text-align: center; padding: 16px 10px 12px; color: #fff; }
.st-hero-badge {
  display: inline-block;
  background: #fff;
  color: var(--st-pink);
  font-size: 12px;
  font-weight: bold;
  border-radius: 14px;
  padding: 4px 12px;
}
.st-hero-badge sup { font-size: 8px; }
.st-hero-line1 { font-size: 21px; font-weight: bold; margin-top: 10px; }
.st-hero-line2 { font-size: 38px; font-weight: bold; color: var(--st-yellow); line-height: 1.3; }
.st-hero-line2 sup { font-size: 13px; }
.st-hero-line3 { font-size: 15px; font-weight: bold; }
.st-hero-art { position: relative; }
.st-hero-art img { display: block; margin: 0 !important; width: 100%; height: auto; }
.st-hero-tag {
  position: absolute;
  bottom: 6%;
  font-size: 12px;
  font-weight: bold;
  border-radius: 12px;
  padding: 4px 10px;
  box-shadow: 1px 1px 0 rgba(0,0,0,.25);
}
.st-hero-tag-l { left: 4%; background: rgba(90,100,115,.92); color: #fff; }
.st-hero-tag-r { right: 4%; background: rgba(255,225,77,.95); color: #8a5a00; }
.st-hero-notes { color: #ffc2d1; font-size: 9px; text-align: center; padding: 8px 10px 12px; margin: 0 !important; line-height: 1.6; }

/* 縦書き吹き出し・ナレーション枠・効果音（LIFULL様式の踏襲） */
.st-vbub, .st-vth {
  position: absolute;
  writing-mode: vertical-rl;
  background: #fff;
  border: 2.5px solid #2a2a2a;
  border-radius: 50% / 46%;
  padding: 12px 8px;
  font-size: clamp(10px, 3.4vw, 15px);
  font-weight: bold;
  line-height: 1.75;
  letter-spacing: 1px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.14);
  max-height: 88%;
}
.st-vth b, .st-vbub b { color: #d63757; }
.st-vth .tcy { text-combine-upright: all; }
.st-vbub {
  position: absolute;
  writing-mode: vertical-rl;
  background: #fff;
  border: 2.5px solid #2a2a2a;
  border-radius: 50% / 46%;
  padding: 1.35em 0.88em;   /* px固定にすると画面幅で破綻する。文字は clamp(...,15px) で
                              広い画面ほど大きくなるのに padding が固定だと、楕円への
                              食い込みが増える（375pxで0px / 1280pxで1.1px。2026-08-20 検出）。
                              em にして文字に比例させると全幅で0pxになる。
                              1.35em/0.92em は 1280pxで食い込み0pxになる最小値(1.25/0.86)に余裕を足した値 */   /* 縦は18→16px。吹き出しの高さ137→133pxで、コマ内で置ける位置が
                          1段下がる（上端17.07%→18.29%）。2026-08-20 Kosei「もっと全体を下に」。
                          文字サイズは12.75pxのまま。楕円への食い込みは0pxを維持 */   /* 12px だと幅26.9%で左端が0.716になり、ユイの顔矩形(右端0.72)を
                          1.3px かすって被覆4%になる。11px で幅26.3%・左端0.726＝被覆0%
                          （2026-08-20 Kosei「顔にかからないくらいに」）。
                          10px まで削ると今度は楕円に文字が0.37px食い込むので11pxが最適点 */   /* 楕円(border-radius:50%/46%)の内接矩形に文字を収めるための余白。
                          12px 8px だと文字の角が曲線に食い込む（2026-08-20 Kosei指摘、
                          楕円の式で36隅を判定して3隅がNG・最大違反1.075）。
                          .st-vth は角丸長方形なので上の共通ルールの 12px 8px のまま */
  font-size: clamp(10px, 3.4vw, 15px);
  font-weight: bold;
  line-height: 1.6;    /* 縦書きでは line-height が「列の幅」を決める。文字を小さくせずに
                          幅だけ詰められる唯一のつまみ。1.75 だと3列で幅27.4%になり、
                          楕円に文字が0.37px食い込む／paddingを足すと今度はユイの顔を
                          15%覆う、という板挟みだった（2026-08-20 実測）。1.6 で幅26.9%、
                          はみ出し0px・顔0%・コマ余裕23px と全条件に余裕が出る */
  letter-spacing: 1px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.14);
  max-height: 88%;
}
.st-vbub b { color: #d63757; }
.st-vbub .tcy { text-combine-upright: all; }
.st-vth { border-style: dashed; border-radius: 24px; background: rgba(255,255,255,.94); } /* 心の声 */
/* 縦書きナレの末尾の ※ が直前の文字（「！」など）に重なる問題（2026-08-31 Kosei指摘）。
   原因: リセットCSS の `sup{top:-.5em}` は横書き前提。writing-mode:vertical-rl では
   物理的な「上」がインライン方向の**手前**になるため、※ が直前の文字の上に引き戻される。
   実測で隙間は -3.8px（＝重なっていた）。top:0 で引き戻しを止め、
   margin-inline-start で間隔を作る（縦書きではこれが文字送り方向の間隔になる）。
   実測の隙間: 375px→2.6px / 390px→2.7px / 1280px→5.0px（font に比例する）。
   対象は p16「…決まった！※」と p17「…＋100万円以上※」の2箇所。 */
.st-vnar sup {
  top: 0;
  margin-inline-start: 0.35em;
}

.st-vnar {
  position: absolute;
  writing-mode: vertical-rl;
  background: #fff;
  border: 2px solid #2a2a2a;
  border-radius: 2px;
  padding: 10px 7px;
  font-size: clamp(10px, 3.2vw, 14px);
  font-weight: bold;
  line-height: 1.75;
  letter-spacing: 1px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.14);
  max-height: 90%;
}
.st-vnar .tcy { text-combine-upright: all; }
.st-sfx {
  position: absolute;
  font-size: clamp(20px, 7.6vw, 36px);   /* 2026-08-24 拡大: 旧 clamp(15px,5.6vw,26px)。
                                             踏襲元LIFULLは効果音を「絵」として巨大に描く。うちのHTML効果音も
                                             漫画感を出すため一段大きく（SP375pxで約21px→約28px）。
                                             文字が大きくなるので配置は place_bubbles で解き直す。 */
  font-weight: 900;
  color: #d63757;
  -webkit-text-stroke: 6px #fff;   /* 文字拡大に合わせて白フチも太く（4px相当の見えを維持） */
  paint-order: stroke fill;
  transform: rotate(-8deg);
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.14);
}
.st-sfx-dark { color: #3a4a63; }
.st-final-box {
  position: absolute;
  background: rgba(255,255,255,.95);
  border: 3px solid #2a2a2a;
  border-radius: 10px;
  padding: 12px 18px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}
/* 2026-08-28: SPで赤文字が白箱から7pxはみ出し、黒枠を越えて見えていた（Kosei「スマホビューで壊れている」）。
   原因は固定27px（HTML側のインライン24pxが勝っていた）＋ .st-huge の white-space:nowrap で、
   375pxのとき1行目「日本で準備してから」215px > 箱の内側208px。インライン指定を外し、
   .st-sfx と同じ clamp(vw) 方式に統一。375/390/1280/320px の4幅で箱内に収まることを実測済み。 */
.st-final-box .st-huge { font-size: clamp(18px, 5.6vw, 30px); }

/* p18 の決め枠は「コマの底」に置く（2026-09-03 Kosei「底辺までいけるでしょ」）。
   文字サイズ・パディングは一切変えていない。動かしたのは位置だけ。

   ★なぜ inline style ではなく CSS に書くか
     place_bubbles.py は .st-panel 直下の div（.st-note 以外）を全部ソルバー対象として
     拾い、style から top/bottom/left/right/transform を剥がして書き直す
     （scripts/place_bubbles.py:540 付近）。.st-final-box も対象に入るが PIN に (18,1) が
     無いので、実行のたびにソルバーの答えで上書きされる。
     実際 2026-09-03 18:21 の実行で bottom:7.3% が top:48.0% に戻された。
     CSS はスクリプトが触らないので、ここに書けば実行しても残る。
     ※ place_bubbles.py 側に PIN を足すのが本筋だが、同ファイルは別セッション担当のため触らない。

   ★なぜ px と % の足し算か
     .st-panel の padding box は「絵の高さ + 9.1px」で、この 9.1px はどの幅でも一定
     （幅に比例しない）。一方、絵に描かれた黒枠線は画像高の 98.0%＝下端から 2.0% の位置。
     固定分(9.1px)と比例分(2%)の両方が要るので calc で足す。
     % だけだと狭い幅で枠線を越え、広い幅で 100px 以上余る（実測済み）。 */
.st-final-box {
  top: auto !important;
  bottom: calc(9.1px + 2%) !important;
}
/* p18 の決め枠は top ではなく bottom で留める（2026-09-03 Kosei「もう少し下に」）。
   ★理由: .st-panel の padding box は「絵の高さ + 9.1px」で、この 9.1px はどの幅でも
     一定（幅に比例しない）。だから top:% で置くと、狭い幅では絵の枠線ぎりぎり、
     広い幅では枠線まで30px以上余る、と幅ごとに着地点がバラつく。
     実測: top:53% のとき 375px=枠線まで-0.4px / 900px=+109.5px。
     下端から留めれば、どの幅でも「絵の枠線の少し上」に揃う。
   bottom:7.3% の根拠（実測・375pxがいちばん厳しい）:
     375px→枠線まで2.2px / 390px→2.7px / 600px→9.5px / 900px→14.9px
   ※ place_bubbles.py は top/bottom/left/right を剥がして書き直すので、
     この指定も実行すれば消える（PIN に (18,1) が無いため）。

   SPだけ縦パディングを詰める。
   p18 の枠は 375px で高さ93px、絵の高さ201px の46%を占めていて、
   top を下げるだけでは絵に描かれた黒枠線（画像高の98.0%）を越えてしまう。
   ★基準はコマの border box ではなく「絵そのもの」。border box で測ると
     まだ余裕があるように見えるが、実際は絵の下端の白い余白を数えている。
   縦パディングを4px削って箱を93px→85pxにし、その分 top を下げた。 */

/* FV: 見出しブロック → 実写2枚（踏襲元①の型） */
.st-fv { background: #fff; padding: 6px 0 4px; }
.st-fv-ribbon {
  width: fit-content;
  margin: 0 auto;
  background: #fff;
  color: var(--st-pink-dark);
  font-weight: bold;
  font-size: 15px;
  border: 2px solid var(--st-pink);
  border-radius: 18px;
  padding: 5px 16px;
  position: relative;
  z-index: 2;
}
.st-fv-ribbon b { font-size: 17px; }
.st-fv-ribbon sup { font-size: 9px; }
.st-fv-main {
  background: var(--st-pink);
  color: #fff;
  text-align: center;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.35;
  border-radius: 18px;
  padding: 20px 10px 16px;
  margin: -14px 2px 0;
  letter-spacing: 1px;
}
.st-fv-accent { color: var(--st-yellow); }
.st-fv-dots {
  height: 8px;
  margin: 12px 0 10px;
  background-image: radial-gradient(var(--st-pink) 42%, transparent 46%);
  background-size: 14px 8px;
  background-repeat: repeat-x;
  background-position: center;
}
.st-fv-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.8;
  white-space: nowrap;
}
.st-fv-face { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #f3c7d2; flex-shrink: 0; }
.st-fv-marker {
  font-size: 17px;
  color: var(--st-pink-dark);
  background: linear-gradient(transparent 62%, var(--st-yellow) 0%);
}
/* 2026-09-03: 写真の表示幅に上限を付ける。
   ★理由: 素材の実解像度は 720x960 が上限（deckの埋め込みが640x720で、これ以上の原本が無い）。
     一方 768px幅のときだけ表示が 361px まで伸び、DPR2 で 722px 必要になって素材が足りず、
     結果その幅でだけ写真が眠く見えていた（実測: 375→164.5 / 768→361.0 / 1280→287.0）。
     並びの上限を 580px（＝1280px幅と同じ）に揃えると、どの幅でも1枚287px以下に収まり、
     DPR2の必要量 574px < 素材720px となって全幅で解像度が足りる。 */
/* ★詳細度の注意: ベンダーCSS(1行目の最小化された塊)に
     body .article-body div { max-width:100% }  ＝ (0,1,2)
   があるため、素の .st-fv-photos (0,1,0) では max-width が効かない。
   body .article-body .st-fv-photos = (0,2,1) で上回らせる。 */
body .article-body .st-fv-photos {
  display: flex; gap: 6px; margin: 12px auto 0;
  max-width: 580px;
}
/* 2026-09-03: FV写真を <picture>（webp + jpgフォールバック）にしたので、
   flexの子は img ではなく picture になる。幅指定を picture 側へ移す。
   webp 720x960 q85 = 68KB（従来 jpg 600x800 q92 = 101KB より軽く、かつ鮮鋭）。 */
.st-fv-photos picture { width: calc(50% - 3px); display: block; }
.st-fv-photos img { width: 100%; height: auto; display: block; margin: 0 !important; border-radius: 4px; }
.st-fv-notes { font-size: 9px; color: #999; text-align: center; margin: 8px 0 0 !important; line-height: 1.6; }

/* 英語コーチングの強調カットイン（ストーリー上の"種明かし"なので目立たせる） */
.st-coach {
  background: #fffbe8 !important;
  border: 3px solid var(--st-pink) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 rgba(231,53,98,.25) !important;
  padding: 8px 12px !important;
  line-height: 1.5;
}
.st-coach b {
  display: block;
  font-size: clamp(14px, 4.4vw, 19px);
  color: var(--st-pink-dark);
  background: linear-gradient(transparent 62%, var(--st-yellow) 0%);
}
.st-coach span {
  display: block;
  margin-top: 3px;
  font-size: clamp(9px, 2.9vw, 12px);
  color: #666;
  font-weight: bold;
}

/* 段落間の空行スペーサー。以前は <div><br></div> が本文の line-height(1.8=30.6px) をそのまま
   高さに使っていて、37本で1,132px を消費していた。高さをここ1箇所で決める。
   CSSが古いキャッシュのままでも <br> は残してあるので、最悪でも従来の30.6pxに戻るだけで崩れない。 */
.st-sp { line-height: 14px; }

/* 追従CTA（右下・丸／吹き出し型）。2026-08-28 設置 → 2026-08-30 Kosei「形は丸がいいな。押したくなるようなデザインで」。
   漫画の吹き出し風に尻尾を足す案は 2026-08-30 に実装して却下した（丸の白フチと尻尾の白線が
   交差して描画バグに見える。加えて吹き出しは「飾り」に見え、バッジの方が「押せる物」に見える）。
   色は本体CTA・送信ボタンと同じ濃い赤に揃える（白文字5.57:1）。
   直径は 2026-08-30 に 68px→48px に縮めた。理由は「漫画のナレを隠す」実害があったから。
   縦書きのナレは右端から始まるので、右下に居座るFABと構造的にぶつかる。
   harness/check_fab_cover.html の実測で、25%以上隠れる吹き出しが 6件→2件 に減った
   （68px/端14px: P18 100% P07 66% P10 36% P11 33% P04 32% P08 31%
     → 48px/端6px : P07 34% P18 51%）。残る2件はナレ側の位置で逃がす。
   48px は最小タップ領域44pxを満たす下限。これ以上は縮めない。
   文字も比率どおり縮める（11/18px → 9/15px）。縮めないと円からはみ出す（check_fab が落ちる）。
   押したくなる仕掛けは4つ: ①光沢とドロップシャドウで立体（押せる物に見せる）
   ②出現時にポンと弾む ③2.6秒ごとに輪が広がる（動くものに目が行く）④押すと沈む。
   z-index はページ内の最大が3なので 30 で十分。将来モーダルを足すならその下に来るようにする。
   iPhoneのホームバーに隠れないよう safe-area 分だけ底上げする。 */
.st-fab {
  position: fixed;
  right: 6px;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  background:
    radial-gradient(120% 95% at 30% 16%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #e0325d 0%, #c22449 55%, #a81b3d 100%);
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 3px 0 #7d1630, 0 6px 14px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(14px) scale(.86);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
/* 広がる輪。目を引くためだけの飾りなので pointer-events は殺す。 */
.st-fab::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(217,43,85,.55);
  opacity: 0;
  pointer-events: none;
}
.st-fab-sm { font-size: 9px; font-weight: bold; letter-spacing: .06em; opacity: .95; }
.st-fab-lg { font-size: 15px; font-weight: bold; letter-spacing: .04em; }
.st-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.st-fab.is-on::after { animation: st-fab-ring 2.6s ease-out infinite; }
.st-fab.is-on:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #7d1630, 0 12px 24px rgba(0,0,0,.30);
}
.st-fab.is-on:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7d1630, 0 4px 10px rgba(0,0,0,.24);
}
@keyframes st-fab-ring {
  0%   { transform: scale(1);   opacity: .75; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (min-width: 768px) {
  .st-fab { width: 76px; height: 76px; right: 20px; bottom: 20px; }
  .st-fab-sm { font-size: 12px; }
  .st-fab-lg { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-fab { transition: none; }
  .st-fab.is-on::after { animation: none; }
}

/* 最終フォームの送信ボタンの直上に置く「最後のフック」。2026-09-03 Kosei。
   ★「このページからのお申込み限定」は根拠が無いので使わない。割引の根拠は deck p.22 の
   「今月スタート枠」なので、限定の言い方はそこに合わせる（有利誤認を避ける）。
   ★見た目は Kosei 指定で「＼ 文言 ／」型。白地に置くので文字は濃い赤。
   ★差し色は LP で既に使っている黄色マーカー #fff799（linear-gradient(transparent 50%, ...)）。
     金額の上にだけ敷く。コントラストは計算済み: #a81b3d on #fff799 = 6.58:1（20px太字は3.0必要）。
     ＼／ は #d92b55 で白地に 4.74:1。黄色を文字色に使うと白地で 1.30:1 になるので使わない。
   ★動きは付けない。2026-08-31 に追従CTAで「ちょっと酔うかも」の指摘を受けているため。 */
.st-form-hook {
  margin: 0 0 8px;
  text-align: center;
  line-height: 1.4;
  font-size: 13px;
  font-weight: 700;
  color: #c22449;
}
.st-form-hook i {
  color: #d92b55;
  font-style: normal;
  font-weight: 700;
  padding: 0 2px;
}
.st-form-hook b {
  display: block;
  margin-top: 3px;
  font-size: 22px;
  font-weight: 800;
  color: #a81b3d;
  letter-spacing: -.01em;
}
.st-form-hook b em {
  font-style: normal;
  background: linear-gradient(transparent 62%, #fff799 62%);
  padding: 0 2px;
}


/* ============================================================
   SP最適化（2026-09-03 Kosei「PCは完璧。SPで適切に表示できるように」）
   ★PC幅の見た目は1pxも変えない。コマ幅は本文コンテナの上限で止まるので、
     このファイルの既存の区切りに合わせて 600px 以下だけを対象にする。
   ★なぜ必要か: 文字がpx固定なので、コマ幅 335px(SP) と 580px(PC) では
     吹き出しがコマを占める面積が SP 20.1% / PC 9.2% ＝ 2.17倍になっていた（全20コマ実測）。
   ★全体を一律に縮める案は捨てた: 0.78倍より小さくしても 15.5%→15.0% しか動かず
     （10pxの下限に当たる）、読みやすさだけ失う。混んでいる上位3コマだけを個別に詰める。
   ★measure→place_bubbles の往復は 375px で行うので、ここを触ったら必ず再ソルブすること。
   ============================================================ */
@media screen and (max-width: 600px) {
  /* p18 決め枠（41.9% → 33.9%）。文字だけでは 36.7% で止まるので、
     余白と幅も一緒に詰める（実測: pad 9/12 + w68% で 33.9%）。
     width は HTML のインライン指定(76%)を上書きするため !important が必要。 */
  .st-final-box { padding: 9px 12px; width: 68% !important; }
  .st-final-box .st-huge { font-size: clamp(16px, 4.8vw, 30px); }   /* 375px: 21px → 18px */

  /* p10 コーチングのカットイン（33.0% → 28.8%） */
  .st-coach b { font-size: clamp(13px, 3.6vw, 19px); }              /* 375px: 16.5px → 13.5px */
  .st-coach span { font-size: clamp(9px, 2.4vw, 12px); }            /* 375px: 10.9px → 9px */

  /* p13（34.1% → 30.7%）。.st-vth は6個あるので p13 だけに効くクラスを使う。
     .st-speaker は LP内に1個（p13のカウンセラー）だけなのでそのまま指定してよい。 */
  .st-vth-p13 { font-size: 11px; }
  .st-speaker { font-size: 11px; }

  /* ------------------------------------------------------------
     2026-09-03 Kosei「全体的に文字も吹き出しも一緒に縮小しなよ」
     ★吹き出しの箱は中身の文字で決まるので、文字を縮めれば箱も一緒に縮む。
       箱の幅・高さを個別に触る必要はない（実測で確認）。
     ★方針は「一律◯px」ではなく「0.8倍・下限11px」。一律にすると
       効果音や決め枠の強弱が消える（一律11pxだと平均15.3%まで下がるが、
       .st-sfx 28.5px→11px、.st-huge 18px→11px で漫画の抑揚が死ぬ）。
     ★下限11px の根拠: これ以下にすると 0.78倍より縮めても占有率が動かなくなり
       （15.5%→15.0%）、読みやすさだけ失う。LP内の既存の最小は .st-note の9px。
     ★全部の値をスクリプトで計算した（暗算していない）:
         13.00px ×0.8 = 10.40 → 下限11.0
         12.75px ×0.8 = 10.20 → 下限11.0
         12.00px ×0.8 =  9.60 → 下限11.0
         28.50px ×0.8 = 22.80 → 22.8
         18.00px ×0.8 = 14.40 → 14.4
         16.00px ×0.8 = 12.80 → 12.8
     ★ここを触ったら必ず 375px で measure → place_bubbles を回すこと。
       箱の寸法が変わるので、位置の再ソルブなしでは顔かぶり・はみ出しが出る。
     ------------------------------------------------------------ */
  .st-panel .st-bub { font-size: 11px; }
  .st-panel .st-vbub, .st-panel .st-vth { font-size: 11px; }
  .st-panel .st-vnar { font-size: 11px; }
  .st-panel .st-sfx { font-size: clamp(16px, 6.1vw, 36px); }        /* 375px: 28.5px → 22.8px */
  .st-final-box { font-size: 12.8px; }                              /* 16px → 12.8px */
  .st-final-box .st-huge { font-size: clamp(13px, 3.84vw, 30px); }  /* 375px: 18px → 14.4px */
  .st-coach b { font-size: 11px; }

  /* ------------------------------------------------------------
     2026-09-03 Kosei「SP表示だけ修正して」で見つかった取りこぼし3件。
     ★取りこぼしの原因1: インラインの style="font-size:Npx" はメディアクエリより強い。
       上のブロックで .st-panel .st-bub を 11px にしても、インライン指定を持つ
       6個の吹き出し（p7 18px / p13 11px / p19 14px / p20 14px / p17 14px / p16 clamp）
       には一切効いていなかった。!important で 0.8倍・下限11px を当てる。
     ★取りこぼしの原因2: padding と line-height も px 固定。文字だけ縮めても
       箱は縮まない。実測 p5 は箱 60x159px に対し文字 30x108px ＝ 余白65%、
       p10 は箱 76x52px に対し文字 66x28px ＝ 余白53%。ここが「無駄に大きい」の正体。
     ★縦書きの line-height は「列の幅」を決める。1.75→1.45 で列を詰める。
       ただし p7 の楕円バルーンは 1.75 でないと文字が曲線に食い込むと
       既存コメントに実測記録があるので、p5 だけに限定する（.st-vth-p5）。
     ★値は全部スクリプト計算: 18×0.8=14.4 / 14×0.8=11.2 / padding ×0.55
     ------------------------------------------------------------ */
  .st-panel .st-nar-p7 { font-size: 14.4px !important; }
  .st-panel .st-bub[style*="font-size:14px"] { font-size: 11.2px !important; }
  .st-panel .st-bub[style*="font-size:11px"] { font-size: 11px !important; }

  /* p5「この生活、あと何年続くんだろう…」余白65% → 箱を詰める（文字は11pxのまま） */
  .st-vth-p5 { padding: 7px 4px !important; line-height: 1.45 !important; }

  /* p10「え、どういうこと？」箱が膨らんで顔にかかる → 余白を詰める（文字は11pxのまま） */
  .st-bub-p10q { padding: 4px 2px !important; }
}


/* ============================================================
   最終行の「1文字だけ落ちる」を全体で防ぐ（2026-09-03 Kosei「勿体無い位置の改行はなくしたい」）
   ★text-wrap: pretty は「最終行だけ」を見て孤立を避ける指定。balance と違って
     前の行の割り方を変えないので、日本語の複合語を壊さない
     （balance は 2026-08-31 に「英文履歴書」を単語の途中で割って事故った）。
     非対応ブラウザでは何も起きない＝退化しない。
   ★word-break: auto-phrase は Chrome が文節で折る指定。table.st-table--cmp で
     既に使っている実績があるので、本文にも同じ組み合わせで広げる。
   ★実測（375px・全ページ走査）: 孤立 8件 → pretty で 5件 → 個別の <br>/nowrap で 0件。
     残っていた5件は幅が固定されたリボン・見出し・ラベルで、CSSでは解けなかった。
   ★総合QAに「横書きの最終行が1〜2文字」チェックを入れたので、再発は機械が拾う。
     .st-huge のように意図して <br> で割っているものは除外リストに入れてある。
   ============================================================ */
body .article-body div,
body .article-body p,
body .article-body span,
body .article-body h2,
.st-bub, .st-final-box, .st-cta-main, .st-form-hook, .st-form-title {
  text-wrap: pretty;
  word-break: auto-phrase;
}
.st-nowrap { white-space: nowrap; }