@charset "UTF-8";

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

  "coolverre.com" Mama SP Styles

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

/* Explanation
-------------------------------------------------------- */
/*
.explanation .contents-area { flex-direction: column; }
.explanation:nth-of-type(odd) { padding: 0; }
.explanation:nth-of-type(even) {
  flex-direction: column;
  padding: 0;
}
*/
.explanation dl dt { font-size: calc(36 / 780 * 100vw); }
.explanation dl dt::before {
  width: calc(120 / 780 * 100vw);
  height: calc(102 / 780 * 100vw);
}
.explanation dl dd {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(54 / 26);
}

/*
  Main Visual
======================================================== */
.mv h2 {
  top: calc(420 / 780 * 100vw);
  font-size: calc(54 / 780 * 100vw);
}
.mv h2 i {
  width: calc(206 / 780 * 100vw);
  height: calc(46 / 780 * 100vw);
  margin: 0 0 0 calc(-16 / 780 * 100vw);
}

/*
  Section01
======================================================== */
.sec01 .contents-area {
  /*
  padding: calc(calc(160 / 780 * 100vw)) 0 0;
  display: block;
  */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(50 / 780 * 100vw) 0;
}
.sec01 .contents-area > .inner {
  height: auto;
  padding: 0;
  margin: 0 auto;
}
.sec01 .contents-area > .inner h3 { font-size: calc(36 / 780 * 100vw); }
.sec01 .contents-area > .inner p {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(54 / 26);
}

.sec01 .contents-area > figure {
  width: calc(638 / 780 * 100vw);
  margin: 0;
}

.sec01 > figure img { aspect-ratio: 780 / 984; }

/*
  Section02
======================================================== */
.sec02 .contents-area .inner { width: 100%; }

.worries-unit {
  width: calc(720 / 780 * 100vw);
  border-radius: calc(50 / 780 * 100vw);
  margin: auto;
}
.worries-unit::after { border-radius: calc(50 / 780 * 100vw); }
.worries-unit h3 {
  width: calc(600 / 780 * 100vw);
  margin: calc(-41 / 780 * 100vw) auto 0;
}

.worries-items {
  grid-template-columns: repeat(2, 1fr);
  padding: calc(40 / 780 * 100vw) calc(60 / 780 * 100vw);
  gap: calc(70 / 780 * 100vw) 0;
}
.worries-items figcaption {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(33 / 24);
}
.worries-items figure:first-of-type img { width: calc(96 / 780 * 100vw); }
.worries-items figure:nth-of-type(2) img { width: calc(126 / 780 * 100vw); }
.worries-items figure:nth-of-type(3) img { width: calc(120 / 780 * 100vw); }
.worries-items figure:last-of-type img { width: calc(113 / 780 * 100vw); }

.worries-summary {
  padding: calc(35 / 780 * 100vw) calc(175 / 780 * 100vw) calc(30 / 780 * 100vw) calc(50 / 780 * 100vw);
  border-bottom-left-radius: calc(50 / 780 * 100vw);
  border-bottom-right-radius: calc(50 / 780 * 100vw);
}
.worries-summary p {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(48 / 26);
}
.worries-summary p::before { content: none; }
.worries-summary i {
  width: calc(172 / 780 * 100vw);
  height: calc(231 / 780 * 100vw);
}

.sec02 > figure img { aspect-ratio: initial; }

/*
  Section03
======================================================== */
.sec03 { padding: 0 0 calc(120 / 780 * 100vw); }
.sec03 > figure img {
  height: calc(810 / 780 * 100vw);
  object-position: 40% 0;
}

.sec03 .explanation:nth-of-type(1) { margin: calc(-85 / 780 * 100vw) 0 0; }
.sec03 .explanation:nth-of-type(even) { margin: calc(90 / 780 * 100vw) 0; }

.sec03 .explanation .contents-area {
  height: auto;
  display: flex;
  flex-direction: column;
}
.sec03 .explanation:nth-of-type(odd) .contents-area { align-items: flex-end; }
.sec03 .explanation:nth-of-type(odd) .contents-area > .inner,
.sec03 .explanation:nth-of-type(even) .contents-area > .inner { padding: 0; }

