@charset "UTF-8";

/* 
======================================================================================================
	ver1.0 2016.05.25
	**- S.V.N Event Page -**
	 -- Common Style (PC) --
	URL: https://event.ff14-svn.com/collaboration/
	author:Yuhki Delis
======================================================================================================
 */

@import url(basefont.css);
@import url(reset.css);
@import url(all.min.css);
@import url(headhesive.css);

/*====================================================================================================
	For Float(clearfix)
======================================================================================================*/
.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
}
* html .clearfix {
	height: 1em;
	overflow: visible;
}


/*====================================================================================================
	BASE SET
======================================================================================================*/
html,body{
	width: 100%;
	min-width: 1000px;
	-webkit-text-size-adjust: 100%;
}
body {
	position: relative;
	color: #555;
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
}
a {
	color: #34b494;
	text-decoration: none;
	position: relative;
	transition: background-color .3s;
}
a:hover {
	color: #34b494;
	text-decoration: none;
}
header nav a::before,
article a::before,
footer a::before {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #34b494;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
header nav a:hover::before,
article a:hover::before,
footer a:hover::before {
	width: 100%;
}

/* Exclusion */
.shareList a::before,
a.notrl::before { display: none; }


a img { transition: 0.5s; }
a img:hover { opacity: 0.7; }

/* Exclusion */
#eorzeadb_tooltip a img { transition: none !important; }
#eorzeadb_tooltip a img:hover { opacity: 1 !important; }

br				{ letter-spacing: 0; }
br.blank		{ display: none; }

.br-pc { display:block; }
.br-sp { display:none; }

.img_pc, .txt_pc {  }
.img_sp, .txt_sp { display: none; }

.clear {
	font-size: 1px;
	line-height: 1px;
	clear: both;
}

p				{ padding-top: 2em; line-height: 2em; }
p.pnopadding	{ padding-top: 0 !important; }
p.pdhalf		{ padding-top: 0.7em; }

/*====================================================================================================
	Layout: Header
======================================================================================================*/
header{
	position: relative;
	margin: 0 auto;
	padding-top: 30px;
	width: 100%;
/*	height: 100vh;*/
	height: 980px;
	text-align: center;
/*	background: url("../images/bg_header.jpg") no-repeat 50% 0 /cover;*/
	background: #c3e4da;
	overflow: hidden;
	z-index: 0;
}
header .ff14logo {
	margin: 0 auto;
	width: 400px;
	height: 120px;
	background: url("../images/img_ff14logo.png") no-repeat 50% 0;
}
header .subtitle {
	padding: 0;
	color: #333;
	font-size: 26px;
	font-family: 'ModeMinALargeStd-B';
}
header h1{
	margin: 20px auto 15px;
	width: 820px;
	height: 180px;
	background: url("../images/img_mainlogo.png") no-repeat 50% 0;
}
header .head_period {
	margin: 0 auto;
	padding: 0 20px;
	background: #c3e4da;
	border-radius: 100px;
	font-size: 20px;
	font-family: 'ModeMinALargeStd-E';
	width: 550px;
	height: 60px;
	line-height: 60px;
}
header .head_period span {
	font-size: 26px;
	text-decoration: line-through;
}

.icon_acdn_open,
.icon_close {
	display: none;
}
.btn_moreinfo {
	position: absolute;
	top: -20px;
	left: 50%;
	margin-left: 220px;
	width: 160px;
	height: 160px;
}
/* btn_move
------------------------------------------------------------------------------------------------------*/
.btn_move {
	-webkit-animation:btn_move 3s infinite linear alternate;
	animation:btn_move 3s infinite linear alternate;
}
@-webkit-keyframes btn_move { 
	0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
	50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
	100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}
@keyframes btn_move {
	0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
	50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
	100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}

/* Palalax
------------------------------------------------------------------------------------------------------*/
header #plx {
	width: 100%;
/*	height: 100vh;*/
	height: 980px;
	top: 0;
	position: absolute;
	overflow: hidden;
	z-index: -1;
}
header #plx li {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
}
header #plx li .bg {
	background: url("../images/bg_header.jpg") no-repeat 50% 0 /cover;
	bottom: 0;
	position: absolute;
	width: 120%;
	height: 120%;
	left: -10%;
	top: -10%;
}
header #plx li .bg2 {
	background: url("../3.png") no-repeat 50% 0 /cover;
	bottom: 0;
	position: absolute;
	width: 120%;
	height: 120%;
	left: -10%;
	top: -10%;
}
header #plx li .img {
	position: absolute;
	bottom: 80px;
}
header #plx li .img.char01 { left: 50%; margin-left: 680px;}
header #plx li .img.char02 { left: 50%; margin-left: -520px;}
header #plx li .img.char03 { left: 50%; margin-left: 830px;}
header #plx li .img.char04 { left: 50%; margin-left: 278px;}
header #plx li .img.char05 { left: 50%; margin-left: -30px;}
header #plx li .img.char06 { left: 50%; margin-left: -860px;}
header #plx li .img.char07 { left: 50%; margin-left: -356px;}
header #plx li .img.char08 { left: 50%; margin-left: -249px;}
header #plx li .img.char09 { left: 50%; margin-left: 453px;}
header #plx li .img.char10 { left: 50%; margin-left: -960px;}
header #plx li .img.char11 { left: 50%; margin-left: -630px;}
header #plx li .img.char12 { left: 50%; margin-left: 600px;}
header #plx li .img.char13 { left: 50%; margin-left: -429px;}
header #plx li .img.char14 { left: 50%; margin-left: 60px;}
header #plx li .img.char15 { left: 50%; margin-left: -740px;}
header #plx li .img.char16 { left: 50%; margin-left: -150px;}
header #plx li .img.char17 { left: 50%; margin-left: 190px;}
header #plx li .img.char18 { left: 50%; margin-left: 345px;}

