@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@700&display=swap");

/* mobileFirst スマホからコーディング */
* {
  box-sizing: border-box;
}

:root {
  --Warning-Warning_500: #FF9540;
}

small {
  font-size: 80%;
}

body {
  font-size: 14px;
  color: var(--black);
  font-family: "Noto Sans JP", sans-serif;
}

p {
  line-height: 1.7;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

footer#footer {
  padding-bottom: 0;
}
.annotation{
  font-size: 12px;
}
#deviceChange .devicelist {
  width: 100%;
}

#deviceChange .devicelist_btn {
  width: 100%;
  display: flex;
  gap: 16px;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

#deviceChange .devicelist_box {
  display: none;
  height: 600px;
  overflow: scroll;
  background: var(--white);
  border-radius: 8px;
  padding: 24px;
}

#deviceChange .devicelist_box dt {
  font-size: 18px;
  font-weight: bold;
  border-bottom: var(--black) solid 3px;
  padding-bottom: 4px;
  margin-bottom: 12px;
  width: 100%;
}

#deviceChange .devicelist_box dd {
  margin-bottom: 24px;
}

#deviceChange .devicelist_box #smartphoneList {
  background: transparent;
  padding: 8px 0 32px;
}

#deviceChange .devicelist_box #smartphoneList .carrier-section {
  padding: 0;
}

#deviceChange .devicelist_box #smartphoneList .brand-section {
  gap: 24px;
}

#deviceChange .devicelist_box h3.carrier-title {
  gap: 8px;
}

@media (max-width: 767px) {
  #deviceChange>.text {
    width: 255px;
    margin: 0;
  }

  #deviceChange>.text::after, #deviceChange>.text::before {
    background-size: cover;
    width: 36px;
    height: 30px;
  }

  #deviceChange .attention {
    width: 100%;
    max-width: 400px;
    flex-direction: column;
    padding: 24px 16px;
    text-align: center;
  }

  #deviceChange .attention h2 {
    line-height: 1.4;
  }

  #deviceChange .attention h2 span {
    font-size: 14px;
    margin-bottom: 4px;
  }

  #deviceChange .devicelist_btn {
    font-size: 16px;
    padding: 0;
  }

  #deviceChange .devicelist_box {
    margin-top: 16px;
    height: 400px;
  }
}

#deviceChange .accordion {
  color: var(--primary);
  font-weight: bold;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 24px 12px;
  font-size: 18px;
  transition: 0.3s;
}

#deviceChange .accordion::after {
  font-family: "FontAwesome";
  content: "\f105";
  font-size: 1.7em;
  transform: rotate(90deg);
  display: block;
  transition: 0.3s;
}

#deviceChange .accordion.open::after {
  transform: rotate(-90deg);
}

@media (hover: hover) {
  #deviceChange .accordion:hover {
    opacity: 0.5;
  }
}

/* 機種変更してもあんしん
-------------------------------------*/

#relief {
  background: var(--background-blue);
}

#relief .white_box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

#relief .white_box li {
  display: flex;
  padding: 32px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1;
  align-self: stretch;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0px 0px 32px 0px rgba(0, 148, 255, 0.08);
}

#relief .white_box li img {
  height: 120px;
  width: auto;
}

#relief .white_box li h3 {
  font-size: 18px;
  word-break: keep-all;
}

#relief h2 {
  font-size: 28px;
  text-align: center;
  line-height: 1.5;
  color: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  word-break: keep-all;
}

#relief h2 span {
  font-size: 16px;
}

.sec {
  width: 100%;
  padding: 64px 32px;
    margin: 44px 0;
}

