@charset "UTF-8";
.container {
  max-width: 1044px;
  margin: 0 auto;
  padding: 0 20px;
  padding-bottom: 150px;
  margin-top: 120px; }
  @media screen and (max-width: 480px) {
    .container {
      padding-bottom: 90px;
      margin-top: 60px; } }

.carousel {
  display: block;
  text-align: left;
  margin-bottom: 22px; }
  @media screen and (max-width: 1024px) {
    .carousel {
      width: 750px;
      margin: 0 auto; } }
  @media screen and (max-width: 768px) {
    .carousel {
      width: 480px; } }
  @media screen and (max-width: 480px) {
    .carousel {
      width: 300px; } }
  .carousel > input {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute; }
    .carousel > input:nth-of-type(5):checked ~ .carousel__slides .carousel__slide:first-of-type {
      margin-left: -400%; }
    .carousel > input:nth-of-type(4):checked ~ .carousel__slides .carousel__slide:first-of-type {
      margin-left: -300%; }
    .carousel > input:nth-of-type(3):checked ~ .carousel__slides .carousel__slide:first-of-type {
      margin-left: -200%; }
    .carousel > input:nth-of-type(2):checked ~ .carousel__slides .carousel__slide:first-of-type {
      margin-left: -100%; }
    .carousel > input:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:first-of-type {
      margin-left: 0%; }
    .carousel > input:nth-of-type(1):checked ~ .carousel__thumbnails li:nth-of-type(1) {
      box-shadow: 0px 0px 0px 5px rgba(153, 76, 21, 0.7); }
    .carousel > input:nth-of-type(2):checked ~ .carousel__thumbnails li:nth-of-type(2) {
      box-shadow: 0px 0px 0px 5px rgba(153, 76, 21, 0.7); }
    .carousel > input:nth-of-type(3):checked ~ .carousel__thumbnails li:nth-of-type(3) {
      box-shadow: 0px 0px 0px 5px rgba(153, 76, 21, 0.7); }
    .carousel > input:nth-of-type(4):checked ~ .carousel__thumbnails li:nth-of-type(4) {
      box-shadow: 0px 0px 0px 5px rgba(153, 76, 21, 0.7); }
    .carousel > input:nth-of-type(5):checked ~ .carousel__thumbnails li:nth-of-type(5) {
      box-shadow: 0px 0px 0px 5px rgba(153, 76, 21, 0.7); }

.carousel__slides {
  padding: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex; }

.carousel__slide {
  position: relative;
  display: block;
  flex: 1 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 300ms ease-out;
  vertical-align: top;
  box-sizing: border-box;
  white-space: normal;
  padding-left: 8px; }
  .carousel__slide figure {
    display: flex;
    margin: 0;
    padding-left: 120px; }
    @media screen and (max-width: 768px) {
      .carousel__slide figure {
        padding-left: 0px; } }
  .carousel__slide div {
    position: relative;
    width: 350px;
    height: 350px; }
    .carousel__slide div:before {
      display: block;
      content: "";
      padding-top: 66.6666666667%; }
    .carousel__slide div > img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }
    @media screen and (max-width: 1024px) {
      .carousel__slide div {
        height: 311px; } }
    @media screen and (max-width: 768px) {
      .carousel__slide div {
        height: 236px;
        margin-top: 18px; } }
    @media screen and (max-width: 480px) {
      .carousel__slide div {
        height: 150px;
        margin-top: 10px; } }
  .carousel__slide img {
    display: block;
    flex: 1 1 auto;
    object-fit: cover; }
  .carousel__slide figcaption {
    padding: 0px 20px 0 60px;
    flex: 0 0 auto;
    width: 50%;
    min-width: 150px; }
    @media screen and (max-width: 480px) {
      .carousel__slide figcaption {
        padding: 0px 0px 0px 30px; } }
    .carousel__slide figcaption h2 {
      font-family: 'Arial Rounded MT Bold','Arial',sans-serif;
      color: #994c15;
      font-size: 22px;
      margin-top: 12px;
      margin-bottom: 12px; }
      @media screen and (max-width: 480px) {
        .carousel__slide figcaption h2 {
          font-size: 10px;
          margin-top: 6px;
          margin-bottom: 6px; } }
    .carousel__slide figcaption p {
      font-family: 'ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
      font-size: 21px; }
      @media screen and (max-width: 768px) {
        .carousel__slide figcaption p {
          font-size: 16px; } }
      @media screen and (max-width: 480px) {
        .carousel__slide figcaption p {
          font-size: 8px; } }
    .carousel__slide figcaption a {
      text-decoration: none; }
      .carousel__slide figcaption a button {
        padding: 0.6em 0.88em;
        background: linear-gradient(to right, #E0AE17 50%, #fff 50%);
        background-size: 200% 100.5%;
        background-position: right bottom;
        font: 1.25em 'Montserrat';
        color: #994c15;
        border: none;
        border-left: 0.20em solid #E0AE17;
        border-color: none;
        box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.08);
        transition: all .5s ease-out;
        margin-top: 40px; }
        @media screen and (max-width: 1024px) {
          .carousel__slide figcaption a button {
            margin-top: 12px; } }
        @media screen and (max-width: 768px) {
          .carousel__slide figcaption a button {
            font: 12px 'Montserrat';
            margin-top: 8px; } }
        @media screen and (max-width: 480px) {
          .carousel__slide figcaption a button {
            font: 12px 'Montserrat'; } }
        .carousel__slide figcaption a button:hover {
          background-position: left bottom;
          color: white; }
  .carousel__slide.scrollable {
    overflow-y: scroll; }

.carousel__thumbnails {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  margin-top: 30px; }
  @media screen and (max-width: 480px) {
    .carousel__thumbnails {
      margin-top: 15px; } }
  .carousel__slides + .carousel__thumbnails {
    margin-top: 20px; }
  .carousel__thumbnails li {
    flex: 1 1 auto;
    max-width: calc((100% / 5) - 20px);
    margin: 0 10px;
    transition: all 300ms ease-in-out; }
  .carousel__thumbnails label {
    display: block;
    position: relative; }
    .carousel__thumbnails label:before {
      display: block;
      content: "";
      padding-top: 100%; }
    .carousel__thumbnails label > img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%; }
    .carousel__thumbnails label:hover, .carousel__thumbnails label:focus {
      cursor: pointer; }
      .carousel__thumbnails label:hover img, .carousel__thumbnails label:focus img {
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.25);
        transition: all 300ms ease-in-out; }
  .carousel__thumbnails img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; }

/*# sourceMappingURL=zoovision.css.map */