@charset "UTF-8";

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

  "coolverre.com" Voice PC Styles

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

section > figure { overflow: hidden; }
section > figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*
  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: 206px;
  height: 46px;
  display: block;
  margin: 0 0 20px -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(206 / 1200 * 100vw);
    height: calc(46 / 1200 * 100vw);
    margin: 0 0 calc(20 / 1200 * 100vw) 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: 150px 60px 0 600px;
  display: grid;
  place-items: start;
  grid-area: 1 / 1;
}
.sec01 .contents-area > .inner h3 {
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 400;
  letter-spacing: .15em;
  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 {
    place-items: center start;
    padding: 0 0 0 calc(660 / 780 * 100vw * .5);
  }
  .sec01 .contents-area > .inner p { margin: 0; }
  .sec01 > figure img { aspect-ratio: 2 / 1; }
}

@media screen and (min-width:781px) and (max-width:1200px) {
  .sec01 .contents-area {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .sec01 .contents-area > .inner {
    height: auto;
    padding: 0;
    display: block;
    margin: 0 auto;
  }
  .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(30 / 1200 * 100vw);
  }
  .sec01 > figure img { aspect-ratio: 16 / 9; }
}

/*
  Section02
======================================================== */
.sec02 { padding: 45px 0 0; }
/*
.sec02::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: block;
  background-color: #f6fbff;
  aspect-ratio: 1920 / 630;
}
.sec02 .contents-area > .inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 70px;
  place-items: center start;
}
.sec02 .contents-area dl { transform: translateY(25px); }
.sec02 .contents-area dl dt {
  position: relative;
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 400;
  letter-spacing: .15em;
  line-height: calc(48 / 36);
  white-space: nowrap;
  padding: 0 0 0 115px;
}
.sec02 .contents-area dl dt::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20px;
  top: 60%;
  transform: translateY(-60%);
  width: 120px;
  height: 125px;
  background: url(../images/voice_sec02_deco001.png) no-repeat 0 0 / cover;
}
.sec02 .contents-area dl dd {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .15em;
  line-height: calc(48 / 18);
  margin: 60px 0 0;
}

.sec02 .contents-area > .inner figure { overflow: hidden; }
.sec02 .contents-area > .inner figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
*/

.voice-unit {
  position: relative;
  display: grid;
  place-items: end center;
  padding: 125px 0;
}
.voice-unit::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: block;
  background-color: #f6fbff;
  aspect-ratio: 1920 / 630;
}
.voice-unit .inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 70px;
  place-items: center start;
}
.voice-unit dl { transform: translateY(25px); }
.voice-unit dl dt {
  position: relative;
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 400;
  letter-spacing: .15em;
  line-height: calc(48 / 36);
  white-space: nowrap;
  padding: 0 0 0 115px;
}
.voice-unit dl dt::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20px;
  top: 60%;
  transform: translateY(-60%);
  width: 120px;
  height: 125px;
  background: no-repeat 0 0 / cover;
}
.voice-unit.voice01 dl dt::before { background-image: url(../images/voice_sec02_deco001.png); }
.voice-unit.voice02 dl dt::before { background-image: url(../images/voice_sec02_deco002.png); }
.voice-unit.voice03 dl dt::before { background-image: url(../images/voice_sec02_deco003.png); }
.voice-unit.voice04 dl dt::before { background-image: url(../images/voice_sec02_deco004.png); }

.voice-unit dl dd {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .15em;
  line-height: calc(48 / 18);
  margin: 60px 0 0;
}

.voice-unit .inner figure { overflow: hidden; }
.voice-unit .inner figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}


@media screen and (min-width:1921px) {
  .sec02 { padding: calc(45 / 1920 * 100vw) 0 0; }
  /*
  .sec02::after { aspect-ratio: 1920 / 473; }
  .sec02 .contents-area dl { transform: translateY(calc(45 / 1920 * 100vw)); }
  */
  .voice-unit { padding: calc(125 / 1920 * 100vw) 0; }
  .voice-unit::after { aspect-ratio: 1920 / 473; }
  .voice-unit dl { transform: translateY(calc(45 / 1920 * 100vw)); }
}

@media screen and (max-width:1500px) {
  .sec02 { padding: calc(45 / 1500 * 100vw) 0 0; }
  /*
  .sec02::after { aspect-ratio: 16 / 7; }
  .sec02 .contents-area > .inner { gap: 0 calc(70 / 1500 * 100vw); }
  .sec02 .contents-area dl { transform: translateY(0); }
  .sec02 .contents-area dl dd { margin: calc(60 / 1500 * 100vw) 0 0; }
  */
  .voice-unit { padding: calc(125 / 1500 * 100vw) 0; }
  .voice-unit::after { aspect-ratio: 16 / 7; }
  .voice-unit .inner { gap: 0 calc(70 / 1500 * 100vw); }
  .voice-unit dl { transform: translateY(0); }
  .voice-unit dl dd { margin: calc(60 / 1500 * 100vw) 0 0; }
}

@media screen and (min-width:781px) and (max-width:1200px) {
  /*
  .sec02 .contents-area dl { transform: translateY(calc(70 / 1200 * 100vw)); }
  .sec02 .contents-area dl dt { font-size: calc(36 / 1200 * 100vw); }
  .sec02 .contents-area dl dd { font-size: calc(18 / 1200 * 100vw); }
  */
  .voice-unit dl { transform: translateY(calc(70 / 1200 * 100vw)); }
  .voice-unit dl dt { font-size: calc(36 / 1200 * 100vw); }
  .voice-unit dl dd { font-size: calc(18 / 1200 * 100vw); }
}