@charset "utf-8";
:root {
  /** 色:ブルーグレー **/
  --bluegray-06: #404144;
  --bluegray-05: #5d5e62;
  --bluegray-04: #acaeb8;
  --bluegray-03: #c9ccd5;
  --bluegray-02: #e2e4e9;
  --bluegray-01: #f6f7f8;
  --bluegray-00: #fff;
  /** 色:ブルー **/
  --gas_blue-06: #265c99;
  --gas_blue-05---bland: #2f6db6;
  --gas_blue-04: #5391d9;
  --gas_blue-03: #b0d0f3;
  --gas_blue-02: #d6e9fd;
  --gas_blue-01: #edf5fe;
  /** 色:スカイブルー **/
  --skyblue-06: #0083b4;
  --skyblue-05: #02a7dd;
  --skyblue-04: #3ac8f6;
  --skyblue-03: #7cd8f9;
  --skyblue-02: #bbeafc;
  --skyblue-01: #eaf8ff;
  /** 色:グリーン **/
  --green-06: #1c6d46;
  --green-05: #0d9357;
  --green-04: #20aa6c;
  --green-03: #7fe0a5;
  --green-02: #cbf2da;
  --green-01: #e5fbed;
  /** 色:ライトグリーン **/
  --lightgreen-06: #52842c;
  --lightgreen-05: #6faf33;
  --lightgreen-04: #89c259;
  --lightgreen-03: #bce695;
  --lightgreen-02: #def2c8;
  --lightgreen-01: #ecf9db;
  /** 色:オレンジ **/
  --orange-06: #d05a0b;
  --orange-05: #ec711d;
  --orange-04: #f09557;
  --orange-03: #f7b385;
  --orange-02: #ffd8bc;
  --orange-01: #fff3ea;
  /** 色:イエロー **/
  --yellow-06: #e4bb00;
  --yellow-05: #ffd43a;
  --yellow-04: #fd6;
  --yellow-03: #ffe899;
  --yellow-02: #fff3bf;
  --yellow-01: #fffae5;
  /** 色:レッド **/
  --red-06: #a7071c;
  --red-05: #c1303a;
  --red-04: #e06365;
  --red-03: #f2a2a2;
  --red-02: #fbd7d7;
  --red-01: #faeff1;
  /** 色:ピンク **/
  --pink-06: #a30057;
  --pink-05: #d82682;
  --pink-04: #f87cb1;
  --pink-03: #fabad2;
  --pink-02: #ffe0ef;
  --pink-01: #ffeff6;
  /** 色:ツートンカラー **/
  --duo-tone-blue-orange: linear-gradient(270deg, #f78131 50%, #2f6db6 50%);
  --duo-tone-white-orange: linear-gradient(90deg, #fff 50%, #f78131 50%);
  /** 色:テキスト **/
  --Text-text_primary: var(--bluegray-06);
  --Text-text_secondary: var(--bluegray-05);
  --Text-text_light: var(--bluegray-03);
  --Text-text_white: var(--bluegray-00);
  --Text-text_blue: var(--gas_blue-05---bland);
  --Text-text_skyblue: var(--skyblue-05);
  --Text-text_orange: var(--orange-05);
  --Text-text_yellow: var(--yellow-05);
  --Text-text_red: var(--red-05);
  --Text-text_green: var(--green-05);
  /** 背景色 ブルーグレー **/
  --Fill-Bluegray-bluegray_06: var(--bluegray-06);
  --Fill-Bluegray-bluegray_05: var(--bluegray-05);
  --Fill-Bluegray-bluegray_04: var(--bluegray-04);
  --Fill-Bluegray-bluegray_03: var(--bluegray-03);
  --Fill-Bluegray-bluegray_02: var(--bluegray-02);
  --Fill-Bluegray-bluegray_01: var(--bluegray-01);
  --Fill-Bluegray-bluegray_00: var(--bluegray-00);
  /** 背景色 ブルー **/
  --Fill-Blue-blue_06: var(--gas_blue-06);
  --Fill-Blue-blue_05---bland: var(--gas_blue-05---bland);
  --Fill-Blue-blue_04---bland: var(--gas_blue-04);
  --Fill-Blue-blue_04---hover: var(--gas_blue-04);
  --Fill-Blue-blue_03: var(--gas_blue-03);
  --Fill-Blue-blue_02: var(--gas_blue-02);
  --Fill-Blue-blue_01: var(--gas_blue-01);
  /** 背景色 スカイブルー **/
  --Fill-skyblue-skyblue_05: var(--skyblue-05);
  --Fill-skyblue-skyblue_04: var(--skyblue-04);
  --Fill-skyblue-skyblue_01: var(--skyblue-01);
  /** 背景色 レッド **/
  --Fill-Red-red_05: var(--red-05);
  --Fill-Red-red_04: var(--red-04);
  --Fill-Red-red_02: var(--red-02);
  --Fill-Red-red_01: var(--red-01);
  /** 背景色 オレンジ **/
  --Fill-Orange-orange_05: var(--orange-05);
  --Fill-Orange-orange_04---hover: var(--orange-04);
  --Fill-Orange-orange_02: var(--orange-02);
  --Fill-Orange-orange_01: var(--orange-01);
  /** 背景色 イエロー **/
  --Fill-Yellow-yellow_05: var(--yellow-05);
  --Fill-Yellow-yellow_01: var(--yellow-01);
  /** 背景色 ピンク **/
  --Fill-pink-pink_05: var(--pink-05);
  --Fill-pink-pink_01: var(--pink-01);
  /** 背景色 グリーン **/
  --Fill-Green-green_05: var(--green-05);
  --Fill-Green-green_04: var(--green-04);
  --Fill-Green-green_01: var(--green-01);
  /** ボーダーカラー **/
  --Border-border_lightgray: var(--bluegray-02);
  --Border-border_gray: var(--bluegray-03);
  --Border-border_white: var(--bluegray-00);
  --Border-border_blue: var(--gas_blue-05---bland);
  --Border-border_skyblue: var(--skyblue-05);
  --Border-border_red: var(--red-05);
  --Border-border_yellow: var(--yellow-05);
}
:root {
  --plan-details-bg: #003f98;
  --plan-details-color: #003f98;
}

/* common.css */
/* .label-sausage-border-dot */
.is-wifimax .label-sausage-border-dot .label-sausage-blue,
.is-wifimax .label-sausage-border-dot-pc .label-sausage-blue {
  position: relative;
  left: 50%;
  margin-left: 0;
}

/* box-content */
[class*="column-"] .box-heading-content-small {
  height: 100%;
}

@media (max-width: 768px){
  /* parts-flex */
  .parts-flex.sp-column {
    flex-direction: column;
  }
}

/* style.css */
img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* font size */
.fz-smaller {
  font-size: 0.6em;
}

/* grid */
.grid-mc {
  display: grid;
  grid-template-rows: min-content;
}
.gc-full {
  grid-column: 1 / -1;
}
.jc-sa {
  justify-content: space-around;
}

/* l-plan_details-banner */
.l-plan_details-banner {
  display: grid;
  place-items: center;
  padding: 20px 12px;
  background-color: var(--plan-details-bg);
}
.l-plan_details-banner-text {
  margin-bottom: 12px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bluegray-00);
  text-align: center;
}
.l-plan_details-banner-image {
  margin-bottom: 20px;
}
.l-plan_details-banner-image img {
  display: block;
  width: auto;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.l-plan_details-banner-labels {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.l-plan_details-banner-labels li {
  padding: 2px 16px 3px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.5;
  color: var(--plan-details-color);
  text-align: center;
  background-color: var(--bluegray-00);
  border-radius: calc(infinity * 1px);
}

/* c-heading */
.c-heading {
  margin-bottom: 40px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.25;
  color: var(--Text-text_blue);
  text-align: center;
}
.c-heading img {
  font-size: 0;
  line-height: 0;
  margin-inline: 10px;
  width: auto;
  height: auto;
  max-height: auto;
}
.c-heading .underline {
  background: linear-gradient(transparent 75%, var(--Border-border_yellow) 75%, var(--Border-border_yellow) 90%, transparent 90%);
}
.c-heading .underline-small {
  background: linear-gradient(transparent calc(90% - 0.6rem), var(--Border-border_yellow) calc(90% - 0.6rem), var(--Border-border_yellow) 90%, transparent 90%);
}
.c-heading .large {
  display: inline;
  margin-top: 4px;
  font-size: 3.8rem;
  line-height: 1.1;
  color: var(--Text-text_orange);
}

/* bubble */
.c-bubble {
  position: relative;
  padding: 2px 16px 4px;
  margin-bottom: 12px;
  font-size: 1.8rem;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  font-weight: 700;
  line-height: 1.4;
  color: var(--Text-text_blue);
  background: var(--Fill-Yellow-yellow_05);
  border-radius: 40px;
}
.c-bubble::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  border: 8px solid transparent;
  border-top-color: var(--Fill-Yellow-yellow_05);
  transform: translateX(-50%);
}

/* l-productconds */
.l-productconds {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-start;
  align-items: flex-start;
}
.l-productconds_icon {
  width: 82px;
  aspect-ratio: 1;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: bold;
  border-radius: 4px;
  border: solid 1px #332b36;
  position: relative;
  overflow: hidden;
}
.l-productconds_icon::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: solid 3px #ffffff;
}
.l-productconds_icon.l-productconds_icon-gray {
  color: #332b36;
  background-color: #dcdddd;
}
.l-productconds_icon.l-productconds_icon-blue {
  color: #1e3a93;
  background-color: #dff2fc;
}
.l-productconds_icon.l-productconds_icon-pink {
  color: #e71a36;
  background-color: #fbe6ef;
}
.l-productconds_icon .l-productconds_icon_sup {
  position: absolute;
  top: 5px;
  right: 5px;
}
.l-productconds_icon .l-productconds_icon_sm {
  font-size: 0.7em;
}

/* .c-iframe */
.c-iframe-wrap {
  position: relative;
  width: 100%;
  padding-bottom: calc(100% * (7/9));
}
.c-iframe-wrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (max-width: 768px){
  /* .c-iframe */
  .c-iframe-wrap {
    padding-bottom: calc(100% * (7/4));
  }

  /* l-productconds */
  .l-productconds_icon {
    width: 68px;
    font-size: 1.3rem;
  }
}

@media (min-width: 768px){
  /* font size */
  .fz-70-sm {
    font-size: 7rem!important;
  }
  /* grid */
  .column-3-auto_pc {
    display: grid;
    grid-template-columns: repeat(3, auto);
  }
  /* c-heading */
  .c-heading {
    font-size: 2.8rem;
  }
  .c-heading .large {
    margin-top: 0;
  }

  /* bubble */
  .c-bubble {
    padding: 2px 16px 4px;
    font-size: 2rem;
  }
}

@media (min-width: 1025px){
  /* l-plan_details */
  .l-plan_details-banner {
    padding: 32px 40px;
  }
  .l-plan_details-banner-text {
    margin-bottom: 24px;
    font-size: 2rem;
  }
  .l-plan_details-banner-image {
    margin-bottom: 32px;
  }
  .l-plan_details-banner-labels {
    flex-direction: row;
    gap: 16px;
  }
  .l-plan_details-banner-labels li {
    padding: 3px 16px 4px;
    font-size: 1.6rem;
  }

  /* c-heading */
  .c-heading {
    font-size: 3.2rem;
  }
  .c-heading .large {
    font-size: 4rem;
  }
}