@charset "UTF-8";
/* ---------------------------------------------
  reset
--------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
/* 解析タグの隙間対策 */
body > img {
  display: none;
}
.lp_main div, .lp_main span, .lp_main iframe, .lp_main h1, .lp_main h2, .lp_main h3, .lp_main h4, .lp_main h5, .lp_main h6, .lp_main p, .lp_main address, .lp_main img, .lp_main small, .lp_main strong, .lp_main sub, .lp_main sup, .lp_main dl, .lp_main dt, .lp_main dd, .lp_main ol, .lp_main ul, .lp_main form, .lp_main label, .lp_main table, .lp_main caption, .lp_main tbody, .lp_main tfoot, .lp_main thead, .lp_main tr, .lp_main th, .lp_main td, .lp_main article, .lp_main aside, .lp_main footer, .lp_main header, .lp_main menu, .lp_main nav, .lp_main section, .lp_main video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: baseline;
  background: transparent;
}
.lp_main article, .lp_main aside, .lp_main details, .lp_main figcaption, .lp_main figure, .lp_main footer, .lp_main header, .lp_main menu, .lp_main nav, .lp_main section {
  display: block;
}
.lp_main ol, .lp_main ul {
  list-style: none;
}
.lp_main :focus {
  outline: 0;
}
.lp_main table {
  border-collapse: collapse;
  border-spacing: 0;
}
.lp_main *, .lp_main *::before, .lp_main *::after {
  box-sizing: border-box;
}
.lp_main img {
  display: block;
  height: auto;
  vertical-align: bottom;
  width: 100%;
  max-width: 100%;
}
.lp_main svg, .lp_main video {
  width: 100%;
  height: auto;
}
/* ---------------------------------------------
  common
--------------------------------------------- */
/* スムーススクロール */
html {
  scroll-behavior: smooth;
}
.lp_main {
  font-family: 'Roboto', "Noto Sans JP", "sans-serif";
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}
.lp_main .p_box {
  position: relative;
}
.lp_main .bg-white {
  background-color: #FFFFFF;
}
.lp_main .medium-gray {
  background-color: #4f4d4e;
}
.lp_main .gray {
  background-color: #3d3b3c;
}
.lp_main .white {
  color: #ffffff;
}
.lp_main .content_text {
  padding-right: calc(40 / 688 * 100%);
  padding-left: calc(72 / 688 * 100%);
  padding-bottom: calc(40 / 688 * 100%);
}
.lp_main .content_text_s {
  padding-right: calc(30 / 750 * 100%);
  padding-left: calc(72 / 750 * 100%);
  padding-bottom: calc(40 / 750 * 100%);
}
.content_text_s.content_list {
  margin: 0 auto;
  width: fit-content;
}
.lp_main .content > p {
  font-size: min(38 / 688 * 100vw, 38px);
  line-height: 1.8;
  text-align: center;
  font-weight: 500;
}
.lp_main .content > ul > li, .lp_main .content .annotation {
  font-size: min(16 / 688 * 100vw, 16px);
  line-height: 1.5;
}
.lp_main .content > ul > li.large-text {
  font-size: min(27 / 688 * 100vw, 27px);
  font-weight: 500;
  line-height: 1.8;
}
.lp_main li.mark::before {
  content: "●";
  display: inline-block;
  width: 1em;
  margin-left: -1.3em;
  margin-right: 0.1em;
}
.lp_main li.mark_a::before {
  content: "※";
  display: inline-block;
  width: 1em;
  margin-left: -1.3em;
  margin-right: 0.1em;
}
/* ---------------------------------------------
  btn
--------------------------------------------- */
/*================
  btn_entry
================*/
/* 共通 */
.lp_main .btn_entry a {
  width: calc(615 / 750 * 100%);
  margin-inline: auto;
  display: block;
}
/* fv */
.lp_main .fv .btn_entry {
  background-color: #3d3b3c;
  padding-top: calc(63 / 750 * 100%);
}
/* recommended */
.lp_main .recommended .btn_entry {
  margin: calc(27 / 750 * 100%) 0 calc(20 / 750 * 100%);
}
/* intro*/
.lp_main .intro .btn_entry {
  margin: calc(40 / 750 * 100%) 0 calc(20 / 750 * 100%);
}
/* point */
.lp_main .point .btn_entry {
  margin: calc(49 / 750 * 100%) 0 calc(90 / 750 * 100%);
}
/*================
  btn_more-large
================*/
.lp_main .btn_more-large a {
  position: absolute;
  width: min(451 / 750 * 100vw, 451px);
  top: 82.5%;
  left: 0;
  right: 0;
  margin-inline: auto;
  display: block;
}
/*================
  btn_more-small
================*/
.lp_main .btn_more-small a {
  position: absolute;
  width: min(219 / 750 * 100vw, 219px);
  top: 65%;
  left: 12%;
}
/* ---------------------------------------------
  アコーディオン
--------------------------------------------- */
/*================
  共通
================*/
.lp_main .aco {
  width: calc(688 / 750 * 100%);
  margin-inline: auto;
  border: 1px solid #000;
}
.lp_main .aco_btn {
  position: relative;
  cursor: pointer;
  background-color: #000000;
  color: #FFFFFF;
  padding: calc(2.5 / 32 * 100%) calc(2 / 32 * 100%);
  text-align: left;
  font-size: min(32 / 750 * 100vw, 32px);
  font-weight: 500;
}
.lp_main .aco_btn_2 {
  position: relative;
  cursor: pointer;
  background-color: #000000;
  color: #FFFFFF;
  padding: calc(1.2 / 32 * 100%) calc(2 / 32 * 100%);
  text-align: left;
  font-size: min(32 / 750 * 100vw, 32px);
  font-weight: 500;
}
.lp_main .aco_btn_2 > ul > li {
  font-size: min(32 / 750 * 100vw, 32px);
  line-height: 1.3;
}
.lp_main .aco_contents {
  display: none;
  padding: calc(40 / 688 * 100%) 0;
}
.lp_main .aco_text {
  padding-right: calc(64 / 688 * 100%);
  padding-left: calc(72 / 688 * 100%);
}
.lp_main .aco_contents > p {
  font-size: min(28 / 688 * 100vw, 28px);
  line-height: 1.5;
}
.lp_main .aco_contents > div > p {
  font-size: min(24 / 688 * 100vw, 24px);
  line-height: 1.5;
}
.lp_main .aco_contents > div > p {
  text-align: center;
}
.lp_main .aco_contents > ul > li, .lp_main .aco_contents .annotation {
  font-size: min(16 / 688 * 100vw, 16px);
  line-height: 1.5;
}
.lp_main .aco_contents > ul > li.large-text {
  font-size: min(24 / 688 * 100vw, 24px);
}
.lp_main .aco_list li {
  list-style-type: disc;
}
.lp_main p.mark::before {
  content: "●";
  display: inline-block;
  width: 1em;
  margin-left: -1.3em;
  margin-right: 0.1em;
}
.lp_main li.mark::before {
  content: "●";
  display: inline-block;
  width: 1em;
  margin-left: -1.3em;
  margin-right: 0.1em;
}
.lp_main .point_aco {
  margin-bottom: calc(24 / 688 * 100%);
  margin-top: calc(24 / 688 * 100%);
}
.lp_main .pink_text {
  color: #ff65e1;
  font-size: min(32 / 750 * 100vw, 32px);
}
/*================
  アイコン
================*/
.lp_main .icn__plus {
  display: flex;
  position: absolute;
  top: 50%;
  right: min(43 / 750 * 100vw, 43px);
  width: min(28 / 750 * 100vw, 28px);
  height: min(28 / 750 * 100vw, 28px);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  align-items: center;
  justify-content: center;
  background: #fff;
}
.lp_main .icn__plus::before, .lp_main .icn__plus::after {
  content: " ";
  display: block;
  position: absolute;
  width: min(19 / 750 * 100vw, 19px);
  height: 2px;
  background: #000;
}
.lp_main .icn__plus::before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.lp_main .icn__plus.is_active::before {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
/* intro */
.lp_main .intro_aco:first-of-type {
  margin-bottom: calc(40 / 750 * 100%);
}
/* recommended */
.lp_main .recommended_aco:first-of-type {
  margin-bottom: calc(37 / 750 * 100%);
}
.lp_main .recommended_aco_wrap {
  background-color: #4f4d4e;
}
/* point */
.lp_main .point_aco {
  padding-bottom: calc(60 / 750 * 100%);
}
/* ---------------------------------------------
  useful
--------------------------------------------- */
.lp_main .useful_movie {
  width: min(337 / 750 * 100vw, 337px);
  height: min(598 / 750 * 100vw, 598px);
  position: absolute;
  top: 0;
  right: 4.2%;
}
.lp_main .useful_movie iframe {
  width: 100%;
  height: 100%;
}
/* ---------------------------------------------
  footer
--------------------------------------------- */
.lp_main .footer::before {
  content: "";
  display: block;
  border-bottom: 1px solid #000;
}
.lp_main .footer {
  padding-bottom: calc(117 / 750 * 100%);
}
.lp_main .footer_logo {
  width: calc(330 / 750* 100%);
  margin: calc(20 / 750 * 100%) auto;
}
.lp_main .footer_text {
  text-align: center;
}
.lp_main .footer_text > p {
  font-size: min(30 / 750 * 100vw, 30px);
  line-height: 1;
  margin-bottom: calc(28 / 750 * 100%);
}
.lp_main .footer_text .footer_tel_wrap {
  margin-bottom: calc(28 / 750 * 100%);
}
.lp_main .footer_text .footer_tel {
  font-size: min(40 / 750 * 100vw, 40px);
  line-height: 1;
  color: #0b56ac;
}
.lp_main .footer_text .footer_link_list {
  display: flex;
  justify-content: center;
  margin-bottom: calc(28 / 750 * 100%);
}
.lp_main .footer_text .footer_link_list_text {
  font-size: min(30 / 750 * 100vw, 30px);
  line-height: 1;
  color: #0b56ac;
}
.lp_main .footer_text .footer_link_list_item:first-of-type {
  border-right: 2px solid #000;
  padding-right: calc(40 / 750 * 100%);
}
.lp_main .footer_text .footer_link_list_item:last-of-type {
  padding-left: calc(40 / 750 * 100%);
}
.lp_main .footer_text .footer_copyright {
  font-size: min(25 / 750 * 100vw, 25px);
  line-height: 1;
  letter-spacing: 0.05em;
}
/* ---------------------------------------------
 追従ボタン
--------------------------------------------- */
.lp_main .bl_floatArea {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0.4s, opacity 0.4s;
  box-sizing: border-box;
}
.lp_main .bl_floatArea.is_show {
  visibility: visible;
  opacity: 1;
}
.lp_main .bl_floatArea_inner {
  max-width: 750px;
  margin: auto;
  box-sizing: border-box;
}
/* ボタン */
.lp_main .bl_floatArea_btn {
  display: block;
  width: min(615 / 750 * 100vw, 615px);
  margin: 0 auto;
}
.lp_main .bl_floatArea_btn img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
/* 背景色付き ver */
.lp_main .bl_floatArea.bl_floatArea__bg {
  background-color: rgba(255, 255, 255, 0.5);
}
/* パディングなし ver */
.lp_main .bl_floatArea.bl_floatArea__p0 .bl_floatArea_inner {
  padding: 0;
}
/* ---------------------------------------------
 モーダル
--------------------------------------------- */
.modal-box {
  display: none;
}
.modal_wrap {
  background: #f7f7f7;
  padding: 0;
}
.modal_wrap .flex {
  display: flex;
}
.modal_wrap .justify-spaceBetween {
  justify-content: space-between;
}
.modal_wrap .renewal__inner {
  max-width: 100%;
}
.modal_wrap .l-inner {
  margin: 0 auto;
  padding: 10% 3% 8%;
}
.modal_wrap .renewal__heading {
  text-align: center;
  position: relative;
}
.modal_wrap h2.renewal__title {
  font-size: clamp(20px, calc((20 / 750) * 100vw), 32px);
  line-height: 1;
  margin: 0;
  padding: 0 0 .5em;
  font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
.modal_wrap .renewal__list {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.modal_wrap .renewal__item {
  width: 50%;
}
.modal_wrap .c-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .6em .5em;
  font-size: clamp(15px, calc((24 / 750) * 100vw), 24px);
  font-weight: bold;
  text-decoration: none;
  border-radius: 40px;
  border: solid #000 2px;
  box-shadow: 2px 2px 0px rgb(0, 0, 0);
  margin: 0 auto;
  text-align: center;
  font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
.modal_wrap .c-btn--pink {
  background: #FF65E2;
  color: #fff;
  width: 93%;
}
.modal_wrap .c-btn--yellow {
  background: #535353;
  color: #fff;
  max-width: 14em;
  margin-top: 5%;
}
.modal_wrap .renewal__list .c-btn {
  margin-top: 16px;
}
.modal_wrap a:hover {
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
  opacity: .7;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.modal_wrap img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}
.modal_wrap .renewal__brand {
  width: 55%;
}
.modal_wrap ul, .modal_wrap li {
  list-style: none;
}
.modaal-content-container {
  padding: 0;
}
.modaal-container {
  max-width: 700px;
}
.modaal-close {
  position: absolute;
  right: -0px;
  top: -50px;
}
.modaal-close:focus::after, .modaal-close:focus::before, .modaal-close:hover::after, .modaal-close:hover::before {
  background: #fff;
}
.modaal-close:hover {
  background: none;
}
@media screen and (min-width: 750.1px) {
  .modaal-inner-wrapper {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 750px) {
  .modaal-inner-wrapper {
    padding-top: 0;
    padding-bottom: 0;
  }
  .modaal-inner-wrapper {
    padding: 10% 3%;
  }
  .modal_wrap .c-btn--yellow {
    max-width: 11em;
  }
}