/*****************************************************************
cocoon時代に独自で作っていたボタンのCSSと
cocoon独自のボタンブロック.btn .btn-($size)と一緒に使う
*******************************************************************/

.btn-custom-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2em;
  gap: 1em;
}

.button-block .btn,
.btn-custom {
  background-color: var(--color_deep04);
  border: 2px solid var(--color_deep04);
  transition: all 0.3s ease-out;
  color: #fff;
  padding: 9px 42px;
}

/*ホバー時に中身を透明に*/

.btn-custom:hover {
  background-color: transparent;
  color: var(--color_deep04);
}

/* アピールエリア、ctaエリアのボタンデザイン*/
.cta-button .btn-l {
  background-color: var(--color_deep04);
  border: 2px solid var(--color_deep04);
  transition: all 0.3s ease-out;
}

/*アピールエリアctaエリアのホバー時*/
.cta-button .btn:hover {
  background-color: transparent;
  opacity: 1;
}

/*****
吹き出し
********/
.speech-wrap {
  --cocoon-custom-background-color: #fff;
  --cocoon-custom-text-color: var(--color_text);
  --cocoon-custom-border-color: var(--color_main);
  display: flex;
}

.speech-person {
  width: 12%;
  min-width: 12%;
}

.speech-icon img,
.speech-icon amp-img {
  border-radius: 50%;
  border: 2px solid var(--color_main);
  width: 100%;
}

.speech-name {
  text-align: center;
  font-size: 13px;
}
.speech-name:empty {
  display: none;
}

div.speech-balloon {
  height: 100%;
  position: relative;
  padding: 10px;
  background-color: var(--cocoon-custom-background-color);
  border-width: 2px;
  border-style: solid;
  border-color: var(--cocoon-custom-border-color);
  color: var(--cocoon-custom-text-color);
  border-radius: 6px;
  max-width: 86%;
}
div.speech-balloon p {
  margin: 0;
}

/* アイコンを左に表示 */
.speech-balloon::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 10px;
  border-right-width: 12px;
  border-right-style: solid;
  border-right-color: var(--cocoon-custom-border-color);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.speech-balloon::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -9px;
  top: 10px;
  border-right-width: 12px;
  border-right-style: solid;
  border-right-color: var(--cocoon-custom-background-color);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.sbp-l:not(.not-nested-style) .speech-balloon {
  margin-left: 20px;
}

.sbp-r {
  flex-direction: row-reverse;
}
.sbp-r:not(.not-nested-style) {
  /* アイコンを右に表示 */
}
.sbp-r:not(.not-nested-style) .speech-balloon {
  margin-right: 20px;
}
.sbp-r:not(.not-nested-style) .speech-balloon::before {
  right: -12px;
  left: auto;
  border-left-width: 12px;
  border-left-style: solid;
  border-left-color: var(--cocoon-custom-border-color);
  border-right: none;
}
.sbp-r:not(.not-nested-style) .speech-balloon::after {
  right: -9px;
  left: auto;
  border-left-width: 12px;
  border-left-style: solid;
  border-left-color: var(--cocoon-custom-background-color);
  border-right: none;
}

.sbis-sn:not(.not-nested-style) .speech-icon-image {
  border-radius: 0;
  border-style: none;
  box-shadow: none;
}

.sbis-sb:not(.not-nested-style) .speech-icon-image {
  border-radius: 0;
}

.sbis-cn:not(.not-nested-style) .speech-icon-image {
  border-style: none;
  box-shadow: none;
}

.sbs-flat {
  --cocoon-custom-background-color: #f1f1f1;
  --cocoon-custom-border-color: #f1f1f1;
  --cocoon-custom-text-color: var(--color_text);
}
.sbs-flat:not(.not-nested-style) .speech-balloon {
  background-color: var(--cocoon-custom-background-color);
  border-color: var(--cocoon-custom-border-color);
  color: var(--cocoon-custom-text-color);
}
.sbs-flat:not(.not-nested-style) .speech-balloon::before {
  border-right-color: var(--cocoon-custom-border-color);
}
.sbs-flat:not(.not-nested-style) .speech-balloon::after {
  border-right-color: var(--cocoon-custom-background-color);
}

.sbs-line {
  --cocoon-custom-background-color: #fff;
  --cocoon-custom-border-color: var(--color_main);
  --cocoon-custom-text-color: var(--color_text);
}
.sbs-line:not(.not-nested-style) .speech-balloon {
  border-width: 1px;
  background-color: var(--cocoon-custom-background-color);
  border-color: var(--cocoon-custom-border-color);
  color: var(--cocoon-custom-text-color);
}
.sbs-line:not(.not-nested-style) .speech-balloon::after {
  left: -10px;
}
.sbs-line:not(.not-nested-style) .speech-balloon::before {
  border-right-color: var(--cocoon-custom-border-color);
}
.sbs-line:not(.not-nested-style) .speech-balloon::after {
  border-right-color: var(--cocoon-custom-background-color);
}

