@import url('animation.css');

@media screen and (min-width:961px) { .spOnly { display:none !important; } }
@media screen and (max-width:960px) { .pcOnly { display:none !important; } }
/************************************************************************
  
************************************************************************/
html { color:#fff; }
img { width:100%; vertical-align:bottom; border:0; }
body { font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",sans-serif; color:#fff; min-height:100vh; font-size:16px; }

* { box-sizing:border-box; }
.pointer-events { pointer-events:none; }

*:focus { outline:none; }

.mb0 { margin-bottom:0 !important; }

/* SP */
@media screen and (max-width:960px){
body{ font-size:3.5vw; }
}
/************************************************************************
  gothic
************************************************************************/
.yu-min { font-family:"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; }
/************************************************************************
  body
************************************************************************/
body { background:url('../img/bg.png') repeat; line-height:1; font-size:0; }

body::before { content:''; width:100%; height:1146px; background:url('../img/bg_fixed_L.png') no-repeat left top; display:block; position:fixed; top:0; left:0; pointer-events:none; z-index:1; }
body::after { content:''; width:100%; height:1065px; background:url('../img/bg_fixed_R.png') no-repeat right top; display:block; position:fixed; top:0; right:0; pointer-events:none; z-index:1; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
body::before { display:none; }
body::after { display:none; }
}
/************************************************************************
  
************************************************************************/
.dp-none { display:none; }
p.img { font-size:0 }
h2 { font-size:0; }

a { color:#b29a3e; }
a:hover { cursor:pointer !important; }
.mb60 { margin-bottom:60px !important; }

a.pe-none { pointer-events:none; }

.flex { display:flex; }

hr { display:none; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
.mb60 { margin-bottom:calc(60px * 0.7) !important; }
}

/************************************************************************
  animation
************************************************************************/
.expand-nomal { opacity:0; }
/************************************************************************
  .zoomin
************************************************************************/
.zoomin { animation:zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }

/*
header h1 { opacity:0; }
header.is-view h1 { opacity:0; transition-delay:0s; animation:zoomIn 1.5s forwards 0s; }

#update { opacity:0; }
header.is-view #update { opacity:0; transition-delay:0s; animation:zoomIn 1.5s forwards 0s; }

#pv { opacity:0; }
header.is-view #pv { opacity:0; transition-delay:0s; animation:zoomIn 1.5s forwards 1s; }

#dl-btn { opacity:0; }
header.is-view #dl-btn { opacity:0; transition-delay:0s; animation:zoomIn 1.5s forwards 2s; }


@keyframes zoomIn {
  0% { opacity:0; transform:scale(0.8); }
 50% { opacity:0; transform:scale(0.8); }
100% { opacity:1; transform:scale(1); }
}

@keyframes copy {
  0% { opacity:0; margin-top:-50px; }
 50% { opacity:0; margin-top:-25px; }
100% { opacity:1; margin-top:0; }
}
*/
/************************************************************************
  #layer_board_area
************************************************************************/
#layer_board_area {  }
#layer_board_area .layer_board { margin:auto !important; width:440px; height:325px; display:flex; justify-content:center; align-items:center; top:0; bottom:0; left:0 !important; right:0; }
#layer_board_area p.text { margin:auto auto 35px; color:#ffffff; line-height:calc(32/20); font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size:20px; }

#another-eden { margin:auto auto 35px; width:calc(866px /2); }

/* #onoff */
#onoff { margin:auto; width:calc(368px /2); height:calc(104px /2); background:url('../img/onoff.png') no-repeat; background-size:100% auto; position:relative; }
#onoff .on { left:21px; }
#onoff .off { left:104px; }
#onoff button { width:60px; height:30px; display:block; position:absolute; top:11px; /*background-color:rgba(255,0,0,0.5);*/ }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#another-eden { width:70%; max-width:433px; height:auto; }
#layer_board_area .layer_board { margin:auto !important; width:auto; height:calc(320/750*100vw); }
#layer_board_area p.text { width:auto; line-height:1.5; font-size:calc(18/750*100vw); }

}
/************************************************************************
  header
************************************************************************/
header { margin-bottom:0; height:800px; background:url('../img/main_image.png') no-repeat top center; background-size:auto 100%; font-size:0; overflow:hidden; position:relative; }
header .contents { position:relative; }

header h1 { width:calc(992px /2); height:calc(469px /2); background:url('../img/logo.png') no-repeat; background-size:100% auto; display:block; position:absolute; top:136px; left:-16px; z-index:5; }

/* #update */
#update { width:calc(792px /2); display:block; position:absolute; top:550px; left:35px; z-index:5; }
#update img { width:100%; height:auto; }

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

header { height:calc(1200/750*100vw); background-image:url('../img/main_image_sp.png'); background-size:100% auto; }
header .contents { margin:0; height:100%; }
header h1 { margin:auto; width:calc((1394/2)/750*100vw); height:calc((794/2)/750*100vw); background-image:url('../img/logo_sp.png'); top:calc(469/750*100vw); right:0; left:0; }

/* #update */
#update { margin:auto; width:calc(544/750*100vw); top:calc(1021/750*100vw); left:0; right:0; }
}
/************************************************************************
  #pv
************************************************************************/
#pv { width:calc(696px /2); /*height:calc(430px /2);*/ position:absolute; top:343px; left:59px; z-index:5; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#pv { margin:auto; width:calc(342/750*100vw); height:calc(212/750*100vw); position:absolute; top:calc(820/750*100vw); right:0; left:0; }

}
/************************************************************************
  #dl-btn
************************************************************************/
#dl-btn { padding:15px; width:380px; background-color:rgba(255,255,255,0.6); border:1px solid #ffffff; position:absolute; top:607px; left:42px; z-index:5; display:flex; flex-wrap:wrap; justify-content:space-between; }


.dl-btn-as { margin-bottom:10px; width:170px; }
.dl-btn-gp { width:170px; }
.dl-btn-wp { width:350px; }

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

#dl-btn { margin:auto; padding:0; width:calc(625/750*100vw); background-color:transparent; border:0; top:calc(1088/750*100vw); right:0; left:0; }
.dl-btn-as { /*margin-bottom:0;*/ width:calc(304/750*100vw); }
.dl-btn-gp { width:calc(304/750*100vw); }

.dl-btn-wp { display:none; }

}
/************************************************************************
  .contents
************************************************************************/
.contents { margin:auto; width:1000px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
.contents { margin:auto calc(30/750*100vw); width:auto; }
}
/************************************************************************
  main
************************************************************************/
main { margin:180px 0 0; padding:0; position:relative; z-index:5; }

