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

詳しくは上のヘルプアイコンをクリックしてください。
*/

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

詳しくは上のヘルプアイコンをクリックしてください。
*/

.sample-box-11 {
    background-color: #fff;
    margin: 2em 0;
    padding: 2em;
    position: relative;
    z-index: 1;
}
.sample-box-11::before,
.sample-box-11::after {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
}
.sample-box-11::before {
    background-color: rgba(255, 255, 255, .5);
    left: 0;
    top: 0;
    z-index: -1;
}
.sample-box-11::after {
    background-color: #a4f5c8;
    top: 5px;
    left: 5px;
    z-index: -2;
}
.sample-box-13 {
    border: 2px solid #da4033;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.sample-box-13::before {
    background-color: #fff;
    color: #da4033;
    content: "POINT";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}
.keiko-pen-yellow{
background: linear-gradient(transparent 55%,rgba(255, 213, 0, 0.85) 60%);
}


.sample08 {
    background: linear-gradient(transparent 60%, #ff99ff 60%);
}

.button,
.button span {
	position: relative;
	display: inline-block;
}
.button span {
	padding: .65em 4em;
	background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
	background: linear-gradient(#fe5f95 , #ff3f7f);
	border: 1px solid #fe3276;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	-webkit-animation: 3s float ease-in-out infinite;
	animation: 3s float ease-in-out infinite;
}
.button::after {
	position: absolute;
	bottom: -15px;
	left: 50%;
	z-index: -1;
	content: '';
	width: 100%;
	height: 24px;
	background-color: rgba(0,0,0,.1);
	border-radius: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-animation: 3s shadow ease-in-out infinite;
	animation: 3s shadow ease-in-out infinite;
}
@-webkit-keyframes float {
	50% {
		-webkit-transform: translateY(-10px);
	}
}
@keyframes float {
	50% {
		transform: translateY(-10px);
	}
}
@-webkit-keyframes shadow {
	50% {
		width: 70%;
		height: 18px;
	}
}
@keyframes shadow {
	50% {
		width: 70%;
		height: 18px;
	}
}
.sample01 {
    border-bottom: 2px solid #ff3333;
}
.sample20 {
    background: linear-gradient(transparent 60%, #FFE4E1 60%);
}
.sample05 {
    background-color: #FFE4E1;
}
.sample-box-19 {
    background-color: #fff;
    margin: 2em 0;
    padding: 2em;
    position: relative;
    z-index: 1;
}
.sample-box-19::before,
.sample-box-19::after {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
}
.sample-box-19::before {
    background-color: rgba(236, 250, 167, 0.39);
    left: 0;
    top: 0;
    z-index: -1;
}
.sample-box-19::after {
    background-color: #ebf5a4;
    top: 5px;
    left: 5px;
    z-index: -2;
}
.frame {
	display: inline-block;
	transform: rotate(5deg);
}
.sample-box-6 {
    background-color: rgba(183, 81, 118, 0.1);
    border: 2px dashed #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 4px rgba(183, 81, 118, 0.1);
    color: #000000;
    margin: 2em 0;
    padding: 2em;
}
.sample-box-7 {
    background-color: #c817c3;
    color: #fff;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.sample-box-7::after {
    content: "";
    border-color: #c817c3 #fff #fff #c817c3;
    border-style: solid;
    border-width: 0 0 24px 24px;
    bottom: 0;
    position: absolute;
    right: 0;
}
.wrapnote {
	width: 100%;
}
.wrapnote .note2 {
	margin: 10px;
	padding: 10px 0 15px 0;
	background: #fdfdc0;
}
.wrapnote .note2 p {
	background: url(http://moeriku.com/wp-content/uploads/2017/02/line2.png) repeat bottom left;
	font-size: 14px;
	line-height: 30px;
	margin: 0 20px;
}
.demo {
  width: 500px;
  margin: 0 auto;
  padding: 10px 0;
  font-family: sans-serif;
  font-size: 20px;
  color:#e33b97;
}
.heading {
  margin: 10px 0
}
.demo0 .heading {
  position: relative;
  padding-left: 30px;
}
.demo0 .heading:before,
.demo0 .heading:after{
  content: "♡";
  position: absolute;
  width:4px;
  height: 4px;
}
.demo0 .heading:before {
  left:0;
  top:-3px;
}
.demo0 .heading:after {
  left: 5.5px;
  top: 3.5px;
}
hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}
hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}
h3 {
	position: relative;
	padding-bottom: .5em;
	border-bottom: 4px solid #ccc;
}
h3::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 4px;
	background-color: #3498db;
}
h4 {
	position: relative;
	padding-bottom: .5em;
	border-bottom: 4px solid #ccc;
}
h4::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 4px;
	background-color: #3498db;
}