/* Bootstrap CallOut*/
.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success h4 {
    color: #5cb85c;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h4 {
    color: #5bc0de;
}


p.test{
color:blue;
line-height:6.65;
letter-spacing:.1em;
text-align:justify;
}

/*  */
.img-fluid{
max-width: 100%;
height: auto; 
width: 100% \9; 
}

/* バルーン */
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 15px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}


.balloon1-top {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1-top:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #e0edff;
}

.balloon1-top p {
  margin: 0;
  padding: 0;
}


.balloon1-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}

.balloon1-left p {
  margin: 0;
  padding: 0;
}

.balloon1-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #e0edff;
}

.balloon1-right p {
  margin: 0;
  padding: 0;
}


.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon2:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

.balloon2 p {
  margin: 0;
  padding: 0;
}


.balloon2-top {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2-top:before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
  z-index: 2;
}

.balloon2-top:after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #555;
  z-index: 1;
}

.balloon2-top p {
  margin: 0;
  padding: 0;
}


.balloon2-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.balloon2-left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

.balloon2-left p {
  margin: 0;
  padding: 0;
}


.balloon2-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}

.balloon2-right:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #555;
  z-index: 1;
}

.balloon2-right p {
  margin: 0;
  padding: 0;
}


.balloon3 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #70a6ff;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #70a6ff;
  z-index: 0;
}


.balloon3-top {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #a4eb84;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-top:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #a4eb84;
  z-index: 0;
}

.balloon3-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #ffcc75;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #ffcc75;
  z-index: 0;
}

.balloon3-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #ff8e9d;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #ff8e9d;
  z-index: 0;
}

.balloon3-right-btm {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #a58eff;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-right-btm:before {
  content: "";
  position: absolute;
  bottom: -8px;
  right: -8px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #a58eff;
  z-index: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*バルーン*/

/*バルーン（考え事）*/
.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;
}
/*バルーン（チャット風）*/
.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}

/*以下、②左側のコメント*/
/*以下、①背景色など*/
.line-bc {
  padding: 20px 10px;
  max-width: 450px;
  margin: 15px auto;
  text-align: right;
  font-size: 14px;
  background: #7da4cd;

}

/*以下、②左側のコメント*/
.balloon6 {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
}

.balloon6 .faceicon {
  float: left;
  margin-right: -50px;
  width: 40px;
}

.balloon6 .faceicon img{
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.balloon6 .chatting {
  width: 100%;
  text-align: left;
}
.says {
  display: inline-block;
  position: relative; 
  margin: 0 0 0 50px;
  padding: 10px;
  max-width: 250px;
  border-radius: 12px;
  background: #edf1ee;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px; 
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #edf1ee;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.says p {
  margin: 0;
  padding: 0;
}

/*以下、③右側の緑コメント*/
.mycomment {
  margin: 10px 0;
}
.mycomment p {
  display: inline-block;
  position: relative; 
  margin: 0 10px 0 0;
  padding: 8px;
  max-width: 250px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}

.mycomment p:after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}
/*チャット風吹き出し２*/
/* 全体の設定 */
.balloon01 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}
/* アイコンの場所 width⇒アイコンの大きさ*/
.balloon01 .faceicon {
float: left;
margin-right: -90px;
width: 80px;
}
/* アイコン画像の作成 border⇒アイコンの枠の太さ、カラーはここで変更*/
.balloon01 .faceicon img{
width: 100%;
height: auto;
border-radius: 50%;
border: solid 2px #b8860b;
}
.balloon01 .chatting {
width: 100%;
}
/* 吹き出しの入力部分の作成 display⇒この部分を外すと横幅いっぱいになります、border-radius⇒吹き出しの丸み具合を変更、background⇒吹き出しのカラーはここで変更*/
.says {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px;
background: #fffacd;
}
/* 三角部分の作成  border-right⇒三角部分のカラーはここで変更*/
.says:after {
content: "";
display: inline-block;
position: absolute;
top: 18px; //三角の位置(高さ)を変更
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #fffacd;
}
.says p {
margin: 0;
padding: 0;
}

/*左右チャット♂https://enisys-llc.com/engsprt/tips/chat-balloon/*/
.balloon-color {
display: flex;
flex-wrap: wrap;
}
/* 左の吹き出し */
.balloon-color.left {
flex-direction: row; /* 左から右に並べる */
}
.left .chatting-color {
position: relative;
display: inline-block; /* 吹き出しが文字幅に合わせます */
margin: 15px 20px 20px;
padding: 10px 20px;
background: #696969; //（◯）カラー変更はこちら
text-align: left; //テキスト左揃え
border-radius: 15px; //枠の丸みの設定はこちら
}
.left .chatting-color::after {
content: "";
border: 15px solid transparent;
border-top-color: #696969; //（◯）とカラーを合わせる
position: absolute;
top: 15px; //三角部分の高さ
left: -15px; //三角部分の位置
}
/* 右の吹き出し */ 
.balloon-color.right {
flex-direction: row-reverse; /* 右から左に並べる */ 
}
.right .chatting-color {
position: relative;
display: inline-block; /* 吹き出しが文字幅に合わせます */
margin: 15px 20px 20px;
padding: 10px 20px;
background: #2f4f4f; //（△）カラー変更はこちら
text-align: left; //テキストの位置変更はこちら
border-radius: 15px; //枠の丸みの設定はこちら
}
.right .chatting-color::after {
content: "";
border: 15px solid transparent;
border-top-color: #2f4f4f; //（△）とカラーを合わせる
position: absolute;
top: 15px; //三角部分の高さ
right: -15px; //三角部分の位置
}
/* アイコンの作成 */
.balloon-color figure img {
border-radius: 0; /* 画像を丸くしたいときに利用 */
margin: 0;
}
/* アイコンの大きさ */
.icon-color {
width: 100px;
height: 100px;
}
/* アイコンの名前 */
.name-color {
width: 100px; /* アイコンの大きさと合わせる */
font-size: 12px;
text-align: center; /* 名前は真ん中に */
}
.text-color {
color: #fff; // テキストのカラー変更はこちら
font-size: 16px; //テキストサイズの変更はこちら（なければデフォルトのサイズになります）
}

/* ダイアログ（talking）https://kirari-yums.net/post-9578/ */

/*------------------------------
  画像付き吹き出し(会話)
------------------------------*/
/* 吹き出し 全体*/
.talking {
      margin-bottom:2em;
      position:relative;
}

.talking:before , .talking:after {
      clear:both;
      content:"";
      display:block;
}

/*アイコン*/
.talking figure {
      width:60px;     /*アイコンの横幅*/
      height:60px;    /*アイコンの縦幅*/
}

.talking-left_icon {
      float:left;
      margin-right:20px;    /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon {
      float:right;
      margin-left:20px;    /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img {
      width:100%;
      height:100%;
      margin:0;
      border:2px solid #aaa;
      border-radius:50%;    /*アイコンの角丸*/
}

/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
      padding:2px 0 0;
      font-size:12px;
      text-align:center;
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-right  {
      position:relative;
      padding:10px;
      border-style:solid;    /*枠線の線種*/
      border-radius:10px;    /*セリフを入れる部分の角丸*/
      max-width: calc(100% - 80px);
}

.talking p {
      margin:0;
}

.talking p :last-child {
      margin:0;
}

/*---左の吹き出し---*/
.talking-left {
      float:left;
      border-width:2px;         /*枠線の太さ*/
      border-color:lightpink;   /*枠線の色*/
      background:lightpink;    /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightpink;  /*三角の線になる部分*/
      top: 15px;
      left: -22px;
}

.talking-left:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightpink;
      top: 15px;
      left: -19px;
}

/*---右の吹き出し---*/
.talking-right {
      float:right;
      border-width:2px;      /*枠線の太さ*/
      border-color:khaki;    /*枠線の色*/
      background:khaki;    /*背景色*/
}

/*右の吹き出し 三角*/
.talking-right:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;  /*三角の線になる部分*/
      top: 15px;
      right: -22px;
}

.talking-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;
      top: 15px;
      right: -19px;
}
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*各種ボード https://miyazakilife.com/design/5683/*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*デザイン例が充実！おしゃれなデザインの囲み枠*/
/*シンプルな囲み枠*/
.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

.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: #cde4ff;/*背景色*/
}
.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;
}

.box5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
}
.box5 p {
    margin: 0; 
    padding: 0;
}

.box6 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/
}
.box6 p {
    margin: 0; 
    padding: 0;
}

.box7{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-left: double 7px #4ec4d3;/*左線*/
    border-right: double 7px #4ec4d3;/*右線*/
}
.box7 p {
    margin: 0; 
    padding: 0;
}

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

.box9 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #ff7d6e;
    background: #ffebe9;
    border-top: solid 10px #ff7d6e;
}
.box9 p {
    margin: 0; 
    padding: 0;
}

.box10 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #00BCD4;
    background: #e4fcff;/*背景色*/
    border-top: solid 6px #1dc1d6;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box10 p {
    margin: 0; 
    padding: 0;
}

.box11{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box11 p {
    margin: 0; 
    padding: 0;
}

.box12{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5989cf;
    background: #c6e4ff;
    border-bottom: solid 6px #aac5de;
    border-radius: 9px;
}
.box12 p {
    margin: 0; 
    padding: 0;
}

.box13 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #FFF;
    background: #6eb7ff;
    border-bottom: solid 6px #3f87ce;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.box13 p {
    margin: 0; 
    padding: 0;
}

/*かわいいボックスデザイン*/
.box14{
    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;
}

.box15 {
    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;
}

.box16{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}


/*おしゃれなデザイン*/
.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}

.box18{
    margin:2em 0;
    position: relative;
    padding: 0.25em 1em;
    border: solid 2px #ffcb8a;
    border-radius: 3px 0 3px 0;
}
.box18:before,.box18:after
{
    content: '';
    position: absolute;
    width:10px;
    height: 10px;
    border: solid 2px #ffcb8a;
    border-radius: 50%;
}
.box18:after {
    top:-12px;
    left:-12px;
}
.box18:before {
    bottom:-12px;
    right:-12px;
}
.box18 p {
    margin: 0; 
    padding: 0;
}

