@keyframes mask-animation {
  0% {
      mask-position: 0 580%;
      opacity: 0
  }

  20% {
      opacity: 1
  }

  100% {
      mask-position: 0 500%;
      opacity: 1
  }
}

@media screen and (min-width: 768px) {
  .arcTtl {
      width: fit-content;
      margin: 0 auto
  }
}

@media screen and (max-width: 768px) {
  .arcTtl {
      margin: 0 -10px
  }
}

.articleTrigger {
  position: relative;
  z-index: 1;
  display: block;
  width: 206px;
  padding: 0;
  padding: 0 8px 8px;
  margin: 0 auto;
  color: #111;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  appearance: none
}

.articleTrigger::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  content: '';
  background-color: #ccc
}

.articleTrigger__inner {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.articleTrigger__txt {
  height: 1em;
  overflow: hidden;
  font-family: "Cormorant Infant", serif;
  font-size: 20px;
  line-height: 1;
  text-align: left;
  letter-spacing: .05em
}

.articleTrigger__txt .t {
  display: block;
  transition: transform .3s ease-in-out;
  transform: translateY(0)
}

.articleTrigger__state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  aspect-ratio: 1 / 1;
  border: 1px solid #999;
  border-radius: 50%
}

.articleTrigger__icon {
  position: relative;
  z-index: 1
}

.articleTrigger__icon::before,
.articleTrigger__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: '';
  background-color: #333;
  transform: translate(-50%, -50%);
  transform: center
}

.articleTrigger__icon::before {
  width: 9px;
  height: 2px
}

.articleTrigger__icon::after {
  width: 2px;
  height: 9px;
  transition: transform .3s ease-in-out;
  transform: translate(-50%, -50%) scaleY(1)
}

.articleTrigger.is-active .articleTrigger__icon::after {
  transform: translate(-50%, -50%) scaleY(0)
}

.articleTrigger.is-active .articleTrigger__txt .t {
  transform: translateY(-100%)
}

.faqBlock {
  color: #3e3a39
}

.faqBlock:not(:first-child) {
  margin-top: 56px
}

