/* shared across landing/ pages only — moved out of assets/css/style.css so this delivery never touches the shared file */

/* --fl-unit is not defined at all on production (confirmed against bk/public_html/assets/css/style.css) —
   without this, every calc(N * var(--fl-unit)) rule below and in each page's own css resolves to nothing */
:root {
  --fl-unit: min(calc(100vw / 1440), 1px);
}
@media screen and (max-width: 768px) {
  :root {
    --fl-unit: calc(100vw / 375);
  }
}

/* production's .modBtn02:hover is missing this property (confirmed against bk) — used by all landing pages */
.modBtn02:hover {
  border-bottom: none;
}

/*reasonPageAnchor hover (reason component, used by all landing pages)*/

.reason .reasonPageAnchor__link:hover {
  border-bottom: none;
}
.reason .reasonPageAnchor__link:hover .arrow::after {
  animation: arrowAnimationDown 0.6s ease-out;
}

/* utility */
.u-sp-only {
  display: none;
}
.u-pc-only {
  display: block;
}

.u-text-center {
  text-align: center;
}

@media screen and (max-width: 768px) {
  .u-sp-only {
    display: block;
  }
  .u-pc-only {
    display: none;
  }
}

/* lpFeature start */

@media screen and (max-width: 768px) {
  .modSection:has(.lpFeatureBox) {
    width: 100%;
    margin-inline: auto;
  }
}

.modTextNote.--lpFeatureBox {
  font-size: clamp(14px, calc(0.3vw + 11.71px), 16px);
  margin-bottom: 16px;
  max-width: 1440px;
  margin-inline: 80px;
}
@media screen and (max-width: 768px) {
  .modTextNote.--lpFeatureBox {
    font-size: clamp(12px, calc(1.02vw + 8.18px), 16px);
    margin-inline: 8px 16px;
    margin-bottom: 16px;
  }
}

.lpFeatureBox__heading {
  font-weight: bold;
  font-size: clamp(19px, calc(0.75vw + 13.27px), 24px);
  color: var(--white);
  background: var(--green);
  padding: calc(18 * var(--fl-unit));
  margin-bottom: calc(25 * var(--fl-unit));
  border-radius: 4px;
}
@media screen and (max-width: 768px) {
  .lpFeatureBox__heading {
    font-size: clamp(18px, calc(1.53vw + 12.27px), 24px);
    padding: calc(12 * var(--fl-unit));
    margin-bottom: calc(18 * var(--fl-unit));
  }
}

.lpFeatureBox__subHeading {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: bold;
  color: var(--green);
  background: var(--white);
  font-size: clamp(15px, calc(0.45vw + 11.56px), 18px);
  padding: calc(18 * var(--fl-unit));
  margin-bottom: calc(25 * var(--fl-unit));
  line-height: 1.4;
}
.lpFeatureBox__subHeading::before {
  content: "";
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: var(--green);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='0,0 100,0 50,100'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='0,0 100,0 50,100'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
@media screen and (max-width: 768px) {
  .lpFeatureBox__subHeading {
    font-size: clamp(14px, calc(1.53vw + 8.27px), 20px);
    padding: calc(12 * var(--fl-unit));
    margin-bottom: calc(18 * var(--fl-unit));
  }
}

.lpFeatureBox__mini-heading {
  font-weight: bold;
  color: #000;
  font-size: clamp(15px, calc(1.34vw + 4.69px), 24px);
  line-height: 1.4;
  margin-bottom: calc(25 * var(--fl-unit));
}
@media screen and (max-width: 768px) {
  .lpFeatureBox__mini-heading {
    font-size: clamp(18px, calc(1.02vw + 14.18px), 22px);
    margin-bottom: calc(18 * var(--fl-unit));
  }
}

.lpFeatureBox__imgbox {
  width: 100%;
  overflow: hidden;
  margin-bottom: calc(25 * var(--fl-unit));
}
@media screen and (max-width: 768px) {
  .lpFeatureBox__imgbox {
    margin-bottom: calc(18 * var(--fl-unit));
  }
}

.lpFeatureBox__imgbox.--mid {
  max-width: 758px;
  margin-inline: auto;
}
.lpFeatureBox img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.lpFeatureBox__imgbox > iframe {
  padding-top: calc(25 * var(--fl-unit));
}
@media screen and (max-width: 768px) {
  .lpFeatureBox__imgbox > iframe {
    padding-top: calc(18 * var(--fl-unit));
  }
}

.modSection__content:has(.lpFeatureBox) {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--fl-unit));
  background-color: var(--white);
  padding-inline: 80px;
}
@media screen and (max-width: 768px) {
  .modSection__content:has(.lpFeatureBox) {
    gap: calc(24 * var(--fl-unit));
    padding-inline: calc(16 * var(--fl-unit));
  }
}

