@charset "utf-8";
/* CSS Document */

body {
    background-color: #000;
    background-image: url(https://precatus.com/special/img/main_bg.png);
    color:#fff;
}
.tltle_box{
      position:relative;
      max-width: 545px;
      top:10px;
      margin-left:auto;
      margin-right:auto;
}

.top_btn{
      display:box;
      width:100px;
      font-weight:bold;
      padding:10px;
      /*border: thin #fff solid;*/
      text-align:center;
      margin-left:auto;
      margin-right:auto;
}

.fixed_btn{
  position: fixed;
  bottom: 20px; 
  right: 10px;
  padding: 10px 20px;
  border: thin #fff solid;
}

a:link { color: #fff; }
a:visited { color: #fff; }
a:hover { color: #a8a8a8; }
a:active { color: #fff; }
a{text-decoration: none;}



/**----------------
   PC
----------------*/

@media screen and (min-width:769px) { 
#headr_box{
      position:relative;
      width: 768px;
      padding-top:30px;
      margin-left:auto;
      margin-right:auto;
}

.headr_icon{
        position:relative;
	display:flex;
        width: 100%
        margin-left:auto;
        margin-right:auto;
	flex-direction:row;
	flex-wrap:wrap;
        list-style:none;
        justify-content: space-around;
}

.to_btt{
   display:box;
    background-image: url(https://precatus.com/special/img/btn_top.png);
   width:74px;
   height:78px;
    background-repeat: no-repeat;

    }

.icon{
   display:box;
   width:89px;
   height:89px;
   padding: 5px 5px;

}


/*** 更新箇所 ***
　キャラクターの切り替えボタンのエリアの指定です。
　公開時・未公開時で画像ファイルの指定が変わります。*/

#headr_box .headr_icon li:nth-child(1) {
    background-image: url(https://precatus.com/special/img/chara_btn01_ashley_hov.png);
    background-size: 89px 89px;
    background-repeat: no-repeat;
   
}
#headr_box .headr_icon li:nth-child(2) {
    background-image: url(https://precatus.com/special/img/chara_btn02_lienhard_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(3) {
    background-image: url(https://precatus.com/special/img/chara_btn03_serafina_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(4) {
    background-image: url(https://precatus.com/special/img/chara_btn04_justin_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(5) {
    background-image: url(https://precatus.com/special/img/chara_btn05_ivar_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(6) {
    background-image: url(https://precatus.com/special/img/chara_btn06_kanagi_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(7) {
    background-image: url(https://precatus.com/special/img/chara_btn07_laciel_hov.png);
    background-repeat: no-repeat;
}
/*** 更新箇所ここまで ***/


/*** 更新箇所 ***
　キャラクターの切り替えボタンのエリアの指定です。
　公開時・未公開時で画像ファイルの指定が変わります。*/

#headr_box .headr_icon li:nth-child(1) :hover{
      background-image: url(https://precatus.com/special/img/chara_btn01_ashley.png);
    background-size: 89px 89px;
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(2) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn02_lienhard.png);
    background-size: 89px 89px;
    background-repeat: no-repeat;

}
#headr_box .headr_icon li:nth-child(3) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn03_serafina.png);
    background-size: 89px 89px;
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(4) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn04_justin.png);
    background-size: 89px 89px;
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(5) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn05_ivar.png);
    background-size: 89px 89px;
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(6) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn06_kanagi.png);
    background-size: 89px 89px;
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(7) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn07_laciel.png);
    background-size: 89px 89px;
    background-repeat: no-repeat;
}
/*** 更新箇所ここまで ***/

#main_box{
      width: 100%;
      padding-top:30px;
      margin-left:auto;
      margin-right:auto;
}


.main{
   display:box;
   position:relative;
   width:100%;
   margin-left:auto;
   margin-right:auto;
}

.main li{
   width:100%;

   text-align:center;
   list-style:none;
}

.cha img{
   position:relative;
   width:100%;
   max-width:900px;
}


#main_box .main li:nth-child(1) {
    background-image: url(https://precatus.com/special/img/bg1.png);
    background-size: cover;
    background-repeat: no-repeat;
   background-position:center top;


}
#main_box .main li:nth-child(2) {
    background-image: url(https://precatus.com/special/img/bg2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;


}
#main_box .main li:nth-child(3) {
    background-image: url(https://precatus.com/special/img/bg3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
#main_box .main li:nth-child(4) {
    background-image: url(https://precatus.com/special/img/bg4.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
#main_box .main li:nth-child(5) {
    background-image: url(https://precatus.com/special/img/bg5.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
#main_box .main li:nth-child(6) {
    background-image: url(https://precatus.com/special/img/bg6.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
#main_box .main li:nth-child(7) {
    background-image: url(https://precatus.com/special/img/bg7.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
/*** 更新箇所ここまで ***/
}


/**----------------
   SP
----------------*/
@media screen and (max-width:768px) { 

.headr_icon {
    width: 450px;
    font-size: 0;
    margin: 24px auto 0;
    text-align: center;
}

.headr_icon li {
    font-size: 13px;
    margin: 27px 0 0 30px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.headr_icon li:first-child,
.headr_icon li:nth-child(5) {
    margin-left: 0px;
}
.headr_icon li:nth-child(-n+4) {
    margin-top: 0px;
}


.to_btt{
   display:box;
    background-image: url(https://precatus.com/special/img/btn_top.png);
    width:60px;
    height:60px;
    background-repeat: no-repeat;
    background-size: contain;
    }

.icon{
   display:box;
   width:89px;
   height:89px;
   padding: 0px 0px;

}


/*** 更新箇所 ***
　キャラクターの切り替えボタンのエリアの指定です。
　公開時・未公開時で画像ファイルの指定が変わります。*/

#headr_box .headr_icon li:nth-child(1) {
    background-image: url(https://precatus.com/special/img/chara_btn01_ashley_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(2) {
    background-image: url(https://precatus.com/special/img/chara_btn02_lienhard_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(3) {
    background-image: url(https://precatus.com/special/img/chara_btn03_serafina_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(4) {
    background-image: url(https://precatus.com/special/img/chara_btn04_justin_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(5) {
    background-image: url(https://precatus.com/special/img/chara_btn05_ivar_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(6) {
    background-image: url(https://precatus.com/special/img/chara_btn06_kanagi_hov.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(7) {
    background-image: url(https://precatus.com/special/img/chara_btn07_laciel_hov.png);
    background-repeat: no-repeat;
}
/*** 更新箇所ここまで ***/


/*** 更新箇所 ***
　キャラクターの切り替えボタンのエリアの指定です。
　公開時・未公開時で画像ファイルの指定が変わります。*/

#headr_box .headr_icon li:nth-child(1) :hover{
      background-image: url(https://precatus.com/special/img/chara_btn01_ashley.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(2) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn02_lienhard.png);
    background-repeat: no-repeat;

}
#headr_box .headr_icon li:nth-child(3) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn03_serafina.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(4) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn04_justin.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(5) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn05_ivar.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(6) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn06_kanagi.png);
    background-repeat: no-repeat;
}
#headr_box .headr_icon li:nth-child(7) :hover{
    background-image: url(https://precatus.com/special/img/chara_btn07_laciel.png);
    background-repeat: no-repeat;
}
/*** 更新箇所ここまで ***/



#main_box{
      width: 100%;
      padding-top:30px;
      margin-left:auto;
      margin-right:auto;
}


.main{
   display:box;
   position:relative;
   width:100%;
   margin-left:auto;
   margin-right:auto;
}

.main li{
   width:100%;

   text-align:center;
   list-style:none;
}

.cha img{
   position:relative;
   width:100%;
   max-width:900px;
}


#main_box .main li:nth-child(1) {
    background-image: url(https://precatus.com/special/img/bg1.png);
    background-size: cover;
    background-repeat: no-repeat;
   background-position:center top;


}
#main_box .main li:nth-child(2) {
    background-image: url(https://precatus.com/special/img/bg2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;


}
#main_box .main li:nth-child(3) {
    background-image: url(https://precatus.com/special/img/bg3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
#main_box .main li:nth-child(4) {
    background-image: url(https://precatus.com/special/img/bg4.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
#main_box .main li:nth-child(5) {
    background-image: url(https://precatus.com/special/img/bg5.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
#main_box .main li:nth-child(6) {
    background-image: url(https://precatus.com/special/img/bg6.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
#main_box .main li:nth-child(7) {
    background-image: url(https://precatus.com/special/img/bg7.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center top;
}
/*** 更新箇所ここまで ***/
}