@charset "utf-8";



/* 基本設定
-----------------------------------------------------------------------------------------*/
body {
	background:#F5F5F5;

	margin: 0;
	padding: 0;

	color:#333333;
	font-family:"メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "MS P ゴシック", verdana, sans-serif;

	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
@media print{
	body {
		font-size:10px;
	}
}
img {
	border:0;
	vertical-align: bottom;
}
a {
	color:#1DB8EE;
	text-decoration:none;
}
a:hover {
	color:#888888;
}
input[type=submit], input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=search], input[type=date], password, select, textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Material iconsを利用する */
.material-icons {
	display:inline-block;
	padding:4px;
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	color:#000000;
	line-height: 1;
	text-transform: none;
	/* WebKitブラウザサポート */
	-webkit-font-smoothing: antialiased;
	/* Chrome、Safariサポート */
	text-rendering: optimizeLegibility;
	/* Firefoxサポート */
	-moz-osx-font-smoothing: grayscale;
	/* IEサポート */
	font-feature-settings: 'liga';
}
a.material-icons:hover {
	border-radius: 20px;
	background:#f0f0f0;
	color:#000000;
	text-decoration:none;
}

/*スクロールバー*/
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}
::-webkit-scrollbar-thumb {
	background-color: rgba(204, 204, 204, 100);
	box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}
.blue {
	color:#0000ff;
}
.red {
	color:#ff0000;
}



/* header
-----------------------------------------------------------------------------------------*/
#header {
	display:block;

	position:fixed;
	z-index:30;
	left:0;
	top:0;

	border-bottom:1px solid #cccccc;
	background: rgba(255, 255, 255, 0.9);

	margin: 0;
	padding: 0;

	width:100%;
	height:80px;
}
#header div {
	position:relative;
	margin: 0 auto;
	width:100%;
	max-width:1260px;
	height:80px;
}
#header div h1 {
	margin: 0;
	padding: 10px 0 0 0;
	font-size:2.0em;
	color:#333333;
	line-height: 100%;
	text-align : center;
}
#header div h1 a {
	color:#333333;
}
#header div h1 a span {
	/*color:#F0453C;*/
	color:#006DD9;
}
#header div ul {
	letter-spacing: -0.5em;
	position:absolute;
	bottom:0;
	margin: 0;
	padding: 0;
	width:100%;
	text-align : center;
	list-style:none;
}
#header div ul * {
	letter-spacing: normal;
}
#header div ul li {
	display:inline-block;
	margin: 0;
	padding: 0;
	width:20%;
	max-width:80px;
	font-size:0.8em;
	line-height: 100%;
	text-align : center;
}
#header div ul li a {
	display:block;
	margin: 0;
	padding: 6px 0;
	color:#9FA5AB;
}
#header div ul li a.current,
#header div ul li a:hover {
	border-bottom:4px solid #F0453C;
	color:#333333;
}
#header div p {
	display:none;

	position:fixed;
	z-index:100;
	right:20px;
	top:20px;

	margin: 0;
	padding: 0;
}
#header div p a {
	font-size:2em;
	line-height: 100%;
}
@media screen and (max-width: 1200px){
	#header div p {
		display:block;
	}
}
@media screen and (max-width: 840px){
	#header,
	#header div {
		height:60px;
	}
	#header div h1 {
		font-size:1.4em;
	}
	#header div ul li {
		max-width:60px;
		font-size:0.7em;
	}
	#header div p {
		right:10px;
		top:10px;
	}
}
@media screen and (max-width: 480px){
	#header div p {
		right:0;
		top:0;
	}
}



/* footer
-----------------------------------------------------------------------------------------*/
footer {
	clear:both;
	display:block;

	margin: 120px 0 0 0;
	padding: 0 0 20px 0;

	width:100%;
}
footer p {
	margin: 0;
	padding: 0;
	font-size:0.6em;
	color:#9FA5AB;
	line-height: 100%;
	text-align : center;
}
@media screen and (max-width: 840px){
	footer {
		margin: 100px 0 0 0;
	}
}



/* navigation
-----------------------------------------------------------------------------------------*/

