html.tmi-lp-page {
  --bg-yellow: #edff00;
  --text-blue: #2345a6;
  background: var(--bg-yellow);
  border: none;
  scroll-behavior: smooth;
}

body.tmi-lp-page {
  margin: 0;
  background: var(--bg-yellow);
}

/* html の font-size は customerpage.css の 62.5% のままにする（共通ヘッダ等の rem 基準を壊さない） */

#wrapper.tmi-lp-page-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* このページ専用: パンくず周辺コンテナを白背景に固定（他ページへ影響させない） */
#wrapper.tmi-lp-page-wrap .tmi-lp-breadcrumb-container-v2x1 {
  background: #fff !important;
}

/* customerpage 62.5% 基準の rem を、LP 用に 1.6 倍（従来 html 100% 相当）。zoom は使わず rem を個別に換算 */
.tmi-lp {
  --tmi-rem-mult: 1.6;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text-blue);
}

.tmi-lp,
.tmi-lp *,
.tmi-lp *::before,
.tmi-lp *::after {
  box-sizing: border-box;
}

.tmi-lp img {
  display: block;
  width: 100%;
  height: auto;
}

.tmi-lp-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 101%にしてサブピクセルの隙間を潰す。背景は bg.png のみを使用 */
  background: url("./images/bg.png") no-repeat top center / 101% 101%;
  border: none;
  outline: none;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .tmi-lp-hero{
    padding-top: 60.8461%;
    padding-bottom: calc(4rem * var(--tmi-rem-mult)); /* ボタンが見切れないように下に余白を追加 */
  }
}

@media (max-width: 767px) {
  /* SP時はSP用背景(bg_sp.png)を使用し、エリア全体にフィット（101%で線対策） */
  .tmi-lp-hero{
    background-image: url("./images/bg_sp.png");
    background-size: 101% 101%;
    height: auto; /* 固定高をやめて中身に追従 */
  }
}

.tmi-lp-hero__bg{
  position: absolute;
  inset: 0;
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.3s ease, scale 0.3s ease;
}

.tmi-lp-hero__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tmi-lp-hero__text{
  position: absolute;
  inset: 12.5% 0 auto;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  scale: 0.6;
  transform-origin: center;
  transition: opacity 0.45s ease, scale 0.45s cubic-bezier(0.49, 0.25, 0.3, 1.31);
}

.tmi-lp-hero__copy--1{
  width: clamp(300px, 80vw, 1200px);
  margin: 0;
  position: relative;
  z-index: 5;
}

.tmi-lp-hero__copy--pc{
  display: block;
}

.tmi-lp-hero__copy--sp{
  display: none;
}

