@charset "UTF-8";

/*------------------------------------------------------------
CSS Document

WRC ランディングページ用CSS

MAKING 180718 sim_mano
-------------------------------------------------------------*/



/*------------------------------------------------------------
CSSの構造

・基本構造
・メインビジュアル
・リンクボタン
→　基本コンテンツのリンクボタン
→　スペシャル一覧のリンクボタン
・
・
・
・
・
-------------------------------------------------------------*/



/*--------------------------------------------------------
基本構造
--------------------------------------------------------*/

#contents_wrapper{
width: 100% !important;
text-align: center !important;
background: #000 !important;
font-family: 'DecimaMonoPro';
}

/* サイドバー非表示 */
.side.wrc{
display: none !important;
}

aside.link{
display: none !important;
}

#the-quest-wrc-2018 {
width: 100% !important;
margin:0 !important;
padding:0 !important;
color: #000 !important;
}

.clearboth{
clear:both !important;
}

sup{
display: inline-block;
padding: 0 0.2em !important;
font-size: 60% !important;
}

.sp_br{
display: none;
}

#contents_wrapper{
display: none;
}

@media screen and (max-width: 799px){
.sp_br{
display: block;
}
}

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

#tgr_2015 .tgr_2015-inner .column {
border-bottom: 1px solid #282828;
}
}


/*------------------------------------------------------------
メインビジュアル
-------------------------------------------------------------*/

#main_visual {
margin:0 !important;
padding:0 !important;
width:100% !important;
font-size: 0 !important;
}

#main_visual img {
width: 100% !important;
height: auto !important;
}

#main_visual h1{
margin: 0;
}

/*------------------------------------------------------------
コンテンツ 共通設定
-------------------------------------------------------------*/

.contents-list{
width: 100% !important;
height: 588px !important;
position: relative !important;
overflow: hidden !important;
display: block;
}

.contents-list a{
display: block;
height: 100%;
}


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

.contents-list{
max-height: 500px;
}
}


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

.contents-list{
max-height: 450px;
}
}


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

.contents-list{
max-height: 410px;
height: 400px;
}
}


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

.contents-list{
max-height: 314px;
height: 400px;
margin-bottom: 10%;
}
}


/*------------------------------------------------------------
リンクボタン
-------------------------------------------------------------*/

/*基本コンテンツのリンクボタン*/
#the-quest-wrc-2018 .link{
padding: 0 !important;
margin-top: 30px;
}

#the-quest-wrc-2018 .link img{
height: 19px;
width: auto;
}

#the-quest-wrc-2018 .link a{
display: inline-block;
}

#the-quest-wrc-2018 .link:after{
content: "";
margin-left: 25px;
width: 13px;
height: 17px;
display: inline-block;
background:url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/button-sankaku.png);   
background-size:contain;
vertical-align: middle;
transition: 0.3s;
}

#the-quest-wrc-2018 .link:hover:after{
margin-left: 35px;
}


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

#the-quest-wrc-2018 .link{
display: inline-block;
position: absolute;
left: 10px;
bottom: 12px;
}

#the-quest-wrc-2018 .link img{
height: 10px;
width: auto;
}

#the-quest-wrc-2018 .link:after{
content: "";
margin-left: 10px;
width: 13px;
height: 10px;
display: inline-block;
background:url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/button-sankaku.png);   
background-size:contain;
background-repeat: no-repeat;
vertical-align: middle;
transition: 0.3s;
}

#the-quest-wrc-2018 .link:hover:after{
margin-left: 15px;
}
}


/*スペシャル一覧のリンクボタン*/

#the-quest-wrc-2018 #special .link,
#the-quest-wrc-2018 #social-media .link{
margin: 110px auto 30px auto;
width: 262px;
text-align: left;
}

#the-quest-wrc-2018 #special .link a,
#the-quest-wrc-2018 #social-media .link a{
display: inline-block;
}

#the-quest-wrc-2018 #special .link:after,
#the-quest-wrc-2018 #social-media .link:after{
content: "";
margin-left: 25px;
width: 13px;
height: 17px;
display: inline-block;
background:url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/button-sankaku.png);   
background-size:contain;
background-repeat: no-repeat;
vertical-align: middle;
transition: 0.3s;
}

