/************************************************************************

  eng.css

************************************************************************/


/************************************************************************
  header
************************************************************************/
header h1 { width:calc(982px /2); height:calc(439px /2); top:135px; left:-14px; }
#pv { top:322px; }
#update { width:calc(770px /2); top:526px; left:40px; }

.dl-btn-steam  { width:350px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
header h1 { width:calc(745/750*100vw); height:calc(375/750*100vw); top:calc(484/750*100vw); left:0; }
#pv { width:calc(342/750*100vw); height:calc(216/750*100vw); top:calc(786/750*100vw); }
#update { width:calc(551/750*100vw); top:calc(991/750*100vw); left:0; }

}
/************************************************************************
  #introduction
************************************************************************/
#introduction h3 { width:calc(1546px /2); }
#introduction p.txt { width:calc(909px /2); height:calc(1021px /2); }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#introduction h3 { margin-bottom:calc(40/750*100vw); width:calc(739/750*100vw); height:calc(158/750*100vw); }
#introduction p.txt { width:calc(455/750*100vw); height:calc(511/750*100vw); }
}

/************************************************************************
  #information
************************************************************************/
#information .left p.title { margin-bottom:20px; width:241px; }

/************************************************************************
  #character
************************************************************************/
#character h2 { width:calc(850px /2); }

p.tales-of-alise { top:403px; left:27px; }
p.tales-of-symphonia { height:calc(232px /2); top:400px; left:24px; }
a.btn-play { top:707px; left:33px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#character h2 { width:calc(394/750*100vw); }
p.tales-of-alise { display:none; }
p.tales-of-symphonia { display:none; }
a.btn-play { top:calc(1339/750*100vw); left:calc(43/750*100vw); }

}
/************************************************************************
  #chara-001
************************************************************************/
#chara-001 h3 { width:calc(533px /2); height:calc(154px /2); top:576px; left:45px; }
#chara-001 h4 { width:calc(559px /2); height:calc(82px /2); top:516px; left:45px; }
#chara-001 p.lines { width:calc(900px /2); height:calc(213px /2); top:258px; left:41px; }
#chara-001 .chara-cv { top:662px; left:45px; }
#chara-001 .chara-cv a { width:calc(448px /2); height:calc(69px /2); }

#chara-001 p.sd { top:470px; left:307px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#chara-001 h3 { width:calc((687/2)/750*100vw); height:calc((198/2)/750*100vw); top:calc(1173/750*100vw); left:calc(50/750*100vw); }
#chara-001 h4 { width:calc(436/750*100vw); height:calc(64/750*100vw); top:calc(1078/750*100vw); left:calc(50/750*100vw); }
#chara-001 p.lines { width:calc((1033/2)/750*100vw); height:calc((231/2)/750*100vw); top:calc(905/750*100vw); left:calc(25/750*100vw); }
#chara-001 .chara-cv { top:calc(1285/750*100vw); left:calc(50/750*100vw); }
#chara-001 .chara-cv a { width:calc(277/750*100vw); height:calc(42/750*100vw); }

#chara-001 p.sd { top:calc(1043/750*100vw); left:calc(495/750*100vw); }
}
/************************************************************************
  #chara-002
************************************************************************/
#chara-002 h3 { width:calc(584px /2); height:calc(127px /2); top:578px; left:45px; }
#chara-002 h4 { width:calc(660px /2); height:calc(89px /2); top:514px; left:45px; }
#chara-002 p.lines { width:calc(630px /2); height:calc(146px /2); top:270px; left:109px; }
#chara-002 .chara-cv { top:662px; left:45px; }
#chara-002 .chara-cv a { width:calc(492px /2); height:calc(69px /2); }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#chara-002 h3 { width:calc((743/2)/750*100vw); height:calc((164/2)/750*100vw); top:calc(1173/750*100vw); left:calc(51/750*100vw); }
#chara-002 h4 { width:calc(511/750*100vw); height:calc(68/750*100vw); top:calc(1079/750*100vw); left:calc(51/750*100vw); }
#chara-002 p.lines { width:calc((762/2)/750*100vw); height:calc((166/2)/750*100vw); top:calc(926/750*100vw); left:calc(90/750*100vw); }
#chara-002 .chara-cv { top:calc(1284/750*100vw); left:calc(51/750*100vw); }
#chara-002 .chara-cv a { width:calc(305/750*100vw); height:calc(42/750*100vw); }

