@charset "Shift_JIS";

html , body { /*ページ全体*/
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #CCFFFF;
}

#container{
    width: 800px;
    margin:0 auto;  /*画面中央寄せ*/
    position: relative; /*フッターを位置指定するための基準設定を、フッターの親に*/   
    min-height: 100%; /*フッター設定に必要*/
}



#header{
    float: left; /*左に浮動させる*/
}

#header p{
	color: #008080;
	font-size: 34px;
	font-weight: bold;
}

#header_sub{
    float: right; /*右に浮動させる*/
}

#header_sub p{
    color: #008080;
    font-size: 20px;
}

#navi{
    clear:both; /*浮動を解除する*/
    /*overflow: hidden;*/ /*ul要素の高さが自動算出されるようにする(floatによる問題を解消する)*/
    /*↑これがあると、サブメニューが表示されなかった*/
}

#navi img{
    width: 400px;
    height: 300px;
    border: 0;
}

#navi p{
    text-align: center;
}

/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
#navi ul.ddmenu {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 0px 0px; /* メニューバー内側の余白・・・[上][右][下][左]*/
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
#navi ul.ddmenu li {
   width: 155px;           /* メニュー項目の横幅(155px) */
   display: inline-block;  /* 横並びに配置する */
   /*list-style-type: none;*/  /* リストの先頭記号を消す ・・・inline-blockの場合は不要*/
   position: relative;     /* サブメニュー表示の基準位置にする */
}
#navi ul.ddmenu a {
   background-color: #008080; /* メニュー項目の背景色 */
   color: white;              /* メニュー項目の文字色 */
   line-height: 50px;         /* メニュー項目のリンクの高さ(50px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   font-size: 30px;
   display: block;            /* 項目内全域をリンク可能にする */
}
#navi ul.ddmenu a:hover {
   background-color: #2d56be; /* メニュー項目にマウスが載ったときの背景色*/
   color: white;              /* メニュー項目にマウスが載ったときの文字色*/
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
#navi ul.ddmenu ul {
   display: none;       /* 標準では非表示にする */
   margin: 0px;         /* サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* サブメニュー内側の余白(ゼロ) */
   position: absolute;  /* 絶対配置にする */
}

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */ 
/* ---------------------------------- */
#navi ul.ddmenu li:hover ul {
   display: block;      /* マウスポインタが載っている項目の内部にあるリストを表示する */
}

/* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
#navi ul.ddmenu ul li { 
   width: 280px;               /* サブメニュー1項目の横幅(280px) */
   border-top: 10px solid blue; /* 項目上側の枠線(青色で10pxの実線) */
}
#navi ul.ddmenu ul li a {
   line-height: 80px;   /* サブメニュー1項目の高さ(80px) */
   text-align: left;    /* 文字列の配置(左寄せ) */
   padding-left: 20px;  /* 文字列前方の余白(20px) */
   font-weight: normal; /* 太字にはしない */
}


#main{
    width: 100%;
    /*float:left;←この記述の為にフッター固定ができなかった*/
    margin-top: 1em;
    line-height: 1.4;
    padding-bottom: 30px; /*フッターの高さ(固定に必要)*/
}

#main p{
    font-size: 28px;
    -webkit-text-size-adjust: none;/*chromeで自動的にフォントサイズを調整する機能を無効にする*/
}

#main p.center{
    text-align: center;
}

#main p.right{
    text-align: right;
}

#main p.red{
    color: red;
}

#main p.blue{
    color: blue;
}

#main p.green{
    color: green;
}

#main p.purple{
    color: purple;
}

#main p.pink{
    color: pink;
}

#main p.coral{
    color: coral;
}

#main table.jikan{
    margin-right: auto;
    margin-left: auto;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #008080;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #008080;
}

#main table th.jikan{
    padding-top: 8px;
    padding-right: 15px;
    padding-bottom: 8px;
    padding-left: 15px;
    text-align: center;
    background-color: #F9D0DB;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #008080;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #008080;
    color: #008080;
    font-size: 28px;
}

#main table td.jikan{
    padding-top: 8px;
    padding-right: 15px;
    padding-bottom: 8px;
    padding-left: 15px;
    text-align: center;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #008080;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #008080;
    font-size: 28px;
}

#main ul{
    list-style-type: none;
    padding-left: 10px;
    background: pink;
    font-size: 28px;
}

#main ul li{

}

#main img.mail{
    width: 550px;
    height: 55px;
}

#main img.yobou{
    width: 780px;
    height: 550px;
}


#footer{
    clear: both; /*floatプロパティによる回り込みをすべて解除*/
    width: 800px;
    height: 30px; /*フッターの高さ*/
    position: absolute; /*フッターを絶対配置に指定*/
    bottom: 0; /*フッターを一番下に置く*/
}

#footer p{
    text-align:center; 
    font-size:0.85em; 
}

p{
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    padding-right: 0.1em;
    padding-left: 0.2em;
}

/*GoogleMapの埋め込み*/
.ggmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* =======================================================
  レスポンシブ設定
======================================================= */
@media screen and (min-width: 1024px) {
    body , html {
        /*background-color: #87cefa;*/
    }

    #header p{
        font-size: 24px;
    }

    #header_sub p{
        font-size: 14px;
    }

    #navi img{
        width: 200px;
        height: 150px;
    }

    #navi ul.ddmenu a {
        line-height: 25px;
        font-size: 16px;
        font-weight: normal; 
    }

    #navi ul.ddmenu ul li a {
       line-height: 20px; 
    }

    #navi ul.ddmenu ul li { 
       width: 170px;
       border-top: 2px solid blue; 
    }

    #main p{
        font-size: 16px;
    }

    #main table th.jikan{
        font-size: 16px;
    }

    #main table td.jikan{
        font-size: 16px;
    }

    #main ul{
        font-size: 16px;
    }

    #main img.mail{
        width: 300px;
        height: 30px;
    }
}