/* v147 — 2026-07-28
   ① PCでも「岡山・倉敷｜写真撮影・生成AI研修」の帯を出す。
      理由：スマホでは写真の上にこの帯が乗って「何屋か」が3秒で伝わるのに、
      PCでは v133.css で display:none になっていて、七五三の写真だけが見えていた。
      初見の経営者が「家族写真の会社」と判断して離脱するのを防ぐ。
      ※クラス名は hero2-mobile-intro のままだが、PCでも出す役割になった。 */
/* ② 名乗りを英字→日本語（カメラマン × AI導入アドバイザー）にしたので、
      英字前提の 11px・字間.25em では小さく間延びする。日本語用に調整。
      セレクタを2クラスにして v133.css（1クラス）より強くする＝!important を使わない。 */
.hub-hero .hero2-eyebrow{
  font-size:13.5px;
  letter-spacing:.1em;
  font-weight:700;
}
@media (max-width:640px){
  .hub-hero .hero2-eyebrow{ font-size:11.5px; letter-spacing:.08em; }
}

/* ③ H1が対句（写真で〜／AIで〜）になったので、1行1文で見せる。
      52pxのままだと「写真で、瞬間を／未来に。」と意味の途中で折れて4行になった（1440pxで実測）。 */
.hub-hero .hub-hero-title{
  /* 実測（1440px）：H1に使える幅は440px。字送り=フォント×1.06なので
     「写真で、瞬間を未来に。」11字を1行に収める上限は約37px。余裕を見て36px。 */
  font-size:clamp(27px,2.5vw,36px);
}

/* ④ サブの折返しを文節で切る。「お客様に届く言／葉で。」と単語が割れていた。
      下層ページには既に入れてある処理を、トップのヒーローにも適用する。 */
.hub-hero .hub-hero-sub{
  word-break:auto-phrase;
  line-break:strict;
}

@media (min-width: 641px){
  .hero2-mobile-intro{
    display:block;
    position:absolute;
    left:32px;
    top:28px;              /* 写真の下端だと折り返しの下に隠れた（1440x900で実測）。上端に置く */
    z-index:2;
    margin:0;
    padding:11px 18px;
    background:rgba(31,36,33,.78);
    color:#fff;
    font-size:13px;
    letter-spacing:.09em;
    line-height:1;
    backdrop-filter:blur(5px);
  }
}