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


#cover{
	position: fixed;
	top:-50vh;
	right: -50vh;
	width: 200vh;
	height: 200vH;
	transform: rotate(45deg);
	z-index: 2000;
	background-color: #FFF;
}

#oplogo{
	z-index: 2010;
	position: fixed;
	top:50%;
	left:50%;
	margin-left: 0;
	width: 89.5vw;
	height: 35vw;
transform: translate(-50%,-50%);
  overflow: hidden;
  text-align: center;
}
#oplogo img{
	position: absolute;
	top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
	z-index: 10;
}

#oplogo img.i2{
	opacity: 0;
}
#oplogo_in{
	width: 100vw;
	height: 100%;
  margin-left: -5vw;
  text-align: center;
	position: relative;
}
#oplogo p{
	position: absolute;
  height: 0;
	z-index: 0;
	width: 20%;
	background-color: #eb1c74;
}

#oplogo .p5{
  left: 80%;
  transform: rotate(25deg);
}
#oplogo .p4{
  left: 60%;
  width: 25%;
  transform: rotate(15deg);
    bottom: 0;
}
#oplogo .p3{
    left: 40%;
      transform: rotate(25deg);
}

#oplogo .p2{
  left: 20%;
  width: 25%;
    transform: rotate(15deg);
    bottom: 0;
}

#oplogo .p1{
  left: 0;
    transform: rotate(25deg);
}


.font_ani{
  display: inline-block;
  opacity: 0;
}


.pagen .active{
  opacity: 0.3
}
.pagenav b{
  opacity: 0.5
}
.pagenav .active{
  opacity: 1 !important
}
#footer{
  padding: 0 20px;

  box-sizing: border-box;
}
.information{
  margin-top: 18px;
  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: 0px;
  right: 0px;
  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: #EC1574;
  font-weight: bold;
  letter-spacing: 0.015em;
  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: 30px;
  margin-bottom:10px;
  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: 25px;
}
.d_btn {
  margin-top: 35px;
  font-size: 14px;
  font-weight: bolder;
  width: 200px;
  height: 47px;
  background-color: #EC1574;
  display: inline-block;

}

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

.d_btn a::before{
	content: "";
	height: 2px;
	background-color:#FFF;
	width: 12px;
	position: absolute;
	left: -15px;
	top: 23px;
	transition:0.3s;
}
.d_btn a::after{
	content: "";
	height: 12px;
	background-color:#FFF;
	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:#EC1574;
	border-radius:50px;
	margin:0;
	padding:0;
	transform:scale(0.5);
	cursor:pointer;
}


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


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

.detail2 .pagenav {
  background-color: #EC1574;
}

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


.detail2 .d_title_jp,.detail2 .d_title_en {
  color: #7E2B26;
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 .d_btn {
  background-color: #7E2B26;
    bottom: -90px;
}

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

.detail2 .cl{
  	background-color:#7E2B26;
}
.detail2 .d_btn a::before{
	background-color:#FFF;
}
.detail2 .d_btn a::after{
	background-color:#FFF;
}
.detail2 .pagenav {
  background-color: #7E2B26;
}





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


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

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

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

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

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

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


.detail3 .d_btn {
  background-color: #fff836;
      bottom: -90px;

}

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

.detail3 .cl{
  	background-color:#fff836;
}
.detail3 .cl::before {
  background-color:#000;
}
.detail3 .cl::after {
  background-color:#000;
}

.detail3 .d_btn a::before{
	background-color:#000;
}
.detail3 .d_btn a::after{
	background-color:#000;
}
.detail3 .pagen{
background-color:#000;
}
.detail3 .pagenav {
  background-color:#fff836;
}

.detail3 .pagenav b {
    display: inline-block;
    height: 5px;
    width: 5px;
    background-color: #000;
    margin: 23px 4px;
    border-radius: 10px;
}

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

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


#details .detail4 .detail_in {

  position: relative;
  z-index: 1;
  background-color: #ddffcf;
  box-sizing: border-box;
}
#details .detail4 .detail_in .text_d{

}
.detail4 .d_title_jp,.detail4 .d_title_en {
  color: #e11426;
  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 .d_btn {
  background-color: #e11426;
  bottom: -90px;
}

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

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

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


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

#details .detail5 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -82px;
  z-index: 2;
  top:310px;
}
#details .detail5 .detail_in {
  background: #e4b32e url(../../images/top/sp/detail/bg5.png) no-repeat center;
  background-size: 100% auto;
  background-position:0 415pt;
  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{

  margin-top: 220px;
}

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

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

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

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

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

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

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

#details .detail6 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -82px;
  z-index: 2;
  top:610px;
  margin-top: -340px;
}

#details .detail6 .detail_in {
  position: relative;
  z-index: 1;
  background:#fdde73 url(../../images/top/sp/detail/bg6.png) 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: 180px;
}

.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: -82px;
  z-index: 2;
  top:330px;
}
#details .detail7 .detail_in {
  position: relative;
  z-index: 1;
  text-align: center;
  background: #fe9fcd;

}


#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:240px;

}

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

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


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

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

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


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