.box19 {
    position: relative;
    padding:0.25em 1em;
}
.box19:before,.box19:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.box19:before{
    border-left: solid 1px #5767bf;
    border-top: solid 1px #5767bf;
    top:0;
    left: 0;
}
.box19:after{
    border-right: solid 1px #5767bf;
    border-bottom: solid 1px #5767bf;
    bottom:0;
    right: 0;
}
.box19 p {
    margin: 0; 
    padding: 0;
}

.box20 {
    position: relative;
    padding: 0.25em 1em;
    margin: 2em 0;
    top: 0;
    background: #efefef;
}
.box20:before, .box20:after{ 
    position: absolute;
    top: 0;
    content:'';
    width: 10px;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
}
.box20:before{
    border-left: dotted 2px #15adc1;
    border-top: dotted 2px #15adc1;
    border-bottom: dotted 2px #15adc1;
    left: 0;
}
.box20:after{
    border-top: dotted 2px #15adc1;
    border-right: dotted 2px #15adc1;
    border-bottom: dotted 2px #15adc1;
    right: 0;
}
.box20 p {
    margin: 0; 
    padding: 0;
}

.box21{
    padding: 0.5em 1em;
    background: -moz-linear-gradient(#ffb03c, #ff708d);
    background: -webkit-linear-gradient(#ffb03c, #ff708d);
    background: linear-gradient(to right, #ffb03c, #ff708d);
    color: #FFF;
}
.box21 p {
    margin: 0; 
    padding: 0;
}

.box22{
    padding: 0.5em 1em;
    margin: 1em 0;
    background: #f4f4f4;
    border-left: solid 6px #5bb7ae;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box22 p {
    margin: 0; 
    padding: 0;
}

.box23 {
    position: relative;
    margin: 2em 0 2em 40px;
    padding: 8px 15px;
    background: #fff0c6;
    border-radius: 30px;
}
.box23:before{font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 15px;
    left: -40px;
    bottom: 0;
    color: #fff0c6;
}
.box23:after{
    font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 23px;
    left: -23px;
    bottom: 0;
    color: #fff0c6;
}
.box23 p {
    margin: 0; 
    padding: 0;
}

.box24 {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0;
    background: #e6f4ff;
    color: #5c98d4;
    font-weight: bold;
}
.box24:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #e6f4ff;
    width: 0;
    height: 0;
}
.box24 p {
    margin: 0; 
    padding: 0;
}

.box25{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.box25:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
    margin: 0; 
    padding: 0;
}


/*シンプル　普通の囲み枠*/
/* シンプル 枠 1*/
.box26 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 background-color: #fff; /* 背景色 */
 border: 1px solid #ccc; /* 枠線 */
}

/* シンプル囲み枠 2*/
.box27 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 color: #666; /* 文字色 */
 background-color: #f7f7f7; /* 背景色 */
 border: 1px solid #ccc; /* 枠線 */
}

/* シンプル 枠（影）1 */
.box28 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 border: 1px solid #ccc; /* 枠線 */
 background-color: #fff; /* 背景色 */
 box-shadow: 1px 1px 2px #ccc;
}

/* シンプル 枠（影）2 */
.box29 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 background-color: #FFF5EE; /* 背景色 */
 box-shadow: 0 0 5px 1px #ccc; /* 影 */
}

/* シンプル角丸 枠 1 */
.box30 {
 margin: 2em auto;  
 padding: 1em;
 width: 90%; /*幅の調節*/
 color: #666666; /*文字色*/
 background-color: #f7f7f7; /*背景色*/
 border: 2px solid #ccc; /*線の太さ・色*/
 border-radius: 8px; /*角の丸み*/ 
}

/*シンプル角丸（影）枠 2*/
.box31 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 color: #666666; /*文字色*/
 border: 2px solid #996633; /*線の太さ・色*/
 background-color: #fff; /*背景色*/
 box-shadow: -2px 5px 5px #e8d3c7; /*影*/
 border-radius: 20px; /*角の丸み*/
}

/*シンプル角丸（影）枠 3*/
.box32 {
 margin: 2em auto;
 padding: 1em;
 width: 90%; /* ボックス幅 */
 background-color: #EEFFFF; /* ボックス背景色 */
 color: #666; /* 文章色 */
 box-shadow: 0 0 5px 1px #c0c0c0; /* 影 */
 border-radius: 10px; /* 角の丸み */
}

/*　手書き風BOX 1　*/
.box33 {
 margin: 2em auto; 
 padding: 1em 1.5em;
 width: 90%; /*幅の調節*/
 color: #777777; /* 文字色 */
 background-color: #fff; /* 背景色 */
 border: 4px solid #f6bfbc; /*線の太さ・色*/
 border-radius: 3em .8em 3em .7em/.9em 2em .8em 3em;
}

/* 破線 枠 */
.box34 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 border: 3px dashed #c0c0c0; /*太さ・線種・色*/
 color: #a0a0a0; /* 文字色 */
 background-color: #FFF; /* 背景色 */
 border-radius: 1px; /*角の丸み*/
}

/* ドット 囲み枠 */
.box35 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 border: 5px dotted #f09199; /*太さ・線種・色*/
 background-color: #fff; /* 背景色 */
 border-radius: 1px; /*角の丸み*/
}

/* 二重線　囲み枠 */
.box36 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 border: 5px double #8491c3; /*太さ・線種・色*/
 color: #333; /* 文字色 */
 background-color: #fff; /* 背景色 */
 border-radius: 1px; /*角の丸み*/
}


/* 補足BOX　1 */
.box37 {
 margin: 2em 0em 2em 4em; /* 枠外との間隔（上、右、下、左） */
 padding: 5px 10px;
 font-size: 0.9em; /* 文字サイズ */
 border-left: 6px double #4d4398; /* 線の太さ・線種・色 */
}

/* 補足BOX　2 */
.box38 {
 margin: 2em 0em 2em 4em; /* 枠外との間隔（上、右、下、左） */
 padding: 5px 10px;
 font-size: 0.9em; /* 文字サイズ */
 color: #555555; /* 文字色 */
 border-left: 3px solid #999999; /* 線の太さ・線種・色 */
 border-radius: 5px;
}

/* ふんわり　枠　1 */
.box39 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #ffcccc; /* 背景色 */
 box-shadow: 0 0 10px 10px #ffcccc; /* 影 */
}

/* ふんわり　枠　2 */
.box40 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #fff; /* 背景色 */
 box-shadow: 0 0 5px 5px #bce2e8, 0 0 5px 3px #bce2e8 inset; /* 影 */
 border-radius: 10px; /*角の丸み*/
}


/* ふんわり手書き枠　4 */
.box41 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #FFFFE0; /* 背景色 */
 box-shadow: 0 0 5px 2px #ffa042, 0 0 5px 2px #ffa042 inset; /* 影 */
 border-radius: 2em .7em 3em .9em/.8em 3em .7em 2em; /*角の丸み*/
}

/* メモ　クリップ　Ａ */
.box42 {
 position: relative;
 margin: 2em auto;
 padding: 15px 35px 15px 25px;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #555555; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 1px #acacac; /* 影の色 */
}
.box42::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #555555; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #999;
 transform: rotate(10deg);
 z-index: 1;
}
.box42::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #fff; /*背景色と同じ色にする*/
 z-index: 2;
}

/* メモ　クリップ　Ｂ */
.box43 {
 position: relative;
 margin: 2em auto;
 padding: 15px 35px 15px 25px;
 width: 90%; /* ボックス幅 */
 background-color: #FFE4E1; /* ボックス背景色 */
 color: #666666; /* 文章色 */
 box-shadow: 4px 4px 1px #FFB6C1; /* 影の色 */
}
.box43::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #C0C0C0; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #ccc; /*クリップ影*/
 transform: rotate(10deg);
 z-index: 1;
}
.box43::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #FFE4E1; /*背景色と同じ色に！*/
 z-index: 2;
}

/* メモ　ホチキス　Ａ */
.box44 {
 position: relative;
 margin: 2em auto;
 padding: 20px 20px 20px 35px;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #555555; /* 文章色 */
 border: 1px solid #d9333f; /* 枠線 */
 box-shadow: 2px 2px 2px #ccc; /* 影の色 */
}
.box44::before {
 position: absolute;
 content: '';
 top: 5px;
 left: 20px;
 height: 30px;
 border: 1.5px solid #d9333f; /* ホチキス色 */
 border-radius: 12px;
 box-shadow: 1px 1px 1px #333;
 transform: rotate(45deg);
}

/* メモ　ホチキス　Ｂ */
.box45 {
 position: relative;
 margin: 2em auto;
 padding: 35px 20px 15px;
 width: 90%; /* ボックス幅 */
 background: #fff; /* ボックス背景色 */
 color: #555555; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 2px #ccc; /* 影 */
}
.box45::before, 
.box45::after {
 position: absolute;
 content: '';
 top: 15px;
 width: 30px;
 border: 1.5px solid #C0C0C0; /*ホチキス*/
 border-radius: 20px;
 box-shadow: 0 -1px 2px #555;
}
.box45::before { left: 80px;}
.box45::after { right: 80px;}

/* パンチ　BOX　Ａ */
.box46 {
 position: relative;
 margin: 2em auto;
 padding: 40px 20px 15px;
 width: 90%; /* ボックス幅 */
 background-color: #f7f7f7; /* ボックス背景色 */
 color: #666666; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 2px #ccc; /* 影 */
}
.box46::before, 
.box46::after {
 position: absolute;
 content: '';
 top: 10px;
 width: 18px;
 height : 18px;
 background-color: #fff; /*穴背景色*/
 box-shadow: -1px -1px 8px #cccccc inset;
 border: 1px solid #ccc; /*穴*/
 border-radius: 50%;
}
.box46::before { left: 80px;}
.box46::after { right: 80px;}

