@charset "utf-8";

/*==========================================

common

==========================================*/
.fLeft{    float:left;}
.fRight{float:right;}
.alignR{text-align:right !important;}
.alignC{text-align:center !important;}
.alignL{text-align:left !important;}
.alignVM{vertical-align:middle !important;}
.alignVT{vertical-align:top !important;}
.alignVB{vertical-align:bottom !important;}
.alignVBase{vertical-align:baseline !important;}
em{font-weight: bold;font-style: normal;}
.first-child{margin-top:0px !important;}
.mAuto{margin:0 auto !important;}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}

.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}

.mr10{margin-right:10px !important;}
.mr20{margin-right:20px !important;}
.mr30{margin-right:30px !important;}

.ml10{margin-left:10px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}

.pt0{padding-top:0px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}

.font12{font-size: 12px !important;;}
.font14{font-size: 14px !important;;}
.colorWhite{color:#fff !important;}
.colorYellow{color:#ffe15d !important;}

/* list */
p.note01,
ul.note01 li{
	text-indent:-1.352em;
	margin-left:1.352em;
	line-height:150%;
	float: none;
	display: block;
	overflow: visible;
}

/* clearfix
------------------------------------------*/
.clearFix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearFix { display: inline-block;}
/* exlude MacIE5 \*/
* html .clearFix { height: 1%; _height: 0; }
.clearFix {display:block;}
/* end MacIE5 */

/*==========================================

Layout

==========================================*/
/* contents
------------------------------------------*/

/*  ff7-main */
#ff7-main {
	background: url(../images2/bg_body_secTop.png) top center no-repeat;
	height: 1136px;
}
#ff7-main h1{
	text-align: center;
}
#ff7-main .txt01{
	text-align: center;
	margin-top: 24px;
}
#ff7-main .movie{
	border: 1px solid #7d9394;
	width: 420px;
	height: 320px;
	margin: 31px auto 0;
}
#ff7-main .btn01{
	text-align: center;
	margin-top: 27px;
}
#ff7-main .box01{
	width: 980px;
	height: 93px;
	margin: 24px auto 0;
	background: url(../images2/secTop_bgBox01.png) top left no-repeat;
	position: relative;
}
#ff7-main .box01 .n01{
	top: 19px;
	left: 20px;
	position: absolute;
}
#ff7-main .box01 .n02{
	top: 65px;
	left: 20px;
	position: absolute;
}
#ff7-main .box01 .sLink{
	top: 61px;
	right: 126px;
	position: absolute;
}
#ff7-main .bnr01{
	text-align: center;
	margin-top: 19px;
}
#ff7-main .btn02{
	top: 82px;
	right: 84px;
	position: absolute;
}
/** features **/

#ff7-features {
	height: 1100px;
}
#ff7-features .scroll-content{
	width: 980px;
	height: 630px;
	background: url(../images2/sec02_bgBox01.png) bottom left no-repeat;
}
#ff7-features #tabs div{
	width: 980px;
	clear: both;
}
#ff7-features h2{
	text-align: center !important;
}
#ff7-features h3{
	margin-top: 29px;
	text-align: center !important;
}
#ff7-features #tabs .inner{
	width: 980px;
	height: 497px;
	margin-top: 29px;
	position: relative;
}
/* panel01 */
#ff7-features #tabs #panel1 .inner .n01{
	position: absolute;
	top: 32px;
	left: 211px;
}
#ff7-features #tabs #panel1 .inner .n02{
	position: absolute;
	top: 159px;
	left: 29px;
}
#ff7-features #tabs #panel1 .inner .n03{
	position: absolute;
	top: 159px;
	right: 29px;
}

