﻿/* BJA CSS layout */

/************************************************/
/*	スマホ表示設定									*/
/************************************************/
img { max-width:100%; height:auto; }

/************************************************/
/*	マスタヘッド定義									*/
/************************************************/
#masthead {
	margin: auto auto auto auto;
	width: 100%; 
	height: 100%;
/*	color: #ffffff;*/
	background-color: #002060;
	text-align : center;
	vertical-align:	top;
}

/************************************************/
/*	ボディー定義									*/
/************************************************/
/*ボディーカラー指定*/

body {
	background-color: #002060;
}

/*ブロックレベルのフレックスコンテナボックス*/
/*アイテムの配置方向*/
/*高さの最小値を指定する*/


body,

#wrapper {
    min-width: 	200px;
    max-width: 	auto;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/************************************************/
/*	ナビメニュー定義									*/
/************************************************/
.top_nav {
	margin: auto auto auto auto;
	width: 100%;
	height: 100%;
	color: #ffffff;
	background-color: #002060;
	text-align : center;
}

.under_nav {
	margin: auto auto auto auto;
	width: 100%; 
	height: 100%;
	color: #ffffff;
	background-color: #002060;
	text-align : left;
}

/*.ナビゲーションボタン */

button.button_topnav1 {
	font: 		inherit;
	font-size: 	18px;
	padding: 	10px 10px;
	color: 		#ffffff;
	background-color: #191970;
	font-family: HG丸ｺﾞｼｯｸM-PRO;
/*	width: 		auto;*/
	width: 		200px;
/*	height: 	auto;*/
	height: 	80px;

}

button.button_topnav1:hover {
    background-color: 	#cccccc;
    color: 				#000000;
    
}

/*.ナビゲーションボタン */

button.button_topnav2 {
	font: 		inherit;
	font-size: 	18px;
	padding: 	10px 10px;
	color: 		#ffffff;
	background-color: #191970;
	font-family: HG丸ｺﾞｼｯｸM-PRO;
/*	width: 		auto;*/
	width: 		200px;
/*	height: 	auto;*/
	height: 	80px;

}

button.button_topnav2:hover {
    background-color: 	#cccccc;
    color: 				#000000;
    
}

/************************************************/
/*	ボックス定義									*/
/************************************************/
.contents_box {
	width: 		100%; 
	color: #ffffff;
	background-color: #002060;
	min-width: 	150px;
	text-align : center;

/*	display: 	flex;*/

/*	overflow:	hidden;
	width:		auto;
	min-width: 	500px;
	max-width: 	740px;
	text-align : center;*/
}

.contents_box2 {
/*	width: 		100%; */
	width: 		80%; 
	color: #ffffff;
	background-color: #002060;
	min-width: 	300px;
	text-align : center;
}

/************************************************/
/* 	フッター定義									*/
/************************************************/
footer {
    width: 100%;
    background-color: #002060;
    color: #fff;
    text-align: center;
    padding: 10px 0;

/*  position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

/************************************************/
/*	全体中央寄せ、文字左寄せ							*/
/************************************************/
.wrapper {
    min-width: 	300px;
    max-width: 	730px;
    margin: 	0 auto;
    text-align: center;
    color: 		#fff;
    background: #002060;
}

.txt {
    display: 	inline-block;
    text-align: left;
}

/************************************************/
/*	ボックス定義									*/
/************************************************/


.top_box_L {
 	display: 		table-cell;
	width:			auto;
	height: 		auto;
  	vertical-align: bottom;
	text-align:		center;
/*	margin:		10px auto;*/
}

.top_box_R {
 	display: 		table-cell;
	width:			auto;
	height: 		auto;
  	vertical-align: bottom;
	text-align:		center;
/*	margin:		10px auto;*/
}

.top_box1 {
 	display: 		table-cell;
  	vertical-align: top;
  	width: 			auto;
	height: 		auto;
	text-align:		left;
    color: #fff;
/*	margin:		10px auto;*/
}

mid_box1 {
 	display: 		table-cell;
  	vertical-align: middle;
	width:	 		auto;
	height: 		100px;
	text-align:		center;
/*	margin:		10px auto;*/
}

bot_box1 {
 	display: 		table-cell;
  	vertical-align: top;
	width: 			auto;
	height: 		60px;
	text-align:		center;
/*	margin:		10px auto;*/
}

/************************************************/
/*	フェードイン・フェードアウト定義						*/
/************************************************/
.Upper-Menu {
	max-width: 75%;
	margin: 0 auto;

	display: table-cell;
    vertical-align: bottom;
/*   padding: 50% 0; */

    animation-name: fadein;
    animation-duration: 6s;
/*  animation-iteration-count: infinite;  繰り返し記述*/
}

@keyframes fadein {
    from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
   }
}