nav#navigation {
	display:block;
}
nav#navigation > div > div {
	position:absolute;
	z-index:20;
	left:calc((100% - 1180px) / 2);
	top:100px;

	margin: 0;
	padding: 0;

	width:100%;
	max-width:340px;

	font-size:0.8em;
	color:#000000;
	line-height: 140%;
	text-align : left;
}
nav#navigation.nolesson > div > div {
	position:static;
	margin: 100px auto -100px auto;
	padding: 0;
	max-width:600px;
}
nav#navigation > div > div > ul {
	margin: 0 0 10px 0;
	padding: 0;
	list-style:none;
}
nav#navigation > div > div > ul li {
	display:inline-block;
	margin: 0;
	padding: 0;
	width:50%;
}
nav#navigation > div > div > ul li a {
	display:block;
	background:#ffffff;
	border:0;
	border-radius:20px;
	outline:0;
	margin:4px;
	padding: 8px 0;
	font-size:1.4em;
	color:#999999;
	text-align:center;
}
nav#navigation > div > div > ul li a:hover,
nav#navigation > div > div > ul li a.current {
	background:#000000;
	color:#ffffff;
}
nav#navigation > div > div > dl {
	margin: 0;
	padding: 0;
}
nav#navigation > div > div > dl > dt {
	position:relative;
	border-bottom:1px solid #D8D8D9;
	background:#FF5B6B;
	margin: 0;
	padding: 10px 30px 10px 10px;
	font-size:1.2em;
	color:#ffffff;
	line-height:140%;
	font-weight:bold;
	cursor:pointer;
}
nav#navigation > div > div > dl > dt:after {
	position:absolute;
	top:10px;
	right:10px;
	content:"keyboard_arrow_down";
	font-family: "Material Icons";
	color:#ffffff;
	font-weight:bold;
	vertical-align:middle;
}
nav#navigation > div > div > dl > dt.current:after {
	content:"keyboard_arrow_up";
}
nav#navigation > div > div > dl > dd {
	display:none;
	margin: 0;
	padding: 0;
}
nav#navigation > div > div > dl > dd > ul {
	margin: 0;
	padding: 0;
	list-style:none;
}
nav#navigation > div > div > dl > dd > ul li {
	border-bottom:1px solid #D8D8D9;
	margin: 0;
	padding: 0;
}
nav#navigation > div > div > dl > dd > ul li a {
	position:relative;
	display:block;
	background:#ffffff;
	margin: 0;
	padding: 10px 30px 10px 10px;
	color:#FF5B6B;
}
nav#navigation > div > div > dl > dd > ul li a:after {
	position:absolute;
	top:10px;
	right:10px;
	content:"keyboard_arrow_right";
	font-family: "Material Icons";
	color:#FF5B6B;
	font-weight:bold;
	vertical-align:middle;
}
nav#navigation > div > div > dl > dd > ul li.current a,
nav#navigation > div > div > dl > dd > ul li a:hover {
	background:#FDDAD7;
	text-decoration:none;
}
nav#navigation > div > div > p.about {
	margin: 0;
	padding: 20px 0 0 0;
	text-align:center;
}
nav#navigation > div > div > p.about a {
	display:inline-block;
	background:#ffffff;
	border:0;
	border-radius:20px;
	outline:0;
	margin:4px;
	padding: 8px 20px;
	font-size:1.0em;
	color:#999999;
	text-align:center;
}
nav#navigation > div > div > p.about a:hover {
	background:#cccccc;
	color:#ffffff;
}
@media screen and (max-width: 1200px){
	nav#navigation {
		display:none;
		z-index:1000;
		position:fixed;
		top:82px;
		right:0;
		width:300px;
		height:calc(100% - 60px);
		overflow:hidden;
	}
	nav#navigation.nolesson {
		display:block;
		position:static;
		width:100%;
		height:auto;
		overflow: visible;
	}
	nav#navigation > div {
		position:absolute;
		left:auto;
		right:-300px;
		top:0;
		background:#fafafa;
		border:0;
		width:calc(100% - 20px);
		height:100%;
		overflow:auto;
	}
	nav#navigation.nolesson > div {
		position:static;
		background:none;
		margin-right:10px;
		margin-left:10px;
		padding: 0;
		height:auto;
		overflow: visible;
	}
	nav#navigation > div > div {
		position:static;
		font-size:0.7em;
	}
	nav#navigation.nolesson > div > div {
		padding: 0;
		max-width:600px;
	}
	nav#navigation > div > div > form {
		margin: 0;
		padding: 10px;
	}
	nav#navigation > div > div > form select {
		font-size:1.2em;
	}
}
@media screen and (max-width: 840px){
	nav#navigation {
		top:62px;
	}
	nav#navigation.nolesson > div > div {
		margin: 80px auto -80px auto;
	}
}



