@charset "UTF-8";
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222;
}

html {
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,
canvas,
img,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

a:link,
a:visited,
a:hover,
a:active {
  border: none;
}

a {
  outline: none;
}

a:focus,
*:focus {
  outline: none;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clearfix:after {
  clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */ }
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */ }
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
}

  a,
  a:visited {
    text-decoration: underline;
}

  a[href]:after {
    content: " (" attr(href) ")";
}

  abbr[title]:after {
    content: " (" attr(title) ")";
}

  /*
   * Don't show links for images, or javascript/internal links
   */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
}

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
}

  thead {
    display: table-header-group;
    /* h5bp.com/t */ }

  tr,
  img {
    page-break-inside: avoid;
}

  img {
    max-width: 100% !important;
}

  @page {
    margin: 0.5cm;
}

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
}

  h2,
  h3 {
    page-break-after: avoid;
} }


/* ==========================================================================
   
   ========================================================================== */
#selectArea {
	width: 100%;
	min-width: 1000px;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#66000000,EndColorStr=#66000000);
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9998;
}

#selectArea .selectBase {
	background: url(../img/top/flag_jp.png) no-repeat left top;
	width: 850px;
	position: relative;
	left: 50%;
	top: 50%;
	margin-left: -428px;
  margin-top: -165px;
}

#selectArea .selectBase .inner {
	background: url(../img/top/select_base.png) no-repeat left top;
	padding-left: 350px;
	width: 500px;
	height: 330px;
}

#selectArea .selectBase .inner {
	background: url(../img/top/select_base.png) no-repeat left top;
}

#selectArea .selectBase h3,
#selectArea .selectBase p {
	padding: 0;
	margin: 0;
	line-height: 0;
}

#selectArea .selectBase h3 {
	position: absolute;
	left: 371px;
	top: 33px;
}

#selectArea .selectBase .copy {
	position: absolute;
	left: 336px;
	top: 120px;
}

#selectArea .selectBase .carElectronics {
	position: absolute;
	left: 310px;
	top: 160px;
}

#selectArea .selectBase .communications {
	position: absolute;
	left: 292px;
	top: 200px;
}

#selectArea .selectBase .audio {
	position: absolute;
	left: 543px;
	top: 160px;
}

#selectArea .selectBase .about {
	position: absolute;
	left: 470px;
	top: 250px;
	cursor: pointer;
}

#selectArea .selectBase .household {
	position: absolute;
	left: 275px;
	top: 277px;
	line-height:1em;
	font-size: 0.7em;
	width: 400px;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html {
  width: 100%;
  height: 100%;
 }
  
html body {
	width: 100%;
	height: 100%;
	background:#000;
}

#wrap{
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	min-width:1000px;
	min-height:572px;
	overflow:hidden;
}
.top_container{
	position:absolute;
	width:100%;
	height:100%;
}

.top_container .area{
	position:absolute;
	width:100%;
	height:100%;
}

.top_container .area h1{
	position:absolute;
	top:33.2%;
	left:8.8%;
}

.top_container .area .btn_identity{
	position:absolute;
	top:50.6%;
	left:9.1%;
	cursor:pointer;
	z-index:9997;
}

.top_container .area .btn_history{
	position:absolute;
	top:70.1%;
	left:9.1%;
	cursor:pointer;
	z-index:9998;
}

.top_container .area .btn_mclarenhonda{
	position:absolute;
	top:55.1%;
	left:9.1%;
	cursor:pointer;
	z-index:9998;
}

.top_container .area .btn_wtcc{
	position:absolute;
	top:60.1%;
	left:9.1%;
	cursor:pointer;
	z-index:9998;
}

.top_container .area .btn_motor{
	position:absolute;
	top:55.1%;
	left:9.1%;
	cursor:pointer;
	z-index:9998;
}

.top_container h2{
	position:absolute;
}

.top_container h2.top_title1{
	top:46.6%;
	left:40.4%;
}

.top_container h2.top_title2{
	top:46.6%;
	left:54.7%;
}

.top_container h2.top_title3{
	top:47.2%;
	left:75.3%;
}

.top_container h2.top_title4 img{
	position:absolute;
}

.top_container h2.top_title4{
	width:145px;
	height:48px;
	top:46.6%;
	left:88.0%;
}


.top_container .area .bg{
	position:absolute;
	width:100%;
	height:100%;
}

.top_container .area .bg img{
	width:100%;
	height:100%;
}

#stage_clicker {
  position: absolute;
  overflow: hidden;
  width:100%;
  height:100%;
}
#stage_clicker div {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 999;
    -moz-transform: skewX(-25deg);
    -webkit-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    transform: skewX(-25deg);
    cursor: pointer;
    background: white;
    opacity: .0;
    filter: alpha(opacity=0) .0;
    -ms-filter: "alpha(opacity=0)" .0;
    -moz-opacity: .0;
    -khtml-opacity: .0;
	
	width:231px;
}
#stage_clicker #clicker1 {
    left: 37.2%;
	background:#FF0000;
}
#stage_clicker #clicker2 {
    left: 53.7%;
	background:#FFFF00;
}
#stage_clicker #clicker3 {
    left: 70.2%;
	background:#00FF00;
}
#stage_clicker #clicker4 {
    left: 86.7%;
}

