@charset "utf-8";

/* add css this page only */

/* Custom label settings ラベル用追加スタイル */

#contentsContainer .p-pointLabel {
  color: #fff;
  background-color: #d7063b;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 6px;
  font-size: 10px;
  font-weight: bold;
  margin: 0 0.25em;
  padding: 0.5em 1.25em;
  position: relative;
  line-height: 1.0;
  vertical-align: text-bottom;
}

/* 先頭のみ直前のテキストとの間隔を広げる調整 */
#contentsContainer .p-pointLabel:nth-child(1) {
  margin-left: 1.25rem;
}

/* SP用表示では上記調整せず左マージンを取る */
@media screen and (max-width: 768px) {
  #contentsContainer .p-pointLabel:nth-child(1) {
    margin-left: 0;
  }
}

/* 色と背景色 バリエーション */
#contentsContainer .p-pointLabel.p-pointLabel--red {
  background-color: #d7063b;
}

#contentsContainer .p-pointLabel.p-pointLabel--blue {
  background-color: #2b7bb2;
}

#contentsContainer .p-pointLabel.p-pointLabel--black {
  background-color: #333;
}

#contentsContainer .p-pointLabel.p-pointLabel--gray {
  color: #333;
  background-color: #EFF1F2;
}

#contentsContainer .p-pointLabel.p-pointLabel--red--reverse {
  color: #d7063b;
  background-color: #fff;
  border: 2px solid #d7063b;
}

#contentsContainer .p-pointLabel.p-pointLabel--blue--reverse {
  color: #2b7bb2;
  background-color: #fff;
  border: 2px solid #2b7bb2;
}

#contentsContainer .p-pointLabel.p-pointLabel--black--reverse {
  color: #333;
  background-color: #fff;
  border: 2px solid #333;
}

/* 角丸形状 バリエーション */
#contentsContainer .p-pointLabel.p-pointLabel--roundMax {
  border-radius: 100vmax;
}



/* c-iconListBox_list 独自調整（/biz/iijmobile-dk/plan_l/ 端末レンタル料金 で使用） */

#contentsContainer .c-iconListBox_list.p-iconListBox_list--evenly {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

#contentsContainer .c-iconListBox_list.p-iconListBox_list--evenly li {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}



/* 定額プランライト 機能 3つの回線タイプ table 内で使用 */
#contentsContainer .iijmobile-dk-plan_lite .c-table td > .p-typeof3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
#contentsContainer .iijmobile-dk-plan_lite .c-table td > .p-typeof3 > span {
  flex-basis: 50%;
  line-height: 1.0;
}



/* 定額プランライト 「お申し込みの流れ」内、「さらに詳しく」ボタンの位置を左寄せに調整 */
#contentsContainer .iijmobile-dk-plan_lite .c-modalList figure.p-modal_thumbnail-l a {
  margin-inline: 0 auto;
}

/* fix: c-tab-secondary_content 内 .c-ctaBox_btn ボタンが左寄せになるのを修正（display: block → flex ） */
#contentsContainer .iijmobile-dk-plan_lite .c-tab-secondary_content div:not([hidden]) .c-ctaBox_btn {
  display: flex;
}



/* .iijmobile-dk-plan_lite 及び .iijmobile-dk-plan_lite-prepaid 内 .c-numBox 及び .c-numBox_pic と 中の img 調整 （概要 内で使用） */

#contentsContainer .iijmobile-dk-plan_lite .c-numBox,
#contentsContainer .iijmobile-dk-plan_lite-prepaid .c-numBox {
  margin-inline: auto;
  /* max-width: 75%; */
}

#contentsContainer .iijmobile-dk-plan_lite .c-numBox .c-numBox_pic,
#contentsContainer .iijmobile-dk-plan_lite-prepaid .c-numBox .c-numBox_pic {
  text-align: center;
}

#contentsContainer .iijmobile-dk-plan_lite .c-numBox .c-numBox_pic img,
#contentsContainer .iijmobile-dk-plan_lite-prepaid .c-numBox .c-numBox_pic img {
  width: auto;
  max-width: 100%;
}




