a:link { text-decoration: none;
         color:#0000ff;
}
a:visited { text-decoration: none;
         color:#0000ff;
         }

body { background-color:#ffffff; 
       color:#000000;
       font-size:30pt;
       margin-top:0;
       margin-left:0;
       font-family:"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;}

img { border:0;
      vertical-align: middle;
    }

.small { font-size:8pt;

       }

.super { color:#ff0033;
         font-weight:bold;
         text-shadow:0 -1px 1px #FFF,
    	 -1px 0 1px #FFF,
    	 1px 0 1px #FFF,
    	 2px 2px 2px #000;
        }

.super2 { color:#0000ff;
         font-weight:bold;
         text-shadow:0 -1px 1px #FFF,
    	 -1px 0 1px #FFF,
    	 1px 0 1px #FFF,
    	 2px 2px 2px #000;
    	 font-size:12pt;
        }

.strong { color:#ff0033;
          font-weight:bold;
          text-decoration:underline;
        }


.hot { text-shadow:  
         0 -1px 1px #FFF,
    	 -1px 0 1px #FFF,
    	 1px 0 1px #FFF,
    	 1px 1px 1px #000,
    	 2px 2px 2px #000;
      }
.hot2 { text-shadow:  
         0 -1px 1px #FFF,
    	 -1px 0 1px #FFF,
    	 1px 0 1px #FFF,
    	 1px 1px 1px #000,
    	 2px 2px 2px #000;
      }

.name {width:350px;
          height:50px;
          background-color:#ffffff; 
          font-size:20pt;
          margin: 1px 15px 5px 1px;
          padding: 3px 0px 0px 3px;
          display: inline-block;
	      box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.8);
        }


.bann1 {width:80%;
          height:50px;
          background-color:#000000; 
          font-size:24pt;
          color:#ffffff;
          font-weight:bold;
          font-style:italic;
          margin: 0px 7px 5px 1px;
          padding: 0px 0px 0px 2px;
          border-left: 15px groove #ff00ff; 
          display: inline-block;
	      box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.8);
        }

.bann2 {width:50%;
          height:50px;
          background-color:#000000; 
          font-size:24pt;
          color:#ffffff;
          font-weight:bold;
          font-style:italic;
          margin: 0px 7px 5px 1px;
          padding: 0px 0px 0px 2px;
          border-left: 30px groove #ffff00; 
          display: inline-block;
	      box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.8);
        }

.footer {width:99%;
          height:50px;
          background-color:#000000; 
          font-size:24pt;
          color:#ffffff;
          font-weight:bold;
          font-style:italic;
          margin: 0px 7px 5px 1px;
          padding: 0px 0px 0px 2px;
          display: inline-block;
	      box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.8);
        }


        
.kkozo { width:99%; 
             font-size:22pt;
             margin: 2px;
             border:solid 1px #ae6167; 
             border-radius: 5px/5px;
             position:relative;

           }

.kima {  width:48%; 
             height:340px; 
             float:left; 
             margin:  4px 0px 0px 4px;
             background-color:#ffffff; 
             position:relative;


           }

.ktex  { width:52%; 
             height:340px; 
             float:right; 
             background-color:#ffffff; 
             position:relative;
             border:solid 1px #000000; 
             border-radius: 10px/10px;
             margin:  4px 2px 2px 2px;
             padding: 2px 0px 0px 5px;
           }

.kkozo2 { width:99%; 
             height:685px;
             font-size:22pt;
             margin: 2px;
             border:solid 1px #ae6167; 
             border-radius: 5px/5px;
             position:relative;

           }

.kima2 {  width:48%; 
             height:680px; 
             float:left; 
             margin:  4px 0px 0px 4px;
             background-color:#ffffff; 
             position:relative;


           }

.ktex2  { width:52%; 
             height:680px; 
             float:right; 
             background-color:#ffffff; 
             position:relative;
             border:solid 1px #000000; 
             border-radius: 10px/10px;
             margin:  4px 2px 2px 2px;
             padding: 2px 0px 0px 5px;
           }

.bot {
    margin:  8px 2px 8px 2px;
    font-size:40pt;
	position: relative;
	display: inline-block;
	width: 70%;
	background-color: #f56778;
	background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
	background-image: linear-gradient(to bottom, #f997b0, #f56778);
	box-shadow: inset 1px 1px 0 #fbc1d0;
	border-bottom: 4px solid #cb5462;
	border-radius: 4px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 1px 0px #f56778;
	line-height: 120px;
	outline: none;
}
.bot:before,
.bot:after {
	position: absolute;
	bottom: -1px;
	left: -1px;
	z-index: -1;
	display: block;
	content: '';
	width: 200px;
	height: 50px;
	border: 1px solid #ee8090;
	border-bottom: 1px solid #b84d5a;
	border-radius: 4px;
}
.bot:before {
	height: 48px;
	bottom: -4px;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 1px 1px 0px #bfbfbf;
}

.main { width:100%;
        font-size:12pt;
        background-color:#ffffff; 
       }
.head { width:100%;
        margin:0px;
       }
          
.banner0 { width:137px;
          height:15px;
          background-color:#000000; 
          font-size:10pt;
          color:#ffffff;
          font-weight:bold;
          font-style:italic;
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 2px;
          border-left: 15px groove #ffff66; 
          display: inline-block;
	      box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.8);
        }

