@charset "utf-8";
/* CSS Document */

/*basic contents*/
section,
div.section-box{
padding:.3em;

}

div.toggle-box{
	display:none;

}

div.sub-box{
	padding:.3em;
	background:#fff;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
div.after-ar{
	margin-bottom:50px;
	position:relative;
}
div.after-ar::after{
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-22px;
	height:45px;
	width:100%;
	background:url(/img/arrow.png) no-repeat;

}
div#head-img{
	width:100% 
	margin:0;
	padding:0;
	position:relative;
}

main article{
padding:.3em;
	background: url("../img/art-border.png");
}
main article div{
	padding:.3em;
	background:#fff url("../img/bg-art-inner.jpg") no-repeat top left;
}



main section#oubo{
margin:5px auto;
padding:.5em;
background:url(../img/bg-oubo.gif);
}

main section#oubo > div{
background:#fff url(../img/bg-oubo.png) no-repeat;
background-position:right top;
}
main section#oubo div{
padding:.5em;


} 

main div.glw-txt,
main div.glw-txt2{
	padding:.3em;

	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
main div.glw-txt div,
main div.glw-txt2 div{
	padding:.3em;
	font-size:1.2em;
	line-height:1.2em;
	
	text-shadow: 0 0 1px #000;
	background-color:rgba(255,255,255,.7);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

main div.glw-txt{
	background-color:rgba(234,204,202,.5);
}
main div.glw-txt div{
	color:#c4909c;
	text-shadow: 0 0 1px #000;
	background-color:rgba(255,255,255,.7);
}

main div.glw-txt2{
color:#a7d6de;
	background-color:rgba(167,214,222,.7);
}

div.circ{
	display:inline-block;
	width:150px;
	height:150px;
	margin:5px;
	padding-top:25px;
	vertical-align:middle;
	-webkit-border-radius:75px;
	-moz-border-radius:75px;
	border-radius:75px;
	}
	
	
div.circ span.lg{
	font-size:4em;
	line-height:100%;
	font-weight:bold;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
 .beginner{
 	color:#f8ed00;
	background:#00ad9c;
}

.experienced{
	color:#eab6ff;
	border:3px solid #eab6ff;
}
section table,
article table{
	margin:5px auto;
	border-collapse: collapse;


}

section table td,
article table td{
	padding:.1em;
	background-color:rgba(255,255,255,.9);

}

section table th,
article table th{
	width:35%;
	padding:.3em;
	text-align:center;
	background-color:rgba(255,255,255,.9);
	
}

/* the first 'th' within the first 'tr' of the 'thead': */
article table tbody tr:first-child th:first-child {
		-webkit-border-radius: 10px 0 0 0;
		-moz-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
		
}
/* the last 'th' within the first 'tr' of the 'thead': */
article table tbody tr:first-child td:last-child {
    -webkit-border-radius:0 10px 0 0;
		-moz-border-radius:0 10px 0 0;
		border-radius:0 10px 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */

article table tbody tr:last-child th:first-child {
    -webkit-border-radius:0 0 0 10px;
		-moz-border-radius:0 0 0 10px;
		border-radius:0 0 0 10px;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
article table tbody tr:last-child td:last-child {
    -webkit-border-radius:0 0 10px 0;
		-webkit-border-radius:0 0 10px 0;
		border-radius:0 0 10px 0;
}

article table tbody tr:last-child td:first-child {
    -webkit-border-radius:0 0 0 10px;
		-webkit-border-radius:0 0 0 10px;
		border-radius:0 0 0 10px;
}
article table tbody tr:last-child td,
article table tbody tr:last-child th{
	border-bottom:none;
}

article ul{
	list-style: none;
}

main a,
main a:visited{
	color:#6500ff;
	font-weight:bold;
}

main a:hover{
text-decoration: underline;
}




article div#onsite{
margin-bottom:5px;
	padding:.3em;
	border:double #46b4e9;
	background:url(../img/bg-onsite.png) no-repeat bottom right;
}

article div#onsite span.merit5,
article div#onsite li > span{

	color:#46b4e9;
	font-weight:bold;

	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", "Osaka-mono", "monospace";
}
/* special contents*/
div#special{	
    width:100%;
		margin-top:30px;
		padding:.5em;
    border:2px solid #333;
		-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	background:url(../img/bg-star.png);
	}
div#special div#spec-ban,
div#special div.spec-ban,
div.spec-ban{
	max-width:320px;
	margin:5px auto;
	padding:.3em;
	text-align:center;
	border:2px solid #000;
		-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	background:#fff;
}

div#specialttl{
		width:230px;
   	margin:-28px auto 10px;
		padding:.3em;
		font-size:1.4em;
		font-weight:bold;
		text-align:center;
    background:white;
		border:2px solid #333;
		-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

/* headings */


/* out links*/
.fill-button {
  position: relative;
  overflow:hidden;
  display:inline-block;
  width:50%;
  height:30px;
  border:1px solid #b00dff;
  text-align:center;
  box-sizing:border-box;
  color:#b00dff;
  text-decoration:none;
  cursor: pointer;
  line-height:28px;
  font-family: 'arial';
  border-radius: 4px;
}
.fill-button > span {
  display:block;
}
.fill-button > .fill-button-hover:after, .fill-button > .fill-button-hover:before {
  position:absolute;
  top:0;
  opacity:0;
  display:block;
  content:"";
  width:0;
  height:30px;
	text-decoration: none;
}
.fill-button > .fill-button-hover:after {
  background-color:#ff0099;
  transform:skewX(45deg);
  transform-origin:center center;
  transition:all .35s, opacity .4s;
  left:50%;
}
.fill-button .fill-button-hover:before {
  background-color:#b00dff;
  transition:opacity 1s;
	text-decoration: none;
}

.fill-button .fill-button-text {
  z-index:1;
  position:relative;
  color:#b00dff;
  transition:color .35s;
}
.fill-button:hover .fill-button-text {
  color:#FFF;
	text-decoration: none;
	text-decoration-style: none;
}
.fill-button .fill-button-hover:hover:after {
  opacity:1;
  left:2%;
  width:95%;
  transform:skewX(45deg);
	text-decoration: none;
}
.fill-button > .fill-button-hover:hover:before {
  opacity: 1;
  left: 0;
  width:100%;
	text-decoration: none;
}




/* video */
div.vid-box{
	margin-bottom:5px;
	text-align:center;
	display:inline-block;
	border:1px solid #00b900;
}
div.vid-box2{

	text-align:center;
	display:inline-block;

}
/*backgrounds*/


/* base stylings */
.to-left{
	float:left;
}

.to-right{
	float:right;
}
.cntr{
	text-align:center;
}

.lft{
	text-align:left;
}
.bg-txt{
	font-size:2em;
	font-weight:bold;
	line-height: inherit;
}

.str,
img.str{
	width:100%;
	height:auto;
}
div.l-img,
img.l-img{
	padding:0 .5em .1em 0;
}
div.r-img,
img.r-img{
	padding:0 0 .1em .5em;
}
/* headings */
h2{
  margin-bottom:.3em;
  padding:.3em;
  color:#efefef;
  font-size:1.4em;
  text-align:center;
  border:1px solid #ff1000;
}
@media (max-width: 600px) {
	.bg-txt{
	font-size:1.2em;
	
}
	
}

/* colorings */
hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }

.purp{
	color:#7700C2;
}

.purpB{
	color:#7700C2;
	font-weight:bold;
}

.pnk{
	color:#ff0099;
}

.pnkB{
	color:#ff0099;
	font-weight:bold;
}

.gold{
	color:#ECAD0;
}

.goldB{
	color:#ECAD00;
	font-weight:bold;
}

.red10{
	font-size:.8em;
	color:#ed1c24;
}

.red{
	color:#ed1c24;
}

.redB{
	color:#ed1c24;
	font-weight:bold;
}

.org{
	color:#f7931e;
}

.orgB{
	color:#f7931e;
	font-weight:bold;
}
.ble{
	color:#a7d6de;
}

.bleB{
	color:#a7d6de;
	font-weight:bold;
}
.dble{
	color:#009ce7;
}

.dbleB{
	color:#009ce7;
	font-weight:bold;
}

.ylw{
	color:#ffff00;
}

.ylwB{
	color:#ffff00;
	font-weight:bold;
}

.grn{
	color:#18FF00;
}

.grnB{
	color:#18FF00;
	font-weight:bold;
}

.dgrn{
	color:#00ad9c;
}
.dgrnB{
	color:#00ad9c;
	font-weight:bold;
}

.line-grn{
	color:#00b900;
}

.line-grnB{
	color:#00b900;
	font-weight:bold;
}

.wht{
	color:#fff;
}

.bld{
	font-weight:bold;
}

.udln{
	text-decoration: underline;
	-webkit-text-decoration-color: #555;
	-moz-text-decoration-color: #555;
	text-decoration-color: #555;
	-webkit-text-decoration-style: wavy;
	-moz-text-decoration-style: wavy;
	text-decoration-style: wavy;
	text
	
}
.marg-none{
	margin-bottom:none;
}
.pad5{
	padding-bottom:.3em;
}
/* special styles */
img.point{
	width:50%;
	padding-top:.3em;
}

/* text sizings */
.txt12{
	font-size:1.2em;
}
.txt18{
	font-size:1.8em;
}
/* clearing */

/* For modern browsers */
.cf:before,
.cf:after {
  content:"";
  display:table;
}
 
.cf:after {
clear:both;
}
 
/* For IE 6/7 (triggers hasLayout) */
.cf {
  *zoom:1;
}

/* responsive styles */
@media (max-width: 601px){
	main section#oubo > div{
		background:#fff url(../img/bg-oubo_sp.png) no-repeat;
		background-position:right top;
		}
		article.content-staff div.ttl{
width:100%; 
margin:0;
padding:.3em;
float:none;
}
div#out-links a{
margin-top:1px;
width:98%;
margin:0 auto;
}
}