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

  chn.css

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


/************************************************************************
  header
************************************************************************/
header h1 { width:calc(914px /2); height:calc(471px /2); top:135px; left:-11px; }
#pv { top:343px; }
#update { width:calc(758px /2); top:548px; left:43px; }

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

/* ============ smart phone ============ */
@media screen and (max-width:750px){
header h1 { width:calc(654/750*100vw); height:calc(397/750*100vw); top:calc(484/750*100vw); left:0; }
#pv { top:calc(816/750*100vw); }
#update { width:calc(524/750*100vw); top:calc(1021/750*100vw); left:0; }

}
/************************************************************************
  #introduction
************************************************************************/
#introduction h3 { width:calc(1152px /2); }
#introduction p.txt { width:calc(925px /2); }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#introduction h3 { width:calc(676/750*100vw); }
#introduction p.txt { width:calc(545/750*100vw); }
}
/************************************************************************
  #information
************************************************************************/
#information .left p.title { margin-bottom:20px; width:241px; }

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

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

/* #other-characters */
#other-characters h3 { width:calc(1091px /2); }

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

/* #other-characters */
#other-characters h3 { width:calc(610/750*100vw); }

p.tales-of-alise { display:none; }
p.tales-of-symphonia { display:none; }
a.btn-play { top:calc(1317/750*100vw); left:calc(43/750*100vw); }
}
/************************************************************************
  #chara-001
************************************************************************/
#chara-001 h3 { width:calc(481px /2); height:calc(150px /2); top:570px; left:46px; }
#chara-001 h4 { width:calc(714px /2); height:calc(40px /2); top:542px; left:46px; }
#chara-001 p.lines { width:calc(916px /2); height:calc(196px /2); top:266px; left:41px; }
#chara-001 .chara-cv { top:654px; left:46px; }
#chara-001 .chara-cv a { width:calc(337px /2); height:calc(69px /2); }

#chara-001 p.sd { top:478px; left:362px; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#chara-001 h3 { width:calc((673/2)/750*100vw); height:calc((210/2)/750*100vw); top:calc(1126/750*100vw); left:calc(58/750*100vw); }
#chara-001 h4 { width:calc(524/750*100vw); height:calc(29/750*100vw); top:calc(1082/750*100vw); left:calc(58/750*100vw); }
#chara-001 p.lines { width:calc((986/2)/750*100vw); height:calc((206/2)/750*100vw); top:calc(914/750*100vw); left:calc(22/750*100vw); }
#chara-001 .chara-cv { top:calc(1250/750*100vw); left:calc(58/750*100vw); }
#chara-001 .chara-cv a { width:calc(236/750*100vw); height:calc(48/750*100vw); }

#chara-001 p.sd { top:calc(1025/750*100vw); left:calc(526/750*100vw); }
}
/************************************************************************
  #chara-002
************************************************************************/
#chara-002 h3 { width:calc(312px /2); height:calc(148px /2); top:570px; left:46px; }
#chara-002 h4 { width:calc(536px /2); height:calc(40px /2); top:541px; left:46px; }
#chara-002 p.lines { width:calc(976px /2); height:calc(196px /2); top:266px; left:40px; }
#chara-002 .chara-cv { top:654px; left:46px; }
#chara-002 .chara-cv a { width:calc(337px /2); height:calc(69px /2); }

#chara-002 p.sd { top:487px; left:217px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#chara-002 h3 { width:calc((437/2)/750*100vw); height:calc((207/2)/750*100vw); top:calc(1127/750*100vw); left:calc(58/750*100vw); }
#chara-002 h4 { width:calc(396/750*100vw); height:calc(29/750*100vw); top:calc(1082/750*100vw); left:calc(50/750*100vw); }
#chara-002 p.lines { width:calc((1049/2)/750*100vw); height:calc((196/2)/750*100vw); top:calc(917/750*100vw); left:calc(48/750*100vw); }
#chara-002 .chara-cv { top:calc(1251/750*100vw); left:calc(58/750*100vw); }
#chara-002 .chara-cv a { width:calc(236/750*100vw); height:calc(48/750*100vw); }