.sec_wrap {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* 注釈 */
.annotation {
  font-size: 12px;
  width: 100%;
  margin-top: 8px;
  display: block;
}

.annotation li {
  position: relative;
  padding-left: 16px;
}

.annotation li span {
  position: absolute;
  left: 0;
}

.annotation.num li {
  padding-left: 24px;
}

.plans_feature_box .annotation li {
  padding-left: 24px;
}

@media (max-width: 959px) {
  #relief .white_box {
    gap: 16px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }

  #relief .white_box li {
    padding: 24px 16px;
    font-size: 14px;
    border-radius: 8px;
    gap: 16px;
  }

  #relief .white_box li img {
    height: 80px;
  }

  #relief .white_box li h3 {
    font-size: 18px;
    text-align: center;
    line-height: 1.5;
    margin-top: 8px;
  }
      .sec {
    width: 100%;
    padding: 48px 24px;
  }

  .sec_wrap {
    gap: 32px;
  }
  .annotation {
    font-size: 10px;
  }
}

#relief .text {
  width: 100%;
  max-width: 672px;
  text-align: justify;
}

@media (max-width: 600px) {
  #relief .white_box {
    width: 100%;
    flex-direction: column;
    gap: 16px;
    max-width: 408px;
    margin: 0 auto;
  }

  #relief .white_box li {
    border-radius: 8px;
    padding: 16px 24px;
    gap: 16px;
    box-shadow: 0px 0px 32px 0px rgba(0, 148, 255, 0.15);
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  #relief .white_box li h3 {
    text-align: left;
    font-size: 14px;
    margin-top: 0;
  }

  #relief .white_box li img {
    height: auto;
    width: 40%;
    min-width: 130px;
  }

  #relief .white_box li p {
    display: none;
  }

  #relief .cvButton a {
    font-size: 16px;
    word-break: keep-all;
    padding: 12px 32px;
    line-height: 1.5;
  }

  #relief .text {
    font-size: 14px;
  }
      .sec {
    width: 100%;
    padding: 48px 24px;
  }

  .sec_wrap {
    gap: 32px;
  }
  .annotation {
    font-size: 10px;
  }
}

/************************************
modal
************************************/
body.open_popup {
  overflow: hidden;
}

.bg_onetime_popup {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100002;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
  opacity: 1;
  visibility: visible;
}

.onetime_popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 600px;
  width: 100%;
  padding: 0 16px;
}

.btn_area p {
  padding: 15px;
}

.btn_area button {
  display: block;
  position: absolute;
  top: -64px;
  right: 16px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 12px;
  border-radius: 50px;
  border: none;
}

.btn_area button svg {
  vertical-align: middle;
}

@media (hover:hover) {
  .btn_area button:hover {
    background: rgba(255, 255, 255, 0.5);
  }
}

