/*
 * 3ツール共通マニュアル見出しシステム
 *
 * 編集元は shared/manual-heading-system.css です。公開用コピーは
 * tools/update_manual_heading_system.mjs で生成してください。コピーを直接編集しません。
 * 文字組みの基準: www.tokyo-live.co.jp のトップページヒーローと通常下層ページ見出し。
 */

.hero .eyebrow{
  margin:0 0 18px;
  color:var(--red,#c90f18);
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:.22em;
}

.hero h1{
  margin-bottom:0;
  color:#161315;
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:clamp(54px,4.7vw,76px);
  font-weight:900;
  line-height:1.16;
  letter-spacing:0;
  font-kerning:normal;
  font-feature-settings:"palt" 1;
}

.hero .hero-lead{
  margin:9px 0 0;
  color:var(--soft,var(--muted,#5f5a57));
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:normal;
}

.section .section-head{
  position:relative;
  min-width:0;
  max-width:none;
  padding-left:24px;
}

.section .section-head::before{
  content:"";
  position:absolute;
  top:2px;
  left:0;
  width:8px;
  height:84px;
  background:var(--red,#c90f18);
}

.section .section-head > .section-kicker{
  max-width:none;
  margin:0 0 2px;
  color:var(--red,#c90f18)!important;
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:.22em;
}

.section .section-head > h2{
  margin:0;
  color:var(--ink,#161315);
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:clamp(38px,4vw,60px);
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.02em!important;
  font-kerning:normal;
  font-feature-settings:"palt" 1;
}

.section .section-head > p:not(.section-kicker){
  max-width:820px;
  margin:0;
  color:var(--soft,var(--muted,#5f5a57));
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:normal;
}

.section-dark .section-head > p:not(.section-kicker){
  color:#c8d0da;
}

.section-dark .section-head > h2{
  color:#fff;
}

.hero h1,
.section .section-head > h2{
  line-break:strict;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}

.heading-phrase{
  display:inline-block;
  white-space:nowrap;
}

/* コーポレートサイトと同じ考え方で、長い不可分語だけを狭幅時に縮小する。 */
.heading-phrase--7{font-size:min(1em,calc((100vw - 72px)/7))}
.heading-phrase--8{font-size:min(1em,calc((100vw - 72px)/8))}
.heading-phrase--9{font-size:min(1em,calc((100vw - 72px)/9))}
.heading-phrase--10{font-size:min(1em,calc((100vw - 72px)/10))}

/* トップページヒーローと同じ文字サイズを保ち、H1内では補助縮小を行わない。 */
.hero h1 .heading-phrase{font-size:1em}

@supports (word-break:auto-phrase){
  .hero h1,
  .section .section-head > h2{
    word-break:auto-phrase;
  }
}

@media(max-width:780px){
  .hero h1,
  .hero h1.heading-compact-mobile{
    font-size:clamp(38px,12vw,54px);
    letter-spacing:-.01em;
  }
}

@media(max-width:640px){
  .hero h1,
  .hero h1.heading-compact-mobile{
    font-size:clamp(28px,8.2vw,32px);
  }
  .section .section-head{
    padding-left:18px;
  }
  .section .section-head::before{
    width:6px;
    height:70px;
  }
}