/************************************************
　　おしゃれCSS                      
*************************************************/

/************************************************
【ＢＯＸ　ラベルを付けたようなデザイン】
box27

<div class="box_label">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>
*************************************************/

.box_label {
    position: relative;
    margin: 0.5em 5px 5px 5px;			/* 上・右・下・左 */
    padding: 0.5em 1em;
    border: solid 3px #319cff;
/*  border: solid 3px #62c1ce; */

}
.box_label .box-title {
    position: absolute;
    display: inline-block;
    top: -45px;
    left: -3px;
    padding: 10px 15px;
    height: 25px;
    line-height: 25px;
/*  font-size: 22px; */
    background: #319cff;
/*  background: #62c1ce; */

    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_label p {
    margin: 0; 
    padding: 0;
}




/**************************************
【ＢＯＸ　丸枠のノート的なデザイン　枠にタイトル】
box26

<div class="box_maru">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>
***************************************/

.box_maru {
    position: relative;
    padding: 0.5em 1em;
/*  border: solid 3px #95ccff; */
    border: solid 3px #319cff;
    border-radius: 8px;
    margin: 0.5em 5px 5px 5px;			/* 上・右・下・左 */

}
.box_maru .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
/*  font-size: 19px; */
    background: #FFF;
/*  color: #95ccff; */
    color: #319cff;
    font-weight: bold;
}
.box_maru p {
    margin: 0; 
    padding: 0;
}


/**************************************
【ＢＯＸ　角丸・中は塗りつぶしなし】

<div class="box1">
    <p>ここに文章</p>
</div>
***************************************/

.box1 {
    padding: 0.5em 1em;
    margin: 1em 0; 

/*  font-weight: bold; */
    border: solid 3px #319cff;

	overflow-x: hidden;	/* 水平スクロールバー非表示 */

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



/**************************************
【ＢＯＸ　角丸・中は塗りつぶしなし】
スクロールバーあり・height=300

<div class="box1s">
    <p>ここに文章</p>
</div>
***************************************/

.box1s {

/*  padding: 0.5em 1em; */
    padding: 0.5em 1em;

    margin: 1em 0;

/*  font-weight: bold; */
    border: solid 3px #319cff;

	overflow: auto; 
  	height: 300px; 

	overflow-x: hidden;	/* 水平スクロールバー非表示 */

}

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

/**************************************
【ＢＯＸ　吹き出し　濃反転色・文字白】

box24

<div class="box_fukidashi">
    <p>ここに文章</p>
</div>
***************************************/

.box_fukidashi {
    position: relative;
    padding: 0.5em 0.8em;
    margin: 2em 0;
    background: #319cff;
    color: #fff;
    font-weight: bold;
}
.box_fukidashi:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #319cff;
    width: 0;
    height: 0;
}
.box_fukidashi p {
    margin: 0; 
    padding: 0;
}


/**************************************
【ＢＯＸ　吹き出し　薄青の背景・文字青】
box24

<div class="box_fukidashi_c">
    <p>ここに文章</p>
</div>
***************************************/

.box_fukidashi_c {

	margin-left: 20px;  
	margin-right: 20px; 

    background: #e6f4ff;
    color: #319cff;

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

    font-size: 18px;

}



/**************************************
【ＢＯＸ　吹き出し　濃反転色・文字白・角丸】

box24

<div class="box_fukidashi_maru">
    <p>ここに文章</p>
</div>
***************************************/

.box_fukidashi_maru {

/*    margin: 2em 0; */
	margin-left: 20px;  
	margin-right: 20px; 

    background: #319cff;
    color: #fff;

    position: relative;
    padding: 0.5em 1.0em;

    font-weight: bold;
    border-radius: 15px;
}
.box_fukidashi_maru:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #319cff;
    width: 0;
    height: 0;
}
.box_fukidashi_maru p {
    margin: 0; 
    padding: 0;
}