/* h2 */
main h2 { margin:auto; }
main h2 img { width:100%; }

/* h3 */
main h3 { margin:auto; }
main h3 img { width:100%; }

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

}
/************************************************************************
  #menu
************************************************************************/
#menu { padding:0; width:100%; height:80px; background:url('../img/bg_menu.png') no-repeat; position:relative; }
#menu::before { content:''; width:100%; height:1px; background:url('../img/border_menu.png') no-repeat; display:block; position:absolute; top:-1px; }
#menu::after { content:''; width:100%; height:1px; background:url('../img/border_menu.png') no-repeat; display:block; position:absolute; bottom:-1px; }

#menu ul { margin:auto; width:1000px; border-left:1px solid rgba(142,133,75,0.3); display:flex; justify-content:space-between; position:absolute; top:0; bottom:0; right:0; left:0; }
#menu ul li { width:calc(332px /2); height:80px; border-right:1px solid rgba(142,133,75,0.3); }

#menu ul li a { width:calc(332px /2); height:80px; background-position:top center; background-size:100% auto; display:block; transition:.3s ease-in-out; }
#menu ul li a img { transition:.3s ease-in-out; display:none; }

#menu ul li.nav-introduction a { background-image:url('../img/nav_introduction_off.png'); }
#menu ul li.nav-character a { background-image:url('../img/nav_character_off.png'); }
#menu ul li.nav-feature a { background-image:url('../img/nav_feature_off.png'); }
#menu ul li.nav-movie a { background-image:url('../img/nav_movie_off.png'); }
#menu ul li.nav-requirement a { background-image:url('../img/nav_requirement_off.png'); }
#menu ul li.nav-fankit a { background-image:url('../img/nav_fankit_off.png'); }

#menu ul li.nav-introduction a:hover { background-image:url('../img/nav_introduction_on.png'); }
#menu ul li.nav-character a:hover { background-image:url('../img/nav_character_on.png'); }
#menu ul li.nav-feature a:hover { background-image:url('../img/nav_feature_on.png'); }
#menu ul li.nav-movie a:hover { background-image:url('../img/nav_movie_on.png'); }
#menu ul li.nav-requirement a:hover { background-image:url('../img/nav_requirement_on.png'); }
#menu ul li.nav-fankit a:hover { background-image:url('../img/nav_fankit_on.png'); }

#menu.fixed-header { position:fixed; top:0; left:0; z-index:500; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#menu { display:none; }
#menu .contents {  }
}
/************************************************************************
  .pagetop
************************************************************************/
#scrollUp { width:calc(268px / 2); height:calc(268px / 2); background:url('../img/btn_top.png') no-repeat; background-size:100% auto; position:fixed; bottom:35px; right:20px; display:none; z-index:3; }
.pagetop a { height:100%; display:block; position:relative; z-index:3; }

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

#scrollUp { display:none !important; }

}
/************************************************************************
  .column
************************************************************************/
.column { margin-top:-150px; padding-top:150px; }

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

.column { margin-top:auto; padding-top:0; }

}
/************************************************************************
  #introduction
************************************************************************/
#introduction { margin:-180px auto 80px; padding-top:180px; height:2150px; background:url('../img/bg_introduction.png') no-repeat center bottom /*#112b52*/; position:relative; font-size:0; }
#introduction::before { content:''; margin:auto; width:100%; height:2150px; background:url('../img/bg_cloud.png') no-repeat bottom center; background-size:100% auto; display:block; position:absolute; bottom:0; }

#introduction .contents { width:100%; position:relative; }
#introduction .contents::before { content:''; width:calc((1114/2)/2000*100vw); height:calc((724/2)/2000*100vw); background:url('../img/introduction_l.png') no-repeat; background-size:100% auto; display:block; position:absolute; top:330px; left:0; }
#introduction .contents::after { content:''; width:calc((1184/2)/2000*100vw); height:calc((740/2)/2000*100vw); background:url('../img/introduction_r.png') no-repeat; background-size:100% auto; display:block; position:absolute; top:770px; right:0; }

#introduction h2 { margin-bottom:60px; width:calc(944px /2); }
#introduction h3 { margin-bottom:60px; width:calc(1076px /2); }
#introduction p.txt { margin:0 auto; width:calc(1019px /2); }
#introduction p.txt img { width:100%; }

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

