/*
ここに独自の CSS を追加することができます。

詳しくは上のヘルプアイコンをクリックしてください。
*/
.box-1 {
    background-color: #66ccff;
    border: 2px dashed #fff;
    border-radius: 8px;
    color: #000000;
    margin: 2em 0;
    padding: 1em;
}

.box-3 {
    background-color: #339999;
    border-left: 8px solid #006666;
    color: #ffffff;
    margin: 1em 0;
    padding: 0.5em;
}
.box-04 {
    background: -webkit-repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    background: repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    color: #4a1086;
    margin: 1em 0;
    padding: 1em;
}

.box-4 {
    background-color: #66ccff;
    border-left: 8px solid #003366;
    color: #000000;
    margin: 1em 0;
    padding: 0.5em;
}


.box-10 {
    background: -webkit-repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    background: repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    color: #4a1086;
    margin: 2em 0;
    padding: 1em;
}
.sample-box-6 {
    background-color: #8d1e47;
    border: 2px dashed #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 4px #8d1e47;
    color: #fff;
    margin: 2em 0;
    padding: 2em;
}

.balloon01 {
	position: relative;
	color: #fff;
	background: #4f4f4f;
	font-size: 16px;
	line-height: 1;
	margin: 30px -10px 10px -10px;
	padding: 15px 5px 12px 10px;
}
.balloon01:after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 20px;
	height: 0;
	width: 0;
	border: 10px solid transparent;
	border-top: 10px solid #4f4f4f;
}

.ribbon1 {
	color: #ffffff;
	font-size: 16px;
	line-height: 20px;
	position: relative;
	padding: 10px;
	background: #000000;
	box-shadow: 0 0 0 0 #000000, -10px 0 0 0 #000000, 0 3px 3px 0 rgba(0,0,0,0.1);
}
.ribbon1:before {
	content: " ";
	position: absolute;
	top: 100%;
	left: -10px;
	width: 0;
	height: 0;
	border-width: 0 10px 10px 0;
	border-style: solid;
	border-color: transparent;
	border-right-color: #4f4f4f;
}