/* iijmobile-dk-plan_lite 内、IIJmio国際電話 .p-mioApp-wrapper */

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper {
  position: relative;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-app_com {
  width: fit-content;
  margin-inline: auto;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-app_com span {
  position: relative;
  color: #ffff66;
  background-color: #e64d97;
  font-size: 16px;
  padding: 4px 16px;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-app_com span::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: -6px;
  left: calc(100% - 50% - 7px);
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: #e64d97 transparent transparent transparent;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-app_com+.c-sec_lead {
  margin-top: 24px;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appImages {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  justify-content: space-evenly;
}

/* アプリをダウンロード */
#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownload .app_dl {
  padding: 24px;
  background: #fff;
  border: 2px solid #dadde0;
  border-radius: 8px;
  max-width: 800px;
  margin-inline: auto;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownload h3 {
  font-size: 18px;
  text-align: center;
  color: #d55a95;
  font-weight: bold;
  letter-spacing: 0.2rem;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems .dl_box {
  display: flex;
  margin-top: 24px;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  padding: 24px;
  gap: 24px;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems .dl_box+.dl_box {
  border-left: 1px solid #dadde0;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems .dl_box .dl_qr img {
  width: 80px;
  height: 80px;
}


#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems .dl_box .dl_link {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems .dl_box h4.dl_dev {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

#contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems .dl_box .dl_link img {
  height: 40px;
  vertical-align: bottom;
}

/* a要素内の画像リンクが別ウィンドウで開く際、別ウィンドウのアイコンがつくのを避ける対処（暫定） */
#contentsContainer .iijmobile-dk-plan_lite a.-notIcon img + i {
  display: none !important;
}

@media only screen and (max-width: 768px) {

  #contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  #contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems .dl_box {
    display: flex;
    margin-top: 24px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    gap: 24px;
  }

  #contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems .dl_box .dl_qr img {
    width: auto;
    height: auto;
    max-width: 100%;
  }

  #contentsContainer .iijmobile-dk-plan_lite .p-mioApp-wrapper .p-mioApp-appDownloadItems .dl_box+.dl_box {
    border-left: 0;
  }

}



/* .iijmobile-dk-plan_lite-prepaid 内 .c-card_list.c-card_list--thumbnail 中央寄せ（/biz/iijmobile-dk/plan_lite/prepaid.html 料金 内で使用） */

#contentsContainer .iijmobile-dk-plan_lite-prepaid .c-card_list.c-card_list--thumbnail li.c-card_banner {
  margin-inline: auto;
}

/* .iijmobile-dk-plan_lite-prepaid 内 .p-withimg img ロゴ （/biz/iijmobile-dk/plan_lite/prepaid.html 料金 内で使用） */

#contentsContainer .iijmobile-dk-plan_lite-prepaid .p-withimg img {
  border: 2px solid #DADDE0;
}

#contentsContainer .iijmobile-dk-plan_lite-prepaid .c-card_banner>:not(a) {
  background: #fff;
  border: 2px solid #DADDE0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 134px;
  padding: 28px 32px;
  position: relative;
  height: 100%;
}

#contentsContainer .iijmobile-dk-plan_lite-prepaid .c-card_banner.c-card_banner--hasPic img {
  width: fit-content;
  height: auto;
  aspect-ratio: auto;
}

@media screen and (max-width: 768px) {
  #contentsContainer .iijmobile-dk-plan_lite-prepaid .c-card_banner>:not(a) {
    padding: 18px 20px;
    min-height: auto;
  }
}


/* .iijmobile-dk-mio_biz-prepaid 内 導入ガイド STEP～ 画像用 */

#contentsContainer .iijmobile-dk-mio_biz-prepaid #anc-04 .c-paragraphBox__thumbnail img {
  border: 2px solid #DADDE0;
}



/* table colgroup col 表のセル幅指定用 */

#contentsContainer .c-table col.p-width-auto {
  width: auto !important;
}

#contentsContainer .c-table col.p-width-w75 {
  width: 75% !important;
}

#contentsContainer .c-table col.p-width-w70 {
  width: 70% !important;
}

#contentsContainer .c-table col.p-width-w50 {
  width: 50% !important;
}

#contentsContainer .c-table col.p-width-w45 {
  width: 45% !important;
}

#contentsContainer .c-table col.p-width-w35 {
  width: 35% !important;
}

#contentsContainer .c-table col.p-width-w30 {
  width: 30% !important;
}

#contentsContainer .c-table col.p-width-w28 {
  width: 28% !important;
}

#contentsContainer .c-table col.p-width-w25 {
  width: 25% !important;
}

#contentsContainer .c-table col.p-width-w22 {
  width: 22% !important;
}

#contentsContainer .c-table col.p-width-w20 {
  width: 20% !important;
}

#contentsContainer .c-table col.p-width-w18 {
  width: 18% !important;
}

#contentsContainer .c-table col.p-width-w14 {
  width: 14% !important;
}

#contentsContainer .c-table col.p-width-w10 {
  width: 10% !important;
}