@charset "UTF-8"; /*! css/style */ html.is-loaded {
  scroll-behavior: smooth;
  scroll-padding-top: 40px
}
body, h1, h2, h3, h4, h5, table, th, td, ul, li, ol, dl, dt, dd, form, p {
  margin: 0;
  padding: 0;
  font-weight: 500;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  list-style-type: none;
  font-size: 100%
}
body {
  color: #222;
  background-color: #fff;
  font-family: Noto Sans JP, serif;
  line-height: 1.3;
  font-size: 16px;
  -webkit-text-size-adjust: none
}
dt, dd, li, th, td, p {
  line-height: 1.5
}
* html body {
  font-size: 100%
}
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none
}
a img {
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s
}
img {
  display: block;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}
input, textArea, select, button {
  background: none;
  margin: 0;
  outline: none;
  padding: 0;
  font-weight: 400;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  list-style-type: none;
  font-size: 16px
}
button {
  cursor: pointer
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch
}
@font-face {
  font-family: FontAwesome;
  src: url(../fonts/fontawesome-webfont.eot?v=4.6.3);
  src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3) format("embedded-opentype"), url(../fonts/fontawesome-webfont.woff2?v=4.6.3) format("woff2"), url(../fonts/fontawesome-webfont.woff?v=4.6.3) format("woff"), url(../fonts/fontawesome-webfont.ttf?v=4.6.3) format("truetype"), url(../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular) format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}