#chara-002 p.sd { top:calc(1037/750*100vw); left:calc(421/750*100vw); }
}
/************************************************************************
  #chara-003
************************************************************************/
#chara-003 h3 { width:calc(402px /2); height:calc(153px /2); top:578px; left:45px; }
#chara-003 h4 { width:calc(540px /2); height:calc(94px /2); top:514px; left:45px; }
#chara-003 p.lines { width:calc(744px /2); height:calc(222px /2); top:253px; left:77px; }
#chara-003 .chara-cv { top:662px; left:45px; }
#chara-003 .chara-cv a { width:calc(594px /2); height:calc(69px /2); }

#chara-003 p.sd { top:485px; left:353px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#chara-003 h3 { width:calc((518/2)/750*100vw); height:calc((198/2)/750*100vw); top:calc(1171/750*100vw); left:calc(50/750*100vw); }
#chara-003 h4 { width:calc(399/750*100vw); height:calc(69/750*100vw); top:calc(1079/750*100vw); left:calc(51/750*100vw); }
#chara-003 p.lines { width:calc((856/2)/750*100vw); height:calc((240/2)/750*100vw); top:calc(906/750*100vw); left:calc(50/750*100vw); }
#chara-003 .chara-cv { top:calc(1285/750*100vw); left:calc(50/750*100vw); }
#chara-003 .chara-cv a { width:calc(368/750*100vw); height:calc(42/750*100vw); }

#chara-003 p.sd { top:calc(1045/750*100vw); left:calc(472/750*100vw); }
}
/************************************************************************
  #chara-004
************************************************************************/
#chara-004 h3 { width:calc(516px /2); height:calc(127px /2); top:578px; left:45px; }
#chara-004 h4 { width:calc(619px /2); height:calc(82px /2); top:516px; left:46px; }
#chara-004 p.lines { width:calc(524px /2); height:calc(146px /2); top:270px; left:109px; }
#chara-004 .chara-cv { top:662px; left:45px; }
#chara-004 .chara-cv a { width:calc(472px /2); height:calc(69px /2); }

#chara-004 p.sd { top:477px; left:337px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#chara-004 h3 { width:calc((664/2)/750*100vw); height:calc((164/2)/750*100vw); top:calc(1172/750*100vw); left:calc(51/750*100vw); }
#chara-004 h4 { width:calc(483/750*100vw); height:calc(64/750*100vw); top:calc(1078/750*100vw); left:calc(49/750*100vw); }
#chara-004 p.lines { width:calc((601/2)/750*100vw); height:calc((166/2)/750*100vw); top:calc(926/750*100vw); left:calc(114/750*100vw); }
#chara-004 .chara-cv { top:calc(1284/750*100vw); left:calc(51/750*100vw); }
#chara-004 .chara-cv a { width:calc(292/750*100vw); height:calc(42/750*100vw); }

#chara-004 p.sd { top:calc(1042/750*100vw); left:calc(511/750*100vw); }
}
/************************************************************************
  #feature
************************************************************************/
#feature h2 { width:calc(618px /2); }

#feature article#feature-001 h3 { width:calc(460px /2); }
#feature article#feature-002 h3 { width:calc(558px /2); }
#feature article#feature-003 h3 { width:calc(191px /2); }
#feature article#feature-004 h3 { width:calc(769px /2); }
#feature article#feature-005 h3 { width:calc(512px /2); }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#feature h2 { width:calc(471/750*100vw); }

#feature article#feature-001 h3 { width:calc(293/750*100vw); }
#feature article#feature-002 h3 { width:calc(355/750*100vw); }
#feature article#feature-003 h3 { width:calc(102/750*100vw); }
#feature article#feature-004 h3 { width:calc(527/750*100vw); }
#feature article#feature-005 h3 { width:calc(325/750*100vw); }
}
/************************************************************************
  #requirement
************************************************************************/
#requirement h2 { width:calc(932px /2); }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#requirement h2 { width:calc(471/750*100vw); }
}
/************************************************************************
  #movie
************************************************************************/
#movie {  display:block; }
#movie ul li:nth-child(1) h3 { width:calc(872px /2); }
#movie ul li:nth-child(2) h3 { width:calc(960px /2); }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#movie ul li:nth-child(1) h3 { width:calc((1142/2)/750*100vw); }
#movie ul li:nth-child(2) h3 { width:calc((1298/2)/750*100vw); }
}