@charset "shift_jis";


.accordion {
background-color: #ccc;
border: 1px solid #ababab;
width: 500px;
height: 400px; /* レイアウト崩れ防止用 */
margin: 50px auto;
padding: 10px;

/*角を丸める。ただし、IE 8以前では無効*/
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

/*影を付ける。IE 8以前では無効*/
-moz-box-shadow: 1px 1px 3px #565656;
-webkit-box-shadow: 1px 1px 3px #565656;
box-shadow: 1px 1px 3px #565656;
}

.accordion > div {
margin: 5px;
border-bottom: 1px solid #aaa;
/*これを入れておかないとグラデーションが無効なときに背景と色が同じになっ
て見にくい*/
background-color: #fff;

/*グラデーションをかける。IE9以前では無効*/
background-image: -webkit-gradient(linear, left top, left bottom,
from(#fff), to(#ccc) ); /*入れないでも良いかも?*/
background-image: -webkit-linear-gradient(top, #fff, #ccc);
background-image: -moz-linear-gradient(top, #fff, #ccc);
background-image: -ms-linear-gradient(top, #fff, #ccc);
background-image: -o-linear-gradient(top, #fff, #ccc);
background-image: linear-gradient(top, #fff, #ccc);

/*角を丸める。IE 8以前では無効。アコーディオンパネルの角を丸める*/
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

.accordion h3, .accordion p {
margin: 0; /*指定しないとパネルがきちんと描画されない*/
}

.accordion h3 {
padding: 5px;

/*入れないと:hoverで描画がおかしくなる。IE 8 以前では無効。*/
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

.accordion p {
padding: 10px;
}


.accordion h3:hover{
/*カーソルをメニューに合わせた時に色を変更して分かりやすくしている*/
background: #fff;
}

/*カーソルがタイトル触れた時にパネルを開く高さの調節。これは一番長い文章
に合わせる。*/
.accordion h3:hover + div, .accordion h3 + div:hover {
height: 250px;
}

.accordion h3 + div
{
/*高さを0にする事でパネルを見えなくしている*/
height: 0;
/*パネルが見えない場合に文字が表示されないようにする*/
overflow: hidden;
/* アニメーションの設定、IEは10以上でないと無効。*/
/*cssのheightを指定した時に、0.3秒かけ、最初と最後にゆっくりアニメーショ
ンする*/
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}