@charset "UTF-8";

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

  "coolverre.com" Index SP Styles

======================================================== */
.lead {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(54 / 26);
  letter-spacing: .05em;
}

/*
  Main Visual
======================================================== */
.mv { padding: 0 0 calc(60 / 780 * 100vw); }
.mv h2 {
  width: calc(454 / 780 * 100vw);
  margin: auto;
  top: calc(180 / 780 * 100vw);
}
.mv i {
  right: calc(-40 / 780 * 100vw);
  bottom: calc(-130 / 780 * 100vw);
  width: calc(377 / 780 * 100vw);
}
.mv > figure img { aspect-ratio: initial; }

/*
  Section01
======================================================== */
.sec01 { padding: 0; }
.sec01 .contents-area .inner {
  padding: calc(170 / 780 * 100vw) 0 0;
  height: auto;
}
.sec01 .contents-area figure {
  position: relative;
  top: calc(105 / 780 * 100vw);
  right: initial;
  width: 100%;
  padding: 0 0 0 calc(50 / 780 * 100vw);
}
.sec01 .contents-area + figure img { aspect-ratio: 780 / 1100; }

/*
  Section02
======================================================== */
.sec02 .contents-area .inner {
  width: 100%;
  padding: calc(250 / 780 * 100vw) 0 0;
}
.rays {
  width: calc(720 / 780 * 100vw);
  grid-template-columns: initial;
  display: grid;
  background-color: var(--wht);
}
.rays:first-of-type {
  margin: 0 auto 20px;
  border-top-left-radius: calc(100 / 780 * 100vw);
}
.rays:last-of-type {
  margin: auto;
  border-top-right-radius: calc(100 / 780 * 100vw);
}

.rays > div {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 50%;
  background: none;
}
.rays:first-of-type > div { border-top-left-radius: 0; }
.rays:last-of-type > div { border-top-right-radius: 0; }

.rays > div p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(48 / 24);
}
.rays:first-of-type > div p { padding: 0 0 0 1em; }
.rays > span { grid-area: 1 / 1; }

.sec02 .contents-area + figure img { aspect-ratio: 780 / 900; }

/*
  Section03
======================================================== */
.sec03 .contents-area {
  display: grid;
  place-content: center;
}
.sec03 .contents-area .inner { padding: 0; }
.sec03 .reason h2 {
  font-size: calc(48 / 780 * 100vw);
  letter-spacing: .05em;
}
.sec03 .reason .lead { margin: calc(80 / 780 * 100vw) 0; }
.sec03 .reason .default-btn.grad { margin: auto; }
.sec03 > figure img {
  aspect-ratio: 780 / 900;
  object-position: 15% 0;
}

/*
  Section04
======================================================== */
.sec04 .inner {
  width: 100%;
  padding: calc(120 / 780 * 100vw) 0 0;
}
.sec04 .about {
  width: calc(660 / 780 * 100vw);
  margin: 0 auto calc(80 / 780 * 100vw);
}
.sec04 .about h2 { font-size: calc(48 / 780 * 100vw); }
.sec04 .about .lead { margin: calc(65 / 780 * 100vw) 0 calc(80 / 780 * 100vw); }
.sec04 .about .default-btn.grad { margin: auto; }

.sec04 .contents-area figure {
  position: relative;
  top: initial;
  right: initial;
  width: 100%;
  padding: 0 0 0 calc(60 / 780 * 100vw);
}

/* Features */
.features {
  width: calc(720 / 780 * 100vw);
  padding: calc(70 / 780 * 100vw) calc(30 / 780 * 100vw);
  margin: calc(100 / 780 * 100vw) auto calc(130 / 780 * 100vw);
}
.features > h3 {
  font-size: calc(28 / 780 * 100vw);
  line-height: calc(48 / 28);
}
.features > span {
  font-size: calc(22 / 780 * 100vw);
  text-align: left;
}
.feature-wrap {
  grid-template-columns: repeat(2, 1fr);
  gap: calc(90 / 780 * 100vw) 0;
  align-items: flex-start;
  margin: calc(65 / 780 * 100vw) 0 calc(70 / 780 * 100vw);
}
.feature li:first-of-type {
  width: calc(233 / 780 * 100vw);
  margin: 0 0 15px;
}
.feature li p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(36 / 24);
}

