<main class="main-wrapper">
<article class="article-container">
<h2 class="heading2">Normal</h2>
<h1 class="heading1">ページタイトル (Heading 1)</h1>
<h2 class="heading2">大見出し (Heading 2)</h2>
<h3 class="heading3">中見出し (Heading 3)</h3>
<h4 class="heading4">小見出し (Heading 4)</h4>
<div class="divider my32" role="separator"></div>
<h2 class="heading2">Decorated</h2>
<h1 class="heading2 -decorated-underline">大見出し (Heading 2)</h2>
<h2 class="heading2 -decorated-frame">大見出し (Heading 2)</h2>
<h2 class="heading2 -decorated-sideline">大見出し (Heading 2)</h2>
<h2 class="heading2 -decorated-bg">大見出し (Heading 2)</h2>
<h2 class="heading2 -decorated-original01">大見出し (Heading 2)</h2>
</article>
</main>
<main class="main-wrapper">
<article class="article-container">
<h2 class="heading2">Normal</h2>
<h1 class="heading1">ページタイトル (Heading 1)</h1>
<h2 class="heading2">大見出し (Heading 2)</h2>
<h3 class="heading3">中見出し (Heading 3)</h3>
<h4 class="heading4">小見出し (Heading 4)</h4>
<div class="divider my32" role="separator"></div>
<h2 class="heading2">Decorated</h2>
<h1 class="heading2 -decorated-underline">大見出し (Heading 2)</h2>
<h2 class="heading2 -decorated-frame">大見出し (Heading 2)</h2>
<h2 class="heading2 -decorated-sideline">大見出し (Heading 2)</h2>
<h2 class="heading2 -decorated-bg">大見出し (Heading 2)</h2>
<h2 class="heading2 -decorated-original01">大見出し (Heading 2)</h2>
</article>
</main>
/* No context defined. */
.heading1 {
margin-block-end: 1rem;
line-height: 2;
font-size: calc(var(--font-size-h));
font-weight: 700;
}
.heading2 {
margin-block-end: 1rem;
line-height: 1.8;
font-size: calc(var(--font-size-l2));
font-weight: 700;
}
.heading3 {
margin-block-end: 1rem;
line-height: 1.75;
font-size: calc(var(--font-size-l1));
font-weight: 700;
}
.heading4 {
margin-block-end: 1rem;
line-height: 1.5;
font-size: calc(var(--font-size-m2));
font-weight: 700;
}
.heading2.-decorated-underline {
margin-block-end: 2rem;
}
.heading2.-decorated-underline:after {
content: "";
display: block;
border-bottom: .2rem solid var(--black);
font-size: 0;
}
.heading2.-decorated-frame {
margin-block-end: 2rem;
padding: .5rem 1rem;
border: .2rem solid #333;
}
.heading2.-decorated-sideline {
position: relative;
margin-block-end: 2rem;
padding-inline-start: 1rem;
}
.heading2.-decorated-sideline:before {
content: "";
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
width: 2rem;
height: 2.5rem;
border-left: .5rem solid #333;
}
.heading2.-decorated-bg {
margin-block-end: 2rem;
padding: .5rem 1rem;
background-color: #eef1f2;
}
.heading2.-decorated-original01 {
display: inline-block;
position: relative;
margin-block-end: 2rem;
padding-inline-start: 1rem;
}
.heading2.-decorated-original01:before {
content: "";
display: inline-block;
position: absolute;
bottom: -.15rem;
left: 0;
width: 2rem;
height: 2.5rem;
border-left: .375rem solid #0e51aa;
}
.heading2.-decorated-original01:after {
content: "";
display: inline-block;
position: absolute;
bottom: -.15rem;
left: 0;
width: 100%;
height: .125rem;
background: linear-gradient(90deg, #0e51aa, var(--white));
}
No notes defined.