@charset "UTF-8";
/* Scss Document */
/* CSS Document */
/* fonts */
@font-face {
  src: url(../fonts/NotoSansJP-Bold.woff) format("woff"), url(../fonts/NotoSansJP-Bold.woff2) format("woff2");
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  src: url(../fonts/NotoSansJP-Medium.woff) format("woff"), url(../fonts/NotoSansJP-Medium.woff2) format("woff2");
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  src: url(../fonts/NotoSansJP-Regular.woff) format("woff"), url(../fonts/NotoSansJP-Regular.woff2) format("woff2");
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  src: url(../fonts/Roboto-Bold.woff) format("woff"), url(../fonts/Roboto-Bold.woff2) format("woff2");
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  src: url(../fonts/Roboto-Medium.woff) format("woff"), url(../fonts/Roboto-Medium.woff2) format("woff2");
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  src: url(../fonts/Roboto-Regular.woff) format("woff"), url(../fonts/Roboto-Regular.woff2) format("woff2");
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  src: url(../fonts/BIZUDPGothic-Bold.woff) format("woff"), url(../fonts/BIZUDPGothic-Bold.woff2) format("woff2");
  font-family: "BIZ UDGothic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* font:rem=px デザインしたwidthを割る  */
html {
  font-size: 2.5641025641vw;
}
@media only screen and (min-width: 750px) {
  html {
    font-size: 0.6944444444vw;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  font-display: optional;
  font-size: 1.4rem;
}
@media only screen and (min-width: 750px) {
  body {
    font-size: 1.6rem;
  }
}

/* common */
.pc_hide {
  display: block;
}
@media only screen and (min-width: 750px) {
  .pc_hide {
    display: none;
  }
}

.sp_hide {
  display: none;
}
@media only screen and (min-width: 750px) {
  .sp_hide {
    display: block;
  }
}

.en {
  font-family: "Roboto", sans-serif;
  line-height: 1;
}

.yellow {
  color: #FFE100;
}

.pink {
  color: #FF1D97;
}

.mark {
  font-size: 1rem;
  vertical-align: text-top;
  color: #888;
}

.note {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-top: 1em;
  color: #888;
  font-weight: 400;
}
@media only screen and (min-width: 750px) {
  .note {
    line-height: 1.6;
  }
}

.inner {
  padding: 4rem 3rem;
}
@media only screen and (min-width: 750px) {
  .inner {
    padding: 6rem 0;
  }
}

h2 {
  text-align: center;
  line-height: 1.2;
  font-weight: 700;
  font-size: 2.8rem;
  margin-bottom: 1em;
}
@media only screen and (min-width: 750px) {
  h2 {
    font-size: 3.2rem;
  }
}
h2 .main {
  letter-spacing: 0.05em;
}
h2 .main .hira {
  font-size: 75%;
}
h2 .sub {
  display: block;
  font-size: 1.2rem;
  margin-top: 1.2em;
  font-family: "Roboto", sans-serif;
  color: #4A96FF;
  font-weight: 400;
  letter-spacing: 0.2em;
}
@media only screen and (min-width: 750px) {
  h2 .sub {
    font-size: 1.4rem;
  }
}
h2 .sub.pink {
  color: #FF1D97;
}
h2 .sub.yellow {
  color: #FFE100;
}

.detail_btn {
  cursor: pointer;
}

.cta_btn {
  position: relative;
  display: block;
  border-radius: 10rem;
  box-shadow: 0 4px 0 0 #A11460;
  background: #FF1D97;
  color: #fff;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.7em 0;
  transition: all 0.4s;
}
@media only screen and (min-width: 750px) {
  .cta_btn {
    padding: 0.5em 0 0.7em;
  }
}
.cta_btn span {
  font-size: 1.6rem;
}
.cta_btn::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  width: 0.65em;
  height: 0.65em;
  background: url(../images/cta_arrow.svg) no-repeat center/contain;
}
.cta_btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #A11460;
}

/* modal */
.micromodal-slide {
  display: none;
}
.micromodal-slide.is-open {
  display: block;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  z-index: 1001;
}

.modal__container {
  background-color: #fff;
  padding: vw_sp(20);
  max-width: 80%;
  max-height: 90vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}
@media only screen and (min-width: 750px) {
  .modal__container {
    padding: vw_pc(30);
  }
}
.modal__container .description {
  text-align: left;
  font-weight: normal;
  margin: 1em 0 2em;
  font-size: vw_sp(14);
}
@media only screen and (min-width: 750px) {
  .modal__container .description {
    font-size: vw_pc(20);
  }
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  line-height: 1.25;
  box-sizing: border-box;
  width: 100%;
  font-size: vw_sp(18);
}
@media only screen and (min-width: 750px) {
  .modal__title {
    font-size: vw_pc(28);
  }
}

.modal__close {
  background: transparent;
  border: 0;
  margin-right: 0.5rem;
}

.modal__header .modal__close:before {
  content: "✕";
}

.modal__content {
  color: rgba(0, 0, 0, 0.8);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}

/**************************\
    Demo Animation Style
  \**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.micromodal-slide[aria-hidden=false] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=false] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

/* header */
header {
  position: relative;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
header .call-center {
  background: #333;
  color: #fff;
  height: 4.5rem;
  padding: 0 1rem;
  font-size: 1.4rem;
  text-align: right;
  line-height: 1.1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
@media only screen and (min-width: 750px) {
  header .call-center {
    height: 3rem;
    padding: 0 2rem;
    pointer-events: none;
  }
}
header .call-center a {
  color: inherit;
  text-decoration: none;
}
header .header-news {
  white-space: nowrap;
  overflow: hidden;
  background: #ddd;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .header-news p {
  display: inline-block;
  font-size: 1rem;
  animation: header-news-marquee 20s linear infinite;
}
@media only screen and (min-width: 750px) {
  header .header-news p {
    animation: header-news-marquee-pc 10s linear infinite;
    font-size: 1.1rem;
  }
}

@keyframes header-news-marquee {
  0% {
    transform: translateX(45%);
  }
  100% {
    transform: translateX(-40%);
  }
}
@keyframes header-news-marquee-pc {
  0% {
    transform: translateX(15%);
  }
  100% {
    transform: translateX(-15%);
  }
}
.header_wrap {
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #fff;
}
@media only screen and (min-width: 750px) {
  .header_wrap {
    padding: 1.5rem 4rem;
  }
}
.header_wrap h1 img {
  width: 8rem;
}
@media only screen and (min-width: 750px) {
  .header_wrap h1 img {
    width: 15rem;
  }
}
.header_wrap .right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media only screen and (min-width: 750px) {
  .header_wrap .right {
    gap: 1rem;
  }
}
.header_wrap .right .btn {
  font-size: 1.2rem;
  padding: 1em 1.5em;
  border-radius: 10rem;
}
@media only screen and (min-width: 750px) {
  .header_wrap .right .btn {
    font-size: 1.6rem;
    padding: 0.75em 2em;
  }
}
.header_wrap .right .btn.sim_btn {
  border: solid 0.1rem #01245A;
  color: #01245A;
  font-weight: 700;
  cursor: pointer;
  padding: 0.75em 1em;
}
@media only screen and (min-width: 750px) {
  .header_wrap .right .btn.sim_btn {
    order: 2;
  }
}
.header_wrap .right .btn.biz_btn {
  border: #01245A solid 1px;
  color: #01245A;
  display: none;
}
@media only screen and (min-width: 750px) {
  .header_wrap .right .btn.biz_btn {
    order: 3;
    display: block;
  }
}
.header_wrap .right .btn.cta_btn_header {
  background: #FF1D97;
  color: #fff;
}
@media only screen and (min-width: 750px) {
  .header_wrap .right .btn.cta_btn_header {
    order: 4;
  }
}
.header_wrap .right .nav_btn {
  display: none;
}
@media only screen and (max-width: 749px) {
  .header_wrap .right .nav_btn {
    position: relative;
    display: block;
    width: 2rem;
    height: 1.6rem;
    transition: all 0.4s;
    z-index: 1000;
    margin-left: 1rem;
  }
}
.header_wrap .right .nav_btn span {
  position: absolute;
  width: 100%;
  height: 1px;
  background: #01245A;
  transition: all 0.4s;
}
.header_wrap .right .nav_btn span:first-of-type {
  top: 0;
}
.header_wrap .right .nav_btn span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}
.header_wrap .right .nav_btn span:last-of-type {
  bottom: 0;
}
.header_wrap .right .nav_btn.open span {
  background: #fff;
}
.header_wrap .right .nav_btn.open span:first-of-type {
  top: 1rem;
  transform: rotate(-45deg);
}
.header_wrap .right .nav_btn.open span:nth-last-of-type(2) {
  display: none;
}
.header_wrap .right .nav_btn.open span:last-of-type {
  top: 1rem;
  transform: rotate(45deg);
}
@media only screen and (max-width: 749px) {
  .header_wrap .right nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    font-size: 1.4rem;
    transition: all 0.4s;
    z-index: 999;
  }
}
@media only screen and (min-width: 750px) {
  .header_wrap .right nav {
    order: 1;
    margin-right: 1rem;
  }
}
.header_wrap .right nav.open {
  right: 0;
}
.header_wrap .right nav .nav_menu {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  gap: 2rem;
}
@media only screen and (max-width: 749px) {
  .header_wrap .right nav .nav_menu {
    display: block;
    text-align: center;
    font-size: 1.6rem;
    color: #fff;
  }
}
.header_wrap .right nav .nav_menu li a {
  text-transform: uppercase;
  font-weight: 700;
  color: #333;
}
@media only screen and (max-width: 749px) {
  .header_wrap .right nav .nav_menu li a {
    display: block;
    padding: 1em 0;
    color: #fff;
  }
}
.header_wrap .right nav .nav_menu li.header_btn a {
  color: #fff;
}

