.box10 { 
position: relative; 
margin: 2em 0; 
padding: 0.5em 1em; 
border: solid 3px #FF6699; 
border-radius: 8px; 
}
.box10 .box-title { 
position: absolute; 
display: inline-block; 
top: -13px; 
left: 10px; 
padding: 0 9px; 
line-height: 1; 
font-size: 19px; 
background: #FFF; 
color: #FF6699;  
font-weight: bold; 
} 
.box10 p { 
margin: 0; 
padding: 0; 
}

.box20 { 
position: relative; 
margin: 2em 0; 
padding: 0.5em 1em; 
border: solid 3px #FFCC00; 
border-radius: 8px; 
}
.box20 .box-title { 
position: absolute; 
display: inline-block; 
top: -13px; 
left: 10px; 
padding: 0 9px; 
line-height: 1; 
font-size: 19px; 
background: #FFF; 
color: #FFCC00;  
font-weight: bold; 
} 
.box20 p { 
margin: 0; 
padding: 0; 
}
.box30 { 
position: relative; 
margin: 2em 0; 
padding: 0.5em 1em; 
border: solid 3px #33CC66; 
border-radius: 8px; 
}
.box30 .box-title { 
position: absolute; 
display: inline-block; 
top: -13px; 
left: 10px; 
padding: 0 9px; 
line-height: 1; 
font-size: 19px; 
background: #FFF; 
color: #33CC66;  
font-weight: bold; 
} 
.box30 p { 
margin: 0; 
padding: 0; 
}

.box40 { 
position: relative; 
margin: 2em 0; 
padding: 0.5em 1em; 
border: solid 3px #33CCFF; 
border-radius: 8px; 
}
.box40 .box-title { 
position: absolute; 
display: inline-block; 
top: -13px; 
left: 10px; 
padding: 0 9px; 
line-height: 1; 
font-size: 19px; 
background: #FFF; 
color: #33CCFF;  
font-weight: bold; 
} 
.box40 p { 
margin: 0; 
padding: 0; 
}

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

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

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

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #999999;
    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: #999999;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

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

.box13 {
    padding: 0.3em 1em;
    margin: 2em 0;
    color: #FFF;
    background: #AADDDD;
    border-bottom: solid 6px #4488BB;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
 text-align:center;
}
.box13 p {
    margin: 0; 
    padding: 0;
}

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

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

.under {
  border-bottom: dotted 2px #87CEFA;
}

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

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

h3 {
  padding: 0.3em;
  color: #734229;
  background: #F3EED5;
  border-left: solid 5px #C82536;
}

h4 {
  border-bottom: double 5px #FFC778;
}

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

.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/3);/*←画像を横に3つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}