@charset "utf-8";

/*
============================================================
無料体験会　コンテンツ　設定
============================================================
*/

/* ---------------------------------------------------------
■ フェードイン
--------------------------------------------------------- */
.fadein {
	visibility: hidden;
}

.fadeInDown {
	visibility: visible !important;
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;

}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */

#page-top {
    position: fixed;
    bottom: 20px;
    right: 0px;
	z-index: 100;
}
#page-top a {
    background: url(../images/btn_gotop.png) no-repeat;
	display: block;
	width: 100px;
	height: 165px;
	transition: 0.2s;
}

#page-top a:hover {
	-webkit-transform: translate(0,-3px);
	-moz-transform: translate(0,-3px);
	-ms-transform: translate(0,-3px);
	-o-transform: translate(0,-3px);
	transform: translate(0,-3px);

}

/* ---------------------------------------------------------
■ 見出し
--------------------------------------------------------- */
h1,h2.tit {
	background: url(../images/h1_bg.jpg) no-repeat bottom left;
	padding: 0 0 10px;
	font-size: 22px;
	font-weight: bold;
	color: #333;
}

h2.tit {
	font-size: 18px;
}

h3 {
	width: auto;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}

h3 span {background: #e4007f; padding: 2px 5px 1px;}

h3.tit {
	background: url(../images/h3_bg.jpg) no-repeat bottom left;
	padding: 0 0 6px;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
}

/* ---------------------------------------------------------
■ バウンドするリンクボタン
--------------------------------------------------------- */

.link_box a{
    /*position:absolute;*/
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.link_box .animationBtn {
	position: absolute;
	top: 170px;
	left: 170px;
	/*アニメーション*/
	animation: animScale 3s infinite ease-out;
	transform-origin: 50% 50%;
	animation-play-state:running;
}

@keyframes animScale {
0% { transform: scale(0.8, 0.8); }
5% { transform: scale(1.2, 1.2); }
10% { transform: scale(1, 1); }
15% { transform: scale(1.1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

/* ---------------------------------------------------------
■ ライトボックス
--------------------------------------------------------- */

.lightbox { 
	display: none;
	margin: 0 auto;
	max-width: 700px;
	overflow: auto;
}

.lightbox p.tx{
	font-size: 14px;
	line-height: 24px;
	margin-top: 5px;
	padding: 0;
}

.lightbox p.tx span.tit{
	font-size: 18px;
	line-height: 28px;
	font-weight: bold;
	color: #e4007f;
}

.lightbox p.tx span.tit_01{color: #7652A8;}
.lightbox p.tx span.tit_02{color: #e4007f;}
.lightbox p.tx span.tit_03{color: #4E9DD8;}
.lightbox p.tx span.tit_04{color: #6CC175;}
.lightbox p.tx span.tit_05{color: #A5C630;}
.lightbox p.tx span.tit_06{color: #C62232;}

.lightbox h2.tit {
	font-size: 20px;
}

/*スクロールバーの横幅指定*/
div::-webkit-scrollbar {
    width: 10px;
}
/*スクロールバーの背景色・角丸指定*/
div::-webkit-scrollbar-track {
	background: #e6cbe6;
}
/*スクロールバーの色・角丸指定*/
div::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background:#ff0099;
}
/* ---------------------------------------------------------
■ リード
--------------------------------------------------------- */
#lead {
	background: url(../images/00_lead_bg.jpg) no-repeat;
	height: 490px;
	position: relative;
}
#lead div.tx {
	width: 730px;
	height: 310px;
	margin: 90px 0 0 185px;
	position: absolute;
}

#lead div.tx p.lead_01{
	padding-top: 15px;
	font-size: 18px;
	line-height: 34px;
}

#lead div.tx div.lead_02{
	width: 400px;
	height: 160px;
	margin: 20px 0 0 0;
}

#lead div.tx div.lead_02 p{
	font-size: 16px;
	line-height: 28px;
}
/* ---------------------------------------------------------
■ プログラム
--------------------------------------------------------- */
#program a:hover img{
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

#pro_00 {
	background: url(../images/pro_00_bg.jpg) no-repeat;
	height: 380px;
}

#pro_01 {
	background: url(../images/pro_01_bg.jpg) no-repeat;
	height: 500px;
}

#pro_01 .btn_01{
	margin: 102px 0 0 70px;
	position: absolute;
}

#pro_01 .contents_01{
	margin: 4px 0 0 344px;
	position: absolute;
}

#pro_02 {
	background: url(../images/pro_02_bg.jpg) no-repeat;
	height: 540px;
}

#pro_02 .btn_02{
	margin: 140px 0 0 765px;
	position: absolute;
}

#pro_02 .contents_02{
	margin: 10px 0 0 30px;
	position: absolute;
}

#pro_03 {
	background: url(../images/pro_03_bg.jpg) no-repeat;
	height: 600px;
}

#pro_03 .btn_03{
	margin: 74px 0 0 80px;
	position: absolute;
}

#pro_03 .contents_03{
	margin: 15px 0 0 82px;
	position: absolute;
}

#pro_04 {
	background: url(../images/pro_04_bg.jpg) no-repeat;
	height: 540px;
}

#pro_04 .btn_04{
	margin: 140px 0 0 765px;
	position: absolute;
}

#pro_04 .contents_04{
	margin: 30px 0 0 23px;
	position: absolute;
}

#pro_05 {
	background: url(../images/pro_05_bg.jpg) no-repeat;
	height: 760px;
}

#pro_05 .btn_05{
	margin: 120px 0 0 80px;
	position: absolute;
	z-index: 2;
}

#pro_05 .contents_05{
	margin: 203px 0 0 82px;
	position: absolute;
	z-index: 1;
}

#pro_05 .contents_05_small{
	margin: 60px 0 0 385px;
	position: absolute;
	z-index: 3;
}

#pro_06 {
	background: url(../images/pro_06_bg.jpg) no-repeat;
	height: 540px;
}

#pro_06 .btn_06{
	margin: 140px 0 0 765px;
	position: absolute;
}

#pro_06 .contents_06{
	margin:80px 0 0 0;
	position: absolute;
}

#pro_07 {
	background: url(../images/pro_07_bg.jpg) no-repeat;
	height: 440px;
}

#pro_07 .contents_07{
	margin: 92px 0 0 8px;
	position: absolute;
}

/* ---------------------------------------------------------
■ コメント
--------------------------------------------------------- */
#com_01 {
	background: url(../images/com_01_bg.jpg) no-repeat;
	height: 442px;
	position: relative;
}

#com_01 .tx{
	width: 420px;
	height: 300px;
	margin: 40px 0 0 185px;
	position: absolute;
}

#com_01 .tx p{
	font-size: 16px;
	line-height: 28px;
	margin-top: 15px;
}

#com_02 {
	background: url(../images/com_02_bg.jpg) no-repeat;
	height: 400px;
}

#com_02 .tx{
	width: 550px;
	height: 280px;
	margin: 50px 0 0 365px;
	position: absolute;
}

#com_01 .tx p,
#com_02 .tx p{
	font-size: 14px;
	line-height: 24px;
	margin-top: 10px;
	padding: 0;
}

/* ---------------------------------------------------------
■ バナー
--------------------------------------------------------- */
#bnr {
	text-align: center;
}