@charset "utf-8";

/* ページ全体 */

#page	{margin:40px auto 0 auto;
	width:900px}


/* ヘッダ */

header iframe
	{margin:0 auto;
	width:900px;
	border:none;
	overflow:hidden}


/* スライド */
#stage	{position:relative;
	width:900px;
	height:350px;
	margin:-14px auto 10px auto;}

#frame ul {list-style:none;}

#frame h2 {font-size:20px;
	position:absolute;
	padding:0.5em 1em;
	background:rgba(0,0,0,0.5);
	color:#fff;
	opacity:0;
	-webkit-transition:1s;
	transition:1s;}

#frame :hover h2
	{opacity:1;}

#frame li
	{position: absolute;
	float:left;
	width:900px;
	height:350px;
	left:900px;
	-webkit-animation:slider 60s infinite;
	animation:slider 60s infinite;
	-webkit-animation-play-state:running;
	animation-play-state:running}

#frame :hover li
	{-webkit-animation-play-state:paused;
	animation-play-state:paused;}

#frame li:nth-child(1)
	{-webkit-animation-delay:0s;
	animation-delay:0s}
#frame li:nth-child(2)
	{-webkit-animation-delay:6s;
	animation-delay:6s}
#frame li:nth-child(3)
	{-webkit-animation-delay:12s;
	animation-delay:12s;}
#frame li:nth-child(4)
	{-webkit-animation-delay:18s;
	animation-delay:18s}
#frame li:nth-child(5)
	{-webkit-animation-delay:24s;
	animation-delay: 24s}
#frame li:nth-child(6)
	{-webkit-animation-delay:30s;
	animation-delay:30s}
#frame li:nth-child(7)
	{-webkit-animation-delay:36s;
	animation-delay:36s}
#frame li:nth-child(8)
	{-webkit-animation-delay:42s;
	animation-delay:42s}
#frame li:nth-child(9)
	{-webkit-animation-delay:48s;
	animation-delay:48s}
#frame li:nth-child(10)
	{-webkit-animation-delay:54s;
	animation-delay:54s}

#frame	{width:900px;
	height:350px;
	position:relative;
	overflow:hidden}

@-webkit-keyframes slider
	{0%  {left:100%; opacity:0}
	5%   {left:0%; opacity:0.8}
	10%  {left:0%; opacity:1}
	15%  {left:-100%; opacity:0}
	100% {left:-100%; opacity:0}}
@keyframes slider
	{0%  {left:100%; opacity:0}
	5%   {left:0%; opacity:0.8}
	10%  {left:0%; opacity:1}
	15%  {left:-100%; opacity:0}
	100% {left:-100%; opacity:0}}


/* 中盤 main */

/* 構造 */

#right-side {float:right;
	width:500px;
	margin-top:10px}

#left-side {float:left;
	width:390px;
	margin-top:10px}


/* 記事タイトル */
main h2
	{text-align:center;
	font-size:17px;
	height:30px;
	margin-bottom:20px;
	padding-top:10px;
	font-weight:bold;
	color:orange;
	text-shadow:1px 1px 0 #fff;
	background:linear-gradient(#ffffff,pink);
	box-shadow:1px 1px 3px red}

main h2 span
	{font:17px 'monotype corsiva';
	color:peru}


/* 記事囲み枠外側 */
#intoro, .sub-right, .sub-left, #corse
	{background-color:#ffffff;
	border-radius:20px;
	background-image:url("img-common/hr.gif"),url("img-common/hr.gif");
	background-position:top,bottom;
	background-repeat:repeat-x,repeat-x;
	border:3px solid pink}

/* 記事囲み枠内側 */
#intoro2, #intoro3, #intoro4, #intoro5, #intoro6, #intoro7
	{background-color:rgba(255,255,255,0);
	margin:5px;
	border-radius:30px;
	border:2px solid pink}


/* ちえ～るとはの記事 */
#intoro {margin:0 auto;}

#intoro2 {position:relative;
	padding:50px 150px;
	line-height:1.7em;
	background-image:url("img-top/left.gif"), url("img-top/right.gif"), url("img-top/intoro1.jpg");
	background-repeat:repeat-y, repeat-y, no-repeat;
	background-position:left, right, 585px 170px /*top 200px right 100px*/;}

	/* safariはtop pxの記述だとレイアウトが崩れる */