.sec03 .explanation:nth-of-type(odd) dl,
.sec03 .explanation:nth-of-type(even) dl { margin: 0 0 calc(40 / 780 * 100vw); }

.sec03 .explanation dl dt { padding: 0 0 0 calc(130 / 780 * 100vw); }
.sec03 .explanation dl dt::before {
  left: calc(-35 / 780 * 100vw);
  width: calc(150 / 780 * 100vw);
  height: calc(156 / 780 * 100vw);
}
.sec03 .explanation .contents-area > figure  { width: calc(585 / 780 * 100vw); }
.sec03 .explanation:nth-of-type(odd) .contents-area > figure img { border-top-left-radius: calc(100 / 780 * 100vw); }
.sec03 .explanation:nth-of-type(even) .contents-area > figure img { border-top-right-radius: calc(100 / 780 * 100vw); }

.sec03 .default-btn.grad { margin: calc(80 / 780 * 100vw) auto 0; }


/*
  Section04
======================================================== */
.sec04 .inner {
  width: calc(720 / 780 * 100vw);
}
.sec04 > figure img { aspect-ratio: initial; }

/* Features
-------------------------------------------------------- */
.features {
  width: calc(720 / 780 * 100vw);
  padding: calc(70 / 780 * 100vw) calc(30 / 780 * 100vw);
  margin: 0 auto calc(130 / 780 * 100vw);
}
.features > h3 {
  font-size: calc(30 / 780 * 100vw);
  line-height: calc(66 / 30);
}
.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(30 / 780 * 100vw);
}

/*
  Section05
======================================================== */
.sec05 { padding: 0 0 calc(180 / 780 * 100vw); }
.sec05 > figure img {
  height: calc(810 / 780 * 100vw);
  object-position: 36% 0;
}
.sec05 .explanation .contents-area {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.sec05 .explanation .contents-area > .inner { padding: 0; }
.sec05 .explanation figure {
  width: calc(638 / 780 * 100vw);
  margin: calc(50 / 780 * 100vw) 0 0;
}

/*
  Section06 - Voice Originals
======================================================== */
.sec06 .contents-area .inner { width: 100%; }
.sec06 > figure img {
  height: calc(797 / 780 * 100vw);
  aspect-ratio: initial;
}
.voice-unit {
  gap: 0 calc(40 / 780 * 100vw);
  overflow-x: auto;
  padding: 0 0 15px 40px;
}
.voice {
  width: calc(390 / 780 * 100vw);
  height: auto;
  border-radius: calc(50 / 780 * 100vw);
  padding: calc(35 / 780 * 100vw) calc(45 / 780 * 100vw) calc(50 / 780 * 100vw)
}
.voice::after { border-radius: calc(50 / 780 * 100vw); }
.voice > figure img { width: calc(210 / 780 * 100vw); }
.voice > figure figcaption {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(36 / 26);
}

.sec06 .default-btn.grad { margin: calc(70 / 780 * 100vw) auto 0; }

/*
  Section07
======================================================== */
.sec07 { padding: calc(125 / 780 * 100vw) 0; }

.sec07 .explanation .contents-area {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.sec07 .explanation .contents-area > .inner { padding: 0; }
.sec07 .explanation .contents-area > figure {
  width: calc(720 / 780 * 100vw);
  margin: calc(55 / 780 * 100vw) 0 0;
}

.sec07 .default-btn.grad { margin: calc(60 / 780 * 100vw) auto 0; }

/*
  Section08 - Voice Preliminary
======================================================== */
.sec08 { aspect-ratio: 780 / 1040; }
.sec08 .inner {
  transform: translateY(0);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 0 calc(90 / 780 * 100vw);
}
.sec08 .inner figure { width: calc(540 / 780 * 100vw); }
.sec08 h2 {
  font-size: calc(40 / 780 * 100vw);
  margin: 0 0 calc(60 / 780 * 100vw);
}
.sec08 p {
  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; }
.sec08 > figure img {
  height: calc(797 / 780 * 100vw);
  aspect-ratio: initial;
  object-position: 50% 100%;
}