@charset "UTF-8";

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

  "coolverre.com" About SP Styles

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

/* Explanation
-------------------------------------------------------- */
.explanation { flex-direction: column; }
.explanation:nth-of-type(even) { flex-direction: column; }
.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(-20 / 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 / 1164; }

/*
  Section02
======================================================== */
.sec02 { padding: 0 0 calc(120 / 780 * 100vw); }
.sec02 > .inner { width: 100%; }
.sec02 > figure img {
  width: auto;
  height: calc(699 / 780 * 100vw);
  object-position: -45vw 0;
  object-fit: initial;
}

.sec02 .explanation:first-of-type {
  width: calc(660 / 780 * 100vw);
  margin: auto;
}
.sec02 .explanation:first-of-type > dl { width: 100%; }
.sec02 .explanation:first-of-type > figure { width: calc(587 / 660 * 100%); }

.sec02 .explanation:not(:first-of-type) > dl { width: 100%; }
.sec02 .explanation:not(:first-of-type) > figure {
  width: calc(750 / 780 * 100vw);
  margin: auto;
}

.sec02 .explanation:nth-of-type(2) { margin: calc(100 / 780 * 100vw) 0 calc(90 / 780 * 100vw); }

.sec02 .explanation:nth-of-type(2) > dl,
.sec02 .explanation:last-of-type > dl {
  width: calc(660 / 780 * 100vw);
  margin: 0 auto calc(50 / 780 * 100vw);
  padding: 0;
}

/*
  Section03
======================================================== */
.sec03 .contents-area > .inner {
  width: 100%;
  padding: calc(120 / 780 * 100vw) 0 0;
}
.sec03 > figure img { aspect-ratio: 780 / 3000; }

/* Experiment
-------------------------------------------------------- */
.experiment h3 { font-size: calc(36 / 780 * 100vw); }
.experiment p {
  font-size: calc(26 / 780 * 100vw);
  line-height: calc(54 / 26);
  padding: 0 calc(60 / 780 * 100vw);
  margin: 1em 0;
}

.experiment.hs { margin: 0 0 calc(125 / 780 * 100vw); }
.experiment.hs p { text-align: left; }

.rc-box {
  width: calc(750 / 780 * 100%);
  margin: auto;
}

.experiment.hs .rc-box { padding: calc(30 / 780 * 100vw) 0 0; }
.experiment.hs .rc-box img {
  width: 104%;
  margin: 0 0 calc(-20 / 780 * 100vw) -2%;
}

.hs-comparison {
  margin:  calc(40 / 780 * 100vw) auto 0;
  padding: 0 calc(15 / 780 * 100vw);
}
.hs-comparison p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(36 / 24);
  margin: 1em auto 0;
}

.experiment.tg .rc-box { padding: calc(55 / 780 * 100vw) 0 calc(100 / 780 * 100vw); }
.experiment.tg .rc-box ul li img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Slick Slider Overwrite
-------------------------------------------------------- */
.experiment.tg .rc-box ul.slick-slider {
  width: 104%;
  display: block;
  margin: 0 0 0 -2%;
}
.experiment.tg .rc-box ul.slick-slider .slick-slide {
  width: calc(360 / 780 * 100vw);
  margin: 0 calc(25 / 780 * 100vw);
}

.slick-dots {
  position: absolute;
  bottom: calc(-50 / 780 * 100vw);
  display: block !important;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  width: calc(22 / 780 * 100vw);
  height: calc(22 / 780 * 100vw);
}
.slick-dots li button { padding: 0; }
.slick-dots li button::before {
  font-size: calc(24 / 780 * 100vw);
  width: calc(22 / 780 * 100vw);
  height: calc(22 / 780 * 100vw);
  line-height: calc(22 / 780 * 100vw);
  color: #dedede;
  opacity: 1;
}
.slick-dots li.slick-active button::before {
  color: #0044a3;
  opacity: 1;
}

/*
  Section04
======================================================== */
.sec04 { padding: calc(110 / 780 * 100vw) 0 calc(120 / 780 * 100vw); }
.sec04 .inner { width: 100%; }

.sec04 .explanation:first-of-type { margin: 0 0 calc(140 / 780 * 100vw); }
.sec04 .explanation:first-of-type > dl {
  width: calc(660 / 780 * 100vw);
  margin: auto;
}
.sec04 .explanation:first-of-type > figure {
  width: calc(750 / 780 * 100vw);
  margin: calc(50 / 780 * 100vw) auto 0;
}

.sec04 .explanation:last-of-type { margin: 0 0 calc(80 / 780 * 100vw); }
.sec04 .explanation:last-of-type > dl {
  width: calc(660 / 780 * 100vw);
  margin: auto;
}
.sec04 .explanation:last-of-type > div {
  width: calc(750 / 780 * 100vw);
  margin: calc(50 / 780 * 100vw) auto 0;
}
.sec04 .explanation:last-of-type > div figure { padding: calc(30 / 780 * 100vw) 0; }
.sec04 .explanation:last-of-type > div figure img { width: calc(500 / 780 * 100vw); }
.sec04 .explanation:last-of-type > div figure + span {
  width: fit-content;
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(30 / 24);
  margin: .5em auto 0;
}

/*
  Section05
======================================================== */
.sec05 { padding: 0 0 calc(120 / 780 * 100vw); }
.sec05 .inner { width: 100%; }

.sec05 > figure img {
  width: auto;
  height: calc(499 / 780 * 100vw);
  object-fit: initial;
  object-position: -45vw 0;
}
.sec05 .explanation:first-of-type { margin: calc(130 / 780 * 100vw) 0 0; }
.sec05 .explanation:last-of-type { margin: calc(120 / 780 * 100vw) 0 0; }
.sec05 .explanation > dl {
  width: calc(660 / 780 * 100vw);
  margin: auto;
}
.sec05 .explanation:first-of-type > dl { padding: 0; }
.sec05 .explanation:last-of-type > dl { padding: 0; }

.sec05 .explanation > figure {
  width: calc(750 / 780 * 100vw);
  margin: calc(50 / 780 * 100vw) auto 0;
}