@charset "utf-8";
/* common style
-------------------------------------------------------------- */
/* tab */

@media (width <= 1200px) {
  .planSection .tabNav li {
    padding: 0 3.5rem;
    font-size: 1.4rem;
    white-space: normal;
  }
}

@media (width <= 960px) {
  .planSection .tabNav li {
    padding: 0 1rem;
  }

  .tabNav li::after {
    content: none;
  }
}
@media (width <= 767px) {
  .planSection .tabNav li {
    padding: 0 .3rem;
    font-size: 1.3rem;
    letter-spacing: 0;
  }
}

/* planIntro
-------------------------------------------------------------- */
.planIntro {
  padding: 15rem 0;
  text-align: center;
  letter-spacing: .1rem;
}

.planIntroLead {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.9;
}

.planIntroNote {
  margin-top: 1rem;
  font-weight: 500;
}

@media (width <= 767px) {
  .planIntro {
    padding: 3rem 0 4rem;
  }

  .planIntroLead {
    font-size: 2rem;
    line-height: 1.7;
  }

  .planIntroNote {
    padding-top: 2rem;
    font-size: 1.6rem;
  }
}

/* planCards
-------------------------------------------------------------- */
.planCards {
  justify-content: space-between;
  margin-top: 6rem;
  gap: 2rem;
}

.planCard {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: calc((100% - 4rem) / 3);
  border: 1px solid var(--tabColor);
  border-radius: 10px;
}

.planCard--jrg {
  --tabColor: var(--green);
}

.planCard--jplus {
  --tabColor: var(--planBlue);
}

.planCard--jpartner {
  --tabColor: var(--planRed);
}

.planCardHead {
  padding: 2rem 1rem;
  background-color: var(--tabColor);
  color: var(--white);
  text-align: center;
  line-height: 1.4;
}

.planCardHead .jp {
  display: block;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: .1rem;
}

.planCardHead .sub {
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
}

.planCardBody {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 4rem;
  letter-spacing: 0;
}

.planCardTxt {
  text-align: left;
  line-height: 2;
}

.planCardAnnotation {
  display: inline-block;
  padding-bottom: 1.5rem;
  color: var(--tabColor);
  text-decoration: underline;
  text-underline-offset: .5rem;
}

.btnMore.down a::after {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url(../img/common/arrarrow_d_grow_r_gr.svg) no-repeat center / contain;
  mask: url(../img/common/arrow_d_gr.svg) no-repeat center / contain;
}

.planCard--jplus .btnMore.down a::after {
  -webkit-mask-image: url(../img/common/arrow_d_bl.svg);
  mask-image: url(../img/common/arrow_d_bl.svg);
}

.planCard--jpartner .btnMore.down a::after {
  -webkit-mask-image: url(../img/common/arrow_d_rd.svg);
  mask-image: url(../img/common/arrow_d_rd.svg);
}

@media (width <= 960px) {
  .planCard {
    width: calc((100% - 2.4rem) / 2);
  }

  .planCard:last-child {
    width: 100%;
  }
}

@media (width <= 767px) {
  .planCards {
    margin-top: 5rem;
    gap: 2rem;
  }

  .planCard,
  .planCard:last-child {
    width: 100%;
  }

  .planCardHead {
    padding: 1.2rem;
  }

  .planCardHead .jp {
    display: inline-block;
    font-size: 2rem;
  }

  .planCardHead .sub {
    display: inline-block;
    font-size: 1.6rem;
  }

  .planCardBody {
    padding: 2rem;
    font-size: 1.5rem;
  }

  .planCardTxt {
    padding-bottom: 1rem;
  }

  .planCardAnnotation {
    margin-left: 1.5rem;
    text-indent: -1.5rem;
  }
}

/* planSection（プラン詳細セクション共通／色はここで一括切替）
-------------------------------------------------------------- */
.planSection {
  padding: 6rem 0;
  scroll-margin-top: var(--headerHeight, 96px);
}

.planSection--jrg {
  --tabColor: var(--green);
}

.planSection--jplus {
  --tabColor: var(--planBlue);
}

