@charset "UTF-8";

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

/*　ページサイズ　*/
.page {
  width: 80%;
  margin: auto}


.gaiyou      {
             padding: 15px
}

/* ナビゲーション */
.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}

/* 概要 */
.gaiyou      {max-width: 80%;
             floot: center;
             padding: 0px 0px 10px 10px}

.gaiyou img  {width: max-width: 100%;
             height: auto;
             padding: 0px 0px 0px 0px;
             border: none}

.gaiyou h2   {text-align: center;
             padding: 0px 10px 3px 10px}

.giyou p     {text-align: center;
             padding: 0px 10px 10px 10px}

/* 画面サイズに合わせサイズ変化するテキスト */

/*for SP*/
@media screen and (max-width:768px) {
    .font-size-S {
        font-size: 11px;
    }
    .font-size-M {
        font-size: 12px;
    }
    .font-size-L {
        font-size: 24px;
    }
}

/*for tablet*/
@media screen and (min-width:768px) and (max-width:1024px) {
    .font-size-S {
        font-size: 14px;
    }
    .font-size-M {
        font-size: 15px;
    }
    .font-size-L {
        font-size: 27px;
    }
}

/*for PC*/
@media screen and (min-width:1024px) {
    .font-size-S {
        font-size: 16px;
    }
    .font-size-M {
        font-size: 17px;
    }
    .font-size-L {
        font-size: 29px;
    }
}

/* ボックス5,6を罫線で包む */
.box5,.box6
         {border: solid 1px #ff9933;
          margin: 2px 1px 2px 1px}

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

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

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

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

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

/* ヘッダー画像 */
.box2        {margin: 0px 10px 0px 10px}

.box2 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: 26px}

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

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

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

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

/* ヘッダータイトル文字の表示の大きさの設定 */
.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: 39%}

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

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

.title h1      {font-size: 16px}





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


}

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

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

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

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

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

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

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

}