/* panel02 */
#ff7-features #tabs #panel2 .inner .n01{
	position: absolute;
	top: 32px;
	left: 217px;
}
#ff7-features #tabs #panel2 .inner .n02{
	position: absolute;
	top: 120px;
	left: 29px;
}
#ff7-features #tabs #panel2 .inner .n03{
	position: absolute;
	top: 203px;
	left: 29px;
}
#ff7-features #tabs #panel2 .inner .n04{
	position: absolute;
	top: 272px;
	left: 29px;
}
#ff7-features #tabs #panel2 .inner .n05{
	position: absolute;
	top: 341px;
	left: 29px;
}
#ff7-features #tabs #panel2 .inner .n06{
	position: absolute;
	top: 433px;
	left: 40px;
}
#ff7-features #tabs #panel2 .inner .movie{
	position: absolute;
	top: 125px;
	right: 29px;
	border: 1px solid #7d9394;
	width: 420px;
	height: 320px;
}

/* panel03 */
#ff7-features #tabs #panel3 .inner .n01{
	position: absolute;
	top: 44px;
	left: 148px;
}
#ff7-features #tabs #panel3 .inner .n02{
	position: absolute;
	top: 105px;
	left: 57px;
}
#ff7-features #tabs #panel3 .inner .n03{
	position: absolute;
	top: 105px;
	right: 57px;
}
#ff7-features #tabs #panel3 .inner .n04{
	position: absolute;
	top: 406px;
	left: 57px;
}
#ff7-features #tabs #panel3 .inner .n05{
	position: absolute;
	top: 406px;
	right: 57px;
}

/* panel03 */
#ff7-features #tabs #panel4 .inner .n01{
	position: absolute;
	top: 32px;
	left: 65px;
}
#ff7-features #tabs #panel4 .inner .n02{
	position: absolute;
	top: 156px;
	left: 86px;
}
#ff7-features #tabs #panel4 .inner .n03{
	position: absolute;
	top: 156px;
	right: 85px;
}

/* switch */
#ff7-features #tabs .tab ul{
	width: 838px;
	margin: 23px auto 0;
	padding: 0;
}

#ff7-features #tabs .tab ul li{
	display: block;
	float: left;
	margin-right: 30px;
}
#ff7-features #tabs .tab ul li.last{
	margin-right: 0;
}
#ff7-features #tabs .tab ul li a{
	width:187px;
	height:39px;
	text-indent:-9999px;
	display:block;
}
#ff7-features #tabs .tab ul li a.switch01{
	background:url(../images2/sec02_btnSwith01.png) left top no-repeat;
}
#ff7-features #tabs .tab ul li a.switch02{
	background:url(../images2/sec02_btnSwith02.png) left top no-repeat;
}
#ff7-features #tabs .tab ul li a.switch03{
	background:url(../images2/sec02_btnSwith03.png) left top no-repeat;
}
#ff7-features #tabs .tab ul li a.switch04{
	background:url(../images2/sec02_btnSwith04.png) left top no-repeat;
}
#ff7-features #tabs .tab ul li a.switch01:hover,
#ff7-features #tabs .tab ul li.active a.switch01{
	background:url(../images2/sec02_btnSwith01_over.png) left top no-repeat;
}
#ff7-features #tabs .tab ul li a.switch02:hover,
#ff7-features #tabs .tab ul li.active a.switch02{
	background:url(../images2/sec02_btnSwith02_over.png) left top no-repeat;
}
#ff7-features #tabs .tab ul li a.switch03:hover,
#ff7-features #tabs .tab ul li.active a.switch03{
	background:url(../images2/sec02_btnSwith03_over.png) left top no-repeat;
}
#ff7-features #tabs .tab ul li a.switch04:hover,
#ff7-features #tabs .tab ul li.active a.switch04{
	background:url(../images2/sec02_btnSwith04_over.png) left top no-repeat;
}


/** characters **/
#ff7-characters {
	height: 1100px;
}
#ff7-characters h2{
	text-align: center !important;
}
#ff7-characters div.scroll-element.hero {
	height: 600px;
	width: 1082px;
	left: -100px;
	top: -15px;
	margin: 0 auto; 
}
#ff7-characters div.scroll-element.profileBox {
	height: 452px;
	width: 514px;
	right: 0px;
	margin-top: 34px;
	background:url(../images2/sec03_bgBox01.png) left top no-repeat;
	overflow: hidden;
}

