@charset "utf-8";
/*==========================================
ナビ
===========================================*/


@media print, screen and (min-width:790px) {
	
	/* 共通 */
	nav ul {
		margin:0;
		padding:0;
	}

	nav ul li {
		position:relative;
		margin:0;
		padding:0;
		list-style:none;
	}

	nav ul li a {
		display:block;
		margin:0;
		padding:16px 0;
		background:#4077BE;
		color:#fff;
		font-size: 18px;	/*文字サイズ*/
		line-height:1;
		border-right: 1px solid #dcdcdc;	/*右の線の幅、線種、色*/
		text-decoration:none;
	}

	nav ul li:hover > a ,
	nav ul li .current-menu-item a {
		color:#fff;
		background:#0f7999;
	}

	/* 1段目 */
	nav ul.gnav > li {
		position:relative;
		width:16.66%;
		float:left;
		margin:0;
		padding:0;
		text-align:center;
		list-style:none;
		box-sizing: border-box;
	}

	nav ul.gnav > li:first-child {		
	border-left: 1px solid #dcdcdc;	/*左の線の幅、線種、色*/
	}

	nav ul.gnav > li.nav01 a {
		padding-right:15px;
	}

	nav ul.gnav > li.nav01 > a:after {
		position:absolute;
		content:"";
		top:20px;
		width:0;
		height:0;
		margin-left:10px;
		border:5px solid transparent;
		border-top-color:#fff;
	}

	/* 2段目 */
	nav ul li ul {
		position:absolute;
		z-index:3;
		top:100%;
		left:0;
		width:100%;
		margin:0;
		padding:0;
	}

	nav ul li ul li {
		overflow:hidden;
		width:100%;
		height:0;
		color:#fff;
		transition:.2s;
	}

	nav ul li ul li a {
		padding:13px 15px;
		text-align:left;
		background:#6badc2;
		border: 1px solid #fff;	/*下の線の幅、線種、色*/
	}

	nav ul li:hover > ul > li {
		overflow:visible;
		height:40px;
		border-bottom:1px solid #8c0e0e;
	}

	nav ul li:hover ul li:last-child {
		border-bottom:none;
	}



	nav ul li ul li ul:before {
		position:absolute;
		content:"";
		top:13px;
		left:-20px;
		width:0;
		height:0;
		border:5px solid transparent;
		border-left-color:#fff;
	}

	nav ul.gnav > li:last-child ul li ul:before {
		position:absolute;
		content:"";
		top:13px;
		left:200%;
		margin-left:-20px;
		border:5px solid transparent;
		border-right-color:#fff;
	}

	/* 3段目 */
	nav ul li ul li ul {
		top:0;
		left:100%;
	}

	nav ul li ul li ul li {
		width:100%;
	}

	nav ul li ul li:hover > ul > li {
		border-bottom:1px solid #6d0c0c;
	}

	nav ul.gnav > li:last-child > ul li ul {
		left:-100%;
	}

	nav ul li ul li ul li a {
		background:#590000;
	}

	nav ul li ul li ul li a:hover {
		background:#420404;
	}

	.gnav {
		display:block !important;
	}

	#spMenu {
		display:none;
	}

	.fixed {
		position:fixed;
		top:0;
		left:0;
	}
	.box1{
	background:transparent;
	border:none;
	box-shadow: none;
	display: flex;
	align-items: center;
	}
}


/*listブロック
---------------------------------------------------------------------------*/
/*listブロック設定*/
.list {
	overflow: hidden;position: relative;
	margin: 30px 1% 30px;	/*上、左右、下へのボックスの外に空けるスペース*/
	background: #CFE3F8;	/*背景色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	padding: 4%;	/*ボックス内の余白*/
	vertical-align: top;
}
.list a {
	overflow: hidden;
	text-decoration: none;
	}

.list time{
	font-size: 85%;
	color: #296dc6;
	line-height: 2.4em;
}

.bg1 .c3 .list {

    overflow: hidden;
    position: relative;
    margin: 30px 1% 30px;
    background: #F0F0F0;
    transition: 0.5s;

}

/*h4タグ設定*/
.list h4 {
	padding: 0;border: none;
	font-size: 200%;	/*文字サイズ*/
	color: #50679A;		/*文字色*/
	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 {
	margin-bottom: 5px ;	/*下の画像の外側にとるスペース*/
}
/*figure画像の右側回り込みの設定*/
.list figure img.fr {
	width: 50%;		/*画像幅*/
	float: right;	/*右に回り込み*/
	margin: 0 0 0 4%;	/*上、右、下、左への画像の外側にとるスペース*/
}
/*figure画像の左側回り込みの設定*/
.list figure img.fl {
	width: 20%;		/*画像幅*/
	float: left;	/*左に回り込み*/
	margin: 0 4% 0 0;	/*上、右、下、左への画像の外側にとるスペース*/
}
/*右下の「→」マーク設定*/
.c3 .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秒。*/
}
/*右下の「→」マークのマウスオン時*/
.c3 .list a:hover::before {
	background: #6badc2;	/*背景色*/
	box-shadow: 0px 0px 0px 10px #6badc2;	/*ボックスの影の指定ですが、円がそのまま大きくなるような動作になります。右へ、下へ、ぼかす範囲、距離。最後は色。*/
}
/*2カラム利用時--------------------------------------------*/