#introduction { margin-top:0 !important; margin-bottom:0; padding-top:calc(300/750*100vw); height:calc(2300/750*100vw); background-image:url('../img/bg_introduction_sp.png'); background-position:bottom center; background-size:100%  auto; position:relative; }
#introduction .contents { margin:0; }
#introduction::before { height:calc(2300/750*100vw); background-image:url('../img/bg_cloud_sp.png'); background-size:100% auto; }


#introduction h2 { margin-bottom:calc(60/750*100vw); width:calc(505/750*100vw); }
#introduction h3 { margin-bottom:calc(60/750*100vw); width:calc(666/750*100vw); }
#introduction p.txt { margin-bottom:0; width:calc(647/750*100vw); }

#introduction .contents::before { content:''; width:calc((558/2)/750*100vw); height:calc((456/2)/750*100vw); background-image:url('../img/introduction_l_sp.png'); top:calc((-300 + 40)/750*100vw); left:0; }
#introduction .contents::after { content:''; width:calc((586/2)/750*100vw); height:calc((466/2)/750*100vw); background-image:url('../img/introduction_r_sp.png'); top:calc((-300 + 1237)/750*100vw); right:0; }

}
/************************************************************************
  #bg
************************************************************************/

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

}
/************************************************************************
  #character
************************************************************************/
#character { margin-top:-80px; margin-bottom:180px; padding-top:80px; height:2044px; background:url('../img/bg_character.png') no-repeat top center; font-size:0; }
#character h2 { margin-bottom:45px; width:calc(788px /2); }
#character h3 { background-repeat:no-repeat; background-size:100% auto; position:absolute; }

#character .contents { position:relative; }
#character .character { height:876px; background-position:top center; background-repeat:no-repeat; }
#character .txt { background-repeat:no-repeat; background-size:100% auto; position:absolute; }
#character .chara-cv { background-repeat:no-repeat; background-size:100% auto; position:absolute; }
#character .chara-cv:hover { background-size:100% auto; position:absolute; cursor:pointer; }

/* ul.slides-nav */
#character ul.slides-nav { margin-bottom:-82px; display:flex; justify-content:center; position:relative; z-index:10; }
#character ul.slides-nav li { width:calc(282px /2); height:calc(310px /2); }
#character ul.slides-nav li.current { background-size:100% auto; }
#character ul.slides-nav li.current img { background-repeat:no-repeat; display:none; }

#character ul.slides-nav li.current.icon-chara-001 { background-image:url('../img/icon_chara_001_on.png'); }
#character ul.slides-nav li.current.icon-chara-002 { background-image:url('../img/icon_chara_002_on.png'); }
#character ul.slides-nav li.current.icon-chara-003 { background-image:url('../img/icon_chara_003_on.png'); }
#character ul.slides-nav li.current.icon-chara-004 { background-image:url('../img/icon_chara_004_on.png'); }

/* .slide-arrow */
#character .slide-arrow { margin:auto; width:calc(160px /2); height:calc(234px /2); background:no-repeat center; position:absolute; top:0; bottom:0; display:inline-block; z-index:1; }


/* .item */
.item { margin:auto; width:100%; max-width:1000px; height:100%; position:relative; }
.item h3 { background:no-repeat center; background-size:100% auto; position:absolute; transition:0.5s; }
.item h4 { background:no-repeat center; background-size:100% auto; position:absolute; transition:0.5s; }
.item p.lines { background:no-repeat center; background-size:100% auto; position:absolute; transition:0.5s; }
.item .chara-cv { position:absolute; }
.item .chara-cv a { background:no-repeat center; background-size:100% auto; display:block; transition:0.5s; }
.item .chara-cv a:hover { cursor:pointer; }
.item p.text { width:420px; line-height:1.7333; font-family:serif; position:absolute; font-size:16px; }

/* .slides */
.slides { margin-top:-10px; margin-bottom:10px; position:relative; }

/* .slick-slide */
.slick-slide { width:100%; max-width:2000px; }
.slick-slide {  }

/* .slide-arrow */
.slide-arrow { margin:auto; width:162px; height:160px; background:no-repeat center; position:absolute; top:0; bottom:0; display:inline-block; z-index:1; }
.prev-arrow { /*background-image:url('../img/arrow_prev_on.png');*/ left:50px; }
.next-arrow { /*background-image:url('../img/arrow_next_on.png');*/ right:50px; }

/* .tales-of-alise */
p.tales-of-alise { width:calc(436px /2); height:calc(242px /2); background:url('../img/tales_of_arise.png') no-repeat; background-size:100% auto; display:block; position:absolute; top:426px; left:24px; }

/* .tales-of-symphonia */
p.tales-of-symphonia { width:calc(446px /2); height:calc(236px /2); background:url('../img/tales_of_symphonia.png') no-repeat; background-size:100% auto; display:block; position:absolute; top:419px; left:24px; }

/* .btn-play */
a.btn-play { width:calc(376px /2); height:calc(86px /2); background:url('../img/btn_play.png') no-repeat; background-size:100% auto; display:block; position:absolute; top:716px; left:33px; }

/* p.sd */
p.sd { background-repeat:no-repeat; background-size:100% auto; position:absolute; }
p.sd img { display:none; }

/* #other-characters ================== */
#other-characters { margin-top:180px; text-align:center; }
#other-characters h3 { margin:auto auto 60px; width:calc(1091px /2); position:static; }
#other-characters p.pict { margin:auto; width:calc(1574px /2); position:static; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#character { margin-bottom:0; margin-top:-1px !important; padding-top:calc(12/750*100vw) !important; height:calc(2608/750*100vw); background-image:url('../img/bg_character_sp.png'); background-size:100% auto; }

