@charset "utf-8";

/* CSS Document */

body {
	background-color: #7daee9;	/*背景色*/
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	line-height: 1.7;
}

a {
	color: red;		/*文字色*/
	transition: 0.1s;	/*hoverまでにかける時間。0.2秒。*/
}

a:hover {
	opacity: 0.6;	/*マウスオン時に60%の透明度にする*/
}


/*画像全般の設定*/
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}



/*container
---------------------------------------------------------------------------*/
#container {
	max-width: 1050px;	/*サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}


/*ヘッダー*/
.header {
	width: 70%;
	padding: 20px 5%;			/*上下、左右へのヘッダー内の余白*/
	background: #ffffff;		/*背景色*/
	color: #000;				/*文字色*/
	font-size: 12px;
}


.headermenu {
		display: flex;					/*flexボックスを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		align-items: center;   /*垂直揃えの指定。天地中央に配置されるように。*/
	    margin-bottom: 10px;
}

.headerlogo {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;
}




/*メインコンテンツ*/
.whitewrap {
	width: 70%;
	padding: 20px 5%;			/*上下、左右へのヘッダー内の余白*/
	background: #ffffff;		/*背景色*/
	color: #000;				/*文字色*/
	font-size: 14px;
	justify-content: flex-start;
}

h1 {
	margin: 0 0 15px 0;
}


h2 {
	background-color: #7fdbe4;
	font-size:18px;
	color: #000;
	font-weight: bold;
	padding: 5px 3%;
}

h3 {                         /*リンクページ*/
   font-size: 16px;
   color: #0073a8;
   font-weight: bold;
   border-top: #666666 solid 1px;
   margin-bottom: 0;
   padding: 0px 10px 0px 10px;

}

.box01 {                          /*ダムトップページ*//*空撮ページ*/
	width: 100%;
	padding: 10px 0 0 0;
	background: #ffffff;		/*背景色*/
	color: #000;				/*文字色*/
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.item {                          /*ダムトップページ*/
    width: 340px;
	margin: 10px;
	border:1px solid #666666; /*全体の境界線を指定*/
    border-radius: 5px;      /* 角丸の指定 */
    background: #e3f3f9; /*背景色を指定*/
}

.item p {
	color: #ffffff;
	font-weight: bold;
    font-size: 1rem;
	background-color: #006aff;
	margin: 10px 10px 0 10px;
}

.item a{
	color: #03039a;

}

.item2 {                            /*空撮ページ*/
	display: block;
	color: #000;
	width: 340px;
	margin: 10px 10px;
	padding: 10px 0px;
	border-bottom: #666666 1px dotted;
}

@media screen and (max-width: 768px) {
     .box01 {
         display: block;
     }
     .box01 .item {
         width: 100%;
         margin: 10px auto;
     }
     .box01 .item2 {
         width: 100%;
         margin: 10px auto;
     }
 }


.box02 {                         /*リンクページ*/
	width:100%;
	padding: 10px 0 0 0;
	background: #ffffff;		/*背景色*/
	color: #000;				/*文字色*/
	display: flex;
	justify-content: center;
}

.linkitem {                         /*リンクページ*/
	width:28%;
	font-size: 0.8rem;
	margin: 0px 5px;
	padding: 5px 10px;
	border: 1px #666666 solid;
	text-align: center;
	line-height: 1.5;
	align-items: center;
}

.border-style1{                         /*フッター*/
	border-width: 1px;
	border-style: solid;
	border-top-color: #666666;
	margin: 40px 0 10px 0;
}




/*リスト .damtop
---------------------------------------------------------------------------*/
ul.damtop {
width:auto;
margin: 0;
padding: 5px;
position: relative;
font-size: 0.8rem;
line-height: 1.5;
list-style: none;
list-style-position: inside;
}
li.damtop {
padding:4px 5px 7px 5px; /*liの余白指定*/
margin-bottom: 7px; /* アイテム間の間隔 */
border-bottom: 1px #666666 dotted; /*liの下に境界線を指定*/
}
li.damtop:last-child {
border-bottom:none; /*最後のliだけborderを非表示に*/
}
li.damtop:hover {
  background-color: #a9def9; /* ホバー時の背景色 */
  font-weight: bold;
}







/*テーブル*/







/*スマホで改行
---------------------------------------------------------------------------*/
/*PCでは無効（改行しない）*/
.sp{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sp{
        display: block;
    }
}