/* =================================
   Bloomy eSIM TOP Page
   Desktop First / Complete
   front-page.php 蟆ら畑
================================= */

body,
#content,
.l-content,
.p-content {
  background: #f3f6fc;
}

/* =================================
   Base
================================= */

.bloomy-top-page {
  --line: #d9e5ff;
  --line-strong: #bed2ff;

  --blue: #2d77f6;
  --blue-dark: #1a3d8f;
  --blue-soft: #edf4ff;

  --text-main: #1b3776;
  --text-sub: #6276a8;
  --text-soft: #64718f;

  --yellow: #ffcb3d;
  --yellow-dark: #f2b100;

  --shadow-soft: 0 14px 36px rgba(79, 118, 198, 0.14);
  --shadow-card: 0 10px 24px rgba(73, 113, 194, 0.12);
  --shadow-card-hover: 0 18px 34px rgba(73, 113, 194, 0.16);
  --shadow-strong: 0 18px 42px rgba(60, 104, 193, 0.18);

  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;

  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 0px;
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.bloomy-top-page *,
.bloomy-top-page *::before,
.bloomy-top-page *::after {
  box-sizing: border-box;
}

.bloomy-top-page img {
  display: block;
  width: 100%;
  height: auto;
}

.bloomy-top-page a {
  color: inherit;
  text-decoration: none;
}

.bloomy-top-page button,
.bloomy-top-page input,
.bloomy-top-page select,
.bloomy-top-page textarea {
  font: inherit;
}

.bloomy-top-page button {
  -webkit-tap-highlight-color: transparent;
}

.bloomy-top-page :focus-visible {
  outline: none;
}

/* =================================
   Section Head
================================= */

.bloomy-top-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.bloomy-top-section-head__main {
  min-width: 0;
}

.bloomy-top-section-head__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #4c7ce6;
}

.bloomy-top-section-head__title {
  margin: 0;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.bloomy-top-section-head__lead {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--text-sub);
}

.bloomy-top-section-head--stack {
  display: block;
  margin-bottom: 18px;
}
/* =================================
   Hero + Filter + Trust Bar
   Desktop Design Match
   Header Overlap Fixed
================================= */

.bloomy-top-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);

  /* 固定ヘッダーに潜り込む原因だった -88px を解除 */
  margin-top: 0 !important;

  /* 固定ヘッダー分の余白をここで確保 */
  padding-top: 112px !important;

  padding-bottom: 44px;
  overflow: hidden;
  background: #f3f6fc;
}

body.admin-bar .bloomy-top-hero {
  padding-top: 136px !important;
}

.bloomy-top-hero .bloomy-top-hero__bg-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  /* グラデの高さを画像と同じ 52.5vw(=105% × 887/1774) に固定し上端基準にすることで、
     画面幅・セクション高に関係なくフェードが必ず画像の下端で完成し、自然に背景へ溶ける。 */
  background-image:
    linear-gradient(
      to bottom,
      rgba(243, 246, 252, 0) 0%,
      rgba(243, 246, 252, 0) 78%,
      rgba(243, 246, 252, 0.60) 90%,
      rgba(243, 246, 252, 1) 100%
    ),
    url("https://bloomyesim.com/wp-content/uploads/2026/06/ChatGPT-Image-2026年5月31日-13_44_32.webp");
  background-size:
    100% 52.5vw,
    105% auto;
  background-position:
    center top,
    52% top;
  background-repeat:
    no-repeat,
    no-repeat;
}

.bloomy-top-hero__bg::after {
  content: none;
}

/* 文字・検索カード・トラストバーは背景フェードより前面 */
.bloomy-top-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 1240px;
  margin: 0 auto;

  /* 外側 .bloomy-top-hero でヘッダー余白を取るのでここは軽くする */
  padding: 18px 24px 0 !important;
}

.bloomy-top-hero__content {
  max-width: 520px;
  padding-top: 8px;
  margin-bottom: 24px;
}

.bloomy-top-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: #0f63d8;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.bloomy-top-hero__eyebrow::before,
.bloomy-top-hero__eyebrow::after {
  content: "";
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: #0f63d8;
  transform: rotate(58deg);
}

.bloomy-top-hero__eyebrow::after {
  transform: rotate(-58deg);
}

.bloomy-top-hero__title {
  margin: 0 0 18px;
  color: #07163f;
  font-size: clamp(46px, 4.8vw, 66px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.055em;
}

.bloomy-top-hero__lead {
  margin: 0;
  color: #182447;
  font-size: 15.5px;
  line-height: 1.85;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bloomy-top-filter-anchor {
  position: relative;
  top: -90px;
  height: 0;
  overflow: hidden;
}

/* =================================
   Hero Header Offset Responsive
================================= */

@media (max-width: 768px) {
  .bloomy-top-hero {
    margin-top: 0 !important;
    padding-top: 94px !important;
  }

  body.admin-bar .bloomy-top-hero {
    padding-top: 126px !important;
  }

  .bloomy-top-hero__inner {
    padding: 14px 18px 0 !important;
  }
}
/* =================================
   Filter Card
================================= */

.bloomy-top-filter {
  position: relative;
  z-index: 4;
  width: 100%;
  margin: 0 auto;
  padding: 24px 26px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.955);
  border: 1px solid rgba(214, 226, 248, 0.95);
  box-shadow:
    0 18px 42px rgba(26, 56, 112, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(10px);
}

.bloomy-top-filter-head {
  display: block;
  margin: 0 0 12px;
}

.bloomy-top-filter-head__title {
  margin: 0;
  color: #07163f;
  font-size: 23px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.bloomy-top-filter__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 20px;
  align-items: start;
  margin-bottom: 17px;
}

.bloomy-top-searchbar {
  position: relative;
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 46px;
  padding: 7px 44px 7px 43px;
  border-radius: 13px;
  background: #fff;
  border: 1.5px solid #c7d6f0;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.bloomy-top-searchbar:focus-within {
  border-color: #1d6be8;
  box-shadow: 0 0 0 4px rgba(29, 107, 232, 0.08);
}

.bloomy-top-searchbar::before {
  content: "⌕";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-52%);
  color: #7586aa;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

.bloomy-top-searchbar__chips {
  display: contents;
}

.bloomy-top-searchbar__chips:empty {
  display: none;
}

.bloomy-top-searchbar__input {
  flex: 1 1 220px;
  min-width: 160px;
  min-height: 30px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #152852;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

/* 空状態(チップなし)はオーバーレイspanが例文を表示するのでネイティブは透明。
   チップ選択中はネイティブのhint(「ほかの国を追加」)を見せ、一覧外も検索できると伝える(Point4)。 */
.bloomy-top-searchbar:not(.is-has-chips) .bloomy-top-searchbar__input::placeholder {
  color: transparent;
}
.bloomy-top-searchbar.is-has-chips .bloomy-top-searchbar__input::placeholder {
  color: #97a4bd;
}

.bloomy-top-searchbar__placeholder {
  position: absolute;
  left: 43px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6f7c9a;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
}

.bloomy-top-searchbar__clear-input {
  position: absolute;
  right: 12px;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: #eef3fb;
  color: #7f8caf;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.bloomy-top-searchbar__suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: none;
  max-height: 320px;
  overflow: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #dbe7ff;
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(22, 43, 99, 0.12);
}

.bloomy-top-searchbar__hint {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: none;
  max-width: 220px;
  overflow: hidden;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  background: #eef4ff;
  color: #4d6fb3;
}

.bloomy-top-searchbar__hint.is-error {
  background: #fff1f1;
  color: #d93c3c;
}

.bloomy-top-searchbar__measure {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

.bloomy-top-filter__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  width: 100%;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #0b67e8 0%, #0758ce 100%);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(10, 91, 214, 0.20);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.bloomy-top-filter__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 28px rgba(10, 91, 214, 0.24);
  filter: brightness(1.02);
}

.bloomy-top-filter__popular {
  margin-bottom: 17px;
}

.bloomy-top-filter__popular-title,
.bloomy-top-filter__areas-title {
  margin: 0 0 9px;
  color: #07163f;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 700;
}

.bloomy-top-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bloomy-top-chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #dbe5f4;
  background: #fff;
  color: #12234f;
  font-size: 13px;
  line-height: 1;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(41, 72, 130, 0.035);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}

.bloomy-top-chip-button:hover {
  transform: translateY(-1px);
  border-color: #b9cef2;
  background: #f8fbff;
}

.bloomy-top-chip-button.is-selected {
  border-color: #75a6ff;
  background: #eef5ff;
  color: #135bd5;
}

.bloomy-top-chip-button__emoji {
  font-size: 19px;
  line-height: 1;
}

.bloomy-top-chip-button__text {
  white-space: nowrap;
}

/* 「ほかの国を探す」検索導線チップ（国は追加せず検索boxへ誘導）。
   人気チップと同じ高さ・軽さに揃えつつ、淡いブルーの破線枠＋虫眼鏡で“検索”と分かる見た目に。 */
.bloomy-chip-search-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px dashed #cfddf6;
  /* 軽く・淡く(ブランド指針: 文字は細め/やわらかいブルー/淡い背景) */
  background: #f4f8ff;
  color: #3f6ad0;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}

.bloomy-chip-search-cta:hover {
  transform: translateY(-1px);
  border-color: #a9c4ef;
  background: #eaf1ff;
}

.bloomy-chip-search-cta__icon {
  display: inline-flex;
  color: #5f86d8;
}

/* CTAクリック時、検索バーを一瞬ハイライトして「ここに入力」を示す */
.bloomy-top-searchbar.bloomy-searchbar--flash {
  animation: bloomy-searchbar-flash 1.2s ease;
}

@keyframes bloomy-searchbar-flash {
  0%   { box-shadow: 0 0 0 0 rgba(79, 123, 221, 0); }
  18%  { box-shadow: 0 0 0 4px rgba(79, 123, 221, 0.28); }
  100% { box-shadow: 0 0 0 0 rgba(79, 123, 221, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bloomy-chip-search-cta { transition: none; }
  .bloomy-top-searchbar.bloomy-searchbar--flash { animation: none; }
}

.bloomy-top-filter__areas-wrap {
  margin-bottom: 0;
}

.bloomy-top-filter__areas {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.bloomy-top-area-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 11px;
  border: 1px solid #dbe5f4;
  background: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 10px rgba(41, 72, 130, 0.035);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.bloomy-top-area-button:hover {
  transform: translateY(-1px);
  border-color: #b9cef2;
  background: #f8fbff;
}

.bloomy-top-area-button.is-selected {
  border-color: #75a6ff;
  background: #eef5ff;
  box-shadow: 0 8px 18px rgba(33, 113, 245, 0.10);
}

.bloomy-top-area-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
}

.bloomy-top-area-button__icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.bloomy-top-area-button__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bloomy-top-area-button__label {
  color: #12234f;
  font-size: 13.5px;
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
}

.bloomy-top-area-button__meta {
  color: #61708f;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  white-space: normal;
  word-break: keep-all;
}

.bloomy-top-filter__bottom {
  display: flex;
  justify-content: flex-end;
  margin-top: 9px;
}

.bloomy-top-filter__clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64718f;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 750;
  cursor: pointer;
  transition: color 0.16s ease;
}

.bloomy-top-filter__clear:hover {
  color: #1d6be8;
}

/* selected chips / suggestions */

.bloomy-top-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: #eef4ff;
  color: #3f6ad0; /* 軽く・淡く: やわらかいブルー */
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.bloomy-top-selected-chip__emoji {
  font-size: 16px;
  line-height: 1;
}

.bloomy-top-selected-chip__remove {
  font-size: 17px;
  line-height: 1;
  color: #2171f5;
}

.bloomy-top-suggestion {
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.bloomy-top-suggestion:hover,
.bloomy-top-suggestion.is-active {
  background: #f6f9ff;
}

.bloomy-top-suggestion__main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bloomy-top-suggestion__emoji {
  font-size: 18px;
  line-height: 1;
}

.bloomy-top-suggestion__label {
  font-size: 14px;
  font-weight: 800;
  color: #162b63;
}

.bloomy-top-suggestion__meta {
  font-size: 12px;
  font-weight: 500;
  color: #7d8caf;
}

/* =================================
   Trust Bar
================================= */

.bloomy-top-trustbar {
  position: relative;
  z-index: 4;
  width: 100%;
  margin-top: 18px;
}

.bloomy-top-trustbar__inner {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 1.1fr 1.7fr;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: 76px;
  padding: 14px 26px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.965);
  border: 1px solid rgba(214, 226, 248, 0.95);
  box-shadow:
    0 12px 28px rgba(26, 56, 112, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(10px);
}

.bloomy-top-trustbar__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding-right: 22px;
}

.bloomy-top-trustbar__item + .bloomy-top-trustbar__item,
.bloomy-top-trustbar__payments {
  border-left: 1px solid #dbe4f2;
  padding-left: 24px;
}

.bloomy-top-trustbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}

.bloomy-top-trustbar__icon img {
  width: 43px;
  height: 43px;
  object-fit: contain;
}

.bloomy-top-trustbar__text {
  min-width: 0;
}

.bloomy-top-trustbar__title {
  margin: 0 0 4px;
  color: #12234f;
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bloomy-top-trustbar__lead {
  margin: 0;
  color: #566784;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 600;
}
.bloomy-top-trustbar__payments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.bloomy-top-trustbar__payment-title {
  margin: 0;
  color: #566784;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
}

.bloomy-top-trustbar__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.bloomy-top-trustbar__logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  height: 31px;
  padding: 0 5px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid #dce5f3;
  box-shadow: 0 4px 10px rgba(72, 111, 193, 0.05);
}

.bloomy-top-trustbar__logo-card img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.bloomy-top-trustbar__logo-card--visa img {
  height: 13px;
}

.bloomy-top-trustbar__logo-card--mastercard img {
  height: 21px;
}

.bloomy-top-trustbar__logo-card--amex img {
  height: 22px;
}

.bloomy-top-trustbar__logo-card--jcb img {
  height: 22px;
}

.bloomy-top-trustbar__logo-card--applepay img {
  height: 25px;
}

.bloomy-top-trustbar__logo-card--googlepay img {
  height: 20px;
}

/* =================================
   Recommend
================================= */

.bloomy-top-recommend {
  margin-top: 0;
  margin-bottom: 84px;
}

.bloomy-top-recommend__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

.bloomy-top-recommend__tab {
  appearance: none;
  border: 1px solid #d8e4ff;
  background: #fff;
  color: #5f76ae;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  box-shadow: 0 8px 18px rgba(83, 114, 188, 0.07);
}

.bloomy-top-recommend__tab:hover {
  border-color: #bfd5ff;
  color: #2d77f6;
  transform: translateY(-1px);
}

.bloomy-top-recommend__tab.is-active {
  background: linear-gradient(135deg, #2f78f6 0%, #1f69ee 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 24px rgba(45, 119, 246, 0.2);
}

.bloomy-top-recommend__panel {
  display: none;
}

.bloomy-top-recommend__panel.is-active {
  display: block;
}

.bloomy-top-recommend__slider {
  overflow: visible;
}

.bloomy-top-recommend__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.bloomy-top-recommend-card {
  min-width: 0;
}

.bloomy-top-recommend-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #fbfdff;
  border: 1px solid #d9e5fb;
  box-shadow: 0 14px 28px rgba(84, 114, 186, 0.09);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.bloomy-top-recommend-card__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(84, 114, 186, 0.13);
}

.bloomy-top-recommend-card__thumb {
  position: relative;
  aspect-ratio: 1.62 / 1;
  overflow: hidden;
}

.bloomy-top-recommend-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloomy-top-recommend-card__thumb-top {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bloomy-top-recommend-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  color: #2f78f6;
  box-shadow: 0 8px 18px rgba(34, 57, 108, 0.08);
}

.bloomy-top-recommend-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 16px;
}

.bloomy-top-recommend-card__head {
  min-width: 0;
}

.bloomy-top-recommend-card__country-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bloomy-top-recommend-card__flag {
  width: 60px;
  height: 36px;
  flex: 0 0 60px;
  border-radius: 10px;
  border: 1px solid #d9e4fb;
  background: #fff;
  overflow: hidden;
}

.bloomy-top-recommend-card__flag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.bloomy-top-recommend-card__flag--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.bloomy-top-recommend-card__country-group {
  min-width: 0;
}

.bloomy-top-recommend-card__country {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
  color: #173b87;
}

.bloomy-top-recommend-card__description {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  color: #7285b1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.2em;
}

.bloomy-top-recommend-card__divider {
  margin: 12px 0;
  height: 1px;
  background: #dbe5fb;
}

.bloomy-top-recommend-card__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.bloomy-top-recommend-card__spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  text-align: center;
}

.bloomy-top-recommend-card__spec-label {
  position: relative;
  left: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  color: #64718f;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}

.bloomy-top-recommend-card__spec-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.bloomy-top-recommend-card__spec--data .bloomy-top-recommend-card__spec-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 26 26' fill='none'%3E%3Cellipse cx='13' cy='5.5' rx='9.5' ry='3.5' stroke='%23377CF6' stroke-width='2.4'/%3E%3Cpath d='M3.5 5.5V19.5C3.5 21.433 7.754 23 13 23C18.246 23 22.5 21.433 22.5 19.5V5.5' stroke='%23377CF6' stroke-width='2.4'/%3E%3Cpath d='M3.8 12C5.4 13.7 8.8 14.6 13 14.6C17.2 14.6 20.6 13.7 22.2 12' stroke='%23377CF6' stroke-width='2.4'/%3E%3Cpath d='M3.8 17C5.4 18.7 8.8 19.6 13 19.6C17.2 19.6 20.6 18.7 22.2 17' stroke='%23377CF6' stroke-width='2.4'/%3E%3C/svg%3E");
}

.bloomy-top-recommend-card__spec--period .bloomy-top-recommend-card__spec-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 26 26' fill='none'%3E%3Crect x='3' y='4.5' width='20' height='18' rx='3' stroke='%23377CF6' stroke-width='2.4'/%3E%3Cpath d='M8 2.8V7' stroke='%23377CF6' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M18 2.8V7' stroke='%23377CF6' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M3.8 10.2H22.2' stroke='%23377CF6' stroke-width='2.4'/%3E%3Ccircle cx='8.2' cy='14.2' r='1.2' fill='%23377CF6'/%3E%3Ccircle cx='13' cy='14.2' r='1.2' fill='%23377CF6'/%3E%3Ccircle cx='17.8' cy='14.2' r='1.2' fill='%23377CF6'/%3E%3Ccircle cx='8.2' cy='18.2' r='1.2' fill='%23377CF6'/%3E%3Ccircle cx='13' cy='18.2' r='1.2' fill='%23377CF6'/%3E%3Ccircle cx='17.8' cy='18.2' r='1.2' fill='%23377CF6'/%3E%3C/svg%3E");
}

.bloomy-top-recommend-card__spec--price .bloomy-top-recommend-card__spec-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 28 26' fill='none'%3E%3Cpath d='M3 7.5C3 6.12 4.12 5 5.5 5H20.3C20.96 5 21.59 5.26 22.06 5.73L24.27 7.94C24.74 8.41 25 9.04 25 9.7V18.5C25 19.88 23.88 21 22.5 21H5.5C4.12 21 3 19.88 3 18.5V7.5Z' stroke='%23377CF6' stroke-width='2.4'/%3E%3Ccircle cx='20.2' cy='13' r='1.5' fill='%23377CF6'/%3E%3C/svg%3E");
}

.bloomy-top-recommend-card__spec-value {
  width: 100%;
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.03em;
  text-align: center;
  color: #173b87;
}

