/* カスタム CSS をここに入力してください */

/* カスタム CSS をここに入力してください */

/* h2～h3一式 */
h2#″danraku2″{
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
font-size: 150%
}



h3#″danraku3″{
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;/*上下中央*/
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
  font-size: 130%
}

h3#″danraku3″:before {
  content: '●';
  color: white;
  margin-right: 8px;
}




h4#″danraku4″{
border-left: 14px double #e60012;/*左線（実線 太さ 色）*/
text-align: left;
background-color: #eee;
font-size: 2em;
color: #000;
margin:0px;
padding: 2px 2px 2px 15px;/*文字周りの余白*/
width:400px;
}　　


/* ラインマーカー一式 */
.marker_pink_futo {
background: linear-gradient(transparent 0%, #ff66ff 0%);
}

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


.marker_yellow_futo {
background: linear-gradient(transparent 0%, #ffff66 0%);
}


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


/* ボックス一式 */
.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}


.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #ffffe0;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}


.box4{
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.box4 p {
    margin: 0; 
    padding: 0;
}


.box-left-line {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.box-left-line p {
    margin: 0; 
    padding: 0;
}


.box-point {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box-point .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box-point p {
    margin: 0; 
    padding: 0;
}


/* ボックス（布線） */
.box-nunosen{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
}
.box14 p {
    margin: 0; 
    padding: 0;
}



/* ボックス（ピンク線） */
.box-pink {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.box15 p {
    margin: 0; 
    padding: 0;
}

/* 考えごと風のふきだし */
.balloon4 {
    position: relative;
    margin: 2em 0 2em 40px;
    padding: 15px;
    background: #fff0c6;
    border-radius: 30px;
}

.balloon4:before{    
    content: "";
    position: absolute;
    left: -38px;
    width: 13px;
    height: 12px;
    bottom: 0;
    background: #fff0c6;
    border-radius: 50%;
}

.balloon4:after{
    content: "";
    position: absolute;
    left: -24px;
    width: 20px;
    height: 18px;
    bottom: 3px;
    background: #fff0c6;
    border-radius: 50%;
}
.balloon4 p {
    margin: 0; 
    padding: 0;
}


/* 著書の引用 */
*, *:before, *:after {
font-family: 'FontAwesome';
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_quote {
position: relative;
width: 90%;
margin: 1em auto;
border-right: 1px solid #da3c41;
border-left: 10px solid #da3c41;
background: #ffedfa;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* アイコン */
.cp_quote::before, .cp_quote::after {
font-size: 2em;
position: absolute;
color: #cccccc;
}
.cp_quote::before {
top: 0.5em;
left: 0.3em;
content: '\f10d';
}
.cp_quote::after {
right: 0.5em;
bottom: 0.3em;
content: '\f10e';
}
/* 引用 */
.cp_quote blockquote {
padding: 0.5em 1em 4em 1em;
}
/* 引用元名 */
.cp_quote blockquote::after {
position: absolute;
right: 4em;
bottom: 0.5em;
display: block;
content: '\2500' attr(data-author);
}





/* かわいいボタン */
/* オレンジボタン */

.square_btn_orange {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;/*背景色*/
    border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
    border-radius: 4px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
}

.square_btn_orange:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}


/* ピンクボタン */
.square_btn_pink {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 1em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #ff7f7f;
    transition: .4s;
}

.square_btn_pink>span{
    border-bottom: solid 2px #FFF;
    border-top: solid 2px #FFF;
}

 .square_btn_pink:hover span {
    padding: 0.1em 0;
}




/* リスト */
ul.sample1{
font-size: 1.3em;
  color: #848484;/*文字色*/
  padding: 1em;/*文字周りの余白*/
  background: #ecf3fa;
  border: dashed 3px #adcce8;
  border-radius: 20px;
  list-style: none;
  -webkit-box-shadow: 0px 0px 0px 10px #ecf3fa, 5px 5px 15px rgba(0, 0, 0, 0.3);
  -moz-box-box-shadow: 0px 0px 0px 10px #ecf3fa, 5px 5px 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 0px 10px #ecf3fa, 5px 5px 15px rgba(0, 0, 0, 0.3);
}
ul.sample1 li{
  position: relative;
  line-height: 25px;
  padding-left: 30px;
  font-weight: bold;
}
ul.sample1 li:before{
  content: "・";
  position: absolute;
  left: 7px;
  font-size: 20px;
}





h4#″danraku4″{
border-left: 14px double #e60012;/*左線（実線 太さ 色）*/
text-align: left;
background-color: #eee;
font-size: 2em;
color: #000;
margin:0px;
padding: 2px 2px 2px 15px;/*文字周りの余白*/
width:400px;
}　　


/* ラインマーカー一式 */
.marker_pink_futo {
background: linear-gradient(transparent 60%, #ff66ff 60%);
}

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


.marker_yellow_futo {
background: linear-gradient(transparent 0%, #ffff66 0%);
}


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


/* ボックス一式 */
.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}


.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #ffffe0;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}


.box4{
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.box4 p {
    margin: 0; 
    padding: 0;
}


.box-left-line {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.box-left-line p {
    margin: 0; 
    padding: 0;
}


.box-point {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box-point .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box-point p {
    margin: 0; 
    padding: 0;
}


/* ボタン一式 */

/* オレンジボタン */
.square_btn{
    display: inline-block;
    padding: 1em 2em;
    text-decoration: none;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    border-bottom: solid 5px #627295;
    border-radius: 4px;
}
.square_btn:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}



/* ブルーボタン */
.square_btn {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;/*背景色*/
    border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
    border-radius: 4px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
}

.square_btn:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);