@charset "utf-8";

/*-------------------------------------------------------------------------------------------------------------------------------------
	 全端末（PC・タブレット・スマホ）共通設定
-------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
	全体の設定
--------------------------------------------------------------------------*/
body{
	width: 95%;
	padding: 0px;		/* widthの上下左右の隙間を0に指定 */
	border-width: 0px;	/* 上下左右のボーダーの太さをまとめて0に指定 */
	background-color: white;	/*背景入れたい場合の設定 background-image: url(img/bg.png); */
	font-family: 'BIZ UDPGothic','Flop Design','Meiryo UI','Yu Gothic UI Semilight','Arial';
	font-size: 93%;
	line-height : 180%; /* 行間 */
	text-align: left;
	margin-top: 0px;	/* widthで決めた枠の上マージン0 */
	margin-bottom: 0px;	/* widthで決めた枠の下マージン0 */
	margin-left: auto;	/* widthで決めた枠を中央に配置するため左自動調整 */
	margin-right: auto;	/* widthで決めた枠を中央に配置するため右自動調整 */
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {
	margin: 0px;
	padding: 0px;
	font-size: 100%; /*　隙間を開けずに配置／font-size は body に対しての割合 */
	font-weight: normal;
}

ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*--------------------------------------------------------------------------
	 Font Style
--------------------------------------------------------------------------*/
@font-face {
	font-family: 'BIZ UDPGothic','Flop Design','Meiryo UI','Yu Gothic UI Semilight','Arial';
	src: url('regular.eot');
	src: url('regular.eot?') format('embedded-opentype'),
			url('regular.ttf') format('truetype');
}

.font1 {font-size: small;}
.font2 {font-size: medium;}
.font3 {font-size: x-large;}
.font4 {font-size: xx-large;}

.font-crimson {color: #DC143C;}	/* 赤の文字 */


/*--------------------------------------------------------------------------
	メインメニュー（menubarの設定）
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
	overflow: hidden;
	border-top: 1px solid #DCDCDC;		/*上の線の幅、線種、色Gainsboro*/
	border-bottom: 1px solid #DCDCDC;	/*下の線の幅、線種、色Gainsboro*/
}

/*メニュー１個あたりの設定*/
#menubar li {
	float: left;	/*左に回り込み*/
	line-height: 160%;	/*行間*/
	width: 16.6%;	/*幅*/
}
#menubar li a {
	display:  block;text-decoration: none;
	position: relative;
	text-align: center;	/*文字をセンタリング*/
	padding: 12px 0px;	/*上下、左右へのボックス内の余白*/
	border-left: 1px solid #DCDCDC;	/*左側の線の幅、線種、色*/
	font-weight: bold;	/*太字にする設定*/
}

/*１つ目のメニューへの追加設定*/
#menubar li:first-child {
	width: 17%;	/*幅。６個メニューなので、16.6で割り切れない分をここで再設定。*/
}
#menubar li:first-child a {
	border-left: none;	/*左側の線を消す設定*/
}

/*英語表記（飾り文字）*/
#menubar li a span {
	display: block;
	font-size: 10px;	/*文字サイズ*/
	color: #1e90ff;	/*文字色*/
	font-weight: normal;	/*太字を標準に戻す設定*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くする設定*/
}

/*マウスオン時と、現在表示中メニューの設定*/
#menubar li a:hover, #menubar li.current a {
	background: #F5F5F5;	/*背景色*/
}

/*左側のアクセントライン*/
#menubar li a:hover::before, #menubar li.current a::before {
	content: "";
	position: absolute;
	left: 5px;
	width: 3px;
	height: 40px;
	background: linear-gradient(#7bbeff, #1E90FF);	/*グラデーション*/
}

/*menubarのリンク設定*/
#menubar li a {font-size:medium;}
#menubar li a:link {
	color: #005fbc;
	text-decoration:none;
}
#menubar li a:visited {
	color: #005fbc;
	text-decoration:none;
	}
#menubar li a:hover {
	color: #FF69B4;
	text-decoration:none;
	border-bottom-style:dotted;
	border-bottom-color:#fff;
	border-bottom-width:0px;	/* リンクのアンダーバー0pxにするとなし */
}
#menubar li a:active {color: #CC0;}

