.clipL{
   margin: 2em auto;
   position:relative;
   padding:20px 20px 20px 45px;
   box-shadow:4px 4px 4px lightgray;
   width: 90%; /* ボックス幅 */
}

.clipLB{
   background-color:mediumblue;
   color:white;
}
.clipLBl{
   background-color:ghostwhite;
   color:black;
}
.clipLP{
   background-color:mediumvioletred;
   color:white;
}
.clipLPl{
   background-color:lavenderblush;
   color:black;
}
.clipLG{
   background-color:darkgreen;
   color:white;
}
.clipLGl{
   background-color:honeydew;
   color:black;
}
.clipLY{
   background-color:peru;
   color:white;
}
.clipLYl{
   background-color:lightyellow;
   color:black;
}
.clipLV{
   background-color:blueviolet;
   color:white;
}
.clipL::before{
   position:absolute;
   content:'';
   top:-15px;
   left:10px;
   height:50px;
   width:15px;
   border:3px solid gold;/*クリップの色*/
   border-radius:12px;
   box-shadow:1px 1px 2px #777;
   transform:rotate(10deg);
   z-index:1
}

.clipL::after{
   position:absolute;
   content:'';
   top:0;
   width:10px;
   left:20px;
   border:solid 5px;
   z-index:2
}
.clipLB::after{
   border-color:mediumblue;
}
.clipLBl::after{
   border-color:ghostwhite;
}
.clipLP::after{
   border-color: mediumvioletred;
}
.clipLPl::after{
   border-color: lavenderblush;
}
.clipLG::after{
   border-color: darkgreen;
}
.clipLGl::after{
   border-color: honeydew;
}
.clipLY::after{
   border-color: peru;
}
.clipLYl::after{
   border-color: lightyellow;
}
.clipLV::after{
   border-color: blueviolet;
}

