@charset "utf-8";


/*PC・タブレット・スマホ共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #333;	/*全体の文字色*/
	background: #fff;	/*背景色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 14px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
    box-sizing: border-box;
	-webkit-text-size-adjust: none;
}
/*トップページの設定*/
body#top {
	background: #fff url() no-repeat center 60px;	/*背景色と背景画像の読み込み（古いブラウザ用）*/
	background: #fff url() no-repeat center 60px/auto 700px;	/*背景色と背景画像の読み込み。60pxというのはheaderの高さの事。autoは画像の幅、高さは700pxで指定。*/
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {list-style-type: none;}
ol {padding-left: 10px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
iframe {width: 100%;}

.off {
    display: none !important;
}

.wrap {
    overflow: hidden;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #333;	/*リンクテキストの色*/
}
a:hover {
	color: #1e2f5a;				/*マウスオン時の文字色*/
	text-decoration: none;		/*マウスオン時にリンクの下線を消す設定*/
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	background: #ca9d9d;	/*背景色*/
	height: 70px;			/*高さ*/
}
/*サイト幅にしたheader内のブロック*/
header .inner {
	width: 95%;	/*幅*/
	margin: 0 auto;
	overflow: hidden;
}
/*ロゴ画像*/
#logo{
    width: 110px;
}

#logo img {
	width: 100%;	/*画像幅*/
	margin-top: 18px;	/*header内でのバランスを取るために上にスペースをあける*/
	margin-left: 10px;	/*左側にスペースをあける*/
}

.backImg {
    background-color: #f1f1f1;
}

/*コンテンツ（main、subを囲むボックス。１カラム時でも使用。）
---------------------------------------------------------------------------*/
.contents {
	clear: both;
	overflow: hidden;
	padding: 40px 0px;	/*上下、左右へのボックス内の余白。*/
}
/*サイト幅にしたcontents内のブロック*/
.contents .inner {
	width: 1000px;	/*幅*/
	margin: 0 auto;
}
/*背景色つきタイプ*/
.contents.bg1 {
	background: #990200;	/*背景色*/
	border-top: 1px solid #e4e4e4;		/*上の線の幅、線種、色*/
	border-bottom: 1px solid #e4e4e4;	/*下の線の幅、線種、色*/
}
/*コンテンツのh2タグの設定*/
.contents h2 {
	clear: both;
	margin-bottom: 15px;
	color: #FFF;		/*文字色*/
	padding: 5px 15px;	/*上下、左右への余白*/
	background: #ca9d9d;	/*背景色*/
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);			/*同上*/
}
/*コンテンツのh3タグの設定*/
.contents h3 {
	clear: both;
	margin-bottom: 15px;
	padding: 4px 15px;	/*上下、左右への余白*/
	background: #f7e3e3;	/*背景色*/
	border: solid 1px #ccc;	/*線の線種、幅、色*/
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.1が透明度。*/
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);	/*同上*/
}
/*コンテンツの段落タグ設定*/
.contents p {
	padding: 0px 15px 14px;	/*上、左右、下への余白*/
}
.contents h2 + p,
.contents h3 + p {
	margin-top: -5px;
}

.case1{
	color: #FF0004;
}

.sagyo {
    background-color: #6a8fe7;
    color: #fff;
    border-radius: 5px;
    padding: 4px;
    margin-left: 1em;
}

.caution {
    background-color: #e86a6a;
    color: #fff;
    border-radius: 5px;
    padding: 4px;
    margin-left: 0.5em;
}

.nisu {
    background-color: #77bd5b;
    color: #fff;
    border-radius: 5px;
    padding: 4px;
    margin-left: 1em;
}

ol li {
    border-bottom: 1px solid #ccc;
}

ul li {
    line-height: 1.5em;
}

/*コンテンツ内のボックス（list1）設定
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list1 {
	float: left;	/*左に回り込み*/
	width: 32%;		/*幅*/
	background: #ca9d9d;	/*背景色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 6px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	height: 500px;			/*(CMS専用)*/
	height: 150px;			/*高さ（下の「.list a」の高さと揃える）*/
	line-height: 1.4;
	position: relative;
    box-sizing: border-box;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 0px 0px 3px rgba(0,0,0,0.3);			/*同上*/
}
.list1 a {
	display: block;
	overflow: auto;
	text-decoration: none;
	height: 150px;
    box-sizing: border-box;
}
.list1 a:hover {
	background: rgba(212, 32, 32,0.8);	/*マウスオン時の背景色*/
	border-radius: 6px;
	color: #FFF;		/*マウスオン時の文字色*/
}
/*ボックス内の画像設定*/
.list1 .img {
	width: 100%;	/*画像の幅*/
	height: 140px;	/*画像の高さ（CMS専用）高さを固定させたくないならこの１行だけ削除する。*/
	height: auto;	/*画像の高さ*/
	padding-bottom: 10px;	/*画像下に空ける余白*/
}
/*ボックス内のh4（見出し）タグ設定*/
.list1 h4 {
	padding-left: 15px;
	padding-bottom: 5px;
	font-size: 16px;	/*文字サイズ*/
	color: #FFF;
    position: absolute;
    top: 45%;
    margin-top: -1em;

}
/*ボックス内のp（段落）タグ設定*/
.list1 p {
	color: #FFF;
    position: absolute;
    top: 60%;
    margin-top: -1em;
}
.sinsabutton{
	visibility: hidden;
    width: 150px;
    height: 50px;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
	margin: 0;
	padding: 50px 0 0 10px;
	display: inline-block;
}
.list1 a:hover > span{
	visibility: visible;
}
.li{
	display: inline-block;
}

