/* 全体の設定
--------------------*/
header,footer,nav,section{display:block;}

body,p,h1,h2,h3,h4,h5,h6,
ul,li,img{
	margin:0;
	padding:0;
	font-size:100%;
	line-height:140%;
	font-weight:normal;
}

.clearfix{zoom:1;}
.clearfix:after{
	content:"";
	clear:both;
	display:block;
}

body{
background-color: #cae4ff;
font-size:13px;-webkit-text-size-adjust:none;
}



img{border:none;}
li{list-style:none;}


/* 全体の設定
--------------------*/





#tbl-bdr table,#tbl-bdr td,#tbl-bdr th {
    border-collapse: collapse;
    border:1px solid #000000;
    }

#tbl-bdr2 table,#tbl-bdr2 td,#tbl-bdr2 th {
    border-collapse: collapse;
    border:1px solid #fff;
    }


p.content1 {line-height: 15px;}






.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;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}





/* カテゴリ部分
--------------------*/
#catebox1{
	width:140px;
	margin:0 auto;
}

#catebox1 ul{
	background:#fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	padding:10px 0 0 10px;
	margin:15px 10px;
}

#catebox1 li{
	float:left;
	text-align:center;
	margin:0 10px 10px 0;
}

#catebox1 li img{
	border-radius: 8px;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

#catebox1 a{
	text-decoration:none;
}





#catebox{
	width:210px;
	margin:0 auto;
}

#catebox ul{
	background:#ffffff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	padding:10px 0 0 10px;
	margin:15px 10px;
}

#catebox li{
	float:left;
	text-align:center;
	margin:0 10px 10px 0;
}

#catebox li img{
	border-radius: 8px;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

#catebox a{
	text-decoration:none;
}





#catebox20{
	width:315px;
	margin:0 auto;
}

#catebox20 ul{
	background:#fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	padding:10px 0 0 10px;
	margin:15px 10px;
}

#catebox20 li{
	float:left;
	text-align:center;
	margin:0 10px 10px 0;
}

#catebox20 li img{
	border-radius: 8px;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

#catebox20 a{
	text-decoration:none;
}





#catebox21{
	width:250px;
	margin:0 auto;
}

#catebox21 ul{
	background:#fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	padding:10px 0 0 10px;
	margin:15px 10px;
}

#catebox21 li{
	float:left;
	text-align:center;
	margin:0 10px 10px 0;
}

#catebox21 li img{
	border-radius: 8px;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

#catebox21 a{
	text-decoration:none;
}



/* 初期値等のリセット */
.graph-title , .bar-graph, .bar-graph li, .bar-graph dl,
.bar-graph dt, .bar-graph dd, .bar-graph span {
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
width: 280px;
  background-color: #ffffff;
}

/* グラフのタイトル */
.graph-title {
  font-weight: bold;
  text-align: center;
}

.bar-graph {
  border: 1px solid #ccc;
  margin-bottom: 30px;
}

.bar-graph li {
  border-bottom: 1px solid #ccc;
}

.bar-graph li:last-child {
  border-bottom: 0;
}

/* 各グラフの横並びは flex */
.bar-graph dl {
  display: flex;
width: 205px;
  justify-content: space-between;
}

/* グラフの項目名は固定幅 */
.bar-graph dt {
  border-right: 1px solid #ccc;
  flex-basis: 40px; /* 項目名の幅 */
  flex-grow: 0;
  flex-shrink: 0;
  padding: 10px 0;
  text-align: center;
}

/* グラフが入る要素は自由幅 */
.bar-graph dd {
  flex-grow: 1;
  flex-shrink: 1;
  padding: 10px 0;
  text-align: center;
}

/* グラフ本体 */
.bar-graph dd span {
  display: block;
  overflow: visible;
  white-space: nowrap;
}

/* 各グラフの色と％、各々設定する */
.graph-a dd span {
  background-color: #ffaB91;
}

.graph-b dd span {
  background-color: #ffaB91;
}

.graph-c dd span {
  background-color: #ffaB91;
}

.graph-d dd span {
  background-color: #ffaB91;
}

.graph-e dd span {
  background-color: #ffaB91;
}

.graph-f dd span {
  background-color: #ffaB91;
}







/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
  background-color: #ffffff;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}








#catebox2 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #BBBBBB;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox2 p {
    margin: 0; 
    padding: 0;
}



#catebox3 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #008BBB;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox3 p {
    margin: 0; 
    padding: 0;
}



#catebox4 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #008800;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox4 p {
    margin: 0; 
    padding: 0;
}



#catebox5 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #FF6928;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox5 p {
    margin: 0; 
    padding: 0;
}



#catebox6 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #A0522D;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox6 p {
    margin: 0; 
    padding: 0;
}



#catebox7 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #FF69B4;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox7 p {
    margin: 0; 
    padding: 0;
}



#catebox8 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #663300;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox8 p {
    margin: 0; 
    padding: 0;
}



#catebox9 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #003300;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox9 p {
    margin: 0; 
    padding: 0;
}



#catebox10 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #777777;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox10 p {
    margin: 0; 
    padding: 0;
}



#catebox11 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #FF0000;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox11 p {
    margin: 0; 
    padding: 0;
}



#catebox12 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #FFCC00;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox12 p {
    margin: 0; 
    padding: 0;
}



#catebox13 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #99FFFF;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox13 p {
    margin: 0; 
    padding: 0;
}




#catebox14 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #800080;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox14 p {
    margin: 0; 
    padding: 0;
}



#catebox15 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #4682B4;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox15 p {
    margin: 0; 
    padding: 0;
}



#catebox16 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #00CC66;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox16 p {
    margin: 0; 
    padding: 0;
}



#catebox17 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #CC66FF;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox17 p {
    margin: 0; 
    padding: 0;
}





#catebox18 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #000000;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox18 p {
    margin: 0; 
    padding: 0;
}



#catebox19 {
  text-align:center;
    font-weight: bold;
    color: #ffffff;/*文字色*/
    background: #FF00FF;
   border-radius: 10px;/*角の丸み*/
width: 70px;
heigh: 15px;
}
#catebox19 p {
    margin: 0; 
    padding: 0;
}



.example li{
  float: left;
}