<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";

/* ======================================================================= 
	コンテンツ共通
 ========================================================================*/
/* parts  -------------------- { */
:root {
	/* color */
	--color-base1: rgba(0,101,209,1.00);
	--color-base2: #0EB1D2;
	--color-base1-tp10: rgba(0,101,209,0.10);
	--color-base1-tp50: #0065D180;
	--color-base1-tp90: rgba(0,101,209,0.90);
	--color-base2-tp10: rgba(14,177,210,0.10);
	--color-base2-tp10c: #e6f7fa;
	--color-base2-tp50: #0EB1D280;
	--color-accent1: #FDE74C;
	--color-accent2: rgba(254,240,134,1.00);
	--color-accent2-tp10: rgba(254,240,134,0.10);
	--color-point1: rgba(216,71,151,1.00) ;
	--color-point2: rgba(241,222,222,1.00);
}
.font-color-base1 { color: var(--color-base1);}
.font-emphasis { font-weight: 700; color: var(--color-point1); }

/* re-setteng */
h1,h2,h3,h4,h5 { font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 700; font-style: normal; }
.hdg-b::before { background: var(--color-base1);}
.btn-b { background: var(--color-base1); border: 1px solid var(--color-base1); }
.btn-b:hover, .btn-b:active, .btn-b:focus { background: var(--color-btn-b-hover); border: 1px solid var(--color-btn-b-hover); }
.list-a&gt;li:before { background: var(--color-base1);; }
.list-link-a&gt;li&gt;a::before { border-top: 2px solid var(--color-base1); border-right: 2px solid var(--color-base1); }
.icon-faq::after { background-color: var(--color-base1); border: 1px solid var(--color-base1); }
/* -------------------- } parts */

/* fccl-hero-area-keyboardmaster  -------------------- { */
.fccl-hero-area-keyboardmaster { margin-top: 0; border-top: 10px solid var(--color-base1); border-bottom: 3px double var(--color-base1); background: url('/usage/lesson/keyboard/images/cover-area-illust-02.svg') no-repeat 100% 0%; background-size: contain; background-blend-mode:lighten; }
.fccl-hero-area-keyboardmaster &gt; .content { background-color: rgba(0,101,209, 0.2);background-image: linear-gradient(0deg,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 50%),repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(0,101,209, 0.1) 3px,rgba(0,101,209, 0.1) 6px); padding-bottom: 32px; }
.fccl-hero-area-keyboardmaster &gt; .content &gt; .content-inner { position: relative; max-width: 1280px; margin: 0 auto; padding-top:16px; }
.fccl-hero-area-keyboardmaster &gt; .content &gt; .inner-bg { background: url('/usage/lesson/keyboard/images/cover-area-illust-01.svg') no-repeat 16px 16px; background-size: auto; background-blend-mode:lighten;}
.fccl-hero-area-keyboardmaster &gt; .content &gt; .content-inner .title-txt { font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 700; font-style: normal; line-height: 1.6; padding-left: 136px; }
.fccl-hero-area-keyboardmaster &gt; .content &gt; .content-inner .title-txt .sub-txt { font-size: 2.0rem; }
.fccl-hero-area-keyboardmaster &gt; .content &gt; .content-inner .title-txt .main-txt { font-size: 4.0rem; }
@media only screen and (max-width: 900px) {
	.item-sup-bg { background: url('/pcnorikae/images/cover-area-illust-01.svg') no-repeat 50% 50%; background-size: contain; background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;}
}
@media only screen and (max-width: 768px) {
	.cover-area,.cover-area-subordinate { display: block; }
	.cover-area .item-fmw { margin: 32px 32px 0; max-width: inherit;}
	.cover-area-subordinate .item-img { display: none; }
}
@media only screen and (max-width: 480px) {
	.fccl-hero-area-keyboardmaster &gt; .content &gt; .content-inner .title-txt .sub-txt { font-size: 1.8rem; }
	.fccl-hero-area-keyboardmaster &gt; .content &gt; .content-inner .title-txt .main-txt { font-size: 2.4rem; }
}
/* -------------------- } fccl-hero-area-keyboardmaster */