.bloomy-top-recommend-card__spec-value--price {
  color: #377cf6;
}

.bloomy-top-recommend-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}

.bloomy-top-recommend-card__detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  color: #173b87;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.bloomy-top-recommend-card__detail:hover {
  opacity: 0.78;
  transform: translateY(-1px);
}

.bloomy-top-recommend-card__detail-arrow {
  font-size: 15px;
  line-height: 1;
}
.bloomy-top-page .bloomy-top-recommend-card__cta,
.bloomy-top-page .bloomy-top-recommend-card__cta:link,
.bloomy-top-page .bloomy-top-recommend-card__cta:visited,
.bloomy-top-page .bloomy-top-recommend-card__cta:hover,
.bloomy-top-page .bloomy-top-recommend-card__cta:active,
.bloomy-top-page .bloomy-top-recommend-card__cta:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #347cf6, #1f6bee);
  box-shadow: 0 6px 12px rgba(45, 119, 246, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  white-space: nowrap;
}

.bloomy-top-page .bloomy-top-recommend-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(45, 119, 246, 0.16);
}

/* =================================
   Featured
   Modern Campaign Card UI
================================= */

.bloomy-top-featured {
  margin-top: 0;
  margin-bottom: 86px;
}

.bloomy-top-featured .bloomy-top-section-head {
  align-items: flex-end;
  margin-bottom: 24px;
}

.bloomy-top-featured .bloomy-top-section-head__eyebrow {
  margin-bottom: 7px;
  color: #4f7ff3;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.bloomy-top-featured .bloomy-top-section-head__title {
  font-size: 34px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #173b86;
}

.bloomy-top-featured .bloomy-top-section-head__lead {
  margin-top: 8px;
  color: #657aaa;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.75;
}

.bloomy-top-featured__slider {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
}

.bloomy-top-featured__nav {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #4f68a8;
  font-size: 27px;
  line-height: 1;
  box-shadow:
    0 10px 22px rgba(73, 113, 194, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.bloomy-top-featured__nav:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(73, 113, 194, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bloomy-top-featured__nav:disabled {
  opacity: 0.42;
  cursor: default;
  transform: none;
}

.bloomy-top-featured__viewport {
  width: 100%;
  overflow: hidden;
  padding: 8px 0 10px;
}

.bloomy-top-featured__track {
  display: flex;
  gap: 22px;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  will-change: transform;
}

.bloomy-top-featured-card {
  flex: 0 0 min(48%, 560px);
  min-width: 0;
}

@media (min-width: 768px) {
  .bloomy-top-featured__track {
    width: 100%;
    min-width: 100%;
  }

  .bloomy-top-featured-card {
    flex: 0 0 calc((100% - 22px) / 2);
    max-width: calc((100% - 22px) / 2);
  }
}

.bloomy-top-featured-card__link {
  display: block;
  line-height: 0;
  border-radius: 30px;
  color: inherit;
  text-decoration: none;
}

.bloomy-top-featured-card__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.bloomy-top-featured-card__media::before {
  content: none;
}

.bloomy-top-featured-card__link:hover .bloomy-top-featured-card__media {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(43, 97, 190, 0.13);
}

.bloomy-top-featured-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  transition: transform 0.32s ease;
}

.bloomy-top-featured-card__link:hover .bloomy-top-featured-card__media img {
  transform: scale(1.018);
}

.bloomy-top-featured__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}

.bloomy-top-featured__dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d7e3fb;
  transition:
    width 0.18s ease,
    background 0.18s ease;
}

