.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;
  /* タイトル文字色 */
}