header #plx li .txt {
	text-align: center;
	margin-top: 15%;
	color: #fff;
}


/* Navigation Menu
------------------------------------------------------------------------------------------------------*/
nav {
	position: absolute;
	bottom: 50px;
	width: 100%;
	height: 70px;
	background: rgba(0,0,0,0.5);
}
nav ul{
	margin: 25px auto;
	height: 20px;
	text-align: center;
	font-size:0;
}
nav ul li{
	display: inline-block;
	padding: 0 30px;
	height: 20px;
	border-right: 1px solid #fff;
}
nav ul li:last-of-type {
	border-right: 0;
}
nav ul li a {
	font-size: 20px;
	color: #fff;
	line-height: 20px;
}


/*====================================================================================================
	Layout: Main Contents
======================================================================================================*/
/* Main Article and Heading
------------------------------------------------------------------------------------------------------*/
article section {
	position: relative;
	margin: 0 auto;
	padding: 70px 0;
	background: #c3e4da;
}
article h2,
article h3,
article h4 {
	clear: both;
	font-weight: bold;
	text-align: left;
}
article h2 {
	margin: 0 auto;
	font-size: 40px;
	font-family: 'GospelStd-EB';
	width: 1000px;
}
article h2 span {
	font-size: 24px;
	font-family: 'ModeMinALargeStd-B';
}
article h3 {

}
/* Spacer
------------------------------------------------------------------------------------------------------*/
article .block_spacer {
	display: block;
	height: 250px;
	clear: both;
	overflow: hidden;
	background: transparent;
}

/* Event Overview
------------------------------------------------------------------------------------------------------*/
#EventOverview p {
	margin: 0 auto;
	width: 1000px;
}
#EventOverview dl {
	position: relative;
	margin: 50px auto 0;
	width: 900px;
}
#EventOverview dt {
	width: 7em;
	float: left;
}
#EventOverview dd {
	margin-left: 7.5em;
}
#EventOverview dd:after{
	display: block;
	content: "";
	clear: both;
}
#EventOverview dd .fab { font-size: 110%; }


