@charset 'UTF-8';

body { font-family: 'Plantagenet Cherokee', serif; }


/************************************************************************
  Parent StyleSheet path => /tales-of/css/style.css
************************************************************************/

/************************************************************************
  header
************************************************************************/
header { background: url(../img/main_image.jpg) no-repeat top center; background-color: #FFF; }
/* ============ smart phone ============ */
/* ============ smart phone ============ */
@media screen and (max-width:750px){
header { background-image: url(../img/main_image_sp.png); background-size: 100% auto;}
}

/************************************************************************
  #movie
************************************************************************/
#update { margin:auto; width:460px; height:83px; background:url('../img/update.png') no-repeat; top:-8px; }
#movie a {background-image: url(../img/movie.png); background-size: contain;}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#update { width:calc(584/750*100vw); height:calc(91/750*100vw); background-image:url('../img/update.png'); background-size:100% auto; top:-2px;}
}

/************************************************************************
  #DL-btn
************************************************************************/
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#DL-btn .btn-app-store a { background:url('../img/btn_app_store.png') no-repeat; background-size:100% auto; }
#DL-btn .btn-google-play a { background:url('../img/btn_google_play.png') no-repeat; background-size:100% auto; }
}

/************************************************************************
  nav#menu
************************************************************************/
.nav-introduction a { background-image:url('../img/nav_introduction_off.png'); }
.nav-character a { background-image:url('../img/nav_character_off.png'); }
.nav-new-feature a { background-image:url('../img/nav_new_feature_off.png'); }
.nav-requirements a { background-image:url('../img/nav_requirements_off.png'); }
.nav-campaign a { background-image:url('../img/nav_campaign_off.png'); }

/* hover */
.nav-introduction a:hover { background-image:url('../img/nav_introduction_on.png'); }
.nav-character a:hover { background-image:url('../img/nav_character_on.png'); }
.nav-new-feature a:hover { background-image:url('../img/nav_new_feature_on.png'); }
.nav-requirements a:hover { background-image:url('../img/nav_requirements_on.png'); }
.nav-campaign a:hover { background-image:url('../img/nav_campaign_on.png'); }

.nav-introduction { background-image:url('../img/nav_introduction_on.png'); }
.nav-character { background-image:url('../img/nav_character_on.png'); }
.nav-new-feature { background-image:url('../img/nav_new_feature_on.png'); }
.nav-requirements { background-image:url('../img/nav_requirements_on.png'); }
.nav-campaign { background-image:url('../img/nav_campaign_on.png'); }

/************************************************************************
  main
************************************************************************/
/* ============ smart phone ============ */
@media screen and (max-width:750px){
main { background: none; }
}

/************************************************************************
  #wrapper
************************************************************************/
#wrapper { background-size:2500px; }
@media screen and (max-width:750px){
#wrapper { background-size: 100%;}
}

/************************************************************************
  #introduction
************************************************************************/
#introduction {padding: 104px 0 120px;}
#introduction h2 { background:url('../img/h2_introduction.png') no-repeat; margin: auto auto 36px;}
#introduction h3 { margin: auto auto 22px; width:410px; height:80px; background:url('../img/h3_introduction.png') no-repeat; }
#introduction p { margin-bottom:1.5em; text-align:center; line-height:1.8888; font-family:serif; font-size:18px; letter-spacing: 0.025em;}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#introduction h2 { background-size: 100% auto; width: calc(304/750*100vw); height: calc(146/750*100vw);}
#introduction h3 { width: calc(476/750*100vw); height: calc(113/750*100vw); background: url(../img/h3_introduction.png) no-repeat; background-size: 100% auto; }
#introduction p { font-size: calc(24/750*100vw);}
}

/************************************************************************
  #character
************************************************************************/
#character h2 { margin:auto auto 40px; width:253px; height:144px; background:url('../img/h2_character.png') no-repeat; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#character h2 { margin: auto auto calc(73/750*100vw); width: calc(253/750*100vw); height: calc(144/750*100vw); background-size: 100% auto;}
.slick-slide .item { height:calc(1060/750*100vw); }
}