/*スマホ用メニューを表示させない*/
#menubar-s {display: none;}

/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}


/*--------------------------------------------------------------------------
	トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 20px;
}
/*日付設定*/
#new dt {
	float: left;
	width: 9em;		/*幅*/
	color: #0e36ca;	/*文字色*/
	letter-spacing: 0.1em;
}
/*記事設定*/
#new dd {
	padding-left: 9em;
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}

/*--------------------------------------------------------------------------
	よく頂く質問ページ
---------------------------------------------------------------------------*/
/*ブロック全体*/
.faq {
	padding: 0px 20px;	/*上下、左右への余白*/
}
/*質問の設定*/
.faq dt {
	color: #0e36ca;	/*文字色*/
	padding-top: 15px;
}
.faq dt a {
	color: #0e36ca;	/*文字色*/
}
/*回答の設定*/
.faq dd {
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	overflow: hidden;
	padding-bottom: 15px;
}

/*--------------------------------------------------------------------------
	inputボタン
---------------------------------------------------------------------------*/
#main input[type=submit].btn, #main input[type=button].btn, #main input[type=reset].btn {
	padding: 5px 10px;
	border: 1px solid #ccc;
	font-size: 15px;
	border-radius: 3px;
	background: linear-gradient(#fff, #eee);
}
/*マウスオン時の設定*/
#main input[type=submit].btn:hover, #main input[type=button].btn:hover, #main input[type=reset].btn:hover {
	border: 1px solid #999;
	background: #fff;
}

/*--------------------------------------------------------------------------
	トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;		/*文字サイズ*/
	line-height: 160%;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*--------------------------------------------------------------------------
	その他
---------------------------------------------------------------------------*/
.look {background: #ccc;color: #333;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.p0 {padding:0 !important;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 15px;list-style: disc;}
.color1, .color1 a {color: #F00;}
.bg1 {background: #f6f5f2;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 20px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 160%;}
.sh {display: none;}


/*-------------------------------------------------------------------------------------------------------------------------------------
	画面幅800px以下の設定
-------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*--------------------------------------------------------------------------
	コンテンツ（mainとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	padding: 0 3%;	/*ボックス内の余白。上下、左右。*/
}

/*--------------------------------------------------------------------------
	メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明度(opacity)0%から透明度100%にする指定。*/
@keyframes menu1 {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*スマホ用メニューブロック*/
#menubar-s {
	display: block;overflow: hidden;
	position: absolute;
	top: 100px;	/*上から100pxの場所に配置*/
	border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
	width: 100%;
	z-index: 10;
	animation-name: menu1;		/*上のkeyframesの名前*/
	animation-duration: 0.5S;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
	display: block;text-decoration: none;
	padding: 10px 10px 10px 20px;	/*上、右、下、左へのメニュー内の余白*/
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	background: #1E90FF;	/*背景色*/
	background: rgba(30,144,255,0.8);	/*背景色。30,144,255はDodgerBlue，0.8は透明度80%の事。*/
	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/
}
/*英語表記（飾り文字）*/
#menubar-s li a span {
	display: block;
	font-size: 12px;	/*文字サイズ*/
}
/*PC用メニューを非表示にする*/
#menubar {
	display: none;
}

/*--------------------------------------------------------------------------
	３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: absolute;
	top: 10px;	/*上から10pxの場所に配置*/
	right: 3%;	/*右から3%の場所に配置*/
	border: 1px solid #fff;	/*枠線の幅、線種、色は白*/
	box-shadow: 0px 2px 3px 0px #9E9E9E;	/* 影をつける */
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	border-radius: 10px;	/* 四隅に同じ値の丸みを与える border-radius 半径10pxの正円の円弧をベースにした角丸を実装 */
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: #fff url(img/icon_menu.png) no-repeat center top/50px;
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: #fff url(img/icon_menu.png) no-repeat center bottom/50px;
}

/*--------------------------------------------------------------------------
	main,subコンテンツ
---------------------------------------------------------------------------*/
#main, #sub {
	float: none;
	width: auto;
}