#character .character { height:calc(1414/750*100vw); background-size:100% auto; }
#character h2 { margin-bottom:calc(35/750*100vw); width:calc(421/750*100vw); }

/* ul.slides-nav */
#character ul.slides-nav { margin-bottom:calc(-166/750*100vw); flex-wrap:wrap; }
#character ul.slides-nav li { width:calc(155/750*100vw); height:calc(170/750*100vw); }

/* .slides */
#character .slides { height:calc(1414/750*100vw); /*background-image:url('../img/bg_character_sp.png');*/ background-size:100% auto; }

/* .slick-slide */
.slick-slide { width:100%; background-size:100% auto; }

/* .item */
.slick-slide .item { width:100%; max-width:initial; height:calc(993/750*100vw); }
.slick-slide .item h3 {  }
.slick-slide .item h4 {  }
.slick-slide .item p.text { width:calc(500/750*100vw); line-height:calc(34/22); font-size:calc(22/750*100vw); top:calc(958/750*100vw) !important; left:calc(51/750*100vw) !important; }

/* .slide-arrow */
#character .slide-arrow { margin:auto; width:calc(106/750*100vw); height:calc(155/750*100vw); top:calc(-360/750*100vw); }
.slide-arrow img { width:100%; }
.prev-arrow { left:0; }
.next-arrow { right:0; }

/* #other-characters ================== */
#other-characters { margin-top:calc(140/750*100vw); text-align:center; }
#other-characters h3 { margin-bottom:calc(40/750*100vw); width:calc(610/750*100vw); }
#other-characters p.pict { margin:auto; width:calc((1077/2)/750*100vw); position:static; }



/* .tales-of-alise */
p.tales-of-alise { width:calc((514/2)/750*100vw); height:calc((270/2)/750*100vw); background-image:url('../img/tales_of_arise_sp.png'); top:calc(754/750*100vw); left:calc(16/750*100vw); }

/* .tales-of-symphonia */
p.tales-of-symphonia { width:calc((486/2)/750*100vw); height:calc((240/2)/750*100vw); background-image:url('../img/tales_of_symphonia_sp.png'); top:calc(763/750*100vw); left:calc(17/750*100vw); }

/* .btn-play */
a.btn-play { width:calc(248/750*100vw); height:calc(56/750*100vw); top:calc(1332/750*100vw); left:calc(44/750*100vw); }


}
/************************************************************************
  #chara-001
************************************************************************/
#chara-001 { margin-bottom:-58px; background-image:url('../img/chara_001.png'); transition:0.5s; }

#chara-001 h3 { width:calc(669px /2); height:calc(136px /2); background-image:url('../img/chara_001_h3.png'); top:577px; left:44px; }
#chara-001 h4 { width:calc(680px /2); height:calc(41px /2); background-image:url('../img/chara_001_h4.png'); top:540px; left:44px; }
#chara-001 p.lines { width:calc(871px /2); height:calc(195px /2); background-image:url('../img/chara_001_lines.png'); top:266px; left:40px; }
#chara-001 .chara-cv { top:654px; left:44px; }
#chara-001 .chara-cv a { width:calc(337px /2); height:calc(69px /2); background-image:url('../img/chara_001_cv.png'); }
#chara-001 p.text {  }

#chara-001 p.sd { width:calc(372px /2); height:calc(555px /2); background-image:url('../img/sd_001.png'); top:479px; left:351px;  }

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

#chara-001 { margin-bottom:calc(-70/750*100vw); height:calc(1093/750*100vw); background-image:url('../img/chara_001_sp.png'); }

#chara-001 h3 { width:calc((906/2)/750*100vw); height:calc((163/2)/750*100vw); background-image:url('../img/chara_001_h3_sp.png'); top:calc(1159/750*100vw); left:calc(59/750*100vw); }
#chara-001 h4 { width:calc(489/750*100vw); height:calc(29/750*100vw); /*background-image:url('../img/chara_001_h4_sp.png');*/ top:calc(1096/750*100vw); left:calc(59/750*100vw); }
#chara-001 p.lines { width:calc((1055/2)/750*100vw); height:calc((246/2)/750*100vw); background-image:url('../img/chara_001_lines_sp.png'); top:calc(913/750*100vw); left:calc(16/750*100vw); right:auto; }
#chara-001 .chara-cv { top:calc(1263/750*100vw); left:calc(59/750*100vw); }
#chara-001 .chara-cv a { width:calc(240/750*100vw); height:calc(49/750*100vw); /*background-image:url('../img/chara_001_cv_sp.png');*/ }

#chara-001 p.sd { width:calc((463/2)/750*100vw); height:calc((717/2)/750*100vw); top:calc(1041/750*100vw); left:calc(518/750*100vw);  }
}
/************************************************************************
  #chara-002
************************************************************************/
#chara-002 { background-image:url('../img/chara_002.png'); }

#chara-002 h3 { width:calc(460px /2); height:calc(146px /2); background-image:url('../img/chara_002_h3.png'); top:570px; left:48px; }
#chara-002 h4 { width:calc(674px /2); height:calc(40px /2); background-image:url('../img/chara_002_h4.png'); top:540px; left:41px; }
#chara-002 p.lines { width:calc(872px /2); height:calc(198px /2); background-image:url('../img/chara_002_lines.png'); top:266px; left:41px; }
#chara-002 .chara-cv { top:654px; left:48px; }
#chara-002 .chara-cv a { width:calc(337px /2); height:calc(69px /2); background-image:url('../img/chara_002_cv.png'); }
#chara-002 p.text {  }