/* sidemenu  -------------------- { */
.sidemenu:not(:first-child) { margin-top: 32px; }
.sidemenu h2 { position: relative; padding: 8px 8px 8px 24px; background: var(--color-base1); color: #ffffff;}
.sidemenu h2::before { position: absolute; top: 25%; left: 8px; width: 6px; height: 50%; content: ''; border-radius: 3px; background: var(--color-accent1); }
.sidemenu .pagemenu,.sidemenu .relatedLinks { border: 1px solid #cccccc; }
.sidemenu .pagemenu &gt; li,.sidemenu .relatedLinks &gt; li { margin: 0 8px; }
.sidemenu .pagemenu &gt; li:not(:first-child),.sidemenu .relatedLinks &gt; li:not(:first-child) { border-top: 1px dotted #cccccc; }
.sidemenu .pagemenu &gt; li &gt; a,.sidemenu .relatedLinks &gt; li &gt; a { display: block; text-decoration: none; padding: 10px 0px 10px 1.3em; text-indent: -1.3em; }
.sidemenu .pagemenu &gt; li &gt; a::before,.sidemenu .relatedLinks &gt; li &gt; a::before { content: '';display: inline-block; width: 1em; height: 1em; background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: .3em; }
.sidemenu .pagemenu &gt; li &gt; a::before { background-image: url('/usage/lesson/keyboard/images/icon/icon-arrow-link-01.svg'); }
.sidemenu .relatedLinks &gt; li &gt; a::before {background-image: url('/usage/lesson/keyboard/images/icon/icon-arrow-link-02.svg'); }
.sidemenu .pagemenu &gt; li &gt; a:hover { background: var(--color-accent2); color: #000000; }
.sidemenu .relatedLinks &gt; li &gt; a:hover { background: var(--color-point2); color: #000000; }
/* -------------------- } sidemenu */

/* precondition（コンテンツの前提OS注記） -------------------- { */
.precondition { padding: 12px 16px; border-radius: 3px; border: 1px solid var(--color-accent1); background: var(--color-accent2-tp10);}
.precondition p { font-size: 1.4rem; }
.precondition p span	{ display:inline-block; padding: 0.1em 0.5em; margin: 0 0.3em; color: #0032AD;  font-weight: 700; border-radius: 3px; border: 1px solid #66B9FF; background: var(--color-base2-tp10c);  }
/* -------------------- } precondition（コンテンツの前提OS注記） */


/* ======================================================================= 
	トップページ
 ========================================================================*/
/* indexBlock  -------------------- { */
.indexBlock h2 { margin: 32px 0 24px 0; padding: 8px 16px 8px 54px; background: url(/usage/lesson/keyboard/images/km_title_mark.png) no-repeat; background-position:8px 8px; background-color: var(--color-base1); color: #ffffff; font-size: 2.4rem; }
/* -------------------- } indexBlock */

/* articlelist  -------------------- { */
.articlelist { display: grid; grid-template-columns:  repeat(auto-fit, minmax(450px, 1fr)); gap: 16px; align-items: stretch; }
.articlelist &gt; .bnList { display: flex; align-items: stretch; border: 1px dashed var(--color-base2); background-image: linear-gradient(180deg,rgba(14,177,210,0.10) 0%,rgba(14,177,210,0) 30%); }
.articlelist &gt; .bnList &gt; a { display: flex; align-items: stretch; flex-direction: column; justify-content: space-between; padding: 8px; text-decoration: none; }
.articlelist &gt; .bnList &gt; a .item-head { font-size: 2.0rem; border-bottom: 3px dotted var(--color-accent1); padding: 8px; }
.articlelist &gt; .bnList &gt; a .item-cont { margin-top: 24px; }
.articlelist &gt; .bnList &gt; a .item-foot { margin-top: 16px; text-align: center; }
.articlelist &gt; .bnList &gt; a:hover { color: inherit; }
	/* 詳しく見るボタン resetting */
	.btn-round_arrow { color: var(--color-base1); font-size: 1.6rem; font-weight: 700; }
	.btn-round_arrow:after { background: var(--color-base1); }
/* -------------------- } articlelist */


/* ======================================================================= 
	配下コンテンツ
 ========================================================================*/
/* fccl-hero-area-keyboardmaste.Subordinate（見出し） -------------------- { */
.fccl-hero-area-keyboardmaster.Subordinate { border-top: 25px solid var(--color-base1-tp90); }
.fccl-hero-area-keyboardmaster.Subordinate &gt; .content { position: relative; border-top: 25px solid var(--color-base1); padding-bottom: 16px; }
.fccl-hero-area-keyboardmaster.Subordinate &gt; .content .contentName { position: absolute; top: -42px; right: 8px; font-size: 2.0rem; color: #333333; font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 700; font-style: normal;}
.fccl-hero-area-keyboardmaster.Subordinate &gt; .content .contentName span { display: inline-block; letter-spacing: 1px; text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px; }
.fccl-hero-area-keyboardmaster &gt; .content &gt; .content-inner .title-txt { min-height: 85px; }
@media only screen and (max-width: 480px) {
	.fccl-hero-area-keyboardmaster.Subordinate &gt; .content .contentName { font-size: 1.6rem; }
}
/* -------------------- } fccl-hero-area-keyboardmaster.Subordinate（見出し） */

/* parts  -------------------- { */
/* readBlock */
#sidebar-available &gt; .main .readBlock { margin: 1.5em 0 2em; }
/* anqBanner */
#sidebar-available &gt; .main .anqBanner { margin-top: 12rem; }
/* -------------------- } parts */

/* mainBlock  -------------------- { */
#sidebar-available &gt; .main .maininnner &gt; .mainBlock:not(:first-child) { margin-top: 10rem; }
/* h2 */
#sidebar-available &gt; .main .mainBlock h2 { margin-bottom: 24px; padding: 4px 8px 8px 1.9em; text-indent: -1.6em; font-size: 2.6rem; border-top: 2px solid var(--color-base1); border-bottom: 2px solid var(--color-base1); background: var(--color-base1-tp10); }
#sidebar-available &gt; .main .mainBlock h2::before {content: '';display: inline-block; width: 1.3em; height: 1.3em; background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: .3em; vertical-align: middle; background-image: url('/usage/lesson/keyboard/images/icon/icon-subordinate-h2.svg');}
/* h3 */
#sidebar-available &gt; .main .mainBlock h3 { margin-top: 24px; margin-bottom: 24px; padding: 4px 8px 8px 1.9em; text-indent: -1.6em; font-size: 2.0rem; border-top: 2px solid var(--color-base1); border-bottom: 2px dotted var(--color-base1); background: var(--color-base2-tp10); }
#sidebar-available &gt; .main .mainBlock h3::before {content: '';display: inline-block; width: 1.3em; height: 1.3em; background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: .3em; vertical-align: middle; background-image: url('/usage/lesson/keyboard/images/icon/icon-subordinate-h3.svg');}
/* h4 */
#sidebar-available &gt; .main .mainBlock h4 { clear: both; margin: 2em 0 0 0; }
/* subRead */
#sidebar-available &gt; .main .mainBlock .subRead &gt; p + p { margin-top: 18px; }
#sidebar-available &gt; .main .mainBlock .subRead + .twoClm,#sidebar-available &gt; .main .mainBlock .subRead + .singleClm { margin-top: 24px; }
@media only screen and (max-width: 480px) {
	#sidebar-available &gt; .main .mainBlock h2 { font-size: 2.0rem; }
	#sidebar-available &gt; .main .mainBlock h3 { font-size: 1.8rem; }
}
/* -------------------- } mainBlock */

/*  single, 2column  -------------------- { */
#sidebar-available &gt; .main .capImg { margin: 0; padding-bottom: 9px; text-align: center; }
#sidebar-available &gt; .main .capImg a img { border: 1px solid #999999; }
#sidebar-available &gt; .main .capImg a:hover img { border: 1px solid #828282; }
#sidebar-available &gt; .main p.capTxt{ margin-bottom: 0; padding: 0 9px 9px 9px; font-size: 100%!important; line-height: 150%!important; margin-top: 1.6rem!important; }
#sidebar-available &gt; .main p.capTxt:last-child{ margin-bottom: 1.6rem; }
	/*single */
	#sidebar-available &gt; .main .singleClm {clear: both;width: 40%;margin: 0 auto 30px auto;padding: 9px 9px 0 9px;background-color: var(--color-accent2-tp10); border: 1px solid #CCCCCC;}
	#sidebar-available &gt; .main .singleClm p { margin-top: 0; }
	/* 2column */
	#sidebar-available &gt; .main .twoClm { display: flex; width: 100%; align-items: stretch; margin-bottom: 1.0em;}
	#sidebar-available &gt; .main .twoClm .itemBlockL {	flex-basis: 100%;	padding: 9px 9px 0 9px;	background-color: var(--color-accent2-tp10);	border: 1px solid  #CCCCCC;}
	#sidebar-available &gt; .main .twoClm .itemBlockR {	flex-basis: 100%;	padding: 9px 9px 0 9px;	background-color: var(--color-accent2-tp10);	border: 1px solid  #CCCCCC;}
	#sidebar-available &gt; .main .twoClm .itemBlock {flex-basis: 46.6%;padding: 9px 9px 0 9px;	background-color: var(--color-accent2-tp10);	border: 1px solid #CCCCCC; margin-bottom: 1.0em;}
	#sidebar-available &gt; .main .icon1 { flex-basis: 15%; display: flex; align-items: center; justify-content: center; flex-grow: 0; }
	#sidebar-available &gt; .main .icon2 { flex-basis: 100%; display: flex; align-items: center; justify-content: center;  flex-grow: 0; margin-bottom: 1.0em;}
@media only screen and (max-width: 1000px) {
	#sidebar-available &gt; .main .twoClm {display:block;}
	#sidebar-available &gt; .main .singleClm{width: 80%}
	#sidebar-available &gt; .main .icon1 img, #sidebar-available &gt; .main .icon2 img { display: none;}
	#sidebar-available &gt; .main .icon1, #sidebar-available &gt; .main .icon2 {height: 25px; margin: 1.0em 0; background: url(/usage/lesson/keyboard/input/images/icon_arrow3.gif) no-repeat center center;}
	#sidebar-available &gt; .main .icon1.notuse, #sidebar-available &gt; .main .icon2.notuse {background: none;}
}
/* -------------------- } single, 2column */

/* table（tbl-kbm-a）  -------------------- { */
#sidebar-available &gt; .main .mainBlock .tbl-a.tbl-kbm-a {}
#sidebar-available &gt; .main .mainBlock .tbl-a.tbl-kbm-a thead tr:first-child&gt;*:first-child { width: 130px }
#sidebar-available &gt; .main .mainBlock .tbl-a.tbl-kbm-a tbody th, #sidebar-available &gt; .main .mainBlock .tbl-a.tbl-kbm-a tbody .th { width: 130px; font-weight: 700; }
#sidebar-available &gt; .main .mainBlock .tbl-a.tbl-kbm-a tbody td { width: 40%; }
.tbl-a th.diff-bg-kbm-a, .tbl-a td.diff-bg-kbm-a { background: #C4D1E8; }
/* -------------------- } table（tbl-kbm-a） */

/* numberlist  -------------------- { */
.numberlist { counter-reset: my-counter; list-style: none; padding: 0; margin: 0; }
.numberlist &gt; li { position: relative; padding-left: 3.6rem; }
.numberlist &gt; li:not(:first-child) { margin-top: 1.5em; }
.numberlist &gt; :before { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; content: counter(my-counter); counter-increment: my-counter; background-color: var(--color-base2); border: 1px solid var(--color-base2); border-radius: 50%; height: 2.2rem; width: 2.2rem; color: #000000; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.numberlist &gt; li .list-tit { display: block; font-size: 1.8rem; margin-bottom: .5em; }
/* -------------------- } numberlist */
</pre></body></html>