/* Guest
------------------------------------------------------------------------------------------------------*/
#Guest p {
	margin: 0 auto;
	width: 1000px;
}
#Guest ul {
	margin: 1em auto 0;
	width: 1000px;
}
#Guest ul li {
	margin-right: 50px;
	width: 210px;
	height: 280px;
	float: left;
}
#Guest ul li:nth-of-type(4n) {
	margin-right: 0;
}
#Guest ul li a {
	padding-top: 210px;
	width: 210px;
	display: block;
	color: #555;
	font-size: 15px;
}
#Guest ul li a:hover { color: #34b494; }
#Guest ul::after {
	display: block;
	content: "";
	clear: both;
}
#Guest ul li.guest01,
#guest01 .box_profile { background: url("../images/img_guest01.jpg") no-repeat 0 0; }
#Guest ul li.guest02,
#guest02 .box_profile { background: url("../images/img_guest02.jpg") no-repeat 0 0; }
#Guest ul li.guest03,
#guest03 .box_profile { background: url("../images/img_guest03.jpg") no-repeat 0 0; }
#Guest ul li.guest04,
#guest04 .box_profile { background: url("../images/img_guest04.jpg") no-repeat 0 0; }
#Guest ul li.guest05,
#guest05 .box_profile { background: url("../images/img_guest05.jpg") no-repeat 0 0; }
#Guest ul li.guest06,
#guest06 .box_profile { background: url("../images/img_guest06.jpg") no-repeat 0 0; }
#Guest ul li.guest07,
#guest07 .box_profile { background: url("../images/img_guest07.jpg") no-repeat 0 0; }
#Guest ul li.guest08,
#guest08 .box_profile { background: url("../images/img_guest08.jpg") no-repeat 0 0; }
#Guest ul li.guest09,
#guest09 .box_profile { background: url("../images/img_guest09.jpg") no-repeat 0 0; }
#Guest ul li.guest10,
#guest10 .box_profile { background: url("../images/img_guest10.jpg") no-repeat 0 0; }

.con_hide {
	padding: 30px;
	width: 940px;
	min-height: 500px;
	display:none;
}
.con_hide .box_profile{
	padding-left: 250px;
	min-height: 210px;
}
.con_hide .guest_name {
	font-size: 30px;
}
.con_hide .box_url {
	display: inline-block;
	margin-left: 10px;
	padding: 0 30px;
	background: #c3e4da;
	border-radius: 100px;
}
.con_hide .box_url a { color: #34b494; }
.con_hide .box_url a:hover { color: #fff; }

.con_hide .guest_profile {
	padding-top: 1em;
	line-height: 30px;
}
.con_hide .ttl {
	padding-top: 0.5em;
	font-size: 30px;
	display: flex;
	align-items: center;
}
.con_hide .ttl::after {
	content: "";
	flex-grow: 1;
	height: 1px;
	margin-left: .4em;
	background: linear-gradient(90deg, #888, transparent);
}
.con_hide .txt {
	padding-top: 0;
	padding-left: 1em;
	font-family: 'NewCinemaAStd-D';

}


/* Present
------------------------------------------------------------------------------------------------------*/
#Present .ttl {
	margin: 0 auto;
	font-size: 34px;
	line-height: 60px;
	text-align: center;
}
.box_present {
	margin: 0 auto;
	padding-right: 520px;
	width: 480px;
	min-height: 550px;
	background: url("../images/bg_present.jpg") no-repeat 100% 50%;
}

.box_present ul{
	margin-top: 1em;
}
.box_present ul li{
	line-height: 1.5em;
}
.box_present ul li:nth-of-type(1) {
	color: #ec9800;
	font-size: 36px;
	font-weight: bold;
}
.box_present ul li:nth-of-type(2) {
	color: #808080;
	font-size: 30px;
	font-weight: bold;
}
.box_present ul li:nth-of-type(3) {
	color: #a67e4e;
	font-size: 26px;
	font-weight: bold;
}


/* Special
------------------------------------------------------------------------------------------------------*/
#Special .ttl {
	margin: 0 auto;
	padding: 1em 0;
	font-size: 34px;
	line-height: 60px;
	text-align: center;
	font-weight: 900;
}
#Special p {
	margin: 0 auto;
	width: 1000px;
}
#Special .img_secretguest {
	margin: 0 auto;
	width: 1000px;
	height: 550px;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url("../images/img_secret.png") no-repeat 50% 0;
}
.txt_center { text-align: center; }

/* Notice
------------------------------------------------------------------------------------------------------*/
#Notice p,
#Notice ul {
	margin: 0 auto;
	width: 1000px;
}
#Notice ul {
	padding-top: 1em;
}
#Notice ul li {
	text-indent: -1em;
	padding-left: 1.5em;
}
#Notice ul li::before {
	content:"\f00c";
	margin-right: 5px;
}
#Notice ul ul {
	padding: 0 0 .5em;
}
#Notice ul li li::before {
	content:"\f0da";
	font-weight: 900;
}



