/*==================
Navデザインパターン
====================*/
/* 01 navbar hover,focus時のテキストカラー */
.navbar-default .navbar-nav > li > a {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  }

/* 02 背景色と文字色が変わる*/
/*.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
background-color: transparent;
background:#77c2df;
}*/

/* 03 文字の色を変える*/
/*.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #369EC5;
background-color: transparent;
}*/

/*04 文字に影*/
/*.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
text-shadow:4px 4px 4px #6d6d6d;
border-color: #59b1eb;
}*/

/*05 下から線がにょっきり*/
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
padding-bottom:0;
border-bottom:1px solid red;
color:red;
}

@media (max-width: 991px) {
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
padding-bottom:9px;
}
}

/*==================
見出しデザインパターン
====================*/
/* 下に線 */
.h_01 {
	color: #2174af;
	border-bottom:1px solid #369EC5;
	padding: 0 0.5em;
	font-size: 24px;
	font-weight:400;
}

/* 左に線 */
.h_02 {
padding: 0 0.5em;/*上下 左右の余白*/
color: #77c3df;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 10px #369EC5;/*左線*/
font-size: 24px;
}

/* 背景色左斜めにカット */
.h_03 {
position: relative;
padding: 5px 5px 5px 42px;
background: #77c3df;
font-size: 20px;
color: white;
margin-left: -33px;
line-height: 1.3;
z-index:-1;
}

.h_03:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index:-2
}

/* 左右に線 */
.h_04 {
position: relative;
display: inline-block;
padding: 0 55px;
font-size: 24px;
color:#369EC5;
}

.h_04:before, .h_04:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: #369EC5;
}

.h_04:before {left:0;}
.h_04:after {right: 0;}

/* 下に小さい線 */
.h_05 {
font-family: 'Julius Sans One',游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
position: relative;
display: inline-block;
margin-bottom: 1em;
color:#666;
font-size: 35px;
text-align:center;
font-weight:300;
}

.h_05:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 1px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #2174af;
border-radius: 2px;
}

.h_05::first-letter {
	color:#2174af;
}

.h_05_ja {
	font-size:30px;
	font-weight:100;
}

/* 左右にスラッシュ */
.h_06 {
position: relative;
display: inline-block;
padding: 0 45px;
color:#369EC5;
font-size: 24px;
}
.h_06:before, .h_06:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 2px;
background-color: #369EC5;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.h_06:before {left:0;}
.h_06:after {right: 0;}

/*ツートンのボーダー*/
.h_07 {
border-bottom: solid 3px #77C2DF;
position: relative;
font-size: 26px;
color:#04719A;
}

.h_07:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #04719A;
bottom: -3px;
width: 20%;
}

/*グラデーションのライン*/
.h_08 {
position: relative;
padding: 0.25em 0;
font-size: 26px;
}
.h_08:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(4,113,154), transparent);
background: -webkit-linear-gradient(to right, rgb(4,113,154), transparent);
background: linear-gradient(to right, rgb(4,113,154), transparent);
}

/*左右にグラデーションのライン*/
.h_09 {
	position: relative;
	text-align: center;
	font-size:24px;
	color:#04719A;
}
.h_09 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 4em;
	padding: 0 1em;
	background-color: #eee;
	text-align: left;
}
.h_09::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #77c3df;
	background: -webkit-linear-gradient(-45deg, transparent, #77c3df 10%, #ccc 90%, transparent);
	background: linear-gradient(-45deg, transparent, #77c3df 10%, #77c3df 90%, transparent);
}

/*サブタイトルあり*/
.h_10 {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
	font-size:24px;
}


.h_10 span {
	display: inline-block;
	margin-bottom: .2em;
	color: #ccc;
	font-size: 10px;
	margin-left:1em;
	border-left:3px solid #ccc;
	padding-left:5px;
}

h2.h_11 {
	font-weight:200;
	font-size:20px;
	border-bottom:1px solid #ccc;
	margin-bottom:1em;
}


/*==================
content-boxのデザインパターン
====================*/
.bana_box {
	position: relative;
}

.bana_box img {
	width:100%;
	left:0;
	right:0;
	border:1px solid #ccc;
	border-radius:4px;
	padding:2px;
	box-shadow:0 0 5px #eee;
	object-fit: cover;
    height: 200px;
}

.bana_box a:hover {
	opacity: .7;
}

.bana_box p {
	position: absolute;
	left:3px;
	right:3px;
	bottom:3px;
	z-index:10;
	color:#fff;
	background:rgba(0,0,0,.5);
	text-align:center;
	font-size:20px;
}

.shadow_box {
	padding:3px;
	box-shadow:0 0 5px #ccc;
}

.cont-box01 {
	margin:30px auto;
	padding:10px;
}