.hx:before{ content: "";
                 position: absolute;
                 background: #FF3333;
                 top: 0;
                 left: 5px;
                 height: 12px;
                 width: 12px;
                 transform: rotate(-52deg);
                 -moz-transform: rotate(-52deg);
                 -webkit-transform: rotate(-52deg);
                 -o-transform: rotate(-52deg);
                 -ms-transform: rotate(-52deg);

                }
 
.hx:after{ content: "";
                position: absolute;
                background:#99ff00;
                top: 17px;
                left: 0;
                height: 8px;
                width: 8px;
                transform: rotate(25deg);
                -moz-transform: rotate(25deg);
                -webkit-transform: rotate(25deg);
                -o-transform: rotate(25deg);
                -ms-transform: rotate(25deg);
               }

.h2 { width:99%;
           height:25px;
           position: relative;
           color: #ff0000;
           font-size:15pt;
           font-weight: bold;
           font-style: italic;
           margin: 2px 0px 3px 1px;
           padding: 2px 0px 2px 2px;
           border-bottom: 2px solid #B92A2C;
           border-right: 1px solid #B92A2C; 
           background-color:#ae6167;
           display: inline-block;
	       box-shadow: 6px 6px 8px -1px rgba(0, 0, 0, 0.8);
	       text-shadow:0 -1px 1px #ffffff,
    	               1px 0 1px #ffffff,
    	               1px 1px 1px #ffff99,
                   	   2px 2px 2px #ffff99;
}


.banner-a { margin:1px;
          width:98%;
          height:70px;
          background-color:#000000; 
          font-size:40pt;
          color:#ffffff;
          font-weight:bold;
          font-style:italic;
          font-align:left;
          margin: 0px 7px 5px 1px;
          padding: 0px 0px 0px 2px;
          border-left: 15px groove #99ff00; 
          display: inline-block;
	      box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.8);
        }
        
.banner2 { width:180px;
           height:15px;
           background-color:#000000; 
           font-size:10pt; 
           color:#000000; 
           font-weight:bold; 
           font-style:italic;
           margin: 2px 0px 5px 1px;
           padding: 0px 0px 0px 5px;
           display: inline-block;
	       box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.8);
        }

.banner3 { width:95px;
           height:15px;
           background-color:#000000; 
           font-size:10pt;
           color:#ffffff;
           font-weight:bold;
           font-style:italic;
           margin: 0px 10px 5px 0px;
           padding: 0px 0px 0px 1px;
           border-left: 12px groove #99ff00; 
           display: inline-block;
  	      box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.8);
        }

.banner4 {width:250px;
          height:15px;
          background-color:#000000; 
          font-size:10pt;
          color:#ffffff;
          font-weight:bold;
          font-style:italic;
          margin: 0px 7px 5px 1px;
          padding: 0px 0px 0px 2px;
          border-left: 15px groove #ff00ff; 
          display: inline-block;
	      box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.8);
        }



        
.txt1{ width:99%; 
       font-size:20pt;
       background-color:#ffffff; 
       position:relative;
       background-color:#ffffff; 
       margin-top:1px;
       margin-bottom:0px;
       background-color:#ffffff; 
       border:solid 1px #000000; 
       border-radius: 10px/10px;
       padding: 2px 0px 0px 5px;
     }

.txt2{ width:99%; 
       font-size:40pt;
       background-color:#ffffff; 
       position:relative;
       background-color:#ffffff; 
       margin-top:1px;
       margin-bottom:0px;
       background-color:#ffffff; 
       border:solid 1px #000000; 
       border-radius: 10px/10px;
       padding: 2px 0px 0px 5px;
     }
    

.link1{ width:99%;
       height:200px; 
       font-size:100pt;
       color:#ff3300;
       background-color:#cccccc ; 
       position:relative;
       margin-top:1px;
       margin-bottom:0px;
       border:solid 1px #000000; 
       border-radius: 10px/10px;
       padding: 2px 0px 0px 5px;
     }


.eff { display: inline-block;
	   box-shadow: 6px 6px 8px -1px rgba(0, 0, 0, 0.4);
     }

.imgeff2 {width:305px;
          height:225px;
          border-top:solid 0px;
          border-left:solid 0px;
          border-right:solid 5px rgba(0, 0, 0, 0.2);
          border-bottom:solid 5px rgba(0, 0, 0, 0.2);
         }

.imgeff{width:400px;
        height:141px;
        border-top:solid 0px;
        border-left:solid 0px;
        border-right:solid 3px rgba(0, 0, 0, 0.2);
        border-bottom:solid 3px rgba(0, 0, 0, 0.2);
       }



 ハンバーガーメニューのCSS

?2. ハンバーガーメニューのCSS

CSS /*ヘッダーまわりはサイトに合わせて調整してください*/

header {
  padding:10px;
  background: skyblue;

}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 100%;
  height: 170px;
  vertical-align: middle;
  background-image: url(image/comm/crown.jpg);
  background-size: 100%;
  background-repeat:no-repeat;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 20px;/*線の太さ*/
  width: 100px;/*長さ*/
  border-radius: 3px;
  background: #555 ;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -40px;
}
#nav-open span:after {
  bottom: -80px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 500px;/*最大幅（調整してください）*/
  height: 100%;
  background: #d3ccd6     ;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
  font-size: 30pt;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.menu-hr { background-color: #fff;
           border-top: 2px dashed #ff3300 ;
}

.menu-squ { height:140px;
}

.grad-btn {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.grad-btn::before {
  content: ">>>続きを読む<<<";
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: ">>>閉じる<<<";/*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}