@charset "UTF-8";

/*-----------------------------------------------------
???????륷???ﾈ
FileName:	defualt/style.css
Version:	06.11.11
-----------------------------------------------------*/

/* === BOXの定義 ================================================= */
.sample1 {
  position      : relative;                   /* relative指定は必須 */
 
  margin        : auto;               /* 色や文字情報は変更ください */
  max-width     : 90%;
  padding       : 0 10px;
  background    : #fff;
  border        : 3px solid #000080;
  border-radius : 8px;
  text-align    : left;
  line-height   : 1.3;
  font-size     : 13pt;
}
 
 /* === 文書を書くBOX ============================================= */
.sample1 > div {
  overflow      : hidden;                       /* hidden指定は必須 */
}
 
 /* === チェックボックス ========================================== */
.sample1 > input {
  display       : none;                                   /* 非表示 */
}
 
 /* === チェックボックスのlabel（＝ボタンに見せる） =============== */
.sample1 > label {
  position      : absolute;
  display       : inline-block;
  bottom        : 3px;
  right         : 3px;
  padding       : 5px 8px;
  background    : #fff;
  color         : #008000;
  border        : 2px solid #008000;
  border-radius : 6px;
  font-size     : 9pt;
  font-weight   : bold;
}
 
 /* === ボタンにカーソルが乗った時 ================================ */
.sample1 > label:hover {
  background    : #b1f3b1;
}
 
 /* === 文書のエリアの高さ（「続きを開く」が表示されているとき）=== */
.sample1 > input[type="checkbox"]:not(:checked) ~ div {
  height        : 120px;
}
 
 /* === 文書のエリアの高さ（「続きを開く」が表示されているとき）=== */
.sample1 > input[type="checkbox"]:checked ~ div {
  padding-bottom: 30px;
}
 
 /* --- ボタンに表示する文字（閉じているとき） -------------------- */
.sample1 > input[type="checkbox"]:not(:checked) + label::after {
  content       : "続きを開く";
}
 
 /* --- ボタンに表示する文字（開いているとき） -------------------- */
.sample1 > input[type="checkbox"]:checked + label::after {
  content       : "閉じる";
}