@charset "UTF-8";
/* --------------------------------------------------
  #40e0d0 turquoise (064,224,208)
  #4ab6d0 functional turquoise (074,182,208)
  #4064b6 functional blue (064,100,182)
  #f0f8ff aliceblue (240,248,255)
  #b5d69c taster green (181,214,156)
  #ffef73 eater orange (255,239,115)
-------------------------------------------------- */

/* -----------------------
  HTML,BODY
-------------------------- */
html { font-size: 62.5%; }
body {
	line-height: 1.5em;
  font-size: 16px;
  font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',arial,helvetica,sans-serif;
  margin: 2px;
  overflow-x: hidden;
  overflow-y: hidden;
}
img  { border: none; }
pre  { font-size: 0.9em; white-space: normal; }
/* -----------------------
  セクション mainのheightは-170した値
-------------------------- */
header          { display:block; width:100%; height: 70px; }
main            { display:block; width:100%; height: 200px; overflow-x: auto; overflow-y: auto; background-color:white; }
main.helpscroll { display:block; width:100%; height: 200px; overflow-x: auto; overflow-y: auto; background-color:beige; }
section         { padding: 5px 0px 0px 5px; }
section.content { padding: 5px 0px 0px 5px; }
div.state       { display:block; float:right; margin-top:2px; margin-right:10px; font-weight:bold; color:red; }
div.question    { padding: 10px 5px 5px 10px; }
div.explain     { padding:  5px 5px 5px 10px; }
div.quote       { padding:  5px; margin-right: 5px; margin-bottom: 15px; font-size: 0.9em; background-color: snow;}
footer          { display:block; width:100%; height: 100px; }
section.buttons { display:block; width:100%; margin-top: 15px; }
section.links   { display:block; width:100%; margin-top: 10px; }
/* -----------------------
  TABLE,TH,TD
-------------------------- */
table,th,td { border: none; }
table.full  { vertical-align: top; border-collapse: collapse; width: 100%; }
table.w93   { width: 93%; }
table.w95   { width: 95%; }
table.w98   { width: 98%; }
table.w99   { width: 99%; }
table.s     { vertical-align: top; margin: 10px 10px 20px 10px; border: none; } 
table.n     { vertical-align: top; margin: 10px 10px 20px 10px; border: 1px solid #999999; border-collapse: collapse; }
table.s th  { border: 0px; font-size: 0.9em; line-height: 1.3em; padding: 2px; background-color: lightgray; font-weight: normal; }
table.s td  { border: 0px; font-size: 0.9em; line-height: 1.3em; padding: 2px; }
table.n th  { border: 1px solid #999999; font-size: 0.9em; line-height: 1.4em; padding: 3px; background-color: lightgray; font-weight: normal; }
table.n td  { border: 1px solid #999999; font-size: 0.9em; line-height: 1.4em; padding: 3px; }
td.n   { border: 1px solid #999999; vertical-align: top;    background-color: white; }
td.nc  { border: 1px solid #999999; vertical-align: top;    background-color: white; text-align: center; }
td.nr  { border: 1px solid #999999; vertical-align: top;    background-color: white; text-align: right; }
td.nm  { border: 1px solid #999999; vertical-align: middle; background-color: white; text-align: center; }
td.nml { border: 1px solid #999999; vertical-align: middle; background-color: white; }
td.m   { border: 1px solid #999999; vertical-align: top;    background-color: aliceblue; }
td.mc  { border: 1px solid #999999; vertical-align: top;    background-color: aliceblue; text-align: center; }
td.mr  { border: 1px solid #999999; vertical-align: top;    background-color: aliceblue; text-align: right; }
td.mm  { border: 1px solid #999999; vertical-align: middle; background-color: aliceblue; text-align: center; }
td.mml { border: 1px solid #999999; vertical-align: middle; background-color: aliceblue; }
td.g   { border: 1px solid #999999; vertical-align: top;    background-color: lightgray; }
td.gc  { border: 1px solid #999999; vertical-align: top;    background-color: lightgray; text-align: center; }
td.gr  { border: 1px solid #999999; vertical-align: top;    background-color: lightgray; text-align: right; }
td.gm  { border: 1px solid #999999; vertical-align: middle; background-color: lightgray; text-align: center; }
td.gml { border: 1px solid #999999; vertical-align: middle; background-color: lightgray; }
td.bar-green  { background-color: #b5d69c; height: 13px; }
td.bar-orange { background-color: #ffef73; height: 13px; }
td.dotted { border-top: 1px dotted #999999; }
td.vline  { border-left: 1px solid #999999; }
td.hline  { border-bottom: 1px solid #999999; }
td.q-num  { width: 30px; padding: 2px 3px 1px 3px; line-height: 1.1em; font-size: 0.9em; text-align:center; }
/* --------------------------------------------------
  P
-------------------------------------------------- */
div.p     { margin: 15px 10px 0 5px; }
div.n     { margin: 10px 10px 0 5px; }
p         { margin: 0 10px 5px 5px; }
p.updated { margin: 0 10px 0 0; line-height: 1.4em; font-size: 0.9em; color: gray; text-align: right; }
p.alt     { margin: 0 10px 0 30px; text-indent: -1.3em; }
p.right   { text-align: right; }
p.alert   { margin: 5px 10px 0 20px; line-height: 1.4em; font-size: 0.9em; color: red; }
/* --------------------------------------------------
  LINK
-------------------------------------------------- */
a       { color: #687ab8; text-decoration: none; }
a:link  { color: #1B6CCD; }
a:hover { color: #0099FF; text-decoration: none; }
/* -----------------------
  UL,OL
-------------------------- */
ul        { padding-right: 5px; list-style-type: disc; }
ul.none   { padding-right: 5px; list-style-type: none; }
ul.alt    { padding-right: 5px; list-style-type: none; }
ul.alt li { text-indent: -1.3em; }
ul.n      { padding-right: 5px; list-style-type: disc; }
ul.disc   { padding-right: 5px; list-style-type: disc; }
ul.square { padding-right: 5px; list-style-type: square; }
li        { padding: 0 5px 0px 0; }
li.n      { padding: 0 5px 5px 0; list-style-type: disc; }
li.none   { padding: 0 5px 5px 0; list-style-type: none; }
/* --------------------------------------------------
  H2,H3,H4 & 右側パネル用メニュー
-------------------------------------------------- */
h2     { font-size: 1.1em; margin:0 0 10px 0; padding: 2px 10px 0 5px; border-bottom: 1px  solid #999999; border-left: 12px solid turquoise; background-color: aliceblue; }
h2.fix { font-size: 1.1em; margin:0;          padding: 2px 10px 0 5px; border-bottom: 1px  solid #999999; border-left: 12px solid turquoise; background-color: aliceblue; }
h3     { font-size: 1.1em; margin:0 0 10px 0; padding: 2px 10px 0 5px; border-bottom: 1px dotted #999999; color: #0033CC; }
h4     { font-size: 1.1em; margin:0 0 10px 0; padding: 2px 10px 0 5px; border-bottom: 1px dotted #999999; color: gray; }
div.menu {
  border-bottom: 1px solid #999999; border-left:  10px solid orange;
  background-color: #f0f8ff; /* aliceblue; */
  font-weight: bold; line-height: 1.5em;
  padding-left: 7px;
}
div.course {
  border-bottom: 1px solid #999999; border-left: 15px solid gray;
  background-color: aliceblue;
  font-weight: bold; line-height: 1.3em; padding: 4px 0 3px 7px;
}
div.activecourse {
  border-bottom: 1px solid red; border-left: 15px solid red;
  background-color: floralwhite;
  font-weight: bold; line-height: 1.3em; padding: 4px 0 3px 7px;
}
span.sub { font-weight: normal; font-size: 0.9em; display: block; line-height: 1.3em; padding-bottom: 2px; }

/* --------------------------------------------------
  通常の矩形
-------------------------------------------------- */
.frame  { width: 80%; margin: 10px 5px 10px 5px; padding: 5px; background-color: floralwhite; /* 設問中で使用 */ }
.frame2 { width: 80%; margin: 10px 5px 10px 5px; padding: 5px; border: 1px solid #999999; background-color: floralwhite; /* 設問中で使用 */ }
.form   { width: 95%; margin: 10px 5px 10px 5px; padding: 5px; border: 1px solid #999999; background-color: #F8F2CD; /* cream yellow */ }
.form2  { width: 95%; margin: 10px 5px 10px 5px; padding: 5px; background-color: lavender;    /* 解説内の設問参照 */ } 
.form3  { width: 95%; margin: 10px 5px 10px 5px; padding: 5px; background-color: floralwhite; /* 手続きなどで多用 */ }
.icon   {                          font-weight: normal; padding: 1px;             line-height: 1.3em; background-color: floralwhite; border: 1px solid #999999; } 
.icon-lavender { font-size: 0.8em; font-weight: normal; padding: 0px 3px 0px 3px; line-height: 1.3em; background-color: lavender;    border: 1px solid #999999; } 
.icon-orange   { font-size: 0.8em; font-weight: normal; padding: 0px 3px 0px 3px; line-height: 1.3em; background-color: #ffef73;     border: 1px solid #999999; } 
.icon-green    { font-size: 0.8em; font-weight: normal; padding: 0px 3px 0px 3px; line-height: 1.3em; background-color: #b5d69c;     border: 1px solid #999999; } 
/* -------------------------------------
  隅のまるい矩形 class="cr cr-orange"
---------------------------------------- */
.cr          { display: inline-block; padding: 2px 5px 0px 5px; border-radius: 4px; line-height: 1.3em; vertical-align: top; text-align: center; }
.cr-lavender { font-size: 0.8em; color: blue; font-weight: normal; border: 1px solid #999999; background-color: lavender;}
.cr-orange   { font-size: 0.8em; color: blue; font-weight: normal; border: 1px solid #999999; background-color: #ffef73;	/* Eater-Orange */ }
.cr-green    { font-size: 0.8em; color: blue; font-weight: normal; border: 1px solid #999999; background-color: #b5d69c;	/* Taster-Green */ }
.cr-nengou   { font-size: 0.7em; color: gray; font-weight: normal; width: 50px; margin-top: 2px; background-color: #f1d9d9; /* light pink */ }
/* --------------------------------------------------
  INPUT,TEXTAREA,SELECT
-------------------------------------------------- */
input[type="button"]:hover { background-color: yellow; color: red; }
input[type="submit"]:hover { background-color: yellow; color: red; }
input[type="button"] { padding: 2px 4px 2px 4px; line-height: 1.4em; border: 1px solid gray; border-radius: 5px; background-color: lavender; }
input[type="submit"] { padding: 2px 4px 2px 4px; line-height: 1.4em; border: 1px solid gray; border-radius: 5px; background-color: #FFCCAA; }
input.procbutton { padding: 2px 10px 2px 10px; line-height: 2.2em; }
input.abcdbutton { padding: 1px 0px 1px 0px; width: 50px; line-height: 1.5em;
  color: blue; background-color: lavender;
  font-size: 1.1em; font-weight: bold; font-family: 'Courier New';
}
textarea[readonly]{ background-color: aliceblue; }
textarea[disabled]{ background-color: aliceblue; pointer-events: none; }
select[disabled]  { background-color: aliceblue; pointer-events: none; }
input[readonly]   { background-color: aliceblue; }
input[disabled]   { background-color: aliceblue; pointer-events: none; }
input[type="checkbox"] {
  width: 12px; height: 12px; margin: 0 3px 4px 0;
  vertical-align: middle;
  transform-origin: right middle;
  transform: scale(1.2, 1.2);
}
input[type="radio"] {
  width: 16px; height: 16px; margin: 0 3px 4px 0;
  vertical-align: bottom;
  transform-origin: right middle;
  transform: scale(1.2, 1.2);
}

/* -----------------------
  COPYRIGHT & VERSION
-------------------------- */
.version   { font-size: 0.8em; color: gray; }
.copyright { font-size: 0.8em; color: gray; }
.copyright:before { content: "Copyright Functional Corp. All Rights Reserved."; }
/* -----------------------
  フォントサイズ
-------------------------- */
.fs-ll    { font-size: 1.2em; /* 19px 17px 特大 */ }
.fs-l     { font-size: 1.1em; /* 18px 15px 大   */ }
.fs-s     { font-size: 0.9em; /* 14px 13px 小   */ line-height: 1.4em;  }
.fs-alert { font-size: 0.9em; /* 14px 13px 小   */ line-height: 1.4em; color: red; }
.fs-ss    { font-size: 0.8em; /* 13px 11px 特小 */ line-height: 1.3em; }
/* -----------------------
  お知らせや注意の表示
-------------------------- */
.notice {
  width: 40%; float: right; margin:0px 4px 4px 4px; padding: 4px;
  border-radius: 5px; border: 1px solid #999999;
  font-size: 0.9em; line-height: 1.3em; 
  color: red; background-color: floralwhite;
}
/* -----------------------
  Font Awesome (https://use.fontawesome.com/releases/v6.6.0/css/all.css)
-------------------------- */
.exclamation::before { /* triangle-exclamation */ content:'\f071'; padding-right:1px; font:var(--fa-font-solid); color:#1B6CCD; }
.home::before        { /* hause */                content:'\f015'; padding-right:1px; font:var(--fa-font-solid); }
.book::before        { /* book */                 content:'\f02d'; padding-right:1px; font:var(--fa-font-solid); }
.bars::before        { /* bars */                 content:'\f0c9'; padding-right:1px; font:var(--fa-font-solid); }
.sitemap::before     { /* location-dot */         content:'\f3c5'; padding-right:1px; font:var(--fa-font-solid); }
.totop::before       { /* circle-arrow-up */      content:'\f0aa'; padding-right:1px; font:var(--fa-font-solid); }
.prev::before        { /* circle-arrow-left */    content:'\f0a8'; padding-right:1px; font:var(--fa-font-solid); }
.next::before        { /* circle-arrow-right */   content:'\f0a9'; padding-right:1px; font:var(--fa-font-solid); }
.forward::before     { /* circle-arrow-right */   content:'\f0a9'; padding-right:1px; font:var(--fa-font-solid); }
.contact::before     { /* envelope */             content:'\f0e0'; padding-right:1px; font:var(--fa-font-solid); }
.stop::before        { /* circle-stop */          content:'\f28d'; padding-right:1px; font:var(--fa-font-solid); }
.check::before       { /* circle-check */         content:'\f058'; padding-right:1px; font:var(--fa-font-solid); }
.help::before        { /* circle-question */      content:'\f059'; padding-right:1px; font:var(--fa-font-solid); }
.incident::before    { /* circle-exclamation */   content:'\f06a'; padding-right:1px; font:var(--fa-font-solid); }
.xmark::before       { /* circle-xmark */         content:'\f057'; padding-right:1px; font:var(--fa-font-solid); }
.arrow-up::before    { /* arrow-up */             content:'\f062'; font-size: 1.2em;  font:var(--fa-font-solid); }
.chevron-up::before    { /* chevron-up */         content:'\f077'; padding-right:1px; font:var(--fa-font-solid); }
.chevron-down::before  { /* chevron-down */       content:'\f078'; padding-right:1px; font:var(--fa-font-solid); }
.chevron-left::before  { /* chevron-left */       content:'\f053'; padding-right:1px; font:var(--fa-font-solid); }
.chevron-right::before { /* chevron-right */      content:'\f054'; padding-right:1px; font:var(--fa-font-solid); }