.clipR{
   position: relative;
   margin: 1em auto;
   padding: 15px 35px 15px 25px;
   width: 90%; /* ボックス幅 */
   color: #000; /* 文章色 */
   box-shadow: 4px 4px 1px #dfdfdf; /* 影の色 */
}
.clipRB {
   background-color: lavender; /* ボックス背景色 */
}
.clipRP{
   background-color: #FFE4E1; /* ボックス背景色 */
}
.clipRY{
   background-color: lemonchiffon; /* ボックス背景色 */
}
.clipRG {
   background-color: #99cccc; /* ボックス背景色 */
}
.clipRBl {
   background-color: #e0efff; /* ボックス背景色 */

}
.clipRPl{
   background-color: #fff4f9; /* ボックス背景色 */
}
.clipRYl{
   background-color: ivory; /* ボックス背景色 */
}
.clipRGl {
   background-color: mintcream; /* ボックス背景色 */
}
.clipR::before{
   position: absolute;
   content: '';
   top: -15px;
   right: 10px;
   height: 55px;
   width: 15px;
   border: 3px solid gold; /*クリップ色 */
   background-color: none;
   border-radius: 12px;
   box-shadow: 1px 1px 2px #ccc; /*クリップ影*/
   transform: rotate(-10deg);
   z-index: 1;
}
.clipR::after{
   position: absolute;
   content: '';
   top: 0px;
   width: 10px; 
   right: 20px;
   border: solid 5px; 
   z-index: 2;
}
.clipRB::after{
   border-color: lavender; /*背景色と同じ色に！*/
}
.clipRP::after{
   border-color: #FFE4E1; /*背景色と同じ色に！*/
}
.clipRY::after {
   border-color: lemonchiffon; /*背景色と同じ色に！*/
}
.clipRG::after {
   border: solid 5px #99cccc; /*背景色と同じ色に！*/
}
.clipRBl::after{
   border-color: #e0efff; /*背景色と同じ色に！*/
}
.clipRPl::after{
   border-color:  #fff4f9; /*背景色と同じ色に！*/
}
.clipRYl::after {
   border-color: ivory; /*背景色と同じ色に！*/
}
.clipRGl::after {
   border: solid 5px mintcream; /*背景色と同じ色に！*/
}
/* ドット地のタイトル*/
.dotBoxP2, .dotBoxB2, .dotBoxG2, .dotBoxY2{
   border-radius: 5px;
   margin: 20px 5px; /* 外側の余白 上下・左右 */
   padding: 25px 20px 10px 20px; /* 内側の余白 上・右・下・左 */
   position: relative;
   z-index: 0;
}
.dotBoxP2{
   background-color: #ffd5ea;  /* 背景 */
}
.dotBoxB2{
   background-color: #e6e6fa;  /* 背景 */
}
.dotBoxG2{
   background-color: #aad5aa;  /* 背景 */
}
.dotBoxY2{
   background-color: #e2e272;  /* 背景 */
}
.dotBoxP2:before, .dotBoxB2:before, .dotBoxG2:before, .dotBoxY2:before{
   border-radius: 5px;
   content: '';
   display: block;
   margin: 4px;
   position: absolute;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   z-index: -1;
}
.dotBoxP2:before{
   border: 1px solid #fff; /* 枠線 */
}
.dotBoxB2:before{
   border: 1px solid #fff; /* 枠線 */
}
.dotBoxG2:before{
   border: 1px solid #fff; /* 枠線 */
}
.dotBoxY2:before{
   border: 1px solid #fff; /* 枠線 */
}
.dotBoxP2-title, .dotBoxB2-title, .dotBoxG2-title, .dotBoxY2-title{
   background-position: 0 0, 8px 8px;  /* 水玉の距離 */
   background-size: 15px 15px; /* 水玉の大きさ */
   border-left: 2px dotted rgba(0,0,0,0.1);
   border-right: 2px dotted rgba(0,0,0,0.1);
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
   content: '用語を覚える';
   font-weight:bold;
   display: block;
   padding: 5px 20px;  
   text-align: center;
   position: absolute;
   top: -10px;
   left: 20px;
   transform: rotate(-0deg);
   -moz-transform: rotate(-0deg);
   -webkit-transform: rotate(-0deg);
   -o-transform: rotate(-0deg);
}
.dotBoxP2-title{
   background-color: rgba(255,170,213,0.9);  /* マスキングテープ背景 */
   background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
}
.dotBoxB2-title{
   background-color: rgba(170,170,255,0.9);  /* マスキングテープ背景 */
   background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
}
.dotBoxG2-title{
   background-color: rgba(149,234,191,0.9);  /* マスキングテープ背景 */
   background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
}
.dotBoxY2-title{
   background-color: rgba(255,213,170,0.9);  /* マスキングテープ背景 */
   background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
}

/*2重囲み枠のBOX */
.dframeP2, .dframeB2, .dframeG2, .dframeY2{
   margin: 1em 0;
   background: none;
   border: 2px solid;   /* 線の太さ・種類 */
   margin: 15px 10px; /* 外側の余白 上下・左右 */
   padding: 20px; /* 内側の余白 */
   position: relative;
}
.dframeP2{
   border-color: #ff0000;   /* 線の色 */
}
.dframeB2{
   border-color: #0000cd;   /* 線の色 */
}
.dframeG2{
   border-color: green;   /* 線の色 */
}
.dframeY2{
   border-color: orange;   /* 線の色 */
}
.dframeP2:after, .dframeB2:after, .dframeG2:after, .dframeY2:after{
   background: none;
   content: '';
   position: absolute;
   top: 3px;
   left: 3px;
   width: 100%;
   height: 100%;
   z-index: 2;
   border: 2px solid;   /* 線の太さ・種類 */
}
.dframeP2:after{
   border-color: #ff0000;   /* 線の色 */
}
.dframeB2:after{
   border-color: #0000cd;   /* 線の色 */
}
.dframeG2:after{
   border-color: green;   /* 線の色 */
}
.dframeY2:after{
   border-color: orange;   /* 線の色 */
}
.dframeP2-title, .dframeB2-title, .dframeG2-title, .dframeY2-title{
  position: absolute;
  top: -0.5em;
  left: 30px;
  font-weight: bold;
  font-size: 110%;
  background: #fff;
  padding: 0 0.5em;
  z-index: 4;
}

