html{
  background-color: #000;
}
@media screen and (max-width: 340px) {
nav>ul {
   margin-top: -80px;
}
}

#zoom {
  position: fixed;
  top: 15px;
  right: 18px;
  cursor: pointer;
	color: #FFF;
	font-weight: bold;

}

#zoom p{
	font-size: 12px;
}
#zoom img{
	padding-bottom: 3px;

}
#zoom .ac img{
	padding: 5px 1px 0 1px
}

#zoom b{
	margin-top: 8px;
	margin-left: 4px;
	display: inline-block;
	background: url("../../images/top/sp/zoom.png") no-repeat top center;
	background-size: contain;
	overflow: hidden;
	display:none;
}

#footer{
  padding: 0 20px;
  box-sizing: border-box;
}
.information{
  margin-top: 95px;
  position: relative;
  overflow: hidden;
  height: 50px;
  width: 100%;

}
.information p{
  font-size: 12px;
  font-weight: bold;
}
.information .items {
  width: auto;
  overflow: hidden;
  width: 100%;
	position: absolute;
  top:0;
  left: 0;

}
.information .items .item{
  padding-bottom: 20px;
  height: 50px;
  position: relative;
}

.information .items .title a{
  position: absolute;
    white-space: nowrap;
  top:20px;
  left: 0;
}

.information .items .time{
  margin-left: 80px;
  margin-top: 1px;
}
.sw_bar {
  display: none;
  position: fixed;
  bottom: 80px;
  left: 10%;
  height:2px;
  width: 80%;
  background-color: #FFF;
  color: #FFF;
  font-weight: bold;
  z-index: 1001
}

.in_bar {
  width: 100%;
  position: relative;

}

.sw_bar p{
  height:30px;
  position: absolute;
  left: 0;
  top:-14px;
  margin-left: -15px;
  width:30px;
	background: url("../../images/top/sp/bar_btn.png") no-repeat center;
  	background-size: contain;
    z-index: 2;
}
.sw_bar b{
  height:8px;
  width:8px;
  left: 0;
  background: #ffd600;
  position: absolute;
  top:-3px;
  z-index: 1;
  border-radius:8px;
}


.sw_icon {
  display: none;
  position: fixed;
  top: 50%;
  right: 50%;
  margin-top: 120px;
  margin-left: -25px;
	color: #FFF;
	font-weight: bold;
}
.sw_icon .sw{
  position: relative;
}

.sw_icon .sw::before {
  content: "";
  background:  url("../../images/top/sp/swback.png") no-repeat center;
  background-size: 100% 100%;
  width: 300px;
  height: 250px;
  position: absolute;
  top:-90px;
opacity: 0.3;
  left: -100px;
  z-index: -1;
}

.sw_icon .s1{
  position: absolute;
  top:2px;
  left: 15px;
  width: 0px;
  height: 4px;
  background-color: #FFF;
}

.sw_icon .s2{
  position: absolute;
  top:14px;
  left: 19px;
  width: 0px;
  height: 4px;
  background-color: #FFF;
}

.news {
	position: relative;
	color: #FFF;
	text-align: left;
}
.news .time{
	font-weight: bold;
	font-size: 11px;
	margin-bottom: 6px;

}

.news .time time{
	font-weight:400;
	font-size: 11px;
	margin-left: 5px;
}
.news .title{
font-size: 11px;
}
canvas {
  position: fixed;
  top: 0;
  left: 0;

}
#first_view{
  position: fixed;
  top: 0;
  left: 0;
}

.op_title {
  width: 100vw;
  height: 29.17vw;
  position: fixed;
  top: 50%;
  left: 0;
  margin-top: -14.5vw;
  color: #FFF;
  font-size: 11px;
  z-index: 10000;
  pointer-events: none;
}

.op_title_in {
  width: 100%;
  height: 100%;
  position: relative;
}

.op_title_in img {
  position: absolute;
  top: 0;
  left: 0;
}

.op_title_in img.op_on {
  opacity: 0;
}

