@charset "UTF-8";

/* =============================================
		実践！タッチタイピング コンテンツ共通CSS
   ============================================= */

/* > コンテンツ共通 ======================================================== */
/* 見出し - H1 （fccl-hero-area-typing） --------------------　{ */
.fccl-hero-area-typing { min-height: 150px; height: 150px; margin-bottom: 50px; background: #3cc9ed no-repeat padding-box;}
.fccl-hero-area-typing .content { position: relative; z-index: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 40px; }
.fccl-hero-area-typing .content-inner { max-width: 560px; }
.fccl-hero-area-typing .content-inner .main-txt,.fccl-hero-area-typing .content-inner .main-txt>* { font-size: 4rem; line-height: 1.3; }
.fccl-hero-area-typing .content-inner .main-txt { margin-bottom: 16px; margin-left: 20px; }
.fccl-hero-area-typing .brand { min-height: 10px}
.fccl-hero-area-typing .brand>img { position: absolute; bottom: 40px; right: 230px; z-index: -1; min-height: inherit; display: block; width: 144px; height: auto; }
.fccl-hero-area-typing .character { min-height: 140px;}
.fccl-hero-area-typing .character>img { position: absolute; top: 10px; right: 20px; z-index: -1; min-width: inherit; height: 100%; display: block; }
.fccl-hero-area-typing .visual { position: absolute; top: 0; left: 0; z-index: -2; width: 100%; min-height: 150px; }
.fccl-hero-area-typing .visual>img { position: absolute; top: 0; right: 0; z-index: -1; display: block; max-width: inherit; height: 100%; }
@media only screen and (max-width: 1280px) {
	.fccl-hero-area-typing { height:calc(150vw*100/1280); /*min-height: inherit;*/ max-height: 150px; }
	.fccl-hero-area-typing .content-inner { margin-left:8px; }
	.fccl-hero-area-typing .content-inner .main-txt,.fccl-hero-area-typing .content-inner .main-txt>* { font-size:calc(40vw*100/1280); }
	.fccl-hero-area-typing .brand { height:calc(10vw*100/1280); /*min-height: inherit;*/ }
	.fccl-hero-area-typing .character {	height:calc(140vw*100/1280); /*min-height: inherit;*/ }
	.fccl-hero-area-typing .visual { height:calc(150vw*100/1280); /*min-height: inherit;*/ }
}
@media only screen and (max-width: 767px) {
	.fccl-hero-area-typing { margin-bottom: 30px;}
	.fccl-hero-area-typing .content-inner .main-txt,.fccl-hero-area-typing .content-inner .main-txt>* { font-size:2.4rem; }
	.fccl-hero-area-typing .content-inner .main-txt { margin-bottom:12px; }
	.fccl-hero-area-typing .brand { height:calc(10vw*100/767); min-height: inherit; }
	.fccl-hero-area-typing .brand>img { bottom: inherit; top: 130px;}
	.fccl-hero-area-typing .character {	height:calc(140vw*100/767); min-height: inherit; }
	/*.fccl-hero-area-typing .character>img { top: 30px; }*/
	.fccl-hero-area-typing .visual { height:calc(150vw*100/767); }
}
@media only screen and (max-width: 480px) {
	.fccl-hero-area-typing { height:calc(110vw*100/480); max-height: inherit; min-height: 110px;}
	.fccl-hero-area-typing .content { padding-top: 20px; }
	.fccl-hero-area-typing .content-inner .main-txt { margin-left: 2px; }
	.fccl-hero-area-typing .brand { height:calc(10vw*100/480); }
	.fccl-hero-area-typing .brand>img { right: 20px; top: 90px; }
	.fccl-hero-area-typing .character { height:calc(50vw*100/480); }
	.fccl-hero-area-typing .character>img { top: 20px; }
	.fccl-hero-area-typing .visual { height:calc(110vw*100/480); min-height: 110px;}
}
/* -------------------- } 見出し - H1 （fccl-hero-area-typing） */
/* 見出し - H2 --------------------　{ */
@media only screen and (max-width: 1080px) {
	h2[class*="index-"] .spbr { display: block; }
}
/* -------------------- } */
/* トップに戻る、ヘルプボタン （goto-area） --------------------　{ */
.goto-area { width: 100%; max-width: 1280px; margin: 0 auto 30px; }
.goto-area .help_btn, .goto-area .returnTOP_btn { text-align: right; margin-right: 20px; }
.goto-area .help_btn > a, .goto-area .returnTOP_btn > a { display: inline-block; background: #3cc9ed; padding: .5em 1.0em; border-radius: 5px; text-decoration: none; font-weight: 700; }
/* -------------------- } トップに戻る、ヘルプボタン （goto-area） */
/* 入力リンクボタン （inputBtn） --------------------　{ */
.inputBtn { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: -16px; margin-left: -16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.inputBtn.mt16p { margin-top: 16px!important; }
.inputBtn>li { flex: 1; margin-bottom: 16px; padding-left: 16px; }
.inputBtn>li a { position: relative; display: block; padding: 8px 34px 8px 22px; text-align: center; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: background .2s; font-weight: 700; background: #fff;  border-radius: 20px; text-decoration: none; }
.inputBtn>li a.roma { border: 3px solid #ffba00; }
.inputBtn>li a.kana { border: 3px solid #8ed700; }
.inputBtn>li a.roma::before { display: block; position: absolute; content: ""; top: 50%; right: 12px; width: 8px; height: 8px; border-top: 3px solid #ffba00; border-right: 3px solid #ffba00; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; border-color: #ffba00; }
.inputBtn>li a.kana::before { display: block; position: absolute; content: ""; top: 50%; right: 12px; width: 8px; height: 8px; border-top: 3px solid #8ed700; border-right: 3px solid #8ed700; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; border-color: #8ed700; }
.inputBtn>li a.roma:hover, .inputBtn>li a.roma:active, .inputBtn>li a.roma:focus { background: #feeecc;}
.inputBtn>li a.kana:hover, .inputBtn>li a.kana:active, .inputBtn>li a.kana:focus { background: #e7f6cc;}
@media only screen and (max-width: 480px) {
	.inputBtn { display: block; }
}
.inputBtn.col4-Btn>li { width: 25%; flex: initial;}
@media only screen and (max-width: 770px) {
	.inputBtn.col4-Btn>li { width: 50%; }
}
@media only screen and (max-width: 480px) {
	.inputBtn.col4-Btn>li { width: 100%; }
}
/* -------------------- } 入力リンクボタン （inputBtn-area） */
/* チャレンジ検定コース内 e-typingリンクボタン （go-ety-nav） --------------------　{ */
.go-ety-nav { margin-top: 20px; }
.go-ety-nav>.go-ety-nav-btn { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: -16px; margin-left: -16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-end; }
.go-ety-nav>.go-ety-nav-btn>li { margin-bottom: 16px; padding-left: 16px; }
.go-ety-nav>.go-ety-nav-btn>li a { position: relative; display: block; padding: 10px 30px; text-align: center; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: background .2s; font-weight: 700; border-radius: 20px; text-decoration: none; color: #ffffff; }
.go-ety-nav>.go-ety-nav-btn>li a.mock { background: linear-gradient(180deg, #1a2d8a 0%, #1a2d8a 50%, #0c2081 50%, #0c2081 100%); }
.go-ety-nav>.go-ety-nav-btn>li a.mock:hover { background: linear-gradient(180deg, #2c45af 0%, #2c45af 50%, #1635a6 50%, #1635a6 100%); }
.go-ety-nav>.go-ety-nav-btn>li a.master { background: linear-gradient(180deg, #1b44a4 0%, #1b44a4 50%, #0d389e 50%, #0d389e 100%); }
.go-ety-nav>.go-ety-nav-btn>li a.master:hover { background: linear-gradient(180deg, #2e5cc8 0%, #2e5cc8 50%, #1851c2 50%, #1851c2 100%); }
/* -------------------- } チャレンジ検定コース内 e-typingリンクボタン （go-ety-nav） */
/* e-typing ロゴリンク （pwd-ety） --------------------　{ */
.pwd-ety { text-align: right; }
.pwd-ety a { width: 288px; text-indent: 100%; white-space: nowrap; overflow: hidden; display: inline-block; background: url(/usage/lesson/keyboard/typing/images/common/logo-pwd_ety_or.png) no-repeat; background-size: auto 50%; background-position: right;}
/* -------------------- } e-typing ロゴリンク （pwd-ety） */
/* < コンテンツ共通 ======================================================== */

/* > トップページ ======================================================== */
/* タッチタイピングについて （about-touchtyping） --------------------　{ */
main#support-contents .section-inner.about-touchtyping { padding-top: 20px; padding-bottom: 0;}
.about-touchtyping ul { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: -16px; margin-left: -16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.about-touchtyping ul>li { margin-bottom: 16px; padding-left: 16px; }
.about-touchtyping ul>li a { position: relative; display: inline-block; padding: 8px 34px 8px 22px; text-align: center; line-height: 1.4; text-decoration: none!important; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: background .2s;   background: #fff; border: 2px solid #3cc9ed; border-radius: 20px; }
.about-touchtyping ul>li a::before { display: block; position: absolute; content: ""; top: 50%; right: 12px; width: 8px;    height: 8px; border-top: 2px solid #3cc9ed; border-right: 2px solid #3cc9ed; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; border-color: #3cc9ed; }
.about-touchtyping ul>li a:hover, .about-touchtyping ul>li a:active, .about-touchtyping ul>li a:focus { background: #cef1fa;}
@media only screen and (max-width: 480px) {
	main#support-contents .section-inner.about-touchtyping { padding-top: 10px;}
}
/* -------------------- } タッチタイピングについて （about-touchtyping） */
/* タイピングメインコンテンツ （typing-main） --------------------　{ */
.corner-header { margin-bottom: 20px; }
.corner-header h2 { font-size: 3.2rem; }
.corner-header .sub-txt1 { font-size: 2.0rem; font-weight: 700; }
.corner-header .sub-txt2 { display: inline-block; font-size: 1.5rem; }
.typing-theme-img { margin-bottom: 20px; }
.typing-theme-title { margin-bottom: 18px; padding: 0 20px; font-size: 2.2rem; line-height: 42px;}
.typing-theme-exp { margin-top: 16px; padding: 0 20px; }
.typing-theme-inputBtnArea { margin: 20px;}
.typing-theme-update { margin-top: 8px; padding: 0 20px; text-align: right; }
@media only screen and (max-width: 884px) {
	.lyt-idx-b.diff-col2 { display: block; }
	.lyt-idx-b.diff-col2>* { width: 100%; }
}
/* おすすめタイピング （typing-recommendation） */
.typing-recommendation { margin: 0; padding: 16px; border: 1px solid #e0d2b2; border-radius: 5px; background: url(/usage/lesson/keyboard/typing/images/home/sp_bg.png) #f6f2e8; height: 100%;}
.typing-recommendation .corner-header {color: #605346; }
.typing-recommendation .corner-header .sub-txt2 { color: #836825; background-repeat: repeat-x; background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em; background-position: right bottom; background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(147,135,121,0)), color-stop(0.1, rgba(147,135,121,0.02)), color-stop(0.5, rgba(147,135,121,1)), color-stop(0.98, rgba(147,135,121,0)), to(rgba(147,135,121,0)) ); background-image: -webkit-radial-gradient(center center,0.2em 0.1em,rgba(147,135,121,1) 0,rgba(147,135,121,0) 0.1em,rgba(147,135,121,0) 0.2em), -webkit-radial-gradient(center center,0.4em 0.1em,rgba(147,135,121,1) 0,rgba(147,135,121,0) 0.3em,rgba(147,135,121,0) 0.4em), -webkit-radial-gradient(center center,0.7em 0.1em,rgba(147,135,121,1) 0,rgba(147,135,121,0) 0.6em,rgba(147,135,121,0) 0.7em), -webkit-radial-gradient(center center,7.1em 0.1em,rgba(147,135,121,1) 0,rgba(147,135,121,0) 7em,rgba(147,135,121,0) 7.1em); background-image: radial-gradient(0.2em 0.1em at center center,rgba(147,135,121,1),rgba(147,135,121,0)), radial-gradient(0.4em 0.1em at center center,rgba(147,135,121,1),rgba(147,135,121,0)), radial-gradient(0.7em 0.1em at center center,rgba(147,135,121,1),rgba(147,135,121,0)), radial-gradient(7.1em 0.1em at center center,rgba(147,135,121,1),rgba(147,135,121,0)); }
.typing-recommendation .typing-theme-title { color: #474747; background-color: #e7ddc3; border-radius: 3px; }
/* ピックアップタイピング （typing-pickup） */
.typing-pickup { margin: 0; padding: 16px; border: 1px solid #fd8faf; border-radius: 5px; background: #fef3f7; height: 100%; }
.typing-pickup .corner-header {color: #333333; }
.typing-pickup .corner-header .sub-txt2 { color: #555555; background-repeat: repeat-x; background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em; background-position: right bottom; background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(68,68,68,0)), color-stop(0.1, rgba(68,68,68,0.02)), color-stop(0.5, rgba(68,68,68,1)), color-stop(0.98, rgba(68,68,68,0)), to(rgba(68,68,68,0)) ); background-image: -webkit-radial-gradient(center center,0.2em 0.1em,rgba(68,68,68,1) 0,rgba(68,68,68,0) 0.1em,rgba(68,68,68,0) 0.2em), -webkit-radial-gradient(center center,0.4em 0.1em,rgba(68,68,68,1) 0,rgba(68,68,68,0) 0.3em,rgba(68,68,68,0) 0.4em), -webkit-radial-gradient(center center,0.7em 0.1em,rgba(68,68,68,1) 0,rgba(68,68,68,0) 0.6em,rgba(68,68,68,0) 0.7em), -webkit-radial-gradient(center center,7.1em 0.1em,rgba(147,135,121,1) 0,rgba(147,135,121,0) 7em,rgba(147,135,121,0) 7.1em); background-image: radial-gradient(0.2em 0.1em at center center,rgba(68,68,68,1),rgba(68,68,68,0)), radial-gradient(0.4em 0.1em at center center,rgba(68,68,68,1),rgba(68,68,68,0)), radial-gradient(0.7em 0.1em at center center,rgba(68,68,68,1),rgba(68,68,68,0)), radial-gradient(7.1em 0.1em at center center,rgba(68,68,68,1),rgba(68,68,68,0)); }
.typing-pickup .typing-theme-title { color: #333333; background-color: #FD8FAF; border-radius: 3px; }
/* ちょっと一息「パソコン活用情報」 （breaktime） */
.breaktime	{ background-color: #EBF9FD; border: 1px solid #B1EAF8; border-radius: 4px; margin: 0; padding: 16px; }
.breaktime h3	{ font-size: 2.2rem; margin: 0 0 1em; padding: 0 0 0; }
.breaktime h3 span.icon-break	{ display: inline-block;background: url(/usage/lesson/keyboard/typing/images/home/icon-break.png) no-repeat 0 0; padding-left:28px; }
span.denkinum	{ display: none; }
/* -------------------- } タイピングメインコンテンツ （typing-main） */
/* タイピングコンテンツメニュー （typing-menu） --------------------　{ */
.typing-menu { border: 1px solid #d5d5d5; background: url(/usage/lesson/keyboard/typing/images/home/bg_kb.png) no-repeat right top #ffffff; border-radius: 5px; }
.typing-menu .typing-menu-inner { padding: 16px; }
.typing-menu .typing-menu-inner h2 { font-size: 3.2rem; }
.typing-menu .typing-menu-inner h3 { font-size: 2.2rem; color: #02576e; }
.typing-menu .typing-menu-inner .typing-menu-exp { margin-top: 16px; font-size: 1.8rem;}
.typing-menu .typing-menu-inner .typing-menu-exp em { display: inline-block; border: 1px solid #ffba00; border-radius: 25px; font-size: 1.5rem; font-weight: 700; padding: 5px 15px; margin-left: 16px; color: #333333; }
.typing-menu .typing-menu-inner .practice { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 16px!important; margin-bottom: -16px; margin-left: -16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.typing-menu .typing-menu-inner .practice>li { width: 50%; margin-bottom: 16px; padding-left: 16px; }
.typing-menu .typing-menu-inner .practice>li>.practice-item { position: relative; background-color: #E4F7FB; border-radius: 5px; padding: 16px; }
.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 16px!important; margin-bottom: -16px; margin-left: -16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing>li { flex: 1;  margin-bottom: 16px; padding-left: 16px; }
.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing>li a { position: relative; display: block; padding: 12px 28px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: background .2s; font-weight: 700; background: #fff;  border-radius: 3px; color: #000000; text-decoration: none; overflow: hidden; }
.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing>li a span { position: relative; }
.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing>li a::after { position: absolute; content: ''; top: 42%; right: 12px; width: 8px; height: 8px;border-top: 2px solid #000000; border-right: 2px solid #000000; transform: rotate(45deg); }
.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing>li a::before { position: absolute; top: 0; left: 0; width: 100px; height: 200px; content: ''; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-80%) translateY(-25px); transform: translateX(-80%) translateY(-25px); }
.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing>li a.roma::before { background: #ffba00; }
.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing>li a.kana::before { background: #8ed700; }
.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing>li a:hover::before { width: 800px; height: 800px; -webkit-transform: translateX(-1%) translateY(-175px); transform: translateX(-1%) translateY(-175px);}
@media only screen and (max-width: 767px) {
	.typing-menu .typing-menu-inner .practice { display: block; }
	.typing-menu .typing-menu-inner .practice>li { width: 100%; }
}
@media only screen and (max-width: 646px) {
	.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing { display: block; }
	.typing-menu .typing-menu-inner .practice>li>.practice-item .list-link-typing>li { width: 100%; }
}
/* 基本コース */
.typing-menu .typing-menu-inner h2.icon-basic::before { display: inline-block; width: 32px; height: 32px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/home/icon-basic_v2.png); background-size: contain; vertical-align: text-top; margin-right: 16px;}
/* 実力アップコース */
.typing-menu .typing-menu-inner h2.icon-capable::before { display: inline-block; width: 32px; height: 32px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/home/icon-capable_v2.png); background-size: contain; vertical-align: text-top; margin-right: 16px;}
.practice-item .level { border-radius: 3px; position:absolute; top:16px; right:16px; padding: 3px 0; background-color: #ffffff; }
/* チャレンジ検定コース(配下ページ共通) */
.typing-menu .typing-menu-inner h2.icon-exam::before { display: inline-block; width: 32px; height: 32px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/home/icon-exam_v2.png); background-size: contain; vertical-align: text-top; margin-right: 16px;}
.typing-menu .typing-menu-inner .exam-inner { background-color: #dfeef9; border-radius: 5px; padding: 16px; }
.typing-menu .typing-menu-inner .list-link-typing-exam { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 16px!important; margin-bottom: -16px; margin-left: -16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.typing-menu .typing-menu-inner .list-link-typing-exam>li { width: 33.333%; margin-bottom: 16px; padding-left: 16px; }
.typing-menu .typing-menu-inner .list-link-typing-exam>li a { position: relative; display: block; padding: 12px 36px 12px 20px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: background .2s; font-weight: 700; background: #1f509b;  border-radius: 3px; color: #ffffff; text-decoration: none; overflow: hidden; }
.typing-menu .typing-menu-inner .list-link-typing-exam>li a::before { position: absolute; content: ''; top: 42%; right: 16px; width: 8px; height: 8px;border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(45deg); }
.typing-menu .typing-menu-inner .list-link-typing-exam>li a:hover { background: #144dba; }
.typing-menu .typing-menu-inner .list-link-typing-exam>li a img { position: absolute; top: 20%; right: 36px; }
@media only screen and (max-width: 857px) {
	.typing-menu .typing-menu-inner .list-link-typing-exam>li { width: 50%; }
}
@media only screen and (max-width: 610px) {
	.typing-menu .typing-menu-inner .list-link-typing-exam>li { width: 100%; }
}
.go-ety-nav>.go-ety-nav-btn.exam { justify-content: center; padding-top: 30px; }
.go-ety-nav>.go-ety-nav-btn.exam>li a.mock { padding: 12px 60px; font-size: 1.7rem; border-radius: 24px; background: linear-gradient(180deg, #446bb9 0%, #446bb9 50%, #10419e 50%, #10419e 100%); }
.go-ety-nav>.go-ety-nav-btn.exam>li a.mock:hover { background: linear-gradient(180deg, #527ccd 0%, #527ccd 50%, #1546b5 50%, #1546b5 100%); }
.go-ety-nav>.go-ety-nav-btn.exam>li a>span { position: absolute; top: -26px; left: -8px; display: block; border-radius: 50%; background: #c5e4fc; color: #04408b; padding: 10px 8px 8px 16px; }
.go-ety-nav>.go-ety-nav-btn.exam>li a>span:before { position: absolute; left: calc(50% - 10px); content: "";  bottom: -7px; border-width: 10px 10px 0 10px; border-style: solid; border-color: #c5e4fc transparent transparent transparent; }
@media only screen and (max-width: 480px) {
	.go-ety-nav>.go-ety-nav-btn.exam { display: block; margin-bottom: 0; margin-left: 0;}
	.go-ety-nav>.go-ety-nav-btn.exam>li a.mock { padding: 12px 0; width: 100%; }
}
/* -------------------- } タイピングコンテンツメニュー （typing_menu） */
/* < トップページ ======================================================== */

/* > help, touchtyping, input ======================================================== */
.index-help, .index-touchtyping, .index-input { font-size: 4rem; line-height: 1.3; padding-top: 30px; padding-bottom: 2.0rem; max-width: 1280px; margin: 0 auto 52px; text-align: center; background-image: linear-gradient(109.6deg, rgba(255, 186, 0, 1) 25%, rgba(142, 215, 0, 1) 25%, rgba(142, 215, 0, 1) 50%, rgba(60, 201, 237, 1) 50%, rgba(60, 201, 237, 1) 75%, rgba(253, 143, 175, 1) 75%, rgba(253, 143, 175, 1) 100%); background-repeat: no-repeat; background-size: 100% 10px; background-position: bottom; }
.index-help::before { display: inline-block; width: 40px; height: 40px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/help/icon-help_v2.png); background-size: contain; vertical-align: text-top; margin-right: 16px;}
.index-touchtyping::before { display: inline-block; width: 40px; height: 40px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/touch_typing/icon-touch_typing_v2.png); background-size: contain; vertical-align: text-top; margin-right: 16px;}
.index-input::before { display: inline-block; width: 40px; height: 40px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/input/icon-input_v2.png); background-size: contain; vertical-align: text-top; margin-right: 16px;}
.typing-menu.etc-menu:not(:first-child) { margin-top: 40px; }
.typing-menu.etc-menu .typing-menu-inner h3 { background-color: #00b6e4; border-radius: 6px; font-size: 2.2rem; color: #000000; margin: 0 0 30px; padding: 0.2em 0.5em; }
.typing-menu.etc-menu .typing-menu-inner h4 { display: flex; justify-content: start; align-items: center; position: relative; padding: .5em .7em; overflow: hidden; border: 2px solid #1E55B2; border-radius: 5px; font-size: 1.8rem; margin-bottom: 1em; }
.typing-menu.etc-menu .typing-menu-inner h4:before { position: absolute; top: -50%; left: -25px; z-index: 1; transform: rotate(20deg); width: 100px; height: 200%; background-color: #1E55B2; content: ''; }
.typing-menu.etc-menu .typing-menu-inner h4 > span { margin-right: 1.5em; color: #ffffff; z-index: 2; }
.typing-menu.etc-menu .typing-menu-inner table { border: 1px solid #D5D5D5; table-layout: fixed; }
.typing-menu.etc-menu .typing-menu-inner table thead th { border: 1px solid #D5D5D5; padding: 1em; background: #00B6E4;}
.typing-menu.etc-menu .typing-menu-inner table tbody th, .typing-menu.etc-menu .typing-menu-inner table tbody td { border: 1px dashed #D5D5D5; padding: 0.6em 2em; }
.typing-menu.etc-menu .typing-menu-inner table tbody th { background: #D4F2FA; text-align: left;}
.typing-menu.etc-menu .typing-menu-inner table tbody td { text-align: center; white-space: nowrap;}
@media only screen and (max-width:767px) {
	.index-help, .index-touchtyping, .index-input { font-size: 3.4rem; }
	.typing-menu.etc-menu .typing-menu-inner h3 {font-size: 2.0rem;}
}
@media only screen and (max-width:480px) {
	.index-help, .index-touchtyping, .index-input { font-size: 3.0rem; }
}
/* < help, touchtyping, input ======================================================== */

/* > コース共通 ======================================================== */
.index-basic, .index-improve, .index-exam { font-size: 4rem; line-height: 1.3; padding-top: 30px; padding-bottom: 2.0rem; max-width: 1280px; margin: 0 auto 52px; text-align: center; }
@media only screen and (max-width:767px) {
	.index-basic, .index-improve, .index-exam {font-size: 3.4rem; }
	.index-basic .icon-basic::before, .index-improve .icon-capable::before, .index-exam .icon-exam::before { width: 30px; height: 30px; }
}
@media only screen and (max-width:480px) {
	.index-basic, .index-improve, .index-exam  {font-size: 3.0rem; }
	.index-basic .icon-basic::before, .index-improve .icon-capable::before, .index-exam .icon-exam::before { width: 20px; height: 20px; }
}
/* < コース共通 ======================================================== */

/* > 基本コース ======================================================== */
.index-basic .icon-basic::before { display: inline-block; width: 40px; height: 40px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/home/icon-basic_v2.png); background-size: contain; vertical-align: text-top; margin-right: 16px;}
/* < 基本コース ======================================================== */

/* > 実力アップコース ======================================================== */
.index-improve .icon-capable::before { display: inline-block; width: 40px; height: 40px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/home/icon-capable_v2.png); background-size: contain; vertical-align: text-top; margin-right: 16px;}
/* < 実力アップコース ======================================================== */

/* > チャレンジ検定コース ======================================================== */
.index-exam .icon-exam::before { display: inline-block; width: 40px; height: 40px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/home/icon-exam_v2.png); background-size: contain; vertical-align: text-top; margin-right: 16px;}
.heading-exam { position: relative; padding: .5em .7em .4em; border-bottom: 10px solid #158AE4; background: #F2F8FD; }
.heading-exam::before, .heading-exam::after { position: absolute; left: 50%; bottom: -25px; width: 35px; height: 18px; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ''; }
.heading-exam::before { background-color: #158AE4; }
.heading-exam::after { bottom: -11px; background-color: #F2F8FD; }
.exam-about { margin-top: 40px; border: 1px solid #bbddf5; background: #e8f5ff; border-radius: 5px;}
.exam-about .exam-about-inner { padding: 16px; }
.exam-about .exam-about-inner h3 { color: #000000; font-size: 3.2rem; } 
.exam-about .exam-about-inner h3::before { display: inline-block; width: 32px; height:32px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/exam/icon-about_header.png); background-size: contain; background-repeat: no-repeat; vertical-align: text-top; margin-right: 16px; } 
.exam-about .exam-about-inner h4 { color: #000000; font-size: 2.4rem; } 
.typing-menu.exam-menu { margin-top: 40px; background-image: none; }
.typing-menu.exam-menu .typing-menu-inner h3 { position: relative;color: #ffffff; font-size: 3.2rem; background: #1E55B2; border-radius: 5px; padding: 0 16px;} 
.typing-menu.exam-menu .typing-menu-inner h3 .level { position: absolute; top: 0; right: 16px; }
.typing-menu.exam-menu .typing-menu-inner h3 .level > img { vertical-align: middle;}
.typing-menu.exam-menu .typing-menu-inner h4 { font-size: 2.4rem; }
.typing-menu.exam-menu .typing-menu-inner .examclass { margin-top: 16px; border: 1px solid #d5d5d5; border-radius: 3px; padding: 16px; }
.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: -16px; margin-left: -16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 16px; }
.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn>li { width: 33.333%; margin-bottom: 16px; padding-left: 16px; }
.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn>li a { position: relative; display: block; padding: 12px 36px 12px 25px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: background .2s; font-weight: 700; background: #DFEEF9; border-bottom: 1px solid #99CCF1; border-radius: 3px; color: #000000; text-decoration: none; overflow: hidden; }
.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn>li a::before { position: absolute; content: ''; top: 40%; left: 6px; width: 8px; height: 8px; border-top: 2px solid #000000; border-right: 2px solid #000000; transform: rotate(45deg); }
.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn>li a:hover { background: #C8E4F8; }
.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn>li a .score-area { position: absolute; top: 6px; right: 6px; background: #ffffff; border-radius: 3px; padding: 6px; min-width: 130px }
.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn>li a .score-area::before { content: "合格スコア"; display: inline-block; font-size: 1.2rem; color: #333333; }
.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn>li a .score-area > .score { display: block; position: absolute; top: 6px; right: 6px; color: #0E5895; }
@media only screen and (max-width:797px) {
	.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn>li { width: 50%; }
	.typing-menu.exam-menu .typing-menu-inner h3 { font-size: 3.0rem; } 
}
@media only screen and (max-width:567px) {
	.heading-exam { font-size: 2.8rem; padding: .5em 0 .4em; }
	.exam-about .exam-about-inner h3 { font-size: 2.6rem; }
	.exam-about .exam-about-inner h4 { font-size: 2.2rem; } 
	.exam-about .exam-about-inner h3::before { width: 26px; height: 26px; margin-right: 10px; } 
	.typing-menu.exam-menu .typing-menu-inner .examclass .exam-imputBtn>li { width: 100%; }
	.typing-menu.exam-menu .typing-menu-inner h3 { font-size: 2.6rem; } 
	.typing-menu.exam-menu .typing-menu-inner h3 .level { right: 6px; }
}
/* < チャレンジ検定コース ======================================================== */

/* > ローマ字タイピング  ======================================================== */
.heading-roma { position: relative; padding: .5em .7em .4em; border-bottom: 10px solid #FFA200; background: #FFF9F1; }
.heading-roma::before, .heading-roma::after { position: absolute; left: 50%; bottom: -25px; width: 35px; height: 18px; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ''; }
.heading-roma::before { background-color: #FFA200; }
.heading-roma::after { bottom: -11px; background-color: #FFF9F1; }
.typing-menu.roma-menu:not(:first-child) { margin-top: 40px; }
.typing-menu.roma-menu .typing-menu-inner h3 { color: #000000; font-size: 3.2rem; } 
.typing-menu.roma-menu .typing-menu-inner h3::before { display: inline-block; width: 42px; height: 42px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/roma/icon-keybo-roma.png); background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin-right: 16px; } 
@media only screen and (max-width:480px) {
	.heading-roma { padding: .5em 0 .4em; }
}
/* < ローマ字タイピング  ======================================================== */

/* > かなタイピング  ======================================================== */
.heading-kana { position: relative; padding: .5em .7em .4em; border-bottom: 10px solid #73CB00; background: #F7FBF1; }
.heading-kana::before, .heading-kana::after { position: absolute; left: 50%; bottom: -25px; width: 35px; height: 18px; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ''; }
.heading-kana::before { background-color: #73CB00; }
.heading-kana::after { bottom: -11px; background-color: #F7FBF1; }
.typing-menu.kana-menu:not(:first-child) { margin-top: 40px; }
.typing-menu.kana-menu .typing-menu-inner h3 { color: #000000; font-size: 3.2rem; } 
.typing-menu.kana-menu .typing-menu-inner h3::before { display: inline-block; width: 42px; height: 42px; content: ''; background-image: url(/usage/lesson/keyboard/typing/images/kana/icon-keybo-kana.png); background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin-right: 16px; }
@media only screen and (max-width:480px) {
	.heading-kana { padding: .5em 0 .4em; }
}
/* < かなタイピング  ======================================================== */