/************************************
	FV
************************************/
.fv {
  display: flex;
  padding-top: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

h1 {
  color: var(--black);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 48px */
}

.fv_contetns01 {
  display: flex;
  padding-bottom: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.t_orange {
  position: relative;
  display: inline-block;
  color: var(--Warning-Warning_500, #FF9540);
  text-align: center;
  font-size: 28.109px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.t_orange::after,
.t_orange::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 100%;
  border-radius: 10px;
  background-color: var(--Warning-Warning_500);
}

.t_orange::after {
  rotate: 30deg;
  right: -16px;
}

.t_orange::before {
  rotate: -30deg;
  left: -16px;
}

.fv_contetns02 {
  position: relative;
  display: flex;
  padding: 48px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  background: var(--yellow-100, var(--white)ACC);
}

.fv_contetns02::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  margin: auto;
  background: var(--white)fff;
  height: 40px;
  width: 160px;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.fv_contetns02_txt {
  position: relative;
  color: var(--black);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%;
}

.bg_orange {
  padding: 0 3px;
  background-color: var(--Warning-Warning_500);
}
.t_pink{
    font-weight: bold;
    font-size: 22px;
    color: var(--secondary)
}

.t_white {
  font-weight: bold;
  color: var(--white);
}

.fv_contetns02_txt .t_white {
  font-family: "Noto Sans JP";
  font-size: 23px;
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}

/************************************
	タブ切り替えボタン
************************************/
.tabButton_flexbox {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-self: stretch;
  flex-wrap: wrap;
  padding: 0 16px;
  margin: 32px auto 0;
}

.tabButton {
  cursor: pointer;
}

.tabButton_top li.tabButton {
  max-width: 47%;
  width: 100%;
}

.tabButton_top .tabButton a {
  position: relative;
  display: flex;
  width: 100%;
  padding: 24px 12px 38px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  color: var(--primary);
  text-align: center;
  font-size: min(4.1vw, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  border: 2px solid var(--primary);
  background-color: var(--white);
  box-shadow: 0px 0px 8px 0px rgba(0, 118, 177, 0.2);
  transition: 0.3s ease;
  background-position: right 16px top 16px;
  background-size: auto 64px;
  background-repeat: no-repeat;
}

.tabButton_top .tabButton.active a {
  background-color: var(--primary);
  color: var(--white);
}

@media (hover: hover) {
  .tabButton_top .tabButton a:hover {
    background-color: var(--primary);
    color: var(--white);
  }

  .tabButton_top .tabButton a.deviceChange:hover {
    background-image: url(/cancellation/img/retention/tabButton_icon01_active.svg);
  }

  .tabButton_top .tabButton a.otherMimamori:hover {
    background-image: url(/cancellation/img/retention/tabButton_icon02_active.svg);
  }

  .tabButton_top .tabButton a.communication:hover {
    background-image: url(/cancellation/img/retention/tabButton_icon03_active.svg);
  }

  .tabButton_top .tabButton a.point:hover {
    background-image: url(/cancellation/img/retention/tabButton_icon04_active.svg);
  }
}

.tabButton_top .tabButton a.deviceChange {
  background-image: url(/cancellation/img/retention/tabButton_icon01.svg);
}

.tabButton_top .tabButton.active a.deviceChange,
#deviceChange .tabTop_h2 {
  background-image: url(/cancellation/img/retention/tabButton_icon01_active.svg);
}

.tabButton_top .tabButton a.otherMimamori {
  background-image: url(/cancellation/img/retention/tabButton_icon02.svg);
}

.tabButton_top .tabButton.active a.otherMimamori,
#otherMimamori .tabTop_h2 {
  background-image: url(/cancellation/img/retention/tabButton_icon02_active.svg);
}

.tabButton_top .tabButton a.communication {
  background-image: url(/cancellation/img/retention/tabButton_icon03.svg);
}

.tabButton_top .tabButton.active a.communication,
#communication .tabTop_h2 {
  background-image: url(/cancellation/img/retention/tabButton_icon03_active.svg);
}

.tabButton_top .tabButton a.point {
  background-image: url(/cancellation/img/retention/tabButton_icon04.svg);
}

.tabButton_top .tabButton.active a.point,
#point .tabTop_h2 {
  background-image: url(/cancellation/img/retention/tabButton_icon04_active.svg);
}

.tabButton_top .tabButton .arw {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  width: 100%;
  height: 22px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 0px 0px 13px 13px;
  background: var(--primary);
}

/************************************
	タブ切り替えコンテンツ
************************************/
h2 {
  color: var(--black);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 42px */
}

.tabcontents_wappar {
  padding: 56px 0;
  border-bottom: 2px solid var(--neutral-100);
}

.tab_ttl_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabTop_h2 {
  padding: 32px 12px;
  color: var(--white);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  background: var(--primary);
  background-position: right 16px center;
  background-size: auto 84px;
  background-repeat: no-repeat;
}

/************************************
	新しい機種に変更したい
************************************/
.tabcontents {
  margin: 42px auto 0;
  background: var(--white);
}

.tabcontents01 {
  position: relative;
  padding: 56px 16px;
  background: var(--white);
}