#chara-002 p.sd { top:calc(1038/750*100vw); left:calc(417/750*100vw); }
}
/************************************************************************
  #chara-003
************************************************************************/
#chara-003 h3 { width:calc(462px /2); height:calc(150px /2); top:570px; left:46px; }
#chara-003 h4 { width:calc(606px /2); height:calc(40px /2); top:542px; left:46px; }
#chara-003 p.lines { width:calc(710px /2); height:calc(196px /2); top:266px; left:64px; }
#chara-003 .chara-cv { top:654px; left:46px; }
#chara-003 .chara-cv a { width:calc(337px /2); height:calc(69px /2); }

#chara-003 p.sd { top:493px; left:331px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#chara-003 h3 { width:calc((664/2)/750*100vw); height:calc((210/2)/750*100vw); top:calc(1129/750*100vw); left:calc(56/750*100vw); }
#chara-003 h4 { width:calc(442/750*100vw); height:calc(29/750*100vw); top:calc(1080/750*100vw); left:calc(56/750*100vw); }
#chara-003 p.lines { width:calc((746/2)/750*100vw); height:calc((200/2)/750*100vw); top:calc(914/750*100vw); left:calc(73/750*100vw); }
#chara-003 .chara-cv { top:calc(1251/750*100vw); left:calc(56/750*100vw); }
#chara-003 .chara-cv a { width:calc(236/750*100vw); height:calc(48/750*100vw); }

#chara-003 p.sd { top:calc(1045/750*100vw); left:calc(492/750*100vw); }
}
/************************************************************************
  #chara-004
************************************************************************/
#chara-004 h3 { width:calc(473px /2); height:calc(149px /2); top:570px; left:46px; }
#chara-004 h4 { width:calc(559px /2); height:calc(40px /2); top:542px; left:46px; }
#chara-004 p.lines { width:calc(746px /2); height:calc(196px /2); top:265px; left:42px; }
#chara-004 .chara-cv { top:654px; left:46px; }
#chara-004 .chara-cv a { width:calc(337px /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((660/2)/750*100vw); height:calc((209/2)/750*100vw); top:calc(1128/750*100vw); left:calc(54/750*100vw); }
#chara-004 h4 { width:calc(408/750*100vw); height:calc(29/750*100vw); top:calc(1080/750*100vw); left:calc(54/750*100vw); }
#chara-004 p.lines { width:calc((746/2)/750*100vw); height:calc((200/2)/750*100vw); top:calc(913/750*100vw); left:calc(54/750*100vw); }
#chara-004 .chara-cv { top:calc(1251/750*100vw); left:calc(54/750*100vw); }
#chara-004 .chara-cv a { width:calc(236/750*100vw); height:calc(48/750*100vw); }

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

#feature article#feature-001 h3 { width:calc(266px /2); }
#feature article#feature-002 h3 { width:calc(348px /2); }
#feature article#feature-003 h3 { width:calc(266px /2); }
#feature article#feature-004 h3 { width:calc(410px /2); }
#feature article#feature-005 h3 { width:calc(427px /2); }

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

#feature article#feature-001 h3 { width:calc((314/2)/750*100vw); }
#feature article#feature-002 h3 { width:calc((429/2)/750*100vw); }
#feature article#feature-003 h3 { width:calc((326/2)/750*100vw); }
#feature article#feature-004 h3 { width:calc((491/2)/750*100vw); }
#feature article#feature-005 h3 { width:calc((516/2)/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 h2 { width:calc(302/750*100vw); }

#movie ul li:nth-child(1) h3 { width:calc((784/2)/750*100vw); }
#movie ul li:nth-child(2) h3 { width:calc((1018/2)/750*100vw); }

}