#the-quest-wrc-2018 #special .link:hover:after,
#the-quest-wrc-2018 #social-media .link:hover:after{
margin-left: 35px;
}


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

#the-quest-wrc-2018 #special .link,
#the-quest-wrc-2018 #social-media .link{
display: inline-block;
position: inherit;
right: inherit;
bottom: inherit;
width: 142px;
margin-top: 30px;
}



#the-quest-wrc-2018 #special .link a,
#the-quest-wrc-2018 #social-media .link a{
width: auto;
}

#the-quest-wrc-2018 #special .link:after,
#the-quest-wrc-2018 #special .link:hover:after,
#the-quest-wrc-2018 #social-media .link:after,
#the-quest-wrc-2018 #social-media .link:hover:after{
margin-left: 10px;
width: 13px;
height: 10px;
}
}


/*------------------------------------------------------------
コンテンツタイトル
-------------------------------------------------------------*/

.title-area{
width:565px;
height:275px;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: left;
z-index: 3;
color: #fff;
}

.left-title .title-area{
left: 0;
padding: 40px 20px 0 60px;
}

.right-title .title-area{
right: 0;
padding: 40px 40px 0 40px;
}

.title-area h2{
line-height: 1em !important;
font-size: 13px;
margin: 0;
}

.title-area h2 span.title-img{
display: inline-block;
padding-right: 33px;
vertical-align: bottom;
}

.title-area h2 span.h2-subtext{
vertical-align: bottom;
display: inline-block;
line-height: 1em;
bottom: 0;
}

.title-area h2 span.h2-subtext:before{
content: "-";
margin-right: 5px;
}

.title-area img{
width: auto;
height: 38px;
}

.title-area p{
line-height: 2em;
margin-top: 40px;
font-size: 15px;
}


/*背景の指定*/
.bg-area{
z-index: 2;
width:565px;
height:275px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
position: absolute;
background:#f00;;
-ms-background:rgba(255,0,0,0.5);
mix-blend-mode: multiply;
}

.left-title .bg-area{
left: 0;
}

.right-title .bg-area{
right: 0;
}


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

/*タイトルまわりの指定*/
.title-area{
width:100%;
height:120px;
position: absolute;
top: inherit;
transform: inherit;
bottom: 0;
text-align: left;
z-index: 3;
color: #fff;
}

.title-area p{
line-height: 1.5em;
margin-top: 12.5px;
font-size: 11px;
}

.left-title .title-area{
left: 0;
padding: 18px 10px;
}

.right-title .title-area{
right: 0;
padding: 20px 10px;
}

.title-area h2{
line-height: 1em !important;
font-size: 12px;
}

/*背景の指定*/
.bg-area{
z-index: 2;
width:100%;
height:120px;
position: absolute;
top: inherit;
transform: inherit;
bottom: 0;
display: block;
position: absolute;
background:#f00;;
-ms-background:rgba(255,0,0,0.5);
mix-blend-mode: multiply;
}

.title-area h2 span.title-img{
padding-right: 10px;
}

.title-area img{
width: auto;
height: 20px;
}
}


/*------------------------------------------------------------
コンテンツ WRCとは
-------------------------------------------------------------*/
#the-quest-wrc-2018 #about-wrc {
max-height: 588px;
}

#the-quest-wrc-2018 #about-wrc .pattern{
min-width: 100%;
min-height: 100%;
background:url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/line.png); 
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

#the-quest-wrc-2018 #about-wrc video{
width:100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}


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

#the-quest-wrc-2018 #about-wrc {
max-height: 500px;
}
}


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

#the-quest-wrc-2018 #about-wrc {
max-height: 450px;
}
}

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

#the-quest-wrc-2018 #about-wrc .pattern{
display: none;
}

#the-quest-wrc-2018 #about-wrc {
max-height: 410px;
height: 400px;
}

#the-quest-wrc-2018 #about-wrc video{
display: none;
}

