@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Noto+Sans+JP:wght@100..900&display=swap');

body {
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

/* --- チュートリアル設定 --- */
#tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  /* 半透明の黒 */
  z-index: 9999;
  /* 最前面 */
  display: none;
  /* 初期は非表示、JSで制御 */
  justify-content: center;
  align-items: center;
}

#tutorial-overlay.tutorial-active {
  display: flex;
}

.tutorial-step {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.tutorial-step.active {
  display: flex;
}

.tutorial-arrow {
  width: calc(200 / 600 * 100vw);
  height: auto;
  margin-bottom: calc(20 / 600 * 100vw);
}

.tutorial-finger {
  width: calc(150 / 600 * 100vw);
  height: auto;
  margin-bottom: calc(30 / 600 * 100vw);
}



.tutorial-text {
  color: #ffffff;
  font-size: calc(36 / 600 * 100vw);
  font-weight: bold;
  margin-bottom: calc(60 / 600 * 100vw);
}

.tutorial-btn {
  background-color: #ffffff;
  color: #000000;
  border: none;
  padding: calc(15 / 600 * 100vw) calc(80 / 600 * 100vw);
  border-radius: calc(100 / 600 * 100vw);
  font-size: calc(28 / 600 * 100vw);
  font-weight: bold;
  cursor: pointer;
}

.tutorial-btn:active {
  opacity: 0.8;
}

/* --- チュートリアル設定 --- */

/* （中略） */

/* 左スワイプ用の指アニメーション */
#tutorial-step1 .tutorial-finger {
  position: relative;
  animation: swipeLeft 1.5s ease-in-out infinite;
}

/* 右スワイプ用の指アニメーション */
#tutorial-step2 .tutorial-finger {
  position: relative;
  animation: swipeRight 1.5s ease-in-out infinite;
  /* ★ここを新規追加 */
}

/* 左スワイプ用：右から左へ */
@keyframes swipeLeft {
  0% {
    transform: translateX(calc(50 / 600 * 100vw));
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    transform: translateX(calc(-50 / 600 * 100vw));
    opacity: 1;
  }

  100% {
    transform: translateX(calc(-50 / 600 * 100vw));
    opacity: 0;
  }
}

/* ★右スワイプ用：左から右へ */
@keyframes swipeRight {
  0% {
    transform: translateX(calc(-50 / 600 * 100vw));
    /* 開始位置：左 */
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    transform: translateX(calc(50 / 600 * 100vw));
    /* 終了位置：右 */
    opacity: 1;
  }

  100% {
    transform: translateX(calc(50 / 600 * 100vw));
    opacity: 0;
  }
}

/* （以下、他のスタイルはそのまま） */

#wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  width: 100%;
}


#card-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.tinder-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  touch-action: none;
  will-change: transform;
}


.swipe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
}

