@charset "UTF-8";
a, a:visited {
  color: var(--text-black);
}

.LP {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: auto;
  background-color: var(--true-white);
  margin: 0 auto;
  text-align: center;
}

.LP * {
  text-align: initial;
}

/*アンカーリンク位置調整*/
.LP #how-it-works, .LP #plans, .LP #faq {
  padding-top: 64px;
  margin-top: -64px;;
}

/* ヘッダー*/
.LP .overlap {
  position: fixed;
  width: 100%;
  height: 64px;
  top: 0;
  left: 0;
  z-index: 10;
}

.LP .header {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 64px;
  background-color: var(--true-white);
  box-shadow: var(--gray-6) 0 3px 0 0;
  text-align: right;
}

.LP .header .header_logo {
  position: absolute;
  width: 150px;
  height: 50px;
  top: 6px;
  left: 16px;
  background-image: url(./img/eposkozo-mobile-logo-400x1200-1.png);
  background-size: cover;
  background-position: 50% 50%;
}

/*820px〜 pcメニュー*/
.LP .header .pcmenu {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  display: none;
}

.LP .header .pcmenu .link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0px 12px;
  position: relative;
}

.LP .header .pcmenu .link .list-element {
  position: relative;
  width: fit-content;
  font-family: var(--noto-sans-JP-m);
  font-weight: 500;
  color: var(--text-black);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/*sp ハンバーガー*/
.LP .header .spmenu-wrapper {
  display: flex;
  flex-direction: column;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 19px 14px;
  position: absolute;
  top: 0;
  right: 0px;
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

.LP .header .spmenu-wrapper .ham-lines {
  display: flex;
  flex-direction: column;
  width: 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
  transition: ease .4s;
}

.LP .header .spmenu-wrapper .ham-lines .ham-line {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 2px;
  background-color: var(--text-black);
  border-radius: 50px;
}

/*spメニュー ウィンドウ*/
.LP .header .spmenu-wrapper.active {
  transform: translateX(0);
}

.LP .header .spmenu-wrapper.active .ham-lines .ham-line:nth-child(1) {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(45deg);
}

.LP .header .spmenu-wrapper.active .ham-lines .ham-line:nth-child(2) {
  opacity: 0;
}

.LP .header .spmenu-wrapper.active .ham-lines .ham-line:nth-child(3) {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(-45deg);
}

.LP .header .spmenu {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100vW;
  height: calc(100vh + 64px);
  transform: translateX(100%);
  transition: ease .4s;
  background-color: var(--gray-7);
}

.LP .header .spmenu.active {
  transform: translateX(0%);
  transition: ease .4s;
}

.LP .header .spmenu .spmenulist-wrapper {
  display: block;
  width: calc(100% - 30px);
  max-width: 400px;
  position: relative;
  margin: 64px auto 0;
  z-index: 9999;
}

.LP .header .spmenu .spmenulist-wrapper .spmenulist {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px 8px;
  padding: 16px 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--true-white);
  border-radius: 8px;
}

.LP .header .spmenu .spmenulist-wrapper .spmenulist .sub-title-name {
  position: relative;
  display: block;
  width: 80%;
  height: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-4);
  font-family: var(--avenir-font);
  font-weight: 900;
  color: var(--text-black);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .header .spmenu .spmenulist-wrapper .spmenulist .list-element {
  position: relative;
  width: 80%;
  height: 56px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-4);
  font-family: var(--avenir-font);
  font-weight: 500;
  color: var(--text-black);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: normal;
}

.LP.off .header .spmenu .spmenulist-wrapper .spmenulist .list-element:last-child {
  display: none;
}

.LP .header .spmenu .spmenulist-wrapper .spmenulist .list-element:after {
  position: absolute;
  background:url("img/right.svg") top right no-repeat;
  background-size: contain;
  content: "";
  width: 24px;
  height: 24px;
  bottom: 16px;
  right: 0;
}

/*ヘッダー部分ctaボタン*/
.LP .header .cta {
  display: flex!important;
  width: 120px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  position: absolute;
  top: 16px;
  right: 72px;
  background-color: var(--negative-red);
  border-radius: 50px;
}

.LP.off .header .cta {
  display: none!important;
}