/**************************************
【box_fukidashi_image_left　考え事風吹き出し】
<div class="box_fukidashi_image_left">
    <p>ここに文章</p>
</div>
***************************************/
.box_fukidashi_image_left {

    background: #C1E1FF;	/*�F*/

    position: relative;
    margin: 1em 60px 2em 80px;
/*    margin: 2em 0 2em 40px; */
/*    margin: 2em 6em 2em 8em; */
    padding: 10px 20px;
    border-radius: 30px;
}
.box_fukidashi_image_left:before{

    color: #C1E1FF;			/*�F*/

	font-family: FontAwesome;
/*  content: "\f111";  */
    content: "●";
    position: absolute;
    font-size: 15px;
    left: -40px;
    bottom: 40px;
}
.box_fukidashi_image_left:after{
    color: #C1E1FF;			/*�F*/

    font-family: FontAwesome;
/*  content: "\f111";  */
    content: "●";
    position: absolute;
    font-size: 23px;
    left: -25px;
    bottom: 25px;
}
.box_fukidashi_image_left p {
    margin: 0; 
    padding: 0;
}


/**************************************
【box_fukidashi_balloon_left】
box_fukidashi_balloon_left
<div class="box_fukidashi_balloon_left">
    <p>ここに文章</p>
</div>
***************************************/

.box_fukidashi_balloon_left {

	margin-left: 20px;
	margin-right: 20px;

  position: relative;
  display: inline-block;
/*  margin: 1.5em 0 1.5em 15px;  */
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: BLACK;		
  font-size: 16px;
  background: #FFF;
  border: solid 3px #C1E1FF;			/*�F*/
  box-sizing: border-box;
  border-radius: 15px;
}

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

.box_fukidashi_balloon_left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #C1E1FF;			/*�F*/
  z-index: 1;
}

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


/**************************************
【box_cross1　交差線】
<div class="box_cross1">
    <p>ここに文章</p>
</div>
***************************************/
.box_cross1{

/*	margin-left: 32px;  */
/*	margin-right: 32px; */
    margin: 0.5em 5px 5px 5px;			/* 上・右・下・左 */

    border-top: solid 2px   #319CFF;		/*�E*/
    border-bottom: solid 2px #319CFF;		/*�E*/

/*    margin:2em 0; */
    position: relative;
    padding: 0.5em 1.5em;
}
.box_cross1:before, .box_cross1:after{

    background-color: #319CFF;				/*�E*/

    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
}
.box_cross1:before {left: 10px;}
.box_cross1:after {right: 10px;}
.box_cross1 p {
    margin: 0; 
    padding: 0;
}




/**************************************
【ステッチノート風1】
<div class="stitch_note1">
    あああああ
</div>
*****************************************/
.stitch_note1 {

/*	margin-left: 32px;  */
/*	margin-right: 32px; */
    margin: 0.5em 5px 5px 5px;			/* 上・右・下・左 */

  background: #C1E1FF;					/*�F*/
  box-shadow: 0px 0px 0px 5px #C1E1FF;	/*�F*/
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #333333;		/*文字は若干薄い黒 */
}

/**************************************
【ステッチノート風2　端折れ表示】
<div class="stitch_note2">
    あああああ
</div>
*****************************************/
.stitch_note2 {

/*	margin-left: 32px;  */
/*	margin-right: 32px; */
    margin: 0.5em 5px 5px 5px;			/* 上・右・下・左 */

  position: relative;
  background: #C1E1FF;					/*�F*/
  box-shadow: 0px 0px 0px 5px #C1E1FF;	/*�F*/
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #333333;		/*文字は若干薄い黒 */
}

.stitch_note2:after {
  border-color: #fff #fff #319CFF;		/*�E*/
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

/**************************************
【ストライプ1　シマシマ】
<div class="stripe1">
    あああああ
</div>
*****************************************/
.stripe1
{
/*	margin-left: 32px;  */
/*	margin-right: 32px; */
    margin: 0.5em 5px 5px 5px;			/* 上・右・下・左 */

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;

  color: BLACK;
  text-shadow: 0 0 5px white;

  background: -webkit-repeating-linear-gradient(-45deg, WHITE, WHITE 3px, #cce7ff 3px, #cce7ff 7px);	/*�F*/
  background: repeating-linear-gradient        (-45deg, WHITE, WHITE 3px, #cce7ff 3px, #cce7ff 7px);	/*�F*/

}
/**************************************
【commandline　コマンドライン風表示】※各CSSでカラー変更無し
<div class="commandline">
    c:<br>
    cd \temp<br>
    rm *.*<br>
</div>
***************************************/
.commandline {

	margin-left: 30px;
	margin-right: 30px;
    margin-bottom: 10px;
    margin-top: 10px;

    font-family: 'Ricty-Diminished';

    color: #F5FFFA;
    background-color: #000000;

    padding-top: 10px;
    padding-left: 14px;
    padding-right: 10px;
    padding-bottom: 10px;

}