3色パステルアート css


/*スマホ・タブレットで表示する*/
@media (max-width: 1000px) {.only_pc {display:none}} /*PCで表示する only_pc クラスを非表示*/
/*PCで表示する*/
@media (min-width: 1001px) {.only_mb {display:none}} /*モバイルで表示するonly_mb クラスを非表示*/

/* 文字サイズ */
/* 小 */
.txt-s{
font-size: 80%;
}
.txt-ss{
font-size: 60%;
}
/* 中太 */
.txt-mb{
font-weight: bold;
}
/* 大 */
.txt-l{
color:black;
font-size: 120%;
}
/*さらに 大 */
.txt-ll{
color:black;
font-size: 160%;
}
/* 大太*/
.txt-lb{
color:black;
font-size: 120%;
font-weight: bold;
}
/* さらに大太*/
.txt-llb{
color:black;
font-size: 160%;
font-weight: bold;
}
/* 大太 グリーン  だから〜 で使用*/
.txt-llb-g{
color:#65ab31;
font-size: 110%;
font-weight: bold;
}
/*枠組みと センタリング */
/*ピンク*/
.center-pink{
line-height: 450%;
text-align: center;
border: solid 1px #ff69b4;
background-color: #ffb6c1;
}
/*グレー*/
.center-gray{
margin:1em;
line-height: 150%;
text-align: center;
border: solid 1px #696969;
background-color: #b0c4de;
color:black;
}
/*white*/
.center-white{
margin:1em;
line-height: 180%;
text-align: center;
border: solid 1px #000000;
background-color: #fff;
color:black;
}
/* 線なし*/
.center-nb{
line-height: 450%;
text-align: center;
border: none;
background-color: #fff;
}

/* ブロック内の要素の余白  4つの特徴、ステップで使用 */
.pad_box{
padding : 0px 8px 5px 8px;
}
/* 行間 */
.mb2{
margin-bottom: 2;
}
.mb3{
margin-bottom: 3;
}

/* クレパスライン */
h2.crepas-pink2 {
background: linear-gradient(transparent 30%, #ffc1ff 100%);
}

h2.crepas-pink{
background: linear-gradient(white, #ffccff);
}
h2.crepas-blue{
background: linear-gradient(white, #c6ffff);
}
/* 文字色 */
.black{
color:black
}
/* 背景色 */
.white{
background-color:white;
}
/* 囲みボックス */
/* 水色 */
.kakomi-sky_blue {
margin: 2em auto;
padding: 1em;
width: 90%; /* ボックス幅 */
background-color: #EEFFFF; /* ボックス背景色 */
color: #666; /* 文章色 */
box-shadow: 0 0 5px 1px #c0c0c0; /* 影 */
border-radius: 10px; /* 角の丸み */
}
/*ライムグリーン*/
.kakomi-lime_green {
margin: 2em auto;
padding: 1em;
width: 90%; /* ボックス幅 */
background-color: #adffad; /* ボックス背景色 */
color: #666; /* 文章色 */
box-shadow: 0 0 5px 1px #c0c0c0; /* 影 */
border-radius: 10px; /* 角の丸み */
}
.kakomi-lime_green:hover{
color: #32cd32; /* 文字色 */
background-color: #e5ffe5; /* 背景色*/
text-decoration: none; /* リンクに出てくる下線を無効にする*/
}
/* シンプル */
.kakomi-simple {
margin: 2em auto;
padding: 1em;
width: 90%;
border: 3px solid #00008b; /*太さ・線種・色*/
color: black; /* 文字色 */
background-color: #fff; /* 背景色 */
border-radius: 1px; /*角の丸み*/
}

/*7:3 の段組み 代表メッセージで使用*/
.block_a {
float: left;
width: 70%;
padding:1em;
}
.block_b {
float: left;
width: 30%;
padding:1em;
}
.block-clear {
clear: both;
}
/*5:5 の段組み*/
.block_a5 {
float: left;
width: 50%;
padding:1em;
}
.block_b5 {
float: left;
width: 50%;
padding:1em;
}

/* オレンジ見出し */
.orange-box{
margin: 2em auto;
padding: 0em;
width: 90%;
color: black; /* 文字色 */
background-color: #ff7f50 /* 背景色 */
}
/* グリーン見出し */
.green-box{
margin: 2em auto;
padding: 0em;
width: 90%;
color: black; /* 文字色 */
background-color: #66cdaa/* 背景色 */
}

.center{
display: block;
margin-left: auto;
margin-right: auto;
}
.right {
display: block;
text-align: right;
}