@charset "UTF-8";
.pc-view {
	display: block;
}

.sp-view {
	display: none;
}

sup{
  top: -0.2em;
}

.txtAlignLC {
  text-align: left;
}

.margT40-20 {
  margin-top: 40px!important;
}

.marg0A{
  margin: 0 auto !important;
}


/* layout
================================*/

#content-all {
	width: 980px;
  font-size: 16px;
	margin: 0 auto;
	overflow: hidden;
	background: #ffffff;
}

#content-all p.txt{
  line-height: 1.5;
}

#content-all .txt-bld{
  font-weight: bold;
}

a:hover img {
	opacity: 0.7;
}

/* header
================================*/

.content-head {
	padding: 15px 50px;
	line-height: 1;
}

.content-head a {
	display: block;
}

/* footer
================================*/

.copyright {
	padding: 20px 0 50px;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: center;
  display: block;
  background: #f2f2f2;
  color: #a6a6a6;
}

/* content-main
================================*/
.content-main{
  padding: 70px 0 0;
  background: url(img/20170619_toto_bg01.png) no-repeat center -30px;
}

/* main-img
--------------------------------*/
.main-img{
  position: relative;
  z-index: 0;
}
.main-img:after{
  content: "";
  display: block;
  width: 914px;
  height: 196px;
  position: absolute;
  background: url(img/20170619_toto_bg14.png) no-repeat 0 0;
  bottom: -166px;
  left: 30px;
  z-index: 200;
}
.main-img img{
  width: 100%;
}
.main-img .area-flame img{
  width: auto;
  height: 38px;
}


/* block
--------------------------------*/
.area-flame{
  border-top: 6px solid #000;
  border-bottom: 6px solid #000;
}
.area-flame .title img{
  height: 52px !important;
}
.main-img .area-flame{
  padding: 15px 0;
}

/* bg-type
--------------------------------*/
.bg-type-01{
  background: url(img/20170619_toto_bg05.png) repeat;
}
.bg-type-02{
  background-color: #f9f6ee;
}

/* balloon
--------------------------------*/
.balloon{
  width: 100%;
  position: relative;
  background-color: #c5a75a;
  padding: 20px 0;
  margin: 30px auto 0;
}
.balloon:before{
  content: "";
  display: block;
  width: 54px;
  height: 33px;
  background: url(img/20170619_toto_bg06.png) no-repeat;
  position: absolute;
  top: -33px;
  left: 343px;
}
.balloon img{
  margin: 0 auto;
}

/* box
--------------------------------*/
div[class^="box"]{
  margin: 0 auto;
}
div[class^="box"] .title img, section[class^="box"] .title img{
  height: 48px;
}
div.box-video{
  width: 608px;
  background-color: #e4ffff;
  position: relative;
  padding: 0 98px 42px;
  margin-bottom: 70px;
}
div.box-01{
  width: 740px;
  padding: 0 0 80px;
}
div.box-02{
  width: 100%;
  text-align: center;
  padding: 0 0 24px;
}
.box-03{
  width: 100%;
  text-align: center;
  padding: 0 150px 120px;
  background: url(img/20170619_toto_bg02.png) no-repeat top center;
}
.box-04{
  width: 100%;
  text-align: center;
  padding: 0 100px 118px;
  position: relative;
}
.box-04:before{
  content: "";
  display: block;
  width: 100%;
  height: 173px;
  background: url(img/20170619_toto_bg03.png) no-repeat 0 0;
  position: absolute;
  top: -64px;
  left: 64px;
}
.box-04:after{
  content: "";
  display: block;
  width: 100%;
  height: 173px;
  background: url(img/20170619_toto_bg03.png) no-repeat 0 0;
  position: absolute;
  bottom: -30px;
  left: 64px;
}
.box-04.verA:before{
  display: none;
}
.box-04.verA:after{
  height: 110px;
  background: url(img/20170619_toto_bg04.png) no-repeat 0 0;
}
.box-05{
  width: 100%;
  text-align: center;
  border-bottom: 6px solid #000;
  padding: 0 45px 92px;
}
.box-06{
  text-align: center;
  padding: 80px 0 30px;
}