#chara-002 p.sd { width:calc(516px /2); height:calc(530px /2); background-image:url('../img/sd_002.png'); top:487px; left:278px;  }

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

#chara-002 { background-image:url('../img/chara_002_sp.png'); }

#chara-002 h3 { width:calc((551/2)/750*100vw); height:calc((175/2)/750*100vw); background-image:url('../img/chara_002_h3_sp.png'); top:calc(1152/750*100vw); left:calc(61/750*100vw); right:auto; }
#chara-002 h4 { width:calc(493/750*100vw); height:calc(30/750*100vw); /*background-image:url('../img/chara_002_h4_sp.png');*/ top:calc(1095/750*100vw); left:calc(61/750*100vw); right:auto; }
#chara-002 p.lines { width:calc((850/2)/750*100vw); height:calc((267/2)/750*100vw); background-image:url('../img/chara_002_lines_sp.png'); top:calc(914/750*100vw); left:calc(19/750*100vw); }
#chara-002 .chara-cv { top:calc(1263/750*100vw); left:calc(61/750*100vw); right:auto; }
#chara-002 .chara-cv a { width:calc(244/750*100vw); height:calc(50/750*100vw); /*background-image:url('../img/chara_002_cv_sp.png');*/ }

#chara-002 p.sd { width:calc(332/750*100vw); height:calc(343/750*100vw); background-image:url('../img/sd_002_sp.png'); top:calc(1051/750*100vw); left:calc(417/750*100vw);  }
}
/************************************************************************
  #chara-003
************************************************************************/
#chara-003 { background-image:url('../img/chara_003.png'); }

#chara-003 h3 { width:calc(378px /2); height:calc(142px /2); background-image:url('../img/chara_003_h3.png'); top:574px; left:52px; }
#chara-003 h4 { width:calc(570px /2); height:calc(40px /2); background-image:url('../img/chara_003_h4.png'); top:540px; left:44px; }
#chara-003 p.lines { width:calc(676px /2); height:calc(194px /2); background-image:url('../img/chara_003_lines.png'); top:266px; left:59px; }
#chara-003 .chara-cv { top:654px; left:44px; }
#chara-003 .chara-cv a { width:calc(337px /2); height:calc(69px /2); background-image:url('../img/chara_003_cv.png'); }
#chara-003 p.text {  }

#chara-003 p.sd { width:calc(396px /2); height:calc(512px /2); background-image:url('../img/sd_003.png'); top:493px; left:320px;  }

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

#chara-003 { background-image:url('../img/chara_003_sp.png'); }

#chara-003 h3 { width:calc((551/2)/750*100vw); height:calc((175/2)/750*100vw); background-image:url('../img/chara_003_h3_sp.png'); top:calc(1151/750*100vw); left:calc(66/750*100vw); }
#chara-003 h4 { width:calc(445/750*100vw); height:calc(31/750*100vw); top:calc(1094/750*100vw); left:calc(57/750*100vw); right:auto; }
#chara-003 p.lines { width:calc((840/2)/750*100vw); height:calc((244/2)/750*100vw); background-image:url('../img/chara_003_lines_sp.png'); top:calc(915/750*100vw); left:calc(17/750*100vw); }
#chara-003 .chara-cv { top:calc(1264/750*100vw); left:calc(57/750*100vw); right:auto; }
#chara-003 .chara-cv a { width:calc(240/750*100vw); height:calc(49/750*100vw); }

#chara-003 p.sd { width:calc((514/2)/750*100vw); height:calc((709/2)/750*100vw); background-image:url('../img/sd_003_sp.png'); top:calc(1059/750*100vw); left:calc(492/750*100vw);  }
}
/************************************************************************
  #chara-004
************************************************************************/
#chara-004 { background-image:url('../img/chara_004.png'); }

#chara-004 h3 { width:calc(481px /2); height:calc(142px /2); background-image:url('../img/chara_004_h3.png'); top:573px; left:46px; }
#chara-004 h4 { width:calc(607px /2); height:calc(41px /2); background-image:url('../img/chara_004_h4.png'); top:540px; left:46px; }
#chara-004 p.lines { width:calc(766px /2); height:calc(196px /2); background-image:url('../img/chara_004_lines.png'); top:266px; left:41px; }
#chara-004 .chara-cv { top:654px; left:46px; }
#chara-004 .chara-cv a { width:calc(337px /2); height:calc(69px /2); background-image:url('../img/chara_004_cv.png'); }
#chara-004 p.text {  }

#chara-004 p.sd { width:calc(368px /2); height:calc(526px /2); background-image:url('../img/sd_004.png'); top:485px; left:324px;  }

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

#chara-004 { background-image:url('../img/chara_004_sp.png'); }

#chara-004 h3 { width:calc((579/2)/750*100vw); height:calc((166/2)/750*100vw); background-image:url('../img/chara_004_h3_sp.png'); top:calc(1154/750*100vw); left:calc(58/750*100vw); }
#chara-004 h4 { width:calc(480/750*100vw); height:calc(31/750*100vw); top:calc(1094/750*100vw); left:calc(58/750*100vw); right:auto; }
#chara-004 p.lines { width:calc((975/2)/750*100vw); height:calc((246/2)/750*100vw); background-image:url('../img/chara_004_lines_sp.png'); top:calc(914/750*100vw); left:calc(18/750*100vw); }
#chara-004 .chara-cv { top:calc(1265/750*100vw); left:calc(58/750*100vw); }
#chara-004 .chara-cv a { width:calc(233/750*100vw); height:calc(47/750*100vw); }