.sbs-line.sbp-r {
  --cocoon-custom-background-color: #85e249;
  --cocoon-custom-border-color: #85e249;
}
.sbs-line.sbp-r:not(.not-nested-style) .speech-balloon {
  background-color: var(--cocoon-custom-background-color);
  border-color: var(--cocoon-custom-border-color);
  color: var(--cocoon-custom-text-color);
}
.sbs-line.sbp-r:not(.not-nested-style) .speech-balloon::after {
  left: auto;
  right: -10px;
}
.sbs-line.sbp-r:not(.not-nested-style) .speech-balloon::before {
  border-left-color: var(--cocoon-custom-border-color);
}
.sbs-line.sbp-r:not(.not-nested-style) .speech-balloon::after {
  border-left-color: var(--cocoon-custom-background-color);
}

div.sbs-think.sbp-l:not(.not-nested-style) .speech-balloon {
  margin-left: 46px;
}
div.sbs-think:not(.not-nested-style) .speech-balloon::before {
  border-width: 2px;
  border-style: solid;
  border-color: var(--cocoon-custom-border-color);
  background-color: var(--cocoon-custom-background-color);
  border-radius: 50%;
  left: -29px;
  top: 11px;
  width: 20px;
  height: 20px;
}
div.sbs-think:not(.not-nested-style) .speech-balloon::after {
  border-width: 2px;
  border-style: solid;
  border-color: var(--cocoon-custom-border-color);
  background-color: var(--cocoon-custom-background-color);
  border-radius: 50%;
  left: -44px;
  top: 25px;
  width: 10px;
  height: 10px;
}

.sbs-think.sbp-r:not(.not-nested-style) .speech-balloon {
  margin-right: 46px;
}
.sbs-think.sbp-r:not(.not-nested-style) .speech-balloon::before {
  left: auto;
  right: -29px;
}
.sbs-think.sbp-r:not(.not-nested-style) .speech-balloon::after {
  left: auto;
  right: -44px;
}

.cocoon-block-balloon.not-nested-style.sbis-sn
  > .speech-person
  .speech-icon-image {
  border-radius: 0;
  border-style: none;
  box-shadow: none;
}
.cocoon-block-balloon.not-nested-style.sbis-sb
  > .speech-person
  .speech-icon-image {
  border-radius: 0;
}
.cocoon-block-balloon.not-nested-style.sbis-cn
  > .speech-person
  .speech-icon-image {
  border-style: none;
  box-shadow: none;
}
.cocoon-block-balloon.not-nested-style.sbp-l > .speech-balloon {
  margin-left: 20px;
}
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon {
  margin-right: 20px;
}
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::before,
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after {
  left: auto;
  border-left-width: 12px;
  border-left-style: solid;
  border-right: none;
}
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::before {
  right: -12px;
  border-left-color: var(--cocoon-custom-border-color);
}
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after {
  right: -9px;
  border-left-color: var(--cocoon-custom-background-color);
}
.cocoon-block-balloon.not-nested-style.sbs-flat > .speech-balloon::before {
  border-right-color: var(--cocoon-custom-border-color);
}
.cocoon-block-balloon.not-nested-style.sbs-flat > .speech-balloon::after {
  border-right-color: var(--cocoon-custom-background-color);
}
.cocoon-block-balloon.not-nested-style.sbs-line > .speech-balloon {
  border-width: 1px;
}
.cocoon-block-balloon.not-nested-style.sbs-line > .speech-balloon::before {
  border-right-color: var(--cocoon-custom-border-color);
}
.cocoon-block-balloon.not-nested-style.sbs-line > .speech-balloon::after {
  left: -10px;
  border-right-color: var(--cocoon-custom-background-color);
}
.cocoon-block-balloon.not-nested-style.sbs-line.sbp-r
  > .speech-balloon::before {
  border-left-color: var(--cocoon-custom-border-color);
}
.cocoon-block-balloon.not-nested-style.sbs-line.sbp-r > .speech-balloon::after {
  left: auto;
  right: -10px;
  border-left-color: var(--cocoon-custom-background-color);
}
.cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::before,
.cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::after {
  border-width: 2px;
  border-style: solid;
  border-color: var(--cocoon-custom-border-color);
  background-color: var(--cocoon-custom-background-color);
  border-radius: 50%;
  background-clip: padding-box;
}
.cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::before {
  left: -29px;
  top: 11px;
  width: 20px;
  height: 20px;
}
.cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::after {
  left: -44px;
  top: 25px;
  width: 10px;
  height: 10px;
}
.cocoon-block-balloon.not-nested-style.sbs-think.sbp-l > .speech-balloon {
  margin-left: 46px;
}
.cocoon-block-balloon.not-nested-style.sbs-think.sbp-r > .speech-balloon {
  margin-right: 46px;
}
.cocoon-block-balloon.not-nested-style.sbs-think.sbp-r
  > .speech-balloon::before {
  left: auto;
  right: -29px;
}
.cocoon-block-balloon.not-nested-style.sbs-think.sbp-r
  > .speech-balloon::after {
  left: auto;
  right: -44px;
}