.Main-Logo {
	max-width: 50%;
	margin: 0 auto;

	display: table-cell;
     vertical-align: middle;
/*  padding: 50% 0; */

    animation-name: fadein;
    animation-duration: 3s;
/*  animation-iteration-count: infinite;  繰り返し記述*/}

@keyframes fadein {
    from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
   }
}

.bottom-Menu {
	max-width: 75%;
	margin: 0 auto;

	display: table-cell;
    vertical-align: top;
/*   padding: 50% 0; */

    animation-name: fadein;
    animation-duration: 6s;
/*  animation-iteration-count: infinite;  繰り返し記述*/
}

@keyframes fadein {
    from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
   }
}



/************************************************/
/*	ボタン定義										*/
/************************************************/
/*.左上／機能ボタンン */

button.t_left_botton {
	font: 		inherit;
	font-size: 	20px;
	padding: 	10px 10px;

	background-color: #191970;

	color: 		#ffffff;
	font-family: HG丸ｺﾞｼｯｸM-PRO;
	width: 		auto;
	height: 	auto;
	
    border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
}

button.t_left_botton:hover {
    background-color: #cccccc;
    color: 		#000000;
    
}

/*.右上／機能ボタンン */

button.t_right_botton {
	font: 		inherit;
	font-size: 	20px;
	padding: 	10px 10px;

	background-color: #191970;

	color: 		#ffffff;
	font-family: HG丸ｺﾞｼｯｸM-PRO;
	width: 		auto;
	height: 	auto;
	
    border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
}

button.t_right_botton:hover {
    background-color: #cccccc;
    color: 		#000000;
    
}

/*.左下／機能ボタンン */

button.b_left_botton {
	font: 		inherit;
	font-size: 	20px;
	padding: 	10px 10px;

	background-color: #191970;

	color: 		#ffffff;
	font-family: HG丸ｺﾞｼｯｸM-PRO;
	width: 		auto;
	height: 	auto;
	
    border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
}

button.b_left_botton:hover {
    background-color: #cccccc;
    color: 		#000000;
    
}

/*.右下／機能ボタンン */

button.b_right_botton {
	font: 		inherit;
	font-size: 	20px;
	padding: 	10px 10px;

	background-color: #191970;

	color: 		#ffffff;
	font-family: HG丸ｺﾞｼｯｸM-PRO;
	width: 		auto;
	height: 	auto;
	
    border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
}

button.b_right_botton:hover {
    background-color: #cccccc;
    color: 		#000000;
    
}


/************************************************/
/*	フォント・カラー定義								*/
/************************************************/

/* Impact */
span.xx8-white-impact	{
	font-family: "impact";
	font-size: 8px;*/
	font-style: italic; 
	color: #ffffff;
}

span.xx16-white-impact	{
	font-family: "impact";
	font-size: 16px;*/
	font-style: italic; 
	color: #ffffff;
}

/* Constantia */
span.xx8-white-Constantia	{
	font-family: "Constantia";
	font-size: 8px;*/
	font-style: italic; 
	color: #ffffff;
}

span.xx16-white-Constantia	{
	font-family: "Constantia";
	font-size: 16px;*/
	font-style: italic; 
	color: #ffffff;
}

span.xx32-white-Constantia	{
	font-family: "Constantia";
	font-size: 32px;*/
	font-style: italic; 
	color: #ffffff;
}

/************************************************/
/*	入力画面定義									*/
/************************************************/
body.body_input {
	color: 		#ffffff;
	font-family: HG丸ｺﾞｼｯｸM-PRO;
}

.body_input > p {
	font: inherit;
	font-size: 18px;
	text-indent: 2em;
}

.body_input > table, td {
	font: inherit;
	font-size: 18px;
	padding: 10px 10px 10px 10px;
}

.body_input > table, th {
	font: inherit;
	font-size: 18px;
	padding: 10px 10px 10px 10px;
	text-align: right;
}

.body_input > table, input {
	font: inherit;
	font-size: 16px;
}

.body_input > table, select {
	font: inherit;
	font-size: 16px;
}