.dframeP2 p, .dframeB2 p, .dframeG2 p, .dframeY2 p{
  margin: 0;
  padding: 0;
}

/* 3重囲み枠のBOX */
.tframe {
 position: relative;
 border: 1px solid #007b43; /*左枠線*/
 width: 90%;
 margin: 2em auto;
 padding: 20px 15px 15px 20px;
 z-index: 0;
}
.tframe::before,
.tframe::after {
 position: absolute;
 content: '';
 width: 100%;
 height: 100%;
}
.tframe::before {
 border: 1px solid #3eb370; /*中枠線*/
 bottom: -4px;
 right: -4px;
 z-index: 1;
}
.tframe::after {
 border: 1px solid #7ebea5; /*右枠線*/
 bottom: -7px;
 right: -7px;
 z-index: 2;
}
.tframe-titleL {
  position: absolute;
  padding: 0 .5em;
  left: 30px;
  top: -0.5em;
  font-size:100%;
  font-weight: bold;
  background-color: #fff;
  z-index:3;
}
.tframe-titleLU {
  position: absolute;
  padding: 0 .5em;
  left: 30px;
  bottom: -1em;
  background-color: #fff;
  z-index:3;
}
.tframe-titleR {
  position: absolute;
  padding: 0 .5em;
  right: 30px;
  top: -0.5em;
  font-size:100%;
  font-weight: bold;
  background-color: #fff;
  z-index:3;
}
.tframe-titleRU {
  position: absolute;
  padding: 0 .5em;
  right: 30px;
  bottom: -1em;
  background-color: #fff; /* タイトル背景色 */
  z-index:3;
}

/* 手書き風ボックス */
.tegakiB {
  margin: 2em auto; 
  padding: 1em 1.5em;
  widt.tegakiB-titleL {
  position: absolute;
  padding: 0 .5em;
  left: 20px;
  top: -0.8em;
  font-size:110%;
  font-weight: bold;
  background-color: #fff; /* タイトル背景色 */
}h: 90%; /*幅の調節*/
  color: #000; /* 文字色 */
  background-color: #fff; /* 背景色 */
  border: 4px solid; /*線の太さ*/
  border-radius: 3em .8em 3em .7em/.9em 2em .8em 3em;
  position:relative;
}
.tegakiB-titleL {
  position: absolute;
  padding: 0 .5em;
  left: 20px;
  top: -0.8em;
  font-size:110%;
  font-weight: bold;
  background-color: #fff; /* タイトル背景色 */
}
.tegakiB-titleR {
  position: absolute;
  padding: 0 .5em;
  right: 20px;
  top: -0.8em;
  font-size:110%;
  font-weight: bold;
  color: #000;
  background-color: #fff; /* タイトル背景色 */
}
.tegakiBP-title {
  color: #ff8ec6 /* タイトル文字色 */
}
.tegakiBP {
  border-color:#ff8ec6; /*ピンク線*/
}
.tegakiBP-title {
  color: #ff8ec6 /* タイトル文字色 */
}
.tegakiBB {
  border-color:#8ec6ff; /*青線*/
}
.tegakiBB-title {
  color: #8ec6ff /* タイトル文字色 */
}
.tegakiBG {
  border-color:#89ff89; /*緑線*/
}
.tegakiBG-title {
  color: #89ff89 /* タイトル文字色 */
}
.tegakiBO {
  border-color:#ffc68e; /*オレンジ線*/
}
.tegakiBO-title {
  color: #ffc68e /* タイトル文字色 */
}
/* タイトル付　枠（影）1　*/
.kakomi-box12 {
 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;/* 影の色 */
}
.title-box12 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #8FBC8F; /* タイトル文字色 */
}
