@charset "UTF-8";

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

THS-R ヒストリー用CSS

MAKING 150601 sim_mano
UPDATE 201126 sim_seki
-------------------------------------------------------------*/

/*------------------------------------------------------------
基本構造 NEWテンプレート対応
-------------------------------------------------------------*/
#main {
	background: #121212;
}

#main .tmp_column_right{
	display: none;
}
.tmp_column_bottom{
	display: none;
}

.contents-inner{
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding-top: 0;
}

#racing-hybrid-history-2016 {
	background: #000;
}

#history-wrapper h2{
text-align: center;
margin:30px auto;
text-align: center;
color: #fff;
/*font-weight: bold;*/
}

#history-wrapper p{
padding: 10px 0 30px 0;
color: #fff;
font-size: 16px;
line-height: 2.2;
letter-spacing: .02em;

}
#history-wrapper p.year{
margin:0 auto;
padding:0;
display:block;
width:46%;
}

#history-wrapper p.year img{
width:100%;
}

.history-cont-inner{
width:890px;
margin:0 auto !important;
}
.sp-br{
display:none;
}

@media screen and (max-width: 1200px){
.history-cont-inner{
width:90%;
margin:0 5%!important;
}

#history-wrapper p{
padding:10px 10px 30px 10px;
font-size: 14px;
}
}
@media screen and (max-width: 799px){
#racing-hybrid-history-2016 {
padding: 0 0 0 0 !important;
}
#history-wrapper h2{
text-align: center;
margin:30px auto;
font-size: 16px!important;
font-weight: bold;
}
#history-wrapper p.year{
margin:0 auto;
display:block;
width:70%;
}
.sp-br{
display:block;
}
}

/*------------------------------------------------------------
メインビジュアル
-------------------------------------------------------------*/
#main_visual {
margin:0 0 0 0 !important;
padding:0 !important;
width:100% !important;
background:none !important;
position: relative;
}

#main_visual img {
width: 100% !important;
height: auto !important;
vertical-align: bottom!important;
}
@media screen and (min-width: 800px){
#main_visual img.pcMain{
	display: block;
}
#main_visual img.spMain{
	display: none;
}
div#main_visual::after{
content: '';
position: absolute;
background-image:url(../jpg/pc_main_l.jpg);
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 1.8s;
transition-timing-function: ease-in-out;
opacity: 1;
}

div#main_visual.imgfade::after{
	opacity: 0;
}
}

@media screen and (max-width: 799px){
#main_visual img.pcMain{
	display: none;
}
#main_visual img.spMain{
	display: block;
}
	div#main_visual::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image:url(../jpg/sp_main_l.jpg);
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
	transition: 2s;
	opacity: 1;
	}

div#main_visual.imgfade::after{
	opacity: 0;
}

}



/*------------------------------------------------------------
各年代共通の構造
-------------------------------------------------------------*/
.history-cont{
padding-top: 21% !important;
}

/*------------------------------------------------------------
各年代のsection構造

-------------------------------------------------------------*/

#thsr-2005{
background-image:url(../png/bg-boader.png);
background-repeat:repeat-y;
background-position:center;
background-size:7%;
}
#thsr-2006{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2006.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 5%;
}

#thsr-2007{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2007.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
}

#thsr-2008{
background-image:url(../png/bg-boader.png);
background-repeat:repeat-y;
background-position:center;
background-size:7%;
}

#thsr-2012{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2012.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 3%;
}

#thsr-2013{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2013.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 5%;
}

#thsr-2014{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2014.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 5%;
}

#thsr-2015{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2015.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 10%;
}

#thsr-2016{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2016.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 15% !important;
}

#thsr-2017{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2017.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 15% !important;
}

#thsr-2018-2019{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2018-2019.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 15% !important;
}

#thsr-2019-2020{
background-image:url(../png/bg-boader.png),
				 url(../gif/bg-2019-2020.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 15% !important;
}

#thsr-2021{
background-image:url(../png/bg-boader.png),
					url(../gif/bg-2021.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 15% !important;
}

#thsr-2022{
background-image:url(../png/bg-boader.png),
					url(../gif/bg-2022.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 15% !important;
}

#thsr-2023{
background-image:url(../png/bg-boader.png),
					url(../gif/bg-2023.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 15% !important;
}

#thsr-2024{
background-image:url(../png/bg-boader.png),
					url(../gif/bg-2024.gif);
background-repeat:repeat-y,no-repeat;
background-position:center,center top;
background-size:7%,100%;
padding-bottom: 15% !important;
}