.LP .header .cta .cta-text {
  position: relative;
  width: fit-content;
  font-family: var(--avenir-font);
  font-weight: 900;
  color: var(--true-white);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .header .pcmenu .cta {
  position: relative;
  top: unset;
  right: unset;
}

/*メインコンテンツ*/
.LP .main {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: auto;
  align-items: center;
  margin: 0 auto;
  padding-bottom: 48px;
}

/*KV、swiper関連*/
.LP .KV {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: calc(100vw + 16px);
  background-color: transparent;
  margin-top: 64px;
}

.LP .KV .servicelp-kv {
  position: absolute;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.LP .KV .swiper-pagination {
  bottom: 0px!important;
  background-color: var(--gray-7);
}

.LP .KV .swiper-pagination-bullet {
  background-color: var(--gray-7)!important;
  border: 1px solid var(--text-black)!important;
}

.LP .KV .swiper-pagination-bullet-active {
  background-color: var(--text-black)!important;
}

.LP .KV .swiper-button-next, .swiper-button-prev {
  visibility: visible;
  width: 40px!important;
  height: calc(100% - 16px)!important;
  margin-top: 0!important;
  background: rgba(0, 0, 0, 0.40);
  top: 0!important;
  left: 0!important
}

.LP .KV .swiper-button-next {
  left: auto!important;
  right: 0!important;
}

.LP .KV .swiper-button-next:after, .swiper-button-prev:after {
  font-size: 20px!important;
  font-weight: 900;
  color: var(--true-white)!important;
}

.LP .KV .swiper-button-next, .swiper-button-prev {
  visibility: hidden;
}

/*メインコンテンツ部分cta*/
.LP .main .wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}

.LP .main .cta {
  display: flex;
  width: 60%;
  min-width: 240px;
  max-width: 400px;
  height: 48px;
  align-items: center;
  justify-content: space-around;
  padding: 8px 16px;
  position: relative;
  background-color: var(--negative-red);
  border-radius: 24px;
  border: 1px solid;
  border-color: var(--negative-red);
}

.LP.off .main .cta {
  display: none;
}

.LP .main .dummy-cta {
  display: none;
}

.LP.off .main .dummy-cta {
  display: flex;
  width: 60%;
  max-width: 400px;
  height: 48px;
  align-items: center;
  justify-content: space-around;
  padding: 8px 16px;
  position: relative;
  background-color: var(--border-gray);
  border-radius: 24px;
  border: 1px solid;
  border-color: var(--border-gray);
}

.LP .main .cta.price {
  background-color: var(--positive-green);
  border-color: var(--positive-green);
}

.LP .main .cta .cta-text, .LP .main .dummy-cta .cta-text {
  position: relative;
  font-family: var(--noto-sans-JP);
  font-weight: 700;
  color: var(--true-white);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .wrap .cta-note {
  position: relative;
  width: fit-content;
  font-family: var(--noto-sans-JP-r);
  font-weight: 400;
  color: var(--gray-2);
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.LP.off .wrap .cta-note {
  display: none;
}

/*リード部分 携帯を使うだけで儲かる仕組み*/
.LP .lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 0px;
  margin-top: -16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--gray-7);
}

.LP .p-model, .LP .why {
  display: flex;
  flex-direction: column;
  width: 60%;
  min-width: 375px;
  max-width: 600px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.LP .img-01, .LP .img-02 {
  position: relative;
  align-self: stretch;
  width: 100%;
}

.LP .graph-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  width: 100%;
  max-width: 800px;
}

.LP .case-wrapper {
  display: flex;
  flex-direction: column;
  width: 60%;
  min-width: 375px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.LP .case-title {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  color: var(--true-black);
  text-align: right;
  font-weight: 700;
  font-family: var(--noto-sans-JP);
  letter-spacing: 0px;
  line-height: normal;
  font-size: 18px;
}

.LP .note {
  font-size: 12px;
  line-height: 19px;
}

.LP .case-img {
  position: relative;
  width: 100%;
  object-fit: cover;
}

.LP .case-text {
  position: relative;
  width: fit-content;
  font-family: var(--noto-sans-JP);
  font-weight: 700;
  color: var(--true-black);
  font-size: 14px;
  text-align: right;
  letter-spacing: 0px;
  line-height: normal;
}

/*プラン比較*/
.LP .compare {
  gap: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  padding-top: 88px!important;
}

.LP .compare .compare-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  width: 60%;
  min-width: 375px;
  max-width: 680px;
}

/*h2見出し共通設定*/
.LP .compare .compare-title-wrapper, .LP .flow .flow-title-wrapper {
  flex-direction: column;
  width: auto;
  gap: 3px;
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.LP .compare .compare-title-wrapper .title, .LP .flow .flow-title-wrapper .title {
  position: relative;
  width: auto;
  font-family: var(--noto-sans-JP);
  font-weight: 700;
  color: var(--text-black);
  font-size: 24px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .compare .compare-title-wrapper .under-line, .LP .flow .flow-title-wrapper .under-line {
  position: relative;
  width: 104px;
  height: 2px;
  background-color: var(--text-black);
  border-radius: 50px;
}

/*トグルスイッチ*/
.LP .compare .compare-wrapper .toggle-button-plan {
  border: 2px solid;
  border-color: var(--true-black);
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width: 224px;
  height: 30px;
  border-radius: 30px;
  box-sizing: content-box;
  background-color: var(--true-white);
  cursor: pointer;
  transition: background-color .4s;
  font-family: var(--avenir-font);
  font-weight: 900;
  color: var(--text-black);
  font-size: 20px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
  transition: color .4s;
}

.LP .compare .compare-wrapper .toggle-button-plan::before {
  position: absolute;
  left: 0px;
  width: calc(50% + 5px);
  min-width: 117px;
  height: 30px;
  border-radius: 30px;
  background-color: var(--text-black);
  content: '';
  transition: left .4s;
}

.LP .compare .compare-wrapper .toggle-button-plan:has(:checked)::before {
  left: 107px;
  background-color: var(--text-black);
}

.LP .compare .compare-wrapper .toggle-button-plan::after {
  position: absolute;
  top: calc(50% - 13.75px);
  left: calc(50% - 2.8em);
  transform: translateX(-50%);
  content: 'SIM';
  transition: left .4s;
  font-family: var(--avenir-font);
  font-weight: 900;
  color: var(--true-white);
  font-size: 20px;
  text-align: center;
  width: fit-content;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .compare .compare-wrapper .toggle-button-plan:has(:checked)::after {
  left: calc(50% + 2.7em);
  content: 'wifi';
}

.LP .compare .compare-wrapper .toggle-button-plan input {
  display: none;
}

/*比較表*/
.LP .compare .compare-wrapper .plan-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
  width: 91.7333%;
  min-width: 344px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan-note {
  position: relative;
  width: 100%;
  min-width: 344px;
  margin-top: -1.00px;
  font-family: var(--noto-sans-JP);
  font-weight: 400;
  color: var(--true-black);
  font-size: 10px;
  text-align: right;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .compare .compare-wrapper .plan-wrapper .plan {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  width: 100%;
  height: 444px;
}

.LP .compare .compare-wrapper .toggle-button-plan:has(:checked) + div .plan {
  height: 390px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail {
  display: flex;
  width: 100%;
  min-width: 344px;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  flex: 1;
  flex-grow: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail.sim {
  display: flex;
  opacity: 1;
  transition: display 0.4s, opacity 0.4s;
  transition-behavior: allow-discrete;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail.wifi {
  display: none;
  opacity: 0;
  transition: display 0.4s, opacity 0.4s;
  transition-behavior: allow-discrete;
}

.LP .compare .compare-wrapper .toggle-button-plan:has(:checked) + div .plan-detail.sim {
  display: none;
  opacity: 0;

  @starting-style {
    opacity: 1;
  }
}

.LP .compare .compare-wrapper .toggle-button-plan:has(:checked) + div .plan-detail.wifi, div .plan-detail.wifi.show {
  display: flex;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list {
  position: relative;
  width: 39.5349%;
  min-width: 136px;
  max-width: 240px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company {
  width: 29.0698%;
  min-width: 100px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group {
  position: relative;
  border-radius: 5px;
  background-color: var(--gray-7);
  border: 2px solid;
  border-color: var(--text-black);
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-title {
  width: 100%;
  min-width: 132px;
  height: 27px;
  top: 0;
  left: 0;
  background-color: var(--negative-red);
  border-radius: 3px 3px 0px 0px;
  border-bottom: 1px solid;
  border-color: var(--text-black);
  padding: 4px 0;
  text-align: center;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company .list-title {
  width: 100%;
  min-width: 96px;
  background-color: var(--text-black);
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-title .list-title-text {
  font-family: var(--noto-sans-JP);
  font-weight: 700;
  color: var(--true-white);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-title .list-title-text span {
  font-size: 10px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 132px;
  align-items: center;
  gap: 8px;
  padding: 8px 0px 16px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company .list-group .list-content {
  width: 100%;
  min-width: 96px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content > div {
  position: relative;
  width: 90%;
  padding-bottom: 3px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gray-5);
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content > div:last-child {
  border-bottom: none;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.MetaKozo .list-group .list-content > div {
  min-width: 120px;
}
.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .gb, .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .reward, .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .ease-reward {
  height: 48px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .reward-type {
  height: 60px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .esim-wrapper {
  height: 44px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .p {
/*  position: relative;
  align-self: stretch;
  margin-top: -1.00px;*/
  font-family: var(--avenir-BK);
  font-weight: 900;
  color: var(--text-black);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.2;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .p.text {
  position: relative;
/*  align-self: stretch;*/
  font-family: var(--noto-sans-JP-b);
  font-weight: 700;
  color: var(--text-black);
  font-size: 13px;
  text-align: center;
  letter-spacing: 2.60px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .p span {
  font-size: 10px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .price, .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .rate {
  width: 100%;
  font-family: var(--avenir-font);
  font-weight: 900;
  color: var(--negative-red);
  font-size: 20px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company .list-group .list-content .price {
  font-family: var(--avenir-m);
  font-weight: 500;
  color: var(--text-black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .price span {
  font-family: var(--noto-sans-JP);
  font-weight: 700;
  color: var(--negative-red);
  font-size: 10px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
  white-space: nowrap;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .rate span {
  font-weight: 900;
  font-size: 16px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company .list-group .list-content .price span {
  font-family: var(--noto-sans-JP-r);
  font-weight: 400;
  color: var(--text-black);
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .compare-text {
  font-family: var(--noto-sans-JP);
  font-weight: 900;
  color: var(--negative-red);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .compare-text span {
  font-weight: 700;
  font-family: var(--noto-sans-JP);
  letter-spacing: 0px;
  line-height: normal;
  font-size: 12px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company .list-group .list-content .compare-text {
  position: relative;
  font-family: var(--avenir-m);
  font-weight: 500;
  color: var(--text-black);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .compare-text, .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company .list-group .list-content .compare-text {
  line-height: 16px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company .list-group .list-content .compare-text span {
  font-size: 10px;
  line-height: 16px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company .list-group .list-content .p.esim {
  position: relative;
  font-family: var(--avenir-BK);
  font-weight: 900;
  color: var(--text-black);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-wrapup {
  position: relative;
  width: auto;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-wrapup .polygon {
  position: absolute;
  width: 17px;
  height: 18px;
  top: 0;
  left: 62px;
}

.LP .compare .compare-wrapper .plan-wrapper .plan .plan-wrapup .price-bubble {
  display: block;
  margin-top: 11px;
  background-color: var(--negative-red);
  border-color: var(--negative-red);
  padding: 8px 16px;
  border-radius: 24px;
  font-family: var(--noto-sans-JP);
  font-weight: 700;
  color: var(--true-white);
  font-size: 12px;
  letter-spacing: 0px;
  line-height: normal;
}

/*安心なサービス品質・ネットワーク*/
.LP .compare .compare-wrapper .network-title {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}

.LP .compare .compare-wrapper .network-title .marker {
  position: absolute;
  width: 100%;
  height: 8px;
  left: 0;
  bottom: 5px;
  background-color: var(--marker-1);
}

.LP .compare .compare-wrapper .network-title .network-title-text {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--noto-sans-JP-eb);
  font-weight: 800;
  color: var(--text-black);
  font-size: 16px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
}

.LP .compare .compare-wrapper .network-imgs {
  display: flex;
  width: 92%;
  min-width: 345px;
  max-width: 680px;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.LP .compare .compare-wrapper .network-imgs .img {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
  width: 34.9854%;
  min-width: 120px;
}

.LP .compare .compare-wrapper .network-imgs .img._2 {
  width: 54.2274%;
  min-width: 186px;
}


.LP .compare .compare-wrapper .network-imgs .img-title {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--noto-sans-JP-b);
  font-weight: 700;
  color: var(--true-black);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.LP .compare .compare-wrapper .network-imgs .image-1 {
  width: 100%;
  position: relative;
  object-fit: cover;
}

.LP .compare .compare-wrapper .network-imgs .image-2 {
  width: 97.2973%;
  min-width: 180px;
  position: relative;
  object-fit: cover;
}

.LP .compare .compare-wrapper .network-imgs .au {
  position: relative;
  width: 100%;
  font-family: var(--noto-sans-JP-m);
  font-weight: 500;
  color: var(--true-black);
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/*eSIM対応で最短当日開通*/
.LP .flow {
  gap: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP .flow .flow-wrapper {
  justify-content: center;
  gap: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  position: relative;
  flex: 0 0 auto;
  width: 60%;
  min-width: 325px;
  max-width: 800px;
}

.LP .flow .flow-wrapper .flow-title-sub {
  font-family: var(--noto-sans-JP);
  font-weight: 400;
  color: var(--true-black);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
  position: relative;
  width: fit-content;
  letter-spacing: 0px;
  line-height: normal;
}

.LP .flow .flow-wrapper .exp {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 10px;
}

.LP .flow .flow-wrapper .exp .number-wrapper {
  position: relative;
  width: 60px;
  height: 70px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--negative-red);
}

.LP .flow .flow-wrapper .exp .number-wrapper span {
  height: 49px;
  font-family: var(--avenir-BK);
  font-weight: 900;
  color: var(--true-white);
  font-size: 36px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.LP .flow .flow-wrapper .exp .exp-content {
  display: flex;
  flex-direction: column;
  width: 81.5385%;
  min-width: 265px;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  position: relative;
  margin-right: -1.00px;
  background-color: var(--gray-7);
  border-radius: 8px;
  border: 1px solid;
  border-color: var(--negative-red);
}

.LP .flow .flow-wrapper .exp .exp-content .exp-title {
  position: relative;
  width: 250px;
  height: 17px;
  margin-top: -1.00px;
  margin-right: -9.00px;
  font-family: var(--noto-sans-CJK-JP);
  font-weight: 700;
  color: var(--negative-red);
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 24px;
  white-space: nowrap;
}

.LP .flow .flow-wrapper .exp .exp-content .exp-detail {
  position: relative;
  align-self: stretch;
  font-family: var(--noto-sans-JP-r);
  font-weight: 400;
  color: var(--text-black);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 17px;
}

.LP .flow .flow-wrapper .link-text-link-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP .flow .flow-wrapper .link-text-link-arrow span {
  position: relative;
  width: fit-content;
  font-family: var(--noto-sans-JP-r);
  font-weight: 400;
  color: var(--text-black);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

/*eSIM対応で最短当日開通・補足説明ブロック共通*/
/*　　　　　　　　アイコン画像　　　　　　　　*/
.LP .img-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

/*補足説明ブロック*/
.LP .charge-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP .charge-option .paragraph {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
  position: relative;
  width: 60%;
  min-width: 327px;
  flex: 0 0 auto;
  background-color: var(--true-white);
}

.LP .charge-option .paragraph h3 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.LP .charge-option .paragraph .heading {
  position: relative;
  width: fit-content;
  font-family: var(--noto-sans-JP-b);
  font-weight: 700;
  color: var(--true-black);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.LP .paragraph p {
  position: relative;
  align-self: stretch;
  font-family: var(--noto-sans-JP-r);
  font-weight: 400;
  color: var(--text-black);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
}

.LP .paragraph p.option {
  position: relative;
  align-self: stretch;
  font-family: var(--noto-sans-JP-b);
  font-weight: 400;
  color: var(--text-black);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
}

.LP .paragraph p.option .option-title {
  font-weight: 700;
}

.LP .paragraph p.option .option-text {
  font-family: var(--noto-sans-JP-r);
}

/*FAQ*/
.LP .FAQ {
  align-items: center;
  gap: 32px;
  padding: 80px 0px 16px!important;
  align-self: stretch;
  width: 100%;
  margin-bottom: -14.00px;
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 auto;
}

.LP .FAQ .FAQ-wrapper {
  width: 60%;
  min-width: 344px;
  align-items: flex-start;
  gap: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 auto;
}

.LP .FAQ .FAQ-wrapper .FAQ-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0px 0px 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP .FAQ .FAQ-wrapper .FAQ-title .title-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--gray-2);
}

.LP .FAQ .FAQ-wrapper .FAQ-title .title-box span {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--noto-sans-JP);
  font-weight: 700;
  color: var(--text-black);
  font-size: 18px;
  text-align: center;
  letter-spacing: 0px;
}

.LP .FAQ .FAQ-wrapper .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--true-white);
  border: 1px solid;
  border-color: var(--gray-2);
}

.LP .FAQ .FAQ-wrapper .box .question {
  justify-content: space-between;
  align-self: stretch;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.LP .FAQ .FAQ-wrapper .box .question input {
  display: none;
}

.LP .FAQ .FAQ-wrapper .box .question:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(img/up.svg) no-repeat;
  position: absolute;
  top: calc(50% - 12px);
  right: 0;
  opacity: 0;
  transition: opacity 0.4s;
}

.LP .FAQ .FAQ-wrapper .box .question:has(:checked)::before {
  opacity: 1;
}

.LP .FAQ .FAQ-wrapper .box .question:after {
  content: "";
  width: 24px;
  height: 24px;
  background: url(img/down.svg) no-repeat;
  position: absolute;
  top: calc(50% - 12px);
  right: 0;
  opacity: 1;
  transition: opacity 0.4s;
}

.LP .FAQ .FAQ-wrapper .box .question:has(:checked)::after {
  opacity: 0;
}

.LP .FAQ .FAQ-wrapper .box .question + div {
  display: block;
  width: 100%;
  flex-direction: column;
  display: none;
  opacity: 0;
  transition: display 0.4s, opacity 0.4s;
  transition-behavior: allow-discrete;
}

.LP .FAQ .FAQ-wrapper .box .question:has(:checked) + div {
  display: block;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

.LP .FAQ .FAQ-wrapper .box .question p {
  position: relative;
  width: 89.6774%;
  min-width: 278px;
  margin-top: -1.00px;
  font-family: var(--noto-sans-JP-sb);
  font-weight: 600;
  color: var(--gray-2);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.LP .FAQ .FAQ-wrapper .box .question p .red {
  color: var(--negative-red);
}

.LP .FAQ .FAQ-wrapper .box .answer {
  position: relative;
  width: 100%;
  padding-top: 16px;
  font-family: var(--noto-sans-JP-r);
  font-weight: 400;
  color: var(--gray-2);
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
  border-top:  1px dotted #4f4f4f;
}

.LP .FAQ .to_help {
  position: relative;
  width: 60%;
  min-width: 341px;
  height: 175px;
  border-radius: 10px;
  border: 1px solid;
  border-color: var(--text-black);
}

.LP .FAQ .to_help .help-text {
  width: 100%;
  padding: 31px 0;
  font-family: var(--noto-sans-JP-r);
  font-weight: 400;
  color: var(--text-black);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.LP .FAQ .to_help .help_link {
  display: flex;
  width: 184px;
  height: 48px;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  padding: 8px 16px;
  position: absolute;
  top: 99px;
  left: calc(50% - 92px);
  background-color: var(--financie-blue);
  border-radius: 4px;
  overflow: hidden;
}

.LP .FAQ .to_help .help_link .help_link_text {
  position: relative;
  flex: 1;
  font-family: "Hiragino Sans-W7", Helvetica;
  font-weight: 400;
  color: var(--true-white);
  font-size: 14px;
  text-align: center;
  letter-spacing: 1.12px;
  line-height: normal;
}

/*footer*/
.footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: auto;
  justify-content: center;
  padding: 32px 0px;
  position: relative;
  background-color: var(--gray-7);
}

.footer-wrapper .footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  padding: 0px 16px 24px;
  position: relative;
  width: 100%;
  max-width: 375px;
  flex: 0 0 auto;
  background-color: transparent;
}

.footer-wrapper .footer .logo-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: 100%;
}

.footer-wrapper .footer .logo-wrapper .logo {
  position: relative;
  width: 150px;
  aspect-ratio: 1200/400;
  background-color: var(--gray-3);
  background-image: url(./img/eposkozo-mobile-logo-400x1200-1.png);
  background-size: cover;
  background-position: 50% 50%;
}

.footer-wrapper .footer .logo-wrapper .copy {
  position: relative;
  width: 167px;
  height: 36px;
  font-family: var(--noto-sans-JP-b);
  font-weight: 700;
  color: var(--text-black);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
}

.footer-wrapper .footer .link-logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.footer-wrapper .footer .link-logos .link-xmobile-logo {
  position: relative;
  width: 138px;
  aspect-ratio: 1536/321;
  background-image: url(./img/link-hp-header-logo-1536x321-png.png);
  background-size: cover;
  background-position: 50% 50%;
}

.footer-wrapper .footer .link-logos .link-financie-logo {
  position: relative;
  width: 103px;
  aspect-ratio: 430/121;
  background-image: url(./img/link-finace-png.png);
  background-size: cover;
  background-position: 50% 50%;
}

.footer-wrapper .footer .link-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 16px;
  position: relative;
  flex: 0 0 auto;
  width: 337px;
}

.footer-wrapper .footer .link-list .link-wrap {
  position: relative;
  min-width: 138px;
}

.footer-wrapper .footer .link-list .link-wrap .link {
  font-family: var(--noto-sans-JP-m);
  font-weight: 500;
  color: var(--link-black);
  font-size: 12px;
  letter-spacing: 1.20px;
  line-height: 2.2;
}

.footer-wrapper .cr-wrapper {
  display: block;
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--gray-8);
  width: 100%;
}

.footer-wrapper .cr-wrapper .copyright {
  font-family: var(--avenir-m);
  font-weight: 500;
  color: var(--text-black);
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

@media screen and (min-width:820px) {
  /*ヘッダー部分*/
  .LP .header {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    position: relative;
    background-color: var(--true-white);
  }

  .LP .header .header_logo {
    position: relative;
    width: 150px;
    height: 50px;
    background-color: var(--gray-3);
    background-image: url(./img/eposkozo-mobile-logo-400x1200-1.png);
    background-size: cover;
    background-position: 50% 50%;
    top: unset;
    left: unset;
  }

  .LP .header .pcmenu {
    display: inline-flex;
  }

  .LP .header .pcmenu .border {
    position: relative;
    width: 1px;
    height: 24px;
    background-color: var(--text-black);
  }  
  
  .LP .header .cta.sp {
    display: none!important;
  }

  .LP .header .spmenu-wrapper {
    display: none;
  }

  /*メインコンテンツ部分*/
  .LP .main {
    padding-bottom: 64px;;
  }

  
  /*KV、swiper関連*/
  .LP .KV {
    height: auto;
    aspect-ratio: 1536/650;
    background-color: transparent;
  }

  .LP .KV .swiper-pagination {
    height: 20px;
  }

  .LP .KV　.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,12px))!important;
    height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,12px))!important;
  }

  .LP .KV .swiper-button-next, .swiper-button-prev {
    visibility: visible;
    height: calc(100% - 20px)!important;
  }

  /*リード部分 携帯を使うだけで儲かる仕組み*/
  .LP .lead {
    margin-top: -20px;
  }

  .LP .graph-wrap {
    flex-direction: row;
    align-items: flex-start;
  }

  .LP .why {
    max-width: 375px;
  }

  .LP .case-wrapper {
    max-width: 383px;
  }

  /*プラン比較*/
  .LP .compare .compare-wrapper {
    width: 800px;
    max-width: unset;
    gap: 40px;
  }

  /*h2見出し共通設定*/
  .LP .compare .compare-title-wrapper .title, .LP .flow .flow-title-wrapper .title {
    font-size: 32px;
    letter-spacing: 0px;
    line-height: normal;
  }

  .LP .compare .compare-title-wrapper .under-line, .LP .flow .flow-title-wrapper .under-line {
    width: 200px;
  }

  .LP .compare .compare-wrapper .toggle-button-plan {
    width: 400px;
  }

  .LP .compare .compare-wrapper .toggle-button-plan:has(:checked)::before {
    left: 195px;
  }

  .LP .compare .compare-wrapper .toggle-button-plan::after {
    left: calc(50% - 195px/2);
  }

  .LP .compare .compare-wrapper .toggle-button-plan:has(:checked)::after {
    left: calc(50% + 195px/2);
  }

  /*比較表*/
  .LP .compare .compare-wrapper .plan-wrapper .plan {
    width: 800px;
    height: 590px;
  }

  .LP .compare .compare-wrapper .toggle-button-plan:has(:checked) + div .plan {
    height: 509px;
  }
  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail {
    gap: 24px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list.company {
    width: 240px;
  }
  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-title {
    padding: 2px 0;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-title .list-title-text {
    font-size: 15px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content {
    padding-bottom: 8px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content > div {
    width: 90%;
    height: 73px!important;
    padding: 16px 0;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content > div *:first-child {
    width: 80px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content > div *:nth-child(2) {
    width: 130px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .p {
    font-size: 24px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .p span {
    font-size: 16px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .p.text {
    font-size: 16px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .p.esim {
    font-size: 20px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .price, .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .rate {
    font-size: 32px!important;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .price span {
    font-size: 16px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .compare-text {
    font-size: 20px!important;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .compare-text span {
    font-size: 12px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .compare-text span.small {
    font-size: 12px;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-detail .list .list-group .list-content .p.esim {
    font-size: 20px!important;
  }

  .LP .compare .compare-wrapper .plan-wrapper .plan .plan-wrapup .price-bubble {
    font-size: 20px;
  }

  /*安心なサービス品質・ネットワーク*/
  .LP .compare .compare-wrapper .network-title .network-title-text {
    font-size: 24px;
  }


  .LP .compare .compare-wrapper .network-imgs {
    width: 680px;
  }

  .LP .compare .compare-wrapper .network-imgs .au {
    font-size: 16px;
  }

  /*eSIM対応で最短当日開通*/
  .LP .flow .flow-wrapper {
    width: 800px;
  }

  .LP .flow .flow-wrapper .flow-title-sub {
    font-size: 20px;
  }

  .LP .flow .flow-wrapper .exp {
    gap: 4px;
  }

  .LP .flow .flow-wrapper .exp .exp-content {
    padding: 16px;
    gap: 16px;
  }

  .LP .flow .flow-wrapper .exp .exp-content .exp-title {
    font-size: 20px;
  }

  .LP .flow .flow-wrapper .exp .exp-content .exp-detail {
    font-size: 16px;
    line-height: 26px;
  }

  .LP .flow .flow-wrapper .link-text-link-arrow span {
    font-size: 16px;
  }

  /*補足説明ブロック*/
  .LP .charge-option .paragraph .heading {
    font-size: 20px;
  }

  .LP .charge-option .paragraph p {
    font-size: 14px;
    line-height: 22px;
  }

  /*FAQ*/
  .LP .FAQ {
    gap: 40px;
  }
  .LP .FAQ .FAQ-wrapper .FAQ-title .title-box span {
    font-size: 20px;
  }

  .LP .FAQ .FAQ-wrapper .box .answer {
    font-size: 14px;
  }

  .LP .FAQ .to_help {
    width: 480px;
    padding: 24px 40px; 
    height: auto;
  }

  .LP .FAQ .to_help .help-text {
    padding: 0 0 24px;
  }

  .LP .FAQ .to_help .help_link {
    width: 208px;
    padding: 8px 16px;
    position: relative;
    top: 0;
    left: calc(50% - 104px);
  }

  .LP .FAQ .to_help .help_link .help_link_text {
    font-size: 16px;
  }

  /*footer*/
  .footer-wrapper .footer {
    max-width: 1280px;
    gap: 32px;
  }
  .footer-wrapper .footer .logo-wrapper .copy {
    width: auto;
    height: auto;
    font-size: 20px;
  }
  .footer-wrapper .footer .link-logos {
    align-items: flex-start;
  }

}
@media screen and (min-width:1280px) {
  .LP .header .pcmenu .link {
    gap: 40px;
    padding: 0px 24px;
  }

  /*footer*/
  .footer-wrapper .footer {
    gap: 32px 80px;
  }

  .footer-wrapper .footer .logo-wrapper .logo, .footer-wrapper .footer .link-logos .link-xmobile-logo, .footer-wrapper .footer .link-logos .link-financie-logo {
    width: 200px;
  }

  .footer-wrapper .footer .link-list {
    width: 364px;
  }

  .footer-wrapper .footer .link-list .link-wrap .link {
    font-size: 14px;
  }
}