@import url('https://fonts.googleapis.com/css?family=Orbitron');


@media screen and (min-width: 0px) and (max-width: 568px) {
  #lnav #lnav-inner ul li.logo {
    width: 100%;
  }
}

#main {
  height: 501px;
}
#main #main-inner {
  width: 100%;
}
#main #main-inner .inner-info {
  left: calc(50% - 490px);
  width: 980px;
  padding: 0;
  color: #fff;
}
#main #main-inner .info-logo img.sp {
  display: none;
}
#main #main-inner #mainv li {
  width: 100%;
}
#main #mainv01 {
  background: #000 url("/product/archive/rav41904/image/main_aeroparts.jpg") center top no-repeat;
}
#main #mainv01 .info-btn {
  padding-bottom: 120px;
}
#main #mainv02 {
  background: #000 url("/product/archive/rav41904/image/main_aerokit.jpg") center top no-repeat;
}
#main #mainv02 .info-btn {
  padding-bottom: 120px;
}
#main #mainv03 {
  background: #000 url("/product/archive/rav41904/image/main_jaos.jpg") center top no-repeat;
}
#main #mainv03 .info-btn {
  padding-bottom: 120px;
}
@media screen and (min-width: 0px) and (max-width: 568px) {
  #main {
    height: 300px;
  }
  #main #main-inner .info-logo img.pc {
    display: none;
  }
  #main #main-inner .info-logo img.sp {
    display: inline;
  }
  #main #mainv01 {
    height: 300px !important;
    background: url("/product/archive/rav41904/image/main_aeroparts_sp.jpg") center top no-repeat;
    background-size: cover;
  }
  #main #mainv01 .inner-info {
    color: #fff;
  }
  #main #mainv01 .info-btn {
    padding-bottom: 0;
  }
  #main #mainv02 {
    height: 300px !important;
    background: url("/product/archive/rav41904/image/main_aerokit_sp.jpg") center top no-repeat;
    background-size: cover;
  }
  #main #mainv02 .inner-info {
    color: #000;
  }
  #main #mainv02 .info-btn {
    padding-bottom: 0;
  }
  #main #mainv03 {
    height: 300px !important;
    background: url("/product/archive/rav41904/image/main_jaos_sp.jpg") center top no-repeat;
    background-size: cover;
  }
  #main #mainv03 .info-btn {
    padding-bottom: 0;
  }
}

#main .ctrl {
  position: absolute;
  left: calc(50% - 490px);
  top: 0;
  width: 980px;
  height: 501px;
  margin: 0 auto;
}
#main .ctrl ol li span {
  width: 94px;
  height: 52px;
  text-indent: -9999px;
}
#main .ctrl ol li span.pager1 {
  background: url("/product/archive/rav41904/image/thum_aeroparts.jpg") no-repeat left top;
}
#main .ctrl ol li span.pager2 {
  background: url("/product/archive/rav41904/image/thumb_aerokit.jpg") no-repeat left top;
}
#main .ctrl ol li span.pager3 {
  background: url("/product/archive/rav41904/image/thumb_jaos.jpg") no-repeat left top;
}
#main #main-inner .ctrl .ctrlLeft {
  left: 308px;
}
#main #main-inner .ctrl .ctrlRight {
  right: 308px;
}
@media screen and (min-width: 0px) and (max-width: 568px) {
  #main .ctrl {
    left: calc(50% - 50vw);
    width: 100%;
    height: 300px;
  }
  #main .ctrl ol li span {
    display: none !important;
  }
  #main #main-inner .ctrl .ctrlLeft {
    left: 6px;
    top: 50%;
  }
  #main #main-inner .ctrl .ctrlRight {
    right: 6px;
    top: 50%;
  }
}
@media screen and (min-width: 1152px) {
  #main #main-inner .ctrl .ctrlLeft {
    top: 50%;
    left: -60px;
  }
  #main #main-inner .ctrl .ctrlRight {
    top: 50%;
    right: -60px;
  }
}

#main2.selection {
  background: url("/product/archive/rav41904/image/main_title.jpg") no-repeat center top #1e1e1e;
}
@media screen and (min-width: 0px) and (max-width: 568px) {
  #main2.selection {
    height: 160px;
    background: url("/product/archive/rav41904/image/main_title_sp.jpg") no-repeat center top #1e1e1e;
    background-size: 320px 160px;
  }
}

.mod-table-fixed {
  width: 1950px;
}

