/* CSS Document */
#mv{
background:#000;
height:500px;
position:relative;
z-index:1;
overflow:hidden
}
#mv .inner{
width:100%;
text-align:center
}
#mv .inner .bg{
width:100%;
height:auto;
position:absolute;
top:0;
left:50%;
margin-left:-50%;
}
@media (max-width: 1036px){
#mv .inner .bg{ width:1036px; }
}
/* #mv .dot{
display:block;
width:100%;
height:200%;
background:url(/brand/tire/advan/parts/img/over_dot2.png);
background-attachment:fixed;
position:absolute;
z-index:10;
bottom:0;
left:0
} */
#logo{
position:absolute;
left:50%;
top:50%;
margin:-37px 0 0 -200px;
z-index:20;
display: none
}
#mv .mv-box{
background:#111;
position: relative;
/* width:960px; */
height:500px;
}
#mv .mv-box span{
position:absolute;
width:25%;
height:250px;
background:#000;
z-index:10;
display:block
}
#mv .mv-box span.e1{ top:0; right:75%;}
#mv .mv-box span.e2{ top:0; right:50%;}
#mv .mv-box span.e3{ top:0; right:25%;}
#mv .mv-box span.e4{ top:0; right:0;}
#mv .mv-box span.e5{ top:50%; right:75%;}
#mv .mv-box span.e6{ top:50%; right:50%;}
#mv .mv-box span.e7{ top:50%; right:25%;}
#mv .mv-box span.e8{ top:50%; right:0;}
#mv .btn-movie{
width:96px;
height:96px;
position:absolute;
left:50%;
margin-left:-48px;
bottom:40px;
z-index:1000;
display:none;
}
/* #mv .btn-movie:hover{
opacity:.5!important;
-webkit-opacity:.5!important;
} */
#news{
background:#000;
font-size:13px;
text-align:left;
border-top:1px solid #000;
}
#news a{
padding:17px 0;
line-height:1;
color:#999;
display:block;
}
#news a:hover{
text-decoration:none;
opacity:.6
}
#news a time,
#news a.link-more{
color:#cd0000;
}
#news a time{
padding-right:1em;
}
#news a.link-more{
position: absolute;
right:0;
top:0;
z-index:10;
background:#000;
padding:17px 12px
}
#news a.link-more:hover{
background:#cd0000;
color:#000
}
/* column */
.column{
background:#000;
z-index:1
}
.column .wrap{
display:block;
line-height:1;
font-size:0;
position:relative;
z-index:1;
overflow:hidden;
}
.column .wrap:before{
content:'';
background:url(/brand/tire/advan/parts/img/over_dot.png);
background-attachment:fixed;
position:absolute;
z-index:5;
width:100%;
height:100%;
left:0;
top:0;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
}
.column .wrap:hover:before{
opacity:.5;
-webkit-opacity:.5;
}
.column .wrap img.bg{
width:1920px;
position:absolute;
left:50%;
margin-left:-960px;
top:50%;
margin-top:-130px
}
/* sttl --------------------------------------------------- */
.column .sttl{
display:inline-block;
height:45px;
position:absolute;
z-index:9;
left:50%;
top:55px;
}
.column .sttl img{
display:none;
}
.column .sttl span{
display:block;
width:74px;
height:0;
position: absolute;
top:auto;
bottom:21px;
left:-40px;
background: url(/brand/tire/advan/parts/img/bg_sttl.png) 0 100% no-repeat;
z-index:-1
}
/* fleva --------------------------------------------------- */
#fleva{
background:#000;
height:320px;
position:relative;
text-align:center;
}
#fleva.anm-end{
background:#fff;
}
#fleva.anm-end a{
-webkit-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}
#fleva.anm-end a:hover{
opacity:.9;
-webkit-opacity:.8;
}
#fleva img.bg,
#fleva img.over{
position:absolute;
left:50%;
top:50%;
margin:-160px 0 0 -960px;
z-index:1
}
#fleva img.over{
z-index:10;
}
#fleva img.bg{
opacity:0
}
#fleva #copy{
width:254px;
height:73px;
position:absolute;
z-index:30;
left:50%;
top:89px;
margin-left:33px;
}
#fleva #copy img{
position:relative;
z-index:100;
}
#fleva #copy span{
display:block;
height:100%;
width:0;
position:absolute;
left:0;
top:0;
background:#fff;
}
/* #products --------------------------------------------------- */
#products,
#products .inner{
height:320px;
position:relative;
z-index:1
}
#products.anm-end a.anchor{
display:block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:10;
-webkit-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}
#products.anm-end a.anchor:hover{
background:rgba(255,255,255,.05)
}
#products .lineup{
width:920px;
bottom:0;
position:absolute;
z-index:20;
left:50%;
margin-left:-460px;
}
#products .lineup li{
position:absolute;
z-index:5;
width:200px;
height:70px;
bottom:125px;
display:none;
}
#products .lineup li a{
display:block;
-webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
-ms-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
}
#products .lineup li a:hover{
opacity:.5;
-webkit-opacity:.5;
}
#products .lineup li+li{ left:240px}
#products .lineup li+li+li{ left:480px}
#products .lineup li+li+li+li{ left:720px}
#products .bg{
display:none;
}
/* #equipment --------------------------------------------------- */
#equipment{
height:260px;
position:relative
}
#equipment.anm-end a.anchor{
display:block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:100;
-webkit-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}
#equipment.anm-end a.anchor:hover{
background:rgba(255,255,255,.05)
}
#equipment ul{
padding-top:150px;
display:none
}
#equipment ul li{
float:left;
display:inline-block;
padding:10px 0;
font-size:15px;
color:#ddd;
padding-right:15px;
}
#equipment ul li:before{
content:'／';
font-size:15px;
font-weight:bold;
color:#cd0000;
margin-right:15px;
}
#equipment ul li:first-child:before{
display:none
}
#equipment ul li+li{
}
#products .sttl,
#contents .sttl,
#equipment .sttl{
width:250px;
text-align:left;
margin-left:-475px
}
#history .sttl,
#gallery .sttl,
#m-sports .sttl{
width:250px;
text-align:right;
margin-left:215px
}
#history .sttl span,
#gallery .sttl span,
#m-sports .sttl span{
left:auto;
right:-40px;
}
.bg-black{
background:#000
}
/* wide-box */
#history,
#history a,
#m-sports,
#m-sports a,
#gallery,
#gallery a{
position:relative;
height:260px;
}
#history .wrap,
#m-sports .wrap,
#gallery .wrap{
opacity:0;
}
#contents a{
display:block;
padding:44px 0;
height:170px;
overflow:hidden;
background-attachment:fixed;
}
#contents a,
#contents a .object{
-webkit-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}
#contents.anm-end a{
background:url(/brand/tire/advan/parts/img/bg_contents.png) 0 0;
}
#contents a:hover .object{
opacity:.5
}
#contents a:hover{
background-color:#111;
}
#contents a .object{
display:none;
position:absolute;
top:40px;
left:50%;
margin-left:-100px;
}
aside{
height:260px;
}
/* top animetion ------------------------------------------------------------- */
#top header{
opacity: 0;
top:-100%;
}
.column.anm-end:before,
aside.anm-end:before{
-webkit-animation: run-line 500ms ease both;
-webkit-animation-play-state: paused;
-moz-animation: run-line 500ms ease both;
-moz-animation-play-state: paused;
-o-animation: run-line 500ms ease both;
-o-animation-play-state: paused;
animation: run-line 500ms ease both;
animation-play-state: paused;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes run-line {
0% { width: 0;}
100% { width: 100%;}
}
@-moz-keyframes run-line {
0% { width: 0;}
100% { width: 100%;}
}
@-o-keyframes run-line {
0% { width: 0;}
100% { width: 100%;}
}
@keyframes run-line {
0% { width: 0;}
100% { width: 100%;}
}
/* 動画部分 */
#m-overlay{
position:fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
min-height: 100%;
background: #cd0000;
z-index: 100000;
-webkit-transition: 0.5s cubic-bezier(0.525, 0.2, 0.2, 0.975);
transition: 0.5s cubic-bezier(0.525, 0.2, 0.2, 0.975);
-webkit-transform-origin: top left;
transform-origin: top left;
}
#m-overlay.show{
-webkit-transform: scaleY(1);
transform: scaleY(1);
background: #000;
}
#m-overlay.hide{
-webkit-transform: scaleY(0);
transform: scaleY(0);
background: #cd0000;
}
#player{
position:fixed;
z-index: 100010;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100%;
-webkit-transition: 0.5s all ease-out;
transition: 0.5s all ease-out;
cursor: pointer;
}
#player.hide{
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
#player.show{
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#player #mov{
width:960px;
height:500px;
top:50%;
left:50%;
margin:-250px 0 0 -480px;
position: fixed;
}
#player .btn-close{
width:26px;
height:26px;
top:50%;
left:50%;
margin:-290px 0 0 490px;
position: absolute;
}
@media only screen and (max-width: 640px){
#top header{
opacity:1;
top:0
}
#mv{
overflow: inherit;
height:auto;
min-height:282px;
}
#mv .inner{
width:100%;
text-align:center
}
#mv .inner .bg{
display:none
}
#mv .sp{
width:100%;
height:auto
}
#mv .dot{
opacity:.2;
-webkit-opacity:.2;
}
#logo{
width:220px;
height:auto;
position:absolute;
left:50%;
top:200px;
margin:-18px 0 0 -110px;
z-index:20;
display: none
}
#mv .mv-box{
/* background:#111;
position: relative;
width:960px; */
height:auto;
}
#mv .mv-box span{
height:50%;
}
#mv .btn-movie{
display:none;
width:68px;
height:68px;
position:absolute;
left:50%;
margin-left:-34px;
bottom:40px;
z-index:1000;
}
#mv .btn-movie img{
width:100%;
height:auto
}
/* column */
.column{
background:#000;
z-index:1
}
.column:before{
display:none;
}
.column .wrap{
display:block;
line-height:1;
font-size:0;
position:relative;
z-index:1;
/* overflow:hidden; */
}
.column .wrap:before{
content:'';
background:url(/brand/tire/advan/parts/img/over_dot.png);
background-attachment:fixed;
position:absolute;
z-index:5;
width:100%;
height:100%;
left:0;
top:0;
opacity:.2;
-webkit-opacity:.2;
}
.column .wrap img.bg{
display:none;
}
.column .wrap img.sp{
width:100%;
height:auto;
}
/* fleva */
#fleva{
background:#fff;
height: auto;
position:relative;
text-align:center;
}
#fleva img.bg,
#fleva img.over,
#fleva #copy{
display:none
}
#fleva .sp{
width:100%;
height:auto
}
.column .sttl{
display:block;
height:auto;
position: absolute;
width: auto;
height:auto;
top:30px;
left:3.125% !important;
margin-left:0 !important
}
.column .sttl img{
display:block;
height:14px;
width:auto;
margin-left:42px;
}
.column .sttl span{
display:block;
height:14px;
width:46px;
top:auto;
bottom:0;
left:-3.125% !important;
right:0 !important;
background-size: 100% auto;
-webkit-background-size: 100% auto;
}
.column .sttl{
/* position:absolute;
z-index:10;
left:50%;
top:55px; */
}
/* #products */
#products,
#products .inner{
height: auto;
position:relative;
z-index:1
}
#products{
padding-bottom:40px;
}
#products a.anchor{
display:block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:100;
}
#products .lineup{
width:100%;
padding:0 3.125%;
bottom:0;
position:absolute;
z-index:10;
left:0;
margin-left:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
bottom:9%;
}
#products .lineup li{
position: static;
z-index:5;
width:49%;
display:inline-block;
box-sizing:border-box;
-webkit-box-sizing:border-box;
height: auto;
bottom: auto;
text-align:center
}
#products .lineup li img{
width:90%;
height:auto
}
#products .lineup li+li,
#products .lineup li+li+li,
#products .lineup li+li+li+li{ left:auto }
#products .bg{
/* display:none; */
}
#products .sp{
width:100%;
height:auto
}
#equipment{
height: auto;
position:relative
}
#equipment a.anchor{
display:block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:100;
-webkit-transition: none;
transition: none;
}
#equipment.anm-end a.anchor:hover{
/* background:rgba(255,255,255,.05) */
}
#equipment ul{
padding:60px 3.125% 30px;
display:block;
text-align:center;
}
#equipment ul li{
float: none;
display:inline-block;
padding:7px 0;
font-size:12px;
color:#aaa;
padding-right:5px;
}
#equipment ul li:before{
content:'／';
font-size:12px;
font-weight:bold;
color:#cd0000;
margin-right:5px;
}
#equipment ul li:first-child:before{
display:none
}
.bg-black{
background:#000
}
/* wide-box */
#history,
#history a,
#m-sports,
#m-sports a,
#gallery,
#gallery a{
position:relative;
height:auto;
}
#history .wrap,
#m-sports .wrap,
#gallery .wrap{
opacity:1;
}
#contents a{
display:block;
padding:70px 0 20px;
height: auto;
overflow: auto;
background-attachment:fixed;
}
#contents a,
#contents a .sp{
-webkit-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}
#contents a{
background:url(/brand/tire/advan/parts/img/bg_contents.png) 0 0;
}
#contents a:hover .object{
opacity:.5
}
/* #contents a:hover{
background-color:#111;
} */
#contents a .sp{
width:87.5%;
height:auto;
display:block;
margin:0 auto;
}
aside{
height:260px;
}
/* 動画部分 */
#player #mov{
width:100%;
height:100%;
top:0;
left:0;
margin: 0 0 0;
position: fixed;
}
#player .btn-close{
width:26px;
height:26px;
top:50px;
left:auto;
right:6.25%;
margin:0;
position: absolute;
z-index:10000
}
}