.op_title {
  font-size: 80px;
  text-shadow: 0 1px 30px #FB1684, 0 0 12px #fff, 2px 5px 60px #990a52;
  stroke-dasharray: 340, 340;
  stroke-dashoffset: 100;
}

#details {
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 20, 0.8);
  position: fixed;
  z-index: 1510;
  top: 0;
  left: 0;
  display: block;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  transform: translate3d(0, 0, 0);

}

#details .detail {
  width: 100%;
  display:block;
	opacity: 1;
  padding: 10px;
  min-height: 100vh;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

#details .detail_in {
  background-color: #FFF;
  position: relative;
  min-height: 140vh;
  width: 100%;
  height: 100%;
	margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#details .detail .cl {
  top: 5px;
  right: 5px;
  width: 68px;
  height: 68px;
  position: absolute;
  cursor: pointer;
  z-index: 100;
}

#details .d_cover{
  width: 100%;
  height: 100%;
    min-height: 140vh;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  background: #fff219;
}

#details .detail2 .d_cover{
  background: #005f25;
}

#details .detail3 .d_cover{
  background-color: #FFF;
  background: url(../../images/top/sp/detail/back4_2.jpg);
  background-size: 50px;
}
#details .detail4 .d_cover{
  background-color: #FFF;
}


#details .detail4 .d_cover .c1{
  width: 100%;
  height: 33vh;

}
#details .detail4 .d_cover .c2{
  width: 100%;
  height: 33vh;
  background-color: #068b48;
}

#details .detail4 .d_cover .c3{
  width: 100%;
  height: 60%;
  background-color:#d4000a;
}


#details .detail5 .d_cover{
  background-color: #000;
}

#details .detail6 .d_cover{
  background-color: #e60012;
}

#details .detail7 .d_cover{
  background-color: #ecad1b;
}

#details .detail8 .d_cover{
  background-color: #e60012;
}

#details .detail9 .d_cover{
  background-color: #000;
}

#details .detail10 .d_cover{
  background-color: #4d96c4;
}

#details .detail11 .d_cover{
  background-color: #eb5e52 ;
}

#details .detail12 .d_cover{
  background-color:  #005f27;
}
#details .text_d {
  width: 100%;
  text-align: left;
  position: relative;
  margin-bottom: 50px;
}

.d_bottom {
  position: relative;
  text-align: center;
}
.img_d{
	width: 100%;
	height: 465px;
}
.text_d_in {
  width: 100%;
  position: relative;

}

.d_title_jp, .d_title_en {
  line-height: 1.75;
  font-size: 18px;
  color: #f2e121;
  font-weight: bold;
  letter-spacing: 0.065em;
  margin-bottom: 30px;
	margin-top: 20px;
  padding:0 25px;
  box-sizing: border-box;
}
.d_text_en br,.d_text_jp br,.d_title_en br{
  display: none;
}
.d_title_en {
  line-height: 1.85;
  display: none;
}

.d_text_jp {
padding:0 25px;
  line-height: 1.85;
  font-size: 12px;
  color: #000;
  letter-spacing: 0;
  margin-bottom: 35px;
    box-sizing: border-box;
}

.d_text_en {
  line-height: 1.85;
  display: none;
  padding:0 25px;
    box-sizing: border-box;
}

.d_text_en {
  line-height: 22px;
  font-size: 12px;
  color: #000;
  letter-spacing: 0;
  margin-bottom: 40px;
}

.d_copy {
  margin-top: 0;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  width: 100%;
  text-align: center;
}


.d_logo {
  margin-top: 30px;
  font-weight: bolder;
  width: 100%;
  text-align: center;
}

.text_bt {
  line-height: 26px;
  font-weight: bolder;
  width: 100%;
  text-align: center;

}

.text_bt p {
  font-size: 18px;
  display: inline-block;
  cursor: pointer;
}
.text_bt p.jp_btn{
	margin-right: 8px;
}
.d_btn {
  margin-top: 35px;
  font-size: 14px;
  font-weight: bolder;
  width: 200px;
  height: 47px;
  background-color: #000;
  display: inline-block;

}

