/*  更新履歴はファイル末尾  */
           @charset  "UTF-8";
#wrapper{
    margin: 0 auto;
    padding: 0 10px;
    max-width: 768px;
}

           img{max-width: 100%; height: auto; }

           .header {
              width: 100%;                  /* 要素の幅を100% */
              margin: 0;
       }

.main{
/*    float: right;      */
    width: 100%;
    }
           h1{color:#0000ff;
              font-family:"ＭＳ ゴシック",serif;
              font-style:italic;
              font-weight:bold;
              max-width:100%;                     /* width削除　max-width設定 */
              height:auto;                        /* height;auto追加 １行追加 */
              margin-left:auto;
              margin-right:auto;}
           #pagetop{color:#0000ff;                 /*  IDセレクタ  （ピリオドで始まるのがclassセレクタ）  */
              font-size:2em;
              font-family:"ＭＳ ゴシック",serif;
              font-style:italic;
              font-weight:bold;
              max-width:100%;
              margin-left:auto;
              margin-right:auto;}
           h2{color:#008080;                       /* h2は現状無し？ */
              font-family:"ＭＳ ゴシック",serif;
              font-style:normal;
              font-weight:bold;
              max-width:100%;
              margin-left:auto;
              margin-right:auto;}
           h3{color:#0000ff;
              font-family:"ＭＳ ゴシック",serif;
              font-style:italic;
              font-weight:bold;
              line-height: 120%;
              padding-bottom: 0px;                 /* padding-bottom追加 */
              margin-bottom: 0px;                  /* margin-bottom追加 */
              }
           h4{color:#ff0080;
              font-family:"ＭＳ ゴシック",serif;
              font-style:normal;
              font-weight:bold;
              max-width:100%;
              margin-left:auto;
              margin-right:auto;}
           body{color:#000000;
              font-size:   150%;
              line-height: 150%;
              max-width:100%;
              background-color:#ffffdf,transparent;
              background-image:url(../images/backgrounds1.jpg);
              background-repeat:repeat-y;
              background-position:1024px top;}
           body a {                             /* リンク表示部分は青文字・下線つきにする */
              text-decoration: underline;
              color: #0000ff;
              transition: .2s ease-in-out;
              }
           article.main{
              max-width:100%;
              margin-left:auto;
              margin-right:auto;
              }
           ul {list-style:inside;}
           li {                                  /* クラス名なしのliはぶら下げインデントをつける */
               padding: 0px 0px 0px 0px;
               padding-left: 1em;
               text-indent: -1em;
              }
           li.upd {                              /* 更新履歴はリストにしてインデントをつける */
               list-style-type: none;
               padding: 0px 0px 0px 0px;
               padding-left: 7em;
               text-indent: -7em;
              }
          
        /*     padding: (top) (right) (bottom) (left) */
           p.align-left {
              text-align: left;
              margin-left: 15px;
              margin-right: 100px;}
           p.align-center {
              text-align: center;
              margin-left: 15px;
              margin-right: 100px; }
           p.align-center-bold {
              text-align: center;
              margin-left: 15px;
              margin-right: 100px;
              font-weight:bold;}
           p.align-right {
              text-align: right;
              margin-left: 15px;
              margin-right: 100px;}
           p.burasage {                              /* ぶら下げインデント（「練習中の曲目」の「※」箇所で使用） */
              padding-left: 1em;
              text-indent: -1em;
              }

/*  YouTube動画サイズをレスポンシブ化  */
.videoWrapper{
  position: relative;
  padding-bottom: 56.25%;  /* 16:9 タテ÷ヨコ */
  padding-top: 0px; 
  margin-bottom: 25px;
  height: 0;
  }
.videoWrapper iframe{
  position: absolute;
    top:  0,
    left: 0;
  width:  100%;
  height: 100%;
  }

/* header ナビゲーションメニュー */
header nav ul{
    display:table;
    margin: 0 0 30px 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
}

header nav ul li{
/*    float: left;   */
/*    width: 20%;    */
    display: table-cell;
    background-color: #ba8b40;   /* オーカー ochre */
/*  background-color: #9b9b9b;      灰色モノトーン */
    border-top  : 1px solid #ffffff;   /*  上側にも境界線（白） 追加 */
    border-right: 1px solid #ffffff;
}

header nav ul li:last-child{
    border-right: none;
}

header nav ul li a{
    display: block;
/*    margin:  5px 0 5px 0;    */
    padding: 5px 0 5px 0;
    text-align: center;
    line-height: 130%;
    color: #ffffff;
    text-decoration: none;
}
/* header ナビゲーションメニュー　終わり */

           .footer {
             padding: 15px 10px;
           }
           .copy {
             text-align: right;
             font-size: 1.0rem;
           }
/* CSSメディアクエリ ==========================================================================================================  */

@media (max-width: 480px) {

header nav ul li{
    float: none;
    width: 45%;
    display: inline-block;
    background-color: #ba8b40;   /* オーカー ochre */
/*    background-color: #c9caca;     シルバー */
/*    background-color: #9b9b9b;      灰色モノトーン  */
/*    background-color: #ffffff;    白 */
    border:1px solid #ba8b40;   /* オーカー ochre （枠線と内側は同色） */
    border-radius: 10px;        /* 枠線のカドは半径10pxの曲線にする */
    margin:  3px 3px 3px 0;
}

    header nav ul li:last-child{       /* スマホでは最後の子の右側の枠線を表示する */
    border-right: 1px solid #ba8b40;   /* 最後の子の右側の枠線白もオーカー ochre （枠線と内側は同色） */
    }

    header nav ul li a{
    display: block;
    margin:  0px 0 0px 0;
    padding: 5px 0px 5px 0px;
    text-align: center;
    line-height: 130%;
    color: #ffffff;
/*     text-decoration: underline;   */   /* 下線なし */
}

}      /* @mediaの閉じカッコ */

/* 2022/5/28 作成   6/7 update   6/9 参照されていない定義を削除 */