@charset "UTF-8";
body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
}
body.js-drawer_show {
  overflow: hidden;
}

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

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

.inner {
  padding-inline: 20px;
}

.container {
  width: 390px;
  max-width: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 10;
  background: #fff;
}

.pc-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
}
@media (max-width: 390px) {
  .pc-bg {
    display: none;
  }
}

.pc-bg__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

img.pc-bg__background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-bg__text {
  position: absolute;
  bottom: 13.4567901235vh;
  left: 2.0833333333vw;
  width: 31.0416666667vw;
}
@media (max-width: 1300px) {
  .pc-bg__text {
    display: none;
  }
}

.pc-bg__menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 32.1527777778vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1300px) {
  .pc-bg__menu {
    display: none;
  }
}

.pc-bg__menu-list {
  display: flex;
  flex-direction: column;
  row-gap: 22px;
}
.pc-bg__menu-list li a {
  display: block;
  color: #40220F;
  font-size: min(1.1111111111vw, 18px);
  font-weight: bold;
  line-height: normal;
  color: #9e9e9e;
  letter-spacing: 0;
}
.pc-bg__menu-list li a.is-active {
  color: #ffffff;
}

.pc-bg__menu-btn {
  margin-top: 71px;
  display: block;
  max-width: 317px;
  margin-inline: auto;
}

.animated__fadeIn {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.4s ease, translate 0.3s ease;
}
.animated__fadeIn.js-show {
  opacity: 1;
  translate: 0 0;
}

/* スクロール出現アニメーション：ポンッと拡大 */
.animated__pop {
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  will-change: transform, opacity;
}
.animated__pop.js-show {
  opacity: 1;
  /* “ポンッ”感 */
  animation: popIn 0.4s linear both;
}

@keyframes popIn {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.03);
  } /* ちょい跳ね */
  100% {
    transform: scale(1);
  }
}
.cta.--1 {
  padding-block: 25px;
  background: #F80001;
}

/* ベース：インライン要素でも押し込み表現が効くように */
.cta__button {
  display: inline-block;
  position: relative;
  transform: translateY(0); /* 初期位置 */
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: transform;
  /* クリック/タップでさらに沈む（モバイルでも有効） */
  /* ホバー対応端末での沈み込み */
}
.cta__button img {
  display: block; /* 余白バグ防止 */
  width: 100%;
  height: auto;
  pointer-events: none;
}
.cta__button:active {
  transform: translateY(5px);
}
@media (any-hover: hover) {
  .cta__button:hover {
    transform: translateY(5px); /* 少し沈む */
  }
}

/* アニメーション：常時“鼓動” */
.u-breathe {
  animation: cta-breathe 1.6s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 押下中は一時停止したい場合（任意） */
.cta__button:active .u-breathe {
  animation-play-state: paused;
}

/* キーフレーム（共通） */
@keyframes cta-breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  } /* 強調量は1.03〜1.08で調整 */
  100% {
    transform: scale(1);
  }
}
.header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.header__inner {
  padding-block: 25px 10px;
}
@media screen and (max-width: 767px) {
  .header__inner {
    padding-top: 10px;
    padding-left: 45px;
  }
}

.header__logo {
  display: block;
  width: 164px;
}
@media screen and (max-width: 767px) {
  .header__logo {
    width: 98px;
  }
}