/*--------------------------------------------------------------------------
	その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}

}

/*-------------------------------------------------------------------------------------------------------------------------------------
	画面幅480px以下の設定
-------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*--------------------------------------------------------------------------
	ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo img {
	width: 200px;	/*画像幅*/
	margin-top: 40px;	/*上下のバランスをとって下さい*/
}

/*--------------------------------------------------------------------------
	全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;	/*文字サイズ*/
	line-height: 160%;	/*行間*/
}

/*--------------------------------------------------------------------------
	mainコンテンツ
---------------------------------------------------------------------------*/
#main h2, #main h3 {
	font-size: 14px;
	padding-left: 10px;
	padding-right: 10px;
}
/*h2タグの１文字目の設定*/
#main h2::first-letter {
	padding-left: 8px;	/*線とテキストとの余白*/
}
/*段落タグ設定*/
#main p {
	padding: 0px 10px 15px;	/*上、左右、下への余白*/
}

/*--------------------------------------------------------------------------
	ボックス（list）設定
---------------------------------------------------------------------------*/
/*ボックス内のh4（見出し）タグ設定*/
#main .list h4 {
	font-size: 14px;	/*文字サイズ*/
}

/*--------------------------------------------------------------------------
	トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	padding-left: 10px;
	padding-right: 10px;
}

/*--------------------------------------------------------------------------
	テーブル（ta1）
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1, .ta1 td, .ta1 th {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 100px;
}

/*--------------------------------------------------------------------------
	その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}
.big1 {font-size: 16px;}
img.fr,img.fl {float: none;margin: 0;width: 100%;}
.sh {display:block;}
.pc {display:none;}

}


/*--------------------------------------------------------------------------
	リンクの設定
--------------------------------------------------------------------------*/

a {
	color: #666;	/*リンクテキストの色*/
}

a:link {
	color: #005fbc;
	text-decoration:none;
}

a:visited {
	color: #005fbc;
	text-decoration:none;
}

a:hover {
	color: #CC0;
	text-decoration:none;	/* マウスオン時に下線を消す設定（消さないとヘッダーの目次たちがちょっと動く） */
	border-bottom-style:dotted;
	border-bottom-color:#7777F2;
	border-bottom-width:1px;	/* 1pxにするとリンクにアンダーラインが付く */
}

a:active {color: #CC0;}


/*--------------------------------------------------------------------------
	containerブロック
---------------------------------------------------------------------------*/
.container {
	border-top: 0px solid #DCDCDC;	/*上の線の幅、線種、色グレー*/
	margin: 0 auto;
	max-width: 1200px;	/*サイトの最大幅*/
	background: #fff;	/*背景色*/
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);	/*ボックスの影。右に、下に、広げる幅。0,0,0は黒の事で0.2は透明度20%の事。*/
}

/*--------------------------------------------------------------------------
	tytle Style
--------------------------------------------------------------------------*/

.title1 {text-align: left; padding: 0px 0px 0px 10px;	/* textは左寄せ，paddingは内側の余白（上右下左） */
	width: 98% ;	/* 図形の幅 */
	height: 30px;	/* 図形の高さ */
	margin-left: auto;	/* widthで決めた枠を中央に配置するため左自動調整 */
	margin-right: auto;	/* widthで決めた枠を中央に配置するため左自動調整 */
	border-radius: 5px;	/* 四隅に同じ値の丸みを与える border-radius 半径5pxの正円の円弧をベースにした角丸を実装 */
	line-height: 30px;
	background: #228B22;	/* ForestGreen */
	font-weight:bold;
	color: #fff; 
}

.title2 {text-align: left; padding: 0px 0px 0px 10px;
	width: 98% ;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 5px;
	line-height: 30px;
	background: #DCDCDC;	/* Gainsboro */
	font-weight:bold;
	color: #000;
}


/*-------------------------------------------------------------------------
	Text Style　	text3　と　text6　はjavascriptのlink.jsにも使用
--------------------------------------------------------------------------*/