/* simulation */
.aerokit .simulation_screen {
  background: #000 url("/product/archive/rav41904/image/simulation/bg_aerokit.jpg") center top no-repeat;
}
.jaos .simulation_screen {
  background: #000 url("/product/archive/rav41904/image/simulation/bg_jaos.jpg") center top no-repeat;
}
.simulation_screen-inner {
  position: relative;
  width: 980px;
  height: 501px;
  margin: 0 auto;
}
.simulation_screen-inner img.sp {
  display: none;
}
.simulation_screen-inner div:not(.simulation_screen-txtArea) img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  /*transition: all .2s ease-out;*/
}
.simulation_screen-inner div:not(.simulation_screen-txtArea) .act img {
  opacity: 1;
}
.simulation_screen-inner div:not(.simulation_screen-txtArea) .act:not(.base) img {
  z-index: 5;
}
.simulation_screen-txtArea {
  position: absolute;
  left: 0;
  top: 149px;
  z-index: 10;
}
.simulation_screen-ttl {
  margin-bottom: 10px;
  font-size: 0;
}
.simulation_screen-ttlLogo {
  display: block;
  margin-bottom: 15px;
}
.simulation_screen-ttlName {
  display: inline-block;
  color: #333;
  font-size: 26px;
  line-height: 1;
}
.simulation_screen-ttlName span.sub {
  display: inline-block;
  font-size: 20px;
  margin-top: 10px;
}
.simulation_screen-txt {
  font-size: 12px;
}
.simulation_control {
  padding: 18px 0;
  background: #333;
  color: #fff;
}
.simulation_control-inner {
  width: 980px;
  margin: 0 auto;
}
.simulation_control-line {
  display: flex;
  justify-content: space-around;
  flex-direction: row-reverse;
}
.simulation_control-directionList {
  display: flex;
}
.simulation_control-directionItem {
  position: relative;
  width: 80px;
  height: 35px;
  margin: 0 10px;
  background: #444;
  border: 2px solid #666;
  font-size: 16px;
  text-align: center;
  line-height: 33px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all .2s ease-out;
}
.simulation_control-directionItem:hover {
  opacity: .7;
  border-color: #139664;
}
.simulation_control-directionItem.act {
  height: 45px;
  margin-top: -10px;
  line-height: 43px;
  border-color: #139664;
}
.simulation_control-directionItem.act::before {
  position: absolute;
  left: 50%;
  top: -8px;
  content: '';
  width: 6px;
  height: 6px;
  display: block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #139664;
  box-sizing: border-box;
  transform: translateX(-50%);
  transition: all .2s ease-out;
}
.simulation_control-directionItem.act:hover::before {
  opacity: .7;
}
.simulation_control-colorList {
  display: flex;
  margin-bottom: 10px;
}
.simulation_control-colorItem {
  position: relative;
  width: 80px;
  height: 35px;
  margin: 0 10px;
  border: 2px solid #666;
  box-sizing: border-box;
  cursor: pointer;
  transition: all .2s ease-out;
}
.simulation_control-colorItem:hover {
  opacity: .7;
  border-color: #139664;
}
.simulation_control-colorItem.act {
  height: 45px;
  margin-top: -10px;
  border-color: #139664;
}
.simulation_control-colorItem.act::before {
  position: absolute;
  left: 50%;
  top: -8px;
  content: '';
  width: 6px;
  height: 6px;
  display: block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #139664;
  box-sizing: border-box;
  transform: translateX(-50%);
  transition: all .2s ease-out;
}
.simulation_control-colorItem.act:hover::before {
  opacity: .7;
}
.simulation_control-color {
    max-width: 700px;
}
.simulation_control-colorItem.color089 {
  background: #fff;
}
.simulation_control-colorItem.color1D6 {
  background: #D9D9D9;
}
.simulation_control-colorItem.color1G3 {
  background: #a3a4a4;
}
.simulation_control-colorItem.color218 {
  background: #292929;
}
.simulation_control-colorItem.color3T3 {
  background: #A21817;
}
.simulation_control-colorItem.color6X3 {
  background: #7B8C88;
}
.simulation_control-colorItem.color2QU {
  background: -moz-linear-gradient(top, rgba(242,242,242,1) 50%, rgba(123,140,136,1) 50%);
  background: -webkit-linear-gradient(top, rgba(242,242,242,1) 50%, rgba(123,140,136,1) 50%);
  background: linear-gradient(to bottom, rgba(242,242,242,1) 50%, rgba(123,140,136,1) 50%);
}
.simulation_control-colorItem.color2TU {
  background: -moz-linear-gradient(top, rgba(242,242,242,1) 50%, rgba(0,123,214,1) 50%);
  background: -webkit-linear-gradient(top, rgba(242,242,242,1) 50%, rgba(0,123,214,1) 50%);
  background: linear-gradient(to bottom, rgba(242,242,242,1) 50%, rgba(0,123,214,1) 50%);
}
.simulation_control-colorNameList {
  position: relative;
  height: 10px;
}
.simulation_control-colorNameItem {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  text-align: center;
  line-height: 1;
  opacity: 0;
  transition: all .2s ease-out;
}
.simulation_control-colorNameItem.act {
  opacity: 1;
}
.simulation_control-tabList {
  display: flex;
  margin-top: 15px;
  justify-content: center;
}
.simulation_control-tabItem {
  padding: 10px 15px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: background .2s ease-out;
}
.simulation_control-tabItem.current {
  background: #444;
}
.simulation_control-tabItem:hover {
  /*background: #444;*/
}
.simulation_control-tabItem span {
  position: relative;
}
.simulation_control-tabItem span:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #139664;
  position: absolute;
  bottom: -4px;
  left: 0;
  opacity: 0;
  transition: opacity .2s ease-out;
}
.simulation_control-tabItem.current span:after {
  opacity: 1;
}
.simulation_control-tabItem:hover span:after {
  opacity: 1;
}
.simulation_control-partsList:not(.current) {
  visibility: hidden;
  overflow: hidden;
  height: 0;
  padding: 0;
}
.simulation_control-partsList ul {
  display: flex;
  justify-content: center;
  padding: 10px 15px;
  background: #444;
}
.simulation_control-partsItem {
  cursor: pointer;
  padding: 12px 15px;
  background-color: #333;
  font-size: 12px;
  user-select: none;
}
.simulation_control-partsItem + .simulation_control-partsItem {
  margin-left: 10px;
}
.simulation_control-partsItem span {
  padding-left: 22px;
  position: relative;
}
.simulation_control-partsItem span:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: #444;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: background .2s ease-out;
}
.simulation_control-partsItem span:after {
  content: "";
  display: block;
  width: 8px;
  height: 4px;
  border-left: 2px solid rgba(255,255,255,0.3);
  border-bottom: 2px solid rgba(255,255,255,0.3);
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(-45deg) translateX(1px) translateY(-1px);
  transition: border-color .2s ease-out;
}
.simulation_control-partsItem.act span:before {
  background-color: #139664;
}
.simulation_control-partsItem.act span:after {
  border-color: #fff;
}

