/* ==========================================================
site-policy.css
----------------------------------------------------------
【このファイルの役割】
サイトポリシーページ（site-policy.html）の
デザインを設定するためのCSSです。
このファイルでは主に、
・ページ上部のタイトル
・本文の幅や余白
・見出し
・文章
・箇条書き
・PC表示
・スマートフォン表示
を設定しています。
【重要】
HTMLの文章やリンクを変更するファイルではありません。
文字の大きさ・色・余白など、
「見た目」を変更するときにこのファイルを編集します。
【注意】
このファイルには common.css を読み込んでいます。
ヘッダーやフッターなどの共通部分については、
common.cssも関係しています。
========================================================== */
@import url(common.css);
/* ==========================================================
【メイン部分】
----------------------------------------------------------
ページ全体のメインコンテンツの位置を設定します。
ヘッダーが画面上部に固定されているため、
ヘッダーと本文が重ならないように
上側に余白を作っています。
【PC表示】
120pxの余白を設定しています。
【スマートフォン】
下のスマートフォン用設定で
90pxに変更しています。
========================================================== */
main {
padding-top: 120px;
}
/* ==========================================================
【ページタイトル】
----------------------------------------------------------
「SITE POLICY」
「サイトポリシー」
が表示されるページ上部のタイトル部分です。
HTMLでは、
.site-policy-visual
の中にタイトルが入っています。
【デザインを変更したい場合】
この部分では主に
タイトルエリア全体の幅を設定しています。
========================================================== */
.site-policy-visual {
width: 100%;
}
/* ==========================================================
【ページタイトル内部】
タイトルを中央に配置し、
PCでは最大1200pxまでの幅にしています。
paddingはタイトル周辺の上下・左右の余白です。
【変更するときのポイント】
・50px → 上側の余白
・30px → 左右の余白
・55px → 下側の余白
数字を大きくすると余白が広くなります。
========================================================== */
.site-policy-visual-inner {
max-width: 1200px;
margin: 0 auto;
padding: 50px 30px 55px;
box-sizing: border-box;
text-align: center;
}
/* ==========================================================
【英語タイトル】
----------------------------------------------------------
「SITE POLICY」の文字を設定しています。
TOPページの見出しデザインに合わせています。
【変更できる主な部分】
color
→ 文字の色
font-size
→ 文字の大きさ
font-weight
→ 文字の太さ
letter-spacing
→ 文字と文字の間隔
【注意】
色を変更する場合は、
サイト全体のデザインとのバランスも確認してください。
========================================================== */
.site-policy-en {
margin: 0 0 10px;
color: #eaa317;
font-size: 13px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.2em;
}
/* ==========================================================
【日本語タイトル】
----------------------------------------------------------
「サイトポリシー」の文字を設定しています。
【変更できる主な部分】
font-size
→ 文字の大きさ
font-weight
→ 文字の太さ
color
→ 文字の色
letter-spacing
→ 文字と文字の間隔
【注意】
この見出しの下には、
下の ::after を使ってオレンジ色の線を表示しています。
========================================================== */
.site-policy-visual h2 {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
color: #333;
font-size: 38px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.08em;
}
/* ==========================================================
【オレンジの下線】
----------------------------------------------------------
「サイトポリシー」の下に表示される
オレンジ色の線です。
TOPページの見出しと同じようなデザインにしています。
【変更できる部分】
width
→ 線の長さ
height
→ 線の太さ
margin
→ 線とタイトルとの距離
background
→ 線の色
【現在の設定】
幅：48px
高さ：2px
色：#eaa317
スマートフォンでは下の設定で
少し短くしています。
========================================================== */
.site-policy-visual h2::after {
content: "";
display: block;
width: 48px;
height: 2px;
margin: 20px auto 0;
background: #eaa317;
border-radius: 10px;
}
/* ==========================================================
【本文エリア】
----------------------------------------------------------
サイトポリシーの文章が入る部分です。
白い背景にして、
文字色を濃いグレーにしています。
【注意】
本文の文字サイズなどは、
下にある .site-policy-item p で設定しています。
ここでは主に、
本文エリア全体の背景色と下側の余白を設定しています。
========================================================== */
.site-policy-section {
width: 100%;
background: #fff;
color: #333;
padding-bottom: 0;
}
/* ==========================================================
【本文コンテナ】
----------------------------------------------------------
本文を画面いっぱいに広げず、
最大1200pxの範囲に収めています。
【変更できる部分】
max-width
→ 本文の最大幅
padding
→ 本文の周囲の余白
【現在の設定】
左右に30px、
下側に100pxの余白があります。
margin: 0 auto;
は、本文を中央に配置するための設定です。
========================================================== */
.site-policy-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px 100px;
box-sizing: border-box;
}
/* ==========================================================
【導入文】
----------------------------------------------------------
サイトポリシー本文の最初に表示される
説明文のデザインです。
【変更できる部分】
margin-bottom
→ 導入文の下にある余白
font-size
→ 文字の大きさ
line-height
→ 行と行の間隔
スマートフォンでは下の設定で
文字を少し小さくしています。
========================================================== */
.site-policy-lead {
margin-bottom: 65px;
font-size: 16px;
line-height: 2;
}
/* ==========================================================
【導入文の段落】
導入文の中にある の
下側の余白を設定しています。
段落と段落の間に
適度な間隔を作るための設定です。
========================================================== */
.site-policy-lead p {
margin: 0 0 25px;
}
/* ==========================================================
【導入文の最後の段落】
最後の段落だけは、
下側に余分な余白を作らないようにしています。
========================================================== */
.site-policy-lead p:last-child {
margin-bottom: 0;
}
/* ==========================================================
【各項目】
----------------------------------------------------------
「1．著作権」
「2．禁止事項」
「3．免責事項」
「4．本サイトポリシーの変更」
それぞれの項目全体の間隔を設定しています。
【変更できる部分】
margin-bottom
→ 項目と次の項目との距離
========================================================== */
.site-policy-item {
margin: 0 0 60px;
}
/* ==========================================================
【最後の項目】
最後の項目だけは、
下側に余分な余白を作らないようにしています。
========================================================== */
.site-policy-item:last-child {
margin-bottom: 0;
}
/* ==========================================================
【各項目の見出し】
----------------------------------------------------------
「１．著作権」などの見出し部分です。
薄いオレンジ色の背景と、
左側のオレンジ色の線を使っています。
【変更できる主な部分】
padding
→ 見出しの内側の余白
background
→ 見出しの背景色
border-left
→ 左側の線
font-size
→ 文字の大きさ
【注意】
スマートフォンでは下の設定によって
サイズを小さくしています。
========================================================== */
.site-policy-item h3 {
margin: 0 0 25px;
padding: 13px 20px;
background: #fff7e6;
border-left: 5px solid #eaa317;
color: #333;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
/* ==========================================================
【本文】
----------------------------------------------------------
各項目の説明文章のデザインです。
「著作権」
「禁止事項」
「免責事項」
などの本文に適用されます。
【変更できる部分】
font-size
→ 文字の大きさ
line-height
→ 行間
margin-bottom
→ 段落の下側の余白
【注意】
文章そのものを変更する場合は、
HTMLファイルを編集します。
このCSSでは文章の内容は変更できません。
========================================================== */
.site-policy-item p {
margin: 0 0 25px;
color: #333;
font-size: 16px;
line-height: 2;
}
/* ==========================================================
【本文の最後の段落】
各項目の最後の文章には
下側の余白を付けない設定です。
========================================================== */
.site-policy-item p:last-child {
margin-bottom: 0;
}
/* ==========================================================
【箇条書き】
----------------------------------------------------------
「2．禁止事項」の項目など、
を使った箇条書きの部分を設定しています。
padding-left
→ 箇条書きの左側の位置
list-style-type: disc;
→ ● の箇条書きにします。
【注意】
箇条書きの文章を変更する場合は
HTMLファイルを編集します。
========================================================== */
.site-policy-item ul {
margin: 0 0 25px;
padding-left: 30px;
list-style-type: disc;
}
/* ==========================================================
【箇条書きの各項目】
- 1つずつの文字の大きさや
行間などを設定しています。
【変更できる部分】
margin-bottom
→ 項目と項目の間隔
padding-left
→ ●と文章との距離
font-size
→ 文字の大きさ
line-height
→ 行間
========================================================== */
.site-policy-item li {
margin-bottom: 10px;
padding-left: 5px;
color: #333;
font-size: 16px;
line-height: 1.9;
}
/* ==========================================================
【箇条書きの最後の項目】
最後の項目だけは
下側の余白をなくしています。
========================================================== */
.site-policy-item li:last-child {
margin-bottom: 0;
}
/* ==========================================================
【箇条書きの●マーク】
----------------------------------------------------------
箇条書きの左側に表示される
●の色と大きさを設定しています。
現在はサイトのテーマカラーである
オレンジ色にしています。
【変更できる部分】
color
→ ●の色
font-size
→ ●の大きさ
========================================================== */
.site-policy-item li::marker {
color: #eaa317;
font-size: 0.8em;
}
/* ==========================================================
【PC表示】
----------------------------------------------------------
画面の幅が769px以上の場合に適用されます。
つまり、基本的にPC・タブレットなどの
大きな画面で表示するときの設定です。
【注意】
スマートフォン用の設定は、
下の max-width: 768px の中にあります。
========================================================== */
@media screen and (min-width: 769px) {
.site-policy-container {
/* PCでは本文エリアに最低500pxの高さを確保します。 */
min-height: 500px;
}
}
/* ==========================================================
【スマートフォン表示】
----------------------------------------------------------
画面の幅が768px以下の場合に適用されます。
スマートフォンで見やすくなるように、
・文字を小さくする
・左右の余白を調整する
・見出しを小さくする
・タイトル周辺の余白を調整する
などを行っています。
【重要】
PC表示の設定は上側にあります。
スマートフォンだけを変更したい場合は、
基本的にこの中を変更します。
PC表示には影響しません。
========================================================== */
@media screen and (max-width: 768px) {
/* ========================================================
【スマートフォン：メイン部分】
PCでは120pxだった上側の余白を、
スマートフォンでは90pxにしています。
ヘッダーと本文が重ならないようにするための
余白です。
======================================================== */
main {
padding-top: 90px;
}
/* ========================================================
【スマートフォン：ページタイトル内部】
タイトル周辺の余白を調整しています。
PCより画面が狭いため、
左右の余白を20pxにしています。
======================================================== */
.site-policy-visual-inner {
width: 100%;
padding: 45px 20px 50px;
box-sizing: border-box;
}
/* ========================================================
【スマートフォン：英語タイトル】
「SITE POLICY」の文字を
スマートフォン用に小さくしています。
PC表示には影響しません。
======================================================== */
.site-policy-en {
margin-bottom: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
line-height: 1.5;
}
/* ========================================================
【スマートフォン：日本語タイトル】
「サイトポリシー」の文字を
スマートフォン用に小さくしています。
width: 100%;
によってタイトルを画面幅に合わせています。
【変更するときのポイント】
font-size
→ タイトルの大きさ
letter-spacing
→ 文字の間隔
======================================================== */
.site-policy-visual h2 {
width: 100%;
font-size: 28px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.5;
}
/* ========================================================
【スマートフォン：オレンジライン】
タイトル下のオレンジ色の線を
スマートフォン用に調整しています。
PCでは48pxですが、
スマートフォンでは42pxにしています。
======================================================== */
.site-policy-visual h2::after {
width: 42px;
height: 2px;
margin-top: 17px;
}
/* ========================================================
【スマートフォン：本文コンテナ】
スマートフォンでは画面幅いっぱいを使いながら、
左右20pxの余白を確保しています。
max-width: none;
は、PC用の最大幅1200pxという制限を
スマートフォンではなくすための設定です。
【変更するときのポイント】
paddingの20pxを大きくすると、
本文の左右の余白が広くなります。
======================================================== */
.site-policy-container {
width: 100%;
max-width: none;
padding: 0 20px 70px;
}
/* ========================================================
【スマートフォン：導入文】
導入文をスマートフォンで読みやすくするため、
PCより文字を小さくしています。
======================================================== */
.site-policy-lead {
margin-bottom: 45px;
font-size: 14px;
line-height: 1.9;
}
/* ========================================================
【スマートフォン：導入文の段落】
段落と段落の間隔を
PCより小さくしています。
======================================================== */
.site-policy-lead p {
margin-bottom: 15px;
}
/* ========================================================
【スマートフォン：各項目】
「著作権」「禁止事項」など、
各項目同士の間隔を調整しています。
======================================================== */
.site-policy-item {
margin-bottom: 45px;
}
/* ========================================================
【スマートフォン：見出し】
各項目の見出しを
スマートフォン用に小さくしています。
PCより画面が狭いため、
paddingや文字サイズも小さくしています。
======================================================== */
.site-policy-item h3 {
margin-bottom: 20px;
padding: 11px 14px;
border-left-width: 4px;
font-size: 17px;
line-height: 1.6;
}
/* ========================================================
【スマートフォン：本文】
本文をスマートフォンで読みやすくするため、
PCより文字サイズを小さくしています。
======================================================== */
.site-policy-item p {
margin-bottom: 18px;
font-size: 14px;
line-height: 1.9;
}
/* ========================================================
【スマートフォン：箇条書き】
「2．禁止事項」などの箇条書きを
スマートフォン用に調整しています。
左側の余白を少し小さくし、
画面を有効に使えるようにしています。
======================================================== */
.site-policy-item ul {
margin-bottom: 20px;
padding-left: 25px;
}
/* ========================================================
【スマートフォン：箇条書きの各項目】
箇条書きの文字サイズ・行間・
項目同士の間隔を調整しています。
======================================================== */
.site-policy-item li {
margin-bottom: 8px;
padding-left: 3px;
font-size: 14px;
line-height: 1.8;
}
}