/* パンチ　BOX　Ｂ */
.box47 {
 position: relative;
 margin: 2em auto;
 padding: 40px 20px 15px;
 width: 90%; /* ボックス幅 */
 background: #FFFAF0; /* ボックス背景色 */
 color: #666; /* 文章色 */
 border: 2px solid #FFDEAD; /* ボックス枠線 */
 border-radius: 5px;
 box-shadow: 0 0 3px #ccc; /* 影 */
}
.box47::before, 
.box47::after {
 position: absolute;
 content: '';
 top: 10px;
 width: 18px;
 height : 18px;
 background: #fff; /*穴背景色*/
 box-shadow: 0 0 8px #cccccc inset;
 border: 1px solid #FFDEAD; /*パンチ穴枠*/
 border-radius: 50%;
}
.box47::before { left: 80px;}
.box47::after { right: 80px;}

/* パンチ　BOX　Ｃ */
.box48 {
 position: relative;
 margin: 2em auto;
 padding: 15px 15px 15px 35px;
 width: 90%; /* ボックス幅 */
 background-color: #F0F8FF; /* ボックス背景色 */
 color: #666; /* 文章色 */
 border: 1px solid #88b5d3; /* ボックス枠線 */
 box-shadow: 0 0 2px 1px #ccc; /* 影 */
 border-radius: 10px; /* 角の丸み */
}
.box48::before {
 position: absolute;
 content: '';
 left: 8px;
 top: 8px;
 width: 17px;
 height : 17px;
 background-color: #fff; /*穴背景色*/
 box-shadow: 0 0 8px #aaa inset; /*穴の影*/
 border: 1px solid #88b5d3; /*パンチ穴枠色*/
 border-radius: 50%;
}

/*　テープ　枠　1 */
.box49 {
 position: relative;
 margin: 3em auto;
 padding: 35px 20px 15px;
 width: 90%; /*ボックス幅*/
 color: #555555; /* 文字色 */
 background-color: #E6E6FA; /*背景色*/
 box-shadow: 0 2px 2px #ccc; /* 影 */
}
.box49::before {
 position: absolute;
 top: -1.5em;
 left: 35%;
 height: 40px;
 width: 160px; /*テープの幅*/
 content: "";
 border: 1px solid #ccc; /*枠太さ・色*/
 background-color: #FFF; /*テープ色*/
 opacity: 0.3; /*テープ透明度0～1*/
 transform: rotate( -5deg ); /*テープ角度*/
}

/*　テープ　枠　2 */
.box50 {
 position: relative;
 width: 90%;
 margin: 2.5em auto;
 padding: 35px 30px 20px;
 color: #770000;/* 文字色 */
 background-color: #e8ddbd; /*枠背景色*/
 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
}
.box50::before {
 display: block;
 position: absolute;
 content: "";
 width: 140px;
 height: 35px;
 left: 35%;
 top: -16px;
 background-color: rgba(204, 186, 136,0.3);/*テープ色*/
 box-shadow: 0 0 3px rgba(0,0,0,0.1);
 transform: rotate( -3deg ); /*テープ角度*/
}

/* 黒板風　1 */
.box51 {
 position: relative;
 margin: 2em auto;
 padding: 1em;
 width: 90%; /* ボックス幅 */
 background: #202020; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 7px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333;
}
.box51::before,
.box51::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.box51::before {
 width: 20px;
 right: 10px;
 border: solid 3px #ff42a0; /*チョーク（ピンク） */
 border-radius: 3px 2px 0 2px;
}
.box51::after {
 width: 15px; 
 right: 45px;
 border: solid 3px #fff; /*チョーク（白） */
 border-radius: 8px 5px 2px 5px;
}

/* 黒板風　2 */
.box52 {
 position: relative;
 margin: 2em auto;
 padding: 1em;
 width: 90%; /* ボックス幅 */
 background: #006633; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 8px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
.box52::before,
.box52::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.box52::before {
 width: 20px; 
 right: 10px;
 border: solid 3px #ffff00; /*チョーク（黄色）*/
 border-radius: 3px 2px 0 2px;
}
.box52::after {
 width: 15px; 
 right: 45px;
 border: solid 3px #fff; /*チョーク（白） */
 border-radius: 8px 5px 2px 5px;
}

/* 黒板風　3 */
.box53 {
 position: relative;
 margin: 2em auto;
 padding: 1em;
 width: 90%; /* ボックス幅 */
 background: #006633; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 5px solid #C0C0C0; /* 枠線 */
 border-radius: 2px; /* 角の丸み */
 box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
.box53::before,
.box53::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.box53::before {
 width: 20px;
 right: 10px;
 border: solid 3px #ff42a0; /*チョークピンク */
 border-radius: 3px 2px 0 2px;
}
.box53::after {
 width: 15px;
 right: 45px;
 border: solid 3px #fff; /*チョーク白 */
 border-radius: 8px 5px 2px 5px;
}

/* 黒板風　4 */
.box54 {
 position: relative;
 margin: 2em auto;
 padding: 1em;
 width: 90%; /* ボックス幅 */
 background: #FF69B4; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 5px solid #e6b422; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333, 0 0 2px #777 inset;
}
.box54::before,
.box54::after {
 position: absolute;
 content: '';
 bottom: 0;
 box-shadow: 0 0 3px #999;
} 
.box54::before {
 width: 18px;
 right: 12px;
 border: solid 3px #ffff00; /*チョーク（黄色） */
 border-radius: 3px 2px 0 2px;
}
.box54::after {
 width: 15px; 
 right: 45px;
 border: solid 3px #fff; /*チョーク（白） */
 border-radius: 8px 5px 2px 5px;
}

/* ホワイトボード風*/
.box55 {
 position: relative;
 margin: 2em auto;
 padding: 1em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #000000; /* 文章色 */
 border: 5px solid #C0C0C0; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.box55::before,
.box55::after {
 position: absolute;
 content: '';
 bottom: 3px;
 width: 25px; 
 border-radius: 2px;
 box-shadow: 1px 1px 3px #666;
} 
.box55::before {
 right: 55px;
 border: solid 3px #ff0000; /*飾ペン赤 */
}
.box55::after {
 right: 20px;
 border: solid 3px #333; /*飾ペン黒 */
 transform: rotate(8deg); /*飾ペン角度 */
}

/* https://maipyon.net/box-design/*/
.box56{
  margin: 1em 0;
  padding: 1em;
  background-color: #b3e5fc;
}

.box56 p{
  margin: 0;
  padding: 0;
}

.box57{
  margin: 1em 0;
  padding: 1em;
  background-color: #fce4ec;
  border-radius: 10px;
}

.box57 p{
  margin: 0;
  padding: 0;
}

.box58{
  margin: 1em 0;
  padding: 1em;
  background-color: #ffcc80;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
}

.box58 p{
  margin: 0;
  padding: 0;
}

.box59{
  margin: 1em 0;
  padding: 1em;
  background-color: #b3e5fc;
  border: solid 3px #29b6f6;
}

.box59 p{
  margin: 0;
  padding: 0;
}

.box60{
  margin: 1em 0;
  padding: 1em;
  background-color: #c5e1a5;
  border: double 5px #66bb6a;
}

.box60 p{
  margin: 0;
  padding: 0;
}

.box61{
  margin: 1em 0;
  padding: 1em;
  background-color: #fff9c4;
  border: dashed 3px #ffca28;
}

.box61 p{
  margin: 0;
  padding: 0;
}

.box62{
  margin: 1em 0;
  padding: 1em;
  background: radial-gradient(800px, #ffebee, #e57373);
}

.box62 p{
  margin: 0;
  padding: 0;
}

.box63{
  margin: 1em 10px;
  padding: 1em;
  background-color: #b3e5fc;
  border: dashed 3px #29b6f6;
  box-shadow: 0 0 0 10px #b3e5fc;
  border-radius: 5px;
}

.box63 p{
  margin: 0;
  padding: 0;
}

.box64{
  margin: 2em 25px;
  padding: 1em;
  background-color: #fff59d;
  border: dashed 3px #fdd835;
  box-shadow: 0 0 0 10px #fff59d, 0 0 0 25px #fdd835;
  border-radius: 3px;
}

.box64 p{
  margin: 0;
  padding: 0;
}

.box65{
  margin: 1em 0;
  padding: 1em;
  box-shadow: 0 0 3px 3px #b2ff59, 0 0 3px 2px #b2ff59 inset;
  border-radius: 10px;
  background: #f9fbe7;
}

.box65 p{
  margin: 0;
  padding: 0;
}

.box66{
  margin: 1em 0;
  padding: 1em;
  background-size: 20px 20px;
  border-radius: 5px;
  background-color: #f9ffff;
  background-image: linear-gradient(45deg,rgba(255,186,238,.1) 25%,transparent 25%,transparent 50%,rgba(255,186,238,.1) 50%,rgba(255,186,238,.1) 75%,transparent 75%,transparent),linear-gradient(-45deg,rgba(255,186,238,.1) 25%,transparent 25%,transparent 50%,rgba(255,186,238,.1) 50%,rgba(255,186,238,.1) 75%,transparent 75%,transparent);
  border: solid 2px #f48fb1;
}

.box66 p{
  margin: 0;
  padding: 0;
}

.box67{
  margin: 1em 0;
  padding: 1em;
  background-color: #bbdefb;
  background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  border-radius: 10px;
}

.box67 p{
  margin: 0;
  padding: 0;
}


.box68{
  margin: 1em 0;
  padding: 1em;
  border-radius: 10px/50%;
  border: solid;
  border-width: 0 3px;
  border-color: #00cc00;
}

.box68 p{
  margin: 0;
  padding: 0;
}

.box69{
  margin: 1em 0;
  padding: 1em;
  background-color: #ffffcc;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15);
}

/*これ不要？*/
.tape{
  display: block;
  background-color: #ccb;
  opacity: 0.2;
  transform: rotate(3deg);
  width: 40%;
  height: 35px;
  margin: -2em auto 0 auto;
  border-left: 3px dotted rgba(0,0,0,.1);
  border-right: 3px dotted rgba(0,0,0,.1);
}
/*---------------------------------------*/


.box69 p{
  margin: 0;
  padding: 0;
}

.box70{
  background: #f8f0d7;
  border-left: 5px dotted rgba(0,0,0,.1);
  box-shadow: 0 0 0 5 #f8f0d7;
  padding: 1em;
  margin: 1em 5px;
}

.box70 p{
  margin: 0;
  padding: 0;
}


.box71 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #ffe5ff, #ffe5ff 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    background: repeating-linear-gradient(-45deg, #ffe5ff, #ffe5ff 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    color: #4f274f;/*文字色*/
}
.box71 p {
    margin: 0; 
    padding: 0;
}

.box72 {
    padding: 1em 1.5em;
    margin: 2em 0;
   background: -webkit-repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);/*ストライプ*/
    background: repeating-linear-gradient(-45deg, #f4f9ff, #f4f9ff 3px, #eaf4ff 3px, #eaf4ff 6px);/*ストライプ*/
    color: #000000;/*文字色*/
}
.box72 p {
    margin: 0; 
    padding: 0;
}

.box73 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #ffc6c6;/*背景色*/
    box-shadow: 0 0 0 8px #ffc6c6;/*背景色外側*/
    border: 2px dashed #ffffff;/*線*/
    color: #000000;/*文字色*/
}
.box73 p {
    margin: 0; 
    padding: 0;
}

.box74 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #fff4ea;/*背景色*/
    box-shadow: 0 0 0 8px #fff4ea;/*背景色外側*/
    border: 2px dashed #ffbf7f;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #000000;/*文字色*/
}
.box74 p {
    margin: 0; 
    padding: 0;
}

.box75 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #ffffff;/*背景色*/
    color: #000000;/*文字色*/
    z-index: 1;
}
.box75::before,
.box75::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.box75::before {
    background-color: rgba(255, 255, 255, 0.2);
    left: 0;
    top: 0;
    z-index: -1;
}
.box75::after {
    background-color: #ffffc6;/*ズレている方の背景色*/
    top: 5px;
    left: 5px;
    z-index: -2;
}
.box75 p {
    margin: 0; 
    padding: 0;
}

