OTHERテンプレート（子ページ）

THE OFFICIAL WEB SITE

普通サイズの文字.llの文字普通サイズ.lの文字普通サイズ.sの文字普通サイズ太字は.bold

親要素の文字サイズに応じて.llや.lの文字サイズも変わります
普通サイズの文字.llの文字普通サイズ.lの文字普通サイズ.sの文字普通サイズ

dtテキスト: dlタグに.listviewを付加しています
リンクリンクテキストテキストテキストテキストテキスト。
dtテキスト: テキストテキストテキストテキストテキスト。
見本: dtに.navyを付加すると左の表示になります。
テキストテキストテキストテキストテキスト。長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト

dtテキスト: dl内でdtとddをdivで囲うと幅がそろいます。リンクリンクdt幅を指定するにはdlに.dt_w3～.dt_w7を追加。
dtテキスト: テキストテキストテキストテキストテキスト。
見本: dtに.navyを付加すると左の表示になります。
テキストテキストテキストテキストテキスト。長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト

簡易グリッドシステムを適用しています

.grid0: 横100％の親（このブロックの幅）
.grid1: 左右が空く親
.grid1_in：.grid1内で左を少し空ける
.grid2: .grid1_inと同じ左右の空き
.grid_c: センター寄せの親
.grid0.cols3,.grid2.cols3：直下の.gm4を左寄せで3つずつ並べる
.grid0.cols4,.grid2.cols4：直下の.gm3を左寄せで4つずつ並べる
.g1～.g12：子ブロック
.gm1 ~ .gm12：左右にmarginをとった子ブロック

この幅のボックスは.grid1　h2タイトル

.gird1の中に.grid1_inのdivを入れるとこの幅　h3タイトル

.grid1を使わずに最初からこの幅にしたいブロックには.grid2
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー

赤文字の場合のカラーコード(b40000)は.txt_red、ボディコピーboldは.txt_bold、ボディコピーboldで赤は.txt_red.txt_boldボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー
文章途中にリンクが出てきたときボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー。

aタグに.a_4kakuでこのリンク

.btn.navy .btn.navy .btn.white .btn.gray

左に画像がある場合のテキスト配置です。

.box_img_lで囲って画像はdiv.img、テキスト側はdiv.txtで囲みます。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

.box_img_rで囲って画像はdiv.img、テキスト側はdiv.txtで囲みます。右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

div.imgに.w40pcを付加すると、ウィンドウ1200px以下では画像の最大幅が40％指定になります

画像が左でも右でも同じです。

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

※ただし、ある程度幅が短くなってきたら、画像の横幅の％とテキスト幅の％とでどちらも縮小していくようにしていきたいです。正確な数字は決めます。

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

.box_grayで囲むとこのボックスと同じ背景と余白がつきます。ボックスの下のマージンはmb5~mb60まで5刻みでclassを作成していますのでそれを使用してください。
注意書き注意書き注意書き注意書き注意書き注意書き

タイトルのあるグレー枠

.box_grayで囲んだ中にp.ttlを入れるとタイトル表記になります。

注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き

箇条書きイメージ
コンテンツのメイン部分でulを使用したときのデフォルトです。箇条書きイメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

タイトルタイトルタイトル

白背景のボックスは.box_wh、タイトルはp.ttlです。注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き

箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

タイトルタイトルタイトル

注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き

タイトルタイトルタイトル

注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き

タイトルのあるグレー枠

注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き

箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

.grid1や.grid2、.grid_cの中で.gm6をつけたブロック要素はこの幅になってフロートされます。
.gm1～.gm12まであり、それぞれ12等分した幅×〇個分です。箇条書きイメージ箇条書きイメージ箇条書きイメージ
.g1～.g12にすると、間が空かずに要素が並びます。箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

箇条書きイメージ
.grid1や.grid2、.grid_cの中で.gm4をつけたブロック要素はこの幅になってフロートされます。イメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

箇条書きイメージ
.grid1や.grid2、.grid_cの中で.gm3をつけたブロック要素はこの幅になってフロートされます。箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

画像の横幅100％にするには、imgタグに.fitをつけてください。

.grid1や.grid2、.grid_cの中で.gm6をつけたブロック要素はこの幅になってフロートされます。

このエリアは.grid0の中に.gm6.mb55を2つ並べた例です。ピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー

スマホでのみmargin-bottom

.smb5~.smb60をつけるとスマホでのみmargin-bottomがつきます。ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

このエリアは.grid0.cols3の中に.gm4を3つ並べた例です。
1行のみなら.cols3は省略できます。
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

このエリアは.grid0.mb55.cols4の中に.gm3を4つ並べた例です。
1行のみなら.cols3は省略できます。
ピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左にる場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左にる場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。