/**
Theme Name: JIN:R child
Template: jinr
Author: CROOVER Inc.
Author URI: https://croover.co.jp
Version: 1.00
*/


/* homare SNS - 基本 */
.homare-social-links{font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; margin: 12px 0;}
.homare-social-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.homare-social-links .hsl-item{border-top:1px solid #eee}
.homare-social-links .hsl-item a{display:flex;align-items:center;gap:12px;padding:16px 14px;text-decoration:none;color:#111}
.homare-social-links .hsl-icon{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 52px;box-shadow:0 6px 16px rgba(0,0,0,0.08)}
.homare-social-links .hsl-icon svg{width:22px;height:22px}
.homare-social-links .hsl-label{font-size:15px;line-height:1.1;font-weight:600}
.homare-social-links .hsl-arrow{margin-left:auto;color:#999;font-size:20px}

/* モバイル：下部スティッキーにしたい場合は .homare-skin-compact を body に追加すると切替 */
@media (max-width:900px){
  body.homare-skin-compact .homare-social-links{
    position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;padding:8px;background:rgba(255,255,255,0.92);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,0.12)
  }
  body.homare-skin-compact .homare-social-links ul{display:flex;flex-direction:row;justify-content:space-between}
  body.homare-skin-compact .hsl-item{border-top:none}
  body.homare-skin-compact .hsl-item a{flex-direction:column;padding:8px 10px}
  body.homare-skin-compact .hsl-label{font-size:12px;font-weight:600}
  body.homare-skin-compact .hsl-icon{width:40px;height:40px}
  body.homare-skin-compact .hsl-arrow{display:none}
}

/* スタイル上書き回避（優先度） */
.homare-social-links .hsl-item a, .homare-social-links .hsl-icon {transition: transform .14s ease, box-shadow .14s ease}
.homare-social-links .hsl-item a:hover .hsl-icon, .homare-social-links .hsl-item a:focus .hsl-icon {transform: translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,0.16)}


/* アイコン画像版用スタイル */
.hsl-icon-img{width:52px;height:52px;object-fit:cover;border-radius:50%;flex:0 0 52px;box-shadow:0 6px 12px rgba(0,0,0,0.06);}
.homare-social-links .hsl-label{margin-left:12px;font-weight:600}
.homare-social-links .hsl-item a{display:flex;align-items:center;gap:12px;padding:14px 12px}
.homare-social-links .hsl-item{border-top:1px solid #eee}





/* スピーチ原稿風 黒ベタ見出し（丸角＋下向き三角）*/
.homare-sns-block {
  width:100%;
  margin: 18px 0;
  padding: 0;
}

.homare-sns-block .homare-sns-bubble {
  position: relative;
  display: inline-block;        /* 横幅を内容に合わせたいなら inline-block、全幅にしたいなら display:block */
  background: #000000;          /* 黒ベタ */
  color: #ffffff;               /* テキスト白 */
  padding: 14px 18px;           /* 上下／左右の余白（好みで調整） */
  border-radius: 10px;          /* 角丸 */
  font-weight: 800;
  font-size: 18px;
  line-height: 1.05;
  box-shadow: none;
  letter-spacing: -0.02em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 下向きの三角（吹き出し）を左寄せで表示 */
.homare-sns-block .homare-sns-bubble::after{
  content: "";
  position: absolute;
  left: 20px;                   /* 三角のX位置（見た目調整） */
  bottom: -10px;                /* 三角のY位置（泡が下に出る） */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000000; /* 三角の色は背景と同じ黒 */
  display: block;
}


.homare-sns-block .homare-sns-bubble {
  display:block;
  width:100%;
  box-sizing:border-box;
}
.homare-sns-block .homare-sns-bubble::after{
  left: 34px;  // 三角の位置を調整
}

/* モバイル微調整 */
@media (max-width: 900px){
  .homare-sns-block { margin: 14px 0; }
  .homare-sns-block .homare-sns-bubble { font-size: 17px; padding: 12px 14px; border-radius: 8px; }
  .homare-sns-block .homare-sns-bubble::after{ bottom: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #000; left:16px; }
}