.tmi-lp-hero__copy--sp img{
  opacity: 0;
  transform: translateY(calc(1.5rem * var(--tmi-rem-mult)));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tmi-lp-hero__copy--sp img + img{
  margin-top: calc(0.8rem * var(--tmi-rem-mult));
}

.tmi-lp-hero__copy--sp img.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-hero-btn{
  display: inline-block;
  position: relative;
  margin-top: calc(1.6rem * var(--tmi-rem-mult));
  padding: calc(0.9rem * var(--tmi-rem-mult)) calc(2.4rem * var(--tmi-rem-mult));
  border-radius: 999px;
  background: #2345a6;
  color: #fff;
  font-size: calc(1.5rem * var(--tmi-rem-mult));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  animation: tmi-lp-heroBtnFloat 2.2s ease-in-out infinite;
}

.tmi-lp-hero-btn::after{
  content: "開催ミッションは20以上！";
  position: absolute;
  top: calc(-0.9rem * var(--tmi-rem-mult));
  right: calc(0.6rem * var(--tmi-rem-mult));
  padding: calc(0.35rem * var(--tmi-rem-mult)) calc(0.7rem * var(--tmi-rem-mult));
  border-radius: 999px;
  background: #fff;
  color: #ff4800;
  border: 2px solid #ff4800;
  font-size: calc(0.95rem * var(--tmi-rem-mult));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tmi-lp-hero-btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  animation-play-state: paused;
}

@keyframes tmi-lp-heroBtnFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.tmi-lp-hero-btn--pc{
  display: inline-block;
}

.tmi-lp-hero-btn--sp{
  display: none;
}

.tmi-lp-hero-caption{
  margin-top: calc(0.6rem * var(--tmi-rem-mult));
  font-size: calc(0.8rem * var(--tmi-rem-mult));
  line-height: 1.6;
  text-align: center;
}

@media (min-width: 768px) {
  /* PC時はボタンをワイドに表示 */
  .tmi-lp-hero-btn--pc{
    min-width: 260px;
    padding-inline: calc(3.2rem * var(--tmi-rem-mult));
    font-size: calc(1.7rem * var(--tmi-rem-mult));
  }

  .tmi-lp-hero-caption--pc{
    display: block;
  }

  .tmi-lp-hero-caption--sp{
    display: none;
  }
}

.tmi-lp-hero__copy--2{
  width: min(51vw, 662px);
  margin: -4% 0 0;
}

.tmi-lp-hero__title{
  width: min(26.5vw, 344px);
  margin: -1.8% 0 0;
}

.tmi-lp-headline-area{
  background: #fff;
  padding: calc(1.8rem * var(--tmi-rem-mult)) calc(1rem * var(--tmi-rem-mult)) calc(2.2rem * var(--tmi-rem-mult));
  position: relative;
  margin-top: -2px;
  z-index: 10;
  overflow: hidden;
}

.tmi-lp-headline-area .tmi-lp-hero__title{
  width: min(calc(52rem * var(--tmi-rem-mult)), 92vw);
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* 通常表示時はヘッドラインエリアの横幅を画面の約7割に */
  .tmi-lp-headline-area{
    max-width: 70vw;
    margin-left: auto;
    margin-right: auto;
  }
}

.tmi-lp-hero__icons,
.tmi-lp-hero__people{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tmi-lp-hero__icon{
  position: absolute;
  width: min(10.46vw, 136px);
  opacity: 0;
  scale: 0;
  transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
}

.tmi-lp-hero__icon--1{
  top: 7%;
  left: 18%;
  transition-delay: 0.3s;
}

.tmi-lp-hero__icon--2{
  top: 64.7%;
  left: 27%;
  transition-delay: 0.45s;
}

.tmi-lp-hero__icon--3{
  top: 61.7%;
  left: 63.2%;
  transition-delay: 0.35s;
}

.tmi-lp-hero__icon--4{
  top: 42%;
  left: 88.8%;
  transition-delay: 0.5s;
}

.tmi-lp-hero__icon--5{
  top: 4%;
  left: 78.4%;
  transition-delay: 0.4s;
}

.tmi-lp-hero__person{
  position: absolute;
  width: clamp(120px, 27.55vw, 358px);
  opacity: 0;
  scale: 0.6;
  transform-origin: bottom center;
  transition:
    opacity 0.6s 0.65s ease,
    scale 0.6s 0.65s cubic-bezier(0.27, 0.26, 0.15, 1.57),
    rotate 0.6s 0.65s cubic-bezier(0.27, 0.26, 0.15, 1.57);
}

.tmi-lp-hero__person img{
  width: 100%;
  height: auto;
  max-height: 58vh;
  object-fit: contain;
}

.tmi-lp-hero__person--left{
  top: 9%;
  left: 1.5%;
  rotate: 10deg;
}

.tmi-lp-hero__person--right{
  top: 13.7%;
  left: 67.8%;
  rotate: -10deg;
}

.tmi-lp-hero.tmi-lp-js-load--on .tmi-lp-hero__bg,
.tmi-lp-hero.tmi-lp-js-load--on .tmi-lp-hero__text,
.tmi-lp-hero.tmi-lp-js-load--on .tmi-lp-hero__icon,
.tmi-lp-hero.tmi-lp-js-load--on .tmi-lp-hero__person{
  opacity: 1;
  scale: 1;
  rotate: 0deg;
}

.tmi-lp-hero.tmi-lp-js-load--on .tmi-lp-hero__person--left img{
  animation: tmi-lp-person-anim-left 3s 0.8s ease-in-out infinite;
}

.tmi-lp-hero.tmi-lp-js-load--on .tmi-lp-hero__person--right img{
  animation: tmi-lp-person-anim-right 3s 0.8s ease-in-out infinite;
}

@keyframes tmi-lp-person-anim-left {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(1.5rem * var(--tmi-rem-mult))) rotate(5deg);
  }
}