/* fv */
.fv {
  background: url(../images/fv_dotted_left.svg) no-repeat top left/100%, url(../images/fv_dotted_right.svg) no-repeat bottom right/100%, url(../images/fv_back.webp) no-repeat bottom center/270%;
}
@media only screen and (min-width: 750px) {
  .fv {
    background: url(../images/fv_dotted_left.svg) no-repeat top left/50rem, url(../images/fv_dotted_right.svg) no-repeat bottom right/50rem, url(../images/fv_back.webp) no-repeat center/cover;
  }
}
.fv .inner {
  padding: 1.5rem 3rem 2.5rem;
}
@media only screen and (min-width: 750px) {
  .fv .inner {
    padding: 5rem 0;
  }
}
.fv .fv_wrap {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
@media only screen and (min-width: 750px) {
  .fv .fv_wrap {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }
}
.fv .fv_wrap .main_catch .text {
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  font-size: 2.1rem;
  color: #01245A;
}
.fv .fv_wrap .main_catch .text .en {
  font-size: 238%;
}
.fv .fv_wrap .main_catch .text .underline_white {
  background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.5) 60%);
}
.fv .fv_wrap .main_catch .text + div {
  margin-top: 1rem;
}
@media only screen and (min-width: 750px) {
  .fv .fv_wrap .main_catch .text + div {
    margin-top: 1.5rem;
  }
}
.fv .fv_wrap .main_catch .monthly_price {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}
.fv .fv_wrap .main_catch .monthly_price .monthly {
  font-size: 2rem;
  background: #01245A;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  padding: 0.5em;
  border-radius: 3px;
  margin-top: 0.5em;
}
.fv .fv_wrap .main_catch .monthly_price .price {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
}
.fv .fv_wrap .main_catch .monthly_price .price p img {
  width: 22.6rem;
}
.fv .fv_wrap .main_catch .monthly_price .price p .yen {
  position: relative;
  font-size: 2.6rem;
  font-weight: 900;
  color: #01245A;
  margin-bottom: 0.5em;
  display: block;
}
.fv .fv_wrap .main_catch .monthly_price .price p .yen .tax_in {
  position: absolute;
  top: -0.8em;
  left: 0.2em;
  font-size: 1rem;
  white-space: nowrap;
  font-weight: 400;
}
@media only screen and (min-width: 750px) {
  .fv .fv_wrap .main_catch .cta {
    margin-top: 1.5rem;
  }
}
.fv .fv_wrap .fv_device {
  position: relative;
  text-align: center;
}
.fv .fv_wrap .fv_device picture {
  position: relative;
  z-index: 2;
}
.fv .fv_wrap .fv_device picture img {
  width: 29.5rem;
}
@media only screen and (min-width: 750px) {
  .fv .fv_wrap .fv_device picture img {
    width: 41rem;
  }
}
.fv .fv_wrap .fv_device .value {
  position: absolute;
  font-family: "BIZ UDGothic", sans-serif;
  color: #fff;
  top: 0;
  right: 2rem;
  font-size: 2rem;
  line-height: 1.1;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  border: solid 1.5px #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 3px #0937A0;
}
@media only screen and (min-width: 750px) {
  .fv .fv_wrap .fv_device .value {
    right: 0;
    font-size: 2.8rem;
    width: 21rem;
    height: 21rem;
  }
}
.fv .fv_wrap .fv_device .value .strong {
  font-size: 180%;
}
@media only screen and (max-width: 749px) {
  .fv .cta {
    margin-top: 1.5rem;
  }
}
.fv .note {
  color: #fff;
  margin-top: 1.6em;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
@media only screen and (min-width: 750px) {
  .fv .note {
    text-align: center;
  }
}
.fv .note a {
  text-decoration: underline;
}

/* fv bパターン */
.fv_b {
  background: url(../images/fv_dotted_left.svg) no-repeat top left/100%, url(../images/fv_dotted_right.svg) no-repeat bottom right/100%, url(../images/fv_back.webp) no-repeat bottom center/270%;
}
@media only screen and (min-width: 750px) {
  .fv_b {
    background: url(../images/fv_dotted_left.svg) no-repeat top left/50rem, url(../images/fv_dotted_right.svg) no-repeat bottom right/50rem, url(../images/fv_back.webp) no-repeat center/cover;
  }
}
.fv_b .inner {
  padding: 1.5rem 3rem 2.5rem;
}
@media only screen and (min-width: 750px) {
  .fv_b .inner {
    padding: 5rem 0;
  }
}
.fv_b .fv_wrap {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
@media only screen and (min-width: 750px) {
  .fv_b .fv_wrap {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }
}
.fv_b .fv_wrap .main_catch .text {
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  font-size: 2.1rem;
  color: #01245A;
}
.fv_b .fv_wrap .main_catch .text .en {
  font-size: 238%;
}
.fv_b .fv_wrap .main_catch .text .underline_white {
  background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.5) 60%);
}
.fv_b .fv_wrap .main_catch .text + div {
  margin-top: 1rem;
}
@media only screen and (min-width: 750px) {
  .fv_b .fv_wrap .main_catch .text + div {
    margin-top: 1.5rem;
  }
}
.fv_b .fv_wrap .main_catch .monthly_price {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}
.fv_b .fv_wrap .main_catch .monthly_price .monthly {
  background: #01245A;
  border-radius: 3px;
}
@media only screen and (min-width: 750px) {
  .fv_b .fv_wrap .main_catch .monthly_price .monthly {
    margin-top: 0.5rem;
  }
}
.fv_b .fv_wrap .main_catch .monthly_price .monthly span {
  display: inline-block;
  font-size: 1.6rem;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  padding: 0.5em;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  letter-spacing: -0.4em;
  text-indent: -0.4em;
}
@media only screen and (min-width: 750px) {
  .fv_b .fv_wrap .main_catch .monthly_price .monthly span {
    font-size: 2.2rem;
  }
}
.fv_b .fv_wrap .main_catch .monthly_price .price {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
}
.fv_b .fv_wrap .main_catch .monthly_price .price p img {
  width: 28.7rem;
}
@media only screen and (min-width: 750px) {
  .fv_b .fv_wrap .main_catch .monthly_price .price p img {
    width: 40.2rem;
  }
}
@media only screen and (min-width: 750px) {
  .fv_b .fv_wrap .main_catch .cta {
    margin-top: 1.5rem;
  }
}
.fv_b .fv_wrap .fv_device {
  position: relative;
  text-align: center;
}
.fv_b .fv_wrap .fv_device picture {
  position: relative;
  z-index: 2;
}
.fv_b .fv_wrap .fv_device picture img {
  width: 29.5rem;
}
@media only screen and (min-width: 750px) {
  .fv_b .fv_wrap .fv_device picture img {
    width: 41rem;
  }
}
.fv_b .fv_wrap .fv_device .value {
  position: absolute;
  font-family: "BIZ UDGothic", sans-serif;
  color: #fff;
  top: 0;
  right: 2rem;
  font-size: 2rem;
  line-height: 1.1;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  border: solid 1.5px #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 3px #0937A0;
}
@media only screen and (min-width: 750px) {
  .fv_b .fv_wrap .fv_device .value {
    right: 0;
    font-size: 2.8rem;
    width: 21rem;
    height: 21rem;
  }
}
.fv_b .fv_wrap .fv_device .value_wrap {
  margin-top: -1rem;
}
.fv_b .fv_wrap .fv_device .value .strong {
  font-size: 195%;
}
.fv_b .fv_wrap .fv_device .value .strong.en {
  font-weight: 600;
}
.fv_b .fv_wrap .fv_device .value .yen {
  position: relative;
}
.fv_b .fv_wrap .fv_device .value .yen .tax {
  position: absolute;
  top: -1em;
  left: 0;
  font-size: 0.8rem;
  white-space: nowrap;
}
@media only screen and (min-width: 750px) {
  .fv_b .fv_wrap .fv_device .value .yen .tax {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 749px) {
  .fv_b .cta {
    margin-top: 1.5rem;
  }
}
.fv_b .note {
  color: #fff;
  margin-top: 1.6em;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
@media only screen and (min-width: 750px) {
  .fv_b .note {
    text-align: center;
  }
}
.fv_b .note a {
  text-decoration: underline;
}

/* 豊富な特典 */
@media only screen and (min-width: 750px) {
  .benefits .inner {
    padding: 6rem 22rem;
  }
}
@media only screen and (min-width: 750px) {
  .benefits .btn_wrap ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
.benefits .btn_wrap ul li a {
  position: relative;
  display: block;
  text-align: center;
  border-radius: 10rem;
  background: linear-gradient(180deg, #4A96FF 0%, #4066C9 100%);
  box-shadow: 0 4px 0 0 #0937A0;
  font-size: 2rem;
  color: #fff;
  font-weight: 700;
  padding: 1em 0;
  line-height: 1.2;
  transition: all 0.4s;
}
.benefits .btn_wrap ul li a::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  background: url(../images/down_arrow_white.svg) no-repeat center/contain;
  width: 0.6em;
  height: 0.6em;
}
@media only screen and (min-width: 750px) {
  .benefits .btn_wrap ul li a::after {
    right: 0.8em;
  }
}
.benefits .btn_wrap ul li a .en {
  font-size: 140%;
  line-height: 1;
}
.benefits .btn_wrap ul li a:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #0937A0;
}
@media only screen and (max-width: 749px) {
  .benefits .btn_wrap ul li + li {
    margin-top: 1.5rem;
  }
}
.benefits .note {
  text-align: center;
}

/* 選ばれる理由 */
.reasons {
  background: url(../images/fv_back.webp) no-repeat top center/cover;
}
@media only screen and (min-width: 750px) {
  .reasons {
    background: url(../images/fv_back.webp) no-repeat top center/cover;
  }
}
@media only screen and (min-width: 750px) {
  .reasons .inner {
    padding: 6rem 25rem;
  }
}
.reasons h2 {
  margin-bottom: 0;
}
.reasons .award {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}
@media only screen and (min-width: 750px) {
  .reasons .award {
    gap: 1.5rem;
  }
}
.reasons .award picture img {
  width: 8.4rem;
}
@media only screen and (min-width: 750px) {
  .reasons .award picture img {
    width: 12rem;
  }
}
.reasons .award p .gold {
  font-size: 1.5rem;
  background: linear-gradient(186deg, #BF8A2D 3.41%, #DDC670 44.88%, #B1781A 86.35%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
@media only screen and (min-width: 750px) {
  .reasons .award p .gold {
    font-size: 2.4rem;
  }
}
.reasons .award p .mark {
  display: inline-block;
  font-size: 60%;
  color: #333;
}
.reasons .award + div {
  margin-top: 1.5rem;
}
@media only screen and (min-width: 750px) {
  .reasons .award + div {
    margin-top: 3.5rem;
  }
}
@media only screen and (min-width: 750px) {
  .reasons .reason_wrap .reason_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}
.reasons .reason_wrap .reason_list li {
  position: relative;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  padding: 2rem 2rem 2rem 5.5rem;
}
@media only screen and (max-width: 749px) {
  .reasons .reason_wrap .reason_list li {
    margin-left: 3rem;
  }
}
@media only screen and (min-width: 750px) {
  .reasons .reason_wrap .reason_list li {
    padding: 5rem 2rem 2.5rem;
  }
}
.reasons .reason_wrap .reason_list li figure {
  position: absolute;
  top: 50%;
  left: -3rem;
  width: 7rem;
  height: 7rem;
  transform: translateY(-50%);
}
@media only screen and (min-width: 750px) {
  .reasons .reason_wrap .reason_list li figure {
    top: -4.25rem;
    left: 50%;
    width: 8.5rem;
    height: 8.5rem;
    transform: translate(-50%, 0);
  }
}
.reasons .reason_wrap .reason_list li h3 {
  color: #01245A;
  line-height: 1.2;
  font-size: 1.8rem;
  font-weight: 700;
}
@media only screen and (min-width: 750px) {
  .reasons .reason_wrap .reason_list li h3 {
    font-size: 2rem;
    text-align: center;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.reasons .reason_wrap .reason_list li p {
  font-size: 1.2rem;
  line-height: 1.4;
  margin-top: 0.5em;
}
@media only screen and (min-width: 750px) {
  .reasons .reason_wrap .reason_list li p {
    font-size: 1.4rem;
    margin-top: 1em;
  }
}
@media only screen and (max-width: 749px) {
  .reasons .reason_wrap .reason_list li + li {
    margin-top: 1rem;
  }
}
.reasons .note {
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
.reasons .cta .cta_btn {
  margin-top: 2rem;
}
@media only screen and (min-width: 750px) {
  .reasons .cta .cta_btn {
    width: 50rem;
    margin: 3rem auto 0;
  }
}

/* お客様の声 */
.voice {
  background: #F6F6F6;
}
@media only screen and (min-width: 750px) {
  .voice .inner {
    padding: 6rem 27rem;
  }
}
@media only screen and (max-width: 749px) {
  .voice .voice_slider {
    padding-bottom: 2.5rem;
  }
}
@media only screen and (max-width: 749px) {
  .voice .voice_slider .splide__list {
    align-items: flex-start;
  }
}
@media only screen and (min-width: 750px) {
  .voice .voice_slider.is-initialized:not(.is-active) .voice_slider_wrap ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }
}
.voice .voice_slider .splide__pagination__page.is-active {
  background: #4066C9;
  transform: scale(1);
}
.voice .voice_slider .splide__arrows .splide__arrow {
  background: #4066C9;
  margin-top: -1.5em;
}
.voice .voice_slider .splide__arrows .splide__arrow--prev {
  left: -1em;
}
.voice .voice_slider .splide__arrows .splide__arrow--next {
  right: -1em;
}
.voice .voice_slider .splide__arrows svg {
  fill: #fff;
}
.voice .voice_slider .voice_slider_wrap ul li {
  background: #fff;
  padding: 2rem;
  border: solid 1px #ddd;
  border-radius: 5px;
  display: flex;
  gap: 1.5rem;
}
@media only screen and (min-width: 750px) {
  .voice .voice_slider .voice_slider_wrap ul li {
    width: calc(50% - 1rem);
  }
}
.voice .voice_slider .voice_slider_wrap ul li figure img {
  width: 8rem;
  height: 8rem;
}
@media only screen and (min-width: 750px) {
  .voice .voice_slider .voice_slider_wrap ul li figure img {
    width: 10rem;
    height: 10rem;
  }
}
.voice .voice_slider .voice_slider_wrap ul li h3 {
  color: #4066C9;
  font-weight: 700;
  font-size: 1.4rem;
}
@media only screen and (min-width: 750px) {
  .voice .voice_slider .voice_slider_wrap ul li h3 {
    font-size: 1.6rem;
  }
}
.voice .voice_slider .voice_slider_wrap ul li .comment {
  font-size: 1.2rem;
  margin-top: 0.5em;
}
@media only screen and (min-width: 750px) {
  .voice .voice_slider .voice_slider_wrap ul li .comment {
    font-size: 1.4rem;
  }
}
.voice .voice_slider .voice_slider_wrap ul li .profile {
  font-size: 1rem;
  text-align: right;
}

/* 他社との比較 */
.comparison .inner {
  padding: 4rem 2.5rem;
}
@media only screen and (min-width: 750px) {
  .comparison .inner {
    padding: 6rem 38rem;
  }
}
.comparison .table_wrap table {
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
  font-size: 1rem;
}
@media only screen and (min-width: 750px) {
  .comparison .table_wrap table {
    font-size: 1.4rem;
  }
}
.comparison .table_wrap table thead th {
  width: 25%;
  text-align: center;
  vertical-align: middle;
  padding: 1em 0;
  background: #888;
  color: #fff;
}
.comparison .table_wrap table thead th.strong {
  background: #FF1D97;
}
.comparison .table_wrap table thead th:first-child {
  background: none;
}
@media only screen and (min-width: 750px) {
  .comparison .table_wrap table thead th {
    width: 22%;
  }
  .comparison .table_wrap table thead th:first-child {
    width: 24%;
  }
  .comparison .table_wrap table thead th.strong {
    width: 32%;
  }
}
.comparison .table_wrap table tbody tr th {
  text-align: center;
  vertical-align: middle;
  background: #01245A;
  color: #fff;
}
.comparison .table_wrap table tbody tr td {
  background: #eee;
  font-weight: 700;
  padding: 0.5rem 0;
}
.comparison .table_wrap table tbody tr td figure {
  margin: 0 auto;
  width: 3.5rem;
  height: 3.5rem;
}
@media only screen and (min-width: 750px) {
  .comparison .table_wrap table tbody tr td figure {
    width: 4rem;
    height: 4rem;
  }
}
.comparison .table_wrap table tbody tr td p {
  text-align: center;
  margin-top: 0.25em;
  line-height: 1.2;
}
@media only screen and (max-width: 749px) {
  .comparison .table_wrap table tbody tr td p.two_lines {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.comparison .table_wrap table tbody tr td.strong {
  background: #FFE4F2;
}
.comparison .table_wrap table tbody tr td.strong p {
  color: #FF1D97;
}

/* プラン */
.plan {
  background: #4066C9;
}
@media only screen and (min-width: 750px) {
  .plan .inner {
    padding: 6rem 27rem;
  }
}
.plan h2 .main {
  color: #fff;
}
.plan h2 .main .en {
  font-size: 142%;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.9rem;
  }
}
.plan .plan_wrap .plan_list li {
  font-weight: 700;
  position: relative;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}
.plan .plan_wrap .plan_list li .recommend {
  position: absolute;
  top: -1.5rem;
  left: -1.3rem;
  width: 7rem;
  height: 7rem;
  background: #FFE3F2;
  color: #FF1D97;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .recommend {
    top: -2.2rem;
    left: -2.4rem;
  }
}
.plan .plan_wrap .plan_list li .recommend .en {
  font-size: 125%;
}
.plan .plan_wrap .plan_list li .top {
  background: #01245A;
  color: #fff;
  border-radius: 5px 5px 0 0;
  text-align: center;
  font-size: 1.8rem;
  padding: 0.6em 0;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .top {
    font-size: 1.4rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap {
  padding: 1.5rem 2rem 2.5rem;
}
.plan .plan_wrap .plan_list li .content_wrap .plan_name {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 0.625em;
  color: #4066C9;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .plan_name {
    font-size: 1.9rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .device_image {
  position: relative;
  text-align: center;
}
.plan .plan_wrap .plan_list li .content_wrap .device_image img {
  width: 23.7rem;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .device_image img {
    width: 18rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .device_image .strengths {
  position: absolute;
  top: 0;
  left: 1.8rem;
  line-height: 1.2;
  color: #FF1D97;
  font-size: 1.4rem;
  width: 12.5rem;
  height: 10.6rem;
  background: url(../images/strengths_line.svg) no-repeat top center/contain;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1em;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .device_image .strengths {
    font-size: 1.1rem;
    width: 10rem;
    height: 8.6rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .device_image .strengths .middle {
  font-size: 1.6rem;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .device_image .strengths .middle {
    font-size: 1.2rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .device_image .strengths .en {
  font-size: 150%;
}
.plan .plan_wrap .plan_list li .content_wrap .device_image .strengths .strong {
  font-size: 125%;
}
.plan .plan_wrap .plan_list li .content_wrap .device_image + div {
  margin-top: 1.3rem;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .device_image + div {
    margin-top: 1.1rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  white-space: nowrap;
  font-size: 3rem;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .price {
    font-size: 2.4rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .price .en {
  font-size: 200%;
  color: #4066C9;
  margin-left: 0.05em;
}
.plan .plan_wrap .plan_list li .content_wrap .price .yen {
  display: inline-block;
  position: relative;
}
.plan .plan_wrap .plan_list li .content_wrap .price .yen .tax_in {
  position: absolute;
  top: -0.4em;
  left: 0.2em;
  font-size: 1rem;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .price .yen .tax_in {
    font-size: 0.8rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .price + div {
  margin-top: 2rem;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .price + div {
    margin-top: 1.5rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .cta a {
  font-size: 1.8rem;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .cta a {
    font-size: 1.4rem;
    padding: 1em 0;
    box-shadow: 0 3px 0 #A11460;
  }
  .plan .plan_wrap .plan_list li .content_wrap .cta a:hover {
    box-shadow: 0 1px 0 #A11460;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .cta + div {
  margin-top: 2rem;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .cta + div {
    margin-top: 1.5rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .detail_btn {
  border-radius: 10rem;
  border: solid #333 2px;
  font-size: 1.4rem;
  padding: 0.8em 0;
  text-align: center;
  position: relative;
}
@media only screen and (min-width: 750px) {
  .plan .plan_wrap .plan_list li .content_wrap .detail_btn {
    font-size: 1.1rem;
  }
}
.plan .plan_wrap .plan_list li .content_wrap .detail_btn::after {
  position: absolute;
  content: "";
  background: url(../images/glass_navy.svg) no-repeat center/contain;
  width: 1.28em;
  height: 1.28em;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
}
.plan .plan_wrap .plan_list li .content_wrap {
  /*modal*/
}
.plan .plan_wrap .plan_list li .content_wrap .plan_table_wrap {
  padding: 0 2rem 2rem;
}
.plan .plan_wrap .plan_list li .content_wrap .plan_table_wrap table {
  width: 100%;
  border-left: solid 1px #ddd;
  border-top: solid 1px #ddd;
}
.plan .plan_wrap .plan_list li .content_wrap .plan_table_wrap table tr th {
  background: #333;
  color: #fff;
  padding: 0.5em;
  width: 30%;
  text-align: center;
  vertical-align: middle;
  border-bottom: solid 1px #fff;
  font-size: 1.4rem;
}
.plan .plan_wrap .plan_list li .content_wrap .plan_table_wrap table tr td {
  padding: 0.5em 1em;
  vertical-align: middle;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}
.plan .plan_wrap .plan_list li .content_wrap .plan_table_wrap table tr td .en {
  font-size: 120%;
}
.plan .plan_wrap .plan_list li .content_wrap .plan_table_wrap table tr td .tax_in {
  font-size: 1rem;
}
.plan .plan_wrap .plan_list li .content_wrap .plan_table_wrap table tr td .note {
  margin-top: 0;
}
.plan .plan_wrap .plan_list li .content_wrap .plan_table_wrap table tr td a {
  text-decoration: underline;
  color: #4A96FF;
}
.plan .plan_wrap .plan_list li:first-child .top {
  margin-left: 2.2em;
}
@media only screen and (max-width: 749px) {
  .plan .plan_wrap .plan_list li + li {
    margin-top: 3rem;
  }
}

/* 端末情報 */
.device_info {
  background: #F6F6F6;
  font-weight: 700;
  line-height: 1;
}
@media only screen and (min-width: 750px) {
  .device_info .inner {
    padding: 6rem 32rem;
  }
}
.device_info .device_warp {
  font-size: 1.4rem;
}
@media only screen and (min-width: 750px) {
  .device_info .device_warp .device_list li {
    display: flex;
    justify-content: center;
    gap: 10rem;
  }
}
@media only screen and (min-width: 750px) {
  .device_info .device_warp .device_list li .pc_right {
    order: 2;
    width: 33.1rem;
  }
}
@media only screen and (min-width: 750px) {
  .device_info .device_warp .device_list li .pc_right.l13 {
    margin-top: 1.8rem;
  }
}
.device_info .device_warp .device_list li .pc_right .type {
  display: flex;
  gap: 1rem;
}
.device_info .device_warp .device_list li .pc_right .type p {
  text-align: center;
  border-radius: 5px;
  width: 50%;
  background: #BABABA;
  color: #fff;
  padding: 0.6em 0;
}
.device_info .device_warp .device_list li .pc_right .type p:first-child.on {
  background: #FF1D97;
}
.device_info .device_warp .device_list li .pc_right .type p:nth-child(2).on {
  background: #4066C9;
}
.device_info .device_warp .device_list li .pc_right .type + h3 {
  margin-top: 1.5rem;
}
.device_info .device_warp .device_list li .pc_right h3 {
  text-align: center;
}
.device_info .device_warp .device_list li .pc_right h3 .sub + .name {
  margin-top: 1rem;
}
.device_info .device_warp .device_list li .pc_right h3 .name {
  font-size: 2.8rem;
}
.device_info .device_warp .device_list li .pc_right h3 .name.long {
  letter-spacing: -0.01em;
}
@media only screen and (max-width: 749px) {
  .device_info .device_warp .device_list li .pc_right h3 + .image {
    margin-top: 6rem;
  }
}
.device_info .device_warp .device_list li .pc_right .image {
  margin: 0 auto;
}
.device_info .device_warp .device_list li .pc_right .image picture {
  position: relative;
  z-index: 1;
}
.device_info .device_warp .device_list li .pc_right .image.dock {
  width: 25.2rem;
  position: relative;
  margin-bottom: 6rem;
}
.device_info .device_warp .device_list li .pc_right .image.dock::after {
  position: absolute;
  content: "";
  background: url(../images/back_dock.webp) no-repeat center/contain;
  width: 38rem;
  height: 38rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.device_info .device_warp .device_list li .pc_right .image.l13 {
  width: 13.7rem;
  margin-top: 3rem;
  position: relative;
}
.device_info .device_warp .device_list li .pc_right .image.l13::after {
  position: absolute;
  content: "";
  background: url(../images/back_l13.webp) no-repeat center/contain;
  width: 35rem;
  height: 35rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.device_info .device_warp .device_list li .pc_right .image.x12 {
  width: 26rem;
  position: relative;
  margin-bottom: 6rem;
}
.device_info .device_warp .device_list li .pc_right .image.x12::after {
  position: absolute;
  content: "";
  background: url(../images/back_x12.webp) no-repeat center/contain;
  width: 38rem;
  height: 38rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.device_info .device_warp .device_list li .pc_right .communication_list {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
@media only screen and (max-width: 749px) {
  .device_info .device_warp .device_list li .pc_right .communication_list {
    position: relative;
    z-index: 1;
  }
}
.device_info .device_warp .device_list li .pc_right .communication_list p {
  text-align: center;
  background: #fff;
  border-radius: 5px;
  padding: 0.6em 0;
}
.device_info .device_warp .device_list li .pc_right .communication_list + div {
  margin-top: 1.5rem;
}
.device_info .device_warp .device_list li .pc_right .another_info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.device_info .device_warp .device_list li .pc_right .another_info div .ja {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.device_info .device_warp .device_list li .pc_right .another_info div .number .en {
  font-size: 2rem;
}
.device_info .device_warp .device_list li .pc_right .another_info div + div {
  border-left: solid 1px #D9D9D9;
}
.device_info .device_warp .device_list li .pc_right .another_info + div {
  margin-top: 2rem;
}
.device_info .device_warp .device_list li .pc_right .detail_btn {
  position: relative;
  background: #333;
  color: #fff;
  text-align: center;
  border-radius: 10rem;
  padding: 1.28em 0;
  transition: all 0.4s;
}
.device_info .device_warp .device_list li .pc_right .detail_btn::after {
  position: absolute;
  content: "";
  background: url(../images/down_arrow_white.svg) no-repeat center/contain;
  width: 0.7em;
  height: 0.7em;
  top: 50%;
  right: 1.5em;
  transform: translateY(-50%);
}
.device_info .device_warp .device_list li .pc_right .detail_btn.open {
  border-radius: 5px 5px 0 0;
}
.device_info .device_warp .device_list li .pc_right .contents_box {
  display: none;
  background: #fff;
  border-radius: 0 0 5px 5px;
  padding: 1em;
}
.device_info .device_warp .device_list li .pc_right .contents_box .table_wrap table {
  line-height: 1.2;
  width: 100%;
  font-size: 1.2rem;
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
}
.device_info .device_warp .device_list li .pc_right .contents_box .table_wrap table tr th {
  background: #888;
  color: #fff;
  padding: 0.5em;
  width: 30%;
  border-bottom: solid 1px #fff;
  font-weight: 500;
}
.device_info .device_warp .device_list li .pc_right .contents_box .table_wrap table tr td {
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  padding: 0.5em;
  font-weight: 400;
}
.device_info .device_warp .device_list li .pc_right .contents_box .note {
  text-align: left;
}
.device_info .device_warp .device_list li .pc_right .note {
  text-align: center;
}
.device_info .device_warp .device_list li .pc_left {
  text-align: center;
}
@media only screen and (min-width: 750px) {
  .device_info .device_warp .device_list li .pc_left.dock {
    margin-top: 6rem;
  }
}
@media only screen and (min-width: 750px) {
  .device_info .device_warp .device_list li .pc_left.x12 {
    margin-top: 6rem;
  }
}
.device_info .device_warp .device_list li .pc_left .image {
  margin: 0 auto;
}
.device_info .device_warp .device_list li .pc_left .image picture {
  position: relative;
  z-index: 1;
}
.device_info .device_warp .device_list li .pc_left .image.dock {
  width: 28rem;
  position: relative;
}
.device_info .device_warp .device_list li .pc_left .image.dock::after {
  position: absolute;
  content: "";
  background: url(../images/back_dock.webp) no-repeat center/contain;
  width: 50rem;
  height: 50rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.device_info .device_warp .device_list li .pc_left .image.l13 {
  width: 15.6rem;
  position: relative;
}
.device_info .device_warp .device_list li .pc_left .image.l13::after {
  position: absolute;
  content: "";
  background: url(../images/back_l13.webp) no-repeat center/contain;
  width: 42rem;
  height: 42rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.device_info .device_warp .device_list li .pc_left .image.x12 {
  width: 30.7rem;
  position: relative;
}
.device_info .device_warp .device_list li .pc_left .image.x12::after {
  position: absolute;
  content: "";
  background: url(../images/back_x12.webp) no-repeat center/contain;
  width: 42rem;
  height: 42rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.device_info .device_warp .device_list li .pc_left .link_wrap {
  text-align: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 2rem;
}
@media only screen and (min-width: 750px) {
  .device_info .device_warp .device_list li .pc_left .link_wrap {
    margin-top: 4rem;
  }
}
.device_info .device_warp .device_list li .pc_left .link_wrap a p {
  text-decoration: underline;
  position: relative;
  display: inline-block;
  padding-right: 2em;
}
.device_info .device_warp .device_list li .pc_left .link_wrap a p::after {
  position: absolute;
  content: "";
  background: url(../images/icon_link.svg) no-repeat center/contain;
  width: 1.4em;
  height: 1.4em;
  top: 0;
  right: 0;
}
.device_info .device_warp .device_list li .pc_left .note {
  text-align: center;
}
.device_info .device_warp .device_list li + li {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: solid 1px #d9d9d9;
}
@media only screen and (min-width: 750px) {
  .device_info .device_warp .device_list li + li {
    margin-top: 6rem;
    padding-top: 6rem;
  }
}

/* 1ヶ月お試しモニター */
.trial {
  background: url(../images/fv_back.webp) no-repeat top center/cover;
}
@media only screen and (min-width: 750px) {
  .trial {
    background: url(../images/fv_back.webp) no-repeat center center/cover;
  }
}
@media only screen and (min-width: 750px) {
  .trial .inner {
    padding: 6rem 19.6rem;
  }
}
.trial h2 .main {
  letter-spacing: 0;
  white-space: nowrap;
}
.trial .main_content {
  position: relative;
  width: 25.7rem;
  height: 25.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 750px) {
  .trial .main_content {
    width: 77.5rem;
    height: 28.4rem;
  }
}
.trial .main_content .text {
  position: relative;
  z-index: 1;
  font-size: 1.8rem;
  color: #01245A;
  font-weight: 700;
}
@media only screen and (max-width: 749px) {
  .trial .main_content .text {
    margin-left: -3rem;
  }
}
@media only screen and (min-width: 750px) {
  .trial .main_content .text {
    font-size: 2.6rem;
    text-align: center;
  }
}
.trial .main_content .text .small {
  font-size: 77%;
  color: #888;
  font-weight: 400;
  line-height: 1.4;
  display: inline-block;
}
.trial .main_content .text .hira {
  font-size: 77%;
}
.trial .main_content .text .strong {
  font-size: 133%;
}
.trial .main_content::before {
  position: absolute;
  content: "";
  z-index: 3;
  background: url(../images/trial_device_sp.webp) no-repeat center/contain;
  width: 15.9rem;
  height: 23.8rem;
  top: 2.5rem;
  right: -7.5rem;
}
@media only screen and (min-width: 750px) {
  .trial .main_content::before {
    background: url(../images/trial_device_pc.webp) no-repeat center/contain;
    width: 37.9rem;
    height: 35.7rem;
    top: -6.5rem;
    right: -13.3rem;
  }
}
.trial .main_content::after {
  position: absolute;
  content: "";
  background: #FFF;
  filter: blur(20px);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: -2.2rem;
}
@media only screen and (min-width: 750px) {
  .trial .main_content::after {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #FFF 24.04%, #fff 100%);
    border-radius: 0;
  }
}
.trial .btn_wrap {
  margin-top: 3rem;
}
@media only screen and (min-width: 750px) {
  .trial .btn_wrap {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
  }
}
.trial .btn_wrap .detail_wrap .detail_btn {
  position: relative;
  background: #fff;
  font-size: 1.2rem;
  padding: 1em 0;
  text-align: center;
  border-radius: 10rem;
  color: #01245A;
  font-weight: 700;
  transition: all 0.4s;
}
@media only screen and (min-width: 750px) {
  .trial .btn_wrap .detail_wrap .detail_btn {
    font-size: 1.4rem;
    margin-top: 1em;
  }
}
.trial .btn_wrap .detail_wrap .detail_btn::after {
  position: absolute;
  content: "";
  background: url(../images/down_arrow_navy.svg) no-repeat center/contain;
  width: 1em;
  height: 1em;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
}
.trial .btn_wrap .detail_wrap .detail_btn.open {
  border-radius: 5px 5px 0 0;
}
.trial .btn_wrap .detail_wrap .contents_box {
  background: rgba(255, 255, 255, 0.5);
  padding: 1.5rem 2rem 2rem;
  border-radius: 0 0 5px 5px;
  font-size: 1.4rem;
}
@media only screen and (max-width: 749px) {
  .trial .btn_wrap .detail_wrap + .cta {
    margin-top: 2rem;
  }
}
.trial .note {
  color: #fff;
}

/* 端末代金実質無料とは？ */
.device_fee {
  background: linear-gradient(180deg, #F1F6FF 0%, #FFF 100%);
}
@media only screen and (min-width: 750px) {
  .device_fee .inner {
    padding: 6rem 32rem;
  }
}
.device_fee .intro .pink {
  font-weight: 700;
}
.device_fee .intro + div {
  margin-top: 2rem;
}
@media only screen and (min-width: 750px) {
  .device_fee .fee_wrap {
    display: flex;
    align-items: center;
    gap: 4rem;
  }
}
.device_fee .fee_wrap .bubble {
  position: relative;
  background: #4066C9;
  border-radius: 5px;
  padding: 2rem 2rem 0;
  display: flex;
  gap: 2rem;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.15));
}
@media only screen and (min-width: 750px) {
  .device_fee .fee_wrap .bubble {
    padding: 2rem 3rem 0;
    gap: 2.5rem;
  }
}
.device_fee .fee_wrap .bubble figure {
  width: 12.3rem;
}
@media only screen and (min-width: 750px) {
  .device_fee .fee_wrap .bubble figure {
    width: 13.5rem;
  }
}
.device_fee .fee_wrap .bubble p {
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  font-size: 1.6rem;
}
@media only screen and (min-width: 750px) {
  .device_fee .fee_wrap .bubble p {
    font-size: 1.7rem;
  }
}
.device_fee .fee_wrap .bubble p .yellow {
  display: inline-block;
  line-height: 1.6;
}
.device_fee .fee_wrap .bubble::after {
  position: absolute;
  content: "";
  background: #4066C9;
}
@media only screen and (max-width: 749px) {
  .device_fee .fee_wrap .bubble::after {
    width: 2.6rem;
    height: 1.2rem;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}
@media only screen and (min-width: 750px) {
  .device_fee .fee_wrap .bubble::after {
    width: 1.3rem;
    height: 2.9rem;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}
@media only screen and (max-width: 749px) {
  .device_fee .fee_wrap .bubble + div {
    margin-top: 3rem;
  }
}
.device_fee .fee_wrap .table_wrap {
  text-align: center;
}
@media only screen and (min-width: 750px) {
  .device_fee .fee_wrap .table_wrap {
    width: 47%;
  }
}
.device_fee .fee_wrap .table_wrap table {
  width: 100%;
  font-size: 1.2rem;
  font-weight: 700;
  border-top: solid #ddd 1px;
  border-left: solid #ddd 1px;
}
@media only screen and (min-width: 750px) {
  .device_fee .fee_wrap .table_wrap table {
    font-size: 1.3rem;
  }
}
.device_fee .fee_wrap .table_wrap table caption {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 750px) {
  .device_fee .fee_wrap .table_wrap table caption {
    font-size: 1.7rem;
  }
}
.device_fee .fee_wrap .table_wrap table thead tr th {
  text-align: center;
  vertical-align: middle;
  color: #fff;
  padding: 0.5em 0;
}
.device_fee .fee_wrap .table_wrap table thead tr th:first-child {
  width: 32%;
  background: #01245A;
}
.device_fee .fee_wrap .table_wrap table thead tr th:nth-child(2) {
  background: #4066C9;
}
.device_fee .fee_wrap .table_wrap table tbody tr th {
  text-align: center;
  vertical-align: baseline;
  padding: 0.5em 0;
  border-right: solid #ddd 1px;
  border-bottom: solid #ddd 1px;
}
.device_fee .fee_wrap .table_wrap table tbody tr th.strong {
  background: #FFE4F2;
  color: #FF1D97;
}
.device_fee .fee_wrap .table_wrap table tbody tr td {
  text-align: center;
  vertical-align: baseline;
  padding: 0.5em 0;
  border-right: solid #ddd 1px;
  border-bottom: solid #ddd 1px;
}
.device_fee .fee_wrap .table_wrap table tbody tr td .en {
  font-size: 133%;
}
.device_fee .fee_wrap .table_wrap table tbody tr td .minus {
  background: #FF1D97;
  color: #fff;
  border-radius: 5px;
  padding: 0.2em 0.5em;
  display: inline-block;
  margin-left: 0.5rem;
}
.device_fee .fee_wrap .table_wrap table tbody tr td .minus .en {
  font-size: 1.2rem;
}
.device_fee .fee_wrap .table_wrap table tbody tr td .minus .yen {
  font-size: 1rem;
}
.device_fee .fee_wrap .table_wrap table tbody tr td.strong {
  background: #FFE4F2;
  color: #FF1D97;
}
.device_fee .fee_wrap .table_wrap table tbody tr td.strong .en {
  font-size: 166%;
}

/* 3ヶ月に1度月額料金が無料 */
.monthly_fee {
  background: linear-gradient(180deg, #FFE4F2 0%, #FFF 100%);
}
@media only screen and (min-width: 750px) {
  .monthly_fee .inner {
    padding: 6rem 27rem;
  }
}
.monthly_fee h2 .main .en {
  font-size: 120%;
}
@media only screen and (min-width: 750px) {
  .monthly_fee .contents_wrap {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}
@media only screen and (min-width: 750px) {
  .monthly_fee .contents_wrap .text {
    width: 50%;
  }
}
@media only screen and (max-width: 749px) {
  .monthly_fee .contents_wrap .text + div {
    margin-top: 2rem;
  }
}
.monthly_fee .contents_wrap .image p {
  text-align: center;
  margin-bottom: 0.5em;
  font-size: 1.6rem;
  font-weight: 700;
}
.monthly_fee .contents_wrap .image .image_wrap {
  background: #fff;
  border-radius: 5px;
  padding: 2.5rem 1.5rem;
}
.monthly_fee .cta {
  margin-top: 2rem;
}
@media only screen and (min-width: 750px) {
  .monthly_fee .cta {
    width: 55%;
    margin: 4rem auto 0;
  }
}

/* オプション */
.option {
  background: #4066C9;
}
@media only screen and (min-width: 750px) {
  .option .inner {
    padding: 6rem 27rem;
  }
}
.option h2 {
  margin-bottom: 1.7em;
}
.option h2 .main {
  color: #fff;
}
.option .option_list {
  row-gap: 4.5rem;
  column-gap: 1rem;
}
@media only screen and (max-width: 749px) {
  .option .option_list {
    display: flex;
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 750px) {
  .option .option_list {
    display: flex;
    row-gap: 2rem;
  }
}
.option .option_list li {
  position: relative;
  background: #fff;
  border-radius: 5px;
  padding: 4rem 1.5rem 2rem;
}
@media only screen and (max-width: 749px) {
  .option .option_list li {
    width: calc(50% - 0.5rem);
  }
}
@media only screen and (min-width: 750px) {
  .option .option_list li {
    padding: 5rem 2rem 2.5rem;
  }
}
.option .option_list li figure {
  position: absolute;
  top: -3.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 7rem;
  height: 7rem;
}
@media only screen and (min-width: 750px) {
  .option .option_list li figure {
    top: -4.25rem;
    width: 8.5rem;
    height: 8.5rem;
  }
}
.option .option_list li h3 {
  text-align: center;
  color: #4066C9;
  font-weight: 700;
  font-size: 1.6rem;
}
@media only screen and (min-width: 750px) {
  .option .option_list li h3 {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 749px) {
  .option .option_list li h3.long {
    letter-spacing: -0.1em;
  }
}
.option .option_list li .price {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 1rem 0;
}
.option .option_list li .price .en {
  font-size: 200%;
  color: #4066C9;
}
.option .option_list li .price .tax_in {
  font-size: 1rem;
}
@media only screen and (min-width: 750px) {
  .option .option_list li .price .tax_in {
    font-size: 1.2rem;
  }
}
.option .option_list li p {
  font-size: 1.2rem;
  flex-grow: 1;
}
@media only screen and (min-width: 750px) {
  .option .option_list li p {
    font-size: 1.4rem;
  }
}
.option .option_list li .detail_btn {
  position: relative;
  text-align: center;
  background: #01245A;
  border-radius: 10rem;
  color: #fff;
  font-size: 1.2rem;
  padding: 1em 0;
  margin-top: 1rem;
}
@media only screen and (min-width: 750px) {
  .option .option_list li .detail_btn {
    font-size: 1.4rem;
    margin-top: 1.5rem;
  }
}
.option .option_list li .detail_btn::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0.75em;
  transform: translateY(-50%);
  background: url(../images/glass_white.svg) no-repeat center/contain;
  width: 1em;
  height: 1em;
}
@media only screen and (min-width: 750px) {
  .option .option_list li .detail_btn::after {
    right: 1em;
  }
}
@media only screen and (max-width: 749px) {
  .option .option_list li:last-child {
    width: 100%;
  }
}
.option .note.bottom {
  color: #fff;
}
.option {
  /*modal*/
}
.option .option_detail_wrap {
  padding: 2rem;
  font-size: 1.2rem;
}
@media only screen and (min-width: 750px) {
  .option .option_detail_wrap {
    font-size: 1.4rem;
  }
}
.option .option_detail_wrap .strong {
  font-weight: 700;
  color: #4066C9;
  margin-bottom: 0.5em;
}
.option .option_detail_wrap .strong.title {
  text-align: center;
  font-size: 1.4rem;
}
@media only screen and (min-width: 750px) {
  .option .option_detail_wrap .strong.title {
    font-size: 1.6rem;
  }
}
.option .option_detail_wrap .sub_heading {
  background: #ddd;
  text-align: center;
  padding: 0.2em 0;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.option .option_detail_wrap a {
  text-decoration: underline;
  color: #4A96FF;
}
@media only screen and (min-width: 750px) {
  .option .option_detail_wrap.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}
@media only screen and (max-width: 749px) {
  .option .option_detail_wrap.grid .contents + .contents {
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: solid 1px #ddd;
  }
}

/* プラスエリアモード対応エリア */
@media only screen and (min-width: 750px) {
  .plus_area_mode .inner {
    padding: 6rem 27rem;
  }
}
.plus_area_mode .map .card4_map {
  height: 20rem;
}
@media only screen and (min-width: 750px) {
  .plus_area_mode .map .card4_map {
    height: 42rem;
  }
}
.plus_area_mode .note {
  line-height: 1.6;
}

/* お申込みの流れ */
.flow {
  background: #4A96FF;
}
@media only screen and (min-width: 750px) {
  .flow .inner {
    padding: 6rem 22rem;
  }
}
.flow h2 .main {
  color: #fff;
}
.flow h2 .main .small {
  font-size: 1.6rem;
}
@media only screen and (min-width: 750px) {
  .flow h2 .main .small {
    font-size: 1.8rem;
  }
}
.flow h2 .main .small .en .number {
  font-size: 150%;
}
@media only screen and (min-width: 750px) {
  .flow .flow_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
.flow .flow_list li {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.flow .flow_list li h3 {
  display: flex;
  font-weight: 600;
}
.flow .flow_list li h3 .step {
  background: #01245A;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1em;
}
.flow .flow_list li h3 .title {
  font-size: 1.6rem;
  color: #01245A;
  padding: 0.5em 1em;
}
.flow .flow_list li .text_wrap {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.flow .flow_list li .text_wrap figure {
  width: 8rem;
  height: 8rem;
}
.flow .flow_list li .text_wrap figure img {
  width: 8rem;
  height: 8rem;
}
.flow .flow_list li .text_wrap p {
  font-size: 1.2rem;
}
@media only screen and (max-width: 749px) {
  .flow .flow_list li + li {
    margin-top: 1.5rem;
  }
}
.flow .cta {
  margin-top: 2rem;
}
@media only screen and (min-width: 750px) {
  .flow .cta {
    width: 50%;
    margin: 3rem auto 0;
  }
}

/* お支払い方法 */
@media only screen and (min-width: 750px) {
  .payment_method .inner {
    padding: 6rem 32rem;
  }
}
@media only screen and (min-width: 750px) {
  .payment_method .method_wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
.payment_method .method_wrap .payment {
  position: relative;
  background: #F1F6FF;
  border-radius: 5px;
  overflow: hidden;
  padding: 2rem 2rem 2.5rem;
}
.payment_method .method_wrap .payment .recommend {
  position: absolute;
  top: 0;
  left: 0;
  background: #4066C9;
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  width: 6.5rem;
  height: 6.5rem;
}
.payment_method .method_wrap .payment .recommend span {
  display: inline-block;
  transform: rotate(-45deg);
  font-size: 1.2rem;
  margin-top: 1em;
  margin-right: 1em;
  white-space: nowrap;
  font-weight: 700;
}
@media only screen and (min-width: 750px) {
  .payment_method .method_wrap .payment .recommend span {
    font-size: 1.3rem;
  }
}
.payment_method .method_wrap .payment h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.payment_method .method_wrap .payment h3 figure {
  width: 3.5rem;
}
.payment_method .method_wrap .payment h3 p {
  color: #4066C9;
  font-size: 1.8rem;
  font-weight: 700;
}
.payment_method .method_wrap .payment .text {
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.5em;
}
.payment_method .method_wrap .payment .card_type {
  background: #fff;
  padding: 1rem;
}
.payment_method .method_wrap .payment .card_type p {
  font-size: 1.4rem;
  margin-top: 1rem;
  word-break: break-all;
}
.payment_method .method_wrap .payment .cta .cta_btn {
  font-size: 1.6rem;
  padding: 1em 0;
  margin-top: 1.5rem;
}
.payment_method .method_wrap .payment.bank .icon {
  width: 37%;
  margin: 0 auto;
  background: url(../images/icon_bank.svg) no-repeat center/contain;
}
@media only screen and (min-width: 750px) {
  .payment_method .method_wrap .payment.bank {
    background: #F1F6FF;
  }
}
@media only screen and (max-width: 749px) {
  .payment_method .method_wrap .payment + .payment {
    margin-top: 1rem;
  }
}

/* 解約手続き */
.cancellation {
  background: #F6F6F6;
}
.cancellation .detail_btn {
  position: relative;
  text-align: center;
  border-radius: 10rem;
  background: #01245A;
  color: #fff;
  padding: 1.28em 0;
}
@media only screen and (min-width: 750px) {
  .cancellation .detail_btn {
    width: 50rem;
    margin: 0 auto;
  }
}
.cancellation .detail_btn::after {
  position: absolute;
  content: "";
  background: url(../images/glass_white.svg) no-repeat center/contain;
  width: 1em;
  height: 1em;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
}
.cancellation .modal__content .case {
  padding: 0 2rem 2rem;
}
.cancellation .modal__content .case h5 {
  text-align: center;
  margin-bottom: 1em;
  font-size: 1.6rem;
  font-weight: 700;
  color: #01245A;
}
@media only screen and (min-width: 750px) {
  .cancellation .modal__content .case h5 {
    font-size: 2.4rem;
  }
}
@media only screen and (min-width: 750px) {
  .cancellation .modal__content .case ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: flex-start;
    gap: 2rem;
  }
}
.cancellation .modal__content .case ul li {
  position: relative;
}
.cancellation .modal__content .case ul li .step_wrap {
  border-radius: 5px;
  border: solid 2px #4066C9;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.cancellation .modal__content .case ul li .step_wrap .en {
  position: absolute;
  top: 0;
  left: 0;
  background: #4066C9;
  border-radius: 2.5px 0 5px 0;
  padding: 1em;
  font-size: 1.2rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.cancellation .modal__content .case ul li .step_wrap figure {
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
}
.cancellation .modal__content .case ul li .step_wrap figure img {
  width: 5rem;
}
.cancellation .modal__content .case ul li .step_wrap .text_contents h4 {
  color: #4066C9;
  font-weight: 700;
  font-size: 1.4rem;
}
@media only screen and (min-width: 750px) {
  .cancellation .modal__content .case ul li .step_wrap .text_contents h4 {
    font-size: 1.6rem;
  }
}
.cancellation .modal__content .case ul li .step_wrap .text_contents p {
  font-size: 1.2rem;
  margin-top: 0.5em;
}
@media only screen and (min-width: 750px) {
  .cancellation .modal__content .case ul li .step_wrap .text_contents p {
    font-size: 1.4rem;
  }
}
.cancellation .modal__content .case ul li .step_wrap.group_01 .text_contents p {
  min-height: 6.4em;
}
.cancellation .modal__content .case ul li .step_wrap.group_02 .text_contents p {
  min-height: 4.8em;
}
@media only screen and (max-width: 749px) {
  .cancellation .modal__content .case ul li + li {
    margin-top: 2rem;
  }
}
.cancellation .modal__content .case + .case {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: dashed 1px #4066C9;
}
@media only screen and (min-width: 750px) {
  .cancellation .modal__content .case + .case {
    margin-top: 3rem;
    padding-top: 3rem;
  }
}

/* よくある質問 */
@media only screen and (min-width: 750px) {
  .faq .inner {
    padding: 6rem 34.5rem;
  }
}
.faq .faq_wrap ul li dl dt {
  position: relative;
  cursor: pointer;
  background: #F1F6FF;
  padding: 1em 2.2em;
  line-height: 1.2;
  font-weight: 500;
}
.faq .faq_wrap ul li dl dt::before, .faq .faq_wrap ul li dl dt::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.faq .faq_wrap ul li dl dt::before {
  content: "Q";
  font-family: "Roboto", sans-serif;
  font-size: 114%;
  color: #4066C9;
  left: 1rem;
}
.faq .faq_wrap ul li dl dt::after {
  content: "";
  background: url(../images/down_arrow_blue.svg) no-repeat center/contain;
  width: 0.85em;
  height: 0.85em;
  right: 1em;
}
.faq .faq_wrap ul li dl dt.open::after {
  transform: translateY(-50%) rotate(180deg);
}
.faq .faq_wrap ul li dl dd {
  background: #F1F6FF;
  border-top: solid 1px #fff;
  padding: 2rem;
  font-weight: 400;
}
@media only screen and (min-width: 750px) {
  .faq .faq_wrap ul li dl dd {
    padding: 2rem 2rem 2.5rem;
  }
}
.faq .faq_wrap ul li + li {
  margin-top: 0.5rem;
}
.faq .more {
  font-weight: 700;
  text-align: right;
  margin-top: 2rem;
}
.faq .more a {
  padding-right: 2em;
  display: inline-block;
  position: relative;
  transition: all 0.4s;
}
.faq .more a::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0.5em;
  background: url(../images/right_arrow_black.svg) no-repeat center/contain;
  width: 0.85em;
  height: 0.85em;
  transform: translateY(-50%);
  transition: all 0.4s;
}
.faq .more a:hover {
  opacity: 0.8;
}
.faq .more a:hover::after {
  right: 0;
}
.faq .cta {
  margin-top: 3rem;
}
@media only screen and (min-width: 750px) {
  .faq .cta {
    width: 50rem;
    margin: 3rem auto 0;
  }
}

/* 5G CONNECT NEWS */
.news {
  background: #F6F6F6;
}
@media only screen and (min-width: 750px) {
  .news .inner {
    padding: 6rem 32rem;
  }
}
.news .news_wrap {
  background: #fff;
  border: #ddd solid 1px;
  border-radius: 5px;
  height: 18rem;
  overflow: auto;
  padding: 2rem;
}
.news .news_wrap ul li a {
  color: #4A96FF;
  font-weight: 700;
}
.news .news_wrap ul li + li {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: solid #ddd 1px;
}

/* footer */
.footer {
  background: #333;
  color: #fff;
  padding: 4rem 2.5rem;
  font-weight: 400;
  text-align: center;
  font-size: 1.2rem;
}
@media only screen and (min-width: 750px) {
  .footer {
    padding: 4rem 27rem;
    font-size: 1.4rem;
  }
}
.footer .logo {
  width: 17rem;
  margin: 0 auto;
}
.footer .logo + div {
  margin-top: 3rem;
}
.footer .info p:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.footer .info p:first-child .box {
  background: #555;
  font-size: 1rem;
  padding: 0 1em;
}
@media only screen and (min-width: 750px) {
  .footer .info p:first-child .box {
    font-size: 1.2rem;
  }
}
.footer .info + div {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: solid 1px #555;
}
.footer .info .note_wrap {
  margin-top: 1.5rem;
  padding: 1rem;
  border: solid 1px #ffffff;
}
.footer .info .note_wrap .title {
  margin-top: 0;
  font-weight: 700;
  text-align: left;
  justify-content: left;
  color: #ffffff;
}
.footer .info .note_wrap .note {
  text-align: left;
  color: #ffffff;
}
@media only screen and (min-width: 750px) {
  .footer .footer_menu {
    display: flex;
    gap: 3rem;
  }
}
.footer .footer_menu .top_menu {
  display: flex;
}
@media only screen and (max-width: 749px) {
  .footer .footer_menu .top_menu {
    flex-wrap: wrap;
    row-gap: 1.5rem;
  }
}
@media only screen and (min-width: 750px) {
  .footer .footer_menu .top_menu {
    gap: 3rem;
  }
}
@media only screen and (max-width: 749px) {
  .footer .footer_menu .top_menu li {
    width: 50%;
  }
}
@media only screen and (max-width: 749px) {
  .footer .footer_menu .top_menu + ul {
    margin-top: 1.5rem;
  }
}
.footer .copy {
  margin-top: 5rem;
}

/* ===== 料金シミュレーション ===== */
#simulation_modal .modal__overlay {
  z-index: 1000;
}

.sim_modal_container {
  max-width: 96vw;
  width: 35rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: 3rem 2rem;
  position: relative;
}
@media only screen and (min-width: 750px) {
  .sim_modal_container {
    padding: 5rem 6rem;
    width: 100rem;
  }
}
.sim_modal_container .modal__title {
  font-size: 1.8rem;
  text-align: center;
  color: #01245A;
}
@media only screen and (min-width: 750px) {
  .sim_modal_container .modal__title {
    font-size: 4.2rem;
  }
}
.sim_modal_container .title-bottom {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 750px) {
  .sim_modal_container .title-bottom {
    font-size: 2.4rem;
    margin-bottom: 2.5rem;
  }
}
.sim_modal_container .modal__close {
  display: block;
  width: 2rem;
  height: 2rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
@media only screen and (min-width: 750px) {
  .sim_modal_container .modal__close {
    width: 3rem;
    height: 3rem;
    position: absolute;
    right: 2rem;
    top: 2rem;
  }
}
.sim_modal_container .modal__close::before {
  content: "✕";
}

.simulation_wrap .sim_section {
  margin-bottom: 2.5rem;
}
.simulation_wrap .sim_section_title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #01245A;
  margin-bottom: 2rem;
  text-align: center;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_section_title {
    font-size: 2.4rem;
  }
}
.simulation_wrap .sim_section_title span {
  display: inline-block;
  position: relative;
}
.simulation_wrap .sim_section_title span::before, .simulation_wrap .sim_section_title span::after {
  content: "";
  display: block;
  background: #ccc;
  height: 0.1rem;
  width: 10rem;
  position: absolute;
  top: 50%;
  left: -11rem;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_section_title span::before, .simulation_wrap .sim_section_title span::after {
    width: 35rem;
    left: -37rem;
  }
}
.simulation_wrap .sim_section_title span::after {
  left: auto;
  right: -11rem;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_section_title span::after {
    right: -37rem;
  }
}
.simulation_wrap .sim_section_title.sim_section_title_option span::before, .simulation_wrap .sim_section_title.sim_section_title_option span::after {
  width: 8rem;
  left: -9rem;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_section_title.sim_section_title_option span::before, .simulation_wrap .sim_section_title.sim_section_title_option span::after {
    width: 32rem;
    left: -35rem;
  }
}
.simulation_wrap .sim_section_title.sim_section_title_option span::after {
  left: auto;
  right: -9rem;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_section_title.sim_section_title_option span::after {
    right: -35rem;
  }
}
.simulation_wrap .sim_plan_area,
.simulation_wrap .sim_option_area {
  background: transparent;
}
.simulation_wrap .sim_plan_area .plan_wrap,
.simulation_wrap .sim_option_area .plan_wrap {
  padding: 0;
}
.simulation_wrap .sim_plan_area .option_list,
.simulation_wrap .sim_option_area .option_list {
  padding-top: 4.5rem;
}
.simulation_wrap .sim_plan_area .option_list li,
.simulation_wrap .sim_option_area .option_list li {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}
.simulation_wrap .sim_plan_area .note,
.simulation_wrap .sim_option_area .note {
  color: #888;
}
.simulation_wrap .plan_list li > label,
.simulation_wrap .option_list li > label {
  display: block;
  cursor: pointer;
}
.simulation_wrap .plan_list li:has(input:checked),
.simulation_wrap .option_list li:has(input:checked) {
  outline: 3px solid #4066C9;
  box-shadow: 0 8px 20px rgba(64, 102, 201, 0.3);
  transition: outline 0.2s, box-shadow 0.2s;
}
.simulation_wrap .plan_list:has(input:checked) li:not(:has(input:checked)),
.simulation_wrap .option_list:has(input:checked) li:not(:has(input:checked)) {
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter 0.2s, opacity 0.2s;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .plan .plan_wrap .plan_list li label .recommend {
    left: -3rem;
    top: -2.6rem;
  }
}
.simulation_wrap .plan .plan_wrap .plan_list li label .top {
  font-size: 1.4rem;
  margin: 0;
}
.simulation_wrap .plan .plan_wrap .plan_list li label .content_wrap .device_image img {
  width: 16rem;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .plan .plan_wrap .plan_list li label .content_wrap .device_image img {
    width: 18rem;
  }
}
.simulation_wrap .plan .plan_wrap .plan_list li label .content_wrap .device_image .strengths {
  top: -1rem;
  width: 10.5rem;
  height: 9rem;
  padding-top: 0.8rem;
}
.simulation_wrap .plan .plan_wrap .plan_list li label .content_wrap .device_image .strengths .middle {
  font-size: 1.3rem;
}
.simulation_wrap .plan .plan_wrap .plan_list li label .content_wrap .device_image .strengths .small {
  font-size: 1.2rem;
}
.simulation_wrap .plan .plan_wrap .plan_list li label .content_wrap .device_image .strengths .strong {
  font-size: 1.3rem;
}
.simulation_wrap .plan .plan_wrap .plan_list li label .content_wrap .device_image .strengths .en {
  font-size: 130%;
}
.simulation_wrap .sim_option_item.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.simulation_wrap .sim_result {
  background: #F1F6FF;
  border-radius: 0.5rem;
  padding: 2rem;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_result {
    padding: 4rem 5rem;
  }
}
.simulation_wrap .sim_result .btn_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_result .btn_wrap {
    flex-direction: row;
    gap: 3rem;
  }
}
.simulation_wrap .sim_result .btn_wrap .cta {
  width: 100%;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_result .btn_wrap .cta {
    width: calc((100% - 3rem) / 2);
  }
}
.simulation_wrap .sim_result .btn_wrap .cta .cta_btn {
  font-size: 1.4rem;
  width: 100%;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_result .btn_wrap .cta .cta_btn {
    font-size: 1.7rem;
    width: 100%;
  }
}
.simulation_wrap .sim_total {
  text-align: center;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_total {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.simulation_wrap .sim_total picture {
  display: block;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_total picture {
    width: 28.5rem;
    margin-right: 3rem;
  }
}
.simulation_wrap .sim_total .sim_total_price {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_total .sim_total_price {
    font-size: 3.6rem;
  }
}
.simulation_wrap .sim_total .sim_total_price #sim_total_price {
  font-family: "Roboto", sans-serif;
  font-size: 200%;
  color: #4066C9;
}
.simulation_wrap .sim_total .sim_total_price .sim_yen {
  display: inline-block;
  position: relative;
}
.simulation_wrap .sim_total .sim_total_price .sim_yen .sim_tax_in {
  position: absolute;
  top: -1em;
  left: 0.4em;
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
}
.simulation_wrap .sim_accordion {
  background: #01245A;
  color: #fff;
  border-radius: 5px;
  padding: 0.9em 1.5em;
  font-weight: 700;
  font-size: 1.4rem;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.simulation_wrap .sim_accordion::after {
  content: "";
  position: absolute;
  right: 1.5em;
  top: 50%;
  transform: translateY(-50%);
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  border-top: 0.6em solid #fff;
  transition: transform 0.3s;
}
.simulation_wrap .sim_accordion.open::after {
  transform: translateY(-50%) rotate(180deg);
}
.simulation_wrap .sim_monthly_wrap {
  overflow-x: auto;
  margin-top: 1.5rem;
}
.simulation_wrap .sim_monthly_table {
  width: 100%;
  border-collapse: collapse;
  font-weight: 700;
  table-layout: fixed;
}
.simulation_wrap .sim_monthly_table td {
  padding: 0.8em 0.3em;
  text-align: center;
  border: 1px solid #ddd;
  background: #fff;
  vertical-align: middle;
}
.simulation_wrap .sim_monthly_table td.sim_td_free {
  background: #fff0fa;
}
.simulation_wrap .sim_monthly_table td.sim_td_free .sim_m_price {
  color: #FF1D97;
}
.simulation_wrap .sim_monthly_table td.sim_td_first .sim_m_price {
  color: #4066C9;
}
.simulation_wrap .sim_monthly_table .sim_m_num {
  display: block;
  font-size: 1.1rem;
  color: #888;
  font-weight: 400;
  margin-bottom: 0.3em;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_monthly_table .sim_m_num {
    font-size: 1.2rem;
  }
}
.simulation_wrap .sim_monthly_table .sim_m_note {
  display: block;
  font-size: 0.95rem;
  color: #888;
  font-weight: 400;
  margin-bottom: 0.2em;
}
.simulation_wrap .sim_monthly_table .sim_m_price {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}
@media only screen and (min-width: 750px) {
  .simulation_wrap .sim_monthly_table .sim_m_price {
    font-size: 1.4rem;
  }
}/*# sourceMappingURL=style.css.map */