/***** -- var -- *****/
:root {
  --color-1st: #4CBBB4;
  --header-icon-color: #4CBBB4;
}

#talk .l-main {margin-top: 0!important;}
#talk #header .p-header-link {
  right: 192px;
  padding-left: 200px;
}
#talk #header.l-header2 .p-header-link > .c-flex {gap: .25em 1.5em;}
#talk #header.l-header2 .p-header-link > .c-flex > a {padding: 0;}
#talk #header .p-header-btn .c-btn.is-form > span:nth-of-type(1) {color: #fff9b1;}
#talk #header .p-header-btn .c-btn.is-form:hover > span:nth-of-type(1) {color: var(--color-1st);}
#talk #drawer.l-drawer {
  top: 0!important;
  height: 100vh!important;
}
#talk #drawer .p-drawer-item {margin-top: 96px;}
#talk #drawer .p-drawer-btn .c-btn.is-form > span:nth-of-type(1) {color: #fff9b1;}
#talk #drawer .p-drawer-btn .c-btn.is-form:hover > span:nth-of-type(1) {color: var(--color-1st);}
@media screen and (max-width: 1200px) {
  #talk #header.l-header2 .p-header-link > .c-flex > a {margin: 0;}
}


/* ----- mv ----- */
#mv {
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #fff9b1;
}
#mv .p-headline .c-heading > span {
  display: block;
  font-family: var(--font-family-3rd);
  font-size: 4.8rem;
  font-weight: 800;
  color: #111;
  margin-bottom: .5em;
}
#mv .p-headline .c-heading > img {width: 360px;}
#mv .p-btn {margin-top: 3em;}
#mv .p-btn .c-btn span {color: #fff9b1;}
#mv .p-btn .c-btn:hover span {color: inherit;}
#mv .p-footer {margin-top: 2em;}
#mv .p-footer > .c-flex > *:nth-child(1) {
  display: none;
  padding-right: 1em;
}
#mv .p-footer-price img {width: 360px;}
#mv .p-footer-badge img {width: 144px;}
#mv .p-lower {
  position: absolute;
  z-index: -1;
}
#mv .p-lower.is-01 {
  right: -40px;
  top: 120px;
}
#mv .p-lower.is-02 {
  left: -40px;
  top: 120px;
}
#mv .p-lower img {width: 320px;}
#mv .p-lower-bubble {
  position: absolute;
  width: 160px;
  background-size: cover;
}
#mv .p-lower.is-01 .p-lower-bubble {
  left: -40px;
  top: 0;
  background-image: url('../img/talk/bubble-lg--green.png');
}
#mv .p-lower.is-02 .p-lower-bubble {
  right: -40px;
  top: 0;
  background-image: url('../img/talk/bubble-lg--purple.png');
}
#mv .p-lower-bubble::before {
  display: block;
  padding-top: 73.13%;
  content: '';
}
#mv .p-lower-bubble p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  padding: 0.4em 0 0.4em 0.4em;
}
#mv .p-banner {
  margin-top: 2em;
  padding-bottom: 2em;
}
#mv .p-banner > .c-flex > * {
  width: 640px;
  max-width: 85%;
  box-shadow: 4px 4px 8px #999;
}
@media screen and (max-width: 1200px) {
  #mv .p-lower.is-01 {right: -32px;}
  #mv .p-lower.is-02 {left: -32px;}
  #mv .p-lower img {width: 24vw;}
  #mv .p-lower-bubble {width: 13vw;}
  #mv .p-lower-bubble p {font-size: 1.33vw;}
}
@media screen and (max-width: 980px) {
  #mv {
    padding-top: 104px;
    padding-bottom: 56vw;
  }
  #mv .p-headline .c-heading > span {font-size: 6.25vw;}
  #mv .p-headline .c-heading > img {width: 46vw;}
  #mv .p-footer > .c-flex > *:nth-child(1) {width: 56%;}
  #mv .p-footer > .c-flex > *:nth-child(2) {width: 22%;}
  #mv .p-footer > .c-flex > *:nth-child(3) {width: 22%;}
  #mv .p-footer-price img {width: 100%;}
  #mv .p-footer-badge img {width: 100%;}
  #mv .p-lower.is-01 {
    right: -8px;
    top: auto;
    bottom: -46vw;
  }
  #mv .p-lower.is-02 {
    left: -8px;
    top: auto;
    bottom: -46vw;
  }
  #mv .p-lower img {width: 40vw;}
  #mv .p-lower-bubble {width: 18vw;}
  #mv .p-lower-bubble p {font-size: 1.82vw;}
}
@media screen and (max-width: 640px) {
  #mv {
    padding-top: 96px;
    padding-bottom: 132vw;
  }
  #mv .p-headline .c-heading > span {font-size: 7.18vw;}
  #mv .p-headline .c-heading > img {width: 52vw;}
  #mv .p-footer > .c-flex > *:nth-child(2) {width: 36%;}
  #mv .p-footer > .c-flex > *:nth-child(3) {width: 36%;}
  #mv .p-lower.is-01 {bottom: -122vw;}
  #mv .p-lower.is-02 {bottom: -64vw;}
  #mv .p-lower img {width: 55vw;}
  #mv .p-lower-bubble {width: 30vw;}
  #mv .p-lower-bubble p {font-size: 3.08vw;}
  #mv .p-banner > .c-flex > * {
    max-width: 90%;
  }
}