.tabcontents01::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  margin: auto;
  background: var(--primary);
  height: 21px;
  width: 86px;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tabcontents01_txt {
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-color: #FFD5B3;
  text-underline-offset: 12px;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

.tabcontents01_txt span {
  color: var(--black);
  font-size: 24px;
}

.ballon_blue_wrap {
  margin: 32px auto 24px;
  text-align: center;
}

.ballon_blue {
  margin-bottom: 4px;
  color: var(--primary);
  text-align: center;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.8px;
}

.ballon_blue span {
  display: block;
}

.ballon_blue .big {
  font-size: 32px;
  line-height: 1.3;
}

.deviceChange_txtbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--black);
  text-align: center;
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  line-height: 200%;
  font-size: 22px;
}

.deviceChange_txtbox .bg_orange {
  font-size: min(8.5vw, 32px);
  font-weight: bold;
}


.deviceChange_txtbox p {
  display: block;
  width: 100%;
}

.ballon_black {
  position: relative;
  display: inline-block;
  line-height: 1.2;
  font-weight: bold;
}

.ballon_black::before {
  rotate: -30deg;
  left: -20px;
}

.ballon_black::after {
  rotate: 30deg;
  right: -20px;
}

.ballon_black::after,
.ballon_black::before {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background-color: var(--black);
}

#deviceChange .tabcontents01_box_blue {
  margin: 16px auto 0;
}

