@charset "utf-8";

img {
	display: inline-block;
}
.pc_menu_base .service.header_list {
	background-color:#FFF;
	background-image:url(/images/header_service_bg_active.png);
}
header .pc_menu_base .service.header_list .qtext {
color:#90BA22;
}
.pc_menu_base .service.header_list:hover .qtext {
color:#FFFFFF !important;
}

h2 {
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h2 span {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
.innerWrap {
	width: 980px;
	margin: 0 auto;
}
@media screen and (max-width: 979px) {
	.innerWrap {
		width: 768px;
	}
}
@media screen and (max-width: 767px) {
	.innerWrap {
		width: 320px;
	}
}

.sec_topContent {
	margin-top:100px;
	background:url(../images/top_bg.jpg) repeat left top;
	position: relative;
}
@media screen and (max-width: 767px) {
	.sec_topContent {
		margin-top: 50px;
	}
}
.sec_topContent .innerWrap {
	height: 480px;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width: 979px) {
	.sec_topContent .innerWrap {
		height: auto;
		text-align: center;
	}
}
.logo_container {
	padding-top:102px;
	margin-right: 2px;
	float:right;
}
@media screen and (max-width: 979px) {
	.logo_container {
		padding-top:78px;
		margin-left: 5px;
		float: none;
	}
}
@media screen and (max-width: 767px) {
	.logo_container {
		padding-top: 48px;
	}
	.logo_container img {
		width: 282px;
	}
}
.sec_topContent .flower {
	position:absolute;
	bottom:-80px;
	right: 53px;
	z-index:3;
}
@media screen and (max-width: 979px) {
	.sec_topContent .flower {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	/* 767px以下用（スマートフォン用）の記述 */
}
.eyecatch {
	padding-top:89px;
}
@media screen and (max-width: 979px) {
	.eyecatch {
		padding-top:11px;
		margin-left: -19px;
	}
}
@media screen and (max-width: 767px) {
	.eyecatch {
		margin-left: 0;
	}
}
.eyecatch img {
	margin-left:150px;
}
@media screen and (max-width: 979px) {
	.eyecatch img {
		margin-left:-10px;
	}
}
@media screen and (max-width: 767px) {
	.eyecatch img {
		width: 176px;
		margin-left:-13px;
	}
}

.sec_sampleMovie {
	background: url(../images/bg_sec_movie.jpg) repeat-x center top;
	margin: 0 auto;
	height: 608px;
	padding-top: 92px;
}
@media screen and (max-width: 979px) {
	.sec_sampleMovie {
		padding-top: 90px;
		padding-left: 5px;
	}
}
@media screen and (max-width: 767px) {
	.sec_sampleMovie {
		background-size: auto 356px;
		height: 304px;
		padding-top: 52px;
		padding-left: 0;
	}
}
.movieplayer {
	background:url(../images/bg_sp.png) no-repeat center top;
	width: 682px;
	height: 347px;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width: 767px) {
	.movieplayer {
		background-size: 299px auto;
		width: 299px;
		height: 153px;
	}
}
.movieplayer video,
.movieplayer .dummyFrame {
	position: absolute;
	left: 89px;
	top: 29px;
	width: 498px;
	height: 282px;
}
@media screen and (max-width: 767px) {
	.movieplayer video,
	.movieplayer .dummyFrame {
		left: 38px;
		top: 13px;
		width: 219px;
		height: 123px;
	}
}
.movieplayer .dummyFrame {
	display: flex;
	justify-content: center;
	align-items: center;
}
.movieplayer .play_btn {
	width: 97px;
	z-index: 1;
	cursor: pointer;
}
@media screen and (max-width: 767px) {
	.movieplayer .play_btn {
		width: 42px;
	}
	.movieplayer .play_btn img {
		width: 42px;
	}
}
.sec_sampleMovie h2 {
	margin-top: 7px;
	font-size: 38px;
	font-weight:bold;
	color:#F88AB8;
	line-height:1.4;
	text-align:center;
}
@media screen and (max-width: 767px) {
	.sec_sampleMovie h2 {
		margin-top: 2px;
		font-size: 20px;
	}
	.sec_sampleMovie h2 span {
		display: block;
	}
}

.sec_chartView {
	background:url(../images/bg_chart.jpg) repeat;
	margin: 0 auto;	
	padding: 42px 0 60px;
	overflow:hidden;
}
@media screen and (max-width: 979px) {
	.sec_chartView {
		padding: 38px 0 70px;
	}
}
@media screen and (max-width: 767px) {
	.sec_chartView {
		padding: 34px 0 20px;
	}
}
.sec_chartView h2 {
	font-size: 38px;
	font-weight:bold;
	color:#7F7F7F;
	line-height:1.4;
	text-align:center;
}
@media screen and (max-width: 767px) {
	.sec_chartView h2 {
		font-size: 20px;
	}
}
.sec_chartView h2 img {
	display:inline;
	vertical-align:middle;
	width:100%;
	max-width:191px;
}
.chartList {
	margin-top:18px;
	width: 100%;
	text-align: center;
	font-size: 0;
}

@media screen and (max-width: 767px) {
	.chartList {
		margin-top: 13px;
	}
}
.chartList li {
	display: inline-block;
	width: 285px;
	height: 309px;
	margin-left: 60px;
	position: relative;
}
.chartList li:first-child {
	margin-left: 0
}
@media screen and (max-width: 979px) {
	.chartList li {
		width: 215px;
		height: 236px;
		margin-left: 20px;
	}
}
@media screen and (max-width: 767px) {
	.chartList li {
		height: 231px;
		margin-left: 0;
		margin-bottom: 27px;
	}
}
.chartList.pc li canvas {
	max-width: 285px;
	max-height: 285px;
}
.chartList .chart_ttl {
	position: absolute;
	left: 8px;
	top: 8px;
}
.chartList.sp li .chart_ttl {
	background:url(../images/bg_chart_01.png) no-repeat;
	width: 270px;
	height: 269x;
	padding-top: 5px;
}
.chartList.sp li:nth-child(2) .chart_ttl {
	background:url(../images/bg_chart_02.png) no-repeat;
}
.chartList.sp li:nth-child(3) .chart_ttl {
	background:url(../images/bg_chart_03.png) no-repeat;
}
@media screen and (max-width: 979px) {
	.chartList .chart_ttl {
		left: 6px;
		top: 6px;
	}
	.chartList.sp li .chart_ttl {
		background-size: 203px auto!important;
		width: 203px;
		height: 203px;
	}
	.chartList .chart_ttl img {
		width: 203px;
	}
}
.chartList .note {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
}
@media screen and (max-width: 979px) {
	.chartList .note img {
		height: 13px;
	}
}




.sec_movieSystem {
	background:url(../images/middle3_bg.jpg) repeat center top;
	margin: 0 auto;
	padding: 61px 0 47px;
	box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
	-moz-box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
	-webkit-box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
	-o-box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
	-ms-box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
}
@media screen and (max-width: 767px) {
	.sec_movieSystem {
		padding: 41px 0 42px;
	}
}
.sec_movieSystem h2 {
	font-size: 38px;
	font-weight:bold;
	color:#8E7009;
	line-height:1.4;
	text-align:center;
}
@media screen and (max-width: 767px) {
	.sec_movieSystem h2 {
		font-size: 20px;
	}
}
.sec_movieSystem .image {
	margin: 30px 0 0 12px;
	text-align: center;
}
@media screen and (max-width: 979px) {
	.sec_movieSystem .image {
		margin: 30px 0 0 0;
	}
	.sec_movieSystem .image img {
		width: 688px;
	}
}
@media screen and (max-width: 767px) {
	.sec_movieSystem .image img {
		width: auto;
	}
}
.sec_isum {
	background:url(../images/middle4_bg.jpg) repeat center top;
	box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
	-moz-box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
	-webkit-box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
	-o-box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
	-ms-box-shadow:0 0.5px 5px rgba(0, 0, 0, 0.2) inset;
	padding: 64px 0 51px;
}
@media screen and (max-width: 979px) {
	.sec_isum {
		padding: 55px 0 51px;
	}
}
@media screen and (max-width: 767px) {
	.sec_isum {
		padding: 28px 0 34px;
	}
}
.sec_isum .innerWrap {
	position: relative;
}
.sec_isum .image {
	margin-left:-38px;
}
@media screen and (max-width: 979px) {
	.sec_isum .image {
		margin-left:6px;
		text-align: center;
	}
	.sec_isum .image img {
		width: 696px;
	}
}
@media screen and (max-width: 767px) {
	.sec_isum .image {
		margin-left:2px;
	}
	.sec_isum .image img {
		width: auto;
	}
}
.sec_isum h2 {
	font-size: 38px;
	font-weight:bold;
	color:#666;
	line-height:1.4;
	text-align:left;
	text-shadow:0px 3px 0px #FFF;
	position: absolute;
	right: 6px;
	top: 0;
}
@media screen and (max-width: 979px) {
	.sec_isum h2 {
		position: static;
		text-align: center;
		margin-top: 11px;
	}
}
@media screen and (max-width: 767px) {
	.sec_isum h2 {
		margin-top: 20px;
		font-size: 20px;
	}
}



.btn_viewsite,
.btn_viewsite_ie8 {
	height:auto;
	text-indent:-9999px;
}
.btn_viewsite_ie8 {
	display:none;
}
.btn_viewsite img,
.btn_viewsite_ie8 img {
	display:block;
	width:100%;
	height:auto;
	margin-top:5%;
}
@media screen and (max-width: 979px) {
	.btn_viewsite img {
		margin-top: 40px;
	}
}
@media screen and (max-width: 767px) {
	.btn_viewsite img {
		margin-top: 20px;
	}
}
.sec_spec {
	background:#FFF;
	padding: 46px 0 50px;
}
@media screen and (max-width: 767px) {
	.sec_spec {
		padding: 23px 0 50px;
	}
}
.sec_spec .innerWrap {
	width: 994px;
}
@media screen and (max-width: 979px) {
	.sec_spec .innerWrap {
		width: 768px;
	}
}
@media screen and (max-width: 767px) {
	.sec_spec .innerWrap {
		width: 320px;
	}
}
.sec_spec h2 {
	font-size:40px;
	font-weight:bold;
	text-align:center;
	color:#D2005A;
	line-height:1.2;
	margin:0 174px 24px 0;
}
.sec_spec h2 span {
	display: block;
}
@media screen and (max-width: 979px) {
	.sec_spec h2 {
		margin: 0 0 11px 0;
	}
}
@media screen and (max-width: 767px) {
	.sec_spec h2 {
		margin: 0 0 3px 0;
		font-size: 24px;
	}
}
.table_container {
	max-width:980px;
	margin:0 auto;
	position:relative;
	padding:0 50px;
}
@media only screen and (max-width :640px) {
    .table_container {
    	padding: 0 20px;
    }
}


.tableFrame {
	margin-top:20px;
	border:1px solid #CCC;
	border-radius:16px;
	overflow:hidden;
	width:100%;
	max-width:778px;
	min-width:278px;
}
.tableFrame dl {
	border-bottom:1px solid #CCC;
	width:100%;
	overflow:hidden;
}
.tableFrame dl:last-child {
	border:none;
}
@media only screen and (max-width :1023px) {
	.tableFrame {
		max-width:100%;
	}
}
.tableFrame dt {
	border-right:1px solid #CCC;
	text-align:right;
}
.tableFrame p {
	margin:7px 22px 4px 23px;
	font-size:24px;
	line-height:1.2;
}
.tableFrame dt span {
	display:block;
	font-size:14px;
}
.tableFrame dd {
	border-left:1px solid #CCC;
	margin-left:-1px;
}
.tableFrame dt,
.tableFrame dd {
	float:left;
	width:49%;
	height:inherit;
}
@media only screen and (max-width :768px) {
	.tableFrame p,
	.tableFrame p {
		font-size:20px;
	}
}
@media only screen and (max-width :480px) {
	.tableFrame {
		margin:16px auto 20px;
		border-radius:5px;
		width:278px;
	}
	.tableFrame dt,
	.tableFrame dd {
		/*padding:10px 10px 7px 10px;*/
		padding:5px 10px;
		float:none;
		width:280px;
		border-right:none;
	}
	.tableFrame dt {
		background:url(../../images/dot.png) repeat-x left bottom;
		font-size:14px;
		/*padding-top:11px;*/
		padding-top:8px;
		text-align:left;
	}
	.tableFrame p {
		margin:0;
		font-size:16px;
		line-height:1.4;
	}
.tableFrame dt span {
		font-size:12px;
	}
}
.dvd {
	position:absolute;
	top:105px;
	right:0;
}
@media screen and (max-width: 979px) {
	.dvd {
		display: none;
	}
}