.planSection--jpartner {
  margin-bottom: 10rem;
  --tabColor: var(--planRed);
}

.planSectionTtl {
  margin-bottom: 4rem;
  color: var(--tabColor);
  text-align: center;
  font-size: 3.8rem;
  font-weight: 700;
  letter-spacing: .1rem;
}

.planSection .tabNav {
  gap: .5rem;
}

.planSection .tabNav li {
  width: calc((100% - 1.5rem) / 4);
  min-width: auto;
}

.planPanel {
  box-sizing: border-box;
  padding: 7rem 5rem;
  border: 1px solid var(--tabColor);
  border-top: none;
  border-radius: 0 0 10px 10px;
}

.planPanel--center {
  text-align: center;
}

.planPanelLead {
  margin-bottom: 3rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.9;
  text-align: center;
}

.planPanelNote {
  display: inline-block;
  margin-top: .5rem;
  color: var(--tabColor);
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .8rem;
}

.planPanelAnnotation {
  margin: 3rem auto 0;
  max-width: 1040px;
  line-height: 1.9;
}

.btnMore.wide a {
  margin: 5rem auto 0;
  max-width: 500px;
  aspect-ratio: 500 / 60;
}

@media (width <= 767px) {
  .planSection {
    margin-bottom: 5rem;
    padding: 4rem 0;
  }

  .planSectionTtl {
    margin-bottom: 3rem;
    font-size: 3rem;
    line-height: 1.5;
  }

  .planPanel {
    padding: 2.5rem 1.5rem 3rem;
  }

  .planPanelLead {
    text-align: left;
  }

  .planPanelLead span {
    margin-left: 1.5rem;
    text-indent: -1.5rem;
  }

  .btnMore.wide a {
    margin: 2rem auto 0;
    aspect-ratio: 300 / 60;
    text-align: center;
  }

  .btnMore.wide a span {
    font-size: 1.4rem;
    line-height: 1.4;
  }
}

/* planTable（商品概要：dt/ddの明細）
-------------------------------------------------------------- */
.planTableRow {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  padding: 4rem 0;
  border-bottom: 1px solid var(--lightGreen);
  letter-spacing: .1rem;
}

.planTableRow:last-of-type {
  padding-bottom: 0;
  border: none;
}
.planTableRow dt {
  flex-shrink: 0;
  padding: 0 4rem;
  width: 22rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.planTableRow dd {
  flex: 1;
  min-width: 0;
  line-height: 1.8;
}

@media (width >= 768px) {
  .planTableRow.planTableRow--height dd {
    margin-top: -1.5rem;
  }
}

.planTableNum {
  font-size: 2.8rem;
  font-weight: 600;
}

.planList li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.9;
}

.planList li::before {
  position: absolute;
  top: 1.1rem;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--tabColor);
  content: "";
}

@media (width <= 767px) {
  .planTableRow {
    padding: 3rem 0;
  }

  .planTableRow dt {
    padding: 0 1rem;
    width: 100%;
  }

  .planTableRow dd {
    padding: 0 1rem;
    width: 100%;
    font-size: 1.6rem;
  }
}

/* planFlow（契約形態：凡例＋契約関係図）
-------------------------------------------------------------- */
.planFlow {
  margin: auto;
  justify-content: space-between;
  align-items: center;
  gap: 5rem;
  max-width: 1042px;
}

.planFlowList {
  gap: .5rem 2rem;
  width: calc(100% - 182px - 5rem)
}

.planFlowList li {
  position: relative;
  padding-left: 1.8rem;
}

.planFlowList li span {
  position: absolute;
  top: 0;
  left: 0;
}
.planFlowList li.num1 {
  order: 1;
}

.planFlowList li.num2 {
  order: 3;
}

.planFlowList li.num3 {
  order: 2;
}

.planFlowList li.num4 {
  order: 4;
}

.planFlowNote {
  width: 182px;
  text-align: right;
}

.planFlowNote img {
  width: 182px;
}

.planFlowImg {
 text-align: center;
}

