/* Bootstrap3 機能拡張 */




.lh-120p_cent {line-height:120%;}

/*テキストを表示するエリア*/
.text-block {
	padding:0.5em;
	text-align:left;
	line-height:1.50em
}

.mrg-bottom-1em {
	margin-bottom:1em;
}

.side-ZeroPadding{
	padding-right: 0px;
    padding-left: 0px;
}

.side-ZeroMargn{
	margin-right: 0px;
    margin-left: 0px;
}

/* 非表示に変更 */
.hidden-item {display:none;}


.container-fluid {
	/* padding-right: 0px; 通常は15px */
    /* padding-left: 0px; 通常は15px */
	}

/* 画像をcolの幅ギリギリまで表示したいときに使用する */
.col-image {
	/*	*/
	padding-left:0;
	padding-right:0;

}

/* img-responsiveを定義した画像をセンター寄せにする */
.img-responsive-center {
	margin-left:auto;
	margin-right:auto;
}

/* グラデーション */
.gradient-01{
background: -webkit-gradient(linear,left top,right top,from(#FE8ED8),to(#5D9AE5));
background: linear-gradient(to right,#FE8ED8,#5D9AE5);
border-style:none;
}

.btn-primary.gradient-01:hover{background: #286090;}

/* 背景色を白に変更 */
.bg-white {/* padding-top:3em; */ background-color:rgba(255,255,255,0.70)}

.radius-1em {border-radius:1em;}

.radius-05em {border-radius:0.5em;}

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃コラプス
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */



/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃ラベル
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ┌───────────────────────────────────────────
   │初期設定
   └─────────────────────────────────────────── */

.label-yellow {
    background-color: rgba(240,230,10,1.00);
}

.label-purple {
    background-color: rgba(210,10,240,1.00);
}

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃テキスト
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	/*画面サイズxs(~767px)の場合*/
	@media screen and (max-width:767px) {
		.textleft-xs {text-align:left;}
		.textcenter-xs {text-align:center;}
	}


   ┌───────────────────────────────────────────
   │初期設定
   └─────────────────────────────────────────── */

/* 白い縁取り */
.text-fuchidori,
.fuchidori {text-shadow: 1px 1px 0px rgba(255,255,255,0.5), -1px -1px 0px rgba(255,255,255,0.5) ,
               -1px 1px 0px rgba(255,255,255,0.5) , 1px -1px 0px rgba(255,255,255,0.5) ,
               0px 1px 0px rgba(255,255,255,0.5) , 0 -1px 0px rgba(255,255,255,0.5) ,
               -1px 0 0px rgba(255,255,255,0.5), 1px 0 0px rgba(255,255,255,0.5);

}


/* ウィンドウサイズに合わせてテキストサイズを */

.text-xs {
	font-size:0.6em;
	line-height:1.0em;
}


.text-md {
	font-size:1.2em;
	line-height:1.2em;
}

.text-lg {
	font-size:2em;
	line-height:1.4em;
}

.text-xl {
	font-size:3em;
	line-height:1.4em;
	
}

.text-xxl {
	font-size:4em;
	line-height:1.4em;
	
}

	/*画面サイズxs(~767px)の場合*/
	@media screen and (max-width:767px) {
		.text-md {font-size:1.0em; line-height:1.2em;}
	}


	.text-white {color:#ffffff;}

	/* img-responsiveを使用している画像を中央寄せにする */
	.img-responsive-center {
		margin-left: auto;
		margin-right: auto;
	}

		/*画面サイズxs(~767px)の場合*/
		@media screen and (max-width:767px) {
			.text-center-xs {text-align:center;}
		}

		/*画面サイズsm(768px～991px)の場合*/
		@media screen and (min-width:768px) and (max-width:991px) {

		}

		 /*画面サイズmd(992px～1199px)の場合*/
		@media screen and (min-width:992px) and (max-width:1199px) {

		}

		/*画面サイズlg(1200px～)の場合*/
		@media screen and (min-width:1200px) {

		}


/* ┌───────────────────────────────────────────
   │フォントアイコン 
   └─────────────────────────────────────────── */

	/* 標準では使用する文字の80％の大きさとする */

	.glyphicon {
		font-size:0.8em;
	} 









/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃バックグラウンドカラー
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┌───────────────────────────────────────────
   │bg-xxxxなどのbackground-colorを指定すると文字が読みにくいので、paddingを設定する。
   └─────────────────────────────────────────── */

	.bg-space {padding-left:0.3em; padding-right:0.3em;}










/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃ボタン
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┌───────────────────────────────────────────
   │ボタン　初期設定変更
   └─────────────────────────────────────────── */

	.btn {
		transition:all 0.3s; /* 初期状態に戻るときに完了するまでの時間 */
		/* margin:0rem 0.5rem 1.0rem 0.5rem; */
		margin:0rem 0rem 1.0rem 0rem;
		text-align:center;
		}

a.btn-danger,a.btn-danger:visited,
.btn-danger,.btn-danger:visited  {color:#ffffff;}

	.btn-text-shadow {
		text-shadow:1px 1px 2px rgba(0,0,0,0.5);
		}

	.btn:hover {
		transition:all 0.3s; /* hover　視覚効果が完了するまでの時間 */
		}

	.btn-radius {
		border-radius:2em;
}
	/* 真っ赤なボタン (.btn-dangerに続けて記載する) */
	.btn-danger-red {
		background-color: #ff0700;
		border-color: #db1b14;
	}
	.btn-danger-red:hover, .btn-danger-red:focus, .btn-danger-red.focus, .btn-danger-red:active, .btn-danger-red.active, .open>.dropdown-toggle.btn-danger-red {
		color: #c9302c;
		background-color: #ffdfde;
		border-color: #ac2925;
	}


	/* 横幅にfit */
	.btn-width-fit {
		width:90%;
		/* width:calc(100% - 30px); */
	}

	/* 特大ボタン */
	.btn-xl {
		font-size:1.8em;
		padding-left:1em;
		padding-right:1em;
	}

/* ┌───────────────────────────────────────────
   │ボタン　新しいウィンドウを開く
   └─────────────────────────────────────────── */
	a.btn[target="_blank"] {
		position: relative; /* ←これが肝です */
		 padding-right:1.4em;
		 padding-left:1.4em;
		/* padding-left:calc(12px + 2em); */

	}

	a.btn.btn-wide[target="_blank"] {
		padding-left:calc(12px + 4em);
		padding-right:calc(12px + 4em);

	}

	 a.btn[target="_blank"]::after {
		font-family: 'Glyphicons Halflings';
		content: "\e164";
		/* color: #ffffff; ←　親要素の文字色を使用するため*/
		font-size: 80%;
		font-weight: normal;
		display: inline-block;
		text-decoration: none;
		position: absolute;
		top: calc(50% - 0.3em);
		right:1.0em;
		line-height: 0.8;
		margin-left:0.2em;
	}

/* ┌───────────────────────────────────────────
   │ボタン　枠線を2px
   └─────────────────────────────────────────── */

	.btn-border-bold {
		border-width: 2px; 
	} 

/* ┌───────────────────────────────────────────
   │ボタン　ワイド化
   └─────────────────────────────────────────── */

	.btn-wide {
		padding-left: 4em;
		padding-right: 4em;
	}

		/*画面サイズxs(~767px)の場合*/
		@media screen and (max-width:767px) {
			.btn-wide {
				padding-left: 2em;
				padding-right: 2em;
			}
		}

/* ┌───────────────────────────────────────────
   │背景が透けたボタン（ゴーストボタン）に変更する
   │https://blogs.adobe.com/japan/web-dreamweaver-bootstrap-04-ghost-button/
   └─────────────────────────────────────────── */

    .btn-ghost {
      background: transparent;
    }

        .btn-ghost.btn-default {
        color: #777;
        }
        .btn-ghost.btn-primary {
        color: #337ab7;
        }
        .btn-ghost.btn-success {
        color: #5cb85c;
        }
        .btn-ghost.btn-info {
        color: #5bc0de;
        }
        .btn-ghost.btn-warning {
        color: #f0ad4e;
        }
        .btn-ghost.btn-danger {
        color: #d9534f;
        }
		/* hover時の文字色 */
            .btn-ghost.btn-primary:hover,
            .btn-ghost.btn-success:hover,
            .btn-ghost.btn-info:hover,
            .btn-ghost.btn-warning:hover,
            .btn-ghost.btn-danger:hover {
            color: #fff;
            }
/* ┌───────────────────────────────────────────
   │枠線もテキストも白色となるボタンはBootstrapにはありません。
   │このタイミングで.btn-whiteというclassを用意。7色目のボタンコンポーネント。
   └─────────────────────────────────────────── */

        .btn-ghost.btn-white {
        color: #fff;
        border: 1px solid #fff;
        }

        .btn-ghost.btn-white:hover {
        color: #333;
        background: #fff;
        }

/* ┌───────────────────────────────────────────
   │ボタンがマウスオーバーで上に浮くように見せる。 
   └─────────────────────────────────────────── */

	.btn-UpEffect-01{
			position: relative;  /* 初期値を必ず指定する */
			top: 0px; /* 初期値を必ず指定する */
	}
	.btn-UpEffect-01:hover{
		top:-2px;
		box-shadow: 0 7px 7px 0 rgba(0, 0, 0, .3);
	}

/* ┌───────────────────────────────────────────
   │ボタンを角丸から丸ボタンに変更する 
   └─────────────────────────────────────────── */

	.btn-hover-radius {
		/* transition:all 0.4s; 標準のアニメーション時間を使用する */ 
		}

	.btn-hover-radius:hover {
		border-radius:2em;
		/* transition:all 0.4s; 標準のアニメーション時間を使用する */
		}

/* ┌───────────────────────────────────────────
   │ボタンを角丸から丸ボタンに変更する 
   └─────────────────────────────────────────── */

	.btn-radius {
		border-radius:2em;
		}
/* ┌───────────────────────────────────────────
   │ボタンのテキストが２行になる場合 
   └─────────────────────────────────────────── */
	.btn-radius-2lines {
		border-radius:8em;
		padding-top:1em;
		padding-bottom:1em;
		}