.lpFeaturesBox__note {
  background-color: var(--white);
  margin-bottom: calc(25 * var(--fl-unit));
}
@media screen and (max-width: 768px) {
  .lpFeaturesBox__note {
    margin-bottom: calc(18 * var(--fl-unit));
  }
}

.modTextNote.--lpFeatureBox {
  max-width: 1440px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 80px;
}

.lpFeatureBox .modTextNote.--lpFeatureBox {
  color: var(--black);
  padding-inline: 24px 0;
}
@media screen and (max-width: 769px) {
  .lpFeatureBox .modTextNote.--lpFeatureBox {
    padding-inline: 0;
    padding-left: calc(5 * var(--fl-unit));
  }
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
  .modTextNote.--lpFeatureBox {
    margin-inline: 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1000px) {
  .modTextNote.--lpFeatureBox {
    padding-inline: 30px;
  }
}
@media screen and (max-width: 768px) {
  .modTextNote.--lpFeatureBox {
    width: 94%;
    margin-inline: auto;
    padding-inline: 16px;
  }
}

.modSection:has(.lpFeatureBox) .modHighLightHeading__main {
  /* font-size: clamp(48px, calc(3.64vw + 11.64px), 64px); */
  font-size: 6.4rem;
}
@media screen and (max-width: 1000px) {
  .modSection:has(.lpFeatureBox) .modHighLightHeading__main {
    font-size: clamp(38px, calc(4.33vw + 4.71px), 48px);
  }
}
@media screen and (max-width: 768px) {
  .modSection:has(.lpFeatureBox) .modHighLightHeading__main {
    /* font-size: clamp(28px, calc(2.04vw + 20.37px), 36px); */
    font-size: 4rem;
    margin-inline: calc(24 * var(--fl-unit));
    display: block;
    line-height: 1.3;
    background-size: 100% 70%;
  }
}

.lpFeatureBox__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  row-gap: 0.2em;
  margin-bottom: calc(25 * var(--fl-unit));
}
@media screen and (max-width: 768px) {
  .lpFeatureBox__list {
    margin-bottom: calc(18 * var(--fl-unit));
  }
}
.lpFeatureBox__item {
  font-size: 16px;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .lpFeatureBox__item {
    font-size: 14px;
  }
}

.lpFeatureBox__text {
  font-size: clamp(14px, calc(0.34vw + 11.06px), 16px);
  line-height: 1.7;
  color: var(--black2);
}
@media screen and (max-width: 768px) {
  .lpFeatureBox__text {
    font-size: clamp(13px, calc(0.51vw + 10.76px), 15px);
  }
}

.lpFeatureBox__container {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--fl-unit));
  margin-bottom: calc(32 * var(--fl-unit));
}

@media screen and (max-width: 768px) {
  .lpFeatureBox__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--fl-unit));
    margin-bottom: calc(24 * var(--fl-unit));
  }
}