#intoro2 ul {list-style-image:url("img-top/list.gif");
	padding:15px 0 15px 50px;
	color:#cc0033;
	font-weight:bold}

#intoro2 p {padding-bottom:1em}

#photo2 {position:absolute;
	top:0;
	left:0;
	width:800px;
	height:750px;
	background-image:url("img-top/intoro3.gif");
	background-position:420px 530px;
	background-repeat:no-repeat;
	opacity:0.3;}

#message {position:absolute;
	width:150px;
	height:102px;
	top:640px;
	left:650px;
	overflow:hidden}

#message a {display:block;
	width:150px;
	height:102px;
	background:url("img-top/message.gif") no-repeat}

#message a:hover {background:url("img-top/message2.gif") no-repeat}


/* 右サイド ４つの知恵 */
#intoro3, #intoro6 {padding:50px 30px}

#intoro3 p {margin-bottom:15px;}

#intoro3 p:nth-child(3),#intoro3 p:nth-child(4)
	{line-height:1.7em}

#intoro3 p:nth-child(3) {padding-left:10px}

#intoro3 {position:relative}

#photo3 {position:absolute;
	top:0;
	left:0;
	width:470px;
	height:400px;
	background-image:url("img-top/wisdom.gif");
	background-position:300px 100px;
	background-repeat:no-repeat;
	opacity:0.3;}

#right-side section:nth-child(2) {margin-top:10px;}


/* 右サイド お知らせ */
#intoro6 iframe
	{width:440px;
	height:270px;
	border:none}

#intoro6 iframe body {background-color:#ffffff;}

#intoro6 {height:320px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;}


/* 左サイド　プロフィール、場所 */
#intoro4, #intoro5 {padding:50px 30px;}

#intoro4 p {margin-bottom:10px;}


/* 千絵子画像 */

#chieko	{float:right;
	margin:auto;
	position:relative;}

#chieko	img
	{-webkit-animation:chiel 20s infinite;
	animation:chiel 20s infinite;
	opacity:0;}

#chieko img:nth-child(1)
	{display: block;
	margin:0 auto;}

#chieko img:nth-child(2)
	{position:absolute;
	top:0px;
	left:0%;
	-webkit-animation-delay:10s;
	animation-delay:10s;}

@-webkit-keyframes chiel
	{0% {opacity: 0; animation-timing-function:ease-in;}
	12.5% {opacity:1; animation-timing-function: ease-out;}
	37.5% {opacity:1;}
	50% {opacity: 0;}}

@keyframes chiel
	{0% {opacity:0; animation-timing-function:ease-in;}
	12.5% {opacity:1; animation-timing-function: ease-out;}
	37.5% {opacity:1;}
	100% {opacity: 0;}}


#left-side article:nth-child(2) {margin-top:10px;}

#intoro5 {position:relative;
	height:165px}

#intoro5 p:nth-child(5) {padding-top:10px;}

#intoro-photo2
	{position:absolute;
	top:120px;
	right:20px;
	width:90px;
	height:90px;
	border-radius:50%;
	background-image:url("img-top/intoro2.jpg");
	background-size:contain;
	background-repeat:no-repeat;
	opacity:0.4;
	box-shadow:5px 5px 10px 10px rgba(0,0,0,0.4);}


/* 中央下段 */

/* クラス案内 */
#clear {clear:both; /*クリア対応div*/
	border:1px solid rgba(255,255,255,0)}

#corse {clear:both;
	margin-top:9px}  /*clearの1pxを減算*/

#intoro7 {padding:50px 30px;
	background-image:url("img-top/left.gif"), url("img-top/left2.gif"),url("img-top/right.gif"), url("img-top/right2.gif");
	background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
	background-position:left 20px, 80px 70px, right 20px, 715px 70px;
	/*background-position:left top 20px, left 80px top 70px, right top 20px, right 80px top 70px;*/}

#intoro7 h2 {margin:0 auto;
	width:400px;}

#clasmaegaki a {color:pink}

#intoro7 table	{margin-top:30px}