.area {
    border: 1px solid #d0d0d0;
	border-radius: 6px;
    background-color: #fff;
    padding: 10px;
    margin: 10px 0;
}

.area p {
    padding: 0;
    margin: 0;
}

.area2 {
    padding: 0 10px;
}

/*コンテンツ内のボックス（list2）設定
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list2 {
    margin: 0 2%;
}

/*コンテンツ内のボックス（list2）設定
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list3 {
    margin-right: 1%;
}

/*コンテンツ内のボックス（list4）設定
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list4 {
	width: 100%;		/*幅*/
	background: #ca9d9d;	/*背景色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 6px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	height: 500px;			/*(CMS専用)*/
	height: 100px;			/*高さ（下の「.list a」の高さと揃える）*/
	line-height: 1.4;
	position: relative;
    box-sizing: border-box;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 0px 0px 3px rgba(0,0,0,0.3);			/*同上*/
}
.list4 a {
	display: block;
	overflow: auto;
	text-decoration: none;
	height: 100px;
    box-sizing: border-box;
}
.list4 a:hover {
	background: rgba(212, 32, 32,0.8);/*マウスオン時の背景色*/
	border-radius: 6px;
	color: #FFF;		/*マウスオン時の文字色*/
}
/*ボックス内の画像設定*/
.list4 .img {
	width: 100%;	/*画像の幅*/
	height: 140px;	/*画像の高さ（CMS専用）高さを固定させたくないならこの１行だけ削除する。*/
	height: auto;	/*画像の高さ*/
	padding-bottom: 10px;	/*画像下に空ける余白*/
}
/*ボックス内のh4（見出し）タグ設定*/
.list4 h4 {
	padding-left: 15px;
	padding-bottom: 5px;
	font-size: 16px;	/*文字サイズ*/
	color: #FFF;
    position: absolute;
    top: 45%;
    margin-top: -1em;

}
/*ボックス内のp（段落）タグ設定*/
.list4 p {
	color: #FFF;
    position: absolute;
    top: 70%;
    margin-top: -1em;
}
.sinsabutton{
	visibility: hidden;
    width: 150px;
    height: 50px;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
	margin: 0;
	padding: 50px 0 0 10px;
	display: inline-block;
}
.list4 a:hover > span{
	visibility: visible;
}
.li{
	display: inline-block;
}
b {
    color: #e76a6a;
}

/*その他
---------------------------------------------------------------------------*/
.look {color:#fff;background: #666;padding:5px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.mt-top {margin-top: 50px;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 1em;list-style: disc;}
.color1 {color: #1e2f5a;}
.color2 {color: #1C00EF;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 30px;letter-spacing: 0.2em;}
.mini1 {font-size: 11px;}
.sh{display:none;}
.dn{display:none;}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

    /*全体の設定
    ---------------------------------------------------------------------------*/
    /*トップページの設定*/
    body#top {
        background: #fff url() no-repeat center 170px/auto 450px;
    }

    /*ヘッダー（サイトロゴが入った最上段のブロック）
    ---------------------------------------------------------------------------*/
    /*サイト幅にしたheader内のブロック*/
    header .inner {
        width: auto;
    }

    /
    /*コンテンツ（main、subを囲むボックス。１カラム時でも使用。）
    ---------------------------------------------------------------------------*/
    .contents {
        padding: 20px 0px;	/*上下、左右へのボックス内の余白。*/
    }
    /*サイト幅にしたcontents内のブロック*/
    .contents .inner {
        width: auto;
        margin: 20px;
    }

    /*main,subコンテンツ
    ---------------------------------------------------------------------------*/
    .main, .sub {
        float: none;
        width: auto;
    }

    /*コンテンツ内のボックス（list）設定
    ---------------------------------------------------------------------------*/
    /*ボックス１個あたりの設定*/




    /*その他
    ---------------------------------------------------------------------------*/
    .mt-top {margin-top: 50px;}
    body.s-n .sub {display: none;}

}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
    /*トップページの設定*/
    body#top {
        background-image: url();background-repeat: no-repeat;background-position: center 70px;background-size: 400px;	/*古いスマホ用*/
        background: #fff url() no-repeat center 70px/auto 350px;
    }

    .list1 {
        width: 100%;
    }

    .list2 {
        margin: 2px 0;
    }
    
/*その他
---------------------------------------------------------------------------*/
    .ws,.wl {width: 95%;}
    img.fr,img.fl {float: none;margin: 0;width: 100%;}
    .sh{display:block;}
    .pc{display:none;}
    .mt-top {margin-top: 50px;}
    .mt-top2 {padding: 0;}

}