@media (width <= 1200px) {
  .planFlowList li {
    width: 100%;
    font-size: 1.6rem;
  }

  .planFlowList li.num2 {
    order: 2;
  }

  .planFlowList li.num3 {
    order: 3;
  }
}
@media (width <= 767px) {
  .planFlow {
    gap: 3rem;
  }

  .planFlowList {
    width: 100%;
  }

  .planFlowNote {
    width: 100%;
  }

  .planFlowNote img {
    width: 100%;
  }
}

/* stepFlow（滞納発生時の流れ：STEP1〜3）
-------------------------------------------------------------- */
.stepFlow {
  margin: auto;
  max-width: 1040px;
}
.stepFlowItem {
  display: flex;
  align-items: stretch;
  gap: 3rem;
  margin-bottom: -2.5rem;
}

.stepFlowItem:last-child {
  margin-bottom: 0;
}

.stepFlowItem:last-child p {
  padding-top: 2rem;
}
.stepFlowLabel {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 18rem;
  color: var(--baseBlack);
  text-align: center;
}

.stepFlowLabel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--stepColor, var(--tabColor));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  content: "";
}

.stepFlowItem:nth-child(1) .stepFlowLabel::before {
  -webkit-mask-image: url(../img/service/step01_bg.svg);
  mask-image: url(../img/service/step01_bg.svg);
}

.stepFlowItem:nth-child(2) .stepFlowLabel::before {
  -webkit-mask-image: url(../img/service/step02_bg.svg);
  mask-image: url(../img/service/step02_bg.svg);
}

.stepFlowItem:nth-child(3) .stepFlowLabel::before {
  -webkit-mask-image: url(../img/service/step03_bg.svg);
  mask-image: url(../img/service/step03_bg.svg);
}

.stepFlowItem:nth-child(1) .stepFlowLabel {
  aspect-ratio: 180 / 164;
}

.stepFlowItem:nth-child(2) .stepFlowLabel {
  aspect-ratio: 180 / 199;
}

.stepFlowItem:nth-child(3) .stepFlowLabel {
  padding-top: 3rem;
  aspect-ratio: 180 / 164;
}

.planSection--jrg .stepFlowItem:nth-child(1) .stepFlowLabel {
  --stepColor: #D7E4DF;
}

.planSection--jrg .stepFlowItem:nth-child(2) .stepFlowLabel {
  --stepColor: #B8D9CC;
  aspect-ratio: 180 / 199;
}

.planSection--jrg .stepFlowItem:nth-child(3) .stepFlowLabel {
  padding-top: 3rem;
  --stepColor: #93D0B9;
  aspect-ratio: 180 / 164;
}

.planSection--jplus .stepFlowItem:nth-child(1) .stepFlowLabel {
  --stepColor: #D4E4ED;
}

.planSection--jplus .stepFlowItem:nth-child(2) .stepFlowLabel {
  --stepColor: #AED2E4;
}

.planSection--jplus .stepFlowItem:nth-child(3) .stepFlowLabel {
  --stepColor: #93BED4;
}

.planSection--jpartner .stepFlowItem:nth-child(1) .stepFlowLabel {
  --stepColor: #F0D8D7;
}

.planSection--jpartner .stepFlowItem:nth-child(2) .stepFlowLabel {
  --stepColor: #EDBBB9;
}

.planSection--jpartner .stepFlowItem:nth-child(3) .stepFlowLabel {
  --stepColor: #E59E9B;
}

.stepFlowNum {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .1rem;
  line-height: 1;
}

.stepFlowNum em {
  font-style: normal;
  font-size: 2.8rem;
  line-height: 1;
}

.stepFlowTtl {
  font-size: 1.8rem;
  font-weight: 700;
}

.stepFlowTxt {
  display: flex;
  align-items: center;
  line-height: 1.9;
}

.stepFlowTxt span {
  text-decoration: none;
  font-weight: 400;
}

.planPanelAnnotation span {
  text-decoration: none;
}

.planSection--jplus .stepFlowItem:nth-child(3) .stepFlowTxt p {
  padding-top: 3rem;
}

