body{
color:#000;
background-color:#fff;
font-family:"Judson","游明朝",serif;
font-size:11px;
letter-spacing:1px;
width:100%;
margin:0 auto;
padding:0px;
line-height:1.8;
-webkit-text-size-adjust:100%;
background:#83a4d4;
background:-webkit-linear-gradient(to left,#83a4d4,#ff6b6b);
background:linear-gradient(to left, #83a4d4, #ff6b6b);
}
a{
color:#000;
text-decoration:none;
border-bottom:dashed 1px #461e00;
}
a:hover{
color:#000;
}
.all{
margin:15px 10px;
padding:10px;
}
div#midashi{
font-family:"Times New Roman",Times,Georgia,"century gothic";
font-size:230%;
color:#000;
}
span.hutoji{
font-weight:700;
}

h1{
font-size:20px;
font-weight:normal;
margin:0;padding:0;
}
h2{
font-size:40px;margin:0;padding:0;
}
input[type="text"],textarea,input[type="submit"]{
font-size:90%;
-webkit-appearance:none;
background:#83a4d4;
background:-webkit-linear-gradient(to left,#83a4d4,#ff6b6b);
background:linear-gradient(to left, #83a4d4, #ff6b6b);
color:#000;
border:solid 1px #000;
-moz-border-radius:3px;
-webkit-border-radius:3px;
vertical-align:middle;
position:relative;
top:-1px;
}
textarea{
width:80%;
margin:4px;
}
input[type="text"],select{
width:140px;
height:27px;
padding:0 2px;
text-align:center;
margin:4px;
}
select{
font-size:90%; 
-moz-border-radius:3px;
-webkit-border-radius:3px;
color:#000;
border:solid 1px #000;
padding:0px 0px 0px 8px;
}
input[type=s"ubmit"]{
width:50px;
height:27px;padding:0 2px;
}.circle{
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: skyblue;
  text-align:center;
  line-height: 80px;
  vertical-align: middle;
}
/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000000;
  background-color: #ffffff;
  margin-left: 110px;          /* 左に余白を設ける */
}
/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #ffffff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/* 吹き出し本体 */
.balloon2{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000000;
  background-color: #ffffff;
  margin-right: 110px;          /* 右に余白を設ける */
}
/* 画像 - 絶対配置で右上に配置 */
.balloon2 .icon{
  position: absolute;
  right: -110px;
  top: 0;
op: 0;
}
/* 三角アイコン */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #ffffff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

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

/*ボタンホバー時*/
.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;
}