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

TOP

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

/*---- COMMON ----*/
.sp{ display: none !important;}

/* CONTENT */
.topContent{ position: relative; z-index: 2; width: 1220px; margin: 0 auto; box-sizing: border-box;}
.topSection{ margin: 0 auto 130px;}
.topSection:last-of-type{ margin: 0 auto;}

/* TITLE */
.topSectionTtl{ width: 100%; position: relative;  margin: 0 auto 60px; z-index: 1; color: #515663; font-weight: 500;}
.topSectionTtl .inner{ position: relative; z-index: 2; display: flex; align-items: baseline; width: 1220px; margin: 0 auto;}
.topSectionTtl .inner .en,
.topSectionTtl .inner .ja{ display: inline-block; line-height: 1.2;}
.topSectionTtl .inner .en img{ height: 60px; width: auto; }
.topSectionTtl .inner .ja{ font-size: 30px; margin-left: 35px;}
.topSectionTtl::after{ content: ""; width: 50%; height: 340px; position: absolute; top: 30px; right: 50%; background: #eee; z-index: 1;}

/*---- MAIN SLIDE ----*/
#topMainSlideBox{ width: 100%; margin: 0 auto 120px;}
#topMainSlideBox .topMainSlide{ list-style: none; margin: 0; padding: 0; height: 600px; width: 100%; overflow: hidden;}
#topMainSlideBox .topMainSlide .slick-dots{ height: 4px; line-height: 1; bottom: 20px; left: calc(50% - 610px); display: flex; justify-content: flex-end; width: 1220px; margin: auto; }
#topMainSlideBox .topMainSlide .slick-dots li{ width: 60px; height: 4px; display: block; margin: 0 10px 0 0;}
#topMainSlideBox .topMainSlide .slick-dots li button{ padding: 0; width: 100%; height: 100%;}
#topMainSlideBox .topMainSlide .slick-dots li button:before{ width: 100%; height: 100%; border-radius: 0; opacity: 0.6; background: #E5E5E5;}
#topMainSlideBox .topMainSlide .slick-dots li.slick-active button:before{ opacity: 1; background: #f2f2f2;}
#topMainSlideBox .topMainSlide .slick-slide{ height: 600px; width: 100%;}
#topMainSlideBox .topMainSlide .slick-slide img.pc{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: 'object-fit: cover; object-position: 50% 50%;'; background-size: cover !important;}

/*---- COMPANY ----*/
#topCompany .topCompanyList01{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto 40px;}
#topCompany .topCompanyList01 li{ width: 400px;}
#topCompany .topCompanyList01 li a{ display: block; position: relative; color: #333333; font-size: 26px; transition: all 0.5s; overflow: hidden;}
#topCompany .topCompanyList01 li a .img{ display: block;}
#topCompany .topCompanyList01 li a .img img{ display: block; width: 100%; transition: all 0.5s;}
#topCompany .topCompanyList01 li a .text{ box-sizing: border-box; padding: 40px; position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(255, 255, 255, 0.9);}
#topCompany .topCompanyList01 li a .text .en{ position: relative; display: block; margin-bottom: 20px;}
#topCompany .topCompanyList01 li a .text .en img{ display: block; height: 16px; width: auto;}
#topCompany .topCompanyList01 li a .text .en img:first-child{ position: relative; z-index: 1; transition: all 0.5s;}
#topCompany .topCompanyList01 li a .text .en img:last-child{ position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; transition: all 0.5s;}
#topCompany .topCompanyList01 li a .text .ja{ font-size: 26px; display: block; line-height: 1; position: relative; width: 340px; font-weight: 500;}
#topCompany .topCompanyList01 li a .text .ja::before,
#topCompany .topCompanyList01 li a .text .ja::after{ width: 10px; height: 16px; position: absolute; top: calc(50% - 5px); right: 15px; transition: all 0.5s;}
#topCompany .topCompanyList01 li a .text .ja::before{ content: ""; background: url("../common/img/arrow-b.png"); background-size: 100%;}
#topCompany .topCompanyList01 li a .text .ja::after{ content: ""; background: url("../common/img/arrow-r.png"); background-size: 100%; opacity: 0;}
#topCompany .topCompanyList02{ width: 1010px; height: auto; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
#topCompany .topCompanyList02 li{ width: 480px;}
#topCompany .topCompanyList02 li a{ display: block; position: relative; color: #333333; font-size: 26px; transition: all 0.5s; overflow: hidden;}
#topCompany .topCompanyList02 li a .logo{ height: 70px; width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; background: #fff; box-sizing: border-box; }
#topCompany .topCompanyList02 li a .logo img{ flex-shrink: 0; display: block; width: 280px; height: auto;}
#topCompany .topCompanyList02 li a .img{ overflow: hidden;}
#topCompany .topCompanyList02 li a .img img{ display: block; transition: all 0.5s;}
#topCompany .topCompanyList02 li a .text{ box-sizing: border-box; padding: 40px; position: relative; width: 100%; background: #F7F7F7; font-weight: 500;}
#topCompany .topCompanyList02 li a .text span{ display: inline-block; position: relative; line-height: 1; padding-right: 55px; font-size: 26px;}
#topCompany .topCompanyList02 li a .text span::before,
#topCompany .topCompanyList02 li a .text span::after{ width: 10px; height: 16px; position: absolute; top: calc(50% - 5px); right: 15px; transition: all 0.5s;}
#topCompany .topCompanyList02 li a .text span::before{ content: ""; background: url("../common/img/arrow-b.png"); background-size: 100%;}
#topCompany .topCompanyList02 li a .text span::after{ content: ""; background: url("../common/img/arrow-r.png"); background-size: 100%; opacity: 0;}
#topCompany .topCompanyList01 li a:hover{ color: #CC0000; }
#topCompany .topCompanyList01 li a:hover .img img{transform: scale(1.05);}
#topCompany .topCompanyList01 li a:hover .text .ja::before{ opacity: 0; right: 0;}
#topCompany .topCompanyList01 li a:hover .text .ja::after{ opacity: 1; right: 0;}
#topCompany .topCompanyList01 li a:hover .text .en img:first-child{ opacity: 0;}
#topCompany .topCompanyList01 li a:hover .text .en img:last-child{ opacity: 1;}
#topCompany .topCompanyList02 li a:hover{ color: #CC0000; }
#topCompany .topCompanyList02 li a:hover .img img{ display: block; transform: scale(1.05);}
#topCompany .topCompanyList02 li a:hover .text span::before{ opacity: 0; right: 0;}
#topCompany .topCompanyList02 li a:hover .text span::after{ opacity: 1; right: 0;}

/*---- SUSTAINABILITY
#topSustainability .topSectionTtl .inner{ display: block;}
#topSustainability .topSectionTtl .inner .en{ display: block;}
#topSustainability .topSectionTtl .inner .ja{ display: block; margin: 30px auto 0 0;}
#topSustainability .topSustainabilityBnr{ background: #333;}
#topSustainability .topSustainabilityBnr a{ display: block; transition: opacity 0.5s;}
#topSustainability .topSustainabilityBnr a img{ display: block; }
#topSustainability .topSustainabilityBnr a:hover{ opacity: 0.8;} ----*/

/*---- SUSTAINABILITY 20260907 ----*/
#topSustainability .topSectionTtl .inner{ display: block;}
#topSustainability .topSectionTtl .inner .en{ display: block;}
#topSustainability .topSectionTtl .inner .ja{ display: block; margin: 30px auto 0 0;}
 #topSustainability .topSustainabilityBnr { min-height: 360px; background: #fff url("../img/img-pc-sustainability.jpg") no-repeat; background-size: cover; background-position: center; border: solid 1px #dfdfdf; box-sizing: border-box; padding: 40px 300px; text-align: center; }
#topSustainability .topSustainabilityBnr a{ display: block; transition: opacity 0.5s; text-decoration: none; color: #333333;}
#topSustainability .topSustainabilityBnr a:hover{ opacity: 0.8;}
#topSustainability .topSustainabilityBnr a .logo{ width: 450px; margin: 0 auto 30px;}
#topSustainability .topSustainabilityBnr a .text{ font-size: 22px; font-weight: 500; line-height: 1.6; margin: 0 auto 20px;}
#topSustainability .topSustainabilityBnr a .link-text{  display: block; position: relative;}
#topSustainability .topSustainabilityBnr a .link-text span{ display: inline-block; position: relative; line-height: 1; font-size: 22px; font-weight: 500; transition: color 0.3s; padding-right: 30px;}
#topSustainability .topSustainabilityBnr a .link-text span::before,
#topSustainability .topSustainabilityBnr a .link-text span::after{ width: 10px; height: 16px; position: absolute; top: calc(50% - 5px); right: 0px; transition: all 0.5s;}
#topSustainability .topSustainabilityBnr a .link-text span::before{ content: ""; background: url("../common/img/arrow-b.png"); background-size: 100%;}
#topSustainability .topSustainabilityBnr a .link-text span::after{ content: ""; background: url("../common/img/arrow-r.png"); background-size: 100%; opacity: 0;}
#topSustainability .topSustainabilityBnr a:hover .link-text{ color: #CC0000;}
#topSustainability .topSustainabilityBnr a:hover .link-text span::before{ opacity: 0; right: -10px;}
#topSustainability .topSustainabilityBnr a:hover .link-text span::after{ opacity: 1; right: -10px;}

/*---- PRESS ----*/
#topPress .pcTopPressList{ background: #fff; box-sizing: border-box; padding: 60px 60px 0; display: flex; justify-content: space-between;}
#topPress .pcTopPressList > li{ width: 510px; position: relative;}
#topPress .pcTopPressList li h3{ margin: 0 auto 40px; padding-bottom: 20px; font-weight: 500; font-size: 30px; border-bottom: 1px solid #CC0000;}
#topPress .pcTopPressList li .listBtn{ position: absolute; top: 10px; right: 0;}
#topPress .pcTopPressList li .listBtn a{ display: block; text-decoration: none; color: #333333; padding-right: 40px; position: relative; transition: color 0.3s;}
#topPress .pcTopPressList li .listBtn a::before,
#topPress .pcTopPressList li .listBtn a::after{ width: 10px; height: 16px; position: absolute; top: calc(50% - 5px); right: 10px; transition: all 0.5s;}
#topPress .pcTopPressList li .listBtn a::before{ content: ""; background: url("../common/img/arrow-b.png"); background-size: 100%;}
#topPress .pcTopPressList li .listBtn a::after{ content: ""; background: url("../common/img/arrow-r.png"); background-size: 100%; opacity: 0;}
#topPress .pcTopPressList li .listBtn a:hover{ color: #CC0000;}
#topPress .pcTopPressList li .listBtn a:hover::before{ opacity: 0; right: 0;}
#topPress .pcTopPressList li .listBtn a:hover::after{ opacity: 1; right: 0;}
#topPress .pcTopPressList li .topPressLinkList li{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #DFDFDF; position: relative; color: #666666; font-size: 16px; line-height: 2;}
#topPress .pcTopPressList li .topPressLinkList li:last-child{ margin-bottom: 0;}
#topPress .pcTopPressList li .topPressLinkList li::after{ display: block; min-width: 132px; box-sizing: border-box; padding: 5px 3px; line-height: 1; background: #666; color: #fff; position: absolute; top: 5px; left: 140px; font-size: 14px; text-align: center;}
#topPress .pcTopPressList li .topPressLinkList li.motorsports::after{ content: "\30E2\30FC\30BF\30FC\30B9\30DD\30FC\30C4"; }
#topPress .pcTopPressList li .topPressLinkList li.park::after{ content: "\30D1\30FC\30AF"; }
#topPress .pcTopPressList li .topPressLinkList li.other::after{ content: "\305D\306E\4ED6\4E00\822C"; }
#topPress .pcTopPressList li .topPressLinkList li a{ display: inline-block; color: #333333; margin-top: 10px; transition: color 0.3s;}
#topPress .pcTopPressList li .topPressLinkList li a:hover{ color: #CC0000;}
#topPress .spTopPressList{ display: none;}

/*---- CONTACT ----*/
#topContact .topContactList{ background: #fff; box-sizing: border-box; padding: 60px 60px 0; display: flex; justify-content: space-between;}
#topContact .topContactList > li{ width: 510px; position: relative;}
#topContact .topContactList > li .btn{ margin: 0 auto 20px;}
#topContact .topContactList > li .btn a{ display: block; padding: 40px 40px 35px; text-decoration: none; font-size: 26px; box-sizing: border-box; border: 1px solid #333333; line-height: 1.6; color: #333333; position: relative; transition: all 0.3s; font-weight: 500;}
#topContact .topContactList > li .btn a::before,
#topContact .topContactList > li .btn a::after{ width: 14px; height: 23px; position: absolute; top: calc(50% - 7px); right: 50px; transition: all 0.5s;}
#topContact .topContactList > li .btn a::before{ content: ""; background: url("../common/img/arrow-b.png"); background-size: 100%;}
#topContact .topContactList > li .btn a::after{ content: ""; background: url("../common/img/arrow-r.png"); background-size: 100%; opacity: 0;}
#topContact .topContactList > li .btn a:hover{ border: 1px solid #CC0000; color: #CC0000;}
#topContact .topContactList > li .btn a:hover::before{ opacity: 0; right: 40px;}
#topContact .topContactList > li .btn a:hover::after{ opacity: 1; right: 40px;}
#topContact .topContactList > li .caution{ font-size: 16px; line-height: 1.2;}