@media (width <= 960px) {
  .stepFlowItem {
    margin-bottom: 0;
    gap: 2rem;
  }

  .stepFlowLabel {
    width: 11rem;
  }

  .stepFlowNum {
    font-size: 1.6rem;
  }

  .stepFlowNum em {
    font-size: 2.4rem;
  }

  .stepFlowTtl {
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .stepFlowTxt {
    font-size: 1.4rem;
    line-height: 1.7
  }

  .stepFlowTxt span {
    margin-top: 0;
    font-size: 1.3rem;
  }
}
@media (width <= 767px) {
  .stepFlowItem {
    flex-wrap: wrap;
    gap: 0;
  }

  .stepFlowItem:not(:last-child) {
    margin-bottom: 2rem;
  }

  .stepFlowLabel {
    box-sizing: border-box;
    width: 100%;
    padding: 1.2rem 0;
    border-radius: 8px 8px 0 0;
  }

  .stepFlowItem:nth-child(1) .stepFlowLabel,
  .stepFlowItem:nth-child(2) .stepFlowLabel,
  .stepFlowItem:nth-child(3) .stepFlowLabel,
  .planSection--jrg .stepFlowItem:nth-child(1) .stepFlowLabel,
  .planSection--jrg .stepFlowItem:nth-child(2) .stepFlowLabel,
  .planSection--jrg .stepFlowItem:nth-child(3) .stepFlowLabel,
  .planSection--jplus .stepFlowItem:nth-child(1) .stepFlowLabel,
  .planSection--jplus .stepFlowItem:nth-child(2) .stepFlowLabel,
  .planSection--jplus .stepFlowItem:nth-child(3) .stepFlowLabel,
  .planSection--jpartner .stepFlowItem:nth-child(1) .stepFlowLabel,
  .planSection--jpartner .stepFlowItem:nth-child(2) .stepFlowLabel,
  .planSection--jpartner .stepFlowItem:nth-child(3) .stepFlowLabel {
    padding-top: .1rem;
    aspect-ratio: 310 / 84;
  }

  .stepFlowItem:nth-child(1) .stepFlowLabel::before,
  .stepFlowItem:nth-child(2) .stepFlowLabel::before,
  .stepFlowItem:nth-child(3) .stepFlowLabel::before {
    -webkit-mask-image: url(../img/service/step_bg_sp.svg);
    mask-image: url(../img/service/step_bg_sp.svg);
  }

  .stepFlowNum {
    font-size: 1.8rem;
  }

  .stepFlowNum em {
    font-size: 3rem;
  }

  .stepFlowTtl {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .stepFlowTxt {
    width: 100%;
    padding: 1.5rem 0;
    font-size: 1.6rem;
  }

  .stepFlowTxt span {
    font-size: 1.6rem;
  }

  .stepFlow + .planPanelAnnotation {
    text-indent: -1.5rem;
    margin-left: 1.5rem;
    font-size: 1.6rem;
  }
}

/* planContact（この商品に関するお問合せ先）
-------------------------------------------------------------- */
.planContactCompany {
  color: var(--baseBlack);
  font-size: 2rem;
  font-weight: 600;
}

.planContactTel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.5rem;
  line-height: 1;
}

.icoTel {
  display: inline-block;
  margin-top: .5rem;
  width: 2.8rem;
}

.icoTel img {
  width: 50px;
}

.planContactTel a {
  color: var(--tabColor);
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: .5rem;
  white-space: nowrap;
}

.planContactTime {
  margin-top: 1rem;
}

.planContactAnnotation {
  margin-top: 1rem;
  color: var(--tabColor);
}

.planContactDesc {
  margin: 4rem 0;
  line-height: 1.9;
}

@media (width <= 767px) {
  .planContactCompany {
    font-size: 1.6rem;
  }

  .icoTel {
    width: 2.4rem;
  }
  
  .planContactTel a {
    font-size: 4rem;
    letter-spacing: .2rem;
  }

  .planContactTime,
  .planContactAnnotation {
    font-size: 1.6rem;
  }

  .planContactDesc {
    margin: 4rem 0 0;
    font-size: 1.6rem;
    text-align: left;
  }
}