@media screen and (min-width: 0px) and (max-width: 568px) {
  .aerokit .simulation_screen,
  .jaos .simulation_screen {
    background-image: none;
  }
  .simulation_screen-inner {
    width: auto;
    height: 80vw;
    margin: 0;
  }
  .simulation_screen-inner img.pc {
    display: none;
  }
  .simulation_screen-inner img.sp {
    display: inline;
  }
  .simulation_screen-inner div:not(.simulation_screen-txtArea) img {
    width: 100%;
    height: auto;
  }
  .simulation_screen-txtArea {
    top: 20px;
    right: 0;
    text-align: center;
  }
  .simulation_screen-ttl {
    margin-bottom: 5px;
  }
  .simulation_screen-ttlLogo {
    margin-right: 0;
    margin-bottom: 5px;
  }
  .simulation_screen-ttlLogo img {
    width: 108px;
    height: auto;
  }
  .simulation_screen-ttlName {
    font-size: 14px;
  }
  .aerokit .simulation_screen-ttlName {
    color: #000;
  }
  .simulation_screen-ttlName span.sub {
    margin-top: 3px;
    font-size: 13px;
  }
  .simulation_screen-txt {
    font-size: 10px;
  }
  .aerokit .simulation_screen-txt {
    color: #fff;
  }
  .simulation_control-inner {
    width: auto;
    margin: 0 10px;
  }
  .simulation_control-line {
    display: block;
  }
  .simulation_control-direction {
    margin-bottom: 20px;
  }
  .simulation_control-directionList {
    justify-content: space-between;
  }
  .simulation_control-directionItem {
    width: calc(50% - 5px);
    margin: 0;
  }
  .simulation_control-directionItem.act {
    height: 35px;
    margin-top: 0;
    line-height: 33px;
  }
  .simulation_control-colorList {
    justify-content: space-between;
  }
  .simulation_control-colorWrap .simulation_control-colorList {
    flex-wrap: wrap;
  }
  .simulation_control-colorItem {
    width: calc(25% - 30px / 4);
    margin: 0;
  }
  .simulation_control-colorWrap .simulation_control-colorItem {
    width: 80px;
    margin-right: 8px;
  }
  .simulation_control-colorItem.act {
    height: 35px;
    margin-top: 0;
  }
  .simulation_control-tabList {
    width: calc(100% + 20px);
    margin-left: -10px;
    font-size: 12px;
  }
  .simulation_control-tabItem {
    display: flex;
    align-items: center;
    padding: 10px 2.4vw;
  }
  .simulation_control-partsList {
    width: calc(100% + 20px);
    margin-left: -10px;
    background-color: #444;
    overflow-x: hidden;
  }
  .simulation_control-partsList ul {
    display: block;
    box-sizing: border-box;
  }
  .simulation_control-partsItem {
    float: left;
    display: inline-block;
  }
  .simulation_control-partsList ul:after {
    content: "";
    display: block;
    clear: both;
  }
}