/*------------------------------------------------------------
history-cont内の画像
-------------------------------------------------------------*/
#racing-hybrid-history-2016 .year-photo {
margin: 10px 0 0 0;
padding: 0;
text-align: center;
}
#racing-hybrid-history-2016 .year-photo img{
width: 100%;
height: auto;
vertical-align: bottom;
}
#racing-hybrid-history-2016 .machine-tec-photo {
margin: 20px 0 0 0;
padding: 0;
text-align: center;
}
#racing-hybrid-history-2016 .machine-tec-photo img{
width: 50%;
height: auto;
vertical-align: bottom;
}

@media screen and (max-width: 699px){
#racing-hybrid-history-2016 .machine-tec-photo {
margin: 20px 0 0 0;
padding: 0;
text-align: center;
}
#racing-hybrid-history-2016 .machine-tec-photo img{
width: 80%;
height: auto;
vertical-align: bottom;
}
}

/* マージン調整 */
#thsr-2006 .year-photo{
	margin-top: 20px;
}
#thsr-2012 .year-photo{
	margin-top: 40px;
}
#thsr-2013 .year-photo{
	margin-top: 35px;
}
#thsr-2014 .year-photo{
	margin-top: 20px;
}
#thsr-2015 .year-photo{
	margin-top: 35px;
}
#thsr-2016 .year-photo{
	margin-top: 20px;
}
#thsr-2018-2019 .year-photo{
	margin-top: 30px;
}
#thsr-2019-2020 .year-photo{
	margin-top: 20px;
}
#thsr-2021 .year-photo{
	margin-top: 20px;
}
#thsr-2022 .year-photo{
	margin-top: 20px;
}
#thsr-2023 .year-photo{
	margin-top: 20px;
}
#thsr-2024 .year-photo{
	margin-top: 20px;
}

/*------------------------------------------------------------
写真の回り込み
-------------------------------------------------------------*/
.imgleft {
float: left !important;
display: inline !important;
margin: 0px 15px 0px 0px !important;
padding: 1px !important;
text-align: left !important;
font-size: 77% !important;
line-height: 1.66em !important;
color: #333 !important;
}

.imgright {
float: right !important;
display: inline !important;
margin: 0px 0px 0px 12px !important;
padding: 1px !important;
text-align: right !important;
font-size: 77% !important;
line-height: 1.66em !important;
color: #333 !important;
}
@media screen and (max-width: 799px){
.imgleft img,
.imgright img {
width: 100%;
padding: 0;
}
.imgleft,
.imgright {
width: 47%;
padding: 0;
}
}
/*------------------------------------------------------------
floatキャンセル
-------------------------------------------------------------*/
#racing-hybrid-history-2016 #table_of_contents .page_nation:after{
content: "";
display: block;
clear: both;
}



/*------------------------------------------------------------
history-cont-inner 表示アニメーション
-------------------------------------------------------------*/
.history-cont-inner{
	opacity: 0;
	transition: .8s;
	transition-timing-function: ease-in-out;
}

.history-cont-inner.fadeItem{
	opacity: 1;
}


/* ------------------------------------------------------------------------
ランディングページ へのリンク
------------------------------------------------------------------------- */
/*


#link-banner-area{
    clear: both;
    width: 615px !important;
    padding: 180px 0 60px 0 !important;
    margin: 0 auto;
}

#link-banner-area p.wrap{
line-height: 1.3em !important;
}

#link-banner-area .wrap a{
font-size: 13px !important;
transition: .5s;
color: #fff;
}
#link-banner-area .wrap a.f-black{
    color: #000 !important;
}

#link-banner-area .wrap{
font-size: 0 !important;
display: inline-block;
width: 100%;
overflow: hidden;
text-align: center !important;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-o-transition-duration: 300ms;
-ms-transition-duration: 300ms;
transition-duration: 300ms;
}

#link-banner-area .wrap .img-space{

overflow: hidden;
display: block;
border: 1px solid #333;
line-height: 0 !important;
margin-bottom: 10px;
}

#link-banner-area .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;
}
#link-banner-area .wrap a:hover{
    color: #fff !important;
    opacity: 1;
}
#link-banner-area .wrap a.f-black:hover{
    color: #000 !important;
}


#link-banner-area .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);
}

#link-banner-area .sp_br{
display: none;
}

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

#link-banner-area{
width: 90% !important;
margin: 30px auto 60px auto !important;
}

#link-banner-area img{
width: 100%;
}


#link-banner-area .sp_br{
display: block;
}


}
*/