@charset "UTF-8";
/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  主要デザイン
 ================================================*/
 *, *:before, *:after {
	box-sizing: border-box;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
         -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;
}
body {
	width: 100%;
	font-size: 14px;
	color: #333;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height: 1.6;
	background-color: #fff;
	overflow-y: auto;
	-webkit-print-color-adjust: exact;
	word-break: break-all;
}
body #contents {
	position: relative;
    width: 80%;
	margin: 20px auto;
	background: #fff;
	overflow: hidden;
	min-height: calc(100vh - (100.3px + 83.8px + 40px)); /* header+footer */
}
/*================================================
 *  ヘッダー
 ================================================*/
header {
	position: relative;
	width: 100%;
	padding: 5px 10px 5px 10px;
	vertical-align: middle;
	/* background-color: #4d5299;	 */
	background-color: #010066;
	box-sizing: border-box;
}

table#header_table {
	width : 100%;
	background: none;
	margin-bottom: 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
/* タイトル */
table#header_table #hdr1 {
	width : 78%;
	text-align: left;
	letter-spacing: 0.2rem;
	font-family:"HGP創英角ﾎﾟｯﾌﾟ体", Hiragino Sans, "ヒラギノ角ゴシック";
	vertical-align: middle;
	text-decoration: none;
	color: #fff;
	font-size: 34px;
}
/* ログイン名とログアウトボタン */
table#header_table #hdr2 {
	height: 50px;
}
table#header_table #hdr2 div {
	display: flex;
	justify-content: flex-end;
}
table#header_table #hdr2 p {
	display: inline-block;
	width : 150px;
	margin : 0;
	border : 2px solid #fff;
	padding : 5px auto;
}
table#header_table #hdr2 p#hd_name { /* ログイン名 */
	background-color: #fff;
	color : #4d5299;
	margin-right : 10px;
}
table#header_table #hdr2 p#hd_name::before {
	content : '\f406\00a0\00a0';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
table#header_table #hdr2 p#hd_button::after { /* ログアウトボタン */
	content : '\00a0\f2f5';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
table#header_table #hdr2 p#hd_button {
	color:#fff;
	background-color : #4d5299;
}
table#header_table #hdr2 p#hd_button:hover {
	cursor: pointer;
	color:#fff;
	background-color: #6ee6e6;
	border-color: #6ee6e6;
}
/* クライアント名 */
table#header_table #hdr3 {
	text-align: center;
	color : #fff;
	font-size: 18px;
	letter-spacing: 0.1em;
	vertical-align: bottom;
}

/*================================================
 *  フッター
 ================================================*/
footer {
	position: sticky;
	top: 100vh;
	width: 100%;
}
footer .copyright {
	clear: both;
	padding: 10px 0;
	font-size: 11px;
	text-align: center;
	color:#efede9;
	background:#2e2e2e;
}
/*================================================
 *  見出しデザイン
 ================================================*/
h2, h3, h4, h5, h6{
	line-height: 1.6;
}
h2 {
	margin-bottom: 0.5em;
	padding: 10px 0;
	font-size: 21px;
	border-top: 3px solid #262693;
	border-bottom: 1px dotted #262693;
}
h3 {
	margin-bottom: 15px;
	padding: 8px 6px;
	color:#fff;
	font-size: 16px;
	background: #333;
}
h3 a {
	text-decoration: none;
	color:#fff;
}
h3 a:hover {
	text-decoration: underline;
	color:#00bfff;
}
h4 {
	margin-bottom: 10px;
	font-size: 16px;
	color: #262693;
	border-bottom: 3px solid #262693;
}
h5 {
	position: relative;
	margin-bottom: 0.25em;
	padding-left: 10px;
	color: #262693;
	font-size: 16px;
	font-weight: bold;
}
h5:before {
	content: "";
	position: absolute;
	margin-top: -9.5px;
	top: 50%;
	left: 0;
	width: 5px;
	height: 16px;
	background:#262693;
}
h6 {
	margin-bottom: 0.25em;
	color:#382400;
	font-size: 14px;
	font-weight: bold;
}
#contents h3:not(:first-of-type),
#contents h4:not(:first-of-type),
#contents h5:not(:first-of-type),
#contents h6:not(:first-of-type)
{
	margin-top : 30px;
}
/*================================================
 *  セレクタ
 ================================================*/
