@-webkit-keyframes fadeIn {
	0% {
	  opacity: 0
	}
  
	100% {
	  opacity: 1
	}
  }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0
	}
  
	100% {
	  opacity: 1
	}
  }
  
  #simple {
	overflow: hidden
  }
  
  #simple .slider {
	overflow: hidden;
	position: relative;
	/* height  : 640px */
  }
  
  #simple .slider .slick-slide {
	position : relative;
	/* height   : 640px; */
	/* max-width: 1200px */
  }

	.top-fv .slick-dots {
		opacity: 0;
	}
  
  /* #simple .slider .slick-slide:nth-of-type(1) a, */
  /* #simple .slider .slick-slide:nth-of-type(2) a, */
  /* #simple .slider .slick-slide:nth-of-type(3) a, */
  /* #simple .slider .slick-slide:nth-of-type(4) a { */
	/* max-width: 1200px */
  /* } */
  
  #simple .slider .slick-cloned a {
	background: #000
  }
  
  #simple .slider .slick-cloned a img {
	opacity: 0.6
  }
  
  #simple .slider .slick-prev {
	text-indent    : -100vw;
	background     : url(../../images/arrow-left.png) no-repeat;
	background-size: contain;
	position       : absolute;
	top            : 50%;
	left           : 50px;
	z-index        : 1;
	width          : 40px;
	height         : 40px;
	text-indent    : -200vw;
	margin         : -35px 0 0 0;
  }
  
  #simple .slider .slick-next {
	text-indent      : -100vw;
	background       : url(../../images/arrow-left.png) no-repeat;
	background-size  : contain;
	position         : absolute;
	-webkit-transform: rotate(180deg);
	transform        : rotate(180deg);
	top              : 50%;
	right            : 50px;
	z-index          : 1;
	width          : 40px;
	height         : 40px;
	text-indent      : -200vw;
	margin           : -35px 0 0 0
  }
  
  #simple .slider .slick-dots {
	display         : -webkit-box;
	display         : -ms-flexbox;
	display         : flex;
	-webkit-box-pack: center;
	-ms-flex-pack   : center;
	justify-content : center;
	width           : 100%;
	margin          : 0 auto;
	position        : absolute;
	bottom          : 40px;
	left            : 0
  }
  
  #simple .slider .slick-dots li {
	width     : 62px;
	height    : 2px;
	text-align: center;
	position  : relative
  }
  
  #simple .slider .slick-dots li button {
	width      : 90%;
	height     : 2px;
	background : #999;
	text-indent: -200vw
  }
  
  #simple .slider .slick-dots li.slick-active button {
	background: #1c238a
  }
  
  @media (max-width: 767px) {
	#simple .slider {
	  margin  : 0;
	  position: relative;
	  height  : calc(60vw + 70px)
	}
  
	#simple .slider .slick-slide {
	  position: relative;
	  height  : 60vw
	}
  
	#simple .slider .slick-slide a {
	  display: block
	}
  
	#simple .slider .slick-slide img {
	  width: 100%
	}
  
	#simple .slider .slick-dots {
	  display  : -webkit-box;
	  display  : -ms-flexbox;
	  display  : flex;
	  max-width: 100%;
	  margin   : 0 auto
	}
  
	#simple .slider .slick-dots li {
	  text-align: center;
	  width     : 50px
	}
  
	#simple .slider .slick-dots li button {
	  width      : 90%;
	  height     : 2px;
	  margin     : -20px 0 0;
	  background : #999;
	  text-indent: -200vw
	}
  
	#simple .slider .slick-dots li.slick-active button {
	  background: #1c238a
	}
  
	#simple .slider .slick-prev {
	  text-indent    : -100vw;
	  background     : url(../../images/ico-arrow_blue.png) no-repeat;
	  background-size: contain;
	  position       : absolute;
	  bottom         : 30px;
	  left           : 7.5%;
	  z-index        : 1;
	  width          : 30px;
	  height         : 30px;
	  text-indent    : -200vw;
	  top            : auto
	}
  
	#simple .slider .slick-next {
	  text-indent      : -100vw;
	  background       : url(../../images/ico-arrow_blue.png) no-repeat;
	  background-size  : contain;
	  position         : absolute;
	  -webkit-transform: rotate(180deg);
	  transform        : rotate(180deg);
	  bottom           : 30px;
	  top              : auto;
	  right            : 7.5%;
	  z-index          : 1;
	  width            : 30px;
	  height           : 30px;
	  text-indent      : -200vw
	}
  }
  
  section .inner {
	max-width: 1200px;
	margin   : 0 auto;
	padding  : 0 30px
  }
  
  @media (max-width: 767px) {
	section .inner {
	  max-width: 100%;
	  margin   : 0 auto;
	  padding  : 0
	}
  }
  
  .flex {
	display         : -webkit-box;
	display         : -ms-flexbox;
	display         : flex;
	-webkit-box-pack: justify;
	-ms-flex-pack   : justify;
	justify-content : space-between;
	-ms-flex-wrap   : wrap;
	flex-wrap       : wrap
  }
  
  .whats-auto-race {
	  display: inline-block;
	  font-style: italic;
	  line-height: 1.3;
	  font-weight: 400;
	  font-family: "Roboto Condensed", sans-serif;
	  font-size: 70px;
	  letter-spacing: 3px;
  }
  
  h2 span {
	display    : block;
	font-size  : 1.8rem;
	line-height: 1.8;
	color      : #000
  }
  
  p {
	font-size  : 14px;
	line-height: 2
  }
  
  p .lead {
	padding: 30px 0 0 0
  }
  
  /* @media (max-width: 767px) { */
	/* span { */
	  /* font-size: 14px; */
	/* } */
  /* } */
  
  .btn {
	display   : -webkit-inline-box;
	display   : -ms-inline-flexbox;
	display   : inline-flex;
	text-align: center;
	padding   : 70px 30px 0 30px;
	width     : 100%
  }
  
  .btn a {
	border    : 1px solid #c23333;
	width     : 100%;
	padding   : 40px;
	display   : block;
	font-size : 14px;
	text-align: center;
	color     : #c23333;
	max-width : 1080px;
	margin    : 0 auto
  }
  
  @media (max-width: 767px) {
	.btn {
	  display   : -webkit-inline-box;
	  display   : -ms-inline-flexbox;
	  display   : inline-flex;
	  text-align: center;
	  padding   : 0 7.5% 0 7.5%;
	  width     : 100%
	}
  
	.btn a {
	  padding  : 20px;
	  font-size: 14px;
	  max-width: 100%
	}
  }
  
  /* #Topics { */
	/* padding: 42px 0 0 0 */
  /* } */
  
  #Topics h2 {
	width  : 100%;
	display: block
  }
  
  #Topics h2 img {
	width : 226px;
	height: auto
  }
  
  #Topics .left {
	width: 29%
  }
  
  #Topics .left .archive {
	display  : block;
	position : relative;
	padding  : 80px 0 0 0;
	font-size: 14px
  }
  
  #Topics .left .archive::before {
	content        : "";
	display        : inline-block;
	width          : 19px;
	height         : 14px;
	background     : url(../images/ico-arrow-right.png) no-repeat;
	background-size: 100%;
	position       : absolute;
	right          : 0;
	top            : 80px
  }
  
  #Topics .left .archive::after {
	content        : "";
	display        : inline-block;
	width          : 100%;
	height         : 1px;
	background     : #1c238a;
	background-size: cover
  }
  
  #Topics .right {
	width: 70%
  }
  
  #Topics .right li {
	border-top: 1px solid #dcdcdc;
	padding   : 30px 0;
	display   : inline-block;
	font-size : 14px;
	width     : 100%
  }
  
  #Topics .right li:last-child {
	border-bottom: 1px solid #dcdcdc
  }
  
  #Topics .right li .date {
	display: inline-block;
	color  : #222222;
	margin : 0 20px 0 0
  }
  
  #Topics .right li p {
	display: inline-block;
	margin : 0;
	color  : #222
  }
  
  @media (max-width: 767px) {
	/* #Topics { */
	  /* padding: 40px 0 */
	/* } */
  /*  */
	#Topics .inner h2 {
	  font-size: 10vw;
	  display  : block
	}
  
	#Topics .inner h2 img {
	  max-width: 100%;
		  height: auto;
		  vertical-align: top
	}
  
	#Topics .inner h2 span {
	  margin: -10px 0 0 0
	}
  
	#Topics .inner .left {
	  width: 100%
	}
  
	#Topics .inner .left .archive {
	  display: none
	}
  
	#Topics .inner .right {
	  width  : 100%;
	  padding: 40px 0 0 0
	}
  
	#Topics .inner .right li {
	  padding  : 18px 0;
	  display  : inline-block;
	  font-size: 1.3rem
	}
  
	#Topics .inner .right li .date {
	  display   : block;
	  text-align: left;
	  padding   : 0 20px 0 0
	}
  
	#Topics .inner .right li p {
	  display     : inline-block;
	  padding-left: 0;
	  padding-top : 10px;
	  text-align  : left;
	  margin      : 0
	}
  
	#Topics .inner .archive {
	  position: relative;
	  padding : 40px 0 0 0
	}
  
	#Topics .inner .archive::before {
	  content        : "";
	  display        : inline-block;
	  width          : 19px;
	  height         : 14px;
	  background     : url(../images/ico-arrow-right.png) no-repeat;
	  background-size: 100%;
	  position       : absolute;
	  right          : 0
	}
  
	#Topics .inner .archive::after {
	  content        : "";
	  display        : inline-block;
	  width          : 100%;
	  height         : 1px;
	  background     : #1c238a;
	  background-size: cover
	}
  }
  
  #Movie .left {
	width: 29%
  }
  
  #Movie .right {
	width: 70%
  }

  #Movie .right iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  
  
  #Movie {
	padding      : 60px 0;
	position     : relative;
	z-index      : 1;
	margin-bottom: 20px;
  }
  
  #Movie::after {
	content   : "";
	display   : block;
	background: #F8F8F8;
	width     : 100%;
	height    : 560px;
	position  : absolute;
	right     : 0;
	bottom    : 0;
	z-index   : -1
  }
  
  #Movie .inner {
	background-size: contain
  }
  
  #Movie .inner p img {
	width : auto;
	height: 480px
  }
  
  @media (max-width: 767px) {
	#Movie {
	  padding      : 60px 0;
	  position     : relative;
	  z-index      : 1;
	  margin-bottom: 0
	}
  
	#Movie::after {
	  content   : "";
	  display   : block;
	  background: #F8F8F8;
	  width     : 100%;
	  height    : 120px;
	  position  : absolute;
	  right     : 0;
	  bottom    : 50px;
	  z-index   : -1
	}
  
	#Movie .inner {
	  background: none
	}
  
	  #Movie .inner .left {
	  width: 100%
	}
  
	#Movie .inner .right {
	  width  : 100%;
	  padding: 40px 0 0 0
	}
  
	#Movie .inner .movie-wrap {
	  width            : 100%;
	  -webkit-transform: translateY(-40px);
	  transform        : translateY(-40px);
	  margin           : 0 auto
	}
  
	#Movie .inner p img {
	  width            : 90%;
	  height           : auto;
	  -webkit-transform: translateY(-30px);
	  transform        : translateY(-30px)
	}
  }
  
  #Whats {
	background     : url(../../images/sec-what-bg.jpg) no-repeat center;
	background-size: contain;
	padding        : 120px 0
  }
  
  #Whats .inner p {
	text-align: left;
	padding   : 30px 0 0 0;
	color     : #fff
  }
  
  #Whats .inner .left {
	width: 39%
  }
  
  #Whats .inner .left h2 {
	color:#fff;
	font-size: 4.3vw;
	padding-left: 2vw;

  }
  
  #Whats .inner .left h2 span {
	font-size: 1.8rem;
	color: #fff;
	font-family: "Roboto Condensed", sans-serif;
    font-style: italic;
  }
  
  #Whats .inner .right {
	width: 60%;
	color: #fff
  }
  
  #Whats .inner .right li {
	text-align: center;
	width: 23%;
  }
  
  #Whats .inner .right li img {
	width: 11vw;
  }
  
  #Whats .inner .right li p {
	text-align: center;
	padding   : 20px 0 0 0;
	color     : #fff
  }
  
  @media (max-width: 767px) {
	#Whats {
	  padding        : 40px 0;
	  background-size: cover
	}
  
	#Whats .inner p {
	  text-align: left
	}
  
	#Whats .inner .left {
	  width     : 100%;
	  text-align: left
	}
  
	#Whats .inner .left h2 {
	  font-size: 4.5rem
	}
  
	#Whats .inner .right {
	  width  : 100%;
	  padding: 30px 0 0 0
	}
  
	#Whats .inner .right li {
	  text-align       : center;
	  width            : 50%;
	  display          : -webkit-inline-box;
	  display          : -ms-inline-flexbox;
	  display          : inline-flex;
	  -webkit-box-align: center;
	  -ms-flex-align   : center;
	  align-items      : center;
	  padding-bottom   : 20px
	}
	#Whats .inner .right li img.whats-autorace-inner-item {
		width: 47%;
	}
	#Whats .inner .right li p.whats-autorace-inner-item {
		width: 47%;
	}
  
	#Whats .inner .right li img {
	  width : 122px;
	  height: 122px
	}
  
	#Whats .inner .right li p {
	  display   : inline-block;
	  text-align: left;
	  padding   : 30px 0 0 20px
	}
  }
  @media (max-width: 554px) {
	#Whats .inner .right li img.whats-autorace-inner-item {
    	width: 122px;
	}
	#Whats .inner .right li p.whats-autorace-inner-item {
		width: 100%;
		text-align: center;
	}

  }
  @media (max-width: 430px) {
	#Whats .inner .right li img.whats-autorace-inner-item {
    	/* width: 75%; */
	}
	#Whats .inner .right li p { 
		padding: 30px 0 0 10px;
	}

	}
  #JIA {
	background-position: top 30px right 0;
	background-size    : 560px;
	padding            : 0 0 120px 0;
	text-align         : center
  }
  
  #JIA .inner {
	
  }
  
  #JIA .inner .lead {
	padding: 30px 0
  }
  
  #JIA .inner h2 img {
	width : 345px;
	height: auto
  }
  
  #JIA .inner ul {
	padding: 40px 0 0 0
  }
  
  #JIA .inner ul li {
	position: relative;
	width   : 33.333%
  }
  
  #JIA .inner ul li img {
	width: 100%
  }
  
  #JIA .inner ul li a {
	display : block;
	position: relative;
	width   : 100%
  }
  
  #JIA .inner ul li a .caption {
	position   : absolute;
	bottom     : 0;
	left       : 110px;
	padding    : 0 0 7px 0;
	color      : #fff;
	line-height: 1.5;
	text-align : left
  }
  
  #JIA .btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	width  : 100%;
	padding: 70px 0 0 0
  }
  
  #JIA .btn a {
	border   : 1px solid #1c238a;
	width    : 100%;
	padding  : 40px;
	display  : block;
	font-size: 14px;
	color    : #1c238a
  }
  
  @media (max-width: 767px) {
	#JIA {
	  text-align: center;
	  padding   : 50px 0;
	  background: none
	}
  
	#JIA .inner .lead {
	  text-align: center
	}
  
	#JIA .inner h2 span {
	  margin: 0 0 20px 0
	}
  
	#JIA .inner h2 img {
	  width : 175px;
	  height: auto
	}
  
	#JIA .inner ul {
	  padding: 0
	}
  
	#JIA .inner ul li {
	  position: relative;
	  width   : 100%
	}
  
	#JIA .inner ul li img {
	  width: 100%
	}
  
	#JIA .inner ul li a {
	  display : block;
	  position: relative;
	  width   : 100%
	}
  
	#JIA .inner ul li a .caption {
	  position   : absolute;
	  bottom     : 0px;
	  left       : 0;
	  color      : #fff;
	  line-height: 1.5;
	  text-align : left;
	  font-size  : 1.1rem;
	  padding    : 10px 10px 5px 10px
	}
  
	#JIA .inner .btn {
	  display: -webkit-inline-box;
	  display: -ms-inline-flexbox;
	  display: inline-flex;
	  width  : 100%;
	  padding: 40px 0 0 0
	}
  
	#JIA .inner .btn a {
	  border     : 1px solid #1c238a;
	  width      : 100%;
	  padding    : 20px;
	  display    : block;
	  text-align : center;
	  line-height: 1.5;
	  font-size  : 1.5rem
	}
  
	#JIA .inner .btn a:hover {
	  background: #1c238a;
	  color     : #fff
	}
  }
  
  #FAQ {
	background: #f0f3f6;
	padding   : 120px 0
  }
  
  #FAQ .flex {
	position: relative
  }
  
  #FAQ .flex h2 {
	font-size: 0%
  }
  
  #FAQ .flex h2 span {
	display: inline-block;
	margin : 8px 0 0 0
  }
  
  #FAQ .flex h2 img {
	width : 70px;
	height: auto
  }
  
  #FAQ .left {
	position: absolute;
	right   : 100px;
	top     : 70px
  }
  
  #FAQ .left a {
	font-size: 14px;
	color    : #222;
	position : relative;
	z-index  : 1000
  }
  
  #FAQ .left::before {
	content        : "";
	display        : inline-block;
	width          : 19px;
	height         : 14px;
	background     : url(../images/ico-arrow-right.png) no-repeat;
	background-size: 100%;
	position       : absolute;
	right          : -40px;
	top            : 5px
  }
  
  #FAQ .left::after {
	content        : "";
	display        : inline-block;
	width          : 100%;
	height         : 1px;
	background     : #1c238a;
	background-size: cover
  }
  
  #FAQ ul {
	padding: 40px 0 0 0
  }
  
  #FAQ ul li {
	padding: 30px 0;
	width  : 48%
  }
  
  #FAQ ul li .Quetion span {
	display  : inline-block;
	color    : #1c238a;
	font-size: 26px
  }
  
  #FAQ ul li .Quetion p {
	display     : inline-block;
	font-size   : 16px;
	font-weight : bold;
	padding-left: 10px
  }
  
  #FAQ ul li .ancer {
	padding    : 40px;
	line-height: 2;
	background : #fff;
	font-size  : 1.4rem;
	position   : relative;
	margin     : 40px 0 0 0
  }
  
  #FAQ ul li .ancer:before {
	content     : "";
	width       : 0;
	height      : 0;
	border-style: solid;
	border-width: 0 9px 15.6px 9px;
	border-color: transparent transparent #ffffff transparent;
	position    : absolute;
	top         : -10px;
	left        : 18px
  }
  
  #FAQ .left {
	position: absolute;
	right   : 0;
	top     : 0;
	width   : 10%
  }
  
  #FAQ .left::before {
	content        : "";
	display        : inline-block;
	width          : 19px;
	height         : 14px;
	background     : url(../images/ico-arrow-right.png) no-repeat;
	background-size: 100%;
	position       : absolute;
	right          : 0;
	top            : 5px
  }
  
  #FAQ .left::after {
	content        : "";
	display        : inline-block;
	width          : 100%;
	height         : 1px;
	background     : #1c238a;
	background-size: cover
  }
  
  .topics-flex {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	margin-top: 20px;
  }
  
  .topics-left a {
	font-size: 14px;
	color    : #222;
	position : relative;
	z-index  : 1000
  }
  
  .topics-left {
	position: relative;
	right   : 0;
	top     : 0;
	width   : 12%
  }
  
  .topics-left::before {
	content        : "";
	display        : inline-block;
	width          : 19px;
	height         : 14px;
	background     : url(../../images/ico-arrow-right.png) no-repeat;
	background-size: 100%;
	position       : absolute;
	right          : 0;
	top            : 5px
  }
  
  .topics-left::after {
	content        : "";
	display        : inline-block;
	width          : 100%;
	height         : 1px;
	background     : #E30011;
	background-size: cover
  }
  
  
  @media (max-width: 767px) {
	#FAQ {
	  padding: 60px 0
	}
  
	#FAQ .flex h2 {
	  font-size : 0%;
	  text-align: left
	}
  
	#FAQ .flex h2 span {
	  display  : block;
	  font-size: 14px
	}
  
	#FAQ .flex h2 .grade img {
	  width : 24px;
	  margin: -17px 0 0 1px
	}
  
	#FAQ ul li {
	  padding: 20px 0;
	  width  : 100%
	}
  
	#FAQ ul li .Quetion span {
	  display  : inline-block;
	  color    : #1c238a;
	  font-size: 2.6rem
	}
  
	#FAQ ul li .Quetion p {
	  display     : inline;
	  font-size   : 1.5rem;
	  font-weight : bold;
	  padding-left: 20px
	}
  
	#FAQ ul li .ancer {
	  padding   : 25px;
	  font-size : 1.3rem;
	  margin-top: 25px
	}
  
	#FAQ ul li .ancer:before {
	  content     : "";
	  width       : 0;
	  height      : 0;
	  border-style: solid;
	  border-width: 0 9px 15.6px 9px;
	  border-color: transparent transparent #ffffff transparent;
	  position    : absolute;
	  top         : -10px;
	  left        : 18px
	}
  
	#FAQ .sp a {
	  color    : #000;
	  font-size: 14px;
	  width    : 50%;
	  display  : block;
	  position : relative;
	  margin   : 20px 0 0 0
	}
  
	#FAQ .sp a::before {
	  content        : "";
	  display        : inline-block;
	  width          : 19px;
	  height         : 14px;
	  background     : url(../images/ico-arrow-right.png) no-repeat;
	  background-size: 100%;
	  position       : absolute;
	  right          : 0px;
	  top            : 5px
	}
  
	#FAQ .sp a::after {
	  content        : "";
	  display        : inline-block;
	  width          : 100%;
	  height         : 1px;
	  background     : #1c238a;
	  background-size: cover
	}
  
	.topics-sp{
	  display: block;
	  width: 100%;
	}
  
	.topics-sp a {
	  color    : #000;
	  font-size: 14px;
	  width    : 50%;
	  display  : block;
	  position : relative;
	  margin   : 20px 0 0 0
	}
  
	.topics-sp a::before {
	  content        : "";
	  display        : inline-block;
	  width          : 19px;
	  height         : 14px;
	  background     : url(../../images/ico-arrow-right.png) no-repeat;
	  background-size: 100%;
	  position       : absolute;
	  right          : 0px;
	  top            : 5px
	}
  
	.topics-sp a::after {
	  content        : "";
	  display        : inline-block;
	  width          : 100%;
	  height         : 1px;
	  background     : #E30011;
	  background-size: cover
	}
  }
  
  /** ===========================================================================
   ** ---------------------------------------------------------------------------
   * CSSの修正
   * CSSを修正する場合はここから下に記載
   * ここより上は元からあったもので、その部分はいじらない
   * 2019.09.05
   ** ---------------------------------------------------------------------------
   * ========================================================================= */
  
  
  
  @media only screen and (max-width: 1024px) {
	#simple .slider{
	  height:auto;
	}
	#simple .slider .slick-slide {
	  position: relative;
	  max-height: auto;
	  /* max-width: 768px; */
	  height:auto;
	  width:100%;
	}
  }
  
  @media only screen and (max-width: 767px) {
	#simple .slider{
	  /* height: calc(60vw + 70px); */
	}
	#simple .slider .slick-slide{
	  /* height:60vw; */
	}
  }
  
  /*追記 2019.09.05*/
  
  #banner {
	background-size    : 560px;
	padding            : 40px 0;
	text-align         : center
  }
  
  #banner .inner {
	width: 0 7.5%
  }
  
  #banner .inner .lead {
	padding: 30px 0
  }
  
  #banner .inner h2 {
	font-size: 0%;
	display  : inline-block
  }
  
  #banner .inner h2 span {
	padding: 10px 0 0 0
  }
  
  #banner .inner h2 img {
	width : 80%;
	height: auto
  }
  
  @media (max-width: 767px) {
	#banner {
	  text-align: center;
	  padding   : 20px 0;
	  background: none
	}
  
	#banner .inner .lead {
	  text-align: center
	}
  
	#banner .inner h2 span {
	  margin: 0 0 20px 0
	}
  
	#banner .inner h2 img {
	  width : 80%;
	  height: auto
	}
  
  }