/* カスタム CSS をここに入力してください */
/******************************
** 見出し
******************************/
.yellow_under {
	    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFFF82 0%) repeat scroll 0 0;
}

.h1 {
padding: 0.25em 0.5em;
background: #fcf2ff;
border-left: solid 5px #f2adff;
font-size:18px;
font-weight:bold;
}

h1 {
	    font-size: 20px;
    margin: 0.67em 0;
    padding-left: 10px;
    padding-right: 10px;
}

.h2 {
padding: 0.25em 0.5em;
background: #ffffff;
border-left: solid 4px #D6051B;
font-size:18px;
font-weight:bold;
}

.entry-content > h2 {
    padding: 8px 10px;
    font-weight: bold;
    margin: 0 0 10px 0;
    border-bottom: 3px solid #ff205f;
}

.h3 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

.entry-content > .h4{
 color: #d04255; /* 文字色 */
 padding: 5px 5px 5px 35px; /* 上・右・下・左の余白 */
 position: relative;
 border-top: 2px dotted #ffffff;
  font-size:22px;
	 
}

.h4:after{
border-bottom: 2px dotted #EAA8BF; /* 下線 */
 content: '';
 position: absolute;
 bottom: 0px;
 width: 100%;
 left: 0px;
}

.entry-content > .h5 {
/*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #FFC778;
	background-color: transparent;
	font-weight:bold;
	font-size:18px;
	padding-bottom:1px;
}

h6 {
  border-bottom: dashed 5px #e2cede;
	padding:1px;
}

.point {
  position: relative;
  border-top: solid 2px #80c8d1;
  border-bottom: solid 2px #80c8d1;
  background: #f4f4f4;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
}

.point:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '\f0a7\ POINT';
  background: #80c8d1;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}


/******************************
** 基本デザイン
******************************/

.main p {
 font-size: 17px;
 line-height: 2;
 font-family: 'メイリオ', Meiryo,sans-serif;
 color:#424242;
 padding-left: 0;
 padding-right: 0;
}

/******************************
** 文字の装飾
******************************/

.b {
  font-weight:bold;
}

.big {
  font-size:17px;
  font-weight:bold;
}

.h4big{
	  font-size:22px;
  font-weight:bold;
}

.title{
	font-size:22px;
	font-weight:bold;
	 line-height: 1.5;
}

.small{
	font-size:12px;
}

.under {
  text-decoration : underline
}

.center{
  text-align: center;
	margin:30px 10px;
}

.right{
  text-align: right;
}

.blink{
  animation:BLINK 0.5s ease-in-out infinite alternate;}
@keyframes BLINK {0%{opacity:1.0;}100% {opacity:0;}
}

.box1 {
  padding: 0.5em 1em;
  margin: 2em 0;
  border: solid 1px #424242;
  border-color:#808080;
}
.box1 p {
  margin: 0; 
  padding: 0;
}

/******************************
** 文字の色
******************************/

.titlered{
	color:#ff0000;
  font-weight: bold;
  font-size:22px;
	 line-height: 1.5;
}

.titleblue{
	color:#0000FF;
  font-weight: bold;
  font-size:22px;
	 line-height: 1.5;
}

.red {
  color:#ff0000;
  font-weight: bold;
}

.blue {
  color:#0000FF;
  font-weight: bold;
}

.pink {
  font-weight: bold;
	 color:#ff1493;
}

.gray {
  color:#C0C0C0;
}

.marker {
  background: linear-gradient(transparent 60%, #ffff66 0%);
  font-weight: bold;
  line-height: 1.3em;
}



/*マーカーアニメーション*/
 
.marker-animation.active{
    background-position: -100% .5em;
}
 
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, #ffff66 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, #ffff66 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, #ffff66 50%);
    background-image: -o-linear-gradient(left, transparent 50%, #ffff66 50%);
    background-image: linear-gradient(left, transparent 50%, #ffff66 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 4s ease;
    font-weight: bold;
}

/******************************
** BOX
******************************/


.box30 {
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    margin: 30px 10px;
}
.box30 .box-title {
    font-size: 17px;
    background: #FA8D8D;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}

.box31 {
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    margin: 30px 10px;
}
.box31 .box-title {
    font-size: 17px;
    background: #58ACFA;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box31 p {
    padding: 15px 20px;
    margin: 0;
}

/*VCセラム用*/
/******************************
** ウェンドレス様用
******************************/
.entry-content > .w_h1{
  margin-top: 60px;
  font-size: 20px;
  font-weight: bold;
  padding: 0em 0.5em;/*上下の余白*/
  border-top: solid 3px #b92a2c;/*上線*/
  border-bottom: solid 3px #b92a2c;/*下線*/
  background-color: #FFFFFF;
}

.w_under {
    border-bottom: solid 2px #f81501;
	font-weight:bold;
}

.w_center{
  text-align: center;
  margin:15px 10px;
}

.w_right{
  text-align: right;
}

.w_maxred{
  color:#f81501;
  font-weight: bold;
  font-size:22px;
  line-height: 1.5;
}

.w_red {
  color:#f81501;
  font-weight: bold;
}

.w_maxblue{
  color:#0000FF;
  font-weight: bold;
  font-size:22px;
  line-height: 1.5;
}

.w_blue {
  color:#0000FF;
  font-weight: bold;
}

.w_pink {
  font-weight: bold;
  color:#ff1493;
}

.w_gray {
  color:#C0C0C0;
}

.w_marker {
  background-color: #FFFF66;
  font-weight: bold;
  line-height: 1.3em;
}

.w_big {
  font-size:18px;
  font-weight:bold;
}

.w_b {
  font-weight:bold;
}
 /* skewの動きをここで設定 */
    @keyframes skew {
        0% {transform: skew(0deg, 0deg);}
        5% {transform: skew(5deg, 4.2deg);}
        10% {transform: skew(-4deg, -3deg);}
        15% {transform: skew(3deg, 2.2deg);}
        20% {transform: skew(-2deg, -1.5deg);}
        25% {transform: skew(0.9deg, 0.9deg);}
        30% {transform: skew(-0.6deg, -0.6deg);}
        35% {transform: skew(0.3deg, 0.3deg);}
        40% {transform: skew(-0.2deg, -0.2deg);}
        45% {transform: skew(0.1deg, 0.1deg);}
        50% {transform: skew(0deg, 0deg);}
    }
.puru_btn{
	animation: skew 2.5s linear infinite;
}
/*ここまで*/