Welcome to Our Site
あなたのビジネスに、もうひとつのストーリーを。
セクションタイトル
青いラインの見出し
白いラインの見出し
通常の中見出し
白文字中見出し（濃背景用）
小見出し（標準）
小見出し（太字）
Catchphrase Here
Big White Title
h2、h3で見出しを作成してから、高度な設定でクラス名を入れる。
【命名ルールの基本】
意味のある名前をつける（例：.mvcopy → モバイル対応のコピー）
DTPと違って、配置のために「id」や「class」を使う。全体の設計が重要。
クラス名はハイフン区切りやBEM（block__element–modifier）形式を意識すると整理しやすい。
「BEM（ベム）」とは、CSSのクラス名を分かりやすく整理するための命名ルールです。
正式には：
BEM = Block（ブロック）・Element（エレメント）・Modifier（モディファイア）
🔧 なぜBEMが必要？
CSSでは、複数の要素にスタイルが絡み合ってしまうと、どこに何が効いてるのか分からなくなることがあります。
BEMを使うと、クラス名だけで「どのパーツの、どの部分で、どんな状態なのか」が一目で分かるようになります。
🌱 BEMの基本構造
.block__element--modifier
| 種類 | 意味 | 例 | 用途 |
|---|---|---|---|
block | パーツ全体の単位 | .card | 見出し、ボタン、ナビゲーションなど |
element | ブロック内の部品 | .card__title | カード内のタイトル、画像、説明文など |
modifier | 見た目や状態の変化 | .card--large.card__title--highlight | サイズ違い・強調・非アクティブなど |
スタイルシート（カスタムに記述）
/* ——————————————–
大きな見出し（h2.h2_title）のデザイン
——————————————– */
h2.h2_title {
font-family: “Heebo”, sans-serif; /* フォントをHeebo（英語フォント）に変更。なければsans-serif（ゴシック体）を使用 */
font-size: 7vw; /* フォントサイズを画面幅の7%に設定（vwはviewport widthの略） */
color: #002836; /* 文字色を濃い青緑に指定 */
line-height: 1.1; /* 行の高さを文字の1.1倍に設定（行間の調整） */
margin-bottom: 10px; /* 見出しの下に10pxの余白を追加 */
font-weight: 600; /* 文字の太さをやや太めに（通常は400、600は中太） */
}
/* ——————————————–
見出しの下などに置く小さな説明文（.mvcopy）
——————————————– */
.mvcopy {
font-size: 1.2vw; /* 文字サイズを画面幅の1.2%で調整（レスポンシブ対応） */
}
/* ——————————————–
スマホ対応：横向きスマホや小さめタブレット対応（画面幅768px未満）
——————————————– */
@media (max-width: 767.98px) {
h2.h2_title {
font-size: 70px; /* h2のサイズを固定で70pxに（vwだと小さすぎる可能性があるため） */
}
.mvcopy {
font-size: 18px; /* 小さな説明文も18pxに固定で読みやすく */
}
}
/* ——————————————–
スマホ対応：縦向きスマホ（画面幅576px未満）
※ ここは空欄だけど、必要に応じてさらに調整を加えることができます
——————————————– */
@media (max-width: 575.98px) {
/* ここにスマホ用のさらに細かい調整を加えることができます */
}
/* ============================
共通のライン付き見出しスタイル
============================ */
h2.h2_line {
font-family: “Heebo”, sans-serif;
font-size: 36px; /* 標準の見出しサイズ */
font-weight: 500; /* 中程度の太さ */
display: block;
line-height: 1;
}
/* ラインを引く部分（span内） */
h2.h2_line span {
display: inline-block;
position: relative;
}
/* 黄ライン（デフォルト） */
h2.h2_line span::after {
content: “”;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background-color: #d5db54; /* 柔らかい黄色 */
z-index: -1; /* 背景にラインを引く */
}
/* 青ラインに変更したい場合（クラス追加） */
h2.h2_line.blue span::after {
background-color: #002836;
}
/* 白文字（背景が濃い時用） */
h2.h2_line.white {
color: #fff;
}
/* ============================
補助見出しスタイル（青・白）
============================ */
h2.h2_blue {
font-family: “Noto Sans JP”, sans-serif;
font-size: 30px;
font-weight: 400;
color: #002836;
}
h2.h2_white {
font-family: “Noto Sans JP”, sans-serif;
font-size: 30px;
font-weight: 400;
color: #ffffff;
}
/* ============================
h3の標準化（SWELL上書き）
============================ */
h3 {
font-family: “Noto Sans JP”, sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #002836 !important;
}