a {
	color:#3377ff;
	text-decoration: underline;
}
a:hover{
	cursor: pointer;
	text-decoration: none;
}
p {
	margin: 0 0 1em 0;
}
em,strong {
	font-weight: bold;
}
img {
	vertical-align: bottom;
}
/*label {
	display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
	padding-right : 5px;
}
label:hover {
	cursor: pointer;
}
label input[type="radio"],
label input[type="checkbox"]
{
	display: inline;
	margin : auto 3px auto 0;
	cursor: pointer;
}*/

/* ラベルとチェックボックスの組み合わせ */
label,
input[type="checkbox"],
input[type="radio"]
{
	cursor: pointer;
}
label {
	display: inline-block;
	vertical-align: middle;
	vertical-align: top;
}
label:hover {
	color : #00bfff;
}
label input[type="checkbox"],
label input[type="radio"] {
	top : 0 !important
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#b6b6b6;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#b6b6b6;
}
::placeholder{ /* Others */
    color:#b6b6b6;
}
/*================================================
 * リスト
 ================================================*/
ul,ol,dl {
	margin:0 0 1em 0;
}
ul li {
	list-style:disc;
}
ol li {
	list-style:decimal;
}
li {
	margin-left: 2em;
}
dt {
	margin-bottom: 0.5em;
	border-bottom: 1px dotted #ddd;
}
dt:before {
	content: "";
}
dd {
	margin-bottom: 1em;
}
.list {
	padding:0 0 0 0.5em;
}
.list li {
	margin:0;
	padding:0 0 0 15px;
	list-style:none;
	background:url(../common/images/check.png) 0 5px no-repeat;
}
/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position: fixed;
	bottom: 15px;
	right: 15px;
}
.totop a {
	display: block;
	text-decoration: none;
}
.totop img {
	background: #4d5299;
}
.totop img:hover {
	background: #147ae0;
}
/*================================================
 * モーダルデザイン
 ================================================*/
.modal_open {
	margin: 0;
	cursor: pointer;
}
.modal_box {
	position: fixed;
	z-index: 7777;
	display: none;
	width: 80%;
	max-width: 80%;
	margin: 0;
	padding: 70px 2vw 30px;
	border: 2px solid #aaa;
	background: #fff;
	box-sizing: border-box;
}
.modal_close {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 62px;
	font-size: 46px;
	color: #000;
	line-height: 62px;
	text-align: center;
}
.modal_close i {
	line-height: 62px;
	vertical-align: bottom;
}
.modal_bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 6666;
	display: none;
	width: 100%;
	height: 120%;
	background-color: rgba(0,0,0,0.7);
}

/*================================================
 *  form
 ================================================*/
.button_form{
	width: 80%;
	margin: 2px auto;
	padding: 2px 0;
}
.button_form table.none {
	table-layout: fixed;
}
.button_form table.none td {
	vertical-align: top;
}
.button_form table.none td p{
	font-size: 90%;
	margin-top : 5px;
	margin-bottom: 0;
	color: #006BB9;
}
td table.none {
	margin-bottom: 0;
}

/* box_form */
form.box_form input[type="text"],
form.box_form input[type="email"],
form.box_form input[type="tel"],
form.box_form input[type="fax"],
form.box_form input[type="datetime-local"],
form.box_form input[type="number"],
form.box_form input[type="password"],
form.box_form input[type="time"],
form.box_form input[type="date"],
form.box_form select,
form.box_form textarea
{
	width : 90%;
	height: 2em;
	max-width: 90%;
	padding: 15px 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #fafafa;
	font-size: 100%;
	font-family: inherit;
	-webkit-appearance: none;
}
form.box_form input[type="text"]:focus,
form.box_form input[type="email"]:focus,
form.box_form input[type="tel"]:focus,
form.box_form input[type="fax"]:focus,
form.box_form input[type="datetime-local"]:focus,
form.box_form input[type="password"]:focus,
form.box_form input[type="time"]:focus,
form.box_form input[type="date"]:focus,
form.box_form textarea:focus,
form.box_form select:focus
{
	box-shadow: 0px 0px 5px #55ccff;
	border: 1px solid #55ccff;
	background: #ffffff;
}
form.box_form textarea {
	width : 100%;
	padding : 3px;
	height : 100px;
}
form.box_form select {
	width : auto;
	padding : 3px;
	-webkit-appearance: auto;
}
input[id$="zip1"] {
	width : 60px !important;
}
input[id$="zip2"] {
	width : 70px !important;
}
input[id$="tel1"],
input[id$="tel2"],
input[id$="tel3"],
.company_fax
{
	width : 70px !important;
}
/*================================================
 *  table
 ================================================*/