.d_btn a {
  padding: 17px 20px;
  letter-spacing: 0.010em;
  color: #f2e121;
  display: inline-block;
	position: relative;
	transition:0.3s;
}

.d_btn a::before{
	content: "";
	height: 2px;
	background-color:#f2e121;
	width: 12px;
	position: absolute;
	left: -15px;
	top: 23px;
	transition:0.3s;
}
.d_btn a::after{
	content: "";
	height: 12px;
	background-color:#f2e121;
	width: 2px;
	position: absolute;
	left: -10px;;
	top: 18px;
	transition:0.3s;
}


.cl{
	position:absolute;
	display:inline-block;
	top:0px;
	right: 0px;
	width:32px;
	height:32px;
	border:0;
	background-color:black;
	border-radius:50px;
	margin:0;
	padding:0;
	transform:scale(0.5);
	cursor:pointer;
	transition:0.3s;
}


.text_active{
  opacity: 0.5
}
#details,#details .detail{
  display: none;
}


#details .detail1 .img_d{
  background: url(../../images/top/sp/detail/back1.jpg) no-repeat left center;
  background-size: cover;
}
/*------------------------------------2*/
#details .detail2 .img_d{
  background: url(../../images/top/sp/detail/back2.jpg) no-repeat left center;
  background-size: cover;
}

#details .detail2 .detail_in {
  background-color: #eaf9d8;
}
.detail2 .d_title_jp,.detail2 .d_title_en {
  color: #71b13f;
margin-bottom: 30px;
}
.detail2 .d_title_en {
font-size: 20px;
line-height: 1.4;
letter-spacing: 0.01em;
}
.detail2 .d_text_jp {
  font-size: 12px;
  line-height: 1.6;
  color: #000;
  margin-bottom: 30px;
}

.detail2 .d_text_en {
  color: #000;
  line-height: 1.4;
  margin-bottom: 30px;
}

.detail2 .d_copy {
  color: #000;
}


.detail2 .d_logo {
  left: 0;
    bottom: -90px;
}

.detail2 .text_bt {
  color: #005f25
}
.detail2 .d_btn {
  background-color: #005f25;
    bottom: -90px;
}

.detail2 .d_btn a {
  color: #FFF;
}

.detail2 .cl{
  	background-color:#005f25;
}
.detail2 .d_btn a::before{
	background-color:#FFF;
}
.detail2 .d_btn a::after{
	background-color:#FFF;
}
.detail2 .pagen{
  background-color: #eaf9d8;
}
.detail2 .pagenav {
  background-color: #005f25;
}



/*------------------------------------3*/


#details .detail3 .img_d{
  background: url(../../images/top/sp/detail/back3.jpg) no-repeat left center;
  background-size: cover;
}

#details .detail3 .d_logo {
    margin-top: 50px;
  }

#details .detail3 .detail_in {
  background-color: #FFF;
  background: url(../../images/top/sp/detail/back4_2.jpg);
  background-size: 10%;
  position: relative;
  z-index: 1;
}

#details .detail3 .detail_in::after{
  content:"";
  position: absolute;
  top:485px;
  left: 4%;
  width: 92%;
  height:68%;
  z-index: -1;
  background: #FFF;
}
.detail3 .d_title_jp,.detail3 .d_title_en {
  color: #000;
}

.detail3 .d_text_jp {
  font-size: 12px;
  color: #000;
}

.detail3 .d_text_en {
  color: #000;
}

.detail3 .d_copy {
  color: #000;
}


.detail3 .d_logo {
  left: 0;
  bottom: -70px;
}

.detail3 .text_bt {
  color: #000
}
.detail3 .d_btn {
  background-color: #000;
      bottom: -70px;
}

.detail3 .d_btn a {
  color: #FFF;
}

.detail3 .cl{
  	background-color:#000;
}
.detail3 .d_btn a::before{
	background-color:#FFF;
}
.detail3 .d_btn a::after{
	background-color:#FFF;
}


/*------------------------------------4*/





#details .detail4 .img_d{
  background: url(../../images/top/sp/detail/back4.jpg) no-repeat left center;
  background-size: cover;
}