@keyframes tmi-lp-person-anim-right {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(1.5rem * var(--tmi-rem-mult))) rotate(-5deg);
  }
}

@media (max-width: 767px) {
  .tmi-lp-hero__copy--pc{
    display: none;
  }

  .tmi-lp-hero__copy--sp{
    display: block;
    width: min(92vw, calc(34rem * var(--tmi-rem-mult)));
    margin: 0 auto;
    position: relative;
    z-index: 5;
    text-align: center; /* ボタンも含めて中央寄せ */
  }

  /* 先頭SP画像を画面上部に寄せる */
  .tmi-lp-hero__copy--sp img:first-child{
    margin-top: -50px;
  }

  .tmi-lp-hero-btn--pc{
    display: none;
  }

  .tmi-lp-hero-btn--sp{
    display: block;
    margin: calc(1.6rem * var(--tmi-rem-mult)) auto 10px; /* 下余白を10pxに調整 */
  }

  .tmi-lp-hero-caption--pc{
    display: none;
  }

  .tmi-lp-hero-caption--sp{
    display: block;
    font-size: calc(0.7rem * var(--tmi-rem-mult));
    margin-bottom: 2rem;
  }

  .tmi-lp-hero{
    height: auto; /* 固定高をやめる */
    padding-bottom: 50px; /* ヒーローエリアのボトムに50pxの余白を追加 */
  }

  .tmi-lp-hero__text{
    position: relative; /* 通常フローに戻して高さ計算に含める */
    inset: auto;
    top: auto;
    padding-top: calc(2.4rem * var(--tmi-rem-mult));
  }

  .tmi-lp-hero__copy--1{
    width: min(80vw, calc(31rem * var(--tmi-rem-mult)));
  }

  .tmi-lp-hero__copy--2{
    width: calc(28.4rem * var(--tmi-rem-mult));
    margin-top: calc(-2.5rem * var(--tmi-rem-mult));
  }

  .tmi-lp-hero__title{
    width: calc(17.8rem * var(--tmi-rem-mult));
    margin-top: calc(-1rem * var(--tmi-rem-mult));
  }

  .tmi-lp-headline-area{
    padding: calc(1.2rem * var(--tmi-rem-mult)) calc(1rem * var(--tmi-rem-mult)) calc(1.6rem * var(--tmi-rem-mult));
  }

  .tmi-lp-headline-area .tmi-lp-hero__title{
    width: min(calc(24rem * var(--tmi-rem-mult)), 86vw);
    margin: 0 auto;
  }

  .tmi-lp-hero__icon{
    width: calc(5.4rem * var(--tmi-rem-mult));
  }

  .tmi-lp-hero__icon--1{
    top: calc(8.2rem * var(--tmi-rem-mult));
    left: calc(3.9rem * var(--tmi-rem-mult));
  }

  .tmi-lp-hero__icon--2{
    top: calc(47.7rem * var(--tmi-rem-mult));
    left: calc(15rem * var(--tmi-rem-mult));
  }

  .tmi-lp-hero__icon--3{
    top: calc(43.1rem * var(--tmi-rem-mult));
    left: calc(18.5rem * var(--tmi-rem-mult));
  }

  .tmi-lp-hero__icon--4{
    top: calc(24.3rem * var(--tmi-rem-mult));
    left: calc(33.5rem * var(--tmi-rem-mult));
  }

  .tmi-lp-hero__icon--5{
    top: calc(12.5rem * var(--tmi-rem-mult));
    left: calc(31.1rem * var(--tmi-rem-mult));
  }
  /* SP時もキャラを上部（sp1の背面付近）に配置 */
  .tmi-lp-hero__person--left{
    top: -1%;
    left: 4%;
  }

  .tmi-lp-hero__person--right{
    top: 3%;
    left: auto;
    right: -2%;
  }

  .tmi-lp-hero__person{
    width: clamp(80px, 26.5vw, 134px);
  }

  /* 右キャラだけ少し大きめに表示 */
  .tmi-lp-hero__person--right{
    width: clamp(88px, 29vw, 148px);
  }

  .tmi-lp-hero__person img{
    max-height: 36vh;
  }
}

