alt-karate

 //■page topへ戻るボタン
$(function(){
   var topBtn=$('#pageTop');
   topBtn.hide();
   //◇ボタンの表示設定
   $(window).scroll(function(){
     if($(this).scrollTop()>80){
       //---- 画面を80pxスクロールしたら、ボタンを表示する
       topBtn.fadeIn();
     }else{

alt-karate

box-shadow: 0 10px 5px -3px rgba(0,0,0,0.5);

alt-karate

font-family: 'Helvetica','Helvetica Neue','Arial','Arial Black',sans-serif;

alt-karate

/* ----------------------------------------------------------------------
 hover時ゆっくり変化させます
---------------------------------------------------------------------- */
a:hover {
  opacity: 0.7; 
  text-decoration:none;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;

alt-karate

<div class="hidden_box">
    <input type="checkbox" id="labelX"/> <!-- Xを任意の数字に変更 -->
    <label for="labelX">ラベル</label> <!-- Xを上記と同じ数字に変更 -->
    <div class="hidden_show">
        ここに中身
    </div>
</div>

alt-karate

<!-- 折り畳み展開ポインタ -->
<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ クリックで展開</a>
</div>
<!--// 折り畳み展開ポインタ -->
 
<!-- 折り畳まれ部分 -->
<div id="open" style="display:none;clear:both;">

<!--ここの部分が折りたたまれる＆展開される部分になります。

alt-karate

box-shadow: 0 3px 5px -3px #c8c6c6;

alt-karate

font-family: "Hannari", "游明朝", YuMincho, "Sawarabi Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;

alt-karate

.mean-nav {
    position: fixed;
    max-height: 90%;
    overflow-y: auto;
}

alt-karate

Ryumin Medium KL,"リュウミン M-KL",HiraMinProN-W3,HiraMinPro-W3,"ヒラギノ明朝 ProN W3","ヒラギノ明朝 Pro W3","ＭＳ 明朝",serif