.box76 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #ffffff;/*背景色*/
    color: #000000;/*文字色*/
    z-index: 1;
}
.box76::before,
.box76::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.box76::before {
    background-color: rgba(255, 219, 255, 0.6);
    left: 0;
    top: 0;
    z-index: -1;
}
.box76::after {
    background-color: #edffdb;/*ズレている方の背景色*/
    top: 5px;
    left: 5px;
    z-index: -2;
}
.box76 p {
    margin: 0; 
    padding: 0;
}


.box77 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background: linear-gradient(to bottom, #ffffff, #eeeeee);/*背景色*/
    background: -webkit-linear-gradient(top, #fffff, #eeeeee);/*背景色*/
    border: 1px solid #eeeeee;/*枠線*/
    border-top: 4px solid #00008b;/*上の線*/
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
    color:#000000;/*文字色*/
}
.box77 p {
    margin: 0; 
    padding: 0;
}

.box78 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#b22222;/*背景色*/
    color:#ffffff;/*文字色*/
    font-weight:bold;
}
.box78 p {
    margin: 0; 
    padding: 0;
}

.box79 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#f4f9ff;/*背景色*/
    border:1px solid #84c1ff;/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
}
.box79 p {
    margin: 0; 
    padding: 0;
}

.box80 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#fff0f5;/*背景色*/
    border:1px solid #9370db;/*線*/
    color:#000000;/*文字色*/
    border-radius: 10px;/*角の丸み*/
}
.box80 p {
    margin: 0; 
    padding: 0;
}

.box81 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#f6faee;/*背景色*/
    border-left: solid 10px #6b8e23;/*左ライン*/
    color:#000000;/*文字色*/
}
.box81 p {
    margin: 0; 
    padding: 0;
}

.box82 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#ffffe0;/*背景色*/
    border: dotted 6px #ffa500;/*線*/
    color:#000000;/*文字色*/
}
.box82 p {
    margin: 0; 
    padding: 0;
}

.box83 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#fff0f5;/*背景色*/
    border: dashed 2px #773d50;/*線*/
    color:#000000;/*文字色*/
}
.box83 p {
    margin: 0; 
    padding: 0;
}

.box84 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#b0e0e6;/*背景色*/
    color:#000000;/*文字色*/
}
.box84 p {
    margin: 0; 
    padding: 0;
}

.box85 {
    padding: 1em 1.5em;
    margin: 2em 0;
    border: double 4px #ff69b4;/*線*/
}
.box85 p {
    margin: 0; 
    padding: 0;
}

.box86 {
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 2px #000000;/*線*/
}
.box86 p {
    margin: 0; 
    padding: 0;
}


/* https://benri-no1.com/box/*/

.box87 {
  color: #ee8992;
  border: 3px solid #ffccd2;
  background: #fffafa;
  padding: 1.5em 1em;
  margin: 2em 0;
  font-weight: bold;
}

.box88 {
  padding: 0.7em;
  border: solid 2px #fcb1b1;
  border-radius: 7px;
  background: #fff6e6;
  color: #fcb1b1;
  margin: 2em 0;
  font-weight: bold;
}

.box89 {
  border: 3px solid #ffccd2;
  background-color: #fff9fc;
  background-image: radial-gradient(#fff4f9 35%, transparent 0), radial-gradient(#fff4f9 35%, transparent 0);
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
  color: #ee8992;
  padding: 1.5em 1em;
  margin: 2em 0;
  font-weight: bold;
}

.box90 {
  border: 3px solid #ffccd2;
  background-color: #fff;
  background-image: radial-gradient(#fff4f9 50%, transparent 0), radial-gradient(#fff4f9 50%, transparent 0);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
  color: #ee8992;
  padding: 1.5em 1em;
  margin: 2em 0;
  font-weight: bold;
}

.box91 {
  border: 3px solid #ffccd2;
  background-color: #ffe6ea;
  background-image: radial-gradient(#fff4f9 50%, transparent 0), radial-gradient(#fff4f9 50%, transparent 0);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
  color: #ee8992;
  padding: 1.5em 1em;
  margin: 2em 0;
  font-weight: bold;
}

.box92{
  background: repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 3px,#ffefef 3px, #ffefef 7px);
  line-height: 2em;
  border: 3px solid #ffefef;
  padding: 2em 1em 1.98em 1em;
  color: #ee8992;
  margin: 2em 0;
  font-weight: bold;
}


.box93{
  background: repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 14px,#ffefef 14px, #ffefef 20px);
  line-height: 2em;
  border: 3px solid #ffefef;
  padding: 2em 1em 1.98em 1em;
  color: #ee8992;
  margin: 2em 0;
  font-weight: bold;
}

.box94{
  background-color: #fff;
  background-image:
  linear-gradient(-45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%);
  background-size: 45px 45px;
  line-height: 2em;
  border: 3px solid #FBE1E1;
  padding: 2em 1em 1.98em 1em;
  color: #ee8992;
  margin: 2em 0;
  font-weight: bold;
}

.box95{
  background-color: #fff;
  background-image:
  linear-gradient(-45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%);
  background-size: 90px 90px;
  line-height: 2em;
  border: 3px solid #FBE1E1;
  padding: 2em 1em 1.98em 1em;
  color: #ee8992;
  margin: 2em 0;
  font-weight: bold;
}


.box96{
  background-color: #fff;
  background-image:
  linear-gradient(90deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(180deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%);
  background-size: 45px 45px;
  line-height: 2em;
  border: 3px solid #FBE1E1;
  padding: 2em 1em 1.98em 1em;
  color: #ee8992;
  margin: 2em 0;
  font-weight: bold;
}

.box97{
  background-color: #fff;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
/*  line-height: 2; 初期値*/
  line-height: 1.05;
  border: solid 2px #ee8992;
/*  padding: 2em 1em 1.98em 1em;初期値*/
  padding: 2.4em 1em 1.98em 1em;
  color: #ee8992;
  margin: 2em 0;
  font-weight: bold;
}

.box98{
border: 1px solid #000;
margin: 2em auto;
padding: 1em;
width: 100%;
background-color: #fff;
}

.box99{
margin: 2em auto;
padding: 1em;
width: 100%;
color: #000;
background-color: #f5f5f5;
border: 1px solid #ccc;
}

.box100{
padding: 1em;
margin: 2em auto;
width: 100%;
color: #808080;
background: #f08080;
}

.box101{
margin: 2em auto;
padding: 1em;
width: 100%;
border: 1px solid #a9a9a9;
background-color: #fff;
box-shadow: 1.5px 1.5px 2px #696969;
}

.box102{
padding: 10px 20px;
margin: 2em auto;
color: #000;
width: 100%;
background: #f0e68c;
border-top: solid 5px #ffa500;
border-bottom: solid 5px #ffa500;
}

.box103{
padding: 10px 20px;
margin: 2em auto;
color: #000;
width: 100%;
background: #f0e68c;
border-left: solid 8px #ffa500;
border-right: solid 8px #ffa500;
}

.box104{
padding: 1em;
margin: 2em auto;
width:100%;
border: double 5px #dc143c;
}

.box105{
padding: 1em;
margin: 2em auto;
color: #696969;
width:100%;
background: #fffafa;
border-left: double 8px #20b2aa;
border-right: double 8px #20b2aa;
}

.box106{
margin: 2em auto;
padding: 1em;
width: 100%;
background-color: #ffefd5;
box-shadow: 0 0 5px 1.5px #a9a9a9;
}

.box107{
padding: 1em;
margin: 2em auto;
width:100%;
color: #696969;
background: #ffffe0;
border-left: solid 15px #ff8c00;
}

.box108{
padding: 1em;
margin: 2em auto;
width:100%;
color: #696969;
background: #f0ffff;
border-top: solid 15px #191970;
}

.box109{
padding: 1em;
margin: 2em auto;
width:100%;
color: #696969;
background: #ffffe0;
border-top: solid 15px #ff8c00;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}

.box110{
padding: 1em;
margin: 2em auto;
color: #60688c;
width:100%;
background: #fff;
border-top: solid 5px #4682b4;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
}

.box111{
margin: 2em auto;
padding: 1em;
width: 100%;
color: #606060;
background-color: #faf0e6;
border: 2px solid #deb887;
border-radius: 10px;
}

.box112{
margin: 2em auto;
padding: 1em;
width: 100%;
color: #606060;
border: 2px solid #a3703e;
background-color: #fff;
box-shadow: -2px 5px 5px #ceb4a5;
border-radius: 15px;
}

.box113{
margin: 2em auto;
padding: 1em;
width: 100%;
background-color: #ffceb2;
color: #606060;
box-shadow: 0 0 5px 1px #b2b2b2;
border-radius: 10px;
}

.box114{
margin: 2em auto;
padding: 1em;
width: 100%;
background-color: #ffc0cb;
color: #606060;
box-shadow: 0 0 5px 1px #b2b2b2;
border-left:10px solid #fffacd;
border-radius: 0 50px 0 50px;
}
.box114　p {
padding: 15px 20px;
margin: 0;
text-align:center;
}

.box115{
padding: 1em;
margin: 2em auto;
width:100%;
color: #606060;
background: #ffbcbc;
border-bottom: solid 5px #ce3d3d;
border-radius: 10px;
}

.box116{
padding: 1em;
margin: 2em auto;
width:100%;
color: #595959;
background: #fff;
border-bottom: solid 5px #9b0000;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.box117{
margin: 2em auto;
background: #ffbaba;
border:3px solid #ff004c;
width:100%;
box-shadow:6px 5px 8px -1px #db1c1c inset;
}
.box117 p {
padding: 15px 20px;
margin: 0;
}

.box118{
margin: 2em auto;
padding: 1em;
width: 100%;
border: 3px dashed #000000;
color: #000000;
background-color: #fff;
border-radius: 1px;
}

.box119{
margin: 2em auto;
padding: 1em;
width: 100%;
border: 5px dotted #0161af;
background-color: #fff;
border-radius: 1px;
}

.box120{
padding: 1em;
margin: 2em auto;
width: 100%;
background: #ffae4c;
box-shadow: 0px 0px 0px 10px #ffae4c;
border: 2px dashed #fff;
}

.box121{
padding: 1em;
margin: 2em auto;
width: 100%;
color: #565656;
background: #99ffca;
box-shadow: 0px 0px 0px 10px #99ffca;
border: 2px dashed #009e4b;
border-radius: 5px;
}


/*--------------------------------------------------------------*/
/* ボード（タイトル付き）---------------------------------------*/
.board1 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.board1 .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;
}
.board1 p {
    margin: 0; 
    padding: 0;
}

.board2 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.board2 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.board2 p {
    margin: 0; 
    padding: 0;
}

.board3 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFC107;
}
.board3 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.board3 p {
    margin: 0; 
    padding: 0;
}

.board4 {
    margin: 2em 0;
    background: #dcefff;
}
.board4 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.board4 p {
    padding: 15px 20px;
    margin: 0;
}

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


/* タイトル付　枠　1　*/
.board6 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #555555; /* 枠線の太さ・色 */
 width: 90%;
}
.board6 .box-title{
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}

/* タイトル付　枠（影）1　*/
.board7 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #fff;
 border: 2px solid #8FBC8F; /* 枠線の太さ・色 */
 box-shadow: 2px 2px 1px #ccc;/* 影の色 */
}
.board7 .box-title {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #8FBC8F; /* タイトル文字色 */
}

/* タイトル付　枠（影）2　*/
.board8 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #fff;
 border: 2px solid #f09199; /* 枠線の太さ・色 */
 box-shadow: 0 0 5px 2px #fce2c4 inset;/* 影の色 */
}
.board8 .box-title {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color:  #fff; /* タイトル背景色 */
 color: #f09199; /* タイトル文字色 */
}