/* section
-----------------------------------------------------------------------------------------*/
#main {
	display:block;

	position:relative;
	z-index:10;
	top:100px;

	margin: 0 auto;
	padding: 0 10px;

	width: calc(100% - 20px);
	max-width:1180px;

	font-size:0.9em;
	line-height: 160%;
}
#main:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}
#main > article {
	display:block;

	background:#ffffff;

	margin: 0;
	padding: 20px;

	width:calc(100% - 40px);
	max-width:780px;

	float:right;
}
@media screen and (max-width: 1200px){
	#main > article {
		margin: 0 auto;
		float:none;
	}
}
@media screen and (max-width: 840px){
	#main {
		top:70px;
		font-size:0.8em;
	}
	#main > article {
		padding: 10px;
		width:calc(100% - 20px);
	}
}
@media screen and (max-width: 480px){
	#main {
		font-size:0.7em;
	}
}



/* contents
-----------------------------------------------------------------------------------------*/
#main > article h2 {
	border-bottom:4px solid #F0453C;
	margin: 0;
	padding: 0;

	font-size:1.4em;
	color:#333333;
	line-height: 160%;
	text-align : left;
}
#main > article h2.skill {
	border-bottom:4px solid #297067;
}
#main > article h3 {
	background:#F5F5F5;
	margin: 30px 0 0 0;
	padding: 10px 0;
	font-size:1.0em;
	color:#333333;
	line-height: 160%;
	text-align : left;
}
#main > article h4 {
	border:2px solid #ff9900;
	background:#ffffbf;
	margin: 30px 0 0 0;
	padding: 6px;
	font-size:1.1em;
	color:#ff9900;
	line-height: 160%;
	text-align : left;
}
#main > article h3 span {
	display:block;
	border-left:4px solid #F0453C;
	margin: 0;
	padding: 0 10px;
}
#main > article p {
	margin: 20px 0 0 0;
	padding: 0;
	font-size:1.1em;
	color:#333333;
	line-height: 160%;
	text-align : left;
}
#main > article .audiojs {
	width:36px;
}
#main > article .audiojs audio {
	display:none;
}
#main > article .audiojs .play-pause p {
	margin: 0;
}
#main > article .audiojs .scrubber,
#main > article .audiojs .time {
	display:none;
}
#main > article p.nomargin {
	margin: 0;
}
#main > article p img {
	max-width:100%;
}
#main > article ul.skill_list {
	margin: 30px 0 0 0;
	padding: 0;
	list-style:none;
}
#main > article ul.skill_list li {
	margin: 0 0 2px 0;
	padding: 0;
}
#main > article ul.skill_list li a {
	display:block;
	border-bottom:2px solid #297067;
	background:#EDF8F7;
}
#main > article ul.skill_list li a:hover {
	opacity:0.9;
}
#main > article ul.skill_list li a dl {
	letter-spacing: -0.5em;
	margin: 0;
	padding: 4px;
}
#main > article ul.skill_list li a dl * {
	letter-spacing: normal;
}
#main > article ul.skill_list li a dl dt {
	display:inline-block;
	background:#297067;
	border-radius:10px;
	margin: 0 10px 0 0;
	padding: 4px 0;
	width:100px;
	font-size:0.9em;
	color:#ffffff;
	line-height: 140%;
	text-align : center;
	font-weight:bold;
	vertical-align:middle;
}
#main > article ul.skill_list li a dl dd {
	display:inline-block;
	margin: 0;
	padding: 0;
	width:calc(100% - 110px);
	font-size:1.0em;
	color:#297067;
	line-height: 140%;
	text-align : left;
	font-weight:bold;
	vertical-align:middle;
}

