@charset "UTF-8";

.fukidashi {
  position: relative;
  width: fit-content;
  padding: 1rem;
  margin: 0rem auto 2rem;
  border-radius: 10px;
  border: 2px solid #FB8183;
  background-color: #FB8183;
}

.fukidashi:before,
.fukidashi:after {
  position: absolute;
  left: 50%;
  content: "";
  height: 0;
  width: 0;
}

.fukidashi:before {
  top: 100%;
  border: 9px solid;
  border-color: transparent;
  border-top-color: #FB8183;
  margin-left: -9px;
}

.fukidashi:after {
  top: 99%;
  border: 8px solid;
  border-color: transparent;
  border-top-color: #FB8183;
  margin-left: -8px;
}

.fukidashi p {
  color: #fff!important;
  line-height: 1.5;
}

.tabmenu {
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}

/* タブメニュー指定 */
.tablist {
  display: inline-block;
  border: 1px solid #FB8083;
  font-size: 1.2rem;
  padding: 1rem 1rem;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: background-color 0.4s linear;
}
.tablist:hover {
  background-color: #ffb9ba;
  transition: 0.5s;
}
/* 最後のタブメニュー以外にかける指定 */
.tablist:not(:last-child) {
  margin-right: 1px;
}

/* タブコンテンツ指定 */
.tabcontents {
  display: none;
  padding: 0.5rem 0px;
}

/* クリックされた時の指定 */
.tablist.active,
.tabcontents.active {
  display: block;
}
.tablist.active{
  background-color: #FB8083;
  color: #fff;
}