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

#title{
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 300;
}
#sec01{
	height: 100%;
	background-image:url("../image/image05.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#sec01 h2 img{
	width: 300px;
}
#sec01 .BOX {
	text-align: center;
}
/*#sec01 .BOX p{
	margin-bottom: 20px;
	line-height: 21pt;
}*/
#sec02 h2{
	font-family: "mincho",'M PLUS 1p', sans-serif;
}
#sec02 h2 span{
	font-size: 0.6em;
}
#sec02 .BOX{
	text-align: center;
	padding: 20px 0;
}

#sec02 h4,h5{
	font-size: 12pt;
	font-weight: bold;
	margin: 10px;
}

#sec03{
	background-color: #eee;
}
#sec03 h2 span{
	font-size: 0.6em;
}
#sec03 .BOX{
	max-width: 600px;
	width: calc( 90% - 20px ) ;
	margin: 0 auto;
	text-align: center;
	padding: 20px;
}

#sec03 h4,h5{
	font-size: 12pt;
	font-weight: bold;
	margin: 10px;
}

.lessonlist{
	margin-bottom: 30px;
}
.lessonlist  li{
	display: inline-block;
	margin: 0 3px;
}

/* ボタンのスタイル */
.button {
	font-family: "mincho";
	letter-spacing: 0.05em;
	font-size: 1.2em;
    width: 250px;
    /*height: 40px;*/
    text-align: center;
	background-color: #fff;
	border: #000 solid 1px;
	margin: 10px auto;
}
.button span{
	font-size: 0.7em;
}
/* マウスオーバー時のカラー */
.button:hover {
    opacity: 0.5 ;
} 
/* リンク領域のスタイル */
.button-a {
	padding: 20px 30px;
	color: #000;
    display: block;
    /*padding: 11px 0;*/
    text-align: center;
	text-decoration: none;
}
/* マウスホバー時のカラー*/
.button-a:hover {
    color: #000;
}

.button img{
	height: 30px;
	vertical-align:middle;
	margin-right: 10px;
}

.type{
	width: 100%;
	height: auto;
	text-align: center;
	margin-bottom: 30px;
}
.round-g{
	width: 150px;
	height: 150px;
	background-color: #99ab4e;
	display: inline-block;/* ←忘れない！ */
	border-radius: 50%;/* ←円を作る */
	margin: 5px auto;/* ←円を中央揃え */
    text-align: center;/* ←文字を左右に中央揃え */
    line-height: 100px;/* ←文字を上下に中央揃え */
}
.round-y{
	width: 150px;
	height: 150px;
	background-color: #d7cf3a;
	display: inline-block;/* ←忘れない！ */
	border-radius: 50%;/* ←円を作る */
	margin: 0 auto;/* ←円を中央揃え */
    text-align: center;/* ←文字を左右に中央揃え */
    line-height: 100px;/* ←文字を上下に中央揃え */
}
.round-g, .round-y:hover{
	opacity: 0.8;
}
.type img{
	width: 100px;
	height: auto;
	margin-top: 25px;
}

#submenu{
	font-family:mincho-black;
	letter-spacing: 0.1em;
	width: 100%;
	list-style: none;
	margin: 10px 0 20px 0;
	padding: 0;
	font-size: 0.8em;
}
#submenu li{
	display: inline-block;
	margin: 0;
}
#submenu li:not(:first-child)::before {
  	content: "｜";
	margin: 0 5px;
}
@media screen and (max-width: 760px) {
	.round-g{
		width: 120px;
		height: 120px;
		background-color: #99ab4e;
		display: inline-block;/* ←忘れない！ */
		border-radius: 50%;/* ←円を作る */
		margin: 5px;/* ←円を中央揃え */
    	text-align: center;/* ←文字を左右に中央揃え */
    	line-height: 100px;/* ←文字を上下に中央揃え */
	}
	.round-y{
		width: 120px;
		height: 120px;
		background-color: #d7cf3a;
		display: inline-block;/* ←忘れない！ */
		border-radius: 50%;/* ←円を作る */
		margin: 0 auto;/* ←円を中央揃え */
    	text-align: center;/* ←文字を左右に中央揃え */
    	line-height: 100px;/* ←文字を上下に中央揃え */
	}
	.type img{
		width: 80px;
		height: auto;
		margin-top: 25px;
	}
}

/* video-note */
.video-note{
	max-width: 940px;
    width: calc( 100% - 20px );
    margin: 0 auto;	
}
.video-note > .-inner{
	padding-top: 40px;
	text-align: right;
	color: #666666;
}