.swipe-overlay-like {
  background: linear-gradient(150deg, #F77268 0%, #F54578 25%, transparent 50%);
}

.swipe-overlay-skip {
  background: linear-gradient(-150deg, #3AD6EB 0%, #40B6F2 25%, transparent 50%);
}


.status-stamp {
  position: absolute;
  top: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  padding: 10px 20px;
  border-width: 6px;
  border-style: solid;
  border-radius: 12px;
  text-transform: uppercase;
}

.status-stamp img {
  width: 100px;
  height: auto;
  margin-bottom: 5px;
}

.status-stamp span {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}

.status-like {
  left: 30px;
  color: #ffffff;
  border-color: #ffffff;
  transform: rotate(-15deg);
}

.status-skip {
  right: 30px;
  color: #ffffff;
  border-color: #ffffff;
  transform: rotate(15deg);
}


.image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-wrap img.active {
  opacity: 1;
}

.tinder-card::before,
.tinder-card::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}

.tinder-card::before {
  top: 0;
  height: 15%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

.tinder-card::after {
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
}


.top-tabs {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  z-index: 100;
  pointer-events: auto;
}

.tab {
  display: flex;
  align-items: center;
  opacity: 0.6;
  cursor: pointer;
}

.tab.active {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px 32px;
  border-radius: 50px;
  opacity: 1;
}

.tab-text {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
}

.tab-item {
  cursor: pointer;
  z-index: 100;
  /* カードより前面に */
  position: relative;
}

.badge {
  background-color: #ff5a5f;
  font-size: 16px;
  border-radius: 100px;
  padding: 2px 6px;
  margin-left: 4px;
  color: #fff;
  font-weight: bold;
}


.indicator {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 4px;
  display: flex;
  gap: 4px;
  z-index: 10;
}

.indicator .bar {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
}

.indicator .bar.active {
  background-color: #ffffff;
}

.bottom-actions {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  width: 100%;
  gap: 12px;
  padding: 0 15px;
  box-sizing: border-box;
}

.action-btn {
  background: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease;
  padding: 0;
}


.action-btn:active {
  transform: scale(0.9);
}

.action-btn img {
  width: 89px;
  height: auto;
}


.btn-skip {
  width: 100px;
  height: auto;
}

.btn-super {
  width: 50px;
  height: auto;
}

.btn-super img {
  width: 55px;
}

.message-input-fake {
  flex-grow: 1;
  background-color: #000000;
  border-radius: 100px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 60px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  border: 1px solid #333;
}

.message-input-fake p {
  color: #888888;
  font-size: 24px;
  margin: 0;
  white-space: nowrap;
}


.profile-info {
  position: absolute;
  bottom: 140px;
  left: 20px;
  right: 20px;
  z-index: 1000;
  color: #ffffff;
  pointer-events: none;
  text-align: left;
}

.swipe-overlay, .status-stamp {
  pointer-events: none;
  z-index: 50;
}

.profile-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.name {
  font-size: 44px;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.address {
  font-size: 24px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.official-icon {
  width: 45px;
  height: 45px;
  align-self: center;
  margin-top: 10px;
}


.profile-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}

.tag {
  font-size: 16px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 8px;
}

.tag-status {
  background-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.introduction {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}


.tag-location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 100px;
  background-image: linear-gradient(to left, #3bb0ee, #9c7afb, #D57BA6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

}

.background {
  background: linear-gradient(to right, #fcd9d8, #ace2ff);
  border-radius: 8px;
}


.pin-icon-gradient {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: linear-gradient(to left, #F37879, #D57BA6);
  -webkit-mask-image: url("../img/map_pin.webp");
  mask-image: url("../img/map_pin.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.pin-icon {
  width: 14px;
  height: auto;
  filter: brightness(0) invert(1);
}

.pin-icon-mask {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: linear-gradient(to right, #3bb0ee, #9c7afb);
  -webkit-mask-image: url("../img/map_pin.webp");
  mask-image: url("../img/map_pin.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.tag-location .pin-icon {
  -webkit-mask-image: url("./img/map_pin.webp");
  mask-image: url("./img/map_pin.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: linear-gradient(to right, #3bb0ee, #9c7afb);
  width: 14px;
  height: 14px;
  display: inline-block;
  visibility: hidden;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2147483646;
}

.half-modal {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(600px, 100vw);
  height: auto;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px 20px 0 0;
  padding: 20px;
  box-sizing: border-box;
  /* overflow-y: auto; */
  color: #fff;
  z-index: 2147483647;

  transform: translate3d(-50%, 110%, 0);
  -webkit-transform: translate3d(-50%, 110%, 0);
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

.half-modal.active {
  transform: translate3d(-50%, 0, 0) !important;
  -webkit-transform: translate3d(-50%, 0, 0) !important;
}

/* モーダルの上にある「つまみ」バー */
.modal-bar {
  width: 80px;
  height: 5px;
  background: #ccc;
  border-radius: 10px;
  margin: 0 auto 20px;
}

/* マッチングビジュアル（画像が並ぶ部分） */
.matching-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 30px;
  margin-bottom: 30px;
}

.matching-card {
  width: 150px;
  height: 230px;
  border-radius: 15px;
  border: 3px solid #fff;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.matching-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左側のカード（自分） */
.card-left {
  transform: rotate(-10deg) translateX(5px);
  /* 左に傾けて、右に少し寄せる */
  z-index: 1;
  /* 重なりの順序 */
}

/* 右側のカード（相手） */
.card-right {
  transform: rotate(10deg) translateX(-5px);
  /* 右に傾けて、左に少し寄せる */
  z-index: 2;
  /* 相手を上に重ねる場合 */
}

.modal_text {
  text-align: center;
}

.mtext1 {
  font-size: 35px;
  font-weight: bold;
}

.mtext2 {
  font-size: 18px;
  color: #aeaeb1;
  border-bottom: 1px solid #fff;
  display: block;
  /* 横幅いっぱいに広げる */
  padding-bottom: 20px;
  margin-bottom: 10px;
}

/* 広告・リスト部分 */
.modal-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.modal-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 中身のアイコンとテキストを中央寄せ */
  padding: 15px 30px;
  /* 左右の余白を少し広めにすると綺麗です */
  border-radius: 12px;
  gap: 15px;
  width: fit-content;
  /* 中身の幅に合わせる */
  min-width: 250px;
  /* 短すぎると不格好なので最小幅を設定 */
}

.item-icon {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

.item-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-text-appname {
  font-size: 32px;
  font-weight: bold;
}

.item-text-appdetail {
  font-size: 20px;
  color: #ADACB1;
}

/* 追加するボタン風の要素 */
.item-btn {
  padding: 16px 48px;
  color: #fff;
  /* 文字色は白 */
  font-weight: bold;
  font-size: 32px;
  border-radius: 8px;
  /* 角丸にしてボタンらしく */
  text-align: center;

  /* 上から下へのグラデーション */
  background: linear-gradient(to bottom, #F76C6A, #F64877);

  /* 影をつけるとよりボタンっぽく浮き出ます（お好みで） */
  /* box-shadow: 0 4px 10px rgba(247, 108, 106, 0.3); */
}

@media screen and (min-width: 600px) {
  #wrapper {
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
  }
}


@media screen and (max-width: 600px) {
  body {
    background-color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    height: 100%;
    overflow: hidden;
  }

  /* --- チュートリアル設定 --- */
  #tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* 半透明の黒 */
    z-index: 9999;
    /* 最前面 */
    display: none;
    /* 初期は非表示、JSで制御 */
    justify-content: center;
    align-items: center;
  }

  #tutorial-overlay.tutorial-active {
    display: flex;
  }

  .tutorial-step {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .tutorial-step.active {
    display: flex;
  }

  .tutorial-arrow {
    width: calc(200 / 600 * 100vw);
    height: auto;
    margin-bottom: calc(20 / 600 * 100vw);
  }

  .tutorial-finger {
    width: calc(150 / 600 * 100vw);
    height: auto;
    margin-bottom: calc(30 / 600 * 100vw);
  }

  .tutorial-text {
    color: #ffffff;
    font-size: calc(36 / 600 * 100vw);
    font-weight: bold;
    margin-bottom: calc(60 / 600 * 100vw);
  }

  .tutorial-btn {
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: calc(15 / 600 * 100vw) calc(80 / 600 * 100vw);
    border-radius: calc(100 / 600 * 100vw);
    font-size: calc(28 / 600 * 100vw);
    font-weight: bold;
    cursor: pointer;
  }

  .tutorial-btn:active {
    opacity: 0.8;
  }

  /* --- チュートリアル設定 --- */

  /* （中略） */

  /* 左スワイプ用の指アニメーション */
  #tutorial-step1 .tutorial-finger {
    position: relative;
    animation: swipeLeft 1.5s ease-in-out infinite;
  }

  /* 右スワイプ用の指アニメーション */
  #tutorial-step2 .tutorial-finger {
    position: relative;
    animation: swipeRight 1.5s ease-in-out infinite;
    /* ★ここを新規追加 */
  }

  /* 左スワイプ用：右から左へ */
  @keyframes swipeLeft {
    0% {
      transform: translateX(calc(50 / 600 * 100vw));
      opacity: 0;
    }

    20% {
      opacity: 1;
    }

    80% {
      transform: translateX(calc(-50 / 600 * 100vw));
      opacity: 1;
    }

    100% {
      transform: translateX(calc(-50 / 600 * 100vw));
      opacity: 0;
    }
  }

  /* ★右スワイプ用：左から右へ */
  @keyframes swipeRight {
    0% {
      transform: translateX(calc(-50 / 600 * 100vw));
      /* 開始位置：左 */
      opacity: 0;
    }

    20% {
      opacity: 1;
    }

    80% {
      transform: translateX(calc(50 / 600 * 100vw));
      /* 終了位置：右 */
      opacity: 1;
    }

    100% {
      transform: translateX(calc(50 / 600 * 100vw));
      opacity: 0;
    }
  }

  /* （以下、他のスタイルはそのまま） */

  #wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    width: 100%;
  }

  #card-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .tinder-card {

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
    touch-action: none;
    will-change: transform;
  }

  .swipe-overlay {

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
  }

  .swipe-overlay-like {
    background: linear-gradient(150deg, #F77268 0%, #F54578 25%, transparent 50%);
  }

  .swipe-overlay-skip {
    background: linear-gradient(-150deg, #3AD6EB 0%, #40B6F2 25%, transparent 50%);
  }

  .status-stamp {

    top: calc(140 / 600 * 100vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    padding: calc(10 / 600 * 100vw)calc(20 / 600 * 100vw);
    border-width: calc(6 / 600 * 100vw);
    border-style: solid;
    border-radius: calc(12 / 600 * 100vw);
    text-transform: uppercase;
  }

  .status-stamp img {
    width: calc(100 / 600 * 100vw);
    height: auto;
    margin-bottom: calc(5 / 600 * 100vw);
  }

  .status-stamp span {
    font-size: calc(36 / 600 * 100vw);
    font-weight: 900;
    line-height: 1;
  }

  .status-like {
    left: calc(30 / 600 * 100vw);
    color: #ffffff;
    border-color: #ffffff;
    transform: rotate(-15deg);
  }

  .status-skip {
    right: calc(30 / 600 * 100vw);
    color: #ffffff;
    border-color: #ffffff;
    transform: rotate(15deg);
  }

  .image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .image-wrap img {

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .image-wrap img.active {
    opacity: 1;
  }

  .tinder-card::before,
  .tinder-card::after {
    content: "";

    left: 0;
    width: 100%;
    z-index: 5;
    pointer-events: none;
  }

  .tinder-card::before {
    top: 0;
    height: 15%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  }

  .tinder-card::after {
    bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  }

  .top-tabs {

    top: calc(30 / 600 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: calc(30 / 600 * 100vw);
    z-index: 100;
    pointer-events: auto;
  }

  .tab {
    display: flex;
    align-items: center;
    opacity: 0.6;
    cursor: pointer;
  }

  .tab.active {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 8px 32px;
    border-radius: calc(50 / 600 * 100vw);
    opacity: 1;
  }

  .tab-text {
    color: #ffffff;
    font-size: calc(24 / 600 * 100vw);
    font-weight: bold;
    white-space: nowrap;
  }

  .badge {
    background-color: #ff5a5f;
    font-size: calc(16 / 600 * 100vw);
    border-radius: calc(100 / 600 * 100vw);
    padding: calc(2 / 600 * 100vw)calc(6 / 600 * 100vw);
    margin-left: calc(4 / 600 * 100vw);
  }

  .indicator {

    top: calc(100 / 600 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: calc(4 / 600 * 100vw);
    display: flex;
    gap: calc(4 / 600 * 100vw);
    z-index: 10;
  }

  .indicator .bar {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: calc(10 / 600 * 100vw);
  }

  .indicator .bar.active {
    background-color: #ffffff;
  }

  .bottom-actions {

    bottom: calc(30 / 600 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
    width: 100%;
    gap: calc(12 / 600 * 100vw);
    padding: 0 15px;
    box-sizing: border-box;
  }

  .action-btn {
    background: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s ease;
    padding: 0;
  }

  .action-btn:active {
    transform: scale(0.9);
  }

  .action-btn img {
    width: calc(89 / 600 * 100vw);
    height: auto;
  }

  .btn-skip {
    width: calc(100 / 600 * 100vw);
    height: auto;
  }

  .btn-super {
    width: calc(50 / 600 * 100vw);
    height: auto;
  }

  .btn-super img {
    width: calc(55 / 600 * 100vw);
  }

  .message-input-fake {
    flex-grow: 1;
    background-color: #000000;
    border-radius: calc(100 / 600 * 100vw);
    padding-top: calc(12 / 600 * 100vw);
    padding-bottom: calc(12 / 600 * 100vw);
    padding-right: calc(60 / 600 * 100vw);
    padding-left: calc(20 / 600 * 100vw);
    display: flex;
    align-items: center;
    border: 1px solid #333;
  }

  .message-input-fake p {
    color: #888888;
    font-size: calc(24 / 600 * 100vw);
    margin: 0;
    white-space: nowrap;
  }

  .profile-info {

    bottom: calc(140 / 600 * 100vw);
    left: calc(20 / 600 * 100vw);
    right: calc(20 / 600 * 100vw);
    z-index: 1000;
    color: #ffffff;
    pointer-events: none;
    text-align: left;
  }

  .swipe-overlay, .status-stamp {
    pointer-events: none;
    z-index: 50;
  }

  .profile-main {
    display: flex;
    align-items: baseline;
    gap: calc(8 / 600 * 100vw);
    margin-bottom: calc(12 / 600 * 100vw);
  }

  .name {
    font-size: calc(44 / 600 * 100vw);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  .address {
    font-size: calc(24 / 600 * 100vw);
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  .official-icon {
    width: calc(45 / 600 * 100vw);
    height: calc(45 / 600 * 100vw);
    align-self: center;
    margin-top: calc(10 / 600 * 100vw);
  }

  .profile-tags {
    display: flex;
    gap: calc(10 / 600 * 100vw);
    margin-bottom: calc(5 / 600 * 100vw);
  }

  .tag {
    font-size: calc(16 / 600 * 100vw);
    font-weight: bold;
    padding: calc(6 / 600 * 100vw) calc(12 / 600 * 100vw);
    border-radius: calc(8 / 600 * 100vw);
  }

  .tag-status {
    background-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
  }

  .introduction {
    font-size: calc(24 / 600 * 100vw);
    line-height: 1.4;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  .tag-location {
    display: inline-flex;
    align-items: center;
    gap: calc(4 / 600 * 100vw);
    font-weight: bold;
    padding: calc(6 / 600 * 100vw) calc(14 / 600 * 100vw);
    border-radius: calc(100 / 600 * 100vw);
    background-image: linear-gradient(to left, #3bb0ee, #9c7afb, #D57BA6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

  }

  .background {
    background: linear-gradient(to right, #fcd9d8, #ace2ff);
    border-radius: calc(8 / 600 * 100vw);
  }

  .pin-icon-gradient {
    display: inline-block;
    width: calc(24 / 600 * 100vw);
    height: calc(24 / 600 * 100vw);
    background: linear-gradient(to left, #F37879, #D57BA6);
    -webkit-mask-image: url("../img/map_pin.webp");
    mask-image: url("../img/map_pin.webp");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .pin-icon {
    width: calc(14 / 600 * 100vw);
    height: auto;
    filter: brightness(0) invert(1);
  }

  .pin-icon-mask {
    display: inline-block;
    width: calc(14 / 600 * 100vw);
    height: calc(14 / 600 * 100vw);
    background: linear-gradient(to right, #3bb0ee, #9c7afb);
    -webkit-mask-image: url("../img/map_pin.webp");
    mask-image: url("../img/map_pin.webp");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }

  .tag-location .pin-icon {
    -webkit-mask-image: url("./img/map_pin.webp");
    mask-image: url("./img/map_pin.webp");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: linear-gradient(to right, #3bb0ee, #9c7afb);
    width: calc(14 / 600 * 100vw);
    height: calc(14 / 600 * 100vw);
    display: inline-block;
    visibility: hidden;
  }

  .half-modal {
    height: auto;
    min-height: calc(700 / 600 * 100vw);
    max-height: calc(100dvh - 12px);
    border-radius: 20px 20px 0 0;
    padding: calc(20 / 600 * 100vw);
    overflow-y: visible;
  }

  /* モーダルの上にある「つまみ」バー */
  .modal-bar {
    width: calc(80 / 600 * 100vw);
    height: calc(5 / 600 * 100vw);
    background: #ccc;
    border-radius: calc(10 / 600 * 100vw);
    margin: 0 auto 20px;
  }

  /* マッチングビジュアル（画像が並ぶ部分） */
  .matching-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: calc(30 / 600 * 100vw);
    margin-bottom: calc(30 / 600 * 100vw);
  }

  .matching-card {
    width: calc(150 / 600 * 100vw);
    height: calc(230 / 600 * 100vw);
    border-radius: calc(15 / 600 * 100vw);
    border: 3px solid #fff;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .matching-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 左側のカード（自分） */
  .card-left {
    transform: rotate(-10deg) translateX(5px);
    /* 左に傾けて、右に少し寄せる */
    z-index: 1;
    /* 重なりの順序 */
  }

  /* 右側のカード（相手） */
  .card-right {
    transform: rotate(10deg) translateX(-5px);
    /* 右に傾けて、左に少し寄せる */
    z-index: 2;
    /* 相手を上に重ねる場合 */
  }

  .modal_text {
    text-align: center;
  }

  .mtext1 {
    font-size: calc(35 / 600 * 100vw);
    font-weight: bold;
  }

  .mtext2 {
    font-size: calc(18 / 600 * 100vw);
    color: #aeaeb1;
    border-bottom: 1px solid #fff;
    display: block;
    /* 横幅いっぱいに広げる */
    padding-bottom: calc(20 / 600 * 100vw);
    margin-bottom: calc(10 / 600 * 100vw);
  }

  /* 広告・リスト部分 */
  .modal-list {
    display: flex;
    flex-direction: column;
    gap: calc(15 / 600 * 100vw);
    align-items: center;
  }

  .modal-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 中身のアイコンとテキストを中央寄せ */
    padding: calc(15 / 600 * 100vw) calc(30 / 600 * 100vw);
    /* 左右の余白を少し広めにすると綺麗です */
    border-radius: calc(12 / 600 * 100vw);
    gap: calc(15 / 600 * 100vw);
    width: fit-content;
    /* 中身の幅に合わせる */
    /* min-width: 250px;   */
  }

  .item-icon {
    width: calc(130 / 600 * 100vw);
    height: calc(130 / 600 * 100vw);
    flex-shrink: 0;
  }

  .item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .item-text-appname {
    font-size: calc(32 / 600 * 100vw);
    font-weight: bold;
  }

  .item-text-appdetail {
    font-size: calc(20 / 600 * 100vw);
    color: #ADACB1;
  }

  /* 追加するボタン風の要素 */
  .item-btn {
    padding: calc(16 / 600 * 100vw) calc(48 / 600 * 100vw);
    color: #fff;
    /* 文字色は白 */
    font-weight: bold;
    font-size: calc(32 / 600 * 100vw);
    border-radius: calc(8 / 600 * 100vw);
    /* 角丸にしてボタンらしく */
    text-align: center;

    /* 上から下へのグラデーション */
    background: linear-gradient(to bottom, #F76C6A, #F64877);

    /* 影をつけるとよりボタンっぽく浮き出ます（お好みで） */
    /* box-shadow: 0 4px 10px rgba(247, 108, 106, 0.3); */
  }

}