コピー元のCSSと書く場所

mixinの名前	ブレイクポイント
breakpoint-ssp	最大幅 576px まで
breakpoint-sp	最大幅 769px まで
breakpoint-msp	最大幅 834px まで
breakpoint-tb	幅 577px から 769px まで
breakpoint-pro_s	幅 770px から 834px まで
breakpoint-pro	幅 770px から 1024px まで
breakpoint-pc	最小幅 770px から

2.2 - カスタム用タグ・カテゴリー

カスタム用の記事リストパーツに必要なタグ・カテゴリーのデザインを一括で変更できます。
デザインパーツと違うデザインを使用する際は活用してください。

mixinの名前	変更可能な内容
tag_custom	タグの余白やデザインを一括で調整できます。
tag_icon_custom	タグのFont Awesomeのアイコンを変更できます。
category_icon_custom	カテゴリーのFont Awesomeのアイコンを変更できます。

2.3 - フッター関連

フッターのコピーライト、ページ上へ戻るボタンのデザインを調整できます。
リプレイスやカンプに応じて下記の中で変更してください。

mixinの名前	変更可能な内容
page_top	ページ上に戻る用のボタンの位置・サイズを調整します。
copyright_custom	コピーライトのフォント関連・セクションの高さや背景色などを変更できます。

2.4 - flex関連

flexでよく使うプロパティを一括で設定でき、記述が短縮できるのでぜひ活用してください。

mixinの名前	変更可能な内容
flex-setting （$gap,$direction, $wrap, $justify-content, $align-items, $device）	flexの基本プロパティを用意しています。
flex-gap （$gap, $device）	gapの数値を設定します。 ※display: flex; は別途記述が必要です。

2.5 - 余白関連

余白の計算式（SP時の幅調整「 * 0.75」・ベースデザインの余白「var(--fo-spacing-coef)」を含む）の記述が短縮できるのでぜひ活用してください。

mixinの名前	変更可能な内容
sectionSpace（数値）	数字部分に指定の数値を入れると、セクションからパーツまでの余白を自動で計算して余白の数値を出力します。
padding-All（数値1, 数値2, 数値3, 数値4, ブレイクポイント）	上下左右にパディング余白をつけます。 CSSの余白の付け方と同じで「上・右・下・左」の順で数値を入れてください。(※1) ブレイクポイントは pc / sp を選択します。(※2) ※1：数値を指定しない場合は20pxが入ります。（以下省略） ※2：ブレイクポイントを指定しない場合はどちらにも反映されます。（以下省略）
padding-property （方向, 数値, ブレイクポイント）	一方向にパディング余白をつけます。方向は top / bottom / right / left から選択します。
padding-yx （数値1, 数値2, ブレイクポイント）	上下 + 左右にパディング余白をつけます。数値1に上下の数値、数値2に左右の数値を設定します。
margin-y（数値1, 数値2, ブレイクポイント）	上下にマージン余白をつけます。数値1に上の数値、数値2に下の数値を設定します。
margin-property（方向, 数値, ブレイクポイント）	一方向にマージン余白をつけます。方向は top / bottom / right / left から選択します。
heading-marginBottom（数値, ブレイクポイント）	【見出し専用】見出し下にマージン余白をつけます。
adjacentMargin（クラス名, 数値, ブレイクポイント）	次に続く同要素との間に余白を開けたい場合に使用します。余白を開けたい要素を設定し、マージントップで余白をつけます。

3. entry-list（記事リストパーツ）

記事リストパーツ専用の記述場所が用意されています。

デフォルト
ここは基本触りません。
デザインパーツ
必要に応じてコメントアウトを外し、指定の[data-designpart-id]を記述して調整してください。
デフォルトパーツ
デフォルトパーツの詳細に関してはこちらの「5. 記事リストパーツ」で詳しくまとめています。

4. 共通ナビ

共通ナビ（共通エリア）に関連したコピー元CSSの定義がされています。
1段または2段でCSSの記述場所が分かれているので注意してください。

クラス名	変更可能な内容
navi_base_custom	ナビのデザインを調整する場合は、このクラスの中で記述してください。 ※新CMSからナビ1段・2段のセクションクラスが統一されました。
icon	【2段用クラス】共通ナビにクラス追加記述する事によりSP時ボタン（btn_custom◯◯）をアイコン化します。
first_2btn_col second_2btn_col	【2段用クラス】クラス内でボタン同士の余白、SP時ボタンのアイコン化を調整しています。レスポンシブのボタンのアイコンによってはここで調整してください。
nav_none	【2段用クラス】 2段のナビゲーション部分を非表示にします。

