@charset "utf-8";
/* CSS Document */
/* color.css */
/* =================================
           ▼配色
==================================*/
body {
	color: #333333;
}

/*=================================
*	ID名：mddNav
*	説明：メニュー
*	使用：menu
*
==================================*/
#mddNav > ul > li > a {
  color: #FFF;
}
/*PC*/
@media print, screen and (min-width:768px){
	#mddNav > ul > li > a:hover{
		background: #246BB3;
		color:#FFF;
	}
}
 #mddNav > ul > li > a:focus{
	background: #246BB3;
	color:#FFF;
}
/*=================================
*	ID名：info-box
*	説明：各種お知らせのリンク
*	使用：サイドバー
*
==================================*/
#info-box div{
	background-color:#3399ff;
	background: -prefix-linear-gradient(top, rgb(74,182,244), rgb(60,151,204));
	background: linear-gradient(to bottom, rgb(74,182,244),  rgb(60,151,204));
}
#info-box a{
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
#info-box div a:hover,#info-box div a:focus{
	background: #246BB3 !important;
	color:#FFF;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
/*=================================
*	ID名：policy
*	説明：各種お知らせのリンク
*	使用：フッター
*
==================================*/
#policy{
	background-color:#44aeeb;
}
/*=================================
*	ID名：footer
*	説明：フッターナビ
*	使用：フッター
*
==================================*/
#footer{
	background-color:#fffbfa;
	color:#333;
}
#footer-link>ul>li>a{
	color:#333;
}
.submenu li a{
	color:#333;
}
/*=================================
*	ID名：address
*	説明：各種お知らせのリンク
*	使用：フッター
*
==================================*/
#address{
	background-color:#fffbfa;
	color:#333;
}
/*=================================
*	ID名：copylight
*	説明：各種お知らせのリンク
*	使用：フッター
*
==================================*/
#copylight{
	background-color:#ec9cab;
}
.copyright{
	color:#FFF;
}
/*=================================
*	クラス名：.bgc-main
*	説明：ホームページのメインとなる色
*	使用：メニューボタン,footer
*
==================================*/
.bgc-main{
	/*#09c 青*/
	background-color:#ec9cab;
	/*background: -prefix-linear-gradient(top, rgb(74,182,244),  rgb(60,151,204));
	background: linear-gradient(to bottom, rgb(74,182,244),  rgb(60,151,204));*/
	/*background-color:#90c6e9;*/
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
.bgc-main a{
	/*#09c 青*/
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
.bgc-main > a:hover{
	background: #f0aeba !important;
	color:#FFF;
	/*background:#FFF;
	color:#0099cc !important;*/
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
a:hover > .bgc-main{
	background-color:#f0aeba;
	background: #f0aeba !important;
	color:#FFF;
	/*background-color: #FFF;
	background:#FFF;
	color:#0099cc !important;*/
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
/*=================================
*	クラス名：.fc-main
*	説明：bgc-mainと同じ文字色
*	使用：
*
==================================*/
.fc-main{
	color:#e0327a;
}
/*=================================
*	クラス名：.bc-main
*	説明：bgc-mainと同じ線の色
*	使用：
*
==================================*/
.bc-main{
	border-color:#ec9cab;
}
/*=================================
*	クラス名：.bgc-dub
*	説明：サブカラー
*	使用：
*
==================================*/
.bgc-sub{
	background-color: #e0327a
}

/*=================================
*	クラス名：.bgc-white
*	説明：ホームページのメインとなる色
*	使用：header-line, footer
*
==================================*/
.bgc-white{
	background-color:#FFF;
	/*background-color:#90c6e9;*/
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
.bgc-white > a:hover{
	background-color: #0099cc !important;
	color:#FFF !important;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
a:hover >.bgc-white{
	background-color: #0099cc !important;
	color:#FFF !important;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
/*=================================
*	クラス名：.bgc-info
*	説明：
*
==================================*/
.bgc-info{
	background-color:#f38fac; /*ピンク*/
	background: -prefix-linear-gradient(top, rgb(240, 174, 186), rgb(243, 143, 202));
	background: linear-gradient(to bottom, rgb(240, 174, 186), rgb(243, 143, 202));
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
.bgc-info > a:hover{
	background-color: #FFF !important;
	color:#f38fac;  !important;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
a:hover > .bgc-info{
	background-color: #FFF !important;
	color:#f38fac;  !important;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
/*=================================
*	クラス名：.bc-info
*	説明：bgc-infoと同じ線の色
*	使用：
*
==================================*/
.bc-info{
	border-color:#f38fac !important;
}
/*=================================
*	クラス名：.bgc-foot
*	説明：フッター（アドレス部）の背景色
*
==================================*/
.bgc-foot{
	background-color:#cce8fa; /*薄いピンク*/
}
/*=================================
*	クラス名：.fc-gray
*	説明：灰色の文字
*	使用：
*
==================================*/
.fc-def , .fc-def *{
	color:#333;
}
.fc-def a:hover{
	color:#999 !important;
}
.fc-def a:focus{
	color:#999 !important;
}
a:hover .fc-def{
	color:#999 !important;
}
/*=================================
*	クラス名：.fc-white
*	説明：白色の文字
*	使用：
*
==================================*/
.fc-white , .fc-white *{
	color:#FFF !important;
}
.fc-white a:hover{
	/*font-size:1.1em !important;*/
	/*font-weight:bold !important;*/
}
.fc-white a:focus{
	/*font-size:1.1em !important;*/
}
/*=================================
*	クラス名：.bc-gray
*	説明：灰色の線
*	使用：
*
==================================*/
.bc-gray{
	border-color:#CCC !important;
}
/*=================================
*	クラス名：.fc-gray
*	説明：灰色の文字
*	使用：
*
==================================*/
.fc-gray , .fc-gray *{
	color:#999 !important;
}
/*=================================
*	クラス名：.my-brand
*	説明：ブランドロゴ(ホームボタン)
*	使用：トップページ
*
==================================*/
.my-brand a{
	color:#FFF !important;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
.my-brand a:hover{
	background-color: #FFF !important;
	color:#09C !important;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
.my-brand a:focus{
	background-color: #FFF !important;
	color:#09C !important;
}
/*スマホメニュー*/
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
	background-color: #FFF !important;
	color:#33b7a5 !important;
}
.navbar-default .icon-bar{
	background-color:#FFF !important;
}
.navbar-toggle:hover .icon-bar, .navbar-toggle:focus .icon-bar{
	background-color: #33b7a5 !important;
}

/*=================================
*	クラス名：.my-navbar
*	説明：ナビゲーションメニュー
*	使用：
*
==================================*/
.my-navbar .my-menu > a{
	color:#FFF !important;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
.my-navbar .my-menu > a:hover{
	background-color: #FFF !important;
	color:#09C !important;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
.my-navbar .my-menu > a:focus{
	background-color: #FFF !important;
	color:#09C !important;
}
/*=================================
*	クラス名：.my-dropmenu
*	説明：ドロップメニュー
*	使用：
*
==================================*/
.my-dropmenu li a:hover{
	background:#09C;
	color:#FFF;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}

/*=================================
*	クラス名：.box-radius
*	説明：角丸ボタン
*	使用：
*
==================================*/
.box-radius{
	border: 1px solid #669;
	box-shadow: 0 15px 10px -10px rgba(51, 51, 51, 0.4),
				inset 0 1px 0 rgba(255, 255, 255, 0.8),
                inset 1px 0 0 rgba(255, 255, 255, 0.3),
                inset -1px 0 0 rgba(255, 255, 255, 0.3),
                inset 0 -1px 0 rgba(255, 255, 255, 0.2);
	text-shadow:  0 -1px 0 #555,
                      0 1px 0 rgba(255, 255, 255, 0.5),
                      1px 0 0 rgba(255, 255, 255, 0.3),
                      -1px 0 0 rgba(255, 255, 255, 0.3);
}
/*=================================
*	クラス名：.box-rect
*	説明：背景サブ色の長方形
*	使用：トップページ
*
==================================*/
.box-rect{
	border:1px #EEE solid;
	background-color: #99cc33;
	/*box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);*/
}
a .box-rect{
	color:#333;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s ;
}
a:hover .box-rect{
	color:#FFF;
	background-color: #690;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s ;
}

/*=================================
*	クラス名：.box-img
*	説明：画像の背景の長方形
*	使用：トップページ
*
==================================*/
.box-img{
	background-color: #FFF;
	/*box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);*/
}
/*=================================
*	クラス名：.my-tab
*	説明：タブ
*	使用：トップページ
*			info1:すべて
*			info2:JA
*			info3:連合会
*			info4:メディア
*			info5:その他
==================================*/
/*=====================info1=====================*/
.my-tab #info1 a{
	background-color:#FFF;
	border-top:1px solid #CCC;
	border-right:1px solid #CCC;
	border-left:1px solid #CCC;
	border-bottom:none;
	color: #333;
}
/*=====================info2=====================*/
.my-tab #info2 a{
	background-color:#cceedf;
	color: #333;
}
/*=====================info3=====================*/
.my-tab #info3 a{
	background-color:#d1e5f3;
	color: #333;
}
/*=====================info4=====================*/
.my-tab #info4 a{
	background-color:#dbd9ea;
	color: #333;
}
/*=====================info5=====================*/
.my-tab #info5 a{
	background-color:#fbdde1;
	color: #333;
}
/*=================================
*	クラス名：.tab-innerbox
*	説明：タブ下ボックスの線
*	使用：トップページ
*
==================================*/
.tab-innerbox{
	border-top-color:#09c;
	border-right-color:#CCC;
	border-bottom-color:#CCC;
	border-left-color:#CCC;
}
/*=================================
*	クラス名：.lbl-*
*	説明：新着情報のラベル
*	使用：トップページ
*
==================================*/
.category span{
	padding:0.2em 0.5em;
	color:#FFF;
	font-size:smaller;
}
/*ＪＡ*/
.lbl-ja-news{
	border:1px solid #00a95f;
	background-color:#00a95f;
}
.lbl-ja-news+.lbl-cat{
	border:1px solid #00a95f;
	background-color:#FFF;
	color: #00a95f;
}
/*連合会*/
.lbl-rengou{
	border:1px solid #187fc4;
	background-color:#187fc4;
}
.lbl-rengou+.lbl-cat{
	border:1px solid #187fc4;
	background-color:#FFF;
	color:#187fc4;
}
/*メディア*/
.lbl-media{
	border:1px solid #4d4398;
	background-color:#4d4398;
}
.lbl-media+.lbl-cat{
	border:1px solid #4d4398;
	background-color:#FFF;
	color:#4d4398;
}
/*その他*/
.lbl-other{
	border:1px solid #f6ad3c;
	background-color:#f6ad3c;
}
.lbl-other+.lbl-cat{
	border:1px solid #f6ad3c;
	background-color:#FFF;
	color:#f6ad3c;
}
/*=================================
*	クラス名：.side-navi
*	説明：サイドバーのページナビ
*	使用：サイドバー
*
==================================*/
ul.side-navi li a:hover,ul.side-navi li a:focus,ul.side-navi li.active{
	color:#333;
	background-color:#fbe2ec;
	-webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
	transition: 0.4s;
}
/*=================================
*	クラス名：.txt-tel
*	説明：電話番号
*	使用：トップページ
*
==================================*/
.txt-tel{
	color:#3399ff;
	font-weight:bold;
	font-size:1.2em;
}
/*=================================
*	クラス名：.policy-list
*	説明：各種方針のリスト
*	使用：フッター
*
==================================*/
.policy-list li a:hover {
	color:#FFF;
}
/*=================================
*	クラス名：.sub-menu
*	説明：フットナビの子要素
*	使用：フッター
*
==================================*/
.sub-menu li a:hover{
	color:#FFF !important;
}
/* =================================
*	クラス名：.stitch
*	説明：縫い目の様な線のボックス
*	使用：Adobe Readerダウンロードバナー他
*
==================================*/
.stitch{
	background-color:#edfffa !important;
	border: 2px dashed #e3e3e3 !important;
}
/* =================================
*	クラス名：.balloon-top-left
*	説明：吹き出し型ボックス
*	使用：メッセージ
*
==================================*/
/* balloon top-left */
.balloon{
	position: relative;
	display: block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	text-align: left;
	margin-bottom:10px;
	z-index: 2 !important;
}
.balloon-top-left:before{
	content: "";
	position: absolute;
	top: -10px;
	left: 20px;
	margin-left: 0;
	display: block !important;
	width: 30px;
	height: 30px;
	background: #E1FAE3;
	border-radius: 30px 0 30px 0;
	z-index: -1;
}
.balloon-top-left:after{
	content: "";
	position: absolute;
	top: -5px;
	left: 30px;
	margin-left: 0;
	display: block !important;
	width: 30px;
	height: 30px;
	background: #FFF;
	border-radius: 30px 0 30px 0;
	z-index: -1;
	-webkit-transform: rotate(-30deg);
	   -moz-transform: rotate(-30deg);
	    -ms-transform: rotate(-30deg);
	     -o-transform: rotate(-30deg);
	        transform: rotate(-30deg);
}
.balloon-top-left{
	padding: 15px;
	background: #E1FAE3;
	border-radius: 10px;
	z-index: 99 !important;
}