.faqBlock__ttl {
  font-size: 16px;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .faqBlock__ttl {
      font-weight: 600;
      line-height: 1.4
  }

  .faqBlock__ttl::before {
      margin-top: calc((1 - 1.4) * .5em);
      content: ''
  }

  .faqBlock__ttl::after {
      margin-bottom: calc((1 - 1.4) * .5em)
  }

  .faqBlock__ttl::before,
  .faqBlock__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .faqBlock__ttl {
      font-weight: 500;
      line-height: 1.6
  }

  .faqBlock__ttl::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .faqBlock__ttl::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .faqBlock__ttl::before,
  .faqBlock__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

.faqBlock__txt {
  line-height: 1.8;
  letter-spacing: 0
}

.faqBlock__txt::before {
  margin-top: calc((1 - 1.8) * .5em);
  content: ''
}

.faqBlock__txt::after {
  margin-bottom: calc((1 - 1.8) * .5em)
}

.faqBlock__txt::before,
.faqBlock__txt::after {
  display: block;
  width: 0;
  height: 0;
  content: ''
}

@media screen and (min-width: 768px) {
  .faqBlock__txt {
      font-size: 14px
  }
}

@media screen and (max-width: 768px) {
  .faqBlock__txt {
      font-size: 13px
  }
}

.faqBlock__txt+.faqBlock__txt {
  margin-top: 1.4em
}

.faqBlock__txt .person {
  display: inline-block;
  margin-right: 1em
}

.faqBlock__txt .orange {
  color: #cf8274
}

.faqBlock__txt .blue {
  color: #0c92ca
}

@media screen and (min-width: 768px) {
  .faqBlock__ttl+.faqBlock__txt {
      margin-top: 32px
  }
}

@media screen and (max-width: 768px) {
  .faqBlock__ttl+.faqBlock__txt {
      margin-top: 24px
  }
}

.faqBlock__head+.faqBlock__cont {
  margin-top: 32px
}

.headingSet {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
}

.headingSet__ttl {
  font-weight: 600;
  text-align: center;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .headingSet__ttl {
      font-size: 28px;
      line-height: 1.4
  }

  .headingSet__ttl::before {
      margin-top: calc((1 - 1.4) * .5em);
      content: ''
  }

  .headingSet__ttl::after {
      margin-bottom: calc((1 - 1.4) * .5em)
  }

  .headingSet__ttl::before,
  .headingSet__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .headingSet__ttl {
      font-size: 22px;
      line-height: 1.6
  }

  .headingSet__ttl::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .headingSet__ttl::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .headingSet__ttl::before,
  .headingSet__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

.headingSet__ttl .line {
  display: inline-block;
  background: linear-gradient(to bottom, transparent 0%, transparent 70%, rgb(239 191 102 / 70%) 70%, rgb(239 191 102 / 70%) 100%)
}

.headingSet__txt {
  font-weight: 500;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .headingSet__txt {
      font-size: 14px;
      line-height: 2;
      text-align: center
  }

  .headingSet__txt::before {
      margin-top: calc((1 - 2) * .5em);
      content: ''
  }

  .headingSet__txt::after {
      margin-bottom: calc((1 - 2) * .5em)
  }

  .headingSet__txt::before,
  .headingSet__txt::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .headingSet__txt {
      font-size: 13px;
      line-height: 1.8
  }

  .headingSet__txt::before {
      margin-top: calc((1 - 1.8) * .5em);
      content: ''
  }

  .headingSet__txt::after {
      margin-bottom: calc((1 - 1.8) * .5em)
  }

  .headingSet__txt::before,
  .headingSet__txt::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (min-width: 768px) {
  .headingSet__ttl+.headingSet__txt {
      margin-top: 32px
  }
}

@media screen and (max-width: 768px) {
  .headingSet__ttl+.headingSet__txt {
      margin-top: 24px
  }
}

.arcTtl+.headingSet {
  margin-top: 40px
}

.interviewArticle {
  position: relative;
  z-index: 1
}

@media screen and (max-width: 768px) {
  .interviewArticle {
      margin-right: -10px;
      margin-left: -10px
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle:not(:first-child) {
      margin-top: 56px
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle:not(:first-child) {
      margin-top: 40px
  }
}

.interviewArticle__ttl {
  z-index: 0;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
  background-color: #3e3a39
}

@media screen and (min-width: 768px) {
  .interviewArticle__ttl {
      padding: 20px 52px 60px;
      margin-left: -24px;
      line-height: 1.4
  }

  .interviewArticle__ttl::before {
      margin-top: calc((1 - 1.4) * .5em);
      content: ''
  }

  .interviewArticle__ttl::after {
      margin-bottom: calc((1 - 1.4) * .5em)
  }

  .interviewArticle__ttl::before,
  .interviewArticle__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__ttl {
      padding: 16px 16px 42px;
      margin-left: -8px;
      line-height: 1.6
  }

  .interviewArticle__ttl::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .interviewArticle__ttl::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .interviewArticle__ttl::before,
  .interviewArticle__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

.interviewArticle__frame {
  position: relative;
  z-index: 1;
  background-color: #fff
}

@media screen and (min-width: 768px) {
  .interviewArticle__frame {
      padding: 80px 80px 64px
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__frame {
      padding: 40px 20px 52px
  }
}

.interviewArticle__frame::before,
.interviewArticle__frame::after {
  position: absolute;
  left: 0;
  width: 100%;
  content: '';
  background-size: auto auto
}

@media screen and (min-width: 768px) {
  .interviewArticle__frame::before,
  .interviewArticle__frame::after {
      height: 14px;
      background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, #d9d8d0 12px, #d9d8d0 30px)
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__frame::before,
  .interviewArticle__frame::after {
      height: 11px;
      background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #d9d8d0 10px, #d9d8d0 22px)
  }
}

.interviewArticle__frame::before {
  top: 0
}

.interviewArticle__frame::after {
  bottom: 0
}

@media screen and (min-width: 768px) {
  .interviewArticle__ttl+.interviewArticle__frame {
      margin-top: -42px
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__ttl+.interviewArticle__frame {
      margin-top: -26px
  }
}

.interviewArticle__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 600;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .interviewArticle__heading {
      margin-left: -80px;
      font-size: 24px
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__heading {
      margin-left: -20px;
      font-size: 20px
  }
}

.interviewArticle__heading .t {
  display: inline-block;
  background-color: #d9d8d0
}

@media screen and (min-width: 768px) {
  .interviewArticle__heading .t {
      padding: 16px 32px 16px 60px;
      line-height: 1
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__heading .t {
      padding: calc(10px - .3em) 15px;
      line-height: 1.6
  }
}

.interviewArticle__heading .t:not(:first-child) {
  margin-top: 8px
}

.interviewArticle__heading .small {
  line-height: 1.8
}

@media screen and (min-width: 768px) {
  .interviewArticle__heading .small {
      font-size: 13px
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__heading .small {
      font-size: 12px
  }
}

.interviewArticle__head {
  position: relative;
  z-index: 1
}

@media screen and (max-width: 768px) {
  .interviewArticle__head {
      display: flex;
      flex-direction: column-reverse;
      gap: 32px;
      margin-top: 32px
  }
}

.interviewArticle__txt {
  font-weight: 500;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .interviewArticle__txt {
      font-size: 14px;
      line-height: 1.8
  }

  .interviewArticle__txt::before {
      margin-top: calc((1 - 1.8) * .5em);
      content: ''
  }

  .interviewArticle__txt::after {
      margin-bottom: calc((1 - 1.8) * .5em)
  }

  .interviewArticle__txt::before,
  .interviewArticle__txt::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__txt {
      font-size: 14px;
      line-height: 2
  }

  .interviewArticle__txt::before {
      margin-top: calc((1 - 2) * .5em);
      content: ''
  }

  .interviewArticle__txt::after {
      margin-bottom: calc((1 - 2) * .5em)
  }

  .interviewArticle__txt::before,
  .interviewArticle__txt::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle__trigger {
      margin-top: 56px
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__trigger {
      margin-top: 64px
  }
}

.interviewArticle__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .6s linear
}

@media screen and (min-width: 768px) {
  .interviewArticle__body {
      display: flex;
      flex-wrap: wrap;
      gap: 56px
  }
}

.interviewArticle__body.is-active {
  max-height: 4000px;
  transition: max-height 1.2s linear
}

@media screen and (min-width: 768px) {
  .interviewArticle__block {
      width: calc(50% - 28px);
      padding-top: 64px
  }
}

@media screen and (max-width: 768px) {
  .interviewArticle__block {
      padding-top: 56px
  }
}

.interviewArticle__cap {
  width: 100%;
  text-align: right
}

@media screen and (max-width: 768px) {
  .interviewArticle__cap {
      margin-top: 32px
  }
}

.interviewArticle--01 .interviewArticle__heading {
  position: relative;
  z-index: 3
}

@media screen and (min-width: 768px) {
  .interviewArticle--01 .interviewArticle__head {
      z-index: 0;
      display: flex;
      justify-content: space-between
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle--01 .interviewArticle__visual {
      width: 600px;
      margin-top: -247px
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle--01 .interviewArticle__txt {
      padding-top: 32px
  }
}

.interviewArticle--02 .interviewArticle__heading {
  position: relative;
  z-index: 3
}

@media screen and (min-width: 768px) {
  .interviewArticle--02 .interviewArticle__head {
      z-index: 0;
      display: flex;
      justify-content: space-between
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle--02 .interviewArticle__visual {
      width: 600px;
      margin-top: -206px
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle--02 .interviewArticle__txt {
      padding-top: 32px
  }
}

.interviewArticle--03 .interviewArticle__heading {
  position: relative;
  z-index: 3
}

@media screen and (min-width: 768px) {
  .interviewArticle--03 .interviewArticle__head {
      z-index: 0;
      display: flex;
      justify-content: space-between
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle--03 .interviewArticle__visual {
      width: 600px;
      margin-top: -247px
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle--03 .interviewArticle__txt {
      padding-top: 32px
  }
}

.interviewArticle--04 .interviewArticle__heading {
  position: relative;
  z-index: 3
}

@media screen and (min-width: 768px) {
  .interviewArticle--04 .interviewArticle__head {
      z-index: 0;
      display: flex;
      justify-content: space-between
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle--04 .interviewArticle__visual {
      width: 600px;
      margin-top: -271px
  }
}

@media screen and (min-width: 768px) {
  .interviewArticle--04 .interviewArticle__txt {
      padding-top: 32px
  }
}

.interviewBlock {
  color: #3e3a39
}

.interviewBlock+.interviewBlock {
  margin-top: 56px
}

.interviewBlock__ttl {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .interviewBlock__ttl {
      line-height: 1.2
  }

  .interviewBlock__ttl::before {
      margin-top: calc((1 - 1.2) * .5em);
      content: ''
  }

  .interviewBlock__ttl::after {
      margin-bottom: calc((1 - 1.2) * .5em)
  }

  .interviewBlock__ttl::before,
  .interviewBlock__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .interviewBlock__ttl {
      line-height: 1.6
  }

  .interviewBlock__ttl::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .interviewBlock__ttl::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .interviewBlock__ttl::before,
  .interviewBlock__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (min-width: 768px) {
  .interviewBlock__ttl+.interviewBlock__cont {
      margin-top: 32px
  }
}

@media screen and (max-width: 768px) {
  .interviewBlock__ttl+.interviewBlock__cont {
      margin-top: 24px
  }
}

.interviewBlock__txt {
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0
}

.interviewBlock__txt::before {
  margin-top: calc((1 - 1.8) * .5em);
  content: ''
}

.interviewBlock__txt::after {
  margin-bottom: calc((1 - 1.8) * .5em)
}

.interviewBlock__txt::before,
.interviewBlock__txt::after {
  display: block;
  width: 0;
  height: 0;
  content: ''
}

@media screen and (min-width: 768px) {
  .interviewBlock__txt {
      font-size: 14px
  }
}

@media screen and (max-width: 768px) {
  .interviewBlock__txt {
      font-size: 13px
  }
}

@media screen and (min-width: 768px) {
  .interviewBlock__visual {
      margin-top: 32px
  }
}

@media screen and (max-width: 768px) {
  .interviewBlock__visual {
      margin-top: 24px
  }
}

.interviewBlock__visual--col {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end
}

@media screen and (min-width: 768px) {
  .interviewBlock__visual--col {
      gap: 32px
  }
}

@media screen and (max-width: 768px) {
  .interviewBlock__visual--col {
      gap: 16px
  }
}

@media screen and (min-width: 768px) {
  .interviewBlock__visual--col .photo {
      width: calc(50% - 16px)
  }
}

@media screen and (max-width: 768px) {
  .interviewBlock__visual--col .photo {
      width: calc(50% - 8px)
  }
}

.interviewBlock--03 .interviewBlock__visual {
  gap: 0
}

@media screen and (min-width: 768px) {
  .interviewBlock--03 .interviewBlock__visual .photo:nth-child(1) {
      width: 224px
  }
}

@media screen and (max-width: 768px) {
  .interviewBlock--03 .interviewBlock__visual .photo:nth-child(1) {
      width: 135px
  }
}

.interviewBlock--03 .interviewBlock__visual .photo:nth-child(1) .capOut {
  right: auto;
  left: 0
}

@media screen and (min-width: 768px) {
  .interviewBlock--03 .interviewBlock__visual .photo:nth-child(2) {
      width: 268px
  }
}

@media screen and (max-width: 768px) {
  .interviewBlock--03 .interviewBlock__visual .photo:nth-child(2) {
      flex: 1
  }
}

.interviewSect {
  margin: 0 auto;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
}

@media screen and (min-width: 768px) {
  .interviewSect {
      max-width: 1200px
  }
}

@media screen and (max-width: 768px) {
  .interviewSect {
      padding: 0 30px
  }
}

.interviewSect__head+.interviewSect__cont {
  margin-top: 40px
}

.otonariAnchorBlock {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
}

@media screen and (min-width: 768px) {
  .otonariAnchorBlock {
      max-width: 1200px;
      margin: 120px auto 0
  }
}

@media screen and (max-width: 768px) {
  .otonariAnchorBlock {
      padding: 0 30px;
      margin-top: 94px
  }
}

@media print,
screen and (min-width: 768px) and (max-width: 1200px) {
  .otonariAnchorBlock .anchorList {
      flex-wrap: wrap
  }
}

@media screen and (max-width: 768px) {
  .otonariAnchorBlock .anchorList {
      padding-left: 0
  }
}

@media screen and (min-width: 768px) {
  .otonariAnchorBlock .anchorList__link {
      width: 360px;
      padding: 24px 0 16px 30px
  }
}

.otonariIntro__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto
}

@media screen and (min-width: 768px) {
  .otonariIntro__inner {
      max-width: 1200px
  }
}

.otonariIntro__inner .caption {
  text-align: right
}

@media screen and (min-width: 768px) {
  .otonariIntro__inner .caption {
      margin-top: 8px
  }
}

@media screen and (max-width: 768px) {
  .otonariIntro__inner .caption {
      padding: 0 15px;
      margin-top: 16px
  }
}

@media screen and (min-width: 768px) {
  .otonariIntro__block {
      display: contents
  }
}

@media screen and (max-width: 768px) {
  .otonariIntro__block {
      display: flex;
      gap: 40px;
      align-items: flex-end;
      justify-content: space-between;
      padding: 0 15px
  }
}

@media screen and (max-width: 768px) {
  .otonariIntro__block--center {
      justify-content: center
  }
}

@media screen and (max-width: 768px) {
  .otonariIntro__block--start {
      align-items: flex-start
  }
}

@media screen and (max-width: 768px) {
  .otonariIntro__txt+.otonariIntro__block {
      margin-top: 40px
  }
}

.otonariIntro__illust {
  mask-image: linear-gradient(172deg, rgb(0 0 0 / 0%) 15%, #000 20%, #000 66%, rgb(0 0 0 / 0%) 75%);
  mask-position: 0 580%;
  mask-size: 100% 300%;
  opacity: 0
}


.otonariIntro__txt {
  letter-spacing: 0;
  filter: blur(1em) brightness(1.3);
  opacity: 0;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-duration: 1.2s;
  transition-property: filter, opacity;
  will-change: filter, opacity
}

.otonariIntro__txt.sai-animate {
  filter: blur(0) brightness(1);
  opacity: 1
}





.otonariIntro.sai-animate .otonariIntro__illust {
  animation-name: mask-animation;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 0.4, 0.48, 1);
  animation-fill-mode: forwards
}

.otonariVisual {
  width: 100%;
  background-color: #d9d8d0
}

@media screen and (min-width: 768px) {
  .otonariVisual {
      height: calc(503px + (52 / 1440 * 100vw))
  }
}

.otonariVisual__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  margin: 0 auto
}

@media screen and (min-width: 768px) {
  .otonariVisual__inner {
      width: 100%;
      max-width: 1200px
  }
}

.otonariVisual__logo {
  position: absolute;
  left: 50%
}

@media screen and (min-width: 768px) {
  .otonariVisual__logo {
      top: 50%;
      width: 405px;
      transform: translate(-50%, -50%)
  }
}

@media screen and (max-width: 768px) {
  .otonariVisual__logo {
      top: 185px;
      width: 256px;
      transform: translate(-50%, 0)
  }
}

.otonariVisual__illust {
  position: absolute;
  z-index: 2;
  mask-image: linear-gradient(172deg, rgb(0 0 0 / 0%) 15%, #000 20%, #000 66%, rgb(0 0 0 / 0%) 75%);
  mask-position: 0 580%;
  mask-size: 100% 300%;
  opacity: 0
}

.otonariVisual__illust--01 {
  animation-delay: 0s
}


.otonariVisual__illust--02 {
  animation-delay: .2s
}


.otonariVisual__illust--03 {
  animation-delay: .4s
}



.otonariVisual__illust--04 {
  animation-delay: .6s
}


.otonariVisual__illust--05 {
  animation-delay: .8s
}

.otonariVisual__illust--06 {
  animation-delay: 1s
}


.otonariVisual__illust--07 {
  animation-delay: 1.2s
}

.otonariVisual.sai-animate .otonariVisual__illust {
  animation-name: mask-animation;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 0.4, 0.48, 1);
  animation-fill-mode: forwards
}



.pointCard__head {
  color: #fff;
  background-color: rgb(237 109 15 / 77%)
}

@media screen and (min-width: 768px) {
  .pointCard__head {
      height: 311px;
      padding: 34px 34px 34px 76px;
      margin-right: 24px;
      border-radius: 24px
  }
}

@media screen and (max-width: 768px) {
  .pointCard__head {
      height: 254px;
      padding: 24px 24px 24px 60px;
      margin-right: 16px;
      border-radius: 20px
  }
}

.pointCard__circle {
  opacity: 0;
  mask-image: linear-gradient(172deg, rgb(0 0 0 / 0%) 15%, #000 20%, #000 66%, rgb(0 0 0 / 0%) 75%);
  mask-position: 0 580%;
  mask-size: 100% 300%
}



.pointCard__ttl {
  font-weight: 600;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .pointCard__ttl {
      font-size: 28px;
      line-height: 1.4
  }

  .pointCard__ttl::before {
      margin-top: calc((1 - 1.4) * .5em);
      content: ''
  }

  .pointCard__ttl::after {
      margin-bottom: calc((1 - 1.4) * .5em)
  }

  .pointCard__ttl::before,
  .pointCard__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .pointCard__ttl {
      font-size: 22px;
      line-height: 1.6
  }

  .pointCard__ttl::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .pointCard__ttl::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .pointCard__ttl::before,
  .pointCard__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

.pointCard__lead {
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0
}

.pointCard__lead::before {
  margin-top: calc((1 - 1.8) * .5em);
  content: ''
}

.pointCard__lead::after {
  margin-bottom: calc((1 - 1.8) * .5em)
}

.pointCard__lead::before,
.pointCard__lead::after {
  display: block;
  width: 0;
  height: 0;
  content: ''
}

@media screen and (min-width: 768px) {
  .pointCard__lead {
      font-size: 14px
  }
}

@media screen and (max-width: 768px) {
  .pointCard__lead {
      font-size: 13px
  }
}

@media screen and (min-width: 768px) {
  .pointCard__ttl+.pointCard__lead {
      margin-top: 20px
  }
}

@media screen and (max-width: 768px) {
  .pointCard__ttl+.pointCard__lead {
      margin-top: 16px
  }
}

.pointCard__cont {
  color: #3e3a39;
  background-color: rgb(255 255 255 / 90%);
  border: 3px solid rgb(237 109 15 / 77%);
  opacity: 0;
  mask-image: linear-gradient(172deg, rgb(0 0 0 / 0%) 15%, #000 20%, #000 66%, rgb(0 0 0 / 0%) 75%);
  mask-position: 0 580%;
  mask-size: 100% 300%
}



@media screen and (max-width: 768px) {
  .pointCard__txt {
      font-size: 10px;
      line-height: 1.6
  }

  .pointCard__txt::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .pointCard__txt::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .pointCard__txt::before,
  .pointCard__txt::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

.pointCard__txt .caption {
  display: block;
  margin-top: 8px;
  line-height: 1.4
}

.pointCard__block {
  display: flex
}

@media screen and (min-width: 768px) {
  .pointCard__block {
      gap: 20px;
      margin-top: 32px
  }
}

@media screen and (max-width: 768px) {
  .pointCard__block {
      gap: 16px;
      margin-top: 24px
  }
}

@media screen and (min-width: 768px) {
  .pointCard__block .photo {
      width: 122px
  }
}

@media screen and (max-width: 768px) {
  .pointCard__block .photo {
      width: 100px
  }
}

.pointCard__block .pointCard__txt {
  flex: 1
}

.pointCard.sai-animate .pointCard__circle {
  animation-name: mask-animation;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 0.4, 0.48, 1);
  animation-fill-mode: forwards
}

.pointCard.sai-animate .pointCard__cont {
  animation-name: mask-animation;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 0.4, 0.48, 1);
  animation-delay: .6s;
  animation-fill-mode: forwards
}

@media screen and (min-width: 768px) {
  .pointCard--02 .pointCard__block .photo {
      width: 102px
  }
}

.pointCard--02.sai-animate .pointCard__circle {
  animation-delay: 1.2s
}

.pointCard--02.sai-animate .pointCard__cont {
  animation-delay: 1.8s
}

@media screen and (min-width: 768px) {
  .pointSect {
      max-width: 900px;
      margin: 0 auto
  }
}

@media screen and (max-width: 768px) {
  .pointSect {
      padding: 0 30px
  }
}

@media screen and (min-width: 768px) {
  .pointSect__cont {
      display: flex;
      justify-content: space-between
  }
}

@media screen and (min-width: 768px) {
  .pointSect__cont .pointCard {
      display: flex;
      flex-direction: column
  }
}

@media screen and (max-width: 768px) {
  .pointSect__cont .pointCard:not(:first-child) {
      margin-top: 16px
  }
}

@media screen and (min-width: 768px) {
  .pointSect__cont .pointCard__cont {
      flex: 1
  }
}

@media screen and (min-width: 768px) {
  .pointSect__head+.pointSect__cont {
      margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .pointSect__head+.pointSect__cont {
      margin-top: 56px
  }
}

.projectCard {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 8px 0 0 8px;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
}

.projectCard__icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 58px;
  aspect-ratio: 1 / 1
}

.projectCard__frame {
  position: relative;
  z-index: 1;
  height: 100%
}

@media screen and (min-width: 768px) {
  .projectCard__frame {
      padding: 48px 40px
  }
}

@media screen and (max-width: 768px) {
  .projectCard__frame {
      padding: 32px 40px
  }
}

.projectCard__frame::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-color: #fff;
  border: 3px solid #ed6d0f;
  border-radius: 20px
}

.projectCard__frame::after {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: -1;
  display: block;
  width: calc(100% + 10px);
  height: 100%;
  content: '';
  background-color: rgb(239 191 102 / 77%);
  border-radius: 20px
}

.projectCard__head {
  position: relative;
  z-index: 1
}

.projectCard__ttl {
  font-weight: 600;
  color: #ed6d0f;
  text-align: center;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .projectCard__ttl {
      font-size: 24px;
      line-height: 1.2
  }

  .projectCard__ttl::before {
      margin-top: calc((1 - 1.2) * .5em);
      content: ''
  }

  .projectCard__ttl::after {
      margin-bottom: calc((1 - 1.2) * .5em)
  }

  .projectCard__ttl::before,
  .projectCard__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .projectCard__ttl {
      font-size: 22px;
      line-height: 1.6
  }

  .projectCard__ttl::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .projectCard__ttl::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .projectCard__ttl::before,
  .projectCard__ttl::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (min-width: 768px) {
  .projectCard__ttl .small {
      font-size: 20px
  }
}

@media screen and (max-width: 768px) {
  .projectCard__ttl .small {
      font-size: 18px
  }
}

.projectCard__ttl+.photo {
  margin-top: 24px
}

.projectCard__cont {
  position: relative;
  z-index: 1
}

.projectCard__head+.projectCard__cont {
  margin-top: 33px
}

.projectCard__txt {
  font-weight: 500;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .projectCard__txt {
      font-size: 13px;
      line-height: 1.8;
      text-align: center
  }

  .projectCard__txt::before {
      margin-top: calc((1 - 1.8) * .5em);
      content: ''
  }

  .projectCard__txt::after {
      margin-bottom: calc((1 - 1.8) * .5em)
  }

  .projectCard__txt::before,
  .projectCard__txt::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .projectCard__txt {
      font-size: 12px;
      line-height: 1.6
  }

  .projectCard__txt::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .projectCard__txt::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .projectCard__txt::before,
  .projectCard__txt::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (min-width: 768px) {
  .projectSect {
      max-width: 1200px;
      margin: 120px auto 0
  }
}

@media screen and (max-width: 768px) {
  .projectSect {
      padding: 0 30px;
      margin-top: 80px
  }
}

@media screen and (min-width: 768px) {
  .projectSect__head+.projectSect__cont {
      margin-top: 56px
  }
}

@media screen and (max-width: 768px) {
  .projectSect__head+.projectSect__cont {
      margin-top: 32px
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide {
      mask-image: linear-gradient(172deg, rgb(0 0 0 / 0%) 15%, #000 20%, #000 66%, rgb(0 0 0 / 0%) 75%);
      mask-position: 0 580%;
      mask-size: 100% 300%;
      opacity: 0
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide:nth-child(1) {
      animation-delay: .4s
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide:nth-child(2) {
      animation-delay: .8s
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide:nth-child(3) {
      animation-delay: 1.2s
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide:nth-child(4) {
      animation-delay: 1.6s
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide:nth-child(5) {
      animation-delay: 2s
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide:nth-child(6) {
      animation-delay: 2.4s
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide:nth-child(7) {
      animation-delay: 2.8s
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide:nth-child(8) {
      animation-delay: 3.2s
  }
}

@media screen and (min-width: 768px) {
  .projectSwiper .swiper-slide:nth-child(9) {
      animation-delay: 3.6s
  }
}


@media screen and (min-width: 768px) {
  .projectSwiper__controller {
      display: none
  }
}

@media screen and (max-width: 768px) {
  .projectSwiper__controller {
      margin-top: 24px
  }
}

.projectSwiper__controller .swiper-pagination {
  position: relative;
  display: flex;
  gap: 12px;
  justify-content: center
}

.projectSwiper__controller .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #999;
  opacity: 1
}

.projectSwiper__controller .swiper-pagination-bullet-active {
  background-color: rgb(237 109 15 / 77%)
}

@media screen and (min-width: 768px) {
  .projectSwiper.sai-animate .swiper-slide {
      animation-name: mask-animation;
      animation-duration: 1s;
      animation-timing-function: cubic-bezier(0, 0.4, 0.48, 1);
      animation-fill-mode: forwards
  }
}

.relationFigure {
  margin-top: 64px
}

.relationFigure__ttl {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0
}

.relationFigure__ttl::before {
  margin-top: calc((1 - 1.2) * .5em);
  content: ''
}

.relationFigure__ttl::after {
  margin-bottom: calc((1 - 1.2) * .5em)
}

.relationFigure__ttl::before,
.relationFigure__ttl::after {
  display: block;
  width: 0;
  height: 0;
  content: ''
}

@media screen and (min-width: 768px) {
  .relationFigure__ttl {
      font-size: 20px
  }
}

@media screen and (max-width: 768px) {
  .relationFigure__ttl {
      font-size: 18px
  }
}

@media screen and (min-width: 768px) {
  .relationFigure__fig {
      width: 218px
  }
}

@media screen and (max-width: 768px) {
  .relationFigure__fig {
      width: 160px
  }
}

.relationFigure__ttl+.relationFigure__fig {
  margin: 40px auto 0
}


@media screen and (min-width: 768px) {
  .schemeFigure__scroll {
      mask-image: linear-gradient(172deg, rgb(0 0 0 / 0%) 15%, #000 20%, #000 66%, rgb(0 0 0 / 0%) 75%);
      mask-position: 0 580%;
      mask-size: 100% 300%;
      opacity: 0
  }
}


.schemeFigure__scroll::-webkit-scrollbar {
  display: none
}

.schemeFigure__inner {
  display: flex
}

@media screen and (min-width: 768px) {
  .schemeFigure__inner {
      justify-content: center
  }
}

@media screen and (max-width: 768px) {
  .schemeFigure__inner {
      width: auto
  }
}

@media screen and (min-width: 768px) {
  .schemeFigure__figPlot {
      display: none
  }
}

@media screen and (max-width: 768px) {
  .schemeFigure__figPlot {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      aspect-ratio: 1 / 1;
      background-color: rgb(153 153 153 / 90%);
      border-radius: 50%
  }
}

.schemeFigure__figPlot .arrowSVG {
  display: block
}

.schemeFigure__step {
  position: relative;
  z-index: 1
}

@media screen and (max-width: 768px) {
  .schemeFigure__step {
      height: 184px
  }
}

@media screen and (min-width: 768px) {
  .schemeFigure__step {
      height: 276px
  }
}

.schemeFigure__step:not(:first-child) {
  margin-left: -10px
}

.schemeFigure__step picture {
  width: auto;
  max-width: inherit;
  height: 100%
}

.schemeFigure__step[class*="--01"] {
  z-index: 6
}

.schemeFigure__step[class*="--02"] {
  z-index: 5
}

.schemeFigure__step[class*="--03"] {
  z-index: 4
}

.schemeFigure__step[class*="--04"] {
  z-index: 3
}

.schemeFigure__step[class*="--05"] {
  z-index: 2
}

.schemeFigure__step[class*="--06"] {
  z-index: 1
}

@media screen and (min-width: 768px) {
  .schemeFigure.sai-animate .schemeFigure__scroll {
      animation-name: mask-animation;
      animation-duration: 1s;
      animation-timing-function: cubic-bezier(0, 0.4, 0.48, 1);
      animation-fill-mode: forwards
  }
}

.schemeSect {
  margin: 0 auto
}

@media screen and (min-width: 768px) {
  .schemeSect {
      max-width: 900px;
      padding-top: 100px
  }
}

@media screen and (max-width: 768px) {
  .schemeSect {
      padding: 100px 30px 0
  }
}

@media screen and (max-width: 768px) {
  .schemeSect__cont {
      margin-right: -30px
  }
}

@media screen and (min-width: 768px) {
  .schemeSect__head+.schemeSect__cont {
      margin-top: 56px
  }
}

@media screen and (max-width: 768px) {
  .schemeSect__head+.schemeSect__cont {
      margin-top: 32px
  }
}

@media screen and (min-width: 768px) {
  .solutionFigure {
      margin: 56px auto 0
  }
}

@media screen and (max-width: 768px) {
  .solutionFigure {
      margin: 32px auto 0
  }
}

.solutionFigure__img {
  padding: 0 24px;
  margin: 0 auto
}

@media screen and (min-width: 768px) {
  .solutionFigure__img {
      width: 187px
  }
}

@media screen and (max-width: 768px) {
  .solutionFigure__img {
      width: 248px
  }
}

.solutionFigure__img .photo__capIn {
  right: -24px
}

.solutionFigure__frame {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border: 3px solid #cfcec2;
  border-radius: 20px
}

@media screen and (min-width: 768px) {
  .solutionFigure__frame {
      display: flex
  }
}

.solutionFigure__block {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #3e3a39
}

@media screen and (min-width: 768px) {
  .solutionFigure__block {
      width: 50%;
      padding: 32px 48px
  }
}

@media screen and (max-width: 768px) {
  .solutionFigure__block {
      padding: 24px 20px
  }
}

@media screen and (max-width: 768px) {
  .solutionFigure__block--before {
      padding-bottom: 0
  }
}

.solutionFigure__block--after {
  color: #ed6d0f
}

@media screen and (max-width: 768px) {
  .solutionFigure__block--after {
      margin-top: -22px
  }
}

@media screen and (min-width: 768px) {
  .solutionFigure__arrow {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: 2;
      width: auto;
      height: 100%;
      transform: translate(-50%, 0)
  }
}

@media screen and (min-width: 768px) {
  .solutionFigure__arrow .arrowPC {
      display: block;
      width: auto;
      height: 100%
  }
}

@media screen and (max-width: 768px) {
  .solutionFigure__arrow .arrowPC {
      display: none
  }
}

@media screen and (max-width: 768px) {
  .solutionFigure__arrow .arrowSP {
      display: block;
      width: 100%;
      height: auto
  }
}

@media screen and (min-width: 768px) {
  .solutionFigure__arrow .arrowSP {
      display: none
  }
}

.solutionFigure__ttl {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0
}

.solutionFigure__ttl::before {
  margin-top: calc((1 - 1.8) * .5em);
  content: ''
}

.solutionFigure__ttl::after {
  margin-bottom: calc((1 - 1.8) * .5em)
}

.solutionFigure__ttl::before,
.solutionFigure__ttl::after {
  display: block;
  width: 0;
  height: 0;
  content: ''
}

.solutionFigure__txt {
  font-weight: 500;
  letter-spacing: 0
}

@media screen and (min-width: 768px) {
  .solutionFigure__txt {
      font-size: 13px;
      line-height: 1.8
  }

  .solutionFigure__txt::before {
      margin-top: calc((1 - 1.8) * .5em);
      content: ''
  }

  .solutionFigure__txt::after {
      margin-bottom: calc((1 - 1.8) * .5em)
  }

  .solutionFigure__txt::before,
  .solutionFigure__txt::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .solutionFigure__txt {
      font-size: 12px;
      line-height: 1.6
  }

  .solutionFigure__txt::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .solutionFigure__txt::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .solutionFigure__txt::before,
  .solutionFigure__txt::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

.solutionFigure__ttl+.solutionFigure__txt {
  margin-top: 16px
}

.surveyData {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
}

@media screen and (min-width: 768px) {
  .surveyData {
      gap: 40px
  }
}

@media screen and (max-width: 768px) {
  .surveyData {
      gap: 40px 20px;
      justify-content: center
  }
}

@media screen and (min-width: 768px) {
  .surveyData__item {
      width: 154px
  }
}

@media screen and (max-width: 768px) {
  .surveyData__item {
      width: 104px
  }
}

.surveyData__ttl {
  font-weight: 500;
  line-height: 1.6;
  color: #3e3a39;
  text-align: center;
  letter-spacing: 0
}

.surveyData__ttl::before {
  margin-top: calc((1 - 1.6) * .5em);
  content: ''
}

.surveyData__ttl::after {
  margin-bottom: calc((1 - 1.6) * .5em)
}

.surveyData__ttl::before,
.surveyData__ttl::after {
  display: block;
  width: 0;
  height: 0;
  content: ''
}

@media screen and (min-width: 768px) {
  .surveyData__ttl {
      font-size: 14px
  }
}

@media screen and (max-width: 768px) {
  .surveyData__ttl {
      font-size: 12px
  }
}

@media screen and (min-width: 768px) {
  .surveyData__data {
      width: 128px;
      margin: 20px auto 0
  }
}

@media screen and (max-width: 768px) {
  .surveyData__data {
      margin-top: 16px
  }
}

.surveySect {
  margin: 100px auto 0
}

@media screen and (min-width: 768px) {
  .surveySect {
      max-width: 900px
  }
}

@media screen and (max-width: 768px) {
  .surveySect {
      padding: 0 30px
  }
}

@media screen and (min-width: 768px) {
  .surveySect__head+.surveySect__cont {
      margin-top: 56px
  }
}

@media screen and (max-width: 768px) {
  .surveySect__head+.surveySect__cont {
      margin-top: 32px
  }
}

@media screen and (min-width: 768px) {
  .surveySect__data {
      margin-top: 56px
  }
}

@media screen and (max-width: 768px) {
  .surveySect__data {
      margin-top: 40px
  }
}

.surveySect__data .caption {
  text-align: right
}

@media screen and (min-width: 768px) {
  .surveySect__data .caption {
      width: 528px;
      margin: 24px auto 0
  }
}

@media screen and (max-width: 768px) {
  .surveySect__data .caption {
      margin-top: 24px
  }
}



.surveyVoiceFigure__illust {
  mask-image: linear-gradient(172deg, rgb(0 0 0 / 0%) 15%, #000 20%, #000 66%, rgb(0 0 0 / 0%) 75%);
  mask-position: 0 580%;
  mask-size: 100% 300%;
  opacity: 0
}


.surveyVoiceFigure__fu {
  filter: blur(1em) brightness(1.3);
  opacity: 0;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-duration: 1.2s;
  transition-property: filter, opacity;
  will-change: filter, opacity
}

.surveyVoiceFigure__fu--01 {
  transition-delay: 0.8s
}

.surveyVoiceFigure__fu--02 {
  transition-delay: 1.1s
}



.surveyVoiceFigure__fu--03 {
  transition-delay: 1.4s
}



.surveyVoiceFigure__fu--04 {
  transition-delay: 1.7s
}


.surveyVoiceFigure.sai-animate .surveyVoiceFigure__illust {
  animation-name: mask-animation;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 0.4, 0.48, 1);
  animation-fill-mode: forwards
}

.surveyVoiceFigure.sai-animate .surveyVoiceFigure__fu {
  filter: blur(0) brightness(1);
  opacity: 1
}

.voiceFigure {
  position: relative;
  z-index: 1;
  opacity: 0
}

@media screen and (min-width: 768px) {
  .voiceFigure {
      width: 695px;
      margin: 64px auto 0
  }
}

@media screen and (max-width: 768px) {
  .voiceFigure {
      margin-top: 32px
  }
}

.voiceFigure__item {
  opacity: 0;
  mask-image: linear-gradient(172deg, rgb(0 0 0 / 0%) 15%, #000 20%, #000 66%, rgb(0 0 0 / 0%) 75%);
  mask-position: 0 580%;
  mask-size: 100% 300%
}

.voiceFigure__item:nth-child(1) {
  animation-delay: .2s
}

.voiceFigure__item:nth-child(2) {
  animation-delay: .4s
}

.voiceFigure__item:nth-child(3) {
  animation-delay: .6s
}

.voiceFigure.sai-animate {
  opacity: 1
}

.voiceFigure.sai-animate .voiceFigure__item {
  animation-name: mask-animation;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 0.4, 0.48, 1);
  animation-fill-mode: forwards
}

.voiceSect {
  margin: 0 auto
}


.voiceSect__illustImg {
  mask-image: linear-gradient(172deg, rgb(0 0 0 / 0%) 15%, #000 20%, #000 66%, rgb(0 0 0 / 0%) 75%);
  mask-position: 0 580%;
  mask-size: 100% 300%;
  opacity: 0
}

@media screen and (max-width: 768px) {
  .voiceSect__illustImg {
      margin: -30px -30px 0
  }
}

.voiceSect__fu {
  filter: blur(1em) brightness(1.3);
  opacity: 0;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-duration: 1.2s;
  transition-property: filter, opacity;
  will-change: filter, opacity
}

@media screen and (min-width: 768px) {
  .voiceSect__fu {
      position: absolute;
      z-index: 2
  }
}

.voiceSect__fu--01 {
  transition-delay: 0.8s
}


.voiceSect__fu--02 {
  transition-delay: 1.1s
}


.voiceSect__fu--03 {
  transition-delay: 1.4s
}



.voiceSect__fu--04 {
  transition-delay: 1.7s
}


.voiceSect__fu--05 {
  transition-delay: 2s
}

.voiceSect__fu--06 {
  transition-delay: 2.3s
}


.voiceSect__fu--07 {
  transition-delay: 2.6s
}

.voiceSect__fu--08 {
  transition-delay: 2.9s
}


.voiceSect__illust {
  position: relative;
  z-index: 1
}

.voiceSect__illust.sai-animate .voiceSect__illustImg {
  animation-name: mask-animation;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 0.4, 0.48, 1);
  animation-fill-mode: forwards
}

.voiceSect__illust.sai-animate .voiceSect__fu {
  filter: blur(0) brightness(1);
  opacity: 1
}

.voiceSect__label {
  width: fit-content;
  padding: 16px 30px;
  color: #fff;
  text-align: center;
  background-color: #3e3a39;
  border-radius: 30px
}

@media screen and (min-width: 768px) {
  .voiceSect__label {
      margin: 64px auto 0
  }
}

@media screen and (max-width: 768px) {
  .voiceSect__label {
      margin: 48px auto 0
  }
}

.voiceSect__label .inner {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap
}

@media screen and (min-width: 768px) {
  .voiceSect__label .inner {
      line-height: 1.4
  }

  .voiceSect__label .inner::before {
      margin-top: calc((1 - 1.4) * .5em);
      content: ''
  }

  .voiceSect__label .inner::after {
      margin-bottom: calc((1 - 1.4) * .5em)
  }

  .voiceSect__label .inner::before,
  .voiceSect__label .inner::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (max-width: 768px) {
  .voiceSect__label .inner {
      line-height: 1.6
  }

  .voiceSect__label .inner::before {
      margin-top: calc((1 - 1.6) * .5em);
      content: ''
  }

  .voiceSect__label .inner::after {
      margin-bottom: calc((1 - 1.6) * .5em)
  }

  .voiceSect__label .inner::before,
  .voiceSect__label .inner::after {
      display: block;
      width: 0;
      height: 0;
      content: ''
  }
}

@media screen and (min-width: 768px) {
  .voiceSect__bottom {
      max-width: 780px;
      margin: 64px auto 0
  }
}

@media screen and (max-width: 768px) {
  .voiceSect__bottom {
      margin-top: 48px
  }
}

.otonari-introduction {
  position: relative;
  z-index: 1;
  background-color: #f2f2f0
}

@media screen and (min-width: 768px) {
  .otonari-introduction {
      padding: 64px 0 104px
  }
}

@media screen and (max-width: 768px) {
  .otonari-introduction {
      padding: 44px 0
  }
}

.otonari-introduction::before {
  position: absolute;
  left: 50%;
  display: block;
  width: 100%;
  content: '';
  transform: translate(-50%, 0)
}

@media screen and (min-width: 768px) {
  .otonari-introduction::before {
      top: calc(-52 / 1440 * 100vw);
      height: calc(52 / 1440 * 100vw);
      background: url("/images/product/condominium/otonari/pc/bg-arc-lightgray.svg") no-repeat center center/cover
  }
}

@media screen and (max-width: 768px) {
  .otonari-introduction::before {
      top: calc(-14 / 390 * 100vw);
      height: calc(14 / 390 * 100vw);
      background: url("/images/product/condominium/otonari/sp/bg-arc-lightgray.svg") no-repeat center center/cover
  }
}

.otonari-voice {
  position: relative;
  z-index: 1;
  background-color: #fff
}

@media screen and (min-width: 768px) {
  .otonari-voice {
      padding: 116px 0 124px
  }
}

@media screen and (max-width: 768px) {
  .otonari-voice {
      padding: 80px 0 120px
  }
}

.otonari-voice::before {
  position: absolute;
  left: 50%;
  display: block;
  width: 100%;
  content: '';
  transform: translate(-50%, 0)
}

@media screen and (min-width: 768px) {
  .otonari-voice::before {
      top: calc(-52 / 1440 * 100vw);
      height: calc(52 / 1440 * 100vw);
      background: url("/images/product/condominium/otonari/pc/bg-arc-wh.svg") no-repeat center center/cover
  }
}

@media screen and (max-width: 768px) {
  .otonari-voice::before {
      top: calc(-14 / 390 * 100vw);
      height: calc(14 / 390 * 100vw);
      background: url("/images/product/condominium/otonari/sp/bg-arc-wh.svg") no-repeat center center/cover
  }
}

.otonari-activity {
  position: relative;
  z-index: 1;
  background-color: #f2f2f0
}

@media screen and (min-width: 768px) {
  .otonari-activity {
      padding: 122px 0 120px
  }
}

@media screen and (max-width: 768px) {
  .otonari-activity {
      padding: 80px 0 116px
  }
}

.otonari-activity::before {
  position: absolute;
  left: 50%;
  display: block;
  width: 100%;
  content: '';
  transform: translate(-50%, 0)
}

@media screen and (min-width: 768px) {
  .otonari-activity::before {
      top: calc(-52 / 1440 * 100vw);
      height: calc(52 / 1440 * 100vw);
      background: url("/images/product/condominium/otonari/pc/bg-arc-lightgray.svg") no-repeat center center/cover
  }
}

@media screen and (max-width: 768px) {
  .otonari-activity::before {
      top: calc(-14 / 390 * 100vw);
      height: calc(14 / 390 * 100vw);
      background: url("/images/product/condominium/otonari/sp/bg-arc-lightgray.svg") no-repeat center center/cover
  }
}

.otonari-interview {
  position: relative;
  z-index: 1;
  background-color: #d9d8d0
}

@media screen and (min-width: 768px) {
  .otonari-interview {
      padding: 95px 0 165px
  }
}

@media screen and (max-width: 768px) {
  .otonari-interview {
      padding: 80px 0 76px
  }
}

.otonari-interview::before {
  position: absolute;
  left: 50%;
  display: block;
  width: 100%;
  content: '';
  transform: translate(-50%, 0)
}

@media screen and (min-width: 768px) {
  .otonari-interview::before {
      top: calc(-52 / 1440 * 100vw);
      height: calc(52 / 1440 * 100vw);
      background: url("/images/product/condominium/otonari/pc/bg-arc-darkgray.svg") no-repeat center center/cover
  }
}

@media screen and (max-width: 768px) {
  .otonari-interview::before {
      top: calc(-14 / 390 * 100vw);
      height: calc(14 / 390 * 100vw);
      background: url("/images/product/condominium/otonari/sp/bg-arc-darkgray.svg") no-repeat center center/cover
  }
}

.anchorList {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center
}

@media screen and (max-width: 768px) {
  .anchorList {
      padding-left: 30px
  }
}

.anchorList__link {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 1;
  border-bottom: 1px solid #ccc
}

@media screen and (min-width: 768px) {
  .anchorList__link {
      width: 296px;
      padding: 24px 0 16px;
      font-size: 16px;
      text-align: center;
      letter-spacing: .11em
  }
}

@media screen and (max-width: 768px) {
  .anchorList__link {
      width: 100%;
      padding: 10px 20px 10px 50px;
      font-size: 14px;
      letter-spacing: .15em
  }
}

@media screen and (min-width: 768px) {
  .anchorList__link:hover::after {
      right: auto;
      left: 0;
      max-width: 100%;
      opacity: 1
  }
}

@media (hover: hover) and (pointer: fine) {
  .anchorList__link:hover::after {
      right: auto;
      left: 0;
      max-width: 100%;
      opacity: 1
  }
}

@media screen and (min-width: 768px) {
  .anchorList__link:not(:last-of-type) {
      margin-right: 5px
  }
}

.anchorList__link::after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  max-width: 0;
  height: 100%;
  content: '';
  background-color: #f5f5f5;
  opacity: 0;
  transition: .4s
}

.anchorList__link .arrowSVG {
  position: absolute;
  top: 50%;
  fill: #666;
  fill-rule: evenodd;
  transform: translate(0, -50%)
}

@media screen and (min-width: 768px) {
  .anchorList__link .arrowSVG {
      left: 30px;
      width: 10px;
      height: 7px;
      margin-top: 4px
  }
}

@media screen and (max-width: 768px) {
  .anchorList__link .arrowSVG {
      left: 18px;
      width: 8.5px;
      height: 5.5px
  }
}

html {
  scroll-behavior: smooth;
}

.projectSwiper .splide .splide__pagination {
  position: relative;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.projectSwiper .splide .splide__pagination li {
  flex-grow: 0;
  width: fit-content;
  height: fit-content;
  margin: 0;
}

.projectSwiper .splide .splide__pagination li .splide__pagination__page {
  width: 10px;
  height: 10px;
  margin: 0;
  background-color: #999;
  opacity: 1;
}

.projectSwiper .splide .splide__pagination li .splide__pagination__page.is-active {
  background-color: rgb(237 109 15 / 77%);
}

[data-sai='fade-up'] {
  opacity: 0;
  transition-duration: .6s;
  transition-property: opacity, transform;
  transform: translate3d(0, 40px, 0);
}

[data-sai='fade-up'].sai-animate {
  opacity: 1;
  transform: translateZ(0);
}