body { background: white; color: black; margin-left: 5em; margin-right: 5em; margin-top: 2em; line-height: 2.0em; }
body { font-family: 'Kosugi Maru', sans-serif;
       font-family: 'M PLUS Rounded 1c', sans-serif; }

h1 { font-size: 3.5em; color: #00BFFF; text-align: center; padding-top: 50px; padding-bottom: 21px; line-height: 1.25em; }

h1:after { bottom: -4px; content:""; float:left;
           width:100%; background: linear-gradient(90deg, #4DD2FF, #7FFFFF, #4DD2FF);
           height:7.5px; border-radius: 5px; }

h2 { font-size: 1.7em; line-height: 1.25em; color: #00BFFF; }
h2 i { color: #00BFFF; font-size: 15px; margin-left: 15px; display: table-cell; vertical-align: middle; }

h2:after { bottom: -4px; content:""; float:left;
           width:100%; background: linear-gradient(90deg, #4DD2FF, #7FFFFF, #4DD2FF);
           height:7.5px; border-radius: 5px; }

h3 { font-size: 1.5em;}

html { scroll-behavior: smooth; }

p { line-height: 1.7em; }

ol { counter-reset: section; }
li { line-height: 2.0em; }
ul li { margin-left: 1.5em; }

div { line-height: 1.9em; }

font { color: red; font-weight: normal; }

small { font-size: 3 }

marker { background-color: yellow; font-weight: bold; }

a { text-decoration: none; }
a:link { color: blue; }
a:visited { color: purple; }

span { color: #FF1493; }
span:link { color: blue; }
span:visited { color: purple; }

i { color: #00BFFF; font-size: 1.0em; }
#songlist p { font-size: 0.9em; line-height: 1.7em; }
#songlist i { font-size: 1.0em; color: #00BFFF; }
.year i { font-size: 20px; color: #00BFFF; }
.songlist-thousand i { color: #00BFFF; }
.songlist-thousand ol { margin-left: 1.0em; }


.alphabet { font-family: 'Damion', cursive;
            display: inline-block; _display: inline;
            color: #00BFFF;
            font-size: 20px;
            font-weight: lighter;
            margin-bottom: -5px; }

.alphabet-title { font-family: 'Damion', cursive;
                  display: inline-block; _display: inline;
                  color: #00BFFF;
                  font-size: 25px;
                  font-weight: lighter;
                  margin-top: 20px;
                  margin-bottom: -5px; }

.alphabet-contents { font-family: 'Damion', cursive;
                     margin-left: 78px;
                     margin-top: -20px;
                     color: #00BFFF; font-size: 1.3em; }



.alphabet-contents-list { font-family: 'Damion', cursive;
                          margin-left: 50px;
                          margin-top: -20px;
                          color: #00BFFF; font-size: 1.3em; }
.parent { text-align: center; }
.contents { display: inline-block; padding-right: 40px; margin-bottom: 0px;
            border: 1px solid #00BFFF;
            outline : 2px solid #00BFFF;
            outline-offset : 4px;
            border-radius : 6px;
            border-radius : 10px; text-align: left; }
.contents i { font-size: 20px; font-weight: bold; color: #00BFFF; }
.contents h3 { font-size : 1.75em; margin-left : 45.5px; color:#00BFFF; }
.contents ol { counter-reset: section; color: #00BFFF; }
.contents li { list-style: none; }
.contents ol>li:before { content : counters(section, '-') '. '; counter-increment : section; }


.parent { text-align: center; }
.contents-list { display: inline-block; padding-left: 20px; padding-right: 40px; margin-bottom: 0px;
                 border: 1px solid #00BFFF;
                 outline : 2px solid #00BFFF;
                 outline-offset : 4px;
                 border-radius : 6px;
                 border-radius : 10px; text-align: left; }
.contents-list i { font-size: 20px; font-weight: bold; color: #00BFFF; }
.contents-list h3 { font-size : 1.75em; margin-left : 45px; color:#00BFFF; }
.contents-list ol { counter-reset: section; }
.contents-list li { list-style: none; margin-left: -1.5em; }
.contents-list ol>li:before { content : counters(section, '-') '. '; counter-increment : section; }


.wrapper { width: 100%; display: flex; margin: 20px auto; justify-content: center; }
.main, .side { padding: 10px; }
.main p, .main li { padding-right: 1.0em; }
.main { width: 70%; }
.side { width: 30%; }
.side p, ul { padding-left: 1.0em; padding-right: 0.5em; }

.index-button { display: none; position: absolute; left: 15px; top: 20px; z-index: 10; }
.index-button a { display: block; font-size: 0; width: 50px;
                height: 50px; text-align: center;
                background: #7FFFFF; line-height: 50px;
            	border-radius: 10px; }
.index-button a i { font-size: 20px; color: #00ACE6; line-height: 50px; }
.index-button a:hover { background-color: #FFFFFF; }

.top-button { display: none; position: fixed; right: 15px; bottom: 60px; }
.top-button a { display: block; font-size: 0; width: 50px;
                height: 50px; text-align: center;
                background: #7FFFFF; line-height: 50px;
            	border-radius: 10px; }
.top-button a i { font-size: 20px; color: #00ACE6; line-height: 50px; }
.top-button a:hover { background-color: #FFFFFF; }

.search input { display: inline-block; }

header { width: 100%; height: 0px; text-align: left; background-color: #FFFFFF; }

footer { width: 100%; height: 60px; text-align: center; margin-bottom: 50px; background-color: #FFFFFF; }
.footer-text { color: #FFFFFF; }
ul.footer-menu { display: inline; }

.menubar-side { width:100%; }
.menubar-side i { display: inline-block; font-size: 15px; width: 30px; text-align: center; color: #00ACE6; }
.menubar-side ul { display:table; width:100%; margin: 0; padding: 0; background-color: #FFFFFF; }
.menubar-side li { width:85%; padding: 0; background-color: #7FFFFF; border-radius: 10px;  list-style: none; margin-bottom: 0.5em; }
.menubar-side li a { display: block; margin:0 auto; padding:5px; border: 1px solid #FFFFFF; text-decoration: none; color: #00ACE6; 
                     padding-left: 20px; border-radius: 10px;}
.menubar-side li a:hover { background-color: #FFFFFF; }

.site marker { margin-left: 1.0em; }
.site ul { margin-left: 0.5em; }
.site ul li { margin-left: 1.0em; }
.site i { color: #00BFFF; font-size: 1.0em; }

.list li { line-height: 2.0em; text-indent: -1.0em; }
.list ul li { margin-left: 1.5em; padding-left: 1.0em; type: disc; }

input { display: none; }






table { border: 1px solid black; border-collapse: collapse; border-spacing:0; width: 100%; counter-reset: apple; text-align:left; }
.table th { border: 1px solid black; vertical-align:middle; background: #C7F6FF; padding: 5px; }
.table td { border: 1px solid black; vertical-align:middle; background: #F5FFFF; padding: 5px; }

.table-scroll ol { counter-reset: section; }
.table-scroll li { line-height: 0.5em; }

.table-scroll, .table-scroll td, .table-scroll th { border: 1px solid; }
.table-scroll th { vertical-align:middle; background: #C7F6FF; padding: 5px; font-weight: normal; }
.table-scroll td { vertical-align:middle; background: #F5FFFF; padding: 5px 15px; font-size: 0.9em; }
.table-scroll{ overflow: auto; white-space: nowrap; }
.table-scroll::-webkit-scrollbar{ height: 10px; }
.table-scroll::-webkit-scrollbar-track{ background: #C7F6FF; }
.table-scroll::-webkit-scrollbar-thumb{ background: #66E6FF; }
.search table, .search td, .search th { border: none; }







* { -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: .25s ease-in-out; 
    -moz-transition: .25s ease-in-out; 
    -o-transition: .25s ease-in-out; 
    transition: .25s ease-in-out; 
    -webkit-text-size-adjust: none; } 

#drawer-toggle /* チェックボックス（非表示） */
       { position: absolute; opacity: 0; }

#drawer-toggle-label /* メニューの形  */
       {-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	right: 20px; height:50px; width: 50px;
	display: block; position: absolute;
	border-radius: 10px;
	background: #7FFFFF;  } 

#drawer-toggle-label:before /* メニューの中の線 */
      { content: ''; display: block; position: absolute;
 	height: 2px; width: 24px; background: #00ACE6;
	right: 13px; top: 17.5px;
	box-shadow: 0 6px 0 #00ACE6, 0 12px 0 #00ACE6; } 

#drawer /* メニューの内容・背景 */
	{ position: fixed; top: 0; 
          right:-300px; height: 100%; 
          width: 300px; background: #7FFFFF;
          overflow-x: hidden; overflow-y: hidden;
          padding-right: 10px; 
          -webkit-overflow-scrolling: touch; z-index: 30; }

#page-content { margin-left: 1px; margin-top: 50px;
                width: 1%;
                height: calc(100% - 50px);
                overflow-x:hidden; overflow-y:hidden;
                -webkit-overflow-scrolling: touch; padding: 2px; }

#drawer-toggle:checked ~ #drawer-toggle-label /* メニューの半透明部分 */
	 { z-index: 40; height: 100%; width: calc(100% - 300px); background: rgba(255,255,255,.8); }

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { right: 300px; }

#drawer-toggle:checked ~ #drawer { right: 0px; }

#drawer-toggle:checked ~ #page-content { margin-left: 300px; }

#drawer ul { list-style-type:none; margin-left: -10px; }

#drawer ul a { display:block; padding:10px; color:#00ACE6; text-decoration:none; }

#drawer ul a:hover { color:white; }

#drawer i { display: inline-block; font-size: 15px; width: 30px; text-align: center; color: #00ACE6; }


@media (max-width: 800px) {

  body { margin-left: 1em; margin-right: 1em;  font-size: 1.0em; line-height: 2.0em; }

  h1 { font-size: 2.5em; line-height: 1.25em; padding-top: 60px; }
  h1:before { margin-bottom: 5px; }

  .footer-menu { font-size: 0.9em; }

  .wrapper { flex-direction: column; width: 100%; }
  .main, .side { box-sizing: border-box; width: 100%; margin: 0; }
  .main p { padding-right: 0em; }
  .alphabet-title { margin-top: 5px; }
  .alphabet-contents { margin-left: 78px; }
  .contents h3 { margin-left: 44.5px; }
  .menubar-side ul li { margin-left: 1.5em; type: disc; }
  .description { line-height: 2.0em; margin-left: 1.5em; text-indent: -1.0em; padding-left: 0.8em; }

  .songlist-thousand ol { margin-left: 1.0em; }

  #drawer-toggle-label { right: 10px; top: 35px; }
  #drawer-toggle:checked ~ #drawer-toggle-label { height: 100%; width: 50px; }
  #drawer-toggle:checked ~ #drawer-toggle-label, 
  #drawer-toggle:checked ~ header { right: calc(100% - 50px); } 
  #drawer-toggle:checked ~ #drawer { width: calc(100% - 50px); padding: 20px; } 
  #drawer-toggle:checked ~ #page-content { margin-left: calc(100% - 500px); }

}