table {
	width: 100%;
	margin-bottom: 1em;
	border-collapse: collapse;
	background-color :#fff;
	text-align: center;
	/* table-layout: fixed; */
}
th,td {
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}

/* none */
table.none{
	border: none;
}
table.none th,
table.none td
{
	border: none !important;
	background-color: #fff !important;
}

/* 一覧テーブル */
table.list_table {
	border: 1px solid #ddd;
	font-size: 90%;
}
table.list_table th {
	border: 1px solid #ddd;
	background: #eee;
}
table.list_table td {
	border: 1px solid #ddd;
}
table.list_table [class^="btn0"]{
	width : auto;
}
/* 一覧-履歴テーブル */
table.list_table2 {
	border: 1px solid #878daf;
}
table.list_table2 th {
	border: 1px solid #878daf;
	background: #f1f0ff;
}
table.list_table2 td {
	border: 1px solid #878daf;
}
table.list_table2 [class^="btn0"]{
	width : auto;
}
table.list_table2 i.fa-file-alt {
	font-size: 1.5rem;
}

/* form_table */
table.form_table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}
table.form_table th,
table.form_table td {
	border: 1px solid #dbe1e8;
	padding: 8px;
	text-align: left;
}
table.form_table th {
	background: #eee;
	width: 200px;
}

/* form_table2 */
table.form_table2 {
	margin: 5px auto 10px;
}
table.form_table2 th,
table.form_table2 td {
	text-align: left;
	border: 1px solid #878daf;
	padding: 8px;
}
table.form_table2 th {
	background: #f1f0ff;
	width: 180px;
}
table.form_table2 td a[class^="btn0"]{
	margin : 0;
}

/* login_form */
table.login_form {
	width: 600px;
	border-collapse: collapse;
	margin:15px auto;
}
table.login_form th,
table.login_form td {
	border: 1px solid #878daf;
	padding: 15px 8px;
}
table.login_form th {
	width: 180px;
	text-align: left;
	background: #f1f0ff;
}
table.login_form td {
	text-align: left;
}
table.login_form input[type="text"],
table.login_form input[type="password"] {
	width: 100%;
}

/* レシートテーブル（申込） */
div.receipt_table {
	width : 800px;
	margin : 30px auto;
	background-color: #f1f0ff;
	border: 1px solid #878daf;
	border-radius: 5px;
	padding: 15px 10px;
}
div.receipt_table table {
	width: 100%;
	background-color: #f1f0ff;
	margin-bottom: 0;
}
div.receipt_table table th,
div.receipt_table table td
{
	padding: 15px 20px;
}
div.receipt_table table th{
	text-align: left;
}
div.receipt_table table td{
	text-align: right;
	font-size: 1.1em;
}
div.receipt_table table tr.total th,
div.receipt_table table tr.total td
{
	border-top: 1px dashed #878daf;
	padding : 20px 20px;
	font-size: 1.2em;
}


ul.text_choice_box li {
    list-style: none;
    margin-left: 1em;
    text-indent: -2em;
    padding-left: 3em;
	margin-bottom: 5px;
}




/*================================================
 *  ページネーション
 ================================================*/
.pager{
	display: flex;
	-webkit-box-pack: center;
	-ms-filx-pack: center;
	justify-content: center;
	margin-bottom: 5px;
	position: relative;
	margin:10px auto;
}
.pager div{
	width: 40px;
	height: 25px;
	box-sizing: border-box;
}
.pager div a{
	display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;
	color: #333;
	width: 100%;
	height: 100%;
	font-size: 12px;
	text-decoration: none;
}
.pager div:hover a{
	background: #6ee6e6;
	color: #fff;
	transition: 0.2s;
	cursor: pointer;
}
.pager .current_page{
	pointer-events: none;
	background: #eee;
}
.pager .current_page a{
	pointer-events: none;
}
.pager .select_view{
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
}
.pager .select_view select {
	max-width : 90%;
	font-size : 100%;
	font-family : inherit;
	height: 2em;
}