.drawer__icon {
  position: fixed;
  z-index: 102;
  top: 71px;
  right: 14px;
  width: 33px;
  height: 20px;
  display: none;
  transition: top 0.3s ease; /* ← ぬるっと移動 */
  /* スクロール時（位置を上に詰める） */
}
@media (max-width: 750px) {
  .drawer__icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.drawer__icon.js-scroll {
  top: 20px;
}

.drawer__icon--bar {
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 999px;
}

.drawer__icon.js-show .drawer__icon--bar:nth-of-type(1) {
  rotate: 45deg;
  translate: 0 8.5px;
}
.drawer__icon.js-show .drawer__icon--bar:nth-of-type(2) {
  display: none;
}
.drawer__icon.js-show .drawer__icon--bar:nth-of-type(3) {
  rotate: -45deg;
  translate: 0 -8.5px;
}

.drawer {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  height: 100vh;
}
.drawer.js-show {
  opacity: 1;
  visibility: visible;
  /* ← 追加：背面ぼかし */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.drawer__body {
  width: 100%;
  height: fit-content;
  padding: 90px 40px 40px 40px;
}

.drawer__list {
  display: flex;
  flex-direction: column;
  row-gap: 22px;
}
.drawer__list li a {
  display: block;
  color: #40220F;
  font-size: min(4.1775456919vw, 20px);
  font-weight: bold;
  line-height: normal;
  color: #fff;
  letter-spacing: 0;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.drawer__btn {
  margin-top: 30px;
  display: block;
}

.fv {
  position: relative;
  width: 100%;
  aspect-ratio: 390/655;
  overflow: hidden;
  background: #fff;
}

.fv__inner {
  width: 100%;
  height: 100%;
}

.fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* imgでカバーさせる */
}
.fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 初期状態：少し拡大＆ぼかし＆非表示（アニメ前） */
  transform: scale(1.12);
  filter: blur(12px);
  opacity: 0;
  transform-origin: center;
  will-change: transform, filter, opacity;
}

.inner {
  position: relative;
  z-index: 1;
}

.fv__top-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  padding: 10px 15px;
  color: #fff;
  font-size: min(4.6153846154vw, 18px);
  font-weight: bolder;
  letter-spacing: 0;
  text-align: center;
}

/* ここから：FV内のロード演出 初期値（“ポンッ”に合わせる） */
/* ① メインメッセージ：ポンッと拡大で出現 */
.fv__message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  will-change: transform, opacity;
}

/* ② サブメッセージ：少し遅れてポンッ */
.fv__sub_message {
  position: absolute;
  bottom: 21%;
  left: 50%;
  transform: translateX(-50%) scale(0); /* 中央寄せ＋スケール0 */
  width: min(334px, 100%);
  margin-inline: auto;
  display: block;
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* ③ 強み（3つ）：時間差フェードイン＋上がり */
.fv__strengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: min(338px, 100%);
}

.fv__strengths-item {
  display: block;
  opacity: 0;
  transform: translateY(12px);
}

.loss {
  padding-top: 22px;
  background: #F80001;
}

.loss__text {
  margin-top: 11px;
  font-size: min(3.6553524804vw, 14px);
  font-weight: 900;
  color: #fff;
  text-align: center;
}

.loss__cards {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.loss__card.--5 {
  margin-right: 4px;
  margin-left: -14px;
}
.loss__card:nth-of-type(n + 2) {
  margin-top: -20px;
}

/* 画像は初期は白黒 */
.animated__bw2color {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%) contrast(1.05) saturate(0.85);
  transition: filter 3s ease; /* 好みで調整 */
}

/* ★ popIn 完了フラグが付いた時だけカラー化 */
.animated__pop.js-show .animated__bw2color {
  filter: grayscale(0%) contrast(1) saturate(1);
}

.relief {
  padding-block: 55px 23%;
  background: #F80001;
  position: relative;
}