/* dealer_anchor */
#lnav #lnav-inner {
  position: relative;
}
.dealer_anchor {
  position: absolute;
  right: 0;
  bottom: -45px;
  z-index: 200;
}
.dealer_anchor a {
  position: relative;
  display: block;
  padding: 10px 30px 10px 15px;
  background: #048F59;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 1;
  transition: all .2s ease-out;
}
.dealer_anchor a::after {
  position: absolute;
  right: 12px;
  top: calc(50% - 5px);
  content: '';
  width: 5px;
  height: 5px;
  display: block;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.dealer_anchor a:hover {
  opacity: .7;
  text-decoration: none;
}
@media screen and (min-width: 0px) and (max-width: 568px) {
  .dealer_anchor {
    position: static;
    right: auto;
    bottom: auto;
  }
  .dealer_anchor a {
    padding: 10px;
    line-height: 1.5;
  }
}

/* gallery */
#content.galleryPage {
  padding-top: 0;
}
#gallery-bnr {
  margin: 10px 0 40px;
}
#gallery-bnr a.bnr img {
  width: 100%;
  height: auto;
}
.gallery {
}
.gallery_item:not(.current) {
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.gallery_category {
  display: none;
}
.gallery_category-list {
  display: flex;
}
.gallery_category-item {
  width: 50%;
  padding: 18px 0;
  background: url("/shared/image_new/arrow_bt_green.png") center bottom no-repeat;
  border-right: 1px solid #ccc;
  color: #333;
  text-align: center;
  cursor: pointer;
  transition: all .2s ease-out;
}
.gallery_category-item:first-child {
  border-left: 1px solid #ccc;
}
.gallery_category-item.current,
.gallery_category-item:hover {
  background: #048F59 url("/shared/image_new/arrow_bt_white.png") center bottom no-repeat;
  color: #fff;
}
.gallery_screen {
  position: relative;
  margin: 50px 0 20px;
  overflow: hidden;
}
.gallery_item {
  position: relative;
}
.gallery_screen-prev {
  position: absolute;
  left: -60px;
  top: 50%;
  content: "";
  width: 34px;
  height: 61px;
  display: block;
  background: url("/shared/image_new/arrow_slide_left.png") left top no-repeat;
  background-size: 34px 61px;
  cursor: pointer;
  transform: translateY(-100%);
  outline: none;
}
.gallery_screen-next {
  position: absolute;
  right: -60px;
  top: 50%;
  content: "";
  width: 34px;
  height: 61px;
  display: block;
  background: url("/shared/image_new/arrow_slide_right.png") left top no-repeat;
  background-size: 34px 61px;
  cursor: pointer;
  transform: translateY(-100%);
  outline: none;
}
.gallery_screen-item {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  flex-shrink: 0;
}
.gallery_screen-item img,
.gallery_screen-item iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.gallery_thumb {
  overflow: hidden;
}
.swiper-wrapper {
  display: flex;
}
.gallery_thumb-item {
  flex-shrink: 0;
  cursor: pointer;
  border: 5px solid #fff;
  box-sizing: border-box;
}
.gallery_thumb-item img {
  width: 100%;
  height: auto;
}
.gallery_thumb-item.swiper-slide-thumb-active {
  border-color: #048F59;
}
.gallery_note {
  margin-top: 20px;
  font-size: 12px;
  text-align: center;
}

@media screen and (min-width: 0px) and (max-width: 568px) {
  #gallery-bnr {
    margin: 30px 0;
  }
  .gallery_category-item {
    padding: 15px 0;
    font-size: 12px;
  }
  .gallery_screen {
    margin: 30px 0 20px;
  }
  .gallery_screen-prev {
    left: 10px;
    top: calc(50% - 15px);
    width: 17px;
    height: 30px;
    background-size: 17px 30px;
  }
  .gallery_screen-next {
    right: 10px;
    top: calc(50% - 15px);
    width: 17px;
    height: 30px;
    background-size: 17px 30px;
  }
  .gallery_thumb-item {
    border: 3px solid #fff;
  }
  .gallery_note {
    font-size: 10px;
  }
}

/********* topics ***********/


#topics {
  position: relative;
  background-color: #222;
  overflow: hidden;
}

#topics #startingMovie {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  /* transform: translate(0, -50%); */
}
#topics #startingMovie video {
  width: 100%;
  height: auto;
  height: 663px;
}

#topics-top {
	display: none;
  text-align: center;
}

.topics-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin-top: 0;
  background: #e8e8e8;
  color: #999;
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  letter-spacing: 0.03em;
  transition: all 0.6s ease;
}

#topics-top.hidden .topics-title {
  transform: translateX(-20px);
  opacity: 0;
}

.topics-title em {
  display: inline-block;
  position: relative;
  width: 377px;
  height: 24px;
  background: #222;
}
.topics-title em:before {
  content: "";
  position: absolute;
  left: -69px;
  top: 0;
  width: 69px;
  height: 24px;
  background: url("/product/archive/rav41904/image/design_commentary/maintitle_slant-l.png") no-repeat;
}
.topics-title em:after {
  content: "";
  position: absolute;
  right: -69px;
  top: 0;
  width: 69px;
  height: 24px;
  background: url("/product/archive/rav41904/image/design_commentary/maintitle_slant-r.png") no-repeat;
}