#chara-004 p.sd { width:calc((514/2)/750*100vw); height:calc((709/2)/750*100vw); background-image:url('../img/sd_004_sp.png'); top:calc(1055/750*100vw); left:calc(511/750*100vw);  }
}
/************************************************************************
  #feature
************************************************************************/
#feature { margin-bottom:200px; }
#feature h2 { margin-bottom:100px; width:calc(604px /2); }

#feature article { margin:0 0 160px; display:flex; justify-content:space-between; }
#feature article h3 { margin:0 0 30px; }
#feature article h3::after { content:''; margin-top:15px; width:380px; height:7px; background:url('../img/h3_feature.svg') no-repeat; display:block; }
#feature article h4 { margin-top:40px; margin-bottom:20px; }
#feature article .text { width:380px; }
#feature article .text p { margin-bottom:1em; color:#14282e; line-height:calc(27/15); font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size:14px; }
#feature article .text p strong { color:#107070; font-weight:bold; font-style:oblique; }
#feature article .text p:last-child { margin-bottom:0; }
#feature article .pict { width:calc(1120px /2) }
#feature article .pict p { margin-bottom:25px; }
#feature article .pict p:last-child { margin-bottom:0; }

ul.diamond { list-style:none; }
ul.diamond li { display:flex; /*align-items:center;*/ }
ul.diamond li::before { content:'\25c6'; margin-top:0.32em; color:#106c6b; width:14px; height:14px; font-size:10px; /*display:flex; justify-content:center; align-items:center;*/ display:inline-block; }

#feature article ul.diamond li { margin-right:0.2em; color:#14282e; line-height:calc(27/15);  font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size:14px; }


/* #feature-001 */
#feature article#feature-001 h3 { width:calc(264px /2); }
#feature article#feature-001 .pict { order:1; }
#feature article#feature-001 .text { order:2; }

/* #feature-002 */
#feature article#feature-002 h3 { width:calc(653px /2); }

/* #feature-003 */
#feature article#feature-003 h3 { width:calc(286px /2); }
#feature article#feature-003 .pict { order:1; }
#feature article#feature-003 .text { order:2; }

/* #feature-004 */
#feature article#feature-004 h3 { width:calc(411px /2); }

/* #feature-005 */
#feature article#feature-005 h3 { width:calc(458px /2); }
#feature article#feature-005 .pict { order:1; }
#feature article#feature-005 .text { order:2; }


/* ============ smart phone ============ */
@media screen and (max-width:750px){
#feature { margin-bottom:calc(200/750*100vw); padding-top:calc(170/750*100vw); }
#feature h2 { margin-bottom:calc(60/750*100vw); width:calc(303/750*100vw); }

/* article */
#feature article { margin-bottom:calc(110/750*100vw); flex-direction:column; }
#feature article:last-child { margin-bottom:0; }
#feature article h3 { margin:auto auto calc((40 + 15)/750*100vw); text-align:center; }
#feature article h3::after { margin:calc(20/750*100vw) auto auto; width:100%; height:calc(15/750*100vw); background-size:100% auto; position:absolute; right:0; left:0; }
#feature article .text { margin:auto auto calc(30/750*100vw); width:calc(650/750*100vw); }
#feature article .text p { line-height:calc(42/24); font-size:calc(24/750*100vw); }
#feature article .pict { margin:auto; width:calc(650/750*100vw); }
#feature article .pict p { margin-bottom:calc(30/750*100vw); }
#feature article .pict p:last-child { margin-bottom:0; }

/* #feature-001 */
#feature article#feature-001 h3 { width:calc(158/750*100vw); }
#feature article#feature-001 .pict { order:2; }
#feature article#feature-001 .text { order:1; }

/* #feature-002 */
#feature article#feature-002 h3 { width:calc(401/750*100vw); }

/* #feature-003 */
#feature article#feature-003 h3 { width:calc(175/750*100vw); }
#feature article#feature-003 .pict { order:2; }
#feature article#feature-003 .text { order:1; }

/* #feature-004 */
#feature article#feature-004 h3 { width:calc(247/750*100vw); }

/* #feature-005 */
#feature article#feature-005 h3 { width:calc(263/750*100vw); }
#feature article#feature-005 .pict { order:2; }
#feature article#feature-005 .text { order:1; }

ul.diamond li::before { margin-right:0.5em; width:calc(16/750*100vw); height:calc(16/750*100vw); font-size:calc(16/750*100vw); }
#feature article ul.diamond li { line-height:calc(42/24); font-size:calc(24/750*100vw); }


}
/************************************************************************
  #movie
************************************************************************/
#movie { margin-bottom:200px; }
#movie h2 { margin-bottom:40px; width:calc(604px /2); }

#movie ul { margin-left:-6px; width:1012px; display:flex; justify-content:space-between; }
#movie ul li { display:flex; flex-direction:column; }
#movie ul li h3 { order:2; }
#movie ul li p.pict { order:1; margin-bottom:20px; width:calc(984px /2); }

#movie ul li:nth-child(1) h3 { width:calc(932px /2); }
#movie ul li:nth-child(2) h3 { width:calc(772px /2); }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#movie { margin-bottom:calc(180/750*100vw); }
#movie h2 { margin-bottom:calc(50/750*100vw); width:calc(302/750*100vw); }

/* #movie ul */
#movie ul { margin:auto; width:calc(665/750*100vw); flex-direction:column; }
#movie ul li { margin-bottom:calc(65/750*100vw); }
#movie ul li:last-child { margin-bottom:0; }
#movie ul li p.pict { order:1; margin-bottom:calc(25/750*100vw); width:auto; }

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


}
/************************************************************************
  #requirement
************************************************************************/
#requirement { margin-bottom:200px; }
#requirement h2 { margin-bottom:40px; width:calc(881px /2); }
#requirement h3 { margin-bottom:25px; width:calc(1438px /2); }