#details .detail4 .detail_in {
  background-color: #d4000a;
  position: relative;
  z-index: 1;
  border-top: 6px solid #d4000a;
  border-left: 6px solid #d4000a;
  border-right: 6px solid #d4000a;
  background-color: #FFF;
  box-sizing: border-box;
}
#details .detail4 .detail_in .text_d{

}
.detail4 .d_title_jp,.detail4 .d_title_en {
  color: #068b48;
  margin-bottom: 30px;
}

.detail4 .d_text_jp {
  font-size: 12px;
  color: #000;
  margin-bottom: 30px;
  line-height: 1.6;
}

.detail4 .d_text_en {
  color: #000;
  margin-bottom: 30px;
}

.detail4 .d_copy {
  color: #000;
}


.detail4 .d_logo {
  left: 0;
  bottom: -90px;
}

.detail4 .text_bt {
  color: #068b48
}
.detail4 .d_btn {
  background-color: #d4000a;
      bottom: -90px;
}

.detail4 .d_btn a {
  color: #FFF;
}

.detail4 .cl{
  	background-color:#068b48;
}
.detail4 .d_btn a::before{
	background-color:#FFF;
}
.detail4 .d_btn a::after{
	background-color:#FFF;
}

.detail4 .pagenav {
  background-color: #d4000a;
}

/*------------------------------------5*/


#details .detail5 .img_d{
  background: url(../../images/top/sp/detail/back5.jpg) no-repeat left center;
  background-size: cover;
}

#details .detail5 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -100px;
  z-index: 2;
  top:310px;
}
#details .detail5 .detail_in {
  background-color: #000;
  position: relative;
  z-index: 1;

  text-align: center;
}
#details .detail5 .text_d_in{

}
#details .detail5 .detail_in .logo{
  margin-bottom:30px;
  text-align: center;
}
#details .detail5 .detail_in .m_logo{
margin-bottom:30px;
  text-align: center;
}
#details .detail5 .detail_in .text_d{
  background-color: #000;
  margin-top: 240px;
}

.detail5 .d_copy {
  color: #FFF;
  text-align: center;
}

.detail5 .d_logo {
  left: 0;
  bottom: -90px;
}

.detail5 .text_bt {
  color: #be0c23
}
.detail5 .d_btn {
  background-color: #be0c23;
      bottom: -90px;
}

.detail5 .d_btn a {
  color: #FFF;
}

.detail5 .cl{
  	background-color:#be0c23;
}
.detail5 .d_btn a::before{
	background-color:#FFF;
}
.detail5 .d_btn a::after{
	background-color:#FFF;
}
.detail5 .pagen{
background-color:#000;
}
.detail5 .pagenav {
  background-color:#be0c23;
}

/*------------------------------------6*/





#details .detail6 .img_d{
  background: url(../../images/top/sp/detail/back6.jpg) no-repeat center;
  background-size: cover;
  width: 100%;
}

#details .detail6 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -100px;
  z-index: 2;
  top:610px;
  margin-top: -240px;
}
#details .detail6 .detail_in {
  position: relative;
  z-index: 1;
  background: url(../../images/top/sp/detail/back6_2.jpg) repeat-x;
background-size: auto 100%;
  text-align: center;
}
#details .detail6 .text_d_in{

}
#details .detail6 .detail_in .logo{
  margin-bottom:30px;
  text-align: center;
}
#details .detail6 .detail_in .m_logo{
margin-bottom:30px;
  text-align: center;
}
#details .detail6 .detail_in .text_d{
margin-top:310px;
}

.detail6 .d_copy {
  color: #FFF;
  text-align: center;
}

.detail6 .d_logo {
  left: 0;
  bottom: -90px;
}

.detail6 .text_bt {
  color: #e60012
}
.detail6 .d_btn {
  background-color: #e60012;
      bottom: -90px;
      right: -60px;
}

.detail6 .d_btn a {
  color: #FFF;
}

.detail6 .cl{
  	background-color:#e60012;
}
.detail6 .d_btn a::before{
	background-color:#FFF;
}
.detail6 .d_btn a::after{
	background-color:#FFF;
}
.detail6 .pagen{
background-color:rgba(0,0,0,0);
}
.detail6 .pagenav {
  background-color:#e60012;
}


