@charset "UTF-8";
.lp-c-content {
  --color-white: #fff;
  --color-gray-100: #f3f3f3;
  --color-gray-300: #dbdbdb;
  --color-gray-900: #333;
  --color-gray-300-alpha: rgb(51 51 51 / 30%);
  --color-gray-900-alpha: rgb(51 51 51 / 100%);
  --color-turquoise: #013d56;
  --color-red: #b00000;
  --color-red-600: #c4382c;
  --color-navy: #003;
  --color-navy-100-alpha: rgb(0 0 51 / 10%);
  --color-divider: #68645e;
  --color-rose-200: #f6cfd0;
  --color-text-base: var(--color-gray-900);
  --color-text-heading: var(--color-turquoise);
  --color-text-error: var(--color-red);
  --color-text-important: var(--color-red);
  --background-primary: var(--color-gray-100);
  --color-surface-primary: var(--color-white);
  --color-surface-secondary: var(--color-turquoise);
  --color-surface-tertiary: var(--color-gray-900);
  --color-surface-accent: var(--color-navy);
  --color-surface-error: var(--color-red);
  --color-surface-important: var(--color-red);
  --color-surface-rose: var(--color-rose-200);
  --color-placeholder: var(--color-gray-300-alpha);
  --color-selection: var(--color-navy-100-alpha);
}
:root {
  --content-max-width-pc: 1080px;
}
/* ----------------------------------------
  コンテンツ
---------------------------------------- */
html:has(.lp-c-content) {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
.lp-c-content {
  color: var(--color-text-base);
  accent-color: var(--color-surface-accent);
  caret-color: var(--color-surface-accent);
}
@media screen and (min-width: 1212px) {
  .lp-c-content {
    padding-top: 51px;
  }
}
.lp-c-content * {
  box-sizing: border-box;
}
.lp-c-content img {
  height: auto;
  vertical-align: top;
}
.lp-c-content ::-moz-selection {
  background-color: var(--color-selection);
}
.lp-c-content ::selection {
  background-color: var(--color-selection);
}
.lp-c-scroll-target {
  --header-height-pc: 50px;
  --header-height-sp: 127px;
  display: block;
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 1px;
}
@media screen and (max-width: 768px) {
  .lp-c-scroll-target {
    margin-top: calc((var(--header-height-sp)) * -1);
  }
}
@media screen and (min-width: 1212px) {
  .lp-c-scroll-target {
    margin-top: calc((var(--header-height-pc)) * -1);
  }
}
/* ----------------------------------------
  ボタン
---------------------------------------- */
.lp-c-button {
  display: grid;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.lp-c-button.lp-c-button-wide {
  max-width: 500px;
  margin-top: 35px;
}
.lp-c-button a,
.lp-c-button button {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  padding: 18px 16px 17px;
  transition: 0.2s ease-out all;
  border: 1px solid var(--color-surface-accent);
  background-color: var(--color-surface-accent);
  color: var(--color-surface-primary);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
  gap: 8px;
  font-feature-settings: 'halt' on;
  cursor: pointer;
}
@media (any-hover: hover) {
  .lp-c-button a:hover,
  .lp-c-button button:hover {
    border-color: var(--color-surface-accent);
    background-color: var(--color-surface-primary);
    color: var(--color-surface-accent);
  }
  .lp-c-button a:hover .lp-c-button__icon,
  .lp-c-button button:hover .lp-c-button__icon {
    background-color: var(--color-surface-accent);
  }
}
.lp-c-button__icon {
  --c: 35%;
  --shape: 0 0, var(--c) 0, 100% 50%, var(--c) 100%, 0 100%,
  calc(100% - var(--c)) 50%, 0 0;
  height: 10px;
  transform: rotate(90deg);
  background: var(--color-surface-primary);
  clip-path: polygon(var(--shape));
  aspect-ratio: 3/5;
}
.lp-c-button__icon--right {
  transform: rotate(0deg);
}
/* ----------------------------------------
  ぱんくず
---------------------------------------- */
.lp-c-breadcrumb {
  overflow: hidden;
  border-top: solid 1px #dbdbdb;
  width: 100%;
}
@media screen and (min-width: 1212px) {
  .lp-c-breadcrumb {
    width: var(--content-max-width-pc);
    margin-inline: auto;
  }
}
@media screen and (min-width: 769px) {
  .lp-c-breadcrumb {
    padding-top: 30px;
  }
}
@media screen and (min-width: 1212px) {
  .lp-c-breadcrumb {
    padding-top: unset;
  }
}
.lp-c-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 15px;
  gap: 0.4em 0.1em;
}
@media screen and (min-width: 1212px) {
  .lp-c-breadcrumb-list {
    padding-inline: 0;
  }
}
.lp-c-breadcrumb-list > li {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  -moz-column-gap: 2px;
  column-gap: 2px;
  font-size: 10px;
  letter-spacing: 0;
}
.lp-c-breadcrumb-list > li:not(:last-child)::after {
  content: '>';
}
.lp-c-breadcrumb-list a {
  color: var(--color-text-base);
  font-size: 10px;
  text-decoration: underline;
}
/* ----------------------------------------
  導線のカード
---------------------------------------- */
.lp-c-guide-card {
  background-color: var(--color-surface-primary);
}
@media screen and (max-width: 768px) {
  .lp-c-guide-card {
    padding: 24px 30px;
  }
}
@media screen and (min-width: 769px) {
  .lp-c-guide-card {
    padding: 32px 40px;
  }
}
.lp-c-guide-card__heading {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.lp-c-guide-card__points {
  margin-bottom: 28px;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  display: grid;
  grid-auto-flow: row;
  margin-left: 1.5em;
  list-style: disc;
}
.lp-c-guide-card__points > li:not(:last-child) {
  margin-bottom: 0.75em;
}
.lp-c-guide-card__notations {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 2;
  counter-reset: guide-card;
  display: grid;
  position: relative;
  grid-auto-flow: row;
  margin-left: 0;
  padding-left: 1.1em;
  list-style: none;
  row-gap: 0.5em;
}
.lp-c-guide-card__notations > li {
  counter-increment: guide-card;
}
.lp-c-guide-card__notations > li::before {
  position: absolute;
  left: 0;
  content: '※';
}
@media screen and (max-width: 768px) {
  .lp-c-guide-card__notations {
    margin-top: 16px;
  }
}
@media screen and (min-width: 769px) {
  .lp-c-guide-card__notations {
    margin-top: 12px;
  }
}
.lp-guide-logo {
  margin-right: -65px;
}
@media screen and (min-width: 769px) {
.lp-guide-logo {
  margin-right: 0;
}
}