/* タイトル付　枠（影）3　*/
.board9 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #fff;
 border: 4px double #CC0033; /* 枠線の太さ・色 */
 box-shadow: 2px 2px 2px #ccc;/* 影の色 */
}
.board9 .box-title {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color:  #fff; /* タイトル背景色 */
 color: #CC0033; /* タイトル文字色 */
}

/* 角丸　影（タイトル）4 */
.board10 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 width: 90%;
 border: 2px solid #ff9ece; /* 枠線の太さ・色 */
 color: #555555; /* 文字色 */
 background-color: #fff;
 box-shadow: 2px 2px 1px #c7c7c7;/* 影の色 */
 border-radius: 8px; /* 角の丸み */
}
.board10 .box-title {
 position: absolute;
 right: 20px; /*（left）に変更すると左 */
 top: -15px;
 padding: 0 .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #ff9ece; /* タイトル色 */
 background-color: #fff;
}

/* タブ　タイトル枠　1 */
.board11 {
 position: relative;
 margin: 3em auto;
 padding: 1.2em 1em 1em;
 width: 90%;
 background-color: #f7f7f7; /* BOX背景色 */
 border: 3px double #999999; /* 枠線の太さ・色 */
}
.board11 .box-title {
 position: absolute;
 display: inline-block;
 top: -28px; /*タブ調整 */
 left: -3px; /*タブ調整 */
 padding: 0 10px;
 height: 26px;
 font-size: 18px;
 font-weight: bold;
 color: #fff; /* タイトル色 */
 background-color: #a0a0a0; /* タイトル背景色 */
 border: 1px solid #999999; /* タイトル枠線 */
 border-radius: 5px 5px 0 0;
}

/* タブ　タイトル枠　2 */
.board12 {
 position: relative;
 margin: 3em auto;
 padding: 1.2em 1em 1em;
 width: 90%;
 background-color: #fff; /*BOX背景色 */
 border: 2px solid #8d93c8; /* 枠線の太さ・色 */
 box-shadow: 2px 2px 2px #ccc; /* 影の色 */
}
.board12 .box-title {
 position: absolute;
 display: inline-block;
 top: -28px; /*タブ調整 */
 left: -2px; /*タブ調整 */
 padding: 1px 10px;
 height: 26px;
 font-weight: bold;
 color: #fff; /* タイトル色 */
 background-color: #8d93c8; /* タイトル背景色 */
 border-radius: 8px 8px 0 0;
}

/* トリプル　囲み枠 */
.board13 {
 position: relative;
 border: 1px solid #007b43; /*左枠線*/
 width: 90%;
 margin: 2em auto;
 padding: 20px 15px 15px 20px;
 z-index: 0;
}
.board13::before,
.board13::after {
 position: absolute;
 content: '';
 width: 100%;
 height: 100%;
}
.board13::before {
 border: 1px solid #3eb370; /*中枠線*/
 bottom: -4px;
 right: -4px;
 z-index: 1;
}
.board13::after {
 border: 1px solid #7ebea5; /*右枠線*/
 bottom: -7px;
 right: -7px;
 z-index: 2;
}

/* スマート　囲み枠　1 */
.board14 {
 position: relative;
 margin: 2em auto;
 padding: 2.5em 1em 1em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-color: #82ca9c; /* 枠の色 */
 border-width: 5px 1px 1px;
 background-color: #f7f7f7; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 1px 1px 3px #ccc; /* 影 */
}

.board14 .box-title {
 position: absolute;
 top: 8px;
 left: 15px;
 background-color: #f7f7f7; /* タイトル背景色 */
 color: #82ca9c; /* タイトル色 */
 font-size: 1.1em;
 font-weight: bold;
}

/* スマート　囲み枠　2 */
.board15 {
 position: relative;
 margin: 2em auto;
 padding: 3em 1em .8em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-width: 5px 0 0 0;
 border-color: #907b6e; /* 枠の色 */
 background-color: #ede4cd; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 0 0 3px #999; /* 影の色 */
}
.board15 .box-title {
 position: absolute;
 top: 8px;
 left: 15px;
 background-color: #ede4cd; /* タイトル背景色 */
 color: #907b6e; /* タイトル色 */
 font-size: 1.1em;
 font-weight: bold;
 border-style: none none double;
 border-color: #907b6e; /*タイトル下線 */
 border-width: 3px;
}

/* ふんわり　枠　3 */
.board16 {
 position: relative;
 margin: 2em auto;
 padding: 2.5em 1em .5em;
 width: 90%;
 background-color: #badcad; /* 背景色 */
 color: #555; /* 文字色 */ 
 box-shadow: 0 0 10px 10px #badcad; /* 影 */
}
.board16 .box-title {  
 position: absolute;
 left: 10px;
 top: 2px;
 padding: 0 .5em;
 font-weight: bold;
 color: #769164; /* タイトル色 */
 border-style: none none solid;
 border-color: #d6e9ca; /*タイトル下線 */
 border-width: 3px;
}

/*　テープ　枠　3 */
.board17 {
 position:relative;
 padding: 35px 20px 15px;
 margin: 2.5em auto;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #e8ddbd;
 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
}
.board17 .box-title {
 position: absolute;
 top: -15px;
 left: 30px;
 padding: 4px 20px;
 color: #555555; /*タイトル色*/
 font-weight: bold;
 background-color: rgba(255,255,255,.4);
 border-left: 2px dotted rgba(0,0,0,.1);
 border-right: 2px dotted rgba(0,0,0,.1);
 box-shadow: 0 0 5px rgba(0,0,0,0.2); 
 transform: rotate(-5deg);
}


/*　テープ　枠　4 */
.board18 {
 position:relative;
 padding: 35px 20px 20px;
 margin: 2.5em auto;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #e0ebaf; /*BOX背景色*/ 
 box-shadow: 0 2px 5px #999;
}
.board18 .box-title {
 position: absolute;
 top: -15px;
 left: 30px;
 padding: 4px 20px;
 color: #555555; /*タイトル色*/
 font-weight: bold;
 background-color: rgba(255,255,255,.1);
 border-left: 2px dotted rgba(0,0,0,.1);
 border-right: 2px dotted rgba(0,0,0,.1);
 box-shadow: 0 0 5px rgba(0,0,0,0.2); 
 transform: rotate(-3deg);
}

