@charset "UTF-8";

html {}
body {
	  background-color: #333; color: #555; line-height: normal;
	  font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
	  font-size:13px; font-weight: normal; text-decoration: none;
		  line-height: 1.7em;
		padding:0;margin:0;
		height:100%;
		
		
	}
	
	h1 {/*
	    font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
		width: 100%; letter-spacing: 0.1em;
		margin-bottom: 1em; font-size: 1.65em;
		*/
		font-size:26px;
		line-height:1.5em;
		-webkit-font-smoothing: antialiased;
	}
	h2 {font-size:30px;font-weight:normal;
	/*margin-bottom: 0.5em;*/
	-webkit-font-smoothing: antialiased;
	line-height:1.5em;
	}
	
	h1.large,
	.song h1 {font-size:30px;font-weight:normal;}
	
	/* 曲インストラクション */
	h3 {margin-bottom: 0.5em;font-size:16px;line-height:1.7em;
	-webkit-font-smoothing: antialiased;
	}
	
	h4 {margin:0;font-size:1.2em;-webkit-font-smoothing: antialiased;}
	
	
	a {
	color:#5fb6e0;
}
 a:hover {
	color:#0c8cc8;
}


	canvas { 
		display: block; 
		outline: 0px; 
		margin-bottom: 1.5em; 
	}
	
	#container{
		margin: 0px 0 0px 0; padding: 0px;
		width:100vw;

		overflow: auto;
		box-sizing:border-box;
		background-color: #ffffff;
	}
	
	@media screen and (min-width:800px) { 
	#container{
		width:800px;
		margin: 0px auto 0px auto;
	}
	}
	
	
	#container_fix,
	.container_fix{
		margin: 0px auto 0px auto; padding: 0px;
		width:800px;
		min-width: 800px;
		
		box-sizing:border-box;
		background-color: #ffffff;
	}
	
	#main {
		min-height:99vh;
		}
	.header {margin:0px auto -0px auto; padding: 0px 30px 0px;}
	
	.header .logo {margin:15px 0 -20px;width:70px;height:78px;}
	.content { 
		margin: 0px auto 0px auto; padding: 20px 30px 30px;
		border-top:1px solid #fff;
	}
	.about {background-color:#fff;
				font-size:15px;
				background-color:#FFF;
			}
	.about h2{ text-align:center; margin-bottom:30px;color:rgba(95,182,224,1);
	font-weight:bold;
	}
	
	@media screen and (max-width:514px) { 
	#container{
		
		margin: 0px auto 0px auto;
	}
	.content { 
		padding: 20px 15px 30px;
		/*max-width:320px;
		background-color:#fff;*/
	}
	.about {font-size:14px;}
	
	.header {padding: 0px 15px 0px;}
	
	.cbr {display:table;height:0;}
	.cbr_xs{display:table;height:0;}
	br.nonbr {display:none;}
	
	}
	
	.content .full {

		position:relative;
		left:-15px;
		margin-left:-15px;
		margin-right:-45px;
	}
	
	@media screen and (max-width:374px) { 
		.about h2 {font-size:28px} /* セグメンツを始めよう！ */
		.cbr_xxs {display:table;height:0;}
		br.nonbr_xxs {display:none;}
	}
	.demoBorder {/*padding:5px;background-color:#ccc;display:inline-block;*/}
	.demoBorder canvas {border:1px solid #000;}
	.code {font-size:1.1em;}
	
	.songs {text-align:center;}
		
ul.songlist {
	margin:0;padding:0;
	list-style-type:none;
}

.songlist li {
	font-size:18px;
	margin-bottom:1.0em;
	position:relative;
}

.songlist a {
	font-weight:bold;
	color:#FC0;
	position:relative;
}
.songlist a:hover {
	color:#5fb6e0;
}

ul.normal{
	margin:0;
	padding-left:2em;
}

ul.linklist {
	margin:0;padding:0;
	list-style-type:none;
}

.linklist li {
	font-size:18px;
	margin-bottom:1.0em;
	position:relative;
}

.linklist a {
	font-weight:bold;
	color:#5fb6e0;
	position:relative;
}
.linklist a:hover {
	color:#0c8cc8;
}


.tip {position:absolute;left:-55px;top:2px}
.new {display:inline-block;
padding:2px 4px;
min-width:45px;
box-sizing:border-box;
line-height:100%;
font-size:13px;
color:#fff;
background-color:#F58;
font-weight:normal;
border:0px solid #f69;
}
h3 > .blueButton > .tip {
	position:absolute;left:-55px;top:20px

}

.textchip {
	display:inline-block;
	border:1px solid #5fb6e0;
	background-color:#fff;
	color:#5fb6e0;
	padding:0 0.3em 0;
	font-size:0.9em;
}

h3 >.textchip {
	border:1px solid #5fb6e0;
	background-color:#fff;
	color:#5fb6e0;
}


.cover{
	text-align:center;
	padding:0px;
}

.cover img {
	width:100%;
	height:100%;

	}
	
#top .cover{
	text-align:center;
	background-color:#5fb6e0;
	background: linear-gradient(to bottom, rgba(187,225,232,1) 0%,rgba(95,182,224,1) 100%);
	padding:30px 0 30px;
}