.correspondence h3 {
  width: calc(720 / 780 * 100vw);
  font-size: calc(28 / 780 * 100vw);
  line-height: calc(48 / 28);
  letter-spacing: .1em;
}
.correspondence i {
  width: calc(615 / 780 * 100vw);
  margin: 0 auto calc(50 / 780 * 100vw);
}
.correspondence p {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(54 / 26);
  padding: 0 calc(60 / 780 * 100vw);
}

.sec04 > figure img { aspect-ratio: 780 / 4268; }

/*
  Section05
======================================================== */
.sec05 .contents-area { padding: calc(100 / 780 * 100vw) 0 0; }
.sec05 .contents-area h2 {
  font-size: calc(36 / 780 * 100vw);
}
.sec05 .contents-area + figure img { aspect-ratio: 780 / 1010; }
.voice-unit + .default-btn.grad { margin: calc(50 / 780 * 100vw) auto 0; }

/* Slick Slider Overwrite
-------------------------------------------------------- */
.slick-prev,
.slick-next {
  top: 45%;
  transform: translateY(-45%);
  width: calc(60 / 780 * 100vw);
  height: calc(60 / 780 * 100vw);
}
.slick-prev { left: calc(30 / 780 * 100vw); }
.slick-next { right: calc(30 / 780 * 100vw); }
.slick-slide figure {
  width: calc(570 / 780 * 100vw);
  transform: scale(calc(480 / 570));
}
.slick-slide.slick-center figure {
  width: calc(570 / 780 * 100vw);
  transform: scale(1.0);
}

/*
  Section06
======================================================== */
.sec06 { padding: calc(115 / 780 * 100vw) 0 calc(175 / 780 * 100vw); }
.sec06 .inner { padding: 0; }
.sec06 h2 {
  font-size: calc(36 / 780 * 100vw);
  margin: 0 0 calc(60 / 780 * 100vw);
}
.inc-information {
  height: calc(300 / 780 * 100vw);
}
.information {
  font-size: calc(26 / 780 * 100vw);
  line-height: 1.5;
  display: block;
}
.information dt {
  margin: 0 0 .5em;
}
.information dd { margin: 0 0 1.5em; }

/*
  Section07
======================================================== */
.sec07 {
  background-image: url(../images/top_sec07_bg_sp.png);
  padding: calc(140 / 780 * 100vw) 0 calc(120 / 780 * 100vw);
}
.sec07 .inner {
  width: 100%;
  padding: 0 calc(30 / 780 * 100vw) ;
}
.sec07 h2 {
  font-size: calc(36 / 780 * 100vw);
  margin: 0 0 calc(35 / 780 * 100vw);
}

/* Q&A
-------------------------------------------------------- */
.qa-unit {
  padding: calc(50 / 780 * 100vw) calc(30 / 780 * 100vw);
}
.qa-unit details summary {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(48 / 26);
  padding: calc(40 / 780 * 100vw) calc(55 / 780 * 100vw) calc(40 / 780 * 100vw) 0;
}
.qa-unit details summary p i {
  width: calc(50 / 780 * 100vw);
  height: calc(20 / 780 * 100vw);
  display: inline-block;
}
.qa-unit details summary p span { padding: 0 0 0 calc(25 / 780 * 100vw); }
.qa-unit details summary::after {
  right: 0;
  width: calc(28 / 780 * 100vw);
  height: calc(28 / 780 * 100vw);
}
.qa-unit details[open]::details-content { padding: 0 0 calc(30 / 780 * 100vw); }
.qa-unit details > p {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(48 / 26);
  padding: 0 calc(40 / 780 * 100vw) 0 calc(75 / 780 * 100vw);
}
.qa-unit + .default-btn.grad { margin: calc(40 / 780 * 100vw) auto 0; }

/*
  Section08 - Voice Non Slider
======================================================== */
.sec08 { aspect-ratio: 780 / 1200; }
.sec08 .inner {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sec08 figure { width: calc(540 / 780 * 100vw); }
.sec08 h2 {
  font-size: calc(36 / 780 * 100vw);
  margin: 0 0 calc(45 / 780 * 100vw);
}
.sec08 .lead {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(54 / 26);
  margin: calc(45 / 780 * 100vw) 0 calc(50 / 780 * 100vw);
}
.sec08 .default-btn.grad { margin: auto; }