/* box-video
--------------------------------*/
.box-video .headline{
  text-align: center;
  position: absolute;
  top: -36px;
  left: 0;
}
.box-video .title{
  text-align: center;
  padding: 38px 0 0;
}
.box-video .txt{
  padding: 15px 0 0;
  margin: 0 auto;
}
.box-video .video{
  text-align: center;
  margin: 10px 0 0;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.box-video .video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box-video:after{
  content: "";
  display: block;
  width: 608px;
  height: 8px;
  background: url(img/20170619_toto_img05.png) repeat-x;
  position: absolute;
  left: 0;
  bottom: 0;
}

/* box-01
--------------------------------*/
.box-01 .bonus{
  text-align: center;
  padding: 42px 0 0;
}

/* box-02
--------------------------------*/
.box-02 .title{
  padding: 24px 0 0;
}

/* box-03
--------------------------------*/
.box-03 .title{
  padding: 68px 0 0;
}
.box-03 dl{
  display: table;
  padding: 55px 0 0;
}
.box-03 dl:nth-of-type(1){
  padding: 20px 0 0;
}
.box-03 dt, .box-03 dd{
  display: table-cell;
}
.box-03 dt{
  width: 158px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid #c5a75a;
  border-right: 1px solid #c5a75a;
}
.box-03 dd{
  width: 522px;
  text-align: left;
  padding: 8px 20px;
}
.box-03 dd .comment{
  margin-top: 0;
}
.box-03 dd .comment .comment{
  margin-top: 10px;
}

/* box-04
--------------------------------*/
.box-04 .title{
  padding: 114px 0 0;
}
.box-04 .list-01{
  padding: 30px 0 0;
}
.box-04 .list-01 li.child{
  position: relative;
  background-color: #FFF;
  padding: 70px 40px;
  margin: 40px 0 0;
}
.box-04 li.child:first-child{
  margin: 0 !important;
}
.box-04 .list-02{
  padding: 42px 28px 0;
  margin: 0 0 25px;
}
.box-04 .list-01 li .list-02 li.child{
  border-bottom: 4px solid #c5a75a;
  position: relative;
  padding: 0 0 30px;
  margin: 86px 0 0;
}
.box-04 .list-01 li .list-02 li.child:before{
  content: "";
  display: block;
  width: 66px;
  height: 41px;
  background: url(img/20170619_toto_ico02.png) no-repeat 0 0;
  position: absolute;
  top: -60px;
  left: 290px;
}
.box-04 .list-01 li .list-02 li.child:first-child:before{
  display: none;
}
.box-04 .list-01 li .list-02 li.child .image{
  padding: 15px 0 0;
}
.box-04 .list-01 li .list-02 li.child .image img{
  width: 386px;
}
.box-04 .list-02 li .txt{
  padding: 18px 0 0;
}


/* box-05
--------------------------------*/
.box-05 .title{
  text-align: center;
  padding: 120px 0 0;
}
.box-05 .title + p{
  padding: 20px 0 0;
}
.box-05 .comment{
  padding: 0 100px;
}

/* box-06
--------------------------------*/
.box-06 .btn01{
  width: 480px;
  height: auto;
  margin: 0 auto;
}
.box-06 .notice{
  width: 480px;
  padding: 0 0 54px;
  margin: 0 auto;
}
.box-06 .notice .title{
  font-size: 22px;
  padding: 10px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin: 30px 0 0 0;
}
.box-06 .color-list{
  text-align: left;
  margin: 20px 0 0 0;
}
.box-06 .color-list .comment{
  margin: 5px 0 0 0;
}


/* list
--------------------------------*/
ul.comment{
  margin: 25px 0 0;
}
ul.comment li{
  display: table;
  margin: 5px 0 0;
}
ul.comment li span{
  display: table-cell;
  text-align: left;
  line-height: 1.5;
  padding-right: 1px;
}
ul[class^="link-list"]{
  margin: 10px 0 0;
}
ul[class^="link-list"] li{
  display: block;
  text-align: left;
  line-height: 1.2;
}
ul[class^="link-list"] a{
  font-size: 24px;
  font-weight: bold;
  color: #5B5B5B;
  padding: 0 0 0 34px;
}
ul.link-list01 li{
  background: url(img/20170619_toto_ico07.png) no-repeat center left;
  -webkit-background-size: 26px;
       -o-background-size: 26px;
          background-size: 26px;
}
ul.link-list02 li{
  background: url(img/20170619_toto_ico01.png) no-repeat center left;
  -webkit-background-size: 26px;
       -o-background-size: 26px;
          background-size: 26px;
}
ul.color-list li.child{
  line-height: 1.2;
  background: url(img/20170619_toto_ico06.png) no-repeat 2px 0;
  -webkit-background-size: 15px;
       -o-background-size: 15px;
          background-size: 15px;
  padding: 0 0 0 20px;
  margin: 10px 0 0 0;
}
ul.color-list li:first-child{
  margin: 0;
}

/* btn
--------------------------------*/
.btnWrap{
  padding: 14px 0 0;
}
.btnWrap li{
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.btnWrap li:after{
  content: "";
  display: block;
  background-color: #000;
  opacity: 0.1;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  position: absolute;
  top: 6px;
  z-index: -1;
}
.btnWrap li.siz-s{
  width: 404px;
}
.btnWrap li.siz-s:after{
  width: 412px;
  height: 102px;
}
.btnWrap li.siz-m{
  width: 536px;
}
.btnWrap li.siz-m:after{
  width: 544px;
  height: 102px;
}
.btnWrap li a{
  display: block;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  padding: 16px 0;
  height: 102px;
}
.btnWrap li.color-01 a{
  background-color: #e61911;
  border-bottom: 8px solid #aa130d;
}
.btnWrap li.color-02 a{
  background-color: #fb7000;
  border-bottom: 8px solid #ba5600;
}
.btnWrap li a .login{
  height: 64px;
}
.btnWrap.column01{
  display: block;
  margin: 46px auto 0;
}
.btnWrap.column01 li{
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 20px;
}



@media screen and (max-width:640px) {
	.pc-view {
		display: none;
	}
	.sp-view {
		display: block;
	}
  .txtAlignLC {
    text-align: center !important;
  }
  .margT40-20 {
    margin-top: 20px !important;
  }
  .wid50{
    width: 50% !important;
  }
	/* layout
	================================*/
	#content-all {
		width: 100%;
    font-size: 12px;
	}
	a:hover img {
		opacity: 1;
	}
	/* header
	================================*/
	.content-head {
		padding: 7px 10px;
	}
	.content-head img {
		width: 28%;
	}
	/* footer
	================================*/
	.copyright {
		font-size: 10px;
		font-size: 1.0rem;
	}
	/* content-main
  	================================*/
  .content-main{
    padding: 37px 0 0;
    background: url(img/20170619_toto_bg08.png) no-repeat center top;
    -webkit-background-size: 100%;
         -o-background-size: 100%;
            background-size: 100%;
  }

  /* main-img
  --------------------------------*/
  .main-img:after{
    display: none;
  }
  .main-img img{
    width: 100%;
  }
  .main-img .area-flame img{
    width: auto;
    height: 16px;
  }

  /* block
  --------------------------------*/
  .area-flame{
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
  }
  .area-flame .title img{
    height: 16px !important;
  }
  .main-img .area-flame{
    padding: 10px 0;
  }

  /* bg-type
  --------------------------------*/
  .bg-type-01{
    -webkit-background-size: 6px 10px;
         -o-background-size: 6px 10px;
            background-size: 6px 10px;
  }

  /* balloon
  --------------------------------*/
  .balloon{
    padding: 10px 0;
    margin: 3.75% auto 0;
  }
  .balloon:before{
    width: 27px;
    height: 16px;
    -webkit-background-size: 100%;
         -o-background-size: 100%;
            background-size: 100%;
    top: -16px;
    left: calc(50% - 14px);
  }

  /* box
  --------------------------------*/
  div[class^="box"] .title img, section[class^="box"] .title img{
    height: 26px;
  }
  div.box-video{
    width: calc(100% - 30px);
    padding: 0 41px 27px;
    margin: 0 15px 36px;
  }
  div.box-01{
    width: 100%;
    margin: 0;
    padding: 0 15px 42px;
  }
  div.box-02{
    padding: 0 0 20px;
  }
  .box-03{
    padding: 0 15px 45px;
    background: url(img/20170619_toto_bg09.png) no-repeat top center;
    -webkit-background-size: 100%;
         -o-background-size: 100%;
            background-size: 100%;
  }
  .box-04{
    padding: 0 15px 45px;
  }
  .box-04:before{
    width: 92%;
    height: 100px;
    background: url(img/20170619_toto_bg10.png) no-repeat 0 0;
    -webkit-background-size: 100%;
         -o-background-size: 100%;
            background-size: 100%;
    top: -12px;
    left: 4%;
  }
  .box-04:after{
    width: 80%;
    height: 100px;
    background: url(img/20170619_toto_bg11.png) no-repeat 0 0;
    -webkit-background-size: 100%;
         -o-background-size: 100%;
            background-size: 100%;
    bottom: -53px;
    left: 10%;
  }
  .box-04.verA:after{
    height: 100px;
    background: url(img/20170619_toto_bg12.png) no-repeat 0 0;
    -webkit-background-size: 100%;
         -o-background-size: 100%;
            background-size: 100%;
    bottom: -55px;
  }
  .box-05{
    border-bottom: 3px solid #000;
    padding: 0 15px 40px;
  }
  .box-06{
    padding: 38px 0 28px;
  }


  /* box-video
  --------------------------------*/
  .box-video .headline{
    width: 100%;
    top: -20px;
    position: relative;
    z-index: 100;
  }
  .box-video .headline:after{
    content: "";
    display: block;
    width: calc(100% + 82px);
    height: 4px;
    position: absolute;
    bottom: 1px;
    left: -41px;
    background: url("img/20170619_toto_bg13.png") repeat-x 0 0;
    -webkit-background-size: 1px 4px;
         -o-background-size: 1px 4px;
            background-size: 1px 4px;
    z-index: -1;
  }
  .box-video .headline img{
    width: auto;
    height: 25px;
    margin: 0 auto;
  }
  .box-video .title{
    padding: 0;
  }
  .box-video .txt{
    padding: 10px 0 0;
  }
  .box-video .video{
    margin: 6px 0 0;
  }
  .box-video:after{
    width: 100%;
    height: 4px;
    -webkit-background-size: 1px 4px;
         -o-background-size: 1px 4px;
            background-size: 1px 4px;
  }

  /* box-01
  --------------------------------*/
  .box-01 .bonus{
    padding: 14px 0 0;
  }
  .box-01 img{
    width: 100%;
  }
  .box-01 .balloon img{
    width: 84%;
  }

  /* box-02
  --------------------------------*/
  .box-02 .title{
    padding: 15px 0 0;
  }
  .box-02 .title img{
    height: 38px !important;
  }

  /* box-03
  --------------------------------*/
  .box-03 .title{
    padding: 42px 0 0;
  }
  .box-03 dl{
    display: block;
    padding: 28px 0 0;
  }
  .box-03 dt, .box-03 dd{
    display: block;
    margin: 0 auto;
  }
  .box-03 dt{
    width: 95px;
    vertical-align: top;
  }
  .box-03 dd{
    width: 100%;
    padding: 12px 0 0;
  }
  .box-03 dd .comment .comment{
    margin-top: 5px;
  }

  /* box-04
  --------------------------------*/
  .box-04 ul img{
    width: 100%;
    height: auto;
  }
  .box-04 .title{
    padding: 44px 0 0;
  }
  .box-04 .list-01{
    padding: 15px 0 0;
  }
  .box-04 .list-01 li.child{
    padding: 27px 10px;
    margin: 24px 0 0;
  }
  .box-04 .list-02{
    padding: 13px 0 0;
    margin: 0 0 25px;
  }
  .box-04 .list-01 li .list-02 li.child{
    border-bottom: 0.2% solid #c5a75a;
    padding: 0 0 18px;
    margin: 56px 0 0;
  }
  .box-04 .list-01 li .list-02 li.child:before{
    width: 33px;
    height: 20px;
    -webkit-background-size: 100%;
         -o-background-size: 100%;
            background-size: 100%;
    top: -35px;
    left: calc(50% - 17px);
  }
  .box-04 .list-01 li .list-02 li.child .image{
    padding: 10px 0 0;
  }
  .box-04 .list-01 li .list-02 li.child .image img{
    width: 82%;
  }
  .box-04 .list-02 li .txt{
    padding: 18px 0 0;
  }

  /* box-05
  --------------------------------*/
  .box-05 .title{
    padding: 45px 0 0;
  }
  .box-05 .title + p{
    padding: 10px 0 0;
  }
  .box-05 .comment{
    padding: 0;
  }

  /* box-06
  --------------------------------*/
  .box-06 .btn01{
    width: 100%;
    padding: 0 25px;
  }
  .box-06 .btn01 img{
    width: 100%;
  }
  .box-06 .notice{
    width: 100%;
    padding: 0 25px 36px;
  }
  .box-06 .notice .title{
    font-size: 16px;
    padding: 10px 0;
    margin: 15px 0 0 0;
  }
  .box-06 .color-list{
    margin: 12px 0 0 0;
  }


  /* list
  --------------------------------*/
  ul.comment{
    margin: 10px 0 0;
  }
  ul.comment li{
    margin: 5px 0 0;
  }
  ul[class^="link-list"]{
    margin: 8px 0 0;
  }
  ul[class^="link-list"] a{
    font-size: 18px;
    padding: 0 0 0 27px;
  }
  ul.link-list01 li{
    -webkit-background-size: 20px;
         -o-background-size: 20px;
            background-size: 20px;
  }
  ul.link-list02 li{
    -webkit-background-size: 20px;
         -o-background-size: 20px;
            background-size: 20px;
  margin-left: calc(50% - 86px);
  }
  ul.color-list li.child{
    line-height: 1.2;
    background: url(img/20170619_toto_ico06.png) no-repeat 0 1px;
    -webkit-background-size: 10px;
         -o-background-size: 10px;
            background-size: 10px;
    padding: 0 0 0 12px;
    margin: 7px 0 0 0;
  }

  /* btn
  --------------------------------*/
  .btnWrap{
    padding: 10px 0 0;
  }
  .btnWrap li:after{
    -webkit-border-radius: 2px;
            border-radius: 2px;
    top: 4px;
  }
  .btnWrap li.siz-s{
    width: 85%;
  }
  .btnWrap li.siz-s:after, .btnWrap li.siz-m:after{
    width:  calc(100% + 6px);
    height: calc(50px + 2.5%);
  }
  .btnWrap li.siz-m{
    width: 100%;
  }
  
  .btnWrap li a{
    -webkit-border-radius: 2px;
            border-radius: 2px;
    padding: 2.5% 0;
    height: 50px;
  }
  .btnWrap li.color-01 a{
    border-bottom: 4px solid #aa130d;
  }
  .btnWrap li.color-02 a{
    border-bottom: 4px solid #ba5600;
  }
  .btnWrap li a img, .btnWrap li a .login{
    width: auto;
    height: 100%;
  }
  .btnWrap.column01{
    margin: 30px auto 0;
  }
  .btnWrap.column01 li{
    display: block;
    margin: 0 auto 14px;
  }

}

/* bx-slider
----------------------------*/
.bx-wrapper {
  position: relative;
  margin: 0 auto;
  padding: 0;
  *zoom: 1;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bx-wrapper .bx-viewport {
  -webkit-transform: translate(0);
  -moz-transform: translate(0);
  -ms-transform: translate(0);
  -moz-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  transform: translate(0);
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url(img/bx_loader.gif) center center no-repeat;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
  background-position: -86px -33px;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666 \9;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}
.bxslider {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}
.bxslider li {
  display: block;
  width: 100%;
  height: auto;
}
.bxslider li img {
  display: block;
  margin: 0 auto;
}
.txt-box {
  max-width: 80%;
  margin: 15px auto 0;
}
.bx-next,
.bx-prev {
  position: absolute;
  width: 61px;
  height: 60px;
  text-indent: -9999px;
  margin-top: -28px;
  background-size: 61px 60px;
}
.bx-next.disabled,
.bx-prev.disabled {
  display: none;
}

.bx-prev {
  background-image: url("img/ico_03.png");
  left: 15px;
  top:50%;
}
.bx-next {
  background-image: url("img/ico_02.png");
  right: 15px;
  top:50%;
}
.box-04 .bx-prev{
  left: -40px;
}
.box-04 .bx-next{
  right: -40px;
}


@media screen and (max-width:640px) {

  .slideBlock .bxslider li{
    padding: 0 45px;
  }
  .bx-next,
  .bx-prev {
    position: absolute;
    width: 40px;
    height: 40px;
    margin-top: -50px;
    background-size: 40px 40px;
  }

  .box-04 .bx-prev{
    left: 10px;
  }
  .box-04 .bx-next{
    right: 10px;
  }

  .bx-prev {
    left: 10px;
    top:52.4%;
  }
  .bx-next {
    right: 10px;
    top:52.4%;
  }

  .bxslider03 li{
    width: 100%;
  }
  .bxslider03 li img{
    width: 100%;
  }

}