#ff7-characters div.scroll-element.title {
	top: 28px;
	left: 24px;
	position: absolute;
}
#ff7-characters div.scroll-element.desc {
	top: 249px;
	left: 68px;
	color: #a7e1d3;
	font-size: 14px;
	line-height: 2;
	overflow: hidden;
	position: absolute;
}
#ff7-characters div.scroll-element.desc li{
	width: 382px;
}
#ff7-characters div.scroll-element.mini {
	height: 118px;
	width: 194px;
	top: 98px;
	left: 68px;
	position: absolute;
}
#ff7-characters .info {
	height: 133px;
	width: 980px;
	bottom: 144px;
	left: 0;
	padding-top: 20px;
	position: absolute;
	background:url(../images2/sec03_bgBox02.png) left top no-repeat;
}
#ff7-characters .info p{
	text-align: center;
	padding-bottom: 9px;
}

#ff7-characters div.scroll-element.hero span.character.cloud {background : url(../images2/sec03_img_cloud.png) no-repeat;}
#ff7-characters div.scroll-element.hero span.character.aerith {background : url(../images2/sec03_img_aerith.png) no-repeat;}
#ff7-characters div.scroll-element.hero span.character.tifa {background  : url(../images2/sec03_img_tifa.png) no-repeat;}
#ff7-characters div.scroll-element.hero span.character.barrett {background  : url(../images2/sec03_img_barrett.png) no-repeat;}
#ff7-characters div.scroll-element.hero span.character.yuffie {background  : url(../images2/sec03_img_yuffie.png) no-repeat;}
#ff7-characters div.scroll-element.hero span.character.cid {background  : url(../images2/sec03_img_cid.png) no-repeat;}
#ff7-characters div.scroll-element.hero span.character.vincent {background  : url(../images2/sec03_img_vincent.png) no-repeat;}
#ff7-characters div.scroll-element.hero span.character.redxiii {background  : url(../images2/sec03_img_redxiii.png) no-repeat;}
#ff7-characters div.scroll-element.hero span.character.caitsith {background  : url(../images2/sec03_img_caitsith.png) no-repeat;}
#ff7-characters div.scroll-element.hero span.character.sephiroth {background  : url(../images2/sec03_img_sephiroth.png) no-repeat;}

/** media **/

#ff7-media {
	height: 1100px;
}
#ff7-media h3{
	margin-top: 30px;
}

#ff7-media div.inner-section {
	width: 100%;
	margin: 99px 0 0;
}

#ff7-media div.carousel {
	height: 450px;
	width: 100%;
	overflow: hidden;
	margin-top: 31px;
}

#ff7-media div.carousel ul {
	width: 9999px;
	height: 450px;
}

#ff7-media div.carousel ul li {
	position: relative;
	width: 200px;
	height: 100%;
    cursor: pointer;

    transition: width 250ms ease;
	-moz-transition: width 250ms ease;
	-webkit-transition: width 250ms ease;
	-o-transition: width 250ms ease;
	display: block;
	float: left;
}

#ff7-media div.carousel ul li a,
#ff7-media div.carousel ul li span.overlay {
	position: absolute;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
}

#ff7-media div.carousel ul li:hover {
	width: 600px;
}

#ff7-media div.carousel ul li span.overlay {
	background-color: rgba(0,0,0,0.7);
	display: block;
	width:100%;
	height:100%;

    transition: width background-color 250ms ease;
 	-moz-transition: width background-color 250ms ease;
	-webkit-transition: width background-color 250ms ease;
	-o-transition: width background-color 250ms ease;
}