.tabcontents01_box_blue {
  width: 100%;
  border-radius: 16px;
  border: 2px solid var(--Primary-Primary_200, #B3E6FF);
}

.tabcontents01_box_blue .popularity {
  padding: 16px 8px;
  background: var(--background-blue, #ECF9FF);
  color: var(--primary);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  border-radius: 14px 14px 0 0;
}

.underline {
  text-decoration: underline;
}

.colorBlue {
  color: var(--primary);
}

.device_list_button {
  text-align: center;
}

.device_list_button button {
  position: relative;
  min-width: 280px;
  margin: 0 auto;
  border-radius: 200px;
  text-align: center;
  padding: 12px 32px;
  font-weight: bold;
  display: block;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--white);
  background-color: var(--primary);
  border: 2px solid var(--primary);
  box-sizing: border-box;
  line-height: 1.5;
  transition: 0.3s ease;
}

.device_list_button button::before,
.device_list_button button::after {
  content: "";
  position: absolute;
  top: 47%;
  right: 16px;
  width: 13px;
  height: 2px;
  background-color: var(--white);
  transform: translateX(0) translateY(-50%);
  transition: 0.3s ease;
}

.device_list_button button::before {
  transform: translateY(-45%) rotate(90deg);
}

.device_list_button.active button::before {
  transform: translateY(-50%) rotate(0);
}

.device_list_contents {
  display: none;
  margin: 12px auto;
}

.device_list {
  padding: 24px 12px;
  background-color: var(--background-blue, #ECF9FF);
}

.device_list h5 {
  margin: 16px auto 12px;
}

.device_list h5:first-of-type {
  margin: 0 auto 12px;
}

@media (hover: hover) {
  .device_list_button button:hover {
    color: var(--primary);
    background: var(--white);
  }

  .device_list_button button:hover::after,
  .device_list_button button:hover::before {
    background-color: var(--primary);
  }
}

.plan_possible {
  display: none;
}

@media screen and (min-width: 601px) {
  .plan_possible::before {
    border-top: 56px solid var(--white);
    border-right: 300px solid transparent;
    border-left: 300px solid transparent;
  }

  .plan_possible .plan_possible {
    padding: 0 5%;
  }

  .plan_possible .plan_possible ol.annotation {
    width: 100%;
  }
}

/************************************
	splide
************************************/
.splide {
  margin: 32px auto;
}

.splide-dotted.splide-slider {
  margin-bottom: 60px;
}

.splide__list {
  padding: 0 8px;
  width: 100%;
  height: 100%;
}

.splide__slide {
  width: 100%;
  height: 100%;
  padding: 16px 8px;
  border-radius: 5px;
  background: var(--white);
  text-align: center;
}

.splide_list_item img {
  margin: 10px auto;
}

.splide_list_item img {
  height: 110px;
}

.splide_list h4 {
  font-size: 14px;
}

.splide_list_txt {
  width: 100%;
  padding: 8px 6px;
  border-radius: 8px;
  background: var(--gray01, #F6F6F6);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  /* 18px */
}

.pd_l_16 {
  padding-left: 16px;
}

.pd_r_16 {
  padding-right: 16px;
}

.splide__pagination {
  bottom: -16px;
}

.splide__pagination__page.is-active {
  opacity: 1;
  background-color: var(--primary);
  transform: none;
}

.splide__pagination__page {
  margin: 3px 8px;
  width: 10px;
  height: 10px;
}

/************************************
	おトクなキャンペーン
************************************/
.tabcontents02.apd2024 {
  padding: 0 16px;
}

.apd2024 h2 {
  padding: 16px 0px 24px;
  background: var(--secondary);
  color: var(--white);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
  border-radius: 16px 16px 0 0;
}

.apd2024 h2 span {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.apd2024_box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 56px 16px 32px;
  border-radius: 0 0 16px 16px;
  background: var(--Error-Error_50, #FFEFEC);
}

.apd2024_box::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  margin: auto;
  background: var(--secondary);
  height: 21px;
  width: 86px;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.apd2024_box a {
  transition: 0.3s ease;
}

@media (hover: hover) {
  .apd2024_box a:hover {
    opacity: 0.6;
  }
}

/************************************
	TONEファミリーをご契約中のお客様へ
************************************/
.tabcontents03.familyChange {
  padding: 0 16px;
}

.tabcontents03.familyChange {
  display: flex;
  padding: 56px 16px 0;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  box-sizing: border-box;
}

.tabcontents03.familyChange .deviceChange_txtbox .bg_orange {
  font-size: 28px;
}

.tabcontents03.familyChange h2 {
  font-size: 32px;
  text-align: center;
}

.tabcontents03.familyChange .h2_ttl_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.toneFamily_box01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.ballon_white::after,
.ballon_white::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 100%;
  background-color: var(--black);
}

.newFamily_contents {
  border-radius: 16px;
  border: 1px solid var(--Family-pink-Family_pink_400, #FF9899);
  background: var(--white);
}

.newFamily_contents h3 {
  display: flex;
  padding: 16px 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 16px 16px 0px 0px;
  background: var(--Family-pink-Family_pink_500, #FF8383);
  text-align: center;
  font-size: 28px;
  line-height: 130%;
  color: var(--white);
}

.newFamily_contents .ballon_white {
  font-size: 17px;
}

.ballon_white {
  position: relative;
  display: inline-block;
  line-height: 1.2;
  color: var(--white);
}

.ballon_white::after,
.ballon_white::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: var(--white);
}

.ballon_white::after {
  rotate: 10deg;
  right: -10px;
}

.ballon_white::before {
  rotate: -10deg;
  left: -10px;
}

.newFamily_boxwrap {
  display: flex;
  padding: 32px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.newFamily_box {
  display: flex;
  padding: 16px 8px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  background: var(--Family-pink-Family_pink_50, var(--white)6F6);
}

.newFamily_box p {
  color: var(--Family-pink-Family_pink_500, #FF8383);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.cvButton a {
  line-height: 1.5;
}

/************************************
	別の見守りサービスにしたい
************************************/
#otherMimamori .tabcontents01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.worries {
  display: flex;
  padding: 32px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 26px;
  background: var(--background-blue, #ECF9FF);
}

.worries h3 {
  font-size: 20px;
  text-align: center;
}

.worries_illust_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#otherMimamori .tabcontents01_box_blue {
  margin: auto;
}

#otherMimamori .tabcontents01_box_blue h3 {
  font-size: 32px;
  text-align: center;
  padding: var(--8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--8, 8px);
  line-height: 1.5;
  background: var(--background-blue, #ECF9FF);
  color: var(--primary, var(--primary));
  border-radius: 13px 13px 0 0;
}

.case_contents {
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.case_txtbox {
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background: var(--background-blue, #ECF9FF);
}

.case_contents .t_white {
  font-size: 24px;
}

/************************************
	通信速度を早くしたい
************************************/
#communication .tabcontents01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.movieTicket_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tabcontents01_borderbox_blue {
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  border: 1px solid var(--primary-200);
}

.tabcontents01_borderbox_blue .point_list_wrap {
  padding: 24px 0;
}

.movieTicket_txt {
  font-size: 16px;
}

.movieTicket_txt span {
  font-size: 20px;
  font-weight: bold;
}

/************************************
	もっとおトクに利用したい
************************************/
#point .tabcontents01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

#point .tabcontents01_borderbox_blue {
  border: none;
  padding: 0;
}

.point_noAdd {
  width: 100%;
}

#point .tabcontents01_borderbox_blue h3 {
  font-size: 20px;
  text-align: center;
}

#point .flexbox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

#point .tabcontents01_box_blue .ballon_black {
  font-size: 23px;
}

.point_noAdd .accordion_button {
  padding: 16px;
}

.point_list_wrap {
  width: 100%;
}

.point_list_wrap h4 {
  font-size: 14px;
}

.point_list_wrap li {
  text-indent: -14px;
  padding-left: 14px;
}

/************************************
	よくある質問
************************************/
#qa {
  display: flex;
  padding: 80px 16px 0px;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: stretch;
}

/************************************
	ご解約に進む
************************************/
#retention {
  display: flex;
  padding: 0 16px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 64px;
}

#retention .cvButton a {
  min-width: 300px;
}