/* ----- intro ----- */
#intro {
  background-color: #4cbbb4;
  padding-bottom: 192px;
}
#intro::before {
  position: absolute;
  left: 0;
  top: -79px;
  width: 100%;
  height: 80px;
  background-color: inherit;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  content: '';
}
#intro .p-headline .c-heading > span {
  display: block;
  font-family: var(--font-family-1st);
  text-align: center;
}
#intro .p-headline .c-heading > span:nth-of-type(1) {
  font-size: 2.4rem;
  color: #fff;
  letter-spacing: 0.1em;
}
#intro .p-headline .c-heading > span:nth-of-type(2) {
  font-size: 4.0rem;
  color: #fff9b1;
  letter-spacing: 0.05em;
}
#intro .p-content {margin-top: 3em;}
#intro .p-content > .c-flex > * {
  width: 50%;
  opacity: 0;
  transition-duration: .5s;
}
#intro .p-content > .c-flex > *:nth-child(odd) {
  transform: translateX(-100px);
  transition-delay: 0s;
}
#intro .p-content > .c-flex > *:nth-child(even) {
  transform: translateX(100px);
  transition-delay: 0.25s;
}
#intro .p-content > .c-flex > *.is-show {
  opacity: 1;
  transform: translateX(0);
}
#intro .p-content-block > .c-flex > * {
  width: 50%;
  background-color: #fff;
}
#intro .p-content > .c-flex > *:nth-of-type(3) .p-content-block > .c-flex,
#intro .p-content > .c-flex > *:nth-of-type(4) .p-content-block > .c-flex {flex-direction: row-reverse;}
#intro .p-content-block-box {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}
#intro .p-content-block-box h3 {
  font-family: var(--font-family-2nd);
  font-size: 2.8rem;
  font-weight: 700;
  color: #111111;
}
#intro .p-content-block-box p {
  font-family: var(--font-family-2nd);
  font-size: 1.6rem;
  font-weight: 700;
  color: #4cbbb4;
  margin-top: 2em;
}
@media screen and (max-width: 980px) {
  #intro {padding-bottom: 24vw;}
  #intro::before {
    top: -7vw;
    height: 8vw;
  }
  #intro .p-headline .c-heading > span:nth-of-type(1) {font-size: 3.13vw;}
  #intro .p-headline .c-heading > span:nth-of-type(2) {font-size: 5.21vw;}
  #intro .p-content > .c-flex > * {width: 100%;}
  #intro .p-content > .c-flex > *:nth-of-type(odd) .p-content-block > .c-flex {
    flex-direction: row;
    transition-delay: 0s;
  }
  #intro .p-content > .c-flex > *:nth-of-type(even) .p-content-block > .c-flex {
    flex-direction: row-reverse;
    transition-delay: 0s;
  }
  #intro .p-content-block-box h3 {font-size: 4.69vw;}
  #intro .p-content-block-box p {font-size: 2.60vw;}
}
@media screen and (max-width: 640px) {
  #intro .p-content {margin-top: 2em;}
  #intro .p-headline .c-heading > span:nth-of-type(1) {font-size: 4.10vw;}
  #intro .p-headline .c-heading > span:nth-of-type(2) {font-size: 6.15vw;}
  #intro .p-content-block-box h3 {font-size: 5.13vw;}
  #intro .p-content-block-box p {
    font-size: 3.59vw;
    margin-top: 1em;
  }
}