/* ====== #cless ====== */
#cless { background-image:url('../img/cless.png'); }

#cless h3 { width:216px; height:72px; background-image:url('../img/cless_h3.png'); top:609px; left:47px; }
#cless h4 { width:399px; height:54px; background-image:url('../img/cless_h4.png'); top:540px; left:47px; }
#cless p.lines { width:545px; height:176px; background-image:url('../img/cless_lines.png'); top:255px; left:0; }
#cless .chara-cv { top:684px; left:41px; }
#cless .chara-cv a { width:211px; height:46px; background-image:url('../img/cless_cv.png'); }
#cless p.text { top:733px; left:29px; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#cless { background: url(../img/cless_sp.png) no-repeat center top; background-size: auto 100%;}
#cless p.lines { width: calc(545/750*100vw); height: calc(176/750*100vw); background-size: 100%; top: calc(546/750*100vw);}
#cless h3 { width: calc(216/750*100vw); height: calc(72/750*100vw); top: calc(945/750*100vw); left: calc(50/750*100vw); transform: scale(0.9); transform-origin: left top;}
#cless h4 { width: calc(399/750*100vw); height: calc(54/750*100vw); background-size: 100% auto; top: calc(880/750*100vw); left: calc(50/750*100vw);}
#cless .chara-cv { top: calc(1010/750*100vw); left: calc(50/750*100vw);}
#cless .chara-cv a { width: calc(211/750*100vw); height: calc(46/750*100vw); background-size: 100% auto;}
}

/* ====== #yuri ====== */
#yuri { background-image:url('../img/yuri.png'); }

#yuri h3 { width:176px; height:66px; background-image:url('../img/yuri_h3.png'); top:612px; left:43px; }
#yuri h4 { width:376px; height:54px; background-image:url('../img/yuri_h4.png'); top:541px; left:47px; }
#yuri p.lines { width:472px; height:113px; background-image:url('../img/yuri_lines.png'); top:295px; left:0; }
#yuri .chara-cv { top:684px; left:41px; }
#yuri .chara-cv a { width:236px; height:46px; background-image:url('../img/yuri_cv.png'); }
#yuri p.text { top:733px; left:29px; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#yuri { background: url(../img/yuri_sp.png) no-repeat center top; background-size: auto 100%;}
#yuri p.lines { width: calc(379/750*100vw); height: calc(113/750*100vw); background-size: 100%; top: calc(546/750*100vw);}
#yuri h3 { width: calc(176/750*100vw); height: calc(66/750*100vw); top: calc(945/750*100vw); left: calc(50/750*100vw); transform: scale(0.9); transform-origin: left top;}
#yuri h4 { width: calc(299/750*100vw); height: calc(50/750*100vw); background-size: 100% auto; top: calc(880/750*100vw); left: calc(50/750*100vw);}
#yuri .chara-cv { top: calc(1010/750*100vw); left: calc(50/750*100vw);}
#yuri .chara-cv a { width: calc(181/750*100vw); height: calc(46/750*100vw); background-size: 100% auto;}
}



/* ====== #milla ====== */
#milla { background-image:url('../img/milla.png'); }