#the-quest-wrc-2018 #about-wrc{
background: url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/sp.gif);
background-size: cover;
background-position: center top;
}
}


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

#the-quest-wrc-2018 #about-wrc {
max-height: 314px;
height: 400px;
}
}


/*------------------------------------------------------------
車両紹介
-------------------------------------------------------------*/

#the-quest-wrc-2018 #yaris-vitz{
background: url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/pc_back-yaris-wrc.jpg);
background-size: cover;
background-position: left center;
}


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

#the-quest-wrc-2018 #yaris-vitz{
background: url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/sp_back-yaris-wrc.jpg);
background-size: cover;
background-position: center bottom;
}
}


/*------------------------------------------------------------
GR Vitz
-------------------------------------------------------------*/

#the-quest-wrc-2018 #gr-vitz{
background: url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/pc_back-gr-vitz.jpg);
background-size: cover;
background-position: right center;
}


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

#the-quest-wrc-2018 #gr-vitz{
background: url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/sp_back-gr-vitz.jpg);
background-size: cover;
background-position: cente center;
}
}


/*------------------------------------------------------------
HISTORY
-------------------------------------------------------------*/

#the-quest-wrc-2018 #history{
background: url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/pc_back-history.jpg);
background-size: cover;
background-position: center center;
}


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

#the-quest-wrc-2018 #history{
background: url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/sp_back-history.jpg);
background-size: cover;
background-position: center center;
} 
}


/*------------------------------------------------------------
SPECIAL一覧
-------------------------------------------------------------*/
#the-quest-wrc-2018 #special{
margin:0 0 100px 0;
}

#the-quest-wrc-2018 #special h2{
width: 100%;
margin: 110px auto 75px auto;
display: inline-block;
text-align: center;
}

#the-quest-wrc-2018 #special h2 img{
width: auto;
height: 38px;
}

#the-quest-wrc-2018 #special h2 span.title-img{
margin-bottom: 20px;
padding-right: inherit;
}

#the-quest-wrc-2018 #special h2 span.h2-subtext{
padding-right: 10px;
}

#the-quest-wrc-2018 #special .title-area{
width:auto;
margin: 0 auto;
height:auto;
position: inherit;
top: inherit;
transform: inherit;
text-align: left;
z-index: 3;
color: #fff;
}

#the-quest-wrc-2018 #special ul{
font-size: 0;
max-width: 1200px;
margin: 0 auto;
}

#the-quest-wrc-2018 #special li{
display: inline-block;
width: 32%;
margin: 0 0.5%;
vertical-align: top;
}

#the-quest-wrc-2018 #special li a{
font-size: 15px;
color: #fff !important;

}

#the-quest-wrc-2018 #special li:first-child{
margin-left: 1%;
}

#the-quest-wrc-2018 #special li:last-child{
margin-right: 1%;
}

#the-quest-wrc-2018 #special li img{
width: 100%;
margin-bottom: 17px;
}

#the-quest-wrc-2018 #special .wrap{
display: inline-block;
width: 100%;
overflow: hidden;
-webkit-transition-duration: 150ms;
-moz-transition-duration: 150ms;
-o-transition-duration: 150ms;
-ms-transition-duration: 150ms;
transition-duration: 150ms;
}

#the-quest-wrc-2018 #special .wrap img{
width: 100%;
height: auto;

-moz-transition: -moz-transform 0.2s linear;
-webkit-transition: -webkit-transform 0.2s linear;
-o-transition: -o-transform 0.2s linear;
-ms-transition: -ms-transform 0.2s linear;
transition: transform 0.2s linear;
}

#the-quest-wrc-2018 #special .wrap a:hover img{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}

#the-quest-wrc-2018 #special ul li a:hover .wrap{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
}



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

#the-quest-wrc-2018 #special h2 img{
height: 20px;
}

#the-quest-wrc-2018 #special h2 span.title-img{
margin-bottom: 13px;
}

#the-quest-wrc-2018 #special h2{
width: 100%;
margin: 55px auto 35px auto;
padding-top: 55px;
border-top: 1px solid #282828;
}