@media screen and (max-width: 834px) {
  .speech-wrap.sbs-think.sbp-l {
    margin-right: 0;
  }
  .speech-wrap.sbs-think.sbp-r {
    margin-left: 0;
  }
}

@media screen and (max-width: 480px) {
  .speech-person {
    width: 16%;
    min-width: 16%;
  }
  .speech-name {
    font-size: 10px;
  }
  .speech-wrap .speech-balloon {
    padding: 7px;
    max-width: 84%;
  }
  .speech-wrap .speech-balloon::before,
  .speech-wrap .speech-balloon::after {
    border-bottom-width: 7px;
    border-right-width: 7px;
    border-top-width: 7px;
  }
  .speech-wrap .speech-balloon::before {
    left: -7px;
  }
  .speech-wrap .speech-balloon::after {
    left: -5px;
  }
  .speech-wrap:not(.not-nested-style).sbp-l .speech-balloon {
    margin-left: 10px;
  }
  .speech-wrap:not(.not-nested-style).sbp-r .speech-balloon {
    margin-right: 10px;
  }
  .speech-wrap:not(.not-nested-style).sbp-r .speech-balloon::before {
    right: -7px;
    left: auto;
    border-left-width: 7px;
  }
  .speech-wrap:not(.not-nested-style).sbp-r .speech-balloon::after {
    border-left-width: 7px;
    right: -5px;
    left: auto;
  }
  .speech-wrap.sbs-think:not(.not-nested-style).sbp-l .speech-balloon {
    margin-left: 28px;
  }
  .speech-wrap.sbs-think:not(.not-nested-style) .speech-balloon::before {
    top: 4px;
    left: -19px;
    width: 12px;
    height: 12px;
  }
  .speech-wrap.sbs-think:not(.not-nested-style) .speech-balloon::after {
    top: 16px;
    width: 6px;
    height: 6px;
    left: -27px;
  }
  .speech-wrap.sbs-think.sbp-r:not(.not-nested-style) .speech-balloon {
    margin-right: 28px;
  }
  .speech-wrap.sbs-think.sbp-r:not(.not-nested-style) .speech-balloon::before {
    border: 2px solid var(--color_main);
    left: auto;
    right: -19px;
  }
  .speech-wrap.sbs-think.sbp-r:not(.not-nested-style) .speech-balloon::after {
    border: 2px solid var(--color_main);
    left: auto;
    right: -27px;
  }
  .cocoon-block-balloon.not-nested-style.sbs-line > .speech-balloon::after {
    left: -5px;
  }
  .cocoon-block-balloon.not-nested-style.sbp-l > .speech-balloon {
    margin-left: 10px;
  }
  .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon,
  .cocoon-block-balloon.not-nested-style.sbp-r.sbs-line > .speech-balloon {
    margin-right: 10px;
  }
  .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::before,
  .cocoon-block-balloon.not-nested-style.sbp-r.sbs-line
    > .speech-balloon::before {
    right: -7px;
    left: auto;
    border-left-width: 7px;
  }
  .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after,
  .cocoon-block-balloon.not-nested-style.sbp-r.sbs-line
    > .speech-balloon::after {
    border-left-width: 7px;
    right: -5px;
    left: auto;
  }
  .cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::before {
    top: 4px;
    left: -19px;
    width: 12px;
    height: 12px;
  }
  .cocoon-block-balloon.not-nested-style.sbs-think > .speech-balloon::after {
    top: 16px;
    width: 6px;
    height: 6px;
    left: -27px;
  }
  .cocoon-block-balloon.not-nested-style.sbs-think.sbp-l > .speech-balloon {
    margin-left: 28px;
  }
  .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r > .speech-balloon {
    margin-right: 28px;
  }
  .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r
    > .speech-balloon::before,
  .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r
    > .speech-balloon::after {
    border-width: 2px;
    left: auto;
  }
  .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r
    > .speech-balloon::before {
    right: -19px;
  }
  .cocoon-block-balloon.not-nested-style.sbs-think.sbp-r
    > .speech-balloon::after {
    right: -27px;
  }
}