#ff7-media div.carousel ul li:hover span.overlay {
	background-color: transparent;
	background-image: url(../images/media_enlarge.png);
	background-position: center;
	background-repeat: no-repeat;
}

#ff7-media div.carousel ul li:hover span.overlay.video {
	background-image: url(../images/media_play.png);
}

/** ff7-downloads **/
#ff7-downloads {
	height: 1100px;
	position: relative;
}
#ff7-downloads h2{
	text-align: center;
}
#ff7-downloads h3{
	margin-top: 29px;
	text-align: center;
}
#ff7-downloads div.scroll-element.desc,
#ff7-downloads div.scroll-element.desc li {
	height: 401px;
	width: 648px;
}

#ff7-downloads div.scroll-element.desc {
	top: 133px;
	left: 71px;
	border: solid 5px white;
}

#ff7-downloads div.scroll-element.desc li.cloud{background-image: url(../images/downloads_wallpaper_cloud.jpg);}
#ff7-downloads div.scroll-element.desc li.barrett{background-image : url(../images/downloads_wallpaper_barrett.jpg);}
#ff7-downloads div.scroll-element.desc li.tifa{background-image : url(../images/downloads_wallpaper_tifa.jpg);}
#ff7-downloads div.scroll-element.desc li.redxiii{background-image : url(../images/downloads_wallpaper_redxiii.jpg);}
#ff7-downloads div.scroll-element.desc li.sephiroth{background-image : url(../images/downloads_wallpaper_sephiroth.jpg);}
#ff7-downloads div.scroll-element.desc li.aerith{background-image : url(../images/downloads_wallpaper_aerith.jpg);}

#ff7-downloads div.scroll-element.title {
	top: 133px;
	left: 743px;
	position: absolute;
}

#ff7-downloads div.scroll-element.title,
#ff7-downloads div.scroll-element.title ul li {
	width: 237px;
	height: 411px;
}
#ff7-downloads div.scroll-element.title ul.data li {
	float: none;
	height: 48px;
	margin: 0 0 2px 0;
	display: block;
}

#ff7-downloads div.scroll-element.title ul.data li.name {
	height: 263px;
}
#ff7-downloads div.scroll-element.hero,
#ff7-downloads div.scroll-element.hero span.character {
	height: 600px;
	width: 1800px;
	background-repeat: no-repeat;
	left: -470px;
	background-position: center center;
}

#ff7-downloads div.scroll-element.hero {
	bottom: 0;
	overflow: hidden;
	background-position: center center no-repeat;
}

#ff7-downloads div.scroll-element.hero span.character {
    display: inline-block;
	*display: inline;
	zoom: 1;
}


#ff7-downloads div.scroller {
	top: 682px;
	/*left: 34px;*/
}

#ff7-downloads div.scroller,
#ff7-downloads div.scroller ul {
	height: 97px;
	width: 970px;
}

#ff7-downloads div.scroller li,
#ff7-downloads div.scroller li span {
	display: block;
	width:156px;
	height: 96px;
}

#ff7-downloads div.scroller li {
    float:left;
    position:relative;
    border-left: 5px solid transparent;
}

#ff7-downloads div.scroller li span {
	border: 3px solid white;
	background-size: 150px 92px;
    box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
    transition: all 150ms ease;
 	-moz-transition: all 150ms ease;
	-webkit-transition: all 150ms ease;
	-o-transition: all 150ms ease;
    position:absolute;
    z-index: 1;
    margin:0;
    overflow: hidden;
}

#ff7-downloads div.scroller li.big span,
#ff7-downloads div.scroller li:hover span {
	width: 196px;
	height: 121px;
	background-size: 190px 116px;
    z-index: 2;
	margin: -14px -23px;
   	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	-moz-box-shadow:    2px 2px 2px rgba(0,0,0,0.3);
}