#details .detail8 .img_d{
  background: url(../../images/top/sp/detail/back8.png) no-repeat top center;
  background-size: 340px auto;
  width: 100%;
  height: 420px;
}

#details .detail8 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -82px;
  z-index: 2;
  top:380px;
}
#details .detail8 .detail_in {
  background: url(../../images/top/sp/detail/bg8.jpg) repeat-y;
  background-size: 100% auto;
  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 .d_btn {
  background-color: #e71a19;
      bottom: -160px;
      right: 0;
}

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

.detail8 .cl{
  	background-color:#e71a19;
}
.detail8 .d_btn a::before{
	background-color:#FFF;
}
.detail8 .d_btn a::after{
	background-color:#FFF;
}

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

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




#details .detail9 .img_d{
  background: url(../../images/top/sp/detail/back9.jpg) no-repeat top center;
  background-size: 100% auto;
  width: 100%;
  height: 400px;
}

#details .detail9 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -82px;
  z-index: 2;
  top:300px;
}
#details .detail9 .detail_in {
  background:#5fb2d0 url(../../images/top/sp/detail/bg9.jpg) repeat-x;
  background-size: auto 100%;
  position: relative;
  z-index: 1;
  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: 275px;
}

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

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

.detail9 .text_bt {
  color: #07355f
}
.detail9 .d_btn {
  background: #07355f ;
      bottom: -160px;
      right: -55px;
}

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

.detail9 .cl{
  background:#07355f;
}
.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: #07355f;

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



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

#details .detail10 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -82px;
  z-index: 2;
  top: 340px;
}
#details .detail10 .detail_in {
  position: relative;
  z-index: 1;
  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: 80px
}

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

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

.detail10 .d_btn {
background: #100f10 ;
      bottom: -130px;
      right: 0;
}

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

.detail10 .cl{
background: #100f10 ;
}
.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: #100f10 ;
}



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

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

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

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


}
#details .detail11 .detail_in .logo{
  margin-top: 180px;
  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 .d_btn {
  background: #FFF ;
  color: #000;
      bottom: -80px;
}

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

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


.detail11 .pagenav {
    background: #FFF ;
}

.detail11 .pagenav b {
    display: inline-block;
    height: 5px;
    width: 5px;
    background-color: #000;
    margin: 23px 4px;
    border-radius: 10px;
}

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



#details .detail12 .img_d{


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

#details .detail12 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -82px;
  z-index: 2;
  top:420px;
}
#details .detail12 .detail_in {
  position: relative;
  z-index: 1;
  text-align: center;
    background: url(../../images/top/sp/detail/back12.jpg) no-repeat top center #FFF;
    background-size: 100% auto;
    background-position:0 45px;

}
#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: 340px;
}

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

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

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

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

.detail12 .cl{
  background: #767778;
}
.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: #e60012;
}

/*------------------------------------13*/



#details .detail13 .img_d{


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

#details .detail13 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -82px;
  z-index: 2;
  top:320px;
}
#details .detail13 .detail_in {
  position: relative;
  z-index: 1;
  text-align: center;
    background: url(../../images/top/sp/detail/back13.jpg) no-repeat top center #FFF;
    background-size: 100% auto;
    border-top: 4px #ed746b solid;

}
#details .detail13 .text_d_in{

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

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

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

.detail13 .d_btn {
  background: #e95283;
      bottom: -190px;
      right: -70px;
}

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

.detail13 .cl{
  background: #ed746b;
}
.detail13 .d_btn a::before{
	background-color:#FFF;
}
.detail13 .d_btn a::after{
	background-color:#FFF;
}

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

.detail13 .pagenav {
background: #ed746b;
}

/*------------------------------------14*/



#details .detail14 .img_d{


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

#details .detail14 .img_b{
  position: absolute;
  left: 50%;
  margin-left: -82px;
  z-index: 2;
  top:350px;
}
#details .detail14 .detail_in {
  position: relative;
  z-index: 1;
  text-align: center;
    background: url(../../images/top/sp/detail/back14.jpg) no-repeat top center #060606;
    background-size: 100% auto;

}
#details .detail14 .text_d_in{

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

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

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

.detail14 .d_btn {
  background:#B80101;
      bottom: -190px;
      right: -70px;
}

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

.detail14 .cl{
  background: #B80101;
}
.detail14 .d_btn a::before{
	background-color:#FFF;
}
.detail14 .d_btn a::after{
	background-color:#FFF;
}

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

.detail14 .pagenav {
background: #B80101;
}




.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);]
}
.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);
}


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

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


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

#details .detail3 .dpnl,
#details .detail11 .dpnl
{
margin-top: 1px;
background: no-repeat url("../../images/top/sp/b/al2.png") right center;
background-size:25px auto;
float: left;
}

#details .detail3 .dpnr,
#details .detail11 .dpnr{
  margin-top: 1px;
background: no-repeat url("../../images/top/sp/b/ar2.png") left center;
background-size: 25px 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;
  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;
}
.dpn12{
background: no-repeat url("../../images/top/sp/b/13.png") top center;
}
.dpn13{
background: no-repeat url("../../images/top/sp/b/14.png") top center;
}