/* 黒板風　タイトル　1 */
.board19 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #202020; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 10px solid #8b4513; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333;
}
.board19::before,
.board19::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.board19::before {
 right: 10px;
 border: solid 3px #ff7fbf; /*チョーク（ピンク）*/
 width: 20px; 
 border-radius: 3px 2px 0 2px;
}
.board19::after {
 right: 40px;
 border: solid 3px #fff; /*チョーク（白）*/
 width: 15px; 
 border-radius: 8px 5px 2px 5px;
}
.board19 .box-title {
 position: absolute;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #ff7fbf; /* タイトル色 */
}

/* 黒板風　タイトル　2 */
.board20 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #006633; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 8px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
.board20::before,
.board20::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.board20::before {
 right: 10px;
 border: solid 3px #fff; /*チョーク（白）*/
 width: 20px; 
 border-radius: 3px 2px 0 2px;
}
.board20::after {
 right: 40px;
 border: solid 3px #ffff6b; /*チョーク（黄色）*/
 width: 15px; 
 border-radius: 8px 5px 2px 5px;
}
.board20 .box-title {
 position: absolute;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #ffff6b; /* タイトル色 */
}


/* 黒板風　タイトル　3 */
.board21 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #044072; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 10px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
.board21::before,
.board21::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.board21::before {
 right: 10px;
 border: solid 3px #ffff6b; /*チョーク（黄色）*/
 width: 20px; 
 border-radius: 3px 2px 0 2px;
}
.board21::after {
 right: 40px;
 border: solid 3px #fff; /*チョーク（白）*/
 width: 15px; 
 border-radius: 8px 5px 2px 5px;
}
.board21 .box-title {
 position: absolute;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #ffff6b; /* タイトル色 */
}

/* 黒板風　タイトル　4 */
.board22 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #8a2f2e; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 9px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
.board22::before,
.board22::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.board22::before {
 right: 10px;
 border: solid 3px #fff; /*チョーク（白）*/
 width: 20px; 
 border-radius: 3px 2px 0 2px;
}
.board22::after {
 right: 40px;
 border: solid 3px #ffff6b; /*チョーク（黄色）*/
 width: 15px; 
 border-radius: 8px 5px 2px 5px;
}
.board22 .box-title {
 position: absolute;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #ffff6b; /* タイトル色 */
}

/* 黒板風　タイトル　5 */
.board23 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #202020; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 8px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333;
}
.board23::before,
.board23::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.board23::before {
 width: 17px; 
 right: 20px;
 border: solid 3px #ffff00; /*チョーク黄 */
 border-radius: 3px 2px 0 2px;
}
.board23::after {
 width: 13px; 
 right: 55px;
 border: solid 3px #ff7fbf; /*チョークピンク */
 border-radius: 15px 10px 2px 5px;
}
.board23 .box-title {
 position: absolute;
 top: .5em;
 right: 0;
 left: 0;
 text-align: center;
 font-weight: bold;
 font-size: 1.1em;
 color: #ff7fbf; /* タイトル色 */
}

/* ホワイトボード風　タイトル　2*/
.board24 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #000000; /* 文章色 */
 border: 5px solid #c6c6c6; /* 枠線 */
 box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.board24::before,
.board24::after {
 position: absolute;
 content: '';
 bottom: 4px;
 width: 25px; 
 border-radius: 2px;
 box-shadow: 1px 1px 3px #666;
} 
.board24::before {
 right: 60px;
 border: solid 3px #333; /*飾りペン黒 */
 transform: rotate(2deg); /*飾りペン角度 */
}
.board24::after {
 right: 22px;
 border: solid 3px #ff0000; /*飾りペン赤 */
 transform: rotate(9deg); /*飾りペン角度 */
}
.board24 .box-title {
 position: absolute;
 top: .6em;
 left: 1em;
 font-weight: bold; /* 太文字 */
 font-size: 1.1em;
 color: #ff0000; /* タイトル文字色 */
}

