@charset "utf-8";

/* Format */
html,body,figure,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,img,a{
	margin:0;
	padding:0;
	border:0;
	font-family: sans-serif;
	font-size: 28px;
	font-weight: normal;
	line-height: 1.8em;
}
body, 
body a {
	-webkit-text-size-adjust: 100%;
	color: #47585c;
}

body#lesson,
body#lesson article,
body#lesson a {
	background: #3b404c;
	color: #dfe3f2 !important;
}

/* Common Blocks */
header, .L2{
	width: 640px;
	margin: 0 auto 128px;
}
.L3{
	width: 640px;
	margin: 64px auto 64px;
}
footer p{
	width: 640px;
	margin: 64px auto;
	text-align: center;
}
footer p.back{
	text-align: left;
}
footer p a{
	margin: 0 64px; 
}

/* Common Heads */
.tagline{
	width: 512px;
	margin: 32px auto;
	text-align: center;
	font-size: 24px;
}
h1{
	font-size: 40px;
	margin: 0 0 32px;
}
h1 img{
	width: 640px;
}
h2{
	font-size: 40px;
	margin: 64px 64px;
	font-weight: bold;
}
h3{
	font-size: 32px;
	margin: 0 64px 32px;
	font-weight: bold;
}
h3 a{
	text-decoration: none;
	border-bottom: 2px dotted;
}

/* Common Parts */
p{
	margin: 0 64px 32px;
	text-align: justify;
}
.en{
	text-align: left;
}
a{
	text-decoration: none;
	border-bottom: 2px dotted;
	opacity: 1;
}
a:hover{
	opacity: .4;
}
figure{
	margin: 0 64px 16px;
}
figure a{
	border: 0;
}
figure img{
}
figure.flyer img{
	width: 512px;
	margin-bottom: 128px;
}
figure a img{
	width: 512px;
}
ul{
	margin: 0 64px 32px;
	list-style: disc;
	list-style-position: outside;
	text-align: left;
}
li{
	margin: 0 0 16px 32px;
	padding-left: 4px;
}
ul.banner{
	margin: 0 64px 32px;
	list-style: none;
	text-align: center;
}
ul.banner li{
	margin: 0 0 32px;;
}
ul.banner li a.cover{
	border: none;
	display: block;
	margin-bottom: 16px;
}
dl{
	text-align: left;
	margin: 0 64px 32px;
	text-align: justify;
}
dt{
	width: 128px;
	margin-top: 24px;
}
dd{
	width: 384px;
	margin: 24px 0 0 32px;
}
dt:first-child, dt:first-child{
	margin-top: 0;
}
footer img{
	width: 512px;
	border: 1px solid #ccc;
}

/* Spot Parts */
/** SNS Icons **/
ul.snsIcons{
	list-style: none;
	display: flex;
	justify-content: space-around;
}
ul.snsIcons ul{
	width: 640px !important;
}
ul.snsIcons li{
}
ul.snsIcons li:first-child{
	margin-left: 0;
}
ul.snsIcons a{
	border: 0;
}
ul.snsIcons img{
	width: 100px;
}

/** attentions **/
ul.attention{
	margin: 0 64px 32px;
	list-style: none;
	text-align: left;
}
ul.attention li{
	margin: 8px 0 0 16px;
  padding-left:8px;
  text-indent:-18px;
}
ul.attention li:first-child{
	margin-top: 0;
}
ul.attention li:before{
	content:"* ";
}

/** Introduction **/
figure.introduction{
	margin: 64px 64px 32px;
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	flex-flow: wrap;	
}
figure.introduction img{
	width: 512px;
	height: 682px;
	margin-bottom: 20px;
}

/** Thumbnails **/
figure.thumbnails{
	margin: 64px 64px 32px;
	height: 512px;
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	flex-flow: wrap;	
}
figure.thumbnails img{
	width: 160px;
	height: 160px;
}
ul.thumbnails{
	margin-top: 32px;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  list-style-type: none;
}
ul.thumbnails li{
  margin-left: 32px;
}
ul.thumbnails li:first-child{
	margin-left: 0;
}
ul.thumbnails li figure,
.facility li img{
	width: 384px;
	height: 384px;
	margin-bottom: 16px;
}
ul.thumbnails li p {
	font-size: 16px;
}

/** Samples **/
div.samples{
	margin: 64px 64px 0;
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	margin-top: -16px;
}
.samples figure.samples{
	line-height: 1.0em;
	margin: 0;
	margin-top: 16px;
}
.samples figure.samples img{
	width: 250px;
	height: 250px;
}
.samples figure.samples a{
	font-size: 24px;
	border-bottom: 2px dotted;
}

/** Faq **/
dl.faq dt{
	width: 460px;
  padding-left: 52px;
  text-indent: -23px;
  margin-bottom: 16px;
  margin-top: 64px;
  font-weight: bold;
}
dl.faq dt:before{
  content:"Q.";
  display: inline-block;
  margin-right: 16px;
}
dl.faq dd{
	width: 460px;
  padding-left: 52px;
  text-indent: -23px;
  margin: 0;
}
dl.faq dd:before{
  content:"A.";
  display: inline-block;
  margin-right: 16px;
}

/** Curriculum **/
dl.curriculum dt{
	width: 100%;
  margin-bottom: 16px;
  margin-top: 64px;
  font-weight: bold;
}
dl.curriculum dd{
	width: 100%;
  margin: 0;
}

/* For Beginner */
.forBegineer{
	display: flex;
	justify-content: space-between;
}
.forBegineer a{
	border: 0;
}