/*------------------------------------7*/



#details .detail7 .img_d{
  background: url(../../images/top/sp/detail/back7.jpg) no-repeat top center;
  background-size: 100% auto;
  width: 100%;
}

#details .detail7 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -100px;
  z-index: 2;
  top:400px;
}
#details .detail7 .detail_in {
  position: relative;
  z-index: 1;
  background-color: #FFFF;
  text-align: center;
}


#details .detail7 .text_d_in{


}
#details .detail7 .detail_in .logo{
  margin-bottom:0px;
  text-align: center;
}
#details .detail7 .detail_in .m_logo{
  text-align: center;
}
#details .detail7 .detail_in .text_d{
  margin-top: 320px;

}

.detail7 .d_copy {
  color: #000;
  text-align: center;
}

.detail7 .d_logo {
  left: 0;
  bottom: -90px;
}

.detail7 .text_bt {
  color: #ecad1b
}
.detail7 .d_btn {
  background-color: #ecad1b;
      bottom: -110px;
      right: 0;
}

.detail7 .d_btn a {
  color: #FFF;
}

.detail7 .cl{
  	background-color:#ecad1b;
}
.detail7 .d_btn a::before{
	background-color:#FFF;
}
.detail7 .d_btn a::after{
	background-color:#FFF;
}
.detail7 .pagenav {
  background-color:#ecad1b;
}


/*------------------------------------8*/





#details .detail8 .img_d{
  background: url(../../images/top/sp/detail/back8.jpg) no-repeat center;

  background-size: cover;
  width: 100%;
}

#details .detail8 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -100px;
  z-index: 2;
  top:420px;
}
#details .detail8 .detail_in {
  border-top: 6px solid #e60012;
  position: relative;
  z-index: 1;
  text-align: center;
}
#details .detail8 .text_d_in{

}
#details .detail8 .detail_in .logo{
  margin-bottom:25px;
  text-align: center;
}
#details .detail8 .detail_in .m_logo{
margin-bottom:30px;
  text-align: center;
}
#details .detail8 .detail_in .text_d{
margin-top: 340px;
}

.detail8 .d_copy {
  text-align: center;
}

.detail8 .d_logo {
  left: 0;
  bottom: -90px;
}

.detail8 .text_bt {
  color: #e60012
}
.detail8 .d_btn {
  background-color: #e60012;
      bottom: -160px;
      right: 0;
}

.detail8 .d_btn a {
  color: #FFF;
}

.detail8 .cl{
  margin-top: 7px;
  	background-color:#000;
}
.detail8 .d_btn a::before{
	background-color:#FFF;
}
.detail8 .d_btn a::after{
	background-color:#FFF;
}

.detail8 .pagenav {
  background-color:#e60012;
}

/*------------------------------------9*/




#details .detail9 .img_d{
  background: url(../../images/top/sp/detail/back9.jpg) no-repeat top center;

  background-size: 100% auto;
  width: 100%;
}

#details .detail9 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -100px;
  z-index: 2;
  top:390px;
}
#details .detail9 .detail_in {
  position: relative;
  z-index: 1;
  background:#000;
  background-size: auto 100%;
  text-align: center;

}
#details .detail9 .text_d_in {

}
#details .detail9 .text_d_in{


}
#details .detail9 .detail_in .logo{
  margin-bottom:20px;
  text-align: center;
}
#details .detail9 .detail_in .m_logo{
margin-bottom:25px;
  text-align: center;
}
#details .detail9 .detail_in .text_d{
margin-top: 330px;
}

.detail9 .d_copy {
  color: #FFF;
  text-align: center;
}

.detail9 .d_logo {
  left: 0;
  bottom: -90px;
}

.detail9 .text_bt {
  color: #e60012
}
.detail9 .d_btn {
  background: url(../../images/top/sp/detail/logo/b9.jpg) ;
      bottom: -160px;
      right: -55px;
}

.detail9 .d_btn a {
  color: #FFF;
}

