@charset "UTF-8";

.ads{
  text-align: center;
  margin: 10px 0;
}

/** TOPイラストエリア **/
#topIllust{
  width: 100%;
  height: 505px;
  position: relative;
  overflow: hidden;
}
  #topIllust.type1{
    background: url('../img/bg_top01.png') repeat-x;
  }
  #topIllust.type2{
    background: url('../img/bg_top02.png') repeat-x;
  }
  #topIllust.type3{
    background: url('../img/bg_top03.png') repeat-x;
  }

  /* イラスト上部 メインイラストとアイコン */
  #topIllust .mainIllust{
    left: 50%;
    margin-left: -544px;
    position: absolute;
    top: -85px;
    z-index: 10;
  }
    #topIllust .mainIllust img{
       width:1089px;
       height:592px;
    }

 /*
  #topIllust .mainIllust{
    left: 50%;
    margin-left: -544px;
    position: absolute;
    top: -85px;
    z-index: 10;
    background: url('../img/img_main_illust01.png') no-repeat;
    background-size: contain;
    max-width: 1089px;
    max-height: 592px;
    width: 100%;
    height: 100%;
  }
  */


  #topIllust .illustTop{
    width: 100%;
    max-width: 1420px;
    height: 440px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }
    /** アイコン群 **/
    #topIllust .illustTop .icoH{
      background: url('../img/ico_heart.png') no-repeat;
      background-size: contain;
      display: block;
      position: absolute;
      bottom:0px;
      left:0px;
    }
    #topIllust .illustTop .icoR{
      background: url('../img/ico_rabbit.png') no-repeat;
      background-size: contain;
      display: block;
      position: absolute;
      bottom:0px;
      left:0px;
    }

    #topIllust .illustTop .ico01{
      width: 20px;
      height: 20px;
    }
    #topIllust .illustTop .ico02{
      width: 30px;
      height: 30px;
    }
    #topIllust .illustTop .ico03{
      width: 40px;
      height: 40px;
    }
    #topIllust .illustTop .ico04{
      width: 50px;
      height: 50px;
    }
    #topIllust .illustTop .ico05{
      width: 60px;
      height: 60px;
    }


  /* イラスト下部 ロゴ */
  #topIllust .illustBottom{
    width: 100%;
    background:url('../img/bg_border.png') repeat;
    padding: 12px 0;
    position: absolute;
    bottom:0px;
    box-sizing: border-box;
    text-align: right;
    z-index: 11;
  }
    #topIllust .illustBottom .ttl{
      display: block;
      margin: 0 auto;
      max-width: 1420px;
      padding-right: 20px;
      width: 100%;
    }

.topText{
  text-align: center;
  max-width: 1420px;
  margin: 0 auto;
  padding: 10px 0;

}


/** TOPコンテンツ **/
#mainContents{
  max-width: 1420px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
  #mainContents .listMain{
    position: relative;
  }
  #mainContents li{
    width: 20%;
    height: 400px;
    box-sizing: border-box;
    position: absolute;
    background-color: #F1EFE7;
    z-index: 1;
  }
  #mainContents li:nth-child(even){
    background-color: #F5F5F5;
  }
  #mainContents li a{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    padding: 60px 0 20px;    
  }
    #mainContents li a i{
      position: absolute;
      top:7px;
      left: 50%;
      margin-left: -23px
    }

  #mainContents li.indexTop
  {
    z-index: 100;
  }
    #mainContents li span{
      -ms-writing-mode: tb-rl; /* for MS IE8+ */
      -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      width: 14px;
      display: inline-block;
      margin: 0 auto;
    }


  #mainContents .contentsBox{
    border: 1px solid #E7E7E4;
    box-sizing: border-box;
    display: none;
    height: 400px;
    left: -848px; /* (this.width * -1) + #mainContents li - 2 */
    position: absolute;
    top: 0;
    width: 80%;
    background-color: #F5F5F5;
    padding: 20px;
  }

    #mainContents .contentsBox .contentSp dt,
    #mainContents .contentsBox .contentSp dd
    {
      float: left;
    }
    #mainContents .contentsBox .contentSp dt
    {
      margin-right: 16px;
    }





  #mainContents .contentsBox:nth-child(even){
    border: 1px solid #f1e5c7;
    background-color: #F1EFE7;
  }
    #mainContents .contentsBox dd{
      margin-bottom: 10px;
    }

/* スマホ */
@media screen and (max-width:769px)
{
  #topIllust .mainIllust{
    left: 0;
    margin-left: 0px;
    position: absolute;
    top: 0px;
    z-index: 10;
    background: url('../img/img_main_illust01.png') no-repeat;
    width: 100%;
    height: 100%;
    background-position: 85% bottom;
  }
    #topIllust .mainIllust img{
      display: none;
    }
}