#the-quest-wrc-2018 #special li,
#the-quest-wrc-2018 #special li:first-child,
#the-quest-wrc-2018 #special li:last-child{
width: 90%;
margin: 5%;
}

#the-quest-wrc-2018 #special h2 span.h2-subtext{
padding-right: 5px;
}
}




/*------------------------------------------------------------
ソーシャルメディア
-------------------------------------------------------------*/
#the-quest-wrc-2018 #social-media{
padding:0 0 110px 0;
border-top: 1px solid #616161;
background: url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/pc_back-sns.jpg);
background-size: cover;
background-position: center right;
}



#the-quest-wrc-2018 #social-media h2{
width: 100%;
margin: 110px auto 0 auto;
display: inline-block;
text-align: center;
}

#the-quest-wrc-2018 #social-media p{
margin-bottom: 35px;
color: #fff;
font-size: 15px;
padding: 0 20px 60px 20px;
max-width: 600px;
margin: 0 auto;
}

#the-quest-wrc-2018 #social-media h2 img{
width: auto;
height: 38px;
}

#the-quest-wrc-2018 #social-media h2 span.title-img{
margin-bottom: 20px;
padding-right: inherit;
}

#the-quest-wrc-2018 #social-media h2 span.h2-subtext{
padding-right: 10px;
}

#the-quest-wrc-2018 #social-media .title-area{
width:auto;
margin: 0 auto;
height:auto;
position: inherit;
top: inherit;
transform: inherit;
text-align: left;
z-index: 3;
color: #fff;
}

#the-quest-wrc-2018 #social-media ul{
font-size: 0;
max-width: 600px;
margin: 0 auto;
}

#the-quest-wrc-2018 #social-media li{
display: inline-block;
width: 30%;
margin: 0 1.5%;
vertical-align: top;
}

#the-quest-wrc-2018 #social-media li a{
font-size: 15px;
color: #fff !important;
transition: 0.3s ease-in-out;
}

#the-quest-wrc-2018 #social-media li a:hover{
opacity: 0.7;
}

#the-quest-wrc-2018 #social-media li:first-child{
margin-left: 2%;
}

#the-quest-wrc-2018 #social-media li:last-child{
margin-right: 2%;
}

#the-quest-wrc-2018 #social-media li img{
width: 100%;
margin-bottom: 17px;
}

#the-quest-wrc-2018 #social-media .wrap{
display: inline-block;
width: 100%;
overflow: hidden;
-webkit-transition-duration: 150ms;
-moz-transition-duration: 150ms;
-o-transition-duration: 150ms;
-ms-transition-duration: 150ms;
transition-duration: 150ms;
}
/*

#the-quest-wrc-2018 #social-media .wrap img{
width: 100%;
height: auto;

-moz-transition: -moz-transform 0.2s linear;
-webkit-transition: -webkit-transform 0.2s linear;
-o-transition: -o-transform 0.2s linear;
-ms-transition: -ms-transform 0.2s linear;
transition: transform 0.2s linear;
}

#the-quest-wrc-2018 #social-media .wrap a:hover img{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}

#the-quest-wrc-2018 #social-media ul li a:hover .wrap{
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
}
*/



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

#the-quest-wrc-2018 #social-media{
padding:0 0 80px 0;
background: url(/pages/contents/en/assets/images/wrc/special/2018/the-quest-wrc-2018/images/sp_back-sns.jpg);
background-size: cover;
background-position: center center;
} 

#the-quest-wrc-2018 #social-media ul{
width: 90%;
margin: 0 5%;
}

#the-quest-wrc-2018 #social-media h2 img{
height: 20px;
}

#the-quest-wrc-2018 #social-media h2 span.title-img{
margin-bottom: 13px;
}

#the-quest-wrc-2018 #social-media h2{
width: 100%;
margin: 55px auto 35px auto;
padding-top: 55px;
}

#the-quest-wrc-2018 #social-media h2 span.h2-subtext{
padding-right: 5px;
}
}


#loader-bg {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: #000;
z-index: 9998;
}
#loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
text-align: center;
color: #fff;
z-index: 9999;
}