.relief__arrow {
  margin-top: 19px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.relief__arrow-circle {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #000;
}

.relief__illustration {
  position: absolute;
  bottom: -12%;
  left: 0;
  width: 100%;
  z-index: 2;
}

/* ★ relief 専用：フェードイン */
.animated__reliefShow {
  opacity: 0; /* before */
  transition: opacity 0.5s ease;
}

.animated__reliefShow.js-show {
  opacity: 1; /* after */
}

.results {
  padding-block: 29% 60px;
  background: url(../img/results/results__bg.png) no-repeat center center/cover;
  position: relative;
  width: 100%;
  position: relative;
  z-index: 1;
}

.results__cards {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.results__card {
  position: relative;
  padding-top: 9%;
  padding-right: 10px;
}

.results__card-fukidashi {
  position: absolute;
  top: 0;
  right: 0;
}

.results__card.--makeup .results__card-fukidashi {
  width: min(58.2051282051vw, 227px);
}
.results__card.--IT .results__card-fukidashi {
  width: min(58.2051282051vw, 227px);
}
.results__card.--sales .results__card-fukidashi {
  width: min(65.1282051282vw, 254px);
}

.feature {
  padding-top: 32px;
  background: #F80001;
}

.feature__title {
  max-width: 240px;
  margin-inline: auto;
}

.feature__points {
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature__points li {
  font-size: 14px;
  color: #fff;
  font-weight: bolder;
  position: relative;
  padding-left: 30px;
}
.feature__points li::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 18px;
  height: 18px;
  background: url(../img/feature/feature__check_icon.png) no-repeat center center/contain;
}

.feature__why {
  margin-top: 47px;
  background: url(../img/feature/feature__why_bg.png) no-repeat center center/cover;
  border-radius: 13px;
  width: 100%;
  padding: 19px;
}

.feature__why-title {
  max-width: 288px;
  margin-inline: auto;
}

.feature__why-lead {
  margin-top: 12px;
}

.feature__why-text {
  margin-top: 23px;
}

.feature__why-triangle {
  margin-top: 20px;
  width: min(58px, 100%);
  margin-inline: auto;
}

.feature__why-anshin {
  margin-top: 21px;
}

.feature__value {
  margin-top: 27px;
}

.feature__value-title {
  margin-top: 20px;
}

.feature__value-items {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.feature__value-item {
  background: linear-gradient(to bottom, #FFEC00 26%, #FA9E00 85%);
  border: 4px solid #000;
  border-radius: 12px;
  padding: 16px 18px;
}

.valueItem__head {
  display: flex;
  justify-content: start;
  gap: 5px;
}

.valueItem__number {
  margin-top: 3px;
  font-size: 20px;
  font-weight: bolder;
  color: #fff;
  background: #000;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.valueItem__title {
  font-size: 21px;
  font-weight: bolder;
  letter-spacing: 0;
}

.valueItem__text {
  margin-top: 10px;
}

.valueItem__attention {
  margin-top: 16px;
  background: #fff;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 15px;
  font-weight: 600;
  color: #E20202;
  letter-spacing: 0;
}

.feature__cta {
  margin-top: 21px;
}

.plan {
  padding-top: 70px;
  background: #F80001;
}

.plan__inner {
  padding-left: 5px;
}

.plan__title {
  width: min(214px, 100%);
  margin-inline: auto;
}

.plan__items {
  margin-top: 27px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.roi {
  padding-top: 49px;
  padding-bottom: 31px;
  background: #F80001;
}

.roi__title {
  width: min(279px, 100%);
  margin-inline: auto;
}

.roi__lead {
  margin-top: 17px;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0;
}

.roi__graph {
  margin-top: 17px;
}

.flow {
  background: url(../img/flow/flow__bg.png) no-repeat center center/cover;
  width: 100%;
  padding-block: 28px 24px;
}

.flow__title {
  width: min(248px, 100%);
  margin-inline: auto;
}

.flow__lead {
  margin-top: 13px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0;
}

.flow__contents {
  margin-top: 11px;
  background: rgba(255, 255, 255, 0.8);
  padding: 17px 12px;
  border-radius: 12px;
}

.flow__contents-inner {
  padding-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}
.flow__contents-inner .border-line {
  /*線の位置*/
  content: "";
  width: 2px;
  height: 95%;
  background: #000;
  position: absolute;
  top: 0;
  left: 22px;
  z-index: 1;
}

.flow__item {
  display: flex;
  justify-content: start;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.flow__item-step {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid #000;
  background: #fff;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow__item-right {
  flex-shrink: 1;
  letter-spacing: 0;
  line-height: 1.4;
}

.flow__item-right-title {
  font-size: 14px;
  font-weight: bold;
}

.flow__item-right-text {
  margin-top: 3px;
  font-size: 12px;
  font-weight: bold;
}
.flow__item-right-text .small {
  font-size: 10px;
  letter-spacing: -0.1em;
}
.flow__item-right-text .color-red {
  color: #E20202;
}
.flow__item-right-text .weight-400 {
  font-weight: 400;
}

.faq {
  padding-block: 37px;
  background: #F80001;
}

.faq__title {
  width: min(182px, 100%);
  margin-inline: auto;
}

.faq__lead {
  margin-top: 13px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0;
}

.p-faq__items {
  margin-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

summary {
  display: block;
}
summary::-webkit-details-marker {
  display: none;
}
@media (any-hover: hover) {
  summary:hover {
    cursor: pointer;
  }
}

/* その他 見栄えを整えるためのもの */
.faq__item {
  border: 2px solid #000;
  background: #fff;
  border-radius: 8px;
}

.faq__question {
  display: block;
  padding: 18px 39px 14px 15px;
  position: relative;
}
.faq__question::before {
  content: "";
  position: absolute;
  top: 29px;
  right: 21px;
  width: 13px;
  height: 1px;
  background: #000;
  transition: all 0.3s ease;
}
.faq__question::after {
  content: "";
  position: absolute;
  top: 23px;
  right: 27px;
  width: 1px;
  height: 13px;
  background: #000;
  transition: all 0.3s ease;
}

details[open] .faq__question::before {
  opacity: 0;
}
details[open] .faq__question::after {
  rotate: 90deg;
  background: #000;
}

.faq__question-text {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.faq__answer {
  display: block;
  padding: 0px 15px 14px 15px;
}

.faq__answer-text {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.risk {
  background: url(../img/risk/risk__bg.png) no-repeat center center/cover;
  width: 100%;
  padding-block: 3px 41px;
}

.risk__items {
  margin-top: -15.5%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.risk__item {
  background: #fff;
  border: 4px solid #000;
  border-radius: 12px;
  padding: 16px 18px;
}

.risk__item-head {
  display: flex;
  justify-content: start;
  gap: 5px;
}

.risk__item-number {
  margin-top: 3px;
  font-size: 20px;
  font-weight: bolder;
  color: #fff;
  background: #000;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.risk__item-title {
  font-size: 21px;
  font-weight: bolder;
  letter-spacing: 0;
}

.risk__item-text {
  margin-top: 10px;
  line-height: 1.4;
}

.risk__cta {
  margin-top: 14px;
}

.contact {
  padding-block: 37px;
  background: #F80001;
}

.contact__title {
  font-size: min(6.6666666667vw, 26px);
  font-weight: bolder;
  text-align: center;
}

.contact__message {
  margin-top: 29px;
}

.contact__form {
  margin-top: 15px;
  padding: 25px 23px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 4px 4px 0 0 black;
}

.contact-form {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.contact-form__row {
  position: relative;
}

.contact-form__head {
  position: absolute;
  top: 17px;
  left: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #9B9B9B;
  pointer-events: none;
  transition: transform 0.2s ease, font-size 0.2s ease, opacity 0.18s ease;
}

input[type=text],
input[type=tel],
input[type=email],
select,
input[type=url],
textarea {
  width: 100%;
  padding: 22px 14px 10px 12px;
  font-size: 16px;
  border: 1px solid #D9D9D9 !important;
  border-radius: 8px !important;
  background: #fff;
  box-sizing: border-box;
}

/* ===== ここからが“ふわり”ロジック ===== */
/* フォーカス中、または placeholder が表示されていない（=値がある）ときにラベルを上に縮小して移動 */
.contact-form__row:has(input:focus),
.contact-form__row:has(textarea:focus),
.contact-form__row:has(input:not(:placeholder-shown)),
.contact-form__row:has(textarea:not(:placeholder-shown)) {
  /* 行自体に何か書く必要はないが、下の子セレクタにまとめるためのグループ */
}

.contact-form__row:has(input:focus) .contact-form__head,
.contact-form__row:has(textarea:focus) .contact-form__head,
.contact-form__row:has(input:not(:placeholder-shown)) .contact-form__head,
.contact-form__row:has(textarea:not(:placeholder-shown)) .contact-form__head {
  transform: translateY(-12px);
  font-size: 11px;
  opacity: 0.9;
}

textarea {
  resize: vertical;
}

.contact-form__submit {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.contact-form__submit-button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0; /* 画像の隙間対策 */
}

.contact-form__submit-button img {
  display: block;
  max-width: 320px; /* 画像幅に合わせて調整 */
  height: auto;
}

.contact-form__submit-button:hover img {
  opacity: 0.9; /* 任意のホバー効果 */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main.contact-thanks .container {
  height: 100vh;
  height: 100svh;
  background: #F80001;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.contact-thanks .contents {
  margin-top: 30px;
  height: 90%;
  padding: 25px 23px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 4px 4px 0 0 black;
}
main.contact-thanks .contents a {
  display: block;
  margin-top: 30px;
}