/* Page To Top
------------------------------------------------------------------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index:1000;
}
#page-top a {
	width: 80px;
	height: 80px;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url("../images/img_btntotop.png") no-repeat 0 0;
}
#page-top a:hover {
	opacity: 0.7;
}

/*====================================================================================================
	Layout: Footer
======================================================================================================*/
footer{
	clear: both;
	position: relative;
	margin: 0 auto;
	padding: 55px 0;
	text-align: center;
	width: 100%;
	background-color: #000;
}
footer .copyright {
	color: #ccc;
	margin: 0 auto;
	padding: 0;
	font-size:14px;
}

/*====================================================================================================
	Common Style
======================================================================================================*/
.img_txt {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
/*====================================================================================================
	Common Style:Template Parts
======================================================================================================*/
.img_pc { display: block; }
.img_sp { display: none !important; }


/* SNS button
------------------------------------------------------------------------------------------------------*/
.shareList {
	position: fixed;
	top: 100px;
	left: 10px;
	margin: 0 auto;
	padding: 0;
	font-family: 'icomoon','Font Awesome 5 Brands','Font Awesome 5 Pro' !important;
	list-style:none;
	width: 42px;
	z-index: 999999;
}
.shareList__item {
	margin-bottom: 5px;
	position: relative;
	background: rgba(255,255,255,0.3);
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align:center;
	font-size: 16px;
	border-radius: 5px;
}
.shareList__item a {
	position: absolute;
	top:0;
	left: 0;
	display: block;
	width: 100%;
	height: 40px;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.shareList .icon-twitter      { border: 1px solid #55acee; }
.shareList .icon-facebook     { border: 1px solid #3b5998; }
.shareList .icon-hatebu       { border: 1px solid #008fde; }
.shareList .icon-pocket       { border: 1px solid #eb4654; }
.shareList .icon-tumblr       { border: 1px solid #36465d; }
.shareList .icon-feedly       { border: 1px solid #6cc655; }
.shareList .icon-pinterest    { border: 1px solid #cb2027; }
.shareList .icon-linkedin     { border: 1px solid #0e76a8; }
.shareList .icon-line         { border: 1px solid #1dcd00; }
.shareList .icon-rss          { border: 1px solid #ff9900; }
.shareList .icon-link         { border: 1px solid #ff9900; }

.shareList .icon-twitter:hover      { background: #cce6fa; }
.shareList .icon-facebook:hover     { background: #c4cde0; }
.shareList .icon-hatebu:hover       { background: #b2ddf5; }
.shareList .icon-pocket:hover       { background: #f9c7cb; }
.shareList .icon-tumblr:hover       { background: #c2c7ce; }
.shareList .icon-feedly:hover       { background: #d3eecc; }
.shareList .icon-pinterest:hover    { background: #efbcbe; }
.shareList .icon-linkedin:hover     { background: #b6d6e5; }
.shareList .icon-line:hover         { background: #bbf0b2; }
.shareList .icon-rss:hover          { background: #ffe0b2; }
.shareList .icon-link:hover         { background: #ffe0b2; }

.icon-twitter:before     { color: #55acee; content: "\ea96"; }
.icon-facebook:before    { color: #3b5998; content: "\ea90"; }
.icon-hatebu:before      { color: #008fde; content: "\e903"; }
.icon-pocket:before      { color: #eb4654; content: "\e902"; }
.icon-tumblr:before      { color: #36465d; content: "\f173"; }
.icon-feedly:before      { color: #6cc655; content: "\e900"; }
.icon-pinterest:before   { color: #cb2027; content: "\ead2"; }
.icon-linkedin:before    { color: #0e76a8; content: "\eaca"; }
.icon-line:before        { color: #1dcd00; content: "\e90a"; }
.icon-rss:before         { color: #ff9900; content: "\ea9b"; }
.icon-link:before        { color: #ff9900; content: "\f0c1"; }



/*====================================================================================================
	** Contents: for font awesome
======================================================================================================*/
.fa,
.fas,
.far,
.fal,
.fab {
	margin-right: .25em;
}

/* Float clear
------------------------------------------------------------------------------------------------------*/
/* ----for float------ */
article:after,
.Footerlink:after,
.box_media:after,
section:after {
	content: "";
	display: block;
	clear: both;
	height: 1px;
	overflow: hidden;
}
/*\*/
* html article,
* html .Footerlink,
* html .box_media,
* html section {
	height: 1em;
	overflow: visible;
}