@charset "UTF-8";
/* Lessonフォルダ以下にあるドキュメントに適用 */
body {
	background-color: #fff;
	color: #333;
}
/* メインコンテンツのエリア */
#fx-container {
	width: 100%;
	margin: 0;
	padding: 0;
}
#fx-mainarea {
	width: 98%;
	max-width: 900px;
	margin: 0 auto;
	/* overflow: hidden; */
}

@media screen and (max-width: 768px){
	#fx-mainarea {
		max-width: 98%;
		margin: 0 auto;
	}
}

/* メニューエリアと説明エリア */
.fx-column2 {
	width: 100%;
	overflow: hidden;
	/*position: relative;*/
}
/* メニューエリア（一覧表示）*/
.fx-menu-wrap {
	width: 160px;
	float: left;
	position: relative;
	z-index: 2;
}
.fx-menu {
	/*width: 160px;*/
	font-size: 13px;
	vertical-align: top;
}
/* アコーディオンメニュー */
ul.accmenu {
	list-style: none;
	margin: 10px 0 0 0;
	padding: 0;
	border: solid 1px #ccc;
}
ul.accmenu a,
ul.accmenu a:visited {
	display: block;
	text-decoration: none;
	color: #333;
	margin: 0;
	padding: 4px 2px 4px 10px;
}
ul.accmenu a:hover {
	background-color: #fe6;
}
ul.accmenu span {
	display: block;
	padding: 4px 2px 4px 10px;
	background-position:97% center;
	background-repeat:no-repeat;
	color:#333;
}
ul.accmenu ul {
	list-style: none;
	padding: 0;
	display: none;
}
ul.accmenu > li {
	margin: 0;
	background: linear-gradient(to bottom, #efefef, #bfbfbf);
	background: -webkit-linear-gradient(top, #efefef, #bfbfbf);
}
ul.accmenu > li > p {
	margin: 0;
	background: linear-gradient(to bottom, #efefef, #bfbfbf);
	background: -webkit-linear-gradient(top, #efefef, #bfbfbf);
	cursor: pointer;
}
ul.accmenu > li > p span:hover {
	color: #007fff;
}
ul.accmenu > li > p span::after {
	display: block;
	float: right;
	position: relative;
	right: 5px;
	top: 4px;
	content: '\f13a';
	font-family: 'FontAwesome';
}
ul.accmenu > li > p span.open::after {
	display: block;
	float: right;
	position: relative;
	right: 5px;
	top: 4px;
	content: '\f139';
	font-family: 'FontAwesome';
}
ul.accmenu > li > ul > li {
	/*margin: 0 0 1px 0;*/
	border-bottom: solid 1px #fff;
}
ul.accmenu > li > ul > li > a,
ul.accmenu > li > ul > li > a:visited {
	color: #fff;
	background-color: #666;
}
ul.accmenu > li > ul > li > a:hover {
	color: #333;
	background-color: #fe6;
}
ul.accmenu > li:last-child > ul > li:last-child {
	border-bottom: none;
}

/* ===================================================== */
/* タブメニュー*/

ul.tabNavigation, ul.selseries {
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #020a1a;
	overflow: hidden;
}
ul.tabNavigation li, ul.selseries li {
	float:left;
}
ul.tabNavigation li a, ul.selseries li a {
	padding: 4px 20px;
	background-color: #eee;
	color: #999;
	text-decoration: none;
	display:block;
	text-align:center;
	border-top: #eee solid 3px;
	border-left: #bbb solid 1px;
	border-bottom: #ccc solid 1px;
	font-weight: bold;
}
ul.tabNavigation li a.selected,
ul.tabNavigation li a:hover,
ul.selseries li a.selected,
ul.selseries li a:hover {
	background-color: #fff;
	color: #333;
	border-top: #f93 solid 3px;
	border-bottom: #fff solid 1px;
}
ul.tabNavigation li a:focus,
ul.selseries li a:focus{
	outline: 0;
}
div.tabs {
	/* margin-bottom: 1em; */
}
div.tabs div {
	clear: left;
}
/* ===================================================== */

/* 説明エリア */
.fx-content {
	overflow: hidden;
}
.fx-header {
	text-align: center;
}
.fx-header img {
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

/* 説明セクション */
.techsection {
	/* width: 100%; */
	margin: 10px 0 30px 10px ;
	padding: 0;
	text-align: left;
	font-size: 14px;
}
/* タイトルにモデルアイコンを表示 */
.fx-title {
	position: relative;
}
.fx-title .model {
	position: absolute;
	right: 10px;
	top: -4px;
}
.fx-title .model img {
	margin-left: 7px;
}
.techsection h1 {
	font-size: 100%;
	margin: 0 0 10px 0;
	padding: 5px 10px;
	color: #000;
	background: linear-gradient(#60afff 0%,#fff 90%,#ddeeff 100%);
	border: solid 1px #ccc;
}
.techsection h2 {
	font-size: 98%;
	margin: 0 0 0.5em 1em;
	padding: 4px 10px;
	border-left: solid 10px #007fff;
	background-color: #f0f8ff;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.techsection h3 {
	font-size: 90%;
	margin: 0 0 0.5em 1em;
	padding: 3px 10px;
	border-left: double 10px #007fff;
	background-color: #f0f8ff;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.techsection h4 {
	font-size: 100%;
	margin: 0 0 0 1em;
	/* padding: 3px 0; */
	color: #007fff;
}
.techsection h4.adv::before, .techsection h4.adv::after {
	content: '★';
	color: #f90;
	font-size: 120%;
}

.techsection dl {
	margin-bottom: 2em;
}

.techsection p {
	margin-left: 1em;
}
.techsection table.preset {
	margin: 20px;
	border-collapse: collapse;
	border: solid 1px #ccc;
}
.techsection table.preset td {
	border: solid 1px #ccc;
	padding: 5px;
}
.techsection table.preset tr.item {
	background-color: #e4e4e4;
}

/* 2カラムのエリア */
.columnarea {
	width: 100%;
	display: table;
}
.separator {
	margin: 20px 0;
	padding-top: 10px;
	border-top: dotted 2px #999;
}
.columnarea p, .separator p {
	margin-top: 0;
}
/* リスト要素を2カラムにする */
.list2cols {
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
/* 左カラム */
.col2_left {
	width: 49%;
	display: table-cell;
	text-align: left;
	vertical-align: top;
}
/* 右カラム */
.col2_right {
	width: 49%;
	display: table-cell;
	text-align: left;
}

@media screen and (max-width: 768px){

	/* 2カラムのリスト要素を上下にする */
	.list2cols {
	}
	.columnarea {
	}
	/* 左カラム（上）*/
	.col2_left {
		width: 100%;
		display: block;
	}
	/* 右カラム（下）*/
	.col2_right {
		width: 100%;
		display: block;
	}
}

/*-- 要調整 --*/
.procedure {
	border-top: solid 1px #999;
	padding: 10px;
}

.chui {
	text-indent: -1em;
	padding-left:1.5em;
	margin: 0.5em 0 1em;
}

.sysex {
	padding: 0 2em 2em 2em;
	margin-bottom: 10px;
	border-bottom: dotted 2px #999;
}
ul.method {
	list-style: none;
	margin: 1em 0 2em;
	padding-left: 2em;
}
ol.method {
	margin: 1em 0 2em;
	padding-left: 3em;
}
ul.method li, ol.method li {
	margin-bottom: 18px;
	max-width: 100%;
	clear: both;
}
 ul.method li .col2_right img, ol.method li .col2_right img {
	margin-left: 15px;
}
ul.method .columnarea img, ol.method .columnarea img {
	margin: 10px 10px 10px 0;
}

@media screen and (max-width: 768px){
 ul.method li .col2_right img, ol.method li .col2_right img {
		margin-left: 0px;
	}
}

ul.submenu {
	list-style: none;
	margin-bottom: 30px;
}
ul.submenu li {
	display: inline-block;
}
ul.submenu li a {
	display: block;
	border-right: solid 1px #333;
	margin: 0;
	padding: 0 10px 0 6px;
}
ul.submenu li a.end {
	border: none;
}

dl.method {
	margin: 1em 0 2em;
	padding-left: 1em;
}
dl.method dt {
	font-weight: bold;
	margin-bottom: 0.5em;
	margin-top: 1.5em;

}
dl.method dd {
	margin: 0 0 1em 1em;
}
audio {
	width: 300px;
	margin: 0 auto 10px;
}
/* 暫定：コントロールの高さを指定 */
@media screen and (max-width: 768px){
 	audio {
		height: 100px;
	}
}
div.exp {
	padding-left: 1em;
}

/* フッタ */
.footer {
	width: 100%;
	border-top: solid 1px #999;
	margin-top: 50px;
}
.footer p {
	width: 700px;
	margin: 10px auto;
	text-align: center;
	font-size: 10px;
}
/*-- フッタ new --*/
.footer-lesson {
	width: 100%;
	margin: 50px 0 10px;
	padding: 8px 0;
	background: linear-gradient(to bottom, #5773a6 0%, #2e466e 100%);
	overflow: hidden;
}
.footer-lesson ul {
	list-style: none;
	margin: 0;
	padding:0;
}
.footer-lesson li {
	display: inline;
}
.sns {
	margin: 3px 10px;
	padding: 0;
	float: left;
	position: relative;
	z-index: 1;
}
/*.sns ul {
	margin-top: 5px;
	background-color: #ffc;
}*/
.sns a > span#twitter {
	color: #09f;
}
.sns a > span#facebook {
	color: #3a5795;
}
.sns a > span#youtube {
	color: #e62016;
}
.sns a > span#instagram {
	color: #333;
}
.credit {
	text-align: right;
	float: right;
	padding-top: 5px;
}
.privacy {
	font-size: 11px;
}
.privacy li {
	margin-right: 10px;
}
.privacy a {
	color: #ccc;
	text-decoration: none;
}
.privacy a:hover {
	color: #fe6;
}
.copyright {
	margin: 5px;
	/*padding: 10px 0 0 0;*/
	font-size: 12px;
	color: #fff;
}
.copyright::before {
	content: "\f1f9";
 	font-family: FontAwesome;
	display: inline;
	margin-right: 4px;
}

/*  囲み枠内に書く記事（黄色） */
.kakomikiji {
	padding:9px;
    border:solid 1px #EEE8AA;
    border-radius:3px;
    background-color:#ffffcc;
    margin-top:8px;
    margin-bottom:25px;
	margin-left:7px;
    margin-right:7px;
	}

.kakomikiji p{
	padding-top:4px;
   	padding-bottom:3px;
    border-radius:3px;
    background-color:#ffffcc;
    margin-top:8px;
    margin-bottom:25px;
	margin-left:7px;
    margin-right:7px;
	}

/*  囲み枠内に記事（灰色） */
.kakomikijiGR {
	padding:9px;
    border:solid 1px #EEE8AA;
    border-radius:3px;
    background-color:#dcdcdc;
    margin-top:8px;
    margin-bottom:25px;
	margin-left:7px;
    margin-right:7px;
	}

.kakomikijiGR p{
	padding-top:4px;
   	padding-bottom:3px;
    border-radius:3px;
    background-color:#dcdcdc;
    margin-top:8px;
    margin-bottom:25px;
	margin-left:7px;
    margin-right:7px;
	}

/* ショートカットキー */
.sc-key {
	margin-left: 10px;
	padding: 0 5px;
	color: #fff;
	background-color: #666;
}
.keyboard {
	line-height: 39px;
	vertical-align: middle;
}
.keyboard img {
	margin: 0 !important;
	vertical-align: bottom;
}



/* ====== Zoom effect ====== */
/*.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.85;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}*/
/* おわり========= */