/* ----- feature ----- */
#feature {
  background-color: #fff;
  padding-bottom: 192px;
}
#feature::before {
  position: absolute;
  left: 0;
  top: -79px;
  width: 100%;
  height: 80px;
  background-color: inherit;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  content: '';
}
#feature .p-headline .c-heading > span {
  font-family: var(--font-family-1st);
  font-size: 2.8rem;
  color: #111;
  text-align: center;
  letter-spacing: 0.1em;
}
#feature .p-content {
  width: 800px;
  max-width: 100%;
  margin: auto;
}
#feature .p-content > .c-flex > * {
  width: calc(100% / 3);
  text-align: center;
  margin-top: 3em;
  opacity: 0;
  transform: translateY(48px);
  transition-duration: .5s;
}
#feature .p-content > .c-flex > *:nth-child(1) {transition-delay: 0s;}
#feature .p-content > .c-flex > *:nth-child(2) {transition-delay: 0.25s;}
#feature .p-content > .c-flex > *:nth-child(3) {transition-delay: 0.5s;}
#feature .p-content > .c-flex > *:nth-child(4) {transition-delay: 0s;}
#feature .p-content > .c-flex > *:nth-child(5) {transition-delay: 0.25s;}
#feature .p-content > .c-flex > *:nth-child(6) {transition-delay: 0.5s;}
#feature .p-content > .c-flex > *.is-show {
  opacity: 1;
  transform: translateY(0);
}
#feature .p-content figure img {width: 240px;}
#feature .p-content p {margin-top: 1em;}
#feature .p-content p span {
  font-family: var(--font-family-1st);
  font-size: 2rem;
  font-weight: 700;
  color: #111;
  padding-bottom: 0.25em;
  border-bottom: 2px solid #4cbbb4;
}
#feature .p-function {
  margin-top: 6em;
  padding: 3em 3em;
  background-color: #4cbbb4;
  border-radius: 1.5em;
}
#feature .p-function-headline .c-heading > span {
  position: relative;
  font-family: var(--font-family-1st);
  font-size: 2.8rem;
  color: #fff9b1;
  text-align: center;
  letter-spacing: 0.1em;
}
#feature .p-function-headline .c-heading > span::before {
  position: absolute;
  left: -120px;
  top: -80px;
  width: 104px;
  height: 104px;
  background-image: url('../img/talk/function-badge.png');
  background-size: cover;
  content: '';
}
#feature .p-function-content {margin-top: 2em;}
#feature .p-function-content > .c-flex > * {
  width: calc(100% / 3);
  text-align: center;
}
#feature .p-function-content > .c-flex > *:nth-child(1), #feature .p-function-content > .c-flex > *:nth-child(3) {margin-top: 6em;}
#feature .p-function-content p {margin-bottom: 2em;}
#feature .p-function-content p span {
  font-family: var(--font-family-1st);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  padding-bottom: 0.25em;
  border-bottom: 2px solid #fff9b1;
}
#feature .p-function-content > .c-flex > *:nth-child(1) img {width: 240px;}
#feature .p-function-content > .c-flex > *:nth-child(2) img {width: 330px;}
#feature .p-function-content > .c-flex > *:nth-child(3) img {width: 330px;}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 980px) {
  #feature {padding-bottom: 24vw;}
  #feature::before {
    top: -7vw;
    height: 8vw;
  }
  #feature .p-headline .c-heading > span {font-size: 3.65vw;}
  #feature .p-content {width: 100%;}
  #feature .p-content figure img {width: 90%;}
  #feature .p-content p span {font-size: 2.34vw;}
  #feature .p-function {padding: 3em 1em;}
  #feature .p-function-headline .c-heading > span {font-size: 3.65vw;}
  #feature .p-function-headline .c-heading > span::before {
    left: -16vw;
    top: -12vw;
    width: 14vw;
    height: 14vw;
  }
  #feature .p-function-content > .c-flex > *:nth-child(1), #feature .p-function-content > .c-flex > *:nth-child(3) {margin-top: 4em;}
  #feature .p-function-content p span {font-size: 2.34vw;}
}
@media screen and (max-width: 640px) {
  #feature .p-headline .c-heading > span {font-size: 4.62vw;}
  #feature .p-content > .c-flex > * {
    width: 50%;
    margin-top: 2em;
  }
  #feature .p-content > .c-flex > *:nth-child(1) {transition-delay: 0s;}
  #feature .p-content > .c-flex > *:nth-child(2) {transition-delay: 0.25s;}
  #feature .p-content > .c-flex > *:nth-child(3) {transition-delay: 0s;}
  #feature .p-content > .c-flex > *:nth-child(4) {transition-delay: 0.25s;}
  #feature .p-content > .c-flex > *:nth-child(5) {transition-delay: 0s;}
  #feature .p-content > .c-flex > *:nth-child(6) {transition-delay: 0.25s;}
  #feature .p-content p span {font-size: 3.59vw;}
  #feature .p-function {padding: 3em 0;}
  #feature .p-function-headline .c-heading > span {font-size: 4.62vw;}
  #feature .p-function-headline .c-heading > span::before {
    left: -8vw;
    top: -16vw;
    width: 16vw;
    height: 16vw;
  }
  #feature .p-function-content {margin-top: 1em;}
  #feature .p-function-content > .c-flex > *:nth-child(1), #feature .p-function-content > .c-flex > *:nth-child(3) {margin-top: 2em;}
  #feature .p-function-content > .c-flex > *:nth-child(1) {
    width: 50%;
    order: 2;
  }
  #feature .p-function-content > .c-flex > *:nth-child(2) {
    width: 100%;
    order: 1;
  }
  #feature .p-function-content > .c-flex > *:nth-child(3) {
    width: 50%;
    order: 3;
  }
  #feature .p-function-content > .c-flex > *:nth-child(1) img {width: 80%;}
  #feature .p-function-content > .c-flex > *:nth-child(2) img {width: 50%;}
  #feature .p-function-content > .c-flex > *:nth-child(3) img {width: 80%;}
  #feature .p-function-content p span {font-size: 3.59vw;}
}