/*================================================
 *  ツリーメニュー
 ================================================*/
 div.input_area
 {
	 position: relative;
	 margin : 15px auto;
	 width : 90%;
 }
 details {
	margin-bottom : 15px;
 }
 details.tree_menu {
	 max-width: 85%;
	 border : 2px solid #262693;
	 border-radius: 5px;
	 margin : 0 auto 10px auto;
 }
 details.tree_menu summary {
	 padding : 15px;
	 font-size: 16px;
	 font-weight: bold;
	 letter-spacing: 0.2rem;
	 color : #fff;
	 background-color: #262693;
 }

details.tree_menu summary + div.tree_flex {
	padding : 15px 30px;
}
details.tree_menu summary + div.tree_flex label
{
	width: 33%;
	margin-bottom: 10px;
	font-size: 1.1rem !important;
}
details.tree_menu summary + div.tree_flex label:hover {
	color: #00bfff;
}
details.tree_menu summary + div {
	background-color: #cbcbe3;
	padding : 15px 10px;
}
summary:hover {
	cursor: pointer;
}
/*================================================
 *  ボタンデザイン
 ================================================*/
.btn00,
.btn01,
.btn02,
.btn03,
.btn04
{
	display: block;
	width: 200px;
	margin: 0px auto;
	padding: 10px;
	border-radius :3px;
	text-align: center;
	text-decoration: none;
	background-color: #696969;
	border: 1px solid #dbe1e8;
	color:#fff;
}
.btn00 {/* 無効ボタン */
	pointer-events: none !important;
	-moz-user-select: none !important;
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
	text-decoration:none !important;
	color:#d7d7d7;
}
.btn01 {/* 確定・ダウンロード・実行等 */
	background-color: #262693;
	border-color: #262693;
}
.btn02 {/* 戻る等 */
	background-color: #696969;
	border-color: #dbe1e8;
}
.btn03 {/* 次へ・検索・遷移等 */
	background-color: #147ae0;
	border-color: #147ae0;
}
.btn04 {/* 目立たせたいボタン */
	background-color: #6a35de;
	border-color: #6a35de;
}
.btn01:hover,
.btn02:hover,
.btn03:hover,
.btn04:hover
{
	cursor: pointer;
	color:#fff;
	background-color: #6ee6e6;
	border-color: #6ee6e6;
}
.btn_mini {
	padding: 3px;
	width: 100px !important;
}
/*================================================
 *  メッセージボックス
 ================================================*/
.policy_box,
.warn_box,
.caution_box,
.info_box,
.comp_box {
   position: relative;
   border: 1px solid #333;
   border-radius: 5px;
   box-sizing: border-box;
   background: #ffeeee;
   padding: 20px 60px;
   width: 90%;
   min-height : 64px;
   margin: 15px auto;
   word-wrap: break-word;
}
.warn_box::after,
.caution_box::after,
.info_box::after,
.comp_box::after{
   position: absolute;
   top: 10px;
   left: 20px;
   font-size: 1.5rem;
   text-align: center;
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
}
.warn_box p,
.caution_box p,
.info_box p,
.comp_box p{
	margin-bottom: 0;
}
/* 警告 */
.warn_box{
   border-color: #E5411B;
   color: #E5411B;
}
.warn_box::after{
   content: "\f057";
   color: #E5411B;
}
/* 注意 */
.caution_box{
	border-color: #E5411B;
	background: #fdf5d2;
	box-sizing: border-box;
	color: #E5411B;
}
.caution_box::after{
   content: "\f071";
   color: #E5411B;
}
/* 情報 */
.info_box{
   border-color:  #1a0dab;
   color : #1a0dab;
   background: #d1e9ff;
}
.info_box::after{
   content: "\f05a";
}
/* 完了 */
.comp_box{
	border-color:  #005f10;
	color : #005f10;
	background: #eaffd1;
 }
.comp_box::after{
	content: "\f00c";
 }
.err_msg {
	color: #E5411B;
	margin-bottom: 0;
}
.err_msg::before{
	content: "\f057\00a0";
	color: #E5411B;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
 }
