/*------------------------------------*\
    ベースルール
\*------------------------------------*/

html, body {
    width: 100%;
    height: 100%;
    font-family: Verdana, "游ゴシック", YuGothic, Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-size: 14px;
    line-height: 1;
}

/*------------------------------------*\
    レイアウトルール
\*------------------------------------*/

.nav-position {
    position: relative;
    width: 100%;
    height: auto !important; /* IE6対策 */
    height: 100%; /* IE6対策 */
    min-height: 100%;
    margin-bottom: 50px;
    padding-top: 60px; /* #navのheightと同じ高さにする */
}

.m-zero {
    background-color: #0CF;
}

.wrap {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/***** ナビ *****/
.nav {
    width: 100%;
    height: 60px; /*width: 200px、height: 60px以内のサイズで作成すること */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#88000000,EndColorStr=#88000000); /* ナビの背景色変更（IE7対策用） #88000000の88は透明度（00に近くなるほど透明） 000000は色設定（必ず6桁で書く） (サンプルデザイン用に設定) */
    background-color: rgba(0,64,151	,1.00); /*ナビの背景色変更*/
margin-bottom:20px;
}

.fixed {
    position: fixed;
    top: 0px;
    left: 0px;
}

.abso {
    position: absolute;
    top: 0px;
    left: 0px;
}

.logo {
    float: left;
    width: 35%;
    height: 60px; /* #navのheightと同じ高さにする */
}

.nav ul {
    float: right;
    width: 65%;
    height: 60px; /* #navのheightと同じ高さにする */
}

.nav ul li {
    float: left;
    padding-top: 2%; 
    padding-left: 2%; 
    color: #FFF;
}

.nav ul li a { color: #FFF; } 
/***** ナビここまで *****/

/***** フッター *****/
#footer {
    width: 100%;
    height: 100%;
    padding: 10px 0; 
    color: #FFF; 
    background-color: #333; 
}

#footer .headline {
    margin-bottom: 10px;
    padding-left: 8px;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #FFF;
}

#footer ul {
    width: 100%;
    margin-bottom: 10px; 
}

#footer ul li {
    float: left;
    width: 25%;
    padding-bottom: 10px;
}

#footer ul li a { color: #FFF; } 
/***** フッターここまで *****/


/*-----------------------------------------------------------------*\
    モジュールルール（コンテンツごとのカラム・デザインを決める場所）
\*-----------------------------------------------------------------*/

.st-col1, .st-col2, .st-col3, .st-col4, .st-col5, .st-col6, .st-img-txt, .st-txt-img { width: 100%; }

/***** ＰＣ画面のとき１カラム *****/

.st-col1 {
    margin: 10px 0;
    line-height: 1.3;
}

/***** ＰＣ画面のとき２カラム以上（数字はカラム数を示す） *****/

.st-col2 {
    margin: 10px 0;
    line-height: 1.3;
}

.st-col3 {
    margin: 10px 0;
    line-height: 1.3;
}

.st-col4 {
    margin: 10px 0;
    line-height: 1.3;
}

.st-col5 {
    margin: 10px 0;
    line-height: 1.3;
}

.st-col6 {
    margin: 10px 0;
    line-height: 1.3;
}

.st-col2 .col { /* ２カラム（margin・paddingの横幅を合わせて50％にする） */
    width: 49%;
    padding-right: 1%; /* カラムの間に空白を入れない場合は、paddingを消してwidth:50％にする */
}

.st-col3 .col { /* ３カラム（margin・paddingの横幅を合わせて33.3％にする） */
    width: 32.3%;
    padding-right: 1%; /* カラムの間に空白を入れない場合は、paddingを消してwidth:33.3％にする */
}

.st-col4 .col { /* ４カラム（margin・paddingの横幅を合わせて25％にする） */
    width: 24%;
    padding-right: 1%; /* カラムの間に空白を入れない場合は、paddingを消してwidth:25％にする */
}

.st-col5 .col { /* ５カラム（margin・paddingの横幅を合わせて20％にする） */
    width: 19%;
    padding-right: 1%; /* カラムの間に空白を入れない場合は、paddingを消してwidth:20％にする */
}

.st-col6 .col { /* ６カラム（margin・paddingの横幅を合わせて16.6％にする） */
    width: 15.6%;
    padding-right: 1%; /* カラムの間に空白を入れない場合は、paddingを消してwidth:16.6％にする */
}