#milla h3 { width:216px; height:68px; background-image:url('../img/milla_h3.png'); top:610px; left:47px; }
#milla h4 { width:373px; height:53px; background-image:url('../img/milla_h4.png'); top:541px; left:47px; }
#milla p.lines { width:621px; height:176px; background-image:url('../img/milla_lines.png'); top:255px; left:0; }
#milla .chara-cv { top:683px; left:41px; }
#milla .chara-cv a { width:238px; height:46px; background-image:url('../img/milla_cv.png'); }
#milla p.text { top:733px; left:29px; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#milla { background: url(../img/milla_sp.png) no-repeat center top; background-size: auto 100%;}
#milla p.lines { width: calc(621/750*100vw); height: calc(176/750*100vw); background-size: 100%; top: calc(546/750*100vw);}
#milla h3 { width: calc(216/750*100vw); height: calc(68/750*100vw); top: calc(945/750*100vw); left: calc(50/750*100vw); transform: scale(0.9); transform-origin: left top;}
#milla h4 { width: calc(373/750*100vw); height: calc(53/750*100vw); background-size: 100% auto; top: calc(880/750*100vw); left: calc(50/750*100vw);}
#milla .chara-cv { top: calc(1010/750*100vw); left: calc(50/750*100vw);}
#milla .chara-cv a { width: calc(238/750*100vw); height: calc(46/750*100vw); background-size: 100% auto;}
}



/* ====== #velvet ====== */
#velvet { background-image:url('../img/velvet.png'); }

#velvet h3 { width:262px; height:68px; background-image:url('../img/velvet_h3.png'); top:608px; left:42px; }
#velvet h4 { width:299px; height:50px; background-image:url('../img/velvet_h4.png'); top:541px; left:47px; }
#velvet p.lines { width:479px; height:113px; background-image:url('../img/velvet_lines.png'); top:295px; left:-50; }
#velvet .chara-cv { top:683px; left:41px; }
#velvet .chara-cv a { width:181px; height:46px; background-image:url('../img/velvet_cv.png'); }
#velvet p.text { top:733px; left:29px; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#velvet { background: url(../img/velvet_sp.png) no-repeat center top; background-size: auto 100%;}
#velvet p.lines { width: calc(545/750*100vw); height: calc(176/750*100vw); background-size: 100%; top: calc(546/750*100vw);}
#velvet h3 { width: calc(216/750*100vw); height: calc(72/750*100vw); top: calc(945/750*100vw); left: calc(50/750*100vw); transform: scale(0.9); transform-origin: left top;}
#velvet h4 { width: calc(399/750*100vw); height: calc(54/750*100vw); background-size: 100% auto; top: calc(880/750*100vw); left: calc(50/750*100vw);}
#velvet .chara-cv { top: calc(1010/750*100vw); left: calc(50/750*100vw);}
#velvet .chara-cv a { width: calc(211/750*100vw); height: calc(46/750*100vw); background-size: 100% auto;}
}



/* ================== #other-character ================== */
#other-character h2 { width: 526px; background-image: url(../img/h2_other_character.png); }
@media screen and (max-width:750px){
#other-character h2 { background-image: url(../img/h2_other_character_sp.png); margin: auto auto calc(73/750*100vw); width: calc(370/750*100vw); height: calc(138/750*100vw); background-size: 100% auto;}
}


/************************************************************************
  #new-feature
************************************************************************/
#new-feature h2 { margin:auto auto 130px; width:314px; height:146px; background-image:url('../img/h2_new_feature.png'); }

#new-feature-01 h3 { width:260px; height:43px; background-image:url('../img/h3_new_feature_01.png'); }
#new-feature-02 h3 { width:98px; height:30px; background-image:url('../img/h3_new_feature_02.png'); }
#new-feature-03 h3 { width:176px; height:43px; background-image:url('../img/h3_new_feature_03.png'); }
#special-skit h3 { margin: auto auto 30px; width: 899px; height: 60px; background-image: url(../img/h3_special_skit.png);}

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#new-feature h2 { margin: auto auto 130px; width: calc(314/750*100vw); height: calc(145/750*100vw); background-size: 100% auto;}
#new-feature-01 h3 { width: calc(260/750*100vw); height: calc(43/750*100vw);}
#new-feature-02 h3 { width: calc(98/750*100vw); height: calc(30/750*100vw);}
#new-feature-03 h3 { width: calc(176/750*100vw); height: calc(43/750*100vw);}
#new-feature ul li#new-feature-01 p.text,
#new-feature ul li#new-feature-02 p.text,
#new-feature ul li#new-feature-03 p.text,
#new-feature-02 h4,
#new-feature ul.disc li { font-size: 14px;}
#new-feature ul.disc { margin-bottom: 1em;}
#special-skit h3 { width: 100%; height: 6em; background: none; border: none; background: #e1eaf5; color: #978a49; display: block; margin: 0 auto; padding-bottom: 30px; margin-bottom: 30px;}
#special-skit h3 span.dp-none { line-height: 1; display: inline; font-size: calc(40/750*100vw);}
}

