body         {
             font-family: 'メイリオ',
             'Hiragino Kaku Gothic Pro', sans-serif}

.page {
  width: 80%;
  margin: 0 auto;
}


/* ナビゲーション */
.menu ul     {margin: 0;
             padding: 0;
             list-style: none}

.menu li a   {display: block;
             padding: 10px 3px;
             color: #000000;
             font-size: 11px;
             text-decoration: none}

.menu li a:hover   {background-color: #75dbe7}

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

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

/* ボックス5,6,7,8,9,10,11,12を罫線で包む */
.box5,.box6,.box7,.box8,.box9,.box10,.box11,.box12
         {border: solid 1px #ff9933;
          margin: 2px 1px 2px 1px}


/* 概要 */
.top img  {max-width: 100%;
             height: auto;
             padding: 0px 0px 0px 0px;
             border: none}

.top h2   {text-align: center}


/* ボックスの左右に確保する余白 */
.box1,.boxA,.box2-inner,.box12-inner
             {padding-left: 0px;
             padding-right: 0px}


/* BOXA */
.boxA       {margin: 0px 10px 0px 10px;
            padding: 0px 0px 0px 0px;
            border: solid 0px #ff9933;
            background-color: #ffffff;
            color: #999999;
            text-align: center}

.boxA img   {width: 70%;
            height: auto}

/* BOX3とBOX4とBOX15の横幅及び上下の間隔 */
.box3,.box4,.box13      {margin: 0px 10px 0px 10px}

/* 画像の表示の設定 */

/* ヘッダー画像 */
.box3        {width: 100%;
             margin: 0px 0px 0px 0px}

.box3 img    {width: 100%;
              height: auto;
              margin: 0;
              vertical-align:center}

/* キャッチコピー */
.catch       {margin: 0;
             padding: 15px;
             background-color: rgba(255,255,255,0.7);
             font-size: 24px}

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

.catch       {position: absolute;
             bottom: 7%;
             left: 3%}




/* ########## 599px以下 ########## */
@media (max-width: 599px){


/* キャッチコピーの文字表示の大きさの設定 */
.catch      {font-size: 11px}

/* ヘッダータイトル文字の表示の大きさの設定 */
.title h1      {font-size: 12px}

/* 画像の大きさ（縮尺） */

}
/* ########## 600px以上～480以下 ########## */
@media (min-width: 480px) and (max-width: 767px){

/* BOXAを横に並べる設定 */
.boxA:after    {content: "";
               display: block;
               clear: both}

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

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

.box7        {float: left;
             width: 49%}

.box8        {float: left;
             width: 49%}

.box9        {float: left;
             width: 49%}

.box10        {float: left;
             width: 49%}

.box11        {float: left;
             width: 49%}

.box12        {float: left;
             width: 49%}


/* ヘッダータイトル文字の表示の大きさの設定 */

.title h1      {font-size: 16px}





/* キャッチコピーの文字表示の大きさの設定 */
.catch      {font-size: 12px}


}

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

/* BOX5とBOX6とBOX7とBOX8とBOX9とBOX10とBOX11とBOX12を横に並べる設定 */
.boxA:after  {content: "";
             display: block;
             clear: both}

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

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

.box7        {float: left;
             width: 24.5%}

.box8        {float: left;
             width: 24.5%}

.box9        {float: left;
             width: 24.5%}

.box10        {float: left;
             width: 24.5%}

.box11        {float: left;
             width: 24.5%}

.box12        {float: left;
             width: 24.5%}


/* キャッチコピーの文字表示の大きさの設定 */
.catch      {font-size: 14px}




/* ヘッダータイトル文字の表示の大きさの設定 */
.title h1      {font-size: 26px}

}



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

/* キャッチコピーの文字表示の大きさの設定 */
.catch      {font-size: 22px}




/* 全体の横幅を固定 */
.box1-inner,.box13-inner
            {width: 1000px;
            margin-left: auto;
            margin-right: auto}

}