.detail9 .cl{
  background: url(../../images/top/sp/detail/logo/b9.jpg) ;
}
.detail9 .d_btn a::before{
	background-color:#FFF;
}
.detail9 .d_btn a::after{
	background-color:#FFF;
}

.detail9 .pagen{
background-color:rgba(0,0,0,0);
}

.detail9 .pagenav {
  background: url(../../images/top/sp/detail/logo/b9.jpg) repeat-x;

}
/*------------------------------------10*/



#details .detail10 .img_d{
  background: url(../../images/top/sp/detail/back10.jpg) no-repeat left center;
  background-size:100% auto;
  width:100%;
}

#details .detail10 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -100px;
  z-index: 2;
  top:480px;
}
#details .detail10 .detail_in {
  position: relative;
  z-index: 1;
  background:#fbfbf0;
  background-size: auto 100%;
  text-align: center;
}
#details .detail10 .text_d_in{

}
#details .detail10 .detail_in .logo{
  margin-bottom:20px;
  text-align: center;
}
#details .detail10 .detail_in .m_logo{
margin-bottom:25px;
  text-align: center;
}
#details .detail10 .detail_in .text_d{
  margin-top: 410px

}

.detail10 .d_copy {
  color: #FFF;
  text-align: center;
}

.detail10 .d_logo {
  left: 0;
  bottom: -90px;
}

.detail10 .text_bt {
  color: #4d96c4
}
.detail10 .d_btn {
  background: #4d96c4 ;
      bottom: -130px;
      right: 0;
}

.detail10 .d_btn a {
  color: #FFF;
}

.detail10 .cl{
  background: #4d96c4 ;
}
.detail10 .d_btn a::before{
	background-color:#FFF;
}
.detail10 .d_btn a::after{
	background-color:#FFF;
}


.detail10 .pagen{
background-color:rgba(0,0,0,0);
}

.detail10 .pagenav {
background: #4d96c4 ;
}



/*------------------------------------11*/

#details .detail11 .img_d{
background: url(../../images/top/sp/detail/back11.jpg) repeat-x top center #FFF;
  background-size:100% auto;
}

#details .detail11 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -100px;
  z-index: 2;
  top:270px;
}
#details .detail11 .detail_in {
  position: relative;
  z-index: 1;
  text-align: center;

    background-size: 100% auto;
}
#details .detail11 .text_d_in{


}
#details .detail11 .detail_in .logo{
  margin-top: 130px;
  text-align: center;
}
#details .detail11 .detail_in .m_logo{

  text-align: center;
}
#details .detail11 .detail_in .text_d{
margin-top: 200px;
}

.detail11 .d_copy {
  margin-top: 30px;
  color: #999;
  text-align: center;
}

.detail11 .d_logo {
  left: 0;
  bottom: -90px;
}

.detail11 .text_bt {
  color: #4d96c4
}
.detail11 .d_btn {
  background: #eb5e52 ;
      bottom: -80px;
}

.detail11 .d_btn a {
  color: #FFF;
}

.detail11 .cl{
  background: #eb5e52 ;
}
.detail11 .d_btn a::before{
	background-color:#FFF;
}
.detail11 .d_btn a::after{
	background-color:#FFF;
}


.detail11 .pagenav {
  background: #eb5e52 ;
}



/*------------------------------------12*/



#details .detail12 .img_d{


  background-size: auto 100%;
  width: 0%;
}

#details .detail12 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -100px;
  z-index: 2;
  top:240px;
}
#details .detail12 .detail_in {
  position: relative;
  z-index: 1;
  text-align: center;
    background: url(../../images/top/sp/detail/back12.jpg) no-repeat top center #efe3ca;
    background-size: 100% auto;
    border-top:6px solid #005f27;

}
#details .detail12 .text_d_in{

}
#details .detail12 .detail_in .logo{
  margin-top: 0px;
  margin-bottom:30px;
  text-align: center;
}
#details .detail12 .detail_in .m_logo{
  margin-bottom:30px;
  text-align: center;
}
#details .detail12 .detail_in .text_d{
margin-top: 170px;
}