.text1 {text-align:left; padding: 0px 10px 0px 10px;}
.text2 {text-align:right; padding: 10px 0px 10px 0px;}
.text3 {text-align:left; padding: 10px 10px 10px 10px;}
.text4 {text-align:left; background-color:#FF69B4; color:white; font-weight:bold; padding: 3px 0px 3px 10px;}	/* HotPink */
.text6 {text-align:left; background-color:#1E90FF; color:white; font-weight:bold; padding: 3px 0px 3px 10px;}	/* DodgerBlue */
.text7 {margin-left: 16px;} /* 左を16px下げる */

.text-y {background-color: #FFFF00;}	/* 黄色　のマーカー */
.text-lc {background-color: #FFFACD;}	/* LemonChiffon　のマーカー */
.text-lb {background-color: #FFF0F5;}	/*  LavenderBlush のマーカー */

.text-middle {vertical-align: middle;} /* 文字とボタンを綺麗に横並びにする */


/*--------------------------------------------------------------------------
	Basic Style
--------------------------------------------------------------------------*/

.basic-style1 {text-align: left; background-color:white; padding: 15px 0px 15px 10px;}	/* パンくずリストの上，右，下，左の余白*/
.basic-style2 {text-align: center; background-color:white; padding: 10px 0px 10px 0px;}
.basic-style3 {text-align: center;}
.basic-style4 {margin: 10px;}


/*--------------------------------------------------------------------------
	Contents
--------------------------------------------------------------------------*/

/* PC用のcssのレスポンシブデザイン */
@media screen and (min-width:1024px) {
.main {width:100%; display:flex;}
.left-navi {background-color:#fff4fc; width:22%; margin:0;}	/* HotPinkの薄い色 */
.main-contents {background-color:white; width:58%; margin:0;}
.main-contents-2 {background-color:white; width:78%; margin:0;}	/* right-naviを掲載しない時の設定 */
.right-navi {background-color:#F0F8FF; width:20%; margin:0;}
}

/* スマホ用のcssのレスポンシブデザイン*/
@media screen and (max-width:800px) {
.main {width:100%;}
.left-navi {background-color:#fff4fc; width:100%;}	/* HotPinkの薄い色 */
.main-contents {background-color:white; width:100%;}
.main-contents-2 {background-color:white; width:100%;}	/* right-naviを掲載しない時の設定 */
.right-navi {background-color:#F0F8FF; width:100%;}
}


/*--------------------------------------------------------------------------
	見出しの矢印，アイコンなど
--------------------------------------------------------------------------*/

/* 左の目次のグレー矢印 */
.arrow-gr {
	padding-left: 20px;
	line-height: 30px;	/* 行の高さを指定，フォントの大きさを引いた分を上下の余白にする */
	background: url(img/arrow-gr.gif) no-repeat left center;	/* 左寄せ 上下位置中央と指定 */
}

.dot-pink {
	width: 6px; /* 図形の幅 */;
	height: 6px; /* 図形の高さ */;
	border-radius: 3px; /* 四隅に同じ値の丸みを与える border-radius 半径3pxの正円の円弧をベースにした角丸を実装 */
	background: #FF69B4;	/* HotPink */
	margin: 12px;	/* dotの周りの余白 */
	box-shadow: 0px 0px 0px 0px #9E9E9E;	/* 影をつける */
}

.dot-gray {
	width: 4px; /* 図形の幅 */;
	height: 4px; /* 図形の高さ */;
	border-radius: 2px; /* 四隅に同じ値の丸みを与える border-radius 半径2pxの正円の円弧をベースにした角丸を実装 */
	background: #808080;	/* Gray */
	margin:9px;	/* dotの周りの余白 */
}


/*--------------------------------------------------------------------------
	トップへ戻るボタン
--------------------------------------------------------------------------*/

#goto_top {
	position: fixed;
	right: 3%;	/* 右からの位置 */
	bottom: 5%;	/* 下からの位置 */
}

#goto_top a {
	width: 50px;	/* 図形の幅 */
	height: 50px;	/* 図形の高さ */
	border-radius: 25px;	/* 四隅に同じ値の丸みを与える（半径） */
	background: #fff;	/* 白（白の丸に画像を載せるため） */
	padding:　5px;
	display: block;
	color: #fff;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
	font-weight: bold;
	box-shadow: 0px 0px 0px 0px #9E9E9E;	/* 影をつけるとボタンを押したとき少しずれるので0pxで設定（影の色#9E9E9Eは消しても良いがとりあえず残している） */
}

/*--------------------------------------------------------------------------
	テーブル（table1設定，メルマガページの表）
--------------------------------------------------------------------------*/

.table1 {
	border-collapse: collapse;	/* セルの線を重ねる */
	border-spacing: 0;
}

.table1 thead th, .table1 tbody th, .table1 tbody td {
	border: solid 1px #C0C0C0 ;  /* 枠線指定　実線 Silver */
	padding: 5px;      /* ボックス内の余白指定 */
}

.table1 thead th {
	background: #dcefb6;
	text-align: center;
	font-weight:bold;
}

.table1 tbody th {
	width: 25%;	/* 見出しの全体の割合 */
	text-align: left;	/* 文字の揃え位置指定 中央 */
	padding: 0px 0px 0px 10px;	/*上右下左の内側の余白を指定*/
}

.table1 tbody td {
	width: 75%;	/* 表本文の割合 */
	text-align: left;	/* 文字の揃え位置指定 左 */
}


/*--------------------------------------------------------------------------
	テーブル（table2設定，メルマガページの表）
--------------------------------------------------------------------------*/

.table2 {
	border-collapse: collapse;	/* セルの線を重ねる */
	border-spacing: 0;
}

.table2 thead th, .table2 tbody th, .table2 tbody td {
	border: solid 1px #C0C0C0 ;  /* 枠線指定　実線 Silver */
	padding: 5px;      /* ボックス内の余白指定 */
}

.table2 thead th {
	background: #F0F8FF ;
	text-align: center;
	font-weight:bold;
}

.table2 tbody th {
	width: 10%;	/* 見出しの全体の割合 */
	text-align: left;	/* 文字の揃え位置指定 中央 */
	padding: 0px 0px 0px 10px;	/*上右下左の内側の余白を指定*/
}

.table2 tbody td {
	text-align: left;	/* 文字の揃え位置指定 左 */
}


/*--------------------------------------------------------------------------
	pre要素で折り返し改行する（メルマガの記事でスマホで見る場合のあふれを防ぐ）
--------------------------------------------------------------------------*/

pre {
	width: 100% ;	/* 表示部分を超えないように */
	border: 0px solid #000 ;	/* 0pxで枠線なし */
	white-space: pre-wrap ;		/* 右端で改行する設定。preはこれを設定しないと記述したとおりに表示 */
	font-family: 'BIZ UDPGothic','Flop Design','Meiryo UI','Yu Gothic UI Semilight','Arial';	/* preも他の本文とFONTを揃える */
}


/*--------------------------------------------------------------------------
	Bar Style
--------------------------------------------------------------------------*/

.bar1 {
	display:block;
	width: 100%;
	height: 1px;
	border: 0;
	border-top: 1px dashed #cccccc;
}


/*-------------------------------------------------------------------------------------------------------------------------------------
	 Footer（javascriptのfooter.jsに読み込み）
-------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
	フッターの背景
--------------------------------------------------------------------------*/
.footer {
	height: 100%;
	background: #F5F5F5; /* Footerの背景色 */
	font-size: x-small;
	line-height : 100%; /* 行間 */
	color:  #696969;
	text-align: center; 
	padding: 10px 0px 10px 0px; /* 内側の余白（上右下左） */
}

/*--------------------------------------------------------------------------
	フッターのリンク
--------------------------------------------------------------------------*/
#footer-link a　{font-size:x-small; padding: 0px 0px 10px 0px;} 
#footer-link a:link {color:#696969; text-decoration:none;}
#footer-link a:visited {color:gray; text-decoration:none;}
#footer-link a:hover {
	color: #ff007f;
	text-decoration:none;
	border-bottom-style:dotted;
	border-bottom-color:#7777F2;
	border-bottom-width:1px;	/* 1pxにするとリンクにアンダーラインが付く */
}
#footer-link a:active {color:#ff007f;}

/*--------------------------------------------------------------------------
	フッターのアイコン
--------------------------------------------------------------------------*/
#footer-icon a　{font-size:x-small; padding: 10px 0px 20px 0px;} 
#footer-icon a:link{color: #00519f; text-decoration:none;}
#footer-icon a:visited {color: #00519f; text-decoration:none;}
#footer-icon a:hover {color: #CC0; text-decoration:none; border-bottom-style:none;}
#footer-icon a:active {color: #CC0;}