.cvButton.ret_cta a {
  background: var(--black);
  border-color: var(--black);
}

@media (hover: hover) {
  .cvButton.ret_cta a:hover {
    background: var(--white);
    color: var(--black);
  }

  .cvButton.ret_cta a:hover:after {
    color: var(--black);
  }
}

/************************************
	電話で解約
************************************/
#tel_cancellation {
  width: 100%;
  background: var(--background-gray);
  padding: 64px 32px;
}

#tel_cancellation .wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}

#tel_cancellation .maintenance {
  padding: 24px;
  border: var(--secondary) 1px solid;
  color: var(--secondary-700);
  width: 100%;
  border-radius: 16px;
  text-align: center;
  background: rgba(255, 96, 67, 0.1882352941);
  font-size: 14px;
}

#tel_cancellation .maintenance span {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  display: block;
}

#tel_cancellation h2 span {
  border-bottom: var(--primary) 4px solid;
  padding-bottom: 2px;
  color: var(--primary);
}

#tel_cancellation .support h3 {
  font-size: 18px;
  text-align: center;
}

#tel_cancellation .support .cvButton a {
  margin: 24px 0 8px;
  width: 400px;
}

#tel_cancellation .support .cvButton .tel_nmb {
  color: var(--white);
  transition: 0.3s;
}

#tel_cancellation .support .cvButton .tel_nmb img {
  filter: invert(100%) sepia(100%) saturate(7578%) hue-rotate(182deg) brightness(310%) contrast(112%);
  margin: 8px 8px 0 0;
}

@media (hover: hover) {
  #tel_cancellation .support .cvButton a:hover .tel_nmb {
    color: var(--primary);
  }

  #tel_cancellation .support .cvButton a:hover .tel_nmb img {
    filter: invert(220%) sepia(4460%) saturate(440%) hue-rotate(-947deg) brightness(420%) contrast(60%);
  }
}

#tel_cancellation .flow {
  width: 100%;
  background: var(--white);
  border-radius: 16px;
  padding: 24px;
  border: #95dcff 1px solid;
}

#tel_cancellation .flow h3 {
  font-size: 24px;
  width: 100%;
  text-align: center;
  margin: 24px 0 40px;
}