.detail12 .d_copy {
  color: #FFF;
  text-align: center;
}

.detail12 .d_logo {
  left: 0;
  bottom: -90px;
}

.detail12 .text_bt {
  color: #4d96c4
}
.detail12 .d_btn {
  background: #7f4e2e;
      bottom: -190px;
      right: -70px;
}

.detail12 .d_btn a {
  color: #FFF;
}

.detail12 .cl{
  background: #7f4e2e;
  margin-top: 7px;
}
.detail12 .d_btn a::before{
	background-color:#FFF;
}
.detail12 .d_btn a::after{
	background-color:#FFF;
}

.detail12 .pagen{
background-color:rgba(0,0,0,0);
}

.detail12 .pagenav {
background: #005f27;
}





.d_btn a:hover::before{
	background-color:#CCC;
	width: 35px;
	right: -29px;
}
.d_btn a:hover::after{
	background-color:#CCC;
	right: -30px;
}



#details .pagen1 {
  cursor: pointer;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100px;
  z-index: 1020;
  display: none;
  background: url(../../images/top/sp/a1.png) no-repeat bottom center;
}

#details .pagen2 {
  cursor: pointer;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1020;
  left: 0;
  height: 100px;
  display: none;
  background: url(../../images/top/sp/a2.png) no-repeat bottom center;
}

.cl:before{
	content:"";
	position:absolute;
	display:inline-block;
	top:20px;
	left:32px;
	width:5px;
	height:30px;
	border:0;
	margin:0;
	padding:0;
	background-color:white;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);]
	transition:0.3s;
}
.cl:after{
	content:"";
	position:absolute;
	display:inline-block;
	top:20px;
	left:32px;
	width:5px;
	height:30px;
	border:0;
	margin:0;
	padding:0;
	background-color:white;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	transition:0.3s;
}


.pagenav{
  width: 100%;
  margin: 0 0 50px;
  background-color: #000;
  text-align: center;
}
.pagenav b{
  display: inline-block;
  height: 5px;
  width: 5px;
  background-color: #fff;
  margin:23px 6px;
  border-radius:10px;
}
.pagenav b.active{
  opacity: 0.5;
}

.dpnl{
width: 30px;
height: 50px;
margin-top: 1px;
background: no-repeat url("../../images/top/sp/b/al.png") right center;
background-size:35px auto;
float: left;
}


.dpnr{
  margin-top: 1px;
width: 30px;
height: 50px;
background: no-repeat url("../../images/top/sp/b/ar.png") left center;
background-size: 35px auto;
float: right;
}

 .dpn{
   display: inline-block;
  width: 50px;
  height: 110px;
  margin:15px 10px;
  overflow: hidden;
  background-size: 48px auto !important;
}

.pagen{
  width: 92%;
  margin: 0 4%;
  margin-bottom: 30px;
  background-color: #FFF;
  z-index: 0;
  z-index: 100;
}
 .dpn0{
background: no-repeat url("../../images/top/sp/b/1.png") top center;
}
 .dpn1{
background: no-repeat url("../../images/top/sp/b/2.png") top center;
}
 .dpn2{
background: no-repeat url("../../images/top/sp/b/3.png") top center;
}
 .dpn3{
background: no-repeat url("../../images/top/sp/b/4.png") top center;
}
 .dpn4{
background: no-repeat url("../../images/top/sp/b/5.png") top center;
}
 .dpn5{
background: no-repeat url("../../images/top/sp/b/6.png") top center;
}
 .dpn6{
background: no-repeat url("../../images/top/sp/b/7.png") top center;
}
 .dpn7{
background: no-repeat url("../../images/top/sp/b/8.png") top center;
}
 .dpn8{
background: no-repeat url("../../images/top/sp/b/9.png") top center;
}
 .dpn9{
background: no-repeat url("../../images/top/sp/b/10.png") top center;
}
 .dpn10{
background: no-repeat url("../../images/top/sp/b/11.png") top center;
}
 .dpn11{
background: no-repeat url("../../images/top/sp/b/12.png") top center;
}