.topics-title em span{
  display: inline-block;
  transform: skewX(-20deg);
  margin-left: 0.75em;
}

.topics-title > * {
  display: inline-block;
}

.topics-subtitle {
position: relative;
width: 798px;
height: 46px;
margin: 25px auto 20px;
background: rgba(255,255,255,0.2);
color: #ccc;
font-family: 'Orbitron', sans-serif;
font-size: 46px;
text-align: center;
transition: all .6s ease;
}

.topics-subtitle:before {
  content: "";
  position: absolute;
  left: -66px;
  top: 0;
  width: 66px;
  height: 46px;
  background: url("/product/archive/rav41904/image/design_commentary/title_slant-l.png") no-repeat;
}
.topics-subtitle:after {
  content: "";
  position: absolute;
  right: -66px;
  top: 0;
  width: 66px;
  height: 46px;
  background: url("/product/archive/rav41904/image/design_commentary/title_slant-r.png") no-repeat;
}
.topics-subtitle span {
  display: inline-block;
  transform: skewX(-20deg);
  line-height: 1;
}
#topics-top.hidden .topics-subtitle {
  transform: translateX(-20px);
  opacity: 0;
}

.topics-lead {
  margin-top: 26px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  transition: all .6s ease;
}
.topics-lead br.sp {
  display: none;
}
#topics-top.hidden .topics-lead {
  transform: translateX(-20px);
  opacity: 0;
}

.topics-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 980px;
  margin: 45px auto;
  transition: all .6s ease;
  transition-delay: .4s;
}

.topics-link li {
  display: flex;
  align-items: center;
  position: relative;
  width: 306px;
  height: 160px;
  margin-right: 31px;
  color: #000;
  opacity: 0; /*初期化*/
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.topics-link li:after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: 6px;
  width: 13px;
  height: 12px;
  background: url("/product/archive/rav41904/image/design_commentary/i_arrow.png") no-repeat;
  background-size: 13px 12px;
  transition: all .3s;
}

.topics-link li:hover {
  filter: saturate(250%); /*彩度調整(IE以外)*/
}

@media all and (-ms-high-contrast: none){
  .topics-link li:hover {
    opacity: 0.5; /* IE10以上 */
  }
}

.topics-link li:hover:after {
  right: 8px;
}

.topics-link li#topics-0 { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_1.jpg); }
.topics-link li#topics-1 { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_2.jpg); }
.topics-link li#topics-2 { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_3.jpg); }
.topics-link li#topics-3 { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_4.jpg); }
.topics-link li#topics-4 { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_5.jpg); }
.topics-link li#topics-5 { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_6.jpg); }

.topics-link li.fadeUp      { animation: fadeUp 1s ease-out 1s 1 forwards; }
.topics-link li#topics-1.fadeUp { animation-delay: 1.1s; }
.topics-link li#topics-2.fadeUp { animation-delay: 1.2s; }
.topics-link li#topics-3.fadeUp { animation-delay: 1.3s; }
.topics-link li#topics-4.fadeUp { animation-delay: 1.4s; }
.topics-link li#topics-5.fadeUp { animation-delay: 1.6s; }

@keyframes fadeUp {
    0% { opacity: 0; top: 20px; }
    100% { opacity: 1; top: 0; }
}

#topics-top.hidden .topics-link {
  transform: translateX(-20px);
  opacity: 0;
}

.topics-link li:nth-child(3n) {
  margin-right: 0;
}

.topics-link li:nth-child(4),
.topics-link li:nth-child(5),
.topics-link li:nth-child(6) {
  margin-top: 31px;
}

.topics-link li > span {
  display: none;
}

.topics-link li span:after {
  content: "";
  display: block;
  width: 12px;
  height: 18px;
  background-image: url(/shared/image_new/arrow_ri_white@2x.png);
  background-repeat: no-repeat;
  background-position: left top;
  position: absolute;
  right: 60px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.topics-link li span small {
  font-size: 16px;
}

#topics-contents {
  opacity: 0;
  height: 0;
  transform: translate(40px);
  transition: transform .3s ease;
}

#topics-contents-inner{
  max-width: 1100px;
  min-width: 980px;
  overflow: hidden;
  margin: 0 auto;
}

#topics-contents.visible {
  height: auto;
  animation-name: slideIn;
  animation-duration: .9s;
  opacity: 1;
  transform: translate(0);
}

#topics-contents .swiper-container {
  width: 980px;
  margin: 0 auto;
  position: relative;
}

#topics-contents .swiper-wrapper {
  display: flex;
  width: 8720px;
  transition-timing-function: ease;
  transition-duration: .6s !important;
  height:760px;
}

.topics-section {
  padding: 20px 40px 0;
  box-sizing: border-box;
  color: #fff;
}

.topics-section .topics-subtitle {
  margin-top: 0;
}

.topics-section-title {
  font-size: 29px;
  margin-bottom: 40px;
  padding-bottom: 15px;
  position: relative;
}

