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: #f1fcfd; /*#### 背景色 ####*/
      background-image: url("img/"); /* くりかえしの画像 */
}

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


/* ###### キャッチコピー ###### */
.catch       {margin: 0;
             padding: 15px;
             background-color: #;
             font-size: 22px;
             width: 100%;
             height: auto;
}

/* ヘッダー画像にキャッチコピーを重ねる */
.top         {position: relative}

.catch       {position: absolute;
              bottom: 2%;
              left: 5%}

/* #### 概要 #### */
.gaiyou img  {max-width: 100%;
             height: auto;
             border: none}

.gaiyou h2   {text-align: center}


/* #### ボックスの左右に確保する余白 #### */
.box1,.boxA,.box2-inner,.box5-inner
             {width:90%;
             margin-right: 10px;
             margin-left: 10px;
             padding-left: 10px;
             padding-right: 10px}



/* ########## 記事（top）の設定 ##########*/
.top    {
         width:90%;
         margin-top: 20px;
         margin-right: 30px
         margin-bottom: 10px;
         margin-left: 10px;
         
         padding-top:10px;
         padding-right: 20px;
         padding-bottom: 20px;
         padding-left: 20px;
}

/* ########## 記事（com）の設定 ##########*/
.com    {
         width:40%;
         margin-top: 20px;
         margin-right: 30px
         margin-bottom: 10px;
         margin-left: 10px;
         
         padding-top:10px;
         padding-right: 20px;
         padding-bottom: 20px;
         padding-left: 20px;
}



/* ########## 記事（navi）の設定 ##########*/
.navi1  {background-color: #EFEFDD;
         width:100%;
         margin-top: 0px;
         margin-right: 5px
         margin-bottom: 0px;
         margin-left: 5px;
         border: solid 1px #aaaaaa;
         padding-top:10px;
         padding-right: 20px;
         padding-bottom: 20px;
         padding-left: 20px;
         -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;
}

.navi1 img   {max-width: 98%;
            height: auto;
}

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

.navi2  {background-color: #fffff0;
         width:60%;
         margin-top: 0px;
         margin-right: 5px
         margin-bottom: px;
         margin-left: 5px;
         border: solid 1px #aaaaaa;
         padding-top:10px;
         padding-right: 20px;
         padding-bottom: 20px;
         padding-left: 20px;
         -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;
}

.navi2   {text-align: left;
}
         

.navi2 img   {max-width: 98%;
            height: auto;
}

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

.navi5  {background-color: #fffff0;
         width:60%;
         margin-top: 0px;
         margin-right: 10px
         margin-bottom: px;
         margin-left: 100px;
         border: solid 1px #aaaaaa;
         padding-top:10px;
         padding-right: 55px;
         padding-bottom: 20px;
         padding-left: 55px;
         -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;
}

.navi5   {text-align: left;
}
         

.navi5 img   {max-width: 98%;
            height: auto;
}

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



/* ####### recordの設定 ######## */
.record ul      {margin: 0;
                padding: 0;
                list-style: none;
                background-color: #cccccc}


.record li      {display: block;
                padding-left: 0px;
                color: #000000;
                font-size: 16px;
                text-decoration: none;
                border: solid 6px #cccccc;
                padding-top: 0px;
                padding-bottom: 0px;;
                background-color: #ffffff}


.record li a    {display: block;
                padding-left: 0px;
                color: #000000;
                font-size: 16px;
                text-decoration: none}

.record li a:hover     {background-color: #eeeeee}

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

.record li      {float: left;
                width: auto}

.record img     {padding: 0px}


/* ####### recordの部分の幅の設定 ####### */
.box2            {width: 80%；
　　　　　　　　 height: auto;
                 padding-left: 15px;
                 padding-right: 15px}


/* ########## 文字サイズを画面に合わせて可変 ########## */
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%;
  }
}