@media (max-width: 420px) {
  .tmi-lp-hero__text{
    top: calc(3.8rem * var(--tmi-rem-mult));
  }

  .tmi-lp-hero__copy--1{
    width: min(80vw, calc(24.8rem * var(--tmi-rem-mult)));
  }

  .tmi-lp-hero__copy--2{
    width: min(calc(27rem * var(--tmi-rem-mult)), 79vw);
  }

  .tmi-lp-hero__title{
    width: min(calc(16.8rem * var(--tmi-rem-mult)), 49vw);
  }

  .tmi-lp-headline-area .tmi-lp-hero__title{
    width: min(calc(22rem * var(--tmi-rem-mult)), 86vw);
    margin: 0 auto;
  }

  .tmi-lp-hero__person{
    width: clamp(72px, 25vw, 110px);
  }
}

/* sp3 だけ少し小さめ（画面幅の約8割）に */
@media (max-width: 767px) {
  .tmi-lp-hero__copy--sp img:last-child{
    width: min(50vw, calc(32rem * var(--tmi-rem-mult)));
    margin-left: auto;
    margin-right: auto;
  }
}

.tmi-lp-headline-area .tmi-lp-headline-title{
  position: relative;
  padding: 1em 2em;
  text-align: center;
}

.tmi-lp-headline-area .tmi-lp-headline-title::before,
.tmi-lp-headline-area .tmi-lp-headline-title::after{
  position: absolute;
  content: "";
}

.tmi-lp-headline-area .tmi-lp-headline-title::after{
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}

.tmi-lp-headline-area .tmi-lp-headline-title::before{
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}

.tmi-lp-blue-area{
  background: #2345a6;
  color: #fff;
  padding: calc(3rem * var(--tmi-rem-mult)) calc(1.5rem * var(--tmi-rem-mult)) calc(3rem * var(--tmi-rem-mult));
  margin-top: 0;
  text-align: center;
  position: relative;
}

.tmi-lp-blue-area__text{
  max-width: calc(52rem * var(--tmi-rem-mult));
  margin: 0 auto;
  font-size: calc(1.6rem * var(--tmi-rem-mult));
  line-height: 1.8;
}

.tmi-lp-pink-area{
  background-color: #2345a6;
  background-image:
    linear-gradient(rgba(35, 69, 166, 0.7), rgba(35, 69, 166, 0.7)),
    url("./images/bg_cloud.png");
  background-repeat: no-repeat, repeat;
  background-size:
    100% 100%,
    80%;
  background-position:
    0 0,
    -40px 0;
  padding: calc(2rem * var(--tmi-rem-mult)) calc(1.2rem * var(--tmi-rem-mult));
  text-align: center;
}

.tmi-lp-white-area{
  background-color: #fff;
  background-image:
    radial-gradient(circle, rgba(35, 69, 166, 0.08) 1.2px, transparent 1.2px),
    radial-gradient(circle, rgba(35, 69, 166, 0.05) 1px, transparent 1px);
  background-size:
    26px 26px,
    14px 14px;
  background-position:
    0 0,
    7px 7px;
  padding: calc(2.2rem * var(--tmi-rem-mult)) calc(1.2rem * var(--tmi-rem-mult));
  text-align: center;
}

.tmi-lp-white-area .tmi-lp-white-heading{
  position: relative;
  display: inline-block;
  margin-top: calc(0.2rem * var(--tmi-rem-mult));
  padding: calc(1.1rem * var(--tmi-rem-mult)) calc(1.4rem * var(--tmi-rem-mult));
  font-size: calc(2rem * var(--tmi-rem-mult));
  border-bottom: 3px solid #2345a6;
  border-left: 3px solid #2345a6;
  border-radius: 0 0 0 20px;
  background: #fff;
  color: #2345a6;
}