#requirement p.pict { margin:auto auto 40px; width:calc(1464px /2); }
#requirement ul.diamond li { color:#193c35; line-height:calc(30/17); font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size:18px; justify-content:center; }

#requirement article { margin-bottom:40px; }
#requirement article:last-child { margin-bottom:0; }
#requirement p.text { margin-top:15px; color:#193c35; text-align:center; font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size:16px; }

/* ul.diamond */
#requirement ul.diamond li::before { line-height:24px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#requirement { margin-bottom:calc(190/750*100vw); }
#requirement h2 { margin-bottom:calc(60/750*100vw); width:calc(471/750*100vw); }
#requirement h3 { margin-bottom:calc(30/750*100vw); width:calc((1378/2)/750*100vw); }

#requirement p.pict { margin-bottom:calc(35/750*100vw); width:calc(665/750*100vw); }
#requirement ul.diamond { margin:auto auto calc(20/750*100vw); width:calc(580/750*100vw); }
#requirement ul.diamond li { font-size:calc(24/750*100vw); justify-content:flex-start; }
#requirement p.text { margin:auto; width:calc(580/750*100vw); text-align:left; line-height:calc(36/22); font-size:calc(22/750*100vw); }

/* ul.diamond */
#requirement ul.diamond li::before { line-height:normal; }
}
/************************************************************************
  #fankit
************************************************************************/
#fankit { margin-top:-120px; margin-bottom:180px; padding-top:120px; }
#fankit h2 { margin-bottom:40px; width:calc(604px /2); }
#fankit p.pict { margin:auto auto 50px; width:calc(562px /2); }

/* ul */
#fankit ul { margin:auto; width:291px; display:flex; flex-direction:column; justify-content:space-between; }
#fankit ul li { width:calc(582px /2); }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#fankit { margin-top:0; margin-bottom:calc(180/750*100vw); padding-top:0; }
#fankit h2 { margin-bottom:calc(25/750*100vw); width:calc(302/750*100vw); }

#fankit p.pict { margin-bottom:calc(30/750*100vw); width:calc(384/750*100vw); }
#fankit ul { width:calc(432/750*100vw); }
#fankit ul li { margin-bottom:0; width:auto; }
#fankit ul li:last-child { margin-bottom:0; }


}
/************************************************************************
  #theme-song
************************************************************************/
#theme-song { padding-top:calc(400/2000*100vw); height:1300px; /*min-height:calc(1300/2000*100vw);*/ background:url('../img/bg_theme_song_a.png') no-repeat top center #1b2848; background-size:auto 100%; position:relative; }
#theme-song::after { content:''; margin:auto; width:100%; height:711px; background:url('../img/bg_theme_song_b.png') no-repeat bottom center; display:block; position:absolute; bottom:0; right:0; left:0; z-index:-1; }
#theme-song h2 { margin-bottom:calc(60/1000*100%); width:calc(1084px /2) }

/* .flex */
#theme-song .flex { margin:auto; width:calc(1000/2000*100%); min-width:1000px; justify-content:space-between; }
#theme-song .flex p.pict { order:1; width:calc(940px /2); }
#theme-song .flex .text { order:2; width:calc(940px /2); }
#theme-song .flex .text p { margin-bottom:1em; line-height:calc(28/15); font-size:16px; font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
#theme-song .flex .text p:last-hild { margin-bottom:0; }

/* ============ 1366px 以下 ============ */
@media screen and (max-width:1366px){
#theme-song { padding-top: calc(200/1366*100vw); }
#theme-song::after { height:calc(554/1366*100vw); background-size:auto 100%; }
}

/* ============ 1366px 以上 ============ */
@media screen and (min-width:1367px){
#theme-song { padding-top:calc(260/1366*100vw); padding-bottom:calc(1040/1366*100vw); height:calc(1080/1366*100vw); }
#theme-song::after { height:calc(711/1920*100vw); background-size:auto 100%; }
}

/* ============ 1366px 以上 ============ */
@media screen and (min-height:1367px){
#theme-song { padding-bottom:0; }
}

/* ============ 2000px ============ */
/*
@media screen and (max-width:2000px){
#theme-song { padding-top:calc(360/2000*100vw); }
}
@media screen and (min-width:2001px){
#theme-song { padding-top:calc(360/2000*100vw); height:calc(1300/2000*100vw); background-size:100% auto; }
}
*/


