@charset "utf-8";



/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;padding: 0px;
	color: #333;	/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 1.8;		/*行間*/
	background: #fff;	/*背景色*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form{margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
strong{font-size: 110%;}
textarea,select,input[type="text"],input[type="checkbox"],input[type="radio"],input[type="button"],input[type="submit"]{font-size: 100%;}
h1,h2,h3,h4 {font-family:"メイリオ",Meiryo,Verdana,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,Osaka,"ＭＳ Ｐゴシック",sans-serif;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #0000CD;	/*リンクテキストの色*/
	transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
	text-decoration: none;
}
a:hover {
	color: #cc0000;			/*マウスオン時の文字色*/
	text-decoration: underline;
}

.hover-img:hover { /*リンク画像マウスオン*/
	opacity: 0.7;
}

/*inner共通
---------------------------------------------------------------------------*/
.inner {
	width: 100%;
	margin: 0 auto;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header .inner {
    max-width: 100%;
	height: auto;
}
/*ロゴ画像*/
header #logo {
	display: block;
	height: 0;
	padding-top: 49.107142857%;
	background: url("../sm_img/head_logo.gif")no-repeat top center;
	background-size: auto 100%;
	text-indent: -9999px;
}
header .add {
	display: block;
	height: 0;
	padding-top: 48.672566371%;
	background: url("../sm_img/head_add.gif")no-repeat top center;
	background-size: 100%;
	text-indent: -9999px;
}



/*パンくずリスト
---------------------------------------------------------------------------*/
ol.pankuzu {
	margin: 10px 0 0 5%;
	padding: 0;
	list-style-type: none;
	font-size:14px;
	line-height: 1.2;
}

ol.pankuzu li {
	display: inline;
	padding-right: 2px;
}

ol.pankuzu li a {
	color: #333;
	padding-right: 5px; /* 右パディング */
	text-decoration: none;
}
ol.pankuzu li a:hover {
	color: #ff0000;
}

ol.pankuzu i {
	padding-right: 10px; /* 右パディング */
}


/*コンテンツ
---------------------------------------------------------------------------*/
.contents {
	clear: both;
	overflow: hidden;
	padding: 50px 10px;	/*上下、左右へのボックス内の余白*/
}

.clear {
	clear:both;
}

.no-display {
	display: none;
}


/*mainコンテンツ
---------------------------------------------------------------------------*/
#main {
	width: 100%;
}

/*mainコンテンツのh1.h2.h3.h4タグ設定*/
h1, h2, h3, h4 {
	clear: both;
	line-height: 1.2;
	font-weight: bold;
	padding: 0px 20px;	/*上、左右、下への余白*/
	margin-bottom: 10px;
}

