@charset "UTF-8";

.inner {
  max-width: 400px;
}

.sec-area {
  overflow: hidden;
}


section {
  position: relative;
}

section::before,
section::after {
  content: "";
  display: inline-block;
  position: absolute;
}

.sec02::before {
  top: clamp(-20px, -5.3vw, -24px);
  left: 0;
  width: clamp(187px, 49.9vw, 224px);
  height: clamp(91px, 24.3vw, 109px);
  background: url(../img/cmn__bg-beta-l.webp) no-repeat center center/contain;
}

.sec04::before {
  top: -1px;
  left: 0;
  width: clamp(240px, 64vw, 288px);
  height: clamp(41px, 10.9vw, 49px);
  background: url(../img/sec04__bg.webp) no-repeat center center/contain;
}

.sec03::before,
.sec05::before {
  top: clamp(-30px, -8vw, -36px);
  right: 0;
  width: clamp(202px, 53.9vw, 242px);
  height: clamp(97px, 25.9vw, 116px);
  background: url(../img/cmn__bg-beta-r.webp) no-repeat center center/contain;
}



button.btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}


#downloadButton[style*="pointer-events: none"] {
  cursor: default;
}

#downloadButton {
  transition: opacity 0.3s;
  cursor: pointer;
}



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


パーツ


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


.c-fff,
.c-fff * {
  color: #fff !important;
}



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


kv


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

.kv-area {
  max-width: 450px;
  margin: 0 auto;
  width: 100%;
  padding: 60px 0 0;
}


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


sec01


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

.sec01 .inner {
  padding: 20px 0 40px;
}

.sec01-ctr {
  background: #EBE6E9;
  background: linear-gradient(90deg, rgba(235, 230, 233, 1) 0%, rgba(242, 228, 225, 1) 100%);
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  outline: 1px solid #832211;
  outline-offset: -6px;
  width: 100%;
  padding: 20px 0 30px;
  text-align: center;
}

.sec01-ctr h2,
.sec01-ctr h2 span {
  font-family: "Shippori Mincho B1", serif !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
}

.sec01-ctr h2 span {
  display: inline;
  padding: 0 5px;
  background: linear-gradient(transparent 0%, #fff 0%);
}

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


sec02


=================================*/
.sec02 {
  background: #E2938B;
  background: linear-gradient(180deg, rgba(226, 147, 139, 1) 0%, rgba(149, 28, 34, 1) 100%);
}

.sec02 .inner {
  padding: 70px 0 40px;
}

.sec02-3-voice {
  text-align: center;
}

.sec02-3-voice h3 {
  max-width: 300px;
  margin: 0 auto 30px;
  z-index: 1;
  position: relative;
}

.sec02-3-voice__vis {
  margin: 0 auto 45px;
  position: relative;
}

.sec02-3-voice__vis::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -14%;
  right: -6%;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  z-index: -2;
  opacity: 0.5;
}

.sec02-3-voice__mic {
  max-width: 91px;
  margin: 0 auto 15px;
}

.sec02-3-voice__mic-txt {
  display: inline-block;

  position: relative;
  margin: 0 auto 15px;
}


.sec02-3-voice__mic-txt::before,
.sec02-3-voice__mic-txt::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px;
  left: -25px;
  width: 1px;
  height: 50px;
  background-color: #fff;
  transform: rotate(-30deg);
}

.sec02-3-voice__mic-txt p {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sec02-3-voice__mic-txt span {
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 0 5px;
  display: inline;
  width: fit-content;
  background: linear-gradient(transparent 50%, #832211 50%);
}

.sec02-3-voice__mic-txt::after {
  left: inherit;
  right: -25px;
  transform: rotate(30deg);
}

.sec02-3-voice .btn {
  margin-bottom: 20px;
  width: 90%;
}

.sec02-3-voice .btn,
.sec02-3-voice .btn .arrow span,
.sec02-3-voice .btn .arrow span::after {
  border-color: #fff;
}

.sec02-3-voice__kome {
  text-align: left;
  font-size: 12px;
  padding-left: 1em;
  text-indent: -1em;
  width: 90%;
  margin: 0 auto;
}


.sec02 .btn {
  background: #FFFFFF;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(230, 118, 124, 0.4) 100%);
}


.voice-block .btn::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: 38px;
  height: 30px;
  background: url(../img/cmn__icon-play.webp) no-repeat center center/contain;
}


.voice-block a.btn::before {
  background: url(../img/cmn__icon-dl.webp) no-repeat center center/contain;
}

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


sec03


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

.sec03 {
  background-color: #F4F2F4;
}

.sec03 .inner {
  padding: 80px 0 45px;
}


.sec03 .sec02-3-voice__mic-txt::before,
.sec03 .sec02-3-voice__mic-txt::after {
  background-color: #842211;
}


.sec03 .sec02-3-voice__mic-txt span {
  background: linear-gradient(transparent 50%, #F5D5CE 50%);
}


.sec03 .sec02-3-voice__vis::before {
  right: inherit;
  left: -6%;
  background: #EABCB4;
  background: linear-gradient(270deg, rgba(234, 188, 180, 0) 0%, rgba(234, 188, 180, 1) 100%);
}


.sec03 .btn {
  background: #F0BFB6;
  background: linear-gradient(90deg, rgba(240, 191, 182, 1) 0%, rgba(221, 99, 76, 1) 100%);
}


.sec03 .sec02-3-voice__mic img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(32%) saturate(2219%) hue-rotate(339deg) brightness(94%) contrast(104%);
}


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


sec04


=================================*/
.sec04 {
  background: #E2938B;
  background: linear-gradient(180deg, rgba(226, 147, 139, 1) 0%, rgba(149, 28, 34, 1) 100%);
}

.sec04 .inner {
  padding: 60px 0 50px;
}

.sec04-ctr p {
  position: relative;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sec04-ctr p span {
  display: inline-block;
  font-size: 14px;
  white-space: nowrap;
}

.sec04-ctr p::before,
.sec04-ctr p::after {
  content: "";
  display: inline-block;
  width: 50%;
  height: 1px;
  background-color: #fff;
}

.sec04-ctr ul li {
  font-size: 12px;
  margin-top: 7px;
  padding-left: 1em;
  text-indent: -1em;
}

.sec04-ctr ul li:nth-of-type(1) {
  margin-top: 0;
  font-weight: bold;
}

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


sec05


=================================*/
.sec05 {
  background-color: #EBE6E9;
}

.sec05 .inner {
  padding: 90px 0 0;
}

.sec05-ttl {
  max-width: 340px;
  margin: 0 auto 20px;
}

.sec05 .btn {
  width: 90%;
  margin-bottom: 35px;
  background: #FDE9E0;
  background: linear-gradient(90deg, rgba(253, 233, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
  text-align: center;
}

.sec05-bg {
  margin: 0 auto;
  max-width: 450px;
  width: 100%;
  padding: 0;
}

.sec05-bg img {
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}


.sec05-bg-txt {
  width: 100%;
  background-color: #EFC4C1;
}

.sec05-bg-txt p {
  text-align: left;
  font-size: 12px;
  color: #5C5C5C;
  max-width: 400px;
  width: 90%;
  margin: 0 auto;
  padding: 12px 0 12px 1em;
  text-indent: -1em;
}

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


sec0


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




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


sec0


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