.topics-section-title:after {
  content: "";
  display: block;
  width: 85px;
  height: 1px;
  background-color: #888888;
  position: absolute;
  left: 0;
  bottom: 0;
}

.t-ls-s {
  letter-spacing: -0.05em;
}

.topics-detail {
  /*display: flex;*/
  align-items: flex-start;
  justify-content: space-between;
}

.topics-detail.il {
  flex-direction: row-reverse;
}

.topics-detail figure {
  display: block;
}
.topics-detail ol {
  display: block;
  padding: 15px 60px;
}
.topics-detail ol li {
  counter-increment: heading;
  position: relative;
  width: 87%;
  margin-bottom: 15px;
  padding-left: 74px;
  line-height: 22px;
}
.topics-detail ol li:before {
  content: "0" counter(heading);
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 30px;
  transform: skewX(-20deg) scaleX(0.6);
}
_::-webkit-full-page-media, _:future, :root .topics-detail ol li:before {
    top: 5px;
}
.topics-detail ol li:after {
  content: "";
  position: absolute;
  top: 0;
  left: 52px;
  width: 4px;
  height: 100%;
}
.topics-detail ol li:first-of-type:before {
  letter-spacing: 7px;
}
.topics-detail ol li:nth-of-type(9) ~ .topics-detail ol li:before {
  content: counter(heading); /*10以上の処理*/
}
.topics-detail ol li:last-of-type {
  margin-bottom: 0;
}
.topics-detail p {
  padding: 25px 60px;
  line-height: 22px;
  opacity: 0;
}
#topics p.note {
  width: 980px;
  margin: 0 auto 45px;
  color: #e8e8e8;
}
/* .swiper-slide-active .topics-detail p {
  animation-name: slideIn;
  animation-duration: .4s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
} */

.section-2 .topics-detail ol {
	margin: 6.5% 0;
}

.section-3 .topics-detail ol {
	margin: 7.8% 0;
}

.section-5 .topics-detail ol {
	margin: 6.9% 0;
}

.section-0 .topics-detail ol li:nth-of-type(1):before,
.section-1 .topics-detail ol li:nth-of-type(2):before,
.section-2 .topics-detail ol li:nth-of-type(1):before,
.section-4 .topics-detail ol li:nth-of-type(2):before,
.section-5 .topics-detail ol li:nth-of-type(1):before { color: #0ff; }

.section-0 .topics-detail ol li:nth-of-type(2):before,
.section-1 .topics-detail ol li:nth-of-type(1):before,
.section-3 .topics-detail ol li:nth-of-type(1):before,
.section-4 .topics-detail ol li:nth-of-type(1):before,
.section-5 .topics-detail ol li:nth-of-type(2):before { color: #f00; }

.section-0 .topics-detail ol li:nth-of-type(1):after,
.section-1 .topics-detail ol li:nth-of-type(2):after,
.section-2 .topics-detail ol li:nth-of-type(1):after,
.section-4 .topics-detail ol li:nth-of-type(2):after,
.section-5 .topics-detail ol li:nth-of-type(1):after  { background: #0ff; }

.section-0 .topics-detail ol li:nth-of-type(2):after,
.section-1 .topics-detail ol li:nth-of-type(1):after,
.section-3 .topics-detail ol li:nth-of-type(1):after,
.section-4 .topics-detail ol li:nth-of-type(1):after,
.section-5 .topics-detail ol li:nth-of-type(2):after  { background: #f00; }

.section-4 .topics-detail ol li:nth-of-type(3):before { color: #adff04; }
.section-4 .topics-detail ol li:nth-of-type(3):after { background: #adff04; }

.topics-body {
  width: 436px;
}

.topics-caption {
  margin-top: 4px;
  font-size: 75%;
  line-height: 1.4;
  color: #999;
}

#topics-contents .swiper-button-prev,
#topics-contents .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 61px;
  margin-top: -30px;
  -webkit-background-size: 34px 61px;
  -moz-background-size: 34px 61px;
  -o-background-size: 34px 61px;
  background-size: 34px 61px;
  cursor: pointer;
  transition: opacity 0.2s ease-out;
}

#topics-contents .swiper-button-prev {
  left: -60px;
  background: url(/shared/image_new/arrow_slide_left.png) no-repeat left top;
}

#topics-contents .swiper-button-next {
  right: -60px;
  background: url(/shared/image_new/arrow_slide_right.png) no-repeat right top;
}

#topics-contents .swiper-button-prev.hidden {
  opacity: 0;
}

#topics-contents .swiper-button-next.hidden {
  opacity: 0;
}

#topics-contents .swiper-pager {
  padding: 20px 0;
  background: #4e4e4e;
}

#topics-contents .swiper-pager-inner {
  display: flex;
  justify-content: space-between;
  width: 980px;
  margin: 0 auto;
}

#topics-contents .pager {
  display: block;
  width: 146px;
  height: 76px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  /*border: 5px solid #222222;*/
  transition: all 0.3s ease-out;
  position: relative;
}