/*見出し装飾 h1 肉球アイコン*/
.icon_title {
	position: relative;
	padding-top: 1em;
	padding-bottom: 1em;	
	padding-left: 3.5em;
	line-height: 1.4;
	color: #4169E1;
	font-size: 24px;
	margin-top: 30px;	
	margin-left: 2%;
	margin-right: 2%;	
	border-top: solid 2px #f5a8a8;
	border-bottom: solid 2px #f5a8a8;
	background: -webkit-repeating-linear-gradient(-45deg, #f3e1e1, #f3e1e1 3px,#f1d1d1 3px, #f1d1d1 7px);
	background: repeating-linear-gradient(-45deg, #f3e1e1, #f3e1e1 3px,#f1d1d1 3px, #f1d1d1 7px);
}

.icon_title :before {
	font-family: "Font Awesome 5 Free";
	content: "\f1b0";
	font-weight: 900;
	position: absolute;
	left: 0.5em;
	top: 25%;
	color: #e19999;
}

/*見出し装飾 緑ストライプ*/
.tilte-bg {
	border: 1px solid #b0eacd;  /* 線の太さ・種類・色 */
	padding: 1em;  /* 内側の余白 */
	margin-top: 30px;
	margin-left: 2%;
	margin-right: 2%;
	position: relative;
}
.tilte-bg:before {
	background-color: #21bf73;  /* 上部分ストライプの色1 */
	background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #b0eacd), color-stop(.5, transparent), to(transparent));  /* ストライプの色2 */
	background-image: -moz-linear-gradient(left, #b0eacd 50%, transparent 50%, transparent);  /* ストライプの色2 */
	background-image: -o-linear-gradient(left, #b0eacd 50%, transparent 50%, transparent);  /* ストライプの色2 */
	background-image: linear-gradient(left, #fb0eacd 50%, transparent 50%, transparent);  /* ストライプの色2 */
	background-size: 10px 10px;
	-webkit-background-size: 10px 10px;
	-moz-background-size: 10px 10px;
	content: '';
	display: inline-block;
	height: 5px;  /* ストライプの高さ */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
}
.tilte-bg:after {
	background-color: #21bf73;  /* 下部分ストライプの色1 */
	background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #b0eacd), color-stop(.5, transparent), to(transparent));  /* ストライプの色2 */
	background-image: -moz-linear-gradient(left, #b0eacd 50%, transparent 50%, transparent);  /* ストライプの色2 */
	background-image: -o-linear-gradient(left, #b0eacd 50%, transparent 50%, transparent);  /* ストライプの色2 */
	background-image: linear-gradient(left, #b0eacd 50%, transparent 50%, transparent);  /* ストライプの色2 */
	background-size: 10px 10px;
	-webkit-background-size: 10px 10px;
	-moz-background-size: 10px 10px;
	content: '';
	display: inline-block;
	height: 5px;  /* ストライプの高さ */
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}


/*段落タグ設定*/
.contents p {
	padding: 10px 20px;	/*上、左右、下への余白*/
}


/*listブロック
---------------------------------------------------------------------------*/
/*listブロック設定*/
.list {
	overflow: hidden;position: relative;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3) inset;	/*ボックスの影。右へ、下へ、ぼかす範囲。0,0,0は黒の事で0.3は透明度30%の事。insetは内側に向かう影。*/
	margin: 0 2% 30px;	/*上、左右、下へのボックスの外に空けるスペース*/
	background: #fff;	/*背景色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	padding: 4%;	/*ボックス内の余白*/
}
.list a {
	overflow: hidden;text-decoration: none;display: block;
}
/*h4タグ設定*/
.list h4 {
	padding: 0;border: none;
	font-size: 200%;	/*文字サイズ*/
	color: #2b3f7f;		/*文字色*/
	line-height: 1.2em;
	height: 1em;overflow: hidden;	/*１行を超えた部分は非表示になる*/
	margin-bottom: 0.5em;
}
/*段落タグ設定*/
.list p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.8;
	overflow: hidden;
}
/*figure画像の設定*/
.list figure img, .list02 figure img {
	margin: 0 0 4% 0;	/*上、右、下、左への画像の外側にとるスペース*/
}
/*figure画像の右側回り込みの設定*/
.list figure img.fr, .list02 figure img.fr {
	width: 30%;		/*画像幅*/
	float: right;	/*右に回り込み*/
	margin: 0 0 0 4%;	/*上、右、下、左への画像の外側にとるスペース*/
}
/*figure画像の左側回り込みの設定*/
.list figure img.fl, .list02 figure img.fl {
	width: 30%;		/*画像幅*/
	float: left;	/*左に回り込み*/
	margin: 0 4% 0 0;	/*上、右、下、左への画像の外側にとるスペース*/
}
/*右下の「→」マーク設定*/
.list a::before {
	content: "→";	/*このテキストを表示させる。変更しても構いませんが機種依存文字は化ける場合があるので使わない。*/
	font-size: 20px;	/*文字サイズ*/
	text-align: center;
	border-radius: 50%;	/*円形にする*/
	background: #b2b2b2;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.3);	/*背景色。0,0,0は黒の事で0.3は透明度30%の事。*/
	color: #fff;	/*文字色*/
	position: absolute;
	right: 10px;	/*右から10pxの場所に配置*/
	bottom: 10px;	/*下から10pxの場所に配置*/
	width: 30px;	/*幅*/
	line-height: 30px;	/*高さ*/
	transition: 1s;	/*マウスオン時の移り変わるまでの時間設定。1秒。*/
}
/*右下の「→」マークのマウスオン時*/
.list a:hover::before {
	background: #F47044;	/*背景色*/
	box-shadow: 0px 0px 0px 10px #F47044;	/*ボックスの影の指定ですが、円がそのまま大きくなるような動作になります。右へ、下へ、ぼかす範囲、距離。最後は色。*/
}
/*2カラム利用時--------------------------------------------*/
.c2 .list {
	float: left;	/*左に回り込み*/
	padding: 3%;	/*ボックス内の余白の上書き*/
	width: 40%;		/*幅*/
}
.c2 .list02 { /*枠・「→」なし*/
	float: left;	/*左に回り込み*/
	padding: 2%;	/*ボックス内の余白の上書き*/
	width: 46%;	/*幅*/
}

/*h4タグ*/
.c2 .list h4 {
	font-size: 130%;
}
/*p段落タグ*/
.c2 .list p {
	height: 5.4em;	/*上の「.list p」の「1.8」×「表示させたい行数」を設定。5.4だと3行分になる。*/
}
/*3カラム利用時--------------------------------------------*/
.c3 .list {
	float: left;	/*左に回り込み*/
	padding: 2%;	/*ボックス内の余白の上書き*/
	width: 25.3%;	/*幅*/
}
.c3 .list02 { /*枠・「→」なし*/
	float: left;	/*左に回り込み*/
	padding: 1%;	/*ボックス内の余白の上書き*/
	width: 31.3%;	/*幅*/
}

/*h4タグ*/
.c3 .list h4 {
	font-size: 110%;
}
/*p段落タグ*/
.c3 .list p {
	font-size: 80%;
	height: 7.2em;	/*上の「.list p」の「1.8」×「表示させたい行数」を設定。7.2だと4行分になる。*/
}
/*右下の「→」マークを少し小さく設定しなおす*/
.c3 .list a::before {
	width: 20px;
	line-height: 20px;
	font-size: 12px;
}


/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	font-size: 85%;	/*文字サイズ*/
	background: #94d3ac;	/*背景色*/
	color: #655c56;	/*文字色*/
}


/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
	clear: both;
	text-align: center;
	background: #94d3ac;	/*背景色*/
	color: #655c56;	/*文字色*/
}


/*ボタン(btn)の設定
---------------------------------------------------------------------------*/
input[type="submit"].btn,
input[type="button"].btn {
	padding: 15px;	/*ボタン内の余白*/
	margin-bottom: 30px;
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 3px;	/*角丸のサイズ*/
	background: linear-gradient(#fff, #eee);	/*グラデーション*/
}
/*マウスオン時の設定*/
input[type="submit"].btn:hover,
input[type="button"].btn:hover {
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;	/*背景色*/
	position: relative;top: 1px;left: 1px;	/*マウスオン時に上から1px、左から1px場所を移動する*/
}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
	position: fixed;
	bottom: 16px;
	right: 0;
	clear: both;
	z-index: 10;
}
#pagetop i {
	font-size: 50px;
	color: #363636;
}
#pagetop a {
	text-decoration: none;
	display: block;
	float: right;
	width: 100px;	/*幅*/
	max-width: 50%;
	line-height: 40px;
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
/*マウスオン時*/
#pagetop i:hover {
	color: #868686; 
}

/*お知らせ
--------------------------------------------------------------------------*/
.bg_news {
	margin: 10px 0 20px;
	padding: 20px 0 10px;
	width: 100%;
	background: #F8F36E;
	border: 2px solid #009900;
	border-radius: 5px;
    text-align: center;
}