#ff7-downloads div.scroller li.cloud span {background-image : url(../images/downloads_thumb_cloud.jpg);}
#ff7-downloads div.scroller li.barrett span {background-image : url(../images/downloads_thumb_barrett.jpg);}
#ff7-downloads div.scroller li.tifa span {background-image : url(../images/downloads_thumb_tifa.jpg);}
#ff7-downloads div.scroller li.redxiii span {background-image : url(../images/downloads_thumb_redxiii.jpg);}
#ff7-downloads div.scroller li.sephiroth span {background-image : url(../images/downloads_thumb_sephiroth.jpg);}
#ff7-downloads div.scroller li.aerith span{background-image : url(../images/downloads_thumb_aerith.jpg);}

#ff7-downloads div.scroll-element.hero span.character.cloud {background-image: url(../images/downloads_bg_cloud.jpg);}
#ff7-downloads div.scroll-element.hero span.character.barrett {background-image: url(../images/downloads_bg_barrett.jpg);}
#ff7-downloads div.scroll-element.hero span.character.tifa {background-image: url(../images/downloads_bg_tifa.jpg);}
#ff7-downloads div.scroll-element.hero span.character.redxiii {background-image: url(../images/downloads_bg_redxiii.jpg);}
#ff7-downloads div.scroll-element.hero span.character.sephiroth {background-image  : url(../images/downloads_bg_sephiroth.jpg);}
#ff7-downloads div.scroll-element.hero span.character.aerith {background-image : url(../images/downloads_bg_aerith.jpg);}

/** ff7-spec **/
#ff7-spec {
	height: 1100px;
}
#ff7-spec h2{
	text-align: center;
}
#ff7-spec .inner{
	width: 674px;
	height: 522px;
	margin: 25px auto 20px;
	background: url(../images2/sec06_bgBox01.png) left top no-repeat;
	position: relative;
}
#ff7-spec .inner ul.n01{
	width: 497px;
	height: 174px;
	left: 88px;
	top: 13px;
	position: absolute;
}
#ff7-spec .inner ul.n01 li{
	height: 29px;
	display: block;
	float: none;
}
#ff7-spec .inner ul.n01 li span img{
	vertical-align: top;
	margin-top: 5px;
}
#ff7-spec .inner .n02{
	left: 37px;
	top: 223px;
	position: absolute;
}
#ff7-spec .inner .n03 {
	width: 565px;
	height: 117px;
	left: 54px;
	top: 374px;
	position: absolute;
}
#ff7-spec .inner .n03 li{
	display: block;
	float: none;
	text-align: center;
}
#ff7-spec .inner .n04{
	left: 37px;
	top: 310px;
	position: absolute;
}
#ff7-spec .inner .n04 span img{
	vertical-align: top;
	margin-bottom: -5px;
	margin-left: 9px;
}

/** ff7-bonus **/
#ff7-bonus {
	height: 1100px;
}
#ff7-bonus h2{
	text-align: center;
}
#ff7-bonus h3{
	margin-top: 29px;
	text-align: center;
}
#ff7-bonus a {
	color: #56dcde;
}
#ff7-bonus a:hover {
	text-decoration: underline;
}
#ff7-bonus .inner{
	width: 980px;
	height: 637px;
	margin: 29px auto 0;
	color: #fff;
}
#ff7-bonus .inner p{
	line-height: 1.6;
}
#ff7-bonus .inner .n01{
	width: 980px;
	height: 405px;
	background: url(../images2/sec07_bgBox01.png) left top no-repeat;
	position: relative;
}
#ff7-bonus .inner .n01 .box{
	width: 542px;
	height: 330px;
	top: 37px;
	left: 36px;
	position: absolute;
}
#ff7-bonus .inner .n01 .schedule{
	width: 385px;
	height: 125px;
	margin-top: 17px;
	padding: 17px 0 0 25px;
	background: url(../images2/sec07_bgBox03.png) left top no-repeat;
}
#ff7-bonus .inner .n01 .schedule p{
	float: left;
	margin-right: 26px;
}
#ff7-bonus .inner .n01 .schedule table{
	width: 250px;
}