.bloomy-top-featured__dots span.is-active {
  width: 30px;
  background: linear-gradient(90deg, #5d83ee 0%, #2f74ff 100%);
}

/* =================================
   Reviews
================================= */

.bloomy-top-reviews {
  margin-top: 0;
  margin-bottom: 84px;
}

.bloomy-top-reviews__shell {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 28px;
  padding: 26px 30px;
  border-radius: 36px;
  background:
    linear-gradient(
      180deg,
      rgba(246, 250, 255, 0.86) 0%,
      rgba(232, 241, 255, 0.98) 100%
    ),
    #edf4ff;
  border: 1px solid #dbe7fb;
  box-shadow:
    0 12px 28px rgba(73, 113, 194, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.bloomy-top-reviews__intro {
  min-width: 0;
}

.bloomy-top-reviews__intro-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 38px 34px 20px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.bloomy-top-reviews__intro-inner::before {
  content: none;
}

.bloomy-top-reviews__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: 38px;
  margin: 0 0 22px;
  padding: 0 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(207, 223, 255, 0.82);
  color: #3b6fd8;
  font-size: 13.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.bloomy-top-reviews__label-icon {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.bloomy-top-reviews__label-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M7.5625 17.4167H7.10417C3.4375 17.4167 1.83333 15.8125 1.83333 12.1458V7.10417C1.83333 3.4375 3.4375 1.83333 7.10417 1.83333H14.8958C18.5625 1.83333 20.1667 3.4375 20.1667 7.10417V12.1458C20.1667 15.8125 18.5625 17.4167 14.8958 17.4167H14.4375C14.1533 17.4167 13.8783 17.5542 13.7042 17.7833L12.3292 19.6167C11.7242 20.4233 10.7342 20.4233 10.1292 19.6167L8.75417 17.7833C8.6075 17.5817 7.81083 17.4167 7.5625 17.4167Z' stroke='%233B6FD8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.32812 8.25H7.33636' stroke='%233B6FD8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.9922 8.25H11.0004' stroke='%233B6FD8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.6562 8.25H14.6645' stroke='%233B6FD8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bloomy-top-reviews__title {
  position: relative;
  z-index: 2;
  margin: 0 0 20px;
  font-size: 30px;
  line-height: 1.36;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: #16357f;
}

.bloomy-top-reviews__title span {
  color: #2f7ef7;
}

.bloomy-top-reviews__lead {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #5f7195;
}

.bloomy-top-reviews__lead span {
  color: #2f7ef7;
  font-weight: 750;
}

.bloomy-top-reviews__bloomy {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 34px;
  transform: translateY(8px);
}

.bloomy-top-reviews__bloomy img {
  display: block;
  width: 204px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.bloomy-top-reviews__cards {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.bloomy-top-review-card {
  min-width: 0;
}

.bloomy-top-review-card__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 136px;
  height: 100%;
  padding: 18px 28px 16px;
  border-radius: 27px;
  background: #ffffff;
  border: 1px solid #dce7fa;
  box-shadow:
    0 8px 18px rgba(73, 113, 194, 0.052),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.bloomy-top-review-card__inner:hover {
  transform: translateY(-2px);
  border-color: #cfe0fb;
  box-shadow:
    0 14px 26px rgba(73, 113, 194, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.bloomy-top-review-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 30px;
  margin: 0 0 12px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.bloomy-top-review-card--blue .bloomy-top-review-card__tag {
  background: #dfeaff;
  color: #2d72df;
}

.bloomy-top-review-card--green .bloomy-top-review-card__tag {
  background: #e0f5ed;
  color: #35a887;
}

.bloomy-top-review-card--purple .bloomy-top-review-card__tag {
  background: #ece6ff;
  color: #7658df;
}

.bloomy-top-review-card__body {
  margin: 0 0 11px;
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: #1a356f;
}

.bloomy-top-review-card__body span {
  color: #2f7ef7;
  font-weight: 800;
}

.bloomy-top-review-card--green .bloomy-top-review-card__body span {
  color: #35a887;
}

.bloomy-top-review-card--purple .bloomy-top-review-card__body span {
  color: #7658df;
}

.bloomy-top-review-card__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 23px;
  padding-top: 11px;
  border-top: 1px solid #e3e9f5;
}

.bloomy-top-review-card__meta-icon {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.bloomy-top-review-card__meta-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M11 10.0833C13.025 10.0833 14.6667 8.44168 14.6667 6.41667C14.6667 4.39165 13.025 2.75 11 2.75C8.97496 2.75 7.33333 4.39165 7.33333 6.41667C7.33333 8.44168 8.97496 10.0833 11 10.0833Z' stroke='%2373819D' stroke-width='1.8'/%3E%3Cpath d='M4.70312 19.25C4.70312 16.4125 7.52229 14.1167 10.999 14.1167C14.4756 14.1167 17.2948 16.4125 17.2948 19.25' stroke='%2373819D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bloomy-top-review-card__meta-text {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  /* a11y: #73819d は白背景で約3.9:1（AA未達）。青グレーの印象は保ちつつ AA(4.5:1) を満たす濃さへ。 */
  color: #5f6b88;
}

/* =================================
   Reasons
================================= */

.bloomy-top-reasons {
  margin-top: 0;
  margin-bottom: 84px;
}

.bloomy-top-reasons__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.bloomy-top-reasons__head {
  margin-bottom: 26px;
}

.bloomy-top-reasons__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #16357a;
}

.bloomy-top-reasons__title span {
  color: #2f7ef7;
  margin-right: 2px;
}

.bloomy-top-reasons__lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
  color: #5d6f99;
}

.bloomy-top-reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* =================================
   Reason Cards
================================= */

.bloomy-top-reason-card {
  min-height: 190px;
  padding: 26px 24px 22px;
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.99) 0%,
      rgba(249, 252, 255, 0.99) 100%
    ),
    #ffffff;
  border: 1px solid #dbe7ff;
  box-shadow:
    0 10px 24px rgba(77, 113, 194, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  text-align: center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.bloomy-top-reason-card:hover {
  transform: translateY(-2px);
  border-color: #cfe0fb;
  box-shadow:
    0 14px 30px rgba(77, 113, 194, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.bloomy-top-reason-card__icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background-color: #edf4ff;
  border: 1px solid #d7e4ff;
  box-shadow:
    0 7px 15px rgba(73, 113, 194, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
}

.bloomy-top-reason-card__icon::after {
  content: none;
  display: none;
}

/* 出発前に準備できる */
.bloomy-top-reason-card__icon--setup {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Crect x='12' y='7' width='20' height='30' rx='4' stroke='%231C3F8C' stroke-width='2.6'/%3E%3Cpath d='M18 13H26' stroke='%231C3F8C' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M22 32H22.01' stroke='%231C3F8C' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M17 22L20.5 25.5L27.5 18.5' stroke='%232F7EF7' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 到着後すぐにつながる */
.bloomy-top-reason-card__icon--connect {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Crect x='12' y='7' width='20' height='30' rx='4' stroke='%231C3F8C' stroke-width='2.6'/%3E%3Cpath d='M19 31H25' stroke='%231C3F8C' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M18 21.5C20.3 19.3 23.7 19.3 26 21.5' stroke='%232F7EF7' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M16 17.8C19.6 14.7 24.4 14.7 28 17.8' stroke='%232F7EF7' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M21.9 25.2H22.1' stroke='%232F7EF7' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* はじめてでも選びやすい */
.bloomy-top-reason-card__icon--choose {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Crect x='10' y='8' width='24' height='28' rx='4' stroke='%231C3F8C' stroke-width='2.6'/%3E%3Cpath d='M16 16H28' stroke='%231C3F8C' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M16 22H24' stroke='%231C3F8C' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M16 28H21' stroke='%231C3F8C' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='28' r='4.4' stroke='%232F7EF7' stroke-width='2.6'/%3E%3Cpath d='M31.4 31.4L35 35' stroke='%232F7EF7' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bloomy-top-reason-card__title {
  margin: -2px 0 0;
  font-size: 15.5px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #1d63df;
}

.bloomy-top-reason-card__text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 600;
  color: #5e6f96;
}

/* =================================
   Campaign Mini CTA
================================= */

.bloomy-top-reasons__cta-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-top: 14px;
}

.bloomy-top-reasons__cta-badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4cc 0%, #ffe08a 100%);
  border: 1px solid rgba(226, 181, 58, 0.45);
  color: #8a6512;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(226, 181, 58, 0.14);
}

.bloomy-top-reasons__cta-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #ffe9a8;
  border-right: 1px solid rgba(226, 181, 58, 0.45);
  border-bottom: 1px solid rgba(226, 181, 58, 0.45);
}

.bloomy-top-reasons__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 24px 0 20px;
  border-radius: 999px;
  background: #ffffff;
  border: 1.5px solid #efc44a;
  box-shadow:
    0 10px 22px rgba(89, 120, 193, 0.1),
    0 3px 10px rgba(89, 120, 193, 0.05);
  color: #173885;
  text-decoration: none;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.bloomy-top-reasons__cta:hover {
  transform: translateY(-1px);
  border-color: #e9b92b;
  box-shadow:
    0 14px 26px rgba(89, 120, 193, 0.14),
    0 4px 12px rgba(89, 120, 193, 0.06);
}

.bloomy-top-reasons__cta-icon {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Crect x='7' y='11' width='16' height='12' rx='2' fill='%23357df7'/%3E%3Cpath d='M15 11V23' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M7 15.5H23' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M10.4 10C9 10 8 9.1 8 7.8C8 6.8 8.8 6 9.9 6C12 6 13.4 7.9 15 11H10.4Z' stroke='%23e2ab18' stroke-width='1.6' fill='white' stroke-linejoin='round'/%3E%3Cpath d='M19.6 10C21 10 22 9.1 22 7.8C22 6.8 21.2 6 20.1 6C18 6 16.6 7.9 15 11H19.6Z' stroke='%23e2ab18' stroke-width='1.6' fill='white' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bloomy-top-reasons__cta-copy {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: #243b78;
  white-space: nowrap;
}

.bloomy-top-reasons__cta-strong {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #2f7ef7;
  white-space: nowrap;
}

.bloomy-top-reasons__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  margin-left: 2px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2f7ef7;
  font-size: 19px;
  line-height: 1;
  font-weight: 800;
}

/* =================================
   How To Use
   Desktop
================================= */

.bloomy-top-howto {
  margin-top: 0;
  margin-bottom: 84px;
}

.bloomy-top-howto__inner {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 36px 36px;
  border-radius: 34px;
  background:
    linear-gradient(
      180deg,
      rgba(232, 241, 255, 0.96) 0%,
      rgba(218, 233, 255, 0.98) 100%
    ),
    #e4efff;
  border: 1px solid #d3e3ff;
  box-shadow:
    0 12px 28px rgba(73, 113, 194, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  overflow: visible;
}

/* Intro */

.bloomy-top-howto__intro {
  position: relative;
  max-width: 640px;
  margin: 0 0 30px;
  padding: 0;
}

.bloomy-top-howto__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  margin: 0 0 14px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f8cff 0%, #2479f2 100%);
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow:
    0 8px 16px rgba(47, 126, 247, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.bloomy-top-howto__title {
  margin: 0;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.055em;
  color: #17357d;
}

.bloomy-top-howto__lead {
  max-width: 560px;
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 750;
  color: #17357d;
}

.bloomy-top-howto__bloomy {
  display: none;
}

/* Steps */

.bloomy-top-howto__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  min-width: 0;
}

.bloomy-top-howto__arrow {
  display: none;
}
.bloomy-top-howto-step {
  position: relative;
  min-width: 0;
  min-height: 246px;
  height: auto;
  padding: 54px 24px 0;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(218, 230, 250, 0.96);
  box-shadow:
    0 8px 18px rgba(73, 113, 194, 0.052),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  text-align: center;
  overflow: visible;
}

.bloomy-top-howto-step__num {
  position: absolute;
  top: -13px;
  left: 28px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;
  border-radius: 999px;

  background: linear-gradient(180deg, #88b7ff 0%, #6ea1f7 100%);
  color: #ffffff;

  font-size: 19px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;

  box-shadow:
    0 8px 16px rgba(73, 113, 194, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.bloomy-top-howto-step__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #102c70;
}

.bloomy-top-howto-step__text {
  max-width: 240px;
  margin: 10px auto 15px;
  font-size: 12.5px;
  line-height: 1.68;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #5f6f91;
}

/* Phone Mock */

.bloomy-top-howto-phone {
  position: relative;
  width: 92px;
  height: 142px;
  margin: 4px auto 0;
  border: 5px solid #102c70;
  border-bottom: 0;
  border-radius: 27px 27px 0 0;
  background: #ffffff;
  overflow: hidden;
}

.bloomy-top-howto-phone__notch {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 36px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 0 0 12px 12px;
  background: #102c70;
}

/* スマホ画面内の中身を少し下げる */
.bloomy-top-howto-phone__screen {
  position: absolute;
  inset: 40px 18px 14px;
}

/* 01：プランリスト */
.bloomy-top-howto-phone__line {
  position: relative;
  display: block;
  width: 100%;
  height: 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #eef4ff;
}

.bloomy-top-howto-phone__line::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translateY(-50%);
  border-radius: 999px;
}

.bloomy-top-howto-phone__line.is-blue::before {
  background: #2f7ef7;
}

.bloomy-top-howto-phone__line.is-navy::before {
  background: #173885;
}

.bloomy-top-howto-phone__line.is-yellow::before {
  background: #f2b100;
}

/* 旧QRダミー・旧Wi-Fiダミーは非表示 */
.bloomy-top-howto-phone__qr,
.bloomy-top-howto-phone__wifi {
  display: none;
}

/* 02：実QR画像 */
.bloomy-top-howto-phone__qr-img {
  display: block;
  width: 56px;
  height: 56px;
  margin: 8px auto 0;
  padding: 4px;
  border-radius: 7px;
  background: #ffffff;
  object-fit: contain;
  box-shadow:
    0 0 0 1px rgba(16, 44, 112, 0.1),
    0 5px 12px rgba(16, 44, 112, 0.05);
}

/* 03：Wi-Fi画像 */
.bloomy-top-howto-phone__wifi-img {
  display: block;
  width: 48px;
  height: 48px;
  margin: 10px auto 0;
  object-fit: contain;
}


/* =================================
   FAQ
   Desktop Only
================================= */

.bloomy-top-faq {
  margin-top: 0;
  margin-bottom: 82px;
}

/* =================================
   FAQ Head
================================= */

.bloomy-top-faq .bloomy-top-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto 16px;
}

.bloomy-top-faq .bloomy-top-section-head__main {
  min-width: 0;
}

.bloomy-top-faq__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bloomy-top-faq__flower {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px;
  object-fit: contain;
  transform: rotate(-7deg);
}

.bloomy-top-faq .bloomy-top-section-head__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #17357d;
}

.bloomy-top-faq .bloomy-top-section-head__lead {
  margin: 8px 0 0 50px;
  font-size: 13.5px;
  line-height: 1.65;
  font-weight: 650;
  color: #65779e;
}

.bloomy-top-faq .bloomy-top-section-head__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(47, 126, 247, 0.08);
  color: #2f7ef7;
  font-size: 13.5px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

.bloomy-top-faq .bloomy-top-section-head__link::after {
  content: "→";
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
}

.bloomy-top-faq .bloomy-top-section-head__link:hover {
  background: rgba(47, 126, 247, 0.12);
  opacity: 0.88;
  transform: translateX(2px);
}

/* =================================
   FAQ List
================================= */

.bloomy-top-faq__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1120px;
  margin: 0 auto;
}

/* =================================
   FAQ Item
================================= */

.bloomy-top-faq-item {
  position: relative;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dce8ff;
  box-shadow:
    0 8px 18px rgba(73, 113, 194, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  overflow: hidden;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.bloomy-top-faq-item[open] {
  border-radius: 24px;
  border-color: #d6e4ff;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    0 12px 28px rgba(73, 113, 194, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.bloomy-top-faq-item__summary {
  display: grid;
  grid-template-columns: 42px 1fr 36px;
  align-items: center;
  column-gap: 10px;
  min-height: 50px;
  padding: 0 18px;
  cursor: pointer;
  list-style: none;
}

.bloomy-top-faq-item__summary::-webkit-details-marker {
  display: none;
}

.bloomy-top-faq-item__summary::marker {
  display: none;
  content: "";
}

.bloomy-top-faq-item[open] .bloomy-top-faq-item__summary {
  min-height: 60px;
  padding-top: 6px;
  align-items: center;
}

.bloomy-top-faq-item__q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  margin-top: 0;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2f7ef7;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.bloomy-top-faq-item[open] .bloomy-top-faq-item__q {
  margin-top: 3px;
}

.bloomy-top-faq-item__question {
  display: block;
  min-width: 0;
  color: #17357d;
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bloomy-top-faq-item[open] .bloomy-top-faq-item__question {
  color: #2f7ef7;
}

.bloomy-top-faq-item__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 33px;
  height: 33px;
  margin-top: 0;
  border-radius: 999px;
  background: #eaf3ff;
}

.bloomy-top-faq-item[open] .bloomy-top-faq-item__toggle {
  margin-top: 3px;
}

.bloomy-top-faq-item__toggle::before,
.bloomy-top-faq-item__toggle::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 3px;
  border-radius: 999px;
  background: #2f7ef7;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.bloomy-top-faq-item__toggle::after {
  transform: rotate(90deg);
}

.bloomy-top-faq-item[open] .bloomy-top-faq-item__toggle::after {
  opacity: 0;
  transform: rotate(0deg);
}

/* =================================
   FAQ Answer
================================= */

.bloomy-top-faq-item__answer {
  margin: -0px 86px 20px 70px;
  color: #1d2c4d;
  font-size: 13.5px;
  line-height: 1.85;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.bloomy-top-faq-item:not([open]) .bloomy-top-faq-item__answer {
  display: none;
}

.bloomy-top-faq-item__link {
  color: #2f7ef7;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.bloomy-top-faq-item__link:hover {
  opacity: 0.78;
}

.bloomy-top-faq .bloomy-top-faq-item__answer a.bloomy-top-faq-item__link {
  color: #2457b8 !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(36, 87, 184, 0.34);
  padding-bottom: 1px;
}

.bloomy-top-faq .bloomy-top-faq-item__answer a.bloomy-top-faq-item__link:hover {
  color: #2f7ef7 !important;
  border-bottom-color: rgba(47, 126, 247, 0.62);
}

/* =================================
   Final CTA - Desktop
================================= */

.bloomy-top-final-cta {
  max-width: 1508px;
  margin: 0 auto 32px;
  padding: 0 24px;
}

.bloomy-top-final-cta__inner {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 34px 50px 28px;
  border-radius: 30px;
  background-image:
    linear-gradient(
      90deg,
      rgba(16, 72, 194, 0.98) 0%,
      rgba(21, 86, 208, 0.94) 28%,
      rgba(53, 126, 230, 0.74) 52%,
      rgba(105, 171, 244, 0.56) 76%,
      rgba(190, 225, 255, 0.72) 100%
    ),
    url("https://bloomyesim.com/wp-content/uploads/2026/04/ChatGPT-Image-2026蟷ｴ4譛�27譌･-00_41_32.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  box-shadow:
    0 18px 42px rgba(35, 88, 188, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.bloomy-top-final-cta__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 27% 42%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 28%,
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      90deg,
      rgba(4, 45, 155, 0.16) 0%,
      rgba(4, 45, 155, 0.07) 34%,
      rgba(4, 45, 155, 0.00) 66%
    );
}

.bloomy-top-final-cta__main,
.bloomy-top-final-cta__abroad {
  position: relative;
  z-index: 1;
}

/* 下の留学導線 */
.bloomy-top-final-cta__abroad {
  max-width: 980px;
  margin: 28px auto 0;
}

/* =================================
   Upper Area
================================= */

.bloomy-top-final-cta__main {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: center;
  column-gap: 26px;
}

.bloomy-top-final-cta__mascot {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  transform: translateY(6px);
}

.bloomy-top-final-cta__mascot img {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(11, 47, 132, 0.10));
}

.bloomy-top-final-cta__content {
  max-width: 680px;
  padding-top: 0;
  transform: translateY(6px);
}

.bloomy-top-final-cta__title {
  margin: 0 0 14px;
  color: #fff;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.045em;
  text-shadow: 0 1px 8px rgba(8, 46, 137, 0.12);
}

.bloomy-top-final-cta__lead {
  max-width: 560px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.98);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 4px rgba(8, 46, 137, 0.10);
}

.bloomy-top-final-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 264px;
  height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd66d 0%, #f6be3f 100%);
  color: #123a8d;
  text-decoration: none;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  box-shadow:
    0 8px 16px rgba(26, 71, 159, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.bloomy-top-final-cta__button:hover {
  transform: translateY(-1px);
  filter: brightness(1.015);
  box-shadow:
    0 11px 22px rgba(26, 71, 159, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.bloomy-top-final-cta__button-text {
  display: inline-block;
  transform: translateY(1px);
}

.bloomy-top-final-cta__button-arrow {
  display: inline-block;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-1px);
}

/* =================================
   BLOOM abroad CTA - Inside Banner
================================= */

.bloomy-top-final-cta__abroad {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: calc(100% - 32px);
  min-height: 68px;
  margin: 30px auto 0;
  padding: 12px 28px 12px 22px;
  border-radius: 999px;
  background: rgba(242, 246, 253, 0.94);
  color: inherit;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 2px 8px rgba(40, 85, 170, 0.05);
  backdrop-filter: blur(4px);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.bloomy-top-final-cta__abroad:hover {
  transform: translateY(-1px);
  background: rgba(247, 250, 255, 0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 4px 12px rgba(40, 85, 170, 0.08);
}

.bloomy-top-final-cta__abroad-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #24579f;
  opacity: 0.86;
  transform: translateX(6px);
}

.bloomy-top-final-cta__abroad-icon svg {
  display: block;
  width: 46px;
  height: 46px;
}

.bloomy-top-final-cta__abroad-icon svg rect,
.bloomy-top-final-cta__abroad-icon svg path,
.bloomy-top-final-cta__abroad-icon svg circle,
.bloomy-top-final-cta__abroad-icon svg line {
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.bloomy-top-final-cta__abroad-copy,
.bloomy-top-final-cta__abroad-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bloomy-top-final-cta__abroad-title,
.bloomy-top-final-cta__abroad-text strong {
  display: block;
  margin: 0;
  color: #142f73;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.bloomy-top-final-cta__abroad-desc,
.bloomy-top-final-cta__abroad-text small {
  display: block;
  margin: 0;
  color: #5f6f93;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.bloomy-top-final-cta__abroad-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  color: #2a79ef;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.bloomy-top-final-cta__abroad-link-text {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  transform: translateY(0.5px);
}

.bloomy-top-final-cta__abroad-link-arrow {
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-1px);
}






























































































































































/* =================================
   Responsive
   Bloomy eSIM TOP Page
   Tablet / Mobile Complete
   既存PCデザインの一番下に追加
================================= */


/* =================================
   Responsive Utility
================================= */

.pc-only {
  display: inline;
}

.sp-only {
  display: none;
}

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

  .sp-only {
    display: inline;
  }

  .bloomy-top-hero__title,
  .bloomy-top-section-head__title,
  .bloomy-top-reviews__title,
  .bloomy-top-reasons__title,
  .bloomy-top-howto__title,
  .bloomy-top-final-cta__title {
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-break: strict;
  }

  .bloomy-top-hero__lead,
  .bloomy-top-section-head__lead,
  .bloomy-top-reviews__lead,
  .bloomy-top-reasons__lead,
  .bloomy-top-howto__lead,
  .bloomy-top-final-cta__lead,
  .bloomy-top-final-cta__abroad-desc,
  .bloomy-top-recommend-card__description,
  .bloomy-top-reason-card__text,
  .bloomy-top-review-card__body,
  .bloomy-top-faq-item__question,
  .bloomy-top-faq-item__answer {
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
  }
}


/* =================================
   Tablet
   1024px以下
================================= */

@media (max-width: 1024px) {
  .bloomy-top-page {
    max-width: 100%;
    padding-left: 22px;
    padding-right: 22px;
  }

  .bloomy-top-section-head {
    align-items: flex-start;
  }

  .bloomy-top-section-head__title {
    font-size: 30px;
  }

  .bloomy-top-section-head__lead {
    font-size: 13px;
  }

  /* Hero */
  .bloomy-top-hero {
    margin-top: -76px;
    padding-top: 76px;
    margin-bottom: 22px;
  }

  .bloomy-top-hero::after {
    height: 96px;
  }

  .bloomy-top-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.9fr);
    min-height: 540px;
    gap: 12px;
    padding: 20px 22px 34px;
  }

  .bloomy-top-hero__content {
    max-width: 560px;
  }

  .bloomy-top-hero__title {
    font-size: clamp(38px, 5vw, 52px);
  }

  .bloomy-top-hero__lead {
    max-width: 460px;
    font-size: 14px;
  }

  .bloomy-top-hero__visual {
    min-height: 360px;
  }

  /* Trust Bar */
  .bloomy-top-trustbar__inner {
    padding: 13px 20px 15px;
  }

  .bloomy-top-trustbar__content {
    max-width: 860px;
  }

  .bloomy-top-trustbar__logo-card {
    flex-basis: 84px;
    width: 84px;
  }

  /* Filter */
  .bloomy-top-filter-wrap {
    margin-bottom: 66px;
  }

  .bloomy-top-filter {
    padding: 24px 24px 22px;
    border-radius: 28px;
  }

  .bloomy-top-filter__row {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 14px;
  }


/* Featured */
.bloomy-top-featured {
  margin-bottom: 70px;
}

.bloomy-top-featured-card {
  flex-basis: min(62%, 560px);
}

.bloomy-top-featured__track {
  gap: 18px;
}

.bloomy-top-featured-card__media {
  border-radius: 26px;
}

  /* Recommend */
  .bloomy-top-recommend {
    margin-bottom: 78px;
  }

  .bloomy-top-recommend__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .bloomy-top-recommend-card:nth-child(n + 7) {
    display: none;
  }

  .bloomy-top-recommend-card__body {
    padding: 17px 15px;
  }

  .bloomy-top-recommend-card__country {
    font-size: 17px;
  }

  .bloomy-top-recommend-card__flag {
    width: 54px;
    height: 34px;
    flex-basis: 54px;
  }

  .bloomy-top-recommend-card__spec-value {
    font-size: 16px;
  }

  .bloomy-top-recommend-card__cta {
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
  }

  /* Reviews */
  .bloomy-top-reviews {
    margin-bottom: 78px;
  }

  .bloomy-top-reviews__shell {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 20px;
    padding: 24px;
    border-radius: 32px;
  }

  .bloomy-top-reviews__intro-inner {
    padding: 30px 24px 18px;
  }

  .bloomy-top-reviews__title {
    font-size: 26px;
  }

  .bloomy-top-reviews__bloomy img {
    width: 180px;
  }

  .bloomy-top-review-card__inner {
    min-height: 126px;
    padding: 16px 22px 15px;
  }

  .bloomy-top-review-card__body {
    font-size: 15px;
  }

  /* Reasons */
  .bloomy-top-reasons {
    margin-bottom: 78px;
  }

  .bloomy-top-reasons__grid {
    gap: 14px;
  }

  .bloomy-top-reason-card {
    min-height: 180px;
    padding: 24px 18px 20px;
  }

  .bloomy-top-reason-card__title {
    font-size: 17px;
  }

  .bloomy-top-reason-card__text {
    font-size: 13px;
  }

  /* How To */
  .bloomy-top-howto {
    margin-bottom: 78px;
  }

  .bloomy-top-howto__inner {
    grid-template-columns: 240px 1fr;
    gap: 22px;
    padding: 28px 26px;
  }

  .bloomy-top-howto__title {
    font-size: 30px;
  }

  .bloomy-top-howto__lead {
    font-size: 14px;
  }

  .bloomy-top-howto__bloomy {
    left: 46px;
    width: 150px;
  }

  .bloomy-top-howto__steps {
    grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
    gap: 12px;
  }

  .bloomy-top-howto-step {
    height: 224px;
    padding: 32px 14px 0;
  }

  .bloomy-top-howto-step__title {
    font-size: 15px;
  }

  .bloomy-top-howto-step:nth-of-type(2) .bloomy-top-howto-step__title {
    font-size: 15px;
  }

  .bloomy-top-howto-step__text {
    font-size: 11.5px;
  }

  .bloomy-top-howto-phone {
    width: 76px;
    height: 112px;
  }

  /* FAQ */
  .bloomy-top-faq {
    margin-bottom: 74px;
  }

  .bloomy-top-faq-item__summary {
    padding-left: 24px;
    padding-right: 22px;
  }

  .bloomy-top-faq-item__answer {
    margin-right: 74px;
  }

  /* Final CTA */
  .bloomy-top-final-cta {
    margin-bottom: 32px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .bloomy-top-final-cta__inner {
    min-height: 320px;
    padding: 32px 42px 26px;
    border-radius: 28px;
    background-position: center center;
  }

  .bloomy-top-final-cta__main {
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: 22px;
  }

  .bloomy-top-final-cta__mascot img {
    width: 160px;
  }

  .bloomy-top-final-cta__title {
    font-size: 36px;
  }

  .bloomy-top-final-cta__lead {
    font-size: 14px;
  }

  .bloomy-top-final-cta__button {
    width: 248px;
    height: 52px;
    font-size: 16px;
  }

  .bloomy-top-final-cta__abroad {
    width: calc(100% - 12px);
    margin-top: 28px;
    padding-right: 24px;
  }
}


/* =================================
   Tablet Small
   900px以下
================================= */

@media (max-width: 900px) {
  .bloomy-top-page {
    padding-left: 20px;
    padding-right: 20px;
  }

  .bloomy-top-section-head {
    display: block;
    margin-bottom: 18px;
  }

  .bloomy-top-section-head__title {
    font-size: 28px;
  }

  /* Hero */
  .bloomy-top-hero__inner {
    grid-template-columns: 1fr;
    min-height: 560px;
    align-content: center;
    padding: 38px 24px 54px;
  }

  .bloomy-top-hero__content {
    max-width: 560px;
  }

  .bloomy-top-hero__visual {
    display: none;
  }

  .bloomy-top-hero__bg-sky {
    background-size: cover;
    background-position: 62% top;
  }

  .bloomy-top-hero__title {
    max-width: 560px;
  }

  .bloomy-top-hero__lead {
    max-width: 440px;
  }

  /* Trust Bar */
  .bloomy-top-trustbar__title {
    font-size: 17px;
  }

  .bloomy-top-trustbar__logos {
    gap: 8px;
  }

  .bloomy-top-trustbar__logo-card {
    flex-basis: 74px;
    width: 74px;
    height: 32px;
  }

  /* Filter */
  .bloomy-top-filter__row {
    grid-template-columns: 1fr;
  }

  .bloomy-top-filter__submit {
    width: 100%;
  }

  /* Featured */
  .bloomy-top-featured__slider {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .bloomy-top-featured__nav {
    width: 38px;
    height: 38px;
    font-size: 24px;
  }

  .bloomy-top-featured-card {
    flex-basis: min(86%, 620px);
  }

  /* Recommend */
  .bloomy-top-recommend__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bloomy-top-recommend-card:nth-child(n + 7) {
    display: flex;
  }

  /* Reviews */
  .bloomy-top-reviews__shell {
    grid-template-columns: 1fr;
  }

  .bloomy-top-reviews__intro-inner {
    min-height: auto;
    padding: 28px 26px 10px;
    text-align: left;
  }

  .bloomy-top-reviews__bloomy {
    padding-top: 18px;
    transform: none;
  }

  .bloomy-top-reviews__bloomy img {
    width: 160px;
  }

  .bloomy-top-reviews__cards {
    grid-template-rows: none;
  }

   /* Reasons */
  .bloomy-top-reasons__grid {
    grid-template-columns: 1fr;
  }

  .bloomy-top-reason-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: flex-start;
    column-gap: 18px;
    row-gap: 0;
    min-height: auto;
    padding: 22px 24px;
    text-align: left;
  }

  .bloomy-top-reason-card__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
  }

  .bloomy-top-reason-card__title {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .bloomy-top-reason-card__text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 5px;
  }

  /* How To */
  .bloomy-top-howto__inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .bloomy-top-howto__intro {
    min-height: 170px;
    padding-right: 190px;
  }

  .bloomy-top-howto__bloomy {
    left: auto;
    right: 18px;
    bottom: -10px;
    width: 160px;
  }

  .bloomy-top-howto__steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .bloomy-top-howto__arrow {
    width: 24px;
    height: 24px;
    margin: -4px auto;
    transform: rotate(90deg);
  }

  .bloomy-top-howto-step {
    height: auto;
    min-height: 190px;
    padding: 30px 20px 20px;
  }

  /* Final CTA */
  .bloomy-top-final-cta__inner {
    min-height: auto;
  }

  .bloomy-top-final-cta__main {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .bloomy-top-final-cta__mascot img {
    width: 124px;
  }

  .bloomy-top-final-cta__title {
    font-size: 32px;
  }

  .bloomy-top-final-cta__abroad {
    grid-template-columns: 48px minmax(0, 1fr);
    row-gap: 12px;
  }

  .bloomy-top-final-cta__abroad-link {
    grid-column: 2;
    justify-self: start;
  }
}


/* =================================
   Mobile
   767px以下
================================= */

@media (max-width: 767px) {
  body,
  #content,
  .l-content,
  .p-content {
    background: #f3f6fc;
  }

  .bloomy-top-page {
    max-width: 520px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .bloomy-top-section-head {
    margin-bottom: 16px;
  }

  .bloomy-top-section-head__eyebrow {
    margin-bottom: 5px;
    font-size: 11px;
  }

  .bloomy-top-section-head__title,
  .bloomy-top-featured .bloomy-top-section-head__title,
  .bloomy-top-reasons__title,
  .bloomy-top-howto__title {
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.03em;
  }

  .bloomy-top-section-head__lead,
  .bloomy-top-reasons__lead {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.7;
  }

  /* =================================
     Mobile Hero
  ================================= */

  .bloomy-top-hero {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 16px;
    background: #eaf2ff;
  }

  .bloomy-top-hero::after {
    height: 86px;
  }

.bloomy-top-hero__bg-sky {
  background-image: url("https://bloomyesim.com/wp-content/uploads/2026/06/モバイル背景.webp");
  background-size: auto 108%;
  background-position: 55% top;
  background-repeat: no-repeat;
}

  .bloomy-top-hero__inner {
    min-height: 540px;
    padding: 94px 18px 34px;
    align-items: start;
    align-content: start;
  }

  .bloomy-top-hero__content {
    max-width: 100%;
    align-self: start;
  }


.bloomy-top-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin-bottom: 13px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.40);
  border: none;
  box-shadow: 0 4px 10px rgba(100, 136, 210, 0.06);
  color: #536db2;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

  .bloomy-top-hero__title {
    max-width: 330px;
    margin-bottom: 18px;
    font-size: 34px;
    line-height: 1.14;
    letter-spacing: -0.04em;
  }

  .bloomy-top-hero__lead {
    max-width: 300px;
    margin-bottom: 22px;
    font-size: 12.5px;
    line-height: 1.75;
  }

  .bloomy-top-hero__cta {
    min-height: 46px;
    padding: 0 18px;
    font-size: 13px;
    box-shadow: 0 10px 18px rgba(255, 186, 24, 0.22);
  }

  .bloomy-top-hero__cta-icon {
    width: 20px;
    font-size: 18px;
  }

  /* =================================
     Mobile Trust Bar
  ================================= */

  .bloomy-top-trustbar {
    margin-top: -2px;
  }

  .bloomy-top-trustbar__inner {
    padding: 11px 12px 13px;
  }

  .bloomy-top-trustbar__title {
    margin-bottom: 8px;
    font-size: 13px;
    white-space: normal;
  }

  .bloomy-top-trustbar__logos {
    gap: 6px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .bloomy-top-trustbar__logos::-webkit-scrollbar {
    display: none;
  }

  .bloomy-top-trustbar__logo-card {
    flex: 0 0 64px;
    width: 64px;
    height: 28px;
    border-radius: 8px;
  }

  .bloomy-top-trustbar__logo-card--visa img {
    height: 14px;
  }

  .bloomy-top-trustbar__logo-card--mastercard img,
  .bloomy-top-trustbar__logo-card--jcb img,
  .bloomy-top-trustbar__logo-card--googlepay img {
    height: 20px;
  }

  .bloomy-top-trustbar__logo-card--amex img {
    height: 22px;
  }

  .bloomy-top-trustbar__logo-card--applepay img {
    height: 25px;
  }

  /* =================================
     Mobile Filter
  ================================= */

  .bloomy-top-filter-wrap {
    margin-bottom: 54px;
  }

  .bloomy-top-filter {
    padding: 20px 16px 18px;
    border-radius: 24px;
    box-shadow: 0 10px 22px rgba(22, 43, 99, 0.055);
  }

  .bloomy-top-filter-head {
    display: block;
    margin-bottom: 14px;
  }

  .bloomy-top-filter-head__title {
    font-size: 15px;
  }

  .bloomy-top-filter__row {
    margin-bottom: 18px;
  }

  .bloomy-top-searchbar {
    min-height: 46px;
    padding: 7px 18px 7px 48px;
    border-radius: 13px;
    align-items: center;
  }

  .bloomy-top-searchbar::before {
    left: 18px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 22px;
  }

  .bloomy-top-searchbar__placeholder {
    left: 48px;
    right: 18px;
    max-width: calc(100% - 66px);
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bloomy-top-searchbar__input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    min-height: 30px;
    font-size: 14px;
    line-height: 1.45;
  }

  .bloomy-top-searchbar__clear-input {
    right: 12px;
  }

  .bloomy-top-selected-chip {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .bloomy-top-selected-chip__emoji {
    font-size: 15px;
  }

  .bloomy-top-searchbar__suggestions {
    max-height: 260px;
    border-radius: 18px;
  }

  .bloomy-top-filter__submit {
    width: 95%;
    margin: 0 auto;
    min-height: 48px;
    border-radius: 18px;
  }


  .bloomy-top-filter__submit-icon {
    font-size: 20px;
  }

  .bloomy-top-filter__popular {
    margin-bottom: 17px;
  }

  .bloomy-top-filter__popular-title,
  .bloomy-top-filter__areas-title {
    margin-bottom: 10px;
    font-size: 13px;
  }

  .bloomy-top-filter__chips,
  .bloomy-top-filter__areas {
    gap: 8px;
  }

  .bloomy-top-chip-button,
  .bloomy-top-area-button {
    min-height: 36px;
    padding: 0 12px;
    gap: 7px;
  }

  .bloomy-top-chip-button {
    font-size: 12px;
  }

  .bloomy-top-chip-button__emoji {
    font-size: 17px;
  }

  .bloomy-top-area-button__label {
    font-size: 12px;
  }

  .bloomy-top-area-button__meta {
    display: none;
  }

  .bloomy-top-filter__bottom {
    margin-top: 14px;
  }

  .bloomy-top-filter__clear {
    font-size: 12px;
  }

/* =================================
   Mobile Featured
   Modern Campaign Card UI
================================= */

.bloomy-top-featured {
  margin-bottom: 58px;
}

.bloomy-top-featured .bloomy-top-section-head {
  display: block;
  margin-bottom: 18px;
}

.bloomy-top-featured .bloomy-top-section-head__eyebrow {
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 850;
  color: #4f7ff3;
}

.bloomy-top-featured .bloomy-top-section-head__title {
  font-size: 29px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.055em;
}

.bloomy-top-featured .bloomy-top-section-head__lead {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.75;
  font-weight: 750;
}

.bloomy-top-featured__slider {
  display: block;
  position: relative;
}

.bloomy-top-featured__nav {
  display: none;
}

.bloomy-top-featured__viewport {
  overflow: visible;
  padding: 0;
}

.bloomy-top-featured__track {
  width: auto;
  min-width: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 14px 8px;
  margin-left: -14px;
  margin-right: -14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bloomy-top-featured__track::-webkit-scrollbar {
  display: none;
}

.bloomy-top-featured-card {
  flex: 0 0 88%;
  scroll-snap-align: center;
}

.bloomy-top-featured-card__link {
  border-radius: 22px;
}

.bloomy-top-featured-card__media {
  border-radius: 22px;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}

.bloomy-top-featured-card__media::before {
  content: none;
  display: none;
  box-shadow: none;
}

.bloomy-top-featured-card__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bloomy-top-featured__dots {
  margin-top: 8px;
  gap: 9px;
}

.bloomy-top-featured__dots span {
  width: 8px;
  height: 8px;
  background: #d7e3fb;
}

.bloomy-top-featured__dots span.is-active {
  width: 28px;
}

  /* =================================
     Mobile Recommend
  ================================= */

  .bloomy-top-recommend {
    position: relative;
    background: #f3f6fc;
  }

  .bloomy-top-recommend::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    z-index: 3;
    width: 100vw;
    height: 6px;
    transform: translateX(-50%);
    background: #f3f6fc;
    pointer-events: none;
  }

  .bloomy-top-recommend__slider,
  .bloomy-top-recommend__grid,
  .bloomy-top-recommend-card,
  .bloomy-top-recommend-card__link {
    border-bottom: 0;
    outline: 0;
  }

  .bloomy-top-recommend__tabs {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 16px -14px 12px;
    padding: 0 14px 10px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
  }

  .bloomy-top-recommend__tabs::-webkit-scrollbar {
    display: none;
  }

  .bloomy-top-recommend__tab {
    flex: 0 0 auto;
    padding: 9px 13px;
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(83, 114, 188, 0.05);
  }

  .bloomy-top-recommend__tab.is-active {
    box-shadow: 0 6px 14px rgba(45, 119, 246, 0.14);
  }

  .bloomy-top-recommend__tab:hover {
    transform: none;
  }

  .bloomy-top-recommend__slider {
    width: 100%;
    overflow: visible;
  }

  .bloomy-top-recommend__grid {
    --recommend-card-gap: 14px;
    --recommend-edge-gap: 10px;
    --recommend-card-width: 78%;

    display: flex;
    grid-template-columns: none;
    gap: var(--recommend-card-gap);
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 2px var(--recommend-edge-gap) 10px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--recommend-edge-gap);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bloomy-top-recommend__grid::-webkit-scrollbar {
    display: none;
  }

  .bloomy-top-recommend-card {
    flex: 0 0 var(--recommend-card-width);
    max-width: var(--recommend-card-width);
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .bloomy-top-recommend-card:first-child {
    scroll-snap-align: start;
  }

  .bloomy-top-recommend-card:last-child {
    scroll-snap-align: end;
  }

  .bloomy-top-recommend-card:nth-child(n + 7) {
    display: flex;
  }

  .bloomy-top-recommend-card__link {
    width: 100%;
    border-radius: 24px;
  }

  .bloomy-top-recommend-card__thumb {
    aspect-ratio: 1.75 / 1;
  }

  .bloomy-top-recommend-card__body {
    padding: 16px 14px;
  }

  .bloomy-top-recommend-card__country-wrap {
    gap: 9px;
  }

  .bloomy-top-recommend-card__flag {
    width: 50px;
    height: 31px;
    flex-basis: 50px;
    border-radius: 8px;
  }

  .bloomy-top-recommend-card__country {
    font-size: 16px;
  }

  .bloomy-top-recommend-card__description {
    margin-top: 10px;
    font-size: 11.5px;
  }

  .bloomy-top-recommend-card__spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    text-align: center;
  }

  .bloomy-top-recommend-card__spec-label {
    position: relative;
    left: -2px;
    justify-content: center;
    width: 100%;
    gap: 4px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -0.01em;
    text-align: center;
  }

  .bloomy-top-recommend-card__spec-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .bloomy-top-recommend-card__spec-value {
    width: 100%;
    margin-top: 5px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: -0.03em;
    text-align: center;
  }

  .bloomy-top-recommend-card__actions {
    gap: 8px;
    padding-top: 12px;
  }

  .bloomy-top-recommend-card__detail {
    min-height: 36px;
    font-size: 10.5px;
  }

  .bloomy-top-recommend-card__cta {
    min-height: 38px;
    padding: 0 12px;
    font-size: 11.5px;
  }

  /* =================================
     Mobile Reviews
  ================================= */

  .bloomy-top-reviews {
    margin-top: 0;
    margin-bottom: 62px;
  }

  .bloomy-top-reviews__shell {
    display: block;
    padding: 18px 16px 16px;
    border-radius: 26px;
  }

  .bloomy-top-reviews__intro {
    min-width: 0;
  }

  .bloomy-top-reviews__intro-inner {
    display: block;
    min-height: auto;
    padding: 16px 10px 10px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .bloomy-top-reviews__label {
    display: none;
  }

  .bloomy-top-reviews__label-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
  }

  .bloomy-top-reviews__title {
    margin: 0 0 12px;
    font-size: 23px;
    line-height: 1.35;
    letter-spacing: -0.045em;
  }

  .bloomy-top-reviews__lead {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
  }

  .bloomy-top-reviews__bloomy {
    display: flex;
    justify-content: center;
    margin-top: 0;
    padding-top: 14px;
    transform: none;
  }

  .bloomy-top-reviews__bloomy img {
    width: 132px;
  }

  .bloomy-top-reviews__cards {
    display: grid;
    grid-template-rows: none;
    gap: 10px;
    margin-top: 4px;
  }

  .bloomy-top-review-card {
    min-width: 0;
  }

  .bloomy-top-review-card__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: auto;
    height: auto;
    padding: 15px 16px 14px;
    border-radius: 20px;
  }

  .bloomy-top-review-card__tag {
    min-height: 27px;
    margin: 0 0 10px;
    padding: 0 11px;
    font-size: 11.5px;
  }

  .bloomy-top-review-card__body {
    margin: 0 0 9px;
    font-size: 14px;
    line-height: 1.65;
  }

  .bloomy-top-review-card__meta {
    gap: 8px;
    min-height: 21px;
    padding-top: 9px;
  }

  .bloomy-top-review-card__meta-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
  }

  .bloomy-top-review-card__meta-text {
    font-size: 11px;
    line-height: 1.5;
  }
}

/* =================================
   Mobile Reasons
================================= */

@media (max-width: 767px) {
  .bloomy-top-reasons {
    margin-bottom: 62px;
  }

  .bloomy-top-reasons__head {
    margin-bottom: 18px;
  }

  .bloomy-top-reasons__title {
    font-size: 27px;
    line-height: 1.22;
    letter-spacing: -0.045em;
  }

  .bloomy-top-reasons__lead {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.75;
    font-weight: 700;
    color: #6377a4;
  }

  .bloomy-top-reasons__grid {
    position: relative;
    display: block;
    padding: 8px 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #dbe8ff;
    box-shadow:
      0 14px 30px rgba(73, 113, 194, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    overflow: hidden;
  }

  .bloomy-top-reason-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 0;
    align-items: start;
    min-height: 104px;
    padding: 14px 18px 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }

  .bloomy-top-reason-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
  }

  .bloomy-top-reason-card:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 80px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: #e2ebfb;
  }

  .bloomy-top-reason-card:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 41px;
    top: 58px;
    bottom: -8px;
    width: 1px;
    background: linear-gradient(
      to bottom,
      #d7e6ff 0%,
      rgba(215, 230, 255, 0.35) 100%
    );
  }

  .bloomy-top-reason-card__icon {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 17px;
    background-color: #edf5ff;
    border: 1px solid #d6e5ff;
    background-size: 25px 25px;
  }

  .bloomy-top-reason-card__title {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding: 0;
    font-size: 15.5px;
    line-height: 1.28;
    font-weight: 850;
    letter-spacing: -0.035em;
    color: #1d63df;
  }

  .bloomy-top-reason-card__text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 5px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.58;
    font-weight: 650;
    color: #62739a;
  }

  .bloomy-top-reason-card__text br {
    display: block;
  }

  .bloomy-top-reasons__cta-wrap {
    margin-top: 26px;
    padding-top: 12px;
  }

  .bloomy-top-reasons__cta-badge {
    min-height: 21px;
    padding: 0 10px;
    font-size: 10px;
  }

  .bloomy-top-reasons__cta {
    width: calc(100% - 74px);
    max-width: 330px;
    min-height: 58px;
    padding: 0 14px;
    gap: 8px;
    border-width: 1.5px;
  }

  .bloomy-top-reasons__cta-icon {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }

  .bloomy-top-reasons__cta-copy {
    font-size: 12.5px;
  }

  .bloomy-top-reasons__cta-strong {
    font-size: 13.5px;
  }

  .bloomy-top-reasons__cta-arrow {
    width: 26px;
    height: 26px;
    font-size: 18px;
  }
}
/* =================================
   Mobile How To
   Compact Version
================================= */

@media (max-width: 767px) {
  .bloomy-top-howto {
    margin-bottom: 62px;
  }

  .bloomy-top-howto__inner {
    display: block;
    padding: 24px 18px 24px;
    border-radius: 28px;
  }

  .bloomy-top-howto__intro {
    padding: 0;
    margin-bottom: 18px;
  }

  .bloomy-top-howto__badge {
    min-height: 30px;
    margin-bottom: 12px;
    padding: 0 18px;
    font-size: 13px;
  }

  .bloomy-top-howto__title {
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: -0.055em;
  }

  .bloomy-top-howto__title br {
    display: none;
  }

  .bloomy-top-howto__lead {
    max-width: none;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.7;
    font-weight: 750;
  }

  .bloomy-top-howto__lead br {
    display: none;
  }

  .bloomy-top-howto__bloomy {
    display: none;
  }

  .bloomy-top-howto__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bloomy-top-howto__arrow {
    display: none;
  }

  .bloomy-top-howto-step {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 58px;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    height: auto;
    padding: 14px 14px;
    border-radius: 22px;
    text-align: left;
    overflow: visible;
  }

  .bloomy-top-howto-step__num {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    font-size: 15px;
    box-shadow:
      0 8px 16px rgba(73, 113, 194, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.34);
  }

  .bloomy-top-howto-step__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.035em;
    text-align: left;
  }

  .bloomy-top-howto-step__text {
    grid-column: 2;
    grid-row: 2;
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    font-weight: 700;
    text-align: left;
  }

  .bloomy-top-howto-step__text br {
    display: none;
  }

  .bloomy-top-howto-phone {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    width: 46px;
    height: 68px;
    margin: 0;
    border-width: 3px;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
  }

  .bloomy-top-howto-phone__notch {
    width: 19px;
    height: 8px;
    border-radius: 0 0 7px 7px;
  }

  /* スマホ画面内の中身を少し下げる */
  .bloomy-top-howto-phone__screen {
    inset: 21px 8px 8px;
  }

  .bloomy-top-howto-phone__line {
    height: 7px;
    margin-bottom: 7px;
  }

  .bloomy-top-howto-phone__line::before {
    left: 4px;
    width: 7px;
    height: 7px;
  }

  .bloomy-top-howto-phone__qr,
  .bloomy-top-howto-phone__wifi {
    display: none;
  }

  .bloomy-top-howto-phone__qr-img {
    display: block;
    width: 34px;
    height: 34px;
    margin: 3px auto 0;
    padding: 3px;
    border-radius: 5px;
    background: #ffffff;
    object-fit: contain;
    box-shadow: 0 0 0 1px rgba(16, 44, 112, 0.08);
  }

  .bloomy-top-howto-phone__wifi-img {
    display: block;
    width: 31px;
    height: 31px;
    margin: 6px auto 0;
    object-fit: contain;
  }
}

  /* =================================
     Mobile FAQ
  ================================= */

  .bloomy-top-faq {
    margin-bottom: 60px;
  }

  .bloomy-top-faq__list {
    display: grid;
    gap: 10px;
  }

  .bloomy-top-faq-item {
    border-radius: 18px;
  }

  .bloomy-top-faq-item__summary {
    min-height: 58px;
    padding: 14px 14px;
    gap: 10px;
  }

  .bloomy-top-faq-item__q {
    font-size: 13px;
  }

  .bloomy-top-faq-item__question {
    font-size: 13px;
    line-height: 1.55;
  }

  .bloomy-top-faq-item__toggle {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .bloomy-top-faq-item__answer {
    margin: -6px 16px 16px 42px;
    font-size: 12.5px;
    line-height: 1.85;
  }

/* =================================
   Mobile Final CTA
================================= */

@media (max-width: 767px) {
  .bloomy-top-final-cta {
    margin-bottom: 28px;
    padding-left: 0;
    padding-right: 0;
  }

  .bloomy-top-final-cta__inner {
    min-height: auto;
    padding: 24px 18px 18px;
    border-radius: 26px;
    background-position: 58% center;
  }

  .bloomy-top-final-cta__inner::before {
    background:
      linear-gradient(
        90deg,
        rgba(4, 45, 155, 0.52) 0%,
        rgba(4, 45, 155, 0.30) 46%,
        rgba(4, 45, 155, 0.06) 100%
      );
  }

  .bloomy-top-final-cta__main {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
  }

  .bloomy-top-final-cta__mascot {
    transform: translate(6px, 2px);
  }

  .bloomy-top-final-cta__mascot img {
    width: 82px;
  }

  .bloomy-top-final-cta__content {
    transform: none;
  }

  .bloomy-top-final-cta__title {
    margin-bottom: 10px;
    font-size: 23px;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.04em;
  }

  .bloomy-top-final-cta__lead {
    max-width: 100%;
    margin-bottom: 15px;
    font-size: 11.5px;
    line-height: 1.65;
    font-weight: 700;
  }

  .bloomy-top-final-cta__button {
    width: auto;
    min-width: 196px;
    height: 46px;
    gap: 13px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 800;
  }

  .bloomy-top-final-cta__button-arrow {
    font-size: 21px;
    line-height: 1;
    transform: translateY(-1px);
  }

  .bloomy-top-final-cta__abroad {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: auto;
    margin-top: 20px;
    padding: 16px 16px 17px;
    gap: 12px;
    border-radius: 22px;
  }

  .bloomy-top-final-cta__abroad-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 40px;
    height: 40px;
    transform: translateX(-2px);
  }

  .bloomy-top-final-cta__abroad-icon svg {
    width: 40px;
    height: 40px;
  }

  .bloomy-top-final-cta__abroad-copy,
  .bloomy-top-final-cta__abroad-text {
    grid-column: 2;
    min-width: 0;
  }

  .bloomy-top-final-cta__abroad-title,
  .bloomy-top-final-cta__abroad-text strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 800;
  }

  .bloomy-top-final-cta__abroad-desc,
  .bloomy-top-final-cta__abroad-text small {
    display: block;
    max-width: 100%;
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.bloomy-top-final-cta__abroad-link {
  grid-column: 2;
  justify-self: end;
  align-self: start;
  width: fit-content;
  max-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: -2px;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(47, 126, 247, 0.08);
  font-size: 11.5px;
  line-height: 1.35;
  white-space: nowrap;
}

  .bloomy-top-final-cta__abroad-link-text {
    font-size: 11.5px;
    font-weight: 800;
  }

  .bloomy-top-final-cta__abroad-link-arrow {
    font-size: 17px;
    line-height: 1;
    transform: translateY(-1px);
  }
}

/* =================================
   Small Mobile
   420px以下
================================= */

@media (max-width: 420px) {
  .bloomy-top-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .bloomy-top-section-head__title,
  .bloomy-top-featured .bloomy-top-section-head__title,
  .bloomy-top-reasons__title,
  .bloomy-top-howto__title {
    font-size: 22px;
  }

  .bloomy-top-hero__inner {
    min-height: 510px;
    padding: 158px 16px 34px;
  }

  .bloomy-top-hero__title {
    max-width: 300px;
    font-size: 30px;
  }

  .bloomy-top-hero__lead {
    max-width: 280px;
    font-size: 12px;
  }

  .bloomy-top-hero__cta {
    min-height: 44px;
    font-size: 12.5px;
  }

  .bloomy-top-filter {
    padding: 18px 16px 16px;
  }

  .bloomy-top-searchbar {
    border-radius: 18px;
  }

  .bloomy-top-chip-button,
  .bloomy-top-area-button {
    min-height: 34px;
    padding: 0 10px;
  }

  .bloomy-top-featured-card {
    flex-basis: 91%;
  }

.bloomy-top-featured-card__media::before {
  content: none;
  display: none;
  box-shadow: none;
}

  .bloomy-top-recommend-card {
    flex-basis: 88%;
  }

  .bloomy-top-featured-card__link:hover .bloomy-top-featured-card__media {
    transform: none;
    box-shadow: none;
  }

  .bloomy-top-featured-card__link:hover .bloomy-top-featured-card__media img {
    transform: none;
  }
  .bloomy-top-recommend-card__body {
    padding: 14px 13px;
  }

  .bloomy-top-recommend-card__country {
    font-size: 15px;
  }

  .bloomy-top-recommend-card__specs {
    gap: 4px;
  }

  .bloomy-top-recommend-card__spec-value {
    font-size: 14px;
  }

  .bloomy-top-recommend-card__cta {
    padding: 0 10px;
    font-size: 11px;
  }

  .bloomy-top-reviews__shell {
    padding: 18px 14px 16px;
  }

  .bloomy-top-reviews__intro-inner {
    padding: 16px 8px 12px;
  }

  .bloomy-top-reviews__title {
    font-size: 21px;
  }

  .bloomy-top-reviews__bloomy img {
    width: 126px;
  }

  .bloomy-top-review-card__body {
    font-size: 13px;
  }
}

/* =================================
   Small Mobile Reasons
================================= */

@media (max-width: 420px) {
  .bloomy-top-reason-card {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 0;
    min-height: 100px;
    padding: 13px 14px 12px;
  }

  .bloomy-top-reason-card__icon {
    width: 46px;
    height: 46px;
    background-size: 24px 24px;
    border-radius: 16px;
  }

  .bloomy-top-reason-card__icon::after {
    content: none;
    display: none;
  }

  .bloomy-top-reason-card:not(:last-child)::before {
    left: 37px;
    top: 56px;
    bottom: -8px;
  }

  .bloomy-top-reason-card:not(:last-child)::after {
    left: 72px;
    right: 14px;
  }

  .bloomy-top-reason-card__title {
    font-size: 14.5px;
    line-height: 1.28;
  }

  .bloomy-top-reason-card__text {
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.58;
  }

  .bloomy-top-reasons__cta {
    width: calc(100% - 24px);
    max-width: 360px;
    min-height: 60px;
    padding: 0 12px;
    gap: 8px;
  }

  .bloomy-top-reasons__cta-icon {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }

  .bloomy-top-reasons__cta-copy {
    font-size: 12px;
  }

  .bloomy-top-reasons__cta-strong {
    font-size: 13.5px;
  }

  .bloomy-top-reasons__cta-arrow {
    width: 26px;
    height: 26px;
    margin-left: 2px;
    font-size: 19px;
  }
}

/* =================================
   Small Mobile How To
   Override Fix
================================= */

@media (max-width: 420px) {
  .bloomy-top-howto__inner {
    padding: 22px 14px 22px;
  }

  .bloomy-top-howto__title {
    font-size: 24px;
  }

  .bloomy-top-howto__lead {
    font-size: 12px;
  }

  .bloomy-top-howto-step {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    min-width: 0;
    min-height: 92px;
    height: auto;
    padding: 14px 12px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(218, 230, 250, 0.96);
    box-shadow:
      0 8px 18px rgba(73, 113, 194, 0.052),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    text-align: left;
    overflow: hidden;
  }

  .bloomy-top-howto-step__num {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: linear-gradient(180deg, #88b7ff 0%, #6ea1f7 100%);
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    transform: none;
    box-shadow:
      0 8px 16px rgba(73, 113, 194, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.34);
  }

  .bloomy-top-howto-step__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-align: left;
  }

  .bloomy-top-howto-step__text {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin: 3px 0 0;
    font-size: 11px;
    line-height: 1.55;
    font-weight: 700;
    text-align: left;
  }

  .bloomy-top-howto-step__text br {
    display: none;
  }

  .bloomy-top-howto-phone {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: center;
    align-self: center;
    width: 42px;
    height: 62px;
    margin: 0;
    border-width: 3px;
    border-bottom: 0;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
  }

  .bloomy-top-howto-phone__screen {
    inset: 20px 7px 7px;
  }

  .bloomy-top-howto-phone__qr-img {
    width: 30px;
    height: 30px;
    margin-top: 3px;
    padding: 3px;
  }

  .bloomy-top-howto-phone__wifi-img {
    width: 28px;
    height: 28px;
    margin-top: 5px;
  }
}


/* =================================
   Very Small Mobile
   360px以下
================================= */

@media (max-width: 360px) {
  .bloomy-top-hero__title {
    font-size: 27px;
  }

  .bloomy-top-hero__lead {
    font-size: 11.5px;
  }

  .bloomy-top-filter {
    border-radius: 22px;
  }

  .bloomy-top-featured-card {
    flex-basis: 92%;
  }

  .bloomy-top-recommend-card {
    flex-basis: 88%;
  }

  .bloomy-top-final-cta__main {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .bloomy-top-final-cta__mascot {
    display: none;
  }

  .bloomy-top-final-cta__button {
    width: 100%;
  }
}

/* =================================
   Mobile No Horizontal Shift
================================= */

@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .bloomy-top-page {
    max-width: 100%;
    overflow-x: visible;
  }
}

/* =================================
   Mobile Hero
   More Compact Height / Full Background
================================= */

@media (max-width: 767px) {
  .bloomy-top-hero {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: -76px !important;
    padding-top: 76px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    background-color: #eaf2ff !important;
    background-image: none !important;
  }

  .bloomy-top-hero__bg {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

@media (max-width: 767px) {
  .bloomy-top-hero .bloomy-top-hero__bg-sky {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    background-image:
      linear-gradient(
        to bottom,
        rgba(243, 246, 252, 0) 0%,
        rgba(243, 246, 252, 0.06) 24%,
        rgba(243, 246, 252, 0.22) 42%,
        rgba(243, 246, 252, 0.52) 60%,
        rgba(243, 246, 252, 0.82) 76%,
        rgba(243, 246, 252, 1) 88%,
        rgba(243, 246, 252, 1) 100%
      ),
      url("https://bloomyesim.com/wp-content/uploads/2026/06/モバイル背景.webp") !important;
    background-size:
      100% 100%,
      132% auto !important;
      background-position:
        center bottom,
        calc(58% - 30px) -55px !important;
    background-repeat:
      no-repeat,
      no-repeat !important;
  }
}

  .bloomy-top-hero__inner {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 390px !important;
    padding: 98px 22px 24px !important;
  }

  .bloomy-top-hero__content {
    max-width: 100% !important;
  }

  .bloomy-top-hero__visual {
    display: none !important;
  }

  .bloomy-top-hero::after {
    z-index: 1 !important;
    height: 70px !important;
  }
}
















/* =================================
   Mobile Filter Button Text Fix
   Variable Country Pills / Area Meta Visible
   Trustbar Stable
================================= */

@media (max-width: 767px) {
  /* ---------------------------------
     Country Chips
     見本のように文字量に応じて幅を変える
  --------------------------------- */

  .bloomy-top-filter__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 10px;
    width: 100%;
  }

  .bloomy-top-chip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 36px;

    padding: 0 13px;
    gap: 7px;

    border-radius: 10px;
    border: 1px solid #d8e4f6;
    background: #ffffff;

    color: #12234f;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.035em;
    white-space: nowrap;

    box-shadow: 0 3px 8px rgba(41, 72, 130, 0.025);
    overflow: hidden;
  }

  .bloomy-top-chip-button__emoji {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
  }

  .bloomy-top-chip-button__text {
    display: inline-block;
    min-width: 0;
    max-width: none;

    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;

    letter-spacing: -0.035em;
  }

  .bloomy-top-chip-button:has(.bloomy-top-chip-button__text) {
    justify-content: center;
  }

  /* ---------------------------------
     Multi Country Buttons
     下のグレー詳細を見本通り表示し、切れにくくする
  --------------------------------- */

  .bloomy-top-filter__areas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .bloomy-top-area-button {
    min-width: 0;
    grid-template-columns: 21px minmax(0, 1fr);
    min-height: 50px;
    padding: 7px 6px;
    gap: 5px;
    align-items: center;
  }

  .bloomy-top-area-button__body {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .bloomy-top-area-button__label {
    font-size: 11.1px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.045em;
    white-space: nowrap;
  }

  .bloomy-top-area-button__meta {
    display: block;
    font-size: 8.6px;
    line-height: 1.2;
    font-weight: 650;
    color: #6b7893;
    letter-spacing: -0.06em;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  .bloomy-top-area-button__icon,
  .bloomy-top-area-button__icon img {
    width: 21px;
    height: 21px;
  }

  /* ---------------------------------
     Trust Bar Stable
     3列固定・ボタンっぽさを抑える
     アイコンを少し大きめに調整
  --------------------------------- */

  .bloomy-top-trustbar {
    margin-top: 12px;
  }

  .bloomy-top-trustbar__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-height: auto;
    padding: 12px 6px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(214, 226, 248, 0.95);
    box-shadow:
      0 10px 24px rgba(26, 56, 112, 0.07),
      0 1px 0 rgba(255, 255, 255, 0.92) inset;
  }

  .bloomy-top-trustbar__payments {
    display: none !important;
  }

  .bloomy-top-trustbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-width: 0;
    width: 100%;
    height: 100%;

    gap: 4px;
    padding: 0 6px;

    text-align: center;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
  }

  .bloomy-top-trustbar__item + .bloomy-top-trustbar__item {
    border-left: 1px solid rgba(205, 219, 242, 0.82);
    padding-left: 6px;
  }

  .bloomy-top-trustbar__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0 auto 1px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .bloomy-top-trustbar__icon img {
    width: 27px;
    height: 27px;
    object-fit: contain;
  }

  .bloomy-top-trustbar__text {
    min-width: 0;
    width: 100%;
  }

  .bloomy-top-trustbar__title {
    margin: 0 0 3px;
    font-size: 10.8px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.045em;
    color: #12234f;
    white-space: nowrap;
  }

  .bloomy-top-trustbar__lead {
    margin: 0;
    font-size: 8.8px;
    line-height: 1.42;
    font-weight: 650;
    letter-spacing: -0.04em;
    color: #65728e;
    word-break: keep-all;
  }

  .bloomy-top-trustbar__lead br {
    display: none;
  }
}

/* =================================
   Small Mobile
   390〜420px
   可変幅のまま2行に収まりやすくする
================================= */

@media (max-width: 420px) {
  .bloomy-top-filter__chips {
    gap: 9px 8px;
  }

  .bloomy-top-chip-button {
    min-height: 34px;
    padding: 0 11px;
    gap: 6px;

    font-size: 12px;
    letter-spacing: -0.05em;
  }

  .bloomy-top-chip-button__emoji {
    font-size: 14px;
  }

  .bloomy-top-chip-button__text {
    letter-spacing: -0.05em;
  }

  .bloomy-top-filter__areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .bloomy-top-area-button {
    grid-template-columns: 19px minmax(0, 1fr);
    min-height: 48px;
    padding: 6px 5px;
    gap: 4px;
  }

  .bloomy-top-area-button__icon,
  .bloomy-top-area-button__icon img {
    width: 19px;
    height: 19px;
  }

  .bloomy-top-area-button__label {
    font-size: 10.2px;
    letter-spacing: -0.05em;
  }

  .bloomy-top-area-button__meta {
    display: block;
    font-size: 8px;
    line-height: 1.18;
    letter-spacing: -0.075em;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  .bloomy-top-trustbar__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 11px 5px;
  }

  .bloomy-top-trustbar__item {
    gap: 4px;
    padding: 0 5px;
  }

  .bloomy-top-trustbar__item + .bloomy-top-trustbar__item {
    border-left: 1px solid rgba(205, 219, 242, 0.82);
    border-top: 0;
    padding-left: 5px;
  }

  .bloomy-top-trustbar__icon {
    width: 26px;
    height: 26px;
  }

  .bloomy-top-trustbar__icon img {
    width: 25px;
    height: 25px;
  }

  .bloomy-top-trustbar__title {
    font-size: 10px;
    white-space: nowrap;
  }

  .bloomy-top-trustbar__lead {
    font-size: 8.3px;
    line-height: 1.38;
  }
}

/* =================================
   Very Small Mobile
   360px以下
   可変幅のまま、文字と余白をさらに圧縮
================================= */

@media (max-width: 360px) {
  .bloomy-top-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 7px;
  }

  .bloomy-top-chip-button {
    min-height: 32px;
    padding: 0 9px;
    gap: 5px;

    font-size: 10.8px;
    letter-spacing: -0.06em;
  }

  .bloomy-top-chip-button__emoji {
    font-size: 12.5px;
  }

  .bloomy-top-chip-button__text {
    letter-spacing: -0.06em;
  }

  .bloomy-top-filter__areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .bloomy-top-area-button {
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 45px;
    padding: 5px 4px;
    gap: 3px;
  }

  .bloomy-top-area-button__icon,
  .bloomy-top-area-button__icon img {
    width: 18px;
    height: 18px;
  }

  .bloomy-top-area-button__label {
    font-size: 9.4px;
  }

  .bloomy-top-area-button__meta {
    font-size: 7.5px;
    letter-spacing: -0.08em;
    overflow: visible;
  }

  .bloomy-top-trustbar__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px 4px;
  }

  .bloomy-top-trustbar__item {
    gap: 4px;
    padding: 0 4px;
  }

  .bloomy-top-trustbar__item + .bloomy-top-trustbar__item {
    border-left: 1px solid rgba(205, 219, 242, 0.82);
    border-top: 0;
    padding-left: 4px;
  }

  .bloomy-top-trustbar__icon {
    width: 24px;
    height: 24px;
  }

  .bloomy-top-trustbar__icon img {
    width: 23px;
    height: 23px;
  }

  .bloomy-top-trustbar__title {
    font-size: 9px;
  }

  .bloomy-top-trustbar__lead {
    font-size: 7.6px;
  }
}

@media (min-width: 768px) {
  .bloomy-top-howto__title-break {
    display: none;
  }
}

/* =========================================================
   Bloomy TOP Mobile Filter + Color Refinement
   1本化版
   - ヒーローのレイアウト・タイトル・背景サイズは触らない
   - モバイルではフィルターをボトムシート化
   - フィルター入口カードは drawer 版に統一
   - フィルター上のマージンは 0
========================================================= */

/* 初期状態：モバイル用UIは隠す */
.bloomy-top-mobile-filter-trigger,
.bloomy-top-filter-shell__overlay,
.bloomy-top-filter-sheet__handle,
.bloomy-top-filter-sheet__close,
.bloomy-top-filter-mobile-detail,
.bloomy-top-filter-mobile-action {
  display: none;
}

/* PCではボトムシート用の補足文は出さない */
.bloomy-top-filter-head__lead {
  display: none;
}

/* =========================================================
   Color Tokens / Global Color Refinement
========================================================= */

.bloomy-top-page {
  --line: #d7e4f8;
  --line-strong: #bed4f8;

  --blue: #1574f5;
  --blue-dark: #075ed8;
  --blue-soft: #edf6ff;

  --text-main: #07163f;
  --text-sub: #526684;
  --text-soft: #5e6a86;

  --shadow-soft: 0 14px 36px rgba(32, 82, 160, 0.12);
  --shadow-card: 0 10px 24px rgba(38, 86, 156, 0.10);
  --shadow-card-hover: 0 18px 34px rgba(38, 86, 156, 0.14);
  --shadow-strong: 0 18px 42px rgba(28, 88, 180, 0.17);

  background: transparent;
  color: #07163f;
}

/* ページ全体の背景を少しだけ青く・清潔に */
body,
#content,
.l-content,
.p-content {
  background: #eef5fc !important;
}

/* ヒーロー背景はサイズ・位置を変えず、色味だけ少し整える */
.bloomy-top-hero .bloomy-top-hero__bg-sky {
  filter: saturate(1.08) contrast(1.04) !important;
}

/* 見出しの濃紺を統一 */
.bloomy-top-hero__title,
.bloomy-top-filter-head__title,
.bloomy-top-section-head__title,
.bloomy-top-trustbar__title,
.bloomy-top-recommend-card__country,
.bloomy-top-reasons__title,
.bloomy-top-howto__title {
  color: #07163f !important;
}

/* 本文系 */
.bloomy-top-hero__lead,
.bloomy-top-section-head__lead,
.bloomy-top-trustbar__lead,
.bloomy-top-recommend-card__description,
.bloomy-top-area-button__meta,
.bloomy-top-reason-card__text {
  color: #526684 !important;
}

/* 小ラベル・アクセントブルー */
.bloomy-top-hero__eyebrow,
.bloomy-top-section-head__eyebrow,
.bloomy-top-reasons__title span,
.bloomy-top-recommend-card__spec-value--price {
  color: #1574f5 !important;
}

.bloomy-top-hero__eyebrow::before,
.bloomy-top-hero__eyebrow::after {
  background: #1574f5 !important;
}

/* フィルター・トラストバーの白カード */
.bloomy-top-filter,
.bloomy-top-trustbar__inner {
  background: rgba(255, 255, 255, 0.965) !important;
  border-color: rgba(210, 224, 246, 0.96) !important;
  box-shadow:
    0 16px 38px rgba(26, 70, 140, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}

/* 入力欄 */
.bloomy-top-searchbar {
  border-color: #c9d9f2 !important;
  background: #ffffff !important;
}

.bloomy-top-searchbar:focus-within {
  border-color: #1574f5 !important;
  box-shadow: 0 0 0 4px rgba(21, 116, 245, 0.08) !important;
}

.bloomy-top-searchbar::before {
  color: #6f7f9d !important;
}

.bloomy-top-searchbar__placeholder {
  color: #6f7c9a !important;
}

/* メインCTAの青 */
.bloomy-top-filter__submit,
.bloomy-top-page .bloomy-top-recommend-card__cta,
.bloomy-top-howto__badge {
  background: linear-gradient(180deg, #157cff 0%, #075ed8 100%) !important;
  box-shadow: 0 12px 24px rgba(7, 94, 216, 0.20) !important;
}

/* チップ・地域カード */
.bloomy-top-chip-button,
.bloomy-top-area-button {
  border-color: #dce7f6 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #10234f !important;
  box-shadow: 0 5px 12px rgba(32, 72, 140, 0.04) !important;
}

.bloomy-top-chip-button:hover,
.bloomy-top-area-button:hover {
  border-color: #bfd4f4 !important;
  background: #f8fbff !important;
}

.bloomy-top-chip-button.is-selected,
.bloomy-top-area-button.is-selected {
  border-color: #76a9ff !important;
  background: #edf5ff !important;
  color: #075ed8 !important;
}

/* おすすめカード */
.bloomy-top-recommend-card__link {
  background: #ffffff !important;
  border-color: #dce7f6 !important;
  box-shadow: 0 14px 28px rgba(38, 86, 156, 0.09) !important;
}

.bloomy-top-recommend-card__link:hover {
  box-shadow: 0 18px 34px rgba(38, 86, 156, 0.13) !important;
}

/* セクション背景カード */
.bloomy-top-reviews__shell,
.bloomy-top-howto__inner {
  background:
    linear-gradient(
      180deg,
      rgba(239, 247, 255, 0.96) 0%,
      rgba(224, 237, 255, 0.98) 100%
    ),
    #e7f1ff !important;
  border-color: #d5e4f8 !important;
}

/* =========================================================
   PC / Tablet
   768px以上は既存フィルターをそのまま表示
========================================================= */

@media (min-width: 768px) {
  body .bloomy-top-page .bloomy-top-mobile-filter-trigger {
    display: none !important;
  }

  body .bloomy-top-page .bloomy-top-filter-shell {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body .bloomy-top-page .bloomy-top-filter-sheet {
    position: static !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .bloomy-top-page .bloomy-top-filter-shell__overlay,
  body .bloomy-top-page .bloomy-top-filter-sheet__handle,
  body .bloomy-top-page .bloomy-top-filter-sheet__close,
  body .bloomy-top-page .bloomy-top-filter-mobile-detail,
  body .bloomy-top-page .bloomy-top-filter-mobile-action {
    display: none !important;
  }

  body .bloomy-top-page #bloomyTopSearchForm.bloomy-top-filter {
    display: block !important;
    height: auto !important;
  }

  body .bloomy-top-page .bloomy-top-filter-sheet__scroll {
    padding: 0 !important;
    overflow: visible !important;
  }

  body .bloomy-top-page .bloomy-top-filter__submit--desktop {
    display: inline-flex !important;
  }
}

/* =========================================================
   Mobile
   フィルターだけボトムシート化
========================================================= */

@media (max-width: 767px) {
  body.bloomy-filter-is-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* =======================================================
     Mobile Filter Trigger / Drawer Entry
     CTAボタンなし・カード全体でボトムシートを開く
  ======================================================= */

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger {
    display: none !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer {
    position: relative !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 14px !important;
    width: min(calc(100% - 52px), 640px) !important;
    min-height: 108px !important;

    /* フィルター上のマージンをなくす */
    margin: 0 auto 30px !important;

    padding: 18px 18px 18px 20px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(205, 222, 248, 0.92) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(21, 116, 245, 0.045) 0%, rgba(21, 116, 245, 0) 38%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.992) 0%, rgba(250, 252, 255, 0.986) 100%) !important;
    box-shadow:
      0 14px 30px rgba(36, 79, 150, 0.09),
      0 1px 0 rgba(255, 255, 255, 0.96) inset !important;
    text-align: left !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    overflow: hidden !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer::before {
    content: "" !important;
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    top: 0 !important;
    height: 1px !important;
    opacity: 0.72 !important;
    background: linear-gradient(
      90deg,
      rgba(21, 116, 245, 0),
      rgba(21, 116, 245, 0.24),
      rgba(21, 116, 245, 0)
    ) !important;
    pointer-events: none !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer::after {
    content: "" !important;
    position: absolute !important;
    right: -48px !important;
    top: -48px !important;
    width: 118px !important;
    height: 118px !important;
    border-radius: 999px !important;
    background: rgba(21, 116, 245, 0.035) !important;
    pointer-events: none !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__main {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: fit-content !important;
    min-height: 23px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(237, 246, 255, 0.82) !important;
    border: 1px solid #dceafb !important;
    color: #126be9 !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: 0.02em !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__label-icon {
    position: relative !important;
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    border: 2px solid currentColor !important;
    border-radius: 999px !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__label-icon::after {
    content: "" !important;
    position: absolute !important;
    right: -5px !important;
    bottom: -4px !important;
    width: 7px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform: rotate(45deg) !important;
    transform-origin: left center !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__title {
    display: block !important;
    margin-top: 2px !important;
    color: #07163f !important;
    font-size: 21.5px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.06em !important;
    white-space: normal !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__lead {
    display: block !important;
    max-width: 100% !important;
    color: #64708a !important;
    font-size: 12px !important;
    line-height: 1.48 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    white-space: normal !important;
  }

  /* 旧CTA・旧チップ系は完全に非表示 */
  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__bottom,
  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__popular,
  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__chip,
  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__popular-label,
  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__hint,
  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__cta {
    display: none !important;
  }


  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__drawer-line {
    position: absolute !important;
    left: 50% !important;
    bottom: 9px !important;
    display: block !important;
    width: 12px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: rgba(18, 107, 233, 0.28) !important;
    opacity: 0.48 !important;
    transform: translateX(-50%) !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer:active {
    transform: translateY(1px) !important;
    box-shadow:
      0 12px 26px rgba(36, 79, 150, 0.105),
      0 1px 0 rgba(255, 255, 255, 0.96) inset !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer:focus-visible {
    outline: none !important;
    box-shadow:
      0 14px 30px rgba(36, 79, 150, 0.09),
      0 0 0 4px rgba(21, 116, 245, 0.13),
      0 1px 0 rgba(255, 255, 255, 0.96) inset !important;
  }

  /* =======================================================
     Bottom Sheet Shell
  ======================================================= */

  body .bloomy-top-page .bloomy-top-filter-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity 0.22s ease,
      visibility 0.22s ease !important;
  }

  body .bloomy-top-page .bloomy-top-filter-shell.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body .bloomy-top-page .bloomy-top-filter-shell__overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: rgba(8, 24, 54, 0.54) !important;
    backdrop-filter: blur(2px) !important;
  }

  body .bloomy-top-page .bloomy-top-filter-sheet {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    height: 90dvh !important;
    max-height: 90dvh !important;
    overflow: hidden !important;
    border-radius: 32px 32px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -24px 54px rgba(7, 22, 63, 0.20) !important;
    transform: translateY(102%) !important;
    transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.24, 1) !important;
  }

  body .bloomy-top-page .bloomy-top-filter-shell.is-open .bloomy-top-filter-sheet {
    transform: translateY(0) !important;
  }

  body .bloomy-top-page .bloomy-top-filter-sheet__handle {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    z-index: 4 !important;
    display: block !important;
    width: 54px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #aeb7c7 !important;
    transform: translateX(-50%) !important;
  }

  body .bloomy-top-page .bloomy-top-filter-sheet__close {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f2f5fb !important;
    color: #7d88a0 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 350 !important;
    cursor: pointer !important;
  }

  /* =======================================================
     Form Inside Bottom Sheet
  ======================================================= */

  body .bloomy-top-page #bloomyTopSearchForm.bloomy-top-filter {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body .bloomy-top-page .bloomy-top-filter-sheet__scroll {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 58px 22px 188px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body .bloomy-top-page .bloomy-top-filter-head__lead {
    display: block !important;
    margin: 8px 0 0 !important;
    color: #52617f !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 750 !important;
  }

  body .bloomy-top-page .bloomy-top-filter__row {
    display: block !important;
    margin: 0 0 14px !important;
  }

  body .bloomy-top-page .bloomy-top-filter__submit--desktop,
  body .bloomy-top-page .bloomy-top-filter__bottom--desktop {
    display: none !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-detail,
  body .bloomy-top-page .bloomy-top-filter-mobile-action {
    display: block !important;
  }

  /* iOS Safari 入力ズーム対策 */
  body .bloomy-top-page .bloomy-top-searchbar__input,
  body .bloomy-top-page .bloomy-top-searchbar__placeholder,
  body .bloomy-top-page .bloomy-top-filter-mobile-days__select {
    font-size: 16px !important;
  }

  /* =======================================================
     Bottom Fixed Action
  ======================================================= */

  body .bloomy-top-page .bloomy-top-filter-mobile-action {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 6 !important;
    padding: 14px 22px calc(16px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, 0.985) !important;
    border-top: 1px solid #dfe8f6 !important;
    box-shadow: 0 -10px 24px rgba(15, 45, 90, 0.07) !important;
  }
}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 390px) {
  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer {
    width: calc(100% - 34px) !important;
    min-height: 104px !important;
    padding: 17px 15px 17px 16px !important;
    border-radius: 24px !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__title {
    font-size: 20.5px !important;
  }

  body .bloomy-top-page .bloomy-top-mobile-filter-trigger--drawer .bloomy-top-mobile-filter-trigger__lead {
    font-size: 11.5px !important;
  }
}


/* =========================================================
   Bloomy Section Spacing Fix
   Trust Bar と How to use の密着を全デバイスで解消
========================================================= */

body .bloomy-top-page .bloomy-top-howto {
  margin-top: 56px !important;
}

@media (max-width: 767px) {
  body .bloomy-top-page .bloomy-top-howto {
    margin-top: 40px !important;
  }
}

/* =========================================================
   Bloomy Mobile Trust Bar Payment Logos
   モバイルでも支払い方法を上品に表示
========================================================= */

@media (max-width: 767px) {
  body .bloomy-top-page .bloomy-top-trustbar__payments {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 13px 10px 0 !important;
    border-top: 1px solid rgba(214, 228, 248, 0.92) !important;
    text-align: center !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__payment-title {
    margin: 0 0 9px !important;
    color: #64708a !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logos {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logo-card {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 38px !important;
    height: 24px !important;
    padding: 4px 7px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(216, 229, 248, 0.95) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow:
      0 4px 10px rgba(35, 75, 145, 0.045),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logo-card img {
    display: block !important;
    width: auto !important;
    max-width: 44px !important;
    max-height: 14px !important;
    object-fit: contain !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logo-card--visa img {
    max-width: 42px !important;
    max-height: 13px !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logo-card--mastercard img,
  body .bloomy-top-page .bloomy-top-trustbar__logo-card--amex img,
  body .bloomy-top-page .bloomy-top-trustbar__logo-card--jcb img {
    max-width: 30px !important;
    max-height: 15px !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logo-card--applepay img,
  body .bloomy-top-page .bloomy-top-trustbar__logo-card--googlepay img {
    max-width: 46px !important;
    max-height: 14px !important;
  }
}

@media (max-width: 390px) {
  body .bloomy-top-page .bloomy-top-trustbar__payments {
    margin-top: 12px !important;
    padding-top: 12px !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__payment-title {
    font-size: 10px !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logos {
    gap: 5px !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logo-card {
    min-width: 35px !important;
    height: 23px !important;
    padding: 4px 6px !important;
    border-radius: 7px !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logo-card img {
    max-width: 40px !important;
    max-height: 13px !important;
  }
}

/* =========================================================
   Bloomy Mobile Trust Bar Payment Polish
   支払い方法エリアの縦線除去・軽量化
========================================================= */

@media (max-width: 767px) {
  body .bloomy-top-page .bloomy-top-trustbar__payments {
    position: relative !important;
    grid-column: 1 / -1 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    margin: 12px 0 0 !important;
    padding: 12px 8px 0 !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__payments::before,
  body .bloomy-top-page .bloomy-top-trustbar__payments::after {
    content: none !important;
    display: none !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__payment-title {
    margin-bottom: 8px !important;
    color: #6b7890 !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    letter-spacing: 0.01em !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logos {
    gap: 6px 7px !important;
  }

  body .bloomy-top-page .bloomy-top-trustbar__logo-card {
    height: 23px !important;
    min-width: 38px !important;
    border-color: rgba(210, 225, 247, 0.78) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow:
      0 3px 8px rgba(35, 75, 145, 0.035),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  /* トラストバー内の区切り線が支払いエリアに伸びる場合の保険 */
  body .bloomy-top-page .bloomy-top-trustbar__payments *::before,
  body .bloomy-top-page .bloomy-top-trustbar__payments *::after {
    border-left: 0 !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Stable UI / チップサイズは既存維持
   - 国チップ・地域カードの大きさは上書きしない
   - ボトムシート構造・詳細条件・下部CTAだけ整える
========================================================= */

@media (max-width: 767px) {
  /* =======================================================
     Overlay / Shell
  ======================================================= */

  body.bloomy-filter-is-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  body .bloomy-top-page .bloomy-top-filter-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity 0.22s ease,
      visibility 0.22s ease !important;
  }

  body .bloomy-top-page .bloomy-top-filter-shell.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body .bloomy-top-page .bloomy-top-filter-shell__overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: rgba(8, 24, 54, 0.56) !important;
    backdrop-filter: blur(2px) !important;
  }

  /* =======================================================
     Bottom Sheet
  ======================================================= */

  body .bloomy-top-page .bloomy-top-filter-sheet {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    height: 88dvh !important;
    max-height: 88dvh !important;
    overflow: hidden !important;
    border-radius: 32px 32px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -24px 56px rgba(7, 22, 63, 0.22) !important;
    transform: translateY(102%) !important;
    transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.24, 1) !important;
  }

  body .bloomy-top-page .bloomy-top-filter-shell.is-open .bloomy-top-filter-sheet {
    transform: translateY(0) !important;
  }

  /* 上の線：ボトムシート感を出す視覚サイン */
  body .bloomy-top-page .bloomy-top-filter-sheet__handle {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    z-index: 8 !important;
    display: block !important;
    width: 52px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #aeb7c7 !important;
    transform: translateX(-50%) !important;
  }

  /* 閉じるボタン：必須 */
  body .bloomy-top-page .bloomy-top-filter-sheet__close {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    z-index: 9 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f2f5fb !important;
    color: #7a8498 !important;
    font-size: 31px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      0 6px 14px rgba(20, 45, 90, 0.06) !important;
  }

  /* =======================================================
     Form / Scroll Area
  ======================================================= */

  body .bloomy-top-page #bloomyTopSearchForm.bloomy-top-filter {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body .bloomy-top-page .bloomy-top-filter-sheet__scroll {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 66px 22px 184px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* =======================================================
     Header
  ======================================================= */

  body .bloomy-top-page .bloomy-top-filter-head {
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  body .bloomy-top-page .bloomy-top-filter-head__title {
    margin: 0 !important;
    color: #07163f !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important; /* 軽い方が正解(ブランド指針: 見出しは強すぎない) */
    letter-spacing: -0.04em !important;
  }

  body .bloomy-top-page .bloomy-top-filter-head__lead {
    display: block !important;
    margin: 8px 0 0 !important;
    color: #52617f !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
  }

  /* =======================================================
     Search Bar
     検索欄だけ整える。チップサイズは触らない
  ======================================================= */

  body .bloomy-top-page .bloomy-top-filter__row {
    display: block !important;
    margin: 0 0 20px !important;
  }

  body .bloomy-top-page .bloomy-top-searchbar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    width: 100% !important;
    padding: 8px 46px 8px 44px !important;
    border: 1px solid #c9d9f2 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(21, 116, 245, 0.035) !important;
  }

  body .bloomy-top-page .bloomy-top-searchbar::before {
    content: "⌕" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    color: #72809c !important;
    font-size: 24px !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
  }

  body .bloomy-top-page .bloomy-top-searchbar__input {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #07163f !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  body .bloomy-top-page .bloomy-top-searchbar__placeholder {
    color: #6f7c9a !important;
    font-size: 16px !important;
    font-weight: 750 !important;
  }

  body .bloomy-top-page .bloomy-top-filter__submit--desktop,
  body .bloomy-top-page .bloomy-top-filter__bottom--desktop {
    display: none !important;
  }

  /* =======================================================
     Sections
     国チップ・地域カードのサイズは触らない
  ======================================================= */

  body .bloomy-top-page .bloomy-top-filter__popular {
    margin: 0 0 24px !important;
  }

  body .bloomy-top-page .bloomy-top-filter__areas-wrap {
    margin: 0 0 24px !important;
  }

  body .bloomy-top-page .bloomy-top-filter__popular-title,
  body .bloomy-top-page .bloomy-top-filter__areas-title,
  body .bloomy-top-page .bloomy-top-filter-mobile-detail__title {
    margin: 0 0 12px !important;
    color: #07163f !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
  }

  /*
    重要：
    .bloomy-top-chip-button
    .bloomy-top-area-button
    の width / height / padding / font-size はここでは触らない。
    既存の見た目をそのまま使う。
  */

  body .bloomy-top-page .bloomy-top-chip-button.is-selected,
  body .bloomy-top-page .bloomy-top-area-button.is-selected {
    border-color: #76a9ff !important;
    background: #edf5ff !important;
    color: #075ed8 !important;
  }

  /* =======================================================
     Detail Conditions
  ======================================================= */

  body .bloomy-top-page .bloomy-top-filter-mobile-detail {
    display: block !important;
    margin: 2px 0 0 !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-detail__list {
    display: grid !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid #dfe8f6 !important;
    border-radius: 16px !important;
    background: #f8fbff !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-detail__row {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(220, 231, 248, 0.9) !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-detail__row:last-child {
    border-bottom: 0 !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-detail__label {
    color: #07163f !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
  }

  /* 通常プラン / 無制限 */
  body .bloomy-top-page .bloomy-top-filter-mobile-segment {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    background: #edf2fb !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-segment__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #77839a !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
    letter-spacing: -0.035em !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-segment__button.is-active {
    background: linear-gradient(180deg, #157cff 0%, #075ed8 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 16px rgba(7, 94, 216, 0.16) !important;
  }

  /* 利用日数 */
  body .bloomy-top-page .bloomy-top-filter-mobile-days {
    position: relative !important;
    display: block !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-days__select {
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 36px 0 14px !important;
    border: 1px solid #dce7f6 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #07163f !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  /* 周遊トグル */
  body .bloomy-top-page .bloomy-top-filter-mobile-toggle {
    justify-self: end !important;
    position: relative !important;
    display: inline-flex !important;
    width: 48px !important;
    height: 28px !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-toggle input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-toggle__track {
    position: relative !important;
    display: block !important;
    width: 48px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: #d9e1ee !important;
    transition: background 0.18s ease !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-toggle__knob {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: 0 3px 8px rgba(20, 45, 90, 0.18) !important;
    transition: transform 0.18s ease !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-toggle input:checked + .bloomy-top-filter-mobile-toggle__track {
    background: #1574f5 !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-toggle input:checked + .bloomy-top-filter-mobile-toggle__track .bloomy-top-filter-mobile-toggle__knob {
    transform: translateX(20px) !important;
  }

  /* =======================================================
     Bottom Fixed CTA
  ======================================================= */

  body .bloomy-top-page .bloomy-top-filter-mobile-action {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
    display: block !important;
    padding: 14px 22px calc(16px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #dfe8f6 !important;
    background: rgba(255, 255, 255, 0.985) !important;
    box-shadow: 0 -10px 24px rgba(15, 45, 90, 0.08) !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-action__summary {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-action__count,
  body .bloomy-top-page .bloomy-top-filter-mobile-action__price {
    margin: 0 !important;
    color: #07163f !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-action__count span,
  body .bloomy-top-page .bloomy-top-filter-mobile-action__price-main {
    color: #1574f5 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    letter-spacing: -0.045em !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-action__price-label {
    margin-right: 5px !important;
    color: #07163f !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-action__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #157cff 0%, #075ed8 100%) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    box-shadow:
      0 12px 24px rgba(7, 94, 216, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-action__clear {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 34px !important;
    margin-top: 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: #1574f5 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }
}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 390px) {
  body .bloomy-top-page .bloomy-top-filter-sheet {
    height: 90dvh !important;
    max-height: 90dvh !important;
  }

  body .bloomy-top-page .bloomy-top-filter-sheet__scroll {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body .bloomy-top-page .bloomy-top-filter-mobile-detail__row {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Popular Country Chips Compact
   右端で自然に折り返しつつ、国チップだけ少し小さくする
========================================================= */

@media (max-width: 767px) {
  body .bloomy-top-page .bloomy-top-filter__popular .bloomy-top-filter__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body .bloomy-top-page .bloomy-top-filter__popular .bloomy-top-chip-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    gap: 7px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body .bloomy-top-page .bloomy-top-filter__popular .bloomy-top-chip-button__emoji {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  body .bloomy-top-page .bloomy-top-filter__popular .bloomy-top-chip-button__text {
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  body .bloomy-top-page .bloomy-top-filter__popular .bloomy-top-filter__chips {
    gap: 7px !important;
  }

  body .bloomy-top-page .bloomy-top-filter__popular .bloomy-top-chip-button {
    min-height: 33px !important;
    padding: 0 10px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }

  body .bloomy-top-page .bloomy-top-filter__popular .bloomy-top-chip-button__emoji {
    font-size: 15px !important;
  }
}


/* =========================================================
   Bloomy Mobile Bottom Sheet
   Bottom Fixed CTA / Consolidated
   下部固定CTAまわり 1本化版
========================================================= */

@media screen and (max-width: 767px) {
  /* =======================================================
     Bottom Fixed Area
  ======================================================= */

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 20 !important;
    display: block !important;

    padding: 13px 20px calc(13px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(218, 229, 246, 0.95) !important;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.99) 34%,
        #ffffff 100%
      ) !important;
    box-shadow:
      0 -14px 28px rgba(13, 39, 82, 0.075),
      0 -1px 0 rgba(255, 255, 255, 0.9) inset !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* =======================================================
     Summary Row
     24件の候補 / 最安 480円〜
  ======================================================= */

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 10px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price {
    margin: 0 !important;
    color: #07163f !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: -0.03em !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count span {
    margin-right: 2px !important;
    color: #1574f5 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.055em !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price-label {
    margin: 0 !important;
    color: #07163f !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price-main {
    color: #1574f5 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.055em !important;
  }

  /* =======================================================
     Main CTA Button
     この条件で見る
  ======================================================= */

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__button {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 50px !important;
    padding: 0 18px !important;

    border: 0 !important;
    border-radius: 15px !important;
    background:
      linear-gradient(180deg, #1e86ff 0%, #0867e8 54%, #075ed8 100%) !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;

    box-shadow:
      0 12px 22px rgba(7, 94, 216, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;

    cursor: pointer !important;
    transition:
      transform 0.16s ease,
      box-shadow 0.16s ease,
      filter 0.16s ease !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__button:active {
    transform: translateY(1px) !important;
    box-shadow:
      0 8px 16px rgba(7, 94, 216, 0.19),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    filter: brightness(0.98) !important;
  }

  /* =======================================================
     Clear Button
     下部固定CTAからは消す
     クリアは詳細条件の見出し横へ移動する前提
  ======================================================= */

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__clear {
    display: none !important;
  }

  /* =======================================================
     Scroll Bottom Padding
     下部固定CTAに隠れないようにする
  ======================================================= */

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 150px !important;
  }
}

/* =========================================================
   Small Mobile
========================================================= */

@media screen and (max-width: 390px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__summary {
    margin-bottom: 9px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count span,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price-main {
    font-size: 24px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__button {
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 14.5px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 142px !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   UX Fix Pack
   handle / close / clear / days / count / searchbar
========================================================= */

@media screen and (max-width: 767px) {
  /* 上の線：タップできる見た目にする */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__handle {
    top: 11px !important;
    width: 48px !important;
    height: 5px !important;
    background: #b8c0cf !important;
    cursor: pointer !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__handle::before {
    content: "" !important;
    position: absolute !important;
    left: -28px !important;
    right: -28px !important;
    top: -16px !important;
    bottom: -16px !important;
  }

  /* 右上の閉じるボタン：軽くする */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__close {
    top: 20px !important;
    right: 20px !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(244, 247, 252, 0.86) !important;
    color: #7b879c !important;
    font-size: 27px !important;
    font-weight: 300 !important;
    box-shadow: none !important;
  }

  /* 検索バー：少し小さくする */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar {
    min-height: 48px !important;
    padding: 6px 40px 6px 40px !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 3px rgba(21, 116, 245, 0.03) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar::before {
    left: 16px !important;
    font-size: 21px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar__placeholder {
    left: 40px !important;
    right: 40px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar__input {
    min-height: 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  /* 詳細条件の見出し + クリア */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 10px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__title {
    margin: 0 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__clear {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(210, 225, 247, 0.85) !important;
    border-radius: 999px !important;
    background: rgba(248, 251, 255, 0.92) !important;
    color: #6f7f9d !important;
    -webkit-text-fill-color: #6f7f9d !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    cursor: pointer !important;
  }

  /* 下部CTA側の旧クリアは消す */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__clear {
    display: none !important;
  }

  /* 利用日数：横幅を持て余さない */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__row:nth-child(2) {
    grid-template-columns: 112px auto !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-days {
    justify-self: start !important;
    width: 150px !important;
    max-width: 100% !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-days__select {
    width: 150px !important;
    min-height: 38px !important;
    padding: 0 32px 0 12px !important;
    border-radius: 11px !important;
  }

  /* 24件の候補：数字と文言の詰まりを解消 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count span {
    margin-right: 0 !important;
  }

  /* 下部CTAを2行構成に固定 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action {
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__summary {
    margin-bottom: 9px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__button {
    min-height: 48px !important;
    border-radius: 15px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 140px !important;
  }
}

@media screen and (max-width: 390px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-days,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-days__select {
    width: 138px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar {
    min-height: 46px !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Searchbar Chip + Input Same Line
   国チップ追加後も入力カーソルを右側に続ける
========================================================= */

@media screen and (max-width: 767px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar {
    align-items: center !important;
    align-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar__chips {
    display: contents !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-selected-chip {
    flex: 0 0 auto !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-selected-chip__emoji {
    font-size: 14px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-selected-chip__label {
    white-space: nowrap !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar__input {
    flex: 1 1 56px !important;
    min-width: 48px !important;
    width: auto !important;
    min-height: 28px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar.is-has-chips .bloomy-top-searchbar__input {
    flex-basis: 56px !important;
    min-width: 48px !important;
  }
}

@media screen and (max-width: 390px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar__input,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-searchbar.is-has-chips .bloomy-top-searchbar__input {
    flex-basis: 42px !important;
    min-width: 38px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-selected-chip {
    min-height: 27px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Detail Conditions Layout / Final Consolidated
   詳細条件エリア最終整理版
   HTML順：
   1. データプラン
   2. 周遊プラン
   3. 利用日数
========================================================= */

@media screen and (max-width: 767px) {
  /* セクション全体 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail {
    margin-top: 18px !important;
    margin-bottom: 10px !important;
  }

  /* 見出し */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__head {
    margin: 0 0 8px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__title {
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
  }

  /* クリアは非表示 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__clear {
    display: none !important;
  }

  /* カード全体 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__list {
    border-radius: 16px !important;
    background: #f8fbff !important;
    border: 1px solid #dce7f6 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  /* 各行 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__row {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 7px 11px !important;
    border-bottom: 1px solid rgba(220, 231, 248, 0.9) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__row:last-child {
    border-bottom: 0 !important;
  }

  /* 左ラベル */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__label {
    color: #07163f !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
  }

  /* 2行目：周遊プランを含める → 周遊プラン に短縮 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__row:nth-child(2)
  .bloomy-top-filter-mobile-detail__label {
    font-size: 0 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__row:nth-child(2)
  .bloomy-top-filter-mobile-detail__label::before {
    content: "周遊プラン" !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    letter-spacing: -0.04em !important;
  }

  /* データプラン：通常プラン / 無制限 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-segment {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 250px !important;
    gap: 4px !important;
    padding: 3px !important;
    border-radius: 12px !important;
    background: #edf2fb !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-segment__button {
    min-height: 31px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #77839a !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-segment__button.is-active {
    background: linear-gradient(180deg, #157cff 0%, #075ed8 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 8px 16px rgba(7, 94, 216, 0.16) !important;
  }

  /* 周遊プラントグル */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-toggle {
    justify-self: end !important;
    position: relative !important;
    display: inline-flex !important;
    width: 40px !important;
    height: 24px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-toggle input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-toggle__track {
    position: relative !important;
    display: block !important;
    width: 40px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: #d9e1ee !important;
    transition: background 0.18s ease !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-toggle__knob {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 8px rgba(20, 45, 90, 0.18) !important;
    transition: transform 0.18s ease !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-toggle input:checked
  + .bloomy-top-filter-mobile-toggle__track {
    background: #1574f5 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-toggle input:checked
  + .bloomy-top-filter-mobile-toggle__track
  .bloomy-top-filter-mobile-toggle__knob {
    transform: translateX(16px) !important;
  }

  /* 利用日数セレクター */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-days {
    justify-self: end !important;
    width: 108px !important;
    max-width: 100% !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-days__select {
    width: 108px !important;
    min-height: 34px !important;
    padding: 0 26px 0 10px !important;
    border: 1px solid #dce7f6 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #07163f !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-align-last: center !important;
  }
}

@media screen and (max-width: 390px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__row {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    min-height: 44px !important;
    padding: 7px 10px !important;
    gap: 10px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__label,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__row:nth-child(2)
  .bloomy-top-filter-mobile-detail__label::before {
    font-size: 12px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-segment__button {
    font-size: 11px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-days,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-days__select {
    width: 102px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-days__select {
    font-size: 13.5px !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Detail Bottom Spacing + CTA Metric Card
   詳細条件下の余白とCTA周りの整理
========================================================= */

@media screen and (max-width: 767px) {
  /* 詳細条件カードの下に呼吸を作る */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail {
    margin-bottom: 10px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__list {
    margin-bottom: 0 !important;
  }

  /* 下部固定CTAエリア */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(218, 229, 246, 0.95) !important;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.98) 32%,
        #ffffff 100%
      ) !important;
    box-shadow:
      0 -16px 30px rgba(13, 39, 82, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* 件数・最安を白いメトリクスカード化 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 0 11px !important;
    padding: 10px 10px !important;
    border: 1px solid #dce7f6 !important;
    border-radius: 18px !important;
    background: rgba(248, 251, 255, 0.94) !important;
    box-shadow:
      0 6px 14px rgba(35, 75, 145, 0.035),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  /* 左右の区切り線 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price {
    position: relative !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 1px !important;
    height: 34px !important;
    background: rgba(196, 211, 235, 0.95) !important;
    transform: translateY(-50%) !important;
  }

  /* 件数側 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 !important;
    color: #75829d !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count::before {
    content: "候補数" !important;
    color: #75829d !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count span {
    margin: 0 !important;
    color: #1574f5 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
  }

  /* 「件の候補」のテキストを軽くする */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count {
    font-size: 0 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count span::after {
    content: "件" !important;
    margin-left: 2px !important;
    color: #07163f !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    letter-spacing: -0.03em !important;
  }

  /* 最安側 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 !important;
    color: #75829d !important;
    white-space: nowrap !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price-label {
    margin: 0 !important;
    color: #75829d !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price-main {
    color: #1574f5 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
  }

  /* 青CTAを少し軽く・上品に */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__button {
    min-height: 48px !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, #1e86ff 0%, #0867e8 56%, #075ed8 100%) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    box-shadow:
      0 10px 20px rgba(7, 94, 216, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }

  /* 固定CTAに隠れないよう、スクロール下余白を少し増やす */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 176px !important;
  }
}

@media screen and (max-width: 390px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__summary {
    padding: 9px 8px !important;
    border-radius: 16px !important;
    margin-bottom: 9px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count span,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price-main {
    font-size: 22px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__button {
    min-height: 46px !important;
    border-radius: 15px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 166px !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Bottom Space Slightly More
   詳細条件下〜CTA上の余白を少しだけ戻す
========================================================= */

@media screen and (max-width: 767px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail {
    margin-bottom: 10px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 136px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action {
    padding-top: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__summary {
    margin-bottom: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__button {
    min-height: 45px !important;
  }
}

@media screen and (max-width: 390px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 128px !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Lock Background Scroll
   背景スクロールだけ止める / ヘッダー固定処理なし
========================================================= */

@media screen and (max-width: 767px) {
  /*
    JSで body に bloomy-filter-is-open が付いた時だけ、
    背景ページのスクロールを止める。
    ヘッダーの固定・影・前面化はここでは一切しない。
  */
  html:has(body.bloomy-filter-is-open),
  body.bloomy-filter-is-open {
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.bloomy-filter-is-open {
    touch-action: none !important;
  }

  /*
    ボトムシートは画面全体に重ねる。
    ヘッダー下から開始させる --bloomy-mobile-sheet-top は使わない。
  */
  html body .bloomy-top-page
  #bloomyTopFilterShell {
    top: 0 !important;
    height: 100dvh !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-shell__overlay {
    position: absolute !important;
    inset: 0 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet {
    height: 88dvh !important;
    max-height: 88dvh !important;
  }

  /*
    シート内だけは縦スクロールできるように戻す。
    ここを入れないとiPhoneでシート内スクロールまで重くなることがある。
  */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Bottom CTA Height Fine Tune
   CTA固定エリアを少し低くする
========================================================= */

@media screen and (max-width: 767px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action {
    padding: 8px 18px calc(9px + env(safe-area-inset-bottom)) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__summary {
    margin-bottom: 8px !important;
    padding: 7px 10px !important;
    border-radius: 16px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count::before,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price-label {
    font-size: 10.5px !important;
    line-height: 1 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count span,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price-main {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__count span::after {
    font-size: 12px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__price::before {
    height: 30px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__button {
    min-height: 43px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 136px !important;
  }
}

@media screen and (max-width: 390px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action {
    padding: 7px 16px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__summary {
    padding: 6px 8px !important;
    margin-bottom: 7px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-action__button {
    min-height: 42px !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Detail to CTA Space Final Override
========================================================= */

@media screen and (max-width: 767px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 140px !important;
  }
}

@media screen and (max-width: 390px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-bottom: 140px !important;
  }
}


/* =========================================================
   Bloomy Mobile Bottom Sheet
   Top Padding Fine Tune
   ボトムシート上部の余白を少し戻す
========================================================= */

@media screen and (max-width: 767px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__scroll {
    padding-top: 30px !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-head {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Heading Weight / Size Alignment
   見出しの太さとサイズを整理
========================================================= */

@media screen and (max-width: 767px) {
  /* メイン見出し：どこで使いますか？ */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-head__title {
    font-weight: 800 !important;
  }

  /* 下の3見出し：人気の渡航先 / 複数国をまわる方はこちら / 詳細条件 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter__popular-title,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter__areas-title,
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__title {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: #07163f !important;
  }

  /* 詳細条件だけ過去CSSで大きめ指定されている場合の上書き */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-mobile-detail__title {
    margin: 0 !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Drag Handle Native Motion
   上部バーを指に追従させる
========================================================= */

@media screen and (max-width: 767px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet {
    will-change: transform !important;
    transform: translate3d(0, 0, 0);
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet.is-dragging {
    transition: none !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet.is-drag-reset {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet.is-drag-closing {
    transition: transform 0.18s ease-in !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-shell__overlay {
    transition: opacity 0.18s ease !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__handle {
    touch-action: none !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__handle:active {
    cursor: grabbing !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Drag Handle Native Motion / Strong
========================================================= */

@media screen and (max-width: 767px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet {
    will-change: transform !important;
    transform: translate3d(0, 0, 0);
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet.is-dragging {
    transition: none !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet.is-drag-reset {
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet.is-drag-closing {
    transition: transform 0.19s ease-in !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__handle {
    touch-action: none !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__handle:active {
    cursor: grabbing !important;
  }
}

/* =========================================================
   Bloomy Mobile Bottom Sheet
   Drag Motion Premium Tune
   大手アプリ寄せのボトムシート操作感
========================================================= */

@media screen and (max-width: 767px) {
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet {
    will-change: transform !important;
    transform: translate3d(0, 0, 0);
  }

  /* ドラッグ中は指に遅れないようにtransitionを切る */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet.is-dragging {
    transition: none !important;
  }

  /* 少し引いて戻す時：自然にスッと戻る */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet.is-drag-reset {
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1) !important;
  }

  /* 閾値を超えて閉じる時：やや速く下へ抜ける */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet.is-drag-closing {
    transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1) !important;
  }

  /* 背景オーバーレイも少しだけ連動 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-shell__overlay {
    transition: opacity 0.18s ease !important;
  }

  /* 上のバーをドラッグ操作対象として明確化 */
  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__handle {
    touch-action: none !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  html body .bloomy-top-page
  #bloomyTopFilterShell
  .bloomy-top-filter-sheet__handle:active {
    cursor: grabbing !important;
  }
}


/* =========================================================
   Bloomy Mobile Filter Trigger
   FINAL OVERRIDE
   検索カード最終調整：文字位置・サイズ・右丸中央
========================================================= */

@media (max-width: 767px) {
  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: calc(100% - 44px) !important;
    min-height: 116px !important;

    padding: 18px 24px 18px 26px !important;
    gap: 14px !important;

    text-align: left !important;
  }

  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__main {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    text-align: left !important;
    transform: translateY(-3px) !important;
  }

  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    width: fit-content !important;
    min-height: 25px !important;
    padding: 0 11px !important;
    margin: 0 0 9px !important;

    border-radius: 999px !important;
    background: rgba(237, 246, 255, 0.84) !important;
    border: 1px solid #dceafb !important;

    color: #126be9 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
  }

  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label-svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    transform: translateY(0.5px) !important;
  }

  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__title {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 6px !important;

    color: #07163f !important;
    font-size: 22px !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
    letter-spacing: -0.05em !important;

    text-align: left !important;
    white-space: nowrap !important;
  }

  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__lead {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;

    color: #64708a !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;

    text-align: left !important;
    white-space: nowrap !important;
  }

  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon {
    position: relative !important;
    z-index: 2 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    /* 右丸を少し右へ & 垂直中央を微調整 */
    transform: translate(6px, 1px) !important;

    border-radius: 999px !important;
    background: linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%) !important;
    border: 1px solid #dce9fb !important;
    box-shadow:
      0 6px 14px rgba(36, 79, 150, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  }

  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 48% !important;

    width: 13px !important;
    height: 13px !important;

    border-right: 3px solid #126be9 !important;
    border-bottom: 3px solid #126be9 !important;
    border-radius: 2px !important;

    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon::after,
  html body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-line {
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   Bloomy Mobile Filter Trigger
   Consolidated Final
   検索カード・ラベル・右丸アイコンをここだけで管理
========================================================= */

/* 右上の薄い半円装飾を消す */
body .bloomy-top-page
.bloomy-top-mobile-filter-trigger--drawer::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 767px) {
  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: calc(100% - 44px) !important;
    min-height: 112px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 18px 24px 18px 26px !important;
    gap: 14px !important;

    border-radius: 28px !important;
    text-align: left !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__main {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    text-align: left !important;

    /* 左のテキスト群を少し上へ */
    transform: translateY(-3px) !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    width: fit-content !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    margin: 0 0 8px !important;

    border-radius: 999px !important;
    background: rgba(237, 246, 255, 0.84) !important;
    border: 1px solid #dceafb !important;

    color: #126be9 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label-svg {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    color: currentColor !important;
    transform: translateY(0.5px) !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label-svg circle,
  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label-svg path {
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__title {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 6px !important;

    color: #07163f !important;
    font-size: 21.5px !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em !important;

    text-align: left !important;
    white-space: nowrap !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__lead {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    color: #64708a !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;

    text-align: left !important;
    white-space: nowrap !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon {
    position: relative !important;
    z-index: 2 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    /* 右丸を少し右、少し下に */
    transform: translate(6px, 1px) !important;

    border-radius: 999px !important;
    background: linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%) !important;
    border: 1px solid #dce9fb !important;
    box-shadow:
      0 6px 14px rgba(36, 79, 150, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 48% !important;

    width: 13px !important;
    height: 13px !important;

    border-right: 3px solid #126be9 !important;
    border-bottom: 3px solid #126be9 !important;
    border-radius: 2px !important;

    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon::after,
  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-line,
  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label-icon,
  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label-icon::before,
  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label-icon::after {
    content: none !important;
    display: none !important;
  }
}

/* 390px以下だけ最低限調整 */
@media (max-width: 390px) {
  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer {
    width: calc(100% - 34px) !important;
    min-height: 104px !important;
    padding: 17px 15px 17px 16px !important;
    border-radius: 24px !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__title {
    font-size: 20.5px !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__lead {
    font-size: 11.5px !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__label-svg {
    width: 13.5px !important;
    height: 13.5px !important;
    flex-basis: 13.5px !important;
  }
}

/* =========================================================
   Bloomy Mobile Filter Trigger
   Final Micro Tuning
   最後に足すだけの微調整
========================================================= */

@media (max-width: 767px) {
  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer {
    min-height: 106px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__main {
    transform: translateY(-5px) !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    transform: translate(6px, 1px) !important;
  }

  body .bloomy-top-page
  .bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon::before {
    width: 12px !important;
    height: 12px !important;
    border-right-width: 3px !important;
    border-bottom-width: 3px !important;
  }
}

/* =========================================================
   Bloomy Mobile Filter Trigger
   Absolute Final Override
   最後に貼るだけ：高さ・左テキスト位置・右丸調整
========================================================= */

@media (max-width: 900px) {
  html body .bloomy-top-page
  button.bloomy-top-mobile-filter-trigger.bloomy-top-mobile-filter-trigger--drawer {
    min-height: 106px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  html body .bloomy-top-page
  button.bloomy-top-mobile-filter-trigger.bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__main {
    transform: translateY(-5px) !important;
  }

  html body .bloomy-top-page
  button.bloomy-top-mobile-filter-trigger.bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    transform: translate(8px, 1px) !important;
  }

  html body .bloomy-top-page
  button.bloomy-top-mobile-filter-trigger.bloomy-top-mobile-filter-trigger--drawer
  .bloomy-top-mobile-filter-trigger__drawer-icon::before {
    width: 12px !important;
    height: 12px !important;
    border-right-width: 3px !important;
    border-bottom-width: 3px !important;
  }
}


body .bloomy-top-page
.bloomy-top-mobile-filter-trigger--drawer
.bloomy-top-mobile-filter-trigger__label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

body .bloomy-top-page
.bloomy-top-mobile-filter-trigger--drawer
.bloomy-top-mobile-filter-trigger__label {
  background: rgba(237, 246, 255, 0.88) !important;
  border: 1px solid rgba(188, 215, 255, 0.95) !important;
  box-shadow:
    0 4px 10px rgba(45, 119, 246, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* =========================================================
   Bloomy Plan Modal - Mobile Strong Fix
   スペック / 安心カード / 右上ブルーミー画像
   ※既存CSSの最後に追加
========================================================= */

@media (max-width: 640px) {

  /* ------------------------------
     Modal base
  ------------------------------ */

  body .bloomy-plan-modal,
  body .bloomy-plan-modal * {
    box-sizing: border-box !important;
  }

  body .bloomy-plan-modal__dialog,
  body .bloomy-plan-modal__content,
  body .bloomy-plan-modal__body,
  body .bloomy-plan-modal__panel {
    max-width: calc(100vw - 28px) !important;
    width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
  }

  body .bloomy-plan-modal__inner,
  body .bloomy-plan-modal__main,
  body .bloomy-plan-modal__scroll {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden !important;
  }

  /* ------------------------------
     Top mascot / image
     右上ブルーミーを少し下げる
  ------------------------------ */

  body .bloomy-plan-modal__visual,
  body .bloomy-plan-modal__mascot,
  body .bloomy-plan-modal__hero-visual,
  body .bloomy-plan-modal__image,
  body .bloomy-plan-modal__illust {
    top: 58px !important;
    right: 22px !important;
    transform: translateY(12px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body .bloomy-plan-modal__visual img,
  body .bloomy-plan-modal__mascot img,
  body .bloomy-plan-modal__hero-visual img,
  body .bloomy-plan-modal__image img,
  body .bloomy-plan-modal__illust img {
    width: 124px !important;
    max-width: 124px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  body .bloomy-plan-modal__header,
  body .bloomy-plan-modal__lead,
  body .bloomy-plan-modal__heading,
  body .bloomy-plan-modal__intro {
    padding-right: 116px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body .bloomy-plan-modal__title,
  body .bloomy-plan-modal h2,
  body .bloomy-plan-modal h3 {
    font-weight: 800 !important;
  }

  body .bloomy-plan-modal__title {
    font-size: 25px !important;
    line-height: 1.24 !important;
    letter-spacing: -0.035em !important;
  }

  body .bloomy-plan-modal__description,
  body .bloomy-plan-modal__text,
  body .bloomy-plan-modal p {
    font-weight: 700 !important;
  }

  /* ------------------------------
     Plan card / flag block
  ------------------------------ */

  body .bloomy-plan-modal__plan,
  body .bloomy-plan-modal__summary,
  body .bloomy-plan-modal__plan-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body .bloomy-plan-modal__plan-title,
  body .bloomy-plan-modal__country,
  body .bloomy-plan-modal__region {
    font-size: 26px !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
  }

  body .bloomy-plan-modal__plan-description,
  body .bloomy-plan-modal__description {
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
  }

  /* ------------------------------
     Spec bar - 強制3分割
  ------------------------------ */

  body .bloomy-plan-modal__specs,
  body .bloomy-plan-modal__spec-list,
  body .bloomy-plan-modal__specbar,
  body .bloomy-plan-modal__spec-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 17px !important;
  }

  body .bloomy-plan-modal__spec,
  body .bloomy-plan-modal__spec-item,
  body .bloomy-plan-modal__specbar-item,
  body .bloomy-plan-modal__spec-cell {
    display: grid !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px 5px 11px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  body .bloomy-plan-modal__spec-label,
  body .bloomy-plan-modal__specbar-label,
  body .bloomy-plan-modal__spec-name {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #6b7ca5 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  body .bloomy-plan-modal__spec-value,
  body .bloomy-plan-modal__specbar-value,
  body .bloomy-plan-modal__spec-number {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 21px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em !important;
    color: #10275d !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body .bloomy-plan-modal__spec-unit,
  body .bloomy-plan-modal__specbar-unit {
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }

  /* スペックアイコンが消える/大きすぎる場合の補正 */
  body .bloomy-plan-modal__spec-icon,
  body .bloomy-plan-modal__specbar-icon,
  body .bloomy-plan-modal__spec svg,
  body .bloomy-plan-modal__spec-item svg {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    margin: 0 auto 3px !important;
    flex: 0 0 22px !important;
    position: static !important;
  }

  /* 1日あたりだけ長くなりやすい */
  body .bloomy-plan-modal__spec-item:last-child .bloomy-plan-modal__spec-value,
  body .bloomy-plan-modal__specbar-item:last-child .bloomy-plan-modal__specbar-value,
  body .bloomy-plan-modal__spec-cell:last-child .bloomy-plan-modal__spec-number {
    font-size: 20px !important;
    letter-spacing: -0.06em !important;
  }

  /* ------------------------------
     Assurance / Trust cards
     アイコン被り防止
  ------------------------------ */

  body .bloomy-plan-modal__trust,
  body .bloomy-plan-modal__safe,
  body .bloomy-plan-modal__assurance,
  body .bloomy-plan-modal__reassurance {
    margin-top: 24px !important;
  }

  body .bloomy-plan-modal__trust-title,
  body .bloomy-plan-modal__safe-title,
  body .bloomy-plan-modal__assurance-title,
  body .bloomy-plan-modal__reassurance-title {
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    margin-bottom: 14px !important;
  }

  body .bloomy-plan-modal__trust-list,
  body .bloomy-plan-modal__safe-list,
  body .bloomy-plan-modal__assurance-list,
  body .bloomy-plan-modal__reassurance-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body .bloomy-plan-modal__trust-item,
  body .bloomy-plan-modal__safe-item,
  body .bloomy-plan-modal__assurance-item,
  body .bloomy-plan-modal__reassurance-item,
  body .bloomy-plan-modal__trust-card,
  body .bloomy-plan-modal__safe-card,
  body .bloomy-plan-modal__assurance-card {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    justify-items: center !important;
    align-content: start !important;
    min-width: 0 !important;
    min-height: 132px !important;
    padding: 13px 7px 11px !important;
    border-radius: 16px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  body .bloomy-plan-modal__trust-icon,
  body .bloomy-plan-modal__safe-icon,
  body .bloomy-plan-modal__assurance-icon,
  body .bloomy-plan-modal__reassurance-icon,
  body .bloomy-plan-modal__trust-card-icon,
  body .bloomy-plan-modal__safe-card-icon {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 auto 7px !important;
    border-radius: 999px !important;
    transform: none !important;
    flex: 0 0 38px !important;
  }

  body .bloomy-plan-modal__trust-icon svg,
  body .bloomy-plan-modal__safe-icon svg,
  body .bloomy-plan-modal__assurance-icon svg,
  body .bloomy-plan-modal__reassurance-icon svg,
  body .bloomy-plan-modal__trust-icon img,
  body .bloomy-plan-modal__safe-icon img,
  body .bloomy-plan-modal__assurance-icon img {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
    margin: 0 !important;
    position: static !important;
  }

  body .bloomy-plan-modal__trust-item-title,
  body .bloomy-plan-modal__safe-item-title,
  body .bloomy-plan-modal__assurance-item-title,
  body .bloomy-plan-modal__reassurance-item-title,
  body .bloomy-plan-modal__trust-card-title,
  body .bloomy-plan-modal__safe-card-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #00a870 !important;
    text-align: center !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body .bloomy-plan-modal__trust-item-text,
  body .bloomy-plan-modal__safe-item-text,
  body .bloomy-plan-modal__assurance-item-text,
  body .bloomy-plan-modal__reassurance-item-text,
  body .bloomy-plan-modal__trust-card-text,
  body .bloomy-plan-modal__safe-card-text {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #10275d !important;
    text-align: center !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  /* ------------------------------
     Notice card
  ------------------------------ */

  body .bloomy-plan-modal__notice,
  body .bloomy-plan-modal__caution,
  body .bloomy-plan-modal__warning {
    margin-top: 22px !important;
    padding: 15px 16px !important;
    border-radius: 17px !important;
  }

  body .bloomy-plan-modal__notice-title,
  body .bloomy-plan-modal__caution-title,
  body .bloomy-plan-modal__warning-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
  }

  body .bloomy-plan-modal__notice p,
  body .bloomy-plan-modal__caution p,
  body .bloomy-plan-modal__warning p,
  body .bloomy-plan-modal__notice li,
  body .bloomy-plan-modal__caution li,
  body .bloomy-plan-modal__warning li {
    font-size: 12px !important;
    line-height: 1.62 !important;
    font-weight: 700 !important;
  }

  /* ------------------------------
     Bottom CTA
  ------------------------------ */

  body .bloomy-plan-modal__footer,
  body .bloomy-plan-modal__cta-area,
  body .bloomy-plan-modal__bottom {
    z-index: 20 !important;
  }

  body .bloomy-plan-modal__price,
  body .bloomy-plan-modal__total {
    font-weight: 800 !important;
  }

  body .bloomy-plan-modal__button,
  body .bloomy-plan-modal__checkout,
  body .bloomy-plan-modal__cta {
    font-weight: 800 !important;
  }
}

@media (max-width: 390px) {

  body .bloomy-plan-modal__inner,
  body .bloomy-plan-modal__main,
  body .bloomy-plan-modal__scroll {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body .bloomy-plan-modal__header,
  body .bloomy-plan-modal__lead,
  body .bloomy-plan-modal__heading,
  body .bloomy-plan-modal__intro {
    padding-right: 98px !important;
  }

  body .bloomy-plan-modal__visual img,
  body .bloomy-plan-modal__mascot img,
  body .bloomy-plan-modal__hero-visual img,
  body .bloomy-plan-modal__image img,
  body .bloomy-plan-modal__illust img {
    width: 108px !important;
    max-width: 108px !important;
  }

  body .bloomy-plan-modal__title {
    font-size: 23px !important;
  }

  body .bloomy-plan-modal__spec-value,
  body .bloomy-plan-modal__specbar-value,
  body .bloomy-plan-modal__spec-number {
    font-size: 19px !important;
  }

  body .bloomy-plan-modal__spec-label,
  body .bloomy-plan-modal__specbar-label,
  body .bloomy-plan-modal__spec-name {
    font-size: 10px !important;
  }

  body .bloomy-plan-modal__trust-list,
  body .bloomy-plan-modal__safe-list,
  body .bloomy-plan-modal__assurance-list,
  body .bloomy-plan-modal__reassurance-list {
    gap: 6px !important;
  }

  body .bloomy-plan-modal__trust-item,
  body .bloomy-plan-modal__safe-item,
  body .bloomy-plan-modal__assurance-item,
  body .bloomy-plan-modal__reassurance-item,
  body .bloomy-plan-modal__trust-card,
  body .bloomy-plan-modal__safe-card,
  body .bloomy-plan-modal__assurance-card {
    min-height: 126px !important;
    padding: 12px 6px 10px !important;
  }

  body .bloomy-plan-modal__trust-icon,
  body .bloomy-plan-modal__safe-icon,
  body .bloomy-plan-modal__assurance-icon,
  body .bloomy-plan-modal__reassurance-icon,
  body .bloomy-plan-modal__trust-card-icon,
  body .bloomy-plan-modal__safe-card-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin-bottom: 6px !important;
  }

  body .bloomy-plan-modal__trust-item-title,
  body .bloomy-plan-modal__safe-item-title,
  body .bloomy-plan-modal__assurance-item-title,
  body .bloomy-plan-modal__reassurance-item-title,
  body .bloomy-plan-modal__trust-card-title,
  body .bloomy-plan-modal__safe-card-title {
    font-size: 11.5px !important;
  }

  body .bloomy-plan-modal__trust-item-text,
  body .bloomy-plan-modal__safe-item-text,
  body .bloomy-plan-modal__assurance-item-text,
  body .bloomy-plan-modal__reassurance-item-text,
  body .bloomy-plan-modal__trust-card-text,
  body .bloomy-plan-modal__safe-card-text {
    font-size: 10px !important;
  }
}

/* =========================================================
   Bloomy TOP Performance
   Mobile LCP / Rendering Optimization
   - Delay rendering for below-the-fold sections
   - Keep hero / filter / trustbar untouched
========================================================= */

@media (max-width: 767px) {
  .bloomy-top-howto,
  .bloomy-top-recommend,
  .bloomy-top-featured,
  .bloomy-top-review,
  .bloomy-top-reviews,
  .bloomy-top-faq,
  .bloomy-top-cta,
  .bloomy-top-final-cta {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
}
/* FAQ「もっと見る」→ よくある質問ページへ */
.bloomy-top-faq__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.bloomy-top-faq__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  border: 1px solid #d7e3fb;
  border-radius: 999px;
  background: #fff;
  color: #2f74ff;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bloomy-top-faq__more:hover {
  background: #f0f5ff;
  border-color: #b9d2ff;
  box-shadow: 0 8px 18px -10px rgba(31, 111, 255, .45);
}
.bloomy-top-faq__more-arrow { font-weight: 700; }

/* =========================================================
   English (lang="en") layout hardening — 日本語は不変
   英語はJPより語数・文字幅が長くなりやすく、JP前提の固定幅/nowrapで
   はみ出すことがあるため、英語表示時だけ折返し許可・最小幅で防御する。
   ※ すべて html[lang="en"] スコープ。lang="ja" には一切影響しない。
   ========================================================= */

/* 地域ボタン: デスクトップは6列(各セル約120px)。"North America" /
   "Middle East" が nowrap だとセル幅を超えてはみ出す → 英語のみ折返し許可。 */
html[lang="en"] .bloomy-top-area-button__label {
  white-space: normal;
  line-height: 1.15;
}

/* 最終CTA: width:264px 固定。"Find by destination" は収まる想定だが、
   文言が伸びても切れないよう、デスクトップ英語のみ最小幅化して可変に。
   （モバイルの幅指定・日本語表示はそのまま維持） */
@media (min-width: 768px) {
  html[lang="en"] .bloomy-top-final-cta__button {
    width: auto;
    min-width: 264px;
  }
}

/* ヒーロー見出し: 英語はJPより長く、デスクトップ(2カラム)で見出し枠520pxに
   1行が収まらず4行に折れていた。英語のみフォントを詰め、左カラム内(約620px)で
   枠を少し広げて、意図どおり2行に収める（日本語は clamp(46px,4.8vw,66px) のまま不変）。 */
@media (min-width: 901px) {
  html[lang="en"] .bloomy-top-hero__content {
    max-width: 620px;
  }
  html[lang="en"] .bloomy-top-hero__title {
    font-size: clamp(35px, 3.6vw, 49px);
    white-space: nowrap; /* <br> による2行は維持しつつ、各行の自動折返しを禁止 */
  }
}

/* モバイルの折りたたみフィルター見出し: 英語はJPより長く、nowrap だと右の ∨ アイコン列に
   はみ出して重なる。英語のみ折返し許可して、アイコンと衝突せず枠内に収める。 */
html[lang="en"] .bloomy-top-mobile-filter-trigger__title {
  white-space: normal !important;
}

/* モバイルのヒーロー見出し: 背景画像の右上にマスコット(ブルーミー)が居る。英語見出しは
   JPより横に長く、既定の max-width(300px≒77%) だとマスコットに被る。英語のみ見出し幅を
   58vw にキャップして右側(約42%)をマスコット用に空け、被りを防ぐ（日本語は不変）。 */
@media (max-width: 767px) {
  html[lang="en"] .bloomy-top-hero__title {
    max-width: 58vw;
    font-size: 30px;
    line-height: 1.16;
  }
}

@media (max-width: 900px) {
	/* 上中央のドラッグハンドルは1本のみ。タッチエリア拡大の疑似要素で2本線に見えていたのを解消。 */
	body .bloomy-top-page .bloomy-top-filter-sheet__handle {
		top: 12px !important;
		width: 48px !important;
		height: 5px !important;
		background: #c4cedd !important;
		border-radius: 999px !important;
	}
	body .bloomy-top-page .bloomy-top-filter-sheet__handle::after,
	body .bloomy-top-page .bloomy-top-filter-sheet__handle::before {
		content: none !important;
		display: none !important;
		background: transparent !important;
	}
	/* 引き下げ追従の滑らかさ・背景スクロール連鎖の抑止(挙動用・見た目不変) */
	body .bloomy-top-page .bloomy-top-filter-sheet { will-change: transform; }
	body .bloomy-top-page .bloomy-top-filter-sheet__scroll { overscroll-behavior: contain; }
}