@charset "utf-8";

#option-jcomlinkmini .text-upper::before {
  left: 0;
  transform: rotate(-38deg);
}
#option-jcomlinkmini .text-upper.text-upper-red::before,
#option-jcomlinkmini .text-upper.text-upper-red::after {
  height: 26px;
  border-left: 2px solid #E83316;
}

#option-jcomlinkmini .link-anchor-panel-down.width-lg {
  width: 250px !important;
}

@media screen and (max-width: 767px) {
#option-jcomlinkmini .table-plan br.hidden-pc {
  display: inline !important;
}
}


#option-jcomlinkmini .about-jcomlinkmini {
  display: flex;
  flex-direction: column;
}
#option-jcomlinkmini .about-jcomlinkmini .about-jcomlinkmini-ttl {
  background: #EE5D44;
  border-radius: 50px;
  color: #fff;
  font-weight: bold;
  padding: 4px 20px;
}
#option-jcomlinkmini .about-jcomlinkmini .about-jcomlinkmini-img {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  height: 100%;
  min-height: 0%;
}
#option-jcomlinkmini .about-jcomlinkmini .about-jcomlinkmini-img img {
  width: 100%;
}
#option-jcomlinkmini .about-jcomlinkmini .about-jcomlinkmini-logo {
  width: 60%;
  margin: 0 auto;
}
#option-jcomlinkmini .about-jcomlinkmini p {
  display: block;
  width: 100%;
}
#option-jcomlinkmini .about-jcomlinkmini p.about-jcomlinkmini-or {
  display: block;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}

#option-jcomlinkmini .about-jcomlinkmini-plus,
#option-jcomlinkmini .about-jcomlinkmini-right {
  position: relative;
  z-index: 2;
}
#option-jcomlinkmini .about-jcomlinkmini-plus::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  top: calc(50% - 15px);
  bottom: 0;
  right: -45px;
  background: url(/service/net/option/linkmini/images/icn-plus.svg) no-repeat center center/contain;
}
#option-jcomlinkmini .about-jcomlinkmini-right::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  top: calc(50% - 15px);
  bottom: 0;
  right: -15px;
  background: url(/service/net/option/linkmini/images/icn-arrow.svg) no-repeat center center/contain;
}

@media screen and (max-width: 767px) {
#option-jcomlinkmini .about-jcomlinkmini .about-jcomlinkmini-img {
  display: block;
  height: auto;
  text-align: center;
}
#option-jcomlinkmini .about-jcomlinkmini .about-jcomlinkmini-img img {
  width: 100%;
  max-width: 500px;
}
#option-jcomlinkmini .about-jcomlinkmini .about-jcomlinkmini-logo {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
}
#option-jcomlinkmini .about-jcomlinkmini .about-jcomlinkmini-logo img {
  display: block;
  width: 45%;
}
#option-jcomlinkmini .about-jcomlinkmini p.about-jcomlinkmini-or {
  width: 10%;
  font-size: 16px;
}
#option-jcomlinkmini .about-jcomlinkmini-plus,
#option-jcomlinkmini .about-jcomlinkmini-right {
  padding-bottom: 50px;
}
#option-jcomlinkmini .about-jcomlinkmini-plus::after {
  top: auto;
  bottom: 0;
  right: calc(50% - 15px);
}
#option-jcomlinkmini .about-jcomlinkmini-right::after {
  top: auto;
  bottom: 0;
  right: calc(50% - 15px);
  transform:rotate(90deg);
}
}


#option-jcomlinkmini .pricecheck {
  width: 200px;
  padding: 10px;
  margin: 0 auto 50px;
  background: #F5D200;
  position: relative;
  font-weight: bold;
  text-align: center;
}
#option-jcomlinkmini .pricecheck::after {
  position: absolute;
  content: "";
  width: 200px;
  height: 20px;
  bottom: -20px;
  right: 0;
  border-style: solid;
  border-width: 20px 100px 0 100px;
  border-color: #F5D200 transparent transparent transparent;
}

/* 20230815追加 */
.image-table .border-bot-normal {
  border-bottom: 2px solid #E2E2E2;
}
.image-table .border-bot-dot {
  border-bottom: 1px dotted #E2E2E2;
}
.image-table-label {
  position: relative;
  display: inline-block;
  width: 36%;
  text-align: center;
  padding: 8px 0;
  margin: 0 12px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid rgb(208, 208, 208);
  border-radius: 4px;
  z-index: 2;
  background: rgb(255, 242, 240);
}

.image-table-01 {
  position: relative;
}
.image-table-01::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 83%;
  background: rgb(226, 226, 226);
  left: 10.4%;
  top: 60%;
  z-index: 0;
}

.scroll-hint-icon-wrap.is-active {
  z-index: 3;
}

@media screen and (max-width: 767px) {
  .scrollable-content > * {
    min-height: auto
  }

  .image-table-label {
    width: 28%;
    font-size: 10px;
  }

  .image-table-01::after {
    left: 8.6%;
  }
}