.contents_container{
	position:absolute;
	width:100%;
	height:100%;
}
.contents_container .contents{
	position:absolute;
	width:100%;
	height:100%;
	display:none;
}
.contents_container .contents .bg{
	position:absolute;
	width:100%;
	height:100%;
}
.contents_container .contents .bg img{
	width:100%;
	height:100%;
}
.contents_container .layer{
	position:absolute;
	width:100%;
	height:100%;
}
.contents_container .layer img{
	width:100%;
	height:100%;
}
.contents_container #contents1 .select_link{
    bottom: 25%;
    right: 7%;
}
.contents_container #contents2 .select_link{
    bottom: 27%;
    left: 7%;
}
.contents_container #contents3 .select_link{
    bottom: 27%;
    left: 7%;
}
.contents_container .select_link{
	position: absolute;
	font-size: 1.24vw;
}
.contents_container .select_link:hover{
	cursor: pointer;
	text-decoration: underline;
}

.contents_container .layer .syc_inner{
	position:absolute;
	width:100%;
	height:100%;
	font-size:0;
}

.contents_container .layer.syc_container img{
	width:auto;
	height:auto;
}

.syc_inner .title{
	position:absolute;
	left:12.0%;
	top:23.4%;
}
.syc_inner .copy{
	position:absolute;
	left:12.0%;
	top:31.9%;
}

.area_btn_container{
	position:absolute;
	width:100%;
	height:100%;
}

.area_btn{
	position:absolute;
	cursor:pointer;
}

.area_btn .ov{
	position:absolute;
	top:0;
	left:0;
}

#area_btn1{
	top:45.1%;
	left:10.2%;
}

#area_btn2{
	top:45.1%;
	left:25.8%;
}

#area_btn3{
	top:45.1%;
	left:41.4%;
}

#area_btn4{
	top:66.3%;
	left:10.2%;
}

#area_btn5{
	top:66.3%;
	left:25.8%;
}

#area_btn6{
	top:66.3%;
	left:41.4%;
}

.a1{
	width:100%;
	height:100%;
}
.a1 li{
	position:absolute;
}


.a1 .pl1{ left:11.7%; }
.a1 .pl2{ left:25.3%; }
.a1 .pl3{ left:38.9%; }
.a1 .pl4{ left:52.4%; }
.a1 .pt1{ top:42.0%; }
.a1 .pt2{ top:47.4%; }



.syc_inner .title{
	position:absolute;
	left:12.0%;
	top:24.0%;
}

/* area1 */
.syc_inner #area_container1 .title{
	position:absolute;
	left:12.0%;
	top:18.9%;
}

.btn_area_top{
	position:absolute;
	left:12%;
	top:26.8%;
	cursor:pointer;
}

.btn_area_back_top{
	position:absolute;
	cursor:pointer;
}

.btn_area_back_top .ov{
	position:absolute;
	top:0;
	left:0;
}

#area_container1 .btn_area_back_top {
	left: 37%;
  top: 26.5%;
}

#area_container2 .btn_area_back_top {
	left: 47.8%;
  top: 43.6%;
}

#area_container3 .btn_area_back_top {
	left: 47%;
  top: 27%;
}

#area_container4 .btn_area_back_top {
	left: 47%;
  top: 31.8%;
}

#area_container5 .btn_area_back_top {
	left: 38.4%;
  top: 39.6%;
}

#area_container6 .btn_area_back_top {
	left: 40.4%;
  top: 35%;
}


.arrow{
	position:absolute;
	left:24.5%;
	top:27.3%;
}


.area_name{
	position:absolute;
	left:26.8%;
	top:26.0%;
}

.branch{
	position:absolute;
	left:12.1%;
	top:37%;
}
.title_other{
	position:absolute;
	top:58.1%;
	left:12.1%;
}

.other_box{
	position:absolute;
	border:solid 1px #848484;
	width:50.6%;
	height:26.8%;
	left:12.1%;
	top:61.4%;
}

.other_box_inner{
	position:absolute;
	top:1.4%;
	width:99.6%;
	height:97.2%;
	overflow:auto;
}



/* area2*/
.syc_inner #area_container2 .title{
	position:absolute;
	top:36.1%;
}
#area_container2 .btn_area_top{
	position:absolute;
	top:44.0%;
}
#area_container2 .area_name{
	position:absolute;
	left:26.9%;
	top:43.1%;
}
#area_container2 .arrow{
	position:absolute;
	top:44.5%;
}

#area_container2 .branch{
	position:absolute;
	top:55%;
}

#area_container2 .a1 .pt1{ top:60.0%; }


