/* reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td, header, section, article, footer, article, aside, time, nav, a {
  margin: 0;
  padding: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
}

p {
  text-justify: inter-ideograph;
  margin: 0;
}

header, section, article, footer, article, aside, time, nav {
  display: block;
}

ul {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
}

figure {
  display: block;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* style */
.top_wrap { width:100%; height:100vh; display:flex; align-items:center; justify-content:center; }
.top_wrap .left,
.top_wrap .right { width:50%; height:100vh; position:relative; overflow:hidden; }
.top_wrap .left::after,
.top_wrap .right::after { position:absolute; left:50%; top:50%; transform:translate3d(-50%, -50%, 0); width:100%; height:100%; z-index:0; transition:.3s; }
.top_wrap .left::after { background:url(../images/top_img_studioandcafe.jpg) center right no-repeat; content:""; }
.top_wrap .right::after { background:url(../images/top_img_carstudio.jpg) no-repeat; content:""; }
.top_wrap .left::before,
.top_wrap .right::before { background:rgba(0, 0, 0, .75); content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; transition:.3s; }
.top_wrap .left a,
.top_wrap .right a { display: block; position: absolute; width: 100%; height:100%; z-index:2; }
.top_wrap .left a:hover,
.top_wrap .right a:hover,
.top_wrap .left a:hover img,
.top_wrap .right a:hover img { opacity:1; }
.top_wrap .left a img,
.top_wrap .right a img { position: absolute; top:50%; left:50%; transform:translate3d(-50%, -50%, 0); z-index:3; }
.top_wrap .left a img { width:min(50vw,300px);height: min(24.53vw,146.53px);}
.top_wrap .right a img { width:min(55vw,400px);height: min(14.5vw,105.52px);}
.top_wrap .left:hover::after,
.top_wrap .right:hover::after { transform: translate3d(-50%, -50%, 0) scale(1.07); }
.top_wrap .left:hover::before,
.top_wrap .right:hover::before { background:rgba(0, 0, 0, .5);}
@media screen and (max-width: 768px) {
  .top_wrap { flex-flow: column; }
  .top_wrap .left,
  .top_wrap .right { width:100%; height:50vh; }
  .top_wrap .left::after,
  .top_wrap .right::after { background-size:cover; }
}