@charset "UTF-8";

/*
    Theme Name: BBA1C7
    Description:BBAテーマ
    Theme URI:http://www.bba.la
    Author: Maeta Akinori
    Author URI:
    Version:2.0
    License:LGPL
    License URI:
*/


body {
	background-color: #EFEFEF;
}

/*
フッター
-------------------------------------------------------------------*/
.container footer {
	color: #FFFFFF;
	background-color: #6CA9C8;
	margin: 0;
}

.container footer p {
	font-size: 10px;
	color: #FFFFFF;
	padding-left: 10px;
	line-height: 16px;
}


/*
ロゴイメージ
-------------------------------------------*/
.logo-image {
	text-align: left;
}

/*
ヘッダー部分の基礎情報
-------------------------------------------*/
.info strong {
	font-size: 32px;
	color: #000080;
	font-family: Arial, Helvetica, sans-serif;
}
.info span {
	font-size: 18px;
	color: #666666;
}
/*
ビックイメージ トップイメージ用の黒板
-------------------------------------------*/
.big-image { 
	background-image: url(./images/top.png);
    background-size: cover;
    
	height:590px;
	
}

/*
ビックイメージ 黒板上のキャッチコピー
-------------------------------------------*/
.top-catchcopy {
	transform: rotate( -10deg );
	position: absolute;
	top: 80px;
	left: 30px;
}