a:link {
  color: #222;
  text-decoration: none
}
a:visited {
  color: #222
}
@media only screen and (min-width: 1025px) {
  a:hover, a:hover img {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    opacity: .8
  }
}
.clear:after {
  content: "";
  display: block;
  clear: both
}
.clear_both {
  clear: both
}
/* 【修正】Tailwindの.hidden(display:none)との競合回避のためリネームしました */
.u-overflow-hidden {
  overflow: hidden
}
@font-face {
  font-family: Noto Sans JP;
  font-style: normal;
  font-weight: 300;
  src: local("Noto Sans CJK JP Light"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format("opentype");
  font-display: swap
}
@font-face {
  font-family: Noto Sans JP;
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP Regular"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format("opentype");
  font-display: swap
}
@font-face {
  font-family: Noto Sans JP;
  font-style: normal;
  font-weight: 500;
  src: local("Noto Sans CJK JP Medium"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format("opentype");
  font-display: swap
}
@font-face {
  font-family: Noto Sans JP;
  font-style: normal;
  font-weight: 600;
  src: local("Noto Sans CJK JP Bold"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format("opentype");
  font-display: swap
}
@font-face {
  font-family: Noto Sans JP;
  font-style: normal;
  font-weight: 900;
  src: local("Noto Sans CJK JP Black"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.otf) format("opentype");
  font-display: swap
}
@keyframes pekopeko {
  0% {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 4px #0000004d;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  10% {
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 #0000004d;
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }
  20% {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 4px #0000004d;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  30% {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 4px #0000004d;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  40% {
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 #0000004d;
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }
  50% {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 4px #0000004d;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  to {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 4px #0000004d;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
@-webkit-keyframes pekopeko {
  0% {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -webkit-transform: translateY(0)
  }
  10% {
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
    -webkit-transform: translateY(5px)
  }
  20% {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -webkit-transform: translateY(0)
  }
  30% {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -webkit-transform: translateY(0)
  }
  40% {
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
    -webkit-transform: translateY(5px)
  }
  50% {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -webkit-transform: translateY(0)
  }
  to {
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -webkit-transform: translateY(0)
  }
}
@-moz-keyframes pekopeko {
  0% {
    -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -moz-transform: translateY(0)
  }
  8% {
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
    -moz-transform: translateY(5px)
  }
  15% {
    -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -moz-transform: translateY(0)
  }
  25% {
    -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -moz-transform: translateY(0)
  }
  38% {
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
    -moz-transform: translateY(5px)
  }
  45% {
    -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -moz-transform: translateY(0)
  }
  to {
    -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
    -moz-transform: translateY(0)
  }
}
.peko {
  position: relative;
  -webkit-animation: pekopeko 2s infinite;
  -moz-animation: pekopeko 2s infinite;
  animation: pekopeko 2s infinite
}
@keyframes pendulum {
  0% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg)
  }
  to {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg)
  }
}
@-webkit-keyframes pendulum {
  0% {
    -webkit-transform: rotate(3deg)
  }
  to {
    -webkit-transform: rotate(-3deg)
  }
}
@-moz-keyframes pendulum {
  0% {
    -moz-transform: rotate(3deg)
  }
  to {
    -moz-transform: rotate(-3deg)
  }
}
.pendulum {
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  -moz-transform-origin: bottom;
  animation: pendulum ease-in-out 1.5s infinite alternate;
  -webkit-animation: pendulum ease-in-out 1.5s infinite alternate;
  -moz-animation: pendulum ease-in-out 1.5s infinite alternate
}
#wrapper {
  overflow: hidden
}
#main_area, #wrapper{
  /* background-color: #157bd0; */
  z-index: -1;
}
.main_width {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 988px
}
@media only screen and (max-width: 1100px) {
  .main_width {
    padding: 0 40px
  }
}
@media only screen and (max-width: 1024px) {
  .main_width {
    padding: 0 40px
  }
}
@media only screen and (max-width: 768px) {
  .main_width {
    padding: 0 20px
  }
}
@media only screen and (max-width: 640px) {
  .main_width {
    padding: 0 15px
  }
}
.cont_width {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 940px
}
.cont_width .contIn {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 780px
}
.content_title h2 {
  font-size: 56px;
  font-weight: 600;
  text-align: center;
  line-height: 1
}
@media only screen and (max-width: 1024px) {
  .content_title h2 {
    font-size: 46px
  }
}
@media only screen and (max-width: 850px) {
  .content_title h2 {
    font-size: 38px;
    line-height: 1.2
  }
}
@media only screen and (max-width: 640px) {
  .content_title h2 {
    font-size: 34px
  }
}
@media only screen and (max-width: 400px) {
  .content_title h2 {
    font-size: 30px
  }
}
@media only screen and (max-width: 350px) {
  .content_title h2 {
    font-size: 29px
  }
}
.content_title h2 .size_ml {
  font-size: 85.714%
}
@media only screen and (max-width: 850px) {
  .content_title h2 .size_ml {
    font-size: 125%
  }
}
.content_title h2 .size_m {
  font-size: 71.428%
}
.content_title h2 .size_s {
  font-size: 53.571%
}
.content_title h2 .size_ss {
  font-size: 39.285%;
  font-weight: 700
}
@media only screen and (max-width: 850px) {
  .content_title h2 .size_m {
    font-size: 81.3%
  }
  .content_title h2 .size_ss {
    font-size: 62.5%
  }
}
.content_title p {
  color: #fff;
  text-align: center;
  letter-spacing: .05em;
  margin-top: 20px
}
@media only screen and (max-width: 400px) {
  #request_point h2 {
    letter-spacing: -.03em
  }
}
#trouble_solving h2, #about_charges h2 {
  font-weight: 700
}
.mgn-top5 {
  margin-top: 5px
}
.mgn-top10 {
  margin-top: 10px
}
.text_right {
  text-align: right
}
.text_left {
  text-align: left
}
.text_center {
  text-align: center
}
/* 【修正】Tailwindとの競合回避のためリネームしました */
.u-text-underline {
  text-decoration: underline
}
.side_line {
  display: inline-block;
  position: relative;
  z-index: 0
}
.side_line:before, .side_line:after {
  content: "";
  display: inline-block;
  background-color: #fff;
  width: 2px;
  height: 17px;
  position: absolute;
  bottom: 2px
}
.side_line:before {
  left: -20px;
  -webkit-transform: rotate(-28deg);
  -ms-transform: rotate(-28deg);
  transform: rotate(-28deg)
}
.side_line:after {
  right: -18px;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
  bottom: 3px
}
.bg_line {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(82%, transparent), color-stop(0%, #fffc00));
  background: -webkit-linear-gradient(transparent 82%, #fffc00 0%);
  background: -o-linear-gradient(transparent 82%, #fffc00 0%);
  background: linear-gradient(transparent 82%, #fffc00);
  background-position: bottom
}
#support_system .line_note {
  font-size: 75%;
  position: relative;
  z-index: 5;
  margin: -30px 0 28px
}
@media only screen and (max-width: 850px) {
  #support_system .line_note {
    font-size: 68.8%;
    margin: -29px 0 23px
  }
}
.bg_white {
  background-color: #fff;
  border-radius: 10px;
  padding: 50px 70px
}
@media only screen and (max-width: 850px) {
  .bg_white {
    border-radius: 6px
  }
}
.light_blue {
  color: #0096ff
}
.blue {
  color: #22338b
}
.white {
  color: #fff
}
.yellow {
  color: #fffc00
}
.gray {
  color: #8e8e8e
}
.dots {
  font-family: Wallpoet, cursive;
  letter-spacing: -.07em
}
@media only screen and (max-width: 850px) {
  .no850, br.no850 {
    display: none
  }
}
@media only screen and (max-width: 800px) {
  .no800, br.no800 {
    display: none
  }
}
.show850, br.show800 {
  display: none
}
@media only screen and (max-width: 850px) {
  .show850, br.show800 {
    display: block
  }
}
.show800 {
  display: none
}
@media only screen and (max-width: 800px) {
  .show800 {
    display: block
  }
}
.show480, br.show480 {
  display: none
}
@media only screen and (max-width: 480px) {
  .show480, br.show480 {
    display: block
  }
}
.fadein {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translateY(50px);
  -webkit-transition: all 1.1s;
  -o-transition: all 1.1s;
  transition: all 1.1s
}
@media only screen and (max-width: 850px) {
  .fadein {
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translateY(20px)
  }
}
.fadein.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0)
}
.fadein.in01 {
  -moz-transition-delay: .1s;
  -webkit-transition-delay: .1s;
  -o-transition-delay: .1s;
  -ms-transition-delay: .1s
}
.fadein.in02 {
  -moz-transition-delay: .3s;
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
  -ms-transition-delay: .3s
}
.fadein.in03 {
  -moz-transition-delay: .5s;
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  -ms-transition-delay: .5s
}
@media only screen and (max-width: 850px) {
  .fadein.in01, .fadein.in02, .fadein.in03 {
    -moz-transition-delay: .1s;
    -webkit-transition-delay: .1s;
    -o-transition-delay: .1s;
    -ms-transition-delay: .1s
  }
}
table {
  width: 100%;
  border-collapse: separate;
  border-collapse: collapse;
  border-spacing: 0
}
table tr td, table tr th {
  text-align: left;
  padding: 0
}
.page_top {
  position: fixed;
  left: 15px;
  bottom: 15px;
  z-index: 2000;
  opacity: 0;
  transition: opacity .3s ease-out;
  pointer-events: none
}
.page_top.is-active {
  opacity: 1;
  pointer-events: auto
}
@media only screen and (max-width: 640px) {
  .page_top {
    right: 8px;
    bottom: 8px
  }
}
.page_top button {
  background-color: #3c3c3ccc;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 60px;
  height: 60px
}
@media only screen and (max-width: 900px) {
  .page_top button {
    width: 50px;
    height: 50px
  }
}
@media only screen and (max-width: 480px) {
  .page_top button {
    width: 48px;
    height: 48px
  }
}
.page_top button:after {
  font-family: FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  display: block;
  color: #fff;
  font-size: 30px
}
@media only screen and (max-width: 900px) {
  .page_top button:after {
    font-size: 26px
  }
}
.frame_respon .fb_iframe_widget, .frame_respon .fb_iframe_widget span, .frame_respon .fb_iframe_widget iframe[style] {
  width: 100% important
}
.gmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden
}
.gmap iframe, .gmap object, .gmap embed {
  border: none !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
#header {
  position: relative;
  z-index: 5;
  background: #000
}
#header .h_logo {
  padding: 5px 8px;
  display: flex
}
#header .h_logo > *:nth-child(1) {
  margin-right: 10px
}
@media only screen and (max-width: 600px) {
  #header .h_logo {
    width: 230px
  }
}
#header .h_logo a:hover img {
  opacity: 1
}
#footer {
  position: relative;
  z-index: 2000
}
#footer .f_txt {
  background-color: #000;
  height: 200px;
  padding: 58px 0 50px
}
@media only screen and (max-width: 640px) {
  #footer .f_txt {
    height: auto;
    padding: 9% 0 10%
  }
}
#footer .f_logo {
  text-align: center;
  width: 164px;
  margin: 0 auto 30px;
  align-items: center
}
@media only screen and (max-width: 640px) {
  #footer .f_logo {
    margin: 0 auto 20px
  }
}
@media only screen and (max-width: 400px) {
  #footer .f_logo {
    margin: 0 auto 15px
  }
}
#footer .copy {
  color: #a7a7a7;
  font-size: 68.8%;
  font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
  text-align: center
}
@media only screen and (max-width: 640px) {
  #footer .copy {
    font-size: 62.5%
  }
}
.cont + .cont {
  margin-top: 110px
}
@media only screen and (max-width: 800px) {
  .cont + .cont {
    margin-top: 50px
  }
}
.cont + .cont.top80 {
  margin-top: 80px
}
@media only screen and (max-width: 800px) {
  .cont + .cont.top80 {
    margin-top: 60px
  }
}
.cont + .cont.top60 {
  margin-top: 60px
}
@media only screen and (max-width: 800px) {
  .cont + .cont.top60 {
    margin-top: 40px
  }
}
.btn_wrap {
  background-color: #fff;
  border-radius: 50px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-animation: pekopeko 2s infinite;
  animation: pekopeko 2s infinite;
  -webkit-box-shadow: 0px 6px 0px 0px #950054;
  box-shadow: 0 6px #950054
}
@media only screen and (max-width: 800px) {
  .btn_wrap {
    width: 100%
  }
}
.btn_wrap a {
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  background-color: #e40280;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 24px;
  text-align: center;
  font-weight: 700;
  position: relative;
  padding: 4px
}
.btn_wrap a span {
  padding: 20px 40px 20px 20px;
  display: block;
  border: 2px solid;
  border-radius: 50px;
  white-space: nowrap
}
@media only screen and (max-width: 1024px) {
  .btn_wrap a {
    font-size: 162.5%
  }
}
@media only screen and (max-width: 800px) {
  .btn_wrap a {
    font-size: 150%
  }
}
@media only screen and (max-width: 480px) {
  .btn_wrap a {
    font-size: 100%
  }
  .btn_wrap a span {
    padding: 20px 20px 20px 0
  }
}
@media only screen and (max-width: 400px) {
  .btn_wrap a {
    font-size: 90%
  }
}
@media only screen and (min-width: 1025px) {
  .btn_wrap a:hover {
    -webkit-box-shadow: none;
    box-shadow: none
  }
}
.btn_wrap a:after {
  font-family: FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  display: block;
  color: #fff;
  font-size: 26px;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -15px
}
.consultation_set .monthly_wrap {
  max-width: 884px;
  margin: 0 auto 25px
}
@media only screen and (max-width: 480px) {
  .consultation_set .monthly_wrap {
    padding: 0 2%
  }
}
.consultation_set .monthly_wrap .white {
  font-size: 168.8%;
  font-weight: 600;
  text-align: center;
  margin-bottom: 15px
}
@media only screen and (max-width: 600px) {
  .consultation_set .monthly_wrap .white {
    font-size: 156.3%;
    margin-bottom: 12px
  }
}
@media only screen and (max-width: 480px) {
  .consultation_set .monthly_wrap .white {
    font-size: 5.2vw
  }
}
.consultation_set .monthly_wrap .note_txt {
  font-size: 81.3%
}
.consultation_set .monthly_wrap .yellow {
  font-size: 137.5%;
  font-weight: 600
}
@media only screen and (max-width: 480px) {
  .consultation_set .monthly_wrap .yellow {
    font-size: 4.43vw;
    text-align: center;
    margin-bottom: 12px
  }
}
.consultation_set .bg_blue {
  background-color: #157bd0;
  border-radius: 10px;
  max-width: 787px;
  -webkit-transform: translateY(-220px);
  -ms-transform: translateY(-220px);
  transform: translateY(-220px);
  position: relative;
  z-index: 10;
  padding: 50px;
  margin: 0 auto -170px
}
@media only screen and (max-width: 850px) {
  .consultation_set .bg_blue {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    padding: 60px 0;
    margin: 0 auto
  }
}
.flex_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}
.flex_wrap.align_top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}
.flex_wrap.align_center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.square_line:before {
  content: "";
  display: inline-block;
  background: url(../media/images/square.png) repeat-x center top;
  width: 600px;
  height: 6px;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%)
}
@media only screen and (max-width: 850px) {
  .square_line:before {
    width: 95%;
    background-size: 16px auto
  }
}
@media only screen and (max-width: 480px) {
  .square_line:before {
    width: 97%;
    background-size: 14px auto
  }
}
#kv_area {
  position: relative;
  z-index: 0;
  max-width: 1366px;
  margin: 0 auto 50px
}
@media only screen and (max-width: 800px) {
  #kv_area {
    margin: 0 auto 20px
  }
}
@media only screen and (max-width: 600px) {
  #kv_area {
    margin: 0 auto 50px
  }
}
@media only screen and (max-width: 480px) {
  #kv_area {
    margin: 0 auto 20px
  }
}
#kv_area .bg img {
  width: 100%
}
#kv_area .bg .eye {
  position: absolute;
  top: 0;
  right: 4%;
  z-index: 10;
  width: 20%
}
#kv_area .set_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  position: relative;
  margin-top: -28%;
  padding: 0 8%
}
@media only screen and (max-width: 1300px) {
  #kv_area .set_wrap {
    padding: 0 7%
  }
}
@media only screen and (max-width: 1024px) {
  #kv_area .set_wrap {
    padding: 0 4%
  }
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap {
    display: block;
    margin-top: -69.6%
  }
}
#kv_area .set_wrap .ttl_set {
  width: 50%
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .ttl_set {
    -webkit-transform: translateY(-10%);
    -ms-transform: translateY(-10%);
    transform: translateY(-10%);
    width: 100%;
    padding: 0 2%;
    margin-bottom: -10%
  }
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .ttl_set h1 {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9)
  }
}
#kv_area .set_wrap .ttl_set h1 span {
  display: block
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .ttl_set h1 span.in_balloon {
    padding-left: 0;
    margin-bottom: -15px
  }
}
@media only screen and (max-width: 600px) {
  #kv_area .set_wrap .ttl_set h1 span.in_balloon img {
    margin-left: -20px;
    margin-bottom: 10px
  }
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .ttl_set h1 span.in_balloon img {
    width: 76%
  }
}
@media only screen and (max-width: 480px) {
  #kv_area .set_wrap .ttl_set h1 span.in_balloon img {
    width: 86%
  }
}
#kv_area .set_wrap .ttl_set h1 span.txt {
  font-size: 238%;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center
}
@media only screen and (max-width: 1400px) {
  #kv_area .set_wrap .ttl_set h1 span.txt {
    font-size: 2.45vw
  }
}
@media only screen and (max-width: 1300px) {
  #kv_area .set_wrap .ttl_set h1 span.txt {
    font-size: 2.15vw
  }
}
@media only screen and (max-width: 1024px) {
  #kv_area .set_wrap .ttl_set h1 span.txt {
    font-size: 2.72vw
  }
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .ttl_set h1 span.txt {
    font-size: 200%;
    text-align: center;
    position: relative;
    z-index: 1
  }
}
@media only screen and (max-width: 600px) {
  #kv_area .set_wrap .ttl_set h1 span.txt {
    font-size: 5.05vw
  }
}
@media only screen and (max-width: 600px) {
  #kv_area .set_wrap .ttl_set h1 span.txt {
    font-size: 5.6vw
  }
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .ttl_set h1 span.month1980 img {
    margin: 0 auto
  }
}
#kv_area .set_wrap .ttl_set .tax_note {
  font-size: 81.3%;
  padding-right: 10px;
  margin: -10px 0
}
@media only screen and (max-width: 480px) {
  #kv_area .set_wrap .ttl_set .tax_note {
    padding-right: 0;
    margin: 0 0 -10px
  }
}
#kv_area .set_wrap .img_set {
  width: 50%;
  padding-left: 60px
}
@media only screen and (max-width: 1200px) {
  #kv_area .set_wrap .img_set {
    padding-left: 5%
  }
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .img_set {
    width: 86%;
    padding-left: 2%;
    margin: 0 auto
  }
}
@media only screen and (max-width: 480px) {
  #kv_area .set_wrap .img_set {
    width: 92%
  }
}
@media only screen and (max-width: 400px) {
  #kv_area .set_wrap .img_set {
    width: 98%;
    padding-left: 0
  }
}
#kv_area .set_wrap .img_set .in_img {
  position: relative;
  padding: 0 10% 0 15px
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .img_set .in_img {
    padding: 0 3% 0 0
  }
}
#kv_area .set_wrap .img_set .in_img img {
  width: 100%
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .img_set .in_img img {
    width: 90%;
    margin: 0 auto
  }
}
#kv_area .set_wrap .img_set .in_img .blue_balloon {
  background-color: #22338b;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 160px;
  height: 160px;
  position: absolute;
  z-index: 15;
  top: 26%;
  right: 0
}
@media only screen and (max-width: 1300px) {
  #kv_area .set_wrap .img_set .in_img .blue_balloon {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8)
  }
}
@media only screen and (max-width: 900px) {
  #kv_area .set_wrap .img_set .in_img .blue_balloon {
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    right: -6%
  }
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .img_set .in_img .blue_balloon {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    top: 8%;
    right: 4%
  }
}
@media only screen and (max-width: 640px) {
  #kv_area .set_wrap .img_set .in_img .blue_balloon {
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    right: 2%
  }
}
@media only screen and (max-width: 480px) {
  #kv_area .set_wrap .img_set .in_img .blue_balloon {
    right: -4%
  }
}
#kv_area .set_wrap .img_set .in_img .blue_balloon span {
  font-size: 120%;
  text-align: center;
  padding-top: 2px
}
#kv_area .set_wrap .img_set .zero_set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 10;
  margin: -9% -5px 10px
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .img_set .zero_set {
    margin: -12% -3px 10px
  }
}
@media only screen and (max-width: 480px) {
  #kv_area .set_wrap .img_set .zero_set {
    margin: -12% -3px 10px
  }
}
#kv_area .set_wrap .img_set .zero_set .one_zero {
  background: url(../media/images/yellow_circle.png) no-repeat center center;
  background-size: contain;
  width: 33.3333333%;
  padding: 32px;
  margin: 0 5px
}
@media only screen and (max-width: 1200px) {
  #kv_area .set_wrap .img_set .zero_set .one_zero {
    padding: 24px
  }
}
@media only screen and (max-width: 600px) {
  #kv_area .set_wrap .img_set .zero_set .one_zero {
    padding: 20px;
    margin: 0 3px
  }
}
#kv_area .set_wrap .img_set .zero_set .one_zero p {
  text-align: center;
  font-weight: 700
}
@media only screen and (max-width: 1200px) {
  #kv_area .set_wrap .img_set .zero_set .one_zero p {
    font-size: 1.29vw
  }
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .img_set .zero_set .one_zero p {
    font-size: 2.1vw
  }
}
@media only screen and (max-width: 600px) {
  #kv_area .set_wrap .img_set .zero_set .one_zero p {
    font-size: 2.6vw
  }
}
#kv_area .set_wrap .img_set .zero_set .one_zero p img {
  display: block;
  margin: 5px auto 0
}
@media only screen and (max-width: 1300px) {
  #kv_area .set_wrap .img_set .zero_set .one_zero p img {
    width: 90%
  }
}
@media only screen and (max-width: 1200px) {
  #kv_area .set_wrap .img_set .zero_set .one_zero p img {
    width: 80%
  }
}
@media only screen and (max-width: 800px) {
  #kv_area .set_wrap .img_set .zero_set .one_zero p img {
    width: 66%
  }
}
#main_visual {
  background: url(../media/images/main_bg.png) no-repeat center bottom;
  background-size: cover;
  position: relative;
  margin-bottom: 20px;
  text-align: center
}
#main_visual:before, #main_visual:after {
  content: "";
  display: block;
  position: absolute;
  top: -10px
}
#main_visual:before {
  background: url(../media/images/main_flag_left.png) no-repeat 0 center;
  width: 406px;
  height: 348px;
  background-size: 100% auto;
  left: 0
}
#main_visual:after {
  background: url(../media/images/main_flag_right.png) no-repeat 0 center;
  width: 438px;
  height: 369px;
  background-size: 100% auto;
  right: 0
}
#main_visual .txt {
  position: relative;
  z-index: 2
}
#main_visual .txt img {
  margin: 0 auto
}
#main_visual .sp {
  display: none
}
#main_visual .notice {
  font-size: 10px;
  margin-left: auto;
  margin-right: auto;
  max-width: 988px;
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
  bottom: 5px;
  z-index: 2
}
@media only screen and (max-width: 640px) {
  #main_visual .pc {
    display: none
  }
  #main_visual .sp {
    display: block
  }
  #main_visual .notice {
    text-align: left;
    left: auto;
    right: 0;
    padding: 0 12px
  }
}
@media only screen and (max-width: 850px) {
  .main_visual_btn {
    padding: 0 10px
  }
}
.cont .main_width {
  max-width: 880px
}
.cont_box {
  position: relative;
  margin-top: 40px
}
@media only screen and (max-width: 767px) {
  .cont_box {
    margin-top: 20px
  }
}
.cont_box_s {
  clear: both;
  overflow: hidden;
  margin-bottom: 20px
}
.cont_box .lineup_ballon {
  position: absolute;
  top: 10px;
  left: 0
}
@media only screen and (max-width: 767px) {
  .cont_box .lineup_ballon {
    width: 35%
  }
}
@media only screen and (max-width: 767px) {
  .cont_box + .cont_box .lineup_ballon {
    top: 10px
  }
}
.cont_box h3 {
  text-align: center;
  font-size: 162.5%;
  font-weight: 600;
  padding: 40px 0 50px
}
@media only screen and (max-width: 767px) {
  .cont_box h3 {
    text-align: left;
    font-size: 137.5%;
    padding: 22% 0 20px
  }
}
.cont_box h3 .size_s {
  font-size: 76.9%
}
.cont_box + .cont_box {
  background: url(../media/images/border_bg.png) repeat-x
}
.cont_box .large_txt {
  color: #0096ff;
  font-size: 225%;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 30px
}
@media only screen and (max-width: 767px) {
  .cont_box .large_txt {
    font-size: 125%;
    margin-bottom: 20px
  }
}
.cont_box .line_note {
  font-size: 75%;
  position: relative;
  z-index: 5;
  margin-top: 10px
}
.cont_box h4 {
  font-size: 112.5%;
  font-weight: 700;
  margin-bottom: 15px;
  color: #22338b
}
.cont_box h4:before {
  font-family: FontAwesome;
  content: "";
  color: #0096ff;
  margin-right: 5px
}
.cont_box .caption_txt {
  text-align: center;
  margin-top: -20px;
  margin-bottom: 30px
}
@media only screen and (max-width: 767px) {
  .cont_box .caption_txt {
    text-align: left;
    margin-top: -10px
  }
}
#customer_harassment {
  position: relative;
  z-index: 10;
  margin-top: 60px;
  max-width: 988px;
  margin-inline: auto
}
@media only screen and (max-width: 767px) {
  #customer_harassment {
    padding-inline: 15px
  }
}
#customer_harassment .content_title {
  position: relative;
  z-index: 11;
  padding: 17px 20px;
  margin-inline: 56px;
  background-color: #22338b;
  border-radius: 1px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 10px #22338b;
  color: #fff;
  text-align: center;
  font-size: clamp(1.063rem, .802rem + 1.11vi, 1.75rem);
  font-weight: 600
}
@media only screen and (max-width: 767px) {
  #customer_harassment .content_title {
    margin-inline: 26px;
    padding: 16px 5px
  }
}
#customer_harassment .content_title .ch_ribbon {
  position: absolute;
  top: -38px;
  left: 12px
}
@media only screen and (max-width: 767px) {
  #customer_harassment .content_title .ch_ribbon {
    left: -24px
  }
}
#customer_harassment .cont_box {
  --cont_box_top: 70px;
  --cont_box_bottom: 20px;
  --cont_box_inline: 20px;
  --cont_box_left: clamp(0rem, -3.601rem + 7.513vi, 2.813rem);
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 304px;
  grid-template-rows: auto 1fr auto;
  gap: 10px 20px;
  margin-top: -52px;
  padding: var(--cont_box_top) var(--cont_box_inline) var(--cont_box_bottom);
  background-color: #fff;
  border-radius: 6px;
  border: 8px solid #22338b
}
@media only screen and (max-width: 767px) {
  #customer_harassment .cont_box {
    --cont_box_top: 65px;
    --cont_box_bottom: 15px;
    --cont_box_inline: 15px;
    --cont_box_left: 0;
    grid-template-columns: none;
    grid-template-rows: auto auto 1fr auto
  }
}
#customer_harassment .cont_box:before {
  position: absolute;
  z-index: 9;
  top: calc(var(--cont_box_top) * -1);
  left: calc(var(--cont_box_inline) * -1);
  content: "";
  width: calc(100% + var(--cont_box_inline) * 2);
  height: calc(100% + var(--cont_box_top));
  background-color: #fff7fd
}
@media only screen and (min-width: 767.02px) {
  #customer_harassment .cont_box:before {
    grid-area: 1/1/2/3
  }
}
@media only screen and (max-width: 767px) {
  #customer_harassment .cont_box:before {
    grid-area: 1/1/2/2
  }
}
#customer_harassment .cont_box > * {
  position: relative;
  z-index: 11
}
#customer_harassment .cont_box__detail {
  padding-bottom: 15px;
  padding-left: var(--cont_box_left);
  font-size: clamp(1rem, .953rem + .202vi, 1.125rem);
  font-weight: 600
}
@media only screen and (min-width: 767.02px) {
  #customer_harassment .cont_box__detail {
    grid-area: 1/1/2/2
  }
}
#customer_harassment .cont_box__image {
  margin: 0
}
@media only screen and (min-width: 767.02px) {
  #customer_harassment .cont_box__image {
    grid-area: 1/2/3/3
  }
}
@media only screen and (max-width: 767px) {
  #customer_harassment .cont_box__image {
    display: flex;
    align-items: center;
    flex-flow: row-reverse;
    margin-top: -25px
  }
}
#customer_harassment .cont_box__image img {
  margin-inline: auto
}
@media only screen and (max-width: 767px) {
  #customer_harassment .cont_box__image img {
    margin-right: 0;
    width: 100px
  }
}
#customer_harassment .cont_box__image__note {
  font-size: 11px
}
@media only screen and (min-width: 767.02px) {
  #customer_harassment .cont_box__image__note {
    text-align: right
  }
}
#customer_harassment .cont_box__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr auto;
  padding-left: var(--cont_box_left)
}
@media only screen and (min-width: 767.02px) {
  #customer_harassment .cont_box__list {
    grid-area: 2/1/4/2
  }
}
#customer_harassment .cont_box__list__item {
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-items: center;
  padding-inline: clamp(.313rem, .194rem + .505vi, .625rem);
  text-align: center;
  color: #ff4c84;
  font-size: clamp(.875rem, .733rem + .605vi, 1.25rem);
  font-weight: 600
}
#customer_harassment .cont_box__list__item:nth-child(n+2):before {
  position: absolute;
  content: "";
  margin-block: auto;
  inset-block: 0;
  left: -2px;
  width: 8px;
  height: calc(100% - 60px);
  border-left: 4px dotted #FF4C84
}
@media only screen and (max-width: 767px) {
  #customer_harassment .cont_box__list__item:nth-child(n+2):before {
    height: calc(100% - 20px);
    margin-bottom: 8px
  }
}
#customer_harassment .cont_box__list__item__image {
  margin: auto
}
#customer_harassment .cont_box__list__item__title {
  align-self: start;
  margin-inline: auto;
  max-width: 130px
}
#customer_harassment .cont_box__list__item__title span {
  display: inline-block
}
#customer_harassment .cont_box__more {
  text-align: center
}
@media only screen and (min-width: 767.02px) {
  #customer_harassment .cont_box__more {
    grid-area: 3/2/4/3;
    align-self: end
  }
}
@media only screen and (max-width: 767px) {
  #customer_harassment .cont_box__more {
    padding-top: 5px
  }
}
#customer_harassment .cont_box__more .c-button--more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  background-color: #ff4c84;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  transition: opacity .2s ease-out
}
@media only screen and (max-width: 767px) {
  #customer_harassment .cont_box__more .c-button--more {
    max-width: 294px
  }
}
#customer_harassment .cont_box__more .c-button--more:after {
  position: absolute;
  right: 10px;
  content: "";
  width: 11px;
  height: 19px;
  background-color: currentColor;
  mask: no-repeat right center/contain url(../media/images/chevron.svg)
}
#nayami_point {
  text-align: center;
  background: url(../media/images/nayami_bg.png) no-repeat center bottom 20px;
  z-index: 10;
  position: relative
}
@media only screen and (max-width: 767px) {
  #nayami_point {
    margin-top: 30px;
    background: none
  }
}
.nayami_img {
  display: grid;
  grid-template-columns: minmax(0, 956px);
  justify-content: center;
  margin-top: 54px;
  padding: 0 20px
}
@media (max-width: 640px) {
  .nayami_img {
    margin-top: 28px;
    padding: 0
  }
}
#choice_link {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 170px;
  background: url(../media/images/ami.png)
}
@media only screen and (max-width: 767px) {
  #choice_link {
    padding-bottom: 110px
  }
}
#choice_link a {
  color: #22338b
}
#choice_link.cont {
  margin-top: -10px
}
#choice_link .content_title img {
  margin: 0 auto;
  width: min(100%, 548px)
}
@media only screen and (max-width: 767px) {
  #choice_link .content_title img {
    width: 70%
  }
}
.choice_link {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-left: -30px
}
@media only screen and (max-width: 850px) {
  .choice_link {
    display: block;
    margin-top: 25px;
    margin-left: 0
  }
}
.choice_link li {
  background: #fff;
  padding: 5px 20px 40px;
  border: 4px solid #000;
  border-radius: 20px;
  margin-left: 30px;
  width: 300px;
  height: 100%;
  position: relative;
  box-shadow: 5px 5px #0000004d
}
@media only screen and (max-width: 850px) {
  .choice_link li {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 40px
  }
}
.choice_link li:before {
  content: "";
  width: 36px;
  height: 36px;
  background: #fffc00;
  position: absolute;
  bottom: -18px;
  left: 50%;
  margin-left: -18px;
  border: 2px solid #000;
  border-radius: 50%;
  box-shadow: 3px 3px #0000004d
}
.choice_link li:after {
  font-family: FontAwesome;
  font-size: 20px;
  font-weight: 400;
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  margin-left: -7px;
  color: #22338b
}
.choice_link_ttl {
  height: 80px;
  border-bottom: 1px dashed #70af7c;
  margin-bottom: 10px;
  position: relative
}
@media only screen and (max-width: 850px) {
  .choice_link_ttl {
    height: 90px
  }
  .choice_link a:nth-child(2) .choice_link_ttl {
    height: 70px
  }
}
.choice_link_ttl p {
  font-size: 200%;
  font-weight: 600;
  line-height: 1.1;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 10px
}
@media only screen and (max-width: 850px) {
  .choice_link_ttl p {
    padding-bottom: 15px
  }
}
.choice_link_ttl span {
  font-size: 50%;
  font-weight: 700;
  color: #147bd1
}
.choice_link li li {
  text-align: left;
  background: none;
  padding: 4px 0 4px 20px;
  border: none;
  border-radius: 0;
  margin-left: 0;
  font-size: 112.5%;
  font-weight: 700;
  width: auto;
  position: relative;
  box-shadow: none
}
@media only screen and (max-width: 850px) {
  .choice_link li li {
    margin-bottom: 0
  }
}
.choice_link li li span {
  font-size: 77.8%
}
.choice_link li li:before {
  content: "";
  width: 16px;
  height: 16px;
  background: #70af7c;
  position: absolute;
  top: 9px;
  bottom: auto;
  left: 0;
  border: none;
  border-radius: 0;
  margin-left: 0;
  box-shadow: none
}
.choice_link li li:after {
  font-family: FontAwesome;
  font-size: 10px;
  font-weight: 400;
  content: "";
  position: absolute;
  top: 9px;
  bottom: auto;
  left: 3px;
  color: #fff;
  margin-left: 0
}
#low_price {
  position: relative;
  background: #e4edf7
}
@media only screen and (max-width: 767px) {
  #low_price {
    padding-bottom: 80px
  }
}
#low_price.cont {
  margin-top: 0
}
#low_price:before {
  content: "";
  display: block;
  background-color: #e4edf7;
  border-radius: 50%;
  width: 122%;
  min-width: 1800px;
  height: 400px;
  position: absolute;
  top: -90px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
  z-index: -1
}
@media only screen and (max-width: 767px) {
  #low_price:before {
    min-width: 800px;
    top: -60px
  }
}
#low_price.cont .main_width {
  transform: translateY(-40px)
}
@media only screen and (max-width: 767px) {
  #low_price.cont .main_width {
    transform: none
  }
}
#low_price p.price_note {
  font-size: 75%;
  font-weight: 400;
  margin: 10px 5px;
  text-align: left
}
@media only screen and (min-width: 767.02px) {
  #low_price p.price_note--center {
    text-align: center
  }
}
@media only screen and (max-width: 767px) {
  #low_price p.price_note {
    width: 96%;
    margin: 10px 2%
  }
}
@media only screen and (max-width: 640px) {
  #low_price p.price_note {
    width: 96%
  }
}
#low_price .large_txt .no1 {
  font-size: 150%;
  font-weight: 700;
  position: relative
}
@media only screen and (max-width: 767px) {
  #low_price .large_txt .num {
    font-size: 175%;
    font-weight: 700;
    margin: 0 3px
  }
}
#low_price .large_txt sup {
  font-size: 16.7%;
  color: #000;
  display: block;
  position: absolute;
  top: 10px;
  right: -13px
}
@media only screen and (max-width: 767px) {
  #low_price .large_txt sup {
    font-size: 25%
  }
}
#low_price .line_note {
  margin: -30px 0 28px
}
@media only screen and (max-width: 767px) {
  #low_price .line_note {
    margin: -10px 0 10px
  }
}
.jisseki_img {
  width: 100%
}
@media only screen and (max-width: 767px) {
  .jisseki_img {
    float: none;
    margin-left: 0;
    margin-bottom: 30px;
    text-align: center
  }
  .jisseki_img img {
    margin: 0 auto
  }
}
.jisseki_notice {
  font-size: 75%;
  font-weight: 400;
  margin: 10px 5px;
  text-align: left
}
.consultation_set.cont {
  margin-top: 0
}
.consultation_set {
  padding-top: 60px;
  padding-bottom: 170px;
  background: url(../media/images/ami.png)
}
@media only screen and (max-width: 850px) {
  .consultation_set {
    padding: 40px 10px 110px
  }
}
.consultation_set.lastcons {
  padding-bottom: 60px
}
@media only screen and (max-width: 767px) {
  .consultation_set.lastcons {
    padding-bottom: 40px
  }
}
#quality_func {
  position: relative;
  background: #e4edf7;
  padding-bottom: 80px
}
@media only screen and (max-width: 767px) {
  #quality_func {
    padding-bottom: 60px
  }
}
#quality_func.cont {
  margin-top: 0
}
#quality_func:before {
  content: "";
  display: block;
  background-color: #e4edf7;
  border-radius: 50%;
  width: 122%;
  min-width: 1800px;
  height: 400px;
  position: absolute;
  top: -90px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
  z-index: -1
}
@media only screen and (max-width: 767px) {
  #quality_func:before {
    min-width: 800px;
    top: -60px
  }
}
#quality_func.cont .main_width {
  transform: translateY(-10px)
}
@media only screen and (max-width: 767px) {
  #quality_func.cont .main_width {
    transform: none
  }
}
.quality_img {
  float: right;
  margin-left: 30px;
  margin-bottom: 20px
}
.quality_img img {
  width: 424px;
  height: auto;
  object-fit: cover
}
#quality_func .cont_box .large_txt {
  line-height: 1.4
}
@media only screen and (max-width: 767px) {
  .quality_img {
    float: none;
    margin-left: 0;
    margin-bottom: 20px
  }
  .quality_img img {
    width: 100%;
    height: auto
  }
  .quality_img img {
    margin: 0 auto
  }
  #quality_func .cont_box .large_txt {
    font-size: 150%;
    line-height: 1.5;
    margin-bottom: 20px
  }
}
.zoom_wrap {
  clear: both;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  display: flex
}
@media only screen and (max-width: 767px) {
  .zoom_wrap {
    margin-top: 20px;
    padding: 8px 15px;
    display: block
  }
}
.zoom_ttl {
  width: 40%;
  font-size: 112.5%;
  font-weight: 700;
  color: #22338b
}
@media only screen and (max-width: 767px) {
  .zoom_ttl {
    width: 100%
  }
}
.zoom_ttl span {
  font-size: 66.7%;
  color: #0096ff
}
.zoom_txt {
  width: 60%
}
.cloud_img {
  margin-left: 30px
}
@media only screen and (max-width: 767px) {
  .zoom_txt {
    width: 100%;
    margin-top: 10px
  }
}
@media only screen and (max-width: 767px) {
  .cloud_img {
    margin-left: 0;
    margin-bottom: 15px
  }
}
@media only screen and (min-width: 768px) {
  .txt_wrap_flex {
    display: flex;
    flex-direction: row-reverse
  }
}
.txt_wrap_inner {
  flex: 1
}
.txt_wrap_flex .large_txt {
  font-size: 175%;
  margin-bottom: 16px
}
.txt_wrap_col:first-child {
  margin-bottom: 30px
}
.sdcard_img {
  float: right;
  margin-left: 30px
}
.analyze_wrap {
  display: flex;
  margin-top: 40px;
  margin-left: -20px
}
@media only screen and (max-width: 767px) {
  .analyze_wrap {
    display: block;
    margin-left: 0
  }
}
.analyze_box {
  width: 33%;
  margin-left: 20px
}
@media only screen and (max-width: 767px) {
  .analyze_box {
    width: 100%;
    margin-left: 0;
    margin-bottom: 40px
  }
  .analyze_box:last-child {
    margin-bottom: 0
  }
}
.analyze_box img {
  margin: 0 auto 10px
}
@media only screen and (max-width: 767px) {
  .analyze_box img {
    width: 100%
  }
}
.analyze_box ul li {
  text-align: center;
  margin-bottom: 10px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  font-size: 112.5%;
  font-weight: 600;
  color: #22338b
}
.analyze_ttl {
  font-weight: 600;
  color: #0096ff;
  margin-bottom: 10px
}
.analyze_box.text_center .analyze_ttl {
  margin-bottom: 0
}
.analyze_txt {
  font-size: 87.5%
}
#service_lineup {
  position: relative;
  background: #e4edf7;
  padding-bottom: 80px
}
@media only screen and (max-width: 767px) {
  #service_lineup {
    padding-bottom: 60px
  }
}
#service_lineup.cont {
  margin-top: 0
}
#service_lineup:before {
  content: "";
  display: block;
  background-color: #e4edf7;
  border-radius: 50%;
  width: 122%;
  min-width: 1800px;
  height: 400px;
  position: absolute;
  top: -90px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
  z-index: -1
}
@media only screen and (max-width: 767px) {
  #service_lineup:before {
    min-width: 800px;
    top: -60px
  }
}
#service_lineup.cont .main_width {
  transform: translateY(-40px)
}
@media only screen and (max-width: 767px) {
  #service_lineup.cont .main_width {
    transform: none
  }
}
.lineup_wrap {
  display: flex;
  margin-top: 40px;
  margin-left: -20px
}
@media only screen and (max-width: 767px) {
  .lineup_wrap {
    display: block;
    margin-left: 0
  }
}
.lineup_box {
  width: 33%;
  padding: 20px;
  margin-left: 20px;
  text-align: center;
  background: #fff;
  border-radius: 10px
}
@media only screen and (max-width: 767px) {
  .lineup_box {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px
  }
}
.lineup_ttl {
  height: 50px;
  display: grid;
  place-items: center
}
.lineup_box p {
  font-size: 87.5%;
  padding: 10px 0
}
.lineup_box img {
  margin: 0 auto
}
.support_wrap {
  display: flex;
  margin-top: 40px;
  margin-left: -20px
}
@media only screen and (max-width: 767px) {
  .support_wrap {
    display: block;
    margin-left: 0
  }
}
.support_box {
  width: 50%;
  padding: 20px 20px 30px;
  margin-left: 20px;
  text-align: center;
  background: #fff;
  border-radius: 10px
}
@media only screen and (max-width: 767px) {
  .support_box {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px
  }
  .support_box:last-child {
    margin-bottom: 0
  }
}
.support_box p.support_ttl {
  font-size: 162.5%;
  font-weight: 600;
  padding: 10px 0 0;
  color: #22338b
}
.support_box p.support_txt {
  font-size: 87.5%;
  padding: 10px 0
}
.support_box img {
  margin: 0 auto
}
.support_box:last-child img {
  margin-top: 25px
}
@media only screen and (max-width: 767px) {
  .support_box:last-child img {
    margin-top: 0
  }
}
.support_note {
  text-align: right;
  font-size: 75%;
  font-weight: 400;
  padding: 10px 30px 0
}
@media only screen and (max-width: 767px) {
  .support_note {
    padding: 10px 5% 0
  }
}
#faq {
  padding-bottom: 130px
}
@media only screen and (max-width: 850px) {
  #faq {
    padding-bottom: 60px
  }
}
#faq .content_title {
  padding-top: 80px
}
@media only screen and (max-width: 850px) {
  #faq .content_title {
    padding-top: 50px
  }
}
#faq .content_title h2 {
  font-size: 200%;
  text-align: left;
  margin-bottom: 40px
}
@media only screen and (max-width: 850px) {
  #faq .content_title h2 {
    font-size: 150%;
    margin-bottom: 20px
  }
}
#faq .aco_area .aco_box {
  background-color: #248ee7;
  border-radius: 10px
}
#faq .aco_area .aco_box + .aco_box {
  margin-top: 10px
}
#faq .aco_area dl dt, #faq .aco_area dl dd {
  color: #fff;
  position: relative;
  padding: 24px 60px 24px 70px
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dt, #faq .aco_area dl dd {
    padding: 15px 60px 15px 70px
  }
}
#faq .aco_area dl dt {
  cursor: pointer;
  font-size: 125%;
  text-indent: -2.8em;
  position: relative
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dt {
    font-size: 112.5%;
    text-indent: -2.6em
  }
}
#faq .aco_area dl dt:before {
  content: "";
  display: inline-block;
  background: url(../media/images/q_img.png) no-repeat left top;
  background-size: contain;
  width: 20px;
  height: 24px;
  border-right: 3px #fff solid;
  padding-right: 16px;
  margin-right: 16px;
  position: relative;
  top: 5px
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dt:before {
    width: 16px;
    height: 20px;
    border-right: 2px #fff solid;
    padding-right: 14px;
    margin-right: 14px
  }
}
#faq .aco_area dl dt .btn {
  background-color: #fff;
  border-radius: 50%;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
  position: absolute;
  top: 50%;
  right: 15px;
  width: 30px;
  height: 30px;
  margin-top: -15px
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dt .btn {
    width: 22px;
    height: 22px;
    right: 12px;
    margin-top: -11px
  }
}
#faq .aco_area dl dt .btn .border {
  display: block;
  position: relative;
  top: 1px;
  width: 30px;
  height: 30px
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dt .btn .border {
    width: 22px;
    height: 22px
  }
}
#faq .aco_area dl dt .btn .border:before, #faq .aco_area dl dt .btn .border:after {
  content: "";
  display: block;
  background-color: #248ee7;
  width: 14px;
  height: 2px;
  position: absolute;
  left: 8px;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dt .btn .border:before, #faq .aco_area dl dt .btn .border:after {
    width: 12px;
    height: 2px;
    left: 5px
  }
}
#faq .aco_area dl dt .btn .border:before {
  top: 13px;
  transform: rotate(0);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg)
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dt .btn .border:before {
    top: 9px
  }
}
#faq .aco_area dl dt .btn .border:after {
  top: 13px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg)
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dt .btn .border:after {
    top: 9px
  }
}
#faq .aco_area dl dt .btn.active .border:after {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg)
}
#faq .aco_area dl dd {
  display: none;
  text-indent: -3.5em;
  padding: 0 30px 24px 70px
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dd {
    font-size: 87.5%;
    text-indent: -3.4em
  }
}
#faq .aco_area dl dd:before {
  content: "";
  display: inline-block;
  background: url(../media/images/a_img.png) no-repeat left top;
  background-size: contain;
  width: 20px;
  height: 24px;
  border-right: 3px #fff solid;
  padding-right: 16px;
  margin-right: 16px;
  position: relative;
  top: 5px
}
@media only screen and (max-width: 850px) {
  #faq .aco_area dl dd:before {
    width: 16px;
    height: 20px;
    border-right: 2px #fff solid;
    padding-right: 14px;
    margin-right: 14px
  }
}
.faq_note {
  font-size: 75%;
  font-weight: 400;
  padding: 10px 55px 0
}
@media only screen and (max-width: 767px) {
  .faq_note {
    padding: 10px 50px 0
  }
}
.list_asterisk li {
  margin-bottom: 10px
}
.list_asterisk li span {
  position: relative;
  padding-left: 1.5em;
  display: inline-block
}
.list_asterisk li span:before {
  content: "※";
  font-size: 90%;
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto
}
.js-open_aco {
  cursor: pointer
}
.cp_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}
.cp_fv {
  width: 90%;
  max-width: 1192px;
  margin: 0 auto;
  padding-top: 195px;
  position: relative
}
@media only screen and (max-width: 1366px) {
  .cp_fv {
    padding-top: 14vw
  }
}
@media only screen and (max-width: 800px) {
  .cp_fv {
    padding-top: 35vw
  }
}
.cp_fv:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 19vw;
  background: url(../media/images/cp_fv_bg.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain
}
@media only screen and (max-width: 800px) {
  .cp_fv:after {
    background-image: url(../media/images/cp_fv_bg_sp.png);
    width: 41vw;
    height: 41vw;
    right: -5vw
  }
}
.cp_fv_inner {
  width: 86%;
  max-width: 988px;
  margin: 0 auto
}
@media only screen and (max-width: 800px) {
  .cp_fv_inner {
    width: 100%
  }
}
.cp_fv_title {
  margin-bottom: 10px;
  position: relative;
  z-index: 1
}
.cp_fv_title img {
  width: 48vw
}
@media only screen and (max-width: 800px) {
  .cp_fv_title {
    width: 76%;
    margin-bottom: 3px
  }
  .cp_fv_title img {
    width: 100%
  }
}
.cp_fv_img {
  display: block
}
.cp_fv_img:hover, .cp_fv_img:hover img {
  opacity: 1
}
.cp_fv_btn a:after {
  transform: rotate(90deg)
}
.cp_cta {
  padding: 50px 0;
  background: #5de4f8
}
.cp_cta_inner {
  width: 86%;
  max-width: 988px;
  margin: 0 auto
}
.cp_cta_col {
  display: flex;
  justify-content: space-between
}
@media only screen and (max-width: 800px) {
  .cp_cta_col {
    display: block
  }
}
.cp_cta_col a {
  width: 49.5%;
  display: block
}
@media only screen and (max-width: 800px) {
  .cp_cta_col a {
    width: 100%
  }
}
.cp_cta_col img {
  width: 100%;
  height: auto
}
@media only screen and (max-width: 800px) {
  .cp_cta_col img {
    margin-bottom: 5px
  }
}
.cp_cta_btn {
  margin-top: 35px
}
.cp_cta_aco {
  margin-top: 70px;
  padding: 25px;
  background: #fff;
  border: 3px solid #2e3192;
  border-radius: 15px
}
@media only screen and (max-width: 767px) {
  .cp_cta_aco {
    padding: 15px
  }
}
.cp_cta_aco dl dt {
  font-size: 28px;
  font-weight: 700;
  color: #2e3092;
  position: relative
}
@media only screen and (max-width: 767px) {
  .cp_cta_aco dl dt {
    font-size: 20px
  }
}
.cp_cta_aco dl dd {
  padding: 35px 30px 45px 20px;
  font-size: 15px
}
.cp_cta_aco:not(.is_open) dl dt {
  cursor: pointer
}
.cp_cta_aco:not(.is_open) dl dd {
  display: none
}
@media only screen and (max-width: 767px) {
  .cp_cta_aco dl dd {
    padding: 15px 10px 25px
  }
}
.cp_cta_aco dl dt .btn {
  background-color: #2e3092;
  border-radius: 50%;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
  position: absolute;
  top: 50%;
  right: 15px;
  width: 30px;
  height: 30px;
  margin-top: -15px
}
.cp_cta_aco dl dt .btn .border {
  display: block;
  position: relative;
  top: 1px;
  width: 30px;
  height: 30px
}
.cp_cta_aco dl dt .btn .border:before, .cp_cta_aco dl dt .btn .border:after {
  content: "";
  display: block;
  background-color: #fff;
  width: 14px;
  height: 2px;
  position: absolute;
  left: 8px;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s
}
.cp_cta_aco dl dt .btn .border:before {
  top: 13px;
  transform: rotate(0);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg)
}
.cp_cta_aco dl dt .btn .border:after {
  top: 13px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg)
}
.cp_cta_aco dl dt .btn.active .border:after {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg)
}
.list-bullet > li, .list-circled > li, .list-asterisk > li {
  position: relative;
  padding-left: 1.3em;
  counter-increment: cnt
}
.list-bullet > li:before, .list-circled > li:before, .list-asterisk > li:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.3em;
  height: 1.3em
}
.list-asterisk > li {
  font-size: 12px;
  line-height: 1.8em
}
.list-asterisk > li:before {
  content: "※"
}
.list-bullet > li:before {
  content: "・"
}
.list-circled > li:before {
  content: "●"
}
.logo_flex {
  display: flex;
  align-items: center
}
.txt_cp {
  margin-left: 10px;
  padding: 4px 10px;
  background: #f81d26;
  color: #ff8;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 4px 4px #000
}
.text-bold {
  font-weight: 700 !important
}
.text-large {
  font-size: 120%
}
.text-small {
  font-size: 70%;
  display: inline-block
}
.mgn_top5 {
  margin-top: 5px !important
}
.mgn_top10 {
  margin-top: 10px !important
}
.mgn_top15 {
  margin-top: 15px !important
}
.mgn_top20 {
  margin-top: 20px !important
}
.mgn_top25 {
  margin-top: 25px !important
}
.mgn_top30 {
  margin-top: 30px !important
}
.mgn_top35 {
  margin-top: 35px !important
}
.mgn_top40 {
  margin-top: 40px !important
}
.mgn_top45 {
  margin-top: 45px !important
}
.mgn_top50 {
  margin-top: 50px !important
}
.mgn_top55 {
  margin-top: 55px !important
}
.mgn_top60 {
  margin-top: 60px !important
}
.mgn_top65 {
  margin-top: 65px !important
}
.mgn_top70 {
  margin-top: 70px !important
}
.mgn_top75 {
  margin-top: 75px !important
}
.mgn_top80 {
  margin-top: 80px !important
}
.mgn_top85 {
  margin-top: 85px !important
}
.mgn_top90 {
  margin-top: 90px !important
}
.mgn_top95 {
  margin-top: 95px !important
}
.mgn_top100 {
  margin-top: 100px !important
}
.no1_detail p {
  font-size: 81.3%
}
.no1_detail {
  display: flex;
  flex-direction: row-reverse;
  padding: 0 8%
}
@media only screen and (max-width: 767px) {
  .show_pc {
    display: none
  }
  .no1_detail {
    font-size: 12px
  }
}
@media only screen and (min-width: 768px) {
  .show_sp {
    display: none
  }
}
.campaign2022_lead {
  text-align: center;
  font-size: 62%;
  font-weight: 700
}
@media only screen and (max-width: 400px) {
  .campaign2022_lead {
    text-align: center;
    font-size: 60%;
    font-weight: 700
  }
}
.campaign2022_lead span {
  font-size: 160%;
  color: #fffc00
}
.campaign2022_annotation {
  padding: 20px 0 0;
  text-align: center;
  font-size: 81.3%;
  line-height: 1.5;
  color: #fff
}
@media only screen and (max-width: 767px) {
  .campaign2022_annotation {
    font-size: 65%;
    text-align: left
  }
}
#kv_area .set_wrap .ttl_set h1 span span.annotation3 {
  display: inline-block;
  font-size: 38%;
  font-weight: 400
}
#kv_area .set_wrap .ttl_set h1 span span.percent_off {
  display: inline-block;
  color: #fffc00
}
.cost_off {
  padding-left: 6%
}
.cont .sp {
  display: none !important
}
@media only screen and (max-width: 640px) {
  .cont .pc {
    display: none !important
  }
  .cont .sp {
    display: block !important
  }
}
/*p.p-chat.chatbot.qualvaBtn {
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 10000
}
p.p-chat.chatbot.qualvaBtn img {
  width: 264px*/
}
@media only screen and (max-width: 767px) {
/*  p.p-chat.chatbot.qualvaBtn {
    right: 5px;
    bottom: 0
  }
  p.p-chat.chatbot.qualvaBtn img {
    width: 240px
  }*/
}
.l-mv {
  position: relative;
  z-index: 1
}
.l-mv:before, .l-mv:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%
}
.l-mv:before {
  background: no-repeat center bottom/cover
}
.l-mv:after {
  padding-top: 36%;
  background: no-repeat -8px -7px/clamp(300px, 29.795022%, 600px) auto url(../media/images/main_flag_left.png), no-repeat calc(100% + 9px) -15px/clamp(300px, 31.9912153%, 600px) auto url(../media/images/main_flag_right.png)
}
.l-mv__main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(100%, 1010px);
  height: auto
}
.l-mv__link {
  display: grid;
  justify-items: center;
  margin: 0 auto;
  padding: 0 10px
}
.l-mv__link a {
  margin-top: 6px
}
.l-mv__lead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 .6em;
  align-items: center;
  text-align: center;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2083334
}
.l-mv__lead:before, .l-mv__lead:after {
  content: "";
  display: block;
  width: 3px;
  height: 1em;
  border-radius: 3px;
  background-color: currentColor
}
.l-mv__lead:before {
  transform: rotate(-29deg)
}
.l-mv__lead:after {
  transform: rotate(29deg)
}
.l-mv__annotation {
  color: #fff;
  font-weight: 400;
  font-size: .625rem;
  letter-spacing: -.04em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.l-mv__annotation span:after {
  content: " "
}
.l-mv--a {
  margin-bottom: 98px;
  padding-top: 145.060241%
}
.l-mv--a:before {
  height: 100%;
  background-image: url(../media/images/mv_bg_a_pc.png)
}
.l-mv--a .l-mv__link {
  position: absolute;
  bottom: -33px;
  left: 0;
  right: 0;
  z-index: 1
}
.l-mv--a .l-mv__lead {
  color: #e40280
}
.l-mv--a .l-mv__annotation {
  position: absolute;
  top: calc(100% + 9px);
  width: min(680px, 100vw - 20px)
}
@media (min-width: 1200.02px) {
  .l-mv--a .l-mv__link {
    width: max-content
  }
  .l-mv--a .l-mv__annotation {
    top: 46px;
    left: calc(100% + 15px);
    width: max-content;
    color: #000
  }
  .l-mv--a .l-mv__annotation span {
    display: block
  }
  .l-mv--a .l-mv__annotation span:after {
    content: none
  }
}
@media (min-width: 640.02px) {
  .l-mv--a {
    margin-bottom: 80px;
    padding-top: min(72%, 660px)
  }
  .l-mv--a .l-mv__link {
    bottom: -24px
  }
}
.l-mv--b {
  margin-bottom: 24px;
  padding-top: 132.6086957%
}
.l-mv--b:before {
  height: min(58vw, 580px);
  height: min(58dvw, 580px);
  background-image: url(../media/images/mv_bg_b_pc.png)
}
.l-mv--b .l-mv__link {
  margin-top: 12px
}
.l-mv--b .l-mv__lead {
  color: #fff
}
.l-mv--b .l-mv__annotation {
  margin: 11px auto 0;
  width: min(100%, 820px);
  color: #fff
}
.l-mv--b .l-mv__annotation span {
  display: block
}
@media (min-width: 640.02px) {
  .l-mv--b {
    margin-bottom: 32px;
    padding-top: min(58%, 580px)
  }
  .l-mv--b .l-mv__link {
    margin-top: 24px
  }
  .l-mv--b .l-mv__annotation {
    margin-top: 17px
  }
  .l-mv--b .l-mv__annotation span {
    display: inline-block
  }
}
@media (max-width: 768px) {
  .l-mv__lead {
    font-size: 1.25rem
  }
}
@media (max-width: 640px) {
  .l-mv:before, .l-mv:after {
    content: none
  }
  .l-mv__link a {
    margin-top: 6px
  }
  .l-mv__lead {
    align-items: end;
    font-size: min(4.589372vw, 1.1875rem);
    line-height: 1.2105264
  }
  .l-mv__lead:before, .l-mv__lead:after {
    height: 1.15em
  }
}
.c-button {
  display: block;
  margin: 0 auto;
  width: max-content;
  padding: 5px;
  border-radius: 48px;
  background-color: #ff3ba8;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2083334;
  transition: opacity .2s ease-out;
  animation: pekopeko 2s infinite
}
.c-button span {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 23px;
  align-items: center;
  padding: 4px 23px 4px 4px;
  border: 3px solid currentColor;
  border-radius: 48px;
  color: #fff
}
.c-button span:before {
  content: "無料";
  display: grid;
  place-items: center;
  margin-right: 7px;
  width: 69px;
  height: 69px;
  border-radius: 50%;
  background-color: #fff;
  color: #e40280
}
.c-button span:after {
  content: "";
  display: block;
  width: 11px;
  height: 19px;
  background-color: currentColor;
  mask: no-repeat right center/contain url(../media/images/chevron.svg)
}
@media (max-width: 768px) {
  .c-button {
    font-size: 1.25rem
  }
  .c-button span:before {
    width: 63px;
    height: 63px
  }
}
@media (max-width: 640px) {
  .c-button {
    padding: 5px;
    font-size: min(3.8vw, 1.0625rem);
    line-height: 1.1764706
  }
  .c-button span {
    gap: 0 15px;
    padding-right: 15px;
    border-width: 2px
  }
  .c-button span:before {
    margin-right: 0;
    width: 49px;
    height: 49px;
    font-size: .875rem
  }
  .c-button span:after {
    margin-left: 4px;
    width: 8px;
    height: 13px
  }
}
.c-plans {
  display: grid;
  grid-template-columns: 1fr 40.6839623%;
  gap: 40px;
  justify-content: center;
  margin: 0 auto 28px;
  width: min(100%, 848px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.c-plans em {
  font-style: normal
}
.c-plans__group {
  counter-increment: plans-item;
  position: relative
}
.c-plans__group:nth-of-type(2):before {
  position: absolute;
  top: 0;
  left: -20px;
  width: 1px;
  height: 100%;
  background-color: #707070
}
@media (min-width: 767.02px) {
  .c-plans__group:nth-of-type(2):before {
    content: ""
  }
}
.c-plans__title {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px 20px;
  align-items: center;
  color: #22338b;
  font-weight: 700
}
.c-plans__title:before {
  content: counter(plans-item);
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background-color: #fff;
  font-size: 28px
}
.c-plans__title h4 {
  margin-bottom: 0;
  font-size: 28px;
  letter-spacing: .1em;
  line-height: 1.2142858
}
.c-plans__title h4:before {
  content: none
}
.c-plans__title h4 > span {
  position: relative;
  z-index: 1
}
.c-plans__title h4 > span:before {
  content: "";
  position: absolute;
  bottom: -.1em;
  left: 0;
  z-index: -1;
  width: 100%;
  height: .4285715em;
  background-color: #fffc00
}
.c-plans__title em {
  font-size: 40px;
  letter-spacing: .1em;
  line-height: 1.2
}
.c-plans__title small {
  color: #0096ff;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .1em
}
.c-plans__title p {
  grid-column: 1/3;
  color: #333;
  font-weight: 500;
  line-height: 1.1875
}
.c-plans__list {
  display: grid;
  grid-template-columns: repeat(var(--plans_items_list_columns, 1), 1fr);
  column-gap: 20px;
  margin-top: 16px
}
.c-plans__item {
  overflow: hidden;
  position: relative;
  background-color: #fff;
  text-align: center;
  padding: 20px 20px 0;
  border-radius: 10px
}
.c-plans__item:before {
  content: "";
  display: block;
  background-color: #fffc00;
  border-radius: 60%;
  width: 120%;
  height: 144px;
  position: absolute;
  z-index: 1;
  top: -25%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%)
}
.c-plans__item--has-camera:after {
  content: "";
  display: block;
  position: absolute;
  top: 68px;
  left: 21.9330856%;
  width: 21.7857143%;
  height: 95px;
  background: no-repeat center top/contain url(../media/images/price_img02_camera.png)
}
.c-plans__item p.blue {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  font-weight: 700;
  line-height: 1.3;
  width: 100%;
  height: 2.6em
}
.c-plans__item img {
  position: relative;
  margin: 56px auto 0;
  width: auto;
  height: min(16vw, 141px);
  object-fit: scale-down
}
.c-plans__option {
  margin-top: 18px;
  font-weight: 500;
  font-size: 16px
}
.c-plans__option em {
  font-size: 20px
}
.c-plans__option small {
  font-size: 12px
}
@media (max-width: 767px) {
  .c-plans {
    grid-template-columns: minmax(0, 480px)
  }
  .c-plans__group:nth-of-type(2) .c-plans__item img {
    width: 64%;
    height: 64px;
    margin-top: 40px
  }
  .c-plans__item {
    padding: 15px 5px 0
  }
  .c-plans__item:before {
    width: 180%;
    height: 134px;
    top: max(-38%, -72px)
  }
  .c-plans__item--has-camera:after {
    top: 54px;
    margin-inline: auto;
    left: -62px;
    right: 0;
    width: 25.925926%;
    height: 88px
  }
  .c-plans__item img {
    margin-top: 35px;
    height: 100px;
    object-position: top
  }
}
/* 202512 */
.l-mv--202512b, .l-mv--202512c {
  margin-bottom: 24px;
  padding-top: 132.6086957%;
}
.l-mv--202512b:before, .l-mv--202512c:before {
  height: min(58vw, 580px);
  height: min(58dvw, 580px);
  background: url(../media/images/bg_pc.png) no-repeat center center /cover;
}
.l-mv--202512b .l-mv__link, .l-mv--202512c .l-mv__link {
  margin-top: 12px;
}
.l-mv--202512b .l-mv__lead, .l-mv--202512c .l-mv__lead {
  color: #fff;
}
.l-mv--202512b .l-mv__annotation, .l-mv--202512c .l-mv__annotation {
  margin: 11px auto 0;
  color: #fff;
}
.l-mv--202512b .l-mv__annotation span, .l-mv--202512c .l-mv__annotation span {
  display: block;
}
/* @media (min-width: 640.02px) 内での統合 */
@media (min-width: 640.02px) {
  .l-mv--202512b, .l-mv--202512c {
    margin-bottom: 32px;
    padding-top: min(58%, 580px);
  }
  .l-mv--202512b .l-mv__link, .l-mv--202512c .l-mv__link {
    margin-top: 24px;
  }
  .l-mv--202512b .l-mv__annotation, .l-mv--202512c .l-mv__annotation {
    margin-top: 17px;
  }
  .l-mv--202512b .l-mv__annotation span, .l-mv--202512c .l-mv__annotation span {
    display: inline-block;
  }
}
.l-mv--202512b.l-mv:after, .l-mv--202512c.l-mv:after {
  padding-top: 36%;
  background: none !important;
}
/* --- メインビジュアルのテキストオーバーレイ用スタイル（新規追加） --- */
.l-mv__main {
  position: absolute;
}
.l-mv__main-overlay-text {
  position: absolute;
  top: 6.0%;
  right: 400px;
  left: 0;
  width: 550px;
  margin: 0 auto;
  text-align: left;
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
  z-index: 2;
  box-sizing: border-box;
}
.l-mv__main-subheading {
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
  color: #333;
  letter-spacing: 0.5px;
}
.l-mv__main-heading-group {
  line-height: 1.2;
}
.l-mv__main-heading-small {
  display: block;
  font-size: 4.55rem;
  font-weight: 600;
  font-feature-settings: "palt";
  margin-top: 15px;
  margin-bottom: -3px;
  letter-spacing: 3px;
}
.l-mv__main-heading-large {
  display: block;
  font-size: 4.55rem;
  font-weight: 600;
  font-feature-settings: "palt";
  letter-spacing: 3px;
}
.l-mv__main-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin-top: 40px;
}
.l-mv__main-features li {
  display: inline-block;
  color: #333;
  padding-left: 25px;
  font-size: 1.2rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
  background-image: url(../media/images/main_pc_checkmark.png);
  background-repeat: no-repeat;
  background-size: 1.0rem;
  background-position: left 5px bottom 2px;
}
/* --- レスポンシブ対応 (メディアクエリ) --- */
/* 1200px 以下の画面幅 */
@media (max-width: 1200px) {
  .l-mv__main-features {
    gap: clamp(2px, calc(-9.4286px + 1.78575vw), 12px);
    margin-top: clamp(20px, calc(-2.8573px + 3.5715vw), 40px);
  }
  .l-mv__main-features li {
    font-size: clamp(1.0rem, calc(0.39994rem + 1.250097664vw), 1.2rem);
    padding-left: clamp(18px, calc(10px + 1.25004vw), 25px);
    background-size: clamp(0.75rem, calc(7.428px + 0.7143vw), 1.0rem);
  }
}
/* 1024px 以下の画面幅 */
@media (max-width: 1024px) {
  .l-mv__main-overlay-text {
    position: absolute;
    right: clamp(240px, calc(-26.675px + 41.66676vw), 400px);
    width: clamp(350px, calc(16.6556px + 52.08396vw), 550px);
  }
  .l-mv__main-subheading {
    font-size: clamp(1.3rem, calc(0.09945rem + 2.5009766vw), 1.7rem);
  }
  .l-mv__main-heading-small {
    font-size: clamp(45px, calc(-1.3428px + 7.24074vw), 4.55rem);
  }
  .l-mv__main-heading-large {
    font-size: clamp(45px, calc(-1.3428px + 7.24074vw), 4.55rem);
  }
}
/* 768px 以下の画面幅 */
@media (max-width: 768px) {
  .l-mv__main-subheading {
    font-size: clamp(1.1rem, calc(0.09984rem + 2.50039vw), 1.3rem);
  }
  .l-mv__main-features li {
    font-size: clamp(0.8rem, calc(-0.20016rem + 2.50039vw), 1.0rem);
  }
}
/* 640px 以下の画面幅 */
@media (max-width: 640px) {
  .l-mv__main-overlay-text {
    display: none;
  }
}
/* ヘッダースタイル */
#headerB, #headerC {
  background: linear-gradient(to right, #1780c5, #80c8bb);
  position: relative;
  z-index: 5;
}
#headerB .h_logo, #headerC .h_logo {
  padding: 20px 20px;
  display: flex;
  align-items: center;
}
#headerB .h_logo > *:nth-child(1), #headerC .h_logo > *:nth-child(1) {
  margin-right: 40px;
}
.h_logo_text {
  font-size: 1.2rem;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .h_logo_text {
    font-size: 0.9rem;
  }
  #headerB .h_logo, #headerB .h_logo {
    padding: 10px 10px;
  }
  #headerB .h_logo img, #headerB .h_logo img {
    width: 80px;
    height: auto;
  }
  #headerB .h_logo > *:nth-child(1), #headerB .h_logo > *:nth-child(1) {
    margin-right: 20px;
  }
}