/* ----- voice ----- */
#voice {
  background-color: #fff9b1;
  padding-bottom: 192px;
}
#voice::before {
  position: absolute;
  left: 0;
  top: -79px;
  width: 100%;
  height: 80px;
  background-color: inherit;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  content: '';
}
#voice .p-headline .c-heading > span {
  font-family: var(--font-family-1st);
  font-size: 2.8rem;
  color: #111;
  text-align: center;
  letter-spacing: 0.1em;
}
#voice .p-content {margin-top: 1em;}
#voice .p-content > .c-flex > * {
  width: 50%;
  margin-top: 2em;
  opacity: 0;
  transform: translateY(80px);
  transition-duration: .5s;
}
#voice .p-content > .c-flex > *.is-show {
  opacity: 1;
  transform: translateY(0);
}
#voice .p-content > .c-flex > *:nth-child(odd) {transition-delay: 0s;}
#voice .p-content > .c-flex > *:nth-child(even) {transition-delay: .25s;}
#voice .p-content p {
  position: absolute;
  right: 0;
  top: 50%;
  width: 73%;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 2;
  transform: translateY(-50%);
  padding: 1em 1em 1em 2em;
}
#voice .p-service {
  margin-top: 4em;
  padding: 1em 6em;
  background-color: #fff;
  border-radius: 1.5em;
}
#voice .p-service > .c-flex > *:nth-child(1) {
  width: 60%;
  margin-top: 2em;
  padding-right: 2em;
}
#voice .p-service > .c-flex > *:nth-child(2) {
  width: 40%;
  text-align: center;
}
#voice .p-service-headline .c-heading > span {
  font-family: var(--font-family-1st);
  font-size: 3.2rem;
  color: #cd88b8;
  letter-spacing: 0.2em;
}
#voice .p-service-text {margin-top: 1em;}
#voice .p-service-text p {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.1em;
  line-height: 2.2;
}
#voice .p-service-image img {width: 100%;}
#voice .p-btn {margin-top: 3em;}
#voice .p-btn .c-btn span {color: #fff9b1;}
#voice .p-btn .c-btn:hover span {color: inherit;}
@media screen and (max-width: 1200px) {
  #voice .p-content p {font-size: 1.17vw;}
  #voice .p-service {padding: 1em 3em;}
}
@media screen and (max-width: 980px) {
  #voice {padding-bottom: 24vw;}
  #voice::before {
    top: -7vw;
    height: 8vw;
  }
  #voice .p-headline .c-heading > span {font-size: 3.65vw;}
  #voice .p-content > .c-flex > * {width: 100%;}
  #voice .p-content > .c-flex > *:nth-child(odd) {transition-delay: 0s;}
  #voice .p-content > .c-flex > *:nth-child(even) {transition-delay: 0s;}
  #voice .p-content p {font-size: 2.6vw;}
  #voice .p-service {padding: 3em 3em;}
  #voice .p-service > .c-flex > *:nth-child(1) {
    width: 100%;
    margin-top: 0;
    padding-right: 0;
  }
  #voice .p-service > .c-flex > *:nth-child(2) {
    width: 100%;
    margin-top: 2em;
  }
  #voice .p-service-headline .c-heading > span {font-size: 5.21vw;}
  #voice .p-service-text p {font-size: 3.13vw;}
  #voice .p-service-image img {width: 80%;}
}
@media screen and (max-width: 640px) {
  #voice .p-headline .c-heading > span {font-size: 4.62vw;}
  #voice .p-content p {font-size: 2.56vw;}
  #voice .p-service {padding: 2em 2em;}
  #voice .p-service-headline .c-heading > span {font-size: 5.13vw;}
  #voice .p-service-text p {font-size: 3.08vw;}
}

