@charset "UTF-8";

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

/* --------------------------------------------------
  要素に共通の属性
-------------------------------------------------- */
body {
  font-family: 'メイリオ',Meiryo,Helvetica,Arial;
  margin: 2px;
  -webkit-text-size-adjust: 100%;
  min-width: 375px;
  overflow-x: clip;
}
img { border: none; }
pre { font-size: 0.9em; white-space: pre-wrap; }
pre.contents { line-height: 1.4em; white-space: pre-wrap; }

/* --------------------------------------------------
  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.4em; padding: 3px; background-color: lightgray; font-weight: normal; }
table.s td  { border: 0px; font-size: 0.9em; line-height: 1.4em; padding: 3px; }
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; }
/* 全体進捗用 r=現在もイータ,t=テイスタに降格 */
td.r   { border: 1px solid #999999; vertical-align: top;    background-color: #ffef73; }
td.rc  { border: 1px solid #999999; vertical-align: top;    background-color: #ffef73; text-align: center; }
td.rr  { border: 1px solid #999999; vertical-align: top;    background-color: #ffef73; text-align: right; }
td.t   { border: 1px solid #999999; vertical-align: top;    background-color: #b5d69c; }
td.tc  { border: 1px solid #999999; vertical-align: top;    background-color: #b5d69c; text-align: center; }
td.tr  { border: 1px solid #999999; vertical-align: top;    background-color: #b5d69c; text-align: right; }
/* --------------------------------------------------
  P
-------------------------------------------------- */
p         { margin: 0px 5px 10px  5px; line-height: 1.5em;	/* 読みやすさのためには1.5emから1.6emは必要 */ }
p.comment { margin: 0px 5px 10px 50px; line-height: 1.4em; font-size: 0.9em; }
p.updated { margin: 0px 5px 5px   0px; line-height: 1.4em; font-size: 0.9em; color: gray; text-align: right; }
p.alt     { margin: 0px 5px 5px  30px; text-indent: -1.3em; /* 設問文の選択肢の文章が長い場合、2行目にインデントを付ける */ }

/* --------------------------------------------------
  トップメニューの配色
-------------------------------------------------- */
.on {
  background-color: #ffef73;
  font-weight:	bold;
  text-align: center;
  height: 20px;
  border-spacing: 0;
  border-top: 1px solid lightgray;
  border-left: 1px solid lightgray;
  border-right: 2px solid #999999;
  padding: 0 7px 0 7px;
}
.off {
  background-color: lavender;
  text-align: center;
  height: 20px;
  border-spacing: 0;
  border-top: 1px solid lightgray;
  border-left: 1px solid lightgray;
  border-right: 2px solid #999999;
  padding: 0 7px 0 7px;
}
.on a          { text-decoration: none; }
.on a:link     { color: #000000; }
.on a:visited  { color: #000000; }
.on a:hover    { color: #000000; }
.off a         { text-decoration: none; /* text-decoration: underline; */ }
.off a:link    { color: #000000; }
.off a:visited { color: #000000; }
.off a:hover   { color: #ff0000; }
.on2 {
  background-color: #ffffff;
  text-align: center;
  height: 20px;
  border-top: 1px solid lightgray;
  border-left: 1px solid lightgray;
  border-right: 2px solid #999999;
  padding: 0 7px 0 7px;
}
.off2 {
  background-color: lavender;
  text-align: center;
  height: 20px;
  border-top: 1px solid lightgray;
  border-left: 1px solid lightgray;
  border-right: 2px solid #999999;
  padding: 0 7px 0 7px;
}
.on2 a          { text-decoration: none; }
.on2 a:link     { color: #000000; }
.on2 a:visited  { color: #000000; }
.on2 a:hover    { color: #000000; }
.off2 a         { text-decoration: none; /* text-decoration: underline; */ }
.off2 a:link    { color: #000000; }
.off2 a:visited { color: #000000; }
.off2 a:hover   { color: #ff0000; }

/* --------------------------------------------------
  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.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
---------------------------------------- */
div.contents { width: 100%; margin-left: 2px; margin-right: 2px; }
div.left     { width:  68%; float: left; padding-right: 5px; border-right: 1px solid #999999; }
div.right    { width:  30%; float: left; padding-top: 2px; }
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; }
h2.right  { display: none; }
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; }
@media screen and ( max-width:880px ){
div.left  { width: 100%; float: left; margin-right: 5px; padding-right: 0; border-right: 0; }
div.right { width: 100%; float: left; margin-right: 5px; }
h2.right  { display: block; 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; }
}
/* -------------------------------------
  設問・解説用
---------------------------------------- */
ul.alt    { /* 1)2)選択肢 */ padding-right: 5px; list-style-type: none; }
ul.alt li { /* 1)2)選択肢 */ text-indent: -1.3em; }
table.alt { /* abcd選択肢 */ width: 99%; padding-left: 5px; }
p.point   { margin-left: 50px; }
p.comment { margin-left: 50px; }
p.caution { margin-left: 50px; }
.cr-point:before   { content: "POINT"; }
.cr-point          { background-color: #4ab6d0; color: white; }
.cr-comment:before { content: "補足"; }
.cr-comment        { background-color: #4064b6; color: white; }
.cr-caution:before { content: "注意"; }
.cr-caution        { background-color: #4064b6; color: white; }
/* -------------------------------------
  右側パネル用メニュー
---------------------------------------- */
div.menu {
  border-bottom: 1px solid orange; border-left: 10px solid orange;
  background-color: #f0f8ff; /* aliceblue; */
  font-size: 86%;
  font-weight: bold;
  line-height: 1.3em;
  padding-left: 7px;
}
/* -------------------------------------
  通常の矩形
---------------------------------------- */
.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);
}
/* -------------------------------------
	コースアイコン生成
---------------------------------------- */
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 4px 6px;
}
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 4px 6px;
}
span.sub { display: block; font-weight: normal; font-size: 0.9em; line-height: 1.3em; padding: 0 5px 2px 0; }
/* -------------------------------------
  アイコン
---------------------------------------- */
/* 青丸小 */
.a1s { background: url(num/cb1.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.a2s { background: url(num/cb2.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.a3s { background: url(num/cb3.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.a4s { background: url(num/cb4.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.a5s { background: url(num/cb5.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.a6s { background: url(num/cb6.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.a7s { background: url(num/cb7.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.a8s { background: url(num/cb8.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.a9s { background: url(num/cb9.gif) no-repeat 0px center; padding: 0 2px 0 17px; }

/* 緑丸小 */
.b1s { background: url(num/cg1.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.b2s { background: url(num/cg2.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.b3s { background: url(num/cg3.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.b4s { background: url(num/cg4.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.b5s { background: url(num/cg5.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.b6s { background: url(num/cg6.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.b7s { background: url(num/cg7.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.b8s { background: url(num/cg8.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.b9s { background: url(num/cg9.gif) no-repeat 0px center; padding: 0 2px 0 17px; }

/* 灰丸小 */
.c1s { background: url(num/ch1.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.c2s { background: url(num/ch2.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.c3s { background: url(num/ch3.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.c4s { background: url(num/ch4.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.c5s { background: url(num/ch5.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.c6s { background: url(num/ch6.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.c7s { background: url(num/ch7.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.c8s { background: url(num/ch8.gif) no-repeat 0px center; padding: 0 2px 0 17px; }
.c9s { background: url(num/ch9.gif) no-repeat 0px center; padding: 0 2px 0 17px; }

/* 青丸 */
.a1 { background: url(num/cb1.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.a2 { background: url(num/cb2.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.a3 { background: url(num/cb3.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.a4 { background: url(num/cb4.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.a5 { background: url(num/cb5.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.a6 { background: url(num/cb6.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.a7 { background: url(num/cb7.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.a8 { background: url(num/cb8.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.a9 { background: url(num/cb9.gif) no-repeat 1px center; padding: 0 2px 0 19px; }

/* 緑丸 */
.b1 { background: url(num/cg1.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.b2 { background: url(num/cg2.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.b3 { background: url(num/cg3.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.b4 { background: url(num/cg4.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.b5 { background: url(num/cg5.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.b6 { background: url(num/cg6.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.b7 { background: url(num/cg7.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.b8 { background: url(num/cg8.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.b9 { background: url(num/cg9.gif) no-repeat 1px center; padding: 0 2px 0 19px; }

/* 灰丸 */
.c1 { background: url(num/ch1.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.c2 { background: url(num/ch2.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.c3 { background: url(num/ch3.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.c4 { background: url(num/ch4.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.c5 { background: url(num/ch5.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.c6 { background: url(num/ch6.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.c7 { background: url(num/ch7.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.c8 { background: url(num/ch8.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.c9 { background: url(num/ch9.gif) no-repeat 1px center; padding: 0 2px 0 19px; }

/* 赤丸 */
.r1 { background: url(num/cr1.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.r2 { background: url(num/cr2.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.r3 { background: url(num/cr3.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.r4 { background: url(num/cr4.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.r5 { background: url(num/cr5.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.r6 { background: url(num/cr6.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.r7 { background: url(num/cr7.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.r8 { background: url(num/cr8.gif) no-repeat 1px center; padding: 0 2px 0 19px; }
.r9 { background: url(num/cr9.gif) no-repeat 1px center; padding: 0 2px 0 19px; }

.bt { background: url(num/mb-turquoise.gif) no-repeat 2px center; padding: 0 2px 0 12px; }
.bb { background: url(num/mb-blue.gif) no-repeat 2px center; padding: 0 2px 0 12px; }
.bo { background: url(num/mb-orange.gif) no-repeat 2px center; padding: 0 2px 0 12px; }
.bv { background: url(num/mb-green.gif) no-repeat 2px center; padding: 0 2px 0 12px; }
.bg { background: url(num/mb-gray.gif) no-repeat 2px center; padding: 0 2px 0 12px; }
.bc { background: url(num/mb-cyan.gif) no-repeat 2px center; padding: 0 2px 0 12px; }
.br { background: url(num/mb-red.gif) no-repeat 2px center; padding: 0 2px 0 12px; }

.m-edit { background: url(activity.gif) no-repeat 1px center; padding: 0 0 0 19px; }

/* -----------------------
  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); }
/* -----------------------
  COPYRIGHT & VERSION
-------------------------- */
.version   { font-size: 0.8em; color: gray; }
.copyright { font-size: 0.8em; color: gray; }
.version:before   { content: "Version: "; }
.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 0px 4px; padding: 4px;
  border-radius: 5px; border: 1px solid #999999;
  font-size: 0.9em; line-height: 1.4em; 
  color: red; background-color: floralwhite;
}

/* -----------------------
  スクロール領域
-------------------------- */
.scrollable {
  width: 100%;
  height: 300px;		/* heightは個別に変更すること */
  overflow-x: clip;
  overflow-y: auto;
  background-color:white;
}