@charset "UTF-8";

/* ========================================================

  "coolverre.com" Search PC Styles

======================================================== */
.l-header { background: rgba(255,255,255,.9); }

/*
  Main Visual
======================================================== */
.mv .contents-area .inner {
  position: relative;
  height: 100%;
}
.mv h2 {
  position: relative;
  top: calc(320 / 1920 * 100vw);
  font-size: 54px;
  font-size: 5.4rem;
  font-weight: 400;
  letter-spacing: .15em;
  line-height: calc(90 / 54);
}
.mv h2 i {
  width: 219px;
  height: 50px;
  display: block;
  margin: 0 0 0 -20px;
}
.mv h2 i img {
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: top;
}

@media screen and (min-width:781px) and (max-width:1200px) {
  .mv h2 { font-size: calc(54 / 1200 * 100vw); }
  .mv h2 i {
    width: calc(219 / 1200 * 100vw);
    height: calc(50 / 1200 * 100vw);
    margin: 0 0 0 calc(-20 / 1200 * 100vw);
  }
}

/*
  Section01
======================================================== */
.sec01 .contents-area {
  display: grid;
  place-items: center start;
}
.sec01 .contents-area > .inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 0 60px 0 600px;
  display: grid;
  place-items: center start;
  grid-area: 1 / 1;
}
.sec01 .contents-area > .inner h3 {
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 400;
  letter-spacing: .15em;
  white-space: nowrap;
  line-height: calc(48 / 36);
}
.sec01 .contents-area > .inner p {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .15em;
  line-height: calc(48 / 18);
  margin: 1em 0 0;
}

.sec01 .contents-area > figure {
  width: calc(850 / 1920 * 100vw);
  overflow: hidden;
  grid-area: 1 / 1;
}
.sec01 .contents-area > figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (max-width:1500px) {
  .sec01 .contents-area > .inner {
    padding: 0 0 0 calc(660 / 780 * 100vw * .5);
  }
  .sec01 > figure img { aspect-ratio: 2 / 1; }
}

@media screen and (min-width:781px) and (max-width:1200px) {
  .sec01 .contents-area {
    padding: calc(100 / 1200 * 100vw) 0 0;
    display: block;
  }
  .sec01 .contents-area > .inner {
    height: auto;
    padding: 0;
  }
  .sec01 .contents-area > .inner h3 { font-size: calc(36 / 1200 * 100vw); }
  .sec01 .contents-area > .inner p { font-size: calc(18 / 1200 * 100vw); }
  .sec01 .contents-area > figure {
    width: 60vw;
    margin: 0 0 calc(60 / 1200 * 100vw);
  }
  .sec01 > figure img { aspect-ratio: 3 / 2; }
}

/*
  Section02
======================================================== */
.sec02 {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .05em;
  padding: 145px 0 150px;
}
.sec02 p {
  width: fit-content;
  letter-spacing: .15em;
  line-height: calc(48 / 18);
  margin: 0 auto 1.5em;
}
.select-unit {
  background-color: #f6f7fa;
  padding: 80px 0 90px;
}
.select-wrap {
  position: relative;
  width: 540px;
  height: auto;
  margin: auto;
  border: solid 1px var(--blk);
  border-radius: 6px;
  background-color: var(--wht);
  padding: 1em;
}
.select-wrap:first-of-type { margin: 0 auto 30px; }
.select-wrap select {
  width: 100%;
  height: 100%;
  outline: none;
  appearance: base-select;
}
::picker(select) {
  appearance: base-select;
  border: solid 1px var(--blk);
  border-radius: 6px;;
  margin: 8px 0;
  padding: .5em 1em;
  outline: none;
}
.select-wrap select option { padding: .5em 0; }


@media screen and (min-width:781px) and (max-width:1200px) {
  .sec02 {
    font-size: calc(18 / 1200 * 100vw);
    padding: calc(145 / 1200 * 100vw) 0 calc(150 / 1200 * 100vw);
  }
  .sec02 .inner { padding: calc(80 / 1200 * 100vw) 0 calc(90 / 1200 * 100vw); }
}

/* Search Section
-------------------------------------------------------- */
.parts-type {
  display: none;
  width: 720px;
  margin: 60px auto 0;
}

.l-col {
  width: 270px;
  border-right: solid 2px #f6f7fa;
}
.r-col { width: 450px; }

.parts-type th, .parts-type td {
  height: 60px;
  vertical-align: middle;
  text-align: center;
  border-bottom: solid 2px #f6f7fa;
}

.parts-type th { background-color: #e4e4e4; }
.parts-type td { background-color: var(--wht); }