:root {
  --bg: #f2fffb;
  --ink: #0b2421;
  --mut: #6b7b80;
  --brand: #14b8a6;
  --brand-d: #0e8b80;
  --line: #dfe9e7;
  --btn: #ffffff;
  --btn-b: #cfeeee;
  --dim: opacity(.45);
  --radius: 8px;
  --shadow: 0 6px 14px rgba(0, 0, 0, .06);
}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto;vertical-align:bottom}
button,input,select,textarea{font:inherit}

html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.6;
  padding: 0;
  margin: 0;
}
select{
  appearance: none;
}
button{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
.customize-support{margin: 0;padding: 0;}
.advance_lp1 :where(p,ul,ol,div,h1,h2,h3){padding: 0;margin: 0;}

.site-header {
  background: linear-gradient(to right, #ffffff 50%, #007bca 50%);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.site-header .brand {
  width: 30%;
  max-width: 115px;
  display: grid;
  place-content: center;
  padding: 10px 0;
}
.site-header .brand img{
  translate: 5px 0;
}

.site-header .catch {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  width: 70%;
  max-width: 260px;
  padding: 10px 0 10px 25px;
  background: linear-gradient(115deg, #ffffff 7%, #007bca 7%);
}

.container {
  max-width: 375px;
  width: 100%;
  min-height: calc(100vh - 42px - 78px);
  margin: 0 auto;
  padding: 20px 30px 40px;
  color: #222;
}

.steps {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  position: relative;
}
.steps::after{
  content: '';
  display: block;
  max-width: 290px;
  width: calc(290 / 375 * 100dvw);
  height: 3px;
  position: absolute;
  bottom: 4px;
  left: 10px;
  background: linear-gradient(to right, #00B6CC 50%, #ccc 50%);
  background-size: 200% auto;
  background-position: -100% 0;
  z-index: 0;
  transition: background-position .3s;
}
.steps:has(li:nth-child(2).is-active)::after{
  background-position: -133% 0;
}
.steps:has(li:nth-child(3).is-active)::after{
  background-position: -166% 0;
}
.steps:has(li:nth-child(4).is-active)::after{
  background-position: -200% 0;
}

.steps li {
  font-family: 'Roboto';
  width: 3em;
  color: #ccc;
  font-size: 9px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: color .3s;
}

.steps li span{
  font-size: 11px;
}

.steps li::after {
  content: '';
  display: block;
  width: 12px;
  aspect-ratio: 1/1;
  background-color: #ccc;
  border-radius: 50%;
  margin: 3px auto 0;
  transition: background-color .3s;
}

.steps li:has(~ .is-active){
  color: #00B6CC;
}

.steps li:has(~ .is-active)::after{
  background-color: #00B6CC;
}

.steps li.is-active {
  color: #00B6CC;
  font-weight: 700
}

.steps li.is-active::after {
  background-color: #00B6CC;
}

.ttl {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 27px;
}

.mf .step {
  display: none;
  animation: fade .18s ease
}

.mf .step.is-active {
  display: block
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.choice-group {
  display: grid;
  gap: 20px
}
:where(.choice-group, .field) {
  position: relative;
}

.choice-group .option {
  display: block
}

.choice-group input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.btn {
  display: grid;
  place-content: center;
  width: 100%;
  background: var(--btn);
  border: 2px solid #00B6CC;
  border-radius: var(--radius);
  padding: 12px 23px;
  box-shadow: var(--shadow);
  font-weight: 700;
  position: relative;
  height: 70px;
}

.btn img{
  position: absolute;
  top: 50%;
  left: 23px;
  translate: 0 -50%;
}

.btn-large {
  padding: 20px 16px
}

.option.selected .btn {
  border-color: #2789D0;
  background-color: #2789D0;
  color: #fff;
  text-shadow: 1px 1px 1px #7DD0FC;
}

.choice-group:has(.option.selected) .option:not(.selected) {
  filter: grayscale(1);
}

.field {
  --leftPadding: 12px;
  margin: 14px 0
}

.field .error{
  font-size: 12px;
  color: red;
  height: 0;
  overflow: hidden;
  transition: height .3s;
}
.field .error.is-error{
  height: 1lh;
}

.label {
  display: block;
  margin-bottom: 10px;
  font-weight: 700
}

.input,
.select {
  width: 100%;
  padding: 14px var(--leftPadding);
  border: 2px solid #00B6CC;
  border-radius: 8px;
  background: #fff;
  outline: 0;
  height: 70px;
}

.input:focus,
.select:focus {
  border-color: var(--brand)
}
.input-birth{
  position: relative;
}
.input-birth input{
  padding-left: 3em;
}
.input-birth::before,
.input-birth::after{
  display: block;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
.input-birth::before{
  content: attr(data-before);
  left: var(--leftPadding);
}
.input-birth::after{
  content: attr(data-after);
  left: 8em;
}
.input-select{
  position: relative;
}
.input-select::before{
  content: '';
  display: block;
  width: 16px;
  aspect-ratio: 2/1;
  background-color: #00B6CC;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  top: 50%;
  right: 0;
  translate: -100% -50%;
}

.note {
  display: flex;
  align-items: center;
  column-gap: 14px;
  margin-top: 22px;
}
.note img{
  width: 60px;
}
.note-text{
  width: calc(100% - 60px - 14px);
  font-size: 12px;
  font-weight: 500;
  background-color: #FFF3B2;
  padding: 9px 3px 9px 10px;
  border-radius: 8px;
  position: relative;
}
.note-text::before{
  content: '';
  display: block;
  height: 15%;
  aspect-ratio: 1/1;
  background-color: #FFF3B2;
  position: absolute;
  top: 50%;
  left: 0;
  translate: -100% -50%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.note-text--color{
  font-weight: 700;
  color: #FF6A01;
}

.nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 30px
}

.btn-ghost--next,
.btn-primary {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 10px 0;
}

.btn-primary{
  width: 100%;
  height: 70px;
  margin-top: 34px;
}

.btn-ghost--next {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
  background: #00B6CC;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  box-shadow: var(--shadow);
  width: 218px;
}
.btn-ghost--next::after{
  content: '';
  width: 0.5em;
  aspect-ratio: 1/1;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.btn-ghost--prev{
  font-size: 14px;
  font-weight: 500;
  margin-right: auto;
}

.btn-primary {
  background: linear-gradient(180deg, #FF9500, #FF6600);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  box-shadow: var(--shadow)
}

.site-footer {
  background-color: #333;
  padding: 15px 0 11px;
  color: var(--mut);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.site-footer .legal {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin-bottom: 14px;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}

.thanks-ttl{
  padding-top: 39px;
  font-size: 18px;
  font-weight: 700;
  color: #2789D0;
  text-align: center;
}
.thanks-lead{
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-top: 16px;
}
.thanks-text{
  font-size: 14px;
  text-align: center;
}
.thanks-iframe{
  margin: 16px auto 0;
  text-align: center;
}
.thanks-iframe .thanks-iframe_text{
  color: #FF6A01;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1em;
}
.thanks-iframe .thanks-iframe_text::before,
.thanks-iframe .thanks-iframe_text::after{
  content: '';
  width: 1px;
  height: 1lh;
  background-color: currentColor;
}
.thanks-iframe .thanks-iframe_text::before{
  rotate: -45deg;
}
.thanks-iframe .thanks-iframe_text::after{
  rotate: 45deg;
}
.thanks-iframe .btn-primary{
  display: grid;
  place-content: center;
  margin-top: 11px;
  text-decoration: none;
}
.thanks-iframe a:not(.btn-primary){
  color: inherit;
  font-size: 14px;
}
@media (hover: hover) and (pointer: fine){
  .thanks-iframe a:hover{
    text-decoration: none;
  }
}
.banner{
  width: 100%;
  margin: 0 auto;
  background-color: #EDEDED;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 12px;
  padding: 7px 0;
}
@media (500px <= width){
  .banner{
    max-width: 375px;
  }
}
.banner-text{
  font-size: 12px;
  font-weight: bold;
  color: #2789D0;
}
.banner img{
  width: 192px;
}