/* ============ smart phone ============ */
@media screen and (max-width:750px){
#theme-song { padding-top:calc(324/750*100vw); min-height:initial; height:calc(2180/750*100vw); background-image:url('../img/bg_theme_song_sp.png'); background-size:100% auto; }
#theme-song h2 { margin-bottom:calc(60/1000*100%); width:calc(615/750*100vw); }

#theme-song::after { display:none; }

/* .flex */
#theme-song .flex { margin:auto; width:calc(590/750*100vw); min-width:initial; flex-direction:column; }
#theme-song .flex p.pict { margin:auto auto calc(55/750*100vw); width:auto;  }
#theme-song .flex .text { margin:auto; width:auto; }
#theme-song .flex .text p { line-height:calc(42/26); font-size:calc(26/750*100vw);  }
}
/************************************************************************
  #information
************************************************************************/
#information { padding:40px 0; }
#information .flex { margin:auto; width:1000px; justify-content:space-between; }

/* .left */
#information .left { display:flex; }
#information .left p.app-icon { margin-right:30px; width:calc(260px /2); }
#information .left p.title { width:calc(356px /2); }
#information .left p.text { color:#000000; line-height:calc(24/14); font-size:14px; }

#information .dl-btn { width:350px; display:flex; flex-wrap:wrap; justify-content:space-between; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#information { padding:calc(70/750*100vw) 0; }
#information .flex { width:calc(630/750*100vw); flex-direction:column; }

/* .left */
#information .left { margin-bottom:calc(60/750*100vw); }
#information .left p.app-icon { margin-right:calc(35/750*100vw); width:calc(180/750*100vw); }
#information .left p.title { margin-bottom:calc(25/750*100vw); width:calc(234/750*100vw); }
#information .left p.text { line-height:calc(34/24); font-size:calc(20/750*100vw); }

#information .dl-btn { width:calc(630/750*100vw); display:flex; flex-wrap:wrap; justify-content:space-between; }
#information .dl-btn-as { width:calc(300/750*100vw); }
#information .dl-btn-gp { width:calc(300/750*100vw); }
}
/************************************************************************
  footer
************************************************************************/
footer { padding:40px 0 30px; background-color:#153a67; color:#ffffff; text-align:center; font-size:12px; box-sizing:border-box; }

footer .contents { width:100%; }
footer a { color:#ffffff; }
footer a:visited { color:#cccccc; }
footer a:hover { color:#ffffff; text-decoration:underline; }
footer p img { margin-bottom:20px; }

/* .banner */
footer .banner { margin-bottom:45px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.05); }
footer .banner img { margin:auto; width:1000px; }

/* nav */
footer nav { margin:auto; width:1000px; }
footer nav ul { margin-bottom:30px; display:flex; justify-content:flex-start; }
footer nav ul li { line-height:1; }
footer nav ul li::after { content:'|'; margin:0 0.5em; color:#ffffff; }
footer nav ul li:last-child::after { display:none; }

footer .flex { margin:auto; width:1000px; justify-content:space-between; }

/* div.copyright */
div.copyright { text-align:left; line-height:calc(22/12); font-size:12px; }
div.copyright p { font-size:12px; }

/* .note */
footer .note { margin-top:1em; }
/* #sns */
ul#sns { display:flex; }
ul#sns li { margin-left:20px; }

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

footer { padding:calc(70/750*100vw) 0 calc(50/750*100vw); font-size:calc(24/750*100vw); }
footer .contents { width:auto; flex-direction:column; }

/* .banner */
footer .banner { margin:auto auto calc(80/750*100vw); padding-bottom:0; width:calc(630/750*100vw); }
footer .banner img { width:100%; }

/* nav */
footer nav { width:auto; }
footer nav ul { margin-bottom:calc(30/750*100vw); flex-direction:column; justify-content:center; }
footer nav ul li { margin-bottom:1em; text-align:center; line-height:calc(36/24); }
footer nav ul li::after { display:none; }

footer .flex { width:auto; flex-direction:column; }
div.copyright { margin-bottom:calc(85/750*100vw); text-align:center; }

/* #sns */
ul#sns { justify-content:center; }
ul#sns li { margin-left:calc(40/750*100vw); width:calc(85/750*100vw); }
ul#sns li:first-child { margin-left:0; }
}
/************************************************************************
  #Audio-Control
************************************************************************/
#Audio-Control { margin:auto; width:44px; height:145px; background:url('../img/Audio_Control.png') no-repeat; background-size:100% auto; position:fixed; top:0; bottom:0; right:0; display:block; z-index:10; /*background-color:rgba(255,0,0,0.5);*/ }

#Audio-Control button { width:35px; height:45px; background-repeat:no-repeat; background-size:100% auto; font-size:0; position:absolute; right:2px; /*background-color:rgba(255,0,0,0.5);*/ opacity:0.5; transition:0.5s; }
#Audio-Control button.on { background-image:url('../img/on.png');  top:18px; }
#Audio-Control button.off { background-image:url('../img/off.png'); top:84px; }

#Audio-Control button.active { opacity:1; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){

#Audio-Control { width:calc((401/2)/750*100vw); height:calc((109/2)/750*100vw); background-image:url('../img/bgm_sp.png'); background-size:100% auto; bottom:auto; left:auto; right:calc(10/750*100vw); }

#Audio-Control button { width:calc((140/2)/750*100vw); height:calc((60/2)/750*100vw); top:calc(10/750*100vw) !important; }
#Audio-Control button.on { background-image:url('../img/on_sp.png'); left:calc(18/750*100vw); }
#Audio-Control button.off { background-image:url('../img/off_sp.png'); right:calc(16/750*100vw); }
}
/************************************************************************
  2022.12.13
************************************************************************/
/*
#menu ul li { width:200px; text-align:center; }
#menu ul li a { margin:auto; }
#menu ul li.nav-movie { display:none; }

a.btn-play { display:none; }

#movie { display:none; }
*/