/* area3*/
.syc_inner #area_container3 .title{
	position:absolute;
	left:12.0%;
	top:19.5%;
}
#area_container3 .btn_area_top{
	position:absolute;
	top:27.4%;
}
#area_container3 .area_name{
	position:absolute;
	left:26.9%;
	top:26.6%;
}
#area_container3 .arrow{
	position:absolute;
	top:27.9%;
}

#area_container3 .branch{
	position:absolute;
	top:38.3%;
}

#area_container3 .a1 .pt1{ top:43.3%; }

#area_container3 .title_other{
	position:absolute;
	top:55.8%;
	left:12.1%;
}

#area_container3 .other_box{
	position:absolute;
	border:solid 1px #848484;
	width:50.6%;
	height:26.8%;
	left:12.1%;
	top:59.1%;
}

/* area4*/
.syc_inner #area_container4 .title{
	position:absolute;
	left:12.0%;
/*	top:24.4%;*/
	top:24.0%;
}
#area_container4 .btn_area_top{
	position:absolute;
	left:12%;
	top:32.3%;
}
#area_container4 .area_name{
	position:absolute;
	left:26.8%;
	top:31.5%;
}
#area_container4 .arrow{
	position:absolute;
	top:32.8%;
}

#area_container4 .branch{
	position:absolute;
	top:42.5%;
}


#area_container4 .a1 .pt1{ top:47.5%; }
#area_container4 .a1 .pt2{ top:52.9%; }

#area_container4 .title_other{
	position:absolute;
	top:63.5%;
	left:12.1%;
}

#area_container4 .other_box{
	position:absolute;
	border:solid 1px #848484;
	width:50.6%;
	height:22.2%;
	left:12.1%;
	top:66.5%;
}

/* area5*/
.syc_inner #area_container5 .title{
	position:absolute;
	left:12.0%;
	top:32.0%;
}
#area_container5 .btn_area_top{
	position:absolute;
	left:12%;
	top:39.9%;
}
#area_container5 .area_name{
	position:absolute;
	left:26.4%;
	top:39.1%;
}
#area_container5 .arrow{
	position:absolute;
	left:24.5%;
	top:40.4%;
}

#area_container5 .title_other{
	position:absolute;
	top:53.9%;
	left:12.1%;
}

#area_container5 .other_box{
	position:absolute;
	border:solid 1px #848484;
	width:50.6%;
	height:17.3%;
	left:12.1%;
	top:57.0%;
}


/* area6*/
.syc_inner #area_container6 .title{
	position:absolute;
	left:12.0%;
	top:27.5%;
}
#area_container6 .btn_area_top{
	position:absolute;
	left:12%;
	top:35.4%;
}
#area_container6 .area_name{
	position:absolute;
	left:26.4%;
	top:34.6%;
}
#area_container6 .arrow{
	position:absolute;
	left:24.5%;
	top:35.9%;
}

#area_container6 .branch{
	position:absolute;
	top:46.3%;
}

#area_container6 .a1 .pt1{ top:51.3%; }

#area_container6 .title_other{
	position:absolute;
	top:63.8%;
	left:12.1%;
}

#area_container6 .other_box{
	position:absolute;
	border:solid 1px #848484;
	width:50.6%;
	height:17.3%;
	left:12.1%;
	top:67.1%;
}


/* area7*/
.syc_inner #area_container7 {
	position: absolute;
	left: 12%;
	top: 88%;
	font-size: 12px;
	width: 580px;
}

.other_box_inner::-webkit-scrollbar
{
	width:8px;
	background:#B4B6B8;
}
.other_box_inner::-webkit-scrollbar:horizontal
{
	height:8px;
}
.other_box_inner::-webkit-scrollbar-button
{
	width:8px;
	height:8px;
	background:#71787F;
}
.other_box_inner::-webkit-scrollbar-piece
{
	background:#B4B6B8;
}
.other_box_inner::-webkit-scrollbar-piece:start
{
	background:#B4B6B8;
}
.other_box_inner::-webkit-scrollbar-thumb
{
	background:#71787F;
}
.other_box_inner::-webkit-scrollbar-corner
{
	background:#71787F;
}

.area .top_title{
	cursor:pointer;
}
/*―――――――――――ヨーロッパ　Other Countries―――――――――――*/
.countries_wrap {
  padding: 25px 0 0 50px;
  font-size: 1.1rem;
  display: block;
}
.countries_list {
  float: left;
  width: 33%;
  padding-bottom: 15px;
}
.countries_link {
  text-decoration: none;
  color: #616161;
}
.countries_link::after{
  content: url('../img/top/icon.png');
  display: inline-block;
  padding-left: 10px;
}
.countries_inner {
  font-size: 1.2rem;
  clear: both;
  padding: 15px 0 0 50px;
}
.countries_inner .countries_link {
  color: #47617a;
}
/*―――――――――――――――――――――――――――――――――――――*/