/*================================================
 *  余白
 ================================================*/
/* Top */
.MG-T0 { margin-top: 0 !important; }
.MG-T5 { margin-top: 5px !important; }
.MG-T10 { margin-top: 10px !important; }
.MG-T15 { margin-top: 15px !important; }
.MG-T20 { margin-top: 20px !important; }
.MG-T25 { margin-top: 25px !important; }
.MG-T30 { margin-top: 30px !important; }
/* Bottom */
.MG-B0 { margin-bottom: 0 !important; }
.MG-B5 { margin-bottom: 5px !important; }
.MG-B10 { margin-bottom: 10px !important; }
.MG-B15 { margin-bottom: 15px !important; }
.MG-B20 { margin-bottom: 20px !important; }
.MG-B25 { margin-bottom: 25px !important; }
.MG-B30 { margin-bottom: 30px !important; }
/* Left */
.PD-L5 { padding-left: 5px !important; }
.PD-L10 { padding-left: 10px !important; }
.PD-L15 { padding-left: 15px !important; }
.PD-L20 { padding-left: 20px !important; }
.PD-L25 { padding-left: 25px !important; }
.PD-L30 { padding-left: 30px !important; }
/* Right */
.PD-R5 { padding-right: 5px !important; }
.PD-R10 { padding-right: 10px !important; }
.PD-R15 { padding-right: 15px !important; }
.PD-R20 { padding-right: 20px !important; }
.PD-R25 { padding-right: 25px !important; }
.PD-R30 { padding-right: 30px !important; }

/*================================================
 *  ＊＊＊
 ================================================*/
.TDC { text-align:center;}
.TDL { text-align:left; }
.TDR { text-align:right; }
.border_box {/* 申込者情報を受講者1に反映するで使用 */
	width : 200px;
	display: block;
	margin: 0 auto;
	padding : 5px 0;
	border : 3px solid #84c1ff;
	border-radius: 10px;
}
.flex_box {
	display:flex;
	flex-wrap: nowrap;
	align-items: center;
}
.req {
	color: #CC0000;
}
.req_mm {
    color: #CC0000;
	font-size:90%;
}
.note {
	color: #006BB9;
}
.note_mm {
	color: #006BB9;
	font-size:90%;
}
.ui-datepicker { /*デートピッカーを最前列に表示*/
	z-index: 8888 !important;
}

/*================================================
 *  マイページ - パネル
 ================================================*/
 /* パネル領域 */
 .panel_area {
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: 0 auto;
	justify-content: flex-start;
}
/* パネルデザイン */
.panel_area .panel {
	display: flex;
	flex-wrap: wrap;
	width: 50%;
	align-content: flex-start;
	margin: 0 0 20px 0;
	padding: 0px 5%;
}
/* パネルボタン */
.panel_area .p_btn {
	display: inline-flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	height: 60px;
	box-sizing: border-box;
	border: 1px solid #147ae0;
	border-radius: 5px;
	font-weight: bold;
	font-size: 1.3em;
	letter-spacing: 0.3rem;
	color: #fff;
	background-color: #147ae0;
	margin-bottom: 5px;
}
.panel_area .p_btn:hover {
	cursor: pointer;
	background-color: #6ee6e6;
	border-color: #6ee6e6;
}
.panel_area .anone { /* 無効デザイン */
	background-color: #696969 !important;
	border-color: #696969 !important;
	color: #c7c5c5 !important;
	pointer-events: none !important;
	-moz-user-select: none !important;
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
	text-decoration:none !important;
}
/* パネルメモ */
.panel_area .p_memo {
	width: 100%;
	text-align: center;
	margin-bottom: 0;
}
/* icon */
.panel_area i{
	margin-left: 5px;
}
.panel_area .p_btn i {
	color: #fff;
}
.panel_area .anone i {
	color: #c7c5c5;
}

/*================================================
 *  強調文字
 ================================================*/
.strong {
	font-size: 1.5em;
	letter-spacing: 0.1em;
	font-weight: 600;
}
/*================================================
 *  住所検索ボタン（リンク文字）
 ================================================*/
a.btn_search_addr {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 1px;
}
a.btn_search_addr:hover {
	border-bottom: 1px dashed;
}
a.btn_search_addr::before {
	content : '\f002';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right : 2px;
}