body {font-family: "メイリオ", "ヒラギノ角ゴ ProN","sans-serif";
}

.h1  {font-size: 28px;
}

.h2  {font-size: 18px;
}

.h3  {font-size: 14px;
}

.h4  {line-height: 1;
}

.p   {line-height: 1;
}


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

/* ########## 背景画像の設定 ########## */
body {background-color: #cccc99; /*#### 背景色 ####*/
      background-image: url("img/"); /* くりかえしの画像 */
}

/* ########## ヘッダー（タイトル）画像の設定 ##########*/
.header img  {max-width: 80%;
              height: auto;
}

/* ###### 歌碑の設定 ###### */
.kahi    {background-color: #ffffff;
         width:60%;
         margin-top: 1px;
         margin-right: 30px
         margin-bottom: 1px;
         margin-left: 30px;
         border: solid 1px #aaaaaa;
         padding-top:10px;
         padding-right: 10px;
         padding-bottom: 10px;
         padding-left: 10px;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         margin-bottom: 15px;
         -webkit-box-shadow: 1px 1px 3px #aaaaaa;
         box-shadow: 1px 1px 3px #aaaaaa;
         border-radius: 5px;
}

.kahi    {text-align: left;
}
         

.kahi img   {max-width: 98%;
            height: auto;
            padding: 5px;
}

.kahi ul    {padding-top: 0px;
            padding-right: 5px;
            padding-bottom: 0px;
            padding-left: 3px;
}

/*##### box4の設定 #####*/
.box4       {width: 90%;
             padding-top: 0px;
             padding-right: 0px;
             padding-bottom: 0px;
             padding-left: 3px
             margin-top: 0px;
             margin-right: 1px;
             margin-bottom: 0px;
             margin-left: 5px;
}
    

/*##### box5,box6の設定 #####*/

.box5,.box6    {width: 90%;
            background-color: #fffff0;

}




/*##### ボックス５を罫線で包み、上下左右の余白を設定 #####*/
.box5
          {border: solid 2px #ff9933;
           margin: 1px 2px 1px 30px}

/*##### ボックス６を罫線で包み、上下左右の余白を設定 #####*/
.box6
          {border: solid 2px #ff9933;
           margin: 1px 30px 1px 2px}



/*##### 480px以下 #####*/
@media(max-width: 480px){
/*# boxA（box5とbox6）を横に並べる設定 #*/
.boxA:after     {content: "";
                display: block}

.box5           {float: left;
                width: 90%}

.box6           {float: left;
                width: 90%}
}

/*######## 768以上 #######*/
@media(min-width: 768px){

.boxA:after     {content: "";
                display: block;
                clear: both}

.box5           {float: left;
                width: 45%}

.box6           {float: left;
                width: 45%}
}






/* ########## 文字サイズを画面に合わせて可変 ########## */
html {
  font-size: 75%;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 87.5%;
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 100%;
  }
}