#intoro7 th p /* コースの見出し */
	{padding:10px 0 10px 10px;
	/*width:200px;*/
	text-align:center;
	background-image:url("img-top/lessonback.jpg");
	border-radius:10px 10px 0 0;
	border-left:1px peru solid;
	border-top:1px peru solid;
	border-right:1px peru solid;
	border-bottom:1px peru solid;
	font-weight:bold;
	color:gray;
	text-shadow:1px 1px 0 #fff;}

#intoro7 h3 /* 各クラス名 */
	{font-weight:bold;
	color:#fff;
	background-color:rgba(51,51,51,0.6);
	padding:5px 0;
	text-shadow:2px 2px 1px pink;
	position:absolute;
	top:10px;
	left:8px;}

#intoro7 a:hover h3
	{background-color:rgba(51,51,51,0.6);
	text-shadow:2px 2px 1px darksalmon}

#intoro7 a {color:black;}

#intoro7 td
	{width:200px;
	height:100px;
	border:2px solid pink;
	box-shadow:1px 1px 3px pink;
	transition:all 0.5s ease;}

#intoro7 td:hover
	{background-color:pink;
	transition:background-color 0.5s ease;}

#intoro7 td:hover p
	{color:#fff;
	text-shadow:1px 1px 0 darksalmon;
	font-weight:bold}

.class-flame
	{position:relative;
	top:-1px;
	left:5px}

#intoro7 img {border-radius:20px;
	padding-top:5px;}

#intoro7 p
	{padding:0 10px 20px 10px}


#clasmaegaki
	{margin:20px auto 0 auto;
	width:500px;
	height:100px;
	background-image:url("img-top/maegaki.jpg");
	padding:0;
	border-radius:20px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.5)}

#clasmaegaki p
	{padding:23px 0 0 30px}

#clasmaegaki a {color:red}
#clasmaegaki a:hover {color:green}


/* フッター */

footer	{clear:both;
	margin-top:10px;
	height:240px;
	background-image:url("img-common/footer.jpg");
	background-repeat:no-repeat;
	border-radius:30px 30px 0 0;
	border:3px solid pink}

#footeroutline
	{margin:5px;
	height:225px;
	border-radius:30px 30px 0 0;
	border:2px solid pink}

#footernavi ul
	{margin:10px 90px;}

#footernavi li
	{float:left;
	padding-right:15px;}

#footeranime
	{clear:both;
	text-align:center;
	font-size:12px;
	background-image:url("img-common/footer2.gif");
	background-repeat:repeat-x; background-position:top 4px right 0;
	height:25px;
	padding-top:60px;
	-webkit-animation:footmove 20s linear infinite;
	animation:footmove 20s linear infinite;
	-webkit-animation-play-state:running;
	animation-play-state:running}

@-webkit-keyframes footmove
	{0% {background-position:0 0;}
	100% {background-position:880px 0}}
@keyframes footmove
	{0% {background-position:0 0;}
	100% {background-position:880px 0}}


#pic	{margin:70px auto 0 auto;}

#pic img:hover {box-shadow:2px 2px 3px tomato}

#pic td {padding-right:25px;
	vertical-align:middle}

#pic div {padding-left:20px;
	font:16px 'monotype corsiva';
	background-repeat:no-repeat;
	background-position:top left;}

#totop {background-image:url("img-common/home.gif");}
#return {background-image:url("img-common/return.gif");}

#pic a, #footernavi a {color:green}
#pic a:hover, #footernavi a:hover
	{color:red;
	text-shadow:1px 1px 0 #fff;}


/* 休業案内 */
#yasumi
	{background-color:#ffffff;
	border-radius:20px;
	background-image:url("img-common/hr.gif"),url("img-common/hr.gif");
	background-position:top,bottom;
	background-repeat:repeat-x,repeat-x;
	border:3px solid pink}

#yasumi2
	{background-color:rgba(255,255,255,0);
	margin:5px;
	border-radius:30px;
	border:2px solid pink}

#yasumi2 h1 {font-size:20px;
	padding:50px 0 20px 100px;
	color:red }

#yasumi2 p {margin:0 150px;
	padding-bottom:1em}