|
@charset "UTF-8"; |
|
|
|
/* * { */ |
|
/* appearance: none; */ |
|
/* -webkit-appearance: none; */ |
|
/* -moz-appearance: none; */ |
|
/* -o-appearance: none; */ |
|
/* } */ |
|
|
|
h1 { |
|
color: #9DB79E; |
|
} |
|
h2 { |
|
color: #D0C296; |
|
} |
|
h3 { |
|
color: #E8CEA6; |
|
} |
|
h4 { |
|
color: #d4b78c; |
|
; |
|
} |
|
h5 { |
|
color: #d9bf9c; |
|
} |
|
|
|
a { |
|
color: #73B5B1; |
|
} |
|
|
|
button { |
|
/* ブラウザ特有のスタイルを無効に */ |
|
-moz-appearance: none; |
|
-webkit-appearance: none; |
|
appearance: none; |
|
|
|
/* 整える */ |
|
margin: 1em 0; /* 前後の隙間 */ |
|
padding: 0.6em 1em; /* 塗りの余白 */ |
|
font-size: 1em; /* フォントサイズ */ |
|
background-color: #73B5B1; /* 背景色 */ |
|
color: #FFF; /* テキストカラー */ |
|
cursor: pointer; /* カーソルを指マークに */ |
|
border-radius: 3px; /* 角の丸み */ |
|
border: 0; /* 枠線を消す */ |
|
transition: 0.3s; /* ホバーの変化を滑らかに */ |
|
} |
|
|
|
/* ホバー時（カーソルをのせた時）の見た目 */ |
|
button:hover { |
|
background-color: #9DB79E; /* 背景色 */ |
|
} |
|
|
|
table{ |
|
width: 10em; |
|
border-collapse: collapse; |
|
margin-bottom: 10px; |
|
margin-top: 10px; |
|
} |
|
|
|
table tr{ |
|
background-image: linear-gradient(40deg, #73B5B1 0%, #D0C296 74%); |
|
} |
|
|
|
table tr:last-child *{ |
|
border-bottom: none; |
|
} |
|
|
|
table th,table td{ |
|
text-align: center; |
|
border: solid 2px #fff; |
|
color: white; |
|
padding: 10px 0; |
|
} |
|
|
|
input[type="text"], |
|
input[type="mail"], |
|
textarea { |
|
font-size: 0.95em; /* フォントサイズ */ |
|
margin: 1em 0; /* 前後の余白 */ |
|
padding: 0.5em; /* テキスト周りの余白 */ |
|
border: solid 2px #73B5B1; /* 線の色 */ |
|
border-radius: 4px; /* 角丸 */ |
|
} |
|
|
|
input[type='checkbox'], |
|
input[type='radio'] { |
|
height: 1em; |
|
width: 1em; |
|
padding: 0.5em; /* テキスト周りの余白 */ |
|
} |
|
|
|
|
|
label{ |
|
display:block; |
|
position:relative; |
|
padding-left:1em; |
|
} |
|
label input{ |
|
position:absolute; |
|
top:0; |
|
bottom:0; |
|
left:0; |
|
margin:auto; |
|
} |
|
|
|
figure, blockquote { |
|
margin: 0; /* ブラウザデフォルトの隙間をリセット */ |
|
} |
|
blockquote { |
|
color: #565656; |
|
padding: 0 0 0 0.5em; /* 左側に余白 */ |
|
border-left: solid 3px #9DB79E; /* 左側に線 */ |
|
font-style: italic; /* 引用文を斜体に */ |
|
} |
|
figure p { |
|
margin: 0.5em 0; |
|
} |
|
figure figcaption { |
|
text-align: right; /* 出典は右寄せに */ |
|
} |
|
|
|
ul { |
|
list-style-type: none; /* 記号を消す */ |
|
padding: 0; /* 余計な余白を消す */ |
|
} |
|
ul li { |
|
position: relative; /* 位置調整 */ |
|
padding-left: 1em; /* 点が配置されるスペース */ |
|
} |
|
|
|
/* 疑似要素で点を表示 */ |
|
ul li:before { |
|
content: ''; |
|
position: absolute; /* 位置調整 */ |
|
left: 0; /* 位置調整 */ |
|
top: .5em; /* 位置調整 */ |
|
width: 7px; /* 幅 */ |
|
height: 7px; /* 高さ */ |
|
border-radius: 50%; /* 円形に */ |
|
background: #73B5B1; /* 背景色 */ |
|
} |
|
|
|
ol { |
|
position: relative; |
|
right: 41px; |
|
list-style: none; |
|
counter-reset: ol_li; /* ol_li カウンタをセットする(値もリセット) */ |
|
} |
|
ol li:before { |
|
margin-right: .25em; |
|
counter-increment: ol_li; /* ol_li カウンタの値に1加える */ |
|
content: counter(ol_li); /* before擬似要素のcontentで出力 */ |
|
color: #73B5B1; /* 色を変更 */ |
|
} |
|
|
|
code { |
|
position: relative; |
|
right: 76px; |
|
display: inline-block; |
|
padding: 0.1em 0.25em; /* 文字周りの余白 */ |
|
color: #444; /* 文字色 */ |
|
background-color: #FEF4EA; /* 背景色 */ |
|
border-radius: 3px; /* 角丸 */ |
|
border: solid 1px #9DB79E; /* 枠線 */ |
|
} |
|
|
|
body { |
|
max-width: 900px; |
|
margin: auto; |
|
width: 250px; |
|
} |
|
|
|
button { |
|
margin-top: 10px; |
|
margin-bottom: 10px; |
|
/* display:block; */ |
|
/* margin: 0 auto; */ |
|
} |
|
|
|
.center { |
|
background: lightgray; |
|
height: 200px; |
|
position: relative; /*中央揃えしたい要素の親要素に指定*/ |
|
} |