/* ホワイトボード風　タイトル　3 */
.board25 {
 position: relative;
 margin: 2em auto;
 padding: 3em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #000000; /* 文章色 */
 border: 5px solid #c6c6c6; /* 枠線 */
 box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.board25::before,
.board25::after {
 position: absolute;
 content: '';
 bottom: 4px;
 width: 25px; 
 border-radius: 2px;
 box-shadow: 1px 1px 3px #666;
} 
.board25::before {
 right: 60px;
 border: solid 3px #333; /*飾ペン黒 */
 transform: rotate(2deg); /*飾ペン角度 */
}
.board25::after {
 right: 22px;
 border: solid 3px #ff0000; /*飾ペン赤 */
 transform: rotate(9deg); /*飾ペン角度 */
}
.board25 .box-title {
 position: absolute;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em; /* 文字サイズ */
 color: #ff0000; /* タイトル文字色 */
 border-style: none none solid;
 border-color: #ff0000; /*タイトル下線 */
 border-width: 3px;
}

/* ホワイトボード風　タイトル　4 */
.board26 {
 position: relative;
 margin: 2em auto;
 padding: 3.5em 1em 1em;
 width: 90%; /* ボックス幅 */
 background: #fff; /* ボックス背景色 */
 font-weight: bold; /* テキスト太字 */
 color: #000000; /* 文章色 */
 border: 5px solid #c6c6c6; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.board26::before,
.board26::after {
 position: absolute;
 content: '';
 width: 25px; 
 bottom: 3px;
 border-radius: 2px;
 box-shadow: 1px 1px 3px #666;
} 
.board26::before {
 right: 55px;
 border: solid 3px #ff0000; /*飾ペン赤 */
}
.board26::after {
 right: 20px;
 border: solid 3px #333; /*飾ペン黒 */
 transform: rotate(8deg); /*飾ペン角度 */
}
.board26 .box-title {
 position: absolute;
 padding: .1em .5em;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em; /* 文字サイズ */
 color: #ff4747; /* タイトル文字色 */
 background-color: #ffffff; /* ボックス背景色 */
 box-shadow: 1px 1px 3px #a0a0a0;
}

/* ホワイトボード風　タイトル　5 */
.board27 {
 position: relative;
 margin: 2em auto;
 padding: 3.5em 1em 1em;
 width: 90%; /* ボックス幅 */
 background: #fff; /* ボックス背景色 */
 font-weight: bold; /* テキスト太字 */
 color: #000000; /* 文章色 */
 border: 5px solid #e7d38c; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.board27::before,
.board27::after {
 position: absolute;
 content: '';
 width: 25px; 
 bottom: 3px;
 border-radius: 2px;
 box-shadow: 1px 1px 3px #666;
} 
.board27::before {
 right: 55px;
 border: solid 3px #0000ff; /*飾ペン青 */
}
.board27::after {
 right: 20px;
 border: solid 3px #333; /*飾ペン黒 */
 transform: rotate(8deg); /*飾ペン角度 */
}
.board27 .box-title {
 position: absolute;
 padding: .1em .5em;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em; /* 文字サイズ */
 color: #0000ff; /* タイトル文字色 */
 background-color: #ffffff; /* ボックス背景色 */
 box-shadow: 1px 1px 3px #a0a0a0;
}

/* ホワイトボード風　タイトル　6 */
.board28 {
 position: relative;
 margin: 2em auto;
 padding: 3.5em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #fffff9; /* ボックス背景色 */
 color: #000; /* 文章色 */
 border: 5px solid #e6b422; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.board28::before,
.board28::after {
 position: absolute;
 content: '';
 width: 25px; 
 bottom: 3px;
 border-radius: 2px;
 box-shadow: 1px 1px 3px #666;
} 
.board28::before {
 right: 55px;
 border: solid 3px #333333; /*飾ペン黒 */
}
.board28::after {
 right: 20px;
 border: solid 3px #ff42a0; /*飾ペンピンク */
 transform: rotate(8deg); /*飾ペン角度 */
}
.board28 .box-title {
 position: absolute;
 padding: .1em .5em;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em; /* 文字サイズ */
 color: #ff42a0; /* タイトル文字色 */
 background-color: #fffff9; /* ボックス背景色 */
 box-shadow: 1px 1px 3px #a0a0a0;
}



.board29{
  margin: 1em 0;
  padding: 1em;
  position: relative;
  border: 1px solid #555;
}

.board29 .box-title{
  position: absolute;
  top: -0.8em;
  left: 20px;
  font-weight: bold;
  font-size: 1.2em;
  background: #fff;
  padding: 0 0.5em;
}

.board29 p{
  margin: 0;
  padding: 0;
}

.board30{
  margin: 1em 0;
  padding: 1.5em 1em 1em;
  position: relative;
  border: 1px solid #81d4fa;
  background-color: #e1f5fe;
}

.board30 .box-title{
  position: absolute;
  top: -0.8em;
  left: 20px;
  font-weight: bold;
  font-size: 1.1em;
  background-color: #81d4fa;
  color: #fff;
  padding: 0 0.5em;
}

.board30 p{
  margin: 0;
  padding: 0;
}

.board31{
  margin: 1em 0;
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  letter-spacing: .3px;
}

.board31 .box-title{
  color: #fff;
  font-weight: bold;
  background-color: #2196f3;
  padding: 4px 6px;
  text-align: center;
}

.board31 p{
  margin: 0;
  padding: 1em;
}

.board32{
  margin: 2em 0 1em 0;
  background-color: #f3e5f5;
  border: 2px solid #9c27b0;
}

.board32 .box-title{
  font-size: 16px;
  position: absolute;
  margin-top: -37px;
  margin-left: -2px;
  background-color: #9c27b0;
  color: #fff;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  padding: 4px 10px;
}

.board32 p{
  margin: 0;
  padding 1em;
}

.board33{
  margin: 1em 0;
  background-color: #fffbf4;
  border: 2px solid #ee7917;
}

.board33 .box-title{
  font-size: 16px;
  position: absolute;
  margin-top: 0;
  background-color: #ee7917;
  color: #fff;
  font-weight: bold;
  border-radius: 0 0 2px 0;
  padding: 4px 6px;
}

.board33 p{
  margin: 0;
  padding: 3em 1em 1em 1em;
}

.hitokoto{
  background: rgba(215, 253, 205, 0.61);
  margin: 2em 0;
  padding: 25px;
  border-radius: 10px;
}

.hitokoto-circle1{
  font-size: 16px;
  line-height: 1.5;
  position: absolute;
  margin-top: -37px;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle1:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:before{
  content: "";
  position: absolute;
  top: 100%;
  margin-left: -12px;
  border: 5px solid transparent;
  border-top: 10px solid #4caf50;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.hitokoto-circle2{
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  margin-top: -37px;
  margin-left: 40px;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto p{
  margin: 0;
  padding: 0;
}



/*https://poppyou.com/box-design.html*/

.husen1 {
   width: 260px;/* 紙の横幅 100%にすると全幅表示に */
   padding: 15px;
   margin: 2em auto;
   background: #f7f092;/* 紙の色 */
   color: #000;/* 文字色 */
   box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(2deg);
   word-break: break-all;
}
.husen1 p {
    margin: 0; 
    padding: 0;
    font-size: 0.9em;
}
.husen1_tape {
    width: 50%;
    height: 35px;
    margin: -25px auto 0;
    background: #989898;
    transform: rotate(-3deg);
    opacity: 0.1;
}
.husen1 .box-title {
    text-align: center;
    font-size: 1.3em!important;
    margin-top: 10px!important;
}
.husen1_subtitle {
    text-align: center;
    font-size: 0.7em!important;
    margin-bottom: 1em!important;
}

.husen2 {
   width: 260px;/* 紙の横幅 100%にすると全幅表示に */
   padding: 15px;
   margin: 2em auto;
   background: #fbc7f5;/* 紙の色 */
   color: #000;/* 文字色 */
   box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(2deg);
   word-break: break-all;
}
.husen2 p {
    margin: 0; 
    padding: 0;
    font-size: 0.9em;
}
.husen2_tape {
    width: 50%;
    height: 35px;
    margin: -25px auto 0;
    background: rgba(251, 234, 144, 0.5);/* テープの色 */
    transform: rotate(-3deg);
    opacity: 0.9;
}
.husen2 .box-title {
    text-align: center;
    font-size: 1.3em!important;
    margin-top: 10px!important;
}
.husen2_subtitle {
    text-align: center;
    font-size: 0.7em!important;
    margin-bottom: 1em!important;
}


.board34 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 3px #c71585;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #000000;/*文字色*/
}
.board34 .box-title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 1.3em;/*タイトル文字サイズ*/
    background: #ffffff;/*タイトル文字背景色*/
    color: #c71585;/*タイトル文字色*/
    font-weight: bold;
}
.board34 p {
    margin: 0; 
    padding: 0;
}

.board35 {
    margin-top: 0;
    padding: 1em 1.5em;
    background: #fff2e4;/*背景色*/
    color: #000000;/*文字色*/
}
.board35 .box-title { 
    padding: 0.5em 0.5em 0.4em;
    text-align: center;
    font-size: 1.3em;/*タイトル文字サイズ*/
    background: #ff9b38;/*タイトル文字背景色*/
    border-bottom: 3px solid #ff7f00;/*タイトル下線*/
    color: #ffffff;/*タイトル文字色*/
    font-weight: bold;
    letter-spacing: 0.05em;
}

/*これ不要？*/
.box-title p {
    margin-bottom: 0;
}
/*----------------*/

.point {
  margin: 3em 0;
  border: solid 2px #ee8992;
  padding: 0.3em 0.5em;
  position: relative;
  color: #ee8992;
  font-weight: bold;
}
.point:after {
  background: #ee8992;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 10px 0 10px;
  content: "POINT";
  letter-spacing: 0.1em;
}

.board36 {
  background-color: #fff;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  border: solid 2px #ee8992;
  padding: 22px 8px 22px 8px;
  color: #ee8992;
  margin: 2em 0;
  font-weight: bold;
}
.board36 .box-title {
  font-size: 1.2em;
  background: #ee8992;
  padding: 0.6em;
  margin: -22px -8px 22px -8px;
  text-align: center;
  color: #FFF;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.board36 p {
  padding: 0;
  margin: 0;
}

.board37 {
  position: relative;
  margin: 3em 0 1em 0;
  border: solid 2px #ee8992;
  padding: 12px 6px 12px 10px;
  color: #ee8992;
  font-weight: bold;
}
.board37 .box-title {
  position: absolute;
  display: inline-block;
  padding: 1px 10px 0 10px;
  background: #ee8992;
  color: #fff;
  letter-spacing: 0.1em;
  margin: -44px 0 0 -12px;
}
.board37 p {
  padding: 0;
  margin: 0;
}

.board38 {
  border: solid 2px #ee8992;
  margin: 3em 0 1em 0;
  border-radius: 6px;
  background: #fff6e6;
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board38 .box-title {
  font-size: 1.15em;
  background: #ee8992;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: -22px -8px 22px -8px;
}
.board38 p {
  margin: 0;
  padding: 0;
}

.board39 {
  position: relative;
  border: solid 2px #ee8992;
  margin: 3em 0 1em 0;
  border-radius: 6px;
  background: #fff6e6;
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board39 .box-title {
  font-size: 1.15em;
  background: #ee8992;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: -22px -8px 22px -8px;
}
.board39:after {
  position: absolute;
  font-family: FontAwesome;
  content: "\f004";
  right : 20px;
  bottom : 18px;
  color: #ee8992;
  font-size: 1.3em;
}
.board39 p {
  margin: 0;
  padding: 0;
}


.board40 {
  border: solid 2px #ffccd5;
  margin: 3em 0 1em 0;
  border-radius: 6px;
  background: #fff6e6;
  padding: 22px 8px 22px 8px;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board40 .box-title {
  border-bottom: solid 2px #ffccd5;
  font-size: 1.15em;
  background-color: #ffe6ea;
  background-image: radial-gradient(#fff4f9 24%, transparent 0), radial-gradient(#fff4f9 24%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  color: #ee8992;
  padding: 4px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: -22px -8px 22px -8px;
  border-radius: 6px 6px 0 0;   
}
.board40 p {
  margin: 0;
  padding: 0;
}

.board41 {
  border: solid 2px #ffccd5;
  margin: 3em 0 1em 0;
  border-radius: 6px;
  background: #fff6e6;
  padding: 22px 8px 22px 8px;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board41 .box-title {
  border-bottom: solid 2px #ffccd5;
  font-size: 1.15em;
  background: repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 3px,#ffe5e5 3px, #ffe5e5 7px);
  color: #ee8992;
  padding: 4px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: -22px -8px 22px -8px;
  border-radius: 6px 6px 0 0;
}
.board41 p {
  margin: 0;
  padding: 0;
}

.board42 {
  border: solid 2px #ffccd5;
  margin: 3em 0 1em 0;
  border-radius: 6px;
  background: #fff6e6;
  padding: 22px 8px 22px 8px;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board42 .box-title {
  border-bottom: solid 2px #ffccd5;
  font-size: 1.15em;
  background-color: #fff4f4;
  background-image:
  linear-gradient(-45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%);
  background-size: 35px 35px;
  color: #ee8992;
  padding: 4px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: -22px -8px 22px -8px;
  border-radius: 6px 6px 0 0;
}
.board42 p {
  margin: 0;
  padding: 0;
}

.board43 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board43 .box-title {
  font-size: 1.15em;
  padding: 4px 0 4px 16px;
  background: #ee8992;
  color: #fff6e6;
  font-weight:bold;
  margin: -22px -8px 22px -8px;
}
.board43 p {
  margin: 0;
  padding: 0;
}

.board44 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board44 .box-title {
  font-size: 1.15em;
  padding: 4px 0 4px 16px;
  background-color: #ffe6ea; /* 背景色 */
  background-image: radial-gradient(#fff4f9 24%, transparent 0), radial-gradient(#fff4f9 24%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  color: #ee8992;
  font-weight:bold;
  margin: -22px -8px 22px -8px;
}
.board44 p {
  margin: 0;
  padding: 0;
}

.board45 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board45 .box-title {
  font-size: 1.15em;
  padding: 4px 0 4px 16px;
  background: repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 3px,#ffe5e5 3px, #ffe5e5 7px);
  color: #ee8992;
  font-weight:bold;
  margin: -22px -8px 22px -8px;
}
.board45 p {
  margin: 0;
  padding: 0;
}

.board46 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board46 .box-title {
  font-size: 1.15em;
  padding: 4px 0 4px 16px;
  background-color: #fff4f4;
  background-image:
  linear-gradient(-45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%);
  background-size: 35px 35px;
  color: #ee8992;
  font-weight:bold;
  margin: -22px -8px 22px -8px;
}
.board46 p {
  margin: 0;
  padding: 0;
}

.board47 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board47 .box-title {
  background: #fff6e6;
  font-size: 1.2em;
  padding: 7px 0 0 16px;
  margin: -16px -8px 16px -8px;
  color: #ee8992;
  font-weight:bold;
}
.board47:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 30%;
  height: 35px;
  opacity: 0.3;
  margin: -35px auto 10px 35%;
  background: #db7093;
  transform: rotate(-2deg);
  left: 10px;
  right: 10px;
}
.board47 p {
  margin: 0;
  padding: 0;
}

.board48 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board48 .box-title {
  background: #fff6e6;
  font-size: 1.2em;
  padding: 7px 0 0 16px;
  margin: -16px -8px 16px -8px;
  color: #ee8992;
  font-weight:bold;
}
.board48:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 30%;
  height: 35px;
  opacity: 0.7;
  margin: -35px auto 10px 35%;
  background-color: #ff99ac; /* 背景色 */
  background-image: radial-gradient(#fff 24%, transparent 0), radial-gradient(#fff 24%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  transform: rotate(-2deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.board48 p {
  margin: 0;
  padding: 0;
}

.board49 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board49 .box-title {
  background: #fff6e6;
  font-size: 1.2em;
  padding: 7px 0 0 16px;
  margin: -16px -8px 16px -8px;
  color: #ee8992;
  font-weight:bold;
}
.board49:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 30%;
  height: 35px;
  opacity: 0.9;
  margin: -35px auto 10px 35%;
  background: repeating-linear-gradient(-45deg, #ffefef, #ffefef 2px,#ffd1d1 3px, #ffd1d1 7px);
  transform: rotate(-2deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.board49 p {
  margin: 0;
  padding: 0;
}

.board50 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board50 .box-title {
  background: #fff6e6;
  font-size: 1.2em;
  padding: 7px 0 0 16px;
  margin: -16px -8px 16px -8px;
  color: #ee8992;
  font-weight:bold;
}
.boxmi36:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 30%;
  height: 35px;
  opacity: 0.8;
  margin: -35px auto 10px 35%;
  background-color: #ffeaea;
  background-image:
  linear-gradient(-45deg, rgba(255,188,188,.5) 25%, transparent 25%, transparent 50%, rgba(255,188,188,.5) 50%, rgba(255,188,188,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,188,188,.5) 25%, transparent 25%, transparent 50%, rgba(255,188,188,.5) 50%, rgba(255,188,188,.5) 75%, transparent 75%, transparent 100%);
  background-size: 35px 35px;
  transform: rotate(-2deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.board50 p {
  margin: 0;
  padding: 0;
}

.board51 {
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board51 .box-title {
  background: #fff6e6;
  position: relative;
  font-size: 1.2em;
  padding: 8px 4px 2px 4px;
  color: #ee8992;
  font-weight:bold;
  text-align: center;
  margin: -16px -8px 16px -8px;
}
.board51 .box-title:before {
  position: absolute;
  content: "";
  top: 25px;
  width: 10%;
  height: 35px;
  opacity: 0.3;
  margin: -40px auto 10px -22px;
  background: #db7093;
  transform: rotate(1deg);
  left: 10px;
  right: 10px;
}
.board51 .box-title:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 11%;
  height: 35px;
  opacity: 0.3;
  margin: -40px -22px 10px auto;
  background: #db7093;
  transform: rotate(3deg);
  left: 10px;
  right: 10px;
}
.board51 p {
  margin: 0;
  padding: 0;
}

.board52 {
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board52 .box-title {
  background: #fff6e6;
  position: relative;
  font-size: 1.2em;
  padding: 8px 4px 2px 4px;
  color: #ee8992;
  font-weight:bold;
  text-align: center;
  margin: -16px -8px 16px -8px;
}
.board52 .box-title:before {
  position: absolute;
  content: "";
  top: 25px;
  width: 10%;
  height: 35px;
  opacity: 0.7;
  margin: -40px auto 10px -22px;
  background-color: #ff99ac; /* 背景色 */
  background-image: radial-gradient(#fff 24%, transparent 0), radial-gradient(#fff 24%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  transform: rotate(3deg);
  transform: rotate(1deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.board52 .box-title:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 11%;
  height: 35px;
  opacity: 0.7;
  margin: -40px -22px 10px auto;
  background-color: #ff99ac; /* 背景色 */
  background-image: radial-gradient(#fff 24%, transparent 0), radial-gradient(#fff 24%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  transform: rotate(3deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.board52 p {
  margin: 0;
  padding: 0;
}

.board53 {
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board53 .box-title {
  background: #fff6e6;
  position: relative;
  font-size: 1.2em;
  padding: 8px 4px 2px 4px;
  color: #ee8992;
  font-weight:bold;
  text-align: center;
  margin: -16px -8px 16px -8px;
}
.board53 .box-title:before {
  position: absolute;
  content: "";
  top: 25px;
  width: 10%;
  height: 35px;
  opacity: 0.9;
  margin: -40px auto 10px -22px;
  background: repeating-linear-gradient(-45deg, #ffefef, #ffefef 2px,#ffd1d1 3px, #ffd1d1 7px);
  transform: rotate(3deg);
  transform: rotate(1deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.board53 .box-title:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 11%;
  height: 35px;
  opacity: 0.9;
  margin: -40px -22px 10px auto;
  background: repeating-linear-gradient(-45deg, #ffefef, #ffefef 2px,#ffd1d1 3px, #ffd1d1 7px);
  transform: rotate(3deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.board53 p {
  margin: 0;
  padding: 0;
}

.board54 {
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board54 .box-title {
  background: #fff6e6;
  position: relative;
  font-size: 1.2em;
  padding: 8px 4px 2px 4px;
  color: #ee8992;
  font-weight:bold;
  text-align: center;
  margin: -16px -8px 16px -8px;
}
.board54 .box-title:before {
  position: absolute;
  content: "";
  top: 25px;
  width: 10%;
  height: 35px;
  opacity: 0.8;
  margin: -40px auto 10px -22px;
  background-color: #ffeaea;
  background-image:
  linear-gradient(-45deg, rgba(255,188,188,.5) 25%, transparent 25%, transparent 50%, rgba(255,188,188,.5) 50%, rgba(255,188,188,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,188,188,.5) 25%, transparent 25%, transparent 50%, rgba(255,188,188,.5) 50%, rgba(255,188,188,.5) 75%, transparent 75%, transparent 100%);
  background-size: 35px 35px;
  transform: rotate(3deg);
  transform: rotate(1deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.board54 .box-title:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 11%;
  height: 35px;
  opacity: 0.8;
  margin: -40px -22px 10px auto;
  background-color: #ffeaea;
  background-image:
  linear-gradient(-45deg, rgba(255,188,188,.5) 25%, transparent 25%, transparent 50%, rgba(255,188,188,.5) 50%, rgba(255,188,188,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,188,188,.5) 25%, transparent 25%, transparent 50%, rgba(255,188,188,.5) 50%, rgba(255,188,188,.5) 75%, transparent 75%, transparent 100%);
  background-size: 35px 35px;
  transform: rotate(3deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.board54 p {
  margin: 0;
  padding: 0;
}

.board55 {
  margin: 3em 0 1em 0;
  border-radius: 8px;
  box-shadow: 0 0 0 10px #fff6e6;
  padding: 20px 20px 20px 20px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.board55 .box-title {
  background: #fff6e6;
  border-radius: 8px 8px 0 0;
  margin: -20px -20px 5px -20px;
  font-size: 1.3em;
  padding: 10px 0 10px 0;
  color: #ee8992;
  font-weight:bold;
  text-align: center;
}
.board55 p {
  margin: 0;
  padding: 0;
}


.board56 {
  margin: 3em 0 1em 0;
  border: solid 2px #ffc3c3;
  border-radius: 8px;
  padding: 20px 20px 20px 20px;
  font-weight: bold;
  color: #ee8992;
  background-color: #fff9fc;
  background-image: radial-gradient(#fff4f9 35%, transparent 0), radial-gradient(#fff4f9 35%, transparent 0);
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
}
.board56 .box-title {

  border-radius: 8px 8px 0 0;
  margin: -20px -20px 5px -20px;
  font-size: 1.3em;
  padding: 10px 0 10px 0;
  color: #ee8992;
  font-weight:bold;
  text-align: center;
}
.board56 p {
  margin: 0;
  padding: 0;
}

/*必要？*/
.sen23 {
  background-image:
  linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 100% 2em;
  line-height: 2;
    padding: 4px 10px 22px 10px;
}
/*--------------------------------------*/

/* https://eblogate.net/css-flame-sample*/
.board57 {
position: relative;
margin: 2em auto;
width: 100%;
padding: 1em;
border: 3px solid #b20023;
border-radius: 8px;
}
.board57 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 15px;
padding: 0 10px;
line-height: 1;
font-size: 18px;
background: #FFF;
color: #b20023;
font-weight: bold;
}
.board57 p {
padding: 15px 20px;
margin: 0;
}

.board58 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
border: solid 3px #4a41ad;
}
.board58 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #4a41ad;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.board58 p {
padding: 15px 20px;
margin: 0;
}

.board59 {
position: relative;
margin: 2em auto;
padding: 1.2em;
width: 100%;
color: #555555;
background-color: #fff;
border: 2px solid #8FBC8F;
box-shadow: 2px 2px 1px #ccc;
}
.board59 .box-title{
position: absolute;
padding: 0 .5em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #8FBC8F;
}
.board59 p {
padding: 15px 20px;
margin: 0;
}

.board60 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
color: #555555;
background-color: #fff;
border: 3px solid #dc143c;
box-shadow: 0 0 5px 2px #ffcccc inset;
}
.board60 .box-title {
position: absolute;
padding: 0 .5em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #dc143c;
}
.board60 p {
padding: 15px 20px;
margin: 0;
}

.board61 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
color: #686868;
background-color: #fff;
border: 4px double #ef8b00;
box-shadow: 2px 2px 2px #ccc;
}
.board61 .box-title {
position: absolute;
padding: 0 1em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #ef8b00;
}
.board61 p {
padding: 15px 20px;
margin: 0;
}

.board62 {
position: relative;
margin: 2em auto;
width:100%;
padding: 25px 10px 7px;
border: 2px solid #00419e;
}
.board62 .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
font-size:14px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
background: #00419e;
color: #ffffff;
font-weight: bold;
}
.board62 p {
padding: 15px 20px;
margin: 0;
}

.board63 {
margin: 2em 0;
background: #ffdddd;
}
.board63 .box-title {
font-size: 1.2em;
background: #a80000;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.board63 p {
padding: 15px 20px;
margin: 0;
}

.board64 {
margin: 2em auto;
background: #e5f8ff;
width:100%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.board64 .box-title {
font-size: 1.2em;
background: #5e5e5e;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.1em;
}
.board64 p {
padding: 15px 20px;
margin: 0;
}

.board65 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
color: #686868;
background-color: #fff;
border: 4px double #20b297;
box-shadow: 2px 2px 2px #ccc;
}
.board65 .box-title {
position: absolute;
display: block;
text-align:center;
top: -15px;
font-weight: bold;
width: 50%;
background-color: #20b297;
color: #fff;
}
.board65 p {
margin: 0;
}