/* ----- menu ----- */
#menu {
  padding-top: 32px;
  padding-bottom: 0;
  background-color: #fff;
}
#menu::before {
  position: absolute;
  left: 0;
  top: -79px;
  width: 100%;
  height: 80px;
  background-color: inherit;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  content: '';
}
#menu .c-inner {padding-bottom: 160px;}
#menu .p-bgIllust > * {position: absolute;}
#menu .p-bgIllust > *:nth-child(1) {
  left: -32px;
  bottom: 0;
}
#menu .p-banner > .c-flex > a {
  width: calc(100% / 3);
  text-align: center;
  margin-bottom: 2%;
  padding: 0 2%;
}
#menu .p-banner > .c-flex > a:hover {transform: translateY(-16px);}
#menu .p-link {
  margin-top: 48px;
  padding-left: 96px;
}
#menu .p-link > .c-flex > * {width: 25%;}
#menu .p-link > .c-flex > * > p:not(:last-child) {margin-bottom: 48px;}
#menu .p-link a {
  font-family: var(--font-family-1st);
  font-size: 16px;
  font-weight: 700;
}
#menu .p-link a:hover {color: var(--color-1st);}
@media screen and (max-width: 980px) {
  #menu {padding-top: 8vw;}
  #menu::before {
    top: -7vw;
    height: 8vw;
  }

  #menu .c-inner {padding-bottom: 16vw;}
  #menu .p-bgIllust > *:nth-child(1) {
    left: 0;
    bottom: 0;
  }
  #menu .p-banner > .c-flex > a {width: calc(100% / 2);}
  #menu .p-link {
    margin-top: 8vw;
    padding-left: 12vw;
  }
  #menu .p-link > .c-flex > * {
    width: 50%;
    margin-bottom: 4vw;
  }
  #menu .p-link > .c-flex > * > p:not(:last-child) {margin-bottom: 4vw;}
  #menu .p-link a {font-size: 2.4vw;}
}
@media screen and (max-width: 640px) {
  #menu .p-link > .c-flex > * {margin-bottom: 8vw;}
  #menu .p-link > .c-flex > * > p:not(:last-child) {margin-bottom: 8vw;}
  #menu .p-link a {font-size: 2.8vw;}
}





/* ----- littleswitch ----- */
.d-inline-block {
  display: inline-block!important;
}

.footer-content-list-wrapper {
  padding: 2em 0;
}

.footer-content-list {
  margin: 0;
}

#footer .footer-content-list a {
  color: #fff;
  font-family: var(--font-family-1st);
  font-size: 14px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: underline;
}

#footer.l-footer {
  height: 220px;
}

.clearfix:after {
  clear: both;
  content: "";
  display: block;
}

@media screen and (max-width: 767px) {
  #footer.l-footer {
    height: 300px;
  }

  .footer-content-list-wrapper {
    padding: 0;
  }

  .footer-content-list {
    margin: 3em 0;
  }

  #footer li.d-inline-block {
    float: left;
    width: 50%;
  }

  #footer li.d-inline-block:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.3);
  }

  #footer li.d-inline-block a {
    display: inline-block;
    padding: 6px;
    width: 100%;
  }

  #footer li.d-inline-block a:hover {
    background-color: rgba(255,255,255,.3);
  }

}