.lpFeatureBox .c-btn__pageToTop {
  display: block;
  max-width: 166px;
  font-weight: bold;
  font-size: 16px;
  color: var(--black);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  padding-left: 2em;
  margin-left: auto;
}
.lpFeatureBox .c-btn__pageToTop:hover {
  color: var(--red);
  text-decoration: none;
  border-bottom: none;
}

.lpFeatureBox .c-btn__pageToTop::before {
  content: "";
  display: block;
  width: 1.3em;
  height: 1.3em;
  background-image: url(../img/pageToTop-arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.lpFeatureBox a:hover .over {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

/* landing__nav (POINT anchor nav, used by all landing pages) */
.landing__nav-list {
  display: flex;
  gap: calc(24 * var(--fl-unit));
  width: 100%;
}
@media screen and (max-width: 768px) {
  .landing__nav-list {
    flex-direction: column;
    gap: calc(16 * var(--fl-unit));
  }
}
.landing__nav-item {
  flex: 0 1 calc(411 * var(--fl-unit));
}
@media screen and (max-width: 768px) {
  .landing__nav-item {
    flex: none;
  }
}
.landing__nav-item__link {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(411 * var(--fl-unit));
  aspect-ratio: 411 / 200;
  background: var(--yellow);
  border-radius: calc(8 * var(--fl-unit));
  gap: calc(16 * var(--fl-unit));
  overflow: hidden;
  text-decoration: none;
}
.landing__nav-item__link:hover {
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  .landing__nav-item__link {
    width: 100%;
    margin-inline: auto;
    aspect-ratio: 343 / 166;
    gap: calc(16 * var(--fl-unit));
  }
}
.landing__nav-item__photo {
  align-self: flex-end;
  width: calc(161 * var(--fl-unit));
  height: auto;
  flex-shrink: 0;
  display: block;
}
@media screen and (max-width: 768px) {
  .landing__nav-item__photo {
    width: calc(130 * var(--fl-unit));
    flex: 0 0 calc(130 * var(--fl-unit));
  }
}
.landing__nav-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--fl-unit));
  padding-right: calc(24 * var(--fl-unit));
  color: var(--black);
}
@media screen and (max-width: 768px) {
  .landing__nav-item__body {
    gap: calc(6 * var(--fl-unit));
    padding-right: calc(16 * var(--fl-unit));
    flex: 1 1 auto;
  }
}
.landing__nav-item__point {
  text-align: center;
  font-family: "Barlow", sans-serif;
  font-size: calc(24 * var(--fl-unit));
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--black);
}
@media screen and (max-width: 768px) {
  .landing__nav-item__point {
    font-size: calc(19 * var(--fl-unit));
  }
}
.landing__nav-item__title {
  text-align: center;
  font-size: calc(32 * var(--fl-unit));
  font-weight: 900;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.05em;
  word-break: keep-all;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000)
    drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000)
    drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000)
    drop-shadow(1px -1px 0 #000) drop-shadow(-1px 1px 0 #000)
    drop-shadow(0 0 2px #000);
}
@media screen and (max-width: 768px) {
  .landing__nav-item__title {
    font-size: calc(27 * var(--fl-unit));
  }
}
.landing__nav-item__link::after {
  content: "";
  position: absolute;
  bottom: calc(12 * var(--fl-unit));
  right: calc(123 * var(--fl-unit));
  width: calc(8 * var(--fl-unit));
  height: calc(8 * var(--fl-unit));
  margin-right: calc(-4 * var(--fl-unit));
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: translateY(0) rotate(45deg);
}
@media screen and (max-width: 768px) {
  .landing__nav-item__link::after {
    right: calc(105.5 * var(--fl-unit));
      bottom: calc(10 * var(--fl-unit));
  }
}
.landing__nav-item__link:hover::after {
  animation: landingNavArrowBounce 0.6s ease-out;
}
@keyframes landingNavArrowBounce {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(4px) rotate(45deg);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}

/* 画面には表示せず、読み上げ（スクリーンリーダー）にだけ伝えるテキスト */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}