#main > article form.question {
	margin: 20px 0 0 0;
	padding: 0;
	text-align : center;
}
#main > article form.question input {
	-webkit-appearance: none;
	border:0;
	border:1px solid #dddddd;
	border-radius:0;
	margin: 0 0 10px 0;
	padding: 8px 4px;
	font-size:1.2em;
	width:calc(100% - 10px);
	max-width:400px;
}
#main > article form.question a {
	display:inline-block;
	border-radius:10px;
	border-bottom:4px solid #FF5B6B;
	background:#FDDAD7;
	margin: 0;
	padding: 16px 0;
	width:100%;
	max-width:300px;
	color:#FF5B6B;
	text-align:center;
	font-weight:bold;
}
#main > article form.question a:hover {
	opacity:0.9;
}

#main > article p.go_skill {
	margin: 40px 0 0 0;
}
#main > article p.go_skill a {
	display:inline-block;
	border-radius:10px;
	border-bottom:4px solid #297067;
	background:#EDF8F7;
	margin: 0;
	padding: 16px 0;
	width:100%;
	max-width:200px;
	font-size:0.9em;
	color:#297067;
	text-align:center;
	font-weight:bold;
}
#main > article p.go_skill a:hover {
	opacity:0.9;
}
#main > article p.go_training {
	margin: 40px 0 0 0;
}
#main > article p.go_training a {
	display:inline-block;
	border-radius:10px;
	border-bottom:4px solid #ff9900;
	background:#ffffbf;
	margin: 0;
	padding: 16px 0;
	width:100%;
	max-width:360px;
	font-size:0.9em;
	color:#ff9900;
	text-align:center;
	font-weight:bold;
}
#main > article p.go_training a:hover {
	opacity:0.7;
}

#main > article ul.answer {
	letter-spacing: -0.5em;
	margin: 20px 0 0 0;
	padding: 0;
	list-style:none;
}
#main > article ul.answer * {
	letter-spacing: normal;
}
#main > article ul.answer li {
	display:inline-block;
	background:#ffffbf;
	margin: 0 5px;
	padding: 10px;
	width:calc(50% - 30px);
	vertical-align:top;
}
#main > article ul.answer li a.button {
	display:block;
	border-radius:10px;
	border-bottom:2px solid #999999;
	background:#ff9900;
	margin: 0;
	padding: 8px 0;
	font-size:1.6em;
	color:#ffffff;
	text-align:center;
}
#main > article ul.answer li a.button:hover {
	opacity:0.9;
}
#main > article ul.answer li p {
	margin: 20px 20px 10px 20px;
}
#main > article ul.answer li p img {
	width:100%;
}
#main > article ul.answer li p audio {
	width:100%;
}
#main > article ul.answer li p iframe {
	width:100%;
	height:200px;
}

@media screen and (max-width: 480px){
	#main > article ul.answer li p iframe {
		height:160px;
	}
}
@media screen and (max-width: 360px){
	#main > article ul.answer li p iframe {
		height:120px;
	}
}



div#dialog {
	display:none;

	z-index:100;
	position:fixed;
	top:0;
	left:0;

	background: rgba(0, 0, 0, 0.5);

	width:100%;
	height:100%;

	margin: 0;
	padding: 0;

	text-align:center;
}
div#dialog dl {
	background:#ffffff;

    margin:40px auto;
	padding: 10px 0;

	width:300px;
}
div#dialog dl dt {
	margin: 0;
	padding: 10px;
	font-size:1.4em;
	color:#000000;
	text-align:center;
	font-weight:bold;
}
div#dialog dl dd {
	margin: 0;
	padding: 10px;
	font-size:0.8em;
	line-height:160%;
	color:#000000;
	text-align:left;
}
div#dialog dl dd p {
	margin: 20px 0 0 0;
	padding: 0;
	text-align:center;
}
div#dialog dl dd p a {
	display:inline-block;
	border-radius:10px;
	border-bottom:2px solid #999999;
	background:#ff9900;
	margin: 0;
	padding: 8px 0;
	width:130px;
	font-size:0.8em;
	line-height:100%;
	color:#ffffff;
	text-align:center;
}