#topics-contents .pager:hover {
    filter: saturate(250%);
}

#topics-contents .pager:after {
  content: "";
  display: block;
  width: 72px;
  height: 10px;
  background-color: #0ff;
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transform: skewX(-20deg);
  transition: opacity .2s ease-out;
}

#topics-contents .pager:nth-child(1) { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_1.jpg); }
#topics-contents .pager:nth-child(2) { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_2.jpg); }
#topics-contents .pager:nth-child(3) { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_3.jpg); }
#topics-contents .pager:nth-child(4) { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_4.jpg); }
#topics-contents .pager:nth-child(5) { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_5.jpg); }
#topics-contents .pager:nth-child(6) { background-image: url(/product/archive/rav41904/image/design_commentary/concept_img_top_6.jpg); }

#topics-contents .pager.pager-active:after {
  opacity: 1;
  filter: saturate(250%);
}

.topics-innerPager {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.topics-innerPager span {
  cursor: pointer;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  border-radius: 10px;
  background: #333;
  opacity: 0.4;
}

.topics-innerPager span.selected {
  opacity: 1;
}

@keyframes slideIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (min-width: 569px) {
  .topics-sectionInner {
    display: none !important;
  }
  .ipu {
    margin-top: -140px;
  }
}

@media screen and (min-width: 0px) and (max-width: 568px) {
  #topics {
    padding: 20px 0 0;
  }

  #topics #startingMovie {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #000;
    transform: translate(0, 0);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
  }
  #topics #startingMovie video {
    position: static;
    top: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: translate(0, 0);
  }
  #topics-top {
    display: block !important;
  }
  .topics-title {
    margin-top: 0;
    font-size: 12px;
    height: 12px;
    white-space: nowrap;
    word-break: keep-all;
    align-items: flex-end;
  }

  .topics-title em {
    width: 188px;
    height: 12px;
  }
  .topics-title em:before {
    left: -34px;
    width: 35px;
    height: 12px;
    background-size: auto 100%;
  }
  .topics-title em:after {
    right: -34px;
    width: 35px;
    height: 12px;
    background-size: auto 100%;
  }

  #topics-top.hidden .topics-title {
    opacity: 1;
    transform: none;
  }

  .topics-subtitle {
  width: calc(100% - 100px);
  height: 29px;
  margin: 12px auto 18px;
  font-size: 19px;
  }
  .topics-subtitle:before {
    left: -40px;
  width: 40px;
  height: 29px;
  background-size: auto 100%;
  }
  .topics-subtitle:after {
    right: -40px;
  width: 40px;
  height: 29px;
  background-size: auto 100%;
  }
  .topics-subtitle span {
    line-height: 1.5;
  }

  #topics-top.hidden .topics-subtitle {
    opacity: 1;
    transform: none;
  }
  .topics-lead {
    margin-top: 0;
  }
  .topics-lead br.sp {
    display: block;
  }
  .topics-link {
    width: 100%;
  margin-bottom: 0;
  }
  #topics-top.hidden .topics-link {
    opacity: 1;
    transform: none;
  }
  .topics-link li {
    width: 100%;
    height: auto;
    margin: 0 0 1px 0 !important;
    flex-direction: column;
  color: #fff;
  }
  .topics-link li:after {
    content: none;
  }
  .topics-link li:hover {
    /* opacity: 1; */
	filter: none;
  }
  .topics-link li > span {
  display: block;
  width: 100%;
  padding: 22px 0 24px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  background-color: rgba(0,0,0,0.7);
  position: relative;
  }
  .topics-link li .topics-button {
    height: calc(156vw * 0.133);
    padding: 0;
    background-size: 100%;
    text-indent: -9999px;
    color: rgba(0,0,0,0);
  }
  .topics-link li .topics-button:after {
    width: 13px;
    height: 13px;
    margin: auto;
    background-image: url(/shared/image_new/icon_close.png);
    background-size: 100%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    bottom: 0;
    right: 10px;
    transition: transform 0.2s ease-out;
  }
  .topics-link li#topics-0 .topics-button:after,
  .topics-link li#topics-1 .topics-button:after,
  .topics-link li#topics-3 .topics-button:after {
	  top: 2px;
  }
  .topics-link li#topics-4 .topics-button:after {
	  top: -7px;
  }
  _::-webkit-full-page-media, _:future, :root .topics-link li#topics-4 .topics-button:after {
	  top: -9px;
  }
  .topics-link li.open .topics-button:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .topics-link li#topics-0 .topics-button { background-image: url(/product/archive/rav41904/image/design_commentary/sp/concept_img_top_1_sp.jpg); }
  .topics-link li#topics-1 .topics-button { background-image: url(/product/archive/rav41904/image/design_commentary/sp/concept_img_top_2_sp.jpg); }
  .topics-link li#topics-2 .topics-button { background-image: url(/product/archive/rav41904/image/design_commentary/sp/concept_img_top_3_sp.jpg); }
  .topics-link li#topics-3 .topics-button { background-image: url(/product/archive/rav41904/image/design_commentary/sp/concept_img_top_4_sp.jpg); }
  .topics-link li#topics-4 .topics-button { background-image: url(/product/archive/rav41904/image/design_commentary/sp/concept_img_top_5_sp.jpg); }
  .topics-link li#topics-5 .topics-button { background-image: url(/product/archive/rav41904/image/design_commentary/sp/concept_img_top_6_sp.jpg); }
  .topics-sectionInner {
    display: none;
    width: 100%;
    background-color: #222;
    color: #fff;
    text-align: left;
    box-sizing: border-box;
  }
  .topics-section-title {
    margin: 30px 0 20px;
    padding-bottom: 10px;
    font-size: 4.7vw;
    font-weight: bold;
    line-height: 1.9;
  }
  .topics-section-title:after {
    width: 40px;
  }

  .topics-detail figure video {
    width: 100%;
  }
  .topics-link .topics-subtitle {
    display: none;
  }
  .topics-detail ol {
    padding: 15px;
  }
  .topics-detail ol li {
    width: calc(100% - 74px);
  margin-bottom: 20px !important;
  }
  .topics-detail ol li:last-of-type {
    margin-bottom: 0 !important;
  }
  .topics-detail p {
    padding: 15px;
  animation-name: slideIn;
  animation-duration: .4s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  }
  #topics-0 .topics-detail ol li:nth-of-type(1):before,
  #topics-1 .topics-detail ol li:nth-of-type(2):before,
  #topics-2 .topics-detail ol li:nth-of-type(1):before,
  #topics-4 .topics-detail ol li:nth-of-type(2):before,
  #topics-5 .topics-detail ol li:nth-of-type(1):before  { color: #0ff; }

  #topics-0 .topics-detail ol li:nth-of-type(2):before,
  #topics-1 .topics-detail ol li:nth-of-type(1):before,
  #topics-3 .topics-detail ol li:nth-of-type(1):before,
  #topics-4 .topics-detail ol li:nth-of-type(1):before,
  #topics-5 .topics-detail ol li:nth-of-type(2):before  { color: #f00; }

  #topics-0 .topics-detail ol li:nth-of-type(1):after,
  #topics-1 .topics-detail ol li:nth-of-type(2):after,
  #topics-2 .topics-detail ol li:nth-of-type(1):after,
  #topics-4 .topics-detail ol li:nth-of-type(2):after,
  #topics-5 .topics-detail ol li:nth-of-type(1):after { background: #0ff; }

  #topics-0 .topics-detail ol li:nth-of-type(2):after,
  #topics-1 .topics-detail ol li:nth-of-type(1):after,
  #topics-3 .topics-detail ol li:nth-of-type(1):after,
  #topics-4 .topics-detail ol li:nth-of-type(1):after,
  #topics-5 .topics-detail ol li:nth-of-type(2):after { background: #f00; }

  #topics-4 .topics-detail ol li:nth-of-type(3):before { color: #adff04; }

  #topics-4 .topics-detail ol li:nth-of-type(3):after { background: #adff04; }

  .topics-detail.il {
    flex-direction: column;
  }
  .topics-detail.ir {
    flex-direction: column;
  }
  .topics-body,
  .topics-image {
    margin-bottom: 20px;
  }
  .topics-body p {
    line-height: 1.8;
  }
  #topics-contents {
    display: none !important;
  }
  .topics-innerPager {
    display: none !important;
  }
  
  #topics p.note {
    width: 100%;
    margin: 0;
    padding: 20px 10px;
    color: #e8e8e8;
    box-sizing: border-box;
  }
}

#lnav #lnav-inner ul li {
    width: 194px;
}

#snav #snav-inner #snav-title4 .snav-title-mode {
    float: left;
    width: 652px;
    padding: 4px 0;
}

#snav #snav-inner #snav-title4 .snav-title-select {
    float: right;
    width: 325px;
    padding: 4px 0;
    border-left: 1px solid #ccc;
}


  .simulation .note {
    margin-top: 15px;
    font-size: 12px;
    text-align: right;
    color: #fff;
  }

@media screen and (min-width: 0px) and (max-width: 568px) {
  .simulation .note {
    margin-top: 10px;
    font-size: 10px;
    text-align: center;
  }
}

#support .mod-list-box li a {
  padding: 0 0 0 90px;
}

.red-note-shadow    {text-shadow: -1px -1px 3px rgba(0, 0, 0, 1)}

@media screen and (min-width: 0px) and (max-width: 568px) {
  .visual_rav4top .info-year {
      left: calc(510px - 50vw);
  }
  .visual_rav4top #mainv01 .info-year {
    top: 9px;
    padding:3px 5px 3px 2px;
  }
  .visual_rav4top #mainv02 .info-year {
    top: -6px;
  }
  .visual_rav4top #mainv03 .info-year {
    top: -9px;
  }
}