#tel_cancellation .flow ul {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  width: 100%;
  gap: 8px;
  counter-reset: num 0;
  align-items: center;
}

#tel_cancellation .flow li {
  flex: 1;
  background: #f0faff;
  border-radius: 8px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 16px;
}

#tel_cancellation .flow li::after {
  counter-increment: num 1;
  content: "0"counter(num);
  font-style: italic;
  font-size: 24px;
  color: rgba(54, 182, 230, 0.3137254902);
  position: absolute;
  left: 8px;
  top: 4px;
}

#tel_cancellation .flow li span {
  font-size: 12px;
  display: block;
  margin-top: 8px;
  color: #999;
  font-weight: normal;
}

#tel_cancellation .mnp {
  width: 100%;
  list-style: disc;
}

#tel_cancellation .mnp h4 {
  font-size: 18px;
  margin-bottom: 16px;
}

#tel_cancellation .mnp li {
  margin-left: 24px;
}

/************************************
	サポート
************************************/
.bottom_area {
  padding: 32px 16px;
}

#support {
  margin: 32px auto 42px;
  border-radius: 16px;
  border: 1px solid var(--primary-200);
}

#support h2 {
  padding: 16px 8px;
  background: var(--background-blue, #ECF9FF);
  color: var(--primary);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  border-radius: 16px 16px 0 0;
}

.support_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  text-align: center;
}

.support_box h3 {
  font-size: 16px;
}

.tel_nmb {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--black);
}

/************************************
	フローティングタブ切り替えボタン
************************************/
.underNav {
  display: none;
  pointer-events: none;
}

#floatNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--white);
  z-index: 100;
  transition: 0.3s ease-out;
  transform: translateY(-100px);
}

#floatNav.slideIn {
  transform: translateY(0);
}

.tab_float_nav {
  display: flex;
  justify-content: space-between;
  height: 88px;
  border: 2px solid var(--primary);
  background-color: var(--white);
  z-index: 101;
}

.tab_float_nav .tabButton {
  width: 25%;
  padding: 44px 4px 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border-right: 2px solid var(--primary);
  background: var(--white);
  text-align: center;
  background-position: center top 12px;
  background-size: auto 30px;
  background-repeat: no-repeat;
  transition: 0.3s ease;
}

.tab_float_nav .tabButton a {
  color: var(--primary);
}

.tab_float_nav .tabButton.active a {
  background-color: var(--primary);
  color: var(--white);
}

.tab_float_nav .tabButton p {
  line-height: 1.3;
}

@media (hover: hover) {
  .tab_float_nav .tabButton:hover {
    background-color: var(--primary);
  }

  .tab_float_nav .tabButton:hover a {
    color: var(--white);
  }

  .tab_float_nav .tabButton.deviceChange:hover {
    background-image: url(/cancellation/img/retention/deviceChange_icon_active.svg);
  }

  .tab_float_nav .tabButton.otherMimamori:hover {
    background-image: url(/cancellation/img/retention/family_icon_active.svg);
  }

  .tab_float_nav .tabButton.communication:hover {
    background-image: url(/cancellation/img/retention/communication_icon_active.svg);
  }

  .tab_float_nav .tabButton.point:hover {
    background-image: url(/cancellation/img/retention/point_icon_active.svg);
  }
}

.tab_float_nav .tabButton.deviceChange {
  background-image: url(/cancellation/img/retention/deviceChange_icon.svg);
}

.tab_float_nav .tabButton.active.deviceChange {
  background-image: url(/cancellation/img/retention/deviceChange_icon_active.svg);
}

.tab_float_nav .tabButton.otherMimamori {
  background-image: url(/cancellation/img/retention/family_icon.svg);
}

.tab_float_nav .tabButton.active.otherMimamori {
  background-image: url(/cancellation/img/retention/family_icon_active.svg);
}