#ff7-bonus .inner .n01 .schedule td{
	padding-bottom: 11px;
}

#ff7-bonus .inner .n01 .linkBtn{
	top: 338px;
	right: 26px;
	position: absolute;
}

#ff7-bonus .inner .n02{
	width: 980px;
	height: 232px;
	background: url(../images2/sec07_bgBox02.png) left top no-repeat;
	position: relative;
}
#ff7-bonus .inner .n02 .box{
	width: 483px;
	height: 165px;
	top: 30px;
	left: 270px;
	position: absolute;
}

/** ff7-product **/
#ff7-product {
	height: 2020px;
}
#ff7-product h2{
	text-align: center;
}
#ff7-product h3{
	margin-top: 29px;
	text-align: center;
}
#ff7-product .innerTop{
	width: 980px;
	min-height: 322px;
	margin-top: 29px;
	background: url(../images2/sec08_bgBox_top.png) left top no-repeat;
}
#ff7-product .innerTop .wrap{
	padding: 39px 48px 0;
}
#ff7-product .innerTop .txt{
	margin-top: 10px;
	line-height: 1.5;
	font-size: 14px;
}
#ff7-product .innerProducts{
	width: 980px;
	margin-top: 29px;
	padding-bottom: 27px;
	border-top: 1px solid #53857f;
	border-bottom: 1px solid #202a26;
	background: url(../images2/sec08_bgBox_mid.png) left top repeat-y;
}
#ff7-product .innerProducts h4{
	text-align: center;
}
#ff7-product .innerProducts .details{
	margin: 21px auto 0;
	width: 880px;
/*	padding: 0 48px;*/
	clear: both;
}
#ff7-product .innerProducts .details:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}

#ff7-product .innerProducts .details .sub{
	width: 263px;/*205px*/
	padding: 10px 0;
	margin-left: 44px;/*21px*/
	float: left;
/*	background: url(../images2/sec08_bgBox_sub.png) left top no-repeat;*/
}
#ff7-product .innerProducts .details .sub:first-child{
	margin-left: 0;
}
#ff7-product .innerProducts .details .sub.last{
	margin-right: 0px;
}
#ff7-product .innerProducts .details .sub li,
#ff7-product .innerProducts .details .sub dd{
	display: block;
	float: none;
	font-size: 12px;
	padding: 5px 0;
/*	padding: 5px 14px;*/
}
#ff7-product .innerProducts .details .sub li span{
	margin-top: -16px;
	margin-left: 128px;
	display: block;
}
#ff7-product .innerProducts .details .sub li.img img,
#ff7-product .innerProducts .details .sub dt.img img{
	border: 1px solid #859b9b;
}
#ff7-product .innerProducts .details .sub li.img.blank img{
	border: none;
}
#ff7-product .innerProducts .details .sub li.name{
	padding-bottom: 8px;
	margin-bottom: 6px;
	border-bottom: 1px solid #56dcde;
/*	background: url(../images2/sec08_line01.gif) left bottom repeat-x;*/
}
#ff7-product .innerProducts .details .sub li.name a,
#ff7-product .innerProducts .details .sub dd.name a{
	line-height: 1.5;
	color: #56dcde;
}
#ff7-product .innerProducts .details .sub li.name a:hover,
#ff7-product .innerProducts .details .sub dd.name a:hover{
	text-decoration: underline;
}

#ff7-product .btnOther{
	margin-top: 25px;
	text-align: center;
	clear: both;
}
#ff7-product .innerProducts .details dl.sub{
	width:100%;
}
#ff7-product .innerProducts .details .sub dt{
	float: left;
}
#ff7-product .innerProducts .details .sub dd{
	margin-left: 195px;
	line-height: 1.5;
}
#ff7-product .innerProducts .details .sub dd.name{
	font-size: 19px;
	font-weight: bold;
	border-bottom: 1px solid #56dcde;
}