.tmi-lp-white-area .tmi-lp-white-heading.tmi-lp-reveal-ready{
  opacity: 0;
  transform: translateY(calc(1.5rem * var(--tmi-rem-mult)));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tmi-lp-white-area .tmi-lp-white-heading::before{
  position: absolute;
  right: 50px;
  bottom: -21px;
  width: 0;
  height: 0;
  content: "";
  border-width: 21px 21px 0 0;
  border-style: solid;
  border-color: #2345a6 transparent transparent transparent;
}

.tmi-lp-white-area .tmi-lp-white-heading::after{
  position: absolute;
  right: 54px;
  bottom: -14px;
  width: 0;
  height: 0;
  content: "";
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.tmi-lp-white-area .tmi-lp-white-heading.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-white-heading-wrap{
  display: inline-flex;
  align-items: flex-end;
  gap: calc(0.8rem * var(--tmi-rem-mult));
}

/* .tmi-lp img { width:100% } より詳細度を上げて装飾キャラ幅を上書き */
.tmi-lp img.tmi-lp-white-heading-chara{
  width: clamp(48px, 10vw, 80px);
  max-width: 80px;
  height: auto;
  display: inline-block; /* imgグローバル指定(block)を上書き */
  filter: none;
}

@media (max-width: 767px) {
  .tmi-lp img.tmi-lp-white-heading-chara{
    width: clamp(72px, 22vw, 120px);
    max-width: 120px;
    margin-left: calc(-0.8rem * var(--tmi-rem-mult));
    margin-top: calc(-1rem * var(--tmi-rem-mult));
  }

  .tmi-lp-white-area .tmi-lp-white-heading{
    padding-top: calc(0.8rem * var(--tmi-rem-mult));
  }

  .tmi-lp-white-content{
    margin-top: calc(1.1rem * var(--tmi-rem-mult));
  }

  .tmi-lp-white-block{
    border-radius: 14px;
    padding: calc(1rem * var(--tmi-rem-mult)) calc(0.9rem * var(--tmi-rem-mult));
  }

  .tmi-lp-white-block__title{
    font-size: calc(0.98rem * var(--tmi-rem-mult));
  }

  .tmi-lp-white-area__text{
    font-size: calc(0.85rem * var(--tmi-rem-mult));
    line-height: 1.75;
  }

  .tmi-lp-white-area__text--lead{
    font-size: calc(1.08rem * var(--tmi-rem-mult));
  }
}

.tmi-lp-marker-yellow{
  background: linear-gradient(transparent 62%, #fff27a 62%);
}

.tmi-lp-white-area__image img{
  border-radius: 16px;
  display: block;
  max-width: 100%;
  height: auto;
}

.tmi-lp-white-area__image.tmi-lp-reveal-ready{
  opacity: 0;
  transform: translateY(calc(1.2rem * var(--tmi-rem-mult)));
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.tmi-lp-white-area__image.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-white-area__text{
  margin: calc(1.2rem * var(--tmi-rem-mult)) auto 0;
  max-width: calc(52rem * var(--tmi-rem-mult));
  font-size: calc(1.05rem * var(--tmi-rem-mult));
  line-height: 1.8;
  color: #2345a6;
  text-align: left;
}

.tmi-lp-white-area__text.tmi-lp-reveal-ready{
  opacity: 0;
  transform: translateY(calc(1.2rem * var(--tmi-rem-mult)));
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.tmi-lp-white-area__text.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-report-gap{
  margin-bottom: calc(2.2rem * var(--tmi-rem-mult));
  font-size: calc(0.88rem * var(--tmi-rem-mult));
}

.tmi-lp-text-small{
  font-size: calc(0.88rem * var(--tmi-rem-mult));
}

.tmi-lp-white-content{
  max-width: 980px;
  margin: calc(2rem * var(--tmi-rem-mult)) auto 0;
  text-align: left;
}

.tmi-lp-white-block{
  background: linear-gradient(180deg, #f9fbff 0%, #f3f7ff 100%);
  border: 1px solid #d8e4ff;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(35, 69, 166, 0.08);
  padding: calc(1.6rem * var(--tmi-rem-mult)) calc(1.5rem * var(--tmi-rem-mult));
}

@media (min-width: 768px) {
  .tmi-lp-white-block{
    padding-inline: calc(4.8rem * var(--tmi-rem-mult));
    padding-top: calc(2.4rem * var(--tmi-rem-mult));
    padding-bottom: calc(2.4rem * var(--tmi-rem-mult));
  }
}

.tmi-lp-white-block + .tmi-lp-white-block{
  margin-top: calc(1.2rem * var(--tmi-rem-mult));
}

.tmi-lp-white-block.tmi-lp-reveal-ready{
  opacity: 0;
  transform: translateY(calc(1.5rem * var(--tmi-rem-mult)));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tmi-lp-white-block.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-white-block__title{
  margin: 0;
  color: #17358f;
  font-size: clamp(calc(1.15rem * var(--tmi-rem-mult)), 1.4vw, calc(1.35rem * var(--tmi-rem-mult)));
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tmi-lp-white-block__subtitle{
  margin: calc(1.1rem * var(--tmi-rem-mult)) 0 0;
  color: #17358f;
  font-size: calc(1.05rem * var(--tmi-rem-mult));
  font-weight: 700;
  border-left: 4px solid #6f8ee8;
  padding-left: calc(0.6rem * var(--tmi-rem-mult));
}

.tmi-lp-white-area__text--lead{
  margin-top: calc(0.7rem * var(--tmi-rem-mult));
  font-weight: 700;
  font-size: clamp(calc(1.25rem * var(--tmi-rem-mult)), 1.8vw, calc(1.55rem * var(--tmi-rem-mult)));
  color: #16337f;
}

.tmi-lp-white-flow{
  margin: calc(0.8rem * var(--tmi-rem-mult)) 0 0;
  padding-left: calc(1.35rem * var(--tmi-rem-mult));
  margin-bottom: calc(2.2rem * var(--tmi-rem-mult));
}

.tmi-lp-white-flow li{
  font-size: calc(0.88rem * var(--tmi-rem-mult));
}

.tmi-lp-white-flow li.tmi-lp-reveal-ready{
  opacity: 0;
  transform: translateY(calc(1rem * var(--tmi-rem-mult)));
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.tmi-lp-white-flow li.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-white-flow a{
  color: #ff4800;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  transition: color 0.2s ease;
}

.tmi-lp-white-flow a:hover{
  color: #17358f;
}

.tmi-lp-white-flow li + li{
  margin-top: calc(0.5rem * var(--tmi-rem-mult));
}

.tmi-lp-white-flow .tmi-lp-flow-highlight{
  display: inline-block;
  padding: 0.08em 0.5em;
  border-radius: 6px;
  background: #2345a6;
  color: #fff;
  font-size: calc(0.88rem * var(--tmi-rem-mult));
}

.tmi-lp-white-faq{
  margin: calc(1rem * var(--tmi-rem-mult)) 0 0;
}

.tmi-lp-white-faq dt{
  margin: calc(1rem * var(--tmi-rem-mult)) 0 0;
  font-weight: 700;
  color: #17358f;
  font-size: calc(0.88rem * var(--tmi-rem-mult));
  line-height: 1.6;
}

.tmi-lp-white-faq dd{
  margin: calc(0.35rem * var(--tmi-rem-mult)) 0 0 0;
  font-size: calc(0.88rem * var(--tmi-rem-mult));
  line-height: 1.9;
  color: #2a468e;
}

.tmi-lp-white-faq dt.tmi-lp-reveal-ready,
.tmi-lp-white-faq dd.tmi-lp-reveal-ready{
  opacity: 0;
  transform: translateY(calc(1rem * var(--tmi-rem-mult)));
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.tmi-lp-white-faq dt.tmi-lp-is-visible,
.tmi-lp-white-faq dd.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-pink-heading-wrap{
  display: inline-flex;
  align-items: flex-end;
  gap: calc(0.8rem * var(--tmi-rem-mult));
}

.tmi-lp-mission-link-area{
  background: url("./images/bg.png") no-repeat top center / 101% auto;
  padding: calc(2.4rem * var(--tmi-rem-mult)) calc(1.2rem * var(--tmi-rem-mult)) calc(3rem * var(--tmi-rem-mult));
  text-align: center;
}

.tmi-lp-mission-link-area__btn{
  margin-top: 0;
}

/* .tmi-lp img { width:100% } より詳細度を上げる */
.tmi-lp img.tmi-lp-mission-link-area__image{
  width: min(420px, 70vw);
  max-width: 420px;
  margin: 0 auto calc(1.2rem * var(--tmi-rem-mult));
}

.tmi-lp-mission-link-area__image.tmi-lp-reveal-ready{
  opacity: 0;
  transform: translateY(calc(1.5rem * var(--tmi-rem-mult)));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tmi-lp-mission-link-area__image.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-mission-link-area__btn::after{
  content: "ご利用をお待ちしております！";
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.tmi-lp-pink-area__text{
  margin: 0;
  font-size: calc(1.6rem * var(--tmi-rem-mult));
  line-height: 1.8;
  color: #fff;
}

/* ピンクエリア内の吹き出し風見出し */
.tmi-lp-pink-area .tmi-lp-pink-heading{
  position: relative;
  display: inline-block;
  margin-top: calc(1.5rem * var(--tmi-rem-mult));
  padding: calc(1.5rem * var(--tmi-rem-mult)) calc(2rem * var(--tmi-rem-mult));
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  border-radius: 0 0 0 20px;
  background: #2345a6;
  color: #fff;
}

@media (min-width: 768px) {
  .tmi-lp-pink-area .tmi-lp-pink-heading{
    font-size: calc(2.4rem * var(--tmi-rem-mult));
    padding-inline: calc(2.4rem * var(--tmi-rem-mult)); /* やや拡張にとどめる */
  }
}

.tmi-lp img.tmi-lp-pink-heading-chara{
  width: clamp(48px, 10vw, 80px);
  max-width: 80px;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

@media (max-width: 767px) {
  .tmi-lp img.tmi-lp-pink-heading-chara{
    width: clamp(72px, 22vw, 120px);
    max-width: 120px;
    margin-left: calc(-0.8rem * var(--tmi-rem-mult));
    margin-top: calc(-1rem * var(--tmi-rem-mult));
  }

  .tmi-lp-pink-area .tmi-lp-pink-heading{
    font-size: calc(2rem * var(--tmi-rem-mult));
    padding-inline: calc(1.2rem * var(--tmi-rem-mult)); /* 左右の余白を少し狭める */
    margin-left: calc(1rem * var(--tmi-rem-mult)); /* セクション内で左に余白を多めに確保 */
  }
}

/* JSが有効なときだけ初期非表示にしてスクロール表示 */
.tmi-lp-pink-area .tmi-lp-pink-heading.tmi-lp-reveal-ready{
  opacity: 0;
  transform: translateY(calc(1.5rem * var(--tmi-rem-mult)));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tmi-lp-pink-area .tmi-lp-pink-heading::before{
  position: absolute;
  right: 50px;
  bottom: -21px;
  width: 0;
  height: 0;
  content: "";
  border-width: 21px 21px 0 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.tmi-lp-pink-area .tmi-lp-pink-heading::after{
  position: absolute;
  right: 54px;
  bottom: -14px;
  width: 0;
  height: 0;
  content: "";
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: #2345a6 transparent transparent transparent;
}

.tmi-lp-pink-area .tmi-lp-pink-heading.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-mission-image{
  margin: calc(2.2rem * var(--tmi-rem-mult)) auto calc(1.6rem * var(--tmi-rem-mult));
  width: min(100vw, 800px);
  max-width: 800px;
}

.tmi-lp-mission-image.tmi-lp-reveal-ready{
  opacity: 0;
  transform: translateY(calc(1.5rem * var(--tmi-rem-mult)));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tmi-lp-mission-image.tmi-lp-is-visible{
  opacity: 1;
  transform: translateY(0);
}

.tmi-lp-mission-image img{
  width: 100%;
  height: auto;
}

.tmi-lp-mission-card{
  margin: calc(2.4rem * var(--tmi-rem-mult)) auto calc(1.6rem * var(--tmi-rem-mult));
  max-width: calc(82rem * var(--tmi-rem-mult));
  width: min(92vw, calc(82rem * var(--tmi-rem-mult)));
  padding: calc(1.4rem * var(--tmi-rem-mult)) calc(2.2rem * var(--tmi-rem-mult)) calc(1.4rem * var(--tmi-rem-mult)) calc(9.6rem * var(--tmi-rem-mult));
  background: #e9e9e9;
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  text-align: center;
  position: relative;
}

.tmi-lp-mission-card::before{
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-0.8rem * var(--tmi-rem-mult));
  width: calc(10.5rem * var(--tmi-rem-mult));
  height: calc(10.5rem * var(--tmi-rem-mult));
  background: url("./images/icon1.png") no-repeat center / contain;
  transform: translateY(-50%) rotate(-8deg);
  z-index: 2;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.tmi-lp-mission-card p{
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
}

.tmi-lp-mission-card__lead{
  color: #2345a6;
  font-size: clamp(calc(2rem * var(--tmi-rem-mult)), 3.9vw, calc(5.6rem * var(--tmi-rem-mult)));
  letter-spacing: 0.05em;
}

.tmi-lp-mission-card__main{
  margin-top: calc(0.35rem * var(--tmi-rem-mult));
  color: #ff4800;
  font-size: clamp(calc(2.6rem * var(--tmi-rem-mult)), 5.2vw, calc(7.4rem * var(--tmi-rem-mult)));
  letter-spacing: 0.05em;
  font-weight: 900;
}

@media (max-width: 767px) {
  .tmi-lp-mission-card{
    width: min(94vw, calc(42rem * var(--tmi-rem-mult)));
    padding: calc(4.8rem * var(--tmi-rem-mult)) calc(1.2rem * var(--tmi-rem-mult)) calc(1rem * var(--tmi-rem-mult));
    border-radius: 14px;
  }

  .tmi-lp-mission-card::before{
    top: calc(-0.6rem * var(--tmi-rem-mult));
    left: 50%;
    width: calc(6.8rem * var(--tmi-rem-mult));
    height: calc(6.8rem * var(--tmi-rem-mult));
    transform: translateX(-50%) rotate(-8deg);
  }

  .tmi-lp-mission-card__lead{
    font-size: calc(2rem * var(--tmi-rem-mult));
  }

  .tmi-lp-mission-card__main{
    font-size: calc(3.3rem * var(--tmi-rem-mult));
  }
}

@media (max-width: 767px) {
  .tmi-lp-mission-image{
    width: 100%;
    margin: calc(1.1rem * var(--tmi-rem-mult)) 0 calc(0.7rem * var(--tmi-rem-mult));
  }

  .tmi-lp-pink-area{
    padding-left: calc(0.4rem * var(--tmi-rem-mult));
    padding-right: calc(0.4rem * var(--tmi-rem-mult));
    background-size:
      100% 100%,
      100%;
  }

  .tmi-lp-mission-link-area{
    padding: calc(2rem * var(--tmi-rem-mult)) calc(1rem * var(--tmi-rem-mult)) calc(2.4rem * var(--tmi-rem-mult));
  }

  .tmi-lp-mission-link-area{
    background-image: url("./images/bg_sp.png");
    background-size: 101% auto;
  }

  .tmi-lp-mission-link-area__btn{
    padding-inline: calc(1.4rem * var(--tmi-rem-mult));
  }

  .tmi-lp-blue-area{
    padding: calc(2rem * var(--tmi-rem-mult)) calc(1.2rem * var(--tmi-rem-mult)) calc(2.4rem * var(--tmi-rem-mult));
  }
  .tmi-lp-blue-area__text{
    font-size: calc(1.4rem * var(--tmi-rem-mult));
  }
}