.col .col{ float: none; }

/***** 画面２分割（左30％、右70％に幅を分ける） *****/

.st-img-txt {
    margin: 10px 0;
    line-height: 1.3;
}

.st-img-txt .col-img {
    float: left;
    width: 30%;
}

.st-img-txt .col-txt {
    float: right;
    width: 70%;
}

/***** 画面２分割（左70％、右30％に幅を分ける） *****/

.st-txt-img {
    margin: 10px 0;
    line-height: 1.3;
}

.st-txt-img .col-txt {
    float: left;
    width: 70%;
}

.st-txt-img .col-img {
    float: right;
    width: 30%;
    text-align: right; 
}

/***** フロート *****/
.col { float: left; }

/***** パンくずリスト *****/
.bcrumb { padding: 10px 0; } 

.bcrumb div { display: inline; }

.bcrumb a {
    text-decoration:none;
}

.bcrumb a:link { color: #000; }
.bcrumb a:visited { color: #000; }
.bcrumb a:hover { color: #000; }
.bcrumb a:active { color: #000; }

/***** TOPの大きな画像 *****/
.large-img {
    width: 100%;
    height: auto;
}
.large-img img {
    width: 100%;
    height: auto;
}

/***** divタグに入れることでそのコンテンツの配置場所（左詰め等）の設定 *****/
.lt { text-align: left; }
.ct { text-align: center; }
.rt { text-align: right; }

/***** clearfix（フロートさせた要素の親要素に付けるとフロート解除する） *****/
.clearfix:before, .clearfix:after, .st-col1:before, .st-col1:after, .st-col2:before, .st-col2:after, .st-col3:before, .st-col3:after, .st-col4:before, .st-col4:after, .st-col5:before, .st-col5:after, .st-col6:before, .st-col6:after, .st-img-txt:before, .st-img-txt:after, .st-txt-img:before, .st-txt-img:after {
    display: table;
    content: " ";
}

.clearfix:after, .st-col1:after, .st-col2:after, .st-col3:after, .st-col4:after, .st-col5:after, .st-col6:after, .st-img-txt:after, .st-txt-img:after {
    clear: both;
}

.clearfix, .st-col1, .st-col2, .st-col3, .st-col4, .st-col5, .st-col6, .st-img-txt, .st-txt-img {
    zoom: 1;
}
/***** clearfixここまで *****/


/***** 追加分 *****/

h1 {
    color: #FFF;
    font-weight: bold;
}

h2 {
    color: #FFF;
    font-weight: bold;
}

h1,h2 {
    display: inline;
}

/** リンク半透明化 **/
a:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* IE8以前 */
    -ms-filter: "alpha(opacity=50)"; /* IE8 */
    -moz-opacity: 0.5; /* Firefox */
}

/** リンク・ボタンの点線削除 **/
a:link, a:visited, a:active, a:hover {
    outline: none;
}

/* IE8+, Chrome */
input, button {
    outline: 0;
}

/* Firefox */
input::-moz-focus-inner, button::-moz-focus-inner {
    border: 0;
}

/** スマホ用ロゴ画像削除 **/
#toggle {
    display: none;
}

img {
    outline: none;
}

.headline {
    background-color: #1e7dff;
    margin-top:30px;
    margin-bottom:10px;
}

.sp-st-img-txt:before, .sp-st-img-txt:after {
    display: table;
    content: " ";
}

.sp-st-img-txt:after {
    clear: both;
}

.sp-st-img-txt {
    zoom: 1;
}

.catch-bk {
    background-image: url(../img/mizu-catch-bk.jpg);
    background-position:center;
    overflow:hidden;
}

.catch-height {
    margin: 0;
    height: 100px;
}

.m-top {
    margin-top: 30px;
}

#nav1,#nav2,#nav3,#nav4,#nav5 {
    margin-top: -30px;
    padding-top: 30px;
}

.kiji {
    color: #999;
    font-size:10px;
}

.word {
    border: solid #CCC 1px;
    color: #999;
    font-size:10px;
}

.word .col {
    margin:2px;
}

.in-link {
    font-size:10px;
}

.none-ubar a {
    text-decoration:none;
}

/** 画面下に画像固定 **/
.u-tel {
    display: none;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 50px;
    border-top: 2px solid #39F;
    background-image: url(../img/u-tel-bk.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
}

.u-tel div {
    text-align: center;
}