.c2 .list {
	overflow: hidden;position: relative;
	background: none;
	margin-top: 30px;	/*上、左右、下へのボックスの外に空けるスペース*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	padding: 0;	/*ボックス内の余白*/
}

.c2 .list ul {
	padding: 0%;	/*ボックス内の余白の上書き*/
	margin: 0;
	width: 100%;		/*幅*/
	text-align: center; /* 中央寄せ */
	
}
.c2 .list li {
    padding:5px 0;
    margin: 8px 5px;
    width: 32%;
    box-sizing:border-box;
    display: inline-block; /* 横並びに */
    text-align: center;
    
}

.c2 .list img{
	float: left;	/*左に回り込み*/
	}

/*トピック--------------------------------------------*/
.c2 .topic {
	overflow: hidden;position: relative;
	background: none;
	margin-top: 30px;	/*上、左右、下へのボックスの外に空けるスペース*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	padding: 0;	/*ボックス内の余白*/
}

.c2 .topic ul {
	padding: 0%;	/*ボックス内の余白の上書き*/
	margin: 0;
	width: 100%;		/*幅*/
	text-align: center; /* 中央寄せ */
	
}

.c2 .topic li {
    padding:5px 0;
    margin: 8px 5px;
    width: 27%;
    box-sizing:border-box;
    display: inline-block; /* 横並びに */
    text-align: center;
    
}

.c2 .topic img{
	float: left;	/*左に回り込み*/
	width: 320px;	/*幅*/
}
/*h4タグ*/
.c2 .list h4 {
	font-size: 130%;
	margin-top: 8px;
}

/*リンク--------------------------------------------*/

.c2 .link {
	overflow: hidden;position: relative;
	background: none;
	margin-top: 30px;	/*上、左右、下へのボックスの外に空けるスペース*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	padding: 0;	/*ボックス内の余白*/
}
.c2 .link  ul {
	padding: 0%;	/*ボックス内の余白の上書き*/
	margin: 0;
	width: 100%;		/*幅*/
	text-align: center; /* 中央寄せ */
	
}
.c2 .link  li {
    margin: 8px 5px;
    width: 27%;
    box-sizing:border-box;
   text-align: center;
    
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 0.5em 1em;
    text-decoration: none;
    border-left: solid 4px #668ad8;
    border-right: solid 4px #668ad8;
    color: #668ad8;
    text-shadow: 0 0 5px white;
    padding: 0.5em 1em;
    background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    transition: .4s;
    vertical-align: top;
}


/*右の写真回り込み--------------------------------------------*/

#right-box {
  width: 95%;
margin: auto;
  overflow: hidden;/*float解除*/
}

.c2 #right-box img{
	float: right;	/*右に回り込み*/
	width-max: 320px;	/*幅*/
	margin-left: 30px;
}

#right-box-yoko{
  width: 95%;
margin: auto;
  overflow: hidden;/*float解除*/
}

.c2 #right-box-yoko img{
	float: right;	/*右に回り込み*/
	width-max: 320px;	/*幅*/
	margin-left: 30px;
}


.flowWrap {
    background: url(../images/img_01.png) repeat-y 10px 0;
}
.flowWrap h4 span {
    display: inline-block;
    margin: 0 10px 0 35px;
    color: #1096F8;
}

 #right-box .flowWrap p {
padding: 0px 20px 15px;
}

#right-box .flowWrap  h4 {
    background: url(../images/h4_bg.png) 0 7px no-repeat;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 0px 30px;
	border-left: none;
border-bottom: none;
}
.br-sp { display:none; }

/*左の写真回り込み--------------------------------------------*/

#left-box {
  width: 95%;
margin: 0 auto;
  overflow: hidden;  /*float解除*/
}

  #left-box section.content  img{
	float: left;	/*右に回り込み*/
	margin-bottom: 20px;
	margin-right: 30px;

}
/*3カラム利用時--------------------------------------------*/
.inner .c3  {
	margin : 0 auto;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


.c3 .list {
	display: inline-block;
	padding: 2%;/*ボックス内の余白の上書き*/
	width: 26.5%;	/*幅*/
	box-shadow: 2px 2px 4px gray;
	margin-right: auto;
}
/*h4タグ*/
.c3 .list h4 {
    font-size: 140%;
    letter-spacing: 1px;
}
/*p段落タグ*/
.c3 .list p {
	font-size: 80%;

}
/*右下の「→」マークを少し小さく設定しなおす*/
.c3 .list a::before {
	width: 20px;
	line-height: 20px;
	font-size: 12px;
}

/*4カラム利用時--------------------------------------------*/
.inner .c4  {
	margin : 0 auto;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.c4 .list {
	float: left;	/*左に回り込み*/
	width: 22%;	/*幅*/
	overflow: hidden;position: relative;
	margin: 5px 1% 15px ;	/*上、左右、下へのボックスの外に空けるスペース*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	padding: 0.3%;	/*ボックス内の余白*/
	background: none;

}

/*h4タグ*/
.c4 .list h4 {
	font-size: 110%;
}
/*p段落タグ*/
.c4 .list p {
	font-size: 80%;
	height: 7.2em;	/*上の「.list p」の「1.8」×「表示させたい行数」を設定。7.2だと4行分になる。*/
}