/*==================================================
吹き出し用
===================================*/
/* 吹き出し（balloon) */
.balloon {
	position: relative;
	display: inline-block;
	width: 70%;
	margin: 0.5em 0 6em 20%;
	padding: 10px 10px;
	border: solid 2px #696969;
	background-color: #ffffff;
}

/*ふきだしのしっぽ設定（共通）*/
.balloon:before,
.balloon:after{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	margin: auto;
}

/*ふきだしのしっぽ設定(右向き三角)*/
.balloon:before {
	top:1em;
	right: -21px;
/* 右向き三角を作成したい場合は、border-left以外のborderの色をtransparentにする。*/
	border-style: solid;
	border-width: 10px;
	border-color: transparent transparent transparent #696969;/*上右下左*/
}

/*ふきだしのしっぽ設定（内側の透明三角）*/
.balloon:after {
	top:1em;
/* 内側は#ffffffでべた塗。枠線の幅はrightで調整する。 */
	right: -19px;
	border-style: solid;
	border-width: 10px;
	border-color: transparent transparent transparent #ffffff;
}

/*吹き出し横のイメージ画像*/
.balloon .icon { 
	position: absolute;
	right: -110px;
	width: 100px;
	top: 0;
}

/*==================================================
アコーディオン用
===================================*/
/*アコーディオン全体*/
.accordion-area{
	list-style: none;
	width: 100%;
	margin:0 auto;
}

/*アコーディオンタイトル*/
.accordion-title {
	cursor: pointer;
	transition: all .5s ease;
}

/*アイコンの▼▶*/
.accordion-title::before{
	content: "▶";
}

/*closeというクラスがついたら形状変化　*/
.accordion-title.close::before{
	content: "▼";
}

/*アコーディオンで現れるエリア*/
.accordion-box {
	display: none;/*はじめは非表示*/
}


/*==================================================
地域防災支援資料ページ用
===================================*/
/* タイムライン説明用 */
.timeline-title {
	margin-left: 10px;
}

.timeline-title li {
	border-left: solid 10px #D0CECE;
	border-bottom: solid 2px #D0CECE;
	margin-top: 5px;
	padding-left: 3px;
	font-weight:bold;
	font-size: 130%;
	background-color: #ffffff;
}

.timeline-title .info {
	font-weight:bold;
}

.timeline-title .info-text {
	margin-left: 1em;
}

/* 説明文用基本形 */
.column {
	margin: 10px;
	margin-top: 0px;
	margin-bottom: 2em;
}

/* 東京都での事例用 */
.column-tokyo-jirei {
	margin: 10px;
	padding: 2px 5px;
	border: dotted 2px #000000;
	background-color: #ffffff;
}

/* 文例などのコラム用 */
.column-bunrei {
	margin: 10px;
	padding: 2px 5px;
	border: solid 1px #000000;
	background-color: #ffffff;
}

/* 予想より大幅に多くなった場合用 */
.topics01 {
	border: dotted 3px #f08080;
	padding: 10px;
	background-color: #fff8dc;
}

/* 予想より大幅に少なくなった場合用 */
.topics02 {
	border: dotted 3px #9370db;
	padding: 10px;
	background-color: #f0f8ff;
}

/* ページ内スクロール用 */
html {
	scroll-behavior: smooth;
} 

h3 {
	background: linear-gradient(transparent 80%, #a7d6ff 80%);
	padding-top: 2px;
	padding-left: 5px;
	font-weight:bold;
	font-size: 130%;
}

h4 {
	margin-top: 10px;
	border-bottom: double 5px #D0CECE;
	font-weight:bold;
}

/* 目次用 */
.mokuji {
	border: dotted 1px #000000;
	margin-left: 10px;
	margin-right: 10px;
	padding-bottom: 0px;
	padding-left: 1em;
	background-color: #ffffff;
}

.mokuji h4 {
	margin-top: 5px;
	margin-right: 10px;
	border-bottom: double 3px #D0CECE;
	font-weight:bold;
}

/*イメージ用枠*/
.image-frame {
	border: solid 1px #000000;
	background-color: #ffffff;
	margin-left: 20px;
	margin-right: 20px;
}

/*イメージ用*/
img.resizeimage {
	max-width: 45%;
	vertical-align: top;
}

/* 埋め込みビデオ用 */
video {
	max-width: 45%;
	border: outset 1px #000000;
	background-color: #ffffff;
}

/* キーワード一覧表テーブル用 */
.tokyo-keyword table {
	border-collapse: collapse; 
}

.tokyo-keyword th,td {
	border: solid 1px;
}

/* 注釈用 */
.caption {
	font-size: 90%;
	text-align: right;
}
/*==================================================
ページトップへ戻る用
===================================*/

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 20px;
	bottom:10px;
	z-index: 2;
	font-weight: bold;
	border: solid 1px #b0c4de;
	border-radius: 10px;
	padding: 5px 10px;
	background-color: #ffffff;
}