.catch {
	color: transparent;
	animation: blur 10s ease-out;
	-webkit-animation: blur 10s ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
.catch:nth-child(1) {
	animation-delay: 0.1s;
	-webkit-animation-delay: 0.1s;
}
.catch:nth-child(2) {
	animation-delay: 2.0s;
	-webkit-animation-delay: 2.0s;
}

/*
キャッチコピーのアニメーション　透明度100%からブラーで登場するテキストエフェクト
-------------------------------------------------------------------*/
@keyframes blur {
	0%		{text-shadow:  0 0 100px #fff; opacity:0;}
	5%		{text-shadow:  0 0 90px #fff;}
	15%		{opacity: 1;}
	20%		{text-shadow:  0 0 0px #fff;}
	100%	{text-shadow:  0 0 0px #fff;}
}

@-webkit-keyframes blur {
	0%		{text-shadow:  0 0 100px #fff; opacity:0;}
	5%		{text-shadow:  0 0 90px #fff;}
	15%		{opacity: 1;}
	20%		{text-shadow:  0 0 0px #fff;}
	100%	{text-shadow:  0 0 0px #fff;}
}

/*
黒板上のボタン　チラシ掲載用
-------------------------------------------------------------------*/
/*通常時の色　青　無効状態*/
.btn-chirashi,
.btn-chirashi:disabled, .btn-chirashi.disabled 
{
	color: #fff;
	background: #00bff8;
}

/*通常時の色2　オレンジ　無効状態*/
.btn-chirashi2,
.btn-chirashi2:disabled, .btn-chirashi2.disabled 
{
	color: #fff;
	background-color: #eb6100;
}

/*通常時の色3　緑　無効状態*/
.btn-chirashi3,
.btn-chirashi3:disabled, .btn-chirashi3.disabled 
{
	color: #fff;
	background: #90bb00;
}

/*リンクは文字色は白色*/
.btn-chirashi a,
.btn-chirashi2 a,
.btn-chirashi3 a
{
	color: #fff;
	text-decoration:none;
}

/*青　hover時*/
.btn-chirashi:hover
{
	color: #00bff8;
	/*margin-top: 3px;*/
	/*background: #00bff8;*/
	background: #fff;
}

/*オレンジ　hover時*/
.btn-chirashi2:hover
{
	color: #f56500;
	/*margin-top: 3px;*/
	/*background: #f56500;*/
	background: #fff;
}
/*緑　hover時*/
.btn-chirashi3:hover
{
	color: #90bb00;
	/*margin-top: 3px;*/
	/*background: #90bb00;*/
	background: #fff;
}



/*
黒板上のボタンを強調する矢印
-------------------------------------------------------------------*/
.arrow
{
  color:#fff;

  position: absolute;
  top: 352px;
  left: 36px;

  animation-duration: 1s;
  animation-name:arrow-bound;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/*
黒板上のボタンを強調する矢印 アニメーション　上下に揺れる
-------------------------------------------------------------------*/
@keyframes arrow-bound
{
  0% {transform: translateY(0px);}
  30% {transform: translateY(-3px);}
  50% {transform: translateY(-5px);}
  80% {transform: translateY(-8px);}
  90% {transform: translateY(-9px);}
  100% {transform: translateY(-10px);}
}
/*
記事内の装飾
-------------------------------------------*/
/*
.container article * {
	font-family: Verdana, Arial, Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
*/
.container article p,hr,pre,h6 {
	margin: 1em 2em;
}
.container article h1 {
	margin: auto 0.5em;
}
.container article h1 larger {
  font-size: 2.5rem;
}
.container article h5 {
	margin: 0.5em 1.5em;
}

.container article h2 {
	font-size: 18px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #44BAE2;
	line-height: 26px;
	color: #101010;
	padding-top: 15px;
	padding-left: 5px;
	margin: auto 2em;
	margin-bottom: 3px;
	font-weight: normal;
}
.container article h2 nor{
	font-size: 18px;
	line-height: 26px;
	color: #101010;
	padding-top: 5px;
	padding-left: 5px;
	margin-bottom: 3px;
	font-weight: normal;
	margin: auto 2em;
}

.container article span {
	/*font-size: 14px;*/
	padding-left: 10px;
	/*color: #3BAEDB;*/
}

.container article h3 {
	font-size: 14px;
	line-height: 20px;
	color: #FFFFFF;
	background-color: #45a9d4;
	padding-bottom: 4px;
	padding-left: 23px;
	margin: auto 2em;
	margin-top: 1px;
	padding-top: 2px;
	font-weight: normal;
	border-left :solid 4px orange;
}
.container article h3 span {
	font-size: 12px;
	color: #CAF5FF;
	line-height: 12px;
	padding-left: 5px;
	font-weight: normal;
}

.container article  h4 {
	color: #30899C;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #7EC4CB;
	font-size: 16px;
	line-height: 16px;
	margin: auto 2em;
	margin-top: 15px;
	margin-bottom: 0px;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 8px;
}
.container article h4 span {
	font-size: 12px;
	color: #30A2AB;
	padding-left: 10px;
	line-height: 12px;
	font-weight: normal;
}

.container article li {
	margin: 0.5em 1em;
}

/*
グローバルナビ
-------------------------------------------*/
.navmenu h3{
	font-size: 20px;
	color: #FFFFFF;
	background-color: #45a9d4;
	padding-bottom: 4px;
	padding-left: 1em;
	border-left :solid 4px #5ACCE9;
}

.navmenu ul {
	list-style-position: inside;
	/*list-style-image: url(images/arrow-right.svg);*/
/*	list-style-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ib2N0aWNvbiBvY3RpY29uLWRpZmYtcmVuYW1lZCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTIuNzUgMi41aDEwLjVhLjI1LjI1IDAgMDEuMjUuMjV2MTAuNWEuMjUuMjUgMCAwMS0uMjUuMjVIMi43NWEuMjUuMjUgMCAwMS0uMjUtLjI1VjIuNzVhLjI1LjI1IDAgMDEuMjUtLjI1ek0xMy4yNSAxSDIuNzVBMS43NSAxLjc1IDAgMDAxIDIuNzV2MTAuNWMwIC45NjYuNzg0IDEuNzUgMS43NSAxLjc1aDEwLjVBMS43NSAxLjc1IDAgMDAxNSAxMy4yNVYyLjc1QTEuNzUgMS43NSAwIDAwMTMuMjUgMXptLTEuNDcgNy41M2EuNzUuNzUgMCAwMDAtMS4wNkw4LjUzIDQuMjJhLjc1Ljc1IDAgMDAtMS4wNiAxLjA2bDEuOTcgMS45N0g0Ljc1YS43NS43NSAwIDAwMCAxLjVoNC42OWwtMS45NyAxLjk3YS43NS43NSAwIDEwMS4wNiAxLjA2bDMuMjUtMy4yNXoiPjwvcGF0aD48L3N2Zz4=);
	*/		
}

.nav-link {
	display:inline-block;
	padding: .5rem .5rem;
}

.navmenu li a {
    background-color: #F8F8F5;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 3px;
	padding-left: 3rem;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg class="octicon octicon-diff-renamed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" fill="%2345a9d4" d="M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zm-1.47 7.53a.75.75 0 000-1.06L8.53 4.22a.75.75 0 00-1.06 1.06l1.97 1.97H4.75a.75.75 0 000 1.5h4.69l-1.97 1.97a.75.75 0 101.06 1.06l3.25-3.25z"></path></svg>');
	background-position: 8px center;
    background-repeat: no-repeat;
	color: #000;
}

.navmenu  li a:hover  {
	background-color: #2EA9D8;
	color: #FFFFFF;

	background-image: url('data:image/svg+xml;charset=UTF-8,<svg class="octicon octicon-diff-renamed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" fill="%23ffffff" d="M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zm-1.47 7.53a.75.75 0 000-1.06L8.53 4.22a.75.75 0 00-1.06 1.06l1.97 1.97H4.75a.75.75 0 000 1.5h4.69l-1.97 1.97a.75.75 0 101.06 1.06l3.25-3.25z"></path></svg>');
	background-position: 8px center;
    background-repeat: no-repeat;

}

/*
グローバルナビボタン　小さい画面サイズのメインメニューに使用する
-------------------------------------------------------------------*/
/*通常時の色　無効状態*/
.btn-navmenu,
.btn-navmenu:disabled, .btn-navmenu.disabled 
{
    color: #fff;
    background-color: #45a9d4;
}
/*hover時 文字色背景色は変えない*/
.btn-navmenu:hover {
    color: #fff;
}
  /*forcus時　ボタンの枠線のみ*/
.btn-check:focus + .btn-navmenu, .btn-navmenu:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

/*active時　タップした瞬間　通常時より濃い暗めの色*/
.btn-check:checked + .btn-navmenu, .btn-check:active + .btn-navmenu,
.btn-navmenu:active, .btn-navmenu.active, .show > .btn-navmenu.dropdown-toggle {
    color: #fff;
    background-color: #0a58ca;
}


/*
カーソル
-------------------------------------------------------------------*/

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  pointer-events: none;
}

.cursor--small {
  width: 5px;
  height: 5px;
  left: -2.5px;
  top: -2.5px;
  border-radius: 50%;
  z-index: 11000;
  background: var(--color-text);
}
.cursor--canvas {
  width: 100vw;
  height: 100vh;
  z-index: 1200;
}
.cursor.is-active {
  transform: scale(3);
}

/*
テーブル
-------------------------------------------------------------------*/
table {
	/*width: 580px;*/
	margin: 2em 1em;
}

table td {
	border-collapse: collapse;
}

table td {
	padding: 5px;
	border: 1px solid #EAE8DF;
	font-size: 13px;
}

#ques table td {
	padding: 5px;
	border:none;
	font-size: 13px;
}
 table th {
	background-color: #EFEDE7;
	padding: 7px;
	font-size: 13px;
}

#tui table th{
border-color: #ffffff;}

form table th {
	width: 127px;
}

table td.td_head {
	background-color: #A2AAAA;
	text-align: center;
	padding: 8px;
	white-space: nowrap;
	color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 4px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #C9C9BE;
	border-right-color: #D7D7CE;
	border-bottom-color: #C9C9BE;
	border-left-color: #C9C9BE;
	font-size: 13px;
	background-image:#8e9797;
	background-repeat: repeat-x;
}

table td.td_odd {
	background-color: #F7F7F4;
	text-align: left;
	padding: 8px;
	border: 1px solid #D6D6CD;
	font-size: 13px;

	background-repeat: repeat-x;
	line-height: 20px;
}
table td.td_odd {
	background-color: #F7F7F4;
	text-align: left;
	padding: 8px;
	font-size: 13px;
	background-repeat: repeat-x;
	line-height: 20px;
}

.td_head .eng {
	margin: 0px;
	padding: 0px;
	font-size: 10px;
	color: #DEE4E4;
}

.table-wrap {
  overflow-x: scroll;
}
.table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
/*
アクセント　アイコン
-------------------------------------------*/
.octicon {
	display: inline-block;
	fill: currentColor;
	vertical-align: text-top;
	height: 1.2em; 
}

.octicon-diff-renamed {
	color: #45a9d4;
  }

/*
画面表示の設定
-------------------------------------------*/
@media screen and (max-width:480px) { 
.table {
	margin: auto;
}

}
@media screen and (min-width:481px) and ( max-width:1024px) {
.navmenu li a {
	font-size: 1.4vmin;
}

}