/************************************************************************
  #requirements
************************************************************************/
#requirements h2 { margin:auto auto 60px; width:330px; height:145px; background-image:url('../img/h2_requirements.png'); }
#requirements ul.mark li::before { width: 8px; height: 8px; position: relative; top: 6px; margin-right: 0.5em; content: ''; background: white; border-radius: 50%;}
#requirements ul.icon li:nth-child(1) { order:1; }
#requirements ul.icon li:nth-child(2) { order:3; }
#requirements ul.icon li:nth-child(3) { order:4; }
#requirements ul.icon li:nth-child(4) { order:2; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#requirements h2 { margin: auto auto calc(63/750*100vw); width: calc(330/750*100vw); height: calc(145/750*100vw); background-size: 100% auto;}
#requirements .note { margin-left: -2em;}
#requirements ul.mark { margin-left: -2em;}
#requirements ul.mark li { font-size: 12px;}
#requirements ul.mark li::before { width: 6px; height: 6px;}
#requirements ul.icon li:nth-child(1) { order:1; }
#requirements ul.icon li:nth-child(2) { order:2; }
#requirements ul.icon li:nth-child(3) { order:3; }
#requirements ul.icon li:nth-child(4) { order:4; }
}

/************************************************************************
  #artist
************************************************************************/
#artist h2 { margin:auto auto 60px; width:355px; height:112px; background-image:url('../img/h2_artist.png'); }
#artist .artistTextRight {
  display: block;
  text-align: right;
  width: 100%;
  font-size: 0.85em;
  margin-top: 1.2em;
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#artist h2 { margin: auto auto calc(50/750*100vw); width: calc(355/750*100vw); height: calc(112/750*100vw); background-size: 100% auto;}
#artist .info p.text { font-size: 12px; color: #494949;}
}




/************************************************************************
  footer
************************************************************************/
footer nav ul li { font-size: 12px; }
p.copyright { font-size: 12px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
.dl-btn ul li.btn-app-store { width:calc(300/750*100vw); height:calc(104/750*100vw); background:url('../img/btn_app_store.png') no-repeat center; background-size:100% auto; left:calc(253/750*100vw); }
.dl-btn ul li.btn-app-store img { display:none; }

.dl-btn ul li.btn-google-play { width:calc(300/750*100vw); height:calc(95/750*100vw); background:url('../img/btn_google_play.png') no-repeat center; background-size:100% auto; left:calc(253/750*100vw); }
.dl-btn ul li.btn-google-play img { display:none; }
footer nav ul li { font-size: 10px; }
p.copyright { font-size: 10px; }
}


/************************************************************************
  .layer_board
************************************************************************/
.layer_board { width:578px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

.layer_board { width:auto; }

}

/************************************************************************/
 /* common */
  /************************************************************************
    sans-serif
  ************************************************************************/
  footer nav ul li,
  p.copyright { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;}

  /************************************************************************
    serif
  ************************************************************************/
  #introduction p,
  #new-feature ul li p.text,
  #new-feature h4,
  #special-skit h3 span.dp-none { font-family: 'Plantagenet Cherokee',serif; letter-spacing: 0.025em;}

  /************************************************************************
    only Style
  ************************************************************************/
  .pc-only { display: block;}
  .sp-only { display: none;}
  @media screen and (max-width:750px){
  .pc-only { display: none;}
  .sp-only { display: block;}
  }
/************************************************************************/
/* END common */