.tab_float_nav .tabButton.communication {
  background-image: url(/cancellation/img/retention/communication_icon.svg);
}

.tab_float_nav .tabButton.active.communication {
  background-image: url(/cancellation/img/retention/communication_icon_active.svg);
}

.tab_float_nav .tabButton.point {
  background-image: url(/cancellation/img/retention/point_icon.svg);
}

.tab_float_nav .tabButton.active.point {
  background-image: url(/cancellation/img/retention/point_icon_active.svg);
}

.tab_float_nav .tabButton.active {
  background-color: var(--primary);
}

.tab_float_nav .tabButton:last-child {
  border-right: none;
}

.tab_float_nav .tabButton p {
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .tabcontents_wappar {
    padding: 64px 0;
  }

  .tabButton_flexbox {
    flex-direction: row;
    max-width: 768px;
    padding: 0;
  }

  .tabButton_top li.tabButton {
    max-width: 23%;
  }

  .tabcontents_wrap {
    max-width: 768px;
    width: 100%;
    margin: auto;
  }

  .tabTop_h2 {
    background-position: right 20% center;
  }

  .tabcontents {
    border-radius: 16px;
    box-shadow: 0px 0px 16px 0px rgba(0, 118, 177, 0.2);
    border: none;
  }

  .tabTop_h2 {
    border-radius: 16px 16px 0 0;
  }

  /************************************
  新しい機種に変更したい
  ************************************/
  .tabcontents01 {
    padding: 56px 84px;
    border-radius: 16px;
  }

  .ballon_blue span {
    display: initial;
  }

  .tabcontents02.apd2024 {
    padding: 0 84px;
  }

  .apd2024_box img {
    max-width: 400px;
    width: 100%;
  }

  .tabcontents03.familyChange {
    padding: 56px 84px;
  }

  .newFamily_contents {
    width: 100%;
  }

  .newFamily_boxwrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .newFamily_box {
    width: 47%;
  }

  .newFamily_box:nth-of-type(2) img {
    margin: 22px auto;
  }

  /************************************
  別の見守りサービスにしたい
  ************************************/
  .worries {
    max-width: 768px;
    width: 100%;
  }

  .worries h3 {
    font-size: 24px;
  }

  /************************************
  通信速度を早くしたい
  ************************************/
  .movieTicket_txt {
    text-align: center;
  }

  /************************************
  よくある質問
  ************************************/
  .accordion_box {
    max-width: 768px;
    width: 100%;
    margin: auto;
  }

  /************************************
  ご解約に進む
  ************************************/
  .bottom_area {
    width: 100%;
    margin: auto;
    padding: 64px 32px;
  }

  .bottom_area .apd2024,
  .bottom_area #support,
  .bottom_area .annotation {
    max-width: 768px;
    margin: auto;
  }

  /************************************
  フローティングタブ切り替えボタン
  ************************************/
  .tab_float_nav {
    max-width: 768px;
    width: 100%;
    margin: auto;
  }

  .tab_float_nav .tabButton p {
    font-size: 12px;
  }

  .tab_float_nav .tabButton {
    padding: 50px 4px 4px;
    background-position: center top 16px;
  }
}

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

  /************************************
  	電話で解約
  ************************************/
  #tel_cancellation {
    padding: 48px 16px;
  }

  #tel_cancellation .maintenance {
    line-height: 1.3;
  }

  #tel_cancellation h2 {
    font-size: 24px;
  }

  #tel_cancellation .flow {
    padding: 16px;
  }

  #tel_cancellation .flow ul {
    flex-direction: column;
    gap: 16px;
    justify-content: center;
  }

  #tel_cancellation .flow ul li {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  #tel_cancellation .flow .arrow,
  #tel_cancellation .flow ul li br {
    display: none;
  }

  #tel_cancellation .support .cvButton,
  #tel_cancellation .support .cvButton a,
  #tel_cancellation .support {
    width: 100%;
  }
}

/*# sourceMappingURL=top.css.map */