@charset "UTF-8";
/* Top page CSS Document */
#mainImage{
	width: 940px;
	height:398px;
}
#slider{
	width: 940px;
	height: 385px;
}
#slider img{
	display: none;
}
#info{
	width: 940px;
	margin-bottom: 30px;
}
#info header{
	width: 940px;
	margin-bottom: 3px;
}
#info header h2{
	width: 940px;
	height: 40px;
	text-indent: -9999px;
	background: url(images_common/title.png) no-repeat;
}
#info .newstopics{
	width: 940px;
	font-size: 80%;
	margin-bottom: 10px;
}
#info .newstopics time{
	float: left;
	width: 91px;
	padding: 2px 0;
}
#info .newstopics ul{
	float: left;
	width: 67px;
}
#info .newstopics ul li{
	padding: 3px 0px 0px;
}
#info .newstopics ul li span{
	padding: 3px 5px 0px;
	background: #FFD8D9;
}
#info .newstopics h3{
	float: left;
	width: 782px;
	padding: 2px 0;
}
#info .newstopics h3 a{
	font-weight: normal;
	padding-left: 10px;
	letter-spacing: 1px;
	text-decoration: none;
}

#intro{
	margin-bottom: 35px;
}
#intro .box{
	float: left;
	width: 320px;
	margin-bottom: 25px;
}
#intro .box.lineend{
	width: 300px;
}
#intro .box a{
	display: block;
	width: 300px;
	background: #fff;
	text-decoration: none;
	padding: 22px 0;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.1)
}
#intro .box a:hover p{
	color: #fe8686;
}
#intro .box h2{
	width: 269px;
	height: 41px;
	text-indent: -9999px;
	margin: 0 0 20px 17px;
}
#intro .box h2.profile{
	background: url(images_common/title.jpg) no-repeat;
}
#intro .box h2.works{
	background: url(images_common/title.jpg) no-repeat 0 -41px;
}
#intro .box h2.perfomance{
	background: url(images_common/title.jpg) no-repeat 0 -82px;
}
#intro .box h2.school{
	background: url(images_common/title.jpg) no-repeat 0 -123px;
}
#intro .box h2.order{
	background: url(images_common/title.jpg) no-repeat 0 -164px;
}
#intro .box h2.online{
	background: url(images_common/title.jpg) no-repeat -320px -44px;
}
#intro .box div{
	float: left;
	width: 171px;
}
#intro .box div img{
	margin-left: 17px;
}
#intro p{
	float: left;
	width: 115px;
}
#intro p.explan{
	color: #232323;
	font-size: 90%;
	line-height: 1.3em;
}
#movie {
	max-width: 100%;
	margin: 0 auto 35px;
}
#movie .youtube{
	position: relative;
	width: 100%;
	height:0px;
	padding-top: 56.25%;
}
#movie .youtube iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (min-width:1px) and (max-width:767px) {
	
	#info {
		width: 95%;
		margin: 0 auto;
		overflow-x: hidden;
	}
	#info header {
    margin-bottom: 2%;
	}
	#info .newstopics {
		width: 100%;
		margin-bottom: 5%;
	}
	#info .newstopics h3 a {
		font-size: 3.5vw;
		padding-left: 0;
	}
	#info .newstopics h3 {
    width: 100%;
    margin-top: 0.5em;
	}
	#info .newstopics time {
		width: 20%;
		font-size: 3.5vw;
	}
	#info .newstopics ul {
		width: 100%;
		float: none;
	}
	#info .newstopics ul li span {
		padding: 3px 5px;
		font-size: 3.5vw;
	}
	
	#intro {
		width: 95%;
		margin-right: auto;
		margin-left: auto;
	}
	#intro .box {
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 0;
		width: 100%;
		float: none;
	}
	#intro .box .bg{
    display: block;
    width: 100%;
    background-color: #fff;
	}
	
	#intro .box h2 {
    margin-left: 0;
    margin-bottom: 2%;
    text-indent: unset;
    background: none!important;
    width: 100%;
		font-size: 5vw;
		font-weight: normal;
    height: auto;
    margin-bottom: 0.5em;
    border-left: 5px solid #fe8686;
		padding: 0.3em 0 0.3em 0.5em;
		box-sizing: border-box;
	}
	#intro .box h2 span {
    font-size: 4.5vw;
	}
	#intro .box a {
		margin-right: auto;
		margin-left: auto;
		background: none;
		box-shadow: unset;
		width: 100%;
		padding-bottom: 0;
		padding-top: 10%;
	}
	#intro .box div {
		float: none;
		width: 100%;
	}
	#intro .box div img {
		width: 100%;
		margin-left: 0;
	}
	#intro p.explan {
    font-size: 3.5vw;
    width: 100%;
    height: auto!important;
    margin-top: 2%;
	}
	#intro .box.lineend {
		width: 100%;
	}
	#movie {
		max-width: 95%;
		margin: 0 auto 10vw;
	}


}