デフォルト以外のhover挙動をスタイルする場所

デフォルトのhover挙動ではなくCSSパーツ集などから持ってきたコードは専用のネストが用意されているのでそちらに記述してください。デフォルトと分けることで修正やサイトチェックが分かりやすくメンテナンス性が高いコードにするためです。
始めから記述しても良いですが、「CSSパーツ集」を活用すると時短できますのでこちらもぜひ活用してください。

// デフォルト以外のhover挙動をスタイルする場合はこちらに記述

.navi-002-01.navi_base_custom {
　header#navigations {
　　.inner {
　　　.main-menu {
　　　　@include breakpoint-pc {}
　　　}
　　}
　}
}

5. ヘッダー（メインビジュアル）

ヘッダー（メインビジュアル）に関連したコピー元CSSの定義がされています。
TOPと下層でCSSの記述場所が分かれているので注意してください。

クラス名	変更可能な内容
mv_custom	【TOP用】ヘッダーにデフォルトでついており、このクラスの中でカスタムしていきます。
sub-page-custom	【下層用】ヘッダーにデフォルトでついており、このクラスの中でカスタムしていきます。
maxWidth_custom	ヘッダーの最大幅をなくし、ウィンドウ幅まで広がります。

6. 各パーツ

指定の場所、パーツで使用できるクラスです。

6.1 - セクション（section）用

クラス名	変更可能な内容
cta_sec	CTAセクション（section）にデフォルトでついており、このクラスの中でカスタムしていきます。
maxWidth_sec	コンテンツのセクションの最大幅をなくし、ウィンドウ幅まで広がります。
arrowSet_sec	クラスを付与したセクションの上部に三角矢印がつきます。デザインに応じてCSSをカスタマイズしてください。
innerNo_sec	innerのパディング余白を0にします。

6.2 - 行（row）用

クラス名	変更可能な内容
loop_row	このクラスが続くと行（row）の間に余白をあけてくれます。
arrowSet_row	2カラム以上の場合、カラム（col）の間に横矢印がつきます。

6.3 - リッチテキスト用

クラス名	変更可能な内容
sp_r	SP時にテキストを右寄せします。
sp_c	SP時にテキストを中央寄せします。
sp_l	SP時にテキストを左寄せします。
custom_table	ボーダーなしのテーブルデザインがあたります。
sp_table_scroll	テーブルに付与します。 SP時に横並びのまま横スクロールができるようにします。

7. ユニバーサルクラス

どのパーツでも使用できるクラスです。

クラス名	変更可能な内容
spOnly	付与した要素をSP時だけ非表示にします。 ※編集画面では、編集の操作性を維持するため非表示にせず、タグが表示されます。
pcOnly	付与した要素をPC時だけ非表示にします。 ※編集画面では、編集の操作性を維持するため非表示にせず、タグが表示されます。
displayNone	付与した要素を非表示にします。 ※編集画面では、編集の操作性を維持するため非表示にせず、タグが表示されます。
shadow_all	パーツにシャドウ（box-shadow）をつけます。
radius_all	パーツに角丸（border-radius）をつけます。
reverse	2カラムの時、SP時のカラム（col）の位置を入れ替えます。
allbrClear	全ての改行（br）を非表示にします。
pcbrClear	PC時の改行（br）を非表示にします。
tbbrClear	Tab時の改行（br）を非表示にします。
probrClear	ウィンドウ幅1024px（Pro）時の改行（br）を非表示にします。
spbrClear	SP時の改行（br）を非表示にします。

8. フッター関連

フッターに関連したコピー元CSSの定義がされています。

クラス名	変更可能な内容
ft_custom01	共通フッターにデフォルトでついており、このクラスの中でカスタムしていきます。
ftLink_row	フッターのロゴやリンクリストを含む行（row）にデフォルトでついています。
info_col	「ftLink_row」のロゴ部分のカラム（col）にデフォルトでついています。
site_map_col	「ftLink_row」のリンクリストのカラム（col）にデフォルトでついています。
foot_tel	「info_col」のロゴ下にあるTELに付与します。ボタンのフォントサイズを18pxに調整します。
site_map_list	「site_map_col」のリンクリストパーツにデフォルトでついています。
foot_logo	「ftLink_row」のロゴサイズを調整します。
page_top_row	ミックスイン「page_top」を格納するクラスです。

CSSでの装飾に戻る

編集画面の崩れについて

コピー元のCSSと書く場所