/*アドセンス広告の配置*/
/* スポンサードリンクというラベルの部分 */
.ad-bottom-label {
  text-align:center;  /* ラベルを中央寄せ */
  margin-top:15px;  /* 上に余白 */
}

/* 横並び広告全体部分 */
.ad-bottom-main {
  margin-top:20px;  /* 上に余白（ラベルとの距離） */
  margin-bottom:20px;  /* 下に余白（下のコンテンツとの距離） */
}

/* 広告左 */
.ad-bottom-left{
     float:left;  /* 広告を左寄せ */
     margin-right:10px;  /* 右に余白（２つの広告の間の余白） */
}
 
/* 広告右 */
.ad-bottom-right{
     float:left;  /* これも広告の左寄せ */
}

/* 最後に左寄せを解除するための記述 */
.ad-bottom-main:after {
  content:"";
  display:block;
  clear:both;
}

/*見出しのCSS*/
h2 {
border-bottom: solid 3px #cce4ff;
position: relative;
}

h2:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}

h3 {
padding: 0.3em 0.5em;/*文字の上下 左右の余白*/
color: black;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px black;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

/*囲みのCSS*/
.box5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
}
.box5 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;
}

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

.icon-red  {color: red}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px orange;
    border-radius: 8px;
}

.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: orange;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}


.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .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: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

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

.box30 {
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 1.2em;
    background: #5fc2f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}
/*吹き出しのCSS*/
.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: #dcdcdc;
 	border: solid 3px #555;
 	box-sizing: border-box;
}

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

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

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

/*アンダーラインのCSS*/
.under {
  background: linear-gradient(transparent 85%, lightpink 85%);
  font-weight: bold;
  }

.underline-change {
font-weight: bold;
border-bottom: solid 3px black;
position: relative;
}
.underline-change:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px gray;
bottom: -3px;
width: 50%;
}

/*ポップアップのCSS*/
.popup {
  color: red !important; 
  font-weight: bold !important;
  }

/*文字の見た目を決めるCSS*/
/*文字の太さ*/
.font-normal{
  font-weight:normal; }
.font-bold{
  font-weight:bold; }
.font-bolder{
  font-weight:bolder; }
.font-light{
  font-weight:light;}

/*文章の見た目を決めるCSS*/
/*行の幅と行間*/
p { width : 100% ; }

p {line-height: 1.9}

/*文字の間を空けるCSS*/
.font_space {letter-spacing: 0.08em}

/*下に行間を空けるCSS*/
.mb1{
   margin-bottom: 1em;
}
.mb2{
   margin-bottom: 2em;
}
.mb3{
   margin-bottom: 3em;
}
.mb4{
   margin-bottom: 4em;
}
.mb5{
   margin-bottom: 5em;
}
.mb6{
   margin-bottom: 6em;
}
.mb7{
   margin-bottom: 7em;
}
.mb8{
   margin-bottom: 8em;
}
.mb9{
   margin-bottom: 9em;
}

/*上に行間を空けるCSS*/
.mt1{
   margin-top: 1em;
}
.mt2{
   margin-top: 2em;
}
.mt3{
   margin-top: 3em;
}
.mt4{
   margin-top: 4em;
}
.mt5{
   margin-top: 5em;
}
.mt6{
   margin-top: 6em;
}
.mt7{
   margin-top: 7em;
}
.mt8{
   margin-top: 8em;
}
.mt9{
   margin-top: 9em;
}