/***** サンプルデザイン用に設定と書かれたところは自由にカスタマイズが可能 *****/

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

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%;
    padding-top: 60px; /* #navのheightと同じ高さにする */
}

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

.wrap {
    width: 960px; /* サンプルデザイン用に設定（数値を変更する場合は、変更後の数値に合わせて画像を作成すること） */
    margin-left: auto;
    margin-right: auto;
}

/***** ナビ *****/
.nav {
    width: 100%;
    height: 60px; /* ※※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,0,0,0.7); /*ナビの背景色変更（サンプルデザイン用に設定）*/
}

.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; }

/***** 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;
}

.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/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;
}