#top .cover >img {
	width:60%;
	height:60%;
	max-width:600px;
	}
	
.info {text-align:center;background-color:rgba(255,255,255,0.6);
border-radius:20px;
padding:25px 25px 25px;margin:5%;
color:#0071bc;font-size:14px;
}

.info a {color:#0071bc;}

.info h2 {margin-top:0;}
h3 {margin:0 0  0.5em;font-size:18px;line-height:1.7em;
	-webkit-font-smoothing: antialiased;
	}

.video {text-align:center;background-color:#bbe1e8;padding:25px 0 25px;}

.topvideo {text-align:center;background-color:#bbe1e8;padding:25px 25px 25px;}

.writing {
	
}
.essay {
	font-size:14px;
	line-height:1.85em;
}

.profile{
	background-color:#eee;
	border-top:10px solid #333;
}

.other {
	text-align:center;
	background-color:#f5f5f5;
}

a.link {
	display:inline-block;
	border-radius:20px;
	background-color:rgba(0,0,0,0.3);
	color:#fff;
	text-decoration:none;
	padding:8px 15px;
	min-width:30%;
	border:1px solid #555;
	text-align:center;
}

.blueButton,
.other a.link{
	background-color:#5fb6e0;
	border:1px solid #fff;
	color:#fff;
	position: relative;
}
.blueButton:hover,
.other a.link:hover  {
	/*background-color:#bbe1e8;*/
	background-color:#0c8cc8;
	border:1px solid #fff;
	/*color:#5fb6e0*/
}

.pagevideo {margin-top:20px;}


.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
.demo,
.demo_lineSegments_pde {
		 position: relative;
     padding-bottom: 67.56%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;}
.demo canvas# {position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;}
		 
.demo .btnCenter	{position:absolute;top:50%;left:50%;opacity:0.5;}
.btnCenter img{position:relative;top:-35px;left:-50%;}

.demo:hover .btnCenter {opacity:1.0;}
.songs hr {opacity:0.5;}
.song hr {visibility:hidden;}
hr.normal {visibility:visible;}
img.full {
	width:100%;
}





.half {
	width:48.5%;
	box-sizing:border-box;
	border-radius:10px;
	margin:0 0 15px;
	padding:15px;
}

.halfimg {
	/*border-radius:20px;*/
	width:48.5%;
	box-sizing:border-box;
	padding:0px;
}

.halfimg img,
.half img {
	width:100%;
	height:auto;
	border-radius:7px;
}


.halfimg_r {
	
	border-radius:7px;
	box-sizing:border-box;
	padding:0px;
	margin:7px 0 7px;
}

.halfimg_r img {
	width:100%;
	height:auto;
	border-radius:7px;
}


.col_left {
	float:left;
	margin-left:0%;
}
.col_right {
	float:left;
	margin-left:2.7%;
}

.blue {
	color:#5fb6e0;
}

@media screen and (max-width:514px) { 	
	.half {
	width:100%;
}
.halfimg_r,
.halfimg {
/*
	border-radius:20px;
	width:100%;
	box-sizing:border-box;*/
	padding:0px;
}

.col_left {
	float:left;
	margin-left:0%;
}
.col_right {
	float:left;
	margin-left:0%;
}

	
	.g_clap2 {position:relative;left:-4px;}
	
	}
.clearfixBoth:before,
.clearfixBoth:after,
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ".";
    clear: both;
    height: 0;
}