@charset "UTF-8";
*, *:before, *:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body a {
  word-break: break-all !important;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

a:focus {
  outline: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

input, button, textarea, select {
  font-size: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

hr {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
}

.view-sp {
  display: none !important;
}

.view-pc {
  display: block !important;
}
img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

sup {
  font-size: 70%;
  vertical-align: middle;
  top: -0.2rem;
}

.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

.mt10 {
  margin-top: 1rem;
}

.alignL {
  text-align: left;
}

.alignR {
  text-align: right;
}

.alignC {
  text-align: center;
}

.f_c_white {
  color: #FFF;
}

.f_c_black {
  color: #272727;
}

.f_c_glay {
  color: #ccc;
}

.f_c_red {
  color: #ff0004;
}

.f_c_orange {
  color: #eb5505;
}

.f_c_blue {
  color: #0064da;
}

.f_w_nomal {
  font-weight: normal;
}

.f_w_bold {
  font-weight: bold;
}

body {
  overflow-x: hidden !important;
}

.sec_inner {
  width: 100%;
  max-width: 1220px;
  margin: auto;
  padding: 80px 10px;
}
.sec_inner.-small {
  max-width: 1000px;
}

.sec_content {
  margin-top: 40px;
}

.sec-recommend {
  background: #F0FAFF;
}

.sec-checklist {
  border-bottom: 1px solid #80C2E4;
}

.sec-result {
  background: #CCEEFF;
}

.sec-conv {
  padding-top: 20px;
  text-align: center;
}

.ttl.-h2-normal {
  color: #0E0D6A;
  font-size: 2.6666666667rem;
  font-weight: 500;
  text-align: center;
}

.ttl.-h2-icon {
  padding-top: 120px;
  color: #0E0D6A;
  font-size: 2.6666666667rem;
  font-weight: 500;
  text-align: center;
  position: relative;
}
.ttl.-h2-icon::before {
  content: "";
  display: block;
  width: 104px;
  height: 104px;
  background-image: url("/content/dam/kddi-com/biz/lp/bcp/img/result_img.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: calc(50% - 52px);
  top: 0;
}

.btn-wrap {
  display: inline-block;
  margin: auto;
  position: relative;
}
.btn-wrap:focus-visible .btn.-conv > [class*=_text] {
  animation-name: button-animation-text;
  animation-duration: 0.75s;
}
.btn-wrap:focus-visible .btn.-conv::before {
  animation-name: button-animation-bg;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
.btn-wrap:focus-visible .btn.-conv:after {
  animation-name: button-animation-border;
  animation-duration: 0.75s;
}
.btn-wrap:focus-visible .btn_arrow {
  animation-name: button-animation-text;
  animation-duration: 0.75s;
}

.btn.-conv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 88px;
  background-color: #0E0D6A;
  background-image: linear-gradient(90deg, #0E0D6A, #0599E6);
  border-radius: 4px;
  color: #FFF;
  font-weight: bold;
  position: relative;
  overflow: hidden;
}
.btn.-conv .btn_text {
  font-size: 1.8666666667rem;
  position: relative;
  z-index: 1;
}
.btn.-conv .btn_text .small {
  font-size: 1.6rem;
}

.btn_mark {
  position: absolute;
  left: 20px;
  top: -20px;
  z-index: 2;
}

.btn_arrow {
  color: #FFF;
  display: inline-flex;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 24px;
  top: 24px;
  stroke: currentColor;
}

.btn.-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 48px;
  padding: 0 20px;
  background-color: #FFF;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: #0184C8;
  font-size: 1.3333333333rem;
  text-align: center;
  transition: 0.3s;
}
.btn.-mini:focus-visible {
  background-color: #0184C8;
  color: #FFF;
}

.btn_blank {
  width: 20px;
  height: 20px;
}

.btn.-reco {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  padding: 12px 40px 12px 16px;
  background-color: #FFF;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: #0184C8;
  font-size: 1.0666666667rem;
  transition: 0.3s;
  line-height: 1.5;
  text-align: center;
  position: relative;
}
.btn.-reco + .btn.-reco {
  margin-top: 8px;
}
.btn.-reco:focus-visible {
  background-color: #0184C8;
  color: #FFF;
}
.btn.-reco .btn_reco-icon {
  width: 24px;
  height: 24px;
  position: absolute;
  position: absolute;
  right: 16px;
  top: calc(50% - 12px);
}
.btn.-reco .btn_reco-icon.-arrow {
  width: 20px;
  height: 20px;
  top: calc(50% - 9px);
}

@keyframes button-animation-bg {
  0% {
    width: 0;
    left: 0;
  }
  25% {
    width: 100%;
    left: 0;
  }
  75% {
    width: 100%;
    left: 100%;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@keyframes button-animation-text {
  0% {
    color: #FFF;
  }
  25% {
    color: #0e0d6a;
  }
  75% {
    color: #0e0d6a;
  }
  100% {
    color: #FFF;
  }
}
@keyframes button-animation-border {
  0% {
    border-color: #0e0d6a;
  }
  99% {
    border-color: #0e0d6a;
  }
  100% {
    border-color: transparent;
  }
}
@keyframes button-animation-text02 {
  0% {
    background-image: linear-gradient(90deg, #0E0D6A, #0599E6);
  }
  25% {
    background-image: linear-gradient(90deg, #FFF, #FFF);
  }
  60% {
    background-image: linear-gradient(90deg, #FFF, #FFF);
  }
  100% {
    background-image: linear-gradient(90deg, #0E0D6A, #0599E6);
  }
}
@keyframes button-animation-icon {
  0% {
    color: #0699E6;
  }
  75% {
    color: #FFF;
  }
  100% {
    color: #0699E6;
  }
}
.bcp-mv {
  background-color: #CCEEFF;
  background-image: url("/content/dam/kddi-com/biz/lp/bcp/img/mv_bg.png"), url("/content/dam/kddi-com/biz/lp/bcp/img/mv_bg.png");
  background-repeat: repeat-x, repeat-x;
  background-position: top 16px center, bottom 16px center;
  background-size: 60px, 60px;
}
.bcp-mv .sec_inner {
  padding: 0;
}

.bcp-mv_title {
  padding: 34px 0;
}

.bcp-lead_text {
  color: #0E0D6A;
  font-size: 1.4666666667rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}
.bcp-lead_text + .bcp-lead_text {
  margin-top: 1.5em;
}

.reco-flex {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: 80px;
}

.reco-flex_item {
  width: 33.3333333333%;
  padding: 90px 40px 20px;
  background: #FFF;
  border: 1px solid #D7DBDE;
  border-radius: 16px;
  position: relative;
}
.reco-flex_item > img {
  position: absolute;
  left: calc(50% - 80px);
  top: -80px;
}

.reco-flex_name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 4px;
  background-color: #CCEEFF;
  color: #0E0D6A;
  font-size: 1.3333333333rem;
  font-weight: 500;
  border-radius: 99em;
  text-align: center;
}

.reco-flex_desc {
  margin-top: 4px;
  color: #0E0D6A;
  font-size: 1.3333333333rem;
  line-height: 1.75;
  text-align: center;
}

.checklist_item {
  padding: 40px;
  border: 1px solid #D7DBDE;
  border-radius: 16px;
  background: #F0FAFF;
}
.checklist_item + .checklist_item {
  margin-top: 20px;
}

.checklist_text {
  display: flex;
  align-items: center;
  gap: 20px;
}

.checklist_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background-color: #0E0D6A;
  border-radius: 50%;
  color: #FFF;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 2.1333333333rem;
  font-weight: bold;
}

.checklist_q {
  color: #0E0D6A;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.checklist_check {
  display: flex;
  gap: 20px;
}
.checklist_check label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 88px;
  width: 100%;
  background-color: #FFF;
  border: 2px solid #E1E1E1;
  border-radius: 4px;
  box-shadow: 0 4px 0 0 #E1E1E1;
  color: #0E0D6A;
  font-size: 1.6rem;
  font-weight: 500;
  cursor: pointer;
}

.checklist_ico {
  width: 32px;
  height: 32px;
}

.checklist_a {
  width: 100%;
}
.checklist_a input:checked + label {
  position: relative;
  top: 4px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
  color: #FFF;
}

.checklist_yes .checklist_ico {
  color: #0599E6;
}
.checklist_yes input:checked + label {
  background: #0599E6;
}
.checklist_yes input:checked + label .checklist_ico {
  color: #FFF;
}

.checklist_no .checklist_ico {
  color: #FFA100;
}
.checklist_no input:checked + label {
  background: #FFA100;
}
.checklist_no input:checked + label .checklist_ico {
  color: #FFF;
}

.checklist_btn {
  text-align: center;
}

.checklist-btn_ico {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 24px;
  top: 24px;
}

.btn-wrap:focus-visible .checklist-btn_ico {
  animation-name: button-animation-text;
  animation-duration: 0.75s;
}

#js-result {
  display: none;
}
#js-result.is-show {
  display: block;
}

.result_box {
  padding: 40px;
  background-color: #FFF;
  border: 1px solid #80C2E4;
  border-radius: 16px;
}

.result_num {
  text-align: center;
  color: #0599E6;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 8rem;
  font-weight: bold;
  line-height: 0.75;
}
.result_num > span {
  display: inline-block;
}

.result_num-ten {
  font-size: 2.6666666667rem;
  line-height: 1;
}

.result_num-all {
  margin-left: 16px;
  color: #AAAFB3;
  font-size: 2.1333333333rem;
  font-weight: 500;
  line-height: 1;
}

.result_flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.result_flex_item {
  border: 1px solid #D7DBDE;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.ttl_result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  border-bottom: 1px solid #D7DBDE;
  color: #0E0D6A;
  font-size: 1.3333333333rem;
  font-weight: 500;
}

.result_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 144px;
  padding: 20px;
  background-color: #F0FAFF;
  color: #0E0D6A;
  font-size: 1.3333333333rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
  word-break: normal;
}

.result_ancbox {
  display: flex;
  height: 80px;
  margin-top: 40px;
  background-color: #FFF;
  border: 1px solid #80C2E4;
  border-radius: 16px;
  overflow: hidden;
}

.result_anc {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 8px;
  color: #0E0D6A;
  font-size: 1.2rem;
  position: relative;
  transition: 0.3s;
}
.result_anc:focus-visible {
  background-color: #F0FAFF;
}

.plan {
  --color: #FFA100;
  --bg: #FFFBF4;
  --bg02: #FFEFD3;
  --mark: url(/content/dam/kddi-com/biz/lp/bcp/img/ico_no.svg);
  --border: 2px solid #FFA100;
  margin-top: 80px;
  padding: 80px 40px 40px;
  border: 4px solid #0E0D6A;
  border-radius: 16px;
  background-color: #F0FAFF;
  position: relative;
}

.plan_ttl {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 0 64px 4px;
  background-image: linear-gradient(90deg, #0E0D6A 70%, #0599E6);
  border-radius: 99em;
  color: #FFF;
  font-size: 2.1333333333rem;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.plan_list {
  display: grid;
  grid-template-columns: 100%;
  gap: 20px;
}

.plan_item {
  border: var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.plan_item.is-yes {
  --color: #00AEFF;
  --bg: #FFF;
  --bg02: #E9F8FF;
  --mark: url(/content/dam/kddi-com/biz/lp/bcp/img/ico_yes.svg);
  --border: 1px solid #D7DBDE;
}

.plan_head {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 20px;
  padding: 4px 104px 4px 4px;
  min-height: 100px;
  border-bottom: 1px solid #D7DBDE;
  background: #FFF;
  position: relative;
}
.plan_head::before {
  content: "";
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg02);
  position: absolute;
  right: 20px;
  top: calc(50% - 32px);
}
.plan_head::after {
  content: "";
  width: 40px;
  height: 40px;
  display: inline-flex;
  background-image: var(--mark);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  right: 32px;
  top: calc(50% - 20px);
}

.plan_title {
  color: #0E0D6A;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.plan_num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 76px;
  height: 100%;
  background-color: var(--color);
  border-radius: 4px;
  color: #FFF;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 2.1333333333rem;
  font-weight: bold;
}

.plan_body {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--bg);
}

.plan_desc {
  width: 100%;
}

.plan_img {
  flex-shrink: 0;
}
.plan_img img {
  border-radius: 4px;
  height: auto;
  width: 180px;
}

.plan_kotsu {
  margin-top: 10px;
}

.plan_text {
  margin-top: 10px;
  padding-left: 20px;
  font-size: 1.2rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.plan_mini {
  background-color: var(--bg02);
  padding: 5px 20px 6px;
  border-radius: 99em;
  font-size: 1.3333333333rem;
  font-weight: 500;
}
.plan_text + .plan_mini {
  margin-top: 16px;
}

.plan_kotsu-list {
  margin-top: 10px;
  padding-left: 16px;
  font-size: 1.2rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.plan_kotsu-list > li {
  padding-left: 1.2em;
  position: relative;
}
.plan_kotsu-list > li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.plan_recommend {
  margin-top: 40px;
  padding: 40px 20px 20px;
  background-color: #14C8CF;
  border-radius: 8px;
}

.plan_reco-ttl {
  color: #FFF;
  font-size: 2.1333333333rem;
  font-weight: bold;
  text-align: center;
}

.plan_reco-outer {
  display: flex;
  gap: 8px;
  margin-top: 32px;
}
.plan_reco-outer.-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.plan_reco-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFF;
  border-radius: 4px;
}

.plan_reco-subttl {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.7333333333rem;
  text-align: center;
}

.plan_reco-btn {
  margin-top: auto;
  padding: 0 20px 20px;
}

.plan_reco-list {
  padding: 0 20px 20px;
  font-size: 1.0666666667rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.plan_reco-list > li {
  padding-left: 1.2em;
  position: relative;
}
.plan_reco-list > li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.plan_reco-flex {
  display: flex;
  gap: 16px;
  padding: 0 20px 20px;
}
.plan_reco-flex .plan_reco-img {
  flex-shrink: 0;
}
.plan_reco-flex .plan_reco-list {
  padding: 0;
}

.plan_conv.-beta {
  text-align: center;
}
.plan_conv.-beta .btn.-conv {
  background-image: none;
}

.u-dn-pc {
  display: none !important;
}

.u-dn-pc-ib {
  display: none !important;
}

.u-dn-pc-i {
  display: none !important;
}

.u-dn-pc-f {
  display: none !important;
}

.u-dn-sp {
  display: block !important;
}

.u-dn-sp-ib {
  display: inline-block !important;
}

.u-dn-sp-i {
  display: inline !important;
}

.u-dn-sp-f {
  display: flex !important;
}

.u-dn-tab {
  display: block !important;
}

.u-dn-tabsp {
  display: block !important;
}

.u-dn-tabpc {
  display: none !important;
}

.u-db {
  display: block !important;
}

.u-ib {
  display: inline-block !important;
}

.u-i {
  display: inline !important;
}

.u-f {
  display: flex !important;
}

.u-mt0 {
  margin-top: 0px !important;
}
.u-mt8 {
  margin-top: 8px !important;
}
.u-mt16 {
  margin-top: 16px !important;
}
.u-mt24 {
  margin-top: 24px !important;
}
.u-mt32 {
  margin-top: 32px !important;
}
.u-mt40 {
  margin-top: 40px !important;
}
.u-mt48 {
  margin-top: 48px !important;
}
.u-mt56 {
  margin-top: 56px !important;
}
.u-mt64 {
  margin-top: 64px !important;
}
.u-mt72 {
  margin-top: 72px !important;
}
.u-mt80 {
  margin-top: 80px !important;
}
.u-mt88 {
  margin-top: 88px !important;
}
.u-mt96 {
  margin-top: 96px !important;
}
.u-mt104 {
  margin-top: 104px !important;
}
.u-mt112 {
  margin-top: 112px !important;
}
.u-mt120 {
  margin-top: 120px !important;
}
.u-mt128 {
  margin-top: 128px !important;
}
.u-mt136 {
  margin-top: 136px !important;
}
.u-mt144 {
  margin-top: 144px !important;
}
.u-mt152 {
  margin-top: 152px !important;
}
.u-mt4 {
  margin-top: 4px !important;
}
.u-mt12 {
  margin-top: 12px !important;
}
.u-mt20 {
  margin-top: 20px !important;
}
.u-mt30 {
  margin-top: 30px !important;
}
.u-m-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.u-ml8 {
  margin-left: 8px !important;
}

.u-ml16 {
  margin-left: 16px !important;
}

.u-ml24 {
  margin-left: 24px !important;
}

.u-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

@media screen and (max-width: 767px){
  .sec_inner {
    padding: 64px 24px;
  }
  .sec-recommend .sec_content {
    margin-top: 0;
  }
  .ttl.-h2-normal {
    font-size: 2rem;
  }
  .ttl.-h2-icon {
    padding-top: 78px;
    font-size: 2rem;
  }
  .ttl.-h2-icon::before {
    width: 64px;
    height: 64px;
    left: calc(50% - 32px);
  }
  .btn-wrap {
    width: 100%;
  }
  .btn.-conv {
    width: 100%;
    height: 72px;
  }
  .btn.-conv .btn_text {
    font-size: 1.7142857143rem;
  }
  .btn.-conv .btn_text .small {
    font-size: 1.4285714286rem;
  }
  .btn_arrow {
    width: 32px;
    height: 32px;
    right: 12px;
    top: 20px;
  }
  .btn.-mini {
    font-size: 1.1428571429rem;
  }
  .btn.-reco {
    font-size: 1rem;
  }
  .bcp-mv_title {
    padding: 64px 20px;
  }
  .bcp-lead_text {
    font-size: 1.2857142857rem;
    text-align: left;
  }
  .reco-flex {
    flex-direction: column;
    gap: 58px;
    padding-top: 72px;
  }
  .reco-flex_item {
    width: 100%;
    padding: 88px 16px 16px;
  }
  .reco-flex_item > img {
    width: 120px;
    left: calc(50% - 60px);
    top: -42px;
  }
  .reco-flex_name {
    font-size: 1.2857142857rem;
  }
  .reco-flex_desc {
    font-size: 1.1428571429rem;
  }
  .checklist_item {
    padding: 24px;
  }
  .checklist_num {
    width: 48px;
    height: 48px;
    font-size: 2rem;
  }
  .checklist_q {
    font-size: 1.4285714286rem;
  }
  .checklist_check {
    gap: 8px;
  }
  .checklist_check label {
    gap: 8px;
    height: 68px;
    font-size: 1.4285714286rem;
  }
  .checklist_ico {
    width: 24px;
    height: 24px;
  }
  .checklist-btn_ico {
    width: 32px;
    height: 32px;
    right: 12px;
    top: 22px;
  }
  .result_box {
    padding: 32px 16px 16px;
  }
  .result_num {
    font-size: 5.7142857143rem;
  }
  .result_num-ten {
    font-size: 2.2857142857rem;
  }
  .result_num-all {
    font-size: 1.7142857143rem;
  }
  .result_flex {
    grid-template-columns: 100%;
    margin-top: 20px;
    gap: 8px;
  }
  .ttl_result {
    height: 44px;
    font-size: 1.1428571429rem;
  }
  .ttl_result img {
    width: 24px;
  }
  .result_body {
    min-height: 0;
    font-size: 1.1428571429rem;
    text-align: center;
  }
  .result_ancbox {
    flex-direction: column;
    height: auto;
    padding: 16px;
  }
  .result_anc {
    height: 56px;
    font-size: 1.0714285714rem;
  }
  .plan {
    margin-top: 64px;
    margin-left: -24px;
    margin-right: -24px;
    padding: 56px 24px 64px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .plan_ttl {
    min-height: 64px;
    padding: 0 32px 2px;
    font-size: 1.4285714286rem;
    top: -32px;
  }
  .plan_list {
    gap: 16px;
  }
  .plan_head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px;
    min-height: 0;
  }
  .plan_head::before, .plan_head::after {
    display: none;
  }
  .plan_title {
    width: 100%;
    padding: 8px 64px 8px 8px;
    font-size: 1.4285714286rem;
    position: relative;
  }
  .plan_title::before {
    content: "";
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg02);
    position: absolute;
    right: 8px;
    top: calc(50% - 24px);
  }
  .plan_title::after {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-flex;
    background-image: var(--mark);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    right: 17px;
    top: calc(50% - 15px);
  }
  .plan_num {
    width: 100%;
    padding: 8px;
    font-size: 2rem;
  }
  .plan_body {
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
  .plan_img {
    margin: auto;
  }
  .plan_img img {
    width: 120px;
  }
  .plan_kotsu {
    margin-top: 6px;
    padding-left: 0;
  }
  .plan_text {
    font-size: 1.1428571429rem;
    padding-left: 8px;
    margin-top: 6px;
  }
  .plan_mini {
    padding: 8px 20px 8px;
    font-size: 1.2857142857rem;
  }
  .plan_text + .plan_mini {
    margin-top: 10px;
  }
  .plan_kotsu-list {
    margin-top: 0;
    padding-left: 0;
    font-size: 1.1428571429rem;
  }
  .plan_reco-ttl {
    font-size: 1.4285714286rem;
  }
  .plan_reco-outer {
    flex-direction: column;
    margin-top: 24px;
  }
  .plan_reco-outer.-grid {
    grid-template-columns: 100%;
  }
  .plan_reco-subttl {
    min-height: 0;
    padding: 24px 0;
    font-size: 1.4285714286rem;
  }
  .plan_reco-btn {
    padding: 0 16px 16px;
  }
  .plan_reco-list {
    padding: 10px 16px 20px;
    font-size: 1.0714285714rem;
  }
  .plan_reco-flex {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px 16px 16px;
  }
  .u-dn-pc {
    display: block !important;
  }
  .u-dn-pc-ib {
    display: inline-block !important;
  }
  .u-dn-pc-i {
    display: inline !important;
  }
  .u-dn-pc-f {
    display: flex !important;
  }
  .u-dn-sp {
    display: none !important;
  }
  .u-dn-sp-ib {
    display: none !important;
  }
  .u-dn-sp-i {
    display: none !important;
  }
  .u-dn-sp-f {
    display: none !important;
  }
  .u-dn-tab {
    display: block !important;
  }
  .u-dn-tabsp {
    display: none !important;
  }
  .u-dn-tabpc {
    display: block !important;
  }
  .u-mt0-sp {
    margin-top: 0px !important;
  }
  .u-mt8-sp {
    margin-top: 8px !important;
  }
  .u-mt16-sp {
    margin-top: 16px !important;
  }
  .u-mt24-sp {
    margin-top: 24px !important;
  }
  .u-mt32-sp {
    margin-top: 32px !important;
  }
  .u-mt40-sp {
    margin-top: 40px !important;
  }
  .u-mt48-sp {
    margin-top: 48px !important;
  }
  .u-mt56-sp {
    margin-top: 56px !important;
  }
  .u-mt64-sp {
    margin-top: 64px !important;
  }
  .u-mt72-sp {
    margin-top: 72px !important;
  }
  .u-mt80-sp {
    margin-top: 80px !important;
  }
  .u-mt88-sp {
    margin-top: 88px !important;
  }
  .u-mt96-sp {
    margin-top: 96px !important;
  }
  .u-mt104-sp {
    margin-top: 104px !important;
  }
  .u-mt112-sp {
    margin-top: 112px !important;
  }
  .u-mt120-sp {
    margin-top: 120px !important;
  }
  .u-mt128-sp {
    margin-top: 128px !important;
  }
  .u-mt136-sp {
    margin-top: 136px !important;
  }
  .u-mt144-sp {
    margin-top: 144px !important;
  }
  .u-mt152-sp {
    margin-top: 152px !important;
  }
  .u-mt4-sp {
    margin-top: 4px !important;
  }
  .u-mt12-sp {
    margin-top: 12px !important;
  }
  .u-mt20-sp {
    margin-top: 20px !important;
  }
  .u-mt30-sp {
    margin-top: 30px !important;
  }
  .u-m-auto-sp {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (min-width: 0px) and (max-width: 767px){
  .view-sp {
    display: block !important;
  }
  .view-pc {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1200px){
  .bcp-lead_text {
    font-size: 1.3333333333rem;
  }
  .reco-flex {
    gap: 16px;
  }
  .reco-flex_item {
    padding: 90px 20px 20px;
  }
  .reco-flex_name {
    font-size: 1.2rem;
  }
  .reco-flex_desc {
    font-size: 1.2rem;
  }
  .result_anc {
    font-size: 1.0666666667rem;
  }
  .plan_head {
    grid-template-columns: 64px 1fr;
  }
  .plan_title {
    font-size: 1.4666666667rem;
  }
  .plan_num {
    width: 64px;
  }
  .plan_text {
    font-size: 1.0666666667rem;
  }
  .plan_mini {
    font-size: 1.2rem;
  }
  .plan_kotsu-list {
    font-size: 1.0666666667rem;
  }
  .plan_reco-subttl {
    font-size: 1.4666666667rem;
  }
  .plan_reco-btn {
    padding: 0 16px 16px;
  }
  .plan_reco-list {
    padding: 0 16px 16px;
  }
  .plan_reco-flex .plan_reco-img img {
    width: 280px;
  }
  .plan_reco-flex {
    padding: 0 16px 16px;
  }
  .u-dn-tab {
    display: none !important;
  }
  .u-dn-tabsp {
    display: none !important;
  }
  .u-dn-tabpc {
    display: none !important;
  }
}

@media (min-width: 768px){
  .btn-wrap:hover .btn.-conv > [class*=_text] {
    animation-name: button-animation-text;
    animation-duration: 0.75s;
  }
  .btn-wrap:hover .btn.-conv::before {
    animation-name: button-animation-bg;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
  }
  .btn-wrap:hover .btn.-conv:after {
    animation-name: button-animation-border;
    animation-duration: 0.75s;
  }
  .btn-wrap:hover .btn_arrow {
    animation-name: button-animation-text;
    animation-duration: 0.75s;
  }
  .btn.-conv::before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 100%;
    background-color: #FFF;
    border-radius: 3px;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .btn.-conv::after {
    content: "";
    display: block;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid transparent;
    width: 100%;
    height: 100%;
  }
  .btn.-mini:hover {
    background-color: #0184C8;
    color: #FFF;
  }
  .btn.-reco:hover {
    background-color: #0184C8;
    color: #FFF;
  }
  .btn-wrap:hover .checklist-btn_ico {
    animation-name: button-animation-text;
    animation-duration: 0.75s;
  }
  .result_flex_item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
  }
  .result_anc:hover {
    background-color: #F0FAFF;
  }
  .plan_item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
  }
  .u-mt0-pc {
    margin-top: 0px !important;
  }
  .u-mt8-pc {
    margin-top: 8px !important;
  }
  .u-mt16-pc {
    margin-top: 16px !important;
  }
  .u-mt24-pc {
    margin-top: 24px !important;
  }
  .u-mt32-pc {
    margin-top: 32px !important;
  }
  .u-mt40-pc {
    margin-top: 40px !important;
  }
  .u-mt48-pc {
    margin-top: 48px !important;
  }
  .u-mt56-pc {
    margin-top: 56px !important;
  }
  .u-mt64-pc {
    margin-top: 64px !important;
  }
  .u-mt72-pc {
    margin-top: 72px !important;
  }
  .u-mt80-pc {
    margin-top: 80px !important;
  }
  .u-mt88-pc {
    margin-top: 88px !important;
  }
  .u-mt96-pc {
    margin-top: 96px !important;
  }
  .u-mt104-pc {
    margin-top: 104px !important;
  }
  .u-mt112-pc {
    margin-top: 112px !important;
  }
  .u-mt120-pc {
    margin-top: 120px !important;
  }
  .u-mt128-pc {
    margin-top: 128px !important;
  }
  .u-mt136-pc {
    margin-top: 136px !important;
  }
  .u-mt144-pc {
    margin-top: 144px !important;
  }
  .u-mt152-pc {
    margin-top: 152px !important;
  }
  .u-mt4-pc {
    margin-top: 4px !important;
  }
  .u-mt12-pc {
    margin-top: 12px !important;
  }
  .u-mt20-pc {
    margin-top: 20px !important;
  }
  .u-mt30-pc {
    margin-top: 30px !important;
  }
  .u-m-auto-pc {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}